:root { --navy: #16233F; --navy-light: #1D2E52; --navy-deep: #0E1730; --gold: #C6A244; --gold-soft: #DCC17A; --white: #FFFFFF; --cream: #F4F1EA; --paper: #EDE9DE; --border: #E5E2D8; --ink: #2B2B2B; --ink-soft: #5F5E5A; --ink-muted: #8A8980; --text-light-muted: #C9D2E0; --font-head: Cambria, Georgia, "Times New Roman", serif; --font-body: Calibri, "Segoe UI", Arial, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--white); line-height: 1.55; } /* direction follows the per-page attribute (rtl for Hebrew, ltr for English) — not hardcoded here, so this one stylesheet serves both locales correctly. */ h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; text-wrap: balance; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button { font-family: inherit; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 28px; border-radius: 8px; font-weight: 600; font-size: 15px; border: none; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .btn:hover { transform: translateY(-1px); } .btn-small { padding: 9px 18px; font-size: 13px; border-radius: 7px; } .btn-large { padding: 16px 36px; font-size: 17px; } .btn-primary { background: var(--navy); color: var(--white); } .btn-primary:hover { background: var(--navy-light); } .btn-gold { background: var(--gold); color: var(--navy); } .btn-gold:hover { box-shadow: 0 8px 20px -6px rgba(198,162,68,0.55); } .btn-outline { border: 1.5px solid var(--navy); color: var(--navy); background: transparent; } .btn-outline:hover { background: var(--navy); color: var(--white); } .btn-ghost-dark { border: 1.5px solid rgba(255,255,255,0.45); color: var(--white); background: transparent; } .btn-ghost-dark:hover { border-color: var(--gold); color: var(--gold); } /* ---------- Nav ---------- */ .site-nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; } .brand { font-family: var(--font-head); font-weight: bold; font-size: 21px; color: var(--navy); display: flex; align-items: center; gap: 9px; flex-shrink: 0; } .brand-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); display: inline-block; } .nav-links { display: flex; gap: 32px; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); flex: 1; } .nav-links a { position: relative; padding: 4px 0; transition: color 0.15s ease; } .nav-links a:hover { color: var(--navy); } .nav-links a.active { color: var(--navy); } .nav-links a.active::after { content: ""; position: absolute; bottom: -4px; right: 0; left: 0; height: 2px; background: var(--gold); border-radius: 2px; } .nav-cta { flex-shrink: 0; } .nav-dropdown { position: relative; } .nav-dropdown-checkbox { display: none; } .nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 5px; position: relative; padding: 4px 0; cursor: pointer; transition: color 0.15s ease; } .nav-dropdown-toggle:hover { color: var(--navy); } .nav-dropdown-toggle.active { color: var(--navy); } .nav-dropdown-toggle.active::after { content: ""; position: absolute; bottom: -4px; inset-inline-start: 0; inset-inline-end: 0; height: 2px; background: var(--gold); border-radius: 2px; } .nav-dropdown-toggle::before { content: ""; flex-shrink: 0; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; opacity: 0.7; transition: transform 0.15s ease; } .nav-dropdown-checkbox:checked ~ .nav-dropdown-toggle::before { transform: rotate(225deg); margin-top: 3px; } .nav-dropdown-menu { display: none; position: absolute; top: 100%; inset-inline-start: 0; min-width: 200px; margin-top: 14px; padding: 8px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 16px 32px -16px rgba(0,0,0,0.2); z-index: 10; } .nav-dropdown-menu a { display: block; padding: 9px 12px; border-radius: 6px; font-weight: 600; color: var(--ink-soft); } .nav-dropdown-menu a:hover { background: var(--cream); color: var(--navy); } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown-checkbox:checked ~ .nav-dropdown-menu { display: block; } .lang-switch { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--ink-soft); border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px; margin-inline-end: 14px; transition: color 0.15s ease, border-color 0.15s ease; } .lang-switch:hover { color: var(--navy); border-color: var(--navy); } .nav-toggle { display: none; } .nav-toggle-label { display: none; } /* ---------- Hero ---------- */ .hero { background: var(--navy); padding: 76px 0 88px; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset-inline-end: -220px; top: -240px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--navy-light), var(--navy-deep)); opacity: 0.7; } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 18px; } .hero-copy h1 { font-size: 46px; color: var(--white); line-height: 1.15; margin-bottom: 20px; } .hero-copy p { font-size: 17px; color: var(--text-light-muted); max-width: 480px; margin: 0 0 32px; } .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; } .hero-visual { position: relative; } .hero-visual .browser-frame { box-shadow: 0 30px 70px -20px rgba(0,0,0,0.55); } @keyframes hero-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: no-preference) { .hero-copy { animation: hero-rise 0.7s ease both; } .hero-visual { animation: hero-rise 0.7s ease 0.15s both; } } /* ---------- Browser chrome frame (screenshots) ---------- */ .browser-frame { border-radius: 10px; overflow: hidden; background: var(--white); border: 1px solid var(--border); box-shadow: 0 20px 50px -22px rgba(22,35,63,0.4), 0 2px 10px rgba(22,35,63,0.06); transition: transform 0.25s ease, box-shadow 0.25s ease; } a .browser-frame:hover, .screens-grid .browser-frame:hover { transform: translateY(-4px); box-shadow: 0 28px 60px -20px rgba(22,35,63,0.5), 0 4px 14px rgba(22,35,63,0.1); } .browser-frame-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--paper); border-bottom: 1px solid var(--border); } .browser-frame-dots { display: flex; gap: 6px; flex-shrink: 0; } .browser-frame-dots span { width: 9px; height: 9px; border-radius: 50%; background: #D9D4C4; display: block; } .browser-frame-url { flex: 1; background: var(--white); border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px; font-size: 11px; color: var(--ink-muted); direction: ltr; text-align: center; font-family: "Courier New", monospace; } .browser-frame img { width: 100%; height: auto; display: block; } .browser-frame figcaption { padding: 14px 16px; font-size: 14px; font-weight: 700; color: var(--navy); border-top: 1px solid var(--border); } .browser-frame figcaption span { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; } /* ---------- Sections ---------- */ .section { padding: 92px 0; } .section-tight { padding: 64px 0; } .section-alt { background: var(--cream); } .section-navy { background: var(--navy); color: var(--white); } .section-navy .ink-muted-on-navy { color: var(--text-light-muted); } .eyebrow { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--gold); margin-bottom: 12px; } .section-head { max-width: 640px; margin: 0 auto 52px; text-align: center; } .section-head.align-start { margin: 0 0 40px; text-align: start; } .section-title { font-size: 32px; color: var(--navy); margin-bottom: 14px; } .section-title-white { color: var(--white); } .section-sub { font-size: 16px; color: var(--ink-soft); margin: 0; } .section-sub-light { color: var(--text-light-muted); } .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); } .grid-5 { grid-template-columns: repeat(5, 1fr); } .module-teaser { text-align: center; } .module-teaser h3 { font-size: 14.5px; color: var(--navy); margin: 14px 0 5px; font-family: var(--font-body); font-weight: 700; } .module-teaser p { font-size: 12.5px; color: var(--ink-muted); margin: 0; } .module-teaser .icon-circle { margin: 0 auto; } .module-teaser:hover .icon-circle-navy { background: var(--navy); color: var(--white); } /* ---------- Icon chip ---------- */ .icon-circle { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .icon-circle svg { width: 24px; height: 24px; } .icon-circle-navy { background: var(--cream); color: var(--navy); } .icon-circle-gold { background: rgba(198,162,68,0.15); color: var(--gold); } .icon-circle-outline { background: transparent; border: 1.5px solid rgba(255,255,255,0.35); color: var(--gold); } /* ---------- Feature row (icon + text, left-aligned, not a card grid) ---------- */ .feature-row { display: flex; gap: 18px; align-items: flex-start; } .feature-row h3 { font-size: 16px; color: var(--navy); margin-bottom: 6px; font-family: var(--font-body); font-weight: 700; } .feature-row p { font-size: 14px; color: var(--ink-soft); margin: 0; } .section-navy .feature-row h3 { color: var(--white); } .section-navy .feature-row p { color: var(--text-light-muted); } /* ---------- Module list (product depth) ---------- */ .module-list { display: flex; flex-direction: column; gap: 0; } .module-row { display: grid; grid-template-columns: 64px 1fr; gap: 22px; padding: 32px 24px; margin: 0 -24px; border-top: 1px solid var(--border); border-radius: 10px; transition: background-color 0.2s ease; } .module-row:last-child { border-bottom: 1px solid var(--border); } .module-row:hover { background: var(--cream); } .module-row h3 { font-size: 20px; color: var(--navy); margin-bottom: 10px; } .module-row ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; } .module-row li { font-size: 14.5px; color: var(--ink-soft); padding-inline-start: 18px; position: relative; } .module-row li::before { content: ""; position: absolute; inset-inline-start: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); } /* ---------- Stat strip ---------- */ .stat-strip { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--white); } .stat-item { flex: 1; padding: 26px 20px; text-align: center; border-inline-end: 1px solid var(--border); } .stat-item:last-child { border-inline-end: none; } .stat-num { font-family: var(--font-head); font-size: 30px; color: var(--navy); font-weight: 700; display: block; margin-bottom: 4px; font-variant-numeric: tabular-nums; } .stat-label { font-size: 13px; color: var(--ink-muted); } /* ---------- Price highlight ---------- */ .price-highlight { display: flex; align-items: center; gap: 32px; background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 32px 36px; max-width: 900px; margin: 0 auto; } .price-highlight-num { flex-shrink: 0; text-align: center; min-width: 150px; } .price-highlight-num .amount { font-family: var(--font-head); font-weight: 700; font-size: 38px; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1; } .price-highlight-num .per { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 0.03em; } .price-highlight-divider { width: 1px; align-self: stretch; background: var(--border); flex-shrink: 0; } .price-highlight-detail h3 { font-size: 17px; color: var(--navy); margin-bottom: 8px; } .price-highlight-detail p { margin: 0; font-size: 14px; color: var(--ink-soft); } @media (max-width: 720px) { .price-highlight { flex-direction: column; gap: 18px; padding: 26px 24px; } .price-highlight-divider { width: 100%; height: 1px; } } /* ---------- Compare ---------- */ .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; margin: 0 auto; } .compare-col { display: flex; flex-direction: column; gap: 12px; } .compare-head { background: var(--paper); color: var(--ink); border-radius: 8px; padding: 12px; text-align: center; font-weight: 700; font-size: 14px; } .compare-head-gold { background: var(--navy); color: var(--gold); } .compare-row { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 4px 6px; } .compare-before .compare-row { color: var(--ink-muted); } .compare-after .compare-row { color: var(--ink); font-weight: 600; } .x-mark, .check-mark { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; } .x-mark { background: var(--paper); color: var(--ink-muted); } .check-mark { background: var(--navy); color: var(--gold); } /* ---------- Language section ---------- */ .lang-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; } .lang-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .lang-chips span { border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 600; background: var(--navy-light); } .chat-mock { background: var(--navy-light); border: 1px solid rgba(198,162,68,0.4); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 12px; } .chat-bubble { background: #263A61; color: var(--white); border-radius: 10px; padding: 13px 15px; font-size: 14px; align-self: flex-end; max-width: 90%; } /* ---------- Screens gallery ---------- */ .screens-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .screens-grid .browser-frame-wide { grid-column: span 2; } /* ---------- Steps ---------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .step { text-align: center; } .step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: var(--navy); font-family: var(--font-head); font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .step h3 { font-size: 15px; margin-bottom: 6px; color: var(--navy); } .step p { font-size: 13px; color: var(--ink-soft); margin: 0; } /* ---------- CTA banner ---------- */ .section-cta { background: var(--navy); text-align: center; position: relative; overflow: hidden; } .section-cta::before { content: ""; position: absolute; inset-inline-start: -180px; bottom: -220px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle at 70% 70%, var(--navy-light), transparent 70%); } .cta-inner { position: relative; z-index: 1; } .cta-sub { font-size: 17px; color: var(--text-light-muted); margin-bottom: 32px; } /* ---------- Footer ---------- */ .site-footer { background: var(--navy-deep); padding: 64px 0 0; color: var(--text-light-muted); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; } .footer-brand .brand { color: var(--white); margin-bottom: 14px; } .footer-brand p { font-size: 13.5px; color: var(--text-light-muted); max-width: 260px; margin: 0; } .footer-col h4 { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--white); margin-bottom: 16px; letter-spacing: 0.02em; } .footer-col { display: flex; flex-direction: column; } .footer-col a { font-size: 13.5px; color: var(--text-light-muted); padding: 7px 0; transition: color 0.15s ease; } .footer-col a:hover { color: var(--gold); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 20px 0; display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(201,210,224,0.6); } /* ---------- About page ---------- */ .about-hero { background: var(--cream); padding: 72px 0 64px; text-align: center; } .about-hero .eyebrow { justify-content: center; display: flex; } .about-hero h1 { font-size: 38px; color: var(--navy); max-width: 720px; margin: 0 auto; } .mission-block { max-width: 720px; margin: 0 auto; } .mission-block p { font-size: 17px; color: var(--ink-soft); margin: 0 0 22px; line-height: 1.75; } .mission-block p:last-child { margin-bottom: 0; } .principle-list { display: flex; flex-direction: column; gap: 0; max-width: 780px; margin: 0 auto; } .principle-row { display: grid; grid-template-columns: 44px 1fr; gap: 20px; padding: 26px 24px; margin: 0 -24px; border-top: 1px solid var(--border); border-radius: 10px; transition: background-color 0.2s ease; } .principle-row:last-child { border-bottom: 1px solid var(--border); } .principle-row:hover { background: var(--white); } .principle-num { font-family: var(--font-head); font-size: 20px; color: var(--gold); font-weight: 700; } .principle-row h3 { font-size: 16.5px; color: var(--navy); margin-bottom: 6px; font-family: var(--font-body); font-weight: 700; } .principle-row p { font-size: 14.5px; color: var(--ink-soft); margin: 0; } .roadmap-note { max-width: 780px; margin: 0 auto; background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 26px 28px; } .roadmap-note h3 { font-size: 14px; color: var(--navy); margin-bottom: 10px; } .roadmap-note p { font-size: 14.5px; color: var(--ink-soft); margin: 0; } /* ---------- Contact page ---------- */ .contact-hero { background: var(--navy); padding: 72px 0 64px; text-align: center; } .contact-hero h1 { font-size: 38px; color: var(--white); margin-bottom: 14px; } .contact-hero p { font-size: 16px; color: var(--text-light-muted); max-width: 480px; margin: 0 auto; } .contact-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; } .contact-info h3 { font-size: 15px; color: var(--navy); margin-bottom: 10px; } .contact-info .contact-email { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; color: var(--navy); margin-bottom: 28px; } .contact-info .contact-email:hover { color: var(--gold); } .contact-detail { display: flex; gap: 14px; margin-bottom: 20px; align-items: flex-start; } .contact-detail h4 { font-size: 14px; color: var(--navy); margin-bottom: 3px; font-family: var(--font-body); font-weight: 700; } .contact-detail p { font-size: 13.5px; color: var(--ink-soft); margin: 0; } .contact-form { background: var(--cream); border-radius: 14px; padding: 36px; } .form-row { margin-bottom: 18px; display: flex; flex-direction: column; gap: 7px; } .form-row label { font-size: 13px; font-weight: 700; color: var(--navy); } .form-row input, .form-row textarea { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-family: var(--font-body); font-size: 14.5px; color: var(--ink); background: var(--white); resize: vertical; } .form-row input:focus, .form-row textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* ---------- 404 page ---------- */ .error-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 60px 0; } .error-page .eyebrow { display: flex; justify-content: center; } .error-page h1 { font-size: 96px; color: var(--navy); line-height: 1; margin-bottom: 8px; } .error-page p { font-size: 16px; color: var(--ink-soft); margin: 0 0 28px; } /* ---------- Mobile nav (checkbox toggle, no JS) ---------- */ .nav-toggle-label { display: none; flex-direction: column; gap: 4px; cursor: pointer; padding: 8px; margin: -8px; } .nav-toggle-label span { width: 22px; height: 2px; background: var(--navy); border-radius: 2px; } /* ---------- Responsive ---------- */ @media (max-width: 980px) { .hero-grid { display: flex; flex-direction: column; } .hero-visual { max-width: 480px; } .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); } .lang-inner { display: flex; flex-direction: column; } .footer-grid { grid-template-columns: 1fr 1fr; } .screens-grid { grid-template-columns: repeat(2, 1fr); } .screens-grid .browser-frame-wide { grid-column: span 2; } .steps { grid-template-columns: repeat(2, 1fr); } .compare { display: flex; flex-direction: column; } .contact-layout { display: flex; flex-direction: column; } .stat-strip { flex-direction: column; } .stat-item { border-inline-end: none; border-bottom: 1px solid var(--border); } .stat-item:last-child { border-bottom: none; } } @media (max-width: 720px) { .nav-links { display: none; position: absolute; top: 72px; right: 0; left: 0; background: var(--white); flex-direction: column; gap: 0; padding: 8px 24px 16px; border-bottom: 1px solid var(--border); box-shadow: 0 12px 24px -12px rgba(0,0,0,0.15); } .nav-links a { padding: 12px 0; border-top: 1px solid var(--border); } .nav-links a.active::after { display: none; } .nav-toggle-label { display: flex; order: 0; } .nav-toggle:checked ~ .nav-links { display: flex; } .nav-cta { display: none; } /* Hamburger is the true corner element (easiest thumb reach — right in Hebrew/RTL, left in English/LTR), brand sits just inside it. First attempt put the brand at the very edge with the hamburger one step in — technically "the same side" but not the standard mobile pattern; this is what was meant. */ .brand { order: 1; } .lang-switch { order: 2; margin-inline-start: auto; } .nav-dropdown-toggle { display: flex; } .nav-dropdown-toggle.active::after { display: none; } .nav-dropdown:hover .nav-dropdown-menu { display: none; } .nav-dropdown-checkbox:checked ~ .nav-dropdown-menu { display: block; } .nav-dropdown-menu { position: static; margin-top: 0; padding: 0; border: none; box-shadow: none; background: transparent; border-radius: 0; } .nav-dropdown-menu a { padding: 10px 0; padding-inline-start: 16px; border-top: 1px solid var(--border); font-weight: 500; } .hero { padding: 52px 0 60px; } .hero-copy h1 { font-size: 34px; } .section { padding: 56px 0; } .section-tight { padding: 44px 0; } .section-title { font-size: 25px; } .grid-2, .grid-3, .grid-4 { display: flex; flex-direction: column; } .grid-5 { grid-template-columns: repeat(2, 1fr); } .footer-grid { display: flex; flex-direction: column; gap: 32px; } .footer-bottom { flex-direction: column; gap: 6px; text-align: center; } .screens-grid { display: flex; flex-direction: column; } .steps { display: flex; flex-direction: column; } .module-row { display: flex; flex-direction: column; } .principle-row { display: flex; flex-direction: column; } .form-grid-2 { display: flex; flex-direction: column; } .error-page h1 { font-size: 64px; } } /* ---------- App preview mockups (dashboard / AI, built as real markup — not screenshots — so they stay crisp, never show demo data, and are easy to keep in sync with the product) ---------- */ .app-mock { display: flex; min-height: 460px; background: var(--white); font-family: var(--font-body); } .app-mock-sidebar { width: 168px; flex-shrink: 0; background: var(--navy); padding: 20px 14px; display: flex; flex-direction: column; gap: 22px; } .app-mock-brand { display: flex; align-items: center; gap: 8px; color: var(--white); font-weight: 700; font-size: 13px; } .app-mock-brand .brand-dot { width: 7px; height: 7px; } .app-mock-nav { display: flex; flex-direction: column; gap: 3px; } .app-mock-nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; font-size: 11.5px; color: #A9B2C4; font-weight: 600; } .app-mock-nav-item .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.6; flex-shrink: 0; } .app-mock-nav-item.is-active { background: rgba(198,162,68,0.16); color: var(--white); border-inline-start: 2px solid var(--gold); padding-inline-start: 8px; } .app-mock-nav-item.is-active .dot { background: var(--gold); opacity: 1; } .app-mock-main { flex: 1; min-width: 0; background: var(--paper); padding: 20px 22px; } .app-mock-topbar { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; } .app-mock-topbar .greet { font-size: 11px; color: var(--ink-muted); margin: 0 0 3px; } .app-mock-topbar h4 { font-family: var(--font-head); font-size: 18px; color: var(--navy); margin: 0; } .app-mock-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .app-mock-kpi { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 13px 14px; display: flex; flex-direction: column; gap: 6px; position: relative; } .app-mock-kpi .num { font-family: var(--font-head); font-size: 21px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; } .app-mock-kpi .lbl { font-size: 10.5px; color: var(--ink-muted); font-weight: 600; } .app-mock-kpi.is-ai { background: linear-gradient(135deg, var(--navy), #2B3F6B); border-color: transparent; } .app-mock-kpi.is-ai .num, .app-mock-kpi.is-ai .lbl { color: var(--white); } .app-mock-kpi.is-ai .lbl { color: var(--gold-soft); } .app-mock-kpi.is-good { background: #EEF5E7; border-color: transparent; } .app-mock-kpi.is-good .num { color: #3F6B2B; } .app-mock-kpi.is-warn { background: #FBF0DC; border-color: transparent; } .app-mock-kpi.is-warn .num { color: #8A6415; } .app-mock-kpi-tag { position: absolute; inset-inline-end: 10px; top: 12px; width: 16px; height: 16px; border-radius: 5px; background: rgba(198,162,68,0.18); display: flex; align-items: center; justify-content: center; } .app-mock-kpi.is-ai .app-mock-kpi-tag { background: rgba(255,255,255,0.15); } .app-mock-kpi-tag svg { width: 9px; height: 9px; color: var(--gold); } .app-mock-kpi.is-ai .app-mock-kpi-tag svg { color: var(--gold-soft); } /* ---------- AI chat mockup (phone-shaped) ---------- */ .ai-phone { max-width: 300px; margin: 0 auto; background: var(--navy-deep); border-radius: 32px; padding: 10px; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.5); } .ai-phone-screen { background: var(--white); border-radius: 24px; overflow: hidden; } .ai-phone-bar { background: var(--navy); color: var(--white); padding: 14px 16px; display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; } .ai-phone-bar .ai-dot { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ai-phone-bar .ai-dot svg { width: 11px; height: 11px; color: var(--navy); } .ai-phone-thread { padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; min-height: 260px; background: var(--cream); } .ai-msg { max-width: 82%; padding: 10px 13px; border-radius: 14px; font-size: 12.5px; line-height: 1.45; } .ai-msg-user { align-self: flex-end; background: var(--navy); color: var(--white); border-end-end-radius: 4px; } .ai-msg-bot { align-self: flex-start; background: var(--white); color: var(--ink); border: 1px solid var(--border); border-end-start-radius: 4px; } .ai-msg-chips { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 6px; max-width: 90%; } .ai-msg-chips span { border: 1.5px solid var(--gold); color: var(--navy); background: var(--white); border-radius: 8px; padding: 6px 11px; font-size: 11.5px; font-weight: 700; } .ai-msg-ticket { align-self: flex-start; background: #EEF5E7; border: 1px solid #C9DDB4; border-radius: 12px; padding: 10px 12px; font-size: 11.5px; color: #3F6B2B; display: flex; align-items: center; gap: 8px; font-weight: 600; } .ai-phone-input { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--white); } .ai-phone-input .field { flex: 1; height: 30px; border-radius: 15px; background: var(--cream); } .ai-phone-input .send { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .ai-phone-input .send svg { width: 13px; height: 13px; color: var(--gold); } /* ---------- AI insight card (business-insight mockup) ---------- */ .insight-card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; } .insight-card-head { display: flex; align-items: center; gap: 10px; } .insight-card-head .ai-dot { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), #2B3F6B); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .insight-card-head .ai-dot svg { width: 15px; height: 15px; color: var(--gold); } .insight-card-head h4 { font-family: var(--font-head); font-size: 15px; color: var(--navy); margin: 0; } .insight-card-head span { font-size: 11px; color: var(--ink-muted); } .insight-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--border); } .insight-row:first-of-type { border-top: none; padding-top: 0; } .insight-sev { flex-shrink: 0; font-size: 10px; font-weight: 700; border-radius: 6px; padding: 3px 8px; margin-top: 1px; } .insight-sev.high { background: #FBEAEA; color: #A33A3A; } .insight-sev.med { background: #FBF0DC; color: #8A6415; } .insight-row p { margin: 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; } .insight-row .cat { display: block; font-size: 10.5px; color: var(--gold); font-weight: 700; margin-bottom: 3px; } @media (max-width: 720px) { .app-mock { flex-direction: column; min-height: 0; } .app-mock-sidebar { width: 100%; flex-direction: row; align-items: center; padding: 12px 14px; } .app-mock-nav { display: none; } .app-mock-kpi-grid { grid-template-columns: repeat(2, 1fr); } } /* ---------- App mock: compact list variant (e.g. employees) ---------- */ .app-mock-list-strip { display: flex; gap: 8px; margin-bottom: 12px; } .app-mock-list-strip .app-mock-kpi { flex: 1; padding: 10px 12px; gap: 3px; } .app-mock-list-strip .app-mock-kpi .num { font-size: 16px; } .app-mock-list-strip .app-mock-kpi .lbl { font-size: 9.5px; } .app-mock-nat-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; font-size: 11px; font-weight: 700; color: var(--navy); } .app-mock-nat-btn svg { width: 12px; height: 12px; color: var(--ink-muted); } .app-mock-row-list { display: flex; flex-direction: column; gap: 6px; } .app-mock-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; } .app-mock-row .who { display: flex; flex-direction: column; gap: 1px; } .app-mock-row .who span:first-child { font-size: 11.5px; font-weight: 700; color: var(--ink); } .app-mock-row .who span:last-child { font-size: 10px; color: var(--ink-muted); } .app-mock-row .pill { font-size: 9.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; background: #EEF5E7; color: #3F6B2B; flex-shrink: 0; } /* ---------- Install guide page ---------- */ .guide-hero { background: var(--cream); padding: 72px 0 56px; text-align: center; } .guide-hero .eyebrow { justify-content: center; display: flex; } .guide-hero h1 { font-size: 36px; color: var(--navy); max-width: 640px; margin: 0 auto 14px; } .guide-hero .section-sub { max-width: 560px; margin: 0 auto; } .guide-lang-picker { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 28px; } .guide-lang-btn { border: 1px solid var(--border); background: var(--white); color: var(--ink-soft); border-radius: 8px; padding: 8px 16px; font-size: 13.5px; font-weight: 600; font-family: var(--font-body); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .guide-lang-btn:hover { border-color: var(--navy); color: var(--navy); } .guide-lang-btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); } .guide-url-card { max-width: 560px; margin: 40px auto 0; background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 26px 28px; text-align: start; } .guide-url-card label { display: block; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 8px; } .guide-url-row { display: flex; gap: 10px; flex-wrap: wrap; } .guide-url-row input { flex: 1; min-width: 200px; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-family: var(--font-body); font-size: 14.5px; color: var(--ink); background: var(--cream); direction: ltr; text-align: start; } .guide-url-row input:focus { outline: 2px solid var(--gold); outline-offset: 1px; } .guide-url-hint { font-size: 12.5px; color: var(--ink-muted); margin-top: 8px; } .guide-platform-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 420px; margin: 0 auto; } .guide-platform-tab { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--white); color: var(--ink-soft); font-weight: 700; font-size: 15px; font-family: var(--font-body); cursor: pointer; } .guide-platform-tab svg { width: 20px; height: 20px; } .guide-platform-tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); } .guide-note { max-width: 720px; margin: 20px auto 0; font-size: 13.5px; color: var(--ink-soft); padding: 12px 16px; background: var(--cream); border-inline-start: 3px solid var(--gold); border-radius: 8px; } .guide-progress { max-width: 720px; margin: 32px auto 0; height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; } .guide-progress-fill { height: 100%; background: var(--gold); width: 0%; transition: width 0.35s ease; } .guide-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 720px; margin: 20px auto 0; } .guide-step { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 18px; transition: background-color 0.2s ease, border-color 0.2s ease; } .guide-step.done { background: #EFF5E7; border-color: #6E9A44; } .guide-step-num { width: 38px; height: 38px; border-radius: 50%; background: var(--gold); color: var(--navy); font-family: var(--font-head); font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .guide-step.done .guide-step-num { background: #4C7A22; color: #EFF5E7; } .guide-step-body h3 { font-size: 15.5px; color: var(--navy); margin-bottom: 5px; font-family: var(--font-body); } .guide-step-body p { font-size: 13.5px; color: var(--ink-soft); margin: 0; } .guide-step-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); background: var(--white); flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; align-self: center; } .guide-step-check svg { width: 14px; height: 14px; opacity: 0; color: #fff; } .guide-step.done .guide-step-check { background: #4C7A22; border-color: #4C7A22; } .guide-step.done .guide-step-check svg { opacity: 1; } .guide-done-banner { max-width: 560px; margin: 24px auto 0; text-align: center; display: none; flex-direction: column; align-items: center; gap: 10px; background: #EFF5E7; border: 1px solid #6E9A44; border-radius: 14px; padding: 30px 26px; } .guide-done-banner.show { display: flex; } .guide-done-banner .ring { width: 52px; height: 52px; border-radius: 50%; background: #4C7A22; color: #EFF5E7; display: flex; align-items: center; justify-content: center; } .guide-done-banner .ring svg { width: 26px; height: 26px; } .guide-done-banner h3 { font-size: 18px; color: #4C7A22; } .guide-done-banner p { font-size: 14px; color: var(--ink); max-width: 36ch; margin: 0; } @media (max-width: 720px) { .guide-platform-tabs { max-width: 100%; } .guide-steps { grid-template-columns: 1fr; } }