/* * Dots Platform — Design System "Warm Precision" * Author: Bogdan Mamontov * * One shared stylesheet for the whole marketing site. * Light/dark theming via [data-theme] on ; defaults follow the OS. * Motion is opt-in per element via [data-reveal] and fully respects * prefers-reduced-motion. */ /* ---------------------------------------------------------------- tokens */ :root { --font-display: "Unbounded", "Golos Text", system-ui, sans-serif; --font-body: "Golos Text", "Helvetica Neue", system-ui, sans-serif; --accent: #ff6a0a; --accent-strong: #eb631b; --accent-soft: rgba(255, 106, 10, 0.12); --accent-glow: rgba(255, 106, 10, 0.35); --pink: #dc145f; --blue: #0050bd; --radius-s: 12px; --radius-m: 20px; --radius-l: 28px; --radius-pill: 999px; --container: 1200px; --gutter: clamp(20px, 4vw, 48px); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --speed: 0.65s; color-scheme: light dark; } :root, :root[data-theme="light"] { --bg: #faf8f5; --bg-elev: #ffffff; --bg-sunken: #f1ede8; --ink: #1b1b1b; --ink-2: #55504b; --ink-3: #8a847e; --line: rgba(27, 27, 27, 0.09); --line-strong: rgba(27, 27, 27, 0.16); --glass: rgba(250, 248, 245, 0.75); --shadow-s: 0 1px 2px rgba(27, 20, 12, 0.05), 0 2px 8px rgba(27, 20, 12, 0.05); --shadow-m: 0 2px 4px rgba(27, 20, 12, 0.05), 0 12px 32px rgba(27, 20, 12, 0.09); --shadow-l: 0 4px 12px rgba(27, 20, 12, 0.06), 0 24px 64px rgba(27, 20, 12, 0.14); --hero-wash: radial-gradient(52rem 32rem at 82% -12%, rgba(255, 106, 10, 0.13), transparent 62%), radial-gradient(40rem 28rem at -8% 18%, rgba(220, 20, 95, 0.06), transparent 60%); } :root[data-theme="dark"] { --bg: #111010; --bg-elev: #1b1b1b; --bg-sunken: #0a0a0a; --ink: #f5f2ee; --ink-2: #c9c3bd; --ink-3: #8f8983; --line: rgba(245, 242, 238, 0.1); --line-strong: rgba(245, 242, 238, 0.2); --glass: rgba(22, 19, 16, 0.88); --accent: #ff7a24; --accent-soft: rgba(255, 122, 36, 0.16); --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-m: 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-l: 0 4px 12px rgba(0, 0, 0, 0.45), 0 24px 64px rgba(0, 0, 0, 0.55); --hero-wash: radial-gradient(52rem 32rem at 82% -12%, rgba(255, 106, 10, 0.16), transparent 62%), radial-gradient(40rem 28rem at -8% 18%, rgba(220, 20, 95, 0.08), transparent 60%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #111010; --bg-elev: #1b1b1b; --bg-sunken: #0a0a0a; --ink: #f5f2ee; --ink-2: #c9c3bd; --ink-3: #8f8983; --line: rgba(245, 242, 238, 0.1); --line-strong: rgba(245, 242, 238, 0.2); --glass: rgba(22, 19, 16, 0.88); --accent: #ff7a24; --accent-soft: rgba(255, 122, 36, 0.16); --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-m: 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-l: 0 4px 12px rgba(0, 0, 0, 0.45), 0 24px 64px rgba(0, 0, 0, 0.55); --hero-wash: radial-gradient(52rem 32rem at 82% -12%, rgba(255, 106, 10, 0.16), transparent 62%), radial-gradient(40rem 28rem at -8% 18%, rgba(220, 20, 95, 0.08), transparent 60%); } } /* ------------------------------------------------------------------ base */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; transition: background-color 0.35s ease, color 0.35s ease; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; } p { margin: 0; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ::selection { background: var(--accent); color: #fff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ---------------------------------------------------------------- layout */ .dp-container { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; } .dp-section { padding-block: clamp(64px, 10vw, 128px); position: relative; } .dp-section--tight { padding-block: clamp(40px, 6vw, 72px); } .dp-section--sunken { background: var(--bg-sunken); } .dp-grid { display: grid; gap: clamp(16px, 2.5vw, 28px); } .dp-grid--2 { grid-template-columns: repeat(2, 1fr); } .dp-grid--3 { grid-template-columns: repeat(3, 1fr); } .dp-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 960px) { .dp-grid--3, .dp-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .dp-grid--2, .dp-grid--3, .dp-grid--4 { grid-template-columns: 1fr; } } /* ------------------------------------------------------------ typography */ .dp-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; } .dp-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); } .dp-display { font-family: var(--font-display); font-size: clamp(38px, 6.4vw, 76px); font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; } .dp-h2, .dp-section h2 { font-size: clamp(28px, 4vw, 46px); font-weight: 650; } .dp-h3 { font-size: clamp(20px, 2.4vw, 26px); } .dp-lead { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 56ch; } .dp-muted { color: var(--ink-2); } .dp-faint { color: var(--ink-3); } .dp-accent { color: var(--accent); } .dp-kicker { max-width: 30ch; } /* ---------------------------------------------------------------- header */ .dp-header { position: fixed; inset: 0 0 auto 0; z-index: 100; backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); background: var(--glass); border-bottom: 1px solid transparent; transition: border-color 0.3s ease, background-color 0.35s ease; } .dp-header.is-scrolled { border-bottom-color: var(--line-strong); box-shadow: 0 8px 28px -12px rgba(0, 0, 0, 0.45); } .dp-header__bar { display: flex; align-items: center; gap: 28px; min-height: 68px; } .dp-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; } .dp-logo img { height: 34px; width: auto; } .dp-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .dp-nav__link { position: relative; padding: 9px 14px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 500; color: var(--ink-2); transition: color 0.25s var(--ease-out), background-color 0.3s var(--ease-out); } /* A gradient underline that grows out from the centre on hover. */ .dp-nav__link::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--pink)); transform: translateX(-50%); transition: width 0.3s var(--ease-out); } .dp-nav__link:hover { color: var(--ink); } .dp-nav__link:hover::after { width: calc(100% - 26px); } /* Active link keeps the gradient underline, no background. */ .dp-nav__link.is-current { color: var(--ink); } .dp-nav__link.is-current::after { width: calc(100% - 26px); } /* dropdown (Features menu) */ .dp-menu { position: relative; } .dp-menu__panel { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 8px; min-width: 560px; padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-l); opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease-out), translate 0.25s var(--ease-out), visibility 0.25s; } .dp-menu:hover .dp-menu__panel, .dp-menu:focus-within .dp-menu__panel { opacity: 1; visibility: visible; translate: -50% 0; } .dp-menu__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-s); font-size: 15px; font-weight: 500; transition: background-color 0.18s ease; } .dp-menu__item:hover { background: var(--accent-soft); } .dp-menu__item img { width: 34px; height: 34px; object-fit: contain; } /* language switch */ .dp-lang { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-pill); } .dp-lang a { padding: 4px 10px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; color: var(--ink-3); transition: color 0.2s, background-color 0.2s; } .dp-lang a.is-active { color: var(--ink); background: var(--bg-sunken); } .dp-lang a:hover { color: var(--ink); } /* theme toggle */ .dp-theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--ink-2); transition: transform 0.3s var(--ease-spring), border-color 0.2s, color 0.2s; } .dp-theme-toggle:hover { color: var(--accent); border-color: var(--line-strong); transform: rotate(18deg); } .dp-theme-toggle svg { width: 18px; height: 18px; grid-area: 1 / 1; } .dp-theme-toggle .icon-sun { display: none; } [data-theme="dark"] .dp-theme-toggle .icon-sun { display: block; } [data-theme="dark"] .dp-theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dp-theme-toggle .icon-sun { display: block; } :root:not([data-theme="light"]) .dp-theme-toggle .icon-moon { display: none; } } /* burger + mobile nav */ .dp-burger { display: none; width: 42px; height: 42px; border-radius: var(--radius-pill); border: 1px solid var(--line); position: relative; } .dp-burger span, .dp-burger span::before, .dp-burger span::after { content: ""; position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.3s var(--ease-out), opacity 0.2s; } .dp-burger span { top: 50%; margin-top: -1px; } .dp-burger span::before { top: -6px; left: 0; right: 0; } .dp-burger span::after { top: 6px; left: 0; right: 0; } .dp-burger[aria-expanded="true"] span { background: transparent; } .dp-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); } .dp-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 1060px) { .dp-burger { display: block; margin-left: auto; } .dp-nav { position: fixed; inset: 68px 0 auto 0; max-height: calc(100dvh - 68px); overflow: auto; flex-direction: column; align-items: stretch; gap: 2px; padding: 16px var(--gutter) 28px; background: var(--bg-elev); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-l); translate: 0 -12px; opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease-out), translate 0.3s var(--ease-out), visibility 0.3s; } .dp-nav.is-open { opacity: 1; visibility: visible; translate: 0 0; } /* Features submenu: a tap-to-open accordion on mobile. */ .dp-menu > .dp-nav__link { display: flex; align-items: center; justify-content: space-between; } .dp-menu > .dp-nav__link::after { content: ""; flex: none; width: 9px; height: 9px; margin-left: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.25s var(--ease-out); opacity: 0.75; } .dp-menu.is-open > .dp-nav__link::after { transform: translateY(1px) rotate(-135deg); } .dp-menu__panel { position: static; translate: none; min-width: 0; opacity: 1; visibility: visible; box-shadow: none; border: 0; grid-template-columns: 1fr; overflow: hidden; max-height: 0; padding: 0 0 0 8px; transition: max-height 0.32s var(--ease-out); } .dp-menu.is-open .dp-menu__panel { max-height: 760px; padding-bottom: 8px; } /* The desktop dropdown centres itself with translate:-50% and reveals on hover/focus; neutralise that so only the tap-toggle controls the panel. */ .dp-menu:hover .dp-menu__panel, .dp-menu:focus-within .dp-menu__panel { translate: none; } } /* Push page content below the fixed header */ .dp-page { padding-top: 68px; /* Reveal animations translate elements sideways before they enter view; clip that horizontal spill so it never creates a scrollbar. */ overflow-x: clip; } /* ---------------------------------------------------------------- buttons */ .dp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; transition: transform 0.35s var(--ease-spring), box-shadow 0.3s ease, background-color 0.2s ease; } .dp-btn--primary { color: #fff; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%); box-shadow: 0 8px 24px -8px var(--accent-glow); } .dp-btn--primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 32px -8px var(--accent-glow); } .dp-btn--primary:active { transform: translateY(0) scale(0.98); } .dp-btn--ghost { color: var(--ink); border: 1px solid var(--line-strong); background: transparent; } .dp-btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); } .dp-btn--lg { padding: 18px 36px; font-size: 17px; } .dp-btn .arrow { transition: translate 0.3s var(--ease-out); } .dp-btn:hover .arrow { translate: 4px 0; } /* ------------------------------------------------------------------ hero */ .dp-hero { position: relative; padding-block: clamp(72px, 12vw, 150px) clamp(56px, 8vw, 110px); overflow: clip; } .dp-hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-wash); pointer-events: none; } .dp-hero__inner { position: relative; } .dp-hero .dp-display { max-width: 17ch; } .dp-hero .dp-lead { margin-top: 28px; } .dp-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; } /* Split hero: text on the left, illustration on the right (features page). */ .dp-hero__inner--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 72px); } /* Half-width column: cap the headline so long words don't collide with the art. */ .dp-hero__inner--split .dp-display { font-size: clamp(32px, 4.4vw, 58px); } .dp-hero__inner--split .dp-hero__media { justify-self: end; } .dp-hero__inner--split .dp-hero__img { display: block; width: 100%; max-width: 620px; height: auto; margin-left: auto; border-radius: var(--radius-l); } @media (max-width: 900px) { .dp-hero__inner--split { grid-template-columns: 1fr; } .dp-hero__inner--split .dp-hero__media { justify-self: stretch; margin-top: 40px; } .dp-hero__inner--split .dp-hero__img { max-width: 520px; margin-inline: auto; } } /* Animated city hero (home page): the Dots "city" Lottie plus a courier scooter that drives along the road. */ /* The city is a width:100% block (no intrinsic size), so its column must stretch — unlike the plain media which is content-sized. */ .dp-hero__inner--split .dp-hero__media--city { justify-self: stretch; } .dp-city { position: relative; width: 100%; max-width: 620px; margin-left: auto; aspect-ratio: 1186 / 1200; } .dp-city__lottie, .dp-city__poster { position: absolute; inset: 0; width: 100%; height: 100%; } .dp-city__lottie svg { display: block; } .dp-city__poster { object-fit: contain; } @media (max-width: 900px) { .dp-city { margin-inline: auto; max-width: 520px; } } /* Wide screens: enlarge the animated city and let the road bleed off the right viewport edge, matching the marketing site's home hero. */ @media (min-width: 901px) { /* The city is tall; keep the headline anchored to the top of the hero instead of letting the art centre it and open a gap above. */ .dp-hero__inner--split:has(.dp-hero__media--city) { align-items: start; } .dp-hero__inner--split .dp-hero__media--city { justify-self: end; align-self: start; /* Reach from the container's right edge out to the viewport edge. */ margin-right: calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2)); } .dp-hero__inner--split .dp-hero__media--city .dp-city { width: min(56vw, 780px); max-width: none; margin-left: auto; } } /* dotted signature — a quiet nod to the brand name */ .dp-dots { display: inline-flex; gap: 7px; vertical-align: middle; } .dp-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); } .dp-dots i:nth-child(2) { background: var(--pink); opacity: 0.85; } .dp-dots i:nth-child(3) { background: var(--blue); opacity: 0.7; } /* ----------------------------------------------------------------- cards */ .dp-card { position: relative; padding: clamp(24px, 3vw, 36px); background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-s); transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.3s ease; } .dp-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-m); border-color: var(--line-strong); } .dp-card--accent:hover { border-color: var(--accent); } .dp-card__icon { width: 56px; height: 56px; object-fit: contain; margin-bottom: 20px; } .dp-card h3, .dp-card h4 { font-size: 19px; font-weight: 600; margin-bottom: 10px; } .dp-card p { font-size: 15.5px; color: var(--ink-2); } .dp-card--link::after { content: "→"; position: absolute; top: 24px; right: 26px; font-size: 18px; color: var(--ink-3); transition: translate 0.3s var(--ease-out), color 0.2s; } .dp-card--link:hover::after { translate: 4px 0; color: var(--accent); } /* feature split rows (image + copy alternating) */ .dp-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; } .dp-split--flip > :first-child { order: 2; } @media (max-width: 860px) { .dp-split { grid-template-columns: 1fr; } .dp-split--flip > :first-child { order: 0; } } .dp-split__media { position: relative; border-radius: var(--radius-l); overflow: hidden; background: var(--bg-elev); border: 1px solid var(--line); padding: clamp(16px, 2.5vw, 28px); box-shadow: var(--shadow-s); display: flex; align-items: center; justify-content: center; } /* Consistent visual weight across alternating rows: media fills the panel width but never towers over its copy column. */ .dp-split__media > img { width: 100%; height: auto; max-height: 520px; object-fit: contain; } /* Large hero illustrations must not push the fold: cap and center them. Uses an explicit max-width + height:auto (no object-fit/max-height) so the image sizes identically across Chrome, Firefox and every Safari version. */ .dp-hero div[data-load] > img { display: block; width: 100%; max-width: 900px; height: auto; margin-inline: auto; } .dp-split__media--bare { background: none; border: 0; padding: 0; box-shadow: none; } .dp-split__media img { width: 100%; transition: transform 0.8s var(--ease-out); } .dp-split__media:hover img { transform: scale(1.025); } /* ----------------------------------------------------------------- stats */ .dp-stat { text-align: left; } .dp-stat__value { font-family: var(--font-display); font-size: clamp(34px, 4.6vw, 56px); font-weight: 700; color: var(--accent); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .dp-stat__label { margin-top: 8px; font-size: 15px; color: var(--ink-2); max-width: 24ch; } /* --------------------------------------------------------------- marquee */ .dp-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .dp-marquee__track { display: flex; align-items: center; gap: clamp(48px, 6vw, 96px); width: max-content; animation: dp-marquee 36s linear infinite; } .dp-marquee:hover .dp-marquee__track { animation-play-state: paused; } .dp-marquee img { height: 44px; width: auto; object-fit: contain; opacity: 0.72; filter: grayscale(1); transition: opacity 0.3s, filter 0.3s; } [data-theme="dark"] .dp-marquee img { filter: grayscale(1) invert(0.88); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dp-marquee img { filter: grayscale(1) invert(0.88); } } .dp-marquee img:hover { opacity: 1; filter: none; } @keyframes dp-marquee { to { transform: translateX(-50%); } } /* ------------------------------------------------------------- accordion */ .dp-accordion { border-top: 1px solid var(--line); } .dp-accordion__item { border-bottom: 1px solid var(--line); } .dp-accordion__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; text-align: left; font-family: var(--font-body); font-size: 18px; font-weight: 600; } .dp-accordion__head::after { content: "+"; font-size: 24px; font-weight: 400; color: var(--accent); transition: rotate 0.35s var(--ease-out); } .dp-accordion__item.is-open .dp-accordion__head::after { rotate: 45deg; } .dp-accordion__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease-out); } .dp-accordion__item.is-open .dp-accordion__body { grid-template-rows: 1fr; } .dp-accordion__body > div { overflow: hidden; color: var(--ink-2); } .dp-accordion__body p { padding: 0 4px 24px; max-width: 70ch; } /* ----------------------------------------------------------------- forms */ .dp-form { display: grid; gap: 16px; } .dp-form label { font-size: 14px; font-weight: 600; color: var(--ink-2); } .dp-input, .dp-form input[type="text"], .dp-form input[type="email"], .dp-form input[type="tel"], .dp-form input[type="number"], .dp-form select, .dp-form textarea { width: 100%; padding: 15px 18px; font: inherit; font-size: 16px; color: var(--ink); background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: var(--radius-s); transition: border-color 0.2s, box-shadow 0.2s; } .dp-form input:focus, .dp-form select:focus, .dp-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .dp-form ::placeholder { color: var(--ink-3); } .dp-form__status { display: none; padding: 16px 20px; border-radius: var(--radius-s); font-weight: 500; } .dp-form__status.is-visible { display: block; } .dp-form__status--done { background: rgba(46, 160, 67, 0.12); color: #2ea043; } .dp-form__status--fail { background: rgba(220, 20, 95, 0.1); color: var(--pink); } /* When the success panel replaces the form, the status box becomes a plain container — no green pill, no padding. */ .dp-form__status--rich { background: none; padding: 0; color: inherit; animation: dp-rise 0.5s var(--ease-out) both; } .dp-form-success { text-align: center; } .dp-form-success__badge { width: 66px; height: 66px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #37c860, #23a344); box-shadow: 0 12px 30px -10px rgba(35, 163, 68, 0.6); } .dp-form-success__badge svg { width: 34px; height: 34px; } .dp-form-success__title { font-family: var(--font-display); font-size: clamp(22px, 3vw, 28px); font-weight: 700; color: var(--ink); margin-bottom: 8px; } .dp-form-success__text { color: var(--ink-2); font-size: 16px; max-width: 34ch; margin: 0 auto 26px; } .dp-form-success__options { display: grid; gap: 12px; text-align: left; } .dp-form-success__option { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-m); background: var(--bg-sunken); border: 1px solid var(--line); transition: transform 0.2s var(--ease-out), border-color 0.2s ease, background-color 0.2s ease; } .dp-form-success__option:hover { transform: translateY(-2px); border-color: var(--accent); background: var(--bg-elev); } .dp-form-success__opt-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #fff; } .dp-form-success__opt-icon svg { width: 22px; height: 22px; } .dp-form-success__option--book .dp-form-success__opt-icon { background: linear-gradient(180deg, #ff8a2b, #ff6a0a); } .dp-form-success__option--tg .dp-form-success__opt-icon { background: linear-gradient(180deg, #2ab3f0, #1f9cd8); } .dp-form-success__option--yt .dp-form-success__opt-icon { background: linear-gradient(180deg, #ff3b3b, #e60023); } .dp-form-success__option--web .dp-form-success__opt-icon { background: linear-gradient(180deg, #4f9bff, #2d6fe0); } .dp-form-success__option--ios .dp-form-success__opt-icon { background: linear-gradient(180deg, #555, #1c1c1e); } .dp-form-success__option--android .dp-form-success__opt-icon { background: linear-gradient(180deg, #3ddc84, #20b96a); } /* Sub-heading that splits the contact links from the platform-demo links. */ .dp-form-success__group-label { margin: 22px 0 12px; text-align: left; font-size: 12px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); } .dp-form-success__opt-text { display: flex; flex-direction: column; min-width: 0; } .dp-form-success__opt-title { font-weight: 650; font-size: 15px; color: var(--ink); } .dp-form-success__opt-sub { font-size: 13px; color: var(--ink-3); } .dp-form-success__arrow { width: 18px; height: 18px; margin-left: auto; flex: 0 0 auto; color: var(--ink-3); transition: transform 0.2s var(--ease-out), color 0.2s ease; } .dp-form-success__option:hover .dp-form-success__arrow { transform: translateX(3px); color: var(--accent); } /* ----------------------------------------------------------------- prose */ .dp-prose { max-width: 74ch; margin-inline: auto; font-size: 18px; line-height: 1.75; } .dp-prose h1, .dp-prose h2, .dp-prose h3 { margin: 1.6em 0 0.6em; } .dp-prose h2 { font-size: clamp(24px, 3vw, 32px); } .dp-prose h3 { font-size: clamp(20px, 2.4vw, 24px); } .dp-prose p { margin: 0 0 1.2em; color: var(--ink-2); } .dp-prose > p:first-of-type { font-size: 20px; color: var(--ink); } .dp-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-soft); transition: text-decoration-color 0.2s; } .dp-prose a:hover { text-decoration-color: var(--accent); } .dp-prose img { border-radius: var(--radius-m); margin: 2em 0; box-shadow: var(--shadow-m); } .dp-prose ul, .dp-prose ol { margin: 0 0 1.2em; padding-left: 1.3em; color: var(--ink-2); } .dp-prose li { margin-bottom: 0.5em; } .dp-prose li::marker { color: var(--accent); } .dp-prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--accent); font-style: italic; color: var(--ink); } /* ---------------------------------------------------------------- tables */ .dp-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-m); } .dp-table { width: 100%; border-collapse: collapse; font-size: 15.5px; } .dp-table th { font-family: var(--font-body); font-weight: 700; text-align: left; padding: 16px 20px; background: var(--bg-sunken); border-bottom: 1px solid var(--line-strong); white-space: nowrap; } .dp-table td { padding: 14px 20px; border-bottom: 1px solid var(--line); color: var(--ink-2); } .dp-table tr:last-child td { border-bottom: 0; } .dp-table tbody tr { transition: background-color 0.15s ease; } .dp-table tbody tr:hover { background: var(--accent-soft); } /* ---------------------------------------------------------------- footer */ .dp-footer { margin-top: clamp(48px, 8vw, 96px); padding: clamp(48px, 6vw, 80px) 0 40px; background: var(--bg-sunken); border-top: 1px solid var(--line); } .dp-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); } @media (max-width: 860px) { .dp-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .dp-footer__grid { grid-template-columns: 1fr; } } .dp-footer__title { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; } .dp-footer a { display: block; padding: 5px 0; font-size: 15px; color: var(--ink-2); transition: color 0.2s, translate 0.2s var(--ease-out); } .dp-footer a:hover { color: var(--accent); translate: 3px 0; } .dp-footer__meta { margin-top: clamp(36px, 5vw, 56px); padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between; font-size: 13.5px; color: var(--ink-3); } /* --------------------------------------------------------------- badges */ .dp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--bg-elev); font-size: 14px; font-weight: 500; color: var(--ink-2); } /* ---------------------------------------------------------------- motion */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity var(--speed) var(--ease-out), transform var(--speed) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); } [data-reveal="left"] { transform: translateX(-32px); } [data-reveal="right"] { transform: translateX(32px); } [data-reveal="scale"] { transform: scale(0.94); } [data-reveal].is-inview { opacity: 1; transform: none; } /* Hero load choreography (no scroll needed) */ @keyframes dp-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } .dp-hero [data-load] { opacity: 0; animation: dp-rise 0.9s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 120ms + 100ms); } /* Ambient float for hero media / robots */ @keyframes dp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .dp-float { animation: dp-float 7s ease-in-out infinite; } /* No-JS and reduced-motion safety: everything visible, nothing moves */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal], .dp-hero [data-load] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } .dp-marquee__track, .dp-float { animation: none !important; } } .no-js [data-reveal], .no-js .dp-hero [data-load] { opacity: 1; transform: none; animation: none; } @media print { [data-reveal], .dp-hero [data-load] { opacity: 1 !important; transform: none !important; animation: none !important; } } /* ------------------------------------- light-theme contrast (review round) */ /* The Dots logo SVG is white; render it black on light surfaces. */ .dp-logo img { filter: brightness(0); transition: filter 0.35s ease; } [data-theme="dark"] .dp-logo img { filter: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dp-logo img { filter: none; } } /* Chip behind line-art icons so white/pale PNGs read on light cards. */ .dp-icon-chip { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%); box-shadow: 0 8px 20px -8px var(--accent-glow); margin-bottom: 20px; } .dp-icon-chip img { width: 36px; height: 36px; object-fit: contain; margin: 0; } .dp-icon-chip--soft { background: var(--accent-soft); box-shadow: none; } .dp-icon-chip--soft img { width: 40px; height: 40px; } /* Gentle pop for pale marketing illustrations on light backgrounds. */ .dp-img-pop { filter: saturate(1.14) contrast(1.08); } [data-theme="dark"] .dp-img-pop { filter: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dp-img-pop { filter: none; } } /* Theme-ink logo: white/one-color logo PNGs rendered via CSS mask so they read in BOTH themes as uniform monochrome marks. */ .dp-logo-ink { display: inline-block; width: 140px; min-width: 120px; min-height: 34px; height: 44px; background: var(--ink); opacity: 0.62; -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; mask-position: center; mask-size: contain; mask-repeat: no-repeat; transition: opacity 0.3s ease; vertical-align: middle; } .dp-logo-ink:hover { opacity: 0.95; } .dp-marquee .dp-logo-ink { flex: 0 0 auto; width: 170px; height: 52px; } .dp-card .dp-logo-ink { max-width: 100%; } /* Mobile rhythm: tighter cards and sections so long stacked pages scan faster */ @media (max-width: 620px) { .dp-card { padding: 20px; } .dp-section { padding-block: 48px; } .dp-hero { padding-block: 88px 48px; } } /* Founder personal-site link: quiet by default, accent on hover */ a[href*="yehorherasymchuk.com"]:hover { color: var(--accent); } /* ----------------------------------------------------- phone with country */ .dp-phone { display: flex; border-radius: var(--radius-s); transition: box-shadow 0.2s; } .dp-phone select.dp-phone__code { flex: 0 0 auto; max-width: 132px; padding: 15px 30px 15px 14px; font: inherit; font-size: 15px; color: var(--ink); /* Native selects ignore border-radius on WebKit and draw their own corners, so strip the OS look and provide a custom chevron. */ appearance: none; -webkit-appearance: none; background-color: var(--bg-sunken); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 11px; border: 1px solid var(--line-strong); /* Join with the number field: the code keeps only its left corners and drops its right border, so the two read as one pill. !important beats the generic .dp-form select rule. */ border-right: 0 !important; border-radius: var(--radius-s) 0 0 var(--radius-s) !important; cursor: pointer; transition: border-color 0.2s; } .dp-phone input { flex: 1; min-width: 0; border-radius: 0 var(--radius-s) var(--radius-s) 0 !important; } /* One shared focus ring around the whole group instead of a glow per field. */ .dp-phone:focus-within { box-shadow: 0 0 0 4px var(--accent-soft); } .dp-phone:focus-within .dp-phone__code, .dp-phone:focus-within input { border-color: var(--accent); } .dp-phone input:focus, .dp-phone .dp-phone__code:focus { box-shadow: none !important; } /* --------------------------------------------------------------- gallery */ .dp-gal { position: relative; } .dp-gal__arrow { position: absolute; top: 50%; margin-top: -23px; z-index: 5; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line-strong); color: var(--ink); box-shadow: var(--shadow-m); cursor: pointer; transition: transform 0.3s var(--ease-spring), color 0.2s, border-color 0.2s, opacity 0.2s; } .dp-gal__arrow:hover { color: var(--accent); border-color: var(--accent); transform: scale(1.1); } .dp-gal__arrow--prev { left: 10px; } .dp-gal__arrow--next { right: 10px; } .dp-gal__arrow[disabled] { opacity: 0.3; pointer-events: none; } .dp-gal__arrow svg { width: 20px; height: 20px; } @keyframes dp-gal-nudge { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.22); } 40% { transform: scale(1); } 60% { transform: scale(1.14); } 80% { transform: scale(1); } } .dp-gal__arrow.is-nudging { animation: dp-gal-nudge 1.1s var(--ease-out); box-shadow: 0 0 0 7px var(--accent-soft), var(--shadow-m); color: var(--accent); } .dp-gal__dots { display: flex; gap: 8px; justify-content: center; margin-top: 18px; } .dp-gal__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--line-strong); border: 0; padding: 0; cursor: pointer; transition: width 0.35s var(--ease-out), background-color 0.3s; } .dp-gal__dot.is-active { width: 24px; background: var(--accent); } @media (prefers-reduced-motion: reduce) { .dp-gal__arrow.is-nudging { animation: none; box-shadow: var(--shadow-m); } } /* Attention wave for clickable feature cards: a soft accent pulse rolls through the grid (stagger via --bi), pausing long between passes. */ @keyframes dp-beckon { 0%, 86%, 100% { box-shadow: var(--shadow-s); } 90% { box-shadow: 0 0 0 6px var(--accent-soft), var(--shadow-m); } 94% { box-shadow: var(--shadow-s); } } .dp-card--beckon { animation: dp-beckon 9s infinite; animation-delay: calc(var(--bi, 0) * 0.4s); } @media (prefers-reduced-motion: reduce) { .dp-card--beckon { animation: none; } } /* ------------------------------------------------------------------ blog */ .dp-post-card { display: flex; flex-direction: column; gap: 10px; height: 100%; } .dp-post-card__cover { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 14px; margin-bottom: 8px; } .dp-post-card .dp-eyebrow { margin-bottom: 0; font-size: 11.5px; } .dp-post-card h3 { font-size: 18px; font-weight: 600; line-height: 1.3; } .dp-post-card p { font-size: 14.5px; color: var(--ink-2); flex: 1; } .dp-post-card .dp-post-card__meta { font-size: 13px; color: var(--ink-3); } .dp-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; font-size: 14.5px; color: var(--ink-3); margin-top: 22px; } /* Dot separator between the fact spans (date · reading time). */ .dp-article-meta > span:not(.dp-author) + span:not(.dp-author)::before { content: "·"; margin-inline-end: 12px; color: var(--ink-3); } /* Author shown as a contact: round photo left, name over role on the right. */ .dp-author { display: flex; align-items: center; gap: 12px; flex-basis: 100%; } .dp-author__photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; } .dp-author__text { display: flex; flex-direction: column; line-height: 1.25; } .dp-author__name { color: var(--ink); font-weight: 600; font-size: 15px; } .dp-author__role { color: var(--ink-3); font-size: 13px; } .dp-cta-band { margin: 2.4em 0; padding: clamp(24px, 3.5vw, 40px); border-radius: var(--radius-l); background: radial-gradient(30rem 16rem at 90% -30%, rgba(255, 255, 255, 0.16), transparent 60%), linear-gradient(135deg, var(--accent) 0%, #e4550f 60%, var(--pink) 130%); color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; } .dp-cta-band__title { font-family: var(--font-display); font-size: clamp(19px, 2.4vw, 24px); font-weight: 650; max-width: 26ch; text-wrap: balance; } .dp-cta-band p { color: rgba(255, 255, 255, 0.85); font-size: 15px; margin-top: 6px; } .dp-cta-band .dp-btn { background: #fff; color: var(--accent-strong); box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.4); } .dp-cta-band .dp-btn:hover { transform: translateY(-2px) scale(1.02); } .dp-figure { margin: 2em 0; padding: clamp(20px, 3vw, 32px); background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-m); } .dp-figure svg { width: 100%; height: auto; display: block; } .dp-figure figcaption { margin-top: 14px; font-size: 13.5px; color: var(--ink-3); } /* simple horizontal bar chart rows used inside articles */ .dp-bar { display: grid; grid-template-columns: minmax(110px, 200px) 1fr 64px; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 14.5px; } .dp-bar__track { height: 22px; border-radius: 6px; background: var(--bg-sunken); overflow: hidden; } .dp-bar__fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); width: var(--w, 50%); } .dp-bar--muted .dp-bar__fill { background: var(--ink-3); opacity: 0.5; } .dp-bar__value { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } /* --------------------------------------------------------------- helpers */ .dp-center { text-align: center; } .dp-center .dp-lead { margin-inline: auto; } .dp-mt-0 { margin-top: 0; } .dp-mt-16 { margin-top: 16px; } .dp-mt-24 { margin-top: 24px; } .dp-mt-40 { margin-top: 40px; } .dp-mt-64 { margin-top: 64px; } .dp-mb-24 { margin-bottom: 24px; } .dp-mb-40 { margin-bottom: 40px; } .dp-mb-64 { margin-bottom: clamp(40px, 6vw, 64px); } .dp-hide-mobile { display: revert; } @media (max-width: 620px) { .dp-hide-mobile { display: none; } } /* App screenshot carousel: a horizontal scroll-snap track that dots.js upgrades with arrows and dots (the same gallery used elsewhere on the site). Each
holds a desktop and a mobile screenshot; only one shows. */ .dpx-gallery { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 14px; } .dpx-gallery > figure, .dpx-gallery > img { flex: 0 0 auto; margin: 0; scroll-snap-align: center; } .dpx-gallery > img, .dpx-gallery > figure img { display: block; height: auto; border-radius: 20px; } .dpx-gallery .dpx-mobile { display: none; } @media (max-width: 767px) { .dpx-gallery .dpx-desktop { display: none; } .dpx-gallery .dpx-mobile { display: block; } } /* Responsive 16:9 video embed (YouTube / embedly). The parent container centers it on the page; this keeps the player full-width and proportional instead of falling back to the iframe's tiny intrinsic size. */ .dpx-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-inline: auto; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); } .dpx-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }