Read-only local campaign artifact
flat-fee-local-ui-prototype.html
direct-design-wave-48/flat-fee-local-ui-prototype.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Local source-bound UI prototype. Not a live Flat Fee House Cleaners Sarasota page.">
<title>Flat Fee House Cleaners Sarasota | Local UI prototype</title>
<style>
:root { --pine:#195544; --ink:#112722; --paper:#fcfcf8; --mist:#e8f2e9; --line:#c8d8cc; --accent:#d8a849; --focus:#075fc4; --body:system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 1rem/1.55 var(--body); }
a { color:inherit; text-underline-offset:.16em; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.skip { position:absolute; top:-4rem; left:1rem; z-index:2; padding:.65rem .9rem; background:#fff; border-radius:.4rem; }
.skip:focus { top:1rem; }
.shell { width:min(100% - 2rem,72rem); margin:auto; }
.bar { display:flex; min-height:4.5rem; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--line); }
.brand { max-width:15rem; font-weight:850; line-height:1.1; text-decoration:none; }
nav ul { display:flex; flex-wrap:wrap; gap:1rem; margin:0; padding:0; list-style:none; font-weight:700; font-size:.92rem; }
.phone { color:var(--pine); font-weight:850; white-space:nowrap; }
.hero { padding:clamp(3rem,8vw,7rem) 0; background:linear-gradient(140deg,var(--mist),var(--paper) 55%,#f6edcf); }
.hero-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem,5vw,5rem); align-items:end; }
.eyebrow { margin:0; color:var(--pine); font-size:.78rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
h1,h2,h3 { line-height:1.1; letter-spacing:-.025em; }
h1 { max-width:11ch; margin:.5rem 0 1rem; font-size:clamp(2.55rem,7vw,5.4rem); }
h2 { margin:.3rem 0 1rem; font-size:clamp(1.8rem,4vw,3.15rem); }
h3 { margin:0 0 .5rem; font-size:1.2rem; }
.lede,.muted { color:#50645d; }
.lede { max-width:56ch; font-size:1.12rem; }
.actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.4rem; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:3rem; padding:.65rem 1rem; border:2px solid var(--pine); border-radius:.45rem; background:var(--pine); color:#fff; font:800 .97rem var(--body); text-decoration:none; cursor:pointer; }
.button:hover { background:#0f3f33; border-color:#0f3f33; }
.button.alt { background:transparent; color:var(--pine); }
.proof { padding:1.35rem; border-radius:.85rem; background:var(--ink); color:#fff; box-shadow:0 18px 35px rgb(17 39 34 / .16); }
.proof p { color:#d6e7dc; }
section { padding:clamp(3.5rem,8vw,6.5rem) 0; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.card { min-height:12rem; padding:1.3rem; border:1px solid var(--line); border-radius:.85rem; background:#fff; box-shadow:0 4px 12px rgb(17 39 34 / .05); transition:transform .2s ease,box-shadow .2s ease; }
.card:hover { transform:translateY(-.22rem); box-shadow:0 16px 30px rgb(17 39 34 / .12); }
.card p { margin:0; color:#50645d; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.notice { padding:1.25rem; border-left:.32rem solid var(--accent); background:#fff6d9; }
.faq { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
details { padding:1rem; border:1px solid var(--line); border-radius:.65rem; background:#fff; }
summary { cursor:pointer; font-weight:800; }
.quote { background:var(--pine); color:#fff; }
.quote-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.quote .eyebrow { color:#f5d982; }
form { display:grid; gap:.75rem; }
label { display:grid; gap:.3rem; font-weight:750; }
input,textarea { width:100%; padding:.7rem; border:1px solid #adc8b8; border-radius:.4rem; font:inherit; }
textarea { min-height:6rem; resize:vertical; }
.small { font-size:.88rem; }
footer { padding:2rem 0; color:#50645d; }
.reveal { animation:reveal .5s both; }
.reveal:nth-child(2) { animation-delay:.08s; }
.reveal:nth-child(3) { animation-delay:.16s; }
@keyframes reveal { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:760px) { nav { display:none; } .bar { align-items:flex-start; padding:.9rem 0; } .hero-grid,.split,.quote-grid,.grid,.faq { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
</style>
</head>
<body>
<a class="skip" href="#main">Skip to main content</a>
<header class="shell bar"><a class="brand" href="#top">Flat Fee House Cleaners Sarasota</a><nav aria-label="Primary"><ul><li><a href="#services">Services</a></li><li><a href="#about">About</a></li><li><a href="#faq">FAQ</a></li></ul></nav><a class="phone" href="tel:+19412079556">(941) 207-9556</a></header>
<main id="main">
<section class="hero" id="top"><div class="shell hero-grid"><div><p class="eyebrow">House cleaning services in Sarasota, FL</p><h1>Make a cleaner home easier to arrange.</h1><p class="lede">A local design prototype using only retained source text. It keeps the estimate and phone paths visible, then makes the listed cleaning services easier to scan.</p><div class="actions"><a class="button" href="#quote">Get a free estimate</a><a class="button alt" href="tel:+19412079556">Call now</a></div></div><aside class="proof"><p class="eyebrow">Retained source language</p><h2>Reliability, transparency, and care.</h2><p>Any real proof, availability, pricing, review, or service-area statement requires current source and business approval.</p></aside></div></section>
<section id="services"><div class="shell"><p class="eyebrow">What we offer</p><h2>Start with the service you need.</h2><div class="grid"><article class="card reveal"><h3>Residential cleaning</h3><p>Routine dusting, vacuuming, and sanitizing for a fresh living space.</p></article><article class="card reveal"><h3>Deep cleaning</h3><p>Detailed attention to surfaces, appliances, and hidden areas.</p></article><article class="card reveal"><h3>Move in/out cleaning</h3><p>Thorough cleaning for a more confident transition between homes.</p></article></div></div></section>
<section id="about"><div class="shell split"><div><p class="eyebrow">Decision support</p><h2>Clear next steps before extra decoration.</h2><p class="lede">The retained page lists both recurring and one-time cleaning. This composition gives that decision more room without inventing prices or availability.</p></div><div class="notice"><h3>Local-only prototype</h3><p class="muted">This does not audit or change the live site. It does not assert current responsive behavior, imagery, booking, insurance, prices, reviews, or schedule.</p></div></div></section>
<section id="faq"><div class="shell"><p class="eyebrow">Frequently asked questions</p><h2>Answer basic questions before the request.</h2><div class="faq"><details><summary>Do I need to provide cleaning products?</summary><p>The retained source says the team brings supplies and can use a customer’s products if preferred.</p></details><details><summary>How is pricing handled?</summary><p>The retained source describes flat-rate pricing based on home size and selected services. No price is supplied here.</p></details><details><summary>Can I book one-time or recurring service?</summary><p>The retained source says both one-time and recurring options are available.</p></details><details><summary>Can cleaning happen while I am away?</summary><p>The retained source says customers can provide entry instructions and receive a completion notice.</p></details></div></div></section>
<section class="quote" id="quote"><div class="shell quote-grid"><div><p class="eyebrow">Local form prototype</p><h2>Request a free quote.</h2><p>This form does not send data. It exists only to demonstrate persistent labels, focus visibility, and an explicit non-submit state.</p></div><form aria-label="Local-only quote form"><label>Name<input type="text" autocomplete="name" required></label><label>Phone number<input type="tel" autocomplete="tel" required></label><label>What would you like cleaned?<textarea></textarea></label><button class="button" type="button" aria-describedby="local-note">Draft request only</button><p class="small" id="local-note">No data is sent from this local file.</p></form></div></section>
</main>
<footer><div class="shell">Source-bound local test artifact. It is not a deployed client page or a current-site visual review.</div></footer>
</body>
</html>