.elementor-kit-6{--e-global-color-primary:#173B52;--e-global-color-secondary:#0C746D;--e-global-color-text:#40606B;--e-global-color-accent:#72A984;--e-global-color-offwhite:#FFFEFB;--e-global-color-ivory:#FFF8EC;--e-global-color-mint:#EDF6F5;--e-global-color-mist:#DDECF3;--e-global-color-iceblue:#EEF6FA;--e-global-color-sand:#F8E7D5;--e-global-color-teamnavy:#194A60;--e-global-color-deepnavy:#122F43;--e-global-color-ctagreen:#2B7765;--e-global-color-trustblue:#22677A;--e-global-color-hairline:#D9E2E8;--e-global-typography-primary-font-family:"Cambo";--e-global-typography-primary-font-weight:500;--e-global-typography-primary-line-height:1.2em;--e-global-typography-secondary-font-family:"Cambo";--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-line-height:1.3em;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:17px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.7em;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:12px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:1.6px;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:var( --e-global-color-secondary );}.elementor-kit-6 a:hover{color:var( --e-global-color-primary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;}.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);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */html { scroll-behavior: smooth; scroll-padding-top: 104px; } @media (max-width: 1024px) { html { scroll-padding-top: 84px; } } /* Second half of a two-tone headline. Points at the Teal global colour, so changing that global in Site Settings still repaints these headlines. */ .lm-alt { color: var(--e-global-color-secondary); } /* Mobile menu: Elementor's open state does not set a max-height here, so the dropdown stays collapsed. Restore it from the height Elementor measures. */ .elementor-nav-menu--toggle .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container { max-height: var(--menu-height, calc(100vh - 120px)); overflow-y: auto; } /* --- hero copy panel (tablet + mobile) --- */ /* Below 1025px the hero shows its own photo above the copy, and the copy sits on a solid panel rather than over the background image. Applied here because Elementor's container background-colour control is not responsive. */ @media (max-width: 1024px) { .lm-hero-copy, .elementor-20 .elementor-element.elementor-element-546a536 { background-color: #FFFEFB; } } /* --- Ripple button ------------------------------------------------------ Add the CSS class lm-ripple to a Button widget (Advanced > CSS Classes). A darker circle grows from the exact point the pointer enters, and shrinks back toward the point it leaves. The label never changes colour, so it stays readable at every moment of the sweep. Set the widget's hover background to the SAME colour as its normal background - the ripple is what provides the hover feedback. Without JavaScript the circle simply grows from the centre. */ .lm-ripple .elementor-button { position: relative; overflow: hidden; isolation: isolate; transition: transform .2s ease, box-shadow .3s ease; } .lm-ripple .elementor-button::before { content: ""; position: absolute; z-index: -1; left: var(--mx, 50%); top: var(--my, 50%); width: 0; aspect-ratio: 1; border-radius: 50%; background-color: var(--e-global-color-primary); transform: translate(-50%, -50%); transition: width .5s cubic-bezier(.22, .61, .36, 1); } .lm-ripple .elementor-button:hover::before, .lm-ripple .elementor-button:focus-visible::before { width: 300%; } .lm-ripple .elementor-button:hover, .lm-ripple .elementor-button:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(23, 59, 82, .30); } .lm-ripple .elementor-button:active { transform: translateY(0) scale(.985); } @media (prefers-reduced-motion: reduce) { .lm-ripple .elementor-button, .lm-ripple .elementor-button::before { transition-duration: .01ms; } .lm-ripple .elementor-button:hover { transform: none; } } /* --- Arrow buttons ------------------------------------------------------ For Buttons that carry a circular arrow icon. Put lm-arrow on the widget plus ONE of the four modifiers below, so no two buttons animate alike. lm-arrow-fill outline arrow fills in (outline icons only) lm-arrow-ring a ring pulses outward (any icon) lm-arrow-turn arrow pivots up and out (any icon) lm-arrow-swap filled arrow trades colour (pre-filled icons only) Elementor renders uploaded SVG icons inline, so CSS can reach inside them. An outline arrow's paths carry no fill attribute and inherit currentColor, which is why -fill can knock it out; the pre-filled arrows carry a hard-coded fill, which -swap re-targets by attribute. Pure CSS. */ .lm-arrow .elementor-button-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; /* Pin the icon to a whole-pixel square. Left to itself this box inherits the button's line-height and can end up a fractional height (30.41px on the home hero), which puts the disc/ring's 50% origin on a half pixel and makes the scale animation shimmer. */ width: 24px; height: 24px; flex: 0 0 24px; /* the row is align-items:normal, so a fixed-height item would pin to the top of the line box - centre it explicitly */ align-self: center; will-change: transform; } .lm-arrow .elementor-button-icon svg { position: relative; z-index: 1; display: block; } .lm-arrow .elementor-button-icon svg path { transition: fill .3s ease; } /* 1. fill */ .lm-arrow-fill .elementor-button-icon { transition: transform .3s cubic-bezier(.22,.61,.36,1); } .lm-arrow-fill .elementor-button:hover .elementor-button-icon, .lm-arrow-fill .elementor-button:focus-visible .elementor-button-icon { transform: translateX(4px); } .lm-arrow-fill .elementor-button-icon::before { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background-color: var(--e-global-color-secondary); transform: scale(0); transition: transform .3s cubic-bezier(.22,.61,.36,1); } .lm-arrow-fill .elementor-button:hover .elementor-button-icon::before, .lm-arrow-fill .elementor-button:focus-visible .elementor-button-icon::before { transform: scale(1); } .lm-arrow-fill .elementor-button:hover .elementor-button-icon svg, .lm-arrow-fill .elementor-button:focus-visible .elementor-button-icon svg { color: var(--e-global-color-ivory); } /* 2. ring */ .lm-arrow-ring .elementor-button-icon { transition: transform .3s cubic-bezier(.22,.61,.36,1); } .lm-arrow-ring .elementor-button:hover .elementor-button-icon, .lm-arrow-ring .elementor-button:focus-visible .elementor-button-icon { transform: translateX(3px); } .lm-arrow-ring .elementor-button-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; border: 2px solid var(--e-global-color-secondary); opacity: 0; transform: scale(.7); pointer-events: none; } .lm-arrow-ring .elementor-button:hover .elementor-button-icon::after, .lm-arrow-ring .elementor-button:focus-visible .elementor-button-icon::after { animation: lmArrowRing .65s ease-out; } @keyframes lmArrowRing { 0% { opacity: .85; transform: scale(.7); } 100% { opacity: 0; transform: scale(2.1); } } /* 3. turn */ .lm-arrow-turn .elementor-button-icon { transition: transform .35s cubic-bezier(.22,.61,.36,1); } .lm-arrow-turn .elementor-button:hover .elementor-button-icon, .lm-arrow-turn .elementor-button:focus-visible .elementor-button-icon { transform: rotate(-45deg) scale(1.12); } /* 4. swap */ .lm-arrow-swap .elementor-button-icon { transition: transform .3s cubic-bezier(.22,.61,.36,1); } .lm-arrow-swap .elementor-button:hover .elementor-button-icon, .lm-arrow-swap .elementor-button:focus-visible .elementor-button-icon { transform: translateX(4px); } .lm-arrow-swap .elementor-button:hover svg path[fill="#0c746d"] { fill: var(--e-global-color-primary); } .lm-arrow-swap .elementor-button:hover svg path[fill="#173b52"] { fill: var(--e-global-color-secondary); } @media (prefers-reduced-motion: reduce) { .lm-arrow .elementor-button-icon, .lm-arrow .elementor-button-icon::before { transition-duration: .01ms; } .lm-arrow .elementor-button:hover .elementor-button-icon { transform: none; } .lm-arrow .elementor-button:hover .elementor-button-icon::after { animation: none; } } /* Icon Box: make the WHOLE box clickable, not just icon + title. Elementor only links the icon and title, so the title's link is stretched over the whole widget. Add class: lm-linkbox */ .lm-linkbox { position: relative; } .lm-linkbox .elementor-icon-box-title a::after { content: ""; position: absolute; inset: 0; z-index: 2; } /* ...and keep the title colour steady: the overlay lives inside the title's , so hovering anywhere would otherwise trigger the kit's a:hover colour. 'inherit' = whatever the Title Color control is set to. */ .lm-linkbox .elementor-icon-box-title a:hover, .lm-linkbox .elementor-icon-box-title a:focus { color: inherit; } /* Footer logo: the SVG has a fixed 204px intrinsic width and Elementor's icon widget cannot scale it, so it overflowed its column on phones. lm-footer-logo */ .elementor-73 .elementor-element-4c7b23c .elementor-icon-wrapper svg { width: 100%; height: auto; max-width: 204px; margin: 0 auto; } /* Footer credit line: on phones the credit wraps and used to leave the '|' dangling at the end of the first line. Drop the separator and give the credit its own line, in ONE footer template - no mobile duplicate. */ @media (max-width: 767px) { .lm-copy-sep { display: none; } .lm-copy-credit { display: block; } } /* Intro band ('Modern medicine. Meaningful connection.'): between the tablet breakpoint (1024) and the 1240 content width the text column shrinks to ~542px but keeps its full desktop side padding (74 left / 108 right), which squeezed the 56px heading onto four lines. Relieve the sides in that band only - 1240 and above is untouched. */ @media (min-width: 1025px) and (max-width: 1240px) { .elementor-20 .elementor-element.elementor-element-8501657.e-con { --padding-left: 40px; --padding-right: 40px; } } /* Footer credit link (ImageDpi Graphics): it was picking up the kit's global teal link colour and standing out against the grey credit line. Match the surrounding text, go white on hover. `inherit` rather than a hex so it always follows the widget's Title Color control and never drifts from the panel. */ .elementor-73 .elementor-element-a615c9d a { color: inherit; transition: color 0.2s ease; } .elementor-73 .elementor-element-a615c9d a:hover, .elementor-73 .elementor-element-a615c9d a:focus { color: #FFFFFF; } /* Our Team role labels (lm-team-role): 3-across on tablet leaves only ~227px, and Dr. Adel's two-specialty label needs two lines while the other two need one. Reserve two lines for all three in that range so the names and bios below them stay on the same baseline. Desktop is one line for all, untouched. */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-842 .elementor-element-1bd6916 .elementor-heading-title, .elementor-842 .elementor-element-1048bf8 .elementor-heading-title, .elementor-842 .elementor-element-2bf76e2 .elementor-heading-title { min-height: 28px; display: block; } }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Cambo'; font-style: normal; font-weight: 400; font-display: auto; src: url('https://lincroftmedical.com/wp-content/uploads/2026/09/cambo-v21-latin-regular.woff2') format('woff2'); } /* End Custom Fonts CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: auto; src: url('https://lincroftmedical.com/wp-content/uploads/2026/05/Inter-Black.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: auto; src: url('https://lincroftmedical.com/wp-content/uploads/2026/05/Inter-Bold.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: auto; src: url('https://lincroftmedical.com/wp-content/uploads/2026/05/Inter-Light.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: auto; src: url('https://lincroftmedical.com/wp-content/uploads/2026/05/Inter-Medium.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: auto; src: url('https://lincroftmedical.com/wp-content/uploads/2026/05/Inter-Regular.woff2') format('woff2'); } /* End Custom Fonts CSS */