/* ============================================================================= * VNM — "Buy me a lambo" footer button (A6 / hub#4279) * ----------------------------------------------------------------------------- * THIS IS A RESTORATION, NOT A DESIGN. Everything between the VERBATIM PORT * fences below is copied BYTE-FOR-BYTE out of the reference plane: * * wp-content/themes/solutech/css/single.css * L6116-6227 -> block 1 (desktop) * L6459 + L6469-6491 + L6499-6520 -> block 2 (@media max-width:1200px, * the .footer-neon-btn rules ONLY — the same media block * also carries .woocommerce and .custom-header rules that * belong to other components and are deliberately NOT ported) * L6522-6525 -> the mobile keyframes * * The unmodified extracts ship in the lane as lanes/A6/origin/lambo-desktop.css * (sha256 fd1214cb…) and lanes/A6/origin/lambo-mobile.css (sha256 1232cbed…), * and merge-lanes.sh re-derives the fenced regions from this file and compares * them against those files. Edit a ported byte and THE BUILD FAILS. That is the * point: "keep original" is only a claim until something can refuse to build. * * ON `!important`: there are 24 of them below and NOT ONE IS MINE. A4 and A5 * both falsified `!important` as a fix and this lane did not reach for it * either; these are the original author's own declarations, carried across * unchanged because removing them would change the cascade the original relies * on (e.g. `.img-left img { transform: translateY(-50%) }` is deliberately NOT * `!important` so the drive-in @keyframes can win — a detail that only survives * if the surrounding `!important`s survive too). The build guard pins the count. * * ON THE `@import`: line 1 of the source stylesheet, kept here because it is * where the button's typeface comes from. Without it `font-family: 'Cookie'` * falls back to `cursive` and the button renders in a completely different face * at a completely different width. Measured on the reference plane: the Cookie * face is loaded and the text box is 268x82.5 at 55px. * ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Cookie&display=swap"); /* >>>>>>>>>>>>>>>>>>>> BEGIN VERBATIM PORT: desktop >>>>>>>>>>>>>>>>>>>> */ .footer-neon-btn { position: relative; display: flex; align-items: center; justify-content: center; /* Centers the text horizontally if needed */ padding: 20px; text-decoration: none; overflow: visible; /* Ensures the image can pop out if it's larger than the button */ } /* Neon background via pseudo-element so we can fade out the left side without fading the car out of bounds */ .footer-neon-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; background: radial-gradient(circle at 60% 40%, #5c189b 0%, #2f0460 70%); /* Open left side / Rounded right side */ border: 2px solid #a450ff; border-left: none; border-radius: 0 20px 20px 0; /* Neon Glow effect */ box-shadow: 5px 0 15px 0 #a450ff, inset 5px 0 15px 0 #a450ff; transition: all 0.3s ease; /* Fade out opacity 25% from the left edge */ -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%); mask-image: linear-gradient(to right, transparent 0%, black 25%); } /* Center the image absolutely */ .footer-neon-btn img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* Perfectly centers the image */ width: auto; height: 120%; /* Scale the image so it exceeds the container height slightly */ z-index: 2; transition: transform 0.3s ease; } /* Hover effect */ .footer-neon-btn:hover::before, .footer-neon-btn.driving-out::before { border-color: #d49fff; box-shadow: 5px 0 25px 0 #d49fff, inset 5px 0 25px 0 #d49fff; } /* Move image slightly forward on hover */ .footer-neon-btn:hover img, .footer-neon-btn.driving-out img { transform: translate(calc(-50% + 10px), -50%); } /* (Optional) Adjust your text to sit above or beside the centered image */ .footer-neon-btn span, .footer-neon-btn .text { position: relative; z-index: 3; /* Keep text above the image */ font-family: 'Cookie', cursive; font-size: 55px; line-height: 1.5; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); transition: all 0.3s ease; } .footer-neon-btn:hover span, .footer-neon-btn.driving-out span, .footer-neon-btn:hover .text, .footer-neon-btn.driving-out .text { color: #fff !important; /* Ensure it stays white */ text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px rgba(255, 255, 255, 0.8) !important; /* White neon glow */ } /* Variation: Second Button (Image Left, Text Right) */ .footer-neon-btn.img-left { justify-content: flex-end !important; /* Push text to the right */ padding-right: 40px !important; /* Add breathing room for the text on the right */ } /* Position image to the left and out slightly */ html body .footer-neon-btn.img-left img { left: 20px !important; top: 50% !important; transform: translateY(-50%); /* No !important so keyframes can work */ width: 300px; height: auto; transition: transform 1.2s cubic-bezier(0.5, 0, 1, 0.5); /* No !important */ z-index: 5; } /* Adjust hover state for this specific variation */ html body .footer-neon-btn.img-left.driving-out img { transform: translateY(-50%) translateX(-150vw); /* ride completely out */ } /* Hard-brake return animation from the right side */ @keyframes driveInFromRight { 0% { transform: translateY(-50%) translateX(150vw); /* Keyframes do not accept !important */ } 100% { transform: translateY(-50%) translateX(0); } } html body .footer-neon-btn.img-left.return-right img { transition: none; /* override transition */ animation: driveInFromRight 1.5s cubic-bezier(0.1, 0.7, 0.1, 1) forwards; } /* <<<<<<<<<<<<<<<<<<<<< END VERBATIM PORT: desktop <<<<<<<<<<<<<<<<<<<<< */ /* >>>>>>>>>>>>>>>>>>>>> BEGIN VERBATIM PORT: mobile >>>>>>>>>>>>>>>>>>>> */ @media (max-width: 1200px) { .footer-neon-btn { flex-direction: column-reverse !important; align-items: center !important; justify-content: center !important; padding: 30px 20px 20px !important; } html body .footer-neon-btn.img-left { padding: 30px 20px 20px !important; margin-top: 25px; } html body .footer-neon-btn.img-left img, html body .footer-neon-btn img { position: relative !important; left: auto !important; top: auto !important; transform: none; width: 100% !important; max-width: 250px !important; margin-top: 15px; height: auto !important; } html body .footer-neon-btn:hover img, html body .footer-neon-btn.img-left:hover img { transform: translateX(10px) !important; } html body .footer-neon-btn.driving-out img, html body .footer-neon-btn.img-left.driving-out img { transform: translateX(-150vw) !important; } html body .footer-neon-btn.return-right img, html body .footer-neon-btn.img-left.return-right img { animation: driveInFromRightMobile 1.5s cubic-bezier(0.1, 0.7, 0.1, 1) forwards !important; } .footer-neon-btn span, .footer-neon-btn .text { font-size: 40px !important; text-align: center; line-height: 1.1; } } @keyframes driveInFromRightMobile { 0% { transform: translateX(150vw); } 100% { transform: translateX(0); } } /* <<<<<<<<<<<<<<<<<<<<<< END VERBATIM PORT: mobile <<<<<<<<<<<<<<<<<<<<<< */ /* ----------------------------------------------------------------------------- * A6 ADDITION — NOT part of the port. Read this before assuming it is padding. * * The ported rules style the BUTTON. They do not, and on the reference plane did * not, set its width: there the button sits in a 630px WPBakery column and the * `` fills it. On this site the button sits in A2's `.vnm-footer__cta` flex * item, which shrink-wraps — and a shrink-wrapped `.footer-neon-btn.img-left` is * ~328px wide, at which width the absolutely-positioned 300px car (left:20px) * and the right-aligned 268px text occupy the SAME pixels and overlap into an * unreadable smear. Every declaration in the port would still be correct; the * button would still be wrong. * * So the SLOT is sized, not the button: * 1440 -> min(630px, 100%) = 630px, the reference width exactly. * 414 -> min(630px, 100%) = 100% of a ~372px column, and the ported * max-width:1200px rules have already stacked the car above the text, * so there is nothing to overlap. * No !important: this file is enqueued after A2's vnm-chrome.css, so at equal * specificity it simply wins. * -------------------------------------------------------------------------- */ .vnm-footer__cta { flex: 0 1 auto; min-width: min(630px, 100%); }