.elementor-kit-207{--e-global-color-primary:#003040;--e-global-color-secondary:#001B26;--e-global-color-text:#003040;--e-global-color-accent:#E8A200;--e-global-color-warmlight:#F7F5F1;--e-global-color-inksec:#435057;--e-global-color-positive:#256B4D;--e-global-color-bordersub:#E4DFD7;--e-global-color-white:#FFFFFF;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Source Sans 3";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Archivo";--e-global-typography-accent-font-weight:700;color:#003040;font-family:"Source Sans 3", sans-serif;font-size:19px;font-weight:400;line-height:1.7em;}.elementor-kit-207 e-page-transition{background-color:#FFBC7D;}.elementor-kit-207 a{color:#003040;}.elementor-kit-207 a:hover{color:#946800;}.elementor-kit-207 h1{color:#003040;font-family:"Archivo", sans-serif;font-size:52px;font-weight:800;line-height:1.2em;}.elementor-kit-207 h2{color:#003040;font-family:"Archivo", sans-serif;font-size:34px;font-weight:800;line-height:1.2em;}.elementor-kit-207 h3{color:#003040;font-family:"Archivo", sans-serif;font-size:23px;font-weight:700;line-height:1.2em;}.elementor-kit-207 h4{color:#003040;font-family:"Archivo", sans-serif;font-size:20px;font-weight:700;line-height:1.2em;}.elementor-kit-207 h5{color:#003040;font-family:"Archivo", sans-serif;font-size:18px;font-weight:700;line-height:1.2em;}.elementor-kit-207 h6{color:#003040;font-family:"Archivo", sans-serif;font-size:16px;font-weight:700;line-height:1.2em;}.elementor-kit-207 button,.elementor-kit-207 input[type="button"],.elementor-kit-207 input[type="submit"],.elementor-kit-207 .elementor-button{font-family:"Archivo", sans-serif;font-size:18px;font-weight:700;border-radius:999px 999px 999px 999px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:40px;--container-default-padding-bottom:0px;--container-default-padding-left:40px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}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-207{font-size:19px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;--container-default-padding-top:0px;--container-default-padding-right:32px;--container-default-padding-bottom:0px;--container-default-padding-left:32px;}}@media(max-width:767px){.elementor-kit-207{font-size:19px;}.elementor-kit-207 h1{font-size:34px;}.elementor-kit-207 h2{font-size:28px;}.elementor-kit-207 h3{font-size:21px;}.elementor-kit-207 h4{font-size:19px;}.elementor-kit-207 h5{font-size:18px;}.elementor-kit-207 h6{font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:0px;--container-default-padding-right:24px;--container-default-padding-bottom:0px;--container-default-padding-left:24px;}} /* Start custom CSS *//* ===== Cookie consent banner ===== Plugin default was white on a 75%-opacity #FF7D27, which measured 2.56:1 and let the hero photograph show through. Colours are now set in the plugin's own options (navy panel, amber button); this handles size and layout, which the plugin has no settings for. Body text was 14px and the Accept button 12px in a 34px box, against this site's 17px / 48px-target floors. Lives in the kit rather than a sandbox file so it travels with the database. */ #ct-ultimate-gdpr-cookie-popup{ font-size:17px; } #ct-ultimate-gdpr-cookie-popup .ct-container{ max-width:1220px; padding:22px 40px 26px !important; } #ct-ultimate-gdpr-cookie-popup .mkj-cc-title{ display:block; font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:20px; line-height:1.3; margin-bottom:8px; } #ct-ultimate-gdpr-cookie-popup .mkj-cc-body{ display:block; font-size:17px; line-height:1.6; max-width:900px; } /* white on navy is 14:1; underlined so it is not colour-only */ #ct-ultimate-gdpr-cookie-popup a{ color:#FFFFFF; text-decoration:underline; } #ct-ultimate-gdpr-cookie-popup a:hover{ color:#E8A200; } #ct-ultimate-gdpr-cookie-popup .cookie-buttons, #ct-ultimate-gdpr-cookie-popup .cookie-buttons a, #ct-ultimate-gdpr-cookie-popup .cookie-buttons button{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:16px !important; line-height:1.2; } #ct-ultimate-gdpr-cookie-popup .cookie-buttons{ min-height:48px; padding:13px 26px !important; display:inline-flex !important; align-items:center; justify-content:center; } @media (max-width:767px){ #ct-ultimate-gdpr-cookie-popup .ct-container{ padding:18px 20px 22px !important; } #ct-ultimate-gdpr-cookie-popup .mkj-cc-body{ font-size:16px; } } /* ===== Service cards, three per row ===== The four-card row is flex-wrap:nowrap with flex:1 1 0, so a fifth card would squeeze all five to about 210px - narrower than the 267px that already forced the card titles down to 19px. Wrap to 3 + 2 instead, and do NOT let them grow: flex-grow would make the second row's two cards much wider than the first row's three. calc assumes the row's 24px gap (two gaps over three items). */ .mkj-cards-3up{ flex-wrap:wrap !important; align-items:stretch !important; } .mkj-cards-3up > .mkj-card{ flex:0 1 calc(33.333% - 16px) !important; width:auto !important; min-width:0; } @media (max-width:1024px){ .mkj-cards-3up > .mkj-card{ flex:0 1 calc(50% - 12px) !important; } } @media (max-width:640px){ .mkj-cards-3up > .mkj-card{ flex:1 1 100% !important; } } /* ===== Header stacking order ===== The nav dropdown was painting UNDERNEATH the hero headline. Cause: the hero sets `.mkj-hero-h1 { position:relative; z-index:3 }`, but .mkj-hero itself is position:relative with z-index:auto and no transform, so it does NOT create a stacking context. That z-index:3 therefore competed in the ROOT stacking context and beat the header, whose submenu is position:absolute with z-index:auto (0). The header also comes earlier in the DOM, so it lost twice. Two fixes, deliberately both: 1. Give the header a real stacking position, so nothing in the page can cover the menu. 2. Isolate the heroes, so any z-index used inside one stays inside it. This is the part that stops the bug coming back the next time a hero gains a layered element. */ .elementor-location-header{ position:relative; z-index:100; } .mkj-hero, .mkj-home-hero{ isolation:isolate; } /* ================================================================== * MIGRATED FROM wp-content/novamira-sandbox/ - Aug 2026 * * This CSS used to be printed by PHP files in the sandbox folder. Files do * not travel with a database push, so an earlier migration left the whole * site unstyled. Kit Custom CSS lives in the database, so it migrates. * * ORDER: as sandbox files these printed at wp_head priority 100-101, i.e. * AFTER Elementor's per-page CSS. Here they load before it. Safe for these * rules, because Elementor's generated .elementor-kit-207s are * .elementor-{page} .elementor-element-{id} at specificity (0,3,0)+ which a * class .elementor-kit-207 never beat by order anyway - anything that had to win * already does it with !important. Bear that in mind before adding rules. * * BACKSLASHES: post meta is unslashed on write, so a CSS escape such as * content:"\201C" loses its backslash unless the value is wp_slash()ed on * the way in. Always verify by md5, never by length - the first attempt at * this was exactly one byte short. * * Only the CSS moved. JS, markup and enqueues remain in those PHP files. * ================================================================== */ /* ---------- from mkj-chrome.php ---------- */ /* ============================ TOP BAR ============================ */ .mkj-topbar .mkj-topbar-inner{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:15px; line-height:1.5; } .mkj-topbar a{ color:#fff; text-decoration:none; transition:color .2s ease; } .mkj-topbar a:hover{ color:#E8A200; } .mkj-topbar .mkj-sep{ color:rgba(255,255,255,.4); } .mkj-topbar i{ margin-right:6px; } .mkj-topbar .mkj-fb{ margin-left:8px; font-size:16px; } @media (max-width:767px){ .mkj-topbar .mkj-topbar-inner{ justify-content:center; font-size:14px; } .mkj-topbar .mkj-sep{ display:none; } } /* ===================== NHS PARTNERSHIP BADGE ===================== Bled hard to the right edge of the header row, on white. */ .mkj-nhs-wrap{ flex:0 0 auto; } .mkj-nhs-badge{ display:inline-flex; align-items:center; gap:10px; background:#FFFFFF; padding:8px 0 8px 20px; } .mkj-nhs-badge img{ height:34px; width:auto; } .mkj-nhs-badge > span{ font-size:13px; line-height:1.3; color:#435057; font-weight:600; max-width:150px; } /* ========================= HEADER ROW ============================ Seven top-level items at 17px need ~940px of nav. Sharing the row with the logo and the NHS badge, that only fits above about 1590px, so the menu was wrapping onto a second line and inflating the header to 140px on any ordinary laptop. Three graduated steps, giving up the least important thing first, rather than one hard breakpoint. */ .mkj-header-row{ position:relative; } /* keep the nav optically centred rather than squeezed by the badge */ .mkj-header-row .mkj-nav{ flex:1 1 auto; display:flex; justify-content:center; } /* 1. tighten item spacing before dropping anything */ @media (max-width:1750px){ .mkj-nav .elementor-nav-menu--main .elementor-item{ padding-left:12px; padding-right:12px; } } /* 2. the NHS badge is the least load-bearing element in the row, so it goes before the navigation is compromised */ @media (max-width:1599px){ .mkj-nhs-wrap{ display:none; } } /* 3. below 1300px a seven-item horizontal menu cannot fit at a legible size, so switch to the burger. Elementor already renders the toggle and the dropdown panel - its own breakpoint just keeps them hidden until 1024px, which is about 275px too late here. */ @media (max-width:1300px){ /* .mkj-nav also carries .elementor-nav-menu--dropdown-tablet, so doubling it up outranks Elementor's own rules without !important */ .mkj-nav.elementor-nav-menu--dropdown-tablet .elementor-nav-menu--main{ display:none; } .mkj-nav.elementor-nav-menu--dropdown-tablet .elementor-menu-toggle{ display:flex; } .mkj-header-row .mkj-nav{ flex:0 0 auto; justify-content:flex-end; } /* The panel is in flow and sized by whatever column it sits in, so it would widen the header row and shove the logo down. Take it out of flow and pin it to the header bar. The nav widget carries position:relative and would otherwise be the offset parent. Open/closed state is declared here rather than inherited, because Elementor scopes its own version inside a max-width:1024px query. */ .mkj-nav{ position:static; } .mkj-nav .elementor-menu-toggle + .elementor-nav-menu__container{ display:block; position:absolute; top:100%; left:0; right:0; z-index:99; overflow:hidden; max-height:0; transition:max-height .3s ease; background:#FFFFFF; box-shadow:0 14px 30px rgba(0,32,48,.16); } .mkj-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container{ max-height:var(--menu-height, 100vh); } } /* =========================== FOOTER ============================== Four columns at width:25% plus three 32px gaps overflows 100%, so the fourth column wrapped to a second row. Drive the columns with flex instead of percentages so the gap is accounted for automatically and the maths cannot drift. */ .mkj-footer-widgets{ flex-wrap:nowrap !important; align-items:flex-start; /* 32px gaps were eating the row: four equal quarters left the contact column too narrow for info@mkjcareservices.co.uk, which then broke mid-address. Tighter gap plus tighter side padding. */ gap:22px !important; padding-left:32px !important; padding-right:32px !important; } /* Unequal by design: the contact column carries a long email address and the badge column carries seven logos, so they get more of the row than the logo blurb and the fixed-width CQC widget need. */ .mkj-footer-col{ width:auto !important; min-width:0; } .mkj-footer-col:nth-child(1){ flex:1 1 0 !important; } .mkj-footer-col:nth-child(2){ flex:1.35 1 0 !important; } .mkj-footer-col:nth-child(3){ flex:1.25 1 0 !important; } .mkj-footer-col:nth-child(4){ flex:1.05 1 0 !important; } /* the email is one long unbreakable token, so keep it on one line and let it scale down rather than hyphenate an address */ .mkj-footer-col a[href^="mailto"]{ font-size:16px; white-space:nowrap; display:inline-block; } @media (max-width:1024px){ .mkj-footer-widgets{ flex-wrap:wrap !important; gap:28px !important; } .mkj-footer-col:nth-child(n){ flex:1 1 45% !important; } } @media (max-width:767px){ .mkj-footer-col:nth-child(n){ flex:1 1 100% !important; } .mkj-footer-col a[href^="mailto"]{ white-space:normal; overflow-wrap:anywhere; } } .mkj-footer-col img{ max-width:100%; height:auto; } .mkj-footer-col h2,.mkj-footer-col h4{ font-family:Archivo, Arial, sans-serif; font-weight:700; font-size:20px; line-height:1.3; color:#003040; margin:0 0 10px; } .mkj-footer-col h2:not(:first-child){ margin-top:16px; } .mkj-footer-col p{ font-size:17px; line-height:1.6; margin:0 0 10px; } .mkj-footer-col a{ text-decoration:none; } .mkj-footer-col a:hover{ text-decoration:underline; } /* the CQC widget is a third-party embed: reserve height so it can never shift layout, and never clip it (a max-height clip previously cut off the rating and the report link). */ .mkj-cqc iframe{ max-width:100%; } /* ======================== COPYRIGHT BAR ========================== */ .mkj-copyright{ color:rgba(255,255,255,.72); } .mkj-copyright .mkj-copy-inner{ max-width:1140px; margin:0 auto; font-size:14px; line-height:1.6; } .mkj-copyright a{ color:rgba(255,255,255,.9); text-decoration:underline; } .mkj-copyright a:hover{ color:#E8A200; } /* ================== GLOBAL LINK / BUTTON POLISH ================== Amber is a background colour only - never a link colour on light. (Enforces the palette rule from the design plan.) */ .elementor-button{ font-family:Archivo, Arial, sans-serif; font-weight:700; } /* ======================= FORM CONTROLS ========================== 56px controls and 48px+ tap targets per the accessibility floors. */ .elementor-field-group .elementor-field-textual{ min-height:56px; padding:12px 16px; } .elementor-field-group textarea.elementor-field-textual{ min-height:140px; } .elementor-field-group .elementor-field-label{ margin-bottom:6px; } .elementor-field-subgroup .elementor-field-option{ display:inline-flex; align-items:center; gap:8px; min-height:48px; margin-right:24px; } .elementor-field-subgroup input[type=radio], .elementor-field-subgroup input[type=checkbox]{ width:22px; height:22px; } /* honeypot: hidden from sight AND from assistive tech, correctly */ .elementor-field-group input[name="form_fields[hp_field]"], .elementor-field-group:has(input[name="form_fields[hp_field]"]){ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; } /* ---------- from mkj-motion.php ---------- */ :root{ --mkj-navy:#003040; --mkj-navy-deep:#001B26; --mkj-amber:#E8A200; --mkj-ease:cubic-bezier(.22,.61,.36,1); --mkj-ease-spring:cubic-bezier(.34,1.56,.64,1); } /* ========================================================== ZONE 1 - POINTER LAYER (desktop fine pointer only) ========================================================== */ .mkj-cursor,.mkj-cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:100000; border-radius:50%; opacity:0; transition:opacity .25s ease; will-change:transform; } .mkj-cursor{ width:10px; height:10px; background:var(--mkj-navy); margin:-5px 0 0 -5px; } .mkj-cursor-ring{ width:36px; height:36px; margin:-18px 0 0 -18px; border:1.5px solid rgba(0,48,64,.45); background:transparent; transition:opacity .25s ease, width .28s var(--mkj-ease-spring), height .28s var(--mkj-ease-spring), margin .28s var(--mkj-ease-spring), background-color .28s ease, border-color .28s ease; } html.mkj-anim-ready.mkj-pointer-active .mkj-cursor, html.mkj-anim-ready.mkj-pointer-active .mkj-cursor-ring{ opacity:1; } /* over an interactive element: ring blooms and warms */ html.mkj-cursor-hot .mkj-cursor-ring{ width:64px; height:64px; margin:-32px 0 0 -32px; background:rgba(232,162,0,.18); border-color:rgba(232,162,0,.75); } /* over a photograph: smaller, warmer, no label - this is a care site */ html.mkj-cursor-media .mkj-cursor-ring{ width:56px; height:56px; margin:-28px 0 0 -28px; background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.7); } html.mkj-cursor-hot .mkj-cursor{ transform:scale(0); } /* amber spark trail - HERO ONLY. A trail that follows you across a page about dementia is wrong. */ .mkj-spark{ position:fixed; width:4px; height:4px; border-radius:50%; background:var(--mkj-amber); pointer-events:none; z-index:99999; margin:-2px 0 0 -2px; opacity:0; will-change:transform,opacity; } /* magnetic pull on primary CTAs */ html.mkj-anim-ready .mkj-magnetic{ transition:transform .35s var(--mkj-ease-spring); will-change:transform; } /* ========================================================== ZONE 2 - SECTION FLOW (scroll-linked, fail-safe) Base state = fully visible. From-states only under .mkj-anim-ready. ========================================================== */ /* -- signature amber rule draws itself in from the left -- */ .mkj-rule{ position:relative; } .mkj-rule::before{ content:""; position:absolute; top:0; left:0; height:6px; width:100%; background:var(--mkj-amber); transform-origin:left center; } html.mkj-anim-ready .mkj-rule::before{ transform:scaleX(0); } html.mkj-anim-ready .mkj-rule.mkj-in::before{ transform:scaleX(1); transition:transform .7s var(--mkj-ease); } /* -- band-to-band colour bleed: sections dissolve instead of butting -- Purely decorative, touches no text. */ .mkj-bleed-top,.mkj-bleed-bottom{ position:relative; } .mkj-bleed-bottom::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:120px; pointer-events:none; background:linear-gradient(to bottom, transparent, var(--mkj-bleed-to,#001B26)); } .mkj-bleed-top::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:120px; pointer-events:none; background:linear-gradient(to top, transparent, var(--mkj-bleed-from,#F7F5F1)); } /* -- image mask reveal. The image is opaque THROUGHOUT; only the mask moves. Default state is inset(0) = fully visible. -- */ html.mkj-anim-ready [data-mkj-anim="mask"]{ clip-path:inset(0 88% 0 0); } html.mkj-anim-ready [data-mkj-anim="mask"].mkj-in{ clip-path:inset(0 0 0 0); transition:clip-path .8s var(--mkj-ease); } /* -- card / grid stagger -- */ html.mkj-anim-ready [data-mkj-anim="rise"], html.mkj-anim-ready .mkj-step, html.mkj-anim-ready .mkj-card{ transform:translateY(30px); } html.mkj-anim-ready [data-mkj-anim="rise"].mkj-in, html.mkj-anim-ready .mkj-step.mkj-in, html.mkj-anim-ready .mkj-card.mkj-in{ transform:none; transition:transform .7s var(--mkj-ease); } /* section headings rise as they enter */ html.mkj-anim-ready .mkj-h2{ transform:translateY(24px); } html.mkj-anim-ready .mkj-h2.mkj-in{ transform:none; transition:transform .7s var(--mkj-ease); } /* -- headline line-rise. If JS never splits the lines, it's a plain heading. -- */ .mkj-line{ display:block; overflow:hidden; } .mkj-line > span{ display:block; } html.mkj-anim-ready .mkj-line > span{ transform:translateY(105%); } html.mkj-anim-ready .mkj-split.mkj-in .mkj-line > span{ transform:translateY(0); transition:transform .8s var(--mkj-ease); } /* -- hero parallax: photo drifts slower than the card above it -- TWO TRANSFORM LAYERS, deliberately separated. The hero photo needs to do scroll parallax AND a 16s Ken Burns crossfade at the same time; both are transforms, and an inline JS transform on the same element would kill the keyframe. So .mkj-hero-media carries the parallax translate and the .mkj-hero-slide children keep their own scale/opacity keyframes. Vertical bleed (-14%/128%) means the translate can never expose an edge. */ .mkj-parallax{ will-change:transform; } .mkj-hero-media{ position:absolute; left:0; right:0; top:-14%; height:128%; z-index:0; pointer-events:none; } .mkj-hero-media .mkj-hero-slide{ position:absolute; inset:0; } /* ========================================================== ZONE 3 - hover feedback (survives reduced motion: it's feedback) ========================================================== */ .elementor-button,.mkj-btn{ transition:transform .15s ease-out, box-shadow .15s ease-out, background-color .15s ease-out; } .elementor-button:hover,.mkj-btn:hover{ transform:translateY(-2px); } .mkj-card,.elementor-widget-image-box .elementor-image-box-wrapper{ transition:transform .18s var(--mkj-ease), box-shadow .18s var(--mkj-ease); } .mkj-card:hover,.elementor-widget-image-box .elementor-image-box-wrapper:hover{ transform:translateY(-3px); box-shadow:0 2px 4px rgba(0,32,48,.08), 0 16px 40px rgba(0,32,48,.10); } /* focus ring: instant, always, never animated, never suppressed */ a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--mkj-amber) !important; outline-offset:2px !important; transition:none !important; } /* ========================================================== ZONE 3 - EXPLICIT MOTION EXCLUSION LIST A quote that slides in undermines the quote. A regulator rating that animates looks spun. A phone number that moves is one a shaking hand misses. ========================================================== */ .mkj-no-motion,.mkj-no-motion *, .elementor-widget-testimonial,.elementor-widget-testimonial *, .mkj-trust,.mkj-trust *, .mkj-cqc,.mkj-cqc *, #mkj-sticky-call-bar,#mkj-sticky-call-bar *, .elementor-form,.elementor-form *, a[href^="tel:"]{ animation:none !important; clip-path:none !important; } .mkj-no-motion [data-mkj-anim], .elementor-widget-testimonial [data-mkj-anim], .mkj-cqc [data-mkj-anim]{ opacity:1 !important; transform:none !important; clip-path:none !important; } /* ========================================================== SAFETY NETS ========================================================== */ @media (hover:none),(pointer:coarse){ .mkj-cursor,.mkj-cursor-ring,.mkj-spark{ display:none !important; } } /* the cursor layer is position:fixed, so it gets captured in print/PDF exports as a stray dot-and-ring. Never print it. */ @media print{ .mkj-cursor,.mkj-cursor-ring,.mkj-spark{ display:none !important; } [data-mkj-anim],.mkj-line > span,.mkj-step,.mkj-card{ opacity:1 !important; transform:none !important; clip-path:none !important; } .mkj-rule::before{ transform:scaleX(1) !important; } } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } /* Avada's own animations start at opacity:0 - the reset must force visibility, not merely cancel the transition. */ [data-mkj-anim],.mkj-line > span,.elementor-invisible{ opacity:1 !important; transform:none !important; clip-path:none !important; } .mkj-rule::before{ transform:scaleX(1) !important; } .elementor-invisible{ visibility:visible !important; animation:none !important; } .mkj-cursor,.mkj-cursor-ring,.mkj-spark{ display:none !important; } } /* ---------- from mkj-components.php ---------- */ :root{ --mkj-warm:#F7F5F1; --mkj-ink2:#435057; --mkj-border:#E4DFD7; --mkj-e1:0 1px 2px rgba(0,32,48,.06), 0 8px 24px rgba(0,32,48,.06); --mkj-e2:0 2px 4px rgba(0,32,48,.08), 0 16px 40px rgba(0,32,48,.10); } /* ===================== HERO ===================== The H1 must clear the answer card's overlap. Generous bottom padding is what stops the card slicing the headline. */ /* background-COLOR, never the shorthand: the shorthand would reset the Elementor container background-image and empty the hero. This is the floor under the photograph, so white hero copy can never end up on white if the image is slow, blocked or missing. */ .mkj-hero{ position:relative; overflow:hidden; background-color:#001B26; } .mkj-hero .mkj-hero-h1{ position:relative; z-index:3; } .mkj-hero .mkj-hero-h1 h1{ letter-spacing:-.02em; line-height:1.05; text-shadow:0 2px 24px rgba(0,20,30,.45); } /* Eyebrow above the H1. White, not amber: measured against the actual hero photographs, amber ran between 1.6:1 and 3.4:1 depending on the image - nowhere near the 4.5:1 floor, and no scrim strength that keeps the photo visible can rescue it. White measures 6.6:1 on the lightest hero. Amber still carries the accent on buttons, rules, step discs and quote marks. */ .mkj-eyebrow p{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:#FFFFFF; margin:0 0 10px; } /* ================= ANSWER CARD ================= Reads as a card lifted off the photograph, not as page text. */ .mkj-answer-card{ border-radius:14px; border-top:6px solid #E8A200; } .mkj-answer-card .elementor-widget-text-editor p{ color:#003040; } /* ==================== CARDS ==================== */ .mkj-card-white{ background:#fff; border:1px solid var(--mkj-border); border-radius:12px; padding:32px; box-shadow:var(--mkj-e1); } .mkj-card-navy{ background:#003040; border-radius:12px; padding:36px 34px; box-shadow:var(--mkj-e2); } .mkj-card-navy, .mkj-card-navy p, .mkj-card-navy li, .mkj-card-navy .elementor-icon-list-text{ color:#fff !important; } .mkj-card-navy h3{ color:#fff !important; } .mkj-card-navy .elementor-icon-list-icon svg, .mkj-card-navy .elementor-icon-list-icon i{ color:#7FD1A8 !important; fill:#7FD1A8 !important; } /* =================== STEPS ==================== Big amber numeral discs, white cards, real elevation. */ .mkj-step{ background:#fff; border:1px solid var(--mkj-border); border-radius:12px; padding:28px 26px 30px; box-shadow:var(--mkj-e1); } .mkj-step-num{ width:52px; height:52px; border-radius:50%; background:#E8A200; color:#001B26; font-family:Archivo,Arial,sans-serif; font-weight:800; font-size:24px; display:flex; align-items:center; justify-content:center; } .mkj-step h3{ font-family:Archivo,Arial,sans-serif; font-weight:700; } .mkj-step p{ color:var(--mkj-ink2); margin:0; } /* ================ PULL QUOTE ================== A full-bleed navy contrast moment mid-page, with an oversized amber quote mark. This is the page's one loud beat. */ .mkj-quote-band{ position:relative; } .mkj-quote{ margin:0; padding:0; border:0; position:relative; max-width:920px; } .mkj-quote::before{ content:"\201C"; position:absolute; left:-8px; top:-56px; font-family:Georgia,serif; font-size:160px; line-height:1; color:#E8A200; opacity:.9; pointer-events:none; } .mkj-quote p{ font-size:34px; line-height:1.35; color:#fff; margin:0 0 18px; position:relative; } .mkj-quote cite{ font-family:Archivo,Arial,sans-serif; font-style:normal; font-weight:700; font-size:16px; letter-spacing:.08em; text-transform:uppercase; color:#E8A200; } @media (max-width:767px){ .mkj-quote p{ font-size:24px; } .mkj-quote::before{ font-size:110px; top:-40px; } } /* ============== FRAMED PHOTO ================== */ .mkj-photo-frame{ position:relative; } .mkj-photo-frame::before{ content:""; position:absolute; inset:auto auto -18px -18px; width:58%; height:64%; border-left:6px solid #E8A200; border-bottom:6px solid #E8A200; border-radius:0 0 0 12px; pointer-events:none; } .mkj-photo-frame img{ border-radius:12px; position:relative; z-index:2; display:block; } .mkj-photo-frame figcaption, .mkj-photo-frame .widget-image-caption{ position:relative; z-index:2; font-size:16px; color:var(--mkj-ink2); padding-top:14px; text-align:left !important; } /* ================== ACCORDION ================= */ .mkj-accordion .elementor-accordion-item{ background:#fff; border:1px solid var(--mkj-border) !important; border-radius:10px; margin-bottom:12px; overflow:hidden; box-shadow:var(--mkj-e1); } .mkj-accordion .elementor-tab-title{ padding:20px 24px !important; } .mkj-accordion .elementor-tab-content{ padding:0 24px 22px !important; border:0 !important; } /* ============== SECTION HEADINGS =============== */ .mkj-h2 h2{ letter-spacing:-.015em; } .mkj-h2{ position:relative; } /* ================= COST / SIGNPOST ============= */ .mkj-signpost{ background:#fff; border:1px solid var(--mkj-border); border-left:6px solid #E8A200; border-radius:12px; padding:34px 32px; box-shadow:var(--mkj-e1); } /* ============ HOME HERO - static ================== Was a two-slide Ken Burns crossfade. Retired: it depended on a bespoke absolutely-positioned layer plus a keyframe to be visible at all, and twice rendered an empty hero. The photo is now a plain Elementor container background - the same mechanism that has worked first time on all five service heroes. Motion on this page comes from the section reveals, the patterns and the cursor, which are all robust. */ .mkj-home-hero{ position:relative; overflow:hidden; background-color:#001B26; } .mkj-home-hero > .e-con-inner{ position:relative; z-index:1; } /* scrim as a pseudo-element BELOW the content (content is z-index 1) */ .mkj-home-hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; /* top stop lifted from .34: the eyebrow sits up here and measured 4.34:1 against the photograph, just under the AA floor. */ background:linear-gradient(to top, rgba(0,27,38,.90) 0%, rgba(0,27,38,.70) 45%, rgba(0,27,38,.50) 100%); } /* ============ TRUST STRIP MOTION =============== Staggered entrance, then colour on hover. No marquee: moving logos are hard to read and it cheapens accreditations. */ .mkj-trust img{ opacity:.86; filter:saturate(.9); transition:opacity .25s ease, filter .25s ease, transform .25s var(--mkj-ease); } .mkj-trust a:hover img, .mkj-trust img:hover{ opacity:1; filter:saturate(1.05); transform:translateY(-3px) scale(1.04); } /* Entrance is transform-only. An opacity:0 from-state here previously left the whole strip permanently invisible when the reveal never fired. */ html.mkj-anim-ready .mkj-trust-in a, html.mkj-anim-ready .mkj-trust-in > div > img{ transform:translateY(16px); } html.mkj-anim-ready .mkj-trust-in.mkj-in a, html.mkj-anim-ready .mkj-trust-in.mkj-in > div > img{ transform:none; transition:transform .6s var(--mkj-ease); } /* stagger, CSS-only so it cannot depend on JS */ html.mkj-anim-ready .mkj-trust-in.mkj-in > div > *:nth-child(1){ transition-delay:.00s; } html.mkj-anim-ready .mkj-trust-in.mkj-in > div > *:nth-child(2){ transition-delay:.06s; } html.mkj-anim-ready .mkj-trust-in.mkj-in > div > *:nth-child(3){ transition-delay:.12s; } html.mkj-anim-ready .mkj-trust-in.mkj-in > div > *:nth-child(4){ transition-delay:.18s; } html.mkj-anim-ready .mkj-trust-in.mkj-in > div > *:nth-child(5){ transition-delay:.24s; } html.mkj-anim-ready .mkj-trust-in.mkj-in > div > *:nth-child(6){ transition-delay:.30s; } html.mkj-anim-ready .mkj-trust-in.mkj-in > div > *:nth-child(7){ transition-delay:.36s; } @media (prefers-reduced-motion: reduce){ .mkj-trust img{ opacity:1 !important; transform:none !important; } } /* ============ STATS / MARKS / VOICES / LINKS ==== */ .mkj-stat-fig{ font-family:Archivo,Arial,sans-serif; font-weight:800; font-size:42px; line-height:1; color:#003040; margin-bottom:8px; } .mkj-stat-lab{ font-size:17px; color:var(--mkj-ink2); } .mkj-marks{ list-style:none; margin:24px 0 0; padding:0; max-width:860px; } .mkj-mark-row{ display:flex; align-items:center; gap:22px; padding:16px 0; border-bottom:1px solid var(--mkj-border); } .mkj-mark-row:last-child{ border-bottom:0; } .mkj-mark-row img{ flex:0 0 auto; } .mkj-mark-row strong{ display:block; font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:18px; color:#003040; } .mkj-mark-row span{ display:block; font-size:17px; color:var(--mkj-ink2); } @media (max-width:640px){ .mkj-mark-row{ flex-direction:column; align-items:flex-start; gap:10px; } } /* testimonial cards: words are the medium, so no avatars at all */ .mkj-voice{ margin:0; padding:30px 28px; height:100%; background:#fff; border:1px solid var(--mkj-border); border-left:6px solid #E8A200; border-radius:12px; box-shadow:var(--mkj-e1); } .mkj-voice p{ font-size:19px; line-height:1.6; color:#003040; margin:0 0 16px; } .mkj-voice cite{ font-family:Archivo,Arial,sans-serif; font-style:normal; font-weight:700; font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:#946800; } .mkj-linkgroups h2{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:26px; color:#003040; margin:36px 0 10px; } .mkj-linkgroups h2:first-child{ margin-top:8px; } .mkj-links{ list-style:none; margin:0; padding:0; max-width:760px; } .mkj-links li{ padding:12px 0; border-bottom:1px solid var(--mkj-border); } .mkj-links li:last-child{ border-bottom:0; } .mkj-links a{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:18px; color:#003040; text-decoration:none; } .mkj-links a:hover{ text-decoration:underline; } .mkj-links span{ display:block; font-size:17px; color:var(--mkj-ink2); margin-top:2px; } /* contact block */ .mkj-contact-block .mkj-phone{ display:inline-block; font-family:Archivo,Arial,sans-serif; font-weight:800; font-size:34px; color:#003040; text-decoration:none; margin-bottom:6px; } .mkj-contact-block .mkj-phone:hover{ color:#946800; } /* h2 rather than h3: these are the first headings after the page h1, so an h3 was a skipped level. Kept at subhead size visually. */ .mkj-contact-block h2,.mkj-contact-block h3{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:20px; line-height:1.35; color:#003040; margin:26px 0 8px; } .mkj-contact-block p{ margin:0 0 10px; } .mkj-contact-block a{ overflow-wrap:anywhere; } /* ================== COVERAGE MAP ================== WP Go Maps on OpenLayers (no API key, renders the same locally and live). Torbay boundary is ONS Local Authority District E06000027. width:100% is load-bearing rather than cosmetic: the plugin renders its map holder as float:left, which contributes nothing to in-flow width, so as a flex item of the Elementor container the widget collapses to 0px and the map disappears entirely. */ .mkj-map{ width:100%; } /* The plugin sets overflow:auto inline on its map holder, which makes it a scroll container. On macOS a two-finger gesture that starts over a scroll container is latched to it for the whole gesture, and since this one has nothing to scroll the page simply stops dead. `clip` crops identically but is NOT a scroll container, so the gesture passes through to the page. `hidden` would not do - it still creates one. Same trap as [[overflow-clip-not-hidden-for-sticky]]. */ .mkj-map .wpgmza_map{ overflow:clip !important; } .mkj-map .ol-viewport{ overscroll-behavior:auto; } /* Edge to edge, so no rounded corners - they only read as a mistake on a full-bleed element. */ /* The heading shares the full-width band, so pull it back to the content column. Specificity matches Elementor's own `.elementor.elementor .e-con > .elementor-widget{max-width:100%}` (0,4,0), which would otherwise win. Both the boxed and full container shapes are covered, since `content_width:full` drops the .e-con-inner wrapper. */ .elementor .e-con > .e-con-inner > .elementor-widget.mkj-bleed-head, .elementor .e-con > .elementor-widget.mkj-bleed-head{ width:100%; max-width:1220px; margin-left:auto; margin-right:auto; padding-left:40px; padding-right:40px; } @media (max-width:767px){ .elementor .e-con > .e-con-inner > .elementor-widget.mkj-bleed-head, .elementor .e-con > .elementor-widget.mkj-bleed-head{ padding-left:20px; padding-right:20px; } } /* The small placement sits inside a column rather than edge to edge, so it keeps the card treatment the full-bleed one drops. */ .mkj-map-small .wpgmza_map, .mkj-map-small .ol-viewport{ border-radius:12px; } .mkj-map-small .wpgmza_map{ border:1px solid var(--mkj-border); box-shadow:var(--mkj-e1); } @media (max-width:767px){ /* 760px is a lot of phone screen - the shape still reads at 440 */ .mkj-map .wpgmza_map{ height:440px !important; } .mkj-map-small .wpgmza_map{ height:320px !important; } } /* inverted stats for the navy band */ .mkj-stats-inv .mkj-stat-fig{ color:#FFFFFF; } .mkj-stats-inv .mkj-stat-lab{ color:rgba(255,255,255,.78); } .mkj-stat-inv{ border-left:3px solid #E8A200; padding-left:18px; } /* ============ LEGAL / LONG-FORM =============== */ .mkj-legal{ max-width:760px; } .mkj-legal h2{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:26px; color:#003040; margin:40px 0 12px; } .mkj-legal h2:first-child{ margin-top:0; } .mkj-legal p{ margin:0 0 16px; } .mkj-legal ul{ margin:0 0 20px; padding-left:22px; } .mkj-legal li{ margin-bottom:8px; } .mkj-legal a{ overflow-wrap:anywhere; } /* ============ SITUATION CARDS =================== Leads with the user's own words rather than the service taxonomy. Families ring describing a situation, not a product. */ .mkj-sit-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } @media (max-width:860px){ .mkj-sit-grid{ grid-template-columns:1fr; } } .mkj-sit{ display:flex; align-items:flex-start; gap:18px; background:#fff; border:1px solid var(--mkj-border); border-left:5px solid #E8A200; border-radius:12px; padding:22px 24px; text-decoration:none; box-shadow:var(--mkj-e1); transition:transform .18s var(--mkj-ease), box-shadow .18s var(--mkj-ease), border-color .18s ease; } .mkj-sit:hover{ transform:translateY(-3px); box-shadow:var(--mkj-e2); } .mkj-sit-q{ display:block; font-size:20px; line-height:1.4; color:#003040; font-weight:600; margin:0 0 8px; } .mkj-sit-a{ display:block; font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:16px; color:#946800; } .mkj-sit-icon{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:#F7F5F1; color:#003040; display:flex; align-items:center; justify-content:center; font-size:18px; } /* the "browse by service" strip: secondary to the situations above it */ .mkj-svc-mini{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .mkj-svc-mini a{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--mkj-border); border-radius:999px; padding:10px 18px; text-decoration:none; font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:16px; color:#003040; background:#fff; transition:border-color .18s ease, transform .18s ease; } .mkj-svc-mini a:hover{ border-color:#003040; transform:translateY(-2px); } /* ============ PROFESSIONAL / REFERRER =========== This audience checks the regulator before they ring, so the CQC position is stated plainly rather than buried. */ .mkj-pro-fact{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } @media (max-width:860px){ .mkj-pro-fact{ grid-template-columns:1fr; } } .mkj-pro-fact > div{ background:#fff; border:1px solid var(--mkj-border); border-top:5px solid #003040; border-radius:12px; padding:24px; box-shadow:var(--mkj-e1); } .mkj-pro-fact h3{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:19px; color:#003040; margin:0 0 10px; } .mkj-pro-fact p, .mkj-pro-fact li{ font-size:17px; color:var(--mkj-ink2); } .mkj-pro-fact ul{ margin:0; padding-left:20px; } .mkj-onrequest{ background:#F7F5F1; border:1px dashed #B9C2C6; border-radius:12px; padding:24px 26px; } .mkj-onrequest h2,.mkj-onrequest h3{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:19px; line-height:1.35; color:#003040; margin:0 0 10px; } /* ============ SERVICE CARDS (hub + home) ======= width:23% + 24px gaps left the cards ~180px wide: titles wrapped to two lines and body copy broke every few words. flex:1 divides the row after the gap, so the cards are as wide as the row actually allows. */ .mkj-cards-4{ flex-wrap:nowrap !important; align-items:stretch !important; } .mkj-cards-4 > .mkj-card{ flex:1 1 0 !important; width:auto !important; min-width:0; } @media (max-width:1024px){ .mkj-cards-4{ flex-wrap:wrap !important; } .mkj-cards-4 > .mkj-card{ flex:1 1 46% !important; } } @media (max-width:640px){ .mkj-cards-4 > .mkj-card{ flex:1 1 100% !important; } } /* ============ SERVICE CARDS (hub) ============== */ .mkj-svc-card{ display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid var(--mkj-border); border-radius:12px; overflow:hidden; text-decoration:none; box-shadow:var(--mkj-e1); transition:transform .18s ease-out, box-shadow .18s ease-out; } .mkj-svc-card:hover{ transform:translateY(-3px); box-shadow:var(--mkj-e2); } .mkj-svc-img{ display:block; height:200px; background-size:cover; background-position:center 28%; background-repeat:no-repeat; } .mkj-svc-body{ display:flex; flex-direction:column; gap:8px; padding:22px 22px 24px; flex:1 1 auto; } .mkj-svc-title{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:19px; line-height:1.3; color:#003040; /* 20px wrapped "Night Time Care" onto two lines in a 267px card, so the four cards' body copy started at different heights. 19px fits every title on one line; the min-height keeps them aligned if a longer service name is ever added. */ min-height:calc(19px * 1.3); } .mkj-svc-text{ font-size:17px; line-height:1.55; color:var(--mkj-ink2); flex:1 1 auto; } .mkj-svc-link{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:17px; color:#003040; } .mkj-svc-card:hover .mkj-svc-link{ color:#946800; } /* ============ RECRUITMENT STRIP ================ */ .mkj-recruit{ border-top:1px solid var(--mkj-border); } /* keep every measure honest without leaving the right half dead: prose caps at 720px but sits inside a two-column row so the opposite column carries a card. */ .mkj-measure p{ max-width:720px; } /* ================================================================== SECTION TEXTURE & COLOUR The page read as an all-white stack with one navy card. These give each band its own surface without shouting: pure CSS gradients, no image requests, all low-contrast so text contrast is untouched. ================================================================== */ /* new surface tone between white and navy */ .mkj-band-sand{ background-color:#EFEAE1 !important; } /* -------------------------------------------------------------- IMPORTANT: these layers are animated with background-position, NOT transform. A transform on a pseudo-element promotes it to a compositing layer, and Safari's print/PDF rasteriser paints those layers with a BLACK backdrop - which turned two whole bands solid black in export. background-position is a paint-only change, so it parallaxes without ever creating a layer. Because a repeating gradient tiles infinitely, the layer can sit at inset:0 and still move, so it can never overrun its band either. -------------------------------------------------------------- */ /* 1. dot grid */ .mkj-pattern-dots{ position:relative; } .mkj-pattern-dots::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background-image:radial-gradient(rgba(0,48,64,.15) 1.7px, transparent 1.8px); background-size:26px 26px; background-position:0 var(--mkj-pat-y, 0px); opacity:var(--mkj-pat-fade, 1); } /* 2. soft organic blooms (replaced a 45deg hatch) A diagonal stripe field translated vertically reads as sliding SIDEWAYS - a barber-pole illusion - and fine repeating high-contrast stripes are a known trigger for visual discomfort. Wrong pattern for a 70+ audience at any speed. These are large, soft, widely-spaced radial blooms: no repeating edges, so no moire and no false motion. They read as depth when they drift rather than as a moving grille. */ .mkj-pattern-bloom{ position:relative; overflow:hidden; } .mkj-pattern-bloom::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background-image: radial-gradient(circle 340px at 12% 18%, rgba(0,48,64,.075) 0%, rgba(0,48,64,0) 70%), radial-gradient(circle 420px at 84% 30%, rgba(232,162,0,.13) 0%, rgba(232,162,0,0) 72%), radial-gradient(circle 300px at 62% 96%, rgba(0,48,64,.06) 0%, rgba(0,48,64,0) 70%); background-repeat:no-repeat; background-position: 0 var(--mkj-pat-y, 0px), 0 calc(var(--mkj-pat-y, 0px) * -0.6), 0 calc(var(--mkj-pat-y, 0px) * 0.35); } /* 3. amber glow - REMOVED. Caused two separate rendering failures (solid amber block from an auto-sized radius, then a hard-edged circle on a black backdrop in Safari). Least important decoration on the page; the dot grid, blooms and arcs already give every band its own surface. Not worth a third attempt. The .mkj-glow-amber class is now a no-op so any page still referencing it degrades silently to a plain background. */ /* 4. large concentric arcs for the navy bands, drawn as repeating radial rings so they can also move by position. */ .mkj-arcs{ position:relative; overflow:hidden; } .mkj-arcs::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background-image:repeating-radial-gradient(circle at 92% -10%, rgba(255,255,255,.055) 0 1px, transparent 1px 96px); background-position:0 var(--mkj-pat-y, 0px); } /* every pattern sits behind content */ .mkj-pattern-dots > *, .mkj-pattern-bloom > *, .mkj-arcs > *{ position:relative; z-index:1; } /* ---- "good to know" note, fills the short column in a 2-up row ---- */ .mkj-note{ background:#fff; border:1px solid var(--mkj-border); border-left:6px solid #003040; border-radius:10px; padding:22px 24px; box-shadow:var(--mkj-e1); } .mkj-note h2,.mkj-note h3,.mkj-note h4{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:17px; line-height:1.35; letter-spacing:.02em; color:#003040; margin:0 0 8px; } .mkj-note p{ font-size:17px; color:var(--mkj-ink2); margin:0; } /* Correct for genuine printing. NOTE: Safari's "Export as PDF" ignores print media entirely, so this is not a safety net - screen rendering has to be right on its own. */ @media print{ .mkj-pattern-dots::before,.mkj-pattern-bloom::before, .mkj-arcs::after{ display:none !important; } } /* patterns hold still for anyone who asked for that */ @media (prefers-reduced-motion: reduce){ .mkj-pattern-dots::before,.mkj-pattern-bloom::before, .mkj-arcs::after{ background-position:0 0 !important; opacity:1 !important; } } /* ---- amber divider rule between bands ---- */ .mkj-topline{ border-top:6px solid #E8A200; } /* ---------- from sticky-mobile-call-bar.php ---------- */ #mkj-sticky-call-bar { display: none; } @media (max-width: 768px) { #mkj-sticky-call-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: #003040; padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 10px; box-shadow: 0 -2px 10px rgba(0,0,0,0.15); } #mkj-sticky-call-bar a { flex: 1; text-align: center; padding: 14px 10px; font-size: 16px; font-weight: 600; border-radius: 6px; text-decoration: none; min-height: 44px; display: flex; align-items: center; justify-content: center; } /* Scoped to the id deliberately. The Elementor kit emits `.elementor-kit-207 a { color: #003040 }`, which is (0,1,1) and outranked a bare `.mkj-sticky-call` (0,1,0) - so the white label was being repainted navy on a navy bar and disappeared entirely. An id .elementor-kit-207 settles it. */ /* Phone is the emphasised action: amber, and on the right under the thumb. Arrange care takes the quieter outlined treatment. Scoped to the id deliberately - the Elementor kit emits `.elementor-kit-207 a { color:#003040 }` at (0,1,1), which outranks a bare class and repainted the label navy on navy. */ #mkj-sticky-call-bar a.mkj-sticky-call { background: #E8A200; color: #001B26; border: 2px solid #E8A200; } #mkj-sticky-call-bar a.mkj-sticky-arrange { background: transparent; color: #FFFFFF; border: 2px solid #FFFFFF; } body { padding-bottom: 72px; } } /* ================================================================== * VACANCIES (behaviour lives in novamira-sandbox/mkj-vacancies.php) * Kept here rather than in that PHP file so the styling survives a * database push - see the migration note at the top of this block. * ================================================================== */ .mkj-vacancies{ margin:0; } .mkj-vac-h{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:34px; line-height:1.25; color:#003040; margin:0 0 22px; } .mkj-vac-list{ list-style:none; margin:0; padding:0; display:grid; gap:22px; } .mkj-vac-card{ background:#FFFFFF; border:1px solid #E4DFD7; border-radius:10px; border-top:5px solid #003040; padding:26px 28px; box-shadow:0 1px 2px rgba(0,32,48,.06), 0 8px 22px rgba(0,32,48,.05); } .mkj-vac-card.is-example{ border-top-color:#B4761A; } .mkj-vac-title{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:25px; line-height:1.25; margin:0 0 6px; color:#003040; } .mkj-vac-title a{ color:#003040; text-decoration:none; } .mkj-vac-title a:hover{ color:#946800; text-decoration:underline; text-underline-offset:3px; } .mkj-vac-ref{ font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:#71838C; font-weight:600; margin:0 0 16px; } /* Facts as a definition grid: label above value, so a phone can stack them without the label and value ever separating. */ .mkj-vac-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px 26px; margin:0 0 18px; padding:18px 0 0; border-top:1px solid #EDE9E2; } .mkj-vac-facts > div{ margin:0; } .mkj-vac-facts dt{ font-size:12.5px; letter-spacing:.11em; text-transform:uppercase; color:#71838C; font-weight:700; margin:0 0 3px; } .mkj-vac-facts dd{ margin:0; font-size:17px; line-height:1.45; color:#14232B; font-weight:600; } .mkj-vac-sum{ font-size:17px; line-height:1.6; color:#435057; margin:0 0 20px; max-width:68ch; } .mkj-vac-more{ margin:0; } .mkj-vac-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:14px 26px; background:#E8A200; color:#001B26 !important; font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:17px; border-radius:6px; text-decoration:none !important; border:2px solid #E8A200; transition:background .2s ease, border-color .2s ease; } .mkj-vac-btn:hover{ background:#FFB711; border-color:#FFB711; } .mkj-vac-btn.is-ghost{ background:transparent; color:#003040 !important; border-color:#003040; } .mkj-vac-btn.is-ghost:hover{ background:#003040; color:#FFFFFF !important; } .mkj-vac-btn:focus-visible{ outline:3px solid #003040; outline-offset:3px; } /* The example flag has to be impossible to mistake for part of an advert. */ .mkj-vac-flag{ display:block; margin:0 0 14px; padding:10px 14px; background:#FAF0DF; border:1px solid #B4761A; border-radius:5px; color:#7A4E0C; font-size:14.5px; font-weight:650; line-height:1.5; } .mkj-vac-empty{ background:#F7F5F1; border:1px solid #E4DFD7; border-radius:10px; padding:30px 32px; } .mkj-vac-empty h3{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:24px; line-height:1.3; color:#003040; margin:0 0 10px; } .mkj-vac-empty p{ font-size:17px; line-height:1.65; color:#435057; margin:0 0 14px; max-width:68ch; } .mkj-vac-empty-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin:20px 0 0 !important; } .mkj-vac-or{ font-size:16px; color:#71838C; } /* Single vacancy page */ .mkj-vac-single{ margin:0 0 26px; } .mkj-vac-facts.is-single{ border-top:0; border-bottom:1px solid #EDE9E2; padding:0 0 22px; } .mkj-vac-apply{ margin:36px 0 0; padding:28px 30px; background:#F7F5F1; border:1px solid #E4DFD7; border-radius:10px; } .mkj-vac-apply h2{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:26px; line-height:1.3; color:#003040; margin:0 0 10px; } .mkj-vac-back{ margin:18px 0 0 !important; font-size:16px; } @media (max-width:767px){ .mkj-vac-card{ padding:22px 20px; } .mkj-vac-title{ font-size:22px; } .mkj-vac-h{ font-size:28px; } .mkj-vac-facts{ grid-template-columns:1fr; gap:12px; } .mkj-vac-btn{ width:100%; } .mkj-vac-empty{ padding:24px 20px; } .mkj-vac-apply{ padding:22px 20px; } } /* ---------- filled vacancies, and sharing ---------- */ .mkj-vac-filled{ background:#F7F5F1; border:1px solid #E4DFD7; border-left:5px solid #003040; border-radius:8px; padding:26px 28px; margin:0 0 30px; } .mkj-vac-filled h2{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:27px; line-height:1.25; color:#003040; margin:0 0 10px; } .mkj-vac-filled p{ font-size:17px; line-height:1.65; color:#435057; margin:0 0 14px; max-width:68ch; } /* the original advert stays readable but visibly no longer the live thing */ .mkj-vac-was{ opacity:.72; } .mkj-vac-share{ margin:38px 0 0; padding:28px 30px; background:#FFFFFF; border:1px solid #E4DFD7; border-radius:10px; } .mkj-vac-share h2{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:24px; line-height:1.3; color:#003040; margin:0 0 8px; } .mkj-vac-share > p{ font-size:17px; line-height:1.6; color:#435057; margin:0 0 18px; max-width:68ch; } .mkj-vac-share-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px; } .mkj-vac-share-list li{ margin:0; padding:0; } /* One neutral style for all of them, deliberately: brand-coloured share buttons turn a care advert into a strip of other companies' logos. */ .mkj-share-btn{ display:inline-flex; align-items:center; gap:9px; min-height:48px; padding:12px 18px; background:#FFFFFF; color:#003040 !important; border:2px solid #CFCAC1; border-radius:6px; font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:16px; text-decoration:none !important; cursor:pointer; transition:border-color .2s ease, background .2s ease, color .2s ease; } .mkj-share-btn svg{ flex:0 0 auto; } .mkj-share-btn:hover{ background:#003040; color:#FFFFFF !important; border-color:#003040; } .mkj-share-btn:focus-visible{ outline:3px solid #E8A200; outline-offset:3px; } .mkj-share-said{ margin:16px 0 0 !important; min-height:1.5em; font-size:16px; font-weight:650; color:#1F7A5C; } @media (max-width:767px){ .mkj-vac-share{ padding:22px 20px; } .mkj-vac-filled{ padding:22px 20px; } .mkj-vac-share-list{ gap:10px; } .mkj-share-btn{ flex:1 1 calc(50% - 5px); justify-content:center; } } /* ---------- refer a friend, and the footer vacancy list ---------- */ .mkj-refer{ background:#003040; color:#FFFFFF; border-radius:12px; padding:34px 36px; margin:0 0 26px; } .mkj-refer-badge{ display:inline-block; margin:0 0 12px; padding:6px 14px; background:#E8A200; color:#001B26; border-radius:100px; font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; } .mkj-refer h2{ font-family:Archivo,Arial,sans-serif; font-weight:800; font-size:36px; line-height:1.15; color:#FFFFFF; margin:0 0 14px; } .mkj-refer-lead{ font-size:19px; line-height:1.65; color:rgba(255,255,255,.9); margin:0 0 22px; max-width:66ch; } .mkj-refer-lead strong{ color:#FFD37A; } .mkj-refer-steps{ list-style:none; counter-reset:r; margin:0 0 20px; padding:0; display:grid; gap:14px; } .mkj-refer-steps li{ counter-increment:r; position:relative; padding-left:46px; font-size:17px; line-height:1.6; color:rgba(255,255,255,.9); max-width:64ch; } .mkj-refer-steps li::before{ content:counter(r); position:absolute; left:0; top:-1px; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.14); color:#FFFFFF; display:flex; align-items:center; justify-content:center; font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:15px; } .mkj-refer-steps strong{ color:#FFFFFF; } .mkj-refer-small{ font-size:15px; line-height:1.6; color:rgba(255,255,255,.66); margin:0; max-width:64ch; } /* Footer list. Inherits the footer column's type, so it only needs structure. */ .mkj-mini-vacs h2{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:20px; line-height:1.3; color:#003040; margin:16px 0 10px; } .mkj-mini-vacs ul{ list-style:none; margin:0; padding:0; } .mkj-mini-vacs li{ margin:0 0 10px; line-height:1.4; } .mkj-mini-vacs li a{ color:#946800; font-weight:600; text-decoration:none; } .mkj-mini-vacs li a:hover{ text-decoration:underline; } .mkj-mini-area{ display:block; font-size:14px; color:#435057; font-weight:400; } .mkj-mini-all{ margin:12px 0 0 !important; font-size:15px; } .mkj-mini-all a{ color:#946800; } @media (max-width:767px){ .mkj-refer{ padding:26px 22px; } .mkj-refer h2{ font-size:29px; } .mkj-refer-lead{ font-size:17px; } } /* ---------- independent reviews (homecare.co.uk) ---------- */ .mkj-hc{ margin:0; } .mkj-hc-score{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; background:#003040; color:#FFFFFF; border-radius:12px; padding:28px 32px; margin:0 0 28px; } .mkj-hc-num{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; background:#FFFFFF; border-radius:10px; padding:14px 22px; min-width:118px; } .mkj-hc-num span{ font-family:Archivo,Arial,sans-serif; font-weight:800; font-size:46px; line-height:1; color:#003040; font-variant-numeric:tabular-nums; } .mkj-hc-num small{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#435057; font-weight:700; margin-top:5px; } .mkj-hc-meta{ flex:1 1 260px; min-width:0; } .mkj-hc-lead{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:23px; line-height:1.3; color:#FFFFFF; margin:0 0 8px; } .mkj-hc-lead a{ color:#FFD37A; text-decoration:underline; text-underline-offset:3px; } .mkj-hc-lead a:hover{ color:#FFFFFF; } .mkj-hc-sub{ font-size:16px; line-height:1.6; color:rgba(255,255,255,.82); margin:0; max-width:64ch; } .mkj-hc-list{ list-style:none; margin:0; padding:0; display:grid; gap:20px; } .mkj-hc-item{ background:#FFFFFF; border:1px solid #E4DFD7; border-left:4px solid #E8A200; border-radius:10px; padding:24px 26px; } .mkj-hc-item blockquote{ margin:0; padding:0; border:0; } .mkj-hc-item blockquote p{ font-size:18px; line-height:1.65; color:#14232B; margin:0; max-width:70ch; } .mkj-hc-by{ margin:14px 0 0 !important; font-size:15px; color:#71838C; font-weight:600; } .mkj-hc-by span, .mkj-hc-by time{ font-weight:400; } /* a published reply is a trust signal in itself, so it is shown, not hidden */ .mkj-hc-reply{ margin:16px 0 0; padding:16px 18px; background:#F7F5F1; border-radius:8px; } .mkj-hc-reply-by{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#003040; font-weight:700; margin:0 0 6px !important; } .mkj-hc-reply p{ font-size:16px; line-height:1.6; color:#435057; margin:0; max-width:68ch; } .mkj-hc-all{ margin:26px 0 0 !important; } @media (max-width:767px){ .mkj-hc-score{ padding:22px 20px; gap:18px; } .mkj-hc-num span{ font-size:38px; } .mkj-hc-lead{ font-size:20px; } .mkj-hc-item{ padding:20px 18px; } .mkj-hc-item blockquote p{ font-size:17px; } } /* ---------- CQC rating breakdown (About page only) ---------- Full width, three across, two rows. The sixth box is the OVERALL rating - deliberately styled as a conclusion rather than a peer, because it is the result of the five judgements, not a sixth thing CQC inspects. */ .mkj-cqc-break{ margin:0; padding:34px 36px; background:#FFFFFF; border:1px solid #E4DFD7; border-radius:14px; box-shadow:0 1px 2px rgba(0,32,48,.05), 0 12px 30px rgba(0,32,48,.06); } .mkj-cqc-h{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:28px; line-height:1.25; color:#003040; margin:0 0 10px; } .mkj-cqc-intro{ font-size:18px; line-height:1.65; color:#435057; margin:0 0 26px; max-width:78ch; } .mkj-cqc-grid{ list-style:none; margin:0 0 24px; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; } .mkj-cqc-item{ display:flex; flex-direction:column; gap:8px; padding:22px 24px; border-radius:11px; border:1px solid #E4DFD7; border-top:5px solid #CFCAC1; background:#FBFAF8; min-height:150px; } /* status is carried by the words as well as the colour - never colour alone */ .mkj-cqc-item.is-good{ border-top-color:#1F7A5C; background:#EAF4F0; border-color:#CADFD6; } .mkj-cqc-item.is-ri{ border-top-color:#B4761A; background:#FAF3E7; border-color:#E8D9BC; } .mkj-cqc-dom{ font-size:13px; letter-spacing:.11em; text-transform:uppercase; font-weight:700; color:#71838C; } .mkj-cqc-rate{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:23px; line-height:1.2; } .mkj-cqc-item.is-good .mkj-cqc-rate{ color:#1F7A5C; } .mkj-cqc-item.is-ri .mkj-cqc-rate{ color:#8A5A12; } .mkj-cqc-desc{ font-size:15px; line-height:1.5; color:#5A6B73; margin-top:auto; } /* box six: the conclusion */ .mkj-cqc-item.is-overall{ background:#003040; border-color:#003040; border-top-color:#E8A200; } .mkj-cqc-item.is-overall .mkj-cqc-dom{ color:#FFD37A; } .mkj-cqc-item.is-overall .mkj-cqc-rate{ color:#FFFFFF; } .mkj-cqc-item.is-overall .mkj-cqc-desc{ color:rgba(255,255,255,.72); } .mkj-cqc-note{ font-size:16px; line-height:1.65; color:#435057; margin:0 0 22px; max-width:78ch; } .mkj-cqc-cta{ margin:0 !important; } @media (max-width:1024px){ .mkj-cqc-grid{ grid-template-columns:repeat(2, 1fr); } } @media (max-width:767px){ .mkj-cqc-break{ padding:24px 20px; } .mkj-cqc-h{ font-size:23px; } .mkj-cqc-intro{ font-size:17px; } .mkj-cqc-item{ padding:18px 18px; min-height:0; } .mkj-cqc-rate{ font-size:20px; } } @media (max-width:520px){ .mkj-cqc-grid{ grid-template-columns:1fr; gap:12px; } } /* ---------- CQC footer: note left, button right ---------- */ .mkj-cqc-foot{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; padding-top:22px; border-top:1px solid #EDE9E2; } .mkj-cqc-foot .mkj-cqc-note{ flex:1 1 460px; margin:0 !important; max-width:none; } .mkj-cqc-foot .mkj-cqc-cta{ flex:0 0 auto; } @media (max-width:640px){ .mkj-cqc-foot{ gap:18px; } .mkj-cqc-foot .mkj-cqc-cta{ width:100%; } } /* ---------- review stars ---------- The fill is a percentage of the row, so 9.4/10 renders as exactly 94% rather than being rounded to the nearest whole or half star. */ .mkj-hc-stars{ position:relative; display:inline-block; margin:0 0 12px; font-size:30px; line-height:1; letter-spacing:3px; /* keep the glyphs from being replaced by an emoji font */ font-family:"Segoe UI Symbol","DejaVu Sans","Arial Unicode MS",serif; } .mkj-hc-stars-base{ color:rgba(255,255,255,.28); } .mkj-hc-stars-fill{ position:absolute; inset:0 auto 0 0; overflow:hidden; white-space:nowrap; color:#FFC24D; } /* ---------- reviews: quote left, attribution right ---------- */ .mkj-hc-item{ display:grid; grid-template-columns:1fr 220px; gap:28px; align-items:start; } .mkj-hc-body{ min-width:0; } .mkj-hc-side{ border-left:1px solid #EDE9E2; padding-left:24px; min-width:0; } .mkj-hc-who{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:19px; line-height:1.3; color:#003040; margin:0 0 2px !important; } .mkj-hc-rel{ font-size:15px; line-height:1.4; color:#5A6B73; margin:0 0 10px !important; } .mkj-hc-date{ font-size:15px; color:#71838C; margin:0 0 14px !important; } .mkj-hc-verified{ font-size:13px; line-height:1.45; letter-spacing:.04em; text-transform:uppercase; color:#71838C; font-weight:700; margin:0 !important; } .mkj-hc-verified a{ color:#946800; text-transform:none; letter-spacing:0; font-size:15px; } @media (max-width:860px){ .mkj-hc-item{ grid-template-columns:1fr; gap:18px; } .mkj-hc-side{ border-left:0; border-top:1px solid #EDE9E2; padding-left:0; padding-top:16px; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; } .mkj-hc-who, .mkj-hc-rel, .mkj-hc-date, .mkj-hc-verified{ margin:0 !important; } .mkj-hc-verified{ flex:1 1 100%; } } @media (max-width:767px){ .mkj-hc-stars{ font-size:26px; } } /* per-review stars: same renderer as the score block, smaller, on light ground */ .mkj-hc-stars.is-review{ font-size:22px; letter-spacing:2px; margin:0 0 4px; } .mkj-hc-stars.is-review .mkj-hc-stars-base{ color:#DCD6CC; } .mkj-hc-stars.is-review .mkj-hc-stars-fill{ color:#E8A200; } .mkj-hc-rating-num{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:15px; color:#5A6B73; margin:0 0 12px !important; } @media (max-width:860px){ .mkj-hc-stars.is-review{ margin:0; } .mkj-hc-rating-num{ margin:0 !important; } } /* ---------- NHS logo lockup ---------- The NHS identity may only be shown with the words "Working in partnership with the NHS". This keeps the logo and its strapline together as one unit, so the wording cannot be separated from the mark by a reflow. */ .mkj-nhs-lockup{ display:inline-flex; flex-direction:column; align-items:center; gap:6px; flex:0 0 auto; text-align:center; } .mkj-nhs-strap{ font-size:11.5px; line-height:1.3; font-weight:600; color:#435057; letter-spacing:.01em; } @media (max-width:767px){ .mkj-nhs-strap{ font-size:11px; } } /* staff training note on For Professionals */ .mkj-om{ background:#F7F5F1; border:1px solid #E4DFD7; border-left:4px solid #003040; border-radius:9px; padding:22px 24px; margin:18px 0 0; } .mkj-om h3{ font-family:Archivo,Arial,sans-serif; font-weight:700; font-size:20px; line-height:1.3; color:#003040; margin:0 0 10px; } .mkj-om p{ font-size:17px; line-height:1.65; color:#435057; margin:0 0 10px; max-width:70ch; } .mkj-om p:last-child{ margin:0; } .mkj-om-note{ font-size:15px !important; color:#71838C !important; }/* End custom CSS */