/* * Infinity Rise — main layout & components (compact design). * Builds on design-system.css tokens. */ /* Base reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* Scroll-reveal entrance animations (added by JS via .lp-reveal-on on ). Elements fade + slide up smoothly into their normal position, with a stagger applied inline by JS. Gated by .lp-reveal-on so content stays visible if JS doesn't run, and skipped when the user prefers reduced motion. */ @media (prefers-reduced-motion: no-preference) { .lp-reveal-on .lp-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); } /* Static visible end-state — content resolves visible even if the transition is throttled. */ .lp-reveal-on .lp-reveal.lp-reveal--in { opacity: 1; transform: none; } } body { margin: 0; background: var(--color-bg-2); -webkit-font-smoothing: antialiased; overflow-x: clip; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-secondary); } ul, ol { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; } p { margin: 0 0 1em; } /* Full-width: content spans the viewport; side gutters come from each area's spacing (--hdr/--bnr/--sec/--sec2/--ftr left & right) per breakpoint. */ .container { width: 100%; } /* a11y */ .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-primary); color: #fff; padding: 8px 16px; z-index: 1000; } .skip-link:focus { left: 8px; } /* ---------- HEADER (full-width green bar) ---------- */ .site-header { background: var(--color-primary); position: sticky; top: 0; z-index: 100; } .site-header__inner { display: flex; align-items: center; gap: 24px; padding: var(--hdr-pt) var(--hdr-pr) var(--hdr-pb) var(--hdr-pl); } /* Logo */ .site-branding { flex: 0 0 auto; } .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } .brand img { max-height: 44px; width: auto; display: block; } .brand__mark { flex: 0 0 auto; } .brand__text { color: var(--color-ancient); font-weight: 800; font-size: 24px; letter-spacing: .06em; line-height: 1; } /* Nav (centered) */ .nav-primary { flex: 1 1 auto; display: flex; justify-content: center; } .nav-primary > ul, .nav-primary .menu { display: flex; gap: 34px; list-style: none; align-items: center; margin: 0; padding: 0; } .nav-primary li { position: relative; } .nav-primary a { color: rgba(255,255,255,.92); font-weight: 400; font-size: 18px; display: inline-flex; align-items: center; gap: 7px; } .nav-primary a:hover, .nav-primary .current-menu-item > a { color: var(--color-ancient); } .nav-primary .menu-item-has-children > a::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; top: -1px; transform: rotate(45deg); transition: transform .35s cubic-bezier(.4, 0, .2, 1); } .nav-primary .menu-item-has-children:hover > a::after, .nav-primary .menu-item-has-children:focus-within > a::after { transform: rotate(-135deg); } /* Submenu caret toggle — hidden on desktop; on mobile the parent link navigates and this toggles the dropdown. */ .nav-subtoggle { display: none; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; align-self: stretch; background: none; border: 0; color: #fff; cursor: pointer; padding: 0; } .nav-subtoggle::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; } .nav-primary .menu-item-has-children.is-open > .nav-subtoggle::after { transform: rotate(-135deg); } /* Dropdown */ .nav-primary .sub-menu { position: absolute; top: calc(100% + 12px); left: 0; min-width: 240px; background: var(--color-ancient); border-radius: 0; box-shadow: 0 16px 40px rgba(0,0,0,.25); padding: 0; list-style: none; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .nav-primary .menu-item-has-children > .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } .nav-primary li:hover > .sub-menu, .nav-primary li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-primary .sub-menu li { width: 100%; } .nav-primary .sub-menu a { color: var(--color-primary); padding: 12px 20px; width: 100%; font-weight: 400; } .nav-primary .sub-menu a:hover { color: var(--color-white); background: var(--color-primary); } /* ---------- Categories mega-menu (desktop): left category list + right product grid ---------- */ @media (min-width: 1025px) { /* The Categories item spans static so the mega panel can be full-width under the header. */ .nav-primary .has-megamenu { position: static; } /* Hide the plain dropdown for the mega item — the mega panel replaces it on desktop. */ .nav-primary .has-megamenu > .sub-menu { display: none !important; } .mega { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); width: min(1320px, 94vw); background: var(--color-bg-2, #F6F2EF); box-shadow: 0 26px 60px rgba(0, 0, 0, .28); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility .2s ease; z-index: 120; } /* Hover bridge so the cursor can travel from the link to the panel. Scoped to the Categories LINK (not the li): the li is position:static, so a bridge on it stretches the full header width and opens the mega from anywhere just below the header. On the link it is only as wide as "Categories", and tall enough to reach the panel below the header. Uses ::before so it doesn't clash with the dropdown caret (which is the link's ::after). */ .nav-primary .has-megamenu > a { position: relative; } .nav-primary .has-megamenu > a::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 34px; } .nav-primary .has-megamenu:hover > .mega, .nav-primary .has-megamenu:focus-within > .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } /* Four-column cascade: main categories | sub-categories | products | image. The image column is fixed and hugs the image on one side; the reclaimed width goes to the main / sub / products columns (products flexes to fill). */ .mega__inner { display: grid; grid-template-columns: 340px 300px 1fr 320px; } .mega__col { padding: 28px 26px; min-width: 0; } .mega__col--cats, .mega__col--subs, .mega__col--prods { border-right: 1px solid rgba(26, 26, 26, .14); } .mega__col--subs { padding-top: 57px; } /* align sub list with col-1 list (below the label) */ .mega__col--prods { position: relative; } /* Col 4: active main category's image. */ .mega__col--img { position: relative; min-height: 360px; } /* Scoped under .mega so display:none outranks the global `.nav-primary a { display:inline-flex }` rule (these panels are elements) — otherwise every panel stays visible and stacks. */ .mega .mega__img { display: none; position: absolute; top: 28px; right: 26px; bottom: 28px; left: 26px; background: right center / contain no-repeat; } .mega .mega__img.is-active { display: block; } .mega .mega__label { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: rgba(26, 26, 26, .55); margin: 0 0 14px; } /* Col 1: all main categories — ~5 visible, scroll for the rest. */ .mega__cats { list-style: none; margin: 0; padding: 0; max-height: 264px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(6, 64, 42, .35) transparent; } .mega__cats::-webkit-scrollbar { width: 6px; } .mega__cats::-webkit-scrollbar-thumb { background: rgba(6, 64, 42, .3); border-radius: 3px; } .mega__cat { position: relative; } .mega__cat > a { display: block; padding: 9px 12px 9px 0; font-size: 16px; line-height: 1.3; font-weight: 400; color: var(--color-black, #1a1a1a); } .mega__cat.is-active > a, .mega__cat:hover > a { color: #2E6E5E; font-weight: 600; } /* Col 2: sub-category names of the active main category — ~5 visible, scroll for more. */ .mega__subs { display: none; } .mega__subs.is-active { display: block; max-height: 178px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(6, 64, 42, .35) transparent; } .mega__subs.is-active::-webkit-scrollbar { width: 6px; } .mega__subs.is-active::-webkit-scrollbar-thumb { background: rgba(6, 64, 42, .3); border-radius: 3px; } .mega .mega__txt { min-width: 0; } .mega .mega__sub { display: flex; align-items: center; gap: 9px; padding: 8px 0; font-size: 15px; line-height: 1.3; color: var(--color-black, #1a1a1a); text-decoration: none; } .mega .mega__sub-arrow, .mega .mega__prod-arrow { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--color-secondary, #a97f2d); position: relative; transition: background-color .2s ease, border-color .2s ease; } .mega .mega__sub-arrow::after, .mega .mega__prod-arrow::after { content: ""; position: absolute; left: 5px; top: 5px; width: 4px; height: 4px; border-right: 1.5px solid var(--color-secondary, #a97f2d); border-bottom: 1.5px solid var(--color-secondary, #a97f2d); transform: rotate(-45deg); } .mega .mega__sub.is-active, .mega .mega__sub:hover { color: #2E6E5E; font-weight: 600; } .mega .mega__sub.is-active .mega__sub-arrow, .mega .mega__sub:hover .mega__sub-arrow { background: #2E6E5E; border-color: #2E6E5E; } .mega .mega__prod:hover .mega__prod-arrow { background: var(--color-primary, #06402a); border-color: var(--color-primary, #06402a); } .mega .mega__sub.is-active .mega__sub-arrow::after, .mega .mega__sub:hover .mega__sub-arrow::after, .mega .mega__prod:hover .mega__prod-arrow::after { border-right-color: #fff; border-bottom-color: #fff; } /* Col 3: product names of the active sub-category (two columns). */ .mega .mega__more { position: absolute; top: 28px; right: 26px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--color-primary, #06402a); text-decoration: underline; text-underline-offset: 3px; } .mega .mega__more:hover { color: var(--color-secondary, #a97f2d); } .mega__prods-wrap { margin-top: 30px; max-height: 162px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(6, 64, 42, .35) transparent; } .mega__prods-wrap::-webkit-scrollbar { width: 6px; } .mega__prods-wrap::-webkit-scrollbar-thumb { background: rgba(6, 64, 42, .3); border-radius: 3px; } .mega__prods { display: none; } .mega__prods.is-active { display: block; } /* products stacked one below another */ .mega .mega__prod { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 15px; line-height: 1.3; color: var(--color-black, #1a1a1a); text-decoration: none; } .mega .mega__prod:hover { color: var(--color-primary, #06402a); } .mega__empty { color: rgba(26, 26, 26, .55); font-size: 14px; margin: 0; grid-column: 1 / -1; } } /* 1025–1280: the panel is narrower (94vw), so tighten the columns and padding. */ @media (min-width: 1025px) and (max-width: 1280px) { .mega__inner { grid-template-columns: 300px 260px 1fr 260px; } .mega__col { padding: 24px 20px; } .mega__col--subs { padding-top: 50px; } .mega__cat > a { font-size: 15px; padding: 8px 10px 8px 0; } .mega__cats { max-height: 240px; } .mega .mega__sub, .mega .mega__prod { font-size: 14px; } .mega .mega__more { top: 24px; right: 20px; } .mega__col--img { min-height: 320px; } .mega__img { top: 24px; right: 20px; bottom: 24px; left: 20px; } } /* Mobile / tablet: no mega menu — the simple category list (sub-menu) is used. */ @media (max-width: 1024px) { .mega { display: none !important; } } /* CTA + toggle */ .site-header__cta { flex: 0 0 auto; padding: 12px 26px; border-radius: 0; color: var(--color-primary); } .site-header__cta:hover, .site-header__cta:focus { background-color: transparent; color: var(--color-white); border-color: var(--color-ancient); } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; color: #fff; font-size: 24px; line-height: 1; } .nav-close { display: none; } /* Logo + close row inside the off-canvas menu — shown on mobile only. */ .nav-primary__head { display: none; } /* Wider menu gap only on the 1920 breakpoint. */ @media (min-width: 1537px) { .nav-primary > ul, .nav-primary .menu { gap: 48px; } } /* Menu font size from the 1536 breakpoint down. */ @media (max-width: 1536px) { .nav-primary a { font-size: 16px; } } /* Menu font size from the 1280 breakpoint down. */ @media (max-width: 1280px) { .nav-primary a { font-size: 14px; } } @media (max-width: 1024px) { .site-header__inner { padding: 10px 20px; } .nav-toggle { display: inline-flex; order: 3; margin-left: auto; } /* When the menu is open the panel has its own close (×); hide the header toggle so the × doesn't appear twice. */ .nav-primary.is-open ~ .nav-toggle { display: none; } .site-header__cta { display: none; } .nav-primary { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; background: var(--color-primary); padding: 18px 24px 32px; display: block; flex: none; transform: translateX(100%); transition: transform .3s ease; overflow-y: auto; z-index: 90; box-shadow: -10px 0 30px rgba(0,0,0,.3); } .nav-primary.is-open { transform: translateX(0); } /* Freeze the page behind the open menu so it can't scroll (no stray scrollbar). */ html.nav-lock, html.nav-lock body { overflow: hidden; } /* Menu header: logo on the left, close button on the right. */ .nav-primary__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.14); } .nav-primary__logo { display: inline-flex; align-items: center; min-width: 0; } .nav-primary__logo .brand { display: inline-flex; align-items: center; gap: 8px; padding: 0; } .nav-primary__logo .brand img { max-height: 34px; width: auto; } .nav-primary__logo .brand__text { font-size: 18px; } .nav-close { display: flex; align-items: center; justify-content: center; position: static; flex: 0 0 auto; width: 36px; height: 36px; margin: 0; background: none; border: 0; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; } .nav-primary > ul, .nav-primary .menu { flex-direction: column; gap: 6px; align-items: stretch; } .nav-primary a { padding: 11px 0; display: flex; } /* Parent row: link navigates (flex-grows), caret button toggles the submenu. */ .nav-primary .menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; } .nav-primary .menu-item-has-children > a { flex: 1 1 auto; } .nav-primary .menu-item-has-children > a::after { display: none; } .nav-subtoggle { display: inline-flex; } .nav-primary .menu-item-has-children > .sub-menu { flex-basis: 100%; width: 100%; } .nav-primary .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: rgba(255,255,255,.06); border-radius: 6px; padding: 4px 0; margin: 2px 0 8px 14px; display: none; } /* Categories (and any long submenu) scroll within a fixed area instead of pushing the rest of the menu down. ~5–6 items visible, then scrolls. */ .nav-primary .menu-item-has-children.is-open > .sub-menu { display: block; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.4) transparent; } .nav-primary .menu-item-has-children.is-open > .sub-menu::-webkit-scrollbar { width: 5px; } .nav-primary .menu-item-has-children.is-open > .sub-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: 3px; } .nav-primary .sub-menu a { color: rgba(255,255,255,.85); padding: 9px 16px; } .nav-primary .sub-menu a:hover { background: transparent; color: var(--color-ancient); } /* Mobile: "Categories" is a plain link — hide the product sub-category list and its expand caret (the categories live on the Categories page). */ .nav-primary .has-megamenu > .sub-menu { display: none !important; } .nav-primary .has-megamenu > .nav-subtoggle { display: none !important; } } @media (max-width: 425px) { .brand__text { font-size: 19px; letter-spacing: .04em; } .brand img { max-height: 36px; } } /* ---------- FOOTER ---------- */ .site-footer { background: var(--color-primary); color: rgba(255,255,255,.85); } .site-footer a { color: rgba(255,255,255,.85); } .site-footer a:hover { color: var(--color-ancient); } .site-footer__top { display: grid; grid-template-columns: 2.3fr 1fr; gap: 56px; padding: var(--ftr-pt) var(--ftr-pr) var(--ftr-pb) var(--ftr-pl); align-items: stretch; } /* 1025–1280 footer overrides live after the max-width:1280 rules below so they win the cascade. */ /* Left block */ .site-footer__brand .brand { gap: 14px; } .site-footer__brand .brand__mark { width: 48px; height: 48px; } .site-footer__brand .brand__text { color: var(--color-ancient); font-size: 40px; letter-spacing: .04em; } .site-footer__brand img { height: 110px; width: auto; max-height: none; } @media (max-width: 1280px) { .site-footer__brand img { height: 92px; } } @media (max-width: 1024px) { .site-footer__brand img { height: 80px; } } @media (max-width: 425px) { .site-footer__brand img { height: 64px; } } .site-footer__about { margin: 22px 0 0; max-width: 940px; line-height: 1.7; } @media (min-width: 1441px) and (max-width: 1536px) { .site-footer__about { max-width: 700px; } } .site-footer__divider { border: 0; border-top: 1px solid rgba(226,197,141,.35); margin: 28px 0 34px; } .site-footer__cols { display: grid; grid-template-columns: auto auto auto; justify-content: space-between; gap: 40px; } .site-footer__title { color: var(--color-ancient); font-size: 24px; font-weight: 600; margin: 0 0 28px; } .site-footer__col ul, .site-footer__col .footer-menu { list-style: none; display: flex; flex-direction: column; gap: 20px; } /* Categories has its own footer column, so drop it from the Quick Links list (all sizes). */ .footer-menu li:has(> a[href*="/categories"]) { display: none; } .site-footer__col a { white-space: nowrap; } .site-footer a.site-footer__more { color: var(--color-ancient); text-decoration: underline; } /* Subscribe */ .site-footer__form { display: flex; align-items: stretch; max-width: 430px; background: #fff; padding: 6px; } .site-footer__form input { flex: 1; min-width: 0; border: 0; padding: 12px 14px; color: var(--color-black); font-size: 15px; } .site-footer__form input:focus, .site-footer__form input:focus-visible { outline: none; box-shadow: none; } .site-footer__form input::placeholder { color: #8a8a8a; } .site-footer__form .btn { border-radius: 0; padding: 12px 26px; background-color: #A97F2D; border-color: #A97F2D; color: #fff; font-family: Arial, sans-serif; font-size: 16px; font-weight: 400; } .site-footer__form .btn[disabled] { opacity: .6; cursor: default; } /* Honeypot: off-screen so it never affects the flex layout or is seen by humans. */ .site-footer__hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; padding: 0 !important; opacity: 0 !important; } /* Inline subscribe feedback. */ .site-footer__form-status { margin: 10px 0 0; font-size: 14px; line-height: 1.4; min-height: 1.2em; } .site-footer__form-status.is-ok { color: var(--color-ancient, #e2c58d); } .site-footer__form-status.is-error { color: #ffb4a2; } /* Right gold contact card */ .site-footer__contact { position: relative; display: flex; flex-direction: column; background: var(--color-ancient); color: var(--color-primary); padding: 44px; border-radius: 0; overflow: hidden; } @media (min-width: 1441px) and (max-width: 1536px) { .site-footer__contact { padding: 24px; } } @media (min-width: 1025px) and (max-width: 1280px) { .site-footer__contact { padding: 24px; } } .site-footer__contact::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 72%; background: url('../images/footer-card-graphic.png') right center / cover no-repeat; pointer-events: none; } .site-footer__contact > * { position: relative; z-index: 1; } .site-footer__contact-title { color: var(--color-primary); font-size: 24px; font-weight: 600; margin: 0 0 36px; } .site-footer__contact-item { margin-bottom: 36px; } .site-footer__contact-item .label { display: block; color: var(--color-primary); font-weight: 500; font-size: 20px; margin-bottom: 6px; } .site-footer__contact-item .value { display: block; color: #2c2c2c; } .site-footer__contact .site-footer__social { display: flex; align-items: center; gap: 0; margin-top: auto; padding-top: 30px; } .site-footer__contact .site-footer__social a { color: var(--color-primary); display: inline-flex; align-items: center; padding: 0 18px; } .site-footer__contact .site-footer__social a:first-child { padding-left: 0; } .site-footer__contact .site-footer__social a + a { border-left: 1px solid rgba(6,64,42,.35); } .site-footer__contact .site-footer__social img { width: 22px; height: 22px; filter: brightness(0) saturate(100%) invert(13%) sepia(38%) saturate(1200%) hue-rotate(102deg) brightness(95%) contrast(98%); } /* Bottom bar */ .site-footer__bar { border-top: 0; } .site-footer__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px var(--ftr-pr) 22px var(--ftr-pl); font-size: 14px; flex-wrap: wrap; } .site-footer__bar p { margin: 0; } @media (max-width: 1536px) { .site-footer__title, .site-footer__contact-title { font-size: 17px; } .site-footer__contact-item .label { font-size: 15px; } } @media (min-width: 1441px) and (max-width: 1536px) { .site-footer__top { display: grid; grid-template-columns: 2.3fr 1fr; gap: 56px; padding: 40px 90px; align-items: stretch; } .site-footer__col ul, .site-footer__col .footer-menu { list-style: none; display: flex; flex-direction: column; gap: 17px; } aside.site-footer__contact.lp-reveal.lp-reveal--in { margin-top: 65px !important; } .site-footer__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 5px var(--ftr-pr) 22px var(--ftr-pl); font-size: 14px; flex-wrap: wrap; } .site-footer__about { margin: 14px 0 0; max-width: 700px; line-height: 1.7; } } @media (max-width: 1280px) { .site-footer__title, .site-footer__contact-title { font-size: 15px; } .site-footer__contact .site-footer__social img { width: 18px; height: 18px; } } /* Footer overrides for the 1280px band (placed last so they win over the rules above). */ @media (min-width: 1025px) and (max-width: 1280px) { .site-footer__top { display: grid; grid-template-columns: 2.3fr 1fr; gap: 56px; padding: 30px 70px 0px 70px; align-items: stretch; } .site-footer__about { margin: 12px 0 0; max-width: 940px; line-height: 1.7; } .site-footer__title { color: var(--color-ancient); font-size: 14px; font-weight: 600; margin: 0 0 20px; } .site-footer__brand img { height: 80px; } .site-footer__col ul, .site-footer__col .footer-menu { list-style: none; display: flex; flex-direction: column; gap: 12px; } .site-footer__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--ftr-pr) 22px var(--ftr-pl); font-size: 14px; flex-wrap: wrap; } .site-footer__divider { border: 0; border-top: 1px solid rgba(226,197,141,.35); margin: 14px 0 14px; } aside.site-footer__contact.lp-reveal.lp-reveal--in { margin-top: 65px; } } @media (max-width: 900px) { .site-footer__cols { grid-template-columns: auto 1fr; gap: 28px 40px; } .site-footer__subscribe { grid-column: 1 / -1; } .site-footer__cols .site-footer__col a { white-space: normal; } } @media (max-width: 1024px) { .site-footer__top { grid-template-columns: 1fr; gap: 36px; padding: 50px 20px 20px 20px; } .site-footer__contact { max-width: 480px; } .site-footer__col ul, .site-footer__col .footer-menu { gap: 16px; } .site-footer__contact-item { margin-bottom: 26px; } .site-footer__contact-title { margin: 0 0 28px; } } @media (max-width: 600px) { .site-footer__cols { grid-template-columns: auto 1fr; gap: 28px 78px; } /* keep Quick Links + Categories side by side on mobile, with a clear gap between the two columns */ .site-footer__brand .brand__text { font-size: 30px; } .site-footer__form { max-width: 100%; } .site-footer__contact { padding: 28px; } /* Bring Phone up beside Location (right column) so the contact card is less tall. */ .site-footer__contact { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-content: start; } .site-footer__contact-title, .site-footer__contact-item:nth-child(2), /* Email */ .site-footer__social { grid-column: 1 / -1; } .site-footer__bar-inner { justify-content: center; text-align: center; } } /* ---------- Shared CTA band (site-wide) ---------- */ .lp-cta { position: relative; background: transparent; padding: 50px 40px 200px; } section.lp-cta { padding-top: 0px; } .lp-cta__inner { position: relative; max-width: 1720px; margin: 0 auto; background: var(--color-primary) center / cover no-repeat; min-height: 540px; display: flex; align-items: center; padding: 60px 100px; } .lp-cta__card { background: #fff; color: var(--color-black); max-width: 700px; border-radius: 0; padding: 56px; text-align: left; } .lp-cta__title { color: var(--color-black); font-size: 42px; font-weight: 400; line-height: 1.3; margin: 0; } .lp-cta__lead { color: var(--color-primary); font-size: 42px; font-weight: 500; line-height: 1.3; margin: 0 0 32px; } .lp-cta__actions { display: flex; gap: 16px; justify-content: flex-start; flex-wrap: wrap; } .lp-cta__actions .btn { border-radius: 0; color: var(--color-primary); font-size: 20px; font-weight: 400; } /* CTA primary button: green by default, gold on hover. */ .lp-cta__actions a.btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; } .lp-cta__actions a.btn-primary:hover, .lp-cta__actions a.btn-primary:focus { background-color: var(--color-ancient); border-color: var(--color-ancient); color: var(--color-primary); } .lp-cta__actions .btn-outline:hover { background-color: var(--color-ancient); border-color: var(--color-ancient); color: var(--color-primary); } /* Focus (e.g. when a modal it opened closes and returns focus here): keep the normal look — the global .btn-outline:focus would make it green-on-green. */ .lp-cta__actions .btn-outline:focus { background-color: var(--color-white); border-color: var(--color-ancient); color: var(--color-primary); } .lp-cta__actions .btn-outline:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } @media (max-width: 1536px) { .lp-cta { padding-bottom: 120px; } .lp-cta__title, .lp-cta__lead { font-size: 32px; } .lp-cta__inner { padding: 52px 72px; } } @media (max-width: 1280px) { .lp-cta { padding-bottom: 100px; } .lp-cta__title, .lp-cta__lead { font-size: 28px; } .lp-cta__inner { padding: 44px 56px; min-height: 460px; } .lp-cta__card { max-width: 634px; padding: 40px; } } /* 1280 band: CTA action buttons (all pages) — 16px, square, primary colour. */ @media (min-width: 1025px) and (max-width: 1280px) { .lp-cta__actions .btn { border-radius: 0; color: var(--color-primary); font-size: 16px; font-weight: 400; } } @media (max-width: 1024px) { .lp-cta { padding: 40px 20px 120px; } .lp-cta__title, .lp-cta__lead { font-size: 26px; } .lp-cta__inner { padding: 40px; min-height: 380px; } .lp-cta__card { max-width: 100%; padding: 36px; } } @media (max-width: 425px) { .lp-cta { padding: 24px 16px 50px; } .lp-cta__title, .lp-cta__lead { font-size: 22px; } .lp-cta__inner { padding: 24px; min-height: 320px; } .lp-cta__card { padding: 24px; } .lp-cta__actions .btn { border-radius: 0; color: var(--color-primary); font-size: 14px; font-weight: 400; } } /* ---------- Video modal ---------- */ .lp-video-modal { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px; } .lp-video-modal[hidden] { display: none; } .lp-video-modal__frame { width: min(960px, 100%); } .lp-video-modal__frame video { width: 100%; border-radius: 8px; } .lp-video-modal__close { position: absolute; top: 20px; right: 28px; background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; } /* ---------- 404 page ---------- */ .err404 { text-align: center; } .err404__inner { display: flex; flex-direction: column; align-items: center; } .err404__code { font-weight: 600; line-height: 1; letter-spacing: 4px; font-size: 220px; color: var(--color-primary); } .err404__code .err404__zero { color: var(--color-secondary); } .err404__title { font-size: var(--fs-h2); font-weight: 500; color: var(--color-black); margin: 24px 0 40px; } .err404__btn { display: inline-block; background: var(--color-ancient); color: var(--color-black); font-size: var(--fs-p); font-weight: 500; padding: 16px 30px; border-radius: 2px; text-decoration: none; transition: background-color .2s ease, color .2s ease; } .err404__btn:hover, .err404__btn:focus { background: var(--color-secondary); color: var(--color-white); } @media (max-width: 1536px) { .err404__code { font-size: 180px; } } @media (max-width: 1280px) { .err404__code { font-size: 150px; } } @media (max-width: 1024px) { .err404__code { font-size: 120px; } .err404__title { margin: 20px 0 32px; } } @media (max-width: 425px) { .err404__code { font-size: 84px; letter-spacing: 2px; } .err404__btn { padding: 12px 22px; } } /* ---------- Cookie consent banner ---------- */ .cookie-consent { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); z-index: 1200; width: min(560px, calc(100% - 32px)); background: var(--color-bg-1); box-shadow: 0 12px 44px rgba(0,0,0,.18); padding: 28px 34px; text-align: center; opacity: 0; transition: opacity .25s ease, transform .25s ease; } .cookie-consent.is-visible { opacity: 1; transform: translate(-50%, 0); } .cookie-consent[hidden] { display: none; } .cookie-consent__text { font-size: var(--fs-p); line-height: 1.6; color: var(--color-black); margin: 0 0 22px; } .cookie-consent__actions { display: flex; gap: 20px; align-items: center; justify-content: center; } .cookie-consent__accept { background: var(--color-primary); color: var(--color-white); border: 0; padding: 12px 28px; font: inherit; font-weight: 500; cursor: pointer; transition: background-color .2s ease; } .cookie-consent__accept:hover, .cookie-consent__accept:focus { background: var(--color-secondary); } .cookie-consent__reject { background: none; border: 0; padding: 8px; color: var(--color-primary); font: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .cookie-consent__reject:hover, .cookie-consent__reject:focus { color: var(--color-secondary); } /* 1920 screens — widen the card so the copy fits on 2 lines, not 3. */ @media (min-width: 1900px) { .cookie-consent { width: min(730px, calc(100% - 32px)); padding: 32px 44px; } } @media (max-width: 1280px) { .cookie-consent { width: min(520px, calc(100% - 32px)); padding: 26px 30px; } } @media (max-width: 1024px) { .cookie-consent { padding: 24px 28px; } } @media (max-width: 600px) { .cookie-consent { width: calc(100% - 24px); padding: 22px 20px; bottom: 14px; } .cookie-consent__text { margin-bottom: 18px; } } @media (max-width: 393px) { .cookie-consent { padding: 20px 16px; bottom: 10px; } } /* Mobile: non-home page banners take a taller box where the image covers it (same treatment as the About banner — background image fills, no letterbox bands, title lower-left). The home hero (.lp-hero) is intentionally excluded. */ @media (max-width: 768px) { .ind-banner, .sus-banner, .con-banner, .blog-banner, .irp-cat-banner, .irc-banner { align-items: center; min-height: 0 !important; aspect-ratio: 1920 / 960; padding: 16px 24px !important; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; } } /* ---------- Back-to-top button (site-wide, appears after scrolling) ---------- */ .ir-totop { position: fixed; right: 28px; bottom: 44px; z-index: 1200; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--color-secondary, #a97f2d); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background-color .2s ease; } .ir-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .ir-totop:hover, .ir-totop:focus-visible { background: var(--color-primary, #06402a); outline: none; } .ir-totop:focus-visible { box-shadow: 0 0 0 3px rgba(226, 197, 141, .5), 0 8px 24px rgba(0, 0, 0, .22); } .ir-totop svg { display: block; } .ir-totop.is-visible:hover, .ir-totop.is-visible:focus-visible { transform: translateY(0) scale(1.1); } @media (prefers-reduced-motion: no-preference) { .ir-totop:hover svg, .ir-totop:focus-visible svg { animation: ir-totop-hop .55s ease; } @keyframes ir-totop-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } } } /* Responsive: smaller + closer to the edge on tablet / phone. */ @media (max-width: 1024px) { .ir-totop { right: 22px; bottom: 40px; width: 50px; height: 50px; } } @media (max-width: 600px) { .ir-totop { right: 14px; bottom: 36px; width: 44px; height: 44px; } .ir-totop svg { width: 20px; height: 20px; } } /* Floating WhatsApp button — sits directly above the back-to-top button. */ .ir-whatsapp { position: fixed; right: 28px; bottom: 98px; /* above .ir-totop (bottom 44 + height 40 + gap 14) */ z-index: 1200; width: 40px; height: 40px; border-radius: 50%; background: #25d366; color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .2s ease; text-decoration: none; } .ir-whatsapp:hover, .ir-whatsapp:focus-visible { background: #1eb655; transform: scale(1.12); outline: none; } .ir-whatsapp:focus-visible { box-shadow: 0 0 0 3px rgba(37, 211, 102, .4), 0 8px 24px rgba(0, 0, 0, .22); } .ir-whatsapp svg { display: block; width: 24px; height: 24px; } /* Gentle attention pulse (idle) + a playful icon wiggle on hover. */ @media (prefers-reduced-motion: no-preference) { .ir-whatsapp { animation: ir-wa-pulse 2.4s ease-out infinite; } .ir-whatsapp:hover, .ir-whatsapp:focus-visible { animation: none; } .ir-whatsapp:hover svg, .ir-whatsapp:focus-visible svg { animation: ir-wa-wiggle .55s ease; } @keyframes ir-wa-pulse { 0% { box-shadow: 0 8px 24px rgba(0, 0, 0, .22), 0 0 0 0 rgba(37, 211, 102, .5); } 70% { box-shadow: 0 8px 24px rgba(0, 0, 0, .22), 0 0 0 14px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, .22), 0 0 0 0 rgba(37, 211, 102, 0); } } @keyframes ir-wa-wiggle { 0%, 100% { transform: rotate(0); } 22% { transform: rotate(-14deg); } 58% { transform: rotate(10deg); } 82% { transform: rotate(-4deg); } } } @media (max-width: 1024px) { .ir-whatsapp { right: 22px; bottom: 104px; width: 50px; height: 50px; } .ir-whatsapp svg { width: 28px; height: 28px; } } @media (max-width: 600px) { .ir-whatsapp { right: 14px; bottom: 94px; width: 44px; height: 44px; } .ir-whatsapp svg { width: 24px; height: 24px; } } /* ---------- Feature-icon hover (site-wide): gentle zoom when the cursor is over an icon ---------- */ /* Covers BEM icon elements (…__icon) and the bare SVG icons that sit directly inside feature "item" blocks (…__item > img) across every page. */ [class*="__icon"], [class*="__item"] > img { transition: transform .28s ease; transform-origin: center; } [class*="__icon"]:hover, [class*="__item"] > img:hover { transform: scale(1.14); } /* iPhone only (iOS + phone width): a slightly bigger hamburger + close button. Scoped via the iOS-only -webkit-touch-callout feature test so it never affects Android or desktop. */ @supports (-webkit-touch-callout: none) { @media (max-width: 480px) { .nav-toggle { font-size: 30px; } .nav-close { width: 42px; height: 42px; font-size: 40px; } } }