/* ========================================================================== Ace Site Designs — global stylesheet Monochrome editorial system. Motion uses transform/opacity only. ========================================================================== */ /* ---------- Tokens ---------- */ :root { /* Warm light theme (default) */ --bg: #f7f4ef; --bg-2: #efe9e0; --surface: #ffffff; --surface-2: #f3eee6; --media: #e8e1d6; --line: rgba(28, 25, 21, 0.12); --line-strong: rgba(28, 25, 21, 0.22); --fg: #1c1915; --muted: #57524b; /* 7.2:1 on --bg */ --dim: #6b655d; /* 5.3:1 on --bg */ --glow: rgba(222, 198, 166, 0.55); --shadow: 0 30px 60px -30px rgba(40, 30, 20, 0.28); --danger: #b42318; --success: #17703a; --live: #1f9d55; --font-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif; --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem); --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2.1rem); --step-3: clamp(1.9rem, 1.5rem + 1.9vw, 3.2rem); --step-4: clamp(2.4rem, 1.7rem + 3.4vw, 5rem); --step-5: clamp(2.9rem, 1.6rem + 6vw, 8.25rem); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --section: clamp(4.5rem, 3rem + 7vw, 10rem); --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); --container: 1320px; --radius-sm: 10px; --radius: 18px; --radius-lg: 28px; --radius-pill: 999px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --dur-1: 160ms; --dur-2: 280ms; --dur-3: 600ms; --dur-4: 1000ms; --z-base: 0; --z-raised: 10; --z-header: 40; --z-menu: 50; --z-cursor: 90; --z-loader: 100; --header-h: 84px; color-scheme: light; } /* Dark contrast surfaces: re-declare tokens so every component adapts automatically */ .section--invert, .site-footer, .site-header, .mobile-menu, .loader { --bg: #15130f; --bg-2: #1c1a16; --surface: #221f1b; --surface-2: #2a2722; --media: #2a2722; --line: rgba(255, 255, 255, 0.12); --line-strong: rgba(255, 255, 255, 0.24); --fg: #f7f4ef; --muted: #b5aea4; --dim: #979187; --glow: rgba(255, 255, 255, 0.08); --shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); --danger: #ff9b8f; --success: #9be2b4; color-scheme: dark; background: var(--bg); color: var(--fg); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); } /* No sideways wobble on phones: the page only ever scrolls up and down (pinch-zoom still works) */ html, body { overflow-x: hidden; overscroll-behavior-x: none; } html { -webkit-tap-highlight-color: transparent; } /* no blue flash when tapping */ .svc-chip__head:focus:not(:focus-visible) { outline: none; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; min-height: 100dvh; } img, svg, video { display: block; max-width: 100%; height: auto; } button, input, textarea, select { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } h1, h2, h3, h4 { font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; } p { text-wrap: pretty; } ::selection { background: var(--fg); color: var(--bg); } /* ---------- Accessibility ---------- */ .skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 200; background: var(--fg); color: var(--bg); padding: 0.75rem 1.25rem; border-radius: var(--radius-pill); transform: translateY(-200%); transition: transform var(--dur-2) var(--ease-out); } .skip-link:focus-visible { transform: none; } :focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; border-radius: 4px; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Layout ---------- */ .container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; } .section { padding-block: var(--section); position: relative; } .section--tight { padding-block: calc(var(--section) * 0.6); } .section--first { padding-top: calc(var(--header-h) + var(--section) * 0.6); } /* first section on a page with no hero: clear the fixed header */ .section--surface { background: var(--bg-2); } .divider { border: 0; border-top: 1px solid var(--line); } .grid { display: grid; gap: var(--space-5); } @media (min-width: 768px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 768px) and (max-width: 1023px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } } /* ---------- Type ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 0.65rem; font-size: var(--step--1); font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; color: var(--fg); } /* Section label marker: a slowly spinning sparkle */ .eyebrow::before { content: ""; flex-shrink: 0; width: 1em; height: 1em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 13.6 9.6 21 12 13.6 14.4 12 22 10.4 14.4 3 12 10.4 9.6Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 13.6 9.6 21 12 13.6 14.4 12 22 10.4 14.4 3 12 10.4 9.6Z'/%3E%3C/svg%3E") center / contain no-repeat; animation: spin 8s linear infinite; } @media (prefers-reduced-motion: reduce) { .eyebrow::before { animation: none; } } /* Label variant: no marker at all */ .eyebrow--plain::before { content: none; } /* Home services heading: label and "tap one" hint in one black pill */ .svc-pill { display: inline-flex; align-items: center; gap: 0.85rem; margin: 0; padding: 0.35rem 0.35rem 0.35rem 1.15rem; border-radius: 99px; background: #111; color: #fff; font-size: var(--step--1); font-weight: 500; line-height: 1.2; letter-spacing: 0; } .svc-pill__label { text-transform: uppercase; letter-spacing: 0.22em; margin-right: -0.22em; } /* cancel the trailing letter-space so both sides look even */ .svc-pill__tap { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.9rem 0.45rem 0.7rem; border-radius: 99px; background: #fff; color: #111; font-size: 0.85em; letter-spacing: 0; } .svc-pill__tap svg { width: 16px; height: 16px; flex: none; transform-origin: 50% 80%; animation: finger-tap 1.8s ease-in-out infinite; } @keyframes finger-tap { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(2px) scale(0.88); } 80% { transform: none; } } @media (prefers-reduced-motion: reduce) { .svc-pill__tap svg { animation: none; } } /* Label variant: thin rules either side instead of the sparkle */ .eyebrow--lines { display: flex; width: min(100%, 460px); gap: 1rem; } .eyebrow--lines::before, .eyebrow--lines::after { content: ""; flex: 1; width: auto; height: 1px; background: currentColor; -webkit-mask: none; mask: none; animation: none; } .display { font-size: var(--step-5); line-height: 0.95; letter-spacing: -0.05em; } .h1 { font-size: var(--step-4); } .h2 { font-size: var(--step-3); } .h3 { font-size: var(--step-2); letter-spacing: -0.025em; } .lead { font-size: var(--step-1); line-height: 1.5; color: var(--muted); max-width: 40ch; } /* A short lead that must stay on one line: shrinks a little on small phones rather than wrapping */ .lead--one-line { max-width: none; white-space: nowrap; font-size: min(var(--step-1), 3.75vw); } .muted { color: var(--muted); } .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; } .prose { max-width: 65ch; } .prose p + p { margin-top: 1.1em; } .prose h2 { font-size: var(--step-2); margin: 2em 0 0.6em; } .prose ul { padding-left: 1.2em; margin-top: 0.8em; } .prose li + li { margin-top: 0.4em; } .prose a { text-decoration: underline; text-underline-offset: 3px; } .section-head { display: grid; gap: var(--space-5); margin-bottom: clamp(2.5rem, 2rem + 3vw, 5rem); } @media (min-width: 1024px) { .section-head--split { grid-template-columns: 1.2fr 1fr; align-items: end; } } /* ---------- Buttons ---------- */ .btn { --btn-bg: var(--fg); --btn-fg: var(--bg); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; min-height: 52px; padding: 0.85rem 1.6rem; border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bg); font-weight: 500; letter-spacing: -0.01em; cursor: pointer; overflow: hidden; isolation: isolate; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2); } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--btn-fg); transform: translateY(101%); transition: transform var(--dur-3) var(--ease-out); } .btn:hover { color: var(--btn-bg); } .btn:hover::before { transform: none; } .btn:active { transform: scale(0.97); } .btn .btn__icon { width: 18px; height: 18px; transition: transform var(--dur-3) var(--ease-out); } .btn:hover .btn__icon { transform: translateX(4px) rotate(-45deg); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); border-color: var(--line-strong); color: var(--fg); } .btn--ghost::before { background: var(--fg); } .btn--ghost:hover { color: var(--bg); border-color: var(--fg); } .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); } .link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat; transition: background-size var(--dur-3) var(--ease-out); padding-block: 0.4rem; } .link-arrow:hover { background-size: 100% 1px; } .link-arrow svg { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); } .link-arrow:hover svg { transform: translateX(3px); } /* ---------- Header ---------- */ .site-header { position: fixed; inset: 0 0 auto; z-index: var(--z-header); height: var(--header-h); transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-2), border-color var(--dur-2); border-bottom: 1px solid transparent; } /* Solid dark bar: the white-on-black logo sits straight on it */ .site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.6); } .site-header.is-hidden { transform: translateY(calc(-100% - 24px)); box-shadow: none; } /* clear the shadow and logo glow too, so nothing peeks out */ .site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* Logo: the "Ace" mark from the artwork plus "site designs" as live text so it stays crisp, with a soft glow */ .brand { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; flex-shrink: 0; transition: transform var(--dur-3) var(--ease-out); } .brand:hover { transform: rotate(-2deg) scale(1.04); } .brand__mark { height: 44px; width: auto; filter: drop-shadow(0 0 6px rgba(255, 246, 228, 0.45)) drop-shadow(0 0 16px rgba(255, 246, 228, 0.18)); animation: logo-glow 4.5s ease-in-out infinite; } .brand__text { font-size: 0.66rem; font-weight: 500; line-height: 1; letter-spacing: 0.3em; margin-right: -0.3em; color: #fff; text-shadow: 0 0 8px rgba(255, 246, 228, 0.5); } @keyframes logo-glow { 50% { filter: drop-shadow(0 0 9px rgba(255, 246, 228, 0.7)) drop-shadow(0 0 26px rgba(255, 246, 228, 0.3)); } } @media (max-width: 599px) { .brand__mark { height: 38px; } .brand__text { font-size: 0.6rem; letter-spacing: 0.26em; margin-right: -0.26em; } } @media (prefers-reduced-motion: reduce) { .brand__mark { animation: none; } } /* Phone/tablet header: quick contact buttons fill the middle */ .header-contact { flex: 1; display: flex; justify-content: center; gap: 0.5rem; min-width: 0; } .header-contact__btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; border: 1px solid var(--line-strong); color: var(--fg); touch-action: manipulation; transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2), transform var(--dur-2) var(--ease-out); } .header-contact__btn svg { width: 19px; height: 19px; } .header-contact__btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); } .header-contact__btn:active { transform: scale(0.94); } @media (max-width: 399px) { .header-contact { gap: 0.35rem; } .header-contact__btn { width: 38px; height: 38px; } .header-contact__btn svg { width: 17px; height: 17px; } } @media (max-width: 359px) { .header-contact__btn--mail { display: none; } } @media (min-width: 1024px) { .header-contact { display: none; } } /* Desktop nav: links sit in a soft capsule; a cream pill glides to the hovered / current link */ .nav { display: none; position: relative; padding: 4px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); } .nav ul { display: flex; gap: 0; } .nav a { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.05rem; border-radius: var(--radius-pill); font-size: 0.95rem; color: #fff; transition: color 350ms var(--ease-out), text-shadow 350ms; text-shadow: 0 0 8px rgba(255, 246, 228, 0.5); /* same white and glow as the logo */ } .nav a:hover, .nav a[aria-current="page"] { color: #fff; } .nav a.is-pilled { color: #1c1915; text-shadow: none; } .nav a:focus-visible { outline-offset: 2px; } html:not(.js) .nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.12); } .nav__pill { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--radius-pill); background: #f7f4ef; opacity: 0; pointer-events: none; transition: transform 450ms var(--ease-out), width 450ms var(--ease-out), opacity 250ms ease; } .header-cta { display: none; } @media (min-width: 1024px) { .nav { display: block; } .header-cta { display: inline-flex; min-height: 44px; padding-block: 0.5rem; } .menu-toggle { display: none !important; } } .menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 44px; min-width: 44px; padding: 0 1rem; border-radius: var(--radius-pill); background: transparent; border: 1px solid var(--line-strong); cursor: pointer; touch-action: manipulation; font-size: 0.9rem; transition: background-color var(--dur-2), border-color var(--dur-2); } .menu-toggle:hover { border-color: var(--fg); } .menu-toggle__lines { position: relative; width: 18px; height: 10px; } .menu-toggle__lines::before, .menu-toggle__lines::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform var(--dur-3) var(--ease-out), top var(--dur-3) var(--ease-out); } .menu-toggle__lines::before { top: 0; } .menu-toggle__lines::after { top: calc(100% - 1.5px); } .menu-toggle[aria-expanded="true"] .menu-toggle__lines::before { top: 4px; transform: rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle__lines::after { top: 4px; transform: rotate(-45deg); } /* Mobile menu */ .mobile-menu { position: fixed; inset: 0; z-index: var(--z-menu); background: var(--bg); padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path var(--dur-3) var(--ease-in-out), visibility 0s linear var(--dur-3); overflow-y: auto; } .mobile-menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path var(--dur-3) var(--ease-in-out), visibility 0s; } .mobile-menu ul { display: grid; gap: 0.25rem; } .mobile-menu a.mobile-menu__link { display: flex; align-items: baseline; gap: 1rem; padding: 0.35rem 0; font-size: clamp(2.2rem, 9vw, 3.5rem); letter-spacing: -0.04em; line-height: 1.1; opacity: 0; transform: translateY(24px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); } .mobile-menu a.mobile-menu__link span { font-size: 0.8rem; color: var(--dim); letter-spacing: 0.1em; } .mobile-menu a[aria-current="page"] { font-family: var(--font-serif); font-style: italic; } .mobile-menu.is-open a.mobile-menu__link { opacity: 1; transform: none; } .mobile-menu.is-open li:nth-child(1) a { transition-delay: 120ms; } .mobile-menu.is-open li:nth-child(2) a { transition-delay: 160ms; } .mobile-menu.is-open li:nth-child(3) a { transition-delay: 200ms; } .mobile-menu.is-open li:nth-child(4) a { transition-delay: 240ms; } .mobile-menu.is-open li:nth-child(5) a { transition-delay: 280ms; } .mobile-menu.is-open li:nth-child(6) a { transition-delay: 320ms; } .mobile-menu__foot { display: grid; gap: 0.5rem; color: var(--muted); } .mobile-menu__foot a { min-height: 44px; display: inline-flex; align-items: center; } body.menu-open { overflow: hidden; } .site-header.menu-active { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; } .site-header { z-index: calc(var(--z-menu) + 1); } /* ---------- Preloader ---------- */ .loader { position: fixed; inset: 0; z-index: var(--z-loader); background: var(--bg); display: grid; place-items: center; pointer-events: none; } .loader__logo { width: min(46vw, 240px); clip-path: inset(0 100% 0 0); animation: loader-write 900ms var(--ease-in-out) 100ms forwards; } .loader.is-done { animation: loader-out 700ms var(--ease-in-out) forwards; } @keyframes loader-write { to { clip-path: inset(0 0 0 0); } } @keyframes loader-out { to { clip-path: inset(0 0 100% 0); visibility: hidden; } } html:not(.show-loader) .loader { display: none; } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding-top: calc(var(--header-h) + 3rem); padding-bottom: clamp(2rem, 1rem + 4vw, 4.5rem); overflow: hidden; isolation: isolate; } .hero--page { min-height: 72svh; } .hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .hero__grid { position: absolute; inset: -1px; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: clamp(56px, 7vw, 96px) clamp(56px, 7vw, 96px); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%); } /* Soft printed-paper texture (tiny tiled SVG noise, no extra download) */ .hero__grain { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.23 0 0 0 0 0.15 0.55 0 0 0 -0.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px 220px; } .hero__glow { position: absolute; width: 70vmax; height: 70vmax; left: 50%; top: 40%; margin: -35vmax 0 0 -35vmax; border-radius: 50%; background: radial-gradient(circle, var(--glow) 0%, transparent 60%); transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0); transition: transform 1.2s var(--ease-out); will-change: transform; } .hero__orbit { position: absolute; right: -12vmax; top: 8%; width: 58vmax; height: 58vmax; opacity: .5; animation: spin 80s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hero__inner { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); } /* Home hero: centred headline with a "deck of aces" (one card per service) dealt around it */ .hero:has(.hero__inner--centre) { min-height: 0; align-items: center; padding-top: calc(var(--header-h) + clamp(2rem, 1.25rem + 3vw, 4.5rem)); padding-bottom: clamp(5rem, 4rem + 2.5vw, 7rem); /* room for the "start here!" arrow */ } .hero__inner--centre { position: relative; z-index: 2; justify-items: center; text-align: center; gap: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); } .hero-title { font-size: clamp(2.7rem, 1.3rem + 5.4vw, 6.6rem); line-height: 0.98; letter-spacing: -0.045em; } .hero h1.hero-title { max-width: 11ch; margin-inline: auto; } .hero__inner--centre .btn-row { justify-content: center; } /* Hand-drawn "start here!" arrow pointing up at the main button */ .cta-nudge { position: relative; display: inline-flex; } .nudge { position: absolute; top: calc(100% + 0.3rem); left: 40%; display: flex; align-items: flex-end; gap: 0.15rem; pointer-events: none; color: var(--fg); } .nudge svg { width: 64px; height: auto; overflow: visible; transition: transform var(--dur-3) var(--ease-out); } .nudge path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; } .nudge__text { font-family: var(--font-serif); font-style: italic; font-size: 1.35rem; line-height: 1; white-space: nowrap; transform: rotate(-5deg); margin: 0 0 -0.35rem 0.1rem; } .js .nudge path { stroke-dashoffset: 1; } .js .nudge__text { opacity: 0; } .js .is-in .nudge__line { animation: swoosh-draw 700ms var(--ease-in-out) 1.7s forwards; } .js .is-in .nudge__head { animation: swoosh-draw 300ms var(--ease-out) 2.35s forwards; } .js .is-in .nudge__text { animation: nudge-in 600ms var(--ease-out) 2.4s forwards; } @keyframes nudge-in { from { opacity: 0; transform: translateY(6px) rotate(-5deg); } to { opacity: 1; transform: rotate(-5deg); } } @media (hover: hover) and (pointer: fine) { .cta-nudge:hover .nudge svg { transform: translate(-3px, -3px); } } .reveal-all .nudge path { stroke-dashoffset: 0; animation: none; } .reveal-all .nudge__text { opacity: 1; animation: none; } @media (prefers-reduced-motion: reduce) { .js .nudge path { stroke-dashoffset: 0; animation: none; } .js .nudge__text { opacity: 1; animation: none; } } @media (max-width: 419px) { .hero__inner--centre .btn-row { flex-wrap: nowrap; gap: 0.5rem; } .hero__inner--centre .btn { padding-inline: 1.1rem; gap: 0.5rem; font-size: 0.95rem; } } @media (max-width: 339px) { .nudge { display: none; } .hero__inner--centre .btn-row { flex-wrap: wrap; } } /* Logo-style swoosh that sweeps under "ace" once the headline has revealed */ .ace-word { position: relative; display: inline-block; } .ace-swoosh { position: absolute; left: -4%; bottom: -0.2em; width: 108%; height: 0.28em; overflow: visible; pointer-events: none; } .ace-swoosh path { fill: none; stroke: currentColor; stroke-width: 0.075em; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; } .js .ace-swoosh path { stroke-dashoffset: 1; } .js .is-in .ace-swoosh path { animation: swoosh-draw 900ms var(--ease-in-out) 700ms forwards; } @keyframes swoosh-draw { to { stroke-dashoffset: 0; } } .reveal-all .ace-swoosh path { stroke-dashoffset: 0; animation: none; } @media (prefers-reduced-motion: reduce) { .js .ace-swoosh path { stroke-dashoffset: 0; animation: none; } } .hero h1 { max-width: 14ch; } .hero--page h1 { max-width: 16ch; } .hero__meta { display: grid; gap: 1.5rem; align-items: end; border-top: 1px solid var(--line); padding-top: 1.5rem; } @media (min-width: 900px) { .hero__meta { grid-template-columns: 1.1fr auto; } } .hero__scroll { display: none; align-items: center; gap: 0.75rem; color: var(--dim); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.2em; } .hero__scroll i { position: relative; width: 1px; height: 48px; background: var(--line); overflow: hidden; } .hero__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--fg); animation: scroll-hint 2.2s var(--ease-in-out) infinite; } @keyframes scroll-hint { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } } @media (min-width: 900px) { .hero__scroll { display: inline-flex; } } /* Word reveal (headline split by JS) */ .sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; padding-right: 0.04em; margin-right: -0.04em; } .sw > span { display: inline-block; } .js .sw > span { transform: translate3d(0, 110%, 0); transition: transform var(--dur-4) var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms + var(--d, 0ms)); } .js .is-in .sw > span { transform: none; } /* ---------- Generic reveals ---------- */ .js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); transition-delay: calc(var(--stagger, 0) * 70ms + var(--d, 0ms)); } .js [data-reveal="fade"] { transform: none; } .js [data-reveal="scale"] { transform: scale(0.96); } .js [data-reveal="left"] { transform: translate3d(-28px, 0, 0); } .js [data-reveal].is-in { opacity: 1; transform: none; } .js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease-in-out); } .js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); } .reveal-all [data-reveal], .reveal-all .sw > span { opacity: 1 !important; transform: none !important; clip-path: none !important; } /* ---------- Marquee ---------- */ .marquee { --gap: clamp(1.5rem, 1rem + 2vw, 3rem); display: flex; overflow: hidden; gap: var(--gap); user-select: none; border-block: 1px solid var(--line); padding-block: clamp(1rem, 0.6rem + 1.5vw, 1.75rem); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { flex-shrink: 0; display: flex; align-items: center; gap: var(--gap); min-width: 100%; justify-content: space-around; animation: marquee 38s linear infinite; font-size: var(--step-3); letter-spacing: -0.04em; white-space: nowrap; } .marquee__track span:nth-child(even) { font-family: var(--font-serif); font-style: italic; color: var(--muted); } .marquee__track svg { width: 0.5em; height: 0.5em; color: var(--dim); } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(calc(-100% - var(--gap))); } } /* Service band with spinning "now booking" badge */ .ticker { position: relative; } .ticker + .section { padding-top: calc(var(--section) * 0.65); } /* tighter gap under the promise strip */ .marquee--band { background: #1c1915; color: #f7f4ef; border: 0; -webkit-mask-image: none; mask-image: none; padding-block: clamp(0.9rem, 0.6rem + 1vw, 1.4rem); } .marquee--band .marquee__track { animation-duration: 32s; } .marquee--band .marquee__track span:nth-child(even) { color: inherit; } /* Three-step teaser between the hero and the work */ .teaser { display: flex; align-items: center; justify-content: center; gap: clamp(0.3rem, 0.1rem + 1.2vw, 1.25rem); padding: clamp(0.85rem, 0.7rem + 0.5vw, 1.15rem) 0.5rem; background: #1c1915; color: #f7f4ef; text-decoration: none; font-size: clamp(0.72rem, 3.15vw, 1rem); font-weight: 500; white-space: nowrap; } .teaser__step { display: inline-flex; align-items: center; gap: 0.45em; } .teaser__step b { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: #f7f4ef; color: #111; font-size: 0.8em; font-weight: 700; flex: none; } .teaser__arrow { width: 1.1em; height: 1.1em; flex: none; color: #fff; stroke-width: 2.2; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.45)); } /* bright, softly glowing arrows */ .teaser:hover .teaser__arrow { color: #f7f4ef; } @media (max-width: 350px) { .teaser__arrow { display: none; } } /* smallest phones: numbers alone show the order */ /* Promise strip: slim line of real reasons to choose us */ .marquee--promise { padding-block: clamp(0.85rem, 0.7rem + 0.5vw, 1.1rem); } .marquee--promise .marquee__track { gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1.02rem); font-weight: 500; letter-spacing: 0; animation-duration: 36s; } .marquee--promise .marquee__track .promise { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-sans); font-style: normal; color: inherit; } .marquee--promise .marquee__track svg { width: 1.2em; height: 1.2em; color: rgba(247, 244, 239, 0.7); } /* Ace cards in the service band (cream / black, with one paper-grain card) */ .marquee--cards { padding-block: clamp(0.7rem, 0.5rem + 0.6vw, 1.1rem); } .marquee--cards .marquee__track { gap: clamp(0.75rem, 0.5rem + 0.9vw, 1.25rem); align-items: center; font-size: inherit; letter-spacing: 0; animation-duration: 40s; } .band-card { --r: 0deg; flex-shrink: 0; width: clamp(60px, 3.1rem + 1.6vw, 84px); aspect-ratio: 5 / 7; border-radius: 0.4rem; padding: 0.4em 0.45em; font-size: clamp(9px, 0.45rem + 0.28vw, 11.5px); line-height: 1.05; display: flex; flex-direction: column; justify-content: space-between; transform: rotate(var(--r)); box-shadow: 0 12px 22px -12px rgba(0, 0, 0, 0.6); transition: transform var(--dur-3) var(--ease-out); } .band-card b { font-weight: 600; } .band-card__end { align-self: flex-end; transform: rotate(180deg); } .band-card { white-space: normal; } .band-card em { font-family: var(--font-serif); font-style: italic; font-size: 1.2em; line-height: 1; text-align: center; overflow-wrap: anywhere; } .band-card__mid { display: flex; flex-direction: column; align-items: center; gap: 0.4em; } .band-card__mid svg { width: 2.1em; height: 2.1em; } .band-card__mid em { font-size: 1.1em; } .band-card--cream { background: #fffdf9; color: #1c1915; } .band-card--black { background: linear-gradient(160deg, #36312a, #24201b); color: #fff; box-shadow: 0 12px 22px -12px rgba(0, 0, 0, 0.7), 0 0 18px -4px rgba(255, 246, 228, 0.18), inset 0 0 0 1.5px rgba(255, 255, 255, 0.4); text-shadow: 0 0 8px rgba(255, 246, 228, 0.35); } .band-card--black svg { stroke-width: 1.9; color: #fff; } .band-card--grain { color: #1c1915; background-color: #efebe5; background-size: 160px 160px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.23 0 0 0 0 0.15 0.55 0 0 0 -0.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (hover: hover) and (pointer: fine) { .band-card:hover { transform: rotate(0deg) translateY(-6px) scale(1.06); } } /* ---------- "Black velvet" premium statement (home: Our approach) ---------- */ .velvet { --fg: #f5f5f3; --bg: #0b0b0c; position: relative; overflow: hidden; isolation: isolate; text-align: center; color: var(--fg); padding-block: clamp(3.25rem, 2.25rem + 3vw, 5rem); background: radial-gradient(ellipse 70% 60% at 50% 40%, #232325 0%, #0b0b0c 70%); } .velvet::after { /* fine grain */ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .velvet__sc { font-size: 0.72rem; letter-spacing: 0.42em; margin-right: -0.42em; text-transform: uppercase; color: rgba(245, 245, 243, 0.6); } .velvet__rule { display: block; width: 56px; height: 1px; margin: clamp(1rem, 0.8rem + 0.6vw, 1.4rem) auto; background: rgba(245, 245, 243, 0.4); } .velvet__title { max-width: 24ch; margin-inline: auto; font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem); line-height: 1.02; letter-spacing: -0.02em; } .velvet__sub { margin-top: clamp(0.75rem, 0.5rem + 1vw, 1.25rem); font-size: clamp(1.15rem, 0.9rem + 1.2vw, 2rem); letter-spacing: -0.02em; color: rgba(245, 245, 243, 0.85); } .velvet :focus-visible { outline-color: var(--fg); } /* Home services: chips that open up to show what's included and a starting price */ .chips-section { text-align: center; padding-block: calc(var(--section) * 0.32) calc(var(--section) * 0.5); } .chips-section__inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .chips-section .h1 { max-width: 18ch; } .svc-acc { width: min(100%, 460px); display: flex; flex-direction: column; align-items: center; gap: 0.9rem; margin-top: clamp(0rem, -0.25rem + 1vw, 0.75rem); } .svc-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; width: 100%; } .svc-chip { border: 1.5px solid #111; border-radius: 30px; background: #fff; color: #111; overflow: hidden; transition: background 350ms var(--ease-out), color 350ms var(--ease-out), border-radius 350ms var(--ease-out), transform 250ms var(--ease-out); } .svc-chip:not(.is-open):hover { transform: translateY(-2px); } .svc-chip.is-open { background: #111; color: #fff; border-radius: 24px; } .svc-chip__head { width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.65rem 0.55rem 0.55rem; border: 0; background: none; color: inherit; font: inherit; font-weight: 500; font-size: clamp(0.9rem, 0.82rem + 0.4vw, 1.02rem); line-height: 1.25; letter-spacing: -0.01em; text-align: left; white-space: nowrap; cursor: pointer; } .svc-chip__ic { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%; background: #111; color: #fff; transition: background 350ms var(--ease-out), color 350ms var(--ease-out); } .svc-chip__ic svg { width: 20px; height: 20px; } .svc-chip.is-open .svc-chip__ic { background: #fff; color: #111; } .svc-chip__txt { flex: 1; min-width: 0; } .svc-chip__txt small { display: block; margin-top: 0.1rem; font-size: 0.78em; font-weight: 400; letter-spacing: 0; color: var(--muted); transition: color 350ms var(--ease-out); } .svc-chip.is-open .svc-chip__txt small { color: rgba(255, 255, 255, 0.65); } .svc-chip__head .svc-chip__chev { width: 2rem; height: 2rem; flex: none; padding: 0.45rem; border: 1.5px solid currentColor; border-radius: 50%; transition: transform 350ms var(--ease-out); } .svc-chip.is-open .svc-chip__chev { transform: rotate(45deg); } .svc-chip__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 400ms var(--ease-out); } .svc-chip.is-open .svc-chip__body { grid-template-rows: 1fr; } .svc-chip__inner { min-height: 0; overflow: hidden; text-align: left; padding: 0 1.3rem; } .svc-chip__inner p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: rgba(255, 255, 255, 0.72); } .svc-chip__inner a { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.8rem 0 1.15rem; padding: 0.5rem 1rem; border-radius: 99px; background: #fff; color: #111; font-weight: 600; font-size: 0.9rem; text-decoration: none; } .svc-chip__inner a svg { width: 16px; height: 16px; transition: transform 250ms var(--ease-out); } .svc-chip__inner a:hover svg { transform: translateX(3px); } .svc-show__link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; color: var(--fg); text-decoration: underline; text-underline-offset: 4px; } .svc-show__link svg { width: 18px; height: 18px; transition: transform 250ms var(--ease-out); } .svc-show__link:hover svg { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .svc-chip, .svc-chip__body, .svc-chip__chev { transition: none; } } /* Pulse line: draws in like a heart monitor, then a bright beat keeps travelling along it */ .velvet__pulse { display: block; width: min(300px, 72%); height: auto; margin: clamp(1rem, 0.8rem + 0.6vw, 1.4rem) auto 0; overflow: visible; } .velvet__pulse-base { opacity: 0.55; stroke-dasharray: 1; stroke-dashoffset: 0; } .velvet__pulse-beat { stroke-dasharray: 0.14 0.86; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.85)); } .js .velvet__pulse-base { stroke-dashoffset: 1; } .js .velvet.is-live .velvet__pulse-base { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s linear; } .js .velvet.is-live .velvet__pulse-beat { opacity: 1; transition: opacity 0.4s 1.2s; animation: pulse-beat 1.8s linear 1.3s infinite; } @keyframes pulse-beat { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } .js .velvet__sub { opacity: 0; transform: translateY(10px); } .js .velvet.is-live .velvet__sub { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out) 1.3s, transform 700ms var(--ease-out) 1.3s; } .reveal-all .velvet__pulse-base { stroke-dashoffset: 0 !important; } .reveal-all .velvet__sub { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { .js .velvet__pulse-base { stroke-dashoffset: 0; } .velvet__pulse-beat { display: none; } .js .velvet__sub { opacity: 1; transform: none; } } /* ---------- Statement (scroll-lit words) ---------- */ .statement { font-size: var(--step-3); line-height: 1.18; letter-spacing: -0.035em; max-width: 26ch; } .statement .w { transition: opacity 400ms linear; } .js .statement .w { opacity: 0.2; } .js .statement .w.lit { opacity: 1; } .statement em { font-family: var(--font-serif); font-style: italic; } /* ---------- Service cards ---------- */ .service-list { border-top: 1px solid var(--line); } .service-row { position: relative; display: grid; gap: 0.75rem 2rem; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem) 0; border-bottom: 1px solid var(--line); isolation: isolate; } .service-row::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); z-index: -1; background: var(--fg); transform: scaleY(0); transform-origin: bottom; transition: transform var(--dur-3) var(--ease-out); } .service-row__title a::after { content: ""; position: absolute; inset: 0; } .service-row__num { font-size: var(--step--1); color: var(--dim); letter-spacing: 0.1em; } .service-row__title { font-size: var(--step-3); letter-spacing: -0.04em; transition: transform var(--dur-3) var(--ease-out); } .service-row__desc { color: var(--muted); max-width: 44ch; } .service-row__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .service-row__arrow { display: none; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line-strong); place-items: center; justify-self: end; align-self: center; transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-2), border-color var(--dur-2); } .service-row__arrow svg { width: 20px; height: 20px; } @media (min-width: 900px) { .service-row { grid-template-columns: 4rem 1.1fr 1fr 56px; align-items: center; } .service-row__arrow { display: grid; } .service-row__desc { grid-column: 3; grid-row: 1; } .service-row__tags { grid-column: 3; grid-row: 2; } .service-row__title { grid-row: 1 / span 2; } .service-row__num { grid-row: 1 / span 2; } .service-row__arrow { grid-column: 4; grid-row: 1 / span 2; } } @media (hover: hover) and (pointer: fine) { .service-row:hover::before { transform: scaleY(1); } .service-row:hover { color: var(--bg); } .service-row:hover .service-row__desc, .service-row:hover .service-row__num { color: color-mix(in srgb, var(--bg) 72%, var(--fg)); } .service-row:hover .service-row__title { transform: translateX(0.75rem); } .service-row:hover .service-row__arrow { background: var(--bg); color: var(--fg); border-color: var(--bg); transform: rotate(-45deg); } .service-row:hover .tag { border-color: color-mix(in srgb, var(--bg) 72%, var(--fg)); } } .tag { display: inline-flex; align-items: center; min-height: 30px; padding: 0.2rem 0.8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: 0.8rem; letter-spacing: 0.02em; white-space: nowrap; } /* ---------- Work cards ---------- */ .work-grid { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem) var(--space-6); } @media (min-width: 900px) { .work-grid { grid-template-columns: repeat(2, 1fr); } .work-grid--stagger > :nth-child(even) { margin-top: clamp(4rem, 8vw, 9rem); } } .work-card { display: grid; gap: 1.25rem; } .work-card__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--media); border: 1px solid var(--line); isolation: isolate; } .work-card__media .mock { position: absolute; inset: 8% 8% -8% 8%; transition: transform 1.1s var(--ease-out); } .work-card:hover .mock { transform: translateY(-4%) scale(1.02); } .work-card__info { display: flex; justify-content: space-between; align-items: start; gap: 1rem; } .work-card__title { font-size: var(--step-2); letter-spacing: -0.03em; } .work-card__meta { color: var(--muted); font-size: var(--step--1); margin-top: 0.25rem; } .work-card__result { text-align: right; font-size: var(--step--1); color: var(--muted); } .work-card__result strong { display: block; font-size: var(--step-1); color: var(--fg); font-weight: 500; } .work-card[hidden] { display: none; } /* Mock browser built entirely in CSS (zero image weight) */ .mock { border-radius: 12px 12px 0 0; background: var(--m-bg, #f2f2ee); color: var(--m-fg, #0a0a0a); box-shadow: var(--shadow), 0 0 0 1px var(--line); overflow: hidden; display: flex; flex-direction: column; font-family: var(--font-sans); } .mock__bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: var(--m-bar, rgba(0,0,0,.06)); flex-shrink: 0; } .mock__bar i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .25; } .mock__bar b { margin-left: 10px; height: 12px; flex: 1; max-width: 50%; border-radius: 6px; background: currentColor; opacity: .08; } .mock__body { flex: 1; padding: 7% 8%; display: flex; flex-direction: column; gap: 6%; container-type: inline-size; } .mock__nav { display: flex; justify-content: space-between; align-items: center; font-size: 3cqi; } .mock__nav span { display: flex; gap: 4cqi; opacity: .55; } .mock__nav i { font-style: normal; } .mock__nav strong { font-weight: 600; letter-spacing: -0.02em; } .mock__title { font-size: 10cqi; line-height: .95; letter-spacing: -0.04em; font-weight: 500; } .mock__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; } .mock__row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 4cqi; flex: 1; } .mock__img { border-radius: 2cqi; background: var(--m-img, #0a0a0a); position: relative; overflow: hidden; } .mock__img::after { content: ""; position: absolute; inset: 0; background: var(--m-pattern, none); } .mock__lines { display: grid; gap: 2cqi; align-content: start; } .mock__lines i { height: 1.6cqi; border-radius: 1cqi; background: currentColor; opacity: .14; } .mock__lines i:nth-child(2) { width: 80%; } .mock__lines i:nth-child(3) { width: 60%; } .mock__btn { margin-top: 2cqi; width: 55%; height: 6cqi; border-radius: 9cqi; background: currentColor; } /* Mock themes */ .mock--roast { --m-bg: #ecebe6; --m-img: radial-gradient(circle at 30% 30%, #6b6b66, #1a1a1a 70%); } .mock--joinery { --m-bg: #141414; --m-fg: #f2f2ee; --m-bar: rgba(255,255,255,.06); --m-img: repeating-linear-gradient(100deg, #2c2c2c 0 6px, #232323 6px 14px); } .mock--physio { --m-bg: #fafafa; --m-img: linear-gradient(160deg, #d9d9d4, #8f8f8a); } .mock--legal { --m-bg: #0d0d0d; --m-fg: #ecebe6; --m-bar: rgba(255,255,255,.06); --m-img: linear-gradient(0deg, #1f1f1f, #3b3b3b); --m-pattern: repeating-linear-gradient(90deg, transparent 0 18%, rgba(255,255,255,.08) 18% 19%); } .mock--florist { --m-bg: #f4f4f0; --m-img: radial-gradient(circle at 70% 60%, #bdbdb7 0 12%, transparent 13%), radial-gradient(circle at 35% 40%, #7a7a75 0 18%, transparent 19%), #2a2a2a; } .mock--dental { --m-bg: #e6e6e1; --m-img: conic-gradient(from 200deg at 60% 60%, #fafafa, #9a9a95, #fafafa); } /* Print mock: flyer + business cards, pure CSS */ .printmock { position: absolute; inset: 0; container-type: inline-size; } .pm-flyer, .pm-card { position: absolute; box-shadow: var(--shadow), 0 0 0 1px rgba(0,0,0,.06); transition: transform 1.1s var(--ease-out); } .pm-flyer { left: 9%; top: 9%; width: 40%; aspect-ratio: 1 / 1.414; transform: rotate(-5deg); background: #f6f4ee; color: #1c1915; padding: 3.5cqi; display: flex; flex-direction: column; gap: 2cqi; } .pm-flyer__brand { font-size: 2.2cqi; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .pm-flyer__title { font-size: 4.4cqi; line-height: 1; letter-spacing: -0.03em; font-weight: 500; } .pm-flyer__title em, .pm-card em, .bizcard em { font-family: var(--font-serif); font-style: italic; font-weight: 400; } .pm-flyer__img { flex: 1; border-radius: 1.5cqi; background: radial-gradient(circle at 70% 60%, #bdb3a2 0 14%, transparent 15%), radial-gradient(circle at 35% 40%, #7d7468 0 20%, transparent 21%), #2a2622; } .pm-flyer__cta { align-self: flex-start; font-size: 1.7cqi; padding: 1cqi 2cqi; border-radius: 4cqi; background: #1c1915; color: #f6f4ee; } .pm-card { width: 40%; aspect-ratio: 85 / 55; border-radius: 1.5cqi; padding: 3cqi; display: flex; flex-direction: column; justify-content: space-between; } .pm-card--back { right: 12%; top: 16%; transform: rotate(-9deg); background: #cdbfa9; color: #1c1915; display: grid; place-items: center; font-family: var(--font-serif); font-style: italic; font-size: 7cqi; } .pm-card--front { right: 7%; top: 47%; transform: rotate(6deg); background: #1c1915; color: #f6f4ee; } .pm-card--front strong { font-size: 3.6cqi; font-weight: 500; letter-spacing: -0.02em; } .pm-card--front small { font-size: 1.8cqi; line-height: 1.5; opacity: .75; } .work-card:hover .pm-flyer { transform: rotate(-7deg) translateY(-2%); } .work-card:hover .pm-card--front { transform: rotate(3deg) translate(3%, -4%); } .work-card:hover .pm-card--back { transform: rotate(-12deg) translateY(-4%); } /* Filter chips */ .filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-7); } .chip { min-height: 44px; padding: 0.5rem 1.1rem; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: transparent; cursor: pointer; font-size: 0.95rem; touch-action: manipulation; transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2); } .chip:hover { border-color: var(--fg); } .chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); } /* ---------- Process (sticky stacking cards — pure CSS) ---------- */ .process { display: grid; gap: var(--space-5); } .process-card { position: sticky; top: calc(var(--header-h) + 1rem + var(--i, 0) * 1.25rem); display: grid; gap: 1rem; padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); min-height: clamp(260px, 30vw, 340px); box-shadow: 0 -20px 40px -20px rgba(0,0,0,.5); } .process-card:nth-child(3n+2) { background: var(--surface-2); } .process-card:nth-child(3n) { background: #33302a; } .process-card:last-child { background: var(--fg); color: var(--bg); } /* the final step (launch) gets the light card */ .process-card:last-child .muted { color: color-mix(in srgb, var(--bg) 72%, var(--fg)); } .process-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .process-card__num { font-family: var(--font-serif); font-style: italic; font-size: var(--step-4); line-height: 1; } .process-card__time { font-size: var(--step--1); letter-spacing: 0.15em; text-transform: uppercase; opacity: .7; } .process-card h3 { font-size: var(--step-3); } .process-card p { max-width: 52ch; } @media (min-width: 900px) { .process-card { grid-template-columns: 1fr 1fr; align-items: end; } .process-card__top { grid-column: 1 / -1; align-self: start; } } /* ---------- How it works: swipeable "coverflow" of step cards (cream section, dark cards) ---------- */ .steps-section .section-head { margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); grid-template-columns: 1fr; justify-items: center; text-align: center; } .step-card__hint { display: inline-flex; align-items: center; gap: 0.3rem; margin: -0.2rem 0 0.2rem; font-size: 0.75rem; opacity: 0.65; } .step-card__art .step-card__hint svg, .steps__swipe svg { width: 14px; height: 14px; opacity: 1; } .steps__swipe { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--muted); } .steps__swipe svg { animation: swipe-nudge 1.6s ease-in-out infinite; } @keyframes swipe-nudge { 50% { transform: translateX(-6px); } } @media (prefers-reduced-motion: reduce) { .steps__swipe svg { animation: none; } } .steps { --cw: clamp(210px, 52vw, 270px); margin-top: 0; } .steps__track { list-style: none; margin: 0; padding: 0; position: relative; height: calc(var(--cw) * 1.36 + 1.4rem); touch-action: pan-y; user-select: none; outline: none; } .steps__track:focus-visible .step-card.is-current { outline: 2px solid var(--fg); outline-offset: 4px; } .step-card { position: absolute; left: 50%; top: 0.5rem; width: var(--cw); aspect-ratio: 11 / 15; margin-left: calc(var(--cw) / -2); border-radius: 22px; overflow: hidden; cursor: pointer; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.6); transition: transform 550ms var(--ease-out), opacity 550ms var(--ease-out), filter 550ms var(--ease-out), box-shadow 550ms var(--ease-out); will-change: transform; } .step-card.is-current { cursor: grab; box-shadow: 0 0 0 1px rgba(214, 190, 150, 0.55), 0 0 30px rgba(214, 190, 150, 0.16), 0 24px 50px -10px rgba(0, 0, 0, 0.75); } .step-card--cream { background: #f6f1ea; color: #111; } .step-card--stone { background: #e9e3d9; color: #111; } .step-card--black { background: #161513; color: #f5f5f3; border: 1px solid #2c2a27; } .step-card--charcoal { background: #2a2825; color: #f5f5f3; } .step-card__art { position: absolute; inset: 0 0 4.4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; } .step-card__art svg { width: calc(var(--cw) * 0.15); height: auto; opacity: 0.85; } .step-card__num { font-size: calc(var(--cw) * 0.5); line-height: 0.9; } .step-card__cap { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; padding: 0.7rem 1rem 0.75rem; border-radius: 16px; background: #111; color: #fff; } .step-card--black .step-card__cap, .step-card--charcoal .step-card__cap { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .step-card__cap-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .step-card__cap h3 { margin: 0; font-size: 1.2rem; font-weight: 400; line-height: 1.1; } .step-card__cap-row span { font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); white-space: nowrap; } /* Progress through the six steps: the gold bar fills when the card comes to the front */ .step-card__bar { display: block; height: 2px; margin-top: 0.55rem; border-radius: 2px; background: rgba(255, 255, 255, 0.18); overflow: hidden; } .step-card__bar i { display: block; width: var(--p); height: 100%; border-radius: 2px; background: #d6be96; transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease-out) 150ms; } .step-card.is-current .step-card__bar i, html:not(.js) .step-card__bar i { transform: none; } .step-card__text { display: none; } /* Final "Go live" card: a live badge and a call to action instead of the big number */ .step-card__art--live { gap: 0.8rem; text-align: center; } .step-card__live { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #9fe1cb; } .step-card__live i { width: 7px; height: 7px; border-radius: 50%; background: #5dcaa5; animation: live-blink 1.4s ease-in-out infinite; } @keyframes live-blink { 50% { opacity: 0.3; } } .step-card__live-title { font-size: calc(var(--cw) * 0.15); line-height: 1; } .step-card__cta { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.1rem; border-radius: 99px; background: #fff; color: #111; font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: transform 250ms var(--ease-out); } .step-card__cta svg { width: 15px; height: 15px; } .step-card__cta:hover { transform: translateY(-2px); } /* First "Let's talk" card: WhatsApp and form buttons */ .step-card__art--talk { gap: 0.5rem; padding-top: 0.4rem; text-align: center; } .step-card__art--talk .step-card__live-title { max-width: 85%; margin-bottom: 0.3rem; font-size: calc(var(--cw) * 0.115); line-height: 1.05; } .step-card__art--talk .step-card__cta { width: 82%; justify-content: center; font-size: 0.82rem; padding-block: 0.55rem; } .step-card__cta--dark { background: #111; color: #fff; } .step-card--black .step-card__cta--dark, .step-card--charcoal .step-card__cta--dark { background: #fff; color: #111; } /* dark cards: the main button goes white */ .step-card__cta--outline { background: none; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; } @media (prefers-reduced-motion: reduce) { .step-card__live i { animation: none; } } .steps__desc { max-width: 46ch; min-height: 3.2em; margin: 0 auto; text-align: center; color: var(--muted); line-height: 1.6; } .steps__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 0.75rem; } .steps__btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--fg); cursor: pointer; transition: background 250ms var(--ease-out), color 250ms var(--ease-out), opacity 250ms; } .steps__btn svg { width: 18px; height: 18px; } .steps__btn:hover:not(:disabled) { background: var(--fg); color: var(--bg); } .steps__btn:disabled { opacity: 0.3; cursor: default; } .steps__dots { display: flex; gap: 0.35rem; } .steps__dots i { display: block; width: 7px; height: 7px; border-radius: 4px; background: var(--line); transition: width 300ms var(--ease-out), background 300ms; } .steps__dots i.is-on { width: 20px; background: var(--fg); } /* Without JavaScript: a plain readable list of the six steps */ html:not(.js) .steps__track { height: auto; display: grid; gap: 1rem; justify-items: center; } html:not(.js) .step-card { position: relative; left: auto; margin: 0; aspect-ratio: auto; min-height: calc(var(--cw) * 1.1); } html:not(.js) .step-card__text { display: block; position: relative; padding: 0 1rem 1rem; } html:not(.js) .steps__desc, html:not(.js) .steps__nav { display: none; } @media (prefers-reduced-motion: reduce) { .step-card { transition: none; } } /* ---------- Phones: floating WhatsApp / quote pill ---------- */ .m-bar { position: fixed; z-index: calc(var(--z-header) - 1); left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 6px; padding: 6px; border-radius: 99px; background: #111; box-shadow: 0 0 0 3px #f6f1ea, 0 12px 30px rgba(0, 0, 0, 0.4); transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; transition: transform 400ms var(--ease-out), opacity 300ms, background 350ms; } .m-bar.is-on { transform: none; opacity: 1; pointer-events: auto; } .m-bar__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 46px; border-radius: 99px; color: #fff; font-weight: 600; font-size: 0.95rem; text-decoration: none; } .m-bar__btn svg { width: 18px; height: 18px; flex: none; } .m-bar__btn--wa { background: #fff; color: #111; } .m-bar__btn { transition: background 350ms, color 350ms; } @media (min-width: 768px) { .m-bar { display: none; } } @media (prefers-reduced-motion: reduce) { .m-bar { transition: none; } } /* ---------- Home FAQ: question cards you swipe sideways ---------- */ .faq-swipe { padding-top: calc(var(--section) * 0.35); } .faq-swipe.section--grain { background-color: #ece5d9; } /* soft sand, a step deeper than the cream */ .faq-swipe__head { text-align: center; margin-bottom: clamp(1rem, 0.8rem + 1vw, 1.75rem); } .faq-swipe .faq-swipe__track { list-style: none; margin: 0 calc(var(--gutter, 1rem) * -1); padding: 0.25rem var(--gutter, 1rem) 0.75rem; display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 300px); gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter, 1rem); overscroll-behavior-x: contain; scrollbar-width: none; } .faq-swipe__track::-webkit-scrollbar { display: none; } .faq-swipe__track:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; } .faq-card { scroll-snap-align: start; padding: 1.1rem 1.2rem 1.25rem; border-radius: var(--radius); background: #fffdf9; border: 1px solid var(--line); } .faq-card h3 { font-size: var(--step-0); font-weight: 600; letter-spacing: -0.01em; } .faq-card p { margin-top: 0.45rem; font-size: 0.92rem; line-height: 1.55; color: var(--muted); } .faq-swipe__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 0.5rem; } .faq-swipe__dots { display: flex; justify-content: center; gap: 0.35rem; } .faq-swipe .faq-swipe__track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; } @media (hover: hover) and (pointer: fine) { .faq-swipe .faq-swipe__track { cursor: grab; } } .faq-swipe__dots i { display: block; width: 6px; height: 6px; border-radius: 3px; background: var(--line-strong); transition: width 250ms var(--ease-out), background 250ms; } .faq-swipe__dots i.is-on { width: 16px; background: var(--fg); } .faq-swipe__more { margin-top: 1rem; text-align: center; font-size: 0.92rem; } .faq-swipe__more a { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; } @media (min-width: 900px) { .faq-swipe .faq-swipe__track { grid-auto-columns: calc((100% - 1.5rem) / 3); margin-inline: 0; padding-inline: 0; } } /* ---------- Services on desktop: heading on the left, chips on the right (phones unchanged) ---------- */ .svc-intro { display: none; } @media (min-width: 1000px) { .chips-section__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto 1fr; column-gap: clamp(2.5rem, 1rem + 4vw, 6rem); row-gap: 1.25rem; align-items: start; text-align: left; } .chips-section__inner > .svc-head { grid-column: 1; grid-row: 1; justify-self: start; align-items: flex-start; } .svc-intro { display: block; grid-column: 1; grid-row: 2; } .svc-intro__hl { font-size: clamp(2.2rem, 1.2rem + 2.4vw, 3.4rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; max-width: 13ch; } .svc-intro__hl em { font-weight: 400; } .svc-intro__line { margin-top: 1rem; max-width: 34ch; color: var(--muted); font-size: var(--step-1); line-height: 1.5; } .chips-section__inner > .svc-acc { grid-column: 2; grid-row: 1 / span 2; width: 100%; margin-top: 0; align-self: center; } } /* ---------- Footer: one closing line, one button, a row of links ---------- */ .site-footer--simple { padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem) calc(clamp(1.5rem, 1rem + 2vw, 2.5rem) + env(safe-area-inset-bottom, 0px)); } .footer-simple { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-align: center; } .footer-simple__line { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.4rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; max-width: 16ch; } .footer-simple__line em { font-weight: 400; } .footer-simple__wa { gap: 0.5rem; } .footer-simple__wa svg { width: 18px; height: 18px; } .footer-simple__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem 0.6rem; margin-top: 0.75rem; font-size: 0.95rem; } .footer-simple__links a { color: var(--muted); text-decoration: none; } .footer-simple__links a:hover { color: var(--fg); } .footer-simple__links span { color: var(--dim, var(--muted)); } .footer-simple__small { font-size: 0.8rem; color: var(--muted); } .footer-simple__small a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* ---------- Stats ---------- */ .stats { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); } .stat { padding: 2rem 0 0; display: grid; gap: 0.5rem; } .stat:nth-child(odd) { padding-right: 1rem; } .stat__num { font-size: var(--step-4); letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; } .stat__label { color: var(--muted); font-size: var(--step--1); max-width: 22ch; } @media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } .stat { padding: 2rem 1.5rem 0 0; border-right: 1px solid var(--line); } .stat:last-child { border-right: 0; } .stat + .stat { padding-left: 1.5rem; } } /* ---------- Testimonials ---------- */ .quote-grid { display: grid; gap: var(--space-5); } @media (min-width: 900px) { .quote-grid { grid-template-columns: 1.4fr 1fr; } } .quote { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); } .quote blockquote { font-size: var(--step-2); line-height: 1.25; letter-spacing: -0.025em; } .quote--sm blockquote { font-size: var(--step-1); } .quote figcaption { display: flex; align-items: center; gap: 0.9rem; } .quote .avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--fg); color: var(--bg); font-weight: 500; font-size: 0.95rem; } .quote cite { font-style: normal; font-weight: 500; display: block; } .quote .stars { display: flex; gap: 2px; } .quote .stars svg { width: 16px; height: 16px; } .quote-stack { display: grid; gap: var(--space-5); } /* ---------- Pricing ---------- */ .price-grid { display: grid; gap: var(--space-5); } @media (min-width: 1024px) { .price-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } } .price-card { position: relative; display: flex; flex-direction: column; gap: 1.5rem; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); transition: box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), border-color var(--dur-2); } .price-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow); } .price-card--featured { background: var(--fg); color: var(--bg); border-color: var(--fg); } .price-card--featured .muted { color: color-mix(in srgb, var(--bg) 72%, var(--fg)); } .price-card--featured .btn { --btn-bg: var(--bg); --btn-fg: var(--fg); } .price-card__badge { position: absolute; top: 1.25rem; right: 1.25rem; padding: 0.3rem 0.8rem; border-radius: var(--radius-pill); background: var(--bg); color: var(--fg); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; } .price-card__name { font-size: var(--step-1); font-weight: 500; } .price { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; } .price__from { font-size: var(--step--1); opacity: .7; } .price__amount { font-size: var(--step-4); letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; } .price__note { font-size: var(--step--1); opacity: .7; } .checklist { display: grid; gap: 0.7rem; } .checklist li { display: grid; grid-template-columns: 20px 1fr; gap: 0.75rem; align-items: start; } .checklist svg { width: 18px; height: 18px; margin-top: 0.2rem; } .price-card .btn { margin-top: auto; width: 100%; } /* Ace packages: cream cards and black, with Ace Business picked out by a bold black border */ .price-grid--ace .price-card { background: #fffdf9; color: var(--fg); } .price-grid--ace .price-card--featured { background: #fffdf9; color: var(--fg); border: 2px solid #111; } .price-grid--ace .price-card--featured .muted { color: var(--muted); } .price-grid--ace .price-card--featured .btn { --btn-bg: #111; --btn-fg: #fff; } .price-grid--ace .price-card__badge { position: static; align-self: flex-start; margin-bottom: -0.25rem; background: #111; color: #fff; } /* Side by side: badge sits on the top edge and headlines share a height, so names, prices and lists line up */ @media (min-width: 700px) { .price-grid--ace { padding-top: 0.9rem; } .price-grid--ace .price-card { position: relative; overflow: visible; } .price-grid--ace .price-card__badge { position: absolute; top: 0; left: 1.3rem; transform: translateY(-50%); margin: 0; } .price-grid--ace .price-card__hl { min-height: calc(3 * 1.15em); } } .price-grid--ace .checklist svg { color: currentColor; } .price-grid--ace .checklist b { font-weight: 600; } .price-card__hl { font-size: var(--step-2); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; } .price-card__hl em { font-weight: 400; } .price-card__name { margin-top: -0.35rem; font-size: var(--step--1); font-weight: 500; color: var(--muted); } /* package name sits quietly under the benefit headline */ .price-card__name span { font-weight: 400; } .price-card__reassure { margin-top: auto; padding-top: 0.5rem; font-size: 0.8rem; text-align: center; color: var(--muted); } .price-grid--ace .price-card .btn { margin-top: 0; gap: 0.4rem; } .price-grid--ace .price-card .btn svg { width: 16px; height: 16px; } .price-card__ask { align-self: center; margin-top: -0.25rem; font-size: 0.82rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .price-card__ask:hover { color: var(--fg); } /* Four cards: 2 across on tablets, 4 across on wide screens */ @media (min-width: 700px) { .price-grid--ace { grid-template-columns: repeat(2, 1fr); max-width: 780px; margin-inline: auto; } } @media (min-width: 1100px) { .price-grid--ace { grid-template-columns: repeat(4, 1fr); max-width: none; gap: 1rem; } } /* keep the package cards compact on bigger screens */ @media (min-width: 700px) { .price-grid--ace .price-card { padding: 1.4rem 1.3rem; gap: 0.75rem; } .price-grid--ace .price__amount { font-size: clamp(2.2rem, 1.6rem + 1.2vw, 2.9rem); } .price-grid--ace .price-card__hl { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); } .price-grid--ace .checklist { gap: 0.5rem; font-size: 0.92rem; } .price-grid--ace .price-card .btn { min-height: 48px; padding-block: 0.7rem; font-size: 0.95rem; } } /* Home pricing: centred heading with one short line */ .pricing-section { padding-top: calc(var(--section) * 0.42); padding-bottom: calc(var(--section) * 0.4); } .pricing-head { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; margin-bottom: clamp(1rem, 0.8rem + 1vw, 1.75rem); } .price-promise-line { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 1rem; color: var(--muted); font-size: 0.85rem; } .price-promise-line::before, .price-promise-line::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); } .price-promise-line span { white-space: nowrap; } .pricing-head__hint { color: var(--muted); font-size: 0.95rem; } /* Phones: a tab bar picks which package card is shown */ .price-tabs { display: flex; gap: 2px; padding: 4px; margin-bottom: 1rem; border-radius: 99px; background: #e9e2d6; } .price-tabs__tab { flex: 1; min-height: 40px; padding: 0 0.4rem; border: 0; border-radius: 99px; background: transparent; color: var(--fg); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 250ms var(--ease-out), color 250ms var(--ease-out); } .price-tabs__tab[aria-selected="true"] { background: #111; color: #fff; } .price-tabs__tab:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; } @media (max-width: 699px) { .price-grid--ace.has-tabs > .price-card:not(.is-shown) { display: none; } .price-grid--ace.has-tabs > .price-card.is-shown { animation: tab-in 300ms var(--ease-out); } } @keyframes tab-in { from { opacity: 0; transform: translateY(6px); } } @media (min-width: 700px) { .price-tabs { display: none; } } @media (prefers-reduced-motion: reduce) { .price-grid--ace.has-tabs > .price-card.is-shown { animation: none; } } /* Ace Custom: fill-in-the-sentence quote */ .price-card--custom { border: 1.5px dashed #111; } .price-card--custom .price__amount em { font-weight: 400; } .quote-sentence { display: flex; flex-direction: column; gap: 1rem; flex: 1; } .quote-sentence p { font-size: var(--step-0); line-height: 2.1; } .quote-sentence select { display: inline; max-width: 100%; padding: 0 1.3em 0 0.15em; border: 0; border-bottom: 1.5px solid currentColor; border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.1em center / 0.9em; font-weight: 600; cursor: pointer; -webkit-appearance: none; appearance: none; } .quote-sentence select:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; } .quote-sentence .btn { margin-top: 0; width: 100%; } .price-card--custom .quote-sentence { flex: 1 1 auto; } .quote-sentence p.price-card__reassure { margin-top: auto; font-size: 0.8rem; line-height: 1.4; } /* The custom picker that replaces the plain dropdown (the real