/* ========================================================= Tokens — kept in sync with the rest of the Fizook pages ========================================================= */ *,*::before,*::after{box-sizing:border-box} :root{ --bg:#0b1220; --surface:#ffffff; --surface-2:#f8fafc; --border:#e5e7eb; --text:#0f172a; --muted:#64748b; --primary:#2481bc; --primary-dark:#1a6494; --success:#16a34a; --success-light:#dcfce7; --danger:#dc2626; --warn:#f59e0b; --accent:#7c3aed; --shadow-sm:0 1px 3px rgba(15,23,42,.10); --shadow:0 6px 20px rgba(15,23,42,.14); --shadow-lg:0 20px 48px rgba(15,23,42,.24); --radius:14px; --radius-sm:10px; --radius-lg:20px; --radius-button:6px; } html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--surface-2);scroll-behavior:smooth} /* Body background is layered radial gradients (purple top-left, blue top-right, green bottom-center) over the surface-2 base. Adds visual depth without a heavy image; renders instantly and scales with any viewport. */ body{ min-height:100vh; background: radial-gradient(900px 500px at 10% -10%, rgba(124,58,237,.10), transparent 60%), radial-gradient(900px 500px at 110% 0%, rgba(36,129,188,.12), transparent 60%), radial-gradient(700px 420px at 50% 60%, rgba(22,163,74,.05), transparent 70%), #eef2f7; } /* Global element defaults — keep images inside their box, buttons in the page font, links inheriting parent color (colored per-context via .btn / .nav-link classes). */ img{max-width:100%;display:block} button{font-family:inherit} a{color:inherit} /* Scroll-progress bar — fixed 3px strip that widens from 0% to 100% as the page scrolls. Powered by the updateProgress() function in jscript/index.js. */ .scroll-progress{ position:fixed;top:0;left:0;height:3px;width:0%;z-index:90; background:linear-gradient(90deg,#22d3ee,#7c3aed,#16a34a); box-shadow:0 0 12px rgba(124,58,237,.5); transition:width .1s linear; } /* ========================================================= Top bar — sticky nav shared with every Fizook page ========================================================= */ /* Semi-transparent dark bar with a blur backdrop. Sticks to the top of the viewport so brand + nav are always reachable. z-index:50 keeps it under modals (z-index:200) but above hero content (z-index:1-2). */ .topbar{ position:sticky;top:0;z-index:50; background:rgba(11,18,32,.92);backdrop-filter:saturate(1.4) blur(10px); color:#fff;border-bottom:1px solid rgba(255,255,255,.08); } /* Inner wrapper caps content width at 1280px and keeps the row flex-aligned. */ .topbar-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:12px 16px} /* --- Admin menu (far-left dropdown) --- Discovery hub linking to internal docs (scenarios, style guide, emoji picker) and back-office tools (vendor analytics, redeem screens). Toggled by JS in jscript/index.js; closes on outside click or Esc. */ .admin-menu{position:relative;display:inline-block;flex:0 0 auto} .admin-btn{ background:rgba(255,255,255,.08);color:#fff;border:0; border-radius:6px;padding:7px 12px;cursor:pointer; font-family:inherit;font-size:.92rem;font-weight:700; display:inline-flex;align-items:center;gap:8px; transition:background .15s ease; } .admin-btn:hover{background:rgba(255,255,255,.18)} .admin-btn[aria-expanded="true"]{background:rgba(255,255,255,.18)} .admin-btn > i.fa-cogs{color:#22d3ee;font-size:.95rem} .admin-btn .admin-caret{color:#cbd5e1;font-size:.78rem;margin-left:2px;transition:transform .2s ease} .admin-btn[aria-expanded="true"] .admin-caret{transform:rotate(180deg)} /* Dropdown panel anchored to the button. right:0 makes it hug the button's right edge so it stays inside the viewport even on narrow screens. z-index:60 keeps it above the sticky topbar (50). */ .admin-dropdown{ position:absolute;top:100%;right:0;left:auto; margin-top:6px;min-width:210px; background:rgba(11,18,32,.98); border:1px solid rgba(255,255,255,.12); border-radius:10px;padding:6px; box-shadow:0 16px 40px rgba(0,0,0,.5); z-index:60; } .admin-dropdown[hidden]{display:none} .admin-link{ display:flex;align-items:center;gap:10px; padding:9px 12px;border-radius:6px; color:#cbd5e1;text-decoration:none; font-size:.92rem;font-weight:600; transition:background .15s ease,color .15s ease; } .admin-link:hover{background:rgba(255,255,255,.10);color:#fff} .admin-link.active{background:rgba(34,211,238,.15);color:#fff} .admin-link i{color:#22d3ee;width:14px;text-align:center;font-size:.92rem} .admin-section-label{ font-size:.66rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase; color:#94a3b8;padding:8px 12px 4px; } .admin-divider{ height:1px;background:rgba(255,255,255,.10);margin:6px 4px; } /* Restaurant-owner nudge shown in the diner login card. Amber warning styling because logging in on the wrong portal is a common mistake — this hands them a one-click bail-out to the vendor login. */ .wrong-portal{ display:flex;align-items:flex-start;gap:10px; padding:11px 14px;border-radius:12px; background:linear-gradient(135deg,rgba(245,158,11,.10),rgba(245,158,11,.04)); border:1px solid rgba(245,158,11,.35); color:#92400e;font-size:.84rem;line-height:1.45; margin-top:12px; } .wrong-portal i{color:#b45309;font-size:1rem;margin-top:1px;flex:0 0 auto} .wrong-portal strong{color:#7c2d12;font-weight:800} .wrong-portal a{color:#b45309;font-weight:800;text-decoration:none;white-space:nowrap} .wrong-portal a:hover{text-decoration:underline} @media (max-width:559.98px){ .admin-btn{padding:6px 10px;font-size:.86rem;gap:6px} .admin-btn-label{display:none} } /* --- Brand mark (FIZOOK AUCTIONS logo + colored dot) --- */ .brand{ font-weight:800;letter-spacing:.5px;font-size:1.25rem; display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff; } /* The glowing brand dot: gradient background + cyan halo. Its color is the one visual constant across every Fizook page. */ .brand .dot{ width:10px;height:10px;border-radius:50%; background:linear-gradient(135deg,#22d3ee,#7c3aed); box-shadow:0 0 16px rgba(34,211,238,.7); } /* "Live · N bidders" pill — hidden by default, only rendered on ≥1100px viewports where there's room next to the nav. */ .live-status{ display:none;align-items:center;gap:8px;font-size:.78rem;color:#cbd5e1; padding:5px 10px;border-radius:999px;background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.25); } .live-status .pulse-dot{ width:7px;height:7px;border-radius:50%;background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pulse 1.6s infinite; } @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)} 70%{box-shadow:0 0 0 12px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)} } @media (min-width:1100px){.live-status{display:inline-flex}} /* --- Nav (hamburger on phones, inline links on ≥900px) --- Below 900px only the hamburger button is visible; tapping it toggles the `.open` class on .topnav which flips it into a full-width dropdown. At ≥900px the toggle is hidden and .topnav is a flex row that ignores .open (see the override at the bottom of this block). */ .nav-toggle{margin-left:auto;background:rgba(255,255,255,.08);color:#fff;border:0;border-radius:6px;padding:11px 14px;min-width:44px;min-height:44px;cursor:pointer} .topnav{display:none} .nav-link{ background:transparent;border:0;font-family:inherit;color:#cbd5e1; text-decoration:none;font-size:.92rem;padding:6px 10px;border-radius:8px; display:inline-flex;align-items:center;gap:6px;cursor:pointer; } .nav-link:hover{background:rgba(255,255,255,.14);color:#fff} .nav-link.active{background:rgba(36,129,188,.25);color:#fff} @media (min-width:900px){ .nav-toggle{display:none} .topnav{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap} } /* Mobile drop-down state — absolutely positioned so it overlays the hero instead of pushing it down. Override below cancels this on ≥900px. */ .topnav.open{ display:flex;flex-direction:column;align-items:stretch;gap:2px; padding:8px 12px;background:rgba(11,18,32,.98); position:absolute;top:100%;left:0;right:0; border-bottom:1px solid rgba(255,255,255,.08); } @media (min-width:900px){.topnav.open{position:static;flex-direction:row;background:transparent;padding:0;border:0}} /* ========================================================= Hero — split layout: marketing pitch (left) + login card (right) ========================================================= On phones the two columns stack (single grid column). At ≥980px the grid switches to 1.1fr | 420px so the pitch dominates on desktop while the login card stays a comfortable form width. */ .hero{ position:relative;overflow:hidden; background:linear-gradient(135deg,#0b1220,#1a6494 50%,#7c3aed 110%); color:#fff;padding:60px 20px 80px; } /* Two decorative gradient blobs (cyan top-left, pink bottom-right) blur-filtered into soft glowing shapes. overflow:hidden on .hero keeps them from bleeding past the section edges on any screen. */ .hero::before,.hero::after{ content:"";position:absolute;border-radius:50%;filter:blur(50px);opacity:.55;pointer-events:none; } .hero::before{width:340px;height:340px;background:#22d3ee;top:-100px;left:-80px;animation:floatA 9s ease-in-out infinite} .hero::after {width:380px;height:380px;background:#ec4899;bottom:-140px;right:-80px;animation:floatB 11s ease-in-out infinite} /* Slow, offset float loops on the blobs so the hero feels alive without distracting from the copy. Different durations = irregular rhythm. */ @keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(20px)}} @keyframes floatB{0%,100%{transform:translate(0,0)}50%{transform:translate(-12px,-18px)}} /* --- Falling coin confetti --- Six emoji spans (💰💵🪙💸) positioned at fixed left-% columns and animated top→bottom on a linear loop. Staggered animation-delays keep them from all falling in sync. Emojis are decorative — the markup uses aria-hidden="true" so screen readers skip them. */ .coin{position:absolute;font-size:1.4rem;opacity:.85;pointer-events:none;animation:coinFall linear infinite} .coin.c1{left:8%; top:-40px;animation-duration:9s; animation-delay:0s} .coin.c2{left:24%;top:-40px;animation-duration:11s;animation-delay:1.6s} .coin.c3{left:40%;top:-40px;animation-duration:8s; animation-delay:.8s} .coin.c4{left:62%;top:-40px;animation-duration:12s;animation-delay:3s} .coin.c5{left:78%;top:-40px;animation-duration:10s;animation-delay:2.2s} .coin.c6{left:92%;top:-40px;animation-duration:13s;animation-delay:4.5s} @keyframes coinFall{ 0% {transform:translateY(-40px) rotate(0);opacity:0} 10% {opacity:.9} 90% {opacity:.9} 100%{transform:translateY(110vh) rotate(720deg);opacity:0} } /* Hero content container — z-index:1 lifts it above the blob pseudos. Single-column stack on phones, 1.1fr : 420px split at ≥980px. */ .hero-inner{ position:relative;z-index:1; max-width:1240px;margin:0 auto; display:grid;gap:38px;align-items:center; grid-template-columns:1fr; } @media (min-width:980px){ .hero-inner{grid-template-columns:minmax(0,1.1fr) minmax(0,420px);gap:48px} .pitch{position:relative;top:-25px !important;margin-bottom:-25px} } /* --- Hero pitch (left column) --- Marketing copy: live-count pill → headline → lead → CTA row → stat pills. Slides in from the left on load (slideInL). */ .pitch{display:flex;flex-direction:column;gap:18px;animation:slideInL .7s ease both} @keyframes slideInL{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}} /* Prominent hero wordmark — text version rendered in Bodoni Moda, each letter colored to match the original PNG palette (purple f, green i, orange z, blue o's, red k). Fluid font-size is tuned so the full word sits in roughly the same footprint the old img occupied (~260–420px wide). Animation stack: 1. logoPop — snappy scale+fade entrance on load (0.9s, once) 2. logoFloat — gentle vertical bob, infinite loop (4.5s) 3. logoGlow — soft drop-shadow pulses in/out (3.2s) transform-origin sits at bottom-center so the pop scales up naturally from the ground line. */ .hero-logo{ font-family:'Bodoni Moda',serif;font-weight:500; font-size:clamp(96px,13vw,150px);line-height:1.3;letter-spacing:-.02em; padding-top:.25em;margin-bottom:-25px;overflow:visible; align-self:flex-start;transform-origin:50% 100%; animation: logoPop .9s cubic-bezier(.2,1.2,.3,1) both, logoFloat 4.5s ease-in-out 1s infinite, logoGlow 3.2s ease-in-out 1s infinite; } /* Each letter is an inline-block with solid color (no background-clip trickery — that was truncating the top of tall glyphs like 'f' because the background box didn't reach above the ascender). Negative margin-left values nest letters into each other to match the overlap pattern in the reference image. */ .hero-logo span{ display:inline-block;position:relative;line-height:1.3; /* Layered drop shadow: soft dark cushion behind the letter for depth + a tight offset shadow for a printed-on-paper feel. */ text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.55), 0 14px 28px rgba(0,0,0,.35); } .hero-logo .l-f{color:#c084fc;font-size:1.35em} /* neon violet */ .hero-logo .l-i{color:#4ade80;margin-left:-.18em} /* neon lime */ .hero-logo .l-z{color:#fbbf24;margin-left:-.02em} /* neon gold */ .hero-logo .l-o1{color:#3b82f6;margin-left:-.12em}/* neon blue */ .hero-logo .l-o2{color:#3b82f6;margin-left:-.08em} .hero-logo .l-k{color:#f97316;margin-left:-.10em} /* neon orange */ /* ™ superscript — small, sits at top-right of the k. Font-size in em so it scales with the wordmark; sans-serif to distinguish it from the Bodoni glyphs. Vertical-align:super lifts it above the baseline. */ .hero-logo .mark-tm{ font-family:'Inter',sans-serif;font-weight:600; font-size:.22em;vertical-align:super; color:rgba(255,255,255,.85);margin-left:.05em; text-shadow:0 2px 6px rgba(0,0,0,.5); } /* © notice — small line below the wordmark. */ .hero-logo-copy{ align-self:flex-start; font-family:'Inter',sans-serif;font-size:.78rem;font-weight:500; letter-spacing:.5px;color:rgba(255,255,255,.6); margin-top:2px; } @media (max-width:559.98px){ .hero-logo-copy{align-self:center} } /* Entrance: fade in while scaling from 60% up past 100% and settling. */ @keyframes logoPop{ 0% {opacity:0;transform:translateY(20px) scale(.6) rotate(-4deg)} 60% {opacity:1;transform:translateY(-6px) scale(1.05) rotate(1deg)} 100% {opacity:1;transform:translateY(0) scale(1) rotate(0)} } /* Idle float: small vertical bob, keeps the mark feeling alive. */ @keyframes logoFloat{ 0%,100%{transform:translateY(0)} 50% {transform:translateY(-8px)} } /* Idle glow: cyan drop-shadow breathes brighter/dimmer. Kept separate from the transform loop so the two can run at different tempos. */ @keyframes logoGlow{ 0%,100%{filter:drop-shadow(0 10px 24px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(34,211,238,.20))} 50% {filter:drop-shadow(0 14px 30px rgba(0,0,0,.5)) drop-shadow(0 0 42px rgba(34,211,238,.55))} } /* Interactive nudge — hover pauses the bob and pops the mark forward. */ .hero-logo:hover{ animation-play-state:paused,paused,running; transform:translateY(-4px) scale(1.04); transition:transform .25s ease; } /* Respect reduced-motion — skip the flight path and looping bob, just fade the mark in place so users with motion sensitivity don't get a swooping animation across their viewport. */ @media (prefers-reduced-motion:reduce){ .hero-logo{animation:logoFadeIn .5s ease both} @keyframes logoFadeIn{from{opacity:0}to{opacity:1}} } /* "Live · N restaurants are bidding" pill above the headline. The count is animated in JS (see the heroLive block in jscript/index.js). */ .hero-tag{ display:inline-flex;align-items:center;gap:8px;align-self:flex-start; background:rgba(255,255,255,.12);padding:6px 14px;border-radius:999px; font-size:.74rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase; } .hero-tag .pulse-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:pulse 1.6s infinite} /* Fluid headline: 1.9rem on tiny phones → 3.4rem on desktop. clamp() replaces the need for per-breakpoint font-size overrides. */ .hero h1{ margin:0;font-size:clamp(1.9rem,4.5vw,3.4rem); font-weight:800;letter-spacing:-1px;line-height:1.05;max-width:680px; } /* Gradient text on the accent phrase inside h1 (e.g. "for your business."). -webkit-background-clip:text is the CSS trick that paints the linear gradient onto the glyphs. background-size:200% + gradShift keyframes slowly slide the gradient sideways for a subtle shimmer. */ .hero h1 .gradient-text{ background:linear-gradient(135deg,#22d3ee 0%,#a78bfa 50%,#fbcfe8 100%); -webkit-background-clip:text;background-clip:text;color:transparent; background-size:200% 200%;animation:gradShift 8s ease infinite; } @keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} .hero p.lead{margin:0;font-size:clamp(.95rem,1.4vw,1.1rem);line-height:1.55;opacity:.92;max-width:560px} /* CTA row (Run an auction + How it works) — wraps on narrow screens. */ .hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px} /* --- Mini stat pills row (below the CTA) --- "$87 avg saved / 32% off / 90s start-to-deal" glass-morphic pills. Each pill has a colored strong number driven by the .green/.cyan/.pink modifier class. Backdrop-filter blur gives them the frosted glass look. */ .pitch-stats{ display:flex;flex-wrap:wrap;gap:8px;margin-top:8px; } .pitch-stat{ background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16); border-radius:10px;padding:8px 12px; backdrop-filter:saturate(1.4) blur(8px); display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600; } .pitch-stat strong{font-weight:800;font-size:1rem} .pitch-stat.green strong{color:#a7f3d0} .pitch-stat.cyan strong{color:#a5f3fc} .pitch-stat.pink strong{color:#fbcfe8} /* --- Login card (right column) --- Frosted white card with a rainbow glow border pseudo (::before). Slides in from the right on load (slideInR). Contains: email/password form → OR divider → social buttons → "restaurant owner?" nudge. */ .login-card{ position:relative; background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(10px); border:1px solid rgba(255,255,255,.6); color:var(--text); border-radius:var(--radius-lg); padding:24px 22px 22px; box-shadow:var(--shadow-lg); animation:slideInR .7s ease both; } @keyframes slideInR{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}} /* The rainbow halo behind the card — inset:-1px + blur:14px gives a soft cyan→purple→pink glow that reads as "premium" without heavy imagery. */ .login-card::before{ content:"";position:absolute;inset:-1px;border-radius:var(--radius-lg); background:linear-gradient(135deg,rgba(34,211,238,.7),rgba(124,58,237,.7),rgba(236,72,153,.7)); z-index:-1;filter:blur(14px);opacity:.55; } .login-head{text-align:center;margin-bottom:16px} .login-head h2{margin:0;font-size:1.4rem;font-weight:800;letter-spacing:-.3px} .login-head p{margin:4px 0 0;font-size:.86rem;color:var(--muted)} /* --- Form field primitives (label + input-wrap + input) --- .field is the outer column; .input-wrap positions the icon (::i) and optional password toggle over the input. min-width:0 lets the field shrink when its parent is a narrow flex container. */ .field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;min-width:0} .field label{ font-size:.7rem;color:var(--muted);text-transform:uppercase; letter-spacing:.6px;font-weight:700; } .input-wrap{position:relative} /* Leading Font Awesome icon inside the input (envelope, lock, etc). pointer-events:none so clicks pass through to the field. */ .input-wrap > i{ position:absolute;left:12px;top:50%;transform:translateY(-50%); color:var(--muted);font-size:.95rem;pointer-events:none; } /* Text input. padding-left:36px reserves space for the leading icon. font-size:1rem (16px) is critical: iOS Safari auto-zooms when a form input has font-size < 16px on focus — must stay at 1rem. */ .input{ width:100%;font-family:inherit;color:var(--text); background:#fff;border:1px solid var(--border);border-radius:10px; padding:11px 12px 11px 36px;font-size:1rem; transition:border-color .15s ease,box-shadow .15s ease,background .15s ease; } .input:focus{ outline:0;border-color:var(--primary); box-shadow:0 0 0 3px rgba(36,129,188,.18); background:#fff; } /* Show/hide password eye button. Sits at right of the password field. JS in jscript/index.js flips input.type between password/text on click and swaps the fa-eye / fa-eye-slash icon accordingly. */ .pw-toggle{ position:absolute;right:6px;top:50%;transform:translateY(-50%); width:40px;height:40px;border-radius:8px;border:0;background:transparent;color:var(--muted); cursor:pointer;display:grid;place-items:center; transition:background .15s ease,color .15s ease; } .pw-toggle:hover{background:#f1f5f9;color:var(--text)} /* "Remember me" checkbox on the left + "Forgot password?" link on the right. */ .row-inline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 14px;font-size:.86rem} .check-row{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--text)} .check-row input{accent-color:var(--primary);width:auto} .row-inline a{color:var(--primary);font-weight:700;text-decoration:none} .row-inline a:hover{text-decoration:underline} /* --- Button system --- .btn is the shared shell; variant classes (.btn-primary/-success/-ghost/ -ghost-light/-social) supply the color scheme. .btn-block spans full width, .btn-lg bumps padding for hero-sized CTAs. All buttons lift 1px on hover for consistent feedback. */ .btn{ appearance:none;border:0;cursor:pointer;font-weight:700; padding:11px 16px;border-radius:var(--radius-button);font-size:.95rem; display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:inherit;text-decoration:none; transition:transform .15s ease,box-shadow .15s ease,background .15s ease,opacity .15s ease; } .btn:hover{transform:translateY(-1px)} .btn-primary{background:linear-gradient(135deg,#2481bc,#1a6494);color:#fff;box-shadow:0 4px 12px rgba(36,129,188,.32)} /* Success (green) variant is the primary CTA on this page ("Run auction", "Sign in"). The ::after pseudo is a diagonal white sheen that sweeps across on hover — pointer-events:none keeps it non-interactive. */ .btn-success{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;box-shadow:0 6px 18px rgba(22,163,74,.4);position:relative;overflow:hidden} .btn-success::after{ content:"";position:absolute;inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%); transform:translateX(-100%);transition:transform .6s ease;pointer-events:none; } .btn-success:hover::after{transform:translateX(100%)} /* Ghost variants: subtle. .btn-ghost is light-on-dark (for dark cards), .btn-ghost-light is dark-on-transparent (for the dark hero). */ .btn-ghost{background:#f1f5f9;color:var(--text);border:1px solid var(--border)} .btn-ghost:hover{background:#e2e8f0} .btn-ghost-light{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3)} .btn-ghost-light:hover{background:rgba(255,255,255,.26)} .btn-block{width:100%} .btn-lg{padding:13px 20px;font-size:1rem} /* "OR" separator between the email/password form and social sign-in. ::before + ::after are two flex:1 hairlines that automatically fill the space either side of the label. */ .or-divider{ display:flex;align-items:center;gap:10px;margin:14px 0; color:var(--muted);font-size:.78rem;font-weight:700;letter-spacing:.6px; } .or-divider::before,.or-divider::after{ content:"";flex:1;height:1px;background:var(--border); } /* --- Social sign-in buttons (Google / Facebook / Apple) --- Each button uses its brand color/background. The icon inside scales up 15% on hover to add a subtle interactive tell. */ .social{display:grid;gap:8px} .btn-social{ width:100%;background:#fff;color:#1f2937;border:1px solid var(--border); transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease; } .btn-social:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:#cbd5e1} .btn-social i{font-size:1.05rem;transition:transform .15s ease} .btn-social:hover i{transform:scale(1.15)} .btn-social.google i{color:#DB4437} .btn-social.facebook{background:#1877F2;color:#fff;border-color:transparent} .btn-social.facebook:hover{background:#1564d1} .btn-social.apple{background:#0f172a;color:#fff;border-color:transparent} .btn-social.apple:hover{background:#020617} /* "Don't have an account?" text below the social buttons. */ .login-foot{ text-align:center;margin-top:14px;font-size:.86rem;color:var(--muted); } .login-foot a{color:var(--primary);font-weight:700;text-decoration:none} .login-foot a:hover{text-decoration:underline} /* ========================================================= Layout below hero ========================================================= .wrap is the vertical spine that holds the stat strip, live peek, feature grid, audience picker, vendor invite, and final CTA. margin-top:-40px lifts the first card up into the hero's bottom edge so the transition reads as a single composition. z-index:2 puts it above the hero's decorative blobs. */ .wrap{ max-width:1240px;margin:-40px auto 0;padding:0 16px 60px;position:relative;z-index:2; display:grid;gap:32px; } /* ========================================================= Stat strip — 4 animated counters (headline social proof) ========================================================= auto-fit + minmax(160px,1fr) means the strip is 4-across on desktop, collapses to 2-across on tablet, and 1-across on tiny phones without explicit breakpoints. Numbers count up via animateCount() in the JS block, triggered by IntersectionObserver at 50% visibility. */ .stat-strip{ display:grid;gap:14px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-lg);padding:22px; box-shadow:var(--shadow-lg); animation:cardIn .6s ease both; } .stat-tile{ text-align:center;padding:14px 10px;border-radius:var(--radius); background:linear-gradient(180deg,rgba(36,129,188,.04),rgba(124,58,237,.04)); border:1px solid rgba(36,129,188,.1); transition:transform .2s ease,box-shadow .2s ease; } .stat-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)} /* Big number. clamp() keeps it readable from tiny phones to desktop. Gradient text via background-clip (same technique as .hero h1 .gradient-text). Color variants (.green/.amber/.cyan) override the base blue→purple. */ .stat-tile .v{ font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:800;letter-spacing:-.5px;line-height:1; background:linear-gradient(135deg,#2481bc,#7c3aed); -webkit-background-clip:text;background-clip:text;color:transparent; } .stat-tile .v.green{background:linear-gradient(135deg,#16a34a,#15803d);-webkit-background-clip:text;background-clip:text;color:transparent} .stat-tile .v.amber{background:linear-gradient(135deg,#f59e0b,#b45309);-webkit-background-clip:text;background-clip:text;color:transparent} .stat-tile .v.cyan {background:linear-gradient(135deg,#22d3ee,#0891b2);-webkit-background-clip:text;background-clip:text;color:transparent} .stat-tile .k{margin-top:6px;font-size:.78rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.6px} /* ========================================================= Section heads & reveal-on-scroll ========================================================= .block gets a slide-up-fade on initial paint (cardIn). .reveal is for below-the-fold sections — added by JS via IntersectionObserver when the element crosses 12% into view. Two-step so above-the-fold animates immediately while below-the-fold waits for scroll. */ section.block{animation:cardIn .6s ease both} @keyframes cardIn{ 0%{opacity:0;transform:translateY(20px)} 100%{opacity:1;transform:translateY(0)} } .reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease} .reveal.in{opacity:1;transform:translateY(0)} /* Shared centered header pattern used by every below-the-fold section (feature grid, audience picker, etc.): small tag pill → h2 → lead p. */ .section-head{text-align:center;max-width:720px;margin:0 auto 22px} .section-tag{ display:inline-flex;align-items:center;gap:8px; background:rgba(36,129,188,.10);color:var(--primary); padding:5px 12px;border-radius:999px;font-size:.7rem;font-weight:800; letter-spacing:.7px;text-transform:uppercase; } .section-head h2{margin:14px 0 10px;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;letter-spacing:-.5px;line-height:1.15} .section-head p{margin:0;color:var(--muted);line-height:1.55;font-size:1rem} /* ========================================================= Live peek — animated bidder grid demo ========================================================= Dark card showing what an in-progress auction looks like: a 3×2 grid (2×3 on phones) of restaurant tiles where the price flashes green and drops each tick. The BEST badge auto-migrates to whichever tile has the lowest price. All logic lives in the tick() function inside jscript/index.js, gated by an IntersectionObserver so the timer only runs while the card is visible. */ .live-peek{ background:linear-gradient(180deg,#0b1220,#1a6494 80%,#0b1220); color:#fff;border-radius:var(--radius-lg);padding:30px 24px; box-shadow:var(--shadow-lg);position:relative;overflow:hidden; } /* Radial glow corner accents (top-left cyan, bottom-right pink). */ .live-peek::before{content:"";position:absolute;left:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,#22d3ee,transparent 70%);opacity:.45;pointer-events:none} .live-peek::after {content:"";position:absolute;right:-40px;bottom:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,#ec4899,transparent 70%);opacity:.45;pointer-events:none} /* Live-peek header: pulsing "Live · prices dropping now" tag + h2 + lead. */ .live-peek-head{text-align:center;margin-bottom:18px;position:relative;z-index:1} .live-peek-head .tag{ display:inline-flex;align-items:center;gap:8px; background:rgba(255,255,255,.12);padding:5px 12px;border-radius:999px; font-size:.7rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase; } .live-peek-head .tag .pulse-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:pulse 1.6s infinite} .live-peek-head h2{margin:12px 0 6px;font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800;letter-spacing:-.3px} .live-peek-head p{margin:0;opacity:.85;font-size:.95rem} /* Bidder tile grid: 3 columns on tablet+, 2 on phones. Six .bd-card children (see markup in index.html). */ .bidder-grid-demo{ position:relative;z-index:1; display:grid;gap:10px;grid-template-columns:repeat(3,1fr); max-width:680px;margin:0 auto; } @media (max-width:559.98px){.bidder-grid-demo{grid-template-columns:repeat(2,1fr)}} /* Single restaurant tile — glass card with logo → name → strike-through "was" price → live "now" price. .best variant is applied by JS to whichever tile currently has the lowest price. */ .bd-card{ background:rgba(255,255,255,.06); backdrop-filter:saturate(1.4) blur(8px); border:1px solid rgba(255,255,255,.12); border-radius:12px;padding:12px 10px;text-align:center;position:relative;overflow:hidden; } .bd-card.best{border-color:rgba(34,197,94,.7);box-shadow:0 0 0 2px rgba(34,197,94,.25)} /* Green "BEST" ribbon in the top-right of the winning tile. Content is set from the pseudo, so the DOM stays clean — no JS text swap needed. */ .bd-card.best::after{ content:"BEST";position:absolute;top:6px;right:6px; font-size:.6rem;font-weight:800;letter-spacing:.5px; background:linear-gradient(135deg,#16a34a,#15803d);color:#fff; padding:2px 6px;border-radius:999px; } /* Fake restaurant logo — colored gradient circle with 2-letter initials. .b1-.b6 give each tile a unique color so they're distinguishable. */ .bd-logo{ width:42px;height:42px;border-radius:50%; margin:0 auto 8px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.86rem; } .bd-logo.b1{background:linear-gradient(135deg,#ef4444,#b91c1c)} .bd-logo.b2{background:linear-gradient(135deg,#f59e0b,#b45309)} .bd-logo.b3{background:linear-gradient(135deg,#10b981,#047857)} .bd-logo.b4{background:linear-gradient(135deg,#3b82f6,#1d4ed8)} .bd-logo.b5{background:linear-gradient(135deg,#8b5cf6,#6d28d9)} .bd-logo.b6{background:linear-gradient(135deg,#ec4899,#be185d)} .bd-name{font-size:.7rem;opacity:.8;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bd-was{font-size:.65rem;opacity:.65;text-decoration:line-through;display:block} /* Live price — JS toggles .flash on each tick to briefly scale + tint the number green, communicating "just dropped". */ .bd-price{ font-size:1rem;font-weight:800;color:#a5f3fc; transition:color .3s ease,transform .3s ease; } .bd-price.flash{color:#a7f3d0;transform:scale(1.18)} /* Footer of the live peek: two CTAs (Run auction / See a full auction). */ .live-peek-foot{ text-align:center;margin-top:18px;position:relative;z-index:1; display:flex;justify-content:center;gap:10px;flex-wrap:wrap; } /* ========================================================= Why-grid — 4 value-prop feature cards ========================================================= Explains what makes Fizook worth using: reverse auction, real-time drops, hold-up-to-6, no-commitment. Grid auto-fits by minmax(220px,1fr) so it goes 4→3→2→1 columns without breakpoints. */ .feature-grid{ display:grid;gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } /* Base feature card. Two decorative pseudos: ::before is the colored left stripe, ::after is the soft corner glow. Both are keyed off the inner .feature-icon color via :has() so the accent matches the icon automatically (no manual color-per-card wiring). */ .feature-card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);padding:20px 20px 20px 24px; box-shadow:var(--shadow); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; position:relative;overflow:hidden; } /* Colored left accent stripe (overridden per icon color below). */ .feature-card::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:4px; background:linear-gradient(180deg,#2481bc,#1a6494); border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius); z-index:1; } /* Soft corner glow tinted with the feature color. */ .feature-card::after{ content:"";position:absolute;left:0;top:0;width:60%;height:140px; background:radial-gradient(ellipse at top left,rgba(36,129,188,.10),transparent 70%); pointer-events:none;z-index:0; } .feature-card:has(.feature-icon.blue)::before {background:linear-gradient(180deg,#2481bc,#1a6494)} .feature-card:has(.feature-icon.blue)::after {background:radial-gradient(ellipse at top left,rgba(36,129,188,.10),transparent 70%)} .feature-card:has(.feature-icon.purple)::before{background:linear-gradient(180deg,#7c3aed,#5b21b6)} .feature-card:has(.feature-icon.purple)::after {background:radial-gradient(ellipse at top left,rgba(124,58,237,.10),transparent 70%)} .feature-card:has(.feature-icon.green)::before {background:linear-gradient(180deg,#16a34a,#15803d)} .feature-card:has(.feature-icon.green)::after {background:radial-gradient(ellipse at top left,rgba(22,163,74,.10),transparent 70%)} .feature-card:has(.feature-icon.amber)::before {background:linear-gradient(180deg,#f59e0b,#b45309)} .feature-card:has(.feature-icon.amber)::after {background:radial-gradient(ellipse at top left,rgba(245,158,11,.10),transparent 70%)} .feature-card > *{position:relative;z-index:2} .feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#cbd5e1} /* Icon square in the card header. On hover: rotates -8° and scales 1.08 — small "wobble" tell that reinforces the card is interactive. */ .feature-icon{ width:42px;height:42px;border-radius:11px; display:grid;place-items:center;color:#fff;font-size:1.05rem; box-shadow:var(--shadow-sm);transition:transform .25s ease; } .feature-card:hover .feature-icon{transform:rotate(-8deg) scale(1.08)} .feature-icon.blue{background:linear-gradient(135deg,#2481bc,#1a6494)} .feature-icon.purple{background:linear-gradient(135deg,#7c3aed,#5b21b6)} .feature-icon.green{background:linear-gradient(135deg,#16a34a,#15803d)} .feature-icon.amber{background:linear-gradient(135deg,#f59e0b,#b45309)} .feature-card h3{margin:14px 0 6px;font-size:1.05rem;font-weight:800} .feature-card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5} /* ========================================================= Audience picker — 3 entry cards (Diner / Vendor / Returning) ========================================================= Same visual language as .feature-card (left stripe + corner glow + colored icon) but each is a clickable that routes to the right onboarding flow. Diner → register, Vendor → vendor login, Returning → auction-details. Colors are keyed off the variant class instead of :has() because we know upfront which is which. */ .aud-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .aud-card{ position:relative;overflow:hidden; background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);padding:24px 24px 24px 28px;text-align:left; box-shadow:var(--shadow); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit; } /* Colored left accent stripe + corner glow (keyed off audience variant). */ .aud-card::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:4px; background:linear-gradient(180deg,#2481bc,#1a6494); border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius); z-index:1; } .aud-card::after{ content:"";position:absolute;left:0;top:0;width:60%;height:140px; background:radial-gradient(ellipse at top left,rgba(36,129,188,.10),transparent 70%); pointer-events:none;z-index:0; } .aud-card.diner::before {background:linear-gradient(180deg,#2481bc,#1a6494)} .aud-card.diner::after {background:radial-gradient(ellipse at top left,rgba(36,129,188,.10),transparent 70%)} .aud-card.vendor::before {background:linear-gradient(180deg,#f59e0b,#b45309)} .aud-card.vendor::after {background:radial-gradient(ellipse at top left,rgba(245,158,11,.10),transparent 70%)} .aud-card.returning::before{background:linear-gradient(180deg,#16a34a,#15803d)} .aud-card.returning::after {background:radial-gradient(ellipse at top left,rgba(22,163,74,.10),transparent 70%)} .aud-card > *{position:relative;z-index:2} .aud-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#cbd5e1} /* Icon square in the card header. Same wobble hover as .feature-icon. */ .aud-card .aud-ico{ width:44px;height:44px;border-radius:12px; display:grid;place-items:center;color:#fff;font-size:1.1rem; transition:transform .25s ease; } .aud-card:hover .aud-ico{transform:rotate(-8deg) scale(1.08)} .aud-card.diner .aud-ico{background:linear-gradient(135deg,#2481bc,#1a6494)} .aud-card.vendor .aud-ico{background:linear-gradient(135deg,#f59e0b,#b45309)} .aud-card.returning .aud-ico{background:linear-gradient(135deg,#16a34a,#15803d)} .aud-card h3{margin:6px 0 0;font-size:1.15rem;font-weight:800} .aud-card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5} .aud-card .aud-link{ margin-top:auto;display:inline-flex;align-items:center;gap:6px; color:var(--primary);font-weight:800;font-size:.88rem; } /* Arrow at the end of the "→" link slides right on hover. Subtle "click me" cue. */ .aud-card .aud-link i{transition:transform .2s ease} .aud-card:hover .aud-link i{transform:translateX(4px)} /* ========================================================= Vendor invite ribbon — attention-grabbing strip pulling restaurant owners over to the vendor sign-up path ========================================================= Larger + brighter than everything around it because vendor sign-up is the highest-value acquisition on this page. Uses a slow diagonal gradient shift (gradShift) + pulsing badge + pulsing CTA + falling food/trophy emojis to feel maximally animated without being loud. */ .vendor-invite{ position:relative;overflow:hidden; border-radius:var(--radius-lg); padding:42px 30px;text-align:center;color:#fff; background:linear-gradient(135deg,#16a34a 0%,#15803d 25%,#f59e0b 65%,#ea580c 100%); background-size:200% 200%; animation:gradShift 9s ease infinite, cardIn .6s ease both; box-shadow:0 24px 60px rgba(22,163,74,.35),0 10px 28px rgba(245,158,11,.25); border:1px solid rgba(255,255,255,.18); } .vendor-invite::before{ content:"";position:absolute;left:-60px;top:-60px;width:240px;height:240px;border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.28),transparent 70%); pointer-events:none;animation:floatA 9s ease-in-out infinite; } .vendor-invite::after{ content:"";position:absolute;right:-60px;bottom:-60px;width:280px;height:280px;border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%); pointer-events:none;animation:floatB 11s ease-in-out infinite; } .vendor-invite > *{position:relative;z-index:2} /* Falling emoji column inside the ribbon — reuses the coinFall keyframe from the hero. Emojis are food/trophy themed (🍴🏆💰🍳) to reinforce "restaurants winning customers". Six columns with staggered delays. */ .vendor-invite .vi-coin{ position:absolute;font-size:1.4rem;opacity:.85;pointer-events:none; animation:coinFall linear infinite;z-index:1; } .vendor-invite .vi-coin.v1{left:6%; top:-40px;animation-duration:7s; animation-delay:.2s} .vendor-invite .vi-coin.v2{left:22%;top:-40px;animation-duration:9s; animation-delay:1.4s} .vendor-invite .vi-coin.v3{left:42%;top:-40px;animation-duration:8s; animation-delay:.6s} .vendor-invite .vi-coin.v4{left:62%;top:-40px;animation-duration:10s;animation-delay:2.4s} .vendor-invite .vi-coin.v5{left:80%;top:-40px;animation-duration:8.5s;animation-delay:1.8s} .vendor-invite .vi-coin.v6{left:94%;top:-40px;animation-duration:11s;animation-delay:3.2s} /* "🔥 Restaurant Owners" pill at the top of the ribbon. Pulses outward with a ring of white light every 2.2s — matches the pulse cadence used elsewhere (hero live tag, live-peek tag) for visual consistency. */ .vi-badge{ display:inline-flex;align-items:center;gap:8px; background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35); padding:7px 16px;border-radius:999px;font-size:.78rem;font-weight:800; letter-spacing:.8px;text-transform:uppercase;color:#fff; backdrop-filter:saturate(1.4) blur(8px); box-shadow:0 0 0 0 rgba(255,255,255,.5); animation:viBadgePulse 2.2s ease-in-out infinite; } @keyframes viBadgePulse{ 0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.5),0 6px 18px rgba(0,0,0,.18);transform:scale(1)} 50%{box-shadow:0 0 0 10px rgba(255,255,255,0),0 6px 18px rgba(0,0,0,.18);transform:scale(1.04)} } /* Ribbon headline. Same clamp() sizing as .hero h1. The "YOU?" gradient word inherits the amber-to-cream gradient defined immediately below. */ .vendor-invite h2{ margin:18px 0 10px; font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.6px;line-height:1.1; text-shadow:0 2px 12px rgba(0,0,0,.18); } .vendor-invite h2 .gradient-text{ background:linear-gradient(135deg,#fde68a 0%,#fef3c7 50%,#fbbf24 100%); -webkit-background-clip:text;background-clip:text;color:transparent; background-size:200% 200%;animation:gradShift 4s ease infinite; } .vendor-invite p{ margin:0 auto 22px;max-width:680px;font-size:1.02rem;line-height:1.55; opacity:.96;text-shadow:0 1px 6px rgba(0,0,0,.18); } /* Main CTA button — pill-shaped with a green→amber gradient. Pulses a white outer ring (viCtaPulse) so it's always slightly moving; the diagonal sheen (::after) sweeps across on hover for polish. */ .vi-cta{ display:inline-flex;align-items:center;gap:10px; padding:16px 28px;border-radius:999px; font-size:1.05rem;font-weight:800;letter-spacing:.3px; color:#fff;text-decoration:none; background:linear-gradient(135deg,#15803d 0%,#16a34a 35%,#f59e0b 100%); box-shadow:0 10px 24px rgba(21,128,61,.45),0 4px 12px rgba(245,158,11,.35),0 0 0 0 rgba(255,255,255,.5); position:relative;overflow:hidden; animation:viCtaPulse 2.4s ease-in-out infinite; transition:transform .2s ease,box-shadow .2s ease; } .vi-cta::after{ content:"";position:absolute;inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); transform:translateX(-120%);transition:transform .8s ease;pointer-events:none; } .vi-cta:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 14px 30px rgba(21,128,61,.55),0 6px 18px rgba(245,158,11,.45)} .vi-cta:hover::after{transform:translateX(120%)} .vi-cta i{transition:transform .2s ease} .vi-cta:hover i{transform:translateX(4px)} @keyframes viCtaPulse{ 0%,100%{box-shadow:0 10px 24px rgba(21,128,61,.45),0 4px 12px rgba(245,158,11,.35),0 0 0 0 rgba(255,255,255,.5)} 50%{box-shadow:0 14px 30px rgba(21,128,61,.55),0 6px 18px rgba(245,158,11,.45),0 0 0 14px rgba(255,255,255,0)} } @media (max-width:559.98px){ .vendor-invite{padding:30px 18px} .vendor-invite p{font-size:.95rem} .vi-cta{padding:14px 22px;font-size:.98rem} } /* ========================================================= Final CTA — last-chance conversion band at the bottom ========================================================= Green→teal gradient card with a soft top-left highlight (::before). Two CTAs: "See how it works" (ghost) + "Create my free account" (white on green). Simpler than the vendor invite because most users will have decided by this point. */ .final-cta{ background:linear-gradient(135deg,#16a34a 0%,#15803d 50%,#0e7490 100%); color:#fff;border-radius:var(--radius-lg); padding:36px 26px;text-align:center; box-shadow:var(--shadow-lg);position:relative;overflow:hidden; } .final-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 30% -20%, rgba(255,255,255,.18), transparent 70%);pointer-events:none} .final-cta h2{margin:0 0 8px;font-size:clamp(1.5rem,2.8vw,2rem);font-weight:800;letter-spacing:-.3px;position:relative;z-index:1} .final-cta p{margin:0 0 18px;opacity:.92;font-size:1rem;position:relative;z-index:1} .final-cta .cta-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1} /* ========================================================= Footer — dark 4-column link grid + bottom copyright bar ========================================================= Content: brand blurb (with socials) → Quick Links → Company → Support. auto-fit(minmax(220px,1fr)) collapses to fewer columns on narrow screens without breakpoints. */ footer.fz-footer{background:#0b1220;color:#cbd5e1;border-top:1px solid rgba(255,255,255,.08);margin-top:32px} .fz-footer-inner{max-width:1240px;margin:0 auto;padding:40px 24px 24px;display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .fz-footer h3{margin:0 0 12px;color:#fff;font-size:1.1rem;font-weight:800} .fz-footer h4{margin:0 0 12px;color:#fff;font-size:.92rem;font-weight:700;letter-spacing:.4px} .fz-footer p{margin:0 0 14px;font-size:.86rem;line-height:1.55;opacity:.8} .fz-footer ul{list-style:none;padding:0;margin:0} .fz-footer li{margin-bottom:8px} .fz-footer a{color:#cbd5e1;text-decoration:none;font-size:.86rem;transition:color .15s ease} .fz-footer a:hover{color:#fff} .fz-footer .socials{display:flex;gap:10px;margin-top:14px} .fz-footer .socials a{ width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08); display:inline-flex;align-items:center;justify-content:center; transition:background .2s ease,transform .2s ease; } .fz-footer .socials a:hover{background:rgba(34,211,238,.25);transform:translateY(-2px)} .fz-footer-bottom{ border-top:1px solid rgba(255,255,255,.08); max-width:1240px;margin:0 auto;padding:14px 24px; display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px; font-size:.78rem;opacity:.75; } .fz-footer-bottom a{color:#cbd5e1;text-decoration:none;margin-left:14px} /* ========================================================= Responsive breakpoints ========================================================= The rest of the page is fluid via clamp() + auto-fit grids, so these three blocks only touch what fluid rules can't handle: hero centering, tiny-phone type shrink, and landscape hero compression. */ /* --- Phone portrait (≤560px) --- Center the hero pitch column so the copy + CTAs sit on the horizontal axis (looks unbalanced when the login card stacks below on phones). */ @media (max-width:559.98px){ .hero{padding:42px 18px 60px} .login-card{padding:20px 18px} .wrap{margin-top:-30px;padding:0 12px 36px;gap:24px} .stat-strip{padding:16px} .pitch{align-items:center;text-align:center} .pitch .hero-tag{align-self:center} /* Lift the hero wordmark up ~75px on phones. Hero itself already clips its blob/coin decorations via overflow:hidden, but we want the raised logo to render fully, so relax the clip. */ .hero{overflow:visible} .pitch .hero-logo{align-self:center;font-size:110px;white-space:nowrap;margin-top:-75px} /* Fizzy AI helper — hidden on phones for now (re-enable when the floating FAB position is tuned for small screens). Injected by jscript/fizook-agent.js as #fz-agent-root plus a few sibling fixed elements (sparks, chat bubble, glow rings, wake notes, sayings). Nuke the root and any of Fizzy's stray floating siblings so nothing keeps bouncing around after the FAB is gone. */ #fz-agent-root, .fz-agent-fab, .fz-agent-panel, .fz-agent-bubble, .fz-agent-spark, .fz-agent-glow, .fz-agent-glow-2, .fz-wake-note, .fz-saying{display:none!important} .hero h1,.hero p.lead{margin-left:auto;margin-right:auto} .hero-cta{justify-content:center;width:100%} .pitch-stats{justify-content:center;width:100%} } /* --- Tiny portrait phones (≤420px, e.g. iPhone SE) --- Extra shrink for the hero headline + lead so nothing wraps to 4 lines. Stat pills go full-width (one per row) to stay legible. */ @media (max-width:419.98px){ .hero h1{font-size:1.6rem;line-height:1.1} .hero p.lead{font-size:.9rem} .pitch-stat{flex:1 1 100%;justify-content:center} .login-card{padding:18px 16px} .stat-tile .v{font-size:1.5rem} } /* --- Phone landscape (short viewport, ≤500px tall) --- Compress the hero (padding, blob size, headline size, coin count) so users don't scroll past a giant gradient to reach the login card. */ @media (orientation:landscape) and (max-height:500px){ .topbar-inner{padding:8px 14px} .hero{padding:22px 18px 32px} .hero::before,.hero::after{width:200px;height:200px} .hero-inner{gap:18px} .hero h1{font-size:1.6rem;line-height:1.1;letter-spacing:-.5px} .hero p.lead{font-size:.86rem} .pitch{gap:10px} .pitch-stats{gap:6px} .pitch-stat{padding:6px 10px;font-size:.78rem} .coin{display:none} .login-card{padding:18px 16px} .reg-head h2,.login-head h2{font-size:1.2rem} .field{margin-bottom:10px} .input{padding:9px 12px 9px 34px;font-size:1rem} .or-divider{margin:10px 0} .wrap{margin-top:18px;padding:0 16px 24px;gap:18px} .stat-strip{padding:14px} .stat-strip{grid-template-columns:repeat(4,1fr)} .stat-tile .v{font-size:1.5rem} .live-peek{padding:22px 18px} .feature-grid,.aud-grid{gap:10px} .feature-card,.aud-card{padding:16px} .final-cta{padding:24px 20px} } /* ---------- Follow-up popup — animation set ---------- */ .fzp-modal{ position:fixed;inset:0;z-index:300; display:flex;align-items:center;justify-content:center;padding:16px; } .fzp-modal[hidden]{display:none} /* Backdrop fade + blur ramp */ .fzp-modal-backdrop{ position:absolute;inset:0;background:rgba(15,23,42,.6);cursor:pointer; -webkit-backdrop-filter:saturate(1.15) blur(6px); backdrop-filter:saturate(1.15) blur(6px); animation:fzpBackdropIn .32s ease-out both; } @keyframes fzpBackdropIn{ from{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)} to {opacity:1} } /* Panel spring-in from below with a soft overshoot. Colored radial glow anchors the card in the brand palette. A gradient stripe across the top gives the modal a "letterhead" feel. */ .fzp-modal-panel{ position:relative;z-index:1; background: radial-gradient(140% 60% at 100% 0%, rgba(124,58,237,.10), transparent 55%), radial-gradient(140% 60% at 0% 100%, rgba(34,211,238,.12), transparent 55%), linear-gradient(180deg,#ffffff 0%,#f8fafc 100%); border-radius:20px; max-width:460px;width:100%;padding:26px 24px 20px; box-shadow:0 30px 70px rgba(15,23,42,.35), 0 0 0 1px rgba(15,23,42,.04); max-height:calc(100vh - 32px);overflow-y:auto; animation:fzpPanelIn .5s cubic-bezier(.22,1.35,.36,1) both; overscroll-behavior:contain; } .fzp-modal-panel::before{ content:"";position:absolute;left:0;right:0;top:0;height:5px; background:linear-gradient(90deg,#22d3ee,#2481bc 40%,#7c3aed 75%,#ec4899); border-radius:20px 20px 0 0; } @keyframes fzpPanelIn{ 0% {opacity:0;transform:translateY(24px) scale(.92)} 60% {opacity:1;transform:translateY(-4px) scale(1.02)} 100%{opacity:1;transform:translateY(0) scale(1)} } .fzp-modal.closing .fzp-modal-panel{animation:fzpPanelOut .22s ease-in forwards} .fzp-modal.closing .fzp-modal-backdrop{animation:fzpBackdropOut .22s ease-in forwards} @keyframes fzpPanelOut{ to{opacity:0;transform:translateY(10px) scale(.96)} } @keyframes fzpBackdropOut{ to{opacity:0} } /* Staggered child fade-in — badge → heading → sub → hero → fields → actions. animation-fill-mode:both keeps them invisible until their delay elapses. */ .fzp-modal-panel > *{animation:fzpChildIn .5s cubic-bezier(.22,1.35,.36,1) both} .fzp-modal-panel > .fzp-modal-close {animation-delay:.05s} .fzp-modal-panel > .fzp-badge {animation-delay:.10s} .fzp-modal-panel > h3 {animation-delay:.16s} .fzp-modal-panel > .sub {animation-delay:.22s} .fzp-modal-panel > .fzp-hero {animation-delay:.28s} /* Adjacent-sibling walk so we stagger the 3 fields in order without depending on nth-of-type (which is tag-scoped, not class-scoped). */ .fzp-modal-panel > .fzp-hero + .fzp-field {animation-delay:.34s} .fzp-modal-panel > .fzp-hero + .fzp-field + .fzp-field {animation-delay:.40s} .fzp-modal-panel > .fzp-hero + .fzp-field + .fzp-field + .fzp-field {animation-delay:.46s} .fzp-modal-panel > .fzp-actions {animation-delay:.52s} @keyframes fzpChildIn{ from{opacity:0;transform:translateY(8px)} to {opacity:1;transform:none} } .fzp-modal-close{ position:absolute;top:8px;right:8px; background:#f1f5f9;border:0;border-radius:8px; width:36px;height:36px;cursor:pointer;font-size:1.2rem;color:#334155; display:inline-flex;align-items:center;justify-content:center; transition:background .15s ease,transform .15s ease,color .15s ease; z-index:2; } .fzp-modal-close:hover{background:#e2e8f0;color:#0f172a;transform:rotate(90deg)} /* Badge with a slow shine sweep */ .fzp-badge{ position:relative;overflow:hidden; display:inline-flex;align-items:center;gap:7px; background:linear-gradient(135deg,#22d3ee,#2481bc 40%,#7c3aed); color:#fff; font-size:.72rem;font-weight:800;letter-spacing:.9px;text-transform:uppercase; padding:6px 12px;border-radius:999px;margin-bottom:14px; box-shadow:0 6px 18px rgba(124,58,237,.35); } .fzp-badge i{font-size:.82rem} .fzp-badge::after{ content:"";position:absolute;inset:0; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%); transform:translateX(-120%); animation:fzpBadgeShine 3.6s ease-in-out .8s infinite; pointer-events:none; } @keyframes fzpBadgeShine{ 0%,20% {transform:translateX(-120%)} 60%,100% {transform:translateX(120%)} } .fzp-modal-panel h3{ margin:0 0 6px;font-size:1.5rem;font-weight:800;letter-spacing:-.4px;line-height:1.15; background:linear-gradient(135deg,#0f172a 0%,#1a6494 60%,#7c3aed 110%); -webkit-background-clip:text;background-clip:text;color:transparent; } .fzp-modal-panel .sub{margin:0 0 18px;color:#475569;font-size:.95rem;line-height:1.5;font-weight:500} /* Hero: deeper gradient + slower breathing + tiny lift on hover. Left accent stripe + inner glow lifts it above the card stack. */ .fzp-hero{ position:relative;overflow:hidden; display:flex;gap:14px;align-items:center; background: linear-gradient(135deg,rgba(36,129,188,.14),rgba(124,58,237,.14)), #fff; background-size:200% 200%; border:1px solid rgba(36,129,188,.22);border-radius:14px; padding:14px 14px 14px 18px;margin-bottom:20px; box-shadow:0 4px 14px rgba(36,129,188,.08); animation:fzpHeroShift 8s ease-in-out infinite; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .fzp-hero::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:4px; background:linear-gradient(180deg,#22d3ee,#7c3aed); border-top-left-radius:14px;border-bottom-left-radius:14px; } @keyframes fzpHeroShift{ 0%,100%{background-position:0% 50%} 50% {background-position:100% 50%} } .fzp-hero:hover{ transform:translateY(-2px); border-color:rgba(36,129,188,.35); box-shadow:0 10px 24px rgba(15,23,42,.08); } .fzp-hero img{ width:64px;height:64px;border-radius:12px;object-fit:cover; background:#f1f5f9;flex:0 0 auto; box-shadow:0 8px 18px rgba(15,23,42,.16), 0 0 0 3px #fff inset; transition:transform .35s ease; } .fzp-hero:hover img{transform:scale(1.06) rotate(-2deg)} .fzp-hero-info{min-width:0;flex:1 1 auto} .fzp-hero-vendor{ font-size:.72rem;font-weight:800;color:#475569; text-transform:uppercase;letter-spacing:.6px; display:flex;align-items:center;gap:6px; } .fzp-hero-vendor img{width:18px;height:18px;border-radius:50%;padding:1px;background:#fff;object-fit:contain;box-shadow:0 0 0 1px #e2e8f0} .fzp-hero-meal{ font-size:1.05rem;font-weight:800;color:#0f172a;line-height:1.25;margin:4px 0 4px;letter-spacing:-.2px; overflow:hidden;text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical; } .fzp-hero-price{ display:inline-block; font-size:.82rem;font-weight:800;color:#0f172a; background:linear-gradient(135deg,rgba(22,163,74,.16),rgba(22,163,74,.06)); padding:3px 10px;border-radius:999px; font-variant-numeric:tabular-nums; } .fzp-hero-price strong{color:#16a34a} /* Each field is a colored "card". The color hints at the tone of what's being collected — indigo for the question, amber for the rating, cyan for the free-text comment. */ .fzp-field{ margin-bottom:14px; border-radius:14px;padding:14px 14px 12px; border:1px solid; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .fzp-field-redeemed{ background:linear-gradient(135deg,rgba(36,129,188,.08),rgba(124,58,237,.04)); border-color:rgba(36,129,188,.22); } .fzp-field-stars{ position:relative;overflow:hidden; background:linear-gradient(135deg,rgba(245,158,11,.14),rgba(251,191,36,.04) 45%,rgba(245,158,11,.14)); background-size:220% 220%; border-color:rgba(245,158,11,.28); animation:fzpStarsShift 7s ease-in-out infinite; } @keyframes fzpStarsShift{ 0%,100%{background-position:0% 50%} 50% {background-position:100% 50%} } /* Diagonal shine sweep that drifts across the whole card ~every 5s */ .fzp-field-stars::before{ content:"";position:absolute;inset:0; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%); transform:translateX(-120%); animation:fzpStarsShine 5s ease-in-out 1.4s infinite; pointer-events:none; } @keyframes fzpStarsShine{ 0%,25% {transform:translateX(-120%)} 65%,100% {transform:translateX(120%)} } /* The little amber icon in the label spins-glows on a slow loop so the "Rate" card catches the eye. */ .fzp-field-stars .fzp-label-icon{ animation:fzpStarsIconPulse 2.2s ease-in-out infinite; } @keyframes fzpStarsIconPulse{ 0%,100%{transform:scale(1) rotate(0); box-shadow:0 0 0 0 rgba(245,158,11,.55)} 50% {transform:scale(1.12) rotate(8deg);box-shadow:0 0 0 6px rgba(245,158,11,0)} } /* Empty (unrated) stars do a subtle staggered wiggle every ~4s so the control looks alive even before the user touches it. Once a star is .on the JS-applied fzpStarPop takes over and this idle stops. */ .fzp-field-stars .fzp-star{ animation:fzpStarIdle 4s ease-in-out infinite; } .fzp-field-stars .fzp-star:nth-child(1){animation-delay:0s} .fzp-field-stars .fzp-star:nth-child(2){animation-delay:.14s} .fzp-field-stars .fzp-star:nth-child(3){animation-delay:.28s} .fzp-field-stars .fzp-star:nth-child(4){animation-delay:.42s} .fzp-field-stars .fzp-star:nth-child(5){animation-delay:.56s} @keyframes fzpStarIdle{ 0%,100% {transform:translateY(0) scale(1); color:#e2e8f0;filter:none} 6% {transform:translateY(-2px) scale(1.08);color:#fcd34d;filter:drop-shadow(0 0 5px rgba(245,158,11,.4))} 12%,100% {transform:translateY(0) scale(1); color:#e2e8f0;filter:none} } /* Kill the idle wave once any star is committed — .on runs the pop, .preview lets the base hover transform read cleanly. */ .fzp-field-stars .fzp-star.on{animation:fzpStarPop .5s cubic-bezier(.22,1.35,.36,1)} .fzp-field-stars .fzp-star.preview{animation:none} /* On hover, pause all sibling idles so the hover preview reads without competing wiggles. */ .fzp-field-stars:hover .fzp-star{animation-play-state:paused} .fzp-field-comment{ background:linear-gradient(135deg,rgba(34,211,238,.08),rgba(124,58,237,.04)); border-color:rgba(34,211,238,.28); } .fzp-field:focus-within{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(15,23,42,.06); } .fzp-field-redeemed:focus-within{border-color:rgba(36,129,188,.55)} .fzp-field-stars:focus-within {border-color:rgba(245,158,11,.55)} .fzp-field-comment:focus-within {border-color:rgba(34,211,238,.55)} .fzp-label{ display:flex;align-items:center;gap:8px; font-size:.75rem;font-weight:800;color:#334155; text-transform:uppercase;letter-spacing:.7px; margin-bottom:10px; } .fzp-label-icon{ width:22px;height:22px;border-radius:6px; display:inline-flex;align-items:center;justify-content:center; color:#fff;font-size:.75rem;flex:0 0 auto; } .fzp-field-redeemed .fzp-label-icon{background:linear-gradient(135deg,#2481bc,#1a6494)} .fzp-field-stars .fzp-label-icon{background:linear-gradient(135deg,#f59e0b,#d97706)} .fzp-field-comment .fzp-label-icon{background:linear-gradient(135deg,#22d3ee,#7c3aed)} .fzp-select{ display:block;width:100%;padding:12px 14px; border:1px solid #cbd5e1;border-radius:10px; font-family:inherit;font-size:1rem;font-weight:600;background:#fff;color:#0f172a; appearance:none;-webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%); background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%; background-size:5px 5px,5px 5px;background-repeat:no-repeat; transition:border-color .18s ease, box-shadow .18s ease; } .fzp-select:hover{border-color:#94a3b8} .fzp-select:focus{outline:0;border-color:#2481bc;box-shadow:0 0 0 3px rgba(36,129,188,.2)} .fzp-textarea{ display:block;width:100%;padding:12px 14px; border:1px solid #cbd5e1;border-radius:10px; font-family:inherit;font-size:.95rem;line-height:1.5;color:#0f172a; background:#fff;resize:vertical;min-height:76px; box-sizing:border-box; transition:border-color .18s ease, box-shadow .18s ease; } .fzp-textarea::placeholder{color:#94a3b8;font-style:italic} .fzp-textarea:hover{border-color:#94a3b8} .fzp-textarea:focus{outline:0;border-color:#22d3ee;box-shadow:0 0 0 3px rgba(34,211,238,.2)} .fzp-char-count{ text-align:right;font-size:.72rem;color:#64748b;margin-top:6px;font-weight:700; font-variant-numeric:tabular-nums; } /* Stars — hover cascades gold across preceding stars via a JS-set .preview class. Selected stars pop with a bounce. */ .fzp-stars{display:inline-flex;gap:8px;align-items:center} .fzp-star{ background:none;border:0;padding:4px;cursor:pointer;line-height:1; font-size:2rem;color:#e2e8f0; transition:transform .18s cubic-bezier(.22,1.35,.36,1), color .18s ease, filter .18s ease; transform-origin:center; } .fzp-star:hover{transform:scale(1.18) rotate(-6deg)} .fzp-star.preview{color:#fcd34d;filter:drop-shadow(0 0 6px rgba(245,158,11,.4))} .fzp-star.on{ color:#f59e0b; filter:drop-shadow(0 0 8px rgba(245,158,11,.55)); animation:fzpStarPop .5s cubic-bezier(.22,1.35,.36,1); } @keyframes fzpStarPop{ 0% {transform:scale(.6) rotate(-30deg)} 60% {transform:scale(1.35) rotate(8deg)} 100%{transform:scale(1) rotate(0)} } /* Actions */ .fzp-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px;flex-wrap:wrap} .fzp-btn{ display:inline-flex;align-items:center;gap:6px; padding:10px 16px;border-radius:10px;border:0;cursor:pointer; font-weight:700;font-size:.9rem; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, opacity .18s ease; } .fzp-btn:active{transform:translateY(1px) scale(.98)} .fzp-btn-primary{ position:relative;overflow:hidden; background:linear-gradient(135deg,#2481bc,#7c3aed); background-size:200% 200%; color:#fff; box-shadow:0 4px 12px rgba(36,129,188,.28); } .fzp-btn-primary:not([disabled]):hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(124,58,237,.4); background-position:100% 0; } /* Shimmer sweep runs whenever the button is enabled */ .fzp-btn-primary::after{ content:"";position:absolute;inset:0; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.4) 50%,transparent 60%); transform:translateX(-120%); pointer-events:none; } .fzp-btn-primary:not([disabled])::after{animation:fzpBtnShine 2.6s ease-in-out 1.2s infinite} @keyframes fzpBtnShine{ 0%,25% {transform:translateX(-120%)} 65%,100% {transform:translateX(120%)} } .fzp-btn-primary[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none} .fzp-btn-ghost{background:transparent;color:#475569} .fzp-btn-ghost:hover{background:#f1f5f9;transform:translateY(-1px)} /* ---------- Phone tuning ---------- Vertically centered popup with slightly reduced elements from the desktop layout — but not aggressively shrunk. Everything remains comfortably readable. */ @media (max-width:559.98px){ .fzp-modal{padding:12px;align-items:center} .fzp-modal-panel{ padding:20px 18px 16px; border-radius:18px; max-height:calc(100vh - 24px); animation-name:fzpPanelInPhone; } .fzp-modal-panel > *{animation-duration:.42s} @keyframes fzpPanelInPhone{ 0% {opacity:0;transform:translateY(20px) scale(.96)} 60% {opacity:1;transform:translateY(-2px) scale(1.01)} 100%{opacity:1;transform:none} } .fzp-modal-close{width:34px;height:34px;font-size:1.1rem;top:8px;right:8px} .fzp-badge{font-size:.68rem;padding:5px 11px;margin-bottom:10px;gap:6px} .fzp-badge i{font-size:.78rem} .fzp-modal-panel h3{font-size:1.25rem;margin-bottom:4px} .fzp-modal-panel .sub{font-size:.88rem;margin-bottom:14px;line-height:1.45} .fzp-hero{padding:11px 12px 11px 16px;gap:12px;margin-bottom:12px;border-radius:13px} .fzp-hero img{width:54px;height:54px;border-radius:11px} .fzp-hero-vendor{font-size:.68rem;letter-spacing:.55px} .fzp-hero-vendor img{width:16px;height:16px} .fzp-hero-meal{font-size:.98rem;margin:3px 0 4px} .fzp-hero-price{font-size:.78rem;padding:3px 9px} .fzp-field{padding:11px 12px 10px;margin-bottom:11px;border-radius:12px} .fzp-label{font-size:.68rem;letter-spacing:.55px;margin-bottom:7px;gap:7px} .fzp-label-icon{width:20px;height:20px;font-size:.7rem;border-radius:6px} .fzp-select{padding:10px 12px;font-size:.95rem;border-radius:9px} .fzp-field-stars{padding:9px 12px 7px} .fzp-field-stars .fzp-label{margin-bottom:4px} .fzp-stars{gap:4px;justify-content:flex-start;width:auto} .fzp-star{font-size:1.5rem;padding:4px} .fzp-field-comment{padding:10px 12px 8px} .fzp-textarea{padding:9px 12px;font-size:.9rem;min-height:56px;line-height:1.4;border-radius:9px} .fzp-char-count{margin-top:4px;font-size:.68rem} .fzp-btn{padding:10px 16px;font-size:.92rem;border-radius:10px} .fzp-actions{justify-content:stretch;margin-top:6px;gap:8px} .fzp-actions .fzp-btn{flex:1 1 auto;justify-content:center} .fzp-actions .fzp-btn-ghost{flex:0 1 auto;min-width:78px} } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce){ .fzp-modal-backdrop, .fzp-modal-panel, .fzp-modal-panel > *, .fzp-badge::after, .fzp-btn-primary::after, .fzp-hero, .fzp-field-stars, .fzp-field-stars::before, .fzp-field-stars .fzp-label-icon, .fzp-field-stars .fzp-star{animation:none !important} .fzp-star,.fzp-hero img,.fzp-btn{transition:none !important} }