/* =================================================================== GOLVARY manifesto - faithful port of the CodeGrid rotating-hand demo, scoped under .gv-manifesto and rebranded (deep green + gold, Giovanna / Jost, French). The scroll length comes from the ScrollTrigger pin (pinSpacing), NOT a tall , so nothing global is touched. Logic lives in golvary-manifesto.js. =================================================================== */ .gv-manifesto{ position:relative;width:100%;height:100vh;height:100svh;overflow:hidden; background:var(--gv-green-deep,#022a22);color:var(--gv-cream,#f4efe3); font-family:var(--gv-sans,"Jost",sans-serif); } .gv-manifesto *{box-sizing:border-box} .gv-manifesto__glow{position:absolute;top:50%;left:50%;width:min(90vmin,860px);aspect-ratio:1; transform:translate(-50%,-50%);pointer-events:none; background:radial-gradient(circle,rgba(196,163,90,.13) 0%,transparent 60%)} /* stage holds the dial + hand + words; fades/scales in as the section arrives */ .gv-mf__stage{position:absolute;inset:0;transform-origin:center center;will-change:transform,opacity} .gv-manifesto h1{font-family:var(--gv-display,"Giovanna","Cormorant Garamond",serif); font-weight:400;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.16;letter-spacing:.005em} .gv-manifesto p{font-size:clamp(.9rem,1.1vw,1rem);font-weight:400;color:rgba(244,239,227,.6);line-height:1.55} .gv-manifesto img{width:100%;height:100%;object-fit:cover;opacity:0} /* rotating hand (thin gold bar holding the watch image) */ .gv-mf__hand-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:min(800px,92vmin);height:min(800px,92vmin); display:flex;justify-content:center;align-items:flex-start; transform-origin:center center;transform-style:preserve-3d;will-change:transform;z-index:2} .gv-mf__hand{position:absolute;width:5.5%;height:52.75%;border-radius:1000px;overflow:hidden;opacity:1; background:var(--gv-gold-grad,linear-gradient(180deg,#e6c877,#a9772f));will-change:transform; box-shadow:0 0 34px -6px rgba(216,182,88,.5)} /* Watch dial the hand sweeps: faint ring + minute/hour marks, 12/3/6/9 numerals, and brand text on the face. Static (only the hand rotates); sits behind the hand. */ .gv-mf__dial{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:min(800px,92vmin);height:min(800px,92vmin);border-radius:50%;z-index:0;pointer-events:none; border:1px solid rgba(244,239,227,.07)} .gv-mf__dial::before{content:"";position:absolute;inset:8%;border-radius:50%;border:1px solid rgba(196,163,90,.12)} .gv-mf__ticks{position:absolute;inset:0} .gv-mf__ticks i{position:absolute;top:2%;left:50%;width:2px;height:8px;margin-left:-1px; background:rgba(244,239,227,.16);transform-origin:50% calc(min(800px,92vmin) * 0.48)} /* hour positions become slim gold batons (no numerals - cleaner, more luxury) */ .gv-mf__ticks i.is-hour{width:3px;height:22px;margin-left:-1.5px;border-radius:2px; background:var(--gv-gold,#c4a35a);opacity:.85;box-shadow:0 0 8px -2px rgba(196,163,90,.5)} .gv-mf__brand{position:absolute;top:33%;left:50%;transform:translateX(-50%);white-space:nowrap; font-family:var(--gv-display,"Giovanna",serif);font-size:clamp(.95rem,1.5vw,1.3rem); letter-spacing:.26em;color:var(--gv-gold-light,#e6c877);text-transform:uppercase} .gv-mf__facesub{position:absolute;top:62%;left:50%;transform:translateX(-50%);white-space:nowrap; font-size:.58rem;letter-spacing:.34em;color:rgba(244,239,227,.38);text-transform:uppercase} /* Intro column sits where the hand sweeps (left:25%) and BELOW it (z-index:1 < hand-container z-index:2), so the rotating hand passes over and wipes the text at each cycle change - exactly like the demo. */ .gv-mf__intro{position:absolute;top:calc(50% - 20px);left:25%;width:22.5%;z-index:1} .gv-mf__intro h1{margin:0;color:var(--gv-cream)} .gv-mf__intro h1 span{color:var(--gv-gold,#c4a35a)} .gv-mf__intro h1 em{font-style:normal} /* the final word "Golvary" - JS morphs this node up into the hero logo */ .gv-mf__gv{display:inline-block;color:var(--gv-cream);will-change:transform,opacity;backface-visibility:hidden} .gv-mf__intro p{position:relative;margin-top:.85em;transform:translateX(20px);opacity:0;max-width:34ch} /* "keep scrolling" cue - only shown at the very start, then JS fades it out */ .gv-mf__scrollcue{position:absolute;left:50%;bottom:5.5vh;transform:translateX(-50%);z-index:4; display:flex;flex-direction:column;align-items:center;gap:.7em;pointer-events:none; font:600 .6rem/1 var(--gv-sans,"Jost",sans-serif);letter-spacing:.3em;text-transform:uppercase; color:rgba(244,239,227,.5)} .gv-mf__scrollcue i{width:11px;height:11px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(45deg);animation:gvCueBob 1.7s ease-in-out infinite} @keyframes gvCueBob{0%,100%{transform:rotate(45deg) translate(-2px,-2px)}50%{transform:rotate(45deg) translate(2px,2px)}} /* final reveal (big wordmark + CTA). The container stays laid out so JS can measure the hero as the morph target; hero + CTA fade in individually. */ .gv-mf__website-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); text-align:center;z-index:5;pointer-events:none} .gv-mf__hero{font-family:var(--gv-display,"Giovanna",serif);font-size:clamp(3rem,10vw,9rem); letter-spacing:.02em;color:var(--gv-cream);margin:0;opacity:0;will-change:opacity;backface-visibility:hidden} .gv-mf__website-content .gv-mf__cta{opacity:0;display:inline-flex;align-items:center;gap:.7em;margin-top:26px; padding:15px 32px;border-radius:100px;background:var(--gv-gold-grad,linear-gradient(135deg,#e6c877,#a9772f)); color:#022a22;text-decoration:none;font:600 .74rem/1 var(--gv-sans,"Jost",sans-serif); letter-spacing:.14em;text-transform:uppercase;transition:transform .3s ease,filter .3s ease,box-shadow .3s ease} .gv-mf__website-content .gv-mf__cta:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(216,182,88,.55)} /* fallback when GSAP is unavailable: a clean static watch face + logo + CTA, no pinned scroll animation. */ .gv-manifesto.is-static .gv-mf__hand-container, .gv-manifesto.is-static .gv-mf__intro, .gv-manifesto.is-static .gv-mf__scrollcue{display:none} .gv-manifesto.is-static .gv-mf__website-content{pointer-events:auto} .gv-manifesto.is-static .gv-mf__hero, .gv-manifesto.is-static .gv-mf__cta{opacity:1} @media (max-width:900px){ .gv-mf__intro{width:35%;left:2em} .gv-manifesto h1{font-size:clamp(1.3rem,5.6vw,1.7rem)} .gv-manifesto p{font-size:.9rem} }