/* ============================================================== SERENGETI HEROES LUXURY CORE VISUAL SYSTEM -------------------------------------------------------------- CORE SITE STYLING ONLY PROTECTED: - Homepage - Homepage sections - Footer - About Us — page-id-2247 - WhatsApp widget - Back-to-top button - Header-specific luxury CSS - Page-specific CSS INNER-PAGE CONTENT IS HANDLED BY luxury.base.min.css ================================================================ */ /* ============================================================== 01. DESIGN TOKENS ================================================================ */ :root { --sh-acacia: #1C2B24; --sh-deep-green: #132019; --sh-forest: #0D1612; --sh-gold: #B8863B; --sh-gold-light: #D19D4C; --sh-cream: #F7F3EC; --sh-sand: #EDE6D6; --sh-white: #FFFFFF; --sh-text: #5D5A55; --sh-muted: #77736D; --sh-border: #E6DED0; --sh-dark-border: rgba(255, 255, 255, .1); --sh-content-width: 850px; --sh-wide-width: 1400px; --primary-color: var(--sh-gold); --primary-color-rgb: 184, 134, 59; } /* ============================================================== 02. BASIC DOCUMENT SAFETY ================================================================ */ html, body { max-width: 100%; overflow-x: hidden; } *, *::before, *::after { box-sizing: border-box; } img, svg, video, iframe { max-width: 100%; } /* ============================================================== 03. INNER-PAGE BODY FOUNDATION -------------------------------------------------------------- Homepage and About page are deliberately excluded. ================================================================ */ body:not(.home):not(.page-id-2247) { background: var(--sh-cream); color: var(--sh-text); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.8; } /* ============================================================== 04. INNER-PAGE LINKS ================================================================ */ body:not(.home):not(.page-id-2247) .site-main a { color: var(--sh-gold); transition: color .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease; } body:not(.home):not(.page-id-2247) .site-main a:hover, body:not(.home):not(.page-id-2247) .site-main a:focus { color: var(--sh-gold-light); } /* ============================================================== 05. INNER-PAGE TYPOGRAPHY ================================================================ */ body:not(.home):not(.page-id-2247) .site-main h1, body:not(.home):not(.page-id-2247) .site-main h2, body:not(.home):not(.page-id-2247) .site-main h3, body:not(.home):not(.page-id-2247) .site-main h4, body:not(.home):not(.page-id-2247) .site-main h5, body:not(.home):not(.page-id-2247) .site-main h6 { color: var(--sh-deep-green); font-family: Georgia, "Times New Roman", serif; font-weight: 400; line-height: 1.18; } body:not(.home):not(.page-id-2247) .site-main h1 { font-size: clamp(2.3rem, 4vw, 4rem); } body:not(.home):not(.page-id-2247) .site-main h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); } body:not(.home):not(.page-id-2247) .site-main h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); } body:not(.home):not(.page-id-2247) .site-main p { margin-top: 0; } /* ============================================================== 06. INNER-PAGE BUTTONS -------------------------------------------------------------- Only affects buttons inside normal inner-page content. ================================================================ */ body:not(.home):not(.page-id-2247) .site-main button, body:not(.home):not(.page-id-2247) .site-main input[type="button"], body:not(.home):not(.page-id-2247) .site-main input[type="reset"], body:not(.home):not(.page-id-2247) .site-main input[type="submit"], body:not(.home):not(.page-id-2247) .site-main .primary-btn, body:not(.home):not(.page-id-2247) .site-main .secondary-btn, body:not(.home):not(.page-id-2247) .site-main .btn, body:not(.home):not(.page-id-2247) .site-main .btn-more { min-height: 44px; border: 1px solid var(--sh-gold); border-radius: 3px; padding: .8rem 1.45rem; background: var(--sh-gold); color: var(--sh-white); font-weight: 600; line-height: 1.2; text-decoration: none; transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; } body:not(.home):not(.page-id-2247) .site-main button:hover, body:not(.home):not(.page-id-2247) .site-main button:focus, body:not(.home):not(.page-id-2247) .site-main input[type="submit"]:hover, body:not(.home):not(.page-id-2247) .site-main input[type="submit"]:focus, body:not(.home):not(.page-id-2247) .site-main .primary-btn:hover, body:not(.home):not(.page-id-2247) .site-main .primary-btn:focus, body:not(.home):not(.page-id-2247) .site-main .btn:hover, body:not(.home):not(.page-id-2247) .site-main .btn:focus, body:not(.home):not(.page-id-2247) .site-main .btn-more:hover, body:not(.home):not(.page-id-2247) .site-main .btn-more:focus { border-color: var(--sh-gold-light); background: var(--sh-gold-light); color: var(--sh-white); transform: translateY(-2px); } body:not(.home):not(.page-id-2247) .site-main .secondary-btn { background: transparent; color: var(--sh-deep-green); } /* ============================================================== 07. INNER-PAGE FORM ELEMENTS ================================================================ */ body:not(.home):not(.page-id-2247) .site-main input:not([type="submit"]):not([type="button"]):not([type="reset"]), body:not(.home):not(.page-id-2247) .site-main select, body:not(.home):not(.page-id-2247) .site-main textarea { width: 100%; border: 1px solid var(--sh-border); border-radius: 3px; padding: .8rem 1rem; background: var(--sh-white); color: var(--sh-text); } body:not(.home):not(.page-id-2247) .site-main input:focus, body:not(.home):not(.page-id-2247) .site-main select:focus, body:not(.home):not(.page-id-2247) .site-main textarea:focus { outline: 2px solid var(--sh-gold); outline-offset: 2px; } /* ============================================================== 08. WORDPRESS BUTTON BLOCKS ================================================================ */ body:not(.home):not(.page-id-2247) .site-main .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 28px; border: 1px solid var(--sh-gold); border-radius: 2px; background: var(--sh-gold); color: var(--sh-white); font-size: .9rem; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background-color .25s ease, border-color .25s ease, transform .25s ease; } body:not(.home):not(.page-id-2247) .site-main .wp-block-button__link:hover { background: var(--sh-gold-light); border-color: var(--sh-gold-light); color: var(--sh-white); transform: translateY(-2px); } /* ============================================================== 09. HEADER -------------------------------------------------------------- Kept deliberately simple. Detailed header styling belongs to luxury-header.min.css. ================================================================ */ body:not(.home) .site-header { background: var(--sh-acacia); } /* ============================================================== 10. HEADER NAVIGATION ================================================================ */ body:not(.home) .main-navigation ul li a { color: var(--sh-white); } body:not(.home) .main-navigation ul li a:hover, body:not(.home) .main-navigation ul li a:focus, body:not(.home) .main-navigation ul li:hover > a, body:not(.home) .main-navigation ul li:focus > a { color: var(--sh-gold-light); } /* ============================================================== 11. DEFAULT PAGE TITLE -------------------------------------------------------------- luxury.base.min.css also handles title presentation. This section ONLY hides the duplicate theme title. ================================================================ */ body:not(.home):not(.page-id-2247) .page-header .page-title, body:not(.home):not(.page-id-2247) .entry-header .entry-title, body:not(.home):not(.page-id-2247) .page-title { display: none !important; } body:not(.home):not(.page-id-2247) .page-header, body:not(.home):not(.page-id-2247) .entry-header { margin: 0 !important; padding: 0 !important; border: 0 !important; } /* ============================================================== 12. FOOTER -------------------------------------------------------------- Footer is explicitly isolated from inner-page systems. ================================================================ */ .site-footer { width: 100%; background: var(--sh-forest); color: rgba(255, 255, 255, .78); } .site-footer .container { width: min( var(--sh-wide-width), calc(100% - 48px) ); max-width: none; } .site-footer .footer-t .container { display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(0, 3.2fr) minmax(260px, 1.4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .site-footer .footer-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); } .site-footer .footer-column, .site-footer .footer-column .widget { min-width: 0; } .site-footer .footer-column a, .site-footer .contact-info a { color: rgba(255, 255, 255, .78); } .site-footer .footer-column a:hover, .site-footer .contact-info a:hover { color: var(--sh-gold-light); } .site-footer .contact-info h3, .site-footer .footer-column .widget-title { color: var(--sh-white); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; } .site-footer .contact-info p { margin-bottom: .65rem; } .site-footer .contact-info .contact-email { white-space: nowrap; } /* ============================================================== 13. FOOTER SOCIAL ICONS ================================================================ */ .site-footer ul.social-networks { display: flex; align-items: center; gap: .65rem; margin: 1.25rem 0 0; padding: 0; list-style: none; } .site-footer ul.social-networks li { margin: 0; } .site-footer ul.social-networks li a { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--sh-dark-border); border-radius: 50%; } .site-footer ul.social-networks li a i, .site-footer ul.social-networks li a svg { display: block; margin: 0; } .luxury-footer-cta .container { width: min( 1100px, calc(100% - 48px) ); } /* ============================================================== 14. WHATSAPP WIDGET -------------------------------------------------------------- COMPLETELY ISOLATED FROM THE BASE BUTTON SYSTEM. ================================================================ */ .wa-widget-container { position: fixed; right: 30px; bottom: 30px; z-index: 99999; display: flex; flex-direction: column; align-items: flex-end; max-width: calc(100vw - 32px); } .wa-chat-box { width: min( 320px, calc(100vw - 32px) ); margin-bottom: 14px; overflow: hidden; border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, .2); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(15px) scale(.96); transform-origin: bottom right; transition: opacity .25s ease, transform .25s ease, visibility .25s ease; } .wa-widget-container.wa-open .wa-chat-box { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); } /* * WhatsApp button is completely isolated. * * The generic button rules above MUST NOT alter it. */ .wa-widget-container .whatsapp-float { display: flex !important; align-items: center !important; justify-content: center !important; width: 62px !important; height: 62px !important; min-width: 62px !important; min-height: 62px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #25D366 !important; color: #FFFFFF !important; box-shadow: 0 5px 16px rgba(0, 0, 0, .28) !important; transform: none !important; transition: background-color .2s ease, box-shadow .2s ease !important; } .wa-widget-container .whatsapp-float:hover, .wa-widget-container .whatsapp-float:focus { background: #128C7E !important; color: #FFFFFF !important; transform: none !important; box-shadow: 0 7px 20px rgba(0, 0, 0, .32) !important; } /* * WhatsApp icon ring */ .wa-widget-container .wa-icon-ring { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 2px solid rgba(255, 255, 255, .18); border-radius: 50%; } .wa-widget-container .wa-icon-ring svg { display: block; width: 27px; height: 27px; margin: 0; } /* ============================================================== 15. BACK TO TOP -------------------------------------------------------------- COMPLETELY PROTECTED FROM THE LUXURY BUTTON SYSTEM. ================================================================ */ .to_top { right: 30px; bottom: 104px; /* * Do not inherit generic button transforms. */ transform: none !important; } /* * Prevent the arrow/icon from moving independently. */ .to_top:hover, .to_top:focus { transform: none !important; } .to_top *, .to_top:hover *, .to_top:focus * { transform: none !important; } /* ============================================================== 16. RESPONSIVE — TABLET ================================================================ */ @media (max-width: 1024px) { .site-footer .footer-t .container { grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); } .site-footer .contact-info { grid-column: 1 / -1; } } /* ============================================================== 17. RESPONSIVE — MOBILE ================================================================ */ @media (max-width: 768px) { /* * Only inner-page containers are adjusted. * Homepage containers remain untouched. */ body:not(.home):not(.page-id-2247) .site-main { width: 100%; } /* * Footer */ .site-footer .footer-t .container, .site-footer .footer-columns { grid-template-columns: 1fr; } .site-footer .footer-brand, .site-footer .contact-info { text-align: center; } .site-footer ul.social-networks { justify-content: center; } .site-footer .contact-info .contact-email { white-space: normal; overflow-wrap: anywhere; } /* * WhatsApp */ .wa-widget-container { right: 16px; bottom: 16px; } /* * Back to top */ .to_top { right: 16px; bottom: 88px; } /* * Inner-page buttons */ body:not(.home):not(.page-id-2247) .site-main .primary-btn, body:not(.home):not(.page-id-2247) .site-main .secondary-btn, body:not(.home):not(.page-id-2247) .site-main .btn, body:not(.home):not(.page-id-2247) .site-main .btn-more { max-width: 100%; } } /* ============================================================== 18. RESPONSIVE — SMALL MOBILE ================================================================ */ @media (max-width: 480px) { .site-footer .container { width: calc(100% - 32px); } .luxury-footer-cta .container { width: calc(100% - 32px); } } /* ============================================================== 19. FINAL PROTECTION -------------------------------------------------------------- These elements must never inherit the luxury button movement. ================================================================ */ .home .to_top, .page-id-2247 .to_top, .wa-widget-container .whatsapp-float, .to_top { transform: none !important; } .home .to_top:hover, .home .to_top:focus, .page-id-2247 .to_top:hover, .page-id-2247 .to_top:focus, .wa-widget-container .whatsapp-float:hover, .wa-widget-container .whatsapp-float:focus, .to_top:hover, .to_top:focus { transform: none !important; } /* ========================================================== TO TOP BUTTON — Corrected positioning (inside frame) ========================================================== */ .to_top { position: fixed !important; right: 20px !important; bottom: 100px !important; /* sits cleanly above WhatsApp */ z-index: 9998 !important; /* just below WhatsApp (99999) */ width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; } .to_top.visible, .to_top[style*="opacity: 1"] { opacity: 1 !important; visibility: visible !important; } .to_top .btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 52px !important; height: 52px !important; min-width: 52px !important; min-height: 52px !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 50% !important; background: var(--sh-acacia, #1C2B24) !important; color: #ffffff !important; box-shadow: 0 8px 24px rgba(13, 24, 18, 0.25) !important; line-height: 1 !important; font-size: 0 !important; text-decoration: none !important; transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important; } .to_top .btn:hover, .to_top .btn:focus { background: var(--sh-gold, #B8863B) !important; transform: translateY(-3px) !important; box-shadow: 0 12px 28px rgba(184, 134, 59, 0.3) !important; } /* Perfectly centered arrow */ .to_top .btn svg { display: block !important; width: 15px !important; height: 18px !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; left: auto !important; transform: none !important; } .to_top .btn svg path, .to_top .btn svg .cls-1 { fill: #ffffff !important; } /* Mobile – keep both buttons inside the frame */ @media (max-width: 768px) { .to_top { right: 16px !important; bottom: 90px !important; } .to_top .btn { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; } }