/* ========================================================================= LoopTo marketing site — stylesheet Plain CSS, no build step. Hebrew / RTL by default (see html[dir="rtl"]). Palette + component shapes are pulled straight from the real desktop client's Theme.axaml (dark theme) so the marketing site and the product share one visual identity instead of inventing a second brand. ========================================================================= */ /* ---------- Design tokens ------------------------------------------------ */ :root { /* Color — 1:1 with src/QuickTasks.Client/Styles/Theme.axaml (Dark) */ --bg: #0e1116; --surface: #141a22; --surface-2: #171e27; --surface-3: #1b2330; --field: #10151c; --border: #232d3a; --border-soft: #1b2430; --text: #e6e9ef; --text-muted: #8b96a5; --text-faint: #647084; --accent: #2f6fed; /* filled buttons / active fills (white text on top) */ --accent-hover: #3d7bf0; --link: #6fb1ee; /* accent-colored TEXT on dark bg — contrast-checked */ --grad-a: #4f8dff; --grad-b: #1f55c8; --on-accent: #ffffff; --status-todo: #64748b; --status-progress: #2f6fed; --status-done: #2fa36b; --success: #4fd18c; --success-bg: #132a1e; --success-border: #1f4530; --warning: #f0a93e; --warning-bg: #2a2210; --warning-border: #4a3a16; --danger: #ff7a7a; /* text-safe red */ --danger-solid: #e5484d; /* filled badge red */ --danger-bg: #2b1616; --danger-border: #4a2323; /* Type scale — fluid, one considered scale for the whole site */ --fs-2xs: 0.75rem; /* 12 */ --fs-xs: 0.8125rem; /* 13 */ --fs-sm: 0.9375rem; /* 15 */ --fs-base: 1rem; /* 16 */ --fs-md: 1.125rem; /* 18 */ --fs-lg: 1.375rem; /* 22 */ --fs-xl: clamp(1.5rem, 1.35rem + 0.8vw, 1.875rem); /* 24 → 30, section h2 */ --fs-2xl: clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem); /* 30 → 44, big headings */ --fs-hero: clamp(2.1rem, 1.6rem + 2.6vw, 3.4rem); /* 34 → 54, hero h1 */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.65; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Arial Hebrew", "Noto Sans Hebrew", Arial, Helvetica, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Cascadia Mono", monospace; /* Spacing — 8px grid */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 3rem; /* 48 */ --sp-8: 4rem; /* 64 */ --sp-9: 6rem; /* 96 */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-full: 999px; --shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.28); --shadow-md: 0 8px 28px 0 rgba(0, 0, 0, 0.34); --shadow-bubble: 0 3px 9px 0 rgba(0, 0, 0, 0.45); --container-w: 1180px; --container-pad: clamp(20px, 5vw, 48px); --grad-accent: linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 100%); color-scheme: dark; } /* ---------- Reset ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* No overflow-x/height tricks on html or body: either one forces body into its OWN scrolling box (CSSOM overflow interop) which breaks the sticky header's containing block. Horizontal overflow is prevented at the source instead (min-width:0 on flex/grid children, fluid widths, no fixed pixel widths wider than the smallest supported viewport). */ body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html[dir="rtl"] body { direction: rtl; } /* i18n FOUC guard: index.html's head script sets before this stylesheet's first paint opportunity, but the actual TEXT swap (assets/ strings.js applied by assets/app.js) only happens once app.js runs at the end of . This external stylesheet is render-blocking, so the rule below keeps body invisible until app.js flips the ready flag right after it finishes applying strings — no flash of the other language's text. */ html:not([data-i18n-ready]) body { visibility: hidden; } img, svg { display: block; max-width: 100%; } h1, h2, h3, h4, p, figure, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } button { font: inherit; color: inherit; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } input, textarea, select { font: inherit; color: inherit; } h1, h2, h3 { line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.01em; } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-md); } .container { max-width: var(--container-w); margin-inline: auto; padding-inline: var(--container-pad); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; inset-inline-start: var(--sp-4); z-index: 1000; background: var(--accent); color: var(--on-accent); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); transition: top 0.15s ease-out; } .skip-link:focus { top: var(--sp-3); text-decoration: none; } /* Force-LTR utility for numbers / urls / emails / code inside Hebrew flow */ .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* Visible, deliberate focus ring everywhere — never suppressed without replacement */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2.5px solid var(--grad-a); outline-offset: 3px; border-radius: 4px; } /* ---------- Buttons --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0.85em 1.4em; border-radius: var(--radius-md); border: 1px solid transparent; font-weight: 600; font-size: var(--fs-sm); cursor: pointer; text-decoration: none; transition: background-color 0.15s ease-out, border-color 0.15s ease-out, transform 0.1s ease-out; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-hover); text-decoration: none; } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn-ghost:hover { background: var(--surface-2); text-decoration: none; } .btn-outline { background: transparent; color: var(--link); border-color: currentColor; } .btn-outline:hover { background: var(--surface-2); text-decoration: none; } .btn-sm { padding: 0.55em 1em; font-size: var(--fs-xs); border-radius: var(--radius-sm); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Block CTAs get room to wrap to a second line — unlike the compact nowrap buttons elsewhere, these already span the full card width, so a longer label (e.g. the paid plan's billing-note CTA) wrapping is fine, while forcing nowrap here is what pushes narrow viewports into horizontal overflow (grid tracks size to an item's nowrap min-content). */ .btn-block { width: 100%; white-space: normal; } /* ---------- Header ----------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(14, 17, 22, 0.86); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--border-soft); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-3); } .brand { display: flex; align-items: center; gap: var(--sp-2); color: var(--text); } .brand:hover { text-decoration: none; } .brand-mark { width: 32px; height: 32px; flex: none; } .brand-name { font-weight: 700; font-size: var(--fs-md); letter-spacing: -0.01em; } .site-nav { display: flex; align-items: center; gap: var(--sp-6); } .site-nav a { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500; } .site-nav a:hover { color: var(--text); text-decoration: none; } .header-actions { display: flex; align-items: center; gap: var(--sp-3); } /* Language switch — always visible in the header (not tucked inside the collapsible mobile nav), so it's reachable with one Tab stop regardless of menu state. Real elements: work with no JS (full navigation to the shareable per-language URL) and inherit the site-wide :focus-visible ring for free. */ .lang-switch { display: flex; align-items: center; gap: 2px; padding: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-full); flex: none; } .lang-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 5px 9px; border-radius: var(--radius-full); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.02em; color: var(--text-muted); } .lang-btn:hover { color: var(--text); text-decoration: none; } .lang-btn[aria-current="true"] { background: var(--accent); color: var(--on-accent); } .lang-btn[aria-current="true"]:hover { color: var(--on-accent); } .nav-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; } .nav-toggle svg { width: 18px; height: 18px; } @media (max-width: 780px) { .site-nav { position: absolute; inset-inline: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-bottom: 1px solid var(--border-soft); padding: var(--sp-2) var(--container-pad) var(--sp-4); display: none; } .site-nav.is-open { display: flex; } .site-nav a { padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-soft); } .nav-toggle { display: inline-flex; } } @media (max-width: 420px) { /* Brand + lang-switch + hamburger is already a full row at this width; the small header CTA is redundant with the hero's own primary button immediately below the fold, so it's the one thing that gives way. */ .header-actions .btn-primary.btn-sm { display: none; } } /* ---------- Hero -------------------------------------------------------------- */ .hero { padding-block: var(--sp-9) var(--sp-7); } .hero-copy { max-width: 46rem; } .eyebrow { display: inline-block; color: var(--link); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: var(--sp-4); } .hero h1 { font-size: var(--fs-hero); margin-bottom: var(--sp-5); } .hero-sub { font-size: var(--fs-md); color: var(--text-muted); max-width: 40rem; margin-bottom: var(--sp-6); } .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); } .hero-trust { color: var(--text-faint); font-size: var(--fs-xs); } /* ---------- Section scaffolding ------------------------------------------------ */ section { padding-block: var(--sp-8); } .section-head { max-width: 42rem; margin-bottom: var(--sp-6); } .section-head .eyebrow { margin-bottom: var(--sp-3); } .section-sub { color: var(--text-muted); font-size: var(--fs-md); margin-top: var(--sp-3); } .section-alt { background: var(--surface); border-block: 1px solid var(--border-soft); } /* ---------- Demo section --------------------------------------------------------- */ .demo-section { padding-block: var(--sp-7) var(--sp-8); } .demo-hint { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5); } .demo-hint-text { font-size: var(--fs-sm); color: var(--text); font-weight: 500; } .demo-hint-text strong { color: var(--link); } .demo-stage { display: flex; align-items: flex-start; gap: var(--sp-6); flex-wrap: wrap; } @media (max-width: 900px) { .demo-stage { flex-direction: column; align-items: stretch; } } .device { flex: 1 1 420px; min-width: 0; } .device-label { font-size: var(--fs-xs); font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: var(--sp-2); } .device-frame { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow: hidden; } .desktop-frame { min-height: 460px; /* physical (not logical) sides on purpose: this mock represents a real, direction-agnostic Windows screen, independent of the page's own RTL flow */ direction: ltr; } .device[style*="flex-basis"] {} @media (max-width: 480px) { .desktop-frame { min-height: 400px; } } .demo-arrow { flex: 0 0 auto; align-self: center; color: var(--text-faint); width: 40px; } .demo-arrow svg { width: 100%; height: auto; } @media (max-width: 900px) { .demo-arrow { display: none; } } /* Bubble */ .qt-bubble { position: absolute; top: 90px; right: 28px; width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--grad-accent); box-shadow: var(--shadow-bubble); cursor: grab; touch-action: none; display: flex; align-items: center; justify-content: center; padding: 0; transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 5; } .qt-bubble:hover { transform: scale(1.06); } .qt-bubble:active { cursor: grabbing; } .qt-bubble.is-dragging { transition: none; } /* `.qt-bubble` sets its own `display`, which — at equal (0,1,0) specificity — beats the UA stylesheet's `[hidden]{display:none}`, since author rules always win over UA rules. Same fix applies to every custom element below that sets `display` and is also toggled via the `hidden` IDL attribute. */ .qt-bubble[hidden] { display: none; } .qt-bubble-mark { width: 30px; height: 30px; color: var(--on-accent); pointer-events: none; } .qt-bubble-mark svg, .brand-mark svg { display: block; width: 100%; height: 100%; } .qt-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); border: 1.5px solid var(--on-accent); font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; pointer-events: none; } .qt-badge-neutral { background: rgba(255, 255, 255, 0.95); color: var(--grad-b); } .qt-badge-alert { background: var(--danger-solid); color: var(--on-accent); border-color: var(--on-accent); } .qt-badge-alert:not(.is-visible) { display: none; } .qt-badge[hidden] { display: none; } @keyframes qtPulseRing { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.55), var(--shadow-bubble); } 100% { box-shadow: 0 0 0 10px rgba(229, 72, 77, 0), var(--shadow-bubble); } } .qt-bubble.has-news { animation: qtPulseRing 1.6s ease-out 2; } /* Sidebar panel (docked to the mock screen's right edge, like the real app) */ .sidebar-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(252px, 82%); background: var(--surface-2); border-left: 1px solid var(--border); display: flex; flex-direction: column; box-shadow: -12px 0 28px rgba(0, 0, 0, 0.35); animation: slideInFromRight 0.18s ease-out; } @keyframes slideInFromRight { from { transform: translateX(12px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .sidebar-panel[hidden] { display: none; } .sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); } .sidebar-title { font-weight: 700; font-size: var(--fs-sm); } .icon-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; font-size: 16px; line-height: 1; } .icon-btn:hover { background: var(--surface-3); color: var(--text); } .ws-switcher { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) 0; } .ws-circle { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; background: var(--grad-accent); color: var(--on-accent); font-size: 10.5px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: transform 0.12s ease-out, border-color 0.12s ease-out; } .ws-circle:hover { transform: scale(1.08); } .ws-circle.is-active { border-color: var(--on-accent); } .ws-name { padding: var(--sp-2) var(--sp-4) 0; font-size: var(--fs-2xs); color: var(--text-faint); } .sidebar-tabs { display: flex; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4) 0; border-bottom: 1px solid var(--border); } .s-tab { position: relative; background: transparent; border: none; color: var(--text-muted); font-size: var(--fs-2xs); font-weight: 600; padding: var(--sp-2) var(--sp-2) var(--sp-3); cursor: pointer; border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 5px; } .s-tab:hover { color: var(--text); } .s-tab.is-active { color: var(--link); border-bottom-color: var(--link); } .tab-badge { min-width: 15px; height: 15px; padding: 0 4px; border-radius: var(--radius-full); background: var(--danger-solid); color: var(--on-accent); font-size: 9.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .tab-badge[hidden] { display: none; } .s-tab.has-news::after { content: ""; position: absolute; top: 4px; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--danger-solid); } .sidebar-body { flex: 1; overflow-y: auto; padding: var(--sp-3) var(--sp-4); } .s-panel[hidden] { display: none; } .s-empty { color: var(--text-faint); font-size: var(--fs-xs); padding: var(--sp-4) 0; text-align: center; } .task-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-3); animation: fadeIn 0.18s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .task-card + .task-card { margin-top: var(--sp-3); } .task-card-row1 { display: flex; align-items: flex-start; gap: var(--sp-2); } .task-title { font-size: var(--fs-xs); font-weight: 600; line-height: var(--lh-snug); margin: 0; } .task-meta { color: var(--text-faint); font-size: 10.5px; margin-top: var(--sp-2); } .task-status-label { font-size: 10.5px; font-weight: 700; margin-top: var(--sp-2); color: var(--text-muted); } .task-card-actions { margin-top: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .task-card-actions[hidden] { display: none; } .hint-inline { font-size: 10.5px; color: var(--text-faint); } .status-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 3px; flex: none; background: var(--status-todo); } .status-dot.status-progress { background: var(--status-progress); } .status-dot.status-done { background: var(--status-done); } .forward-popover { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--border); } .forward-popover[hidden] { display: none; } .forward-to { font-size: var(--fs-2xs); color: var(--text-muted); margin-bottom: var(--sp-2); } .checkbox-row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2xs); color: var(--text-muted); cursor: pointer; margin-bottom: var(--sp-3); } .checkbox-row input { width: 15px; height: 15px; accent-color: var(--accent); } .forward-popover-actions { display: flex; gap: var(--sp-2); } .sidebar-toast { margin: 0 var(--sp-4) var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-inline-start: 3px solid var(--link); border-radius: var(--radius-sm); font-size: var(--fs-2xs); color: var(--text); animation: fadeIn 0.15s ease-out; } .sidebar-toast[hidden] { display: none; } /* Phone mock */ .phone-frame { min-height: 460px; max-width: 300px; margin-inline: auto; border-radius: 32px; border: 8px solid var(--surface-3); display: flex; flex-direction: column; direction: ltr; } @media (max-width: 480px) { .phone-frame { min-height: 400px; } } .phone-notch { width: 70px; height: 5px; background: var(--surface-3); border-radius: var(--radius-full); margin: var(--sp-2) auto 0; flex: none; } .phone-head { text-align: center; font-size: var(--fs-xs); font-weight: 700; padding: var(--sp-2) 0 var(--sp-3); flex: none; } .phone-body { flex: 1; padding: 0 var(--sp-4) var(--sp-4); overflow-y: auto; } .phone-task-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-4); animation: fadeIn 0.2s ease-out; } .phone-task-card[hidden] { display: none; } .phone-task-from { font-size: 10.5px; color: var(--link); font-weight: 700; margin-bottom: var(--sp-2); } .phone-task-actions { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2); } .phone-task-actions .btn[hidden] { display: none; } /* Reduced motion: strip transforms/animations globally, keep function */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .qt-bubble:hover { transform: none; } } /* ---------- How it works ------------------------------------------------------- */ .how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); counter-reset: step; } @media (max-width: 900px) { .how-steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .how-steps { grid-template-columns: 1fr; } } .how-step { position: relative; padding-inline-start: var(--sp-6); } .how-step-num { position: absolute; inset-inline-start: 0; top: 2px; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--link); font-weight: 700; font-size: var(--fs-sm); display: flex; align-items: center; justify-content: center; } .how-step h3 { margin-bottom: var(--sp-2); font-size: var(--fs-sm); } .how-step p { color: var(--text-muted); font-size: var(--fs-sm); } /* ---------- Fast capture -------------------------------------------------------- */ .capture-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } @media (max-width: 900px) { .capture-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .capture-grid { grid-template-columns: 1fr; } } .capture-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); } .capture-icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4); color: var(--link); } .capture-icon svg { width: 20px; height: 20px; } .capture-card h3 { margin-bottom: var(--sp-2); font-size: var(--fs-sm); } .capture-card p { color: var(--text-muted); font-size: var(--fs-sm); } /* ---------- Feature grid -------------------------------------------------------- */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } @media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .feature-grid { grid-template-columns: 1fr; } } .feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); } .feature-card.is-secondary { background: transparent; } .feature-icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4); color: var(--link); } .feature-icon svg { width: 20px; height: 20px; } .feature-card h3 { margin-bottom: var(--sp-2); } .feature-card p { color: var(--text-muted); font-size: var(--fs-sm); } /* Mini illustrative dashboard bars (tags-as-projects) */ .mini-dashboard { margin-top: var(--sp-4); } .mini-dashboard-label { font-size: var(--fs-2xs); color: var(--text-faint); margin-bottom: var(--sp-2); } .mini-bar-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); } .mini-bar-name { width: 72px; flex: none; font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mini-bar-track { flex: 1; height: 8px; background: var(--surface-2); border-radius: var(--radius-full); overflow: hidden; } .mini-bar-fill { display: block; height: 100%; border-radius: var(--radius-full); background: var(--accent); } /* ---------- AI section ----------------------------------------------------------- */ .ai-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-7); align-items: center; } @media (max-width: 900px) { .ai-layout { grid-template-columns: 1fr; } } .ai-copy p { color: var(--text-muted); font-size: var(--fs-md); margin-bottom: var(--sp-4); } .ai-copy .section-head { margin-bottom: var(--sp-4); } .ai-config { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-muted); margin-top: var(--sp-2); } .chat-mock { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--sp-5); box-shadow: var(--shadow-md); } .chat-mock-head { display: flex; align-items: center; gap: var(--sp-2); padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--border); color: var(--text-faint); font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .chat-mock-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); } .chat-bubble { max-width: 88%; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); font-size: var(--fs-sm); margin-bottom: var(--sp-3); } .chat-bubble.from-user { background: var(--accent); color: var(--on-accent); margin-inline-start: auto; border-end-end-radius: 4px; } .chat-bubble.from-qt { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-end-start-radius: 4px; } .chat-bubble.from-qt .task-title { font-size: var(--fs-xs); } .chat-bubble.from-qt .task-meta { margin-top: var(--sp-1); } /* ---------- Enterprise / on-prem -------------------------------------------------- */ .enterprise-panel { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6); align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--sp-6); } @media (max-width: 720px) { .enterprise-panel { grid-template-columns: 1fr; text-align: start; } } .enterprise-panel p { color: var(--text-muted); margin-top: var(--sp-3); max-width: 42rem; } .enterprise-list { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); } .enterprise-list li { display: flex; align-items: flex-start; gap: var(--sp-2); color: var(--text-muted); font-size: var(--fs-sm); } .enterprise-list svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--success); } /* ---------- Pricing ---------------------------------------------------------------- */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } } .price-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-5); display: flex; flex-direction: column; } .price-card.is-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); position: relative; } .price-card-badge { position: absolute; top: -12px; inset-inline-start: var(--sp-5); background: var(--accent); color: var(--on-accent); font-size: var(--fs-2xs); font-weight: 700; padding: 3px 10px; border-radius: var(--radius-full); } .price-card h3 { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 600; } .price-amount { display: flex; align-items: baseline; gap: var(--sp-1); margin-block: var(--sp-3) var(--sp-2); } .price-amount .num { font-size: var(--fs-2xl); font-weight: 700; } .price-amount .per { color: var(--text-faint); font-size: var(--fs-xs); } .price-desc { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-5); } .price-features { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-6); flex: 1; } .price-features li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text); } .price-features svg { flex: none; width: 15px; height: 15px; margin-top: 4px; color: var(--success); } .price-note { color: var(--text-faint); font-size: var(--fs-2xs); line-height: var(--lh-snug); margin-bottom: var(--sp-4); } /* ---------- Registration form ------------------------------------------------------- */ .register-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-7); } @media (max-width: 860px) { .register-layout { grid-template-columns: 1fr; } } .register-note { background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning); border-radius: var(--radius-md); padding: var(--sp-4); font-size: var(--fs-sm); margin-top: var(--sp-5); } .register-note strong { color: var(--warning); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--sp-6); } @media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; padding: var(--sp-5); } } .field { display: flex; flex-direction: column; gap: var(--sp-2); } .field.span-2 { grid-column: 1 / -1; } .field label { font-size: var(--fs-xs); font-weight: 600; color: var(--text); } .field .optional { color: var(--text-faint); font-weight: 400; } .field input, .field select, .field textarea { background: var(--field); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-3); font-size: var(--fs-sm); color: var(--text); width: 100%; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); } .field textarea { resize: vertical; min-height: 96px; } /* Email/phone fields force LTR character flow (numbers/emails always read left-to-right) independent of page language, but WHERE that text sits inside the field must still follow the page's own direction — hugging the right edge in Hebrew's RTL form, the left edge in English's LTR one. That's a page-direction concern, not the field's own (forced-ltr) direction, so it's keyed off html[dir] rather than baked into .ltr. */ .field-ltr-input { text-align: right; } html[dir="ltr"] .field-ltr-input { text-align: left; } .form-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); } .form-status { font-size: var(--fs-xs); color: var(--success); } .form-status[hidden] { display: none; } .form-hint { color: var(--text-faint); font-size: var(--fs-2xs); } /* ---------- Footer --------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border-soft); padding-block: var(--sp-7); background: var(--surface); } .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--sp-6); } @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } } .footer-brand { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); } .footer-brand .brand-mark { width: 26px; height: 26px; } .footer-brand span { font-weight: 700; } .footer-col h4 { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-faint); margin-bottom: var(--sp-3); } .footer-col ul { display: flex; flex-direction: column; gap: var(--sp-2); } .footer-col a { color: var(--text-muted); font-size: var(--fs-sm); } .footer-col a:hover { color: var(--link); } .footer-status { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); } .status-led { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); flex: none; } .status-led.is-ok { background: var(--success); } .status-led.is-bad { background: var(--danger-solid); } .footer-bottom { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--border-soft); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); color: var(--text-faint); font-size: var(--fs-2xs); } /* ---------- Small helpers ------------------------------------------------------------- */ .text-muted { color: var(--text-muted); } .mt-0 { margin-top: 0; }