/* Red Mesa — shared styles Values mirror the design reference exactly. No global box-sizing reset: the reference relies on content-box sizing for bordered pills and buttons. */ /* ───────────── Tokens ───────────── */ :root { --sand: #ECE6DC; --sand-2: #E2DACD; --paper: #F6F2EB; --paper-2: #FBF8F3; --ink: #18171A; --ink-2: #2B2927; --ink-3: #34312E; --ink-4: #3A3633; --ink-5: #4A4641; --ink-6: #5A544D; --clay: #C4472F; --clay-dark: #A93B26; --clay-deeper: #8F3220; --clay-hover: #B8432C; --coral: #F84E36; --sun: #FFC720; --link-hover: #B23E28; --text-2: #4A453F; --text-3: #5C564E; --text-4: #6E665C; --text-5: #7A7268; --muted-dark: #A39A8D; --muted-dark-2: #C9C0B3; --on-clay: #FBF4EA; --on-clay-2: #F3C9BC; --on-clay-border: #E79A85; --line: #D6CCBC; --line-2: #DDD3C4; --line-3: #CFC4B2; --peach: #E8B7A6; --footer-hover: #FF8A70; --nav-hover: #E6DED2; --f-display: 'Funnel Display', sans-serif; --f-sans: 'Funnel Sans', sans-serif; --ease-out: cubic-bezier(.2,.7,.2,1); --ease-panel: cubic-bezier(.3,.8,.2,1); --gutter: clamp(20px,4vw,40px); --slab-inset: clamp(8px,1.5vw,16px); --slab-radius: clamp(28px,4vw,48px); --section-y: clamp(80px,10vw,140px); } /* ───────────── Base ───────────── */ html { scroll-behavior: smooth; } body { margin: 0; background: var(--sand); color: var(--ink); font-family: var(--f-sans); -webkit-font-smoothing: antialiased; } :where(a) { color: var(--ink); } :where(a):hover { color: var(--link-hover); } ::selection { background: var(--ink); color: var(--sand); } @keyframes rm-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } } @keyframes rm-blink { 50% { opacity: 0; } } @keyframes rm-shim { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @keyframes rm-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ───────────── Shared building blocks ───────────── */ .container { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); } .slab { margin: 0 var(--slab-inset); border-radius: var(--slab-radius); } .spacer { height: clamp(40px,6vw,80px); } .dot { display: block; flex: 0 0 auto; border-radius: 50%; } .tag { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--sand-2); font-size: 14px; font-weight: 600; } .tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); } .tag--ink { background: var(--ink-2); } .tag--clay { background: var(--clay-dark); } .tag--clay::before { background: var(--sun); } .eyebrow { font-size: 15px; font-weight: 600; color: var(--text-3); } .eyebrow--dark { color: var(--muted-dark); } .h2 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(38px,4.8vw,68px); line-height: 1; letter-spacing: -0.035em; } .h1-xl { margin: 24px 0 0; max-width: 14ch; font-family: var(--f-display); font-weight: 700; font-size: clamp(46px,7vw,108px); line-height: .95; letter-spacing: -0.045em; text-wrap: balance; } .lead { font-size: clamp(18px,1.5vw,21px); line-height: 1.55; color: var(--text-2); text-wrap: pretty; } /* Page-load fade for hero headings (opacity/transform set by .is-mounted) */ .fade-in { transition: opacity .9s, transform 1s var(--ease-out); } .js .fade-in { opacity: 0; transform: translateY(var(--fy, 28px)); } .js .is-mounted .fade-in, .js.is-mounted .fade-in { opacity: 1; transform: translateY(0px); } .btn { display: inline-flex; align-items: center; height: 56px; padding: 0 28px; border-radius: 999px; border: 1.5px solid var(--ink); font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; } .btn--primary { background-color: var(--ink); color: var(--paper); transition: background-color .25s, border-color .25s; } .btn--primary:hover { background-color: var(--clay); border-color: var(--clay); color: var(--paper); } .btn--secondary { background-color: transparent; color: var(--ink); transition: background-color .25s, color .25s; } .btn--secondary:hover { background-color: var(--ink); color: var(--sand); } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } /* Solid pill links (no border) used for CTAs */ .pill-cta { display: inline-flex; align-items: center; height: 56px; padding: 0 28px; border-radius: 999px; background-color: var(--ink); color: var(--paper); font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; transition: background-color .25s; } .pill-cta:hover { background-color: var(--clay); color: var(--paper); } .pill-cta--lg { height: 60px; padding: 0 32px; font-size: 17px; } /* Skeleton blocks */ .skel { animation: rm-pulse 1.1s infinite; } .shim { background-size: 200% 100%; animation: rm-shim 1.8s ease-in-out infinite; } /* Live iframe previews (scaled by JS to the card width) */ .live { position: relative; overflow: hidden; background-color: var(--sand-2); background-size: 100% auto; background-position: top left; background-repeat: no-repeat; } .live iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 960px; border: 0; transform-origin: 0 0; transform: scale(.36); pointer-events: none; background: transparent; } .live iframe.is-loaded { background: #fff; } /* Static fallbacks shown while a preview loads, or if a site refuses framing */ .live--barcelos { background-image: url(/assets/previews/barcelos.jpg); } .live--jsweets { background-image: url(/assets/previews/jsweets.jpg); } .live--erina { background-image: url(/assets/previews/erina.jpg); } .live--aandstire { background-image: url(/assets/previews/aandstire.jpg); } .live--magiclane { background-image: url(/assets/previews/magiclane.jpg); } .live--dialdynamics { background-image: url(/assets/previews/dialdynamics.jpg); } /* Jerusalem Shawarma HTML mock (sized in container units) */ .js-mock { position: relative; overflow: hidden; background: #101010; container-type: inline-size; font-family: var(--f-sans); color: #FFFFFF; } .js-mock > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .js-mock__shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(16,16,16,.92) 0%,rgba(16,16,16,.7) 45%,rgba(16,16,16,.15) 100%); } .js-mock__bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 3cqw; padding: 2.6cqw 4cqw; } .js-mock__bar img { height: 6.4cqw; width: auto; display: block; } .js-mock__nav { margin-left: auto; display: flex; gap: 2.6cqw; font-size: 1.9cqw; font-weight: 600; opacity: .9; } .js-mock__copy { position: absolute; left: 4cqw; bottom: 9cqw; width: 58cqw; } .js-mock__kicker { font-size: 2cqw; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #E8C27A; } .js-mock__title { margin-top: 1.8cqw; font-family: Georgia,'Times New Roman',serif; font-size: 5.4cqw; line-height: 1.05; } .js-mock__btns { margin-top: 3cqw; display: flex; gap: 1.6cqw; } .js-mock__btns span { padding: 1.3cqw 2.6cqw; border-radius: 999px; font-size: 1.9cqw; font-weight: 700; } .js-mock__btns span:first-child { background: #C8102E; } .js-mock__btns span:last-child { border: 1px solid rgba(255,255,255,.6); } /* ───────────── Header ───────────── */ .hdr { position: sticky; top: 0; z-index: 50; display: block; padding: 12px clamp(12px,3vw,28px); font-family: var(--f-sans); color: var(--ink); } .hdr-pill { max-width: 1240px; margin: 0 auto; height: 64px; padding: 0 8px 0 13px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--paper); border: 1px solid var(--line-2); border-radius: 999px; clip-path: inset(0 0 0 0 round 999px); } .hdr-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } .hdr-brand:hover { color: var(--ink); } .hdr-mark { position: relative; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: var(--ink); display: block; } .hdr-sun { position: absolute; left: 54%; top: 14.5%; width: 31.5%; aspect-ratio: 1; border-radius: 50%; background: var(--sun); transform: translate(0%,0%); transition: transform .9s var(--ease-out); } .hdr-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hdr-word { font-family: var(--f-display); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; white-space: nowrap; transition: opacity .6s, transform .8s var(--ease-out); } .hdr-nav { position: relative; display: flex; align-items: center; gap: 4px; } .hdr-ind { position: absolute; top: 50%; left: 0; height: 40px; margin-top: -20px; border-radius: 999px; background: var(--nav-hover); width: 0; opacity: 0; transition: transform .45s var(--ease-panel), width .45s var(--ease-panel), opacity .25s; } .hdr-link { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; transition: opacity .5s, transform .7s var(--ease-out); } .hdr-link:hover { color: var(--ink); } .hdr-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); opacity: 0; transition: opacity .3s; } .hdr-link[aria-current] .hdr-dot { opacity: 1; } .hdr-cta { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 999px; background-color: var(--ink); color: var(--paper); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background-color .25s, opacity .5s, transform .7s var(--ease-out); } .hdr-cta:hover { background-color: var(--clay); color: var(--paper); } .hdr-menu { display: none; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background-color: var(--ink); color: var(--paper); font-family: var(--f-sans); font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: opacity .5s; } .hdr-bars { position: relative; width: 16px; height: 10px; display: block; } .hdr-bars span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--paper); transition: transform .3s; } .hdr-bars span:first-child { top: 0; } .hdr-bars span:last-child { bottom: 0; } .hdr.is-open .hdr-bars span:first-child { transform: translateY(4px) rotate(45deg); } .hdr.is-open .hdr-bars span:last-child { transform: translateY(-4px) rotate(-45deg); } .hdr-panel { position: absolute; left: clamp(12px,3vw,28px); right: clamp(12px,3vw,28px); top: calc(100% - 4px); background: var(--paper); border: 1px solid var(--line-2); border-radius: 28px; padding: 10px; display: none; } .hdr.is-open .hdr-panel { display: block; } .hdr-plink { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-radius: 20px; font-family: var(--f-display); font-weight: 600; font-size: 26px; color: var(--ink); text-decoration: none; transition: background-color .2s; } .hdr-plink:hover { background-color: var(--nav-hover); color: var(--ink); } .hdr-plink .hdr-pdot { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); opacity: 0; } .hdr-plink[aria-current] .hdr-pdot { opacity: 1; } .hdr-pcta { margin-top: 8px; display: flex; align-items: center; justify-content: center; height: 56px; border-radius: 999px; background-color: var(--ink); color: var(--paper); font-weight: 600; font-size: 17px; text-decoration: none; } .hdr-pcta:hover { color: var(--paper); } @media (max-width: 939.98px) { .hdr-nav, .hdr-cta { display: none; } .hdr-menu { display: flex; } } @media (min-width: 940px) { .hdr.is-open .hdr-panel { display: none; } } /* Sun rises on every load; the full intro only on the first visit per session */ .js .hdr:not(.is-mounted) .hdr-sun { transform: translate(0%,230%); } .hdr-first .hdr-pill { transition: clip-path 1.1s .15s cubic-bezier(.65,0,.25,1); } .hdr-first .hdr-sun { transition: transform 1.4s .2s var(--ease-out); } .hdr-first .hdr-word { transition-delay: .45s; } .hdr-first .hdr-link { transition-delay: var(--d); } .hdr-first .hdr-cta { transition: background-color .25s, opacity .5s .85s, transform .7s .85s var(--ease-out); } .hdr-first .hdr-menu { transition-delay: .85s; } .hdr-first .hdr:not(.is-mounted) .hdr-pill { clip-path: inset(0 calc(100% - 66px) 0 0 round 999px); } .hdr-first .hdr:not(.is-mounted) .hdr-word { opacity: 0; transform: translateX(-8px); } .hdr-first .hdr:not(.is-mounted) .hdr-link { opacity: 0; transform: translateY(10px); } .hdr-first .hdr:not(.is-mounted) .hdr-cta { opacity: 0; transform: scale(.9); } .hdr-first .hdr:not(.is-mounted) .hdr-menu { opacity: 0; } /* ───────────── Footer ───────────── */ .ftr { position: relative; font-family: var(--f-sans); color: var(--sand); } .ftr-band { position: relative; height: 150px; overflow: hidden; } .ftr-sun { position: absolute; left: 22%; top: 20px; width: 88px; height: 88px; border-radius: 50%; background: var(--sun); transform: translateY(90px); transition: transform 1.8s var(--ease-out); } .ftr.is-up .ftr-sun { transform: translateY(0px); } .ftr-band svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .ftr-body { background: var(--ink); margin-top: -1px; } .ftr-inner { max-width: 1240px; margin: 0 auto; padding: 24px clamp(20px,4vw,40px) 32px; } .ftr-cols { display: flex; flex-wrap: wrap; gap: 48px 64px; } .ftr-brand { flex: 2 1 320px; display: flex; flex-direction: column; gap: 18px; } .ftr-logo { display: flex; align-items: center; gap: 14px; } .ftr-logo img { width: 48px; height: 48px; display: block; } .ftr-logo span { font-family: var(--f-display); font-weight: 700; font-size: 32px; letter-spacing: -0.03em; } .ftr-city { margin: 0; font-size: 17px; color: var(--muted-dark); } .ftr-mail { align-self: flex-start; display: inline-flex; align-items: center; height: 52px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--ink-4); color: var(--sand); text-decoration: none; font-family: var(--f-display); font-weight: 600; font-size: clamp(18px,2vw,22px); transition: background-color .25s, border-color .25s, color .25s; } .ftr-mail:hover { background-color: var(--sand); border-color: var(--sand); color: var(--ink); } .ftr-nav { flex: 1 1 160px; display: flex; flex-direction: column; gap: 4px; } .ftr-nav > span { font-size: 13px; font-weight: 600; color: var(--muted-dark); margin-bottom: 8px; } .ftr-nav a { align-self: flex-start; padding: 6px 0; color: var(--sand); text-decoration: none; font-size: 17px; transition: transform .25s, color .25s; } .ftr-nav a:hover { transform: translateX(6px); color: var(--footer-hover); } .ftr-base { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--ink-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted-dark); } /* ───────────── Reduced motion ───────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; } } /* ═════════════════════════ Home ═════════════════════════ */ .home-hero { padding: clamp(24px,5vw,72px) 0 clamp(56px,8vw,112px); } .home-hero__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,460px),1fr)); gap: 48px clamp(32px,5vw,80px); align-items: center; } .home-hero__title { margin: 24px 0 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(48px,6.6vw,100px); line-height: .96; letter-spacing: -0.04em; text-wrap: balance; } .home-hero__title span { display: block; } .home-hero__lead { margin: 28px 0 0; max-width: 38ch; } .home-hero__btns { margin-top: 36px; } .home-scene { justify-self: center; width: min(100%,440px); aspect-ratio: 1; position: relative; border-radius: 50%; overflow: hidden; background: var(--ink); } .home-scene__sun { position: absolute; left: 53.8%; top: 14.8%; width: 31.6%; aspect-ratio: 1; border-radius: 50%; background: var(--sun); } .home-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Services: expanding panels */ .svc { scroll-margin-top: 96px; padding: 0 0 var(--section-y); } .svc__inner { max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px,2.4vw,32px); } .svc__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; margin-bottom: 36px; } .svc__head p { margin: 0; max-width: 34ch; font-size: 17px; line-height: 1.5; color: var(--text-3); } .svc__panels { display: flex; flex-direction: row; gap: 14px; } .svc-panel { position: relative; flex: 1 1 0%; min-width: 0; height: 560px; border-radius: 32px; text-decoration: none; overflow: hidden; transition: flex .75s var(--ease-panel); } .svc-panel--web { background: var(--sand-2); color: var(--ink); } .svc-panel--mkt { background: var(--clay); color: var(--on-clay); } .svc-panel--suite { background: var(--ink); color: var(--sand); } .svc-panel--web:hover { color: var(--ink); } .svc-panel--mkt:hover { color: var(--on-clay); } .svc-panel--suite:hover { color: var(--sand); } .svc-panel__inner { position: absolute; inset: 0; padding: clamp(24px,2.6vw,36px); display: flex; flex-direction: column; gap: 24px; } .svc-panel__top { display: flex; justify-content: flex-end; align-items: center; gap: 12px; } .svc-panel__pill { margin-right: auto; display: none; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; } .svc-panel--web .svc-panel__pill { background: var(--paper); } .svc-panel--mkt .svc-panel__pill { background: var(--clay-dark); } .svc-panel--suite .svc-panel__pill { background: var(--ink-2); } .svc-panel__plus { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 20px; transform: rotate(0deg); transition: transform .5s; } .svc-panel__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; } .svc-panel__mock { opacity: 0; transform: translateY(24px); transition: opacity .5s 0s, transform .7s 0s var(--ease-out); } .svc-panel--web .svc-panel__mock { width: min(480px,100%); } .svc-panel--mkt .svc-panel__mock { width: min(400px,100%); } .svc-panel--suite .svc-panel__mock { width: min(420px,100%); } .svc-panel__title { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 28px; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; transition: font-size .5s var(--ease-panel); } .svc-panel__text { margin: 12px 0 0; width: min(34ch,78vw); font-size: 17px; line-height: 1.5; opacity: 0; transition: opacity .5s 0s; } .svc-panel.is-on { flex: 2.6 1 0%; } .svc-panel.is-on .svc-panel__pill { display: inline-flex; } .svc-panel.is-on .svc-panel__plus { transform: rotate(45deg); } .svc-panel.is-on .svc-panel__mock { opacity: 1; transform: translateY(0px); transition: opacity .5s .25s, transform .7s .25s var(--ease-out); } .svc-panel.is-on .svc-panel__title { font-size: clamp(30px,2.8vw,42px); } .svc-panel.is-on .svc-panel__text { opacity: 1; transition: opacity .5s .25s; } @media (max-width: 899.98px) { .svc__panels { flex-direction: column; } .svc-panel, .svc-panel.is-on { flex: none; height: auto; } .svc-panel__inner { position: relative; } .svc-panel .svc-panel__pill { display: inline-flex; } .svc-panel .svc-panel__plus { transform: rotate(45deg); } .svc-panel .svc-panel__mock { opacity: 1; transform: translateY(0px); transition: opacity .5s .25s, transform .7s .25s var(--ease-out); } .svc-panel .svc-panel__title { font-size: clamp(30px,2.8vw,42px); } .svc-panel .svc-panel__text { opacity: 1; transition: opacity .5s .25s; } } .svc-browser { background: var(--paper); border-radius: 22px; overflow: hidden; } .svc-browser__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--sand-2); } .svc-browser__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); } .svc-browser__url { margin-left: 8px; padding: 4px 12px; border-radius: 999px; background: var(--sand); font-size: 12px; color: var(--text-3); } .svc-browser__host { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--text-3); } .svc-browser__host span { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); } .svc-browser__body { padding: 18px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: center; } .svc-browser__title { font-family: var(--f-display); font-weight: 700; font-size: 22px; line-height: 1.05; letter-spacing: -0.02em; } .svc-browser__sub { margin-top: 8px; font-size: 13px; color: var(--text-3); } .svc-browser__btn { margin-top: 12px; display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 600; } .svc-browser__img { aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--sand-2); } .svc-browser__img img, .svc-post__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .svc-post { position: relative; height: 316px; } .svc-post__back { position: absolute; left: 44%; top: 8px; width: 52%; height: 290px; border-radius: 22px; background: var(--peach); transform: rotate(5deg); } .svc-post__card { position: absolute; left: 0; top: 0; width: 64%; border-radius: 22px; background: var(--paper); color: var(--ink); padding: 12px 12px 16px; } .svc-post__img { aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; background: var(--sand-2); } .svc-post__text { padding: 16px 6px 0; font-size: 13px; line-height: 1.4; } .svc-post__pill { margin: 12px 6px 0; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 600; } .svc-post__pill span { width: 6px; height: 6px; border-radius: 50%; background: var(--sun); } .svc-flow { border-radius: 24px; background: var(--paper); padding: 10px 18px; } .svc-flow__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 6px; border-bottom: 1px solid var(--sand-2); } .svc-flow__head > span:first-child { font-size: 13px; font-weight: 700; color: var(--ink); } .svc-flow__auto { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-4); } .svc-flow__auto span { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); } .svc-flow__row { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 0; } .svc-flow__line { position: absolute; left: 19px; top: 52px; bottom: -12px; width: 2px; background: var(--line); } .svc-flow__row img { position: relative; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; display: block; } .svc-flow__main { flex: 1; min-width: 0; } .svc-flow__mod { display: block; font-size: 12px; font-weight: 600; color: var(--text-4); } .svc-flow__what { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--ink); } .svc-flow__time { flex: 0 0 auto; font-size: 12px; color: var(--text-4); } /* Why Red Mesa */ .why { background: var(--ink); color: var(--sand); padding: clamp(64px,8vw,120px) 0; overflow: hidden; position: relative; isolation: isolate; } .why__topo { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .why__topo rm-topo { display: block; width: 100%; height: 100%; } .why__stage { min-height: clamp(220px,26vw,320px); margin-top: 20px; display: flex; flex-direction: column; justify-content: flex-end; } .why__copy { opacity: 1; transform: translateY(0px); transition: opacity .3s, transform .45s var(--ease-out); } .why__copy.is-out { opacity: 0; transform: translateY(14px); } .why__title { font-family: var(--f-display); font-weight: 700; font-size: clamp(52px,8.4vw,132px); line-height: .92; letter-spacing: -0.045em; } .why__body { margin: 24px 0 0; max-width: 30ch; font-size: clamp(20px,2vw,26px); line-height: 1.4; color: var(--muted-dark-2); } .why__tabs { margin-top: clamp(40px,5vw,64px); padding-top: 28px; border-top: 1px solid var(--ink-3); display: flex; flex-wrap: wrap; gap: 10px; } .why-tab { position: relative; overflow: hidden; height: 52px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--ink-6); background-color: var(--ink-2); color: var(--sand); font-family: var(--f-sans); font-size: 16px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: color .25s, border-color .25s, background-color .25s; } .why-tab:hover { border-color: var(--sand); } .why-tab.is-on { border-color: var(--sand); background-color: var(--sand); color: var(--ink); } .why-tab__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--sun); transition: none; } .why-tab__label { position: relative; } /* Our work */ .work { padding: var(--section-y) 0 clamp(40px,5vw,64px); } .work__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; } .work__title { margin-top: 14px; max-width: 14ch; text-wrap: balance; } .work__text { margin: 18px 0 0; max-width: 42ch; font-size: 18px; line-height: 1.55; color: var(--text-2); } .work__rail-wrap { position: relative; margin-top: 40px; } .work__rail { box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr)); gap: clamp(12px,1.4vw,20px); padding: 0 clamp(16px,2.4vw,36px) 8px; } .work-card { min-width: 0; margin: 0; } .work-card__link, .work-card__link:hover { display: block; color: var(--ink); text-decoration: none; } .work-card__frame { border-radius: 28px; overflow: hidden; transition: transform .5s var(--ease-out); } .work-card__frame:hover { transform: scale(.98); } .work-card__shot { aspect-ratio: 4/3; } .work-card__cap { margin-top: 14px; display: flex; justify-content: space-between; gap: 12px; font-size: 16px; } .work-card__cap span:first-child { font-weight: 600; } .work-card__cap span:last-child { color: var(--text-3); } .brands__label { margin-top: 64px; font-size: 15px; font-weight: 600; color: var(--text-3); } .brands { margin-top: 20px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .brands__track { display: flex; gap: 12px; width: max-content; padding: 10px 0; will-change: transform; } .brand { flex: 0 0 auto; min-width: 220px; height: 100px; box-sizing: border-box; padding: 0 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; transition: transform .35s var(--ease-out); } .brand:hover { transform: translateY(-4px); } .brand--ink { background-color: var(--ink); } .brand--paper { background-color: var(--paper); } .brand--white { background-color: #FFFFFF; } .brand--tire { background-color: #F2EFE6; } .brand--magic { background-color: #F4F2EE; } .brand__fit { display: block; max-width: 100%; max-height: 60px; object-fit: contain; } .brand__fit--62 { max-height: 62px; } .brand__pal { display: block; height: 76px; width: auto; max-width: none; } .brand__erina { display: block; height: 72px; width: 72px; border-radius: 50%; object-fit: cover; mix-blend-mode: multiply; } .brand__erina-name { font-family: Georgia,serif; font-size: 21px; color: #3B2A1E; white-space: nowrap; } .brand__dial { display: block; height: 44px; width: auto; } .brand__infini { display: block; height: 40px; width: auto; } .brand__magic { display: block; height: 64px; width: auto; max-width: none; } .brand__name { font-family: var(--f-display); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; } .brand__name--dial { color: #2A006D; } .brand__tire { font-family: 'Big Shoulders Display','Arial Narrow',sans-serif; font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -0.005em; text-transform: uppercase; color: #0E1A2B; white-space: nowrap; } .brand__tire span { color: #E5A11A; } /* How it works */ .how { padding: var(--section-y) 0; } .how__title { margin: 14px 0 28px; max-width: 16ch; } .how__steps { --step-h: 260px; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); gap: 40px 24px; align-items: start; } .how-anim { transition: opacity .7s var(--dout), transform .9s var(--dout) var(--ease-out); } .js .how-anim { opacity: 0; transform: translateY(28px); } .js .how__steps.is-in .how-anim { opacity: 1; transform: translateY(0px); transition-delay: var(--din); } .how-step--2 { margin-top: 72px; } .how-step--3 { margin-top: 144px; } .how-step__top { min-height: var(--step-h); display: flex; flex-direction: column; justify-content: flex-end; } .how-step__title { margin: 28px 0 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(24px,2.2vw,30px); letter-spacing: -0.02em; line-height: 1.1; } @media (max-width: 899.98px) { .how__steps { --step-h: 0px; } .how-step--2, .how-step--3 { margin-top: 0px; } } .convo { display: flex; flex-direction: column; gap: 8px; } .convo__time { align-self: center; font-size: 12px; font-weight: 600; color: var(--text-5); } .convo__me { align-self: flex-end; max-width: 84%; padding: 14px 18px; border-radius: 22px 22px 6px 22px; background: var(--clay); color: var(--on-clay); font-size: 16px; line-height: 1.45; } .convo__me--short { padding: 12px 18px; } .convo__them { display: flex; align-items: flex-end; gap: 10px; max-width: 90%; } .convo__them img { flex: 0 0 32px; width: 32px; height: 32px; display: block; object-fit: contain; } .convo__them div { padding: 14px 18px; border-radius: 22px 22px 22px 6px; background: var(--paper); font-size: 16px; line-height: 1.45; } .convo__status { align-self: flex-end; margin-right: 6px; font-size: 12px; color: var(--text-5); } .quote-card { padding: 22px; border-radius: 24px; background: var(--paper); } .quote-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .quote-card__head > span:first-child { font-size: 14px; font-weight: 600; color: var(--text-3); } .quote-card__pill { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 600; } .quote-card__row { display: flex; justify-content: space-between; font-size: 16px; padding: 10px 0; border-bottom: 1px solid var(--sand-2); } .quote-card__row--first { margin-top: 16px; } .quote-card__row--last { border-bottom: 0; } .quote-card__row span:last-child { font-weight: 600; } .live-card { padding: 22px; border-radius: 24px; background: var(--ink); color: var(--sand); } .live-card__head { display: flex; align-items: center; gap: 10px; } .live-card__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sun); } .live-card__head span:last-child { font-size: 14px; font-weight: 600; } .live-card__title { margin-top: 14px; font-family: var(--f-display); font-weight: 600; font-size: 22px; line-height: 1.2; } .live-card__bar { margin-top: 18px; height: 8px; border-radius: 999px; background: var(--ink-3); overflow: hidden; } .live-card__bar div { width: 100%; height: 100%; border-radius: 999px; background: var(--coral); } /* Contact */ .contact { scroll-margin-top: 96px; position: relative; isolation: isolate; overflow: hidden; background: var(--clay); color: var(--on-clay); padding: clamp(64px,8vw,120px) 0; } .contact__sun { position: absolute; z-index: -1; left: clamp(-120px,-6vw,-40px); bottom: clamp(-260px,-16vw,-120px); width: clamp(320px,38vw,560px); aspect-ratio: 1; border-radius: 50%; background: var(--sun); } .contact__mesa { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(90px,11vw,160px); display: block; } .contact__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: 48px 72px; align-items: center; } .contact__intro { align-self: start; } .contact__title { margin: 22px 0 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(52px,7.4vw,120px); line-height: .9; letter-spacing: -0.045em; text-wrap: balance; } .contact__lead { margin: 24px 0 0; max-width: 34ch; font-size: clamp(18px,1.6vw,22px); line-height: 1.5; color: var(--on-clay); text-wrap: pretty; } .contact__links { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; } .contact__mail { display: inline-flex; align-items: center; height: 52px; padding: 0 22px; border-radius: 999px; background-color: var(--ink); color: var(--paper); font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; transition: background-color .25s, color .25s; } .contact__mail:hover { background-color: var(--paper); color: var(--ink); } .contact__city { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--on-clay-border); font-size: 16px; font-weight: 600; white-space: nowrap; } .contact__city span { width: 8px; height: 8px; border-radius: 50%; background: var(--sun); } .form-card { background: var(--paper); color: var(--ink); border-radius: 36px; padding: clamp(24px,3.4vw,44px); box-shadow: 0 40px 80px -40px rgba(24,23,26,.55), 0 0 0 8px rgba(251,244,234,.18); } .form-card__title { margin-bottom: 22px; font-family: var(--f-display); font-weight: 700; font-size: clamp(26px,2.4vw,34px); line-height: 1.05; letter-spacing: -0.025em; } .cf { display: flex; flex-direction: column; gap: 18px; } .cf[hidden], .cf-sending[hidden], .cf-sent[hidden], .cf-error[hidden], .cf__err[hidden] { display: none; } .cf__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,210px),1fr)); gap: 16px; } .cf__field { display: flex; flex-direction: column; gap: 8px; } .cf__label { font-size: 14px; font-weight: 600; } .cf__input, .cf__textarea { box-sizing: border-box; width: 100%; border: 1.5px solid var(--sand); background-color: var(--sand); font-family: var(--f-sans); font-size: 16px; color: var(--ink); outline: none; transition: border-color .2s, background-color .2s; } .cf__input { height: 52px; padding: 0 18px; border-radius: 16px; } .cf__textarea { padding: 14px 18px; border-radius: 20px; line-height: 1.5; resize: vertical; } .cf__input:focus, .cf__textarea:focus { border-color: var(--ink); background-color: var(--paper); } .cf__err { font-size: 14px; color: var(--link-hover); font-weight: 600; } .cf__needs { border: 0; margin: 0; padding: 0; } .cf__needs legend { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 600; } .cf__chips { display: flex; flex-wrap: wrap; gap: 8px; } .cf__chip { height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background-color: var(--sand); color: var(--ink); font-family: var(--f-sans); font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s; } .cf__chip:hover { background-color: var(--sand-2); } .cf__chip[aria-pressed="true"] { background-color: var(--ink); color: var(--paper); } .cf__submit { width: 100%; height: 64px; padding: 0 40px; border: 0; border-radius: 999px; background-color: var(--ink); color: var(--paper); font-family: var(--f-sans); font-weight: 700; font-size: 18px; cursor: pointer; white-space: nowrap; transition: background-color .25s, transform .25s; } .cf__submit:hover { background-color: var(--clay); transform: translateY(-2px); } .cf-sending { display: flex; flex-direction: column; gap: 14px; } .cf-sending div { border-radius: 999px; background: var(--sand-2); animation: rm-pulse 1.1s ease-in-out infinite; } .cf-sending div:nth-child(1) { height: 30px; width: 55%; } .cf-sending div:nth-child(2) { height: 16px; width: 90%; animation-delay: .15s; } .cf-sending div:nth-child(3) { height: 16px; width: 72%; animation-delay: .3s; } .cf-sending div:nth-child(4) { height: 56px; width: 150px; margin-top: 10px; animation-delay: .45s; } .cf-sent, .cf-error { display: flex; flex-direction: column; gap: 14px; } .cf-sent__sun { width: 56px; height: 56px; border-radius: 50%; background: var(--sun); } .cf-sent__title { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(28px,3vw,40px); line-height: 1.05; letter-spacing: -0.02em; } .cf-sent__text { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-2); } .cf-error__title { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(26px,2.6vw,34px); line-height: 1.05; letter-spacing: -0.02em; } .cf-error__row { display: flex; flex-wrap: wrap; gap: 10px; } .cf-error__mail { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 999px; background-color: var(--ink); color: var(--paper); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background-color .25s; } .cf-error__mail:hover { background-color: var(--clay); color: var(--paper); } .cf-outline { align-self: flex-start; height: 48px; padding: 0 22px; border: 1.5px solid var(--ink); border-radius: 999px; background-color: transparent; color: var(--ink); font-family: var(--f-sans); font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s; } .cf-outline:hover { background-color: var(--ink); color: var(--paper); } /* ═════════════════════════ Websites & Marketing ═════════════════════════ */ /* Shared bits */ .wm-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; } .wm-head--40 { margin-bottom: 40px; } .wm-head--32 { margin-bottom: 32px; } .wm-head--24 { gap: 24px; } .wm-h2 { margin-top: 14px; } .wm-side { margin: 0; max-width: 36ch; font-size: 17px; line-height: 1.5; color: var(--text-2); } .wm-side--40 { max-width: 40ch; } .wm-sk--d1 { animation-delay: .1s; } .wm-sk--d2 { animation-delay: .2s; } /* Hero */ .wm-hero { padding: clamp(24px,5vw,72px) 0 clamp(64px,8vw,112px); } .wm-hero__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,440px),1fr)); gap: 48px clamp(32px,5vw,80px); align-items: center; } .wm-hero__title { margin: 24px 0 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(46px,6vw,92px); line-height: .96; letter-spacing: -0.04em; text-wrap: balance; } .wm-hero__lead { margin: 26px 0 0; max-width: 40ch; } .wm-hero__btns { margin-top: 34px; } .wm-hero__cards { display: flex; flex-direction: column; gap: 12px; transition: opacity 1s .2s, transform 1.1s .2s var(--ease-out); } .js .wm-hero__cards { opacity: 0; transform: translateY(48px); } .js.is-mounted .wm-hero__cards { opacity: 1; transform: translateY(0px); } .wm-price { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; padding: clamp(22px,3vw,32px); border-radius: 32px; background-color: var(--paper); color: var(--ink); text-decoration: none; transition: transform .45s var(--ease-out), background-color .3s; } .wm-price:hover { transform: translateX(-8px); background-color: var(--paper-2); color: var(--ink); } .wm-price--clay { background-color: var(--clay); color: var(--on-clay); } .wm-price--clay:hover { background-color: var(--clay-hover); color: var(--on-clay); } .wm-price__label { font-size: 15px; font-weight: 600; color: var(--text-3); } .wm-price__desc { margin-top: 10px; max-width: 24ch; font-size: 17px; line-height: 1.45; } .wm-price__fig { text-align: right; } .wm-price__amt { font-family: var(--f-display); font-weight: 700; font-size: clamp(48px,5.2vw,76px); letter-spacing: -0.045em; line-height: .9; } .wm-price__unit { margin-top: 8px; font-size: 14px; color: var(--text-3); } .wm-price--clay .wm-price__label, .wm-price--clay .wm-price__unit { color: var(--on-clay-2); } /* Chapter slabs ("Websites", "Marketing") */ .wm-chapter { scroll-margin-top: 96px; margin: clamp(8px,1vw,12px) var(--slab-inset) clamp(12px,1.5vw,16px); border-radius: var(--slab-radius); padding: clamp(36px,4.5vw,64px) 0 clamp(60px,7.5vw,108px); } .wm-chapter--ink { background: var(--ink); color: var(--sand); } .wm-chapter--clay { background: var(--clay); color: var(--on-clay); } .wm-chapter__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px 48px; } .wm-chapter__title { margin: 18px 0 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(76px,13vw,200px); line-height: .95; letter-spacing: -0.055em; } .wm-chapter__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 30ch; } .wm-chapter__price { font-family: var(--f-display); font-weight: 700; font-size: clamp(34px,3.8vw,56px); line-height: 1; letter-spacing: -0.04em; } .wm-chapter__text { font-size: 17px; line-height: 1.5; color: var(--muted-dark-2); } .wm-chapter--clay .wm-chapter__text { color: var(--on-clay); } .wm-skip { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; background-color: var(--ink-2); color: var(--sand); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .25s, color .25s; } .wm-skip:hover { background-color: var(--ink-4); color: var(--sand); } .wm-chapter--clay .wm-skip { background-color: var(--clay-dark); color: var(--on-clay); } .wm-chapter--clay .wm-skip:hover { background-color: var(--clay-deeper); color: var(--on-clay); } /* What's included */ .wm-incl { background: var(--sand-2); padding: clamp(56px,7vw,104px) 0; } .wm-incl__grid { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 24px; align-items: center; } @media (max-width: 899.98px) { .wm-incl__grid { grid-template-columns: 1fr; } } .wm-items { display: flex; flex-direction: column; gap: 8px; } .wm-item { transform: translateX(0px); display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 10px 10px 20px; border: 1.5px solid var(--line); border-radius: 22px; background-color: var(--paper); color: var(--ink); text-align: left; cursor: pointer; font-family: var(--f-sans); box-shadow: 0 2px 0 #D6CCBC; transition: background-color .3s, color .3s, border-color .3s, box-shadow .3s, transform .3s; } .wm-item:hover { border-color: var(--ink); } .wm-item.is-on { transform: translateX(12px); border-color: var(--ink); background-color: var(--ink); color: var(--sand); box-shadow: 0 10px 24px -14px rgba(24,23,26,.6); } .wm-item__dot { flex: 0 0 10px; height: 10px; border-radius: 50%; background: var(--line); transition: background .3s; } .wm-item.is-on .wm-item__dot { background: var(--coral); } .wm-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .wm-item__label { font-size: 17px; font-weight: 600; line-height: 1.3; } .wm-item__hint { font-size: 13px; font-weight: 600; color: var(--clay); } .wm-item.is-on .wm-item__hint { color: var(--sun); } .wm-item__go { flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--sand); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; transition: background-color .3s, color .3s; } .wm-item.is-on .wm-item__go { background: var(--coral); color: var(--ink); } .wm-demo { position: relative; min-width: 0; } .wm-demo__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; } .wm-status { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 14px; border-radius: 999px; background-color: var(--ink); color: var(--sand); font-size: 15px; font-weight: 600; transition: background-color .45s, color .45s; } .wm-status__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); transition: background-color .45s; } .wm-status.is-pulse { background-color: var(--coral); color: var(--ink); } .wm-status.is-pulse .wm-status__dot { background: var(--ink); } .wm-seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--paper); } .wm-seg--sand { background: var(--sand); } .wm-seg__btn { height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background-color: transparent; color: var(--ink); font-family: var(--f-sans); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .25s, color .25s; } .wm-seg__btn.is-on { background-color: var(--ink); color: var(--sand); } .wm-seo { position: absolute; z-index: 3; left: 6%; right: 6%; top: 64px; padding: 16px 20px; border-radius: 22px; background: var(--paper); border: 2px solid var(--coral); transition: opacity .3s; } .wm-seo__url { font-size: 12px; color: var(--text-3); } .wm-seo__title { margin-top: 4px; font-size: 18px; font-weight: 600; color: #1F3F8A; } .wm-seo__desc { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--text-2); } /* Coral highlight ring on the part of the mock that matches the active item */ .wm-ring { outline: 3px solid rgba(248,78,54,0); box-shadow: 0 0 0 0 rgba(248,78,54,0), 0 0 0 rgba(248,78,54,0); transition: outline-color .3s, box-shadow .4s; } [data-hl="brand"] .wm-ring--brand, [data-hl="devices"] .wm-ring--devices, [data-hl="pages"] .wm-ring--pages, [data-hl="contact"] .wm-ring--contact, [data-hl="domain"] .wm-ring--domain, [data-hl="hosting"] .wm-ring--hosting { outline-color: var(--coral); box-shadow: 0 0 0 9px rgba(248,78,54,.22), 0 0 32px rgba(248,78,54,.35); } .wm-frame { width: 100%; max-width: 100%; margin: 0 auto; border-radius: 26px; overflow: hidden; background: var(--ink); outline-offset: 3px; transition: width .6s var(--ease-panel), outline-color .3s, box-shadow .4s; } [data-device="1"] .wm-frame { width: 380px; } .wm-frame__bar { height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px; } .wm-dots { display: flex; gap: 6px; } .wm-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-5); } .wm-url { flex: 1; min-width: 0; height: 28px; display: flex; align-items: center; padding: 0 12px; border-radius: 999px; background: var(--ink-2); color: var(--sand); font-size: 13px; white-space: nowrap; overflow: hidden; } .wm-host { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--ink-2); color: var(--sand); font-size: 12px; white-space: nowrap; } .wm-host__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sun); animation: none; } [data-hl="hosting"] .wm-host__dot { animation: rm-pulse 1s infinite; } /* Sample-site themes (THEMES in web-marketing.js) */ .wm-incl__grid[data-theme="0"] { --t-bg: #141414; --t-ink: #F5F0E8; --t-soft: #262422; --t-accent: #E8352B; --t-on-accent: #FFFFFF; --t-block: #2B2724; --t-font: 'Funnel Display', sans-serif; } .wm-incl__grid[data-theme="1"] { --t-bg: #F7F1E8; --t-ink: #1E1A17; --t-soft: #EADFD1; --t-accent: #C8281F; --t-on-accent: #FFFFFF; --t-block: #D9CBB8; --t-font: Georgia, 'Times New Roman', serif; } .wm-incl__grid[data-theme="2"] { --t-bg: #FFF6E0; --t-ink: #2A1A0E; --t-soft: #F5E3B8; --t-accent: #1F1F1F; --t-on-accent: #FFC720; --t-block: #F2C14E; --t-font: 'Funnel Sans', sans-serif; } .wm-vp { height: 540px; overflow-y: auto; background: var(--t-bg); color: var(--t-ink); transition: background-color .4s; } .wm-vp.is-loading .wm-site, .wm-vp:not(.is-loading) .wm-skel { display: none; } html:not(.js) .wm-vp .wm-site { display: block; } html:not(.js) .wm-vp .wm-skel { display: none; } .wm-skel { padding: 20px; display: flex; flex-direction: column; gap: 22px; } .wm-skel__row { display: flex; justify-content: space-between; } .wm-skel__hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; } .wm-skel__col { display: flex; flex-direction: column; gap: 12px; padding-top: 10px; } .wm-sk { background: #DDD6CA; } .wm-sk--logo { width: 140px; height: 20px; border-radius: 999px; } .wm-sk--nav { width: 30%; height: 14px; border-radius: 999px; animation-delay: .1s; } .wm-sk--l1 { height: 36px; width: 90%; border-radius: 12px; animation-delay: .15s; } .wm-sk--l2 { height: 36px; width: 65%; border-radius: 12px; animation-delay: .2s; } .wm-sk--btn { height: 42px; width: 140px; border-radius: 999px; animation-delay: .3s; } .wm-sk--img { aspect-ratio: 4/3; border-radius: 20px; animation-delay: .2s; } .wm-sk--block { height: 60px; border-radius: 16px; } .wm-sk--d35 { animation-delay: .35s; } .wm-sk--d45 { animation-delay: .45s; } .wm-site { font-family: var(--t-font); } .wm-site__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; outline-offset: -4px; border-radius: 16px; } .wm-site__name { font-weight: 700; font-size: 19px; } .wm-site__menu { display: none; font-family: var(--f-sans); font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--t-ink); } .wm-site__links { display: flex; gap: 16px; font-family: var(--f-sans); font-size: 14px; } .wm-site__links span { padding-bottom: 3px; border-bottom: 2px solid transparent; transition: border-color .3s; } .wm-site__links span.is-on { border-bottom-color: var(--t-accent); } .wm-site__hero { margin: 4px 12px; padding: 24px 16px; border-radius: 22px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items: center; } .wm-site__addr { font-family: var(--f-sans); font-size: 12px; font-weight: 600; color: var(--t-accent); } .wm-site__headline { margin-top: 10px; font-weight: 700; font-size: 50px; line-height: 1.02; letter-spacing: -0.02em; } .wm-site__intro { margin: 12px 0 0; font-family: var(--f-sans); font-size: 15px; line-height: 1.5; opacity: .85; } .wm-site__order { margin-top: 18px; display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 999px; background: var(--t-accent); color: var(--t-on-accent); font-family: var(--f-sans); font-weight: 600; font-size: 14px; } .wm-site__img { aspect-ratio: 4/3; border-radius: 20px; overflow: hidden; background: var(--t-block); } .wm-site__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .wm-site__menu-list { padding: 20px 28px 8px; font-family: var(--f-sans); } .wm-site__h { font-family: var(--t-font); font-weight: 700; font-size: 22px; margin-bottom: 6px; } .wm-flv { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--t-soft); } .wm-flv:last-child { border-bottom: 0; } .wm-flv__name { display: block; font-weight: 600; } .wm-flv__desc { font-size: 13px; opacity: .75; } .wm-flv__heat { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; background: var(--t-soft); font-size: 12px; font-weight: 600; } .wm-site__contact { margin: 12px; padding: 16px; border-radius: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-family: var(--f-sans); } .wm-site__map { min-height: 200px; border-radius: 18px; background: var(--t-soft); position: relative; overflow: hidden; } .wm-site__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .wm-site__form { display: flex; flex-direction: column; gap: 8px; } .wm-site__form-title { font-family: var(--t-font); font-weight: 700; font-size: 19px; } .wm-site__field { height: 38px; border-radius: 12px; background: var(--t-soft); padding: 0 12px; display: flex; align-items: center; font-size: 13px; opacity: .8; } .wm-site__send { align-self: flex-start; height: 38px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; background: var(--t-ink); color: var(--t-bg); font-weight: 600; font-size: 13px; } .wm-site__foot { padding: 16px 28px 22px; font-family: var(--f-sans); font-size: 13px; opacity: .75; } /* Phone layout of the sample site */ [data-device="1"] .wm-skel__hero, [data-device="1"] .wm-site__hero, [data-device="1"] .wm-site__contact { grid-template-columns: 1fr; } [data-device="1"] .wm-site__headline { font-size: 32px; } [data-device="1"] .wm-site__menu { display: inline; } [data-device="1"] .wm-site__links { display: none; } /* Recent sites rail */ .wm-recent { padding: var(--section-y) 0 0; } .wm-rail-btns { display: flex; gap: 8px; } .wm-rail-btn { min-width: 132px; height: 52px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--ink); background-color: transparent; color: var(--ink); font-family: var(--f-sans); font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap; transition: background-color .25s, color .25s; } .wm-rail-btn:hover { background-color: var(--ink); color: var(--sand); } .wm-rail { margin-top: 28px; overflow: hidden; } .wm-rail__track { display: flex; gap: 16px; width: max-content; padding: 12px 0 16px max(clamp(20px,4vw,40px),calc((100vw - 1240px) / 2 + 40px)); will-change: transform; } .wm-sc { flex: 0 0 clamp(320px,42vw,580px); display: block; border-radius: 28px; overflow: hidden; background: var(--ink); color: var(--sand); text-decoration: none; transition: transform .5s var(--ease-out); } .wm-sc:hover { transform: translateY(-6px); color: var(--sand); } .wm-sc__bar { height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 14px; } .wm-sc__bar > span:not(.wm-sc__url) { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-5); } .wm-sc__url { margin-left: 8px; flex: 1; min-width: 0; height: 24px; display: flex; align-items: center; padding: 0 12px; border-radius: 999px; background: var(--ink-2); font-size: 12px; white-space: nowrap; overflow: hidden; } .live--wide { aspect-ratio: 16/10; } .live--wide iframe { height: 800px; } .wm-js-mock { aspect-ratio: 16/10; } .wm-js-mock .js-mock__copy { bottom: 6cqw; } /* FAQ */ .wm-faq { padding: var(--section-y) 0 0; } .wm-faq__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr)); gap: 32px 64px; align-items: start; } .wm-faq__list { display: flex; flex-direction: column; gap: 10px; } .wm-qa { border-radius: 26px; background: var(--paper); overflow: hidden; } .wm-qa__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 24px; border: 0; background-color: transparent; color: var(--ink); font-family: var(--f-sans); font-size: 18px; font-weight: 600; text-align: left; cursor: pointer; transition: background-color .25s; } .wm-qa__q:hover { background-color: #EFE9DF; } .wm-qa__icon { flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--sand); display: flex; align-items: center; justify-content: center; font-size: 20px; transform: rotate(0deg); transition: transform .5s var(--ease-panel), background-color .4s; } .wm-qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-panel); } .wm-qa__clip { overflow: hidden; min-height: 0; } .wm-qa__body { padding: 0 24px 24px; opacity: 0; transform: translateY(-8px); transition: opacity .45s, transform .55s var(--ease-panel); } .wm-qa__body p { margin: 0; max-width: 56ch; font-size: 17px; line-height: 1.55; color: var(--text-2); } .wm-qa.is-open .wm-qa__icon { background: var(--clay); transform: rotate(45deg); } .wm-qa.is-open .wm-qa__a { grid-template-rows: 1fr; } .wm-qa.is-open .wm-qa__body { opacity: 1; transform: translateY(0px); } /* Site updates */ .wm-updates { scroll-margin-top: 96px; padding: var(--section-y) 0; } .wm-updates__card { border-radius: 36px; background: var(--ink); color: var(--sand); padding: clamp(28px,4vw,56px); display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr)); gap: 32px 64px; align-items: center; } .wm-updates__title { margin: 14px 0 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(34px,4vw,56px); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; } .wm-updates__lead { margin: 18px 0 0; max-width: 40ch; font-size: clamp(18px,1.5vw,20px); line-height: 1.55; color: var(--muted-dark-2); text-wrap: pretty; } .wm-opts { display: flex; flex-direction: column; gap: 10px; } .wm-opt { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 22px; background: var(--ink-2); } .wm-opt--link { background-color: var(--clay); color: var(--on-clay); text-decoration: none; transition: transform .35s var(--ease-out), background-color .3s; } .wm-opt--link:hover { transform: translateX(4px); background-color: var(--clay-hover); color: var(--on-clay); } .wm-opt__name { display: block; font-weight: 600; font-size: 17px; } .wm-opt__note { display: block; margin-top: 4px; font-size: 14px; color: var(--muted-dark); } .wm-opt--link .wm-opt__note { color: var(--on-clay-2); } .wm-opt__price { font-family: var(--f-display); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; } .wm-opt__fig { text-align: right; } .wm-opt__fig .wm-opt__price { display: block; } .wm-opt__per { display: block; font-size: 13px; color: var(--muted-dark); white-space: nowrap; } /* Marketing services */ .wm-svc { padding: clamp(56px,7vw,96px) 0 var(--section-y); } .wm-svc__title { max-width: 15ch; text-wrap: balance; } .wm-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .wm-tab { height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background-color: var(--paper); color: var(--ink); font-family: var(--f-sans); font-size: 16px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .3s, color .3s; } .wm-tab:hover { background-color: var(--sand-2); } .wm-tab.is-on { background-color: var(--ink); color: var(--sand); } .wm-svc__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: 16px; } .wm-svc__media { position: relative; aspect-ratio: 5/4; border-radius: 36px; overflow: hidden; background: var(--sand-2); } .wm-svc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .wm-svc__media img[hidden] { display: none; } .wm-svc__card { border-radius: 36px; background: var(--clay); color: var(--on-clay); padding: clamp(28px,4vw,48px); display: flex; flex-direction: column; gap: 32px; } .wm-svc__count { font-size: 15px; font-weight: 600; color: var(--on-clay-2); } .wm-svc__body { margin-block: auto; opacity: 1; transform: translateY(0px); transition: opacity .35s, transform .5s var(--ease-out); } .wm-svc__body.is-out { opacity: 0; transform: translateY(12px); } .wm-svc__h { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(34px,3.8vw,56px); line-height: 1; letter-spacing: -0.035em; } .wm-svc__p { margin: 18px 0 0; max-width: 34ch; font-size: clamp(18px,1.6vw,21px); line-height: 1.5; } /* Content plan demo */ .wm-plan { background: var(--sand-2); padding: clamp(56px,7vw,104px) 0; } .wm-plan__title { max-width: 14ch; } .wm-board { border-radius: 32px; background: var(--paper); overflow: hidden; } .wm-board__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 16px 20px; border-bottom: 1px solid var(--sand-2); } .wm-client { display: flex; align-items: center; gap: 12px; } .wm-client__avatar { width: 36px; height: 36px; border-radius: 50%; background: #2F4A3A; } .wm-client__name { font-weight: 700; font-size: 16px; } .wm-client__sub { font-size: 13px; color: var(--text-5); } .wm-board__main { display: flex; flex-wrap: wrap; } .wm-cal { flex: 3 1 620px; min-width: 0; overflow-x: auto; padding: 12px; } .wm-weeks { display: grid; grid-template-columns: repeat(4,minmax(180px,1fr)); gap: 8px; min-width: 760px; } .wm-week { border-radius: 22px; background: var(--sand); min-height: 380px; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .wm-week__name { padding: 8px 8px 6px; font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; } .wm-week__sk { height: 104px; border-radius: 18px; background: var(--sand-2); } .wm-week__empty { padding: 18px 12px; border-radius: 18px; border: 1.5px dashed var(--line-3); text-align: center; font-size: 13px; color: var(--text-5); } .wm-card { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 14px; border: 0; border-radius: 18px; background-color: var(--paper); color: var(--ink); text-align: left; cursor: pointer; font-family: var(--f-sans); transition: transform .3s var(--ease-out), background-color .3s, color .3s; } .wm-card:hover { transform: translateY(-3px); } .wm-card.is-on { background-color: var(--ink); color: var(--sand); } .wm-card__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .wm-card__type { padding: 3px 10px; border-radius: 999px; background: var(--sand); font-size: 12px; font-weight: 600; } .wm-card.is-on .wm-card__type { background: var(--ink-2); } .wm-card__dot { width: 9px; height: 9px; border-radius: 50%; } .wm-card__title { font-size: 15px; font-weight: 600; line-height: 1.25; } .wm-card__platform { font-size: 12px; color: var(--text-5); } .wm-card.is-on .wm-card__platform { color: var(--muted-dark); } .wm-card[hidden], .wm-week__empty[hidden], .wm-detail__f[hidden] { display: none; } .wm-detail { flex: 1 1 300px; padding: 20px; display: flex; flex-direction: column; gap: 16px; border-left: 1px solid var(--sand-2); } .wm-detail__sk { background: var(--sand-2); } .wm-detail__sk--1 { height: 14px; width: 45%; border-radius: 999px; } .wm-detail__sk--2 { height: 26px; width: 85%; border-radius: 999px; } .wm-detail__sk--3 { height: 180px; border-radius: 24px; } .wm-detail__when { font-size: 13px; color: var(--text-5); } .wm-detail__title { font-family: var(--f-display); font-weight: 700; font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; } .wm-idea { border-radius: 24px; background: #2F4A3A; color: #F3EEE4; padding: 20px; display: flex; flex-direction: column; gap: 12px; min-height: 170px; } .wm-idea__tag { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: #3D5A48; font-size: 12px; font-weight: 600; } .wm-idea__text { font-family: Georgia, serif; font-size: 20px; line-height: 1.35; } .wm-detail__chips { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; font-weight: 600; } .wm-detail__chips span { padding: 6px 12px; border-radius: 999px; background: var(--sand); } .wm-detail__status { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; } .wm-detail__dot { width: 10px; height: 10px; border-radius: 50%; } .wm-detail__actions { display: flex; flex-wrap: wrap; gap: 8px; } .wm-approve, .wm-suggest { height: 44px; padding: 0 20px; border-radius: 999px; font-family: var(--f-sans); font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap; transition: background-color .25s; } .wm-approve { border: 0; background-color: var(--ink); color: var(--paper); } .wm-approve:hover { background-color: var(--clay); } .wm-suggest { border: 1.5px solid var(--ink); background-color: transparent; color: var(--ink); } .wm-suggest:hover { background-color: var(--sand-2); } .wm-plan__summary { margin-top: auto; padding: 12px 16px; border-radius: 16px; background: var(--sand); font-size: 14px; } /* Loading state of the board (planLoading) */ .wm-board.is-loading .wm-card, .wm-board.is-loading .wm-week__empty, .wm-board.is-loading .wm-detail__f, .wm-board.is-loading .wm-plan__summary, .wm-board:not(.is-loading) .wm-week__sk, .wm-board:not(.is-loading) .wm-detail__sk { display: none; } html:not(.js) .wm-board.is-loading .wm-card { display: flex; } html:not(.js) .wm-board.is-loading .wm-detail__f { display: flex; } html:not(.js) .wm-board.is-loading .wm-detail__when, html:not(.js) .wm-board.is-loading .wm-detail__title, html:not(.js) .wm-board.is-loading .wm-plan__summary { display: block; } html:not(.js) .wm-board .wm-week__sk, html:not(.js) .wm-board .wm-detail__sk { display: none; } .wm-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 14px 20px; border-top: 1px solid var(--sand-2); font-size: 13px; font-weight: 600; } .wm-legend > span { display: flex; align-items: center; gap: 8px; } .wm-legend__dot { width: 9px; height: 9px; border-radius: 50%; } /* Status colours (ST_DOT) */ .wm-st[data-st="Idea"] { background: #D6CCBC; } .wm-st[data-st="Planned"] { background: #8A8070; } .wm-st[data-st="Ready for review"] { background: #FFC720; } .wm-st[data-st="Approved"] { background: #C4472F; } .wm-st[data-st="Change suggested"] { background: #18171A; } /* Monthly package */ .wm-pkg { padding: var(--section-y) 0 0; } .wm-pkg__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: 40px 72px; align-items: center; } .wm-pkg__title { margin: 14px 0 0; font-family: var(--f-display); font-weight: 700; letter-spacing: -0.05em; line-height: .9; } .wm-pkg__amt { display: block; font-size: clamp(76px,10.5vw,164px); } .wm-pkg__per { display: block; margin-top: 10px; font-size: clamp(26px,2.8vw,40px); letter-spacing: -0.02em; color: var(--text-3); } .wm-pkg__body { display: flex; flex-direction: column; gap: 22px; } .wm-pkg__lead { margin: 0; max-width: 40ch; font-size: clamp(18px,1.6vw,21px); line-height: 1.55; color: var(--text-2); } .wm-chips { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,230px),1fr)); gap: 8px; max-width: 480px; } .wm-chip { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; background: var(--paper); font-size: 15px; font-weight: 600; } .wm-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--clay); } .wm-pkg__cta { align-self: flex-start; padding: 0 30px; } /* Gallery (always 3 columns) */ .wm-gallery { padding: var(--section-y) 0; } .wm-gallery__title { margin: 14px 0 40px; } .wm-gal { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; } .wm-gal__tile { aspect-ratio: 1; border-radius: 28px; overflow: hidden; background: var(--sand-2); transition: transform .5s var(--ease-out); } .wm-gal__tile:hover { transform: scale(.97); } .wm-gal__tile img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Closing CTA */ .wm-cta { background: var(--ink); color: var(--sand); overflow: hidden; position: relative; } .wm-cta__inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: clamp(64px,8vw,112px) var(--gutter) clamp(150px,16vw,220px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px 64px; } .wm-cta__title { margin: 0; max-width: 14ch; font-family: var(--f-display); font-weight: 700; font-size: clamp(40px,5.4vw,80px); line-height: .98; letter-spacing: -0.04em; text-wrap: balance; } .wm-cta__btn { display: inline-flex; align-items: center; height: 60px; padding: 0 32px; border-radius: 999px; background-color: var(--sand); color: var(--ink); font-weight: 600; font-size: 17px; text-decoration: none; white-space: nowrap; transition: background-color .25s; } .wm-cta__btn:hover { background-color: var(--coral); color: var(--ink); } .wm-cta__sun { position: absolute; left: 14%; bottom: clamp(60px,7vw,100px); width: clamp(70px,8vw,110px); aspect-ratio: 1; border-radius: 50%; background: var(--sun); } .wm-cta__mesa { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(110px,13vw,180px); display: block; } /* ═════════════════════════ RedSuite ═════════════════════════ */ .rs-contents { display: contents; } /* Hero */ .rs-hero { padding: clamp(24px,5vw,72px) 0 clamp(64px,8vw,112px); } .rs-hero__row { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; } .rs-hero__lead { margin: 0; max-width: 40ch; font-size: clamp(18px,1.5vw,21px); line-height: 1.55; color: var(--text-2); } /* Live demo slab */ .rs-demo { scroll-margin-top: 96px; background: var(--sand-2); padding: clamp(56px,7vw,104px) 0; } .rs-demo__intro { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: 32px 64px; align-items: end; margin-bottom: 40px; } .rs-demo__h2 { margin: 14px 0 20px; font-family: var(--f-display); font-weight: 700; font-size: clamp(36px,4.4vw,62px); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; } .rs-demo__p { margin: 0; max-width: 44ch; font-size: clamp(17px,1.5vw,20px); line-height: 1.55; color: var(--text-2); } .rs-demo__note { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--text-3); } /* Toggle switches */ .rs-switches { display: flex; flex-direction: column; gap: 8px; } .rs-sw-row { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 22px; background: var(--paper); } .rs-sw { flex: 0 0 52px; height: 30px; padding: 0; border: 0; border-radius: 999px; background-color: var(--line-3); position: relative; cursor: pointer; transition: background-color .3s; } .rs-sw[aria-checked="true"] { background-color: var(--ink); } .rs-sw__knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); transform: translateX(0px); transition: transform .35s var(--ease-panel); } .rs-sw[aria-checked="true"] .rs-sw__knob { transform: translateX(22px); } .rs-sw-title { font-weight: 700; font-size: 17px; } .rs-sw-desc { margin-top: 2px; font-size: 15px; line-height: 1.4; color: var(--text-3); } /* App frame */ .rs-app { border-radius: 36px; background: var(--paper); color: var(--ink); padding: clamp(10px,1.4vw,14px); box-shadow: 0 30px 60px -40px rgba(24,23,26,.35); } .rs-app__bar { border-radius: 26px; background: var(--ink); color: var(--paper); padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 14px; } .rs-app__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding: 2px 6px 0; } .rs-app__brand { display: flex; align-items: center; gap: 12px; } .rs-app__brand img { flex: 0 0 32px; width: 32px; height: 32px; display: block; object-fit: contain; } .rs-app__name { font-family: var(--f-display); font-weight: 700; font-size: 20px; } .rs-app__div { width: 1px; height: 18px; background: var(--ink-5); } .rs-app__shop { font-size: 14px; color: var(--muted-dark-2); } .rs-host { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--ink-2); font-size: 13px; color: var(--muted-dark-2); } .rs-host__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); } .rs-host.is-self .rs-host__dot { background: var(--sun); } /* Module nav */ .rs-mnav { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px; } .rs-mnav__btn { min-width: 0; flex: 0 0 auto; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 8px; border: 0; border-radius: 999px; font-family: var(--f-sans); text-align: left; cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s; background-color: transparent; color: var(--paper); } .rs-mnav__btn.is-active { background-color: var(--paper); color: var(--ink); } .rs-mnav__btn:hover { box-shadow: inset 0 0 0 1.5px var(--ink-5); } .rs-mnav__btn > img { flex: 0 0 36px; width: 36px; height: 36px; display: block; object-fit: contain; } .rs-mnav__logo { flex: 0 0 36px; width: 36px; height: 36px; display: block; border-radius: 50%; background-size: cover; background-position: center; opacity: 1; filter: none; transition: opacity .3s, filter .3s; } .rs-mnav__btn.is-off .rs-mnav__logo { opacity: .4; filter: grayscale(1); } .rs-mnav__logo--leads { background-image: url(/assets/module-tasks.png); } .rs-mnav__logo--invoices { background-image: url(/assets/module-invoices.png); } .rs-mnav__logo--inventory { background-image: url(/assets/module-inventory.png); } .rs-mnav__logo--social { background-image: url(/assets/module-social.png); } .rs-mnav__txt { min-width: 0; } .rs-mnav__name { display: block; font-weight: 600; font-size: 15px; white-space: nowrap; } .rs-mnav__sub { display: block; font-size: 12px; white-space: nowrap; color: var(--muted-dark); } .rs-mnav__btn.is-off .rs-mnav__sub { color: var(--text-5); } .rs-mnav__btn.is-active .rs-mnav__sub { color: var(--text-4); } .rs-mnav__req { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 8px; border-radius: 999px; color: var(--muted-dark-2); text-decoration: none; font-size: 15px; font-weight: 600; white-space: nowrap; transition: color .25s, box-shadow .25s; } .rs-mnav__req:hover { color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink-5); } .rs-mnav__plus { flex: 0 0 36px; height: 36px; border-radius: 50%; border: 1.5px dashed var(--text-4); display: flex; align-items: center; justify-content: center; font-size: 18px; } /* Workspace + tiles */ .rs-work { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; } .rs-work__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; } .rs-tiles { display: grid; grid-template-columns: repeat(auto-fill,minmax(max(280px,calc(50% - 6px)),1fr)); gap: 12px; } .rs-tiles.is-single { grid-template-columns: minmax(0,1fr); } .rs-tile { border-radius: 26px; background: var(--sand); padding: 14px; min-height: 340px; display: flex; flex-direction: column; gap: 10px; } .rs-tile__head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 6px; } .rs-tile__head img { flex: 0 0 40px; width: 40px; height: 40px; display: block; border-radius: 50%; } .rs-tile__ttl { flex: 1; min-width: 0; } .rs-tile__name { font-weight: 700; font-size: 16px; } .rs-tile__meta { font-size: 13px; color: var(--text-4); } .rs-newlead { height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background-color: var(--paper-2); color: var(--ink); font-family: var(--f-sans); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .25s; } .rs-newlead:hover { background-color: var(--line); } .rs-skel { border-radius: 20px; background: var(--paper-2); animation: rm-pulse 1.1s infinite 0s; } .rs-skel:nth-child(2) { animation-delay: .15s; } .rs-skel:nth-child(3) { animation-delay: .3s; } .rs-skel--112 { height: 112px; } .rs-skel--96 { height: 96px; } .rs-skel--88 { height: 88px; } .rs-skel-shim { height: 84px; border-radius: 20px; background: linear-gradient(90deg,#E2DACD 25%,#F3EEE6 50%,#E2DACD 75%); background-size: 200% 100%; animation: rm-shim 1.8s ease-in-out infinite; } .rs-off { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; border-radius: 20px; border: 1.5px dashed var(--line); text-align: center; } .rs-off > span { font-size: 15px; color: var(--text-4); } .rs-turnon { height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background-color: var(--ink); color: var(--paper); font-family: var(--f-sans); font-weight: 600; font-size: 14px; cursor: pointer; } .rs-cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 10px; } .rs-card { padding: 16px; border-radius: 20px; background: var(--paper-2); } .rs-row { display: flex; justify-content: space-between; gap: 10px; } .rs-row--c { align-items: center; } .rs-row--b { align-items: baseline; } .rs-sm { font-size: 13px; color: var(--text-4); } .rs-b15 { font-weight: 700; font-size: 15px; } .rs-pill { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; } .rs-cbtn { margin-top: 12px; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background-color: var(--ink); color: var(--paper); font-family: var(--f-sans); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background-color .25s; } /* Lead cards */ .rs-lead { transition: opacity .4s, transform .45s var(--ease-panel); } .rs-lead__value { font-size: 14px; color: var(--text-2); } .rs-lead__who { margin-top: 4px; } .rs-lead__task { margin-top: 10px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--sand); font-size: 13px; } .rs-lead__box { flex: 0 0 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--clay); } .rs-lead__lbl { color: var(--text-4); } .rs-won:hover { background-color: var(--coral); } /* Invoice cards */ .rs-inv { transition: opacity .5s, transform .55s var(--ease-panel); } .rs-inv .rs-pill { background: var(--coral); color: var(--ink); } .rs-inv.is-paid .rs-pill { background: var(--sand-2); color: var(--text-3); } .rs-inv__row2 { margin-top: 6px; } .rs-inv__amt { font-size: 15px; font-weight: 600; } .rs-inv__from { margin-top: 4px; } .rs-pay { margin-top: 12px; height: 36px; padding: 0 16px; border: 1px solid var(--line-3); border-radius: 999px; background-color: transparent; color: var(--ink); font-family: var(--f-sans); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .25s, color .25s; } .rs-pay:hover { background-color: var(--ink); color: var(--paper); } /* Stock cards */ .rs-stock { transition: background-color .6s; } .rs-stock.is-flash { background: #F6D6CB; } .rs-stock__qty { font-family: var(--f-display); font-weight: 700; font-size: 22px; } .rs-stock__track { margin-top: 10px; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; } .rs-stock__fill { height: 100%; border-radius: 999px; background: var(--ink); transition: width .6s var(--ease-panel), background-color .3s; } .rs-stock.is-low .rs-stock__fill { background: var(--clay); } .rs-stock__foot { margin-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--text-4); } .rs-reorder { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background-color: var(--coral); color: var(--paper); font-family: var(--f-sans); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; } /* Post cards */ .rs-post { transition: opacity .45s, transform .5s var(--ease-panel); } .rs-post .rs-pill { white-space: nowrap; } .rs-pill--scheduled { background: var(--sand-2); color: var(--ink); } .rs-pill--approval { background: var(--sun); color: var(--ink); } .rs-pill--idea { background: var(--ink); color: var(--paper); } .rs-post__title { margin-top: 8px; font-weight: 700; font-size: 15px; line-height: 1.3; } .rs-approve:hover { background-color: var(--sun); } /* Custom builds */ .rs-custom { scroll-margin-top: 96px; padding: var(--section-y) 0; } .rs-custom__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: 48px 72px; align-items: center; } .rs-custom__h2 { margin: 14px 0 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(40px,5vw,72px); line-height: .98; letter-spacing: -0.04em; text-wrap: balance; } .rs-custom__p { margin: 22px 0 0; max-width: 40ch; font-size: clamp(18px,1.5vw,20px); line-height: 1.55; color: var(--text-2); } .rs-custom__p + .rs-custom__p { margin-top: 14px; } .rs-custom__cta { margin-top: 32px; } .rs-yours { border-radius: 36px; background: var(--ink); color: var(--sand); padding: clamp(20px,3vw,32px); } .rs-yours__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 4px 18px; } .rs-yours__brand { display: flex; align-items: center; gap: 12px; } .rs-yours__brand img { flex: 0 0 30px; width: 30px; height: 30px; display: block; object-fit: contain; } .rs-yours__brand span { font-family: var(--f-display); font-weight: 700; font-size: 18px; } .rs-yours__muted { font-size: 13px; color: var(--muted-dark); } .rs-yours__list { display: flex; flex-direction: column; gap: 8px; } .rs-yours__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; border-radius: 22px; background: var(--ink-2); } .rs-yours__row > span:first-child { font-weight: 600; font-size: 17px; } .rs-idea { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 22px; border: 1.5px dashed var(--ink-5); background-color: rgba(255,199,32,0); color: var(--sand); transition: background-color .45s, color .45s, border-color .45s; } .rs-idea.is-solid { border-color: var(--sun); background-color: var(--sun); color: var(--ink); } .rs-idea__txt { display: flex; align-items: center; gap: 2px; font-weight: 600; font-size: 17px; min-height: 24px; } .rs-idea__caret { width: 2px; height: 20px; border-radius: 2px; background: currentColor; animation: rm-blink 1s steps(1) infinite; } .rs-idea__tag { font-size: 13px; font-weight: 600; white-space: nowrap; } /* Custom AI slab */ .rs-ai { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--sand); padding: clamp(56px,7vw,104px) 0; } .rs-ai__topo { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .rs-ai__topo rm-topo { display: block; width: 100%; height: 100%; } .rs-ai__intro { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: 24px 64px; align-items: end; margin-bottom: 40px; } .rs-ai__h2 { margin: 14px 0 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(44px,6vw,92px); line-height: .95; letter-spacing: -0.045em; } .rs-ai__p { margin: 0; max-width: 44ch; font-size: clamp(17px,1.5vw,20px); line-height: 1.55; color: var(--muted-dark-2); text-wrap: pretty; } .rs-ai__pick { margin-bottom: 14px; } .rs-ai__picklbl { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 15px; font-weight: 600; color: var(--muted-dark-2); } .rs-ai__picklbl span { width: 8px; height: 8px; border-radius: 50%; background: var(--sun); } .rs-aitabs { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr)); gap: 8px; } .rs-aitab { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 12px 12px 12px 18px; border: 1.5px solid var(--ink-5); border-radius: 22px; background-color: #232124; color: var(--sand); font-family: var(--f-sans); font-size: 15px; font-weight: 600; line-height: 1.25; text-align: left; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s, transform .3s; } .rs-aitab[aria-selected="true"] { background-color: var(--sand); color: var(--ink); border-color: var(--sand); } .rs-aitab:hover { border-color: var(--sand); transform: translateY(-2px); } .rs-aitab__txt { display: flex; flex-direction: column; gap: 3px; } .rs-aitab__hint { font-size: 12px; font-weight: 700; color: var(--sun); } .rs-aitab[aria-selected="true"] .rs-aitab__hint { color: var(--clay); } .rs-aitab__ic { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--ink-3); color: var(--sand); display: flex; align-items: center; justify-content: center; font-size: 16px; transition: background-color .3s, color .3s; } .rs-aitab[aria-selected="true"] .rs-aitab__ic { background: var(--coral); color: var(--ink); } .rs-aicard { border-radius: 32px; background: var(--paper); color: var(--ink); padding: clamp(18px,2.6vw,32px); min-height: 460px; display: flex; flex-direction: column; gap: 18px; } .rs-ai-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; } .rs-ai-kicker { font-size: 14px; color: var(--text-5); } .rs-ai-title { margin-top: 6px; font-family: var(--f-display); font-weight: 700; font-size: clamp(22px,2.2vw,28px); line-height: 1.1; letter-spacing: -0.02em; } .rs-ai-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr)); gap: 14px; } .rs-ai-light { border-radius: 24px; background: var(--sand); padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; } .rs-ai-dark { border-radius: 24px; background: var(--ink); color: var(--sand); padding: 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .rs-ai-label { font-size: 13px; font-weight: 600; color: var(--text-3); } .rs-ai-label--gap { margin-top: 8px; } .rs-ai-dhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .rs-ai-dhead > span:first-child, .rs-ai-dlabel { font-size: 13px; font-weight: 600; color: var(--muted-dark); } .rs-ai-dlabel { margin-top: 6px; } .rs-aibadge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--ink-2); font-size: 12px; font-weight: 700; color: var(--sun); } .rs-aibadge span { width: 6px; height: 6px; border-radius: 50%; background: var(--sun); } .rs-dshim { border-radius: 16px; background: linear-gradient(90deg,#2B2927 25%,#3A3633 50%,#2B2927 75%); background-size: 200% 100%; animation: rm-shim 1.8s ease-in-out infinite; } .rs-dshim--86 { height: 86px; } .rs-dshim--72 { height: 72px; } .rs-dshim--44 { height: 44px; } .rs-ai-empty { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; border-radius: 16px; border: 1.5px dashed var(--ink-4); text-align: center; font-size: 15px; color: var(--muted-dark); } .rs-dbtn { height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background-color: var(--ink); color: var(--paper); font-family: var(--f-sans); font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap; transition: background-color .25s; } .rs-dbtn:hover { background-color: var(--clay); } .rs-in { animation: rm-in .5s var(--ease-out) both; } /* AI: recommendations */ .rs-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 24px; background: var(--sand); } .rs-seg__btn { height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background-color: transparent; color: var(--ink); font-family: var(--f-sans); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .25s, color .25s; } .rs-seg__btn.is-on { background-color: var(--ink); color: var(--sand); } .rs-chips { display: flex; flex-wrap: wrap; gap: 8px; } .rs-chip { height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background-color: var(--paper); color: var(--ink); font-family: var(--f-sans); font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap; transition: background-color .25s; } .rs-chip:hover { background-color: var(--sand-2); } .rs-chip.is-on, .rs-chip.is-on:hover { background-color: var(--ink); color: var(--paper); } .rs-sigs { display: flex; flex-direction: column; gap: 6px; } .rs-sig { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 14px; background: var(--paper); font-size: 15px; } .rs-sig > span:first-child { color: var(--text-5); } .rs-sig > span:last-child { font-weight: 600; text-align: right; } .rs-rec { padding: 14px 16px; border-radius: 16px; background: var(--ink-2); display: flex; flex-direction: column; gap: 8px; } .rs-rec__name { font-weight: 600; font-size: 16px; } .rs-rec__pct { font-size: 13px; font-weight: 700; color: var(--sun); white-space: nowrap; } .rs-rec__why { font-size: 14px; line-height: 1.4; color: var(--muted-dark-2); } .rs-rec__track { display: block; height: 6px; border-radius: 999px; background: var(--ink-4); overflow: hidden; } .rs-rec__fill { display: block; height: 100%; border-radius: 999px; background: var(--coral); transition: width .6s var(--ease-panel); } /* AI: forecast */ .rs-factors { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .rs-factors__lbl { font-size: 13px; font-weight: 600; color: var(--text-3); margin-right: 4px; } .rs-factor { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: 999px; background-color: transparent; color: var(--ink); font-family: var(--f-sans); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .25s, color .25s; } .rs-factor[aria-pressed="true"] { background-color: var(--ink); color: var(--paper); } .rs-factor__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-3); } .rs-factor[aria-pressed="true"] .rs-factor__dot { background: var(--coral); } .rs-chart { height: 240px; display: flex; align-items: flex-end; gap: 6px; } .rs-barcol { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; } .rs-barcol__v { font-size: 11px; color: var(--text-3); } .rs-barcol__bar { width: 100%; border-radius: 999px; background: var(--ink); display: block; animation: none; transition: height .7s var(--ease-panel), background-color .3s; } .rs-barcol__bar.is-fc { background: var(--line); } .rs-barcol__bar.is-fc.is-done { background: var(--clay); } .rs-barcol__bar.is-fc.is-loading { animation: rm-pulse 1s infinite; } .rs-barcol__l { font-size: 11px; color: var(--text-5); } .rs-legend { display: flex; gap: 20px; font-size: 14px; font-weight: 600; } .rs-legend > span { display: flex; align-items: center; gap: 8px; } .rs-legend__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); } .rs-legend__dot--fc { background: var(--clay); } .rs-fcact, .rs-fcnone { padding: 14px 16px; border-radius: 16px; background: var(--ink-2); } .rs-fcact__wk { font-size: 12px; font-weight: 700; color: var(--sun); } .rs-fcact__txt { margin-top: 4px; font-size: 15px; line-height: 1.45; } .rs-fcnone { font-size: 15px; line-height: 1.45; color: var(--muted-dark-2); } /* AI: voice */ .rs-voice-idle { flex: 1; display: flex; align-items: center; justify-content: center; padding: 36px; border-radius: 20px; border: 1.5px dashed var(--line-3); text-align: center; font-size: 16px; color: var(--text-3); } .rs-vline { align-self: flex-end; max-width: 86%; padding: 12px 16px; border-radius: 22px 22px 6px 22px; background: var(--paper); color: var(--ink); } .rs-vline.is-agent { align-self: flex-start; border-radius: 22px 22px 22px 6px; background: var(--ink); color: var(--sand); } .rs-vline__who { font-size: 12px; font-weight: 600; opacity: .7; } .rs-vline__txt { margin-top: 2px; font-size: 15px; line-height: 1.4; } .rs-vtyping { align-self: flex-end; width: 180px; height: 52px; border-radius: 22px; background: linear-gradient(90deg,#E2DACD 25%,#ECE6DC 50%,#E2DACD 75%); background-size: 200% 100%; animation: rm-shim 1.8s ease-in-out infinite; } .rs-vtyping.is-agent { align-self: flex-start; } .rs-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; } .rs-field { padding: 10px 12px; border-radius: 14px; background: var(--ink-2); } .rs-vf { transition: background-color .5s; } .rs-vf.is-fresh { background: #5A2F26; } .rs-field__k { font-size: 12px; color: var(--muted-dark); } .rs-field__v { margin-top: 2px; font-size: 15px; font-weight: 600; } .rs-vf .rs-field__v { color: var(--text-4); } .rs-vf.is-set .rs-field__v { color: var(--sand); } .rs-noacts { padding: 11px 14px; border-radius: 16px; border: 1.5px dashed var(--ink-4); font-size: 14px; color: var(--muted-dark); } .rs-step { display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px; border-radius: 16px; background: var(--ink-2); font-size: 15px; line-height: 1.4; } .rs-step__dot { flex: 0 0 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--sun); } /* AI: paperwork */ .rs-bill { border-radius: 24px; background: var(--sand); padding: 20px; display: flex; flex-direction: column; gap: 0; min-width: 0; font-size: 14px; line-height: 1.7; color: var(--text-2); } .rs-bill b { color: var(--ink); } .rs-bill__gap { margin-top: 10px; } .rs-hl { display: flex; justify-content: space-between; gap: 12px; padding: 2px 8px; margin: 0 -8px; border-radius: 8px; background: rgba(243,211,199,0); transition: background-color .4s; } .rs-hl--total { margin-top: 6px; } .rs-bill.is-tint .rs-hl { background: #F3D3C7; } .rs-bill.is-flag .rs-hl--vinyl { background: #FFE08A; } /* Closing CTA */ .rs-close { padding: var(--section-y) 0 0; } .rs-close__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px 64px; } .rs-close__h2 { margin: 0; max-width: 16ch; font-family: var(--f-display); font-weight: 700; font-size: clamp(40px,5.4vw,80px); line-height: .98; letter-spacing: -0.04em; text-wrap: balance; } /* ═════════════════════════ Legal (Privacy, Terms) ═════════════════════════ */ .legal-hero { padding: clamp(24px,5vw,72px) 0 clamp(64px,8vw,112px); } .legal-hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .legal-xlink { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--ink); background-color: transparent; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .25s, color .25s; } .legal-xlink:hover { background-color: var(--ink); color: var(--sand); } .legal-hero .fade-in { --fy: 24px; } .legal-hero__row { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; } .legal-hero__row .lead { margin: 0; max-width: 40ch; } .legal-date { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line); font-size: 15px; font-weight: 600; color: var(--text-2); white-space: nowrap; } .legal-date::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); } .legal-body { background: var(--sand-2); padding: clamp(40px,6vw,88px) 0; } .legal-body__inner { display: flex; flex-wrap: wrap; gap: 32px clamp(32px,4vw,56px); align-items: flex-start; } .legal-nav { flex: 1 1 260px; position: sticky; top: 104px; display: flex; flex-direction: column; gap: 2px; padding: 20px 12px 14px; border-radius: 28px; background: var(--paper); } .legal-nav.is-static { position: static; } .legal-nav > span { padding: 0 14px 10px; font-size: 15px; font-weight: 600; color: var(--text-3); } .legal-nav a { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: 999px; background-color: transparent; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; transition: background-color .3s; } .legal-nav a:hover { background-color: var(--nav-hover); color: var(--ink); } .legal-nav a::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--coral); opacity: 0; transition: opacity .3s; } .legal-nav a.is-active { background-color: var(--nav-hover); } .legal-nav a.is-active::before { opacity: 1; } .legal-article { flex: 3 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; font-size: 18px; line-height: 1.65; color: var(--text-2); } .legal-card { scroll-margin-top: 104px; padding: clamp(24px,3vw,40px); border-radius: 28px; background: var(--paper); } .legal-card__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; } .legal-card__num { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: var(--ink); } .legal-card__head h2 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(24px,2.2vw,30px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); } .legal-card p { margin: 0 0 14px; max-width: 68ch; } .legal-card p:last-child { margin: 0; } .legal-card--dark { background: var(--ink); color: var(--muted-dark-2); } .legal-card--dark .legal-card__num { border-color: var(--sand); color: var(--sand); } .legal-card--dark .legal-card__head h2 { color: var(--sand); } .legal-card--dark p:last-of-type { margin: 0 0 24px; } .legal-mail { display: inline-flex; align-items: center; height: 52px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--sand); background-color: transparent; color: var(--sand); font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; transition: background-color .25s, color .25s; } .legal-mail:hover { background-color: var(--sand); color: var(--ink); } /* ═════════════════════════ Blog ═════════════════════════ */ /* The hero, date pill, sand slab, and article card reuse the legal page classes. */ .blog-list { display: flex; flex-direction: column; gap: 12px; } .blog-row { display: grid; grid-template-columns: 160px minmax(0,1fr) auto; gap: 12px 32px; align-items: baseline; padding: clamp(24px,3vw,40px); border-radius: 28px; background-color: var(--paper); color: var(--ink); text-decoration: none; transition: background-color .25s; } .blog-row:hover { background-color: var(--paper-2); color: var(--ink); } .blog-row__date { font-size: 15px; font-weight: 600; color: var(--text-3); } .blog-row__title { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(26px,3vw,40px); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; } .blog-row__excerpt { margin: 14px 0 0; max-width: 60ch; font-size: 17px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; } .blog-row__more { font-size: 15px; font-weight: 600; white-space: nowrap; transition: color .25s; } .blog-row:hover .blog-row__more { color: var(--clay); } @media (max-width: 899.98px) { .blog-row { grid-template-columns: minmax(0,1fr); } } .blog-read { max-width: 800px; } .blog-title { margin: 24px 0 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(40px,5.4vw,76px); line-height: 1; letter-spacing: -0.04em; text-wrap: balance; } .blog-meta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; font-size: 15px; font-weight: 600; color: var(--text-3); } .blog-body { font-size: 19px; line-height: 1.65; color: var(--text-2); } .blog-body p { margin: 0 0 20px; } .blog-back { margin-top: 24px; }