/* ==================================================== HERO — TITLE BLOCK / DRAWING SHEET ==================================================== */ /* The hero scrolls naturally — no pin, no dead zone. HERO SEQUENCE in js/main.js drives a SMOOTHED parallax exit as it leaves: content, folio and crop-marks each recede at their own rate (transform/opacity only), eased through exponential smoothing so stepped wheel input glides. */ #hero{position:relative;min-height:100vh;z-index:2;overflow:visible} .hero-pin{ position:relative;min-height:100vh;overflow:hidden; display:flex;align-items:center; padding:130px 24px 110px; } #hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .hero-marks{ position:absolute;inset:clamp(14px,3vw,30px);z-index:1;pointer-events:none;--cl:18px; /* registration: the corner marks converge inward as the sheet is pinned down */ opacity:0;animation:markReg 0.9s cubic-bezier(0.22,1,0.36,1) 0.04s forwards; } @keyframes markReg{from{opacity:0;transform:scale(1.04)}to{opacity:0.5;transform:scale(1)}} /* layout construction lines — rule the sheet, then settle back to ghost weight */ .hero-cl{position:absolute;background:var(--border-strong);opacity:0;pointer-events:none} .hero-cl-v{ left:-34px;top:-46px;width:1px;height:calc(100% + 92px); transform:scaleY(0);transform-origin:top; animation:clDrawY 0.7s cubic-bezier(0.22,1,0.36,1) 0.06s forwards,clSettle 1.1s ease 2.6s forwards; } .hero-cl-h{ top:-46px;left:-60px;height:1px;width:calc(100% + 120px); transform:scaleX(0);transform-origin:left; animation:clDrawX 0.8s cubic-bezier(0.22,1,0.36,1) 0.18s forwards,clSettle 1.1s ease 2.6s forwards; } @keyframes clDrawY{from{opacity:0;transform:scaleY(0)}30%{opacity:0.7}to{opacity:0.7;transform:scaleY(1)}} @keyframes clDrawX{from{opacity:0;transform:scaleX(0)}30%{opacity:0.7}to{opacity:0.7;transform:scaleX(1)}} @keyframes clSettle{to{opacity:0.22}} /* oversized folio watermark — anchors the hero void, matches the section numerals */ .hero-folio{ position:absolute;z-index:0;pointer-events:none;user-select:none; right:clamp(-10px,1vw,48px);bottom:clamp(20px,7vh,88px); font-family:var(--serif);font-weight:600;font-variation-settings:'opsz' 144; font-size:clamp(9rem,30vw,23rem);line-height:0.72;letter-spacing:-0.045em; color:transparent;-webkit-text-stroke:1px rgba(126,138,147,0.11); background:linear-gradient(168deg,rgba(251,200,104,0.06) 0%,rgba(201,136,43,0.02) 55%,transparent 100%); -webkit-background-clip:text;background-clip:text; /* the sheet number stamps in LAST — the drawing is signed once it's drawn */ opacity:0;animation:fadeUp 1s 1.5s cubic-bezier(0.22,1,0.36,1) forwards; } @media(max-width:600px){ .hero-folio{font-size:42vw;right:-7vw;bottom:auto;top:46%} } .hero-inner{position:relative;z-index:2;width:100%;max-width:1100px;margin:0 auto;text-align:left} .hero-kicker{ font-family:var(--mono);font-size:var(--label-md);letter-spacing:0.18em;text-transform:uppercase; color:var(--text-muted);margin-bottom:24px;display:inline-flex;align-items:center;gap:10px; opacity:0;animation:fadeUp 0.8s 0.16s cubic-bezier(0.22,1,0.36,1) forwards; } .hero-kicker::before{content:'';display:block;width:26px;height:1px;background:var(--steel)} /* the title has NO CSS entrance — HERO SEQUENCE engraves it per-char via fluid-text (and springs the foil in + rakes its specular once). .hn-arm is the JS-applied pre-hide; without JS the title simply renders static. */ .hero-name{ font-family:var(--serif);font-weight:600;font-variation-settings:'opsz' 144; font-size:clamp(3.25rem,8vw,6.5rem);line-height:0.98;letter-spacing:-0.025em; color:var(--text-primary); } .hn-arm{opacity:0} /* pre-paint arming — the title + tagline are JS-engraved (no CSS entrance), so without this they'd paint fully-formed for a frame before HERO SEQUENCE hides + animates them (the load "flash"). The html.hero-arming class is set by a synchronous script (motion only), so this hides them from the FIRST paint; main.js hands off to .hn-arm and drops the class in the same tick. */ html.hero-arming .hero-name .hn-mango, html.hero-arming .hero-name .foil, html.hero-arming .hero-architect{opacity:0} /* title + price spans must be inline-block: transforms don't apply to plain inline boxes, and the foil price springs in as a unit */ .hero-name>span,.pricing-price .price-digits{display:inline-block} .hero-dim{ display:flex;align-items:center;gap:16px;max-width:600px;margin:24px 0 18px; opacity:0;clip-path:inset(0 100% 0 0); animation:fadeUp 0.7s 1.18s cubic-bezier(0.22,1,0.36,1) forwards, drawClip 0.95s 1.28s cubic-bezier(0.22,1,0.36,1) forwards; } @keyframes drawClip{to{clip-path:inset(0 0 0 0)}} .hero-dim .seg{flex:1;height:1px;background:var(--border-strong);position:relative} .hero-dim .seg::before{content:'';position:absolute;top:50%;transform:translateY(-50%);width:0;height:0;border-style:solid} .hero-dim .seg.l::before{left:0;border-width:4px 6px 4px 0;border-color:transparent var(--accent) transparent transparent} .hero-dim .seg.r::before{right:0;border-width:4px 0 4px 6px;border-color:transparent transparent transparent var(--accent)} .hero-dim .cap{font-family:var(--mono);font-size:var(--label-md);letter-spacing:0.12em;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap} /* tagline: no CSS entrance — HERO SEQUENCE reveals it, then cycles phrases through the fluid-text engine (calligraph-grade swaps) */ .hero-architect{ font-family:var(--serif);font-style:italic;font-weight:400; font-size:clamp(1.2rem,2.6vw,1.7rem);color:var(--text-secondary);margin-bottom:24px; } .hero-sub{ font-family:var(--sans);font-weight:300;font-size:1.08rem;line-height:1.7; color:var(--text-secondary);max-width:540px;margin-bottom:38px; opacity:0;animation:fadeUp 0.8s 1.5s cubic-bezier(0.22,1,0.36,1) forwards; } .hero-buttons{ display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:44px; opacity:0;animation:fadeUp 0.8s 1.64s cubic-bezier(0.22,1,0.36,1) forwards; } .hero-socials{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; opacity:0;animation:fadeUp 0.8s 1.76s cubic-bezier(0.22,1,0.36,1) forwards; } .social-pill{ display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-md); background:transparent;border:1px solid var(--border); font-family:var(--mono);font-size:var(--label-md);letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted); transition:border-color 180ms ease,color 180ms ease,transform 120ms ease; } .social-pill svg{width:15px;height:15px;flex-shrink:0} .social-pill:hover{border-color:var(--accent);color:var(--text-primary)} .social-pill:active{transform:scale(0.96)} @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} /* hero title-block (top-right schedule) — rows fill in line by line, the way a draftsman completes the schedule. Opacity only: transforms on are unreliable across engines. */ .title-block{ position:absolute;top:0;right:0;border-collapse:collapse; font-family:var(--mono);font-size:var(--label-xs);letter-spacing:0.07em;text-transform:uppercase; } .title-block tr{opacity:0;animation:rowIn 0.45s ease-out forwards} .title-block tr:nth-child(1){animation-delay:0.55s} .title-block tr:nth-child(2){animation-delay:0.605s} .title-block tr:nth-child(3){animation-delay:0.66s} .title-block tr:nth-child(4){animation-delay:0.715s} .title-block tr:nth-child(5){animation-delay:0.77s} @keyframes rowIn{to{opacity:1}} .title-block th,.title-block td{border:1px solid var(--border-strong);padding:6px 12px;text-align:left;font-weight:400} .title-block th{color:var(--text-muted);background:var(--bg-elevated)} .title-block td{color:var(--text-secondary)} .title-block td.ink{color:var(--accent)} .hero-scroll{ position:absolute;bottom:84px;left:50%;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:8px;z-index:2; color:var(--text-muted);font-family:var(--mono);font-size:var(--label-sm);letter-spacing:0.18em;text-transform:uppercase; } .hero-scroll-line{width:1px;height:38px;background:linear-gradient(180deg,var(--steel),transparent)} @media (hover:none){.hero-scroll{display:none}} /* ==================================================== ABOUT ==================================================== */ .about-grid{display:grid;grid-template-columns:1.18fr 0.82fr;gap:clamp(32px,5vw,60px);align-items:start;margin-bottom:48px} .about-left h3{font-family:var(--mono);font-size:var(--label-md);font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:20px} .about-left p{color:var(--text-secondary);font-size:1rem;line-height:1.78;margin-bottom:16px} .about-left p:last-child{margin-bottom:0} .about-cards{display:flex;flex-direction:column;gap:12px} .about-card{padding:20px 22px;display:flex;align-items:flex-start;gap:16px} .about-card-icon{ width:38px;height:38px;flex-shrink:0;border-radius:var(--r-md); border:1px solid var(--border-strong);background:transparent; display:flex;align-items:center;justify-content:center; } .about-card-icon svg{width:18px;height:18px;stroke:var(--accent);fill:none} .about-card-title{font-family:var(--serif);font-weight:500;font-size:1rem;color:var(--text-primary);margin-bottom:5px} .about-card-desc{font-size:0.86rem;color:var(--text-secondary);line-height:1.6} .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .stat-card{padding:24px 20px;text-align:left} .stat-card.featured{ background: linear-gradient(var(--bg-card),var(--bg-card)) padding-box, linear-gradient(180deg,var(--accent-deep),var(--border) 70%) border-box; } .stat-num{ font-family:var(--serif);font-weight:500;font-variation-settings:'opsz' 144;font-size:clamp(2rem,3.4vw,3rem);line-height:1; color:var(--text-primary);font-variant-numeric:tabular-nums lining-nums;margin-bottom:8px; } .stat-card.featured .stat-num{color:var(--accent)} .stat-label{font-family:var(--mono);font-size:var(--label-sm);letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted)} /* ==================================================== ABOUT — STATEMENT PLATE (the manifesto) Leads DWG-01: the architect's own words. A real .glass-card, so the proximity amber hairline frame + registration crop-marks apply unchanged. The video is a framed inner plate with a CUSTOM poster (no raw player chrome): an amber play reticle on the drafting field, mono figure tag + runtime. The