/* =========================================================================== DVS Technology — Shared design system Clean / airy / fresh green ("עולם ירוק"). Logical properties throughout for RTL+LTR. =========================================================================== */ :root { /* ---- Color: ink & neutrals ---- */ --ink-900: #0d1b2e; /* deepest heading navy */ --ink-700: #1f3147; /* strong heading */ --ink-500: #45586f; /* body */ --ink-400: #6b7d93; /* muted body */ --ink-300: #93a2b5; /* captions */ /* ---- Color: surfaces ---- */ --white: #ffffff; --surface: #f5fbf8; /* page background, very soft green-white */ --surface-2: #eef8f2; /* alt section */ --card: #ffffff; /* ---- Color: brand green ("עולם ירוק") ---- */ --blue-700: #0a7d57; /* dark / ink */ --blue-600: #0e9f6e; /* primary action */ --blue-500: #34d399; /* light */ --blue-300: #6ee7b7; --blue-100: #d1fae5; /* soft fills */ --blue-50: #ecfdf5; /* lightest tint */ --sky: #e0f7ee; /* ---- Accent: trust / compliance deep green ---- */ --green-600: #138a5c; --green-100: #d9f3e6; --amber-600: #b87514; --amber-100: #fdeecb; /* ---- Lines ---- */ --line: #e3ebf6; --line-strong: #d2dded; /* ---- Radius ---- */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* ---- Shadow (soft, low) ---- */ --shadow-sm: 0 1px 2px rgba(16,42,80,.05), 0 1px 3px rgba(16,42,80,.04); --shadow-md: 0 6px 20px rgba(20,55,110,.07), 0 2px 6px rgba(20,55,110,.05); --shadow-lg: 0 20px 50px rgba(20,55,110,.12), 0 6px 16px rgba(20,55,110,.06); --shadow-blue: 0 14px 30px rgba(14,159,110,.28); /* ---- Type ---- */ --font-head: "Fredoka", "Varela Round", "Assistant", system-ui, sans-serif; --font-body: "Assistant", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; /* ---- Layout ---- */ --maxw: 1180px; --nav-h: 72px; } /* ---------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--white); color: var(--ink-500); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } ul { list-style: none; } /* LTR languages flip dir on ; helper to keep numbers/code LTR inside RTL */ [dir="rtl"] .ltr-num, .force-ltr { direction: ltr; unicode-bidi: isolate; } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink-900); line-height: 1.2; font-weight: 600; letter-spacing: 0; } /* ---------------------------------------------------------------- layout */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 28px; } .section { padding-block: 96px; } .section--tight { padding-block: 64px; } .bg-soft { background: var(--surface); } .bg-soft2 { background: var(--surface-2); } .bg-ink { background: var(--ink-900); color: #c8d6ea; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 500; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-600); margin-block-end: 18px; } /* A dash on BOTH sides of the label (owner request 2026-07-19). */ .eyebrow::before, .eyebrow::after { content: ""; width: 22px; height: 2px; background: var(--blue-500); border-radius: 2px; } .section-head { max-width: 660px; margin-block-end: 52px; } .section-head.center { margin-inline: auto; text-align: center; } .section-head.center .eyebrow { } h2.display { font-size: clamp(30px, 4vw, 44px); } .lead { font-size: 19px; color: var(--ink-400); margin-block-start: 16px; text-wrap: pretty; } /* ---------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-head); font-weight: 500; font-size: 16px; padding: 13px 26px; border-radius: var(--r-pill); transition: transform .18s ease, box-shadow .2s ease, background .2s ease, color .2s ease; white-space: nowrap; } .btn svg { width: 18px; height: 18px; } .btn--primary { background: var(--blue-600); color: #fff; box-shadow: var(--shadow-blue); } .btn--primary:hover { background: var(--blue-700); transform: translateY(-2px); } .btn--ghost { background: var(--white); color: var(--ink-700); box-shadow: inset 0 0 0 1px var(--line-strong); } .btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--blue-300); color: var(--blue-700); transform: translateY(-2px); } .btn--soft { background: var(--blue-50); color: var(--blue-700); } .btn--soft:hover { background: var(--blue-100); } .btn--lg { padding: 16px 32px; font-size: 17px; } .btn--block { display: flex; width: 100%; } /* arrow that points "forward" in reading direction */ .btn .arr { transition: transform .2s ease; } .btn:hover .arr { transform: translateX(-4px); } [dir="ltr"] .btn:hover .arr { transform: translateX(4px); } /* ---------------------------------------------------------------- pills / badges */ .pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 500; font-size: 13px; padding: 6px 13px; border-radius: var(--r-pill); background: var(--blue-50); color: var(--blue-700); white-space: nowrap; } .pill--green { background: var(--green-100); color: var(--green-600); } .pill--amber { background: var(--amber-100); color: var(--amber-600); } .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-500); font-weight: 500; padding: 8px 14px; border-radius: var(--r-pill); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); } /* ---------------------------------------------------------------- cards */ .card { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--line); padding: 30px; } .card--pad-lg { padding: 38px; } .icon-box { width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--blue-50); color: var(--blue-600); margin-block-end: 20px; } .icon-box svg { width: 26px; height: 26px; } .icon-box--green { background: var(--green-100); color: var(--green-600); } .icon-box--ink { background: #11233a; color: #8fb8ff; } /* feature grid */ .grid { display: grid; gap: 24px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .feat h3 { font-size: 20px; margin-block-end: 8px; } .feat p { font-size: 15.5px; color: var(--ink-400); } /* ---------------------------------------------------------------- header */ .site-header { position: sticky; top: 0; z-index: 80; height: var(--nav-h); background: rgba(255,255,255,.82); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); } .nav { height: 100%; display: flex; align-items: center; gap: 28px; } .brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-head); font-weight: 600; color: var(--ink-900); font-size: 19px; white-space: nowrap; } .brand-text { display: flex; flex-direction: column; line-height: 1.08; } .brand-name { font-size: 19px; font-weight: 600; } .brand-sub { font-size: 10.5px; font-weight: 500; color: var(--ink-300); letter-spacing: .015em; } .foot-brand .brand-sub { color: #7a8ba4; } .brand .mark { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(150deg, var(--blue-500), var(--blue-700)); display: grid; place-items: center; color: #fff; box-shadow: var(--shadow-blue); } .brand .mark svg { width: 19px; height: 19px; } .nav-links { display: flex; align-items: center; gap: 4px; margin-inline-start: 12px; } .nav-links a { font-family: var(--font-head); font-weight: 500; font-size: 15.5px; color: var(--ink-500); padding: 9px 14px; border-radius: var(--r-sm); transition: color .15s, background .15s; } .nav-links a:hover { color: var(--blue-700); background: var(--blue-50); } .nav-links a.active { color: var(--blue-700); } .nav-right { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; } /* language switcher */ .lang { position: relative; } .lang-btn { display: flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 500; font-size: 14.5px; color: var(--ink-600, var(--ink-500)); padding: 8px 13px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong); } .lang-btn:hover { box-shadow: inset 0 0 0 1px var(--blue-300); color: var(--blue-700); } .lang-btn svg { width: 16px; height: 16px; opacity: .7; } .lang-menu { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-lg); border: 1px solid var(--line); padding: 6px; min-width: 150px; display: none; flex-direction: column; gap: 2px; } .lang-menu.open { display: flex; } .lang-menu button { display: flex; align-items: center; gap: 10px; width: 100%; font-family: var(--font-head); font-weight: 500; font-size: 14.5px; color: var(--ink-500); padding: 9px 12px; border-radius: var(--r-sm); text-align: start; } .lang-menu button:hover { background: var(--blue-50); color: var(--blue-700); } .lang-menu button.sel { color: var(--blue-700); background: var(--blue-50); } .lang-menu button .flag { font-size: 17px; line-height: 1; } .lang-menu button .check { margin-inline-start: auto; opacity: 0; } .lang-menu button.sel .check { opacity: 1; } .menu-toggle { display: none; width: 42px; height: 42px; border-radius: var(--r-sm); place-items: center; color: var(--ink-700); box-shadow: inset 0 0 0 1px var(--line-strong); } .menu-toggle svg { width: 22px; height: 22px; } /* ---------------------------------------------------------------- footer */ .site-footer { background: var(--ink-900); color: #9fb2cb; padding-block: 64px 36px; } .site-footer a { color: #b8c7dc; font-size: 15px; } .site-footer a:hover { color: #fff; } .foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; padding-block-end: 44px; border-bottom: 1px solid rgba(255,255,255,.09); } .foot-grid h4 { color: #e8eef7; font-size: 15px; margin-block-end: 16px; font-weight: 600; } .foot-grid li { margin-block-end: 10px; } .foot-brand .brand { color: #fff; margin-block-end: 16px; } .foot-brand p { font-size: 14.5px; color: #8497af; max-width: 280px; } .foot-bottom { display: flex; align-items: center; justify-content: space-between; padding-block-start: 28px; font-size: 14px; color: #7a8ba4; gap: 16px; flex-wrap: wrap; } /* ---------------------------------------------------------------- misc utility */ .check-list { display: grid; gap: 13px; } .check-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 16px; color: var(--ink-500); } .check-list .ck { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--green-100); color: var(--green-600); display: grid; place-items: center; margin-block-start: 1px; } .check-list .ck svg { width: 13px; height: 13px; } .stat-num { font-family: var(--font-head); font-weight: 600; font-size: 40px; color: var(--ink-900); line-height: 1; } .stat-lbl { font-size: 14.5px; color: var(--ink-400); margin-block-start: 8px; } .divider { height: 1px; background: var(--line); border: 0; } /* ---------------- unified motion (2026-07-19): enter+exit, staggered ---------------- Owned by assets/motion.js: auto-tags .reveal site-wide, toggles .in in BOTH directions, sets --rv-d per element for the stagger, and drives the page enter/exit transition via html.m-in / html.m-out. */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); transition-delay: var(--rv-d, 0ms); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } /* page enter/exit — body fades+lifts in on load, out on internal navigation */ html.m-motion body { opacity: 0; transform: translateY(10px); } html.m-motion.m-in body { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1); } html.m-motion.m-out body { opacity: 0; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html.m-motion body, html.m-motion.m-in body, html.m-motion.m-out body { opacity: 1; transform: none; transition: none; } } /* ---------------------------------------------------------------- responsive */ @media (max-width: 940px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 760px) { .section { padding-block: 64px; } .nav-links { display: none; } .menu-toggle { display: grid; } /* Mobile header: logo + hamburger (+ language). The login link lives in the drawer; the signup CTA was removed from the header (signups gated until launch). */ .nav-login { display: none; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .lang-btn .lang-name { display: none; } .foot-grid { grid-template-columns: 1fr 1fr; } body { font-size: 16px; } .wrap { padding-inline: 20px; } } /* mobile drawer */ .mobile-menu { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 70; background: rgba(255,255,255,.98); backdrop-filter: blur(8px); padding: 24px 28px; display: none; flex-direction: column; gap: 6px; } .mobile-menu.open { display: flex; } .mobile-menu a { font-family: var(--font-head); font-weight: 500; font-size: 19px; color: var(--ink-700); padding: 14px 8px; border-bottom: 1px solid var(--line); } /* ---------------------------------------------------- coming-soon state */ .soon-banner { display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(90deg, var(--blue-700), var(--blue-600)); color: #fff; font-family: var(--font-head); font-weight: 500; font-size: 13.5px; padding: 9px 18px; text-align: center; line-height: 1.3; } .soon-banner svg { width: 15px; height: 15px; opacity: .9; flex: none; } .soon-banner .soon-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffd86b; flex: none; box-shadow: 0 0 0 0 rgba(255,216,107,.6); animation: soonpulse 2s infinite; } @keyframes soonpulse { 0% { box-shadow: 0 0 0 0 rgba(255,216,107,.6); } 70% { box-shadow: 0 0 0 7px rgba(255,216,107,0); } 100% { box-shadow: 0 0 0 0 rgba(255,216,107,0); } } @media (prefers-reduced-motion: reduce) { .soon-banner .soon-dot { animation: none; } } .btn.is-soon { background: var(--surface-2) !important; color: var(--ink-300) !important; box-shadow: inset 0 0 0 1px var(--line-strong) !important; pointer-events: none; cursor: default; transform: none !important; } .pill.pill--soon { background: var(--amber-100); color: var(--amber-600); } .price-soon { font-family: var(--font-head); font-weight: 600; font-size: 32px; color: var(--blue-700); letter-spacing: -.01em; } .is-soon-price { min-height: 52px; display: flex; align-items: baseline; } /* Mobile: never allow horizontal overflow / sideways scroll. */ html, body { overflow-x: hidden; } /* ---- Full-responsive refinement pass (2026-07-19): small phones ---- */ @media (max-width: 480px) { h2.display { font-size: clamp(26px, 7.4vw, 34px); } .section { padding-block: 52px; } .lead { font-size: 16px; } .btn--lg { padding-block: 13px; font-size: 16px; } .card--pad-lg { padding: 24px 20px; } .foot-grid { grid-template-columns: 1fr; gap: 26px; } } /* Comfortable tap targets on any touch device */ @media (pointer: coarse) { .nav-links a, .mobile-menu a, .btn, .lang-btn { min-height: 44px; } }