`public/signin.html`

98 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>Consulting Intake — Websites &amp; 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{--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.04);transition:opacity 1.4s ease;will-change:transform,opacity}
.slide.on{opacity:1;animation:kenburns 13s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.4%,-1.2%,0)}}
@media(prefers-reduced-motion:reduce){.slide.on{animation:none;transform:scale(1)}.rv{transition:none}}
.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>
<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="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>
    <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 &amp; /admin</span><span><b>Access</b>credentials delivered separately</span></div>
  </div>
</div>

<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 &amp; 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 &amp; 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>

<footer><span>Consulting Intake · Websites &amp; Integrated Social</span><span>Confidential — for discussion</span></footer>

<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>