/* ========================================================= AESTHETIC: Modern service-business. Think Cash App x local coffee shop. Deep forest green + warm cream + a single hot accent. Editorial serif headlines (Fraunces) paired with a precise sans (Inter Tight). Generous spacing. Card-based forms. Built to look trustworthy to a 35-year-old professional booking on her phone. ========================================================= */ :root { --green: #0F2A1D; /* deep forest */ --green-soft: #1F3D2E; --cream: #F4EFE6; /* warm off-white background */ --cream-deep: #E8DFD0; --accent: #FF5A1F; /* orange — appears once or twice */ --ink: #0A1410; --muted: #6B7568; --line: #D5CCBC; --white: #FFFFFF; --radius: 14px; --shadow-sm: 0 1px 2px rgba(15,42,29,0.06); --shadow-md: 0 8px 24px rgba(15,42,29,0.08); --shadow-lg: 0 20px 50px rgba(15,42,29,0.12); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: 'Inter Tight', -apple-system, sans-serif; background: var(--cream); color: var(--ink); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } /* ===== TOP NAV ===== */ .nav { background: var(--green); color: var(--cream); padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; } .logo { font-family: 'Fraunces', serif; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; } .logo-mark { width: 28px; height: 28px; background: var(--accent); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--green); font-weight: 800; font-size: 16px; } .nav-link { color: var(--cream); font-size: 14px; font-weight: 500; opacity: 0.85; } .nav-link:hover { opacity: 1; } /* ===== HERO ===== */ .hero { padding: 80px 24px 60px; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 60px; align-items: center; } @media (min-width: 900px) { .hero { grid-template-columns: 1.1fr 0.9fr; padding: 100px 32px 80px; } } .eyebrow { display: inline-block; background: var(--cream-deep); color: var(--green); padding: 6px 12px; border-radius: 100px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 20px; } .eyebrow .dot { color: var(--accent); } h1 { font-family: 'Fraunces', serif; font-size: clamp(40px, 6.5vw, 68px); font-weight: 600; line-height: 1.02; letter-spacing: -0.03em; color: var(--green); margin-bottom: 24px; } h1 em { font-style: italic; font-weight: 400; color: var(--accent); } .hero-sub { font-size: clamp(17px, 2vw, 19px); color: var(--muted); max-width: 480px; margin-bottom: 32px; line-height: 1.5; } .cta-row { display: flex; gap: 12px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 28px; border-radius: 100px; font-weight: 600; font-size: 16px; transition: transform 0.15s, box-shadow 0.15s; min-height: 54px; } .btn-primary { background: var(--green); color: var(--cream); box-shadow: var(--shadow-md); } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-ghost { background: transparent; color: var(--green); border: 1.5px solid var(--green); } .btn-ghost:hover { background: var(--green); color: var(--cream); } /* ===== HERO VISUAL: Receipt-style card ===== */ .hero-card { background: var(--white); border-radius: 24px; padding: 28px; box-shadow: var(--shadow-lg); position: relative; transform: rotate(-1.5deg); max-width: 380px; margin: 0 auto; } .hero-card::before { content: ''; position: absolute; top: -12px; left: 32px; width: 60px; height: 24px; background: var(--accent); border-radius: 6px; transform: rotate(-3deg); opacity: 0.9; } .receipt-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1.5px dashed var(--line); margin-bottom: 14px; } .receipt-head .label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; } .receipt-head .num { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; } .receipt-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 15px; border-bottom: 1px solid var(--cream-deep); } .receipt-row:last-child { border-bottom: none; } .receipt-row .k { color: var(--muted); } .receipt-row .v { font-weight: 600; } .receipt-stamp { margin-top: 16px; padding: 12px; background: var(--cream); border-radius: 10px; text-align: center; font-family: 'Fraunces', serif; font-style: italic; font-size: 15px; color: var(--green); } /* ===== HOW IT WORKS ===== */ .how { background: var(--green); color: var(--cream); padding: 80px 24px; } .how-inner { max-width: 1100px; margin: 0 auto; } .section-title { font-family: 'Fraunces', serif; font-size: clamp(32px, 4.5vw, 48px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 16px; } .section-sub { font-size: 17px; opacity: 0.75; max-width: 520px; margin-bottom: 50px; } .steps { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 700px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; } } .step { border-top: 1.5px solid rgba(244,239,230,0.2); padding-top: 24px; } .step-num { font-family: 'Fraunces', serif; font-size: 14px; color: var(--accent); font-weight: 600; margin-bottom: 14px; letter-spacing: 0.04em; } .step h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 24px; margin-bottom: 10px; letter-spacing: -0.01em; } .step p { opacity: 0.8; font-size: 15.5px; line-height: 1.5; } /* ===== BOOKING SECTION ===== */ .book { padding: 80px 24px; max-width: 720px; margin: 0 auto; } .book-card { background: var(--white); border-radius: 20px; box-shadow: var(--shadow-md); overflow: hidden; } .book-header { background: var(--cream-deep); padding: 28px 32px; border-bottom: 1px solid var(--line); } .book-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .book-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 600; } .book-title { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 600; color: var(--green); letter-spacing: -0.01em; } .progress-track { background: var(--cream); height: 4px; border-radius: 100px; overflow: hidden; } .progress-fill { background: var(--green); height: 100%; width: 0%; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .step-counter { font-size: 13px; color: var(--muted); font-weight: 500; } .book-body { padding: 36px 32px; min-height: 380px; } @media (max-width: 600px) { .book-header { padding: 22px 22px; } .book-body { padding: 28px 22px; min-height: 360px; } } .q-step { display: none; animation: fadeIn 0.35s ease both; } .q-step.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .q-label { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 600; color: var(--green); letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 8px; } .q-help { font-size: 15px; color: var(--muted); margin-bottom: 26px; line-height: 1.5; } /* Option cards (radio-style) */ .opt-grid { display: grid; gap: 12px; } .opt-grid.two-col { grid-template-columns: 1fr 1fr; } @media (max-width: 480px) { .opt-grid.two-col { grid-template-columns: 1fr; } } .opt { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 18px 18px; text-align: left; transition: all 0.15s; display: flex; flex-direction: column; gap: 4px; width: 100%; } .opt:hover { border-color: var(--green); transform: translateY(-1px); } .opt.selected { border-color: var(--green); background: var(--green); color: var(--cream); box-shadow: var(--shadow-md); } .opt-title { font-weight: 600; font-size: 16px; } .opt-sub { font-size: 13px; opacity: 0.75; } .opt.selected .opt-sub { opacity: 0.85; } .opt-with-icon { display: flex; align-items: center; gap: 14px; flex-direction: row; } .opt-icon { width: 44px; height: 44px; background: var(--cream); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .opt.selected .opt-icon { background: var(--green-soft); } .opt-text { display: flex; flex-direction: column; gap: 2px; } /* Form inputs */ .field { margin-bottom: 16px; } .field-label { display: block; font-size: 13px; font-weight: 600; color: var(--green); margin-bottom: 6px; letter-spacing: 0.01em; } .input, .textarea, .select { width: 100%; background: var(--white); border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: 16px; transition: border-color 0.15s, box-shadow 0.15s; } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(15,42,29,0.1); } .textarea { min-height: 90px; resize: vertical; font-family: inherit; } .field-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; } @media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } } /* File upload */ .file-drop { display: block; width: 100%; border: 2px dashed var(--line); border-radius: var(--radius); padding: 28px 20px; text-align: center; background: var(--cream); transition: all 0.15s; cursor: pointer; box-sizing: border-box; } .file-drop:hover { border-color: var(--green); background: var(--cream-deep); } .file-drop.has-file { border-style: solid; border-color: var(--green); background: var(--white); } .file-icon { font-size: 32px; margin-bottom: 8px; display: block; } .file-text { font-size: 14px; color: var(--muted); display: block; } .file-text strong { color: var(--green); font-weight: 600; } .file-name { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--green); word-break: break-all; display: block; } input[type="file"] { display: none; } /* Date picker */ .date-card { background: var(--cream); border-radius: var(--radius); padding: 24px; text-align: center; margin-bottom: 16px; } .date-label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; margin-bottom: 8px; } .date-big { font-family: 'Fraunces', serif; font-size: 32px; font-weight: 600; color: var(--green); letter-spacing: -0.01em; line-height: 1.1; } .date-sub { font-size: 14px; color: var(--muted); margin-top: 6px; } /* Action row */ .actions { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; gap: 12px; } .btn-back { color: var(--muted); font-size: 14px; font-weight: 600; padding: 12px 16px; } .btn-back:hover { color: var(--green); } .btn-next { background: var(--green); color: var(--cream); padding: 14px 28px; border-radius: 100px; font-weight: 600; font-size: 15px; min-height: 50px; transition: transform 0.15s, opacity 0.15s; } .btn-next:hover:not(:disabled) { transform: translateY(-1px); } .btn-next:disabled { opacity: 0.4; cursor: not-allowed; } /* Summary / Confirmation */ .summary-box { background: var(--cream); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; } .summary-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 15px; border-bottom: 1px solid var(--cream-deep); } .summary-row:last-child { border-bottom: none; } .summary-row .k { color: var(--muted); } .summary-row .v { font-weight: 600; text-align: right; } .price-row { display: flex; justify-content: space-between; padding: 14px 0 4px; border-top: 1.5px dashed var(--line); margin-top: 8px; } .price-row .k { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; color: var(--green); } .price-row .v { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; color: var(--green); } /* Confirmation success */ .success-icon { width: 64px; height: 64px; background: var(--green); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--cream); font-size: 32px; } .success-title { font-family: 'Fraunces', serif; font-size: 32px; font-weight: 600; color: var(--green); text-align: center; letter-spacing: -0.01em; margin-bottom: 8px; } .success-sub { text-align: center; color: var(--muted); margin-bottom: 28px; } .booking-id { background: var(--green); color: var(--cream); border-radius: var(--radius); padding: 16px 20px; text-align: center; margin-bottom: 20px; } .booking-id-label { font-size: 12px; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; } .booking-id-num { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600; letter-spacing: 0.02em; } /* ===== FAQ ===== */ .faq { background: var(--cream-deep); padding: 80px 24px; } .faq-inner { max-width: 720px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--line); padding: 20px 0; } .faq-q { width: 100%; text-align: left; font-family: 'Fraunces', serif; font-size: 19px; font-weight: 600; color: var(--green); display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq-q::after { content: '+'; font-size: 24px; font-weight: 400; color: var(--accent); transition: transform 0.2s; } .faq-item.open .faq-q::after { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; color: var(--muted); line-height: 1.55; } .faq-item.open .faq-a { max-height: 200px; padding-top: 12px; } /* ===== FOOTER ===== */ footer { background: var(--green); color: var(--cream); padding: 48px 24px 32px; text-align: center; } footer .logo { justify-content: center; margin-bottom: 16px; } .foot-tag { font-family: 'Fraunces', serif; font-style: italic; opacity: 0.7; font-size: 14px; } /* ===== STRIPE PAYMENT ===== */ .payment-section { margin-top: 20px; border-top: 1.5px dashed var(--line); padding-top: 20px; } .payment-label { font-size: 13px; font-weight: 600; color: var(--green); letter-spacing: 0.01em; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .payment-label .lock { font-size: 12px; opacity: 0.6; } #card-element { background: var(--white); border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px; transition: border-color 0.15s, box-shadow 0.15s; } #card-element.StripeElement--focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(15,42,29,0.1); } #card-element.StripeElement--invalid { border-color: #e53e3e; } #card-error { color: #e53e3e; font-size: 13px; margin-top: 8px; min-height: 18px; font-weight: 500; } .stripe-badge { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--muted); opacity: 0.75; } .price-highlight { background: var(--green); color: var(--cream); border-radius: 10px; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .price-highlight .ph-label { font-size: 14px; font-weight: 600; opacity: 0.8; } .price-highlight .ph-amount { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 600; } /* Decorative grain (subtle) */ .grain { position: fixed; inset: 0; pointer-events: none; opacity: 0.025; z-index: 100; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
Stuck with an Amazon return you've been meaning to drop off for three weeks? We pick it up Saturday morning, take it to Staples, Whole Foods, or UPS, and send you the receipt. You stay on the couch.
Built for people whose weekends are already booked solid.
Answer a few questions about your return — what store, what size, where you are. Takes 90 seconds.
Leave the package by your door or hand it to us. Make sure your QR code or return label is ready.
We drop it at the right location and text you a photo of the receipt. Your refund clears as usual.
We'll text you the night before with arrival reminders.
Questions? Just reply to that text.
Quick answers before you book.