/* GrabGram — design system for the product funnel (home + download, EN + RU). The stance is a dual-intent utility: the tool is the page. One segmented control picks the job, one field takes the input, everything else is a short factual explanation of what happens in the bot afterwards. The advertising landings under /anonymous/ and /*-ya/ keep their own dark inline styles and do not load this file. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Surfaces — warm neutrals, never pure grey */ --bg: #fbf9f7; --bg-alt: #f4f1ed; --surface: #ffffff; --surface-sunken: #f2eee9; /* Lines */ --border: #e2dcd5; --rule: #d8d1c9; /* structural hairlines, stronger than a card edge */ --border-input: #8a8078; /* 3.8:1 on white — an unfocused control stays visible */ /* Ink */ --ink: #17131a; --ink-secondary: #514a55; --ink-muted: #6b636e; /* Brand — Instagram-derived, darkened until it is readable on white */ --brand-pink: #c9226b; --brand-purple: #7e2a9e; --accent: #a3256f; /* 6.9:1 on white */ --accent-soft: #fdf0f6; --cta-bg: linear-gradient(135deg, #c9226b, #7e2a9e); --cta-bg-hover: linear-gradient(135deg, #b71b60, #6e2490); /* States */ --success: #0f7b5a; --success-soft: #e8f5ef; --danger: #b3261e; --radius-sm: 8px; --radius: 12px; --radius-lg: 20px; --shadow-card: 0 1px 2px rgba(23, 19, 26, 0.04); --shadow-form: 0 2px 6px rgba(23, 19, 26, 0.05), 0 18px 44px rgba(23, 19, 26, 0.09); --maxw: 1080px; --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; } html { scroll-behavior: smooth; /* `clip`, never `hidden`: `hidden` here or on turns the page into its own scroll container, and the sticky header would then stick to a box as tall as the document — i.e. never move. */ overflow-x: clip; /* Anchor targets (#auto, #pricing, #faq, the form) must land below the header. */ scroll-padding-top: 78px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } [hidden] { display: none !important; } :focus-visible { outline: 3px solid var(--brand-purple); outline-offset: 2px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--surface); color: var(--ink); padding: 12px 18px; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; } .skip-link:focus { left: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ===== Layout ===== */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } .section { padding: 56px 0; border-top: 1px solid var(--rule); } .section--tight { padding: 40px 0; } .section--alt { background: var(--bg-alt); } .section-head { max-width: 620px; margin-bottom: 28px; } h1, h2, h3 { letter-spacing: -0.022em; line-height: 1.15; font-weight: 800; } h1 { font-size: 33px; letter-spacing: -0.034em; } h2 { font-size: 26px; margin-bottom: 10px; } h3 { font-size: 17px; letter-spacing: -0.01em; } /* Small structural labels. Mono, not a pill: this is a signpost, not a badge. */ .eyebrow { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .lede { font-size: 18px; line-height: 1.55; color: var(--ink-secondary); } .muted { color: var(--ink-muted); } .small { font-size: 14px; line-height: 1.55; } /* ===== Header ===== */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(251, 249, 247, 0.9); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--rule); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; } .brand img { width: 26px; height: 26px; border-radius: 7px; } .site-nav { display: flex; align-items: center; gap: 20px; } .site-nav__link { font-size: 15px; font-weight: 500; color: var(--ink-secondary); transition: color 0.15s ease; } .site-nav__link:hover { color: var(--ink); } .lang-switch { display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--surface-sunken); border: 1px solid var(--border-input); border-radius: 999px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; } .lang-switch a { padding: 4px 10px; border-radius: 999px; color: var(--ink-secondary); } .lang-switch a:hover { color: var(--ink); } .lang-switch a.is-active { background: var(--ink); color: #fff; } /* ===== Buttons ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 24px; font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; text-align: center; transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease; -webkit-tap-highlight-color: transparent; } .btn--primary { background: var(--cta-bg); color: #fff; } .btn--primary:hover { background: var(--cta-bg-hover); transform: translateY(-1px); } .btn--primary:active { transform: translateY(1px); } .btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--border-input); } .btn--secondary:hover { border-color: var(--ink); transform: translateY(-1px); } .btn--sm { padding: 9px 15px; font-size: 14px; border-radius: 10px; } .btn--block { width: 100%; } /* The busy state is carried by the spinner and the label, not by fading the button out: at 70% opacity the white label dropped to ~3:1 on the gradient, which is exactly the moment the visitor is reading it. */ .btn[disabled] { cursor: progress; } .btn--primary[disabled] { background: var(--cta-bg-hover); } .btn--secondary[disabled] { color: var(--ink-secondary); } .btn[disabled]:hover, .btn[disabled]:active { transform: none; } /* ===== Handoff — the shared funnel entry ===== Two intents, one field. The segmented control is the first thing in the card because it decides what every line below it means. */ .handoff { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-form); padding: 14px; text-align: left; scroll-margin-top: 80px; } .handoff__modes { display: flex; gap: 3px; padding: 3px; background: var(--surface-sunken); border: 1px solid var(--border-input); border-radius: var(--radius); margin-bottom: 18px; } .handoff__mode { flex: 1 1 0; padding: 10px 8px; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-secondary); background: none; border: none; border-radius: 9px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .handoff__mode:hover { color: var(--ink); } .handoff__mode.is-active { background: var(--ink); color: #fff; } .handoff__mode[disabled] { cursor: progress; } .handoff__panel { padding: 0 4px 4px; } .handoff__label { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px; } .handoff__row { display: flex; flex-direction: column; gap: 10px; } .handoff__input { width: 100%; padding: 15px 16px; font-family: inherit; font-size: 16px; /* 16px keeps iOS from zooming the page on focus */ line-height: 1.4; color: var(--ink); background: var(--surface); border: 1px solid var(--border-input); border-radius: var(--radius); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; -webkit-appearance: none; appearance: none; } .handoff__input::placeholder { color: var(--ink-muted); } .handoff__input:focus, .handoff__input:focus-visible { border-color: var(--brand-purple); box-shadow: 0 0 0 4px rgba(126, 42, 158, 0.16); outline: none; } .handoff__input:read-only { background: var(--surface-sunken); color: var(--ink-secondary); } .handoff__submit { flex: 0 0 auto; white-space: nowrap; } .handoff__status { margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--ink-secondary); } .handoff__status--error { color: var(--danger); font-weight: 600; } .handoff__status--success { color: var(--success); font-weight: 600; } .handoff__hint { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--ink-muted); } .handoff__hint a { color: var(--accent); text-decoration: underline; } .spinner { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; flex: 0 0 auto; } @keyframes spin { to { transform: rotate(360deg); } } /* What the field accepts — mono, so it reads as syntax rather than marketing. */ .chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; } .chips li { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink-secondary); background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 4px 9px; } .chips[data-mode-only] { display: none; } .handoff[data-mode="download"] .chips[data-mode-only="download"], .handoff[data-mode="profile"] .chips[data-mode-only="profile"] { display: flex; } /* ===== Hero ===== */ .hero { padding: 32px 0 44px; } .hero__inner { display: flex; flex-direction: column; gap: 28px; } .hero__copy { max-width: 640px; } .hero h1 { margin-bottom: 14px; } .hero .lede { margin-bottom: 0; } .hero__form { width: 100%; } /* ===== Cards & grids ===== */ .grid { display: grid; grid-template-columns: 1fr; gap: 14px; } .card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-card); } .card h3 { margin-bottom: 6px; } .card p { color: var(--ink-secondary); font-size: 15.5px; line-height: 1.55; } /* Ordinal steps: a mono index over a hairline, not a coloured bubble. */ .card__index { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--accent); padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--rule); } /* ===== Fact list (what automatic delivery actually does) ===== */ .factlist { list-style: none; } .factlist li { position: relative; padding: 8px 0 8px 28px; color: var(--ink-secondary); font-size: 16px; line-height: 1.5; } .factlist li + li { border-top: 1px solid var(--rule); } .factlist li::before { content: '\2713'; position: absolute; left: 0; top: 8px; color: var(--success); font-weight: 800; } .factlist strong { color: var(--ink); font-weight: 700; } .auto__copy { max-width: 620px; } .auto__cta { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } /* ===== Pricing ===== */ .plan { display: flex; flex-direction: column; position: relative; } .plan--featured { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); } .plan__badge { position: absolute; top: -11px; left: 20px; background: var(--ink); color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; } .plan__name { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 8px; } .plan__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; } .plan__price .period { font-size: 14px; font-weight: 500; color: var(--ink-muted); letter-spacing: 0; } .plan__equiv { font-size: 13.5px; color: var(--ink-muted); margin: 6px 0 16px; } .plan__features { list-style: none; margin-bottom: 20px; flex: 1 1 auto; } .plan__features li { position: relative; padding: 5px 0 5px 22px; font-size: 15px; color: var(--ink-secondary); } .plan__features li::before { content: '\2713'; position: absolute; left: 0; top: 5px; color: var(--success); font-weight: 800; } .pricing-note { color: var(--ink-muted); font-size: 14px; line-height: 1.55; margin-top: 20px; max-width: 720px; } /* ===== FAQ ===== */ .faq { max-width: 760px; } .faq__item { border-bottom: 1px solid var(--rule); } .faq__item:first-child { border-top: 1px solid var(--rule); } .faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 2px; background: none; border: none; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--ink); text-align: left; line-height: 1.4; cursor: pointer; } .faq__icon { flex: 0 0 auto; font-size: 20px; color: var(--ink-muted); transition: transform 0.25s ease; line-height: 1; } .faq__item.is-open .faq__icon { transform: rotate(45deg); } /* A closed answer is removed from the document with [hidden] rather than clipped to zero height — a clipped answer keeps its links focusable and still reads out to a screen reader while the panel says it is collapsed. */ .faq__a { padding: 0 2px 18px; color: var(--ink-secondary); font-size: 15.5px; line-height: 1.6; max-width: 660px; } .faq__a a { color: var(--accent); text-decoration: underline; } /* ===== Final CTA ===== */ .final { padding: 52px 0; border-top: 1px solid var(--rule); } .final__box { max-width: 620px; } .final__buttons { display: flex; flex-direction: column; gap: 12px; align-items: stretch; margin-top: 22px; } /* ===== Footer ===== */ .site-footer { border-top: 1px solid var(--rule); padding: 24px 0 36px; color: var(--ink-muted); font-size: 14px; } .site-footer a { color: var(--accent); } .site-footer a:hover { text-decoration: underline; } .site-footer p:first-child a { text-decoration: underline; text-underline-offset: 2px; } .site-footer__links { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 2px; } /* Standalone footer links are tap targets, not running text — 44px tall. */ .site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; } /* ===== Responsive ===== */ @media (min-width: 560px) { .handoff { padding: 16px; } .handoff__row { flex-direction: row; align-items: stretch; } .handoff__input { flex: 1 1 auto; } .handoff__mode { font-size: 15px; padding: 11px 10px; } .final__buttons { flex-direction: row; align-items: center; } .auto__cta { flex-direction: row; align-items: center; } } @media (min-width: 768px) { h1 { font-size: 44px; } h2 { font-size: 30px; } .hero { padding: 48px 0 60px; } .lede { font-size: 19px; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(2, 1fr); } .section { padding: 72px 0; } .section--tight { padding: 56px 0; } .card { padding: 24px; } } @media (min-width: 1024px) { h1 { font-size: 50px; } .hero { padding: 64px 0 72px; } .hero__inner { flex-direction: row; align-items: center; gap: 56px; } .hero__copy { flex: 1 1 46%; } .hero__form { flex: 1 1 54%; max-width: 540px; } .grid--4 { grid-template-columns: repeat(4, 1fr); } .container { padding: 0 32px; } } @media (max-width: 559px) { .hide-sm { display: none !important; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; } }