.elementor-78 .elementor-element.elementor-element-8e54460{--display:flex;}.elementor-78 .elementor-element.elementor-element-ff88233{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-78 .elementor-element.elementor-element-5221430{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-78 .elementor-element.elementor-element-3a87978{--display:flex;}.elementor-78 .elementor-element.elementor-element-163e9b6{--display:flex;}.elementor-78 .elementor-element.elementor-element-0bf2fd8{--display:flex;}.elementor-78 .elementor-element.elementor-element-bb36a72{--display:flex;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-78 .elementor-element.elementor-element-a2048f9 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(0px/2);}.elementor-78 .elementor-element.elementor-element-a2048f9 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(0px/2);}.elementor-78 .elementor-element.elementor-element-a2048f9 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(0px/2);}.elementor-78 .elementor-element.elementor-element-a2048f9 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-0px/2);}.elementor-78 .elementor-element.elementor-element-a2048f9 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-0px/2);}.elementor-78 .elementor-element.elementor-element-a2048f9 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-78 .elementor-element.elementor-element-a2048f9 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-78 .elementor-element.elementor-element-a2048f9{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-78 .elementor-element.elementor-element-a2048f9 .elementor-icon-list-text{transition:color 0.3s;}.elementor-78 .elementor-element.elementor-element-ebf698e{--display:flex;}.elementor-78 .elementor-element.elementor-element-be10e08{--display:flex;}.elementor-widget-button .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );background-color:var( --e-global-color-accent );}.elementor-78 .elementor-element.elementor-element-324373f .elementor-button{padding:0px 0px 0px 0px;}.elementor-78 .elementor-element.elementor-element-b0f6229 .elementor-button{padding:0px 0px 0px 0px;}.elementor-78 .elementor-element.elementor-element-117aeaa{--display:flex;}.elementor-78 .elementor-element.elementor-element-23a440e{--display:flex;}.elementor-78 .elementor-element.elementor-element-d3f5b8c{--display:flex;}.elementor-78 .elementor-element.elementor-element-bf1d835 .elementor-button{padding:0px 0px 0px 0px;}.elementor-78 .elementor-element.elementor-element-9c0f810 .elementor-button{padding:0px 0px 0px 0px;}.elementor-78 .elementor-element.elementor-element-29e919b{--display:flex;}.elementor-78 .elementor-element.elementor-element-4b03bee{--display:flex;}.elementor-78 .elementor-element.elementor-element-061b17d .elementor-button{padding:0px 0px 0px 0px;}.elementor-78 .elementor-element.elementor-element-6ffab5e .elementor-button{padding:0px 0px 0px 0px;}.elementor-78 .elementor-element.elementor-element-efaa6c2{--display:flex;}.elementor-78 .elementor-element.elementor-element-ab12f6b{--display:flex;}.elementor-78 .elementor-element.elementor-element-c37f4b4{--display:flex;}.elementor-78 .elementor-element.elementor-element-306e70a .elementor-button{padding:0px 0px 0px 0px;}.elementor-78 .elementor-element.elementor-element-803cc74 .elementor-button{padding:0px 0px 0px 0px;}.elementor-78 .elementor-element.elementor-element-c521150{--display:flex;}.elementor-78 .elementor-element.elementor-element-c5be269{--display:flex;}.elementor-78 .elementor-element.elementor-element-eb957b9{--display:flex;}.elementor-78 .elementor-element.elementor-element-d4e4c89{--display:flex;}.elementor-78 .elementor-element.elementor-element-4c79aba{--display:flex;}.elementor-78 .elementor-element.elementor-element-63a2512{--display:flex;}.elementor-78 .elementor-element.elementor-element-6965085{--display:flex;}.elementor-78 .elementor-element.elementor-element-85f643f{--display:flex;}.elementor-78 .elementor-element.elementor-element-6f821dd{--display:flex;}.elementor-78 .elementor-element.elementor-element-f9519e7{--display:flex;}.elementor-78 .elementor-element.elementor-element-fc270e5{--display:flex;}.elementor-78 .elementor-element.elementor-element-9d4e460{--display:flex;}.elementor-78 .elementor-element.elementor-element-05fd779{--display:flex;}.elementor-78 .elementor-element.elementor-element-4632cc5{--display:flex;}.elementor-78 .elementor-element.elementor-element-967cbef{--display:flex;}.elementor-78 .elementor-element.elementor-element-e31964c{--display:flex;}.elementor-78 .elementor-element.elementor-element-94e24a7{--display:flex;}.elementor-78 .elementor-element.elementor-element-080e094 .elementor-button{padding:0px 0px 0px 0px;}.elementor-78 .elementor-element.elementor-element-ef7858a{--display:flex;}.elementor-78 .elementor-element.elementor-element-0a00cbe .elementor-button{padding:0px 0px 0px 0px;}.elementor-78 .elementor-element.elementor-element-f98a8eb{--display:flex;}.elementor-78 .elementor-element.elementor-element-f98a8eb:not(.elementor-motion-effects-element-type-background), .elementor-78 .elementor-element.elementor-element-f98a8eb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#faf7f1;}.elementor-78 .elementor-element.elementor-element-6a7543e{--display:flex;}.elementor-78 .elementor-element.elementor-element-64b39ea{--display:flex;}.elementor-78 .elementor-element.elementor-element-729056a .elementor-button{padding:0px 0px 0px 0px;}.elementor-78 .elementor-element.elementor-element-1fb66b9 .elementor-button{padding:0px 0px 0px 0px;}.elementor-78 .elementor-element.elementor-element-f0e9274 .elementor-button{padding:0px 0px 0px 0px;}.elementor-78 .elementor-element.elementor-element-f6a15a5{--display:flex;}.elementor-78 .elementor-element.elementor-element-f6a15a5:not(.elementor-motion-effects-element-type-background), .elementor-78 .elementor-element.elementor-element-f6a15a5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1b150a;}.elementor-78 .elementor-element.elementor-element-9032b0e{--display:flex;}.elementor-78 .elementor-element.elementor-element-6cf584c{--display:flex;}.elementor-78 .elementor-element.elementor-element-a48938a .elementor-button{padding:0px 0px 0px 0px;}.elementor-78 .elementor-element.elementor-element-9c5b525 .elementor-button{padding:0px 0px 0px 0px;}.elementor-78 .elementor-element.elementor-element-3aec8d4{--display:flex;}.elementor-78 .elementor-element.elementor-element-5d9f5a3{--display:flex;}.elementor-78 .elementor-element.elementor-element-bef2b30{--display:flex;}.elementor-78 .elementor-element.elementor-element-2606a18{--display:flex;}.elementor-78 .elementor-element.elementor-element-9637b42{--display:flex;}.elementor-78 .elementor-element.elementor-element-ad98159{--display:flex;}.elementor-78 .elementor-element.elementor-element-c834c03{--display:flex;}.elementor-78 .elementor-element.elementor-element-d2428c2{--display:flex;}.elementor-78 .elementor-element.elementor-element-6a8b7e4{--display:flex;}.elementor-78 .elementor-element.elementor-element-b0ae57b{--display:flex;}.elementor-78 .elementor-element.elementor-element-419f119{--display:flex;}.elementor-78 .elementor-element.elementor-element-d2821bd{--display:flex;}.elementor-78 .elementor-element.elementor-element-068159c{--display:flex;}.elementor-78 .elementor-element.elementor-element-2cdbb53{--display:flex;}.elementor-78 .elementor-element.elementor-element-017d29b{--display:flex;}.elementor-78 .elementor-element.elementor-element-ed27ffd{--display:flex;}.elementor-78 .elementor-element.elementor-element-c8420e2{--display:flex;}.elementor-78 .elementor-element.elementor-element-5f99aa2{--display:flex;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-78 .elementor-element.elementor-element-d725e8b .elementor-field-group{padding-right:calc( 14px/2 );padding-left:calc( 14px/2 );margin-bottom:16px;}.elementor-78 .elementor-element.elementor-element-d725e8b .elementor-form-fields-wrapper{margin-left:calc( -14px/2 );margin-right:calc( -14px/2 );margin-bottom:-16px;}.elementor-78 .elementor-element.elementor-element-d725e8b .elementor-field-group.recaptcha_v3-bottomleft, .elementor-78 .elementor-element.elementor-element-d725e8b .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-78 .elementor-element.elementor-element-d725e8b .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-78 .elementor-element.elementor-element-d725e8b .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-78 .elementor-element.elementor-element-d725e8b .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-78 .elementor-element.elementor-element-d725e8b .elementor-field-group > label, .elementor-78 .elementor-element.elementor-element-d725e8b .elementor-field-subgroup label{color:#b89c6c;}.elementor-78 .elementor-element.elementor-element-d725e8b .elementor-mark-required .elementor-field-label:after{color:#b89c6c;}.elementor-78 .elementor-element.elementor-element-d725e8b .elementor-field-type-html{padding-bottom:0px;}.elementor-78 .elementor-element.elementor-element-d725e8b .elementor-field-group .elementor-field{color:#f4f2ef;}.elementor-78 .elementor-element.elementor-element-d725e8b .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:rgba(255, 255, 255, 0.04);border-color:rgba(184, 156, 108, 0.28);border-width:1px 1px 1px 1px;border-radius:3px 3px 3px 3px;}.elementor-78 .elementor-element.elementor-element-d725e8b .elementor-field-group .elementor-select-wrapper select{background-color:rgba(255, 255, 255, 0.04);border-color:rgba(184, 156, 108, 0.28);border-width:1px 1px 1px 1px;border-radius:3px 3px 3px 3px;}.elementor-78 .elementor-element.elementor-element-d725e8b .elementor-field-group .elementor-select-wrapper::before{color:rgba(184, 156, 108, 0.28);}.elementor-78 .elementor-element.elementor-element-d725e8b .elementor-button{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:2.4px;border-radius:2px 2px 2px 2px;}.elementor-78 .elementor-element.elementor-element-d725e8b .e-form__buttons__wrapper__button-next{background-color:#9a8358;color:#ffffff;}.elementor-78 .elementor-element.elementor-element-d725e8b .elementor-button[type="submit"]{background-color:#9a8358;color:#ffffff;}.elementor-78 .elementor-element.elementor-element-d725e8b .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-78 .elementor-element.elementor-element-d725e8b .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-78 .elementor-element.elementor-element-d725e8b .e-form__buttons__wrapper__button-next:hover{background-color:#b89c6c;color:#ffffff;}.elementor-78 .elementor-element.elementor-element-d725e8b .elementor-button[type="submit"]:hover{background-color:#b89c6c;color:#ffffff;}.elementor-78 .elementor-element.elementor-element-d725e8b .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-78 .elementor-element.elementor-element-d725e8b .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-78 .elementor-element.elementor-element-d725e8b{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-8e54460 *//* ============================================================================ READ ME FIRST ---------------------------------------------------------------------------- You do NOT need to touch this CSS for the everyday changes: - Section background colour -> select the section, Style > Background - Any heading's colour/size -> select the heading, Style tab - Swapping a photo -> click the image, choose a new one - Button label -> click the button, retype it - Article text -> click the heading or paragraph and edit - A link inside a paragraph -> select the words, use the link button This is a journal article. The year table is one Text Editor holding a plain (Elementor has no table widget); edit its cells in the Text tab of that widget, not the Visual tab, so the table markup survives. Only come in here to change something that applies across the whole page, and then change it in the PALETTE block below - not further down. Block order in this field is fixed. Do not append anything after the GLUE block except more glue. 1 READ ME FIRST you are here 2 ELEMENTOR RESET switches Elementor's layout defaults off, scoped 3 PALETTE every colour and font, one place 4 REFERENCE SHEET the page's own stylesheet, prefixed `body ` 5 GLUE maps Elementor's markup onto what the sheet expects ========================================================================== */ /* Font import hoisted from the source sheet. @import is only honoured before any rule, so it cannot stay where it was once the stylesheets are concatenated. */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap'); /* ============================================================================ 2. ELEMENTOR RESET - scoped with :where() so it adds zero specificity. The matches-any pseudo-class would instead take the weight of its heaviest argument, raising these to (0,2,1), and they would start beating the reference rules they exist to lose to. Use :where() only. ========================================================================== */ body { margin:0; padding:0; box-sizing:border-box; } body * { margin:0; padding:0; box-sizing:border-box; } body .e-con:where(.st-hero,.st-art-body,.st-sec,.tailor-form-section), body :where(.st-hero,.st-art-body,.st-sec,.tailor-form-section) .e-con, body :where(.st-hero,.st-art-body,.st-sec,.tailor-form-section) .e-con-inner { display:block !important; gap:0 !important; max-width:none !important; padding:0 !important; --content-width:none; /* Elementor's `.e-con.e-flex` sets `--flex-direction:column` and then reads it back. The sheet never declares a direction - it does not need to, a row is the CSS default - so it has nothing to win with, and every flex row on the page comes out stacked. Neutralising the variable restores the default while leaving any explicit `flex-direction` in the sheet free to apply. */ --flex-direction:row !important; --flex-wrap:nowrap !important; /* Elementor gives every container a full --width. As a block that is the same as auto, but the moment the parent is a flex row - the hero stats strip - each cell stretches instead of shrinking to its content. */ width:auto !important; --width:auto; } body :where(.st-hero,.st-art-body,.st-sec,.tailor-form-section) .elementor-widget { position:static; width:auto; /* `.elementor.elementor .e-con>.elementor-widget{max-width:100%}` sits at (0,3,0). Inert on a block in flow, but the source had none, and the guard re-asserts any max-width the sheet does set, with !important, after this. */ max-width:none !important; /* the kit sets --widgets-spacing:20px and Elementor reads it back as `gap` on every widget, which shows up wherever a widget is a flex or grid box of its own */ gap:0; } body :where(.st-hero,.st-art-body,.st-sec,.tailor-form-section) .elementor-widget-container { display:contents !important; } /* ========================================================================== 3. PALETTE - every colour and font. Change things here, not below. Tints must be written rgba(var(--x-rgb), .n) so they follow their colour. ======================================================================== */ body { --st-gold-rgb: 154, 131, 88; --st-ink-rgb: 27, 21, 10; --st-scrim: #0a140a; --st-scrim-rgb: 10, 20, 10; --st-white: #ffffff; --st-white-rgb: 255, 255, 255; --it-sans: var(--st-sans); --it-soft: var(--st-soft); } /* ========================================================================== 4. REFERENCE SHEET - the page CSS, every .elementor-78 .elementor-element.elementor-element-8e54460 prefixed `body `, pruned to the rules that can match this markup. ======================================================================== */ /* ═══════════════════════════════════════════════════════ PLACES OF AFRICA SAFARIS — index.css Pixel-faithful to Explora Journeys source code ═══════════════════════════════════════════════════════ */ /* ─── RESET ─────────────────────────────────────────── */ body *, body *::before, body *::after{ box-sizing: border-box; margin: 0; padding: 0; } html{ scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body img{ display: block; max-width: 100%; } body a{ text-decoration: none; color: inherit; } body button{ background: none; border: none; cursor: pointer; font-family: inherit; } /* ─── TOKENS ─────────────────────────────────────────── */ :root{ --sand: #f4f2ef; /* Explora exact bg */ --sand-mid: #EEEBE4; --ink: #1b150a; /* warm near-black, shared by all four stylesheets */ --ink-mid: #3d3022; --ink-soft: #6b5b4d; /* warm secondary text, shared by all four stylesheets */ --gold: #9A8358; /* Explora gold #9A8358 */ --navy: #1b150a; --white: #FFFFFF; --max: 1364px; --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Inter', Helvetica, Arial, sans-serif; } /* ─── BASE ─────────────────────────────────────────────── */ body{ background-color: var(--sand); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.6; overflow-x: hidden; } /* ═══════════════════════════════════════════════════════ TAILOR-MADE SAFARI FORM · Multi-step wizard ═══════════════════════════════════════════════════════ */ body .tailor-form-section{ margin-top: 100px; margin-bottom: 100px; display: grid; grid-template-columns: 420px 1fr; min-height: 780px; background: #f4f2ef; font-family: 'Inter', Helvetica, Arial, sans-serif; overflow: hidden; } /* ── Left image panel ──────────────────────────────────── */ body .tf-left{ position: relative; overflow: hidden; } body .tf-bg-img{ width: 100%; height: 100%; object-fit: cover; display: block; } body .tf-left-overlay{ position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--st-scrim-rgb),0.85) 0%, rgba(var(--st-scrim-rgb),0.4) 60%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; gap: 28px; } body .tf-trust{ display: flex; flex-direction: column; gap: 14px; } body .tf-trust-badge{ display: flex; align-items: center; gap: 10px; color: rgba(var(--st-white-rgb),0.92); font-size: 13px; font-weight: 400; letter-spacing: 0.3px; } body .tf-trust-badge svg{ color: #9a8358; flex-shrink: 0; } body .tf-quote{ border-left: 2px solid #9a8358; padding-left: 16px; color: rgba(var(--st-white-rgb),0.75); font-size: 13px; font-style: italic; line-height: 1.6; margin: 0; } body .tf-quote cite{ display: block; margin-top: 6px; font-style: normal; font-size: 11px; color: #9a8358; letter-spacing: 1px; } /* ── Right form panel ──────────────────────────────────── */ body .tf-right{ padding: 48px 56px; overflow-y: auto; max-height: 780px; display: flex; flex-direction: column; gap: 28px; } /* Header */ body .tf-eyebrow{ font-size: 10px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: #9a8358; margin: 0 0 10px; } body .tf-title{ font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 600; color: #1a1a1a; margin: 0 0 8px; line-height: 1.2; } body .tf-title em{ font-style: italic; color: #9a8358; } body .tf-subtitle{ font-size: 14px; color: #666; margin: 0; line-height: 1.5; } /* ── Step progress bar ─────────────────────────────────── */ body .tf-progress{ display: flex; align-items: center; gap: 0; } body .tf-step-dot{ display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: default; flex-shrink: 0; } body .tf-step-dot span{ width: 32px; height: 32px; border-radius: 50%; border: 2px solid #ddd; background: #fff; color: #aaa; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: all 0.3s; } body .tf-step-dot small{ font-size: 10px; color: #aaa; letter-spacing: 0.5px; white-space: nowrap; transition: color 0.3s; } body .tf-step-dot.active span{ background: #9a8358; border-color: #9a8358; color: #fff; } body .tf-step-dot.active small{ color: #9a8358; } body .tf-step-line{ flex: 1; height: 2px; background: #e0d8ce; margin: 0 6px; margin-bottom: 14px; transition: background 0.3s; } /* ── Panels ────────────────────────────────────────────── */ body .tf-panel{ display: none; } body .tf-panel.active{ display: block; animation: tfFadeIn 0.35s ease; } @keyframes tfFadeIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } body .tf-panel-title{ font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; color: #1a1a1a; margin: 0 0 6px; } body .tf-panel-hint{ font-size: 13px; color: #888; margin: 0 0 18px; } /* ── Card grid (radio selections) ─────────────────────── */ body .tf-card-grid, body .tf-budget-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; } body .tf-budget-grid{ grid-template-columns: repeat(3, 1fr); } body .tf-card input[type="radio"]{ position: absolute; opacity: 0; pointer-events: none; } body .tf-card{ position: relative; cursor: pointer; } body .tf-card-inner{ border: 1.5px solid #e0d8ce; border-radius: 8px; padding: 16px 12px; background: #fff; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } body .tf-card-icon{ font-size: 1.5rem; line-height: 1; } body .tf-card-inner strong{ font-size: 13px; font-weight: 600; color: #222; } body .tf-card-inner small{ font-size: 11px; color: #888; line-height: 1.4; } body .tf-card input:checked ~ .tf-card-inner{ border-color: #9a8358; background: #faf7f2; box-shadow: 0 0 0 3px rgba(var(--st-gold-rgb),0.12); } body .tf-card-inner:hover{ border-color: #9a8358; } /* ── Checkbox grid ─────────────────────────────────────── */ body .tf-checkbox-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; } body .tf-check{ display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid #e0d8ce; border-radius: 8px; background: #fff; cursor: pointer; font-size: 13px; color: #333; transition: border-color 0.2s, background 0.2s; } body .tf-check:hover{ border-color: #9a8358; background: #faf7f2; } body .tf-check input[type="checkbox"]{ accent-color: #9a8358; width: 16px; height: 16px; } body .tf-check input:checked ~ span{ color: #9a8358; font-weight: 500; } body .tf-check input:checked{ accent-color: #9a8358; } /* ── Form fields ───────────────────────────────────────── */ body .tf-field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } body .tf-field{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } body .tf-field label{ font-size: 12px; font-weight: 500; color: #555; letter-spacing: 0.3px; text-transform: uppercase; } body .tf-field input[type="text"], body .tf-field input[type="email"], body .tf-field input[type="tel"], body .tf-field input[type="date"], body .tf-field input[type="number"], body .tf-field select, body .tf-field textarea{ width: 100%; padding: 12px 14px; border: 1.5px solid #ddd; border-radius: 6px; font-size: 14px; color: #222; background: #fff; outline: none; transition: border-color 0.2s; font-family: inherit; box-sizing: border-box; } body .tf-field input:focus, body .tf-field select:focus, body .tf-field textarea:focus{ border-color: #9a8358; box-shadow: 0 0 0 3px rgba(var(--st-gold-rgb),0.1); } body .tf-field textarea{ resize: vertical; min-height: 88px; } body .req{ color: #c0392b; } /* ── Number controls ───────────────────────────────────── */ body .tf-number-row{ display: flex; align-items: center; gap: 8px; } body .tf-num-btn{ width: 36px; height: 36px; border: 1.5px solid #ddd; border-radius: 50%; background: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #555; transition: border-color 0.2s, color 0.2s; flex-shrink: 0; } body .tf-num-btn:hover{ border-color: #9a8358; color: #9a8358; } body .tf-num-input{ width: 56px !important; text-align: center; padding: 8px 4px !important; } body .tf-num-label{ font-size: 13px; color: #666; } /* ── Accommodation select grid ─────────────────────────── */ body .tf-select-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; } body .tf-select-option{ display: flex; align-items: center; gap: 8px; padding: 11px 14px; border: 1.5px solid #ddd; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.2s; } body .tf-select-option:hover{ border-color: #9a8358; background: #faf7f2; } body .tf-select-option input{ accent-color: #9a8358; } body .tf-select-option input:checked ~ span{ color: #9a8358; font-weight: 500; } /* ── Consent ───────────────────────────────────────────── */ body .tf-consent{ display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: #666; line-height: 1.5; cursor: pointer; margin-top: 8px; } body .tf-consent input{ accent-color: #9a8358; margin-top: 2px; flex-shrink: 0; } /* ── Navigation bar ────────────────────────────────────── */ body .tf-nav{ display: flex; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid #e8e2d9; margin-top: 12px; } body .tf-nav-right{ display: flex; align-items: center; gap: 16px; } body .tf-step-count{ font-size: 12px; color: #999; letter-spacing: 0.5px; } body .tf-btn-back{ background: none; border: none; font-size: 13px; color: #888; cursor: pointer; padding: 10px 0; transition: color 0.2s; font-family: inherit; } body .tf-btn-back:hover{ color: #333; } body .tf-btn-back:disabled{ opacity: 0.3; pointer-events: none; } body .tf-btn-next{ background: #1a1a1a; color: #fff; border: none; padding: 13px 28px; border-radius: 4px; font-size: 13px; font-weight: 500; letter-spacing: 0.5px; cursor: pointer; transition: background 0.2s; font-family: inherit; } body .tf-btn-next:hover{ background: #333; } body .tf-btn-submit{ background: #9a8358; color: #fff; border: none; padding: 13px 28px; border-radius: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; transition: background 0.2s, transform 0.1s; display: flex; align-items: center; gap: 8px; font-family: inherit; } body .tf-btn-submit:hover{ background: #6d5639; transform: translateY(-1px); } /* ── Success screen ────────────────────────────────────── */ body .tf-success{ text-align: center; padding: 60px 20px; animation: tfFadeIn 0.4s ease; } body .tf-success-icon{ width: 72px; height: 72px; border-radius: 50%; background: #9a8358; color: #fff; font-size: 32px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } body .tf-success h3{ font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; color: #1a1a1a; margin: 0 0 12px; } body .tf-success p{ font-size: 14px; color: #555; line-height: 1.6; margin: 0; } body .tf-whatsapp-cta{ display: inline-flex; align-items: center; gap: 8px; background: #25d366; color: #fff; padding: 12px 24px; border-radius: 4px; font-size: 14px; font-weight: 600; text-decoration: none; margin-top: 16px; transition: background 0.2s; } body .tf-whatsapp-cta:hover{ background: #1ebe5d; } /* ── Responsive ────────────────────────────────────────── */ @media (max-width: 1100px) { body .tailor-form-section{ grid-template-columns: 320px 1fr; } body .tf-right{ padding: 40px 40px; } body .tf-card-grid{ grid-template-columns: repeat(2,1fr); }} @media (max-width: 860px) { body .tailor-form-section{ grid-template-columns: 1fr; } body .tf-left{ height: 280px; } body .tf-right{ max-height: none; padding: 32px 24px; }} @media (max-width: 540px) { body .tf-card-grid, body .tf-budget-grid, body .tf-checkbox-grid{ grid-template-columns: 1fr; } body .tf-field-row, body .tf-select-grid{ grid-template-columns: 1fr; } body .tf-title{ font-size: 1.5rem; }} /* ── Icon refinements inside form cards/checks ─────── */ body .tf-card-icon{ display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(var(--st-gold-rgb),0.08); color: #9a8358; margin-bottom: 4px; flex-shrink: 0; } body .tf-card-icon svg{ display: block; } body .tf-check span{ display: flex; align-items: center; gap: 8px; } body .tf-check span svg{ color: #9a8358; flex-shrink: 0; } body .tf-select-option span{ display: flex; align-items: center; gap: 8px; } body .tf-select-option span svg{ color: #9a8358; flex-shrink: 0; } /* ── Dynamic child age boxes ───────────────────────────── */ body .tf-child-ages{ margin-top: 14px; animation: tfFadeIn 0.3s ease; } body .tf-child-ages-label{ display: block; font-size: 12px; font-weight: 500; color: #555; letter-spacing: 0.3px; text-transform: uppercase; margin-bottom: 10px; } body .tf-child-ages-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; } /* ═══════════════════════════════════════════════════════════ ANCHOR OFFSET — fixed header is 62px; stop sub-nav jumps from parking section headings underneath it (all pages) ═══════════════════════════════════════════════════════════ */ html{ scroll-padding-top: 84px; scroll-behavior: smooth; } /* the track holds the list twice, so -50% lands exactly on the repeat */ @keyframes ot-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ═══════════════════════════════════════════════════════════════════════ stories.css · THE JOURNAL · prefix .st- ═══════════════════════════════════════════════════════════════════════ The eighth layout language. Same brand as everything else — sand #f4f2ef, ink #1b150a, gold #9A8358, Cormorant Garamond. Built on the Prestige Collection Hotels snippet in /inspirations. Its one signature move is a HAIRLINE RULE that begins at the title and runs on across the full width of the card, through the photograph. Everything else is restraint: a large light serif over an image, set low and left, a two-line dek in small bold sans, and a small uppercase link with no arrow. What makes this a reading gallery rather than a product grid: the cards stagger, the images alternate portrait and square so no two rows scan the same, and every card carries the two things that decide whether somebody opens an article — what it is about, and how long it will take. .st-hero the featured story, full bleed .st-filters category chips .st-grid the staggered gallery .st-card one story .st-article the article template ═══════════════════════════════════════════════════════════════════════ */ body{ --st-sand: #f4f2ef; --st-paper: #faf7f1; --st-ink: #1b150a; --st-soft: #6b5b4d; --st-faint: #9a938a; --st-gold: #9a8358; --st-hair: rgba(var(--st-ink-rgb), .16); --st-hair2: rgba(var(--st-ink-rgb), .08); --st-serif: 'Cormorant Garamond', Georgia, serif; --st-sans: 'Inter', Helvetica, Arial, sans-serif; --st-ease: cubic-bezier(.16, 1, .3, 1); background: var(--st-sand); color: var(--st-ink); font-family: var(--st-sans); overflow-x: clip; } body ::selection{ background: var(--st-gold); color: #fff; } /* ── shared furniture ───────────────────────────────────────────────── */ body .st-wrap{ max-width: 1400px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); } body .st-wrap--read{ max-width: 760px; } body .st-sec{ padding: clamp(48px, 7vw, 104px) 0; } body .st-sec--pale{ background: var(--st-paper); border-block: 1px solid var(--st-hair2); } body .st-sec--ink{ background: var(--st-ink); color: #fff; } body .st-eyebrow{ font-size: 10px; font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase; color: var(--st-gold); margin: 0 0 15px; } body .st-h{ font-family: var(--st-serif); font-size: clamp(30px, 4.4vw, 56px); font-weight: 300; line-height: 1.08; letter-spacing: -.015em; margin: 0; text-wrap: balance; } body .st-h em{ font-style: italic; color: var(--st-gold); } body .st-lede{ font-size: clamp(15px, 1.3vw, 17px); line-height: 1.75; color: var(--st-soft); max-width: 62ch; margin: 18px 0 0; } /* the reference's link: small, bold, uppercase, no arrow */ body .st-more{ display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; text-decoration: none; color: var(--st-ink); padding-bottom: 6px; border-bottom: 1px solid currentColor; transition: color .3s; } body .st-more:hover{ color: var(--st-gold); } body .st-btn{ display: inline-flex; align-items: center; justify-content: center; padding: 15px 34px; border: 1px solid var(--st-gold); background: var(--st-gold); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .3s, color .3s; } body .st-btn:hover{ background: transparent; color: var(--st-gold); } body .st-btn--ghost{ background: transparent; color: var(--st-ink); border-color: var(--st-hair); } body .st-btn--ghost:hover{ background: var(--st-ink); color: #fff; border-color: var(--st-ink); } /* the signature: a hairline that starts at the title and runs on */ body .st-rule{ display: block; height: 1px; background: currentColor; opacity: .45; margin: 16px 0 0; } /* ── the featured story ─────────────────────────────────────────────── */ body .st-hero{ position: relative; min-height: min(84svh, 800px); display: grid; align-content: end; padding: clamp(120px, 20vh, 220px) 0 clamp(34px, 5vw, 66px); overflow: hidden; } body .st-hero-bg{ position: absolute; inset: 0; z-index: 0; } body .st-hero-bg img{ width: 100%; height: 100%; object-fit: cover; display: block; } body .st-hero-bg::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--st-ink-rgb),.92) 0%, rgba(var(--st-ink-rgb),.44) 44%, rgba(var(--st-ink-rgb),.18) 72%, rgba(var(--st-ink-rgb),.4) 100%); } /* grid child + max-width + auto margins = sized to max-content, not stretched. width:100% pins it back to the wrap. */ body .st-hero .st-wrap{ position: relative; z-index: 1; color: #fff; width: 100%; } body .st-hero-meta{ font-size: 10px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: rgba(var(--st-white-rgb),.66); margin: 0 0 18px; } body .st-hero-meta span{ margin: 0 10px; opacity: .55; } body .st-hero-title{ font-family: var(--st-serif); font-size: clamp(36px, 6.4vw, 88px); font-weight: 300; line-height: 1.02; letter-spacing: -.02em; color: #fff; margin: 0; max-width: 20ch; } body .st-hero-dek{ font-size: clamp(14px, 1.15vw, 16px); font-weight: 500; line-height: 1.65; color: rgba(var(--st-white-rgb),.9); max-width: 48ch; margin: 22px 0 0; } body .st-hero .st-more{ margin-top: 26px; } body .st-hero .st-rule{ color: #fff; margin-top: 22px; } body .st-card{ text-decoration: none; color: inherit; display: block; } /* One ratio, 4:3, matching the house .ej-card and every other card on the site. An earlier version alternated portrait and square to stop the rows scanning the same; it made the grid read as ragged rather than composed, so the variety now comes from the writing, not the geometry. */ body .st-card-img{ overflow: hidden; background: var(--st-hair2); } body .st-card-img img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 1.2s var(--st-ease); } body .st-card:hover .st-card-img img{ transform: scale(1.045); } body .st-card-meta{ display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; font-size: 9.5px; font-weight: 600; letter-spacing: 1.7px; text-transform: uppercase; color: var(--st-gold); } body .st-card-meta i{ font-style: normal; color: var(--st-faint); } body .st-card-title{ font-family: var(--st-serif); font-size: clamp(21px, 1.9vw, 27px); font-weight: 400; line-height: 1.24; margin: 0; color: var(--st-ink); transition: color .25s; } body .st-card:hover .st-card-title{ color: var(--st-gold); } /* the rule draws itself out from under the title on hover */ body .st-card-rule{ display: block; height: 1px; background: var(--st-ink); opacity: .18; margin: 14px 0 0; width: 44px; transition: width .7s var(--st-ease), background .3s, opacity .3s; } body .st-card:hover .st-card-rule{ width: 100%; background: var(--st-gold); opacity: 1; } /* ── the article ────────────────────────────────────────────────────── */ body .st-art-body{ padding: clamp(40px, 6vw, 84px) 0 clamp(30px, 4vw, 56px); } body .st-art-sec{ margin-bottom: clamp(30px, 4vw, 50px); } body .st-art-sec h2{ font-family: var(--st-serif); font-size: clamp(24px, 2.4vw, 34px); font-weight: 400; line-height: 1.24; margin: 0 0 18px; color: var(--st-ink); } body .st-art-sec p{ font-size: 16px; line-height: 1.95; color: var(--st-ink); margin: 0 0 20px; } body .st-art-figure{ margin: clamp(30px, 4vw, 52px) 0; } body .st-art-figure figcaption{ font-size: 11.5px; color: var(--st-faint); margin-top: 10px; line-height: 1.6; } /* written articles — the opening, links, the photograph, the year table, the journeys block and the date line */ body .st-art-lede{ font-family: var(--st-serif); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.6; color: var(--st-ink); margin: 0 0 22px; } body .st-art-lede:last-of-type{ margin-bottom: clamp(30px, 4vw, 48px); } /* in Elementor each

becomes a Text Editor widget with no

inside, so the widget .elementor-78 .elementor-element.elementor-element-8e54460 is listed too; it matches nothing in the static page */ body .st-art-sec p a, body .st-art-lede a, body .st-art-table a, body .st-faq-item p a{ color: var(--st-ink); text-decoration: underline; text-decoration-color: var(--st-gold); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s var(--st-ease); } body .st-art-sec p a:hover, body .st-art-lede a:hover, body .st-art-table a:hover, body .st-faq-item p a:hover{ color: var(--st-gold); } body .st-art-figure img{ display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } body .st-art-table{ margin: 0 0 clamp(34px, 4.4vw, 56px); overflow-x: auto; } body .st-art-table table{ width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; } body .st-art-table caption{ caption-side: top; text-align: left; font-size: 10px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: var(--st-gold); padding: 0 0 12px; } body .st-art-table th, body .st-art-table td{ text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--st-hair2); } body .st-art-table thead th{ font-size: 10px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--st-soft); border-bottom-color: var(--st-hair); } body .st-art-table tbody th{ font-weight: 600; white-space: nowrap; color: var(--st-ink); } body .st-art-table td{ color: var(--st-soft); } body .st-art-journeys{ border-top: 1px solid var(--st-hair); padding-top: clamp(30px, 4vw, 50px); margin: clamp(10px, 2vw, 24px) 0 clamp(30px, 4vw, 46px); } body .st-art-journeys .st-related{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: clamp(18px, 2vw, 28px); } body .st-art-updated{ font-size: 12px; color: var(--st-faint); margin: 0 0 clamp(22px, 3vw, 32px); } /* the short answer — the two sentences a search result can quote */ body .st-art-answer{ background: var(--st-paper); border-left: 2px solid var(--st-gold); padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 30px); margin: 0 0 clamp(26px, 3.4vw, 40px); } body .st-art-answer-h{ font-size: 10px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: var(--st-gold); margin: 0 0 10px; } body .st-art-answer-p{ font-size: 16px; line-height: 1.8; color: var(--st-ink); margin: 0; } /* questions people ask — all answers visible */ body .st-art-faq{ border-top: 1px solid var(--st-hair); padding-top: clamp(30px, 4vw, 50px); margin: clamp(10px, 2vw, 24px) 0 clamp(30px, 4vw, 46px); } body .st-art-faq h2{ font-family: var(--st-serif); font-size: clamp(24px, 2.4vw, 34px); font-weight: 400; line-height: 1.24; margin: 0 0 clamp(18px, 2.4vw, 28px); color: var(--st-ink); } body .st-faq-item{ padding: clamp(16px, 2vw, 22px) 0; border-bottom: 1px solid var(--st-hair2); } body .st-faq-item h3{ font-family: var(--st-sans); font-size: 16px; font-weight: 600; line-height: 1.45; margin: 0 0 8px; color: var(--st-ink); } body .st-faq-item p{ font-size: 15px; line-height: 1.85; color: var(--st-soft); margin: 0; } /* "In this article" — the jump list. Anchors land clear of the fixed header (offer ticker 32px + header 62px on the live site). */ body .st-toc{ border-block: 1px solid var(--st-hair); padding: clamp(18px, 2.2vw, 26px) 0; margin: 0 0 clamp(34px, 4.4vw, 56px); } body .st-toc-h{ font-size: 10px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: var(--st-gold); margin: 0 0 12px; } body .st-toc-list{ list-style: none; margin: 0; padding: 0; counter-reset: st-toc; columns: 2; gap: 0 clamp(24px, 3vw, 44px); } body .st-toc-list li{ counter-increment: st-toc; break-inside: avoid; display: flex; gap: 12px; align-items: baseline; padding: 8px 0; font-size: 14.5px; line-height: 1.45; } body .st-toc-list li::before{ content: counter(st-toc, decimal-leading-zero); font-family: var(--st-serif); font-size: 15px; color: var(--st-gold); min-width: 22px; } body .st-toc-list a{ color: var(--st-ink); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; } body .st-toc-list a:hover, body .st-toc-list a:focus-visible{ color: var(--st-gold); border-bottom-color: var(--st-gold); } body .st-art-sec, body .st-art-table, body .st-art-journeys, body .st-art-faq{ scroll-margin-top: 40px; } /* + the site's 84px scroll-padding = clear of the 94px header */ @media (max-width: 600px) { body .st-toc-list{ columns: 1; } body .st-toc-list li{ padding: 10px 0; }} /* the skip row under each section, and the floating way back to contents */ body .st-skip{ display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--st-hair2); } /* styled on the class, not on `a`: in Elementor the class sits on the Button widget's wrapper and the inner anchor inherits from it */ body .st-skip-next, body .st-skip-top{ font-size: 10.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; text-decoration: none; color: var(--st-ink); padding: 10px 0; line-height: 1.3; } body .st-skip-next::after{ content: '\2193'; margin-left: 8px; color: var(--st-gold); } body .st-skip-top{ color: var(--st-faint); } body .st-skip-top::after{ content: '\2191'; margin-left: 6px; } body .st-skip-next:hover, body .st-skip-top:hover{ color: var(--st-gold); } body .st-float-contents.st-float-contents{ position: fixed; left: clamp(14px, 2vw, 24px); bottom: clamp(14px, 2vw, 24px); z-index: 900; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; background: var(--st-ink); color: #fff; text-decoration: none; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; box-shadow: 0 8px 24px rgba(var(--st-ink-rgb), .22); } body .st-float-contents::before{ content: '\2630'; font-size: 13px; letter-spacing: 0; } body .st-float-contents:hover{ background: var(--st-gold); } /* a card whose link lives on its title, stretched over the whole card */ body .st-card--link{ position: relative; } body .st-card--link .st-card-title a{ color: inherit; text-decoration: none; } body .st-card--link .st-card-title a::after{ content: ''; position: absolute; inset: 0; z-index: 1; } @media (max-width: 600px) { body .st-art-table table{ font-size: 13px; } body .st-art-table thead th:nth-child(3), body .st-art-table td:nth-child(3){ display: none; }} body .st-art-foot{ border-top: 1px solid var(--st-hair); padding-top: clamp(22px, 3vw, 34px); display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: baseline; justify-content: space-between; } body .st-art-foot p{ margin: 0; font-size: 12.5px; color: var(--st-faint); } body .st-related{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(20px, 2.4vw, 38px); margin-top: clamp(26px, 3vw, 44px); } /* ── responsive ─────────────────────────────────────────────────────── */ @media (max-width: 720px) { body .st-hero-title{ max-width: none; }} @media (prefers-reduced-motion: reduce) { body .st-card:hover .st-card-img img{ transform: none; } body .st-card-rule{ transition: none; }} /* ============================================================================ 5. GLUE - Elementor's widget markup vs what the reference sheet expects. Nothing may be appended after this block except more glue. ========================================================================== */ /* A class on a widget lands on the OUTER .elementor-element wrapper, not on the inner tag, so `.it-day-title` styles the wrapper and the inner

falls back to the browser default 2em bold. Make the inner heading inherit. Both halves are wrapped in :where() so the whole rule sits at (0,0,1). It has to lose to everything. Written plainly it is (0,2,0), which beats the sheet's own `.it-sec h2` at (0,1,1) - and then every heading the sheet styles by tag rather than by class is flattened to body text. That silently cost the section headings their 52px serif. */ body :where(.elementor-widget-heading) :where(.elementor-heading-title) { font: inherit; color: inherit; margin: 0; letter-spacing: inherit; } /* Elementor sets `.elementor-widget-heading .elementor-heading-title {line-height:1}` at (0,2,0). Where the sheet does not declare a line-height on the heading it expects the inherited one, and has nothing to win with - every heading came out at exactly its font-size. This is (0,2,1), so it beats Elementor while still losing to any real rule in the sheet. */ body :where(.st-hero,.st-art-body,.st-sec,.tailor-form-section) .elementor-widget-heading .elementor-heading-title { line-height: inherit; } /* wpautop re-wraps Text Editor content in

on every save. Where the widget class is itself the flex/grid row, that

becomes its only child and the row collapses. */ body .it-facts > .elementor-widget-container > p, body .it-tags > .elementor-widget-container > p, body .it-hero-stats > .elementor-widget-container > p { display: contents; } /* Image widgets: the reference sheet sizes the , not Elementor's figure. */ body :where(.st-hero,.st-art-body,.st-sec,.tailor-form-section) .elementor-widget-image, body :where(.st-hero,.st-art-body,.st-sec,.tailor-form-section) .elementor-widget-image figure, body :where(.st-hero,.st-art-body,.st-sec,.tailor-form-section) .elementor-widget-image a { display: contents; } /* Buttons. The reference styles `.it-btn`, which is now the widget wrapper, so the box already looks right - but Elementor's own chrome still paints the inner , and only the label would be clickable (playbook 3.7). Strip the chrome, collapse the wrappers, then stretch the anchor over the whole box. Chrome only. This rule must NOT touch typography: at (0,2,0) a `font: inherit` here outranks the sheet's own `.it-book-util a { font-size: 12px }` at (0,1,1), and the label silently grows to the inherited size. Font and colour are left to the sheet, which styles every button on this page. */ body .elementor-widget-button .elementor-button { background-color: transparent; border-radius: 0; box-shadow: none; fill: currentColor; } body .elementor-widget-button > .elementor-widget-container, body .elementor-widget-button .elementor-button-wrapper, body .elementor-widget-button .elementor-button-content-wrapper { display: contents; } body .elementor-widget-button .elementor-button-text { font: inherit; color: inherit; } /* In a link row the anchor itself is the flex item - the sheet styles `.it-book-util a` and expects it to sit directly in the row. The widget wrapper would take that place and add its own line box, which put 2px on the row. It has no design class of its own here, so it can vanish. */ body .it-book-util .elementor-widget-button { display: contents; } /* Kit defaults. For every widget type on the page Elementor writes its Global defaults into the page's own CSS at (0,3,0) - `.elementor- .elementor-widget-heading .elementor-heading-title { color: var(--e-global- color-primary); font-family: ... }`, and the same for text editors, icon lists and buttons. That is #6EC1E4 Roboto on this site's untouched kit, and it beat both the sheet and the :where() glue above: every day title went blue and Roboto 600. These sit one step higher, (0,3,1), and hand the inner element back to its wrapper, where the sheet's classes are guarded. */ body.elementor-page .elementor-widget-heading .elementor-heading-title, body.elementor-page .elementor-widget-text-editor, body.elementor-page .elementor-widget-icon-list .elementor-icon-list-text, body.elementor-page .elementor-widget-icon-list .elementor-icon-list-item > a { color: inherit; font-family: inherit; font-weight: inherit; } body.elementor-page .elementor-widget-button .elementor-button { background-color: transparent; } body.elementor-page .elementor-widget-icon-list .elementor-icon-list-item:not(:last-child)::after { border-color: transparent; } /* Icon List text. Elementor pads `.elementor-icon-list-text` 5px on the start side, which narrows every list line by 5px and moves a wrap boundary - the gate caught it as a marked span crossing one more line than the source. */ body .elementor-widget-icon-list .elementor-icon-list-text { padding-inline-start: 0; } /* In the included / not-included lists the

  • is a flex row and the sheet's marked is a direct flex item - its own narrow column beside the text. Elementor's text wrapper would make it inline. */ body .it-inc .elementor-icon-list-text { display: contents; } /* ...and Elementor centres the row's items; the sheet's
  • leaves them at the default stretch, so the marked chip runs the full height of the row. */ body .it-inc .elementor-icon-list-item { align-items: normal; } /* Tier buttons. `.it-tiers` is a grid whose items were the two