/* Accommodation styles for [gsi_lodges]. * * The block emits the .ac-grid / .ac-col / .ac-item structure from * 5-day-kenya-tanzania-safari.html. The Elementor conversion of that page * replaced this section with core Accordion widgets, so its stylesheet carries * NO .ac-* rules at all — the lodges landed on the page as unstyled buttons. * * These are the design's own rules, lifted verbatim from that source page IN * SOURCE ORDER and scoped to .gsi-block--lodges so they cannot leak elsewhere. * Order matters and duplicates are deliberate: .ac-item is declared twice in * the original and the SECOND declaration is the one that makes a lodge row a * grid instead of a browser-default button. De-duplicating by selector — an * easy mistake — drops the override and the rows come out unstyled. * * Colours resolve through the page's own --ink / --line / --gold-deep tokens, * so re-theming the page re-themes these too. * * Generated from the source page — do not hand-edit; re-extract instead. */ .gsi-block--lodges .ac-copy p{font-size:17px;color:var(--ink-soft);line-height:1.75;margin-bottom:14px;max-width:72ch} .gsi-block--lodges .ac-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px} .gsi-block--lodges .ac-col{background:#fff;border:1px solid var(--line);border-radius:4px;padding:22px} .gsi-block--lodges .ac-col.ac-lux{border-color:rgba(154,127,78,.45);background:rgba(180,154,106,.07)} .gsi-block--lodges .ac-h{font-family:var(--ff-d);font-weight:400;font-size:17px;color:var(--ink);line-height:1.2;margin-bottom:14px; padding-bottom:12px;border-bottom:1px solid var(--line)} .gsi-block--lodges .ac-item{padding:9px 0} .gsi-block--lodges .ac-k{display:block;font-size:17px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)} .gsi-block--lodges .ac-item b{display:block;font-size:17px;color:var(--ink);font-weight:500;margin-top:3px;line-height:1.4} @media(max-width:1100px){ .gsi-block--lodges .ac-grid,.gsi-block--lodges .ad-grid,.gsi-block--lodges .wy-grid{grid-template-columns:1fr 1fr} } @media(max-width:760px){ .gsi-block--lodges .ac-grid,.gsi-block--lodges .ad-grid,.gsi-block--lodges .wy-grid,.gsi-block--lodges .pt-intro{grid-template-columns:1fr} } .gsi-block--lodges .ac-col.ac-lux{box-shadow:0 22px 44px -30px rgba(48,32,32,.5)} .gsi-block--lodges .ac-h{font-size:17px;letter-spacing:.01em} .gsi-block--lodges .ac-item{display:grid;grid-template-columns:1fr 16px;align-items:center;gap:8px; width:100%;text-align:left;background:transparent;border:0;padding:11px 0;cursor:pointer; font-family:var(--ff-b);border-bottom:1px solid rgba(43,29,24,.07);transition:padding .3s} .gsi-block--lodges .ac-col > .ac-item:last-child{border-bottom:0} .gsi-block--lodges .ac-item .ac-k{grid-column:1;display:block;font-size:17px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)} .gsi-block--lodges .ac-item b{grid-column:1;display:block;font-size:17px;color:var(--ink);font-weight:500;margin-top:3px;line-height:1.4; transition:color .25s} .gsi-block--lodges .ac-item .ac-go{grid-column:2;grid-row:1 / span 2;display:flex;align-items:center;justify-content:center; width:16px;height:16px;color:var(--gold-deep);opacity:0;transform:translateX(-4px); transition:opacity .3s,transform .3s} .gsi-block--lodges .ac-item .ac-go svg{width:13px;height:13px} .gsi-block--lodges .ac-item:hover{padding-left:6px} .gsi-block--lodges .ac-item:hover b{color:var(--gold-deep)} .gsi-block--lodges .ac-item:hover .ac-go{opacity:1;transform:none} .gsi-block--lodges .ac-item:focus-visible{outline:1px solid var(--gold-deep);outline-offset:3px} .gsi-block--lodges .ac-item b{font-size:17px;line-height:1.45} .gsi-block--lodges .ac-item .ac-k{font-size:17px;letter-spacing:.14em} .gsi-block--lodges .ac-h{font-size:17px;line-height:1.25} .gsi-block--lodges .ac-item .ac-go svg{width:14px;height:14px} .gsi-block--lodges .ac-item .ac-k{letter-spacing:.1em} .gsi-block--lodges .eyebrow,.gsi-block--lodges .k5-cl,.gsi-block--lodges .k5-facts .k,.gsi-block--lodges .k5-attr .k,.gsi-block--lodges .k5-wa i,.gsi-block--lodges .k5-cp i,.gsi-block--lodges .ac-item .ac-k,.gsi-block--lodges .jd-day,.gsi-block--lodges .jd-meals b,.gsi-block--lodges .jd-meta i,.gsi-block--lodges .jd-coord,.gsi-block--lodges .jd-start-k,.gsi-block--lodges .ss-when,.gsi-block--lodges .wh-n,.gsi-block--lodges .ad-when,.gsi-block--lodges .fl-k,.gsi-block--lodges .hl-d,.gsi-block--lodges .coord-mark,.gsi-block--lodges .k5-coords,.gsi-block--lodges .lb-loc,.gsi-block--lodges .lb-tier,.gsi-block--lodges .fb-k,.gsi-block--lodges .ff-card label,.gsi-block--lodges .ff-direct .k,.gsi-block--lodges .pt-note b,.gsi-block--lodges .review .who small{font-size:13px} .gsi-block--lodges .k5-facts .v,.gsi-block--lodges .ac-item b,.gsi-block--lodges .fb-i,.gsi-block--lodges .jd-meals span{font-size:15px} .gsi-block--lodges .ac-h{font-size:17px} /* ══ The one rule golden-safari.css gets wrong on an Elementor page ══════ golden-safari.css styles .hl-row as a rounded card: .hl-row{background:var(--sf);border-radius:var(--r);border:1px solid var(--bd)} On an itinerary rendered by the PHP template that is correct. On an Elementor page the design supplies its own `body .hl-row`, which declares only a hairline border-bottom -- so the card's background, its 16px radius and its other three borders leak through and every day-highlight row renders boxed, not ruled. This corrects exactly those properties. border-bottom is left to the page, and the first row's top hairline is restated because zeroing border-top would otherwise take it too. Measured against the source HTML at 1440px: 64px / 434.094px columns, 291.5px list height -- matching to the pixel. */ body .hl-row{background:transparent !important;border-radius:0 !important; border-top:0 !important;border-right:0 !important;border-left:0 !important} body .hl-row:first-child{border-top:1px solid var(--line) !important} /* ══ The floating bar keeps its price on a phone ═══════════════════════════ The design hides it below 900px: @media(max-width:900px){ .fb-price{display:none} } which is a reasonable call when the bar is only a jump-nav — but this bar is now the thing that follows the rate table. Pick 4 people and the figure it updates to is the whole point, and on a phone it was updating an element that was not on screen. The bar is a 3-column grid: price, a links rail, the buttons. The rail is the `1fr` and already scrolls itself (.fb-scroll{overflow-x:auto} in the design), so giving the price its column back takes space from the rail rather than pushing anything off-screen. That is also why the bar itself must NOT be a scroll container: an earlier version set overflow-x on .fb-in to make the whole bar draggable, which put the price out of reach instead of on screen. The eyebrow label is dropped rather than the figure — at 390px the number is what a traveller needs and "FROM" is not. */ @media (max-width:900px){ body .fb-in{grid-template-columns:auto minmax(0,1fr) auto !important} body .fb-price{display:flex !important;flex-shrink:0;min-width:0} body .fb-price .fb-k{display:none} body .fb-price .gsi-pb{white-space:nowrap;font-size:15px} body .fb-price .gsi-pb-per{display:none} } @media (max-width:560px){ /* tighter still: the figure alone, so the buttons stay reachable */ body .fb-price .gsi-pb-from{display:none} body .fb-price .gsi-pb{font-size:14px} } /* ══ The price must not inherit body ink inside the dark bar ═══════════════ Measured on the live page: bar background rgb(36,23,18), price text rgb(43,29,24). Dark brown on dark brown — present, laid out, and effectively invisible. Nothing was painting it. The design colours its own price markup — .fb-k{color:var(--gold)} and .fb-v{color:var(--gold-bright)} — but the block emits .gsi-pb-* spans, which match neither, so they inherited the page's body colour (--ink #2B1D18). That is correct everywhere else on the page and wrong in the one place the page turns dark. So the block's own spans get the roles the design gave its own: the figure bright, the words around it muted gold. --gold-bright is not defined on this install, hence the literal fallback. Scoped to .fb deliberately. The same shortcode also renders inside the Trip Highlights card, which sets its own colours and reads correctly today — colouring .gsi-pb globally would break that to fix this. */ body .fb .gsi-pb{color:var(--gold,#B49A6A)} body .fb .gsi-pb-amt{color:var(--gold-bright,#D9BE86)} body .fb .gsi-pb-from, body .fb .gsi-pb-per{color:var(--gold,#B49A6A);opacity:.85} body .fb .gsi-pb-pending{color:var(--cream-dim,#D8CFBE)} /* ══ Included / Not included: give the tick and dash their room back ═══════ The design marks these lists with drawn CSS, no icon font and no SVG: .ie-in li::before a gold corner rotated -45deg -> a tick .ie-out li::before a 9x1.5px bar in --bark -> a dash Both are position:absolute at left:2-3px, and the list item carries `padding:10px 0 10px 26px` to keep the text clear of them. The conversion made these lists Elementor Icon List widgets, and that widget ships `.elementor-widget .elementor-icon-list-item{padding:0}`. At (0,2,0) that outranks the design's `body .ie-col li` at (0,1,2) — class count decides before element count — so the padding was dropped while the markers kept their absolute positions. The tick and the dash ended up sitting on top of the first characters of every line. Restored at (0,2,3) by naming the widget's own class alongside the design's, which beats the widget rule on specificity rather than on !important. The marker geometry is untouched: it was correct all along, it just had nothing to sit in. */ /* !important on this one line, reluctantly. At (0,2,3) with no competing !important anywhere in the CSSOM this rule should already win outright, and it does for padding-top, -right and -left — but padding-bottom alone resolves to 0, which two competing shorthands cannot produce. Whatever sets it is not reachable through document.styleSheets (the remaining sheets are CORS-opaque font CSS). Rather than keep hunting a 10px gap, the value is stated outright. Revisit if the rows ever need different vertical spacing per breakpoint. */ body .ie-col ul li.elementor-icon-list-item{padding:10px 0 10px 26px !important} /* The widget also lays its items out as flex, which collapses the text span to a zero-width box and leaves the line looking empty. The design's list is a plain block with text in normal flow. */ body .ie-col ul li.elementor-icon-list-item{display:block} body .ie-col ul li.elementor-icon-list-item .elementor-icon-list-text{display:inline} /* ══ Which price did I click? ══════════════════════════════════════════════ Clicking a price updated the floating bar and nothing else, so the table gave no sign of what had been chosen. Scroll away from the bar and the choice was invisible. The class is `gsi-picked`, not the design's own `.on`. `.on` already carries two meanings here — active tier tab, and visible tier panel — and giving one class a third job is how a stylesheet starts doing something you cannot read off the markup. Colours are the design's own gold tokens, so this reads as part of the table rather than a control bolted onto it. */ /* a price is clickable, and should look it */ body .pt-table .pz{cursor:pointer;border-radius:2px;padding:2px 6px;margin:-2px -6px; transition:background-color .18s,color .18s} body .pt-table .pz:hover{background:rgba(180,154,106,.16);color:var(--gold-deep,#9A7F4E)} /* the picked cell */ body .pt-table td.gsi-picked{background:rgba(180,154,106,.14); box-shadow:inset 0 0 0 1px var(--gold-deep,#9A7F4E)} body .pt-table td.gsi-picked .pz{color:var(--gold-deep,#9A7F4E);font-weight:500;background:transparent} /* and the group-size header above it, which is what names the choice on a wide screen -- on a phone the table stacks and each cell carries its own data-l */ body .pt-table th.gsi-picked{background:rgba(180,154,106,.2);color:var(--ink,#2B1D18)} /* the rooms row belongs to the same column, so it follows the selection */ body .pt-table tr.pt-rooms td.gsi-picked{background:rgba(180,154,106,.09)} @media (prefers-reduced-motion:reduce){ body .pt-table .pz{transition:none} } /* ══ One age box per child ═════════════════════════════════════════════════ "2 children" tells an operator almost nothing — a 3-year-old and a 15-year-old are different park fees, different vehicle rules and often a different room. Type a number of children and that many age boxes appear. Sits inside a designed form, so it borrows the page's own tokens and adds no colour of its own. */ .gsi-kidages[hidden]{display:none} .gsi-kidages{width:100%;padding:0 0 14px} .gsi-kidages-k{display:block;font-size:13px;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-soft,#6B5D52);margin-bottom:8px} .gsi-kidages-row{display:flex;flex-wrap:wrap;gap:10px} .gsi-kidage{display:flex;flex-direction:column;gap:4px;flex:0 0 auto} .gsi-kidage > span{font-size:13px;color:var(--ink-soft,#6B5D52)} .gsi-kidage input{width:84px;padding:9px 10px;border:1px solid var(--line,rgba(48,32,32,.14)); border-radius:3px;background:#fff;color:var(--ink,#2B1D18);font-family:var(--ff-b,sans-serif); font-size:15px} .gsi-kidage input:focus{outline:2px solid var(--gold-deep,#9A7F4E);outline-offset:1px; border-color:var(--gold-deep,#9A7F4E)} @media(max-width:560px){ /* four across on a phone rather than one long row that scrolls */ .gsi-kidage{flex:1 1 calc(25% - 8px)} .gsi-kidage input{width:100%} }