/* ============================================================ Jeero marketing site — "Dispatch" theme All rules are scoped under .mkt (set on the landing layout ) so nothing leaks into the authenticated app, which keeps using daisyUI. The marketing site is light only. Fonts (Sora + IBM Plex Sans/Mono) are loaded in the layout. ============================================================ */ .mkt { --teal: #17AEAC; --teal-deep: #0B6E6C; --teal-deeper: #095857; --teal-tint: #E6F6F5; --navy: #0F172A; --slate: #475569; --slate-light: #64748B; --orange: #FF5A1F; --gold: #FFD43B; --white: #ffffff; --paper: #ffffff; --mist: #F4F7F8; --line: #E2E8EC; --ink: #0F172A; --shadow-lg: 0 30px 70px -20px rgba(11, 110, 108, .55); --shadow-card: 0 10px 30px -12px rgba(15, 23, 42, .18); font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; color: var(--ink); background: var(--white); line-height: 1.6; } .mkt h1, .mkt h2, .mkt h3, .mkt h4 { font-family: "Sora", ui-sans-serif, system-ui, sans-serif; line-height: 1.12; letter-spacing: -.02em; } .mkt a { text-decoration: none; } .mkt img { display: block; max-width: 100%; } .mkt :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; } /* Horizontal padding only. The `padding: 0 24px` shorthand this replaces also zeroed vertical padding, and since it matches Tailwind's py-* at equal specificity while loading later, it silently won — every page that combined the two (help index, help article, blog post) rendered flush against the navbar and the footer. */ .landing-container { max-width: 1180px; margin: 0 auto; padding-inline: 24px; } .mkt .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .mkt .kicker { color: var(--teal-deep); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: 12px; } /* ---------- Buttons ---------- */ .mkt .btn-mkt { display: inline-flex; align-items: center; gap: 9px; font-family: "Sora", sans-serif; font-weight: 700; font-size: 15px; padding: 14px 26px; border-radius: 999px; cursor: pointer; border: 2px solid transparent; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; white-space: nowrap; } .mkt .btn-mkt svg { width: 18px; height: 18px; } .mkt .btn-white { background: var(--white); color: var(--teal-deep); box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .35); } .mkt .btn-white:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(0, 0, 0, .45); } /* teal-deep keeps white-on-teal at AA contrast; brand teal is reserved for large non-text accents */ .mkt .btn-teal { background: var(--teal-deep); color: #fff; box-shadow: 0 10px 26px -10px rgba(23, 174, 172, .4); } .mkt .btn-teal:hover { background: var(--teal-deeper); transform: translateY(-2px); } .mkt .btn-ghost-mkt { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .78); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .mkt .btn-ghost-mkt:hover { background: rgba(255, 255, 255, .22); transform: translateY(-2px); } /* line-height is pinned to a whole pixel: the inherited 1.6 against this 14px font gives a 22.4px line box, so the button lands on a fractional height and its 2px stroke straddles device pixels on a 2x display — which reads as a soft, slightly uneven border. Solid variants hide it; the outlined one shows it. 22px makes the box exactly 48px, so the edges land on whole pixels. The larger .btn-mkt buttons already compute to whole pixels (15 x 1.6 = 24). */ .mkt .btn-nav { background: var(--teal-deep); color: #fff; padding: 11px 20px; font-size: 14px; line-height: 22px; } .mkt .btn-nav:hover { background: var(--teal-deeper); } .mkt .btn-outline-teal { background: transparent; color: var(--teal-deep); border-color: var(--teal-deep); } .mkt .btn-outline-teal:hover { background: var(--teal-deep); color: #fff; } /* ---------- Nav ---------- */ .landing-nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line); } /* Three zones, not one even spread: brand and primary links read as a single left-hand group, then `margin-left: auto` on the actions pins the account cluster to the right edge. `space-between` used to float the links in the middle of the bar, which left them equidistant from the logo and the buttons and gave the eye no grouping to hold on to. */ .mkt .nav-inner { display: flex; align-items: center; height: 72px; } .mkt .nav-brand { display: flex; align-items: center; color: var(--navy); } .mkt .nav-brand svg { height: 30px; width: auto; } /* Wrapper collapses on mobile (see the max-width: 1120px block); on desktop it vanishes so `.nav-links` and `.nav-actions` stay direct flex children of the bar. */ .mkt .nav-collapse { display: contents; } .mkt .nav-links { display: flex; align-items: center; gap: 28px; margin-left: 44px; } .mkt .nav-links a { position: relative; font-weight: 500; font-size: 15px; color: var(--slate); transition: color .15s ease; } .mkt .nav-links a:hover { color: var(--teal-deep); } /* Hover affordance: a chevron slides out from under the label rather than appearing beside it, so the motion reads as the link leaning toward its destination. Absolutely positioned — reserving inline space would either pad every link permanently or reflow the row on hover, nudging the neighbours. It lives inside the 28px gap, so it stays visually attached to its own link. Generated content, so it stays out of the accessibility tree — it is decorative and carries no meaning the label doesn't already state. Gated on a real hover-capable pointer: on touch there is no hover state to reveal it, and in the mobile drawer the links are full-width rows where `left: 100%` would push the glyph past the panel's padding. */ @media (hover: hover) and (pointer: fine) { .mkt .nav-links a::after { content: "›"; position: absolute; left: 100%; top: 50%; margin-left: 2px; font-size: 17px; line-height: 0; font-weight: 600; opacity: 0; transform: translate(-4px, -50%); transition: opacity .2s cubic-bezier(.22, 1, .36, 1), transform .2s cubic-bezier(.22, 1, .36, 1); } .mkt .nav-links a:hover::after, .mkt .nav-links a:focus-visible::after { opacity: 1; transform: translate(0, -50%); } } .mkt .nav-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; } .mkt .nav-login { font-weight: 600; font-size: 15px; color: var(--navy); } .mkt .nav-login:hover { color: var(--teal-deep); } /* `margin-left: auto` here, not `justify-content: space-between` on .nav-inner: below 1120px .nav-collapse leaves the flex flow (display: none when closed, position: absolute when open), so .nav-actions' own auto margin stops acting on the bar and the toggle is the only thing left to pin right. */ .mkt .nav-toggle { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--navy); } /* Language switch: a quiet text control, weighted like a nav link rather than an action, so it never competes with Get started. */ .mkt .lang-toggle-form { display: flex; align-items: center; gap: 12px; } .mkt .lang-toggle { background: none; border: 0; padding: 0; font: inherit; font-size: 15px; font-weight: 500; transition: color .15s ease; } .mkt .lang-toggle--nav { color: var(--slate); } .mkt .lang-toggle--nav:hover { color: var(--teal-deep); } .mkt .lang-toggle--footer { color: rgba(255, 255, 255, .72); font-size: 14px; } .mkt .lang-toggle--footer:hover { color: #fff; } .mkt .lang-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { .mkt .lang-toggle { transition: none; } /* The chevron still appears — it is the hover affordance, not decoration — it just stops sliding. */ .mkt .nav-links a, .mkt .nav-links a::after { transition: none; } .mkt .nav-links a::after { transform: translate(0, -50%); } } /* ---------- Hero ---------- */ .landing-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, #17AEAC 0%, #129B99 45%, #0B6E6C 100%); padding: 64px 0 130px; } .mkt .hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .mkt .arc { position: absolute; border: 2px solid rgba(255, 255, 255, .16); border-radius: 50%; } .mkt .arc.a1 { width: 620px; height: 620px; top: -220px; right: -160px; } .mkt .arc.a2 { width: 420px; height: 420px; top: -120px; right: -40px; border-color: rgba(255, 255, 255, .10); } .mkt .arc.a3 { width: 300px; height: 300px; bottom: -150px; left: -120px; border-color: rgba(255, 255, 255, .12); } .mkt .ring-rotate { position: absolute; top: -160px; left: -90px; width: 340px; height: 340px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .22); animation: mkt-spin 26s linear infinite; } .mkt .ring-rotate::before { content: ""; position: absolute; top: -7px; left: 50%; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .18); transform: translateX(-50%); } @keyframes mkt-spin { to { transform: rotate(360deg); } } .mkt .routes { position: absolute; inset: 0; width: 100%; height: 100%; } .mkt .routes .dest { animation: mkt-destpulse 3.4s ease-in-out infinite; } .mkt .routes .dest.d2 { animation-delay: 1.1s; } .mkt .routes .dest.d3 { animation-delay: 2.1s; } @keyframes mkt-destpulse { 0%, 100% { opacity: .35; } 50% { opacity: .85; } } .mkt .hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; } .mkt .hero-chip { display: inline-flex; align-items: center; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-weight: 600; font-size: 14px; letter-spacing: .04em; padding: 8px 16px; border-radius: 999px; backdrop-filter: blur(4px); } .mkt .hero-chip .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #fff; vertical-align: middle; margin-right: 9px; } .landing-hero .hero-onsite { margin: 16px 0 0; font-size: clamp(1rem, 1.5vw, 1.1rem); font-weight: 600; line-height: 1.45; color: #fff; max-width: 520px; } /* Industry rotator inside the hero chip: one big cursive gold word that bounces in. The word is left-anchored so the chip grows to the right (not jarringly from the centre) as words change width. The JS controller swaps the word and replays the bounce; .ind-word is also the static / no-JS fallback. */ .mkt .hero-badge-rot { display: inline-flex; align-items: center; gap: 9px; } .mkt .hero-badge-lead { white-space: nowrap; } /* Caveat's line box is lopsided (much more dead space above the letters than below), so a plain centre leaves the word sitting low. The controller measures each word's actual ink box via canvas metrics and applies a translateY on .ind-window to centre the letters exactly. overflow stays visible so ascenders/descenders and the slanted cursive ink overhang aren't clipped. */ .mkt .ind-window { position: relative; display: inline-block; font-family: "Caveat", "Comic Sans MS", cursive; font-size: 2em; line-height: 1; overflow: visible; text-align: left; transition: width .45s cubic-bezier(.22, 1, .36, 1); will-change: width, transform; } .mkt .ind-word { display: inline-block; white-space: nowrap; font-weight: 700; color: var(--gold); } .mkt .ind-word.is-bounce { animation: ind-bounce .6s cubic-bezier(.28, .9, .4, 1) both; } /* Self-contained bounce (starts faded + below, settles with a small overshoot) so it reads as a bounce without needing a clipping container. */ @keyframes ind-bounce { 0% { transform: translateY(42%); opacity: 0; } 30% { opacity: 1; } 55% { transform: translateY(-10%); } 78% { transform: translateY(4%); } 100% { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .mkt .ind-window { transition: none; } .mkt .ind-word.is-bounce { animation: none; } } .landing-hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.2rem); font-weight: 800; margin: 22px 0 18px; max-width: none; color: #fff; } .mkt .hero-mark { position: relative; display: inline-block; white-space: nowrap; } .mkt .hero-mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.16em; height: .14em; border-radius: 4px; background: var(--orange); transform: scaleX(0); transform-origin: left; animation: mkt-underline 1s .5s ease forwards; } @keyframes mkt-underline { to { transform: scaleX(1); } } .landing-hero p.hero-sub { font-size: clamp(1.05rem, 1.7vw, 1.2rem); color: rgba(255, 255, 255, .92); max-width: 520px; margin-bottom: 30px; } .mkt .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .mkt .hero-micro { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; color: rgba(255, 255, 255, .85); } .mkt .hero-micro svg { width: 16px; height: 16px; flex: none; } /* ---------- Hero rotator (real crews + app screens) ---------- */ .mkt .hero-rotator { position: relative; z-index: 2; width: 100%; max-width: 520px; margin-left: auto; } .mkt .hero-stage { position: relative; height: 430px; } .mkt .hero-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; } .mkt .hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease; } .mkt .hero-slide-photo { position: absolute; top: 0; left: 0; right: 0; border-radius: 24px; overflow: hidden; border: 6px solid rgba(255, 255, 255, .55); box-shadow: var(--shadow-lg); } .mkt .hero-slide-photo img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } /* Trade badge — the headline "this is for you" cue, sits large at the top-left of the crew photo. The feature caption moves down onto the phone (below). */ .mkt .hero-slide-trade { position: absolute; left: 16px; top: 16px; z-index: 5; display: inline-flex; align-items: center; gap: 9px; padding: 9px 17px; border-radius: 999px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-weight: 700; font-size: 18px; color: var(--navy); box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .5); } .mkt .hero-slide-trade svg { width: 20px; height: 20px; flex: none; color: var(--teal-deep); } .mkt .hero-slide-phone { position: absolute; right: -6px; bottom: 0; z-index: 3; width: 190px; border-radius: 30px; overflow: hidden; border: 8px solid #0c3f3e; background: #0c3f3e; box-shadow: var(--shadow-lg); } .mkt .hero-slide-phone img { width: 100%; height: auto; aspect-ratio: 760 / 1651; object-fit: cover; object-position: top; display: block; } /* Feature caption — annotates the screenshot, so it overlaps the base of the phone, shifted slightly left of it. Smaller than the trade badge. */ .mkt .hero-slide-cap { position: absolute; top: auto; bottom: 22px; left: auto; right: 28px; z-index: 4; display: flex; align-items: center; gap: 8px; background: #fff; color: var(--navy); border-radius: 12px; padding: 7px 11px; max-width: 196px; box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .35), 0 20px 46px -12px rgba(0, 0, 0, .6); } .mkt .hero-slide-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--teal), var(--teal-deep)); } .mkt .hero-slide-ic svg { width: 16px; height: 16px; } .mkt .hero-slide-txt strong { display: block; font-family: "Sora", sans-serif; font-weight: 700; font-size: 12px; line-height: 1.2; color: var(--navy); } .mkt .hero-slide-txt > span { display: block; color: var(--slate); font-size: 10.5px; line-height: 1.3; margin-top: 2px; } .mkt .hero-dots { display: flex; gap: 9px; justify-content: center; margin-top: 30px; } .mkt .hero-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .45); cursor: pointer; transition: background .25s ease, width .25s ease; } .mkt .hero-dot:hover { background: rgba(255, 255, 255, .7); } .mkt .hero-dot.is-active { width: 26px; background: #fff; } /* ---------- Product tour (3D coverflow deck) ---------- */ .mkt .tour-deck { max-width: 1080px; margin: 0 auto; padding-bottom: 6px; } .mkt .tour-deck .swiper-slide { width: 300px; height: auto; } /* Generous top padding keeps the tall phones clear of the deck's overflow:hidden edge — even while the centre card is scaled up on hover — so the rounded top is never shaved. */ .mkt .tour-card { display: flex; flex-direction: column; align-items: center; padding: 48px 4px 24px; } .mkt .tour-card-shot { width: 248px; border-radius: 30px; overflow: hidden; border: 8px solid #0c3f3e; background: #0c3f3e; box-shadow: var(--shadow-lg); transition: transform .35s ease; } .mkt .tour-card-shot img { width: 100%; height: auto; aspect-ratio: 760 / 1651; object-fit: cover; object-position: top; display: block; -webkit-user-drag: none; user-select: none; } /* Only the centre (active) screenshot zooms on hover; side cards stay put. Gated to hover-capable devices so touch screens don't get a sticky tap-zoom (which clipped the top of the tall screenshot on mobile). */ @media (hover: hover) { .mkt .swiper-slide-active .tour-card-shot { cursor: grab; } .mkt .swiper-slide-active .tour-card-shot:active { cursor: grabbing; } .mkt .swiper-slide-active .tour-card-shot:hover { transform: scale(1.06); } } .mkt .tour-card-cap { text-align: center; margin-top: 24px; max-width: 290px; opacity: 0; transition: opacity .4s ease; } .mkt .tour-deck .swiper-slide-active .tour-card-cap { opacity: 1; } .mkt .tour-card-cap .icon-tile { width: 46px; height: 46px; margin: 0 auto 12px; } .mkt .tour-card-cap .icon-tile svg { width: 23px; height: 23px; } .mkt .tour-card-cap h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 6px; } .mkt .tour-card-cap p { color: var(--slate); font-size: .98rem; line-height: 1.5; } .mkt .tour-deck-dots { display: flex; gap: 8px; justify-content: center; margin-top: 30px; } .mkt .tour-deck-dots .swiper-pagination-bullet { width: 9px; height: 9px; background: var(--slate-light); opacity: .4; transition: opacity .25s ease, width .25s ease, background .25s ease; } .mkt .tour-deck-dots .swiper-pagination-bullet-active { width: 26px; border-radius: 999px; background: var(--teal-deep); opacity: 1; } /* wave + stats bleed */ .mkt .wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; line-height: 0; } .mkt .wave svg { width: 100%; height: auto; display: block; } .stats-bar { position: relative; background: var(--white); padding: 60px 0 48px; border: 0; } .stats-bar::before { content: ""; position: absolute; left: 0; right: 0; top: -150px; height: 230px; z-index: 0; pointer-events: none; background: radial-gradient(62% 100% at 50% 0, rgba(23, 174, 172, .34), rgba(23, 174, 172, 0) 70%); } .stats-bar .landing-container { position: relative; z-index: 1; } .mkt .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .stat-value, .mkt .stat-value { font-family: "Sora", sans-serif; font-weight: 800; font-size: clamp(2.2rem, 4vw, 2.8rem); color: var(--teal-deep); line-height: 1; letter-spacing: -.02em; } .stat-label, .mkt .stat-label { margin-top: 8px; color: var(--slate); font-weight: 500; font-size: 15px; } /* ---------- Sections ---------- */ .mkt section { scroll-margin-top: 80px; } .mkt .sec { padding: 84px 0; } .mkt .sec.mist { background: var(--mist); } .mkt .sec-head { text-align: center; max-width: 660px; margin: 0 auto 52px; } .mkt .sec-head h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 700; margin-bottom: 14px; } .mkt .sec-head p { color: var(--slate); font-size: 1.08rem; } /* ---------- Features ---------- */ .mkt .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .feature-card { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 32px 28px; box-shadow: var(--shadow-card); } /* Home feature cards get extra depth + interactivity. Scoped to .features so the static pricing cards (which share .feature-card) stay flat. */ .mkt .features .feature-card { position: relative; overflow: hidden; isolation: isolate; padding-top: 36px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } /* Always-on teal accent rail across the top — gives the card colour at rest. */ .mkt .features .feature-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--teal), var(--teal-deep)); } /* Soft tinted glow tucked into the top-right corner; intensifies on hover. */ .mkt .features .feature-card::after { content: ""; position: absolute; z-index: -1; top: -38%; right: -28%; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle, var(--teal-tint) 0%, transparent 70%); opacity: .65; transition: opacity .3s ease, transform .3s ease; } .mkt .features .feature-card:hover { transform: translateY(-6px); border-color: var(--teal); box-shadow: 0 24px 50px -20px rgba(11, 110, 108, .45); } .mkt .features .feature-card:hover::after { opacity: 1; transform: scale(1.18); } .mkt .icon-tile { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--teal), var(--teal-deep)); color: #fff; margin-bottom: 20px; box-shadow: 0 12px 24px -10px rgba(11, 110, 108, .6); transition: transform .25s ease, box-shadow .25s ease; } .mkt .icon-tile svg { width: 28px; height: 28px; } .mkt .features .feature-card:hover .icon-tile { transform: translateY(-2px) rotate(-4deg) scale(1.06); box-shadow: 0 18px 30px -10px rgba(11, 110, 108, .72); } .feature-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--teal), var(--teal-deep)); color: #fff; margin-bottom: 20px; } .mkt .feature-card h3 { font-size: 1.35rem; font-weight: 700; margin-bottom: 10px; } .mkt .blist { list-style: none; display: grid; gap: 12px; padding: 0; } .mkt .blist li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: var(--navy); font-weight: 500; } /* Check sits in a tinted chip so the list reads as ticked-off capabilities. */ .mkt .blist svg { width: 24px; height: 24px; flex: none; color: var(--teal-deep); padding: 5px; border-radius: 999px; background: var(--teal-tint); box-shadow: inset 0 0 0 1px rgba(11, 110, 108, .12); } /* ---------- How it works ---------- */ /* grid-auto-flow/columns reset undoes daisyUI's .steps component (loaded via tailwind.css on the marketing layout), which otherwise forces every step into its own column and ignores the responsive grid-template-columns below. */ .mkt .steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: row; grid-auto-columns: auto; gap: 26px; overflow: visible; } .mkt .steps::before { content: ""; position: absolute; top: 32px; left: 11%; right: 11%; height: 2px; background: repeating-linear-gradient(90deg, var(--teal) 0 14px, transparent 14px 26px); z-index: 0; } .mkt .step { position: relative; z-index: 1; text-align: center; } /* Suppress daisyUI's .step connector line + numbered node pseudo-elements, which leak onto the marketing steps from tailwind.css. */ .mkt .step::before, .mkt .step::after { content: none; } .step-number { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: var(--white); border: 2px solid var(--teal); color: var(--teal-deep); display: grid; place-items: center; font-family: "Sora", sans-serif; font-weight: 800; font-size: 1.5rem; box-shadow: 0 0 0 6px var(--teal-tint); flex-shrink: 0; } .mkt .sec.mist .step-number { box-shadow: 0 0 0 6px var(--white); } .mkt .step h3 { font-size: 1.18rem; font-weight: 700; margin-bottom: 8px; } .mkt .step p { color: var(--slate); font-size: 15px; max-width: 240px; margin: 0 auto; } /* ---------- Final CTA ---------- */ .landing-cta { padding: 84px 0; } .mkt .cta-panel { position: relative; overflow: hidden; background: linear-gradient(135deg, #16A6A4 0%, #0B6E6C 100%); color: #fff; border-radius: 30px; padding: 64px 40px; text-align: center; } .mkt .cta-panel .arc { border-color: rgba(255, 255, 255, .28); } .mkt .cta-panel .arc.c1 { width: 360px; height: 360px; top: -140px; right: -100px; } .mkt .cta-panel .arc.c2 { width: 260px; height: 260px; bottom: -130px; left: -80px; } .mkt .cta-panel h2 { position: relative; z-index: 2; font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; margin-bottom: 14px; color: #fff; } .mkt .cta-panel p { position: relative; z-index: 2; color: rgba(255, 255, 255, .85); font-size: 1.1rem; max-width: 520px; margin: 0 auto 30px; } .mkt .cta-row { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .mkt .cta-panel .micro { position: relative; z-index: 2; margin-top: 18px; font-size: 14px; color: rgba(255, 255, 255, .75); } /* ---------- Footer ---------- */ .landing-footer { background: var(--navy); color: #fff; padding: 60px 0 32px; border: 0; } .mkt .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; } .mkt .foot-brand svg { height: 30px; width: auto; color: #fff; } .mkt .foot-brand p { color: rgba(255, 255, 255, .6); margin-top: 16px; max-width: 260px; font-size: 15px; } .mkt .foot-col h3 { font-family: "IBM Plex Sans", sans-serif; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); margin-bottom: 16px; font-weight: 600; } .mkt .foot-col a { display: block; color: rgba(255, 255, 255, .72); padding: 6px 0; font-size: 15px; } .mkt .foot-col a:hover { color: #fff; } /* App download badges (App Store + Google Play) — official artwork, scaled only. */ .mkt .app-badges { margin-top: 24px; } .mkt .app-badges-title { font-family: "IBM Plex Sans", sans-serif; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); margin-bottom: 14px; font-weight: 600; } .mkt .app-badges-row { display: flex; flex-wrap: wrap; gap: 12px; } .mkt .app-badge { display: inline-flex; align-items: center; } .mkt .app-badge-img { height: 40px; width: auto; display: block; transition: transform .15s ease; } .mkt a.app-badge:hover .app-badge-img { transform: translateY(-1px); } .mkt .app-badge.is-coming-soon { position: relative; cursor: default; } .mkt .app-badge.is-coming-soon .app-badge-img { filter: grayscale(1); opacity: .55; } .mkt .app-badge-soon { position: absolute; top: -8px; right: -6px; background: var(--orange); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; white-space: nowrap; } /* Social profiles — icon-only links, sized to a 44px tap target so they stay comfortable on phones. Shares the footer column heading style. */ .mkt .foot-social { margin-top: 24px; } .mkt .foot-social-title { font-family: "IBM Plex Sans", sans-serif; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); margin-bottom: 12px; font-weight: 600; } .mkt .foot-social-row { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .mkt .foot-social-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; color: rgba(255, 255, 255, .88); background: rgba(255, 255, 255, .08); transition: color .15s ease, background-color .15s ease, transform .15s ease; } .mkt .foot-social-link:hover { color: #fff; background: rgba(255, 255, 255, .16); transform: translateY(-1px); } .mkt .foot-social-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .mkt .foot-social-icon { width: 22px; height: 22px; } /* Phosphor's `fill` variant ships solid glyphs with no fill attribute, so they paint black — invisible on the navy footer. Paint them with the link colour so hover/focus carry through. The decorative keeps its own presentation attribute, which beats this inherited value. */ .mkt .foot-social-icon path { fill: currentColor; } @media (prefers-reduced-motion: reduce) { .mkt .foot-social-link { transition: none; } .mkt .foot-social-link:hover { transform: none; } } .mkt .foot-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 24px; color: rgba(255, 255, 255, .55); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; } /* ---------- Pricing (keeps daisyUI components, Dispatch shell) ---------- */ /* Tinted shell + a soft teal aura behind the header so the white plan cards read as lifted panels instead of blending into a flat white page. The tint stays clearly cool (not fading to near-white) so cards pop top-to-bottom. */ .pricing-section { position: relative; padding: 72px 0 64px; background: radial-gradient(60% 48% at 50% -6%, rgba(23, 174, 172, .24), rgba(23, 174, 172, 0) 60%), linear-gradient(180deg, #DCEBEB 0%, #E5ECEF 38%, #E5ECEF 100%); } .pricing-section > .landing-container { position: relative; z-index: 1; } /* Every card in the section gets a crisper edge + defined elevation so it reads as a white panel floating above the tinted shell. */ .pricing-section .feature-card { border-color: #D3DFE4; box-shadow: 0 16px 40px -18px rgba(15, 23, 42, .24); } /* Popular plan: solid white panel with a teal edge so it clearly leads without a tinted cap bleeding into the card. Border is set explicitly here to win over .feature-card's base border. Cards are static — they aren't click targets (only the CTA button is), so a hover-lift would be a false affordance. */ .pricing-card--popular { background: var(--white); border-color: var(--teal); border-width: 2px; box-shadow: 0 0 0 1px rgba(23, 174, 172, .35), 0 30px 64px -22px rgba(11, 110, 108, .55); } /* FAQ rows become white cards so they stand out on the tinted shell */ .pricing-faq .pricing-faq-item { background: var(--white); border: 1px solid #D3DFE4; box-shadow: 0 8px 22px -14px rgba(15, 23, 42, .2); transition: box-shadow .2s ease; } .pricing-faq .pricing-faq-item:hover { box-shadow: 0 12px 28px -14px rgba(15, 23, 42, .26); } .pricing-faq summary { cursor: pointer; list-style: none; } .pricing-faq summary::-webkit-details-marker { display: none; } .pricing-faq details[open] summary .faq-chevron { transform: rotate(180deg); } .faq-chevron { transition: transform 0.2s ease; } /* ---------- Legal / long-form ---------- */ .legal-content { padding-top: 8px; } .legal-content p { font-size: 0.9375rem; line-height: 1.75; color: var(--slate); margin-bottom: 1rem; } .legal-content h2 { font-size: 1.4rem; font-weight: 700; color: var(--ink); margin-top: 2.5rem; margin-bottom: 0.75rem; } .legal-content h2:first-child { margin-top: 1.5rem; } .legal-content > p:first-child { font-size: 1rem; color: var(--ink); margin-bottom: 2rem; } .legal-content a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; transition: opacity 0.15s; } .legal-content a:hover { opacity: 0.7; } /* ---------- Scroll reveal ---------- */ .mkt .reveal-item { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .mkt .reveal-item.revealed { opacity: 1; transform: translateY(0); } .mkt .reveal-item:nth-child(2) { transition-delay: .1s; } .mkt .reveal-item:nth-child(3) { transition-delay: .2s; } .mkt .reveal-item:nth-child(4) { transition-delay: .3s; } /* ---------- Responsive ---------- */ @media (max-width: 980px) { .mkt .hero-grid { grid-template-columns: 1fr; gap: 40px; } /* The decorative routes SVG zooms under `slice` on the narrow single-column hero, dropping the opaque map pins onto the headline. Hide the markers — the faint dashed routes stay as background texture. */ .mkt .route-markers { display: none; } .mkt .hero-rotator { margin: 0 auto; max-width: 460px; } .mkt .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; } .mkt .features { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } .mkt .steps { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; } .mkt .steps::before { display: none; } .mkt .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } /* The language switch is not in the horizontal bar at any width — it lives in the hamburger drawer and in the footer. That is a measurement, not a preference. Sizing is set by Spanish, not English: "Reservar una demo" + "Iniciar sesión" + "Empezar" run ~130px wider than their English labels. With all five links, the booking button and the switch, the Spanish bar closes the gap between links and account cluster to 0 — and because .landing-container caps at 1180px, a wider viewport does not help. It is 0 at 1200px and still 0 at 1920px. There is no desktop width where that bar has room, so hiding it below a breakpoint would only move the collision rather than remove it. Nothing is lost: the footer carries the control on every page, and the drawer carries it on touch, where the page is long enough that scrolling to the footer would be a real cost. */ @media (min-width: 1121px) { .mkt .nav-actions .lang-toggle-form { display: none; } } /* Narrow-desktop band: take the edge off the two gaps that grew the most, rather than compressing the buttons the way the old 981–1150px band had to. */ @media (min-width: 1121px) and (max-width: 1199px) { .mkt .nav-links { gap: 20px; margin-left: 28px; } .mkt .nav-actions { gap: 12px; } } @keyframes nav-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 1120px) { /* The whole panel (links + language switch + auth actions) drops out of the bar into the hamburger dropdown, so the top row is just logo + toggle — no overflow. */ .mkt .nav-links { margin-left: 0; } .mkt .nav-collapse { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--white); padding: 8px 20px 22px; border-bottom: 1px solid var(--line); box-shadow: 0 22px 40px -22px rgba(15, 23, 42, .45); } .mkt .nav-collapse.open { display: flex; animation: nav-drop .22s cubic-bezier(.22, 1, .36, 1); } /* Primary links: full-width rows with a steady rhythm and hairline separators; the final row's rule doubles as the divider above the account section. */ .mkt .nav-links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; } /* Whole-pixel line box for the same reason as .btn-nav above: 16px at the inherited 1.6 gives 25.6px rows, and eight of those stack the buttons below onto a fractional offset, softening their outlines. */ .mkt .nav-links a { padding: 14px 6px; font-size: 16px; font-weight: 600; color: var(--navy); line-height: 26px; border-bottom: 1px solid var(--line); transition: color .15s ease; } .mkt .nav-links a:active { color: var(--teal-deep); } /* Account section: full-width controls with clear breathing room below the links. */ .mkt .nav-actions { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; padding-top: 18px; } /* Language switch becomes a full-width row, matching the link rhythm above it — a lone centred word would read as a button it isn't. This is the one place in the nav it appears: the block above hides it wherever the bar is horizontal, and the drawer has the room the bar never had. */ .mkt .nav-actions .lang-toggle-form { width: 100%; } .mkt .nav-actions .lang-toggle { width: 100%; text-align: left; padding: 4px 6px 14px; font-size: 16px; font-weight: 600; color: var(--navy); } /* Log in → full-width secondary; Get started / Dashboard → full-width primary. */ .mkt .nav-actions .nav-login { text-align: center; padding: 13px; border-radius: 999px; border: 1.5px solid var(--line); font-weight: 700; color: var(--navy); transition: color .15s ease, border-color .15s ease; } .mkt .nav-actions .nav-login:hover { border-color: var(--teal-deep); color: var(--teal-deep); } .mkt .nav-actions .btn-nav { width: 100%; justify-content: center; padding: 14px; font-size: 15px; } .mkt .nav-toggle { display: inline-flex; } } @media (max-width: 520px) { .landing-hero { padding: 48px 0 80px; } .mkt .tour-deck .swiper-slide { width: 260px; } .mkt .tour-card-shot { width: 220px; } .mkt .cta-panel { padding: 48px 24px; } .mkt .foot-grid { grid-template-columns: 1fr 1fr; } .mkt .steps { grid-template-columns: 1fr; gap: 36px; max-width: 340px; margin: 0 auto; } .mkt .step p { max-width: none; } .mkt .hero-rotator { max-width: none; } /* Stacked layout: a prominent crew photo on top (the person is clearly visible), then the large, readable app screen below it — neither hides the other. */ .mkt .hero-stage { height: 940px; } .mkt .hero-slide-photo { top: 0; left: 0; right: 0; border-radius: 18px; border-width: 5px; } .mkt .hero-slide-photo img { aspect-ratio: 4 / 3; } .mkt .hero-slide-phone { width: min(80vw, 300px); left: 50%; right: auto; top: 296px; bottom: auto; transform: translateX(-50%); border-width: 8px; } .mkt .hero-slide-cap { left: 50%; right: auto; top: auto; bottom: 34px; transform: translateX(-66%); max-width: 188px; padding: 7px 10px; } } @media (prefers-reduced-motion: reduce) { .mkt *, .mkt *::before, .mkt *::after { animation: none !important; transition: none !important; } .mkt .reveal-item { opacity: 1; transform: none; } .mkt .hero-mark::after { transform: scaleX(1); } } /* ============================================================ Public lead forms (Contact + Enterprise inquiry) Reusable, brand-scoped styling so the white form card sits on a soft branded backdrop instead of white-on-white. Shared base (.lead-*) keeps the two forms consistent; the Enterprise form adds an aside via .lead-grid--split. ============================================================ */ .mkt .lead-shell { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 72px); padding: 56px 24px; background: var(--mist); } .mkt .lead-shell::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(56% 46% at 50% -10%, rgba(23, 174, 172, .22), rgba(23, 174, 172, 0) 70%), radial-gradient(38% 36% at 94% 6%, rgba(255, 90, 31, .08), rgba(255, 90, 31, 0) 72%); } .mkt .lead-grid { position: relative; z-index: 1; width: 100%; max-width: 540px; } .mkt .lead-grid--split { max-width: 1040px; display: grid; gap: 28px; } @media (min-width: 920px) { .mkt .lead-grid--split { grid-template-columns: 0.82fr 1fr; align-items: stretch; } } .mkt .lead-grid--split > * { min-width: 0; } /* let tracks shrink instead of overflowing */ /* The white form panel */ .mkt .lead-card { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: 38px 32px 34px; box-shadow: 0 24px 60px -24px rgba(15, 23, 42, .30); } .mkt .lead-card::before { content: ""; position: absolute; left: 32px; right: 32px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--teal), var(--teal-deep)); } .mkt .lead-badge { width: 56px; height: 56px; margin: 4px auto 16px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--teal), var(--teal-deep)); box-shadow: 0 12px 26px -10px rgba(23, 174, 172, .65); } .mkt .lead-badge svg { width: 28px; height: 28px; } .mkt .lead-title { text-align: center; font-size: 1.6rem; font-weight: 700; } .mkt .lead-sub { text-align: center; color: var(--slate); font-size: .95rem; margin: 6px auto 0; max-width: 38ch; } .mkt .lead-trust { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 16px; color: var(--slate-light); font-size: .8rem; } .mkt .lead-trust svg { width: 15px; height: 15px; color: var(--teal-deep); } /* Enterprise value-prop aside */ .mkt .lead-aside { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; border-radius: 24px; padding: 40px 34px; color: #fff; background: linear-gradient(160deg, #16A6A4 0%, var(--teal-deep) 55%, var(--teal-deeper) 100%); box-shadow: var(--shadow-lg); } .mkt .lead-aside h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.18; } .mkt .lead-aside > p { color: rgba(255, 255, 255, .82); font-size: .95rem; margin: 10px 0 26px; } .mkt .lead-benefits { list-style: none; display: flex; flex-direction: column; gap: 18px; } .mkt .lead-benefits li { display: flex; gap: 13px; align-items: flex-start; } .mkt .lead-benefits .tick { width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); } .mkt .lead-benefits .tick svg { width: 16px; height: 16px; color: #fff; } .mkt .lead-benefits strong { display: block; font-weight: 600; font-size: .95rem; } .mkt .lead-benefits span { color: rgba(255, 255, 255, .72); font-size: .85rem; line-height: 1.45; } /* Two-up field grid for taller lead forms (Enterprise). Single column on mobile to keep the vertical flow intact (protects completion); pairs short related fields side-by-side on desktop to cut height. Full-width items (textarea, controls) use .lead-span-2. */ .mkt .lead-fields { display: grid; grid-template-columns: 1fr; gap: 14px; } .mkt .lead-fields > * { min-width: 0; } .mkt .lead-fields .lead-span-2 { grid-column: 1 / -1; } @media (min-width: 640px) { .mkt .lead-fields { grid-template-columns: 1fr 1fr; gap: 14px 20px; } } /* ============================================================ Minimal public layout (auth + public intake forms) Slim brand bar + minimal footer wrapping the shared .lead-* card styling. The shell flexes to fill the space between the header and footer so a short form still centres cleanly. ============================================================ */ .mkt-public { display: flex; flex-direction: column; min-height: 100vh; } .mkt-public > main { flex: 1; display: flex; } .mkt-public .lead-shell { flex: 1; min-height: 0; } .mkt .public-nav { display: flex; align-items: center; justify-content: center; height: 68px; padding: 0 24px; background: var(--white); border-bottom: 1px solid var(--line); } .mkt .public-brand { display: inline-flex; color: var(--ink); } .mkt .public-brand svg { height: 30px; width: auto; } .mkt .public-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; padding: 20px 24px; color: var(--slate-light); font-size: .8rem; background: var(--white); border-top: 1px solid var(--line); } .mkt .public-foot-links { display: flex; gap: 18px; } .mkt .public-foot-links a { color: var(--slate); } .mkt .public-foot-links a:hover { color: var(--teal-deep); } /* Lead form links (cross-navigation inside the card: sign up / forgot / etc.) */ .mkt .lead-link { color: var(--teal-deep); font-weight: 600; } .mkt .lead-link:hover { text-decoration: underline; } /* In-card divider with centered label (e.g. "or") */ .mkt .lead-divider { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--slate-light); font-size: .8rem; } .mkt .lead-divider::before, .mkt .lead-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* Slightly roomier card for the longer quote-request intake form */ .mkt .lead-grid--wide { max-width: 600px; } /* ============================================================ Mobile app section (#mobile-app), /app page, and sticky bar. Badges themselves are styled in the ".app-badges" block above. ============================================================ */ .mkt .app-section-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } .mkt .app-section-sub { color: var(--slate); font-size: 1.05rem; max-width: 46ch; margin: 14px 0 22px; } .mkt .app-section-bullets { margin-bottom: 28px; } .mkt .app-section-get { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } /* Scan-to-download QR */ .mkt .app-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; } .mkt .app-qr-link { display: inline-flex; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-card); transition: transform .15s ease; } .mkt .app-qr-link:hover { transform: translateY(-2px); } .mkt .app-qr-svg { width: 116px; height: 116px; display: block; } .mkt .app-qr-cap { font-size: 12.5px; color: var(--slate-light); font-weight: 600; max-width: 130px; text-align: center; line-height: 1.35; } /* Overlapping phone screenshots */ .mkt .app-section-shots { position: relative; min-height: 460px; display: flex; justify-content: center; align-items: center; } .mkt .app-phone { position: absolute; border-radius: 30px; overflow: hidden; background: #0F172A; box-shadow: var(--shadow-lg); border: 6px solid #0F172A; } .mkt .app-phone img { width: 220px; height: auto; display: block; border-radius: 24px; } .mkt .app-phone-back { transform: translateX(70px) rotate(6deg); opacity: .96; } .mkt .app-phone-front { transform: translateX(-70px) rotate(-4deg); z-index: 2; } /* Standalone /app landing (desktop + pre-launch) */ .mkt .app-download-page { text-align: center; } .mkt .app-download-card { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; } .mkt .app-download-card .app-badges-row { justify-content: center; margin: 18px 0 8px; } .mkt .app-download-sub { color: var(--slate); font-size: 1.05rem; margin-bottom: 6px; } .mkt .app-qr-lg .app-qr-svg { width: 168px; height: 168px; } .mkt .app-download-back { margin-top: 18px; } .mkt .app-download-back a { color: var(--teal-deep); font-weight: 600; } /* Sticky mobile "get the app" bar (hidden on desktop; JS reveals on mobile) */ .mkt .app-sticky { display: none; } .mkt .app-sticky-inner { display: flex; align-items: center; gap: 12px; } .mkt .app-sticky-icon { color: var(--teal-deep); display: inline-flex; } .mkt .app-sticky-text { font-weight: 600; font-size: 14px; color: var(--ink); flex: 1; } .mkt .app-sticky-cta { background: var(--teal-deep); color: #fff; font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: 999px; white-space: nowrap; } .mkt .app-sticky-close { background: none; border: 0; color: var(--slate-light); cursor: pointer; display: inline-flex; padding: 4px; } @media (max-width: 860px) { .mkt .app-section-grid { grid-template-columns: 1fr; gap: 36px; } .mkt .app-section-shots { min-height: 420px; order: -1; } } @media (max-width: 760px) { .mkt .app-section-get { gap: 20px; } .mkt .app-phone img { width: 180px; } /* Reveal the sticky bar on mobile (Stimulus toggles the hidden attribute). */ .mkt .app-sticky:not([hidden]) { display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 24px -12px rgba(15,23,42,.3); padding: 10px 0; } } /* ============================================================ Help center — support CTA card Rendered at the foot of the help index and of every article. Same card language as .lead-card (soft teal wash, teal rule) without duplicating the form-panel styling. ============================================================ */ .mkt .help-contact-card { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 48px; padding: 26px 28px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(135deg, rgba(23, 174, 172, .07), rgba(23, 174, 172, .02)); } .mkt .help-contact-icon { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--teal), var(--teal-deep)); box-shadow: 0 10px 22px -10px rgba(23, 174, 172, .65); } .mkt .help-contact-icon svg { width: 24px; height: 24px; } .mkt .help-contact-body { flex: 1 1 260px; min-width: 0; } .mkt .help-contact-title { font-size: 1.125rem; font-weight: 700; color: var(--ink); } .mkt .help-contact-sub { color: var(--slate); font-size: .9rem; margin-top: 4px; } .mkt .help-contact-meta { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: var(--slate-light); font-size: .8rem; } .mkt .help-contact-meta svg { color: var(--teal-deep); flex: none; } .mkt .help-contact-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; flex: 0 0 auto; } .mkt .help-contact-actions .btn-mkt { text-align: center; } .mkt .help-contact-email { font-size: .8rem; color: var(--teal-deep); text-align: center; } .mkt .help-contact-email:hover { text-decoration: underline; } @media (max-width: 640px) { .mkt .help-contact-card { flex-direction: column; align-items: flex-start; } /* flex-basis is a HEIGHT once the card stacks — leaving the row's 260px basis on the body opens a dead gap above the button. */ .mkt .help-contact-body { flex: 0 0 auto; align-self: stretch; } .mkt .help-contact-actions { align-self: stretch; } } /* Category chooser on the support form — a radio group that reads as cards, so "what kind of problem" is answered before the message box is reached. */ .mkt .support-categories { display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 480px) { .mkt .support-categories { grid-template-columns: 1fr 1fr; } } .mkt .support-category { position: relative; } .mkt .support-category input { position: absolute; opacity: 0; width: 0; height: 0; } .mkt .support-category-label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; background: var(--white); transition: border-color .15s, background .15s, box-shadow .15s; font-size: .875rem; font-weight: 500; color: var(--ink); } .mkt .support-category-label svg { width: 18px; height: 18px; color: var(--slate-light); flex: none; } .mkt .support-category-label:hover { border-color: rgba(23, 174, 172, .45); background: rgba(23, 174, 172, .04); } .mkt .support-category input:checked + .support-category-label { border-color: var(--teal); background: rgba(23, 174, 172, .08); box-shadow: 0 0 0 3px rgba(23, 174, 172, .12); } .mkt .support-category input:checked + .support-category-label svg { color: var(--teal-deep); } .mkt .support-category input:focus-visible + .support-category-label { outline: 2px solid var(--teal-deep); outline-offset: 2px; } /* Bug-only diagnostic fields, revealed by the category chooser. */ .mkt .support-bug-fields[hidden] { display: none; } .mkt .support-bug-fields { display: grid; gap: 14px; padding: 16px; border: 1px dashed rgba(23, 174, 172, .45); border-radius: 14px; background: rgba(23, 174, 172, .04); } .mkt .support-hint { font-size: .78rem; color: var(--slate-light); margin-top: 4px; } .mkt .support-reference { display: inline-block; margin: 14px 0 2px; padding: 10px 18px; border-radius: 12px; border: 1px dashed var(--teal); background: rgba(23, 174, 172, .07); font-size: 1.05rem; font-weight: 700; letter-spacing: .06em; color: var(--teal-deeper); }