/* ========================================================================== MWI FOOTER WORDMARK -- mwi-footer.css Created 2026-08-12. Enqueued from mwi-motion-loader.php at priority 33. A port of the 21st.dev "hover-footer" component (TextHoverEffect + FooterBackgroundGradient, React + motion/react + Tailwind) onto this site's stack. No React, no Tailwind, no motion/react: the mask follow is a pointer handler writing two SVG attributes, and the stroke draw-on is a CSS keyframe. Idle cost is zero -- there is no rAF loop, per the standing rule this layer inherited from the removed grain layer. WHAT IT DOES NOT TOUCH: every word in the footer -- the brand line, the tagline, the newsletter copy, the Explore / Studio / Contact columns, the Kagithane address, the copyright and the social icons -- is untouched Elementor content on Footer (EN) 18 and Footer (TR) 19 and stays editable in the editor. This sheet adds one wordmark and one light ground. COLOUR: the source component was built on #3ca2fa blue with a five-colour rainbow hover ramp. Every one of those is gone. The ramp here is gold-dominant antique gold -> copper-rose -> antique gold, using the same #C08B7A -> #8E6552 rose the client approved for the Portfolio h13 heroes on 2026-08-09. There is no blue and no blush pink anywhere in this file. SAFETY: nothing here puts a containing-block property on #mwi-header, and nothing changes the footer element itself. The WhatsApp button is a position:fixed descendant of the footer (.mwi-wa-holder), so this sheet scopes strictly to container 9cec0fb, which is its SIBLING, and adds no transform / filter / will-change / contain / perspective anywhere. backdrop-filter is likewise absent -- the site is already carrying ~3.3x the phone viewport in blurred backdrop and this layer adds none. ========================================================================== */ /* -------------------------------------------------------------------------- 1. The light ground Replaces FooterBackgroundGradient. Source was radial-gradient(125% 125% at 50% 10%, #0F0F1166 50%, #3ca2fa33 100%) -- a cool slate core bleeding to blue at the edges. Here the core is the footer's own espresso (#241A12) left fully transparent so the real background shows through untinted, and the bloom at the outer edge is antique gold warming into copper-rose. Held low (.10 / .14) because this sits behind live text and must never lift the ground enough to cost contrast on the links. -------------------------------------------------------------------------- */ #xpro-theme-builder-footer .mwi-fw-glow{ position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(120% 120% at 50% 8%, rgba(36,26,18,0) 44%, rgba(185,146,78,.10) 76%, rgba(192,139,122,.14) 100%); } /* The real content rows must sit above the ground. Elementor sets no position or z-index on container children, so a plain rule is enough -- this is not the --width / --flex-shrink situation that needs !important. BOTH child shapes are covered on purpose. Footer (EN) 18's column is e-con-full, so its rows are direct .elementor-element children; Footer (TR) 19's is e-con-boxed, so the rows sit inside a plain .e-con-inner div that carries no .elementor-element class and would otherwise have been painted over by the ground. Same EN/TR structural split the Portfolio h13 heroes hit. .mwi-fw-host is added by mwi-footer.js, so no Elementor id is hard-coded here either. */ #xpro-theme-builder-footer .mwi-fw-host > .elementor-element, #xpro-theme-builder-footer .mwi-fw-host > .e-con-inner{ position:relative; z-index:1; } /* -------------------------------------------------------------------------- 1b. The inherited slate blue PRE-EXISTING, not introduced by this layer: the footer root inherits color:rgb(58,79,102) -- a cool slate blue -- from the theme. Nothing visible was painting in it, because every Elementor widget in the footer sets its own colour, so it never showed. But it is a cool grey-blue in a palette whose whole rule is "neutrals lean warm, never a cool grey", and it is the value ANY new footer text would inherit. Pinned to the palette's own ink-faint so there is no blue left anywhere in this footer, live or latent, and so the fallback is a real token rather than an invented value. -------------------------------------------------------------------------- */ #xpro-theme-builder-footer{ color:#9C9082; } /* -------------------------------------------------------------------------- 2. The wordmark block The source tucked its wordmark with -mt-52 / -mb-36 Tailwind margins and hid it below lg entirely. Here it stays visible at every width -- hiding the brand on a phone is a loss -- and the tuck is a modest negative bottom margin instead, so it settles into the footer's own bottom padding. -------------------------------------------------------------------------- */ /* The bottom margin is not decoration -- it is clearance. The WhatsApp button is position:fixed at 16px from the right and 18px from the bottom of the VIEWPORT (53x61), so at the page's resting scroll position it lands on top of whatever occupies the bottom-right corner. Without this the final G of WEDDING sits under the green disc. The button is 53x61 at 16px/18px offsets at EVERY viewport, so the clearance it needs is a constant ~79px and this margin is flat, not responsive. The footer's own 32px bottom padding covers part of it; 66px here brings the total under the glyphs to 98px. Measure this at the TRUE page bottom (window.scrollTo(scrollHeight)) -- scrollIntoView({block:'end'}) parks the wordmark's bottom at the viewport edge and reports a collision that does not exist. A first pass at 44px measured a 1px gap at 1024px. Insetting the wordmark from the right instead was rejected: the SVG is xMidYMid centred, so a one-sided inset shifts the wordmark off centre. The WhatsApp button is DISPLAY:NONE above 1024px -- measured, its rect is all zeros at 1440 -- so desktop needs none of this and keeps a tight 22px. The 66px lives in the mobile block below. If the button is ever shown on desktop, that 22px has to go back up to 66px. */ #xpro-theme-builder-footer .mwi-fw{ position:relative; z-index:1; margin:18px 0 22px; width:100%; line-height:0; } #xpro-theme-builder-footer .mwi-fw svg{ display:block; width:100%; height:auto; overflow:visible; -webkit-user-select:none; user-select:none; } /* The wordmark is stored already uppercase and is the ENGLISH brand name. text-transform is deliberately NOT used: this footer renders inside a lang="tr" document on the Turkish tree, where CSS uppercasing maps i to a dotted I and would turn WEDDING into WEDDING with a dotted I. Same trap the footer eyebrow hit on 2026-08-12. Do not add text-transform here. */ #xpro-theme-builder-footer .mwi-fw text{ font-family:"Frank Ruhl Libre",Georgia,"Iowan Old Style",serif; font-weight:700; letter-spacing:.055em; fill:transparent; paint-order:stroke; /* The viewBox is measured from the glyphs (~1027 user units wide) and the SVG is width:100%, so the scale factor swings from ~1.35 on a wide desktop to ~0.34 on a phone. Without this, a stroke authored in user units renders at 0.8px on desktop and 0.24px on a phone -- which is exactly why the first mobile pass looked washed out. non-scaling-stroke moves stroke-width into device pixels, so the widths below are the real rendered widths at every viewport. */ vector-effect:non-scaling-stroke; } /* --- 2a. Base outline: only visible while hovered, exactly as the source. gold-soft at low alpha rather than neutral-200/neutral-800 greys, because this palette carries no cool grey anywhere. --- */ #xpro-theme-builder-footer .mwi-fw-base{ stroke:rgba(220,196,143,.30); stroke-width:.9px; opacity:0; transition:opacity .45s ease; } #xpro-theme-builder-footer .mwi-fw.is-hovered .mwi-fw-base{ opacity:.7; } /* --- 2b. The resting stroke. This is what the wordmark looks like when nobody is pointing at it: antique gold, drawn on once. The source ran this layer in #3ca2fa. --- */ #xpro-theme-builder-footer .mwi-fw-draw{ stroke:rgba(185,146,78,.62); stroke-width:1.1px; stroke-dasharray:1000; stroke-dashoffset:1000; } #xpro-theme-builder-footer .mwi-fw.is-ready .mwi-fw-draw{ animation:mwiFwDraw 4s cubic-bezier(.45,0,.25,1) forwards; } @keyframes mwiFwDraw{ to{ stroke-dashoffset:0; } } /* --- 2c. The revealed stroke, masked to a disc that follows the pointer. --- */ #xpro-theme-builder-footer .mwi-fw-reveal{ stroke-width:1.5px; opacity:0; transition:opacity .35s ease; } #xpro-theme-builder-footer .mwi-fw.is-hovered .mwi-fw-reveal{ opacity:1; } /* -------------------------------------------------------------------------- 3. Sizes -------------------------------------------------------------------------- */ @media (max-width:1024px){ #xpro-theme-builder-footer .mwi-fw{ margin:10px 0 66px; } /* No pointer, so no hover layer can ever be revealed; the resting gold stroke is the whole treatment and is lifted slightly to carry alone. 1px flat rather than 1.1px: at phone scale the counters inside O, D and G close up above that. */ #xpro-theme-builder-footer .mwi-fw-draw{ stroke:rgba(185,146,78,.78); stroke-width:1px; } } /* -------------------------------------------------------------------------- 4. Reduced motion + the Elementor editor In the editor the wordmark is not injected at all (see mwi-footer.js), so the client always sees the true, unadorned footer content while editing -- same principle as the testimonials marquee un-clipping itself there. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ #xpro-theme-builder-footer .mwi-fw.is-ready .mwi-fw-draw{ animation:none; stroke-dashoffset:0; } #xpro-theme-builder-footer .mwi-fw-base, #xpro-theme-builder-footer .mwi-fw-reveal{ transition:none; } }