/* ========================================================= AMAZILIA TRAVEL DESIGN SYSTEM + GLOBAL TEMPLATE Joomla 6.1.3 Cassiopeia Child Template SP Page Builder 6.9 DEVELOPMENT VERSION ========================================================= */ /* ========================================================= TEMPORARY FONT IMPORT Once typography is approved, fonts will be self-hosted. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap'); /* ========================================================= AMAZILIA COMPONENT STYLES Modular CSS loaded from the child template. ========================================================= */ @import url("./components/home.css"); @import url("./components/hero-kenburns.css"); @import url("./components/footer.css"); @import url("./components/experience.css"); @import url("./components/m-destination.css"); @import url("./components/ideas.css"); @import url("./components/exp-detail.css"); @import url("./components/dest-detail.css"); @import url("./components/trip-detail.css"); @import url("./components/why.css"); @import url("./components/planning.css"); @import url("./components/contact.css"); @import url("./components/dmc.css"); @import url("./components/privacy.css"); @import url("./components/planning-thankyou.css"); /* ========================================================= DESIGN TOKENS ========================================================= */ :root { /* BRAND COLORS */ --amz-green-dark: #42800b; --amz-green-light: #8ad135; --amz-orange: #ed6705; --amz-brown: #694f31; --amz-primary: var(--amz-green-dark); --amz-secondary: var(--amz-green-light); --amz-accent: var(--amz-orange); --amz-earth: var(--amz-brown); /* NEUTRALS */ --amz-white: #ffffff; --amz-black: #111111; --amz-gray-50: #f7f7f5; --amz-gray-100: #eeeeea; --amz-gray-200: #deded8; --amz-gray-500: #77776f; --amz-gray-700: #464640; --amz-gray-900: #20201d; --amz-text: var(--amz-gray-900); --amz-text-muted: var(--amz-gray-500); --amz-background: var(--amz-white); --amz-background-soft: var(--amz-gray-50); /* TYPOGRAPHY */ --amz-font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif; --amz-font-body: "Manrope", Arial, Helvetica, sans-serif; --amz-font-weight-regular: 400; --amz-font-weight-medium: 500; --amz-font-weight-semibold: 600; --amz-font-weight-bold: 700; --amz-line-height-heading: 1.05; --amz-line-height-body: 1.65; /* FONT SCALE */ --amz-font-xs: 0.75rem; --amz-font-sm: 0.875rem; --amz-font-base: 1rem; --amz-font-md: 1.125rem; --amz-font-lg: 1.375rem; --amz-h6: 1.25rem; --amz-h5: 1.5rem; --amz-h4: 1.875rem; --amz-h3: 2.375rem; --amz-h2: clamp(2.75rem, 4vw, 4.25rem); --amz-h1: clamp(3.5rem, 6vw, 6.5rem); /* LAYOUT */ --amz-container: 1440px; --amz-container-wide: 1680px; --amz-text-width: 760px; --amz-header-height: 96px; /* SPACING */ --amz-space-xs: 0.5rem; --amz-space-sm: 1rem; --amz-space-md: 2rem; --amz-space-lg: 4rem; --amz-space-xl: 6rem; --amz-space-xxl: 8rem; /* BORDER RADIUS */ --amz-radius-sm: 6px; --amz-radius-md: 12px; --amz-radius-lg: 24px; --amz-radius-xl: 36px; --amz-radius-pill: 999px; /* EFFECTS */ --amz-transition: 0.25s ease; --amz-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.06); --amz-shadow-md: 0 12px 36px rgba(0, 0, 0, 0.10); } /* ========================================================= RESET / BASE ========================================================= */ html { scroll-behavior: smooth; width: 100%; max-width: 100%; overflow-x: clip; } body { width: 100%; max-width: 100%; margin: 0; overflow-x: clip; font-family: var(--amz-font-body); font-size: var(--amz-font-base); font-weight: var(--amz-font-weight-regular); line-height: var(--amz-line-height-body); color: var(--amz-text); background: var(--amz-background); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } *, *::before, *::after { box-sizing: border-box; } img { display: block; max-width: 100%; height: auto; } body.amz-menu-open { overflow: hidden; } /* ========================================================= TYPOGRAPHY ========================================================= */ h1, h2, h3, h4, h5, h6 { margin-top: 0; font-family: var(--amz-font-heading); font-weight: var(--amz-font-weight-medium); line-height: var(--amz-line-height-heading); color: var(--amz-text); } h1 { font-size: var(--amz-h1); letter-spacing: -0.035em; } h2 { font-size: var(--amz-h2); letter-spacing: -0.025em; } h3 { font-size: var(--amz-h3); letter-spacing: -0.015em; } h4 { font-size: var(--amz-h4); } h5 { font-size: var(--amz-h5); } h6 { font-size: var(--amz-h6); } p { margin-top: 0; margin-bottom: 1.5rem; } a { color: var(--amz-primary); text-decoration: none; transition: color var(--amz-transition), opacity var(--amz-transition); } a:hover, a:focus { color: var(--amz-accent); } /* ========================================================= TYPOGRAPHIC COMPONENTS ========================================================= */ .amz-eyebrow { display: inline-block; margin-bottom: 1rem; font-family: var(--amz-font-body); font-size: 0.75rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amz-green-dark); } .amz-display { margin-bottom: 1.5rem; font-family: var(--amz-font-heading); font-size: var(--amz-h1); font-weight: 500; line-height: 0.98; letter-spacing: -0.04em; color: var(--amz-text); } .amz-section-title { margin-bottom: 1.5rem; font-family: var(--amz-font-heading); font-size: var(--amz-h2); font-weight: 500; line-height: 1; letter-spacing: -0.03em; } .amz-lead { max-width: 800px; font-family: var(--amz-font-body); font-size: clamp(1.125rem, 1.5vw, 1.35rem); font-weight: 400; line-height: 1.65; color: var(--amz-gray-700); } .amz-small { font-size: var(--amz-font-sm); color: var(--amz-text-muted); } /* ========================================================= CONTAINERS ========================================================= */ .amz-container { width: min( calc(100% - 48px), var(--amz-container) ); margin-inline: auto; } .amz-container-wide { width: min( calc(100% - 48px), var(--amz-container-wide) ); margin-inline: auto; } .amz-text-container { width: min( 100%, var(--amz-text-width) ); } /* ========================================================= GLOBAL HEADER ========================================================= */ .amz-header { position: fixed; top: 0; left: 0; width: 100%; height: var(--amz-header-height); z-index: 1000; color: var(--amz-gray-900); background: rgba(255, 255, 255, 0.98); border-bottom: 1px solid rgba(0, 0, 0, 0.06); transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .amz-header.is-scrolled { background: rgba(255, 255, 255, 0.98); border-bottom-color: rgba(0, 0, 0, 0.06); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); } /* ========================================================= HEADER INNER ========================================================= */ .amz-header__inner { width: min( calc(100% - 64px), var(--amz-container-wide) ); height: 100%; margin-inline: auto; display: flex; align-items: center; gap: 40px; } /* ========================================================= LOGO ========================================================= */ .amz-header__brand { position: relative; display: flex; align-items: center; flex: 0 0 auto; width: 220px; z-index: 1002; } .amz-header__logo { width: 100%; height: auto; transition: opacity 0.3s ease; } .amz-header__logo--white { position: absolute; top: 50%; left: 0; transform: translateY(-50%); opacity: 0; pointer-events: none; } .amz-header__logo--color { opacity: 1; } /* ========================================================= NAVIGATION PANEL ========================================================= */ .amz-header__panel { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 24px; min-width: 0; } /* ========================================================= MAIN NAVIGATION ========================================================= */ .amz-header__nav { display: flex; align-items: center; justify-content: flex-end; margin-left: auto; } .amz-header__nav .mod-menu { margin: 0; padding: 0; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: clamp(14px, 1.25vw, 25px); list-style: none; white-space: nowrap; } .amz-header__nav .mod-menu > li { position: relative; flex: 0 0 auto; width: auto; margin: 0; padding: 0; } .amz-header__nav .mod-menu > li > a, .amz-header__nav .mod-menu > li > span { position: relative; display: inline-flex; align-items: center; width: auto; min-height: 44px; padding: 0; font-family: var(--amz-font-body); font-size: 0.82rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.005em; color: var(--amz-gray-900); text-decoration: none; transition: color var(--amz-transition), background-color var(--amz-transition), transform var(--amz-transition); } /* ========================================================= STANDARD MENU ITEM UNDERLINE ========================================================= */ .amz-header__nav .mod-menu > li > a:not(.amz-menu-cta)::after { content: ""; position: absolute; left: 0; bottom: 5px; width: 0; height: 1px; background: var(--amz-orange); transition: width var(--amz-transition); } .amz-header__nav .mod-menu > li > a:not(.amz-menu-cta):hover, .amz-header__nav .mod-menu > li > a:not(.amz-menu-cta):focus { color: var(--amz-green-dark); } .amz-header__nav .mod-menu > li > a:not(.amz-menu-cta):hover::after, .amz-header__nav .mod-menu > li > a:not(.amz-menu-cta):focus::after, .amz-header__nav .mod-menu > li.active > a:not(.amz-menu-cta)::after, .amz-header__nav .mod-menu > li.current > a:not(.amz-menu-cta)::after { width: 100%; } /* ========================================================= HEADER CTA Joomla: Menu Item > Link Type > Link CSS Style amz-menu-cta ========================================================= */ .amz-header__nav .mod-menu > li > a.amz-menu-cta { min-height: 46px; margin-left: 6px; padding: 0.82rem 1.35rem; color: var(--amz-white); background: var(--amz-orange); border-radius: var(--amz-radius-pill); font-size: 0.79rem; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 5px 15px rgba(237, 103, 5, 0.15); } .amz-header__nav .mod-menu > li > a.amz-menu-cta::after { display: none; } .amz-header__nav .mod-menu > li > a.amz-menu-cta:hover, .amz-header__nav .mod-menu > li > a.amz-menu-cta:focus { color: var(--amz-white); background: var(--amz-green-dark); transform: translateY(-1px); } /* ========================================================= DROPDOWN TOGGLE / INDICATOR ========================================================= */ .amz-header__nav .mod-menu button.mm-toggler { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 44px; margin: 0 0 0 3px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--amz-green-dark) !important; cursor: pointer; transition: color var(--amz-transition), background-color var(--amz-transition), transform var(--amz-transition); } /* * Cassiopeia / MetisMenu draws the chevron with CSS borders. * Override the triangle directly so Joomla's default blue * cannot bleed through. */ .amz-header__nav .mod-menu button.mm-toggler::after { content: "" !important; width: 0 !important; height: 0 !important; margin-inline-start: 0 !important; border-left: 0.38rem solid transparent !important; border-right: 0.38rem solid transparent !important; border-top: 0.42rem solid var(--amz-green-dark) !important; border-bottom: 0 !important; transform: rotate(0deg); transform-origin: center; transition: transform var(--amz-transition), border-top-color var(--amz-transition); } /* Hide any icon/SVG Joomla or an override may inject */ .amz-header__nav .mod-menu button.mm-toggler > svg, .amz-header__nav .mod-menu button.mm-toggler > .icon-chevron-down, .amz-header__nav .mod-menu button.mm-toggler > .icon-angle-down { display: none !important; } .amz-header__nav .mod-menu button.mm-toggler:hover, .amz-header__nav .mod-menu button.mm-toggler:focus-visible { color: var(--amz-orange) !important; background: rgba(237, 103, 5, 0.08); } .amz-header__nav .mod-menu button.mm-toggler:hover::after, .amz-header__nav .mod-menu button.mm-toggler:focus-visible::after { border-top-color: var(--amz-orange) !important; } .amz-header__nav .mod-menu button.mm-toggler[aria-expanded="true"], .amz-header__nav .mod-menu li.mm-active > button.mm-toggler { color: var(--amz-orange) !important; } .amz-header__nav .mod-menu button.mm-toggler[aria-expanded="true"]::after, .amz-header__nav .mod-menu li.mm-active > button.mm-toggler::after { border-top-color: var(--amz-orange) !important; transform: rotate(180deg); } /* Parent menu while its dropdown is open */ .amz-header__nav .mod-menu > li.mm-active > a:not(.amz-menu-cta), .amz-header__nav .mod-menu > li:focus-within > a:not(.amz-menu-cta) { color: var(--amz-green-dark); } .amz-header__nav .mod-menu > li.mm-active > a:not(.amz-menu-cta)::after, .amz-header__nav .mod-menu > li:focus-within > a:not(.amz-menu-cta)::after { width: 100%; } /* Overlay header: keep indicator inside the Amazilia palette */ body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__nav .mod-menu button.mm-toggler { color: var(--amz-green-light) !important; } body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__nav .mod-menu button.mm-toggler::after { border-top-color: var(--amz-green-light) !important; } body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__nav .mod-menu button.mm-toggler:hover, body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__nav .mod-menu button.mm-toggler:focus-visible, body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__nav .mod-menu button.mm-toggler[aria-expanded="true"], body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__nav .mod-menu li.mm-active > button.mm-toggler { color: var(--amz-orange) !important; background: rgba(255, 255, 255, 0.10); } body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__nav .mod-menu button.mm-toggler:hover::after, body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__nav .mod-menu button.mm-toggler:focus-visible::after, body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__nav .mod-menu button.mm-toggler[aria-expanded="true"]::after, body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__nav .mod-menu li.mm-active > button.mm-toggler::after { border-top-color: var(--amz-orange) !important; } /* ========================================================= SUBMENUS ========================================================= */ .amz-header__nav .mod-menu li ul { position: absolute; top: calc(100% + 10px); left: -20px; min-width: 280px; margin: 0; padding: 14px; list-style: none; background: rgba(255, 255, 255, 0.99); border: 1px solid rgba(66, 128, 11, 0.10); border-radius: 20px; box-shadow: 0 20px 55px rgba(32, 32, 29, 0.13); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity var(--amz-transition), transform var(--amz-transition), visibility var(--amz-transition); } /* Invisible bridge prevents the dropdown closing while the pointer travels across the small gap below the parent item. */ .amz-header__nav .mod-menu li ul::before { content: ""; position: absolute; top: -12px; left: 0; width: 100%; height: 12px; } /* * Desktop dropdowns open on hover. * MetisMenu normally keeps .mm-collapse display:none until click; * on desktop we keep it in the layout and control visibility with * opacity/visibility instead. Mobile keeps the native click behavior. */ @media (min-width: 992px) { .amz-header__nav .mod-menu > li > ul.mm-collapse { display: block !important; height: auto !important; overflow: visible !important; } .amz-header__nav .mod-menu > li:hover > ul, .amz-header__nav .mod-menu > li:focus-within > ul, .amz-header__nav .mod-menu > li.mm-active > ul { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* Chevron follows hover even before MetisMenu changes aria-expanded */ .amz-header__nav .mod-menu > li:hover > button.mm-toggler::after, .amz-header__nav .mod-menu > li:focus-within > button.mm-toggler::after { border-top-color: var(--amz-orange) !important; transform: rotate(180deg); } } /* Click-open state remains available */ .amz-header__nav .mod-menu li.mm-active > ul { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* Child item reset */ .amz-header__nav .mod-menu li ul > li { position: relative; width: 100%; margin: 0; padding: 0; } /* Add breathing room so hover surfaces do not touch */ .amz-header__nav .mod-menu li ul > li + li { margin-top: 10px; } .amz-header__nav .mod-menu li ul a { position: relative; display: flex; align-items: center; width: 100%; min-height: 48px; padding: 13px 16px; border-radius: 12px; font-family: var(--amz-font-body); font-size: 0.86rem; font-weight: 600; line-height: 1.35; color: var(--amz-gray-900); text-decoration: none !important; background: transparent; transition: color var(--amz-transition), background-color var(--amz-transition), transform var(--amz-transition); } /* Clear, border-free hover */ .amz-header__nav .mod-menu li ul a:hover, .amz-header__nav .mod-menu li ul a:focus-visible { color: var(--amz-green-dark); background: rgba(138, 209, 53, 0.16); transform: translateY(-1px); box-shadow: none !important; } /* Active/current submenu item */ .amz-header__nav .mod-menu li ul > li.active > a, .amz-header__nav .mod-menu li ul > li.current > a, .amz-header__nav .mod-menu li ul > li.mm-active > a, .amz-header__nav .mod-menu li ul > li > a[aria-current="page"] { color: var(--amz-green-dark) !important; background: rgba(138, 209, 53, 0.24) !important; font-weight: 700; text-decoration: none !important; box-shadow: none !important; } .amz-header__nav .mod-menu li ul > li.active > a:hover, .amz-header__nav .mod-menu li ul > li.current > a:hover, .amz-header__nav .mod-menu li ul > li.mm-active > a:hover, .amz-header__nav .mod-menu li ul > li > a[aria-current="page"]:hover { color: var(--amz-green-dark) !important; background: rgba(138, 209, 53, 0.32) !important; transform: translateY(-1px); } /* ========================================================= HEADER UTILITY / LANGUAGE ========================================================= */ .amz-header__utility { display: flex; align-items: center; flex: 0 0 auto; } .amz-header__utility .mod-languages { display: flex; align-items: center; margin: 0; padding: 0; background: transparent !important; } .amz-header__utility .mod-languages ul, .amz-header__utility .mod-languages ul.lang-inline { margin: 0 !important; padding: 0 !important; display: inline-flex; align-items: center; gap: 6px; list-style: none; background: transparent !important; } .amz-header__utility .mod-languages li, .amz-header__utility .mod-languages li.lang-active, .amz-header__utility .mod-languages li.active, .amz-header__utility .mod-languages li.current { display: inline-flex; align-items: center; justify-content: center; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .amz-header__utility .mod-languages li > a, .amz-header__utility .mod-languages li > span { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; min-width: 42px; margin: 0 !important; padding: 0 !important; border: 1px solid transparent !important; border-radius: 12px; background: transparent; font-family: var(--amz-font-body); font-size: 0.76rem; font-weight: 700; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amz-gray-700) !important; text-decoration: none !important; box-shadow: none; transition: color var(--amz-transition), background-color var(--amz-transition), border-color var(--amz-transition), transform var(--amz-transition), box-shadow var(--amz-transition); } /* INACTIVE LANGUAGE - WHITE / SCROLLED HEADER */ .amz-header__utility .mod-languages li:not(.lang-active) > a:hover, .amz-header__utility .mod-languages li:not(.lang-active) > a:focus, .amz-header__utility .mod-languages li:not(.lang-active) > span:hover { color: var(--amz-green-dark) !important; background: rgba(138, 209, 53, 0.16); border-color: rgba(66, 128, 11, 0.14) !important; transform: translateY(-1px); } /* ACTIVE LANGUAGE - WHITE / SCROLLED HEADER */ .amz-header__utility .mod-languages li.lang-active > a, .amz-header__utility .mod-languages li.lang-active > span, .amz-header__utility .mod-languages li > a[aria-current="page"] { color: #284f08 !important; background: var(--amz-green-light) !important; border-color: var(--amz-green-light) !important; box-shadow: 0 5px 14px rgba(66, 128, 11, 0.13); } .amz-header__utility .mod-languages li.lang-active > a:hover, .amz-header__utility .mod-languages li.lang-active > a:focus, .amz-header__utility .mod-languages li.lang-active > span:hover, .amz-header__utility .mod-languages li > a[aria-current="page"]:hover, .amz-header__utility .mod-languages li > a[aria-current="page"]:focus { color: #284f08 !important; background: #9ddf4f !important; border-color: #9ddf4f !important; transform: translateY(-1px); box-shadow: 0 7px 16px rgba(66, 128, 11, 0.16); } .amz-header__utility .mod-languages li > a:focus-visible { outline: 2px solid var(--amz-orange); outline-offset: 2px; } /* ========================================================= MOBILE BUTTON ========================================================= */ .amz-menu-toggle { display: none; position: relative; width: 44px; height: 44px; padding: 0; flex: 0 0 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border: 0; background: transparent; cursor: pointer; z-index: 1002; } .amz-menu-toggle__line { display: block; width: 24px; height: 2px; background: var(--amz-gray-900); transition: transform var(--amz-transition), opacity var(--amz-transition), background-color var(--amz-transition); } /* ========================================================= OVERLAY HEADER Add: amz-header-overlay as Page Class on pages with photographic hero. ========================================================= */ body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; box-shadow: none; } body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__logo--color { opacity: 0; } body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__logo--white { opacity: 1; } body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__nav .mod-menu > li > a:not(.amz-menu-cta), body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__nav .mod-menu > li > span { color: var(--amz-white); } /* ========================================================= LANGUAGE SWITCHER - TRANSPARENT HEADER ========================================================= */ body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__utility .mod-languages li:not(.lang-active) > a, body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__utility .mod-languages li:not(.lang-active) > span { color: var(--amz-white) !important; background: transparent; border-color: transparent !important; } body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__utility .mod-languages li:not(.lang-active) > a:hover, body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__utility .mod-languages li:not(.lang-active) > a:focus, body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__utility .mod-languages li:not(.lang-active) > span:hover { color: var(--amz-white) !important; background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.24) !important; transform: translateY(-1px); } body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__utility .mod-languages li.lang-active > a, body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__utility .mod-languages li.lang-active > span, body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__utility .mod-languages li > a[aria-current="page"] { color: var(--amz-green-dark) !important; background: rgba(255, 255, 255, 0.94) !important; border-color: rgba(255, 255, 255, 0.94) !important; box-shadow: 0 5px 18px rgba(0, 0, 0, 0.10); } body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__utility .mod-languages li.lang-active > a:hover, body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__utility .mod-languages li.lang-active > a:focus, body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__utility .mod-languages li.lang-active > span:hover, body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__utility .mod-languages li > a[aria-current="page"]:hover, body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__utility .mod-languages li > a[aria-current="page"]:focus { color: var(--amz-green-dark) !important; background: var(--amz-white) !important; border-color: var(--amz-white) !important; transform: translateY(-1px); box-shadow: 0 7px 20px rgba(0, 0, 0, 0.14); } body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-menu-toggle__line { background: var(--amz-white); } body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__nav .mod-menu > li > a.amz-menu-cta { color: var(--amz-white); background: var(--amz-orange); } body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__nav .mod-menu > li > a.amz-menu-cta:hover, body.amz-header-overlay:not(.amz-menu-open) .amz-header:not(.is-scrolled) .amz-header__nav .mod-menu > li > a.amz-menu-cta:focus { background: var(--amz-green-dark); } /* ========================================================= MAIN SITE CONTENT ========================================================= */ .amz-site-main { width: 100%; padding-top: var(--amz-header-height); } body.amz-header-overlay .amz-site-main { padding-top: 0; } .amz-site-main main { width: 100%; margin: 0; padding: 0; } /* ========================================================= SECTIONS ========================================================= */ .amz-section { padding-block: var(--amz-space-xl); } .amz-section-lg { padding-block: var(--amz-space-xxl); } .amz-section-light { background: var(--amz-background-soft); } .amz-section-green { color: var(--amz-white); background: var(--amz-green-dark); } .amz-section-brown { color: var(--amz-white); background: var(--amz-brown); } /* ========================================================= BUTTONS ========================================================= */ .amz-button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0.9rem 1.65rem; border: 0; border-radius: var(--amz-radius-pill); font-family: var(--amz-font-body); font-size: 0.875rem; font-weight: 700; line-height: 1; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; transition: background-color var(--amz-transition), color var(--amz-transition), transform var(--amz-transition); } .amz-button-primary { color: var(--amz-white); background: var(--amz-green-dark); } .amz-button-primary:hover, .amz-button-primary:focus { color: var(--amz-white); background: var(--amz-orange); transform: translateY(-2px); } .amz-button-accent { color: var(--amz-white); background: var(--amz-orange); } .amz-button-accent:hover, .amz-button-accent:focus { color: var(--amz-white); background: var(--amz-green-dark); transform: translateY(-2px); } .amz-button-outline { color: var(--amz-green-dark); background: transparent; border: 1px solid var(--amz-green-dark); } .amz-button-outline:hover, .amz-button-outline:focus { color: var(--amz-white); background: var(--amz-green-dark); } .amz-button-earth { color: var(--amz-white); background: var(--amz-brown); } .amz-button-earth:hover, .amz-button-earth:focus { color: var(--amz-white); background: var(--amz-green-dark); transform: translateY(-2px); } /* ========================================================= BRAND UTILITIES ========================================================= */ .amz-text-green { color: var(--amz-green-dark); } .amz-text-green-light { color: var(--amz-green-light); } .amz-text-orange { color: var(--amz-orange); } .amz-text-brown { color: var(--amz-brown); } .amz-bg-green { background-color: var(--amz-green-dark); } .amz-bg-green-light { background-color: var(--amz-green-light); } .amz-bg-orange { background-color: var(--amz-orange); } .amz-bg-brown { background-color: var(--amz-brown); } /* ========================================================= TYPOGRAPHY / DESIGN SYSTEM DEMO ========================================================= */ .amz-design-preview { padding: 100px 0; } .amz-design-preview__intro { max-width: 1050px; margin-bottom: 90px; } .amz-design-preview__divider { width: 100%; height: 1px; margin: 70px 0; background: var(--amz-gray-200); } .amz-design-preview__colors { display: grid; grid-template-columns: repeat( 4, minmax(0, 1fr) ); gap: 20px; margin-top: 40px; } .amz-color-card { min-height: 180px; padding: 28px; border-radius: var(--amz-radius-lg); display: flex; flex-direction: column; justify-content: flex-end; } .amz-color-card strong { display: block; margin-bottom: 4px; font-size: 1rem; } .amz-color-card span { font-size: 0.875rem; opacity: 0.8; } .amz-color-card--dark { color: var(--amz-white); background: var(--amz-green-dark); } .amz-color-card--light { color: var(--amz-gray-900); background: var(--amz-green-light); } .amz-color-card--orange { color: var(--amz-white); background: var(--amz-orange); } .amz-color-card--brown { color: var(--amz-white); background: var(--amz-brown); } .amz-design-preview__buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 35px; } /* ========================================================= FOOTER ========================================================= */ .amz-footer { width: 100%; } /* ========================================================= RESPONSIVE - SMALL DESKTOP ========================================================= */ @media (max-width: 1199px) { .amz-header__inner { width: min( calc(100% - 40px), var(--amz-container-wide) ); gap: 22px; } .amz-header__brand { width: 185px; } .amz-header__nav .mod-menu { gap: 14px; } .amz-header__nav .mod-menu > li > a, .amz-header__nav .mod-menu > li > span { font-size: 0.75rem; } .amz-header__nav .mod-menu > li > a.amz-menu-cta { padding: 0.78rem 1.15rem; font-size: 0.73rem; } .amz-design-preview__colors { grid-template-columns: repeat( 2, minmax(0, 1fr) ); } } /* ========================================================= RESPONSIVE - TABLET / MOBILE NAVIGATION ========================================================= */ @media (max-width: 991px) { :root { --amz-header-height: 82px; --amz-space-xl: 5rem; --amz-space-xxl: 6rem; } /* HEADER */ .amz-header__inner { width: calc(100% - 30px); gap: 20px; } .amz-header__brand { width: 175px; } .amz-menu-toggle { display: flex; margin-left: auto; } /* MOBILE PANEL */ .amz-header__panel { position: fixed; top: var(--amz-header-height); right: 0; bottom: 0; left: 0; width: 100%; padding: 36px 24px 60px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 32px; overflow-y: auto; background: var(--amz-white); opacity: 0; visibility: hidden; transform: translateX(100%); transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s ease; } body.amz-menu-open .amz-header__panel { opacity: 1; visibility: visible; transform: translateX(0); } body.amz-menu-open .amz-header { background: var(--amz-white); border-bottom-color: rgba(0, 0, 0, 0.06); } body.amz-menu-open .amz-header__logo--color { opacity: 1; } body.amz-menu-open .amz-header__logo--white { opacity: 0; } /* MOBILE NAVIGATION */ .amz-header__nav { width: 100%; margin-left: 0; } .amz-header__nav .mod-menu { width: 100%; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; white-space: normal; } .amz-header__nav .mod-menu > li { width: 100%; flex: 0 0 auto; border-bottom: 1px solid var(--amz-gray-100); } .amz-header__nav .mod-menu > li > a:not(.amz-menu-cta), .amz-header__nav .mod-menu > li > span { width: 100%; min-height: 58px; padding: 12px 0; font-family: var(--amz-font-heading); font-size: 1.7rem; font-weight: 500; color: var(--amz-gray-900); } .amz-header__nav .mod-menu > li > a::after { display: none; } /* MOBILE CTA */ .amz-header__nav .mod-menu > li > a.amz-menu-cta { width: 100%; min-height: 54px; margin: 24px 0 0; padding: 0.95rem 1.5rem; justify-content: center; font-family: var(--amz-font-body); font-size: 0.9rem; font-weight: 700; color: var(--amz-white); background: var(--amz-orange); box-shadow: none; } .amz-header__nav .mod-menu > li > a.amz-menu-cta:hover, .amz-header__nav .mod-menu > li > a.amz-menu-cta:focus { color: var(--amz-white); background: var(--amz-green-dark); } /* MOBILE SUBMENUS */ .amz-header__nav .mod-menu li ul { position: static; min-width: 0; margin: 0; padding: 0 0 15px 20px; border: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .amz-header__nav .mod-menu li ul a { padding: 7px 0; font-family: var(--amz-font-body); font-size: 0.9rem; } /* MOBILE LANGUAGE AREA */ .amz-header__utility { width: 100%; padding-top: 10px; } .amz-header__utility .mod-languages ul, .amz-header__utility .mod-languages ul.lang-inline { gap: 8px; } .amz-header__utility .mod-languages li > a, .amz-header__utility .mod-languages li > span { width: 42px; height: 42px; min-width: 42px; border-radius: 12px; font-size: 0.76rem; } body.amz-menu-open .amz-header__utility .mod-languages li:not(.lang-active) > a, body.amz-menu-open .amz-header__utility .mod-languages li:not(.lang-active) > span { color: var(--amz-gray-900) !important; background: transparent; border-color: transparent !important; } body.amz-menu-open .amz-header__utility .mod-languages li:not(.lang-active) > a:hover, body.amz-menu-open .amz-header__utility .mod-languages li:not(.lang-active) > a:focus, body.amz-menu-open .amz-header__utility .mod-languages li:not(.lang-active) > span:hover { color: var(--amz-green-dark) !important; background: rgba(138, 209, 53, 0.16); border-color: rgba(66, 128, 11, 0.14) !important; } body.amz-menu-open .amz-header__utility .mod-languages li.lang-active > a, body.amz-menu-open .amz-header__utility .mod-languages li.lang-active > span, body.amz-menu-open .amz-header__utility .mod-languages li > a[aria-current="page"] { color: #284f08 !important; background: var(--amz-green-light) !important; border-color: var(--amz-green-light) !important; } /* MOBILE TOGGLE OPEN STATE */ body.amz-menu-open .amz-menu-toggle__line { background: var(--amz-gray-900); } body.amz-menu-open .amz-menu-toggle__line:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.amz-menu-open .amz-menu-toggle__line:nth-child(2) { opacity: 0; } body.amz-menu-open .amz-menu-toggle__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* ========================================================= RESPONSIVE - MOBILE ========================================================= */ @media (max-width: 767px) { :root { --amz-h3: 2rem; --amz-h4: 1.65rem; --amz-space-lg: 3rem; --amz-space-xl: 4rem; --amz-space-xxl: 5rem; } .amz-container, .amz-container-wide { width: min( calc(100% - 30px), var(--amz-container) ); } .amz-header__brand { width: 160px; } .amz-design-preview { padding: 70px 0; } .amz-design-preview__intro { margin-bottom: 60px; } .amz-design-preview__colors { grid-template-columns: 1fr; } } /* ========================================================= AMAZILIA — HEADER / MENU STABILITY v7 27 OCT 2026 1) Prevent Cassiopeia active-link decoration from creating a second underline above the Amazilia orange indicator. 2) Compact desktop dropdown spacing. 3) Force the custom mobile trigger to remain available at the Amazilia tablet/mobile breakpoint. ========================================================= */ /* --------------------------------------------------------- TOP-LEVEL LINKS Keep only the Amazilia ::after underline. --------------------------------------------------------- */ .amz-header__nav .metismenu.mod-menu > li > a:not(.amz-menu-cta), .amz-header__nav .metismenu.mod-menu > li.active > a:not(.amz-menu-cta), .amz-header__nav .metismenu.mod-menu > li.current > a:not(.amz-menu-cta), .amz-header__nav .metismenu.mod-menu > li > a[aria-current="page"]:not(.amz-menu-cta) { text-decoration: none !important; border-bottom: 0 !important; box-shadow: none !important; background-image: none !important; } /* --------------------------------------------------------- DESKTOP DROPDOWN DENSITY --------------------------------------------------------- */ @media (min-width: 992px) { .amz-header__nav .mod-menu li ul { padding: 10px; } .amz-header__nav .mod-menu li ul > li + li { margin-top: 2px; } .amz-header__nav .mod-menu li ul a { min-height: 40px; padding: 9px 14px; border-radius: 10px; } } /* --------------------------------------------------------- TABLET / MOBILE TRIGGER STABILITY --------------------------------------------------------- */ @media (max-width: 991px) { .amz-menu-toggle { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; margin-left: auto !important; position: relative; z-index: 1004; } .amz-header__brand { z-index: 1004; } .amz-header__panel { z-index: 1001; } } /* ========================================================= AMAZILIA — NAVIGATION INTEGRATION FIX v8 27 OCT 2026 Fixes: 1) Custom Amazilia mobile panel + Joomla/Cassiopeia mod_menu internal Bootstrap collapse integration. 2) Removes the native Joomla navbar toggler from our custom panel. 3) Forces the module's navbar-collapse to stay expanded inside the custom Amazilia mobile navigation. 4) Makes desktop dropdown rows genuinely compact by resetting MetisMenu item padding/min-height as well as anchor spacing. ========================================================= */ /* --------------------------------------------------------- DESKTOP DROPDOWN — COMPACT FINAL DENSITY --------------------------------------------------------- */ @media (min-width: 992px) { .amz-header__nav ul.mod-menu_dropdown-metismenu > li.parent > ul.mm-collapse { top: calc(100% + 6px) !important; padding: 8px !important; } .amz-header__nav ul.mod-menu_dropdown-metismenu > li.parent > ul.mm-collapse > li, .amz-header__nav ul.mod-menu_dropdown-metismenu > li.parent > ul.mm-collapse > li.metismenu-item { width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } .amz-header__nav ul.mod-menu_dropdown-metismenu > li.parent > ul.mm-collapse > li + li { margin-top: 0 !important; } .amz-header__nav ul.mod-menu_dropdown-metismenu > li.parent > ul.mm-collapse > li > a { width: 100% !important; min-height: 36px !important; margin: 0 !important; padding: 7px 12px !important; border: 0 !important; border-radius: 9px !important; line-height: 1.25 !important; } } /* --------------------------------------------------------- TABLET / MOBILE — JOOMLA MOD_MENU INTEGRATION The Amazilia header already owns the outer mobile toggle. Joomla's Collapsible Dropdown layout adds a second native .navbar-toggler + .navbar-collapse. We hide the duplicate trigger and keep its collapse expanded inside our panel. --------------------------------------------------------- */ @media (max-width: 991px) { /* Our custom trigger must be the only visible hamburger. */ .amz-header .amz-header__nav button.navbar-toggler, .amz-header .amz-header__nav .navbar-toggler { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Joomla/Bootstrap wrapper must not collapse inside the already-collapsible Amazilia navigation panel. */ .amz-header .amz-header__nav .navbar-collapse, .amz-header .amz-header__nav .navbar-collapse.collapse, .amz-header .amz-header__nav .navbar-collapse.collapsing { display: block !important; width: 100% !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; transform: none !important; transition: none !important; } .amz-header .amz-header__nav .navbar-collapse > .mod-menu, .amz-header .amz-header__nav .navbar-collapse > ul.mod-menu_dropdown-metismenu { display: flex !important; width: 100% !important; } /* Keep our outer panel above the page and below the fixed header. */ .amz-header__panel { z-index: 1001 !important; } .amz-menu-toggle, .amz-header__brand { z-index: 1004 !important; } } /* ========================================================= AMAZILIA — NAVIGATION REFINEMENT v9 27 OCT 2026 Goals: - Mobile/tablet menu becomes compact, functional and aligned. - Parent chevron stays on the same row as its label. - Mobile top-level typography uses Manrope for better UI clarity. - Desktop dropdown regains a little breathing room without returning to the oversized original spacing. ========================================================= */ /* --------------------------------------------------------- DESKTOP DROPDOWN — BALANCED DENSITY --------------------------------------------------------- */ @media (min-width: 992px) { .amz-header__nav ul.mod-menu_dropdown-metismenu > li.parent > ul.mm-collapse { padding: 10px !important; } .amz-header__nav ul.mod-menu_dropdown-metismenu > li.parent > ul.mm-collapse > li + li { margin-top: 4px !important; } .amz-header__nav ul.mod-menu_dropdown-metismenu > li.parent > ul.mm-collapse > li > a { min-height: 42px !important; padding: 9px 13px !important; border-radius: 10px !important; line-height: 1.30 !important; } } /* --------------------------------------------------------- TABLET / MOBILE — MENU LAYOUT REFINEMENT --------------------------------------------------------- */ @media (max-width: 991px) { /* Outer panel */ .amz-header__panel { padding: 20px 24px 36px !important; gap: 18px !important; } /* Main navigation wrapper */ .amz-header__nav, .amz-header__nav .navbar-collapse, .amz-header__nav .mod-menu, .amz-header__nav ul.mod-menu_dropdown-metismenu { width: 100% !important; } .amz-header__nav .mod-menu { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; } /* ----------------------------------------------------- TOP LEVEL ITEMS ----------------------------------------------------- */ .amz-header__nav .mod-menu > li { position: relative !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--amz-gray-100) !important; } /* Parent rows need two columns: label + chevron. */ .amz-header__nav .mod-menu > li.parent { display: grid !important; grid-template-columns: minmax(0, 1fr) 44px !important; grid-template-rows: auto auto !important; align-items: center !important; column-gap: 4px !important; } /* Top-level labels */ .amz-header__nav .mod-menu > li > a:not(.amz-menu-cta), .amz-header__nav .mod-menu > li > span { width: 100% !important; min-height: 54px !important; margin: 0 !important; padding: 0 4px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; font-family: var(--amz-font-body) !important; font-size: 1.03rem !important; font-weight: 600 !important; line-height: 1.2 !important; text-align: left !important; color: var(--amz-gray-900) !important; border: 0 !important; box-shadow: none !important; background: transparent !important; } /* Active page — no underline in mobile panel */ .amz-header__nav .mod-menu > li > a::after, .amz-header__nav .mod-menu > li.active > a::after, .amz-header__nav .mod-menu > li.current > a::after { display: none !important; } .amz-header__nav .mod-menu > li.active > a:not(.amz-menu-cta), .amz-header__nav .mod-menu > li.current > a:not(.amz-menu-cta), .amz-header__nav .mod-menu > li > a[aria-current="page"]:not(.amz-menu-cta) { color: var(--amz-green-dark) !important; } /* ----------------------------------------------------- CHEVRON — SAME ROW AS LABEL ----------------------------------------------------- */ .amz-header__nav .mod-menu > li.parent > button.mm-toggler { grid-column: 2 !important; grid-row: 1 !important; width: 44px !important; height: 54px !important; margin: 0 !important; padding: 0 !important; justify-self: end !important; align-self: center !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; } .amz-header__nav .mod-menu > li.parent > button.mm-toggler::after { border-left-width: .32rem !important; border-right-width: .32rem !important; border-top-width: .36rem !important; } /* ----------------------------------------------------- SUBMENU — SECOND GRID ROW ----------------------------------------------------- */ .amz-header__nav .mod-menu > li.parent > ul.mm-collapse { grid-column: 1 / -1 !important; grid-row: 2 !important; position: static !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 2px 0 12px 12px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; } /* JS controls mm-show. */ .amz-header__nav .mod-menu > li.parent > ul.mm-collapse:not(.mm-show) { display: none !important; } .amz-header__nav .mod-menu > li.parent > ul.mm-collapse.mm-show { display: block !important; height: auto !important; overflow: visible !important; } .amz-header__nav .mod-menu > li.parent > ul.mm-collapse > li { width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } .amz-header__nav .mod-menu > li.parent > ul.mm-collapse > li + li { margin-top: 2px !important; } .amz-header__nav .mod-menu > li.parent > ul.mm-collapse > li > a { min-height: 38px !important; margin: 0 !important; padding: 8px 10px !important; display: flex !important; align-items: center !important; font-family: var(--amz-font-body) !important; font-size: .88rem !important; font-weight: 500 !important; line-height: 1.3 !important; border-radius: 9px !important; } /* ----------------------------------------------------- CTA ----------------------------------------------------- */ .amz-header__nav .mod-menu > li > a.amz-menu-cta { min-height: 50px !important; margin: 16px 0 4px !important; padding: .85rem 1.25rem !important; font-family: var(--amz-font-body) !important; font-size: .88rem !important; font-weight: 700 !important; border-radius: var(--amz-radius-pill) !important; } /* ----------------------------------------------------- LANGUAGE AREA ----------------------------------------------------- */ .amz-header__utility { padding-top: 0 !important; } } /* --------------------------------------------------------- PHONE-SPECIFIC DENSITY --------------------------------------------------------- */ @media (max-width: 767px) { .amz-header__panel { padding: 14px 20px 28px !important; } .amz-header__nav .mod-menu > li > a:not(.amz-menu-cta), .amz-header__nav .mod-menu > li > span { min-height: 50px !important; font-size: .98rem !important; } .amz-header__nav .mod-menu > li.parent > button.mm-toggler { width: 42px !important; height: 50px !important; } } /* ========================================================= AMAZILIA — MOBILE / TABLET NAVIGATION v10 Restore approved centered, full-width composition. Goals: - Navigation centered in the panel, not pushed to the right. - Each top-level row uses the full available width. - Labels remain visually centered. - Parent chevrons stay at the far right without shifting labels. - CTA centered. - Submenus open full width beneath the parent. - Desktop dropdown spacing from v9 remains unchanged. ========================================================= */ @media (max-width: 991px) { /* ----------------------------------------------------- OUTER PANEL ----------------------------------------------------- */ .amz-header__panel { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 26px clamp(24px, 5vw, 52px) 44px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 18px !important; } /* ----------------------------------------------------- NAV WRAPPERS Explicitly remove desktop right-alignment constraints. ----------------------------------------------------- */ .amz-header__nav { width: 100% !important; max-width: none !important; margin: 0 !important; margin-left: 0 !important; flex: 0 0 auto !important; display: block !important; align-self: stretch !important; justify-content: initial !important; } .amz-header__nav .navbar, .amz-header__nav .navbar-collapse, .amz-header__nav .navbar-collapse.collapse, .amz-header__nav .navbar-collapse.show { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: block !important; } /* ----------------------------------------------------- MAIN MENU Full-width but with a comfortable tablet maximum, centered inside the full-screen panel. ----------------------------------------------------- */ .amz-header__nav .mod-menu, .amz-header__nav ul.mod-menu_dropdown-metismenu { width: min(100%, 760px) !important; max-width: 760px !important; margin: 0 auto !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; } /* ----------------------------------------------------- TOP-LEVEL ROWS ----------------------------------------------------- */ .amz-header__nav .mod-menu > li { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; border-bottom: 1px solid var(--amz-gray-100) !important; } /* * Three-column parent row: * blank / centered label / chevron * * The label spans all columns so it remains optically centered. * The chevron sits over the right column. */ .amz-header__nav .mod-menu > li.parent { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) 48px !important; grid-template-rows: auto auto !important; align-items: center !important; column-gap: 0 !important; } /* ----------------------------------------------------- TOP-LEVEL LABELS — CENTERED ----------------------------------------------------- */ .amz-header__nav .mod-menu > li > a:not(.amz-menu-cta), .amz-header__nav .mod-menu > li > span { width: 100% !important; max-width: none !important; min-height: 56px !important; margin: 0 !important; padding: 8px 52px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: var(--amz-font-body) !important; font-size: 1.02rem !important; font-weight: 600 !important; line-height: 1.2 !important; text-align: center !important; color: var(--amz-gray-900) !important; border: 0 !important; box-shadow: none !important; background: transparent !important; } /* Parent labels span the whole row so chevron never offsets text. */ .amz-header__nav .mod-menu > li.parent > a:not(.amz-menu-cta), .amz-header__nav .mod-menu > li.parent > span { grid-column: 1 / -1 !important; grid-row: 1 !important; position: relative !important; z-index: 1 !important; } /* Active state */ .amz-header__nav .mod-menu > li.active > a:not(.amz-menu-cta), .amz-header__nav .mod-menu > li.current > a:not(.amz-menu-cta), .amz-header__nav .mod-menu > li > a[aria-current="page"]:not(.amz-menu-cta) { color: var(--amz-green-dark) !important; } .amz-header__nav .mod-menu > li > a::after, .amz-header__nav .mod-menu > li.active > a::after, .amz-header__nav .mod-menu > li.current > a::after { display: none !important; } /* ----------------------------------------------------- PARENT CHEVRON ----------------------------------------------------- */ .amz-header__nav .mod-menu > li.parent > button.mm-toggler { grid-column: 3 !important; grid-row: 1 !important; position: relative !important; z-index: 3 !important; width: 48px !important; height: 56px !important; margin: 0 !important; padding: 0 !important; align-self: center !important; justify-self: stretch !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* ----------------------------------------------------- SUBMENUS ----------------------------------------------------- */ .amz-header__nav .mod-menu > li.parent > ul.mm-collapse { grid-column: 1 / -1 !important; grid-row: 2 !important; position: static !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 4px 14px 14px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; } .amz-header__nav .mod-menu > li.parent > ul.mm-collapse:not(.mm-show) { display: none !important; } .amz-header__nav .mod-menu > li.parent > ul.mm-collapse.mm-show { display: block !important; height: auto !important; overflow: visible !important; } .amz-header__nav .mod-menu > li.parent > ul.mm-collapse > li { width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } .amz-header__nav .mod-menu > li.parent > ul.mm-collapse > li + li { margin-top: 4px !important; } .amz-header__nav .mod-menu > li.parent > ul.mm-collapse > li > a { width: 100% !important; min-height: 40px !important; margin: 0 !important; padding: 8px 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: var(--amz-font-body) !important; font-size: .88rem !important; font-weight: 500 !important; line-height: 1.3 !important; text-align: center !important; border-radius: 9px !important; } /* ----------------------------------------------------- CTA ----------------------------------------------------- */ .amz-header__nav .mod-menu > li > a.amz-menu-cta { width: min(100%, 360px) !important; min-height: 50px !important; margin: 18px auto 6px !important; padding: .85rem 1.35rem !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: var(--amz-font-body) !important; font-size: .88rem !important; font-weight: 700 !important; text-align: center !important; border-radius: var(--amz-radius-pill) !important; } /* ----------------------------------------------------- LANGUAGE AREA ----------------------------------------------------- */ .amz-header__utility { width: 100% !important; max-width: 760px !important; margin: 0 auto !important; padding-top: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .amz-header__utility .mod-languages { width: 100% !important; display: flex !important; justify-content: center !important; } .amz-header__utility .mod-languages ul, .amz-header__utility .mod-languages ul.lang-inline { width: auto !important; margin: 0 auto !important; justify-content: center !important; } } /* --------------------------------------------------------- PHONE DENSITY --------------------------------------------------------- */ @media (max-width: 767px) { .amz-header__panel { padding: 18px 20px 30px !important; } .amz-header__nav .mod-menu, .amz-header__nav ul.mod-menu_dropdown-metismenu { width: 100% !important; max-width: none !important; } .amz-header__nav .mod-menu > li > a:not(.amz-menu-cta), .amz-header__nav .mod-menu > li > span { min-height: 54px !important; padding: 8px 48px !important; font-size: 1rem !important; } .amz-header__nav .mod-menu > li.parent { grid-template-columns: 44px minmax(0, 1fr) 44px !important; } .amz-header__nav .mod-menu > li.parent > button.mm-toggler { width: 44px !important; height: 54px !important; } }