/* ===== Hen House — Google review funnel PWA ===== Brand palette matches the menu PWA exactly: primary #F98856 (warm spice orange), secondary #604B47 (roasted brown) */ :root{ --primary:#F98856; --primary-dark:#E86F3B; --primary-soft:#FFF1E9; --secondary:#604B47; --ink:#2B211F; --muted:#7A6C68; --line:#EADFD9; --wheat:#F7CB74; /* sampled from the client's logo background */ --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} /* Same trap as the menu app: never put overflow-x on . Clip on only. */ 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 ---------- */ /* The client's logo has thin black hen strokes that vanish on dark brown, so it sits on a wheat band — its native background (#F7CB74, sampled). */ .app-header{ display:flex; align-items:center; justify-content:center; padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top,0px)); background:var(--wheat); box-shadow:var(--shadow); } .brand-logo{ display:block; width:min(300px, 78vw); height:auto; } /* ---------- 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); } /* ---------- Buttons ---------- */ /* Deliberately big tap targets — customers use this one-handed, mid-meal. */ .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; box-shadow:0 4px 14px rgba(249,136,86,.38); transition:transform .1s ease, background .12s ease; -webkit-tap-highlight-color:transparent; } .btn-primary:active{transform:scale(.97); background:var(--primary-dark)} .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} .save-link{ display:inline-block; margin-top:14px; font-size:13px; font-weight:600; color:var(--muted); text-decoration:underline; -webkit-tap-highlight-color:transparent; } .save-link:active{color:var(--primary-dark)} /* ---------- 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} .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} }