/* Ideal Consulting — site styles (matches the tofollow/ mockups) Desktop is designed at 1536px wide and shown at 82% (--k) of that size; on smaller desktops it scales down further in proportion (zoom script in each page's ), so it keeps the mockup proportions at any laptop/desktop size. Below 900px the phone layout at the bottom of this file takes over. */ :root { --pink: #e5045f; --pink-2: #cf0350; --pink-soft: #fcf1f8; --navy: #0a2257; --ink: #0b1c44; --text: #4c5d74; --muted: #7c8a9f; --desc: #5e6d84; --bg: #f8fbfe; --bg-2: #f3f6fb; --line: #e5eaf2; --dark: #081935; --band: #00133b; --gold: #feb507; --r: 12px; --shadow: 0 10px 30px rgba(15, 35, 80, .07); --shadow-sm: 0 4px 14px rgba(15, 35, 80, .06); --w: calc(1380px / var(--k, 1)); --pad: 24px; /* --lw = layout width, set by the zoom script (100vw is wrong under zoom) */ --gutter: max(var(--pad), calc((var(--lw, 100vw) - var(--w)) / 2)); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, p, ul { margin: 0; } ul { padding: 0; list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } em { font-style: normal; color: var(--pink); } .container { width: min(var(--w), 100% - 2 * var(--pad)); margin-inline: auto; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* icons */ .i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .i-fill { fill: currentColor; stroke: none; } /* type */ .kicker { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; font-size: 14.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .kicker::before { content: ""; width: 60px; height: 3px; border-radius: 3px; background: var(--pink); flex: none; } .kicker--light { color: #fff; } .h1, .h1-sm, .h2, .h2-lg { color: var(--ink); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; } .h1 { font-size: 68px; } .h1-sm { font-size: 54px; line-height: 1.06; } .h1-sm.fit { font-size: 49px; } .h2-lg { font-size: 52px; } .h2 { font-size: 35px; line-height: 1.12; } .lead { font-size: 20px; line-height: 1.5; margin-top: 18px; max-width: 700px; } .muted { color: var(--muted); } .bar { display: block; width: 34px; height: 3px; border-radius: 3px; background: var(--pink); margin-top: 10px; } /* buttons */ .btns { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 34px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; height: 54px; padding: 0 30px; border-radius: 8px; border: 1.5px solid transparent; font-weight: 600; font-size: 17px; white-space: nowrap; cursor: pointer; transition: .2s; } .btn .i { font-size: 21px; } .btn--lg { height: 66px; padding: 0 40px; font-size: 19px; } .btn--pink { background: linear-gradient(90deg, #ea0764, var(--pink-2)); color: #fff; box-shadow: 0 10px 24px rgba(229, 4, 95, .25); } .btn--pink:hover { filter: brightness(1.08); transform: translateY(-1px); } .btn--outline { background: #fff; border-color: #25355a; color: var(--ink); } .btn--outline:hover { border-color: var(--pink); color: var(--pink); } .btn--outline .i:first-child { color: var(--navy); } .btn--ghost { border-color: rgba(255, 255, 255, .85); color: #fff; } .btn--ghost:hover { background: #fff; color: var(--ink); } .btn--block { width: 100%; } /* ---------- topbar & header ---------- */ .topbar { background: #f2f5f8; font-size: 16px; color: #30405e; } .topbar__in { display: flex; justify-content: space-between; align-items: center; min-height: 44px; gap: 20px; } .topbar__l, .topbar__r { display: flex; align-items: center; gap: 30px; } .topbar a, .topbar span { display: inline-flex; align-items: center; gap: 12px; } .topbar .i { font-size: 18px; color: var(--ink); } .social { display: flex; gap: 18px; } .social a { color: var(--ink); font-size: 19px; } .social a:hover { color: var(--pink); } .header { position: sticky; top: 0; z-index: 50; background: rgba(251, 252, 254, .97); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--line); } .header__in { display: flex; align-items: center; gap: 28px; min-height: 88px; } .logo img { width: 140px; height: auto; } .header--home .header__in { min-height: 100px; } .header--home .logo img { width: 175px; } .nav { flex: 1; display: flex; align-items: center; gap: 22px; margin-left: 76px; } .nav__list { display: flex; align-items: center; gap: 40px; margin-right: auto; white-space: nowrap; } .nav__list > li { position: relative; } .nav__list > li > a { display: flex; align-items: center; gap: 8px; padding: 12px 0; font-weight: 500; font-size: 17px; color: var(--ink); } .header--home .nav { margin-left: 64px; } .header--home .nav__list { gap: 34px; } .header--home .nav__list > li > a { font-size: 18.5px; font-weight: 600; } .nav__list > li > a .i { font-size: 15px; color: var(--muted); } .nav__list > li > a:hover, .nav__list > li > a.is-active { color: var(--pink); } .nav__list > li > a.is-active { box-shadow: inset 0 -2px 0 var(--pink); } .sub { position: absolute; top: 100%; left: -18px; min-width: 270px; padding: 10px; background: #fff; border-radius: 10px; box-shadow: 0 18px 40px rgba(15, 35, 80, .14); opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s; } .has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: none; } .sub a { display: block; padding: 9px 14px; border-radius: 6px; font-size: 16px; font-weight: 500; color: var(--ink); } .sub a:hover { background: var(--pink-soft); color: var(--pink); } .nav__cta { height: 48px; padding: 0 28px; font-size: 16.5px; border-radius: 6px; } .header--home .nav__cta { height: 54px; padding: 0 28px; font-size: 17px; } .wa { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #06245c; color: #fff; font-size: 26px; flex: none; } .burger { display: none; margin-left: auto; width: 46px; height: 46px; border: 0; border-radius: 10px; background: var(--pink-soft); color: var(--pink); font-size: 24px; cursor: pointer; } .burger .i { margin: auto; } .crumbs { display: flex; align-items: center; gap: 14px; padding: 20px 0 14px; font-size: 15.5px; color: var(--muted); } .crumbs a:hover { color: var(--pink); } .crumbs .i { color: var(--pink); font-size: 14px; } .crumbs span:last-child { color: var(--ink); font-weight: 500; } /* ---------- home hero ---------- */ .hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fbfcfe, var(--bg)); } .hero__media { position: absolute; inset: 0 0 0 auto; width: 48.5%; clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: left center; } .hero__media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(248, 251, 254, .95) 0%, rgba(248, 251, 254, 0) 30%); } .hero__content { position: relative; width: 56%; min-height: 672px; padding: 64px 0 52px; } .hero__content .lead { color: var(--text); font-size: 21px; max-width: 620px; } .trust { display: flex; align-items: center; gap: 44px; margin-top: 40px; } .trust img { width: 192px; border-radius: 30px; } .trust div { padding-left: 44px; border-left: 1.5px solid var(--line); font-size: 19px; line-height: 1.35; } .trust strong { color: var(--ink); font-size: 29px; font-weight: 800; letter-spacing: -.02em; } .trust strong span { font-size: 20px; } .strip { position: relative; background: #fff; box-shadow: 0 -1px 0 var(--line), var(--shadow); } .strip__in { display: grid; grid-template-columns: repeat(4, 1fr); padding: 38px 0 42px; } .strip__item { display: flex; gap: 26px; padding: 0 26px; border-left: 1.5px solid var(--line); } .strip__item:first-child { border: 0; padding-left: 16px; } .strip__item .i { font-size: 50px; color: var(--pink); stroke-width: 1.5; } .strip__item h3 { color: var(--ink); font-size: 18.5px; font-weight: 700; } .strip__item p { font-size: 16.5px; line-height: 1.5; margin-top: 2px; } /* ---------- sections ---------- */ .sec { padding: 36px 0 24px; } .sec--lg { padding: 64px 0; } .sec--tint { background: var(--bg-2); } .sec--white { background: #fbfcfe; } .sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 28px; } .sec-head__side { max-width: 460px; } .sec-head > div:first-child { flex: 1 1 auto; max-width: 980px; } .sec-head .lead { max-width: 820px; } .sec-head:has(.inline-feats) { gap: 20px; } .sec-head__aside { flex: 0 1 480px; font-size: 16.5px; color: var(--muted); line-height: 1.55; margin-bottom: 4px; } .tint-box { display: flex; gap: 26px; align-items: center; padding: 26px 32px; background: var(--pink-soft); border-radius: 10px; } .tint-box .i { font-size: 52px; color: var(--pink); stroke-width: 1.5; } .tint-box h3 { color: var(--ink); font-size: 19px; font-weight: 700; line-height: 1.3; } .tint-box p { font-size: 16px; margin-top: 6px; line-height: 1.5; } .ring { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #fff 0 34%, #fbd0e1 100%); color: var(--pink); font-size: 28px; box-shadow: 0 6px 18px rgba(229, 4, 95, .16); } .ring--lg { width: 80px; height: 80px; font-size: 34px; border: 1px solid #fbd6e5; } .tile { display: grid; place-items: center; width: 50px; height: 50px; flex: none; border-radius: 10px; background: linear-gradient(145deg, #fff3f8, #fde3ee); color: var(--pink); font-size: 26px; } /* service photo cards (home) */ .svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .svc-card { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; transition: .25s; } .svc-card__img { aspect-ratio: 340 / 139; overflow: hidden; } .svc-card__img img { width: 100%; height: 100%; object-fit: cover; } .svc-card .tile { position: relative; width: 80px; height: 74px; margin: -54px 0 0 22px; background: #fff; border-radius: 12px; box-shadow: var(--shadow-sm); font-size: 34px; } .svc-card h3 { margin: 18px 22px 0; color: var(--ink); font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; } .svc-card p { margin: 10px 22px 0; font-size: 16.5px; line-height: 1.45; color: var(--desc); flex: 1; } .more { display: inline-flex; align-items: center; gap: 14px; margin: 18px 24px 24px; color: var(--ink); font-weight: 600; font-size: 16.5px; } .more .i { color: var(--pink); font-size: 20px; } .more::after { content: ""; position: absolute; inset: 0; } /* why (home) */ .why { position: relative; overflow: hidden; } .why__media { position: absolute; top: 0; right: 0; width: 29%; height: 78%; } .why__media img { width: 100%; height: 100%; object-fit: cover; object-position: left top; } .why__media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(248, 251, 254, 0) 35%); } .why__main { position: relative; width: 70%; } .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .feat { display: grid; grid-template-columns: auto 1fr; gap: 16px 22px; align-items: center; padding: 20px 22px 26px; background: rgba(255, 255, 255, .94); border-radius: var(--r); box-shadow: var(--shadow); } .feat .tile { width: 64px; height: 64px; font-size: 30px; } .feat h3 { color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1.35; } .feat p { grid-column: 1 / -1; font-size: 16.5px; line-height: 1.55; } .stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px; padding: 30px 0; background: #fff; border-radius: 14px; box-shadow: var(--shadow); } .stat { display: flex; align-items: center; gap: 26px; padding: 4px 34px; border-left: 1.5px solid var(--line); } .stat:first-child { border: 0; } .stat b { display: block; color: var(--ink); font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; } .stat > div span { font-size: 17px; } /* method (home) */ .method { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; } .method__arrow { align-self: center; margin-top: -120px; padding: 0 12px; color: #8391a8; font-size: 22px; display: flex; align-items: center; gap: 2px; } .method__arrow::before { content: ""; width: 26px; border-top: 2px dashed currentColor; } .mcard { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 12px; box-shadow: var(--shadow); } .mcard__img { position: relative; aspect-ratio: 303 / 171; } .mcard__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px 12px 0 0; } .mcard__num { position: absolute; top: -16px; left: -4px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--pink); color: #fff; border: 3px solid #fff; font-weight: 700; font-size: 20px; box-shadow: 0 6px 14px rgba(229, 4, 95, .3); } .mcard__tile { position: absolute; right: 14px; bottom: -8px; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 12px; background: #fff; color: var(--pink); font-size: 32px; box-shadow: var(--shadow-sm); } .mcard__body { padding: 26px 18px 26px; flex: 1; } .mcard h3 { color: var(--ink); font-size: 20px; font-weight: 800; letter-spacing: -.02em; } .mcard p { margin-top: 8px; font-size: 16px; line-height: 1.45; } .mcard .bar { width: 42px; margin-top: 24px; } /* split CTA (home) */ .split { display: grid; grid-template-columns: 1fr 26%; background: #fbfcfe; } .split__main { position: relative; overflow: hidden; padding: 44px 0 36px var(--gutter); background: linear-gradient(90deg, #08235a, #16356d); color: #fff; clip-path: polygon(0 0, 100% 0, 96.5% 100%, 0 100%); } .split__main > * { position: relative; max-width: 690px; } .split__photo { position: absolute !important; max-width: none !important; inset: 0 0 0 auto; width: 45%; } .split__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .split__photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0f2c64 0%, rgba(15, 44, 100, 0) 38%); } .split .h2-lg { color: #fff; font-size: 46px; } .split p.lead { color: rgba(255, 255, 255, .92); font-size: 19px; margin-top: 16px; } .split .btns { margin-top: 30px; } .split__aside { display: flex; flex-direction: column; justify-content: center; padding: 16px var(--gutter) 16px 30px; } .mini { display: flex; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); } .mini:last-child { border: 0; } .mini .ring { width: 58px; height: 58px; font-size: 26px; background: #fff; border: 1.5px solid #fbd0e1; box-shadow: none; } .mini div { padding-left: 18px; border-left: 1.5px solid var(--line); line-height: 1.4; } .mini b { display: block; color: var(--ink); font-size: 16px; font-weight: 700; } .mini > div span { font-size: 15.5px; } /* pricing */ .inline-feats { display: flex; align-items: center; flex: none; white-space: nowrap; margin-bottom: auto; margin-top: 44px; } .inline-feats > div { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-left: 1.5px solid var(--line); line-height: 1.35; font-size: 15px; } .inline-feats > div:first-child { border: 0; } .inline-feats .i { font-size: 32px; color: var(--pink); stroke-width: 1.5; } .inline-feats b { display: block; color: var(--ink); font-weight: 700; font-size: 15.5px; } .packs { display: grid; grid-template-columns: repeat(3, 1fr) 1.35fr; gap: 16px; align-items: stretch; } .packs__aside { display: grid; gap: 16px; align-self: start; } .pack { position: relative; display: flex; flex-direction: column; padding: 22px 22px 24px; background: #fff; border-radius: 14px; box-shadow: var(--shadow); border: 1.5px solid transparent; } .pack--pro { background: linear-gradient(180deg, #fff 0%, #fef4f8 100%); border-color: #f7a9c7; } .pack__badge { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); padding: 6px 24px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 13.5px; font-weight: 600; letter-spacing: .03em; white-space: nowrap; } .pack__top { display: flex; align-items: center; gap: 22px; } .pack__top .tile { width: 60px; height: 60px; font-size: 30px; } .pack__name { color: var(--ink); font-size: 24px; font-weight: 800; letter-spacing: -.01em; } .pack__sub { font-size: 15px; color: var(--muted); } .pack__from { margin-top: 26px; color: var(--ink); font-size: 18px; } .pack__price { color: var(--pink); font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; } .pack__price small { color: var(--ink); font-size: 20px; letter-spacing: 0; margin-left: 6px; } .pack__old { color: #1d2c4c; font-weight: 700; text-decoration: line-through; font-size: 16.5px; } .pack ul { margin: 16px 0 26px; padding-top: 18px; border-top: 1.5px solid var(--line); display: grid; gap: 14px; flex: 1; align-content: start; } .pack li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.35; } .check { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--pink); color: #fff; font-size: 12px; margin-top: 1px; } .check .i { stroke-width: 3.2; } .pack .btn { height: 48px; } .offer { position: relative; overflow: hidden; min-height: 386px; padding: 34px 26px; border-radius: 12px; background: linear-gradient(90deg, #102b63 0%, #173a78 100%); color: #fff; } .offer__img { position: absolute; inset: 0 0 0 auto; width: 40%; } .offer__img img { width: 100%; height: 100%; object-fit: cover; } .offer__img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #163672 0%, rgba(22, 54, 114, 0) 60%); } .offer > :not(.offer__img) { position: relative; max-width: 310px; } .offer .kicker { font-size: 13.5px; color: #fff; gap: 16px; } .offer .kicker::before { width: 48px; } .offer h3 { font-size: 29px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; } .offer p { margin: 14px 0 24px; font-size: 17px; line-height: 1.45; } .bigstats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 44px; } .bigstats > div { display: flex; align-items: center; justify-content: center; gap: 30px; border-left: 1.5px solid var(--line); } .bigstats > div:first-child { border: 0; } .bigstats .i { font-size: 58px; color: var(--pink); stroke-width: 1.4; } .bigstats b { display: block; color: var(--ink); font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; } .bigstats span { font-size: 17px; } .projbar { display: flex; align-items: center; justify-content: center; gap: 40px; margin-top: 40px; padding: 22px 30px; border-radius: 8px; background: #102b64; color: #fff; } .projbar > .i { font-size: 54px; color: var(--pink); stroke-width: 1.4; } .projbar h3 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; } .projbar p { font-size: 16.5px; opacity: .92; } .projbar .btn { margin-left: 30px; height: 58px; padding: 0 48px; font-size: 17px; } .projbar__sep { width: 1.5px; align-self: stretch; background: rgba(255, 255, 255, .2); } /* testimonials */ .gbadge { display: flex; align-items: center; gap: 28px; padding: 22px 34px; border-radius: 12px; background: var(--pink-soft); } .gbadge svg.g { width: 46px; height: 46px; } .gbadge b { display: block; color: var(--ink); font-size: 29px; font-weight: 800; line-height: 1.1; } .gbadge div + div { padding-left: 24px; border-left: 1.5px solid #ecd9e4; font-size: 16px; } .stars { display: flex; gap: 3px; color: var(--gold); font-size: 19px; } .testis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .testi { display: grid; grid-template-columns: 52px 1fr; gap: 0 20px; padding: 22px 26px 20px; background: #fff; border-radius: 12px; box-shadow: var(--shadow); } .testi__q { color: var(--pink); font-size: 72px; font-weight: 800; line-height: .8; font-family: Georgia, serif; } .testi p { font-size: 16.5px; line-height: 1.5; color: #56657b; } .testi__who { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; margin-top: 14px; } .testi__who img { width: 56px; height: 56px; border-radius: 50%; } .testi__who b { display: block; color: var(--ink); font-size: 17px; } .testi__who > div span { font-size: 15px; } .testi__who .stars { margin-left: auto; } /* faq */ .faq { display: grid; grid-template-columns: minmax(0, 570px) 1fr; gap: 16px 32px; align-items: start; } .faq__intro .h2-lg { font-size: 39px; white-space: nowrap; } .faq__btn { display: flex; justify-content: flex-end; margin-bottom: 14px; } .faq__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .faq__col { display: grid; gap: 10px; } .qa { background: #fff; border: 1px solid var(--line); border-radius: 8px; } .qa summary { display: flex; align-items: center; gap: 14px; padding: 12px 14px; cursor: pointer; list-style: none; color: var(--ink); font-size: 15.5px; font-weight: 500; } .qa summary::-webkit-details-marker { display: none; } .qa summary .plus { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--pink); color: #fff; font-size: 14px; } .qa summary .plus .i { stroke-width: 3; } .qa summary .chev { margin-left: auto; color: var(--muted); transition: .2s; } .qa[open] summary .chev { transform: rotate(180deg); } .qa p { padding: 0 18px 16px 50px; font-size: 15.5px; line-height: 1.55; } .faq--plain { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; } .faq--plain .qa summary { padding: 13px 22px; font-size: 16px; } .faq--plain .qa summary .plus { background: none; color: var(--ink); border: 1.5px solid currentColor; width: 20px; height: 20px; font-size: 13px; } .faq--plain .qa summary .chev { transform: none; color: var(--ink); } .faq--plain .qa[open] summary .chev { transform: rotate(45deg); } /* contact block (home) */ .contact { position: relative; overflow: hidden; background: #f5f8fd; } .contact__in { display: grid; grid-template-columns: minmax(0, 1fr) 410px 380px; gap: 14px; width: min(1460px, 100% - 60px); margin-inline: auto; } .contact__info { position: relative; z-index: 0; padding: 22px 10px 40px 0; color: #fff; } .contact__info::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: -50px; left: -2000px; background: linear-gradient(90deg, rgba(8, 28, 72, .95), rgba(10, 34, 87, .9)), url(../images/ideal/domiciliation-hero.jpg) center / cover; border-top-right-radius: 10px; } .contact__info .h2-lg { color: #fff; font-size: 50px; } .contact__info p.lead { color: rgba(255, 255, 255, .92); font-size: 18px; margin-top: 12px; } .cinfo { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 22px 0; margin-top: 28px; } .cinfo a, .cinfo div { display: flex; gap: 10px; align-items: flex-start; padding-right: 12px; margin-right: 12px; border-right: 1px solid rgba(255, 255, 255, .15); font-size: 14px; line-height: 1.45; } .cinfo > :nth-child(3), .cinfo > :nth-child(4) { border: 0; margin: 0; padding: 0; } .cinfo > :nth-child(-n+2) span { white-space: nowrap; } .cinfo > :nth-child(4) { grid-column: 1 / -1; } .cinfo .sq { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 8px; background: var(--pink); font-size: 20px; } .cinfo b { display: block; font-size: 16px; font-weight: 600; } .qform { position: relative; z-index: 1; align-self: start; margin-top: 16px; margin-bottom: 18px; padding: 22px; background: #fff; border-radius: 10px; box-shadow: 0 16px 40px rgba(15, 35, 80, .14); } .qform h2 { color: var(--ink); font-size: 23px; font-weight: 800; letter-spacing: -.02em; } .qform > p { font-size: 15px; line-height: 1.35; margin: 4px 0 16px; } .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .fgrid .full { grid-column: 1 / -1; } .field { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #d5dde8; border-radius: 6px; background: #fff; font-size: 15.5px; color: var(--ink); outline: none; } .field::placeholder { color: #6b7a90; } .field:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(229, 4, 95, .1); } select.field { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1c44' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat; padding-right: 36px; } textarea.field { height: 68px; padding: 10px 12px; resize: vertical; } .qform .btn { height: 40px; margin-top: 10px; font-size: 15.5px; border-radius: 5px; box-shadow: none; } .form-status { display: none; margin-top: 10px; font-size: 14px; font-weight: 600; } .mapcard { display: flex; flex-direction: column; gap: 10px; padding: 16px 0 18px; } .mapcard iframe { width: 100%; height: 190px; border: 0; border-radius: 8px; } .addr { display: flex; flex-wrap: wrap; row-gap: 6px; align-items: center; gap: 16px; padding: 14px 16px; background: #fff; border-radius: 8px; box-shadow: var(--shadow-sm); font-size: 15px; } .addr .ring { width: 42px; height: 42px; font-size: 20px; } .addr b { display: block; color: var(--ink); font-size: 16px; } .addr div { flex: 1 1 0; min-width: 0; line-height: 1.45; } .addr a { white-space: nowrap; } .addr a { margin-left: 58px; flex-basis: calc(100% - 58px); display: inline-flex; gap: 10px; align-items: center; color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .addr a .i { color: var(--pink); } /* ---------- footer ---------- */ .footer { background: var(--dark); color: rgba(255, 255, 255, .78); font-size: 15px; } .footer__in { display: grid; grid-template-columns: auto auto auto 1fr auto; align-items: center; padding: 22px 0 18px; } .footer__in > * { padding: 0 34px; border-left: 1px solid rgba(255, 255, 255, .12); } .footer__in > :first-child { padding-left: 0; border: 0; } .footer__logo img { width: 140px; } .footer h4 { margin-bottom: 12px; color: #fff; font-size: 16px; font-weight: 600; } .fcols { display: flex; gap: 34px; } .fcols ul { display: grid; gap: 4px; align-content: start; white-space: nowrap; } .footer a:hover { color: #fff; } .fcontact { display: grid; gap: 6px; } .fcontact a, .fcontact span { display: flex; align-items: center; gap: 14px; white-space: nowrap; } .fcontact .i { font-size: 15px; color: #fff; } .fcontact address { font-style: normal; line-height: 1.45; } .fsocial { display: flex; align-items: center; gap: 12px; } .fsocial a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 5px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 17px; } .fsocial a:hover { background: var(--pink); } .footer__bottom { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0 16px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; } .footer__bottom div { display: flex; gap: 12px; } /* ---------- inner pages: hero ---------- */ .phero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff, var(--bg)); } .phero__media { position: absolute; inset: 0 0 0 auto; width: 44%; } .phero__media img { width: 100%; height: 100%; object-fit: cover; object-position: left center; } .phero__content { position: relative; width: 58%; min-height: 470px; padding: 6px 0 46px; } .phero--nocrumbs .phero__content { padding-top: 60px; } .phero--packs .phero__content { min-height: 0; padding-bottom: 40px; } .phero--packs .lead { max-width: 860px; } .phero .kicker { font-size: 13px; letter-spacing: .16em; } .phero .h1-sm { margin-top: 6px; } .phero .lead { color: var(--text); font-size: 21px; line-height: 1.45; max-width: 660px; margin-top: 20px; } /* hero chips: service pages = pink square + text (no card) */ .chips { display: flex; gap: 28px; margin-top: 30px; white-space: nowrap; } .chip { display: flex; align-items: center; gap: 16px; color: var(--ink); font-size: 15.5px; font-weight: 600; line-height: 1.3; } .chip .tile { width: 64px; height: 64px; border-radius: 10px; font-size: 38px; box-shadow: 0 6px 16px rgba(229, 4, 95, .1); } .chip .tile .i { stroke-width: 1.9; } .chip small { display: block; font-size: 15px; font-weight: 400; color: var(--muted); } /* contact / packs: round icon + divider */ .chips--sep { gap: 0; } .chips--sep .chip { padding: 0 26px; border-left: 1.5px solid var(--line); font-size: 15px; } .chips--sep .chip:first-child { padding-left: 0; border: 0; } .chips--sep .tile { width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #fff 0 34%, #fbd0e1 100%); font-size: 30px; } /* création: white cards with round icon */ .chips--cards { gap: 16px; } .chips--cards .chip { padding: 14px 26px 14px 14px; background: #fff; border-radius: 10px; box-shadow: var(--shadow); } .chips--cards .tile { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #fff 0 34%, #fbd0e1 100%); font-size: 26px; } .phero .btns { margin-top: 34px; gap: 26px; } .phero .btn { height: 60px; padding: 0 40px; font-size: 18.5px; } /* inner pages: sections */ .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 21px; } .pcard { display: flex; gap: 22px; align-items: flex-start; padding: 22px 22px 24px; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); } .pcard .ring { width: 86px; height: 86px; font-size: 40px; } .pcard h3 { color: var(--ink); font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; margin-top: 4px; } .pcard p { margin-top: 6px; font-size: 18.5px; line-height: 1.4; color: var(--desc); } .adv { display: grid; grid-template-columns: repeat(4, 1fr); } .adv > div { padding: 0 26px 0 30px; border-left: 1.5px solid var(--line); } .adv > div:first-child { border: 0; padding-left: 0; } .adv .ring { width: 88px; height: 88px; font-size: 44px; margin-bottom: 18px; } .adv h3 { color: var(--ink); font-size: 21.5px; font-weight: 800; letter-spacing: -.035em; line-height: 1.3; white-space: nowrap; } .adv p { margin-top: 6px; font-size: 19px; line-height: 1.45; color: var(--desc); } .steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; } .steps__arrow { padding: 0 10px; color: #8391a8; font-size: 28px; } .scard { align-self: stretch; padding: 14px 22px 24px; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); } .scard__top { display: flex; align-items: center; gap: 26px; margin-bottom: 16px; } .scard .tile { width: 66px; height: 66px; font-size: 36px; } .num { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(145deg, #f2146f, var(--pink-2)); color: #fff; font-weight: 700; font-size: 20px; box-shadow: 0 6px 14px rgba(229, 4, 95, .28); } .scard h3 { color: var(--ink); font-size: 20px; font-weight: 700; letter-spacing: -.03em; line-height: 1.25; } .scard p { margin-top: 6px; font-size: 19px; line-height: 1.35; color: var(--desc); } .band { position: relative; overflow: hidden; background: var(--band); color: #fff; } .band::after { content: ""; position: absolute; inset: 0 0 0 60%; background: linear-gradient(115deg, transparent 0 30%, rgba(255, 255, 255, .03) 30% 55%, transparent 55%); pointer-events: none; } .band__img { position: absolute; inset: 0 auto 0 0; width: 18%; } .band__img img { width: 100%; height: 100%; object-fit: cover; object-position: right center; } .band__in { position: relative; z-index: 1; display: flex; align-items: center; gap: 56px; min-height: 450px; padding: 40px var(--gutter) 44px calc(18% + 26px); } .band__main { flex: 1; } .band .kicker { color: #fff; font-size: 14px; margin-bottom: 12px; } .band .kicker::before { width: 56px; } .band h2 { color: #fff; font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.12; } .band p { margin-top: 16px; font-size: 18.5px; line-height: 1.45; color: rgba(255, 255, 255, .92); max-width: 700px; } .band .btns { margin-top: 32px; gap: 26px; } .band .btn { height: 66px; padding: 0 44px; font-size: 19px; } .band__side { display: grid; gap: 28px; padding-left: 56px; border-left: 1px solid rgba(255, 255, 255, .14); } .band__side .btn { width: 360px; justify-content: flex-start; padding: 0 36px; } .band__side .btn .i:last-child { margin-left: auto; } .bfeat { display: flex; align-items: center; gap: 26px; white-space: nowrap; } .bfeat .sq { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 12px; background: rgba(229, 4, 95, .16); color: var(--pink); font-size: 36px; } .bfeat b { display: block; font-size: 18px; font-weight: 700; } .bfeat > div span { font-size: 17px; color: rgba(255, 255, 255, .85); } .band__btnrow { display: flex; gap: 22px; } .band--row h2 { font-size: 40px; } /* création */ .process { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; } .process .pcard { align-self: stretch; align-items: center; padding: 20px 18px; } .process .pcard .ring { width: 64px; height: 64px; font-size: 28px; } .process .pcard h3 { font-size: 17px; margin: 0; } .process .pcard p { font-size: 16px; margin-top: 4px; } .process .steps__arrow { padding: 0 12px; font-size: 22px; } .duo { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; } .darkcard { padding: 26px 44px 30px; border-radius: 10px; background: linear-gradient(120deg, #0a1b47, #0e2458); color: #fff; } .darkcard .h2 { color: #fff; font-size: 28px; margin-bottom: 24px; } .darkcard .kicker { color: #c9d1e1; font-size: 13px; margin-bottom: 6px; } .dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 36px; } .dgrid > div { display: flex; gap: 20px; } .dgrid .sq { display: grid; place-items: center; width: 60px; height: 60px; flex: none; border-radius: 8px; background: rgba(229, 4, 95, .14); color: var(--pink); font-size: 28px; } .dgrid b { display: block; font-size: 17px; font-weight: 700; } .dgrid p { font-size: 15.5px; line-height: 1.45; color: rgba(255, 255, 255, .88); margin-top: 4px; } .docs { position: relative; display: grid; grid-template-columns: 1fr 30%; background: #fff; border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; } .docs__body { padding: 26px 22px 26px 44px; } .docs .h2 { font-size: 28px; } .docs .kicker { font-size: 13px; margin-bottom: 6px; } .docs__body > p { font-size: 15px; margin: 4px 0 14px; } .checklist { display: grid; gap: 9px; padding: 14px 20px; border-radius: 8px; box-shadow: var(--shadow-sm); } .checklist li { display: flex; gap: 14px; align-items: center; font-size: 15px; color: #3a4a64; } .checklist .check { width: 16px; height: 16px; font-size: 10px; } .docs__img img { width: 100%; height: 100%; object-fit: cover; } /* cabinet */ .chero { position: relative; overflow: hidden; background: var(--bg); } .chero__media { position: absolute; inset: 0 0 0 auto; width: 43%; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); } .chero__media img { width: 100%; height: 100%; object-fit: cover; object-position: left center; } .chero__content { position: relative; width: 58%; padding: 64px 0 60px; } .chero .h1 { font-size: 68px; } .chero .strong { margin-top: 26px; color: var(--ink); font-size: 21px; font-weight: 500; line-height: 1.45; max-width: 780px; } .chero .lead { color: var(--muted); margin-top: 16px; font-size: 21px; max-width: 760px; } .kstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; max-width: 800px; white-space: nowrap; } .kstats > div { display: flex; align-items: center; gap: 18px; padding: 24px 18px; background: #fff; border-radius: 10px; box-shadow: var(--shadow); } .kstats .ring { width: 72px; height: 72px; font-size: 32px; } .kstats b { display: block; color: var(--ink); font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; } .kstats > div > div span { font-size: 17px; } .engage { position: relative; overflow: hidden; } .engage__media { position: absolute; inset: 40px 0 0 auto; width: 38%; } .engage__media img { width: 100%; height: 100%; object-fit: cover; object-position: left top; } .engage__main { position: relative; width: 64%; } .engage .h2-lg { font-size: 60px; } .engage .lead { color: var(--muted); max-width: 740px; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; } .grid2 .pcard { padding: 24px 24px 30px; } .grid2 .pcard h3 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin: 0; } .grid2 .pcard p { font-size: 16px; } .grid2 .tile { width: 72px; height: 72px; font-size: 36px; } .cbanner { position: relative; overflow: hidden; margin: 10px auto 64px; border-radius: 14px; background: #0b1d4a; color: #fff; } .cbanner__media { position: absolute; inset: 0 0 0 auto; width: 49%; } .cbanner__media img { width: 100%; height: 100%; object-fit: cover; object-position: left center; } .cbanner__media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0b1d4a 0%, rgba(11, 29, 74, 0) 40%); } .cbanner__in { position: relative; width: 58%; padding: 56px 0 52px 5.5%; } .cbanner .kicker { color: #fff; font-size: 14px; } .cbanner h2 { color: #fff; font-size: 49px; font-weight: 800; letter-spacing: -.035em; line-height: 1.08; } .cbanner p { margin-top: 20px; font-size: 18.5px; line-height: 1.5; color: rgba(255, 255, 255, .9); max-width: 600px; } .cbanner .btns { margin-top: 32px; } .cbanner .btn { height: 64px; padding: 0 44px; font-size: 18px; } .cfeats { display: flex; margin-top: 40px; } .cfeats .bfeat { gap: 18px; padding: 0 22px; border-left: 1px solid rgba(255, 255, 255, .15); } .cfeats .bfeat:first-child { padding-left: 0; border: 0; } .cfeats .sq { width: 60px; height: 60px; font-size: 28px; } .cfeats b { font-size: 15.5px; } .cfeats .bfeat > div span { font-size: 15.5px; } /* contact page */ .cwrap { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; } .card { padding: 34px 34px; background: #fff; border-radius: 12px; box-shadow: var(--shadow); } .card .h2 { font-size: 35px; } .card > p.muted { margin: 10px 0 26px; font-size: 18px; line-height: 1.45; } .cform .fgrid { gap: 18px; } .cform .field { height: 60px; font-size: 16.5px; padding: 0 18px; } .cform textarea.field { height: 160px; padding: 16px 18px; } .cform label { display: block; margin: 0 0 8px 12px; color: var(--ink); font-size: 16px; } .cform__foot { display: flex; align-items: center; gap: 40px; margin-top: 26px; } .cform__foot .btn { height: 64px; padding: 0 44px; font-size: 18.5px; } .cform__foot small { display: flex; gap: 18px; align-items: center; color: var(--muted); font-size: 15.5px; line-height: 1.4; } .cform__foot small .i { font-size: 28px; color: var(--ink); } .coords { display: grid; gap: 30px; } .coords > div { display: flex; gap: 26px; align-items: center; } .coords .ring { width: 80px; height: 80px; font-size: 34px; } .coords b { display: block; color: var(--ink); font-size: 17px; font-weight: 700; } .coords strong { display: block; color: var(--ink); font-size: 20px; font-weight: 600; } .coords > div > div span { font-size: 17px; color: var(--muted); } .brand-dots { display: flex; gap: 40px; margin-top: 34px; padding-left: 50px; } .brand-dots a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; font-size: 20px; } .locate { display: grid; grid-template-columns: .74fr 1fr; gap: 50px; align-items: center; } .pinbox { display: flex; gap: 24px; align-items: center; margin: 30px 0 18px; padding: 22px 24px; background: var(--bg-2); border-radius: 8px; font-size: 15px; color: var(--muted); } .pinbox .ring { width: 60px; height: 60px; font-size: 28px; } .pinbox b { display: block; color: var(--ink); font-size: 20px; font-weight: 500; } .locate .btn { height: 58px; font-size: 18px; } .locate iframe { width: 100%; height: 336px; border: 0; border-radius: 10px; } /* packs page */ .packs--3 { grid-template-columns: repeat(3, 1fr); gap: 26px; } .packs--3 .pack { padding: 30px 30px 34px; } .packs--3 .pack__top .tile { width: 84px; height: 84px; border-radius: 50%; font-size: 38px; background: radial-gradient(circle at 50% 42%, #fff 0 38%, #fcd6e5 100%); } .packs--3 .pack__name { font-size: 27px; } .packs--3 .pack__sub { font-size: 16px; } .packs--3 .pack__from { font-size: 20px; } .packs--3 .pack__price { font-size: 52px; } .packs--3 .pack__price small { font-size: 26px; } .packs--3 .pack__old { font-size: 19px; } .packs--3 .pack li { font-size: 19px; } .packs--3 .check { width: 22px; height: 22px; } .packs--3 .pack .btn { height: 58px; font-size: 19px; } .ctable { overflow-x: auto; border-radius: 10px; box-shadow: var(--shadow-sm); background: #fff; } .ctable table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 17.5px; } .ctable th, .ctable td { padding: 9px 22px; border-bottom: 1px solid var(--line); text-align: center; } .ctable th:first-child, .ctable td:first-child { text-align: left; } .ctable th { background: #f1f4f9; color: var(--ink); font-weight: 700; } .ctable td { color: var(--text); } .ctable .pro { background: #fef3f7; } .ctable th.pro { color: var(--pink); background: #fde6ef; } .ctable .check { margin: auto; width: 20px; height: 20px; font-size: 12px; } .choose { display: grid; grid-template-columns: repeat(4, 1fr); } .choose > div { display: flex; gap: 22px; padding: 0 22px; border-left: 1.5px solid var(--line); } .choose > div:first-child { border: 0; padding-left: 0; } .choose b { display: block; color: var(--ink); font-size: 17px; font-weight: 700; } .choose p { margin-top: 4px; font-size: 16.5px; line-height: 1.45; color: var(--muted); } .choose .ring { width: 76px; height: 76px; font-size: 32px; } /* blog / generic */ .phead { padding: 8px 0 44px; } .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .post { background: #fff; border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; } .post > img { display: block; width: 100%; height: auto; margin: 0; border-radius: 12px 12px 0 0; } .post div { padding: 20px 22px 24px; } .post time { font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--pink); } .post h3 { margin: 8px 0; color: var(--ink); font-size: 19px; font-weight: 800; letter-spacing: -.02em; } .post p { font-size: 16px; color: var(--muted); } .e404 { padding: 90px 0 110px; text-align: center; } .e404 b { display: block; color: var(--pink); font-size: 160px; font-weight: 800; letter-spacing: -.05em; line-height: 1; } .e404 .btns { justify-content: center; } /* ---------- motion & decoration ---------- */ [id] { scroll-margin-top: 110px; } /* living backgrounds in the empty areas of light sections */ .sec, .phead, .e404 { position: relative; overflow-x: clip; } .sec, .phead, .e404, .why, .engage, .hero, .phero, .chero { isolation: isolate; } /* big soft colour glow, alternating pink (odd sections) / blue (even) */ .sec::before, .phead::before, .why::before, .engage::before, .hero::before, .phero::before, .chero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 920px; height: 920px; left: -430px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(229, 4, 95, .17) 0%, rgba(229, 4, 95, .07) 36%, rgba(229, 4, 95, 0) 66%); animation: blob 18s ease-in-out infinite alternate; } .sec:nth-of-type(even)::before { left: auto; right: -430px; top: 4%; background: radial-gradient(circle, rgba(37, 99, 235, .13) 0%, rgba(10, 34, 87, .06) 38%, rgba(10, 34, 87, 0) 66%); animation-duration: 22s; } /* fine grid texture fading out from one side, slowly sliding */ .sec::after, .phead::after, .why::after, .engage::after { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0 0 0 50%; background-image: linear-gradient(rgba(10, 34, 87, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 34, 87, .075) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 62% 70% at 88% 30%, #000 8%, transparent 72%); mask-image: radial-gradient(ellipse 62% 70% at 88% 30%, #000 8%, transparent 72%); animation: gridpan 16s ease-in-out infinite alternate; } .sec:nth-of-type(even)::after, .why::after, .engage::after { inset: 0 50% 0 0; -webkit-mask-image: radial-gradient(ellipse 62% 70% at 12% 72%, #000 8%, transparent 72%); mask-image: radial-gradient(ellipse 62% 70% at 12% 72%, #000 8%, transparent 72%); } .band::before { content: ""; position: absolute; width: 700px; height: 700px; right: 6%; top: -300px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(229, 4, 95, .22) 0%, rgba(229, 4, 95, 0) 62%); animation: blob 16s ease-in-out infinite alternate; } @keyframes blob { to { transform: translate(80px, 60px) scale(1.2); } } @keyframes gridpan { to { transform: translate3d(46px, 46px, 0); } } /* floating shapes (added by javascript/ideal.js), drifting + following the mouse a little */ .fx { position: absolute; z-index: -1; pointer-events: none; transform: translate3d(calc(var(--mx, 0) * var(--z, 10) * 1px), calc(var(--my, 0) * var(--z, 10) * 1px), 0); transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); } .fx > i { display: block; animation: drift var(--t, 9s) ease-in-out var(--dl, 0s) infinite alternate; } @keyframes drift { from { transform: translateY(-16px) rotate(calc(var(--r, 0deg) * -1)); } to { transform: translateY(16px) rotate(var(--r, 0deg)); } } .fx--ring > i { width: 58px; height: 58px; border-radius: 50%; border: 3px solid rgba(229, 4, 95, .34); --r: 30deg; } .fx--ring2 > i { width: 120px; height: 120px; border-radius: 50%; border: 2px dashed rgba(10, 34, 87, .22); --r: 70deg; } .fx--plus > i { width: 28px; height: 28px; color: rgba(229, 4, 95, .5); --r: 90deg; background: linear-gradient(currentColor, currentColor) center / 100% 3.5px no-repeat, linear-gradient(currentColor, currentColor) center / 3.5px 100% no-repeat; } .fx--navy > i { color: rgba(10, 34, 87, .32); } .fx--sq > i { width: 24px; height: 24px; border: 3px solid rgba(10, 34, 87, .3); border-radius: 6px; --r: 135deg; } .fx--dot > i { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, #f2146f, #cf0350); box-shadow: 0 6px 18px rgba(229, 4, 95, .4); opacity: .75; } .fx--dots > i { width: 132px; height: 96px; background-image: radial-gradient(rgba(229, 4, 95, .42) 2.2px, transparent 2.6px); background-size: 22px 22px; } .fx--dots.fx--navy > i { background-image: radial-gradient(rgba(10, 34, 87, .3) 2.2px, transparent 2.6px); } .fx--swoosh svg { display: block; width: 460px; height: 170px; overflow: visible; } .fx--swoosh path { fill: none; stroke: rgba(229, 4, 95, .38); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 560; stroke-dashoffset: 560; transition: stroke-dashoffset 2.2s cubic-bezier(.6, .1, .2, 1) .3s; } .fx--swoosh path + path { stroke: rgba(10, 34, 87, .16); stroke-width: 2; transition-delay: .7s; } .fx--swoosh polygon { fill: rgba(229, 4, 95, .45); opacity: 0; transition: opacity .6s 2.2s; } .seen .fx--swoosh path { stroke-dashoffset: 0; } .seen .fx--swoosh polygon { opacity: 1; } /* page opening: hero text arrives in sequence, photo settles */ @keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes settle { from { transform: scale(1.09); } to { transform: none; } } .hero__content > *, .phero__content > *, .chero__content > * { animation: fadeUp .9s cubic-bezier(.2, .7, .2, 1) both; } .hero__content > :nth-child(2), .phero__content > :nth-child(2), .chero__content > :nth-child(2) { animation-delay: .08s; } .hero__content > :nth-child(3), .phero__content > :nth-child(3), .chero__content > :nth-child(3) { animation-delay: .16s; } .hero__content > :nth-child(4), .phero__content > :nth-child(4), .chero__content > :nth-child(4) { animation-delay: .24s; } .hero__content > :nth-child(5), .phero__content > :nth-child(5), .chero__content > :nth-child(5) { animation-delay: .32s; } .hero__content > :nth-child(n+6), .phero__content > :nth-child(n+6), .chero__content > :nth-child(n+6) { animation-delay: .4s; } .hero__media img, .phero__media img, .chero__media img { animation: settle 2.4s cubic-bezier(.2, .7, .2, 1) both; } /* scroll reveal (classes added by javascript/ideal.js) */ .rv { transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); } .rv:not(.in) { opacity: 0; transform: translateY(30px); } /* hover life */ .pcard, .scard, .feat, .pack, .testi, .mcard, .kstats > div, .tint-box, .post, .offer, .gbadge { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; } .ring, .tile, .mcard__img img, .post img { transition: transform .45s cubic-bezier(.2, .7, .2, 1); } .mcard__img { overflow: hidden; border-radius: 12px 12px 0 0; } .mcard__num, .mcard__tile { z-index: 1; } .svc-card__img img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); } .btn--pink { position: relative; overflow: hidden; isolation: isolate; } .btn--pink::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%); transform: translateX(-130%); transition: transform .8s cubic-bezier(.2, .7, .2, 1); } .btn .i:last-child { transition: transform .3s; } @media (hover: hover) { .svc-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 35, 80, .12); } .pcard:hover, .scard:hover, .feat:hover, .pack:hover, .testi:hover, .mcard:hover, .kstats > div:hover, .post:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(15, 35, 80, .13); } .pcard:hover .ring, .adv > div:hover .ring, .choose > div:hover .ring, .coords > div:hover .ring, .feat:hover .tile, .scard:hover .tile, .pack:hover .pack__top .tile, .chip:hover .tile { transform: scale(1.1) rotate(-6deg); } .mcard:hover .mcard__img img, .svc-card:hover .svc-card__img img { transform: scale(1.06); } .btn--pink:hover::after { transform: translateX(130%); } .btn:hover .i:last-child, .more:hover .i { transform: translateX(4px); } } /* back to top, with a ring that fills as you scroll */ .totop { position: fixed; right: 26px; bottom: 26px; z-index: 45; display: grid; place-items: center; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; font-size: 24px; background: conic-gradient(var(--pink) calc(var(--p, 0) * 1turn), rgba(10, 34, 87, .16) 0); box-shadow: 0 12px 28px rgba(10, 34, 87, .25); opacity: 0; visibility: hidden; transform: translateY(18px) scale(.9); transition: opacity .35s, transform .35s, visibility .35s; } .totop::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--navy); transition: background .25s; } .totop .i { position: relative; transition: transform .3s; } .totop.show { opacity: 1; visibility: visible; transform: none; } .totop:hover::before { background: var(--pink); } .totop:hover .i { transform: translateY(-3px); } .totop:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; } /* ---------- blog ---------- */ .ahero { padding: 0 0 52px; background: linear-gradient(180deg, #fff, var(--bg)); } .ahero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 64px; align-items: center; } .ahero .lead { font-size: 20px; max-width: 680px; } .ahero__img { margin: 0; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(15, 35, 80, .16); } .ahero__img img { width: 100%; height: 100%; object-fit: cover; } .bmeta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; color: var(--muted); font-size: 16px; } .bmeta span { display: inline-flex; align-items: center; gap: 9px; } .bmeta .i { color: var(--pink); font-size: 19px; } .abody { padding: 56px 0 64px; } .blayout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; align-items: start; } .prose { max-width: 880px; font-size: 19px; line-height: 1.75; color: #3d4c63; } .prose > * + * { margin-top: 18px; } .prose h2 { margin-top: 54px; color: var(--ink); font-size: 33px; font-weight: 800; letter-spacing: -.025em; line-height: 1.18; scroll-margin-top: 130px; } .prose h2::before { content: ""; display: block; width: 44px; height: 3px; margin-bottom: 16px; border-radius: 3px; background: var(--pink); } .prose h3 { margin-top: 30px; color: var(--ink); font-size: 22px; font-weight: 700; } .prose a { color: var(--pink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; } .prose a:hover { color: var(--pink-2); } .prose strong { color: var(--ink); font-weight: 700; } .prose ul, .prose ol { display: grid; gap: 10px; padding: 0; list-style: none; } .prose ul > li { position: relative; padding-left: 30px; } .prose ul > li::before { content: ""; position: absolute; left: 4px; top: .66em; width: 9px; height: 9px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px #fde3ee; } .prose ol { counter-reset: n; } .prose ol > li { position: relative; padding-left: 48px; counter-increment: n; } .prose ol > li::before { content: counter(n); position: absolute; left: 0; top: .12em; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(145deg, #f2146f, var(--pink-2)); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; } .tablewrap { overflow-x: auto; border-radius: 12px; box-shadow: var(--shadow-sm); } .prose table { width: 100%; border-collapse: collapse; background: #fff; font-size: 16.5px; line-height: 1.5; } .prose th, .prose td { padding: 13px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .prose th { background: #f1f4f9; color: var(--ink); font-weight: 700; } .prose tr:last-child td { border-bottom: 0; } .keypoints { padding: 28px 32px; border-radius: 16px; background: linear-gradient(135deg, #fff5f9, #fdeaf2); border: 1px solid #fbd6e5; } .kp-title { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--ink); font-size: 20px; font-weight: 800; } .kp-title .i { color: var(--pink); font-size: 26px; } .keypoints ul { gap: 12px; } .keypoints li { font-size: 17.5px; line-height: 1.6; } .bfaq { display: grid; gap: 10px; } .bfaq .qa summary { padding: 16px 18px; font-size: 17px; } .bfaq .qa p { font-size: 16.5px; } .note { display: flex; gap: 14px; padding: 18px 22px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); font-size: 15.5px; line-height: 1.6; } .note .i { flex: none; margin-top: 3px; color: var(--navy); font-size: 22px; } .author { display: flex; gap: 20px; align-items: center; padding: 22px 26px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); } .author img { width: 60px; height: 60px; flex: none; } .author b { display: block; color: var(--ink); font-size: 17px; } .author span { display: block; font-size: 15px; line-height: 1.5; color: var(--muted); } .bside { position: sticky; top: 130px; display: grid; gap: 20px; } .toc { padding: 24px 26px; background: #fff; border-radius: 14px; box-shadow: var(--shadow); } .toc b, .toc summary { display: flex; justify-content: space-between; align-items: center; color: var(--ink); font-size: 17px; font-weight: 800; } .toc ol { display: grid; gap: 2px; margin: 14px 0 0; padding: 0; list-style: none; } .toc ol > li { padding: 0; } .toc ol > li::before { content: none; } .toc a { display: block; padding: 8px 0 8px 16px; border-left: 2px solid var(--line); color: var(--text); font-size: 15.5px; font-weight: 500; line-height: 1.4; text-decoration: none; transition: .2s; } .toc a:hover { color: var(--pink); border-color: var(--pink); } .toc--m { display: none; } .bcta { padding: 30px 28px; border-radius: 16px; background: linear-gradient(140deg, #0a2257, #173a78); color: #fff; box-shadow: 0 20px 44px rgba(10, 34, 87, .25); } .bcta .kicker { font-size: 12px; } .bcta h3 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; } .bcta p { margin: 10px 0 22px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .85); } .bcta .btn { width: 100%; } .bcta__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: #fff; font-weight: 600; font-size: 15.5px; } .bcta__link .i { color: var(--pink); } /* article cards */ .agrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .acard { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; } .acard__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; } .acard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); } .acard__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 22px 24px 24px; } .acard h3 { color: var(--ink); font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; } .acard h3 a, .afeat h2 a { transition: color .2s; } .acard h3 a::after, .afeat h2 a::after { content: ""; position: absolute; inset: 0; } .acard p { flex: 1; font-size: 15.5px; line-height: 1.55; color: var(--desc); } .acard__meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14.5px; } .acard__meta .i { color: var(--pink); } .tag { align-self: flex-start; display: inline-flex; padding: 6px 14px; border-radius: 999px; background: var(--pink-soft); color: var(--pink); font-size: 13px; font-weight: 700; letter-spacing: .02em; } @media (hover: hover) { .acard:hover, .afeat:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(15, 35, 80, .13); } .acard:hover .acard__img img, .afeat:hover .afeat__img img { transform: scale(1.06); } .acard:hover h3 a, .afeat:hover h2 a { color: var(--pink); } } /* blog hub */ .bcats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .bcats a { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); color: var(--ink); font-size: 15.5px; font-weight: 600; transition: .2s; } .bcats a span { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: var(--pink-soft); color: var(--pink); font-size: 13px; font-weight: 700; } .bcats a:hover { color: var(--pink); transform: translateY(-2px); } .afeat { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; background: #fff; border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; } .afeat__img { min-height: 420px; overflow: hidden; } .afeat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); } .afeat__body { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 44px 48px; } .afeat h2 { color: var(--ink); font-size: 36px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; } .afeat p { font-size: 18px; line-height: 1.6; color: var(--desc); } /* ---------- rich hero sections (every page) ---------- Only transform/opacity are animated (GPU-composited, no layout or repaint work), and everything pauses while the hero is off screen (.fx-off, set by ideal.js). */ .hero, .phero, .chero, .ahero, .phead { position: relative; isolation: isolate; } .ahero { overflow-x: clip; } /* aurora: three soft lights (brand pink, indigo, sky) drifting behind the hero */ .hero::before, .phero::before, .chero::before, .ahero::before, .phead::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 1400px; height: 1100px; left: -520px; top: -420px; border-radius: 0; background: radial-gradient(closest-side at 32% 42%, rgba(229, 4, 95, .20), rgba(229, 4, 95, 0)), radial-gradient(closest-side at 70% 26%, rgba(99, 102, 241, .14), rgba(99, 102, 241, 0)), radial-gradient(closest-side at 52% 78%, rgba(14, 165, 233, .12), rgba(14, 165, 233, 0)); animation: aurora 22s ease-in-out infinite alternate; will-change: transform; } @keyframes aurora { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(110px, 50px, 0) rotate(10deg) scale(1.08); } 100% { transform: translate3d(-30px, 110px, 0) rotate(-8deg) scale(1.14); } } /* dot field behind the headline, slowly drifting */ .hero::after, .phero::after, .chero::after, .ahero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; top: -40px; left: -40px; width: 62%; height: calc(100% + 80px); background-image: radial-gradient(rgba(10, 34, 87, .17) 1.4px, transparent 1.8px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(ellipse 60% 55% at 30% 38%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 60% 55% at 30% 38%, #000 0%, transparent 72%); animation: dotdrift 14s linear infinite; } @keyframes dotdrift { to { transform: translate3d(28px, 28px, 0); } } /* pink words of the headline: a marker highlight draws under them once */ .hero h1 em, .phero h1 em, .chero h1 em, .ahero h1 em, .phead h1 em { background: linear-gradient(90deg, rgba(229, 4, 95, .14), rgba(229, 4, 95, .28)) no-repeat 0 92% / 0 .24em; -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: marker 1.2s .8s cubic-bezier(.2, .7, .2, 1) forwards; } @keyframes marker { to { background-size: 100% .24em; } } /* kicker line grows in */ .hero .kicker::before, .phero .kicker::before, .chero .kicker::before, .ahero .kicker::before, .phead .kicker::before { transform-origin: left; animation: grow .9s .3s cubic-bezier(.2, .7, .2, 1) both; } @keyframes grow { from { transform: scaleX(0); } } /* main button: a light sweeps across it every few seconds */ .hero .btn--pink::after, .phero .btn--pink::after, .chero .btn--pink::after { animation: shine 5s 2.2s ease-in-out infinite; } @keyframes shine { 0%, 62% { transform: translateX(-130%); } 88%, 100% { transform: translateX(130%); } } /* photo: settles in, then a very slow Ken Burns zoom */ .hero__media img, .phero__media img, .chero__media img, .ahero__img img { animation: settle 2.4s cubic-bezier(.2, .7, .2, 1) both, kenburns 26s 2.4s ease-in-out infinite alternate; } @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07) translate3d(-1.2%, -.8%, 0); } } /* article + blog hero text arrives in sequence like the other heroes */ .ahero__text > *, .phead .container > * { animation: fadeUp .9s cubic-bezier(.2, .7, .2, 1) both; } .ahero__text > :nth-child(2), .phead .container > :nth-child(2) { animation-delay: .08s; } .ahero__text > :nth-child(3), .phead .container > :nth-child(3) { animation-delay: .16s; } .ahero__text > :nth-child(4), .phead .container > :nth-child(4) { animation-delay: .24s; } .ahero__text > :nth-child(n+5), .phead .container > :nth-child(n+5) { animation-delay: .32s; } .fx-off::before, .fx-off::after, .fx-off .btn--pink::after, .fx-off .hero__media img, .fx-off .phero__media img, .fx-off .chero__media img, .fx-off .ahero__img img, .fx-off .fx > i { animation-play-state: paused; } /* création page: its mockup is a denser design (everything ~10% smaller) */ .desk main.dense { zoom: .9; --w: calc(1380px / var(--k, 1) / .9); --gutter: max(var(--pad), calc((var(--lw, 100vw) / .9 - var(--w)) / 2)); } .desk main.dense .duo { grid-template-columns: 1.36fr 1fr; } .desk main.dense .sec { padding: 28px 0 18px; } .desk main.dense .phero__content { padding-bottom: 34px; } .desk main.dense .phero__media { width: 48%; } .desk main.dense .phero__media img { object-position: 30% center; } .desk main.dense .phero__content { width: 52%; min-height: 0; } /* ---------- phones & tablets: below 900px, and touch screens below 1200px (iPad landscape, landscape phones) ---------- */ @media (max-width: 899px), (max-width: 1199px) and (pointer: coarse) { .sec::before, .phead::before, .why::before, .engage::before, .hero::before, .phero::before, .chero::before { width: 420px; height: 420px; left: -220px; } .hero::before, .phero::before, .chero::before, .ahero::before, .phead::before { width: 820px; height: 760px; left: -330px; top: -260px; } .hero::after, .phero::after, .chero::after, .ahero::after { width: calc(100% + 80px); } .sub { display: none; } .has-sub.open .sub { display: block; animation: fadeUp .35s cubic-bezier(.2, .7, .2, 1) both; } .has-sub > a .i { transition: transform .25s; } .has-sub.open > a .i { transform: rotate(180deg); } .sec:nth-of-type(even)::before { right: -220px; } .fx--ring, .fx--ring2, .fx--plus, .fx--dots, .fx--swoosh, .fx--sq { display: none; } .totop { right: 16px; bottom: 16px; width: 50px; height: 50px; font-size: 21px; } :root { --pad: 20px; } .burger { display: grid; } .ahero__grid, .blayout, .afeat { grid-template-columns: minmax(0, 1fr); gap: 26px; } .ahero { padding-bottom: 30px; } .ahero__img { order: -1; aspect-ratio: 16 / 10; border-radius: 14px; } .ahero .lead { font-size: 16.5px; } .bmeta { gap: 8px 18px; margin-top: 20px; font-size: 14px; } .abody { padding: 34px 0 44px; } .prose { font-size: 16.5px; line-height: 1.7; } .prose h2 { margin-top: 42px; font-size: 24px; scroll-margin-top: 90px; } .prose h3 { font-size: 19px; } .prose table { min-width: 520px; font-size: 14px; } .prose th, .prose td { padding: 10px 12px; } .keypoints { padding: 20px; } .kp-title { font-size: 17.5px; } .keypoints li { font-size: 15.5px; } .bfaq .qa summary { padding: 13px 14px; font-size: 15px; } .bfaq .qa p { font-size: 15px; } .author { padding: 18px; } .bside { display: none; } .toc--m { display: block; padding: 16px 20px; } .toc--m summary { cursor: pointer; list-style: none; min-height: 44px; } .toc--m a { padding-block: 11px; } .toc--m summary::-webkit-details-marker { display: none; } .toc--m[open] summary .i { transform: rotate(180deg); } .agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .acard__body { padding: 18px 18px 20px; gap: 10px; } .acard h3 { font-size: 17px; } .acard p { font-size: 14.5px; } .afeat__img { min-height: 0; aspect-ratio: 16 / 9; } .afeat__body { padding: 24px 22px; gap: 12px; } .afeat h2 { font-size: 24px; } .afeat p { font-size: 15.5px; } .bcats { gap: 8px; margin-top: 24px; } .bcats a { padding: 9px 14px; font-size: 14px; } .burger .i + .i, .nav-open .burger .i:first-child { display: none; } .nav-open .burger .i + .i { display: block; } .header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; } /* a blurred header would trap the fixed drawer inside it */ body::after { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(8, 25, 53, .5); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } body.nav-open::after { opacity: 1; visibility: visible; } .nav-lock { overflow: hidden; } .nav .nav__cta { width: 100%; height: 50px; } .sub a { padding: 8px 12px; font-size: 15px; } .nav, .header--home .nav { position: fixed; margin: 0; inset: 0 0 0 auto; height: 100dvh; z-index: 60; width: min(380px, 86vw); flex-direction: column; align-items: stretch; gap: 16px; padding: 90px 24px 24px; background: #fff; box-shadow: -20px 0 50px rgba(15, 35, 80, .2); transform: translateX(100%); transition: transform .3s; overflow-y: auto; } .nav-open .nav { transform: none; } .nav-open .burger { position: relative; z-index: 70; } .nav__list, .header--home .nav__list { flex-direction: column; align-items: stretch; gap: 0; margin: 0; } .nav__list > li > a, .header--home .nav__list > li > a { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 17px; } .nav__list > li > a.is-active { box-shadow: none; } .sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 4px 0 8px 12px; min-width: 0; } .wa { align-self: flex-start; } .topbar { display: none; } .header__in, .header--home .header__in { min-height: 72px; } .logo img, .header--home .logo img { width: 110px; } /* type scale */ .kicker { font-size: 12px; gap: 14px; letter-spacing: .16em; } .kicker::before { width: 40px; } .h1, .chero .h1 { font-size: 38px; } .h1-sm, .h1-sm.fit { font-size: 32px; } .h2-lg, .engage .h2-lg, .contact__info .h2-lg, .split .h2-lg, .faq__intro .h2-lg { font-size: 30px; white-space: normal; } .h2, .card .h2 { font-size: 26px; } .lead, .hero__content .lead, .phero .lead, .chero .strong, .chero .lead, .split p.lead, .contact__info p.lead { font-size: 16.5px; } .btns, .phero .btns, .band .btns { gap: 12px; margin-top: 26px; } .btn, .btn--lg, .phero .btn, .band .btn, .cbanner .btn, .projbar .btn, .cform__foot .btn { height: 50px; padding: 0 22px; font-size: 15.5px; } /* stacking */ .hero, .phero, .chero, .why, .engage { display: flex; flex-direction: column-reverse; } .hero__media, .phero__media, .chero__media { position: relative; width: 100%; height: clamp(220px, 56vw, 420px); clip-path: none; } .hero__media::before { display: none; } .hero__content, .phero__content, .chero__content, .why__main, .engage__main, .cbanner__in { width: 100%; min-height: 0; } .hero__content, .chero__content { padding: 36px 0 32px; } .phero__content { padding: 4px 0 32px; } .chips, .chips--sep, .chips--cards { flex-wrap: wrap; gap: 12px; margin-top: 22px; } .chip, .chips--sep .chip { font-size: 14px; padding: 0; border: 0; white-space: normal; } .adv h3, .scard h3 { white-space: normal; } .chips--cards .chip { padding: 10px 16px 10px 10px; } .chip .tile, .chips--sep .tile, .chips--cards .tile { width: 44px; height: 44px; font-size: 21px; } .sec, .sec--lg { padding: 40px 0; } .sec-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 26px; } .sec-head__aside { flex: none; } .sec-head__side { width: 100%; max-width: none; } .sec-head__side .btns { justify-content: center; } .sec-head > .btn { align-self: center; } .strip__in, .stats, .bigstats { grid-template-columns: 1fr 1fr; gap: 24px 0; } .strip__item:nth-child(3), .stat:nth-child(3), .bigstats > div:nth-child(3) { border: 0; padding-left: 16px; } .svc-grid, .method, .steps, .process, .feat-grid, .grid3 { grid-template-columns: 1fr 1fr; gap: 18px; } .method__arrow, .steps__arrow, .process .steps__arrow { display: none; } .why__media, .engage__media { position: relative; inset: auto; width: 100%; height: 340px; margin-bottom: 32px; } .why__media img { object-position: center 68%; } .engage__media { margin: 32px 0 0; } .split { grid-template-columns: 1fr; } .split__main { clip-path: none; padding: 40px var(--pad); } .split__photo { display: none; } .split__aside { padding: 18px var(--pad); } .inline-feats { flex-wrap: wrap; row-gap: 14px; margin-top: 0; } .inline-feats > div:first-child { padding-left: 0; } .packs { grid-template-columns: 1fr 1fr; } .packs__aside { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } .testis, .packs--3 { grid-template-columns: 1fr; } .faq { grid-template-columns: 1fr; } .faq__btn { justify-content: center; } .adv, .choose { grid-template-columns: 1fr 1fr; gap: 30px 0; } .adv > div:nth-child(3), .choose > div:nth-child(3) { border: 0; padding-left: 0; } .band__img { display: none; } .band__in { flex-direction: column; align-items: flex-start; min-height: 0; gap: 28px; padding: 44px var(--pad); } .band__side { padding-left: 0; border: 0; } .duo, .cwrap, .locate { grid-template-columns: 1fr; } .contact__in { width: auto; margin: 0 var(--pad); grid-template-columns: 1fr 1fr; } .contact__info { grid-column: 1 / -1; padding-right: 0; } .contact__info::before { right: -2000px; } .cinfo span { white-space: normal !important; } .qform { margin-top: 30px; } .mapcard { padding-top: 30px; } .cbanner { width: auto; margin-inline: var(--pad); display: flex; flex-direction: column-reverse; } .cbanner__media { position: relative; width: 100%; height: 300px; } .cbanner__media::before { background: linear-gradient(0deg, #0b1d4a 0%, rgba(11, 29, 74, 0) 40%); } .cbanner__in { padding: 36px 24px; } .cbanner h2 { font-size: 28px; } .cbanner p { font-size: 16px; } .cfeats { flex-wrap: wrap; gap: 18px; } .cfeats .bfeat { padding: 0; border: 0; } .posts { grid-template-columns: 1fr 1fr; } .projbar { flex-wrap: wrap; justify-content: flex-start; gap: 20px; } .projbar .btn { margin-left: 0; } .projbar__sep { display: none; } .footer__in { grid-template-columns: 1fr 1fr; gap: 28px 32px; padding: 30px 0 24px; } .footer__in > * { padding: 0; border: 0; } .fsocial a { width: 42px; height: 42px; font-size: 19px; } /* component sizes */ .trust { gap: 22px; margin-top: 30px; } .trust img { width: 140px; } .trust div { padding-left: 22px; font-size: 16px; } .trust strong { font-size: 24px; } .strip__item .i { font-size: 40px; } .strip__item h3 { font-size: 16px; } .strip__item p { font-size: 14.5px; } .ring, .pcard .ring, .coords .ring, .choose .ring, .pinbox .ring { width: 52px; height: 52px; font-size: 22px; } .adv .ring { width: 58px; height: 58px; font-size: 26px; margin-bottom: 14px; } .ring--lg, .kstats .ring { width: 60px; height: 60px; font-size: 26px; } .pcard { gap: 16px; padding: 18px; } .pcard h3, .grid2 .pcard h3 { font-size: 16px; } .pcard p, .grid2 .pcard p { font-size: 14.5px; } .grid2 .tile { width: 56px; height: 56px; font-size: 28px; } .adv h3 { font-size: 17px; } .adv p { font-size: 15px; } .scard { padding: 18px; } .scard__top { gap: 14px; margin-bottom: 14px; } .num { width: 42px; height: 42px; font-size: 15px; } .scard .tile { width: 46px; height: 46px; font-size: 22px; } .scard h3 { font-size: 16px; } .scard p { font-size: 14.5px; } .band .kicker, .kicker--light { font-size: 12px; } .band h2, .band--row h2 { font-size: 26px; } .band p { font-size: 15.5px; } .bfeat { gap: 16px; } .bfeat .sq { width: 52px; height: 52px; font-size: 24px; } .bfeat b { font-size: 15px; } .bfeat > div span { font-size: 14px; } .band__side .btn { width: 100%; } .svc-card .tile { width: 64px; height: 60px; margin: -44px 0 0 18px; font-size: 28px; } .svc-card h3 { font-size: 17px; } .svc-card p { font-size: 14.5px; } .feat .tile { width: 52px; height: 52px; font-size: 25px; } .feat h3 { font-size: 15.5px; } .feat p { font-size: 14.5px; } .stat b, .kstats b { font-size: 26px; } .mcard h3 { font-size: 17px; } .mcard p { font-size: 14.5px; } .pack__price, .packs--3 .pack__price { font-size: 36px; } .pack__price small, .packs--3 .pack__price small { font-size: 18px; } .packs--3 .pack li { font-size: 15.5px; } .packs--3 .pack__top .tile { width: 60px; height: 60px; font-size: 28px; } .offer h3 { font-size: 24px; } .bigstats b { font-size: 24px; } .bigstats .i { font-size: 44px; } .projbar h3 { font-size: 20px; } .gbadge b { font-size: 24px; } .testi p { font-size: 15px; } .testi__q { font-size: 56px; } .card { padding: 24px 20px; } .card > p.muted { font-size: 15px; } .cform .field { height: 50px; font-size: 15px; } .cform textarea.field { height: 130px; } .coords strong { font-size: 16px; } .coords b { font-size: 14px; } .coords > div > div span { font-size: 14px; } .brand-dots { padding-left: 0; gap: 20px; } .brand-dots a { width: 44px; height: 44px; } .coords strong a, .coords > div > div span a { display: inline-block; padding: 10px 0; margin: -10px 0; } .cinfo a { padding-block: 5px; } .fcontact a, .fcontact span { white-space: normal; } .addr a { padding: 10px 0; } .cinfo span, .coords strong, .fcontact a { overflow-wrap: anywhere; min-width: 0; } .contact__in > *, .cwrap > *, .duo > *, .locate > * { min-width: 0; } .pinbox b { font-size: 16px; } .ctable table { font-size: 14px; } .choose b { font-size: 15px; } .choose p { font-size: 14px; } .darkcard .h2, .docs .h2 { font-size: 24px; } .e404 b { font-size: 110px; } } @media (max-width: 600px) { .faq__cols, .strip__in, .stats, .bigstats, .svc-grid, .method, .steps, .process, .feat-grid, .grid3, .grid2, .adv, .choose, .kstats, .packs, .packs__aside, .posts, .dgrid, .faq--plain, .contact__in { grid-template-columns: minmax(0, 1fr); } .strip__item, .stat, .bigstats > div, .adv > div, .choose > div { border: 0 !important; padding-left: 0 !important; justify-content: flex-start; } .contact__info { grid-column: auto; } .cinfo { grid-template-columns: 1fr; } .cinfo a, .cinfo div { border: 0; } .fgrid { grid-template-columns: 1fr; } .pack--pro { margin-top: 10px; } .docs { grid-template-columns: 1fr; } .docs__body, .darkcard { padding: 28px 22px; } .docs__img { height: 200px; } .cform__foot { flex-direction: column; align-items: flex-start; gap: 16px; } .footer__in { grid-template-columns: 1fr; } .footer__in > * { padding: 0 !important; border: 0 !important; } .footer__bottom { flex-direction: column; } .band__btnrow { flex-direction: column; } .gbadge { flex-wrap: wrap; padding: 18px 20px; gap: 16px; } .gbadge div + div { border: 0; padding: 0; } .testi__who { flex-wrap: wrap; } .testi__who .stars { margin-left: 74px; } .br { display: none; } .pinbox { flex-direction: column; align-items: flex-start; gap: 12px; } .footer__bottom div { flex-wrap: wrap; } .footer__bottom span { white-space: nowrap; } .agrid { grid-template-columns: minmax(0, 1fr); } .inline-feats { flex-direction: column; align-items: flex-start; } .inline-feats > div { border: 0; padding: 0; } .offer__img { display: none; } .offer { min-height: 0; } .projbar { padding: 24px 20px; } .projbar .btn { width: 100%; padding: 0 20px; } /* swipeable card rows (cards peek in from the right) instead of very long stacks */ .svc-grid, .method, .testis, .feat-grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); margin-inline: calc(var(--pad) * -1); padding: 20px var(--pad) 22px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .svc-grid::-webkit-scrollbar, .method::-webkit-scrollbar, .testis::-webkit-scrollbar, .feat-grid::-webkit-scrollbar { display: none; } .svc-grid > *, .method > .mcard, .testis > *, .feat-grid > * { flex: 0 0 84%; scroll-snap-align: start; } .method { padding-top: 26px; } .why .feat-grid { margin-top: -8px; } /* comparison table fits the phone: no sideways scrolling */ .ctable table { min-width: 0; table-layout: fixed; font-size: 12.5px; } .ctable th, .ctable td { padding: 9px 6px; line-height: 1.3; } .ctable th:first-child, .ctable td:first-child { width: 43%; padding-left: 12px; } .ctable th { font-size: 12px; } .ctable .check { width: 17px; height: 17px; font-size: 10px; } .crumbs { flex-wrap: wrap; row-gap: 4px; } } @media (max-width: 380px) { :root { --pad: 16px; } .h1, .chero .h1 { font-size: 33px; } .h1-sm, .h1-sm.fit { font-size: 28.5px; } .h2-lg, .engage .h2-lg, .contact__info .h2-lg, .split .h2-lg, .faq__intro .h2-lg { font-size: 26.5px; } .h2, .card .h2, .band h2, .band--row h2 { font-size: 23.5px; } .btn, .btn--lg, .phero .btn, .band .btn, .cbanner .btn, .projbar .btn, .cform__foot .btn { padding: 0 18px; font-size: 15px; } .pack__price, .packs--3 .pack__price { font-size: 31px; } .trust img { width: 118px; } .tint-box { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; } .fcols { flex-wrap: wrap; gap: 8px 22px; } .coords > div { gap: 14px; } .coords .ring { width: 44px; height: 44px; font-size: 20px; } .btn { white-space: normal; height: auto; min-height: 50px; padding-block: 12px; line-height: 1.25; text-align: center; } } /* ---------- tablets (portrait and landscape): larger headings for the wider screen ---------- */ @media (min-width: 700px) and (max-width: 899px), (min-width: 700px) and (max-width: 1199px) and (pointer: coarse) { :root { --pad: 32px; } .h1, .chero .h1 { font-size: 46px; } .h1-sm, .h1-sm.fit { font-size: 39px; } .h2-lg, .engage .h2-lg, .contact__info .h2-lg, .split .h2-lg, .faq__intro .h2-lg { font-size: 35px; } .h2, .card .h2 { font-size: 29px; } .band h2, .band--row h2, .cbanner h2 { font-size: 30px; } .lead, .hero__content .lead, .phero .lead, .chero .strong, .chero .lead { font-size: 17.5px; max-width: 640px; } .hero__media, .phero__media, .chero__media { height: clamp(300px, 48vw, 460px); } .why__media { display: none; } } /* ---------- landscape tablets (iPad landscape): desktop-style composition, touch-sized type ---------- */ @media (min-width: 900px) and (max-width: 1199px) and (pointer: coarse) { :root { --pad: 36px; } .h1, .chero .h1 { font-size: 48px; } /* hero: photo beside the text */ .hero, .phero, .chero { display: block; } .hero__media, .phero__media, .chero__media { position: absolute; inset: 0 0 0 auto; width: 43%; height: auto; } .hero__media { clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); } .hero__media::before { display: block; } .chero__media { clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); } .hero__content, .chero__content { width: 55%; padding: 52px 0 48px; } .phero__content { width: 59%; padding: 4px 0 44px; } .phero__media { width: 39%; } .phero--nocrumbs .phero__content { padding-top: 48px; } /* section headers: title left, extra right */ .sec-head { flex-direction: row; align-items: flex-end; gap: 32px; } .sec-head__side { width: auto; max-width: 400px; } .sec-head__side .btns { justify-content: flex-start; } .sec-head > .btn { align-self: flex-end; } .sec-head > div:first-child { flex: 1 1 0; } .sec-head__aside { flex: 0 1 340px; } /* more cards per row */ .svc-grid, .method, .steps, .process, .strip__in, .stats, .bigstats, .adv, .choose { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid3, .feat-grid, .testis, .packs--3, .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .packs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .strip__item:nth-child(3), .stat:nth-child(3), .bigstats > div:nth-child(3) { border-left: 1.5px solid var(--line); padding-left: 20px; } .adv > div:nth-child(3), .choose > div:nth-child(3) { border-left: 1.5px solid var(--line); padding-left: 22px; } .adv > div, .choose > div { padding-right: 16px; } .faq { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); } .faq__btn { justify-content: flex-end; } .cwrap { grid-template-columns: 1.4fr 1fr; } .locate, .duo { grid-template-columns: 1fr 1fr; } .split { grid-template-columns: 1fr 32%; } .split__aside { padding: 16px var(--pad) 16px 24px; } /* dark banner: text left, buttons/features right */ .band__in { flex-direction: row; align-items: center; gap: 36px; padding: 44px var(--pad); } .band__side { padding-left: 32px; border-left: 1px solid rgba(255, 255, 255, .14); } .band__side .btn { width: 280px; } .cbanner { display: block; } .cbanner__media { position: absolute; inset: 0 0 0 auto; width: 42%; height: auto; } .cbanner__media::before { background: linear-gradient(90deg, #0b1d4a 0%, rgba(11, 29, 74, 0) 40%); } .cbanner__in { width: 60%; padding: 44px 0 40px 36px; } .footer__in { grid-template-columns: auto 1fr 1fr; } .blayout { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; } .bside { display: grid; top: 100px; } .toc--m { display: none; } .ahero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 36px; } .ahero__img { order: 0; aspect-ratio: 4 / 3; } .afeat { grid-template-columns: 1fr 1fr; } .afeat__img { aspect-ratio: auto; min-height: 340px; } .agrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .why__media { display: none; } .strip__item { gap: 14px; padding: 0 14px; } .strip__item .i { font-size: 34px; } .stat { gap: 14px; padding: 4px 16px; } .stat > div span, .bigstats span { white-space: nowrap; } .bigstats > div { gap: 14px; } .bigstats b { font-size: 21px; } .bigstats .i { font-size: 36px; } .testi { grid-template-columns: 40px 1fr; gap: 0 14px; padding: 20px; } .testi__who { flex-wrap: wrap; row-gap: 8px; } .testi__who .stars { margin-left: 0; flex-basis: 100%; } .pack__price, .packs--3 .pack__price { font-size: 29px; } .pack__price small, .packs--3 .pack__price small { font-size: 15px; } .packs--3 .pack { padding: 24px 20px 26px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }