#fw-section-text-carousel-42b07d00-7941-4b10-8cd3-293b4c73d70b { --font-heading-scale: 1.0; --font-body-scale: 1.0; } #fw-section-text-carousel-42b07d00-7941-4b10-8cd3-293b4c73d70b { --color-primary: #ffffff; --color-primary-rgb: 255, 255, 255; --color-background: #000000; --color-background-rgb: 0, 0, 0; --color-on-background: #ffffff; --color-on-background-rgb: 255, 255, 255; --color-on-primary: #000000; --color-on-primary-rgb: 0, 0, 0; --color-product-image-background: #214b90; --color-background-brightness: 0; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #000000; --primary-btn-text: #ffffff; --primary-btn-border-color: #ffffff; --secondary-btn-bg: #ffffff; --secondary-btn-text: #000000; --secondary-btn-border-color: #ffffff; .text-carousel__text { text-shadow: -5px 5px 5px #000000 !important; } } #fw-section-hero-0 { --color-primary: #f4f1eb; --color-primary-rgb: 244, 241, 235; --color-background: transparent; --color-background-rgb: transparent; --color-on-background: #f4f1eb; --color-on-background-rgb: 244, 241, 235; --color-on-primary: #4c3c2f; --color-on-primary-rgb: 76, 60, 47; --color-product-image-background: #214b90; --color-background-brightness: 6; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: transparent; --primary-btn-text: #f4f1eb; --primary-btn-border-color: #f4f1eb; --secondary-btn-bg: #f4f1eb; --secondary-btn-text: transparent; --secondary-btn-border-color: #f4f1eb; } #fw-section-footer { --font-heading-scale: 1.15; --font-body-scale: 1.27; } #fw-section-announcement-bar-0 { --color-primary: #d34830; --color-primary-rgb: 211, 72, 48; --color-background: #ffffff; --color-background-rgb: 255, 255, 255; --color-on-background: #000000; --color-on-background-rgb: 0, 0, 0; --color-on-primary: #ffffff; --color-on-primary-rgb: 255, 255, 255; --color-product-image-background: #214b90; --color-background-brightness: 255; background-color: var(--color-background); color: var(--color-on-background); --primary-btn-bg: #ffffff; --primary-btn-text: #d34830; --primary-btn-border-color: #000000; --secondary-btn-bg: #000000; --secondary-btn-text: #ffffff; --secondary-btn-border-color: #000000; } #fw-section-header { --font-heading-scale: 1.0; --font-body-scale: 1.12; } #fw-section-header { /* ======================================================= Y2K Molten Gel Capsule Style (Physical Margin Lift) ====================================================== */ .header__link, .header__icon { display: inline-block !important; padding: 10px 22px !important; border-radius: 50px !important; font-family: "Times New Roman", Times, serif !important; /* Reinstated your preferred retro font */ font-weight: bold !important; color: #000000 !important; /* Text color kept solid black */ text-decoration: none !important; position: relative !important; overflow: hidden !important; /* 3-Layer 2000s Engine: Specular highlight, running light sheen, and sharp molten gold split */ background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 40%), repeating-linear-gradient( 115deg, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 160px, rgba(255, 255, 255, 0.85) 200px, rgba(255, 255, 255, 0) 240px, rgba(255, 255, 255, 0) 400px ), linear-gradient(to bottom, #fff3a1 0%, #e6be2e 48%, #947200 52%, #ffea73 100%) !important; background-size: 100% 100%, 400% 100%, 100% 100% !important; background-position: 0% 0%, 0% 0%, 0% 0% !important; background-repeat: no-repeat, repeat-x, no-repeat !important; /* High contrast border wrap */ border: 1px solid #ffffff !important; /* Baseline Resting Shadows + Glass Shimmer Inset */ box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25), inset 0 1px 3px rgba(255, 255, 255, 0.8), inset 4px -4px 6px rgba(0, 0, 0, 0.2), -2px 3px 5px rgba(0, 0, 0, 0.15) !important; /* Baseline Margins to prevent layout shifting when resting */ margin-top: 0px !important; margin-bottom: 0px !important; /* Snappy layout transitions for the physical margin pop */ transition: background-position 0s linear, margin 0.2s ease-out, box-shadow 0.2s ease-out !important; } /* ======================================================= THE LOOP TRIGGER & PHYSICAL MARGIN HOVER ======================================================= */ .header__link:hover, .header__icon:hover { color: #000000 !important; /* Keeps your 3-second forward light gleam rolling perfectly */ background-position: 0% 0%, 400% 0%, 0% 0% !important; transition: background-position 3s linear, margin 0.2s ease-out, box-shadow 0.2s ease-out !important; /* THE PHYSICAL JUMP BYPASS: Shifts the element up 3px and adds 3px to the bottom so the rest of the page layout doesn't move */ margin-top: -3px !important; margin-bottom: 3px !important; /* Deepened shadow depth to match the physical lift and glow */ box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35), inset 0 1px 3px rgba(255, 255, 255, 0.9), inset 4px -4px 6px rgba(0, 0, 0, 0.15), -5px 7px 12px rgba(0, 0, 0, 0.3) !important; } /* Tactile click-down response via inset shadows and margin reset */ .header__link:active, .header__icon:active { transition: none !important; margin-top: 1px !important; margin-bottom: -1px !important; background-position: 0% 0%, 0% 0%, 0% 0% !important; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.1) !important; } /* Inner typography layers remain fully protected on top */ .header__link * { vertical-align: middle !important; position: relative !important; z-index: 5 !important; font-family: "Times New Roman", Times, serif !important; /* Forced down to children elements */ color: inherit !important; /* Forces child elements like text spans to respect the black text color */ } .header__link .cart-widget { background: transparent !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; display: inline !important; } }