/* ============================================================================ Sendfare landing version — shared stylesheet (hand-written, no Tailwind). The page itself is authored with inline styles (ported from the prototype); this file holds only what inline styles cannot express: element resets, keyframes, :root accent fallback, :hover states, and responsive collapse. Per-domain accent overrides are emitted server-side by {% sendfare_accent_vars %}. ========================================================================== */ /* Accent fallback (prototype emerald). Overridden in per-domain. */ :root { --accent: 5 150 105; --accent-deep: 4 120 87; --accent-soft: 209 250 229; color-scheme: light; } html { overflow-x: visible; } html, body { margin: 0; padding: 0; background: #ffffff; color: #1d1d1f; font-family: 'Geist', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { overflow-x: clip; } ::selection { background: rgb(var(--accent) / 0.18); } summary { list-style: none; } summary::-webkit-details-marker { display: none; } details[open] .faq-plus { transform: rotate(45deg); } a { -webkit-tap-highlight-color: transparent; } /* Alpine pre-init guard: anything marked x-cloak stays hidden until Alpine boots and removes the attribute. Without this rule the chatbox PANEL (x-show="open") flashed fully open on every page load, then snapped shut when Alpine initialized — the other themes all carry this rule. */ [x-cloak] { display: none !important; } /* Skip-to-content link (a11y) — visually hidden until focused. */ .sf-skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: #1d1d1f; color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0; font-size: 13px; font-weight: 600; text-decoration: none; } .sf-skip:focus { left: 0; } /* Marquee (reviews). Rows pause on hover. */ @keyframes marqL { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes marqR { from { transform: translateX(-50%); } to { transform: translateX(0); } } @keyframes blinkCaret { 50% { opacity: 0; } } /* Hero "$N starting credit" chip — a soft ring-pulse on its scan dot draws the eye without motion sickness (tiny, slow, opacity-only ring). */ @keyframes sfCreditPulse { 0%, 100% { box-shadow: 0 0 0 3px rgb(var(--accent) / 0.20); } 50% { box-shadow: 0 0 0 7px rgb(var(--accent) / 0.08); } } .sf-credit-dot { animation: sfCreditPulse 2.4s ease-in-out infinite; box-shadow: 0 0 0 3px rgb(var(--accent) / 0.20); } .marq-row:hover { animation-play-state: paused; } /* Card hover lift (replaces the prototype's non-standard style-hover attr). */ .op-fcard, .bf-card { transition: transform 0.35s ease; } @media (hover: hover) { .op-fcard:hover, .bf-card:hover { transform: translateY(-6px); } } /* Reduced motion: OWNER DECISION (PR #499) — full motion for everyone; the marquee is never disabled. No @media block on purpose. */ /* ============================ Responsive ================================= */ /* The page is desktop-first (prototype). These overrides keep everything on a single column at phone/tablet widths and stop the cinematic stage from bleeding. Inline grid declarations require !important to override. */ @media (max-width: 900px) { /* Footer: 5-col → 2-col */ footer [style*="grid-template-columns:1.4fr"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px !important; } } @media (max-width: 768px) { /* Features bento + How-it-works: multi-col → single col */ #op-grid { grid-template-columns: 1fr !important; } #op-grid > .op-fcard { grid-column: auto !important; } #op-steps { grid-template-columns: 1fr !important; } #op-steps > div[style*="position:absolute"] { display: none !important; } /* connector line */ /* FAQ two-col → stacked */ #faq > div { grid-template-columns: 1fr !important; gap: 28px !important; } /* Footer: → single col */ footer [style*="grid-template-columns:1.4fr"] { grid-template-columns: 1fr !important; gap: 32px !important; } /* Pinned journey: compress the cinematic stage so cards fit the viewport. Only left/right/top/width are overridden (never transform) so GSAP's transform-based x/y reveals still compose on top. The section is overflow:hidden, so any residual excess is clipped (no page scroll). */ #op-parcel { width: min(58vw, 260px) !important; top: 42% !important; } #op-addr { left: 8vw !important; right: 8vw !important; width: auto !important; transform: translate(0, -50%) !important; } #op-rateA { left: 6vw !important; right: auto !important; top: 12% !important; width: min(72vw, 260px) !important; } #op-rateB { left: 6vw !important; right: auto !important; top: 46% !important; width: min(62vw, 220px) !important; } #op-rateC { left: auto !important; right: 6vw !important; top: 62% !important; width: min(62vw, 220px) !important; } #op-print { left: 8vw !important; right: 8vw !important; top: 16% !important; width: auto !important; } #op-track { left: 8vw !important; right: 8vw !important; top: 14% !important; width: auto !important; } /* top 8% put the chip's brief act-4 cameo BEHIND the fixed nav island (~120px tall) — it played but was never seen. 15.5% clears the nav. */ #op-savedChip { left: 8vw !important; right: auto !important; top: 15.5% !important; } #op-route { width: 92vw !important; } } @media (max-width: 768px) { /* Tap targets: footer link rows and inline mono links are 14-20px tall at phone widths — give every footer/journal link a real touch box. */ footer a { display: inline-block; padding: 6px 0; } } @media (max-width: 480px) { /* Act 2 rate fan → tight vertical cascade. The previous tops (44%/66%) scattered the cards across the whole 844px stage and ran card C into the act caption (bottom 7%); these keep all three above the caption with even rhythm, and slim the cards so three fit comfortably. */ #op-rateA, #op-rateB, #op-rateC { width: min(84vw, 300px) !important; padding: 12px 16px !important; } #op-rateA { top: 15% !important; } /* clears the fixed nav island (~120px) */ #op-rateB { top: 34% !important; left: 12vw !important; } #op-rateC { top: 53% !important; left: 8vw !important; right: auto !important; } /* Act captions: lift clear of the rate cascade, and narrow so centered text never runs under the floating chat bubble (bottom-right). */ #op-cap1 > div, #op-cap2 > div, #op-cap3 > div, #op-cap4 > div { bottom: 4.5% !important; width: min(78vw, 640px) !important; } /* Act 1: balance the stage — parcel slightly higher, and the address card gets full-width placement so its slide-in never parks a sliver at the screen edge mid-scrub. */ #op-parcel { top: 36% !important; } #op-addr { left: 6vw !important; right: 6vw !important; } }