/* ============================================================================ Page design — "01 — Golden Safari" Dark chocolate and gold: cream paper with the day-by-day and the parks as full chocolate bands, gold hairlines, Cormorant Garamond over Jost. WHY THIS FILE EXISTS, AND WHAT IT MUST NOT TOUCH ------------------------------------------------ 01 is the only design with no skin of its own: it renders through frontend/css/golden-safari.css, which is also the stylesheet every Elementor page loads for the plugin's blocks. So that file cannot be used to correct the page design - a change there would reach every Elementor itinerary on the site, including the hand-built templates an operator has been running for months. Everything here is therefore scoped to .gsi-skin-golden-safari, the wrapper the plugin's own page template puts on the page and nothing else does. An Elementor page loads this file and matches not one rule in it. Measured against 5-day-kenya-tanzania-safari.html, which is this design's artwork. Before this file, 18 of 19 compared roles disagreed with it - the day-by-day was cream where the artwork is chocolate, the park names were set in the display italic where the artwork sets them in Jost, the price figure was 14px bold gold against the artwork's 24px light chocolate, and the route map ran full width where the artwork puts the stop list beside it. ============================================================================ */ .gsi-skin-golden-safari{ --ff-d:'Cormorant Garamond',Georgia,serif; --ff-b:Jost,-apple-system,'Segoe UI',sans-serif; --choco:#302020; --choco-deep:#241712; --gold:#B49A6A; --gold-deep:#9A7F4E; --cream:#EFE9DD; --cream-dim:#D8CFBE; --paper:#F3EEE4; --paper-2:#E9E1D2; --ink:#2B1D18; --ink-soft:#6B5D52; --hair:rgba(180,154,106,.14); /* .rt-grid measures 1176 in the artwork; the plugin's sections were giving their children 1280, so every row on the page ran 100px wide of it */ --measure:1176px; } /* ── the day-by-day is a chocolate band ─────────────────────────────────── The spine of this design. The artwork sets the whole section on --choco with cream copy, a gold rail down the left and a hairline between days; the plugin was rendering it on the cream paper, which leaves the document with no dark centre at all and is most of why it did not read as "dark chocolate & gold". ───────────────────────────────────────────────────────────────────────── */ .gsi-skin-golden-safari .itin{ background:var(--choco); color:var(--cream); } .gsi-skin-golden-safari .itin .itin-h h2{ color:var(--cream); } .gsi-skin-golden-safari .itin .itin-h p{ color:var(--cream-dim); } /* the eyebrow over the days is the gold ON the chocolate: a company's accent is carried to read on its band, as every other design already does */ .gsi-skin-golden-safari .itin .sl{ color:var(--acc-band,var(--gold)); } /* 60px of rail, then the writing, then the plate - the artwork's own ratio */ .gsi-skin-golden-safari .itin .jd, .gsi-skin-golden-safari .itin .jd:nth-of-type(even){ grid-template-columns:60px .78fr 1.22fr; grid-template-areas:"rail body photo"; gap:0 26px; padding:30px 0; align-items:start; position:relative; max-width:1158px; margin-inline:auto; } .gsi-skin-golden-safari .itin .jd-rail { grid-area:rail; } .gsi-skin-golden-safari .itin .jd-body { grid-area:body; } .gsi-skin-golden-safari .itin .jd-photo{ grid-area:photo; } /* the hairline between days, drawn from the second one on */ .gsi-skin-golden-safari .itin .jd + .jd::before{ content:''; position:absolute; top:0; left:86px; right:0; height:1px; background:var(--hair); } .gsi-skin-golden-safari .itin .jd-dot{ width:11px; height:11px; border-radius:50%; background:var(--choco); border:1px solid var(--gold); box-shadow:0 0 0 5px var(--choco); } .gsi-skin-golden-safari .itin .jd:hover .jd-dot{ background:var(--gold); transform:scale(1.25); } .gsi-skin-golden-safari .itin .jd-num{ font-family:var(--ff-d); font-style:normal; font-weight:300; font-size:30px; line-height:1; margin-top:12px; color:rgba(var(--acc-band-rgb,var(--acc-rgb,180,154,106)),.28); transition:color .4s; } .gsi-skin-golden-safari .itin .jd:hover .jd-num{ color:var(--gold); } .gsi-skin-golden-safari .itin .jd-daylabel{ font-family:var(--ff-b); font-size:13px; line-height:1.7; letter-spacing:.18em; text-transform:uppercase; color:var(--acc-band,var(--gold)); } .gsi-skin-golden-safari .itin .jd-title{ font-family:var(--ff-d); font-weight:400; font-size:clamp(22px,2.3vw,29px); line-height:1.08; color:var(--cream); margin:7px 0 10px; } .gsi-skin-golden-safari .itin .jd-desc, .gsi-skin-golden-safari .itin .jd-desc p{ color:var(--cream); letter-spacing:normal; } .gsi-skin-golden-safari .itin .jd-photo{ position:relative; height:200px; border-radius:3px; overflow:hidden; border:1px solid rgba(180,154,106,.2); } .gsi-skin-golden-safari .itin .jd-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.4s cubic-bezier(.16,1,.3,1); } .gsi-skin-golden-safari .itin .jd:hover .jd-photo img{ transform:scale(1.06); } .gsi-skin-golden-safari .itin .jd-photo::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg,rgba(36,23,18,.8),rgba(36,23,18,.05) 60%); } .gsi-skin-golden-safari .itin .jd-coords{ position:absolute; left:12px; bottom:10px; z-index:2; font-family:var(--ff-b); font-size:17px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream); } .gsi-skin-golden-safari .itin .jd-meta-l{ color:rgba(var(--on-band-rgb,216,207,190),.7); } .gsi-skin-golden-safari .itin .jd-meta-v{ color:var(--cream); } /* ── the route: the stop list beside the map ────────────────────────────── .rt-grid in the artwork is ".9fr 1.1fr" with 38px between - the numbered stops on the left, the map on the right. That IS the "sidebar map" this design is named for, and the plugin was stacking a full-width map with the stops underneath it. The map itself stays a live one. The artwork's is a drawn illustration with gold pins; this is Leaflet with the itinerary's real coordinates and stops you can click. Making it look drawn would cost the thing that makes it worth having, so the layout is matched and the map is left alone. ───────────────────────────────────────────────────────────────────────── */ .gsi-skin-golden-safari .dg.dg-sidebar{ display:grid; grid-template-columns:.9fr 1.1fr; gap:38px; align-items:start; max-width:var(--measure); margin-inline:auto; } .gsi-skin-golden-safari .dhl{ order:1; } .gsi-skin-golden-safari .mw{ order:2; height:420px; border-radius:4px; border:1px solid rgba(var(--acc-rgb,180,154,106),.28); } .gsi-skin-golden-safari .hl-row{ display:flex; align-items:baseline; gap:14px; padding:11px 0; border-bottom:1px solid var(--hair); } .gsi-skin-golden-safari .hl-d{ font-family:var(--ff-b); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-deep); flex:0 0 auto; } .gsi-skin-golden-safari .hl-t{ font-family:var(--ff-d); font-size:19px; color:var(--ink); } /* ── the parks, as plates with the name burned in ────────────────────────── This is the design the plugin's parks block was drawn for, so the base stylesheet's overlay is right here and only its type is short of the artwork's. The staircase - the second and third card stepped down 34 and 68px - belongs to this design too, and is the one place it should stay. ───────────────────────────────────────────────────────────────────────── */ .gsi-skin-golden-safari .wh-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:var(--measure); margin-inline:auto; } .gsi-skin-golden-safari .wh-card{ min-height:320px; border-radius:4px; } .gsi-skin-golden-safari .wh-b{ padding:24px; } .gsi-skin-golden-safari .wh-card .wh-b .wh-n, .gsi-skin-golden-safari .wh-n{ font-family:var(--ff-b) !important; font-style:normal; font-size:13px; line-height:1.7; letter-spacing:.2em; color:var(--gold); opacity:.8; } .gsi-skin-golden-safari .wh-b h3{ font-family:var(--ff-d); font-weight:400; font-size:25px; line-height:1.1; color:var(--cream); margin:6px 0 8px; } .gsi-skin-golden-safari .wh-b p{ font-size:17px; line-height:1.55; color:var(--cream-dim); } /* ── the price ──────────────────────────────────────────────────────────── The artwork sets the figure at 24px in the LIGHT display face on chocolate ink, not at 14px bold in gold. It is a price on a page, not a badge. ───────────────────────────────────────────────────────────────────────── */ .gsi-skin-golden-safari .pz{ font-family:var(--ff-d); font-weight:300; font-size:24px; line-height:1.7; color:var(--price-ink,var(--choco)); } /* the base sets the cell's line-height on ".pt-table td", which is a class and two elements - a plain .pt-lbl never reached it */ .gsi-skin-golden-safari .pt-table td.pt-lbl, .gsi-skin-golden-safari .pt-table th.pt-lbl, .gsi-skin-golden-safari .pt-lbl{ font-family:var(--ff-b); font-weight:700; font-size:13px; line-height:1.7; color:var(--ink-soft); } /* ── the camps ──────────────────────────────────────────────────────────── Both were rendering black: the block gives the name no colour of its own and a