/* ============================================================ Jelly Roll Social Club — Homepage Framework-free (plain HTML/CSS/JS), WordPress-ready. ------------------------------------------------------------ PALETTE (edit here to recolour the whole site later) ------------------------------------------------------------ */ :root{ --cream:#F8F1E1; /* page background */ --cream-panel:#FDF7EA; /* story mascot panel */ --navy:#333A8F; /* primary text / links */ --navy-deep:#23305C; /* darker navy (menu, borders)*/ --coral:#F06278; /* main CTA buttons */ --pink:#C24E76; /* pink accent */ --pink-dark:#8E3252; --pink-tint:#F6D9E2; --blue:#3E7CC4; /* blue accent */ --blue-dark:#1F4E86; --blue-tint:#D9E6F4; --line:#C9BB9C; /* menu dividers */ } /* ------------------------------------------------------------ BASE ------------------------------------------------------------ */ *{box-sizing:border-box;} html,body{margin:0;padding:0;background:var(--cream);} body{font-family:Montserrat,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--navy-deep);-webkit-font-smoothing:antialiased;} img{display:block;max-width:100%;} /* ------------------------------------------------------------ PINNED-HERO FIX for WordPress/Elementor hosts. The hero's scroll-jack uses position:sticky. Many themes (and Elementor's own theme-*.css) set `overflow-x:hidden` on html/body — notably `[data-elementor-device-mode*="mobile"] body{overflow-x:hidden}`, a MOBILE-ONLY rule — which silently disables position:sticky for every descendant, so the pin works on desktop but dies on mobile. `overflow-x:clip` still prevents horizontal scroll but, unlike `hidden`, does NOT make the element a scroll container, so sticky keeps working. Selectors match those specific host rules so this out-ranks them. ------ */ html,body, [data-elementor-device-mode*="mobile"] body, html.vc_mobile,html.vc_mobile body{ overflow-x:clip !important; overflow-y:visible !important; } a{color:var(--navy);text-decoration:none;} a:hover{color:var(--coral);} /* ------------------------------------------------------------ KEYFRAMES (from the original design) ------------------------------------------------------------ */ @keyframes jr-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}} @keyframes jr-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}} @keyframes jr-story-float{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-10px) rotate(1deg);}} @keyframes jr-fade-up{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}} /* Hero entrance — plays once on load, staggered. #heroText only animates opacity/blur (never transform) since main.js drives its transform on scroll; animating that property here too would fight the JS every frame. */ @keyframes jr-hero-fade-down{from{opacity:0;transform:translateY(-18px);}to{opacity:1;transform:translateY(0);}} @keyframes jr-hero-blur-in{from{opacity:0;filter:blur(18px);}to{opacity:1;filter:blur(0);}} @keyframes jr-hero-mascot-in{ 0%{opacity:0;transform:scale(0.6) rotate(-8deg);} 55%{opacity:1;transform:scale(1.08) rotate(3deg);} 75%{transform:scale(0.97) rotate(-1deg);} 100%{opacity:1;transform:scale(1) rotate(0deg);} } @keyframes jr-hero-fade-up{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}} @keyframes jr-hero-figure-in{from{opacity:0;transform:translateY(120px);}to{opacity:1;transform:translateY(0);}} /* ------------------------------------------------------------ HERO ENTRANCE (one-shot, plays on load) ------------------------------------------------------------ */ .hero-in-badge{animation:jr-hero-fade-down .7s cubic-bezier(.16,1,.3,1) .05s both;} .hero-in-word{animation:jr-hero-blur-in 1.1s cubic-bezier(.16,1,.3,1) .15s both;} .hero-in-mascot{animation:jr-hero-mascot-in .9s cubic-bezier(.34,1.56,.64,1) .35s both;} .hero-in-girl{animation:jr-hero-figure-in .9s cubic-bezier(.16,1,.3,1) .45s both;} .hero-in-boy{animation:jr-hero-figure-in .9s cubic-bezier(.16,1,.3,1) .45s both;} .hero-in-tagline{animation:jr-hero-fade-up .7s cubic-bezier(.16,1,.3,1) .55s both;} .hero-in-cta{animation:jr-hero-fade-up .6s cubic-bezier(.16,1,.3,1) .65s both;} .hero-in-marquee{animation:jr-hero-fade-up .6s cubic-bezier(.16,1,.3,1) .75s both;} /* ------------------------------------------------------------ HOVER / INTERACTION HELPERS (the design pressed CTAs "down" on hover; nav profile swaps colours) ------------------------------------------------------------ */ .jr-press{transition:transform .15s ease, box-shadow .15s ease;} .jr-press:hover{transform:translateY(3px); box-shadow:0 3px 0 var(--navy) !important;} .svc-badge img{transition:transform .25s ease;} .svc-row:hover .svc-badge img{transform:scale(1.12) rotate(-6deg);} .rev-arrow{transition:transform .15s ease, box-shadow .15s ease;} .rev-arrow:hover{transform:translateY(-50%) translateY(2px);} /* ------------------------------------------------------------ STORY reveal-on-scroll (driven by .is-visible added via JS) ------------------------------------------------------------ */ .story-fade{opacity:0;transform:translateY(28px);transition:opacity .9s ease, transform .9s ease;} .story-fade.d1{transition-delay:.15s;} .story-tag{opacity:0;transition:opacity 1s ease, transform 1s ease;} .story-tag.t1{transform:translate(-14px,-10px) rotate(-4deg);} .story-tag.t2{transform:translate(14px,10px) rotate(3deg);} .story-tag.t3{transform:translate(14px,-10px) rotate(5deg);} .story-tag.t4{transform:translate(-14px,10px) rotate(-3deg);} .story-tag.t5{transform:translate(-12px,-8px) rotate(2deg);} .story-tag.t6{transform:translate(12px,-8px) rotate(-5deg);} .story-tag.t7{transform:translate(14px,8px) rotate(4deg);} .story-tag.t8{transform:translate(-10px,8px) rotate(-2deg);} .is-visible .story-fade{opacity:1;transform:translateY(0);} .is-visible .story-tag{opacity:1;} .is-visible .story-tag.t1{transform:translate(0,0) rotate(-4deg);} .is-visible .story-tag.t2{transform:translate(0,0) rotate(3deg);} .is-visible .story-tag.t5{transform:translate(0,0) rotate(2deg);} .is-visible .story-tag.t6{transform:translate(0,0) rotate(-5deg);} .is-visible .story-tag.t7{transform:translate(0,0) rotate(4deg);} .is-visible .story-tag.t8{transform:translate(0,0) rotate(-2deg);} .is-visible .story-tag.t3{transform:translate(0,0) rotate(5deg);} .is-visible .story-tag.t4{transform:translate(0,0) rotate(-3deg);} /* Two clearly separated brand strokes frame the mascot panel. */ #story-mascot-card{border:2px solid var(--blue);outline:2px solid var(--pink);outline-offset:7px;overflow:hidden;} .story-tag{z-index:2;pointer-events:none;user-select:none;will-change:left,top;} /* No-JS / reduced-motion safety: show story content */ @media (prefers-reduced-motion: reduce){ .story-fade,.story-tag{opacity:1 !important;transform:none !important;transition:none;} [style*="animation"]{animation:none !important;} .hero-in-badge,.hero-in-word,.hero-in-mascot,.hero-in-girl,.hero-in-boy,.hero-in-tagline,.hero-in-cta,.hero-in-marquee{ animation:none !important;opacity:1 !important;transform:none !important;filter:none !important; } } /* ------------------------------------------------------------ RESPONSIVE (desktop layout is untouched below 961px+) ------------------------------------------------------------ One standardized system for tablet/phone: • horizontal gutter = clamp(22px, 4vw, 44px) — same on every section • vertical rhythm = clamp(48px, 8vw, 80px) — same on every section Phones get 22px gutters, tablets scale up to 44px, all from one formula so spacing reads identical section-to-section. ------------------------------------------------------------ */ @media (max-width:960px){ /* hero title word: tablets keep the pre-shrink desktop size (the 12vw desktop-only shrink above would look too small on tablets, which have a similarly wide hero as desktop) — phones override this again below. */ #heroText img{height:17vw !important;} /* stack the fixed grids */ #menu-grid{grid-template-columns:1fr !important;} #menu-grid > div{border-right:none !important;} #product-grid{grid-template-columns:1fr !important;} #reviews-grid{grid-template-columns:1fr !important;} /* ---- standardized horizontal gutter ---- */ #story > div{padding-left:clamp(22px,4vw,44px) !important;padding-right:clamp(22px,4vw,44px) !important;} #product-grid{padding-left:clamp(22px,4vw,44px) !important;padding-right:clamp(22px,4vw,44px) !important;} #svc-col{padding:clamp(16px,3vw,24px) clamp(22px,4vw,44px) 0 !important;} #detail-col{padding:clamp(20px,4vw,28px) clamp(22px,4vw,44px) 0 !important;} /* ---- menu categories: desktop's tall stacked cards (title + tagline + chevron) become a horizontally-scrolling tab bar once the grid is a single column — a native "segmented control" feel instead of a second wall of vertical text above the services list. ---- */ #cat-col{ display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important; gap:10px !important;overflow-x:auto !important;overflow-y:hidden !important; padding:clamp(16px,3vw,20px) clamp(22px,4vw,44px) !important; scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch; scrollbar-width:none; } #cat-col::-webkit-scrollbar{display:none;} .cat-card{ flex:0 0 auto !important;scroll-snap-align:start; padding:10px 18px !important;white-space:nowrap; } .cat-tagline, .cat-chevron{display:none !important;} .cat-title{font-size:12.5px !important;} /* ---- standardized vertical rhythm ---- */ #story{padding-top:clamp(48px,8vw,80px) !important;padding-bottom:clamp(48px,8vw,80px) !important;} #product-grid{padding-top:clamp(48px,8vw,80px) !important;padding-bottom:clamp(48px,8vw,80px) !important;} #reviews > div:last-child{padding-top:clamp(44px,7vw,70px) !important;padding-bottom:clamp(48px,8vw,80px) !important;} #menu-grid{padding-top:clamp(96px,26vw,132px) !important;padding-bottom:clamp(40px,7vw,50px) !important;} /* ---- story: tighten the stacked columns, let the card fill the gutter ---- */ #story > div > div{gap:clamp(28px,5vw,64px) !important;} #story-mascot-wrap{width:100% !important;min-width:0 !important;} /* cap the card so it never balloons on tablets (phones stay narrower than this, so they still fill the gutter); wrap centres it */ #story-mascot-card{max-width:460px !important;} /* ---- menu: the sticky service list + detail panel (with its left- border divider) are a desktop device — both pin in place beside the (usually taller) category rail. Once the grid stacks to one column there's no taller neighbour to stick beside, so drop it. ---- */ #svc-col,#detail-col{position:static !important;} .detail-inner{border-left:none !important;padding-left:0 !important;} /* decorative floating pills: the gravity physics in main.js sizes their bounds from the card's actual clientWidth/clientHeight at runtime, so they still fit properly on a narrower mobile card — just shrink them a little so more can fit without crowding. */ .story-tag{font-size:12px !important;padding:5px 11px !important;} /* decorative clipper hand: below this breakpoint the menu collapses to a single column with a horizontally-scrolling tab bar at the top, so there's no side gutter for it anymore. Instead of hiding it, shrink it and give it its own clear band above the tabs (see #menu-grid padding-top above). */ #menu-clipper{width:clamp(120px,32vw,168px) !important;top:16px !important;} /* ---- hero figures: only the SIZE changes below the desktop breakpoint — each figure takes a smaller share of the screen so the mascot, title and CTA keep the middle. The vw term is what matters (a narrow window is what used to blow these up to full width); the vh term only guards short landscape windows. Position/crop are inherited from the inline styles: bottom:0 plus a translateY(36%) on the img, where a percentage translate resolves against the element's OWN height, so the "cut at the legs" framing is identical at every size and needs no per-breakpoint offset. Figures also drop behind the mascot here. ---- */ .hero-girl-wrap,.hero-boy-wrap{z-index:1 !important;} .hero-girl-wrap img{height:min(62vw,64vh) !important;} .hero-boy-wrap img{height:min(60vw,64vh) !important;} } @media (max-width:600px){ /* MOBILE HERO — behave EXACTLY like desktop: full scroll-jack. The pinned (sticky) section, the 180vh scroll runway, and the giant word that starts offscreen → slides across as you scroll → releases the scroll to the next section only once it clears the edge are ALL inherited from #hero's inline styles + main.js. We add no layout override here; the one mobile-only tweak is shrinking the mascot so it isn't oversized on a narrow screen (JS still drives its slide-in — only the size is capped). */ #heroMascot{width:120px !important;height:auto !important;} /* the pinned panel is a full 100vh screen — on a tall/narrow phone that leaves a huge void between the mascot (upper-centre) and the tagline+CTA (glued to the bottom via bottom:36px). Regroup them: mascot near centre, tagline+CTA right beneath it, so the empty space reads as balanced breathing room above (below badge) and below (above marquee), not one giant gap. */ #hero .hero-mascot-wrap{top:46% !important;} #hero .hero-cta-wrap{bottom:auto !important;top:62% !important;} .hero-tagline{text-align:center !important;font-size:16px !important;} /* ---- hero title word, PHONES ONLY: a bit larger than the 17vw desktop/ tablet base size. Safe to resize — onScroll() re-reads offsetWidth every frame, so the slide-in/centering animation adapts automatically. ---- */ #heroText img{height:21vw !important;} /* ---- hero figures, PHONES ONLY (the 960px block above handles tablets). Growing the height alone hits a wall: the figure is anchored bottom:0 and cropped by translateY(36%), and it also has to keep clear of the mascot in the middle — so most of the extra size lands off-stage instead of on it. Negative margins are what unlock it: the wrapper sits flush at the edge (right/left:0) and the margin pulls the image sideways off-screen, so the part still on screen can be much larger without the pair meeting in the middle. Size and bleed are tuned together — raise one, raise the other. */ .hero-girl-wrap{right:-8vw !important;} .hero-boy-wrap{left:-19vw !important;} .hero-girl-wrap img{height:min(108vw,82vh) !important;margin-left:-27vw !important;} .hero-boy-wrap img{height:min(106vw,82vh) !important;margin-right:-27vw !important;} /* product CTAs: side-by-side "See More Product" overflows on small phones, so stack them full-width */ .product-cta{flex-direction:column !important;} .product-cta > a{flex:none !important;width:100% !important;} /* ---- flat 20px gutter on phones (overrides the tablet clamp above). Selectors are prefixed html body to out-rank any theme/Elementor CSS that happens to load after this stylesheet in WordPress. ---- */ html body #story > div{padding-left:20px !important;padding-right:20px !important;} html body #story{padding-top:90px !important;padding-bottom:120px !important;} html body #menu-grid{padding-bottom:80px !important;} html body #product-grid{padding-left:20px !important;padding-right:20px !important;} html body #cat-col{padding-left:20px !important;padding-right:20px !important;} html body #svc-col{padding-left:20px !important;padding-right:20px !important;} html body #detail-col{padding-left:20px !important;padding-right:20px !important;} html body #rev-viewport{margin-left:20px !important;margin-right:20px !important;} }