/* ============================================================================ AWPS — decorative flourishes only. Everything in this file is a detail Elementor has no control for: a pseudo-element rule, a gradient accent bar, a pill shape. Layout, spacing, colour and typography are NOT set here — they live in the Elementor Global Kit and the widgets' own Style tabs so the client can change them. Colours reference Elementor's global colour variables rather than hard-coded hex, so when the client edits a brand colour in Site Settings, these details follow. ============================================================================ */ /* These aliases MUST be declared on `body`, not `:root`. Elementor emits its global colours onto the kit class (`.elementor-kit-N`), which sits on . Declaring the aliases on :root would put them *above* the kit in the tree, so `var(--e-global-color-*)` would always resolve to the fallback and the client's Site Settings changes would never reach these rules. */ body { --awps-green: var(--e-global-color-awps_green, #3FA535); --awps-lime: var(--e-global-color-awps_lime, #A9CE3B); --awps-deep: var(--e-global-color-awps_deep, #14463C); --awps-mint: var(--e-global-color-awps_mint, #EDF7EE); --awps-mint2: #E2F1E4; --awps-ink: var(--e-global-color-awps_ink, #1E2B27); --awps-radius: 18px; --awps-shadow: 0 10px 40px rgba(20, 70, 60, .12); } /* ------------------------------------------------------- overflow guard -- The inline icon-lists (top bar contact details, itinerary chips, the sticky trip nav) are the one place long unbroken strings — an email address, a phone number — can push past the viewport on narrow screens. */ .elementor-icon-list-items.elementor-inline-items { flex-wrap: wrap; } .elementor-icon-list-text { overflow-wrap: anywhere; } html, body { overflow-x: hidden; max-width: 100%; } /* ---------------------------------------------------------------- eyebrow -- The script-font kicker with a lime rule beside it. The rule is a pseudo-element, which is why this cannot be done with Elementor's heading controls alone. */ /* The widget box takes the same 1.75 as its title, so the eyebrow occupies the 49px the source's inline-flex does rather than a 44px line box. */ .elementor-element.awps-eyebrow { line-height: 1.75; } .elementor-element.awps-eyebrow .elementor-heading-title { font-family: "Dancing Script", cursive; font-size: 28px; font-weight: 600; color: var(--awps-green); display: inline-flex; align-items: center; gap: 12px; /* The source gives `.eyebrow` no line-height of its own, so it inherits the body's 1.75 — 49px on the 28px script face. Elementor's heading default of 1.2 crops the ascenders and takes 15px out of the block, which shows up as every eyebrow sitting too close to the title beneath it. */ line-height: 1.75; margin-bottom: 8px; } .elementor-element.awps-eyebrow .elementor-heading-title::before, .elementor-element.awps-eyebrow--center .elementor-heading-title::after { content: ""; width: 42px; height: 2px; background: var(--awps-lime); border-radius: 2px; flex: 0 0 42px; } .awps-eyebrow--center { text-align: center; } /* -------------------------------------------------------------- day cards -- Itinerary cards: white panel with a green spine down the left edge. */ .awps-day-card { background: #fff; border: 1px solid var(--awps-mint2); border-radius: var(--awps-radius); box-shadow: var(--awps-shadow); padding: 32px 36px; position: relative; overflow: hidden; } .awps-day-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--awps-green); } .elementor-element.awps-day-tag .elementor-heading-title { display: inline-block; background: var(--awps-mint); color: var(--awps-green); font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 6px 14px; border-radius: 20px; } @media (max-width: 767px) { .awps-day-card { padding: 26px 22px 26px 26px; } } /* ------------------------------------------------------------------ chips -- The little rounded pills under each itinerary day and the wildlife tag row. Both are inline icon-lists; only the pill shape is CSS. */ .elementor-element.awps-chips .elementor-icon-list-item, .elementor-element.awps-tags .elementor-icon-list-item { background: var(--awps-mint); color: var(--awps-deep); border-radius: 30px; padding: 8px 15px; font-size: 13px; font-weight: 700; } .awps-chips .elementor-icon-list-icon { color: var(--awps-green); } /* `.tags span { padding: 9px 16px }` — a touch roomier than the day chips. The `.elementor-element` step is not decoration: without it this is (0,2,0) and loses to the shared chip rule above at (0,3,0), so the tags kept the chips' 8px/15px. */ .elementor-element.awps-tags .elementor-icon-list-item { padding: 9px 16px; } .awps-tags .elementor-icon-list-icon { display: none; } /* `.tags { display: flex; flex-wrap: wrap; gap: 10px }`. Elementor's inline icon-list spaces its items with margins rather than a gap, so the row is rebuilt here. The trekking wildlife row is centred in the source via an inline style on the element. */ .awps-tags .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .awps-tags .elementor-icon-list-items .elementor-icon-list-item { margin: 0; } /* ------------------------------------------------------------- stat band -- Four hairline-separated cells. The 1px gap over a tinted background is what creates the dividers, which Elementor's gap control cannot reproduce alone. */ .awps-stat-band { background: var(--awps-mint2); border: 1px solid var(--awps-mint2); border-radius: var(--awps-radius); overflow: hidden; box-shadow: var(--awps-shadow); gap: 1px !important; margin-top: 38px; } .awps-stat-band > .e-con, .awps-stat-band > .elementor-element { background: #fff; padding: 24px 16px; } @media (max-width: 767px) { .awps-stat-band { flex-wrap: wrap; } .awps-stat-band > .e-con { width: 50% !important; } } /* ------------------------------------------------------------ quote panel -- The dark "Get Your Tailored Quote" box. */ .awps-quote-panel { max-width: 900px; margin: 44px auto 0; background: var(--awps-deep); border-radius: var(--awps-radius); box-shadow: var(--awps-shadow); text-align: center; } .awps-quote-panel .elementor-heading-title { color: #fff; } .awps-quote-panel .elementor-widget-text-editor { color: #b9cfc2; } /* ------------------------------------------------------------------ facts -- "At a glance" cards on destination pages. */ .awps-fact > .e-con-inner, .awps-fact { background: #fff; border: 1px solid var(--awps-mint2); border-radius: var(--awps-radius); padding: 24px 22px; box-shadow: var(--awps-shadow); height: 100%; } /* ------------------------------------------------------- check / x lists -- The circular tick and cross badges in the includes / excludes columns. */ /* `.checks { display: grid; gap: 12px }` — Elementor's icon-list stacks its rows flush, so the 12px between them has to be restored or every checklist comes out 12px per row short and drags the column it sits in with it. */ .elementor-element.awps-list-check .elementor-icon-list-items, .elementor-element.awps-list-x .elementor-icon-list-items { display: grid; gap: 12px; } .elementor-element.awps-list-check .elementor-icon-list-item, .elementor-element.awps-list-x .elementor-icon-list-item { margin: 0; } .elementor-element.awps-list-check .elementor-icon-list-icon, .elementor-element.awps-list-x .elementor-icon-list-icon { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; } .elementor-element.awps-list-check .elementor-icon-list-icon { background: var(--awps-mint); color: var(--awps-green); } .elementor-element.awps-list-x .elementor-icon-list-icon { background: #fbe6e6; color: #c0392b; } /* ------------------------------------------------------------------ button -- `.btn` in css/style.css: a 40px gradient pill, Manrope 700 15px, 15px 32px padding. Elementor's default button is squarer, flatter and ~13px shorter, which is why every in-prose call to action sat wrong and made its column short. Deliberately low specificity (0,2,0) and deliberately early in the load order: the CTA band, route cards, WhatsApp pill and enquiry submit all define their own variants later in home.css / contact.css / trekking.css and must keep winning. */ .elementor-widget-button .elementor-button { background-image: linear-gradient(135deg, var(--awps-green, #3FA535) 0%, var(--awps-lime, #A9CE3B) 100%); background-color: var(--awps-green, #3FA535); color: #fff; border: 0; border-radius: 40px; padding: 15px 32px; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 15px; line-height: 1.75; box-shadow: 0 8px 22px rgba(63, 165, 53, .35); transition: transform .3s, box-shadow .3s; } .elementor-widget-button .elementor-button:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(63, 165, 53, .45); } /* ------------------------------------------------------------- split image */ .elementor-element.awps-split-img img { border-radius: var(--awps-radius); box-shadow: var(--awps-shadow); /* `.split img { width:100%; height:100%; max-height:460px; object-fit:cover }` */ width: 100%; height: 100%; max-height: 460px; object-fit: cover; } /* `.split { gap: 56px; align-items: center }` with no gutter of its own. Newer documents carry these on the container itself (lib/Blocks.php); this covers the ones imported before that, which still have Elementor's 46px gap and 10px padding. */ .awps-split { gap: 56px; align-items: center; padding: 0; } /* The photo column stretches to the row height so the image can fill it and crop, the way `height: 100%` behaves inside the source's grid. The `:has()` selector covers documents imported before the column carried its own class. */ .awps-split > .awps-split-photo, .awps-split > .e-con:has(> .elementor-element.awps-split-img) { align-self: stretch; } .awps-split > .awps-split-photo > .elementor-element.awps-split-img, .awps-split > .e-con:has(> .elementor-element.awps-split-img) > .awps-split-img { height: 100%; } .elementor-element.awps-split-img .elementor-widget-container, .elementor-element.awps-split-img figure, .elementor-element.awps-split-img .elementor-image { height: 100%; margin: 0; } /* ------------------------------------------------------- main-nav dropdown -- The Destinations and Trekking sub-menus, restored to the source's behaviour (css/style.css `header.site-header` / `nav.mainnav .dropdown`). Three things were stopping these from appearing: 1. No z-index on the header. The source pins `header.site-header` to 999. Here the header had `z-index: auto`, so once the page scrolled, the sticky filter toolbar on the All Trips archive (z-index 700) painted straight over it. 2. `.elementor-nav-menu` carries `position: relative; z-index: 2`, which opens a stacking context. A sub-menu inside it can never rise above 2 relative to the page no matter what z-index it is given, so the header itself has to be lifted. 3. Opening was left to SmartMenus' JS, which falls back to tap-to-open whenever it decides the device is touch-capable — which includes any touchscreen Windows laptop, where hovering then does nothing at all. The source never used JS for this; it is a CSS :hover, so that is what it is again below. :focus-within comes along for free and makes the menu keyboard-reachable. */ .elementor-location-header { position: relative; z-index: 999; } /* Elementor re-parents the navbar to `position: fixed` when it sticks and gives it its own modest z-index; without this it slides under the same toolbar. */ .elementor-location-header .awps-navbar, .elementor-location-header .awps-navbar.elementor-sticky--effects { z-index: 999; } .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu { /* !important is required, not lazy: SmartMenus writes `min-width: 10em` as an inline style when it positions the sub-menu, and nothing in a stylesheet can outrank that. 10em against the 13px sub-item font is 130px, which crops "Lake Victoria Circuit". */ min-width: 230px !important; background: #fff; border: 0; border-radius: 12px; box-shadow: 0 24px 60px rgba(20, 70, 60, .18); padding: 12px 0; } .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a.elementor-sub-item { display: block; padding: 9px 22px; font-family: "Inter", sans-serif; font-size: 14.5px; font-weight: 600; line-height: 1.75; color: var(--awps-ink, #1E2B27); background: none; border-radius: 0; transition: color .3s, padding-left .3s; } .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a.elementor-sub-item:hover, .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a.elementor-sub-item:focus, .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a.elementor-sub-item.elementor-item-active { color: var(--awps-green, #3FA535); padding-left: 28px; background: none; } /* Open on hover, in CSS, exactly as the source did — see note 3 above. Desktop only: below 1025px Elementor swaps the whole menu for the burger drawer, and SmartMenus' accordion behaviour there is correct and must not be overridden. `display` is forced because SmartMenus writes `display: none` inline when it closes a sub-menu it had opened; a normal declaration would lose to that. Visibility is what actually shows and hides the panel, which is also what makes the fade possible. */ @media (min-width: 1025px) { .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu { display: block !important; position: absolute; top: 100% !important; left: 0 !important; margin: 0 !important; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .3s, visibility .3s, transform .3s; } .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:hover > ul.sub-menu, .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:focus-within > ul.sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } } /* ---------------------------------------------------------- accessibility -- The source honoured prefers-reduced-motion; keep that promise for the Elementor entrance animations that replace the old reveal-on-scroll. */ @media (prefers-reduced-motion: reduce) { .elementor-invisible { visibility: visible !important; animation: none !important; } * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }