html {
scroll-behavior: smooth;
}
.aic {
align-items: center;
}
.sw-pg--center {
display: flex;
align-items: center;
justify-content: center;
}
.sw-pg--center span {
margin-top: 3rem !important;
}
@font-face {
font-family: 'icomoon';
src: url(//yaletown.dental/wp-content/themes/marketing-planet-theme/assets/fonts/icomoon.eot?93k1dg);
src: url(//yaletown.dental/wp-content/themes/marketing-planet-theme/assets/fonts/icomoon.eot?93k1dg#iefix) format('embedded-opentype'),
url(//yaletown.dental/wp-content/themes/marketing-planet-theme/assets/fonts/icomoon.woff?93k1dg) format('woff'),
url(//yaletown.dental/wp-content/themes/marketing-planet-theme/assets/fonts/icomoon.ttf?93k1dg) format('truetype'),
url(//yaletown.dental/wp-content/themes/marketing-planet-theme/assets/fonts/icomoon.svg?93k1dg#icomoon) format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
[class^='icon-'],
[class*=' icon-'] { font-family: 'icomoon' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-arrow-angle:before {
content: '\e914';
}
.icon-search:before {
content: '\e911';
}
.icon-arrow-right:before {
content: '\e912';
}
.icon-arrow-left:before {
content: '\e913';
}
.icon-vector:before {
content: '\e90f';
}
.icon-arrow:before {
content: '\e910';
}
.icon-play:before {
content: '\e900';
}
.icon-email:before {
content: '\e901';
}
.icon-phone2:before {
content: '\e902';
}
.icon-marker:before {
content: '\e903';
}
.icon-twitter:before {
content: '\e904';
}
.icon-linkedin:before {
content: '\e905';
}
.icon-facebook:before {
content: '\e906';
}
.icon-instagram:before {
content: '\e907';
}
.icon-bars:before {
content: '\e908';
}
.icon-close:before {
content: '\e909';
}
.icon-phone:before {
content: '\e90a';
}
.icon-chevron-left:before {
content: '\e90b';
}
.icon-chevron-right:before {
content: '\e90c';
}
.icon-chevron-down:before {
content: '\e90d';
}
.icon-chevron-up:before {
content: '\e90e';
}
@font-face {
src: url(//yaletown.dental/wp-content/themes/marketing-planet-theme/assets/fonts/PlayfairDisplay-SemiBold.ttf) format('truetype');
font-family: 'Playfair Display', serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
} @font-face {
font-family: 'Montserrat', sans-serif;
font-optical-sizing: auto;
src: url(//yaletown.dental/wp-content/themes/marketing-planet-theme/assets/fonts/Montserrat-VariableFont_wght.ttf) format('truetype');
font-weight: 100 900;
font-style: normal;
}
:root {
--gold-50: #f8f6ee;
--gold-100: #ede9d4;
--gold-200: #ddd2ab;
--gold-300: #c9b57b;
--gold-400: #b5964d;
--gold-500: #aa8848;
--gold-700: #755433;
--gray-100: #f5f5f5;
--gray-400: #a4a7ae;
--gray-500: #717680;
--gray-600: #535862;
--gray-700: #414651;
--gray-800: #252b37;
--gray-900: #181d27;
--error-400: #f97066;
--body-text: #3c4959;
--main-font: 'Montserrat', sans-serif;
--bold-font: 'Playfair Display', serif;
--swiper-pagination-bullet-width: 0.75rem;
--swiper-pagination-bullet-height: 0.75rem;
--swiper-pagination-bullet-horizontal-gap: 0.5rem;
--rounded-1: 0.625rem;
--rounded-2: 1.25rem;
--rounded-3: 1.875rem;
--rounded-4: 2.5rem;
--rounded-5: 3.125rem;
}
.rounded-0 {
border-radius: 0 !important;
}
.rounded-1 {
border-radius: var(--rounded-1) !important;
}
.rounded-2 {
border-radius: var(--rounded-2) !important;
}
.rounded-3 {
border-radius: var(--rounded-3) !important;
}
.rounded-4 {
border-radius: var(--rounded-4) !important;
}
.rounded-5 {
border-radius: var(--rounded-5) !important;
}
.gold-title {
color: var(--gold-500);
}
main#modular-page > section:first-child {
margin-top: unset !important;
}
body,
html {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
color: #3c4959;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--bold-font);
font-weight: 600;
}
.editor-content ul {
list-style: disc;
list-style-position: inside;
padding-inline: 0.75rem;
line-height: 2;
}
.editor-content ol {
list-style-type: decimal;
list-style-position: inside;
padding-inline: 0.75rem;
line-height: 2;
}
.editor-content {
color: var(--gray-700);
}
.editor-content hr {
margin-bottom: 1.5rem;
}
.editor-content a {
color: var(--gold-500);
transition: 0.5s;
text-decoration: transparent underline 0.125rem;
text-underline-offset: 0.125rem;
}
.editor-content a:hover {
text-decoration-color: var(--gold-500);
}
.editor-content i {
font-style: italic;
}
.editor-content strong,
.editor-content b {
font-weight: 700;
}
.editor-content {
font-size: 1rem;
line-height: 1.5;
color: var(--gray-700);
}
.editor-content h1 {
font-size: 4rem;
}
.editor-content h2 {
font-size: 3.625rem;
}
.editor-content h3 {
font-size: 2.5rem;
}
.editor-content h4 {
font-size: 1.875rem;
}
.editor-content h5 {
font-size: 1.5rem;
}
.editor-content h6 {
font-size: 1.25rem;
}
.editor-content ol:not(:last-child),
.editor-content ul:not(:last-child),
.editor-content p:not(:last-child),
.editor-content :is(h1, h2, h3, h4, h5, h6):not(:last-child) {
margin-bottom: 1.5rem;
}
.editor-content blockquote {
background-color: #f9f9f9;
border-left: 0.375rem solid var(--gold-500);
padding: 1rem 1.25rem;
margin: 1.5rem 0;
font-style: italic;
color: #555;
font-size: 1.125rem;
line-height: 1.5;
border-radius: 0.25rem;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}
.editor-content blockquote p {
margin: 0;
padding: 0;
}
.editor-content blockquote cite {
display: block;
margin-top: 0.5rem;
font-size: 0.875rem;
text-align: right;
color: var(--gold-500);
font-weight: bold;
}
.heading-section {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
gap: 1.25rem;
margin-bottom: 2.75rem;
}
.heading-section__title {
text-align: center;
text-wrap-style: balance;
font-size: 2.5rem;
color: var(--gray-800);
line-height: 1.5;
}
.heading-section__desc {
text-align: center;
text-wrap-style: balance;
font-size: 1rem;
color: var(--gray-700);
line-height: 1.5;
}
.space--lg {
margin-block: 6rem;
}
.padding--lg {
padding-block: 6rem;
}
.btns__wrapper {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
}
.button {
display: flex;
width: fit-content;
background-color: var(--gold-500);
border: 1px solid var(--gold-500);
color: #fff;
font-size: 1.125rem;
font-weight: 600;
line-height: 1;
padding: 1rem 1.5rem;
border-radius: 2rem;
transition: 0.5s;
}
.button:hover {
background-color: #fff;
color: var(--gold-500);
}
.button.button2:hover {
background-color: var(--gray-800);
color: #fff;
}
.button.button2 {
background-color: transparent;
color: var(--gray-800);
border-color: var(--gray-800);
}
.row-reverse {
flex-direction: row-reverse;
}
.section-book {
padding-block: 5.5rem;
background-size: cover;
background-repeat: no-repeat;
background-image: url(//yaletown.dental/wp-content/themes/marketing-planet-theme/assets/img/bg.webp);
margin-bottom: 1rem;
}
.section-book__title {
font-size: 3rem;
margin-bottom: 3rem;
line-height: 1.25;
text-align: center;
text-wrap-style: pretty;
color: var(--gray-800);
}
.appointment-form {
max-width: 100%;
}
.appointment_image img {
border-radius: 1.25rem;
display: block;
margin-inline: auto;
}
.wpcf7 input:not([type='submit']),
.wpcf7 select,
.wpcf7 textarea {
background-color: #fff;
border-radius: 0.625rem;
padding: 0.875rem 1.25rem;
line-height: 1.5;
width: 100%;
border: 0;
outline: none;
}
.wpcf7 textarea {
height: 7.5rem !important;
}
.wpcf7 input[type='submit']:hover {
background-color: #fff;
color: var(--gold-500);
}
.wpcf7 input[type='submit'] {
background-color: var(--gold-500);
color: #fff;
height: 3.25rem;
display: flex;
align-items: center;
width: 100%;
border-radius: 3rem;
text-align: center;
font-size: 1.125rem;
font-weight: 600;
border: 1px solid var(--gold-500);
transition: 0.5s;
cursor: pointer;
}
.wpcf7 input[type='date'],
.wpcf7 select {
color: var(--gray-400) !important;
}
.wpcf7 input:not([type='submit'])::placeholder,
.wpcf7 select::placeholder,
.wpcf7 textarea::placeholder {
color: var(--gray-400) !important;
}
.wpcf7-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem 0.75rem;
}
.wpcf7-form .form-group {
position: relative;
}
.wpcf7-form .form-group br {
display: none;
}
.wpcf7-form .form-group label {
color: var(--gray-800);
display: block;
padding-left: 0.875rem;
line-height: 1;
font-size: 1.0625rem;
font-weight: 500;
text-transform: capitalize;
margin-bottom: 0.625rem;
}
.wpcf7-form .full-name-group,
.wpcf7-form .reason-group,
.wpcf7-form .message-group,
.wpcf7-form .submit-group {
grid-column: 1 / -1;
}
span.wpcf7-not-valid-tip {
font-size: 0.75rem !important;
margin-top: 0.25rem;
}
.wpcf7-response-output {
width: 100%;
margin: 0 !important;
grid-column: 1 / -1;
text-align: center;
padding: 1rem !important;
border-radius: 0.625rem !important;
}
span.wpcf7-spinner {
position: absolute;
top: calc(100% + 0.25rem);
left: 50%;
transform: translateX(-50%);
margin: 0 !important;
}
.no-results {
text-align: center;
font-size: 1.125rem;
font-weight: bold;
color: #333;
background-color: #f7f7f7;
padding: 1.25rem;
margin: 1.25rem 0;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} .article-card {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.article-thumbnail {
border-radius: 1.25rem;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.article-thumbnail img {
width: 100%; object-fit: cover;
border-radius: 1.25rem;
}
.article-card .read-more:hover {
background-color: #fff;
color: var(--gold-500);
}
.article-card .article-title {
font-size: 1.375rem;
line-height: 1.25;
font-family: var(--main-font);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
min-height: 3.5rem;
}
.article-card .article-title a {
color: var(--gray-800);
display: block;
transition: 0.5s;
}
.article-card .article-excerpt {
font-size: 1rem;
line-height: 1.5;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.article-card .read-more {
background-color: var(--gold-500);
border: 1px solid var(--gold-500);
color: #fff;
height: 3rem;
display: flex;
width: 8rem;
border-radius: 3rem;
transition: 0.5s;
font-weight: 600;
font-size: 1rem;
align-items: center;
justify-content: center;
}
.article-card:hover .article-title a {
color: var(--gold-500);
}
.editor-content img {
border-radius: 1.5rem;
}
.editor-content img.alignright {
margin-left: 1rem;
float: right;
}
.editor-content img.alignleft {
float: left;
margin-right: 1rem;
}
.editor-content img.aligncenter {
display: block;
margin: 1.5rem auto;
} @media (max-width: 991.98px) {
.heading-section {
margin-bottom: 1.75rem;
}
.heading-section__title {
font-size: 1.75rem;
}
.space--lg {
margin-block: 4rem;
}
.button {
font-size: 1rem !important;
padding: 0.875rem 1.25rem !important;
}
.section-book {
padding-block: 3.5rem;
}
.section-book__title {
font-size: 2rem;
margin-bottom: 1.5rem;
}
.row_book {
flex-direction: column-reverse;
row-gap: 2rem;
}
.wpcf7-form .form-group label {
font-size: 1rem;
}
.section-book {
margin-bottom: 1rem;
}
.editor-content h1 {
font-size: 2rem;
}
.editor-content h2 {
font-size: 1.75rem;
}
.editor-content h3 {
font-size: 1.5rem;
}
.editor-content h4 {
font-size: 1.375rem;
}
.editor-content h5 {
font-size: 1.25rem;
}
.editor-content h6 {
font-size: 1rem;
}
.article-card .article-title {
font-size: 1.125rem;
min-height: 2.75rem;
}
}
@media (max-width: 757.98px) {
.editor-content img.alignright,
.editor-content img.alignleft,
.editor-content img.aligncenter {
float: unset;
margin-inline: auto;
display: block;
}
.sw-pg--center span {
margin-top: 2rem !important;
}
}
@media (max-width: 575.98px) {
.wpcf7-form {
grid-template-columns: 1fr;
}
} .mp-faq-wrapper {
& .mp-faq-item {
padding-block: 2rem;
padding-inline: 2rem; border-radius: 1.25rem;
background-color: var(--gold-100);
border: none;
&:has(.active) { }
& .mp-faq-question {
--icon-size: 2rem;
position: relative;
color: var(--gray-800);
font-family: var(--bold-font);
font-size: 1.5rem;
font-style: normal;
font-weight: 600;
line-height: normal;
background-color: transparent;
border: none;
padding-inline: 0 3rem;
text-wrap: auto;
&::before,
&::after {
content: '';
transition: 700ms;
position: absolute;
top: calc(50% - calc(var(--icon-size) / 2));
left: auto;
right: 0;
background-size: var(--icon-size);
width: var(--icon-size);
height: var(--icon-size);
}
&::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath opacity='0.5' d='M15.9735 29.3114C23.3253 29.3114 29.285 23.3516 29.285 15.9999C29.285 8.64821 23.3253 2.68848 15.9735 2.68848C8.62184 2.68848 2.66211 8.64821 2.66211 15.9999C2.66211 23.3516 8.62184 29.3114 15.9735 29.3114Z' fill='white'/%3E%3Cpath d='M14.6828 11.3007C14.2929 10.9108 13.6608 10.9108 13.2709 11.3007C12.881 11.6906 12.881 12.3227 13.2709 12.7126L16.5584 16.0001L13.2709 19.2876C12.881 19.6775 12.881 20.3096 13.2709 20.6995C13.6608 21.0894 14.2929 21.0894 14.6828 20.6995L18.6763 16.706C19.0661 16.3162 19.0661 15.684 18.6763 15.2941L14.6828 11.3007Z' fill='%23252B37'/%3E%3C/svg%3E");
}
&::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M2.71501 15.9999C2.71501 23.3516 8.67475 29.3114 16.0265 29.3114C23.3782 29.3114 29.3379 23.3516 29.3379 15.9999C29.3379 8.64821 23.3782 2.68848 16.0265 2.68848C8.67475 2.68848 2.71501 8.64821 2.71501 15.9999Z' fill='%23AA8848'/%3E%3Cpath d='M20.7252 14.7092C21.115 14.3193 21.115 13.6872 20.7252 13.2973C20.3353 12.9074 19.7032 12.9074 19.3133 13.2973L16.0258 16.5848L12.7383 13.2973C12.3484 12.9074 11.7163 12.9074 11.3264 13.2973C10.9365 13.6872 10.9365 14.3193 11.3264 14.7092L15.3198 18.7026C15.7097 19.0925 16.3419 19.0925 16.7317 18.7026L20.7252 14.7092Z' fill='white'/%3E%3C/svg%3E");
opacity: 0;
transform: scale(0) rotate(-90deg);
}
&:hover {
color: var(--e-global-color-328f69a);
}
&.active { &::after {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
}
& .mp-faq-answer {
color: var(--gray-800);
font-size: 1rem;
font-family: var(--main-font);
font-style: normal;
font-weight: 400;
line-height: normal;
margin: 0; }
}
}  table {
width: 100%;
border-collapse: collapse;
margin: 1em 0;
font-size: 1rem;
overflow-x: auto;
}
table {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table th,
table td {
padding: 0.75em;
border: 1px solid #ddd;
}
table thead {
background-color: #f9f9f9;
font-weight: bold;
}
table tbody tr:nth-child(even) {
background-color: #f6f6f6;
}
@media (max-width: 600px) {
table,
thead,
tbody,
th,
td,
tr { }
thead {
display: none;
}
tr {
margin-bottom: 1em;
border: 1px solid #ccc;
padding: 0.5em;
}
td {
position: relative;
padding-left: 50%;
border: none;
border-bottom: 1px solid #eee;
}
td::before {
content: attr(data-label);
position: absolute;
left: 0;
top: 0;
padding: 0.75em;
font-weight: bold;
white-space: nowrap;
}
} div.CareCruButton.xmp-carecru {
opacity: revert !important;
min-height: revert !important;
position: revert !important;
min-width: revert !important;
display: flex;
width: fit-content;
background-color: var(--gold-500);
border: 1px solid var(--gold-500);
color: #fff;
font-size: 1.125rem;
font-weight: 600;
line-height: 1;
padding: 1rem 1.5rem;
border-radius: 2rem;
transition: 0.5s;
text-transform: revert;
&:hover {
background-color: #fff;
color: var(--gold-500);
}
}
.hero__btns div.CareCruButton.xmp-carecru {
padding: 1.375rem;
}
video {
border-radius: 1.5rem;
width: 100%;
height: 100%;
object-fit: cover;
}
.section-video_block.video-block-column.invisalign-service .wrap {
flex-direction: column-reverse;
& .video_block__title {
color: var(--gray-800);
font-weight: 600;
font-family: var(--bold-font);
line-height: 1.5;
font-size: 2.5rem;
}
& .video {
width: 100%;
& video {
max-height: 24rem;
}
}
}
.custom-shortcode {
background-color: var(--gray-800);
display: flex;
flex-direction: column;
padding: 2.5rem 1rem;
margin-block: 1rem 2rem;
color: #fff;
gap: 1.5rem;
border-radius: 1.5rem;
background-image: url(https://yaletown.dental/wp-content/uploads/2025/08/Frame-1000001888-scaled.webp);
background-repeat: no-repeat;
background-position: top left;
background-size: cover;
& .custom-title {
color: var(--White, #fff);
text-align: center;
font-family: 'Playfair Display';
font-size: clamp(1.75rem, 4vw, 2rem) !important;
font-weight: 600;
margin-block: 0 !important;
}
& .custom-text {
text-align: center;
margin-block: 0 !important;
}
& .xmp-carecru.CareCruButton {
margin-inline: auto;
}
} .cdcp-section {
& .cdcp-section__wrapper {
background-color: var(--gold-100);
border-radius: var(--rounded-2);
position: relative;
& .clip {
--clip-height: 3rem;
--clip-part-size: 1.5rem;
position: absolute;
background-color: #fff;
width: calc(2.5 * var(--clip-height));
height: var(--clip-height);
&::before,
&::after {
content: '';
width: var(--clip-part-size);
height: var(--clip-part-size);
position: absolute;
}
&.clip-top-left {
border-bottom-right-radius: var(--rounded-2);
top: 0;
left: 0;
&::after,
&::before {
box-shadow: -0.5rem -0.5rem #fff;
border-top-left-radius: var(--rounded-2);
}
&::after {
top: 0;
right: calc(-1 * var(--clip-part-size));
}
&::before {
left: 0;
bottom: calc(-1 * var(--clip-part-size));
}
}
&.clip-bottom-right {
border-top-left-radius: var(--rounded-2);
bottom: 0;
right: 0;
&::after,
&::before {
box-shadow: 0.5rem 0.5rem #fff;
border-bottom-right-radius: var(--rounded-2);
}
&::after {
right: 0;
top: calc(-1 * var(--clip-part-size));
}
&::before {
bottom: 0;
left: calc(-1 * var(--clip-part-size));
}
}
}
& .cdcp-section__title {
font-size: clamp(1.5rem, 4vw, 2.25rem);
line-height: 1.25;
text-align: center;
text-wrap-style: pretty;
color: var(--gray-800);
}
& .cdcp-section__text {
font-size: 1.125rem;
text-wrap-style: pretty;
text-align: center;
& span {
color: var(--error-400);
font-weight: 700;
}
}
& .button.cdcp-section__button {
margin-inline: auto;
}
}
} .height-5 {
height: 5rem;
width: auto;
object-fit: contain;
object-position: top left;
}