.chaty *, .chaty-chat-view *, .chaty-outer-forms * {box-sizing: border-box }.chaty-agent-data, .chaty-whatsapp-field input[type=text], .chaty-whatsapp-message, .chaty-whatsapp-message p {font-family: Segoe UI, Helvetica Neue, Helvetica, Lucida Grande, Arial, Ubuntu, Cantarell, Fira Sans, sans-serif }.chaty-agent-header, .chaty-channel, .chaty-channels, .chaty-form-body, .chaty-tooltip {position: relative }.chaty-tooltip .on-hover-text, .chaty-tooltip .on-hover-text:before, .chaty-tooltip:after, .chaty-tooltip:before {text-transform: none;font-size: .9em;line-height: 1;user-select: none;pointer-events: none;position: absolute;display: none;opacity: 0 }.on-hover-text {display: none;white-space: pre }.chaty-tooltip .on-hover-text:before, .chaty-tooltip:before {content: "";border: 5px solid transparent;z-index: 1001 }.chaty-tooltip:after {content: attr(data-hover) }.chaty-tooltip .on-hover-text, .chaty-tooltip:after {text-align: center;min-width: 1em;max-width: 21em;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 5px 15px;border-radius: 10px;background: #fff;color: #333;z-index: 1000;box-shadow: 0 1.93465px 7.73859px rgb(0 0 0 / 15%);font-size: 17px;line-height: 21px }.chaty-animation-shockwave:after, .chaty-animation-shockwave:before {content: "";border-radius: 50%;position: absolute;top: 0;right: 0;bottom: 0 }.chaty-tooltip .on-hover-text {overflow: visible;white-space: pre }.chaty-tooltip.active .on-hover-text, .chaty-tooltip.active .on-hover-text:before, .chaty-tooltip.active:after, .chaty-tooltip.active:before, .chaty-tooltip:hover .on-hover-text, .chaty-tooltip:hover .on-hover-text:before, .chaty-tooltip:hover:after, .chaty-tooltip:hover:before {display: block;opacity: 1 }.chaty-tooltip.active .on-hover-text, .chaty-tooltip.active .on-hover-text:before, .chaty-tooltip.active:after, .chaty-tooltip.active:before, .chaty-tooltip.pos-left:hover .on-hover-text, .chaty-tooltip.pos-left:hover .on-hover-text:before, .chaty-tooltip.pos-left:hover:after, .chaty-tooltip.pos-left:hover:before, .chaty-tooltip.pos-right:hover .on-hover-text, .chaty-tooltip.pos-right:hover .on-hover-text:before, .chaty-tooltip.pos-right:hover:after, .chaty-tooltip.pos-right:hover:before {animation: ease-out forwards tooltips-horz }.chaty-tooltip.has-on-hover:after, .chaty-tooltip.has-on-hover:before, .chaty-widget .chaty-i-trigger .chaty-cta-close.chaty-tooltip.chaty-tooltip:hover:after, .chaty-widget .chaty-i-trigger .chaty-cta-close.chaty-tooltip:hover:before, .chaty-widget.chaty-open .chaty-i-trigger .chaty-cta-main.chaty-tooltip:after, .chaty-widget.chaty-open .chaty-i-trigger .chaty-cta-main.chaty-tooltip:before, .chaty-widget.cssas-no-close-button.default-open .chaty-i-trigger, .on-hover-text:empty, [data-hover=""]:after, [data-hover=""]:before {display: none !important }.chaty-tooltip.pos-top:before {border-bottom-width: 0;border-top-color: #fff;bottom: calc(100% + 5px) }.chaty-tooltip.pos-top:after {bottom: calc(100% + 10px) }.chaty-tooltip.pos-top:after, .chaty-tooltip.pos-top:before {left: 50%;transform: translate(-50%, -.5em) }.chaty-tooltip.pos-down:before {top: 100%;border-top-width: 0;border-bottom-color: #fff }.chaty-tooltip.pos-down:after {top: calc(100% + 5px) }.chaty-tooltip.pos-down:after, .chaty-tooltip.pos-down:before {left: 50%;transform: translate(-50%, .5em) }.chaty-tooltip.pos-left .on-hover-text:before, .chaty-tooltip.pos-left:before {top: 50%;border-right-width: 0;border-left-color: #fff;left: calc(0em - 10px);transform: translate(-.5em, -50%) }.chaty-tooltip.pos-left .on-hover-text:before {left: auto;right: calc(0em - 5px) }.chaty-tooltip.pos-left .on-hover-text, .chaty-tooltip.pos-left:after {top: 50%;right: calc(100% + 10px);transform: translate(-.5em, -50%) }.chaty-tooltip.pos-right .on-hover-text:before, .chaty-tooltip.pos-right:before {top: 50%;border-left-width: 0;border-right-color: #fff;right: calc(0em - 10px);transform: translate(.5em, -50%) }.chaty-tooltip.pos-right .on-hover-text:before {left: calc(0em - 5px);right: auto }.chaty-tooltip.pos-right .on-hover-text, .chaty-tooltip.pos-right:after {top: 50%;left: calc(100% + 10px);transform: translate(.5em, -50%) }@keyframes tooltips-vert {to {opacity: 1;transform: translate(-50%, 0) }}@keyframes tooltips-horz {to {opacity: 1;transform: translate(0, -50%) }}.chaty-tooltip.pos-down:hover:after, .chaty-tooltip.pos-down:hover:before, .chaty-tooltip.pos-top:hover:after, .chaty-tooltip.pos-top:hover:before {animation: ease-out forwards tooltips-vert }@-webkit-keyframes chaty-animation-shockwave {0% {transform: scale(1);box-shadow: 0 0 2px rgba(0, 0, 0, .3), inset 0 0 1px rgba(0, 0, 0, .3) }95% {box-shadow: 0 0 50px transparent, inset 0 0 30px transparent }100% {transform: scale(2.25) }}@keyframes chaty-animation-shockwave {0% {transform: scale(1);box-shadow: 0 0 2px rgba(0, 0, 0, .3), inset 0 0 1px rgba(0, 0, 0, .3) }95% {box-shadow: 0 0 50px transparent, inset 0 0 30px transparent }100% {transform: scale(2.25) }}@-webkit-keyframes chaty-animation-blink {0%, 100% {opacity: 1 }20% {opacity: .5 }}@keyframes chaty-animation-blink {0%, 100% {opacity: 1 }20% {opacity: .5 }}@-webkit-keyframes chaty-animation-pulse {0% {transform: scale(1);box-shadow: 0 2px 2px rgba(0, 0, 0, .2);border-radius: 50% }100% {transform: scale(1.1);box-shadow: 0 2px 2px rgba(0, 0, 0, .2);border-radius: 45% }}@keyframes chaty-animation-pulse {0% {transform: scale(1);border-radius: 50% }100% {transform: scale(1.1);border-radius: 45% }}.chaty-animation-shockwave:after {left: 0;-webkit-animation: 2s ease-out 1.3s infinite chaty-animation-shockwave;animation: 2s ease-out 1.3s infinite chaty-animation-shockwave }.chaty-animation-shockwave:before {left: 0;-webkit-animation: 2s ease-out .8s infinite chaty-animation-shockwave;animation: 2s ease-out .8s infinite chaty-animation-shockwave }.chaty-animation-blink {-webkit-animation: 1.33s ease-out infinite chaty-animation-blink;animation: 1.33s ease-out infinite chaty-animation-blink }.chaty-animation-pulse, .chaty-animation-pulse-icon {-webkit-animation: .4s infinite alternate chaty-animation-pulse;animation: .4s infinite alternate chaty-animation-pulse }.chaty-animation-sheen {position: relative;overflow: hidden }.chaty-animation-sheen:after {animation: 5s infinite chaty-animation-sheen;content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .5) 50%, transparent);transform: rotateZ(60deg) translate(0, 5em) }@keyframes chaty-animation-sheen {100%, 20% {transform: rotateZ(60deg) translate(0, -80px) }}.chaty-animation-fade {animation: 5s infinite chaty-animation-fade }.chaty-animation-spin {animation: 5s cubic-bezier(.56, -.35, .22, 1.5) infinite chaty-animation-spin }@keyframes chaty-animation-fade {15%, 5% {opacity: .25 }10%, 100%, 20% {opacity: 1 }}@keyframes chaty-animation-spin {10% {transform: rotateZ(-20deg);animation-timing-function: ease }100%, 20% {transform: rotateZ(360deg) }}.chaty-animation-bounce, .chaty-animation-jump {animation: 5s cubic-bezier(.84, -.54, .31, 1.19) infinite chaty-animation-bounce }@keyframes chaty-animation-bounce {0%, 100%, 20% {transform: none }10% {transform: translateY(-1em) }}@keyframes chaty-animation-waggle {0% {transform: none }10% {transform: rotateZ(-20deg) scale(1.2) }13% {transform: rotateZ(25deg) scale(1.2) }15% {transform: rotateZ(-15deg) scale(1.2) }17% {transform: rotateZ(15deg) scale(1.2) }20% {transform: rotateZ(-12deg) scale(1.2) }22% {transform: rotateZ(0) scale(1.2) }100%, 24% {transform: rotateZ(0) scale(1) }}.chaty-animation-waggle {animation: 5s infinite chaty-animation-waggle }.chaty-animation-floating {-webkit-animation: chaty-animation-floating 3s ease infinite;animation: chaty-animation-floating 3s ease infinite;}@keyframes chaty-animation-floating {0% {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}50% {-webkit-transform: translate3d(0,-10px,0);transform: translate3d(0,-10px,0);}100% {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}}.chaty {display: none;z-index: 99999 }.chaty-widget.chaty-open .chaty-i-trigger .chaty-cta-close.chaty-tooltip.chaty-tooltip:hover:after, .chaty-widget.chaty-open .chaty-i-trigger .chaty-cta-close.chaty-tooltip:hover:before, .chaty.active, .chaty.form-open .chaty-widget.cssas-no-close-button.default-open .chaty-i-trigger {display: block !important }.chaty * {margin: 0;padding: 0 }.chaty .sr-only, .hide-cht-svg-bg, .chaty-outer-forms .sr-only {position: absolute !important;width: 1px !important;height: 1px !important;padding: 0 !important;margin: -1px !important;overflow: hidden !important;clip: rect(0, 0, 0, 0) !important;border: 0 !important;outline: none !important;}.chaty a, .chaty a:focus, .chaty a:hover, .chaty button {border: none;text-decoration: none;outline: 0;box-shadow: none }.chaty-widget {position: fixed;bottom: 25px;right: 25px;z-index: 10001 }.chaty-widget.left-position {left: 25px;right: auto }.chaty-channel-list {display: flex;width: 62px;height: 124px;position: absolute;bottom: -4px;right: 0;flex-direction: column;align-items: flex-start;pointer-events: none }.chaty-widget.left-position .chaty-channel-list {left: 0;right: auto }.chaty-widget.chaty-open .chaty-channel-list, .chaty-widget.has-single .chaty-i-trigger .Phone-channel:after, .chaty-widget.has-single .chaty-i-trigger .Phone-channel:before {pointer-events: auto }.chaty-channel-list .chaty-channel, .chaty-channel.single .chaty-svg {display: inline-block;width: 54px;height: 54px;border-radius: 50%;margin: 4px;cursor: pointer;box-shadow: 0 16px 24px 0 rgb(73 104 126 / 16%);}.chaty-channel-list .chaty-channel {position: absolute;bottom: 0;opacity: 0;transition: .5s;-webkit-transition: .5s }.chaty-channel.single .chaty-svg {margin: 0 }.chaty-widget.chaty-open .chaty-channel-list .chaty-channel {opacity: 1 }.chaty-channel a, .chaty-channel button, .chaty-svg {display: block;width: 54px;height: 54px;border-radius: 50%;cursor: pointer;position: relative;outline: 0 }.chaty-channel button {background: 0 0;border-radius: 50% }.chaty-channel a .chaty-custom-icon, .chaty-channel button .chaty-custom-icon, .chaty-svg .chaty-custom-icon {width: 54px;height: 54px;border-radius: 50%;text-align: center;font-size: 27px;line-height: 54px;color: #fff }.chaty-channel a:focus, .chaty-channel button:focus, .chaty-contact-form-box button.chaty-submit-button {outline: 0 }.chaty-contact-form-box button.chaty-submit-button:disabled .chaty-loader {display: inline-block;}.chaty-agent-icon svg, .chaty-channel svg, .chaty-view-channels .chaty-channel span svg {width: 100%;height: 100% }.chaty-channel img {width: 54px;height: 54px;object-fit: cover;border-radius: 50% }.chaty-i-trigger .chaty-channel {position: absolute;bottom: 0;right: 4px;transition: .5s;border-radius: 50%;cursor: pointer }.chaty-cta-button {transition: .5s;box-shadow: 0 16px 24px 0 rgb(73 104 126 / 16%);border-radius: 50% }.chaty-widget.left-position .chaty-i-trigger .chaty-channel {left: 4px;right: auto }.chaty-widget .chaty-cta-main .chaty-cta-button {z-index: 1099;opacity: 1;position: relative }.chaty-widget.chaty-open .chaty-cta-main .chaty-cta-button {z-index: 999;opacity: 0;transform: rotate(540deg);visibility: hidden }.chaty-widget .chaty-i-trigger .chaty-cta-close {pointer-events: none }.chaty-widget.chaty-open .chaty-i-trigger .chaty-cta-close {pointer-events: auto;z-index: 101 }.chaty-widget .chaty-i-trigger .chaty-cta-close .chaty-cta-button {z-index: 999;opacity: 0;visibility: hidden }.chaty-widget.chaty-open .chaty-i-trigger .chaty-cta-close .chaty-cta-button {z-index: 1099;opacity: 1;transform: rotate(180deg);visibility: visible }.chaty-widget.chaty-open .chaty-i-trigger .chaty-cta-main.chaty-tooltip {z-index: 91 }.chaty-channel button.open-chaty-channel, .chaty-widget.chaty-no-close-button:not(.has-single) .chaty-i-trigger:not(.single-channel), .chaty-widget.chaty-open .chaty-i-trigger .chaty-cta-main.chaty-tooltip .on-hover-text, .chaty.form-open .chaty-channel button.open-chaty, .chaty.form-open .chaty-i-trigger .chaty-cta-main.chaty-tooltip .on-hover-text, .chaty.form-open .chaty-i-trigger .chaty-tooltip:after, .chaty.form-open .chaty-i-trigger .chaty-tooltip:before, .chaty.form-open .chaty-widget.has-single .chaty-i-trigger .on-hover-text {display: none }.chaty.form-open.active .chaty-widget .chaty-i-trigger {display: block;}.chaty.form-open.active .chaty-widget .chaty-i-trigger .chaty-cta-main {display: none;}.chaty.form-open.active .chaty-widget .chaty-i-trigger .chaty-cta-close .chaty-cta-button {opacity: 1;visibility: visible;pointer-events: auto;}.chaty-widget .ch-pending-msg {position: absolute;right: -4px;top: -4px;width: 16px;height: 16px;text-align: center;background: red;color: #fff;font-size: 10px;line-height: 16px;border-radius: 50%;z-index: 1101 }.chaty-widget.left-position.hor-mode .chaty-channel-list {width: 136px;height: 62px;left: 0;bottom: 0 }.chaty-widget.right-position.hor-mode .chaty-channel-list {width: 136px;height: 62px;right: 0;left: auto;bottom: 0 }.chaty-widget.hor-mode .chaty-channel-list .chaty-channel {margin-top: 0;margin-bottom: 0 }.chaty-widget.hor-mode.left-position .chaty-channel-list .chaty-channel {left: 0 }.chaty-widget.hor-mode.right-position .chaty-channel-list .chaty-channel {right: 0;left: auto }.chaty-chat-view, .chaty-outer-forms {vertical-align: bottom;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;position: fixed !important;bottom: -25px;left: 25px;padding: 0;width: 320px;max-width: 90%;-moz-transition: .5s linear;box-shadow: rgba(0, 0, 0, .16) 0 5px 40px;-webkit-box-shadow: rgba(0, 0, 0, .16) 0 5px 40px;-moz-box-shadow: rgba(0, 0, 0, .16) 0 5px 40px;opacity: 0;visibility: hidden;pointer-events: none;z-index: -1;transition: .5s;-webkit-transition: .5s;animation-delay: -2s;-webkit-animation-delay: -2s }.chaty-chat-view.pos-left, .chaty-outer-forms.pos-left {left: 25px }.chaty-chat-view.pos-right, .chaty-outer-forms.pos-right {right: 25px;left: auto }.chaty-outer-forms.active, .chaty:not(.form-open) .chaty-widget.chaty-open + .chaty-chat-view {-webkit-transform: translateY(-93px);transform: translateY(-93px);opacity: 1;z-index: 999999;visibility: visible;bottom: 0;pointer-events: auto }.chaty-whatsapp-body {padding: 0;min-height: 260px;position: relative;z-index: 2;}.chaty-whatsapp-content {padding: 20px;}.chaty-popup-whatsapp-form .chaty-whatsapp-body {height: 260px;min-height: auto;}.chaty-popup-whatsapp-form .chaty-whatsapp-content {display: flex;align-items: flex-start;}.chaty-form-body {background: #fff;z-index: 99999;min-height: 75px;border-radius: 10px }.chaty-form-body form {margin: 0;padding: 0 }.qr-code-image {padding: 10px;text-align: center;border: solid 1px #c0c0c0;border-radius: 4px;}.qr-code-image img {max-width: 100%;max-height: 360px;margin: 0 auto;display: block;width: 100%;height: auto }.chaty-whatsapp-form {position: relative;background-color: #f0ede7;border-radius: 8px;margin: 0;}.chaty-whatsapp-form:before {display: block;position: absolute;content: "";left: 0;top: 0;height: 100%;width: 100%;z-index: 0;opacity: 0.035;background-image: url("https://plumasfamilydentistry.com/wp-content/plugins/chaty-pro/css/../images/whatsapp.png");}.chaty-popup-whatsapp-form .chaty-whatsapp-footer:before, .chaty-popup-whatsapp-form .chaty-whatsapp-body:before {background-image: url("https://plumasfamilydentistry.com/wp-content/plugins/chaty-pro/css/../images/whatsapp-welcome-popup.png");opacity: 0.7;}.chaty-whatsapp-message {padding: 7px 14px 6px;background-color: #fff;border-radius: 0 10px 10px;position: relative;transform-origin: center top;z-index: 2;margin-top: 0;margin-left: 0;max-width: calc(100% - 40px);font-family: Segoe UI, Helvetica Neue, Helvetica, Lucida Grande, Arial, Ubuntu, Cantarell, Fira Sans, sans-serif;font-size: 14px;line-height: 18px;border: 1px solid rgb(34 17 71 / 8%);}.chaty-whatsapp-message:before {content: "";display: none;width: 0;height: 0;border-top: 0 solid transparent;border-bottom: 10px solid transparent;border-right: 12px solid #ffffff;position: absolute;left: -12px;top: 0;}.wp-profile-img + .chaty-whatsapp-message:before {display: block;}.chaty-whatsapp-message p {margin: 0;padding: 0;color: #111b21;font-weight: 400;word-wrap: break-word;}.chaty-whatsapp-footer {position: relative;padding: 20px 15px;}.whatsapp-chaty-form {display: flex;margin: 0;padding: 0 }button.chaty-whatsapp-button-button, button.chaty-whatsapp-button-button:focus, button.chaty-whatsapp-button-button:hover {text-align: center !important;height: 40px !important;width: 40px !important;padding: 0 !important;background: #C6D7E3 !important;border-radius: 20px !important;outline: none !important;box-shadow: none !important;cursor: pointer !important;margin: 0 0 0 10px !important;text-decoration: none !important;border: none !important;min-width: 1px !important;flex: 0 0 40px;}button.chaty-whatsapp-button-button {background: #C6D7E3 !important;}button.chaty-whatsapp-button-button:focus, button.chaty-whatsapp-button-button:hover {background: #a8c5da !important }.chaty-whatsapp-input:not(:placeholder-shown) + button.chaty-whatsapp-button-button {background: #25D366 !important;}.chaty-whatsapp-input:not(:placeholder-shown) + button.chaty-whatsapp-button-button:focus, .chaty-whatsapp-input:not(:placeholder-shown) + button.chaty-whatsapp-button-button:hover {background: #22bf5b !important;}.chaty-whatsapp-data {display: flex;flex: 1;z-index: 1;}.chaty-whatsapp-field {padding-right: 0;flex: 1;position: relative;display: flex;align-items: center;}.chaty-whatsapp-button {flex: 0 0 48px }.chaty-whatsapp-button svg {width: 100%;height: 100%;margin: 0;padding: 0 }.chaty-whatsapp-field input[type=text] {height: 40px !important;line-height: normal;padding: 0 10px 0 15px;font-size: 16px;resize: none;width: 100%;border: none !important;border-radius: 24px;outline: 0;box-shadow: none !important;background: #fff !important;margin: 0;color: #111b21;flex: 1;}.chaty-whatsapp-field input[type=text]:focus {outline: 0 !important;border: none !important;margin: 0;color: #111b21;box-shadow: none !important;}.chaty-whatsapp-button-button:focus, .chaty-whatsapp-button-button:hover, .chaty-whatsapp-button-button:active {background: #a8c5da !important }.chaty.form-open .chaty-channel button.open-chaty-channel, .chaty.form-open .chaty-no-close-button.has-single .chaty-i-trigger {display: block }.chaty-agent-data {font-size: 16px }.chaty-agent-header {font-size: 18px;padding: 20px 15px;background: #22bf5b;color: #fff;-webkit-border-top-left-radius: 10px;-webkit-border-top-right-radius: 10px;-moz-border-radius-topleft: 10px;-moz-border-radius-topright: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px }.chaty-agent-data .close-chaty-form {right: 10px;top: 12px }.chaty-agent-data .chaty-agent {display: flex;align-items: center;padding: 15px }.chaty-agent-data .chaty-agent a {color: #49687e;font-size: 16px;text-decoration: none;display: flex;width: 100%;align-items: center;outline: 0;font-weight: 400 }.chaty-contact-input input[type=email].chaty-input-field, .chaty-contact-input input[type=text].chaty-input-field, .chaty-contact-input textarea.chaty-textarea-field, .chaty-contact-input input.chaty-input-field, .chaty-contact-input select.chaty-input-field {color: #28303d;font-family: BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-sans;margin: 0;background: #fff;outline: 0 }.chaty-agent-data .chaty-agent + .chaty-agent {border-top: 2px solid #f6f8f9 }.chaty-agent-img {width: 36px;height: 36px;object-fit: cover;border-radius: 50% }.chaty-agent-icon {width: 48px;height: 48px;margin: 0 15px 0 0 }.chaty-agent-data .chaty-custom-icon {width: 48px;height: 48px;text-align: center;display: block;line-height: 48px;background: silver;border-radius: 50%;color: #fff;font-size: 28px }.chaty-close-agent-list {position: absolute;right: 15px;top: 10px;width: 26px;height: 26px;cursor: pointer;z-index: 10;padding: 0 0 10px 10px }.chaty-agent-icon img {width: 48px;height: 48px;object-fit: cover }.chaty-close-agent-list svg {fill: #ffffff }.agent-sub-header {font-size: 14px;line-height: 20px;font-weight: 400 }.agent-main-header {font-size: 20px;line-height: 32px;font-weight: 700;position: relative }.chaty-agent-header:before, .chaty-view-header:before {content: "";background: url(https://plumasfamilydentistry.com/wp-content/plugins/chaty-pro/css/../images/header-top.png) no-repeat;width: 215px;height: 41px;position: absolute;top: 0;left: 0;z-index: 1 }.chaty-agent-header:after, .chaty-view-header:after {content: "";background: url(https://plumasfamilydentistry.com/wp-content/plugins/chaty-pro/css/../images/header-bottom.png) no-repeat;width: 44px;height: 41px;position: absolute;bottom: 0;right: 0;z-index: 1 }.chaty-custom-channel-icon {display: block;border-radius: 50%;color: #fff;text-align: center;line-height: 54px }.chaty-contact-form-title {padding: 10px 15px;text-align: left;font-size: 18px;color: #FFFFFF;border-radius: 8px 8px 0 0;justify-content: space-between;display: flex;}.chaty-contact-inputs {padding: 15px;}.chaty-contact-input {display: block;}.chaty-contact-input label.chaty-form-label {font-size: 14px;margin: 0;padding: 0 0 4px 0;line-height: 20px;display: flex;color: #28303d;}.chaty-contact-input + .chaty-contact-input {margin: 10px 0 0 }.chaty-contact-input input[type=email].chaty-input-field, .chaty-contact-input input[type=text].chaty-input-field, .chaty-contact-input input.chaty-input-field, .chaty-contact-input select.chaty-input-field {width: 100%;height: 36px;line-height: 36px;font-size: 16px;padding: 0 10px;border: 1px solid #ccc;border-radius: 4px }.chaty-contact-input input[type=email].chaty-input-field:focus, .chaty-contact-input input[type=tel].chaty-input-field:focus, .chaty-contact-input input[type=text].chaty-input-field:focus, .chaty-contact-input textarea.chaty-textarea-field:focus, .chaty-contact-input input.chaty-input-field:focus, .chaty-contact-input select.chaty-input-field:focus, .chaty-contact-input *.has-chaty-error:focus {outline: 0;box-shadow: none;border-color: #898989;background-color: #fff;}.chaty-contact-input textarea.chaty-textarea-field {width: 100%;height: 100px;line-height: 20px;font-size: 16px;padding: 10px;border: 1px solid #ccc;border-radius: 4px;display: block;}.chaty-contact-form-box .close-chaty-form {right: 9px;top: 9px }.chaty-contact-form-box button.chaty-submit-button[type=submit], button#chaty-submit-button-0 {border: none;border-radius: 4px;color: #fff;background: #a886cd;width: 100%;height: 36px;line-height: 36px;font-size: 18px;padding: 0;margin: 0;cursor: pointer;text-align: center;display: block }.chaty-contact-input input.chaty-input-field.has-chaty-error, .chaty-contact-input textarea.has-chaty-error, .chaty-contact-input select.chaty-input-field.has-chaty-error {border: 1px solid #d20000 }.chaty-contact-form-button {padding: 15px }.chaty-ajax-error-message, .chaty-ajax-success-message {color: #00a700;padding: 10px 0 0;text-align: center;font-size: 16px }.chaty-ajax-error-message {color: #da0000 }.chaty-view-header, .chaty-view-header a, .chaty-view-header a:focus, .chaty-view-header a:hover {font-weight: 500;color: #fff;font-size: 24px }.chaty-exit-intent {position: fixed;z-index: -1 }.chaty-exit-intent:before {display: block;position: fixed;top: 0;left: 0;content: '';width: 100vw;height: 100vh;background: rgba(0, 0, 0, .8);visibility: hidden;z-index: 100;transition: .5s ease-in-out;-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out }.chaty .chaty-widget.left-position .chaty-exit-intent:before {clip-path: circle(15px at 60px calc(100% - 60px)) }.chaty .chaty-widget.right-position .chaty-exit-intent:before {clip-path: circle(15px at calc(100% - 60px) calc(100% - 60px)) }.chaty .chaty-widget .chaty-exit-intent.animate:before {visibility: visible;clip-path: circle(100%) }.chaty-widget.has-single .chaty-i-trigger .chaty-channel:not(.chaty-agent-button).Phone-channel .chaty-tooltip:after, .chaty-widget.has-single .chaty-i-trigger .chaty-channel:not(.chaty-agent-button).Phone-channel .chaty-tooltip:before {pointer-events: inherit }body.cht-in-mobile .chaty-outer-forms.chaty-agent-data.custom-cht-pos, body.cht-in-mobile .chaty-outer-forms.chaty-contact-form-box.custom-cht-pos, body.cht-in-mobile .chaty-outer-forms.chaty-wechat-form.custom-cht-pos, body.cht-in-mobile .chaty-outer-forms.chaty-whatsapp-form.custom-cht-pos {top: 50%;left: 0;right: 0;margin: 0 auto;transform: translate(0, -50%);bottom: auto }body.cht-in-mobile .chaty-outer-forms.chaty-agent-data.custom-cht-pos .chaty-agent-body {max-height: calc(100vh - 164px) !important }.chaty-whatsapp-message p + p {margin-top: 10px }body.cht-in-mobile .chaty-outer-forms.chaty-whatsapp-form.custom-cht-pos .chaty-whatsapp-content {max-height: calc(100vh - 122px) !important;overflow-y: auto }body.cht-in-mobile .chaty-outer-forms.chaty-whatsapp-form:not(.custom-cht-pos) .chaty-whatsapp-content {overflow-y: auto }.chaty.has-custom-pos.form-open .chaty-i-trigger {opacity: 0;visibility: hidden }body.cht-in-mobile .chaty-outer-forms.chaty-contact-form-box.custom-cht-pos .chaty-contact-inputs {max-height: calc(100vh - 150px) !important;overflow-y: auto }body.cht-in-mobile .chaty-outer-forms {max-width: calc(100vw - 50px) !important }.chaty-view-body {background: #fff;border-radius: 8px }.chaty-view-header {background: #b78deb;border-radius: 7px 7px 0 0;padding: 10px 15px;position: relative;word-break: break-word }.chaty-top-content {padding: 15px 15px 0;font-size: 16px }.chaty-view-content p, .chaty-view-content p a, .chaty-view-content p a:focus, .chaty-view-content p a:hover {margin: 0;padding: 0;font-size: 16px;line-height: 150%;color: #49687e;word-break: break-word }.chaty-view-content p a {display: inline-block }.chaty-view-content p a:focus, .chaty-view-content p a:hover, .chaty-view-header a:focus, .chaty-view-header a:hover {outline: 0;text-decoration: none }.chaty-view-content p + p {margin-top: 10px }.chaty-close-view-list {position: absolute;right: 15px;top: 10px;width: 12px;cursor: pointer;z-index: 11 }.chaty-close-view-list svg {fill: #ffffff;display: inline-block;width: 100% }.chaty-view-channels .chaty-channel {height: 48px;display: inline-block;margin: 6px 0;width: 20%;text-align: center;vertical-align: top }.chaty-view-channels .chaty-channel a, .chaty-view-channels .chaty-channel img, .chaty-view-channels .chaty-channel span:not(.on-hover-text) {display: block;width: 48px;height: 48px;margin: 0 auto }.chaty-view-channels {padding: 10px 8px }.chaty-view-channels .chaty-custom-channel-icon {font-size: 24px }.front-google-captcha {width: 100% !important;overflow: hidden;}.front-google-captcha > div {width: 100%;}.front-google-captcha iframe {transform: scaleX(0.9);position: relative;left: -15px;}.widget-fa-icon {width: 100%;height: 100%;display: inline-block;vertical-align: middle;color: #ffffff;}span.chaty-loader {display: none;vertical-align: middle;color: #ffffff;animation: rotation 1s infinite linear;width: 24px;height: 24px;text-align: center;line-height: 24px;margin-left: 5px;}span.chaty-loader span.dashicons {width: 24px;height: 24px;text-align: center;line-height: 24px;font-size: 24px;}@keyframes rotation {from {transform: rotate(0deg);}to {transform: rotate(359deg);}}span.chaty-loader.active {display: inline-block;vertical-align: baseline;}.chaty-i-trigger.single-channel > .chaty-channel > .on-hover-text {display: none !important;}html[dir="rtl"] .chaty-tooltip, html[dir="rtl"] .on-hover-text, html[dir="rtl"] .chaty-input-field, html[dir="rtl"] .chaty-submit-button, html[dir="rtl"] .chaty-whatsapp-message, html[dir="rtl"] .chaty-tooltip:after {direction: rtl;}.add-bg-blur-effect {background-color: rgba(0, 0, 0, 0.4);overflow-x: hidden;}.add-bg-blur-effect >:not(.chaty, .chaty-outer-forms, .picmo__popupContainer) {filter: blur(6px);}.email_suggestion, .wp_email_suggestion {margin: 0;padding: 0;font-size: 14px;color: #970029;}.email_suggestion i, .wp_email_suggestion i {color: #2596be;font-weight: bold;cursor: pointer;}.chaty-form .eac-sugg, .chaty-custom-whatsapp-form .eac-sugg {color: #c1c1c1;line-height: 34px !important;}.chaty-form .eac-input-wrap {width: 100%;overflow: hidden;}.chaty-custom-whatsapp-form .chaty-whatsapp-body:before {opacity: 0.05;}.chaty-custom-whatsapp-form .chaty-whatsapp-body {border-radius: 0;}.chaty-custom-whatsapp-form .chaty-whatsapp-footer {border-top: 1px solid #e1e1e1;min-height: 70px;}.chaty-custom-whatsapp-form .chaty-whatsapp-data {display: block;z-index: 1;}.chaty-custom-whatsapp-form .chaty-whatsapp-button-button {width: 100% !important;z-index: 1;position: relative;}.chaty-custom-whatsapp-form .header-text {display: flex;align-items: center;}.chaty-custom-whatsapp-form .header-text span {display: inline-block;vertical-align: super;padding-left: 5px;}.chaty-custom-whatsapp-form .chaty-whatsapp-button svg {width: 26px;height: 26px;fill: #ffffff;margin-right: 3px;}.chaty-custom-whatsapp-form .chaty-whatsapp-button span {font-size: 15px;padding-left: 5px;}.chaty-custom-whatsapp-form .chaty-whatsapp-button {display: flex;align-items: center;justify-content: center;border-radius: 6px !important;}.chaty-custom-whatsapp-form .chaty-whatsapp-content {padding: 15px;z-index: 101111;position: relative;}.chaty-custom-whatsapp-form .chaty-whatsapp-body {min-height: auto;}input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;-moz-appearance: none;appearance: none;margin: 0;}.chaty-whatsapp-header {display: flex;align-items: center;background-color: #4aa485;border-top-left-radius: 6px;border-top-right-radius: 6px;padding: 10px 15px;position: relative;justify-content: space-between;box-shadow: 0 16px 32px 0 #1A0E3529;}.chaty-whatsapp-header .header-wp-icon {height: 30px;width: 30px;margin-right: 7px;}.chaty-whatsapp-header .header-wp-title {color: #ffffff;font-size: 15px;flex: 1;padding-right: 8px;}.whatsapp-form-close-btn {flex: 0 0 16px;cursor: pointer;}.whatsapp-form-close-btn svg {width: 16px;height: 16px;}.chaty-whatsapp-form, .chaty-form {font-family: Segoe UI, Helvetica Neue, Helvetica, Lucida Grande, Arial, Ubuntu, Cantarell, Fira Sans, sans-serif;}.chaty-whatsapp-body .wp-profile-img {height: 30px;width: 30px;margin-right: 15px;}.chaty-whatsapp-body .wp-profile-img img {height: 30px;width: 30px;border-radius: 50%;object-fit: cover;}.chaty-whatsapp-message-nickname {color: #489d81;font-size: 10px;font-weight: 500;line-height: 14px;}.chaty-whatsapp-message-time {color: #a1a1a9;font-size: 10px;line-height: 12px;}.chaty-whatsapp-input::placeholder {color: #83A1B7;opacity: 40%;}.chaty-whatsapp-input::-ms-input-placeholder {color: #83A1B7;opacity: 40%;}button[type="button"].chaty-wp-emoji-input, button[type="button"].chaty-wp-emoji-input:focus, button[type="button"].chaty-wp-emoji-input:hover {position: absolute !important;;top: 9px;left: 8px;background: none !important;border: none !important;cursor: pointer;height: 24px !important;width: 24px !important;padding: 0 !important;min-width: 1px !important;margin: 0 !important;outline: none !important;}.chaty-whatsapp-field:not(.has_emoji) .chaty-wp-emoji-input {display: none !important;}.chaty-whatsapp-input {padding-left: 38px !important;}.chaty-whatsapp-field:not(.has_emoji) .chaty-whatsapp-input {padding-left: 15px !important;}.picmo__popupContainer {z-index: 1000000;}body .picmo__emojiButton span {font-size: 24px;line-height: 24px;display: inline-block;vertical-align: middle;}body .picmo__picker .picmo__categoryButtons .picmo__categoryTab button.picmo__categoryButton {color: #8f8f8f;border: solid 1px transparent;}body .picmo__picker .picmo__categoryButtons .picmo__categoryTab.picmo__categoryTabActive .picmo__categoryButton {border: 1px solid #a886cd;color: #a071d3;background: #fff;}body .picmo__picker .picmo__emojiCategory .picmo__categoryName {display: flex;height: auto;padding: 10px 17px;border-bottom: solid 1px #e2e8f0;font-weight: bold;background: #f3f3f3;}body .picmo__picker .picmo__categoryButtons .picmo__categoryTab button.picmo__categoryButton:hover {background: #ffffff;}body .picmo__emojiButton {border-radius: 4px;}body .picmo__emojiButton:focus {outline: none;border-radius: 5px;}.chaty-channel span.chaty-icon {display: block;}.chaty.form-open .chaty-widget.has-single .chaty-cta-close .chaty-cta-button {opacity: 1;visibility: visible;transform: rotate(360deg);z-index: 999;}.chaty-custom-whatsapp-form .eac-input-wrap {width: 100%;overflow: hidden;}.chaty-custom-whatsapp-form .chaty-whatsapp-button button {width: 100%;border: none;border-radius: 6px;padding: 8px;display: flex;align-items: center;justify-content: center;cursor: pointer;}.chaty-contact-input input[type=file].chaty-input-field {line-height: 32px;}.eac-sugg:empty, .eac-cval:empty {display: none !important;}.qr-code-header {display: flex;align-items: center;background-color: #A886CD;border-top-left-radius: 6px;border-top-right-radius: 6px;padding: 10px 15px;position: relative;justify-content: space-between;color: #fff;box-shadow: 0 16px 32px 0 #1A0E3529;z-index: 999999;}.chaty-close-button {cursor: pointer;}.qr-code-title {line-height: 1;padding: 15px 15px 0;font-size: 14px;color: #83A1B7;}.qr-code-box {margin-top: 10px;padding: 0 15px 15px;}.qr-code-head-title {display: inline-flex;align-items: center;}.qr-code-head-title svg {margin-right: 5px;}.mce-error {border: 1px solid #dd0000 !important;}.required_indicate {color: #ff0000;font-size: 18px;margin-left: 2px;}.chaty-whatsapp-button-button svg {display: inline-block;vertical-align: sub;}.chaty-wp-emoji-input:hover {background-color: transparent;border-color: transparent;}.chaty-wp-emoji-input:focus {outline: none;}.chaty-whatsapp-input[placeholder]:focus::-webkit-input-placeholder{-webkit-transition:opacity .5s .5s ease;transition:opacity .5s .5s ease;opacity:40% !important;}[placeholder]:focus::-webkit-input-placeholder{-webkit-transition:opacity .5s .5s ease;transition:opacity .5s .5s ease;opacity:1 !important;}.chaty-outer-forms form {margin: 0;}.chaty, .chaty *, .chaty-form, .chaty-form *, .chaty-whatsapp-form, .chaty-whatsapp-form * {-webkit-tap-highlight-color: rgba(0,0,0,0);} .wpcf7 .screen-reader-response { position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; word-wrap: normal !important; word-break: normal !important; } .wpcf7 .hidden-fields-container { display: none; } .wpcf7 form .wpcf7-response-output { margin: 2em 0.5em 1em; padding: 0.2em 1em; border: 2px solid #00a0d2; /* Blue */ } .wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none; } .wpcf7 form.sent .wpcf7-response-output { border-color: #46b450; /* Green */ } .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output { border-color: #dc3232; /* Red */ } .wpcf7 form.spam .wpcf7-response-output { border-color: #f56e28; /* Orange */ } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { border-color: #ffb900; /* Yellow */ } .wpcf7-form-control-wrap { position: relative; } .wpcf7-not-valid-tip { color: #dc3232; /* Red */ font-size: 1em; font-weight: normal; display: block; } .use-floating-validation-tip .wpcf7-not-valid-tip { position: relative; top: -2ex; left: 1em; z-index: 100; border: 1px solid #dc3232; background: #fff; padding: .2em .8em; width: 24em; } .wpcf7-list-item { display: inline-block; margin: 0 0 0 1em; } .wpcf7-list-item-label::before, .wpcf7-list-item-label::after { content: " "; } .wpcf7-spinner { visibility: hidden; display: inline-block; background-color: #23282d; /* Dark Gray 800 */ opacity: 0.75; width: 24px; height: 24px; border: none; border-radius: 100%; padding: 0; margin: 0 24px; position: relative; } form.submitting .wpcf7-spinner { visibility: visible; } .wpcf7-spinner::before { content: ''; position: absolute; background-color: #fbfbfc; /* Light Gray 100 */ top: 4px; left: 4px; width: 6px; height: 6px; border: none; border-radius: 100%; transform-origin: 8px 8px; animation-name: spin; animation-duration: 1000ms; animation-timing-function: linear; animation-iteration-count: infinite; } @media (prefers-reduced-motion: reduce) { .wpcf7-spinner::before { animation-name: blink; animation-duration: 2000ms; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes blink { from { opacity: 0; } 50% { opacity: 1; } to { opacity: 0; } } .wpcf7 [inert] { opacity: 0.5; } .wpcf7 input[type="file"] { cursor: pointer; } .wpcf7 input[type="file"]:disabled { cursor: default; } .wpcf7 .wpcf7-submit:disabled { cursor: not-allowed; } .wpcf7 input[type="url"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"] { direction: ltr; } .wpcf7-reflection > output { display: list-item; list-style: none; } .wpcf7-reflection > output[hidden] { display: none; } /* Self-hosted Google Fonts, latin subset, woff2. Generated by scripts/fonts-selfhost.cjs from https://fonts.googleapis.com/css2?family=Outfit:wght@400..800&family=Manrope:wght@400..700&display=swap */ @font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display: swap;src:url(https://plumasfamilydentistry.com/wp-content/themes/plumas-family-dentistry/assets/css/../fonts/manrope-normal-400-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Outfit';font-style:normal;font-weight:400 800;font-display: swap;src:url(https://plumasfamilydentistry.com/wp-content/themes/plumas-family-dentistry/assets/css/../fonts/outfit-normal-400-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* * Plumas Family Dentistry — the whole stylesheet (v3, the amber system). * * The owner approved design board D: a deep marigold (#F9BE6B) carries every * chapter break, navy (#1F3C74) carries every heading, and nothing in the body of * a page is dark. The only dark areas on the site are the phone bar at the very * top and the footer at the very bottom. Section edges are straight — no curves. * Outfit sets the headings, Manrope the body; there is no script face and no * feather or leaf motif anywhere. Headings and section intros are centred. * * The one deliberate exception is the homepage hero, which stays the full-bleed * practice film the doctor asked for. * * One file, no framework, no build step. Tokens, reset, type, then components in * the order they appear down a page. */ /* ------------------------------------------------------------------ tokens */ :root { /* Navy is the ink. The --pl-black and --pl-navy-* names are kept so every rule below still reads; they all resolve to the navy scale now. */ --pl-navy: #1F3C74; --pl-navy-deep: #16305C; --pl-navy-soft: #3A4250; --pl-black: #1F3C74; --pl-black-2: #16305C; /* The amber scale, straight off board D. */ --pl-amber: #F9BE6B; /* every band */ --pl-amber-soft: #FBD79B; /* icon chips, number chips */ --pl-amber-deep: #E0A64F; /* the rule under a heading, card edges on amber */ --pl-amber-ink: #8A5A18; /* amber as TEXT on white: 5.1:1 */ --pl-orange: #E68737; /* the call button, and only that */ --pl-orange-dark: #A35415; /* accent text and link hovers on light: 5.5:1. #B8611A measured 4.41:1, just under the floor. */ --pl-orange-soft: #F9BE6B; /* accent on the dark hero and the footer */ --pl-orange-ink: #20140B; /* text ON an orange or amber fill */ --pl-white: #ffffff; --pl-cream: #F7F9FC; /* the cool light band between two white ones */ --pl-bone: #EDF2FA; --pl-ink: #1F3C74; --pl-body: #455062; --pl-muted: #55606F; /* secondary copy: 6.4:1 on white. Was #7A8496 = 3.77:1, which read washed out on every section intro and failed AA. */ --pl-line: #E3EBF7; --pl-line-2: #CFDDF2; --pl-display: 'Outfit', -apple-system, system-ui, 'Segoe UI', sans-serif; --pl-sans: 'Manrope', -apple-system, system-ui, 'Segoe UI', sans-serif; /* Everything that used to ask for the serif now gets the display face. */ --pl-serif: var(--pl-display); --pl-wrap: 1240px; --pl-gut: 24px; --pl-radius: 8px; --pl-radius-lg: 12px; /* Flat offset shadows, not blur: the card sits on the page rather than floating. */ --pl-shadow-sm: 0 6px 0 -1px var(--pl-line); --pl-shadow-md: 0 8px 0 -1px var(--pl-line-2); --pl-shadow-lg: 0 18px 44px -24px rgba(31, 60, 116, .5); --pl-ease: cubic-bezier(.4, 0, .2, 1); } /* ------------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; font-family: var(--pl-sans); font-size: 17px; line-height: 1.65; color: var(--pl-ink); background: var(--pl-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } /* Reserve the sticky bar's height on phones so it never covers the last line. */ @media (max-width: 860px) { body { padding-bottom: 72px; } } img, video, svg, iframe { max-width: 100%; height: auto; } img { display: block; } button { font-family: inherit; cursor: pointer; } p { margin: 0 0 1.15em; } p:last-child { margin-bottom: 0; } ul, ol { padding-left: 1.3em; margin: 0 0 1.2em; } li { margin-bottom: .4em; } hr { border: 0; border-top: 1px solid var(--pl-line); margin: 40px 0; } a { color: var(--pl-navy); text-decoration: none; } a:hover, a:focus { color: var(--pl-orange-dark); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--pl-orange); outline-offset: 2px; border-radius: 4px; } .pl-skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--pl-navy-deep); color: #fff; padding: 12px 18px; font-weight: 600; } .pl-skip:focus { left: 6px; top: 6px; color: #fff; } .pl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------- typography */ /* * Outfit is a geometric sans with a wide weight range; 800 gives the headings * the optical adjustments to the size, which is why big headings and small ones * both look drawn rather than scaled. */ h1, h2, h3, h4 { font-family: var(--pl-display); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; color: var(--pl-navy); margin: 0 0 .5em; } h1 { font-size: clamp(2.3rem, 4.8vw, 3.6rem); font-weight: 800; } h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 800; } h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; } h4 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.005em; } /* No script face and no serif italic: emphasis is the amber ink, nothing more. */ em, .pl-italic { font-style: italic; font-family: inherit; } h1 em, h2 em, h3 em { color: var(--pl-amber-ink); font-style: normal; } strong, b { font-weight: 600; color: var(--pl-navy-deep); } blockquote { margin: 1.6em 0; padding: 18px 24px; background: var(--pl-cream); border-left: 4px solid var(--pl-amber); font-size: 1.12rem; line-height: 1.6; color: var(--pl-navy); } .pl-eyebrow { font-family: var(--pl-display); font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--pl-amber-ink); display: block; margin: 0 0 14px; } .pl-eyebrow-center, .pl-head .pl-eyebrow { text-align: center; } .pl-head-left .pl-eyebrow { text-align: left; } .pl-dark .pl-eyebrow, .pl-navy-bg .pl-eyebrow { color: var(--pl-navy); } /* The rule under a section heading. Straight, amber, centred with its heading. */ .pl-head h2::after, .pl-phero h1::after, .pl-cta-band h2::after { content: ''; display: block; width: 62px; height: 4px; background: var(--pl-amber-deep); margin: 20px auto 0; border-radius: 2px; } .pl-head-left h2::after { margin-left: 0; margin-right: 0; } .pl-lede { font-size: 1.15rem; line-height: 1.6; color: var(--pl-muted); max-width: 58ch; } .pl-dark .pl-lede, .pl-navy-bg .pl-lede, .pl-band .pl-lede { color: #43506B; } /* Fairfield's section head: eyebrow, heading, one italic line, centred. */ .pl-head { text-align: center; max-width: 760px; margin: 0 auto 56px; } .pl-head .pl-eyebrow { justify-content: center; } .pl-head h2 { margin-bottom: 18px; } .pl-head p { color: var(--pl-muted); font-size: 1.12rem; line-height: 1.65; margin: 0; } .pl-head-left { text-align: left; margin-left: 0; } .pl-head-left .pl-eyebrow { justify-content: flex-start; } /* A second heading inside a section that already has one — the hygienists under the dentists on /about/. Smaller, and with the air above it that tells you a new group has started without breaking the block in two. */ .pl-head-sub { margin-top: 64px; margin-bottom: 40px; } .pl-head-sub h2 { font-size: 1.85rem; } /* ------------------------------------------------------------------ layout */ .pl-wrap { width: 100%; max-width: var(--pl-wrap); margin: 0 auto; padding: 0 var(--pl-gut); } .pl-section { padding: 96px 0; } .pl-section-tight { padding: 64px 0; } @media (max-width: 768px) { .pl-section { padding: 64px 0; } .pl-section-tight { padding: 48px 0; } } .pl-cream { background: var(--pl-cream); } .pl-bone { background: var(--pl-bone); } /* What used to be a wall of black is the amber band now. Navy type on amber is 6.4:1, so the band reads as a chapter break without going dark. */ .pl-dark, .pl-navy-bg, .pl-band { background: var(--pl-amber); color: var(--pl-navy); } .pl-dark h1, .pl-dark h2, .pl-dark h3, .pl-navy-bg h1, .pl-navy-bg h2, .pl-navy-bg h3, .pl-band h1, .pl-band h2, .pl-band h3 { color: var(--pl-navy); } .pl-dark h2 em, .pl-navy-bg h2 em, .pl-band h2 em { color: var(--pl-navy-deep); } .pl-dark strong, .pl-navy-bg strong, .pl-band strong { color: var(--pl-navy-deep); } .pl-dark p, .pl-navy-bg p, .pl-band p { color: #43506B; } .pl-band .pl-head h2::after { background: var(--pl-navy); } .pl-grid { display: grid; gap: 24px; } .pl-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pl-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pl-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1000px) { .pl-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .pl-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .pl-grid-2, .pl-grid-3, .pl-grid-4 { grid-template-columns: minmax(0, 1fr); } } /* ----------------------------------------------------------------- buttons */ .pl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 32px; font-family: var(--pl-sans); font-size: .95rem; font-weight: 600; letter-spacing: .02em; line-height: 1.2; border: 1.5px solid transparent; border-radius: var(--pl-radius); white-space: nowrap; text-align: center; text-decoration: none; cursor: pointer; transition: all .3s var(--pl-ease); } .pl-btn svg { flex: none; } .pl-btn-primary { background: var(--pl-orange); color: var(--pl-orange-ink); box-shadow: 0 5px 0 -1px #C06B22; } .pl-btn-primary:hover, .pl-btn-primary:focus { background: #D2762A; color: var(--pl-orange-ink); transform: translateY(2px); box-shadow: 0 2px 0 -1px #C06B22; } .pl-btn-black, .pl-btn-navy { background: var(--pl-navy); color: #fff; } .pl-btn-black:hover, .pl-btn-navy:hover, .pl-btn-black:focus, .pl-btn-navy:focus { background: var(--pl-navy-deep); color: #fff; transform: translateY(-2px); } .pl-btn-ghost { background: transparent; color: var(--pl-navy); border-color: var(--pl-navy); } .pl-btn-ghost:hover, .pl-btn-ghost:focus { background: var(--pl-navy); color: #fff; } /* On an amber band the secondary button is white, as on board D. */ .pl-btn-on-dark { background: #fff; color: var(--pl-navy); border-color: #fff; } .pl-btn-on-dark:hover, .pl-btn-on-dark:focus { background: var(--pl-navy); color: #fff; border-color: var(--pl-navy); } .pl-band .pl-btn-ghost, .pl-dark .pl-btn-ghost, .pl-cta-band .pl-btn-ghost, .pl-phero .pl-btn-ghost { background: #fff; color: var(--pl-navy); border-color: #fff; } .pl-band .pl-btn-ghost:hover, .pl-dark .pl-btn-ghost:hover, .pl-cta-band .pl-btn-ghost:hover, .pl-phero .pl-btn-ghost:hover { background: var(--pl-navy); color: #fff; border-color: var(--pl-navy); } /* * The arrow is U+2192, which Outfit does not carry, so it is drawn by whatever * the system falls back to — and until that resolves the button is a different * width. At 390px that was enough to re-wrap the hero button row and register a * 0.068 layout shift on roughly one load in three. A fixed box for the glyph * keeps the button the same width before and after. */ .pl-btn-arrow::after { content: '\2192'; display: inline-block; width: 1em; text-align: center; transition: transform .3s var(--pl-ease); } .pl-btn-arrow:hover::after { transform: translateX(4px); } .pl-btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } /* ------------------------------------------------------------------ topbar */ .pl-topbar { background: var(--pl-navy-deep); color: #fff; font-size: .85rem; position: sticky; top: 0; z-index: 110; box-shadow: 0 1px 0 rgba(255, 255, 255, .06); } .pl-topbar .pl-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; padding-top: 6px; padding-bottom: 6px; } .pl-topbar-meta { display: flex; align-items: center; gap: 22px; min-width: 0; } .pl-topbar-meta > * { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; opacity: .92; } /* The positioning line. Amber so it reads as a claim rather than another piece of contact data, and the first thing to go when the bar runs out of room. */ .pl-topbar-local { color: var(--pl-amber); font-weight: 600; } @media (max-width: 1180px) { .pl-topbar-local { display: none; } } .pl-topbar a { color: #fff; font-weight: 500; text-decoration: none; } .pl-topbar a:hover { color: var(--pl-orange-soft); } .pl-topbar a svg { color: var(--pl-orange-soft); } .pl-topbar-cta { display: inline-flex; align-items: center; background: var(--pl-orange); color: var(--pl-orange-ink) !important; padding: 6px 18px; border-radius: 999px; font-weight: 700; font-size: .8rem; box-shadow: 0 4px 14px -4px rgba(230, 135, 55, .6); transition: transform .15s, box-shadow .2s; } .pl-topbar-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -4px rgba(230, 135, 55, .8); } @media (max-width: 720px) { .pl-topbar { font-size: .78rem; } .pl-topbar .pl-wrap { justify-content: center; } .pl-topbar-hide, .pl-topbar-cta { display: none; } } /* ------------------------------------------------------------------ header */ /* * Solid white, no backdrop-filter: a filter makes the header the containing block * for its position:fixed children, which clipped the phone drawer and the scrim to * the header's 84px. */ .pl-header { background: #fff; border-bottom: 1px solid var(--pl-line); position: sticky; top: 38px; z-index: 100; } @media (max-width: 720px) { .pl-header { top: 34px; } } .pl-header .pl-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; } .pl-logo { display: flex; align-items: center; flex: none; } .pl-logo-img { width: 236px; height: 58px; object-fit: contain; } @media (max-width: 520px) { .pl-logo-img { width: 180px; height: 44px; } } .pl-nav { display: flex; align-items: center; gap: 28px; } .pl-menu { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; } .pl-menu li { margin: 0; } .pl-menu > li { position: relative; } .pl-menu a { font-size: .95rem; font-weight: 500; color: var(--pl-ink); text-decoration: none; display: inline-block; padding: 6px 0; position: relative; white-space: nowrap; transition: color .2s; } .pl-menu a:hover { color: var(--pl-orange-dark); } /* * The underline is a background, not a pseudo-element, so ::after is free for the * chevron. It used to be on ::before, which put the mark to the LEFT of the label * — every parent item read as a stray glyph in front of its own name. */ .pl-menu > li > a { background-image: linear-gradient(var(--pl-orange), var(--pl-orange)); background-repeat: no-repeat; background-position: left bottom; background-size: 0 2px; transition: color .2s, background-size .3s var(--pl-ease); } .pl-menu > li > a:hover, .pl-menu > li.current-menu-item > a, .pl-menu > li.current-menu-ancestor > a { background-size: 100% 2px; } /* Parents get a small chevron AFTER the label. */ .pl-menu > li.menu-item-has-children > a::after { content: ''; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 9px; opacity: .6; vertical-align: middle; transition: transform .25s var(--pl-ease), opacity .2s; } .pl-menu > li.menu-item-has-children:hover > a::after { transform: rotate(-135deg) translateY(-2px) translateX(-2px); opacity: 1; } /* Dropdowns open on hover and on focus so the keyboard reaches them. */ .pl-menu .sub-menu { list-style: none; margin: 0; padding: 8px 0; position: absolute; top: calc(100% + 10px); left: -16px; min-width: 250px; background: #fff; border: 1px solid var(--pl-line); border-radius: 8px; box-shadow: 0 18px 40px -16px rgba(22, 48, 92, .28); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .12s var(--pl-ease), transform .12s var(--pl-ease), visibility 0s linear .12s; z-index: 200; } /* A bridge under the item so the cursor can travel to the panel without closing it. */ .pl-menu > li.menu-item-has-children::before { content: ''; position: absolute; left: -16px; right: -16px; top: 100%; height: 18px; } .pl-menu li:hover > .sub-menu, .pl-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .12s var(--pl-ease), transform .12s var(--pl-ease), visibility 0s linear 0s; } .pl-menu .sub-menu a { display: block; padding: 10px 22px; font-size: .92rem; white-space: nowrap; } .pl-menu .sub-menu a::after, .pl-menu .sub-menu a::before { display: none; } .pl-menu .sub-menu a:hover { color: var(--pl-orange-dark); background: var(--pl-cream); } /* * Third level (Procedures > General Dentistry > Fillings) flies out to the right. * Only the LIST ITEM is positioned, never the panel — setting position on .sub-menu * itself overrides the absolute above and drops every dropdown into normal flow. */ .pl-menu .sub-menu li { position: relative; } .pl-menu .sub-menu .sub-menu { top: -8px; left: 100%; margin-left: 6px; } .pl-menu .sub-menu .menu-item-has-children > a { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .pl-menu .sub-menu .menu-item-has-children > a::after { content: '\203A'; display: inline-block; font-size: 1.15rem; line-height: 1; color: var(--pl-muted); position: static; background: none; width: auto; height: auto; } .pl-menu .sub-menu .menu-item-has-children::before { content: ''; position: absolute; top: 0; left: 100%; width: 12px; height: 100%; } /* Near the right edge there is no room to fly right, so the last two items open left. */ .pl-menu > li:nth-last-child(-n+2) .sub-menu .sub-menu { left: auto; right: 100%; margin-left: 0; margin-right: 6px; } .pl-nav-cta .pl-btn { border-radius: 999px; padding: 12px 26px; font-size: .92rem; } .pl-burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--pl-navy); } .pl-nav-close { display: none; } /* * Both of these exist only in the mobile drawer. main.js injects a .pl-sub-toggle * into every parent item whatever the viewport, so without this the desktop menu * shows a bare browser button beside each chevron — two carets per item. */ .pl-sub-toggle { display: none; } @media (max-width: 1080px) { .pl-burger { display: block; } .pl-nav { position: fixed; inset: 0 0 0 auto; width: min(88vw, 400px); background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: 84px 24px 32px; overflow-y: auto; transform: translateX(100%); transition: transform .25s var(--pl-ease); box-shadow: var(--pl-shadow-lg); z-index: 300; } .pl-nav[data-open="true"] { transform: translateX(0); } .pl-menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .pl-menu > li { border-bottom: 1px solid var(--pl-line); } .pl-menu a { font-size: 1.02rem; padding: 14px 4px; display: block; white-space: normal; } .pl-menu > li > a { background-image: none; } .pl-menu > li.menu-item-has-children::before { display: none; } /* * The chevron moves onto the toggle button built by main.js — for the nested * items too. The second selector repeats the one at the top of this file * rather than simplifying it: that rule draws the '›' on submenu parents like * Emergency Dentist, and it carries three classes, so a looser selector here * loses to it and the item ends up with two carets. */ .pl-menu > li.menu-item-has-children > a::after, .pl-menu .sub-menu .menu-item-has-children > a::after { display: none; } /* * Submenus are closed until tapped. * * They used to be forced open — position:static, opacity:1, visibility:visible * with nothing to collapse them — so the drawer opened as one enormous list of * every page on the site, About through the nine emergency symptoms. The * chevrons were drawn but did nothing, which is what "the menu keeps open all * the time" was. */ .pl-menu li.menu-item-has-children { position: relative; } .pl-menu .sub-menu, .pl-menu .sub-menu .sub-menu { display: none; position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; border-radius: 0; background: var(--pl-cream); padding: 4px 0 8px 14px; margin: 0 0 8px; min-width: 0; } .pl-menu li[data-sub="open"] > .sub-menu { display: block; } .pl-sub-toggle { position: absolute; top: 0; right: 0; width: 52px; height: 50px; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--pl-navy); } .pl-sub-toggle svg { transition: transform .2s var(--pl-ease); } .pl-menu li[data-sub="open"] > .pl-sub-toggle svg { transform: rotate(180deg); } /* Keep the label clear of the button's tap target. */ .pl-menu li.menu-item-has-children > a { padding-right: 56px; } .pl-menu .sub-menu a { padding: 10px 12px; font-size: .95rem; } .pl-nav-cta { margin-top: 22px; } .pl-nav-cta .pl-btn { width: 100%; } .pl-nav-close { display: block; position: absolute; top: 20px; right: 16px; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--pl-navy); } } .pl-scrim { position: fixed; inset: 0; background: rgba(22, 48, 92, .5); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; z-index: 250; } .pl-scrim[data-open="true"] { opacity: 1; visibility: visible; } /* -------------------------------------------------------------- home hero */ /* * The one place the Fairfield system gives way: the practice film, full-bleed, with * the copy over it. The doctor asked for this specifically and it is the only part * of the old site he liked. The type on it is still Outfit, the buttons are still * the system's, so it reads as the same site as everything below. */ .pl-hero { position: relative; background: var(--pl-black); color: #fff; overflow: hidden; } .pl-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3; background: linear-gradient(90deg, var(--pl-orange) 0%, var(--pl-orange-soft) 60%, transparent 100%); } .pl-hero .pl-wrap { position: relative; z-index: 2; min-height: clamp(520px, 72vh, 720px); display: grid; align-content: center; padding-top: 96px; padding-bottom: 96px; } .pl-hero-copy { max-width: 680px; } .pl-hero h1 { color: #fff; margin-bottom: 26px; } .pl-hero h1 em { color: var(--pl-orange-soft); } .pl-hero .pl-lede { color: rgba(255, 255, 255, .84); font-size: 1.18rem; max-width: 540px; margin-bottom: 36px; } .pl-hero-bgmedia { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .pl-hero-bgvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* * The scrim is what makes white text on moving footage legible. Weighted to the * left where the words are; opens up on the right where the picture should read. */ .pl-hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 15, 18, .9) 0%, rgba(14, 15, 18, .74) 42%, rgba(14, 15, 18, .3) 100%), linear-gradient(0deg, rgba(14, 15, 18, .55) 0%, rgba(14, 15, 18, 0) 55%); } @media (max-width: 900px) { .pl-hero-scrim { background: linear-gradient(180deg, rgba(14, 15, 18, .7) 0%, rgba(14, 15, 18, .88) 100%); } .pl-hero .pl-wrap { min-height: 0; padding-top: 72px; padding-bottom: 64px; } } @media (prefers-reduced-motion: reduce) { .pl-hero-bgvideo { display: none; } .pl-hero-bgmedia { background-image: var(--pl-hero-poster); background-size: cover; background-position: center; } } .pl-hero .pl-eyebrow { color: var(--pl-orange-soft); } .pl-hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .22); } .pl-trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; letter-spacing: .01em; color: #fff; } .pl-trust-item .stars { color: #F5B840; letter-spacing: 1px; line-height: 1; font-size: .95rem; } .pl-trust-item .tick { color: var(--pl-orange-soft); font-weight: 800; } /* ------------------------------------------------------------ inner hero */ /* Fairfield's "hero-about": cream, copy left, offset-framed photo right. */ .pl-phero { background: var(--pl-amber); padding: 52px 0 60px; } .pl-phero .pl-wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } .pl-phero .pl-wrap.pl-phero-solo { grid-template-columns: minmax(0, 1fr); text-align: center; } .pl-phero h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.06; margin-bottom: 0; color: var(--pl-navy); } .pl-phero h1::after { background: var(--pl-navy); margin: 20px 0; } .pl-phero-solo h1::after { margin-left: auto; margin-right: auto; } .pl-phero .pl-lede { color: #43506B; font-size: 1.12rem; margin-bottom: 26px; max-width: 46ch; } .pl-phero-solo .pl-lede { max-width: 62ch; margin-left: auto; margin-right: auto; } .pl-phero .pl-eyebrow { color: var(--pl-navy); } .pl-phero-solo .pl-meta, .pl-phero-solo .pl-btn-row { justify-content: center; } .pl-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; } .pl-meta-item { display: flex; flex-direction: column; gap: 2px; padding: 12px 20px; background: #fff; border: 1.5px solid #fff; border-radius: var(--pl-radius); min-width: 120px; } .pl-meta-item .label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pl-amber-ink); } .pl-meta-item .value { font-family: var(--pl-display); font-size: 1.12rem; font-weight: 700; color: var(--pl-navy); line-height: 1.2; } .pl-phero-media { position: relative; } /* Crop toward the top third. A portrait photograph forced into a 4:3 hero and centred loses the head, which is how a headless Dr. Singh reached the page. */ .pl-phero-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 28%; border-radius: var(--pl-radius-lg); display: block; } /* The offset frame behind the photo — the signature move. */ .pl-phero-media::before { content: none; } @media (max-width: 860px) { .pl-phero { padding: 36px 0 52px; } .pl-phero .pl-wrap { grid-template-columns: 1fr; gap: 36px; } .pl-phero-media::before { right: 18px; bottom: -14px; } } /* ------------------------------------------------------------ breadcrumb */ .pl-crumbs { background: #fff; border-bottom: 1px solid var(--pl-line); font-size: .85rem; letter-spacing: .02em; } .pl-crumbs .pl-wrap { display: flex; align-items: center; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; } .pl-crumbs a { color: var(--pl-muted); } .pl-crumbs a:hover { color: var(--pl-orange-dark); } .pl-crumbs .sep { color: var(--pl-amber-deep); margin: 0 10px; } .pl-crumbs .cur { color: var(--pl-navy); font-weight: 500; } @media (max-width: 640px) { .pl-crumbs { font-size: .78rem; } .pl-crumbs .sep { margin: 0 7px; } } /* ------------------------------------------------------------- trust bar */ .pl-trust { background: #fff; border-bottom: 1px solid var(--pl-line); } .pl-trust .pl-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 30px; padding-bottom: 30px; } .pl-trust-cell { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: left; font-size: .88rem; font-weight: 500; color: var(--pl-navy); letter-spacing: .02em; } .pl-trust-cell .tick { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid var(--pl-line); display: flex; align-items: center; justify-content: center; color: var(--pl-orange-dark); flex: none; } @media (max-width: 768px) { .pl-trust .pl-wrap { grid-template-columns: repeat(2, 1fr); gap: 16px; } .pl-trust-cell { justify-content: flex-start; } } /* ------------------------------------------------------------- insurance */ .pl-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .pl-pill { padding: 11px 20px; border: 1px solid var(--pl-line); border-radius: 999px; background: #fff; font-size: .9rem; font-weight: 500; color: var(--pl-navy); } .pl-pill-all { background: var(--pl-amber); color: var(--pl-orange-ink); border-color: var(--pl-amber-deep); font-weight: 700; } /* ---------------------------------------------------------------- about */ /* * The about block, cut back to the reference the owner sent: a photo, a heading, * a few lines and one button. The pull quote, the two long paragraphs and the * four tick items are gone — he asked why we fill so much content, and he was * right that nothing in them earned its place on a homepage. */ .pl-about { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } .pl-about-visual img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--pl-radius-lg); display: block; } .pl-about-content h2 { margin-bottom: 20px; } .pl-about-content p { color: var(--pl-body); font-size: 1.08rem; line-height: 1.72; margin-bottom: 0; max-width: 46ch; } .pl-about-cta { margin-top: 30px; } @media (max-width: 968px) { .pl-about { grid-template-columns: 1fr; gap: 40px; } .pl-about-content p { max-width: none; } } /* ------------------------------------------------------------- services */ .pl-services { background: var(--pl-cream); color: var(--pl-body); position: relative; border-top: 1px solid var(--pl-line); border-bottom: 1px solid var(--pl-line); } .pl-services .pl-head h2 { color: var(--pl-navy); } .pl-services .pl-head p { color: var(--pl-body); font-size: 1.1rem; } .pl-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; z-index: 1; } .pl-svc { background: #fff; border: 1.5px solid var(--pl-line); border-radius: var(--pl-radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--pl-shadow-sm); transition: transform .3s var(--pl-ease), box-shadow .3s var(--pl-ease), border-color .3s var(--pl-ease); } .pl-svc:hover { transform: translateY(-4px); border-color: var(--pl-amber-deep); box-shadow: 0 10px 0 -1px var(--pl-amber-soft); } .pl-svc-media { position: relative; display: block; aspect-ratio: 7 / 5; background: var(--pl-bone); overflow: hidden; } .pl-svc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--pl-ease); } .pl-svc:hover .pl-svc-media img { transform: scale(1.05); } .pl-svc-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 48, 92, .28) 0%, transparent 34%, transparent 58%, rgba(22, 48, 92, .82) 100%); pointer-events: none; } .pl-svc-num { position: absolute; left: 18px; bottom: 13px; z-index: 2; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; } .pl-svc-body { padding: 26px 24px; display: flex; flex-direction: column; flex: 1; } .pl-svc h3 { font-size: 1.45rem; line-height: 1.12; font-weight: 500; margin-bottom: 12px; } .pl-svc h3 a { color: var(--pl-navy); } .pl-svc h3 a:hover { color: var(--pl-orange-dark); } .pl-svc p { color: var(--pl-muted); font-size: .94rem; line-height: 1.6; margin: 0; } .pl-svc-list { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--pl-line); display: grid; gap: 11px; flex: 1; align-content: start; } .pl-svc-list li { margin: 0; } .pl-svc-list a { display: inline-flex; align-items: baseline; gap: 9px; color: var(--pl-ink); font-size: .92rem; font-weight: 500; } .pl-svc-list a::before { content: '\2192'; color: var(--pl-orange-dark); font-weight: 700; } .pl-svc-list a:hover { color: var(--pl-orange-dark); } .pl-svc-link { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--pl-line); font-size: .92rem; color: var(--pl-orange-dark); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: gap .3s var(--pl-ease); } .pl-svc-link:hover { gap: 14px; } .pl-services-cta { text-align: center; margin-top: 44px; position: relative; z-index: 1; } @media (max-width: 1024px) { .pl-services-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .pl-services-grid { grid-template-columns: 1fr; } } /* ----------------------------------------------------------------- stats */ /* The homepage needs one full-width amber break between the service cards and the price cards, or the whole page reads as a wall of white. This is it. */ .pl-stats { background: var(--pl-amber); padding: 64px 0; } .pl-figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; } .pl-figure { padding: 16px 24px; border-right: 1px solid rgba(31, 60, 116, .22); } .pl-figure:last-child { border-right: 0; } .pl-figure strong { display: block; font-family: var(--pl-display); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; color: var(--pl-navy); margin-bottom: 12px; } .pl-figure strong .plus { color: var(--pl-navy-deep); } .pl-figure span { display: block; font-size: .86rem; color: #43506B; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; } @media (max-width: 768px) { .pl-figures { grid-template-columns: repeat(2, 1fr); gap: 20px; } .pl-figure { border-right: 0; border-bottom: 1px solid var(--pl-line); padding-bottom: 22px; } } /* --------------------------------------------------------------- pricing */ .pl-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; } .pl-price { position: relative; background: #fff; border: 1px solid var(--pl-line); border-radius: 10px; padding: 0 0 30px; overflow: hidden; box-shadow: var(--pl-shadow-sm); display: flex; flex-direction: column; } .pl-price.featured { border-color: var(--pl-navy); box-shadow: var(--pl-shadow-md); } .pl-price-img { aspect-ratio: 16 / 10; overflow: hidden; } .pl-price-img img { width: 100%; height: 100%; object-fit: cover; } .pl-price-badge { position: absolute; top: 16px; left: 16px; background: var(--pl-amber); color: var(--pl-orange-ink); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; } .pl-price h3 { font-size: 1.3rem; margin: 26px 28px 8px; } .pl-price-num { font-family: var(--pl-display); font-size: 2.5rem; font-weight: 800; line-height: 1; color: var(--pl-navy); margin: 0 28px 6px; } .pl-price-num .cur { font-size: 1.4rem; vertical-align: top; margin-right: 2px; color: var(--pl-orange-dark); } .pl-price-meta { font-size: .86rem; color: var(--pl-muted); margin: 0 28px 20px; } .pl-price ul { list-style: none; margin: 0 28px 22px; padding: 18px 0 0; border-top: 1px solid var(--pl-line); flex: 1; } .pl-price li { font-size: .92rem; color: var(--pl-ink); padding-left: 22px; position: relative; margin-bottom: 8px; } .pl-price li::before { content: '\2713'; position: absolute; left: 0; color: var(--pl-orange-dark); font-weight: 700; } .pl-price-fin { margin: 0 28px; font-size: .8rem; color: var(--pl-muted); padding-top: 14px; border-top: 1px dashed var(--pl-line); } .pl-pricing-note { text-align: center; margin-top: 44px; } .pl-pricing-note p { color: var(--pl-muted); font-size: .92rem; margin-bottom: 20px; } @media (max-width: 968px) { .pl-pricing-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } } /* --------------------------------------------------------------- doctors */ .pl-docs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .pl-doc { background: #fff; border: 1px solid var(--pl-line); border-radius: 10px; overflow: hidden; display: grid; grid-template-columns: 240px 1fr; box-shadow: var(--pl-shadow-sm); } .pl-doc img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; object-position: 50% 15%; } .pl-doc-body { padding: 30px 30px 28px; } .pl-doc h3 { font-size: 1.45rem; margin-bottom: 4px; } .pl-doc .role { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pl-orange-dark); margin-bottom: 14px; } .pl-doc p { font-size: .95rem; color: var(--pl-muted); line-height: 1.7; margin-bottom: 16px; } .pl-more { color: var(--pl-amber-ink); font-family: var(--pl-display); font-weight: 700; font-size: .92rem; display: inline-flex; gap: 8px; align-items: center; transition: gap .3s var(--pl-ease); } .pl-more:hover { gap: 14px; } @media (max-width: 968px) { .pl-docs { grid-template-columns: 1fr; } } /* * On a phone the card stacks: photograph on top, the biography underneath it. * It used to stay side by side down to 560px, which squeezed the bio into a * column narrower than the picture beside it and read as though the text was * sitting on the photo. */ @media (max-width: 860px) { .pl-doc { grid-template-columns: 1fr; } /* * height:auto matters. The rule above sets height:100% for the side-by-side * layout, and leaving it in place here gave the image both a percentage * height and an aspect-ratio — the row sizes itself from the image while the * image sizes itself from the row. Chrome picks the aspect-ratio; iOS Safari * stretched the picture to the height of the whole card, so the biography * printed on top of Dr Singh's face on a real phone while the desktop * responsive preview looked correct. */ .pl-doc img { height: auto; min-height: 0; aspect-ratio: 3 / 2; object-position: 50% 22%; } /* A solid panel, so copy can never read over a photograph again. */ .pl-doc-body { padding: 24px 24px 26px; background: #fff; position: relative; z-index: 1; } } /* --------------------------------------------------------------- reviews */ .pl-rating-pill { display: inline-flex; align-items: center; gap: 12px; padding: 12px 24px; background: var(--pl-amber-soft); border-radius: 100px; margin-bottom: 24px; } .pl-rating-pill .stars { color: var(--pl-orange); letter-spacing: 2px; font-size: 1.1rem; } .pl-rating-pill span:last-child { font-weight: 600; color: var(--pl-navy); font-size: .95rem; } .pl-rating-pill strong { font-family: var(--pl-serif); font-size: 1.1rem; } .pl-review { background: #fff; border: 1px solid var(--pl-line); border-radius: 10px; padding: 30px; margin: 0; box-shadow: var(--pl-shadow-sm); } .pl-review .stars { color: var(--pl-orange); letter-spacing: 2px; font-size: 1rem; } .pl-review blockquote { border: 0; padding: 0; margin: 14px 0 16px; font-size: 1.05rem; line-height: 1.6; font-style: normal; font-family: var(--pl-sans); color: var(--pl-ink); } .pl-review figcaption { font-family: var(--pl-serif); font-style: italic; font-size: .98rem; color: var(--pl-navy); } /* --------------------------------------------------------------- gallery */ .pl-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .pl-gallery figure { margin: 0; border-radius: 8px; overflow: hidden; box-shadow: var(--pl-shadow-sm); } .pl-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s var(--pl-ease); } .pl-gallery figure:hover img { transform: scale(1.04); } @media (max-width: 768px) { .pl-gallery { grid-template-columns: repeat(2, 1fr); } } /* ----------------------------------------------------------------- steps */ .pl-steps { list-style: none; padding: 0; margin: 0 auto; max-width: 760px; counter-reset: step; } .pl-steps li { position: relative; margin: 0 0 16px; counter-increment: step; background: #fff; border: 1.5px solid var(--pl-line); border-left: 4px solid var(--pl-amber); border-radius: var(--pl-radius); padding: 22px 26px 22px 76px; } .pl-steps li::before { content: counter(step); position: absolute; left: 20px; top: 20px; width: 36px; height: 36px; border-radius: 50%; background: var(--pl-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--pl-display); font-weight: 800; font-size: 1.05rem; } .pl-steps h3 { font-family: var(--pl-display); font-size: 1.12rem; font-weight: 700; color: var(--pl-navy); margin-bottom: 6px; } .pl-steps p { font-size: .97rem; line-height: 1.62; color: var(--pl-body); margin: 0; } /* ------------------------------------------------------------------- FAQ */ .pl-faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: start; } .pl-faq-band { background: #fff; border-top: 1px solid var(--pl-line); } .pl-faq-head h2 { margin-bottom: 18px; } .pl-faq-head p { color: var(--pl-muted); line-height: 1.7; margin-bottom: 24px; } .pl-faq-list { display: flex; flex-direction: column; gap: 14px; } /*
, so it works with JavaScript switched off. */ .pl-faq { background: #fff; border: 1.5px solid var(--pl-line); border-radius: var(--pl-radius-lg); box-shadow: var(--pl-shadow-sm); transition: border-color .25s var(--pl-ease), box-shadow .25s var(--pl-ease); } .pl-faq[open] { border-color: var(--pl-amber-deep); box-shadow: 0 6px 0 -1px var(--pl-amber-soft); } .pl-faq > summary { padding: 20px 24px; list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: var(--pl-display); font-size: 1.08rem; font-weight: 700; color: var(--pl-navy); } .pl-faq > summary::-webkit-details-marker { display: none; } .pl-faq > summary:hover { color: var(--pl-amber-ink); } .pl-faq > summary::after { content: '+'; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--pl-amber-soft); color: var(--pl-amber-ink); font-family: var(--pl-display); font-size: 1.3rem; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .25s var(--pl-ease); } .pl-faq[open] > summary::after { content: '\2212'; background: var(--pl-amber); color: var(--pl-orange-ink); } .pl-faq p { padding: 0 24px 22px; margin: 0; color: var(--pl-body); line-height: 1.72; } @media (max-width: 968px) { .pl-faq-grid { grid-template-columns: 1fr; gap: 36px; } } /* -------------------------------------------------------------- CTA band */ .pl-cta-band { background: var(--pl-amber); color: var(--pl-navy); padding: 92px 0; } .pl-cta-band .pl-wrap { text-align: center; max-width: 860px; } .pl-cta-band h2 { color: var(--pl-navy); margin-bottom: 20px; } .pl-cta-band h2 em { color: var(--pl-navy-deep); } .pl-cta-band h2::after { background: var(--pl-navy); } .pl-cta-band p { font-size: 1.12rem; color: #43506B; line-height: 1.65; margin: 0 auto 36px; max-width: 60ch; } .pl-cta-band .pl-btn-row { justify-content: center; } @media (max-width: 768px) { .pl-cta-band { padding: 60px 0; } } /* -------------------------------------------------------- split section */ .pl-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; } .pl-split-rev { grid-template-columns: .85fr 1.15fr; } .pl-split-rev .pl-split-media { order: -1; } .pl-split-media { position: relative; } .pl-split-media img { width: 100%; border-radius: var(--pl-radius-lg); display: block; } /* No decorative block behind the photo: the owner asked for simple. */ .pl-split-media::after { content: none; } .pl-split-rev .pl-split-media::after { right: auto; left: -16px; } .pl-split p { color: var(--pl-muted); font-size: 1.05rem; line-height: 1.72; } @media (max-width: 860px) { .pl-split, .pl-split-rev { grid-template-columns: 1fr; gap: 40px; } .pl-split-media::after { display: none; } .pl-split-rev .pl-split-media { order: 0; } } /* --------------------------------------------------------- chips / areas */ .pl-chip-row { display: flex; flex-wrap: wrap; gap: 10px; } .pl-chip { border: 1px solid var(--pl-line); border-radius: 999px; padding: 11px 22px; background: #fff; font-size: .92rem; color: var(--pl-navy); font-weight: 500; transition: all .2s; } .pl-chip:hover { background: var(--pl-navy); color: #fff; border-color: var(--pl-navy); } /* ------------------------------------------------------------ blog cards */ .pl-card { background: #fff; border: 1.5px solid var(--pl-line); border-radius: var(--pl-radius-lg); overflow: hidden; display: flex; flex-direction: column; color: inherit; text-decoration: none; box-shadow: var(--pl-shadow-sm); transition: transform .3s var(--pl-ease), box-shadow .3s var(--pl-ease); } a.pl-card:hover { transform: translateY(-4px); border-color: var(--pl-amber-deep); box-shadow: 0 10px 0 -1px var(--pl-amber-soft); color: inherit; } .pl-card-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--pl-bone); } .pl-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--pl-ease); } a.pl-card:hover .pl-card-img img { transform: scale(1.04); } .pl-card-body { padding: 26px 26px 24px; display: flex; flex-direction: column; flex: 1; } .pl-card-date { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pl-amber-ink); margin-bottom: 10px; } .pl-card h3 { font-size: 1.25rem; line-height: 1.25; margin-bottom: 10px; color: var(--pl-navy); } .pl-card p { font-size: .94rem; color: var(--pl-muted); line-height: 1.6; margin-bottom: 18px; flex: 1; } .pl-card .pl-more { margin-top: auto; } /* -------------------------------------------------------- article prose */ .pl-body { padding: 64px 0; } .pl-body-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; padding: 64px 0; } .pl-body-solo { max-width: 760px; margin: 0 auto; } @media (max-width: 1000px) { .pl-body-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 48px 0; } } .pl-prose { font-size: 1.08rem; line-height: 1.75; color: var(--pl-body); max-width: 74ch; } .pl-prose > *:first-child { margin-top: 0; } .pl-prose p { margin: 0 0 1.3em; } .pl-prose h2 { font-size: clamp(1.6rem, 2.7vw, 2.1rem); font-weight: 800; color: var(--pl-navy); margin: 1.9em 0 .7em; } /* The same 62px rule the section heads get, at the prose scale and left aligned. It is what turns a long white column into chapters. */ .pl-prose h2::after { content: ''; display: block; width: 48px; height: 4px; background: var(--pl-amber-deep); border-radius: 2px; margin-top: 16px; } .pl-prose > h2:first-child { margin-top: 0; } .pl-prose h3 { font-size: 1.32rem; font-weight: 700; color: var(--pl-navy); margin: 1.7em 0 .5em; } .pl-prose h4 { margin: 1.4em 0 .4em; } .pl-prose a { color: var(--pl-amber-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .pl-prose a:hover { color: var(--pl-navy); } .pl-prose img { border-radius: var(--pl-radius-lg); margin: 1.8em 0; width: 100%; } .pl-prose figure { margin: 1.8em 0; } .pl-prose figure img { margin: 0; } .pl-prose figcaption { font-size: .86rem; color: var(--pl-muted); margin-top: 8px; } .pl-prose ul, .pl-prose ol { margin: 0 0 1.4em; padding-left: 1.5em; } .pl-prose li { margin-bottom: .55em; line-height: 1.65; } .pl-prose li::marker { color: var(--pl-amber-deep); font-size: 1.15em; } .pl-prose table { width: 100%; border-collapse: collapse; margin: 1.8em 0; font-size: .95rem; border: 1px solid var(--pl-line); border-radius: 8px; overflow: hidden; } .pl-prose thead th { background: var(--pl-navy); color: #fff; font-family: var(--pl-serif); font-weight: 600; text-align: left; padding: 12px 16px; } .pl-prose td, .pl-prose th { padding: 11px 16px; border-bottom: 1px solid var(--pl-line); vertical-align: top; text-align: left; } .pl-prose tbody tr:nth-child(even) { background: var(--pl-cream); } .pl-prose tbody tr:last-child td { border-bottom: 0; } /* Stat rows the migration left in the body (see page.php) render as a figures band. */ .pl-prose .pl-figures { margin: 0 0 2em; border-top: 1px solid var(--pl-line); border-bottom: 1px solid var(--pl-line); padding: 22px 0; gap: 16px; } .pl-prose .pl-figures-3 { grid-template-columns: repeat(3, 1fr); } .pl-prose .pl-figures-2 { grid-template-columns: repeat(2, 1fr); } .pl-prose .pl-figure { padding: 6px 12px; } .pl-prose .pl-figure strong { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 8px; } .pl-prose .pl-figure span { text-transform: none; letter-spacing: 0; font-size: .9rem; } @media (max-width: 640px) { .pl-prose .pl-figures-3 { grid-template-columns: repeat(2, 1fr); } } /* Before / after pairs lifted out of the migrated bodies. */ .pl-prose .pl-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 1.8em 0; } .pl-prose .pl-ba figure { margin: 0; } .pl-prose .pl-ba img { margin: 0; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; } .pl-prose .pl-ba figcaption { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pl-amber-ink); margin-top: 10px; } .pl-prose .pl-eyebrow { margin: 2em 0 -1.2em; } .pl-prose .pl-eyebrow + h2, .pl-prose .pl-eyebrow + h3 { margin-top: 1.6em; } @media (max-width: 560px) { .pl-prose .pl-ba { grid-template-columns: 1fr; } } /* Empty widget headings the migration left behind. */ .pl-prose h3:empty, .pl-prose h2:empty { display: none; } /* Reviewed-by line (checklist #11). */ .pl-reviewed { display: inline-flex; align-items: center; gap: 12px; font-size: .88rem; color: var(--pl-muted); padding: 12px 0; margin: 0 0 24px; border-top: 1px solid var(--pl-line); border-bottom: 1px solid var(--pl-line); width: 100%; } .pl-reviewed .ico { width: 34px; height: 34px; border-radius: 50%; background: var(--pl-cream); display: flex; align-items: center; justify-content: center; color: var(--pl-orange-dark); flex: none; } .pl-reviewed a { text-decoration: none; } .pl-reviewed strong { color: var(--pl-navy); } .pl-phero .pl-reviewed { border: 0; padding: 0; margin: 0 0 26px; width: auto; } /* Inline sources (checklist #10). */ .pl-sources { font-size: .9rem; color: var(--pl-muted); border-top: 1px solid var(--pl-line); padding-top: 18px; margin-top: 40px; } .pl-sources h2 { font-family: var(--pl-sans); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--pl-orange-dark); margin: 0 0 10px; } .pl-sources ol { margin: 0; padding-left: 1.2em; } .pl-sources li { margin-bottom: 6px; } .pl-pagination { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 44px; } .pl-pagination .page-numbers { padding: 12px 18px; border: 1px solid var(--pl-line); border-radius: var(--pl-radius); color: var(--pl-navy); font-weight: 500; } .pl-pagination .current { background: var(--pl-navy); color: #fff; border-color: var(--pl-navy); } /* Post signature card (Fairfield "From the chair"). */ .pl-signature { background: var(--pl-cream); border-top: 1px solid var(--pl-line); border-bottom: 1px solid var(--pl-line); padding: 48px 0; } .pl-signature-inner { max-width: 760px; margin: 0 auto; display: flex; gap: 24px; align-items: flex-start; } .pl-signature-avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--pl-navy); } .pl-signature-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; } .pl-signature-body p { margin: 0 0 12px; line-height: 1.65; } .pl-signature-name { font-family: var(--pl-display); font-weight: 700; color: var(--pl-navy); margin: 14px 0 20px !important; } @media (max-width: 640px) { .pl-signature-inner { flex-direction: column; align-items: center; text-align: center; } } /* ------------------------------------------------------------------ aside */ .pl-aside { position: sticky; top: 140px; background: #fff; border: 1px solid var(--pl-line); border-radius: 10px; padding: 30px; box-shadow: var(--pl-shadow-md); } @media (max-width: 1000px) { .pl-aside { position: static; } } .pl-aside h2, .pl-aside h3 { font-size: 1.5rem; margin-bottom: 6px; } .pl-aside .note { font-size: .9rem; color: var(--pl-muted); margin-bottom: 20px; } .pl-aside-call { text-align: center; border-top: 1px solid var(--pl-line); margin-top: 20px; padding-top: 18px; } .pl-aside-call .note { margin-bottom: 4px; } .pl-aside-call a { font-family: var(--pl-serif); font-size: 1.5rem; font-weight: 600; color: var(--pl-navy); } /* ------------------------------------------------------------------ forms */ .pl-field { margin-bottom: 16px; } .pl-field label { display: block; font-size: .82rem; font-weight: 600; color: var(--pl-navy); margin-bottom: 6px; letter-spacing: .02em; } .pl-field .req { color: #B3261E; } .pl-field input, .pl-field select, .pl-field textarea { width: 100%; font-family: inherit; font-size: 1rem; color: var(--pl-ink); padding: 13px 15px; border: 1.5px solid var(--pl-line); border-radius: var(--pl-radius); background: #fff; min-height: 50px; /* 16px+ text stops iOS zooming the page on focus */ transition: border-color .2s; } .pl-field textarea { min-height: 116px; resize: vertical; } .pl-field input:focus, .pl-field select:focus, .pl-field textarea:focus { border-color: var(--pl-navy); outline: none; box-shadow: 0 0 0 3px rgba(31, 60, 116, .12); } .pl-form button { width: 100%; } .pl-form-note { font-size: .82rem; color: var(--pl-muted); margin-top: 12px; line-height: 1.5; } .pl-notice { padding: 16px 18px; border-radius: 6px; margin-bottom: 20px; font-size: .95rem; } .pl-notice-ok { background: #E7F4EC; border: 1px solid #A8D5BC; color: #14532D; } .pl-notice-err { background: #FDECEA; border: 1px solid #F2B8B5; color: #7F1D1D; } .pl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ------------------------------------------------------- contact form 7 */ /* * Contact Form 7 renders each field inside its own inline , then leaves the * layout entirely to the theme. Everything below is that layout: the fields keep * the .pl-field styling above, and these rules make CF7's wrappers get out of * the way, lay the fields out, and dress the consent box and the reply messages. */ .pl-cf7 .wpcf7-form-control-wrap { display: block; } .pl-cf7 p { margin: 0; } .pl-cf7 .pl-field { margin-bottom: 18px; } .pl-hint { display: block; font-size: .78rem; color: var(--pl-muted); margin-top: 6px; line-height: 1.45; } /* * auto-fit rather than a media query: the same form sits in a full-width card on * /appointment/ and in a narrower column on /contact/, and this fits both without * either template having to say which it is. */ .pl-cf7-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; } .pl-cf7-grid .pl-field-wide { grid-column: 1 / -1; } /* The consent box. Set apart from the fields so it reads as something to agree to, not one more thing to fill in. */ .pl-consent { background: var(--pl-cream); border: 1px solid var(--pl-line); border-left: 3px solid var(--pl-amber); border-radius: var(--pl-radius); padding: 16px 18px; margin: 6px 0 22px; } .pl-consent .wpcf7-form-control-wrap { display: block; } .pl-consent .wpcf7-acceptance .wpcf7-list-item { margin: 0; } .pl-consent label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; margin: 0; font-weight: 400; } .pl-consent input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--pl-navy); cursor: pointer; } .pl-consent .wpcf7-list-item-label { font-size: .85rem; line-height: 1.6; color: var(--pl-body); } .pl-consent a { color: var(--pl-orange-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .pl-cf7-send { display: flex; flex-direction: column; align-items: flex-start; gap: 0; } .pl-cf7-send .pl-btn { width: 100%; justify-content: center; } @media (min-width: 600px) { .pl-cf7-send .pl-btn { width: auto; } } .pl-cf7-send .wpcf7-spinner { margin: 12px 0 0; } /* Belt and braces: acceptance_as_validation keeps the button live, but if that setting is ever lost, a disabled button should at least look disabled. */ .pl-cf7-send .pl-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; } /* Validation. CF7's own tip is a red ribbon by default — this makes it a quiet line under the field it belongs to. */ .pl-cf7 .wpcf7-not-valid-tip { display: block; font-size: .8rem; color: #B3261E; margin-top: 6px; } .pl-cf7 input.wpcf7-not-valid, .pl-cf7 select.wpcf7-not-valid, .pl-cf7 textarea.wpcf7-not-valid { border-color: #E5A8A4; } .pl-cf7 input.wpcf7-not-valid:focus, .pl-cf7 textarea.wpcf7-not-valid:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .12); } /* The reply after submitting, styled to match .pl-notice. */ .wpcf7 form .wpcf7-response-output { margin: 20px 0 0; padding: 16px 18px; border-radius: var(--pl-radius); font-size: .95rem; line-height: 1.6; border-width: 1px; border-style: solid; } .wpcf7 form.sent .wpcf7-response-output { background: #E7F4EC; border-color: #A8D5BC; color: #14532D; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { background: #FFF6E6; border-color: var(--pl-amber-soft); color: var(--pl-amber-ink); } .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { background: #FDECEA; border-color: #F2B8B5; color: #7F1D1D; } /* A form that is the page — /refer/, /new-patient-registration/. Held to the prose measure so it does not run the full width of the body column. */ .pl-form-standalone { max-width: 720px; margin: 8px auto 0; } /* Site-wide contact band above the footer: form left, office card right. */ .pl-contact { background: var(--pl-cream); border-top: 1px solid var(--pl-line); padding: 96px 0; } .pl-contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; } .pl-contact-form { background: #fff; border: 1px solid var(--pl-line); border-radius: 10px; padding: 36px; box-shadow: var(--pl-shadow-md); } .pl-contact-form h2 { font-size: 1.6rem; margin-bottom: 6px; } .pl-contact-form .note { color: var(--pl-muted); font-size: .92rem; margin-bottom: 22px; } .pl-contact-form .pl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .pl-contact-form .pl-field:nth-child(n+8), .pl-contact-form .pl-form button, .pl-contact-form .pl-form-note { grid-column: 1 / -1; } .pl-contact-form .pl-form button { width: auto; justify-self: start; } .pl-office { background: #fff; border: 1px solid var(--pl-line); border-radius: 10px; overflow: hidden; box-shadow: var(--pl-shadow-sm); } .pl-office img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* The map sits in the same frame the photograph used to, so the card keeps its proportions whichever one is showing. */ /* * Taller than 16/9 on purpose. Google only draws the business panel — the name, * the star rating and the review count — once the frame has the room for it, and * at 16/9 the card was about 290px tall, so the embed rendered as a bare map and * the reviews never appeared. Both dimensions are declared, so the extra height * costs nothing in layout shift. */ .pl-office-map { width: 100%; aspect-ratio: 4 / 3; min-height: 420px; border: 0; display: block; } .pl-office-body { padding: 28px 30px 30px; } .pl-office-body h3 { font-size: 1.4rem; margin-bottom: 14px; } .pl-office-row { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--pl-body); margin-bottom: 10px; } .pl-office-row .ico { color: var(--pl-orange-dark); flex: none; margin-top: 3px; } .pl-office-row a { font-weight: 600; } .pl-office-dir { display: inline-block; margin-top: 16px; font-weight: 600; color: var(--pl-orange-dark); } @media (max-width: 968px) { .pl-contact { padding: 64px 0; } .pl-contact-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .pl-contact-form { padding: 26px 22px; } .pl-contact-form .pl-form { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ footer */ .pl-footer { background: var(--pl-navy-deep); color: rgba(255, 255, 255, .74); padding: 76px 0 30px; font-size: .92rem; } .pl-footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 44px; } .pl-footer h2 { font-family: var(--pl-sans); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pl-orange-soft); margin-bottom: 18px; } .pl-footer a { color: rgba(255, 255, 255, .74); transition: color .2s; } .pl-footer a:hover { color: var(--pl-orange-soft); } .pl-footer ul { list-style: none; margin: 0; padding: 0; } .pl-footer li { padding: 6px 0; margin: 0; } /* The logo artwork has a white ground, so inverting it wiped the mark out. On navy it sits on its own white plate instead. */ .pl-footer-brand img { width: 176px; height: auto; object-fit: contain; margin-bottom: 18px; background: #fff; padding: 16px 18px; border-radius: var(--pl-radius); } .pl-footer-tagline { line-height: 1.7; max-width: 340px; margin-bottom: 20px; } .pl-footer-address { font-style: normal; line-height: 1.65; margin-bottom: 14px; } .pl-footer-address strong { color: #fff; display: block; font-weight: 600; } .pl-footer-hours { display: block; margin-top: 6px; font-size: .84rem; color: rgba(255, 255, 255, .56); } .pl-footer-phone { display: inline-block; font-size: 1.05rem; font-weight: 600; color: #fff !important; margin-bottom: 10px; } .pl-footer-phone:hover { color: var(--pl-orange-soft) !important; } .pl-footer-social { display: flex; gap: 12px; margin-top: 20px; } .pl-footer-social a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; transition: background .2s, transform .2s; } .pl-footer-social a:hover { background: var(--pl-orange); color: var(--pl-orange-ink); transform: translateY(-2px); } .pl-footer-social svg { width: 17px; height: 17px; fill: currentColor; } .pl-footer-serving { padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .86rem; line-height: 1.6; color: rgba(255, 255, 255, .62); } .pl-footer-serving strong { color: rgba(255, 255, 255, .85); } .pl-footer-bottom { padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 22px; font-size: .83rem; color: rgba(255, 255, 255, .55); } .pl-footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; } .pl-footer-legal a { color: rgba(255, 255, 255, .62); } @media (max-width: 968px) { .pl-footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; } } @media (max-width: 600px) { .pl-footer-grid { grid-template-columns: 1fr; gap: 30px; } .pl-footer-bottom { flex-direction: column; align-items: flex-start; } } /* --------------------------------------------------------- sticky (mobile) */ .pl-sticky { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: #fff; border-top: 1px solid var(--pl-line); padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); grid-template-columns: 1fr 1fr; gap: 10px; box-shadow: 0 -6px 24px rgba(18, 19, 22, .1); } @media (max-width: 860px) { .pl-sticky { display: grid; } } .pl-sticky .pl-btn { font-size: .92rem; padding: 14px 10px; box-shadow: none; } /* ---------------------------------------------------------- procedures hub */ .pl-proc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } /* The hub card: a white box with a thin edge, a flat offset shadow and a round amber icon chip. No photo — the page carries three real photos of its own. */ .pl-proc { position: relative; background: #fff; border: 1.5px solid var(--pl-line); border-radius: var(--pl-radius-lg); display: flex; flex-direction: column; padding: 28px 26px 26px; box-shadow: var(--pl-shadow-sm); transition: transform .3s var(--pl-ease), box-shadow .3s var(--pl-ease), border-color .3s var(--pl-ease); } .pl-proc:hover { transform: translateY(-4px); border-color: var(--pl-amber-deep); box-shadow: 0 10px 0 -1px var(--pl-amber-soft); } .pl-ico { width: 52px; height: 52px; border-radius: 50%; background: var(--pl-amber-soft); color: var(--pl-amber-ink); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; flex: none; } .pl-ico svg { width: 25px; height: 25px; } .pl-proc-body { display: flex; flex-direction: column; flex: 1; } .pl-proc-body h2 { font-size: 1.32rem; margin-bottom: 8px; } .pl-proc-body h2 a { color: var(--pl-navy); } .pl-proc-body h2 a:hover { color: var(--pl-amber-ink); } .pl-proc-body > p { font-size: .94rem; color: var(--pl-body); line-height: 1.62; margin-bottom: 16px; } .pl-proc-links { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--pl-line); display: grid; gap: 9px; } .pl-proc-links li { margin: 0; } .pl-proc-links a { display: inline-flex; align-items: baseline; gap: 9px; color: var(--pl-body); font-size: .92rem; font-weight: 500; } .pl-proc-links a::before { content: '\203A'; color: var(--pl-amber-ink); font-weight: 700; } .pl-proc-links a:hover { color: var(--pl-amber-ink); } .pl-proc-more { margin: 16px 0 0; font-family: var(--pl-display); font-size: .9rem; font-weight: 700; color: var(--pl-amber-ink); } @media (max-width: 968px) { .pl-proc-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .pl-proc-grid { grid-template-columns: 1fr; } } /* Sitemap page reuses the proc link list as plain columns. */ .pl-linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .pl-linklist li { margin: 0; } .pl-linklist a { display: inline-flex; gap: 9px; align-items: baseline; color: var(--pl-ink); font-size: .95rem; } .pl-linklist a::before { content: '\203A'; color: var(--pl-amber-ink); } .pl-linklist a:hover { color: var(--pl-orange-dark); } /* --------------------------------------------------------------- utilities */ .pl-stat-row { display: flex; gap: 30px; flex-wrap: wrap; font-size: .95rem; color: var(--pl-muted); } .pl-stat-row strong { color: var(--pl-navy); } .pl-center { text-align: center; } .pl-mt { margin-top: 44px; } /* Respect the OS setting — vestibular disorders are common in an older patient base. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } @media print { .pl-topbar, .pl-nav, .pl-burger, .pl-sticky, .pl-cta-band, .pl-contact, .pl-footer { display: none !important; } body { font-size: 12pt; padding-bottom: 0; } a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 10pt; } } /* ---------------------------------------------------------------- contact */ .pl-hours { width: 100%; border-collapse: collapse; font-size: .95rem; } .pl-hours th, .pl-hours td { padding: 9px 0; border-bottom: 1px solid var(--pl-line); text-align: left; } .pl-hours th { font-weight: 600; color: var(--pl-navy); width: 44%; } .pl-hours tr:last-child th, .pl-hours tr:last-child td { border-bottom: 0; } .pl-meta-item a.value:hover { color: var(--pl-orange-dark); } /* ----------------------------------------------- emergency cards in prose */ /* * The "other dental emergencies" grid inside a page body. Block-level markup only * (see scripts/plumas-hub-rebuild.php) so wpautop leaves it alone, which means the * whole card cannot be one — the heading and the "what to do" line carry the link * and a pseudo-element stretches the hit area over the card. */ .pl-prose .pl-grid { margin: 1.8em 0 2.2em; } .pl-card-em { position: relative; } .pl-card-em .pl-card-body { padding: 24px 24px 22px; } .pl-card-em p.pl-card-date { margin: 0 0 8px; } .pl-card-em h3 { font-size: 1.2rem; margin: 0 0 8px; } .pl-card-em h3 a { color: var(--pl-navy); text-decoration: none; } .pl-card-em h3 a::after { content: ''; position: absolute; inset: 0; } .pl-card-em p { font-size: .94rem; color: var(--pl-muted); margin: 0 0 16px; } .pl-card-em p.pl-more { margin: auto 0 0; font-size: .92rem; } .pl-card-em p.pl-more a { color: var(--pl-orange-dark); text-decoration: none; font-weight: 600; } .pl-card-em:hover { transform: translateY(-4px); box-shadow: var(--pl-shadow-md); } .pl-card-em:hover h3 a { color: var(--pl-orange-dark); } /* The chip row is a

in prose, so reset the paragraph spacing it inherits. */ .pl-prose p.pl-chip-row { margin: 0 0 1.6em; } .pl-prose .pl-callout { background: var(--pl-cream); border-left: 4px solid var(--pl-amber); border-radius: var(--pl-radius); padding: 18px 22px; margin: 1.8em 0; font-size: .96rem; } .pl-prose .pl-callout strong { color: var(--pl-navy); } /* The prose underline is for body links only — not for chips, cards or link lists. */ .pl-prose .pl-chip, .pl-prose .pl-proc-links a, .pl-prose .pl-linklist a, .pl-prose .pl-card a, .pl-prose .pl-btn { text-decoration: none; } /* ------------------------------------------------- amber band with a photo */ /* * The mid-page chapter break from design board G: an amber full-bleed band with * the copy on one side and the second of the page's three photos on the other. * Straight edges, no watermark, no motif. */ .pl-imgband { background: var(--pl-amber); padding: 76px 0; } .pl-imgband .pl-wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } .pl-imgband-rev .pl-wrap { grid-template-columns: .95fr 1.05fr; } .pl-imgband-rev .pl-imgband-media { order: -1; } .pl-imgband h2 { color: var(--pl-navy); margin-bottom: 18px; } .pl-imgband h2::after { content: ''; display: block; width: 62px; height: 4px; background: var(--pl-navy); margin: 18px 0 0; border-radius: 2px; } .pl-imgband p { color: #43506B; font-size: 1.05rem; line-height: 1.7; } .pl-imgband .pl-eyebrow { color: var(--pl-navy); } .pl-imgband-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; border-radius: var(--pl-radius-lg); display: block; } .pl-imgband-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; } .pl-imgband-points li { display: flex; gap: 12px; align-items: flex-start; margin: 0; color: var(--pl-navy); font-weight: 600; font-size: .98rem; } .pl-imgband-points li::before { content: ''; flex: none; width: 22px; height: 22px; border-radius: 50%; background-color: #fff; margin-top: 1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3C74' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: 13px; background-repeat: no-repeat; background-position: center; } @media (max-width: 860px) { .pl-imgband { padding: 56px 0; } .pl-imgband .pl-wrap, .pl-imgband-rev .pl-wrap { grid-template-columns: 1fr; gap: 34px; } .pl-imgband-rev .pl-imgband-media { order: 0; } } /* The numbered "what to expect" chips, amber. */ .pl-steps li::before { background: var(--pl-amber-soft) !important; color: var(--pl-amber-ink) !important; font-family: var(--pl-display); font-weight: 800; } /* The sticky call bar must not bounce on tap. */ .pl-sticky .pl-btn-primary:hover { transform: none; } /* ------------------------------------------------- the body ground + card */ /* * Between the amber hero and the amber band, a service page was one unbroken run of * pure white two thousand pixels tall carrying nothing but grey prose. The owner * called it dull, and it was the same "all white, no contrast" note that started * this redesign. The article now sits on a white card on the light ground — the * card language every other block on the site already uses — so the reading column * has an edge, the page has a floor, and the two are not the same colour. */ .pl-bodywrap { background: #fff; } .pl-bodywrap .pl-body-grid, .pl-bodywrap .pl-body { padding: 56px 0; } .pl-bodywrap .pl-prose { background: #fff; border: 1.5px solid var(--pl-line); border-radius: var(--pl-radius-lg); box-shadow: var(--pl-shadow-sm); padding: 44px 48px; max-width: none; } /* The sidebar form is already a card; let it sit level with the top of this one. */ .pl-bodywrap .pl-aside { top: 132px; } @media (max-width: 860px) { .pl-bodywrap .pl-prose { padding: 30px 24px; } .pl-bodywrap .pl-body-grid, .pl-bodywrap .pl-body { padding: 40px 0; } } /* A blog post sets max-width:none inline, so the card keeps its own measure. */ /* * Full width page, content capped at 1140px — the reference the owner keeps * sending. The article is no longer a card on a tint: the contrast comes from the * amber bands and from the blocks INSIDE the article, which is how that site does * it. Text blocks stay at a readable measure; grids use the whole 1140. */ .pl-bodywrap .pl-body-solo { max-width: 1140px; } .pl-bodywrap .pl-prose { background: none; border: 0; box-shadow: none; padding: 0; max-width: none; } /* * Section intros are centred under their centred heading, the way the reference * site sets them. Lists, steps and cards stay left aligned — centring a list of * bullet points is unreadable and the owner was pointing at the paragraph. */ .pl-bodywrap .pl-prose > p { max-width: 820px; margin-left: auto; margin-right: auto; text-align: center; } .pl-bodywrap .pl-prose > ul, .pl-bodywrap .pl-prose > ol, .pl-bodywrap .pl-prose > blockquote { max-width: 820px; margin-left: auto; margin-right: auto; } .pl-bodywrap .pl-prose > ul, .pl-bodywrap .pl-prose > ol { text-align: left; } /* A paragraph inside a card or an accordion is never centred. */ .pl-bodywrap .pl-prose .pl-proc p, .pl-bodywrap .pl-prose .pl-faq p, .pl-bodywrap .pl-prose .pl-steps p { text-align: left; max-width: none; margin-left: 0; margin-right: 0; } .pl-bodywrap .pl-prose > .pl-head-note { color: var(--pl-body); } /* Centred section heads inside the article, matching .pl-head everywhere else. */ .pl-bodywrap .pl-prose h2 { text-align: center; margin-top: 2.1em; } .pl-bodywrap .pl-prose h2::after { margin-left: auto; margin-right: auto; } .pl-bodywrap .pl-prose > h2:first-child { margin-top: 0; } .pl-bodywrap .pl-prose .pl-faq-list { margin: 1.8em 0 2.2em; } @media (max-width: 860px) { .pl-bodywrap .pl-prose > p, .pl-bodywrap .pl-prose > ul, .pl-bodywrap .pl-prose > ol { max-width: none; } } /* ------------------------------------------------ paying for your visit */ /* * The reference the owner sent: a short left column with the carriers shown as * LOGOS rather than a row of text pills, and a single offer card on the right. * Until an official logo file is dropped into assets/img/insurers/ the tile * falls back to the carrier name set in the site's own type, so the grid is * never empty and never shows a broken image. */ .pl-pay { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; } .pl-pay-copy h2 { margin-bottom: 18px; } .pl-pay-copy > p { color: var(--pl-body); font-size: 1.08rem; line-height: 1.72; max-width: 48ch; margin-bottom: 30px; } .pl-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 30px; } .pl-logo-tile { display: flex; align-items: center; justify-content: center; min-height: 72px; padding: 14px 16px; background: #fff; border: 1.5px solid var(--pl-line); border-radius: var(--pl-radius); } .pl-logo-tile img { max-height: 40px; width: auto; object-fit: contain; } .pl-logo-tile-text { font-family: var(--pl-display); font-size: .95rem; font-weight: 700; color: var(--pl-navy); text-align: center; line-height: 1.25; letter-spacing: -.01em; } .pl-offer { background: var(--pl-amber); border-radius: var(--pl-radius-lg); padding: 40px 38px; } .pl-offer h3 { color: var(--pl-navy); font-size: 1.55rem; margin-bottom: 14px; } .pl-offer p { color: #43506B; font-size: 1rem; line-height: 1.68; margin-bottom: 26px; } @media (max-width: 968px) { .pl-pay { grid-template-columns: 1fr; gap: 40px; } .pl-pay-copy > p { max-width: none; } } @media (max-width: 520px) { .pl-logos { grid-template-columns: repeat(2, 1fr); } .pl-offer { padding: 30px 24px; } } /* --------------------------------------------------------- review widget */ /* * Trustindex renders its own markup, so this only gives it room and stops it * inheriting anything that would fight its own styling. Reserve a minimum height * so the page does not jump when the widget paints after the deferred loader * arrives — a late-loading third-party block is the usual cause of a bad CLS * score, and this site is at 90+ on mobile. */ .pl-reviews { min-height: 240px; } .pl-reviews-compact { min-height: 190px; } .pl-reviews img { display: inline-block; } .pl-reviews .ti-widget { margin: 0 !important; } @media (max-width: 640px) { .pl-reviews, .pl-reviews-compact { min-height: 300px; } } /* ------------------------------------------------------------ video cards */ /* * The practice's clips are vertical phone recordings, so the card is 9:16 and the * row is three across. Nothing downloads until someone presses play — the poster * is a 40 KB WebP and the