/* ============================================================================= marketing-mobile-first.css Mobile-first overlay for businesses_index.html + individuals_index.html. Loaded AFTER main.css so it wins on shared selectors via the cascade. Scoped via [data-mf] on so existing pages are unaffected. ============================================================================= */ /* ---------- Palette (shared) ---------- */ [data-mf] { --brand-primary: #3b82f6; /* blue-500 */ --brand-secondary: #fb7185; /* emerald-500 */ --brand-soft: #60a5fa; /* blue-400 */ --brand-cta: #2563eb; /* blue-600 */ --brand-cta-alt: #e11d48; /* emerald-600 */ --brand-gradient-hi: #fb7185; /* salmon (matches pricing CTA stop 0%) */ --brand-gradient-lo: #3b82f6; /* blue-500 (matches pricing CTA stops 33-67%) */ --brand-gradient-tail: #14b8a6; /* teal-500 (matches pricing CTA stop 100%) */ /* Global button gradient: salmon -> blue -> teal, same color sweep as the animated pricing CTA, baked into a single static diagonal so any pill button picks it up via background: var(--brand-gradient-bg). */ --brand-gradient-bg: linear-gradient(to right, var(--brand-gradient-hi) 0%, var(--brand-gradient-lo) 50%, var(--brand-gradient-tail) 100%); --cta-grad-primary: linear-gradient(135deg, #3b82f6 0%, #14b8a6 100%); /* mobile only: blue -> green */ --cta-grad-secondary: linear-gradient(135deg, #ef4444 0%, #3b82f6 100%); /* mobile only: red -> blue */ --accent-warm: #f59e0b; /* amber-500 (tiny touches) */ --splotch-salmon: 251, 113, 133; --splotch-blue: 59, 130, 246; --splotch-teal: 20, 184, 166; --splotch-slate: 30, 41, 59; } /* ---------- Dark variant (businesses) â€” slate-leaning ---------- Surface tints, input borders, and card-hover all stay inside the slate family (no blue rgba on this theme). Emerald icons, green chevrons, and the greenâ†’blue button gradient stay as deliberate accent pops. */ [data-mf][data-theme="dark"] { --bg: #1e293b; /* slate-800 */ --text-strong: #f1f5f9; --text-body: #cbd5e1; --text-muted: #94a3b8; --surface: rgba(148, 163, 184, 0.07); /* slate-400 wash */ --surface-border: rgba(148, 163, 184, 0.2); --input-bg: #334155; /* slate-700 â€” fully opaque */ --input-border: rgba(148, 163, 184, 0.28); --input-text: #f1f5f9; --input-placeholder: rgba(203, 213, 225, 0.55); --card-hover-bg: #334155; /* slate-700 â€” stays in family */ --card-hover-title: #f1f5f9; --card-hover-text: #cbd5e1; --header-tint: rgba(255, 255, 255, 0.07); } /* ---------- Light variant (individuals) ---------- */ [data-mf][data-theme="light"] { --bg: #fafafa; /* off-white */ --text-strong: #0f172a; --text-body: #475569; --text-muted: #64748b; --surface: rgba(59, 130, 246, 0.04); --surface-border: rgba(59, 130, 246, 0.3); --input-bg: #ffffff; --input-border: rgba(59, 130, 246, 0.4); --input-text: #0f172a; --input-placeholder: #94a3b8; --card-hover-bg: #eef4ff; --card-hover-title: #0f172a; --card-hover-text: #475569; --header-tint: rgba(15, 23, 42, 0.05); /* frosted darker band on light */ } /* ---------- Reset / box-sizing ---------- */ [data-mf] *, [data-mf] *::before, [data-mf] *::after { box-sizing: border-box; } /* ---------- Page chrome ---------- */ [data-mf] html, [data-mf] body { overflow-x: hidden; } [data-mf] { background: var(--bg) !important; color: var(--text-body) !important; } [data-mf] .header { background: linear-gradient(to bottom, var(--header-tint) 0%, var(--header-tint) calc(100% - 8px), transparent 100%) !important; padding: 0.5rem 1rem 1rem !important; box-sizing: border-box !important; transition: transform 0.5s ease, backdrop-filter 0.5s ease, -webkit-backdrop-filter 0.5s ease; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } [data-mf] .header.collapsed { /* Slide fully off-screen. The previous calc(-100% + 20px) left a 20px sliver of the header visible, whose faint --header-tint background read as a thin darkening band at the top of the page. */ transform: translateY(-100%); /* Fade the backdrop blur out as the bar slides up, so no blurred strip lingers at the top of the window while collapsed. */ backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); } [data-mf] .site-footer { background: linear-gradient(to top, var(--header-tint) 0%, var(--header-tint) calc(100% - 8px), transparent 100%) !important; border-top: none !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ---------- Footer text legibility on dark variant ---------- Mirror the light page's hierarchy: column headings stand out vs. the body/link text. Headings white, supporting text light slate-300 grey. */ [data-mf][data-theme="dark"] .site-footer .footer-heading { color: #ffffff !important; } [data-mf][data-theme="dark"] .site-footer .footer-tagline, [data-mf][data-theme="dark"] .site-footer .footer-copyright, [data-mf][data-theme="dark"] .site-footer .footer-links a { color: #cbd5e1 !important; /* slate-300 */ } [data-mf][data-theme="dark"] .site-footer .footer-links a:hover, [data-mf][data-theme="dark"] .site-footer .footer-links a:focus { color: var(--brand-secondary) !important; /* emerald on hover */ } [data-mf][data-theme="dark"] .site-footer .footer-social { color: var(--text-strong) !important; } /* Newsletter ("Stay in the loop!") bar: label reads like a heading (white), status message follows the light supporting-text grey. */ [data-mf][data-theme="dark"] .site-footer .footer-newsletter-label { color: #ffffff !important; } [data-mf][data-theme="dark"] .site-footer .footer-newsletter-sublabel { color: #cbd5e1 !important; /* slate-300 — base #374151 was near-invisible on the dark footer */ } [data-mf][data-theme="dark"] .site-footer .footer-newsletter-msg { color: #cbd5e1 !important; /* slate-300 */ } /* Header link text color â€” exclude .primary so the filled Login/Logout button keeps its white-on-colored-bg styling from main.css. */ [data-mf][data-theme="dark"] .header-link:not(.for-business-link):not(.primary), [data-mf][data-theme="dark"] .logo, [data-mf][data-theme="dark"] .welcome-text { color: var(--text-strong) !important; } /* Username link stays blue regardless of theme (matches the mobile-menu welcome) */ [data-mf] .welcome-text a { color: #2563eb !important; } [data-mf][data-theme="light"] .header-link:not(.for-business-link):not(.primary), [data-mf][data-theme="light"] .logo { color: var(--text-strong) !important; } [data-mf] .header-link.primary { color: #ffffff !important; } [data-mf] a.logo, [data-mf] a.logo img { background: transparent !important; background-color: transparent !important; } [data-mf] a.logo { padding-top: 0 !important; } /* ---------- Section base (mobile-first) ---------- Sections fit inside the viewport BELOW the fixed header (4rem) so each section's bottom chevron stays on-screen after a chevron-scroll. Content is centered within the visible area. */ [data-mf] .main-section, [data-mf] .description-section, [data-mf] .details-section, [data-mf] .scrubber-demo-section, [data-mf] .next-steps-section, [data-mf] .contact-section { position: relative !important; width: 100% !important; /* Each section fills the viewport below the fixed header â€” so only the section's own content + bottom chevron are visible, with no peeking of the next section. JS anchors the next chevron at innerHeight âˆ’ 20px. */ min-height: calc(100svh - 4rem) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; /* padding-bottom > chevron offset (1rem) + chevron height (56px â‰ˆ 3.5rem) */ padding: 2.5rem 1rem 5rem !important; background: transparent !important; overflow: hidden; scroll-margin-top: 4rem !important; } /* Contact section: shorter than the others so the footer-handoff isn't a dead zone. */ [data-mf] .contact-section { min-height: auto !important; padding: 3rem 1rem 5rem !important; } /* main.css adds a hardcoded blue radial-gradient ::before pseudo-element on .contact-section (400px @ left: 85%; bottom: 30%). It's the phantom blue splotch on the right of "Any questions?". Suppress on marketing pages. */ [data-mf] .contact-section::before { content: none !important; display: none !important; } /* Chevron sits 1rem from section bottom for an extra safety margin on browsers where 100svh under-reports (e.g., when the URL bar is in transition). */ [data-mf] .chevron-wrap { bottom: 1rem !important; } /* ---------- Header alignment ---------- Override main.css behavior so the Login button stays flush right and the dropdown menu doesn't cover the hero form on mobile. */ [data-mf] .header { flex-wrap: nowrap !important; padding: 0.5rem 1rem !important; gap: 0.5rem; } [data-mf] .header-links { flex-wrap: nowrap !important; flex-shrink: 0 !important; gap: 0.5rem !important; /* No margin-left: auto here â€” the .header's justify-content: space-between already pushes us to the right edge when alone, and when a .welcome-text sibling is present its own margin-left: auto handles the right-grouping. */ } [data-mf] .header-link { white-space: nowrap !important; flex-shrink: 0 !important; } [data-mf] .login-dropdown-toggle { width: auto !important; min-width: 0 !important; } [data-mf] .login-dropdown-menu { min-width: 150px !important; right: 0 !important; top: calc(100% + 8px) !important; z-index: 1100 !important; } @media (min-width: 768px) { [data-mf] .header { padding: 0.5rem 2rem !important; } } /* ---------- Tagline / sub-tagline ---------- */ [data-mf] .tagline { font-family: 'Inter', sans-serif; font-size: clamp(1.6rem, 6vw, 2.25rem) !important; line-height: 1.2 !important; text-align: center !important; color: var(--text-strong) !important; margin: 0 0 1rem !important; padding: 0 0.5rem !important; max-width: 100% !important; } [data-mf] .sub-tagline { font-family: 'Instrument Sans', sans-serif; font-size: clamp(0.95rem, 3.5vw, 1.15rem) !important; line-height: 1.5 !important; text-align: center !important; color: var(--text-body) !important; margin: 0 0 1.75rem !important; padding: 0 0.5rem !important; max-width: 100% !important; } /* ---------- Hero email form ---------- */ [data-mf] .email-form { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; width: 100% !important; max-width: 360px !important; margin: 0 auto !important; padding: 0 !important; position: relative; z-index: 5; } [data-mf] .email-input { width: 100% !important; padding: 0.9rem 1.25rem !important; border-radius: 999px !important; border: 2px solid var(--input-border) !important; background: var(--input-bg) !important; color: var(--input-text) !important; font-family: 'Inter', sans-serif !important; font-size: 16px !important; /* prevents iOS zoom */ outline: none !important; text-align: center !important; box-shadow: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } [data-mf] .email-input::placeholder { color: var(--input-placeholder) !important; } [data-mf] .email-input:focus { border-color: var(--brand-cta) !important; box-shadow: none !important; } [data-mf] .submit-btn { /* Override main.css's absolute positioning so the button doesn't overlay the input. */ position: static !important; right: auto !important; top: auto !important; transform: none !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; width: 100% !important; min-height: 48px !important; padding: 0.85rem 1.5rem !important; border: none !important; border-radius: 999px !important; background: var(--brand-gradient-bg) !important; color: #ffffff !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 1rem !important; cursor: pointer !important; transition: transform 0.15s ease, box-shadow 0.2s ease !important; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.28) !important; } [data-mf] .submit-btn:hover { box-shadow: 0 10px 24px rgba(59, 130, 246, 0.5) !important; } [data-mf] .arrow-circle { width: 22px !important; height: 22px !important; border: 2px solid currentColor !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } [data-mf] .arrow-icon { width: 12px !important; height: 12px !important; fill: currentColor !important; } [data-mf] .form-note { font-family: 'Instrument Sans', sans-serif !important; font-size: 0.85rem !important; color: var(--text-muted) !important; text-align: center !important; margin: 1rem 0 0 !important; position: relative; z-index: 5; } /* ---------- Section header (h2 + subtitle) ---------- */ [data-mf] .section-header { width: 100% !important; max-width: 720px !important; margin: 0 auto 1.25rem !important; text-align: center !important; position: relative; z-index: 5; } [data-mf] .section-title { font-family: 'Inter', sans-serif !important; font-size: clamp(1.4rem, 5vw, 2rem) !important; font-weight: 700 !important; color: var(--text-strong) !important; margin: 0 0 0.75rem !important; text-align: center !important; line-height: 1.25 !important; } [data-mf] .section-subtitle-wrap { width: 100% !important; } [data-mf] .section-subtitle { font-family: 'Instrument Sans', sans-serif !important; /* Tighter scale + line-height so long subtitles (e.g., the individuals description blurb) wrap in fewer lines and don't push the section past min-height â€” which would offset the bottom chevron. */ font-size: clamp(0.85rem, 3vw, 1.05rem) !important; line-height: 1.4 !important; color: var(--text-body) !important; margin: 0 !important; padding: 0 0.5rem !important; transition: color 0.4s ease; } [data-mf] .section-subtitle-wrap:hover .section-subtitle { color: var(--text-strong) !important; } [data-mf] .subtitle-highlight { color: var(--brand-secondary) !important; font-weight: 600 !important; transition: color 0.4s ease, font-weight 0.4s ease; } [data-mf] .section-subtitle-wrap:hover .subtitle-highlight { color: var(--brand-cta) !important; font-weight: 700 !important; } /* ---------- Cards (rotate-stacked on mobile, side-by-side on tablet+) ---------- Mobile: grid stack so all 3 cards share the same cell; JS toggles .mobile-active to fade between them. Keeps cards-container at single-card height so every section hits the same min-height and chevrons land at the same viewport Y. */ [data-mf] .cards-container { display: grid !important; grid-template-columns: 1fr !important; grid-template-areas: "stack" !important; gap: 0 !important; width: 100% !important; max-width: 360px !important; margin: 0 auto !important; padding: 0 !important; position: relative; z-index: 5; } [data-mf] .card { grid-area: stack !important; position: relative !important; width: 100% !important; /* Layout: title-row at top, card-text vertically centered, card-try-btn absolute at bottom-right. Extra bottom padding clears the button. */ padding: 1rem 1.25rem 2.5rem !important; border-radius: 14px !important; background: var(--surface) !important; border: 1px solid var(--surface-border) !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; opacity: 0; pointer-events: none; transition: opacity 0.8s ease, background 0.35s ease, border-color 0.35s ease, transform 0.2s ease !important; } [data-mf] .card.mobile-active { opacity: 1; pointer-events: auto; } /* card-row: icon and title both packed on the left, icon first. row-reverse flips the DOM order (title, icon), and justify-content: flex-end packs them at the (now-leftward) axis end, giving [icon][title]____. */ [data-mf] .card .card-row { display: flex !important; flex-direction: row-reverse !important; align-items: center !important; justify-content: flex-end !important; width: 100% !important; gap: 0.75rem !important; } [data-mf] .card .card-row .card-title { margin: 0 !important; } [data-mf] .card .card-row .card-icon { margin: 0 !important; } [data-mf] .card:hover { background: var(--card-hover-bg) !important; border-color: var(--brand-soft) !important; transform: translateY(-2px); } [data-mf] .card:hover .card-title { color: var(--card-hover-title) !important; } [data-mf] .card:hover .card-text { color: var(--card-hover-text) !important; } [data-mf] .card-title { font-family: 'Inter', sans-serif !important; font-size: 1.15rem !important; font-weight: 700 !important; color: var(--text-strong) !important; margin: 0.5rem 0 0.4rem !important; transition: color 0.35s ease !important; } [data-mf] .card-text { font-family: 'Instrument Sans', sans-serif !important; font-size: 0.95rem !important; line-height: 1.5 !important; color: var(--text-body) !important; margin: 1.1rem 0 auto !important; /* gap above the description so it sits clear of the icon row */ transition: color 0.35s ease !important; } [data-mf] .card-icon { width: 64px !important; height: 64px !important; border-radius: 14px !important; background: rgba(var(--splotch-blue), 0.14) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } [data-mf] .card-icon svg { width: 38px !important; height: 38px !important; } /* Icon color is theme-driven: teal (the 'green' from the global gradient) on the individuals (light) page; blue on the businesses (dark) page. */ [data-mf][data-theme="light"] .card-icon svg#check-icon, [data-mf][data-theme="light"] .card-icon svg#key-icon, [data-mf][data-theme="light"] .card-icon svg#smiley-icon { fill: #14b8a6 !important; /* teal-500 */ stroke: #14b8a6 !important; } [data-mf][data-theme="dark"] .card-icon svg#check-icon, [data-mf][data-theme="dark"] .card-icon svg#key-icon, [data-mf][data-theme="dark"] .card-icon svg#smiley-icon { fill: #3b82f6 !important; /* blue-500 */ stroke: #3b82f6 !important; } [data-mf] .card-icon svg#key-icon circle:nth-of-type(2) { fill: var(--bg) !important; /* "punched out" hole */ } /* Icons stay at base color on hover (no saturation increase). The key-icon's inner circle still adapts to the new card-hover bg so it stays "punched out". */ [data-mf][data-theme="light"] .card:hover .card-icon svg#check-icon, [data-mf][data-theme="light"] .card:hover .card-icon svg#key-icon, [data-mf][data-theme="light"] .card:hover .card-icon svg#smiley-icon { fill: #14b8a6 !important; stroke: #14b8a6 !important; } [data-mf][data-theme="dark"] .card:hover .card-icon svg#check-icon, [data-mf][data-theme="dark"] .card:hover .card-icon svg#key-icon, [data-mf][data-theme="dark"] .card:hover .card-icon svg#smiley-icon { fill: #3b82f6 !important; stroke: #3b82f6 !important; } /* Override main.css's `.card:hover .card-icon svg#key-icon circle { fill: white }` that was turning the key's outer bow into a white-on-salmon-outline ring on hover. */ [data-mf][data-theme="light"] .card:hover .card-icon svg#key-icon circle { fill: #14b8a6 !important; } [data-mf][data-theme="dark"] .card:hover .card-icon svg#key-icon circle { fill: #3b82f6 !important; } [data-mf] .card:hover .card-icon svg#key-icon circle:nth-of-type(2) { fill: var(--card-hover-bg) !important; /* inner hole still matches hover bg */ } [data-mf] .card-try-btn { position: absolute !important; top: auto !important; bottom: 0.75rem !important; right: 0.75rem !important; background: var(--brand-cta) !important; color: #ffffff !important; font-family: 'Inter', sans-serif !important; font-size: 0.75rem !important; font-weight: 600 !important; padding: 0.4rem 0.85rem !important; border-radius: 999px !important; text-decoration: none !important; transition: background 0.2s ease, transform 0.15s ease !important; z-index: 2; } [data-mf] .card-try-btn:hover { background: var(--brand-cta-alt) !important; transform: translateY(-1px); } /* ---------- Color splotches as lit globes ---------- Each splotch is a 3D sphere. The viewer (us) is the light source; pink/salmon is the light color. Hotspots rotate to face the screen's center: globes on the LEFT show their right side lit, globes on the RIGHT show their left side lit, globes near center get a near-head-on highlight. Gradients fade from a hot salmon center, through blue mid-tones, into a deep-slate rim (the shadow on the curve-away-from-light side). */ [data-mf] .color-splotch-red, [data-mf] .color-splotch-description-section, [data-mf] .color-splotch-details-section, [data-mf] .color-splotch-next-steps-section, [data-mf] .color-splotch-contact-section { position: absolute !important; pointer-events: none !important; z-index: 0 !important; border-radius: 50% !important; opacity: 0.55 !important; filter: blur(1px); width: 55vw !important; height: 55vw !important; max-width: 260px !important; max-height: 260px !important; top: 20% !important; } /* ---------- Individuals (light theme) â€” 4 globes, hotspots face center ---------- */ [data-mf][data-theme="light"] .color-splotch-red { left: -8% !important; background: radial-gradient(circle at 80% 50%, rgba(213, 116, 156, 1) 0%, rgba(213, 116, 156, 0.85) 32%, rgba(213, 116, 156, 0.55) 58%, rgba(var(--splotch-slate), 0.32) 85%, rgba(var(--splotch-slate), 0) 100%) !important; } [data-mf][data-theme="light"] .color-splotch-description-section { left: 28% !important; background: radial-gradient(circle at 60% 50%, rgba(94, 127, 226, 1) 0%, rgba(94, 127, 226, 0.85) 32%, rgba(94, 127, 226, 0.55) 58%, rgba(var(--splotch-slate), 0.32) 85%, rgba(var(--splotch-slate), 0) 100%) !important; } [data-mf][data-theme="light"] .color-splotch-next-steps-section { left: 55% !important; right: auto !important; background: radial-gradient(circle at 40% 50%, rgba(48, 145, 224, 1) 0%, rgba(48, 145, 224, 0.85) 32%, rgba(48, 145, 224, 0.55) 58%, rgba(var(--splotch-slate), 0.32) 85%, rgba(var(--splotch-slate), 0) 100%) !important; } [data-mf][data-theme="light"] .color-splotch-contact-section { left: 78% !important; background: radial-gradient(circle at 20% 50%, rgba(34, 165, 195, 1) 0%, rgba(34, 165, 195, 0.85) 32%, rgba(34, 165, 195, 0.55) 58%, rgba(var(--splotch-slate), 0.32) 85%, rgba(var(--splotch-slate), 0) 100%) !important; } /* ---------- Businesses (dark theme) â€” 5 globes, hotspots face center ---------- */ [data-mf][data-theme="dark"] .color-splotch-red { left: -8% !important; background: radial-gradient(circle at 80% 50%, rgba(213, 116, 156, 1) 0%, rgba(213, 116, 156, 0.85) 32%, rgba(213, 116, 156, 0.55) 58%, rgba(var(--splotch-slate), 0.32) 85%, rgba(var(--splotch-slate), 0) 100%) !important; } [data-mf][data-theme="dark"] .color-splotch-description-section { left: 20% !important; background: radial-gradient(circle at 65% 50%, rgba(120, 125, 210, 1) 0%, rgba(120, 125, 210, 0.85) 32%, rgba(120, 125, 210, 0.55) 58%, rgba(var(--splotch-slate), 0.32) 85%, rgba(var(--splotch-slate), 0) 100%) !important; } [data-mf][data-theme="dark"] .color-splotch-details-section { left: 42% !important; background: radial-gradient(circle at 52% 50%, rgba(57, 133, 241, 1) 0%, rgba(57, 133, 241, 0.85) 32%, rgba(57, 133, 241, 0.55) 58%, rgba(var(--splotch-slate), 0.32) 85%, rgba(var(--splotch-slate), 0) 100%) !important; } [data-mf][data-theme="dark"] .color-splotch-next-steps-section { left: 62% !important; right: auto !important; background: radial-gradient(circle at 38% 50%, rgba(43, 152, 214, 1) 0%, rgba(43, 152, 214, 0.85) 32%, rgba(43, 152, 214, 0.55) 58%, rgba(var(--splotch-slate), 0.32) 85%, rgba(var(--splotch-slate), 0) 100%) !important; } [data-mf][data-theme="dark"] .color-splotch-contact-section { left: 80% !important; background: radial-gradient(circle at 20% 50%, rgba(34, 165, 195, 1) 0%, rgba(34, 165, 195, 0.85) 32%, rgba(34, 165, 195, 0.55) 58%, rgba(var(--splotch-slate), 0.32) 85%, rgba(var(--splotch-slate), 0) 100%) !important; } /* ---------- Section chevrons (smaller on mobile) ---------- */ [data-mf] .chevron-wrap { position: absolute !important; bottom: 0.75rem !important; left: 50% !important; transform: translateX(-50%) !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.15rem !important; z-index: 6; } @keyframes chevron-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } [data-mf] .section-chevron { width: 56px !important; height: 56px !important; cursor: pointer !important; transition: transform 0.25s ease, filter 0.25s ease !important; filter: drop-shadow(0 4px 10px rgba(59, 130, 246, 0.45)); /* Light idle bob to hint scrollability; pauses on hover. */ animation: chevron-bob 2.2s ease-in-out infinite; } [data-mf] .section-chevron:hover { animation: none; transform: translateY(2px); filter: drop-shadow(0 6px 14px rgba(37, 99, 235, 0.6)); } @media (prefers-reduced-motion: reduce) { [data-mf] .section-chevron { animation: none !important; } } [data-mf] .chevron-wrap--hero .section-chevron { width: 80px !important; height: 80px !important; } [data-mf] .chevron-wrap--back .back-to-top-label { color: var(--brand-primary) !important; font-family: 'Inter', sans-serif !important; font-weight: 500 !important; font-size: 0.85rem !important; cursor: pointer !important; } /* Dark theme (businesses): green chevrons instead of blue */ [data-mf][data-theme="dark"] .section-chevron { filter: drop-shadow(0 4px 10px rgba(59, 130, 246, 0.5)) !important; } [data-mf][data-theme="dark"] .section-chevron:hover { filter: drop-shadow(0 6px 14px rgba(37, 99, 235, 0.65)) !important; } [data-mf][data-theme="dark"] .section-chevron path[stroke-width="2"] { stroke: #fb7185 !important; /* emerald inner stroke */ } [data-mf][data-theme="dark"] .section-chevron stop { stop-color: #fb7185 !important; } [data-mf][data-theme="dark"] .chevron-wrap--back .back-to-top-label { color: var(--brand-secondary) !important; } /* Dark theme: remove the subtitle-wrap hover effect on businesses entirely â€” main.css adds a white box + blue border on hover that doesn't belong here. */ [data-mf][data-theme="dark"] .section-subtitle-wrap:hover { background: transparent !important; border-color: transparent !important; } [data-mf][data-theme="dark"] .section-subtitle-wrap:hover .section-subtitle { color: var(--text-body) !important; } [data-mf][data-theme="dark"] .section-subtitle-wrap:hover .subtitle-highlight { color: var(--brand-secondary) !important; font-weight: 600 !important; } /* (Old bulk dark-theme splotch override removed â€” per-globe gradients above handle each splotch individually with hotspot direction baked in.) */ /* ---------- Dashboard sidebar (matches individuals' next-steps-block) ---------- Each menu button is its own rounded gradient-bordered tile. The salmon corner of the gradient ARCS from bottom-right (inactive) to top-left (hover) via an animatable @property-registered CSS variable. Click locks it there. */ @property --box-grad-angle { syntax: ''; initial-value: 45deg; inherits: false; } @property --box-grad-c1 { syntax: ''; initial-value: #ef4444; inherits: false; } @property --box-grad-c2 { syntax: ''; initial-value: #3b82f6; inherits: false; } [data-mf] .dashboard-sidebar { background: transparent !important; box-shadow: none !important; padding: 0.4rem !important; border-radius: 14px !important; overflow: visible !important; } /* MOBILE MENU (accordion). The desktop rules above keep overflow visible so the menu tiles can hover-lift; on mobile that left a collapsed menu still painting over the page. Collapsed = zero footprint and fully hidden; expanded = natural height, nothing clipped. */ @media (max-width: 768px) { [data-mf] .dashboard-sidebar:not(.open) { max-height: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; overflow: hidden !important; } [data-mf] .dashboard-sidebar:not(.open) > * { display: none !important; } [data-mf] .dashboard-sidebar.open { max-height: none !important; overflow: visible !important; } } [data-mf] .dashboard-sidebar .sidebar-item { position: relative !important; margin-bottom: 0.45rem !important; border: 2px solid transparent !important; border-radius: 12px !important; --box-grad-angle: 45deg; --box-grad-c1: #ef4444; /* red */ --box-grad-c2: #3b82f6; /* blue */ background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(var(--box-grad-angle), var(--box-grad-c1) 0%, var(--box-grad-c2) 100%) border-box !important; padding: 0.7rem 0.9rem !important; color: var(--brand-cta) !important; font-family: 'Inter', 'REM', sans-serif !important; transition: --box-grad-angle 0.55s ease, --box-grad-c1 0.55s ease, --box-grad-c2 0.55s ease, transform 0.15s ease, box-shadow 0.2s ease !important; } [data-mf] .dashboard-sidebar .sidebar-item:hover { --box-grad-angle: 225deg; --box-grad-c1: #10b981; /* green */ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.18) !important; } /* Active: locks at 315deg (same as hover end state). Fill stays opaque white. */ [data-mf] .dashboard-sidebar .sidebar-item.active { --box-grad-angle: 225deg; --box-grad-c1: #10b981; /* green */ font-weight: 600 !important; color: var(--brand-cta) !important; } /* Submenu (Login Links â†’ org_type subitems): same treatment, slightly smaller + indented so the hierarchy still reads. */ [data-mf] .dashboard-sidebar .sidebar-submenu { margin: 0 !important; padding-left: 0 !important; background: transparent !important; } [data-mf] .dashboard-sidebar .sidebar-submenu .sidebar-item.sidebar-subitem { margin-left: 0.85rem !important; width: calc(100% - 0.85rem) !important; padding: 0.55rem 0.85rem !important; font-size: 0.88rem !important; border-radius: 10px !important; /* Glassy tile: nukes the inherited gradient outline so the sidebar gradient only appears on top-level Login Links / Advisees / etc. */ background: rgba(255, 255, 255, 0.55) !important; border: 1px solid rgba(59, 130, 246, 0.16) !important; backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 8px rgba(15, 23, 42, 0.04) !important; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important; } [data-mf] .dashboard-sidebar .sidebar-submenu .sidebar-item.sidebar-subitem:hover { background: rgba(255, 255, 255, 0.88) !important; border-color: rgba(59, 130, 246, 0.38) !important; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 14px rgba(59, 130, 246, 0.14) !important; } [data-mf] .dashboard-sidebar .sidebar-submenu .sidebar-item.sidebar-subitem.active { background: rgba(255, 255, 255, 0.94) !important; border-color: rgba(59, 130, 246, 0.6) !important; color: var(--brand-cta) !important; font-weight: 600 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 18px rgba(59, 130, 246, 0.18) !important; } /* Divider thinned â€” gradient borders already separate items visually */ [data-mf] .dashboard-sidebar .sidebar-settings-divider { margin: 0.35rem 0 !important; border-top: 1px solid rgba(15, 23, 42, 0.08) !important; } /* Dark theme: card-icon plate is slate, not blue */ [data-mf][data-theme="dark"] .card-icon { background: rgba(148, 163, 184, 0.14) !important; } /* Dark theme: subtle slate fill (slate-700 over the slate-800 page bg gives the "elevated card" feel of frosted glass without translucency â€” required so the gradient border ring stays crisp instead of bleeding through. */ [data-mf][data-theme="dark"] .next-steps-block { background: linear-gradient(180deg, rgba(51, 65, 85, 0.97) 0%, rgba(30, 41, 59, 0.98) 100%) padding-box, linear-gradient(var(--box-grad-angle), var(--box-grad-c1) 0%, var(--box-grad-c2) 100%) border-box !important; border: 2px solid transparent !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 32px rgba(0, 0, 0, 0.3) !important; } /* ---------- Next steps (gradient-bordered blocks) ---------- */ [data-mf] .next-steps-container { width: 100% !important; max-width: 900px !important; margin: 0 auto !important; padding: 0 !important; position: relative; z-index: 5; } [data-mf] .next-steps-container h2 { text-align: center !important; font-family: 'Inter', sans-serif !important; font-size: clamp(1.4rem, 5vw, 2rem) !important; font-weight: 700 !important; color: var(--text-strong) !important; margin: 0 0 1.75rem !important; } [data-mf] .next-steps-blocks { display: flex !important; flex-direction: column !important; gap: 1.25rem !important; width: 100% !important; max-width: 380px !important; margin: 0 auto !important; } /* ---- Shared call-to-action box ---- Used by the three technology pages AND the home "Try SAFE Portal Today!" section. Three proposals stack inside ONE rounded box, each its own solid zone so the fill + outline change ABRUPTLY at the section boundaries: top = create account / download (original blue tint + fully-opaque blue outline), middle = join a paid plan (matching pale saturation, site red), bottom = read the FAQ (light-gray fill, black outline). The first zone rounds its own top corners and the last its bottom corners so each border follows the curve (no clip shearing). #3b82f6 + #ef4444 are the site's matched border pair (see .next-steps-block). On the home page the box lives OUTSIDE .next-steps-container so the container's !important h2 rule can't clobber the inner headings; .next-steps-cta-wrap gives it the same ~880px width it has on tech pages. */ [data-mf] .next-steps-cta-wrap { width: 100%; max-width: 900px; padding: 0 clamp(1rem, 4vw, 2rem); /* Sit above the section's z-index:0 background splotch (a positioned element otherwise paints over this non-positioned wrapper), like .next-steps-container. */ position: relative; z-index: 5; } [data-mf] .tech-cta { margin: 0 0 2.5rem; padding: 0; border: none; text-align: center; } [data-mf] .tech-cta-section { padding: clamp(1.5rem, 4.5vw, 2.4rem) clamp(1.4rem, 5vw, 2.6rem); border-left: 2px solid transparent; border-right: 2px solid transparent; } /* The tints are laid over an OPAQUE var(--bg) base (not left translucent) so the home page's background splotches can't show through the box; over the light page bg the result is identical to the tech pages. */ [data-mf] .tech-cta-primary { background-color: var(--bg); background-image: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(20, 184, 166, 0.10)); border-top: 2px solid #3b82f6; border-left-color: #3b82f6; border-right-color: #3b82f6; border-top-left-radius: 20px; border-top-right-radius: 20px; } [data-mf] .tech-cta-paid { background-color: var(--bg); background-image: linear-gradient(rgba(239, 68, 68, 0.09), rgba(239, 68, 68, 0.09)); border-left-color: #ef4444; border-right-color: #ef4444; } [data-mf] .tech-cta-faq { background: #e5e7eb; border-bottom: 2px solid #111111; border-left-color: #111111; border-right-color: #111111; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding-top: clamp(1.1rem, 3vw, 1.6rem); padding-bottom: clamp(1.5rem, 4vw, 2rem); } [data-mf] .tech-cta h2 { font-family: 'Instrument Sans', sans-serif; font-size: clamp(1.3rem, 3.5vw, 1.8rem); font-weight: 700; color: var(--text-strong); margin: 0 0 0.6rem; } [data-mf] .tech-cta p { font-size: 1.02rem; line-height: 1.6; color: var(--text-body); margin: 0 auto 1.5rem; max-width: 560px; } [data-mf] .tech-cta-btn { display: inline-block; background: #2563eb; color: #ffffff; text-decoration: none; font-weight: 600; font-family: 'Inter', sans-serif; padding: 0.8rem 1.8rem; border-radius: 10px; transition: background 0.25s ease, transform 0.25s ease; } [data-mf] .tech-cta-btn:hover, [data-mf] .tech-cta-btn:focus { background: #1d4ed8; transform: translateY(-2px); } [data-mf] .tech-cta-btn--paid { background: #dc2626; } [data-mf] .tech-cta-btn--paid:hover, [data-mf] .tech-cta-btn--paid:focus { background: #b91c1c; } [data-mf] .tech-cta-faq p { margin: 0 auto; font-weight: 700; } [data-mf] .tech-cta-faq a { color: var(--brand-cta); font-weight: 800; text-decoration: none; } [data-mf] .tech-cta-faq a:hover, [data-mf] .tech-cta-faq a:focus { text-decoration: underline; } [data-mf] .next-steps-block { width: 100% !important; max-width: 100% !important; padding: 1.5rem 1.25rem !important; border-radius: 14px !important; border: 2px solid transparent !important; --box-grad-angle: 45deg; --box-grad-c1: #ef4444; /* red */ --box-grad-c2: #3b82f6; /* blue */ background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(var(--box-grad-angle), var(--box-grad-c1) 0%, var(--box-grad-c2) 100%) border-box !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; transition: --box-grad-angle 0.55s ease, --box-grad-c1 0.55s ease, --box-grad-c2 0.55s ease, transform 0.15s ease, box-shadow 0.2s ease !important; } [data-mf] .next-steps-block:hover { --box-grad-angle: 225deg; --box-grad-c1: #10b981; /* green */ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.18) !important; } [data-mf] .next-steps-block h3 { font-family: 'Inter', sans-serif !important; font-weight: 700 !important; font-size: 1.2rem !important; color: var(--text-strong) !important; margin: 0 0 1.1rem !important; letter-spacing: 0.02em !important; white-space: normal !important; } [data-mf] .next-steps-block .demo-request-form, [data-mf] .next-steps-block .free-trial-form { position: relative !important; width: 100% !important; max-width: 340px !important; } [data-mf] .next-steps-block .demo-email-input, [data-mf] .next-steps-block .free-trial-email-input { width: 100% !important; padding: 0.95rem 1.25rem 3.25rem !important; border-radius: 22px !important; border: 2px solid var(--input-border) !important; background: var(--input-bg) !important; color: var(--input-text) !important; font-family: 'Inter', sans-serif !important; font-size: 16px !important; outline: none !important; text-align: center !important; box-sizing: border-box !important; transition: border-color 0.2s ease !important; } [data-mf] .next-steps-block .demo-email-input::placeholder, [data-mf] .next-steps-block .free-trial-email-input::placeholder { color: var(--input-placeholder) !important; } [data-mf] .next-steps-block .demo-email-input:focus, [data-mf] .next-steps-block .free-trial-email-input:focus { border-color: var(--brand-cta) !important; } [data-mf] .next-steps-block .demo-request-form button[type="submit"], [data-mf] .next-steps-block .free-trial-form button[type="submit"] { position: absolute !important; bottom: 8px !important; left: 0 !important; right: 0 !important; margin-inline: auto !important; width: fit-content !important; background: var(--brand-gradient-bg) !important; color: #ffffff !important; border: none !important; padding: 0.6rem 1.75rem !important; border-radius: 18px !important; cursor: pointer !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 0.85rem !important; display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; white-space: nowrap !important; transition: transform 0.15s ease, box-shadow 0.2s ease !important; } [data-mf] .next-steps-block .demo-request-form button[type="submit"]:hover, [data-mf] .next-steps-block .free-trial-form button[type="submit"]:hover { box-shadow: 0 8px 22px rgba(59, 130, 246, 0.5) !important; } [data-mf] .premium-cta { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 320px !important; min-height: 64px !important; padding: 1rem 1.25rem !important; background: var(--brand-gradient-bg) !important; color: #ffffff !important; border: 2px solid transparent !important; border-radius: 18px !important; font-family: 'Inter', sans-serif !important; font-weight: 700 !important; font-size: 1.15rem !important; cursor: pointer !important; text-decoration: none !important; box-sizing: border-box !important; transition: box-shadow 0.2s ease !important; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.28) !important; } [data-mf] .premium-cta:hover { box-shadow: 0 10px 24px rgba(59, 130, 246, 0.5) !important; } /* ---------- Details (carousel) section ---------- */ [data-mf] .details-section { padding-bottom: 7rem !important; } [data-mf] .details-container { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; padding: 0 !important; position: relative; z-index: 5; } [data-mf] #thumbs-left, [data-mf] #thumbs-right { display: none !important; } [data-mf] #carousel { position: relative !important; width: 100% !important; /* Screenshot showcase â€” section height is irrelevant for chevron position (JS anchors the next chevron at viewport bottom), so size aggressively for legibility. Mobile is still constrained by viewport width; the large caps mainly help tablet/desktop. */ max-width: min(100%, max(1100px, 70vw), calc(65svh * 1366 / 720)) !important; aspect-ratio: 1366 / 720 !important; height: auto !important; border-radius: 12px !important; overflow: hidden !important; } [data-mf] #carousel-prev, [data-mf] #carousel-next { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 40px !important; height: 40px !important; background: #0f172a !important; /* slate-900, fully opaque */ color: white !important; border: none !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.2rem !important; cursor: pointer !important; z-index: 2 !important; } [data-mf] #carousel-prev { left: 10px !important; } [data-mf] #carousel-next { right: 10px !important; } [data-mf] .carousel-caption-text { white-space: normal !important; color: var(--text-body) !important; font-family: 'Instrument Sans', sans-serif !important; font-size: clamp(0.95rem, 3.5vw, 1.1rem) !important; line-height: 1.5 !important; margin: 0.75rem 0 0 !important; text-align: center !important; padding: 0 0.5rem !important; } /* ---------- Contact section ---------- */ [data-mf] .contact-container { display: flex !important; flex-direction: column !important; gap: 1.5rem !important; width: 100% !important; max-width: 480px !important; margin: 0 auto !important; padding: 0 !important; position: relative; z-index: 5; } [data-mf] .contact-info { text-align: center !important; } [data-mf] .contact-info h2 { font-family: 'Inter', sans-serif !important; font-size: clamp(1.4rem, 5vw, 2rem) !important; color: var(--text-strong) !important; margin: 0 0 0.5rem !important; } [data-mf] .contact-info p { font-family: 'Instrument Sans', sans-serif !important; font-size: 1rem !important; line-height: 1.5 !important; color: var(--text-body) !important; margin: 0 !important; } [data-mf] .contact-form { width: 100% !important; } [data-mf] .contact-form h4 { font-family: 'Inter', sans-serif !important; font-size: 1rem !important; color: var(--text-strong) !important; margin: 0 0 0.6rem !important; text-align: center !important; } [data-mf] .contact-form-container { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; width: 100% !important; } [data-mf] .contact-input, [data-mf] .contact-message { width: 100% !important; padding: 0.85rem 1.1rem !important; border-radius: 14px !important; border: 2px solid var(--input-border) !important; background: var(--input-bg) !important; color: var(--input-text) !important; font-family: 'Inter', sans-serif !important; font-size: 16px !important; outline: none !important; box-sizing: border-box !important; transition: border-color 0.2s ease !important; } [data-mf] .contact-input::placeholder, [data-mf] .contact-message::placeholder { color: var(--input-placeholder) !important; } [data-mf] .contact-message { min-height: 110px !important; resize: vertical !important; font-family: 'Instrument Sans', sans-serif !important; } [data-mf] .contact-input:focus, [data-mf] .contact-message:focus { border-color: var(--brand-cta) !important; } [data-mf] .contact-submit-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; align-self: center !important; min-width: 160px !important; min-height: 46px !important; padding: 0.7rem 1.5rem !important; background: var(--brand-gradient-bg) !important; color: #ffffff !important; border: none !important; border-radius: 999px !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 1rem !important; cursor: pointer !important; transition: transform 0.15s ease, box-shadow 0.2s ease !important; } [data-mf] .contact-submit-btn:hover { box-shadow: 0 10px 22px rgba(59, 130, 246, 0.5) !important; } [data-mf] .small-arrow { width: 16px !important; height: 16px !important; fill: currentColor !important; } /* ---------- Footer overrides (mobile-compact, scoped to marketing pages) ---------- */ [data-mf] .site-footer { padding: 1rem 1rem 0.75rem !important; } [data-mf] .site-footer .footer-container { grid-template-columns: repeat(3, 1fr) !important; gap: 1rem !important; align-items: start !important; } [data-mf] .site-footer .footer-brand { grid-column: 1 / -1 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; margin-bottom: 0.5rem !important; } [data-mf] .site-footer .footer-brand .footer-logo-link { margin-bottom: 0 !important; gap: 0.4rem !important; } [data-mf] .site-footer .footer-brand .footer-icon { height: 2.25rem !important; width: 2.25rem !important; } [data-mf] .site-footer .footer-brand .footer-logo { height: 1.4rem !important; } [data-mf] .site-footer .footer-tagline { display: none !important; /* hidden on mobile, restored at >=900px below */ } [data-mf] .site-footer .footer-heading { font-size: 0.7rem !important; margin: 0 0 0.5rem !important; } [data-mf] .site-footer .footer-links li { margin-bottom: 0.3rem !important; } [data-mf] .site-footer .footer-links a { font-size: 0.82rem !important; } [data-mf] .site-footer .footer-copyright { font-size: 0.7rem !important; margin: 0.15rem auto 0 !important; } /* ---------- Tablet (>=640px) ---------- */ @media (min-width: 640px) { /* Desktop hero form: button encapsulated inside the input pill (the legacy treatment from main.css). On mobile the form stays stacked. */ [data-mf] .email-form { display: block !important; max-width: 480px !important; position: relative !important; gap: 0 !important; } [data-mf] .email-input { width: 100% !important; flex: none !important; padding: 1rem 1.5rem !important; padding-right: 11rem !important; /* room for the inner button pill */ text-align: left !important; } [data-mf] .submit-btn { position: absolute !important; right: 0.4rem !important; top: 50% !important; left: auto !important; transform: translateY(-50%) !important; width: auto !important; min-height: auto !important; flex-shrink: 0 !important; padding: 0.6rem 1.25rem !important; font-size: 0.95rem !important; border-radius: 999px !important; } [data-mf] .color-splotch-red, [data-mf] .color-splotch-description-section, [data-mf] .color-splotch-details-section, [data-mf] .color-splotch-next-steps-section, [data-mf] .color-splotch-contact-section { max-width: 320px !important; max-height: 320px !important; } } /* ---------- Tablet/laptop (>=768px) ---------- */ @media (min-width: 768px) { [data-mf] .tagline { font-size: clamp(2rem, 4.5vw, 2.75rem) !important; } [data-mf] .section-title { font-size: clamp(1.75rem, 4vw, 2.25rem) !important; } /* Tablet+: restore flex row, show all cards (cancel mobile grid-stack rotation) */ [data-mf] .cards-container { display: flex !important; flex-direction: row !important; align-items: stretch !important; max-width: 1100px !important; gap: 1.25rem !important; grid-template-columns: none !important; grid-template-areas: none !important; } [data-mf] .card { grid-area: auto !important; opacity: 1 !important; pointer-events: auto !important; flex: 1 !important; max-width: 360px !important; } [data-mf] .next-steps-blocks { flex-direction: row !important; max-width: 900px !important; gap: 1.25rem !important; align-items: stretch !important; } [data-mf] .next-steps-block { flex: 1 !important; padding: 2.25rem 1.5rem !important; } [data-mf] .contact-container { flex-direction: row !important; max-width: 980px !important; gap: 3rem !important; align-items: flex-start !important; } [data-mf] .contact-info, [data-mf] .contact-form { flex: 1 !important; } [data-mf] .contact-info { text-align: left !important; } [data-mf] .contact-form h4 { text-align: left !important; } [data-mf] .contact-submit-btn { align-self: flex-end !important; } [data-mf] #thumbs-left, [data-mf] #thumbs-right { display: block !important; } } /* ---------- Restore full footer at tablet+ ---------- */ @media (min-width: 900px) { [data-mf] .site-footer .footer-container { grid-template-columns: 2fr 1fr 1fr 1fr !important; gap: 1.5rem !important; } [data-mf] .site-footer .footer-brand { grid-column: auto !important; flex-direction: column !important; text-align: center !important; } [data-mf] .site-footer .footer-brand .footer-logo-link { margin-bottom: 0.15rem !important; /* tagline sits close to the logo */ gap: 0.5rem !important; } [data-mf] .site-footer .footer-brand .footer-icon { height: 3rem !important; width: 3rem !important; } [data-mf] .site-footer .footer-brand .footer-logo { height: 1.6rem !important; } [data-mf] .site-footer .footer-tagline { display: block !important; margin: 0 auto 0.1rem !important; } [data-mf] .site-footer .footer-heading { font-size: 0.78rem !important; margin: 0 0 0.6rem !important; } [data-mf] .site-footer .footer-links a { font-size: 0.85rem !important; } } /* ---------- Desktop (>=1024px) ---------- */ @media (min-width: 1024px) { [data-mf] .tagline { font-size: clamp(2.4rem, 4vw, 3.25rem) !important; } [data-mf] .color-splotch-red, [data-mf] .color-splotch-description-section, [data-mf] .color-splotch-details-section, [data-mf] .color-splotch-next-steps-section, [data-mf] .color-splotch-contact-section { max-width: 360px !important; max-height: 360px !important; } } /* ============================================================================= end marketing-mobile-first.css ============================================================================= */ /* Login Links toggle: reflect active state when any of its subitems is selected. Uses :has() to detect an active sub-button in the adjacent submenu. */ [data-mf] .dashboard-sidebar #loginLinksToggle:has(+ #loginLinksSubmenu .sidebar-item.sidebar-subitem.active) { --box-grad-angle: 225deg; --box-grad-c1: #10b981; /* green */ font-weight: 600 !important; color: var(--brand-cta) !important; } /* ===================================================================== GLOBAL-BUTTON-GRADIENT-CUTOUT-START The marketing CTA pills sample a single page-wide gradient instead of each carrying their own. `background-attachment: fixed` anchors the gradient to the viewport, so two buttons in different screen positions show different slices of the salmon -> blue -> teal sweep -- as if a single global gradient is "showing through" each button cut-out. The gradient itself comes from --brand-gradient-bg defined in the palette block at the top of this file. To revert: delete the rule below (everything between the START and END markers). Note: iOS Safari historically downgrades fixed attachment to scroll; in that case each button just shows the same diagonal gradient -- a graceful fallback, not broken. ===================================================================== */ [data-mf] .submit-btn, [data-mf] .contact-submit-btn, [data-mf] .premium-cta, [data-mf] .login-btn, [data-mf] a.login-btn, [data-mf] .register-btn, [data-mf] a.register-btn, [data-mf] .auth-btn, [data-mf] a.auth-btn, [data-mf] .install-cta, [data-mf] a.install-cta, [data-mf] .next-steps-block .demo-request-form button[type="submit"], [data-mf] .next-steps-block .free-trial-form button[type="submit"] { /* Local attachment with viewport-sized gradient. JS sets background-position per button on scroll/resize so each button shows the viewport-aligned slice -- the same effect background-attachment: fixed was supposed to give us, but reliable across transforms and mobile browsers. */ background-attachment: scroll !important; background-size: 100vw 100vh !important; background-repeat: no-repeat !important; /* Default to the gradient's center (clean blue) so buttons don't flash the salmon top-left corner before the cutout JS computes per-button offsets at DOMContentLoaded. JS overrides this to the viewport-aligned slice via setProperty(..., 'important'). */ background-position: 50% 50% !important; } /* GLOBAL-BUTTON-GRADIENT-CUTOUT-END */ /* ===== Auth page brand overrides (login, register, forgot, install, logout) ===== */ /* Sections: let the marketing splotches show through. */ [data-mf] .login-section, [data-mf] .register-section, [data-mf] .install-section { background: transparent !important; min-height: calc(100svh - 4rem) !important; padding: 5.5rem 1rem 3rem !important; } /* Card containers: gradient border + soft shadow, matching pricing-table-wrapper. */ [data-mf] .login-container, [data-mf] .register-container, [data-mf] .install-card, [data-mf] .auth-card, [data-mf] .logout-card { --box-grad-angle: 45deg; --box-grad-c1: #ef4444; --box-grad-c2: #3b82f6; background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(var(--box-grad-angle), var(--box-grad-c1) 0%, var(--box-grad-c2) 100%) border-box !important; border: 2px solid transparent !important; border-radius: 16px !important; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important; transition: --box-grad-angle 0.55s ease, --box-grad-c1 0.55s ease, --box-grad-c2 0.55s ease, box-shadow 0.25s ease !important; } [data-mf] .login-container:hover, [data-mf] .register-container:hover, [data-mf] .install-card:hover, [data-mf] .auth-card:hover, [data-mf] .logout-card:hover { --box-grad-angle: 225deg; --box-grad-c1: #10b981; box-shadow: 0 14px 40px rgba(15, 23, 42, 0.10) !important; } /* Title / subtitle typography aligned to marketing tagline. */ [data-mf] .login-title, [data-mf] .register-title { font-family: 'Inter', sans-serif !important; font-size: clamp(1.6rem, 5vw, 2.25rem) !important; color: var(--text-strong) !important; } [data-mf] .login-subtitle, [data-mf] .register-subtitle { font-family: 'Instrument Sans', sans-serif !important; color: var(--text-body) !important; } /* Inputs: pill style matching marketing email-input. */ [data-mf] .login-container .form-group input, [data-mf] .register-container .form-group input, [data-mf] .auth-card .form-group input, [data-mf] .password-input-wrapper input { border-radius: 22px !important; border: 2px solid var(--input-border) !important; background: var(--input-bg) !important; color: var(--input-text) !important; box-shadow: none !important; } [data-mf] .login-container .form-group input::placeholder, [data-mf] .register-container .form-group input::placeholder, [data-mf] .auth-card .form-group input::placeholder, [data-mf] .password-input-wrapper input::placeholder { color: var(--input-placeholder) !important; } [data-mf] .login-container .form-group input:focus, [data-mf] .register-container .form-group input:focus, [data-mf] .auth-card .form-group input:focus, [data-mf] .password-input-wrapper input:focus { border-color: var(--brand-cta) !important; background: var(--input-bg) !important; box-shadow: none !important; } /* Primary CTAs: pill + brand gradient, matching marketing submit-btn. Uses background-image (longhand) instead of the `background` shorthand -- shorthand resets background-size/position/repeat to initial, which trampled the cutout rule's background-size: 100vw 100vh for