/* ============================================================ VeruSuite marketing site — design tokens + landing styles. Combines the cross-app token system (matches the webmail's tokens.css verbatim) with the .lp-* landing classes. Lives at /static/css/site.css. Referenced from base.html. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); :root { /* Surfaces (warm paper, not stark white) */ --vm-paper: #f7f6f2; --vm-paper-sunken: #efece5; --vm-paper-raised: #fdfcf9; --vm-white: #ffffff; /* Ink */ --vm-ink: #2a2a28; --vm-ink-2: #4a4a45; --vm-ink-3: #82807a; --vm-ink-4: #b3b0a6; /* Lines */ --vm-line: rgba(42, 42, 40, 0.08); --vm-line-strong: rgba(42, 42, 40, 0.16); --vm-line-faint: rgba(42, 42, 40, 0.04); /* Navy (authority, trust) */ --vm-navy: #1a3a5c; --vm-navy-hover: #234970; --vm-navy-press: #14304d; --vm-navy-soft: #e7ecf3; --vm-navy-ink: #ffffff; /* Gold (the "veru" moment) */ --vm-gold: #c9a96e; --vm-gold-deep: #a98a4f; --vm-gold-soft: #f3ead6; --vm-gold-ink: #3d2e10; /* Semantic */ --vm-green: #4a7c59; --vm-green-soft: #e6efe7; --vm-amber: #b8761c; --vm-amber-soft: #f6ead0; --vm-red: #a8453a; --vm-red-soft: #f3dcd6; --vm-violet: #5b4b8c; --vm-violet-soft: #ebe5f3; /* Type families — one face, Inter */ --vm-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --vm-mono: 'Inter', ui-monospace, 'SF Mono', Menlo, monospace; /* Shadows */ --vm-shadow-1: 0 1px 2px rgba(28, 28, 26, 0.04), 0 0 0 1px var(--vm-line); --vm-shadow-2: 0 1px 2px rgba(28, 28, 26, 0.04), 0 4px 12px rgba(28, 28, 26, 0.06), 0 0 0 1px var(--vm-line); --vm-shadow-3: 0 8px 24px rgba(28, 28, 26, 0.10), 0 2px 6px rgba(28, 28, 26, 0.06), 0 0 0 1px var(--vm-line); --vm-shadow-pop: 0 24px 64px rgba(20, 30, 50, 0.20), 0 4px 12px rgba(20, 30, 50, 0.08); /* Motion */ --vm-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --vm-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --vm-dur-1: 120ms; --vm-dur-2: 200ms; --vm-dur-3: 320ms; } /* Dark mode — "night paper". Toggled via [data-theme="dark"] on by the inline boot script in base.html. */ :root[data-theme="dark"] { --vm-paper: #1a1815; --vm-paper-sunken: #141310; --vm-paper-raised: #23211e; --vm-white: #2a2825; --vm-ink: #ebe7dd; --vm-ink-2: #b8b4aa; --vm-ink-3: #807c73; --vm-ink-4: #4f4c46; --vm-line: rgba(235, 231, 221, 0.08); --vm-line-strong: rgba(235, 231, 221, 0.16); --vm-line-faint: rgba(235, 231, 221, 0.04); --vm-navy: #4a76aa; --vm-navy-hover: #5b87bd; --vm-navy-press: #3a5f87; --vm-navy-soft: #1f2c3d; --vm-navy-ink: #ffffff; --vm-gold: #d4b67a; --vm-gold-deep: #e0c891; --vm-gold-soft: #3a2f1a; --vm-gold-ink: #f3ead6; --vm-green: #7aa685; --vm-green-soft: #1d2a22; --vm-red: #c97167; --vm-red-soft: #2e1f1c; --vm-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 0 0 1px var(--vm-line); --vm-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.36), 0 0 0 1px var(--vm-line); --vm-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.30), 0 0 0 1px var(--vm-line); --vm-shadow-pop: 0 24px 64px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.30); } /* ============================================================ Base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--vm-sans); font-size: 14px; color: var(--vm-ink); background: var(--vm-paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; } :focus-visible { outline: 2px solid var(--vm-navy); outline-offset: 2px; border-radius: 4px; } /* Inline link defaults. Without this, anchors fell through to the browser-default deep blue (#0000EE), which sits at about 2:1 contrast on dark-mode surfaces. We only set color here, not text-decoration, so button-styled anchors (.lp-btn, etc.) keep their own treatment. Contexts that want a visible underline opt in via their own selectors (.signup__tos a, .signup__alt a, the marketing prose links). */ a { color: var(--vm-navy); transition: color 120ms var(--vm-ease); } a:hover { color: var(--vm-navy-hover); } [data-theme="dark"] a { /* Bumped a step brighter than --vm-navy (#4a76aa) so links are visibly clickable on the dark paper-sunken background. */ color: #7ea7d1; } [data-theme="dark"] a:hover { color: #a0c2e3; } /* ============================================================ Reusable ============================================================ */ .lp-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; } .lp-section { padding: 120px 0; position: relative; } .lp-section--sunken { background: var(--vm-paper-sunken); } /* Trust + closing CTA — always-dark band, doesn't invert in dark mode */ .lp-section--ink { --vm-ink-band: #1a1815; --vm-paper-on-ink: #f7f6f2; background: var(--vm-ink-band); color: var(--vm-paper-on-ink); } .lp-eyebrow { display: inline-flex; align-items: center; font-family: var(--vm-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--vm-gold-deep); } h2.lp-h2 { font-family: var(--vm-sans); font-weight: 600; font-size: clamp(36px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.03em; margin: 16px 0 20px; text-wrap: balance; } p.lp-lede { font-size: 18px; line-height: 1.55; color: var(--vm-ink-2); max-width: 56ch; margin: 0; } .lp-section--ink h2.lp-h2 { color: #f7f6f2 !important; } .lp-section--ink p.lp-lede { color: rgba(247, 246, 242, 0.82); } .lp-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: 10px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; transition: transform 120ms var(--vm-ease), background 120ms var(--vm-ease), box-shadow 120ms var(--vm-ease); cursor: pointer; text-decoration: none; border: 1px solid transparent; gap: 8px; } /* Double-class selector (.lp-btn.lp-btn--primary) bumps specificity to (0,2,0) so the white text color wins inside contexts like .lp-nav__cta where `a` selectors otherwise re-color the link. */ .lp-btn.lp-btn--primary { background: var(--vm-navy); color: var(--vm-navy-ink); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 2px 6px rgba(26, 58, 92, 0.20); } .lp-btn.lp-btn--primary:hover { background: var(--vm-navy-hover); color: var(--vm-navy-ink); } .lp-btn--ghost { background: transparent; color: var(--vm-ink); border-color: var(--vm-line-strong); } .lp-btn--ghost:hover { background: var(--vm-paper-sunken); border-color: var(--vm-ink-3); } .lp-section--ink .lp-btn--ghost { color: var(--vm-paper); border-color: rgba(247,246,242,0.2); } .lp-section--ink .lp-btn--ghost:hover { background: rgba(247,246,242,0.08); border-color: rgba(247,246,242,0.4); } /* ============================================================ Nav ============================================================ */ .lp-nav { position: sticky; top: 0; z-index: 50; background: rgba(247, 246, 242, 0.85); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--vm-line); } [data-theme="dark"] .lp-nav { background: rgba(26, 24, 21, 0.85); } .lp-nav__inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; height: 64px; display: flex; align-items: center; gap: 40px; } .lp-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; } .lp-brand__wordmark { font-family: var(--vm-sans); font-weight: 600; font-size: 17px; letter-spacing: -0.025em; color: var(--vm-ink); } .lp-nav__links { display: flex; gap: 28px; margin-left: 24px; } .lp-nav__links a { font-size: 13px; color: var(--vm-ink-2); text-decoration: none; font-weight: 500; transition: color 120ms var(--vm-ease); } .lp-nav__links a:hover { color: var(--vm-ink); } .lp-nav__cta { display: flex; gap: 12px; margin-left: auto; align-items: center; } .lp-nav__cta a { font-size: 13px; font-weight: 500; text-decoration: none; color: var(--vm-ink-2); } .lp-nav__cta a:hover { color: var(--vm-ink); } .lp-nav__theme { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: transparent; border: 1px solid var(--vm-line-strong); color: var(--vm-ink-2); cursor: pointer; } .lp-nav__theme:hover { background: var(--vm-paper-sunken); color: var(--vm-ink); } /* Hamburger + mobile drawer. Default (desktop) state: burger hidden, drawer hidden, desktop links + CTA cluster visible. The @media block below flips visibility on narrow viewports; the drawer toggles open via the .is-open class on .lp-nav, applied by site.js when the burger is clicked. */ .lp-nav__burger { display: none; width: 40px; height: 40px; /* Inline-start = side facing the brand in either direction. Pushes the burger to the inline-end (far side) without a physical-left/ right mismatch in RTL. */ margin-inline-start: auto; place-items: center; background: transparent; border: 1px solid var(--vm-line-strong); border-radius: 8px; color: var(--vm-ink); cursor: pointer; } .lp-nav__burger:hover { background: var(--vm-paper-sunken); } .lp-nav__burger-close { display: none; } .lp-nav.is-open .lp-nav__burger-open { display: none; } .lp-nav.is-open .lp-nav__burger-close { display: block; } .lp-nav__mobile { display: none; } .lp-nav.is-open .lp-nav__mobile { display: flex; flex-direction: column; gap: 4px; padding: 12px 24px 20px; border-top: 1px solid var(--vm-line); background: var(--vm-paper); } .lp-nav__mobile a { font-size: 15px; color: var(--vm-ink); text-decoration: none; font-weight: 500; padding: 12px 8px; border-radius: 8px; } .lp-nav__mobile a:hover { background: var(--vm-paper-sunken); } .lp-nav__mobile-sep { height: 1px; background: var(--vm-line); margin: 8px 0; } .lp-nav__mobile-cta { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; font-size: 14px; margin-top: 4px; } /* Body scroll lock when the drawer is open, so the page beneath doesn't jiggle while the user navigates. site.js toggles this. */ body.lp-nav-open { overflow: hidden; } @media (max-width: 720px) { .lp-nav__inner { gap: 16px; padding: 0 20px; } .lp-nav__links { display: none; } .lp-nav__cta { display: none; } .lp-nav__burger { display: inline-grid; } } /* Language selector */ .lp-lang { position: relative; } .lp-lang__btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px; background: transparent; border: 1px solid var(--vm-line-strong); color: var(--vm-ink-2); font-size: 12px; font-weight: 500; cursor: pointer; font-family: var(--vm-mono); letter-spacing: 0.04em; transition: background 120ms var(--vm-ease), color 120ms var(--vm-ease); } .lp-lang__btn:hover { background: var(--vm-paper-sunken); color: var(--vm-ink); } .lp-lang.open .lp-lang__btn { background: var(--vm-paper-sunken); color: var(--vm-ink); } .lp-lang__btn svg:first-child { color: var(--vm-ink-3); } .lp-lang__menu { position: absolute; top: calc(100% + 6px); right: 0; list-style: none; padding: 6px; margin: 0; min-width: 200px; background: var(--vm-paper-raised); border: 1px solid var(--vm-line-strong); border-radius: 10px; box-shadow: var(--vm-shadow-3); z-index: 100; max-height: 320px; overflow-y: auto; animation: lpFadeUp 0.2s var(--vm-ease-out); } .lp-lang__menu li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 6px; font-size: 13px; color: var(--vm-ink); cursor: pointer; transition: background 120ms var(--vm-ease); position: relative; } .lp-lang__menu li:hover { background: var(--vm-paper-sunken); } .lp-lang__menu li.on { background: var(--vm-navy-soft); color: var(--vm-navy); font-weight: 500; } .lp-lang__menu li.on::after { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--vm-navy); flex-shrink: 0; margin-left: auto; } .lp-lang__menu .lp-lang__hint { font-family: var(--vm-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--vm-ink-3); } .lp-lang__menu li.on .lp-lang__hint { color: var(--vm-navy); opacity: 0.7; } /* ============================================================ Hero ============================================================ */ .lp-hero { padding: 88px 0 100px; position: relative; overflow: hidden; } .lp-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; } @media (max-width: 920px) { .lp-hero__grid { grid-template-columns: 1fr; gap: 48px; } } .lp-hero h1 { font-family: var(--vm-sans); font-weight: 600; font-size: clamp(48px, 7vw, 84px); line-height: 0.98; letter-spacing: -0.035em; margin: 24px 0 28px; text-wrap: balance; } .lp-hero h1 em { font-style: normal; color: var(--vm-navy); position: relative; display: inline-block; } .lp-hero h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.04em; height: 8px; background: var(--vm-gold-soft); z-index: -1; } .lp-hero__sub { font-size: 19px; line-height: 1.55; color: var(--vm-ink-2); max-width: 52ch; margin: 0 0 36px; } .lp-hero__ctas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .lp-hero__small { margin-top: 20px; font-size: 12px; color: var(--vm-ink-3); display: flex; gap: 14px; align-items: center; font-family: var(--vm-mono); flex-wrap: wrap; } .lp-hero__small svg { color: var(--vm-green); } /* Hero product mockup */ .lp-mock { position: relative; border-radius: 16px; overflow: hidden; background: var(--vm-paper-raised); box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 0 0 1px var(--vm-line), 0 30px 80px -20px rgba(20, 30, 50, 0.20), 0 10px 30px -10px rgba(20, 30, 50, 0.10); transform: perspective(2000px) rotateY(-6deg) rotateX(3deg); transition: transform 600ms var(--vm-ease-out); } .lp-mock:hover { transform: perspective(2000px) rotateY(-3deg) rotateX(1deg); } .lp-mock__chrome { height: 32px; background: var(--vm-paper-sunken); border-bottom: 1px solid var(--vm-line); display: flex; align-items: center; gap: 6px; padding: 0 14px; } .lp-mock__chrome span { width: 10px; height: 10px; border-radius: 999px; background: var(--vm-line-strong); } .lp-mock__chrome span:nth-child(1) { background: #ed6a5e; } .lp-mock__chrome span:nth-child(2) { background: #f4be4f; } .lp-mock__chrome span:nth-child(3) { background: #61c554; } .lp-mock__chrome .url { margin-left: 16px; font-family: var(--vm-mono); font-size: 11px; color: var(--vm-ink-3); padding: 3px 12px; background: var(--vm-paper); border-radius: 6px; border: 1px solid var(--vm-line); } /* Mini email app inside hero mock */ .lp-mini { display: grid; grid-template-columns: 180px 1fr; height: 380px; background: var(--vm-paper); font-size: 12px; } .lp-mini__rail { padding: 14px 10px; background: var(--vm-paper-sunken); border-right: 1px solid var(--vm-line); display: flex; flex-direction: column; gap: 4px; } .lp-mini__brand { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 2px 6px; } .lp-mini__brand-tile { width: 22px; height: 22px; position: relative; flex-shrink: 0; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .lp-mini__brand-name { font-size: 12px; font-weight: 600; letter-spacing: -0.02em; } .lp-mini__compose { height: 30px; padding: 0 10px; background: var(--vm-navy); color: var(--vm-navy-ink); border-radius: 6px; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; margin-bottom: 8px; } .lp-mini__folder { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 5px; color: var(--vm-ink-2); font-size: 11px; } .lp-mini__folder.on { background: var(--vm-paper-raised); color: var(--vm-ink); font-weight: 500; box-shadow: var(--vm-shadow-1); } .lp-mini__folder .count { margin-left: auto; font-family: var(--vm-mono); font-size: 10px; color: var(--vm-ink-3); } .lp-mini__folder.on .count { color: var(--vm-navy); } .lp-mini__body { display: flex; flex-direction: column; min-width: 0; } .lp-mini__list-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--vm-line); } .lp-mini__count { font-family: var(--vm-sans); font-weight: 600; font-size: 22px; letter-spacing: -0.03em; line-height: 1; } .lp-mini__count small { font-weight: 400; color: var(--vm-ink-3); font-size: 12px; margin-left: 6px; } .lp-mini__rows { flex: 1; overflow: hidden; } .lp-mini__row { display: flex; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--vm-line-faint); position: relative; } .lp-mini__row.on { background: var(--vm-navy-soft); } .lp-mini__row.on::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--vm-navy); } .lp-mini__avatar { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; flex-shrink: 0; font-size: 10px; font-weight: 600; } .lp-mini__row-body { flex: 1; min-width: 0; } .lp-mini__from { font-size: 11px; font-weight: 600; color: var(--vm-ink); display: flex; } .lp-mini__from .when { margin-left: auto; font-family: var(--vm-mono); font-size: 10px; color: var(--vm-ink-3); font-weight: 400; } .lp-mini__subj { font-size: 11px; color: var(--vm-ink); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lp-mini__row.on .lp-mini__subj { color: var(--vm-navy); } .lp-mini__prev { font-size: 10px; color: var(--vm-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; } /* Floating cards over hero mockup */ .lp-float { position: absolute; background: var(--vm-paper-raised); border: 1px solid var(--vm-line); border-radius: 12px; box-shadow: var(--vm-shadow-3); padding: 14px 16px; z-index: 2; backdrop-filter: blur(8px); } .lp-float--verified { top: 12%; left: -32px; width: 220px; transform: rotate(-2deg); } .lp-float--ai { bottom: -10px; right: -28px; width: 240px; transform: rotate(1.5deg); } .lp-float__row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .lp-float__title { font-size: 12px; font-weight: 600; letter-spacing: -0.01em; } .lp-float__caption { font-family: var(--vm-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--vm-gold-deep); } .lp-float__body { font-size: 11px; line-height: 1.5; color: var(--vm-ink-2); } .lp-float__pulse { width: 8px; height: 8px; border-radius: 999px; background: var(--vm-green); box-shadow: 0 0 0 0 rgba(74, 124, 89, 0.7); animation: lpPulse 2s infinite; } @keyframes lpPulse { 0% { box-shadow: 0 0 0 0 rgba(74, 124, 89, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(74, 124, 89, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 124, 89, 0); } } /* ============================================================ Trust strip ============================================================ */ .lp-trust { padding: 48px 0; border-top: 1px solid var(--vm-line); border-bottom: 1px solid var(--vm-line); } .lp-trust__inner { display: flex; align-items: center; gap: 60px; flex-wrap: wrap; justify-content: center; } .lp-trust__label { font-family: var(--vm-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--vm-ink-3); } .lp-trust__logos { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; } .lp-trust__logo { font-family: var(--vm-sans); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: var(--vm-ink-3); opacity: 0.7; transition: opacity 200ms var(--vm-ease), color 200ms var(--vm-ease); } .lp-trust__logo:hover { opacity: 1; color: var(--vm-ink-2); } .lp-trust__logo small { font-weight: 400; opacity: 0.7; margin-left: 2px; } /* ============================================================ Feature sections (split layout) ============================================================ */ .lp-feature { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; } .lp-feature--reverse { grid-template-columns: 1.1fr 1fr; } .lp-feature--reverse .lp-feature__visual { order: -1; } @media (max-width: 920px) { .lp-feature, .lp-feature--reverse { grid-template-columns: 1fr; gap: 48px; } .lp-feature--reverse .lp-feature__visual { order: 0; } } .lp-feature__text { max-width: 480px; } .lp-feature__num { font-family: var(--vm-mono); font-size: 11px; color: var(--vm-ink-3); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; } .lp-feature__list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; } .lp-feature__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--vm-ink-2); } .lp-feature__list svg { color: var(--vm-navy); flex-shrink: 0; margin-top: 2px; } /* Domain visual */ .lp-domain-card { background: var(--vm-paper-raised); border: 1px solid var(--vm-line); border-radius: 16px; padding: 24px; box-shadow: var(--vm-shadow-2); position: relative; overflow: hidden; } .lp-domain-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--vm-navy), var(--vm-gold)); } .lp-domain-card__head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--vm-line); } .lp-domain-card__head .glob { width: 44px; height: 44px; border-radius: 11px; background: var(--vm-navy-soft); color: var(--vm-navy); display: grid; place-items: center; } .lp-domain-card__title { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; font-family: var(--vm-mono); } .lp-domain-card__sub { font-size: 12px; color: var(--vm-ink-3); margin-top: 2px; font-family: var(--vm-mono); } .lp-domain-card__verify { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--vm-green-soft); color: var(--vm-green); font-size: 11px; font-weight: 600; } .lp-dns { display: grid; gap: 8px; margin-top: 16px; } .lp-dns__row { display: grid; grid-template-columns: 80px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; background: var(--vm-paper); border: 1px solid var(--vm-line); border-radius: 10px; font-family: var(--vm-mono); font-size: 12px; } .lp-dns__row .kind { font-weight: 600; color: var(--vm-ink); } .lp-dns__row .value { color: var(--vm-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lp-dns__row .ok { display: inline-flex; align-items: center; gap: 4px; color: var(--vm-green); font-weight: 600; font-size: 11px; } .lp-domain-card__foot { margin-top: 18px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--vm-ink-3); font-family: var(--vm-mono); } .lp-domain-card__foot strong { color: var(--vm-ink); font-weight: 600; } /* AI visual */ .lp-ai-card { background: var(--vm-paper-raised); border: 1px solid var(--vm-line); border-radius: 16px; overflow: hidden; box-shadow: var(--vm-shadow-2); } .lp-ai-card__head { padding: 16px 20px; border-bottom: 1px solid var(--vm-line); display: flex; align-items: center; gap: 10px; } .lp-ai-card__head .label { font-family: var(--vm-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--vm-ink-3); margin-left: auto; } .lp-ai-card__head .title { font-family: var(--vm-sans); font-weight: 600; font-size: 16px; letter-spacing: -0.02em; } .lp-ai-card__body { padding: 20px; display: grid; gap: 12px; } .lp-ai-inner { background: var(--vm-paper); border: 1px solid var(--vm-line); border-radius: 10px; padding: 14px; } .lp-ai-inner .cap { font-family: var(--vm-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--vm-gold-deep); margin-bottom: 8px; } .lp-ai-inner p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--vm-ink); } .lp-ai-action { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--vm-line-faint); } .lp-ai-action:first-of-type { border-top: none; padding-top: 0; } .lp-ai-action__check { width: 14px; height: 14px; border: 1.5px solid var(--vm-navy); border-radius: 3px; margin-top: 2px; flex-shrink: 0; } .lp-ai-action__check--done { background: var(--vm-navy); color: var(--vm-navy-ink); display: grid; place-items: center; } .lp-ai-action__body .text { font-size: 13px; color: var(--vm-ink); } .lp-ai-action__body .text--done { text-decoration: line-through; color: var(--vm-ink-3); } .lp-ai-action__body .meta { font-size: 11px; color: var(--vm-ink-3); margin-top: 2px; font-family: var(--vm-mono); } .lp-ai-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; } .lp-ai-chip { background: var(--vm-paper); border: 1px solid var(--vm-line-strong); border-radius: 999px; padding: 5px 12px; font-size: 12px; color: var(--vm-ink-2); } /* Suite grid */ .lp-suite-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 60px; } @media (max-width: 720px) { .lp-suite-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .lp-suite-grid { grid-template-columns: 1fr; } } .lp-app-card { background: var(--vm-paper-raised); border: 1px solid var(--vm-line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; transition: transform 200ms var(--vm-ease), box-shadow 200ms var(--vm-ease), border-color 200ms var(--vm-ease); cursor: pointer; position: relative; overflow: hidden; } .lp-app-card:hover { transform: translateY(-2px); box-shadow: var(--vm-shadow-2); border-color: var(--vm-line-strong); } .lp-app-card__chip { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; color: white; font-family: var(--vm-sans); font-weight: 600; font-size: 22px; letter-spacing: -0.03em; } .lp-app-card__logo { width: 44px; height: 44px; border-radius: 11px; display: block; } .lp-app-card__logo--lg { width: 48px; height: 48px; border-radius: 12px; } .lp-app-card__name { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; } .lp-app-card__desc { font-size: 13px; line-height: 1.5; color: var(--vm-ink-2); margin: 0; } .lp-app-card__tag { margin-top: auto; font-family: var(--vm-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--vm-ink-3); } .lp-app-card--featured { grid-row: span 2; grid-column: span 2; background: var(--vm-navy); color: var(--vm-paper); border-color: var(--vm-navy); padding: 32px; } @media (max-width: 720px) { .lp-app-card--featured { grid-column: 1 / -1; grid-row: auto; } } .lp-app-card--featured .lp-app-card__name { color: var(--vm-paper); font-size: 28px; letter-spacing: -0.025em; line-height: 1.05; } .lp-app-card--featured .lp-app-card__desc { color: rgba(247,246,242,0.7); font-size: 15px; max-width: 36ch; } .lp-app-card--featured .lp-app-card__chip { background: var(--vm-paper); color: var(--vm-navy); width: 48px; height: 48px; border-radius: 12px; font-size: 24px; } .lp-app-card--featured .lp-app-card__tag { color: var(--vm-gold); } /* Security */ .lp-sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; } @media (max-width: 720px) { .lp-sec-grid { grid-template-columns: 1fr; } } .lp-sec-item { padding: 24px; background: rgba(247, 246, 242, 0.05); border: 1px solid rgba(247, 246, 242, 0.14); border-radius: 14px; display: flex; flex-direction: column; gap: 8px; } .lp-sec-item__icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(201, 169, 110, 0.16); color: var(--vm-gold); display: grid; place-items: center; margin-bottom: 6px; } .lp-sec-item__title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #f7f6f2; } .lp-sec-item__desc { font-size: 13px; line-height: 1.55; color: rgba(247, 246, 242, 0.78); margin: 0; } .lp-sec-strip { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: 0; margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(247, 246, 242, 0.14); } @media (max-width: 720px) { .lp-sec-strip { grid-template-columns: repeat(2, auto); } } .lp-sec-strip__item { padding: 8px 32px; border-right: 1px solid rgba(247, 246, 242, 0.14); text-align: center; } .lp-sec-strip__item:last-child { border-right: none; } .lp-sec-strip__val { font-family: var(--vm-sans); font-weight: 600; font-size: 28px; letter-spacing: -0.025em; color: var(--vm-gold); display: block; } .lp-sec-strip__label { font-family: var(--vm-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(247, 246, 242, 0.72); margin-top: 6px; display: block; } /* Pricing */ .lp-price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 64px; } @media (max-width: 1080px) { .lp-price-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .lp-price-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } } /* 5-column variant for the new tier set (MailBox Only / Free / Starter / Professional / Enterprise). The modifier needs to defeat .lp-price-grid's breakpoints (specificity is equal so source order would otherwise let the 2/4-col rules above win at some viewports). We compound the class for higher specificity so the 5-col layout always sticks at >= 980px. Below that, we step down to 3 / 2 / 1 explicitly. Each card also tightens up its padding and typography so 5 across at the 1200px container is legible without the description text vanishing. */ .lp-price-grid.lp-price-grid--5col { grid-template-columns: repeat(5, 1fr); gap: 10px; } .lp-price-grid--5col .lp-price { padding: 20px 16px; } .lp-price-grid--5col .lp-price__name { font-size: 17px; } .lp-price-grid--5col .lp-price__desc { font-size: 12.5px; min-height: auto; } .lp-price-grid--5col .lp-price__amt .num { font-size: 30px; } .lp-price-grid--5col .lp-price__amt .per { font-size: 11.5px; } .lp-price-grid--5col ul li { font-size: 12.5px; } @media (max-width: 1180px) { .lp-price-grid.lp-price-grid--5col { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 820px) { .lp-price-grid.lp-price-grid--5col { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .lp-price-grid.lp-price-grid--5col { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } } /* Feature comparison table. Sits beneath the price cards on /pricing. Goals: clear per-tier scanability, sticky header on long scrolls, horizontal-scroll fallback on phones (the table simply can't shrink six columns into 360px without becoming illegible). */ .lp-compare-wrap { margin-top: 88px; } .lp-compare-heading { margin: 0 0 16px; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--vm-ink); } .lp-compare-scroll { overflow-x: auto; background: var(--vm-paper-raised); border: 1px solid var(--vm-line); border-radius: 14px; box-shadow: var(--vm-shadow-1, 0 1px 2px rgba(0,0,0,0.04)); } .lp-compare { width: 100%; min-width: 720px; /* below this, horizontal scroll kicks in */ border-collapse: separate; border-spacing: 0; font-size: 14px; color: var(--vm-ink); /* Fixed layout: every column in a numbered position gets the same width regardless of content length. Without this, an unusually long Arabic translation in one cell can push that column wider than its header (which is sticky-positioned and therefore size- locked) and create the visual "header doesn't line up with the value" effect. table-layout: fixed pins each column to the width of its header. */ table-layout: fixed; } /* Column sizing. First column (row labels) takes the slack so the plan columns stay narrow + equal. Plan columns inherit from this one rule because table-layout: fixed reads only the first row's col widths. */ .lp-compare col.lp-compare__col-feature { width: 38%; } .lp-compare col.lp-compare__col-plan { width: auto; } .lp-compare thead th { position: sticky; top: 0; z-index: 2; background: var(--vm-paper-sunken); color: var(--vm-ink-2); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; vertical-align: middle; padding-block: 14px; padding-inline: 14px; border-bottom: 1px solid var(--vm-line-strong); white-space: nowrap; } /* Row-label column header and cells use direction-aware `start` alignment so they hug the inline-start (left in LTR, right in RTL) of their cell - matching how the table reads in either direction. Centered value columns stay centered regardless of direction. */ .lp-compare thead th.lp-compare__feature-th { text-align: start; } .lp-compare__cat th { background: var(--vm-paper); text-align: start; font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vm-ink-3); padding-block: 16px 8px; padding-inline: 14px; border-bottom: 1px solid var(--vm-line); border-top: 1px solid var(--vm-line); } .lp-compare tbody tr:not(.lp-compare__cat):hover { background: var(--vm-paper-sunken); } .lp-compare__row-th { text-align: start; font-weight: 500; color: var(--vm-ink); padding-block: 12px; padding-inline: 14px; border-bottom: 1px solid var(--vm-line-faint); white-space: normal; vertical-align: middle; } .lp-compare__cell { padding-block: 12px; padding-inline: 14px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--vm-line-faint); white-space: nowrap; } .lp-compare__cell--yes { color: var(--vm-green, #4a7c59); } .lp-compare__cell--yes svg { vertical-align: middle; } .lp-compare__cell--no { color: var(--vm-ink-4); } .lp-compare__cell--na { color: var(--vm-ink-3); font-style: italic; } .lp-compare__cell--blank { color: var(--vm-ink-4); } .lp-compare__cell--value { color: var(--vm-ink); font-variant-numeric: tabular-nums; } .lp-compare__muted { color: var(--vm-ink-3); } [data-theme="dark"] .lp-compare-scroll { background: var(--vm-paper-raised); } /* Mobile: shrink padding so the 720px min-width is reachable, and make the "swipe to compare" affordance obvious with a soft fade on the right edge. */ @media (max-width: 720px) { .lp-compare-heading { font-size: 20px; } .lp-compare thead th, .lp-compare__row-th, .lp-compare__cell { padding: 10px; font-size: 13px; } .lp-compare__row-th { min-width: 180px; } .lp-compare-scroll { position: relative; -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent); mask-image: linear-gradient(to right, black calc(100% - 24px), transparent); } } .lp-price { background: var(--vm-paper-raised); border: 1px solid var(--vm-line); border-radius: 16px; padding: 28px 24px; display: flex; flex-direction: column; } .lp-price--featured { background: var(--vm-paper); border: 1px solid var(--vm-navy); box-shadow: 0 0 0 4px var(--vm-navy-soft), var(--vm-shadow-2); position: relative; } .lp-price--featured::before { content: attr(data-popular); position: absolute; top: -10px; left: 24px; padding: 3px 10px; background: var(--vm-navy); color: var(--vm-navy-ink); border-radius: 999px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .lp-price__name { font-family: var(--vm-sans); font-weight: 600; font-size: 18px; letter-spacing: -0.025em; margin: 0; } .lp-price__desc { font-size: 12px; color: var(--vm-ink-3); margin: 4px 0 24px; line-height: 1.5; min-height: 36px; } .lp-price__amt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin-bottom: 4px; } /* The billing toggle hides the inactive price by setting the [hidden] attribute (see pricing.html JS). Without this rule the display:flex above overrides the UA's `[hidden] { display:none }`, so BOTH the monthly and yearly prices render at once. Higher-specificity [hidden] match restores the hide. */ .lp-price__amt[hidden] { display: none; } .lp-price__amt .num { font-family: var(--vm-sans); font-weight: 600; font-size: 44px; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; } /* nowrap keeps the unit label as one clean run ("/ user / yr") instead of fragmenting into "/", "user", "/ yr" when flex shrinks it to make room for the save badge on the yearly view. */ .lp-price__amt .per { font-size: 12px; color: var(--vm-ink-3); line-height: 1.3; white-space: nowrap; } .lp-price__included { font-size: 11px; font-family: var(--vm-mono); color: var(--vm-gold-deep); margin-bottom: 24px; text-transform: uppercase; letter-spacing: 0.04em; } .lp-price ul { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; } .lp-price li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--vm-ink-2); } .lp-price li svg { color: var(--vm-navy); flex-shrink: 0; margin-top: 3px; } .lp-price__cta { margin-top: auto; width: 100%; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; background: var(--vm-paper); color: var(--vm-ink); border: 1px solid var(--vm-line-strong); font-size: 14px; font-weight: 500; text-decoration: none; transition: background 120ms var(--vm-ease); } .lp-price__cta:hover { background: var(--vm-paper-sunken); } .lp-price--featured .lp-price__cta { background: var(--vm-navy); color: var(--vm-navy-ink); border-color: var(--vm-navy); } .lp-price--featured .lp-price__cta:hover { background: var(--vm-navy-hover); border-color: var(--vm-navy-hover); } .lp-price__save { font-size: 11px; font-weight: 600; background: var(--vm-gold-soft, rgba(212, 175, 55, 0.12)); color: var(--vm-gold-deep); padding: 2px 8px; border-radius: 999px; letter-spacing: 0.02em; white-space: nowrap; /* Center against the 44px number when inline; when the row wraps it drops to its own line as a normal-width pill (no margin-left so it sits flush at the line start). */ align-self: center; } /* Billing-cycle toggle on /pricing */ .lp-billing-toggle { display: inline-flex; margin: 28px auto 0; padding: 4px; background: var(--vm-paper-raised); border: 1px solid var(--vm-line); border-radius: 999px; gap: 2px; } .lp-price-grid + .lp-billing-toggle, .lp-section .lp-billing-toggle { display: flex; width: max-content; margin-left: auto; margin-right: auto; } .lp-billing-toggle__opt { appearance: none; background: transparent; border: 0; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--vm-ink-2); padding: 7px 18px; border-radius: 999px; cursor: pointer; transition: background 120ms var(--vm-ease), color 120ms var(--vm-ease); } .lp-billing-toggle__opt:hover { color: var(--vm-ink); } .lp-billing-toggle__opt.is-active { background: var(--vm-navy); color: var(--vm-navy-ink); } /* Final CTA */ .lp-cta { background: #1a1815; color: #f7f6f2; border-radius: 24px; padding: 88px 64px; text-align: center; position: relative; overflow: hidden; } .lp-cta::before { content: ""; position: absolute; top: -100px; left: -100px; width: 400px; height: 400px; background: radial-gradient(circle, var(--vm-gold-soft) 0%, transparent 70%); opacity: 0.1; } .lp-cta::after { content: ""; position: absolute; bottom: -100px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, var(--vm-navy-hover) 0%, transparent 70%); opacity: 0.3; } .lp-cta h2 { font-family: var(--vm-sans); font-weight: 600; font-size: clamp(36px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 16px; color: #f7f6f2; text-wrap: balance; position: relative; z-index: 2; } .lp-cta h2 em { font-style: normal; color: var(--vm-gold); } .lp-cta p { font-size: 17px; color: rgba(247, 246, 242, 0.82); margin: 0 0 32px; position: relative; z-index: 2; } .lp-cta__ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 2; } .lp-cta .lp-btn--primary { background: #f7f6f2; color: #1a1815; } .lp-cta .lp-btn--primary:hover { background: #fdfcf9; } .lp-cta .lp-btn--ghost { color: #f7f6f2; border-color: rgba(247,246,242,0.28); } .lp-cta .lp-btn--ghost:hover { background: rgba(247,246,242,0.10); border-color: rgba(247,246,242,0.48); } /* Footer */ .lp-footer { padding: 64px 0 32px; } .lp-footer__inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; } .lp-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--vm-line); } @media (max-width: 760px) { .lp-footer__grid { grid-template-columns: 1fr 1fr; } } .lp-footer__about p { font-size: 13px; line-height: 1.55; color: var(--vm-ink-3); margin: 16px 0 16px; max-width: 28ch; } .lp-footer__about .lp-brand { margin-bottom: 0; } .lp-footer__col h4 { font-family: var(--vm-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--vm-ink-3); margin: 0 0 16px; font-weight: 500; } .lp-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .lp-footer__col a { font-size: 13px; color: var(--vm-ink-2); text-decoration: none; transition: color 120ms var(--vm-ease); } .lp-footer__col a:hover { color: var(--vm-ink); } .lp-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-family: var(--vm-mono); font-size: 11px; color: var(--vm-ink-3); text-transform: uppercase; letter-spacing: 0.08em; flex-wrap: wrap; gap: 12px; } .lp-footer__status { display: inline-flex; align-items: center; gap: 6px; } .lp-footer__status .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--vm-green); box-shadow: 0 0 0 2px var(--vm-green-soft); } /* ============================================================ Secondary-page styles (pricing.html, about.html, 404.html) Lighter chrome reusing the design language without the hero-grade decoration. ============================================================ */ .lp-page-header { padding: 88px 0 32px; text-align: center; max-width: 720px; margin: 0 auto; } .lp-page-header h1 { font-family: var(--vm-sans); font-weight: 600; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.03em; margin: 16px 0 16px; } .lp-prose { max-width: 640px; margin: 0 auto; line-height: 1.65; font-size: 16px; color: var(--vm-ink-2); } .lp-prose p { margin: 0 0 16px; } .lp-prose h2 { font-family: var(--vm-sans); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; color: var(--vm-ink); margin: 40px 0 12px; } /* ============================================================ Animations — calm by design ============================================================ */ @keyframes lpFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes lpMockIn { from { opacity: 0; transform: perspective(2000px) rotateY(-12deg) rotateX(6deg) translateY(40px); } to { opacity: 1; transform: perspective(2000px) rotateY(-6deg) rotateX(3deg) translateY(0); } } @keyframes lpFloatA { from { opacity: 0; transform: rotate(-2deg) translateY(24px); } to { opacity: 1; transform: rotate(-2deg) translateY(0); } } @keyframes lpFloatB { from { opacity: 0; transform: rotate(1.5deg) translateY(24px); } to { opacity: 1; transform: rotate(1.5deg) translateY(0); } } @keyframes lpBobA { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-6px); } } @keyframes lpBobB { 0%, 100% { transform: rotate(1.5deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-9px); } } @keyframes lpGlow { 0%, 100% { opacity: 0.10; transform: scale(1); } 50% { opacity: 0.18; transform: scale(1.08); } } @keyframes lpUnderlineDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes lpShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @media (prefers-reduced-motion: no-preference) { /* Hero entrance stagger */ .lp-hero .lp-eyebrow { opacity: 0; animation: lpFadeUp 0.7s var(--vm-ease-out) 0.10s forwards; } .lp-hero h1 { opacity: 0; animation: lpFadeUp 0.9s var(--vm-ease-out) 0.20s forwards; } .lp-hero__sub { opacity: 0; animation: lpFadeUp 0.9s var(--vm-ease-out) 0.40s forwards; } .lp-hero__ctas { opacity: 0; animation: lpFadeUp 0.9s var(--vm-ease-out) 0.55s forwards; } .lp-hero__small { opacity: 0; animation: lpFadeUp 0.9s var(--vm-ease-out) 0.70s forwards; } .lp-mock { opacity: 0; animation: lpMockIn 1.1s var(--vm-ease-out) 0.50s forwards; } .lp-mock:hover { animation: none; } .lp-float--verified { opacity: 0; animation: lpFloatA 0.8s var(--vm-ease-out) 1.10s forwards, lpBobA 7s ease-in-out 2.0s infinite; } .lp-float--ai { opacity: 0; animation: lpFloatB 0.8s var(--vm-ease-out) 1.30s forwards, lpBobB 8s ease-in-out 2.2s infinite; } .lp-hero h1 em::after { transform-origin: left center; animation: lpUnderlineDraw 0.7s var(--vm-ease-out) 0.85s both; } /* Generic on-scroll reveals (toggled by IO in site.js) */ .lp-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--vm-ease-out), transform 0.7s var(--vm-ease-out); } .lp-reveal.in { opacity: 1; transform: translateY(0); } .lp-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--vm-ease-out), transform 0.6s var(--vm-ease-out); } .lp-stagger.in > * { opacity: 1; transform: translateY(0); } .lp-stagger.in > *:nth-child(1) { transition-delay: 0ms; } .lp-stagger.in > *:nth-child(2) { transition-delay: 70ms; } .lp-stagger.in > *:nth-child(3) { transition-delay: 140ms; } .lp-stagger.in > *:nth-child(4) { transition-delay: 210ms; } .lp-stagger.in > *:nth-child(5) { transition-delay: 280ms; } .lp-stagger.in > *:nth-child(6) { transition-delay: 350ms; } /* DNS rows reveal in sequence */ .lp-dns__row { opacity: 0; transform: translateX(-12px); transition: opacity 0.5s var(--vm-ease-out), transform 0.5s var(--vm-ease-out); } .lp-domain-card.in .lp-dns__row { opacity: 1; transform: translateX(0); } .lp-domain-card.in .lp-dns__row:nth-child(1) { transition-delay: 150ms; } .lp-domain-card.in .lp-dns__row:nth-child(2) { transition-delay: 320ms; } .lp-domain-card.in .lp-dns__row:nth-child(3) { transition-delay: 490ms; } .lp-dns__row .ok { opacity: 0; transition: opacity 0.4s var(--vm-ease-out); } .lp-domain-card.in .lp-dns__row:nth-child(1) .ok { transition-delay: 500ms; opacity: 1; } .lp-domain-card.in .lp-dns__row:nth-child(2) .ok { transition-delay: 670ms; opacity: 1; } .lp-domain-card.in .lp-dns__row:nth-child(3) .ok { transition-delay: 840ms; opacity: 1; } .lp-domain-card.in::before { transform-origin: left; animation: lpUnderlineDraw 0.9s var(--vm-ease-out) 0.15s both; } .lp-ai-card.in .lp-ai-inner:nth-of-type(1) { animation: lpFadeUp 0.6s var(--vm-ease-out) 0.20s both; } .lp-ai-card.in .lp-ai-inner:nth-of-type(2) { animation: lpFadeUp 0.6s var(--vm-ease-out) 0.40s both; } .lp-ai-card.in .lp-ai-chips { animation: lpFadeUp 0.6s var(--vm-ease-out) 0.60s both; } .lp-price { transition: transform 0.25s var(--vm-ease-out), box-shadow 0.25s var(--vm-ease-out), border-color 0.25s var(--vm-ease-out); } .lp-price:hover { transform: translateY(-4px); box-shadow: var(--vm-shadow-2); border-color: var(--vm-line-strong); } .lp-price--featured:hover { box-shadow: 0 0 0 4px var(--vm-navy-soft), var(--vm-shadow-3); } .lp-cta::before { animation: lpGlow 9s ease-in-out infinite; } .lp-cta::after { animation: lpGlow 11s ease-in-out infinite reverse; } .lp-trust.in .lp-trust__logo { background: linear-gradient(90deg, currentColor 0%, currentColor 40%, var(--vm-ink) 50%, currentColor 60%, currentColor 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: lpShimmer 4s ease-in-out infinite; } .lp-trust.in .lp-trust__logo:nth-child(2) { animation-delay: 0.3s; } .lp-trust.in .lp-trust__logo:nth-child(3) { animation-delay: 0.6s; } .lp-trust.in .lp-trust__logo:nth-child(4) { animation-delay: 0.9s; } .lp-trust.in .lp-trust__logo:nth-child(5) { animation-delay: 1.2s; } .lp-trust.in .lp-trust__logo:nth-child(6) { animation-delay: 1.5s; } } /* ============================================================ Signup flow — verusuite.com/signup ============================================================ */ .signup, .signup-done { max-width: 640px; margin: 48px auto; padding: 0 24px; } .signup__panel, .signup-done__panel { background: var(--vm-paper-raised, #fdfcf9); border: 1px solid var(--vm-line, rgba(42, 42, 40, 0.08)); border-radius: 14px; box-shadow: 0 1px 2px rgba(28, 28, 26, 0.04), 0 4px 12px rgba(28, 28, 26, 0.06); padding: 36px 32px; } .signup__head { margin-bottom: 24px; } .signup__head h1 { margin: 0 0 8px; font-size: 28px; font-weight: 600; letter-spacing: -0.025em; color: var(--vm-ink, #2a2a28); } .signup__lede { margin: 0; color: var(--vm-ink-2, #4a4a45); font-size: 14px; line-height: 1.55; } .signup__steps { list-style: none; display: flex; gap: 8px; margin: 0 0 28px; border-top: 1px solid var(--vm-line, rgba(42, 42, 40, 0.08)); border-bottom: 1px solid var(--vm-line, rgba(42, 42, 40, 0.08)); padding: 12px 0; } .signup__steps li { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--vm-ink-3, #82807a); font-family: 'Inter', system-ui, sans-serif; letter-spacing: 0.02em; text-transform: uppercase; } .signup__steps li span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--vm-paper-sunken, #efece5); color: var(--vm-ink-3, #82807a); font-family: ui-monospace, monospace; font-size: 11px; font-weight: 600; } .signup__steps li.is-current { color: var(--vm-ink, #2a2a28); font-weight: 500; } .signup__steps li.is-current span { background: var(--vm-navy, #1a3a5c); color: #fff; } .signup__steps li.is-done span { background: var(--vm-green, #4a7c59); color: #fff; } .signup__form fieldset { border: none; padding: 0; margin: 0; } .signup__form label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; font-size: 13px; color: var(--vm-ink-2, #4a4a45); } .signup__form label > span { font-weight: 500; color: var(--vm-ink, #2a2a28); font-size: 13px; } .signup__form label > span em { color: var(--vm-ink-3, #82807a); font-style: normal; font-weight: 400; } .signup__form input[type="text"], .signup__form input[type="email"], .signup__form input[type="password"], .signup__form input[type="tel"] { width: 100%; height: 40px; padding: 0 12px; font-family: inherit; font-size: 14px; color: var(--vm-ink, #2a2a28); background: var(--vm-paper, #f7f6f2); border: 1px solid var(--vm-line-strong, rgba(42, 42, 40, 0.16)); border-radius: 6px; outline: none; transition: border-color 120ms, box-shadow 120ms; } .signup__form input:focus { border-color: var(--vm-navy, #1a3a5c); box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.12); } .signup__form input:invalid:not(:placeholder-shown) { border-color: var(--vm-red, #a8453a); } /* Password field with a "show / hide" toggle. The wrapper is the visual border; the inner input drops its own border so the eye icon and the field read as a single control. */ .signup__password { position: relative; } .signup__password input { padding-right: 42px; /* leave room for the icon button */ } .signup__password-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 6px; color: var(--vm-ink-3, #82807a); cursor: pointer; transition: color 120ms, background 120ms; } .signup__password-toggle:hover { color: var(--vm-ink, #2a2a28); background: var(--vm-paper-sunken, #efece5); } .signup__password-toggle:focus-visible { outline: 2px solid var(--vm-navy, #1a3a5c); outline-offset: 1px; } /* Cross-out (hide) icon hidden until the field is in plain-text mode, at which point we swap visibility so the icon reflects the action the next click will perform. */ .signup__password-toggle .icon-hide { display: none; } .signup__password-toggle[aria-pressed="true"] .icon-show { display: none; } .signup__password-toggle[aria-pressed="true"] .icon-hide { display: block; } .signup__form small { font-size: 12px; color: var(--vm-ink-3, #82807a); line-height: 1.45; } .signup__row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .signup__row--two > label { margin-bottom: 0; } .signup__email-row { display: flex; align-items: stretch; } .signup__email-row input { flex: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; } .signup__email-at { display: inline-flex; align-items: center; padding: 0 12px; background: var(--vm-paper-sunken, #efece5); border: 1px solid var(--vm-line-strong, rgba(42, 42, 40, 0.16)); border-top-right-radius: 6px; border-bottom-right-radius: 6px; font-family: ui-monospace, monospace; font-size: 13px; color: var(--vm-ink-2, #4a4a45); } .signup__tos { flex-direction: row !important; align-items: flex-start; gap: 10px; margin: 20px 0 0; padding: 12px 14px; background: var(--vm-paper-sunken, #efece5); border-radius: 6px; font-size: 13px; color: var(--vm-ink-2, #4a4a45); } .signup__tos input { margin-top: 3px; } .signup__tos a { color: var(--vm-navy, #1a3a5c); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .signup__tos a:hover { color: var(--vm-navy-hover, #234970); } [data-theme="dark"] .signup__tos a { color: #7ea7d1; } [data-theme="dark"] .signup__tos a:hover { color: #a0c2e3; } .signup__actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--vm-line-faint, rgba(42, 42, 40, 0.04)); } .signup__spacer { flex: 1; } /* Submit button busy state — shows an inline spinner while the server processes the POST, so the user has a visible cue that the click landed. Default state: spinner hidden, label visible. Busy state: spinner spins, label swapped to "Creating workspace…" by JS. */ .signup__submit { display: inline-flex; align-items: center; gap: 8px; } .signup__spinner { display: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: signup-spin 0.7s linear infinite; opacity: 0.85; } .signup__submit.is-busy .signup__spinner { display: inline-block; } .signup__submit.is-busy { cursor: progress; opacity: 0.85; } @keyframes signup-spin { to { transform: rotate(360deg); } } .signup__error { margin-bottom: 20px; padding: 12px 14px; background: var(--vm-red-soft, #f3dcd6); color: var(--vm-red, #a8453a); border-radius: 6px; font-size: 13px; line-height: 1.5; } .signup__alt { margin: 20px 0 0; text-align: center; color: var(--vm-ink-3, #82807a); font-size: 13px; } .signup__alt a { color: var(--vm-navy, #1a3a5c); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .signup__alt a:hover { color: var(--vm-navy-hover, #234970); } [data-theme="dark"] .signup__alt a { color: #7ea7d1; } [data-theme="dark"] .signup__alt a:hover { color: #a0c2e3; } /* Visually hidden but accessible to screen readers. */ .vm-srh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Generic buttons used by the signup + success pages. */ .signup .btn, .signup-done .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 6px; border: 1px solid var(--vm-line-strong, rgba(42, 42, 40, 0.16)); background: var(--vm-paper, #f7f6f2); color: var(--vm-ink, #2a2a28); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background 120ms, border-color 120ms; } .signup .btn:hover, .signup-done .btn:hover { background: var(--vm-paper-sunken, #efece5); } .signup .btn-primary, .signup-done .btn-primary { background: var(--vm-navy, #1a3a5c); color: #fff; border-color: var(--vm-navy, #1a3a5c); } .signup .btn-primary:hover, .signup-done .btn-primary:hover { background: #234970; border-color: #234970; } /* ---------- Signup success page ---------- */ .signup-done__check { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 999px; background: var(--vm-green-soft, #e6efe7); color: var(--vm-green, #4a7c59); font-size: 28px; font-weight: 600; } .signup-done__panel h1 { margin: 0 0 8px; text-align: center; font-size: 26px; letter-spacing: -0.025em; } .signup-done__lede { margin: 0 0 24px; text-align: center; color: var(--vm-ink-2, #4a4a45); font-size: 14px; line-height: 1.55; } .signup-done__lede strong { color: var(--vm-ink, #2a2a28); } .signup-done__otp-card { text-align: center; margin: 0 0 28px; padding: 20px; background: var(--vm-gold-soft, #f3ead6); border: 1px solid var(--vm-gold, #c9a96e); border-radius: 10px; } .signup-done__otp-label { font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vm-gold-deep, #a98a4f); } .signup-done__otp-target { font-family: ui-monospace, monospace; font-size: 17px; font-weight: 600; color: var(--vm-ink, #2a2a28); margin-top: 4px; } .signup-done__otp-hint { margin: 12px 0 0; font-size: 12px; color: var(--vm-ink-2, #4a4a45); line-height: 1.5; } .signup-done__next { margin: 28px 0; padding: 20px; background: var(--vm-paper, #f7f6f2); border: 1px solid var(--vm-line, rgba(42, 42, 40, 0.08)); border-radius: 10px; } .signup-done__next h2 { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--vm-ink, #2a2a28); text-transform: uppercase; letter-spacing: 0.06em; } .signup-done__next ol { margin: 0; padding-left: 20px; font-size: 13px; color: var(--vm-ink-2, #4a4a45); line-height: 1.6; } .signup-done__next ol li { margin-bottom: 6px; } .signup-done__next code { background: var(--vm-paper-sunken, #efece5); padding: 1px 6px; border-radius: 4px; font-size: 12px; } .signup-done__actions { margin-top: 28px; text-align: center; } .signup-done__support { margin-top: 20px; text-align: center; font-size: 12px; color: var(--vm-ink-3, #82807a); } .signup-done__support code { background: var(--vm-paper-sunken, #efece5); padding: 1px 5px; border-radius: 3px; font-size: 11px; } @media (max-width: 540px) { .signup, .signup-done { margin: 24px auto; } .signup__panel, .signup-done__panel { padding: 24px 18px; } .signup__row--two { grid-template-columns: 1fr; } } /* ============================================================ Signup OTP entry — verusuite.com/signup/verify ============================================================ */ .signup-verify { max-width: 480px; margin: 64px auto; padding: 0 24px; } .signup-verify__panel { background: var(--vm-paper-raised, #fdfcf9); border: 1px solid var(--vm-line, rgba(42, 42, 40, 0.08)); border-radius: 14px; box-shadow: 0 1px 2px rgba(28, 28, 26, 0.04), 0 4px 12px rgba(28, 28, 26, 0.06); padding: 40px 36px; text-align: center; } .signup-verify__icon { font-size: 40px; line-height: 1; margin-bottom: 12px; } .signup-verify__panel h1 { margin: 0 0 12px; font-size: 26px; font-weight: 600; letter-spacing: -0.025em; color: var(--vm-ink, #2a2a28); } .signup-verify__lede { margin: 0 0 28px; color: var(--vm-ink-2, #4a4a45); font-size: 14px; line-height: 1.6; } .signup-verify__lede strong { color: var(--vm-ink, #2a2a28); font-weight: 600; } .signup-verify__form { display: flex; flex-direction: column; gap: 12px; align-items: stretch; margin-bottom: 16px; } .signup-verify__label { text-align: left; font-size: 12px; font-weight: 500; color: var(--vm-ink-2, #4a4a45); font-family: ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.08em; } .signup-verify__form input[type="text"] { width: 100%; height: 56px; padding: 0 16px; font-family: ui-monospace, monospace; font-size: 24px; font-weight: 600; letter-spacing: 0.4em; text-align: center; color: var(--vm-ink, #2a2a28); background: var(--vm-paper, #f7f6f2); border: 2px solid var(--vm-line-strong, rgba(42, 42, 40, 0.16)); border-radius: 8px; outline: none; transition: border-color 120ms, box-shadow 120ms; } .signup-verify__form input[type="text"]:focus { border-color: var(--vm-navy, #1a3a5c); box-shadow: 0 0 0 4px rgba(26, 58, 92, 0.12); } .signup-verify__form input[type="text"]::placeholder { color: var(--vm-ink-4, #b3b0a6); font-weight: 400; letter-spacing: 0.2em; } .signup-verify__status { min-height: 18px; text-align: left; font-size: 13px; line-height: 1.4; } .signup-verify__status[data-kind="error"] { color: var(--vm-red, #a8453a); } .signup-verify__status[data-kind="success"] { color: var(--vm-green, #4a7c59); } .signup-verify .btn-primary { height: 44px; font-size: 14px; font-weight: 600; } .signup-verify__hint { margin: 0 0 12px; color: var(--vm-ink-3, #82807a); font-size: 12px; line-height: 1.6; } .signup-verify__link { background: none; border: none; padding: 0; color: var(--vm-navy, #1a3a5c); font: inherit; text-decoration: underline; cursor: pointer; } .signup-verify__link:hover { color: #234970; } .signup-verify__support { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--vm-line-faint, rgba(42, 42, 40, 0.04)); font-size: 11px; color: var(--vm-ink-3, #82807a); line-height: 1.6; } .signup-verify__support a { color: var(--vm-navy, #1a3a5c); } .signup-verify__support code { background: var(--vm-paper-sunken, #efece5); padding: 1px 5px; border-radius: 3px; font-size: 10px; } @media (max-width: 540px) { .signup-verify { margin: 32px auto; } .signup-verify__panel { padding: 28px 22px; } .signup-verify__form input[type="text"] { font-size: 22px; letter-spacing: 0.3em; } } /* ============================================================ Playground — verusuite.com/playground Hand-driven form that POSTs to verumail's email-send endpoint. Style is closer to a dev tool than a marketing page: dense, monospace status display, side-by-side form + response panel. ============================================================ */ .playground { max-width: 1180px; margin: 40px auto; padding: 0 24px; } .playground__head { margin-bottom: 28px; } .playground__head h1 { margin: 0 0 8px; font-size: 26px; font-weight: 600; letter-spacing: -0.025em; color: var(--vm-ink, #2a2a28); } .playground__lede { margin: 0; color: var(--vm-ink-2, #4a4a45); font-size: 14px; line-height: 1.55; } .playground__lede code { background: var(--vm-paper-sunken, #efece5); padding: 1px 6px; border-radius: 4px; font-size: 12px; } .playground__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; } .playground__form { background: var(--vm-paper-raised, #fdfcf9); border: 1px solid var(--vm-line, rgba(42, 42, 40, 0.08)); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 16px; } .playground__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .playground__field { display: flex; flex-direction: column; gap: 6px; } .playground__field label { font-family: ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vm-ink-2, #4a4a45); } .playground__field label em { color: var(--vm-ink-3, #82807a); font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; } .playground__field input, .playground__field textarea { width: 100%; padding: 8px 12px; font-family: ui-monospace, monospace; font-size: 13px; color: var(--vm-ink, #2a2a28); background: var(--vm-paper, #f7f6f2); border: 1px solid var(--vm-line-strong, rgba(42, 42, 40, 0.16)); border-radius: 6px; outline: none; transition: border-color 120ms, box-shadow 120ms; } .playground__field textarea { resize: vertical; min-height: 120px; line-height: 1.5; } .playground__field input:focus, .playground__field textarea:focus { border-color: var(--vm-navy, #1a3a5c); box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.12); } .playground__field small { font-size: 12px; color: var(--vm-ink-3, #82807a); line-height: 1.45; } .playground__field small code { background: var(--vm-paper-sunken, #efece5); padding: 1px 5px; border-radius: 3px; } .playground__actions { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--vm-line-faint, rgba(42, 42, 40, 0.04)); } .playground .btn, .playground .btn-primary { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border-radius: 6px; font-family: inherit; font-size: 13px; font-weight: 500; border: 1px solid var(--vm-line-strong, rgba(42, 42, 40, 0.16)); background: var(--vm-paper, #f7f6f2); color: var(--vm-ink, #2a2a28); cursor: pointer; transition: background 120ms, border-color 120ms; } .playground .btn:hover { background: var(--vm-paper-sunken, #efece5); } .playground .btn-primary { background: var(--vm-navy, #1a3a5c); color: #fff; border-color: var(--vm-navy, #1a3a5c); } .playground .btn-primary:hover { background: #234970; border-color: #234970; } .playground .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } /* Result panel — monospace JSON dump + small status pill. */ .playground__result { background: var(--vm-paper-raised, #fdfcf9); border: 1px solid var(--vm-line, rgba(42, 42, 40, 0.08)); border-radius: 10px; padding: 24px; position: sticky; top: 24px; } .playground__result-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .playground__result-label { font-family: ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vm-ink-2, #4a4a45); } .playground__status { font-family: ui-monospace, monospace; font-size: 11px; padding: 3px 8px; border-radius: 999px; color: var(--vm-ink-3, #82807a); } .playground__status[data-kind="success"] { background: var(--vm-green-soft, #e6efe7); color: var(--vm-green, #4a7c59); } .playground__status[data-kind="error"] { background: var(--vm-red-soft, #f3dcd6); color: var(--vm-red, #a8453a); } .playground__output { margin: 0; padding: 14px; background: var(--vm-paper, #f7f6f2); border: 1px solid var(--vm-line, rgba(42, 42, 40, 0.08)); border-radius: 6px; font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.55; color: var(--vm-ink, #2a2a28); white-space: pre-wrap; word-break: break-all; max-height: 60vh; overflow-y: auto; } @media (max-width: 880px) { .playground__grid { grid-template-columns: 1fr; } .playground__result { position: static; } .playground__row { grid-template-columns: 1fr; } } /* ==================================================================== RTL overrides -------------------------------------------------------------------- Loaded for every page; only matches when (Arabic today; any future RTL locale lands the same way). The browser does most of the work for free once `direction: rtl` is set — flex order reverses, text reads right-to-left, default text-align flips. What needs explicit attention: - text-align: left declarations in form / table cells. - margin-left: auto pushes elements to the LEFT regardless of direction; for an RTL layout we want them to the RIGHT, so swap to margin-right: auto. - SVG arrow icons that point "→" (forward, CTA) need to be flipped so they point "←" in RTL — done with a transform: scaleX(-1) on the icons inside CTAs. - The hero "stack mark" SVG is symmetric, no flip needed. ==================================================================== */ [dir="rtl"] { /* Generic text alignment flip for any explicit left/right alignment */ text-align: right; } [dir="rtl"] .lp-nav__links { margin-right: 24px; margin-left: 0; } [dir="rtl"] .lp-nav__cta { margin-right: auto; margin-left: 0; } [dir="rtl"] .lp-domain-card__verify { margin-right: auto; margin-left: 0; } [dir="rtl"] .lp-mini__folder .count, [dir="rtl"] .lp-mini__from .when, [dir="rtl"] .lp-ai-card__head .label { margin-right: auto; margin-left: 0; } [dir="rtl"] .lp-trust__logo small { margin-right: 2px; margin-left: 0; } [dir="rtl"] .lp-mini__count small { margin-right: 6px; margin-left: 0; } /* Arrow CTAs: the SVG arrow inside primary "Start free →" buttons needs to visually point start→end in RTL too. The button itself already reorders content because of direction: rtl, but the SVG path is hard-coded LTR — flip it horizontally. */ [dir="rtl"] .lp-btn svg, [dir="rtl"] .lp-price__cta svg, [dir="rtl"] .lp-cta__ctas .lp-btn svg { transform: scaleX(-1); } /* Forms / tables that explicitly set text-align: left land on the right edge instead, matching native RTL forms. */ [dir="rtl"] th, [dir="rtl"] td, [dir="rtl"] .playground__field label, [dir="rtl"] .playground__result pre { text-align: right; } /* The hero subtitle small marks are joined by "·" separators with inline-flex gaps — those keep working as-is. */ /* The mini-mail mock preview is a layout artifact, not real content; leave it LTR for visual stability rather than mirror it. The decorative floating cards beside it (verified / AI summary) sit in the same visual cluster and are locked LTR too. */ [dir="rtl"] .lp-mock { direction: ltr; text-align: left; } [dir="rtl"] .lp-float { direction: ltr; text-align: left; } /* The lp-float--verified card hugs the mock's left edge in LTR (left: -32px); in RTL its mirror should hug the right edge. */ [dir="rtl"] .lp-float--verified { left: auto; right: -32px; } /* The AI card sits at the right edge in LTR (right: -28px); flip to the left in RTL. */ [dir="rtl"] .lp-float--ai { right: auto; left: -28px; } /* CSS Grid honours direction: rtl for column placement, so .lp-feature (text col1, visual col2) and .lp-feature--reverse (visual col1 via order:-1, text col2) both mirror as expected without an explicit RTL override. The .lp-feature__text max-width: 480px and intrinsic text alignment cascade from the body-level RTL rule above; the feature lists' check icons stay on the start edge because the list items use flex gap, which is direction-aware. */ /* The lp-feature__num eyebrow ("01 / Identity") contains a slash — the slash is bidi-neutral and lands in the wrong place inside RTL text. Force the whole label to render LTR so "01 / Identity" stays in its original order even when the word is translated. */ [dir="rtl"] .lp-feature__num { direction: ltr; text-align: right; display: inline-block; } /* Pricing cards in the public /pricing page mix a symbol-led amount ("$91.80", LTR) with an Arabic unit label ("/ مستخدم / شهرياً", RTL) on one line. Forcing the whole block LTR fixes the number but mangles the Arabic label (dangling slash, wrong order); leaving it RTL fixes the label but renders the amount as "9$". So: keep the block RTL (label flows correctly, packs flush-right under the right-aligned title) and isolate ONLY the amount as its own LTR run so the "$" and digits read correctly. */ [dir="rtl"] .lp-price__amt .num { direction: ltr; unicode-bidi: isolate; } /* Featured-card "Most popular" badge: mirror it to the right corner in RTL so it sits over the start edge like the rest of the card. */ [dir="rtl"] .lp-price--featured::before { left: auto; right: 24px; }