/* FitoNova site -- hand-written, no build step, no external requests. The hero band: copy, the CTA row and the Play badge, the 3D phone stage and the phone shell every band's phones inherit. One of the ordered sheets in public/css/; the load order in every page's IS the cascade, so a rule moved between files is a rule moved in the cascade. Owner's ruling 2026-08-10: no source file over 500 lines. */ /* ----------------------------------------------------------------- hero */ /* The whole band is driven by six numbers declared once here and re-declared by the height tiers at the foot of this file. Nothing below reads a literal again, so a tier is one block of six values rather than a hunt through the sheet. --hdrh is the sticky header the hero starts under; subtracting it is what makes `min-height` mean "one screenful" rather than "one screenful starting 65px down". */ .hero { --hdrh: 65px; --hpad: 56px; --ctagap: 34px; --stagegap: 44px; --stagemin: 412px; --rowgap: 48px; --lanegap: 30px; --pwn: 322; position: relative; overflow: hidden; background: var(--paper); padding: var(--hpad) 0 0; min-height: calc(100svh - var(--hdrh)); display: flex; flex-direction: column; } /* Viewport-fluid, and fluid in BOTH axes: 7.6vw is the handoff's own ramp (94px at the 1240 reference width, which is the look the owner signed off), 10.6svh keeps a short laptop from spending its whole first screen on the headline, and the 96px cap stops a 2560px monitor from inflating the type past what 1240 already looked like. min() takes whichever axis is scarcer. */ .hero h1 { font-size: clamp(38px, min(7.6vw, 10.6svh), 96px); } .hero h1 .accent { color: var(--acc); } .hero-vine-l { left: -150px; top: 120px; width: 450px; } .hero-vine-r { right: -160px; top: 190px; width: 320px; } /* Where each vine enters its band. Every one of them is rooted off-screen on one edge, so the single cut it has lands where nothing can see it. */ .vp-functii-l { left: -170px; top: 230px; width: 430px; } .vp-functii-r { right: -140px; bottom: -210px; width: 320px; } /* The why band's trail is the reference's own: wider and a touch brighter than the other on-band vines, rooted off the bottom-right corner. */ .vp-why-r { right: -60px; bottom: -120px; width: 700px; opacity: 0.26; } .vp-pasi-r { right: -170px; top: 10px; width: 440px; } .vp-pasi-l { left: -140px; bottom: -200px; width: 320px; } .vp-crestem-l { left: -110px; top: -40px; width: 420px; } .vp-preturi-l { left: -180px; top: 180px; width: 330px; } .vp-preturi-r { right: -150px; bottom: -200px; width: 320px; } .vp-faq-l { left: -130px; bottom: -190px; width: 330px; } .vp-demo-l { left: -110px; top: -60px; width: 460px; } .vp-demo-r { right: -100px; top: 120px; width: 560px; } .hero-copy { position: relative; z-index: 2; text-align: center; } .cta-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; margin-top: var(--ctagap); } /* The Play badge is drawn, never fetched: the four-colour glyph is inline SVG because no external image may load. */ .play-badge { display: inline-flex; align-items: center; gap: 12px; background: var(--playbg); color: #fff; padding: 13px 22px; } .play-badge:hover { background: var(--playbg2); color: #fff; } .play-glyph { width: 22px; height: 22px; flex: none; } .badge-text { display: flex; flex-direction: column; gap: 2px; text-align: left; } /* The CTA row rides the same ramp as the headline, one notch flatter: at the 1240 reference it lands on the handoff's 10/17/16, and it gives back a couple of pixels rather than staying full size next to a shrunken h1. */ .badge-small { font: 400 clamp(9px, 0.81vw, 10px) / 1 "Barlow", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.72; } .badge-big { font: 600 clamp(15px, 1.37vw, 17px) / 1 "Barlow Condensed", sans-serif; letter-spacing: 0.01em; } .ghost-link { display: inline-flex; align-items: center; gap: 9px; font: 500 clamp(14px, 1.29vw, 16px) / 1 "Barlow", sans-serif; color: var(--ink); border-bottom: 1px solid var(--line2); padding: 6px 2px; background: none; } .ghost-link:hover { color: var(--acc); border-color: var(--acc); } .ghost-link svg { fill: none; stroke: currentColor; stroke-width: 1.5; } /* ---------------------------------------------------- the 3D phone stage */ /* Three columns and three rows: a left lane, the phone's own column (exactly as wide as the phone, so no chip can ever reach it), a right lane. The chips are the only in-flow children -- the glow, the phone and the fade are absolute and drop out of the grid -- so their separation is a track gap rather than six hand-measured offsets, and it holds at every width. The row tracks are minmax(auto, ): the floor is the chip's own height plus --rowgap, which is what makes the no-overlap guarantee independent of the stage height; the ceiling is a share of the stage, which is what lets the group breathe on a tall screen instead of huddling at the top. */ .phone-stage { position: relative; flex: 1; min-height: var(--stagemin); width: 100%; max-width: 1240px; margin: var(--stagegap) auto 0; padding: 0 32px; display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--pwn) * 1px) minmax(0, 1fr); grid-template-rows: minmax(auto, 30%) minmax(auto, 22%) auto; column-gap: var(--lanegap); row-gap: var(--rowgap); align-items: start; justify-items: start; } .stage-glow { position: absolute; left: 50%; bottom: -60px; transform: translateX(-50%); width: 880px; height: 420px; pointer-events: none; background: radial-gradient(58% 58% at 50% 62%, var(--glow), transparent 70%); } /* The bottom of the phone dissolves into the page rather than being cut: the device reads as standing in the band, not pasted on it. */ .stage-fade { position: absolute; left: -32px; right: -32px; bottom: 0; height: 170px; z-index: 4; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--paper) 78%); } /* Every length is a ratio of --pwn, the same trick .fan-phone already uses, so a height tier resizes the device by moving one number: 322 gives back the reference's 322 wide / 666 tall / -286 overhang exactly. */ .hero-phone { position: absolute; left: 50%; bottom: calc(var(--pwn) * -0.8882px); margin-left: calc(var(--pwn) * -0.5px); width: calc(var(--pwn) * 1px); z-index: 2; perspective: 1700px; perspective-origin: 50% 30%; filter: drop-shadow(0 40px 60px var(--pshade)); } /* The phone faces the viewer dead on -- owner's ruling, 2026-08-10, and the pixel reference's own pose: no yaw, no pitch, and no pointer-follow tilt. preserve-3d and the two plates behind the glass stay: they are what gave the frame its thickness at the old yaw, and straight on they simply sit squarely behind it. The glow, the sheen and the bottom dissolve all still read at this pose, so they are untouched. */ .hero-phone .phone-frame { transform-style: preserve-3d; } /* The entrance is the reference's: the device rises into the hero once, on load, and it is a CSS animation rather than a revealed class so it plays with JS off too. Reduced motion never enters the query and gets the resting state at first paint. */ @media (prefers-reduced-motion: no-preference) { @keyframes hero-phone-in { from { opacity: 0; transform: translateY(60px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .hero-phone { animation: hero-phone-in 0.9s cubic-bezier(0.16, 0.68, 0.24, 1) 0.26s backwards; } } .phone-frame { position: relative; padding: 11px; background: linear-gradient(160deg, #2b3238, #0e1418 42%, #242b31); border-radius: 44px; } /* Two plates behind the glass give the frame real thickness: at this yaw the right edge comes toward the viewer and both plates show as a few pixels of machined side. */ .phone-back { position: absolute; inset: 0; border-radius: 44px; background: linear-gradient(160deg, #20262b, #0b1014 55%, #1b2126); transform: translateZ(-15px); } .phone-mid { position: absolute; inset: 4px; border-radius: 40px; background: #11171b; transform: translateZ(-8px); } .phone-btn-l { position: absolute; left: -2px; top: 150px; width: 2px; height: 64px; background: #3b444b; border-radius: 2px; } .phone-btn-r { position: absolute; right: -2px; top: 190px; width: 2px; height: 92px; background: #3b444b; border-radius: 2px; } .phone-screen { position: relative; overflow: hidden; border-radius: 34px; background: var(--appbg); display: flex; flex-direction: column; } .hero-phone .phone-screen { --as: calc((var(--pwn) - 22) / 360); height: calc((var(--pwn) - 22) * 800px / 360); } .phone-notch { position: absolute; left: 50%; top: 11px; transform: translateX(-50%); width: 86px; height: 24px; background: #0e1418; border-radius: 14px; z-index: 5; } /* One specular sheen, at the angle a studio window would fall. Stacked highlights are what makes a mock-up read as plastic. */ .phone-sheen { position: absolute; inset: 0; border-radius: 34px; pointer-events: none; z-index: 6; background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 26%, transparent 46%); } /* ------------------------------------------------------------ responsive */ /* The height tiers. A laptop is short before it is narrow -- 1911x1030 and 1280x800 are the same width class and nothing like the same budget -- so the hero's vertical furniture is tiered on height, not on width. Each tier redeclares the same six numbers and nothing else; --stagegap never drops below 32px because that is the clearance the chips' upward drift needs against the CTA row above them (see the margin math in chips.css). */ @media (max-height: 900px) { .hero { --hpad: 44px; --ctagap: 28px; --stagegap: 38px; --stagemin: 380px; --pwn: 296; } } @media (max-height: 780px) { .hero { --hpad: 36px; --ctagap: 24px; --stagegap: 34px; --stagemin: 342px; --pwn: 264; } } @media (max-height: 660px) { .hero { --hpad: 28px; --ctagap: 20px; --stagegap: 32px; --stagemin: 300px; --pwn: 236; } } @media (max-width: 768px) { .hero { --hpad: 28px; } .cta-row { flex-direction: column; align-items: stretch; } .cta-row > * { justify-content: center; } .stage-fade { left: -20px; right: -20px; } /* The stage kept the 1240px shell's 32px gutter while .wrap had already dropped to 20; the phone sat on a different margin from the copy above it. */ .phone-stage { padding: 0 20px; } /* 30px tall next to a 56px Play badge, and the pair are the hero's two calls to action. */ .ghost-link { min-height: 44px; justify-content: center; } } /* The hero is min-height:100svh and the phone hangs 286px below the stage to dissolve into the page. On a short phone in landscape, or a tall one with the browser chrome expanded, the copy and the device were competing for the same fold; the device gives way rather than the words. */ @media (max-width: 560px) { .hero { --hdrh: 56px; --stagegap: 32px; --stagemin: 300px; --pwn: 322; } /* A phone is narrow long before it is short, so the width ramp takes over here and the height axis only guards the landscape case. */ .hero h1 { font-size: clamp(34px, min(12vw, 13svh), 60px); } .stage-glow { width: 100%; height: 320px; } }