/* ===== ReviewFunnel — Google review funnel PWA ===== Generalized from the HenHouse build. Every brand value below is a CSS custom property that app.js overrides from the tenant config at load, so the same stylesheet serves every business. The defaults are a neutral warm palette, deliberately not any one client's colours: a tenant who sets nothing still gets a coherent-looking page. */ :root{ --primary:#F98856; /* buttons, accents */ --primary-dark:#E86F3B; /* pressed state */ --primary-soft:#FFF1E9; /* photo frame backing */ --secondary:#604B47; /* headlines */ --ink:#2B211F; --muted:#7A6C68; --line:#EADFD9; --band:#F7CB74; /* header band behind the logo or wordmark */ --bg:#FFFAF7; --card:#FFFFFF; --radius:14px; --shadow:0 2px 10px rgba(96,75,71,.10); --shadow-lg:0 10px 34px rgba(96,75,71,.22); --safe-b:env(safe-area-inset-bottom,0px); } *{box-sizing:border-box} /* TRAP carried over from the HenHouse/menu apps: never put overflow-x on . Clip on only, or position:sticky breaks. */ html{overflow-x:clip} html,body{margin:0;padding:0;width:100%;min-height:100%} body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; background:var(--bg); color:var(--ink); -webkit-text-size-adjust:100%; display:flex; flex-direction:column; min-height:100dvh; } /* ---------- Header ---------- */ /* A logo sits on its own colour band, because a logo with thin dark strokes disappears against a dark header. Tenants set --band to their logo's own background colour. With no logo, the same band carries a text wordmark. */ .app-header{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top,0px)); background:var(--band); box-shadow:var(--shadow); } .app-header:empty{display:none} .brand-logo{ display:block; width:min(300px, 78vw); height:auto; } /* Text fallback when a tenant has no hosted logo, which is the common case. */ .brand-word{ font-size:23px; font-weight:800; letter-spacing:-.3px; color:var(--secondary); text-align:center; } .brand-tag{ margin-top:3px; font-size:12px; font-weight:600; opacity:.75; color:var(--secondary); text-align:center; } /* ---------- Screens ---------- */ .stage{ flex:1; display:flex; align-items:center; justify-content:center; padding:24px 20px; } .screen{ display:none; width:100%; max-width:460px; text-align:center; } .screen.active{display:block; animation:fade .28s ease} @keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}} .hero-emoji{font-size:66px; line-height:1; margin-bottom:14px} .headline{ margin:0 0 10px; font-size:26px; font-weight:800; line-height:1.2; color:var(--secondary); } .subhead{ margin:0 auto 26px; max-width:22em; font-size:15px; line-height:1.5; color:var(--muted); } .subhead:empty{display:none} /* ---------- Buttons ---------- */ /* Deliberately big tap targets — customers use this one-handed, mid-visit. */ .btn-primary{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:17px 18px; margin-bottom:10px; background:var(--primary); color:#fff; font-size:17px; font-weight:800; font-family:inherit; text-decoration:none; border:none; border-radius:var(--radius); cursor:pointer; /* Neutral shadow rather than the old hardcoded orange rgba, so a tenant with a blue or green primary does not get an orange glow under the button. */ box-shadow:0 4px 14px rgba(0,0,0,.20); transition:transform .1s ease, filter .12s ease; -webkit-tap-highlight-color:transparent; } .btn-primary:active{transform:scale(.97); filter:brightness(.92)} .btn-ico{font-size:19px; line-height:1} .btn-ghost{ width:100%; padding:13px; background:transparent; color:var(--muted); font-size:14px; font-weight:700; font-family:inherit; border:1px solid var(--line); border-radius:var(--radius); cursor:pointer; -webkit-tap-highlight-color:transparent; } .btn-ghost:active{background:var(--line)} label.btn-ghost{display:block; text-align:center; -webkit-user-select:none; user-select:none} /* ---------- Thumbnail strip ---------- */ .thumbs{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:0 auto 18px; max-width:340px; } .thumbs:empty{display:none} .thumb{ position:relative; width:58px; height:58px; border-radius:10px; overflow:visible; } .thumb img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:10px; border:2px solid var(--primary); } .thumb-x{ position:absolute; top:-8px; right:-8px; width:22px; height:22px; padding:0; display:flex; align-items:center; justify-content:center; background:var(--secondary); color:#fff; font-size:15px; font-weight:800; line-height:1; border:2px solid var(--bg); border-radius:50%; cursor:pointer; } .inline-link{color:var(--primary-dark); font-weight:700} /* ---------- Photo preview ---------- */ .shot-wrap{ position:relative; width:100%; max-width:300px; margin:0 auto 20px; aspect-ratio:1/1; border-radius:20px; overflow:hidden; background:var(--primary-soft); border:3px solid var(--primary); box-shadow:var(--shadow-lg); } #shot{width:100%; height:100%; object-fit:cover; display:block} .shot-badge{ position:absolute; right:10px; bottom:10px; width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:var(--primary); color:#fff; font-size:20px; font-weight:800; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.3); } /* ---------- Handoff spinner ---------- */ .spinner{ width:46px; height:46px; margin:0 auto 22px; border:5px solid var(--line); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} /* ---------- Footer ---------- */ .app-footer{ padding:20px 16px calc(20px + var(--safe-b)); text-align:center; color:var(--muted); font-size:12px; border-top:1px solid var(--line); } .app-footer p{margin:4px 0} .app-footer p:empty{display:none} .footer-small{font-size:11px; opacity:.85} /* ---------- Taller phones / desktop ---------- */ @media (min-height:720px){ .hero-emoji{font-size:78px; margin-bottom:18px} .headline{font-size:29px} } @media (prefers-reduced-motion:reduce){ .screen.active{animation:none} .spinner{animation-duration:2s} }