/* Theme Name: Milano Child Template: milano Description: Child theme for Milano. Add your customizations here so they survive theme updates. Version: 1.0.1 Text Domain: milano-child */ /* Footer Bottom Center Alignment */ .footer-bottom .footer-row, .footer-bottom .footer-col { justify-content: center !important; text-align: center !important; } /* Center the MAKE THEM JEALOUS CTA below its photo grid. */ .elementor-element-9ed6dc4 .fifty-home-jealous-cta-wrap { display: flex; justify-content: center; width: 100%; margin: 28px auto 8px; padding: 0 clamp(20px, 3vw, 32px); box-sizing: border-box; } .elementor-element-9ed6dc4 .fifty-home-adventures-btn { display: inline-flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 420px !important; min-width: 0 !important; height: clamp(58px, 5.2vw, 68px) !important; padding: 0 clamp(20px, 3vw, 30px) !important; box-sizing: border-box !important; border: 1.5px solid rgba(34, 211, 238, 0.58) !important; font-size: clamp(18px, 1.8vw, 21px) !important; letter-spacing: 0.06em !important; } .elementor-element-9ed6dc4 .fifty-home-adventures-btn::after { font-size: 1em !important; margin-left: 8px !important; } @media (max-width: 767px) { .elementor-element-9ed6dc4 .fifty-home-jealous-cta-wrap { margin-top: 22px; } } /* ========================================================================== Footer Baseline Alignment (Desktop) - จัดบรรทัดซ้ายและขวาให้อยู่ระนาบเดียวกันเป๊ะ ========================================================================== */ .site-footer, .site-footer .footer-middle, .site-footer .footer-bottom { background-color: #030406 !important; } .site-footer .footer-middle { --row-padding-top: 30px !important; padding-top: 30px !important; } .site-footer .footer-middle .footer-row { align-items: center !important; } .site-footer .footer-middle .col-slot-1 { align-items: center !important; gap: 20px !important; } .site-footer .footer-middle .col-slot-2 { align-items: center !important; } .site-footer .footer-middle .footer-widgets-area { display: inline-flex !important; align-items: center !important; min-height: unset !important; } .site-footer .footer-middle .footer-widgets-area .widget { padding-bottom: 0 !important; margin-bottom: 0 !important; display: inline-flex !important; align-items: center !important; } .site-footer .footer-middle .footer-widgets-area ul.menu, .site-footer .footer-middle .footer-widgets-area li.menu-item { margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; } .site-footer .footer-middle .footer-widgets-area a { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 15.5px !important; font-weight: 500 !important; color: #94a3b8 !important; line-height: 1.5 !important; display: inline-flex !important; align-items: center !important; margin: 0 !important; text-decoration: none !important; transition: color 0.2s ease !important; } .site-footer .footer-middle .footer-widgets-area a:hover, .site-footer .footer-middle .footer-widgets-area a:active { color: #28D3EE !important; } .site-footer .component-copyright, .site-footer .component-copyright *, .site-footer .copyright, .site-footer .footer-middle .component-copyright { font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 14.5px !important; font-weight: 400 !important; color: #94a3b8 !important; line-height: 1.5 !important; letter-spacing: 0.02em !important; display: inline-flex !important; align-items: center !important; margin: 0 !important; } /* ========================================================================== Desktop Footer Menu: Hide Home & Services (1024px and up) ========================================================================== */ @media (min-width: 1024px) { body .site-footer .footer-middle .footer-widgets-area--1, body .site-footer .footer-middle .footer-widgets-area--2 { display: none !important; } } /* ========================================================================== Apple Signature Footer Redesign (Mobile & Tablet) ========================================================================== */ @media (max-width: 1023px) { .site-footer .footer-middle { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; padding-top: 1.5rem !important; padding-bottom: 1.75rem !important; } .site-footer .footer-middle .footer-row { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important; text-align: center !important; } /* Row 1: Apple-style Inline Navigation Ribbon */ .site-footer .footer-middle .col-slot-1 { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 2px 0px !important; width: 100% !important; margin: 0 auto !important; text-align: center !important; } .site-footer .footer-middle .footer-widgets-area { display: inline-flex !important; align-items: center !important; min-height: unset !important; margin: 0 !important; padding: 0 !important; } .site-footer .footer-middle .footer-widgets-area .widget, .site-footer .footer-middle .footer-widgets-area ul.menu, .site-footer .footer-middle .footer-widgets-area li.menu-item { display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } .site-footer .footer-middle .footer-widgets-area a { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; color: #94a3b8 !important; padding: 6px 10px !important; line-height: 1.4 !important; display: inline-flex !important; align-items: center !important; transition: color 0.2s ease !important; -webkit-tap-highlight-color: transparent !important; text-decoration: none !important; } .site-footer .footer-middle .footer-widgets-area a:hover, .site-footer .footer-middle .footer-widgets-area a:active { color: #28D3EE !important; } /* Dynamic Mobile Footer Ribbon (Dynamic Menu: Excludes Current Page on Mobile) */ body .site-footer .footer-middle .col-slot-1 .footer-widgets-area::after, body .site-footer .footer-middle .footer-widgets-area::after { display: none !important; content: none !important; } /* Base display for ribbon items (1=AFTER 50, 2=BY YOUR SIDE, 3=CONTACT, 6=YouTube) */ body .site-footer .footer-middle .footer-widgets-area--1, body .site-footer .footer-middle .footer-widgets-area--2, body .site-footer .footer-middle .footer-widgets-area--3, body .site-footer .footer-middle .footer-widgets-area--6 { display: inline-flex !important; align-items: center !important; } /* Always hide Terms & Privacy on mobile ribbon */ body .site-footer .footer-middle .footer-widgets-area--4, body .site-footer .footer-middle .footer-widgets-area--5 { display: none !important; } /* Dynamic Self-Exclusion: Exclude Current Page's Own Item */ /* 1. index.html (AFTER 50 page): Hide Area 1 */ body.home .site-footer .footer-middle .footer-widgets-area--1, body.page-id-2150 .site-footer .footer-middle .footer-widgets-area--1 { display: none !important; } /* 2. contact.html (CONTACT page): Hide Area 3 */ body.page-id-92 .site-footer .footer-middle .footer-widgets-area--3 { display: none !important; } /* 3. by-your-side.html (BY YOUR SIDE page): Hide Area 2 */ body.page-id-90 .site-footer .footer-middle .footer-widgets-area--2 { display: none !important; } /* Luminous Cyan (#6EC1E4) Separator Dots between visible items */ body.home .site-footer .footer-middle .col-slot-1 .footer-widgets-area--2::after, body.home .site-footer .footer-middle .col-slot-1 .footer-widgets-area--3::after, body.page-id-2150 .site-footer .footer-middle .col-slot-1 .footer-widgets-area--2::after, body.page-id-2150 .site-footer .footer-middle .col-slot-1 .footer-widgets-area--3::after, body.page-id-92 .site-footer .footer-middle .col-slot-1 .footer-widgets-area--1::after, body.page-id-92 .site-footer .footer-middle .col-slot-1 .footer-widgets-area--2::after, body.page-id-90 .site-footer .footer-middle .col-slot-1 .footer-widgets-area--1::after, body.page-id-90 .site-footer .footer-middle .col-slot-1 .footer-widgets-area--3::after, body.page-id-721 .site-footer .footer-middle .col-slot-1 .footer-widgets-area--1::after, body.page-id-721 .site-footer .footer-middle .col-slot-1 .footer-widgets-area--2::after, body.page-id-721 .site-footer .footer-middle .col-slot-1 .footer-widgets-area--3::after, body.page-id-719 .site-footer .footer-middle .col-slot-1 .footer-widgets-area--1::after, body.page-id-719 .site-footer .footer-middle .col-slot-1 .footer-widgets-area--2::after, body.page-id-719 .site-footer .footer-middle .col-slot-1 .footer-widgets-area--3::after { content: "•" !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #6EC1E4 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; user-select: none !important; pointer-events: none !important; vertical-align: middle !important; margin: 0 clamp(6px, 1.8vw, 10px) !important; } /* Row 2: Apple-style Discreet Copyright (WCAG AA >= 4.5:1 contrast over #030406) */ .site-footer .footer-middle .col-slot-2 { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin: 0 !important; text-align: center !important; } body .site-footer .footer-middle .component-copyright, body .site-footer .footer-middle .component-copyright * { font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; color: #94a3b8 !important; text-align: center !important; line-height: 1.5 !important; letter-spacing: 0.02em !important; margin: 0 !important; } } /* ========================================================================== Apple Obsidian Stealth Buttons: EXPLORE ALL PRODUCTS & EXPLORE & LEARN ========================================================================== */ .elementor-element-75ddddf > .e-con-inner, .elementor-element-9ed6dc4 > .e-con-inner { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } [data-interaction-id="e19becd"], [data-interaction-id="b315404"], .elementor-element-75ddddf .e-button-base, .elementor-element-9ed6dc4 .e-button-base { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; width: auto !important; min-width: 290px !important; max-width: fit-content !important; height: 54px !important; margin: 28px auto 0 !important; padding: 0 40px !important; border-radius: 9999px !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 1.125rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; text-transform: uppercase !important; background: linear-gradient(135deg, #00252e 0%, #0a3a46 100%) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; box-shadow: 0 10px 25px -5px rgba(0, 37, 46, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; cursor: pointer !important; text-decoration: none !important; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; position: relative !important; outline: none !important; user-select: none !important; -webkit-tap-highlight-color: transparent !important; } /* Directional Arrow Indicator */ [data-interaction-id="e19becd"]::after, [data-interaction-id="b315404"]::after, .elementor-element-75ddddf .e-button-base::after, .elementor-element-9ed6dc4 .e-button-base::after { content: "\2192" !important; display: inline-block !important; margin-left: 4px !important; font-size: 16px !important; line-height: 1 !important; color: rgba(255, 255, 255, 0.85) !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease !important; } /* Hover State - Fluid Lift, Completely Stable Background (NO colored background glow or flash) */ [data-interaction-id="e19becd"]:hover, [data-interaction-id="b315404"]:hover, .e-button-base:hover, .elementor-element-75ddddf .e-button-base:hover, .elementor-element-9ed6dc4 .e-button-base:hover { background: linear-gradient(135deg, #00252e 0%, #0a3a46 100%) !important; /* Preserves solid dark obsidian background */ border-color: rgba(255, 255, 255, 0.25) !important; /* Neutral subtle border, NO orange border */ box-shadow: 0 12px 28px -4px rgba(0, 37, 46, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; /* Neutral shadow, NO colored glow */ transform: translateY(-2px) scale(1.015) !important; color: #ff6b35 !important; /* ExpatSafe Signature Orange Text */ } [data-interaction-id="e19becd"]:hover span, [data-interaction-id="b315404"]:hover span, .e-button-base:hover span, .elementor-element-75ddddf .e-button-base:hover span, .elementor-element-9ed6dc4 .e-button-base:hover span { color: #ff6b35 !important; } [data-interaction-id="e19becd"]:hover::after, [data-interaction-id="b315404"]:hover::after, .e-button-base:hover::after, .elementor-element-75ddddf .e-button-base:hover::after, .elementor-element-9ed6dc4 .e-button-base:hover::after { transform: translateX(4px) !important; color: #ff6b35 !important; /* ExpatSafe Signature Orange Arrow */ } /* Explicit Revert State on Mouse Leave / Focus Released */ [data-interaction-id="e19becd"]:not(:hover), [data-interaction-id="b315404"]:not(:hover), .e-button-base:not(:hover), .elementor-element-75ddddf .e-button-base:not(:hover), .elementor-element-9ed6dc4 .e-button-base:not(:hover) { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.16) !important; box-shadow: 0 10px 25px -5px rgba(0, 37, 46, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } [data-interaction-id="e19becd"]:not(:hover) span, [data-interaction-id="b315404"]:not(:hover) span, .e-button-base:not(:hover) span, .elementor-element-75ddddf .e-button-base:not(:hover) span, .elementor-element-9ed6dc4 .e-button-base:not(:hover) span { color: #ffffff !important; } [data-interaction-id="e19becd"]:not(:hover)::after, [data-interaction-id="b315404"]:not(:hover)::after, .e-button-base:not(:hover)::after, .elementor-element-75ddddf .e-button-base:not(:hover)::after, .elementor-element-9ed6dc4 .e-button-base:not(:hover)::after { color: rgba(255, 255, 255, 0.85) !important; transform: translateX(0) !important; } /* Active / Tap State - Tactile Haptic Feel */ [data-interaction-id="e19becd"]:active, [data-interaction-id="b315404"]:active, .elementor-element-75ddddf .e-button-base:active, .elementor-element-9ed6dc4 .e-button-base:active { transform: translateY(0) scale(0.98) !important; box-shadow: 0 4px 12px -2px rgba(0, 37, 46, 0.4) !important; } /* Responsive: Tablet (768px - 1024px) */ @media (max-width: 1024px) { [data-interaction-id="e19becd"], [data-interaction-id="b315404"], .elementor-element-75ddddf .e-button-base, .elementor-element-9ed6dc4 .e-button-base { height: 52px !important; min-width: 270px !important; padding: 0 32px !important; font-size: 14px !important; margin-top: 24px !important; } } /* Responsive: Mobile (< 768px) - Ergonomic Thumb Target */ @media (max-width: 767px) { [data-interaction-id="e19becd"], [data-interaction-id="b315404"], .elementor-element-75ddddf .e-button-base, .elementor-element-9ed6dc4 .e-button-base { width: calc(100% - 40px) !important; max-width: 340px !important; height: 50px !important; padding: 0 24px !important; font-size: 13.5px !important; letter-spacing: 0.8px !important; margin: 20px auto 0 !important; } } /* ========================================================================== Shoppable Video Carousel: Full Card Click & Frosted Glass Play Badge ========================================================================== */ /* Full card clickable modal toggle for TOP SELLING */ .milano-shopable-video__item uix-modal-toggle { position: absolute !important; inset: 0 !important; z-index: 10 !important; display: block !important; cursor: pointer !important; } .milano-shopable-video__media video, .milano-shopable-video__media img { pointer-events: none; } /* Translucent Frosted-Glass Play Button (THAILAND MADE SIMPLE) */ .milano-play-btn-circle { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.18) !important; backdrop-filter: blur(14px) saturate(180%) !important; -webkit-backdrop-filter: blur(14px) saturate(180%) !important; border: 1.5px solid rgba(255, 255, 255, 0.45) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; } .milano-shopable-video__item:hover .milano-play-btn-circle { transform: scale(1.15) !important; background: rgba(255, 255, 255, 0.28) !important; border-color: rgba(0, 242, 254, 0.9) !important; box-shadow: 0 0 28px rgba(0, 242, 254, 0.5), 0 14px 35px rgba(0, 0, 0, 0.45) !important; } .milano-shopable-video__item .milano-play-btn-circle svg { transition: transform 0.3s ease; } .milano-shopable-video__item:hover .milano-play-btn-circle svg { transform: scale(1.12); } @media (max-width: 767px) { .milano-play-btn-circle { width: 52px; height: 52px; } .milano-play-btn-circle svg { width: 20px; height: 20px; } } /* ========================================================================== Active / Current Menu Highlights (Header & Footer) Maintains hover color on menu items when viewing the related/active page ========================================================================== */ /* 1. Header Navigation - Main Menu & Sticky Header */ .main-navigation li.current-menu-item > menu-item, .main-navigation li.current-menu-item > menu-item > a, .main-navigation li.current_page_item > menu-item, .main-navigation li.current_page_item > menu-item > a, .main-navigation li.current-menu-ancestor > menu-item, .main-navigation li.current-menu-ancestor > menu-item > a, .main-navigation li.current_page_ancestor > menu-item, .main-navigation li.current_page_ancestor > menu-item > a, .main-navigation li.current-menu-parent > menu-item, .main-navigation li.current-menu-parent > menu-item > a { color: var(--menu-link-hover-color, var(--color-link-hover, #ff6b35)) !important; } /* Keep the desktop primary nav focused on destinations other than the current page. */ @media (min-width: 1025px) { .main-navigation #menu-mainmenu > li.menu-item-lvl0.current-menu-item, .main-navigation #menu-mainmenu > li.menu-item-lvl0.current_page_item { display: none !important; } } .main-navigation #menu-mainmenu > li > menu-item > a { color: #ffffff !important; transition: color 0.22s ease !important; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 18px !important; font-weight: 600 !important; text-decoration: none !important; } .main-navigation #menu-mainmenu > li > menu-item:hover > a, .main-navigation #menu-mainmenu > li > menu-item > a:hover { color: #ff6b35 !important; } /* Submenu active item */ .main-navigation .sub-menu li.current-menu-item > a, .main-navigation .sub-menu li.current_page_item > a, .main-navigation .sub-menu li.current-menu-ancestor > a { color: var(--menu-link-hover-color, var(--color-link-hover, #ff6b35)) !important; } /* ========================================================================== Header Stacking Context & Custom Spacing Desktop (1024px and up): 1. Spacing from top of page to main menu = 25px 2. Spacing between main menu and hero section = 50px Mobile & Tablet (< 1024px): 1. Spacing from top of page to main menu = 15px 2. Spacing between main menu and hero section = 15px ========================================================================== */ .site-header, #masthead { position: relative !important; z-index: 100000 !important; margin-top: 25px !important; margin-bottom: 50px !important; } @media (max-width: 1023px) { .site-header, #masthead { margin-top: 10px !important; margin-bottom: 10px !important; } body.home #content.site-content, body.elementor-page #content.site-content, body.page #content.site-content { padding-top: 0 !important; } } /* ========================================================================== Obsidian Glassmorphism Dropdown Sub-Menu (Desktop & Mobile) ========================================================================== */ .main-navigation .menu-item-has-children { position: relative !important; } /* Remove duplicated theme caret icon on desktop */ .main-navigation .menu-caret { display: none !important; } /* Single polished chevron caret for parent item */ .main-navigation .menu-item-has-children > menu-item > a::after, .main-navigation .menu-item-has-children > a::after { content: "" !important; display: inline-block !important; width: 6px !important; height: 6px !important; margin-left: 8px !important; border-right: 1.8px solid currentColor !important; border-bottom: 1.8px solid currentColor !important; transform: rotate(45deg) translateY(-2px) !important; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease !important; opacity: 0.75 !important; vertical-align: middle !important; } .main-navigation .menu-item-has-children.is-flyout-active > menu-item > a::after, .main-navigation .menu-item-has-children:hover > menu-item > a::after { transform: rotate(-135deg) translateY(-1px) !important; opacity: 1 !important; border-color: #28D3EE !important; } /* Submenu Dropdown Container */ .main-navigation .sub-menu { position: absolute !important; top: calc(100% + 12px) !important; left: 50% !important; transform: translateX(-50%) translateY(-6px) !important; width: 370px !important; min-width: 370px !important; padding: 10px !important; margin: 0 !important; background: rgba(9, 12, 21, 0.96) !important; backdrop-filter: blur(28px) saturate(190%) !important; -webkit-backdrop-filter: blur(28px) saturate(190%) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 20px !important; box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.85), 0 0 1px 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s !important; z-index: 100000 !important; list-style: none !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } /* Invisible bridge so mouse hover doesn't drop when moving from menu-item to sub-menu */ .main-navigation .sub-menu::before { content: "" !important; position: absolute !important; top: -14px !important; left: 0 !important; right: 0 !important; height: 14px !important; background: transparent !important; } /* Active / Hover Reveal */ .main-navigation .menu-item-has-children:hover > .sub-menu, .main-navigation .menu-item-has-children.is-flyout-active > .sub-menu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important; } /* Submenu List Items & Links */ .main-navigation .sub-menu li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; list-style-type: none !important; } .fifty-pillar-link { display: flex !important; align-items: center !important; gap: 14px !important; padding: 10px 14px !important; border-radius: 14px !important; text-decoration: none !important; background: transparent !important; border: 1px solid transparent !important; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important; box-sizing: border-box !important; } .main-navigation .sub-menu li a.fifty-pillar-link:hover, .main-navigation .sub-menu li a.fifty-pillar-link:focus { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.08) !important; transform: translateX(3px) !important; } /* SVG Pillar Icon Badge (Reflecting Page Title Icon) */ .fifty-pillar-indicator { width: 42px !important; height: 42px !important; min-width: 42px !important; border-radius: 13px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1.5px solid rgba(255, 255, 255, 0.14) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2) !important; } .fifty-pillar-indicator svg { width: 22px !important; height: 22px !important; display: block !important; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; } .fifty-pillar-indicator--bones-joints { background: radial-gradient(circle at 35% 35%, rgba(6, 182, 212, 0.35) 0%, rgba(5, 25, 35, 0.9) 100%) !important; border-color: rgba(6, 182, 212, 0.6) !important; } .fifty-pillar-indicator--blood-sugar { background: radial-gradient(circle at 35% 35%, rgba(255, 69, 58, 0.35) 0%, rgba(26, 5, 10, 0.9) 100%) !important; border-color: rgba(255, 69, 58, 0.6) !important; } .fifty-pillar-indicator--sleep-rest { background: radial-gradient(circle at 35% 35%, rgba(168, 85, 247, 0.35) 0%, rgba(20, 10, 35, 0.9) 100%) !important; border-color: rgba(168, 85, 247, 0.6) !important; } .fifty-pillar-indicator--cholesterol { background: radial-gradient(circle at 35% 35%, rgba(245, 158, 11, 0.35) 0%, rgba(35, 22, 5, 0.9) 100%) !important; border-color: rgba(245, 158, 11, 0.6) !important; } .fifty-pillar-indicator--by-your-side { background: radial-gradient(circle at 35% 35%, rgba(16, 185, 129, 0.35) 0%, rgba(5, 30, 20, 0.9) 100%) !important; border-color: rgba(16, 185, 129, 0.6) !important; } .fifty-pillar-link:hover .fifty-pillar-indicator { border-color: var(--pillar-color, #28D3EE) !important; transform: scale(1.08) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important; } .fifty-pillar-link:hover .fifty-pillar-indicator svg { transform: scale(1.12) !important; } /* Typography lockup */ .fifty-pillar-info { display: flex !important; flex-direction: column !important; gap: 3px !important; flex: 1 !important; min-width: 0 !important; text-align: left !important; } .fifty-pillar-title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; color: #ffffff !important; line-height: 1.25 !important; transition: color 0.2s ease !important; } .fifty-pillar-link:hover .fifty-pillar-title { color: var(--pillar-color, #28D3EE) !important; } .fifty-pillar-desc { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: #94a3b8 !important; line-height: 1.4 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Right micro arrow */ .fifty-pillar-arrow { color: #64748b !important; display: inline-flex !important; align-items: center !important; opacity: 0 !important; transform: translateX(-4px) !important; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important; flex-shrink: 0 !important; } .fifty-pillar-link:hover .fifty-pillar-arrow { opacity: 1 !important; color: var(--pillar-color, #28D3EE) !important; transform: translateX(0) !important; } /* ========================================================================== Mobile Drawer Navigation (.slide-menu) ========================================================================== */ #mobile-menu-drawer .drawer-body { position: relative !important; overflow-x: hidden !important; } #mobile-menu-drawer .slide-menu .menu-item-has-children { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; } #mobile-menu-drawer .slide-menu .menu-item-has-children > a { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; padding: 14px 0 !important; font-family: 'Outfit', -apple-system, sans-serif !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; color: #ffffff !important; } /* Distinct mobile chevron right indicator on the far right */ #mobile-menu-drawer .slide-menu .menu-item-has-children > a::after { content: "" !important; display: inline-block !important; width: 8px !important; height: 8px !important; border-right: 2px solid #28D3EE !important; border-bottom: 2px solid #28D3EE !important; transform: rotate(-45deg) !important; margin-right: 4px !important; flex-shrink: 0 !important; transition: transform 0.2s ease !important; } /* Submenu container in mobile drawer - solid dark obsidian background, positioned inside drawer-body */ #mobile-menu-drawer .slide-menu .sub-menu { position: absolute !important; top: 0 !important; left: -24px !important; right: -24px !important; width: calc(100% + 48px) !important; height: 100% !important; background: #080c14 !important; padding: 0 !important; z-index: 10 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* Back button panel bar */ #mobile-menu-drawer .slide-menu .sub-menu .menu-panel-bar { position: sticky !important; top: 0 !important; background: #0b0f19 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; padding: 14px 24px !important; z-index: 15 !important; display: flex !important; align-items: center !important; margin: 0 !important; } #mobile-menu-drawer .slide-menu .sub-menu .menu-back-button { color: #28D3EE !important; font-family: 'Outfit', -apple-system, sans-serif !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; display: inline-flex !important; align-items: center !important; gap: 12px !important; background: transparent !important; border: none !important; padding: 0 !important; cursor: pointer !important; transition: opacity 0.2s ease !important; } #mobile-menu-drawer .slide-menu .sub-menu .menu-back-button:hover, #mobile-menu-drawer .slide-menu .sub-menu .menu-back-button:active { opacity: 0.8 !important; } #mobile-menu-drawer .slide-menu .sub-menu .menu-back-button .menu-back-icon { width: 28px !important; height: 28px !important; min-width: 28px !important; border-radius: 8px !important; background: rgba(40, 211, 238, 0.12) !important; border: 1px solid rgba(40, 211, 238, 0.3) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #28D3EE !important; flex-shrink: 0 !important; } #mobile-menu-drawer .slide-menu .sub-menu .menu-back-button .menu-back-icon::after { content: "" !important; display: inline-block !important; width: 7px !important; height: 7px !important; border-left: 2px solid #28D3EE !important; border-bottom: 2px solid #28D3EE !important; transform: rotate(45deg) !important; margin-left: 3px !important; } #mobile-menu-drawer .slide-menu .sub-menu .menu-back-button .menu-back-icon svg { display: none !important; } /* Submenu items on mobile */ #mobile-menu-drawer .slide-menu .sub-menu li:not(.menu-panel-bar) { border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; padding: 6px 24px !important; display: flex !important; align-items: center !important; margin: 0 !important; } #mobile-menu-drawer .slide-menu .sub-menu li a.fifty-pillar-link { width: 100% !important; min-height: 64px !important; padding: 10px 0 !important; display: flex !important; align-items: center !important; gap: 14px !important; } #mobile-menu-drawer .slide-menu .sub-menu li a.fifty-pillar-link .fifty-pillar-indicator { width: 38px !important; height: 38px !important; min-width: 38px !important; border-radius: 11px !important; } #mobile-menu-drawer .slide-menu .sub-menu li a.fifty-pillar-link .fifty-pillar-dot { width: 9px !important; height: 9px !important; } #mobile-menu-drawer .slide-menu .sub-menu li a.fifty-pillar-link .fifty-pillar-title { font-size: 16px !important; letter-spacing: 0.02em !important; } #mobile-menu-drawer .slide-menu .sub-menu li a.fifty-pillar-link .fifty-pillar-desc { font-size: 14px !important; color: #94a3b8 !important; white-space: normal !important; line-height: 1.4 !important; } #mobile-menu-drawer .slide-menu .sub-menu li a.fifty-pillar-link .fifty-pillar-arrow { opacity: 0.7 !important; transform: none !important; color: #94a3b8 !important; } /* 2. Mobile Drawer Navigation (.slide-menu) */ .slide-menu li.current-menu-item > a, .slide-menu li.current_page_item > a, .slide-menu li.current-menu-ancestor > a, .slide-menu li.current-cat > a, .slide-menu li.current-cat-parent > a { color: var(--menu-link-hover-color, var(--color-link-hover, #ff6b35)) !important; } /* 3. Footer Navigation (Desktop & Mobile) */ .site-footer .footer-middle .footer-widgets-area a { transition: color 0.2s ease !important; } .site-footer .footer-middle .footer-widgets-area a:hover, .site-footer .footer-middle .footer-widgets-area a:active, .site-footer .footer-middle .footer-widgets-area li.current-menu-item a, .site-footer .footer-middle .footer-widgets-area li.current_page_item a, .site-footer .footer-middle .footer-widgets-area li.current-menu-ancestor a, .site-footer .footer-middle .footer-widgets-area li.current_page_ancestor a, .site-footer .footer-middle .col-slot-1 .footer-widgets-area li.current-menu-item a, .site-footer .footer-middle .col-slot-1 .footer-widgets-area li.current_page_item a { color: #28D3EE !important; } /* ==========================================================================  YOUTUBE OFFICIAL BRAND SIGNATURE CRAFT (Footer Integration) Impeccable Design: YouTube Red (#FF0000) & Pure White (#FFFFFF) Triangle ========================================================================== */ /* 1. Footer Area Container & Alignment */ .site-footer .footer-middle .footer-widgets-area--6 { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: unset !important; margin: 0 0 0 14px !important; padding: 0 !important; vertical-align: middle !important; } @media (max-width: 1023px) { .site-footer .footer-middle .footer-widgets-area--6 { margin: 2px 0 2px 0 !important; } } /* Ensure no trailing divider after YouTube */ .site-footer .footer-middle .footer-widgets-area--6::after { display: none !important; content: none !important; } .site-footer .footer-middle .footer-widgets-area--6 .wp-block-social-links { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; list-style: none !important; gap: 0 !important; } /* 2. YouTube Icon Circular Capsule (Apple Dark Glass Architecture) */ .site-footer .footer-middle .footer-widgets-area--6 .wp-social-link-youtube, .site-footer .footer-middle .footer-widgets-area .wp-social-link-youtube { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; max-width: 34px !important; max-height: 34px !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; border-radius: 50% !important; border: 0 !important; background: rgba(255, 255, 255, 0.04) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; box-shadow: none !important; position: relative !important; overflow: hidden !important; transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; cursor: pointer !important; } /* 3. Link Anchor - Full Target Area */ .site-footer .footer-middle .footer-widgets-area--6 .wp-social-link-youtube a.wp-block-social-link-anchor, .site-footer .footer-middle .footer-widgets-area .wp-social-link-youtube a.wp-block-social-link-anchor { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; border: none !important; background: transparent !important; color: #FF0000 !important; position: relative !important; text-decoration: none !important; text-shadow: none !important; line-height: 1 !important; outline: none !important; transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* 4. Pure White (#FFFFFF) Play Triangle Behind the SVG Cutout */ .site-footer .footer-middle .footer-widgets-area--6 .wp-social-link-youtube a.wp-block-social-link-anchor::before, .site-footer .footer-middle .footer-widgets-area .wp-social-link-youtube a.wp-block-social-link-anchor::before { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 6px !important; height: 6px !important; background-color: #FFFFFF !important; border-radius: 1px !important; z-index: 1 !important; pointer-events: none !important; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.28s ease !important; } /* 5. SVG Play Button Badge - Official Brand Red (#FF0000) */ .site-footer .footer-middle .footer-widgets-area--6 .wp-social-link-youtube svg, .site-footer .footer-middle .footer-widgets-area .wp-social-link-youtube svg { position: relative !important; z-index: 2 !important; width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; display: block !important; color: #FF0000 !important; fill: #FF0000 !important; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), filter 0.28s ease !important; } .site-footer .footer-middle .footer-widgets-area--6 .wp-social-link-youtube svg path, .site-footer .footer-middle .footer-widgets-area .wp-social-link-youtube svg path { fill: #FF0000 !important; } /* 6. MOUSE OVER (HOVER) & FOCUS STATES: Luminous YouTube Red Bloom, Ambient Aura, Tactile Lift */ .site-footer .footer-middle .footer-widgets-area--6 .wp-social-link-youtube:hover, .site-footer .footer-middle .footer-widgets-area--6 .wp-social-link-youtube:focus-within, .site-footer .footer-middle .footer-widgets-area .wp-social-link-youtube:hover, .site-footer .footer-middle .footer-widgets-area .wp-social-link-youtube:focus-within { background: rgba(255, 0, 0, 0.12) !important; border: 0 !important; transform: translateY(-1.5px) scale(1.08) !important; box-shadow: none !important; } .site-footer .footer-middle .footer-widgets-area--6 .wp-social-link-youtube:hover a.wp-block-social-link-anchor, .site-footer .footer-middle .footer-widgets-area--6 .wp-social-link-youtube a.wp-block-social-link-anchor:hover, .site-footer .footer-middle .footer-widgets-area .wp-social-link-youtube:hover a.wp-block-social-link-anchor, .site-footer .footer-middle .footer-widgets-area .wp-social-link-youtube a.wp-block-social-link-anchor:hover { color: #FF0000 !important; text-shadow: none !important; } .site-footer .footer-middle .footer-widgets-area--6 .wp-social-link-youtube:hover svg, .site-footer .footer-middle .footer-widgets-area .wp-social-link-youtube:hover svg { color: #FF0000 !important; fill: #FF0000 !important; filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.65)) !important; transform: scale(1.05) !important; } .site-footer .footer-middle .footer-widgets-area--6 .wp-social-link-youtube:hover a.wp-block-social-link-anchor::before, .site-footer .footer-middle .footer-widgets-area .wp-social-link-youtube:hover a.wp-block-social-link-anchor::before { background-color: #FFFFFF !important; transform: translate(-50%, -50%) scale(1.05) !important; } /* 7. Active / Press State */ .site-footer .footer-middle .footer-widgets-area--6 .wp-social-link-youtube:active, .site-footer .footer-middle .footer-widgets-area .wp-social-link-youtube:active { transform: translateY(0) scale(0.96) !important; box-shadow: none !important; } /* ========================================================================== THAILAND INSIGHTS: Apple Glass Insight Theatre (Smash Balloon YouTube Pro) 100% Update-Proof Child Theme Architecture ========================================================================== */ /* Section Spacing, Layout Alignment & Full-Width Container Architecture */ .elementor-element-9ed6dc4 { position: relative !important; content-visibility: visible !important; } .elementor-element-9ed6dc4 .elementor-widget-shortcode, .elementor-element-9ed6dc4 .elementor-shortcode, .elementor-element-9ed6dc4 .sb_youtube { margin: 0 auto !important; max-width: 1240px !important; width: 100% !important; } .elementor-element-9ed6dc4 .sb_youtube { padding: 0 10px !important; } /* Grid Architecture: Perfectly Balanced 3-Column Display */ .elementor-element-9ed6dc4 .sb_youtube .sby_items_wrap { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 28px !important; padding: 12px 0 20px 0 !important; float: none !important; width: 100% !important; } .elementor-element-9ed6dc4 .sb_youtube .sby_items_wrap::after { display: none !important; } /* Individual Card Item - Scoped Layout Containment */ .elementor-element-9ed6dc4 .sb_youtube .sby_item, .sb_youtube .sby_item { width: 100% !important; float: none !important; display: flex !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; } /* 1. Apple Ceramic Card Container (Unified Interactive Surface) */ .elementor-element-9ed6dc4 .sb_youtube .sby_item, .elementor-element-9ed6dc4 .sb_youtube .sby_item .sby_inner_item, .elementor-element-9ed6dc4 .sb_youtube .sby_info, .elementor-element-9ed6dc4 .sb_youtube .sby_video_title_wrap, .elementor-element-9ed6dc4 .sb_youtube .sby_video_title, .elementor-element-9ed6dc4 .sb_youtube .sby_meta { cursor: pointer !important; user-select: none !important; -webkit-tap-highlight-color: transparent !important; } .elementor-element-9ed6dc4 .sb_youtube .sby_item .sby_inner_item, .sb_youtube .sby_item .sby_inner_item { display: flex !important; flex-direction: column !important; width: 100% !important; background: #0b111e !important; border-radius: 20px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3) !important; overflow: hidden !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease !important; position: relative !important; box-sizing: border-box !important; contain: paint !important; /* Keeps card repaints strictly isolated inside its boundary */ will-change: transform !important; /* Dedicates GPU compositor layer for zero-jank hover */ } /* Card Hover Elevation & Cyan Specular Aura */ .elementor-element-9ed6dc4 .sb_youtube .sby_item:hover .sby_inner_item { transform: translateY(-6px) translateZ(0) !important; box-shadow: 0 18px 36px -4px rgba(0, 37, 46, 0.12), 0 0 0 1px rgba(0, 242, 254, 0.3) !important; border-color: rgba(0, 242, 254, 0.35) !important; } /* 2. Cinematic Thumbnail Viewport (Uncropped 16:9 Banner Fix) */ .elementor-element-9ed6dc4 .sb_youtube .sby_video_thumbnail_wrap { position: relative !important; width: 100% !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; background: #00171d !important; border-radius: 19px 19px 0 0 !important; float: none !important; contain: strict !important; } .elementor-element-9ed6dc4 .sb_youtube .sby_video_thumbnail { display: block !important; width: 100% !important; height: 100% !important; aspect-ratio: 16 / 9 !important; background-size: cover !important; background-position: center top !important; /* Preserves top banner headline without clipping */ background-repeat: no-repeat !important; position: relative !important; overflow: hidden !important; } .elementor-element-9ed6dc4 .sb_youtube .sby_video_thumbnail img { width: 100% !important; height: 100% !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; object-position: center top !important; /* Guaranteed top banner text visibility */ transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important; display: block !important; } .elementor-element-9ed6dc4 .sb_youtube .sby_item:hover .sby_video_thumbnail img { transform: scale(1.04) !important; } /* Video Duration Badge: Ultra-Fast High-Contrast Obsidian Pill (Zero GPU Blur Penalty) */ .elementor-element-9ed6dc4 .sb_youtube .sby_video_thumbnail .sby_duration_counter { position: absolute !important; bottom: 12px !important; right: 12px !important; background: rgba(0, 16, 22, 0.92) !important; /* Solid high-contrast dark obsidian */ color: #ffffff !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.5px !important; padding: 3px 9px !important; border-radius: 9999px !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important; z-index: 6 !important; } /* Clean Play Hover Overlay (Zero GPU Blur Overhead) */ .elementor-element-9ed6dc4 .sb_youtube .sby_thumbnail_hover { background: rgba(0, 37, 46, 0.45) !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: opacity 0.3s ease !important; opacity: 0 !important; pointer-events: none !important; } .elementor-element-9ed6dc4 .sb_youtube .sby_item:hover .sby_thumbnail_hover { opacity: 1 !important; } .elementor-element-9ed6dc4 .sb_youtube .sby_thumbnail_hover_inner { display: flex !important; align-items: center !important; justify-content: center !important; } /* Suppress heavy invisible DOM content inside hover overlay to eliminate layout parsing */ .elementor-element-9ed6dc4 .sb_youtube .sby_thumbnail_hover .sby_caption, .elementor-element-9ed6dc4 .sb_youtube .sby_thumbnail_hover .sby_stats { display: none !important; } /* 3. Typography & Information Architecture */ .elementor-element-9ed6dc4 .sb_youtube .sby_info, .sb_youtube .sby_info { display: flex !important; flex-direction: column !important; flex-grow: 1 !important; padding: 22px 24px 24px !important; background: #0b111e !important; box-sizing: border-box !important; } .elementor-element-9ed6dc4 .sb_youtube .sby-video-info-bottom { display: flex !important; flex-direction: column !important; flex-grow: 1 !important; justify-content: flex-start !important; } .elementor-element-9ed6dc4 .sb_youtube .sby-video-info { display: flex !important; flex-direction: column !important; text-align: left !important; } /* Date Tag: Refined Uppercase Micro-Label */ .elementor-element-9ed6dc4 .sb_youtube .sby_meta { order: -1 !important; margin: 0 0 8px 0 !important; display: flex !important; align-items: center !important; } .elementor-element-9ed6dc4 .sb_youtube .sby_meta .sby_date, .elementor-element-9ed6dc4 .sb_youtube .sby_meta .sby_view_count { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.3px !important; color: #94a3b8 !important; } /* Video Title: High Contrast White, Clamped to 2 Balanced Lines */ .elementor-element-9ed6dc4 .sb_youtube .sby_video_title_wrap { margin: 0 0 10px 0 !important; } .elementor-element-9ed6dc4 .sb_youtube .sby_video_title { font-family: "Outfit", -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif !important; font-size: 1.25rem !important; font-weight: 700 !important; line-height: 1.4 !important; color: #ffffff !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; overflow: hidden !important; text-overflow: ellipsis !important; min-height: calc(1.25rem * 1.4 * 2) !important; /* Harmonizes height across cards */ transition: color 0.25s ease !important; } .elementor-element-9ed6dc4 .sb_youtube .sby_item:hover .sby_video_title { color: #28D3EE !important; } /* Excerpt / Caption: Crisp Muted Slate, Clamped to 2 Lines */ .elementor-element-9ed6dc4 .sb_youtube .sby_caption_wrap { margin: 0 !important; } .elementor-element-9ed6dc4 .sb_youtube .sby_caption { font-family: -apple-system, BlinkMacSystemFont, "Nunito Sans", sans-serif !important; font-size: 14px !important; line-height: 1.55 !important; color: #cbd5e1 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; overflow: hidden !important; text-overflow: ellipsis !important; min-height: calc(14px * 1.55 * 2) !important; /* Uniform height alignment */ } /* Suppress clumsy inline '...' text expander */ .elementor-element-9ed6dc4 .sb_youtube .sby_caption_wrap .sby_expand { display: none !important; } /* ========================================================================== TWIN ACTION BUTTONS: LOAD MORE... & SUBSCRIBE ON YOUTUBE Apple Obsidian Stealth Pill Design System ========================================================================== */ /* Buttons Container */ .elementor-element-9ed6dc4 .sb_youtube .sby_footer { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 16px !important; margin: 44px auto 10px !important; padding: 0 !important; clear: both !important; width: 100% !important; } /* Common Pill Architecture for Both Buttons */ .elementor-element-9ed6dc4 .sb_youtube .sby_footer .sby_load_btn, .elementor-element-9ed6dc4 .sb_youtube .sby_footer .sby_follow_btn a { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: auto !important; min-width: 250px !important; max-width: fit-content !important; height: 54px !important; margin: 0 !important; padding: 0 38px !important; border-radius: 9999px !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Nunito Sans", sans-serif !important; font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; background: linear-gradient(135deg, #00252e 0%, #0a3a46 100%) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; box-shadow: 0 10px 25px -5px rgba(0, 37, 46, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; cursor: pointer !important; text-decoration: none !important; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; position: relative !important; outline: none !important; user-select: none !important; -webkit-tap-highlight-color: transparent !important; box-sizing: border-box !important; } /* 1. Primary Action: "LOAD MORE..." Pill */ .elementor-element-9ed6dc4 .sb_youtube .sby_footer .sby_load_btn::after { content: "\2193" !important; /* Downward discovery arrow */ display: inline-block !important; font-size: 16px !important; line-height: 1 !important; color: rgba(255, 255, 255, 0.85) !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease !important; } .sby_load_btn:hover, .elementor-element-9ed6dc4 .sb_youtube .sby_footer .sby_load_btn:hover { background: linear-gradient(135deg, #00252e 0%, #0a3a46 100%) !important; /* Preserves solid dark obsidian background */ border-color: rgba(255, 255, 255, 0.25) !important; /* Neutral subtle border, NO orange border */ box-shadow: 0 12px 28px -4px rgba(0, 37, 46, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; /* Neutral shadow, NO colored glow */ transform: translateY(-2px) scale(1.015) !important; color: #ff6b35 !important; /* ExpatSafe Signature Orange Text */ } .sby_load_btn:hover .sby_btn_text, .elementor-element-9ed6dc4 .sb_youtube .sby_footer .sby_load_btn:hover .sby_btn_text { color: #ff6b35 !important; /* ExpatSafe Signature Orange Text */ } .sby_load_btn:hover::after, .elementor-element-9ed6dc4 .sb_youtube .sby_footer .sby_load_btn:hover::after { transform: translateY(3px) !important; color: #ff6b35 !important; /* ExpatSafe Signature Orange Arrow */ } /* Explicit Revert State on Mouse Leave / Focus Released */ .sby_load_btn:not(:hover), .elementor-element-9ed6dc4 .sb_youtube .sby_footer .sby_load_btn:not(:hover) { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.16) !important; box-shadow: 0 10px 25px -5px rgba(0, 37, 46, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } .sby_load_btn:not(:hover) .sby_btn_text, .elementor-element-9ed6dc4 .sb_youtube .sby_footer .sby_load_btn:not(:hover) .sby_btn_text { color: #ffffff !important; } .sby_load_btn:not(:hover)::after, .elementor-element-9ed6dc4 .sb_youtube .sby_footer .sby_load_btn:not(:hover)::after { color: rgba(255, 255, 255, 0.85) !important; transform: translateY(0) !important; } /* 2. Companion Action: "SUBSCRIBE" Pill with Stable Background */ .elementor-element-9ed6dc4 .sb_youtube .sby_footer .sby_follow_btn { display: inline-block !important; margin: 0 !important; } .elementor-element-9ed6dc4 .sb_youtube .sby_footer .sby_follow_btn a svg { color: #ff0000 !important; font-size: 19px !important; margin-right: 4px !important; filter: drop-shadow(0 2px 5px rgba(255, 0, 0, 0.4)) !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease !important; } .sby_follow_btn a:hover, .elementor-element-9ed6dc4 .sb_youtube .sby_footer .sby_follow_btn a:hover { background: linear-gradient(135deg, #00252e 0%, #0a3a46 100%) !important; /* Stable background - NO color change */ border-color: rgba(255, 255, 255, 0.25) !important; box-shadow: 0 12px 28px -4px rgba(0, 37, 46, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; transform: translateY(-2px) scale(1.015) !important; color: #ff6b35 !important; } .sby_follow_btn a:hover svg, .elementor-element-9ed6dc4 .sb_youtube .sby_footer .sby_follow_btn a:hover svg { transform: scale(1.15) !important; } .sby_follow_btn a:not(:hover), .elementor-element-9ed6dc4 .sb_youtube .sby_footer .sby_follow_btn a:not(:hover) { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.16) !important; box-shadow: 0 10px 25px -5px rgba(0, 37, 46, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } /* 3. Swiper Carousel Navigation Arrows (Explore with Me & Willie Recommends) */ .swiper-button-prev.button-white, .swiper-button-next.button-white { background-color: #ffffff !important; color: #00252e !important; border: 1px solid rgba(0, 37, 46, 0.15) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; transition: color 0.25s ease, transform 0.25s ease, border-color 0.25s ease !important; } .swiper-button-prev.button-white:hover, .swiper-button-next.button-white:hover { background-color: #ffffff !important; /* Preserves solid white background - NO black flash */ border-color: rgba(0, 37, 46, 0.25) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important; color: #ff6b35 !important; /* Signature Orange Arrow */ transform: scale(1.08) !important; } .swiper-button-prev.button-white:hover svg, .swiper-button-next.button-white:hover svg { fill: #ff6b35 !important; color: #ff6b35 !important; stroke: #ff6b35 !important; } .swiper-button-prev.button-white:not(:hover), .swiper-button-next.button-white:not(:hover) { background-color: #ffffff !important; color: #00252e !important; } .swiper-button-prev.button-white:not(:hover) svg, .swiper-button-next.button-white:not(:hover) svg { fill: #00252e !important; color: #00252e !important; stroke: #00252e !important; } /* Tactile Active States */ .elementor-element-9ed6dc4 .sb_youtube .sby_footer .sby_load_btn:active, .elementor-element-9ed6dc4 .sb_youtube .sby_footer .sby_follow_btn a:active { transform: translateY(0) scale(0.98) !important; box-shadow: 0 4px 12px -2px rgba(0, 37, 46, 0.4) !important; } /* ========================================================================== MOBILE VIDEO POPUP (LIGHTBOX) OVERHAUL Eliminate Excess Margins & Paddings on Handheld Devices ========================================================================== */ /* Global Modal Polish & Apple Frosted Glass */ #sby_lightboxOverlay { backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; background-color: rgba(0, 0, 0, 0.88) !important; cursor: pointer !important; z-index: 99999998 !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; } #sby_lightbox { z-index: 2147483646 !important; } /* Eliminate header completely when video lightbox is active so buttons are never blocked */ body.sby-lightbox-active .site-header, body.sby-lightbox-active #masthead, body.sby-lightbox-active .header-mobile, body.sby-lightbox-active #header-mobile, html.sby-lightbox-active .site-header, html.sby-lightbox-active #masthead, html.sby-lightbox-active .header-mobile, html.sby-lightbox-active #header-mobile, body:has(#sby_lightbox:not([style*="display: none"])) .site-header, body:has(#sby_lightbox:not([style*="display: none"])) #masthead, body:has(#sby_lightbox:not([style*="display: none"])) .header-mobile, body:has(#sby_lightbox:not([style*="display: none"])) #header-mobile { display: none !important; visibility: hidden !important; pointer-events: none !important; opacity: 0 !important; z-index: -99999 !important; } #sby_lightbox .sby_lb-outerContainer { background-color: #000000 !important; border-radius: 18px 18px 0 0 !important; position: relative !important; overflow: visible !important; box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.7) !important; } #sby_lightbox .sby_lb-container { border-radius: 18px 18px 0 0 !important; overflow: hidden !important; } #sby_lightbox .sby_lb-dataContainer { background-color: #ffffff !important; border-radius: 0 0 18px 18px !important; box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.5) !important; } /*  Apple Obsidian Glass Floating Close Button (Desktop & Mobile) */ #sby_lightbox .sby_lb-close { position: absolute !important; top: 14px !important; right: 14px !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; background: rgba(15, 23, 42, 0.88) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1.5px solid rgba(255, 255, 255, 0.5) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.3) !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; z-index: 999999 !important; padding: 0 !important; margin: 0 !important; outline: none !important; opacity: 1 !important; text-indent: 0 !important; text-align: center !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* Crisp Vector Glyph "✕" */ #sby_lightbox .sby_lb-close::before { content: "✕" !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; font-size: 19px !important; font-weight: 700 !important; line-height: 1 !important; color: #ffffff !important; display: block !important; text-align: center !important; transition: transform 0.25s ease !important; } /* Apple Close Hover & Active State */ #sby_lightbox .sby_lb-close:hover { background: rgba(220, 38, 38, 0.92) !important; border-color: rgba(255, 255, 255, 0.85) !important; transform: scale(1.08) !important; box-shadow: 0 6px 24px rgba(220, 38, 38, 0.5) !important; opacity: 1 !important; } #sby_lightbox .sby_lb-close:hover::before { transform: rotate(90deg) !important; } #sby_lightbox .sby_lb-close:active { transform: scale(0.95) !important; } /*  Apple Obsidian Glass Floating Fullscreen / Expand Button */ #sby_lightbox .sby_lb-fullscreen { position: absolute !important; top: 14px !important; right: 66px !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; background: rgba(15, 23, 42, 0.88) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1.5px solid rgba(255, 255, 255, 0.5) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.3) !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; z-index: 999999 !important; padding: 0 !important; margin: 0 !important; outline: none !important; opacity: 1 !important; color: #ffffff !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; } #sby_lightbox .sby_lb-fullscreen svg { width: 19px !important; height: 19px !important; stroke: #ffffff !important; display: block !important; transition: transform 0.25s ease !important; } /* Apple Fullscreen Hover & Active State */ #sby_lightbox .sby_lb-fullscreen:hover { background: rgba(0, 104, 160, 0.92) !important; border-color: rgba(255, 255, 255, 0.85) !important; transform: scale(1.08) !important; box-shadow: 0 6px 24px rgba(0, 104, 160, 0.5) !important; opacity: 1 !important; } #sby_lightbox .sby_lb-fullscreen:hover svg { transform: scale(1.15) !important; } #sby_lightbox .sby_lb-fullscreen:active { transform: scale(0.95) !important; } /* ==========================================================================  APPLE DUAL-ENGINE THEATER MODE & UNIVERSAL FULLSCREEN Works seamlessly across iOS Safari, Android Chrome, Mac & Windows ========================================================================== */ html.sby-fs-locked, body.sby-fs-locked { overflow: hidden !important; } /* Universal Theater Mode & True Edge-to-Edge Fullscreen (Activated via .sby-is-fullscreen) */ #sby_lightbox.sby-is-fullscreen:not([style*="display: none"]) { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: 100vw !important; max-height: 100vh !important; max-height: 100dvh !important; z-index: 99999999 !important; background: #000000 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } #sby_lightbox[style*="display: none"] { display: none !important; } #sby_lightbox.sby-is-fullscreen .sby_lb-header, #sby_lightbox.sby-is-fullscreen .sby_lb-dataContainer, #sby_lightbox.sby-is-fullscreen .sby_lb-nav { display: none !important; } /* Edge-to-Edge Containers in Fullscreen */ #sby_lightbox.sby-is-fullscreen .sby_lb-outerContainer, #sby_lightbox .sby_lb-outerContainer:fullscreen, #sby_lightbox .sby_lb-outerContainer:-webkit-full-screen { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: 100vw !important; max-height: 100vh !important; max-height: 100dvh !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; background: #000000 !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 99999999 !important; overflow: hidden !important; } #sby_lightbox.sby-is-fullscreen .sby_lb-container, #sby_lightbox .sby_lb-outerContainer:fullscreen .sby_lb-container, #sby_lightbox .sby_lb-outerContainer:-webkit-full-screen .sby_lb-container { position: relative !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: 100vw !important; max-height: 100vh !important; max-height: 100dvh !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; overflow: hidden !important; } #sby_lightbox.sby-is-fullscreen .sby_lb_video_thumbnail_wrap, #sby_lightbox.sby-is-fullscreen .sby_lb_video_thumbnail { width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: 100vw !important; max-height: 100vh !important; max-height: 100dvh !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; margin: 0 !important; padding: 0 !important; } /* Fullscreen Video Player & iFrame (Fills full viewport on mobile for Shorts & Landscape) */ #sby_lightbox.sby-is-fullscreen .sby_lb-player, #sby_lightbox.sby-is-fullscreen .sby_lb-player iframe, #sby_lightbox .sby_lb-outerContainer:fullscreen .sby_lb-player, #sby_lightbox .sby_lb-outerContainer:-webkit-full-screen .sby_lb-player, #sby_lightbox .sby_lb-outerContainer:fullscreen iframe, #sby_lightbox .sby_lb-outerContainer:-webkit-full-screen iframe { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: 100vw !important; max-height: 100vh !important; max-height: 100dvh !important; min-width: 100vw !important; min-height: 100vh !important; min-height: 100dvh !important; aspect-ratio: auto !important; margin: 0 !important; padding: 0 !important; border: none !important; display: block !important; object-fit: contain !important; } /* Floating Obsidian Glass Controls in Fullscreen Mode */ #sby_lightbox.sby-is-fullscreen .sby_lb-close, #sby_lightbox .sby_lb-outerContainer:fullscreen .sby_lb-close, #sby_lightbox .sby_lb-outerContainer:-webkit-full-screen .sby_lb-close { position: fixed !important; top: max(16px, env(safe-area-inset-top, 16px)) !important; right: max(16px, env(safe-area-inset-right, 16px)) !important; z-index: 100000000 !important; width: 44px !important; height: 44px !important; background: rgba(0, 20, 26, 0.75) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important; opacity: 1 !important; } #sby_lightbox.sby-is-fullscreen .sby_lb-fullscreen, #sby_lightbox .sby_lb-outerContainer:fullscreen .sby_lb-fullscreen, #sby_lightbox .sby_lb-outerContainer:-webkit-full-screen .sby_lb-fullscreen { position: fixed !important; top: max(16px, env(safe-area-inset-top, 16px)) !important; right: calc(max(16px, env(safe-area-inset-right, 16px)) + 54px) !important; z-index: 100000000 !important; width: 44px !important; height: 44px !important; background: rgba(0, 20, 26, 0.75) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(0, 242, 254, 0.35) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important; opacity: 1 !important; } /* Mobile Viewport Optimization (< 768px) */ @media (max-width: 767px) { /* 1. Expand Lightbox to Full Screen Comfort */ #sby_lightbox { padding: 0 !important; } #sby_lightbox .sby_lb-header { padding-top: max(20px, env(safe-area-inset-top, 20px)) !important; } #sby_lightbox:not(.sby-is-fullscreen) .sby_lb-outerContainer, #sby_lightbox:not(.sby-is-fullscreen) .sby_lb-dataContainer { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; min-width: 0 !important; margin: 0 auto !important; } #sby_lightbox:not(.sby-is-fullscreen) .sby_lb-outerContainer { border-radius: 14px 14px 0 0 !important; height: auto !important; } #sby_lightbox:not(.sby-is-fullscreen) .sby_lb-dataContainer { border-radius: 0 0 14px 14px !important; } /* 2. Full Width Responsive Video Embed in Normal Modal */ #sby_lightbox:not(.sby-is-fullscreen) .sby_lb-container { padding: 0 !important; width: 100% !important; height: auto !important; border-radius: 14px 14px 0 0 !important; overflow: hidden !important; } #sby_lightbox:not(.sby-is-fullscreen) .sby_lb-player, #sby_lightbox:not(.sby-is-fullscreen) .sby_lb-player iframe { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; display: block !important; position: relative !important; } /* 3. Hide Clunky Desktop Arrow Buttons */ #sby_lightbox .sby_lb-nav { display: none !important; } /* 4. Apple Touch Target Close and Fullscreen Buttons (44px HIG Standard) */ #sby_lightbox .sby_lb-close { position: fixed !important; top: max(16px, env(safe-area-inset-top, 16px)) !important; right: 16px !important; width: 44px !important; height: 44px !important; opacity: 1 !important; touch-action: manipulation !important; pointer-events: auto !important; z-index: 2147483647 !important; } #sby_lightbox .sby_lb-close::before { font-size: 18px !important; } #sby_lightbox .sby_lb-fullscreen { position: fixed !important; top: max(16px, env(safe-area-inset-top, 16px)) !important; right: 68px !important; width: 44px !important; height: 44px !important; opacity: 1 !important; touch-action: manipulation !important; pointer-events: auto !important; z-index: 2147483647 !important; } #sby_lightbox .sby_lb-fullscreen svg { width: 18px !important; height: 18px !important; } /* 5. Compact Description & Information */ .sby_lb-dataContainer .sby_lb-caption { padding: 14px 16px 16px !important; } .sby_lb-dataContainer .sby_lb-video-heading { margin-bottom: 12px !important; padding-bottom: 10px !important; } .sby_lb-dataContainer .sby_lb-video-heading h3 { font-size: 16px !important; line-height: 1.4 !important; } /* 6. Apple Edge-to-Edge Canvas: Eliminate Lateral Dead Space & Maximize Card Width */ .elementor-element-9ed6dc4, .elementor-element-9ed6dc4 .e-con-inner { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; width: 100% !important; } /* Maintain Brand Header Alignment */ .elementor-element-9ed6dc4 .elementor-element-1fed37a { padding-left: 12px !important; padding-right: 12px !important; } .elementor-element-9ed6dc4 .sb_youtube { padding: 0 6px !important; /* Apple 6px Micro-Gutter to prevent screen edge collision */ width: 100% !important; box-sizing: border-box !important; } .elementor-element-9ed6dc4 .sb_youtube .sby_items_wrap, .elementor-element-9ed6dc4 .sb_youtube.sby_mob_col_2 .sby_items_wrap { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px 6px !important; /* Precision 6px horizontal gap between cards */ padding: 4px 0 16px !important; } .elementor-element-9ed6dc4 .sb_youtube.sby_mob_col_1 .sby_items_wrap { grid-template-columns: 1fr !important; gap: 16px !important; } /* Card Geometry: Apple Continuous Squircle (12px) & Minimal Borders */ .elementor-element-9ed6dc4 .sb_youtube .sby_item { margin: 0 !important; padding: 0 !important; } .elementor-element-9ed6dc4 .sb_youtube .sby_item .sby_inner_item { border-radius: 12px !important; border: 1px solid rgba(0, 37, 46, 0.07) !important; box-shadow: 0 2px 10px rgba(0, 20, 30, 0.04) !important; } /* Thumbnail Wrap & Aspect Ratio */ .elementor-element-9ed6dc4 .sb_youtube .sby_video_thumbnail_wrap { border-radius: 11px 11px 0 0 !important; aspect-ratio: 16 / 9 !important; } /* Micro Duration Badge: High-Contrast Compact Pill */ .elementor-element-9ed6dc4 .sb_youtube .sby_video_thumbnail .sby_duration_counter { bottom: 6px !important; right: 6px !important; font-size: 10px !important; font-weight: 700 !important; padding: 2px 6px !important; border-radius: 4px !important; letter-spacing: 0.3px !important; } /* Card Info Body: Precision Calibrated Padding for 14px Typography */ .elementor-element-9ed6dc4 .sb_youtube .sby_info { padding: 8px 6px 10px !important; /* Expanded reading width for title */ } /* Date Micro-Label: Scaled to Harmonize with 14px Title */ .elementor-element-9ed6dc4 .sb_youtube .sby_meta { margin: 0 0 3px 0 !important; } .elementor-element-9ed6dc4 .sb_youtube .sby_meta .sby_date { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.4px !important; color: #0087a5 !important; /* Crisp cyan accent */ } /* Video Title: Scaled to 14px (Dynamic Up to 4 Lines, Fully Readable) */ .elementor-element-9ed6dc4 .sb_youtube .sby_video_title_wrap { margin: 0 !important; } .elementor-element-9ed6dc4 .sb_youtube .sby_video_title { font-size: 14px !important; line-height: 1.35 !important; font-weight: 600 !important; min-height: calc(14px * 1.35 * 2) !important; /* ~38px baseline for 2 lines */ max-height: calc(14px * 1.35 * 4) !important; /* ~76px max ceiling for 4 lines */ margin: 0 !important; -webkit-line-clamp: 4 !important; line-clamp: 4 !important; word-break: break-word !important; overflow-wrap: break-word !important; } /* Clean Excerpt Elimination in 2-Column Mode (Eliminates Visual Clutter) */ .elementor-element-9ed6dc4 .sb_youtube .sby_caption_wrap { display: none !important; } /* 7. Ergonomic Mobile Buttons (Full Thumb Target) */ .elementor-element-9ed6dc4 .sb_youtube .sby_footer { flex-direction: column !important; gap: 12px !important; margin-top: 24px !important; padding: 0 10px !important; } .elementor-element-9ed6dc4 .sb_youtube .sby_footer .sby_load_btn, .elementor-element-9ed6dc4 .sb_youtube .sby_footer .sby_follow_btn, .elementor-element-9ed6dc4 .sb_youtube .sby_footer .sby_follow_btn a { width: 100% !important; max-width: 320px !important; min-width: 0 !important; height: 48px !important; padding: 0 20px !important; font-size: 13px !important; letter-spacing: 0.8px !important; } } /* Tablet Layout (768px - 1024px) */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-element-9ed6dc4 .sb_youtube .sby_items_wrap { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; } .elementor-element-9ed6dc4 .sb_youtube .sby_footer .sby_load_btn, .elementor-element-9ed6dc4 .sb_youtube .sby_footer .sby_follow_btn a { height: 52px !important; min-width: 230px !important; padding: 0 30px !important; font-size: 14px !important; } } /* ========================================================================== Privacy Policy & Terms & Conditions Pages Styling (Dark Glassmorphism) 100% Update-Proof Child Theme Integration for ExpatSafe Minimal & Comfortable Margins & Paddings (Desktop & Mobile) ========================================================================== */ /* Page Level Layout & Clean Canvas */ .page-id-719 .static-page-header, .page-id-721 .static-page-header, .page-id-92 .static-page-header { display: none !important; } .page-id-719 #content.site-content, .page-id-719 .site-content-container, .page-id-719 #primary.content-area, .page-id-719 #main.site-main, .page-id-719 .entry-content, .page-id-719 .elementor-719, .page-id-719 .elementor-719 .e-con, .page-id-719 .elementor-719 .e-con-inner, .page-id-719 .elementor-719 .elementor-widget-html, .page-id-719 .elementor-719 .elementor-widget-container, .page-id-721 #content.site-content, .page-id-721 .site-content-container, .page-id-721 #primary.content-area, .page-id-721 #main.site-main, .page-id-721 .entry-content, .page-id-721 .elementor-721, .page-id-721 .elementor-721 .e-con, .page-id-721 .elementor-721 .e-con-inner, .page-id-721 .elementor-721 .elementor-widget-html, .page-id-721 .elementor-721 .elementor-widget-container, .page-id-92 #content.site-content, .page-id-92 .site-content-container, .page-id-92 #primary.content-area, .page-id-92 #main.site-main, .page-id-92 .entry-content, .page-id-92 .elementor-92, .page-id-92 .elementor-92 .e-con, .page-id-92 .elementor-92 .e-con-inner, .page-id-92 .elementor-92 .elementor-widget-html, .page-id-92 .elementor-92 .elementor-widget-container { background-color: #030406 !important; padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; } /* Elite Policy Container */ .expatsafe-policy-elite { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 18px; line-height: 1.68; box-sizing: border-box; margin: 0; padding: 0; background-color: #030406; color: #cbd5e1; -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; position: relative; } .expatsafe-policy-elite * { box-sizing: inherit; } :root { --es-cyan: #28D3EE; --es-white: #ffffff; --es-gray-light: #f1f5f9; --es-gray-muted: #94a3b8; --es-surface: #0f1523; --es-border: rgba(255, 255, 255, 0.08); } @keyframes esFadeUp { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: translateY(0px); } } /* Compact, Comfortable Container Spacing for Policy Pages */ .expatsafe-policy-elite .es-container { max-width: 920px; width: 100%; margin: 0 auto; padding: 2.25rem 1.25rem 2.5rem; } /* Header: Streamlined Minimal Margin for Policy Pages */ .expatsafe-policy-elite .es-header-block { text-align: center; margin-bottom: 1.5rem; animation: 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running esFadeUp; } .expatsafe-policy-elite .es-eyebrow { display: inline-block; font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 19.8px !important; font-weight: 600 !important; letter-spacing: 2.4px !important; text-transform: uppercase !important; color: #28D3EE !important; margin-bottom: 0.6rem !important; } .expatsafe-policy-elite .es-title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: clamp(2.2rem, 4.5vw, 3rem) !important; font-weight: 700 !important; color: #ffffff !important; line-height: 1.12 !important; letter-spacing: -0.02em !important; text-transform: uppercase !important; margin: 0 0 0.5rem !important; } .expatsafe-policy-elite .es-desc { font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 1.15rem !important; color: #94a3b8 !important; font-weight: 400 !important; max-width: 620px !important; margin: 0 auto !important; line-height: 1.6 !important; } /* Document Wrapper Card: Comfortable Sleek Padding */ .es-document-wrapper { background: linear-gradient(145deg, rgba(15, 21, 35, 0.85) 0%, rgba(10, 13, 22, 0.95) 100%); border: 1px solid var(--es-border, rgba(255, 255, 255, 0.08)); border-radius: 14px; padding: 1.75rem 2.25rem; box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.7); position: relative; animation: 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s 1 normal forwards running esFadeUp; opacity: 0; } .es-document-wrapper::before { content: ""; position: absolute; inset: -1px; border-radius: 14px; background: linear-gradient(rgba(40, 211, 238, 0.16) 0%, transparent 30%); z-index: -1; pointer-events: none; } /* Prose Typography: Generous, Highly Readable & Comfortable Spacing */ .es-prose { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; color: #cbd5e1 !important; font-size: 1.125rem !important; /* 18px */ font-weight: 400 !important; line-height: 1.68 !important; } .es-prose p { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 1.125rem !important; line-height: 1.68 !important; color: #cbd5e1 !important; margin-top: 0; margin-bottom: 1.15rem; } .es-prose h2 { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; color: #ffffff !important; font-size: 1.55rem !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.3 !important; margin-top: 2.2rem; margin-bottom: 0.85rem; padding-bottom: 0.45rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .es-prose h2:first-child { margin-top: 0; } .es-prose h3 { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; color: #ffffff !important; font-size: 1.25rem !important; font-weight: 600 !important; letter-spacing: -0.015em !important; line-height: 1.35 !important; margin-top: 1.5rem; margin-bottom: 0.55rem; } .es-prose ul { margin-top: 0.4rem; margin-bottom: 1.15rem; padding-left: 1.5rem; } .es-prose li { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 1.125rem !important; line-height: 1.68 !important; margin-bottom: 0.5rem; color: #cbd5e1 !important; } .es-prose a { color: var(--es-cyan, #28D3EE); text-decoration: none; transition: color 0.2s ease, text-decoration 0.2s ease; } .es-prose a:hover { color: #ffffff; text-decoration: underline; } .es-prose strong { color: #ffffff; font-weight: 600; } /* Highlight Note Box */ .es-note { background: rgba(40, 211, 238, 0.06) !important; border: 1px solid rgba(40, 211, 238, 0.3) !important; padding: 1.15rem 1.4rem !important; margin: 1.25rem 0 1.5rem !important; border-radius: 12px !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 1.05rem !important; line-height: 1.65 !important; color: #e2e8f0 !important; } .es-note strong { color: var(--es-cyan, #28D3EE); } /* Contact Card Box */ .es-contact-card { background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 1.15rem 1.4rem; margin: 0.85rem 0; } .es-contact-list { list-style: none !important; padding: 0 !important; margin: 0 !important; } .es-contact-list li { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; margin-bottom: 0.5rem !important; font-size: 1.05rem !important; line-height: 1.65 !important; color: #cbd5e1 !important; } .es-contact-list li:last-child { margin-bottom: 0 !important; } /* Mobile Responsiveness for Policy Pages */ @media (max-width: 768px) { .expatsafe-policy-elite .es-container { padding: 1.5rem 1rem 2rem !important; } .expatsafe-policy-elite .es-header-block { margin-bottom: 1.25rem !important; } .expatsafe-policy-elite .es-eyebrow { font-size: 16px !important; letter-spacing: 2px !important; margin-bottom: 0.4rem !important; } .expatsafe-policy-elite .es-title { font-size: clamp(1.6rem, 6vw, 2rem) !important; line-height: 1.2 !important; margin-bottom: 0.45rem !important; } .expatsafe-policy-elite .es-desc { font-size: 1.025rem !important; line-height: 1.55 !important; } .es-document-wrapper { padding: 1.35rem 1.15rem !important; border-radius: 14px !important; } .es-prose { font-size: 1.025rem !important; line-height: 1.65 !important; } .es-prose p { font-size: 1.025rem !important; line-height: 1.65 !important; margin-bottom: 0.95rem !important; } .es-prose h2 { font-size: 1.3rem !important; line-height: 1.3 !important; margin-top: 1.65rem !important; margin-bottom: 0.6rem !important; padding-bottom: 0.35rem !important; } .es-prose h3 { font-size: 1.12rem !important; line-height: 1.35 !important; margin-top: 1.25rem !important; margin-bottom: 0.45rem !important; } .es-prose ul { margin-top: 0.3rem !important; margin-bottom: 0.95rem !important; padding-left: 1.25rem !important; } .es-prose li { font-size: 1.025rem !important; line-height: 1.65 !important; margin-bottom: 0.45rem !important; } .es-note { padding: 0.85rem 1rem !important; font-size: 0.98rem !important; line-height: 1.58 !important; margin: 0.85rem 0 1.1rem !important; } .es-contact-card { padding: 0.85rem 1rem !important; } } /* ========================================================================== Contact Me Page (100% Impeccable Dark Luxury & Inclusive Typography) - Large Legible Typography (>= 18px body, High Contrast WCAG AAA) - Ambient Obsidian Canvas (#030406) with Soft Cyan & Gold Auras - Frosted Glassmorphism Info Cards with Cyan Shimmer Borders - Effortless Thumb-Friendly Action Targets (>= 56px min-height) ========================================================================== */ .expatsafe-contact-elite { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; box-sizing: border-box; margin: 0; padding: 0; background-color: #030406; background-image: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(40, 211, 238, 0.12), transparent 70%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(229, 169, 60, 0.06), transparent 70%); color: #cbd5e1; -webkit-font-smoothing: antialiased; min-height: calc(100vh - 120px); overflow-x: hidden; display: flex; flex-direction: column; justify-content: center; position: relative; } .expatsafe-contact-elite * { box-sizing: inherit; } .expatsafe-contact-elite .es-container { max-width: 860px; width: 100%; margin: 0 auto; padding: 2.5rem 2rem 3rem; position: relative; z-index: 2; } .expatsafe-contact-elite .es-header-block { text-align: center; margin-bottom: 2.5rem; animation: 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running esFadeUp; } .expatsafe-contact-elite .es-eyebrow { display: none !important; } .expatsafe-contact-elite .es-title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: clamp(2.4rem, 5vw, 3.5rem) !important; font-weight: 700 !important; color: #ffffff !important; line-height: 1.15 !important; margin: 0 0 1.25rem !important; letter-spacing: -0.02em !important; text-transform: uppercase !important; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); } .expatsafe-contact-elite .es-desc { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 1.15rem !important; color: #cbd5e1 !important; font-weight: 400 !important; max-width: 640px !important; margin: 0 auto !important; line-height: 1.7 !important; } /* Info Cards Grid - 2 Columns Desktop / Stacked Mobile */ .expatsafe-contact-elite .es-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 760px; margin: 0 auto 2.5rem; animation: 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s 1 normal forwards running esFadeUp; opacity: 0; } .expatsafe-contact-elite .es-info-card { background: linear-gradient(145deg, rgba(16, 24, 40, 0.88) 0%, rgba(8, 13, 24, 0.95) 100%) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 20px !important; padding: 2.25rem 2rem !important; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.7), 0 0 1px rgba(40, 211, 238, 0.3) !important; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease !important; position: relative; box-sizing: border-box; } .expatsafe-contact-elite .es-info-card::before { content: ""; position: absolute; inset: -1px; border-radius: 20px; background: linear-gradient(180deg, rgba(40, 211, 238, 0.15) 0%, transparent 45%); z-index: -1; pointer-events: none; transition: opacity 0.4s ease; } .expatsafe-contact-elite .es-info-card:hover { transform: translateY(-6px) !important; border-color: rgba(40, 211, 238, 0.45) !important; box-shadow: 0 26px 52px -10px rgba(0, 0, 0, 0.85), 0 0 28px rgba(40, 211, 238, 0.22) !important; } .expatsafe-contact-elite .es-info-icon { width: 64px !important; height: 64px !important; min-width: 64px !important; border-radius: 50% !important; background: rgba(40, 211, 238, 0.1) !important; border: 1.5px solid rgba(40, 211, 238, 0.3) !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto 1.35rem !important; color: #28D3EE !important; transition: all 0.35s ease !important; box-shadow: 0 0 15px rgba(40, 211, 238, 0.15); } .expatsafe-contact-elite .es-info-card:hover .es-info-icon { background: rgba(40, 211, 238, 0.22) !important; border-color: #28D3EE !important; transform: scale(1.1) !important; color: #ffffff !important; box-shadow: 0 0 22px rgba(40, 211, 238, 0.5) !important; } .expatsafe-contact-elite .es-info-icon svg { width: 28px !important; height: 28px !important; stroke-width: 1.8 !important; } .expatsafe-contact-elite .es-info-content { text-align: center; width: 100%; } .expatsafe-contact-elite .es-info-content h4, .expatsafe-contact-elite .es-info-card h4 { color: #ffffff !important; font-size: 1.35rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin: 0 0 0.85rem !important; } .expatsafe-contact-elite .es-info-content p, .expatsafe-contact-elite .es-info-card p { color: #cbd5e1 !important; font-size: 1.15rem !important; line-height: 1.7 !important; margin: 0 !important; font-weight: 400 !important; } /* Action Button Panel - FiFTY Signature Button */ .expatsafe-contact-elite .es-form-wrapper { text-align: center; padding-top: 0.5rem; animation: 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s 1 normal forwards running esFadeUp; opacity: 0; } .expatsafe-contact-elite .es-s6-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; height: clamp(56px, 5.2vw, 66px) !important; min-height: 56px !important; padding: 0 clamp(24px, 3.5vw, 42px) !important; border-radius: 9999px !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: clamp(16px, 1.6vw, 18px) !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; background: linear-gradient(135deg, #00252e 0%, #0a3a46 100%) !important; color: #ffffff !important; border: 1.5px solid rgba(34, 211, 238, 0.58) !important; box-shadow: 0 10px 25px -5px rgba(0, 37, 46, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; cursor: pointer !important; text-decoration: none !important; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; position: relative !important; outline: none !important; user-select: none !important; -webkit-tap-highlight-color: transparent !important; box-sizing: border-box !important; } .expatsafe-contact-elite .es-s6-btn .fifty-btn-icon { width: 22px !important; height: 22px !important; color: #FF6B4A !important; flex-shrink: 0 !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease, filter 0.35s ease !important; } .expatsafe-contact-elite .es-s6-btn::after { content: "→" !important; display: inline-block !important; margin-left: 6px !important; font-size: 1.05em !important; line-height: 1 !important; color: rgba(255, 255, 255, 0.85) !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease !important; } .expatsafe-contact-elite .es-s6-btn:hover { background: linear-gradient(135deg, #00252e 0%, #0a3a46 100%) !important; border-color: rgba(255, 107, 74, 0.65) !important; box-shadow: 0 14px 30px -4px rgba(0, 37, 46, 0.5), 0 0 20px rgba(255, 107, 74, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; transform: translateY(-2px) scale(1.015) !important; color: #FF6B4A !important; } .expatsafe-contact-elite .es-s6-btn:hover span { color: #FF6B4A !important; } .expatsafe-contact-elite .es-s6-btn:hover .fifty-btn-icon { transform: scale(1.15) !important; filter: drop-shadow(0 0 8px rgba(255, 107, 74, 0.65)) !important; } .expatsafe-contact-elite .es-s6-btn:hover::after { color: #FF6B4A !important; transform: translateX(5px) !important; } .expatsafe-contact-elite .es-s6-btn:active { transform: translateY(0) scale(0.98) !important; box-shadow: 0 6px 18px rgba(0, 37, 46, 0.4) !important; } /* Responsive: Tablet and Mobile Perfection */ @media (max-width: 768px) { .expatsafe-contact-elite .es-container { padding: 3rem 1.25rem 3.5rem !important; } .expatsafe-contact-elite .es-header-block { margin-bottom: 2rem !important; } .expatsafe-contact-elite .es-title { font-size: clamp(2rem, 7.5vw, 2.5rem) !important; line-height: 1.2 !important; margin-bottom: 0.85rem !important; } .expatsafe-contact-elite .es-desc { font-size: 1.05rem !important; line-height: 1.65 !important; } .expatsafe-contact-elite .es-info-grid { grid-template-columns: 1fr !important; max-width: 420px !important; gap: 1.5rem !important; margin-bottom: 2.25rem !important; } .expatsafe-contact-elite .es-info-card { padding: 2rem 1.5rem !important; min-height: auto !important; border-radius: 18px !important; } .expatsafe-contact-elite .es-info-icon { width: 58px !important; height: 58px !important; min-width: 58px !important; margin-bottom: 1.15rem !important; } .expatsafe-contact-elite .es-info-content h4, .expatsafe-contact-elite .es-info-card h4 { font-size: 1.25rem !important; } .expatsafe-contact-elite .es-info-content p, .expatsafe-contact-elite .es-info-card p { font-size: 1.125rem !important; /* Strictly >= 18px */ line-height: 1.65 !important; } .expatsafe-contact-elite .es-s6-btn { width: 100% !important; max-width: 340px !important; height: 54px !important; min-height: 54px !important; padding: 0 20px !important; font-size: 15px !important; margin: 0 auto !important; } } /* ========================================================================== Services Page Component Styles (100% Preserved Colors & Layout from expats.mhtml) Exact original colors: rgb(5, 8, 13), rgb(3, 5, 8), rgb(3, 4, 6) ========================================================================== */ .page-id-90 .static-page-header { display: none !important; } .page-id-90 #content.site-content, .page-id-90 .site-content-container, .page-id-90 #primary.content-area, .page-id-90 #main.site-main, /* Page 90 - Services Redesign (Ultra-Lean, Vivid Photos, Mobile-First) */ .page-id-90 .entry-content, .page-id-90 .elementor-90, .page-id-90 .elementor-90 .e-con, .page-id-90 .elementor-90 .e-con-inner, .page-id-90 .elementor-90 .elementor-widget-html, .page-id-90 .elementor-90 .elementor-widget-container { background-color: #05080d !important; padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; } .expatsafe-about-elite { --es-bg: #05080d; --es-bg-alt: #0a0f18; --es-surface: #101726; --es-surface-hover: #162035; --es-border: rgba(255, 255, 255, 0.12); --es-border-strong: rgba(255, 255, 255, 0.22); --es-text-primary: #ffffff; --es-text-secondary: #e2e8f0; --es-text-muted: #94a3b8; --es-cyan: #28d3ee; --es-brand: #38bdf8; font-family: Outfit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 18px; line-height: 1.6; background-color: var(--es-bg); color: var(--es-text-secondary); overflow-x: hidden; } .expatsafe-about-elite * { box-sizing: border-box; } .expatsafe-about-elite .es-container { max-width: 1200px; width: 100%; margin: 0 auto; padding: 5rem 1.75rem; } .expatsafe-about-elite .es-section { position: relative; background-color: var(--es-bg); } .expatsafe-about-elite .es-section-alt { background-color: var(--es-bg-alt); } /* SECTION HEADERS (SIMPLE, PUNCHY) */ .expatsafe-about-elite .es-section-header { text-align: center; margin: 0 auto 3.5rem; } .expatsafe-about-elite .es-section-title { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; color: #ffffff; line-height: 1.2; letter-spacing: -0.025em; margin: 0; } .expatsafe-about-elite .es-highlight-danger { color: #f87171; } /* FiFTY Signature Button for By Your Side */ .expatsafe-about-elite .es-btn-primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; height: clamp(56px, 5.2vw, 66px) !important; min-height: 56px !important; padding: 0 clamp(24px, 3vw, 36px) !important; border-radius: 9999px !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: clamp(16px, 1.6vw, 18px) !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; background: linear-gradient(135deg, #00252e 0%, #0a3a46 100%) !important; color: #ffffff !important; border: 1.5px solid rgba(34, 211, 238, 0.58) !important; box-shadow: 0 10px 25px -5px rgba(0, 37, 46, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; cursor: pointer !important; text-decoration: none !important; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; position: relative !important; outline: none !important; user-select: none !important; -webkit-tap-highlight-color: transparent !important; box-sizing: border-box !important; } .expatsafe-about-elite .es-btn-primary .fifty-btn-icon { width: 22px !important; height: 22px !important; color: #FF6B4A !important; flex-shrink: 0 !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease, filter 0.35s ease !important; } .expatsafe-about-elite .es-btn-primary::after { content: "→" !important; display: inline-block !important; margin-left: 6px !important; font-size: 1.05em !important; line-height: 1 !important; color: rgba(255, 255, 255, 0.85) !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease !important; } .expatsafe-about-elite .es-btn-primary:hover { background: linear-gradient(135deg, #00252e 0%, #0a3a46 100%) !important; border-color: rgba(255, 107, 74, 0.65) !important; box-shadow: 0 14px 30px -4px rgba(0, 37, 46, 0.5), 0 0 20px rgba(255, 107, 74, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; transform: translateY(-2px) scale(1.015) !important; color: #FF6B4A !important; } .expatsafe-about-elite .es-btn-primary:hover span { color: #FF6B4A !important; } .expatsafe-about-elite .es-btn-primary:hover .fifty-btn-icon { transform: scale(1.15) !important; filter: drop-shadow(0 0 8px rgba(255, 107, 74, 0.65)) !important; } .expatsafe-about-elite .es-btn-primary:hover::after { color: #FF6B4A !important; transform: translateX(5px) !important; } .expatsafe-about-elite .es-btn-large { min-width: 260px; } /* ========================================================================== By Your Side (page-id-90): Header Overlay & Frosted Glass Nav ========================================================================== */ body.page-id-90 .site-header, body.page-id-90 #masthead { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 1000 !important; margin-top: 25px !important; margin-bottom: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; pointer-events: auto !important; } /* Ambient subtle top vignette behind header for legibility across all photo slides */ body.page-id-90 .site-header::before { content: ""; position: absolute; top: -25px; left: 0; right: 0; height: 140px; background: linear-gradient(180deg, rgba(5, 8, 13, 0.78) 0%, rgba(5, 8, 13, 0.35) 60%, transparent 100%); pointer-events: none; z-index: -1; } /* Frosted Glass Pill Capsule for Desktop Main Navigation */ body.page-id-90 .main-navigation #menu-mainmenu { background: rgba(10, 15, 26, 0.65) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 9999px !important; padding: 8px 28px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; align-items: center !important; gap: 2rem !important; } body.page-id-90 .main-navigation #menu-mainmenu > li > menu-item > a { color: #ffffff !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important; transition: color 0.2s ease, text-shadow 0.2s ease !important; } body.page-id-90 .main-navigation #menu-mainmenu > li > menu-item > a:hover { color: #FF6B4A !important; text-shadow: 0 0 14px rgba(255, 107, 74, 0.65) !important; } /* Logo Drop Shadow for Crisp Contrast */ body.page-id-90 .site-logo-link { filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.85)) !important; transition: transform 0.2s ease, filter 0.2s ease !important; } body.page-id-90 .site-logo-link:hover { filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.95)) !important; transform: translateY(-1px) !important; } /* Mobile Header Overlay (< 1024px) */ @media (max-width: 1023px) { body.page-id-90 .site-header, body.page-id-90 #masthead { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 1000 !important; margin-top: 10px !important; margin-bottom: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } body.page-id-90 .header-mobile, body.page-id-90 #header-mobile, body.page-id-90 .header-mobile-main, body.page-id-90 .header-mobile-section { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } body.page-id-90 .site-header::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 120px; background: linear-gradient(180deg, rgba(5, 8, 13, 0.75) 0%, rgba(5, 8, 13, 0.35) 60%, transparent 100%); pointer-events: none; z-index: -1; } body.page-id-90 .header-mobile .site-logo-link { filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.85)) !important; } body.page-id-90 .header-mobile .component-hamburger__toggle { background: rgba(10, 15, 26, 0.65) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 12px !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important; color: #ffffff !important; width: 44px !important; height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body.page-id-90 .expatsafe-about-elite .es-hero { min-height: 100vh !important; min-height: 100dvh !important; height: 100vh !important; height: 100dvh !important; padding: 6.5rem 1.25rem 2.5rem !important; box-sizing: border-box !important; } } /* 1. HERO SECTION (CLEAR, VIVID, UNCLUTTERED - FULLSCREEN COVER) */ .expatsafe-about-elite .es-hero { position: relative; min-height: 100vh; min-height: 100dvh; height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 7rem 1.5rem 4rem; overflow: hidden; box-sizing: border-box; } .expatsafe-about-elite .es-hero-slideshow { position: absolute; inset: 0; z-index: 0; } .expatsafe-about-elite .es-hero-bg-image { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; z-index: 1; transition: opacity 1.4s ease-in-out; } .expatsafe-about-elite .es-hero-bg-image.was-active { opacity: 1; z-index: 2; transition: none; } .expatsafe-about-elite .es-hero-bg-image.active { opacity: 1; z-index: 3; transition: opacity 1.4s ease-in-out; } .expatsafe-about-elite .es-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 8, 13, 0.3) 0%, rgba(5, 8, 13, 0.58) 100%); z-index: 1; } .expatsafe-about-elite .es-hero-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; } .expatsafe-about-elite .es-eyebrow { display: inline-block; color: #28d3ee; font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 19.8px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; margin-bottom: 0.75rem; text-shadow: none !important; } .expatsafe-about-elite .es-hero-title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: clamp(2.8rem, 5.5vw, 5rem); font-weight: 800; color: #ffffff; line-height: 1.08; letter-spacing: -0.02em; text-transform: uppercase; margin: 0 0 1rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65), 0 4px 16px rgba(0, 0, 0, 0.4); } .expatsafe-about-elite .es-hero-title .es-highlight { color: #FF6B4A !important; } .expatsafe-about-elite .es-hero-desc { font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 22.5px; color: #28d3ee !important; line-height: 1.3; letter-spacing: 0.9px; margin: 0.5rem 0 0; font-weight: 600; text-shadow: none !important; } .expatsafe-about-elite .es-hero .es-hero-actions { display: none !important; } /* 2. WHAT I DO (LEAN 3 PILLARS) */ .expatsafe-about-elite .es-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .expatsafe-about-elite .es-service-card { position: relative; background: var(--es-surface); border: 1px solid var(--es-border); border-radius: 18px; padding: 2.25rem 2rem; display: flex; flex-direction: column; transition: transform 0.25s ease, border-color 0.25s ease; } .expatsafe-about-elite .es-service-card:hover { transform: translateY(-4px); border-color: rgba(40, 211, 238, 0.4); } .expatsafe-about-elite .es-service-number { font-size: 1.35rem; font-weight: 800; color: #28d3ee; margin-bottom: 1rem; } .expatsafe-about-elite .es-service-card h3 { font-size: 1.45rem; font-weight: 700; color: #ffffff; margin: 0 0 0.85rem; letter-spacing: -0.015em; } .expatsafe-about-elite .es-service-card p { font-size: 1.1rem; color: #cbd5e1; line-height: 1.6; margin: 0; } /* 3. SITUATIONS / SPLIT SECTION */ .expatsafe-about-elite .es-split-section { display: grid; grid-template-columns: 1fr 1.25fr; gap: 3.5rem; align-items: center; } .expatsafe-about-elite .es-situations-image-wrapper { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); border: 1px solid var(--es-border); } .expatsafe-about-elite .es-situations-image { width: 100%; height: 480px; background-size: cover; background-position: center; } .expatsafe-about-elite .es-situations-list { display: flex; flex-direction: column; gap: 1.1rem; } .expatsafe-about-elite .es-situation-item { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.5rem; background: var(--es-surface); border: 1px solid var(--es-border); border-radius: 14px; transition: transform 0.2s ease, border-color 0.2s ease; } .expatsafe-about-elite .es-situation-item:hover { transform: translateX(4px); border-color: rgba(40, 211, 238, 0.4); } .expatsafe-about-elite .es-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #28d3ee; box-shadow: 0 0 10px rgba(40, 211, 238, 0.7); } .expatsafe-about-elite .es-dash { color: #28d3ee; font-size: 1.3rem; font-weight: 700; flex-shrink: 0; } .expatsafe-about-elite .es-situation-item p { font-size: 1.15rem; font-weight: 500; color: #f1f5f9; margin: 0; line-height: 1.4; } /* 4. TRUST / WHY WILLIE (VIVID PHOTO BACKGROUND) */ .expatsafe-about-elite .es-trust-section { position: relative; background-color: #05080d; overflow: hidden; } .expatsafe-about-elite .es-trust-bg { position: absolute; inset: 0; background-size: cover; background-position: center 25%; opacity: 0.92; z-index: 0; } .expatsafe-about-elite .es-trust-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 8, 13, 0.35) 0%, rgba(5, 8, 13, 0.65) 100%); z-index: 1; } .expatsafe-about-elite .es-trust-content { position: relative; z-index: 2; } .expatsafe-about-elite .es-trust-section .es-section-title { text-shadow: 0 3px 16px rgba(0, 0, 0, 0.9); } .expatsafe-about-elite .es-bento-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem; } .expatsafe-about-elite .es-span-4 { grid-column: span 3; } .expatsafe-about-elite .es-span-2 { grid-column: span 3; } .expatsafe-about-elite .es-bento-card { background: rgba(8, 14, 26, 0.58); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 16px; padding: 1.75rem 1.6rem; display: flex; align-items: flex-start; gap: 1.15rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .expatsafe-about-elite .es-bento-card:hover { background: rgba(14, 22, 38, 0.75); transform: translateY(-3px); border-color: rgba(40, 211, 238, 0.55); } .expatsafe-about-elite .es-bento-num { font-size: 1.15rem; font-weight: 800; color: #28d3ee; flex-shrink: 0; } .expatsafe-about-elite .es-bento-card h3 { font-size: 1.25rem; font-weight: 700; color: #ffffff; margin: 0 0 0.35rem; letter-spacing: -0.015em; } .expatsafe-about-elite .es-bento-card p { font-size: 1.05rem; color: #cbd5e1; line-height: 1.5; margin: 0; } /* 5. PRICING & PRESENCE */ .expatsafe-about-elite .es-presence-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 3.5rem; align-items: center; } .expatsafe-about-elite .es-presence-info { display: flex; flex-direction: column; gap: 1.5rem; } .expatsafe-about-elite .es-pricing-block { background: var(--es-surface); border: 1px solid var(--es-border); border-radius: 18px; padding: 2rem 2.25rem; transition: border-color 0.2s ease, transform 0.2s ease; } .expatsafe-about-elite .es-pricing-block:hover { border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); } .expatsafe-about-elite .es-pricing-block.es-featured { background: linear-gradient(180deg, #162035 0%, #101726 100%); border: 1.5px solid rgba(40, 211, 238, 0.5); } .expatsafe-about-elite .es-tag { display: inline-block; font-size: 0.9rem; font-weight: 700; padding: 0.35rem 0.85rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.08); color: #e2e8f0; letter-spacing: 0.05em; margin-bottom: 0.75rem; } .expatsafe-about-elite .es-tag-featured { background: rgba(40, 211, 238, 0.2); color: #28d3ee; } .expatsafe-about-elite .es-pricing-block h3 { font-size: 1.3rem; font-weight: 700; color: #ffffff; margin: 0 0 0.5rem; letter-spacing: -0.015em; } .expatsafe-about-elite .es-pricing-price { font-size: 1.85rem; font-weight: 800; color: #28d3ee; margin: 0; letter-spacing: -0.02em; } /* WILLIE PROFILE CARD */ .expatsafe-about-elite .es-profile-wrapper { background: var(--es-surface); border: 1px solid var(--es-border); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45); text-align: center; } .expatsafe-about-elite .es-profile-wrapper img { width: 100%; height: auto; max-height: 440px; object-fit: cover; object-position: top center; display: block; } .expatsafe-about-elite .es-profile-label { padding: 1.75rem; background: var(--es-surface); } .expatsafe-about-elite .es-profile-label h3 { font-size: 1.5rem; font-weight: 800; color: #ffffff; margin: 0 0 0.35rem; } .expatsafe-about-elite .es-profile-title { font-size: 1.1rem; color: #28d3ee; font-weight: 600; margin: 0 0 0.4rem; } .expatsafe-about-elite .es-profile-meta { font-size: 0.98rem; color: #94a3b8; } /* 6. BOUNDARIES (VIVID PHOTO CARDS) */ .expatsafe-about-elite .es-boundary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .expatsafe-about-elite .es-boundary-card { position: relative; border-radius: 20px; overflow: hidden; min-height: 360px; display: flex; align-items: flex-end; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4); border: 1px solid var(--es-border); transition: transform 0.25s ease; } .expatsafe-about-elite .es-boundary-card:hover { transform: translateY(-4px); } .expatsafe-about-elite .es-boundary-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 1; transition: transform 0.5s ease; } .expatsafe-about-elite .es-boundary-card:hover .es-boundary-bg { transform: scale(1.05); } .expatsafe-about-elite .es-boundary-overlay { position: relative; z-index: 2; width: 100%; padding: 2.25rem 1.75rem; background: linear-gradient(180deg, rgba(5, 8, 13, 0) 0%, rgba(5, 8, 13, 0.8) 45%, rgba(5, 8, 13, 0.98) 100%); } .expatsafe-about-elite .es-boundary-overlay h3 { font-size: 1.4rem; font-weight: 800; color: #ffffff; margin: 0 0 0.65rem; letter-spacing: -0.015em; } .expatsafe-about-elite .es-no-tag { color: #f87171; } .expatsafe-about-elite .es-boundary-overlay p { font-size: 1.05rem; color: #f1f5f9; line-height: 1.55; margin: 0; } /* 7. DISCLAIMER */ .expatsafe-about-elite .es-quick-note-section { padding: 5rem 1.75rem 6.5rem; } .expatsafe-about-elite .es-quick-note-card { background: linear-gradient(180deg, #101726 0%, #0a0f18 100%); border: 1px solid var(--es-border-strong); border-radius: 20px; padding: 3.5rem 2.5rem; text-align: center; max-width: 760px; margin: 0 auto; } .expatsafe-about-elite .es-quick-note-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1.1rem; border-radius: 9999px; background: rgba(40, 211, 238, 0.15); color: #28d3ee; font-size: 0.95rem; font-weight: 700; margin-bottom: 1.25rem; border: 1px solid rgba(40, 211, 238, 0.3); } .expatsafe-about-elite .es-quick-note-title { display: none !important; } .expatsafe-about-elite .es-quick-note-divider { width: 48px; height: 3px; background: #28d3ee; border-radius: 2px; margin: 0 auto 1.5rem; } .expatsafe-about-elite .es-quick-note-lead { font-size: 1.25rem; font-weight: 700; color: #ffffff; margin: 0 0 0.75rem; } .expatsafe-about-elite .es-quick-note-sub { font-size: 1.1rem; color: #cbd5e1; line-height: 1.6; max-width: 620px; margin: 0 auto; } /* RESPONSIVE BREAKPOINTS (OPTIMIZED FOR MOBILE) */ @media (max-width: 1024px) { .expatsafe-about-elite .es-split-section { grid-template-columns: 1fr; gap: 2.25rem; } .expatsafe-about-elite .es-situations-image { height: 360px; } .expatsafe-about-elite .es-bento-grid { grid-template-columns: 1fr; gap: 1.25rem; } .expatsafe-about-elite .es-span-4, .expatsafe-about-elite .es-span-2 { grid-column: span 1; } .expatsafe-about-elite .es-presence-grid { grid-template-columns: 1fr; gap: 2.5rem; } .expatsafe-about-elite .es-profile-wrapper { max-width: 420px; margin: 0 auto; } } @media (max-width: 768px) { .expatsafe-about-elite .es-container { padding: 3.5rem 1.25rem; } .expatsafe-about-elite .es-section-header { margin-bottom: 2.25rem; } .expatsafe-about-elite .es-grid-3, .expatsafe-about-elite .es-boundary-grid { grid-template-columns: 1fr; gap: 1.35rem; } .expatsafe-about-elite .es-hero { min-height: 100vh; min-height: 100dvh; height: 100vh; height: 100dvh; padding: 5.5rem 1.25rem 3rem; box-sizing: border-box; } .expatsafe-about-elite .es-eyebrow { font-size: 16px; letter-spacing: 2px; margin-bottom: 0.5rem; } .expatsafe-about-elite .es-hero-title { font-size: clamp(1.75rem, 7.2vw, 2.375rem) !important; line-height: 1.12 !important; margin-bottom: 0.5rem !important; } .expatsafe-about-elite .es-hero-desc { font-size: 18px !important; margin-bottom: 0; } .expatsafe-about-elite .es-btn-primary { width: 100% !important; max-width: 340px !important; height: 54px !important; min-height: 54px !important; padding: 0 20px !important; font-size: 15px !important; margin: 0 auto !important; } .expatsafe-about-elite .es-service-card { padding: 1.75rem 1.5rem; } .expatsafe-about-elite .es-boundary-card { min-height: 280px; } .expatsafe-about-elite .es-quick-note-section { padding: 3rem 0 3.5rem !important; } .expatsafe-about-elite .es-quick-note-section .es-container { padding: 0 8px !important; } .expatsafe-about-elite .es-quick-note-card { padding: 2rem 1rem !important; border-radius: 16px !important; margin: 0 auto !important; width: 100% !important; } .expatsafe-about-elite .es-quick-note-lead { font-size: 1.15rem !important; line-height: 1.4 !important; } .expatsafe-about-elite .es-quick-note-sub { font-size: 1.025rem !important; line-height: 1.65 !important; } } /* ========================================================================== HOMEPAGE DESIGN HARMONIZATION (IMPECCABLE CRAFT & USER DESIGN PHILOSOPHY) - Photo-First: Real photos remain bright, vivid, without muddy overlays - Zero Text Bloat: Punchy, clear, accessible typography - Inclusive / Universal: Large fonts (>=18px), AAA contrast, >=56px tap targets - Cohesive Dark Luxury: Seamless flow from Hero to Recommends, Insights & About ========================================================================== */ /* 1. Global Front Page Theme Continuity */ body.home, body.page-id-2150, body.home #page, body.home .site-main, body.home .site-content, body.home .entry-content, body.home .elementor-2150 { background-color: #030406 !important; color: #cbd5e1; } /* Native Instant Hardware Scrolling - eliminates scroll lag and input latency */ html { scroll-behavior: auto !important; } /* 2. Hero Section Refinements — Apple Editorial Manifesto Architecture (Desktop, Tablet & Mobile) */ body.home .elementor-2150 .elementor-element-5cc8831, .elementor-element-5cc8831 { background-color: #030406 !important; position: relative !important; overflow: hidden !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: clamp(2rem, 4vw, 4.5rem) !important; padding: 20px clamp(24px, 4vw, 56px) 44px !important; box-sizing: border-box !important; } /* Left Column: Dual Vertical Photo Marquee with Soft Obsidian Vignettes */ body.home .elementor-2150 .elementor-element-7181616, .elementor-element-7181616 { position: relative !important; border-radius: 24px !important; overflow: hidden !important; } body.home .elementor-2150 .elementor-element-7181616::after, .elementor-element-7181616::after { content: '' !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(3, 4, 6, 0.55) 0%, transparent 14%, transparent 86%, rgba(3, 4, 6, 0.65) 100%) !important; z-index: 4 !important; } /* Right Column: Monumental Title, Author Signature & Editorial Manifesto Card */ body.home .elementor-2150 .elementor-element-a81e507, .elementor-element-a81e507 { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; box-sizing: border-box !important; } /* Eyebrow Removed per user request */ .elementor-element-9f9db48 { display: none !important; } /* The hero headline typography is controlled by its Elementor widget settings. */ /* Movement 1B: Editorial Author Signature ("by Willie Thailand") */ .elementor-element-c2bac10 { margin-top: 0 !important; margin-bottom: 24px !important; width: 100% !important; } .elementor-element-c2bac10 .elementor-heading-title { margin: 0 !important; padding: 0 !important; font-size: inherit !important; line-height: 1 !important; } .es-byline-badge { display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 7px 18px 7px 14px !important; background: rgba(255, 255, 255, 0.045) !important; border: 1px solid rgba(255, 255, 255, 0.11) !important; border-radius: 9999px !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; } .es-byline-badge:hover { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 107, 74, 0.45) !important; box-shadow: 0 6px 24px rgba(255, 107, 74, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; transform: translateY(-1px) !important; } .es-byline-dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #FF6B4A !important; box-shadow: 0 0 10px #FF6B4A, 0 0 4px #FF6B4A !important; display: inline-block !important; flex-shrink: 0 !important; } .es-byline-text { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; color: #CBD5E1 !important; font-size: 0.9rem !important; font-weight: 500 !important; letter-spacing: 0.05em !important; text-transform: none !important; line-height: 1.2 !important; } /* Movement 2: The 5-Line Editorial Manifesto Card */ .elementor-element-f318cb5 { margin-top: 0 !important; margin-bottom: 0 !important; width: 100% !important; max-width: 540px !important; } .elementor-element-f318cb5 .elementor-heading-title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } /* Creed line sizes use em ratios so Elementor's base Size control scales the full block. */ .es-hero-creed { display: flex !important; flex-direction: column !important; gap: 0 !important; background: linear-gradient(145deg, rgba(15, 23, 42, 0.58) 0%, rgba(8, 12, 22, 0.38) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important; border-radius: 18px !important; padding: 24px 28px !important; box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; box-sizing: border-box !important; } .es-creed-line { display: block !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; letter-spacing: -0.012em !important; } /* Stanza 1 (Opening Hook): "Thailand has so much to love." */ .es-creed-thailand { color: #ffffff !important; font-size: 1.066em !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.02em !important; margin-bottom: 14px !important; padding-bottom: 14px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; text-shadow: none !important; } /* Stanza 2 (Philosophical Couplet): "Don’t live like everyone else." / "Live so fully the world can’t forget you." */ .es-creed-dare { color: #94a3b8 !important; font-size: 0.778em !important; font-weight: 400 !important; line-height: 1.48 !important; letter-spacing: -0.005em !important; margin-bottom: 3px !important; } .es-creed-climax { color: #e2e8f0 !important; font-size: 0.778em !important; font-weight: 500 !important; line-height: 1.48 !important; letter-spacing: -0.005em !important; margin-bottom: 16px !important; } /* Stanza 3 (Twin Finale): "Make them jealous." / "Do it while you can." */ .es-creed-jealous { color: #ffffff !important; font-size: 0.922em !important; font-weight: 700 !important; line-height: 1.28 !important; letter-spacing: -0.015em !important; margin-bottom: 3px !important; } .es-creed-punch { color: #FF6B4A !important; font-size: 0.922em !important; font-weight: 700 !important; line-height: 1.28 !important; letter-spacing: -0.015em !important; text-shadow: none !important; margin: 0 !important; } /* Hero CTA Buttons Removed per user request */ .es-hero-cta-group, .elementor-element-hero_cta_widget { display: none !important; } /* Tablet Hero Layout Optimization (768px - 1024px): Balanced Side-by-Side 2-Column Split */ @media (min-width: 768px) and (max-width: 1024px) { body.home .elementor-2150 .elementor-element-5cc8831, .home .elementor-element-5cc8831 { min-height: auto !important; padding: 24px 24px 48px !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 28px !important; } body.home .elementor-2150 .elementor-element-7181616, .elementor-element-7181616 { width: 45% !important; flex: 0 0 45% !important; max-height: 480px !important; height: 480px !important; overflow: hidden !important; border-radius: 20px !important; margin-bottom: 0 !important; } body.home .elementor-2150 .elementor-element-1b3eca7 uix-marquee, body.home .elementor-2150 .elementor-element-28d88ec uix-marquee { --marquee-height: 480px !important; height: 480px !important; } body.home .elementor-2150 .elementor-element-a81e507, .elementor-element-a81e507 { width: 52% !important; flex: 1 1 52% !important; padding: 0 !important; } .elementor-element-c2bac10 { margin-bottom: 18px !important; } .es-hero-creed { padding: 20px 22px !important; } .es-creed-thailand { font-size: 0.936em !important; margin-bottom: 12px !important; padding-bottom: 12px !important; } .es-creed-dare, .es-creed-climax { font-size: 0.749em !important; } .es-creed-climax { margin-bottom: 14px !important; } .es-creed-jealous, .es-creed-punch { font-size: 0.85em !important; } } /* Mobile Hero Layout Optimization (<= 767px): Cinematic Photo Header + Framed Manifesto */ @media (max-width: 767px) { body.home .elementor-2150 .elementor-element-5cc8831, .home .elementor-element-5cc8831 { min-height: auto !important; padding: 12px 16px 38px !important; flex-direction: column !important; align-items: stretch !important; gap: 16px !important; } body.home .elementor-2150 .elementor-element-7181616, .elementor-element-7181616 { width: 100% !important; max-height: none !important; height: clamp(420px, 54vh, 490px) !important; height: clamp(420px, 54svh, 490px) !important; overflow: hidden !important; border-radius: 18px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; padding: 4px 4px !important; margin: 0 0 14px 0 !important; gap: 6px !important; position: relative !important; } body.home .elementor-2150 .elementor-element-1b3eca7 uix-marquee, body.home .elementor-2150 .elementor-element-28d88ec uix-marquee { --marquee-height: clamp(420px, 54vh, 490px) !important; --marquee-height: clamp(420px, 54svh, 490px) !important; height: var(--marquee-height) !important; padding: 0 !important; margin: 0 !important; } body.home .elementor-2150 .elementor-element-a81e507, .elementor-element-a81e507 { width: 100% !important; padding: 0 2px !important; } .elementor-element-c2bac10 { margin-bottom: 16px !important; } .es-byline-dot { width: 22px !important; } .es-byline-text { font-size: 0.8rem !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } .es-hero-creed { padding: 18px 18px !important; border-radius: 16px !important; gap: 0 !important; } .es-creed-thailand { font-size: 0.922em !important; line-height: 1.26 !important; margin-bottom: 12px !important; padding-bottom: 11px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } .es-creed-dare { font-size: 0.734em !important; color: #94a3b8 !important; line-height: 1.42 !important; margin-bottom: 2px !important; } .es-creed-climax { font-size: 0.734em !important; color: #e2e8f0 !important; line-height: 1.42 !important; margin-bottom: 12px !important; white-space: normal !important; } .es-creed-jealous { font-size: 0.85em !important; line-height: 1.28 !important; color: #ffffff !important; font-weight: 700 !important; margin-bottom: 2px !important; } .es-creed-punch { font-size: 0.85em !important; line-height: 1.28 !important; color: #FF6B4A !important; font-weight: 700 !important; } } /* 3. Section 1: "WILLIE RECOMMENDS" */ .elementor-element-75ddddf { background-color: #05080d !important; padding: 80px 24px 90px !important; margin: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .elementor-element-f6a4acf .elementor-heading-title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; color: #ffffff !important; font-size: clamp(2.2rem, 4vw, 2.8rem); font-weight: 700 !important; letter-spacing: -0.02em !important; text-transform: uppercase !important; text-align: center !important; margin-bottom: 2.5rem !important; } /* Video Carousel Card Styling (Cinematic Spatial Elevation & Aura) */ .elementor-element-75ddddf .milano-shopable-video__item { background: #090e18 !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 20px !important; overflow: hidden !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important; transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.55s ease !important; transform: translateZ(0) !important; will-change: transform, box-shadow !important; position: relative !important; } /* Specular Glass Sheen across the card */ .elementor-element-75ddddf .milano-shopable-video__item::before { content: '' !important; position: absolute !important; top: 0 !important; left: -120% !important; width: 70% !important; height: 100% !important; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.09) 50%, transparent 100% ) !important; transform: skewX(-20deg) !important; pointer-events: none !important; z-index: 7 !important; opacity: 0 !important; transition: none !important; } .elementor-element-75ddddf .milano-shopable-video__item:hover::before { left: 140% !important; opacity: 1 !important; transition: left 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease !important; } /* Card Hover Elevation */ .elementor-element-75ddddf .milano-shopable-video__item:hover { transform: translateY(-8px) scale(1.018) translateZ(0) !important; border-color: rgba(40, 211, 238, 0.55) !important; box-shadow: 0 24px 55px rgba(0, 0, 0, 0.7), 0 0 35px rgba(40, 211, 238, 0.25) !important; z-index: 10 !important; } /* Mobile Tactile Spring Touch-Down */ .elementor-element-75ddddf .milano-shopable-video__item:active { transform: scale(0.978) translateY(-2px) !important; transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* Inner Video Cinematic Lens Zoom */ .elementor-element-75ddddf .milano-shopable-video__media { overflow: hidden !important; position: relative !important; transform: translateZ(0) !important; } .elementor-element-75ddddf .milano-shopable-video__media video { transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.65s ease !important; transform: scale(1) translateZ(0) !important; will-change: transform !important; } .elementor-element-75ddddf .milano-shopable-video__item:hover .milano-shopable-video__media video { transform: scale(1.075) translateZ(0) !important; } /* Category-specific Aura Highlights on Hover */ .elementor-element-75ddddf .milano-shopable-video__item:has(.fifty-cat-badge--cholesterol):hover { border-color: rgba(251, 191, 36, 0.6) !important; box-shadow: 0 24px 55px rgba(0, 0, 0, 0.7), 0 0 35px rgba(251, 191, 36, 0.28) !important; } .elementor-element-75ddddf .milano-shopable-video__item:has(.fifty-cat-badge--blood-sugar):hover { border-color: rgba(255, 82, 82, 0.6) !important; box-shadow: 0 24px 55px rgba(0, 0, 0, 0.7), 0 0 35px rgba(255, 82, 82, 0.28) !important; } .elementor-element-75ddddf .milano-shopable-video__item:has(.fifty-cat-badge--bones-joints):hover { border-color: rgba(40, 211, 238, 0.6) !important; box-shadow: 0 24px 55px rgba(0, 0, 0, 0.7), 0 0 35px rgba(40, 211, 238, 0.28) !important; } .elementor-element-75ddddf .milano-shopable-video__item:has(.fifty-cat-badge--sleep-rest):hover { border-color: rgba(167, 139, 250, 0.6) !important; box-shadow: 0 24px 55px rgba(0, 0, 0, 0.7), 0 0 35px rgba(167, 139, 250, 0.28) !important; } /* Frosted Glass Badge for Product Category / Tag */ .elementor-element-75ddddf .milano-shopable-video__product { background: rgba(3, 4, 6, 0.88) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 12px !important; padding: 8px 12px !important; min-height: 56px !important; display: flex !important; align-items: center !important; gap: 10px !important; } .elementor-element-75ddddf .milano-shopable-video__summary { flex: 1 1 auto !important; min-width: 0 !important; } .elementor-element-75ddddf .milano-shopable-video__title, .milano-shopable-video__title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: clamp(0.92rem, 2vw, 1.05rem) !important; font-weight: 700 !important; color: #ffffff !important; letter-spacing: -0.01em !important; line-height: 1.28 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; } /* ========================================================================== Shoppable Video Carousel & Willie Recommends - High-Visibility Luxury Pagination Fixes missing / dark-on-dark dots on mobile and all screen sizes ========================================================================== */ /* Swiper Pagination Container */ .elementor-widget-milano-shopable-video-carousel .swiper-pagination, .elementor-element-2ebec2c .swiper-pagination, uix-slider:has(.milano-shopable-video__item) .swiper-pagination, .milano-shopable-video-carousel .swiper-pagination { position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; top: auto !important; margin: 22px auto 6px !important; padding: 8px 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; z-index: 30 !important; width: auto !important; max-width: 100% !important; opacity: 1 !important; visibility: visible !important; } /* Force pagination to display ONLY on mobile and tablet, and hide completely on desktop where all 4 cards are visible */ @media (min-width: 1025px) { .elementor-widget-milano-shopable-video-carousel .swiper-pagination, .elementor-element-2ebec2c .swiper-pagination, uix-slider:has(.milano-shopable-video__item) .swiper-pagination, .milano-shopable-video-carousel .swiper-pagination, #willie-recommends .swiper-pagination, .elementor-element-75ddddf .swiper-pagination { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; } } @media (max-width: 1024px) { .elementor-widget-milano-shopable-video-carousel .swiper-pagination, .elementor-element-2ebec2c .swiper-pagination, uix-slider:has(.milano-shopable-video__item) .swiper-pagination, .milano-shopable-video-carousel .swiper-pagination, #willie-recommends .swiper-pagination, .elementor-element-75ddddf .swiper-pagination { display: flex !important; visibility: visible !important; opacity: 1 !important; margin-top: 24px !important; } } /* Inactive Bullets (Highly Visible, Translucent White with Glow, No Tiny Black Dots) */ .elementor-widget-milano-shopable-video-carousel .swiper-pagination-bullet, .elementor-element-2ebec2c .swiper-pagination-bullet, uix-slider:has(.milano-shopable-video__item) .swiper-pagination-bullet, .milano-shopable-video-carousel .swiper-pagination-bullet { display: inline-block !important; width: 10px !important; height: 10px !important; min-width: 10px !important; min-height: 10px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.45) !important; border: 1.5px solid rgba(255, 255, 255, 0.65) !important; opacity: 1 !important; margin: 0 !important; padding: 0 !important; cursor: pointer !important; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 6px rgba(255, 255, 255, 0.25) !important; position: relative !important; outline: none !important; -webkit-tap-highlight-color: transparent !important; } /* Strip any theme pseudo-elements that render black 5px dot */ .elementor-widget-milano-shopable-video-carousel .swiper-pagination-bullet::before, .elementor-widget-milano-shopable-video-carousel .swiper-pagination-bullet::after, .elementor-element-2ebec2c .swiper-pagination-bullet::before, .elementor-element-2ebec2c .swiper-pagination-bullet::after, uix-slider:has(.milano-shopable-video__item) .swiper-pagination-bullet::before, uix-slider:has(.milano-shopable-video__item) .swiper-pagination-bullet::after, .milano-shopable-video-carousel .swiper-pagination-bullet::before, .milano-shopable-video-carousel .swiper-pagination-bullet::after { display: none !important; content: none !important; } /* Active Bullet: Expanding Glowing Cyan Capsule Pill */ .elementor-widget-milano-shopable-video-carousel .swiper-pagination-bullet-active, .elementor-element-2ebec2c .swiper-pagination-bullet-active, uix-slider:has(.milano-shopable-video__item) .swiper-pagination-bullet-active, .milano-shopable-video-carousel .swiper-pagination-bullet-active { width: 28px !important; height: 10px !important; border-radius: 9999px !important; background: #28D3EE !important; border: 1.5px solid #28D3EE !important; opacity: 1 !important; box-shadow: 0 0 16px rgba(40, 211, 238, 0.95), 0 0 6px #28D3EE !important; transform: scale(1.05) !important; } /* Hover on inactive bullet */ .elementor-widget-milano-shopable-video-carousel .swiper-pagination-bullet:hover:not(.swiper-pagination-bullet-active), .elementor-element-2ebec2c .swiper-pagination-bullet:hover:not(.swiper-pagination-bullet-active) { background: rgba(40, 211, 238, 0.8) !important; border-color: #28D3EE !important; transform: scale(1.25) !important; box-shadow: 0 0 10px rgba(40, 211, 238, 0.8) !important; } /* All Recommends Button */ .elementor-element-e19becd { text-align: center !important; margin-top: 45px !important; } .elementor-element-e19becd .elementor-button, .elementor-element-e19becd .e-button, .elementor-element-e19becd a { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.6rem !important; min-height: 54px !important; padding: 0 2.5rem !important; background: rgba(40, 211, 238, 0.08) !important; border: 1.5px solid #28D3EE !important; color: #ffffff !important; border-radius: 9999px !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 1.125rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; text-transform: uppercase !important; text-decoration: none !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } .elementor-element-e19becd .elementor-button:hover, .elementor-element-e19becd .e-button:hover, .elementor-element-e19becd a:hover { background: #28D3EE !important; color: #030712 !important; box-shadow: 0 0 25px rgba(40, 211, 238, 0.45) !important; transform: translateY(-2px) !important; } /* 4. Section 2: "THAILAND INSIGHTS" */ .elementor-element-9ed6dc4 { background-color: #030406 !important; padding: 85px 24px 95px !important; margin: 0 !important; } .elementor-element-1fed37a .elementor-heading-title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; color: #ffffff !important; font-size: clamp(2.2rem, 4vw, 2.8rem); font-weight: 700 !important; letter-spacing: -0.02em !important; text-transform: uppercase !important; text-align: center !important; margin-bottom: 2.5rem !important; } /* Override YouTube Feed cards to Dark Luxury Aesthetic with high specificity */ html body.home #sb_youtube_sbyUCYjzxbDOIstPOkxtu2TwmkA9[data-videostyle=boxed] .sby_items_wrap .sby_item .sby_inner_item, html body.home .sb_youtube[data-videostyle=boxed] .sby_items_wrap .sby_item .sby_inner_item, html body.home .elementor-element-9ed6dc4 .sby_inner_item, html body.home .elementor-element-9ed6dc4 .sby_item .sby_inner_item, .page-id-3190 .sb_youtube .sby_inner_item, .page-id-3190 .sb_youtube .sby_item .sby_inner_item, .fifty-jealous-page .sb_youtube .sby_inner_item, .fifty-jealous-page .sb_youtube .sby_item .sby_inner_item { background-color: #0b111e !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 18px !important; overflow: hidden !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45) !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease !important; display: flex !important; flex-direction: column !important; } html body.home .elementor-element-9ed6dc4 .sby_item:hover .sby_inner_item, .page-id-3190 .sb_youtube .sby_item:hover .sby_inner_item, .fifty-jealous-page .sb_youtube .sby_item:hover .sby_inner_item { transform: translateY(-5px) !important; border-color: rgba(40, 211, 238, 0.45) !important; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 24px rgba(40, 211, 238, 0.15) !important; } /* Card Info Container - Full width flex column (Fixes 3-column title squeeze bug) */ .sb_youtube .sby_info, .elementor-element-9ed6dc4 .sby_info, html body.home .elementor-element-9ed6dc4 .sby_info, .page-id-3190 .sb_youtube .sby_info, .fifty-jealous-page .sb_youtube .sby_info { display: flex !important; flex-direction: column !important; width: 100% !important; box-sizing: border-box !important; padding: 16px 20px 22px !important; gap: 8px !important; } .sb_youtube .sby_info_item, .elementor-element-9ed6dc4 .sby_info_item, html body.home .elementor-element-9ed6dc4 .sby_info_item, .page-id-3190 .sb_youtube .sby_info_item, .fifty-jealous-page .sb_youtube .sby_info_item { width: 100% !important; display: block !important; } /* ========================================================================== Smash Balloon Feeds for YouTube Pro Elite - Unified Sitewide Dark Luxury Standard ========================================================================== */ /* 1. Global Feed Cards & Typography */ .sb_youtube .sby_items_wrap, .elementor-element-9ed6dc4 .sb_youtube .sby_items_wrap, .page-id-3190 .sb_youtube .sby_items_wrap, .fifty-jealous-page .sb_youtube .sby_items_wrap { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 28px !important; padding: 12px 0 20px 0 !important; } @media (max-width: 900px) { .sb_youtube .sby_items_wrap, .elementor-element-9ed6dc4 .sb_youtube .sby_items_wrap, .page-id-3190 .sb_youtube .sby_items_wrap, .fifty-jealous-page .sb_youtube .sby_items_wrap { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; } } @media (max-width: 600px) { .sb_youtube .sby_items_wrap, .elementor-element-9ed6dc4 .sb_youtube .sby_items_wrap, .page-id-3190 .sb_youtube .sby_items_wrap, .fifty-jealous-page .sb_youtube .sby_items_wrap { grid-template-columns: 1fr !important; gap: 16px !important; } } .sb_youtube .sby_item .sby_inner_item, .elementor-element-9ed6dc4 .sb_youtube .sby_item .sby_inner_item, .page-id-3190 .sb_youtube .sby_item .sby_inner_item, .fifty-jealous-page .sb_youtube .sby_item .sby_inner_item { background-color: #0b111e !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; overflow: hidden !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease !important; } .sb_youtube .sby_item:hover .sby_inner_item, .elementor-element-9ed6dc4 .sb_youtube .sby_item:hover .sby_inner_item, .page-id-3190 .sb_youtube .sby_item:hover .sby_inner_item, .fifty-jealous-page .sb_youtube .sby_item:hover .sby_inner_item { border-color: rgba(40, 211, 238, 0.35) !important; transform: translateY(-4px) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important; } .sb_youtube .sby_video_thumbnail_wrap, .elementor-element-9ed6dc4 .sb_youtube .sby_video_thumbnail_wrap, .page-id-3190 .sb_youtube .sby_video_thumbnail_wrap, .fifty-jealous-page .sb_youtube .sby_video_thumbnail_wrap { border-radius: 16px 16px 0 0 !important; overflow: hidden !important; aspect-ratio: 16 / 9 !important; } .sb_youtube .sby-video-info-bottom, .sb_youtube .sby-video-info, .sb_youtube .sby_caption_wrap, .elementor-element-9ed6dc4 .sby_caption_wrap, .page-id-3190 .sb_youtube .sby_caption_wrap, .fifty-jealous-page .sb_youtube .sby_caption_wrap { background-color: #0b111e !important; color: #cbd5e1 !important; } /* High-contrast, legible Video Titles (Inclusive Typography) */ .sb_youtube .sby_video_title, html body.home .elementor-element-9ed6dc4 .sby_video_title, .page-id-3190 .elementor-element-9ed6dc4 .sby_video_title, .page-id-3190 .sb_youtube .sby_video_title, .fifty-jealous-page .sb_youtube .sby_video_title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; color: #ffffff !important; font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -0.015em !important; line-height: 1.4 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; transition: color 0.2s ease !important; } .sb_youtube .sby_item:hover .sby_video_title, html body.home .elementor-element-9ed6dc4 .sby_item:hover .sby_video_title, .page-id-3190 .elementor-element-9ed6dc4 .sby_item:hover .sby_video_title, .page-id-3190 .sb_youtube .sby_item:hover .sby_video_title, .fifty-jealous-page .sb_youtube .sby_item:hover .sby_video_title { color: #28D3EE !important; } /* Legible Meta Date & Views */ .sb_youtube .sby_date, .sb_youtube .sby_meta .sby_date, .sb_youtube .sby_meta .sby_view_count, html body.home .elementor-element-9ed6dc4 .sby_date, .page-id-3190 .sb_youtube .sby_date, .page-id-3190 .sb_youtube .sby_meta .sby_date, .page-id-3190 .sb_youtube .sby_meta .sby_view_count, .fifty-jealous-page .sb_youtube .sby_date, .fifty-jealous-page .sb_youtube .sby_meta .sby_date, .fifty-jealous-page .sb_youtube .sby_meta .sby_view_count { font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; color: #94a3b8 !important; font-size: 0.95rem !important; font-weight: 600 !important; letter-spacing: 0.02em !important; } /* Legible Secondary Caption */ .sb_youtube .sby_caption, html body.home .elementor-element-9ed6dc4 .sby_caption, .page-id-3190 .elementor-element-9ed6dc4 .sby_caption, .page-id-3190 .sb_youtube .sby_caption, .fifty-jealous-page .sb_youtube .sby_caption { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; color: #cbd5e1 !important; font-size: 1.05rem !important; line-height: 1.65 !important; } /* "Load More..." button styling */ .sb_youtube .sby_load_btn, .elementor-element-9ed6dc4 .sby_load_btn { min-height: 54px !important; padding: 0 2.5rem !important; background: rgba(40, 211, 238, 0.08) !important; border: 1.5px solid #28D3EE !important; color: #ffffff !important; border-radius: 9999px !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 1.125rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; text-transform: uppercase !important; cursor: pointer !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; margin: 45px auto 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important; } .sb_youtube .sby_load_btn:hover, .elementor-element-9ed6dc4 .sby_load_btn:hover { background: #28D3EE !important; color: #030712 !important; box-shadow: 0 0 25px rgba(40, 211, 238, 0.45) !important; transform: translateY(-2px) !important; } /* "Subscribe / Follow" button styling */ .sb_youtube .sby_follow_btn a, .elementor-element-9ed6dc4 .sb_youtube .sby_follow_btn a { min-height: 54px !important; padding: 0 2.5rem !important; background: #FF0000 !important; border: 1.5px solid #FF0000 !important; color: #ffffff !important; border-radius: 9999px !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 1.125rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; text-transform: uppercase !important; cursor: pointer !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 16px rgba(255, 0, 0, 0.35) !important; } .sb_youtube .sby_follow_btn a:hover, .elementor-element-9ed6dc4 .sb_youtube .sby_follow_btn a:hover { background: #dc2626 !important; transform: translateY(-2px) !important; box-shadow: 0 0 25px rgba(255, 0, 0, 0.5) !important; } /* 2. Lightbox Popup Modal Styling (Eliminates White Clash, Services Standard) */ #sby_lightbox, .sby_lightbox, .sby_lb-dataContainer { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; } .sby_lb-caption { background-color: #0b111e !important; border: 1px solid rgba(40, 211, 238, 0.25) !important; border-radius: 0 0 16px 16px !important; color: #cbd5e1 !important; padding: 24px 28px !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75) !important; } .sby_lb-video-heading { border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; padding-bottom: 16px !important; margin-bottom: 18px !important; } .sby_lb-video-heading h3 { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; color: #ffffff !important; font-size: 1.35rem !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: -0.015em !important; text-transform: uppercase !important; } .sby_lb-video-info, .sby_lb-video-info span { font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 0.95rem !important; font-weight: 600 !important; color: #28D3EE !important; letter-spacing: 0.04em !important; } .sby-lb-channel-header { top: 24px !important; right: 28px !important; } .sby-lb-channel-name-with-subs span:first-child { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; color: #ffffff !important; font-weight: 600 !important; font-size: 0.95rem !important; } .sby-lb-channel-name-with-subs span:nth-child(2) { font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; color: #94A3B8 !important; font-size: 0.85rem !important; font-weight: 500 !important; } /* YouTube Lightbox Header and Subscribe Button - Guaranteed strictly 1-line on mobile & desktop */ #sby_lightbox .sby-lb-channel-header, .sby-lb-channel-header { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 12px !important; max-width: 100% !important; } #sby_lightbox .sby-channel-subscribe-btn, #sby_lightbox .sby-lb-subscribe-btn, .sby-channel-subscribe-btn, .sby-lb-subscribe-btn, .sby-channel-subscribe-btn a, #sby_lightbox .sby-channel-subscribe-btn a { background: #FF0000 !important; color: #ffffff !important; border-radius: 9999px !important; font-family: 'Outfit', sans-serif !important; font-size: 0.875rem !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; padding: 8px 14px !important; box-shadow: 0 4px 14px rgba(255, 0, 0, 0.35) !important; transition: all 0.2s ease !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; word-break: keep-all !important; overflow-wrap: normal !important; gap: 6px !important; width: auto !important; min-width: max-content !important; min-height: 36px !important; text-decoration: none !important; } #sby_lightbox .sby-channel-subscribe-btn:hover, #sby_lightbox .sby-lb-subscribe-btn:hover, .sby-channel-subscribe-btn:hover, .sby-lb-subscribe-btn:hover, .sby-channel-subscribe-btn a:hover, #sby_lightbox .sby-channel-subscribe-btn a:hover { background: #dc2626 !important; color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(255, 0, 0, 0.5) !important; } #sby_lightbox .sby-channel-subscribe-btn svg, #sby_lightbox .sby-lb-subscribe-btn svg, .sby-channel-subscribe-btn svg { flex-shrink: 0 !important; display: inline-block !important; vertical-align: middle !important; margin: 0 !important; } .sby_lb-description { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 1.05rem !important; line-height: 1.68 !important; color: #cbd5e1 !important; } .sby_lb-description a { color: #28D3EE !important; text-decoration: underline !important; } .sby_lb-more-info-btn { background: rgba(40, 211, 238, 0.1) !important; border: 1px solid rgba(40, 211, 238, 0.3) !important; color: #28D3EE !important; font-family: 'Outfit', sans-serif !important; font-size: 0.95rem !important; font-weight: 600 !important; border-radius: 9999px !important; padding: 6px 16px !important; transition: all 0.2s ease !important; } .sby_lb-more-info-btn:hover { background: rgba(40, 211, 238, 0.2) !important; color: #67E8F9 !important; } .sby-comments-wrap h4.sby-comments-sub-heading { font-family: 'Outfit', sans-serif !important; color: #ffffff !important; font-weight: 700 !important; font-size: 1.15rem !important; letter-spacing: -0.01em !important; } .sby-comment-user-name { font-family: 'Outfit', sans-serif !important; color: #28D3EE !important; font-weight: 600 !important; } .sby-comment p { font-family: 'Outfit', sans-serif !important; color: #cbd5e1 !important; font-size: 1rem !important; line-height: 1.6 !important; } /* 5. Section 3: "ABOUT ME" Fixes */ .elementor-element-6dd98ba { background-color: #030406 !important; border-top: 1px solid rgba(255, 255, 255, 0.06); margin-top: 0 !important; } .elementor-element-fc4f958 .elementor-heading-title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; color: #ffffff !important; font-size: clamp(2.2rem, 4vw, 2.8rem); font-weight: 700 !important; letter-spacing: -0.02em !important; text-transform: uppercase !important; text-align: center !important; } /* ========================================================================== ABOUT ME / WILLIE THAILAND UNIFIED SECTION ========================================================================== */ .es-unified-wrapper { --es-cyan: #28D3EE; --es-orange: #FF6B4A; --es-white: #ffffff; --es-bg: #030406; --es-text: #cbd5e1; --es-text-muted: #94a3b8; background-color: var(--es-bg) !important; color: var(--es-text) !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; width: 100% !important; overflow: hidden !important; padding: 3.5rem 1.5rem 5.5rem !important; box-sizing: border-box !important; } .es-unified-wrapper *, .es-unified-wrapper *::before, .es-unified-wrapper *::after { box-sizing: border-box !important; } .es-unified-wrapper .es-container { max-width: 1200px !important; margin: 0 auto !important; width: 100% !important; } .es-unified-wrapper .es-grid-layout { display: grid !important; grid-template-columns: 1.15fr 0.85fr !important; gap: 4.5rem !important; align-items: center !important; } .es-unified-wrapper .es-left-col { text-align: left !important; } .es-unified-wrapper .es-story-lead { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: clamp(1.65rem, 2.3vw, 2.15rem) !important; font-weight: 700 !important; color: var(--es-white) !important; line-height: 1.35 !important; letter-spacing: -0.02em !important; text-transform: none !important; margin: 0 0 1.25rem 0 !important; text-rendering: optimizeLegibility !important; } .es-unified-wrapper .es-story-sublead { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: clamp(1.1rem, 1.4vw, 1.25rem) !important; font-weight: 500 !important; color: #e2e8f0 !important; line-height: 1.7 !important; margin: 0 0 1.5rem 0 !important; } .es-unified-wrapper .es-fifty-coral { color: var(--es-orange) !important; font-weight: 800 !important; text-shadow: 0 2px 14px rgba(255, 107, 74, 0.28) !important; } .es-unified-wrapper .es-story-card { background: linear-gradient(145deg, rgba(255, 255, 255, 0.038) 0%, rgba(255, 255, 255, 0.015) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important; border-radius: 18px !important; padding: 1.4rem 1.85rem !important; margin: 1.65rem 0 !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important; } .es-unified-wrapper .es-story-card:hover { border-color: rgba(40, 211, 238, 0.3) !important; transform: translateY(-2px) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; } .es-unified-wrapper .es-story-card p { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; margin: 0 !important; color: #f8fafc !important; font-size: clamp(1.08rem, 1.35vw, 1.2rem) !important; font-weight: 450 !important; line-height: 1.75 !important; } .es-unified-wrapper .es-story-card .es-brand-fifty { color: var(--es-white) !important; font-weight: 800 !important; letter-spacing: normal !important; } .es-unified-wrapper .es-story-body { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: clamp(1.05rem, 1.3vw, 1.15rem) !important; font-weight: 400 !important; color: var(--es-text) !important; line-height: 1.8 !important; margin: 0 0 1.5rem 0 !important; } .es-unified-wrapper .es-story-climax { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: clamp(1.12rem, 1.45vw, 1.28rem) !important; font-weight: 600 !important; color: var(--es-white) !important; line-height: 1.65 !important; letter-spacing: -0.01em !important; margin: 0 0 2rem 0 !important; } .es-unified-wrapper .es-tagline-wrapper { margin-top: 2rem !important; } .es-unified-wrapper .es-tagline-badge { display: inline-flex !important; align-items: center !important; gap: 10px !important; background: rgba(40, 211, 238, 0.06) !important; border: 1px solid rgba(40, 211, 238, 0.24) !important; padding: 10px 22px !important; border-radius: 9999px !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } .es-unified-wrapper .es-tagline-badge:hover { background: rgba(40, 211, 238, 0.12) !important; border-color: rgba(40, 211, 238, 0.45) !important; box-shadow: 0 6px 24px rgba(40, 211, 238, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; transform: translateY(-1px) !important; } .es-unified-wrapper .es-tagline-dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: var(--es-cyan) !important; box-shadow: 0 0 10px var(--es-cyan), 0 0 4px var(--es-cyan) !important; display: inline-block !important; flex-shrink: 0 !important; animation: es-tagline-pulse 2.5s ease-in-out infinite !important; } @keyframes es-tagline-pulse { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); box-shadow: 0 0 14px var(--es-cyan), 0 0 6px var(--es-cyan); } } .es-unified-wrapper .es-tagline-text { color: var(--es-cyan) !important; font-size: 0.92rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; line-height: 1 !important; } .es-unified-wrapper .es-right-col { display: flex !important; justify-content: center !important; align-items: center !important; } .es-unified-wrapper .es-profile-wrapper { display: flex !important; flex-direction: column !important; align-items: center !important; position: relative !important; border-radius: 24px !important; width: 100% !important; max-width: 440px !important; } .es-unified-wrapper .es-profile-glow { position: absolute !important; inset: -20px !important; background: radial-gradient(circle, rgba(40, 211, 238, 0.13) 0%, transparent 70%) !important; z-index: 1 !important; animation: pulseGlow 6s ease-in-out infinite alternate !important; pointer-events: none !important; } @keyframes pulseGlow { 0% { opacity: 0.45; transform: scale(0.96); } 100% { opacity: 1; transform: scale(1.04); } } .es-unified-wrapper .es-profile-wrapper img { width: 100% !important; height: auto !important; aspect-ratio: 660 / 707 !important; display: block !important; border-radius: 24px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.75), 0 0 25px rgba(40, 211, 238, 0.06) !important; z-index: 5 !important; position: relative !important; } @media (max-width: 992px) { .es-unified-wrapper { padding: 2.5rem 1.25rem 3.5rem !important; } .es-unified-wrapper .es-grid-layout { display: flex !important; flex-direction: column !important; gap: 2.25rem !important; align-items: center !important; } .es-unified-wrapper .es-right-col { order: -1 !important; width: 100% !important; display: flex !important; justify-content: center !important; } .es-unified-wrapper .es-left-col { order: 1 !important; width: 100% !important; text-align: left !important; } .es-unified-wrapper .es-profile-wrapper { width: 100% !important; max-width: min(100%, 420px) !important; margin: 0 auto !important; } .es-unified-wrapper .es-profile-wrapper img { width: 100% !important; height: auto !important; aspect-ratio: 660 / 707 !important; object-fit: cover !important; border-radius: 20px !important; } .es-unified-wrapper .es-story-lead { font-size: 1.45rem !important; line-height: 1.35 !important; margin-bottom: 1rem !important; } .es-unified-wrapper .es-story-sublead { font-size: 1.05rem !important; line-height: 1.65 !important; margin-bottom: 1.25rem !important; } .es-unified-wrapper .es-story-card { padding: 1.15rem 1.35rem !important; margin: 1.25rem 0 !important; border-radius: 14px !important; } .es-unified-wrapper .es-story-card p { font-size: 1.02rem !important; line-height: 1.68 !important; } .es-unified-wrapper .es-story-body { font-size: 1.02rem !important; line-height: 1.68 !important; margin-bottom: 1.25rem !important; } .es-unified-wrapper .es-story-climax { font-size: 1.06rem !important; line-height: 1.6 !important; margin-bottom: 1.5rem !important; } .es-unified-wrapper .es-tagline-wrapper { margin-top: 1.5rem !important; } .es-unified-wrapper .es-tagline-badge { padding: 8px 16px !important; } .es-unified-wrapper .es-tagline-text { font-size: 0.76rem !important; letter-spacing: 0.05em !important; line-height: 1.3 !important; } } /* Tablet About Me: pair the portrait with the story instead of isolating it above the copy. */ @media (min-width: 768px) and (max-width: 992px) { .es-unified-wrapper { padding: 3rem clamp(1.75rem, 4vw, 2.5rem) 4rem !important; } .es-unified-wrapper .es-grid-layout { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr) !important; gap: clamp(1.5rem, 3vw, 2.25rem) !important; align-items: start !important; } .es-unified-wrapper .es-left-col, .es-unified-wrapper .es-right-col { order: 0 !important; width: auto !important; } .es-unified-wrapper .es-right-col { justify-content: flex-end !important; } .es-unified-wrapper .es-profile-wrapper { max-width: 420px !important; } } @media (prefers-reduced-motion: reduce) { .es-unified-wrapper .es-profile-glow, .es-unified-wrapper .es-tagline-dot { animation: none !important; } .fifty-masonry-card, .fifty-masonry-card img, .elementor-element-75ddddf .milano-shopable-video__item, .elementor-element-75ddddf .milano-shopable-video__media video, .fifty-masonry-card::before, .elementor-element-75ddddf .milano-shopable-video__item::before { transition: none !important; transform: none !important; } } /* ========================================================================== MOBILE MENU DRAWER - DARK LUXURY HARMONIZATION - Seamless Obsidian Dark Background (#05080d / #030406) - High-Contrast Inclusive Typography (18px-19px, WCAG AAA) - Large Effortless Tap Targets (>= 56px min-height) - Luminous Cyan (#28D3EE) Accents & Active States - Polished Category Cards with Vivid Rounded Images ========================================================================== */ /* 1. Drawer Backdrop & Container */ .drawer-backdrop { background-color: rgba(3, 4, 6, 0.8) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } #mobile-menu-drawer.mobile-menu-drawer, #mobile-menu-drawer .drawer-content, #mobile-menu-drawer .drawer-body { background-color: #05080d !important; color: #f1f5f9 !important; border-right: 1px solid rgba(255, 255, 255, 0.08) !important; } /* Keep the mobile drawer above the sticky site header, including its logo. */ uix-drawer#mobile-menu-drawer.mobile-menu-drawer { position: fixed !important; inset-block: 0 !important; height: 100vh !important; height: 100dvh !important; z-index: 100001 !important; } /* 2. Drawer Header & Tabs */ #mobile-menu-drawer .drawer-header { background-color: #030406 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; padding: 16px 20px !important; min-height: 64px !important; } #mobile-menu-drawer .mobile-menu-tabs { gap: 24px !important; min-width: 0 !important; } #mobile-menu-drawer .mobile-menu-tab { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 1.15rem !important; font-weight: 500 !important; color: #94a3b8 !important; opacity: 1 !important; padding-bottom: 6px !important; position: relative !important; cursor: pointer !important; transition: color 0.25s ease !important; white-space: nowrap !important; } @media (max-width: 480px) { #mobile-menu-drawer .drawer-header { padding-right: 64px !important; } #mobile-menu-drawer .mobile-menu-tabs { gap: 10px !important; } #mobile-menu-drawer .mobile-menu-tab { font-size: 18px !important; } } @media (max-width: 767px) { #mobile-menu-drawer .mobile-menu-tab { text-transform: uppercase !important; } } #mobile-menu-drawer .mobile-menu-tab.is-active { color: #28D3EE !important; font-weight: 600 !important; } #mobile-menu-drawer .mobile-menu-tab.is-active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2.5px; background: #28D3EE; border-radius: 9999px; box-shadow: 0 0 10px rgba(40, 211, 238, 0.6); } #mobile-menu-drawer .drawer-close { width: 44px !important; height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(255, 255, 255, 0.06) !important; border-radius: 50% !important; color: #ffffff !important; transition: all 0.25s ease !important; } #mobile-menu-drawer .drawer-close:hover, #mobile-menu-drawer .drawer-close:active { background: rgba(40, 211, 238, 0.2) !important; color: #28D3EE !important; } /* 3. Main Navigation Links (Inclusive, Large 18.5px, 56px Tap Target) */ #mobile-menu-drawer .drawer-body { padding: 16px 20px 32px !important; } #mobile-menu-drawer .menu.slide-menu { margin: 0 !important; padding: 0 !important; } #mobile-menu-drawer .menu.slide-menu > li { margin: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; } #mobile-menu-drawer .menu.slide-menu > li > a { display: flex !important; align-items: center !important; min-height: 58px !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 1.15rem !important; font-weight: 500 !important; color: #ffffff !important; text-decoration: none !important; padding: 0 12px !important; border-radius: 10px !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } #mobile-menu-drawer .menu.slide-menu > li > a:hover, #mobile-menu-drawer .menu.slide-menu > li > a:active { background: rgba(40, 211, 238, 0.08) !important; color: #28D3EE !important; padding-left: 18px !important; } /* Active current menu item */ #mobile-menu-drawer .menu.slide-menu > li.current-menu-item > a, #mobile-menu-drawer .menu.slide-menu > li.current-page-item > a { color: #28D3EE !important; font-weight: 600 !important; background: rgba(40, 211, 238, 0.06) !important; position: relative !important; } #mobile-menu-drawer .menu.slide-menu > li.current-menu-item > a::before, #mobile-menu-drawer .menu.slide-menu > li.current-page-item > a::before { content: ''; width: 4px; height: 24px; background: #28D3EE; border-radius: 9999px; margin-right: 12px; box-shadow: 0 0 8px rgba(40, 211, 238, 0.6); } /* Muted secondary links (Terms, Privacy) */ #mobile-menu-drawer .menu.slide-menu > li.menu-item-terms > a, #mobile-menu-drawer .menu.slide-menu > li.menu-item-privacy > a { font-size: 0.95rem !important; color: #94a3b8 !important; min-height: 48px !important; } /* 4. Secondary Action Rows (Hide Wishlist permanently & style Login) */ #mobile-menu-drawer .mobile-menu-element--wishlist, .mobile-menu-element--wishlist, .component-wishlist, .header-wishlist, .product-wishlist-button, .wcboost-wishlist-button, .wcboost-wishlist-single-button { display: none !important; } #mobile-menu-drawer .mobile-menu-element--login { border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; } #mobile-menu-drawer .mobile-menu-wishlist__link, #mobile-menu-drawer .mobile-menu-login__link { min-height: 56px !important; display: flex !important; align-items: center !important; gap: 14px !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 1.05rem !important; font-weight: 500 !important; color: #cbd5e1 !important; padding: 0 12px !important; border-radius: 10px !important; border-bottom: none !important; transition: all 0.2s ease !important; } #mobile-menu-drawer .mobile-menu-wishlist__link svg { color: #28D3EE !important; fill: #28D3EE !important; stroke: none !important; } #mobile-menu-drawer .mobile-menu-login__link svg { color: #28D3EE !important; fill: none !important; stroke: #28D3EE !important; } #mobile-menu-drawer .mobile-menu-wishlist__link:hover, #mobile-menu-drawer .mobile-menu-login__link:hover, #mobile-menu-drawer .mobile-menu-wishlist__link:active, #mobile-menu-drawer .mobile-menu-login__link:active { background: rgba(40, 211, 238, 0.08) !important; color: #ffffff !important; } /* 5. Categories Tab Styling */ #mobile-menu-categories .category-menu ul.slide-menu > li { border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; margin: 0 !important; } #mobile-menu-categories .category-menu ul.slide-menu > li > a { display: flex !important; align-items: center !important; gap: 16px !important; min-height: 64px !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 1.1rem !important; font-weight: 500 !important; color: #ffffff !important; padding: 8px 12px !important; border-radius: 12px !important; transition: all 0.2s ease !important; text-decoration: none !important; } #mobile-menu-categories .category-menu ul.slide-menu > li > a:hover, #mobile-menu-categories .category-menu ul.slide-menu > li > a:active { background: rgba(40, 211, 238, 0.08) !important; color: #28D3EE !important; } #mobile-menu-categories .category-image { width: 44px !important; height: 44px !important; border-radius: 10px !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; object-fit: cover !important; flex-shrink: 0 !important; } /* ========================================================================== IMPECCABLE GLOBAL THEME DESIGN SYSTEM (Dark Luxury & Universal Accessibility) Governs: Global Surfaces, Login/Register, My Account, WooCommerce & Core Forms ========================================================================== */ /* 1. Global Custom Properties & Canvas Reset */ :root, .color-default { --color-background: #030406; --color-text: #E2E8F0; --color-heading: #FFFFFF; --color-link: #28D3EE; --color-link-hover: #67E8F9; --color-border: rgba(255, 255, 255, 0.08); --color-primary: #28D3EE; --btn-primary-bg-color: #28D3EE; --btn-primary-color: #030406; --btn-primary-hover-bg-color: #67E8F9; --btn-primary-hover-color: #030406; --btn-radius: 12px; --rounded-radius: 16px; --input-border-radius: 12px; --body-font: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; --body-font-size: 18px; --heading-font: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; --heading-font-weight: 600; --heading-letter-spacing: 0.5px; } html, body, #page, .site-content, .content-area, main, .site-main { background-color: #030406 !important; color: #E2E8F0 !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 18px !important; line-height: 1.6 !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Impeccable Browser Surfaces (Selection, Caret, Scrollbars, Focus) */ ::selection { background: rgba(40, 211, 238, 0.35) !important; color: #FFFFFF !important; } :focus-visible { outline: 2px solid #28D3EE !important; outline-offset: 3px !important; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #030406; } ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 9999px; border: 2px solid #030406; } ::-webkit-scrollbar-thumb:hover { background: #28D3EE; } /* 2. Global Page Headers, Static Headers & Breadcrumbs */ .page-header, .shop-header, .static-page-header, .entry-header { background: linear-gradient(180deg, #05080d 0%, #030406 100%) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; padding: 3rem 1.5rem 2.5rem !important; text-align: center !important; } .page-title, .entry-title, .shop-header .page-title, .static-page-header .page-title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: clamp(2rem, 4vw, 2.75rem) !important; font-weight: 700 !important; color: #FFFFFF !important; letter-spacing: -0.02em !important; margin-bottom: 0.75rem !important; text-transform: uppercase !important; } /* Header Eyebrows (Dark Luxury Services Standard) */ .woocommerce-cart .page-header::before, .woocommerce-checkout .page-header::before, .woocommerce-account .page-header::before, .page-id-13 .page-header::before, .page-id-14 .page-header::before, .page-id-70 .page-header::before, .page-id-1341 .page-header::before { display: block !important; font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 19.8px !important; font-weight: 600 !important; letter-spacing: 2.4px !important; text-transform: uppercase !important; color: #28D3EE !important; margin-bottom: 0.75rem !important; } .shop-header::before, .post-type-archive-product .page-header::before { display: none !important; content: none !important; } .woocommerce-cart .page-header::before { content: "YOUR SELECTION" !important; } .woocommerce-checkout .page-header::before { content: "SECURE CHECKOUT" !important; } .woocommerce-account .page-header::before { content: "MEMBER DASHBOARD" !important; } .page-id-13 .page-header::before { content: "SAVED ITEMS" !important; } .page-id-14 .page-header::before { content: "PRODUCT COMPARISON" !important; } .page-id-70 .page-header::before { content: "SPECIAL OFFERS" !important; } .page-id-1341 .page-header::before { content: "PRODUCT COLLECTIONS" !important; } .breadcrumbs, .woocommerce-breadcrumb { font-family: 'Outfit', sans-serif !important; font-size: 15px !important; color: #94A3B8 !important; margin-bottom: 0.5rem !important; } .breadcrumbs a, .woocommerce-breadcrumb a { color: #CBD5E1 !important; text-decoration: none !important; transition: color 0.2s ease !important; } .breadcrumbs a:hover, .woocommerce-breadcrumb a:hover { color: #28D3EE !important; } @media (max-width: 767px) { .page-header, .shop-header, .static-page-header, .entry-header { padding: 1.5rem 1rem 1.15rem !important; min-height: auto !important; height: auto !important; } .page-header .container, .page-header .py-8 { padding-top: 0 !important; padding-bottom: 0 !important; } .woocommerce-cart .page-header::before, .woocommerce-checkout .page-header::before, .woocommerce-account .page-header::before, .page-id-13 .page-header::before, .page-id-14 .page-header::before, .page-id-70 .page-header::before, .page-id-1341 .page-header::before { font-size: 16px !important; letter-spacing: 1.8px !important; margin-bottom: 0.5rem !important; } .page-title, .entry-title, .shop-header .page-title, .static-page-header .page-title { font-size: 1.75rem !important; margin-bottom: 0.25rem !important; } .breadcrumbs, .woocommerce-breadcrumb { font-size: 13px !important; margin-bottom: 0.25rem !important; } } /* 3. Universal Form Fields & Inputs (Inclusive Large Typography & Touch Targets) */ .woocommerce form .form-row, form .form-row { margin-bottom: 1.5rem !important; } .woocommerce form label, form label { font-family: 'Outfit', sans-serif !important; font-size: 1.05rem !important; /* ~17px */ font-weight: 500 !important; color: #F1F5F9 !important; margin-bottom: 0.5rem !important; display: inline-block !important; } .woocommerce form label .required, form label .required { color: #28D3EE !important; text-decoration: none !important; } .woocommerce-Input, input[type="text"]:not([class*="wc-block-"]), input[type="email"]:not([class*="wc-block-"]), input[type="password"], input[type="tel"]:not([class*="wc-block-"]), input[type="number"]:not([class*="wc-block-"]), input[type="url"], select:not([class*="wc-block-"]), textarea:not([class*="wc-block-"]) { height: 56px !important; min-height: 56px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 12px !important; color: #FFFFFF !important; font-size: 1.125rem !important; /* 18px */ font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; padding: 0 18px !important; width: 100% !important; box-sizing: border-box !important; transition: all 0.2s ease !important; } textarea:not([class*="wc-block-"]) { height: auto !important; min-height: 130px !important; padding: 16px 18px !important; line-height: 1.5 !important; } .woocommerce-Input:focus, input[type="text"]:not([class*="wc-block-"]):focus, input[type="email"]:not([class*="wc-block-"]):focus, input[type="password"]:focus, input[type="tel"]:not([class*="wc-block-"]):focus, input[type="number"]:not([class*="wc-block-"]):focus, select:not([class*="wc-block-"]):focus, textarea:not([class*="wc-block-"]):focus { background: rgba(255, 255, 255, 0.08) !important; border-color: #28D3EE !important; box-shadow: 0 0 0 3px rgba(40, 211, 238, 0.25) !important; outline: none !important; color: #FFFFFF !important; } /* Universal WooCommerce Primary Action Buttons */ .woocommerce button.single_add_to_cart_button, .woocommerce button[name="add-to-cart"], .woocommerce a.button.add_to_cart_button, .woocommerce a.checkout-button, .woocommerce #place_order, .woocommerce .woocommerce-form-login__submit, .woocommerce .woocommerce-form-register__submit, .woocommerce .woocommerce-ResetPassword .woocommerce-Button, .woocommerce #respond input#submit, .woocommerce .woocommerce-button, .woocommerce .wishlist-empty-wrap .button, .woocommerce .return-to-shop .button, .woocommerce .cart-collaterals .checkout-button, .woocommerce-cart .wc-proceed-to-checkout .checkout-button { min-height: 54px !important; background: #28D3EE !important; color: #030406 !important; font-family: 'Outfit', sans-serif !important; font-size: 1.125rem !important; /* 18px */ font-weight: 700 !important; border-radius: 12px !important; border: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 28px !important; cursor: pointer !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; text-decoration: none !important; box-shadow: 0 4px 16px rgba(40, 211, 238, 0.3) !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; } .woocommerce button.single_add_to_cart_button:hover, .woocommerce button[name="add-to-cart"]:hover, .woocommerce a.button.add_to_cart_button:hover, .woocommerce a.checkout-button:hover, .woocommerce #place_order:hover, .woocommerce .woocommerce-form-login__submit:hover, .woocommerce .woocommerce-form-register__submit:hover, .woocommerce .woocommerce-ResetPassword .woocommerce-Button:hover, .woocommerce #respond input#submit:hover, .woocommerce .woocommerce-button:hover, .woocommerce .wishlist-empty-wrap .button:hover, .woocommerce .return-to-shop .button:hover, .woocommerce .cart-collaterals .checkout-button:hover, .woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover { background: #67E8F9 !important; color: #030406 !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(40, 211, 238, 0.45) !important; } /* Secondary / Utility Buttons in Forms (Coupon, Update Cart) */ .woocommerce button[name="apply_coupon"], .woocommerce button[name="update_cart"] { min-height: 48px !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #FFFFFF !important; border-radius: 10px !important; padding: 0 20px !important; font-family: 'Outfit', sans-serif !important; font-size: 1rem !important; font-weight: 600 !important; transition: all 0.2s ease !important; } .woocommerce button[name="apply_coupon"]:hover, .woocommerce button[name="update_cart"]:hover { background: rgba(40, 211, 238, 0.15) !important; border-color: #28D3EE !important; color: #28D3EE !important; } /* Comprehensive Resets for Header, Drawer, Modal, and Utility Buttons on All Pages (Including WooCommerce) */ html body .site-header button, html body .site-header .button, html body .site-header .component-search__toggle, html body .site-header .component-hamburger__toggle, html body .site-header .mobile-menu-toggle, html body .header-mobile button, html body .header-mobile .button, html body .header-desktop button, html body .header-desktop .button, html body .component-account__link, html body .button--icon, html body .button--none, html body .button-action, html body .button-reset, html body.woocommerce .site-header button, html body.woocommerce .site-header .button, html body.woocommerce .header-mobile button, html body.woocommerce .header-mobile .button, html body.woocommerce .header-desktop button, html body.woocommerce .header-desktop .button, html body.woocommerce .component-search__toggle, html body.woocommerce .component-hamburger__toggle, html body.woocommerce .component-account__link, html body.woocommerce .button--icon, html body.woocommerce .button--none, html body.woocommerce .button-action, html body.woocommerce .button-reset, html body.woocommerce .woosw-btn, html body.woocommerce .woosc-btn, html body.woocommerce .wcboost-products-compare-button, html body.woocommerce .wcboost-wishlist-button, html body.woocommerce .product-gallery__trigger, html body.woocommerce .woocommerce-product-gallery__trigger { min-height: unset !important; height: auto !important; background: transparent !important; color: #FFFFFF !important; border: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; width: auto !important; transform: none !important; } html body .site-header button:hover, html body .site-header .button:hover, html body .site-header .component-search__toggle:hover, html body .site-header .component-hamburger__toggle:hover, html body .header-mobile button:hover, html body .header-mobile .button:hover, html body .header-desktop button:hover, html body .header-desktop .button:hover, html body .component-account__link:hover, html body.woocommerce .site-header button:hover, html body.woocommerce .site-header .button:hover, html body.woocommerce .header-mobile button:hover, html body.woocommerce .header-mobile .button:hover, html body.woocommerce .header-desktop button:hover, html body.woocommerce .header-desktop .button:hover, html body.woocommerce .component-search__toggle:hover, html body.woocommerce .component-hamburger__toggle:hover, html body.woocommerce .component-account__link:hover { background: transparent !important; color: #28D3EE !important; transform: none !important; box-shadow: none !important; } html body .site-header button svg, html body .site-header .button svg, html body .site-header .icon-search, html body .site-header .icon-account, html body .site-header .icon-menu, html body .site-header .icon-open-drawer, html body.woocommerce .site-header button svg, html body.woocommerce .site-header .button svg, html body.woocommerce .site-header .icon-search, html body.woocommerce .site-header .icon-account, html body.woocommerce .site-header .icon-menu, html body.woocommerce .site-header .icon-open-drawer { color: #FFFFFF !important; fill: currentColor !important; } /* Single product navigation (< and >) - sleek dark rounded buttons */ html body.woocommerce .product-navigation .product-navigation__link { width: 36px !important; height: 36px !important; min-height: 36px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #FFFFFF !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all 0.25s ease !important; } html body.woocommerce .product-navigation .product-navigation__link:hover { background: #28D3EE !important; border-color: #28D3EE !important; color: #030406 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(40, 211, 238, 0.4) !important; } /* Category grid columns switcher buttons - sleek, compact dark buttons with cyan active state */ html body.woocommerce .shop-columns-switcher__btn { width: 38px !important; height: 38px !important; min-height: 38px !important; border-radius: 10px !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: #94A3B8 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; transition: all 0.25s ease !important; } html body.woocommerce .shop-columns-switcher__btn:hover, html body.woocommerce .shop-columns-switcher__btn.is-active, html body.woocommerce .shop-columns-switcher__btn.active { background: rgba(40, 211, 238, 0.18) !important; border-color: #28D3EE !important; color: #28D3EE !important; transform: translateY(-1px) !important; box-shadow: 0 0 14px rgba(40, 211, 238, 0.25) !important; } /* Sort By Disclosure Dropdown */ html body.woocommerce .disclosure__button { height: 38px !important; min-height: 38px !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 10px !important; color: #FFFFFF !important; padding: 0 16px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: 'Outfit', sans-serif !important; font-size: 0.95rem !important; font-weight: 600 !important; } /* Filter active tag badge - Dark luxury styling (no white clash) */ html body.woocommerce .shop-activated-filters, html body.woocommerce .shop-activated-filters a, html body.woocommerce .shop-activated-filters span, html body.woocommerce [data-facets-activated-filters] a { background: rgba(40, 211, 238, 0.1) !important; border: 1px solid rgba(40, 211, 238, 0.3) !important; color: #28D3EE !important; border-radius: 8px !important; padding: 6px 14px !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 0.9rem !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } /* Single product Wishlist heart icon */ html body.woocommerce .single-product .woosw-btn, html body.woocommerce .single-product .product-wishlist-button, html body.woocommerce .single-product .card-action { width: 42px !important; height: 42px !important; min-height: 42px !important; background: rgba(11, 17, 30, 0.8) !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 50% !important; color: #FFFFFF !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all 0.25s ease !important; } html body.woocommerce .single-product .woosw-btn:hover { border-color: #28D3EE !important; color: #28D3EE !important; transform: scale(1.08) !important; } /* Hide standard page title on Home, Checkout, Protocol Pages & Pages with custom Hero */ .home .entry-header, .home .page-header, .woocommerce-checkout .entry-header, .woocommerce-checkout .page-header, .page-id-90 .entry-header, .page-id-90 .page-header, .page-id-3127 .entry-header, .page-id-3149 .entry-header, .page-id-3151 .entry-header, .page-id-3153 .entry-header, .page-id-3190 .entry-header { display: none !important; } /* Checkboxes & Radios */ .woocommerce-form__label-for-checkbox { display: flex !important; align-items: center !important; gap: 12px !important; font-size: 1.05rem !important; color: #CBD5E1 !important; cursor: pointer !important; margin: 1.25rem 0 !important; } .woocommerce-form__input-checkbox, input[type="checkbox"] { width: 20px !important; height: 20px !important; min-height: 20px !important; accent-color: #28D3EE !important; border-radius: 6px !important; cursor: pointer !important; flex-shrink: 0 !important; } input[type="radio"] { width: 20px !important; height: 20px !important; min-height: 20px !important; accent-color: #28D3EE !important; border-radius: 50% !important; cursor: pointer !important; flex-shrink: 0 !important; } /* 4. Login, Registration & Password Reset Cards (.woocommerce-account) */ .woocommerce-account .woocommerce { max-width: 680px !important; margin: 3rem auto !important; padding: 0 1.25rem !important; } .woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword { background: rgba(12, 18, 30, 0.85) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 20px !important; padding: 2.75rem 2.25rem !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important; } .woocommerce-form-login h2, .woocommerce-form-register h2, #customer_login h2 { font-family: 'Outfit', sans-serif !important; font-size: 1.85rem !important; font-weight: 700 !important; color: #FFFFFF !important; margin-bottom: 1.75rem !important; letter-spacing: -0.01em !important; text-transform: none !important; } .woocommerce-form-login .woocommerce-button, .woocommerce-form-register .woocommerce-button { width: 100% !important; margin-top: 0.5rem !important; } .woocommerce-LostPassword { margin-top: 1.25rem !important; text-align: center !important; } .woocommerce-LostPassword a { color: #28D3EE !important; font-size: 1.05rem !important; text-decoration: none !important; font-weight: 500 !important; transition: all 0.2s ease !important; } .woocommerce-LostPassword a:hover { color: #67E8F9 !important; text-decoration: underline !important; } /* Two-column Login & Register Split (if enabled) */ .u-columns.col2-set { display: flex !important; gap: 2rem !important; max-width: 1100px !important; margin: 0 auto !important; } @media (max-width: 768px) { .u-columns.col2-set { flex-direction: column !important; } .woocommerce-form-login, .woocommerce-form-register { padding: 2rem 1.5rem !important; } } /* 5. My Account Dashboard, Navigation & Sub-pages */ body.woocommerce-account .woocommerce { max-width: 1200px !important; margin: 3.5rem auto !important; padding: 0 1.5rem !important; } /* Fix Parent Theme White Box reset on navigation container */ .woocommerce-MyAccount-navigation { width: 280px !important; float: left !important; margin-right: 40px !important; background: transparent !important; padding: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } .woocommerce-MyAccount-navigation::before, .woocommerce-MyAccount-navigation::after { display: none !important; content: none !important; } .woocommerce-MyAccount-navigation ul { list-style: none !important; padding: 0 !important; margin: 0 !important; background: rgba(12, 18, 30, 0.85) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 18px !important; overflow: hidden !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important; } .woocommerce-MyAccount-navigation li { border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; margin: 0 !important; padding: 0 !important; } .woocommerce-MyAccount-navigation li:last-child { border-bottom: none !important; } .woocommerce-MyAccount-navigation li a { display: flex !important; align-items: center !important; min-height: 56px !important; padding: 0 24px !important; font-family: 'Outfit', sans-serif !important; font-size: 1.05rem !important; font-weight: 500 !important; color: #94A3B8 !important; text-decoration: none !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } .woocommerce-MyAccount-navigation li a:hover { background: rgba(40, 211, 238, 0.08) !important; color: #28D3EE !important; padding-left: 28px !important; } .woocommerce-MyAccount-navigation li.is-active a { background: rgba(40, 211, 238, 0.12) !important; color: #28D3EE !important; font-weight: 600 !important; box-shadow: inset 0 0 0 1px rgba(40, 211, 238, 0.25) !important; } /* Content Area */ .woocommerce-MyAccount-content { overflow: hidden !important; background: rgba(12, 18, 30, 0.85) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 20px !important; padding: 2.75rem 2.5rem !important; color: #E2E8F0 !important; font-size: 1.1rem !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important; } /* Clear headings contrast fix (was inheriting dark #030406) */ .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3, .woocommerce-MyAccount-content header h2, .woocommerce-MyAccount-content header h3, .woocommerce-MyAccount-content legend { font-family: 'Outfit', sans-serif !important; color: #FFFFFF !important; font-weight: 700 !important; letter-spacing: -0.01em !important; margin-top: 0 !important; margin-bottom: 1.5rem !important; } .woocommerce-MyAccount-content h2 { font-size: 1.75rem !important; } .woocommerce-MyAccount-content h3 { font-size: 1.45rem !important; } .woocommerce-MyAccount-content legend { font-size: 1.35rem !important; padding: 0 0.5rem !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; width: 100% !important; padding-bottom: 0.75rem !important; margin-bottom: 1.75rem !important; } .woocommerce-MyAccount-content fieldset { border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; padding: 2rem !important; margin-top: 2.5rem !important; margin-bottom: 2rem !important; background: rgba(255, 255, 255, 0.02) !important; } .woocommerce-MyAccount-content p { font-size: 1.1rem !important; line-height: 1.75 !important; color: #CBD5E1 !important; margin-bottom: 1.5rem !important; } .woocommerce-MyAccount-content p strong { color: #FFFFFF !important; } .woocommerce-MyAccount-content a:not(.button) { color: #28D3EE !important; font-weight: 600 !important; text-decoration: none !important; transition: color 0.2s ease !important; } .woocommerce-MyAccount-content a:not(.button):hover { color: #67E8F9 !important; text-decoration: underline !important; } .woocommerce-MyAccount-content em { color: #94A3B8 !important; font-size: 0.95rem !important; } /* Notice / Info messages in My Account */ .woocommerce-MyAccount-content .woocommerce-message, .woocommerce-MyAccount-content .woocommerce-info { background: rgba(15, 23, 42, 0.95) !important; border: 1px solid rgba(40, 211, 238, 0.35) !important; border-radius: 12px !important; padding: 1.25rem 1.75rem !important; color: #E2E8F0 !important; margin-bottom: 2rem !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important; } .woocommerce-MyAccount-content .woocommerce-error { background: rgba(26, 12, 16, 0.95) !important; border: 1px solid rgba(239, 68, 68, 0.45) !important; border-radius: 12px !important; padding: 1.25rem 1.75rem !important; color: #FECACA !important; margin-bottom: 2rem !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important; } /* Notice Links (excluding buttons) */ .woocommerce-MyAccount-content .woocommerce-message a:not(.button):not(.woocommerce-Button), .woocommerce-MyAccount-content .woocommerce-info a:not(.button):not(.woocommerce-Button), .woocommerce-MyAccount-content .woocommerce-error a:not(.button):not(.woocommerce-Button) { color: #28D3EE !important; font-weight: 600 !important; text-decoration: underline !important; } .woocommerce-MyAccount-content .woocommerce-message a:not(.button):not(.woocommerce-Button):hover, .woocommerce-MyAccount-content .woocommerce-info a:not(.button):not(.woocommerce-Button):hover, .woocommerce-MyAccount-content .woocommerce-error a:not(.button):not(.woocommerce-Button):hover { color: #67E8F9 !important; } /* Notice Action Buttons (e.g. "Browse products", "Confirm email address") */ .woocommerce-MyAccount-content .woocommerce-message .button, .woocommerce-MyAccount-content .woocommerce-info .button, .woocommerce-MyAccount-content .woocommerce-error .button, .woocommerce-MyAccount-content .woocommerce-message a.button, .woocommerce-MyAccount-content .woocommerce-info a.button, .woocommerce-MyAccount-content .woocommerce-error a.button, .woocommerce-MyAccount-content .woocommerce-message .woocommerce-Button, .woocommerce-MyAccount-content .woocommerce-info .woocommerce-Button, .woocommerce-MyAccount-content .woocommerce-error .woocommerce-Button { background: #28D3EE !important; color: #030406 !important; font-family: 'Outfit', sans-serif !important; font-size: 0.95rem !important; font-weight: 700 !important; border-radius: 9999px !important; padding: 10px 24px !important; min-height: 42px !important; height: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; box-shadow: 0 4px 16px rgba(40, 211, 238, 0.35) !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; letter-spacing: 0.2px !important; text-transform: none !important; float: right !important; margin: 0 0 0 16px !important; } .woocommerce-MyAccount-content .woocommerce-message .button:hover, .woocommerce-MyAccount-content .woocommerce-info .button:hover, .woocommerce-MyAccount-content .woocommerce-error .button:hover, .woocommerce-MyAccount-content .woocommerce-message a.button:hover, .woocommerce-MyAccount-content .woocommerce-info a.button:hover, .woocommerce-MyAccount-content .woocommerce-error a.button:hover, .woocommerce-MyAccount-content .woocommerce-message .woocommerce-Button:hover, .woocommerce-MyAccount-content .woocommerce-info .woocommerce-Button:hover, .woocommerce-MyAccount-content .woocommerce-error .woocommerce-Button:hover { background: #67E8F9 !important; color: #030406 !important; transform: translateY(-2px) !important; box-shadow: 0 8px 22px rgba(40, 211, 238, 0.5) !important; } /* Orders & Downloads Tables */ .woocommerce-MyAccount-content table.woocommerce-orders-table, .woocommerce-MyAccount-content table.woocommerce-table--order-downloads, .woocommerce-MyAccount-content table.shop_table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 14px !important; overflow: hidden !important; margin-bottom: 2rem !important; background: rgba(255, 255, 255, 0.02) !important; } .woocommerce-MyAccount-content table.shop_table th { background: rgba(255, 255, 255, 0.06) !important; color: #FFFFFF !important; font-family: 'Outfit', sans-serif !important; font-weight: 600 !important; padding: 16px 20px !important; font-size: 1rem !important; text-align: left !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } .woocommerce-MyAccount-content table.shop_table td { padding: 18px 20px !important; color: #CBD5E1 !important; font-size: 1rem !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; vertical-align: middle !important; } .woocommerce-MyAccount-content table.shop_table tr:last-child td { border-bottom: none !important; } .woocommerce-MyAccount-content table.shop_table td a.button { min-height: 40px !important; height: 40px !important; padding: 0 18px !important; font-size: 0.95rem !important; border-radius: 8px !important; } /* Addresses Section (.woocommerce-Addresses) */ .woocommerce-MyAccount-content .woocommerce-Addresses { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 1.75rem !important; margin-top: 1.5rem !important; } .woocommerce-MyAccount-content .woocommerce-Address { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; padding: 2rem !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important; transition: all 0.2s ease !important; } .woocommerce-MyAccount-content .woocommerce-Address:hover { border-color: rgba(40, 211, 238, 0.3) !important; transform: translateY(-2px) !important; } .woocommerce-MyAccount-content .woocommerce-Address header { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 12px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; padding-bottom: 1rem !important; margin-bottom: 1.25rem !important; } .woocommerce-MyAccount-content .woocommerce-Address header h3 { margin: 0 !important; font-size: 1.35rem !important; text-transform: capitalize !important; letter-spacing: normal !important; } .woocommerce-MyAccount-content .woocommerce-Address header a.edit { display: inline-flex !important; align-items: center !important; background: rgba(40, 211, 238, 0.12) !important; color: #28D3EE !important; padding: 6px 14px !important; border-radius: 8px !important; font-size: 0.9rem !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.2s ease !important; } .woocommerce-MyAccount-content .woocommerce-Address header a.edit:hover { background: #28D3EE !important; color: #030406 !important; } .woocommerce-MyAccount-content .woocommerce-Address address { font-style: normal !important; line-height: 1.8 !important; color: #94A3B8 !important; font-size: 1.05rem !important; } /* Edit Address & Edit Account Forms */ .woocommerce-MyAccount-content form.woocommerce-EditAccountForm, .woocommerce-MyAccount-content form.woocommerce-address-fields__field-wrapper, .woocommerce-MyAccount-content form { margin-top: 1.5rem !important; } .woocommerce-MyAccount-content .form-row { margin-bottom: 1.5rem !important; padding: 0 !important; } .woocommerce-MyAccount-content .form-row label { display: block !important; font-family: 'Outfit', sans-serif !important; font-size: 1rem !important; font-weight: 500 !important; color: #E2E8F0 !important; margin-bottom: 0.5rem !important; } .woocommerce-MyAccount-content .form-row input.input-text, .woocommerce-MyAccount-content .form-row textarea, .woocommerce-MyAccount-content .form-row select { width: 100% !important; background-color: #0F172A !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 12px !important; color: #FFFFFF !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 1.05rem !important; padding: 0 16px !important; height: 54px !important; min-height: 54px !important; box-sizing: border-box !important; transition: all 0.2s ease !important; } .woocommerce-MyAccount-content .form-row textarea { height: auto !important; min-height: 120px !important; padding: 14px 16px !important; } .woocommerce-MyAccount-content .form-row input.input-text:focus, .woocommerce-MyAccount-content .form-row textarea:focus, .woocommerce-MyAccount-content .form-row select:focus { border-color: #28D3EE !important; box-shadow: 0 0 0 3px rgba(40, 211, 238, 0.25) !important; outline: none !important; } /* Select2 / Country & State Dropdown Enhancement */ .woocommerce-MyAccount-content .select2-container--default .select2-selection--single { background-color: #0F172A !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 12px !important; height: 54px !important; min-height: 54px !important; display: flex !important; align-items: center !important; padding: 0 14px !important; } .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__rendered { color: #FFFFFF !important; font-family: 'Outfit', sans-serif !important; font-size: 1.05rem !important; line-height: 54px !important; padding-left: 0 !important; } .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__arrow { height: 54px !important; right: 14px !important; } .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #94A3B8 transparent transparent transparent !important; } .select2-dropdown { background-color: #0F172A !important; border: 1px solid rgba(40, 211, 238, 0.3) !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8) !important; z-index: 99999 !important; } .select2-dropdown .select2-search__field { background-color: #1E293B !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 8px !important; color: #FFFFFF !important; padding: 8px 12px !important; font-family: 'Outfit', sans-serif !important; } .select2-dropdown .select2-results__option { padding: 12px 16px !important; color: #CBD5E1 !important; font-family: 'Outfit', sans-serif !important; font-size: 1rem !important; } .select2-dropdown .select2-results__option--highlighted[aria-selected] { background-color: rgba(40, 211, 238, 0.18) !important; color: #28D3EE !important; } .select2-dropdown .select2-results__option[aria-selected="true"] { background-color: rgba(40, 211, 238, 0.28) !important; color: #FFFFFF !important; } /* Submit Buttons in My Account */ .woocommerce-MyAccount-content button.woocommerce-Button, .woocommerce-MyAccount-content button[name="save_account_details"], .woocommerce-MyAccount-content button[name="save_address"] { min-height: 54px !important; background: #28D3EE !important; color: #030406 !important; font-family: 'Outfit', sans-serif !important; font-size: 1.1rem !important; font-weight: 700 !important; border-radius: 12px !important; padding: 0 32px !important; margin-top: 1.5rem !important; box-shadow: 0 4px 18px rgba(40, 211, 238, 0.35) !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } .woocommerce-MyAccount-content button.woocommerce-Button:hover, .woocommerce-MyAccount-content button[name="save_account_details"]:hover, .woocommerce-MyAccount-content button[name="save_address"]:hover { background: #67E8F9 !important; transform: translateY(-2px) !important; box-shadow: 0 8px 26px rgba(40, 211, 238, 0.5) !important; } /* Mobile & Tablet Responsiveness (<= 900px) */ @media (max-width: 900px) { body.woocommerce-account .woocommerce { margin: 1rem auto 2.5rem !important; padding: 0 0.85rem !important; } .woocommerce-MyAccount-navigation { width: 100% !important; float: none !important; margin-right: 0 !important; margin-bottom: 1.25rem !important; padding: 0 !important; background: transparent !important; position: static !important; } .woocommerce-MyAccount-navigation::before, .woocommerce-MyAccount-navigation::after { display: none !important; content: none !important; } /* Sleek Horizontal Scrollable Pills for Mobile Navigation */ .woocommerce-MyAccount-navigation ul { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; gap: 8px !important; background: transparent !important; border: none !important; border-radius: 0 !important; padding: 2px 2px 8px 2px !important; scrollbar-width: none !important; box-shadow: none !important; } .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none !important; } .woocommerce-MyAccount-navigation li { flex: 0 0 auto !important; border: none !important; margin: 0 !important; } .woocommerce-MyAccount-navigation li a { min-height: 40px !important; padding: 0 16px !important; font-size: 0.9rem !important; border-radius: 9999px !important; background: rgba(15, 23, 42, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; color: #CBD5E1 !important; white-space: nowrap !important; } .woocommerce-MyAccount-navigation li a:hover { background: rgba(40, 211, 238, 0.12) !important; color: #28D3EE !important; padding-left: 16px !important; } .woocommerce-MyAccount-navigation li.is-active a { background: #28D3EE !important; color: #030406 !important; font-weight: 700 !important; border: 1px solid #28D3EE !important; box-shadow: 0 2px 12px rgba(40, 211, 238, 0.4) !important; } .woocommerce-MyAccount-content { padding: 1.25rem 1rem !important; border-radius: 14px !important; } .woocommerce-MyAccount-content h2 { font-size: 1.35rem !important; margin-bottom: 0.85rem !important; } .woocommerce-MyAccount-content h3 { font-size: 1.2rem !important; margin-bottom: 0.75rem !important; } .woocommerce-MyAccount-content p { font-size: 1rem !important; margin-bottom: 1rem !important; } .woocommerce-MyAccount-content fieldset { padding: 1rem 0.85rem !important; margin-top: 1.25rem !important; margin-bottom: 1rem !important; border-radius: 12px !important; } .woocommerce-MyAccount-content .woocommerce-Addresses { gap: 1rem !important; margin-top: 1rem !important; } .woocommerce-MyAccount-content .woocommerce-Address { padding: 1.25rem 1rem !important; border-radius: 14px !important; } .woocommerce-MyAccount-content .form-row { margin-bottom: 1rem !important; } .woocommerce-MyAccount-content .form-row input.input-text, .woocommerce-MyAccount-content .form-row select { height: 48px !important; min-height: 48px !important; font-size: 1rem !important; } .woocommerce-MyAccount-content .select2-container--default .select2-selection--single { height: 48px !important; min-height: 48px !important; } .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 48px !important; } .woocommerce-MyAccount-content .woocommerce-message, .woocommerce-MyAccount-content .woocommerce-info, .woocommerce-MyAccount-content .woocommerce-error { padding: 1rem 1.15rem !important; margin-bottom: 1.25rem !important; border-radius: 12px !important; } } /* 6. WooCommerce Products, Category Grids & Cards */ .woocommerce ul.products, ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 2rem !important; padding: 0 !important; margin: 2.5rem 0 !important; list-style: none !important; } .woocommerce ul.products li.product, ul.products li.product { background: rgba(12, 18, 30, 0.75) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 18px !important; padding: 1.25rem !important; display: flex !important; flex-direction: column !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; overflow: hidden !important; margin: 0 !important; width: auto !important; float: none !important; } .woocommerce ul.products li.product:hover, ul.products li.product:hover { transform: translateY(-5px) !important; border-color: rgba(40, 211, 238, 0.3) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45) !important; } .woocommerce ul.products li.product img, ul.products li.product img { border-radius: 12px !important; object-fit: cover !important; width: 100% !important; margin-bottom: 1.25rem !important; } .woocommerce-loop-product__title, .woocommerce-loop-product__title a, .product-card-title, .product-card-title a { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 1.25rem !important; /* ~20px */ font-weight: 700 !important; color: #FFFFFF !important; margin-bottom: 0.5rem !important; line-height: 1.35 !important; letter-spacing: -0.015em !important; text-decoration: none !important; transition: color 0.2s ease !important; } .woocommerce-loop-product__title a:hover, .product-card-title a:hover { color: #28D3EE !important; } /* Inclusive, High-Contrast Prices (Electric Cyan from Services) */ .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .price .price-wrapper, .woocommerce ul.products li.product .price .woocommerce-Price-amount, .woocommerce ul.products li.product .price .amount, .woocommerce ul.products li.product .price .heading-text, .product-card__summary .price, .product-card__summary .price .price-wrapper, .product-card__summary .price .woocommerce-Price-amount, .product-card__summary .price .heading-text, .price, .price .price-wrapper, .price .woocommerce-Price-amount, .price .amount, .price .heading-text, p.price, p.price .price-wrapper, p.price .woocommerce-Price-amount, p.price .heading-text, span.price, span.price .price-wrapper, span.price .woocommerce-Price-amount, span.price .heading-text, .woocommerce-Price-amount.amount { font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 1.25rem !important; font-weight: 700 !important; color: #28D3EE !important; /* Services Cyan Accent */ margin-bottom: 1rem !important; display: block !important; opacity: 1 !important; visibility: visible !important; } .price del, .price del .price-wrapper, .price del .woocommerce-Price-amount, .price del .amount, .price del .heading-text { color: #64748B !important; margin-right: 8px !important; font-size: 1.05rem !important; font-weight: 500 !important; text-decoration: line-through !important; } .price ins, .price ins .price-wrapper, .price ins .woocommerce-Price-amount, .price ins .amount, .price ins .heading-text { color: #28D3EE !important; text-decoration: none !important; font-weight: 700 !important; } .woocommerce ul.products li.product .button { margin-top: auto !important; min-height: 50px !important; width: 100% !important; font-family: 'Outfit', sans-serif !important; font-weight: 700 !important; font-size: 1rem !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; border-radius: 9999px !important; } /* ========================================================================== 7. Single Product Page Styling - Unified Dark Luxury Standard Fixes mismatched colors, raw boxes, clashing orange buttons & white checkout cards ========================================================================== */ .single-product .site-content { background: #030712 !important; color: #cbd5e1 !important; } .single-product .product { background: transparent !important; border: none !important; } .product-content-wrapper { max-width: 1240px !important; margin: 2rem auto 4rem !important; padding: 0 1.5rem !important; } /* Breadcrumbs & Product Navigation */ .single-product .woocommerce-breadcrumb, .single-product .milano-breadcrumbs { font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 0.9rem !important; color: #64748b !important; margin-bottom: 1.5rem !important; } .single-product .woocommerce-breadcrumb a, .single-product .milano-breadcrumbs a { color: #94a3b8 !important; text-decoration: none !important; transition: color 0.2s ease !important; } .single-product .woocommerce-breadcrumb a:hover, .single-product .milano-breadcrumbs a:hover { color: #28D3EE !important; } .single-product .product-navigation { display: inline-flex !important; align-items: center !important; gap: 8px !important; } .single-product .product-navigation a { width: 38px !important; height: 38px !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 50% !important; color: #cbd5e1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; } .single-product .product-navigation a:hover { background: rgba(40, 211, 238, 0.15) !important; border-color: #28D3EE !important; color: #28D3EE !important; transform: scale(1.06) !important; } /* Product Gallery Presentation Stage */ .single-product .woocommerce-product-gallery, .single-product .milano-product-single__gallery { position: relative !important; } .single-product .woocommerce-product-gallery__wrapper, .single-product .woocommerce-product-gallery__image { background: radial-gradient(circle at center, #131d2e 0%, #080d17 100%) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 20px !important; overflow: hidden !important; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45) !important; transition: border-color 0.3s ease !important; } .single-product .woocommerce-product-gallery img { background: transparent !important; mix-blend-mode: normal !important; border-radius: 16px !important; } .single-product .woocommerce-product-gallery .flex-control-thumbs li img, .single-product .woocommerce-product-gallery .swiper-slide { border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; background: #080d17 !important; transition: all 0.25s ease !important; } .single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active, .single-product .woocommerce-product-gallery .swiper-slide.is-active, .single-product .woocommerce-product-gallery .swiper-slide-thumb-active { border-color: #28D3EE !important; box-shadow: 0 0 15px rgba(40, 211, 238, 0.3) !important; } .single-product .woocommerce-product-gallery__trigger, .single-product .product-gallery-expand { background: rgba(11, 17, 30, 0.75) !important; backdrop-filter: blur(8px) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 50% !important; color: #ffffff !important; width: 38px !important; height: 38px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; } .single-product .woocommerce-product-gallery__trigger:hover, .single-product .product-gallery-expand:hover { background: rgba(40, 211, 238, 0.2) !important; border-color: #28D3EE !important; color: #28D3EE !important; } /* Product Summary Headings & Meta */ .single-product .product-overline a { font-family: 'Outfit', sans-serif !important; font-weight: 700 !important; font-size: 0.85rem !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #28D3EE !important; text-decoration: none !important; margin-bottom: 6px !important; display: inline-block !important; } .single-product .product_title, .single-product .product_title.entry-title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: clamp(2rem, 3.2vw, 2.75rem) !important; font-weight: 800 !important; color: #FFFFFF !important; letter-spacing: -0.02em !important; text-transform: uppercase !important; line-height: 1.15 !important; margin: 4px 0 12px !important; } /* Stock & Sold Count Urgency */ .single-product uix-sold-count, .single-product .milano-sold-count, .single-product .product-extra-info, .single-product .delivery-estimate, .single-product .stock { font-family: 'Nunito Sans', sans-serif !important; font-size: 0.92rem !important; font-weight: 600 !important; color: #94A3B8 !important; } .single-product uix-sold-count span, .single-product .stock.in-stock { color: #ffffff !important; font-weight: 700 !important; } .single-product uix-sold-count svg path[fill="#D10028"], .single-product uix-sold-count svg path[fill="#B7022D"] { fill: #FF6B4A !important; } /* Product Price Display */ .single-product .price, .single-product div.product p.price, .single-product div.product p.price .price-wrapper, .single-product div.product p.price .woocommerce-Price-amount, .single-product div.product p.price .heading-text, .single-product .product-item-tooltip__price .price { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 2.25rem !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: #28D3EE !important; margin: 8px 0 16px !important; display: block !important; opacity: 1 !important; visibility: visible !important; } .single-product .price del, .single-product div.product p.price del .woocommerce-Price-amount { color: #64748b !important; font-size: 1.4rem !important; font-weight: 500 !important; margin-right: 10px !important; } .single-product .price ins, .single-product div.product p.price ins .woocommerce-Price-amount { color: #28D3EE !important; text-decoration: none !important; } /* Short Description */ .single-product .woocommerce-product-details__short-description, .single-product .woocommerce-product-details__short-description p { font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 1.025rem !important; line-height: 1.7 !important; color: #94A3B8 !important; margin-bottom: 1.5rem !important; } .single-product .woocommerce-product-details__short-description a { color: #28D3EE !important; text-decoration: underline !important; } /* Feature Perks Card (.pinfo: Delivery, Discount, Free Shipping) */ .single-product .pinfo, .single-product .pinfo.pinfo--list { background: rgba(255, 255, 255, 0.025) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; padding: 14px 20px !important; margin: 18px 0 !important; } .single-product .pinfo-item { padding: 10px 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; } .single-product .pinfo-item:last-child { border-bottom: none !important; } .single-product .pinfo-item__text { font-family: 'Nunito Sans', sans-serif !important; font-size: 0.95rem !important; color: #94a3b8 !important; line-height: 1.5 !important; } .single-product .pinfo-item__text b, .single-product .pinfo-item__text strong { color: #ffffff !important; font-weight: 700 !important; } .single-product .pinfo-item__image { background: rgba(255, 255, 255, 0.05) !important; border-radius: 8px !important; padding: 6px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Live Visitors & Social Proof */ .single-product uix-live-visitors { font-family: 'Nunito Sans', sans-serif !important; font-size: 0.92rem !important; color: #94a3b8 !important; margin: 16px 0 !important; } .single-product uix-live-visitors span[data-count] { color: #28D3EE !important; font-weight: 700 !important; } .single-product .product-actions { border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; padding-bottom: 14px !important; margin-bottom: 18px !important; } .single-product .product-actions span[data-action] { font-family: 'Nunito Sans', sans-serif !important; font-size: 0.9rem !important; color: #94a3b8 !important; transition: color 0.2s ease !important; } .single-product .product-actions span[data-action]:hover { color: #28D3EE !important; } /* Quantity Selector & Action Buttons Container */ .single-product form.cart { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 12px !important; margin: 22px 0 !important; } /* Refined Pill Quantity Stepper */ .single-product form.cart .quantity { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 9999px !important; height: 52px !important; min-width: 130px !important; display: inline-flex !important; align-items: center !important; justify-content: space-between !important; position: relative !important; overflow: hidden !important; padding: 0 4px !important; } .single-product form.cart .quantity input.qty { background: transparent !important; border: none !important; color: #ffffff !important; font-family: 'Outfit', sans-serif !important; font-weight: 700 !important; font-size: 1.15rem !important; text-align: center !important; width: 48px !important; height: 100% !important; outline: none !important; box-shadow: none !important; } .single-product form.cart .quantity quantity-button button, .single-product form.cart .quantity .button-action.button--icon { background: transparent !important; border: none !important; color: #94a3b8 !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.2s ease !important; } .single-product form.cart .quantity quantity-button button:hover, .single-product form.cart .quantity .button-action.button--icon:hover { background: rgba(40, 211, 238, 0.15) !important; color: #28D3EE !important; } /* Primary "ADD TO CART" Pill Button */ .single-product button.single_add_to_cart_button.button, .single-product .single_add_to_cart_button.button { flex: 1 1 200px !important; height: 52px !important; min-height: 52px !important; border-radius: 9999px !important; padding: 0 36px !important; background: linear-gradient(135deg, #28D3EE 0%, #06B6D4 100%) !important; color: #030712 !important; font-family: 'Outfit', sans-serif !important; font-weight: 700 !important; font-size: 1rem !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; border: none !important; box-shadow: 0 4px 20px rgba(40, 211, 238, 0.3) !important; cursor: pointer !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .single-product button.single_add_to_cart_button.button:hover, .single-product .single_add_to_cart_button.button:hover { background: linear-gradient(135deg, #67E8F9 0%, #28D3EE 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 25px rgba(40, 211, 238, 0.5) !important; color: #030712 !important; } /* Secondary "BUY IT NOW" Button - Fixes clashing orange bar */ .single-product button.milano-buy-now-button, .single-product .milano-buy-now-button { width: 100% !important; flex-basis: 100% !important; height: 52px !important; min-height: 52px !important; margin-top: 8px !important; border-radius: 9999px !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: #ffffff !important; font-family: 'Outfit', sans-serif !important; font-weight: 600 !important; font-size: 0.98rem !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; cursor: pointer !important; transition: all 0.25s ease !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .single-product button.milano-buy-now-button:hover, .single-product .milano-buy-now-button:hover { background: rgba(255, 107, 74, 0.12) !important; border-color: #FF6B4A !important; color: #FF6B4A !important; transform: translateY(-2px) !important; box-shadow: 0 4px 18px rgba(255, 107, 74, 0.25) !important; } /* Single Product Wishlist & Compare Icons */ .single-product .wcboost-wishlist-single-button, .single-product .wcboost-products-compare-button { width: 52px !important; height: 52px !important; min-width: 52px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: #94a3b8 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; } .single-product .wcboost-wishlist-single-button:hover, .single-product .wcboost-products-compare-button:hover { background: rgba(40, 211, 238, 0.12) !important; border-color: #28D3EE !important; color: #28D3EE !important; transform: translateY(-2px) !important; } /* Product Meta (SKU, Categories, Tags) */ .single-product .product_meta { border-top: 1px solid rgba(255, 255, 255, 0.06) !important; padding-top: 18px !important; margin-top: 20px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } .single-product .product_meta .product-meta__label, .single-product .product_meta > span { font-family: 'Nunito Sans', sans-serif !important; font-size: 0.9rem !important; color: #64748b !important; font-weight: 600 !important; } .single-product .product_meta a { color: #cbd5e1 !important; text-decoration: none !important; transition: color 0.2s ease !important; } .single-product .product_meta a:hover { color: #28D3EE !important; } /* Guaranteed Safe Checkout (.milano-safe-checkout) - Fixes blinding white box */ .single-product .milano-safe-checkout, .milano-safe-checkout.color-scheme { background: rgba(255, 255, 255, 0.025) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; padding: 22px 24px !important; margin: 24px 0 !important; text-align: center !important; color: #cbd5e1 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; } .single-product .milano-safe-checkout h6, .milano-safe-checkout.color-scheme h6 { color: #ffffff !important; font-family: 'Outfit', sans-serif !important; font-size: 0.95rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; margin-bottom: 6px !important; } .single-product .milano-safe-checkout p, .milano-safe-checkout.color-scheme p { color: #94a3b8 !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 0.88rem !important; margin-bottom: 14px !important; } .single-product .milano-safe-checkout .payment-icons { display: inline-flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; } .single-product .milano-safe-checkout .payment-icon { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 6px !important; padding: 2px 4px !important; height: 28px !important; width: auto !important; } /* Accordion Description & Details */ .single-product .milano-product-accordion .accordion-item { border-color: rgba(255, 255, 255, 0.08) !important; } .single-product .milano-product-accordion .accordion-trigger { color: #ffffff !important; font-family: 'Outfit', sans-serif !important; font-weight: 700 !important; font-size: 1.15rem !important; } .single-product .milano-product-accordion .accordion-trigger-icon { color: #28D3EE !important; } .single-product .milano-product-accordion .accordion-content, .single-product .milano-product-accordion .accordion-content p { font-family: 'Nunito Sans', sans-serif !important; font-size: 1.025rem !important; line-height: 1.75 !important; color: #94a3b8 !important; } .single-product .milano-product-accordion .accordion-content h2, .single-product .milano-product-accordion .accordion-content h3 { font-family: 'Outfit', sans-serif !important; font-weight: 700 !important; color: #ffffff !important; margin: 20px 0 12px !important; } .single-product .milano-product-accordion .accordion-content ul li { color: #cbd5e1 !important; font-family: 'Nunito Sans', sans-serif !important; margin-bottom: 8px !important; } /* Reviews Section (#product-reviews, #reviews) */ .single-product #product-reviews { margin-top: 4rem !important; } .single-product #reviews .woocommerce-Reviews-title { font-family: 'Outfit', sans-serif !important; font-weight: 800 !important; font-size: 1.85rem !important; color: #ffffff !important; letter-spacing: -0.02em !important; margin-bottom: 24px !important; } .single-product .reviews-summary { background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; padding: 32px !important; margin-bottom: 30px !important; } .single-product .reviews-summary__count { font-family: 'Nunito Sans', sans-serif !important; color: #94a3b8 !important; font-size: 1rem !important; } .single-product .star-rating, .single-product .star-rating__star { color: #F59E0B !important; } .single-product .reviews-summary__write-btn { border-radius: 9999px !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; background: rgba(255, 255, 255, 0.04) !important; color: #ffffff !important; font-family: 'Outfit', sans-serif !important; font-weight: 600 !important; padding: 10px 26px !important; text-decoration: none !important; transition: all 0.2s ease !important; } .single-product .reviews-summary__write-btn:hover { border-color: #28D3EE !important; color: #28D3EE !important; background: rgba(40, 211, 238, 0.1) !important; } .single-product .product-reviews-respond { background: rgba(11, 17, 30, 0.8) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; padding: 28px !important; margin-top: 24px !important; } .single-product .product-reviews-respond input[type="text"], .single-product .product-reviews-respond input[type="email"], .single-product .product-reviews-respond textarea, .single-product .product-reviews-respond select { background: #080d17 !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 10px !important; color: #ffffff !important; padding: 12px 16px !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 0.95rem !important; } .single-product .product-reviews-respond input:focus, .single-product .product-reviews-respond textarea:focus, .single-product .product-reviews-respond select:focus { border-color: #28D3EE !important; box-shadow: 0 0 10px rgba(40, 211, 238, 0.2) !important; outline: none !important; } .single-product .product-reviews-respond .form-submit input#submit { background: linear-gradient(135deg, #28D3EE 0%, #06B6D4 100%) !important; color: #030712 !important; font-family: 'Outfit', sans-serif !important; font-weight: 700 !important; font-size: 0.95rem !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; border-radius: 9999px !important; padding: 12px 32px !important; border: none !important; box-shadow: 0 4px 15px rgba(40, 211, 238, 0.3) !important; cursor: pointer !important; } /* Sticky Bottom Add to Cart Bar (#sticky-atc) - Fixes blinding white background */ #sticky-atc.sticky-atc, .sticky-atc.color-scheme { background: rgba(8, 13, 23, 0.95) !important; backdrop-filter: blur(16px) !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.6) !important; color: #ffffff !important; } #sticky-atc .sticky-atc__title { color: #ffffff !important; font-family: 'Outfit', sans-serif !important; font-weight: 600 !important; font-size: 1rem !important; } #sticky-atc .sticky-atc__price { color: #28D3EE !important; font-family: 'Outfit', sans-serif !important; font-weight: 700 !important; font-size: 1.15rem !important; } #sticky-atc .sticky-atc__image { background: #090e1a !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; } #sticky-atc .sticky-atc__btn.button { border-radius: 9999px !important; background: linear-gradient(135deg, #28D3EE 0%, #06B6D4 100%) !important; color: #030712 !important; font-family: 'Outfit', sans-serif !important; font-weight: 700 !important; font-size: 0.95rem !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; height: 46px !important; min-height: 46px !important; padding: 0 28px !important; border: none !important; box-shadow: 0 4px 15px rgba(40, 211, 238, 0.35) !important; cursor: pointer !important; transition: all 0.2s ease !important; } #sticky-atc .sticky-atc__btn.button:hover { background: #67E8F9 !important; transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(40, 211, 238, 0.5) !important; } /* Related Products & Upsells Carousels */ .single-product .related.products, .single-product .upsells.products { margin-top: 4.5rem !important; border-top: 1px solid rgba(255, 255, 255, 0.06) !important; padding-top: 3.5rem !important; } .single-product .related__heading, .single-product .related.products h2, .single-product .upsells.products h2 { font-family: 'Outfit', sans-serif !important; font-weight: 800 !important; font-size: 2rem !important; letter-spacing: -0.02em !important; color: #ffffff !important; margin-bottom: 6px !important; } .single-product .related__description { font-family: 'Nunito Sans', sans-serif !important; font-size: 0.95rem !important; color: #94a3b8 !important; margin-bottom: 2rem !important; } .single-product .related ul.products li.product, .single-product .upsells ul.products li.product { background: #090e1a !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 18px !important; padding: 16px !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } .single-product .related ul.products li.product:hover, .single-product .upsells ul.products li.product:hover { border-color: rgba(40, 211, 238, 0.45) !important; transform: translateY(-4px) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important; } .single-product .related .card-media, .single-product .upsells .card-media { background: radial-gradient(circle at center, #172235 0%, #0b111e 100%) !important; border-radius: 14px !important; overflow: hidden !important; } .single-product .related .product-card-title, .single-product .related .product-card-title a, .single-product .upsells .product-card-title a { color: #ffffff !important; font-family: 'Outfit', sans-serif !important; font-weight: 600 !important; font-size: 1rem !important; text-decoration: none !important; margin-top: 10px !important; } .single-product .related .price, .single-product .upsells .price { color: #28D3EE !important; font-family: 'Outfit', sans-serif !important; font-weight: 700 !important; font-size: 1.15rem !important; margin: 6px 0 !important; } /* ========================================================================== Shoppable Video Product Modal (.shoppable-modal) - Unified Dark Luxury Fixes jarring white popup clash on desktop & mobile ========================================================================== */ uix-modal#shoppable-modal, .shoppable-modal { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; } .shoppable-modal .modal-dialog, .shoppable-modal .uix-modal__dialog, #shoppable-modal .modal-dialog { background: #0b111e !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 20px !important; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(40, 211, 238, 0.1) !important; overflow: hidden !important; color: #cbd5e1 !important; } .shoppable-modal .milano-shopable-product { background: #0b111e !important; border: none !important; color: #cbd5e1 !important; } .shoppable-modal .milano-shopable-product__summary { background: #0b111e !important; color: #cbd5e1 !important; } .shoppable-modal .milano-shopable-product__title, .shoppable-modal .milano-shopable-product__title a { font-family: 'Outfit', sans-serif !important; font-size: clamp(1.35rem, 2.5vw, 1.75rem) !important; font-weight: 700 !important; color: #ffffff !important; letter-spacing: -0.015em !important; line-height: 1.25 !important; margin-top: 1rem !important; margin-bottom: 0.5rem !important; text-decoration: none !important; } .shoppable-modal .milano-shopable-product__title a:hover { color: #28D3EE !important; } .shoppable-modal .milano-shopable-product__price, .shoppable-modal .milano-shopable-product__price .price, .shoppable-modal .milano-shopable-product__price .woocommerce-Price-amount { font-family: 'Nunito Sans', sans-serif !important; font-size: 1.5rem !important; font-weight: 700 !important; color: #28D3EE !important; } .shoppable-modal .milano-shopable-product__price del, .shoppable-modal .milano-shopable-product__price del .woocommerce-Price-amount { color: #64748b !important; font-size: 1.15rem !important; font-weight: 500 !important; margin-right: 8px !important; } .shoppable-modal .milano-shopable-product__price ins { text-decoration: none !important; } .shoppable-modal .milano-shopable-product__description { font-family: 'Outfit', sans-serif !important; font-size: 1rem !important; line-height: 1.65 !important; color: #cbd5e1 !important; } .shoppable-modal .milano-shopable-product__summary a.text-heading { color: #28D3EE !important; font-weight: 600 !important; font-size: 0.95rem !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; margin-top: 0.5rem !important; } .shoppable-modal .milano-shopable-product__summary a.text-heading:hover { color: #67E8F9 !important; } /* Spacious, Breathable Shoppable Modal Action Bar */ .shoppable-modal .milano-shopable-product__atc { background: rgba(8, 13, 23, 0.98) !important; backdrop-filter: blur(16px) !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; padding: 16px 20px !important; } .shoppable-modal .milano-shopable-product__atc .flex { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: nowrap !important; } .shoppable-modal .milano-shopable-product__atc .quick-add-button { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; } /* Beautiful Spacious & Breathable "ADD TO CART" Pill - Strictly 1 Line Across All Screens */ .shoppable-modal .milano-shopable-product__atc .button, .shoppable-modal .milano-shopable-product__atc .quick-add-button .button, .shoppable-modal .milano-shopable-product__atc .add_to_cart_button, #shoppable-modal .milano-shopable-product__atc .button, #shoppable-modal .quick-add-button .button { width: 100% !important; height: 48px !important; min-height: 48px !important; border-radius: 9999px !important; padding: 0 16px !important; background: linear-gradient(135deg, #28D3EE 0%, #06B6D4 100%) !important; color: #030712 !important; font-family: 'Outfit', sans-serif !important; font-weight: 600 !important; font-size: 0.88rem !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; border: none !important; box-shadow: 0 4px 18px rgba(40, 211, 238, 0.28) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; line-height: 1 !important; white-space: nowrap !important; word-break: keep-all !important; overflow: hidden !important; text-overflow: ellipsis !important; box-sizing: border-box !important; } .shoppable-modal .milano-shopable-product__atc .button:hover, .shoppable-modal .milano-shopable-product__atc .quick-add-button .button:hover, .shoppable-modal .milano-shopable-product__atc .add_to_cart_button:hover, #shoppable-modal .milano-shopable-product__atc .button:hover, #shoppable-modal .quick-add-button .button:hover { background: linear-gradient(135deg, #67E8F9 0%, #28D3EE 100%) !important; color: #030712 !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(40, 211, 238, 0.45) !important; } /* Secondary Wishlist & Compare Icons inside Modal - Sleek Dark Glass Circles */ .shoppable-modal .milano-shopable-product__atc .woosw-btn, .shoppable-modal .milano-shopable-product__atc .product-wishlist-button, .shoppable-modal .milano-shopable-product__atc .wcboost-wishlist-button, .shoppable-modal .milano-shopable-product__atc .wcboost-products-compare-button { width: 48px !important; height: 48px !important; min-width: 48px !important; flex: 0 0 48px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: #94a3b8 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all 0.25s ease !important; cursor: pointer !important; margin: 0 !important; } .shoppable-modal .milano-shopable-product__atc .woosw-btn:hover, .shoppable-modal .milano-shopable-product__atc .product-wishlist-button:hover, .shoppable-modal .milano-shopable-product__atc .wcboost-wishlist-button:hover, .shoppable-modal .milano-shopable-product__atc .wcboost-products-compare-button:hover { background: rgba(40, 211, 238, 0.12) !important; border-color: rgba(40, 211, 238, 0.6) !important; color: #28D3EE !important; transform: translateY(-2px) !important; } /* Responsive Single-Line Safeguard on Narrow Screens */ @media (max-width: 540px) { .shoppable-modal .milano-shopable-product__atc { padding: 12px 14px !important; } .shoppable-modal .milano-shopable-product__atc .flex { gap: 8px !important; } .shoppable-modal .milano-shopable-product__atc .button, .shoppable-modal .milano-shopable-product__atc .quick-add-button .button, .shoppable-modal .milano-shopable-product__atc .add_to_cart_button { height: 44px !important; min-height: 44px !important; font-size: 0.8rem !important; letter-spacing: 0.03em !important; padding: 0 12px !important; white-space: nowrap !important; } .shoppable-modal .milano-shopable-product__atc .woosw-btn, .shoppable-modal .milano-shopable-product__atc .product-wishlist-button, .shoppable-modal .milano-shopable-product__atc .wcboost-wishlist-button, .shoppable-modal .milano-shopable-product__atc .wcboost-products-compare-button { width: 44px !important; height: 44px !important; min-width: 44px !important; flex: 0 0 44px !important; } } /* Modal Close Button */ .shoppable-modal uix-modal-toggle button, .shoppable-modal .modal-close, .shoppable-modal button[aria-label="Close"] { color: #ffffff !important; background: rgba(255, 255, 255, 0.08) !important; border-radius: 50% !important; width: 36px !important; height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; } .shoppable-modal uix-modal-toggle button:hover, .shoppable-modal .modal-close:hover { background: rgba(40, 211, 238, 0.2) !important; color: #28D3EE !important; } /* ========================================================================== Category Archive & Catalog Products Grid (.tax-product_cat, .post-type-archive-product) Unified Dark Luxury Standard ========================================================================== */ .tax-product_cat .site-content, .post-type-archive-product .site-content, .woocommerce-shop .site-content { background: #030712 !important; color: #cbd5e1 !important; } /* Spacing under fixed mobile header for WooCommerce pages */ @media (max-width: 991px) { body.woocommerce .site-content, body.single-product .site-content, body.tax-product_cat .site-content, body.post-type-archive-product .site-content { padding-top: 24px !important; } .shop-toolbar { flex-wrap: wrap !important; gap: 12px !important; } .shop-toolbar-col { width: 100% !important; justify-content: space-between !important; } .shop-columns-switcher { gap: 6px !important; } } /* Category Page Header Banner Overlay */ .tax-product_cat .page-header, .post-type-archive-product .page-header { border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } .tax-product_cat .page-header .page-title, .post-type-archive-product .page-header .page-title { font-family: 'Outfit', sans-serif !important; font-size: clamp(2rem, 4vw, 3rem) !important; font-weight: 700 !important; color: #ffffff !important; letter-spacing: -0.02em !important; text-transform: uppercase !important; } /* Shop Products Grid Items */ ul.products li.product, .woocommerce ul.products li.product { background: #0b111e !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 18px !important; overflow: hidden !important; padding: 16px !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } ul.products li.product:hover, .woocommerce ul.products li.product:hover { border-color: rgba(40, 211, 238, 0.4) !important; transform: translateY(-5px) !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(40, 211, 238, 0.12) !important; } ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .product-card-title { font-family: 'Outfit', sans-serif !important; font-size: 1.15rem !important; font-weight: 700 !important; color: #ffffff !important; letter-spacing: -0.01em !important; line-height: 1.35 !important; margin-top: 12px !important; margin-bottom: 6px !important; } ul.products li.product .price, .woocommerce ul.products li.product .price { font-family: 'Nunito Sans', sans-serif !important; font-size: 1.25rem !important; font-weight: 700 !important; color: #28D3EE !important; } /* Wishlist heart on cards */ .product-card .woosw-btn, .product-card .card-action { background: rgba(11, 17, 30, 0.8) !important; backdrop-filter: blur(8px) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 50% !important; color: #ffffff !important; width: 36px !important; height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; } .product-card .woosw-btn:hover { border-color: #28D3EE !important; color: #28D3EE !important; } /* 8. Cart, Checkout & Wishlist Tables */ .woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce, .woocommerce-wishlist { max-width: 1200px !important; margin: 3rem auto !important; padding: 0 1.5rem !important; } .shop_table { border-collapse: separate !important; border-spacing: 0 !important; background: rgba(12, 18, 30, 0.8) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 18px !important; width: 100% !important; overflow: hidden !important; margin-bottom: 2.5rem !important; } .shop_table th { background: rgba(255, 255, 255, 0.03) !important; color: #94A3B8 !important; font-family: 'Outfit', sans-serif !important; font-size: 1rem !important; font-weight: 700 !important; padding: 18px 22px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } .shop_table td { padding: 20px 22px !important; color: #CBD5E1 !important; font-family: 'Outfit', sans-serif !important; font-size: 1.1rem !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; vertical-align: middle !important; } .shop_table .product-name a { color: #FFFFFF !important; font-weight: 700 !important; font-size: 1.15rem !important; text-decoration: none !important; transition: color 0.2s ease !important; } .shop_table .product-name a:hover { color: #28D3EE !important; } .cart-collaterals .cart_totals { background: rgba(12, 18, 30, 0.8) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 18px !important; padding: 2.25rem !important; } .cart-collaterals .cart_totals h2 { color: #FFFFFF !important; font-family: 'Outfit', sans-serif !important; font-size: 1.6rem !important; font-weight: 700 !important; letter-spacing: -0.015em !important; text-transform: uppercase !important; margin-bottom: 1.5rem !important; } /* Sidebar filter widgets in Shop */ .widget-title, .widgettitle, .woocommerce-widget-layered-nav-dropdown__label, .catalog-sidebar .widget-title { font-family: 'Outfit', sans-serif !important; font-weight: 700 !important; color: #FFFFFF !important; text-transform: uppercase !important; letter-spacing: -0.01em !important; font-size: 1.15rem !important; } .woocommerce-widget-layered-nav-list li a, .widget_price_filter .price_slider_amount { font-family: 'Outfit', sans-serif !important; color: #CBD5E1 !important; font-size: 1rem !important; } .widget_price_filter .price_slider_amount .price_label { font-family: 'Nunito Sans', sans-serif !important; font-weight: 600 !important; color: #28D3EE !important; } /* Checkout Section Headings */ .woocommerce-checkout h3, .woocommerce-checkout #order_review_heading { font-family: 'Outfit', sans-serif !important; font-size: 1.35rem !important; font-weight: 700 !important; color: #FFFFFF !important; letter-spacing: -0.015em !important; text-transform: uppercase !important; margin-bottom: 1.25rem !important; } /* Empty States (Wishlist & Cart) */ .wishlist-empty-wrap, .cart-empty, .return-to-shop { background: rgba(12, 18, 30, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 20px !important; padding: 4rem 2rem !important; text-align: center !important; max-width: 680px !important; margin: 3.5rem auto !important; } .wishlist-empty-wrap p, .cart-empty { font-family: 'Outfit', sans-serif !important; font-size: 1.3rem !important; /* ~21px */ font-weight: 500 !important; color: #E2E8F0 !important; margin-bottom: 2rem !important; } .wishlist-empty-wrap .button, .return-to-shop .button { max-width: 300px !important; margin: 0 auto !important; display: inline-flex !important; font-family: 'Outfit', sans-serif !important; font-weight: 700 !important; border-radius: 9999px !important; text-transform: uppercase !important; } /* Checkout Payment Methods Accordion */ .wc_payment_methods { list-style: none !important; padding: 0 !important; margin: 1.5rem 0 !important; } .wc_payment_methods li { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 14px !important; padding: 18px 22px !important; margin-bottom: 12px !important; } .wc_payment_methods li label { font-size: 1.15rem !important; font-weight: 600 !important; color: #FFFFFF !important; cursor: pointer !important; font-family: 'Outfit', sans-serif !important; } .wc_payment_methods li .payment_box { background: rgba(0, 0, 0, 0.3) !important; border-radius: 10px !important; padding: 16px !important; margin-top: 12px !important; color: #CBD5E1 !important; font-size: 1.05rem !important; font-family: 'Outfit', sans-serif !important; line-height: 1.6 !important; } /* Place Order CTA Button */ #place_order, .woocommerce-checkout button#place_order { font-family: 'Outfit', sans-serif !important; font-size: 1.15rem !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; background: #28D3EE !important; color: #030712 !important; border-radius: 9999px !important; min-height: 56px !important; padding: 0 2.5rem !important; box-shadow: 0 4px 20px rgba(40, 211, 238, 0.4) !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } #place_order:hover, .woocommerce-checkout button#place_order:hover { background: #67E8F9 !important; transform: translateY(-2px) !important; box-shadow: 0 8px 30px rgba(40, 211, 238, 0.6) !important; } /* 9. Alerts, Notices & System Messages */ .woocommerce-message, .woocommerce-error, .woocommerce-info { font-family: 'Outfit', sans-serif !important; font-size: 1.125rem !important; /* 18px */ border-radius: 14px !important; padding: 18px 24px !important; margin: 2rem auto !important; max-width: 1200px !important; line-height: 1.5 !important; } .woocommerce-message { background: rgba(16, 185, 129, 0.12) !important; border: 1px solid #10B981 !important; color: #FFFFFF !important; } .woocommerce-message .button { background: #10B981 !important; color: #030406 !important; min-height: 44px !important; font-size: 1rem !important; margin-left: 1rem !important; width: auto !important; } .woocommerce-error { background: rgba(239, 68, 68, 0.12) !important; border: 1px solid #EF4444 !important; color: #FFFFFF !important; list-style: none !important; } .woocommerce-info { background: rgba(40, 211, 238, 0.1) !important; border: 1px solid #28D3EE !important; color: #FFFFFF !important; } .woocommerce-info .button, .woocommerce-info a.button { background: #28D3EE !important; color: #030406 !important; min-height: 44px !important; font-size: 1rem !important; font-weight: 700 !important; margin-left: 1rem !important; width: auto !important; border-radius: 9999px !important; box-shadow: 0 4px 14px rgba(40, 211, 238, 0.35) !important; } .woocommerce-info .button:hover, .woocommerce-info a.button:hover { background: #67E8F9 !important; color: #030406 !important; } /* ========================================================================== 10. Search Experience - Impeccable Dark Luxury Redesign - Fullscreen/Modal Search Drawer (#search-drawer) - Search Form, High-Contrast Input & Quick Toggles - Trending Searches & Suggested Tags (Pill Badges) - Product Grid / Best Sellers in Search Drawer - Search Results Page (body.search, header, post cards, empty states) ========================================================================== */ /* 10.1 Search Drawer Modal Container & Overlay */ uix-drawer#search-drawer, #search-drawer.search-drawer, .search-drawer--modal { background: linear-gradient(180deg, #04070d 0%, #070b14 100%) !important; background-color: #04070d !important; color: #FFFFFF !important; border-bottom: 1px solid rgba(40, 211, 238, 0.2) !important; box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 50px rgba(40, 211, 238, 0.08) !important; } #search-drawer .drawer-content { background: transparent !important; color: #FFFFFF !important; } /* Backdrop blur overlay */ uix-drawer-overlay, .drawer-overlay, .search-panel-overlay { background: rgba(2, 3, 6, 0.85) !important; backdrop-filter: blur(16px) saturate(160%) !important; -webkit-backdrop-filter: blur(16px) saturate(160%) !important; } /* 10.2 Header & Close Buttons (Desktop & Mobile) */ #search-drawer .drawer-header { border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; padding: 1.25rem 2rem !important; } #search-drawer .drawer-title { font-family: 'Outfit', sans-serif !important; font-size: 1.15rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #CBD5E1 !important; visibility: visible !important; } #search-drawer .drawer-close { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #FFFFFF !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; padding: 0 !important; } #search-drawer .drawer-close svg { width: 18px !important; height: 18px !important; color: #FFFFFF !important; fill: currentColor !important; stroke: currentColor !important; transition: transform 0.25s ease, color 0.25s ease !important; } #search-drawer .drawer-close:hover, #search-drawer .drawer-close:focus { background: rgba(40, 211, 238, 0.18) !important; border-color: #28D3EE !important; color: #28D3EE !important; box-shadow: 0 0 20px rgba(40, 211, 238, 0.4) !important; transform: rotate(90deg) !important; } #search-drawer .drawer-close:hover svg, #search-drawer .drawer-close:focus svg { color: #28D3EE !important; fill: #28D3EE !important; stroke: #28D3EE !important; } /* 10.3 Search Form & Big Modern Input */ #search-drawer .search-drawer__form { padding-top: 2rem !important; padding-bottom: 2rem !important; } #search-drawer .search-form { max-width: 780px !important; margin: 0 auto !important; width: 100% !important; } #search-drawer .search-drawer__form .h4 { font-family: 'Outfit', sans-serif !important; font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important; font-weight: 800 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #FFFFFF !important; text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5) !important; margin-bottom: 1.75rem !important; } #search-drawer .search-field { width: 100% !important; height: 64px !important; min-height: 64px !important; padding: 1rem 4rem 1rem 1.75rem !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 1.15rem !important; /* ~18.4px - inclusive, readable */ font-weight: 500 !important; color: #FFFFFF !important; background: rgba(255, 255, 255, 0.05) !important; border: 1.5px solid rgba(255, 255, 255, 0.16) !important; border-radius: 9999px !important; box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.06) !important; transition: all 0.25s ease !important; outline: none !important; } #search-drawer .search-field::placeholder { color: rgba(203, 213, 225, 0.6) !important; font-weight: 400 !important; } #search-drawer .search-field:focus { background: rgba(255, 255, 255, 0.09) !important; border-color: #28D3EE !important; box-shadow: 0 0 28px rgba(40, 211, 238, 0.35), 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.12) !important; color: #FFFFFF !important; } #search-drawer .search-submit { position: absolute !important; right: 10px !important; top: 50% !important; transform: translateY(-50%) !important; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(40, 211, 238, 0.15) !important; border: 1px solid rgba(40, 211, 238, 0.3) !important; border-radius: 50% !important; color: #28D3EE !important; cursor: pointer !important; transition: all 0.25s ease !important; padding: 0 !important; } #search-drawer .search-submit:hover, #search-drawer .search-submit:focus { background: #28D3EE !important; color: #030406 !important; box-shadow: 0 0 20px rgba(40, 211, 238, 0.6) !important; transform: translateY(-50%) scale(1.05) !important; } #search-drawer .search-submit svg { width: 22px !important; height: 22px !important; fill: currentColor !important; color: inherit !important; } /* 10.4 Trending & Suggested Keywords */ #search-drawer .search-trending, #search-drawer .search-suggested-keywords { max-width: 780px !important; margin: 0 auto 2.5rem !important; } #search-drawer .search-trending__title, #search-drawer .suggested-keywords__heading { font-family: 'Outfit', sans-serif !important; font-size: 1.05rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #E5A93C !important; /* Warm gold accent */ display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 1rem !important; } #search-drawer .search-trending__title::before, #search-drawer .suggested-keywords__heading::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #28D3EE; box-shadow: 0 0 10px #28D3EE; } #search-drawer .search-trending__list, #search-drawer .suggested-keywords__list { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; } #search-drawer .search-trending__item, #search-drawer .suggested-keywords__item { display: inline-flex !important; align-items: center !important; padding: 0.65rem 1.35rem !important; min-height: 46px !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 1rem !important; font-weight: 500 !important; color: #E2E8F0 !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 9999px !important; text-decoration: none !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; } #search-drawer .search-trending__item:hover, #search-drawer .search-trending__item:focus, #search-drawer .suggested-keywords__item:hover, #search-drawer .suggested-keywords__item:focus { background: rgba(40, 211, 238, 0.14) !important; border-color: #28D3EE !important; color: #FFFFFF !important; box-shadow: 0 0 16px rgba(40, 211, 238, 0.3) !important; transform: translateY(-2px) !important; } /* 10.5 Default Products / Best Sellers in Search Drawer */ #search-drawer .search-default-products { max-width: 1200px !important; margin: 1.5rem auto 0 !important; padding-top: 1.5rem !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } #search-drawer .search-default-products__title { font-family: 'Outfit', sans-serif !important; font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #FFFFFF !important; margin-bottom: 1.5rem !important; } #search-drawer .product, #search-drawer .product-card { background: rgba(11, 17, 30, 0.8) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 18px !important; padding: 1rem !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important; } #search-drawer .product:hover, #search-drawer .product-card:hover { border-color: rgba(40, 211, 238, 0.4) !important; transform: translateY(-4px) !important; box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(40, 211, 238, 0.15) !important; } #search-drawer .woocommerce-loop-product__title, #search-drawer .product-card__title, #search-drawer .product-card__title a { color: #FFFFFF !important; font-family: 'Outfit', sans-serif !important; font-size: 1.1rem !important; font-weight: 600 !important; text-decoration: none !important; } #search-drawer .price, #search-drawer .product-card__price, #search-drawer .amount { color: #28D3EE !important; font-weight: 700 !important; font-size: 1.1rem !important; } /* 10.6 Dynamic Live Search Results in Drawer */ #search-drawer .search-results__heading { font-family: 'Outfit', sans-serif !important; font-size: 1.25rem !important; font-weight: 600 !important; color: #CBD5E1 !important; margin-bottom: 1.5rem !important; text-align: center !important; } #search-drawer .search-results__query { color: #28D3EE !important; font-weight: 700 !important; } #search-drawer .search-results__view-all .button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 52px !important; padding: 0 2.5rem !important; border-radius: 9999px !important; background: linear-gradient(135deg, #28D3EE 0%, #0EA5E9 100%) !important; color: #030406 !important; font-family: 'Outfit', sans-serif !important; font-size: 1.05rem !important; font-weight: 700 !important; letter-spacing: 0.04em !important; box-shadow: 0 8px 24px rgba(40, 211, 238, 0.35) !important; transition: all 0.25s ease !important; text-decoration: none !important; border: none !important; width: auto !important; } #search-drawer .search-results__view-all .button:hover { transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 12px 30px rgba(40, 211, 238, 0.5) !important; color: #030406 !important; } /* 10.7 Search Results Archive Page (body.search) */ body.search #primary.content-area { background: transparent !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 1.5rem 4rem !important; } body.search .page-header { text-align: center !important; padding: 4rem 1.5rem 3rem !important; background: radial-gradient(circle at 50% 20%, rgba(40, 211, 238, 0.08) 0%, transparent 75%) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; margin-bottom: 3.5rem !important; } body.search .page-title { font-family: 'Outfit', sans-serif !important; font-size: clamp(2rem, 4vw, 3.25rem) !important; font-weight: 800 !important; color: #FFFFFF !important; letter-spacing: -0.02em !important; line-height: 1.25 !important; } body.search .page-title span { color: #28D3EE !important; text-shadow: 0 0 25px rgba(40, 211, 238, 0.35) !important; } body.search article.article-card, body.search article.post { background: rgba(11, 17, 30, 0.8) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 20px !important; padding: 2.25rem !important; margin-bottom: 2.5rem !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } body.search article.article-card:hover, body.search article.post:hover { border-color: rgba(40, 211, 238, 0.35) !important; transform: translateY(-4px) !important; box-shadow: 0 16px 45px rgba(0, 0, 0, 0.65), 0 0 25px rgba(40, 211, 238, 0.12) !important; } body.search .entry-title, body.search .entry-title a { font-family: 'Outfit', sans-serif !important; font-size: clamp(1.4rem, 2.5vw, 1.85rem) !important; font-weight: 700 !important; color: #FFFFFF !important; text-decoration: none !important; line-height: 1.3 !important; transition: color 0.2s ease !important; } body.search .entry-title a:hover { color: #28D3EE !important; } body.search .entry-summary, body.search .entry-summary p { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 1.125rem !important; /* 18px inclusive readability */ line-height: 1.75 !important; color: #CBD5E1 !important; margin-top: 1rem !important; } body.search .entry-meta, body.search .entry-meta * { font-size: 0.95rem !important; color: #94A3B8 !important; } body.search .entry-meta .author, body.search .entry-meta .author a { color: #E5A93C !important; /* Warm gold accent */ font-weight: 600 !important; } /* 10.8 Search Results Empty State */ body.search .no-results.not-found { max-width: 720px !important; margin: 3.5rem auto !important; padding: 3.5rem 2.5rem !important; background: rgba(11, 17, 30, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 24px !important; text-align: center !important; box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5) !important; } body.search .no-results .page-title { font-family: 'Outfit', sans-serif !important; font-size: 2.25rem !important; font-weight: 700 !important; color: #FFFFFF !important; margin-bottom: 1.25rem !important; } body.search .no-results .page-content p { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 1.125rem !important; /* 18px inclusive */ color: #CBD5E1 !important; line-height: 1.7 !important; margin-bottom: 2rem !important; } /* Mobile Responsiveness for Search */ @media (max-width: 767px) { #search-drawer .search-drawer__form { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; padding-inline: 1rem !important; } #search-drawer .search-field { height: 56px !important; min-height: 56px !important; font-size: 1.05rem !important; padding: 0.75rem 3.5rem 0.75rem 1.25rem !important; } #search-drawer .search-submit { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; right: 7px !important; } #search-drawer .drawer-close { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; } #search-drawer .search-trending__item, #search-drawer .suggested-keywords__item { font-size: 0.95rem !important; padding: 0.55rem 1.1rem !important; } body.search article.article-card, body.search article.post { padding: 1.5rem !important; border-radius: 16px !important; margin-bottom: 1.75rem !important; } } /* ========================================================================== 10. WOOCOMMERCE BLOCKS (CART, CHECKOUT, COMPONENTS & ORDER CONFIRMATION) Pure Dark Luxury Styling for Gutenberg WooCommerce Blocks ========================================================================== */ /* Outer Wrappers */ .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .wc-block-cart, .wc-block-checkout { max-width: 1240px !important; margin: 2.5rem auto 5rem !important; padding: 0 1.5rem !important; color: #E2E8F0 !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; box-sizing: border-box !important; } /* -------------------------------------------------------------------------- A. CART ITEMS & PRODUCT DISPLAY -------------------------------------------------------------------------- */ .wc-block-cart__main { margin-bottom: 2.5rem !important; } .wc-block-cart-items, .wc-block-cart-items td, .wc-block-cart-items__row { border-color: rgba(255, 255, 255, 0.08) !important; } .wc-block-cart-items__header { border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; padding-bottom: 14px !important; } .wc-block-cart-items__header span { color: #94A3B8 !important; font-family: 'Outfit', sans-serif !important; font-size: 0.875rem !important; font-weight: 600 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; } .wc-block-cart-items__row { padding: 2rem 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } /* Product Thumbnail */ .wc-block-cart-item__image img, .wc-block-components-product-image img, .wc-block-components-order-summary-item__image img { border-radius: 14px !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; background: rgba(255, 255, 255, 0.02) !important; object-fit: cover !important; } /* Product Title - Ultra high contrast crisp white */ .wc-block-components-product-name, a.wc-block-components-product-name, .wc-block-cart-items__row .wc-block-components-product-name, .wc-block-components-order-summary-item__description .wc-block-components-product-name, .wc-block-components-product-title, .wc-block-grid__product-title { color: #FFFFFF !important; font-family: 'Outfit', sans-serif !important; font-weight: 600 !important; font-size: 1.25rem !important; /* ~20px */ line-height: 1.4 !important; text-decoration: none !important; display: inline-block !important; transition: color 0.2s ease !important; } .wc-block-components-product-name:hover, a.wc-block-components-product-name:hover { color: #28D3EE !important; } /* Product Description & Details */ .wc-block-components-product-metadata, .wc-block-components-product-metadata__description, .wc-block-components-product-metadata__description p, .wc-block-components-product-details, .wc-block-components-product-details span { color: #94A3B8 !important; font-size: 0.95rem !important; line-height: 1.6 !important; } /* Prices */ .wc-block-components-product-price, .wc-block-cart-item__total, .wc-block-components-order-summary-item__total-price { color: #FFFFFF !important; font-family: 'Outfit', sans-serif !important; font-weight: 700 !important; font-size: 1.3rem !important; } .wc-block-components-product-price del { color: #64748B !important; margin-right: 8px !important; font-size: 1rem !important; font-weight: 400 !important; } .wc-block-components-product-price ins { color: #FFFFFF !important; text-decoration: none !important; } /* -------------------------------------------------------------------------- B. QUANTITY SELECTOR (RESTRAINED DARK LUXURY) -------------------------------------------------------------------------- */ .wc-block-components-quantity-selector { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; height: 46px !important; max-width: 130px !important; overflow: hidden !important; box-sizing: border-box !important; margin-top: 12px !important; } .wc-block-components-quantity-selector__button { background: transparent !important; border: none !important; color: #FFFFFF !important; width: 40px !important; height: 46px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; font-size: 1.25rem !important; transition: background 0.2s ease, color 0.2s ease !important; padding: 0 !important; } .wc-block-components-quantity-selector__button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1) !important; color: #28D3EE !important; } .wc-block-components-quantity-selector__button:disabled { opacity: 0.3 !important; cursor: not-allowed !important; } /* Explicit input override to defeat global input[type="number"] */ .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input, .wc-block-components-quantity-selector input[type="number"] { background: transparent !important; border: none !important; box-shadow: none !important; color: #FFFFFF !important; font-family: 'Outfit', sans-serif !important; font-weight: 700 !important; font-size: 1.15rem !important; width: 50px !important; min-width: 50px !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; padding: 0 !important; margin: 0 !important; text-align: center !important; outline: none !important; appearance: textfield !important; -moz-appearance: textfield !important; } .wc-block-components-quantity-selector input::-webkit-outer-spin-button, .wc-block-components-quantity-selector input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } /* Remove Item Trash Button */ .wc-block-cart-item__remove-link { color: #94A3B8 !important; font-size: 0.95rem !important; margin-left: 14px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; text-decoration: none !important; transition: color 0.2s ease, transform 0.2s ease !important; } .wc-block-cart-item__remove-link svg { fill: currentColor !important; } .wc-block-cart-item__remove-link:hover { color: #EF4444 !important; transform: scale(1.08) !important; } /* -------------------------------------------------------------------------- C. SIDEBAR / TOTALS / ORDER SUMMARY CARD (DARK GLASS LUXURY, NO WHITE BOXES!) -------------------------------------------------------------------------- */ @media (min-width: 901px) { .wc-block-cart .wc-block-components-sidebar, .wc-block-checkout .wc-block-components-sidebar, .wc-block-cart__sidebar > .components-card, .wc-block-checkout__sidebar > .components-card, .wp-block-woocommerce-cart-totals-block:not(.wc-block-components-sidebar *), .wp-block-woocommerce-checkout-order-summary-block:not(.wc-block-components-sidebar *) { background: rgba(15, 23, 42, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 20px !important; padding: 2rem !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; color: #E2E8F0 !important; } } /* Eliminate nested card borders/backgrounds inside the sidebar */ .wc-block-components-sidebar .components-card, .wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block, .wc-block-components-sidebar .wp-block-woocommerce-cart-totals-block, .wc-block-components-sidebar .wc-block-components-order-summary, .wc-block-components-sidebar .wc-block-components-panel, .wc-block-components-sidebar .wc-block-components-panel__content { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Also eliminate nested card for mobile order summary dropdown at top */ .wc-block-components-checkout-order-summary { background: rgba(15, 23, 42, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 16px !important; padding: 1.25rem !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important; } .wc-block-components-checkout-order-summary .components-card, .wc-block-components-checkout-order-summary .wc-block-components-order-summary { background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; } /* Totals Titles */ .wc-block-cart__totals-title, .wc-block-components-checkout-order-summary__title, .wc-block-components-checkout-order-summary__title-text, .wc-block-components-title, .wp-block-woocommerce-cart-order-summary-heading-block { color: #FFFFFF !important; font-family: 'Outfit', sans-serif !important; font-size: 1.45rem !important; /* ~23px */ font-weight: 700 !important; letter-spacing: -0.01em !important; margin-bottom: 1.25rem !important; } .wc-block-components-checkout-order-summary__title-price { color: #FFFFFF !important; font-weight: 700 !important; font-size: 1.25rem !important; } /* Summary Rows & Totals Items */ .wc-block-components-totals-wrapper { border-top: none !important; padding-block: 14px !important; } .wc-block-components-totals-item { padding: 10px 0 !important; border: none !important; } .wc-block-components-totals-item__label { color: #94A3B8 !important; font-size: 1.05rem !important; font-weight: 500 !important; } .wc-block-components-totals-item__value { color: #FFFFFF !important; font-size: 1.15rem !important; font-weight: 600 !important; } .wc-block-components-totals-item__description { color: #94A3B8 !important; font-size: 0.875rem !important; } /* Grand Total (Footer Item) */ .wc-block-components-totals-footer-item { border-top: 1px solid rgba(255, 255, 255, 0.15) !important; margin-top: 10px !important; padding-top: 18px !important; } .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { color: #FFFFFF !important; font-size: 1.25rem !important; font-weight: 700 !important; } .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: #38BDF8 !important; /* Cyan Total */ font-size: 1.65rem !important; font-weight: 800 !important; } /* Coupon Panel & Accordion */ .wc-block-components-totals-coupon-link, .wc-block-components-panel__button { color: #28D3EE !important; font-family: 'Outfit', sans-serif !important; font-weight: 600 !important; font-size: 1rem !important; text-decoration: none !important; transition: color 0.2s ease !important; } .wc-block-components-totals-coupon-link:hover, .wc-block-components-panel__button:hover { color: #5eead4 !important; text-decoration: underline !important; } .wc-block-components-panel__button svg { fill: currentColor !important; } .wc-block-components-totals-coupon__form { margin-top: 12px !important; } .wc-block-components-totals-coupon__button { background: #28D3EE !important; color: #0B0E14 !important; border-radius: 9999px !important; font-weight: 700 !important; padding: 10px 22px !important; border: none !important; cursor: pointer !important; transition: background 0.2s ease !important; } .wc-block-components-totals-coupon__button:hover { background: #5eead4 !important; } /* -------------------------------------------------------------------------- D. PRIMARY CTA BUTTONS ("Proceed to Checkout" & "Place Order") -------------------------------------------------------------------------- */ .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button, .wc-block-checkout__actions .wc-block-components-button:not(.is-link) { background: #28D3EE !important; border: none !important; border-radius: 9999px !important; color: #0B0E14 !important; font-family: 'Outfit', sans-serif !important; font-size: 1.15rem !important; font-weight: 700 !important; letter-spacing: 0.02em !important; min-height: 56px !important; padding: 16px 36px !important; text-transform: none !important; box-shadow: 0 4px 18px rgba(40, 211, 238, 0.3) !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; width: 100% !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-top: 1.5rem !important; } .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover, .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:hover, .wc-block-checkout__actions .wc-block-components-button:not(.is-link):hover { background: #5eead4 !important; transform: translateY(-2px) !important; box-shadow: 0 8px 26px rgba(40, 211, 238, 0.45) !important; color: #0B0E14 !important; } /* -------------------------------------------------------------------------- E. CHECKOUT FORM FIELDS & FLOATING LABELS (NO OVERLAPPING!) -------------------------------------------------------------------------- */ .wc-block-components-checkout-step { padding-inline-start: 0 !important; margin-bottom: 2.5rem !important; } .wc-block-components-checkout-step__title { color: #FFFFFF !important; font-family: 'Outfit', sans-serif !important; font-size: 1.35rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; } .wc-block-components-checkout-step__description, .wc-block-components-checkout-step__heading-content { color: #94A3B8 !important; font-size: 0.95rem !important; } /* Form field containers */ .wc-block-components-form .wc-block-components-text-input, .wc-block-components-text-input, .wc-block-components-combobox, .wc-blocks-components-select { background: #111827 !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 12px !important; position: relative !important; min-height: 58px !important; height: 58px !important; box-sizing: border-box !important; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important; margin-top: 12px !important; } .wc-blocks-components-select .wc-blocks-components-select__container { background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 12px !important; height: 100% !important; min-height: 56px !important; box-shadow: none !important; } .wc-blocks-components-select .wc-blocks-components-select__expand { fill: #94A3B8 !important; color: #94A3B8 !important; right: 14px !important; pointer-events: none !important; } .wc-block-components-form .wc-block-components-text-input:focus-within, .wc-block-components-text-input:focus-within, .wc-block-components-combobox:focus-within, .wc-blocks-components-select:focus-within { background: #162238 !important; border-color: #28D3EE !important; box-shadow: 0 0 0 3px rgba(40, 211, 238, 0.22) !important; } /* The actual text/email input inside the wrapper */ .wc-block-components-form .wc-block-components-text-input input, .wc-block-components-text-input input, .wc-block-components-combobox input, .wc-blocks-components-select select, .wc-blocks-components-select .wc-blocks-components-select__select { background: transparent !important; border: none !important; box-shadow: none !important; color: #FFFFFF !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 1rem !important; width: 100% !important; height: 56px !important; min-height: 56px !important; max-height: 56px !important; box-sizing: border-box !important; outline: none !important; padding: 22px 16px 6px 16px !important; /* CRITICAL: Room at top for floating label */ } /* Floating label: Unfocused & empty */ .wc-block-components-text-input label, .wc-block-components-combobox label, .wc-blocks-components-select__label { position: absolute !important; left: 18px !important; color: #94A3B8 !important; font-family: 'Outfit', sans-serif !important; pointer-events: none !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; transform-origin: left top !important; line-height: 1 !important; margin: 0 !important; z-index: 1 !important; } /* When empty and NOT focused: vertically center label */ .wc-block-components-text-input:not(.is-active):not(:focus-within) label, .wc-block-components-combobox:not(.is-active):not(:focus-within) label { top: 50% !important; transform: translateY(-50%) !important; font-size: 1.05rem !important; color: #94A3B8 !important; } /* When ACTIVE (filled or focused): Float label to top cleanly */ .wc-block-components-text-input.is-active label, .wc-block-components-text-input:focus-within label, .wc-block-components-combobox.is-active label, .wc-block-components-combobox:focus-within label, .wc-blocks-components-select__label { top: 8px !important; transform: translateY(0) !important; font-size: 0.75rem !important; font-weight: 600 !important; color: #28D3EE !important; letter-spacing: 0.02em !important; } /* Combobox (Country & State) Dropdown List */ .wc-block-components-combobox-control__menu, .wc-block-components-combobox-list { background: #0F172A !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 12px !important; color: #FFFFFF !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important; overflow: hidden !important; z-index: 9999 !important; } .wc-block-components-combobox-control__menu-item, .wc-block-components-combobox-list-item { color: #E2E8F0 !important; padding: 12px 18px !important; cursor: pointer !important; transition: background 0.15s ease, color 0.15s ease !important; } .wc-block-components-combobox-control__menu-item:hover, .wc-block-components-combobox-list-item:hover, .wc-block-components-combobox-control__menu-item--is-selected, .wc-block-components-combobox-list-item--is-selected { background: rgba(40, 211, 238, 0.18) !important; color: #28D3EE !important; } /* Textarea in Checkout */ .wc-block-components-textarea { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 12px !important; color: #FFFFFF !important; font-family: 'Outfit', sans-serif !important; font-size: 1.05rem !important; padding: 16px 18px !important; min-height: 110px !important; } .wc-block-components-textarea:focus { border-color: #28D3EE !important; box-shadow: 0 0 0 3px rgba(40, 211, 238, 0.25) !important; outline: none !important; } /* Checkbox & Radio Controls */ .wc-block-components-checkbox { margin-top: 20px !important; margin-bottom: 12px !important; padding: 4px 2px !important; display: block !important; } .wc-block-components-checkbox label { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; color: #CBD5E1 !important; font-size: 0.96rem !important; line-height: 1.5 !important; cursor: pointer !important; position: relative !important; } .wc-block-components-radio-control__label { color: #FFFFFF !important; font-size: 0.96rem !important; cursor: pointer !important; } .wc-block-components-checkbox__input[type="checkbox"] { background: #111827 !important; border: 1.5px solid rgba(255, 255, 255, 0.35) !important; border-radius: 6px !important; margin: 0 !important; } .wc-block-components-checkbox__input[type="checkbox"]:checked { background: #28D3EE !important; border-color: #28D3EE !important; } .wc-block-components-checkbox__mark { fill: #030406 !important; } /* Terms and Conditions Block */ .wc-block-checkout__terms, .wp-block-woocommerce-checkout-terms-block, .wc-block-checkout__terms span, .wc-block-checkout__terms .wc-block-components-checkbox__label { color: #CBD5E1 !important; font-size: 0.94rem !important; line-height: 1.65 !important; } .wc-block-checkout__terms a, .wp-block-woocommerce-checkout-terms-block a { color: #28D3EE !important; font-weight: 600 !important; text-decoration: underline !important; text-underline-offset: 3px !important; } /* -------------------------------------------------------------------------- F. CHECKOUT ORDER SUMMARY ITEM LIST -------------------------------------------------------------------------- */ .wc-block-components-order-summary-item { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 0 !important; padding: 14px 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; min-width: 0 !important; } .wc-block-components-order-summary-item:last-child { border-bottom: none !important; } .wc-block-components-order-summary-item__image { flex: 0 0 48px !important; width: 48px !important; height: 48px !important; position: relative !important; } .wc-block-components-order-summary-item__image img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 10px !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; } .wc-block-components-order-summary-item__quantity { background: #28D3EE !important; color: #0B0E14 !important; font-weight: 700 !important; border-radius: 9999px !important; font-size: 0.72rem !important; position: absolute !important; top: -5px !important; right: -5px !important; width: 20px !important; height: 20px !important; line-height: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 2 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important; } .wc-block-components-order-summary-item__description { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } .wc-block-components-order-summary-item__description .wc-block-components-product-name { color: #FFFFFF !important; font-size: 1rem !important; font-weight: 600 !important; line-height: 1.35 !important; word-break: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; display: block !important; margin: 0 !important; } /* Hide marketing paragraph metadata in order summary (standard modern e-commerce pattern) */ .wc-block-components-order-summary-item .wc-block-components-product-metadata, .wc-block-components-order-summary-item .wc-block-components-product-metadata__description { display: none !important; } /* Unit prices & discount badges in order summary */ .wc-block-components-order-summary-item .wc-block-cart-item__prices { font-size: 0.85rem !important; color: #94A3B8 !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: wrap !important; } .wc-block-components-order-summary-item .wc-block-cart-item__prices del { color: #64748B !important; font-size: 0.8rem !important; } .wc-block-components-order-summary-item .wc-block-cart-item__prices ins, .wc-block-components-order-summary-item .wc-block-cart-item__prices .wc-block-components-product-price__value { color: #FFFFFF !important; font-weight: 600 !important; text-decoration: none !important; } .wc-block-components-order-summary-item__total-price { flex: 0 0 auto !important; white-space: nowrap !important; text-align: right !important; margin-left: 8px !important; color: #FFFFFF !important; font-size: 1.15rem !important; font-weight: 700 !important; } /* Fifty Checkout Order Summary Quantity Stepper & Remove Button */ .fifty-checkout-qty-stepper { display: inline-flex !important; align-items: center !important; gap: 10px !important; margin-top: 8px !important; font-family: inherit !important; flex-wrap: nowrap !important; } .fifty-qty-pill { display: inline-flex !important; align-items: center !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 9999px !important; padding: 2px 4px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; flex-shrink: 0 !important; } .fifty-qty-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; border-radius: 50% !important; background: transparent !important; border: none !important; color: #94A3B8 !important; cursor: pointer !important; padding: 0 !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } .fifty-qty-btn:hover { background: rgba(40, 211, 238, 0.22) !important; color: #28D3EE !important; transform: scale(1.08) !important; } .fifty-qty-btn:active { transform: scale(0.92) !important; } .fifty-qty-val { display: inline-block !important; min-width: 22px !important; text-align: center !important; font-size: 0.85rem !important; font-weight: 700 !important; color: #F8FAFC !important; letter-spacing: 0.02em !important; user-select: none !important; } .fifty-qty-remove-btn { display: inline-flex !important; align-items: center !important; gap: 5px !important; background: rgba(239, 68, 68, 0.1) !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; color: #FCA5A5 !important; font-size: 0.75rem !important; font-weight: 600 !important; cursor: pointer !important; padding: 4px 10px !important; border-radius: 9999px !important; white-space: nowrap !important; flex-shrink: 0 !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } .fifty-qty-remove-btn svg { stroke: currentColor !important; transition: transform 0.2s ease !important; } .fifty-qty-remove-btn:hover { color: #FFFFFF !important; background: rgba(239, 68, 68, 0.35) !important; border-color: #EF4444 !important; transform: translateY(-1px) !important; } .fifty-qty-remove-btn:hover svg { transform: scale(1.15) !important; } .fifty-checkout-qty-stepper.is-loading { opacity: 0.45 !important; pointer-events: none !important; } /* Mobile Order Summary Product Row: Horizontal Apple Store Row (Zero Right Overflow) */ @media (max-width: 768px) { .wc-block-components-order-summary, .wc-block-components-order-summary__content { display: block !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } .wc-block-components-order-summary-item { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; text-align: left !important; padding: 14px 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; gap: 0 !important; } .wc-block-components-order-summary-item__image { order: 1 !important; flex: 0 0 52px !important; width: 52px !important; height: 52px !important; padding: 0 !important; margin: 0 12px 0 0 !important; position: relative !important; } .wc-block-components-order-summary-item__image img { width: 52px !important; height: 52px !important; border-radius: 12px !important; object-fit: cover !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; } .wc-block-components-order-summary-item__description { order: 2 !important; flex: 1 1 0% !important; min-width: 0 !important; text-align: left !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 3px !important; margin: 0 !important; padding: 0 8px 0 0 !important; } .wc-block-components-order-summary-item__description .wc-block-components-product-name { text-align: left !important; font-size: 0.96rem !important; font-weight: 700 !important; color: #FFFFFF !important; margin: 0 !important; padding: 0 !important; display: block !important; line-height: 1.3 !important; } .wc-block-components-order-summary-item .wc-block-cart-item__prices { justify-content: flex-start !important; text-align: left !important; margin: 0 !important; padding: 0 !important; display: flex !important; color: #94A3B8 !important; font-size: 0.85rem !important; } .wc-block-components-order-summary-item__total-price { order: 3 !important; flex: 0 0 auto !important; width: auto !important; text-align: right !important; padding: 0 !important; margin: 0 0 0 auto !important; display: flex !important; justify-content: flex-end !important; align-items: center !important; font-size: 1.08rem !important; font-weight: 700 !important; color: #FFFFFF !important; } .fifty-checkout-qty-stepper { order: 4 !important; flex: 0 0 100% !important; margin: 12px 0 0 0 !important; padding: 0 !important; justify-content: space-between !important; width: 100% !important; max-width: 100% !important; display: flex !important; gap: 10px !important; } } /* Shipping Option Radio Control Legibility */ .wc-block-components-radio-control__label { color: #F1F5F9 !important; font-weight: 600 !important; font-size: 0.95rem !important; } .wc-block-components-radio-control__secondary-label, .wc-block-checkout__shipping-option--free { color: #FFFFFF !important; font-weight: 700 !important; font-size: 0.95rem !important; } /* -------------------------------------------------------------------------- G. NOTICES & ALERTS -------------------------------------------------------------------------- */ .wc-block-components-notice-banner { background: rgba(15, 23, 42, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 14px !important; padding: 16px 20px !important; color: #E2E8F0 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important; margin: 1.5rem 0 !important; } .wc-block-components-notice-banner.is-error { background: rgba(239, 68, 68, 0.12) !important; border-color: rgba(239, 68, 68, 0.4) !important; color: #FCA5A5 !important; } .wc-block-components-notice-banner.is-error svg { background: #EF4444 !important; fill: #FFFFFF !important; } .wc-block-components-notice-banner.is-warning { background: rgba(245, 158, 11, 0.12) !important; border-color: rgba(245, 158, 11, 0.4) !important; color: #FCD34D !important; } .wc-block-components-notice-banner.is-info { background: rgba(40, 211, 238, 0.12) !important; border-color: rgba(40, 211, 238, 0.4) !important; color: #A5F3FC !important; } /* -------------------------------------------------------------------------- H. ORDER CONFIRMATION / THANK YOU PAGE -------------------------------------------------------------------------- */ .wc-block-order-confirmation-status { background: rgba(15, 23, 42, 0.8) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 20px !important; padding: 2.5rem !important; color: #FFFFFF !important; margin-bottom: 2rem !important; } .wc-block-order-confirmation-status__title { color: #FFFFFF !important; font-family: 'Outfit', sans-serif !important; font-size: 1.75rem !important; font-weight: 700 !important; } .wc-block-order-confirmation-summary, .wc-block-order-confirmation-totals { background: rgba(15, 23, 42, 0.8) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 20px !important; padding: 2rem !important; color: #E2E8F0 !important; margin-bottom: 2rem !important; } /* -------------------------------------------------------------------------- I. RESPONSIVE OPTIMIZATIONS (TABLET & MOBILE DENSITY & SPACING) -------------------------------------------------------------------------- */ @media (max-width: 767px) { /* Content area vertical rhythm */ #content.site-content, .site-content { padding-top: 0.5rem !important; padding-bottom: 2rem !important; } .site-content-container { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } /* WooCommerce Page Outer Wrappers - Maximize screen width */ body.woocommerce-checkout .site-content-container.container-fluid, body.woocommerce-checkout .container-fluid, body.woocommerce-checkout #primary, body.woocommerce-checkout #main, body.woocommerce-checkout .entry-content, .wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .wc-block-cart, .wc-block-checkout, .wc-block-components-sidebar-layout, .wc-block-checkout__main, .wc-block-components-main, .woocommerce-cart .woocommerce, .woocommerce-checkout form.checkout { margin: 0.5rem auto 2.5rem !important; padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 100% !important; } /* Hide duplicate checkout sidebar at bottom on mobile ONLY when top summary wrapper is rendered */ .wc-block-checkout:has(.checkout-order-summary-block-fill-wrapper) .wc-block-checkout__sidebar { display: none !important; } /* Auto-expand mobile order summary at top so cart contents are immediately visible */ .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content { display: block !important; } /* Scrollable container for mobile order summary dropdown to avoid vertical push */ .wc-block-components-checkout-order-summary .wc-block-components-order-summary { max-height: none !important; overflow-y: visible !important; padding: 0 !important; border: none !important; background: transparent !important; } /* Sidebar / Order Summary Card (Unboxed & Full Width on mobile) */ .wc-block-cart .wc-block-components-sidebar, .wc-block-checkout .wc-block-components-sidebar, .wc-block-components-checkout-order-summary, .wp-block-woocommerce-checkout-order-summary-block, .wp-block-woocommerce-cart-totals-block, .wc-block-cart__sidebar > .components-card { background: transparent !important; border: none !important; box-shadow: none !important; padding: 8px 0 !important; margin-bottom: 1rem !important; } /* Mobile Order Summary Item compact layout */ .wc-block-components-order-summary-item { padding: 12px 0 !important; gap: 0 !important; } .wc-block-components-order-summary-item__image { flex: 0 0 44px !important; width: 44px !important; height: 44px !important; } .wc-block-components-order-summary-item__description .wc-block-components-product-name { font-size: 0.925rem !important; } .wc-block-components-order-summary-item__total-price { font-size: 1.05rem !important; } .wc-block-cart__totals-title, .wc-block-components-checkout-order-summary__title, .wc-block-components-title, .wp-block-woocommerce-cart-order-summary-heading-block { font-size: 1.2rem !important; margin-bottom: 0.75rem !important; } .wc-block-components-totals-wrapper { padding-block: 8px !important; } .wc-block-components-totals-item { padding: 6px 0 !important; } .wc-block-components-totals-item__label { font-size: 0.95rem !important; } .wc-block-components-totals-item__value { font-size: 1.05rem !important; } .wc-block-components-totals-footer-item { padding-top: 12px !important; margin-top: 6px !important; } .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 1.1rem !important; } .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 1.35rem !important; } /* Checkout Steps & Section Spacing */ .wc-block-components-checkout-step { margin-bottom: 1.25rem !important; } .wc-block-components-checkout-step__title { font-size: 1.15rem !important; margin-bottom: 0.35rem !important; } .wc-block-components-checkout-step__description, .wc-block-components-checkout-step__heading-content { font-size: 0.875rem !important; margin-bottom: 0.35rem !important; } /* Compact Form Fields & Floating Inputs (No Label Collision on Mobile) */ .wc-block-components-form .wc-block-components-text-input, .wc-block-components-text-input, .wc-block-components-combobox, .wc-blocks-components-select { min-height: 58px !important; height: 58px !important; margin-top: 10px !important; border-radius: 12px !important; } .wc-block-components-text-input input, .wc-block-components-combobox input, .wc-blocks-components-select select, .wc-blocks-components-select .wc-blocks-components-select__select { font-size: 1rem !important; height: 56px !important; padding: 22px 16px 6px 16px !important; } .wc-block-components-address-form { gap: 8px !important; } /* Cart Items Row (Compact & Proportional) */ .wc-block-cart-items__row { padding: 0.85rem 0 !important; gap: 10px !important; } .wc-block-cart-item__image, .wc-block-components-product-image { width: 64px !important; height: 64px !important; flex: 0 0 64px !important; border-radius: 10px !important; } .wc-block-components-product-name, a.wc-block-components-product-name { font-size: 1rem !important; line-height: 1.35 !important; margin-bottom: 4px !important; } .wc-block-components-product-price, .wc-block-cart-item__total { font-size: 1.05rem !important; } /* Primary CTA Buttons on Mobile */ .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button, .wc-block-checkout__actions .wc-block-components-button:not(.is-link) { font-size: 1.05rem !important; min-height: 50px !important; padding: 12px 24px !important; margin-top: 1rem !important; border-radius: 9999px !important; } /* Order Confirmation Status */ .wc-block-order-confirmation-status, .wc-block-order-confirmation-summary, .wc-block-order-confirmation-totals { padding: 1.25rem 1rem !important; border-radius: 14px !important; margin-bottom: 1.25rem !important; } .wc-block-order-confirmation-status__title { font-size: 1.35rem !important; } /* -------------------------------------------------------------------------- HOMEPAGE MOBILE OPTIMIZATIONS (TITLES & SIDE SPACING) -------------------------------------------------------------------------- */ /* 1. Section Titles: Max 1-2 lines, balanced typography */ .elementor-element-f6a4acf .elementor-heading-title, .elementor-element-1fed37a .elementor-heading-title, .elementor-element-fc4f958 .elementor-heading-title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: clamp(1.4rem, 6vw, 1.75rem); /* ~22px - 28px */ font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.02em !important; text-transform: uppercase !important; margin-bottom: 1.25rem !important; text-align: center !important; word-break: break-word !important; max-width: 100% !important; } /* Mobile Hero Eyebrow, Subtitle & Story Text */ .elementor-element-9f9db48 .elementor-heading-title { font-size: 16px; letter-spacing: 2px !important; } /* 2. Side Margins & Paddings: Reduced to minimum/zero for edge-to-edge breathing room */ #willie-recommends, .elementor-element-75ddddf, #thailand-insights, .elementor-element-9ed6dc4, .elementor-element-6dd98ba { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; } #willie-recommends > .e-con-inner, .elementor-element-75ddddf > .e-con-inner { padding-left: 6px !important; padding-right: 6px !important; width: 100% !important; max-width: 100% !important; } #thailand-insights > .e-con-inner, .elementor-element-9ed6dc4 > .e-con-inner { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 100% !important; } /* About Me Section: Impeccable Mobile Optimization */ .elementor-element-6dd98ba > .e-con-inner { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; } .elementor-element-6dd98ba .es-unified-wrapper { padding-left: 6px !important; padding-right: 6px !important; padding-top: 2rem !important; padding-bottom: 3.25rem !important; } .elementor-element-6dd98ba .es-profile-wrapper { width: 100% !important; max-width: min(100%, 420px) !important; margin: 0 auto !important; } .elementor-element-6dd98ba .es-profile-wrapper img { width: 100% !important; height: auto !important; aspect-ratio: 660 / 707 !important; object-fit: cover !important; border-radius: 20px !important; } .elementor-element-6dd98ba .es-container { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; } .elementor-element-6dd98ba .es-story-lead { font-size: 1.45rem !important; line-height: 1.35 !important; margin-bottom: 1rem !important; } .elementor-element-6dd98ba .es-story-sublead { font-size: 1.05rem !important; line-height: 1.65 !important; margin-bottom: 1.25rem !important; } .elementor-element-6dd98ba .es-story-card { padding: 1.15rem 1.35rem !important; margin: 1.25rem 0 !important; border-radius: 14px !important; } .elementor-element-6dd98ba .es-story-card p { font-size: 1.02rem !important; line-height: 1.68 !important; } .elementor-element-6dd98ba .es-story-body { font-size: 1.02rem !important; line-height: 1.68 !important; margin-bottom: 1.25rem !important; } .elementor-element-6dd98ba .es-story-climax { font-size: 1.06rem !important; line-height: 1.6 !important; margin-bottom: 1.5rem !important; } } /* ========================================================================== Page 99 - FAQ Page Typography & Dark Luxury Standardization ========================================================================== */ .page-id-99 { background-color: #030406 !important; color: #cbd5e1 !important; } .page-id-99 #page, .page-id-99 .site-main, .page-id-99 .site-content, .page-id-99 .entry-content { background-color: #030406 !important; } .page-id-99 .entry-title, .page-id-99 h1, .page-id-99 h2 { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: clamp(2.2rem, 4.5vw, 3rem) !important; font-weight: 700 !important; color: #ffffff !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; text-transform: uppercase !important; } .page-id-99 h3, .page-id-99 h4 { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 1.35rem !important; font-weight: 700 !important; color: #ffffff !important; letter-spacing: -0.015em !important; } .page-id-99 p, .page-id-99 li { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 1.125rem !important; line-height: 1.68 !important; color: #cbd5e1 !important; } @media (max-width: 768px) { .page-id-99 .entry-title, .page-id-99 h1, .page-id-99 h2 { font-size: clamp(1.6rem, 6vw, 2rem) !important; } .page-id-99 h3, .page-id-99 h4 { font-size: 1.2rem !important; } .page-id-99 p, .page-id-99 li { font-size: 1.025rem !important; line-height: 1.65 !important; } } /* ========================================================================== Ultra-Smooth 60/120 FPS Scrolling & Hardware Layer Optimization Engine ========================================================================== */ /* 1. Header GPU Layer Isolation - prevents full-page repaints during scroll */ .header-desktop, .header-mobile, #header, .site-header { transform: translateZ(0); backface-visibility: hidden; } /* 2. Marquee GPU Hardware Acceleration & Offscreen Pause */ .marquee-track, .marquee-content { will-change: transform; transform: translateZ(0); backface-visibility: hidden; } .es-marquee-paused .marquee-track, .es-marquee-paused .marquee-content { animation-play-state: paused !important; } /* 3. Offscreen Content Containment (Preserves full width for Smash Balloon & Carousel) */ .sb_youtube { content-visibility: visible !important; width: 100% !important; } .sb_youtube .sby_item { opacity: 1 !important; visibility: visible !important; } .elementor-widget-milano-shopable-video-carousel, .elementor-widget-milano-shoppable-video-carousel { content-visibility: visible !important; } .milano-shopable-video__item { contain: layout paint; } /* 4. Disable expensive pointer interactions during active scrolling */ body.is-scrolling * { pointer-events: none !important; } body.is-scrolling .header-desktop, body.is-scrolling .header-mobile, body.is-scrolling #header, body.is-scrolling .site-header { pointer-events: auto !important; } /* ========================================================================== YOUTUBE ARCHIVE & SINGLE CINEMA STYLES (IMPECCABLE CRAFT) 100% Update-Proof Child Theme Architecture ========================================================================== */ /* Page Background & Content Area Overrides */ .post-type-archive-sby_videos, .single-sby_videos { background-color: #05080d !important; color: #cbd5e1 !important; } .post-type-archive-sby_videos #content.site-content, .post-type-archive-sby_videos .site-content-container, .post-type-archive-sby_videos #primary.content-area, .post-type-archive-sby_videos #main.site-main, .single-sby_videos #content.site-content, .single-sby_videos .site-content-container, .single-sby_videos #primary.content-area, .single-sby_videos #main.site-main { background-color: #05080d !important; padding: 0 !important; margin: 0 !important; max-width: 100% !important; } /* Containers */ .sby-archive-page, .sby-single-page { background-color: #05080d; min-height: 80vh; padding-bottom: 5rem; } .sby-main-container, .sby-single-container { max-width: 1240px; margin: 0 auto; padding: 2.5rem 1.5rem; box-sizing: border-box; } @media (max-width: 768px) { .sby-main-container, .sby-single-container { padding: 1.5rem 1rem; } } /* -------------------------------------------------------------------------- HERO SECTION (ARCHIVE) -------------------------------------------------------------------------- */ .sby-archive-hero { text-align: center; padding: 2.5rem 1rem 3.5rem; margin-bottom: 2rem; position: relative; } .sby-hero-inner { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .sby-hero-channel-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 9999px; padding: 6px 14px; margin-bottom: 1.25rem; } .sby-channel-emblem { display: flex; align-items: center; justify-content: center; } .sby-channel-title-text { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13.5px; font-weight: 500; color: #e2e8f0; letter-spacing: 0.01em; } .sby-verified-icon { display: flex; align-items: center; } .sby-archive-title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: clamp(2.1rem, 4.5vw, 3.1rem); font-weight: 800; color: #ffffff; line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 1rem; } .sby-archive-subtitle { font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: clamp(1rem, 1.8vw, 1.125rem); font-weight: 400; color: #94a3b8; line-height: 1.6; max-width: 680px; margin: 0 0 2rem; } .sby-hero-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; } .sby-stats-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 9999px; padding: 10px 18px; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 500; color: #cbd5e1; } .sby-chip-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #28D3EE; box-shadow: 0 0 8px rgba(40, 211, 238, 0.6); } /* -------------------------------------------------------------------------- BUTTONS -------------------------------------------------------------------------- */ .sby-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14.5px; font-weight: 600; text-decoration: none !important; border-radius: 9999px; cursor: pointer; border: none; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; line-height: 1; white-space: nowrap; } .sby-btn-youtube { background-color: #FF0000; color: #FFFFFF !important; padding: 11px 22px; box-shadow: 0 4px 14px rgba(255, 0, 0, 0.35); } .sby-btn-youtube:hover { background-color: #E60000; color: #FFFFFF !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 0, 0, 0.5); } .sby-btn-subscribe { background-color: #FF0000; color: #FFFFFF !important; padding: 9px 18px; font-size: 13.5px; box-shadow: 0 3px 10px rgba(255, 0, 0, 0.35); } .sby-btn-subscribe:hover { background-color: #E60000; color: #FFFFFF !important; transform: translateY(-2px); box-shadow: 0 5px 16px rgba(255, 0, 0, 0.5); } .sby-btn-primary { background-color: #28D3EE; color: #05080d !important; padding: 11px 22px; box-shadow: 0 4px 14px rgba(40, 211, 238, 0.3); } .sby-btn-primary:hover { background-color: #38BDF8; color: #05080d !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(40, 211, 238, 0.45); } .sby-btn-secondary { background-color: rgba(255, 255, 255, 0.06); color: #e2e8f0 !important; border: 1px solid rgba(255, 255, 255, 0.12); padding: 9px 18px; font-size: 13.5px; } .sby-btn-secondary:hover { background-color: rgba(255, 255, 255, 0.12); color: #ffffff !important; border-color: rgba(255, 255, 255, 0.25); transform: translateY(-2px); } /* -------------------------------------------------------------------------- FEATURED SPOTLIGHT CARD (ARCHIVE) -------------------------------------------------------------------------- */ .sby-featured-section { margin-bottom: 3.5rem; } .sby-featured-card { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; background: #101726; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 24px; align-items: center; transition: border-color 0.28s ease, box-shadow 0.28s ease; } .sby-featured-card:hover { border-color: rgba(40, 211, 238, 0.25); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4); } @media (max-width: 900px) { .sby-featured-card { grid-template-columns: 1fr; gap: 20px; padding: 16px; } } .sby-featured-media-link { display: block; text-decoration: none; } .sby-featured-thumb-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background-color: #0a0f18; } .sby-featured-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .sby-featured-card:hover .sby-featured-thumb { transform: scale(1.03); } .sby-featured-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; } .sby-featured-card:hover .sby-featured-overlay { background: rgba(0, 0, 0, 0.4); } .sby-featured-play-badge { width: 60px; height: 60px; border-radius: 50%; background-color: #FF0000; color: #FFFFFF; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(255, 0, 0, 0.5); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease; } .sby-featured-card:hover .sby-featured-play-badge { transform: scale(1.1); box-shadow: 0 8px 26px rgba(255, 0, 0, 0.65); } .sby-featured-play-badge svg { margin-left: 3px; } .sby-duration-pill { position: absolute; bottom: 12px; right: 12px; background: rgba(5, 8, 13, 0.85); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; padding: 3px 8px; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 12px; font-weight: 600; color: #ffffff; letter-spacing: 0.02em; pointer-events: none; } .sby-featured-content-col { display: flex; flex-direction: column; justify-content: center; } .sby-featured-badge-row { display: flex; align-items: center; gap: 12px; margin-bottom: 0.75rem; } .sby-latest-pill { display: inline-block; background: rgba(40, 211, 238, 0.15); color: #28D3EE; border: 1px solid rgba(40, 211, 238, 0.3); border-radius: 9999px; padding: 4px 12px; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .sby-featured-date { font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13.5px; color: #94a3b8; } .sby-featured-title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 700; color: #ffffff; line-height: 1.25; letter-spacing: -0.015em; margin: 0 0 0.85rem; } .sby-featured-title a { color: #ffffff !important; text-decoration: none !important; transition: color 0.2s ease; } .sby-featured-title a:hover { color: #28D3EE !important; } .sby-featured-excerpt { font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15px; color: #cbd5e1; line-height: 1.6; margin: 0 0 1.25rem; } .sby-featured-meta-row { display: flex; align-items: center; gap: 10px; font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13.5px; color: #94a3b8; margin-bottom: 1.5rem; } .sby-meta-icon { vertical-align: -2px; margin-right: 4px; color: #94a3b8; } .sby-meta-separator { color: rgba(255, 255, 255, 0.2); } .sby-featured-cta { display: flex; align-items: center; gap: 12px; } /* -------------------------------------------------------------------------- SECTION BAR & GRID -------------------------------------------------------------------------- */ .sby-section-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 1.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .sby-section-heading { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: clamp(1.15rem, 3.8vw, 1.5rem); font-weight: 700; color: #ffffff; margin: 0; letter-spacing: -0.01em; line-height: 1.25; } .sby-section-count { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13.5px; font-weight: 500; color: #94a3b8; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 9999px; padding: 4px 12px; white-space: nowrap; flex-shrink: 0; } .sby-view-all-link { display: inline-flex; align-items: center; gap: 6px; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 600; color: #28D3EE !important; text-decoration: none !important; white-space: nowrap !important; flex-shrink: 0; transition: color 0.2s ease, transform 0.2s ease; } .sby-view-all-link span { white-space: nowrap !important; } .sby-view-all-link:hover { color: #38BDF8 !important; transform: translateX(3px); } @media (max-width: 640px) { .sby-section-bar { gap: 10px; margin-bottom: 1.25rem; } .sby-view-all-link { font-size: 13px; gap: 4px; } } .sby-videos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } @media (max-width: 1024px) { .sby-videos-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 640px) { .sby-videos-grid { grid-template-columns: 1fr; gap: 22px; } } /* -------------------------------------------------------------------------- VIDEO CARD COMPONENT -------------------------------------------------------------------------- */ .sby-video-card { background: #101726; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.28s ease; } .sby-video-card:hover { transform: translateY(-4px); border-color: rgba(40, 211, 238, 0.35); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45); } .sby-card-thumb-link { display: block; text-decoration: none; } .sby-card-thumb-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background-color: #0a0f18; } .sby-card-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .sby-video-card:hover .sby-card-thumb-img { transform: scale(1.05); } .sby-card-thumb-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; } .sby-video-card:hover .sby-card-thumb-overlay { background: rgba(0, 0, 0, 0.4); } .sby-play-badge { width: 48px; height: 48px; border-radius: 50%; background-color: #FF0000; color: #FFFFFF; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(255, 0, 0, 0.5); opacity: 0; transform: scale(0.85); transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .sby-play-badge svg { margin-left: 2px; } .sby-video-card:hover .sby-play-badge { opacity: 1; transform: scale(1); } .sby-card-content { padding: 18px; display: flex; flex-direction: column; flex-grow: 1; } .sby-card-title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16.5px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 44px; } .sby-card-title-link { color: #ffffff !important; text-decoration: none !important; transition: color 0.2s ease; } .sby-card-title-link:hover { color: #28D3EE !important; } .sby-card-channel-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .sby-card-channel-row .sby-channel-name { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13.5px; font-weight: 500; color: #94a3b8; } .sby-card-meta-row { display: flex; align-items: center; gap: 8px; font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; color: #94a3b8; margin-top: auto; } /* -------------------------------------------------------------------------- BOTTOM SUBSCRIBE SECTION (ARCHIVE) -------------------------------------------------------------------------- */ .sby-bottom-cta-section { margin-top: 4.5rem; } .sby-bottom-cta-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #0a0f18; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 32px 36px; flex-wrap: wrap; } .sby-bottom-cta-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sby-bottom-cta-text { flex: 1; min-width: 280px; } .sby-bottom-cta-heading { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1.35rem; font-weight: 700; color: #ffffff; margin: 0 0 6px; } .sby-bottom-cta-sub { font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14.5px; color: #94a3b8; margin: 0; line-height: 1.5; } .sby-bottom-cta-action { flex-shrink: 0; } @media (max-width: 768px) { .sby-bottom-cta-card { padding: 24px 20px; flex-direction: column; align-items: flex-start; } .sby-bottom-cta-action { width: 100%; } .sby-bottom-cta-action .sby-btn { width: 100%; } } /* -------------------------------------------------------------------------- PAGINATION -------------------------------------------------------------------------- */ .sby-pagination-wrap { margin-top: 3.5rem; display: flex; justify-content: center; } .sby-pagination-wrap ul.page-numbers { display: flex; align-items: center; gap: 8px; list-style: none !important; padding: 0 !important; margin: 0 !important; } .sby-pagination-wrap li { margin: 0 !important; padding: 0 !important; } .sby-pagination-wrap .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 8px; background: #101726; border: 1px solid rgba(255, 255, 255, 0.08); color: #cbd5e1 !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 600; text-decoration: none !important; transition: all 0.2s ease; } .sby-pagination-wrap .page-numbers:hover { border-color: #28D3EE; color: #28D3EE !important; } .sby-pagination-wrap .page-numbers.current { background-color: #28D3EE; border-color: #28D3EE; color: #05080d !important; } /* -------------------------------------------------------------------------- SINGLE VIDEO STYLES (CINEMA THEATRE) -------------------------------------------------------------------------- */ .sby-single-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .sby-nav-back-link { display: inline-flex; align-items: center; gap: 8px; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14.5px; font-weight: 600; color: #28D3EE !important; text-decoration: none !important; transition: color 0.2s ease, transform 0.2s ease; } .sby-nav-back-link:hover { color: #38BDF8 !important; transform: translateX(-3px); } .sby-nav-channel-tag { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; font-weight: 500; color: #94a3b8; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 9999px; padding: 4px 12px; } /* CINEMA STAGE & AMBIENT GLOW */ .sby-cinema-stage-section { margin-bottom: 2rem; } .sby-cinema-stage { position: relative; width: 100%; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); background-color: #000000; } @media (max-width: 768px) { .sby-cinema-stage { border-radius: 12px; } } .sby-cinema-ambient-glow { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(50px); opacity: 0.35; pointer-events: none; z-index: 0; transform: scale(1.1); } .sby-cinema-viewport { position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 9; background-color: #000000; } .sby-cinema-iframe { width: 100%; height: 100%; border: none; display: block; } /* VIDEO HEADER & META ACTION BAR */ .sby-single-header { margin-bottom: 2rem; } .sby-single-title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: clamp(1.5rem, 3.2vw, 2.35rem); font-weight: 700; color: #ffffff; line-height: 1.25; letter-spacing: -0.015em; margin: 0 0 1.25rem; } .sby-meta-action-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .sby-channel-profile { display: flex; align-items: center; gap: 12px; } .sby-channel-avatar { width: 44px; height: 44px; border-radius: 50%; background: #101726; border: 1px solid rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sby-channel-info { display: flex; flex-direction: column; } .sby-channel-name-wrap { display: flex; align-items: center; gap: 6px; } .sby-channel-profile .sby-channel-name { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15px; font-weight: 600; color: #ffffff; } .sby-channel-subtext { font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 12.5px; color: #94a3b8; } .sby-actions-group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .sby-chip-group { display: flex; align-items: center; gap: 8px; } .sby-chip { display: inline-flex; align-items: center; gap: 6px; background: #101726; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 9999px; padding: 7px 14px; font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; color: #cbd5e1; } .sby-btn-group { display: flex; align-items: center; gap: 10px; } @media (max-width: 768px) { .sby-meta-action-bar { flex-direction: column; align-items: flex-start; gap: 16px; } .sby-actions-group { width: 100%; justify-content: space-between; } } /* DESCRIPTION CARD */ .sby-desc-section { margin-bottom: 3.5rem; } .sby-desc-card { background: #101726; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 24px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2); } .sby-desc-header { margin-bottom: 12px; } .sby-desc-heading { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1.15rem; font-weight: 700; color: #ffffff; margin: 0; letter-spacing: -0.01em; } .sby-desc-body { font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15px; color: #cbd5e1; line-height: 1.65; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .sby-desc-body.is-collapsed { max-height: 140px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%); mask-image: linear-gradient(to bottom, black 65%, transparent 100%); } .sby-desc-body.is-expanded { max-height: none !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; } .sby-desc-link { color: #28D3EE !important; text-decoration: underline !important; text-underline-offset: 3px; word-break: break-all; transition: color 0.2s ease; } .sby-desc-link:hover { color: #38BDF8 !important; } .sby-desc-hashtag { color: #38BDF8; font-weight: 600; } .sby-desc-toggle-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; padding: 8px 0; margin-top: 8px; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 600; color: #28D3EE; cursor: pointer; transition: color 0.2s ease; } .sby-desc-toggle-btn:hover { color: #38BDF8; } .sby-toggle-icon { transition: transform 0.25s ease; } /* -------------------------------------------------------------------------- RELATED SECTION -------------------------------------------------------------------------- */ .sby-related-section { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } /* -------------------------------------------------------------------------- SHORTCODE EMBED WRAPPER ([youtube-feed-single]) -------------------------------------------------------------------------- */ .sby-single-embed-container { margin: 2rem 0; background: #101726; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; overflow: hidden; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45); } .sby-embed-meta-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: #0a0f18; border-top: 1px solid rgba(255, 255, 255, 0.06); flex-wrap: wrap; gap: 14px; } /* -------------------------------------------------------------------------- TOAST NOTIFICATION -------------------------------------------------------------------------- */ .sby-toast { position: fixed; bottom: 24px; right: 24px; background: #101726; border: 1px solid rgba(40, 211, 238, 0.4); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); color: #ffffff; border-radius: 9999px; padding: 12px 22px; display: inline-flex; align-items: center; gap: 8px; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 500; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); z-index: 999999; } .sby-toast.is-visible { opacity: 1; transform: translateY(0); } @media (max-width: 640px) { .sby-toast { left: 16px; right: 16px; bottom: 16px; justify-content: center; } } /* ========================================================================== SHOPPABLE VIDEO CAROUSEL - DIRECT FULL-CARD LINK (NO MODAL / POPUP) ========================================================================== */ .milano-shopable-video__item video, .milano-shopable-video__item img, .milano-shopable-video__item .milano-shopable-video__media, .milano-shopable-video__item .milano-shopable-video__product, .milano-shopable-video__item .milano-video-play-badge { pointer-events: none !important; } /* Remove Play Icon from Human Trials & Shoppable Video Cards per user request */ .milano-shopable-video__item .milano-video-play-badge, .milano-shopable-video__item .milano-play-btn-circle, .milano-video-play-badge { display: none !important; } .milano-shopable-video__item > a { pointer-events: auto !important; z-index: 10 !important; } #shoppable-modal, uix-modal#shoppable-modal { display: none !important; } /* ========================================================================== IMPECCABLE CRAFT: APPLE CINEMATIC SEAMLESS GRADIENT (HUMAN TRIALS) Option 2: Zero boxiness, full-bleed bottom gradient, grand & legible typography ========================================================================== */ .fifty-cat-badge { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; z-index: 6 !important; pointer-events: none !important; border-radius: 0 0 16px 16px !important; overflow: hidden !important; } /* Seamless Apple TV / Netflix Gradient: fades from deep obsidian at bottom to 100% transparent above */ .fifty-cat-badge__inner { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: stretch !important; width: 100% !important; box-sizing: border-box !important; padding: 56px 20px 22px 20px !important; min-height: 125px !important; background: linear-gradient( to top, rgba(3, 5, 12, 0.97) 0%, rgba(3, 5, 12, 0.88) 40%, rgba(3, 5, 12, 0.52) 72%, rgba(3, 5, 12, 0.15) 90%, transparent 100% ) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; transition: background 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* Enriched gradient depth on card hover */ .milano-shopable-video__item:hover .fifty-cat-badge__inner { background: linear-gradient( to top, rgba(3, 5, 12, 0.99) 0%, rgba(3, 5, 12, 0.92) 45%, rgba(3, 5, 12, 0.62) 75%, rgba(3, 5, 12, 0.22) 92%, transparent 100% ) !important; } /* Top Meta Row: Category Tag, Emblem & Action Arrow */ .fifty-cat-badge__meta, .fifty-cat-badge__header { display: flex !important; align-items: center !important; gap: 8px !important; width: 100% !important; margin-bottom: 8px !important; } /* 26px Category Icon Badge */ .fifty-cat-badge__emblem { width: 26px !important; height: 26px !important; min-width: 26px !important; border-radius: 7px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important; } .milano-shopable-video__item:hover .fifty-cat-badge__emblem { transform: scale(1.1) !important; } .fifty-cat-badge__emblem svg { display: block !important; width: 15px !important; height: 15px !important; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important; } /* Category Title (e.g. CHOLESTEROL, BLOOD SUGAR) */ .fifty-cat-badge__title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 13.5px !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; line-height: 1 !important; white-space: nowrap !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important; } /* Action Indicator Arrow pushed to the far right */ .fifty-cat-badge__action { display: flex !important; align-items: center !important; justify-content: center !important; margin-left: auto !important; color: rgba(255, 255, 255, 0.45) !important; flex-shrink: 0 !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease !important; } .milano-shopable-video__item:hover .fifty-cat-badge__action { transform: translateX(4px) !important; color: #ffffff !important; } /* Prominent Cinematic Headline (Formerly Subtitle - Now Grand & Legible for 50+) */ .fifty-cat-badge__headline, .fifty-cat-badge__subtitle { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 19.5px !important; font-weight: 700 !important; letter-spacing: -0.015em !important; color: #ffffff !important; line-height: 1.32 !important; margin: 0 !important; padding: 0 !important; display: block !important; white-space: normal !important; word-wrap: break-word !important; overflow-wrap: break-word !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.8) !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease !important; } .milano-shopable-video__item:hover .fifty-cat-badge__headline, .milano-shopable-video__item:hover .fifty-cat-badge__subtitle { transform: translateY(-2px) !important; color: #ffffff !important; } /* Category-specific Accents */ /* 1. BLOOD SUGAR (Vivid Ruby Coral) */ .fifty-cat-badge--blood-sugar .fifty-cat-badge__emblem { background: radial-gradient(circle at 35% 30%, rgba(255, 82, 82, 0.45) 0%, rgba(255, 107, 74, 0.2) 100%) !important; border: 1px solid rgba(255, 107, 74, 0.7) !important; color: #FF5252 !important; box-shadow: 0 2px 12px rgba(255, 82, 82, 0.4) !important; } .fifty-cat-badge--blood-sugar .fifty-cat-badge__title { color: #FF6B4A !important; } .milano-shopable-video__item:hover .fifty-cat-badge--blood-sugar .fifty-cat-badge__action { color: #FF6B4A !important; } /* 2. BONES & JOINTS (Electric Arctic Cyan) */ .fifty-cat-badge--bones-joints .fifty-cat-badge__emblem { background: radial-gradient(circle at 35% 30%, rgba(0, 229, 255, 0.45) 0%, rgba(40, 211, 238, 0.2) 100%) !important; border: 1px solid rgba(40, 211, 238, 0.7) !important; color: #00E5FF !important; box-shadow: 0 2px 12px rgba(0, 229, 255, 0.4) !important; } .fifty-cat-badge--bones-joints .fifty-cat-badge__title { color: #28D3EE !important; } .milano-shopable-video__item:hover .fifty-cat-badge--bones-joints .fifty-cat-badge__action { color: #28D3EE !important; } /* 3. CHOLESTEROL (Royal Amber Gold) */ .fifty-cat-badge--cholesterol .fifty-cat-badge__emblem { background: radial-gradient(circle at 35% 30%, rgba(251, 191, 36, 0.45) 0%, rgba(245, 158, 11, 0.2) 100%) !important; border: 1px solid rgba(251, 191, 36, 0.7) !important; color: #FBBF24 !important; box-shadow: 0 2px 12px rgba(251, 191, 36, 0.4) !important; } .fifty-cat-badge--cholesterol .fifty-cat-badge__title { color: #FBBF24 !important; } .milano-shopable-video__item:hover .fifty-cat-badge--cholesterol .fifty-cat-badge__action { color: #FBBF24 !important; } /* 4. SLEEP & REST (Twilight Amethyst) */ .fifty-cat-badge--sleep-rest .fifty-cat-badge__emblem { background: radial-gradient(circle at 35% 30%, rgba(167, 139, 250, 0.45) 0%, rgba(139, 92, 246, 0.2) 100%) !important; border: 1px solid rgba(167, 139, 250, 0.7) !important; color: #A78BFA !important; box-shadow: 0 2px 12px rgba(167, 139, 250, 0.4) !important; } .fifty-cat-badge--sleep-rest .fifty-cat-badge__title { color: #C4B5FD !important; } .milano-shopable-video__item:hover .fifty-cat-badge--sleep-rest .fifty-cat-badge__action { color: #C4B5FD !important; } /* General / Fallback Category */ .fifty-cat-badge--general-health .fifty-cat-badge__emblem { background: radial-gradient(circle at 35% 30%, rgba(40, 211, 238, 0.4) 0%, rgba(40, 211, 238, 0.15) 100%); border: 1px solid rgba(40, 211, 238, 0.55); color: #28D3EE; } /* Responsive: Mobile Optimization - Human Trials 2-Card Row (2x2 Grid, Minimal Margins & Padding) */ @media (max-width: 767px) { /* 0. Maximize Screen Real Estate: Minimal Margin & Padding for Edge-to-Edge Feel */ #willie-recommends, .elementor-element-75ddddf#willie-recommends { padding-left: 8px !important; padding-right: 8px !important; } #willie-recommends .e-con-inner { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; width: 100% !important; } #willie-recommends .elementor-widget-container { padding: 0 !important; margin: 0 !important; } /* 1. Ensure Widget and Swiper are visible and 2-Column Grid */ #willie-recommends .elementor-widget-milano-shopable-video-carousel, #willie-recommends uix-slider { display: block !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } #willie-recommends .swiper { overflow: visible !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } #willie-recommends .swiper-wrapper { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; height: auto !important; transform: none !important; box-sizing: border-box !important; padding: 0 !important; margin: 0 !important; } #willie-recommends .swiper-slide { width: 100% !important; max-width: 100% !important; margin: 0 !important; height: auto !important; transform: none !important; } /* 2. Hide Mobile Friction Controls (Arrows & Pagination Dots) */ #willie-recommends .swiper-pagination, #willie-recommends .swiper-navigation, #willie-recommends .swiper-button-prev, #willie-recommends .swiper-button-next { display: none !important; } /* 3. Card Architecture, Apple Border-Radius & Tactile Elevation */ #willie-recommends .milano-shopable-video__item { width: 100% !important; border-radius: 14px !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38) !important; background: #090B10 !important; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important; } #willie-recommends .milano-shopable-video__item:active { transform: scale(0.975) !important; } /* 4. Video Canvas: Authentic 9:16 Full Portrait Cinema Ratio */ #willie-recommends .milano-shopable-video__media { width: 100% !important; height: auto !important; aspect-ratio: 9 / 16 !important; overflow: hidden !important; position: relative !important; } #willie-recommends .milano-video--elementor { width: 100% !important; height: 100% !important; aspect-ratio: 9 / 16 !important; object-fit: cover !important; object-position: center center !important; border-radius: 14px !important; display: block !important; } /* 5. Apple Gradient & Bold Prominent Typography for 2-Column Grid (Grand & Legible for 50+) */ .fifty-cat-badge { border-radius: 0 0 14px 14px !important; } .fifty-cat-badge__inner { padding: 44px 12px 14px 12px !important; min-height: 94px !important; background: linear-gradient( to top, rgba(3, 5, 12, 0.98) 0%, rgba(3, 5, 12, 0.92) 45%, rgba(3, 5, 12, 0.65) 75%, rgba(3, 5, 12, 0.18) 92%, transparent 100% ) !important; } .fifty-cat-badge__meta, .fifty-cat-badge__header { gap: 6px !important; margin-bottom: 6px !important; } .fifty-cat-badge__emblem { width: 22px !important; height: 22px !important; min-width: 22px !important; border-radius: 6px !important; } .fifty-cat-badge__emblem svg { width: 12px !important; height: 12px !important; } .fifty-cat-badge__title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95) !important; } .fifty-cat-badge__action { margin-left: auto !important; color: rgba(255, 255, 255, 0.6) !important; } .fifty-cat-badge__action svg { width: 13px !important; height: 13px !important; } .fifty-cat-badge__headline, .fifty-cat-badge__subtitle { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: clamp(15px, 4.2vw, 17px) !important; line-height: 1.22 !important; font-weight: 800 !important; letter-spacing: -0.015em !important; color: #ffffff !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.98), 0 1px 3px rgba(0, 0, 0, 0.9) !important; display: block !important; } } /* ========================================================================== FIFTY PROTOCOL EXPERIENCE: BLOOD SUGAR (4-PRODUCT GALLERY & FIFTY CRAFT) Full English, Zero Boxiness, Spacious Obsidian Canvas, Brand Button, Lightbox & Zoom ========================================================================== */ .page-id-3127 #content, .page-id-3149 #content, .page-id-3151 #content, .page-id-3153 #content, .page-id-3127 .site-content, .page-id-3149 .site-content, .page-id-3151 .site-content, .page-id-3153 .site-content, .page-id-3127 #primary, .page-id-3149 #primary, .page-id-3151 #primary, .page-id-3153 #primary, .page-id-3127 .content-area, .page-id-3149 .content-area, .page-id-3151 .content-area, .page-id-3153 .content-area, .page-id-3127 .site-main, .page-id-3149 .site-main, .page-id-3151 .site-main, .page-id-3153 .site-main, .page-id-3127 .entry-content, .page-id-3149 .entry-content, .page-id-3151 .entry-content, .page-id-3153 .entry-content, .page-id-3127 .col-full, .page-id-3149 .col-full, .page-id-3151 .col-full, .page-id-3153 .col-full, .page-id-3127 article.page, .page-id-3149 article.page, .page-id-3151 article.page, .page-id-3153 article.page { background-color: #050811 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; width: 100% !important; } /* Page 3190: Make Them Jealous Standalone Canvas (Matches Homepage #030406) */ .page-id-3190, .page-id-3190 #content, .page-id-3190 .site-content, .page-id-3190 #primary, .page-id-3190 .content-area, .page-id-3190 .site-main, .page-id-3190 .entry-content, .page-id-3190 .col-full, .page-id-3190 article.page { background-color: #030406 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; width: 100% !important; } /* Fifty Jealous Page Container: 1:1 match with Homepage #thailand-insights (.elementor-element-9ed6dc4) */ .fifty-jealous-page#thailand-insights { background-color: #030406 !important; padding: 85px 24px 95px !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .fifty-jealous-page .e-con-inner { max-width: 1240px !important; margin: 0 auto !important; width: 100% !important; } .fifty-jealous-page .elementor-element-1fed37a .elementor-heading-title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; color: #ffffff !important; font-size: clamp(2.2rem, 4vw, 2.8rem) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; text-transform: uppercase !important; text-align: center !important; margin: 0 0 2.5rem 0 !important; } @media (max-width: 900px) { .fifty-jealous-page#thailand-insights { padding: 44px 12px 60px !important; } .fifty-jealous-page .elementor-element-1fed37a .elementor-heading-title { font-size: clamp(1.4rem, 6vw, 1.75rem) !important; margin-bottom: 1.25rem !important; } } @media (max-width: 600px) { .fifty-jealous-page#thailand-insights { padding: 36px 6px 50px !important; } } /* Explicit Make Them Jealous 1:1 Match with Homepage #thailand-insights */ body:not(.logged-in) #sby_mod_error, body:not(.logged-in) .sby_mod_error { display: none !important; } .page-id-3190 .sb_youtube, .fifty-jealous-page .sb_youtube { margin: 0 auto !important; max-width: 1240px !important; width: 100% !important; padding: 0 10px !important; } .page-id-3190 .sb_youtube .sby_items_wrap, .fifty-jealous-page .sb_youtube .sby_items_wrap { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 28px !important; padding: 12px 0 20px 0 !important; float: none !important; width: 100% !important; } .page-id-3190 .sb_youtube .sby_items_wrap::after, .fifty-jealous-page .sb_youtube .sby_items_wrap::after { display: none !important; } .page-id-3190 .sb_youtube .sby_item, .fifty-jealous-page .sb_youtube .sby_item { width: 100% !important; float: none !important; display: flex !important; margin: 0 !important; padding: 0 !important; cursor: pointer !important; } .page-id-3190 .sb_youtube .sby_video_thumbnail_wrap, .fifty-jealous-page .sb_youtube .sby_video_thumbnail_wrap { position: relative !important; width: 100% !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; background: #00171d !important; border-radius: 17px 17px 0 0 !important; float: none !important; } .page-id-3190 .sb_youtube .sby_video_thumbnail, .fifty-jealous-page .sb_youtube .sby_video_thumbnail, .page-id-3190 .sb_youtube .sby_video_thumbnail img, .fifty-jealous-page .sb_youtube .sby_video_thumbnail img { display: block !important; width: 100% !important; height: 100% !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; object-position: center top !important; background-size: cover !important; background-position: center top !important; } .page-id-3190 .sb_youtube .sby_video_thumbnail .sby_duration_counter, .fifty-jealous-page .sb_youtube .sby_video_thumbnail .sby_duration_counter { position: absolute !important; bottom: 12px !important; right: 12px !important; background: rgba(0, 16, 22, 0.92) !important; color: #ffffff !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.5px !important; padding: 3px 9px !important; border-radius: 9999px !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important; z-index: 6 !important; } .page-id-3190 .sb_youtube .sby_inner_item, .fifty-jealous-page .sb_youtube .sby_inner_item { background-color: #0b111e !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 18px !important; overflow: hidden !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45) !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease !important; display: flex !important; flex-direction: column !important; width: 100% !important; } .page-id-3190 .sb_youtube .sby_item:hover .sby_inner_item, .fifty-jealous-page .sb_youtube .sby_item:hover .sby_inner_item { transform: translateY(-5px) !important; border-color: rgba(40, 211, 238, 0.45) !important; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65) !important; } .page-id-3190 .sb_youtube .sby_video_title_wrap, .fifty-jealous-page .sb_youtube .sby_video_title_wrap { margin: 0 0 10px 0 !important; } .page-id-3190 .sb_youtube .sby_video_title, .fifty-jealous-page .sb_youtube .sby_video_title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; color: #ffffff !important; font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -0.015em !important; line-height: 1.4 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; min-height: calc(1.25rem * 1.4 * 2) !important; transition: color 0.2s ease !important; } .page-id-3190 .sb_youtube .sby_item:hover .sby_video_title, .fifty-jealous-page .sb_youtube .sby_item:hover .sby_video_title { color: #28D3EE !important; } .page-id-3190 .sb_youtube .sby_meta, .fifty-jealous-page .sb_youtube .sby_meta, .sb_youtube .sby_meta { order: -1 !important; margin: 0 0 8px 0 !important; display: flex !important; align-items: center !important; gap: 6px !important; } /* Hide broken empty view count loader ("• views •") so only clean publication date is shown */ .sb_youtube .sby_meta .sby_view_count_wrap, .sb_youtube .sby_meta .sby_date_wrap::before { display: none !important; content: none !important; } .page-id-3190 .sb_youtube .sby_meta .sby_date, .page-id-3190 .sb_youtube .sby_meta .sby_view_count, .fifty-jealous-page .sb_youtube .sby_meta .sby_date, .fifty-jealous-page .sb_youtube .sby_meta .sby_view_count, .sb_youtube .sby_meta .sby_date { font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.2px !important; color: #94a3b8 !important; } .page-id-3190 .sb_youtube .sby_caption, .fifty-jealous-page .sb_youtube .sby_caption { font-family: -apple-system, BlinkMacSystemFont, "Nunito Sans", sans-serif !important; font-size: 14px !important; line-height: 1.55 !important; color: #cbd5e1 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; overflow: hidden !important; text-overflow: ellipsis !important; min-height: calc(14px * 1.55 * 2) !important; } .page-id-3190 .sb_youtube .sby_caption_wrap .sby_expand, .fifty-jealous-page .sb_youtube .sby_caption_wrap .sby_expand { display: none !important; } .page-id-3190 .sb_youtube .sby_footer, .fifty-jealous-page .sb_youtube .sby_footer { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 16px !important; margin: 44px auto 10px !important; padding: 0 !important; clear: both !important; width: 100% !important; } .page-id-3190 .sb_youtube .sby_footer .sby_load_btn, .page-id-3190 .sb_youtube .sby_footer .sby_follow_btn a, .fifty-jealous-page .sb_youtube .sby_footer .sby_load_btn, .fifty-jealous-page .sb_youtube .sby_footer .sby_follow_btn a { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: auto !important; min-width: 250px !important; max-width: fit-content !important; height: 54px !important; margin: 0 !important; padding: 0 38px !important; border-radius: 9999px !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Nunito Sans", sans-serif !important; font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; background: linear-gradient(135deg, #00252e 0%, #0a3a46 100%) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; box-shadow: 0 10px 25px -5px rgba(0, 37, 46, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; cursor: pointer !important; text-decoration: none !important; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; box-sizing: border-box !important; } @media (min-width: 768px) and (max-width: 1024px) { .page-id-3190 .sb_youtube .sby_items_wrap, .fifty-jealous-page .sb_youtube .sby_items_wrap { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; } } @media (max-width: 767px) { .page-id-3190 .sb_youtube .sby_items_wrap, .fifty-jealous-page .sb_youtube .sby_items_wrap { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px 6px !important; padding: 4px 0 16px !important; } .page-id-3190 .sb_youtube .sby_info, .fifty-jealous-page .sb_youtube .sby_info { padding: 8px 6px 10px !important; } .page-id-3190 .sb_youtube .sby_video_title, .fifty-jealous-page .sb_youtube .sby_video_title { font-size: 14px !important; line-height: 1.35 !important; min-height: calc(14px * 1.35 * 2) !important; max-height: calc(14px * 1.35 * 4) !important; -webkit-line-clamp: 4 !important; line-clamp: 4 !important; } .page-id-3190 .sb_youtube .sby_caption_wrap, .fifty-jealous-page .sb_youtube .sby_caption_wrap { display: none !important; } .page-id-3190 .sb_youtube .sby_footer, .fifty-jealous-page .sb_youtube .sby_footer { flex-direction: column !important; gap: 12px !important; margin-top: 24px !important; } .page-id-3190 .sb_youtube .sby_footer .sby_load_btn, .page-id-3190 .sb_youtube .sby_footer .sby_follow_btn a, .fifty-jealous-page .sb_youtube .sby_footer .sby_load_btn, .fifty-jealous-page .sb_youtube .sby_footer .sby_follow_btn a { width: 100% !important; max-width: 320px !important; min-width: 0 !important; height: 48px !important; padding: 0 20px !important; font-size: 13px !important; } } /* Hide default theme static page header & duplicate breadcrumbs on all Human Trials protocol pages & Make Them Jealous */ .page-id-3127 #page-header, .page-id-3149 #page-header, .page-id-3151 #page-header, .page-id-3153 #page-header, .page-id-3190 #page-header, .page-id-3127 .page-header, .page-id-3149 .page-header, .page-id-3151 .page-header, .page-id-3153 .page-header, .page-id-3190 .page-header, .page-template-default.page-id-3127 .static-page-header, .page-template-default.page-id-3149 .static-page-header, .page-template-default.page-id-3151 .static-page-header, .page-template-default.page-id-3153 .static-page-header, .page-template-default.page-id-3190 .static-page-header { display: none !important; } .fifty-protocol-experience { max-width: 1240px; margin: 0 auto; padding: 56px 24px 140px !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #f1f5f9; background: transparent; box-sizing: border-box; } .fifty-protocol-experience br { display: none !important; } .fifty-protocol-experience p:empty { display: none !important; } /* 1. Header & Hierarchy */ .fifty-protocol-header { position: relative !important; padding: 40px 0 60px 0 !important; margin-bottom: 100px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; background: transparent !important; /* Zero red glow on background */ text-align: center !important; } .fifty-protocol-header::after { content: '' !important; position: absolute !important; bottom: -1px !important; left: 50% !important; transform: translateX(-50%) !important; width: 240px !important; height: 2px !important; background: linear-gradient(90deg, transparent 0%, #ff453a 50%, transparent 100%) !important; box-shadow: 0 0 12px rgba(255, 69, 58, 0.5) !important; } .fifty-protocol-nav-row { display: none !important; /* Hidden on desktop to avoid visual redundancy with main navigation menu */ margin: 0 auto 18px !important; text-align: center !important; } /* Sub-category Hierarchy Eyebrow (Clean, seamless floating text) */ .fifty-category-pill { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; line-height: 1.5 !important; text-align: center !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 auto !important; } .fifty-category-pill * { display: inline !important; vertical-align: middle !important; font-size: 16px !important; } .fifty-pill-dot { display: inline-block !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #ff453a !important; box-shadow: 0 0 6px #ff453a !important; vertical-align: middle !important; margin-right: 8px !important; margin-bottom: 2px !important; flex-shrink: 0 !important; } .fifty-pill-parent { color: #ff8e75 !important; font-weight: 600 !important; font-size: 16px !important; } /* Category Theme Overrides for Pill */ .fifty-theme-blood-sugar .fifty-pill-dot { background: #ff453a !important; box-shadow: 0 0 6px #ff453a !important; } .fifty-theme-blood-sugar .fifty-pill-parent { color: #ff8e75 !important; } .fifty-theme-bones-joints .fifty-pill-dot { background: #22d3ee !important; box-shadow: 0 0 6px #22d3ee !important; } .fifty-theme-bones-joints .fifty-pill-parent { color: #67e8f9 !important; } .fifty-theme-sleep-rest .fifty-pill-dot { background: #c084fc !important; box-shadow: 0 0 6px #c084fc !important; } .fifty-theme-sleep-rest .fifty-pill-parent { color: #d8b4fe !important; } .fifty-theme-cholesterol .fifty-pill-dot { background: #fbbf24 !important; box-shadow: 0 0 6px #fbbf24 !important; } .fifty-theme-cholesterol .fifty-pill-parent { color: #fde68a !important; } .fifty-pill-sep, .fifty-pill-current { display: none !important; } .fifty-hero-title { font-size: clamp(2rem, 3.8vw, 3rem) !important; font-weight: 800 !important; letter-spacing: -0.025em !important; line-height: 1.15 !important; color: #ffffff !important; margin: 0 auto 16px !important; text-transform: uppercase !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 16px !important; } .fifty-title-icon-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 52px !important; height: 52px !important; min-width: 52px !important; border-radius: 16px !important; background: radial-gradient(circle at 35% 35%, rgba(255, 69, 58, 0.45) 0%, rgba(26, 5, 10, 0.94) 100%) !important; border: 1.5px solid rgba(255, 69, 58, 0.75) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35) !important; /* Zero external glow */ flex-shrink: 0 !important; animation: none !important; } .fifty-title-icon-badge--blood-sugar { background: radial-gradient(circle at 35% 35%, rgba(255, 69, 58, 0.45) 0%, rgba(26, 5, 10, 0.94) 100%) !important; border-color: rgba(255, 69, 58, 0.75) !important; } .fifty-title-icon-badge--bones-joints { background: radial-gradient(circle at 35% 35%, rgba(6, 182, 212, 0.45) 0%, rgba(5, 25, 35, 0.94) 100%) !important; border-color: rgba(6, 182, 212, 0.75) !important; } .fifty-title-icon-badge--sleep-rest { background: radial-gradient(circle at 35% 35%, rgba(168, 85, 247, 0.45) 0%, rgba(20, 10, 35, 0.94) 100%) !important; border-color: rgba(168, 85, 247, 0.75) !important; } .fifty-title-icon-badge--cholesterol { background: radial-gradient(circle at 35% 35%, rgba(245, 158, 11, 0.45) 0%, rgba(35, 22, 5, 0.94) 100%) !important; border-color: rgba(245, 158, 11, 0.75) !important; } .fifty-title-icon-badge svg { width: 26px !important; height: 26px !important; display: block !important; } .fifty-hero-sub { font-size: 20px !important; font-weight: 400 !important; line-height: 1.65 !important; color: #f1f5f9 !important; max-width: 750px !important; margin: 0 auto !important; text-align: center !important; letter-spacing: -0.01em !important; } @media (max-width: 768px) { .fifty-hero-sub { font-size: 16.5px !important; line-height: 1.6 !important; color: #e2e8f0 !important; padding: 0 16px !important; } } /* 2. Recommended Products Section Header */ .fifty-products-header { text-align: center !important; max-width: 980px !important; margin: 0 auto 72px auto !important; padding: 0 20px !important; box-sizing: border-box !important; } .fifty-products-eyebrow { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: var(--protocol-accent, #fbbf24) !important; background: rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.08) !important; border: 1px solid rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.22) !important; border-radius: 9999px !important; padding: 6px 18px !important; margin-bottom: 18px !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important; } .fifty-products-title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: clamp(24px, 2.5vw, 36px) !important; font-weight: 800 !important; letter-spacing: -0.02em !important; text-transform: uppercase !important; color: #ffffff !important; line-height: 1.25 !important; margin: 0 0 16px 0 !important; } .fifty-products-sub { font-size: clamp(16px, 1.2vw, 18px) !important; line-height: 1.7 !important; color: rgba(255, 255, 255, 0.82) !important; max-width: 780px !important; margin: 0 auto !important; text-wrap: balance !important; letter-spacing: -0.01em !important; } /* 3. Protocol Row (Symmetrical 2-Column Grid, Harmonized Height) */ .fifty-protocol-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 64px !important; align-items: stretch !important; margin-bottom: 88px !important; background: transparent !important; border: none !important; box-shadow: none !important; } .fifty-protocol-row--reverse { grid-template-columns: 1fr 1fr !important; } .fifty-protocol-row--reverse .fifty-media-column { order: 2 !important; } .fifty-protocol-row--reverse .fifty-info-column { order: 1 !important; } /* 3. Media Column: Interactive Stage Viewport + 4 Navigation Thumbnails */ .fifty-media-column { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 12px !important; width: 100% !important; } .fifty-stage-viewport { position: relative !important; width: 100% !important; aspect-ratio: 16 / 9 !important; border-radius: 20px !important; overflow: hidden !important; background: #080d18 !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1) !important; } .fifty-stage-slide { display: none !important; width: 100% !important; height: 100% !important; } .fifty-stage-slide.is-active { display: block !important; } /* Stage Slide 2: Interactive Photo Preview */ .fifty-stage-img-wrap { position: relative !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #060912 !important; cursor: zoom-in !important; } .fifty-stage-img-wrap img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; cursor: zoom-in !important; } .fifty-stage-controls { position: absolute !important; bottom: 12px !important; left: 14px !important; right: 14px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; z-index: 10 !important; } .fifty-stage-zoom-btn, .fifty-stage-back-btn { background: rgba(10, 20, 35, 0.88) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; color: #ffffff !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; padding: 9px 18px !important; border-radius: 9999px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; transition: all 0.2s ease !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important; } .fifty-stage-zoom-btn:hover, .fifty-stage-back-btn:hover { background: rgba(255, 255, 255, 0.16) !important; border-color: #ff453a !important; } .fifty-video-wrapper, button.fifty-video-wrapper { appearance: none !important; -webkit-appearance: none !important; border: none !important; margin: 0 !important; text-align: left !important; font: inherit !important; color: inherit !important; display: block !important; position: relative !important; width: 100% !important; height: 100% !important; padding: 0 !important; border-radius: 20px !important; overflow: hidden !important; background: #080d18 !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; touch-action: manipulation !important; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important; box-sizing: border-box !important; } .fifty-video-wrapper * { pointer-events: none !important; } .fifty-video-wrapper:hover { transform: translateY(-3px) !important; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.88), 0 0 0 1px rgba(255, 107, 53, 0.6) !important; } .fifty-video-poster { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; pointer-events: none !important; } .fifty-video-wrapper:hover .fifty-video-poster { transform: scale(1.03) !important; } .fifty-video-scrim { position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, rgba(3, 7, 18, 0.35) 0%, rgba(3, 7, 18, 0.1) 40%, rgba(3, 7, 18, 0.75) 100%) !important; pointer-events: none !important; } .fifty-video-tag-top { position: absolute !important; top: 14px !important; left: 14px !important; z-index: 2 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 6px 14px !important; background: rgba(4, 7, 15, 0.8) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 9999px !important; color: #f1f5f9 !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; pointer-events: none !important; } .fifty-video-live-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #ff3b30 !important; box-shadow: 0 0 8px #ff3b30 !important; } /* Video top badge, play button & Full Screen Badge removed per user feedback (clean undistracted thumbnail) */ .fifty-video-tag-top, .fifty-video-play-btn, .fifty-fullscreen-badge { display: none !important; } .fifty-video-bar-bottom { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; padding: 14px 18px !important; pointer-events: none !important; } .fifty-video-title-hint { font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; color: #ffffff !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 95% !important; } /* 4 Product Gallery Images directly beneath video (150x150 Ratio 1:1 fluid responsive) */ .fifty-video-gallery { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } button.fifty-gallery-item, .fifty-gallery-item { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 1 / 1 !important; border-radius: 14px !important; overflow: hidden !important; background: #0d1527 !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease !important; cursor: pointer !important; position: relative !important; margin: 0 !important; padding: 0 !important; outline: none !important; -webkit-tap-highlight-color: transparent !important; touch-action: manipulation !important; box-sizing: border-box !important; line-height: 0 !important; appearance: none !important; -webkit-appearance: none !important; } .fifty-gallery-item * { pointer-events: none !important; } .fifty-gallery-item img { width: 100% !important; height: 100% !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; display: block !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 13px !important; pointer-events: none !important; transition: transform 0.35s ease !important; } .fifty-gallery-item:hover { transform: translateY(-3px) !important; border-color: rgba(255, 107, 53, 0.8) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 107, 53, 0.3) !important; } .fifty-gallery-item:hover img { transform: scale(1.06) !important; } /* 4. Info Column (Vertically Centered & Rhythmical) */ .fifty-info-column { display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 20px !important; width: 100% !important; box-sizing: border-box !important; } .fifty-meta-row { display: flex !important; align-items: center !important; gap: 10px !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; color: #94a3b8 !important; flex-wrap: wrap !important; margin: 0 !important; } .fifty-stars { color: #f59e0b !important; letter-spacing: 1.5px !important; font-size: 16px !important; line-height: 1 !important; font-weight: 800 !important; } .fifty-meta-dot { color: rgba(255, 255, 255, 0.25) !important; } .fifty-meta-text { color: #94a3b8 !important; font-weight: 500 !important; font-size: 16px !important; } .fifty-meta-tag { font-size: 16px !important; font-weight: 600 !important; color: #cbd5e1 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; padding: 4px 12px !important; border-radius: 9999px !important; } .fifty-herb-heading-group { margin: 0 !important; } .fifty-herb-name { font-size: clamp(1.6rem, 2.5vw, 2.1rem) !important; font-weight: 800 !important; letter-spacing: -0.025em !important; line-height: 1.15 !important; color: #ffffff !important; margin: 0 !important; text-transform: uppercase !important; } .fifty-herb-latin { font-size: 16px !important; font-weight: 500 !important; color: #94a3b8 !important; letter-spacing: 0.02em !important; display: block !important; } /* Integrated Clinical Summary Card (Calm Editorial Block, No Jarring High-Contrast Metric) */ .fifty-result-card { display: block !important; padding: 20px 24px !important; border-radius: 14px !important; background: rgba(255, 255, 255, 0.025) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important; transition: border-color 0.25s ease !important; } .fifty-protocol-row--reverse .fifty-result-card { background: rgba(255, 255, 255, 0.025) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } /* Removed flashy metric number per user requirement to eliminate visual noise */ .fifty-result-metric { display: none !important; } .fifty-result-body { display: flex !important; flex-direction: column !important; gap: 6px !important; } .fifty-result-label { font-family: 'Outfit', sans-serif !important; font-size: 18px !important; font-weight: 700 !important; color: #ffffff !important; line-height: 1.4 !important; letter-spacing: -0.01em !important; } .fifty-result-desc { font-size: 16px !important; line-height: 1.65 !important; color: #cbd5e1 !important; margin: 0 !important; } /* Clean Spec List */ .fifty-spec-clean-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } .fifty-spec-clean-list li { display: flex !important; align-items: baseline !important; gap: 12px !important; font-size: 16px !important; line-height: 1.6 !important; color: #cbd5e1 !important; } .fifty-spec-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #ff453a !important; flex-shrink: 0 !important; margin-top: 8px !important; } .fifty-protocol-row--reverse .fifty-spec-dot { background: #38bdf8 !important; } /* Unified Protocol Brief */ .fifty-protocol-brief { background: rgba(255, 255, 255, 0.025) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 12px !important; padding: 16px 20px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } .fifty-protocol-row--reverse .fifty-protocol-brief { border-color: rgba(56, 189, 248, 0.22) !important; } .fifty-protocol-badge { font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; color: #ff453a !important; text-transform: uppercase !important; } .fifty-protocol-row--reverse .fifty-protocol-badge { color: #38bdf8 !important; } .fifty-protocol-text { font-size: 16px !important; line-height: 1.65 !important; color: #cbd5e1 !important; margin: 0 !important; } /* Subtle Unified Trust Row */ .fifty-trust-row { display: flex !important; align-items: center !important; gap: 16px !important; flex-wrap: wrap !important; margin-top: 4px !important; } .fifty-trust-item { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 500 !important; color: #94a3b8 !important; } .fifty-trust-item svg { color: #64748b !important; width: 16px !important; height: 16px !important; } /* 5. Buy Strip & Fifty Signature Button (Firmly Bottom-Anchored) */ .fifty-buy-strip { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 20px !important; padding-top: 20px !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; margin-top: auto !important; } .fifty-price-lockup { display: flex !important; align-items: baseline !important; gap: 6px !important; } .fifty-currency-amount { font-size: 2.4rem !important; font-weight: 800 !important; font-family: 'Outfit', sans-serif !important; color: #ffffff !important; line-height: 1 !important; } .fifty-supply-note { font-size: 16px !important; color: #94a3b8 !important; font-weight: 500 !important; } /* FiFTY Signature Obsidian Teal Button with Animated Arrow */ .fifty-btn-action { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; height: 54px !important; padding: 0 34px !important; border-radius: 9999px !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; text-transform: uppercase !important; background: linear-gradient(135deg, #00252e 0%, #0a3a46 100%) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; box-shadow: 0 10px 25px -5px rgba(0, 37, 46, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; cursor: pointer !important; text-decoration: none !important; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; position: relative !important; outline: none !important; user-select: none !important; -webkit-tap-highlight-color: transparent !important; } .fifty-btn-action::after { content: "→" !important; display: inline-block !important; margin-left: 4px !important; font-size: 16px !important; line-height: 1 !important; color: rgba(255, 255, 255, 0.85) !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease !important; } .fifty-btn-action:hover { background: linear-gradient(135deg, #00252e 0%, #0a3a46 100%) !important; border-color: rgba(255, 255, 255, 0.25) !important; box-shadow: 0 12px 28px -4px rgba(0, 37, 46, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; transform: translateY(-2px) scale(1.015) !important; color: #ff6b35 !important; } .fifty-btn-action:hover span { color: #ff6b35 !important; } .fifty-btn-action:hover::after { color: #ff6b35 !important; transform: translateX(5px) !important; } /* 6. Hairline Divider */ .fifty-protocol-divider { height: 1px !important; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 20%, rgba(255, 107, 53, 0.4) 50%, rgba(255, 255, 255, 0.12) 80%, transparent 100%) !important; margin: 100px 0 !important; border: none !important; } /* 7. Lightbox Modal System */ .fifty-modal { position: fixed !important; inset: 0 !important; z-index: 999999 !important; display: none !important; align-items: center !important; justify-content: center !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } .fifty-modal.is-active { display: flex !important; opacity: 1 !important; pointer-events: auto !important; } .fifty-modal-backdrop { position: absolute !important; inset: 0 !important; background: rgba(4, 7, 15, 0.94) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; cursor: pointer !important; } button.fifty-modal-close, .fifty-modal-close, button.fifty-video-modal-close, .fifty-video-modal-close { position: fixed !important; top: 24px !important; right: 28px !important; width: 44px !important; height: 44px !important; min-width: 44px !important; max-width: 44px !important; min-height: 44px !important; max-height: 44px !important; aspect-ratio: 1 / 1 !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; background: rgba(18, 24, 38, 0.78) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; z-index: 1000000 !important; transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important; outline: none !important; appearance: none !important; -webkit-appearance: none !important; box-sizing: border-box !important; line-height: 1 !important; } .fifty-modal-close .fifty-svg-close, .fifty-video-modal-close .fifty-svg-close { width: 16px !important; height: 16px !important; stroke: #ffffff !important; stroke-width: 2.4 !important; pointer-events: none !important; display: block !important; transition: transform 0.25s ease, stroke 0.25s ease !important; } button.fifty-modal-close:hover, .fifty-modal-close:hover, button.fifty-video-modal-close:hover, .fifty-video-modal-close:hover { background: rgba(255, 69, 58, 0.9) !important; border-color: rgba(255, 110, 100, 1) !important; transform: rotate(90deg) scale(1.08) !important; box-shadow: 0 0 28px rgba(255, 69, 58, 0.75), 0 8px 24px rgba(0, 0, 0, 0.8) !important; color: #ffffff !important; } button.fifty-modal-close:active, .fifty-modal-close:active, button.fifty-video-modal-close:active, .fifty-video-modal-close:active { transform: rotate(90deg) scale(0.92) !important; } /* Image Modal */ .fifty-modal-container { position: relative !important; z-index: 10 !important; width: 92vw !important; max-width: 1000px !important; height: 86vh !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: space-between !important; padding: 20px 24px !important; box-sizing: border-box !important; pointer-events: none !important; } .fifty-modal-container > * { pointer-events: auto !important; } .fifty-modal-caption { color: #e2e8f0 !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; text-align: center !important; margin-bottom: 12px !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important; } .fifty-modal-stage { flex: 1 !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; position: relative !important; } .fifty-zoom-wrapper { display: flex !important; align-items: center !important; justify-content: center !important; cursor: grab !important; user-select: none !important; -webkit-user-drag: none !important; } .fifty-zoom-wrapper.is-dragging { cursor: grabbing !important; } #fifty-modal-img { max-width: 82% !important; max-height: 68vh !important; object-fit: contain !important; border-radius: 16px !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.15) !important; transition: transform 0.15s ease-out !important; transform-origin: center center !important; pointer-events: auto !important; } .fifty-zoom-toolbar { display: flex !important; align-items: center !important; gap: 8px !important; background: rgba(10, 20, 35, 0.85) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; padding: 8px 16px !important; border-radius: 9999px !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important; z-index: 50 !important; margin-top: 14px !important; } .fifty-zoom-btn { background: transparent !important; border: none !important; color: #cbd5e1 !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.2s ease !important; outline: none !important; } .fifty-zoom-btn:hover { background: rgba(255, 255, 255, 0.12) !important; color: #ff6b35 !important; } .fifty-zoom-level { font-family: 'Outfit', monospace !important; font-size: 13px !important; font-weight: 700 !important; color: #ffffff !important; min-width: 48px !important; text-align: center !important; } .fifty-zoom-reset { width: auto !important; padding: 0 14px !important; font-family: 'Outfit', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; border-radius: 9999px !important; background: rgba(255, 255, 255, 0.08) !important; } /* Video Modal & Integrated Top Control Bar */ .fifty-video-modal-container { position: relative !important; z-index: 10 !important; width: 90vw !important; max-width: 960px !important; max-height: 85vh !important; display: flex !important; flex-direction: column !important; border-radius: 18px !important; overflow: hidden !important; background: #000000 !important; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.15) !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } .fifty-video-modal-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 18px !important; background: rgba(10, 15, 26, 0.95) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; z-index: 20 !important; flex-shrink: 0 !important; } .fifty-video-modal-title { display: flex !important; align-items: center !important; gap: 10px !important; font-family: 'Outfit', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; color: #ffffff !important; letter-spacing: 0.02em !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .fifty-video-modal-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #ff453a !important; box-shadow: 0 0 10px rgba(255, 69, 58, 0.8) !important; flex-shrink: 0 !important; } .fifty-video-modal-actions { display: flex !important; align-items: center !important; gap: 10px !important; flex-shrink: 0 !important; } .fifty-video-action-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 7px 14px !important; border-radius: 8px !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; font-family: 'Outfit', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; cursor: pointer !important; transition: all 0.2s ease !important; outline: none !important; } .fifty-video-action-btn:hover { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.35) !important; transform: translateY(-1px) !important; } .fifty-video-action-btn:active { transform: translateY(0) scale(0.97) !important; } .fifty-video-close-btn { background: rgba(255, 69, 58, 0.18) !important; border-color: rgba(255, 69, 58, 0.45) !important; color: #ff6e64 !important; } .fifty-video-close-btn:hover { background: rgba(255, 69, 58, 0.95) !important; border-color: #ff453a !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(255, 69, 58, 0.5) !important; } .fifty-video-modal-player-wrap { width: 100% !important; flex: 1 !important; aspect-ratio: 16 / 9 !important; position: relative !important; background: #000000 !important; } .fifty-video-modal-player-wrap iframe { width: 100% !important; height: 100% !important; border: none !important; display: block !important; } /* Fullscreen Mode (Both CSS Fullscreen and Browser Fullscreen) */ .fifty-modal.is-fullscreen, #fifty-video-modal:fullscreen, #fifty-video-modal:-webkit-full-screen { padding: 0 !important; background: #000000 !important; } .fifty-modal.is-fullscreen .fifty-video-modal-container, #fifty-video-modal:fullscreen .fifty-video-modal-container, #fifty-video-modal:-webkit-full-screen .fifty-video-modal-container { width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important; border-radius: 0 !important; box-shadow: none !important; } .fifty-modal.is-fullscreen .fifty-video-modal-player-wrap, #fifty-video-modal:fullscreen .fifty-video-modal-player-wrap, #fifty-video-modal:-webkit-full-screen .fifty-video-modal-player-wrap { aspect-ratio: auto !important; height: calc(100vh - 54px) !important; } /* 7e. FAQ Accordion Section */ .fifty-faq-section { margin-top: 88px !important; padding-top: 64px !important; border-top: 1px solid rgba(255, 255, 255, 0.09) !important; max-width: 1180px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } .fifty-faq-header { text-align: center !important; margin-bottom: 44px !important; } .fifty-faq-eyebrow { display: block !important; font-family: 'Outfit', sans-serif !important; font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--protocol-accent, #ff6b35) !important; margin-bottom: 8px !important; } .fifty-faq-title { font-family: 'Outfit', sans-serif !important; font-size: clamp(26px, 3.2vw, 36px) !important; font-weight: 800 !important; color: #ffffff !important; letter-spacing: -0.02em !important; margin: 0 0 10px 0 !important; } .fifty-faq-sub { font-size: 16px !important; line-height: 1.65 !important; color: #94a3b8 !important; max-width: 680px !important; margin: 0 auto !important; } .fifty-faq-list { display: flex !important; flex-direction: column !important; gap: 16px !important; max-width: 1180px !important; width: 100% !important; margin: 0 auto !important; box-sizing: border-box !important; } .fifty-faq-item { background: rgba(18, 24, 38, 0.6) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; overflow: hidden !important; transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important; } .fifty-faq-item:hover { border-color: rgba(255, 255, 255, 0.16) !important; background: rgba(22, 30, 48, 0.72) !important; } .fifty-faq-item[open] { border-color: rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.35) !important; background: rgba(22, 28, 44, 0.88) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35) !important; } .fifty-faq-question { list-style: none !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 22px 30px !important; font-family: 'Outfit', sans-serif !important; font-size: 18.5px !important; font-weight: 700 !important; color: #ffffff !important; cursor: pointer !important; gap: 20px !important; user-select: none !important; outline: none !important; line-height: 1.35 !important; } .fifty-faq-question::-webkit-details-marker { display: none !important; } .fifty-faq-icon { width: 24px !important; height: 24px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.08) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; flex-shrink: 0 !important; transition: transform 0.25s ease, background 0.25s ease !important; } .fifty-faq-icon::before, .fifty-faq-icon::after { content: '' !important; position: absolute !important; background: #ffffff !important; transition: transform 0.25s ease, opacity 0.25s ease !important; } .fifty-faq-icon::before { width: 10px !important; height: 2px !important; } .fifty-faq-icon::after { width: 2px !important; height: 10px !important; } .fifty-faq-item[open] .fifty-faq-icon { background: rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.25) !important; transform: rotate(90deg) !important; } .fifty-faq-item[open] .fifty-faq-icon::after { opacity: 0 !important; } .fifty-faq-answer { padding: 0 30px 24px 30px !important; font-size: 16.5px !important; line-height: 1.75 !important; color: #cbd5e1 !important; } .fifty-faq-answer p { margin: 0 !important; } /* 7f. Mobile Sticky Buy Bar */ .fifty-sticky-bar { position: fixed !important; bottom: 0 !important; left: 0 !important; width: 100% !important; z-index: 99999 !important; background: rgba(10, 14, 24, 0.94) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-top: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.75) !important; transform: translateY(115%) !important; transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important; padding: 10px 16px max(12px, env(safe-area-inset-bottom)) 16px !important; box-sizing: border-box !important; display: none !important; } .fifty-sticky-bar.is-active { transform: translateY(0) !important; } .fifty-sticky-inner { max-width: 500px !important; margin: 0 auto !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; width: 100% !important; } .fifty-sticky-info { display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: 6px !important; min-width: 0 !important; flex: 1 !important; flex-wrap: nowrap !important; white-space: nowrap !important; } .fifty-sticky-name { display: none !important; /* Hide product name on mobile so price & GET YOURS fit in 1 single line */ } .fifty-sticky-price, .fifty-sticky-bar .fifty-price-lockup { font-family: 'Outfit', sans-serif !important; font-size: 18px !important; font-weight: 800 !important; color: #30d158 !important; display: inline-flex !important; align-items: baseline !important; gap: 4px !important; white-space: nowrap !important; line-height: 1 !important; } .fifty-sticky-bar .fifty-currency-amount { font-family: 'Outfit', sans-serif !important; font-size: 18px !important; font-weight: 800 !important; color: #30d158 !important; line-height: 1 !important; white-space: nowrap !important; } .fifty-sticky-unit, .fifty-sticky-bar .fifty-supply-note { font-size: 13px !important; font-weight: 500 !important; color: #94a3b8 !important; white-space: nowrap !important; line-height: 1 !important; } .fifty-sticky-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; background: linear-gradient(135deg, #0f766e 0%, #115e59 100%) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; font-family: 'Outfit', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; padding: 0 16px !important; height: 38px !important; border-radius: 9999px !important; text-decoration: none !important; white-space: nowrap !important; box-shadow: 0 4px 14px rgba(15, 118, 110, 0.45) !important; transition: all 0.2s ease !important; flex-shrink: 0 !important; } .fifty-sticky-btn svg { width: 13px !important; height: 13px !important; } .fifty-sticky-btn:hover, .fifty-sticky-btn:active { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important; color: #ffffff !important; transform: translateY(-1px) !important; } /* 8. Responsive Mobile Layout */ @media (max-width: 900px) { .fifty-protocol-experience { padding: 24px 12px 80px !important; /* Balanced padding so content breathes */ width: 100% !important; box-sizing: border-box !important; } .fifty-protocol-header { padding: 20px 0 36px 0 !important; margin-bottom: 80px !important; background: transparent !important; text-align: center !important; } .fifty-protocol-nav-row { display: block !important; /* Kept visible on mobile because main menu is collapsed into hamburger */ margin: 0 auto 14px !important; text-align: center !important; } .fifty-category-pill { padding: 0 !important; border-radius: 0 !important; font-size: 14px !important; line-height: 1.4 !important; box-shadow: none !important; justify-content: center !important; text-align: center !important; margin: 0 auto !important; } .fifty-category-pill * { font-size: 14px !important; } .fifty-hero-title { font-size: clamp(1.35rem, 5vw, 1.85rem) !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; text-align: left !important; gap: 10px !important; margin: 0 auto 14px !important; width: 100% !important; max-width: 100% !important; } .fifty-title-icon-badge { width: 38px !important; height: 38px !important; min-width: 38px !important; border-radius: 11px !important; flex-shrink: 0 !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35) !important; } .fifty-title-icon-badge svg { width: 20px !important; height: 20px !important; } .fifty-hero-title > span:not(.fifty-title-icon-badge) { text-align: left !important; line-height: 1.15 !important; } .fifty-hero-title > span:only-child { text-align: center !important; width: 100% !important; } .fifty-hero-sub { font-size: 16px !important; line-height: 1.65 !important; text-align: center !important; margin: 0 auto !important; } .fifty-protocol-row, .fifty-protocol-row--reverse { grid-template-columns: 1fr !important; gap: 32px !important; margin-bottom: 64px !important; } .fifty-protocol-row--reverse .fifty-media-column { order: 1 !important; } .fifty-protocol-row--reverse .fifty-info-column { order: 2 !important; } .fifty-media-column, .fifty-info-column { height: auto !important; justify-content: flex-start !important; gap: 18px !important; } .fifty-info-narrative-group { gap: 14px !important; margin: 0 !important; } .fifty-media-column { gap: 8px !important; } .fifty-video-gallery { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .fifty-gallery-item { border-radius: 10px !important; margin: 0 !important; padding: 0 !important; } .fifty-video-play-btn, .fifty-fullscreen-badge { display: none !important; } .fifty-video-title-hint { font-size: 16px !important; max-width: 95% !important; } /* Center price and button in two rows on mobile */ .fifty-buy-strip { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 12px !important; padding: 18px 16px 20px 16px !important; width: 100% !important; } .fifty-price-lockup { display: flex !important; justify-content: center !important; align-items: baseline !important; gap: 8px !important; margin: 0 auto !important; flex-wrap: wrap !important; } .fifty-currency-amount { font-size: 28px !important; font-weight: 800 !important; line-height: 1 !important; } .fifty-supply-note { font-size: 13.5px !important; color: #94a3b8 !important; font-weight: 500 !important; } .fifty-protocol-divider { margin: 56px 0 !important; } .fifty-video-modal-container { width: 95vw !important; max-width: 440px !important; height: 75vh !important; max-height: 640px !important; aspect-ratio: auto !important; } .fifty-video-modal-player-wrap { aspect-ratio: auto !important; height: calc(100% - 46px) !important; } .fifty-video-modal-bar { padding: 8px 12px !important; } .fifty-video-modal-title { font-size: 13px !important; } .fifty-video-action-btn { padding: 6px 10px !important; font-size: 12px !important; } @media (max-width: 480px) { .fifty-video-action-text { display: none !important; } .fifty-video-action-btn { width: 34px !important; height: 34px !important; border-radius: 50% !important; padding: 0 !important; justify-content: center !important; } } button.fifty-modal-close, .fifty-modal-close { top: 16px !important; right: 16px !important; width: 40px !important; height: 40px !important; min-width: 40px !important; max-width: 40px !important; min-height: 40px !important; max-height: 40px !important; padding: 0 !important; margin: 0 !important; z-index: 1000000 !important; } .fifty-modal-close .fifty-svg-close { width: 14px !important; height: 14px !important; } #fifty-modal-img { max-width: 92% !important; max-height: 60vh !important; } .fifty-sticky-bar { display: block !important; } .fifty-trust-row { justify-content: center !important; margin-top: 14px !important; } .fifty-meta-row { justify-content: flex-start !important; gap: 8px !important; } .fifty-protocol-brief { padding: 14px 16px !important; } .fifty-faq-section { margin-top: 64px !important; padding-top: 40px !important; } .fifty-faq-question { padding: 16px 18px !important; font-size: 17px !important; } .fifty-faq-answer { padding: 0 18px 18px 18px !important; font-size: 16px !important; } } /* ========================================================================== Footer Menu: Human Trials Luxury Dropup (Desktop Hover + Mobile Tap) ========================================================================== */ .site-footer, .site-footer .footer-middle, .site-footer .footer-middle .footer-row, .site-footer .footer-middle .col-slot-1, .site-footer .footer-middle .footer-widgets-area--2, .footer-widgets-area--2 .menu-item, #menu-item-3207 { overflow: visible !important; } .footer-widgets-area--2 .menu-item, #menu-item-3207 { position: relative !important; display: inline-flex !important; align-items: center !important; } .fifty-footer-trials-trigger { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; color: #94a3b8 !important; padding: 6px 10px !important; line-height: 1.4 !important; text-decoration: none !important; transition: color 0.2s ease !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; user-select: none !important; } .footer-widgets-area--2 .menu-item:hover .fifty-footer-trials-trigger, .footer-widgets-area--2 .menu-item.is-open .fifty-footer-trials-trigger, #menu-item-3207:hover .fifty-footer-trials-trigger, #menu-item-3207.is-open .fifty-footer-trials-trigger { color: #28D3EE !important; } .fifty-footer-trials-caret { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.2s ease !important; stroke: currentColor !important; } .footer-widgets-area--2 .menu-item:hover .fifty-footer-trials-caret, .footer-widgets-area--2 .menu-item.is-open .fifty-footer-trials-caret, #menu-item-3207:hover .fifty-footer-trials-caret, #menu-item-3207.is-open .fifty-footer-trials-caret { transform: rotate(180deg) !important; stroke: #28D3EE !important; } /* Glassmorphism Dropup Card */ .fifty-footer-sub-menu-wrap { position: absolute !important; bottom: calc(100% + 14px) !important; left: 50% !important; transform: translateX(-50%) translateY(8px) !important; width: 360px !important; max-width: calc(100vw - 24px) !important; background: rgba(9, 12, 21, 0.98) !important; backdrop-filter: blur(28px) saturate(190%) !important; -webkit-backdrop-filter: blur(28px) saturate(190%) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 20px !important; box-shadow: 0 -16px 45px -10px rgba(0, 0, 0, 0.85), 0 0 1px 1px rgba(255, 255, 255, 0.08), 0 0 24px rgba(40, 211, 238, 0.15) !important; padding: 12px 10px 10px !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s !important; z-index: 999999 !important; box-sizing: border-box !important; text-align: left !important; } /* Hover bridge */ .fifty-footer-sub-menu-wrap::before { content: "" !important; position: absolute !important; bottom: -18px !important; left: 0 !important; right: 0 !important; height: 18px !important; background: transparent !important; } /* Downward pointer caret */ .fifty-footer-sub-menu-wrap::after { content: "" !important; position: absolute !important; bottom: -7px !important; left: 50% !important; transform: translateX(-50%) rotate(45deg) !important; width: 14px !important; height: 14px !important; background: rgba(9, 12, 21, 0.98) !important; border-right: 1px solid rgba(255, 255, 255, 0.12) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; } /* Reveal states - Desktop hover (only for devices with true mouse pointer) */ @media (hover: hover) and (pointer: fine) { .footer-widgets-area--2 .menu-item:hover .fifty-footer-sub-menu-wrap, #menu-item-3207:hover .fifty-footer-sub-menu-wrap { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important; } } /* Click/Tap Open state (Desktop & Mobile) */ .footer-widgets-area--2 .menu-item.is-open .fifty-footer-sub-menu-wrap, #menu-item-3207.is-open .fifty-footer-sub-menu-wrap { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important; } /* Small mobile adaptation (< 600px) */ @media (max-width: 600px) { .fifty-footer-sub-menu-wrap { position: fixed !important; bottom: 76px !important; left: 12px !important; right: 12px !important; width: auto !important; max-width: 380px !important; margin: 0 auto !important; transform: translateY(12px) !important; } .footer-widgets-area--2 .menu-item.is-open .fifty-footer-sub-menu-wrap, #menu-item-3207.is-open .fifty-footer-sub-menu-wrap { transform: translateY(0) !important; } .fifty-footer-sub-menu-wrap::after { display: none !important; } } .fifty-footer-sub-menu-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 6px 6px 8px 12px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; margin-bottom: 6px !important; text-align: left !important; } .fifty-footer-sub-menu-heading { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; color: #64748b !important; text-transform: uppercase !important; display: block !important; } .fifty-footer-sub-menu-close { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; color: #94a3b8 !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; outline: none !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; } .fifty-footer-sub-menu-close:hover, .fifty-footer-sub-menu-close:active { background: rgba(239, 68, 68, 0.22) !important; border-color: rgba(239, 68, 68, 0.55) !important; color: #ff6b6b !important; transform: scale(1.08) !important; } .fifty-footer-sub-menu-close svg { width: 12px !important; height: 12px !important; stroke: currentColor !important; display: block !important; } .fifty-footer-sub-menu { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; width: 100% !important; } .fifty-footer-sub-menu li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .site-footer .footer-middle .fifty-footer-sub-menu li a.fifty-pillar-link { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; padding: 8px 12px !important; border-radius: 12px !important; background: transparent !important; border: 1px solid transparent !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; text-decoration: none !important; width: 100% !important; box-sizing: border-box !important; } .site-footer .footer-middle .fifty-footer-sub-menu li a.fifty-pillar-link:hover, .site-footer .footer-middle .fifty-footer-sub-menu li a.fifty-pillar-link:active { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.08) !important; transform: translateX(3px) !important; } .fifty-footer-sub-menu .fifty-pillar-indicator { width: 38px !important; height: 38px !important; min-width: 38px !important; border-radius: 11px !important; } .fifty-footer-sub-menu .fifty-pillar-indicator svg { width: 19px !important; height: 19px !important; } .fifty-footer-sub-menu .fifty-pillar-title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 14.5px !important; font-weight: 700 !important; color: #ffffff !important; line-height: 1.25 !important; } .site-footer .footer-middle .fifty-footer-sub-menu li a.fifty-pillar-link:hover .fifty-pillar-title { color: var(--pillar-color, #28D3EE) !important; } .fifty-footer-sub-menu .fifty-pillar-desc { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 12.5px !important; font-weight: 400 !important; color: #94a3b8 !important; line-height: 1.35 !important; } .fifty-footer-sub-menu .fifty-pillar-arrow { opacity: 0.4 !important; } .site-footer .footer-middle .fifty-footer-sub-menu li a.fifty-pillar-link:hover .fifty-pillar-arrow { opacity: 1 !important; color: var(--pillar-color, #28D3EE) !important; } /* ========================================================================== FIFTY PROTOCOL — APPLE MINIMALIST VIDEO-FIRST SHOWCASE Design Concept: Zero Clutter, Video-Centric, Minimum 16px Font Size Everywhere ========================================================================== */ body.page-id-3127, body.page-id-3149, body.page-id-3151, body.page-id-3153 { background-color: #030712 !important; color: #f1f5f9 !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; } .page-id-3127 #primary, .page-id-3127 #content, .page-id-3127 .site-content, .page-id-3127 .entry-content, .page-id-3149 #primary, .page-id-3149 #content, .page-id-3151 #primary, .page-id-3151 #content, .page-id-3153 #primary, .page-id-3153 #content { background-color: #030712 !important; padding: 0 !important; margin: 0 !important; } /* Ensure Outfit typography is strictly inherited across all protocol elements */ .fifty-protocol-experience, .fifty-protocol-experience * { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; box-sizing: border-box !important; } /* Strict Enforcement: Minimum 16px Font Size on All Text */ .fifty-protocol-experience { font-size: 16px !important; line-height: 1.6 !important; color: #cbd5e1 !important; } /* --- 0. Floating Pillar Switcher Dock (Removed per user request) --- */ .fifty-dock-wrapper { display: none !important; } .fifty-dock-pill { pointer-events: auto !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 8px 12px !important; background: rgba(15, 23, 42, 0.85) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 9999px !important; box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.75), 0 0 20px rgba(0, 0, 0, 0.4) !important; max-width: 95vw !important; overflow-x: auto !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } .fifty-dock-pill::-webkit-scrollbar { display: none !important; } .fifty-dock-item { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 8px 18px !important; border-radius: 9999px !important; font-size: 16px !important; font-weight: 600 !important; color: #94a3b8 !important; text-decoration: none !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; white-space: nowrap !important; background: transparent !important; border: 1px solid transparent !important; } .fifty-dock-item:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.08) !important; transform: translateY(-1px) !important; } .fifty-dock-item.is-active { color: #ffffff !important; background: rgba(255, 69, 58, 0.18) !important; border-color: rgba(255, 69, 58, 0.5) !important; box-shadow: 0 0 16px rgba(255, 69, 58, 0.35) !important; } .fifty-dock-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #ff453a !important; box-shadow: 0 0 10px #ff453a !important; animation: fiftyDockPulse 2s infinite ease-in-out !important; } @keyframes fiftyDockPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.6; } } /* --- 1. Minimalist Apple-Luxury Header --- */ .fifty-protocol-header { padding: 72px 0 88px 0 !important; margin-bottom: 110px !important; position: relative !important; background: transparent !important; text-align: center !important; } .fifty-hero-divider { display: none !important; } .fifty-protocol-nav-row { margin-bottom: 28px !important; } .fifty-hero-title { font-size: clamp(34px, 4.4vw, 52px) !important; font-weight: 800 !important; color: #ffffff !important; letter-spacing: -0.025em !important; line-height: 1.15 !important; margin: 0 auto 32px auto !important; max-width: 900px !important; text-transform: uppercase !important; } .fifty-hero-sub { font-size: 20px !important; font-weight: 400 !important; line-height: 1.75 !important; color: rgba(255, 255, 255, 0.85) !important; max-width: 780px !important; margin: 0 auto 52px auto !important; text-align: center !important; text-wrap: balance !important; letter-spacing: -0.01em !important; } /* --- Quality & Authority Trust Strip (Understated Apple-Grade Seal) --- */ .fifty-trust-strip { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 36px !important; margin: 0 auto !important; padding: 12px 36px !important; background: rgba(255, 255, 255, 0.025) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 9999px !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } .fifty-trust-badge { display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; transition: opacity 0.25s ease !important; } .fifty-trust-badge:hover { opacity: 0.85 !important; } .fifty-trust-icon { width: auto !important; height: auto !important; background: transparent !important; border: none !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .fifty-trust-icon svg { width: 18px !important; height: 18px !important; display: block !important; opacity: 0.9 !important; } .fifty-trust-label { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; color: #cbd5e1 !important; white-space: nowrap !important; text-transform: uppercase !important; } @media (max-width: 768px) { .fifty-protocol-header { padding: 48px 0 56px 0 !important; margin-bottom: 72px !important; } .fifty-hero-title { font-size: 30px !important; margin: 0 auto 20px auto !important; padding: 0 16px !important; } .fifty-hero-sub { font-size: 16.5px !important; line-height: 1.65 !important; margin: 0 auto 36px auto !important; padding: 0 20px !important; } .fifty-trust-strip { display: flex !important; flex-direction: column !important; gap: 14px !important; padding: 16px 24px !important; border-radius: 20px !important; max-width: 320px !important; box-sizing: border-box !important; } .fifty-trust-badge { justify-content: center !important; width: 100% !important; } } /* --- 2. Video Stage Play Button Orb (Category-Harmonized) --- */ .fifty-video-wrapper .fifty-play-orb { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 76px !important; height: 76px !important; border-radius: 50% !important; background: rgba(var(--protocol-accent-rgb, 255, 69, 58), 0.92) !important; color: #030712 !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 10px 30px rgba(var(--protocol-accent-rgb, 255, 69, 58), 0.5), 0 0 0 8px rgba(var(--protocol-accent-rgb, 255, 69, 58), 0.22) !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; z-index: 4 !important; pointer-events: none !important; } .fifty-theme-blood-sugar .fifty-video-wrapper .fifty-play-orb, .fifty-theme-blood-sugar .fifty-thumb-play-orb { color: #ffffff !important; } .fifty-video-wrapper:hover .fifty-play-orb { transform: translate(-50%, -50%) scale(1.12) !important; background: var(--protocol-accent, #ff453a) !important; box-shadow: 0 16px 40px rgba(var(--protocol-accent-rgb, 255, 69, 58), 0.7), 0 0 0 14px rgba(var(--protocol-accent-rgb, 255, 69, 58), 0.35) !important; } .fifty-video-wrapper .fifty-play-orb svg { margin-left: 3px !important; } /* Video Stage Bar Bottom Hint (Removed per user request) */ .fifty-video-bar-bottom { display: none !important; } /* --- 3. Thumbnail Bar --- */ .fifty-video-gallery { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; margin-top: 14px !important; } .fifty-gallery-item { position: relative !important; width: 100% !important; aspect-ratio: 4 / 3 !important; border-radius: 12px !important; overflow: hidden !important; background: #080d18 !important; border: 1.5px solid rgba(255, 255, 255, 0.12) !important; cursor: pointer !important; padding: 0 !important; transition: all 0.25s ease !important; } .fifty-gallery-item:hover, .fifty-gallery-item.is-selected { border-color: var(--protocol-accent, #ff453a) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(var(--protocol-accent-rgb, 255, 69, 58), 0.35) !important; } .fifty-gallery-item img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Miniature Play Orb on First Thumbnail (Identical aesthetic to Stage Play Orb, scaled down) */ .fifty-thumb-play-orb { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: rgba(var(--protocol-accent-rgb, 255, 69, 58), 0.92) !important; color: #030712 !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 14px rgba(var(--protocol-accent-rgb, 255, 69, 58), 0.55), 0 0 0 3px rgba(var(--protocol-accent-rgb, 255, 69, 58), 0.22) !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; z-index: 3 !important; pointer-events: none !important; } .fifty-thumb-play-orb svg { margin-left: 2px !important; } .fifty-gallery-item:hover .fifty-thumb-play-orb, .fifty-gallery-item.is-selected .fifty-thumb-play-orb { transform: translate(-50%, -50%) scale(1.14) !important; background: var(--protocol-accent, #ff453a) !important; box-shadow: 0 6px 18px rgba(var(--protocol-accent-rgb, 255, 69, 58), 0.7), 0 0 0 5px rgba(var(--protocol-accent-rgb, 255, 69, 58), 0.35) !important; } @media (max-width: 768px) { .fifty-thumb-play-orb { width: 22px !important; height: 22px !important; box-shadow: 0 2px 8px rgba(var(--protocol-accent-rgb, 255, 69, 58), 0.6), 0 0 0 2px rgba(var(--protocol-accent-rgb, 255, 69, 58), 0.25) !important; } .fifty-thumb-play-orb svg { width: 10px !important; height: 10px !important; margin-left: 1px !important; } .fifty-gallery-item:hover .fifty-thumb-play-orb, .fifty-gallery-item.is-selected .fifty-thumb-play-orb { transform: translate(-50%, -50%) scale(1.1) !important; } } /* Hide legacy text badge and redundant floating sticky bar on multi-product protocol pages */ .fifty-thumb-badge, .fifty-sticky-bar { display: none !important; } /* --- 4. Info Column: Clean, Breathable, Minimalist --- */ .fifty-protocol-phase { display: inline-block !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--protocol-accent-soft, #ff8e75) !important; margin-bottom: 6px !important; } .fifty-herb-name { font-size: clamp(28px, 3.2vw, 36px) !important; font-weight: 800 !important; color: #ffffff !important; letter-spacing: -0.02em !important; margin: 0 0 20px 0 !important; line-height: 1.15 !important; } .fifty-result-card { background: rgba(15, 23, 42, 0.65) !important; border: 1px solid rgba(var(--protocol-accent-rgb, 255, 69, 58), 0.28) !important; border-radius: 14px !important; padding: 18px 22px !important; margin-bottom: 18px !important; } .fifty-result-label { font-size: 15px !important; font-weight: 700 !important; color: var(--protocol-accent, #ff453a) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; margin-bottom: 6px !important; } .fifty-result-desc { font-size: 17px !important; font-weight: 500 !important; color: #f1f5f9 !important; line-height: 1.55 !important; margin: 0 !important; } .fifty-protocol-brief { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important; border-radius: 14px !important; padding: 18px 22px !important; margin-bottom: 24px !important; } .fifty-protocol-badge { font-size: 14px !important; font-weight: 700 !important; color: var(--protocol-accent-soft, #94a3b8) !important; letter-spacing: 0.08em !important; margin-bottom: 6px !important; } .fifty-protocol-text { font-size: 16px !important; color: #cbd5e1 !important; line-height: 1.6 !important; margin: 0 !important; } /* --- 5. Clean Buy Strip --- */ .fifty-buy-strip { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; margin-top: 10px !important; padding-top: 20px !important; border-top: 1px solid rgba(255, 255, 255, 0.09) !important; flex-wrap: wrap !important; } .fifty-price-lockup { display: flex !important; align-items: baseline !important; gap: 6px !important; } .fifty-currency-amount { font-size: 38px !important; font-weight: 800 !important; color: #ffffff !important; letter-spacing: -0.02em !important; line-height: 1 !important; } .fifty-supply-note { font-size: 16px !important; color: #94a3b8 !important; font-weight: 500 !important; } .fifty-btn-action { font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; padding: 14px 28px !important; border-radius: 9999px !important; border-color: rgba(var(--protocol-accent-rgb, 255, 69, 58), 0.35) !important; } .fifty-btn-action:hover, .fifty-btn-action:hover span, .fifty-btn-action:hover::after { color: var(--protocol-accent, #ff6b35) !important; border-color: var(--protocol-accent, #ff6b35) !important; } .fifty-btn-action span { font-size: 15px !important; font-weight: 700 !important; } .fifty-trust-micro { display: none !important; } /* Subtle separator between sections */ .fifty-protocol-divider { height: 1px !important; background: linear-gradient(90deg, transparent 0%, rgba(var(--protocol-accent-rgb, 255, 255, 255), 0.28) 50%, transparent 100%) !important; margin: 80px 0 !important; border: none !important; } /* Responsive adjustments (Mobile & Tablet) */ @media (max-width: 900px) { .fifty-protocol-row, .fifty-protocol-row--reverse { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; margin-bottom: 48px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .fifty-media-column, .fifty-info-column { min-width: 0 !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; } .fifty-protocol-row--reverse .fifty-media-column { order: 1 !important; } .fifty-protocol-row--reverse .fifty-info-column { order: 2 !important; } .fifty-herb-heading-group { text-align: left !important; } /* Apple Store Glass Buy Dock inside each product section on mobile (Centered & 2 Rows) */ .fifty-buy-strip { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 12px !important; padding: 18px 16px 20px 16px !important; margin-top: 14px !important; background: rgba(15, 23, 42, 0.78) !important; border: 1px solid rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.3) !important; border-radius: 18px !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .fifty-buy-strip .fifty-price-lockup { display: flex !important; flex-direction: row !important; align-items: baseline !important; justify-content: center !important; text-align: center !important; gap: 8px !important; margin: 0 auto !important; width: 100% !important; flex-wrap: wrap !important; } .fifty-buy-strip .fifty-currency-amount { font-size: 28px !important; font-weight: 800 !important; line-height: 1 !important; color: #ffffff !important; } .fifty-buy-strip .fifty-supply-note { font-size: 13.5px !important; font-weight: 500 !important; color: #94a3b8 !important; white-space: normal !important; text-align: center !important; } .fifty-buy-strip .fifty-btn-action { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 280px !important; height: 46px !important; padding: 0 20px !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; margin: 4px auto 0 auto !important; border-radius: 9999px !important; box-shadow: 0 6px 20px rgba(0, 37, 46, 0.45) !important; } .fifty-buy-strip .fifty-btn-action span { font-size: 13.5px !important; font-weight: 700 !important; white-space: nowrap !important; } } @media (max-width: 600px) { .fifty-protocol-experience { padding: 16px 4px 60px 4px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; } .fifty-video-gallery { gap: 8px !important; margin-top: 10px !important; } .fifty-dock-item { padding: 7px 14px !important; font-size: 16px !important; } .fifty-video-wrapper .fifty-play-orb { width: 60px !important; height: 60px !important; } .fifty-video-wrapper .fifty-play-orb svg { width: 26px !important; height: 26px !important; } } @media (max-width: 400px) { .fifty-buy-strip { padding: 16px 12px 18px 12px !important; gap: 10px !important; } .fifty-buy-strip .fifty-currency-amount { font-size: 25px !important; } .fifty-buy-strip .fifty-supply-note { font-size: 12.5px !important; } .fifty-buy-strip .fifty-btn-action { height: 44px !important; width: 100% !important; max-width: 100% !important; font-size: 13px !important; } .fifty-buy-strip .fifty-btn-action span { font-size: 13px !important; } } /* --- FAQ Mobile Refinement: Zero Side Margin & Padding for Open, Relaxed Reading --- */ @media (max-width: 768px) { .fifty-faq-section { margin-top: 56px !important; padding-top: 36px !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; } .fifty-faq-header { padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 24px !important; } .fifty-faq-title { font-size: 24px !important; } .fifty-faq-sub { font-size: 15px !important; padding: 0 !important; } .fifty-faq-list { padding: 0 !important; margin: 0 !important; gap: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } .fifty-faq-item { background: transparent !important; border-left: none !important; border-right: none !important; border-radius: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; border-bottom: none !important; margin: 0 !important; padding: 0 !important; } .fifty-faq-item[open] { background: rgba(255, 255, 255, 0.02) !important; border-top-color: rgba(var(--protocol-accent-rgb, 255, 69, 58), 0.45) !important; } .fifty-faq-question { padding-left: 0 !important; padding-right: 0 !important; padding-top: 16px !important; padding-bottom: 16px !important; font-size: 16.5px !important; line-height: 1.4 !important; gap: 12px !important; } .fifty-faq-answer { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 20px !important; font-size: 16px !important; line-height: 1.7 !important; } .fifty-faq-answer p { margin: 0 !important; padding: 0 !important; } } @media (max-width: 600px) { .fifty-faq-question { font-size: 16px !important; padding-top: 14px !important; padding-bottom: 14px !important; } .fifty-faq-answer { font-size: 16px !important; padding-bottom: 18px !important; } } /* ========================================================================== FIFTY PROTOCOL CATEGORY COLOR HARMONIZATION SYSTEM ========================================================================== */ /* 1. Blood Sugar (Red Accent) */ .fifty-theme-blood-sugar { --protocol-accent: #ff453a; --protocol-accent-rgb: 255, 69, 58; --protocol-accent-soft: #ff8e75; } .fifty-theme-blood-sugar .fifty-pill-dot { background: #ff453a !important; box-shadow: 0 0 6px #ff453a !important; } .fifty-theme-blood-sugar .fifty-pill-parent { color: #ff8e75 !important; } .fifty-theme-blood-sugar .fifty-protocol-header::after { background: linear-gradient(90deg, transparent 0%, #ff453a 50%, transparent 100%) !important; box-shadow: 0 0 12px rgba(255, 69, 58, 0.5) !important; } .fifty-theme-blood-sugar .fifty-result-card { border-color: rgba(255, 69, 58, 0.25) !important; } .fifty-theme-blood-sugar .fifty-result-label { color: #ff453a !important; } .fifty-theme-blood-sugar .fifty-faq-eyebrow { color: #ff8e75 !important; } .fifty-theme-blood-sugar .fifty-faq-item[open] { border-color: rgba(255, 69, 58, 0.35) !important; } .fifty-theme-blood-sugar .fifty-faq-item[open] .fifty-faq-icon { background: rgba(255, 69, 58, 0.25) !important; } /* 2. Bones & Joints (Cyan Accent) */ .fifty-theme-bones-joints { --protocol-accent: #22d3ee; --protocol-accent-rgb: 34, 211, 238; --protocol-accent-soft: #67e8f9; } .fifty-theme-bones-joints .fifty-pill-dot { background: #22d3ee !important; box-shadow: 0 0 6px #22d3ee !important; } .fifty-theme-bones-joints .fifty-pill-parent { color: #67e8f9 !important; } .fifty-theme-bones-joints .fifty-protocol-header::after { background: linear-gradient(90deg, transparent 0%, #22d3ee 50%, transparent 100%) !important; box-shadow: 0 0 12px rgba(34, 211, 238, 0.5) !important; } .fifty-theme-bones-joints .fifty-result-card { border-color: rgba(34, 211, 238, 0.25) !important; } .fifty-theme-bones-joints .fifty-result-label { color: #22d3ee !important; } .fifty-theme-bones-joints .fifty-faq-eyebrow { color: #22d3ee !important; } .fifty-theme-bones-joints .fifty-faq-item[open] { border-color: rgba(34, 211, 238, 0.35) !important; } .fifty-theme-bones-joints .fifty-faq-item[open] .fifty-faq-icon { background: rgba(34, 211, 238, 0.25) !important; } /* 3. Sleep & Rest (Purple Accent) */ .fifty-theme-sleep-rest { --protocol-accent: #c084fc; --protocol-accent-rgb: 192, 132, 252; --protocol-accent-soft: #d8b4fe; } .fifty-theme-sleep-rest .fifty-pill-dot { background: #c084fc !important; box-shadow: 0 0 6px #c084fc !important; } .fifty-theme-sleep-rest .fifty-pill-parent { color: #d8b4fe !important; } .fifty-theme-sleep-rest .fifty-protocol-header::after { background: linear-gradient(90deg, transparent 0%, #c084fc 50%, transparent 100%) !important; box-shadow: 0 0 12px rgba(192, 132, 252, 0.5) !important; } .fifty-theme-sleep-rest .fifty-result-card { border-color: rgba(192, 132, 252, 0.25) !important; } .fifty-theme-sleep-rest .fifty-result-label { color: #c084fc !important; } .fifty-theme-sleep-rest .fifty-faq-eyebrow { color: #c084fc !important; } .fifty-theme-sleep-rest .fifty-faq-item[open] { border-color: rgba(192, 132, 252, 0.35) !important; } .fifty-theme-sleep-rest .fifty-faq-item[open] .fifty-faq-icon { background: rgba(192, 132, 252, 0.25) !important; } /* 4. Cholesterol (Amber Accent) */ .fifty-theme-cholesterol { --protocol-accent: #fbbf24; --protocol-accent-rgb: 251, 191, 36; --protocol-accent-soft: #fde68a; } .fifty-theme-cholesterol .fifty-pill-dot { background: #fbbf24 !important; box-shadow: 0 0 6px #fbbf24 !important; } .fifty-theme-cholesterol .fifty-pill-parent { color: #fde68a !important; } .fifty-theme-cholesterol .fifty-protocol-header::after { background: linear-gradient(90deg, transparent 0%, #fbbf24 50%, transparent 100%) !important; box-shadow: 0 0 12px rgba(251, 191, 36, 0.5) !important; } .fifty-theme-cholesterol .fifty-result-card { border-color: rgba(251, 191, 36, 0.25) !important; } .fifty-theme-cholesterol .fifty-result-label { color: #fbbf24 !important; } .fifty-theme-cholesterol .fifty-faq-eyebrow { color: #fbbf24 !important; } .fifty-theme-cholesterol .fifty-faq-item[open] { border-color: rgba(251, 191, 36, 0.35) !important; } .fifty-theme-cholesterol .fifty-faq-item[open] .fifty-faq-icon { background: rgba(251, 191, 36, 0.25) !important; } /* Stage 1:1 Bottle Photo Framing (Prevents EXPAND & ZOOM / WATCH VIDEO buttons from covering bottle on mobile) */ .fifty-stage-img-wrap { padding: 10px 12px 54px 12px !important; box-sizing: border-box !important; } .fifty-stage-zoom-btn:hover, .fifty-stage-back-btn:hover { border-color: var(--protocol-accent, #28D3EE) !important; color: var(--protocol-accent, #28D3EE) !important; } @media (max-width: 768px) { .fifty-stage-viewport:has(.fifty-stage-slide:nth-child(2).is-active) { aspect-ratio: 4 / 3 !important; } .fifty-stage-img-wrap { padding: 10px 10px 48px 10px !important; } .fifty-stage-controls { bottom: 8px !important; left: 10px !important; right: 10px !important; } .fifty-stage-zoom-btn, .fifty-stage-back-btn { font-size: 11.5px !important; padding: 6px 12px !important; } } /* Complete 24-Hour Protocol Bundle Banner (Apple Pro Configurator Card) */ .fifty-bundle-card { margin: 24px 0 80px 0 !important; padding: 36px 40px !important; border-radius: 24px !important; background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(8, 13, 24, 0.92) 100%) !important; border: 1.5px solid rgba(var(--protocol-accent-rgb, 40, 211, 238), 0.38) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 32px !important; box-sizing: border-box !important; } .fifty-bundle-content { display: flex !important; flex-direction: column !important; gap: 8px !important; max-width: 620px !important; } .fifty-bundle-badge { display: inline-flex !important; align-items: center !important; align-self: flex-start !important; padding: 5px 14px !important; border-radius: 999px !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--protocol-accent, #fbbf24) !important; background: rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.12) !important; border: 1px solid rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.35) !important; margin-bottom: 4px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important; } .fifty-bundle-eyebrow { font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--protocol-accent, #28D3EE) !important; } .fifty-bundle-title { font-size: clamp(22px, 2.6vw, 30px) !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #ffffff !important; margin: 0 !important; line-height: 1.15 !important; } .fifty-bundle-desc { font-size: 16px !important; color: #cbd5e1 !important; line-height: 1.55 !important; margin: 0 !important; } .fifty-bundle-action { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 14px !important; flex-shrink: 0 !important; } .fifty-bundle-price-group { display: flex !important; align-items: baseline !important; gap: 6px !important; } .fifty-bundle-price { font-size: 36px !important; font-weight: 800 !important; color: #ffffff !important; line-height: 1 !important; letter-spacing: -0.02em !important; } .fifty-bundle-supply { font-size: 14px !important; font-weight: 500 !important; color: #94a3b8 !important; } @media (max-width: 900px) { .fifty-bundle-card { flex-direction: column !important; align-items: stretch !important; padding: 24px 20px !important; gap: 20px !important; margin: 8px 0 48px 0 !important; border-radius: 18px !important; } .fifty-bundle-action { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; padding-top: 16px !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; gap: 10px !important; } .fifty-bundle-price { font-size: 26px !important; } .fifty-bundle-supply { font-size: 12px !important; } .fifty-bundle-btn { height: 42px !important; padding: 0 16px !important; font-size: 12.5px !important; } .fifty-bundle-btn span { font-size: 12.5px !important; white-space: nowrap !important; } } @media (max-width: 400px) { .fifty-bundle-card { padding: 20px 16px !important; } .fifty-bundle-action { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } .fifty-bundle-btn { width: 100% !important; justify-content: center !important; } } /* Global Keyboard Accessibility Focus Ring (:focus-visible) */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #28D3EE !important; outline-offset: 2px !important; } /* ========================================================================== STEVE JOBS APPLE-GRADE HERO SECTION (Post 2150 - Homepage) Direct, monumental, uncompromising typography, radiant warmth, and 50+ legibility. ========================================================================== */ /* 1. Hero Container Layout: 45% Photo Marquee + 53% Content Split */ body.home .elementor-2150 .elementor-element-5cc8831 { min-height: calc(100vh - 80px) !important; min-height: calc(100svh - 80px) !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: clamp(20px, 3vw, 40px) !important; box-sizing: border-box !important; } body.home .elementor-2150 .elementor-element-7181616 { width: 45% !important; flex: 0 0 45% !important; max-width: 45% !important; } body.home .elementor-2150 .elementor-element-a81e507 { width: 53% !important; flex: 0 0 53% !important; max-width: 53% !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; padding: clamp(20px, 2.5vw, 36px) 0 clamp(20px, 2.5vw, 36px) clamp(20px, 3vw, 44px) !important; box-sizing: border-box !important; } /* Hide empty dummy widget */ .elementor-element-9f9db48 { display: none !important; } /* 2. Hero Monumental Headline ("HAPPY LIFE AFTER 50") */ body.home .elementor-2150 .elementor-element-21b3330 { order: 1 !important; width: 100% !important; margin: 0 0 clamp(8px, 1.2vw, 16px) 0 !important; padding: 0 !important; } body.home .elementor-2150 .elementor-element-21b3330 br { display: none !important; } body.home .elementor-2150 .elementor-element-21b3330 h1.elementor-heading-title, body.home .elementor-2150 .elementor-element-21b3330 .elementor-heading-title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: clamp(3.6rem, 6.2vw, 5.8rem) !important; font-weight: 800 !important; line-height: 0.92 !important; letter-spacing: -0.035em !important; color: #FFFFFF !important; text-transform: uppercase !important; margin: 0 !important; padding: 0 !important; } body.home .elementor-2150 .es-hero-line-1, body.home .elementor-2150 .es-hero-line-2 { display: block !important; white-space: nowrap !important; color: #FFFFFF !important; letter-spacing: -0.035em !important; line-height: 0.92 !important; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45) !important; } body.home .elementor-2150 .es-hero-line-1 { margin: 0 0 clamp(2px, 0.4vw, 6px) 0 !important; } body.home .elementor-2150 .es-hero-line-2 { margin: 0 !important; } /* Radiant Coral "50" */ body.home .elementor-2150 .es-hero-num, .es-hero-num { color: #FF6B4A !important; background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: #FF6B4A !important; filter: drop-shadow(0 4px 22px rgba(255, 107, 74, 0.5)) !important; font-weight: 800 !important; display: inline-block !important; letter-spacing: -0.02em !important; } /* 3. The Grand Sub-Title ("Thailand Has So Much To Love") */ body.home .elementor-2150 .elementor-element-f318cb5 { order: 2 !important; width: 100% !important; max-width: 38rem !important; margin: 0 0 clamp(18px, 2.2vw, 28px) 0 !important; padding: 0 !important; } body.home .elementor-2150 .elementor-element-f318cb5 .elementor-heading-title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: clamp(1.85rem, 2.6vw, 2.45rem) !important; font-weight: 600 !important; line-height: 1.28 !important; letter-spacing: -0.02em !important; color: #F8FAFC !important; text-wrap: balance !important; word-break: normal !important; margin: 0 !important; padding: 0 !important; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45) !important; } /* 4. Author Signature Capsule ("by Willie Thailand") */ body.home .elementor-2150 .elementor-element-c2bac10 { order: 3 !important; width: auto !important; margin: 0 !important; padding: 0 !important; } body.home .elementor-2150 .elementor-element-c2bac10 .elementor-heading-title { margin: 0 !important; padding: 0 !important; line-height: 1 !important; } body.home .elementor-2150 .es-byline-badge { display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 7px 18px 7px 14px !important; background: rgba(255, 255, 255, 0.045) !important; border: 1px solid rgba(255, 255, 255, 0.11) !important; border-radius: 9999px !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; } body.home .elementor-2150 .es-byline-badge:hover { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 107, 74, 0.45) !important; box-shadow: 0 6px 24px rgba(255, 107, 74, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; transform: translateY(-1px) !important; } body.home .elementor-2150 .es-byline-dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #FF6B4A !important; box-shadow: 0 0 10px #FF6B4A, 0 0 4px #FF6B4A !important; flex-shrink: 0 !important; animation: esPulseGlow 3s ease-in-out infinite alternate !important; } @keyframes esPulseGlow { 0% { opacity: 0.7; transform: scale(0.92); box-shadow: 0 0 6px #FF6B4A; } 100% { opacity: 1; transform: scale(1.1); box-shadow: 0 0 14px #FF6B4A, 0 0 6px #FFA07A; } } body.home .elementor-2150 .es-byline-text { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; color: #CBD5E1 !important; font-size: clamp(0.82rem, 1.05vw, 0.92rem) !important; font-weight: 500 !important; letter-spacing: 0.05em !important; text-transform: none !important; line-height: 1.2 !important; } body.home .elementor-2150 .es-byline-prefix { color: #94A3B8 !important; font-weight: 400 !important; margin-right: 3px !important; } body.home .elementor-2150 .es-byline-name { color: #FFFFFF !important; font-weight: 600 !important; } /* Tablet Layout (768px - 1024px) */ @media (min-width: 768px) and (max-width: 1024px) { body.home .elementor-2150 .elementor-element-5cc8831 { gap: 24px !important; } body.home .elementor-2150 .elementor-element-7181616 { width: 46% !important; flex: 0 0 46% !important; max-width: 46% !important; } body.home .elementor-2150 .elementor-element-a81e507 { width: 52% !important; flex: 0 0 52% !important; max-width: 52% !important; padding: 24px 0 24px 24px !important; } body.home .elementor-2150 .elementor-element-21b3330 h1.elementor-heading-title, body.home .elementor-2150 .elementor-element-21b3330 .elementor-heading-title { font-size: clamp(2.8rem, 5.2vw, 3.8rem) !important; line-height: 1.0 !important; } body.home .elementor-2150 .elementor-element-f318cb5 .elementor-heading-title { font-size: clamp(1.6rem, 2.3vw, 1.95rem) !important; line-height: 1.3 !important; } } /* Mobile Screen Architecture (<= 767px) */ @media (max-width: 767px) { body.home .elementor-2150 .elementor-element-5cc8831 { flex-direction: column !important; padding: 10px 12px 36px !important; gap: 18px !important; min-height: auto !important; } body.home .elementor-2150 .elementor-element-7181616 { width: 100% !important; flex: 0 0 auto !important; max-width: 100% !important; height: clamp(420px, 54vh, 490px) !important; height: clamp(420px, 54svh, 490px) !important; padding: 4px 4px !important; margin: 0 0 14px 0 !important; gap: 6px !important; overflow: hidden !important; border-radius: 18px !important; box-sizing: border-box !important; } body.home .elementor-2150 .elementor-element-1b3eca7 uix-marquee, body.home .elementor-2150 .elementor-element-28d88ec uix-marquee { --marquee-height: clamp(420px, 54vh, 490px) !important; --marquee-height: clamp(420px, 54svh, 490px) !important; height: var(--marquee-height) !important; padding: 0 !important; margin: 0 !important; } body.home .elementor-2150 .elementor-element-7181616 .fifty-marquee-loop-content { padding-bottom: 6px !important; } body.home .elementor-2150 .elementor-element-7181616 .fifty-masonry-card { margin-bottom: 6px !important; padding: 0 !important; } body.home .elementor-2150 .elementor-element-a81e507 { width: 100% !important; flex: 0 0 auto !important; max-width: 100% !important; padding: 4px 6px 0 6px !important; align-items: flex-start !important; } body.home .elementor-2150 .elementor-element-21b3330 { order: 1 !important; margin-bottom: 10px !important; } body.home .elementor-2150 .elementor-element-21b3330 h1.elementor-heading-title, body.home .elementor-2150 .elementor-element-21b3330 .elementor-heading-title { font-size: clamp(2.35rem, 10.5vw, 3.1rem) !important; line-height: 1.02 !important; letter-spacing: -0.032em !important; } body.home .elementor-2150 .es-hero-line-1, body.home .elementor-2150 .es-hero-line-2 { white-space: normal !important; } body.home .elementor-2150 .elementor-element-f318cb5 { order: 2 !important; max-width: 100% !important; margin: 0 0 16px 0 !important; } body.home .elementor-2150 .elementor-element-f318cb5 .elementor-heading-title { font-size: clamp(1.4rem, 6.2vw, 1.75rem) !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -0.015em !important; color: #F8FAFC !important; text-wrap: balance !important; } body.home .elementor-2150 .elementor-element-c2bac10 { order: 3 !important; margin-bottom: 0 !important; } body.home .elementor-2150 .es-byline-badge { padding: 6px 14px 6px 11px !important; gap: 8px !important; } body.home .elementor-2150 .es-byline-text { font-size: 0.85rem !important; letter-spacing: 0.04em !important; } } /* Seamless two-segment loop for the homepage's vertical hero photo marquees. */ @media (min-width: 768px) { body.home .elementor-2150 .elementor-element-7181616, .elementor-element-7181616 { gap: 20px !important; column-gap: 20px !important; row-gap: 20px !important; } } @media (max-width: 767px) { body.home .elementor-2150 .elementor-element-7181616, .elementor-element-7181616 { gap: 6px !important; column-gap: 6px !important; row-gap: 6px !important; } } body.home .elementor-2150 .elementor-element-7181616 .milano-marquee--e, body.home .elementor-2150 .elementor-element-7181616 .elementor-widget-container, body.home .elementor-2150 .elementor-element-7181616 .marquee-track, body.home .elementor-2150 .elementor-element-7181616 .marquee-content, body.home .elementor-2150 .elementor-element-7181616 .marquee-item, .elementor-element-7181616 .milano-marquee--e, .elementor-element-7181616 .elementor-widget-container, .elementor-element-7181616 .marquee-track, .elementor-element-7181616 .marquee-content, .elementor-element-7181616 .marquee-item { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body.home .elementor-2150 .elementor-element-7181616 .milano-marquee__image, .elementor-element-7181616 .milano-marquee__image { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body.home .elementor-2150 .elementor-element-7181616 .milano-marquee__image img, .elementor-element-7181616 .milano-marquee__image img { width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; display: block !important; } body.home .elementor-2150 .elementor-element-1b3eca7 .fifty-marquee-loop-track, body.home .elementor-2150 .elementor-element-28d88ec .fifty-marquee-loop-track { gap: 0 !important; will-change: transform !important; backface-visibility: hidden !important; animation-play-state: running !important; } body.home .elementor-2150 .elementor-element-1b3eca7 .fifty-marquee-loop-content, body.home .elementor-2150 .elementor-element-28d88ec .fifty-marquee-loop-content { box-sizing: border-box !important; padding-bottom: 30px !important; will-change: auto !important; transform: none !important; backface-visibility: visible !important; } @keyframes marquee-scroll-vertical { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } } /* Keep the compact four-link footer navigation on one line at every phone width. */ @media (max-width: 767px) { .site-footer .footer-middle .col-slot-1 { flex-wrap: nowrap !important; gap: 0 !important; white-space: nowrap !important; } .site-footer .footer-middle .footer-widgets-area, .site-footer .footer-middle .footer-widgets-area .widget, .site-footer .footer-middle .footer-widgets-area ul.menu, .site-footer .footer-middle .footer-widgets-area li.menu-item { flex-wrap: nowrap !important; flex-shrink: 0 !important; white-space: nowrap !important; } .site-footer .footer-middle .footer-widgets-area a { font-size: clamp(11px, 3.4vw, 14px) !important; padding-right: clamp(4px, 1.35vw, 10px) !important; padding-left: clamp(4px, 1.35vw, 10px) !important; white-space: nowrap !important; } } /* Homepage Subtitles (Human Trials & Make Them Jealous) */ #willie-recommends .fifty-human-trials-subtitle, .fifty-jealous-subtitle { max-width: 52rem; margin: 12px auto 28px; padding: 0 18px; color: #c3cdd5; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: clamp(20px, calc(18px + 0.5vw), 22px); font-weight: 400; line-height: 1.6; letter-spacing: 0.01em; text-align: center; text-wrap: balance; } @media (max-width: 767px) { #willie-recommends .fifty-human-trials-subtitle, .fifty-jealous-subtitle { max-width: 34rem; margin: 10px auto 22px; padding: 0 20px; line-height: 1.55; font-size: clamp(16px, 4vw, 18px); } } /* Match MAKE THEM JEALOUS carousel controls to the Human Trials carousel. */ .elementor-element-b11239e .swiper-button-prev.button-white, .elementor-element-b11239e .swiper-button-next.button-white { width: var(--btn-height, 50px) !important; height: var(--btn-height, 50px) !important; border-radius: 50% !important; background-color: #ffffff !important; color: #00252e !important; border: 1px solid rgba(0, 37, 46, 0.15) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; transition: color 0.25s ease, transform 0.25s ease, border-color 0.25s ease !important; } .elementor-element-b11239e .swiper-button-prev.button-white:hover, .elementor-element-b11239e .swiper-button-next.button-white:hover { background-color: #ffffff !important; border-color: rgba(0, 37, 46, 0.25) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important; color: #ff6b35 !important; transform: scale(1.08) !important; } .elementor-element-b11239e .swiper-button-prev.button-white:hover svg, .elementor-element-b11239e .swiper-button-next.button-white:hover svg { fill: #ff6b35 !important; color: #ff6b35 !important; stroke: #ff6b35 !important; } .elementor-element-b11239e .swiper-button-prev.button-white:not(:hover), .elementor-element-b11239e .swiper-button-next.button-white:not(:hover) { background-color: #ffffff !important; color: #00252e !important; } .elementor-element-b11239e .swiper-button-prev.button-white:not(:hover) svg, .elementor-element-b11239e .swiper-button-next.button-white:not(:hover) svg { fill: #00252e !important; color: #00252e !important; stroke: #00252e !important; } .elementor-element-b11239e .swiper-pagination { position: relative !important; inset: auto !important; margin: 22px auto 6px !important; padding: 8px 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; width: auto !important; max-width: 100% !important; opacity: 1 !important; visibility: visible !important; } .elementor-element-b11239e .swiper-pagination-bullet { width: 10px !important; height: 10px !important; min-width: 10px !important; min-height: 10px !important; margin: 0 !important; padding: 0 !important; border: 1.5px solid rgba(255, 255, 255, 0.65) !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.45) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 6px rgba(255, 255, 255, 0.25) !important; opacity: 1 !important; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; } .elementor-element-b11239e .swiper-pagination-bullet::before, .elementor-element-b11239e .swiper-pagination-bullet::after { display: none !important; content: none !important; } .elementor-element-b11239e .swiper-pagination-bullet-active { width: 28px !important; height: 10px !important; border: 1.5px solid #28d3ee !important; border-radius: 9999px !important; background: #28d3ee !important; box-shadow: 0 0 16px rgba(40, 211, 238, 0.95), 0 0 6px #28d3ee !important; } .elementor-element-b11239e .swiper-pagination-bullet:hover:not(.swiper-pagination-bullet-active) { border-color: #28d3ee !important; background: rgba(40, 211, 238, 0.8) !important; transform: scale(1.25) !important; box-shadow: 0 0 10px rgba(40, 211, 238, 0.8) !important; } /* Keep Banner Image Carousel arrows hidden on hover; retain responsive pagination dots. */ .elementor-element-b11239e .swiper-button-prev, .elementor-element-b11239e .swiper-button-next { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* ========================================================================== FIFTY PROTOCOL - COMPARISON SECTION (50+ ACCESSIBILITY - MIN 16PX) ========================================================================== */ .fifty-comparison-section { margin: 72px 0 88px 0 !important; padding: 0 !important; box-sizing: border-box !important; } .fifty-comparison-header { text-align: center !important; max-width: 980px !important; margin: 0 auto 44px auto !important; padding: 0 20px !important; } .fifty-comparison-eyebrow { display: inline-block !important; font-size: 16px !important; font-weight: 800 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--protocol-accent, #fbbf24) !important; margin-bottom: 12px !important; } .fifty-comparison-title { font-size: clamp(28px, 3.4vw, 40px) !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #ffffff !important; margin: 0 !important; line-height: 1.25 !important; } .fifty-comparison-sub { font-size: 18px !important; line-height: 1.65 !important; color: #cbd5e1 !important; margin: 14px auto 0 auto !important; } /* ========================================================================== FIFTY PROTOCOL - CINEMATIC HOME BREW VIDEO STAGE (APPLE TV GRADE) ========================================================================== */ .fifty-brew-video-stage { max-width: 1100px !important; margin: 0 auto 80px auto !important; padding: 0 16px !important; box-sizing: border-box !important; } .fifty-brew-video-card { position: relative !important; width: 100% !important; border-radius: 22px !important; overflow: hidden !important; background-color: #080c14 !important; border: 1.5px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.18) !important; cursor: pointer !important; transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.55s ease !important; transform: translateZ(0) !important; will-change: transform, box-shadow !important; outline: none !important; display: flex !important; flex-direction: column !important; } /* Focus outline for keyboard accessibility */ .fifty-brew-video-card:focus-visible { outline: 2px solid var(--protocol-accent, #fbbf24) !important; outline-offset: 4px !important; } /* Desktop Hover Elevation & Accent Aura */ .fifty-brew-video-card:hover { transform: translateY(-6px) scale(1.012) translateZ(0) !important; border-color: rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.65) !important; box-shadow: 0 32px 70px rgba(0, 0, 0, 0.8), 0 0 50px rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.35) !important; } /* Mobile Tactile Spring Touch-Down */ .fifty-brew-video-card:active { transform: scale(0.98) translateY(-2px) !important; transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* Specular Glass Sheen across the card */ .fifty-brew-video-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: -120% !important; width: 70% !important; height: 100% !important; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.12) 50%, transparent 100% ) !important; transform: skewX(-20deg) !important; pointer-events: none !important; z-index: 5 !important; opacity: 0 !important; transition: none !important; } .fifty-brew-video-card:hover::before { left: 140% !important; opacity: 1 !important; transition: left 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease !important; } .fifty-brew-video-media { position: relative !important; width: 100% !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; background: #000000 !important; } .fifty-brew-video-poster { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease !important; transform: scale(1) translateZ(0) !important; } .fifty-brew-video-card:hover .fifty-brew-video-poster { transform: scale(1.05) translateZ(0) !important; filter: brightness(1.06) !important; } /* Subtle Vignette & Gradient Overlays - Feathered Lightly so Pot & Ingredients are 100% Visible */ .fifty-brew-video-overlay { position: absolute !important; inset: 0 !important; background: linear-gradient( 180deg, rgba(3, 5, 12, 0.5) 0%, transparent 22%, transparent 85%, rgba(3, 5, 12, 0.2) 100% ) !important; pointer-events: none !important; z-index: 2 !important; } /* Top Meta Bar */ .fifty-brew-video-topbar { position: absolute !important; top: 18px !important; left: 20px !important; right: 20px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; z-index: 4 !important; pointer-events: none !important; } .fifty-brew-video-tag { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: rgba(3, 5, 12, 0.75) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.45) !important; border-radius: 9999px !important; padding: 6px 14px !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--protocol-accent, #fbbf24) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important; } .fifty-brew-video-dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; background-color: var(--protocol-accent, #fbbf24) !important; box-shadow: 0 0 8px var(--protocol-accent, #fbbf24) !important; animation: fiftyPulseGold 2s infinite ease-in-out !important; } @keyframes fiftyPulseGold { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.85); } } .fifty-brew-video-duration { display: inline-flex !important; align-items: center !important; background: rgba(3, 5, 12, 0.75) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 9999px !important; padding: 6px 12px !important; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; color: #e2e8f0 !important; letter-spacing: 0.04em !important; } /* Center Frosted Glass Play Button */ .fifty-brew-play-btn { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 4 !important; pointer-events: none !important; } .fifty-brew-play-btn-circle { width: 72px !important; height: 72px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255, 255, 255, 0.22) !important; backdrop-filter: blur(14px) saturate(180%) !important; -webkit-backdrop-filter: blur(14px) saturate(180%) !important; border: 1.5px solid rgba(255, 255, 255, 0.65) !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; } .fifty-brew-play-btn-circle svg { margin-left: 4px !important; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4)) !important; transition: transform 0.3s ease !important; } .fifty-brew-video-card:hover .fifty-brew-play-btn-circle { transform: scale(1.15) !important; background: rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.32) !important; border-color: var(--protocol-accent, #fbbf24) !important; box-shadow: 0 0 35px rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.65), 0 16px 40px rgba(0, 0, 0, 0.6) !important; } .fifty-brew-video-card:hover .fifty-brew-play-btn-circle svg { transform: scale(1.1) !important; } /* Bottom Cinematic Caption (Clean, Dedicated Bar - Image is 100% Clear) */ .fifty-brew-video-caption { position: relative !important; padding: 22px 26px 24px 26px !important; background: #0B101B !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; box-sizing: border-box !important; text-align: left !important; z-index: 4 !important; } .fifty-brew-video-title { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 19px !important; font-weight: 700 !important; color: #ffffff !important; margin: 0 0 6px 0 !important; letter-spacing: -0.01em !important; line-height: 1.35 !important; } .fifty-brew-video-desc { font-family: -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 14.5px !important; color: #94A3B8 !important; margin: 0 !important; line-height: 1.55 !important; } /* Iframe Container */ .fifty-brew-video-iframe-wrap { position: relative !important; width: 100% !important; aspect-ratio: 16 / 9 !important; z-index: 10 !important; background: #000000 !important; overflow: hidden !important; } .fifty-brew-video-iframe-wrap iframe { width: 100% !important; height: 100% !important; border: none !important; display: block !important; } /* Fifty Herbs Showcase (Three Real Ingredients - Apple Luxury Minimalist & Borderless) */ .fifty-herbs-showcase { max-width: 1180px !important; margin: 0 auto 60px auto !important; padding: 0 16px !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } .fifty-herbs-header { text-align: center !important; margin-bottom: 28px !important; } .fifty-herbs-title { display: inline-flex !important; align-items: center !important; gap: 10px !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: var(--protocol-accent, #FBBF24) !important; background: rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.08) !important; border: 1px solid rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.22) !important; border-radius: 9999px !important; padding: 6px 18px !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important; } .fifty-herbs-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: clamp(24px, 3.8vw, 52px) !important; align-items: start !important; } .fifty-herb-item { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 14px 20px 14px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; box-sizing: border-box !important; position: relative !important; } .fifty-herb-item:hover { transform: translateY(-4px) !important; border: none !important; box-shadow: none !important; } .fifty-herb-img-wrap { width: 140px !important; height: 124px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 18px !important; background: radial-gradient(circle, rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.16) 0%, rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.03) 55%, transparent 75%) !important; border-radius: 50% !important; transition: transform 0.28s ease !important; } .fifty-herb-item:hover .fifty-herb-img-wrap { background: radial-gradient(circle, rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.25) 0%, rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.06) 60%, transparent 80%) !important; transform: scale(1.04) !important; } .fifty-herb-img { max-width: 120px !important; max-height: 104px !important; object-fit: contain !important; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.65)) !important; transition: transform 0.28s ease !important; } .fifty-herb-item:hover .fifty-herb-img { transform: scale(1.05) !important; } .fifty-herb-info { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; } .fifty-herb-tag { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; color: #34D399 !important; background: rgba(52, 211, 153, 0.1) !important; border: 1px solid rgba(52, 211, 153, 0.25) !important; border-radius: 999px !important; padding: 3px 12px !important; line-height: 1.2 !important; margin-bottom: 2px !important; } .fifty-herb-name { font-size: clamp(18px, 1.4vw, 21px) !important; font-weight: 700 !important; color: #ffffff !important; margin: 0 !important; line-height: 1.25 !important; letter-spacing: -0.01em !important; } .fifty-herb-desc { font-size: clamp(13.5px, 1.05vw, 15px) !important; line-height: 1.6 !important; color: #94A3B8 !important; margin: 0 !important; max-width: 240px !important; } .fifty-comparison-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; margin: 0 0 32px 0 !important; } .fifty-comparison-card { background: linear-gradient(145deg, rgba(15, 23, 42, 0.92) 0%, rgba(10, 16, 30, 0.98) 100%) !important; border: 1.5px solid rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.3) !important; border-radius: 24px !important; padding: 30px 24px !important; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; display: flex !important; flex-direction: column !important; gap: 20px !important; box-sizing: border-box !important; transition: transform 0.3s ease, border-color 0.3s ease !important; } .fifty-comparison-card:hover { transform: translateY(-4px) !important; border-color: rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.65) !important; box-shadow: 0 24px 54px rgba(0, 0, 0, 0.75), 0 0 24px rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.15) !important; } .fifty-comparison-card-header { display: flex !important; align-items: center !important; gap: 14px !important; padding-bottom: 16px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .fifty-comparison-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; border-radius: 12px !important; background: rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.18) !important; color: var(--protocol-accent, #fbbf24) !important; flex-shrink: 0 !important; } .fifty-comparison-icon svg { width: 22px !important; height: 22px !important; } .fifty-comparison-card-title { font-size: 20px !important; font-weight: 800 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: #ffffff !important; margin: 0 !important; } .fifty-comparison-row { display: flex !important; flex-direction: column !important; gap: 8px !important; } .fifty-comparison-tag { align-self: flex-start !important; font-size: 16px !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: 5px 12px !important; border-radius: 8px !important; line-height: 1.2 !important; } .fifty-tag-home { background: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; border: 1px solid rgba(239, 68, 68, 0.4) !important; } .fifty-tag-ready { background: rgba(16, 185, 129, 0.22) !important; color: #6ee7b7 !important; border: 1px solid rgba(16, 185, 129, 0.45) !important; } .fifty-contrast-headline { font-size: 19px !important; font-weight: 800 !important; line-height: 1.35 !important; margin: 2px 0 0 0 !important; } .fifty-contrast-home { color: #e2e8f0 !important; } .fifty-contrast-ready { color: #ffffff !important; } .fifty-comparison-text { font-size: 16.5px !important; line-height: 1.65 !important; margin: 0 !important; } .fifty-comparison-home .fifty-comparison-text { color: #94a3b8 !important; } .fifty-comparison-ready .fifty-comparison-text { color: #f1f5f9 !important; } .fifty-comparison-vs-line { position: relative !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent) !important; margin: 6px 0 !important; } /* Fifty Pain-Point Cards (Dark Luxury Glassmorphic Design) */ .fifty-painpoint-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; margin: 0 auto 80px auto !important; max-width: 1180px !important; } .fifty-painpoint-card { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important; border-radius: 20px !important; padding: 34px 24px 28px 24px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important; box-sizing: border-box !important; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; } .fifty-painpoint-card:hover { transform: translateY(-4px) !important; border-color: rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.4) !important; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.65) !important; } .fifty-painpoint-card--featured { background: linear-gradient(145deg, rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.09) 0%, rgba(15, 23, 42, 0.75) 100%) !important; border: 1.5px solid rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.45) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.12) !important; } .fifty-painpoint-card--featured:hover { border-color: rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.75) !important; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), 0 0 30px rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.2) !important; } .fifty-painpoint-icon-wrap { width: 64px !important; height: 64px !important; border-radius: 50% !important; background: rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.12) !important; border: 1px solid rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.28) !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 12px !important; } .fifty-painpoint-icon { max-width: 36px !important; max-height: 36px !important; object-fit: contain !important; filter: brightness(0) invert(1) !important; opacity: 0.95 !important; transition: transform 0.3s ease !important; } .fifty-painpoint-card:hover .fifty-painpoint-icon { transform: scale(1.1) !important; } .fifty-painpoint-title { font-size: 20px !important; font-weight: 800 !important; color: #ffffff !important; margin: 0 0 8px 0 !important; line-height: 1.3 !important; } .fifty-painpoint-card--featured .fifty-painpoint-title { color: var(--protocol-accent, #fbbf24) !important; } .fifty-painpoint-desc { font-size: 16px !important; line-height: 1.5 !important; color: #94a3b8 !important; margin: 0 !important; } .fifty-painpoint-card--featured .fifty-painpoint-desc { color: #e2e8f0 !important; } .fifty-comparison-note { text-align: center !important; max-width: 820px !important; margin: 28px auto 0 auto !important; padding: 22px 32px !important; border-radius: 18px !important; background: linear-gradient(135deg, rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.12) 0%, rgba(15, 23, 42, 0.6) 100%) !important; border: 1px solid rgba(var(--protocol-accent-rgb, 251, 191, 36), 0.35) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important; } .fifty-comparison-note p { font-size: 18px !important; font-style: italic !important; line-height: 1.65 !important; color: #fef08a !important; margin: 0 !important; } @media (max-width: 900px) { .fifty-products-header { margin: 0 auto 44px auto !important; padding: 0 16px !important; } .fifty-products-title { font-size: clamp(21px, 5.2vw, 26px) !important; line-height: 1.3 !important; margin: 0 0 10px 0 !important; } .fifty-products-sub { font-size: 15px !important; } .fifty-comparison-section { margin: 44px 0 60px 0 !important; } .fifty-comparison-header { margin: 0 auto 32px auto !important; padding: 0 16px !important; } .fifty-comparison-title { font-size: clamp(21px, 5.2vw, 26px) !important; line-height: 1.3 !important; margin: 0 !important; } .fifty-herbs-showcase { padding: 6px 0 28px 0 !important; margin: 0 auto 36px auto !important; background: transparent !important; border: none !important; box-shadow: none !important; } .fifty-herbs-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; } .fifty-herb-item { padding: 6px 4px 10px 4px !important; background: transparent !important; border: none !important; box-shadow: none !important; } .fifty-herb-img-wrap { width: 96px !important; height: 84px !important; margin-bottom: 10px !important; } .fifty-herb-img { max-width: 82px !important; max-height: 70px !important; } .fifty-herb-tag { font-size: 9.5px !important; padding: 2px 7px !important; letter-spacing: 0.05em !important; } .fifty-herb-name { font-size: 14.5px !important; line-height: 1.25 !important; margin-bottom: 4px !important; } .fifty-herb-desc { font-size: 11.5px !important; line-height: 1.42 !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .fifty-brew-video-stage { margin: 0 auto 48px auto !important; padding: 0 10px !important; } .fifty-brew-video-card { border-radius: 16px !important; } .fifty-brew-video-topbar { top: 10px !important; left: 10px !important; right: 10px !important; } .fifty-brew-video-tag { padding: 4px 10px !important; font-size: 10.5px !important; } .fifty-brew-video-duration { padding: 4px 8px !important; font-size: 10.5px !important; } .fifty-brew-play-btn-circle { width: 52px !important; height: 52px !important; } .fifty-brew-play-btn-circle svg { width: 18px !important; height: 18px !important; } .fifty-brew-video-caption { padding: 16px 16px 18px 16px !important; background: #0B101B !important; } .fifty-brew-video-title { font-size: 15.5px !important; line-height: 1.35 !important; margin-bottom: 4px !important; } .fifty-brew-video-desc { font-size: 12.5px !important; line-height: 1.48 !important; color: #94A3B8 !important; display: block !important; } .fifty-comparison-grid { grid-template-columns: 1fr !important; gap: 20px !important; } .fifty-painpoint-grid { grid-template-columns: 1fr !important; gap: 16px !important; margin: 0 auto 52px auto !important; } .fifty-painpoint-card { padding: 24px 20px !important; } .fifty-painpoint-title { font-size: 20px !important; } .fifty-painpoint-desc { font-size: 16px !important; } .fifty-comparison-title { font-size: 28px !important; } .fifty-comparison-sub { font-size: 16.5px !important; } .fifty-comparison-card { padding: 24px 20px !important; } .fifty-contrast-headline { font-size: 18px !important; } .fifty-comparison-text { font-size: 16px !important; } .fifty-comparison-note p { font-size: 16.5px !important; } } /* ========================================================================== MAKE THEM JEALOUS - 6-Slot Staggered Masonry Grid (Elementor Native) ========================================================================== */ #jealous-masonry-gallery, #thailand-insights #jealous-masonry-gallery, .elementor-element-9ed6dc4 #jealous-masonry-gallery, .fifty-masonry-container { display: block !important; width: 100% !important; max-width: 1240px !important; margin: 0 auto 40px auto !important; padding: 0 20px !important; box-sizing: border-box !important; } #jealous-masonry-gallery > .e-con-inner, #thailand-insights #jealous-masonry-gallery > .e-con-inner, .elementor-element-9ed6dc4 #jealous-masonry-gallery > .e-con-inner, .fifty-masonry-container > .e-con-inner { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: flex-start !important; width: 100% !important; max-width: 100% !important; gap: 24px !important; box-sizing: border-box !important; } #jealous-masonry-gallery > .e-con-inner > .e-con, #thailand-insights #jealous-masonry-gallery > .e-con-inner > .e-con, .elementor-element-9ed6dc4 #jealous-masonry-gallery > .e-con-inner > .e-con, .fifty-masonry-col { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; width: calc((100% - 48px) / 3) !important; max-width: calc((100% - 48px) / 3) !important; min-width: 0 !important; gap: 24px !important; box-sizing: border-box !important; } .fifty-masonry-card { position: relative !important; border-radius: 18px !important; overflow: hidden !important; background-color: #0b111e !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45) !important; transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.55s ease, border-color 0.4s ease !important; transform: translateZ(0) !important; will-change: transform, box-shadow !important; } /* Specular Glass Sheen across the masonry card */ .fifty-masonry-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: -120% !important; width: 70% !important; height: 100% !important; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.09) 50%, transparent 100% ) !important; transform: skewX(-20deg) !important; pointer-events: none !important; z-index: 7 !important; opacity: 0 !important; transition: none !important; } .fifty-masonry-card:hover::before { left: 140% !important; opacity: 1 !important; transition: left 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease !important; } /* Card Hover Elevation & Sunset Coral Aura */ .fifty-masonry-card:hover { transform: translateY(-8px) scale(1.018) translateZ(0) !important; border-color: rgba(255, 107, 74, 0.55) !important; box-shadow: 0 24px 55px rgba(0, 0, 0, 0.7), 0 0 35px rgba(255, 107, 74, 0.25) !important; z-index: 5 !important; } /* Mobile Tactile Spring Touch-Down */ .fifty-masonry-card:active { transform: scale(0.978) translateY(-2px) !important; transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important; } .fifty-masonry-card .elementor-widget-container { height: 100% !important; line-height: 0 !important; } .fifty-masonry-card a { display: block !important; position: relative !important; overflow: hidden !important; border-radius: 18px !important; line-height: 0 !important; text-decoration: none !important; } .fifty-masonry-card img { display: block !important; width: 100% !important; height: auto !important; border-radius: 18px !important; object-fit: cover !important; transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.65s ease !important; transform: scale(1) translateZ(0) !important; will-change: transform !important; } .fifty-masonry-card:hover img { transform: scale(1.075) translateZ(0) !important; } /* Cinematic subtle ambient lighting at bottom */ .fifty-masonry-card a::after { display: none !important; } /* Card Video Glass Overlay - Ultra-light bottom ambient so full poster imagery remains visible */ .fifty-card-video-overlay { position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: flex-start !important; padding: 16px !important; background: linear-gradient( 180deg, rgba(3, 4, 6, 0) 65%, rgba(3, 4, 6, 0.42) 100% ) !important; border-radius: 18px !important; pointer-events: none !important; transition: background 0.4s ease !important; z-index: 6 !important; box-sizing: border-box !important; } .fifty-masonry-card:hover .fifty-card-video-overlay { background: linear-gradient( 180deg, rgba(3, 4, 6, 0) 55%, rgba(3, 4, 6, 0.52) 100% ) !important; } /* Frosted Glass YouTube WATCH Capsule Badge */ .fifty-card-badge { align-self: flex-start !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; padding: 6px 13px 6px 9px !important; background: rgba(11, 17, 30, 0.78) !important; backdrop-filter: blur(12px) saturate(180%) !important; -webkit-backdrop-filter: blur(12px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 9999px !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important; transform: translateZ(0) !important; } .fifty-card-badge .fifty-badge-yt-icon { width: 17px !important; height: 17px !important; color: #FF0033 !important; flex-shrink: 0 !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease !important; } .fifty-card-badge span { font-family: 'Outfit', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #ffffff !important; line-height: 1 !important; } /* Card Hover Micro-Interactions */ .fifty-masonry-card:hover .fifty-card-badge { transform: translateY(-2px) scale(1.05) translateZ(0) !important; background: rgba(18, 25, 40, 0.92) !important; border-color: rgba(255, 107, 74, 0.65) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55), 0 0 16px rgba(255, 107, 74, 0.35) !important; } .fifty-masonry-card:hover .fifty-card-badge .fifty-badge-yt-icon { transform: scale(1.12) !important; filter: drop-shadow(0 0 6px rgba(255, 0, 51, 0.7)) !important; } /* COMING SOON Card Overlay & Capsule Badge */ .fifty-card-is-coming-soon a { cursor: default !important; pointer-events: none !important; } .fifty-card-video-overlay.is-coming-soon { background: linear-gradient( 180deg, rgba(3, 4, 6, 0.12) 0%, rgba(3, 4, 6, 0.22) 55%, rgba(3, 4, 6, 0.56) 100% ) !important; } .fifty-masonry-card:hover .fifty-card-video-overlay.is-coming-soon { background: linear-gradient( 180deg, rgba(3, 4, 6, 0.16) 0%, rgba(3, 4, 6, 0.28) 55%, rgba(3, 4, 6, 0.64) 100% ) !important; } .fifty-card-badge.is-coming-soon { padding: 7px 14px 7px 11px !important; background: rgba(11, 17, 30, 0.84) !important; border: 1px solid rgba(255, 184, 77, 0.38) !important; } .fifty-card-badge.is-coming-soon .fifty-badge-soon-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #FFB84D !important; box-shadow: 0 0 8px rgba(255, 184, 77, 0.85) !important; flex-shrink: 0 !important; } .fifty-card-badge.is-coming-soon span { color: #FFF3DC !important; letter-spacing: 0.14em !important; } .fifty-masonry-card:hover .fifty-card-badge.is-coming-soon { border-color: rgba(255, 184, 77, 0.68) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55), 0 0 14px rgba(255, 184, 77, 0.28) !important; } /* CTA YouTube Button Enhancements */ .fifty-btn-yt-icon { width: 24px !important; height: 24px !important; color: #FF6B4A !important; flex-shrink: 0 !important; margin-right: 4px !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease, filter 0.35s ease !important; } .fifty-home-adventures-btn:hover .fifty-btn-yt-icon { transform: scale(1.15) !important; filter: drop-shadow(0 0 8px rgba(255, 107, 74, 0.65)) !important; } /* Responsive: Tablet */ @media (max-width: 1024px) { #jealous-masonry-gallery > .e-con-inner, #thailand-insights #jealous-masonry-gallery > .e-con-inner, .elementor-element-9ed6dc4 #jealous-masonry-gallery > .e-con-inner, .fifty-masonry-container > .e-con-inner { gap: 16px !important; } #jealous-masonry-gallery, #thailand-insights #jealous-masonry-gallery, .elementor-element-9ed6dc4 #jealous-masonry-gallery, .fifty-masonry-container { padding: 0 16px !important; } #jealous-masonry-gallery > .e-con-inner > .e-con, #thailand-insights #jealous-masonry-gallery > .e-con-inner > .e-con, .elementor-element-9ed6dc4 #jealous-masonry-gallery > .e-con-inner > .e-con, .fifty-masonry-col { width: calc((100% - 32px) / 3) !important; max-width: calc((100% - 32px) / 3) !important; gap: 16px !important; } .fifty-masonry-card, .fifty-masonry-card a, .fifty-masonry-card img, .fifty-masonry-card a::after { border-radius: 16px !important; } .fifty-card-video-overlay { border-radius: 16px !important; padding: 14px !important; } } /* Responsive: Mobile */ @media (max-width: 767px) { /* Remove lateral padding from section containers */ #thailand-insights, .elementor-element-9ed6dc4, #thailand-insights > .e-con-inner, .elementor-element-9ed6dc4 > .e-con-inner { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; } /* Masonry Gallery Container: Minimal 8px side padding for maximum screen immersion */ #jealous-masonry-gallery, #thailand-insights #jealous-masonry-gallery, .elementor-element-9ed6dc4 #jealous-masonry-gallery, .fifty-masonry-container { width: 100% !important; max-width: 100% !important; padding-left: 8px !important; padding-right: 8px !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 28px !important; box-sizing: border-box !important; } #jealous-masonry-gallery > .e-con-inner, #thailand-insights #jealous-masonry-gallery > .e-con-inner, .elementor-element-9ed6dc4 #jealous-masonry-gallery > .e-con-inner, .fifty-masonry-container > .e-con-inner { flex-direction: column !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; gap: 12px !important; box-sizing: border-box !important; } #jealous-masonry-gallery > .e-con-inner > .e-con, #thailand-insights #jealous-masonry-gallery > .e-con-inner > .e-con, .elementor-element-9ed6dc4 #jealous-masonry-gallery > .e-con-inner > .e-con, .fifty-masonry-col { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; gap: 12px !important; box-sizing: border-box !important; } .fifty-masonry-card { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: 14px !important; } .fifty-masonry-card .elementor-widget-container { padding: 0 !important; margin: 0 !important; } .fifty-masonry-card a, .fifty-masonry-card img, .fifty-masonry-card a::after { border-radius: 14px !important; width: 100% !important; } .fifty-card-video-overlay { border-radius: 14px !important; padding: 12px 14px !important; } .fifty-card-badge { padding: 5px 11px 5px 8px !important; } .fifty-card-badge.is-coming-soon { padding: 6px 12px 6px 9px !important; } .fifty-card-badge.is-coming-soon .fifty-badge-soon-dot { width: 7px !important; height: 7px !important; } .fifty-card-badge .fifty-badge-yt-icon { width: 15px !important; height: 15px !important; } .fifty-card-badge span { font-size: 10px !important; } .fifty-btn-yt-icon { width: 20px !important; height: 20px !important; } } @media (max-width: 480px) { /* Ultra-slim 6px lateral padding on compact phones */ #jealous-masonry-gallery, #thailand-insights #jealous-masonry-gallery, .elementor-element-9ed6dc4 #jealous-masonry-gallery, .fifty-masonry-container { padding-left: 6px !important; padding-right: 6px !important; } }