/* ========================================================================== Convertly — site design (2026) Shared by every page: design tokens, type, buttons, header, cards, stats, services, steps, plans, results, chips, FAQ, blog cards, the contact card and form, footer. Page-specific styles: css/homepage-2026.css (homepage hero) and css/pages.css (inner pages). Plain CSS, no framework. Mobile-first; breakpoints at 768px and 1100px. ========================================================================== */ /* ---------- 1. Design tokens ---------- */ :root { /* Brand */ /* One red, the logo's: #ef021f. Darker steps (hover, the ends of gradients) are this red blended into the navy. */ --red: #ef021f; /* brand red — accents, pixels, borders */ --red-btn: var(--red); /* button fill (white text on it is 4.47:1) */ --red-text: var(--red); /* red text on navy (about 3.9:1: fine for large text, accents and icons) */ --red-hover: color-mix(in srgb, var(--red) 84%, var(--navy)); /* buttons on hover */ --red-deep: color-mix(in srgb, var(--red) 55%, var(--navy)); /* the dark end of red gradients */ --navy: #131827; /* page background */ --navy-deep: #0f1320; /* alternate section background */ --surface: #1a2033; /* cards */ --surface-hover: #1c2338; --white: #fefdff; /* Neutrals */ --text-soft: #c9cdda; --text-muted: #a6abbd; --text-faint: #8a90a4; --pixel-grey: #3a4260; --line: rgba(254, 253, 255, 0.08); --line-strong: rgba(254, 253, 255, 0.14); /* Type */ --font-display: "Bricolage Grotesque", "Manrope", system-ui, sans-serif; --font-accent: "Instrument Serif", Georgia, "Times New Roman", serif; --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-h1: clamp(2.875rem, 1.6rem + 5.2vw, 5.875rem); /* 46 → 94px */ --fs-h2: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); /* 36 → 56px */ --fs-h3: 1.375rem; --fs-lead: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); /* 16 → 19px */ --fs-body: 1rem; --fs-small: 0.875rem; /* Layout */ --container: 1240px; --gutter: clamp(20px, 4vw, 48px); --section-y: clamp(80px, 9vw, 128px); --radius-sm: 12px; --radius: 20px; --radius-lg: 32px; --header-h: 66px; /* the floating header card on desktop */ --header-top: 12px; /* space above it: 25px from 768px up */ } /* ---------- 2. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--navy); color: var(--white); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } a:hover { color: var(--red-text); } p { margin: 0; } h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; } h4, h5, h6 { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; } .container { max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section--deep { background: var(--navy-deep); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--red-btn); color: var(--white); padding: 12px 18px; border-radius: 8px; font-weight: 700; } .skip-link:focus { top: 16px; color: var(--white); } .icon { width: 16px; height: 16px; flex-shrink: 0; } /* ---------- 3. Type helpers ---------- */ .accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--red-text); font-size: 1.14em; line-height: 0; } .nowrap { white-space: nowrap; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-text); } .eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--red); } .lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--text-soft); } .muted { color: var(--text-muted); } .h2 { font-size: var(--fs-h2); line-height: 1.02; } /* ---------- 4. Buttons & links ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font: 700 15px/1 var(--font-body); cursor: pointer; white-space: nowrap; transition: background-color .2s, border-color .2s, transform .2s; } .btn--red { background: var(--red-btn); color: var(--white); } .btn--red:hover { background: var(--red-hover); color: var(--white); transform: translateY(-1px); } .btn--ghost { background: transparent; color: var(--white); border-color: rgba(254, 253, 255, .22); } .btn--ghost:hover { border-color: var(--white); color: var(--white); } .btn--block { width: 100%; min-height: 54px; font-size: 16px; } .text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; } /* ---------- 5. Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; padding-top: var(--header-top); pointer-events: none; } /* transparent strip: clicks pass through around the card */ @media (min-width: 768px) { :root { --header-top: 25px; } } /* The header floats: a rounded card inset from the page edges, with the page scrolling past behind it */ .site-header__inner { pointer-events: auto; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: calc(100% - 24px); max-width: calc(var(--container) + 48px); height: 60px; margin-inline: auto; padding-inline: 16px 8px; border: 1px solid var(--line-strong); border-radius: 18px; background: rgba(26, 32, 51, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 12px 32px rgba(0, 0, 0, .28); } .site-header__logo { display: flex; align-items: center; min-height: 44px; } .site-header__logo img { width: 116px; height: auto; } .site-nav { display: none; } .site-header__actions { display: flex; align-items: center; gap: 8px; } .site-header__phone { display: none; font-size: 14px; font-weight: 600; color: var(--text-soft); } .site-header__cta { display: none; } .icon-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); background: transparent; color: var(--white); cursor: pointer; } .icon-btn--red { background: var(--red-btn); border-color: var(--red-btn); } .icon-btn .icon { width: 18px; height: 18px; } /* Mobile menu panel: the site's primary menu (wp_nav_menu). "Services" is a button that opens every pillar with its pages; a parent that is also a page has an arrow button beside it. js/navigation.js toggles .open on the item. */ .mobile-menu { display: none; position: absolute; top: calc(100% + 8px); left: 12px; right: 12px; pointer-events: auto; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--navy-deep); box-shadow: 0 24px 48px rgba(0, 0, 0, .45); } .mobile-menu.is-open { display: block; max-height: calc(100vh - var(--header-top) - 78px); max-height: calc(100dvh - var(--header-top) - 78px); overflow-y: auto; overscroll-behavior: contain; } .mobile-menu__list { padding: 4px var(--gutter) 0; } .mobile-menu__list > li { position: relative; border-bottom: 1px solid var(--line); } .mobile-menu__list > li > a, .mobile-menu .menu-parent-btn { position: relative; display: block; width: 100%; padding: 14px 0; border: 0; background: none; color: var(--white); font: 600 18px/1.4 var(--font-body); text-align: left; cursor: pointer; } .mobile-menu__list > li.menu-item-has-children > a { padding-right: 56px; } .mobile-menu .submenu-toggle { position: absolute; top: 0; right: -12px; width: 56px; height: 53px; border: 0; background: none; color: var(--white); cursor: pointer; } .mobile-menu .menu-parent-btn::after, .mobile-menu .submenu-toggle::after { content: ""; position: absolute; top: 50%; right: 4px; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; } .mobile-menu .submenu-toggle::after { right: 16px; } .mobile-menu li.open > .menu-parent-btn, .mobile-menu li.current-menu-item > a, .mobile-menu li.current-menu-ancestor > .menu-parent-btn { color: var(--red-text); } .mobile-menu li.open > .menu-parent-btn::after, .mobile-menu li.open > .submenu-toggle::after { transform: translateY(4px) rotate(-135deg); } .mobile-menu__list .sub-menu { display: none; padding: 0 0 16px; } .mobile-menu__list li.open > .sub-menu { display: block; } .mobile-menu__list .sub-menu a { display: block; padding: 8px 0; font-size: 16px; font-weight: 600; color: var(--text-soft); } .mobile-menu .menu-item-mega > .sub-menu > li { padding: 6px 0; } .mobile-menu .menu-item-mega > .sub-menu > li > a { color: var(--white); } .mobile-menu .menu-item-mega .sub-menu .sub-menu { display: block; margin: 0 0 4px; padding: 0 0 0 16px; border-left: 1px solid var(--line-strong); } .mobile-menu .menu-item-mega .sub-menu .sub-menu a { padding: 6px 0; font-size: 15px; font-weight: 500; color: var(--text-muted); } .mobile-menu__list .sub-menu li.current-menu-item > a { color: var(--red-text); } .mobile-menu .menu-item-desc, .mobile-menu li.mega-feature { display: none; } /* the audit button closes this menu anyway */ .mobile-menu__cta { padding: 20px var(--gutter) 28px; } .mobile-menu__cta .btn { width: 100%; } @media (min-width: 1100px) { /* Logo | menu | phone and button: equal side columns keep the menu in the middle of the card */ .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; width: calc(100% - 2 * var(--gutter) + 48px); height: var(--header-h); padding-inline: 24px 12px; border-radius: 20px; } .site-header__logo { justify-self: start; } .site-header__logo img { width: 140px; } .site-nav { display: flex; align-self: stretch; justify-self: center; margin-left: -12px; } /* evens out the card's 24px / 12px side padding, so the menu is centred on the card */ .site-header__phone, .site-header__cta { display: inline-flex; } .site-header__actions { gap: 20px; justify-self: end; } .site-header__call, .menu-toggle, .mobile-menu, .mobile-menu.is-open { display: none; } /* Header navigation. Items fill the card's height and a bridge spans the gap below it, so the pointer never leaves them on its way into a dropdown. "Services" opens a mega menu the width of the card (functions.php: convertly_mega_menu_class); the others are ordinary dropdowns. Hover or click opens them; the dropdowns also open on keyboard focus. */ .site-nav__menu { display: flex; align-items: stretch; gap: 32px; } .site-nav__menu > li { position: relative; display: flex; align-items: center; } .site-nav__menu > li.menu-item-mega { position: static; } .site-nav__menu > li > a, .site-nav .menu-parent-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--white); font: 500 15px/1 var(--font-body); cursor: pointer; transition: color .2s; } .site-nav .menu-parent-btn::after, .site-nav__menu > li.menu-item-has-children > a::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; } .site-nav__menu > li:hover > a, .site-nav__menu > li:hover > .menu-parent-btn, .site-nav__menu > li.is-open > .menu-parent-btn { color: var(--red-text); } /* The current page (or the section it is in) is underlined */ .site-nav__menu > li.current-menu-item > a, .site-nav__menu > li.current-menu-ancestor > a, .site-nav__menu > li.current-menu-ancestor > .menu-parent-btn { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; } .site-nav__menu > li.is-open > .menu-parent-btn::after { transform: translateY(3px) rotate(-135deg); } .site-nav__menu > li > .sub-menu { position: absolute; top: calc(100% + 10px); left: -16px; z-index: 60; min-width: 240px; padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); box-shadow: 0 24px 48px rgba(0, 0, 0, .35); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility 0s linear .2s; } .site-nav__menu > li > .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; } /* hover bridge */ .site-nav__menu > li:hover > .sub-menu, .site-nav__menu > li.is-open > .sub-menu, .site-nav__menu > li:not(.menu-item-mega):focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .site-nav__menu > li:not(.menu-item-mega) > .sub-menu a { display: block; padding: 10px 12px; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--text-soft); } .site-nav__menu > li:not(.menu-item-mega) > .sub-menu a:hover, .site-nav__menu > li:not(.menu-item-mega) > .sub-menu .current-menu-item > a { background: var(--surface-hover); color: var(--white); } /* Mega menu: one column per pillar, a floating card the width of the header card */ .site-nav__menu > li.menu-item-mega > .sub-menu { left: -1px; right: -1px; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 32px; padding: 36px 32px 32px; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--navy-deep); box-shadow: 0 40px 80px rgba(0, 0, 0, .45); } .site-nav__menu > li.menu-item-mega > .sub-menu > li:not(.mega-feature) { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; } .menu-item-mega > .sub-menu > li > a { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--white); text-wrap: balance; } .menu-item-mega > .sub-menu > li:not(.mega-feature) > a::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 8px; vertical-align: -2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23ef021f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform .2s; } .menu-item-mega > .sub-menu > li > a:hover { color: var(--white); } .menu-item-mega > .sub-menu > li > a:hover::after { transform: translateX(3px); } .menu-item-mega > .sub-menu > li.current-menu-item > a, .menu-item-mega > .sub-menu > li.current-menu-parent > a { color: var(--red-text); } .site-nav .menu-item-desc { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--text-muted); } .menu-item-mega > .sub-menu > li > .sub-menu { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); } .menu-item-mega > .sub-menu > li > .sub-menu a { position: relative; display: block; padding: 6px 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--text-soft); } .menu-item-mega > .sub-menu > li > .sub-menu a::before { content: ""; position: absolute; top: 50%; left: -14px; width: 6px; height: 6px; margin-top: -3px; background: var(--red); opacity: 0; transition: opacity .15s; } .menu-item-mega > .sub-menu > li > .sub-menu a:hover, .menu-item-mega > .sub-menu > li > .sub-menu .current-menu-item > a { color: var(--white); } .menu-item-mega > .sub-menu > li > .sub-menu a:hover::before, .menu-item-mega > .sub-menu > li > .sub-menu .current-menu-item > a::before { opacity: 1; } /* The audit call to action across the foot of the panel (menu item class "mega-feature") */ .menu-item-mega > .sub-menu > li.mega-feature { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; padding: 18px 18px 18px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .mega-feature__text { font-size: 15px; color: var(--text-soft); } .menu-item-mega > .sub-menu > li.mega-feature > a { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--red-btn); color: var(--white); font: 700 14px/1 var(--font-body); letter-spacing: 0; white-space: nowrap; transition: background-color .2s; } .menu-item-mega > .sub-menu > li.mega-feature > a:hover { background: var(--red-hover); color: var(--white); } } /* ---------- 7. Section heads ---------- */ .section-head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 48px; } .section-head__text { display: flex; flex-direction: column; gap: 20px; max-width: 760px; } .section-head--center { align-items: center; text-align: center; } @media (min-width: 900px) { .section-head--split { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 56px; } .section-head--split > .btn, .section-head--split > p { flex-shrink: 0; } } /* ---------- 8. Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .25s, background-color .25s; } a.card:hover, .card--hover:hover { border-color: rgba(239,2,31,.55); background: var(--surface-hover); color: var(--white); } .chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-strong); background: #161c2d; font-weight: 600; font-size: 15px; transition: border-color .2s, background-color .2s; } a.chip:hover { border-color: var(--red); background: color-mix(in srgb, var(--red) 8%, #161c2d); color: var(--white); } .chip--sm { min-height: 34px; padding: 0 14px; font-size: 13px; } .chip--active { border-color: var(--red); } /* ---------- 9. About + stats ---------- */ .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; } .stat { padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; } .stat dt { font-size: 14px; font-weight: 600; color: var(--text-muted); } .stat dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 2rem + 2vw, 4rem); line-height: 1; letter-spacing: -0.03em; } .stat dd span { color: var(--red); } .stat--red { background: var(--red-btn); border-color: var(--red-btn); } .stat--red dt { color: var(--white); } @media (min-width: 900px) { .stats { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 32px; } .stat { padding: 32px; gap: 56px; } } /* ---------- 10. Services ---------- */ .services { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .service { padding: 28px; display: flex; flex-direction: column; gap: 14px; } .service__num { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--red-text); } .service h3 { font-size: var(--fs-h3); line-height: 1.15; } .service p { font-size: 15px; color: var(--text-muted); flex-grow: 1; } .service .text-link { font-size: 13px; } .service--featured { position: relative; overflow: hidden; padding: 40px; gap: 24px; justify-content: space-between; background: linear-gradient(160deg, color-mix(in srgb, var(--red) 10%, var(--surface)) 0%, var(--surface) 55%); } .service--featured h3 { font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem); line-height: 1.05; } .service--featured p { font-size: 17px; color: var(--text-soft); max-width: 440px; flex-grow: 0; } .service--featured .chips { display: flex; flex-wrap: wrap; gap: 8px; } .service--featured > * { position: relative; } .service__mark { position: absolute !important; right: -40px; bottom: -40px; width: 300px; height: 300px; opacity: .2; color: var(--red); } @media (min-width: 640px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } .service--featured { grid-column: span 2; } } @media (min-width: 1100px) { .services { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .service--featured { grid-column: span 2; grid-row: span 2; } .service { min-height: 230px; } } /* ---------- 11. Process ---------- */ .steps { display: grid; border-top: 1px solid rgba(254,253,255,.12); counter-reset: step; } .step { padding: 32px 0; display: flex; flex-direction: column; gap: 14px; border-bottom: 1px solid var(--line); } .step__num { font-family: var(--font-display); font-size: 64px; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--red); } .step h3 { font-size: 24px; } .step p { font-size: 15px; color: var(--text-muted); } @media (min-width: 900px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .step { padding: 36px 32px 0; border-bottom: 0; border-right: 1px solid var(--line); } .step:first-child { padding-left: 0; } .step:last-child { padding-right: 0; border-right: 0; } .step__num { font-size: 72px; } } /* ---------- 13. Pricing ---------- */ .plans { display: grid; gap: 28px 20px; } .plan { padding: 36px; display: flex; flex-direction: column; gap: 26px; } .plan h3 { font-size: 26px; } .plan__desc { font-size: 15px; color: var(--text-muted); margin-top: 8px; } .plan__price { display: flex; align-items: baseline; gap: 8px; color: var(--text-muted); } .plan__price strong { font-family: var(--font-display); font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--white); } .plan__cur { font-weight: 700; } .plan__list { display: flex; flex-direction: column; gap: 14px; font-size: 15px; flex-grow: 1; } .plan__list li { display: flex; gap: 12px; } .plan__list .icon { color: var(--red-text); width: 18px; height: 18px; margin-top: 3px; } .plan--featured { position: relative; border-radius: var(--radius); background: linear-gradient(170deg, color-mix(in srgb, var(--red) 14%, var(--surface)) 0%, #1d2439 60%); border: 1.5px solid var(--red); } .plan--featured .plan__desc, .plan--featured .plan__price { color: var(--text-soft); } .plan__badge { position: absolute; top: -15px; left: 36px; background: var(--red-btn); font-size: 12px; font-weight: 700; letter-spacing: .1em; padding: 6px 14px; border-radius: 999px; } @media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } .plan { padding: 40px; } } /* ---------- 14. Results ---------- */ .results { display: grid; gap: 20px; } .result { padding: 36px; display: flex; flex-direction: column; gap: 36px; } .result__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 700; } .result__figure { display: flex; flex-direction: column; gap: 8px; } .result__figure strong { font-family: var(--font-display); font-size: clamp(3.25rem, 2.8rem + 2vw, 4.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; } .result__figure span { color: var(--text-muted); } .review { padding: 36px; display: flex; flex-direction: column; gap: 24px; border-radius: var(--radius); background: var(--white); color: var(--navy); margin: 0; } .review__head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 15px; } .review__stars { display: flex; gap: 2px; color: var(--red-btn); } .review__stars .icon { width: 18px; height: 18px; } .review blockquote { margin: 0; font-family: var(--font-accent); font-style: italic; font-size: 28px; line-height: 1.25; flex-grow: 1; } .review figcaption { display: flex; flex-direction: column; gap: 2px; font-weight: 700; } .review figcaption span { font-weight: 500; font-size: 14px; color: #4b5166; } @media (min-width: 900px) { .results { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- 15. Industries & locations ---------- */ .split { display: grid; gap: 40px; } .split__intro { display: flex; flex-direction: column; gap: 20px; } .chip-groups { display: flex; flex-direction: column; gap: 36px; } .chip-group { display: flex; flex-direction: column; gap: 16px; } .chip-group h3 { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); } .chip-group ul { display: flex; flex-wrap: wrap; gap: 10px; } @media (min-width: 900px) { .split { grid-template-columns: 5fr 1fr 6fr; } .split > :last-child { grid-column: 3; } } /* ---------- 16. SEO content block ---------- */ .seo-copy { display: grid; gap: 40px; } .seo-copy__grid { display: grid; gap: 32px 40px; font-size: 16px; line-height: 1.75; color: var(--text-soft); } .seo-copy__grid h3 { font-size: 20px; color: var(--white); margin-bottom: 10px; letter-spacing: -0.02em; } .seo-copy__grid a { color: var(--red-text); text-decoration: underline; text-underline-offset: 3px; } .seo-copy__grid a:hover { color: var(--white); } .seo-copy h2 { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); line-height: 1.05; } @media (min-width: 700px) { .seo-copy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .seo-copy { grid-template-columns: 4fr 1fr 7fr; } .seo-copy__grid { grid-column: 3; } } /* ---------- 17. FAQ (native
, crawlable, no JS needed) ---------- */ .faq { display: grid; gap: 40px; } .faq__intro { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; } .faq__list { border-top: 1px solid rgba(254,253,255,.12); } .faq__item { border-bottom: 1px solid rgba(254,253,255,.12); } .faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; font-family: var(--font-display); font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); font-weight: 600; letter-spacing: -0.01em; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary:hover { color: var(--red-text); } .faq__icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(254,253,255,.2); display: inline-flex; align-items: center; justify-content: center; transition: transform .25s, background-color .25s, border-color .25s; color: var(--white); } .faq__item[open] .faq__icon { transform: rotate(45deg); background: var(--red-btn); border-color: var(--red-btn); } .faq__item p { padding: 0 56px 26px 0; color: var(--text-soft); line-height: 1.75; } @media (min-width: 1100px) { .faq { grid-template-columns: 4fr 1fr 7fr; } .faq__list { grid-column: 3; } } /* ---------- 18. Blog ---------- */ .posts { display: grid; gap: 20px; } .post { overflow: hidden; display: flex; flex-direction: column; } .post__media { position: relative; aspect-ratio: 1200 / 630; background: linear-gradient(135deg, #20283f, #151a2a); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--text-faint); } .post__media img { width: 100%; height: 100%; object-fit: cover; } .post__cat { position: absolute; left: 20px; top: 20px; background: var(--navy); border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--white); } .post__body { padding: 28px; display: flex; flex-direction: column; gap: 14px; } .post h3 { font-size: 22px; line-height: 1.25; } .post time, .post__meta { font-size: 14px; color: var(--text-muted); } @media (min-width: 768px) { .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- 19. Final CTA + form ---------- */ .cta { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 45%, var(--surface) 100%); padding: clamp(28px, 5vw, 72px); display: grid; gap: 40px; } .cta__mark { position: absolute; left: -60px; bottom: -80px; width: 420px; height: 420px; opacity: .14; color: var(--white); pointer-events: none; } .cta__intro { position: relative; display: flex; flex-direction: column; gap: 24px; } .cta__intro h2 { font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.75rem); line-height: 1; } .cta__intro .accent { color: var(--white); } .cta__intro p { color: #f3dfe2; } .cta__contacts { display: flex; flex-direction: column; margin-block: -7px; font-size: 15px; font-weight: 700; font-style: normal; } .cta__contacts a, .cta__contacts span { display: inline-flex; align-items: center; gap: 12px; padding-block: 7px; } /* spacing as padding: taller tap targets */ .cta__contacts a:hover { color: var(--white); text-decoration: underline; } .cta__contacts .icon { width: 18px; height: 18px; } .contact-form { position: relative; background: var(--navy); border-radius: 24px; padding: clamp(24px, 3vw, 36px); display: grid; gap: 18px 16px; } .field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-soft); margin-bottom: 8px; } .field input, .field select, .field textarea { width: 100%; height: 52px; padding: 0 16px; border-radius: var(--radius-sm); background: var(--navy-deep); border: 1px solid rgba(254,253,255,.12); color: var(--white); font: 500 15px var(--font-body); } .field textarea { height: 96px; padding: 14px 16px; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--text-faint); } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; } @media (min-width: 640px) { .contact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .field--full, .contact-form .btn { grid-column: span 2; } } @media (min-width: 1000px) { .cta { grid-template-columns: 5fr 1fr 6fr; } .contact-form { grid-column: 3; } } /* ---------- 20. Footer ---------- */ .site-footer { background: var(--navy-deep); border-top: 1px solid var(--line); padding: 72px 0 36px; } .footer-grid { display: grid; gap: 40px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 20px; } .footer-brand img { width: 150px; height: auto; } .footer-brand p { font-size: 14px; line-height: 1.7; color: var(--text-muted); max-width: 320px; } .footer-brand address { font-style: normal; display: flex; flex-direction: column; margin-block: -4px; font-size: 14px; color: var(--text-soft); line-height: 1.6; } .footer-brand address > * { padding-block: 4px; } /* spacing as padding: taller tap targets */ .footer-col { display: flex; flex-direction: column; gap: 14px; } .footer-col h2, .footer-col .footer-col__title { font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--white); margin-bottom: 4px; } .footer-col a { font-size: 14px; color: var(--text-muted); } /* Link columns: the spacing is padding on the links, so the whole row is the tap target (44px on touch screens, below) */ nav.footer-col { gap: 0; margin-bottom: -7px; } nav.footer-col .footer-col__title { margin-bottom: 11px; } nav.footer-col a { padding-block: 7px; } .footer-col a:hover { color: var(--white); } .newsletter { grid-column: 1 / -1; } .newsletter p { font-size: 14px; color: var(--text-muted); } .newsletter form { display: flex; flex-direction: column; gap: 10px; } .newsletter input { width: 100%; height: 48px; padding: 0 16px; border-radius: var(--radius-sm); background: var(--navy); border: 1px solid rgba(254,253,255,.12); color: var(--white); font: 500 15px var(--font-body); } .footer-bottom { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; font-size: 13px; color: var(--text-muted); } .footer-bottom ul { display: flex; gap: 24px; } .footer-bottom a { color: var(--text-muted); padding-block: 13px; } /* inline: a 44px tap target without moving anything */ .footer-bottom a:hover { color: var(--white); } @media (min-width: 1100px) { .footer-grid { grid-template-columns: 4fr 2fr 2fr 2fr 2fr; } .footer-brand, .newsletter { grid-column: auto; } .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } } /* Giant wordmark at the foot of the footer: the logo (footer.php passes it as --wordmark) used as a mask over a fill cut into squares, so it reads in pixels. The mark is the left 25.6% of the logo. */ .footer-wordmark { --px: clamp(4px, .75vw, 11px); width: 100%; aspect-ratio: 212 / 55; margin-top: clamp(32px, 5vw, 64px); -webkit-mask: var(--wordmark) center / contain no-repeat; mask: var(--wordmark) center / contain no-repeat; background: linear-gradient(90deg, var(--navy-deep) 18%, transparent 18%) 0 0 / var(--px) var(--px), linear-gradient(180deg, var(--navy-deep) 18%, transparent 18%) 0 0 / var(--px) var(--px), linear-gradient(90deg, rgba(239, 2, 31, .32) 0 25.6%, rgba(254, 253, 255, .09) 25.6%); } /* ---------- 21. Floating WhatsApp ---------- */ .wa-float { position: fixed; left: 16px; bottom: 16px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; background: #1f9d55; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(0,0,0,.35); color: var(--white); } .wa-float:hover { color: var(--white); background: #1a8a4a; } .wa-float .icon { width: 26px; height: 26px; } /* ========================================================================== WordPress additions Everything above comes from the design handoff's style.css (split between this file and css/homepage-2026.css), so a new version of the design can be diffed against the two. Changes there: one red throughout, the logo's #ef021f (the handoff had three), the floating header card. ========================================================================== */ /* Sticky header below the admin bar when logged in */ .admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .site-header { top: 46px; } } @media (max-width: 600px) { .admin-bar .site-header { top: 0; } } /* Jumps to #services, #pricing or #contact land below the sticky header */ section[id] { scroll-margin-top: 80px; } @media (min-width: 1100px) { section[id] { scroll-margin-top: calc(var(--header-top) + var(--header-h) + 16px); } } /* the card, the space above it and some breathing room */ /* Results with fewer than three cards */ @media (min-width: 900px) { .results--1 { grid-template-columns: minmax(0, 520px); } .results--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .review__link { margin-top: 10px; font-size: 13px; font-weight: 600; color: #4b5166; text-decoration: underline; text-underline-offset: 3px; } .review__link:hover { color: var(--red-btn); } /* Blog cards with real featured images */ .post > a { display: flex; flex-direction: column; height: 100%; } .post__cat { z-index: 1; } /* Notes that only logged-in editors see, in place of a hidden section */ .h26-note { margin: 24px 0; padding: 14px 18px; border: 1px dashed rgba(239, 2, 31, .7); border-radius: var(--radius-sm); background: var(--navy-deep); color: var(--text-soft); font-size: 14px; } .h26-note a { color: var(--white); text-decoration: underline; } /* ---------- Contact Form 7 in the contact card ---------- */ /* .contact-form is the design's two-column form grid; the CF7 wrapper is its only child, so span both */ .contact-form > .wpcf7 { grid-column: 1 / -1; min-width: 0; } .contact-form p { margin: 0; } .contact-form br { display: none; } .contact-form .row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 16px; } /* Google's reCAPTCHA box is a fixed 304px: scale it down to fit narrow phones */ @media (max-width: 420px) { .contact-form .cf7sr-g-recaptcha { transform: scale(.74); transform-origin: 0 0; margin-bottom: -20px; } } .contact-form .col-md-12 { display: flex; flex-direction: column; gap: 18px; } @media (min-width: 640px) { .contact-form .row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-form .col-md-12 { grid-column: 1 / -1; } } .contact-form .input-wrapper { display: flex; flex-direction: column; } .contact-form label { display: block; font-size: 13px; font-weight: 600; color: var(--text-soft); margin-bottom: 8px; } .contact-form .wpcf7-form-control-wrap { display: block; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form input[type="url"], .contact-form select, .contact-form textarea { width: 100%; height: 52px; padding: 0 16px; border-radius: var(--radius-sm); background: var(--navy-deep); border: 1px solid rgba(254,253,255,.12); color: var(--white); font: 500 15px var(--font-body); } .contact-form textarea { height: 96px; padding: 14px 16px; resize: vertical; } .contact-form select { -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9cdda' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; } .contact-form select option { background: var(--navy); color: var(--white); } .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--text-faint); } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; } /* Phone number with the country-code picker (js/country-code.js) */ .contact-form .cc-row { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; border-radius: var(--radius-sm); background: var(--navy-deep); border: 1px solid rgba(254,253,255,.12); } .contact-form .cc-row:focus-within { outline: 2px solid var(--red); outline-offset: 1px; } .contact-form .cc-row .wpcf7-form-control-wrap { flex: 1; min-width: 0; } .contact-form .cc-row input[type="tel"] { height: 50px; padding: 0; border: 0; background: transparent; outline: none; } .contact-form .cc-row .wpcf7-not-valid-tip { position: absolute; } .cc-dropdown { position: relative; flex-shrink: 0; } .cc-btn { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--white); font: 600 15px var(--font-body); cursor: pointer; } .cc-btn svg path { stroke: currentColor; } .cc-flag { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: block; } .cc-list { display: none; position: absolute; top: calc(100% + 3px); left: -16px; width: 190px; max-height: 260px; overflow: auto; padding: 6px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 16px 32px rgba(0,0,0,.45); z-index: 20; } .cc-list.open { display: block; } .cc-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; } .cc-option:hover { background: var(--surface-hover); } /* Submit, reCAPTCHA, validation and response */ .contact-form .captcha, .contact-form .input-btn { max-width: 100%; overflow: hidden; } /* The form's submit is a