/* ========================================================================= Airwind — main stylesheet Design tokens + components. No external deps. ~1 request, cache-friendly. ========================================================================= */ /* ---- Design tokens ---------------------------------------------------- */ :root { /* Airwind brand palette. --aw-primary = brand navy (#030E4F): links, eyebrows, dark UI, headings. --aw-lime = CTA gold (#FCBF01): button fills (paired with navy text). --aw-accent / --aw-tick = brand green (#00A300): tick marks / success. */ --aw-primary: #030E4F; /* navy — links, accents, dark sections */ --aw-primary-dark: #020A38; --aw-lime: #FCBF01; /* gold — CTA fill (variable name kept for stability) */ --aw-lime-dark: #E6AC00; --aw-tick: #00A300; /* green tick mark */ --aw-accent: #00A300; /* checks / success highlights */ --aw-ink: #05123F; /* headings (deep navy) */ /* Neutrals (cool) */ --aw-text: #3A4256; --aw-muted: #6B7280; --aw-border: #E3E6EF; --aw-bg: #F8F9FC; /* page background */ --aw-surface: #FFFFFF; /* cards */ --aw-surface-alt: #EEF1FA; /* alt sections (light navy tint) */ --aw-surface-dark: #030E4F; /* brand navy — dark sections / footer */ /* Gradients */ --aw-grad: linear-gradient(120deg, #0A1E7A 0%, var(--aw-primary) 100%); /* Typography */ --aw-display: "Bricolage Grotesque", "Arial Narrow", Impact, var(--aw-font); --aw-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --aw-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Radius */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; /* Shadow (warm, soft) */ --sh-sm: 0 1px 2px rgba(35,38,26,.05), 0 1px 3px rgba(35,38,26,.05); --sh-md: 0 10px 30px rgba(35,38,26,.08); --sh-lg: 0 26px 60px rgba(35,38,26,.12); /* Layout */ --container: 1280px; --container-narrow: 820px; --gutter: clamp(1rem, 4vw, 2rem); /* Spacing scale */ --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2.5rem; --sp-5:4rem; --sp-6:6rem; --header-h: 76px; --aw-h-scale: 1; /* heading size multiplier (Customizer) */ --aw-header-bg: rgba(248,249,252,.85); } /* ---- Dark theme (opt-in via header toggle; sets data-theme on ) --- */ :root[data-theme="dark"] { --aw-primary: #9DB0FF; /* lighter navy-blue for links on dark */ --aw-primary-dark: #C3CEFF; --aw-ink: #F2F5FF; /* headings */ --aw-text: #C6CEE6; --aw-muted: #8F98B6; --aw-border: #263153; --aw-bg: #0A1024; --aw-surface: #131B34; --aw-surface-alt: #0E1731; --aw-surface-dark: #05091A; --aw-header-bg: rgba(10,16,36,.85); --sh-sm: 0 1px 2px rgba(0,0,0,.4); --sh-md: 0 10px 30px rgba(0,0,0,.45); --sh-lg: 0 26px 60px rgba(0,0,0,.55); } /* ---- Reset / base ----------------------------------------------------- */ *,*::before,*::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--aw-font); font-size: 1.0625rem; line-height: 1.65; color: var(--aw-text); background: var(--aw-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img,svg,video { max-width: 100%; height: auto; display: block; } a { color: var(--aw-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--aw-primary-dark); } h1,h2,h3,h4,h5,h6 { font-family: var(--aw-display); color: var(--aw-ink); line-height: 1.05; letter-spacing: -.035em; margin: 0 0 .5em; font-weight: 700; text-wrap: balance; } h1 { font-size: calc(clamp(2.5rem, 5vw + 1rem, 4.75rem) * var(--aw-h-scale, 1)); } h2 { font-size: calc(clamp(1.9rem, 2.6vw + 1rem, 3rem) * var(--aw-h-scale, 1)); } h3 { font-size: calc(clamp(1.35rem, 1.1vw + 1rem, 1.75rem) * var(--aw-h-scale, 1)); letter-spacing: -.02em; } p { margin: 0 0 1rem; } ul,ol { margin: 0 0 1rem; padding-left: 1.25rem; } blockquote { margin: 0 0 1rem; } :focus-visible { outline: 3px solid var(--aw-primary); outline-offset: 2px; border-radius: 4px; } /* ---- Accessibility helpers ------------------------------------------- */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: -60px; left: 8px; z-index: 1000; background: var(--aw-ink); color: #fff; padding: .6rem 1rem; border-radius: var(--r-sm); transition: top .2s; } .skip-link:focus { top: 8px; color: #fff; } /* ---- Layout ----------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .container--wide { max-width: 1480px; } /* Full-width content — Elementor pages and the Full Width template stretch edge-to-edge; their own sections/containers control inner width. */ .site-content { width: 100%; } .entry-content--elementor, .entry-content--full { width: 100%; max-width: none; padding-inline: 0; } .page-template-template-fullwidth .site-main { width: 100%; } .section { padding-block: clamp(3rem, 6vw, 5.5rem); } .section--alt { background: var(--aw-surface-alt); } .section--dark { background: var(--aw-surface-dark); color: #C2CAE4; } .section--dark h2, .section--dark h3 { color: #fff; } .grid { display: grid; gap: 1.5rem; } .grid--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px){ .grid--3 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 620px){ .grid--3 { grid-template-columns: 1fr; } } .section-head { max-width: 720px; margin: 0 auto clamp(2rem,4vw,3rem); text-align: center; } .section-head--row { display: flex; justify-content: space-between; align-items: end; gap: 1rem; text-align: left; max-width: none; } .section-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 700; color: var(--aw-primary); margin: 0 0 .5rem; } .section-title { margin: 0 0 .5rem; } .section-lead { color: var(--aw-muted); font-size: 1.1rem; margin: 0; } .section-cta { text-align: center; margin-top: 2.5rem; } /* ---- Buttons ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none; padding: .85rem 1.4rem; border-radius: var(--r-md); border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--lg { padding: 1.05rem 1.8rem; font-size: 1.05rem; } .btn--sm { padding: .55rem 1rem; font-size: .9rem; } .btn--block { display: flex; width: 100%; } .btn--primary { background: var(--aw-lime); color: #071033; } .btn--primary:hover { background: var(--aw-lime-dark); color: #071033; box-shadow: 0 8px 22px rgba(252,191,1,.5); } .btn--outline { background: transparent; color: var(--aw-ink); border-color: var(--aw-border); } .btn--outline:hover { border-color: var(--aw-ink); color: var(--aw-ink); background: color-mix(in srgb, var(--aw-ink) 6%, transparent); } .btn--light { background: var(--aw-lime); color: #071033; } .btn--light:hover { background: var(--aw-lime-dark); color: #071033; box-shadow: var(--sh-md); } .btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); } .btn--ghost-light:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); } .btn--accent { background: var(--aw-ink); color: #fff; } .btn--accent:hover { background: #000; color: #fff; } .btn .icon { width: 18px; height: 18px; } .link-arrow { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; text-decoration: none; color: var(--aw-ink); } .link-arrow .icon { width: 18px; height: 18px; transition: transform .15s; } .link-arrow:hover { color: var(--aw-primary); } .link-arrow:hover .icon { transform: translateX(3px); } .pill { display: inline-block; font-size: .78rem; font-weight: 600; padding: .3rem .75rem; border-radius: var(--r-pill); background: rgba(3,14,79,.12); color: var(--aw-primary); text-decoration: none; } /* ---- Header ----------------------------------------------------------- */ .site-header { background: var(--aw-header-bg); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid transparent; } .has-sticky-header .site-header.is-stuck { border-bottom-color: var(--aw-border); } .has-sticky-header .site-header { position: sticky; top: 0; z-index: 100; } .site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); } .site-branding { display: flex; align-items: center; } .site-branding img, .custom-logo { max-height: 44px; width: auto; } .site-title { font-weight: 700; font-size: 1.25rem; color: var(--aw-ink); text-decoration: none; letter-spacing: -.02em; } .main-navigation { margin-left: auto; } .nav-menu { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; } .nav-menu a { display: block; padding: .6rem .85rem; color: var(--aw-ink); text-decoration: none; font-weight: 500; border-radius: var(--r-sm); font-size: .98rem; } .nav-menu a:hover, .nav-menu .current-menu-item > a { color: var(--aw-ink); background: rgba(3,14,79,.1); } .nav-menu .menu-item-has-children { position: relative; } .nav-menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: var(--r-md); box-shadow: var(--sh-lg); list-style: none; margin: .4rem 0 0; padding: .4rem; display: none; z-index: 50; } .nav-menu .sub-menu a { padding: .55rem .7rem; } .nav-menu .menu-item-has-children:hover > .sub-menu, .nav-menu .menu-item-has-children:focus-within > .sub-menu { display: block; } .site-header__actions { display: flex; align-items: center; gap: .6rem; } .header-phone { display: inline-flex; align-items: center; gap: .4rem; color: var(--aw-ink); text-decoration: none; font-weight: 600; font-size: .95rem; } .header-phone .icon { width: 18px; height: 18px; color: var(--aw-primary); } .currency-switcher { display:inline-flex; align-items:center; } .currency-switcher select { min-height:40px; border:1.5px solid var(--aw-border); border-radius:var(--r-md); background:var(--aw-surface); color:var(--aw-ink); padding:.45rem .65rem; font:600 .85rem var(--aw-font); cursor:pointer; } @media (max-width:1024px){ .currency-switcher select { min-height:38px; padding:.35rem .5rem; } } .theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--aw-border); border-radius: var(--r-md); background: transparent; color: var(--aw-ink); cursor: pointer; transition: border-color .15s, background .15s; } .theme-toggle:hover { border-color: var(--aw-ink); } .theme-toggle__moon { display: none; } :root[data-theme="dark"] .theme-toggle__sun { display: none; } :root[data-theme="dark"] .theme-toggle__moon { display: block; } .menu-toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; } .menu-toggle__bars { display: block; width: 24px; height: 16px; position: relative; } .menu-toggle__bars span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--aw-ink); border-radius: 2px; transition: transform .2s, opacity .2s; } .menu-toggle__bars span:nth-child(1){ top: 0; } .menu-toggle__bars span:nth-child(2){ top: 7px; } .menu-toggle__bars span:nth-child(3){ top: 14px; } .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2){ opacity: 0; } .menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1024px){ .header-phone { display: none; } .menu-toggle { display: inline-flex; order: 3; } /* hamburger sits far right */ .site-header__actions { margin-left: auto; } /* push actions to the right */ .main-navigation { position: fixed; top: var(--header-h); right: 0; bottom: 0; left: auto; width: min(75vw, 420px); background: var(--aw-surface); border-left: 1px solid var(--aw-border); box-shadow: -18px 0 50px rgba(0,0,0,.18); max-height: none; height: calc(100vh - var(--header-h)); overflow-y: auto; margin: 0; transform: translateX(105%); visibility:hidden; opacity:0; transition:transform .25s ease, opacity .2s ease, visibility .25s ease; z-index:110; } .main-navigation.is-open { transform: translateX(0); visibility:visible; opacity:1; } .main-navigation.is-open::before { content:""; position:fixed; top:0; right:100%; width:calc(100vw - min(75vw, 420px)); height:100vh; background:rgba(5,10,28,.42); backdrop-filter:blur(2px); } .nav-menu { flex-direction: column; padding: .75rem var(--gutter); gap: 0; } .nav-menu a { padding: .85rem .5rem; border-bottom: 1px solid var(--aw-border); border-radius: 0; } .nav-menu .sub-menu { position: static; display: block; box-shadow: none; border: 0; margin: 0 0 0 1rem; padding: 0; } .header-cta { display: inline-flex; padding: .6rem 1rem; font-size: .92rem; } /* keep CTA visible on mobile */ } @media (max-width: 420px){ .header-cta { padding: .55rem .8rem; font-size: .85rem; } .site-header__inner { gap: .5rem; } } /* ---- Hero ------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 6vw, 5.5rem); background: linear-gradient(180deg, #FBFBF7 0%, var(--aw-bg) 100%); } .hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4rem); align-items: center; } .hero__eyebrow { display: inline-block; font-weight: 600; font-size: .82rem; letter-spacing: .04em; color: var(--aw-primary); background: rgba(3,14,79,.12); padding: .4rem .85rem; border-radius: var(--r-pill); margin: 0 0 1.4rem; } .hero__title { font-size: clamp(3rem, 7vw + 1rem, 6rem); line-height: .95; letter-spacing: -.045em; margin: 0 0 1.4rem; color: var(--aw-ink); } .hero__title-accent { color: var(--aw-tick); } .hero__subtitle { font-size: 1.2rem; line-height: 1.5; color: var(--aw-muted); max-width: 40ch; margin: 0 0 1.9rem; } .hero__actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .hero__trust { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: 0; margin: 0; } .hero__trust li { display: inline-flex; align-items: center; gap: .4rem; color: var(--aw-muted); font-size: .95rem; font-weight: 500; } .hero__trust .icon { width: 18px; height: 18px; color: var(--aw-accent); } .hero__visual { position: relative; min-height: 340px; } .browser-mock { background: var(--aw-surface); border-radius: var(--r-xl); box-shadow: 0 30px 70px rgba(35,38,26,.18); border: 1px solid rgba(35,38,26,.06); overflow: hidden; transform: rotate(1.2deg); } .browser-mock__bar { display: flex; gap: 7px; padding: 13px 16px; background: var(--aw-surface-dark); } .browser-mock__bar span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.35); } .browser-mock__body { display: grid; grid-template-columns: 34% 1fr; gap: 14px; padding: 18px; } .browser-mock__side { display: grid; gap: 12px; align-content: start; background: var(--aw-surface-alt); border-radius: var(--r-md); padding: 16px; } .bm-chip { height: 22px; width: 60%; border-radius: 6px; background: var(--aw-ink); } .bm-line { height: 9px; border-radius: 5px; background: #DDE0D2; } .bm-line--short { width: 65%; } .browser-mock__main { display: grid; gap: 14px; align-content: start; } .bm-title { height: 26px; width: 55%; border-radius: 6px; background: var(--aw-ink); } .bm-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; } .bm-grid span { height: 74px; border-radius: var(--r-md); background: #EEF0E6; } .bm-grid .is-lime { background: rgba(252,191,1,.35); } .bm-actions { display: flex; align-items: center; gap: 14px; } .bm-btn { height: 40px; width: 130px; border-radius: var(--r-md); background: var(--aw-lime); } .bm-check { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(0,163,0,.15); color: var(--aw-tick); } .bm-check .icon { width: 22px; height: 22px; } .hero__toast { position: absolute; right: -6px; bottom: 18px; display: flex; align-items: center; gap: .7rem; background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: .8rem 1rem; max-width: 260px; } .hero__toast-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--aw-tick); box-shadow: 0 0 0 4px rgba(0,163,0,.28); flex: none; } .hero__toast-body { display: grid; } .hero__toast-body strong { color: var(--aw-ink); font-size: .92rem; font-family: var(--aw-display); } .hero__toast-body small { color: var(--aw-muted); font-size: .8rem; } @media (max-width: 860px){ .hero__inner { grid-template-columns: 1fr; } .hero__visual { display: none; } .hero__subtitle { max-width: none; } } /* ---- Stats ------------------------------------------------------------ */ .stats { padding-block: 2rem; border-bottom: 1px solid var(--aw-border); } .stats__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; text-align: center; } .stats__value { display: block; font-size: clamp(1.8rem,3vw,2.6rem); font-weight: 700; color: var(--aw-ink); letter-spacing: -.02em; } .stats__label { color: var(--aw-muted); font-size: .95rem; } @media (max-width: 620px){ .stats__grid { grid-template-columns: repeat(2,1fr); gap: 1.5rem; } } /* ---- Cards ------------------------------------------------------------ */ .card { background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); transition: transform .18s, box-shadow .18s, border-color .18s; } .card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: #d4dbe8; } .service-card { padding: 1.6rem; display: flex; flex-direction: column; gap: .6rem; } .service-card__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-md); background: rgba(3,14,79,.1); color: var(--aw-primary); } .service-card__icon .icon { width: 26px; height: 26px; } .service-card__title { margin: .3rem 0 0; font-size: 1.25rem; } .service-card__title a { color: var(--aw-ink); text-decoration: none; } .service-card__title a:hover { color: var(--aw-primary); } .service-card__text { color: var(--aw-muted); margin: 0; flex: 1; } .service-card .link-arrow { color: var(--aw-primary); margin-top: .4rem; } /* ---- Why ------------------------------------------------------------- */ .why-section__inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,5vw,3.5rem); align-items: center; } .why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .why-card { background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: var(--r-md); padding: 1.3rem; } .why-card__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: rgba(3,14,79,.12); color: var(--aw-accent); margin-bottom: .6rem; } .why-card__icon .icon { width: 22px; height: 22px; } .why-card__title { font-size: 1.1rem; margin: 0 0 .25rem; } .why-card__text { color: var(--aw-muted); margin: 0; font-size: .95rem; } @media (max-width: 780px){ .why-section__inner { grid-template-columns: 1fr; } .why-grid { grid-template-columns: 1fr; } } /* ---- Process ---------------------------------------------------------- */ .process-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; counter-reset: step; } .process-step { position: relative; padding: 1.4rem; border: 1px solid var(--aw-border); border-radius: var(--r-md); background: var(--aw-surface); } .process-step__num { font-family: var(--aw-mono); font-size: 1.3rem; font-weight: 700; color: var(--aw-primary); } .process-step__title { margin: .3rem 0 .25rem; font-size: 1.15rem; } .process-step__text { color: var(--aw-muted); margin: 0; font-size: .95rem; } @media (max-width: 820px){ .process-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px){ .process-grid { grid-template-columns: 1fr; } } /* ---- Feature sections ------------------------------------------------- */ .feature-section__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; } .feature-section--reverse .feature-section__body { order: 2; } .feature-badge { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .9rem; color: var(--aw-primary); background: rgba(3,14,79,.1); padding: .4rem .8rem; border-radius: var(--r-pill); margin-bottom: 1rem; } .feature-badge--light { color: #fff; background: rgba(255,255,255,.14); } .feature-badge .icon { width: 18px; height: 18px; } .check-list { list-style: none; margin: 1.25rem 0 1.75rem; padding: 0; display: grid; gap: .6rem; } .check-list li { display: flex; align-items: flex-start; gap: .6rem; } .check-list .icon { width: 20px; height: 20px; color: var(--aw-accent); flex: none; margin-top: .15rem; } .check-list--light li { color: #C2CAE4; } .check-list--light .icon { color: var(--aw-tick); } .feature-mock { background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 1.5rem; } .feature-mock--web { display: grid; gap: .7rem; } .feature-mock__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #d7deea; margin-right: 6px; } .feature-mock__bar { height: 14px; border-radius: 6px; background: #eef1f7; } .feature-mock__bar--lg { height: 26px; width: 70%; background: var(--aw-grad); opacity: .85; } .feature-mock__bar--sm { width: 45%; } .feature-mock__cta { height: 40px; width: 140px; border-radius: var(--r-sm); background: var(--aw-primary); margin-top: .5rem; } .feature-mock--seo { background: transparent; border: 0; box-shadow: none; padding: 0; display: flex; align-items: flex-end; gap: .75rem; height: 240px; } .seo-bar { flex: 1; height: var(--h); background: rgba(255,255,255,.18); border-radius: 8px 8px 0 0; } .seo-bar--peak { background: var(--aw-lime); } @media (max-width: 820px){ .feature-section__inner { grid-template-columns: 1fr; } .feature-section--reverse .feature-section__body { order: 0; } .feature-mock--seo { height: 180px; } } /* ---- Testimonials ----------------------------------------------------- */ .testimonial-card { padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem; } .testimonial-card__rating { display: flex; gap: 2px; color: var(--aw-lime); } .testimonial-card__rating .icon { width: 18px; height: 18px; } .testimonial-card__quote { font-size: 1.05rem; color: var(--aw-ink); margin: 0; } .testimonial-card__author { display: flex; align-items: center; gap: .75rem; } .testimonial-card__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .testimonial-card__avatar--placeholder { display: grid; place-items: center; background: var(--aw-grad); color: #fff; font-weight: 700; } .testimonial-card__name { display: block; font-weight: 700; color: var(--aw-ink); } .testimonial-card__role { display: block; font-size: .88rem; color: var(--aw-muted); } /* ---- Case cards ------------------------------------------------------- */ .case-card { overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; } .case-card__media img { width: 100%; height: 180px; object-fit: cover; } .case-card__body { padding: 1.3rem; display: grid; gap: .3rem; } .case-card__result { font-size: 1.5rem; font-weight: 700; color: var(--aw-accent); } .case-card__title { font-weight: 700; color: var(--aw-ink); font-size: 1.1rem; } .case-card__meta { color: var(--aw-muted); font-size: .9rem; } /* ---- Pricing ---------------------------------------------------------- */ .pricing-grid { align-items: stretch; } .pricing-card { position: relative; background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: var(--r-lg); padding: 2rem 1.6rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: var(--sh-sm); } .pricing-card--featured { border-color: var(--aw-primary); box-shadow: var(--sh-lg); transform: translateY(-6px); } .pricing-card__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--aw-primary); color: #fff; font-size: .78rem; font-weight: 600; padding: .3rem .8rem; border-radius: var(--r-pill); } .pricing-card__name { font-size: 1.3rem; margin: 0; } .pricing-card__price { margin: 0; display: flex; align-items: baseline; gap: .4rem; } .pricing-card__amount { font-size: 2rem; font-weight: 700; color: var(--aw-ink); letter-spacing: -.02em; } .pricing-card__period { color: var(--aw-muted); font-size: .9rem; } .pricing-card__blurb { color: var(--aw-muted); margin: 0; } .pricing-card__features { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; flex: 1; } .pricing-card__features li { display: flex; gap: .5rem; align-items: flex-start; font-size: .95rem; } .pricing-card__features .icon { width: 18px; height: 18px; color: var(--aw-accent); flex: none; margin-top: .2rem; } .pricing-note { text-align: center; color: var(--aw-muted); font-size: .92rem; margin-top: 1.5rem; } .pricing-compare__wrap { overflow-x: auto; border: 1px solid var(--aw-border); border-radius: var(--r-lg); background: var(--aw-surface); } .pricing-compare { width: 100%; border-collapse: collapse; min-width: 640px; } .pricing-compare th, .pricing-compare td { padding: .9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--aw-border); } .pricing-compare thead th { font-family: var(--aw-display); color: var(--aw-ink); font-size: 1.05rem; } .pricing-compare tbody th { font-weight: 600; color: var(--aw-ink); } .pricing-compare td { text-align: center; color: var(--aw-text); } .pricing-compare td:first-child, .pricing-compare th:first-child { text-align: left; } .pricing-compare tbody tr:last-child th, .pricing-compare tbody tr:last-child td { border-bottom: 0; } .pricing-compare .icon { width: 20px; height: 20px; color: var(--aw-tick); } .pricing-compare__dash { color: var(--aw-muted); } .pricing-compare thead th:nth-child(3) { background: rgba(252,191,1,.12); border-radius: 10px 10px 0 0; } /* ---- FAQ -------------------------------------------------------------- */ .faq__title { text-align: center; } .faq__list { display: grid; gap: .75rem; } /* inline content figures (service/blog images) */ .entry-content .aw-figure, .entry-content figure { margin: 1.75rem 0; } .entry-content .aw-figure img, .entry-content figure img { width: 100%; border-radius: var(--r-lg); } .entry-content figcaption, .wp-element-caption { text-align: center; color: var(--aw-muted); font-size: .9rem; margin-top: .5rem; } .service-hero-image { margin-top: 1.5rem; } .faq__item { background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: var(--r-md); padding: 0 1.2rem; } .faq__q { cursor: pointer; font-weight: 600; color: var(--aw-ink); padding: 1.1rem 0; list-style: none; position: relative; padding-right: 2rem; } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--aw-primary); line-height: 1; } .faq__item[open] .faq__q::after { content: "\2013"; } .faq__a { padding: 0 0 1.1rem; color: var(--aw-muted); } .faq__a p { margin: 0; } /* ---- CTA band --------------------------------------------------------- */ .cta-band { background: var(--aw-surface-dark); color: #fff; position: relative; overflow: hidden; } .cta-band::after { content: ""; position: absolute; right: -60px; top: -60px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(252,191,1,.2), transparent 70%); pointer-events: none; } .cta-band__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: clamp(2.5rem,5vw,4rem); } .cta-band__title { color: #fff; margin: 0 0 .4rem; } .cta-band__text { margin: 0; color: rgba(255,255,255,.78); max-width: 46ch; } .cta-band__actions { display: flex; gap: .75rem; flex-wrap: wrap; } .cta-band--compact .cta-band__inner { padding-block: 2rem; } @media (max-width: 780px){ .cta-band__inner { flex-direction: column; align-items: flex-start; text-align: left; } } .inline-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; background: var(--aw-surface-alt); border: 1px solid var(--aw-border); border-left: 4px solid var(--aw-primary); border-radius: var(--r-md); padding: 1.4rem 1.5rem; margin: 2rem 0; } .inline-cta__title { font-weight: 700; color: var(--aw-ink); margin: 0 0 .2rem; } .inline-cta__text { margin: 0; color: var(--aw-muted); font-size: .95rem; } .inline-cta .btn { flex: none; } @media (max-width: 640px){ .inline-cta { flex-direction: column; align-items: flex-start; } } /* ---- Blog list / cards ------------------------------------------------ */ .page-header { padding-block: clamp(2rem,4vw,3rem); } .page-header--blog { text-align: center; } .page-header__title { margin: 0; } .page-header__intro { color: var(--aw-muted); font-size: 1.1rem; max-width: 60ch; margin: .5rem auto 0; } .post-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.75rem; } .post-grid--3 { grid-template-columns: repeat(3,1fr); } @media (max-width: 900px){ .post-grid, .post-grid--3 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 620px){ .post-grid, .post-grid--3 { grid-template-columns: 1fr; } } .post-card { overflow: hidden; display: flex; flex-direction: column; } .post-card__media { display: block; overflow: hidden; } .post-card__media img { width: 100%; height: 200px; object-fit: cover; transition: transform .4s; } .post-card:hover .post-card__media img { transform: scale(1.04); } .post-card__body { padding: 1.3rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; } .post-card__cat { align-self: flex-start; } .post-card__title { font-size: 1.2rem; margin: 0; } .post-card__title a { color: var(--aw-ink); text-decoration: none; } .post-card__title a:hover { color: var(--aw-primary); } .post-card__excerpt { color: var(--aw-muted); font-size: .95rem; margin: 0; flex: 1; } .post-card__meta { color: var(--aw-muted); font-size: .85rem; display: flex; gap: .4rem; align-items: center; } /* ---- Blog toolbar ----------------------------------------------------- */ .blog-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem 0 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--aw-border); } .blog-toolbar__filters { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { border: 1px solid var(--aw-border); background: var(--aw-surface); color: var(--aw-text); padding: .45rem .9rem; border-radius: var(--r-pill); font-size: .9rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: all .15s; } .chip:hover { border-color: var(--aw-primary); color: var(--aw-primary); } .chip.is-active { background: var(--aw-primary); border-color: var(--aw-primary); color: #fff; } .blog-toolbar__sort { margin-left: auto; } .sort-links { display: inline-flex; gap: .25rem; background: var(--aw-surface-alt); padding: .25rem; border-radius: var(--r-pill); } .sort-link { padding: .4rem .85rem; border-radius: var(--r-pill); font-size: .88rem; font-weight: 500; color: var(--aw-muted); text-decoration: none; } .sort-link.is-active { background: var(--aw-surface); color: var(--aw-ink); box-shadow: var(--sh-sm); } .blog-toolbar__search { display: flex; position: relative; } .blog-toolbar__search input { border: 1px solid var(--aw-border); border-radius: var(--r-pill); padding: .55rem 2.4rem .55rem 1rem; font: inherit; font-size: .92rem; min-width: 200px; } .blog-toolbar__search button { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; color: var(--aw-muted); padding: .3rem; } .blog-toolbar__search .icon { width: 18px; height: 18px; } @media (max-width: 700px){ .blog-toolbar__sort, .blog-toolbar__search { margin-left: 0; width: 100%; } .blog-toolbar__search input { flex: 1; width: 100%; } } .post-card.is-hidden { display: none; } /* ---- Single article + TOC -------------------------------------------- */ .article-head { padding-block: clamp(1.5rem,3vw,2.5rem) 1rem; max-width: var(--container-narrow); } .article-title { margin: .5rem 0; } .article-standfirst { font-size: 1.25rem; color: var(--aw-muted); margin: 0 0 1rem; } .entry-categories { display: flex; gap: .4rem; flex-wrap: wrap; } .entry-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; color: var(--aw-muted); font-size: .92rem; margin-top: .5rem; } .entry-meta a { color: var(--aw-muted); } .article-hero { margin: 1.5rem auto 0; max-width: 900px; padding-inline: var(--gutter); } .article-hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); } .article-layout { display: block; padding-top: 2.5rem; padding-bottom: 3rem; } .article-layout--toc { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: clamp(2rem,5vw,4rem); align-items: start; } .article-main { min-width: 0; max-width: 760px; } .article-layout--full .article-main { margin-inline: auto; } .article-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; } .toc--desktop { border: 1px solid var(--aw-border); border-radius: var(--r-md); padding: 1.2rem; max-height: calc(100vh - var(--header-h) - 3rem); overflow-y: auto; } .toc__title { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--aw-muted); font-weight: 700; margin: 0 0 .75rem; } .toc__list, .toc__sublist { list-style: none; margin: 0; padding: 0; } .toc__sublist { padding-left: .9rem; margin-top: .2rem; } .toc__link { display: block; padding: .3rem .5rem; color: var(--aw-muted); text-decoration: none; font-size: .92rem; border-left: 2px solid transparent; border-radius: 0 4px 4px 0; line-height: 1.4; transition: color .15s, border-color .15s, background .15s; } .toc__link:hover { color: var(--aw-primary); } .toc__link.is-active { color: var(--aw-primary); border-left-color: var(--aw-primary); background: rgba(3,14,79,.08); font-weight: 600; } .toc__item--h4 .toc__link { font-size: .86rem; } .toc--mobile { display: none; border: 1px solid var(--aw-border); border-radius: var(--r-md); margin-bottom: 1.5rem; padding: 0 1rem; } .toc--mobile > .toc__title { cursor: pointer; padding: 1rem 0; margin: 0; } .toc--mobile[open] > .toc__title { border-bottom: 1px solid var(--aw-border); margin-bottom: .5rem; } .toc--mobile .toc__nav { padding-bottom: 1rem; } @media (max-width: 1000px){ .article-layout--toc { grid-template-columns: 1fr; } .article-aside { display: none; } .toc--mobile { display: block; } .article-main { max-width: none; } } /* ---- Article content typography -------------------------------------- */ .article-content { font-size: 1.12rem; } .article-content > * { margin-bottom: 1.3rem; } .article-content h2 { margin-top: 2.5rem; } .article-content h3 { margin-top: 1.8rem; } .article-content :is(h2,h3,h4) { scroll-margin-top: calc(var(--header-h) + 1rem); } .article-content img { border-radius: var(--r-md); } .article-content blockquote { border-left: 4px solid var(--aw-primary); padding: .5rem 0 .5rem 1.25rem; color: var(--aw-ink); font-size: 1.2rem; font-style: italic; } .article-content pre { background: var(--aw-ink); color: #E6EDF7; padding: 1.1rem 1.25rem; border-radius: var(--r-md); overflow-x: auto; font-family: var(--aw-mono); font-size: .92rem; } .article-content code { font-family: var(--aw-mono); font-size: .92em; background: var(--aw-surface-alt); padding: .15em .4em; border-radius: 4px; } .article-content pre code { background: none; padding: 0; } .article-content ul, .article-content ol { padding-left: 1.4rem; } .article-content li { margin-bottom: .4rem; } .entry-tags { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .entry-tags__label { font-weight: 600; color: var(--aw-ink); margin-right: .3rem; } .entry-tags a { font-size: .85rem; color: var(--aw-muted); text-decoration: none; border: 1px solid var(--aw-border); padding: .25rem .7rem; border-radius: var(--r-pill); } .entry-tags a:hover { border-color: var(--aw-primary); color: var(--aw-primary); } /* ---- Author box + post nav ------------------------------------------- */ .author-box { display: flex; gap: 1.25rem; background: var(--aw-surface-alt); border: 1px solid var(--aw-border); border-radius: var(--r-lg); padding: 1.5rem; margin: 2.5rem 0; } .author-box__avatar img { border-radius: 50%; } .author-box__eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; color: var(--aw-muted); margin: 0; font-weight: 700; } .author-box__name { margin: .1rem 0 .4rem; font-size: 1.2rem; } .author-box__name a { text-decoration: none; color: var(--aw-ink); } .author-box__bio { margin: 0; color: var(--aw-muted); } .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; } .post-nav__link { border: 1px solid var(--aw-border); border-radius: var(--r-md); padding: 1rem 1.2rem; text-decoration: none; display: grid; gap: .2rem; transition: border-color .15s; } .post-nav__link:hover { border-color: var(--aw-primary); } .post-nav__next { text-align: right; } .post-nav__dir { font-size: .82rem; color: var(--aw-muted); } .post-nav__title { font-weight: 600; color: var(--aw-ink); } @media (max-width: 640px){ .post-nav { grid-template-columns: 1fr; } .post-nav__next { text-align: left; } } .related-services { padding-block: clamp(2rem,4vw,3rem); } .related-services__title { font-size: 1.4rem; margin: 0 0 1rem; } .related-services__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; } .related-services__item { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.1rem; border: 1px solid var(--aw-border); border-radius: var(--r-md); background: var(--aw-surface); text-decoration: none; color: var(--aw-ink); font-weight: 600; transition: border-color .15s, transform .15s; } .related-services__item:hover { border-color: var(--aw-primary); transform: translateY(-2px); } .related-services__item > .icon:last-child { margin-left: auto; color: var(--aw-primary); } .related-services__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-sm); background: rgba(3,14,79,.08); color: var(--aw-primary); flex: none; } .related-services__icon .icon { width: 20px; height: 20px; } .related-services__name { flex: 1; } @media (max-width: 700px){ .related-services__grid { grid-template-columns: 1fr; } } .related-posts { background: var(--aw-surface-alt); border-top: 1px solid var(--aw-border); padding-block: clamp(2.5rem,5vw,4rem); } /* ---- Breadcrumbs ------------------------------------------------------ */ .breadcrumbs { margin-bottom: 1rem; font-size: .88rem; } .breadcrumbs__list { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 0; } .breadcrumbs__item { display: flex; align-items: center; gap: .35rem; color: var(--aw-muted); } .breadcrumbs__item:not(:last-child)::after { content: "/"; color: var(--aw-border); } .breadcrumbs a { color: var(--aw-muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--aw-primary); } .breadcrumbs [aria-current="page"] { color: var(--aw-ink); font-weight: 500; } /* ---- Pagination ------------------------------------------------------- */ .pagination { margin: 3rem 0 1rem; } .pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; } .pagination .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 .5rem; border: 1px solid var(--aw-border); border-radius: var(--r-sm); color: var(--aw-ink); text-decoration: none; font-weight: 500; } .pagination .page-numbers:hover { border-color: var(--aw-primary); color: var(--aw-primary); } .pagination .page-numbers.current { background: var(--aw-primary); border-color: var(--aw-primary); color: #fff; } /* ---- Page hero (services/pricing/etc.) ------------------------------- */ .page-hero, .contact-hero { padding-block: clamp(2.5rem,5vw,4rem) clamp(1.5rem,3vw,2.5rem); background: radial-gradient(900px 400px at 90% -20%, rgba(3,14,79,.1), transparent 60%); } .page-hero__title, .contact-hero__title { margin: .5rem 0 .5rem; } .page-hero__lead, .contact-hero__lead { color: var(--aw-muted); font-size: 1.15rem; max-width: 60ch; } .page-hero--service .page-hero__lead { margin-bottom: 1.25rem; } /* ---- Contact page ----------------------------------------------------- */ .contact-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: clamp(2rem,5vw,3rem); align-items: start; } .contact-form-panel { background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: clamp(1.5rem,3vw,2.25rem); } .contact-info { position: sticky; top: calc(var(--header-h) + 1.5rem); } .contact-info__title { font-size: 1.3rem; } .contact-info__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; } .contact-info__list li { display: flex; gap: .75rem; align-items: flex-start; } .contact-info__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--r-sm); background: rgba(3,14,79,.1); color: var(--aw-primary); } .contact-info__icon .icon { width: 20px; height: 20px; } .contact-info a { color: var(--aw-text); text-decoration: none; } .contact-info a:hover { color: var(--aw-primary); } .contact-map { margin-top: 3rem; } .contact-map iframe { display: block; } @media (max-width: 860px){ .contact-grid { grid-template-columns: 1fr; } .contact-info { position: static; } } /* ---- Forms ------------------------------------------------------------ */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 560px){ .form-row { grid-template-columns: 1fr; } } .form-field { margin: 0 0 1rem; display: grid; gap: .35rem; } .form-field label { font-weight: 600; color: var(--aw-ink); font-size: .92rem; } .form-field .req { color: #E5484D; } .contact-form input, .contact-form select, .contact-form textarea, .search-form__field { width: 100%; font: inherit; font-size: 1rem; color: var(--aw-ink); padding: .75rem .9rem; border: 1px solid var(--aw-border); border-radius: var(--r-sm); background: var(--aw-surface); transition: border-color .15s, box-shadow .15s; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--aw-primary); box-shadow: 0 0 0 3px rgba(3,14,79,.18); } .form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; } .form-privacy { color: var(--aw-muted); font-size: .85rem; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-notice { border-radius: var(--r-md); padding: 1rem 1.2rem; margin-bottom: 1.5rem; } .form-notice--success { background: rgba(3,14,79,.1); border: 1px solid rgba(3,14,79,.4); } .form-notice--error { background: rgba(229,72,77,.08); border: 1px solid rgba(229,72,77,.35); } .form-notice p { margin: .2rem 0 0; } .search-form { display: flex; gap: .5rem; max-width: 480px; } .search-form__submit { flex: none; } /* ---- Footer ----------------------------------------------------------- */ .site-footer { background: var(--aw-surface-dark); color: #97A0C0; padding-block: clamp(3rem,5vw,4rem) 2rem; } .site-footer a { color: #D3D9EC; text-decoration: none; } .site-footer a:hover { color: #fff; } .site-footer__grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.4fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.1); } .site-footer__col--contact .btn { margin-top: 1rem; } @media (max-width: 1000px){ .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } } .site-footer__brand .custom-logo { filter: brightness(0) invert(1); } .site-title--footer { color: #fff; font-weight: 700; font-size: 1.3rem; } .site-footer__about { margin: 1rem 0 1.25rem; font-size: .95rem; max-width: 40ch; } .site-footer__heading { color: #fff; font-size: 1rem; margin: 0 0 1rem; } .footer-menu, .footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .footer-contact li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; } .footer-contact .icon { width: 18px; height: 18px; color: var(--aw-primary); flex: none; margin-top: .2rem; } .site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.5rem; flex-wrap: wrap; } .site-footer__copyright { margin: 0; font-size: .9rem; } .legal-menu__list { list-style: none; display: flex; gap: 1.2rem; margin: 0; padding: 0; font-size: .9rem; } @media (max-width: 820px){ .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; } } .social-links { list-style: none; display: flex; gap: .6rem; margin: 0; padding: 0; } .social-links a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); background: rgba(255,255,255,.08); color: #D3D9EC; } .social-links a:hover { background: var(--aw-lime); color: var(--aw-ink); } .footer-contact .icon { color: var(--aw-lime); } .social-links .icon { width: 20px; height: 20px; } .contact-info .social-links a { background: var(--aw-surface-alt); color: var(--aw-primary); } /* ---- 404 -------------------------------------------------------------- */ .error-404 { text-align: center; padding-block: clamp(3rem,8vw,6rem); max-width: 620px; margin-inline: auto; } .error-404__code { font-size: clamp(4rem,12vw,7rem); font-weight: 700; color: var(--aw-primary); line-height: 1; margin: 0; letter-spacing: -.04em; } .error-404__title { margin: .5rem 0; } .error-404__text { color: var(--aw-muted); font-size: 1.1rem; } .error-404 .search-form { margin: 1.5rem auto; } .error-404__actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; } /* ---- Case study meta -------------------------------------------------- */ .case-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 0; margin: 1rem 0 0; } .case-meta li { display: grid; gap: .1rem; } .case-meta span { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--aw-muted); } .case-meta strong { color: var(--aw-ink); font-size: 1.1rem; } .case-hero-image { margin-top: 2rem; } .case-hero-image img { border-radius: var(--r-lg); width: 100%; } /* ---- Widgets ---------------------------------------------------------- */ .widget { margin-bottom: 1.5rem; } .widget__title { font-size: 1.05rem; } /* ---- Reduced motion --------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .btn:hover, .card:hover, .post-card:hover .post-card__media img { transform: none; } } /* ---- Conversion / blog enhancements --------------------------------- */ .services-secondary-note { max-width: 760px; margin: 1.5rem auto 0; text-align: center; color: var(--aw-muted); font-size: .95rem; } .pricing-core-grid { display: grid; gap: 2.5rem; } .pricing-core-block { padding: 1.5rem; border: 1px solid var(--aw-border); border-radius: var(--r-xl); background: var(--aw-surface); } .pricing-core-block--seo { background: var(--aw-surface-alt); } .pricing-core-block__head { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.25rem; } .pricing-core-block .pricing-grid { gap: 1rem; } .custom-quote-banner { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; margin-top:2rem; padding:1.25rem 1.5rem; border:1px solid var(--aw-border); border-radius:var(--r-lg); background:var(--aw-surface); box-shadow:var(--sh-sm); } .custom-quote-banner > div { display:grid; gap:.2rem; } .custom-quote-banner strong { color:var(--aw-ink); font-family:var(--aw-display); font-size:1.1rem; } .custom-quote-banner span { color:var(--aw-muted); font-size:.95rem; } .pricing-section-head { margin-bottom: 2rem; } .reading-progress { position:fixed; left:0; right:0; top:var(--header-h); height:3px; z-index:99; background:transparent; pointer-events:none; opacity:0; transition:opacity .2s; } .reading-progress.is-visible { opacity:1; } .reading-progress span { display:block; height:100%; width:0; background:var(--aw-lime); box-shadow:0 0 10px rgba(252,191,1,.35); transition:width .05s linear; } .blog-toolbar { position:sticky; top:var(--header-h); z-index:80; background:color-mix(in srgb, var(--aw-bg) 94%, transparent); backdrop-filter:saturate(140%) blur(10px); padding-inline:.75rem; margin-inline:-.75rem; } .blog-toolbar.is-stuck { box-shadow:0 8px 20px rgba(5,18,63,.08); border-bottom-color:var(--aw-border); } @media (max-width:700px) { .pricing-core-block__head, .custom-quote-banner { align-items:flex-start; flex-direction:column; } .blog-toolbar { padding-block:.75rem; margin-inline:-.5rem; } .reading-progress { top:var(--header-h); height:2px; } } /* Dark mode: deliberately redesign the homepage hero rather than simply inverting the light palette. */ :root[data-theme="dark"] .hero { background: radial-gradient(800px 500px at 82% 20%, rgba(62,91,190,.28), transparent 65%), linear-gradient(135deg, #080F25 0%, #0D1836 55%, #091126 100%); } :root[data-theme="dark"] .hero::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(5,12,30,.35), transparent 60%); } :root[data-theme="dark"] .hero__inner { position:relative; z-index:1; } :root[data-theme="dark"] .hero__eyebrow { color:#D9E1FF; background:rgba(157,176,255,.13); border:1px solid rgba(157,176,255,.16); } :root[data-theme="dark"] .hero__title-accent { color:#8BE28B; } :root[data-theme="dark"] .hero__subtitle, :root[data-theme="dark"] .hero__trust li { color:#B8C3DF; } :root[data-theme="dark"] .hero__trust .icon { color:#7FE08A; } :root[data-theme="dark"] .hero__visual .browser-mock { border-color:#2A3966; box-shadow:0 30px 80px rgba(0,0,0,.5); } :root[data-theme="dark"] .browser-mock__bar { background:#070D20; } :root[data-theme="dark"] .browser-mock__side { background:#182443; } :root[data-theme="dark"] .bm-line { background:#3A4766; } :root[data-theme="dark"] .bm-grid span { background:#202D4B; } :root[data-theme="dark"] .bm-grid .is-lime { background:rgba(252,191,1,.28); } :root[data-theme="dark"] .hero__toast { background:#121D39; border-color:#2A3966; } :root[data-theme="dark"] .page-hero, :root[data-theme="dark"] .contact-hero { background:radial-gradient(900px 400px at 90% -20%, rgba(90,112,220,.2), transparent 60%); } :root[data-theme="dark"] .nav-menu a:hover, :root[data-theme="dark"] .nav-menu .current-menu-item > a { background:rgba(157,176,255,.10); } :root[data-theme="dark"] .pill { background:rgba(157,176,255,.12); } .start-project-steps { list-style:none; padding:0; margin:0 0 1.5rem; display:grid; gap:1rem; counter-reset:step; } .start-project-steps li { display:grid; grid-template-columns:2rem 1fr; gap:.65rem; align-items:start; } .start-project-steps li::before { counter-increment:step; content:counter(step, decimal-leading-zero); font-family:var(--aw-mono); font-weight:700; color:var(--aw-primary); } .start-project-steps strong { color:var(--aw-ink); display:block; } .start-project-steps span { grid-column:2; color:var(--aw-muted); font-size:.92rem; margin-top:-.45rem; } /* ========================================================================= v5.2 Conversion layer — pricing, quote modal, calculator and blog CTAs ========================================================================= */ /* Pricing service pages */ .pricing-service-hero { background: radial-gradient(700px 350px at 85% 5%, rgba(0,163,0,.12), transparent 65%), linear-gradient(180deg, var(--aw-surface-alt), var(--aw-bg)); padding-block: clamp(2.5rem,6vw,5rem); border-bottom: 1px solid var(--aw-border); } .pricing-service-hero__title { max-width: 920px; margin: .35rem 0 1rem; } .pricing-service-hero__lead { max-width: 760px; color: var(--aw-muted); font-size: 1.15rem; } .pricing-service-hero__actions { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.5rem; } .pricing-service-switcher { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem; padding:.35rem; background:var(--aw-surface); border:1px solid var(--aw-border); border-radius:var(--r-pill); width:max-content; max-width:100%; } .pricing-service-switcher a { text-decoration:none; color:var(--aw-muted); font-weight:600; padding:.55rem 1rem; border-radius:var(--r-pill); } .pricing-service-switcher a:hover { color:var(--aw-ink); } .pricing-service-switcher a.is-active { background:var(--aw-primary); color:#fff; } .pricing-service-plans { padding-top:clamp(3rem,6vw,5rem); } .pricing-plan-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; align-items:stretch; } .pricing-plan-grid .pricing-card { min-width:0; } .pricing-card__eyebrow { margin:0; color:var(--aw-primary); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; } .pricing-service-note { margin-top:2rem; padding:1.25rem 1.5rem; border:1px solid var(--aw-border); border-radius:var(--r-lg); background:var(--aw-surface-alt); display:flex; align-items:center; gap:1rem; flex-wrap:wrap; } .pricing-service-note strong { color:var(--aw-ink); font-family:var(--aw-display); font-size:1.1rem; } .pricing-service-note span { color:var(--aw-muted); flex:1 1 300px; } .pricing-comparison-wrap { margin-top:3.5rem; } .pricing-comparison-table-wrap { overflow:auto; border:1px solid var(--aw-border); border-radius:var(--r-lg); box-shadow:var(--sh-sm); } .pricing-comparison-table { width:100%; border-collapse:collapse; min-width:760px; background:var(--aw-surface); } .pricing-comparison-table th,.pricing-comparison-table td { padding:.85rem 1rem; border-bottom:1px solid var(--aw-border); text-align:center; } .pricing-comparison-table thead th { background:var(--aw-surface-alt); color:var(--aw-ink); font-weight:700; } .pricing-comparison-table tbody th { text-align:left; color:var(--aw-ink); font-weight:600; } .pricing-comparison-table td { color:var(--aw-muted); } .pricing-check { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:rgba(0,163,0,.10); color:var(--aw-accent); font-weight:800; } .pricing-dash { color:var(--aw-border); } .pricing-process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; } .pricing-process-grid > div { padding:1.5rem; border:1px solid var(--aw-border); border-radius:var(--r-lg); background:var(--aw-surface); } .pricing-process-grid span { display:block; font:700 .8rem var(--aw-mono); color:var(--aw-primary); margin-bottom:1rem; } .pricing-process-grid h3 { font-size:1.25rem; } .pricing-process-grid p { margin:0; color:var(--aw-muted); } .aw-elementor-pricing { padding-block:clamp(2rem,5vw,5rem); } @media (max-width:1050px){ .pricing-plan-grid { grid-template-columns:repeat(2,1fr); } .pricing-process-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:620px){ .pricing-plan-grid,.pricing-process-grid { grid-template-columns:1fr; } .pricing-service-switcher { width:100%; border-radius:var(--r-lg); } .pricing-service-switcher a { flex:1 1 auto; text-align:center; } } /* Quote modal — closely follows the supplied reference: dark step header, large white form surface, obvious progress and generous controls. */ body.quote-modal-open { overflow:hidden; } .quote-modal { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:1.5rem; } .quote-modal.is-open { display:flex; } .quote-modal__backdrop { position:absolute; inset:0; background:rgba(5,10,28,.72); backdrop-filter:blur(8px); } .quote-modal__dialog { position:relative; z-index:1; width:min(860px,92vw); max-height:min(760px,calc(100vh - 4rem)); overflow:auto; background:var(--aw-surface); border:1px solid var(--aw-border); border-radius:28px; box-shadow:0 40px 100px rgba(0,0,0,.35); } .quote-modal__head { background:#0D162D; color:#fff; padding:1.45rem 1.75rem 1rem; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; } .quote-modal__title-row { display:flex; align-items:center; gap:.7rem; } .quote-modal__title-row h2 { color:#fff; font-size:clamp(1.65rem,3vw,2.35rem); margin:0; } .quote-modal__step { margin:.6rem 0 0 1.55rem; color:#C3CDE4; font-weight:600; } .quote-modal__close { width:48px; height:48px; border:1px solid #33405F; background:#1B2741; color:#B8C4DD; border-radius:16px; font-size:2.2rem; line-height:1; cursor:pointer; } .quote-modal__close:hover { color:#fff; background:#263453; } .quote-modal__progress { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; background:#0D162D; padding:0 1.75rem 1.25rem; } .quote-modal__progress span { height:8px; border-radius:999px; background:#24314C; } .quote-modal__progress span.is-active { background:#45B649; } .quote-form { padding:1.5rem 1.75rem 1.65rem; } .quote-step { display:none; } .quote-step.is-active { display:block; } .quote-step h3 { font-size:1.25rem; margin-bottom:1rem; } .quote-form label { display:grid; gap:.4rem; margin-bottom:1rem; color:var(--aw-ink); font-weight:650; } .quote-form input,.quote-form select,.quote-form textarea { width:100%; min-height:54px; border:1px solid #C9D3E4; border-radius:14px; background:var(--aw-surface); color:var(--aw-ink); padding:.85rem 1rem; font:inherit; } .quote-form textarea { resize:vertical; } .quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus { outline:none; border-color:#45B649; box-shadow:0 0 0 3px rgba(69,182,73,.14); } .quote-form__two-col { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .quote-options--grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.5rem; } .quote-option { position:relative; min-height:72px; padding:1rem 3rem 1rem 1.2rem; border:1px solid #D9E1EE; border-radius:16px; background:var(--aw-surface); color:var(--aw-ink); font:700 1rem var(--aw-display); text-align:left; cursor:pointer; } .quote-option:hover { border-color:#45B649; } .quote-option.is-selected { border:2px solid #45B649; background:rgba(69,182,73,.055); color:#3B9E40; } .quote-option__check { position:absolute; right:1rem; top:50%; transform:translateY(-50%); opacity:0; color:#45B649; font-size:1.4rem; } .quote-option.is-selected .quote-option__check { opacity:1; } .quote-modal__actions { display:flex; justify-content:flex-end; gap:.75rem; padding-top:1.25rem; margin-top:1rem; border-top:1px solid var(--aw-border); } .quote-modal__actions [data-quote-back] { margin-right:auto; } .quote-form__error { color:#C0393F; font-weight:600; min-height:1.4em; margin-top:.75rem; } .quote-form__privacy { color:var(--aw-muted); font-size:.88rem; } .quote-summary { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin:1.25rem 0; } .quote-summary > div { padding:.9rem 1rem; border:1px solid var(--aw-border); border-radius:12px; background:var(--aw-surface-alt); display:grid; gap:.2rem; } .quote-summary span { color:var(--aw-muted); font-size:.78rem; } .quote-summary strong { color:var(--aw-ink); white-space:pre-wrap; overflow-wrap:anywhere; } .quote-summary__wide { grid-column:1/-1; } .quote-success-preview { text-align:center; padding:1rem 0 1.5rem; } .quote-success-preview__icon,.quote-form__success > span { display:grid; place-items:center; width:60px; height:60px; border-radius:50%; margin:0 auto 1rem; background:rgba(69,182,73,.12); color:#45B649; font-size:2rem; font-weight:800; } .quote-form__success { text-align:center; padding:2rem 1rem; } .quote-form__success h3 { font-size:2rem; } .quote-form__success p { color:var(--aw-muted); max-width:55ch; margin:0 auto 1.5rem; } .quote-form__hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .optional { color:var(--aw-muted); font-weight:400; font-size:.85em; } @media (max-width:700px){ .quote-modal { padding:.5rem; } .quote-modal__dialog { width:min(94vw,520px); max-height:calc(100vh - 2rem); border-radius:20px; } .quote-modal__head { padding:1rem 1rem .75rem; } .quote-modal__progress { padding:0 1rem .9rem; } .quote-modal__close { width:46px; height:46px; } .quote-form { padding:1rem 1rem 1.15rem; } .quote-form__two-col,.quote-options--grid,.quote-summary { grid-template-columns:1fr; } .quote-summary__wide { grid-column:auto; } } /* Service cards are intentionally boxed on the homepage for clearer scanning. */ .services-grid .service-card { background:var(--aw-surface); border:1px solid var(--aw-border); border-radius:var(--r-lg); padding:1.6rem; box-shadow:var(--sh-sm); text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .services-grid .service-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md); border-color:rgba(3,14,79,.22); } :root[data-theme="dark"] .services-grid .service-card { background:#10182D; border-color:#2B395B; } /* Growth calculator */ .growth-calculator { display:grid; grid-template-columns:.85fr 1.15fr; gap:1.5rem; padding:clamp(1.5rem,4vw,3rem); border:1px solid var(--aw-border); border-radius:var(--r-xl); background:linear-gradient(135deg,var(--aw-surface-alt),var(--aw-surface)); box-shadow:var(--sh-md); } .growth-calculator__intro { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; } .growth-calculator__intro h2 { margin:.25rem 0 .75rem; } .growth-calculator__intro p { color:var(--aw-muted); max-width:45ch; } .growth-calculator__intro .btn { margin-top:.5rem; } .growth-calculator__panel { border:1px solid var(--aw-border); border-radius:var(--r-lg); padding:1.25rem; background:var(--aw-surface); } .growth-calculator__inputs { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .growth-calculator label { display:grid; gap:.35rem; color:var(--aw-ink); font-weight:600; font-size:.9rem; } .growth-calculator input,.growth-calculator select { width:100%; border:1px solid var(--aw-border); border-radius:10px; background:var(--aw-surface); color:var(--aw-ink); padding:.7rem .8rem; font:inherit; } .growth-calculator__results { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-top:1rem; } .growth-calculator__results > div { padding:1rem; border:1px solid var(--aw-border); border-radius:14px; background:var(--aw-surface-alt); } .growth-calculator__results span,.growth-calculator__results small { display:block; color:var(--aw-muted); font-size:.8rem; } .growth-calculator__results strong { display:block; color:var(--aw-ink); font:700 clamp(1.5rem,3vw,2.2rem) var(--aw-display); margin:.2rem 0; } .growth-calculator__result--highlight { border-color:rgba(69,182,73,.45)!important; background:rgba(69,182,73,.07)!important; } .growth-calculator__note { margin:.8rem 0 0; color:var(--aw-muted); font-size:.82rem; } @media (max-width:850px){ .growth-calculator { grid-template-columns:1fr; } } @media (max-width:600px){ .growth-calculator__inputs,.growth-calculator__results { grid-template-columns:1fr; } } /* Blog conversion */ .blog-lead-cta { margin:3rem 0; padding:clamp(1.5rem,4vw,2.5rem); border-radius:var(--r-xl); background:var(--aw-surface-dark); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; } .blog-lead-cta h2 { color:#fff; margin:.25rem 0 .5rem; } .blog-lead-cta p { color:rgba(255,255,255,.72); margin:0; max-width:58ch; } .related-case-studies { padding-block:clamp(3rem,5vw,5rem); background:var(--aw-surface-alt); } .case-study-mini { display:block; overflow:hidden; text-decoration:none; color:inherit; } .case-study-mini__media img { width:100%; height:210px; object-fit:cover; } .case-study-mini__body { padding:1.25rem; } .case-study-mini__body h3 { color:var(--aw-ink); margin:.7rem 0; } .case-study-mini__body strong { color:var(--aw-accent); } @media (max-width:700px){ .blog-lead-cta { flex-direction:column; align-items:flex-start; } } /* Dark mode: make the conversion surfaces deliberate, not inverted. */ :root[data-theme="dark"] .pricing-service-hero { background:radial-gradient(800px 400px at 85% 0%,rgba(91,115,230,.22),transparent 65%),linear-gradient(180deg,#0E1731,#0A1024); } :root[data-theme="dark"] .quote-modal__dialog { background:#10182D; } :root[data-theme="dark"] .quote-form input, :root[data-theme="dark"] .quote-form select, :root[data-theme="dark"] .quote-form textarea { border-color:#344363; background:#131D35; color:#F2F5FF; } :root[data-theme="dark"] .quote-option { border-color:#344363; background:#131D35; color:#F2F5FF; } :root[data-theme="dark"] .quote-option.is-selected { background:rgba(69,182,73,.08); } :root[data-theme="dark"] .quote-summary > div { background:#131D35; border-color:#344363; } :root[data-theme="dark"] .growth-calculator { background:linear-gradient(135deg,#0E1731,#10182D); } :root[data-theme="dark"] .growth-calculator__panel { background:#10182D; } :root[data-theme="dark"] .growth-calculator input, :root[data-theme="dark"] .growth-calculator select { background:#131D35; border-color:#344363; color:#F2F5FF; } .pricing-hub-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; } .pricing-hub-card { display:flex; flex-direction:column; padding:2rem; border:1px solid var(--aw-border); border-radius:var(--r-xl); background:var(--aw-surface); box-shadow:var(--sh-sm); } .pricing-hub-card--primary { border-color:var(--aw-primary); box-shadow:var(--sh-lg); } .pricing-hub-card h2 { font-size:2rem; margin:.2rem 0 .75rem; } .pricing-hub-card > p:not(.section-eyebrow) { color:var(--aw-muted); min-height:6rem; } .pricing-hub-card__price { font:700 1.8rem var(--aw-display); color:var(--aw-ink); margin-bottom:1rem; } .pricing-hub-card__price small { font:500 .85rem var(--aw-font); color:var(--aw-muted); } .pricing-hub-card ul { list-style:none; padding:0; margin:0 0 1.5rem; display:grid; gap:.55rem; flex:1; } .pricing-hub-card li { display:flex; gap:.45rem; color:var(--aw-text); } .pricing-hub-card li .icon { width:18px; height:18px; color:var(--aw-accent); flex:none; margin-top:.2rem; } @media (max-width:850px){ .pricing-hub-grid { grid-template-columns:1fr; } .pricing-hub-card > p:not(.section-eyebrow) { min-height:auto; } } /* v5.3 conversion polish ------------------------------------------------ */ @media (max-width:1024px){ .main-navigation{ left:auto; right:0; width:75vw; max-width:420px; height:calc(100vh - var(--header-h)); max-height:none; border-left:1px solid var(--aw-border); border-bottom:0; box-shadow:-24px 0 50px rgba(5,18,63,.18); } .main-navigation.is-open{max-height:none; overflow-y:auto;} } .blog-category-select{display:none;} @media (max-width:700px){ .blog-category-chips{display:none;} .blog-category-select{display:block; width:100%; border:1px solid var(--aw-border); background:var(--aw-surface); color:var(--aw-ink); border-radius:12px; padding:.72rem .85rem; font:inherit; font-weight:600;} .blog-toolbar__filters{width:100%;} .blog-toolbar{gap:.65rem;} } /* The quote form is intentionally compact: it should feel like a focused conversion dialog, not a full-screen takeover. */ .quote-modal__dialog{width:min(860px,calc(100% - 3rem)); max-height:82vh; border-radius:22px;} .quote-modal__head{padding:1.5rem 1.75rem 1rem;} .quote-modal__title-row h2{font-size:clamp(1.35rem,2.5vw,1.9rem);} .quote-modal__step{margin-top:.4rem;font-size:.92rem;} .quote-modal__progress{padding:0 1.75rem 1.15rem;gap:.55rem;} .quote-modal__progress span{height:6px;} .quote-modal__close{width:48px;height:48px;border-radius:13px;font-size:1.8rem;} .quote-form{padding:1.5rem 1.75rem 1.65rem;} .quote-form input,.quote-form select,.quote-form textarea{min-height:48px;padding:.7rem .85rem;border-radius:11px;} .quote-option{min-height:58px;padding:.8rem 2.6rem .8rem 1rem;border-radius:13px;font-size:.95rem;} .quote-form__actions{padding-top:1rem;} @media (max-width:700px){ .quote-modal{padding:.75rem;align-items:center;} .quote-modal__dialog{width:min(92vw,520px);max-height:90vh;border-radius:18px;} .quote-modal__head{padding:1rem 1rem .75rem;} .quote-modal__title-row{gap:.5rem;} .quote-modal__title-row h2{font-size:1.25rem;line-height:1.15;} .quote-modal__step{margin:.35rem 0 0 1rem;font-size:.8rem;} .quote-modal__progress{padding:0 1rem .8rem;gap:.4rem;} .quote-modal__close{width:40px;height:40px;font-size:1.55rem;border-radius:11px;} .quote-form{padding:1rem;} .quote-step h3{font-size:1.05rem;margin-bottom:.75rem;} .quote-form label{font-size:.88rem;margin-bottom:.75rem;} .quote-form input,.quote-form select,.quote-form textarea{min-height:44px;padding:.62rem .72rem;font-size:.92rem;} .quote-option{min-height:50px;padding:.7rem 2.3rem .7rem .8rem;border-radius:11px;font-size:.9rem;} .quote-form__actions{gap:.5rem;padding-top:.85rem;margin-top:.75rem;} .quote-modal__actions .btn{padding:.65rem .8rem;font-size:.88rem;} } .pricing-service-note__footnote{margin:1rem 0 0;color:var(--aw-muted);font-size:.86rem;} /* v5.4 final conversion/nav overrides */ .quote-modal__dialog{width:min(860px,92vw);max-height:76vh;border-radius:22px;} .quote-modal__head{padding:1.35rem 1.6rem .9rem;} .quote-modal__progress{grid-template-columns:repeat(2,1fr);padding:0 1.6rem 1rem;gap:.5rem;} .quote-modal__progress span{height:6px;} .quote-form{padding:1.35rem 1.6rem 1.45rem;} @media (max-width:700px){.quote-modal{padding:.75rem}.quote-modal__dialog{width:min(92vw,520px);max-height:86vh}.quote-modal__head{padding:.95rem 1rem .7rem}.quote-modal__progress{padding:0 1rem .75rem}.quote-form{padding:1rem}.quote-modal__actions{gap:.5rem}.quote-modal__actions .btn{padding:.62rem .75rem;font-size:.88rem}}