← back to Consulting Intake
Intake app: rich UX — rotating skyline hero, editorial dark-gold system, restyled questionnaire
0b5ab1d8b454745babf8cacd2b3736f0d2e627ae · 2026-07-17 09:50:39 -0700 · Steve
Files touched
M public/intake.htmlM public/signin.html
Diff
commit 0b5ab1d8b454745babf8cacd2b3736f0d2e627ae
Author: Steve <steve@designerwallcoverings.com>
Date: Fri Jul 17 09:50:39 2026 -0700
Intake app: rich UX — rotating skyline hero, editorial dark-gold system, restyled questionnaire
---
public/intake.html | 47 ++++++++++---------
public/signin.html | 131 ++++++++++++++++++++++++++++++++---------------------
2 files changed, 104 insertions(+), 74 deletions(-)
diff --git a/public/intake.html b/public/intake.html
index 305aaf3..1653df7 100644
--- a/public/intake.html
+++ b/public/intake.html
@@ -4,33 +4,36 @@
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>New Website + Social — Intake · Consulting Intake</title>
<style>
- :root{--ink:#14110e;--paper:#f6f2ec;--gold:#a9884f;--line:#dcd3c5}
- *{box-sizing:border-box}
- body{margin:0;font-family:system-ui,-apple-system,sans-serif;background:var(--paper);color:var(--ink);padding:0}
- header{padding:40px 24px 20px;text-align:center;border-bottom:1px solid var(--line);background:#fff}
- header .eyebrow{letter-spacing:.32em;text-transform:uppercase;font-size:11px;color:var(--gold)}
- header h1{font-family:Georgia,serif;font-weight:400;font-size:30px;margin:.3em 0 .1em}
- header p{color:#6b6357;margin:0}
- form{max-width:760px;margin:0 auto;padding:28px 24px 80px}
- fieldset{border:1px solid var(--line);background:#fff;margin:18px 0;padding:20px 22px}
- legend{font-family:Georgia,serif;font-size:18px;padding:0 10px;color:var(--gold)}
- label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#7a7266;margin:14px 0 5px;font-weight:600}
- input,textarea,select{width:100%;padding:11px 12px;border:1px solid var(--line);background:#faf8f4;font-size:15px;font-family:inherit;border-radius:2px}
- textarea{min-height:76px;resize:vertical}
- .two{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
- .hint{font-size:12px;color:#9a9082;text-transform:none;letter-spacing:0;font-weight:400;margin-top:4px}
- .check{display:flex;align-items:center;gap:8px;margin-top:10px}
- .check input{width:auto}
- button{background:var(--ink);color:var(--paper);border:0;padding:15px 34px;letter-spacing:.16em;text-transform:uppercase;font-size:13px;cursor:pointer;margin-top:8px}
- button:hover{background:var(--gold)}
- #done{display:none;background:#eef6ee;border:1px solid #b7d6b7;padding:18px;margin:18px 0;color:#25632a}
+:root{--bg:#0c1016;--panel:#121722;--ink:#eef1f6;--gold:#c8a15a;--line:rgba(200,161,90,.25);--dim:rgba(238,241,246,.66)}
+*{box-sizing:border-box}
+body{margin:0;font-family:'Jost',system-ui,sans-serif;background:var(--bg);color:var(--ink);padding:0;line-height:1.6}
+header{padding:64px 24px 30px;text-align:center;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#121722,#0c1016)}
+header .eyebrow{letter-spacing:.34em;text-transform:uppercase;font-size:11px;color:var(--gold)}
+header h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:clamp(30px,5vw,46px);margin:.35em 0 .15em}
+header p{color:var(--dim);margin:0;font-size:16px}
+form{max-width:780px;margin:0 auto;padding:30px 24px 90px}
+fieldset{border:1px solid var(--line);background:var(--panel);margin:20px 0;padding:24px 26px;border-radius:8px}
+legend{font-family:'Cormorant Garamond',serif;font-size:20px;padding:0 12px;color:var(--gold)}
+label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:16px 0 6px;font-weight:500}
+input,textarea,select{width:100%;padding:12px 13px;border:1px solid var(--line);background:#0a0d12;color:var(--ink);font-size:15px;font-family:inherit;border-radius:4px}
+input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold)}
+textarea{min-height:80px;resize:vertical}
+.two{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
+.hint{font-size:12px;color:var(--dim);text-transform:none;letter-spacing:0;font-weight:400;margin-top:6px}
+.check{display:flex;align-items:center;gap:10px;margin-top:12px}
+.check input{width:auto}
+button{background:var(--gold);color:#0c1016;border:0;padding:16px 38px;letter-spacing:.2em;text-transform:uppercase;font-size:13px;font-weight:500;cursor:pointer;margin-top:12px;border-radius:3px}
+button:hover{filter:brightness(1.1)}
+#done{display:none;background:rgba(63,185,80,.12);border:1px solid rgba(63,185,80,.5);padding:18px;margin:18px 0;color:#9fd6b0;border-radius:6px}
+@media(max-width:640px){.two{grid-template-columns:1fr}}
</style>
+<link rel="preconnect" href="https://fonts.googleapis.com"><link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;1,400&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
</head>
<body>
<header>
- <div class="eyebrow">Consulting Intake</div>
+ <div class="eyebrow">Consulting Intake · Questionnaire</div>
<h1>Let's build your website & social</h1>
- <p>Answer what you can — this spawns your new site concepts and a social growth plan. No current website required.</p>
+ <p>Answer what you can — this spawns your new site concepts and a full social growth plan. No current website required.</p>
</header>
<form id="f">
diff --git a/public/signin.html b/public/signin.html
index 3cd570c..7bb3929 100644
--- a/public/signin.html
+++ b/public/signin.html
@@ -2,67 +2,94 @@
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Consulting Intake · Consulting Portal</title>
+<title>Consulting Intake — Websites & Integrated Social</title>
+<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
<style>
- :root{--ink:#14110e;--paper:#f6f2ec;--gold:#a9884f;--line:#dcd3c5}
- *{box-sizing:border-box}
- body{margin:0;font-family:'Georgia',serif;background:var(--paper);color:var(--ink);min-height:100vh;display:grid;place-items:center;padding:32px}
- .card{max-width:560px;width:100%;background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px rgba(20,17,14,.08);padding:44px 48px}
- .eyebrow{letter-spacing:.32em;text-transform:uppercase;font-size:11px;color:var(--gold);font-family:system-ui,sans-serif}
- h1{font-size:34px;margin:.35em 0 .1em;font-weight:400;letter-spacing:.01em}
- .sub{color:#6b6357;font-style:italic;margin:0 0 24px}
- .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin:20px 0;font-family:system-ui,sans-serif;font-size:14px}
- .grid b{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#9a9082;font-weight:600;margin-bottom:2px}
- .creds{background:#faf7f1;border:1px dashed var(--gold);padding:16px 18px;margin:18px 0;font-family:'SF Mono',ui-monospace,monospace;font-size:13px}
- .creds .row{display:flex;justify-content:space-between;padding:3px 0}
- .creds .k{color:#9a9082}
- a.enter{display:inline-block;margin-top:10px;background:var(--ink);color:#f6f2ec;text-decoration:none;padding:13px 26px;letter-spacing:.16em;text-transform:uppercase;font-size:12px;font-family:system-ui,sans-serif}
- a.enter:hover{background:var(--gold)}
- .foot{margin-top:22px;font-size:12px;color:#9a9082;font-family:system-ui,sans-serif}
- .foot a{color:var(--gold)}
- .gwrap{margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:system-ui,sans-serif}
- .gbtn{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);color:#3c4043;padding:11px 18px;font-size:13px;border-radius:4px;cursor:not-allowed;opacity:.65}
- .soon{font-size:11px;color:#9a9082;letter-spacing:.04em;text-transform:uppercase}
+:root{--bg:#0c1016;--panel:#121722;--ink:#eef1f6;--gold:#c8a15a;--line:rgba(200,161,90,.22);--dim:rgba(238,241,246,.66)}
+*{margin:0;padding:0;box-sizing:border-box}
+body{background:var(--bg);color:var(--ink);font-family:'Jost',system-ui,sans-serif;font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased}
+.disp{font-family:'Cormorant Garamond',Georgia,serif}a{color:inherit;text-decoration:none}
+.bar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:18px 34px;background:linear-gradient(180deg,rgba(12,16,22,.94),rgba(12,16,22,0))}
+.brand{font-family:'Cormorant Garamond',serif;font-size:20px;letter-spacing:.28em;text-transform:uppercase}.brand span{color:var(--gold)}
+.brand small{display:block;font-family:'Jost';font-size:9px;letter-spacing:.32em;color:var(--gold);margin-top:2px}
+.hero{min-height:100vh;position:relative;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(24px,7vw,120px);overflow:hidden}
+.slides{position:absolute;inset:0;z-index:0}
+.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.06);transition:opacity 1.4s ease,transform 7s ease}
+.slide.on{opacity:1;transform:scale(1)}
+.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,16,22,.94),rgba(12,16,22,.62) 55%,rgba(12,16,22,.35));z-index:1}
+.hero .in{position:relative;z-index:2;max-width:880px}
+.kick{font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
+.hero h1{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(42px,6.6vw,92px);line-height:1.02}
+.hero h1 em{font-style:italic;color:var(--gold)}
+.hero p{max-width:60ch;margin-top:24px;font-size:18px;color:var(--dim)}
+.ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
+.cta{display:inline-block;padding:15px 36px;border:1px solid var(--gold);color:var(--ink);font-size:12px;letter-spacing:.26em;text-transform:uppercase;transition:.3s}
+.cta:hover{background:var(--gold);color:var(--bg)}
+.cta.solid{background:var(--gold);color:var(--bg)}.cta.solid:hover{filter:brightness(1.1)}
+.metrics{display:flex;flex-wrap:wrap;gap:44px;margin-top:48px}
+.metrics .v{font-family:'Cormorant Garamond',serif;font-size:36px;color:var(--gold);line-height:1}
+.metrics .l{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-top:6px}
+.access{position:relative;z-index:2;margin-top:44px;display:inline-flex;gap:26px;flex-wrap:wrap;border:1px dashed var(--line);padding:14px 22px;font-size:13px;color:var(--dim)}
+.access b{color:var(--gold);font-weight:400;letter-spacing:.12em;text-transform:uppercase;font-size:11px;margin-right:8px}
+section{padding:clamp(64px,9vw,110px) clamp(24px,7vw,120px);border-top:1px solid var(--line)}
+.eyebrow{font-size:12.5px;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
+h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(30px,4.2vw,52px);line-height:1.05;max-width:22ch}
+.lead2{max-width:66ch;color:var(--dim);margin-top:18px;font-size:19px}
+.cards2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);margin-top:44px}
+.cards2 .c{background:var(--bg);padding:34px 30px}
+.cards2 .c .n{font-family:'Cormorant Garamond',serif;font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
+.cards2 .c h3{font-family:'Cormorant Garamond',serif;font-size:23px;margin:14px 0 10px;font-weight:400}
+.cards2 .c p{color:var(--dim);font-size:15.5px;line-height:1.65}
+.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}.rv.in{opacity:1;transform:none}
+footer{padding:50px clamp(24px,7vw,120px);border-top:1px solid var(--line);color:var(--dim);font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px}
</style>
</head>
<body>
- <div class="card">
- <div class="eyebrow">Consulting Engagement</div>
- <h1>Consulting Intake</h1>
- <p class="sub">Tell us about your business — we'll build your new website and social presence.</p>
+<header class="bar"><a class="brand" href="/">Consulting<small>Websites · Integrated Social</small></a><a class="cta" style="padding:10px 20px;font-size:10px" href="/intake">Start intake →</a></header>
- <div class="grid" id="meta">
- <div><b>Industry</b>Website + integrated-social growth for local businesses</div>
- <div><b>Location</b></div>
- <div><b>Current Site</b>none yet</div>
- <div><b>Engagement Opened</b>2026-07-17</div>
- <div><b>Primary Contact</b></div>
- <div><b>Reach</b> · </div>
+<div class="hero">
+ <div class="slides">
+ <div class="slide on" style="background-image:url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1920&q=68&sat=-40')"></div>
+ <div class="slide" style="background-image:url('https://images.unsplash.com/photo-1449824913935-59a10b8d2000?auto=format&fit=crop&w=1920&q=68&sat=-40')"></div>
+ <div class="slide" style="background-image:url('https://images.unsplash.com/photo-1460472178825-e5240623afd5?auto=format&fit=crop&w=1920&q=68&sat=-40')"></div>
+ <div class="slide" style="background-image:url('https://images.unsplash.com/photo-1515263487990-61b07816b324?auto=format&fit=crop&w=1920&q=68&sat=-40')"></div>
+ <div class="slide" style="background-image:url('https://images.unsplash.com/photo-1554469384-e58fac16e23a?auto=format&fit=crop&w=1920&q=68&sat=-40')"></div>
+ </div>
+ <div class="in">
+ <div class="kick">Consulting Engagement · Intake</div>
+ <h1 class="disp">Your business, <em>rebuilt</em> for the modern web.</h1>
+ <p>Tell us about your business — even if you have no website today. We deliver a full growth strategy, several live-clickable website concept directions, and a deeply integrated social engine: competitors, ad channels, posting cadence, content calendar, video.</p>
+ <div class="ctas">
+ <a class="cta solid" href="/intake">Start the questionnaire →</a>
+ <a class="cta" href="/portal">Client portal</a>
</div>
-
- <!-- Steve's standing rule: the initial sign-in page CARRIES the credentials. -->
- <div class="creds">
- <div class="row"><span class="k">Portal URL</span><span>/portal & /admin</span></div>
- <div class="row"><span class="k">Client login</span><span>client / Consul2026!</span></div>
- <div class="row"><span class="k">Team login</span><span>admin / DW2024!</span></div>
+ <div class="metrics">
+ <div class="m"><div class="v">6+</div><div class="l">Live website concepts</div></div>
+ <div class="m"><div class="v">12</div><div class="l">Analysis sections</div></div>
+ <div class="m"><div class="v">90</div><div class="l">Day action roadmap</div></div>
</div>
+ <div class="access"><span><b>Portal</b>/portal & /admin</span><span><b>Access</b>credentials delivered separately</span></div>
+ </div>
+</div>
- <a class="enter" href="/portal">Enter the deliverable →</a>
-
- <a class="enter" style="background:transparent;color:var(--ink);border:1px solid var(--ink)" href="/admin">Growth command center</a>
+<section>
+ <div class="eyebrow">What you receive</div>
+ <h2 class="disp">A complete growth brief — not a brochure.</h2>
+ <p class="lead2">Every engagement produces the full analysis app: reputation, competitors, where to advertise, timing, website & social audits, suggested new websites (live-clickable), unlikely partners, unlikely revenue streams, video formats, and a 90-day roadmap.</p>
+ <div class="cards2">
+ <div class="c rv"><div class="n">I</div><h3 class="disp">Website concepts</h3><p>Several distinct, working front-page directions — modeled on the leaders of your industry — each opening as a live page with real layout and motion.</p></div>
+ <div class="c rv"><div class="n">II</div><h3 class="disp">Integrated social</h3><p>Competitor ad-intel, best posting times, a content calendar, channel-by-channel playbooks — the social engine wired into one command center.</p></div>
+ <div class="c rv"><div class="n">III</div><h3 class="disp">Data & motion</h3><p>Animated charts, live maps, scored data demos — your strategy presented the way a modern product ships, not a PDF.</p></div>
+ </div>
+</section>
- <!-- Google login is a FUTURE upgrade; standard protection (Basic Auth) is live now. -->
- <div class="gwrap">
- <button class="gbtn" disabled title="Google sign-in is coming soon — use the credentials above for now">
- <svg width="16" height="16" viewBox="0 0 48 48" aria-hidden="true"><path fill="#4285F4" d="M45 24.5c0-1.6-.1-2.8-.4-4H24v7.3h11.9c-.2 1.9-1.5 4.7-4.3 6.6l6.6 5.1C42 41.9 45 33.9 45 24.5z"/><path fill="#34A853" d="M24 46c5.7 0 10.5-1.9 14-5.1l-6.6-5.1c-1.8 1.2-4.2 2.1-7.4 2.1-5.7 0-10.5-3.8-12.2-9l-6.8 5.3C8.5 41.2 15.7 46 24 46z"/><path fill="#FBBC05" d="M11.8 28.9C11.3 27.5 11 26 11 24.5s.3-3 0.8-4.4l-6.8-5.3C3.7 17.6 3 20.9 3 24.5s.7 6.9 2 9.7l6.8-5.3z"/><path fill="#EA4335" d="M24 12.5c3.2 0 5.3 1.4 6.6 2.5l5.8-5.7C33 5.9 28.4 4 24 4 15.7 4 8.5 8.8 5 15.1l6.8 5.3C13.5 15.3 18.3 12.5 24 12.5z"/></svg>
- Continue with Google
- </button>
- <span class="soon">coming soon · standard protection is active now</span>
- </div>
+<footer><span>Consulting Intake · Websites & Integrated Social</span><span>Confidential — for discussion</span></footer>
- <div class="foot">
- New client, or no website yet? <a href="/intake">Start the intake questionnaire →</a>
- </div>
- </div>
+<script>
+(function(){var s=document.querySelectorAll('.slide'),i=0;setInterval(function(){s[i].classList.remove('on');i=(i+1)%s.length;s[i].classList.add('on');},5200);})();
+var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});},{threshold:.12});
+document.querySelectorAll('.rv').forEach(function(el){io.observe(el);});
+</script>
</body>
</html>
← cc8c413 Consulting Intake template home — public questionnaire front
·
back to Consulting Intake
·
chore: v-bump (session close) b6ee91b →