/** * Crystal Flights — booking UI. * * Palette and type taken from the site's Elementor global kit, not chosen by eye. * Everything is scoped under .cf-app so nothing leaks into the theme, and the * theme's own resets cannot reach in. * * The one rule that shaped the rest: the brand orange #FD8C04 carries white text * at only 2.35:1, failing WCAG outright, but carries near-black #2B1608 at 7.31:1. * So orange is always a fill under dark text, never a background for white. */ .cf-app { /* ---- colour ---- */ --cf-brand: #FD8C04; --cf-brand-dark: #D37C0C; --cf-brand-soft: #F4A261; --cf-deep: #6C290B; --cf-gold: #C9A141; --cf-success: #395902; --cf-danger: #A32B12; --cf-warning: #8F5804; --cf-ink: #2B1608; --cf-ink-soft: #5A4636; /* 5.46:1 on the ground, 6.14:1 on a card. Was #7A6A5A, which measured 4.63:1 once the ground darkened -- passing, but with nothing spare, on the smallest type on the page. */ --cf-ink-faint: #6E5F51; --cf-on-dark: #FFFFFF; --cf-surface: #FFFFFF; /* The page ground the cards sit on. Hue 39deg, four degrees off the brand orange, so it harmonises instead of competing; 37% saturation reads as a neutral rather than as a colour, where a truer cream (70%+) looks yellow across a full page width. Two numbers set this value, both measured rather than judged: white card on the ground 0.157 luminance apart -- the panels get their shape from the ground, not from a border. On the original #FFFEF8 it was 0.011. ground vs the site header 0.044 apart. crystaltourskenya.com paints its header AND its body #F0F4E2, and the previous #F6F1E9 sat 0.003 from it -- a different hue at the same lightness, which the eye reads as one colour. That is what made the booking section appear to merge into the header. Not deeper than this: #EDE5D6 separates more but reads beige-grey rather than warm, and drops the help text to 4.91:1. */ --cf-ground: #F2ECE1; --cf-canvas: #FFFEF8; --cf-sage: #F0F4E2; --cf-line: #E4DCCF; /* Panel edges, softened now that elevation does most of the separating. Still present so a card keeps a defined edge at high zoom and in forced colours, where shadows are dropped entirely. */ --cf-line-card: #EFE8DC; --cf-line-soft: #F2ECE3; /* ---- type ---- */ --cf-font-display: Georgia, "Times New Roman", serif; --cf-font-body: Arial, "Helvetica Neue", Helvetica, sans-serif; /* ---- rhythm ---- */ --cf-1: 4px; --cf-2: 8px; --cf-3: 12px; --cf-4: 16px; --cf-5: 24px; --cf-6: 32px; --cf-7: 48px; --cf-radius: 10px; --cf-radius-sm: 8px; /* Layout */ --cf-shell: 1200px; /* Two layers, always: a tight one for the contact edge and a wide soft one for the lift. A single shadow reads as either hard or foggy, never as depth. Tinted with the ink colour rather than black. A pure-black shadow over a warm ground turns grey and muddy, and that one detail does more to make a warm palette look cheap than any other. */ --cf-shadow: 0 1px 2px rgba(43, 22, 8, .05), 0 4px 14px rgba(43, 22, 8, .06); --cf-shadow-lift: 0 2px 4px rgba(43, 22, 8, .06), 0 12px 32px rgba(43, 22, 8, .10); font-family: var(--cf-font-body); font-size: 16px; line-height: 1.5; color: var(--cf-ink); /* ---- the ground ---- Breaks out of whatever column the theme puts the shortcode in. Not decoration: this theme's content width is 645px, so a 1200px container cannot exist inside the normal flow at all. `!important` on the margins is not laziness. WordPress block themes apply .is-layout-constrained > :where(:not(.alignfull)…) { margin-left: auto !important; margin-right: auto !important; } which silently overrode the negative margins and left the element 100vw wide but still sitting at the parent's left padding -- full width, pushed off the right edge. An !important from the theme can only be answered with one. The remaining overflow is the scrollbar: 100vw counts it, clientWidth does not, so the band is ~15px wider than the visible page. That is handled by `overflow-x: clip` on the body, added only to pages that contain the shortcode -- see Shortcode::body_class(). `clip` rather than `hidden` because hidden silently disables position:sticky further up the page. */ width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw) !important; padding-block: var(--cf-6); background: var(--cf-ground); /* A hairline and a short recess under it, so the section reads as sitting beneath the header rather than continuing it. Deliberately not a background gradient down the section: at this lightness a full-section gradient reads as dated, or as a printing fault. 14px of inset shade does the same job in a tenth of the distance. Ink-tinted, not black -- black over a warm ground goes grey and muddy, which is the same reason the card shadows are tinted. */ box-shadow: inset 0 1px 0 rgba( 43, 22, 8, .10 ), inset 0 14px 22px -14px rgba( 43, 22, 8, .10 ); } /* Absorbs the scrollbar's worth of break-out. 100vw counts the vertical scrollbar and clientWidth does not, so the band overhangs by ~15px, split either side by the centring. Measured: the page scrolled 8px right without this. Both rules are needed. `clip` on the body does NOT propagate to the viewport the way `hidden` does -- verified, the page still scrolled -- so the root element needs it too. They are separate rules on purpose: a browser without :has() drops the second one rather than discarding both. `clip` and not `hidden`: hidden turns the element into a scroll container, which silently disables position:sticky anywhere on the page. Scoped to pages that render the booking flow, so nothing else on the site has its overflow behaviour changed by this plugin. */ body.cf-booking-page { overflow-x: clip; } html:has(body.cf-booking-page) { overflow-x: clip; } /* ---- the container ---- 1200px, in the same range as the booking sites customers will have used before this one: Booking.com 1104, Skyscanner 1200, Expedia 1240, Kayak 1280. Wide enough for a result row beside its filter rail, narrow enough that the row does not stretch into a thin line on a large monitor. */ .cf-shell { width: 100%; max-width: var(--cf-shell); margin-inline: auto; padding-inline: var(--cf-4); } @media (min-width: 720px) { .cf-app { padding-block: var(--cf-7); } .cf-shell { padding-inline: var(--cf-5); } } @media (min-width: 1080px) { .cf-shell { padding-inline: var(--cf-6); } } .cf-app *, .cf-app *::before, .cf-app *::after { box-sizing: border-box; } /* The `hidden` attribute only sets display:none from the UA stylesheet, so any author rule with a display value silently defeats it. That is not theoretical here: .cf-error sets display:flex, so