.elementor-kit-7{--e-global-color-primary:#9A5B0B;--e-global-color-secondary:#2A2521;--e-global-color-text:#2A2521;--e-global-color-accent:#9A5B0B;--e-global-color-cmllighter:#F2F1ED;--e-global-color-cmlbg:#FFFFFF;--e-global-color-cmlmuted:#68615D;--e-global-color-cmlondark:#E6E5E0;--e-global-color-cmlheadondark:#F2F1ED;--e-global-color-cmlhairline:#D2D2D2;--e-global-color-cmlprimaryhover:#8A5209;--e-global-color-cmlherooverlay:#201303;--e-global-color-cmlmutedondark:#A39C96;--e-global-color-cmlaccentondark:#D08A35;--e-global-typography-primary-font-family:"Cormorant Garamond";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Cormorant Garamond";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:500;--e-global-typography-primary-font-size:92px;--e-global-typography-primary-line-height:1em;--e-global-typography-secondary-font-size:68px;--e-global-typography-secondary-line-height:1em;--e-global-typography-text-font-size:16px;--e-global-typography-text-line-height:1.7em;--e-global-typography-accent-font-size:14px;--e-global-typography-accent-line-height:1.7em;--e-global-typography-cmllead-font-family:"Inter";--e-global-typography-cmllead-font-size:18px;--e-global-typography-cmllead-font-weight:400;--e-global-typography-cmllead-line-height:1.7em;--e-global-typography-cmlbodysm-font-family:"Inter";--e-global-typography-cmlbodysm-font-size:12px;--e-global-typography-cmlbodysm-font-weight:400;--e-global-typography-cmlbodysm-line-height:1.6em;--e-global-typography-cmllabel-font-family:"Inter";--e-global-typography-cmllabel-font-size:11px;--e-global-typography-cmllabel-font-weight:500;--e-global-typography-cmllabel-line-height:1.6em;--e-global-typography-cmllabel-letter-spacing:1px;color:#2A2521;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;line-height:1.7em;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{background-color:#A7630C;font-family:"Inter", Sans-serif;font-size:13px;font-weight:400;line-height:1.2em;color:#FFFFFF;border-radius:0px 0px 0px 0px;}.elementor-kit-7 button:hover,.elementor-kit-7 button:focus,.elementor-kit-7 input[type="button"]:hover,.elementor-kit-7 input[type="button"]:focus,.elementor-kit-7 input[type="submit"]:hover,.elementor-kit-7 input[type="submit"]:focus,.elementor-kit-7 .elementor-button:hover,.elementor-kit-7 .elementor-button:focus{background-color:#8A5209;color:#FFFFFF;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:#A7630C;}.elementor-kit-7 a:hover{color:#8A5209;}.elementor-kit-7 h1{color:#2A2521;font-family:"Cormorant Garamond", Sans-serif;font-size:92px;font-weight:700;line-height:1em;}.elementor-kit-7 h2{color:#2A2521;font-family:"Cormorant Garamond", Sans-serif;font-size:68px;font-weight:600;line-height:1em;}.elementor-kit-7 h3{color:#2A2521;font-family:"Cormorant Garamond", Sans-serif;font-size:48px;font-weight:500;line-height:1.05em;}.elementor-kit-7 h4{color:#2A2521;font-family:"Cormorant Garamond", Sans-serif;font-size:30px;font-weight:500;line-height:1.05em;}.elementor-kit-7 h5{color:#2A2521;font-family:"Cormorant Garamond", Sans-serif;font-size:24px;font-weight:400;line-height:1.1em;}.elementor-kit-7 h6{color:#2A2521;font-family:"Cormorant Garamond", Sans-serif;font-size:19px;font-weight:400;line-height:1.1em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-7{--e-global-typography-primary-font-size:68px;--e-global-typography-secondary-font-size:52px;--e-global-typography-text-font-size:16px;--e-global-typography-accent-font-size:14px;--e-global-typography-cmllead-font-size:18px;--e-global-typography-cmlbodysm-font-size:12px;--e-global-typography-cmllabel-font-size:11px;font-size:16px;}.elementor-kit-7 h1{font-size:68px;}.elementor-kit-7 h2{font-size:52px;}.elementor-kit-7 h3{font-size:40px;}.elementor-kit-7 h4{font-size:28px;}.elementor-kit-7 h5{font-size:22px;}.elementor-kit-7 h6{font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{--e-global-typography-primary-font-size:44px;--e-global-typography-secondary-font-size:36px;--e-global-typography-text-font-size:16px;--e-global-typography-accent-font-size:14px;--e-global-typography-cmllead-font-size:16px;--e-global-typography-cmlbodysm-font-size:12px;--e-global-typography-cmllabel-font-size:11px;font-size:16px;}.elementor-kit-7 h1{font-size:44px;}.elementor-kit-7 h2{font-size:36px;}.elementor-kit-7 h3{font-size:30px;}.elementor-kit-7 h4{font-size:24px;}.elementor-kit-7 h5{font-size:20px;}.elementor-kit-7 h6{font-size:17px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ========================================================================== CORNWALL MOTOR LODGE — DESIGN TOKENS -------------------------------------------------------------------------- SOURCE OF TRUTH: Design Extracted/Style Guide/ · render.html → the colour hexes + the Text Hierarchy table · screenshots/style-guide.png → the look Active theme is hello-elementor (PARENT, no child theme). This file is the LOCAL source of truth. Its contents are pushed into Elementor → Site Settings → Custom CSS (stored in the DB, update-safe). Never paste these into hello-elementor/style.css — a theme update wipes it. NOTE: the Style Guide's own tokens.css / design-tokens.json ship EMPTY (`:root {}`, `colors: []`). Every value below was read from its render.html. Prefix for component classes: cml- ========================================================================== */ :root { /* ---------- Brand palette — Style Guide § Colors ---------- */ --color-primary: #9A5B0B; /* "Main Color" / "Primary" */ --color-accent: #9A5B0B; /* "Accent" — same hex as Main Color */ --color-secondary: #2A2521; /* "Secondary" */ --color-lighter: #F2F1ED; /* "Lighter" */ --color-bg: #FFFFFF; /* "Background Color" */ --color-primary-hover: #8A5209; /* derived darker for :hover (not in SG)*/ /* ---------- Neutral / text — from the page renders ---------- */ --color-text: #2A2521; /* body text on light */ --color-text-muted: #68615D; /* captions, labels, meta */ --color-text-on-dark: #E6E5E0; /* body text on dark */ --color-heading-on-dark:#F2F1ED; /* headings on dark */ --color-hairline: #D2D2D2; /* borders / dividers */ --color-hero-overlay: #201303; /* hero image tint */ /* ---------- Typefaces — Style Guide § Typefaces ---------- Cormorant Garamond (Google) — Bold · SemiBold · Medium · Italic Inter (Google) — Medium · Regular */ --font-heading: 'Cormorant Garamond', Georgia, serif; --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif; /* ---------- Font weights ---------- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------- Type scale — Style Guide § Text Hierarchy ---------- name weight size line height */ --font-size-h1: 92px; /* Bold · 1.0 */ --font-size-h2: 68px; /* SemiBold · 1.0 */ --font-size-h3: 48px; /* Medium · 1.05 */ --font-size-h4: 30px; /* Medium · 1.05 */ --font-size-h5: 24px; /* Regular · 1.1 */ --font-size-h6: 19px; /* Regular · 1.1 */ --font-size-lead: 18px; /* Lead Paragraph · Regular · 1.7 */ --font-size-base: 16px; /* Body Large · Regular/Medium · 1.7 */ --font-size-body: 14px; /* Body Medium · Regular/Medium · 1.7 */ --font-size-normal: 14px; /* Body Normal — same size as Body Medium */ --font-size-sm: 12px; /* Body Small · Regular/Medium · 1.6 */ /* ---------- Matching line heights (× font size) ---------- */ --line-height-h1: 1.0; --line-height-h2: 1.0; --line-height-h3: 1.05; --line-height-h4: 1.05; --line-height-h5: 1.1; --line-height-h6: 1.1; --line-height-body: 1.7; /* lead, body large, medium, normal */ --line-height-small: 1.6; /* body small */ /* ---------- Matching weights per role ---------- */ --fw-h1: var(--fw-bold); --fw-h2: var(--fw-semibold); --fw-h3: var(--fw-medium); --fw-h4: var(--fw-medium); --fw-h5: var(--fw-regular); --fw-h6: var(--fw-regular); /* ---------- Label Text — Style Guide § Label Text ---------- */ --font-size-label-xs: 10px; /* Extra Small Label */ --font-size-label-sm: 12px; /* Small Label */ --font-size-label: 14px; /* Normal Label */ --font-size-label-lg: 16px; /* Large Label */ --font-size-label-xl: 18px; /* Extra Large Label */ /* ---------- Type scale — intermediate steps used in the PAGE designs ---- Not in the Style Guide hierarchy, but the pages genuinely use these sizes. Tokenised so nobody hardcodes a px value mid-build, and so the /autobuild preflight scale-coverage gate passes. Do not prune. */ --font-size-xs: 11px; --font-size-13: 13px; --font-size-15: 15px; --font-size-20: 20px; --font-size-21: 21px; --font-size-22: 22px; --font-size-26: 26px; --font-size-32: 32px; --font-size-34: 34px; --font-size-36: 36px; --font-size-38: 38px; --font-size-40: 40px; --font-size-42: 42px; --font-size-44: 44px; --font-size-display: 64px; /* ---------- Spacing scale ---------- */ --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 40px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 80px; --space-5xl: 96px; --space-6xl:120px; /* ---------- Layout ---------- */ --max-width: 1200px; /* boxed content width (blueprint frame @ x=120) */ --page-gutter: 120px; /* desktop side gutter within the 1440 canvas */ --radius: 4px; } /* ========================================================================== COMPONENT CLASSES Named, prefixed classes applied via each widget's CSS Classes field. Added per-section during the build. Never target .elementor-element-XXXX. ========================================================================== */ /* TODO: component classes are added per-section during the homepage build. */ /* Responsive visibility helper. WHY a class rather than Elementor's native hide_tablet / hide_mobile controls: Elementor 4.2 emits a bare `.elementor-hidden` for those, which hides the element at EVERY breakpoint rather than only the targeted one (verified in the DOM). This is the working equivalent. */ @media (max-width: 1024px) { .cml-hide-sm { display: none !important; } } /* Header logo must never shrink. WHY: the Nav Menu widget carries the full (hidden) menu markup, so its intrinsic width is large. In a nowrap flex row both items shrink proportionally and the logo collapsed to ~58px on mobile. Elementor exposes no per-widget flex-shrink control, so this is the equivalent. */ .cml-logo { flex: 0 0 auto; } /* Small-screen-only element (pairs with .cml-hide-sm). Used for the burger nav that sits at the far right on tablet/mobile, while the desktop link row sits beside the logo. */ .cml-show-sm { display: none !important; } @media (max-width: 1024px) { .cml-show-sm { display: block !important; } } /* S12 FAQ accordion (.cml-faq on the nested-accordion widget). Two things Elementor's native controls genuinely cannot express here — both verified in elementor/modules/nested-accordion/widgets/nested-accordion.php: 1. TITLE TYPOGRAPHY. The title_typography group is registered with a `:where(...)` .elementor-kit-7 (line 581), which carries ZERO specificity. The kit's own `.elementor-kit-7 h3` rule is (0,1,1) and therefore wins, rendering the questions in Cormorant 500 instead of the design's Inter 400. Font-SIZE still comes through natively because it is emitted as a CSS custom property on the wrapper, so size stays on the native responsive controls (Rule 15) and only the three breakpoint-invariant properties are restated here. 2. ITEM RULE. The native accordion_border_* control targets `.e-n-accordion-item-title` — the summary (line 728). On an EXPANDED item that draws the rule between the question and its answer; the design puts it below the answer, i.e. on the item itself. There is no native control for the item, so the border is set here. */ .cml-faq .e-n-accordion-item-title-text { font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.4; } .cml-faq .e-n-accordion-item { border-bottom: 1px solid var(--color-text-on-dark); } /* About §3 eyebrow underline (.cml-eyebrow-rule on the heading widget). The design draws a 2px gold rule under "What We Believe" that is exactly the TEXT's width (137 vs the text's 136.4), centred on the page. A divider widget pinned to 137px would stop matching the moment the copy is edited, so this uses a text-decoration underline, which tracks the text. WHY CSS AND NOT A NATIVE CONTROL: Elementor's typography group exposes text-decoration (underline) but NOT text-decoration-thickness or text-underline-offset, so the 2px weight and the 11px drop cannot be set natively. Colour is inherited from the heading's own colour, which is already --color-primary, so it is not restated here. render.html omitted this rule entirely — it reported only a bare 136.1x25 div with no background. Sixth dropped rule on this project. */ .cml-eyebrow-rule { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 11px; /* MUST be set explicitly. Elementor puts _css_classes on the widget WRAPPER, and the gold title_color is applied to the inner .elementor-heading-title — so the wrapper inherits the dark body colour and the underline rendered #2A2521 instead of gold. */ text-decoration-color: var(--color-primary); } /* Rooms §3 room-row links (.cml-link-rule on the heading widget). The design underlines each "VIEW … →" link with a 1px gold rule that is exactly the TEXT's width (177.5 vs the link's 178.4 advance), 7.45px below the baseline. render.html represents it only as a bare 178x22 div with no colour — the same way the §2 and About §3 rules hid. Seventh/eighth dropped rule on this project. SEPARATE FROM .cml-eyebrow-rule, which is 2px at an 11px offset. Measured here: coverage-weighted thickness 0.1 + 1.0 + 0.8 subpixel rows = 0.95px, and rule top 1513.45 - baseline 1506 = 7.45. Same reason as .cml-eyebrow-rule for using CSS: Elementor's typography group exposes text-decoration but NOT text-decoration-thickness or text-underline-offset, and a fixed-width divider would stop matching the moment the copy is edited. Colour must be restated — _css_classes lands on the widget WRAPPER, which inherits the dark body colour, not the heading's gold title_color. */ .cml-link-rule { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; text-decoration-color: var(--color-primary); } /* Contact Us §2 enquiry form (.cml-contact-form on the form widget). Elementor Pro's Form widget exposes typography, colours, borders, radius, row/column gap and label spacing natively — all of those stay on native controls (Rule 15/20). It exposes NO control for two things this design needs, so they live here and nowhere else: 1. INPUT HEIGHT. The widget only offers `input_size` (xs..xl), which sets padding, not a height. The design's inputs are exactly 47 and the textarea 98. Padding-left 17 comes from the measured placeholder x771.9 against the input x754.9. 2. PLACEHOLDER COLOUR. There is no `placeholder_color` control (searched the widget source). The design's #757575 is a flat neutral grey — NOT an opacity, and NOT cmlmuted #68615D, which would render 104,97,93 against the measured 117,117,117. */ .cml-contact-form .elementor-field-textual { height: 47px; padding: 0 17px; } .cml-contact-form textarea.elementor-field-textual { height: 98px; padding: 14px 17px; } .cml-contact-form .elementor-field-textual::placeholder { color: #757575; opacity: 1; /* Firefox dims placeholders to 0.54 by default */ } /* ...and two more the widget cannot express natively, found on the first render: - The submit button rendered 40 tall; the design's is 49. There is NO button_padding control on the Form widget (searched), only `button_size` (xs..xl), whose presets do not land on 49. - The gap above the button is 28 in the design, but the button group inherits `row_gap` (20) like every other field group, so it needs +8 of its own. */ .cml-contact-form .elementor-field-type-submit { padding-top: 8px; } .cml-contact-form button[type="submit"] { height: 49px; } /* Contact §4 FAQ accordion (.cml-faq-contact on the nested-accordion widget). A SIBLING of .cml-faq, not a reuse of it — same two Elementor limitations, different values: 1. TITLE TYPOGRAPHY. Same zero-specificity `:where()` problem as .cml-faq, but Contact §4's questions are 20px CORMORANT 400, where Home §12's are 18px Inter 400. Font-size still comes through natively, so only the three breakpoint-invariant properties are restated. 2. ITEM RULE. Same reason as .cml-faq (the native control targets the summary, not the item), but a different colour. Measured over y2142, x400-1100: mean 229.0,228.0,228.0 -> alpha 0.122/0.124/0.122 against #2A2521 — i.e. rgba(42,37,33,0.12), the same hairline step as the room-type §3 overview card. It is NOT --color-text-on-dark (#E6E5E0), which .cml-faq uses and which would read 230,229,224; the blue channel separates them by 4 levels. */ .cml-faq-contact .e-n-accordion-item-title-text { font-family: 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.2; } .cml-faq-contact .e-n-accordion-item { border-bottom: 1px solid rgba(42, 37, 33, 0.12); } /* Book Now §4 — two inline treatments inside ONE line of body copy. "Our team is happy … Call us on 0800 17 00 00 or send us an enquiry." WHY A CLASS AND NOT NATIVE CONTROLS: this is one flowing sentence whose phone number and enquiry link are styled differently from the copy around them. It has to be a single widget — three widgets in a row could not wrap as one paragraph, and the line DOES wrap at tablet and mobile. The runs are real elements in the heading's `title` (Elementor does not escape markup there — proven on Rooms §3's ), and Rule 8 forbids inline styles, so they carry classes. The widget's own title_color carries the base rgba(255,255,255,0.75); it is not restated here. 🔴 THE CLASS SITS ON A WRAPPING AND THE RULE TARGETS THE INSIDE IT: 0800 17 00 00 .cml-inline-cta .cml-tel a { … } WHY: the kit sets a global link colour — `.elementor-kit-7 a { color: rgb(167,99,12) }` — so every anchor here is gold by default. Colouring the span alone is NOT enough: the span goes white but the anchor keeps the kit's gold (it caught me out because .cml-enq is ALSO gold, so that one looked correct by coincidence while .cml-tel rendered gold instead of white). The rule must therefore name the anchor. Putting the class directly on the did not work either, and the exact cascade reason was not pinned down — `.cml-tel`, `a.cml-tel` and `.cml-inline-cta .cml-tel` were all ignored while the same declaration with !important applied, even though no !important colour rule exists anywhere in the loaded CSS and the anchor carries no inline style. What IS established: `font-weight` from the same block always applied, so only `color` was being overridden, and the span-plus-descendant form below is verified working against the live page. It needs no !important, so Rule 14 holds. MEASURED, not assumed: base copy plateau 202,200,199 over 3,316 px = white @ 0.75 (predicts 201.75/200.5/199.5) the number SOLID white AND weight 700 — its advance fits 700 to 0.28 where 400 is off by 4.5, and the whole line independently fits 744.84 at 700 vs 740.95 at 400 (design 744) the link plateau 167,99,12 over 988 px = #9A5B0B exactly NO UNDERLINE on either — rows y1889-1898 beneath both are completely clean, so .cml-link-rule must NOT be used here. The full stop after "enquiry" is NOT part of the link. */ .cml-inline-cta a { text-decoration: none; } /* nowrap on the SPAN so the freephone number never breaks across lines. Verified necessary, not speculative: at 16px it splits once the content box drops below ~300px, and a 320px viewport with the section's 20px gutters leaves 280. A tel: number broken mid-string reads as two numbers. */ .cml-inline-cta .cml-tel { white-space: nowrap; } .cml-inline-cta .cml-tel a { color: var(--color-bg); font-weight: 700; } .cml-inline-cta .cml-enq a { color: var(--color-primary); } /* The design specifies NO hover state. An underline is the least invasive addition and needs no new colour — the same class of deliberate UX decision as the `inverse` button's hover and Contact §4's expand icon. */ .cml-inline-cta a:hover { text-decoration: underline; text-underline-offset: 4px; } /* Legal pages — bullet lists (.cml-legal-list on the text-editor widget). The NZ Privacy Policy and Terms documents use bulleted lists throughout, and Elementor's text-editor widget exposes NO control for list marker, indent or item spacing — the only native controls are the shared typography/colour, which the widget already carries. Hence a class (Rule 3), holding exactly the three things the widget cannot express. */ .cml-legal-list ul { list-style: disc; padding-left: 22px; margin: 0; } .cml-legal-list li { margin: 0 0 6px; } .cml-legal-list li::marker { color: var(--color-primary); } /* Google Maps embed (.cml-map-embed on the "Google Map — Cornwall Motor Lodge" GLOBAL HTML widget). Added 2026-10-06: the client's pinned-listing embed (a `pb=` URL) replaces the static Find Us map image and Contact §3's address-only google_maps widget. The native widget cannot take a `pb=` URL, hence an HTML widget (Rule 16 — saved as a Global Widget). The pasted iframe carried inline style/width/height; those were stripped (Rule 8) and the sizing lives here instead. Find Us: the same 720 x 400 box the static map filled, scaling with its column at every breakpoint via aspect-ratio — no media queries. */ .cml-map-embed iframe { display: block; width: 100%; height: auto; aspect-ratio: 720 / 400; border: 0; } /* Contact §3 full-bleed band (.cml-map-band on the SECTION container, because the global widget's own settings — and so its class — are shared by every placement). The old native widget was 420 / 360 / 300; clamp() reproduces 420 at 1440 and floors at 300 on small screens without a media query. */ .cml-map-band .cml-map-embed iframe { aspect-ratio: auto; height: clamp(300px, 29.17vw, 420px); } /* Home hero booking bar — interactive (2026-10-07). The bar is still the approved native widgets; .claude/snippets/cml-booking-bar.js attaches calendars + a guest list to it by class, fed by the client's iBex availability through /wp-json/cml/v1/availability. The popover is generated by that script (not an Elementor element), so it is styled here; its position comes from two custom properties the script sets, since it must track the clicked cell. No media queries: the width clamps to the viewport. */ .cml-bk-field { cursor: pointer; transition: background-color 0.15s ease; } .cml-bk-field:hover, .cml-bk-field.is-open { background-color: var(--color-lighter); } .cml-bk-field:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; } .cml-bk-pop { position: absolute; top: var(--cml-bk-top, 0); left: var(--cml-bk-left, 0); z-index: 9999; box-sizing: border-box; width: min(340px, calc(100vw - 32px)); padding: 20px; background: var(--color-bg); border-radius: 4px; box-shadow: 0 12px 50px rgba(42, 37, 33, 0.18); /* Book Now §2's fitted card shadow */ font-family: var(--font-body); color: var(--color-text); } .cml-bk-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .cml-bk-month { font-family: var(--font-heading); font-size: 22px; line-height: 1.2; } .cml-bk-pop .cml-bk-cal-head button.cml-bk-nav { box-shadow: none; text-transform: none; letter-spacing: 0; font-weight: var(--fw-regular); width: 36px; height: 36px; padding: 0; border: 1px solid rgba(42, 37, 33, 0.12); border-radius: 50%; background: transparent; color: var(--color-text); font-size: 22px; line-height: 1; cursor: pointer; } .cml-bk-pop .cml-bk-cal-head button.cml-bk-nav:hover:not([disabled]), .cml-bk-pop .cml-bk-cal-head button.cml-bk-nav:focus { background: transparent; border-color: var(--color-primary); color: var(--color-primary); } .cml-bk-pop .cml-bk-cal-head button.cml-bk-nav[disabled] { opacity: 0.3; cursor: default; } .cml-bk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .cml-bk-grid.is-loading { opacity: 0.55; } .cml-bk-dow { padding: 4px 0 8px; font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 1px; text-align: center; color: rgba(42, 37, 33, 0.5); } .cml-bk-pop .cml-bk-grid button.cml-bk-day { box-shadow: none; text-transform: none; letter-spacing: 0; font-weight: var(--fw-regular); line-height: 1; aspect-ratio: 1; padding: 0; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--color-text); font-family: var(--font-body); font-size: 14px; cursor: pointer; } .cml-bk-pop .cml-bk-grid button.cml-bk-day:hover:not([disabled]), .cml-bk-pop .cml-bk-grid button.cml-bk-day:focus { background: transparent; border-color: var(--color-primary); color: var(--color-primary); } .cml-bk-pop .cml-bk-grid button.cml-bk-day:focus-visible, .cml-bk-option:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; } .cml-bk-pop .cml-bk-grid button.cml-bk-day.is-today { font-weight: var(--fw-bold); } .cml-bk-pop .cml-bk-grid button.cml-bk-day.is-range { background: var(--color-lighter); } .cml-bk-pop .cml-bk-grid button.cml-bk-day.is-start, .cml-bk-pop .cml-bk-grid button.cml-bk-day.is-selected, .cml-bk-pop .cml-bk-grid button.cml-bk-day.is-selected:hover, .cml-bk-pop .cml-bk-grid button.cml-bk-day.is-selected:focus { background: var(--color-primary); color: var(--color-bg); } .cml-bk-pop .cml-bk-grid button.cml-bk-day[disabled] { cursor: default; } .cml-bk-pop .cml-bk-grid button.cml-bk-day.is-past { color: rgba(42, 37, 33, 0.25); } .cml-bk-pop .cml-bk-grid button.cml-bk-day.is-start[disabled] { color: var(--color-bg); } .cml-bk-pop .cml-bk-grid button.cml-bk-day.is-sold { color: rgba(42, 37, 33, 0.35); text-decoration: line-through; } .cml-bk-pop .cml-bk-grid button.cml-bk-day.is-pending { color: rgba(42, 37, 33, 0.35); } .cml-bk-foot { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(42, 37, 33, 0.12); font-size: 12px; line-height: 1.5; color: rgba(42, 37, 33, 0.7); } .cml-bk-key { display: inline-flex; align-items: center; gap: 6px; } .cml-bk-swatch { width: 10px; height: 10px; border: 1px solid var(--color-primary); border-radius: 2px; } .cml-bk-key.is-sold .cml-bk-swatch { border-color: rgba(42, 37, 33, 0.25); background: linear-gradient(to top right, transparent 45%, rgba(42, 37, 33, 0.35) 45%, rgba(42, 37, 33, 0.35) 55%, transparent 55%); } .cml-bk-pop--guests { width: min(240px, calc(100vw - 32px)); padding: 8px; } .cml-bk-option { padding: 12px 14px; border-radius: 2px; font-size: 15px; cursor: pointer; } .cml-bk-option:hover { background: var(--color-lighter); } .cml-bk-option.is-selected { color: var(--color-primary); font-weight: var(--fw-medium); } /* cml-text-links: links inside body text are underlined so they don't rely on colour alone (WCAG link-in-text-block). */ .elementor-widget-text-editor p a, .elementor-widget-text-editor li a { text-decoration: underline; }/* End custom CSS */