/* WM SYSTEM: shared design + motion styles for the Brands site pages (mirrors /brands/web-design). Scope: */ /* ================================================================ WEB DESIGN LAB: refined layout inside the Wheeler's Media brand black + deep navy, brand blue #1760FF, glass, pills, Neue Haas ================================================================ */ .wm-page { --blue: #1760FF; --blue-soft: #6f9bff; --blue-hi: #8fb1ff; --green: #00C76F; --orange: #FF7300; --red: #ff5d5d; --ink: #ffffff; --mute: #a9acb1; --hair: rgba(255, 255, 255, 0.12); --glass: rgba(255, 255, 255, 0.05); --glass-strong: rgba(255, 255, 255, 0.08); --f-disp: 'neue-haas-grotesk-display', 'Helvetica Neue', Arial, sans-serif; --f-text: 'neue-haas-grotesk-text', 'Helvetica Neue', Arial, sans-serif; --ease: cubic-bezier(0.16, 1, 0.3, 1); --pad: clamp(1.25rem, 5vw, 4rem); --band-y: clamp(4.5rem, 9vw, 8.5rem); --head-gap: clamp(2.5rem, 5vw, 4.5rem); --glow: 23, 96, 255; --hl-a: #1760FF; --hl-b: #ffffff; background: #050507; color: var(--ink); font-family: var(--f-text); font-size: 1.0625rem; line-height: 1.6; letter-spacing: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; } .wm-page ::selection { background: var(--blue); color: #fff; } .wm-page { scrollbar-color: #2a3358 #050507; } .wm-page *:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 3px; } /* careers: its own accent (green), everything else (type, layout, motion) stays identical to brands */ .wm-page.careers-page { --blue: var(--green); --blue-soft: #66DB9E; --blue-hi: #66DB9E; --glow: 0, 199, 111; --hl-a: var(--green); } .wm-page.careers-page .hl, .wm-page.careers-page mark.mk { color: var(--green); color: color-mix(in srgb, var(--green) calc(var(--sweep, 1) * 100%), #ffffff); } /* the .hl/mark.mk/.accent gradient-text sweep (below) hardcodes a blue gradient and paints over `color` via background-clip:text + transparent fill — override the gradient stops too or the swap above is invisible */ .wm-page.careers-page mark.mk, .wm-page.careers-page .hl, .wm-page.careers-page .accent { background-image: linear-gradient(90deg, #ffffff calc(var(--kw2, 0) * 145% - 45%), rgba(255, 255, 255, 0) calc(var(--kw2, 0) * 145%)), linear-gradient(90deg, rgba(255, 255, 255, 0) calc(var(--kw, 1) * 145% - 45%), #ffffff calc(var(--kw, 1) * 145%)), linear-gradient(90deg, #00a85e 0%, #66DB9E 50%, #e3f9ee 100%); } .wm-page.careers-page .checks li::before { border-left-color: var(--green); border-bottom-color: var(--green); } /* brand green is much lighter than brand blue — white button text drops to 2.2:1 (needs 4.5:1). same fix cookie-banner.js already uses for its accent button: dark text instead of white. */ .wm-page.careers-page .btn--blue { color: #04170d; box-shadow: 0 10px 30px -8px rgba(0, 199, 111, 0.7); } .wm-page.careers-page .btn--blue:hover { background: #00a85e !important; color: #04170d !important; border-color: #00a85e; box-shadow: 0 16px 36px -8px rgba(0, 199, 111, 0.85); } .wm-page.careers-page .confirm__icon { background: rgba(0, 199, 111, 0.12); border-color: rgba(0, 199, 111, 0.4); box-shadow: 0 0 0 8px rgba(0, 199, 111, 0.06), 0 0 32px rgba(0, 199, 111, 0.22); animation-name: confirm-pulse-green; } .wm-page.careers-page .confirm__divider { background: rgba(0, 199, 111, 0.4); } .wm-page.careers-page .wm-media { box-shadow: 0 40px 100px -30px rgba(0, 199, 111, 0.35), 0 30px 70px -20px rgba(0, 0, 0, 0.7); } .wm-page.careers-page .apple__link { color: var(--blue-soft); } .wm-page.careers-page .pos-badge { border-color: rgba(102, 219, 158, 0.4); } /* closing CTA band: same navy-to-accent sweep as brands' #contact, ending in green instead of blue */ .wm-page.careers-page .bg-cta { background: linear-gradient(180deg, #050507 0%, #0a4a34 55%, #00C76F 100%); } /* academy: its own accent (orange), everything else stays identical to brands/careers */ .wm-page.academy-page { --blue: var(--orange); --blue-soft: #FFAB66; --blue-hi: #FFAB66; --glow: 255, 115, 0; --hl-a: var(--orange); } .wm-page.academy-page .hl, .wm-page.academy-page mark.mk { color: var(--orange); color: color-mix(in srgb, var(--orange) calc(var(--sweep, 1) * 100%), #ffffff); } .wm-page.academy-page mark.mk, .wm-page.academy-page .hl, .wm-page.academy-page .accent { background-image: linear-gradient(90deg, #ffffff calc(var(--kw2, 0) * 145% - 45%), rgba(255, 255, 255, 0) calc(var(--kw2, 0) * 145%)), linear-gradient(90deg, rgba(255, 255, 255, 0) calc(var(--kw, 1) * 145% - 45%), #ffffff calc(var(--kw, 1) * 145%)), linear-gradient(90deg, #e56600 0%, #FFAB66 50%, #fff1e3 100%); } .wm-page.academy-page .checks li::before { border-left-color: var(--orange); border-bottom-color: var(--orange); } /* brand orange is much lighter than brand blue -- white button text drops to 2.7:1 (needs 4.5:1), same fix as careers' green */ .wm-page.academy-page .btn--blue { color: #1f1005; box-shadow: 0 10px 30px -8px rgba(255, 115, 0, 0.7); } .wm-page.academy-page .btn--blue:hover { background: #e56600 !important; color: #1f1005 !important; border-color: #e56600; box-shadow: 0 16px 36px -8px rgba(255, 115, 0, 0.85); } .wm-page.academy-page .confirm__icon { background: rgba(255, 115, 0, 0.12); border-color: rgba(255, 115, 0, 0.4); box-shadow: 0 0 0 8px rgba(255, 115, 0, 0.06), 0 0 32px rgba(255, 115, 0, 0.22); animation-name: confirm-pulse-orange; } .wm-page.academy-page .confirm__divider { background: rgba(255, 115, 0, 0.4); } .wm-page.academy-page .wm-media { box-shadow: 0 40px 100px -30px rgba(255, 115, 0, 0.35), 0 30px 70px -20px rgba(0, 0, 0, 0.7); } .wm-page.academy-page .apple__link { color: var(--blue-soft); } .wm-page.academy-page .pos-badge { border-color: rgba(255, 171, 102, 0.4); } .wm-page.academy-page .faq summary::after { border-color: var(--blue-soft); } /* .glass hover spotlight (line ~311) hardcodes a blue tint; retint it to each section's own accent */ .wm-page.careers-page .glass::before { background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.11), rgba(102, 219, 158, 0.06) 40%, transparent 68%); } .wm-page.academy-page .glass::before { background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.11), rgba(255, 171, 102, 0.06) 40%, transparent 68%); } .wm-page.academy-page .bg-cta { background: linear-gradient(180deg, #050507 0%, #4a2a10 55%, #FF7300 100%); } @keyframes confirm-pulse-orange { 0%, 100% { box-shadow: 0 0 0 8px rgba(255, 115, 0, 0.06), 0 0 32px rgba(255, 115, 0, 0.22); } 50% { box-shadow: 0 0 0 16px rgba(255, 115, 0, 0.1), 0 0 60px rgba(255, 115, 0, 0.38); } } @keyframes confirm-pulse-green { 0%, 100% { box-shadow: 0 0 0 8px rgba(0, 199, 111, 0.06), 0 0 32px rgba(0, 199, 111, 0.22); } 50% { box-shadow: 0 0 0 16px rgba(0, 199, 111, 0.1), 0 0 60px rgba(0, 199, 111, 0.38); } } /* careers + academy: NO blue anywhere -- black, neutral grey, and the section accent only. Brands keeps its navy shadows / blue-white hovers; these override them for the two sections. */ .wm-page.careers-page .glass, .wm-page.academy-page .glass, .wm-page.careers-page .pos-card, .wm-page.academy-page .pos-card { box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.09); } .wm-page.careers-page .btn--white, .wm-page.academy-page .btn--white { color: #0a0a0a; } .wm-page.careers-page .btn--white:hover, .wm-page.academy-page .btn--white:hover { background: #ededed !important; color: #0a0a0a !important; } .wm-page.careers-page .pos-card:hover { border-color: rgba(102, 219, 158, 0.4); } .wm-page.academy-page .pos-card:hover { border-color: rgba(255, 171, 102, 0.4); } .wm-page.careers-page .faq p, .wm-page.academy-page .faq p, .wm-page.careers-page .form-label, .wm-page.academy-page .form-label { color: #dcdcdc; } .careers-page .wm-footer .footer-column ul li a, .academy-page .wm-footer .footer-column ul li a { color: #a3a3a3; } /* filter pills: base text is a blue-tinted grey, active shadow/hover are blue, and white-on-accent fails contrast */ .wm-page.careers-page .pill, .wm-page.academy-page .pill { color: #dcdcdc; } .wm-page.careers-page .pill.is-active { color: #04170d; box-shadow: 0 6px 20px -6px rgba(0, 199, 111, 0.8); } .wm-page.careers-page .pill.is-active:hover { background: #00a85e !important; color: #04170d !important; } .wm-page.academy-page .pill.is-active { color: #1f1005; box-shadow: 0 6px 20px -6px rgba(255, 115, 0, 0.8); } .wm-page.academy-page .pill.is-active:hover { background: #e56600 !important; color: #1f1005 !important; } /* brands alternates black -> navy bands (.bgx/.bgy). Same rhythm here, but black -> very dark accent tint. */ .wm-page.careers-page .bgx { background: linear-gradient(180deg, #050507 0%, #06140d 100%); } .wm-page.careers-page .bgy { background: linear-gradient(180deg, #06140d 0%, #050507 100%); } .wm-page.academy-page .bgx { background: linear-gradient(180deg, #050507 0%, #170a02 100%); } .wm-page.academy-page .bgy { background: linear-gradient(180deg, #170a02 0%, #050507 100%); } :where(.wm-page) :is(h1, h2, h3, p, ul, ol, table, figure) { margin: 0; } :where(.wm-page) a { color: inherit; } .wm-page .wd { overflow: clip; } /* type */ .wm-page .d1, .wm-page .d2, .wm-page .d3 { font-family: var(--f-disp); font-weight: 700; color: #fff; text-wrap: balance; } .wm-page .d1 { font-size: clamp(3.1rem, 7.6vw, 6rem); line-height: 0.96; letter-spacing: -0.03em; word-spacing: 0.06em; } .wm-page .d2 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1; letter-spacing: -0.028em; word-spacing: 0.05em; } .wm-page .d3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.1; letter-spacing: -0.015em; } .wm-page .accent { color: #1760FF; } .wm-page .lede { color: var(--mute); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; max-width: 34em; } .wm-page .note { color: var(--mute); font-size: 0.85rem; line-height: 1.5; } .wm-page .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } .wd-wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--pad); } .wd-band { position: relative; padding: var(--band-y) 0; } /* section colour shifts: each band sweeps from the last band's colour into its own */ .wd-glowfield { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .wd-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; will-change: transform; } .wd-glow--a { width: 46vw; height: 46vw; right: -12vw; top: 6%; background: radial-gradient(circle, rgba(var(--glow), 0.55), transparent 65%); } .wd-glow--b { width: 36vw; height: 36vw; left: -14vw; bottom: 12%; background: radial-gradient(circle, rgba(var(--glow), 0.35), transparent 65%); } .wd-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); } /* glass */ .glass { background: var(--glass); border: 1px solid var(--hair); border-radius: 28px; -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); box-shadow: 0 30px 70px -20px rgba(10, 22, 54, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.09); } /* pills + buttons: one shape everywhere */ .btn, .pill { font-family: var(--f-text); font-weight: 700; border-radius: 9999px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: transform 0.25s var(--ease), background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.3s; } .btn { min-height: 54px; padding: 0.9rem 1.9rem; font-size: 1.02rem; border: 1.5px solid transparent; } .btn--blue { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 10px 30px -8px rgba(23, 96, 255, 0.7); } .btn--blue:hover { background: #0f4de0 !important; color: #fff !important; border-color: #0f4de0; transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(23, 96, 255, 0.85); } .btn--ghost { background: rgba(255, 255, 255, 0.04); color: #fff; border-color: rgba(255, 255, 255, 0.28); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .btn--ghost:hover { background: rgba(255, 255, 255, 0.14) !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.5); transform: translateY(-2px); } .btn--white { background: #fff; color: #0a1636; border-color: #fff; } .btn--white:hover { background: #e8efff !important; color: #0a1636 !important; transform: translateY(-2px); } .btn--sm { min-height: 42px; padding: 0.55rem 1.2rem; font-size: 0.92rem; } .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; } .pill { min-height: 40px; padding: 0.45rem 1rem; font-size: 0.9rem; font-weight: 500; color: #d9dde6; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--hair); } .pill:hover { background: rgba(255, 255, 255, 0.16) !important; color: #fff !important; } .pill.is-active { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 6px 20px -6px rgba(23, 96, 255, 0.8); font-weight: 700; } .pill.is-active:hover { background: #0f4de0 !important; } .pills { display: flex; flex-wrap: wrap; gap: 0.4rem; } .btn:active, .pill:active { transform: translateY(0) scale(0.98); } /* ─── HERO ─── */ .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; } .hero-copy .lede { margin-top: 1.75rem; } .hero-copy .btn-row { margin-top: 2.25rem; } .hero-proof { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--hair); max-width: 34em; color: var(--mute); font-size: 0.92rem; } .hero-proof a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 3px; } .hero-proof a:hover { text-decoration-color: var(--blue-soft); } .ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; } .ln > span { display: block; } .js .ln > span { transform: translateY(108%); } .js.is-ready .ln > span { transform: none; transition: transform 1.5s var(--ease); transition-delay: calc(var(--i, 0) * 170ms + 250ms); } .mc { padding: 1.25rem; } .mc__head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; } body.wm-page .mc__head h2 { font-family: var(--f-disp); font-weight: 700; font-size: 1.2rem; line-height: 1.1; letter-spacing: -0.01em; } .mc__phone { background: rgba(0, 0, 0, 0.35); border: 1px solid var(--hair); border-radius: 22px; overflow: hidden; } .mc__bar { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--hair); background: rgba(255, 255, 255, 0.04); font-size: 0.9rem; } .mc__biz { font-weight: 700; } .mc__missed { font-size: 0.75rem; padding: 0.2rem 0.65rem; border-radius: 9999px; background: rgba(255, 93, 93, 0.14); color: #ff9a9a; white-space: nowrap; } .mc__thread { min-height: 300px; padding: 1rem; display: flex; flex-direction: column; gap: 0.55rem; } .mc-msg { max-width: 84%; padding: 0.6rem 0.9rem; font-size: 0.94rem; line-height: 1.42; border-radius: 18px; animation: wd-msg 0.5s var(--ease) both; } .mc-msg small { display: block; font-size: 0.75rem; font-weight: 700; opacity: 1; color: rgba(255, 255, 255, 0.92); margin-bottom: 2px; } .mc-msg--biz { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 6px; } .mc-msg--cust { align-self: flex-start; background: rgba(255, 255, 255, 0.1); border-bottom-left-radius: 6px; } .mc-msg--sys { align-self: center; max-width: 100%; background: transparent; border: 1px dashed rgba(255, 255, 255, 0.25); color: var(--mute); font-size: 0.85rem; } @keyframes wd-msg { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } } .mc__result { padding: 0.8rem 1rem; font-size: 0.92rem; font-weight: 700; min-height: 3rem; border-top: 1px solid var(--hair); color: var(--mute); } .mc__result[data-state="won"] { background: rgba(0, 199, 111, 0.12); color: #4ee59f; } .mc__result[data-state="lost"] { background: rgba(255, 93, 93, 0.1); color: #ff9a9a; } .mc__foot { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; } .mc__replay { background: none; border: 0; color: var(--blue-soft); font: 700 0.9rem var(--f-text); cursor: pointer; padding: 0.5rem 0.75rem; border-radius: 9999px; } .mc__replay:hover { background: rgba(255, 255, 255, 0.1) !important; color: #fff !important; } .mc .note { margin-top: 0.75rem; } /* ─── ROI ─── */ .sec-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 4rem; align-items: end; margin-bottom: var(--head-gap); } .sec-head .lede { justify-self: end; } .roi { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); position: relative; overflow: hidden; } .roi__in { padding: clamp(1.5rem, 3.2vw, 3rem); display: grid; gap: 2rem; align-content: start; border-right: 1px solid var(--hair); } .roi__out { padding: clamp(1.5rem, 3.2vw, 3rem); display: grid; align-content: space-between; gap: 2rem; background: radial-gradient(120% 90% at 100% 0%, rgba(23, 96, 255, 0.28), transparent 60%); } .sl__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .sl__row label { font-size: 1rem; color: #e4e7ee; } .sl__row output { font-family: var(--f-disp); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; white-space: nowrap; } .sl__hint { color: var(--mute); font-size: 0.82rem; margin-top: 0.35rem; } .ios { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; cursor: pointer; margin: 0.4rem 0 0; --p: 30%; } .ios::-webkit-slider-runnable-track { height: 8px; border-radius: 9999px; background: linear-gradient(90deg, var(--blue) var(--p), rgba(255, 255, 255, 0.14) var(--p)); } .ios::-moz-range-track { height: 8px; border-radius: 9999px; background: rgba(255, 255, 255, 0.14); } .ios::-moz-range-progress { height: 8px; border-radius: 9999px; background: var(--blue); } .ios::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.08); transition: transform 0.2s var(--ease); } .ios:active::-webkit-slider-thumb { transform: scale(1.12); } .ios::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); } .roi__label { color: var(--mute); font-size: 1rem; } .roi__big { font-family: var(--f-disp); font-weight: 700; font-size: clamp(3.4rem, 8.4vw, 6rem); line-height: 0.95; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; margin-top: 0.4rem; } .roi__big small { font-size: 1.4rem; letter-spacing: -0.01em; color: var(--mute); margin-left: 0.3em; font-weight: 400; } .roi__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hair); } .roi__stats > div { padding: 1.1rem 1rem 0 0; } .roi__stats > div + div { padding-left: 1rem; border-left: 1px solid var(--hair); } .roi__stats b { display: block; font-family: var(--f-disp); font-size: 1.6rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .roi__stats span { color: var(--mute); font-size: 0.85rem; } .roi__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } /* ─── RISK: cheap vs built ─── */ .risk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; } .risk__lead { position: sticky; top: 7rem; } .risk__lead .lede { margin-top: 1.5rem; } .risk__lead .btn-row { margin-top: 2rem; } .vs { padding: 0.5rem clamp(1rem, 2vw, 2rem); } .vs table { width: 100%; border-collapse: collapse; } .vs th, .vs td { text-align: left; vertical-align: top; padding: 1.15rem 1rem 1.15rem 0; border-top: 1px solid var(--hair); font-weight: 400; } .vs thead th { border-top: 0; padding-top: 1.4rem; padding-bottom: 1rem; } .vs thead th b { display: block; font-family: var(--f-disp); font-size: 1.35rem; letter-spacing: -0.02em; } .vs thead th span { color: var(--mute); font-size: 0.85rem; } .vs thead th:last-child b { color: #fff; } .vs tbody th { font-weight: 700; width: 24%; color: #fff; } .vs td { color: var(--mute); width: 38%; } .vs td.is-us { color: #fff; } .vs td.is-us::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 0.6rem; vertical-align: 0.08em; box-shadow: 0 0 0 4px rgba(0, 199, 111, 0.15); } .vs td.is-cheap::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-right: 0.6rem; vertical-align: 0.08em; box-shadow: 0 0 0 4px rgba(255, 93, 93, 0.14); } /* ─── WORK / PROOF ─── */ .work__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; margin-bottom: 2.5rem; } .browser { border-radius: 24px; overflow: hidden; border: 1px solid var(--hair); background: #06070b; box-shadow: 0 50px 120px -30px rgba(23, 96, 255, 0.35), 0 30px 70px -20px rgba(0, 0, 0, 0.7); } .browser__bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid var(--hair); } .browser__dots { display: flex; gap: 6px; } .browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); } .browser__url { flex: 1; max-width: 460px; margin: 0 auto; text-align: center; font-size: 0.82rem; color: var(--mute); background: rgba(0, 0, 0, 0.35); border-radius: 9999px; padding: 0.3rem 1rem; } .browser__stage { position: relative; aspect-ratio: 16 / 9; min-height: 420px; background: #0a0d16; } .browser__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; } .browser__load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; text-align: center; padding: 1.5rem; color: var(--mute); } .ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2rem; border-top: 1px solid var(--hair); } .ledger > a { display: grid; gap: 0.15rem; padding: 1.25rem 1.25rem 0 0; text-decoration: none; } .ledger > a + a { padding-left: 1.25rem; border-left: 1px solid var(--hair); } .ledger b { font-family: var(--f-disp); font-size: 1.35rem; letter-spacing: -0.02em; } .ledger span { color: var(--mute); font-size: 0.9rem; } .ledger .num { color: #fff; font-size: 0.95rem; margin-top: 0.4rem; } .ledger a:hover b { color: var(--blue-soft); } /* ─── DEMO PARTS ─── */ .vsim__wave { display: flex; align-items: center; gap: 3px; height: 56px; } .vsim__wave span { flex: 1; height: 100%; min-width: 2px; border-radius: 9999px; background: linear-gradient(180deg, var(--blue-soft), var(--blue)); transform: scaleY(0.08); transform-origin: center; } .vsim__lines { list-style: none; padding: 0; display: grid; gap: 0.35rem; } .vsim__lines li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.75rem; padding: 0.7rem 0.9rem; border-radius: 16px; color: var(--mute); transition: background 0.25s, color 0.25s; font-size: 0.97rem; } .vsim__lines li b { font-size: 0.78rem; font-weight: 700; padding-top: 0.2rem; } .vsim__lines li.is-speaking { background: rgba(23, 96, 255, 0.18); color: #fff; } .vsim__q { font-weight: 700; } .vsim__reply { display: grid; gap: 0.75rem; font-size: 0.95rem; } .vsim__reply[hidden] { display: none; } .speed__num { font-family: var(--f-disp); font-weight: 700; font-size: clamp(3.6rem, 7vw, 5.4rem); line-height: 0.9; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; } .speed__num small { font-family: var(--f-text); font-size: 0.95rem; font-weight: 400; color: var(--mute); letter-spacing: 0; margin-left: 0.4rem; } .speed__scale { height: 8px; border-radius: 9999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; } .speed__fill { height: 100%; width: 100%; background: var(--blue); border-radius: 9999px; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); } .speed__ticks { display: flex; justify-content: space-between; color: var(--mute); font-size: 0.75rem; margin-top: 0.35rem; } .speed__rows { list-style: none; padding: 0; font-size: 0.92rem; } .speed__rows li { display: flex; justify-content: space-between; padding: 0.5rem 0; border-top: 1px solid var(--hair); } .quote__group { display: flex; flex-wrap: wrap; gap: 0.4rem; } .quote__total { display: flex; justify-content: space-between; align-items: baseline; padding: 0.9rem 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); } .quote__total strong { font-family: var(--f-disp); font-size: 2.6rem; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .quote__sms label { font-size: 0.88rem; display: block; margin-bottom: 0.4rem; } .quote__row { display: flex; gap: 0.5rem; flex-wrap: wrap; } .quote__row input { flex: 1 1 140px; min-height: 42px; padding: 0.5rem 1.1rem; background: rgba(0, 0, 0, 0.35); color: #fff; border: 1px solid var(--hair); border-radius: 9999px; font: 400 0.95rem var(--f-text); } .quote__row input::placeholder { color: #8a8d93; } .quote__preview { display: grid; gap: 0.4rem; } .quote__preview small { color: var(--mute); font-size: 0.8rem; } .sms-bubble { background: var(--blue); border-radius: 18px 18px 6px 18px; padding: 0.65rem 0.9rem; font-size: 0.92rem; } .calllog__list { list-style: none; padding: 0; font-size: 0.92rem; } .calllog__list li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.1rem 0.75rem; padding: 0.75rem 0; border-top: 1px solid var(--hair); } .calllog__list time { color: var(--mute); font-size: 0.8rem; padding-top: 2px; } .calllog__list em { grid-column: 2; font-style: normal; font-size: 0.85rem; color: var(--mute); } .calllog__list em.is-won { color: #4ee59f; } /* ─── SCROLL-DRIVEN TEXT ─── */ .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; } .w > i { display: inline-block; font-style: normal; will-change: transform; } .js [data-split]:not(.is-split) { visibility: hidden; } .hl { color: #1760FF; color: color-mix(in srgb, #1760FF calc(var(--sweep, 1) * 100%), #ffffff); } .ch { display: inline-block; will-change: transform, opacity; } /* ─── PRODUCTS FLOW ─── */ .flow { position: relative; padding-left: clamp(2.5rem, 6vw, 5.5rem); } .flow__rail { position: absolute; left: 0.6rem; top: 1rem; bottom: 1rem; width: 2px; background: rgba(255, 255, 255, 0.12); border-radius: 2px; } .flow__fill { position: absolute; inset: 0; background: linear-gradient(180deg, var(--hl-a), rgb(var(--glow))); transform: scaleY(0); transform-origin: top; border-radius: 2px; box-shadow: 0 0 18px rgba(var(--glow), 0.8); } .prod { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding: clamp(3.5rem, 7vw, 6.5rem) 0; } .prod + .prod { border-top: 1px solid rgba(255, 255, 255, 0.08); } .prod--flip .prod__copy { order: 2; } .prod--flip .prod__demo { order: 1; } .flow__node { position: absolute; left: calc(-1 * clamp(2.5rem, 6vw, 5.5rem) + 0.6rem - 7px); top: clamp(4.4rem, 10vw, 9rem); width: 16px; height: 16px; border-radius: 50%; background: #0b1a45; border: 2px solid rgba(255, 255, 255, 0.3); transition: background 0.4s, border-color 0.4s, box-shadow 0.4s, transform 0.4s var(--ease); z-index: 1; } .prod.is-on .flow__node { background: rgb(var(--glow)); border-color: #fff; box-shadow: 0 0 0 6px rgba(var(--glow), 0.22), 0 0 24px rgba(var(--glow), 0.9); transform: scale(1.15); } .prod__tag { display: inline-flex; font-size: 0.85rem; font-weight: 700; padding: 0.3rem 0.9rem; border-radius: 9999px; background: rgba(var(--glow), 0.16); border: 1px solid rgba(var(--glow), 0.5); color: #fff; margin-bottom: 1.5rem; } .prod__copy .lede { margin-top: 1.5rem; } .prod__copy .pills { margin-top: 1.75rem; } .prod__demo { padding: clamp(1.25rem, 2.6vw, 2rem); display: grid; gap: 1.25rem; align-content: start; position: relative; overflow: hidden; } .demo-tabs { margin-bottom: 0.25rem; } .demo-pane { display: none; gap: 1rem; } .demo-pane.is-active { display: grid; } .app__head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; } body.wm-page .app__head h4 { font-family: var(--f-disp); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.15; margin: 0; } .live { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 700; color: #4ee59f; background: rgba(0, 199, 111, 0.12); border-radius: 9999px; padding: 0.2rem 0.65rem; } .live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #00C76F; } .live--sample { color: var(--mute); background: rgba(255, 255, 255, 0.08); } .live--sample::before { background: var(--mute); } .vs-form { display: grid; gap: 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--hair); } .qd { display: grid; gap: 1.1rem; } .speed__budget { font-size: 0.95rem; } /* glass gleam + tilt */ .glass { position: relative; } .glass::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.12) 48%, transparent 60%); background-size: 260% 100%; background-position: calc(130% - var(--gs, 0) * 190%) 0; opacity: var(--gs, 0); } .glass.gleam::after { animation: wd-gleam 1.4s var(--ease) 1; } @keyframes wd-gleam { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 1; background-position: -60% 0; } } .tilt { transform-style: preserve-3d; will-change: transform; } /* ─── SCROLL POLISH: lit copy, marker highlights, strike draws, progress ─── */ mark.mk { background: none; padding: 0; margin: 0; font-weight: inherit; color: #1760FF; color: color-mix(in srgb, #1760FF calc(var(--kw, 1) * 100%), #ffffff); } .vs .st { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 58%; background-size: calc(var(--st, 1) * 100%) 1.5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .wd-progress { position: fixed; left: 0; right: 0; bottom: 0; height: 3px; z-index: 9990; background: rgba(255, 255, 255, 0.06); pointer-events: none; } .wd-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--hl-a)); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 12px rgba(var(--glow), 0.9); } .glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--gl, 0); background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.11), rgba(120, 165, 255, 0.05) 40%, transparent 68%); z-index: 0; } /* ─── SECTION CURTAINS: each band slides over the last one ─── */ .wm-page { --curve: clamp(26px, 4.5vw, 64px); } .wd-band:not(.wd-first) { border-radius: var(--curve) var(--curve) 0 0; margin-top: calc(-1 * var(--curve)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 -34px 70px -30px rgba(0, 0, 0, 0.65); } .wd-band .wd-glowfield { border-radius: inherit; } /* ─── PRICING ─── */ .tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; } .tier { padding: clamp(1.5rem, 2.6vw, 2.25rem); display: grid; gap: 1.1rem; align-content: start; } .tier--pick { background: linear-gradient(180deg, rgba(23, 96, 255, 0.22), rgba(255, 255, 255, 0.05)); border-color: rgba(111, 155, 255, 0.55); box-shadow: 0 40px 90px -25px rgba(23, 96, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14); transform: translateY(-14px); } .tier__top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } .tier__name { font-family: var(--f-disp); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; } .tier__flag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 3; display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1.15rem; border-radius: 9999px; background: var(--blue); color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1; white-space: nowrap; box-shadow: 0 10px 26px -8px rgba(23, 96, 255, 0.85); } .tier__price { font-family: var(--f-disp); font-weight: 700; font-size: clamp(2.8rem, 4.4vw, 3.8rem); letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; } .tier__price small { display: block; font-family: var(--f-text); font-weight: 400; font-size: 0.85rem; letter-spacing: 0; color: var(--mute); margin-top: 0.4rem; } .tier__desc { color: var(--mute); font-size: 0.98rem; } .tier ul { list-style: none; padding: 0; font-size: 0.95rem; } .tier li { padding: 0.55rem 0 0.55rem 1.6rem; border-top: 1px solid var(--hair); position: relative; } .tier li::before { content: ''; position: absolute; left: 0; top: 0.95rem; width: 9px; height: 5px; border-left: 2px solid var(--blue-soft); border-bottom: 2px solid var(--blue-soft); transform: rotate(-45deg); } .tier .btn { width: 100%; margin-top: 0.5rem; } .retain { margin-top: clamp(3rem, 6vw, 5rem); } .retain__head { margin-bottom: 1.5rem; } .retain__list { padding: 0.25rem clamp(1rem, 2.5vw, 2rem); } .retain__row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 6fr); gap: 0.5rem 2rem; padding: 1.25rem 0; border-top: 1px solid var(--hair); align-items: baseline; } .retain__row:first-child { border-top: 0; } .retain__row b { font-family: var(--f-disp); font-size: 1.2rem; letter-spacing: -0.02em; } .retain__row .p { font-family: var(--f-disp); font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--blue-soft); } .retain__row p { color: var(--mute); font-size: 0.95rem; } .flex-note { margin-top: 1.5rem; padding: 1.1rem 1.5rem; border-radius: 9999px; border: 1px solid var(--hair); background: var(--glass); font-size: 0.95rem; text-align: center; color: #d9dde6; } /* ─── CTA ─── */ .cta { position: relative; text-align: center; display: grid; justify-items: center; gap: 2rem; } .cta .d1 { max-width: 12em; } .cta .lede { color: rgba(255, 255, 255, 0.85); } .cta .btn-row { justify-content: center; } .cta .note { color: rgba(255, 255, 255, 0.75); } .btn--outline-w { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); } .btn--outline-w:hover { background: rgba(255, 255, 255, 0.18) !important; color: #fff !important; transform: translateY(-2px); } /* ─── MODAL ─── */ .wd-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; padding: 1.5rem; } .wd-modal-overlay.open { opacity: 1; pointer-events: all; } .wd-modal { background: #0d1224; border: 1px solid rgba(111, 155, 255, 0.35); border-radius: 28px; padding: 2.25rem; max-width: 500px; width: 100%; position: relative; transform: translateY(18px); transition: transform 0.35s var(--ease); max-height: 92vh; overflow: auto; } .wd-modal-overlay.open .wd-modal { transform: none; } .wd-modal__close { position: absolute; top: 0.9rem; right: 0.9rem; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 0; color: #fff; font-size: 1.4rem; cursor: pointer; line-height: 1; } .wd-modal__close:hover { background: rgba(255, 255, 255, 0.2) !important; color: #fff !important; } .wd-modal__title { font-family: var(--f-disp); font-weight: 700; font-size: 1.8rem; letter-spacing: -0.03em; margin-bottom: 0.5rem; } .wd-modal__sub { color: var(--mute); font-size: 0.95rem; margin-bottom: 1.5rem; } .wd-modal__options { display: grid; gap: 0.6rem; } .modal-option { display: block; border: 1px solid var(--hair); border-radius: 20px; padding: 0.95rem 1.25rem; text-decoration: none; background: var(--glass); transition: background 0.2s, border-color 0.2s; } .modal-option:hover { background: rgba(23, 96, 255, 0.18); border-color: rgba(111, 155, 255, 0.5); } .modal-option__label { font-weight: 700; } .modal-option__desc { font-size: 0.88rem; color: var(--mute); } /* ─── REVEAL ─── */ .js [data-reveal] { opacity: 0; translate: 0 22px; } .js [data-reveal].revealed { opacity: 1; translate: 0 0; transition: opacity 0.8s var(--ease), translate 0.9s var(--ease); } /* ─── RESPONSIVE ─── */ @media (max-width: 1024px) { .hero-grid, .sec-head, .risk, .roi { grid-template-columns: 1fr; } .prod { grid-template-columns: 1fr; gap: 2rem; } .prod--flip .prod__copy, .prod--flip .prod__demo { order: 0; } .sec-head .lede { justify-self: start; } .risk__lead { position: static; } .roi__in { border-right: 0; border-bottom: 1px solid var(--hair); } .tiers { grid-template-columns: 1fr; } .tier--pick { transform: none; } } @media (max-width: 760px) { .work__top { grid-template-columns: 1fr; } .ledger { grid-template-columns: 1fr; } .ledger > a, .ledger > a + a { padding: 1rem 0; border-left: 0; border-bottom: 1px solid var(--hair); } .retain__row { grid-template-columns: 1fr; } .browser__stage { min-height: 320px; aspect-ratio: 4 / 3; } .vs thead { display: none; } .vs tr, .vs th, .vs td { display: block; width: 100% !important; } .vs tbody tr { padding: 0.9rem 0; border-top: 1px solid var(--hair); } .vs th, .vs td { border-top: 0 !important; padding: 0.2rem 0; } .vs td:nth-of-type(1)::after { content: ' (typical $500 to $1,500 build)'; font-size: 0.75rem; opacity: 0.7; } .vs td.is-us::after { content: ' (Wheelers build)'; font-size: 0.75rem; opacity: 0.7; } .roi__stats { grid-template-columns: 1fr; } .roi__stats > div, .roi__stats > div + div { padding: 0.9rem 0; border-left: 0; border-bottom: 1px solid var(--hair); } .btn-row .btn { flex: 1 1 100%; } .flex-note { border-radius: 24px; } } @media (prefers-reduced-motion: reduce) { .wm-page *, .wm-page *::before, .wm-page *::after { animation: none !important; } .js [data-reveal] { translate: 0 0; } .js .ln > span { transform: none; } } /* ─── PRE-FLIGHT: typography, focus, non-interactive pills ─── */ .wm-page :is(h1, h2, h3, h4), .wm-page :is(h1, h2, h3, h4) { text-wrap: balance; } .wm-page :is(p, li, dd, blockquote), .wm-page :is(p, li, dd, blockquote) { text-wrap: pretty; } .wm-page, .wm-page { font-kerning: normal; font-feature-settings: 'kern' 1, 'liga' 1; text-rendering: optimizeLegibility; } .wm-page :is(a, button, input, select, textarea, [tabindex]):focus-visible, .wm-page :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--blue-hi) !important; outline-offset: 3px; border-radius: inherit; } .wm-page span.pill, .wm-page span.pill { cursor: default; } .wm-page span.pill:hover, .wm-page span.pill:hover { background: rgba(255, 255, 255, 0.06) !important; color: #d9dde6 !important; } /* ─── 320px hardening: nothing may force a grid cell wider than the screen ─── */ .wm-page .prod__demo, .wm-page .prod__demo, .wm-page .prod__copy, .wm-page .prod__copy { min-width: 0; } .wm-page .vsim__wave, .wm-page .vsim__wave { overflow: hidden; min-width: 0; } .wm-page .vsim__wave span, .wm-page .vsim__wave span { min-width: 0; } @media (max-width: 1024px) { .wm-page .prod, .wm-page .prod { grid-template-columns: minmax(0, 1fr); } } /* ─── SUBTLE KEY PHRASES: white to a pale blue, once, feathered ─── */ body.wm-page :is(.hl, .accent, mark.mk), body.wm-page :is(.hl, .accent, mark.mk) { --kwb: #ffffff; --kwc: #7fa5ff; background-color: transparent; background-image: linear-gradient(90deg, var(--kwc) 0%, var(--kwc) calc(var(--kw, 1) * 130% - 30%), var(--kwb) calc(var(--kw, 1) * 130%), var(--kwb) 100%); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; } body.wm-page :is(p, .lede, li) mark.mk, body.wm-page :is(p, .lede, li) mark.mk { --kwb: #a9acb1; --kwc: #bcd0ff; } body.wm-page blockquote mark.mk, body.wm-page blockquote mark.mk { --kwb: #ffffff; --kwc: #bcd0ff; } body.wm-page .bg-cta :is(.hl, .accent, mark.mk), body.wm-page .bg-cta :is(.hl, .accent, mark.mk), body.wm-page #contact :is(.hl, .accent, mark.mk) { --kwb: #fff; --kwc: #fff; } /* pipeline board (authored sample) */ .wm-page .pipe, .wm-page .pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; padding: clamp(1rem, 2.4vw, 1.75rem); background: radial-gradient(120% 120% at 100% 0%, rgba(23, 96, 255, 0.28), transparent 60%), #08122e; } .wm-page .pipe__col, .wm-page .pipe__col { display: grid; gap: 0.5rem; align-content: start; min-width: 0; } .wm-page .pipe__col b, .wm-page .pipe__col b { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #a9acb1; padding: 0 0.15rem 0.35rem; border-bottom: 1px solid rgba(255, 255, 255, 0.16); } .wm-page .pipe__col i, .wm-page .pipe__col i { font-style: normal; font-size: 0.88rem; line-height: 1.3; color: #fff; padding: 0.65rem 0.7rem; border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); overflow-wrap: anywhere; } .wm-page .pipe__col:last-of-type i, .wm-page .pipe__col:last-of-type i { background: rgba(23, 96, 255, 0.35); border-color: rgba(96, 148, 255, 0.6); } .wm-page .pipe small.ill, .wm-page .pipe small.ill { grid-column: 1 / -1; color: #a9acb1; font-size: 0.78rem; margin-top: 0.4rem; } @media (max-width: 640px) { .wm-page .pipe, .wm-page .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* live-preview boxes may never exceed the screen */ @media (max-width: 760px) { .wm-page .browser__stage { width: 100%; aspect-ratio: auto; height: clamp(320px, 90vw, 560px); min-height: 0; } .wm-page .browser__load p { max-width: 100%; overflow-wrap: anywhere; } } .wm-page .browser, .wm-page .browser__stage, .wm-page .live, .wm-page .live__stage { min-width: 0; max-width: 100%; } /* ================================================================ SHARED PAGE COMPONENTS (Brands site): same system as /brands/web-design ================================================================ */ /* alternating navy/black band chain so every section sweeps into the next */ .wm-page .bgx { background: linear-gradient(180deg, #050507 0%, #0a1636 100%); } .wm-page .bgy { background: linear-gradient(180deg, #0a1636 0%, #050507 100%); } .wm-page .bg-cta { background: linear-gradient(180deg, #0a1636 0%, #0f3cc4 55%, #1760FF 100%); } .wm-page .bg-cta .wd-glow--a { background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 65%); opacity: 0.5; } /* hero: media behind, big copy left, glass panel right */ .wm-page .wd-hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: min(94vh, 880px); padding: clamp(8rem, 13vw, 10.5rem) 0 clamp(5rem, 9vw, 8rem); background: #050507; } .wm-page .wd-hero > .wd-wrap { position: relative; z-index: 2; width: 100%; } .wm-page .wd-hero__media { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; } .wm-page .wd-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .wm-page .wd-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.72) 48%, rgba(0, 0, 0, 0.42) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, #050507 100%); } .wm-page .wd-hero .hero-grid { align-items: end; } .wm-page .hero-solo { max-width: 60rem; } .wm-page .hero-solo .hero-copy { max-width: 56rem; } /* glass side panel */ .wm-page .panel { padding: clamp(1.25rem, 2.6vw, 2rem); } body.wm-page .panel__title { font-family: var(--f-disp); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.15; margin: 0; } .wm-page .plist { list-style: none; padding: 0; margin: 1rem 0 0; } .wm-page .plist > li > *, .wm-page .plist > a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 1rem; padding: 1rem 0; border-top: 1px solid var(--hair); text-decoration: none; color: inherit; align-items: baseline; } .wm-page .plist > li { padding: 0; } .wm-page .plist b { font-family: var(--f-disp); font-size: 1.12rem; letter-spacing: -0.015em; font-weight: 700; } .wm-page .plist span { color: var(--mute); font-size: 0.92rem; grid-column: 1; } .wm-page .plist .go { grid-column: 2; grid-row: 1 / span 2; color: #1760FF; font-weight: 700; align-self: center; transition: transform 0.3s var(--ease); } .wm-page .plist a:hover .go { transform: translateX(4px); } .wm-page .plist .num { color: #fff; font-family: var(--f-disp); font-size: 1.15rem; grid-column: 2; grid-row: 1 / span 2; align-self: center; } /* media frames for existing photos and videos */ .wm-page .wm-media { position: relative; border-radius: 28px; overflow: hidden; border: 1px solid var(--hair); background: #06070b; box-shadow: 0 40px 100px -30px rgba(23, 96, 255, 0.35), 0 30px 70px -20px rgba(0, 0, 0, 0.7); } .wm-page .wm-media img, .wm-page .wm-media video { display: block; width: 100%; height: 100%; object-fit: cover; } .wm-page .wm-media--tall { aspect-ratio: 4 / 5; } .wm-page .wm-media--wide { aspect-ratio: 16 / 9; } .wm-page .wm-media--photo img { height: auto; } .wm-page .prod__media { position: relative; } /* team */ .wm-page .people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } .wm-page .person { padding: 0; overflow: hidden; display: grid; align-content: start; } .wm-page .person__img { aspect-ratio: 4 / 5; background: #0a0d16; overflow: hidden; } .wm-page .person__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); } .wm-page .person:hover .person__img img { transform: scale(1.05); } .wm-page .person__body { padding: 1.25rem 1.4rem 1.5rem; display: grid; gap: 0.35rem; } body.wm-page .person__body h3 { font-family: var(--f-disp); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.1; } .wm-page .person__role { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #a9acb1; } .wm-page .person__body p { color: var(--mute); font-size: 0.92rem; line-height: 1.5; } /* logo wall */ .wm-page .logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 2.75rem; padding: clamp(1.5rem, 3vw, 2.5rem); } .wm-page .logos img { height: 34px; width: auto; max-width: 140px; object-fit: contain; opacity: 0.78; filter: brightness(1.4); transition: opacity 0.3s; } .wm-page .logos img:hover { opacity: 1; } /* photo cards that link out (solutions) */ .wm-page .pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } .wm-page .pcard { position: relative; min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.75rem; padding: clamp(1.4rem, 2.4vw, 2rem); text-decoration: none; color: #fff; overflow: hidden; } .wm-page .pcard__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transition: transform 1s var(--ease); } .wm-page .pcard__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(5, 5, 7, 0.95) 100%); } .wm-page .pcard:hover .pcard__bg { transform: scale(1.06); } .wm-page .pcard > *:not(.pcard__bg) { position: relative; z-index: 1; } body.wm-page .pcard h3 { font-family: var(--f-disp); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.025em; line-height: 1.05; } .wm-page .pcard p { color: #c9ccd2; font-size: 0.97rem; line-height: 1.5; } /* media + text tiles (feature bento) */ .wm-page .tiles2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .wm-page .tile2 { display: grid; grid-template-rows: auto 1fr; overflow: hidden; padding: 0; } .wm-page .tile2--wide { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .wm-page .tile2__media { aspect-ratio: 16 / 10; overflow: hidden; background: #06070b; } .wm-page .tile2--wide .tile2__media { aspect-ratio: auto; min-height: 320px; } .wm-page .tile2__media img, .wm-page .tile2__media video { display: block; width: 100%; height: 100%; object-fit: cover; } .wm-page .tile2__body { padding: clamp(1.4rem, 2.4vw, 2rem); display: grid; gap: 0.6rem; align-content: start; } body.wm-page .tile2__body h3 { font-family: var(--f-disp); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.85rem); letter-spacing: -0.025em; line-height: 1.08; } .wm-page .tile2__body p { color: var(--mute); font-size: 1rem; line-height: 1.55; } .wm-page .tile2--blue { background: linear-gradient(180deg, rgba(23, 96, 255, 0.5), rgba(23, 96, 255, 0.18)); border-color: rgba(111, 155, 255, 0.55); } .wm-page .tile2--blue p { color: rgba(255, 255, 255, 0.88); } /* two text columns with small blue labels */ .wm-page .cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); } .wm-page .tag { display: inline-flex; font-size: 0.85rem; font-weight: 700; padding: 0.3rem 0.9rem; border-radius: 9999px; background: rgba(23, 96, 255, 0.16); border: 1px solid rgba(23, 96, 255, 0.5); color: #fff; margin-bottom: 1.25rem; } .wm-page .cols2 .lede { margin-top: 1.25rem; max-width: none; } /* check list + quote inside glass */ .wm-page .checks { list-style: none; padding: 0; margin: 1.25rem 0 0; font-size: 1rem; } .wm-page .checks li { padding: 0.65rem 0 0.65rem 1.7rem; border-top: 1px solid var(--hair); position: relative; } .wm-page .checks li::before { content: ''; position: absolute; left: 0; top: 1.05rem; width: 9px; height: 5px; border-left: 2px solid #1760FF; border-bottom: 2px solid #1760FF; transform: rotate(-45deg); } .wm-page .quote-card { padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 1.25rem; align-content: start; } body.wm-page .quote-card blockquote { margin: 0; font-family: var(--f-disp); font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.25; } .wm-page .quote-card cite { font-style: normal; color: var(--mute); font-size: 0.95rem; } .wm-page .quote-card cite b { color: #fff; display: block; font-size: 1rem; } /* stat row */ .wm-page .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hair); margin-top: 2rem; } .wm-page .stats > div { padding: 1.4rem 1.25rem 0 0; } .wm-page .stats > div + div { padding-left: 1.25rem; border-left: 1px solid var(--hair); } .wm-page .stats b { display: block; font-family: var(--f-disp); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.03em; } .wm-page .stats span { color: var(--mute); font-size: 0.9rem; } /* media grids (campaign work, vault) */ .wm-page .mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .wm-page .mgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wm-page .mgrid .wm-media { aspect-ratio: 16 / 10; } .wm-page .mgrid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .wm-page .mgrid .wm-media--frame { aspect-ratio: 16 / 9; } /* pricing extras on solution pages */ .wm-page .tiers--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 62rem; margin: 0 auto; } /* booking steps */ .wm-page .steps { list-style: none; padding: 0; margin: 1rem 0 0; } .wm-page .steps li { padding: 1.1rem 0; border-top: 1px solid var(--hair); display: grid; gap: 0.3rem; } .wm-page .steps b { font-family: var(--f-disp); font-size: 1.2rem; letter-spacing: -0.015em; font-weight: 700; } .wm-page .steps b i { font-style: normal; color: #1760FF; margin-right: 0.5rem; } .wm-page .steps span { color: var(--mute); font-size: 0.95rem; line-height: 1.5; } /* pill-shaped anchor variant of the shared button already exists (.btn) */ .wm-page .center { text-align: center; justify-items: center; } .wm-page .mt-2 { margin-top: 2rem; } @media (max-width: 1024px) { .wm-page .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wm-page .pcards { grid-template-columns: 1fr; } .wm-page .pcard { min-height: 380px; } .wm-page .cols2 { grid-template-columns: 1fr; } .wm-page .tile2--wide { grid-template-columns: 1fr; } .wm-page .mgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wm-page .tiers--2 { grid-template-columns: 1fr; } .wm-page .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wm-page .stats > div:nth-child(3) { padding-left: 0; border-left: 0; margin-top: 1rem; } .wm-page .stats > div:nth-child(4) { margin-top: 1rem; } } @media (max-width: 760px) { .wm-page .people { grid-template-columns: 1fr; } .wm-page .tiles2, .wm-page .mgrid, .wm-page .mgrid--3 { grid-template-columns: 1fr; } .wm-page .wd-hero { min-height: 0; } .wm-page .logos img { height: 28px; } } .wm-page .sec-head--solo { grid-template-columns: 1fr; } .wm-page .prod__demo.wm-media { padding: 0; display: block; overflow: hidden; } .wm-page .prod__demo.wm-media img, .wm-page .prod__demo.wm-media video { display: block; width: 100%; height: auto; } .wm-page .mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1rem; } .wm-page .mosaic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; border: 1px solid var(--hair); display: block; } .wm-page .person__ph { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--f-disp); font-weight: 700; font-size: 3.4rem; letter-spacing: -0.03em; color: #1760FF; background: radial-gradient(80% 60% at 50% 30%, rgba(23, 96, 255, 0.25), #0a0d16); } .wm-page .steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } .wm-page .step { padding: clamp(1.5rem, 2.6vw, 2.25rem); display: grid; gap: 0.75rem; align-content: start; } body.wm-page .step h3 { font-family: var(--f-disp); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.85rem); letter-spacing: -0.025em; line-height: 1.08; } .wm-page .step p { color: var(--mute); font-size: 1rem; line-height: 1.55; } .wm-page .step .tag { justify-self: start; margin-bottom: 0.25rem; } .wm-page .step__n { font-family: var(--f-disp); font-weight: 700; font-size: 1.1rem; color: #6f9bff; } .wm-page .step__logo { height: 64px; display: flex; align-items: center; } .wm-page .step__logo img { max-height: 48px; max-width: 180px; width: auto; object-fit: contain; filter: brightness(1.4); } @media (max-width: 1024px) { .wm-page .steps3 { grid-template-columns: 1fr; } } .wm-page .wd-hero .d1 { font-size: clamp(2.6rem, 5.4vw, 4.9rem); } .wm-page .tile2--wide .tile2__media video { filter: invert(1) hue-rotate(180deg); } .wm-page .quote-card .tag { justify-self: start; margin-bottom: 0; } .wm-page .pcards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wm-page .pcards--4 .pcard { min-height: 400px; } .wm-page .pcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wm-page .pcards--3 .pcard { min-height: 340px; } @media (max-width: 1024px) { .wm-page .pcards--4, .wm-page .pcards--3 { grid-template-columns: 1fr; } } /* ─── WIDE HERO: headline across, copy + actions beneath ─── */ .wm-page .wd-hero--wide { align-items: flex-end; min-height: min(88vh, 800px); padding-bottom: clamp(3rem, 6vw, 5rem); } .wm-page .wd-hero--wide .d1 { font-size: clamp(2rem, 3.6vw, 3.5rem); line-height: 1.04; letter-spacing: -0.035em; max-width: 34em; } .wm-page .hero-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 6vw, 6rem); margin-top: clamp(1.5rem, 3vw, 2.5rem); align-items: end; } .wm-page .hero-row .lede { margin: 0; max-width: 32em; } .wm-page .hero-side { display: grid; gap: 1.5rem; justify-items: start; } .wm-page .hero-meta { list-style: none; padding: 1rem 0 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; border-top: 1px solid var(--hair); font-size: 0.9rem; color: var(--mute); width: 100%; } .wm-page .hero-meta li { display: inline-flex; align-items: center; gap: 0.55rem; } .wm-page .hero-meta li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #1760FF; box-shadow: 0 0 0 3px rgba(23, 96, 255, 0.2); } /* ─── SCROLL STRIP: big outlined type that travels with the scroll ─── */ .wm-page .wd-strip { padding: clamp(1.5rem, 3vw, 2.5rem) 0; overflow: hidden; background: linear-gradient(180deg, #050507 0%, #0a1636 100%); } .wm-page .strip__track { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); width: max-content; will-change: transform; } .wm-page .strip__track span { font-family: var(--f-disp); font-weight: 700; font-size: clamp(3rem, 8.5vw, 8rem); line-height: 1; letter-spacing: -0.04em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.55); } .wm-page .strip__track span.is-solid { color: #1760FF; -webkit-text-stroke: 0; } .wm-page .strip__track i { width: clamp(10px, 1.2vw, 16px); height: clamp(10px, 1.2vw, 16px); border-radius: 50%; background: #1760FF; flex: none; } /* ─── INDEX LIST: big typographic rows with an image wipe on hover ─── */ .wm-page .idx { border-bottom: 1px solid var(--hair); } .wm-page .idx__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.4rem 2rem; padding: clamp(1.5rem, 3vw, 2.4rem) clamp(0rem, 1vw, 1rem); border-top: 1px solid var(--hair); text-decoration: none; color: #fff; overflow: hidden; isolation: isolate; } .wm-page .idx__row::before { content: ''; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(90deg, rgba(5, 5, 7, 0.92) 0%, rgba(5, 5, 7, 0.6) 55%, rgba(5, 5, 7, 0.35) 100%), var(--bg); background-size: cover; background-position: center; opacity: 0.4; filter: saturate(0.85); transition: opacity 0.6s var(--ease), filter 0.6s var(--ease); } .wm-page .idx__row:hover::before, .wm-page .idx__row:focus-visible::before { opacity: 1; filter: saturate(1); } body.wm-page .idx__t { font-family: var(--f-disp); font-weight: 700; font-size: clamp(2rem, 5.2vw, 4.6rem); line-height: 1; letter-spacing: -0.04em; transition: transform 0.6s var(--ease); grid-column: 1; } .wm-page .idx__row:hover .idx__t { transform: translateX(clamp(0.4rem, 1.2vw, 1.2rem)); } .wm-page .idx__d { grid-column: 1; color: var(--mute); font-size: 1rem; max-width: 40em; transition: transform 0.6s var(--ease) 0.04s, color 0.3s; } .wm-page .idx__row:hover .idx__d { transform: translateX(clamp(0.4rem, 1.2vw, 1.2rem)); color: #d9dde6; } .wm-page .idx__go { grid-column: 2; grid-row: 1 / span 2; width: clamp(48px, 5vw, 68px); height: clamp(48px, 5vw, 68px); border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.4); display: grid; place-items: center; transition: background 0.3s, border-color 0.3s, transform 0.5s var(--ease); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .wm-page .idx__go svg { width: 45%; height: 45%; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .wm-page .idx__row:hover .idx__go { background: #1760FF; border-color: #1760FF; transform: rotate(-45deg); } @media (max-width: 1024px) { .wm-page .hero-row { grid-template-columns: 1fr; } } .wm-page .prod__copy .lede { margin-top: 2.1rem; } /* ─── SIMPLE HERO: one clean headline, one short line, two buttons ─── */ .wm-page .wd-hero--simple { align-items: flex-end; min-height: min(84vh, 780px); padding-bottom: clamp(3.5rem, 7vw, 6rem); } .wm-page .wd-hero--simple .hero-grid { display: block; } .wm-page .wd-hero--simple .hero-copy { max-width: 62rem; } .wm-page .wd-hero--simple .d1 { font-size: clamp(2.3rem, 4.6vw, 4.2rem); line-height: 1.03; letter-spacing: -0.035em; } .wm-page .wd-hero--simple .lede { margin-top: 1.4rem; max-width: 30em; } .wm-page .wd-hero--simple .btn-row { margin-top: 1.9rem; } .wm-page .wd-hero--simple .wd-hero__media::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.25) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, #050507 100%); } /* ─── CENTERED HERO (minimal): text, then one large frame ─── */ .wm-page .wd-hero--apple { display: block; min-height: 0; padding: clamp(8rem, 12vw, 10rem) 0 clamp(5rem, 9vw, 8rem); background: #050507; text-align: center; overflow: hidden; } .wm-page .apple__text { max-width: 74rem; margin: 0 auto; } .wm-page .wd-hero--apple .d1 { font-size: clamp(2.2rem, 4.3vw, 4.4rem); line-height: 1.05; letter-spacing: -0.04em; } .wm-page .wd-hero--apple .lede { margin: 1.5rem auto 0; max-width: 30em; text-align: center; } .wm-page .apple__ctas { display: flex; justify-content: center; align-items: center; gap: 0.75rem 1.75rem; flex-wrap: wrap; margin-top: 2.25rem; } .wm-page .apple__link { color: #4c86ff; font-weight: 700; font-size: 1.05rem; text-decoration: none; padding: 0.6rem 0.25rem; } .wm-page .apple__link span { display: inline-block; transition: transform 0.3s var(--ease); } .wm-page .apple__link:hover span { transform: translateX(4px); } .wm-page .apple__frame { position: relative; margin: clamp(3.5rem, 7vw, 6rem) auto 0; aspect-ratio: 16 / 8; border-radius: clamp(22px, 3vw, 40px); overflow: hidden; border: 1px solid var(--hair); background: #06070b; box-shadow: 0 60px 140px -40px rgba(23, 96, 255, 0.45), 0 30px 80px -30px rgba(0, 0, 0, 0.8); transform-origin: 50% 0; will-change: transform; } .wm-page .apple__frame img, .wm-page .apple__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; } @media (max-width: 760px) { .wm-page .apple__frame { aspect-ratio: 4 / 3; } } /* ─── CINE HERO: full-bleed footage, anamorphic bars open, camera timecode ─── */ .wm-page .wd-hero--cine { display: flex; align-items: flex-end; min-height: 100svh; padding: 0; background: #050507; overflow: hidden; } .wm-page .cine__media { position: absolute; inset: 0; z-index: 0; will-change: transform; } .wm-page .cine__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .wm-page .cine__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0.3) 48%, #050507 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 60%); } .wm-page .cine__bar { position: absolute; left: 0; right: 0; height: 17vh; background: #050507; z-index: 6; display: none; } .js .wm-page .cine__bar { display: block; } .wm-page .cine__bar--t { top: 0; animation: cine-t 1.7s cubic-bezier(0.76, 0, 0.24, 1) 1.5s forwards; } .wm-page .cine__bar--b { bottom: 0; animation: cine-b 1.7s cubic-bezier(0.76, 0, 0.24, 1) 1.5s forwards; } @keyframes cine-t { to { transform: translateY(-101%); } } @keyframes cine-b { to { transform: translateY(101%); } } .wm-page .cine__frame { position: absolute; inset: clamp(70px, 8vw, 96px) clamp(16px, 2.4vw, 32px) calc(var(--curve) + 18px); z-index: 3; pointer-events: none; opacity: 0.55; } .wm-page .cine__frame i { position: absolute; width: 22px; height: 22px; border: 0 solid #fff; } .wm-page .cine__frame i:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; } .wm-page .cine__frame i:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; } .wm-page .cine__frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; } .wm-page .cine__frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; } .wm-page .cine__hud { position: absolute; z-index: 4; top: clamp(86px, 9.5vw, 116px); right: clamp(34px, 4.4vw, 60px); display: flex; align-items: center; gap: 1.1rem; font-family: var(--f-text); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums; } .wm-page .cine__rec { display: inline-flex; align-items: center; gap: 0.5rem; } .wm-page .cine__rec::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; } .wm-page .cine__content { position: relative; z-index: 5; width: 100%; padding-bottom: clamp(3.5rem, 11vh, 7.5rem); } .wm-page .wd-hero--cine .d1 { font-size: clamp(2.8rem, 7.6vw, 7.4rem); line-height: 0.96; letter-spacing: -0.05em; max-width: 11em; } .wm-page .wd-hero--cine .lede { margin-top: 1.5rem; max-width: 34em; color: rgba(255, 255, 255, 0.85); font-size: clamp(1.05rem, 1.6vw, 1.35rem); } .wm-page .cine__ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 2rem; } @media (max-width: 760px) { .wm-page .cine__hud { right: 24px; } .wm-page .cine__bar { height: 12vh; } .wm-page .wd-hero--cine .d1 { max-width: 8em; } } @media (prefers-reduced-motion: reduce) { .wm-page .cine__bar { display: none !important; } } .wm-page .cine__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* the section after the cine hero starts flush, no curved black cap */ .wm-page .wd-hero--cine + .wd-band { border-radius: 0; margin-top: 0; box-shadow: none; } /* ─── AUDIT PASS ─── */ .wm-page .tie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; padding: clamp(1.5rem, 3vw, 2.5rem); } .wm-page .tie__copy .tag { margin-bottom: 0.9rem; } body.wm-page .tie__t { font-family: var(--f-disp); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -0.025em; max-width: 30em; } .wm-page .wd-tie { padding: clamp(2rem, 4vw, 3.5rem) 0; } @media (max-width: 860px) { .wm-page .tie { grid-template-columns: 1fr; } } /* brand-gradient media for the transparent-background videos */ .wm-page .tile2--brand .tile2__media { background: radial-gradient(120% 120% at 20% 0%, #1760FF 0%, #0b2a8f 35%, #050b26 100%); } .wm-page .tile2--brand video { mix-blend-mode: screen; } .wm-page .tile2--wide.tile2--brand .tile2__media video { filter: invert(1) hue-rotate(180deg) brightness(1.15); } .wm-page .tile2--blue.tile2--brand { background: linear-gradient(180deg, rgba(23, 96, 255, 0.35), rgba(23, 96, 255, 0.12)); } /* live website viewport */ .wm-page .prod--wide { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .wm-page .prod--wide.prod--flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .wm-page .live { display: grid; } .wm-page .live__bar { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 1rem; background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid var(--hair); } .wm-page .live__dots { display: flex; gap: 6px; } .wm-page .live__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); } .wm-page .live__url { flex: 1; text-align: center; font-size: 0.82rem; color: var(--mute); background: rgba(0, 0, 0, 0.35); border-radius: 9999px; padding: 0.25rem 1rem; max-width: 420px; margin: 0 auto; } .wm-page .live__open { font-size: 0.85rem; font-weight: 700; color: #4c86ff; text-decoration: none; white-space: nowrap; } .wm-page .live__stage { position: relative; aspect-ratio: 16 / 10; min-height: 420px; background: #0a0d16; display: grid; place-items: center; } .wm-page .live__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; } .wm-page .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (max-width: 1024px) { .wm-page .prod--wide, .wm-page .prod--wide.prod--flip { grid-template-columns: 1fr; } .wm-page .live__stage { min-height: 320px; aspect-ratio: 4 / 3; } } /* scroll-lit quote: turns WM blue and underlines as it scrolls in */ .wm-page mark.mk--u { background-image: linear-gradient(#1760FF, #1760FF); background-repeat: no-repeat; background-position: 0 96%; background-size: calc(var(--kw, 1) * 100%) 3px; padding-bottom: 0.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* live viewport shown full width beneath its copy */ .wm-page .prod--wide, .wm-page .prod--wide.prod--flip { grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; } .wm-page .prod--wide .prod__copy, .wm-page .prod--wide.prod--flip .prod__copy { order: 1; max-width: 62rem; } .wm-page .prod--wide .prod__demo, .wm-page .prod--wide.prod--flip .prod__demo { order: 2; } .wm-page .prod--wide .live__stage { aspect-ratio: auto; height: clamp(460px, 62vw, 760px); } .wm-page .tie { grid-template-columns: 1fr; justify-items: start; } /* ─── FEEDBACK PASS ─── */ /* key phrases in headings: white to WM blue as a gradient wipe */ .wm-page .panel .mosaic:first-child { margin-top: 0; } /* partner logos above the case-study heading */ .wm-page .partner { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } .wm-page .partner span { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); } .wm-page .partner img { height: clamp(30px, 3.2vw, 44px); width: auto; object-fit: contain; filter: brightness(1.5); } .wm-page .partner i { width: 1px; height: 28px; background: var(--hair); } /* quote and delivered list: equal, roomier tiles */ .wm-page .cols2.mt-2 { gap: clamp(1.25rem, 2.4vw, 2rem); align-items: stretch; margin-top: clamp(2.5rem, 5vw, 4rem); } .wm-page .quote-card { padding: clamp(2rem, 3.6vw, 3.25rem); gap: 1.5rem; } .wm-page .quote-card blockquote { font-size: clamp(1.5rem, 2.5vw, 2.2rem); line-height: 1.22; } .wm-page .quote-card cite { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--hair); } .wm-page .quote-card .checks { margin-top: 0.25rem; } /* case-study tiles */ .wm-page .cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 2rem); } .wm-page .case { padding: 0; overflow: hidden; display: grid; grid-template-rows: auto 1fr; } .wm-page .case__media { aspect-ratio: 16 / 9; overflow: hidden; background: #06070b; } .wm-page .case__media img, .wm-page .case__media video { display: block; width: 100%; height: 100%; object-fit: cover; } .wm-page .case__body { padding: clamp(1.6rem, 2.8vw, 2.4rem); display: grid; gap: 1.5rem; align-content: start; } .wm-page .case__body .tag { justify-self: start; margin: 0; } body.wm-page .case__body h3 { font-family: var(--f-disp); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.05; } .wm-page .case__rows { margin: 0; display: grid; gap: 0; } .wm-page .case__rows > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.4rem 1.5rem; padding: 1.1rem 0; border-top: 1px solid var(--hair); } .wm-page .case__rows dt { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #a9acb1; padding-top: 0.2rem; } .wm-page .case__rows dd { margin: 0; color: #d9dde6; font-size: 0.98rem; line-height: 1.55; } @media (max-width: 1024px) { .wm-page .cases { grid-template-columns: 1fr; } } @media (max-width: 560px) { .wm-page .case__rows > div { grid-template-columns: 1fr; } } /* campaign work: alternating 7/5 bento */ .wm-page .mgrid--bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 2rem); } .wm-page .mgrid--bento .wm-media { aspect-ratio: auto; height: clamp(260px, 30vw, 440px); } .wm-page .mgrid--bento .wm-media:nth-child(4n+1) { grid-column: span 7; } .wm-page .mgrid--bento .wm-media:nth-child(4n+2) { grid-column: span 5; } .wm-page .mgrid--bento .wm-media:nth-child(4n+3) { grid-column: span 5; } .wm-page .mgrid--bento .wm-media:nth-child(4n+4) { grid-column: span 7; } @media (max-width: 860px) { .wm-page .mgrid--bento .wm-media { grid-column: 1 / -1 !important; height: auto; aspect-ratio: 16 / 10; } } /* vault: two featured, then rows of three, two featured to close */ .wm-page .vault { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); } .wm-page .vault .wm-media { aspect-ratio: 16 / 9; grid-column: span 2; } .wm-page .vault .wm-media:nth-child(1), .wm-page .vault .wm-media:nth-child(2), .wm-page .vault .wm-media:nth-last-child(1), .wm-page .vault .wm-media:nth-last-child(2) { grid-column: span 3; } @media (max-width: 860px) { .wm-page .vault { grid-template-columns: 1fr; } .wm-page .vault .wm-media { grid-column: 1 / -1 !important; } } .wm-page .quote-card:has(blockquote) { grid-template-rows: 1fr auto; align-content: stretch; } .wm-page .quote-card:has(blockquote) blockquote { align-self: center; } /* ─── ROUND 4 ─── */ /* key words: white, then a blue-white gradient wipes across as you scroll */ .wm-page mark.mk, .wm-page .hl, .wm-page .accent { background-color: #ffffff; background-image: linear-gradient(90deg, #ffffff calc(var(--kw2, 0) * 145% - 45%), rgba(255, 255, 255, 0) calc(var(--kw2, 0) * 145%)), linear-gradient(90deg, rgba(255, 255, 255, 0) calc(var(--kw, 1) * 145% - 45%), #ffffff calc(var(--kw, 1) * 145%)), linear-gradient(90deg, #4a80ff 0%, #9dbcff 50%, #e3ecff 100%); background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .wm-page .bg-cta mark.mk, .wm-page #contact mark.mk { -webkit-text-fill-color: #fff; color: #fff; background: none; } .wm-page .quote-card blockquote mark.mk { display: inline; } /* five-step timeline (numbered, no media) */ .wm-page .prod--step { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; } .wm-page .step__num { justify-self: end; font-family: var(--f-disp); font-weight: 700; font-size: clamp(7rem, 17vw, 16rem); line-height: 0.8; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.16); transition: -webkit-text-stroke-color 0.6s var(--ease), transform 0.8s var(--ease); user-select: none; } .wm-page .prod--step.is-on .step__num { -webkit-text-stroke-color: rgba(96, 148, 255, 0.85); transform: translateX(-0.4rem); } .wm-page .step__you { margin-top: 1.5rem; padding: 1.1rem 1.4rem; border-radius: 20px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--hair); color: #d9dde6; font-size: 1rem; line-height: 1.55; max-width: 34em; } .wm-page .step__you b { display: block; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-hi); margin-bottom: 0.3rem; } @media (max-width: 1024px) { .wm-page .prod--step { grid-template-columns: 1fr; } .wm-page .step__num { justify-self: start; font-size: clamp(5rem, 22vw, 9rem); order: -1; margin-bottom: -0.5rem; } } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .wm-page .hl, .wm-page .accent, .wm-page mark.mk { background: none; color: #4a80ff; -webkit-text-fill-color: currentColor; } } .wm-page .bg-cta .hl, .wm-page .bg-cta .accent { background: none; -webkit-text-fill-color: #fff; color: #fff; } /* stacked media: setup video, then the YouTube film beneath it */ .wm-page .mstack { display: grid; } .wm-page .mstack__yt { position: relative; aspect-ratio: 16 / 9; border-top: 1px solid var(--hair); background: #050507; } .wm-page .mstack__yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ─── PRE-FLIGHT SYSTEM ─── */ /* B. click-to-play video facades: real poster, title, never a blank box */ .wm-page .yt { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; cursor: pointer; display: block; text-align: left; color: #fff; background: radial-gradient(120% 120% at 20% 0%, #1760FF 0%, #0b2a8f 40%, #050b26 100%) center / cover no-repeat; transition: filter 0.4s; } .wm-page .yt::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 40%, rgba(5, 5, 7, 0.85) 100%); } .wm-page .yt:hover { filter: brightness(1.12); background-color: transparent !important; color: #fff !important; } .wm-page .yt__play { position: absolute; left: 50%; top: 50%; width: clamp(54px, 6vw, 76px); height: clamp(54px, 6vw, 76px); margin: calc(clamp(54px, 6vw, 76px) / -2) 0 0 calc(clamp(54px, 6vw, 76px) / -2); border-radius: 50%; background: #1760FF; box-shadow: 0 12px 34px -8px rgba(23, 96, 255, 0.85); display: grid; place-items: center; transition: transform 0.35s var(--ease); } .wm-page .yt:hover .yt__play { transform: scale(1.1); } .wm-page .yt__play svg { width: 34%; height: 34%; fill: #fff; margin-left: 6%; } .wm-page .yt__title { position: absolute; left: clamp(0.9rem, 2vw, 1.4rem); right: clamp(0.9rem, 2vw, 1.4rem); bottom: clamp(0.8rem, 1.8vw, 1.2rem); font-family: var(--f-disp); font-weight: 700; font-size: clamp(0.95rem, 1.5vw, 1.2rem); letter-spacing: -0.015em; line-height: 1.15; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); } .wm-page .wm-media iframe { background: #050b26; color-scheme: dark; } .wm-page .wm-media video { background: radial-gradient(120% 120% at 20% 0%, #14337d 0%, #08122e 70%); } .wm-page .mstack__yt { background: radial-gradient(120% 120% at 20% 0%, #14337d 0%, #08122e 70%); } .wm-page .yt-sound { position: absolute; right: 14px; bottom: 14px; z-index: 3; width: 46px; height: 46px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(5, 8, 20, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; cursor: pointer; display: grid; place-items: center; transition: transform 0.25s var(--ease), background-color 0.2s; } .wm-page .yt-sound:hover { background-color: #1760FF !important; color: #fff !important; transform: scale(1.08); } .wm-page .yt-sound svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .wm-page .yt-sound .on { display: none; } .wm-page .yt-sound[aria-pressed="true"] .on { display: block; } .wm-page .yt-sound[aria-pressed="true"] .off { display: none; } /* D. home service rows: whole row is the target */ .wm-page .idx__row { transition: background-color 0.4s var(--ease), transform 0.5s var(--ease); } .wm-page .idx__row:hover { background-color: rgba(255, 255, 255, 0.035); } .wm-page .idx__row:focus-visible { outline-offset: -4px !important; background-color: rgba(23, 96, 255, 0.12); } .wm-page .idx__row:focus-visible::before { clip-path: inset(0 0 0 0); } .wm-page .idx__row:focus-visible .idx__go { background: #1760FF; border-color: #1760FF; transform: rotate(-45deg); } .wm-page .idx__row:active { transform: scale(0.995); } /* D. media tiles: contained artwork, hover lift, fluid type */ .wm-page .tile2 { transition: transform 0.5s var(--ease), box-shadow 0.5s; } .wm-page .tile2:hover { box-shadow: 0 40px 90px -25px rgba(23, 96, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } .wm-page .tile2--brand .tile2__media { display: grid; place-items: center; padding: clamp(1rem, 3vw, 2.25rem); } .wm-page .tile2--brand .tile2__media video { width: 100%; height: 100%; max-height: 100%; object-fit: contain; transition: transform 0.8s var(--ease); } .wm-page .tile2--brand:hover .tile2__media video { transform: scale(1.05); } .wm-page .tile2--wide.tile2--brand .tile2__media { min-height: clamp(280px, 30vw, 420px); } .wm-page .tile2--wide .tile2__body { align-content: center; } body.wm-page .tile2__body h3 { font-size: clamp(1.4rem, 2.4vw, 2.1rem); } /* E. booking interest chips */ .wm-page .chips { display: flex; flex-wrap: wrap; gap: 0.6rem; } .wm-page .chip { min-height: 46px; padding: 0.55rem 1.3rem; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.05); color: #fff; font: 700 0.98rem var(--f-text); cursor: pointer; transition: transform 0.25s var(--ease), background-color 0.2s, border-color 0.2s; } .wm-page .chip:hover { background-color: rgba(255, 255, 255, 0.14) !important; color: #fff !important; transform: translateY(-2px); } .wm-page .chip.is-active { background: #1760FF; border-color: #1760FF; box-shadow: 0 8px 26px -8px rgba(23, 96, 255, 0.8); } .wm-page .chip.is-active:hover { background: #0f4de0 !important; } .wm-page .chip-status { min-height: 1.6em; margin-top: 1.25rem; color: var(--mute); font-size: 1rem; } .wm-page .chip-status a { color: var(--blue-hi); font-weight: 700; text-underline-offset: 3px; } .wm-page .proof { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--hair); display: grid; gap: 1rem; } body.wm-page .proof blockquote { margin: 0; font-family: var(--f-disp); font-weight: 700; font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.02em; } .wm-page .proof cite { font-style: normal; font-size: 0.85rem; color: var(--mute); } .wm-page .proof__row { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; font-size: 0.9rem; color: #d9dde6; } .wm-page .proof__row b { color: #fff; font-family: var(--f-disp); font-size: 1.05rem; } /* F. mobile: no camera overlay, tighter chrome */ @media (max-width: 767px) { .wm-page .cine__hud { display: none !important; } .wm-page .cine__frame { inset: 76px 14px calc(var(--curve) + 10px); } } @media (max-width: 380px) { .wm-page .btn { padding-left: 1.25rem; padding-right: 1.25rem; } .wm-page .d2 { font-size: clamp(2rem, 9.5vw, 2.4rem); } } @media (min-width: 1921px) { .wm-page .wd-wrap, .web-design-page .wd-wrap { max-width: 1560px; } .wm-page .idx__t { font-size: 5.6rem; } } /* ─── ROUND 7: service timeline visuals + booking ─── */ .wm-page .svc__n { position: absolute; left: clamp(0.9rem, 2vw, 1.5rem); top: clamp(0.5rem, 1.4vw, 1rem); z-index: 2; font-family: var(--f-disp); font-weight: 700; font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.55); pointer-events: none; } .wm-page .svc__brand { aspect-ratio: 16 / 10; display: grid; place-items: center; padding: clamp(1.25rem, 3vw, 2.5rem); background: radial-gradient(120% 120% at 20% 0%, #1760FF 0%, #0b2a8f 38%, #050b26 100%); } .wm-page .svc__brand video { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; background: transparent; } .wm-page .svc__map video { filter: invert(1) hue-rotate(180deg) brightness(1.15); } .wm-page .prod__demo .svc__brand video { transition: transform 0.8s var(--ease); } .wm-page .prod__demo:hover .svc__brand video { transform: scale(1.05); } .wm-page .msgs { aspect-ratio: 16 / 10; display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem); background: radial-gradient(120% 120% at 100% 0%, rgba(23, 96, 255, 0.3), transparent 60%), #08122e; } .wm-page .msgs .mc-msg { animation: none; font-size: 0.98rem; } .wm-page .msgs .mc-msg--sys { align-self: flex-start; } .wm-page .msgs small.ill { color: var(--mute); font-size: 0.78rem; margin-top: 0.4rem; } .wm-page .prod__demo.wm-media .msgs, .wm-page .prod__demo.wm-media .svc__brand { display: flex; } .wm-page .prod__demo.wm-media .svc__brand { justify-content: center; align-items: center; } .wm-page .svc__links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; } /* booking */ .wm-page .svc { border-top: 1px solid var(--hair); } .wm-page .svc__row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) auto; gap: 1rem 2.5rem; align-items: center; padding: clamp(1.4rem, 2.6vw, 2rem) clamp(0.25rem, 1vw, 1rem); border-bottom: 1px solid var(--hair); transition: background-color 0.3s; } .wm-page .svc__row.is-active { background: rgba(23, 96, 255, 0.14); } body.wm-page .svc__t { font-family: var(--f-disp); font-weight: 700; font-size: clamp(1.5rem, 2.8vw, 2.3rem); letter-spacing: -0.03em; line-height: 1.05; margin: 0; } .wm-page .svc__d { color: var(--mute); margin-top: 0.5rem; max-width: 40em; } .wm-page .svc__from { color: #d9dde6; font-size: 0.95rem; } .wm-page .svc__from b { display: block; font-family: var(--f-disp); font-size: 1.35rem; letter-spacing: -0.02em; color: #fff; } .wm-page .svc__act { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; } .wm-page .svc__act .btn { min-height: 44px; padding: 0.5rem 1.2rem; font-size: 0.92rem; } .wm-page .svc__act .btn.is-active { background: #1760FF; border-color: #1760FF; color: #fff; } .wm-page .pick { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; } .wm-page .pick .chip-status { margin: 0 0 1.25rem; font-size: 1.05rem; color: #d9dde6; } @media (max-width: 1024px) { .wm-page .svc__row { grid-template-columns: 1fr; } .wm-page .svc__act { justify-content: flex-start; } .wm-page .pick { grid-template-columns: 1fr; } } .wm-page .msgs { padding-top: clamp(4.5rem, 8vw, 6.5rem); } .wm-page .steps b i, .wm-page .plist .go, .wm-page .checks li::before { color: #6f9bff; } /* ─── ROUND 8: numeral-free steps ─── */ .wm-page .prod--step { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: 1rem clamp(2rem, 6vw, 6rem); } .wm-page .prod--step .prod__copy { display: contents; } .wm-page .prod--step .prod__copy .d2 { grid-column: 1; grid-row: 1 / span 2; } .wm-page .prod--step .prod__copy .lede { grid-column: 2; margin-top: 0.5rem; } .wm-page .prod--step .prod__copy .step__you { grid-column: 2; margin-top: 0; } @media (max-width: 1024px) { .wm-page .prod--step { grid-template-columns: minmax(0, 1fr); } .wm-page .prod--step .prod__copy .d2, .wm-page .prod--step .prod__copy .lede, .wm-page .prod--step .prod__copy .step__you { grid-column: 1; grid-row: auto; } } .wm-page .steps b i { display: none; } /* ─── ROUND 10: growth-agency homepage + booking ─── */ .wm-page [id] { scroll-margin-top: 92px; } .wm-page .wd-hero--growth { align-items: center; min-height: min(96vh, 900px); } .wm-page .wd-hero--growth .cine__content { padding-top: clamp(6rem, 12vh, 9rem); padding-bottom: clamp(3rem, 8vh, 5.5rem); } .wm-page .wd-hero--growth .d1 { font-size: clamp(2.9rem, 7.4vw, 7rem); max-width: 12em; } .wm-page .wd-hero--growth .lede { max-width: 34em; } .wm-page .hero-micro { margin-top: 1.1rem; font-size: 0.95rem; color: rgba(255, 255, 255, 0.86); } .wm-page .hero-proof2 { margin-top: 1.75rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, 0.2); max-width: 34em; font-size: 0.92rem; color: rgba(255, 255, 255, 0.78); } .wm-page .proofbar { padding: clamp(3rem, 6vw, 5rem) 0; } .wm-page .proofbar .logos { margin-top: 0; } /* flow strip */ .wm-page .fs { list-style: none; margin: 0 0 clamp(2.5rem, 5vw, 4rem); padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0.4rem; align-items: center; } .wm-page .fs li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.05rem; border-radius: 9999px; border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.05); font-size: 0.95rem; font-weight: 500; color: #eaf0ff; } .wm-page .fs li:last-child { background: #1760FF; border-color: #1760FF; color: #fff; font-weight: 700; } .wm-page .fs li:not(:last-child)::after { content: ''; width: 7px; height: 7px; margin-left: 0.5rem; border-top: 1.5px solid var(--blue-hi); border-right: 1.5px solid var(--blue-hi); transform: rotate(45deg); } .wm-page .leak-close { max-width: 26em; margin-top: clamp(2.5rem, 5vw, 4rem); } /* illustrative ad-distribution card */ .wm-page .adflow { aspect-ratio: 16 / 10; display: flex; flex-direction: column; justify-content: center; gap: 0.7rem; padding: clamp(1.25rem, 3vw, 2.25rem); background: radial-gradient(120% 120% at 0% 0%, rgba(23, 96, 255, 0.32), transparent 60%), #08122e; } .wm-page .adflow div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.25rem 1rem; align-items: baseline; padding: 0.85rem 1rem; border-radius: 14px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); } .wm-page .adflow b { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #a9acb1; } .wm-page .adflow span { color: #fff; font-size: 0.98rem; } .wm-page .adflow small.ill { color: #a9acb1; font-size: 0.78rem; } /* offer cards */ .wm-page .tiers--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wm-page .tier__price--range { font-size: clamp(2rem, 3vw, 2.7rem); } .wm-page .tier__best { color: #d9dde6; font-size: 0.93rem; padding-top: 0.25rem; } .wm-page .tier__best b { color: var(--blue-hi); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 0.35rem; } .wm-page .tier__ad { font-size: 0.85rem; color: #a9acb1; padding: 0.75rem 0.9rem; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--hair); } .wm-page .bench { margin-top: clamp(2rem, 4vw, 3.5rem); padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 0.6rem; max-width: 60rem; } body.wm-page .bench h3 { font-family: var(--f-disp); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.1; margin: 0; } .wm-page .bench p { color: #d9dde6; font-size: 1.05rem; } .wm-page .notfit { margin-top: 1.5rem; color: var(--mute); max-width: 52rem; } .wm-page .addon { margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.4rem, 2.6vw, 2.2rem); display: grid; gap: 0.5rem; max-width: 60rem; } body.wm-page .addon h3 { font-family: var(--f-disp); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; margin: 0; } .wm-page .addon p { color: #d9dde6; } /* proof */ .wm-page .builds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2rem; border-top: 1px solid var(--hair); } .wm-page .builds > * { display: grid; gap: 0.2rem; align-content: start; padding: 1.25rem 1.25rem 0 0; text-decoration: none; color: #fff; } .wm-page .builds > * + * { padding-left: 1.25rem; border-left: 1px solid var(--hair); } .wm-page .builds b { font-family: var(--f-disp); font-size: 1.3rem; letter-spacing: -0.02em; } .wm-page .builds span { color: var(--mute); font-size: 0.92rem; } .wm-page .builds img { height: 30px; width: auto; max-width: 150px; object-fit: contain; filter: brightness(1.4); margin-bottom: 0.4rem; } .wm-page a.builds__a:hover b { color: var(--blue-hi); } .wm-page .metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; } .wm-page .metric { padding: 1.1rem 1.2rem; border-radius: 20px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--hair); display: grid; gap: 0.25rem; } .wm-page .metric b { font-family: var(--f-disp); font-size: 1.15rem; letter-spacing: -0.02em; color: #fff; } .wm-page .metric span { color: var(--mute); font-size: 0.88rem; } .wm-page .metric b.is-num { font-size: 1.9rem; color: var(--blue-hi); } .wm-page .subhead { margin-top: clamp(2.5rem, 5vw, 4rem); } @media (max-width: 1024px) { .wm-page .tiers--3 { grid-template-columns: 1fr; } .wm-page .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .wm-page .builds { grid-template-columns: 1fr; } .wm-page .builds > *, .wm-page .builds > * + * { padding: 1rem 0; border-left: 0; border-bottom: 1px solid var(--hair); } } /* fit, call plan, embedded calendar, faq */ .wm-page .bookgrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; } .wm-page .bookcopy { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); } body.wm-page .bookcopy h3 { font-family: var(--f-disp); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; margin: 0 0 0.25rem; } .wm-page .xlist { list-style: none; padding: 0; margin: 0.75rem 0 0; } .wm-page .xlist li { padding: 0.65rem 0 0.65rem 1.7rem; border-top: 1px solid var(--hair); position: relative; color: #d9dde6; } .wm-page .xlist li::before, .wm-page .xlist li::after { content: ''; position: absolute; left: 0; top: 1.3rem; width: 11px; height: 2px; background: #8a8f99; border-radius: 2px; } .wm-page .xlist li::before { transform: rotate(45deg); } .wm-page .xlist li::after { transform: rotate(-45deg); } .wm-page .embed { position: relative; min-height: 840px; overflow: hidden; background: #0b1226; } .wm-page .embed iframe { position: relative; z-index: 2; display: block; width: 100%; height: 860px; border: 0; background: transparent; } .wm-page .embed__fallback { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; text-align: center; gap: 0.5rem; padding: 2rem; color: var(--mute); } .wm-page .embed__fallback a { color: var(--blue-hi); font-weight: 700; } .wm-page .faq { margin-top: clamp(3rem, 6vw, 5rem); max-width: 52rem; } .wm-page .faq details { border-top: 1px solid var(--hair); padding: 1.15rem 0; } .wm-page .faq details:last-child { border-bottom: 1px solid var(--hair); } .wm-page .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; font-family: var(--f-disp); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.015em; } .wm-page .faq summary::-webkit-details-marker { display: none; } .wm-page .faq summary::after { content: ''; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--blue-hi); border-bottom: 2px solid var(--blue-hi); transform: rotate(45deg); transition: transform 0.4s var(--ease); } .wm-page .faq details[open] summary::after { transform: rotate(-135deg); } .wm-page .faq p { margin-top: 0.75rem; color: #d9dde6; max-width: 44rem; } .wm-page .book-top { padding-top: clamp(7.5rem, 11vw, 9.5rem); } .wm-page .book-top .d1 { font-size: clamp(2.5rem, 5.6vw, 5rem); max-width: 14em; } .wm-page .book-top .lede { margin-top: 1.25rem; max-width: 36em; } .wm-page .book-top .bookgrid { margin-top: clamp(2rem, 4vw, 3.5rem); } .wm-page .qcard { padding: clamp(1.25rem, 2.4vw, 1.8rem); } body.wm-page .qcard blockquote { margin: 0; font-family: var(--f-disp); font-weight: 700; font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.02em; } .wm-page .qcard cite { display: block; margin-top: 0.75rem; font-style: normal; font-size: 0.88rem; color: var(--mute); } @media (max-width: 1024px) { .wm-page .bookgrid { grid-template-columns: 1fr; } .wm-page .embed { min-height: 780px; } } /* sticky mobile CTA */ .wm-page .stickycta { position: fixed; left: 12px; right: 12px; bottom: 16px; z-index: 9985; display: none; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); } .wm-page .stickycta .btn { width: 100%; box-shadow: 0 16px 40px -10px rgba(23, 96, 255, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.1); } .wm-page .stickycta.is-on { opacity: 1; transform: none; pointer-events: auto; } @media (max-width: 860px) { .wm-page .stickycta { display: block; } } /* ROUND 11: equal-height tiers, pinned CTAs, calmer word spacing */ .wm-page .tiers .tier { display: flex; flex-direction: column; gap: 1.1rem; } .wm-page .tiers .tier .btn { margin-top: auto; padding-left: 1rem; padding-right: 1rem; font-size: 0.97rem; text-align: center; justify-content: center; } .wm-page .tiers .tier .tier__ad { margin-top: auto; } .wm-page .tiers .tier .tier__ad + .btn { margin-top: 0.4rem; } .wm-page .tiers .tier--pick { transform: none; } .wm-page .tiers .tier__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } body.wm-page .quote-card blockquote, body.wm-page .qcard blockquote, body.wm-page .stats b, body.wm-page .d1, body.wm-page .d2 { word-spacing: 0.08em; } .wm-page .tier__price--range { font-size: clamp(1.5rem, 2.05vw, 2rem); white-space: nowrap; letter-spacing: -0.035em; } @media (min-width: 1025px) and (max-width: 1280px) { .wm-page .tiers--3 .tier .btn { font-size: 0.86rem; padding-left: 0.5rem; padding-right: 0.5rem; } } /* ROUND 12: collapsed "what's inside" list inside an engagement card */ .wm-page .tier .faq { margin-top: 0; max-width: none; } .wm-page .tier .faq details { padding: 0.85rem 0; } .wm-page .tier .faq summary { font-size: 1rem; } .wm-page .tier .faq ul { margin-top: 0.6rem; } .wm-page .yt { border-radius: 0 !important; } /* ROUND 13: proof tile directly under an engagement card */ .wm-page .tiers--3 .tier__proof { grid-column: 2; grid-row: 2; display: grid; gap: 0.9rem; align-content: start; } .wm-page .tier__proof iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } @media (max-width: 1024px) { .wm-page .tiers--3 .tier__proof { grid-column: auto; grid-row: auto; } } /* fit funnel: "Should we work together?" block, used on every brands page */ .wm-page .cols2 > .fit-why { grid-column: 1 / -1; } @media (min-width: 1025px) { .wm-page .fit-why .checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 5rem); } } .wm-page .fit-cta { margin-top: clamp(2rem, 4vw, 3rem); } /* careers: deployment-brief template shared by every job posting */ .wm-page .brief-wrap { max-width: 48rem; } .wm-page .eyebrow { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-soft); margin-bottom: 1rem; } .wm-page .brief-data { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .wm-page .brief-data > div { padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.1rem, 2.5vw, 1.75rem); border-right: 1px solid var(--hair); } .wm-page .brief-data > div:last-child { border-right: 0; } .wm-page .brief-data__label { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-soft); margin-bottom: 0.4rem; } .wm-page .brief-data__value { display: block; font-family: var(--f-disp); font-weight: 700; font-size: 1rem; color: #fff; } .wm-page .brief-section { margin-top: clamp(2.5rem, 5vw, 4rem); } .wm-page .brief-section:first-child { margin-top: 0; } .wm-page .brief-section__label { display: flex; align-items: center; gap: 0.75rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-soft); margin-bottom: 1.25rem; } .wm-page .brief-section__label::after { content: ''; flex: 1; height: 1px; background: var(--hair); } .wm-page .brief-section .lede { max-width: none; margin-bottom: 1.1rem; } .wm-page .brief-section .lede:last-child { margin-bottom: 0; } /* careers: confirmation page (thank-you), and anywhere else a centered status message is needed */ .wm-page .confirm { min-height: 70svh; display: grid; place-items: center; text-align: center; padding: clamp(6rem, 12vw, 9rem) 0 clamp(4rem, 8vw, 6rem); } .wm-page .confirm__in { max-width: 34rem; display: grid; justify-items: center; gap: 1.1rem; } .wm-page .confirm__icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(23, 96, 255, 0.12); border: 2px solid rgba(23, 96, 255, 0.4); display: grid; place-items: center; box-shadow: 0 0 0 8px rgba(23, 96, 255, 0.06), 0 0 32px rgba(23, 96, 255, 0.22); animation: confirm-pulse 2.8s ease-in-out infinite; } .wm-page .confirm__icon svg { width: 32px; height: 32px; stroke: var(--blue-soft); } @keyframes confirm-pulse { 0%, 100% { box-shadow: 0 0 0 8px rgba(23, 96, 255, 0.06), 0 0 32px rgba(23, 96, 255, 0.22); } 50% { box-shadow: 0 0 0 16px rgba(23, 96, 255, 0.1), 0 0 60px rgba(23, 96, 255, 0.38); } } .wm-page .confirm__divider { width: 48px; height: 2px; background: rgba(23, 96, 255, 0.4); border-radius: 2px; } @media (prefers-reduced-motion: reduce) { .wm-page .confirm__icon { animation: none; } } /* careers: open-positions grid card */ .wm-page .pos-card { background: var(--glass); border: 1px solid var(--hair); border-radius: 28px; padding: clamp(1.75rem, 3vw, 2.25rem); display: flex; flex-direction: column; justify-content: space-between; min-height: 340px; cursor: pointer; -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); box-shadow: 0 30px 70px -20px rgba(10, 22, 54, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.09); transition: transform 0.3s var(--ease), border-color 0.3s; } .wm-page .pos-card:hover { border-color: rgba(111, 155, 255, 0.4); transform: translateY(-4px); } .wm-page .pos-badge { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-soft); border: 1px solid rgba(111, 155, 255, 0.4); padding: 3px 10px; border-radius: 9999px; display: inline-block; margin-bottom: 1.1rem; } .wm-page .pos-card h3 { font-family: var(--f-disp); font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 0.65rem; line-height: 1.15; } .wm-page .pos-card p { color: var(--mute); font-size: 0.9rem; line-height: 1.75; margin-bottom: 1.5rem; } .wm-page .pos-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--hair); margin-bottom: 1.75rem; } .wm-page .pos-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; color: var(--mute); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--hair); padding: 5px 12px; border-radius: 9999px; } .wm-page .pos-tag svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .wm-page .pos-card .btn { width: 100%; } @media (max-width: 640px) { .wm-page .brief-data { grid-template-columns: 1fr; } .wm-page .brief-data > div { border-right: 0; border-bottom: 1px solid var(--hair); } .wm-page .brief-data > div:last-child { border-bottom: 0; } } /* ─── CATALOGUE (academy store / courses / resources): filter pills + a grid of .pos-card tiles ─── */ .wm-page .cfilters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.5rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); } .wm-page .cfilters .note { margin-left: auto; } .wm-page .cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: clamp(1.25rem, 2.5vw, 1.75rem); } .wm-page .cgrid .pos-card { min-height: 0; } .wm-page .pos-card[hidden] { display: none !important; } .wm-page .apple__link--off { color: var(--mute); pointer-events: none; } .wm-page .wf--inline { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; width: 100%; max-width: 34rem; } .wm-page .wf--inline .wf__input { flex: 1 1 14rem; } /* ─── THREE-COLUMN TILE ROW (sibling of .cols2; used with .quote-card.glass.tilt tiles) ─── */ .wm-page .cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 2rem); align-items: stretch; } .wm-page .cols3.mt-2 { margin-top: clamp(2.5rem, 5vw, 4rem); } .wm-page .cols2.mt-2 + .cols2.mt-2 { margin-top: clamp(1.25rem, 2.4vw, 2rem); } @media (max-width: 1024px) { .wm-page .cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .wm-page .cols3 { grid-template-columns: 1fr; } } body.wm-page .quote-card--sm blockquote { font-family: var(--f-text); font-size: 1.02rem; line-height: 1.65; font-weight: 400; letter-spacing: 0; color: #e6e6e6; } .wm-page .quote-card--sm h3 { margin: 0; } .wm-page .quote-card--sm p { color: var(--mute); font-size: 1rem; line-height: 1.65; } .wm-page .quote-card--sm .eyebrow { display: block; } /* ─── FORMS (shared by careers apply + academy waitlist): black fields, hairline borders, accent focus ─── */ .wm-page .wf { display: grid; gap: 1.5rem; } .wm-page .wf__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } @media (max-width: 720px) { .wm-page .wf__row { grid-template-columns: 1fr; } } .wm-page .wf__label { display: block; font-size: 0.95rem; font-weight: 600; color: #fff; margin-bottom: 0.5rem; } .wm-page .wf__input, .wm-page .wf__select, .wm-page .wf__text { width: 100%; background: rgba(0, 0, 0, 0.35); color: #fff; border: 1px solid var(--hair); border-radius: 12px; padding: 0.8rem 1rem; font-family: var(--f-text); font-size: 1rem; line-height: 1.4; transition: border-color 0.25s, box-shadow 0.25s; } .wm-page .wf__input::placeholder, .wm-page .wf__text::placeholder { color: #767676; } .wm-page .wf__input:focus, .wm-page .wf__select:focus, .wm-page .wf__text:focus { outline: none; border-color: var(--blue-soft); box-shadow: 0 0 0 3px rgba(var(--glow), 0.18); } .wm-page .wf__select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 2.75rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A1A3A5' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; } .wm-page .wf__select option { background: #111; color: #fff; } .wm-page .wf__text { resize: vertical; min-height: 7rem; } .wm-page .wf__drop { display: block; position: relative; border: 2px dashed rgba(255, 255, 255, 0.22); border-radius: 16px; padding: 2rem; text-align: center; cursor: pointer; transition: border-color 0.25s, background 0.25s; } /* the real file input stays focusable (visually hidden, not display:none) so a missing required file shows the browser's own validation bubble on the drop zone */ .wm-page .wf__pick { position: absolute; left: 50%; bottom: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; } .wm-page .wf__drop:focus-within { border-color: var(--blue-soft); } .wm-page .wf__drop svg { display: inline-block; } .wm-page .wf__drop:hover, .wm-page .wf__drop.dragover { border-color: var(--blue-soft); background: rgba(var(--glow), 0.06); } .wm-page .wf__drop svg { width: 40px; height: 40px; stroke: var(--blue-soft); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .wm-page .wf__drop b { display: block; color: #fff; margin-top: 0.75rem; font-weight: 600; } .wm-page .wf__drop small { display: block; color: var(--mute); font-size: 0.85rem; margin-top: 0.25rem; } .wm-page .wf__file { color: var(--blue-soft); font-size: 0.9rem; margin-top: 0.5rem; } .wm-page .wf__note { color: var(--mute); font-size: 0.85rem; text-align: center; margin-top: 1rem; } .wm-page .wf__ok { background: rgba(var(--glow), 0.1); border: 1px solid rgba(var(--glow), 0.35); border-radius: 16px; padding: 1.5rem; text-align: center; } .wm-page .wf__ok h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; } .wm-page .wf__actions { text-align: center; padding-top: 1rem; } .wm-page .hidden { display: none !important; }