/* ============================================================================ Page design — "02 — Minimal Luxury" Ivory paper, hairlines instead of boxes, Fraunces set large and light with Inter beneath it. The restraint is the point: no card has a shadow, no panel has a fill, and the only colour is a muted bronze that marks the money and nothing else. Styles the blocks in frontend/partials/, which every design shares - see frontend/templates/gsi-page.php. Nothing here changes what a block contains. ============================================================================ */ .gsi-skin-minimal-luxury{ --ff-d:'Fraunces',Georgia,serif; --ff-b:Inter,-apple-system,'Segoe UI',sans-serif; --paper:#F8F5EE; --paper-2:#F0EBDD; --ink:#1A1814; --ink-2:#4A4239; --ink-faint:#8A7F70; --line:#D8CFC0; --acc:#A8845F; --acc-d:#87664A; --acc-txt:#7A5B3F; --gutter:clamp(24px,6vw,96px); /* The two measurements that set this design's scale, both straight from minimal-luxury-v3.html's :root. They were the whole reason the page rendered at roughly half the mockup's height: --gutter-section there is clamp(80px,12vw,180px) and every section title is --t-display, and this file had been using clamp(56px,8vw,120px) and clamp(28px,4vw,52px). The restraint of this design lives in the air around the type, so shrinking the air is not a smaller version of it - it is a different design. */ --gutter-sec:clamp(80px,12vw,180px); /* The source's two containers, translated. .container is "max-width:1240px; padding:0 var(--gutter-page)", so what its CONTENT actually gets is 1240 minus a gutter either side - 1067px on a 1440 window, which is what the artwork measures. .container-wide is the same shape at 1600, which on any ordinary window is wider than the room available, so it simply fills. The subtraction matters. Setting --measure to a flat 1240px put the inclusions and the why cards 170px wider than the artwork - one whole gutter pair - because the plugin's section already spends the gutter as its own padding and the cap was then measured inside it. Two containers, not one: the camps, add-ons, parks and migration run wide in the source, everything else runs to the reading measure. */ --measure:calc(1240px - 2 * var(--gutter)); --measure-wide:calc(1600px - 2 * var(--gutter)); --t-display:clamp(48px,7vw,96px); /* the gap the mockup leaves between a section header and its content */ --hdr-gap:clamp(60px,10vw,100px); /* ── the base stylesheet's own variables, re-pointed ──────────────────── This is the most important block in the file and it is easy to miss. golden-safari.css sets its palette and its two faces on :root, and then writes "font-family:var(--fh)!important" in twenty places - on section titles, camp names, accordion questions, the migration heading, the why cards, the day labels. !important beats anything this file can say about font-family, so every one of those elements was set in Cormorant Garamond and Jost no matter what --ff-d said, and this whole design was rendering in a face it does not use. Comparing computed styles against the artwork is what found it: twelve roles came back "artwork fraunces / plugin cormorant garamond" while the page still looked plausible, because Cormorant is also a serif with an italic. Redefining the base's variables inside the skin wrapper fixes all twenty at once, and every var(--a), var(--tx), var(--bd), var(--r) with them - the base's gold, chocolate and 16px radius become this design's bronze, ink and square corners without a single override. A design that has to fight the base stylesheet rule by rule is a design that will drift; one that feeds it different variables cannot. ────────────────────────────────────────────────────────────────────── */ --fh:'Fraunces',Georgia,serif; --fb:Inter,-apple-system,'Segoe UI',sans-serif; --a:#A8845F; --a2:#87664A; --a-txt:#87664A; --a-txt2:#7A5B3F; --tx:#1A1814; --tx2:#4A4239; --bg:#F8F5EE; --bg2:#F0EBDD; --sf:#F8F5EE; --bd:#D8CFC0; --choco:var(--band); --choco-deep:var(--band-deep); --r:0px; /* ── the three colours an operator can change, and what is drawn from them ─ --paper, --ink and --band are the whole contract between this stylesheet and the Design Template box: set those three and every value below moves with them, because nothing under this line is a colour that was typed by hand a second time. The two --on-* pairs are the writing over a ground the operator chose, so they cannot be constants either - see colour_css() in golden-safari-itinerary.php, which measures them. The -rgb triplets exist because CSS cannot take an alpha off a hex variable in browsers this plugin still supports. Every rgba() in this file that means "the paper at 15%" or "the ink at 70%" is written against one of them, so a page whose paper is no longer ivory does not keep ivory ghosts in its veils, its rules and its bar. ──────────────────────────────────────────────────────────────────────── */ --paper-rgb:248,245,238; --ink-rgb:26,24,20; --acc-rgb:168,132,95; /* the band: this design's two ink sections, the why and the closing block */ --band:#1A1814; --band-deep:#12100D; --on-band:#F8F5EE; --on-band-rgb:248,245,238; --on-ink:#F8F5EE; --on-ink-rgb:248,245,238; --on-acc:#F8F5EE; --on-acc-rgb:248,245,238; background:var(--paper); color:var(--ink); font-family:var(--ff-b); font-weight:400; font-size:15px; line-height:1.75; /* --ls-body in the source. The theme sets -0.1px on body copy, which is a different typographic decision on a face that is not this one; every paragraph, day description and card body inherited it. */ letter-spacing:.005em; } .gsi-skin-minimal-luxury h1, .gsi-skin-minimal-luxury h2, .gsi-skin-minimal-luxury h3, .gsi-skin-minimal-luxury h4{ font-family:var(--ff-d); font-weight:300; letter-spacing:-.02em; color:var(--ink); } /* ── the cover ───────────────────────────────────────────────────────────── Straight from .cover in minimal-luxury-v3.html: a full-height photograph with the title set over it in paper white, the meta row along the bottom. The first version of this file made the hero a sheet of ivory with the photo sitting above the title, which is not what the design does and not what the design is for - the photograph IS the cover. Sizes below are the mockup's: --t-mega is clamp(72px,12vw,168px) at line-height .88, the eyebrow tracks at .42em, and the meta values are the display face in italic at 26px. ────────────────────────────────────────────────────────────────────────── */ .gsi-skin-minimal-luxury .gsi-hero{ position:relative; min-height:100vh; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:0; color:var(--on-ink); background:var(--ink); } .gsi-skin-minimal-luxury .gsi-hero-media{ position:absolute; inset:0; z-index:-2; margin:0; } .gsi-skin-minimal-luxury .gsi-hero-media img{ width:100%; height:100%; object-fit:cover; display:block; } /* the mockup's two overlays: a soft vignette top and bottom, and a light wash from the left so the type has something to sit on without dulling the photo */ .gsi-skin-minimal-luxury .gsi-hero-veil{ display:block; position:absolute; inset:0; z-index:-1; background: linear-gradient(to bottom,rgba(var(--ink-rgb),.25) 0%,rgba(var(--ink-rgb),0) 25%,rgba(var(--ink-rgb),0) 60%,rgba(var(--ink-rgb),.65) 100%), linear-gradient(to right,rgba(var(--ink-rgb),.15) 0%,transparent 50%); } /* The mockup splits the cover into three bands - a mark at the top, the title centred in the space that is left, the meta along the bottom. hero.php keeps all of it in one block, so the block is stretched to the full height and made a column of its own: the title centres in it, and margin-top:auto on the meta pushes that row to the floor. Same result, one element. */ .gsi-skin-minimal-luxury .gsi-hero-in{ position:relative; z-index:2; flex:1; width:100%; max-width:1400px; margin:0 auto; display:flex; flex-direction:column; justify-content:center; padding:clamp(64px,10vw,120px) var(--gutter) clamp(40px,5vw,50px); } .gsi-skin-minimal-luxury .gsi-hero-tag{ font-family:var(--ff-b); font-size:11px; font-weight:500; letter-spacing:.42em; text-transform:uppercase; color:var(--on-ink); opacity:.85; margin:0 0 28px; } .gsi-skin-minimal-luxury .gsi-hero-h{ font-family:var(--ff-d); font-weight:300; font-size:clamp(72px,12vw,168px); line-height:.88; letter-spacing:-.02em; color:var(--on-ink); max-width:1200px; margin:0 0 26px; } .gsi-skin-minimal-luxury .gsi-hero-h em{ font-style:italic; font-weight:400; } .gsi-skin-minimal-luxury .gsi-hero-sub{ font-family:var(--ff-d); font-style:italic; font-weight:300; font-size:clamp(20px,2.2vw,30px); line-height:1.4; color:var(--on-ink); opacity:.92; max-width:540px; margin:0 0 36px; } /* margin-top:auto is what drops this row to the floor of the cover while the title stays centred above it - see the note on .gsi-hero-in. */ .gsi-skin-minimal-luxury .gsi-hero-meta{ display:flex; flex-wrap:wrap; gap:18px clamp(30px,4vw,60px); align-items:flex-end; margin-top:auto; padding-top:clamp(32px,6vh,72px); border-top:0; } .gsi-skin-minimal-luxury .gsi-hero-fact{ font-family:var(--ff-b); font-size:9px; font-weight:500; letter-spacing:.36em; text-transform:uppercase; color:var(--on-ink); opacity:.7; } .gsi-skin-minimal-luxury .gsi-hero-stars{ color:var(--on-ink); letter-spacing:.1em; opacity:.9; } .gsi-skin-minimal-luxury .gsi-hero-rating small{ color:var(--on-ink); opacity:.7; margin-left:6px; } .gsi-skin-minimal-luxury .gsi-hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; } .gsi-skin-minimal-luxury .gsi-btn{ display:inline-flex; align-items:baseline; gap:9px; text-decoration:none; padding:15px 30px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--ink); color:var(--ink); transition:background .2s,color .2s; } .gsi-skin-minimal-luxury .gsi-btn-solid{ background:var(--ink); color:var(--on-ink); } .gsi-skin-minimal-luxury .gsi-btn-solid:hover{ background:var(--acc-d); border-color:var(--acc-d); } .gsi-skin-minimal-luxury .gsi-btn-ghost:hover{ background:var(--ink); color:var(--on-ink); } .gsi-skin-minimal-luxury .gsi-btn-amt{ font-family:var(--ff-d); font-size:20px; letter-spacing:0; } .gsi-skin-minimal-luxury .gsi-btn-from, .gsi-skin-minimal-luxury .gsi-btn small{ font-size:10px; color:inherit; opacity:.7; } /* On the cover the buttons stand on a photograph, so the page's ink-on-ivory pair would disappear. Paper outline there, paper fill for the primary. */ .gsi-skin-minimal-luxury .gsi-hero .gsi-btn{ border-color:rgba(var(--on-ink-rgb),.6); color:var(--on-ink); } .gsi-skin-minimal-luxury .gsi-hero .gsi-btn-solid{ background:var(--on-ink); border-color:var(--on-ink); color:var(--ink); } .gsi-skin-minimal-luxury .gsi-hero .gsi-btn-solid:hover{ background:var(--acc); border-color:var(--acc); color:var(--on-acc); } .gsi-skin-minimal-luxury .gsi-hero .gsi-btn-ghost:hover{ background:rgba(var(--on-ink-rgb),.15); color:var(--on-ink); } /* ── the shared blocks ─────────────────────────────────────────────────── */ /* Undo the base stylesheet's centred column before anything else. golden-safari.css sets ".gsec{padding:100px 40px;max-width:1280px;margin:0 auto}", and a design that only restyles the padding inherits that 1280px cap: the gutter below is then measured inside a 1280px box, so on any window wider than that the page never reaches the edge, and the moment a section is given a background - the alternating tint two rules down - it paints as a slab floating in the middle of the page with the paper showing either side. That inset panel behind "Safari Overview" was this rule, not the tint. The reading column is set on the section's CHILDREN, further down, which is where a measure belongs; the section itself runs the full width and insets with the gutter. */ .gsi-skin-minimal-luxury .gsec, .gsi-skin-minimal-luxury section[id]{ max-width:none; margin-inline:0; } /* The :not() matters. ".gsec-dark" in the base stylesheet is a single class, so this two-class rule outranked it and painted the parks band ivory - with the band's own white headings still on top of it, which left "Where the Safari Takes You" at 1.09:1. The dark bands keep their own ground. */ .gsi-skin-minimal-luxury .gsec, .gsi-skin-minimal-luxury section[id]{ padding:var(--gutter-sec) var(--gutter); background:var(--paper); border-bottom:0; } /* The grounds are NAMED, not alternated. The previous rule tinted every even block, which gives a stripe wherever the itinerary happens to have data and moves the stripes the moment a section is empty - so no two itineraries had the same rhythm, and none of them had the mockup's. In the source the ground belongs to the section: eight run on ivory, five on the deeper ivory between hairlines, and exactly two are ink. Naming them makes the page identical on an itinerary that has flights and one that does not. */ .gsi-skin-minimal-luxury .gsi-block--highlights > section, .gsi-skin-minimal-luxury .gsi-block--parks > section, .gsi-skin-minimal-luxury .gsi-block--rates-table > section, .gsi-skin-minimal-luxury .gsi-block--flights > section, .gsi-skin-minimal-luxury .gsi-block--faq > section{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } /* the day-by-day carries a top hairline only - it runs into the lodges below */ .gsi-skin-minimal-luxury .gsi-block--days > section{ background:var(--paper-2); border-top:1px solid var(--line); padding-bottom:calc(var(--gutter-sec) * .5); } /* .gsec-tint is the base stylesheet's own alternation; this design does its own, so the class must not add a second one on top of it */ .gsi-skin-minimal-luxury .gsec.gsec-tint{ background:var(--paper); } .gsi-skin-minimal-luxury .gsec > *, /* --measure is .container in the source. Every section's content is held to it, so the page has ONE left edge and one right edge from the cover to the colophon. The camps row is the source's single exception and says so where it overrides this. */ .gsi-skin-minimal-luxury section[id] > *{ max-width:var(--measure); margin-inline:auto; } /* The four blocks the source runs on .container-wide rather than .container: the camps, the add-ons, the parks and the migration note inside them. Done by re-pointing --measure on the block rather than by widening each grid, because the cap is applied in two places - on the grid AND on the section's own "> *" - and "section[id] > *" is the more specific of the two, so a wider grid rule lost to it and the wide rows silently stayed at the reading measure. Changing the variable changes both, and anything added to these blocks later inherits the right one without knowing this rule exists. */ .gsi-skin-minimal-luxury .gsi-block--lodges, .gsi-skin-minimal-luxury .gsi-block--addons, .gsi-skin-minimal-luxury .gsi-block--parks{ --measure:var(--measure-wide); } /* ── the section header ──────────────────────────────────────────────────── In the source every section but the overview opens the same way: an eyebrow, then a two-line title in Fraunces italic at --t-display, both centred, and then a large measured gap before the content. That header is the design's spine - it is what makes fourteen unlike sections read as one document - so it is set once here rather than per section. The overview is the exception in the source too (its title sits in a left column beside the stats), so it keeps the left-aligned treatment further down this file and is excluded from the centring throughout. The eyebrow colour is the one deliberate divergence. The source sets it to --accent (#A8845F), which on this ivory measures 3.0:1 - under AA for text this small. --acc-d is the same hue two steps down at 4.6:1, and at 10px with .36em of tracking the difference is invisible next to the difference in legibility. ────────────────────────────────────────────────────────────────────────── */ .gsi-skin-minimal-luxury .sl{ font-size:10px; font-weight:500; line-height:1.65; letter-spacing:.36em; text-transform:uppercase; color:var(--acc-d); margin:0 0 22px; } /* display:flex, not just justify-content. The label is an inline-flex box, so justify-content only centred the dash and the words INSIDE a box that was still sitting at the left margin - the eyebrow stayed hard left under a centred title on every section. Making it a block-level flex gives it the full measure to centre in. */ .gsi-skin-minimal-luxury section[id]:not(#overview) .sl{ display:flex; justify-content:center; text-align:center; } .gsi-skin-minimal-luxury .gsec h2, .gsi-skin-minimal-luxury section[id] h2{ font-family:var(--ff-d); font-style:italic; font-weight:300; font-size:var(--t-display); line-height:.95; letter-spacing:-.02em; margin:0; } .gsi-skin-minimal-luxury section[id]:not(#overview) h2{ text-align:center; max-width:18ch; margin-inline:auto; } /* The standfirst under a title. The source sets it in Fraunces italic at 20px in the faint ink (.addons-sub, .route-sub and their kin) - it is a subtitle, in the same voice as the title above it. This had it as 16px of Inter, which reads as the first paragraph of the section instead. */ .gsi-skin-minimal-luxury section[id]:not(#overview) .sec-p{ text-align:center; max-width:52ch; margin:18px auto 0; font-family:var(--ff-d); font-style:italic; font-weight:300; font-size:20px; line-height:1.65; } /* The colour is set separately, and the two bands are cut out of it. The faint ink is a colour for PAPER: on the ink band it lands at 4.5:1 by luck rather than by design, and on a band somebody has recoloured it lands wherever the two happen to fall - 3.1:1 on a pale green, measured. The band sections say what their own standfirst should be, in the writing measured for that band; this rule outranked them both because ":not(#overview)" carries an id's weight, which is easy to miss and was worth writing down. */ .gsi-skin-minimal-luxury section[id]:not(#overview):not(#enquiry):not(#why) .sec-p{ color:var(--ink-faint); } /* …and the gap the header leaves before whatever the block puts under it. Written as "whatever follows the title" rather than as a list of grids on purpose: two of the blocks - the lodges and the pricing matrix - have no title in their partial at all, and naming their grids gave those sections 180px of section padding followed by another 100px of header gap with no header in it. A gap that belongs to a header should be measured from the header. */ .gsi-skin-minimal-luxury section[id]:not(#overview) h2 + *:not(.sec-p), .gsi-skin-minimal-luxury section[id]:not(#overview) .sec-p + *, .gsi-skin-minimal-luxury section[id]:not(#overview) .gsi-blockhead + *{ margin-top:var(--hdr-gap); } /* the wrapper is the header, so it takes the header's alignment */ .gsi-skin-minimal-luxury section[id]:not(#overview) .gsi-blockhead{ text-align:center; } .gsi-skin-minimal-luxury .gsec h3{ font-family:var(--ff-d); font-style:italic; font-weight:400; font-size:clamp(19px,2vw,26px); letter-spacing:-.01em; margin:0 0 12px; } .gsi-skin-minimal-luxury p{ color:var(--ink-2); } .gsi-skin-minimal-luxury a{ color:var(--acc-d); } /* rows and cards lose their fills; a hairline does the separating */ .gsi-skin-minimal-luxury .card, .gsi-skin-minimal-luxury [class*="-card"], .gsi-skin-minimal-luxury .lodge, .gsi-skin-minimal-luxury .day{ background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; padding:26px 0; } .gsi-skin-minimal-luxury img{ border-radius:0; } .gsi-skin-minimal-luxury table{ width:100%; border-collapse:collapse; } .gsi-skin-minimal-luxury th{ font-family:var(--ff-b); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--acc-d); text-align:left; padding:12px 10px; border-bottom:1px solid var(--ink); } .gsi-skin-minimal-luxury td{ padding:12px 10px; border-bottom:1px solid var(--line); } /* the reveal classes the blocks carry wait for JavaScript the page design does not ship; without this the whole page below the hero stays invisible */ .gsi-skin-minimal-luxury .rv, .gsi-skin-minimal-luxury .rv-left, .gsi-skin-minimal-luxury .rv-right{ opacity:1 !important; transform:none !important; } @media (max-width:860px){ .gsi-skin-minimal-luxury .gsi-hero-media{ aspect-ratio:4/3; } } /* ── the day-by-day section ─────────────────────────────────────────────── The shared block carries .itin.itin-dark, and the base stylesheet paints that chocolate for 01 — Golden Safari. This design's page is ivory, so it takes the section back: the mockup sets the days on the page's own paper with --ink-soft body copy, not on a dark panel. Every rule below re-states a base rule at equal or greater weight; nothing new is introduced. ───────────────────────────────────────────────────────────────────────── */ .gsi-skin-minimal-luxury .itin.itin-dark{ background:var(--paper); color:var(--ink); } .gsi-skin-minimal-luxury .itin.itin-dark .itin-h h2{ color:var(--ink); } .gsi-skin-minimal-luxury .itin.itin-dark .itin-h p{ color:var(--ink-2); } .gsi-skin-minimal-luxury .itin .jd{ border-bottom:1px solid var(--line); } .gsi-skin-minimal-luxury .itin .jd-rail::after{ background:var(--line); } .gsi-skin-minimal-luxury .itin .jd-dot{ background:var(--paper); border-color:var(--acc); } .gsi-skin-minimal-luxury .itin .jd-dot.jd-dot-on{ background:var(--acc); } .gsi-skin-minimal-luxury .itin .jd-num{ color:var(--ink-faint); } .gsi-skin-minimal-luxury .itin .jd-daylabel{ color:var(--acc-d); } .gsi-skin-minimal-luxury .itin .jd-title{ color:var(--ink); } .gsi-skin-minimal-luxury .itin .jd-desc{ color:var(--ink-2); } .gsi-skin-minimal-luxury .itin .jd-start{ border:1px solid var(--line); background:var(--paper-2); } .gsi-skin-minimal-luxury .itin .jd-start-tag{ color:var(--acc-d); } .gsi-skin-minimal-luxury .itin .jd-start-body p{ color:var(--ink-2); } .gsi-skin-minimal-luxury .itin .jd-meals{ border-left:2px solid var(--acc); background:var(--paper-2); } .gsi-skin-minimal-luxury .itin .jd-meals-h{ color:var(--acc-d); } .gsi-skin-minimal-luxury .itin .jd-meals p{ color:var(--ink-2); } .gsi-skin-minimal-luxury .itin .jd-meta{ border-top:1px solid var(--line); } .gsi-skin-minimal-luxury .itin .jd-meta-l{ color:var(--ink-faint); } .gsi-skin-minimal-luxury .itin .jd-meta-v{ color:var(--ink); } .gsi-skin-minimal-luxury .itin .jd-meta-night .jd-meta-v{ color:var(--acc-d); } /* the accordion variant of the same block */ .gsi-skin-minimal-luxury .itin.itin-dark .dy-w{ background:var(--paper-2); border-color:var(--line); } .gsi-skin-minimal-luxury .itin.itin-dark .dy-t{ color:var(--ink); } .gsi-skin-minimal-luxury .itin.itin-dark .dy.active .dy-t{ color:var(--acc-d); } .gsi-skin-minimal-luxury .itin.itin-dark .dy-l{ color:var(--ink-faint); } /* ── the one dark band ──────────────────────────────────────────────────── The base stylesheet gives .gsec-dark to TWO blocks - the parks band and "why book with us" - and paints both chocolate. The source has only one dark section in the whole document, and it is the "why": everything else including the parks runs on ivory. Two dark bands on a page this long is a different rhythm, so the parks band is put back on paper (below) and this treatment is scoped to the block that should keep it. Inside it the base stylesheet's white headings still lose to this design's own ".gsec h2", so the light text is restored explicitly - without this, "Why Book With Us" was dark ink on chocolate at 1.09:1. ───────────────────────────────────────────────────────────────────────── */ .gsi-skin-minimal-luxury .gsi-block--why > .gsec-dark{ /* The colour matters as much as the ground. golden-safari.css writes ".gsec-dark{background:var(--choco);color:var(--sf)}", and --sf is the CARD surface - near-white in every design - so anything in this band that has no colour rule of its own inherits near-white. That is invisible the moment somebody gives the band a pale colour, and it was only ever right by accident while every band was dark. */ background:var(--band); color:var(--on-band); } .gsi-skin-minimal-luxury .gsi-block--why h2, .gsi-skin-minimal-luxury .gsi-block--why h3, .gsi-skin-minimal-luxury .gsi-block--why h4{ color:var(--on-band); } .gsi-skin-minimal-luxury .gsi-block--why p{ color:rgba(var(--on-band-rgb),.72); } /* The accent AS SEEN ON THE BAND. Every design puts its eyebrow and its numerals on the band in the accent, which reads because the band has always been dark. On a pale band it does not - Minimal Luxury's bronze measures 2.6:1 on one - so --acc-band is the same colour carried just far enough toward the band's own text to read, and no further. It is only emitted when the band has been changed; --acc is the fallback. */ .gsi-skin-minimal-luxury .gsi-block--why .sl, .gsi-skin-minimal-luxury .gsi-block--why a{ color:var(--acc-band,var(--acc)); } .gsi-skin-minimal-luxury .gsi-block--why .sec-p{ color:rgba(var(--on-band-rgb),.72); } /* A card inside the dark band must not keep the design's white surface: the band's own text is light, and a white card under it left the names white on white. Over the ink the cards go translucent instead. */ .gsi-skin-minimal-luxury .gsi-block--why .card, .gsi-skin-minimal-luxury .gsi-block--why [class*="-card"]{ background:rgba(var(--on-band-rgb),.055); border-color:rgba(var(--on-band-rgb),.16); box-shadow:none; } /* the cover meta: label over value, the value in the display face in italic */ .gsi-skin-minimal-luxury .gsi-hero-fact{ display:flex; flex-direction:column; gap:4px; } .gsi-skin-minimal-luxury .gsi-hero-fact-l{ font-family:var(--ff-b); font-size:9px; font-weight:500; letter-spacing:.36em; text-transform:uppercase; opacity:.7; } .gsi-skin-minimal-luxury .gsi-hero-fact b{ font-family:var(--ff-d); font-style:italic; font-weight:400; font-size:26px; letter-spacing:-.01em; text-transform:none; opacity:1; } /* ── the pinned action bar ──────────────────────────────────────────────── This design's is the odd one out: paper rather than a dark slab, a hairline above it, and the reserve button the page's ink. It is the same restraint the rest of the sheet keeps. */ .gsi-skin-minimal-luxury .gsi-bar{ background:rgba(var(--paper-rgb),.97); border-top:1px solid var(--line); } .gsi-skin-minimal-luxury .gsi-bar-title{ font-family:var(--ff-d); font-style:italic; font-weight:400; color:var(--ink); } .gsi-skin-minimal-luxury .gsi-bar-price{ font-family:var(--ff-b); font-size:9px; letter-spacing:.36em; text-transform:uppercase; color:var(--ink-faint); } .gsi-skin-minimal-luxury .gsi-bar-price .gsi-pb-amt{ font-family:var(--ff-d); font-style:italic; font-size:22px; letter-spacing:0; text-transform:none; color:var(--ink); } .gsi-skin-minimal-luxury .gsi-bar-btn{ font-family:var(--ff-b); font-size:10px; letter-spacing:.16em; color:var(--ink-2); border:1px solid var(--line); border-radius:0; } .gsi-skin-minimal-luxury .gsi-bar-btn:hover{ border-color:var(--ink); color:var(--ink); } .gsi-skin-minimal-luxury .gsi-bar-reserve{ background:var(--ink); border-color:var(--ink); color:var(--on-ink); } .gsi-skin-minimal-luxury .gsi-bar-reserve:hover{ background:var(--acc-d); border-color:var(--acc-d); } /* ══════════════════════════════════════════════════════════════════════════ The interiors, against minimal-luxury-v3.html The cover matched but the page under it did not: the shared blocks carry 01 — Golden Safari's shape - a narrow rail, a small sticky photograph, a 26px numeral - and this design is built the other way round, on big alternating halves with the day number set enormous in italic. None of that needs different markup, only different rules against the same hooks. ══════════════════════════════════════════════════════════════════════════ */ /* ── the day-by-day ──────────────────────────────────────────────────────── .day in the source: two equal columns, the photograph swapping sides each day, the numeral clamp(80px,12vw,160px) in accent italic over a 10px letter-spaced eyebrow. The rail and its dots belong to the other design. */ .gsi-skin-minimal-luxury .itin.itin-dark{ background:var(--paper-2); border-top:1px solid var(--line); } .gsi-skin-minimal-luxury .itin .itin-h{ text-align:center; margin-bottom:clamp(60px,10vw,120px); } .gsi-skin-minimal-luxury .itin.itin-dark .itin-h h2{ font-family:var(--ff-d); font-style:italic; font-weight:300; font-size:clamp(40px,7vw,92px); line-height:.95; letter-spacing:-.02em; color:var(--ink); } .gsi-skin-minimal-luxury .itin .jd-list{ display:flex; flex-direction:column; gap:0; } /* Named areas rather than order, because the numeral has to sit directly above the text and the photograph has to span both rows. The numeral is inside .jd-rail in the markup, so the rail becomes display:contents and hands its two children straight to this grid; the dot belongs to the other design and goes. The block already prints "01", which is the source's own format. */ .gsi-skin-minimal-luxury .itin .jd{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr; grid-template-areas:"photo num" "photo body"; gap:0 clamp(40px,7vw,100px); align-items:center; margin-bottom:clamp(80px,12vw,160px); padding-bottom:0; border-bottom:0; } .gsi-skin-minimal-luxury .itin .jd-rail{ display:contents; } .gsi-skin-minimal-luxury .itin .jd-dot{ display:none; } .gsi-skin-minimal-luxury .itin .jd-rail::after{ display:none; } .gsi-skin-minimal-luxury .itin .jd-num{ grid-area:num; align-self:end; } .gsi-skin-minimal-luxury .itin .jd-photo{ grid-area:photo; } .gsi-skin-minimal-luxury .itin .jd-body{ grid-area:body; } /* the photograph changes sides on every second day, as in the source */ .gsi-skin-minimal-luxury .itin .jd:nth-of-type(even){ grid-template-areas:"num photo" "body photo"; } .gsi-skin-minimal-luxury .itin .jd-photo{ position:relative; top:0; height:auto; aspect-ratio:4/5; border-radius:0; overflow:hidden; background:var(--paper-2); } .gsi-skin-minimal-luxury .itin .jd-photo img{ width:100%; height:100%; object-fit:cover; filter:contrast(.96) saturate(.92); } .gsi-skin-minimal-luxury .itin .jd-photo::after{ display:none; } .gsi-skin-minimal-luxury .itin .jd-coords{ left:0; right:0; bottom:0; padding:24px; border-radius:0; font-family:var(--ff-b); font-size:10px; font-weight:500; letter-spacing:.32em; text-transform:uppercase; color:var(--on-ink); background:linear-gradient(to top,rgba(var(--ink-rgb),.7),transparent); backdrop-filter:none; } .gsi-skin-minimal-luxury .itin .jd-body{ padding:30px 0; } /* the numeral is the signature of this section */ .gsi-skin-minimal-luxury .itin .jd-num{ margin:0 0 -8px; font-family:var(--ff-d); font-style:italic; font-weight:300; font-size:clamp(80px,12vw,160px); line-height:.82; letter-spacing:-.04em; color:var(--acc); opacity:.95; } .gsi-skin-minimal-luxury .itin .jd-daylabel{ font-family:var(--ff-b); font-size:10px; font-weight:500; line-height:1.65; letter-spacing:.36em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px; } .gsi-skin-minimal-luxury .itin .jd-title{ font-family:var(--ff-d); font-style:italic; font-weight:400; font-size:clamp(30px,3.5vw,44px); line-height:1.05; letter-spacing:-.01em; color:var(--ink); margin-bottom:22px; } .gsi-skin-minimal-luxury .itin .jd-desc{ font-size:15px; line-height:1.85; color:var(--ink-2); } .gsi-skin-minimal-luxury .itin .jd-meta{ display:flex; gap:32px; margin:0 0 26px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:11px; } .gsi-skin-minimal-luxury .itin .jd-meta-i{ display:flex; flex-direction:column; gap:4px; } .gsi-skin-minimal-luxury .itin .jd-meta-night{ margin-left:0; text-align:left; } .gsi-skin-minimal-luxury .itin .jd-meta-l{ font-family:var(--ff-b); font-size:9px; font-weight:500; line-height:1.65; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-faint); } .gsi-skin-minimal-luxury .itin .jd-meta-v{ font-family:var(--ff-d); font-style:italic; font-weight:400; font-size:14px; line-height:1.65; color:var(--ink); } .gsi-skin-minimal-luxury .itin .jd-meals{ border-left:0; border-top:1px solid var(--line); background:transparent; border-radius:0; padding:16px 0 0; margin-top:20px; } @media(max-width:860px){ .gsi-skin-minimal-luxury .itin .jd, .gsi-skin-minimal-luxury .itin .jd:nth-of-type(even){ grid-template-columns:1fr; grid-template-rows:auto auto auto; grid-template-areas:"photo" "num" "body"; gap:20px 0; } .gsi-skin-minimal-luxury .itin .jd-num{ align-self:start; } } /* ── the overview: a drop cap, and the facts as a sticky column ──────────── */ /* One column by default. The source's overview is 1fr / 1.6fr, but the facts panel that would fill the narrow side only renders when the itinerary has that data - and with a single child the body was landing in the 1fr column and reading at half the width it should. So the second column appears only when there is something to put in it. */ .gsi-skin-minimal-luxury .ov-grid{ display:grid; grid-template-columns:1fr; gap:clamp(40px,8vw,120px); align-items:start; } .gsi-skin-minimal-luxury .ov-grid:has(.ov-facts){ grid-template-columns:1fr 1.6fr; } .gsi-skin-minimal-luxury .ov-facts{ order:1; position:sticky; top:60px; } .gsi-skin-minimal-luxury .ov-body{ order:2; font-size:16px; line-height:1.85; color:var(--ink-2); } .gsi-skin-minimal-luxury .ov-body p{ margin-bottom:1.4em; } .gsi-skin-minimal-luxury .ov-body p:first-of-type::first-letter{ font-family:var(--ff-d); font-style:italic; font-weight:400; font-size:5.2em; line-height:.78; float:left; padding:.1em .16em 0 0; color:var(--acc); } .gsi-skin-minimal-luxury .ov-fig{ margin-top:40px; } .gsi-skin-minimal-luxury .ov-figph{ aspect-ratio:3/2; background-size:cover; background-position:center; } .gsi-skin-minimal-luxury .ov-facts-hd{ font-family:var(--ff-d); font-style:italic; font-weight:400; font-size:clamp(26px,3vw,38px); line-height:1.05; color:var(--ink); border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:24px; } @media(max-width:860px){ .gsi-skin-minimal-luxury .ov-grid{ grid-template-columns:1fr; } .gsi-skin-minimal-luxury .ov-facts{ position:static; order:2; } .gsi-skin-minimal-luxury .ov-body{ order:1; } } /* ══════════════════════════════════════════════════════════════════════════ THE REMAINING SECTIONS Everything below is the same exercise as the cover and the day-by-day above: the treatment minimal-luxury-v3.html gives a section, applied to the class names the shared partials actually emit. The source's markup is not the plugin's and never will be - a design here is a stylesheet - so each part names the source component it is drawn from and what had to change to land it on the block we have. The single rule the whole file obeys: no fill, no shadow, no radius. A hairline does the separating and the display face does the emphasis. ══════════════════════════════════════════════════════════════════════════ */ /* ── the facts strip (source: .contents) ────────────────────────────────── The source opens with a contents table on the deeper ivory. The plugin's nearest block is the highlights strip, which carries the same job - the facts you check before reading - so it takes the same ground and the same ruled-row treatment instead of the base stylesheet's cards. */ .gsi-skin-minimal-luxury .gsi-hl-list{ max-width:var(--measure); margin-inline:auto; display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(40px,6vw,90px); } .gsi-skin-minimal-luxury .k5-fact{ display:grid; grid-template-columns:20px 1fr auto; gap:16px; align-items:baseline; padding:18px 0; margin:0; background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; } .gsi-skin-minimal-luxury .k5-fact .k{ font-family:var(--ff-b); font-size:10px; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-faint); } .gsi-skin-minimal-luxury .k5-fact .v{ font-family:var(--ff-d); font-style:italic; font-weight:400; font-size:17px; color:var(--ink); text-align:right; letter-spacing:-.01em; } .gsi-skin-minimal-luxury .k5-fact-i{ opacity:.5; filter:grayscale(1); } /* ── the route (source: .route) ─────────────────────────────────────────── A single wide plate with a caption under it, and the stops set as one ruled strip rather than a sidebar list. The source's map is desaturated on purpose - the plate is a drawing, not a photograph - so the same contrast/saturate pair is applied to the tiles here. */ .gsi-skin-minimal-luxury .dg.dg-sidebar{ display:block; max-width:var(--measure); margin-inline:auto; } .gsi-skin-minimal-luxury .mw{ height:520px; border:1px solid var(--line); background:var(--paper-2); border-radius:0; box-shadow:none; filter:contrast(.96) saturate(.85); } .gsi-skin-minimal-luxury .mw .leaflet-tile{ filter:grayscale(.6) contrast(.95); } /* the stop list becomes the source's .route-strip: one ruled row, centred */ .gsi-skin-minimal-luxury .dhl{ display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin:50px auto 0; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); list-style:none; max-width:var(--measure); } .gsi-skin-minimal-luxury .hl-row{ display:flex; align-items:baseline; gap:10px; padding:0 18px; position:relative; background:transparent; border:0; margin:0; } .gsi-skin-minimal-luxury .hl-row:not(:last-child)::after{ content:'\2192'; position:absolute; right:-8px; top:50%; transform:translateY(-50%); font-family:var(--ff-d); font-style:italic; color:var(--ink-faint); font-size:14px; } .gsi-skin-minimal-luxury .hl-d, .gsi-skin-minimal-luxury .hl-t{ font-family:var(--ff-d); font-style:italic; font-weight:400; font-size:16px; letter-spacing:0; background:transparent; padding:0; border:0; } .gsi-skin-minimal-luxury .hl-d{ color:var(--acc-d); font-variant-numeric:tabular-nums; } .gsi-skin-minimal-luxury .hl-t{ color:var(--ink); } /* ── where you'll sleep (source: .lodges / .lodge-card) ─────────────────── The source is a row of tall photographs with the night, the name and the place set under each. The plugin's lodges block is a button list with a thumbnail, so the thumbnail is grown into the source's 4:5 plate and the button loses every trace of being a button. Every selector here carries .gsi-block--lodges as well as the skin class. Without it the block's own rules win: ".gsi-block--lodges .ac-item.has-th" sets grid-template-columns:52px 1fr 16px and ".ac-item.has-th .ac-th" pins the thumbnail to 52x52, both at three classes against this file's two. The first version of this part looked correct in the stylesheet and changed nothing on the page - the lodge rows stayed 92px tall with a postage stamp beside them. Specificity, not the rules, was the bug. */ .gsi-skin-minimal-luxury .gsi-block--lodges .ac-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(16px,2vw,28px) clamp(16px,2vw,28px); align-items:start; max-width:var(--measure); margin-inline:auto; margin-bottom:0; } .gsi-skin-minimal-luxury .gsi-block--lodges .ac-col{ display:contents; background:transparent; border:0; padding:0; box-shadow:none; } .gsi-skin-minimal-luxury .gsi-block--lodges .ac-h{ grid-column:1/-1; font-family:var(--ff-b); font-size:10px; font-weight:500; letter-spacing:.36em; text-transform:uppercase; color:var(--acc-d); margin:34px 0 6px; padding-bottom:14px; border-bottom:1px solid var(--line); } .gsi-skin-minimal-luxury .gsi-block--lodges .ac-grid > .ac-h:first-child{ margin-top:0; } .gsi-skin-minimal-luxury .gsi-block--lodges .ac-item, .gsi-skin-minimal-luxury .gsi-block--lodges .ac-item.has-th{ display:flex; flex-direction:column; gap:0; width:100%; text-align:left; background:transparent; border:0; border-radius:0; box-shadow:none; padding:0; margin:0; cursor:pointer; font-family:var(--ff-b); color:var(--ink); grid-template-columns:none; } .gsi-skin-minimal-luxury .gsi-block--lodges .ac-item:hover{ padding-left:0; } .gsi-skin-minimal-luxury .gsi-block--lodges .ac-item.has-th .ac-th{ display:block; width:100%; height:auto; aspect-ratio:4/5; overflow:hidden; margin-bottom:18px; border-radius:0; background:transparent; } .gsi-skin-minimal-luxury .gsi-block--lodges .ac-item.has-th .ac-th img{ width:100%; height:100%; object-fit:cover; border-radius:0; filter:contrast(.96) saturate(.92); transition:transform 1s cubic-bezier(.22,1,.36,1); } .gsi-skin-minimal-luxury .gsi-block--lodges .ac-item.has-th:hover .ac-th img{ transform:scale(1.04); } /* the night label above the name, and the name in the display italic */ .gsi-skin-minimal-luxury .gsi-block--lodges .ac-item .ac-k{ grid-column:auto; display:block; font-family:var(--ff-b); font-size:9px; font-weight:500; line-height:1.65; letter-spacing:.36em; text-transform:uppercase; color:var(--acc-d); margin-bottom:8px; } .gsi-skin-minimal-luxury .gsi-block--lodges .ac-item b{ font-family:var(--ff-d); font-style:italic; font-weight:400; font-size:clamp(17px,1.5vw,20px); line-height:1.15; letter-spacing:-.01em; color:var(--ink); margin-top:0; } .gsi-skin-minimal-luxury .gsi-block--lodges .ac-item:hover b{ color:var(--acc-d); } /* the chevron the button carries is a control, and this design has none */ .gsi-skin-minimal-luxury .gsi-block--lodges .ac-go{ display:none; } /* ── the add-ons (source: .addons / .addon-card) ────────────────────────── The base stylesheet lays these out as photographs with the text burned into the bottom of the image. The source does the opposite - plate above, text below on the paper - which is the whole difference between a card and a plate, so the overlay is unwound: the caption box comes out of the image, the scrim is dropped, and the price goes under a hairline. */ .gsi-skin-minimal-luxury .bey-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(16px,2vw,28px); max-width:var(--measure); margin-inline:auto; } .gsi-skin-minimal-luxury .bey-grid > .bey-card:first-child{ grid-row:auto; aspect-ratio:auto; } .gsi-skin-minimal-luxury .bey-card{ display:flex; flex-direction:column; position:static; aspect-ratio:auto; overflow:visible; border-radius:0; box-shadow:none; background:transparent; opacity:1; transform:none; animation:none; } .gsi-skin-minimal-luxury .bey-card img{ position:static; width:100%; aspect-ratio:4/5; object-fit:cover; margin-bottom:18px; border-radius:0; transform:none; filter:contrast(.96) saturate(.92); } .gsi-skin-minimal-luxury .bey-ov{ display:none; } .gsi-skin-minimal-luxury .bey-bd{ position:static; padding:0; color:var(--ink); z-index:auto; display:flex; flex-direction:column; flex:1; } .gsi-skin-minimal-luxury .bey-bd::before{ content:none; } .gsi-skin-minimal-luxury .bey-when{ font-family:var(--ff-b); font-size:9px; font-weight:500; letter-spacing:.36em; text-transform:uppercase; color:var(--acc-d); margin-bottom:8px; } .gsi-skin-minimal-luxury .bey-title{ font-family:var(--ff-d); font-style:italic; font-weight:400; font-size:clamp(17px,1.5vw,20px); line-height:1.15; letter-spacing:-.01em; color:var(--ink); margin:0 0 10px; } .gsi-skin-minimal-luxury .bey-title em{ color:var(--acc-d); } .gsi-skin-minimal-luxury .bey-desc{ max-height:none; opacity:1; overflow:visible; margin:0 0 16px; font-size:13px; line-height:1.7; color:var(--ink-2); max-width:none; } /* .bey-pre carries the price in this block, so it takes the source's .addon-price treatment: the display face, above a hairline, at the foot */ .gsi-skin-minimal-luxury .bey-pre{ font-family:var(--ff-d); font-style:italic; font-weight:400; font-size:16px; letter-spacing:0; text-transform:none; color:var(--acc-d); margin:auto 0 0; padding-top:14px; border-top:1px solid var(--line); order:9; } /* an add-on with no photograph must not collapse to a line of text */ .gsi-skin-minimal-luxury .bey-card.bey-noimg{ padding-top:26px; border-top:1px solid var(--line); } /* ── where the safari takes you (source: .ground) ───────────────────────── Put back on the deeper ivory, per the note on the dark bands above. The base stylesheet burns the park name into the photograph; the source sets it under a 3:2 plate, so the veil goes and the caption comes out. */ .gsi-skin-minimal-luxury .gsi-block--parks h2, .gsi-skin-minimal-luxury .gsi-block--parks h3, .gsi-skin-minimal-luxury .gsi-block--parks h4{ color:var(--ink); } .gsi-skin-minimal-luxury .gsi-block--parks p, .gsi-skin-minimal-luxury .gsi-block--parks .sec-p{ color:var(--ink-2); } .gsi-skin-minimal-luxury .gsi-block--parks .sl{ color:var(--acc-d); } /* Three tracks, as the source sets them - not auto-fit. auto-fit sizes the row from how many parks an itinerary happens to have, so a four-park trip drew four narrower plates and a two-park trip drew two wide ones; the source's row is three whatever is in it, and wraps to a second row of three past that. The plate's proportion is the constant here, not the number of them. */ .gsi-skin-minimal-luxury .wh-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,56px); max-width:var(--measure); margin-inline:auto; } /* 01 - Golden Safari steps its park cards down the page (nth-child 2 and 3 carry 34px and 68px of top margin). That staircase is that design's idea; the source's ground cards sit on one line, and with two parks the step simply read as a card that had slipped. */ .gsi-skin-minimal-luxury .wh-grid .wh-card:nth-child(2), .gsi-skin-minimal-luxury .wh-grid .wh-card:nth-child(3){ margin-top:0; } .gsi-skin-minimal-luxury .wh-card{ display:flex; flex-direction:column; position:static; background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible; aspect-ratio:auto; padding:0; } .gsi-skin-minimal-luxury .wh-ph{ position:static; width:100%; aspect-ratio:3/2; overflow:hidden; margin-bottom:20px; border-radius:0; } .gsi-skin-minimal-luxury .wh-ph img{ position:static; width:100%; height:100%; object-fit:cover; filter:contrast(.96) saturate(.92); transition:transform 1s cubic-bezier(.22,1,.36,1); } .gsi-skin-minimal-luxury .wh-card:hover .wh-ph img{ transform:scale(1.03); } .gsi-skin-minimal-luxury .wh-veil{ display:none; } .gsi-skin-minimal-luxury .wh-b{ position:static; padding:0; color:var(--ink); } .gsi-skin-minimal-luxury .wh-n{ display:block; font-family:var(--ff-b); font-size:9px; font-weight:500; letter-spacing:.36em; text-transform:uppercase; color:var(--acc-d); margin-bottom:10px; } .gsi-skin-minimal-luxury .wh-b h3{ font-family:var(--ff-d); font-style:italic; font-weight:400; font-size:clamp(22px,2vw,28px); line-height:1.1; letter-spacing:-.01em; color:var(--ink); margin:0 0 14px; } .gsi-skin-minimal-luxury .wh-b p{ font-size:14px; line-height:1.8; color:var(--ink-2); } /* the migration note under the parks (source: .migration) */ .gsi-skin-minimal-luxury .mig{ display:grid; grid-template-columns:1fr 1.5fr; gap:clamp(40px,8vw,100px); align-items:start; max-width:var(--measure); margin:clamp(60px,9vw,110px) auto 0; padding-top:clamp(50px,7vw,80px); border-top:1px solid var(--line); } .gsi-skin-minimal-luxury .mig-h{ font-family:var(--ff-d); font-style:italic; font-weight:400; font-size:clamp(26px,2.6vw,36px); line-height:1.1; letter-spacing:-.01em; color:var(--ink); margin:0 0 16px; } .gsi-skin-minimal-luxury .mig-b p{ font-size:16px; line-height:1.85; color:var(--ink-2); } /* the stat is a figure under a rule, not a bordered box */ .gsi-skin-minimal-luxury .mig-stat{ background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; padding:26px 0 0; margin-top:32px; text-align:left; box-shadow:none; } .gsi-skin-minimal-luxury .mig-v{ font-family:var(--ff-d); font-style:italic; font-weight:300; font-size:clamp(44px,5vw,64px); line-height:1; letter-spacing:-.02em; color:var(--acc); } .gsi-skin-minimal-luxury .mig-k{ font-family:var(--ff-b); font-size:10px; font-weight:500; line-height:1.65; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-faint); margin-top:10px; } /* ── the investment (source: .investment / .tier) ───────────────────────── The source's tiers are three columns divided by hairlines, closed top and bottom by a 2px rule and a 1px rule, with the figure set very large in the display italic. The plugin's block is the pricing-tier table, so the rule pair goes on the wrapper and the figures take the source's scale. */ .gsi-skin-minimal-luxury .pt-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:0; border-bottom:1px solid var(--line); margin-bottom:0; } .gsi-skin-minimal-luxury .pt-tab{ background:transparent; border:0; border-radius:0; box-shadow:none; padding:16px 26px; font-family:var(--ff-b); font-size:10px; font-weight:500; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-faint); cursor:pointer; transition:color .25s ease; } .gsi-skin-minimal-luxury .pt-tab:hover{ color:var(--acc-d); } .gsi-skin-minimal-luxury .pt-tab.on{ color:var(--ink); box-shadow:inset 0 -1px 0 var(--ink); } .gsi-skin-minimal-luxury .pt-block{ background:transparent; border:0; border-radius:0; box-shadow:none; padding:44px 0 0; max-width:var(--measure); margin-inline:auto; } .gsi-skin-minimal-luxury .pt-table{ border-top:2px solid var(--ink); border-bottom:1px solid var(--ink); } .gsi-skin-minimal-luxury .pt-table td.pt-lbl, .gsi-skin-minimal-luxury .pt-table th.pt-lbl, .gsi-skin-minimal-luxury .pt-lbl{ font-family:var(--ff-b); font-size:11px; font-weight:400; line-height:1.65; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); } /* The source sets a tier price at clamp(48px,6vw,74px), but it is pricing three tiers across the page and this block prices up to seven party sizes in the same width. At the source's scale the seventh column and its figure ran off the right edge of the page - "7 PERSO" and "$2" were the last things on the row. This is the largest the figure can be and still leave the whole matrix inside the measure. */ .gsi-skin-minimal-luxury .pz{ font-family:var(--ff-d); font-style:italic; font-weight:300; font-size:clamp(20px,2.3vw,34px); line-height:1; letter-spacing:-.02em; color:var(--acc); } /* and if an itinerary ever does overflow - more columns, a longer currency - the matrix scrolls rather than being clipped by the section */ .gsi-skin-minimal-luxury .pt-wrap{ overflow-x:auto; } .gsi-skin-minimal-luxury .pt-top, .gsi-skin-minimal-luxury .pt-supp, .gsi-skin-minimal-luxury .pt-rooms, .gsi-skin-minimal-luxury .pt-group{ background:transparent; border-radius:0; box-shadow:none; border-color:var(--line); } .gsi-skin-minimal-luxury .pt-note p{ font-size:13px; color:var(--ink-faint); } /* the tier grid that the same block draws on a wide window */ .gsi-skin-minimal-luxury .rt-card{ background:transparent; border:0; border-right:1px solid var(--line); border-radius:0; box-shadow:none; padding:40px 32px; opacity:1; transform:none; animation:none; } .gsi-skin-minimal-luxury .rt-card:last-child{ border-right:0; } .gsi-skin-minimal-luxury .rt-card:hover{ background:rgba(var(--acc-rgb),.05); transform:none; } .gsi-skin-minimal-luxury .rt-grid{ border-top:2px solid var(--ink); border-bottom:1px solid var(--ink); gap:0; } .gsi-skin-minimal-luxury .rt-size{ font-family:var(--ff-d); font-style:italic; font-weight:400; font-size:26px; color:var(--ink); letter-spacing:-.01em; } .gsi-skin-minimal-luxury .rt-size-u, .gsi-skin-minimal-luxury .rt-unit{ font-family:var(--ff-b); font-size:10px; font-weight:500; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-faint); } .gsi-skin-minimal-luxury .rt-label{ font-size:13px; color:var(--ink-2); } .gsi-skin-minimal-luxury .rt-price{ font-family:var(--ff-d); font-style:italic; font-weight:300; font-size:clamp(34px,4vw,54px); line-height:1; letter-spacing:-.02em; color:var(--acc-d); border-top:1px solid var(--line); padding-top:18px; } .gsi-skin-minimal-luxury .rt-flag{ background:var(--ink); color:var(--on-ink); border-radius:0; font-family:var(--ff-b); font-size:9px; font-weight:500; letter-spacing:.42em; padding:5px 18px 5px 22px; } /* ── what's included (source: .inclusions) ──────────────────────────────── Two columns of ruled lines, the included and the not. */ .gsi-skin-minimal-luxury .inc{ background:var(--paper); } .gsi-skin-minimal-luxury .ig{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,8vw,100px); max-width:var(--measure); margin-inline:auto; } .gsi-skin-minimal-luxury .ig > *{ background:transparent; border:0; border-radius:0; box-shadow:none; padding:0; } .gsi-skin-minimal-luxury .ii, .gsi-skin-minimal-luxury .iy, .gsi-skin-minimal-luxury .ig li{ list-style:none; padding:11px 0 11px 26px; position:relative; font-size:14px; line-height:1.6; color:var(--ink-2); border-bottom:1px solid var(--line); background:transparent; } .gsi-skin-minimal-luxury .ig li::before, .gsi-skin-minimal-luxury .ii::before{ content:''; position:absolute; left:0; top:20px; width:14px; height:1px; background:var(--acc); } .gsi-skin-minimal-luxury .ie-cta{ margin-top:56px; text-align:center; } /* ── the season and the flights (source: .season / .flights) ────────────── Two-up rows of ruled text; no card, no tint, no icon. */ .gsi-skin-minimal-luxury .bt-grid, .gsi-skin-minimal-luxury .fc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(30px,5vw,70px); max-width:var(--measure); margin-inline:auto; } .gsi-skin-minimal-luxury .bt-card, .gsi-skin-minimal-luxury .fc-card{ background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; padding:26px 0 0; } .gsi-skin-minimal-luxury .bt-card.bt-good, .gsi-skin-minimal-luxury .bt-card.bt-peak{ border-top-color:var(--line); } .gsi-skin-minimal-luxury .bt-card.bt-good{ border-top:2px solid var(--acc); } .gsi-skin-minimal-luxury .fc-kick{ font-family:var(--ff-b); font-size:9px; font-weight:500; letter-spacing:.36em; text-transform:uppercase; color:var(--acc-d); margin-bottom:10px; } .gsi-skin-minimal-luxury .bt-h, .gsi-skin-minimal-luxury .fc-airport{ font-family:var(--ff-d); font-style:italic; font-weight:400; font-size:clamp(22px,2.2vw,30px); line-height:1.1; letter-spacing:-.01em; color:var(--ink); margin:0 0 14px; } .gsi-skin-minimal-luxury .bt-d, .gsi-skin-minimal-luxury .fc-desc{ font-size:15px; line-height:1.85; color:var(--ink-2); } /* ── the extras and the questions (source: .extra-item / .faq-item) ─────── The same component in the source, and the same one in the plugin: an accordion. The base stylesheet gives it a card with a border, a radius and a shadow that lifts on hover; the source gives it a ruled row that indents 14px under the cursor and turns its + into a x. */ .gsi-skin-minimal-luxury .acc{ max-width:900px; margin-inline:auto; } .gsi-skin-minimal-luxury .acc-i{ background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; margin:0; overflow:hidden; } .gsi-skin-minimal-luxury .acc-i:first-child{ border-top:1px solid var(--line); } .gsi-skin-minimal-luxury .acc-i:hover, .gsi-skin-minimal-luxury .acc-i.open{ border-color:var(--line); box-shadow:none; } /* .acc-q is a