:root {
interpolate-size: allow-keywords;
--icon-angle: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
--bs-gutter-y: 1.5rem;
--border-color: #000;
}
.mark,
mark {
padding: unset;
color: unset;
background-color: unset;
}
.row {
gap: var(--bs-gutter-x) 0;
margin-block-start: unset;
>* {
margin-block-start: unset;
}
}
figure {
margin: unset;
}
b,
strong {
font-weight: 700;
}
body.no-scroll {
overflow: hidden;
padding-inline-end: 0px;
}
.overlay {
background-color: rgba(0, 0, 0, .5);
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
left: 0;
top: 0;
display: none;
}
summary {
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}
.grecaptcha-badge {
right: -300px !important;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
hr {
margin-block-start: var(--wp--custom--main-size);
margin-block-end: 0;
&:first-child {
margin-block-start: 0;
}
}
a {
outline: 0;
&:hover,
&:focus,
&:active {
outline: 0;
}
}
.btn-close:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
outline: 0;
box-shadow: none;
}
.form-control:focus {
border-color: none;
box-shadow: none;
}
img {
max-width: 100%;
height: auto;
}
.map {
line-height: 1;
iframe {
width: 100%;
}
}
@media (max-width: 1199px) {
.mobile-scroll::-webkit-scrollbar {
display: none;
}
.mobile-scroll.list-posts.list-post-grid {
width: 100vw;
margin-inline: -1.5rem !important;
padding-inline: 1.5rem;
display: flex;
flex-wrap: nowrap;
gap: var(--wp--custom--main-size);
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
>* {
flex: 1 0 min(90%, 400px);
}
}
} ::placeholder {
opacity: 0.8;
}
label {
display: block;
}
select,
input[type='text'],
input[type='url'],
input[type='date'],
input[type='file'],
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='password'],
input[type='number'],
input[type='file'],
input[type='search'],
textarea {
display: block;
width: 100%;
padding: .531rem .75rem;
line-height: 1.5;
background-clip: padding-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
background-color: transparent;
border: 1px solid var(--border-color);
border-radius: var(--wp--custom--border-radius);
color: var(--wp--preset--color--black);
&:focus {
outline: none;
box-shadow: none;
}
&[readonly] {
background-color: #e9ecef;
opacity: 1;
}
}
textarea {
height: 120px;
}
select {
-moz-padding-start: calc(0.75rem - 3px);
line-height: 1.5;
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1.25rem auto;
background-image: var(--icon-angle);
}
button,
input[type='button'],
input[type='submit'] {
border: none;
background: transparent;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.wp-block-read-more,
.wp-block-post-navigation-link a,
.wp-block-post-excerpt__more-link,
.navigation.post-navigation .nav-links a,
.btn,
button,
.woocommerce .button,
input[type='button'],
input[type='submit'] {
text-align: center;
padding: var(--wp--custom--button-padding-y) var(--wp--custom--button-padding-x);
border-width: var(--wp--custom--button-border-width);
border-style: var(--wp--custom--button-border-style);
border-color: transparent;
border-radius: var(--wp--custom--button-border-radius);
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
text-decoration: none;
font-size: 1rem;
}
.wp-element-button {
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.navigation.post-navigation .nav-links a,
.wp-block-read-more,
.wp-block-post-navigation-link a,
.wp-block-post-excerpt__more-link,
.btn-custom,
.xoo-wsc-ft-btn,
.xoo-wsc-body a.xoo-wsc-btn,
.woocommerce .button,
input[type='button'],
input[type='submit'] {
background-color: transparent;
color: var(--wp--preset--color--black);
border-color: var(--wp--preset--color--black);
text-transform: uppercase;
font-size: 0.875rem;
&:hover {
color: var(--wp--preset--color--white);
background-color: var(--wp--preset--color--black);
border-color: var(--wp--preset--color--black);
}
}
.btn-outline {
border-color: var(--wp--preset--color--black);
color: var(--wp--preset--color--black);
font-family: var(--wp--preset--font-family--body);
text-transform: uppercase;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 12px;
&::before {
content: '';
display: block;
width: 1.5ch;
height: 1.5ch;
background-color: var(--wp--preset--color--primary);
transition: background .5s ease-out;
}
&:hover {
background-color: var(--wp--preset--color--black);
color: var(--wp--preset--color--white);
}
}
.btn-alternative {
background-color: var(--wp--preset--color--secondary);
border-color: var(--wp--preset--color--secondary);
color: var(--wp--preset--color--white);
&:hover {
background-color: var(--wp--custom--color-secondary-hover);
border-color: var(--wp--custom--color-secondary-hover);
}
}
.btn-link {
--bs-btn-color: var(--wp--preset--color--primary);
--bs-btn-hover-color: var(--wp--custom--color-primary-hover);
--bs-btn-active-color: var(--wp--custom--color-primary-hover);
--bs-btn-disabled-color: #6c757d;
}
.light-form {
::placeholder {
opacity: 0.8;
color: var(--wp--preset--color--white);
}
a,
label {
color: var(--wp--preset--color--white);
}
select,
input[type='text'],
input[type='url'],
input[type='date'],
input[type='file'],
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='password'],
input[type='number'],
input[type='file'],
input[type='search'],
textarea {
background: none;
color: var(--wp--preset--color--white);
border-color: currentColor;
}
select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
} .wpcf7-form {
.wpcf7-form-control-wrap {
display: block;
}
.field-cf7 {
margin-block-end: calc(var(--wp--custom--main-size) / 2);
>p {
margin: 0;
}
label {
margin-block-end: 0.188rem;
}
}
.wpcf7-list-item {
margin: 0;
display: block;
}
&.submitting {
.wpcf7-submit {
background-image: url(//frameadvisory.ca/wp-content/themes/frameadvisory/images/loading-light.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 1.25rem;
color: transparent;
pointer-events: none;
}
}
.wpcf7-submit {
min-width: 9.375rem;
}
.wpcf7-spinner {
display: none !important;
}
.wpcf7-not-valid {
border-color: #f00;
}
div.wpcf7-response-output {
margin: 1rem 0;
padding: 0.313rem;
font-size: 0.875rem;
text-align: center;
}
&.invalid .wpcf7-response-output {
color: #8a6d3b;
background-color: #fcf8e3;
border: 1px solid #faebcc;
border-radius: var(--wp--custom--border-radius);
}
&.sent .wpcf7-response-output {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
border-radius: var(--wp--custom--border-radius);
}
span.wpcf7-not-valid-tip {
font-size: 0.875rem;
padding-block-start: 0.3125rem;
display: block;
}
div.wpcf7-spam-blocked,
div.wpcf7-mail-sent-ng {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
}
.wpcf7-field-group-remove,
.wpcf7-field-group-add {
border: none;
border-radius: var(--bs-accordion-border-radius);
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--white);
font-size: 1.125rem;
padding: 0.5rem 1.875rem;
display: block;
&:hover {
color: var(--wp--preset--color--white);
background-color: #134A8C;
}
}
.wpcf7-field-group-add {
max-width: 200px;
margin: 1rem auto;
}
.options-inline {
.wpcf7-radio,
.wpcf7-checkbox {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
label {
font-weight: 400;
}
}
}
@media (min-width: 768px) {
.cf7-two-cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-gap: 0 calc(var(--wp--custom--main-size) / 2);
}
} .whatsapp-fixed {
--wfb-space: calc(var(--wp--custom--main-size) / 2);
position: fixed;
bottom: var(--wfb-space);
left: var(--wfb-space);
z-index: 999;
a {
width: 3.125rem;
height: 3.125rem;
background-color: #25d366;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
padding: 10px;
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232'/%3e%3c/svg%3e");
}
&.left {
left: var(--wfb-space);
}
&.right {
left: unset;
right: var(--wfb-space);
}
}
@media (min-width: 1200px) {
.whatsapp-fixed {
--wfb-space: calc(var(--wp--custom--main-size) / 1.5);
bottom: var(--wfb-space);
a {
width: 3.75rem;
height: 3.75rem;
padding: 1rem;
transition: background 0.3s ease-out;
&:hover {
background-color: #11b04c;
}
}
&.left {
left: var(--wfb-space);
}
&.right {
right: var(--wfb-space);
}
}
}
.loader {
width: 3rem;
height: 3rem;
border: 5px solid var(--wp--preset--color--primary);
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: loaderRotation 0.8s linear infinite;
}
@keyframes loaderRotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.alm-btn-wrap .alm-load-more-btn:before {
background-image: url(//frameadvisory.ca/wp-content/themes/frameadvisory/images/loading-dark.svg) !important;
}
.alm-btn-wrap .alm-load-more-btn {
background: var(--wp--preset--color--primary) !important;
&:hover {
background: var(--wp--custom--color-primary-hover) !important;
}
} .owl-carousel {
--owl-button-size: 2.813rem;
position: relative;
&:not(.owl-loaded) {
display: flex !important;
opacity: 0;
}
.owl-stage {
display: flex;
flex-wrap: wrap;
}
&.owl-theme {
.owl-nav {
margin-block-start: var(--wp--custom--main-size);
text-align: unset;
display: flex;
justify-content: center;
gap: calc(var(--wp--custom--main-size) * .5);
button {
span {
display: none;
}
&.owl-next {
transform: rotate(180deg);
}
}
[class*="owl-"] {
transition: background-color 0.3s ease-out;
width: var(--owl-button-size);
height: var(--owl-button-size);
overflow: hidden;
background-color: currentColor;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e");
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
margin: 0;
color: currentColor;
}
[class*="owl-"] {
margin-block: 0;
}
[class*="owl-"]:hover {
background-color: color-mix(in srgb, currentColor 80%, transparent);
}
&.disabled {
display: none;
}
}
.owl-dots {
margin-block-start: var(--wp--custom--main-size);
line-height: 1;
.owl-dot {
span {
width: 1rem;
height: 1rem;
margin: .25rem;
background: none;
border: 1px solid currentColor;
transition: background .3s ease-out;
}
&.active,
&:hover {
span {
background-color: currentColor;
opacity: 1;
}
}
}
}
.owl-nav.disabled+.owl-dots {
margin-block-start: var(--wp--custom--main-size);
}
.owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled {
display: none;
}
}
}
@media (min-width: 1400px) {
.is-style-middle-arrows {
.owl-carousel {
position: relative;
&.owl-theme {
.owl-nav {
margin-block-start: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 100%;
pointer-events: none;
justify-content: space-between;
button {
margin: 0;
pointer-events: auto;
}
button.owl-prev {
margin-inline: var(--wp--custom--main-size);
}
button.owl-next {
margin-inline: var(--wp--custom--main-size);
}
}
}
}
}
} .navigation {
padding-block-start: calc(var(--wp--custom--main-size) * 2);
.screen-reader-text {
display: none;
}
&.pagination {
.nav-links {
width: 100%;
display: flex;
justify-content: center;
gap: calc(var(--wp--custom--main-size) / 1.5);
font-size: 1.375rem;
line-height: 1;
}
a,
span {
border: none;
transition: opacity 0.3s ease-out;
text-decoration: none;
}
a:hover,
span.current {
opacity: 0.5;
}
}
&.post-navigation {
padding: var(--wp--custom--main-size);
padding-block-start: calc(var(--wp--custom--main-size) * 2);
.nav-links {
max-width: var(--wp--style--global--content-size);
margin: 0 auto;
display: flex;
justify-content: space-between;
.nav-next {
margin-inline-start: auto;
}
a {
min-width: 130px;
}
}
}
}
nav.woocommerce-pagination,
.wp-block-query-pagination {
padding-top: calc(var(--wp--custom--main-size) * 2);
margin-block-start: 0;
line-height: 1;
.page-numbers {
list-style: none;
}
.page-numbers,
.wp-block-query-pagination-numbers {
display: flex;
justify-content: center;
gap: calc(var(--wp--custom--main-size) / 1.5);
font-size: 1.375rem;
a,
span {
border: none;
color: var(--wp--preset--color--primary);
transition: opacity 0.3s ease-out;
text-decoration: none;
}
a:hover,
span.current {
opacity: 0.5;
}
}
.wp-block-query-pagination-previous-arrow,
.wp-block-query-pagination-next-arrow {
margin: 0;
font-size: 1.375rem;
line-height: 1;
}
}
.wp-block-query-pagination>.wp-block-query-pagination-next,
.wp-block-query-pagination>.wp-block-query-pagination-numbers,
.wp-block-query-pagination>.wp-block-query-pagination-previous {
margin: 0;
}
@media (min-width: 1200px) {
nav.woocommerce-pagination,
.wp-block-query-pagination,
.navigation {
padding-block-start: calc(var(--wp--custom--main-size) * 3);
}
} .error404 {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
main {
place-content: center;
}
section {
h1 {
line-height: 1;
}
h2 {
line-height: 1;
}
}
} .search-form {
display: flex;
label {
flex: 1 1 auto;
}
input[type='search'] {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
input[type='submit'] {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
color: transparent;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath fill-rule='evenodd' d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center;
background-size: 1.125rem;
padding-inline: 0;
}
}
.wrap-search {
background-color: var(--wp--preset--color--white);
position: fixed;
width: 100%;
z-index: 9999;
left: 0;
top: 0;
padding: 1.5rem 0;
transform: translateY(-100%);
transition: transform 0.35s ease-out;
&.open {
transform: translate(0);
}
@media (min-width: 768px) {
.search-form,
.dgwt-wcas-sf-wrapp {
margin: 0 auto;
max-width: 50rem;
}
}
@media (min-width: 992px) {
& {
padding: 2.25rem 0;
}
}
} .pll-switcher {
list-style: none;
padding: 0;
margin: 0;
text-transform: uppercase;
display: flex;
li {
display: flex;
a {
position: relative;
opacity: .5;
text-decoration: none;
transition: opacity .3s ease-out;
&:hover {
opacity: 1;
}
}
&.current-lang {
a {
opacity: 1;
}
}
&:not(:last-child) {
&:after {
content: '|';
margin-inline: .5rem;
}
}
}
} body.search-results,
body.single-post {
main {
--wp--style--global--content-size: 60rem;
}
}
.post {
.wp-block-post-featured-image {
a {
display: block;
}
img {
max-width: none;
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
border-radius: var(--wp--custom--border-radius);
}
}
.wp-block-post-terms {
a {
text-decoration: none;
}
}
.wp-block-post-meta {
font-size: 90%;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
a {
color: var(--wp--preset--color--block);
}
>div:not(:last-child):after {
margin-inline-start: 0.75rem;
content: '|';
}
}
}
.wp-block-post-template,
.list-posts {
.post {
--wp--custom--main-size: 1rem;
display: flex;
flex-direction: column;
gap: var(--wp--custom--main-size);
>* {
margin-block-start: 0;
}
a {
text-decoration: none;
}
.wp-block-post-title {
font-size: 1.375rem;
}
.wp-block-post-excerpt {
margin: 0;
flex-grow: 1;
display: none;
}
.wp-block-read-more {
display: inline-block;
}
}
}
.list-posts {
display: grid;
gap: var(--wp--custom--main-size);
grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
}
@media (min-width: 992px) {
.list-posts.list-post-grid {
gap: calc(var(--wp--custom--main-size) * 3);
article {
&:first-child {
grid-column: span 2;
grid-row: span 2;
position: relative;
&:after {
content: '';
position: absolute;
top: 0;
right: calc(var(--wp--custom--main-size) * -2);
width: 1px;
height: 100%;
background-color: currentColor;
}
.wp-block-post-excerpt {
display: block;
}
}
}
}
}
@media (min-width: 1200px) {
.wp-block-post-template.is-layout-grid,
.list-posts {
gap: calc(var(--wp--custom--main-size) * 1.5);
}
}
.list-posts-search {
article {
padding-bottom: calc(var(--wp--custom--main-size) * 1.5);
&:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
}
}
body.search-no-results {
main {
--wp--style--global--content-size: 31.25rem;
text-align: center;
min-height: 60vh;
}
} .accordion {
--bs-accordion-bg: none;
--bs-accordion-active-bg: none;
--bs-accordion-color: currentColor;
--bs-accordion-active-color: currentColor;
--bs-accordion-border-radius: 0;
--bs-accordion-inner-border-radius: 0;
--bs-accordion-btn-focus-box-shadow: none;
--bs-accordion-border-color: transparent;
--bs-accordion-btn-padding-x: 0;
--bs-accordion-body-padding-x: 0;
--bs-accordion-body-padding-y: var(--wp--custom--main-size);
--bs-accordion-btn-icon: var(--icon-angle);
--bs-accordion-btn-active-icon: var(--icon-angle);
--bs-accordion-btn-color: currentColor;
}
.accordion-header {
border-bottom: 1px solid currentColor;
}
@media (min-width: 1200px) {
.accordion-button {
font-size: 1.25rem;
}
} .text-wrap-balance {
text-wrap: balance;
}
a:where(:not(.wp-element-button)) {
transition: color .3s ease-out;
}
table {
width: 100%;
max-width: 100%;
background-color: transparent;
&:not(:first-child) {
margin-block-start: var(--wp--custom--main-size);
}
}
table:not(.variations) td,
table:not(.variations) th {
padding: .3rem;
}
table:not(.variations) td,
table:not(.variations) th {
border-top: 1px solid #dee2e6;
}
.section {
padding-block: calc(var(--wp--custom--main-size) * 2);
@media (min-width: 992px) {
padding-block: calc(var(--wp--custom--main-size) * 2.5);
}
@media (min-width: 1200px) {
padding-block: calc(var(--wp--custom--main-size) * 3);
}
} .wp-block-details {
summary {
border-bottom: 1px solid currentColor;
position: relative;
display: flex;
align-items: center;
width: 100%;
padding: 0 0 1rem 0;
line-height: 1.3;
&:after {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-inline-start: auto;
content: "";
background-repeat: no-repeat;
background-image: var(--icon-angle);
transition: transform 0.2s ease-in-out;
}
}
&[open] {
padding-block-end: var(--wp--custom--main-size);
summary {
&:after {
transform: rotate(-180deg);
}
}
}
&.has-background {
border-radius: var(--wp--custom--border-radius);
summary {
padding-inline: var(--wp--custom--main-size);
padding-block-start: 1rem;
}
> :where(:not(summary)) {
margin-inline: var(--wp--custom--main-size);
}
}
}
hr,
.wp-block-separator {
opacity: unset;
border-top: 1px solid currentColor;
border-block-end: 0;
}
.has-global-padding>.wp-block-group.alignfull.has-background.is-layout-constrained {
padding-inline: var(--wp--custom--main-size);
}
.wp-block-social-link {
transition: opacity 0.3s ease-out;
&:hover {
transform: scale(1);
opacity: 0.8;
}
}
.wp-block-accordion-panel[aria-hidden="true"],
.wp-block-accordion-panel[inert] {
display: block;
margin-block-start: var(--wp--custom--main-size);
}
.wp-block-accordion {
--accordin-space: 1rem;
.wp-block-accordion-item {
margin: 0;
transition: height .25s ease, visibility .5s;
margin-bottom: var(--wp--custom--main-size);
.wp-block-accordion-heading {
border-bottom: 1px solid currentColor;
padding-block-end: var(--accordin-space);
.wp-block-accordion-heading__toggle-title {
font-size: 1.125rem;
font-family: var(--wp--preset--font-family--body);
font-weight: 600;
}
.wp-block-accordion-heading__toggle {
border-radius: 0;
padding: 0;
transition: transform .25s ease
}
.wp-block-accordion-heading__toggle-icon {
font-size: 2em;
line-height: 1;
width: 1em;
height: auto;
line-height: 0;
}
&:hover .wp-block-accordion-heading__toggle-title {
text-decoration: none;
}
}
.wp-block-accordion-panel {
box-sizing: unset;
height: 0;
overflow: clip;
visibility: hidden;
transition: height .25s ease, visibility .5s;
}
&.is-open { .wp-block-accordion-panel {
height: auto;
visibility: visible;
margin-block-end: calc(var(--accordin-space) * 2);
}
}
}
&.has-white-color {
.wp-block-accordion-heading__toggle-icon {
filter: brightness(0) invert(1);
}
}
}
body {
&.page-transparent-header {
.main-header {
position: fixed;
background-color: transparent;
border-bottom: 1px solid rgba(255, 255, 255, .5);
}
&:not(.nav-scrolled) {
.main-header {
.custom-logo-link {
filter: brightness(0) invert(1);
}
.wp-social-link {
--wp--preset--color--primary: var(--wp--preset--color--white);
}
#mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item>a.mega-menu-link {
color: var(--wp--preset--color--white);
}
}
}
}
&.page-no-top-space {
main {
padding-block-start: 0;
}
}
&.page-no-bottom-space {
main {
padding-block-end: 0;
}
}
} .main-header {
z-index: 998;
position: sticky;
width: 100%;
top: 0;
background-color: var(--wp--preset--color--secondary);
color: var(--wp--preset--color--quaternary);
transition: all 0.2s ease-out;
.col-left {
a {
display: block;
img {
max-width: 100px;
}
}
}
.inner {
align-items: center;
display: flex;
justify-content: space-between;
}
@media (max-width: 1023px) {
.col-nav {
position: absolute;
left: 0;
width: 100%;
top: 0;
padding: 0;
}
.inner,
.row {
height: 60px;
}
}
@media (min-width: 1024px) {
padding-block: var(--wp--custom--main-size);
}
@media (min-width: 1200px) {
.col-left {
a {
img {
max-width: 150px;
}
}
}
}
}
body {
&.nav-hide {
.main-header {
opacity: 0;
pointer-events: none;
z-index: -1;
}
}
&.nav-scrolled:not(.nav-hide) {
.main-header {
background-color: var(--wp--preset--color--secondary);
}
}
} .btn-main-menu {
margin-inline-start: auto;
position: relative;
padding: 0;
width: 2.5rem;
height: 1.5rem;
border: none;
line-height: 1;
display: flex;
justify-content: center;
align-items: center;
color: currentColor;
border-radius: 0;
span,
&::after,
&::before {
content: '';
position: absolute;
width: 100%;
height: 2px;
left: 0;
background-color: currentColor;
transition: all .15s ease;
}
&::before {
top: 1px;
}
&::after {
bottom: 1px;
}
span {
top: calc(50% - 1px);
}
&.is-active {
&::before {
top: calc(50% - 1px);
transform: rotate(45deg);
}
&::after {
bottom: calc(50% - 1px);
transform: rotate(-45deg);
}
span {
opacity: 0;
}
}
} #fullpage-menu {
background-color: var(--wp--preset--color--secondary);
padding: var(--wp--custom--main-size);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 997;
display: flex;
flex-wrap: wrap;
align-items: center;
transition: clip-path .8s cubic-bezier(0.76, 0, 0.24, 1);
clip-path: inset(0 0 100% 0);
.inner {
width: 100%;
}
#main-navigation {
ul.menu,
ul.sub-menu {
margin: 0;
padding: 0;
list-style: none;
}
ul.menu {
flex-direction: column;
font-family: var(--wp--preset--font-family--heading);
font-weight: 400;
li {
text-align: end;
a {
color: var(--wp--preset--color--quaternary);
text-decoration: none;
font-size: clamp(1.875rem, 1.5046rem + 1.8519vw, 3.125rem);
display: inline-flex;
align-items: center;
gap: 0.75rem;
&::after {
content: '';
display: block;
top: 0;
left: 0;
width: 0;
height: 2px;
background-color: currentColor;
transition: all .3s ease-out;
}
}
.sub-menu {
padding-inline-start: var(--wp--custom--main-size);
li {
a {
text-transform: unset;
font-size: 1.5em;
}
}
}
&.current-menu-item {
a {
color: var(--wp--preset--color--quaternary);
&::after {
width: 1.875rem;
}
}
}
}
}
}
@media (min-width: 1200px) {
#main-navigation {
max-width: var(--wp--style--global--content-size);
margin: 0 auto;
ul.menu {
li {
a {
&:hover {
color: var(--wp--preset--color--quaternary);
&::after {
width: 1.875rem;
}
}
}
}
}
}
}
}
body {
&.show-menu {
overflow: hidden;
padding-right: 0px;
#fullpage-menu {
clip-path: inset(0);
}
}
} .main-footer {
border-top: 1px solid currentColor;
a {
text-decoration: none;
}
.top-footer {
padding-block: calc(var(--wp--custom--main-size) * 2);
.link-li {
&:before {
content: '|';
display: inline-block;
margin-inline-end: calc(var(--wp--custom--main-size) * .5);
}
}
}
@media (min-width: 1200px) {
a {
display: inline-block;
position: relative;
text-decoration: none;
&:after {
transition: all 0.5s;
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 1px;
background-color: currentColor;
}
&:hover {
&:after {
left: 0;
width: 100%;
}
}
}
}
} .header-page {
position: relative;
.wp-block-cover__inner-container {
padding-block-start: 60px;
}
h1 {
text-wrap: balance;
}
.banner-name {
text-align: right;
}
@media (min-width: 992px) {
min-height: 600px;
}
} .wp-block-quote {
display: flex;
gap: var(--wp--custom--main-size);
justify-content: center;
&::before,
&::after {
content: '';
display: block;
width: 45px;
height: 45px;
background-image: url(//frameadvisory.ca/wp-content/themes/frameadvisory/images/quotes-img.svg);
background-repeat: no-repeat;
background-position: center;
flex: 0 0 auto;
}
p {
flex: 0 1 auto;
min-width: 0;
}
&:after {
display: none;
}
@media (min-width: 768px) {
text-align: center;
&:after {
display: block;
rotate: 180deg;
align-self: flex-end;
}
}
}
.is-style-line {
display: flex;
align-items: end;
gap: var(--wp--custom--main-size);
&:after {
content: '';
display: block;
background-color: currentColor;
height: 1px;
flex: 1;
margin-bottom: .25em;
}
}
.is-style-square {
list-style: square;
li {
&:not(:first-child) {
margin-block-start: .5em;
}
}
}
.is-style-square li::marker {
color: var(--wp--preset--color--primary);
font-size: 1.5em;
}
.wp-block-heading {
strong {
font-family: var(--wp--preset--font-family--body);
font-weight: 600;
}
}
.is-style-outline {
a,
button {
display: flex;
align-items: center;
gap: calc(var(--wp--custom--main-size) * .5);
&:before {
content: '';
display: block;
width: 1.5ch;
height: 1.5ch;
background-color: var(--wp--preset--color--primary);
transition: background .5s ease-out;
}
}
}
@media (min-width: 1200px) {
.text-about {
margin-block-start: calc(var(--wp--custom--main-size) * -8) !important;
padding: 4rem !important;
padding-bottom: calc(var(--wp--custom--main-size) * 6) !important;
font-size: 20px;
}
}
.wp-block-jupa-marquee-js {
p {
display: flex;
align-items: center;
gap: var(--wp--custom--main-size);
&:after {
content: '';
display: block;
width: 10px;
height: 10px;
background-color: var(--wp--preset--color--primary);
}
}
}
.is-style-alternative {
.wp-element-button {
position: relative;
padding-inline: 0;
&:after {
transition: all 0.5s;
content: '';
display: block;
width: 100%;
height: 1px;
background-color: currentColor;
transform: translateY(.5em);
margin: 0 auto;
}
&:hover {
&:after {
width: 0;
}
}
}
}
.img-the-story {
background-image: url(//frameadvisory.ca/wp-content/themes/frameadvisory/images/img-folder.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: calc(var(--wp--custom--main-size) * 2);
padding-inline-end: calc(var(--wp--custom--main-size) * 3.5);
position: relative;
span {
content: '';
display: block;
width: 15px;
height: 15px;
background-color: var(--wp--preset--color--primary);
position: absolute;
right: 5%;
z-index: 10;
transition: background .3s ease-out;
&:nth-child(2) {
top: 13%
}
&:nth-child(3) {
top: 29%
}
&:nth-child(4) {
top: 45%
}
&:nth-child(5) {
top: 61%
}
&:nth-child(6) {
top: 76%
}
&:hover {
background-color: var(--wp--preset--color--tertiary);
}
}
}
.cover-image {
height: 100%;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.cols-where-frame-works {
counter-reset: count;
.wp-block-jupa-bootstrap-row-column {
position: relative;
padding-block: var(--wp--custom--main-size);
counter-increment: count;
.text {
padding-inline: var(--wp--custom--main-size);
}
}
@media (max-width: 991px) {
.wp-block-jupa-bootstrap-row-column {
.text {
border-right: 1px solid #000;
margin-block-start: 0;
padding-block-start: var(--wp--custom--main-size);
&:after {
content: counter(count, decimal-leading-zero) ' _';
font-size: 1.5rem;
position: absolute;
right: 5px;
bottom: -4px;
}
}
}
}
@media (min-width: 992px) {
.wp-block-jupa-bootstrap-row-column {
&:after {
content: counter(count, decimal-leading-zero) ' _';
font-size: 1.5rem;
position: absolute;
right: 0;
}
.text {
border-right: 1px solid #000;
margin-block-start: 0;
padding-block-start: var(--wp--custom--main-size);
}
&:last-child {
.text {
border: 0;
}
}
&:nth-child(odd) {
padding-block-start: calc(var(--wp--custom--main-size) * 4);
&:after {
bottom: 0;
}
}
&:nth-child(even) {
figure {
position: relative;
&:before {
content: '';
position: absolute;
top: -2rem;
right: 0;
width: 1px;
height: 2rem;
background-color: currentColor;
}
}
&:after {
top: -3rem;
}
}
}
}
}
.services-info {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
background-color: var(--wp--preset--color--quaternary);
transform: translateY(100%);
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
margin: 0 !important;
max-width: none;
&.show {
transform: translate(0);
}
}
.service-item {
overflow-y: auto;
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
background-color: var(--wp--preset--color--quaternary);
z-index: 1;
opacity: 0;
display: none;
&.is-active {
opacity: 1;
display: block;
}
.number {
display: none;
}
.btn-close {
position: fixed;
right: var(--wp--custom--main-size);
top: var(--wp--custom--main-size);
z-index: 9999;
}
.wp-block-post-featured-image {
img {
aspect-ratio: 4/3;
object-fit: cover;
}
}
h3.wp-block-post-title {
font-family: var(--wp--preset--font-family--body);
padding: var(--wp--custom--main-size);
background-color: var(--service-color, #6a3836);
color: var(--wp--preset--color--quaternary);
text-transform: uppercase;
letter-spacing: .2em;
font-weight: 300;
line-height: 1.2;
font-size: 18px;
padding-inline-end: calc(var(--wp--custom--main-size) * 3);
}
.subtitle {
font-size: clamp(1.25rem, 1.1759rem + 0.3704vw, 1.5rem);
font-weight: 600;
strong {
font-weight: 600;
color: var(--wp--preset--color--tertiary);
}
}
.inner {
padding: var(--wp--custom--main-size);
position: relative;
z-index: 5;
}
.info {
display: grid;
gap: var(--wp--custom--main-size);
grid-template-columns: minmax(0, 1fr);
font-family: var(--wp--preset--font-family--heading);
.is-style-square {
& li {
&:not(:first-child) {
margin-block-start: 0;
}
}
}
.wp-block-buttons,
.wp-block-accordion {
margin-block-start: calc(var(--wp--custom--main-size) * 2);
}
}
@media (min-width: 992px) {
.wp-block-post-featured-image {
img {
aspect-ratio: 9/14;
}
}
h3.wp-block-post-title {
position: fixed;
top: 0;
height: 100%;
text-align: center;
rotate: -180deg;
writing-mode: vertical-rl;
text-orientation: mixed;
padding-inline-end: var(--wp--custom--main-size);
}
.inner {
padding-block: calc(var(--wp--custom--main-size) * 2);
padding-inline-end: calc(var(--wp--custom--main-size) * 3);
padding-inline-start: calc(var(--wp--custom--main-size) + 100px);
}
.info {
margin-top: calc(var(--wp--custom--main-size) * 3) !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(var(--wp--custom--main-size) * 2);
.wp-block-post-content {
grid-column: span 2;
}
}
}
@media (min-width: 1200px) {
.inner {
padding-block: calc(var(--wp--custom--main-size) * 2);
padding-inline-end: calc(var(--wp--custom--main-size) * 4);
padding-inline-start: calc(var(--wp--custom--main-size) * 8);
min-height: 100vh;
position: relative;
.wp-block-buttons {
font-family: var(--wp--preset--font-family--body);
}
.number {
display: block;
position: absolute;
left: calc(var(--wp--custom--main-size) * 5);
top: calc(var(--wp--custom--main-size) * 2);
font-size: clamp(1.25rem, 1.1759rem + 0.3704vw, 1.5rem);
font-weight: 600;
color: var(--service-color, #6a3836);
&:after {
content: '';
position: absolute;
top: calc(var(--wp--custom--main-size) * 2);
left: 50%;
width: 1px;
height: calc(100svh - calc(var(--wp--custom--main-size) * 6));
background-color: currentColor;
}
}
}
}
}
.list-services-page {
counter-reset: count;
button {
display: flex;
font-size: clamp(1.125rem, 1.0139rem + 0.5556vw, 1.5rem);
gap: var(--wp--custom--main-size);
font-weight: 600;
width: 100%;
border-bottom: 2px solid currentColor;
padding-inline: 0;
counter-increment: count;
&:not(:first-child) {
margin-block-start: var(--wp--custom--main-size);
}
p {
margin: 0;
flex: 1;
text-align: left;
padding-bottom: .25em;
line-height: 1.2;
}
.square {
display: block;
width: 20px;
height: 20px;
background-color: var(--service-color, #6a3836);
}
.number {
padding-bottom: .25em;
border-bottom: 2px solid transparent;
color: var(--service-color, #6a3836);
line-height: 1.2;
&:after {
content: counter(count, decimal-leading-zero);
}
}
}
@media (min-width: 768px) {
button {
border: none;
p {
border-bottom: 2px solid currentColor;
padding-bottom: .35em;
}
.square {
width: 30px;
height: 30px;
}
}
}
@media (min-width: 1200px) {
button {
.square {
width: 40px;
height: 40px;
}
.number {
padding-left: var(--wp--custom--main-size);
}
&:hover {
color: var(--wp--preset--color--secondary);
}
}
}
}
.owl-hfw {
counter-reset: count;
.owl-stage-outer {
overflow: unset;
}
.owl-dots {
color: var(--wp--preset--color--white);
}
.owl-item {
counter-increment: count;
p.has-medium-font-size {
display: flex;
justify-content: space-between;
&:after {
content: counter(count, decimal-leading-zero);
font-weight: 600;
}
}
}
@media (max-width: 992px) {
.owl-item {
.wp-block-image {
img {
aspect-ratio: 1/1 !important;
}
}
}
}
}
.owl-home {
position: relative;
.owl-carousel.owl-theme {
.owl-dots {
position: absolute;
width: 100%;
margin: 0 !important;
bottom: var(--wp--custom--main-size);
color: #FFF;
mix-blend-mode: exclusion;
}
}
@media (min-width: 992px) {
.wp-block-cover {
aspect-ratio: 16/7.5;
}
}
}
.owl-home-when {
counter-reset: count;
.owl-item {
counter-increment: count;
}
.owl-carousel.owl-theme {
.owl-dots {
margin-block-start: calc(var(--wp--custom--main-size) * 2) !important;
}
}
.item {
padding-left: 40px;
figure {
position: relative;
&:before {
content: counter(count, decimal-leading-zero);
display: block;
position: absolute;
top: 0;
left: -30px;
transform: translateX(-50%);
font-size: 1.15rem;
color: var(--wp--preset--color--secondary);
}
&::after {
content: '';
position: absolute;
bottom: 0;
left: -30px;
width: 1px;
height: calc(100% - 50px);
background-color: currentColor;
}
}
}
@media (min-width: 992px) {
.owl-stage-outer {
overflow: visible !important;
}
}
}
.home-cards-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
background-color: var(--wp--preset--color--quaternary);
overflow-y: auto;
transform: translateY(100%);
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
counter-reset: count;
.item {
align-content: center;
min-height: 100vh;
padding-block: calc(var(--wp--custom--main-size) * 3) !important;
display: none;
position: relative;
overflow: hidden;
margin: 0;
counter-increment: count;
&:before {
content: counter(count, decimal-leading-zero);
display: block;
position: absolute;
left: var(--wp--custom--main-size);
top: var(--wp--custom--main-size);
font-size: 1.5rem;
color: var(--wp--preset--color--secondary);
line-height: 1;
text-align: left;
}
.wp-block-image {
position: relative;
img {
position: relative;
z-index: 5;
}
&:before,
&:after {
content: '';
position: absolute;
top: 0;
width: 150%;
height: 100%;
border: 2px solid currentColor;
border-radius: 200px;
transform: translateX(-90%);
}
&:after {
transform: translateX(-90%);
left: 0;
}
&:before {
transform: translateX(90%);
right: 0;
}
}
.wp-block-image {
max-width: 580px;
}
}
.btn-close {
position: absolute;
right: var(--wp--custom--main-size);
top: var(--wp--custom--main-size);
z-index: 10;
}
&.show {
transform: translate(0);
}
@media (min-width: 768px) {
.item {
&:before {
top: unset;
bottom: var(--wp--custom--main-size);
}
}
}
}
.list-services-home {
counter-reset: count;
.owl-item {
counter-increment: count;
}
.owl-dots {
color: var(--wp--preset--color--white);
}
.owl-stage-outer {
overflow: unset;
}
.item {
background-color: var(--wp--preset--color--quaternary);
padding: var(--wp--custom--main-size);
font-family: var(--wp--preset--font-family--heading);
height: 100%;
align-content: end;
position: relative;
border: 1px solid currentColor;
h3 {
margin-bottom: var(--wp--custom--main-size);
font-family: var(--wp--preset--font-family--body);
font-weight: 600;
}
.row {
align-items: flex-end;
}
.wp-block-post-featured-image {
padding: var(--wp--custom--main-size);
background-color: var(--wp--preset--color--secondary);
img {
aspect-ratio: 1/1;
object-fit: cover;
}
&:after {
content: 'SERVICES';
color: var(--wp--preset--color--quaternary);
font-family: var(--wp--preset--font-family--body);
font-size: 0.875rem;
display: block;
padding-top: calc(var(--wp--custom--main-size) * 2);
background-image: url(//frameadvisory.ca/wp-content/themes/frameadvisory/images/icon-arrow.svg);
background-repeat: no-repeat;
background-position: 100% 100%;
}
}
}
@media (min-width: 992px) {
.item {
&:before {
font-family: var(--wp--preset--font-family--body);
content: counter(count, decimal-leading-zero);
display: block;
position: absolute;
top: var(--wp--custom--main-size);
left: 50%;
transform: translateX(-50%);
font-size: 1.15rem;
color: var(--wp--preset--color--secondary);
font-weight: 600;
}
&::after {
content: '';
position: absolute;
bottom: var(--wp--custom--main-size);
left: 50%;
width: 1px;
height: calc(100% - 90px);
background-color: currentColor;
}
}
}
}
.list-selected-experience {
counter-reset: count;
&>.wp-block-group {
counter-increment: count;
p.has-medium-font-size {
&:before {
content: counter(count, decimal-leading-zero);
margin-inline-end: 15px;
color: var(--wp--preset--color--secondary);
}
}
}
}
.list-portfolio {
display: grid;
gap: calc(var(--wp--custom--main-size) * 2) var(--wp--custom--main-size);
grid-template-columns: minmax(0, 1fr);
counter-reset: count;
article {
counter-increment: count;
.inner {
border: 1px solid currentColor;
position: relative;
display: block;
&:before {
content: counter(count, decimal-leading-zero);
margin-inline-end: 15px;
color: var(--wp--preset--color--tertiary);
position: absolute;
left: 0;
top: 0;
padding: var(--wp--custom--main-size);
font-weight: 600;
font-size: 26px;
z-index: 9;
transition: color .4s ease;
}
h3 {
font-family: var(--wp--preset--font-family--body);
position: absolute;
left: 0;
bottom: 0;
padding: var(--wp--custom--main-size);
width: 100%;
padding-inline-end: 25%;
font-weight: 600;
transition: opacity .4s ease;
}
a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
.wp-block-post-featured-image {
opacity: 0;
transition: opacity .4s ease;
img {
aspect-ratio: 1/1;
object-fit: cover;
}
}
&:hover {
&:before {
color: var(--wp--preset--color--white);
}
h3 {
opacity: 0;
}
.wp-block-post-featured-image {
opacity: 1;
}
}
}
.wp-block-read-more {
display: inline-block;
}
}
@media (min-width: 768px) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 992px) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.fancybox-is-open .fancybox-bg {
opacity: 1;
}
.fancybox-bg {
background-color: var(--bs-body-bg);
}
.fancybox-button {
background: transparent;
}
.fancybox-button:hover,
.fancybox-button,
.fancybox-button:link,
.fancybox-button:visited {
color: var(--wp--preset--color--tertiary);
}