/* ========================================================================= Magnet-Me website — shared design system. Inspired by test-magnetme.teamelephant.me: - coral accent (#f05858 — was magenta #E11D74 in initial rollout) - white background, generous whitespace - bold sans-serif headings, friendly body copy - numbered process steps, photo-led sections - rounded buttons, card-based content Single source of truth for every page (index, features, pricing, faq, activate, ambassador). Edit a token here and every page picks it up. ========================================================================= */ :root { /* Palette */ --bg: #FFFFFF; --surface: #FAFAFA; --surface-alt: #F5F5F7; --border: #E5E7EB; --border-strong: #D1D5DB; --fg: #1A1A1A; --fg-soft: #374151; --muted: #6B7280; --muted-strong: #4B5563; /* Coral brand (was magenta #E11D74; swapped to #f05858 2026-05-17 — warmer, less saturated, more friendly. The four shades below stay in the same relative role so existing components don't need re-tuning: --accent main fill / button / link --accent-hover pressed/hover state, ~10% darker --accent-soft light tint, used for icon backgrounds and pills --accent-strong dark, used for text on accent-soft backgrounds */ --accent: #f05858; --accent-hover: #d63e3e; --accent-soft: #ffe8e8; --accent-strong: #b13030; /* Status */ --ok: #047857; --ok-soft: #DCFCE7; --warn: #B45309; --warn-soft: #FEF3C7; --err: #B91C1C; --err-soft: #FEE2E2; --info-soft: #E8F0FE; /* Shadows + radii */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04); --shadow-lg: 0 4px 6px rgba(15, 23, 42, 0.06), 0 20px 40px rgba(15, 23, 42, 0.08); --radius-sm: 6px; --radius: 12px; --radius-lg: 20px; --radius-pill: 999px; /* Spacing scale (4px base) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; /* Inter for Latin, Heebo for Hebrew — both Google Fonts, declared in . The browser uses Heebo only for codepoints it covers (Hebrew range), so mixed-language text (e.g. "Magnet-Me רץ על המחשב") renders Hebrew in Heebo and Latin in Inter automatically. */ font-family: "Inter", "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 1.6; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; } /* RTL line-height tweak — Hebrew glyphs read denser without the extra air. */ html[dir="rtl"] body { line-height: 1.65; } /* Pre-paint FOUC guard — the inline script adds .lang-hidden to when the detected language is Hebrew, so we suppress paint until i18n.js has swapped the strings (avoids the "flash of English LTR" before RTL kicks in). English users never hit this rule and paint immediately. */ html.lang-hidden body { visibility: hidden; } a { color: var(--accent); text-decoration: none; transition: color 120ms ease; } a:hover { color: var(--accent-hover); } img { max-width: 100%; display: block; } /* ------------------------------------------------------------------------- Typography ------------------------------------------------------------------------- */ h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } h1 { font-size: clamp(36px, 6vw, 64px); } h2 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.015em; } h3 { font-size: clamp(20px, 2.5vw, 26px); letter-spacing: -0.01em; } h4 { font-size: 18px; letter-spacing: -0.005em; } p { margin: 0; } .lede { font-size: clamp(17px, 1.8vw, 20px); color: var(--muted-strong); line-height: 1.55; max-width: 60ch; } .muted { color: var(--muted); } .small { font-size: 14px; } .tiny { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; color: var(--muted); } .eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-3); } /* ------------------------------------------------------------------------- Layout ------------------------------------------------------------------------- */ .container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--sp-5); } .section { padding: var(--sp-9) 0; } .section--tight { padding: var(--sp-7) 0; } .section--alt { background: var(--surface); } .section--accent { background: var(--accent-soft); } .stack > * + * { margin-top: var(--sp-4); } .stack-sm > * + * { margin-top: var(--sp-2); } .stack-lg > * + * { margin-top: var(--sp-6); } .row { display: grid; gap: var(--sp-6); } .row-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .row-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .row-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .center { text-align: center; } .section-head { max-width: 720px; margin: 0 auto var(--sp-7); text-align: center; } .section-head .lede { margin-left: auto; margin-right: auto; } /* ------------------------------------------------------------------------- Top navigation ------------------------------------------------------------------------- */ .topnav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .topnav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; color: var(--fg); } .brand:hover { color: var(--fg); } /* Brand logo image — the wordmark + magnet horseshoe. Caps the height so it sits at the same baseline as the nav items regardless of source resolution. The footer brand uses a slightly smaller render. */ .brand-logo { display: block; height: 36px; width: auto; } .site-footer .brand-logo { height: 28px; } /* Legacy text-mark — kept in CSS for any place that still references .brand-mark (none in production HTML; safe to delete later). */ .brand-mark { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--accent) 0%, #ff8c8c 100%); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 16px; box-shadow: var(--shadow-sm); } .nav-links { display: flex; align-items: center; gap: var(--sp-6); list-style: none; margin: 0; padding: 0; } .nav-links a { color: var(--fg-soft); font-weight: 500; font-size: 15px; padding: var(--sp-2) 0; border-bottom: 2px solid transparent; transition: color 120ms ease, border-color 120ms ease; } .nav-links a:hover { color: var(--accent); } .nav-links a.active { color: var(--accent); border-bottom-color: var(--accent); } .nav-cta { display: inline-flex; align-items: center; gap: var(--sp-3); } .nav-toggle { display: none; background: none; border: 0; font-size: 22px; cursor: pointer; padding: var(--sp-2); } /* Mobile nav */ @media (max-width: 880px) { .nav-toggle { display: inline-flex; } .nav-links { display: none; position: absolute; left: 0; right: 0; top: 72px; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--border); padding: var(--sp-4); box-shadow: var(--shadow); } .nav-links.open { display: flex; } .nav-links a { padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); } .nav-links a:last-child { border-bottom: 0; } .nav-cta .btn-secondary { display: none; } } /* ------------------------------------------------------------------------- Buttons ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 14px 28px; border-radius: var(--radius-sm); font-weight: 600; font-size: 15px; font-family: inherit; cursor: pointer; border: 0; transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease; text-decoration: none; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(240, 88, 88, 0.32); } .btn-primary:hover { background: var(--accent-hover); color: #fff; } .btn-secondary { background: #fff; color: var(--fg); border: 1px solid var(--border-strong); } .btn-secondary:hover { background: var(--surface); } .btn-ghost { background: transparent; color: var(--accent); padding-left: var(--sp-3); padding-right: var(--sp-3); } .btn-ghost:hover { color: var(--accent-hover); } .btn-lg { padding: 18px 36px; font-size: 17px; } .btn-sm { padding: 10px 18px; font-size: 14px; } .btn-full { width: 100%; } /* ------------------------------------------------------------------------- Hero ------------------------------------------------------------------------- */ .hero { position: relative; padding: var(--sp-9) 0 var(--sp-8); overflow: hidden; } .hero::before { /* Soft pink wash radiating from upper-right */ content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 800px 600px at 90% -10%, var(--accent-soft) 0%, transparent 60%), radial-gradient(ellipse 600px 400px at -10% 100%, #fff0f0 0%, transparent 60%); z-index: -1; } .hero-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-8); align-items: center; } .hero h1 { margin-bottom: var(--sp-4); } .hero h1 .accent { color: var(--accent); } .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); } .hero-meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-5); font-size: 14px; color: var(--muted); } .hero-meta .pill { display: inline-flex; align-items: center; gap: var(--sp-2); } .hero-art { position: relative; aspect-ratio: 1 / 1; max-width: 480px; margin-left: auto; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--accent) 0%, #ff8c8c 60%, #ffb8b8 100%); box-shadow: var(--shadow-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; } .hero-art .hero-art-inner { width: 76%; height: 76%; background: #fff; border-radius: var(--radius); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; padding: 8px; transform: rotate(-4deg); box-shadow: var(--shadow); } .hero-art .magnet { border-radius: 8px; background: linear-gradient(135deg, #fde2ef 0%, #fbc8de 100%); position: relative; } .hero-art .magnet:nth-child(2n) { background: linear-gradient(135deg, #ffe9d6 0%, #ffd0a5 100%); } .hero-art .magnet:nth-child(3n) { background: linear-gradient(135deg, #d9eaff 0%, #b6d2ff 100%); } .hero-art .magnet:nth-child(5) { background: linear-gradient(135deg, var(--accent) 0%, #ff8c8c 100%); } @media (max-width: 880px) { .hero-inner { grid-template-columns: 1fr; gap: var(--sp-6); } .hero-art { margin: 0 auto; max-width: 360px; } } /* ------------------------------------------------------------------------- Feature cards ------------------------------------------------------------------------- */ .feature { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-5); transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } .feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent-soft); } .feature-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: var(--sp-3); } .feature h3 { margin-bottom: var(--sp-2); } .feature p { color: var(--muted-strong); font-size: 15px; } /* ------------------------------------------------------------------------- Numbered process steps ------------------------------------------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-5); counter-reset: step; } .step { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-6) var(--sp-5); position: relative; counter-increment: step; } .step::before { content: counter(step, decimal-leading-zero); position: absolute; top: -18px; left: var(--sp-5); font-size: 14px; font-weight: 800; letter-spacing: 0.06em; background: var(--accent); color: #fff; padding: 6px 14px; border-radius: var(--radius-pill); box-shadow: 0 4px 12px rgba(240, 88, 88, 0.28); } .step h3 { margin: var(--sp-2) 0; } .step p { color: var(--muted-strong); font-size: 15px; } /* ------------------------------------------------------------------------- Pricing cards ------------------------------------------------------------------------- */ .pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-5); max-width: 1080px; margin: 0 auto; } .plan { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-6); display: flex; flex-direction: column; transition: transform 160ms ease, box-shadow 160ms ease; } .plan:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .plan h3 { margin-bottom: var(--sp-2); } .plan .price { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; margin: var(--sp-3) 0; color: var(--fg); } .plan .price .currency { font-size: 20px; color: var(--muted); margin-right: 4px; vertical-align: top; } .plan .price .period { font-size: 14px; color: var(--muted); font-weight: 500; } .plan ul { list-style: none; padding: 0; margin: var(--sp-4) 0; flex: 1; } .plan ul li { padding: 8px 0 8px 28px; position: relative; font-size: 15px; color: var(--fg-soft); } .plan ul li::before { content: "✓"; position: absolute; left: 0; top: 8px; width: 20px; height: 20px; background: var(--accent-soft); color: var(--accent); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; } .plan .buy-target { margin-top: auto; } .plan .pp-buttons { min-height: 50px; } .plan.featured { border: 2px solid var(--accent); position: relative; box-shadow: var(--shadow-lg); } .plan .badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--radius-pill); box-shadow: 0 4px 12px rgba(240, 88, 88, 0.28); } /* ------------------------------------------------------------------------- FAQ accordion ------------------------------------------------------------------------- */ .faq { max-width: 760px; margin: 0 auto; } .faq-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: var(--sp-3); overflow: hidden; } .faq-item summary { list-style: none; cursor: pointer; padding: var(--sp-4) var(--sp-5); font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-size: 24px; color: var(--accent); font-weight: 400; transition: transform 200ms ease; } .faq-item[open] summary::after { content: "−"; } .faq-item .answer { padding: 0 var(--sp-5) var(--sp-5); color: var(--muted-strong); font-size: 15px; line-height: 1.65; } /* Tighter variant used on the flat single-section FAQ page (was 5 grouped sections — flattened per request). Slimmer rows, smaller font, less inner padding so the dense list reads scannable. */ .faq--tight .faq-item { margin-bottom: var(--sp-2); border-radius: var(--radius-sm); } .faq--tight .faq-item summary { padding: var(--sp-3) var(--sp-4); font-size: 15px; } .faq--tight .faq-item summary::after { font-size: 20px; } .faq--tight .faq-item .answer { padding: 0 var(--sp-4) var(--sp-4); font-size: 14px; line-height: 1.6; } /* ------------------------------------------------------------------------- Video tutorial grid (tutorials.html) ------------------------------------------------------------------------- Cards hold a responsive 16:9 iframe + a title + a short description. Grid is auto-fit so adding a 7th/8th card just flows in. */ .video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-5); } .video-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 160ms ease, box-shadow 160ms ease; } .video-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; /* shows briefly while the iframe loads */ } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-card h3 { margin: var(--sp-4) var(--sp-5) var(--sp-2); font-size: 18px; } .video-card p { margin: 0 var(--sp-5) var(--sp-5); color: var(--muted-strong); font-size: 14px; } /* "Mac coming soon" mini-pill. Lives next to download CTAs. */ .mac-soon-pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--surface-alt); color: var(--muted-strong); font-size: 12px; font-weight: 600; margin-left: var(--sp-3); } html[dir="rtl"] .mac-soon-pill { margin-left: 0; margin-right: var(--sp-3); } /* ------------------------------------------------------------------------- Forms ------------------------------------------------------------------------- */ label { display: block; font-weight: 600; font-size: 13px; margin-bottom: var(--sp-2); color: var(--fg); } input[type="text"], input[type="email"], input[type="password"], textarea, select { width: 100%; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 15px; font-family: inherit; background: #fff; transition: border-color 120ms ease, box-shadow 120ms ease; } input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .field { margin-bottom: var(--sp-4); } .field .hint { color: var(--muted); font-size: 12px; margin-top: 4px; } .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); } .field-row > .field { margin-bottom: 0; } /* ------------------------------------------------------------------------- Card primitive (used by activate / ambassador pages) ------------------------------------------------------------------------- */ .card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-6); box-shadow: var(--shadow-sm); } .card + .card { margin-top: var(--sp-4); } .card h2 { margin-bottom: var(--sp-2); } .card .muted { margin-bottom: var(--sp-4); } /* ------------------------------------------------------------------------- Alerts + pills ------------------------------------------------------------------------- */ .alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: var(--sp-3); border: 1px solid transparent; } .alert.error { background: var(--err-soft); color: #7A1F1F; border-color: #FCA5A5; } .alert.warn { background: var(--warn-soft); color: #92400E; border-color: #FCD34D; } .alert.success { background: var(--ok-soft); color: #155F2C; border-color: #86EFAC; } .alert.info { background: var(--info-soft); color: #1B3A66; border-color: #B6CDF7; } .pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; } .pill-accent { background: var(--accent-soft); color: var(--accent-strong); } .pill-ok { background: var(--ok-soft); color: var(--ok); } .pill-warn { background: var(--warn-soft); color: var(--warn); } .pill-err { background: var(--err-soft); color: var(--err); } .pill-muted { background: var(--surface-alt); color: var(--muted-strong); } /* ------------------------------------------------------------------------- Testimonials ------------------------------------------------------------------------- */ .testimonial { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-6); position: relative; } .testimonial::before { content: "“"; position: absolute; top: -16px; left: var(--sp-4); font-family: Georgia, serif; font-size: 80px; line-height: 1; color: var(--accent); opacity: 0.18; } .testimonial p { font-size: 16px; color: var(--fg-soft); line-height: 1.65; } .testimonial .who { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); } .testimonial .avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, #ff8c8c 100%); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; } .testimonial .who strong { display: block; font-size: 14px; } .testimonial .who .meta { font-size: 12px; color: var(--muted); } /* ------------------------------------------------------------------------- CTA banner ------------------------------------------------------------------------- */ .cta-banner { background: linear-gradient(135deg, var(--accent) 0%, #ff8c8c 100%); color: #fff; border-radius: var(--radius-lg); padding: var(--sp-7) var(--sp-6); text-align: center; margin: 0 auto; max-width: 980px; box-shadow: var(--shadow-lg); } .cta-banner h2 { color: #fff; margin-bottom: var(--sp-3); } .cta-banner .lede { color: rgba(255,255,255,0.92); margin: 0 auto var(--sp-5); } .cta-banner .btn-primary { background: #fff; color: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,0.18); } .cta-banner .btn-primary:hover { background: #fff0f0; color: var(--accent); } .cta-banner .btn-secondary { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.4); } .cta-banner .btn-secondary:hover { background: rgba(255,255,255,0.22); } /* ------------------------------------------------------------------------- Footer ------------------------------------------------------------------------- */ .site-footer { background: var(--surface); border-top: 1px solid var(--border); padding: var(--sp-8) 0 var(--sp-6); color: var(--muted-strong); font-size: 14px; } .site-footer h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg); margin-bottom: var(--sp-3); } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer ul li { padding: 4px 0; } .site-footer a { color: var(--muted-strong); } .site-footer a:hover { color: var(--accent); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); margin-bottom: var(--sp-6); } .footer-bottom { border-top: 1px solid var(--border); padding-top: var(--sp-4); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); font-size: 13px; color: var(--muted); } @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } } /* ------------------------------------------------------------------------- Stepper (used on activate page) ------------------------------------------------------------------------- */ .stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin: 0 0 var(--sp-6); } .stepper .step-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); font-size: 13px; color: var(--muted); } .stepper .step-item strong { display: block; color: var(--fg); margin-bottom: 2px; font-size: 14px; } .stepper .step-item.active { border-color: var(--accent); } .stepper .step-item.active strong { color: var(--accent); } @media (max-width: 720px) { .stepper { grid-template-columns: repeat(2, 1fr); } } /* ------------------------------------------------------------------------- Tables (admin-ish dashboards e.g. ambassador) ------------------------------------------------------------------------- */ .grid-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; font-size: 14px; } .grid-table th, .grid-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); } .grid-table th { background: var(--surface); font-weight: 700; color: var(--muted-strong); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; } .grid-table tr:last-child td { border-bottom: 0; } .mono { font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 12px; } /* ------------------------------------------------------------------------- Stats grid (ambassador dashboard) ------------------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); } .stat { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); } .stat .label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; } .stat .value { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; } .stat.highlight { background: var(--accent-soft); border-color: var(--accent-soft); } .stat.highlight .value { color: var(--accent); } /* ------------------------------------------------------------------------- Misc helpers ------------------------------------------------------------------------- */ .divider { height: 1px; background: var(--border); margin: var(--sp-7) 0; border: 0; } .kicker { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px 14px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-strong); font-size: 13px; font-weight: 600; } .shadow-soft { box-shadow: var(--shadow); } /* ------------------------------------------------------------------------- Event-photo strip (homepage social-proof row) ------------------------------------------------------------------------- */ .event-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); } .event-strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); transition: transform 200ms ease; } .event-strip img:hover { transform: translateY(-3px); } @media (max-width: 880px) { .event-strip { grid-template-columns: repeat(3, 1fr); } .event-strip img:nth-child(4), .event-strip img:nth-child(5) { display: none; } } /* ------------------------------------------------------------------------- Split row — text + screenshot, alternating left/right. Used by the homepage features section since features.html was folded in. ------------------------------------------------------------------------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: center; margin: var(--sp-8) 0; } .split--reverse .split-image { order: -1; } .split-text .eyebrow { display: inline-block; margin-bottom: var(--sp-3); } .split-text h3 { font-size: clamp(24px, 3vw, 32px); margin-bottom: var(--sp-3); } .split-text p { color: var(--muted-strong); margin-bottom: var(--sp-4); font-size: 16px; } .split-image { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--surface); } .split-image img { display: block; width: 100%; height: auto; } @media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: var(--sp-5); margin: var(--sp-6) 0; } .split--reverse .split-image { order: 0; } } /* Bulleted feature list inside .split-text */ .feature-list { list-style: none; padding: 0; margin: 0; } .feature-list li { padding: 6px 0 6px 26px; position: relative; color: var(--fg-soft); font-size: 15px; } .feature-list li::before { content: "✓"; position: absolute; left: 0; top: 6px; width: 18px; height: 18px; background: var(--accent-soft); color: var(--accent); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; } html[dir="rtl"] .feature-list li { padding: 6px 26px 6px 0; } html[dir="rtl"] .feature-list li::before { left: auto; right: 0; } /* Logo strip */ .logo-strip { display: flex; align-items: center; justify-content: space-around; gap: var(--sp-6); flex-wrap: wrap; opacity: 0.8; padding: var(--sp-5) 0; } .logo-strip .logo-placeholder { font-weight: 700; font-size: 18px; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; } /* ------------------------------------------------------------------------- Language toggle (lives in the top nav) ------------------------------------------------------------------------- A tiny EN / עב pill pair. Active language is filled; inactive is ghost. Click handler lives in i18n.js — we just style. */ .lang-toggle { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); overflow: hidden; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; user-select: none; } .lang-toggle button { border: 0; background: transparent; color: var(--muted); padding: 6px 10px; cursor: pointer; font-family: inherit; font-weight: inherit; font-size: inherit; letter-spacing: inherit; transition: background 120ms ease, color 120ms ease; } .lang-toggle button:hover { color: var(--fg); } .lang-toggle button.active { background: var(--accent); color: #fff; } /* ------------------------------------------------------------------------- RTL adjustments ------------------------------------------------------------------------- Most layout already flips automatically because we use flex/grid + CSS logical properties. The block below is for the few places where a visual element doesn't translate cleanly (icons + arrows whose direction is meaningful, mixed-direction inputs, etc.) */ /* Flip directional arrows in CTAs ("→" in EN should be "←" in HE). We swap the visual via writing-mode but it's simpler to maintain Hebrew copy with the correct arrow inline, so this rule intentionally does NOTHING — translations include the arrow character. Kept as documentation. */ /* Magenta gradient hero art — the art panel sits on the right in LTR. In RTL flip it to the left so the headline still reads first. The hero layout is a 2-col grid; flipping is automatic via grid auto flow. */ /* Form inputs always read LTR for emails / device-ids / card numbers, even when the surrounding page is RTL. Force dir on those specific inputs to avoid mixed-bidi confusion. */ html[dir="rtl"] input[type="email"], html[dir="rtl"] input[name="deviceId"], html[dir="rtl"] input[name="cardLast4"], html[dir="rtl"] input[name="ambassadorCode"], html[dir="rtl"] input[autocomplete="cc-number"] { direction: ltr; text-align: left; } /* Step pills (numbered badges on .step::before) — the absolute positioning uses `left:` which doesn't flip with dir. Add the RTL mirror. */ html[dir="rtl"] .step::before { left: auto; right: var(--sp-5); } /* FAQ accordion "+" / "−" pseudo-element — visually neutral, no fix needed. */ /* Hero meta pills, footer columns — grids/flex flip naturally with dir. */ /* The top-bar brand logo is text + a small square mark. In RTL the mark should appear to the right of the wordmark (since that's the "start" in RTL reading direction); flex's gap behaviour handles this for free because flex-direction stays `row` and `start` is dir-aware. No override needed. */ /* Stat-card right-edge polish — the stats grid auto-flips fine. */ /* ========================================================================= Homepage-specific styles (2026-05-20 redesign) ------------------------------------------------------------------------- All classes namespaced .home-* to avoid colliding with the shared design system above. Inspired by the photo-led, event-anchored aesthetic of the sister event-service site — warm, generous whitespace, big type, image-anchored sections. ========================================================================= */ /* --- Hero with photo right, copy left ---------------------------------- Bottom padding tightened 2026-05-20 — previously sp-9 stacked with the next section's sp-9 top padding which left a huge empty band between the hero CTA and the billing-timeline header on a 14" laptop. */ .home-hero { position: relative; padding: var(--sp-7) 0 var(--sp-4); overflow: hidden; } .home-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 900px 700px at 90% -10%, var(--accent-soft) 0%, transparent 60%), radial-gradient(ellipse 600px 500px at -10% 110%, #fff0f0 0%, transparent 60%); z-index: -1; } .home-hero-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-8); align-items: center; } .home-hero h1 { margin-bottom: var(--sp-4); font-size: clamp(36px, 5.6vw, 60px); } .home-hero h1 .home-accent { color: var(--accent); } .home-hero .lede { margin-bottom: var(--sp-5); max-width: 56ch; } .home-hero-photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 5 / 6; background: var(--surface); } .home-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 880px) { .home-hero-inner { grid-template-columns: 1fr; gap: var(--sp-6); } .home-hero-photo { order: -1; aspect-ratio: 4 / 3; max-width: 520px; margin: 0 auto; } } /* --- The 44-day callout (the page's MVP element) ----------------------- Layout rebuilt 2026-05-20 for a cleaner three-row grid: Row 1: [ 14 ] no-card-needed line Row 2: [+30 ] card-on-file line ── horizontal rule with "= total" label centred over it ── Row 3: large "44 days" stacked over the fine-print line so the small text doesn't have to compete for horizontal space with the big number (was wrapping awkwardly in HE/EN). */ .home-callout { border: 2px solid var(--accent); background: linear-gradient(135deg, #fff7f7 0%, var(--accent-soft) 100%); border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-6) var(--sp-5); margin: var(--sp-5) 0 var(--sp-6); box-shadow: 0 12px 32px rgba(240, 88, 88, 0.18); max-width: 560px; } /* Each top row is a 2-col grid: number (fixed-ish width) | text. align-items: center keeps the big numeral visually centred against the wrapped text instead of floating above on its baseline. */ .home-callout-row { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: var(--sp-4); color: var(--fg); font-size: 15px; font-weight: 600; line-height: 1.45; } .home-callout-row + .home-callout-row { margin-top: var(--sp-3); } .home-callout-num { font-size: clamp(32px, 4vw, 40px); font-weight: 800; color: var(--accent); letter-spacing: -0.02em; text-align: center; /* centre regardless of LTR/RTL */ line-height: 1; } /* Stronger divider — gradient fade-in/out instead of flat 1px line */ .home-callout-divider { height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(240, 88, 88, 0.45) 20%, rgba(240, 88, 88, 0.45) 80%, transparent 100%); margin: var(--sp-5) 0 var(--sp-4); border: 0; } /* Total row — stack the big "44" above the small print so neither has to wrap horizontally. */ .home-callout-total { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); } .home-callout-total-num { font-size: clamp(56px, 8vw, 80px); font-weight: 800; color: var(--accent); letter-spacing: -0.03em; line-height: 0.95; } .home-callout-total-label { font-size: 14px; font-weight: 600; color: var(--fg-soft); letter-spacing: 0.01em; line-height: 1.45; max-width: 36ch; /* keeps the line short enough to read as one block */ } /* --- How-it-works (4 numbered, photo-anchored steps) ------------------- */ .home-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } .home-step { display: flex; flex-direction: column; } .home-step-img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface); box-shadow: var(--shadow); margin-bottom: var(--sp-4); } .home-step-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 240ms ease; } .home-step:hover .home-step-img img { transform: scale(1.04); } .home-step-num { font-size: 32px; font-weight: 800; color: var(--accent); letter-spacing: -0.02em; line-height: 1; margin-bottom: var(--sp-2); } .home-step h3 { font-size: 20px; margin-bottom: var(--sp-2); } .home-step p { color: var(--muted-strong); font-size: 15px; line-height: 1.55; } @media (max-width: 880px) { .home-steps { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } } @media (max-width: 540px) { .home-steps { grid-template-columns: 1fr; } } /* --- Three feature tiles ----------------------------------------------- */ .home-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } .home-feature { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-6); transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } .home-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent-soft); } .home-feature-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: var(--sp-4); } .home-feature h3 { font-size: 20px; margin-bottom: var(--sp-2); } .home-feature p { color: var(--muted-strong); font-size: 15px; line-height: 1.6; } @media (max-width: 880px) { .home-features { grid-template-columns: 1fr; gap: var(--sp-4); } } /* --- Photo-background CTA closer --------------------------------------- */ .home-cta-photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; padding: var(--sp-9) var(--sp-6); text-align: center; color: #fff; background-image: url("assets/hero/birthday-celebration.webp"); background-size: cover; background-position: center; box-shadow: var(--shadow-lg); max-width: 1080px; margin: 0 auto; } .home-cta-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(20, 10, 10, 0.74) 0%, rgba(176, 40, 40, 0.62) 100%); z-index: 0; } .home-cta-photo > * { position: relative; z-index: 1; } .home-cta-photo h2 { color: #fff; font-size: clamp(30px, 4.5vw, 48px); margin-bottom: var(--sp-4); max-width: 22ch; margin-left: auto; margin-right: auto; } .home-cta-photo .lede { color: rgba(255, 255, 255, 0.94); margin: 0 auto var(--sp-6); max-width: 52ch; } .home-cta-photo .btn-primary { background: #fff; color: var(--accent); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); } .home-cta-photo .btn-primary:hover { background: #fff0f0; color: var(--accent); } .home-cta-photo .home-cta-meta { margin-top: var(--sp-5); font-size: 13px; color: rgba(255, 255, 255, 0.86); letter-spacing: 0.04em; } /* --- Pricing card "popular" ribbon for monthly ------------------------- */ .home-popular-ribbon { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--fg); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--radius-pill); } /* --- Pricing card freemium emphasis ------------------------------------ */ .home-plan-free .home-plan-big { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; margin: var(--sp-3) 0; color: var(--accent); } .home-plan-free .home-plan-big .home-plan-sub { font-size: 14px; color: var(--muted); font-weight: 500; display: block; margin-top: 6px; letter-spacing: 0; } /* --- Section eyebrow / centered head re-use --------------------------- */ .home-section-head { max-width: 720px; margin: 0 auto var(--sp-7); text-align: center; } .home-section-head h2 { margin-bottom: var(--sp-3); } .home-section-head .lede { margin: 0 auto; } /* ---- Billing timeline (4 numbered cards) ---- Used on the home page between How-it-works and Features. RTL is automatic because each card stacks number-on-top then heading + body below, with no horizontal directional dependency in the visual order. */ .home-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } .home-timeline-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-5) var(--sp-5); padding-top: calc(var(--sp-6) + 18px); /* room for the floating num badge */ box-shadow: 0 1px 2px rgba(0,0,0,0.04); transition: transform 120ms ease, box-shadow 120ms ease; } .home-timeline-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.08); } .home-timeline-num { position: absolute; top: -18px; inset-inline-end: var(--sp-5); /* right in LTR, left in RTL — auto-flips */ display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 36px; padding: 0 12px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; border-radius: 999px; box-shadow: 0 4px 10px rgba(240, 88, 88, 0.35); } .home-timeline-card h3 { font-size: 18px; font-weight: 700; margin: 0 0 var(--sp-3); color: var(--text); } .home-timeline-card p { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 0; } @media (max-width: 1024px) { .home-timeline { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .home-timeline { grid-template-columns: 1fr; gap: var(--sp-4); } } /* ---- Billing timeline INVERTED palette (2026-05-20) ---- Owner wants the section bg coral, and anything that was previously coral (eyebrow, num badge) flipped to white. Cards stay white with dark text inside so they read clearly against the coral bg. */ #billing-timeline { background: var(--accent); } #billing-timeline .eyebrow { color: #ffe8e8; font-weight: 700; } #billing-timeline h2, #billing-timeline .home-section-head h2 { color: #fff; } #billing-timeline .home-timeline-card { background: #fff; border-color: transparent; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10); } #billing-timeline .home-timeline-num { background: #fff; color: var(--accent); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } #billing-timeline .home-timeline-card h3 { color: var(--text); } #billing-timeline .home-timeline-card p { color: var(--text-muted); } /* ---- Expanded features grid (2026-05-20) ---- 8-tile dense capability grid below the billing timeline. Replaces the older 3-tile home-features (which stays available but we now surface a richer list of concrete app capabilities here). */ .home-feats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } .home-feats-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; } .home-feats-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08); border-color: var(--accent); } .home-feats-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); border-radius: 12px; font-size: 22px; margin-bottom: var(--sp-3); } .home-feats-tile h3 { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 var(--sp-2); } .home-feats-tile p { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); margin: 0; } @media (max-width: 1100px) { .home-feats-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 800px) { .home-feats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .home-feats-grid { grid-template-columns: 1fr; gap: var(--sp-4); } } /* ---- Tutorials CTA banner (2026-05-20) ---- Inline call-to-action between expanded-features and how-it-works, inviting visitors to watch the tutorials. Subtle bg + play-icon CTA. */ .home-tut-cta { background: linear-gradient(135deg, #fff7f7 0%, var(--accent-soft) 100%); border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-7); display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; justify-content: space-between; border: 1px solid var(--accent-soft); } .home-tut-cta-text { flex: 1 1 320px; min-width: 0; } .home-tut-cta-text h3 { font-size: 22px; font-weight: 800; color: var(--text); margin: 0 0 var(--sp-2); } .home-tut-cta-text p { font-size: 15px; color: var(--text-muted); margin: 0; line-height: 1.5; } .home-tut-cta-btn { flex-shrink: 0; } /* ========================================================================= TEMPORARY: Hide everything tutorials-related across the site (2026-06-02). The tutorial videos aren't finished yet — until they are, we don't want visitors clicking nav/footer/CTA links and landing on an empty or half-built page. To re-enable: delete this entire block. No other files need editing. What this rule hides: - The "Tutorials" nav link in the top nav (every page). - The "Tutorials" link in the footer "Product" column (every page). - The full-width "See it in action" CTA section on the homepage. Direct hits to /tutorials are redirected to / via _redirects. ========================================================================= */ .nav-links li:has(> a[href="tutorials"]), .footer-grid li:has(> a[href="tutorials"]), section:has(> .container > .home-tut-cta) { display: none !important; }