/** * Supra Force — Home hero (.supra-hero-intro / [supra_hero_intro]). * * Every rule below is scoped under .supra-hero-intro (or a descendant of * it), never a bare svg/h2/p/span selector, so nothing here can leak onto * any other part of the site. * * Default state = final state, always. With no JavaScript, with * prefers-reduced-motion, or the instant a script/GSAP/element check ever * fails, a visitor sees the finished composition directly (large filled * wings + "Seja," / "bem-vindo(a)." open to the sides) — nothing is ever * hidden waiting for a script that might not run. Outline, blue panel, * slogans and the auxiliary side copy belong only to the intermediate * animation phase and stay hidden here by default. * * The ONLY thing that changes the picture is a `supra-hero-will-animate` * class added to — synchronously, before first paint, by a tiny * inline script in wp_head (see supra-force-custom.php). If hero-intro.js's * own deeper checks (elements present, paths measurable, GSAP actually * loaded) fail, it removes the class immediately and this file's default * rules put the approved final state right back. * * The filled wings are a SINGLE unified SVG (.supra-hero-fill-full, * asa-full.svg) — not two separate left/right halves. This is * deliberate: two separately-rendered SVG files meeting at a shared edge * always risk a visible seam no matter how precisely they're aligned, and * a single file has no seam to risk in the first place. Nothing here * clones or overlaps two halves. * * ROUND-3 SIMPLIFICATION: there is no blue full-background phase anymore * (no expansion, no metamorphosis, no mask). The hero stays light * throughout; the wing only ever fades (opacity) in and out, and the * slogans are blue text directly on the light background. See * hero-intro.js for the sequence. */ :root { /* Real header height is measured and written here by hero-intro.js (ResizeObserver, same pattern as custom-nav-menu.js). 235px is the actual measured height of .elementor-location-header today — a real fallback, not a guess, so there is no layout jump before any JS runs. */ --supra-header-height: 235px; } .supra-hero-intro { position: relative; width: 100%; overflow: hidden; background-color: #ffffff; min-height: max(540px, calc(100svh - var(--supra-header-height, 235px))); } /* Elementor's own widget wrapper and shortcode render wrapper must not be allowed to constrain the experience's width/height — both are stretched to fill .supra-hero-intro completely instead of sizing to content. */ .supra-hero-intro > .elementor-widget-shortcode, .supra-hero-intro .elementor-shortcode { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; } .supra-hero-experience { position: absolute; inset: 0; width: 100%; height: 100%; /* This box is the containing block for the slogans (.supra-hero-slogans is position:static, so the absolutely-positioned .supra-hero-slogan children resolve against THIS element). Each slogan is inset:0, i.e. already the full viewport width, and the entrance tween parks it at x:+48 (TIMING.sloganTravel in hero-intro.js) before sliding to x:0 — which pushed its right edge past the viewport and produced a transient horizontal scrollbar on Desktop, measured at 25-34px from ~1750ms to ~4000ms at 1280/1366/1440/1920. Clipping the animation stage is the fix at the source: this box IS the window the slogans are meant to slide through. `clip` and not `hidden` on purpose — `clip` creates no scroll container and leaves any sticky/fixed descendant alone. Measured across 10 viewports: the wing (.supra-hero-wings-stage) always resolves within 0..viewport-width, so nothing visible is ever cut. Tablet/Mobile are unaffected — the intro is gated to min-width:1025px and already measured 0 there. */ overflow-x: clip; } /* ------------------------------------------------------------------ * Wings stage — outline-left/right + the single fill-full SVG all share * the exact same viewBox (0 0 1200 600), so stacking them at inset:0 with * equal width/height registers them pixel-perfect on top of each other. * ------------------------------------------------------------------ */ .supra-hero-wings-stage { position: absolute; left: 50%; /* Vertical centering is NOT "box middle at 50%" (top:50% + translate(-50%,-50%)) — the wing's own bounding box inside its 1200x600 viewBox IS already perfectly symmetric (measured: x 53.7- 1146.3, y 87.2-512.8, center exactly 600/300 = 50%/50%), but the FILLED area is not: the tips taper to almost nothing while the feather cluster spreads wide near the bottom, so the area-weighted visual centroid sits at y≈330.8 of 600 = 55.1% down the wing's own box, not 50%. Centering the box's geometric middle at the hero's 50% therefore reads as "wing sitting low" — confirmed against a flattened-bezier polygon-centroid calculation, not eyeballed. top:50% + translate(-50%,-55.1%) instead anchors that 55.1%-down point (the wing's true visual center of mass) at the hero's actual vertical center, and does so independent of viewport size (a percentage of the box's OWN height, not a fixed px value) — no path geometry was touched to achieve this. */ top: 50%; transform: translate(-50%, -55.1%); /* The wings are the composition's dominant element — sized to land at roughly 62% of viewport width on large desktop screens. Kept deliberately short of "filling the screen": min/max bounds stay a firm ceiling/floor, and act as safety margin for the wing loop (a few percent of breathing room around the wingtips so the loop's subtle scale/translate never risks touching the container edges). */ width: clamp(810px, 62vw, 1200px); max-width: 100%; aspect-ratio: 1200 / 600; pointer-events: none; } .supra-hero-outline-left, .supra-hero-outline-right, .supra-hero-fill-full, .supra-hero-fill-reveal { position: absolute; inset: 0; width: 100%; height: 100%; /* Origin sits at the wings' own root/junction point (x=600 of the 1200-wide canvas = 50%; y≈455 of the 600-tall canvas ≈ 76%), not the element's geometric center — the resting breathing loop's scale/translate (hero-intro.js) is anchored here, so the wings always breathe from where they actually attach. */ transform-origin: 50% 76%; } .supra-hero-outline-left svg, .supra-hero-outline-right svg, .supra-hero-fill-full svg, .supra-hero-fill-reveal svg { display: block; width: 100%; height: 100%; } /* ------------------------------------------------------------------ * Outline half-clip — each outline SVG's own path geometry reaches to * (and very slightly past, at stroke-width scale) the shared center * junction (x=600 of the 1200-wide canvas = 50%). Clipping each wrapper * to its own half prevents either stroke from ever rendering a pixel on * the opposite side of that centerline, which is what produced the * brief "X" during the draw/fade-in — this never touches the SVG files * or their path geometry, only what each wrapper is allowed to paint. * ------------------------------------------------------------------ */ .supra-hero-outline-left { clip-path: inset(0 50% 0 0); } .supra-hero-outline-right { clip-path: inset(0 0 0 50%); } /* Final static state: only the filled wings are visible. */ .supra-hero-outline-left, .supra-hero-outline-right { display: none; } /* ------------------------------------------------------------------ * Fill reveal — a second, geometrically-identical copy of asa-full.svg * (same position/size/transform-origin as .supra-hero-fill-full), * layered on top. Hidden/closed by default; hero-intro.js opens it via * clip-path (center -> edges) for the brief internal color-reveal after * the slogans, then hides it again once .supra-hero-fill-full has been * restored to full opacity underneath (see file header / JS). Never a * scale change, never a shape other than the wing's own silhouette. * ------------------------------------------------------------------ */ .supra-hero-fill-reveal { opacity: 0; clip-path: inset(0% 50% 0% 50%); pointer-events: none; } /* ------------------------------------------------------------------ * Blue panel — kept only for markup compatibility (see hero-intro.php). * There is no blue full-background phase: no expansion, no metamorphosis, * no mask, no clip-path. Forced fully inert here, unconditionally, and * hero-intro.js never queries or touches this element at all. * ------------------------------------------------------------------ */ .supra-hero-blue-panel { display: none; opacity: 0; visibility: hidden; pointer-events: none; } /* ------------------------------------------------------------------ * Slogans — animation-only, hidden in the static final state. * ------------------------------------------------------------------ */ .supra-hero-slogans { display: none; } .supra-hero-slogan { display: none; position: absolute; inset: 0; margin: 0; align-items: center; justify-content: center; font-family: "Gunterz", sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(28px, 4vw, 56px); /* Blue text directly on the hero's own light background — there is no blue backdrop behind the slogans anymore. */ color: #425fdb; } /* ------------------------------------------------------------------ * Final stage — houses the welcome text (always visible, the permanent * resting content) and the auxiliary side copy (intermediate-phase only, * hidden below). * ------------------------------------------------------------------ */ .supra-hero-final-stage { position: absolute; inset: 0; } /* Auxiliary copy — NOT part of the permanent final state. Belongs only to an intermediate animation phase (bottom corners, never the top, so it never competes with the wings above). Positioning is prepared here in full so hero-intro.js only ever toggles visibility/opacity, never repositions these elements. */ .supra-hero-copy-left, .supra-hero-copy-right { display: none; position: absolute; /* Bottom-anchored only — top is explicitly reset so no cascaded/ inherited top value can ever compete with bottom at the same time. */ top: auto; bottom: 8%; max-width: min(320px, 26%); margin: 0; font-family: "LUXE UNO", sans-serif; font-weight: 300; /* ONE continuous fluid scale, Mobile through large Desktop — added 2026-07-24, replacing the old split system (this line was 14-18px, plus a separate 12-15px override below <=1024px). At ~1098px ("small Desktop") the old value was pinned to its 14px floor — measured ~10px smaller than it should read, per live validation — while Desktop maior (1440px) only reached 16.56px. New curve: 13px at the narrowest phones, ~22px at 1098px (closing almost exactly that ~10px gap), capping at 23px around 1000px so it stays legible/supportive without competing with "Seja,"/ "bem-vindo(a)." above it. See the old <=1024px override further down — its own font-size line is removed, this single rule now covers that whole range too. */ font-size: clamp(13px, calc(11px + 1vw), 23px); line-height: 1.5; color: #0e0e66; pointer-events: none; /* Bottom-to-top reveal: the box's own top edge sweeps down from fully clipped (inset 100% from the top = nothing visible) to fully open (inset 0% = the whole box). No separate masking element/band — the clip-path IS the mask, so there's nothing to misalign or leave a visible seam. Line-height/padding are untouched, so descenders and accents are never cut once the reveal finishes opening. */ clip-path: inset(100% 0 0 0); } .supra-hero-copy-left { left: 4%; text-align: left; } .supra-hero-copy-right { right: 4%; text-align: right; } .supra-hero-copy-left span, .supra-hero-copy-right span { color: #425fdb; font-weight: 400; } .supra-hero-welcome { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 4%; box-sizing: border-box; pointer-events: none; } .supra-hero-welcome-left, .supra-hero-welcome-right { font-family: "LUXE UNO", sans-serif; font-weight: 400; /* ONE continuous fluid scale, Mobile through large Desktop — added 2026-07-24, replacing the old split system (this line was 28-44px, plus a separate 20-36px override below <=1024px). Deliberately smaller across the board than before, especially at Desktop: at ~1098px the old value was ~32.9px (reading as competing with the wing per live validation); at 1440px it reached its 44px ceiling. New curve caps at 30px around 1155px and never grows past that — "Seja,"/"bem-vindo(a)." stay secondary to the wing at any Desktop width instead of continuing to grow with the viewport. See the old <=1024px override further down — its own font-size line is removed, this single rule now covers that whole range too. */ font-size: clamp(20px, calc(15px + 1.3vw), 30px); color: #0e0e66; white-space: nowrap; } /* +6px at large Desktop only, added 2026-07-24 — explicit request: the base clamp above is already flat at its 30px ceiling from ~1155px onward (including 1440px+), so this is a direct, deliberate step up from that ceiling (30 + 6 = 36px), not a new curve — scoped narrowly to >=1440px only, leaving 1025-1439px (and the <=1199px top/bottom composition) exactly as already approved. */ @media (min-width: 1440px) { .supra-hero-welcome-left, .supra-hero-welcome-right { font-size: 36px; } } /* ------------------------------------------------------------------ * Animating mode — html.supra-hero-will-animate. Flips the composition * to its starting point: outline containers become visible (the actual * stroke is still invisible via stroke-dashoffset, set inline by * hero-intro.js before the timeline starts), fill-full and welcome start * transparent, slogans/copy stay display:none until hero-intro.js flips * each one's display individually right before animating it. Nothing * here is ever the ONLY path to the final state — every override is * undone the instant the will-animate class is removed (success, * interruption, or a failed safety check). * ------------------------------------------------------------------ */ html.supra-hero-will-animate .supra-hero-outline-left, html.supra-hero-will-animate .supra-hero-outline-right { display: block; } html.supra-hero-will-animate .supra-hero-fill-full { opacity: 0; } html.supra-hero-will-animate .supra-hero-welcome-left, html.supra-hero-will-animate .supra-hero-welcome-right { opacity: 0; } html.supra-hero-will-animate .supra-hero-slogan, html.supra-hero-will-animate .supra-hero-copy-left, html.supra-hero-will-animate .supra-hero-copy-right { pointer-events: none; } /* ------------------------------------------------------------------ * Replay control — a single small, public button. Hidden by default * (opacity:0 + pointer-events:none, so it can never be clicked while * invisible) and only revealed by hero-intro.js adding `.is-visible` once * the intro reaches its final resting state. Purely cosmetic/positional: * no effect on the hero's size or flow (absolute, outside the document * flow) and no interaction with the animation timing itself. * ------------------------------------------------------------------ */ .supra-hero-intro .supra-hero-replay-btn { position: absolute; top: -2px; right: 18px; z-index: 20; display: inline-flex; align-items: center; justify-content: center; /* Restricted, exhaustive reset — scoped only to this exact button, never a site-wide `button` rule. !important is used on every property confirmed (via live DevTools inspection) to be contested by the active theme's hello-commerce-woocommerce.css, which targets essentially every