/* ============================================================================= Faro — shared site styles (single source of truth) Palette + shared components live at the top. Each page's layout is scoped by a body class so the two families don't collide: → index.html (landing) → testers.html (document layout) → join.html, support.html, feedback.html (centered card) → privacy.html, terms.html, acceptable-use.html Change colors once, here, in :root. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #2d30ff; --card-bg: #0300ad; --text: #FFFFFF; --text-secondary: rgba(255,255,255,0.58); --text-muted: rgba(255,255,255,0.45); --border: rgba(255,255,255,0.10); --input-bg: rgba(255,255,255,0.06); --rainbow: linear-gradient(90deg,#FF3B30,#FF9500,#FFCC00,#34C759,#007AFF,#5856D6,#AF52DE); --accent: #007AFF; --accent-focus: rgba(0,122,255,0.6); --danger: #FF453A; --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif; } html { scroll-behavior: smooth; } body { min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.5; } /* ---- Shared components ---- */ .topbar { height: 3px; background: var(--rainbow); } .container { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 22px; } /* The same nav and footer appear on EVERY page. Both are plain markup rather than being injected by JS, so the site stays static, works without scripts, and each page is independently crawlable. The tradeoff is that a nav change means editing every .html file — keep them in sync. */ nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; gap: 16px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -0.3px; color: var(--text); text-decoration: none; } .brand img { width: 32px; height: 32px; border-radius: 8px; display: block; } .nav-links { display: flex; gap: 22px; align-items: center; } .nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 15px; transition: color 0.2s; } .nav-links a:hover { color: var(--text); } .nav-cta { padding: 9px 17px; background: #fff; color: #1c1fd6 !important; border-radius: 11px; border: none; font-weight: 700; transition: opacity 0.2s; } .nav-cta:hover { opacity: 0.9; } .nav-back { color: var(--text-secondary); text-decoration: none; font-size: 15px; } .nav-back:hover { color: var(--text); } .divider { height: 1.5px; background: var(--rainbow); opacity: 0.5; border-radius: 1px; } .btn { display: inline-block; padding: 14px 26px; border-radius: 12px; font-size: 16px; font-weight: 600; text-decoration: none; transition: opacity 0.2s, transform 0.1s; border: 1.5px solid transparent; cursor: pointer; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--accent); color: #fff; border-color: rgba(255,255,255,0.6); } .btn-secondary { background: rgba(255,255,255,0.06); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: rgba(255,255,255,0.1); } footer { text-align: center; padding: 40px 0 48px; color: var(--text-secondary); font-size: 13px; line-height: 1.8; } footer a { color: var(--text-secondary); text-decoration: none; } footer a:hover { color: var(--text); } .footer-links { margin-bottom: 14px; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } /* Narrow screens: drop the text links but keep the brand and the "Join the Beta" CTA, so the nav never wraps into two lines. Applies to every page family now that the nav is shared (it used to be scoped to .home). */ @media (max-width: 560px) { .nav-links a:not(.nav-cta) { display: none; } .footer-links { gap: 14px; font-size: 12px; } } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================================= Landing — (index.html) ========================================================================== */ .home .container { max-width: 1040px; } /* ---- Hero: two-column (copy + phone mockup) ---- */ .home .hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; padding: 56px 0 44px; } .home .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; margin-bottom: 24px; } .home .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #34C759; box-shadow: 0 0 0 3px rgba(52,199,89,0.25); } .home .hero h1 { font-size: clamp(38px, 5.4vw, 62px); line-height: 1.03; font-weight: 900; letter-spacing: -2px; margin-bottom: 20px; } .home .hero h1 .glow { background: linear-gradient(90deg,#fff,#dfe4ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .home .hero .lede { font-size: 18px; color: var(--text-secondary); max-width: 34ch; margin-bottom: 16px; } .home .noswipe { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text); background: rgba(255,255,255,0.07); border: 1px solid var(--border); border-radius: 999px; padding: 9px 15px; margin-bottom: 28px; } .home .noswipe .x { color: #FF9500; font-weight: 800; } .home .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } .home .heritage { font-size: 13px; color: var(--text-muted); margin-top: 22px; font-style: italic; } /* Phone mockup — pre-rendered device frame (transparent PNG) */ .home .phone-col { display: flex; justify-content: center; align-items: flex-end; position: relative; } .home .phone-col::after { content: ""; position: absolute; inset: 2% 2% -4%; background: radial-gradient(55% 50% at 50% 42%, rgba(140,165,255,0.5), rgba(45,48,255,0) 70%); filter: blur(24px); z-index: 0; } .home .app-shot { position: relative; z-index: 1; width: 215px; max-width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 44px rgba(0,0,0,0.5)); } /* ---- Sections ---- */ .home section { padding: 44px 0; } .home .section-head { text-align: center; margin-bottom: 34px; } .home .section-head h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 8px; } .home .section-head p { color: var(--text-secondary); font-size: 16px; } /* "Local everything" grid */ .home .locals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .home .local { background: linear-gradient(180deg, var(--card-bg), #020070); border: 1.5px solid var(--border); border-radius: 18px; padding: 24px 20px; transition: border-color 0.2s, transform 0.15s; } .home .local:hover { border-color: rgba(255,255,255,0.28); transform: translateY(-3px); } .home .local .emoji { width: 46px; height: 46px; border-radius: 12px; background: var(--rainbow); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 15px; } .home .local .lead { color: var(--text-muted); font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; display: block; margin-bottom: 3px; } .home .local h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.2px; margin-bottom: 6px; } .home .local p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; } /* Learn More resource cards */ .home .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .home .card { background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 16px; padding: 26px 22px; } .home .card .emoji { width: 46px; height: 46px; border-radius: 12px; background: var(--rainbow); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; } .home .card h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; } .home .card p { font-size: 14px; color: var(--text-secondary); } .home .resource { display: block; text-decoration: none; color: inherit; position: relative; transition: border-color 0.2s, transform 0.1s; } .home .resource:hover { border-color: var(--accent-focus); } .home .badge-soon { position: absolute; top: 16px; right: 16px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 999px; padding: 3px 8px; } /* Proof */ .home .proof { text-align: center; padding: 52px 0; } .home .proof .quote { font-size: clamp(22px, 3.2vw, 30px); font-weight: 800; letter-spacing: -0.8px; line-height: 1.3; max-width: 22ch; margin: 0 auto 16px; } .home .proof .quote .hl { background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; } .home .proof .byline { color: var(--text-secondary); font-size: 14px; } @media (max-width: 900px) { .home .hero { grid-template-columns: 1fr; gap: 36px; padding: 36px 0; text-align: center; } .home .hero .lede { max-width: 46ch; margin-left: auto; margin-right: auto; } .home .hero-actions { justify-content: center; } .home .phone-col { order: -1; } .home .locals { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .home .locals { grid-template-columns: 1fr; } .home .app-shot { width: 220px; } } /* ============================================================================= Document layout — (testers.html) ========================================================================== */ .docs { line-height: 1.6; } .docs .container { max-width: 720px; } .docs header.hero { text-align: center; padding: 34px 0 26px; } .docs .hero-icon { width: 88px; height: 88px; margin: 0 auto 20px; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 34px rgba(0,0,0,0.55); } .docs .hero-icon img { width: 100%; height: 100%; object-fit: cover; } .docs h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.6px; } .docs .lede { font-size: 17px; color: var(--text-secondary); max-width: 560px; margin: 0 auto; } .docs .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; } .docs .btn { padding: 13px 24px; font-size: 15px; } .docs .divider { margin: 30px 0; } .docs section { margin-bottom: 30px; } .docs h2 { font-size: 22px; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.3px; } .docs p { margin-bottom: 12px; color: rgba(255,255,255,0.85); } .docs ul { margin: 0 0 12px; padding-left: 4px; list-style: none; } .docs li { margin-bottom: 10px; padding-left: 26px; position: relative; color: rgba(255,255,255,0.88); } .docs li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } .docs .check li::before { content: "☐"; color: var(--text-secondary); } .docs strong { color: var(--text); } .docs .callout { background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 14px; padding: 18px 20px; margin-bottom: 12px; } .docs .callout h3 { font-size: 16px; margin-bottom: 6px; } .docs .callout p { font-size: 14px; color: var(--text-secondary); margin-bottom: 0; } .docs footer { border-top: 1px solid var(--border); } /* ============================================================================= Centered card — (join / support / feedback) ========================================================================== */ /* Column layout so the shared nav sits at the top and the shared footer at the bottom, with the card centered in whatever space is left. (This page family used to center the card against the whole viewport — that left nowhere to put a nav or footer.) `flex: 1` on the main region keeps the card vertically centered on tall screens while letting it scroll normally on short ones. */ body.card-page { display: flex; flex-direction: column; min-height: 100vh; } .card-page .card-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 16px; } .card-page .wrapper { width: 100%; max-width: 480px; } .card-page .card-shell { background: var(--rainbow); border-radius: 22px; padding: 2px; } .card-page .card { background: var(--card-bg); border-radius: 20px; padding: 38px 30px 32px; text-align: center; } .card-page .icon-wrap { width: 84px; height: 84px; margin: 0 auto 22px; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.5); } .card-page .icon-wrap img, .card-page .icon-wrap svg { width: 100%; height: 100%; display: block; object-fit: cover; } .card-page h1 { font-size: 25px; font-weight: 700; letter-spacing: -0.4px; margin-bottom: 8px; } .card-page .subtitle { font-size: 15px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 28px; } /* Forms */ .card-page .field { position: relative; margin-bottom: 16px; } .card-page label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; margin-top: 16px; text-align: left; } .card-page label:first-of-type { margin-top: 0; } .card-page .opt { color: var(--text-secondary); font-weight: 400; } .card-page input, .card-page select, .card-page textarea { width: 100%; padding: 13px 15px; background: var(--input-bg); border: 1.5px solid var(--border); border-radius: 12px; color: var(--text); font-size: 16px; outline: none; transition: border-color 0.2s; -webkit-appearance: none; font-family: inherit; } .card-page select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; } .card-page textarea { min-height: 120px; resize: vertical; line-height: 1.5; } .card-page input::placeholder, .card-page textarea::placeholder { color: var(--text-secondary); } .card-page input:focus, .card-page select:focus, .card-page textarea:focus { border-color: var(--accent-focus); } /* Block button + states */ .card-page .btn { display: block; width: 100%; margin-top: 22px; padding: 15px; border: 1.5px solid rgba(255,255,255,0.7); border-radius: 12px; font-size: 16px; font-weight: 600; background: var(--accent); color: #fff; overflow: hidden; position: relative; } .card-page .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .card-page .btn-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; } .card-page .spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; } .card-page .error-msg { font-size: 13px; color: var(--danger); margin-top: 10px; min-height: 18px; text-align: center; } .card-page .success-state { display: none; text-align: center; } .card-page .success-icon { width: 70px; height: 70px; background: var(--rainbow); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 32px; } .card-page .success-state h2 { font-size: 22px; font-weight: 700; margin-bottom: 10px; } .card-page .success-state p { font-size: 15px; color: var(--text-secondary); line-height: 1.6; } .card-page .divider { margin: 28px 0 20px; opacity: 0.6; } .card-page .tip { font-size: 12px; color: var(--text-secondary); text-align: center; margin-top: 20px; line-height: 1.6; } .card-page .footer { font-size: 12px; color: var(--text-secondary); margin-top: 20px; text-align: center; } .card-page .footer a { color: var(--text-secondary); text-decoration: none; } /* Support: contact rows + FAQ */ .card-page .contact-list { display: flex; flex-direction: column; gap: 12px; text-align: left; } .card-page .contact-btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; background: var(--input-bg); border: 1.5px solid var(--border); border-radius: 12px; color: var(--text); text-decoration: none; transition: border-color 0.2s, background 0.2s; } .card-page .contact-btn:hover { border-color: var(--accent-focus); background: rgba(255,255,255,0.09); } .card-page .contact-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--rainbow); display: flex; align-items: center; justify-content: center; font-size: 20px; } .card-page .contact-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 2px; } .card-page .contact-value { font-size: 15px; font-weight: 600; word-break: break-word; } .card-page .response-note { font-size: 13px; color: var(--text-secondary); margin-top: 18px; line-height: 1.5; } .card-page .section-title { font-size: 13px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-secondary); text-align: left; margin-bottom: 14px; } .card-page .faq { text-align: left; border: 1.5px solid var(--border); border-radius: 12px; overflow: hidden; } .card-page .faq details { border-bottom: 1px solid var(--border); } .card-page .faq details:last-child { border-bottom: none; } .card-page .faq summary { list-style: none; cursor: pointer; padding: 14px 16px; font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .card-page .faq summary::-webkit-details-marker { display: none; } .card-page .faq summary::after { content: "+"; font-size: 20px; color: var(--text-secondary); transition: transform 0.2s; } .card-page .faq details[open] summary::after { transform: rotate(45deg); } .card-page .faq p { padding: 0 16px 16px; font-size: 14px; color: var(--text-secondary); line-height: 1.6; } /* ============================================================================= Legal — (privacy / terms / acceptable-use) ========================================================================== */ .legal { line-height: 1.65; font-size: 16px; } .legal nav { border-bottom: 1px solid var(--border); } .legal footer { border-top: 1px solid var(--border); color: var(--text-muted); } .legal .doc { padding: 40px 0 24px; } .legal .doc h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.6px; margin-bottom: 10px; } .legal .doc .dates { color: var(--text-muted); font-size: 14px; margin-bottom: 8px; } .legal .doc .divider { margin: 22px 0 30px; } .legal .doc h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; margin: 34px 0 12px; } .legal .doc h3 { font-size: 17px; font-weight: 700; color: var(--text); margin: 22px 0 8px; } .legal .doc p { margin: 0 0 14px; color: rgba(255,255,255,0.85); } .legal .doc ul { margin: 0 0 16px; padding-left: 22px; } .legal .doc li { margin-bottom: 8px; color: rgba(255,255,255,0.85); } .legal .doc strong { color: var(--text); font-weight: 700; } .legal .doc a { color: var(--accent); text-decoration: none; } .legal .doc a:hover { text-decoration: underline; } .legal .doc .placeholder { background: rgba(255,149,0,0.12); border: 1px solid rgba(255,149,0,0.4); border-radius: 6px; padding: 1px 6px; color: #FFB84D; font-weight: 600; }