/* ============================================================ Autivy Smart Sites — styles Palette drawn from Hero BG.png + blueprint blue accent ============================================================ */ /* Pre-hide GSAP-animated entrances so they don't flash fully visible before main.js runs (a is added synchronously in , before body paints; main.js removes it again if GSAP/motion is unavailable). */ .gsap-anim [data-hero], .gsap-anim [data-reveal]:not([data-rise]), .gsap-anim [data-rise] { opacity: 0; } :root { /* colour */ --cream: #F4F0E9; --cream-2: #ECE7DD; --paper: #FAF7F1; --taupe: #D9D1C3; --taupe-deep: #B8AE9E; --ink: #211E1A; --ink-2: #2B2723; --ink-mute: #6E6558; --blue: #2450E0; --blue-deep: #1B3FBF; --blue-light: #8FA8FF; --rust: #B4543C; --line: rgba(33, 30, 26, 0.14); --line-dark: rgba(244, 240, 233, 0.16); /* type */ --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-serif: "Instrument Serif", Georgia, serif; --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace; /* rhythm */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6.5rem; --space-7: 9rem; --radius: 14px; --radius-lg: 20px; --container: 74rem; --shadow-card: 0 1px 2px rgba(33, 30, 26, 0.04), 0 12px 32px -12px rgba(33, 30, 26, 0.12); --shadow-card-hover: 0 2px 4px rgba(33, 30, 26, 0.05), 0 24px 48px -16px rgba(33, 30, 26, 0.18); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; } html:focus-within { scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } a { color: inherit; } ul { padding: 0; } ::selection { background: var(--blue); color: #fff; } #system, #process, #pricing, #faq { scroll-margin-top: 4.5rem; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ---------- utilities ---------- */ .container { width: min(100% - 3rem, var(--container)); margin-inline: auto; } .container--narrow { max-width: 52rem; } .mono { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } .skip-link { position: absolute; left: 1rem; top: -3.5rem; z-index: 200; padding: 0.6rem 1rem; background: var(--ink); color: var(--cream); border-radius: 8px; text-decoration: none; transition: top 0.2s var(--ease-out); } .skip-link:focus { top: 1rem; } .eyebrow { color: var(--blue); margin-bottom: var(--space-2); } .eyebrow--light { color: var(--blue-light); } .section-title { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 640; line-height: 1.06; letter-spacing: -0.025em; text-wrap: balance; max-width: 22ch; } .section-title em, .problem__title em, .shift__title em, .closer__title em, .hero__line em { font-family: var(--font-serif); font-style: italic; /* synthetic slant of the normal cut (sharp letterforms) */ font-synthesis: style; font-weight: 400; letter-spacing: 0; font-size: 1.06em; line-height: 1; } .section-title em { color: var(--blue); padding-right: 0.06em; } .section-sub { margin-top: var(--space-3); max-width: 34rem; font-size: 1.125rem; color: var(--ink-mute); } .pricing__currency { margin-top: var(--space-2); color: var(--taupe-deep); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.6rem; font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em; text-decoration: none; border-radius: 12px; border: 1px solid transparent; cursor: pointer; transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); will-change: transform; } .btn--primary { background: var(--blue); color: #fff; box-shadow: 0 1px 2px rgba(27, 63, 191, 0.3), 0 8px 20px -8px rgba(27, 63, 191, 0.45); } .btn--primary:hover { background: var(--blue-deep); box-shadow: 0 2px 4px rgba(27, 63, 191, 0.3), 0 14px 28px -10px rgba(27, 63, 191, 0.5); } .btn--ghost { border-color: var(--line); color: var(--ink); background: rgba(250, 247, 241, 0.6); } .btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); } .btn--ghost:active { transform: translateY(0); } .btn--light { background: var(--cream); color: var(--ink); } .btn--light:hover { background: #fff; } .btn--lg { padding: 1.05rem 2rem; font-size: 1.05rem; border-radius: 12px; } .btn--sm { padding: 0.55rem 1.1rem; font-size: 0.9rem; } .btn--block { width: 100%; } /* ---------- nav ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); /* the page runs under the notch/status bar (viewport-fit=cover), so the bar pads itself up into that strip and paints it with its own background — the safe area reads as an extension of the bar, not a separate block. Zero on every desktop browser, so the desktop layout is untouched. */ padding-top: env(safe-area-inset-top); } .nav.is-scrolled { background: rgba(244, 240, 233, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); } .nav__inner { width: min(100% - 3rem, var(--container)); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); padding-block: 1rem; transition: padding 0.3s var(--ease-out); } .nav__brand { grid-column: 1; justify-self: start; } .nav__links { grid-column: 2; } .nav__actions { grid-column: 3; justify-self: end; } .nav.is-scrolled .nav__inner { padding-block: 0.65rem; } /* The scrolled bar is only 82% opaque, so over a dark band it composites down to roughly #cecac4 and --ink-mute drops to 3.51:1. Darken the links in that state only, which keeps the frosted look while clearing AA on every background. */ .nav.is-scrolled .nav__links a, .nav.is-scrolled .nav__phone { color: #575044; } .nav__brand { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.03em; text-decoration: none; } .nav__mark { width: 0.66em; height: 0.66em; background: var(--blue); border-radius: 3px; display: inline-block; transform: rotate(45deg); } .nav__logo { display: block; height: 22px; width: auto; transition: height 0.3s var(--ease-out); } .nav.is-scrolled .nav__logo { height: 20px; } .nav__links { display: flex; gap: 2rem; } .nav__links a { text-decoration: none; font-size: 0.95rem; font-weight: 500; color: var(--ink-mute); transition: color 0.2s var(--ease-out); } .nav__links a:hover { color: var(--ink); } .nav__actions { display: flex; align-items: center; gap: 0.75rem; } .nav__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; border-radius: 8px; align-items: center; } .nav__toggle span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out); } .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); } .nav__mobile { display: none; flex-direction: column; gap: 0.25rem; padding: 0.5rem 1.5rem 1.25rem; background: rgba(244, 240, 233, 0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); } .nav__mobile a { text-decoration: none; font-weight: 500; padding: 0.65rem 0; } .nav__mobile .btn { margin-top: 0.5rem; } /* ---------- hero ---------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; } .hero__bg, .hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; } .hero__bg img { object-fit: cover; object-position: 68% center; will-change: transform; } .hero__scrim { position: absolute; inset: 0; background: none; } .hero__inner { position: relative; z-index: 2; width: min(100% - 3rem, var(--container)); margin-inline: auto; padding-block: 5rem 3rem; max-width: none; transform: translateY(2rem); } .hero__eyebrow { color: var(--blue); margin-bottom: var(--space-3); } .hero__title { font-size: clamp(2.9rem, 6.6vw, 5.5rem); font-weight: 660; line-height: 1.0; letter-spacing: -0.032em; max-width: 11ch; } .hero__line { display: block; } .hero__line--serif em { color: var(--blue); padding-right: 0.06em; } .hero__dim { display: flex; align-items: center; gap: 0.75rem; margin-top: var(--space-3); max-width: 24rem; color: var(--ink-mute); } .hero__dim-line { flex: 1; height: 1px; background: currentColor; opacity: 0.55; transform-origin: left; } .hero__dim-tick { width: 1px; height: 12px; background: currentColor; opacity: 0.55; } .hero__dim-label { color: inherit; white-space: nowrap; } .hero__sub { margin-top: var(--space-3); max-width: 24rem; font-size: 1.16rem; color: var(--ink-mute); } .hero__ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: var(--space-4); } .hero__trust { display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; margin-top: var(--space-4); list-style: none; color: var(--ink-mute); } .hero__trust li { display: flex; align-items: center; gap: 0.5rem; } .hero__trust li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); flex: none; } /* ---------- dark band base ---------- */ .problem, .shift, .closer { background: var(--ink); color: var(--cream); } /* ---------- problem ---------- */ .problem { padding-block: var(--space-7) var(--space-6); } .problem__title { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 640; line-height: 1.06; letter-spacing: -0.025em; text-wrap: balance; } .problem__title em { color: var(--blue-light); } .problem__sub { margin-top: var(--space-3); max-width: 36rem; font-size: 1.125rem; color: var(--taupe-deep); } .problem__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); } .stat { border-top: 1px solid var(--line-dark); padding-top: var(--space-3); position: relative; } .stat::before { content: ""; position: absolute; top: -1px; left: 0; width: 42px; height: 1px; background: var(--blue-light); } .stat__num { font-size: clamp(3rem, 6vw, 4.6rem); font-weight: 640; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; } .stat__unit { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 0.62em; color: var(--blue-light); margin-left: 0.06em; } .stat__label { margin-top: var(--space-2); color: var(--taupe-deep); font-size: 0.98rem; max-width: 24ch; } .problem__note { margin-top: var(--space-4); color: rgba(184, 174, 158, 0.75); } /* ---------- system / bento ---------- */ .system { padding-block: var(--space-7); } .bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-3); margin-top: var(--space-3); } /* row 1: standalone 2-up. The SMS thread carries more copy than the lead-capture photo, so it takes the wider column. */ .bento__swap { display: grid; grid-template-columns: 6.4fr 5.6fr; grid-template-rows: 1fr auto; gap: var(--space-3); align-items: stretch; } /* subgrid so the media/body divider lands at the same height in both cards, even though their copy runs to different lengths */ .bento__swap .card { grid-column: auto; grid-row: span 2; display: grid; grid-template-rows: subgrid; } .card { grid-column: span 4; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-card); transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out); } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); border-color: rgba(36, 80, 224, 0.28); } .card--wide { grid-column: span 8; } /* booking sits beside the statement quote, and the quote is the loud half of that row, so booking runs narrow */ .card--booking { grid-column: span 5; } /* the inbox takes the column the phone gives up (see .phone-tile) */ .bento .card--inbox { grid-column: span 9; } .card__media { background: #F3EEE7; border-bottom: 1px solid var(--line); aspect-ratio: 16 / 10.5; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .card--wide .card__media { aspect-ratio: auto; flex: 1; min-height: 15rem; } /* booking shares its row with the poster quote, and the quote is the shorter of the two, so the calendar runs deliberately shallow: just enough for the three slot rows, with the card body carrying the rest */ .card--booking .card__media { aspect-ratio: auto; flex: 1; min-height: 11.5rem; } /* the phone beside the inbox sets that row's height, so the photo must not push the card any taller than the device: taken out of flow, it fills whatever band is left once the copy has had its space */ .card--inbox .card__media { min-height: 12rem; } .card--inbox .card__media img { position: absolute; inset: 0; } /* row 1 pairs by subgrid, so the photo fills its row rather than setting a ratio */ .card--lead .card__media { aspect-ratio: auto; min-height: 15rem; } .card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.6s var(--ease-out); } .card:hover .card__media img { transform: scale(1.035); } .card__body { padding: var(--space-3) var(--space-3) var(--space-4); } .card__tag { color: var(--blue); margin-bottom: 0.6rem; } .card__title { font-size: 1.35rem; font-weight: 640; letter-spacing: -0.02em; line-height: 1.15; } .card__copy { margin-top: 0.6rem; color: var(--ink-mute); font-size: 0.99rem; } /* SMS mock */ .card__media--sms { padding: var(--space-3); } .sms { width: min(100%, 24rem); display: flex; flex-direction: column; gap: 0.6rem; } .sms__missed, .sms__booked { display: flex; align-items: center; gap: 0.5rem; color: var(--ink-mute); letter-spacing: 0.08em; } .sms__missed svg { color: #B4543C; } .sms__booked { color: var(--blue); } .sms__bubble { padding: 0.7rem 1rem; border-radius: 14px; font-size: 0.9rem; line-height: 1.45; max-width: 88%; } .sms__bubble--out { background: var(--ink); color: var(--cream); border-bottom-left-radius: 4px; align-self: flex-start; } .sms__bubble--in { background: #fff; border: 1px solid var(--line); border-bottom-right-radius: 4px; align-self: flex-end; } /* calendar mock */ .card__media--cal { padding: var(--space-2) var(--space-3); } .cal { width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem; box-shadow: var(--shadow-card); } .cal__head { display: flex; justify-content: space-between; align-items: center; color: var(--ink-mute); margin-bottom: 0.7rem; } .cal__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); } .cal__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.45rem; } .cal__day { color: var(--taupe-deep); text-align: center; padding-bottom: 0.2rem; } .cal__slot { text-align: center; font-family: var(--font-mono); font-size: 0.72rem; padding: 0.42rem 0.2rem; border-radius: 7px; border: 1px solid var(--line); color: var(--ink-mute); background: #fff; transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); } .cal__slot--off { opacity: 0.35; background: transparent; } .cal__slot.is-booked { background: rgba(36, 80, 224, 0.1); border-color: rgba(36, 80, 224, 0.55); color: var(--blue-deep); font-weight: 500; } /* ---------- card: read more ---------- */ .card__body { display: flex; flex-direction: column; } .card__more { align-self: flex-start; margin-top: auto; padding-top: var(--space-3); display: inline-flex; align-items: center; gap: 0.45rem; color: var(--blue); font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; transition: color 0.2s var(--ease-out); } .card__more svg { transition: transform 0.25s var(--ease-out); } .card__more:hover { color: var(--blue-deep); } .card__more:hover svg { transform: translateX(4px); } /* ---------- card: real photo media ---------- */ .card__media--photo { background: var(--cream); } .card__media--photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* the inbox photo crops to a wide band, so hold the crop on the middle of the frame where the loose cables gather into the single braid */ .card__media--inbox-photo img { object-position: 50% 40%; } /* ---------- poster: the standalone statement quote ---------- No card chrome on purpose: it reads as a pull quote set into the grid, not as another service box. Big Archivo set tight, one word in the serif accent, with capsule photo insets sitting inline in the type. Laid out as a centred ragged stack: each line is optically centred on the block rather than flush left, and the two photo capsules alternate sides (line 1 right, line 4 left) so the silhouette of the whole quote zig-zags. Small per-line nudges (--shift) break the symmetry just enough to read as composed rather than as centred body copy. */ .poster { grid-column: span 7; display: flex; flex-direction: column; justify-content: center; padding-inline: var(--space-2); } .poster__head { margin-block: auto; font-weight: 700; font-size: clamp(2.1rem, 5.9vw, 5.5rem); line-height: 1.0; letter-spacing: -0.038em; color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 0.04em; } .poster__row { display: flex; align-items: center; gap: 0.22em; min-width: 0; translate: var(--shift, 0) 0; } .poster__row--a { --shift: -0.10em; } .poster__row--b { --shift: 0.44em; gap: 0.3em; } .poster__row--c { --shift: -0.32em; } .poster__row--d { --shift: 0.14em; gap: 0.26em; } .poster__head em { font-family: var(--font-serif); font-style: italic; font-synthesis: style; font-weight: 400; font-size: 1.18em; letter-spacing: -0.01em; color: var(--blue); } .poster__quiet { color: var(--blue-deep); } /* Each capsule carries its own rest angle and vertical offset in custom properties. Everything that moves it afterwards (idle float, hover) folds those two values back in, so a capsule never straightens up on hover — it just leans a little further. */ .poster__cap { --tilt: 0deg; --drop: 0em; --lift: 0px; --grow: 1; display: block; flex: none; height: 1.06em; aspect-ratio: 2.35 / 1; border-radius: 999px; overflow: hidden; background: var(--cream-2); box-shadow: 0 1px 2px rgba(33, 30, 26, 0.05), 0 14px 30px -14px rgba(33, 30, 26, 0.42); transform: translateY(calc(var(--drop) + var(--lift))) rotate(var(--tilt)) scale(var(--grow)); transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out); } .poster__cap img { width: 100%; height: 100%; object-fit: cover; display: block; } /* the capsules are small, so each one is framed on the part that reads */ .poster__cap--site { --tilt: -5.5deg; --drop: -0.07em; height: 1.2em; aspect-ratio: 2.25 / 1; } /* the source is already cut to the capsule's 2.25:1, so it needs no reframing */ .poster__cap--site img { object-position: 50% 50%; } .poster__cap--desk { --tilt: 6.5deg; --drop: 0.06em; height: 1.02em; aspect-ratio: 2.05 / 1; } .poster__cap--desk img { object-position: 44% 58%; } .poster__spark { display: block; flex: none; width: 0.62em; color: var(--blue); transition: transform 0.6s var(--ease-out); } .poster__spark svg { width: 100%; height: auto; display: block; } .poster:hover .poster__cap { --grow: 1.055; box-shadow: 0 1px 2px rgba(33, 30, 26, 0.05), 0 20px 40px -16px rgba(33, 30, 26, 0.5); } .poster:hover .poster__cap--site { --tilt: -7.5deg; } .poster:hover .poster__cap--desk { --tilt: 8.5deg; } .poster:hover .poster__spark { transform: rotate(90deg) scale(1.1); } /* with no card around it, the quote needs its own idle motion so the insets read as alive rather than as two stray thumbnails. The float only writes --lift, so the rest angle set above survives it. */ @media (prefers-reduced-motion: no-preference) { .poster__cap--site { animation: cap-float 7s var(--ease-out) infinite; } .poster__cap--desk { animation: cap-float 7.8s var(--ease-out) -3.9s infinite; } .poster__spark { animation: spark-turn 11s linear infinite; } .poster:hover .poster__cap, .poster:hover .poster__spark { animation-play-state: paused; } } /* --lift has to register in absolute units: an em initial-value is not computable at registration time, so the browser drops the whole rule and the float degrades to a discrete snap every half cycle. --drop stays in em beside it, which calc() handles fine. */ @property --lift { syntax: ""; inherits: false; initial-value: 0px; } @keyframes cap-float { 0%, 100% { --lift: -3px; } 50% { --lift: 3px; } } @keyframes spark-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ---------- trio: three services joined into one segmented bar ---------- */ .trio { grid-column: span 12; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; transition: box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out); } .trio:hover { box-shadow: var(--shadow-card-hover); } .trio__seg { position: relative; min-width: 0; display: flex; flex-direction: column; padding: var(--space-3) var(--space-3) var(--space-4); transition: background-color 0.35s var(--ease-out); } /* the divider is what keeps three services readable inside one box */ .trio__seg + .trio__seg { border-inline-start: 1px solid var(--line); } /* no hover tint here on purpose: it made these three read as a different kind of box to every other card. The particle clouds carry the interaction. */ /* the particle clouds sit in a band across the top, echoing .card__media */ .trio__icon { display: block; height: 17rem; margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-3); background: #F3EEE7; border-bottom: 1px solid var(--line); } /* particles.js reads its ink off the canvas's own colour */ .trio__canvas { display: block; width: 100%; height: 100%; color: var(--blue); } /* ---------- phone tile: a bare device, no card chrome ---------- The device fills its grid column edge to edge, so its outline lines up with the card beside it on all four sides and the gutter between them is the same var(--space-3) as everywhere else. The phone's own height is what sets the row height; the inbox card stretches to match it. */ .phone-tile { grid-column: span 3; display: grid; min-width: 0; container-type: inline-size; } .phone { position: relative; width: 100%; aspect-ratio: 9 / 19.2; border-radius: 2.4rem; padding: 0.42rem; background: linear-gradient(160deg, #3A352E 0%, #211E1A 42%, #100E0C 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 0 0 1px rgba(33, 30, 26, 0.5), 28px 40px 70px -28px rgba(33, 30, 26, 0.55); } .phone__notch { position: absolute; z-index: 3; top: 0.95rem; left: 50%; transform: translateX(-50%); width: 28%; height: 0.72rem; border-radius: 999px; background: #100E0C; } /* The screen is a size container, so everything inside is expressed in cqw and the whole app scales with the device instead of drifting out of proportion. */ .phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 2.05rem; background: var(--paper); display: flex; flex-direction: column; padding: 2cqw 3cqw 3cqw; container-type: size; } .phone__status { display: flex; align-items: center; justify-content: space-between; padding: 1cqw 2.4cqw 2cqw; font-size: 3.4cqw; color: var(--ink); } .phone__signal { display: inline-flex; align-items: flex-end; gap: 0.6cqw; } .phone__signal i { display: block; width: 1cqw; border-radius: 0.4cqw; background: var(--ink); } .phone__signal i:nth-child(1) { height: 1.4cqw; } .phone__signal i:nth-child(2) { height: 2.2cqw; } .phone__signal i:nth-child(3) { height: 3cqw; } /* the screen is a single "New contact" form: a title bar, the identity block and two grouped field lists. Everything sits in cqw so it scales with the device (see .phone__screen). */ .phone__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2cqw; padding: 0.4cqw 1.6cqw 3.4cqw; border-bottom: 1px solid var(--line); font-size: 3.7cqw; } .phone__cancel { color: var(--taupe-deep); justify-self: start; } .phone__title { font-size: 4.3cqw; font-weight: 700; letter-spacing: -0.015em; white-space: nowrap; } /* stays grey until every field is filled, then the loop lights it up */ .phone__done { justify-self: end; font-weight: 600; color: var(--taupe-deep); padding: 1cqw 2.6cqw; border-radius: 999px; background: transparent; } .phone__done.is-ready { color: #fff; background: var(--blue); } /* identity: portrait, the name assembling live underneath it, and where the lead came from */ .phone__identity { display: flex; flex-direction: column; align-items: center; gap: 2.2cqw; padding: 9cqw 0 8.5cqw; } .phone__portrait { position: relative; display: grid; place-items: center; width: 34cqw; height: 34cqw; border-radius: 50%; background: var(--cream-2); border: 1px dashed var(--taupe); color: var(--taupe-deep); overflow: hidden; } .phone__portrait-glyph { width: 46%; height: auto; } .phone__initials { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-size: 8.4cqw; letter-spacing: 0.04em; /* the resting state is the finished card, so reduced-motion visitors (the loops never run for them) get the initials rather than an empty outline. Opaque and stacked over the glyph, so nothing shows through; the loop's reset() fades these out again before it plays. */ } .phone__fullname { min-height: 5.6cqw; font-size: 5cqw; font-weight: 700; letter-spacing: -0.02em; text-align: center; } .phone__source { font-size: 2.7cqw; color: var(--blue); background: rgba(36, 80, 224, 0.1); padding: 0.9cqw 2.4cqw; border-radius: 999px; } /* grouped field lists, iOS style: one card per group, hairlines between rows */ /* the two entry groups sit under the identity block and the metadata group drops to the foot of the screen, so the form reads as a real settings-style page rather than a stack that runs out halfway down the device */ .phone__form { flex: 1; display: flex; flex-direction: column; gap: 4.6cqw; min-height: 0; } /* whatever height is left over lands at the foot of the screen, which is where the saved-confirmation toast rises into */ .phone__form > :last-child { margin-bottom: auto; } .phone__group { background: #fff; border: 1px solid var(--line); border-radius: 3.6cqw; overflow: hidden; } .phone__field { position: relative; display: grid; grid-template-columns: 25cqw 1fr; align-items: center; gap: 2cqw; padding: 6cqw 3.4cqw; } .phone__field + .phone__field { border-top: 1px solid var(--line); } /* the active row: a cobalt rule down the left edge and a faint wash, so the eye follows the cursor down the form without anything jumping */ .phone__field::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0.9cqw; background: var(--blue); transform: scaleY(0); transform-origin: center; transition: transform 0.4s var(--ease-out); } .phone__field.is-active::before { transform: scaleY(1); } .phone__field.is-active { background: rgba(36, 80, 224, 0.045); } .phone__label { font-size: 2.7cqw; color: var(--ink-mute); } /* the one row nothing types into: it is context, not an entry */ .phone__value--quiet { color: var(--taupe-deep); font-weight: 500; } .phone__value { display: flex; align-items: center; min-height: 5.4cqw; font-size: 4cqw; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; } .phone__caret { display: inline-block; width: 0.5cqw; min-width: 1px; height: 4.6cqw; margin-left: 0.4cqw; background: var(--blue); opacity: 0; } /* the confirmation that lands once Done is tapped */ .phone__toast { position: absolute; z-index: 4; left: 4cqw; right: 4cqw; bottom: 4cqw; display: flex; align-items: center; justify-content: center; gap: 2.2cqw; padding: 3.6cqw; border-radius: 3.6cqw; background: var(--ink); color: var(--cream); font-size: 3.7cqw; font-weight: 600; letter-spacing: -0.01em; box-shadow: 0 18px 34px -18px rgba(33, 30, 26, 0.7); opacity: 0; } .phone__toast-tick { display: grid; place-items: center; width: 5.4cqw; height: 5.4cqw; border-radius: 50%; background: var(--blue); color: #fff; flex: none; } .phone__toast-tick svg { width: 62%; height: auto; } /* ---------- automated follow-up mock ---------- A timeline rather than a table. A cobalt arc climbs left to right across the box and each follow-up hangs off its own point on that arc, so the four moments step upward instead of sitting in a flat row. The rail draws itself and the messages land in sequence (main.js); the resting markup is the finished state, so no-JS and reduced-motion visitors see all four. */ .card__media--flow { padding: var(--space-4) var(--space-3) var(--space-3); align-items: stretch; } .flow { /* the rail is drawn in a 100 x --band viewBox with preserveAspectRatio none, so x maps straight onto percentages of this grid. A percentage gap keeps the column edges at exactly 0 / 26 / 52 / 78, which is where the path puts its four nodes. Do not swap this for a rem gap without redrawing the path. */ --band: 74px; width: 100%; align-self: center; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4%; align-items: start; padding-bottom: 0.25rem; } .flow__rail { position: absolute; /* the box is 8px taller than the band at each end so the round stroke caps are never clipped; the viewBox starts at y=-8 to match, which keeps y at 1:1 with pixels and the nodes exactly on the path */ left: 0; top: -8px; /* an absolutely positioned replaced element with width:auto falls back to its intrinsic size, so left/right alone would leave the svg 100px wide and the arc squashed into the first column. The width has to be explicit. */ width: 100%; height: calc(var(--band) + 16px); overflow: visible; pointer-events: none; } .flow__rail path { fill: none; stroke-width: 2; stroke-linecap: round; } /* the faint full-length track sits under the live stroke so the arc still reads as one continuous gesture while the blue is mid-draw */ .flow__rail-track { stroke: var(--taupe-deep); opacity: 0.38; } .flow__rail-live { stroke: var(--blue); opacity: 0.75; } .flow__step { position: relative; /* --y is this step's height on the arc: the node sits on it and the message hangs beneath, which is what makes the four of them climb */ padding-top: var(--y); display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; min-width: 0; } .flow__step--1 { --y: 58px; --tilt: -1.1deg; } .flow__step--2 { --y: 41px; --tilt: 0.85deg; } .flow__step--3 { --y: 24px; --tilt: -0.7deg; } .flow__step--4 { --y: 4px; --tilt: 1.3deg; } .flow__node { position: absolute; left: 0; top: var(--y); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--paper); } .flow__node--win { background: var(--blue); box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px rgba(36, 80, 224, 0.3), 0 0 18px 2px rgba(36, 80, 224, 0.45); } .flow__day { margin-top: 0.55rem; color: var(--taupe-deep); font-size: 0.64rem; } .flow__bubble { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 14px; border-top-left-radius: 4px; padding: 0.7rem 0.85rem; font-size: 0.86rem; line-height: 1.4; rotate: var(--tilt); box-shadow: 0 1px 1px rgba(33, 30, 26, 0.03), 0 14px 26px -18px rgba(33, 30, 26, 0.55); transition: rotate 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), translate 0.5s var(--ease-out); } /* the reply that wins the job: the one dark bubble, lifted and lit in cobalt */ .flow__bubble--reply { background: var(--ink); color: var(--cream); border-color: var(--ink); border-top-left-radius: 14px; border-top-right-radius: 4px; box-shadow: 0 0 0 1px rgba(36, 80, 224, 0.3), 0 18px 34px -18px rgba(36, 80, 224, 0.75); } /* the whole card leans in a touch on hover: bubbles straighten and rise */ .card--full:hover .flow__bubble { rotate: 0deg; translate: 0 -3px; } .card--full:hover .flow__bubble--reply { box-shadow: 0 0 0 1px rgba(36, 80, 224, 0.45), 0 24px 44px -18px rgba(36, 80, 224, 0.9); } .flow__status { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--blue); font-size: 0.62rem; white-space: nowrap; } .flow__status--won { color: #fff; background: var(--blue); padding: 0.25rem 0.6rem; border-radius: 999px; letter-spacing: 0.1em; } /* ---------- full-width card: media beside the copy ---------- */ .bento .card--full { grid-column: span 12; } .card--row { flex-direction: row; align-items: stretch; } .card--row .card__media { flex: 1 1 auto; min-width: 0; aspect-ratio: auto; border-bottom: none; border-right: 1px solid var(--line); } .card--row .card__body { flex: 0 0 clamp(19rem, 27%, 24rem); justify-content: center; } .card--row .card__more { margin-top: var(--space-3); } /* ---------- process ---------- */ .process { position: relative; background: var(--cream-2); padding-block: var(--space-7); overflow: hidden; } /* faint blueprint grid, garnish only */ .process::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 46px 46px; opacity: 0.4; -webkit-mask-image: radial-gradient(120% 90% at 88% 8%, #000, transparent 62%); mask-image: radial-gradient(120% 90% at 88% 8%, #000, transparent 62%); pointer-events: none; } .process .container { position: relative; z-index: 1; } .process__steps { position: relative; margin-top: var(--space-5); display: flex; flex-direction: column; } /* drafting margin: one hairline down the right edge of the numeral column, so the figures read as annotations pencilled in the margin of a plan rather than as list bullets. Faded at both ends so it never terminates hard. */ .process__steps::before { content: ""; position: absolute; left: 3.5rem; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--line) 8%, var(--line) 92%, transparent); pointer-events: none; } /* full-width rows: rail · copy · a small on-brand visual, so the right-hand side of the section carries something instead of sitting empty */ .step { position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 21rem); gap: var(--space-3) var(--space-4); align-items: center; padding-block: var(--space-4); border-top: 1px solid var(--line); } /* every row gets identical breathing room, last one included: the rhythm is what makes the rules read as a drawn grid rather than as three boxes, and the stack closes on a rule instead of trailing off */ .step:last-of-type { border-bottom: 1px solid var(--line); } /* a warm wash that answers the cursor at ROW level. The card's own 3D lean is scoped to the card (see main.js) — this is the quieter, larger gesture that says "this row is live" without anything moving. */ .step::after { content: ""; position: absolute; inset: 1px -1.4rem 0; background: linear-gradient(90deg, rgba(255, 253, 249, 0.72), rgba(255, 253, 249, 0) 62%); opacity: 0; transition: opacity 0.55s var(--ease-out); pointer-events: none; z-index: 0; } .step:hover::after { opacity: 1; } /* the numeral lives inside the body but hangs out into the margin column, which is what pins it to the phase label and title rather than floating against the middle of the row */ .step__index { position: absolute; top: -0.14em; right: calc(100% + var(--space-4)); width: 3.5rem; z-index: 2; pointer-events: none; } /* bare serif figures rather than badges: quieter, and they read as editorial numbering instead of UI chrome */ .step__num { display: block; font-family: var(--font-serif); font-style: italic; font-synthesis: style; font-weight: 400; font-size: clamp(3.2rem, 5.4vw, 4.8rem); line-height: 0.8; letter-spacing: -0.02em; /* drawn, not filled: a hairline outline sits with the blueprint grid and the dimension markers instead of shouting like a solid figure */ color: rgba(184, 174, 158, 0.24); -webkit-text-stroke: 1.1px var(--taupe-deep); text-align: center; transition: -webkit-text-stroke-color 0.5s var(--ease-out), color 0.5s var(--ease-out); } .step:hover .step__num { color: rgba(36, 80, 224, 0.09); -webkit-text-stroke-color: var(--blue); } .step__body { grid-column: 2; position: relative; z-index: 1; max-width: 34rem; } .step__head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.7rem; } /* a dimension line off a technical drawing — hairline with a tick at each end, the far one in cobalt — instead of an icon chip. It measures the phase, which is exactly what the label next to it says. */ .step__dim { position: relative; flex: none; width: 2.6rem; height: 9px; border-left: 1px solid var(--taupe-deep); transition: width 0.5s var(--ease-out); } .step__dim::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--taupe-deep); opacity: 0.55; } .step__dim::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: var(--blue); } .step:hover .step__dim { width: 3.4rem; } .step__when { color: var(--ink-mute); letter-spacing: 0.16em; } .step__title { font-size: 1.7rem; font-weight: 640; letter-spacing: -0.02em; } .step__copy { margin-top: 0.6rem; color: var(--ink-mute); } /* the plate that holds each step's mini visual. The perspective lives on the row, not on the plate: a rotated element is not affected by its own perspective, so putting it here is what makes the tilt in main.js read as depth rather than as a flat skew. */ .step { perspective: 1100px; } .step__visual { position: relative; grid-column: 3; justify-self: end; width: 100%; /* 16:10 via percentage padding, NOT aspect-ratio. Safari resolves an aspect-ratio height on a grid item inconsistently with the height it then sizes the row track to, and the two disagreeing is what dropped step 2 (the only two-line row, so the only one whose track is decided by the plate) about 90px down its own row and out through the rule below it. Percentage padding resolves against the item's own width, which is definite from the column, so every engine lands on the same number. The mock inside is positioned rather than flowed, since the plate itself has no content box. */ height: 0; padding: 0 0 62.5%; background: linear-gradient(158deg, #FCFAF6 0%, var(--paper) 46%, #EFE9DF 100%); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; transform-style: preserve-3d; will-change: transform; /* --mx/--my/--sheen are written by main.js on pointer move. They are registered with @property below so the browser can interpolate them, which is what smooths the light instead of having it jump per mouse event. */ transition: box-shadow 0.5s var(--ease-out), border-color 0.5s var(--ease-out), --mx 0.45s var(--ease-out), --my 0.45s var(--ease-out), --sheen 0.6s var(--ease-out); --mx: 50%; --my: 50%; --sheen: 0; } @property --mx { syntax: ""; inherits: false; initial-value: 50%; } @property --my { syntax: ""; inherits: false; initial-value: 50%; } @property --sheen { syntax: ""; inherits: false; initial-value: 0; } .step:hover .step__visual { box-shadow: var(--shadow-card-hover); border-color: rgba(36, 80, 224, 0.22); } /* ---- matte metallic lighting on the plate ---- Two layers, both driven by --mx/--my/--sheen from the pointer: ::before is the rim — a 1px gradient ring that brightens on the edges facing the cursor and darkens on the ones facing away, which is what makes a brushed metal edge read as an edge. ::after is the broad diffuse highlight; soft-light keeps it matte instead of glossy. */ .step__visual::before, .step__visual::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--sheen); } .step__visual::before { padding: 1px; background: radial-gradient(120% 120% at var(--mx) var(--my), rgba(255, 255, 255, 1) 0%, rgba(255, 252, 246, 0.55) 18%, rgba(184, 174, 158, 0.5) 40%, rgba(36, 80, 224, 0.3) 62%, rgba(33, 30, 26, 0.42) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .step__visual::after { background: radial-gradient(58% 78% at var(--mx) var(--my), rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 68%), radial-gradient(90% 110% at calc(100% - var(--mx)) calc(100% - var(--my)), rgba(36, 80, 224, 0.16) 0%, rgba(36, 80, 224, 0) 62%); mix-blend-mode: soft-light; } /* the mock sits above the lighting layers, inset from the plate edge by what used to be the plate's padding. Width and height are stated explicitly rather than as an inset: .patch is a replaced element, and an absolutely positioned replaced box with auto width falls back to its intrinsic size. */ .step__visual > .wire, .step__visual > .patch, .step__visual > .growth { position: absolute; top: 0.9rem; left: 0.9rem; width: calc(100% - 1.8rem); height: calc(100% - 1.8rem); z-index: 1; } /* 01 — a website taking shape */ .wire { display: flex; flex-direction: column; gap: 0.42rem; } .wire__bar { display: flex; align-items: center; gap: 4px; padding-bottom: 0.42rem; border-bottom: 1px solid var(--line); } .wire__bar i { width: 5px; height: 5px; border-radius: 50%; background: var(--taupe); } .wire__url { position: relative; flex: 1; height: 7px; margin-left: 0.4rem; border-radius: 3px; background: rgba(217, 209, 195, 0.6); overflow: hidden; } /* the address bar "loads" on hover (see main.js) */ .wire__url-fill { position: absolute; inset: 0; border-radius: 3px; background: var(--blue); opacity: 0.55; transform: scaleX(0); transform-origin: left center; } .wire__hero { flex: 1.5; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0.35rem 0.5rem; border-radius: 6px; background: rgba(184, 174, 158, 0.16); } .wire__line { display: block; height: 6px; border-radius: 3px; background: var(--taupe-deep); opacity: 0.55; } .wire__line--xl { width: 72%; height: 9px; opacity: 0.8; } .wire__line--lg { width: 52%; } .wire__line--sm { width: 40%; height: 5px; } .wire__line--xs { width: 26%; height: 5px; } .wire__cta { width: 30%; height: 11px; margin-top: 3px; border-radius: 999px; background: var(--blue); } .wire__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .wire__grid span { border-radius: 5px; border: 1px solid var(--line); background: #fff; } .wire__foot { display: flex; flex-direction: column; gap: 4px; } /* 02 — the patch panel: the site wired out to each automation. Drawn rather than toggled, so it resolves in one calm gesture instead of five separate flicks. The wires start fully drawn in the markup, so a visitor who never hovers still sees a finished panel. */ /* size comes from the shared .step__visual > * rule above */ .patch__wires path { stroke: var(--blue); stroke-width: 1.4; opacity: 0.38; } /* a short bright dash that runs hub-to-chip on hover. Invisible at rest, so a visitor who never hovers just sees a finished, fully wired panel. */ .patch__pulse { stroke: var(--blue); stroke-width: 2.6; opacity: 0; } .patch__chips rect { fill: #fff; stroke: var(--line); stroke-width: 1.2; } .patch__chip-dot { fill: var(--blue); } .patch__chip-line { stroke: var(--taupe-deep); stroke-width: 2.4; stroke-linecap: round; opacity: 0.55; } .patch__hub rect { fill: #fff; stroke: var(--line); stroke-width: 1.4; } .patch__hub-cta { fill: var(--blue); stroke: none; } .patch__hub-line { stroke: var(--taupe-deep); stroke-width: 3; stroke-linecap: round; opacity: 0.7; } /* 03 — the work coming in */ .growth { display: flex; align-items: flex-end; } .growth__bars { position: relative; z-index: 1; flex: 1; height: 100%; display: flex; align-items: flex-end; gap: 6%; } .growth__bars span { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: rgba(184, 174, 158, 0.55); } .growth__bars span:last-child { background: var(--blue); } .growth__axis { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); } .process__cta { margin-top: var(--space-4); position: relative; z-index: 1; } /* ---------- shift ---------- */ .shift { padding-block: var(--space-7) var(--space-6); } .shift__title { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 640; line-height: 1.06; letter-spacing: -0.025em; text-wrap: balance; max-width: 24ch; } .shift__title em { color: var(--blue-light); } .shift__rows { margin-top: var(--space-5); display: flex; flex-direction: column; } .shift__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: center; padding-block: var(--space-3); border-top: 1px solid var(--line-dark); } .shift__row:last-child { border-bottom: 1px solid var(--line-dark); } .shift__label { display: block; margin-bottom: 0.35rem; } .shift__before { color: var(--taupe-deep); } .shift__before .shift__label { color: rgba(184, 174, 158, 0.6); } .shift__after { font-weight: 500; } .shift__after .shift__label { color: var(--blue-light); } .shift__arrow { color: var(--blue-light); opacity: 0.8; } /* marquee */ .marquee { margin-top: var(--space-6); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee__track { display: flex; gap: 2.2rem; width: max-content; align-items: baseline; animation: marquee 36s linear infinite; font-size: 1.9rem; font-weight: 600; letter-spacing: -0.02em; color: rgba(244, 240, 233, 0.52); white-space: nowrap; } .marquee__track span:nth-child(even) { color: rgba(143, 168, 255, 0.5); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } } .marquee__caption { margin-top: var(--space-3); color: var(--taupe-deep); } /* ---------- pricing ---------- */ .pricing { padding-block: var(--space-7); } .pricing__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-5); align-items: stretch; } .price-card { display: flex; flex-direction: column; } .price-card__list { flex: 1; } .price-card { border-radius: var(--radius-lg); padding: var(--space-4); position: relative; } .price-card--smart { background: var(--paper); border: 1px solid rgba(36, 80, 224, 0.35); box-shadow: 0 1px 2px rgba(33, 30, 26, 0.04), 0 32px 64px -24px rgba(27, 63, 191, 0.25); } .price-card--smart::before { content: ""; position: absolute; top: 0; left: var(--space-4); right: var(--space-4); height: 3px; background: var(--blue); border-radius: 0 0 3px 3px; } .price-card--old { background: transparent; border: 1px dashed var(--taupe-deep); } .price-card__tag { color: var(--blue); margin-bottom: var(--space-2); } .price-card--old .price-card__tag { color: var(--ink-mute); } .price-card__amount { font-size: clamp(3rem, 5vw, 4.2rem); font-weight: 640; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; } .price-card__amount--old { color: var(--ink-mute); } .price-card__currency { font-size: 0.5em; vertical-align: 0.62em; font-weight: 600; margin-right: 0.05em; } .price-card__per { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 0.42em; color: var(--ink-mute); margin-left: 0.28em; } .price-card__blurb { margin-top: var(--space-2); color: var(--ink-mute); max-width: 30rem; } .price-card__list { list-style: none; margin-block: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 0.65rem; } .price-card__list li { display: flex; gap: 0.7rem; align-items: baseline; font-size: 0.99rem; } .price-card__list li::before { content: ""; flex: none; width: 14px; height: 14px; transform: translateY(2px); background-color: var(--blue); -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } .price-card__list--old li { color: var(--ink-mute); } .price-card__list--old li::before { background-color: var(--taupe-deep); -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } .price-card__fine { margin-top: var(--space-2); color: var(--ink-mute); text-align: center; } .price-card__fine--old { text-align: left; } /* ---------- FAQ ---------- */ .faq { padding-block: 0 var(--space-7); } .faq__list { margin-top: var(--space-4); border-top: 1px solid var(--line); } .faq__item { border-bottom: 1px solid var(--line); } .faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); text-align: left; padding: 1.35rem 0.25rem; font-size: 1.13rem; font-weight: 600; letter-spacing: -0.015em; transition: color 0.2s var(--ease-out); } .faq__q:hover { color: var(--blue); } .faq__icon { position: relative; flex: none; width: 18px; height: 18px; } .faq__icon::before, .faq__icon::after { content: ""; position: absolute; inset: 50% auto auto 0; width: 100%; height: 2px; background: var(--blue); border-radius: 2px; transform: translateY(-50%); transition: transform 0.3s var(--ease-out); } .faq__icon::after { transform: translateY(-50%) rotate(90deg); } .faq__q[aria-expanded="true"] .faq__icon::after { transform: translateY(-50%) rotate(0deg); } .faq__a { overflow: hidden; max-height: 0; transition: max-height 0.35s var(--ease-out); } .faq__a p { padding: 0 0.25rem 1.4rem; color: var(--ink-mute); max-width: 44rem; } /* ---------- closer ---------- */ .closer { padding-block: var(--space-7); text-align: center; } .closer .eyebrow { margin-inline: auto; } .closer__title { font-size: clamp(2.6rem, 6vw, 4.8rem); font-weight: 650; line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; margin-inline: auto; max-width: 16ch; } .closer__title em { color: var(--blue-light); } .closer__sub { margin: var(--space-3) auto 0; max-width: 34rem; color: var(--taupe-deep); font-size: 1.125rem; } .closer__ctas { margin-top: var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); } .closer__email { color: var(--taupe-deep); font-size: 0.95rem; text-decoration-color: rgba(184, 174, 158, 0.5); text-underline-offset: 3px; transition: color 0.2s var(--ease-out); } .closer__email:hover { color: var(--cream); } /* ---------- footer ---------- */ .footer { background: var(--ink); color: var(--taupe-deep); border-top: 1px solid var(--line-dark); padding-block: var(--space-4); } .footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .nav__brand--footer { color: var(--cream); } .footer__logo { display: block; height: 20px; width: auto; } .footer__links { display: flex; gap: 1.5rem; flex-wrap: wrap; } .footer__links a { text-decoration: none; font-size: 0.92rem; transition: color 0.2s var(--ease-out); } .footer__links a:hover { color: var(--cream); } .footer__fine { color: var(--taupe-deep); } /* ---------- sticky mobile CTA ---------- */ .sticky-cta { position: fixed; left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom)); z-index: 90; transform: translateY(140%); transition: transform 0.4s var(--ease-out); display: none; } .sticky-cta.is-visible { transform: translateY(0); } /* ---------- system intro + statement (merged section) ---------- */ .system__intro { text-align: center; } .system__intro .section-title { max-width: 26ch; margin-inline: auto; } .system__intro .section-sub { margin-inline: auto; text-align: center; } /* isometric shelf of example sites, now the intro feature of the system section */ .system__shelf { margin-top: var(--space-4); overflow: hidden; /* contain the wide 3D shelf */ } /* the section header for the grid of service boxes: deliberately the largest type on the page after the hero */ .services-head { margin-top: var(--space-5); margin-bottom: var(--space-4); font-size: clamp(3rem, 8.2vw, 6.4rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.035em; color: var(--ink); /* sits on one line at every desktop width; breaks to two on small screens */ text-wrap: balance; } .services-head em { font-family: var(--font-serif); font-style: italic; /* synthetic slant of the normal cut, as everywhere else */ font-synthesis: style; font-weight: 400; font-size: 1.06em; letter-spacing: 0; color: var(--blue); padding-right: 0.06em; } .shelf { margin-top: var(--space-2); position: relative; overflow: hidden; padding: 5rem clamp(1.25rem, 9vw, 10rem) 4rem; perspective: 2200px; perspective-origin: 50% 42%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } /* endless horizontal drift on a FLAT baseline (rotateX only, no rotateZ); each card keeps its own isometric lean. --shelf-shift/--shelf-dur set in JS. Purely automatic — no hover/click interaction. */ .shelf__scene { display: flex; align-items: center; width: max-content; transform-style: preserve-3d; transform: rotateX(8deg) translateX(0); animation: shelf-marquee var(--shelf-dur, 120s) linear infinite; will-change: transform; } @keyframes shelf-marquee { from { transform: rotateX(8deg) translateX(0); } to { transform: rotateX(8deg) translateX(calc(-1 * var(--shelf-shift, 50%))); } } .shelf__card { --lean: -26deg; position: relative; flex: 0 0 auto; width: clamp(260px, 25vw, 360px); aspect-ratio: 4 / 3; margin-inline-start: -6.5rem; /* overlap into the previous card */ border-radius: 12px; background: #fff; transform-style: preserve-3d; transform-origin: left center; transform: rotateY(var(--lean)); box-shadow: 8px 20px 42px -16px rgba(33, 30, 26, 0.5); scroll-snap-align: center; } .shelf__card img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 12px; border: 1px solid rgba(33, 30, 26, 0.08); pointer-events: none; } .shelf__tag { position: absolute; left: 0.7rem; bottom: 0.7rem; font-size: 0.72rem; letter-spacing: 0.01em; color: #fff; background: rgba(20, 18, 15, 0.72); padding: 0.28rem 0.62rem; border-radius: 6px; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .shelf { overflow-x: auto; } .shelf__scene { transform: rotateX(4deg); animation: none; } .shelf__card[data-clone] { display: none; } } /* ============================================================ Responsive ============================================================ */ @media (max-width: 1024px) { .card { grid-column: span 6; } .card--wide { grid-column: span 12; } .pricing__grid { grid-template-columns: 1fr; max-width: 38rem; } /* the inbox keeps its phone alongside it right down to the mobile breakpoint */ .bento .card--inbox { grid-column: span 8; } .phone-tile { grid-column: span 4; } /* booking and the quote stay paired: a full-width quote leaves the type stranded against a lot of empty row */ .bento .card--booking { grid-column: span 5; } .bento .poster { grid-column: span 7; } .card--booking .card__media { min-height: 14rem; } .trio__seg { padding: var(--space-2) var(--space-2) var(--space-3); } .trio__icon { height: 13rem; margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) var(--space-2); } /* the follow-up box stacks its media above the copy again */ .card--row { flex-direction: column; } .card--row .card__media { border-right: none; border-bottom: 1px solid var(--line); } .card--row .card__body { flex: none; } .step { grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 16rem); gap: var(--space-3); } } @media (max-width: 768px) { :root { --space-6: 4.5rem; --space-7: 5.5rem; } .nav__links { display: none; } .nav__actions .btn { display: none; } .nav__toggle { display: flex; } .nav__mobile.is-open { display: flex; } .hero { min-height: 100svh; } .hero__scrim { background: linear-gradient(180deg, var(--cream) 30%, rgba(244, 240, 233, 0.9) 55%, rgba(244, 240, 233, 0.35) 100%); } .hero__bg img { object-position: 62% 78%; } .hero__inner { padding-block: 7rem 4rem; } .hero__dim { max-width: 100%; } .problem__stats { grid-template-columns: 1fr; gap: var(--space-3); } .stat__label { max-width: none; } .bento .card, .bento .card--wide, .bento .card--booking, .bento .card--full, .bento .card--inbox, .bento .poster, .bento .trio { grid-column: span 12; } /* the bar unstacks into three rows, so the dividers turn horizontal */ .trio { grid-template-columns: 1fr; } .trio__seg + .trio__seg { border-inline-start: none; border-block-start: 1px solid var(--line); } /* stacked, the poster owns a full row, so the type scales up to fill it */ .poster__head { font-size: clamp(2.05rem, 10vw, 4.6rem); } /* stacked: drop the subgrid pairing, each card sizes itself again */ .bento__swap { grid-template-columns: 1fr; grid-template-rows: none; } .bento__swap .card { grid-row: auto; display: flex; grid-template-rows: none; } /* the phone drops to its own centred row */ .phone-tile { grid-column: span 12; padding-block: var(--space-2); place-items: center; } .phone { width: min(62vw, 16.5rem); } .card--wide .card__media, .card--booking .card__media { min-height: 0; } .card--inbox .card__media { min-height: 0; aspect-ratio: 16 / 9; } .card--inbox .card__media img { position: static; } .card--lead .card__media { min-height: 0; aspect-ratio: 16 / 10.5; } .card__media--sms, .card__media--cal { padding: var(--space-3) var(--space-2); } .services-head { font-size: clamp(2.5rem, 12.5vw, 4rem); } /* the follow-up rail goes back to a plain vertical timeline on small screens: the climbing arc needs the width to read, so it is dropped rather than squashed. A straight ::before rule replaces the drawn svg. */ .flow { grid-template-columns: 1fr; gap: var(--space-3); padding-left: 1.25rem; } .flow::before { content: ""; position: absolute; left: 5px; top: 0.5rem; bottom: 0.5rem; width: 2px; background: linear-gradient(180deg, var(--blue) 72%, var(--taupe)); opacity: 0.4; } .flow__rail { display: none; } .flow__step { padding-top: 0; } .flow__node { left: -1.25rem; top: 0.5rem; margin: 0; } .flow__bubble { rotate: 0deg; } .card__media--flow { padding: var(--space-3); } .process__steps { padding-left: 0; } .step { grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-3); align-items: start; } .step__visual { grid-column: 2; justify-self: stretch; max-width: 22rem; /* the plate is capped narrower than its grid area here, and percentage padding measures the area, not the element — so the ratio is stated as a height instead: 22rem x 10/16 */ height: 13.75rem; padding-bottom: 0; } .shift__row { grid-template-columns: 1fr; gap: 0.8rem; } .shift__arrow { transform: rotate(90deg); justify-self: start; margin-left: 0.1rem; } .marquee__track { font-size: 1.4rem; } /* showcase: drop the 3D shelf for a flat swipe strip on small screens */ .shelf { perspective: none; overflow-x: auto; padding: 1.25rem 1.25rem 2rem; scroll-snap-type: x mandatory; } .shelf__scene { transform: none; gap: 0.9rem; animation: none; } .shelf__card[data-clone] { display: none; } .shelf__card { width: 80vw; margin-inline-start: 0; transform: none; box-shadow: var(--shadow-card); } .shelf__card img { border-radius: 12px; } .footer__inner { flex-direction: column; align-items: flex-start; } .sticky-cta { display: block; } /* Clearance for the sticky bar lives INSIDE the dark footer. As body padding it rendered as a cream strip below the footer, so the page appeared to carry on past its own end. Also swallows the home-indicator safe area. */ .footer { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)); } /* and no rubber-band scroll past the footer to reveal anything underneath */ html { overscroll-behavior-y: none; } } @media (max-width: 400px) { .hero__ctas .btn { width: 100%; } .closer__ctas .btn { width: 100%; } } /* ========================================================================== SUPPORTING PAGES (services.html, why-autivy.html) Appended so the landing page's cascade is untouched. Everything below reuses the existing tokens; no new colours, fonts or spacing units. ========================================================================== */ /* ---------- shared utilities ---------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* the bento "Read more" controls are anchors now, not dead buttons */ .card__more { text-decoration: none; } /* new in-page anchor targets need the same nav clearance as the originals */ #smart-site, #local-seo, #reviews, #missed-call, #lead-capture, #inbox, #booking, #follow-up, #reactivation, #compare, #objections { scroll-margin-top: 5.5rem; } /* five nav links need a little less air than four did between 769 and 1080 */ @media (max-width: 1080px) { .nav__links { gap: 1.35rem; } .nav__links a { font-size: 0.9rem; } } /* ---------- breadcrumbs ---------- */ .crumbs { display: flex; align-items: center; gap: 0.6rem; color: var(--ink-mute); margin-bottom: var(--space-4); } .crumbs a { color: var(--ink-mute); text-decoration: none; transition: color 0.2s var(--ease-out); } .crumbs a:hover { color: var(--blue); } /* ---------- page hero (sub-page version: type only, no image) ---------- */ .page-hero { position: relative; padding-block: 9.5rem var(--space-6); border-bottom: 1px solid var(--line); overflow: hidden; } /* a faint drafting grid, masked away before it reaches the type */ .page-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(33, 30, 26, 0.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(33, 30, 26, 0.055) 1px, transparent 1px); background-size: 58px 58px; -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000 0%, transparent 62%); mask-image: radial-gradient(120% 100% at 100% 0%, #000 0%, transparent 62%); pointer-events: none; } .page-hero > .container { position: relative; } .page-hero__title { font-size: clamp(2.4rem, 5.4vw, 4.1rem); font-weight: 650; line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; max-width: 19ch; } .page-hero__title em { font-family: var(--font-serif); font-style: italic; /* synthetic slant of the normal cut, as everywhere else */ font-synthesis: style; font-weight: 400; letter-spacing: 0; font-size: 1.06em; line-height: 1; color: var(--blue); padding-right: 0.06em; } .page-hero__sub { margin-top: var(--space-3); max-width: 40rem; font-size: 1.125rem; color: var(--ink-mute); } .page-hero__ctas { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: 0.85rem; } .page-hero__trust { margin-top: var(--space-4); list-style: none; display: flex; flex-wrap: wrap; gap: 0.85rem 1.6rem; color: var(--ink-mute); } .page-hero__trust li { display: flex; align-items: center; gap: 0.5rem; } .page-hero__trust li::before { content: ""; flex: none; width: 13px; height: 13px; background-color: var(--blue); -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } /* ---------- services: the jump index ---------- */ .svc-index { padding-block: var(--space-4); border-bottom: 1px solid var(--line); } .svc-index__inner { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-3); align-items: start; } .svc-index__label { color: var(--ink-mute); padding-top: 0.35rem; } .svc-index__list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; } .svc-index__list a { display: inline-flex; align-items: baseline; gap: 0.5rem; padding: 0.4rem 0.85rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.92rem; font-weight: 500; text-decoration: none; color: var(--ink-mute); transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out); } /* --taupe-deep is 1.92:1 on cream and fails AA; --ink-mute is 5.1:1 */ .svc-index__list a span { color: var(--ink-mute); transition: color 0.2s var(--ease-out); } .svc-index__list a:hover { color: var(--ink); border-color: var(--blue); background: rgba(36, 80, 224, 0.05); } .svc-index__list a:hover span { color: var(--blue); } /* ---------- services: group header ---------- */ .svc-group { padding-block: var(--space-6) 0; } .svc-group__head { max-width: 46rem; } .svc-group__step { color: var(--ink-mute); margin-bottom: var(--space-2); } .svc-group__title { font-size: clamp(1.9rem, 4.1vw, 3rem); font-weight: 640; line-height: 1.07; letter-spacing: -0.025em; text-wrap: balance; max-width: 20ch; } .svc-group__title em { font-family: var(--font-serif); font-style: italic; font-synthesis: style; font-weight: 400; letter-spacing: 0; font-size: 1.06em; line-height: 1; color: var(--blue); padding-right: 0.06em; } .svc-group__sub { margin-top: var(--space-3); max-width: 38rem; color: var(--ink-mute); } /* ---------- services: the spec rows ---------- */ .svc-list { margin-top: var(--space-5); border-top: 1px solid var(--line); } .svc { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 20rem; gap: var(--space-4); align-items: start; padding-block: var(--space-4); border-bottom: 1px solid var(--line); position: relative; } /* warm wash on row hover, exactly as the process steps do it */ .svc::after { content: ""; position: absolute; inset: 0 calc(-1 * var(--space-3)); background: rgba(184, 174, 158, 0.09); opacity: 0; transition: opacity 0.35s var(--ease-out); pointer-events: none; border-radius: 6px; } .svc:hover::after { opacity: 1; } .svc > * { position: relative; } .svc__index { padding-top: 0.15rem; } .svc__num { font-family: var(--font-serif); font-style: italic; /* synthetic slant of the normal cut, as everywhere else */ font-synthesis: style; font-size: 2.7rem; line-height: 1; color: rgba(184, 174, 158, 0.24); -webkit-text-stroke: 1.1px var(--taupe-deep); transition: -webkit-text-stroke-color 0.3s var(--ease-out); } .svc:hover .svc__num { -webkit-text-stroke-color: var(--blue); } .svc__head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: var(--space-2); } .svc__dim { flex: none; position: relative; width: 2.6rem; height: 1px; background: var(--taupe-deep); transition: width 0.35s var(--ease-out); } .svc__dim::before, .svc__dim::after { content: ""; position: absolute; top: -3px; width: 1px; height: 7px; } .svc__dim::before { left: 0; background: var(--taupe-deep); } .svc__dim::after { right: 0; background: var(--blue); } .svc:hover .svc__dim { width: 3.4rem; } .svc__tag { color: var(--blue); } .svc__title { font-size: clamp(1.35rem, 2.3vw, 1.75rem); font-weight: 640; line-height: 1.15; letter-spacing: -0.022em; text-wrap: balance; max-width: 22ch; } .svc__copy { margin-top: var(--space-2); color: var(--ink-mute); max-width: 40rem; } .svc__specs { list-style: none; margin-top: var(--space-3); display: flex; flex-direction: column; gap: 0.55rem; max-width: 40rem; } .svc__specs li { display: flex; gap: 0.7rem; align-items: baseline; font-size: 0.99rem; } .svc__specs li::before { content: ""; flex: none; width: 14px; height: 14px; transform: translateY(2px); background-color: var(--blue); -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } .svc__outcome { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--line); font-weight: 600; letter-spacing: -0.012em; max-width: 40rem; } /* the diagram plate. Percentage padding, never aspect-ratio: a grid item's aspect-ratio height disagrees with the track height in Safari. */ .svc__plate { position: relative; height: 0; padding: 0 0 62.5%; background: linear-gradient(to right, rgba(33, 30, 26, 0.04) 1px, transparent 1px) -1px -1px / 26px 26px, linear-gradient(to bottom, rgba(33, 30, 26, 0.04) 1px, transparent 1px) -1px -1px / 26px 26px, radial-gradient(115% 95% at 20% 6%, #FFFDF9 0%, #F7F2EA 48%, #EBE4D8 100%); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .svc__plate .dia { position: absolute; inset: 0; width: 100%; height: 100%; } /* ---------- diagram vignettes ---------- Each plate is a small layered scene: one or two lifted cards, taupe rules standing in for type, and exactly one cobalt focal element. The lift is a CSS drop-shadow on the wrapping , so the shadow follows the card silhouette rather than every child shape. */ .dia__lift { filter: drop-shadow(0 1px 1.5px rgba(33, 30, 26, 0.07)) drop-shadow(0 7px 14px rgba(33, 30, 26, 0.11)); } .dia__paper { fill: #FFFDFA; } .dia__paper-2 { fill: #F1EBE1; } .dia__ink { fill: var(--ink); } .dia__rule { fill: rgba(33, 30, 26, 0.15); } .dia__rule--strong { fill: rgba(33, 30, 26, 0.36); } .dia__edge { fill: none; stroke: rgba(33, 30, 26, 0.11); stroke-width: 1; } .dia__tint { fill: rgba(36, 80, 224, 0.09); } .dia__slot { fill: rgba(36, 80, 224, 0.14); } .dia__halo { fill: rgba(36, 80, 224, 0.09); } .dia__miss-chip { fill: rgba(180, 84, 60, 0.10); } .dia__miss-dot { fill: rgba(180, 84, 60, 0.55); } /* ---------- the line diagrams ---------- */ .dia__s { fill: none; stroke: var(--taupe-deep); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .dia__b { fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .dia__bf { fill: var(--blue); stroke: none; } .dia__f { fill: var(--taupe); stroke: none; } .dia__dash { stroke-dasharray: 3 6; } .dia__hole { fill: var(--paper); stroke: none; } .dia__hole-stroke { fill: none; stroke: var(--paper); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .dia__miss { fill: none; stroke: var(--rust); stroke-width: 2; stroke-linecap: round; } /* ---------- services: full-bleed photo band + its line ---------- */ .svc-band { margin-top: var(--space-6); } .svc-band img { width: 100%; max-width: 118rem; margin-inline: auto; height: clamp(14rem, 30vw, 28rem); object-fit: cover; object-position: 50% 50%; } .svc-band__cap { padding-block: var(--space-5) 0; } .svc-band__quote { font-family: var(--font-serif); font-style: italic; font-synthesis: style; font-weight: 400; font-size: clamp(1.4rem, 2.9vw, 2.15rem); line-height: 1.22; letter-spacing: -0.005em; text-align: center; text-wrap: balance; max-width: 26ch; margin-inline: auto; padding-inline: 1.5rem; } /* ---------- services: also included ---------- */ .extras { padding-block: var(--space-7) 0; } .extras__grid { list-style: none; margin-top: var(--space-5); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-4); } .extras__grid li { border-top: 1px solid var(--line); padding-top: var(--space-2); } .extras__grid h3 { font-size: 1.05rem; font-weight: 640; letter-spacing: -0.018em; } .extras__grid p { margin-top: 0.4rem; color: var(--ink-mute); font-size: 0.98rem; } /* ---------- services: price recap ---------- */ .recap { padding-block: var(--space-7); } .recap__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-5); align-items: center; } .recap__ctas { margin-top: var(--space-4); display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.4rem; } .recap__link { color: var(--blue); font-weight: 600; font-size: 0.98rem; text-underline-offset: 3px; } .recap__link:hover { color: var(--blue-deep); } .recap__card { background: var(--ink); color: var(--cream); border-radius: var(--radius-lg); padding: var(--space-4); } .recap__amount { font-size: clamp(2.8rem, 4.6vw, 3.9rem); font-weight: 640; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; } .recap__currency { font-size: 0.5em; vertical-align: 0.62em; font-weight: 600; margin-right: 0.05em; } .recap__per { font-family: var(--font-serif); font-style: italic; font-synthesis: style; font-weight: 400; font-size: 0.42em; color: var(--blue-light); margin-left: 0.28em; } .recap__fine { margin-top: var(--space-2); color: var(--taupe-deep); } .recap__list { list-style: none; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line-dark); display: flex; flex-direction: column; gap: 0.6rem; } .recap__list li { display: flex; gap: 0.7rem; align-items: baseline; font-size: 0.99rem; } .recap__list li::before { content: ""; flex: none; width: 14px; height: 14px; transform: translateY(2px); background-color: var(--blue-light); -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } /* ---------- FAQ additions ---------- */ .faq__more { margin-top: var(--space-4); color: var(--ink-mute); font-size: 0.98rem; } .faq__more a, .faq__link { color: var(--blue); font-weight: 600; text-underline-offset: 3px; } .faq__more a:hover, .faq__link:hover { color: var(--blue-deep); } /* ---------- why: founder note ---------- */ .founder { padding-block: var(--space-7) 0; } .founder__title { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 640; line-height: 1.06; letter-spacing: -0.028em; text-wrap: balance; } .founder__title em { font-family: var(--font-serif); font-style: italic; font-synthesis: style; font-weight: 400; letter-spacing: 0; font-size: 1.06em; line-height: 1; color: var(--blue); padding-right: 0.06em; } .founder__grid { margin-top: var(--space-5); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; } .founder__note { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } /* a drafting corner tick, top right, as a small piece of letterhead detail */ .founder__note::after { content: ""; position: absolute; top: var(--space-3); right: var(--space-3); width: 14px; height: 14px; border-top: 1px solid var(--taupe-deep); border-right: 1px solid var(--taupe-deep); } .founder__head { display: flex; align-items: center; gap: 0.9rem; padding-bottom: var(--space-2); margin-bottom: var(--space-1); border-bottom: 1px solid var(--line); } .founder__mark { height: 18px; width: auto; } .founder__from { color: var(--ink-mute); } .founder__note p { color: var(--ink-mute); } /* the letter is a quotation: an oversized opening mark hangs into the left margin, the closing mark sits inline at the end of the last line */ .founder__quote { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; } .founder__qm { font-family: var(--font-serif); font-style: normal; color: var(--blue); line-height: 0; } .founder__lead .founder__qm { font-size: 2.4em; margin-inline-start: -0.42em; padding-inline-end: 0.04em; vertical-align: -0.28em; } .founder__quote p:last-child .founder__qm { font-size: 1.5em; vertical-align: -0.2em; padding-inline-start: 0.03em; } .founder__lead { font-size: 1.32rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink) !important; } .founder__sign { margin-top: var(--space-2); display: flex; flex-direction: column; gap: 0.2rem; font-family: var(--font-serif); font-style: italic; font-synthesis: style; font-size: 1.6rem; line-height: 1.1; color: var(--ink) !important; } .founder__role { font-family: var(--font-mono); font-style: normal; /* --taupe-deep is only 2.04:1 on --paper. It passed earlier audits solely because the reveal keeps this hidden while Lighthouse runs. */ color: var(--ink-mute); } /* ---------- why: comparison table ---------- */ .compare { padding-block: var(--space-7) 0; } .compare__scroll { margin-top: var(--space-5); overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } .compare__scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; } .compare__table { width: 100%; min-width: 50rem; border-collapse: collapse; text-align: left; } .compare__table th, .compare__table td { padding: 0.95rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 0.95rem; color: var(--ink-mute); font-weight: 400; } .compare__table thead th { border-bottom: 1px solid var(--ink); padding-bottom: var(--space-2); vertical-align: bottom; } .compare__colname { display: block; font-size: 1rem; font-weight: 640; letter-spacing: -0.018em; color: var(--ink); } .compare__colsub { display: block; margin-top: 0.25rem; color: var(--ink-mute); } .compare__table tbody th { font-weight: 600; color: var(--ink); width: 15rem; padding-left: 0; } .compare__rowhead { width: 15rem; padding-left: 0 !important; } /* our column is tinted the whole way down */ .compare__col--us { background: rgba(36, 80, 224, 0.055); } thead .compare__col--us { border-bottom-color: var(--blue); } .compare__yes { color: var(--ink); font-weight: 600; } .compare__tick, .compare__cross { display: inline-block; width: 17px; height: 17px; transform: translateY(2px); } .compare__tick { background-color: var(--blue); -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } .compare__cross { background-color: var(--taupe-deep); -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } .compare__note { margin-top: var(--space-3); color: var(--ink-mute); max-width: 46rem; } .compare__verdict { margin-top: var(--space-4); padding: var(--space-3); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); max-width: 52rem; } .compare__verdict p { color: var(--ink-mute); } .compare__verdict strong { color: var(--ink); } /* ---------- why: objections ---------- */ .objections { padding-block: var(--space-7) 0; } /* ---------- why: promises (dark band) ---------- */ .promises { background: var(--ink); color: var(--cream); padding-block: var(--space-7); margin-top: var(--space-7); } .promises__title { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 640; line-height: 1.06; letter-spacing: -0.028em; text-wrap: balance; } .promises__title em { font-family: var(--font-serif); font-style: italic; font-synthesis: style; font-weight: 400; letter-spacing: 0; font-size: 1.06em; line-height: 1; color: var(--blue-light); padding-right: 0.06em; } .promises__grid { list-style: none; margin-top: var(--space-5); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } .promises__grid li { border-top: 1px solid var(--line-dark); padding-top: var(--space-2); } .promises__num { display: block; color: var(--blue-light); margin-bottom: 0.6rem; } .promises__grid h3 { font-size: 1.08rem; font-weight: 640; letter-spacing: -0.018em; } .promises__grid p { margin-top: 0.4rem; color: var(--taupe-deep); font-size: 0.98rem; } /* ---------- why: the work + trades ---------- Six specimen cards in an offset editorial mosaic. Each sits on a slab of colour lifted from that site's own palette, so six different design systems are legible as six blocks of colour before a word is read. Hover or focus opens the notes. */ .work { padding-block: var(--space-7); } .work__strip { margin-top: var(--space-5); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); /* the colour slab sits offset behind each card; keep it off the page edges */ padding-inline: 0.9rem; } .spec { --spec-slab: 0.85rem; position: relative; margin: 0; min-width: 0; } .spec:nth-of-type(1) { grid-column: 1 / 6; } .spec:nth-of-type(2) { grid-column: 7 / 13; margin-top: 3.5rem; } .spec:nth-of-type(3) { grid-column: 2 / 7; margin-top: 1.5rem; } .spec:nth-of-type(4) { grid-column: 8 / 12; } .spec:nth-of-type(5) { grid-column: 1 / 5; margin-top: 2.5rem; } .spec:nth-of-type(6) { grid-column: 6 / 13; } .spec__plate { position: relative; } .spec__plate::before { content: ""; position: absolute; inset: 0; border-radius: 10px; background: var(--spec-field); transform: translate(var(--spec-slab), var(--spec-slab)); transition: transform 0.5s var(--ease-out); } .spec img { position: relative; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow-card); transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); } .spec__cap { display: grid; gap: 0.35rem; margin-top: calc(var(--spec-slab) + 0.9rem); } .spec__idx { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--blue); } .spec__idx i { font-style: normal; color: var(--ink-mute); } .spec__trade { font-size: 1.22rem; font-weight: 640; letter-spacing: -0.022em; line-height: 1.1; } .spec__meta { display: flex; align-items: center; gap: 0.6rem; font-size: 0.72rem; letter-spacing: 0.03em; color: var(--ink-mute); } .spec__dots { display: flex; gap: 4px; flex: none; } .spec__dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line); } .spec__dots i:nth-child(1) { background: var(--spec-a); } .spec__dots i:nth-child(2) { background: var(--spec-b); } .spec__dots i:nth-child(3) { background: var(--spec-c); } /* the design note stays in the DOM for assistive tech and collapses visually with the 0fr -> 1fr grid-row trick, so no fixed height has to be guessed */ .spec__judged { display: grid; grid-template-rows: 0fr; opacity: 0; font-size: 0.93rem; line-height: 1.5; color: var(--ink-mute); transition: grid-template-rows 0.5s var(--ease-out), opacity 0.35s ease, margin-top 0.5s var(--ease-out); } .spec__judged > * { overflow: hidden; min-height: 0; } .spec:hover .spec__judged, .spec:focus-visible .spec__judged, .spec:focus-within .spec__judged { grid-template-rows: 1fr; opacity: 1; margin-top: 0.15rem; } .spec:hover .spec__plate::before, .spec:focus-visible .spec__plate::before, .spec:focus-within .spec__plate::before { transform: translate(calc(var(--spec-slab) * 1.75), calc(var(--spec-slab) * 1.75)); } .spec:hover img, .spec:focus-visible img, .spec:focus-within img { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } .spec:focus-visible { outline: none; } .spec:focus-visible img { outline: 2px solid var(--blue); outline-offset: 3px; } .work__link { margin-top: var(--space-5); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); } .work__hint { font-size: 0.74rem; letter-spacing: 0.05em; color: var(--ink-mute); } .work__link a { color: var(--blue); font-weight: 600; text-underline-offset: 3px; } .work__link a:hover { color: var(--blue-deep); } @media (max-width: 900px) { .work__strip { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-inline: 0; } .spec { --spec-slab: 0.6rem; } .spec:nth-of-type(n) { grid-column: 1; margin-top: 0; } /* no hover on touch, so the notes are simply always open */ .spec__judged { grid-template-rows: 1fr; opacity: 1; margin-top: 0.15rem; } .work__hint { display: none; } .work__link { justify-content: flex-start; } } @media (prefers-reduced-motion: reduce) { .spec__plate::before, .spec img, .spec__judged { transition: none; } } .trades__title { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: 1.15rem; font-weight: 640; letter-spacing: -0.018em; } .trades { list-style: none; margin-top: var(--space-3); display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 0.55rem var(--space-3); } .trades li { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.97rem; color: var(--ink-mute); } .trades li::before { content: ""; flex: none; width: 5px; height: 5px; transform: translateY(-2px); border-radius: 1px; background: var(--blue); rotate: 45deg; } .trades__note { margin-top: var(--space-4); color: var(--ink-mute); } .trades__note a { color: var(--blue); font-weight: 600; text-underline-offset: 3px; } .trades__note a:hover { color: var(--blue-deep); } /* ---------- pricing: the agency card's upfront line ---------- */ .price-card__plus { margin-top: 0.55rem; color: var(--ink-mute); font-size: 0.95rem; max-width: 26rem; } /* ========================================================================== SUPPORTING PAGES: responsive ========================================================================== */ @media (max-width: 1024px) { .svc { grid-template-columns: 4rem minmax(0, 1fr) 16rem; gap: var(--space-3); } .extras__grid, .promises__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .recap__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } } @media (max-width: 880px) { .svc { grid-template-columns: 3.25rem minmax(0, 1fr); row-gap: var(--space-3); } /* the plate drops under the copy and stops being a tall column */ .svc__plate { grid-column: 2; max-width: 22rem; height: 13.75rem; padding-bottom: 0; } .work__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .page-hero { padding-block: 7.5rem var(--space-5); } .page-hero__ctas .btn { width: 100%; justify-content: center; } .svc-index__inner { grid-template-columns: minmax(0, 1fr); } .svc-index__label { padding-top: 0; } .extras__grid, .promises__grid { grid-template-columns: minmax(0, 1fr); } .compare__table tbody th, .compare__rowhead { width: 11rem; } .founder__note { padding-left: var(--space-2); } .svc-band__cap { padding-top: var(--space-4); } } @media (max-width: 560px) { .svc { grid-template-columns: minmax(0, 1fr); } .svc__index { display: none; } .svc__plate { grid-column: 1; max-width: none; height: 0; padding-bottom: 62.5%; } .trades { grid-template-columns: repeat(2, minmax(0, 1fr)); } .work__strip { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } } /* ---------- comparison table: mobile ---------- A row label plus four option columns needs about 50rem. Sideways scrolling was the old answer and it hid three of the four options off-screen, so on a phone the table unrolls instead: one block per comparison, each option on its own line tagged with the column name it came from (the data-label on each cell). The markup stays a real , so it still reads correctly to screen readers and still lays out as a table from 769px up. */ .compare__hint { display: none; } @media (max-width: 768px) { .compare__scroll { overflow-x: visible; } .compare__table { display: block; min-width: 0; } .compare__table thead { display: none; } /* the column names move into the cells */ .compare__table tbody { display: block; } .compare__table tr { display: block; padding-bottom: var(--space-2); margin-bottom: var(--space-2); border-bottom: 1px solid var(--line); } .compare__table tbody tr:last-child { border-bottom: 0; margin-bottom: 0; } .compare__table tbody th { display: block; width: auto; padding: 0 0 0.7rem; border: 0; font-size: 1.02rem; letter-spacing: -0.015em; } .compare__table td { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0 0.9rem; align-items: baseline; padding: 0.42rem 0.6rem; border: 0; } .compare__table td::before { content: attr(data-label); font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; line-height: 1.9; text-transform: uppercase; color: var(--ink-mute); } /* our own column keeps its tint, now as a highlighted line rather than a stripe */ .compare__table td.compare__col--us { border-radius: 8px; } .compare__table td.compare__col--us::before { color: var(--blue); } } /* ---------- phone number: nav, mobile menu, sticky bar ---------- */ .nav__phone { display: none; /* shown from 1100px, where there is room beside the CTA */ align-items: center; gap: 0.4rem; color: var(--ink-mute); text-decoration: none; letter-spacing: 0.02em; transition: color 0.2s var(--ease-out); } .nav__phone svg { flex: none; color: var(--blue); } .nav__phone:hover { color: var(--ink); } @media (min-width: 1100px) { .nav__phone { display: inline-flex; } } .nav__mobile-call { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 12px; font-weight: 600; text-decoration: none; color: var(--ink); } .nav__mobile-call:hover { border-color: var(--blue); color: var(--blue); } /* the sticky bar becomes call + book, side by side */ .sticky-cta { display: none; } .sticky-cta__call { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; align-self: stretch; border-radius: 12px; background: var(--ink); color: var(--cream); text-decoration: none; } .sticky-cta__call:active { transform: translateY(1px); } /* a light-on-dark ghost button, for the closer's "or call" option */ .btn--ghost-light { border: 1px solid rgba(244, 240, 233, 0.35); color: var(--cream); background: none; } .btn--ghost-light:hover { border-color: var(--cream); background: rgba(244, 240, 233, 0.08); transform: translateY(-2px); } .btn--ghost-light:active { transform: translateY(0); } @media (max-width: 768px) { .sticky-cta { display: flex; gap: 0.5rem; align-items: stretch; } } /* ---------- why: the hero fact strip ---------- */ .facts { list-style: none; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } .facts li { display: flex; flex-direction: column; gap: 0.45rem; } .facts__num { font-family: var(--font-serif); font-style: italic; font-synthesis: style; font-weight: 400; font-size: clamp(2.1rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -0.01em; color: var(--blue); } .facts__label { font-size: 0.95rem; line-height: 1.5; color: var(--ink-mute); max-width: 22ch; } /* ---------- why: the picture + CTA column beside the letter ---------- One continuous card: a tall photograph on top, a dark action block welded to the bottom of it, so the image reads as part of the offer rather than decor. */ .founder__aside { position: sticky; top: 6rem; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); } .founder__img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 42%; } .founder__act { background: var(--ink); color: var(--cream); padding: var(--space-3); } .founder__act-line { font-family: var(--font-serif); font-style: italic; font-synthesis: style; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.005em; margin-bottom: var(--space-2); text-wrap: balance; } .founder__act-call { display: block; margin-top: 0.8rem; text-align: center; font-size: 0.92rem; color: var(--taupe-deep); text-underline-offset: 3px; } .founder__act-call:hover { color: var(--cream); } /* the colophon facts, demoted to one quiet rule under both columns */ .founder__meta { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; color: var(--ink-mute); font-size: 0.78rem; letter-spacing: 0.02em; } .founder__meta span { display: flex; align-items: center; gap: 1.4rem; } .founder__meta span + span::before { content: ""; width: 4px; height: 4px; border-radius: 1px; rotate: 45deg; background: var(--blue); flex: none; } /* the closer offers book and call side by side, email underneath */ .closer__ctas { flex-flow: row wrap; justify-content: center; } .closer__email { flex-basis: 100%; text-align: center; } @media (max-width: 1024px) { .founder__grid { grid-template-columns: minmax(0, 1fr); } .founder__aside { position: static; } .founder__img { aspect-ratio: 16 / 9; object-position: 50% 46%; } .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { /* the inline diamond separators only read as separators on one line; stacked, they look like a bulleted list with a missing first bullet */ .founder__meta { flex-direction: column; gap: 0.5rem; } .founder__meta span + span::before { display: none; } .founder__meta span { gap: 0; } /* a wider crop so the door still reads as a door once the CTA covers its base */ .founder__img { aspect-ratio: 5 / 4; } } @media (max-width: 560px) { .facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } .facts__label { max-width: none; } .closer__ctas { flex-direction: column; } .closer__ctas .btn { width: 100%; justify-content: center; } }