/** * Digital Infinite component styles. * Colors, fonts and sizes come from theme.json presets (var(--di--preset--...)). * Layout: centered statements, alternating white / light-grey bands, rounded tiles. */ :root { --di-c-base: var(--di--preset--color--base); --di-c-band: var(--di--preset--color--band); --di-c-text: var(--di--preset--color--contrast); --di-c-muted: var(--di--preset--color--muted); --di-c-hair: var(--di--preset--color--hairline); --di-c-night: var(--di--preset--color--night); --di-c-night-tile: var(--di--preset--color--night-tile); --di-c-on-night: var(--di--preset--color--on-night); --di-c-on-night-muted: var(--di--preset--color--on-night-muted); --di-c-accent: var(--di--preset--color--accent); --di-c-accent-hover: #0059D6; --di-c-mint: var(--di--preset--color--mint); --di-c-gold: var(--di--preset--color--gold); --di-f-display: var(--di--preset--font-family--display); --di-radius: 28px; --di-section: clamp(72px, 10vw, 128px); --di-admin-bar: var(--di-admin--admin-bar--height, 0px); } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4 { text-wrap: balance; } :where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--di-c-accent); outline-offset: 3px; } /* ---------- Layout resets ---------- */ /* Full-width sections sit flush against each other. */ .di-main { margin-block: 0; padding-block: 0; } .di-site-blocks > :is(.di-main, .di-footer) { margin-block-start: 0; } .di-main--landing > .di-block-post-content > * { margin-block: 0; } .di-main--page { padding-block: clamp(48px, 7vw, 96px); } .di-main--checkout { padding-block: clamp(32px, 5vw, 64px); } /* Our grids space children with gap, not flow margins. */ body :is(.di-bento, .di-plans, .di-steps, .di-stats, .di-values, .di-contact, .di-footer__grid, .di-feature) > * { margin-block: 0; } /* ---------- Header ---------- */ .di-header { position: sticky; top: var(--di-admin-bar); z-index: 50; border-bottom: 1px solid rgba(0, 0, 0, 0.08); padding-inline: var(--di--style--root--padding-left); } /* Blur lives on a pseudo-element: a backdrop-filter on the header itself would trap the full-screen mobile menu inside the header bar. */ .di-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } @media (max-width: 600px) { .di-header { top: 0; } } body .di-header__inner { max-width: var(--di--style--global--wide-size); margin-inline: auto; min-height: 52px; gap: 20px; } .di-header__actions { gap: 28px; } .di-logo { display: inline-flex; align-items: center; line-height: 0; } .di-logo img { width: 128px; height: auto; display: block; } .di-block-site-logo.di-logo img { width: 128px; height: auto; } .di-nav .di-block-navigation-item__content { color: #424245; } .di-nav .di-block-navigation-item__content:hover, .di-nav .current-menu-item > .di-block-navigation-item__content { color: var(--di-c-text); text-decoration: none; } .di-nav.di-block-navigation { gap: 28px; } .di-nav .di-block-navigation__responsive-container.is-menu-open { padding: 24px var(--di--style--root--padding-left); background: var(--di-c-base); } .di-nav .di-block-navigation__responsive-container.is-menu-open .di-block-navigation-item__content { font-family: var(--di-f-display); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; color: var(--di-c-text); padding-block: 6px; } .di-nav .di-block-navigation__responsive-container.is-menu-open :is(.di-block-navigation__responsive-container-content, .di-block-navigation__container) { align-items: center; text-align: center; gap: 8px; } .di-nav .di-block-navigation__responsive-container.is-menu-open .di-block-navigation-item { justify-content: center; } .di-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--di-c-text); text-decoration: none; } .di-cart[hidden] { display: none; } /* Desktop: menu links, then the cart, then "Get started". Mobile keeps the cart between the button and the menu. */ @media (min-width: 600px) { .di-cart { order: 1; } .di-header__cta { order: 2; } } .di-cart:hover { color: var(--di-c-accent); text-decoration: none; } .di-cart svg { width: 22px; height: 22px; } .di-cart__count { position: absolute; top: -5px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--di-c-accent); color: #fff; font: 600 11px / 18px var(--di--preset--font-family--body); text-align: center; letter-spacing: 0; box-sizing: border-box; } .di-header__cta .di-block-button__link { padding: 0.55em 1.05em; font-size: 0.8rem; white-space: nowrap; } /* Mobile header: logo on the left, then "Get started", then the menu button. The open menu starts below the header so the logo and button stay visible, and its close button sits exactly where the menu button was. */ @media (max-width: 599px) { .di-header__actions { gap: 14px; } .di-header__cta { order: -1; } /* A slide-in transform would also move the close button; fade it in instead. */ .di-nav .di-block-navigation__responsive-container.is-menu-open { animation: di-fade 0.2s ease both; transform: none; top: var(--di-menu-top, 53px); padding-top: clamp(32px, 10vh, 72px); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.08); } .di-nav .di-block-navigation__responsive-container.is-menu-open .di-block-navigation__responsive-dialog { animation: none; transform: none; } .admin-bar .di-nav .di-block-navigation__responsive-container.is-menu-open .di-block-navigation__responsive-dialog { margin-top: 0; } .di-nav .di-block-navigation__responsive-container.is-menu-open .di-block-navigation__responsive-container-close { position: fixed; top: var(--di-menu-btn-top, 14px); right: var(--di-menu-btn-right, 16px); background: var(--di-c-base); border-radius: 6px; } .di-nav .di-block-navigation__responsive-container.is-menu-open .di-block-navigation__responsive-container-content { padding-top: 0; } } @media (max-width: 359px) { .di-logo img, .di-block-site-logo.di-logo img { width: 108px; } .di-header__actions { gap: 10px; } } .di-secure { margin: 0; font-size: 0.85rem; color: var(--di-c-muted); } .di-secure::before { content: "🔒︎ "; font-size: 0.8em; filter: grayscale(1); } /* ---------- Shared type helpers ---------- */ .di-kicker { font-family: var(--di-f-display); font-weight: 600; font-size: 1.05rem; color: var(--di-c-muted); letter-spacing: -0.01em; margin-bottom: 0.75rem; } .di-lede { font-size: var(--di--preset--font-size--large); color: var(--di-c-muted); line-height: 1.4; letter-spacing: -0.02em; max-width: 34ch; } .has-text-align-center.di-lede { margin-inline: auto; } .di-caption { font-size: 12px; color: var(--di-c-muted); margin: 8px 0 0; text-align: center; } /* ---------- Buttons ---------- */ .di-block-button__link { transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .di-block-button.is-style-dark .di-block-button__link { background: var(--di-c-text); color: #fff; } .di-block-button.is-style-dark .di-block-button__link:hover { background: #3A3A3C; } .di-block-button.is-style-outline .di-block-button__link { background: transparent; color: var(--di-c-accent); border: 0; box-shadow: inset 0 0 0 1px var(--di-c-accent); padding: 0.8em 1.5em; } .di-block-button.is-style-outline .di-block-button__link:hover { background: var(--di-c-accent); color: #fff; } .di-block-button.is-style-text-link .di-block-button__link { background: transparent; color: var(--di-c-accent); padding-inline: 0.25em; font-size: 1.05rem; } .di-block-button.is-style-text-link .di-block-button__link::after { content: " ›"; } .di-block-button.is-style-text-link .di-block-button__link:hover { background: transparent; text-decoration: underline; } .di-ctas { gap: 22px; margin-top: 28px; } /* ---------- Section styles ---------- */ .di-hero, .di-statement, .di-features, .di-steps-section, .di-pricing, .di-cta, .di-features-list, .di-story-section, .di-values-section, .di-contact-section { padding-block: var(--di-section); } .di-block-group.is-style-band { background: var(--di-c-band); } .di-block-group.is-style-night { background: var(--di-c-night); color: var(--di-c-on-night); } .di-block-group.is-style-tile { background: var(--di-c-base); border-radius: var(--di-radius); padding: 32px; } .is-style-band .di-block-group.is-style-tile { background: var(--di-c-base); } :not(.is-style-band) > .di-block-group.is-style-tile:not(.di-tile--dark) { box-shadow: inset 0 0 0 1px var(--di-c-hair); } /* Hero */ .di-hero { padding-block-end: 0; overflow: hidden; } .di-hero h1 em, .di-hero h1 i { font-style: normal; background: var(--di--preset--gradient--brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .di-hero .di-lede { margin-top: 20px; } body .di-hero > .di-block-html, body .di-hero > .di-stage { max-width: 940px; } /* Device stage (hero illustration) */ /* The phone is taller than the laptop and sticks out above it; the top padding (a share of the width, like the phone) keeps that room so it never covers the buttons above. */ .di-stage { position: relative; max-width: 940px; margin: clamp(40px, 6vw, 72px) auto 0; padding-top: 8%; pointer-events: none; } .di-stage::before { content: ""; position: absolute; inset: 10% 5% -10%; background: radial-gradient(closest-side, rgba(10, 108, 255, 0.18), transparent 70%), radial-gradient(closest-side at 70% 60%, rgba(31, 181, 122, 0.16), transparent 70%); filter: blur(10px); } .di-laptop { position: relative; z-index: 1; width: 86%; margin-inline: auto; } .di-laptop__lid { background: #0C0C0D; border-radius: 18px 18px 0 0; padding: 2.2% 2.2% 0; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.45); } .di-laptop__screen { aspect-ratio: 16 / 10; border-radius: 6px 6px 0 0; overflow: hidden; background: #fff; display: flex; flex-direction: column; text-align: left; } .di-laptop__base { height: 14px; background: linear-gradient(#D9D9DE, #B5B5BB); border-radius: 0 0 14px 14px; width: 112%; margin-left: -6%; } .di-laptop__base::after { content: ""; display: block; width: 14%; height: 5px; margin: 0 auto; background: #A1A1A6; border-radius: 0 0 6px 6px; } .di-site-nav { display: flex; justify-content: space-between; align-items: center; padding: 2.4% 4%; font: 600 clamp(7px, 1.1vw, 11px) / 1.2 var(--di--preset--font-family--body); color: #1D1D1F; border-bottom: 1px solid #EEE; } .di-site-nav b { font-family: var(--di-f-display); font-weight: 800; letter-spacing: -0.03em; font-size: 1.25em; } .di-site-nav span { display: flex; gap: 1.6em; color: #6E6E73; font-weight: 500; } .di-site-nav i { font-style: normal; background: #0E7C6B; color: #fff; padding: 0.45em 1em; border-radius: 99px; } .di-site-hero { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 4%; padding: 5% 4%; background: linear-gradient(160deg, #F2FBF8, #fff 60%); align-items: center; } .di-site-hero h4 { margin: 0; font: 800 clamp(12px, 2.6vw, 28px) / 1.05 var(--di-f-display); letter-spacing: -0.04em; color: #0B3B34; } .di-site-hero p { font-size: clamp(6px, 1vw, 11px); color: #4B5B58; margin: 0.8em 0 0; line-height: 1.4; } .di-site-btns { display: flex; gap: 0.6em; margin-top: 1.2em; font: 600 clamp(6px, 0.95vw, 10px) / 1 var(--di--preset--font-family--body); } .di-site-btns span { padding: 0.7em 1.2em; border-radius: 99px; background: #0E7C6B; color: #fff; } .di-site-btns span + span { background: #fff; color: #0E7C6B; box-shadow: inset 0 0 0 1px #0E7C6B; } .di-site-photo { aspect-ratio: 4 / 3.4; border-radius: 10px; position: relative; background: radial-gradient(circle at 30% 35%, #FFE7C2 0 14%, transparent 15%), radial-gradient(ellipse at 30% 75%, #F5C08A 0 22%, transparent 23%), radial-gradient(circle at 68% 40%, #D9EFE9 0 16%, transparent 17%), radial-gradient(ellipse at 68% 80%, #9BD3C4 0 24%, transparent 25%), linear-gradient(180deg, #CFEDE5, #E9F7F3); } .di-site-photo span { position: absolute; left: 6%; bottom: 7%; background: #fff; color: #1D1D1F; font: 600 clamp(6px, 0.9vw, 10px) / 1 var(--di--preset--font-family--body); padding: 0.5em 0.8em; border-radius: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); } .di-phone { position: absolute; z-index: 2; right: 1%; bottom: -4%; width: 25%; aspect-ratio: 9 / 19; background: #0C0C0D; border-radius: 16% / 7.6%; padding: 3.2%; box-shadow: 0 40px 70px -24px rgba(0, 0, 0, 0.5); } .di-phone__screen { height: 100%; border-radius: 13% / 6.2%; overflow: hidden; background: linear-gradient(170deg, #1B3A5C 0%, #0F5D63 55%, #12856A 100%); color: #fff; display: flex; flex-direction: column; align-items: center; padding: 14% 6% 6%; gap: 4%; text-align: left; } .di-phone__time { font: 700 clamp(22px, 4.4vw, 46px) / 1 var(--di-f-display); letter-spacing: -0.03em; } .di-phone__date { font-size: clamp(7px, 1vw, 11px); opacity: 0.8; margin-top: -2%; } .di-note { width: 100%; background: rgba(255, 255, 255, 0.82); color: #1D1D1F; border-radius: clamp(8px, 1.4vw, 14px); padding: 6% 7%; font-size: clamp(6.5px, 0.95vw, 10.5px); line-height: 1.3; } .di-note b { display: flex; justify-content: space-between; font-weight: 600; } .di-note b small { font-weight: 400; color: #6E6E73; } .di-note:first-of-type { margin-top: 10%; } .di-hero .di-caption { margin-top: 36px; } @media (max-width: 640px) { .di-laptop { width: 100%; } .di-stage { margin-top: 32px; padding-top: 18%; } .di-phone { width: 34%; right: -2%; bottom: -6%; } .di-site-hero { grid-template-columns: 1fr; } .di-site-photo, .di-site-nav span { display: none; } } /* Statement */ .di-statement h2 { max-width: 16ch; margin-inline: auto; color: var(--di-c-on-night); } .di-statement h2 em { font-style: normal; color: var(--di-c-on-night-muted); } .di-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 64px; text-align: center; } .di-stat > * { margin: 0; } .di-stat__num { font: 800 clamp(2.5rem, 6vw, 4.5rem) / 1.05 var(--di-f-display); letter-spacing: -0.05em; background: linear-gradient(180deg, #fff, #8E8E93); -webkit-background-clip: text; background-clip: text; color: transparent; } .di-stat__label { color: var(--di-c-on-night-muted); font-size: 15px; margin-top: 6px; } @media (max-width: 640px) { .di-stats { grid-template-columns: 1fr; gap: 36px; } } /* Section headings */ .di-features > .di-lede, .di-pricing > .di-lede { margin-top: 14px; } .di-bento, .di-plans, .di-steps, .di-values, .di-contact { margin-top: 48px; } /* Bento grid */ .di-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; } .di-bento > .is-style-tile { display: flex; flex-direction: column; gap: 10px; overflow: hidden; min-width: 0; } .di-bento > .is-style-tile > * { margin: 0; } .di-bento > .is-style-tile > p, .di-values .is-style-tile p { color: var(--di-c-muted); font-size: 15.5px; } .di-span-2 { grid-column: span 2; } .di-span-3 { grid-column: span 3; } .di-span-4 { grid-column: span 4; } @media (max-width: 900px) { .di-span-2, .di-span-3, .di-span-4 { grid-column: span 6; } } .di-block-group.is-style-tile.di-tile--dark, .is-style-band .di-block-group.is-style-tile.di-tile--dark { background: var(--di-c-night-tile); color: var(--di-c-on-night); } .di-bento > .di-tile--dark > p { color: var(--di-c-on-night-muted); } .di-art { margin-top: auto; padding-top: 24px; } .di-bento .di-block-html { margin-top: auto; } /* Illustrations fill the tile's content width so left and right margins match. */ .di-art, .di-art * { box-sizing: border-box; } .di-bento .di-art :is(.di-inbox, .di-bubbles, .di-cal, .di-bars) { width: 100%; max-width: none; } .di-bento .di-art > .di-caption { text-align: left; } /* Illustration pieces */ .di-big-num { font: 800 clamp(3.5rem, 7vw, 5.5rem) / 1 var(--di-f-display); letter-spacing: -0.05em; } .di-stars { color: var(--di-c-gold); letter-spacing: 4px; font-size: 1.4rem; } .di-center { text-align: center; } .di-bubbles { display: grid; gap: 8px; max-width: 340px; width: 100%; } .di-bubble { padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.35; width: fit-content; max-width: 88%; } .di-bubble--in { background: #E9E9EB; color: #1D1D1F; border-bottom-left-radius: 5px; } .di-bubble--out { background: var(--di-c-accent); color: #fff; justify-self: end; border-bottom-right-radius: 5px; } .di-bubbles .di-caption { margin: 0; } .di-cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; font-size: 12px; text-align: center; width: 100%; max-width: 360px; } .di-cal span { padding: 9px 0; border-radius: 10px; background: #2C2C2E; color: var(--di-c-on-night-muted); font-variant-numeric: tabular-nums; } .di-cal span.h { background: transparent; padding: 0 0 4px; font-weight: 600; color: var(--di-c-on-night); } .di-cal span.on { background: var(--di-c-mint); color: #fff; font-weight: 600; } .di-inbox { border-radius: 16px; background: var(--di-c-band); padding: 6px 14px; width: 100%; box-sizing: border-box; } .di-inbox--white { background: var(--di-c-base); max-width: 340px; } .di-inbox > div { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; font-size: 13.5px; } .di-inbox > div + div { border-top: 1px solid var(--di-c-hair); } .di-inbox i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 600; color: #fff; } .di-inbox small { color: var(--di-c-muted); font-size: 12px; font-variant-numeric: tabular-nums; } .di-bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; width: 100%; } .di-bars span { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--di-c-accent), #7FB0FF); } /* Steps */ .di-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } .di-step { padding-top: 20px; border-top: 2px solid var(--di-c-text); } .di-step > * { margin: 0; } .di-step > * + * { margin-top: 8px; } .di-step h3 { font-size: 1.3rem; } .di-step p { color: var(--di-c-muted); font-size: 15.5px; } .di-step .di-step__n { font: 600 14px / 1.4 var(--di-f-display); } @media (max-width: 860px) { .di-steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .di-steps { grid-template-columns: 1fr; } } /* Pricing */ .di-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; } body .di-pricing > .di-plans.alignwide { max-width: 1120px; } .di-plan.is-style-tile { padding: 42px 26px 34px; display: flex; flex-direction: column; position: relative; } .di-plan > * { margin: 0; } .di-plans .di-block-group.di-plan--pick { border: 2px solid transparent; background: linear-gradient(var(--di-c-base), var(--di-c-base)) padding-box, var(--di--preset--gradient--brand) border-box; box-shadow: 0 28px 60px -28px rgba(10, 108, 255, 0.45); } .di-plan .di-plan__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: var(--di--preset--gradient--brand); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; box-shadow: 0 6px 16px -6px rgba(10, 108, 255, 0.5); } @media (min-width: 901px) { .di-plans .di-plan--pick { transform: translateY(-10px); } } .di-plan h3 { font-size: 1.75rem; margin-top: 8px; } .di-plan .di-plan__for { color: var(--di-c-muted); font-size: 15px; margin-top: 10px; min-height: 2.9em; } .di-plan .di-plan__price { font: 800 clamp(2.3rem, 3vw, 2.75rem) / 1.05 var(--di-f-display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; margin-top: 18px; } .di-plan .di-plan__per { font-size: 14px; color: var(--di-c-muted); margin-top: 6px; } .di-plan .di-block-buttons { margin-top: 22px; } .di-plan .di-plan__lead { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--di-c-hair); font-weight: 600; font-size: 15px; } .di-plan .di-plan__lead + .is-style-checks { border-top: 0; padding-top: 12px; margin-top: 0; } /* Infinite spans the row under the three plans: the plan on the left, what's included on the right in two columns. */ @media (min-width: 901px) { .di-plans .di-plan--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 18px; align-items: start; padding: 38px 26px; } .di-plan--wide > * { grid-column: 1; } .di-plan--wide .di-plan__for { min-height: 0; } .di-plan--wide .di-plan__lead, .di-plan--wide .di-plan__lead + .is-style-checks { grid-column: 2; padding-left: 44px; border-left: 1px solid var(--di-c-hair); border-top: 0; margin-top: 0; } .di-plan--wide .di-plan__lead { grid-row: 1; align-self: stretch; padding-top: 6px; } .di-plan--wide .di-plan__lead + .is-style-checks { grid-row: 2 / span 5; align-self: stretch; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; column-gap: 28px; padding-top: 16px; } } @media (max-width: 900px) { .di-plans { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; row-gap: 32px; } } .di-pricing__fine { margin-top: 12px !important; font-size: 13px; color: var(--di-c-muted); } /* Check list */ ul.is-style-checks { list-style: none; margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid var(--di-c-hair); display: grid; gap: 12px; font-size: 15px; } ul.is-style-checks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; margin: 0; } ul.is-style-checks li::before { content: ""; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--di-c-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; } /* Closing CTA */ .di-cta h2 { max-width: 14ch; margin-inline: auto; } .di-cta .di-lede { margin-top: 16px; } /* ---------- Inner pages ---------- */ .di-page-head { padding-block: clamp(64px, 9vw, 112px) clamp(40px, 6vw, 64px); } .di-page-head h1 { max-width: 14ch; margin-inline: auto; } .di-page-head .di-lede { margin-top: 20px; } .di-page-head + .di-features-list, .di-page-head + .di-story-section { padding-top: 0; } /* Services: alternating feature rows */ .di-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; } body .di-feature + .di-feature { margin-top: clamp(64px, 9vw, 112px); } .di-feature:nth-child(even) > .di-block-html, .di-feature:nth-child(even) > .di-feature__art { order: -1; } .di-feature__copy > * { margin: 0; } .di-feature__copy > * + * { margin-top: 14px; } .di-feature__tag { font-size: 13px; font-weight: 600; color: var(--di-c-accent); } .di-feature__text { color: var(--di-c-muted); font-size: 1.1rem; } ul.di-dash { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 15.5px; } ul.di-dash li::before { content: "— "; color: var(--di-c-muted); } .di-feature__art { background: var(--di-c-band); border-radius: var(--di-radius); padding: 36px; min-height: 280px; display: grid; place-items: center; align-content: center; min-width: 0; } .di-feature__art.is-dark { background: var(--di-c-night-tile); } @media (max-width: 820px) { .di-feature { grid-template-columns: 1fr; } .di-feature:nth-child(even) > .di-block-html, .di-feature:nth-child(even) > .di-feature__art { order: 0; } } /* About */ .di-story__intro { font: 700 clamp(1.5rem, 3vw, 2rem) / 1.25 var(--di-f-display); letter-spacing: -0.03em; } .di-story { font-size: 1.2rem; line-height: 1.55; color: #424245; } .di-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .di-values .is-style-tile { padding: 36px; } .di-values .is-style-tile > * { margin: 0; } .di-values .is-style-tile > * + * { margin-top: 10px; } @media (max-width: 720px) { .di-values { grid-template-columns: 1fr; } } /* Contact */ .di-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; align-items: start; } .di-contact .is-style-tile { padding: 36px; } .di-contact__details > * { margin: 0; } .di-label { font-size: 13px; color: var(--di-c-muted); } .di-value { font: 700 1.3rem / 1.3 var(--di-f-display); letter-spacing: -0.02em; margin-top: 2px; } .di-contact__details .di-value + .di-label { margin-top: 22px; } .di-contact__details .di-contact__book { margin-top: 10px; } .di-book-section { padding-block: clamp(40px, 6vw, 72px) var(--di-section); } @media (max-width: 820px) { .di-contact { grid-template-columns: 1fr; } } /* Contact form */ .di-form { display: grid; gap: 16px; } .di-form p { margin: 0; } .di-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .di-field { display: grid; gap: 6px; min-width: 0; } .di-field label { font-size: 13px; color: var(--di-c-muted); } .di-field :is(input, select, textarea) { font: inherit; font-size: 16px; padding: 14px 16px; border: 1px solid var(--di-c-hair); border-radius: 12px; background: var(--di-c-base); color: var(--di-c-text); width: 100%; box-sizing: border-box; } .di-field textarea { min-height: 120px; resize: vertical; } .di-form__submit button { cursor: pointer; border: 0; } .di-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .di-form__notice { padding: 12px 16px; border-radius: 12px; font-size: 15px; font-weight: 500; } .di-form__notice.is-success { background: #E8F7F0; color: #126B47; } .di-form__notice.is-error { background: #FDECEC; color: #A1261F; } @media (max-width: 520px) { .di-form__row { grid-template-columns: 1fr; } } /* Coming soon page */ .di-coming-soon { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } body .di-coming-soon > * { margin-block: 0; width: 100%; box-sizing: border-box; } .di-cs-top { padding-block: 28px 0; } .di-cs-top .di-logo img, .di-cs-top .di-block-site-logo img { width: 148px; } .di-coming-soon .di-cs-hero { flex: 1; padding-block: clamp(48px, 8vw, 96px) 0; } .di-cs-hero .di-lede { margin-top: 20px; } .di-cs-contact { font-size: 14px; color: var(--di-c-muted); margin-top: 18px; } .di-cs-foot { font-size: 12.5px; color: var(--di-c-muted); padding-block: 28px; background: var(--di-c-base); position: relative; z-index: 3; } .di-notify { max-width: 460px; margin: 32px auto 0; } .di-notify p { margin: 0; } .di-notify__row { display: flex; gap: 8px; padding: 6px; border: 1px solid var(--di-c-hair); border-radius: 999px; background: var(--di-c-base); } .di-notify__row input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; padding: 10px 16px; color: var(--di-c-text); } .di-notify__row input:focus { outline: none; } .di-notify__row:focus-within { box-shadow: 0 0 0 3px rgba(10, 108, 255, 0.25); border-color: var(--di-c-accent); } .di-notify__row button { cursor: pointer; border: 0; white-space: nowrap; } .di-notify .di-form__notice { margin-bottom: 10px; text-align: center; } /* Booking calendar */ .di-booking { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: var(--di-c-base); border-radius: var(--di-radius); box-shadow: 0 0 0 1px var(--di-c-hair); overflow: hidden; max-width: 880px; margin-inline: auto; text-align: left; } .di-booking p { margin: 0; } .di-booking h3 { font-size: 1.35rem; margin: 0; } .di-booking.is-loading { opacity: 0.6; transition: opacity 0.2s; } .di-booking__cal { padding: 28px; border-right: 1px solid var(--di-c-hair); } .di-booking__side { padding: 28px; min-width: 0; } .di-booking__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .di-booking__month { font: 700 1.15rem / 1.2 var(--di-f-display); letter-spacing: -0.02em; } .di-booking__nav { width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; background: var(--di-c-band); color: var(--di-c-text); font-size: 1.3rem; line-height: 1; } .di-booking__nav:hover:not(:disabled) { background: #E8E8ED; } .di-booking__nav:disabled { opacity: 0.3; cursor: default; } .di-booking__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; } .di-booking__dow { font-size: 12px; font-weight: 600; color: var(--di-c-muted); padding-block: 6px; } .di-booking__date { aspect-ratio: 1; max-width: 100%; border: 0; border-radius: 50%; background: transparent; font: 500 15px / 1 var(--di--preset--font-family--body); color: #B0B0B5; font-variant-numeric: tabular-nums; } .di-booking__date.is-open { color: var(--di-c-accent); background: rgba(10, 108, 255, 0.08); font-weight: 600; cursor: pointer; } .di-booking__date.is-open:hover { background: rgba(10, 108, 255, 0.16); } .di-booking__date.is-selected { background: var(--di-c-accent); color: #fff; } .di-booking__date.is-today:not(.is-selected) { box-shadow: inset 0 0 0 1px var(--di-c-hair); } .di-booking__tz { font-size: 12.5px; color: var(--di-c-muted); margin-top: 16px !important; } .di-booking__meta { font-size: 13px; font-weight: 600; color: var(--di-c-accent); margin-bottom: 6px !important; } .di-booking__slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; max-height: 340px; overflow-y: auto; padding: 2px; } .di-booking__slot { padding: 12px 8px; border-radius: 12px; border: 1px solid var(--di-c-hair); background: var(--di-c-base); font: 600 15px / 1 var(--di--preset--font-family--body); color: var(--di-c-text); cursor: pointer; font-variant-numeric: tabular-nums; } .di-booking__slot:hover { border-color: var(--di-c-accent); color: var(--di-c-accent); } .di-booking__empty { color: var(--di-c-muted); font-size: 15px; margin-top: 8px !important; } .di-booking__form { display: grid; gap: 12px; } .di-booking__back { justify-self: start; border: 0; background: none; padding: 0; color: var(--di-c-accent); font: 500 14px var(--di--preset--font-family--body); cursor: pointer; } .di-booking__chosen { margin-bottom: 4px !important; } .di-booking__form button[type="submit"] { border: 0; cursor: pointer; width: 100%; } .di-booking__done { text-align: center; padding-block: 24px; display: grid; gap: 10px; justify-items: center; } .di-booking__done:not([hidden]) { display: grid; } .di-booking__check { width: 56px; height: 56px; border-radius: 50%; background: var(--di-c-mint); color: #fff; display: grid; place-items: center; font-size: 28px; font-weight: 700; } .di-booking__done-when { font-weight: 600; } .di-booking__done p:last-child { color: var(--di-c-muted); font-size: 15px; } .di-booking--message { display: block; padding: 32px; text-align: center; margin-bottom: 20px; } .di-booking--message > * + * { margin-top: 12px !important; } .di-booking--message form { margin-top: 20px; } .di-booking--message button { border: 0; cursor: pointer; } .di-booking [hidden] { display: none !important; } @media (max-width: 760px) { .di-booking { grid-template-columns: 1fr; } .di-booking__cal { border-right: 0; border-bottom: 1px solid var(--di-c-hair); padding: 20px; } .di-booking__side { padding: 20px; } .di-booking__slots { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: none; } } @media (max-width: 400px) { .di-booking__slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .di-booking-prompt { margin-block: 32px; padding: 28px; border-radius: 20px; background: var(--di-c-band); } .di-booking-prompt h2 { font-size: 1.5rem; margin: 0 0 8px; } .di-booking-prompt p { margin: 0 0 14px; } /* My Account > My plan */ .di-plan-card { border-radius: 20px; box-shadow: 0 0 0 1px var(--di-c-hair); padding: 24px 28px; margin-bottom: 16px; background: var(--di-c-base); } .di-plan-card > * { margin: 0; } .di-plan-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .di-plan-card h3 { font-size: 1.4rem; margin: 0; } .di-plan-card__price { font: 700 1.6rem / 1.2 var(--di-f-display); letter-spacing: -0.03em; margin-top: 10px; } .di-plan-card__when { color: var(--di-c-muted); margin-top: 4px; } .di-plan-card__actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 18px; } .di-plan-card__actions .di-element-button { border: 0; cursor: pointer; } .di-plan-card__cancel summary { cursor: pointer; color: var(--di-c-muted); font-size: 15px; } .di-plan-card__cancel p { margin: 10px 0; font-size: 15px; color: var(--di-c-muted); } .di-inline { display: inline; margin: 0; } .di-link-danger { border: 0; background: none; padding: 0; color: #B3261E; font: inherit; font-size: 15px; cursor: pointer; text-decoration: underline; } .di-pill { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--di-c-band); color: var(--di-c-muted); } .di-pill.is-active, .di-pill.is-trialing { background: #E8F7F0; color: #126B47; } .di-pill.is-past_due, .di-pill.is-unpaid { background: #FDECEC; color: #A1261F; } .di-pill.is-ending { background: #FFF4E0; color: #8A5300; } .di-plan-receipts { color: var(--di-c-muted); font-size: 15px; } /* My plan: change plan */ .di-plan-change { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--di-c-hair); } .di-plan-change > summary { cursor: pointer; font-weight: 600; font-size: 15px; } .di-plan-change__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; } .di-plan-change__option { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 16px 18px; border-radius: 16px; background: var(--di-c-band); } .di-plan-change__info { flex: 1 1 320px; min-width: 0; } .di-plan-change__info p { margin: 0; } .di-plan-change__name strong { font-size: 17px; } .di-plan-change__name span { color: var(--di-c-muted); margin-left: 8px; font-size: 15px; } .di-plan-change__note { color: var(--di-c-muted); font-size: 14px; margin-top: 4px !important; } .di-plan-change__option form { margin: 0; } .di-plan-change__option .di-element-button { border: 0; cursor: pointer; white-space: nowrap; } .di-plan-change__option .di-element-button.is-style-outline { background: transparent; color: var(--di-c-text); box-shadow: inset 0 0 0 1.5px currentColor; } .di-plan-change__more { margin: 14px 0 0; font-size: 14px; color: var(--di-c-muted); } .di-plan-change.is-scheduled { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; } .di-plan-change.is-scheduled p { margin: 0; } @media (max-width: 560px) { .di-plan-change__option .di-element-button { width: 100%; white-space: normal; } .di-plan-change__option form { width: 100%; } } .di-per { font-size: 0.85em; color: var(--di-c-muted); } .di-pay-note { margin: 0; color: var(--di-c-muted); font-size: 15px; } /* Card form and payment confirmation */ .di-card-form { display: grid; gap: 12px; } .di-card-form__element { min-height: 44px; } .di-card-update__panel { flex-basis: 100%; display: grid; gap: 12px; margin-top: 4px; padding: 20px; border-radius: 16px; background: var(--di-c-band); max-width: 520px; } .di-card-update__panel[hidden] { display: none; } .di-card-update__buttons { display: flex; gap: 16px; align-items: center; margin: 0; } .di-card-update__buttons .di-element-button { border: 0; cursor: pointer; } .di-card-update { display: contents; } .di-link-plain { border: 0; background: none; padding: 0; color: var(--di-c-muted); font: inherit; font-size: 15px; cursor: pointer; } .di-pay-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(245, 245, 247, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .di-pay-overlay__box { background: var(--di-c-base); border-radius: 24px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.25); padding: 36px; max-width: 440px; width: 100%; text-align: center; display: grid; gap: 12px; } .di-pay-overlay__box h2 { font-size: 1.6rem; margin: 0; } .di-pay-overlay__box p { margin: 0; color: var(--di-c-muted); } .di-pay-overlay__retry .di-element-button { display: inline-block; } /* Slide-in cart */ body .di-drawer { position: fixed; inset: 0; margin: 0; z-index: 1001; } body .di-drawer[hidden] { display: none; } .di-drawer__scrim { position: absolute; inset: 0; background: rgba(29, 29, 31, 0.35); opacity: 0; transition: opacity 0.25s ease; } .di-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--di-c-base); box-shadow: -20px 0 60px -20px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); outline: none; } .di-drawer.is-open .di-drawer__scrim { opacity: 1; } .di-drawer.is-open .di-drawer__panel { transform: none; } .admin-bar .di-drawer__panel { top: var(--di-admin--admin-bar--height, 0px); } html.di-drawer-open { overflow: hidden; } .di-drawer p { margin: 0; } .di-drawer__panel [hidden] { display: none !important; } .di-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--di-c-hair); } .di-drawer__head h2 { font-size: 1.4rem; margin: 0; } .di-drawer__close { border: 0; background: var(--di-c-band); color: var(--di-c-text); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; } .di-drawer__close:hover { background: #E8E8ED; } .di-drawer__body { flex: 1; overflow-y: auto; padding: 8px 24px 24px; } .di-drawer.is-busy .di-drawer__body { opacity: 0.6; pointer-events: none; } .di-drawer__loading { color: var(--di-c-muted); padding-top: 16px; } .di-drawer__items { list-style: none; margin: 0; padding: 0; } .di-drawer__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--di-c-hair); align-items: start; } .di-drawer__thumb { width: 64px; height: 64px; border-radius: 14px; background: var(--di-c-band); overflow: hidden; } .di-drawer__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .di-drawer__name { font-weight: 600; line-height: 1.3; } .di-drawer__meta { font-size: 13px; color: var(--di-c-muted); margin-top: 2px !important; } .di-drawer__row { display: flex; align-items: center; gap: 14px; margin-top: 10px; } .di-drawer__price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .di-drawer__remove { border: 0; background: none; padding: 0; color: var(--di-c-muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; } .di-drawer__remove:hover { color: #B3261E; } .di-qty { display: inline-flex; align-items: center; border: 1px solid var(--di-c-hair); border-radius: 999px; } .di-qty__btn { border: 0; background: none; width: 32px; height: 30px; font-size: 16px; color: var(--di-c-text); cursor: pointer; } .di-qty__btn:disabled { color: var(--di-c-hair); cursor: default; } .di-qty__n { min-width: 20px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; } .di-drawer__empty { text-align: center; padding: 48px 0; display: grid; gap: 16px; justify-items: center; } .di-drawer__empty-title { font: 700 1.25rem / 1.3 var(--di-f-display); letter-spacing: -0.02em; } .di-drawer__error { margin-top: 16px !important; } .di-drawer__foot { border-top: 1px solid var(--di-c-hair); padding: 20px 24px 24px; display: grid; gap: 14px; } .di-drawer__foot[hidden] { display: none; } .di-drawer__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; } .di-drawer__total strong { font: 800 1.5rem / 1 var(--di-f-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .di-drawer__checkout { text-align: center; text-decoration: none; padding-block: 1em; } .di-drawer__checkout:hover { text-decoration: none; } .di-drawer__note { font-size: 12.5px; color: var(--di-c-muted); text-align: center; } @media (prefers-reduced-motion: reduce) { .di-drawer__panel, .di-drawer__scrim { transition: none; } } /* Popups (contact form confirmation) */ body .di-modal { position: fixed; inset: 0; margin: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(29, 29, 31, 0.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: di-fade 0.2s ease both; } body .di-modal[hidden] { display: none; } .di-modal__box { box-sizing: border-box; background: var(--di-c-base); border-radius: 24px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.35); padding: 40px 36px 36px; max-width: 420px; width: 100%; text-align: center; display: grid; gap: 12px; justify-items: center; animation: di-pop 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .di-modal__box h2 { font-size: 1.75rem; margin: 4px 0 0; } .di-modal__box p { margin: 0; color: var(--di-c-muted); } .di-modal__check { width: 64px; height: 64px; border-radius: 50%; background: var(--di-c-mint); color: #fff; display: grid; place-items: center; font-size: 30px; font-weight: 700; } .di-modal__close { margin-top: 12px; min-width: 140px; text-align: center; text-decoration: none; } .di-modal__close:hover { text-decoration: none; } html.di-modal-open { overflow: hidden; } @keyframes di-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes di-pop { from { transform: translateY(12px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } } /* Regular pages and posts */ .di-page-title { margin-bottom: 1.5rem; } .di-meta { color: var(--di-c-muted); font-size: 0.9rem; } .di-posts .di-block-post-template > li + li { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--di-c-hair); } .di-post-link a { color: var(--di-c-text); } .di-404 { text-align: center; padding-block: var(--di-section); } /* ---------- Footer ---------- */ .di-footer { background: var(--di-c-band); color: var(--di-c-muted); font-size: 12.5px; padding: 40px var(--di--style--root--padding-left) 28px; } .di-footer a { color: var(--di-c-muted); } .di-footer a:hover { color: var(--di-c-text); } body .di-footer__grid, body .di-footer__legal { max-width: var(--di--style--global--wide-size); margin-inline: auto; } .di-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--di-c-hair); } .di-footer__brand > * { margin: 0; } .di-footer__brand .di-logo img, .di-footer__brand .di-block-site-logo img { width: 140px; } .di-footer__brand p { margin-top: 12px; } .di-footer h4 { margin: 0 0 10px; font: 600 12.5px / 1.4 var(--di--preset--font-family--body); letter-spacing: 0; color: var(--di-c-text); } .di-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .di-footer__col > * { margin: 0; } body .di-footer__legal { padding-top: 18px; margin-top: 0; } .di-footer__legal p { margin: 0; } @media (max-width: 720px) { .di-footer__grid { grid-template-columns: 1fr 1fr; } .di-footer__brand { grid-column: 1 / -1; } } /* ---------- Store ---------- */ .di-shop-block-components-button:not(.is-link), .di-shop a.button, .di-shop button.button { border-radius: 999px; } .di-shop-block-components-checkout-place-order-button, .di-shop-block-cart__submit-button { background: var(--di-c-accent); color: #fff; } .di-shop-block-components-checkout-place-order-button:hover, .di-shop-block-cart__submit-button:hover { background: var(--di-c-accent-hover); } .di-shop-block-components-text-input input, .di-shop-block-components-combobox .di-shop-block-components-combobox-control input, .di-shop-blocks-components-select .di-shop-blocks-components-select__select { border-radius: 12px; } .di-block-shop-checkout-order-summary-block, .di-shop-block-components-sidebar .di-shop-block-components-panel { border-radius: 20px; } /* ---------- Motion ---------- */ @keyframes di-rise { from { transform: translateY(18px); opacity: 0.001; } to { transform: none; opacity: 1; } } .di-hero > * { animation: di-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .di-hero > :nth-child(2) { animation-delay: 0.06s; } .di-hero > :nth-child(3) { animation-delay: 0.14s; } .di-hero > :nth-child(4) { animation-delay: 0.22s; } .di-hero > :nth-child(n+5) { animation-delay: 0.3s; animation-duration: 1.2s; } .editor-styles-wrapper .di-hero > * { animation: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---------- Contractor funnel ---------- */ /* Header: logo, phone, one call to action. */ .di-header__phone { display: inline-flex; align-items: center; gap: 6px; color: var(--di-c-text); font-weight: 600; font-size: 0.9rem; white-space: nowrap; font-variant-numeric: tabular-nums; } .di-header__phone:hover { color: var(--di-c-accent); text-decoration: none; } .di-header__phone svg { flex: none; } @media (max-width: 599px) { .di-header--funnel .di-header__cta { order: 0; } .di-header--funnel .di-header__phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .di-header--funnel .di-header__phone { width: 36px; height: 36px; justify-content: center; border-radius: 50%; background: var(--di-c-band); } } .di-footer--funnel { padding-block: 28px; font-size: 13px; color: var(--di-c-muted); border-top: 1px solid var(--di-c-hair); } .di-footer--funnel p { margin: 0; } .di-footer--funnel a { color: var(--di-c-muted); } /* Hero */ .di-funnel-hero { padding-block-end: clamp(56px, 8vw, 96px); } .di-funnel-hero h1 { max-width: 15ch; margin-inline: auto; } .di-funnel-hero .di-lede { max-width: 40em; margin-inline: auto; } .di-trust { margin-top: 26px; font-size: 14px; color: var(--di-c-muted); } /* Problem */ .di-funnel-problem h2 { max-width: 20ch; } .di-problems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; } body .di-problems > * { margin-block: 0; } .di-problems .is-style-tile > * { margin: 0; } .di-problems .is-style-tile > * + * { margin-top: 10px; } .di-problems .is-style-tile h3 { font-size: 1.3rem; color: var(--di-c-on-night); } .di-problems .is-style-tile p { color: var(--di-c-on-night-muted); font-size: 15.5px; } @media (max-width: 820px) { .di-problems { grid-template-columns: 1fr; } } /* Sections */ .di-funnel-calc, .di-funnel-features, .di-funnel-faq, .di-funnel-audit { padding-block: var(--di-section); } .di-funnel-features .di-lede, .di-funnel-calc .di-lede, .di-funnel-audit .di-lede { margin-top: 14px; } /* Calculator */ .di-calc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; max-width: 980px; margin: 48px auto 0; text-align: left; } .di-calc p { margin: 0; } .di-calc__inputs { background: var(--di-c-base); border-radius: var(--di-radius); padding: 36px; display: grid; gap: 30px; align-content: center; } .di-calc__field label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 500; font-size: 15px; } .di-calc__field output { font: 700 1.3rem / 1 var(--di-f-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--di-c-text); } .di-calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 16px 0 0; border-radius: 3px; cursor: pointer; background: linear-gradient(90deg, var(--di-c-accent) var(--di-fill, 50%), #E3E3E8 var(--di-fill, 50%)); } .di-calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.04); } .di-calc input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); } .di-calc input[type="range"]:focus-visible { outline: 2px solid var(--di-c-accent); outline-offset: 6px; } .di-calc__result { background: var(--di-c-night); color: var(--di-c-on-night); border-radius: var(--di-radius); padding: 36px; display: grid; align-content: center; gap: 8px; } .di-calc__label { font-size: 14px; color: var(--di-c-on-night-muted); } .di-calc__month { font: 800 clamp(2.6rem, 5.4vw, 4rem) / 1 var(--di-f-display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; } .di-calc__month small { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--di-c-on-night-muted); } .di-calc__year { font-size: 16px; color: var(--di-c-on-night-muted); } .di-calc__year span { color: var(--di-c-on-night); font-weight: 600; } .di-calc__note { font-size: 12.5px; color: var(--di-c-on-night-muted); margin-top: 10px !important; } .di-calc__result .di-element-button { margin-top: 14px; display: inline-block; } .di-calc__result .di-element-button:hover { text-decoration: none; } @media (max-width: 820px) { .di-calc { grid-template-columns: 1fr; } .di-calc__inputs, .di-calc__result { padding: 28px; } } /* FAQ */ .di-faqs { max-width: 760px; margin: 40px auto 0; border-top: 1px solid var(--di-c-hair); } body .di-faqs > * { margin-block: 0; } .di-faq { border-bottom: 1px solid var(--di-c-hair); } .di-faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font: 600 1.1rem / 1.35 var(--di-f-display); letter-spacing: -0.015em; } .di-faq summary::-webkit-details-marker { display: none; } .di-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 1.6rem / 1 var(--di--preset--font-family--body); color: var(--di-c-muted); transition: transform 0.2s; } .di-faq[open] summary::after { transform: translateY(-50%) rotate(45deg); } .di-faq p { margin: 0 0 22px; color: var(--di-c-muted); max-width: 62ch; } /* Audit offer and form */ .di-audit { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px; margin-top: 48px; align-items: start; text-align: left; } body .di-audit > * { margin-block: 0; } .di-audit .is-style-tile { padding: 36px; } .di-audit__offer > * { margin: 0; } .di-audit__offer h3 { font-size: 1.4rem; } .di-audit:has(.di-funnel-done:not([hidden])) { grid-template-columns: 1fr; } .di-audit:has(.di-funnel-done:not([hidden])) .di-audit__offer { display: none; } @media (max-width: 820px) { .di-audit { grid-template-columns: 1fr; } .di-audit__form { order: -1; } .di-audit .is-style-tile { padding: 26px 20px; } } .di-funnel-form { display: grid; gap: 18px; } .di-funnel-form[hidden] { display: none !important; } .di-funnel-form p { margin: 0; } .di-funnel-form [hidden] { display: none !important; } .di-steps-bar { height: 6px; border-radius: 3px; background: var(--di-c-band); overflow: hidden; } .di-steps-bar span { display: block; height: 100%; border-radius: 3px; background: var(--di--preset--gradient--brand); transition: width 0.3s ease; } .di-funnel-form__count { font-size: 13px; font-weight: 600; color: var(--di-c-accent); margin-top: -6px !important; } .di-fstep { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; } .di-fstep legend { padding: 0; margin-bottom: 14px; font: 700 clamp(1.3rem, 2.4vw, 1.6rem) / 1.2 var(--di-f-display); letter-spacing: -0.025em; } .di-fstep__hint { margin-top: -8px !important; font-size: 14px; color: var(--di-c-muted); } .di-chips { display: flex; flex-wrap: wrap; gap: 10px; } .di-chip { position: relative; cursor: pointer; } .di-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .di-chip span { display: inline-flex; align-items: center; gap: 8px; padding: 13px 18px; border-radius: 999px; border: 1px solid var(--di-c-hair); background: var(--di-c-base); font-size: 15px; font-weight: 500; transition: border-color 0.15s, background-color 0.15s, color 0.15s; } .di-chip:hover span { border-color: var(--di-c-accent); } .di-chip input:checked + span { border-color: var(--di-c-accent); background: rgba(10, 108, 255, 0.08); color: var(--di-c-accent); } .di-chip input[type="checkbox"]:checked + span::before { content: "✓"; font-weight: 700; } .di-chip input:focus-visible + span { outline: 2px solid var(--di-c-accent); outline-offset: 2px; } .di-funnel-form .di-field input[aria-invalid="true"] { border-color: #D93025; box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12); } .di-funnel-form .di-field input:focus { outline: none; border-color: var(--di-c-accent); box-shadow: 0 0 0 3px rgba(10, 108, 255, 0.2); } .di-funnel-form__consent { font-size: 12px; line-height: 1.45; color: var(--di-c-muted); } .di-funnel-form__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .di-funnel-form__next { border: 0; cursor: pointer; margin-left: auto; padding: 1em 1.8em; } .di-funnel-form__next:disabled { opacity: 0.6; cursor: progress; } .di-funnel-form[aria-busy="true"] { opacity: 0.85; } @media (max-width: 520px) { .di-funnel-form__next { flex: 1; } } .di-funnel-done { text-align: center; } .di-funnel-done:not([hidden]) { display: grid; gap: 12px; justify-items: center; } .di-funnel-done > * { margin: 0; } .di-funnel-done h3 { font-size: 1.6rem; } .di-funnel-done > p { color: var(--di-c-muted); } .di-funnel-done .di-booking { width: 100%; margin-top: 12px; } .di-funnel-done__later { font-size: 14px; } .di-funnel-done:focus { outline: none; } /* Mobile sticky bar */ .di-sticky-cta { display: none; } @media (max-width: 781px) { .di-sticky-cta { display: flex; gap: 10px; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90; padding: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.05); transform: translateY(calc(100% + 30px)); transition: transform 0.3s ease; } .di-sticky-cta.is-shown { transform: none; } .di-sticky-cta.is-shown.is-hidden { transform: translateY(calc(100% + 30px)); } .di-sticky-cta a { flex: 1; text-align: center; padding: 14px 10px; border-radius: 999px; font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none; } .di-sticky-cta a:hover { text-decoration: none; } .di-sticky-cta__call { flex: 0 0 34% !important; background: var(--di-c-band); color: var(--di-c-text); } .di-main--funnel { padding-bottom: 72px; } } @media (prefers-reduced-motion: reduce) { .di-sticky-cta, .di-steps-bar span { transition: none; } } /* Funnel proof: case studies and testimonials */ .di-proof { background: var(--di-c-band); padding: var(--di-section) var(--di--style--root--padding-right, 22px) var(--di-section) var(--di--style--root--padding-left, 22px); } .di-proof__inner { max-width: var(--di--style--global--wide-size, 1080px); margin-inline: auto; } .di-proof h2 { margin: 0 auto; max-width: 18ch; } .di-cases { display: grid; gap: 20px; margin-top: 48px; } .di-case { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); background: var(--di-c-base); border-radius: var(--di-radius); overflow: hidden; } .di-case:not(:has(.di-case__photo)) { grid-template-columns: 1fr; } .di-case__photo img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; } .di-case__body { padding: clamp(28px, 4vw, 44px); display: grid; gap: 14px; align-content: center; } .di-case__body > * { margin: 0; } .di-case__kicker { font-size: 13px; font-weight: 600; color: var(--di-c-accent); } .di-case h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); } .di-case__summary { color: var(--di-c-muted); } .di-case__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 6px 0 0; } .di-case__metrics > div { background: var(--di-c-band); border-radius: 16px; padding: 14px 16px; } .di-case__metrics dt { font-size: 13px; color: var(--di-c-muted); } .di-case__metrics dd { margin: 4px 0 0; font-variant-numeric: tabular-nums; } .di-case__before { color: var(--di-c-muted); text-decoration: line-through; text-decoration-color: rgba(110, 110, 115, 0.5); } .di-case__after { font: 800 1.5rem / 1.1 var(--di-f-display); letter-spacing: -0.03em; color: var(--di-c-text); } .di-case__quote { margin: 4px 0 0; padding-left: 16px; border-left: 3px solid var(--di-c-mint); } .di-case__quote p { margin: 0; font-size: 1.05rem; } .di-case__quote cite { display: block; margin-top: 6px; font-style: normal; font-size: 14px; color: var(--di-c-muted); } @media (max-width: 820px) { .di-case { grid-template-columns: 1fr; } .di-case__photo img { min-height: 0; aspect-ratio: 16 / 9; height: auto; } } .di-quotes { display: grid; gap: 20px; margin-top: 20px; } .di-proof h2 + .di-quotes { margin-top: 48px; } .di-quotes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .di-quotes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .di-quotes--1 { max-width: 680px; margin-inline: auto; } @media (max-width: 900px) { .di-quotes--2, .di-quotes--3 { grid-template-columns: 1fr; } } .di-quote { margin: 0; background: var(--di-c-base); border-radius: var(--di-radius); padding: 32px; display: flex; flex-direction: column; gap: 14px; text-align: left; } .di-quote > * { margin: 0; } .di-quote .di-stars { font-size: 1.05rem; letter-spacing: 3px; line-height: 1; } .di-quote__result { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: #E8F7F0; color: #126B47; font-size: 13px; font-weight: 600; } .di-quote blockquote { margin: 0; flex: 1; } .di-quote blockquote p { margin: 0; font-size: 1.05rem; line-height: 1.55; } .di-quote figcaption { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--di-c-muted); line-height: 1.35; } .di-quote figcaption strong { color: var(--di-c-text); font-weight: 600; } .di-quote__photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; } .di-quote__initial { display: grid; place-items: center; background: var(--di--preset--gradient--brand); color: #fff; font-weight: 700; font-size: 18px; } .di-quote--compact { padding: 22px 0 0; margin-top: 24px; border-top: 1px solid var(--di-c-hair); border-radius: 0; background: transparent; gap: 10px; } .di-quote--compact blockquote p { font-size: 0.98rem; } /* Guarantee */ .di-guarantee { padding-block: var(--di-section) 0; } .di-guarantee + * { margin-top: 0; } .di-guarantee__card { max-width: 760px; margin-inline: auto; padding: clamp(32px, 5vw, 52px) clamp(22px, 5vw, 56px); border-radius: var(--di-radius); text-align: center; border: 2px solid transparent; background: linear-gradient(var(--di-c-base), var(--di-c-base)) padding-box, var(--di--preset--gradient--brand) border-box; box-sizing: border-box; } .di-guarantee__card > * { margin: 0 auto; } .di-guarantee__seal svg { display: block; margin: 0 auto; } .di-guarantee__badge { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--di-c-accent); } .di-guarantee h2 { margin-top: 8px; font-size: clamp(1.6rem, 3.4vw, 2.4rem); max-width: 22ch; } .di-guarantee__text { margin-top: 14px; color: var(--di-c-muted); max-width: 48ch; } @media (max-width: 781px) { .di-guarantee { padding-inline: var(--di--style--root--padding-left, 16px); } } /* Video */ .di-video { margin: 0 0 26px; } .di-video__play, .di-video__player { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 18px; overflow: hidden; background: var(--di-c-night-tile); cursor: pointer; } .di-video__player { cursor: auto; } .di-video__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .di-video__play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35)); } .di-video__icon { position: absolute; z-index: 1; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: var(--di-c-accent); display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease; } .di-video__icon svg { margin-left: 4px; } .di-video__play:hover .di-video__icon, .di-video__play:focus-visible .di-video__icon { transform: scale(1.08); } .di-video__play:hover img { transform: scale(1.03); } .di-video__play:focus-visible { outline: 2px solid var(--di-c-accent); outline-offset: 3px; } .di-video figcaption { margin-top: 10px; font-size: 14px; color: var(--di-c-muted); } @media (prefers-reduced-motion: reduce) { .di-video__play img, .di-video__icon { transition: none; } } /* Missed-call audit report (/audit/…) */ .di-report__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1080px; margin-inline: auto; padding-block: 12px; } .di-report__bar .di-element-button { padding: 0.55em 1.05em; font-size: 0.8rem; white-space: nowrap; } .di-report__bar .di-element-button:hover { text-decoration: none; } .di-report { max-width: 760px; margin: 0 auto; padding: clamp(40px, 7vw, 80px) var(--di--style--root--padding-left, 20px) clamp(56px, 8vw, 96px); box-sizing: border-box; } .di-report > * + * { margin-top: 20px; } .di-report h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); margin: 10px 0 0; } .di-report h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); margin: 0 0 16px; } .di-report__hero { text-align: center; padding-bottom: 12px; } .di-report__hero .di-kicker, .di-report__hero .di-lede { margin: 0; } .di-report__hero .di-lede { margin: 10px auto 0; font-size: 1.05rem; } .di-score { position: relative; width: 168px; height: 168px; margin: 36px auto 0; } .di-score svg { width: 100%; height: 100%; transform: rotate(-90deg); } .di-score circle { fill: none; stroke-width: 10; } .di-score__track { stroke: var(--di-c-band); } .di-score__bar { stroke: url(#di-score-g); stroke-linecap: round; stroke-dasharray: var(--di-score) 100; } .di-score__num { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; text-align: center; } .di-score__num strong { font: 800 3.4rem / 1 var(--di-f-display); letter-spacing: -0.05em; } .di-score__num span { font-size: 14px; color: var(--di-c-muted); } .di-score__label { margin: 14px 0 0; font-weight: 600; } .di-report__note { background: var(--di-c-band); border-radius: 20px; padding: 24px 28px; } .di-report__note p { margin: 0; font-size: 1.05rem; } .di-report__note .di-report__from { margin-top: 10px; color: var(--di-c-muted); font-size: 15px; } .di-report__cost { background: var(--di-c-night); color: var(--di-c-on-night); border-radius: var(--di-radius); padding: 30px 32px; } .di-report__cost p { margin: 0; } .di-report__cost-num { font: 800 clamp(2.4rem, 6vw, 3.4rem) / 1.05 var(--di-f-display); letter-spacing: -0.045em; margin-top: 8px !important; font-variant-numeric: tabular-nums; } .di-report__cost-num small { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--di-c-on-night-muted); } .di-report__cost .di-calc__year { margin-top: 6px; } .di-report__group { border: 1px solid var(--di-c-hair); border-radius: var(--di-radius); padding: 28px 30px; } .di-report__group.di-report__plan { margin-top: 20px; } .di-checks { list-style: none; margin: 0; padding: 0; } .di-check { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--di-c-hair); } .di-check:first-child { border-top: 0; padding-top: 4px; } .di-check h3 { font-size: 1.05rem; letter-spacing: -0.015em; margin: 3px 0 4px; } .di-check p { margin: 0; color: var(--di-c-muted); font-size: 15.5px; } .di-check__icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; line-height: 1; } .di-check__icon.is-pass { background: var(--di-c-mint); } .di-check__icon.is-warn { background: var(--di-c-gold); } .di-check__icon.is-fail { background: #E5484D; } .di-plan-list { margin: 0; padding: 0; list-style: none; counter-reset: di-plan; display: grid; gap: 12px; } .di-plan-list li { counter-increment: di-plan; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start; } .di-plan-list li::before { content: counter(di-plan); width: 28px; height: 28px; border-radius: 50%; background: var(--di-c-accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; } .di-report__cta { text-align: center; background: var(--di-c-band); border-radius: var(--di-radius); padding: clamp(28px, 5vw, 44px) 24px; margin-top: 36px !important; } .di-report__cta h2 { margin-bottom: 8px; } .di-report__cta p { margin: 0 auto; max-width: 46ch; color: var(--di-c-muted); } .di-report__actions { margin-top: 20px !important; display: flex; flex-wrap: wrap; gap: 14px 22px; justify-content: center; align-items: center; } .di-report__actions .di-element-button:hover { text-decoration: none; } .di-report__call { font-weight: 600; } .di-report__foot { max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding-inline: var(--di--style--root--padding-left, 20px); } @media (max-width: 600px) { .di-report__group { padding: 22px 18px; } .di-report__cost { padding: 24px 22px; } } @media print { .di-header, .di-report__cta, .di-sticky-cta, .di-footer { display: none !important; } .di-report { padding-top: 0; } .di-report__cost { background: none; color: inherit; border: 1px solid var(--di-c-hair); } } /* Audit section, stacked: video front and center, then the questionnaire */ .di-funnel-audit > .di-video { max-width: 704px; margin: 44px auto 0; } .di-funnel-audit > .di-video .di-video__play, .di-funnel-audit > .di-video .di-video__player { border-radius: 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16); } .di-funnel-audit > .di-video .di-video__icon { width: 84px; height: 84px; margin: -42px 0 0 -42px; } .di-funnel-audit > .di-video .di-video__icon svg { width: 34px; height: 34px; } .di-funnel-audit > .di-video figcaption { text-align: center; margin-top: 14px; } .di-audit.di-audit--stack { display: block; max-width: 880px; margin: 44px auto 0; } .di-funnel-audit > .di-video + .di-audit--stack { margin-top: 36px; } .di-audit--stack > * + * { margin-top: 20px !important; } .di-audit--stack .di-audit__gets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; max-width: 640px; margin: 0 auto; padding: 0; border-top: 0; font-size: 14.5px; } .di-audit--stack .di-audit__form { padding: 36px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 40px rgba(0, 0, 0, 0.06); } .di-audit--stack .di-quote--compact { max-width: 640px; margin: 24px auto 0; padding: 0 12px; border-top: 0; text-align: center; align-items: center; } .di-audit--stack .di-quote--compact figcaption { justify-content: center; text-align: left; } .di-audit--stack:has(.di-funnel-done:not([hidden])) { max-width: 920px; } .di-audit--stack:has(.di-funnel-done:not([hidden])) :is(.di-audit__gets, .di-quote--compact) { display: none; } @media (max-width: 640px) { .di-funnel-audit > .di-video { margin-top: 32px; } .di-audit--stack .di-audit__gets { grid-template-columns: 1fr; } .di-audit--stack .di-audit__form { padding: 26px 20px; } .di-funnel-audit > .di-video .di-video__icon { width: 68px; height: 68px; margin: -34px 0 0 -34px; } } /* Legal pages */ .di-legal { max-width: 760px; margin-inline: auto; padding-bottom: var(--di-section); font-size: 1rem; line-height: 1.65; } .di-legal > * { max-width: 100%; } .di-legal h2 { font-size: clamp(1.35rem, 2.4vw, 1.6rem); margin: 2.2em 0 0.5em; letter-spacing: -0.02em; } .di-legal h3 { font-size: 1.15rem; margin: 1.8em 0 0.4em; } .di-legal p, .di-legal li { color: #3a3a3c; } .di-legal p { margin: 0 0 1em; } .di-legal ul { margin: 0 0 1.2em; padding-left: 1.2em; } .di-legal li { margin-bottom: 0.55em; } .di-legal li::marker { color: var(--di-c-muted); } .di-legal a { text-decoration: underline; text-underline-offset: 2px; } .di-legal > p:first-child em { font-style: normal; color: var(--di-c-muted); font-size: 0.9rem; } /* "Your privacy choices" link with the California opt-out icon */ .di-privacy-choices { white-space: nowrap; } .di-privacy-choices::after { content: ""; display: inline-block; width: 26px; height: 12px; margin-left: 5px; vertical-align: -1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14'%3E%3Crect x='0.6' y='0.6' width='28.8' height='12.8' rx='6.4' fill='%23fff' stroke='%230066ff' stroke-width='1.2'/%3E%3Cpath d='M15 0.6h8a6.4 6.4 0 0 1 0 12.8h-11.5z' fill='%230066ff'/%3E%3Cpath d='M19.6 4.6l3.2 3.2M22.8 4.6l-3.2 3.2' stroke='%23fff' stroke-width='1.3' stroke-linecap='round' transform='translate(0 0.8)'/%3E%3Cpath d='M5.6 7.3l1.9 1.9 3.5-3.7' fill='none' stroke='%230066ff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } /* Cookie banner */ .di-consent { position: fixed; z-index: 200; left: 20px; bottom: 20px; max-width: 420px; box-sizing: border-box; padding: 20px 22px; border-radius: 20px; background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.06); color: var(--di-c-text); font-size: 14px; line-height: 1.5; } .di-consent[hidden], .di-consent-modal[hidden] { display: none !important; } .di-consent p { margin: 0; } .di-consent__title { font: 700 1rem / 1.3 var(--di-f-display); letter-spacing: -0.01em; margin-bottom: 6px !important; } .di-consent__text { color: #3a3a3c; } .di-consent__text a { color: var(--di-c-text); text-decoration: underline; text-underline-offset: 2px; } .di-consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; } .di-consent__btn { flex: 1 1 auto; border: 0; cursor: pointer; padding: 10px 14px; border-radius: 999px; background: var(--di-c-text); color: #fff; font: 500 14px / 1.2 var(--di--preset--font-family--body); white-space: nowrap; } .di-consent__btn:hover { background: #000; } .di-consent__btn:focus-visible, .di-consent__link:focus-visible { outline: 2px solid var(--di-c-accent); outline-offset: 2px; } .di-consent__link { border: 0; background: none; padding: 6px 4px; cursor: pointer; color: var(--di-c-text); font: 500 14px var(--di--preset--font-family--body); text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 600px) { .di-consent { left: 10px; right: 10px; bottom: 10px; max-width: none; padding: 16px; } .di-consent__btn { flex-basis: calc(50% - 4px); } .di-consent__link { flex-basis: 100%; text-align: center; } } /* Privacy choices panel */ .di-consent-modal { position: fixed; z-index: 210; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.45); } html.di-consent-open { overflow: hidden; } .di-consent-modal__box { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box; padding: 28px; border-radius: 24px; background: var(--di-c-base); color: var(--di-c-text); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3); font-size: 14.5px; line-height: 1.5; } .di-consent-modal__box h2 { font-size: 1.5rem; margin: 0 0 8px; } .di-consent-modal__box > p { margin: 0 0 16px; color: #3a3a3c; } .di-consent-modal__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--di-c-band); color: var(--di-c-text); font-size: 22px; line-height: 1; cursor: pointer; } .di-consent-row { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--di-c-hair); } .di-consent-row p { margin: 0; color: #3a3a3c; } .di-consent-row .di-consent-row__name { color: var(--di-c-text); font-weight: 600; margin-bottom: 2px; } .di-consent-row__always { flex: none; font-size: 13px; font-weight: 600; color: var(--di-c-muted); padding-top: 2px; } .di-consent-gpc { margin-top: 6px !important; font-size: 13px; color: #126B47 !important; } .di-switch { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 46px; height: 28px; margin: 0; border-radius: 999px; background: #d2d2d7; cursor: pointer; transition: background 0.2s; } .di-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.2s; } .di-switch:checked { background: var(--di-c-mint); } .di-switch:checked::after { transform: translateX(18px); } .di-switch:disabled { opacity: 0.45; cursor: not-allowed; } .di-switch:focus-visible { outline: 2px solid var(--di-c-accent); outline-offset: 2px; } .di-consent-modal__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .di-consent-modal__actions .di-consent__btn { background: var(--di-c-band); color: var(--di-c-text); } .di-consent-modal__actions .di-consent__btn:hover { background: #e8e8ed; } .di-consent-modal__actions .di-consent__btn.is-primary { background: var(--di-c-text); color: #fff; } .di-consent-modal__policy { margin: 14px 0 0 !important; font-size: 13px; } @media (prefers-reduced-motion: reduce) { .di-switch, .di-switch::after { transition: none; } } /* ---------- Contractor funnel, version 2 (video first) ---------- */ /* Hero: the video is the centerpiece, then the two doors. Tighter than v1 so the video shows on the first screen. */ body .di-v2-hero { padding-block-start: clamp(36px, 5vw, 64px); } .di-v2-hero h1 { font-size: clamp(2.3rem, 5vw, 4.1rem); max-width: 17ch; } .di-v2-hero .di-lede { margin-top: 14px; } .di-v2-hero .di-kicker { margin-bottom: 10px; } .di-v2-hero > .di-video { max-width: 820px; margin: 30px auto 0; } .di-v2-hero > .di-video .di-video__play, .di-v2-hero > .di-video .di-video__player { border-radius: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18); } .di-v2-hero > .di-video .di-video__icon { width: 92px; height: 92px; margin: -46px 0 0 -46px; } .di-v2-hero > .di-video .di-video__icon svg { width: 36px; height: 36px; } .di-v2-hero > .di-video figcaption { text-align: center; margin-top: 14px; } .di-v2-hero .di-ctas { margin-top: 32px; } /* Calculator + audit in one card. */ .di-v2-audit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1080px; margin: 44px auto 0; border-radius: var(--di-radius); background: var(--di-c-base); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 20px 60px rgba(0, 0, 0, 0.08); overflow: hidden; text-align: left; } .di-v2-audit > * { min-width: 0; } .di-v2-audit__calc { padding: 32px; background: #FBFBFD; border-right: 1px solid var(--di-c-hair); } .di-v2-audit__form { padding: 32px; } .di-v2-step { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; } .di-v2-step span { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--di-c-accent); color: #fff; font-size: 14px; } .di-v2-audit .di-calc { grid-template-columns: 1fr; margin: 0; gap: 16px; max-width: none; } .di-v2-audit .di-calc__inputs { padding: 0; background: none; box-shadow: none; } .di-v2-audit .di-calc__result { padding: 24px 26px; border-radius: 20px; } .di-v2-audit .di-calc__month { font-size: clamp(2rem, 4vw, 2.6rem); } .di-v2-audit__gets { list-style: none; margin: -6px 0 18px; padding: 0; display: grid; gap: 6px; font-size: 15px; color: var(--di-c-muted); } .di-v2-audit__gets li { position: relative; padding-left: 24px; margin: 0; } .di-v2-audit__gets li::before { content: "✓"; position: absolute; left: 0; color: var(--di-c-mint); font-weight: 700; } .di-v2-audit .di-funnel-done { text-align: left; } @media (max-width: 860px) { .di-v2-audit { grid-template-columns: 1fr; } .di-v2-audit__calc { border-right: 0; border-bottom: 1px solid var(--di-c-hair); } .di-v2-audit__calc, .di-v2-audit__form { padding: 24px 20px; } } /* "Already convinced?" door, right under the card. */ .di-v2-ready { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; max-width: 1080px; margin: 16px auto 0; padding: 20px 26px; border-radius: 22px; background: var(--di-c-night); color: var(--di-c-on-night); text-align: left; } .di-v2-ready p { margin: 0; } .di-v2-ready__title { font-weight: 700; font-size: 1.1rem; } .di-v2-ready__text { color: var(--di-c-on-night-muted); font-size: 15px; margin-top: 2px !important; } .di-v2-ready__button { flex: none; background: #fff !important; color: var(--di-c-text) !important; } .di-v2-ready__button:hover { background: var(--di-c-band) !important; text-decoration: none; } /* Close: two ways to start. */ .di-v2-close { padding-block: var(--di-section); } .di-v2-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; } body .di-v2-doors > * { margin-block: 0; } .di-v2-door > * { margin: 0; } .di-v2-door > * + * { margin-top: 10px; } .di-v2-door h3 { font-size: 1.6rem; } .di-v2-door .di-ctas { justify-content: flex-start; margin-top: 18px; } .di-v2-door__kicker { font-weight: 600; color: var(--di-c-accent); font-size: 14px; } @media (max-width: 760px) { .di-v2-doors { grid-template-columns: 1fr; } } /* Pricing: no contracts, cancel anytime. */ .di-plans .di-pricing__notes { grid-column: 1 / -1; margin: 14px 0 22px; } .di-pricing__notes > * { margin: 0; } @media (max-width: 900px) { .di-plans .di-pricing__notes { order: 1; margin: 0; } } .di-pricing__promise { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 32px !important; font-size: 15px; color: var(--di-c-muted); } .di-pricing__promise span::before { content: "✓"; margin-right: 6px; color: var(--di-c-mint); font-weight: 700; } /* Optional annual billing on the agency pricing section. */ .di-annual-switch { display:flex; gap:4px; width:max-content; max-width:100%; margin:18px auto 10px; background:#eaf0f6; border:1px solid #dce5ee; border-radius:999px; padding:5px; } .di-annual-switch button { cursor:pointer; border:0; border-radius:999px; background:transparent; padding:11px 18px; font-size:14px;font-weight:600;line-height:1.2;font-family:inherit; color:#34445c; } .di-annual-switch button[aria-pressed="true"] { background:#0a2852; color:#fff; box-shadow:0 2px 9px #0a285225; } .di-annual-note { text-align:center; color:#53647b; font-size:13px; margin:0 auto 14px!important; } @media(max-width:480px) { .di-annual-switch button { padding:10px 12px; font-size:12px; } } /* -------------------------------------------------------------------------- How It Works — v1.17.6. All selectors scoped to the dedicated landing page. -------------------------------------------------------------------------- */ .di-hiw-hero, .di-hiw-process, .di-hiw-capabilities, .di-hiw-faq, .di-hiw-finish { box-sizing: border-box; } .di-hiw-hero { position: relative; overflow: hidden; background: radial-gradient(circle at 87% 24%, rgba(30, 178, 145, .12), transparent 36%), radial-gradient(circle at 16% 12%, rgba(8, 108, 255, .10), transparent 43%), #f8f9fd; padding-block: clamp(70px, 8vw, 112px) clamp(70px, 8vw, 100px); } body .di-hiw-hero__inner, body .di-hiw-container { max-width: 1180px; margin-inline: auto; } body .di-hiw-hero__inner { display: grid; grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr); gap: clamp(36px, 5vw, 80px); align-items: center; } .di-hiw-hero__copy { min-width: 0; } .di-hiw-hero__copy > *, .di-hiw-container > * { margin-block-start: 0; } .di-hiw-eyebrow { margin: 0 0 18px; color: #0876e6; font-size: 11.5px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; } .di-hiw-hero h1.di-hiw-hero__title { max-width: 660px; margin: 0; font: 760 clamp(2.9rem, 5.1vw, 5.3rem)/1.06 var(--di-f-display); letter-spacing: -.062em; color: #17171b; } .di-hiw-hero__title em { font-style: normal; background: linear-gradient(100deg,#0b70f5,#19ba87); -webkit-background-clip: text; background-clip: text; color: transparent; } .di-hiw-lead { margin: 22px 0 0; max-width: 540px; color: #4f535f; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.7; } .di-hiw-buttons { gap: 12px; margin-top: 28px; } .di-hiw-buttons .di-block-button__link { font-weight: 650; padding: 13px 22px; white-space: normal; } .di-hiw-buttons .is-style-outline .di-block-button__link { color: #151820; border: 1.5px solid #cbd0db; background: #fff; } .di-hiw-buttons .is-style-outline .di-block-button__link:hover { border-color: #0a6cff; } .di-hiw-hero__note { margin: 22px 0 0; color: #6b717b; font-size: 12.5px; line-height: 1.55; } body .di-hiw-hero__inner > .di-block-html { margin: 0; min-width: 0; } .di-hiw-map { background: #fff; border: 1px solid rgba(25,37,65,.10); border-radius: 27px; box-shadow: 0 28px 72px rgba(20,43,87,.11), 0 8px 18px rgba(19,42,85,.04); padding: 22px; transform: rotate(1deg); } .di-hiw-map__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 2px 18px; border-bottom: 1px solid #e8eaf0; color: #858b97; font-size: 11px; white-space: nowrap; } .di-hiw-map__dots { display: flex; gap: 6px; } .di-hiw-map__dots i { display: block; width: 8px; height: 8px; background: #d0d4df; border-radius: 50%; } .di-hiw-map__dots i:first-child { background: #0a6cff; } .di-hiw-map__dots i:nth-child(2) { background: #1db67e; } .di-hiw-map__flow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-block: 21px; } .di-hiw-map__node { min-height: 126px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; border: 1px solid #e7eaf0; border-radius: 16px; padding: 18px; background: #fff; box-sizing: border-box; } .di-hiw-map__node--1 { background: linear-gradient(135deg, #eef5ff, #f9fcff); border-color: #d5e6ff; } .di-hiw-map__node--4 { background: linear-gradient(135deg,#e8fbf3,#f7fffb); border-color:#c9f0e0; } .di-hiw-map__no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #101d3f; color: white; font: 700 10px/1 var(--di-f-display); } .di-hiw-map__node--1 .di-hiw-map__no { background: #0a6cff; } .di-hiw-map__node--4 .di-hiw-map__no { background: #17a879; } .di-hiw-map__node strong { font-size: 14px; color: #222631; line-height: 1.2; } .di-hiw-map__node small { color: #707686; font-size: 11px; line-height: 1.4; } .di-hiw-map__foot { border-top: 1px solid #e8eaf0; padding-top: 15px; display: flex; align-items: center; justify-content: space-between; color: #7e8593; font: 750 10px/1 var(--di-f-display); letter-spacing: .14em; } .di-hiw-map__pulse { width: 9px; height: 9px; border-radius: 50%; background: #1aba84; box-shadow: 0 0 0 5px #e3f8ee; } .di-hiw-process, .di-hiw-capabilities, .di-hiw-faq { padding-block: clamp(68px, 8vw, 110px); } .di-hiw-process { background: #fff; } .di-hiw-capabilities { background: #f5f6f9; } .di-hiw-faq { background: #fff; } .di-hiw-section-title { max-width: 770px; margin: 0; color: #1a1b20; font: 750 clamp(2.1rem, 3.5vw, 3.65rem)/1.11 var(--di-f-display); letter-spacing: -.049em; } .di-hiw-intro { margin: 17px 0 0; max-width: 710px; color: #626773; font-size: clamp(1rem, 1.2vw, 1.11rem); line-height: 1.7; } body .di-hiw-steps { margin-top: 42px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; } .di-hiw-step { position: relative; padding: 26px 23px 29px; background: #f6f7fa; border: 1px solid #e9ebf0; border-radius: 21px; min-width: 0; } .di-hiw-step__number { margin: 0 0 27px; font: 750 2.7rem/1 var(--di-f-display); letter-spacing: -.06em; color: #0a6cff; } .di-hiw-step h3 { margin: 0 0 11px; color: #1b1d24; font: 740 clamp(1.18rem, 1.7vw, 1.5rem)/1.16 var(--di-f-display); letter-spacing: -.033em; } .di-hiw-step__desc { margin: 0; color: #5e6470; font-size: 13.75px; line-height: 1.65; } body .di-hiw-feature-grid { margin-top: 42px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; } .di-hiw-module { min-width: 0; display: flex; flex-direction: column; gap: 0; padding: 24px; background: #fff; border: 1px solid #e3e6ec; border-radius: 23px; box-shadow: 0 3px 12px rgba(20,26,38,.024); } .di-hiw-module__mast { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 20px; } .di-hiw-module__num { color: #a1a7b3; font-size: 13px; font-weight: 750; } .di-hiw-module__symbol { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #dceafe; border-radius: 10px; background: #f2f7ff; padding: 11px 8px; min-width: 48px; font: 750 10px/1 var(--di-f-display); color: #0a6cff; letter-spacing: .02em; } .di-hiw-module:nth-child(4) .di-hiw-module__symbol, .di-hiw-module:nth-child(5) .di-hiw-module__symbol { background: #eafaf3; border-color: #d1f2e2; color: #069969; } .di-hiw-module:nth-child(6) .di-hiw-module__symbol { background: #f4efff; border-color: #e4d8ff; color: #7753d2; } .di-hiw-module__tier { margin: 0 0 10px; color: #0b6cff; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 750; } .di-hiw-module h3 { margin: 0 0 12px; font: 750 1.55rem/1.18 var(--di-f-display); color: #1d1e25; letter-spacing: -.037em; } .di-hiw-module__desc { margin: 0; color: #636873; font-size: 14px; line-height: 1.62; } .di-hiw-module ul.di-hiw-module__list { margin: auto 0 0; padding: 22px 0 0; list-style: none; display: grid; gap: 11px; } .di-hiw-module__list li { position: relative; padding-left: 24px; color: #353944; font-size: 13.2px; line-height: 1.44; } .di-hiw-module__list li::before { content: '✓'; position: absolute; left: 0; top: 0; display: inline-grid; place-items: center; width: 17px; height: 17px; background: #e5f8ef; color: #119b6b; border-radius: 50%; font-size: 11px; font-weight: 800; } body .di-hiw-custom { margin-top: 22px; border-radius: 25px; padding: 34px 36px; background: #17233e; color: #fff; display: flex; gap: 35px; align-items: center; justify-content: space-between; } .di-hiw-custom__copy { max-width: 760px; } .di-hiw-custom__copy .di-hiw-eyebrow { color: #83d7fa; margin-bottom: 8px; } .di-hiw-custom h3 { margin: 0 0 12px; font: 740 clamp(1.5rem, 2vw, 2rem)/1.2 var(--di-f-display); letter-spacing: -.035em; color: #fff; } .di-hiw-custom__copy > p:not(.di-hiw-eyebrow) { margin: 0; color: #ced6e5; font-size: 14.5px; line-height: 1.65; } .di-hiw-custom .di-block-buttons { flex-shrink: 0; } .di-hiw-custom .is-style-outline .di-block-button__link { border-color: rgba(255,255,255,.55); color: white; background: transparent; padding: 13px 20px; font-weight: 650; } .di-hiw-custom .is-style-outline .di-block-button__link:hover { background: rgba(255,255,255,.12); } body .di-hiw-faq__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 38px; } .di-hiw-faq__item { border-radius: 20px; border: 1px solid #e5e8ee; background: #fff; padding: 27px 29px; min-width: 0; } .di-hiw-faq__item h3 { margin: 0 0 12px; font: 740 1.27rem/1.3 var(--di-f-display); letter-spacing: -.025em; color: #191d25; } .di-hiw-faq__item p { margin: 0; color: #666b75; font-size: 14px; line-height: 1.7; } .di-hiw-finish { padding-block: clamp(70px, 7vw, 110px); background: linear-gradient(125deg, #092e71, #0a6cff 60%, #14ac92); color: #fff; text-align: center; } .di-hiw-finish h2 { margin: 0 auto; max-width: 800px; font: 760 clamp(2.3rem, 4.4vw, 4.8rem)/1.1 var(--di-f-display); letter-spacing: -.053em; color: #fff; } .di-hiw-finish p { margin: 20px auto 0; max-width: 650px; color: rgba(255,255,255,.87); font-size: 17px; line-height: 1.65; } .di-hiw-finish .di-hiw-buttons { margin-top: 28px; } .di-hiw-finish .is-style-fill .di-block-button__link { background: #fff; color: #0d55ba; } .di-hiw-finish .is-style-fill .di-block-button__link:hover { background: #f0f5ff; color: #07439b; } .di-hiw-finish .is-style-outline .di-block-button__link { border-color: rgba(255,255,255,.65); color: #fff; background: transparent; } .di-hiw-finish .is-style-outline .di-block-button__link:hover { background: rgba(255,255,255,.12); } @media (max-width:1024px) { body .di-hiw-steps { grid-template-columns: repeat(2,minmax(0,1fr)); } body .di-hiw-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width:800px) { body .di-hiw-hero__inner { grid-template-columns: 1fr; } body .di-hiw-hero__inner > .di-block-html { width: 100%; max-width: 540px; } .di-hiw-map { transform: none; } body .di-hiw-custom { display: block; } .di-hiw-custom .di-block-buttons { margin-top: 24px; } } @media (max-width:600px) { .di-hiw-hero { padding-block: 62px 64px; } .di-hiw-hero h1.di-hiw-hero__title { font-size: clamp(2.6rem, 11vw, 3.5rem); } body .di-hiw-steps, body .di-hiw-feature-grid, body .di-hiw-faq__grid { grid-template-columns: 1fr; } .di-hiw-process,.di-hiw-capabilities,.di-hiw-faq { padding-block: 65px; } .di-hiw-step { padding: 24px; } .di-hiw-step__number { margin-bottom: 22px; } .di-hiw-module { padding: 25px; } body .di-hiw-custom { padding: 28px 25px; } .di-hiw-map { padding: 14px; border-radius: 20px; } .di-hiw-map__flow { gap: 9px; } .di-hiw-map__node { padding: 13px; min-height: 133px; } .di-hiw-map__node strong { font-size: 12.5px; } .di-hiw-map__node small { font-size: 10.5px; } .di-hiw-faq__item { padding: 23px; } } @media (prefers-reduced-motion:reduce) { .di-hiw-map { transform: none; } } /* ---------- Digital Infinite language menu in the primary header ---------- */ .di-header .di-lang-switch { position: relative; flex: 0 0 auto; list-style: none; margin: 0; padding: 0; font: 650 11px/1 var(--di--preset--font-family--body); } .di-header .di-lang-switch--mobile { display: none; } .di-header .di-lang-switch__details { position: relative; } .di-header .di-lang-switch__trigger { display: grid; place-items: center; box-sizing: border-box; width: 30px; height: 30px; border: 1px solid #CAD9ED; border-radius: 50%; background: #fff; color: #172C46; font-size: 11px; font-weight: 700; letter-spacing: .005em; cursor: pointer; list-style: none; box-shadow: 0 1px 2px rgb(10 53 110 / 5%); transition: border-color .2s, box-shadow .2s, color .2s; } .di-header .di-lang-switch__trigger::-webkit-details-marker { display: none; } .di-header .di-lang-switch__trigger::marker { content: ''; } .di-header .di-lang-switch__trigger:hover, .di-header .di-lang-switch__details[open] .di-lang-switch__trigger { border-color: #0A6CFF; color: #0A6CFF; box-shadow: 0 0 0 3px rgb(10 108 255 / 9%); } .di-header .di-lang-switch__trigger:focus-visible { outline: 2px solid #0A6CFF; outline-offset: 3px; } .di-header .di-lang-switch__menu { position: absolute; top: calc(100% + 11px); right: -12px; z-index: 150; box-sizing: border-box; width: 166px; padding: 7px; border: 1px solid #DDE7F5; border-radius: 15px; background: #fff; box-shadow: 0 14px 34px rgb(11 41 85 / 14%); } .di-header .di-lang-switch__option { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 7px 10px; border-radius: 10px; box-sizing: border-box; color: #364960; text-decoration: none; font-size: 13px; font-weight: 550; white-space: nowrap; } .di-header .di-lang-switch__option:hover, .di-header .di-lang-switch__option:focus-visible { background: #F0F6FF; color: #0A6CFF; text-decoration: none; } .di-header .di-lang-switch__option.is-current { background: linear-gradient(95deg, #E8F2FF 0%, #F0F8FF 72%, #EDFAF6 100%); color: #0864E7; font-weight: 700; } .di-header .di-lang-switch__dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; } .di-header .di-lang-switch__option.is-current .di-lang-switch__dot { background: #0A6CFF; } /* Desktop only: keep Contact, language switch and Get started together. */ @media (min-width: 600px) { .di-header__actions { gap: 14px; } .di-nav .di-lang-switch--desktop { margin-left: -16px; } } @media (min-width: 600px) and (max-width: 1060px) { .di-nav.di-block-navigation { gap: 14px; } .di-header__actions { gap: 12px; } .di-nav .di-lang-switch--desktop { margin-left: -4px; } } @media (max-width: 599px) { .di-header .di-lang-switch--mobile { display: block; order: 0; } .di-header .di-lang-switch--desktop { display: none !important; } .di-header .di-lang-switch__menu { right: -18px; } } /* Services page: a distinct closing CTA, not another extension of the footer. */ body .di-block-group.di-features-list + .di-block-group.is-style-band.di-cta { background: linear-gradient(125deg, #102336 0%, #152c42 62%, #123a3f 100%); color: #fff; border-top: 1px solid rgb(255 255 255 / 12%); border-bottom: 1px solid rgb(255 255 255 / 12%); padding-block: clamp(70px, 7vw, 106px); } body .di-block-group.di-features-list + .di-block-group.is-style-band.di-cta h2 { color: #fff; }