/* Built by tools/build.mjs from assets/css/src. Edit the sources, not this file. */
/* 00-fonts.css */
/* Inter, self-hosted: the same variable font files and unicode ranges Google Fonts served the Elementor site. */
/* cyrillic-ext italic */
@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;src:url(../fonts/inter/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L0UUMJng.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
/* cyrillic italic */
@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;src:url(../fonts/inter/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L9UUMJng.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
/* greek-ext italic */
@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;src:url(../fonts/inter/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L1UUMJng.woff2) format('woff2');unicode-range:U+1F00-1FFF;}
/* greek italic */
@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;src:url(../fonts/inter/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L6UUMJng.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
/* vietnamese italic */
@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;src:url(../fonts/inter/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L2UUMJng.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
/* latin-ext italic */
@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;src:url(../fonts/inter/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L3UUMJng.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin italic */
@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;src:url(../fonts/inter/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L5UUM.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;}
/* cyrillic-ext normal */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
/* cyrillic normal */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
/* greek-ext normal */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');unicode-range:U+1F00-1FFF;}
/* greek normal */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
/* vietnamese normal */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
/* latin-ext normal */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin normal */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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;}
/* 01-reset.css */
/* Reset: taken from the Hello Elementor theme's style.min.css (v3.4.3, GPL v3) so the base the Elementor site was built on stays identical. */
html{line-height:1.15;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:1rem;font-weight:400;line-height:1.5;color:#333;background-color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{margin-block-start:.5rem;margin-block-end:1rem;font-family:inherit;font-weight:500;line-height:1.2;color:inherit}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-block-start:0;margin-block-end:.9rem}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em;white-space:pre-wrap}a{background-color:transparent;text-decoration:none;color:#c36}a:active,a:hover{color:#336}a:not([href]):not([tabindex]),a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}abbr[title]{border-block-end:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;height:auto;max-width:100%}details{display:block}summary{display:list-item}figcaption{font-size:16px;color:#333;line-height:1.4;font-style:italic;font-weight:400}[hidden],template{display:none}@media print{*,:after,:before{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre{white-space:pre-wrap!important}blockquote,pre{-moz-column-break-inside:avoid;break-inside:avoid;border:1px solid #ccc}thead{display:table-header-group}img,tr{-moz-column-break-inside:avoid;break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{-moz-column-break-after:avoid;break-after:avoid}}label{display:inline-block;line-height:1;vertical-align:middle}button,input,optgroup,select,textarea{font-family:inherit;font-size:1rem;line-height:1.5;margin:0}input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{width:100%;border:1px solid #666;border-radius:3px;padding:.5rem 1rem;transition:all .3s}input[type=date]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,select:focus,textarea:focus{border-color:#333}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{width:auto;-webkit-appearance:button}[type=button],[type=submit],button{display:inline-block;font-weight:400;color:#c36;text-align:center;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;border:1px solid #c36;padding:.5rem 1rem;font-size:1rem;border-radius:3px;transition:all .3s}[type=button]:focus:not(:focus-visible),[type=submit]:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}[type=button]:focus,[type=button]:hover,[type=submit]:focus,[type=submit]:hover,button:focus,button:hover{color:#fff;background-color:#c36;text-decoration:none}[type=button]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto;resize:vertical}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}select{display:block}table{background-color:transparent;width:100%;margin-block-end:15px;font-size:.9em;border-spacing:0;border-collapse:collapse}table td,table th{padding:15px;line-height:1.5;vertical-align:top;border:1px solid hsla(0,0%,50.2%,.5019607843)}table th{font-weight:700}table tfoot th,table thead th{font-size:1em}table caption+thead tr:first-child td,table caption+thead tr:first-child th,table colgroup+thead tr:first-child td,table colgroup+thead tr:first-child th,table thead:first-child tr:first-child td,table thead:first-child tr:first-child th{border-block-start:1px solid hsla(0,0%,50.2%,.5019607843)}table tbody>tr:nth-child(odd)>td,table tbody>tr:nth-child(odd)>th{background-color:hsla(0,0%,50.2%,.0705882353)}table tbody tr:hover>td,table tbody tr:hover>th{background-color:hsla(0,0%,50.2%,.1019607843)}table tbody+tbody{border-block-start:2px solid hsla(0,0%,50.2%,.5019607843)}@media (max-width:767px){table table{font-size:.8em}table table td,table table th{padding:7px;line-height:1.3}table table th{font-weight:400}}dd,dl,dt,li,ol,ul{margin-block-start:0;margin-block-end:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
/* 02-wp-content.css */
/* WordPress content classes: taken from the Hello Elementor theme's theme.min.css (v3.4.3, GPL v3). */
.comments-area a,.page-content a{text-decoration:underline}.alignright{float:right;margin-left:1rem}.alignleft{float:left;margin-right:1rem}.aligncenter{clear:both;display:block;margin-inline:auto}.alignwide{margin-inline:-80px}.alignfull{margin-inline:calc(50% - 50vw);max-width:100vw}.alignfull,.alignfull img{width:100vw}.wp-caption{margin-block-end:1.25rem;max-width:100%}.wp-caption.alignleft{margin:5px 20px 20px 0}.wp-caption.alignright{margin:5px 0 20px 20px}.wp-caption img{display:block;margin-inline:auto}.wp-caption-text{margin:0}.gallery-caption{display:block;font-size:.8125rem;line-height:1.5;margin:0;padding:.75rem}.pagination{display:flex;justify-content:space-between;margin:20px auto}.sticky{position:relative;display:block}.bypostauthor{font-size:inherit}.hide{display:none!important}.post-password-form{max-width:500px;margin:50px auto}.post-password-form p{width:100%;display:flex;align-items:flex-end}.post-password-form [type=submit]{margin-inline-start:3px}.screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:rgb(238.425,238.425,238.425);clip:auto!important;clip-path:none;color:#333;display:block;font-size:1rem;height:auto;left:5px;line-height:normal;padding:12px 24px;text-decoration:none;top:5px;width:auto;z-index:100000}.post .entry-title a{text-decoration:none}.post .wp-post-image{width:100%;max-height:500px;-o-object-fit:cover;object-fit:cover}@media (max-width:991px){.post .wp-post-image{max-height:400px}}@media (max-width:575px){.post .wp-post-image{max-height:300px}}#comments .comment-list{margin:0;padding:0;list-style:none;font-size:.9em}#comments .comment,#comments .pingback{position:relative}#comments .comment .comment-body,#comments .pingback .comment-body{display:flex;flex-direction:column;padding-block-start:30px;padding-block-end:30px;padding-inline-start:60px;padding-inline-end:0;border-block-end:1px solid #ccc}#comments .comment .avatar,#comments .pingback .avatar{position:absolute;left:0;border-radius:50%;margin-inline-end:10px}body.rtl #comments .comment .avatar,body.rtl #comments .pingback .avatar,html[dir=rtl] #comments .comment .avatar,html[dir=rtl] #comments .pingback .avatar{left:auto;right:0}#comments .comment-meta{display:flex;justify-content:space-between;margin-block-end:.9rem}#comments .comment-metadata,#comments .reply{font-size:11px;line-height:1}#comments .children{position:relative;list-style:none;margin:0;padding-inline-start:30px}#comments .children li:last-child{padding-block-end:0}#comments ol.comment-list .children:before{display:inline-block;font-size:1em;font-weight:400;line-height:100%;content:"↪";position:absolute;top:45px;left:0;width:auto}body.rtl #comments ol.comment-list .children:before,html[dir=rtl] #comments ol.comment-list .children:before{content:"↩";left:auto;right:0}@media (min-width:768px){#comments .comment-author,#comments .comment-metadata{line-height:1}}@media (max-width:767px){#comments .comment .comment-body{padding:30px 0}#comments .children{padding-inline-start:20px}#comments .comment .avatar{position:inherit;float:left}body.rtl #comments .comment .avatar,html[dir=rtl] #comments .comment .avatar{float:right}}.falcon-page-default,.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header){margin-inline-start:auto;margin-inline-end:auto;width:100%}@media (max-width:575px){.falcon-page-default,.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header){padding-inline-start:10px;padding-inline-end:10px}}@media (min-width:576px){.falcon-page-default,.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header){max-width:500px}.site-footer.footer-full-width .footer-inner,.site-header.header-full-width .header-inner{max-width:100%}}@media (min-width:768px){.falcon-page-default,.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header){max-width:600px}.site-footer.footer-full-width,.site-header.header-full-width{max-width:100%}}@media (min-width:992px){.falcon-page-default,.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header){max-width:800px}.site-footer.footer-full-width,.site-header.header-full-width{max-width:100%}}@media (min-width:1200px){.falcon-page-default,.page-header .entry-title,.site-footer .footer-inner,.site-footer:not(.dynamic-footer),.site-header .header-inner,.site-header:not(.dynamic-header){max-width:1140px}.site-footer.footer-full-width,.site-header.header-full-width{max-width:100%}}.site-header+.elementor{min-height:calc(100vh - 320px)}
/* 03-base.css */
/* Global styles from the Elementor kit (post 6), kept at the kit's specificity (.falcon = body class). */
:root {
--falcon-brand: #1c3390;
--falcon-dark: #1b1d28;
--falcon-text: #1b1d28;
--falcon-accent: #0539c0;
--falcon-bg-blue: #dcdcff;
--falcon-bg-light: #f4f7f9;
--falcon-white: #ffffff;
--falcon-border: #efefef;
--falcon-lower-text: #64687a;
--falcon-font: "Inter", sans-serif;
--falcon-width: 1250px;
}
.falcon {
color: var(--falcon-text);
font-family: var(--falcon-font);
}
.falcon a {
color: var(--falcon-accent);
font-family: var(--falcon-font);
}
.falcon a:hover {
color: var(--falcon-dark);
}
.falcon h1,
.falcon h2,
.falcon h3,
.falcon h4,
.falcon h5,
.falcon h6 {
color: var(--falcon-brand);
font-family: var(--falcon-font);
}
.falcon h1 { font-size: 40px; }
.falcon h2 { line-height: 50px; }
.falcon h3 { line-height: 50px; }
.falcon h4 { line-height: 40px; }
@media (max-width: 767px) {
.falcon h1 { font-size: 30px; }
.falcon h2 { font-size: 24px; }
.falcon h3 { font-size: 20px; }
.falcon h4 { font-size: 18px; }
.falcon h5 { font-size: 16px; }
.falcon h6 { font-size: 16px; }
}
/* Boxed content width, as Elementor's boxed containers (1250px, 1024px tablet, 767px mobile). */
.falcon-container {
width: 100%;
max-width: var(--falcon-width);
margin-inline: auto;
}
@media (max-width: 1024px) {
:root { --falcon-width: 1024px; }
}
@media (max-width: 767px) {
:root { --falcon-width: 767px; }
}
.falcon img {
max-width: 100%;
height: auto;
}
.falcon-screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
word-wrap: normal !important;
}
/* 10-cart.css */
/* Cart button (as Elementor's menu cart widgets 343e6bd and 00c955a) and the side cart: a panel from
the right on tablet and desktop, full screen on phones, over a dimmed page
(template-parts/header/cart-panel.php, mini-cart.php; 10-header.js initCart, 44-side-cart.js). */
.falcon-header-cart {
position: relative;
min-width: 0;
max-width: 100%;
}
.falcon-header-cart .falcon-header-cart__toggle {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 0.3em;
padding: 10px;
border: 0 solid #69727d;
border-radius: 0;
background-color: var(--falcon-white);
color: #69727d;
font-family: var(--falcon-font);
font-size: 15px;
font-weight: 400;
line-height: 1;
text-align: center;
transition: all 0.3s;
}
.falcon-header-cart .falcon-header-cart__toggle:hover {
background-color: transparent;
color: #69727d;
}
.falcon-header-cart__icon {
position: relative;
display: flex;
align-items: center;
color: var(--falcon-brand);
font-size: 25px;
transition: color 0.1s;
}
.falcon-header-cart__icon svg {
width: 1em;
height: 1em;
fill: var(--falcon-brand);
}
.falcon-header-cart__toggle:hover .falcon-header-cart__icon {
color: var(--falcon-dark);
}
.falcon-header-cart__toggle:hover .falcon-header-cart__icon svg {
fill: var(--falcon-dark);
}
.falcon-header-cart__count {
position: absolute;
top: -12px;
right: -12px;
display: block;
min-width: 1.6em;
height: 1.6em;
border-radius: 100%;
background-color: var(--falcon-bg-blue);
color: var(--falcon-accent);
font-size: 10px;
line-height: 1.5em;
text-align: center;
}
/* The count pops when it changes after an add, a quantity change or a removal. */
.falcon-header-cart__count.is-bumped {
animation: falcon-cart-bump 0.65s cubic-bezier(0.3, 1.5, 0.5, 1);
}
@keyframes falcon-cart-bump {
0% {
transform: scale(1);
}
30% {
transform: scale(1.5);
background-color: var(--falcon-brand);
color: var(--falcon-white);
}
65% {
transform: scale(0.92);
background-color: var(--falcon-brand);
color: var(--falcon-white);
}
100% {
transform: scale(1);
}
}
@keyframes falcon-cart-flash {
0%,
70% {
background-color: var(--falcon-brand);
color: var(--falcon-white);
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-header-cart__count.is-bumped {
animation: falcon-cart-flash 0.9s linear;
}
}
/* ------------------------------------------------------------------------------------------------
* Panel. Closed, it is hidden (so its links leave the tab order) once the slide has finished.
* ---------------------------------------------------------------------------------------------- */
html.falcon-cart-open {
overflow: hidden;
}
html.falcon-cart-open body {
padding-right: var(--falcon-scrollbar-gap, 0px);
}
.falcon-cart-panel {
position: fixed;
inset: 0;
z-index: 2147483635; /* over Zendesk and the cookie banner, like the mobile menu */
visibility: hidden;
pointer-events: none;
text-align: start;
transition: visibility 0s linear 0.38s;
}
.falcon-cart-panel.falcon-cart-panel--open {
visibility: visible;
pointer-events: auto;
transition: visibility 0s;
}
.falcon-cart-panel__backdrop {
position: absolute;
inset: 0;
background: rgba(27, 29, 40, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.falcon-cart-panel--open .falcon-cart-panel__backdrop {
opacity: 1;
}
.falcon-cart-panel__main {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
width: min(460px, 100%);
border-radius: 20px 0 0 20px;
background: var(--falcon-white);
box-shadow: -24px 0 60px rgba(27, 29, 40, 0.16);
color: var(--falcon-dark);
font-family: var(--falcon-font);
font-size: 15px;
line-height: 1.5;
outline: none;
transform: translateX(104%);
transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.falcon-cart-panel--open .falcon-cart-panel__main {
transform: none;
}
@media (max-width: 767px) {
.falcon-cart-panel__main {
width: 100%;
border-radius: 0;
box-shadow: none;
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-cart-panel__main {
opacity: 0;
transform: none;
transition: opacity 0.2s ease;
}
.falcon-cart-panel--open .falcon-cart-panel__main {
opacity: 1;
}
}
/* Heading and close button (outside the fragment, so they keep focus through a redraw). */
.falcon-cart-panel__head {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 24px 18px;
border-bottom: 1px solid #eef1f5;
}
.falcon .falcon-cart-panel__title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
margin: 0;
color: var(--falcon-dark);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.25;
}
.falcon-cart-panel__count {
padding: 4px 10px;
border-radius: 999px;
background: var(--falcon-bg-light);
color: var(--falcon-brand);
font-size: 13px;
font-weight: 600;
letter-spacing: 0;
line-height: 1.3;
}
.falcon-cart-panel__count[hidden] {
display: none;
}
.falcon .falcon-cart-panel__close {
display: grid;
flex-shrink: 0;
place-items: center;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--falcon-bg-light);
color: var(--falcon-brand);
cursor: pointer;
transition: background-color 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.falcon .falcon-cart-panel__close:hover {
background: var(--falcon-bg-blue);
}
.falcon .falcon-cart-panel__close:focus-visible {
outline: 2px solid var(--falcon-brand);
outline-offset: 3px;
}
.falcon-cart-panel__close svg {
width: 22px;
height: 22px;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.falcon .falcon-cart-panel__close:hover {
transform: rotate(90deg);
}
}
/* ------------------------------------------------------------------------------------------------
* Contents (the div.falcon-mini-cart fragment): a scrolling list and a footer pinned to the bottom.
* ---------------------------------------------------------------------------------------------- */
.falcon-mini-cart {
position: relative;
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
}
.falcon-mini-cart.is-loading {
opacity: 0.45;
pointer-events: none;
transition: opacity 0.2s ease;
}
.falcon-mini-cart__scroll {
flex: 1 1 auto;
min-height: 0;
padding: 4px 24px 8px;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.falcon-mini-cart__items {
margin: 0;
padding: 0;
list-style: none;
}
.falcon-mini-cart__item {
display: grid;
grid-template-columns: 84px minmax(0, 1fr);
gap: 16px;
margin: 0;
padding: 20px 0;
border-bottom: 1px solid #eef1f5;
}
.falcon-mini-cart__item:last-child {
border-bottom: 0;
}
/* Items arrive with a short stagger as the panel opens. */
@media (prefers-reduced-motion: no-preference) {
.falcon-cart-panel .falcon-mini-cart__item {
transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.falcon-cart-panel:not(.falcon-cart-panel--open) .falcon-mini-cart__item {
opacity: 0;
transform: translateX(16px);
transition: none;
}
.falcon-cart-panel--open .falcon-mini-cart__item:nth-child(1) { transition-delay: 0.08s; }
.falcon-cart-panel--open .falcon-mini-cart__item:nth-child(2) { transition-delay: 0.12s; }
.falcon-cart-panel--open .falcon-mini-cart__item:nth-child(3) { transition-delay: 0.16s; }
.falcon-cart-panel--open .falcon-mini-cart__item:nth-child(n + 4) { transition-delay: 0.2s; }
}
.falcon-mini-cart__thumb a,
.falcon-mini-cart__thumb > img,
.falcon-mini-cart__thumb a img {
display: block;
}
.falcon-mini-cart__thumb img {
width: 84px;
height: 84px;
padding: 6px;
border: 1px solid #e6eaf0;
border-radius: 14px;
background: var(--falcon-white);
object-fit: contain;
}
.falcon-mini-cart__body {
display: flex;
flex-direction: column;
min-width: 0;
}
.falcon-mini-cart__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.falcon .falcon-mini-cart__name {
display: -webkit-box;
margin: 0;
overflow: hidden;
color: var(--falcon-dark);
font-size: 15px;
font-weight: 600;
line-height: 1.4;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.falcon .falcon-mini-cart__name a {
color: var(--falcon-dark);
text-decoration: none;
transition: color 0.2s ease;
}
.falcon .falcon-mini-cart__name a:hover {
color: var(--falcon-brand);
}
.falcon-mini-cart__price {
flex-shrink: 0;
text-align: right;
}
.falcon .falcon-mini-cart__line-price {
margin: 0;
color: var(--falcon-brand);
font-size: 15px;
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
transition: opacity 0.2s ease;
}
/* Chosen options and cart item data (WooCommerce's dl.variation). */
.falcon-mini-cart dl.variation {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 2px 6px;
margin: 6px 0 0;
color: var(--falcon-lower-text);
font-size: 13px;
line-height: 1.45;
}
.falcon-mini-cart dl.variation dt {
margin: 0;
color: #4a4f63;
font-weight: 500;
}
.falcon-mini-cart dl.variation dd {
margin: 0;
}
.falcon-mini-cart dl.variation dd p {
margin: 0;
}
.falcon-mini-cart__controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 12px;
margin-top: 12px;
}
.falcon-mini-cart__qty-text {
color: var(--falcon-lower-text);
font-size: 13px;
font-weight: 500;
}
.falcon .falcon-mini-cart__each {
margin: 2px 0 0;
color: var(--falcon-lower-text);
font-size: 12px;
line-height: 1.3;
white-space: nowrap;
transition: opacity 0.2s ease;
}
.falcon-mini-cart__item.is-updating .falcon-mini-cart__line-price,
.falcon-mini-cart__item.is-updating .falcon-mini-cart__each {
opacity: 0.4;
}
/* Quantity stepper. */
.falcon-qty {
display: inline-flex;
align-items: center;
height: 38px;
padding: 0 1px;
border: 1px solid #dfe4ec;
border-radius: 999px;
background: var(--falcon-white);
}
.falcon .falcon-qty__btn {
display: grid;
place-items: center;
width: 34px;
height: 34px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--falcon-brand);
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.falcon .falcon-qty__btn:hover:not(:disabled) {
background: var(--falcon-bg-light);
}
.falcon .falcon-qty__btn:disabled {
color: #b7bdca;
cursor: default;
}
.falcon .falcon-qty__btn:focus-visible {
outline: 2px solid var(--falcon-brand);
outline-offset: 1px;
}
.falcon-qty__btn svg {
width: 16px;
height: 16px;
}
.falcon .falcon-qty__input {
width: 38px;
height: 34px;
margin: 0;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--falcon-dark);
font-family: var(--falcon-font);
font-size: 15px;
font-weight: 600;
text-align: center;
appearance: textfield;
-moz-appearance: textfield;
}
.falcon-qty__input::-webkit-outer-spin-button,
.falcon-qty__input::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
.falcon .falcon-qty__input:focus {
outline: none;
box-shadow: none;
}
.falcon .falcon-qty__input:focus-visible {
outline: 2px solid var(--falcon-brand);
outline-offset: 0;
}
/* Remove. */
.falcon .falcon-mini-cart__remove {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: auto;
padding: 6px 4px;
border-radius: 8px;
color: var(--falcon-lower-text);
font-size: 13px;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
transition: color 0.2s ease;
}
.falcon .falcon-mini-cart__remove:hover {
color: #b3261e;
}
.falcon .falcon-mini-cart__remove:focus-visible {
outline: 2px solid var(--falcon-brand);
outline-offset: 2px;
}
.falcon-mini-cart__remove svg {
width: 16px;
height: 16px;
}
.falcon-mini-cart__error {
margin: 10px 0 0;
padding: 8px 12px;
border-radius: 10px;
background: #fdf0ef;
color: #8f1d16;
font-size: 13px;
line-height: 1.45;
}
.falcon-mini-cart__error a {
color: inherit;
font-weight: 600;
}
.falcon-mini-cart > .falcon-mini-cart__error {
margin: 0 24px 12px;
}
/* A line on its way out: faded while the request runs, then folded away. */
.falcon-mini-cart__item.is-removing {
opacity: 0.45;
pointer-events: none;
transition: opacity 0.2s ease;
}
.falcon-mini-cart__item.is-collapsing,
.falcon-cart-panel--open .falcon-mini-cart__item.is-collapsing {
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
border-bottom-width: 0;
opacity: 0;
transition: height 0.24s ease, padding 0.24s ease, opacity 0.18s ease;
transition-delay: 0s;
}
/* Footer: subtotal, a note and the buttons, always at the bottom. */
.falcon-mini-cart__foot {
flex-shrink: 0;
padding: 18px 24px calc(20px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid #eef1f5;
background: var(--falcon-white);
}
.falcon .falcon-mini-cart__subtotal {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin: 0 0 4px;
color: var(--falcon-dark);
font-size: 16px;
font-weight: 600;
}
.falcon-mini-cart__subtotal-amount {
font-size: 20px;
font-weight: 700;
}
.falcon-mini-cart__subtotal-amount small {
color: var(--falcon-lower-text);
font-size: 12px;
font-weight: 400;
}
.falcon .falcon-mini-cart__note {
margin: 0 0 16px;
color: var(--falcon-lower-text);
font-size: 13px;
line-height: 1.45;
}
.falcon-mini-cart__buttons {
display: grid;
gap: 10px;
}
.falcon .falcon-mini-cart .falcon-button {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
padding: 0 24px;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
}
.falcon-mini-cart__checkout svg {
width: 18px;
height: 18px;
}
/* Empty. */
.falcon-mini-cart__empty {
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 32px calc(48px + env(safe-area-inset-bottom, 0px));
text-align: center;
}
.falcon-mini-cart__empty-icon {
display: grid;
place-items: center;
width: 88px;
height: 88px;
margin-bottom: 20px;
border-radius: 50%;
background: var(--falcon-bg-light);
color: var(--falcon-brand);
}
.falcon-mini-cart__empty-icon svg {
width: 38px;
height: 38px;
}
.falcon .falcon-mini-cart__empty-title {
margin: 0 0 8px;
color: var(--falcon-dark);
font-size: 20px;
font-weight: 700;
line-height: 1.3;
}
.falcon .falcon-mini-cart__empty-text {
max-width: 290px;
margin: 0 0 24px;
color: var(--falcon-lower-text);
font-size: 14.5px;
line-height: 1.5;
}
.falcon .falcon-mini-cart .falcon-mini-cart__browse {
min-width: 200px;
}
@media (max-width: 767px) {
.falcon-cart-panel__head {
padding: 14px 16px 14px 20px;
}
.falcon .falcon-cart-panel__title {
font-size: 20px;
}
.falcon-mini-cart__scroll {
padding: 0 20px 8px;
}
.falcon-mini-cart__item {
grid-template-columns: 72px minmax(0, 1fr);
gap: 14px;
padding: 18px 0;
}
.falcon-mini-cart__thumb img {
width: 72px;
height: 72px;
border-radius: 12px;
}
.falcon-mini-cart__foot {
padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
}
.falcon-mini-cart > .falcon-mini-cart__error {
margin: 0 20px 12px;
}
}
/* Touch screens keep :hover on whatever was under the finger; the buttons keep their own colours. */
@media (hover: none) {
.falcon .falcon-mini-cart .falcon-mini-cart__checkout:hover,
.falcon .falcon-mini-cart .falcon-mini-cart__browse:hover {
background-color: var(--falcon-brand);
color: var(--falcon-white);
}
.falcon .falcon-mini-cart .falcon-mini-cart__view:hover {
background-color: var(--falcon-bg-blue);
color: var(--falcon-brand);
}
}
/* 10-header.css */
/*
* Header (Elementor template 11). Values are the computed styles of the Elementor render at 1440, 1024,
* 768 and 390. Elementor's flex containers are copied as they were (width as flex basis, flex 0 1 auto,
* min-width 0), because several rows only fit by shrinking, as the top bar buttons do.
* "segoe-ui" comes from the Adobe Fonts kit enqueued in inc/30-header-footer.php.
*/
/* Icon lists (Elementor icon list widget). Inline lists are right-aligned, as all of Elementor's were. */
.falcon-icon-list {
position: relative;
min-width: 0;
max-width: 100%;
}
.falcon-icon-list__items {
margin: 0;
padding: 0;
list-style: none;
}
.falcon-icon-list__item {
position: relative;
display: flex;
align-items: center;
margin: 0;
padding: 0;
font-size: inherit;
}
.falcon-icon-list__item > a {
display: flex;
align-items: center;
width: 100%;
font-size: inherit;
}
.falcon-icon-list__icon {
position: relative;
display: flex;
}
.falcon-icon-list__icon svg {
width: var(--falcon-list-icon, 1em);
height: var(--falcon-list-icon, 1em);
margin: 0 calc(var(--falcon-list-icon, 1em) * 0.25) 0 0;
transition: fill 0.3s;
}
.falcon-icon-list__icon + .falcon-icon-list__text {
align-self: center;
padding-inline-start: 5px;
}
.falcon-icon-list__text {
transition: color 0.3s;
}
.falcon-icon-list--inline {
overflow: hidden;
}
.falcon-icon-list--inline .falcon-icon-list__items {
display: flex;
flex-wrap: wrap;
justify-content: end;
margin-inline: calc(var(--falcon-list-space) / -2);
}
.falcon-icon-list--inline .falcon-icon-list__item {
justify-content: end;
margin-inline: calc(var(--falcon-list-space) / 2);
text-align: end;
word-break: break-word;
}
.falcon-icon-list--inline .falcon-icon-list__item > a {
justify-content: end;
text-align: end;
}
/* Top bar: desktop (d1b3cf9) and tablet/mobile (517a8ae). */
.falcon-topbar {
position: relative;
display: flex;
gap: 0;
padding: 20px;
background-color: var(--falcon-dark);
}
.falcon-topbar__rating,
.falcon-topbar__translate-wrap {
position: relative;
display: flex;
gap: 0 15px;
width: 40%;
min-width: 0;
}
.falcon-topbar__actions {
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0 10px;
width: 100%;
min-width: 0;
}
/* Desktop: the actions take the width they need and the rating the rest, so the row stays on one line
(with the language switcher added, Elementor's 40% / 100% split wrapped the buttons at 1440). */
.falcon-topbar--desktop .falcon-topbar__rating {
flex: 1 1 auto;
width: auto;
}
.falcon-topbar--desktop .falcon-topbar__actions {
flex: 0 1 auto;
width: auto;
}
.falcon-topbar__rating-list {
--falcon-list-space: 30px;
--falcon-list-icon: 15px;
align-self: center;
}
.falcon-topbar__rating-list svg {
fill: var(--falcon-white);
}
.falcon-topbar__rating-list .falcon-icon-list__text {
color: var(--falcon-white);
}
/* The 10px right margin sits inside the flex item, as on Elementor's widget container, so the row shrinks
the same way. */
.falcon-topbar__contact {
--falcon-list-space: 30px;
position: relative;
min-width: 0;
max-width: 100%;
}
.falcon-topbar__contact .falcon-icon-list {
margin-right: 10px;
}
.falcon-topbar__contact .falcon-icon-list__item > .falcon-icon-list__text,
.falcon-topbar__contact .falcon-icon-list__item > a {
font-family: "segoe-ui", sans-serif;
font-size: 15px;
font-weight: 400;
}
.falcon-topbar__contact .falcon-icon-list__text {
color: var(--falcon-white);
}
.falcon-topbar__contact .falcon-icon-list__item:hover .falcon-icon-list__text {
color: var(--falcon-bg-blue);
}
.falcon-topbar__button-wrap {
position: relative;
min-width: 0;
max-width: 100%;
text-align: center;
}
.falcon-topbar .falcon-topbar__button {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
font-family: var(--falcon-font);
font-size: 15px;
font-weight: 600;
line-height: 1;
text-align: center;
transition: all 0.3s;
}
.falcon-topbar .falcon-topbar__button--dark {
background-color: #43485a;
color: var(--falcon-white);
fill: var(--falcon-white);
}
.falcon-topbar .falcon-topbar__button--light {
background-color: var(--falcon-white);
color: var(--falcon-dark);
fill: var(--falcon-dark);
}
.falcon-topbar .falcon-topbar__button:hover,
.falcon-topbar .falcon-topbar__button:focus {
background-color: var(--falcon-brand);
color: var(--falcon-white);
}
.falcon-topbar .falcon-topbar__button:hover svg,
.falcon-topbar .falcon-topbar__button:focus svg {
fill: var(--falcon-white);
}
.falcon-topbar__button-inner {
display: flex;
justify-content: center;
gap: 5px;
}
.falcon-topbar__button--light .falcon-topbar__button-inner {
gap: 8px;
}
.falcon-topbar__button-icon {
display: flex;
align-items: center;
}
.falcon-topbar__button-icon svg {
width: 1em;
height: 1em;
}
.falcon-topbar__button-text {
display: inline-block;
}
/* The language switcher's slot (the switcher is in 14-language.css). It keeps its width, so the buttons
beside it do not wrap. */
.falcon-topbar__translate {
position: relative;
flex: none;
max-width: 100%;
}
/* Desktop main bar (9eac751). It is the containing block of the Browse Catalog panel. */
.falcon-header-main {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
gap: 30px;
padding: 20px;
border-bottom: 2px solid var(--falcon-border);
}
.falcon-header-main__brand {
display: flex;
gap: 0 25px;
width: 500px;
min-width: 0;
}
.falcon-header-main__links {
--falcon-list-space: 30px;
align-self: center;
}
.falcon-header-main__links .falcon-icon-list__item > a {
font-family: var(--falcon-font);
font-size: 15px;
font-weight: 400;
}
.falcon-header-main__links .falcon-icon-list__text {
color: var(--falcon-dark);
}
.falcon-header-main__links .falcon-icon-list__item:hover .falcon-icon-list__text {
color: var(--falcon-brand);
}
.falcon-header-main__search {
display: flex;
flex-direction: column;
width: 29%;
min-width: 0;
}
.falcon-header-main__actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0 20px;
width: 540px;
min-width: 0;
}
.falcon-vat-switch {
position: relative;
min-width: 0;
max-width: 100%;
}
/* VAT switch: two options on one track, the chosen one on a sliding brand-blue thumb. A real
checkbox underneath (ticked = including VAT), so it works with the keyboard and screen readers. */
.falcon-vat-switch__control {
position: relative;
display: inline-flex;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.falcon-vat-switch__input {
position: absolute;
z-index: 1;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.falcon-vat-switch__track {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
height: 44px;
padding: 4px;
border: 1px solid #e3e7ef;
border-radius: 999px;
background: var(--falcon-bg-light);
}
.falcon-vat-switch__track::before {
content: "";
position: absolute;
top: 4px;
bottom: 4px;
left: 4px;
width: calc(50% - 4px);
border-radius: 999px;
background: var(--falcon-brand);
box-shadow: 0 4px 12px -4px rgba(28, 51, 144, 0.55);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.falcon-vat-switch__input:not(:checked) + .falcon-vat-switch__track::before {
transform: translateX(100%);
}
.falcon-vat-switch__option {
position: relative;
padding: 0 14px;
color: var(--falcon-lower-text);
font-size: 14px;
font-weight: 600;
line-height: 1;
text-align: center;
white-space: nowrap;
transition: color 0.25s ease;
}
.falcon-vat-switch__input:checked + .falcon-vat-switch__track .falcon-vat-switch__option--incl,
.falcon-vat-switch__input:not(:checked) + .falcon-vat-switch__track .falcon-vat-switch__option--excl {
color: #fff;
}
.falcon-vat-switch__control:hover .falcon-vat-switch__track {
border-color: #c9d2f1;
}
.falcon-vat-switch__input:focus-visible + .falcon-vat-switch__track {
outline: 3px solid var(--falcon-brand);
outline-offset: 2px;
}
/* Prices printed both ways: only the chosen one shows. */
.wts-inactive {
display: none !important;
}
/* "(excl VAT)" after a product price while prices show without VAT (falcon-site/vat-switch.php). */
.falcon-vat-note .wts-price-excl {
margin-left: 0.4em;
color: var(--falcon-lower-text);
font-size: clamp(13px, 0.62em, 16px);
font-weight: 500;
white-space: nowrap;
}
@media (max-width: 767px) {
.falcon-vat-switch__track {
height: 36px;
padding: 3px;
}
.falcon-vat-switch__track::before {
top: 3px;
bottom: 3px;
left: 3px;
width: calc(50% - 3px);
}
.falcon-vat-switch__option {
padding: 0 9px;
font-size: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-vat-switch__track::before {
transition: none;
}
}
/* Logo (image widgets 7a67e47 and 7617a43, scale 1.05 on hover). */
.falcon-logo {
position: relative;
min-width: 0;
max-width: 100%;
text-align: center;
}
/* Elementor's transformed widget container was a compositing layer; will-change makes this one too, so
text that overlaps it (the cart count on tablet, the Browse Catalog panel) is drawn the same way. */
.falcon-logo__inner {
transform: perspective(0) scale(1);
transition: transform 0.4s;
will-change: transform;
}
.falcon-logo__inner:hover {
transform: perspective(0) scale(1.05);
}
.falcon-logo__link {
display: inline-block;
}
.falcon .falcon-logo__image {
display: inline-block;
width: 55px;
border-radius: 15px;
vertical-align: middle;
}
/* Browse Catalog (mega menu d982a84, opens on click). The panel takes its top from where it sits after the
button and its width from the main bar, as Elementor's stretched content did. */
.falcon-mega {
align-self: flex-end;
min-width: 0;
max-width: 100%;
padding: 9px;
border-radius: 10px;
background-color: var(--falcon-brand);
}
.falcon-mega .falcon-mega__toggle,
.falcon-mega .falcon-mega__toggle:hover,
.falcon-mega .falcon-mega__toggle:focus {
display: flex;
align-items: center;
gap: 15px;
margin: 0;
padding: 8px 21px 8px 16px;
border: 0;
border-radius: 0;
background: none;
color: var(--falcon-white);
font-family: "segoe-ui", sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
transition: none;
}
.falcon-mega__label {
display: flex;
align-items: center;
transition: all 0.3s;
}
/* Tablet and mobile main bar (0b56d52). It is the containing block of the menu dropdown. */
.falcon-header-mobile {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
padding: 20px;
border-bottom: 2px solid var(--falcon-border);
}
.falcon-header-mobile__top {
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
}
.falcon-header-mobile__actions {
display: flex;
gap: 0 25px;
width: 538px;
min-width: 0;
}
.falcon-header-mobile__search {
display: flex;
flex-direction: column;
width: 50%;
min-width: 0;
}
/* Search button: phones only (below), where it opens the search full screen (10-header.js). */
.falcon-header-mobile__search-toggle {
display: none;
}
/* Menu toggle and dropdown (nav menu 42b3fe8, "Mobile Menu"). */
.falcon-mobile-nav {
min-width: 0;
max-width: 100%;
}
.falcon-mobile-nav .falcon-mobile-nav__toggle,
.falcon-mobile-nav .falcon-mobile-nav__toggle:hover,
.falcon-mobile-nav .falcon-mobile-nav__toggle:focus {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 0.25em;
border: 0;
border-radius: 3px;
background-color: var(--falcon-white);
color: var(--falcon-brand);
font-size: 22px;
cursor: pointer;
transition: none;
}
.falcon-mobile-nav__toggle svg {
width: 1em;
height: 1em;
fill: var(--falcon-brand);
}
.falcon-mobile-nav__toggle[aria-expanded="true"] .falcon-mobile-nav__icon-open,
.falcon-mobile-nav__toggle:not([aria-expanded="true"]) .falcon-mobile-nav__icon-close {
display: none;
}
/* Main bar on scroll up (10-header.js). The header is sticky with an offset the script sets: its
full height while hidden, the dark bar's height while the main bar shows. The offset slides. Over
the page, Zendesk and the add to cart notice; the menus and the side cart inside it keep their
own order. */
.falcon-site-header {
position: sticky;
top: var(--falcon-header-top, 0);
z-index: 2147483610;
transition: top 0.34s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.falcon-site-header :is(.falcon-header-main, .falcon-header-mobile) {
background: var(--falcon-white);
transition: box-shadow 0.36s ease;
}
html.falcon-header-pinned .falcon-site-header :is(.falcon-header-main, .falcon-header-mobile) {
box-shadow: 0 10px 30px -18px rgba(27, 29, 40, 0.35);
}
@media (prefers-reduced-motion: reduce) {
.falcon-site-header {
transition: none;
}
}
/* Site-wide notice (7049ea5). */
.falcon-notice {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
padding: 20px;
background-color: var(--falcon-brand);
}
.falcon-notice__inner {
display: flex;
justify-content: center;
align-items: center;
gap: 0 20px;
width: 100%;
min-width: 0;
}
.falcon-notice__text {
margin: 0;
padding: 0;
color: var(--falcon-white);
font-family: var(--falcon-font);
font-weight: 400;
line-height: 1;
}
/* Which bars show where (Elementor's hidden-desktop, hidden-tablet and hidden-mobile). */
@media (min-width: 1025px) {
.falcon-topbar--mobile,
.falcon-header-mobile {
display: none;
}
}
@media (max-width: 1024px) {
.falcon-topbar--desktop,
.falcon-header-main {
display: none;
}
/* Rating on the left, language switcher on the right. */
.falcon-topbar--mobile {
justify-content: space-between;
align-items: center;
}
.falcon-topbar__translate-wrap {
justify-content: flex-end;
}
}
@media (max-width: 767px) {
.falcon-topbar--mobile {
flex-wrap: wrap;
gap: 10px 0;
}
.falcon-topbar--mobile .falcon-topbar__rating {
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
width: 37%;
}
.falcon-topbar--mobile .falcon-topbar__rating-list .falcon-icon-list__item > .falcon-icon-list__text {
font-size: 15px;
}
.falcon-topbar__translate-wrap {
flex-wrap: wrap;
justify-content: flex-end;
align-items: stretch;
width: 52%;
}
.falcon-topbar--mobile .falcon-topbar__translate {
align-self: center;
}
.falcon-header-mobile,
.falcon-header-mobile__search,
.falcon-notice,
.falcon-notice__inner {
flex-wrap: wrap;
}
.falcon-header-mobile__top {
flex-direction: row;
flex-wrap: wrap;
}
.falcon-header-mobile .falcon-logo {
width: 19%;
max-width: 19%;
text-align: start;
}
.falcon-header-mobile__actions {
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 0 10px;
width: 81%;
}
.falcon-header-mobile__search {
width: 100%;
}
/* The search is a button before the cart; the box stays in the page, folded away, until the
button opens it full screen. */
.falcon .falcon-header-mobile__search-toggle {
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--falcon-brand);
cursor: pointer;
}
.falcon .falcon-header-mobile__search-toggle:hover,
.falcon .falcon-header-mobile__search-toggle:focus-visible {
background: var(--falcon-bg-light);
}
.falcon-header-mobile__search-toggle svg {
width: 25px;
height: 25px;
}
.falcon-header-mobile__search:not(:has(.falcon-live-search.is-open)) {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.falcon-mobile-nav .falcon-mobile-nav__toggle,
.falcon-mobile-nav .falcon-mobile-nav__toggle:hover,
.falcon-mobile-nav .falcon-mobile-nav__toggle:focus {
font-size: 29px;
}
}
/* 10-shop-menu.css */
/* Shop menu (Elementor container 546), in the Browse Catalog panel and on /browse/. */
.falcon-shop-menu {
display: flex;
flex-direction: column;
}
.falcon-shop-menu__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(1, 1fr);
justify-content: start;
align-content: start;
gap: 75px;
}
.falcon-shop-menu__column {
display: flex;
flex-direction: column;
gap: 15px 0;
min-width: 0;
}
.falcon-shop-menu__heading {
--falcon-list-icon: 30px;
display: flex;
align-items: center;
margin: 0;
padding: 0;
color: var(--falcon-brand);
font-family: var(--falcon-font);
font-size: 20px;
font-weight: 600;
line-height: 1.5;
}
.falcon-shop-menu__heading--small-icon {
--falcon-list-icon: 26px;
}
.falcon-shop-menu__icon {
position: relative;
display: flex;
}
.falcon-shop-menu__icon svg {
width: var(--falcon-list-icon);
height: var(--falcon-list-icon);
margin: 0 calc(var(--falcon-list-icon) * 0.25) 0 0;
fill: var(--falcon-brand);
transition: fill 0.3s;
}
.falcon-shop-menu__heading-text {
align-self: center;
padding-inline-start: 5px;
transition: color 0.3s;
}
.falcon-shop-menu__links,
.falcon-shop-menu__links li {
position: relative;
display: block;
margin: 0;
padding: 0;
line-height: normal;
list-style: none;
}
.falcon-shop-menu__links {
z-index: 2;
}
.falcon-shop-menu .falcon-shop-menu__links li {
padding: 5px 0;
}
/* Inline, so the hover underline (90-links.css) runs under the text, on every line it wraps to. */
.falcon-shop-menu .falcon-shop-menu__links a {
position: relative;
display: inline;
color: var(--falcon-text);
font-family: var(--falcon-font);
font-size: 15px;
font-weight: 400;
line-height: 20px;
transition: 0.4s;
}
.falcon-shop-menu .falcon-shop-menu__links a:hover,
.falcon-shop-menu .falcon-shop-menu__links a:focus,
.falcon-shop-menu .falcon-shop-menu__links .current-menu-item > a {
color: var(--falcon-accent);
}
@media (max-width: 767px) {
.falcon-shop-menu__grid {
grid-template-columns: repeat(1, 1fr);
}
.falcon-shop-menu,
.falcon-shop-menu__column {
flex-wrap: wrap;
}
}
/* 11-footer.css */
/* Footer (Elementor template 585). Uses the icon list styles in 10-header.css. */
/* Trade notice (da56672), logged-in trade customers only. */
.falcon-footer-trade {
padding: 0 20px;
background-color: var(--falcon-brand);
}
.falcon-footer-trade__text {
max-width: min(100%, var(--falcon-width));
margin: 0 auto;
padding: 20px 0;
color: var(--falcon-white);
font-family: var(--falcon-font);
font-weight: 400;
line-height: 1;
text-align: center;
}
/* Main panel: navy, with the logo and contact details beside the two menus. */
.falcon-footer-main {
padding: 0 20px;
background-color: #111c4e;
color: rgba(255, 255, 255, 0.78);
}
.falcon-footer-main__inner {
max-width: min(100%, var(--falcon-width));
margin: 0 auto;
padding: 72px 0 64px;
}
.falcon-footer-main__grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 48px 64px;
}
.falcon-footer-brand,
.falcon-footer-col {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
min-width: 0;
}
.falcon .falcon-footer-brand__logo {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
color: var(--falcon-white);
text-decoration: none;
}
.falcon-footer-brand__image {
display: block;
width: 48px;
height: 48px;
border-radius: 10px;
object-fit: cover;
}
.falcon-footer-brand__name {
font-family: var(--falcon-font);
font-size: 20px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;
}
.falcon .falcon-footer-col__heading {
margin: 0;
padding: 0;
color: var(--falcon-white);
font-family: var(--falcon-font);
font-size: 16px;
font-weight: 600;
line-height: 1.3;
}
.falcon-footer-contact {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.falcon .falcon-footer-contact__link {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--falcon-white);
font-family: var(--falcon-font);
font-size: 16px;
font-weight: 500;
line-height: 1.3;
text-decoration: none;
word-break: break-word;
}
.falcon-footer-contact__icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
transition: background-color 0.2s ease;
}
.falcon-footer-contact__icon svg {
width: 18px;
height: 18px;
}
.falcon .falcon-footer-contact__link:hover {
color: var(--falcon-white);
text-decoration: underline;
text-underline-offset: 3px;
}
.falcon .falcon-footer-contact__link:hover .falcon-footer-contact__icon {
background: var(--falcon-brand);
}
/* Social icons. */
.falcon-footer-social {
margin-top: 6px;
}
.falcon-footer-social__list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.falcon .falcon-footer-social__link {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: var(--falcon-white);
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.falcon .falcon-footer-social__link:hover {
border-color: var(--falcon-white);
background: var(--falcon-white);
color: #111c4e;
}
.falcon-footer-social__link svg {
display: block;
width: 16px;
height: 16px;
fill: currentColor;
}
/* Footer menus (Quick Links, Help). */
.falcon-footer-menu,
.falcon-footer-menu li {
margin: 0;
padding: 0;
list-style: none;
}
.falcon-footer-menu {
display: flex;
flex-direction: column;
gap: 12px;
}
.falcon .falcon-footer-col .falcon-footer-menu a {
color: rgba(255, 255, 255, 0.78);
font-family: var(--falcon-font);
font-size: 15px;
font-weight: 400;
line-height: 1.4;
text-decoration: none;
transition: color 0.2s ease;
}
.falcon .falcon-footer-col .falcon-footer-menu a:hover,
.falcon .falcon-footer-col .falcon-footer-menu a:focus-visible,
.falcon .falcon-footer-col .falcon-footer-menu .current-menu-item > a {
color: var(--falcon-white);
}
.falcon .falcon-footer-col .falcon-footer-menu a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.falcon .falcon-site-footer a:focus-visible {
outline: 2px solid var(--falcon-white);
outline-offset: 3px;
border-radius: 4px;
}
/* Copyright bar. */
.falcon-footer-bottom {
padding: 0 20px;
background-color: #0c1438;
}
.falcon-footer-bottom__inner {
max-width: min(100%, var(--falcon-width));
margin: 0 auto;
padding: 20px 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.falcon-footer-bottom__grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 12px 24px;
}
.falcon .falcon-footer-bottom__text {
margin: 0;
padding: 0;
color: rgba(255, 255, 255, 0.65);
font-family: var(--falcon-font);
font-size: 14px;
font-weight: 400;
line-height: 1.4;
}
.falcon .falcon-footer-bottom .falcon-footer-bottom__text a {
color: inherit;
text-decoration: none;
}
.falcon .falcon-footer-bottom .falcon-footer-bottom__text a:hover {
color: var(--falcon-white);
}
@media (max-width: 1024px) {
.falcon-footer-main__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px;
}
.falcon-footer-brand {
grid-column: 1 / -1;
}
}
@media (max-width: 767px) {
.falcon-footer-main__inner {
padding: 48px 0 40px;
}
.falcon-footer-main__grid {
gap: 36px 24px;
}
.falcon-footer-bottom__grid {
flex-direction: column;
align-items: flex-start;
}
}
/* 12-mega-menu.css */
/* Browse Catalog panel (desktop): full width under the header with the eight catalogue columns,
opening with a short slide and a staggered reveal (10-header.js adds .is-open). */
/* The page under the header dims while the panel is open. */
.falcon-mega__backdrop {
position: fixed;
inset: var(--falcon-mega-top, 0) 0 0 0;
z-index: 2147483610;
background: rgba(14, 16, 26, 0.32);
opacity: 0;
transition: opacity 0.25s ease;
}
.falcon-mega__panel {
position: absolute;
left: 0;
right: 0;
z-index: 2147483620;
display: flex;
flex-direction: column;
min-width: 0;
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.falcon-mega__panel[hidden],
.falcon-mega__backdrop[hidden] {
display: none;
}
.falcon-mega.is-open .falcon-mega__panel {
opacity: 1;
transform: none;
pointer-events: auto;
}
.falcon-mega.is-open .falcon-mega__backdrop {
opacity: 1;
}
.falcon-mega__content {
position: relative;
margin-top: 31px;
overflow: hidden;
border-top: 1px solid #e6eaf0;
border-bottom: 1px solid #e6eaf0;
background: #fff;
box-shadow: 0 30px 60px -30px rgba(27, 29, 40, 0.35);
}
/* The faint eagle on the right. */
.falcon-mega__content::before {
content: "";
position: absolute;
top: 50%;
right: 3%;
width: 420px;
height: 420px;
background: url(../images/mega-menu-eagle.svg) no-repeat center / contain;
opacity: 0.3;
transform: translateY(-50%);
pointer-events: none;
}
.falcon-mega__inner {
position: relative;
max-width: min(calc(100% - 80px), 1400px);
margin: 0 auto;
padding: 34px 0 40px;
}
.falcon-mega__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin: 0 8px 18px;
padding-bottom: 18px;
border-bottom: 1px solid #eef1f5;
}
.falcon .falcon-mega__title {
margin: 0;
color: var(--falcon-dark);
font-family: var(--falcon-font);
font-size: 20px;
font-weight: 600;
line-height: 1.3;
}
.falcon .falcon-mega__all {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 9px 12px 9px 16px;
border-radius: 99px;
background: var(--falcon-bg-light);
color: var(--falcon-brand);
font-family: var(--falcon-font);
font-size: 14px;
font-weight: 500;
transition: background-color 0.2s ease, color 0.2s ease;
}
.falcon .falcon-mega__all:hover {
background: var(--falcon-brand);
color: #fff;
}
.falcon-mega__all svg {
width: 16px;
height: 16px;
transition: transform 0.25s ease;
}
.falcon-mega__all:hover svg {
transform: translateX(3px);
}
/* The catalogue columns, restyled for the panel only (the /browse/ page keeps its own look). */
.falcon-mega .falcon-shop-menu__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
}
.falcon-mega .falcon-shop-menu__column {
gap: 10px;
padding: 16px 16px 14px;
border-radius: 16px;
opacity: 0;
transform: translateY(10px);
transition: background-color 0.2s ease, opacity 0.3s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: 0s, var(--falcon-mega-delay, 0s), var(--falcon-mega-delay, 0s);
}
.falcon-mega.is-open .falcon-shop-menu__column {
opacity: 1;
transform: none;
}
.falcon-mega .falcon-shop-menu__column:nth-child(2) { --falcon-mega-delay: 0.03s; }
.falcon-mega .falcon-shop-menu__column:nth-child(3) { --falcon-mega-delay: 0.06s; }
.falcon-mega .falcon-shop-menu__column:nth-child(4) { --falcon-mega-delay: 0.09s; }
.falcon-mega .falcon-shop-menu__column:nth-child(5) { --falcon-mega-delay: 0.12s; }
.falcon-mega .falcon-shop-menu__column:nth-child(6) { --falcon-mega-delay: 0.15s; }
.falcon-mega .falcon-shop-menu__column:nth-child(7) { --falcon-mega-delay: 0.18s; }
.falcon-mega .falcon-shop-menu__column:nth-child(8) { --falcon-mega-delay: 0.21s; }
.falcon-mega .falcon-shop-menu__column:hover {
background: #f6f8fc;
}
.falcon-mega .falcon-shop-menu__heading {
--falcon-list-icon: 20px;
gap: 12px;
color: var(--falcon-dark);
font-size: 16px;
}
.falcon-mega .falcon-shop-menu__heading--small-icon {
--falcon-list-icon: 18px;
}
.falcon-mega .falcon-shop-menu__icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 12px;
background: #edf0fb;
transition: background-color 0.25s ease;
}
.falcon-mega .falcon-shop-menu__icon svg {
margin: 0;
transition: fill 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.falcon-mega .falcon-shop-menu__column:hover .falcon-shop-menu__icon {
background: var(--falcon-brand);
}
.falcon-mega .falcon-shop-menu__column:hover .falcon-shop-menu__icon svg {
fill: #fff;
transform: scale(1.08);
}
/* Some catalogue icons colour their paths directly. */
.falcon-mega .falcon-shop-menu__icon svg [fill] {
transition: fill 0.25s ease;
}
.falcon-mega .falcon-shop-menu__column:hover .falcon-shop-menu__icon svg [fill] {
fill: #fff;
}
.falcon-mega .falcon-shop-menu__heading-text {
padding: 0;
}
.falcon-mega .falcon-shop-menu__links {
padding-left: 52px;
}
.falcon-mega .falcon-shop-menu .falcon-shop-menu__links li {
padding: 4px 0;
}
.falcon-mega .falcon-shop-menu .falcon-shop-menu__links a {
color: #4a4f60;
font-size: 14.5px;
line-height: 20px;
}
.falcon-mega .falcon-shop-menu .falcon-shop-menu__links a:hover,
.falcon-mega .falcon-shop-menu .falcon-shop-menu__links a:focus-visible {
color: var(--falcon-brand);
}
/* Narrower desktops: less side margin and column padding so every link stays on one line. */
@media (max-width: 1380px) {
.falcon-mega__inner {
max-width: calc(100% - 48px);
}
.falcon-mega .falcon-shop-menu__column {
padding-right: 8px;
padding-left: 10px;
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-mega__panel,
.falcon-mega .falcon-shop-menu__column {
transform: none !important;
transition-property: opacity, background-color, color;
}
}
/* 13-mobile-menu.css */
/* Mobile and tablet menu: full screen, links on the left and centred top to bottom
(template-parts/header/mobile-bar.php, 10-header.js adds .is-open). */
.falcon-mobile-nav__overlay {
position: fixed;
inset: 0;
z-index: 2147483630;
display: flex;
flex-direction: column;
height: 100dvh;
background: #fff;
opacity: 0;
transition: opacity 0.25s ease;
}
.falcon-mobile-nav__overlay[hidden] {
display: none;
}
.falcon-mobile-nav__overlay.is-open {
opacity: 1;
}
html.falcon-menu-open {
overflow: hidden;
}
/* Logo and close button, where the header's logo and menu button sit. */
.falcon-mobile-nav__bar {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
padding: 20px;
border-bottom: 1px solid #eef1f5;
}
.falcon-mobile-nav .falcon-mobile-nav__close {
display: grid;
place-items: center;
width: 46px;
height: 46px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--falcon-bg-light);
color: var(--falcon-brand);
cursor: pointer;
transform: rotate(-90deg) scale(0.6);
transition: background-color 0.2s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.falcon-mobile-nav__overlay.is-open .falcon-mobile-nav__close {
transform: none;
}
.falcon-mobile-nav .falcon-mobile-nav__close:hover {
background: var(--falcon-bg-blue);
}
.falcon-mobile-nav__close svg {
width: 24px;
height: 24px;
}
/* The links: left aligned, the lists centred in the space between the bar and the contact details.
margin: auto keeps a long list scrollable from its first link on short screens. */
.falcon-mobile-nav__body {
display: flex;
flex: 1;
flex-direction: column;
min-height: 0;
padding: 24px 32px;
overflow-y: auto;
overscroll-behavior: contain;
}
.falcon-mobile-nav__menu,
.falcon-mobile-nav__menu li {
margin: 0;
padding: 0;
list-style: none;
}
.falcon-mobile-nav__links {
margin-block: auto;
}
.falcon-mobile-nav__menu {
display: flex;
flex-direction: column;
gap: 2px;
}
.falcon-mobile-nav__menu li {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.falcon-mobile-nav__overlay.is-open .falcon-mobile-nav__menu li {
opacity: 1;
transform: none;
}
.falcon-mobile-nav__menu li:nth-child(1) { transition-delay: 0.06s; }
.falcon-mobile-nav__menu li:nth-child(2) { transition-delay: 0.1s; }
.falcon-mobile-nav__menu li:nth-child(3) { transition-delay: 0.14s; }
.falcon-mobile-nav__menu li:nth-child(4) { transition-delay: 0.18s; }
.falcon-mobile-nav__menu li:nth-child(5) { transition-delay: 0.22s; }
.falcon-mobile-nav__menu li:nth-child(6) { transition-delay: 0.26s; }
.falcon-mobile-nav__menu li:nth-child(7) { transition-delay: 0.3s; }
.falcon-mobile-nav__menu li:nth-child(8) { transition-delay: 0.34s; }
.falcon-mobile-nav__menu li:nth-child(n + 9) { transition-delay: 0.38s; }
.falcon-mobile-nav .falcon-mobile-nav__menu li {
display: flex;
align-items: center;
padding: 8px 0;
}
.falcon-mobile-nav .falcon-mobile-nav__menu a {
color: var(--falcon-dark);
font-family: var(--falcon-font);
font-size: clamp(24px, 6.4vw, 34px);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.15;
}
.falcon-mobile-nav .falcon-mobile-nav__menu a:hover,
.falcon-mobile-nav .falcon-mobile-nav__menu a:focus-visible {
color: var(--falcon-brand);
}
/* The page you are on: brand blue. */
.falcon-mobile-nav .falcon-mobile-nav__menu .current-menu-item > a,
.falcon-mobile-nav .falcon-mobile-nav__support-menu .current-menu-item > a {
color: var(--falcon-brand);
}
/* Shop by category: the catalogue's eight groups at the top, each opening to its links (the same
"Catalog - …" menus as the Browse Store panel), with Browse all for /browse/. */
.falcon-mobile-nav__shop {
margin: 0 -12px 22px;
padding: 14px 12px 8px;
border-radius: 20px;
background: var(--falcon-bg-light);
opacity: 0;
transform: translateY(14px);
transition: opacity 0.35s ease 0.04s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.04s;
}
.falcon-mobile-nav__overlay.is-open .falcon-mobile-nav__shop {
opacity: 1;
transform: none;
}
.falcon-mobile-nav__shop-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 4px 8px;
}
.falcon .falcon-mobile-nav__shop-title {
margin: 0;
color: var(--falcon-brand);
font-family: var(--falcon-font);
font-size: 19px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.2;
}
.falcon .falcon-mobile-nav__shop-all {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 7px 10px 7px 14px;
border-radius: 999px;
background: var(--falcon-brand);
color: #fff;
font-family: var(--falcon-font);
font-size: 14px;
font-weight: 600;
line-height: 1.2;
}
.falcon .falcon-mobile-nav__shop-all:hover {
background: var(--falcon-dark);
color: #fff;
}
.falcon-mobile-nav__shop-all svg {
width: 16px;
height: 16px;
}
.falcon-mobile-nav__cat + .falcon-mobile-nav__cat {
border-top: 1px solid #e3e7ef;
}
.falcon-mobile-nav__cat summary {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 4px;
color: var(--falcon-dark);
font-family: var(--falcon-font);
font-size: 16px;
font-weight: 600;
line-height: 1.25;
list-style: none;
cursor: pointer;
}
.falcon-mobile-nav__cat summary::-webkit-details-marker {
display: none;
}
.falcon-mobile-nav__cat-icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: #fff;
}
.falcon-mobile-nav__cat-icon svg {
width: 20px;
height: 20px;
fill: var(--falcon-brand);
}
.falcon-mobile-nav__cat-name {
flex: 1;
min-width: 0;
}
.falcon-mobile-nav__cat-chevron {
flex: 0 0 auto;
width: 20px;
height: 20px;
color: var(--falcon-lower-text);
transition: transform 0.25s ease;
}
.falcon-mobile-nav__cat[open] .falcon-mobile-nav__cat-chevron {
transform: rotate(180deg);
}
.falcon-mobile-nav__cat[open] summary {
color: var(--falcon-brand);
}
.falcon-mobile-nav__cat-links,
.falcon-mobile-nav__cat-links li {
margin: 0;
padding: 0;
list-style: none;
}
.falcon-mobile-nav__cat-links {
padding: 0 4px 10px 52px;
}
.falcon-mobile-nav .falcon-mobile-nav__cat-links a {
display: block;
padding: 7px 0;
color: var(--falcon-dark);
font-family: var(--falcon-font);
font-size: 15px;
font-weight: 500;
line-height: 1.3;
}
.falcon-mobile-nav .falcon-mobile-nav__cat-links a:hover,
.falcon-mobile-nav .falcon-mobile-nav__cat-links a:focus-visible,
.falcon-mobile-nav .falcon-mobile-nav__cat-links .current-menu-item > a {
color: var(--falcon-brand);
}
/* Support links: a smaller list of their own under the main links. */
.falcon-mobile-nav__support {
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid #eef1f5;
opacity: 0;
transition: opacity 0.4s ease 0.3s;
}
.falcon-mobile-nav__overlay.is-open .falcon-mobile-nav__support {
opacity: 1;
}
.falcon .falcon-mobile-nav__support-title {
margin: 0 0 8px;
color: var(--falcon-lower-text);
font-family: var(--falcon-font);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1.3;
text-transform: uppercase;
}
.falcon-mobile-nav__support-menu,
.falcon-mobile-nav__support-menu li {
margin: 0;
padding: 0;
list-style: none;
}
.falcon-mobile-nav .falcon-mobile-nav__support-menu a {
display: inline-block;
padding: 7px 0;
color: var(--falcon-dark);
font-family: var(--falcon-font);
font-size: 18px;
font-weight: 500;
line-height: 1.3;
}
.falcon-mobile-nav .falcon-mobile-nav__support-menu a:hover,
.falcon-mobile-nav .falcon-mobile-nav__support-menu a:focus-visible {
color: var(--falcon-brand);
}
/* Phone and email at the bottom. */
.falcon-mobile-nav__foot {
display: flex;
flex-shrink: 0;
flex-wrap: wrap;
gap: 6px 24px;
padding: 20px 32px calc(24px + env(safe-area-inset-bottom));
border-top: 1px solid #eef1f5;
opacity: 0;
transition: opacity 0.4s ease 0.3s;
}
.falcon-mobile-nav__overlay.is-open .falcon-mobile-nav__foot {
opacity: 1;
}
.falcon .falcon-mobile-nav__foot a {
color: var(--falcon-lower-text);
font-family: var(--falcon-font);
font-size: 15px;
}
.falcon .falcon-mobile-nav__foot a:hover {
color: var(--falcon-brand);
}
@media (prefers-reduced-motion: reduce) {
.falcon-mobile-nav__menu li,
.falcon-mobile-nav__shop,
.falcon-mobile-nav .falcon-mobile-nav__close {
transform: none !important;
transition-property: opacity, color, background-color;
transition-delay: 0s;
}
}
/* 14-language.css */
/*
* Language switcher in the top bar (template-parts/header/top-bar.php, 14-language.js). A pill trigger
* with the flag, the language name and a chevron; the panel opens over the page (absolute, z-index
* 9000 while open, under the side cart at 9998) so the top bar never changes height. GTranslate's own
* dropdown is on the page but hidden (.falcon-lang-engine); it does the translating.
*/
.falcon-lang {
position: relative;
font-family: var(--falcon-font);
}
.falcon-lang.is-open {
z-index: 9000;
}
/* Trigger. The doubled class beats the reset's button, :hover and :focus rules. */
.falcon-lang .falcon-lang__trigger,
.falcon-lang .falcon-lang__trigger:hover,
.falcon-lang .falcon-lang__trigger:focus {
display: inline-flex;
align-items: center;
gap: 8px;
height: 35px;
margin: 0;
padding: 0 11px 0 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
background-color: rgba(255, 255, 255, 0.06);
color: var(--falcon-white);
font-family: var(--falcon-font);
font-size: 14px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.falcon-lang .falcon-lang__trigger:hover,
.falcon-lang .falcon-lang__trigger[aria-expanded="true"] {
border-color: rgba(255, 255, 255, 0.42);
background-color: rgba(255, 255, 255, 0.13);
}
.falcon-lang .falcon-lang__trigger:focus-visible {
outline: 2px solid var(--falcon-white);
outline-offset: 2px;
}
/* Focus comes back to the trigger after a language is picked with the mouse or a tap; no ring then. */
.falcon-lang .falcon-lang__trigger[data-pointer-focus]:focus-visible {
outline: none;
}
.falcon-lang .falcon-lang__flag {
flex: none;
width: 20px;
max-width: none;
height: 15px;
border-radius: 3px;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.falcon-lang__chevron {
flex: none;
width: 12px;
height: 12px;
opacity: 0.75;
transition: transform 0.2s ease;
}
.falcon-lang__trigger[aria-expanded="true"] .falcon-lang__chevron {
transform: rotate(180deg);
}
/* Panel. No display rule here, so the reset's [hidden] keeps it out of the way when closed. */
.falcon-lang__panel {
position: absolute;
top: calc(100% + 10px);
right: var(--falcon-lang-shift, 0px);
width: 300px;
max-width: calc(100vw - 24px);
padding: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px;
background-color: #232634;
box-shadow: 0 24px 48px -12px rgba(10, 12, 20, 0.5), 0 8px 18px -8px rgba(10, 12, 20, 0.4);
color: var(--falcon-white);
text-align: left;
transform-origin: top right;
animation: falcon-lang-in 0.16s ease-out;
}
@keyframes falcon-lang-in {
from {
opacity: 0;
transform: translateY(-4px) scale(0.98);
}
}
.falcon-lang__search-wrap {
position: relative;
}
.falcon-lang__search-icon {
position: absolute;
top: 50%;
left: 12px;
width: 16px;
height: 16px;
margin-top: -8px;
color: rgba(255, 255, 255, 0.5);
pointer-events: none;
}
.falcon-lang .falcon-lang__search {
display: block;
width: 100%;
height: 40px;
margin: 0;
padding: 0 12px 0 36px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 9px;
background-color: rgba(255, 255, 255, 0.06);
box-shadow: none;
color: var(--falcon-white);
font-family: var(--falcon-font);
font-size: 14px;
line-height: normal;
outline: none;
transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.falcon-lang .falcon-lang__search::placeholder {
color: rgba(255, 255, 255, 0.5);
opacity: 1;
}
.falcon-lang .falcon-lang__search:focus {
border-color: #7088e8;
background-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 0 3px rgba(28, 51, 144, 0.6);
}
/* Full panel width under a hairline, so the scrollbar sits at the panel's edge. */
.falcon-lang .falcon-lang__list {
position: relative;
max-height: min(320px, 55vh);
margin: 8px -8px 0;
padding: 6px 8px 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
list-style: none;
scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
scrollbar-width: thin;
}
.falcon-lang__option {
display: flex;
align-items: center;
gap: 10px;
min-height: 40px;
margin: 0 0 2px;
padding: 8px 10px;
border-radius: 8px;
color: rgba(255, 255, 255, 0.88);
font-size: 14px;
line-height: 1.3;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.falcon-lang__option[hidden] {
display: none;
}
.falcon-lang__option.is-active {
background-color: rgba(255, 255, 255, 0.08);
color: var(--falcon-white);
}
.falcon-lang__option[aria-selected="true"] {
background-color: var(--falcon-brand);
color: var(--falcon-white);
font-weight: 600;
}
.falcon-lang__option[aria-selected="true"].is-active {
background-color: #2a46b4;
}
.falcon-lang__option-name,
.falcon-lang__option-native {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.falcon-lang__option-name {
flex: 0 1 auto;
}
.falcon-lang__option-native {
flex: 0 1 auto;
margin-left: auto;
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
font-weight: 400;
}
.falcon-lang__option[aria-selected="true"] .falcon-lang__option-native {
color: rgba(255, 255, 255, 0.78);
}
.falcon-lang__check {
flex: none;
width: 14px;
height: 14px;
margin-left: auto;
}
.falcon-lang__option-native + .falcon-lang__check {
margin-left: 0;
}
.falcon-lang__option:not([aria-selected="true"]) .falcon-lang__check {
display: none;
}
.falcon-lang__empty {
margin: 0;
padding: 14px 10px 10px;
color: rgba(255, 255, 255, 0.55);
font-size: 14px;
line-height: 1.4;
text-align: center;
}
/* GTranslate's own dropdown: the engine only, never shown. */
.falcon-lang-engine {
display: none !important;
}
@media (max-width: 1024px) {
.falcon-lang .falcon-lang__trigger,
.falcon-lang .falcon-lang__trigger:hover,
.falcon-lang .falcon-lang__trigger:focus {
height: 32px;
}
}
@media (max-width: 767px) {
.falcon-lang__panel {
width: 320px;
}
/* 16px stops iOS zooming in on focus; 44px rows are easier to tap. */
.falcon-lang .falcon-lang__search {
height: 44px;
font-size: 16px;
}
.falcon-lang__option {
min-height: 44px;
font-size: 15px;
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-lang__panel {
animation: none;
}
.falcon-lang .falcon-lang__trigger,
.falcon-lang .falcon-lang__trigger:hover,
.falcon-lang .falcon-lang__trigger:focus,
.falcon-lang .falcon-lang__search,
.falcon-lang__chevron {
transition: none;
}
}
/* 20-button.css */
/* Pill button used by the page sections (Elementor's button widget with the kit's primary and pale blue colours).
Its motion (timing, hover lift, press and focus ring) is shared with every other button in 91-buttons.css. */
.falcon .falcon-button {
display: inline-block;
padding: 12px 24px;
border-radius: 999px;
background-color: var(--falcon-brand);
color: var(--falcon-white);
fill: var(--falcon-white);
font-family: var(--falcon-font);
font-size: 15px;
font-weight: 400;
line-height: 1;
text-align: center;
}
.falcon .falcon-button:hover,
.falcon .falcon-button:focus {
background-color: var(--falcon-bg-blue);
color: var(--falcon-brand);
}
.falcon .falcon-button--light {
background-color: var(--falcon-bg-blue);
color: var(--falcon-brand);
}
.falcon .falcon-button--light:hover,
.falcon .falcon-button--light:focus {
background-color: var(--falcon-brand);
color: var(--falcon-bg-blue);
}
/* 20-feature-cards.css */
/* Feature Cards: two-column grid of light cards with faint curved lines, with the standard section
spacing (on Installation it collapses into the 80px of the sections either side, as before). */
.falcon-feature-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
max-width: var(--falcon-width);
margin: 80px auto;
}
/* The first two rows share one height, as in the Elementor grid (two 1fr rows). Set only when the
cards fill two rows, so no empty row is left. */
.falcon-feature-cards--paired-rows {
grid-template-rows: repeat(2, 1fr);
}
.falcon-feature-cards__card {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
min-width: 0;
padding: 40px;
border-radius: 10px;
background-color: var(--falcon-bg-light);
}
.falcon-feature-cards__card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: url(../images/curve-line.svg) center / cover;
opacity: 0.2;
}
.falcon-feature-cards__card > * {
position: relative;
}
.falcon-feature-cards__icon {
align-self: flex-start;
padding: 9px 9px 2px;
border-radius: 10px;
background-color: var(--falcon-white);
box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.24);
}
.falcon-feature-cards__icon img {
display: inline-block;
width: 40px;
height: 40px;
vertical-align: baseline;
}
.falcon .falcon-feature-cards__heading {
margin: 0;
font-weight: 400;
text-transform: capitalize;
}
.falcon-feature-cards__text {
margin-bottom: -15px;
}
.falcon-feature-cards__card .falcon-button {
align-self: flex-start;
}
@media (max-width: 767px) {
.falcon-feature-cards {
grid-template-columns: 1fr;
grid-template-rows: none;
margin: 40px 0;
padding: 0 15px;
}
.falcon-feature-cards--paired-rows-phone {
grid-template-rows: repeat(2, 1fr);
}
.falcon-feature-cards--full {
padding: 0;
}
}
/* 20-home-hero.css */
/* Home Hero: a light panel, text on the left, the product line-up on the right. */
.falcon-home-hero {
padding: 24px 30px 0;
}
.falcon-home-hero:last-child {
margin-bottom: 80px;
}
.falcon-home-hero__panel {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 40px;
align-items: center;
min-height: min(720px, calc(100svh - 220px));
padding: 72px max(48px, calc((100% - var(--falcon-width)) / 2));
overflow: hidden;
isolation: isolate;
border-radius: 32px;
border: 1px solid #e6eaf0;
background:
radial-gradient(900px 520px at 80% 40%, rgba(120, 150, 255, 0.16), transparent 65%),
linear-gradient(180deg, #fff 0%, var(--falcon-bg-light) 100%);
color: var(--falcon-text);
}
/* Faint curved lines across the panel. */
.falcon-home-hero__panel::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: url("../images/curve-line-2.svg") center / cover;
opacity: 0.35;
}
.falcon-home-hero__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 26px;
}
.falcon .falcon-home-hero__heading {
margin: 0;
color: var(--falcon-brand);
font-size: clamp(44px, 4.3vw, 62px);
font-weight: 400;
line-height: 1.02;
letter-spacing: -0.03em;
text-wrap: balance;
}
.falcon .falcon-home-hero__heading b {
display: block;
font-weight: 700;
color: var(--falcon-brand);
}
.falcon-home-hero__intro {
max-width: 46ch;
margin: 0;
color: #3d4152;
font-size: 18px;
line-height: 1.65;
}
.falcon-home-hero__buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.falcon .falcon-home-hero__rating {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px 8px 12px;
border-radius: 999px;
border: 1px solid #e6eaf0;
background: #fff;
color: var(--falcon-lower-text);
font-size: 14px;
text-decoration: none;
transition: background-color 0.25s ease;
}
.falcon .falcon-home-hero__rating:hover {
border-color: #c9d2f1;
color: var(--falcon-brand);
}
.falcon-home-hero__rating b {
color: var(--falcon-dark);
font-weight: 600;
}
.falcon-home-hero__google,
.falcon-home-hero__rating-short {
display: none;
}
.falcon-home-hero__google svg {
width: 16px;
height: 16px;
}
.falcon-home-hero__stars {
display: inline-flex;
gap: 2px;
color: #f5b324;
}
.falcon-home-hero__stars .falcon-icon {
width: 14px;
height: 14px;
fill: currentColor;
}
/* Product cards: the first large across the top, three below. White cards suit product photos
shot on white. */
.falcon-home-hero__cards {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.falcon-home-hero__cards::before {
content: "";
position: absolute;
inset: 10% 5%;
z-index: -1;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(120, 150, 255, 0.3), transparent);
filter: blur(24px);
}
.falcon-home-hero__card {
min-width: 0;
animation: falcon-hero-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.falcon-home-hero__card:nth-child(2) {
animation-delay: 0.2s;
}
.falcon-home-hero__card:nth-child(3) {
animation-delay: 0.28s;
}
.falcon-home-hero__card:nth-child(4) {
animation-delay: 0.36s;
}
.falcon .falcon-home-hero__card a {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 12px 12px 14px;
border: 1px solid #e6eaf0;
border-radius: 22px;
background: #fff;
box-shadow: 0 22px 40px -28px rgba(28, 51, 144, 0.45);
color: var(--falcon-dark);
text-decoration: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.falcon .falcon-home-hero__card a:hover {
border-color: #c9d2f1;
box-shadow: 0 28px 48px -28px rgba(28, 51, 144, 0.55);
color: var(--falcon-dark);
transform: translateY(-4px);
}
.falcon-home-hero__card-media {
display: block;
aspect-ratio: 1;
margin-bottom: 10px;
}
.falcon .falcon-home-hero__card-image {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.falcon-home-hero__card a:hover .falcon-home-hero__card-image {
transform: scale(1.04);
}
.falcon-home-hero__card-body {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 4px;
}
.falcon-home-hero__card-name {
overflow: hidden;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
.falcon-home-hero__card-price {
color: var(--falcon-brand);
font-size: 13px;
}
.falcon-home-hero__card-price .woocommerce-Price-amount {
font-weight: 700;
}
.falcon-home-hero__card-price del {
display: none;
}
.falcon-home-hero__card-go {
display: none;
}
/* The first card: wide, photo on the left, name, price and an arrow on the right. */
.falcon-home-hero__card--main {
grid-column: 1 / -1;
}
.falcon .falcon-home-hero__card--main a {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
align-items: center;
gap: 8px 20px;
padding: 14px 24px 14px 14px;
}
.falcon-home-hero__card--main .falcon-home-hero__card-media {
aspect-ratio: 4 / 3;
margin: 0;
}
.falcon-home-hero__card--main .falcon-home-hero__card-body {
gap: 6px;
}
.falcon-home-hero__card--main .falcon-home-hero__card-name {
font-size: 20px;
white-space: normal;
}
.falcon-home-hero__card--main .falcon-home-hero__card-price {
font-size: 15px;
}
.falcon-home-hero__card--main .falcon-home-hero__card-go {
position: absolute;
right: 20px;
bottom: 18px;
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--falcon-brand);
color: #fff;
transition: transform 0.3s ease;
}
.falcon-home-hero__card--main .falcon-home-hero__card-go .falcon-icon {
width: 18px;
height: 18px;
fill: currentColor;
}
.falcon-home-hero__card--main a:hover .falcon-home-hero__card-go {
transform: translateX(3px);
}
/* Arrival: the text rises in, one line after another, then the product cards. */
.falcon-home-hero__content > * {
animation: falcon-hero-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.falcon-home-hero__content > :nth-child(2) {
animation-delay: 0.08s;
}
.falcon-home-hero__content > :nth-child(3) {
animation-delay: 0.16s;
}
.falcon-home-hero__content > :nth-child(4) {
animation-delay: 0.24s;
}
@keyframes falcon-hero-in {
from {
opacity: 0;
transform: translateY(24px);
}
}
@media (max-width: 1024px) {
.falcon-home-hero {
padding: 16px 20px 0;
}
.falcon-home-hero__panel {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
min-height: 0;
padding: 56px 40px 40px;
text-align: center;
}
.falcon-home-hero__content {
align-items: center;
}
.falcon-home-hero__buttons {
justify-content: center;
}
.falcon-home-hero__cards {
width: 100%;
max-width: 680px;
margin: 0 auto;
text-align: left;
}
}
@media (max-width: 767px) {
.falcon-home-hero {
padding: 12px 12px 0;
}
/* One line on phones: the Google logo, the stars, then "Excellent" and the review count. */
.falcon .falcon-home-hero__rating {
gap: 8px;
padding: 8px 14px 8px 10px;
font-size: 13px;
white-space: nowrap;
}
.falcon-home-hero__google {
display: flex;
}
.falcon-home-hero__rating-full {
display: none;
}
.falcon-home-hero__rating-short {
display: inline;
}
.falcon-home-hero__stars .falcon-icon {
width: 13px;
height: 13px;
}
.falcon-home-hero:last-child {
margin-bottom: 40px;
}
.falcon-home-hero__panel {
gap: 24px;
padding: 40px 20px 28px;
border-radius: 24px;
}
.falcon-home-hero__content {
gap: 20px;
}
.falcon .falcon-home-hero__heading {
font-size: 40px;
}
.falcon-home-hero__intro {
font-size: 16px;
}
.falcon-home-hero__buttons {
justify-content: center;
width: 100%;
}
.falcon-home-hero__cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.falcon-home-hero__card:nth-child(4) {
display: none;
}
.falcon .falcon-home-hero__card--main a {
grid-template-columns: minmax(0, 1fr);
padding: 12px 12px 16px;
text-align: left;
}
.falcon-home-hero__card--main .falcon-home-hero__card-name {
padding-right: 48px;
font-size: 17px;
}
.falcon-home-hero__card--main .falcon-home-hero__card-go {
right: 14px;
bottom: 14px;
width: 38px;
height: 38px;
}
}
/* The smallest phones: no room for the Google logo beside the stars. */
@media (max-width: 359px) {
.falcon .falcon-home-hero__rating {
font-size: 12.5px;
}
.falcon-home-hero__google {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-home-hero__card,
.falcon-home-hero__content > * {
animation: none;
}
.falcon .falcon-home-hero__card a:hover,
.falcon-home-hero__card a:hover .falcon-home-hero__card-image {
transform: none;
}
}
/* 20-image-carousel.css */
/* Image Carousel: slides in a row, 20px apart, with dots underneath (Elementor's image carousel). */
.falcon-image-carousel {
--falcon-image-carousel-per-view: 3;
--falcon-image-carousel-index: 0;
--falcon-image-carousel-drag: 0px;
max-width: var(--falcon-width);
margin: 80px auto;
}
.falcon-image-carousel__viewport {
position: relative;
overflow: hidden;
padding-bottom: 30px;
touch-action: pan-y;
}
.falcon-image-carousel__track {
display: flex;
align-items: flex-start;
transform: translateX(calc((100% + 20px) / var(--falcon-image-carousel-per-view) * var(--falcon-image-carousel-index) * -1 + var(--falcon-image-carousel-drag)));
transition: transform 0.5s ease;
}
.falcon-image-carousel__slide {
flex-shrink: 0;
width: calc((100% - 20px * (var(--falcon-image-carousel-per-view) - 1)) / var(--falcon-image-carousel-per-view));
margin-right: 20px;
text-align: center;
}
.falcon-image-carousel__slide img {
border-radius: 10px;
user-select: none;
}
.falcon-image-carousel__dots {
position: absolute;
bottom: 5px;
left: 0;
z-index: 10;
width: 100%;
text-align: center;
}
.falcon .falcon-image-carousel__dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 6px;
padding: 0;
border: 0;
border-radius: 50%;
vertical-align: baseline;
transition: none;
}
.falcon .falcon-image-carousel__dot,
.falcon .falcon-image-carousel__dot:hover,
.falcon .falcon-image-carousel__dot:focus {
background-color: var(--falcon-bg-blue);
}
.falcon .falcon-image-carousel__dot.is-active {
background-color: var(--falcon-brand);
}
/* Slides per view switch at the widths Elementor's carousel used: 3 from 1024px, 2 from 767px. */
@media (max-width: 1023px) {
.falcon-image-carousel {
--falcon-image-carousel-per-view: 2;
}
}
@media (max-width: 766px) {
.falcon-image-carousel {
--falcon-image-carousel-per-view: 1;
}
}
@media (max-width: 767px) {
.falcon-image-carousel {
margin: 40px 0;
padding: 0 15px;
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-image-carousel__track {
transition: none;
}
}
/* 20-media-text.css */
/* Media and Text: image or video beside a label, heading, text and button, in two equal columns.
The media has rounded corners, a soft navy-tinted shadow and a pale brand-blue panel offset behind
it towards the text, so each section reads as one piece. */
.falcon-media-text {
--falcon-media-radius: 20px;
--falcon-media-offset: 24px;
margin: 104px 0;
padding-inline: 20px;
}
.falcon-media-text__inner {
display: flex;
align-items: center;
gap: 40px 64px;
max-width: var(--falcon-width);
margin-inline: auto;
isolation: isolate;
}
.falcon-media-text--media-right .falcon-media-text__inner {
flex-direction: row-reverse;
}
.falcon-media-text__media,
.falcon-media-text__body {
width: 100%;
min-width: 0;
}
.falcon-media-text__media {
position: relative;
display: flex;
flex-direction: column;
align-self: stretch;
justify-content: center;
border-radius: var(--falcon-media-radius);
box-shadow: 0 28px 50px -30px rgba(28, 51, 144, 0.45), 0 2px 6px rgba(27, 29, 40, 0.06);
}
.falcon-media-text__media::before {
content: "";
position: absolute;
inset: var(--falcon-media-offset) calc(-1 * var(--falcon-media-offset)) calc(-1 * var(--falcon-media-offset)) var(--falcon-media-offset);
z-index: -1;
border-radius: calc(var(--falcon-media-radius) + 4px);
background:
radial-gradient(circle, rgba(28, 51, 144, 0.16) 1.2px, transparent 1.6px) 0 0 / 16px 16px,
linear-gradient(135deg, #dfe5fb 0%, #eef1fb 100%);
}
.falcon-media-text--media-right .falcon-media-text__media::before {
inset: var(--falcon-media-offset) var(--falcon-media-offset) calc(-1 * var(--falcon-media-offset)) calc(-1 * var(--falcon-media-offset));
}
/* Image panels: the image is the panel's background (as Elementor drew it, so the crop and
scaling match exactly), at least 450px tall (240px on phones) and growing with the text. */
.falcon-media-text__media--image {
min-height: 450px;
background-position: center;
background-size: cover;
}
.falcon-media-text__body {
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
padding-block: 12px;
}
.falcon .falcon-media-text__eyebrow {
align-self: flex-start;
margin: 0;
padding: 8px 14px;
border: 1px solid #d8def6;
border-radius: 999px;
background-color: #eef1fb;
color: var(--falcon-brand);
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.falcon .falcon-media-text__heading {
margin: 0;
font-size: 36px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.015em;
text-transform: capitalize;
text-wrap: balance;
}
.falcon-media-text__text {
max-width: 62ch;
margin-bottom: -15px;
color: #3d4152;
font-size: 16px;
line-height: 1.7;
}
.falcon-media-text__body .falcon-button {
align-self: flex-start;
margin-top: 6px;
}
@media (max-width: 1024px) {
.falcon-media-text__inner {
gap: 32px 40px;
}
.falcon .falcon-media-text__heading {
font-size: 30px;
}
}
@media (max-width: 767px) {
.falcon-media-text {
--falcon-media-radius: 16px;
--falcon-media-offset: 10px;
margin: 56px 0;
padding: 0 15px;
}
.falcon-media-text .falcon-media-text__inner {
flex-direction: column;
gap: 36px;
}
.falcon-media-text--mobile-below .falcon-media-text__inner {
flex-direction: column-reverse;
}
/* Stacked, the panel sits under the media on whichever side has room. */
.falcon-media-text .falcon-media-text__media::before {
inset: var(--falcon-media-offset) calc(-1 * var(--falcon-media-offset) / 2) calc(-1 * var(--falcon-media-offset)) calc(-1 * var(--falcon-media-offset) / 2);
}
.falcon-media-text__media--image {
min-height: 240px;
}
.falcon-media-text__body {
gap: 14px;
padding-block: 0;
}
.falcon .falcon-media-text__heading {
font-size: 26px;
}
.falcon-media-text__text {
font-size: 15px;
}
}
/* Video cover: 4:3 image with a white play button over a soft navy shade, opening the pop-up player.
White reads on dark covers (one is the navy Falcon logo plate) and the shade lifts it on light ones. */
.falcon .falcon-video {
position: relative;
display: block;
width: 100%;
aspect-ratio: 4 / 3;
padding: 0;
overflow: hidden;
border: 0;
border-radius: var(--falcon-media-radius, 10px);
background: none;
cursor: pointer;
transform: translateZ(0);
}
.falcon .falcon-video:hover,
.falcon .falcon-video:focus {
background: none;
}
.falcon .falcon-video:focus-visible {
outline: 3px solid var(--falcon-brand);
outline-offset: 4px;
}
.falcon-video__cover {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.falcon-video:hover .falcon-video__cover {
transform: scale(1.035);
}
.falcon-video::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: radial-gradient(circle at center, rgba(17, 28, 78, 0.42) 0, rgba(17, 28, 78, 0.12) 45%, rgba(17, 28, 78, 0) 75%);
pointer-events: none;
}
.falcon-video__play {
position: absolute;
top: 50%;
left: 50%;
display: grid;
place-items: center;
z-index: 2;
width: 84px;
height: 84px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.3), 0 16px 34px -8px rgba(17, 28, 78, 0.6);
transform: translate(-50%, -50%);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}
/* A soft ring that grows out of the button, so it reads as something to press. */
.falcon-video__play::after {
content: "";
position: absolute;
inset: -8px;
border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 50%;
animation: falcon-video-ring 2.4s ease-out infinite;
pointer-events: none;
}
.falcon-video:hover .falcon-video__play {
background: var(--falcon-brand);
transform: translate(-50%, -50%) scale(1.06);
}
.falcon-video__play .falcon-icon {
width: 26px;
height: 26px;
margin-left: 4px;
fill: var(--falcon-brand);
transition: fill 0.2s ease;
}
.falcon-video:hover .falcon-video__play .falcon-icon {
fill: #fff;
}
@keyframes falcon-video-ring {
0% {
opacity: 0.8;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.45);
}
}
@media (max-width: 767px) {
.falcon-video__play {
width: 68px;
height: 68px;
}
.falcon-video__play .falcon-icon {
width: 22px;
height: 22px;
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-video__play::after {
animation: none;
opacity: 0;
}
.falcon-video__cover,
.falcon-video__play {
transition: none;
}
}
/* Pop-up player, sized as Elementor's lightbox. */
.falcon-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.8);
text-align: center;
user-select: none;
}
.falcon .falcon-lightbox__close {
position: absolute;
top: 0;
right: 0.75em;
z-index: 2;
display: flex;
margin-top: 13px;
padding: 0.25em;
border: 0;
border-radius: 0;
background: none;
color: rgba(238, 238, 238, 0.9);
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: all 0.3s;
}
/* The close button takes focus when the player opens; only hovering brightens it, as before. */
.falcon .falcon-lightbox__close:focus {
background: none;
color: rgba(238, 238, 238, 0.9);
}
.falcon .falcon-lightbox__close:hover {
background: none;
color: #fff;
}
.falcon-lightbox__close .falcon-icon {
width: 1em;
height: 1em;
fill: currentColor;
}
.falcon-lightbox__video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
}
.falcon-lightbox__frame {
width: 85vw;
max-height: 85vh;
margin: auto;
}
.falcon-lightbox__frame iframe,
.falcon-lightbox__frame video {
width: 100%;
height: auto;
max-height: 90vh;
aspect-ratio: 4 / 3;
border: 0;
background-color: #000;
}
@media (max-width: 1024px) {
.falcon-lightbox__frame {
width: 95vw;
max-height: 95vh;
}
}
/* 20-message.css */
/* Message: centred icon, heading, text and button, at least half the screen tall. On phones the
14px side padding keeps a long heading off the edges and still fits the 362px text column. */
.falcon-message {
display: flex;
min-height: 50vh;
}
.falcon-message__inner {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
width: 100%;
max-width: var(--falcon-width);
margin-inline: auto;
text-align: center;
}
.falcon .falcon-message__heading {
margin: 0;
font-weight: 400;
line-height: 1;
}
.falcon-message__text {
align-self: center;
width: 362px;
max-width: 100%;
}
.falcon-message__inner .falcon-button {
align-self: center;
}
.falcon-message__icon img {
display: inline-block;
width: 84px;
height: 84px;
vertical-align: baseline;
}
@media (max-width: 767px) {
.falcon-message {
min-height: 45vh;
padding: 0 14px;
}
}
/* 20-page-hero.css */
/* Page Hero: light panel with faint curved lines, page heading and intro. */
.falcon-page-hero {
padding: 30px 30px 0;
}
.falcon-page-hero__panel {
position: relative;
display: flex;
flex-direction: column;
min-height: 25vh;
padding: 0 30px;
border-radius: 15px;
background-color: var(--falcon-bg-light);
}
.falcon-page-hero__panel::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: url(../images/curve-line-1.svg) center / cover;
opacity: 0.25;
}
.falcon-page-hero__inner {
position: relative;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: center;
gap: 20px;
width: 100%;
max-width: var(--falcon-width);
margin-inline: auto;
padding: 30px 0;
}
.falcon .falcon-page-hero__heading {
margin: 0;
font-weight: 400;
line-height: 1;
}
/* The paragraph keeps its 0.9rem margin, pulled back by 15px as in the Elementor text widget. */
.falcon-page-hero__intro {
margin: 0 0 calc(0.9rem - 15px);
}
.falcon-page-hero--full_spaced .falcon-page-hero__intro {
margin-bottom: 0.9rem;
}
/* The hero leaves the gap below to the next section; as the last section it keeps the standard
gap above the footer. */
.falcon-page-hero:last-child {
margin-bottom: 80px;
}
@media (max-width: 767px) {
.falcon-page-hero {
padding: 15px;
}
.falcon-page-hero:last-child {
margin-bottom: 40px;
}
.falcon-page-hero--full,
.falcon-page-hero--full_spaced {
padding: 0;
}
}
/* 20-text-sections.css */
/* Text Content and Custom HTML: boxed to the page width with the standard section spacing, keeping
the first and last margins of their content inside (as the Elementor widget did).
Custom HTML on a Blank template page fills the page with no spacing. */
.falcon-rich-text,
.falcon-custom-html {
display: flow-root;
max-width: var(--falcon-width);
margin: 80px auto;
}
.falcon-custom-html--full {
max-width: none;
margin: 0;
}
@media (max-width: 767px) {
.falcon-rich-text,
.falcon-custom-html {
margin: 40px 0;
padding: 0 15px;
}
.falcon-custom-html--full {
margin: 0;
padding: 0;
}
}
/* 21-blocks.css */
/* Sections-b: the standard section band, and the shared support boxes (567), contact boxes (774)
and Google reviews (1329, 3777) blocks. */
/* A page section with Elementor's usual spacing: 80px above and below, 40px and side padding on phones. */
.falcon-band {
margin: 80px 0;
}
.falcon-band__inner {
display: flex;
flex-direction: column;
}
@media (max-width: 767px) {
.falcon-band {
margin: 40px 0;
padding: 0 15px;
}
}
/* Support boxes: up to three photo cards with the text bottom left on a dark scrim. The whole card is
the link (nothing round it may be positioned or transformed, or the link would only cover that).
On hover (or keyboard focus) the photo slowly zooms, the scrim takes on the brand blue and the
Learn More arrow draws its shaft and underline. Phones get a swipe row with the next card peeking in. */
.falcon-support-boxes {
display: grid;
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
gap: 30px;
}
.falcon-support-boxes__box {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
min-width: 0;
min-height: 400px;
padding: 28px;
border-radius: 16px;
background-color: var(--falcon-dark);
color: var(--falcon-white);
transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.falcon-support-boxes__media {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
border-radius: inherit;
}
.falcon .falcon-support-boxes__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* The scrim: dark from the bottom for the text, a touch at the top for the eagle. Above it, the brand
tint that fades in on hover. */
.falcon-support-boxes__media::before,
.falcon-support-boxes__media::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.falcon-support-boxes__media::before {
z-index: 1;
background: linear-gradient(to top, rgba(14, 16, 26, 0.92) 0%, rgba(14, 16, 26, 0.72) 34%, rgba(14, 16, 26, 0.2) 70%, rgba(14, 16, 26, 0.36) 100%);
}
.falcon-support-boxes__media::after {
z-index: 2;
background: linear-gradient(to top, rgba(28, 51, 144, 0.5) 0%, rgba(28, 51, 144, 0.22) 45%, rgba(28, 51, 144, 0) 75%);
opacity: 0;
transition: opacity 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* The eagle in a frosted tile. */
.falcon-support-boxes__icon {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 14px;
background-color: rgba(255, 255, 255, 0.12);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.falcon .falcon-support-boxes__icon img {
display: block;
width: 32px;
height: 32px;
}
.falcon-support-boxes__body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin-top: auto;
}
.falcon .falcon-support-boxes__heading {
margin: 0;
padding: 0;
color: var(--falcon-white);
font-size: 22px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
text-wrap: balance;
}
.falcon-support-boxes__text {
color: rgba(255, 255, 255, 0.84);
font-size: 15px;
line-height: 1.55;
}
.falcon-support-boxes__text p {
margin: 0;
}
.falcon .falcon-support-boxes .falcon-support-boxes__link,
.falcon .falcon-support-boxes .falcon-support-boxes__link:hover {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 6px;
background: none;
color: var(--falcon-white);
font-size: 15px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
}
/* The link covers the whole card; its focus ring goes round the card. */
.falcon-support-boxes__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: 16px;
}
.falcon .falcon-support-boxes .falcon-support-boxes__link:focus-visible {
outline: none;
}
.falcon-support-boxes__link:focus-visible::after {
outline: 2px solid var(--falcon-brand);
outline-offset: 3px;
}
.falcon-support-boxes__label {
padding-bottom: 2px;
background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
transition: background-size 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
/* An arrow head at rest; the shaft draws in and the head moves on with it. */
.falcon-support-boxes__arrow {
flex: none;
width: 11px;
height: 11px;
overflow: visible;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.falcon-support-boxes__arrow-line {
opacity: 0;
transition: opacity 0.2s ease;
}
.falcon-support-boxes__arrow-head {
transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.falcon-support-boxes__box:focus-within .falcon-support-boxes__photo {
transform: scale(1.06);
}
.falcon-support-boxes__box:focus-within .falcon-support-boxes__media::after,
.falcon-support-boxes__box:focus-within .falcon-support-boxes__arrow-line {
opacity: 1;
}
.falcon-support-boxes__box:focus-within .falcon-support-boxes__label {
background-size: 100% 1.5px;
}
.falcon-support-boxes__box:focus-within .falcon-support-boxes__arrow-head {
transform: translateX(3px);
}
@media (hover: hover) {
.falcon-support-boxes__box:hover .falcon-support-boxes__photo {
transform: scale(1.06);
}
.falcon-support-boxes__box:hover .falcon-support-boxes__media::after,
.falcon-support-boxes__box:hover .falcon-support-boxes__arrow-line {
opacity: 1;
}
.falcon-support-boxes__box:hover .falcon-support-boxes__label {
background-size: 100% 1.5px;
}
.falcon-support-boxes__box:hover .falcon-support-boxes__arrow-head {
transform: translateX(3px);
}
}
/* Touch screens have no hover, so the arrow shows in full from the start. */
@media (hover: none) {
.falcon-support-boxes__arrow-line {
opacity: 1;
}
.falcon-support-boxes__arrow-head {
transform: translateX(3px);
}
}
.falcon-support-boxes__box:active {
transform: scale(0.99);
transition-duration: 0.08s;
}
@media (prefers-reduced-motion: reduce) {
.falcon-support-boxes__box,
.falcon-support-boxes__box:active,
.falcon .falcon-support-boxes__box .falcon-support-boxes__photo {
transform: none;
transition: none;
}
.falcon .falcon-support-boxes__box .falcon-support-boxes__arrow-head {
transform: translateX(3px);
transition: none;
}
.falcon-support-boxes__label,
.falcon-support-boxes__arrow-line,
.falcon-support-boxes__media::after {
transition: none;
}
.falcon-support-boxes__arrow-line {
opacity: 1;
}
}
@media (max-width: 1024px) {
.falcon-support-boxes {
gap: 16px;
}
.falcon-support-boxes__box {
gap: 20px;
min-height: 360px;
padding: 22px;
}
.falcon .falcon-support-boxes__heading {
font-size: 19px;
}
.falcon-support-boxes__text {
font-size: 14px;
}
/* The row meets the screen edges here (and scrolls on phones), which would cut an outside ring,
so the focus ring sits just inside the card. */
.falcon-support-boxes__link:focus-visible::after {
outline-color: var(--falcon-white);
outline-offset: -4px;
}
}
/* Phones: a swipe row, each card 84% wide so the next one shows. */
@media (max-width: 767px) {
.falcon-support-boxes {
grid-auto-columns: 84%;
gap: 12px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.falcon-support-boxes::-webkit-scrollbar {
display: none;
}
.falcon-support-boxes:has(> :only-child) {
grid-auto-columns: 100%;
}
.falcon-support-boxes__box {
min-height: 340px;
scroll-snap-align: start;
}
.falcon .falcon-support-boxes__heading {
font-size: 20px;
}
}
/* On touch screens the row runs to the screen edges, keeping a 15px gutter at the start and end
(wherever it sits, padded or flush). Desktop browsers narrowed this far keep it inside the page,
as their scroll bar would make the full width overflow. */
@media (max-width: 767px) and (hover: none) {
.falcon-support-boxes {
margin-inline: calc(50% - 50vw);
padding-inline: max(15px, calc(50vw - 50%));
scroll-padding-inline: max(15px, calc(50vw - 50%));
}
}
/* Google reviews (21-google-reviews.css), plain or on a light panel with faint curved lines. */
.falcon-reviews {
display: flex;
flex-direction: column;
}
.falcon-reviews--panel {
position: relative;
padding: 30px;
border-radius: 10px;
background-color: var(--falcon-bg-light);
}
.falcon-reviews--panel::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: url(../images/curve-line-1.svg) center center / cover;
opacity: 0.25;
}
/* 21-forms.css */
/* Sections-b: Information and Form (Customer Service, Contact) and Form Panel (Trade Registration).
Both are a text column beside a light form panel; on phones the panel comes first. The account
forms (My account, Register, Lost Password) have their own layout in 23-account.css. */
.falcon-form-panel__inner {
display: flex;
flex-direction: row-reverse;
gap: 20px 30px;
}
.falcon-form-panel__info {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
width: 100%;
min-width: 0;
margin-left: 30px;
border-radius: 10px;
}
.falcon-form-panel__form {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
width: 68%;
min-width: 0;
padding: 40px;
border: 1px solid var(--falcon-border);
border-radius: 20px;
background-color: var(--falcon-bg-light);
}
.falcon-form-panel__info > *,
.falcon-form-panel__form > * {
position: relative;
max-width: 100%;
}
.falcon .falcon-form-panel__heading {
margin: 0;
padding: 0;
font-weight: 400;
text-transform: capitalize;
}
.falcon .falcon-form-panel__heading {
line-height: 1;
}
.falcon-form-panel__text {
margin-bottom: -15px;
}
.falcon-form-panel__links {
overflow: hidden;
}
.falcon-form-panel__links ul {
display: flex;
flex-wrap: wrap;
margin: 0 -3px;
padding: 0;
list-style: none;
}
.falcon-form-panel__links ul {
margin: 0 -14.5px;
}
.falcon-form-panel__links li {
display: flex;
align-items: center;
margin: 0 3px;
word-break: break-word;
}
.falcon-form-panel__links li {
margin: 0 14.5px;
}
.falcon-form-panel__links a {
display: flex;
align-items: center;
}
/* The link text keeps the accent colour on hover, as Elementor's icon list text did. */
.falcon .falcon-form-panel__links a:hover {
color: var(--falcon-accent);
}
/* Elementor pulled the form widget up 15px, against the empty description paragraph Gravity Forms prints. */
.falcon-form-panel--gravity_form .falcon-form-panel__shortcode {
margin-top: -15px;
}
.falcon-form-panel__icon img {
display: inline-block;
width: 50px;
height: 50px;
}
.falcon-form-panel__image {
text-align: center;
}
.falcon-form-panel__image img {
display: inline-block;
vertical-align: middle;
border-radius: 10px;
box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.17);
}
/* A form alone in a narrow centred panel (only the heading filled in). */
.falcon-form-panel--form-only .falcon-form-panel__inner {
justify-content: center;
max-width: 578px;
}
.falcon-form-panel--form-only .falcon-form-panel__form {
width: 100%;
}
@media (max-width: 767px) {
.falcon-form-panel__inner {
flex-wrap: wrap-reverse;
}
.falcon-form-panel__info,
.falcon-form-panel__form {
width: 100%;
}
.falcon-form-panel__info {
margin-left: 0;
}
}
/* 21-google-reviews.css */
/* Reviews panel (template-parts/blocks/google-reviews.php): the Google and Trustpilot logos and the
rating beside a carousel of review cards, each showing where it came from. The carousel itself is the shared one in 31-popular-products.css and 31-carousel.js. */
.falcon-google-reviews {
--falcon-review-star: #f5a524;
position: relative;
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
align-items: center;
gap: 40px;
}
.falcon-google-reviews__summary {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.falcon .falcon-google-reviews__logos {
display: flex;
gap: 8px;
margin: 0 0 2px;
}
.falcon .falcon-google-reviews__logo {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid #e3e8ef;
border-radius: 50%;
background: var(--falcon-white);
box-shadow: 0 6px 18px -12px rgba(28, 51, 144, 0.5);
transition: border-color 0.2s ease, transform 0.2s ease;
}
.falcon a.falcon-google-reviews__logo:hover {
border-color: #c9d2f1;
transform: translateY(-1px);
}
.falcon-google-reviews__logo svg {
width: 22px;
height: 22px;
}
.falcon .falcon-google-reviews__verdict {
margin: 0;
color: var(--falcon-brand);
font-size: 30px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.01em;
}
.falcon-google-reviews__stars {
display: inline-flex;
gap: 3px;
color: var(--falcon-review-star);
}
.falcon-google-reviews__stars svg {
width: 22px;
height: 22px;
fill: currentColor;
}
.falcon .falcon-google-reviews__score {
margin: 0;
color: var(--falcon-text);
font-size: 15px;
line-height: 1.5;
}
.falcon .falcon-google-reviews__score strong {
font-weight: 700;
}
.falcon .falcon-google-reviews__link {
margin-top: 8px;
}
/* On its light panel the reviews run wider than the page content (up to 1400px), so they stand
apart from the sections either side. */
.falcon-reviews--panel:has(.falcon-google-reviews) {
--falcon-reviews-width: min(1400px, calc(100vw - 40px));
width: var(--falcon-reviews-width);
max-width: none;
margin-inline: calc((100% - var(--falcon-reviews-width)) / 2);
padding: 44px 56px;
}
/* The cards. */
.falcon-google-reviews__carousel .falcon-carousel__track {
align-items: stretch;
}
.falcon-google-reviews__carousel .falcon-carousel__slide {
display: flex;
}
.falcon-google-review {
display: flex;
flex: 1;
flex-direction: column;
gap: 14px;
min-height: 250px;
padding: 22px 22px 20px;
border: 1px solid #e3e8ef;
border-radius: 14px;
background: var(--falcon-white);
box-shadow: 0 10px 30px -22px rgba(28, 51, 144, 0.45);
}
.falcon-google-review__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.falcon-google-review__top .falcon-google-reviews__stars svg {
width: 17px;
height: 17px;
}
.falcon-google-review__source {
display: grid;
flex: 0 0 auto;
place-items: center;
}
.falcon-google-review__source svg {
width: 18px;
height: 18px;
}
.falcon-google-review__text {
display: -webkit-box;
overflow: hidden;
color: var(--falcon-text);
font-size: 15px;
line-height: 1.6;
white-space: pre-line;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
}
.falcon-google-review.is-open .falcon-google-review__text {
display: block;
-webkit-line-clamp: unset;
}
.falcon .falcon-google-review__more {
align-self: flex-start;
margin: -6px 0 0;
padding: 0;
border: 0;
background: none;
color: var(--falcon-brand);
font-size: 14px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.falcon .falcon-google-review__more[hidden] {
display: none;
}
.falcon .falcon-google-review__more:hover {
color: var(--falcon-accent);
}
.falcon .falcon-google-review__author {
display: flex;
align-items: center;
gap: 12px;
margin: auto 0 0;
padding-top: 14px;
border-top: 1px solid #eef1f6;
}
.falcon-google-review__avatar {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--falcon-brand);
color: var(--falcon-white);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
}
.falcon-google-review__who {
display: flex;
flex-direction: column;
min-width: 0;
color: var(--falcon-lower-text);
font-size: 13px;
line-height: 1.35;
}
.falcon-google-review__who strong {
overflow: hidden;
color: var(--falcon-text);
font-size: 15px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Arrows centred on the cards. */
.falcon .falcon-google-reviews__carousel .falcon-carousel__nav {
top: 50%;
}
@media (max-width: 1024px) {
.falcon-reviews--panel:has(.falcon-google-reviews) {
padding: 32px;
}
.falcon-google-reviews {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
.falcon-google-reviews__summary {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 6px 14px;
}
.falcon .falcon-google-reviews__verdict {
font-size: 24px;
}
.falcon .falcon-google-reviews__logos,
.falcon .falcon-google-reviews__score,
.falcon .falcon-google-reviews__link {
grid-column: 1 / -1;
}
.falcon .falcon-google-reviews__link {
justify-self: start;
margin-top: 4px;
}
/* On narrower screens the arrows sit under the cards, clear of the review text. */
.falcon-google-reviews__carousel {
padding-bottom: 64px;
}
.falcon .falcon-google-reviews__carousel .falcon-carousel__nav {
top: auto;
bottom: 0;
transform: none;
}
.falcon .falcon-google-reviews__carousel .falcon-carousel__nav:active {
transform: translateY(1px);
}
.falcon-google-reviews__carousel .falcon-carousel__nav--prev {
left: calc(50% - 54px);
}
.falcon-google-reviews__carousel .falcon-carousel__nav--next {
right: calc(50% - 54px);
}
}
@media (max-width: 767px) {
.falcon-reviews--panel:has(.falcon-google-reviews) {
--falcon-reviews-width: calc(100vw - 20px);
padding: 24px 18px;
}
}
/* 21-gravity-forms.css */
/* Gravity Forms styling from the child theme's style.css (Preconfigured-Hello-Child-with-branding),
copied unchanged so every form keeps its look: Contact, Customer Service and Trade Registration.
Gravity Forms' own theme CSS still loads from the plugin. */
/* General form wrapper */
body .gform_wrapper {
max-width: 600px;
margin: 0 auto;
font-size: 15px;
color: #1C3390;
}
/* Field group spacing */
body .gform_wrapper .gform_fields {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Input, select, and textarea styling */
body .gform_wrapper input[type="text"],
body .gform_wrapper input[type="email"],
body .gform_wrapper input[type="tel"],
body .gform_wrapper input[type="url"],
body .gform_wrapper input[type="number"],
body .gform_wrapper textarea {
width: 100%;
padding: 12px 16px;
border-radius: 8px;
border: 1px solid #d1d5db;
background-color: #ffffff;
font-size: 14px;
transition: border 0.2s ease;
box-shadow: none;
outline: none;
color: #1C3390;
}
/* Focus styling */
body .gform_wrapper input:focus,
body .gform_wrapper textarea:focus,
body .gform_wrapper select:focus {
border-color: #1C3390;
}
/* Label styling */
body .gform_wrapper .gfield_label {
font-weight: 600;
margin-bottom: 6px;
display: block;
color: #000000;
}
/* Global button styling for Gravity Forms */
body .gform_wrapper input[type="submit"],
body .gform_wrapper .gform_button,
body .gform_wrapper .gform_next_button,
body .gform_wrapper .gform_previous_button,
body .gform_wrapper .gform_page_footer input[type="button"],
body .gform_wrapper .gform_footer input[type="button"] {
background-color: #1C3390 !important;
color: #ffffff !important;
padding: 12px 24px !important;
border-radius: 9999px !important;
font-size: 15px !important;
border: none !important;
cursor: pointer !important;
transition: background-color 0.2s ease, opacity 0.2s ease;
display: inline-block !important;
white-space: nowrap;
box-shadow: none !important;
}
/* Button hover effect */
body .gform_wrapper input[type="submit"]:hover,
body .gform_wrapper .gform_button:hover,
body .gform_wrapper .gform_next_button:hover,
body .gform_wrapper .gform_previous_button:hover,
body .gform_wrapper .gform_footer input[type="button"]:hover {
background-color: #142673 !important;
opacity: 0.95;
}
/* Footer spacing */
body .gform_wrapper .gform_footer {
margin-top: 30px;
}
/* Gravity Forms placeholder styling */
body .gform_wrapper ::placeholder {
color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
opacity: 1; /* ensure consistent cross-browser behaviour */
font-weight: 400;
}
/* Radio and checkbox colour */
body .gform_wrapper input[type="radio"],
body .gform_wrapper input[type="checkbox"] {
accent-color: #1C3390;
}
/* Add spacing between label and required asterisk */
body .gform_wrapper .gfield_label .gfield_required {
margin-left: 6px;
color: red; /* Optional: keep Woo-style red */
font-weight: normal;
}
/* Force visible text inside all dropdowns */
body .gform_wrapper select,
body .gform_wrapper select option {
color: #1C3390 !important;
background-color: #ffffff !important;
text-indent: 0 !important;
opacity: 1 !important;
visibility: visible !important;
border-radius: 8px;
border: 1px solid #d1d5db;
background-color: #ffffff;
font-size: 14px;
transition: border 0.2s ease;
box-shadow: none;
outline: none;
color: #1C3390;
}
/* Additional fallback to make sure nothing is inherited badly */
body .gform_wrapper .gfield select:focus,
body .gform_wrapper .gfield select:active {
color: #1C3390 !important;
background-color: #ffffff !important;
}
/* Fix for Safari/WebKit where select text might vanish */
body .gform_wrapper .gfield select {
-webkit-text-fill-color: #1C3390 !important;
}
/* Password input styling */
body .gform_wrapper input[type="password"] {
background-color: #ffffff !important;
border: 1px solid #d1d5db !important;
border-radius: 8px !important;
padding: 12px 16px !important;
font-size: 14px !important;
color: #1C3390 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Placeholder styling for password fields */
body .gform_wrapper input[type="password"]::placeholder {
color: rgba(28, 51, 144, 0.6) !important;
opacity: 1 !important;
}
/* 21-lists.css */
/* Sections-b: Shows List (loop grid with card template 930) and Self Help Grid (bento boxes with
card template 829). */
.falcon-shows__inner {
display: flex;
flex-direction: column;
}
.falcon .falcon-shows__heading {
margin: 0;
padding: 0;
font-weight: 400;
text-align: center;
}
.falcon-shows__intro {
margin-bottom: 20px;
text-align: center;
}
.falcon-shows__intro p {
margin: 0;
}
.falcon-shows__empty {
padding: 30px 0;
}
.falcon-shows__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: stretch;
gap: 30px;
}
.falcon-show__card {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
min-height: 328px;
padding: 30px;
border-radius: 10px;
background-color: var(--falcon-white);
box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.08);
}
.falcon-show__image {
text-align: center;
}
.falcon-show__image a {
display: inline-block;
}
.falcon-show__image img {
display: inline-block;
vertical-align: middle;
}
.falcon-show__caption {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
margin-top: 20px;
background-color: var(--falcon-white);
}
.falcon-show__title {
padding: 15px;
border-radius: 99px;
background-color: var(--falcon-bg-light);
text-align: center;
}
.falcon-show__title p {
margin: 0;
line-height: 1;
color: var(--falcon-text);
}
.falcon-show__stand {
margin: 12px 0 0;
font-size: 15px;
font-weight: 600;
line-height: 1;
color: var(--falcon-brand);
text-align: center;
}
/* Self help: light boxes with faint curved lines, two to a row. */
.falcon-self-help__inner {
display: flex;
gap: 30px;
}
.falcon-self-help__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr); /* Elementor's grid container default: the first two rows share a height. */
justify-content: start;
gap: 30px;
width: 100%;
min-width: 0;
}
.falcon-self-help__box {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 20px;
min-width: 0;
padding: 40px;
border-radius: 10px;
background-color: var(--falcon-bg-light);
}
.falcon-self-help__box::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: url(../images/curve-line.svg) center center / cover;
opacity: 0.2;
}
.falcon-self-help__box > * {
position: relative;
max-width: 100%;
}
.falcon .falcon-self-help__small-heading,
.falcon .falcon-self-help__heading {
margin: 0;
padding: 0;
font-weight: 400;
text-transform: capitalize;
}
.falcon .falcon-self-help__small-heading {
line-height: 1;
}
.falcon-self-help__items {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 15px 30px;
margin: 0;
padding: 0;
list-style: none;
}
/* Elementor gave the first box's list a 10px row gap and the others 15px. */
.falcon-self-help__box:first-child .falcon-self-help__items {
row-gap: 10px;
}
.falcon-self-help__item {
display: flex;
flex-direction: column;
gap: 10px;
}
.falcon-self-help__link {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 400;
}
.falcon-self-help__icon {
flex: none;
width: 16px;
height: 16px;
margin-right: 4px;
fill: var(--falcon-brand);
}
.falcon-self-help__icon.falcon-icon--fas-external-link-alt {
width: 15px;
height: 15px;
margin-right: 3.75px;
}
.falcon-self-help__title {
align-self: center;
padding-left: 5px;
color: var(--falcon-lower-text);
}
.falcon-self-help__empty {
padding: 30px 0;
}
@media (max-width: 1024px) {
.falcon-self-help__items {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.falcon-shows__grid,
.falcon-self-help__grid,
.falcon-self-help__items {
grid-template-columns: repeat(1, 1fr);
}
.falcon-self-help__inner {
flex-wrap: wrap;
}
.falcon-show__title p {
line-height: 1.6em;
}
}
/* 22-contact.css */
/* Information and Form section (template-parts/sections/content-and-form.php: Customer Service,
Contact) and the contact boxes (template-parts/blocks/contact-boxes.php). */
/* Contact lines (falcon_contact_line()): an icon beside an email, phone number or WhatsApp link. */
.falcon-contact-line__icon {
display: grid;
flex-shrink: 0;
place-items: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--falcon-white);
color: var(--falcon-brand);
transition: background-color 0.25s ease, color 0.25s ease;
}
.falcon-contact-line__icon .falcon-icon {
width: 16px;
height: 16px;
fill: currentColor;
}
/* Outline icons (the email one) are drawn with strokes; filling them turns them into solid squares. */
.falcon-contact-line__icon .falcon-icon[fill="none"] {
fill: none;
}
/* Information and Form: text cards on the left, the form card on the right, in view while scrolling. */
.falcon-content-form__inner {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: 32px 48px;
align-items: start;
}
.falcon-content-form__info {
display: grid;
gap: 16px;
min-width: 0;
}
.falcon-content-form__block {
padding: 30px 32px;
border: 1px solid #e6eaf0;
border-radius: 24px;
background: var(--falcon-white);
}
.falcon .falcon-content-form__heading {
margin: 0 0 12px;
font-size: 24px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.01em;
}
.falcon-content-form__text {
color: var(--falcon-text);
font-size: 16px;
line-height: 1.7;
}
.falcon-content-form__text p {
margin: 0 0 12px;
}
.falcon-content-form__text > :last-child {
margin-bottom: 0;
}
.falcon .falcon-content-form__text a {
color: var(--falcon-accent);
overflow-wrap: anywhere;
}
.falcon-content-form__text + .falcon-content-form__lines {
margin-top: 18px;
}
.falcon-content-form__lines ul {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.falcon-content-form__lines li > a,
.falcon-content-form__lines li > span {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 16px 6px 6px;
border-radius: 999px;
background: var(--falcon-bg-light);
color: var(--falcon-brand);
font-size: 15px;
font-weight: 500;
text-decoration: none;
overflow-wrap: anywhere;
transition: background-color 0.25s ease, color 0.25s ease;
}
.falcon .falcon-content-form__lines li > a:hover {
background: var(--falcon-brand);
color: #fff;
}
.falcon-content-form__lines li > a:hover .falcon-contact-line__icon {
background: rgba(255, 255, 255, 0.16);
color: #fff;
}
.falcon-content-form__map {
overflow: hidden;
border: 1px solid #e6eaf0;
border-radius: 24px;
line-height: 0;
}
.falcon-content-form__map iframe {
width: 100%;
height: 380px;
border: 0;
}
.falcon-content-form__form {
position: sticky;
top: calc(120px + var(--falcon-pinned-h, 0px));
transition: top 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
min-width: 0;
padding: 34px 34px 30px;
border: 1px solid #e6eaf0;
border-radius: 28px;
background: var(--falcon-white);
box-shadow: 0 24px 48px -32px rgba(28, 51, 144, 0.35);
}
.falcon-content-form__form > .falcon-content-form__heading {
font-size: 26px;
}
.falcon-content-form__intro {
margin-bottom: 22px;
color: var(--falcon-lower-text);
font-size: 15px;
line-height: 1.6;
}
.falcon-content-form__intro p {
margin: 0;
}
/* The form itself: larger fields with a clear focus ring, and quieter "(Required)" labels. */
.falcon-content-form .gform_wrapper {
max-width: none;
margin: 0;
}
.falcon-content-form .gform_wrapper .gform_fields {
gap: 18px;
}
.falcon-content-form .gform_wrapper .gfield_label {
margin-bottom: 8px;
color: var(--falcon-dark);
font-size: 14px;
font-weight: 600;
}
.falcon-content-form .gform_wrapper .gfield_label .gfield_required {
margin-left: 4px;
color: var(--falcon-lower-text);
font-size: 12px;
font-weight: 500;
}
.falcon-content-form .gform_wrapper input[type="text"],
.falcon-content-form .gform_wrapper input[type="email"],
.falcon-content-form .gform_wrapper input[type="tel"],
.falcon-content-form .gform_wrapper input[type="number"],
.falcon-content-form .gform_wrapper select,
.falcon-content-form .gform_wrapper textarea {
min-height: 50px;
padding: 13px 16px;
border: 1px solid #dfe4ee;
border-radius: 14px;
background-color: #fbfcfe !important;
color: var(--falcon-dark);
font-family: var(--falcon-font);
font-size: 15px;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.falcon-content-form .gform_wrapper textarea {
min-height: 140px;
resize: vertical;
}
.falcon-content-form .gform_wrapper select {
height: auto;
padding-right: 44px;
line-height: 1.4;
background-image: url("data:image/svg+xml;utf8,") !important;
background-position: right 14px center !important;
background-repeat: no-repeat !important;
background-size: 20px !important;
appearance: none;
}
.falcon-content-form .gform_wrapper input:hover,
.falcon-content-form .gform_wrapper select:hover,
.falcon-content-form .gform_wrapper textarea:hover {
border-color: #c9d2f1;
}
.falcon-content-form .gform_wrapper input:focus,
.falcon-content-form .gform_wrapper select:focus,
.falcon-content-form .gform_wrapper textarea:focus {
border-color: var(--falcon-brand);
background-color: #fff !important;
box-shadow: 0 0 0 4px rgba(28, 51, 144, 0.12);
outline: none;
}
.falcon-content-form .gform_wrapper ::placeholder {
color: #9aa0b1;
}
.falcon-content-form .gform_wrapper .gform_footer {
margin-top: 24px;
padding: 0;
}
.falcon-content-form .gform_wrapper .gform_footer input[type="submit"],
.falcon-content-form .gform_wrapper .gform_footer .gform_button {
width: 100% !important;
min-height: 52px;
font-size: 16px !important;
font-weight: 600;
}
/* Contact boxes: three cards with the contact routes at the foot; the support route is featured. */
.falcon-contact-boxes {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.falcon-contact-boxes__box {
display: flex;
min-width: 0;
}
.falcon-contact-boxes__inner {
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
gap: 14px;
padding: 32px;
border: 1px solid #e6eaf0;
border-radius: 24px;
background: var(--falcon-bg-light);
}
.falcon-contact-boxes__icon {
display: grid;
place-items: center;
width: 60px;
height: 60px;
margin-bottom: 6px;
border-radius: 18px;
background: var(--falcon-white);
}
.falcon-contact-boxes__icon img {
display: block;
width: 34px;
height: auto;
}
.falcon .falcon-contact-boxes__heading {
margin: 0;
color: var(--falcon-brand);
font-size: 23px;
font-weight: 600;
line-height: 1.25;
}
.falcon-contact-boxes__text {
color: var(--falcon-lower-text);
font-size: 15px;
line-height: 1.65;
}
.falcon-contact-boxes__text p {
margin: 0;
}
/* Contact routes pinned to the foot so the three boxes line up. */
.falcon-contact-boxes__lines,
.falcon-contact-boxes__button {
width: 100%;
margin-top: auto;
padding-top: 10px;
}
.falcon-contact-boxes__lines ul {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.falcon-contact-boxes__line > a,
.falcon-contact-boxes__line > span {
display: flex;
align-items: center;
gap: 12px;
padding: 7px 14px 7px 7px;
border-radius: 16px;
background: var(--falcon-white);
color: var(--falcon-brand);
font-size: 15px;
font-weight: 500;
text-decoration: none;
overflow-wrap: anywhere;
transition: background-color 0.25s ease, color 0.25s ease;
}
.falcon-contact-boxes__line .falcon-contact-line__icon {
background: var(--falcon-bg-light);
}
.falcon .falcon-contact-boxes__line > a:hover {
background: var(--falcon-brand);
color: #fff;
}
.falcon-contact-boxes__line > a:hover .falcon-contact-line__icon {
background: rgba(255, 255, 255, 0.16);
color: #fff;
}
.falcon-contact-boxes__button .falcon-button {
width: 100%;
justify-content: center;
}
.falcon-contact-boxes__box.is-featured .falcon-contact-boxes__inner {
position: relative;
overflow: hidden;
border-color: var(--falcon-brand);
background: var(--falcon-brand);
}
.falcon-contact-boxes__box.is-featured .falcon-contact-boxes__inner::before {
content: "";
position: absolute;
inset: 0;
background: url("../images/curve-line-1.svg") center center / cover;
opacity: 0.18;
pointer-events: none;
}
.falcon-contact-boxes__box.is-featured .falcon-contact-boxes__inner > * {
position: relative;
}
.falcon .falcon-contact-boxes__box.is-featured .falcon-contact-boxes__heading {
color: #fff;
}
.falcon-contact-boxes__box.is-featured .falcon-contact-boxes__text {
color: rgba(255, 255, 255, 0.82);
}
.falcon .falcon-contact-boxes__box.is-featured .falcon-button {
background: #fff;
color: var(--falcon-brand);
}
.falcon .falcon-contact-boxes__box.is-featured .falcon-button:hover {
background: var(--falcon-bg-blue);
color: var(--falcon-brand);
}
@media (max-width: 1024px) {
.falcon-content-form__inner {
grid-template-columns: minmax(0, 1fr);
}
.falcon-content-form__form {
position: static;
}
.falcon-contact-boxes {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.falcon-contact-boxes__box.is-featured {
grid-column: 1 / -1;
order: -1;
}
}
@media (max-width: 767px) {
.falcon-content-form__inner {
gap: 20px;
padding-inline: 15px;
}
.falcon-content-form__block {
padding: 22px 20px;
border-radius: 20px;
}
.falcon .falcon-content-form__heading {
font-size: 21px;
}
.falcon-content-form__text {
font-size: 15px;
}
.falcon-content-form__form {
padding: 24px 20px 22px;
border-radius: 22px;
}
.falcon-content-form__form > .falcon-content-form__heading {
font-size: 23px;
}
.falcon-content-form__map iframe {
height: 300px;
}
.falcon-contact-boxes {
grid-template-columns: minmax(0, 1fr);
gap: 14px;
margin: 40px 0;
padding: 0 15px;
}
.falcon-contact-boxes__box.is-featured {
grid-column: auto;
}
.falcon-contact-boxes__inner {
padding: 24px 22px;
border-radius: 22px;
}
}
/* 23-account.css */
/* Customer account screens (template-parts/account/): sign in and create account as one card in two
parts (navy brand panel, form beside it), the Lost Password page as one small card. Shapes follow
the theme: 20px panels, 10px inputs and rows, pill buttons. Selectors carry .falcon to beat the
base reset's pink button and link states. */
.falcon-account-band {
padding: 56px 0 80px;
background:
radial-gradient(1200px 420px at 50% -120px, rgba(28, 51, 144, 0.08), transparent 70%),
var(--falcon-bg-light);
}
/* -- The two-part card ------------------------------------------------------------------- */
.falcon-account-card {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
max-width: 1060px;
margin: 0 auto;
overflow: hidden;
border: 1px solid #e3e7f0;
border-radius: 20px;
background: var(--falcon-white);
box-shadow: 0 30px 70px -36px rgba(28, 51, 144, 0.35);
}
.falcon-account-card__brand {
position: relative;
display: flex;
flex-direction: column;
gap: 18px;
padding: 52px 48px;
overflow: hidden;
color: rgba(255, 255, 255, 0.84);
background: linear-gradient(160deg, #23409f 0%, var(--falcon-brand) 45%, #142671 100%);
}
.falcon-account-card__brand > * {
position: relative;
}
/* The falcon, once as a mark and once large and faint in the corner. The icon is a navy image, so
it is turned white. */
.falcon-account-card__mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 16px;
background: rgba(255, 255, 255, 0.1);
}
.falcon-account-card__mark .falcon-icon,
.falcon .falcon-account-card__watermark {
filter: brightness(0) invert(1);
}
.falcon-account-card__mark .falcon-icon {
width: 38px;
height: 38px;
}
.falcon .falcon-account-card__watermark {
position: absolute;
right: -70px;
bottom: -60px;
width: 300px;
height: 300px;
opacity: 0.07;
pointer-events: none;
}
.falcon .falcon-account-card__heading {
margin: 10px 0 0;
color: var(--falcon-white);
font-size: 38px;
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;
}
.falcon-account-card__text {
max-width: 42ch;
font-size: 16px;
line-height: 1.65;
}
.falcon-account-card__text p {
margin: 0 0 12px;
}
.falcon-account-card__help {
display: flex;
align-items: center;
gap: 10px;
margin: auto 0 0;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
font-size: 15px;
}
.falcon-account-card__help .falcon-icon {
flex: none;
width: 18px;
height: 18px;
}
.falcon .falcon-account-card__help a {
color: var(--falcon-white);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.falcon-account-card__main {
display: flex;
flex-direction: column;
gap: 26px;
padding: 44px 52px 48px;
}
/* Sign in / Create account switch. */
.falcon-account-switch {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 5px;
border-radius: 999px;
background: #eef1f7;
}
.falcon .falcon-account-switch__link {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
border-radius: 999px;
color: #4c5268;
font-size: 15px;
font-weight: 600;
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.falcon .falcon-account-switch__link:hover {
color: var(--falcon-brand);
}
.falcon .falcon-account-switch__link[aria-current="page"] {
color: var(--falcon-brand);
background: var(--falcon-white);
box-shadow: 0 1px 2px rgba(27, 29, 40, 0.08), 0 4px 12px -4px rgba(28, 51, 144, 0.25);
}
/* Trade account row under the form. */
.falcon .falcon-account-trade {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border: 1px solid #e3e7f0;
border-radius: 10px;
color: var(--falcon-text);
font-size: 15px;
transition: border-color 0.2s, background-color 0.2s;
}
.falcon .falcon-account-trade:hover {
border-color: #c9d1e6;
background: #f7f9fd;
color: var(--falcon-text);
}
.falcon-account-trade__icon {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: #eef1fb;
color: var(--falcon-brand);
}
.falcon-account-trade__icon .falcon-icon {
width: 20px;
height: 20px;
fill: currentColor;
}
.falcon-account-trade__text {
flex: 1;
min-width: 0;
line-height: 1.4;
}
.falcon-account-trade__text strong {
font-weight: 600;
}
.falcon .falcon-account-trade__arrow {
flex: none;
width: 9px;
height: 16px;
fill: #8a90a5;
transition: transform 0.2s;
}
.falcon .falcon-account-trade:hover .falcon-account-trade__arrow {
transform: translateX(3px);
fill: var(--falcon-brand);
}
/* -- Forms ------------------------------------------------------------------------------- */
.falcon-account-form {
display: flex;
flex-direction: column;
gap: 20px;
margin: 0;
}
.falcon-account-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.falcon-field {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.falcon-field__label-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.falcon .falcon-field__label {
color: var(--falcon-text);
font-size: 14px;
font-weight: 600;
line-height: 1.3;
}
.falcon .falcon-field__link {
color: var(--falcon-brand);
font-size: 14px;
font-weight: 500;
}
.falcon .falcon-field__link:hover {
color: var(--falcon-accent);
text-decoration: underline;
}
/* 16px text stops phones zooming in on the field. */
.falcon .falcon-field__input {
width: 100%;
height: 52px;
padding: 0 16px;
border: 1px solid #d3d8e4;
border-radius: 10px;
background: var(--falcon-white);
color: var(--falcon-text);
font-size: 16px;
line-height: 1.4;
transition: border-color 0.15s, box-shadow 0.15s;
}
.falcon .falcon-field__input:hover {
border-color: #b4bccf;
}
.falcon .falcon-field__input:focus {
border-color: var(--falcon-brand);
outline: none;
box-shadow: 0 0 0 4px rgba(28, 51, 144, 0.14);
}
.falcon-field__password {
position: relative;
}
.falcon .falcon-field__password .falcon-field__input {
padding-right: 84px;
}
.falcon .falcon-field__show,
.falcon .falcon-field__show:hover,
.falcon .falcon-field__show:focus {
position: absolute;
top: 50%;
right: 6px;
min-width: 64px;
height: 40px;
padding: 0 12px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--falcon-brand);
font-size: 14px;
font-weight: 600;
transform: translateY(-50%);
}
.falcon .falcon-field__show:hover {
background: #eef1fb;
}
.falcon .falcon-field__show:focus-visible {
outline: 2px solid var(--falcon-brand);
outline-offset: 0;
}
.falcon-field__caps {
margin: 0;
color: #9a5b00;
font-size: 13px;
font-weight: 500;
}
.falcon-field__hint {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
color: var(--falcon-lower-text);
font-size: 13px;
transition: color 0.2s;
}
.falcon-field__hint .falcon-icon {
width: 14px;
height: 14px;
padding: 2px;
border-radius: 50%;
background: #e3e7f0;
fill: transparent;
transition: background-color 0.2s, fill 0.2s;
}
.falcon-field__hint.is-met {
color: #1d6b3d;
}
.falcon-field__hint.is-met .falcon-icon {
background: #1f8a4c;
fill: var(--falcon-white);
}
/* Tick boxes: "Keep me signed in", and AutomateWoo's marketing opt-in on Create account. */
.falcon-check,
.falcon-account-form .automatewoo-optin label {
display: inline-flex;
align-items: center;
gap: 10px;
align-self: flex-start;
min-height: 32px;
color: var(--falcon-text);
font-size: 15px;
line-height: 1.35;
cursor: pointer;
}
.falcon-account-form .automatewoo-optin {
margin: 0;
}
.falcon-check input,
.falcon-account-form .automatewoo-optin input {
flex: none;
width: 20px;
height: 20px;
margin: 0;
accent-color: var(--falcon-brand);
cursor: pointer;
}
/* WooCommerce's order attribution element only holds hidden inputs; keep it out of the spacing. */
.falcon-account-form wc-order-attribution-inputs {
display: contents;
}
/* The honeypot: off screen, for bots only. */
.falcon-account-form__trap {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.falcon-account-form__privacy,
.falcon-account-form__privacy p {
margin: 0;
color: var(--falcon-lower-text);
font-size: 13px;
line-height: 1.55;
}
.falcon .falcon-account-form__privacy a {
color: var(--falcon-brand);
text-decoration: underline;
}
/* Main button: full width pill, with a spinner while the form sends. */
.falcon .falcon-account-submit,
.falcon .falcon-account-submit:focus {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 54px;
padding: 0 24px;
border: 0;
border-radius: 999px;
background: var(--falcon-brand);
color: var(--falcon-white);
font-size: 16px;
font-weight: 600;
line-height: 1.2;
box-shadow: 0 10px 22px -12px rgba(28, 51, 144, 0.7);
transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
}
.falcon .falcon-account-submit:hover {
background: #15287a;
color: var(--falcon-white);
}
.falcon .falcon-account-submit:active {
transform: translateY(1px);
box-shadow: 0 6px 14px -10px rgba(28, 51, 144, 0.7);
}
.falcon .falcon-account-submit:focus-visible {
outline: 3px solid rgba(28, 51, 144, 0.35);
outline-offset: 3px;
}
.falcon-account-submit__spinner {
display: none;
width: 18px;
height: 18px;
fill: currentColor;
}
.falcon .falcon-account-submit.is-busy {
pointer-events: none;
opacity: 0.85;
}
.falcon-account-submit.is-busy .falcon-account-submit__spinner {
display: block;
}
@media (prefers-reduced-motion: no-preference) {
.falcon-account-submit.is-busy .falcon-account-submit__spinner {
animation: falcon-account-spin 0.9s linear infinite;
}
.falcon-account-card,
.falcon-account-solo {
animation: falcon-account-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
}
@keyframes falcon-account-spin {
to {
transform: rotate(360deg);
}
}
@keyframes falcon-account-in {
from {
opacity: 0;
transform: translateY(10px);
}
}
/* Messages: WooCommerce's notices (wrong password, email in use) and the theme's own. */
.falcon-account-notices:empty {
display: none;
}
.falcon-account-notices .woocommerce-error,
.falcon-account-notices .woocommerce-message,
.falcon-account-notices .woocommerce-info,
.falcon-account-alert {
margin: 0;
padding: 13px 16px;
border: 1px solid;
border-radius: 10px;
font-size: 14px;
line-height: 1.5;
list-style: none;
}
.falcon-account-notices .woocommerce-error {
border-color: #f1c4c4;
background: #fdf1f1;
color: #8f1d1d;
}
.falcon-account-notices .woocommerce-message,
.falcon-account-alert--success {
border-color: #bfe3cd;
background: #effaf3;
color: #17603a;
}
.falcon-account-notices .woocommerce-info {
border-color: #cfd8f2;
background: #f2f5fd;
color: var(--falcon-brand);
}
.falcon-account-notices li + li {
margin-top: 6px;
}
.falcon .falcon-account-notices a {
color: inherit;
font-weight: 600;
text-decoration: underline;
}
/* WooCommerce's notices start with an icon and padding of their own; drop them here. */
.falcon-account-notices .woocommerce-error::before,
.falcon-account-notices .woocommerce-message::before,
.falcon-account-notices .woocommerce-info::before {
content: none;
}
/* -- Lost Password: one small card -------------------------------------------------------- */
.falcon-account-solo {
display: flex;
flex-direction: column;
gap: 18px;
max-width: 480px;
margin: 0 auto;
padding: 44px 44px 40px;
border: 1px solid #e3e7f0;
border-radius: 20px;
background: var(--falcon-white);
box-shadow: 0 30px 70px -36px rgba(28, 51, 144, 0.35);
}
.falcon-account-solo__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 16px;
background: #eef1fb;
color: var(--falcon-brand);
}
.falcon-account-solo__icon .falcon-icon {
width: 24px;
height: 24px;
fill: currentColor;
}
/* The email icon is a line drawing. */
.falcon-account-solo__icon .falcon-icon--blog-mail {
fill: none;
}
.falcon .falcon-account-solo__heading {
margin: 6px 0 0;
color: var(--falcon-text);
font-size: 30px;
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.02em;
}
.falcon-account-solo__text,
.falcon-account-solo__text p {
margin: 0;
color: var(--falcon-lower-text);
font-size: 16px;
line-height: 1.6;
}
.falcon-account-solo .falcon-account-form {
margin-top: 6px;
}
.falcon .falcon-account-submit--link,
.falcon .falcon-account-submit--link:hover {
margin-top: 6px;
color: var(--falcon-white);
text-decoration: none;
}
.falcon-account-solo__again {
margin: 0;
color: var(--falcon-lower-text);
font-size: 15px;
text-align: center;
}
.falcon .falcon-account-solo__again a,
.falcon .falcon-account-back {
color: var(--falcon-brand);
font-weight: 600;
}
.falcon .falcon-account-back {
display: inline-flex;
align-items: center;
align-self: center;
gap: 8px;
min-height: 44px;
font-size: 15px;
}
.falcon .falcon-account-back:hover,
.falcon .falcon-account-solo__again a:hover {
color: var(--falcon-accent);
text-decoration: underline;
}
.falcon-account-back .falcon-icon {
width: 18px;
height: 18px;
transform: rotate(180deg);
}
/* -- Smaller screens ---------------------------------------------------------------------- */
@media (max-width: 900px) {
.falcon-account-band {
padding: 32px 0 56px;
}
.falcon-account-card {
grid-template-columns: 1fr;
max-width: 620px;
}
.falcon-account-card__brand {
gap: 12px;
padding: 32px 32px 30px;
}
.falcon-account-card__mark {
width: 48px;
height: 48px;
border-radius: 12px;
}
.falcon-account-card__mark .falcon-icon {
width: 30px;
height: 30px;
}
.falcon .falcon-account-card__heading {
margin-top: 4px;
font-size: 30px;
}
.falcon-account-card__text {
max-width: none;
font-size: 15px;
}
.falcon-account-card__help {
display: none;
}
.falcon-account-card__main {
padding: 30px 32px 34px;
}
}
@media (max-width: 600px) {
.falcon-account-band {
padding: 16px 0 40px;
}
.falcon-account-band > .falcon-container {
padding-inline: 12px;
}
.falcon-account-card,
.falcon-account-solo {
border-radius: 16px;
}
.falcon-account-card__brand {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 14px;
padding: 22px 20px;
}
.falcon .falcon-account-card__watermark {
display: none;
}
.falcon-account-card__mark {
width: 44px;
height: 44px;
}
.falcon .falcon-account-card__heading {
flex: 1;
margin: 0;
font-size: 24px;
}
/* The page text is background; on a phone the form comes first. */
.falcon-account-card__text {
display: none;
}
.falcon-account-card__main {
gap: 22px;
padding: 22px 20px 26px;
}
.falcon-account-form__row {
grid-template-columns: 1fr;
gap: 20px;
}
.falcon-account-solo {
padding: 30px 22px 26px;
}
.falcon .falcon-account-solo__heading {
font-size: 26px;
}
}
/* -- Trade Registration (template-parts/account/trade.php) ----------------------------------- */
/* The sign in card with the Gravity Forms trade form in it. The fields take the account inputs'
size and shape, overriding the shared Gravity Forms styles (21-gravity-forms.css). */
.falcon-account-card__photo {
margin-top: 8px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 14px;
}
.falcon-account-card__photo img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.falcon-account-card--trade .falcon-account-card__help {
margin-top: auto;
}
.falcon .falcon-account-card__form .gform_wrapper {
max-width: none;
margin: 0;
color: var(--falcon-text);
}
.falcon .falcon-account-card__form .gform_wrapper .gform_fields {
gap: 20px;
}
.falcon .falcon-account-card__form .gform_wrapper .gfield_label {
margin-bottom: 8px;
color: var(--falcon-text);
font-size: 14px;
font-weight: 600;
line-height: 1.3;
}
.falcon .falcon-account-card__form .gform_wrapper .gfield_label .gfield_required {
margin-left: 4px;
color: var(--falcon-lower-text);
font-size: 13px;
font-weight: 400;
}
.falcon .falcon-account-card__form .gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select) {
height: 52px;
padding: 0 16px;
border: 1px solid #d3d8e4;
border-radius: 10px;
color: var(--falcon-text);
font-size: 16px;
line-height: 1.4;
transition: border-color 0.15s, box-shadow 0.15s;
}
.falcon .falcon-account-card__form .gform_wrapper textarea {
height: 140px;
min-height: 140px;
padding: 14px 16px;
border: 1px solid #d3d8e4;
border-radius: 10px;
color: var(--falcon-text);
font-size: 16px;
line-height: 1.5;
resize: vertical;
}
.falcon .falcon-account-card__form .gform_wrapper :is(input, textarea, select):hover {
border-color: #b4bccf;
}
.falcon .falcon-account-card__form .gform_wrapper :is(input, textarea, select):focus {
border-color: var(--falcon-brand);
outline: none;
box-shadow: 0 0 0 4px rgba(28, 51, 144, 0.14);
}
.falcon .falcon-account-card__form .gform_wrapper .gform_footer {
margin-top: 26px;
padding: 0;
}
.falcon .falcon-account-card__form .gform_wrapper :is(input[type="submit"], .gform_button) {
display: flex !important;
align-items: center;
justify-content: center;
width: 100% !important;
min-height: 54px;
font-size: 16px !important;
font-weight: 600;
}
.falcon .falcon-account-card__form .gform_wrapper .gfield_error :is(input, textarea, select) {
border-color: #b42318;
}
.falcon .falcon-account-card__form .gform_wrapper .gform_validation_errors {
margin-bottom: 20px;
border-radius: 10px;
}
@media (max-width: 900px) {
/* Unlike sign in, the text explains what a trade account gives, so it stays. */
.falcon-account-card--trade .falcon-account-card__text {
display: block;
}
.falcon-account-card--trade .falcon-account-card__photo {
display: none;
}
}
@media (max-width: 600px) {
.falcon-account-card--trade .falcon-account-card__text {
flex: 1 0 100%;
font-size: 14px;
}
}
/* 30-product-page.css */
/* Single product page (Elementor template 282): what Elementor's own CSS did to the same
WooCommerce markup, the template's custom CSS, and the customizer CSS the page depended on.
:where(.single-product) keeps a rule to product pages without changing its specificity, where
the original rule was printed on product pages only. */
/* Elementor's defaults inside a template. */
.falcon-product a {
box-shadow: none;
text-decoration: none;
}
.falcon-product img {
border: none;
border-radius: 0;
box-shadow: none;
height: auto;
max-width: 100%;
}
.falcon-product embed,
.falcon-product iframe,
.falcon-product object,
.falcon-product video {
border: none;
line-height: 1;
margin: 0;
max-width: 100%;
width: 100%;
}
/* Sections: Elementor's boxed containers (1250px, 80px apart, 40px and 15px side padding on mobile). */
.falcon-product__section {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-width: var(--falcon-width);
margin: 80px auto;
}
.falcon-product__section > * {
position: relative;
min-width: 0;
}
.falcon-product__included,
.falcon-product__comparison {
margin-block: 0;
}
@media (max-width: 767px) {
.falcon-product__section {
margin-block: 40px;
padding-inline: 15px;
}
.falcon-product__included {
margin-block: 0;
padding-inline: 0;
}
.falcon-product__comparison {
margin-block: 0;
}
}
/* Headings shared by the sections below the summary. */
.falcon-product .falcon-product__heading {
margin: 0;
padding: 0;
font-weight: 400;
line-height: 50px;
}
/* Gallery and summary. */
.falcon-product__top {
flex-direction: row;
}
.falcon-product__gallery,
.falcon-product__summary {
display: flex;
flex-direction: column;
width: 50%;
}
.falcon-product__summary {
gap: 22px;
padding: 8px 0 0 56px;
}
@media (max-width: 1024px) {
.falcon-product__summary {
padding-left: 32px;
}
}
/* Empty placeholders printed on the summary hook (PayPal's reCAPTCHA box) would add a 30px gap. */
.falcon-product__summary > div:empty {
display: none;
}
@media (max-width: 767px) {
.falcon-product__top {
flex-wrap: wrap;
}
.falcon-product__gallery,
.falcon-product__summary {
width: 100%;
}
/* The category, the H1 and the title above the images: the summary's blocks join the section's
column, and those three come first. */
.falcon-product__top {
flex-direction: column;
flex-wrap: nowrap;
gap: 22px;
}
.falcon-product__summary {
display: contents;
}
.falcon-product__badges,
.falcon-product__kicker,
.falcon-product__title {
order: -1;
}
.falcon-product__gallery {
margin-bottom: 6px;
}
}
/* Category and trade badges. */
.falcon-product__badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.falcon-product__category,
.falcon-product__trade {
align-self: flex-start;
margin: 0;
border-radius: 99px;
font-family: var(--falcon-font);
font-weight: 400;
}
.falcon-product__category {
padding: 8px 14px;
background-color: var(--falcon-bg-light);
color: var(--falcon-brand);
font-size: 13px;
font-weight: 500;
line-height: 1;
transition: background 0.2s ease;
}
.falcon .falcon-product__category,
.falcon .falcon-product__category:hover {
color: var(--falcon-brand);
text-decoration: none;
}
.falcon .falcon-product__category:hover {
background-color: var(--falcon-bg-blue);
}
.falcon-product__trade {
display: flex;
align-items: center;
padding: 5px 20px;
background-color: #f5f9f4;
color: #009212;
font-size: 14px;
}
.falcon-product__trade .falcon-icon {
flex-shrink: 0;
width: 14px;
height: 14px;
margin-right: 3.5px;
fill: currentColor;
}
.falcon-product__trade span {
padding-left: 5px;
}
/* Headings: the "H1" field, then the product title. */
.falcon-product .falcon-product__kicker,
.falcon-product .falcon-product__title {
margin: 0;
padding: 0;
color: var(--falcon-brand);
font-family: var(--falcon-font);
font-weight: 400;
}
.falcon-product .falcon-product__kicker {
font-size: 18px;
line-height: 1;
}
.falcon-product .falcon-product__title {
font-size: 32px;
line-height: 42px;
}
@media (max-width: 767px) {
.falcon-product .falcon-product__title {
font-size: 26px;
line-height: 34px;
}
}
/* Price: the 15px pull-up from the Elementor template. */
.falcon-product__price {
margin-bottom: -15px;
}
.woocommerce div.product .falcon-product__price .price {
color: var(--falcon-brand);
font-family: var(--falcon-font);
font-weight: 400;
}
.woocommerce div.product .falcon-product__price .price ins {
color: var(--falcon-brand);
}
/* The price beside the quantity and Add to Cart (inc/50-product-single.php). While it is on the
page the summary's price and WooCommerce's price for the chosen option are hidden. */
.falcon-product__summary:has(.falcon-buy-price) > .falcon-product__price,
.single_variation_wrap:has(.falcon-buy-price) .woocommerce-variation-price {
display: none !important;
}
.woocommerce div.product .falcon-buy-price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 8px;
margin: 0 6px 0 0;
color: var(--falcon-brand);
font-family: var(--falcon-font);
font-size: 28px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.woocommerce div.product .falcon-buy-price :is(.price, .amount, ins) {
color: inherit;
font-size: inherit;
font-weight: inherit;
text-decoration: none;
}
.woocommerce div.product .falcon-buy-price del,
.woocommerce div.product .falcon-buy-price del .amount {
color: var(--falcon-lower-text);
font-size: 16px;
font-weight: 500;
text-decoration: line-through;
}
/* Phones: small enough that "From £700.00", the quantity and the button share a row. */
@media (max-width: 479px) {
.woocommerce div.product .falcon-buy-price {
font-size: 23px;
}
.woocommerce div.product .falcon-product__add-to-cart .falcon-buy-price ~ .quantity input.qty {
width: 60px;
}
}
/* Simple products: the price, the quantity and the button on one row. */
.woocommerce div.product .falcon-product__add-to-cart form.cart:has(> .falcon-buy-price) {
flex-wrap: wrap;
align-items: center;
row-gap: 12px;
}
.woocommerce div.product form.cart:not(.variations_form) > .falcon-buy-price {
margin-right: 16px;
}
.falcon-buy-price.is-fresh {
animation: falcon-buy-price 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes falcon-buy-price {
from {
opacity: 0;
transform: translateY(4px);
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-buy-price.is-fresh {
animation: none;
}
}
/* SKU and categories (Elementor's product meta widget, inline view). */
.falcon-product-meta {
color: var(--falcon-text);
font-family: var(--falcon-font);
font-size: 14px;
font-weight: 400;
}
.falcon-product-meta .product_meta {
display: flex;
flex-wrap: wrap;
margin-inline: -7.5px;
}
.falcon-product-meta__item {
position: relative;
margin-inline: 7.5px;
}
.falcon-product-meta__label {
font-weight: 700;
}
.falcon-product .falcon-product-meta a {
color: var(--falcon-accent);
}
.falcon-product__summary .posted_in {
display: none;
}
/* Above the description: the SKU only, as a small tag over the heading. */
.falcon-product__description > .falcon-product-meta {
align-self: flex-start;
margin-bottom: -14px;
padding: 6px 14px;
border-radius: 999px;
background: var(--falcon-bg-light);
color: var(--falcon-lower-text);
font-size: 13px;
}
.falcon-product__description > .falcon-product-meta :is(.posted_in, .tagged_as) {
display: none;
}
.falcon-product__description > .falcon-product-meta .falcon-product-meta__label {
color: var(--falcon-dark);
font-weight: 600;
}
/* Add to cart (Elementor's add to cart widget, then the template's custom CSS). */
.woocommerce div.product .falcon-product__add-to-cart form.cart {
margin: 0;
}
.woocommerce div.product .falcon-product__add-to-cart form.cart.variations_form .woocommerce-variation-add-to-cart,
.woocommerce div.product .falcon-product__add-to-cart form.cart:not(.grouped_form):not(.variations_form) {
display: flex;
flex-wrap: nowrap;
}
.woocommerce div.product .falcon-product__add-to-cart form.cart .button:where(:not(:first-child)),
.woocommerce div.product .falcon-product__add-to-cart form.cart button:where(:not(:first-child)) {
margin-block-start: 0;
margin-inline-start: 10px;
}
.woocommerce div.product .falcon-product__add-to-cart .quantity {
vertical-align: middle;
}
.woocommerce div.product .falcon-product__add-to-cart .quantity .qty {
margin-inline-end: 0;
vertical-align: top;
}
.woocommerce div.product .falcon-product__add-to-cart .quantity input {
height: 100%;
}
.woocommerce .falcon-product .falcon-product__add-to-cart .cart button,
.woocommerce .falcon-product .falcon-product__add-to-cart .cart .button {
padding: 0 20px;
border-radius: 999px;
background-color: var(--falcon-brand);
color: var(--falcon-white);
font-family: var(--falcon-font);
font-weight: 400;
text-transform: capitalize;
transition: all 0.2s;
}
.woocommerce .falcon-product .falcon-product__add-to-cart .cart button:hover,
.woocommerce .falcon-product .falcon-product__add-to-cart .cart .button:hover {
background-color: var(--falcon-bg-blue);
color: var(--falcon-brand);
}
.falcon-product .falcon-product__add-to-cart .quantity .qty {
transition: all 0.2s;
}
:where(.single-product) .variations tr,
:where(.single-product) .variations tr td,
:where(.single-product) .variations tr th {
background: none !important;
border: none;
padding: 0;
}
:where(.single-product) .variations {
display: block !important;
}
:where(.single-product) .variations tr {
display: block !important;
margin-bottom: 20px !important;
}
:where(.single-product) .variations tr th,
:where(.single-product) .variations tr td {
display: block !important;
width: 100% !important;
padding: 0 !important;
background: none !important;
border: none !important;
}
:where(.single-product) .variations .label {
display: block !important;
margin-bottom: 8px;
font-weight: 600;
color: #000000;
text-align: left;
}
:where(.single-product) .variations tr td.value {
display: flex !important;
flex-wrap: wrap;
gap: 10px;
padding: 0 !important;
}
:where(.single-product) .variations .reset_variations {
display: none !important;
}
:where(.single-product) .woocommerce-variation-price,
:where(.single-product) .woocommerce-variation-price .price {
font-family: "Inter", sans-serif !important;
font-size: 24px !important;
color: #1c3390 !important;
}
:where(.single-product) .woocommerce-variation-price {
margin-bottom: 20px;
}
.woocommerce:where(.single-product) .quantity {
display: flex;
align-items: center;
gap: 10px;
}
.woocommerce:where(.single-product) .quantity input.qty {
width: 70px;
padding: 10px 14px;
font-size: 14px;
border: 1px solid #ddd;
border-radius: 9999px;
background-color: #f1f5f7;
color: #1c3390;
text-align: center;
appearance: none;
-moz-appearance: textfield;
transition: all 0.2s ease;
}
.woocommerce:where(.single-product) .quantity input.qty::-webkit-outer-spin-button,
.woocommerce:where(.single-product) .quantity input.qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.woocommerce:where(.single-product) .quantity input.qty:focus {
outline: none;
border-color: #1c3390;
box-shadow: 0 0 0 1px #1c3390;
}
:where(.single-product) .woocommerce-variation {
animation: none !important;
opacity: 1 !important;
transition: none !important;
}
:where(.single-product) div.ppcp-messages {
margin-top: 20px !important;
}
:where(.single-product) div.ppc-button-wrapper {
margin-top: 15px !important;
}
/* The PayPal button on the product page adds to the basket without the form's options. */
:where(.single-product) .product .ppc-button-wrapper {
display: none !important;
}
/* Customizer CSS: the add to cart row with the installation options. */
.woocommerce-variation-add-to-cart.variations_button {
display: flex;
flex-wrap: wrap !important;
align-items: center;
gap: 12px;
}
.woocommerce-variation-add-to-cart.variations_button #lp-mif-wrap {
flex: 0 0 100% !important;
width: 100% !important;
margin: 0 0 10px 0 !important;
padding-top: 18px;
}
.woocommerce-variation-add-to-cart.variations_button .quantity,
.woocommerce-variation-add-to-cart.variations_button button.single_add_to_cart_button {
flex: 0 0 auto;
}
.woocommerce-variation-add-to-cart.variations_button .quantity {
margin: 0 !important;
}
.woocommerce-variation-add-to-cart.variations_button button.single_add_to_cart_button {
width: auto !important;
flex: 0 0 auto !important;
margin: 0 !important;
align-self: center;
}
.woocommerce-variation-add-to-cart.variations_button button.single_add_to_cart_button,
.woocommerce-variation-add-to-cart.variations_button .single_add_to_cart_button {
max-width: none !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/* Child theme: the chosen option's own price is not shown (trade prices show it with inline styles). */
.woocommerce-variation-price {
display: none;
}
/* Customizer CSS: the variation description moves to the specifications panel (30-product-single.js). */
.woocommerce-variation-description {
display: none !important;
height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
/* Customizer CSS: trade and distributor prices (Code Snippet 38). */
.ft-trade-price-box--variable-from {
opacity: 0;
transition: opacity 0.2s ease;
}
.ft-rrp-inline {
text-decoration: line-through;
color: #757575;
}
.ft-trade-price-main {
font-size: 20px;
color: var(--falcon-brand);
font-family: "Inter", sans-serif;
}
.ft-rrp {
font-size: 0.85em;
color: #555;
margin-top: 4px;
}
/* Customizer CSS: sales videos (Code Snippet 33). */
.falcon-sales-videos-wrap {
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
margin: 0;
display: block;
width: 100%;
}
.falcon-sales-videos-heading {
margin: 0 0 20px;
}
.falcon-sales-videos {
display: grid !important;
gap: 24px;
align-items: start;
width: 100%;
}
.falcon-sales-video-item {
width: 100%;
min-width: 0;
display: block;
}
.falcon-sales-video-embed {
width: 100%;
display: block;
}
.falcon-sales-video-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
padding-top: 0;
overflow: hidden;
border-radius: 8px;
background: #000;
display: block;
}
.falcon-sales-video-frame iframe,
.falcon-sales-video-frame video,
.falcon-sales-video-frame embed,
.falcon-sales-video-frame object {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
border: 0;
display: block;
}
.falcon-sales-videos.count-1 { grid-template-columns: 1fr; }
.falcon-sales-videos.count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.falcon-sales-videos.count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.falcon-sales-videos.count-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.falcon-sales-videos:not(.count-1):not(.count-2):not(.count-3):not(.count-4) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) {
.falcon-sales-videos.count-3,
.falcon-sales-videos.count-4,
.falcon-sales-videos:not(.count-1):not(.count-2):not(.count-3):not(.count-4) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.falcon-sales-videos,
.falcon-sales-videos.count-1,
.falcon-sales-videos.count-2,
.falcon-sales-videos.count-3,
.falcon-sales-videos.count-4,
.falcon-sales-videos:not(.count-1):not(.count-2):not(.count-3):not(.count-4) {
grid-template-columns: 1fr;
}
}
.falcon-product__videos {
gap: 20px;
}
/* Description and features. */
.falcon-product__about {
flex-direction: row;
gap: 30px;
}
.falcon-product__description,
.falcon-product__features {
display: flex;
flex-direction: column;
gap: 30px;
}
.falcon-product__description {
width: 100%;
}
.falcon-product__features {
align-self: flex-start;
width: 50%;
gap: 22px;
padding: 30px 30px 32px;
border: 1.5px solid #dfe4ee;
border-radius: 24px;
background: #f7f8fc; /* As the option cards (34-variation-pills.css). */
}
@media (max-width: 767px) {
.falcon-product__about {
flex-wrap: wrap;
}
.falcon-product__description,
.falcon-product__features {
width: 100%;
}
.falcon-product__features {
padding: 24px 22px 26px;
border-radius: 20px;
}
}
.falcon-product .falcon-product__about-heading {
margin: 0;
font-size: 32px;
font-weight: 500;
}
/* Headings in the description and the Product Comparison text step down from the section heading
above them ("Read more about this product.", 32px): 26px, 20px, 17px and 15px, semi-bold. */
:is(.falcon-product__content, .falcon-product__comparison-table) :is(h2, h3, h4, h5, h6) {
font-weight: 600;
letter-spacing: -0.01em;
}
:is(.falcon-product__content, .falcon-product__comparison-table) h2 {
margin: 44px 0 14px;
font-size: 26px;
line-height: 1.3;
}
:is(.falcon-product__content, .falcon-product__comparison-table) h3 {
margin: 32px 0 10px;
font-size: 20px;
line-height: 1.35;
}
:is(.falcon-product__content, .falcon-product__comparison-table) h4 {
margin: 28px 0 8px;
font-size: 17px;
line-height: 1.4;
}
:is(.falcon-product__content, .falcon-product__comparison-table) :is(h5, h6) {
margin: 24px 0 8px;
font-size: 15px;
line-height: 1.4;
letter-spacing: 0;
}
:is(.falcon-product__content, .falcon-product__comparison-table) > :first-child {
margin-top: 0;
}
@media (max-width: 767px) {
.falcon-product .falcon-product__about-heading {
font-size: 26px;
line-height: 1.25;
}
:is(.falcon-product__content, .falcon-product__comparison-table) h2 {
margin-top: 36px;
font-size: 22px;
}
:is(.falcon-product__content, .falcon-product__comparison-table) h3 {
margin-top: 28px;
font-size: 19px;
}
}
.falcon-product__content li {
margin-bottom: 10px;
}
.falcon-product__content ul,
.falcon-product__content p {
margin-bottom: 30px;
}
.falcon-product__content img {
margin-bottom: 20px;
margin-top: 20px;
border-radius: 10px;
}
.falcon-product__features-heading {
display: flex;
align-items: center;
gap: 14px;
margin: 0;
padding-bottom: 20px;
border-bottom: 1px solid #dfe4ee;
color: var(--falcon-brand);
font-family: var(--falcon-font);
font-size: 22px;
font-weight: 600;
line-height: 1.25;
}
/* The eagle in a tinted square. */
.falcon-product__features-heading .falcon-icon {
flex-shrink: 0;
width: 46px;
height: 46px;
padding: 9px;
border-radius: 14px;
background: #fff;
box-shadow: inset 0 0 0 1px #e6eaf0;
}
/* The features: each with a tick in a soft blue circle. */
.falcon-product__features-list {
color: #33373d;
font-size: 15px;
line-height: 1.5;
}
.falcon-product__features-list ul,
.falcon-product__features-list ol {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.falcon-product__features-list li {
position: relative;
margin: 0;
padding-left: 34px;
}
.falcon-product__features-list li::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C3390' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
box-shadow: 0 0 0 1px #e6eaf3;
}
.falcon-product__features-list p {
margin: 0 0 12px;
}
.falcon-product__features-list > :last-child {
margin-bottom: 0;
}
/* Comparison: the table itself is styled in 30-product-tables.css. */
.falcon-product .falcon-product__comparison-heading {
margin-bottom: 20px;
}
/* Specifications: 38-product-specs.css. */
/* Works well with this product. */
.falcon-product__upsells,
.falcon-product__reviews {
gap: 20px;
}
.falcon-product__upsells-intro {
margin-bottom: -5px;
}
.falcon-product__upsells-grid {
margin-top: 30px;
}
.falcon-product__upsells-grid--empty {
padding-block: 30px;
}
/* WooCommerce sizes and colours every span.price inside div.product, the page root; the cards keep
the price style they have everywhere else (31-cards.css). */
.woocommerce div.product .falcon-product__upsells-grid .falcon-product-card__price .price {
color: var(--falcon-brand);
font-size: 14px;
}
.woocommerce div.product .falcon-product__upsells-grid .falcon-product-card__price .price ins {
font-weight: 400;
}
/* Reviews: WooCommerce's tabs, as Elementor's product data tabs widget styled them. */
.woocommerce div.product.falcon-product ul.tabs::before {
border-bottom: 0;
bottom: auto;
content: none;
left: auto;
position: static;
width: auto;
z-index: auto;
}
.woocommerce div.product.falcon-product ul.tabs {
margin: 0;
}
.woocommerce div.product.falcon-product ul.tabs li {
padding: 0;
}
.woocommerce div.product.falcon-product ul.tabs li a {
line-height: 1;
padding: 0.8em 1.2em;
}
.woocommerce div.product.falcon-product ul.tabs li::after,
.woocommerce div.product.falcon-product ul.tabs li::before {
border: 0;
bottom: auto;
box-sizing: border-box;
content: none;
height: auto;
position: static;
width: auto;
}
.woocommerce div.product.falcon-product .woocommerce-tabs .panel {
border-radius: 0;
border-width: 0;
border-top: 1px solid #d3ced2;
box-shadow: none;
margin: -1px 0 0;
padding: 20px;
}
/* Back order: status and expected delivery as one card (inc/50-product-single.php). */
.falcon-backorder {
display: flex;
align-items: center;
gap: 14px;
margin: 4px 0 20px;
padding: 14px 18px;
border: 1px solid #f2dfb5;
border-radius: 16px;
background: #fff8ea;
}
.falcon-backorder__icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
color: #b7791f;
box-shadow: 0 0 0 1px #f2dfb5;
}
.falcon-backorder__icon .falcon-icon {
width: 20px;
height: 20px;
}
.woocommerce div.product .falcon-backorder p.falcon-backorder__status,
.falcon-backorder p.falcon-backorder__status {
margin: 0;
color: #8a5a12;
font-size: 15px;
font-weight: 700;
line-height: 1.35;
}
.falcon-backorder p.falcon-backorder__eta {
margin: 2px 0 0;
color: var(--falcon-text);
font-size: 14px;
line-height: 1.4;
}
.falcon-backorder__eta strong {
font-weight: 700;
}
/* Deposit or full payment: two selectable cards above the quantity and Add to Cart. */
.woocommerce div.product .falcon-product__add-to-cart form.cart:not(.grouped_form):not(.variations_form):has(> .falcon-deposit) {
flex-wrap: wrap;
}
.falcon-product__add-to-cart .falcon-deposit {
flex: 1 0 100%;
width: 100%;
min-width: 0;
margin: 0 0 18px;
padding: 0;
border: 0;
}
.falcon-deposit__legend {
margin: 0 0 10px;
padding: 0;
color: var(--falcon-dark);
font-size: 15px;
font-weight: 700;
}
.falcon-deposit__options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.falcon-deposit__option {
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0;
padding: 14px 16px;
border: 1.5px solid #e3e7ef;
border-radius: 16px;
background: #fff;
line-height: 1.35;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.falcon-deposit__option:hover {
border-color: #c9d2f1;
}
.falcon-deposit__option:has(.falcon-deposit__input:checked) {
border-color: var(--falcon-brand);
background: #f5f7ff;
box-shadow: 0 8px 20px -14px rgba(28, 51, 144, 0.6);
}
.falcon-deposit__input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.falcon-deposit__mark {
position: relative;
flex: 0 0 auto;
width: 20px;
height: 20px;
margin-top: 1px;
border: 2px solid #b8c0d4;
border-radius: 50%;
background: #fff;
transition: border-color 0.2s ease;
}
.falcon-deposit__mark::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--falcon-brand);
transform: scale(0);
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.falcon-deposit__input:checked + .falcon-deposit__mark {
border-color: var(--falcon-brand);
}
.falcon-deposit__input:checked + .falcon-deposit__mark::after {
transform: scale(1);
}
.falcon-deposit__input:focus-visible + .falcon-deposit__mark {
outline: 3px solid var(--falcon-brand);
outline-offset: 3px;
}
.falcon-deposit__text {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.falcon-deposit__title {
color: var(--falcon-dark);
font-size: 15px;
font-weight: 700;
}
.falcon-deposit__note {
color: var(--falcon-lower-text);
font-size: 13.5px;
}
@media (max-width: 479px) {
.falcon-deposit__options {
grid-template-columns: minmax(0, 1fr);
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-deposit__option,
.falcon-deposit__mark::after {
transition: none;
}
}
/* "Where would you like it fitted?" (Snippet 18, mu-plugins/falcon-site/snippets/18-...): its two
ticks become option cards like the deposit choice above. The snippet's markup and inline styles
are left as they are, so !important beats the inline styles; its script still shows and hides the
box and the options (display is never set here). */
.falcon-product #lp-fit-options {
min-width: 0;
margin: 0 0 8px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
}
.falcon-product #lp-fit-options legend {
margin: 0 0 12px;
padding: 0 !important;
color: var(--falcon-dark) !important;
font-size: 16px;
font-weight: 700 !important;
letter-spacing: -0.01em;
}
.falcon-product #lp-falcon-wrap,
.woocommerce-variation-add-to-cart.variations_button #lp-mif-wrap {
margin: 0 0 10px !important;
padding: 0 !important;
}
.falcon-product #lp-fit-options label {
gap: 12px !important;
align-items: center !important;
margin: 0;
padding: 14px 16px;
border: 1.5px solid #e3e7ef;
border-radius: 16px;
background: #fff;
color: var(--falcon-dark);
font-size: 15px;
font-weight: 600 !important;
line-height: 1.35;
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.falcon-product #lp-fit-options label:hover {
border-color: #c9d2f1;
}
.falcon-product #lp-fit-options label:has(input:checked) {
border-color: var(--falcon-brand);
background: #f5f7ff;
box-shadow: 0 8px 20px -14px rgba(28, 51, 144, 0.6);
}
/* The tick box: rounded, navy with a white tick when chosen. */
.falcon-product #lp-fit-options input[type="checkbox"] {
flex: 0 0 auto;
width: 22px;
height: 22px;
margin: 0 !important;
border: 2px solid #b8c0d4;
border-radius: 7px;
background: #fff center / 14px no-repeat;
appearance: none;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.falcon-product #lp-fit-options input[type="checkbox"]:checked {
border-color: var(--falcon-brand);
background-color: var(--falcon-brand);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.falcon-product #lp-fit-options input[type="checkbox"]:focus-visible {
outline: 3px solid var(--falcon-brand);
outline-offset: 3px;
}
/* The price in the Mobile Installation label, as the pills show theirs. */
.falcon-product #lp-mif-label .woocommerce-Price-amount {
color: var(--falcon-brand);
}
@media (prefers-reduced-motion: reduce) {
.falcon-product #lp-fit-options label,
.falcon-product #lp-fit-options input[type="checkbox"] {
transition: none;
}
}
/* 30-product-reviews.css */
/* Customer reviews on product pages: template-parts/product/reviews.php,
woocommerce/single-product-reviews.php, woocommerce/single-product/review.php and
37-product-reviews.js. Replaces the customizer CSS the Elementor site used.
WooCommerce's stylesheet is loaded on product pages. The markup uses the theme's own classes so
its #reviews, .commentlist, .star-rating and p.stars rules don't apply; where it targets ids
(#review_form #respond p, #reviews #comment), the rules below match its weight and win on order. */
.falcon-product-reviews {
--falcon-reviews-star: #f5a524;
--falcon-reviews-star-off: #dbe1ea;
--falcon-reviews-line: #e3e8ef;
--falcon-reviews-muted: #64687a;
--falcon-reviews-body: #3d4152;
--falcon-reviews-error: #c0262d;
--falcon-reviews-focus: 0 0 0 3px rgba(28, 51, 144, 0.22);
display: grid;
grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
gap: 32px 56px;
align-items: start;
margin-top: 8px;
color: var(--falcon-dark);
font-family: var(--falcon-font);
font-size: 15px;
line-height: 1.6;
}
.falcon-product-reviews p {
margin: 0;
}
/* Stars: the theme's star icon five times, with a filled copy clipped to the rating on top. */
.falcon-rating {
--falcon-star-size: 16px;
position: relative;
display: inline-flex;
flex: none;
width: max-content;
line-height: 0;
vertical-align: middle;
}
.falcon-rating__stars,
.falcon-rating__fill {
display: flex;
white-space: nowrap;
}
.falcon-rating__stars {
color: var(--falcon-reviews-star-off);
}
.falcon-rating__fill {
position: absolute;
inset: 0 auto 0 0;
width: var(--falcon-rating, 0%);
overflow: hidden;
color: var(--falcon-reviews-star);
}
.falcon-rating .falcon-icon {
flex: none;
box-sizing: content-box;
width: calc(var(--falcon-star-size) * 1.125);
height: var(--falcon-star-size);
padding-inline: 1px;
fill: currentColor;
}
.falcon-rating--lg {
--falcon-star-size: 22px;
}
/* Summary panel. */
.falcon-product-reviews__summary {
position: sticky;
top: calc(24px + var(--falcon-pinned-h, 0px));
transition: top 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
display: flex;
flex-direction: column;
gap: 24px;
padding: 28px;
border-radius: 16px;
background: var(--falcon-bg-light);
}
.falcon-product-reviews__score {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.falcon-product-reviews__average {
display: flex;
align-items: baseline;
gap: 8px;
line-height: 1;
}
.falcon-product-reviews__average-value {
color: var(--falcon-dark);
font-size: 56px;
font-weight: 700;
letter-spacing: -0.03em;
}
.falcon-product-reviews__average-max {
color: var(--falcon-reviews-muted);
font-size: 15px;
font-weight: 500;
}
.falcon-product-reviews .falcon-product-reviews__count {
color: var(--falcon-reviews-muted);
font-size: 14px;
line-height: 1.5;
}
.falcon-product-reviews .falcon-product-reviews__empty-title {
color: var(--falcon-dark);
font-size: 20px;
font-weight: 600;
line-height: 1.3;
}
.falcon-product-reviews__bars {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.falcon-product-reviews__bar-row {
display: grid;
grid-template-columns: 30px minmax(0, 1fr) 28px;
align-items: center;
gap: 12px;
font-size: 14px;
line-height: 1;
}
.falcon-product-reviews__bar-label {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--falcon-dark);
font-weight: 600;
}
.falcon-product-reviews__bar-label .falcon-icon {
width: 13px;
height: 12px;
fill: var(--falcon-reviews-star);
}
.falcon-product-reviews__bar {
height: 8px;
overflow: hidden;
border-radius: 999px;
background: #fff;
box-shadow: inset 0 0 0 1px var(--falcon-reviews-line);
}
.falcon-product-reviews__bar-fill {
display: block;
height: 100%;
border-radius: inherit;
background: var(--falcon-reviews-star);
}
.falcon-product-reviews__bar-count {
color: var(--falcon-reviews-muted);
font-variant-numeric: tabular-nums;
text-align: right;
}
.falcon-product-reviews__cta {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 24px;
border-top: 1px solid var(--falcon-reviews-line);
}
.falcon-product-reviews--empty .falcon-product-reviews__cta {
padding-top: 0;
border-top: 0;
}
.falcon-product-reviews .falcon-product-reviews__cta-title {
color: var(--falcon-dark);
font-size: 16px;
font-weight: 600;
}
.falcon-product-reviews .falcon-product-reviews__cta-text {
margin-bottom: 10px;
color: var(--falcon-reviews-muted);
font-size: 14px;
line-height: 1.5;
}
/* Pill buttons: "Write a review", "Show more reviews" and the form's submit. */
.falcon-product-reviews .falcon-product-reviews__write,
.falcon-product-reviews .falcon-product-reviews__more,
.falcon-product-reviews .falcon-review-form__submit {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
margin: 0;
padding: 13px 28px;
border: 1.5px solid var(--falcon-brand);
border-radius: 999px;
background: var(--falcon-brand);
color: #fff;
font-family: var(--falcon-font);
font-size: 15px;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: normal;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.falcon-product-reviews .falcon-product-reviews__write:hover,
.falcon-product-reviews .falcon-review-form__submit:hover {
border-color: #162a78;
background: #162a78;
color: #fff;
}
.falcon-product-reviews .falcon-product-reviews__more {
background: #fff;
color: var(--falcon-brand);
}
.falcon-product-reviews .falcon-product-reviews__more:hover {
background: var(--falcon-brand);
color: #fff;
}
.falcon-product-reviews .falcon-product-reviews__write:focus,
.falcon-product-reviews .falcon-product-reviews__more:focus,
.falcon-product-reviews .falcon-review-form__submit:focus {
outline: none;
}
.falcon-product-reviews .falcon-product-reviews__write:focus-visible,
.falcon-product-reviews .falcon-product-reviews__more:focus-visible,
.falcon-product-reviews .falcon-review-form__submit:focus-visible {
box-shadow: var(--falcon-reviews-focus);
}
.falcon-product-reviews .falcon-product-reviews__write {
width: 100%;
}
/* Review cards. */
.falcon-product-reviews__main {
min-width: 0;
}
.falcon-product-reviews__list,
.falcon-product-reviews .children {
display: grid;
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
.falcon-product-reviews .children {
margin: 12px 0 0 28px;
padding: 0;
}
.falcon-product-reviews .falcon-review {
margin: 0;
padding: 0;
}
.falcon-product-reviews .falcon-review[hidden] {
display: none;
}
.falcon-review__card {
padding: 24px 26px;
border: 1px solid var(--falcon-reviews-line);
border-radius: 16px;
background: #fff;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.falcon-review__card:hover {
border-color: #cfd7e4;
box-shadow: 0 6px 20px rgba(27, 29, 40, 0.06);
}
.falcon-review__card:focus {
outline: none;
}
.falcon-review__card:focus-visible {
box-shadow: var(--falcon-reviews-focus);
}
.falcon-review--reply > .falcon-review__card {
border-color: transparent;
background: var(--falcon-bg-light);
}
.falcon-review__header {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 6px 14px;
margin-bottom: 14px;
}
.falcon-review__avatar {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--falcon-bg-blue);
color: var(--falcon-brand);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1;
}
.falcon-review__who {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.falcon-product-reviews .falcon-review__author {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
line-height: 1.35;
}
.falcon-review__name {
color: var(--falcon-dark);
font-size: 16px;
font-weight: 600;
overflow-wrap: anywhere;
}
.falcon-review__verified {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px 3px 7px;
border-radius: 999px;
background: #eef0ff;
color: var(--falcon-brand);
font-size: 12px;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
}
.falcon-review__verified .falcon-icon {
width: 10px;
height: 10px;
fill: currentColor;
}
.falcon-review__date {
color: var(--falcon-reviews-muted);
font-size: 13px;
line-height: 1.4;
}
.falcon-review__stars {
align-self: start;
margin-top: 4px;
}
.falcon-product-reviews .falcon-review__pending {
margin-bottom: 12px;
padding: 10px 14px;
border-radius: 10px;
background: #fff6e6;
color: #6b4300;
font-size: 14px;
line-height: 1.5;
}
.falcon-review__text {
color: var(--falcon-reviews-body);
font-size: 15px;
line-height: 1.7;
overflow-wrap: anywhere;
}
.falcon-product-reviews .falcon-review__text p + p {
margin-top: 10px;
}
/* Long reviews fold to five lines once the script has measured them (all text shows without it). */
.falcon-review__text.is-clampable {
max-height: calc(1.7em * 5);
overflow: hidden;
}
.falcon-review__text.is-clamped {
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.4em), transparent);
mask-image: linear-gradient(to bottom, #000 calc(100% - 3.4em), transparent);
}
.falcon-review__text.is-expanded {
max-height: none;
-webkit-mask-image: none;
mask-image: none;
}
.falcon-product-reviews .falcon-review__toggle {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 8px 0 0;
padding: 2px 0;
border: 0;
border-radius: 4px;
background: none;
color: var(--falcon-brand);
font-family: var(--falcon-font);
font-size: 14px;
font-weight: 600;
line-height: 1.4;
cursor: pointer;
}
.falcon-product-reviews .falcon-review__toggle[hidden] {
display: none;
}
.falcon-product-reviews .falcon-review__toggle::after {
content: "";
width: 6px;
height: 6px;
margin-top: -3px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 0.2s ease, margin 0.2s ease;
}
.falcon-product-reviews .falcon-review__toggle[aria-expanded="true"]::after {
margin-top: 3px;
transform: rotate(-135deg);
}
.falcon-product-reviews .falcon-review__toggle:focus {
background: none;
color: var(--falcon-brand);
outline: none;
}
.falcon-product-reviews .falcon-review__toggle:hover {
background: none;
color: var(--falcon-dark);
}
.falcon-product-reviews .falcon-review__toggle:focus-visible {
box-shadow: var(--falcon-reviews-focus);
}
@media (prefers-reduced-motion: no-preference) {
.falcon-review.is-revealed {
animation: falcon-review-in 0.35s ease both;
}
}
@keyframes falcon-review-in {
from {
opacity: 0;
transform: translateY(8px);
}
}
/* Show more. */
.falcon-product-reviews__more-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-top: 28px;
text-align: center;
}
.falcon-product-reviews__more-wrap[hidden] {
display: none;
}
.falcon-product-reviews .falcon-product-reviews__progress {
color: var(--falcon-reviews-muted);
font-size: 14px;
}
.falcon-product-reviews__progress-bar {
display: block;
width: 200px;
max-width: 100%;
height: 4px;
overflow: hidden;
border-radius: 999px;
background: var(--falcon-reviews-line);
}
.falcon-product-reviews__progress-bar span {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: var(--falcon-brand);
transition: width 0.3s ease;
}
.falcon-product-reviews__more-wrap .falcon-product-reviews__more {
margin-top: 6px;
}
.falcon-product-reviews .falcon-product-reviews__note {
margin-top: 24px;
color: var(--falcon-reviews-muted);
font-size: 14px;
}
/* Review form. */
.falcon-review-form {
margin-top: 40px;
padding: 32px;
border-radius: 16px;
background: var(--falcon-bg-light);
scroll-margin-top: 24px;
}
.falcon-product-reviews--empty .falcon-review-form {
margin-top: 0;
}
.falcon-product-reviews .falcon-review-form__title {
margin: 0 0 6px;
color: var(--falcon-dark);
font-size: 22px;
font-weight: 600;
line-height: 1.3;
}
.falcon-product-reviews .falcon-review-form__title small {
display: block;
font-size: 14px;
}
.falcon-product-reviews .falcon-review-form__intro {
color: var(--falcon-reviews-muted);
font-size: 14px;
}
.falcon-product-reviews .falcon-review-form__intro .required {
color: var(--falcon-reviews-error);
}
.falcon-product-reviews .falcon-review-form__form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px 20px;
margin-top: 20px;
}
.falcon-product-reviews .falcon-review-form__form > * {
grid-column: 1 / -1;
margin: 0;
}
.falcon-product-reviews .falcon-review-form__form > .comment-notes {
margin-top: -12px;
}
.falcon-product-reviews .falcon-review-form__form > .comment-form-author,
.falcon-product-reviews .falcon-review-form__form > .comment-form-email {
grid-column: auto;
}
.falcon-product-reviews #review_form #respond p {
margin: 0;
}
.falcon-product-reviews .falcon-review-form__field {
display: flex;
flex-direction: column;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.falcon-product-reviews .falcon-review-form__label {
display: block;
float: none;
width: 100%;
margin: 0 0 8px;
padding: 0;
color: var(--falcon-dark);
font-size: 14px;
font-weight: 600;
line-height: 1.4;
}
.falcon-product-reviews .falcon-review-form__label .required {
color: var(--falcon-reviews-error);
}
.falcon-product-reviews #review_form .falcon-review-form__input {
width: 100%;
min-height: 48px;
margin: 0;
padding: 12px 14px;
border: 1px solid #cdd5df;
border-radius: 10px;
background: #fff;
box-shadow: none;
color: var(--falcon-dark);
font-family: var(--falcon-font);
font-size: 15px;
line-height: 1.5;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.falcon-product-reviews #review_form #comment {
height: auto;
min-height: 150px;
resize: vertical;
}
.falcon-product-reviews #review_form .falcon-review-form__input::placeholder {
color: #8a90a2;
opacity: 1;
}
.falcon-product-reviews #review_form .falcon-review-form__input:hover {
border-color: #a9b5c6;
}
.falcon-product-reviews #review_form .falcon-review-form__input:focus {
border-color: var(--falcon-brand);
box-shadow: var(--falcon-reviews-focus);
outline: none;
}
.falcon-product-reviews #review_form .falcon-review-form__input[aria-invalid="true"] {
border-color: var(--falcon-reviews-error);
}
.falcon-product-reviews #review_form .falcon-review-form__input[aria-invalid="true"]:focus {
box-shadow: 0 0 0 3px rgba(192, 38, 45, 0.16);
}
.falcon-review-form__error {
display: flex;
align-items: flex-start;
gap: 6px;
margin-top: 8px;
color: var(--falcon-reviews-error);
font-size: 13px;
font-weight: 500;
line-height: 1.4;
}
.falcon-review-form__error::before {
content: "!";
display: grid;
flex: none;
place-items: center;
width: 16px;
height: 16px;
margin-top: 1px;
border-radius: 50%;
background: var(--falcon-reviews-error);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1;
}
.falcon-review-form__error[hidden] {
display: none;
}
/* Star picker: radio buttons named "rating". Hovering previews a rating; the chosen one stays lit. */
.falcon-star-picker__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
}
.falcon-star-picker {
display: inline-flex;
margin-left: -5px;
}
.falcon-star-picker__star {
position: relative;
display: block;
padding: 5px;
border-radius: 10px;
color: var(--falcon-reviews-star-off);
line-height: 0;
cursor: pointer;
transition: color 0.12s ease, transform 0.12s ease;
}
.falcon-star-picker__star .falcon-icon {
display: block;
width: 34px;
height: 30px;
fill: currentColor;
}
.falcon-product-reviews .falcon-star-picker__input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.falcon-star-picker:has(.falcon-star-picker__input:checked) .falcon-star-picker__star {
color: var(--falcon-reviews-star);
}
.falcon-star-picker__star:has(.falcon-star-picker__input:checked) ~ .falcon-star-picker__star {
color: var(--falcon-reviews-star-off);
}
.falcon-star-picker:has(.falcon-star-picker__star:hover) .falcon-star-picker__star {
color: var(--falcon-reviews-star);
}
.falcon-star-picker:has(.falcon-star-picker__star:hover) .falcon-star-picker__star:hover ~ .falcon-star-picker__star {
color: var(--falcon-reviews-star-off);
}
.falcon-star-picker__star:hover {
transform: scale(1.12);
}
.falcon-star-picker__star:has(.falcon-star-picker__input:focus-visible) {
outline: 2px solid var(--falcon-brand);
outline-offset: 0;
}
.falcon-review-form__field--rating.is-invalid .falcon-star-picker__star {
color: #f3c9cb;
}
.falcon-star-picker__text {
min-width: 9em;
color: var(--falcon-reviews-muted);
font-size: 14px;
font-weight: 500;
}
.falcon-star-picker__text.is-set {
color: var(--falcon-dark);
font-weight: 600;
}
.falcon-product-reviews .falcon-review-form__consent {
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--falcon-reviews-muted);
font-size: 14px;
line-height: 1.5;
}
.falcon-product-reviews .falcon-review-form__consent input {
flex: none;
width: 18px;
height: 18px;
margin: 1px 0 0;
accent-color: var(--falcon-brand);
cursor: pointer;
}
.falcon-product-reviews .falcon-review-form__consent label {
display: inline;
line-height: 1.5;
cursor: pointer;
}
.falcon-product-reviews .falcon-review-form__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
margin-top: 4px;
}
.falcon-product-reviews .falcon-review-form__submit {
min-width: 200px;
min-height: 52px;
padding-inline: 36px;
}
.falcon-product-reviews .falcon-review-form__submit.is-busy {
opacity: 0.75;
cursor: progress;
}
.falcon-product-reviews .logged-in-as,
.falcon-product-reviews .must-log-in {
color: var(--falcon-reviews-muted);
font-size: 14px;
}
@media (max-width: 1024px) {
.falcon-product-reviews {
grid-template-columns: minmax(0, 1fr);
gap: 28px;
}
.falcon-product-reviews__summary {
position: static;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 24px 48px;
}
.falcon-product-reviews__score {
padding-right: 48px;
border-right: 1px solid var(--falcon-reviews-line);
}
.falcon-product-reviews__score--empty {
padding-right: 0;
border-right: 0;
}
.falcon-product-reviews__bars {
max-width: 520px;
}
.falcon-product-reviews__cta {
display: grid;
grid-column: 1 / -1;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 2px 24px;
}
.falcon-product-reviews__cta-title,
.falcon-product-reviews__cta-text {
grid-column: 1;
}
.falcon-product-reviews .falcon-product-reviews__cta-text {
margin-bottom: 0;
}
.falcon-product-reviews .falcon-product-reviews__write {
grid-column: 2;
grid-row: 1 / span 2;
width: auto;
}
.falcon-product-reviews--empty .falcon-product-reviews__summary {
grid-template-columns: minmax(0, 1fr) auto;
}
.falcon-product-reviews--empty .falcon-product-reviews__cta {
display: block;
grid-column: auto;
}
}
@media (max-width: 767px) {
.falcon-product-reviews {
gap: 24px;
font-size: 14px;
}
.falcon-product-reviews__summary,
.falcon-product-reviews--empty .falcon-product-reviews__summary {
display: flex;
align-items: stretch;
gap: 20px;
padding: 22px 20px;
}
.falcon-product-reviews__score {
padding-right: 0;
border-right: 0;
}
.falcon-product-reviews__average-value {
font-size: 46px;
}
.falcon-product-reviews__cta {
display: flex;
align-items: stretch;
padding-top: 20px;
}
.falcon-product-reviews .falcon-product-reviews__write {
width: 100%;
}
.falcon-review__card {
padding: 18px;
border-radius: 14px;
}
.falcon-review__header {
grid-template-columns: auto minmax(0, 1fr);
gap: 12px;
margin-bottom: 12px;
}
.falcon-review__avatar {
width: 40px;
height: 40px;
font-size: 14px;
}
.falcon-review__stars {
grid-column: 1 / -1;
margin-top: 0;
}
.falcon-review__text {
font-size: 15px;
}
.falcon-product-reviews .children {
margin-left: 16px;
}
.falcon-review-form {
margin-top: 32px;
padding: 22px 18px;
}
.falcon-product-reviews .falcon-review-form__title {
font-size: 20px;
}
.falcon-product-reviews .falcon-review-form__form {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
.falcon-product-reviews .falcon-review-form__form > .comment-form-author,
.falcon-product-reviews .falcon-review-form__form > .comment-form-email {
grid-column: 1 / -1;
}
.falcon-star-picker__star .falcon-icon {
width: 38px;
height: 34px;
}
.falcon-product-reviews .falcon-review-form__submit {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-product-reviews *,
.falcon-product-reviews *::before,
.falcon-product-reviews *::after {
transition: none !important;
animation: none !important;
}
.falcon-star-picker__star:hover {
transform: none;
}
}
/* 30-product-tables.css */
/* Tables in product descriptions and comparisons, framed by falcon_product_tables(): a rounded card
with a navy header row and hairlines between rows, which scrolls sideways inside the frame when
there are too many columns for the screen. The header row is the thead, or a first row made only
of th cells. Pasted tables carry inline widths, borders, padding and colours, which only
!important can clear. */
.falcon-table {
margin: 20px 0 30px;
overflow-x: auto;
border: 1px solid #e6eaf0;
border-radius: 16px;
/* A soft shadow at an edge that has more columns past it. */
background:
linear-gradient(to right, #fff 30%, rgb(255 255 255 / 0)) left / 32px 100% no-repeat local,
linear-gradient(to left, #fff 30%, rgb(255 255 255 / 0)) right / 32px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgb(27 29 40 / 0.16), transparent) left / 12px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgb(27 29 40 / 0.16), transparent) right / 12px 100% no-repeat scroll,
var(--falcon-white);
}
.falcon-table:first-child {
margin-top: 0;
}
.falcon-table:last-child {
margin-bottom: 0;
}
.falcon-table > table {
width: 100% !important;
height: auto !important;
margin: 0 !important;
border: 0 !important;
border-collapse: collapse;
background: none !important;
color: var(--falcon-dark);
font-size: 15px;
line-height: 1.5;
}
.falcon-table :is(th, td) {
width: auto !important;
min-width: 6em;
height: auto !important;
padding: 14px 20px !important;
border: 0 !important;
border-bottom: 1px solid #edf0f4 !important;
background: none !important;
font-weight: 400;
text-align: left;
vertical-align: top;
}
.falcon-table tr:last-child > :is(th, td) {
border-bottom: 0 !important;
}
/* The first column labels the row. */
.falcon-table tbody :is(th, td):first-child:not(:only-child) {
color: var(--falcon-brand);
font-weight: 600;
}
.falcon-table tbody tr:hover > :is(th, td) {
background: #f7f9fc !important;
}
.falcon-table :is(thead th, thead td),
.falcon-table > table:not(:has(> thead)) > tbody:first-of-type > tr:first-child:not(:has(> td)) > th {
border-bottom: 0 !important;
background: var(--falcon-brand) !important;
color: var(--falcon-white);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.01em;
}
.falcon-table :is(th, td) > :is(p, ul, ol) {
margin: 0 0 8px;
}
.falcon-table :is(th, td) > :last-child {
margin-bottom: 0;
}
.falcon-table :is(ul, ol) {
padding-left: 18px;
}
.falcon-table li {
margin-bottom: 4px;
}
.falcon-table img {
margin: 0;
}
@media (max-width: 767px) {
.falcon-table {
border-radius: 14px;
}
.falcon-table > table {
font-size: 14px;
}
.falcon-table :is(th, td) {
padding: 12px 14px !important;
}
}
/* 31-cards.css */
/* Product card (template-parts/cards/product.php), category tile and product grids. */
.falcon-product-card {
--falcon-card-line: #e6eaf0;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
min-width: 0;
overflow: hidden;
border: 1px solid var(--falcon-card-line);
border-radius: 20px;
background: #fff;
font-family: var(--falcon-font);
transition: border-color 0.3s ease;
}
.falcon-product-card:hover,
.falcon-product-card:focus-within {
border-color: #c9d2f1;
}
.falcon-product-card:has(.falcon-product-card__title:focus-visible) {
outline: 2px solid var(--falcon-brand);
outline-offset: 3px;
}
/* Image: the packshot on white, square, lifting slightly on hover. */
/* The photo is fitted inside a fixed square, so tall or wide photos never change the card's size. */
.falcon-product-card__media {
position: relative;
flex-shrink: 0;
aspect-ratio: 1;
overflow: hidden;
background: #fff;
}
.falcon .falcon-product-card__image {
position: absolute;
inset: 8%;
width: 84%;
height: 84%;
object-fit: contain;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.falcon-product-card:hover .falcon-product-card__image {
transform: scale(1.04);
}
.falcon-product-card__trade {
position: absolute;
top: 14px;
left: 14px;
padding: 6px 12px;
border-radius: 99px;
background-color: #eaf6e8;
color: #00760f;
font-size: 12px;
font-weight: 600;
line-height: 1;
}
/* Text. */
.falcon-product-card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: 10px;
padding: 20px 22px 22px;
border-top: 1px solid var(--falcon-card-line);
background: #fff;
}
.falcon-product-card__badges {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 2px;
padding: 0;
list-style: none;
}
.falcon .falcon-product-card__badge {
display: inline-block;
padding: 5px 10px;
border-radius: 99px;
background-color: var(--falcon-bg-light);
color: var(--falcon-brand);
font-size: 12px;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
transition: background 0.2s ease;
}
.falcon .falcon-product-card__badge:hover {
background-color: var(--falcon-bg-blue);
color: var(--falcon-brand);
}
.falcon-product-card__stars {
display: block;
line-height: 0;
}
.falcon-stars {
display: inline-flex;
gap: 2px;
color: #f5a524;
}
.falcon-stars .falcon-icon {
width: 13px;
height: 13px;
fill: currentColor;
}
/* The title link covers the whole card. */
.falcon .falcon-product-card__title {
display: -webkit-box;
overflow: hidden;
color: var(--falcon-dark);
font-size: 16px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
transition: color 0.2s ease;
}
.falcon .falcon-product-card__title::after {
content: "";
position: absolute;
inset: 0;
}
.falcon .falcon-product-card__title:focus-visible {
outline: none;
}
.falcon-product-card:hover .falcon-product-card__title {
color: var(--falcon-brand);
}
.falcon-product-card__excerpt {
display: -webkit-box;
overflow: hidden;
color: var(--falcon-lower-text);
font-size: 14px;
line-height: 1.5;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
/* Price and the arrow, pinned to the bottom so cards in a row line up. */
.falcon-product-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 14px;
}
.falcon-product-card__price .price {
display: block;
margin: 0;
color: var(--falcon-brand);
font-size: 14px;
font-weight: 400;
line-height: 1.3;
}
.falcon-product-card__price .woocommerce-Price-amount {
font-size: 19px;
font-weight: 700;
letter-spacing: -0.01em;
}
.falcon-product-card__price .price del .woocommerce-Price-amount {
color: var(--falcon-lower-text);
font-size: 14px;
font-weight: 400;
}
.falcon-product-card__price .price ins {
text-decoration: none;
}
.falcon-product-card__go {
display: grid;
flex-shrink: 0;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--falcon-bg-light);
color: var(--falcon-brand);
transition: background 0.25s ease, color 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.falcon-product-card__go svg {
width: 20px;
height: 20px;
}
.falcon-product-card:hover .falcon-product-card__go {
background: var(--falcon-brand);
color: #fff;
transform: translateX(2px);
}
/* Wide blog embed: image beside the text. */
.falcon-product-card--article-landscape {
flex-direction: row;
}
.falcon-product-card--article-landscape .falcon-product-card__media {
flex: 0 0 42%;
aspect-ratio: auto;
min-height: 280px;
}
.falcon-product-card--article-landscape .falcon-product-card__body {
justify-content: center;
padding: 28px 30px;
border-top: 0;
border-left: 1px solid var(--falcon-card-line);
}
.falcon-product-card--article-landscape .falcon-product-card__footer {
margin-top: 6px;
}
.falcon-product-card--article-landscape .falcon-product-card__title {
font-size: 18px;
}
.falcon-product-card--article-landscape .falcon-product-card__excerpt {
-webkit-line-clamp: 3;
}
@media (max-width: 767px) {
.falcon-product-card--article-landscape {
flex-direction: column;
}
.falcon-product-card--article-landscape .falcon-product-card__media {
aspect-ratio: 1;
min-height: 0;
}
.falcon-product-card--article-landscape .falcon-product-card__body {
padding: 20px 22px 22px;
border-top: 1px solid var(--falcon-card-line);
border-left: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-product-card:hover .falcon-product-card__image,
.falcon-product-card:hover .falcon-product-card__go {
transform: none;
}
}
/* Category tile. */
.falcon-category-card {
position: relative;
display: flex;
flex-direction: column;
width: 99.512%;
min-width: 0;
margin-inline: auto;
border: 1px solid var(--falcon-border);
border-radius: 20px;
overflow: hidden;
transition: background 0.3s, border 0.3s, box-shadow 0.3s, transform 0.4s;
}
.falcon-category-card * {
word-break: break-word;
}
.falcon-category-card:hover {
transform: scale(1.01);
}
.falcon-category-card__media {
position: relative;
display: block;
min-width: 0;
min-height: 410px;
border-radius: 20px 20px 0 0;
background-color: var(--falcon-white);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.falcon-category-card__body {
position: relative;
display: flex;
flex-direction: column;
gap: 20px 0;
min-width: 0;
padding: 40px;
border-radius: 0 0 20px 20px;
background-color: var(--falcon-bg-light);
}
.falcon-category-card__body::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background-image: url("../icons/falcon-eagle.svg");
background-position: 240px -8px;
background-repeat: no-repeat;
opacity: 0.02;
}
.falcon-category-card__content {
position: relative;
display: flex;
flex-direction: column;
gap: 20px 0;
width: 100%;
border-radius: 20px;
}
/* Category tile (loop item 4319). */
.falcon-category-card__body {
justify-content: center;
min-height: 98px;
}
.falcon-category-card__body::before {
background-position: 314px -8px;
}
.falcon-category-card__title {
margin: 0;
color: var(--falcon-brand);
font-family: var(--falcon-font);
font-size: 16px;
font-weight: 400;
line-height: 29px;
}
/* Grids: columns at desktop-tablet-mobile, 30px gaps, as the Elementor loop grids. */
.falcon-product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
align-items: stretch;
}
.falcon-product-grid--2-2-1 {
grid-template-columns: repeat(2, 1fr);
}
.falcon-product-grid--1-2-1 {
grid-template-columns: repeat(1, 1fr);
}
.falcon-product-grid__item {
position: relative;
min-width: 0;
}
@media (max-width: 1024px) {
.falcon-product-grid {
grid-template-columns: repeat(2, 1fr);
}
.falcon-category-card__body::before {
background-position: 0 0;
}
}
@media (max-width: 767px) {
.falcon-product-grid {
grid-template-columns: repeat(1, 1fr);
}
.falcon-category-card {
width: 100%;
}
.falcon-category-card__media {
min-height: 370px;
}
.falcon-category-card__body::before {
background-position: 264px -8px;
}
}
/* Product cards embedded in blog posts with [elementor-template id="…"]. */
.falcon-product-embed--spaced {
margin-bottom: 40px;
}
/* 31-catalogue.css */
/* Category archive (template 184), shop page (559) and search results (959). */
/* Hero panel. */
.falcon-shop-hero {
padding: 30px 30px 0;
}
.falcon-shop-hero--browse {
margin-bottom: 80px;
}
.falcon-shop-hero__panel {
position: relative;
display: flex;
flex-direction: column;
min-height: 25vh;
padding: 0 30px;
border-radius: 15px;
background-color: var(--falcon-bg-light);
}
.falcon-shop-hero__panel::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: url("../images/curve-line-1.svg") center center / cover;
opacity: 0.25;
}
.falcon-shop-hero__inner {
position: relative;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: center;
gap: 20px 0;
width: 100%;
max-width: var(--falcon-width);
margin-inline: auto;
padding: 30px 0;
}
.falcon-shop-hero--tall .falcon-shop-hero__inner {
padding: 60px 0;
}
.falcon-shop-hero__title {
display: flex;
align-items: center;
gap: 0 15px;
}
/* The icon's wrapper may shrink beside a long two-line heading, as Elementor's image widget did. */
.falcon-shop-hero__icon img {
display: inline-block;
width: 45px;
vertical-align: middle;
}
.falcon .falcon-shop-hero__heading {
margin: 0;
padding: 0;
font-weight: 400;
line-height: 1;
}
.falcon-shop-hero--browse .falcon-shop-hero__intro {
margin-bottom: -15px;
}
/* "Explore Our Range Below", the sort menu and the product grid; also the search results grid. */
.falcon-range {
display: flex;
flex-direction: column;
width: 100%;
max-width: var(--falcon-width);
margin: 80px auto;
}
.falcon-range__bar {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
}
.falcon .falcon-range__heading {
margin: 0;
font-weight: 400;
line-height: 50px;
}
.falcon-range__sort {
align-self: flex-end;
width: 20%;
max-width: 20%;
}
/* [ctw_sorting_dropdown] from the falcon-site mu-plugin (Elementor custom CSS 203400b). */
.ctw-sorting-form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 30px;
font-size: 14px;
}
.ctw-sorting-form label {
display: none;
}
.ctw-sorting-form select {
padding: 8px 35px 8px 14px;
border: 1px solid #d1d5db;
border-radius: 9999px;
outline: none;
background-color: #f1f5f7;
background-image: url("data:image/svg+xml;utf8,");
background-position: right 10px center;
background-repeat: no-repeat;
background-size: 16px;
color: var(--falcon-brand);
font-size: 14px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
appearance: none;
}
.ctw-sorting-form select:hover {
background-color: #e1e8ed;
}
/* An empty category: the Elementor grid printed an empty "nothing found" box 60px tall. */
.falcon-range__empty {
padding: 30px 0;
}
.falcon-load-more {
margin-top: 30px;
text-align: center;
}
/* Support boxes, Google reviews and the shop menu below the shop templates. */
.falcon-shop-block {
width: 100%;
max-width: var(--falcon-width);
margin: 80px auto;
}
@media (max-width: 767px) {
.falcon-shop-hero {
padding: 0;
}
.falcon-shop-hero--browse {
margin-bottom: 40px;
}
.falcon-shop-hero__title {
flex-wrap: wrap;
gap: 20px 0;
}
.falcon-range,
.falcon-shop-block {
margin: 40px auto;
padding: 0 15px;
}
/* The shop page's support boxes kept their desktop spacing on mobile. */
.falcon-shop-block--flush {
margin: 80px auto;
padding: 0;
}
.falcon-range__bar {
flex-direction: column;
gap: 20px 0;
}
.falcon-range__sort {
width: 100%;
max-width: 100%;
}
}
/* Search results page numbers (Elementor loop grid "numbers" pagination). */
.falcon-pagination {
text-align: center;
}
.falcon-pagination .page-numbers {
margin: 0 5px;
}
.falcon-pagination .page-numbers:first-child {
margin-left: 0;
}
.falcon-pagination .page-numbers:last-child {
margin-right: 0;
}
/* 31-category-faq.css */
/* Category "Common Questions" (template-parts/catalogue/faq.php, 31-faq.js). The question and answer
styles are shared with the product FAQs (31-product-faq.css). */
.falcon-cat-faq {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 40px 72px;
align-items: start;
width: 100%;
max-width: calc(var(--falcon-width) + 40px);
margin: 100px auto;
padding-inline: 20px;
}
.falcon-cat-faq__intro {
position: sticky;
top: calc(120px + var(--falcon-pinned-h, 0px));
transition: top 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.falcon .falcon-cat-faq__heading {
margin: 0 0 16px;
font-size: 36px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.01em;
text-wrap: balance;
}
.falcon-cat-faq__lead {
max-width: 42ch;
margin: 0 0 28px;
color: var(--falcon-lower-text);
font-size: 16px;
line-height: 1.6;
}
.falcon-cat-faq__contact {
display: grid;
gap: 10px;
max-width: 360px;
}
.falcon .falcon-cat-faq__contact-link {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border: 1px solid #e6eaf0;
border-radius: 16px;
background: var(--falcon-white);
color: var(--falcon-dark);
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: border-color 0.25s ease, background-color 0.25s ease;
}
.falcon .falcon-cat-faq__contact-link:hover {
border-color: #c9d2f1;
background: #fafbfe;
color: var(--falcon-brand);
}
.falcon-cat-faq__contact-icon {
display: grid;
flex-shrink: 0;
place-items: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--falcon-bg-light);
color: var(--falcon-brand);
}
.falcon-cat-faq__contact-icon .falcon-icon {
width: 20px;
height: 20px;
}
.falcon-cat-faq__contact-text {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.3;
}
.falcon-cat-faq__contact-label {
color: var(--falcon-lower-text);
font-size: 13px;
font-weight: 500;
}
/* Questions: one column of rows in a single card. */
.falcon-cat-faq .falcon-faq {
overflow: hidden;
border: 1px solid #e6eaf0;
border-radius: 20px;
background: var(--falcon-white);
}
.falcon-cat-faq .falcon-faq__item + .falcon-faq__item {
border-top: 1px solid #e6eaf0;
}
:is(.falcon-cat-faq, .falcon-product__faq) .falcon-faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 22px 24px 22px 28px;
color: var(--falcon-dark);
font-family: var(--falcon-font);
font-size: 17px;
font-weight: 600;
line-height: 1.45;
list-style: none;
cursor: pointer;
transition: background-color 0.25s ease, color 0.25s ease;
}
:is(.falcon-cat-faq, .falcon-product__faq) .falcon-faq__question::-webkit-details-marker {
display: none;
}
:is(.falcon-cat-faq, .falcon-product__faq) .falcon-faq__question:hover {
background: #fafbfe;
color: var(--falcon-brand);
}
:is(.falcon-cat-faq, .falcon-product__faq) .falcon-faq__question:focus-visible {
outline: 2px solid var(--falcon-brand);
outline-offset: -4px;
border-radius: 16px;
}
:is(.falcon-cat-faq, .falcon-product__faq) .falcon-faq__item[open] > .falcon-faq__question {
color: var(--falcon-brand);
}
/* The plus turns into a cross when open. */
:is(.falcon-cat-faq, .falcon-product__faq) .falcon-faq__icon {
display: grid;
flex-shrink: 0;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--falcon-bg-light);
color: var(--falcon-brand);
transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
:is(.falcon-cat-faq, .falcon-product__faq) .falcon-faq__icon .falcon-icon {
width: 13px;
height: 13px;
fill: currentColor;
}
:is(.falcon-cat-faq, .falcon-product__faq) .falcon-faq__question:hover .falcon-faq__icon {
background: var(--falcon-bg-blue);
}
:is(.falcon-cat-faq, .falcon-product__faq) .falcon-faq__item[open] .falcon-faq__icon {
background: var(--falcon-brand);
color: #fff;
transform: rotate(45deg);
}
:is(.falcon-cat-faq, .falcon-product__faq) .falcon-faq__answer {
padding: 0 28px 26px;
color: var(--falcon-text);
font-family: var(--falcon-font);
font-size: 16px;
line-height: 1.7;
}
:is(.falcon-cat-faq, .falcon-product__faq) .falcon-faq__answer-inner {
max-width: 68ch;
}
:is(.falcon-cat-faq, .falcon-product__faq) .falcon-faq__answer-inner > :first-child {
margin-top: 0;
}
:is(.falcon-cat-faq, .falcon-product__faq) .falcon-faq__answer-inner > :last-child {
margin-bottom: 0;
}
.falcon :is(.falcon-cat-faq, .falcon-product__faq) .falcon-faq__answer a {
color: var(--falcon-accent);
}
@media (max-width: 1024px) {
.falcon-cat-faq {
grid-template-columns: 1fr;
margin: 72px auto;
}
.falcon-cat-faq__intro {
position: static;
}
.falcon-cat-faq__contact {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: none;
}
}
@media (max-width: 767px) {
.falcon-cat-faq {
gap: 28px;
margin: 56px auto;
padding-inline: 15px;
}
.falcon .falcon-cat-faq__heading {
font-size: 26px;
}
.falcon-cat-faq__lead {
margin-bottom: 20px;
font-size: 15px;
}
.falcon-cat-faq__contact {
grid-template-columns: 1fr;
}
:is(.falcon-cat-faq, .falcon-product__faq) .falcon-faq__question {
padding: 18px 16px 18px 20px;
font-size: 16px;
}
:is(.falcon-cat-faq, .falcon-product__faq) .falcon-faq__answer {
padding: 0 20px 22px;
font-size: 15px;
}
}
@media (prefers-reduced-motion: reduce) {
:is(.falcon-cat-faq, .falcon-product__faq) .falcon-faq__icon {
transition: background-color 0.2s ease, color 0.2s ease;
}
}
/* 31-category.css */
/* Product category page (template-parts/catalogue/category.php, 31-category.js). */
/* Header: breadcrumb, heading and intro, then the other categories in the range. */
/* Full width with a 30px margin, as the old banner; the content lines up with the products below. */
.falcon-cat-hero {
width: 100%;
margin: 24px 0 0;
padding-inline: 30px;
}
.falcon-cat-hero__panel {
position: relative;
padding: 44px max(40px, calc((100% - var(--falcon-width)) / 2)) 44px;
overflow: hidden;
border-radius: 28px;
background-color: var(--falcon-bg-light);
}
.falcon-cat-hero__panel::before {
content: "";
position: absolute;
inset: 0;
background: url("../images/curve-line-1.svg") center center / cover;
opacity: 0.25;
pointer-events: none;
}
.falcon-cat-hero__panel > * {
position: relative;
}
.falcon-breadcrumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 0;
margin: 0 0 18px;
padding: 0;
color: var(--falcon-lower-text);
font-size: 14px;
list-style: none;
}
.falcon-breadcrumbs__item {
display: inline-flex;
align-items: center;
}
.falcon .falcon-breadcrumbs__item a {
color: var(--falcon-lower-text);
text-decoration: none;
}
.falcon .falcon-breadcrumbs__item a:hover {
color: var(--falcon-brand);
}
.falcon-breadcrumbs__item[aria-current] {
color: var(--falcon-dark);
font-weight: 500;
}
.falcon-breadcrumbs__sep {
width: 7px;
height: 12px;
margin-inline: 10px;
fill: #a3a8b8;
}
.falcon .falcon-cat-hero__heading {
margin: 0 0 18px;
font-size: 44px;
font-weight: 500;
line-height: 1.12;
letter-spacing: -0.015em;
text-wrap: balance;
}
/* The category description, in full: up to about 120 words in two paragraphs. */
.falcon-cat-hero__intro {
max-width: 80ch;
color: #3d4152;
font-size: 17px;
line-height: 1.65;
}
.falcon-cat-hero__intro p {
margin: 0 0 12px;
}
.falcon-cat-hero__intro > :last-child {
margin-bottom: 0;
}
/* The other categories in this range. */
.falcon-cat-hero__range {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 16px;
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid #e2e7ee;
}
.falcon-cat-hero__range-label {
color: var(--falcon-lower-text);
font-size: 14px;
font-weight: 500;
}
.falcon-cat-hero__range-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.falcon .falcon-cat-chip {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 8px 16px;
border: 1px solid #dfe4ee;
border-radius: 999px;
background: var(--falcon-white);
color: var(--falcon-brand);
font-family: var(--falcon-font);
font-size: 14px;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.falcon a.falcon-cat-chip:hover,
.falcon .falcon-cat-chip--filter:hover {
border-color: #c9d2f1;
background: #eaeefb;
color: var(--falcon-brand);
}
.falcon .falcon-cat-chip.is-current {
border-color: var(--falcon-brand);
background: var(--falcon-brand);
color: #fff;
cursor: default;
}
/* Products: heading, count, sort, filters, grid. */
.falcon-cat-products {
width: 100%;
max-width: calc(var(--falcon-width) + 40px);
margin: 56px auto 0;
padding-inline: 20px;
}
.falcon-cat-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 24px;
margin-bottom: 16px;
}
.falcon .falcon-cat-toolbar__heading {
margin: 0;
font-size: 30px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.01em;
}
.falcon-cat-toolbar__count {
margin: 0;
color: var(--falcon-lower-text);
font-size: 15px;
}
.falcon-cat-sort {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 0 auto;
}
.falcon-cat-sort__label {
color: var(--falcon-lower-text);
font-size: 14px;
font-weight: 500;
}
.falcon-cat-sort__control {
position: relative;
display: inline-flex;
}
.falcon .falcon-cat-sort__select {
min-height: 44px;
padding: 10px 44px 10px 18px;
border: 1px solid #dfe4ee;
border-radius: 999px;
background: var(--falcon-white);
color: var(--falcon-brand);
font-family: var(--falcon-font);
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: border-color 0.25s ease, background-color 0.25s ease;
appearance: none;
}
.falcon .falcon-cat-sort__select:hover {
border-color: #c9d2f1;
background: #fafbfe;
}
.falcon .falcon-cat-sort__select:focus-visible {
outline: 2px solid var(--falcon-brand);
outline-offset: 2px;
}
.falcon-cat-sort__chevron {
position: absolute;
top: 50%;
right: 18px;
width: 12px;
height: 12px;
fill: var(--falcon-brand);
transform: translateY(-50%);
pointer-events: none;
}
.falcon-cat-sort__submit {
min-height: 44px;
}
/* Filters: groups of toggle chips. On phones they fold behind a button. */
.falcon-cat-filters {
margin-bottom: 20px;
}
/* Buttons elsewhere set their own display, which would override hidden. */
.falcon-cat-products [hidden] {
display: none !important;
}
.falcon .falcon-cat-filters__toggle {
display: none;
}
.falcon-cat-filters__panel {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 32px;
padding: 12px 16px 12px 20px;
border: 1px solid #e6eaf0;
border-radius: 20px;
background: var(--falcon-white);
}
.falcon-cat-filters__group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
}
.falcon-cat-filters__label {
color: var(--falcon-dark);
font-size: 14px;
font-weight: 600;
}
.falcon-cat-filters__options {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.falcon .falcon-cat-chip--filter {
min-height: 38px;
padding-inline: 14px 10px;
background: var(--falcon-bg-light);
border-color: transparent;
}
.falcon-cat-chip__count {
display: inline-grid;
place-items: center;
min-width: 22px;
height: 22px;
padding-inline: 6px;
border-radius: 999px;
background: var(--falcon-white);
color: var(--falcon-lower-text);
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
transition: background-color 0.25s ease, color 0.25s ease;
}
.falcon .falcon-cat-chip--filter[aria-pressed="true"] {
border-color: var(--falcon-brand);
background: var(--falcon-brand);
color: #fff;
}
.falcon-cat-chip--filter[aria-pressed="true"] .falcon-cat-chip__count {
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
.falcon .falcon-cat-chip--filter:active {
transform: scale(0.97);
}
/* No products would match with this option added. */
.falcon .falcon-cat-chip--filter[aria-disabled="true"] {
background: transparent;
border-color: #e6eaf0;
color: #9aa0b1;
cursor: not-allowed;
}
.falcon .falcon-cat-chip--filter:focus-visible,
.falcon .falcon-cat-filters__clear:focus-visible,
.falcon .falcon-cat-filters__toggle:focus-visible {
outline: 2px solid var(--falcon-brand);
outline-offset: 2px;
}
.falcon .falcon-cat-filters__clear {
margin-left: auto;
padding: 8px 4px;
border: 0;
background: none;
color: var(--falcon-accent);
font-family: var(--falcon-font);
font-size: 14px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.falcon-cat-products .falcon-product-grid__item[hidden] {
display: none;
}
.falcon-cat-products .falcon-product-grid__item.is-entering {
animation: falcon-cat-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: calc(var(--falcon-stagger, 0) * 40ms);
}
@keyframes falcon-cat-enter {
from {
opacity: 0;
transform: translateY(12px);
}
}
.falcon-cat-empty {
display: grid;
justify-items: center;
gap: 16px;
padding: 56px 24px;
border: 1px dashed #d5dbe6;
border-radius: 20px;
text-align: center;
}
.falcon-cat-empty[hidden] {
display: none;
}
.falcon-cat-empty__text {
margin: 0;
color: var(--falcon-lower-text);
font-size: 16px;
}
.falcon-cat-products .falcon-load-more {
margin-top: 36px;
text-align: center;
}
/* Buying guide below the products. */
.falcon-cat-guide {
width: 100%;
max-width: calc(var(--falcon-width) + 40px);
margin: 96px auto 0;
padding-inline: 20px;
}
.falcon-cat-guide__content {
max-width: 760px;
color: var(--falcon-text);
font-size: 17px;
line-height: 1.75;
}
.falcon .falcon-cat-guide__content h2 {
margin: 48px 0 16px;
font-size: 32px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.01em;
}
.falcon .falcon-cat-guide__content h3 {
margin: 32px 0 10px;
color: var(--falcon-dark);
font-size: 21px;
font-weight: 600;
line-height: 1.35;
}
.falcon-cat-guide__content > :first-child {
margin-top: 0;
}
.falcon-cat-guide__content p,
.falcon-cat-guide__content ul,
.falcon-cat-guide__content ol {
margin: 0 0 18px;
}
.falcon-cat-guide__content ul,
.falcon-cat-guide__content ol {
padding-left: 1.3em;
}
.falcon-cat-guide__content li + li {
margin-top: 6px;
}
.falcon .falcon-cat-guide__content a {
color: var(--falcon-accent);
}
@media (max-width: 1024px) {
.falcon-cat-hero__panel {
padding: 36px 32px;
}
.falcon-cat-hero {
padding-inline: 20px;
}
.falcon .falcon-cat-hero__heading {
font-size: 36px;
}
.falcon-cat-hero__intro {
font-size: 16px;
}
.falcon-cat-filters__panel {
gap: 14px 24px;
}
}
@media (max-width: 767px) {
.falcon-cat-hero {
margin-top: 12px;
padding-inline: 12px;
}
.falcon-cat-hero__panel {
padding: 28px 20px;
border-radius: 22px;
}
.falcon-breadcrumbs__list {
margin-bottom: 16px;
font-size: 13px;
}
.falcon .falcon-cat-hero__heading {
margin-bottom: 14px;
font-size: 29px;
line-height: 1.18;
}
.falcon-cat-hero__intro {
font-size: 16px;
line-height: 1.6;
}
/* The other categories scroll sideways in one row. */
.falcon-cat-hero__range {
display: block;
margin: 22px -20px 0;
padding: 18px 0 0;
}
.falcon-cat-hero__range-label {
display: block;
margin: 0 20px 10px;
}
.falcon-cat-hero__range-list {
flex-wrap: nowrap;
padding: 0 20px 4px;
overflow-x: auto;
scroll-padding-inline: 20px;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.falcon-cat-hero__range-list::-webkit-scrollbar {
display: none;
}
.falcon-cat-hero__range-list li {
scroll-snap-align: start;
}
.falcon-cat-products {
margin-top: 44px;
padding-inline: 15px;
}
.falcon-cat-toolbar {
gap: 12px 16px;
}
.falcon .falcon-cat-toolbar__heading {
flex-basis: 100%;
font-size: 24px;
}
.falcon-cat-sort__label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.falcon .falcon-cat-filters__toggle {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 10px 18px;
border: 1px solid #dfe4ee;
border-radius: 999px;
background: var(--falcon-white);
color: var(--falcon-brand);
font-family: var(--falcon-font);
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
.falcon-cat-filters__toggle .falcon-icon {
width: 16px;
height: 16px;
fill: currentColor;
}
.falcon-cat-filters__active {
display: inline-grid;
place-items: center;
min-width: 22px;
height: 22px;
padding-inline: 6px;
border-radius: 999px;
background: var(--falcon-brand);
color: #fff;
font-size: 12px;
}
.falcon-cat-filters__active[hidden] {
display: none;
}
.falcon-cat-filters__panel {
display: none;
margin-top: 12px;
padding: 16px;
}
.falcon-cat-filters.is-open .falcon-cat-filters__panel {
display: grid;
gap: 18px;
animation: falcon-cat-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.falcon-cat-filters__group {
display: grid;
gap: 10px;
}
.falcon .falcon-cat-filters__clear {
justify-self: start;
margin-left: 0;
}
.falcon-cat-guide {
margin-top: 64px;
padding-inline: 15px;
}
.falcon-cat-guide__content {
font-size: 16px;
line-height: 1.7;
}
.falcon .falcon-cat-guide__content h2 {
margin-top: 40px;
font-size: 25px;
}
.falcon .falcon-cat-guide__content h3 {
font-size: 19px;
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-cat-products .falcon-product-grid__item.is-entering,
.falcon-cat-filters.is-open .falcon-cat-filters__panel {
animation: none;
}
.falcon .falcon-cat-chip--filter:active {
transform: none;
}
}
/* 31-popular-products.css */
/* Page Sections: Popular Products (Home), and the product carousel (Elementor loop carousel b585f4f). */
/* On Home the Elementor container sat in a flex wrapper with the hero, so its 80px bottom margin
added to the next section's instead of collapsing; the bottom spacing is padding for that reason. */
.falcon-popular-products {
display: flex;
flex-direction: column;
gap: 20px 0;
width: 100%;
max-width: var(--falcon-width);
margin: 80px auto 0;
padding-bottom: 80px;
}
.falcon .falcon-popular-products__heading {
margin: 0;
font-weight: 400;
}
.falcon-popular-products__intro {
margin-bottom: -5px;
}
/* An empty shortcode widget sat between the intro and the Elementor carousel, adding a second gap. */
.falcon-popular-products .falcon-carousel {
margin-top: 20px;
}
.falcon-carousel {
--falcon-carousel-per-view: 3;
--falcon-carousel-gap: 25px;
position: relative;
}
/* Back and forward arrows, centred on the product photos: outside the cards where the page has
room, just inside them on narrower screens. */
.falcon .falcon-carousel__nav {
position: absolute;
top: 34%;
z-index: 2;
display: grid;
place-items: center;
width: 48px;
height: 48px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: #fff;
color: var(--falcon-brand);
box-shadow: 0 4px 16px rgba(27, 29, 40, 0.14), 0 0 0 1px rgba(27, 29, 40, 0.05);
cursor: pointer;
transform: translateY(-50%);
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.falcon-carousel__nav--prev {
left: -24px;
}
.falcon-carousel__nav--next {
right: -24px;
}
.falcon .falcon-carousel__nav:hover {
background: var(--falcon-brand);
color: #fff;
}
.falcon .falcon-carousel__nav:active {
transform: translateY(calc(-50% + 1px));
}
.falcon .falcon-carousel__nav:focus-visible {
outline: 3px solid rgba(28, 51, 144, 0.35);
outline-offset: 2px;
}
.falcon-carousel__nav svg {
width: 22px;
height: 22px;
}
@media (max-width: 1340px) {
.falcon-carousel__nav--prev {
left: 10px;
}
.falcon-carousel__nav--next {
right: 10px;
}
}
@media (max-width: 767px) {
.falcon .falcon-carousel__nav {
width: 44px;
height: 44px;
}
}
.falcon-carousel__viewport {
overflow: hidden;
}
.falcon-carousel__track {
display: flex;
gap: var(--falcon-carousel-gap);
touch-action: pan-y;
/* 31-carousel.js sets the number of slide copies in front (shifted out of view by the margin),
the slide position and any drag offset. At rest the first slide is laid out on a whole pixel,
as Swiper's was, so the cards render as sharply. */
width: 100%;
margin-left: calc(var(--falcon-carousel-copies, 0) * -1 * (100% + var(--falcon-carousel-gap)) / var(--falcon-carousel-per-view));
transform: translate3d(calc(var(--falcon-carousel-drag, 0px) - var(--falcon-carousel-position, 0) * (100% + var(--falcon-carousel-gap)) / var(--falcon-carousel-per-view)), 0, 0);
}
.falcon-carousel__slide {
position: relative;
flex: 0 0 calc((100% - (var(--falcon-carousel-per-view) - 1) * var(--falcon-carousel-gap)) / var(--falcon-carousel-per-view));
min-width: 0;
}
/* Elementor's Swiper breakpoints sit one pixel below its CSS ones: three a view from 1024px up,
two from 767px, one below that. */
@media (max-width: 1023px) {
.falcon-carousel {
--falcon-carousel-per-view: 2;
}
}
@media (max-width: 766px) {
.falcon-carousel {
--falcon-carousel-per-view: 1;
}
}
@media (max-width: 767px) {
.falcon-popular-products {
margin: 40px auto 0;
padding: 0 15px 40px;
}
.falcon .falcon-popular-products__heading {
line-height: 1.3em;
}
}
/* 31-product-faq.css */
/* Product FAQs (template-parts/product/faq.php, 31-faq.js): two columns of dropdown cards above
Product Specifications, one column on phones. Each column opens on its own, so opening a question
only moves the questions under it. The question and answer styles are the category FAQ's
(31-category-faq.css). */
.falcon-product .falcon-product__faq-heading {
margin-bottom: 20px;
}
.falcon-product__faq-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 24px;
align-items: start;
}
.falcon-product__faq-columns > :only-child {
grid-column: 1 / -1;
}
.falcon-product__faq .falcon-faq {
display: grid;
gap: 14px;
}
.falcon-product__faq .falcon-faq__item {
overflow: hidden;
border: 1px solid #e6eaf0;
border-radius: 16px;
background: var(--falcon-white);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.falcon-product__faq .falcon-faq__item[open] {
border-color: #c9d2f1;
box-shadow: 0 12px 30px -20px rgb(28 51 144 / 0.35);
}
.falcon-product__faq .falcon-faq__question {
padding: 18px 18px 18px 24px;
font-size: 16px;
}
.falcon-product__faq .falcon-faq__answer {
padding: 0 24px 22px;
font-size: 15px;
}
@media (max-width: 767px) {
.falcon-product__faq-columns,
.falcon-product__faq .falcon-faq {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
.falcon-product__faq .falcon-faq__question {
padding: 16px 14px 16px 18px;
font-size: 15px;
}
.falcon-product__faq .falcon-faq__answer {
padding: 0 18px 20px;
}
}
/* 32-woo-account.css */
/*
* Customer account (layout woocommerce_content): the sections and the child theme's WooCommerce
* notice rules, then the account's own design (redesigned 20 October 2026). The basket and
* checkout have their own design in 45-cart-checkout.css. WooCommerce's own stylesheets still
* load, so selectors are specific enough to win over them.
*/
/* ---------------------------------------------------------------------------------------------
* Sections (Elementor containers 5b21d84b, 320e2a1d, 04d13a5 and 1bb9b0a)
* ------------------------------------------------------------------------------------------ */
.falcon-woo {
margin: 40px 0 80px;
}
.falcon-woo--checkout {
margin-bottom: 40px;
}
.falcon-woo--account {
margin: 50px 0 80px;
}
.falcon-woo > .falcon-container,
.falcon-woo-notice > .falcon-container {
display: flex;
flex-direction: column;
}
/* ---------------------------------------------------------------------------------------------
* WooCommerce notices (child theme style.css)
* ------------------------------------------------------------------------------------------ */
.woocommerce-notices-wrapper {
margin: 20px;
}
.woocommerce-message {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
border: none !important;
border-radius: 8px;
background: #f1f5f7 !important;
box-shadow: none !important;
color: #1c3390 !important;
font-size: 15px;
}
.woocommerce-message::before {
display: none !important;
}
.woocommerce-message .button.wc-forward {
margin-left: auto;
padding: 8px 18px;
border-radius: 9999px;
background-color: #1c3390 !important;
color: #fff !important;
font-size: 14px;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.2s ease;
}
.woocommerce-message .button.wc-forward:hover {
background-color: #142673 !important;
opacity: 0.95;
transition: background-color 0.2s ease, opacity 0.2s ease;
}
/* ---------------------------------------------------------------------------------------------
* Account notice (Elementor alert 3e7471e, warning style)
* ------------------------------------------------------------------------------------------ */
.falcon-woo-notice {
margin: 40px 0 -40px;
}
.falcon-alert {
position: relative;
margin-bottom: 30px;
padding: 15px;
border-inline-start: 5px solid #f9f0c3;
background-color: #fcf8e3;
color: #8a6d3b;
text-align: start;
transition: opacity 0.4s;
}
.falcon-alert.is-dismissed {
opacity: 0;
}
.falcon-alert__text {
font-family: "Inter", sans-serif;
font-size: 13px;
font-weight: 400;
}
.falcon-alert__dismiss,
.falcon-alert__dismiss:hover,
.falcon-alert__dismiss:focus {
position: absolute;
inset-block-start: 10px;
inset-inline-end: 10px;
padding: 3px;
border: none;
background: transparent;
color: inherit;
font-size: 20px;
line-height: 1;
cursor: pointer;
}
@media (max-width: 767px) {
.falcon-alert {
padding: 10px;
}
.falcon-alert__dismiss,
.falcon-alert__dismiss:hover,
.falcon-alert__dismiss:focus {
inset-block-start: 7px;
inset-inline-end: 7px;
}
}
/* ---------------------------------------------------------------------------------------------
* Customer account (20 October 2026 redesign): a header with the customer's initials, a side
* menu with icons (a sliding row of tabs on tablets and phones), and white cards on a light page.
* Shapes: 20px for the menu, 16px for cards, 12px for rows, 10px for inputs, pill buttons. Icons
* are Tabler (MIT, assets/icons/tabler-*.svg). Selectors carry .falcon where the base reset's pink
* button and link states would otherwise win.
* ------------------------------------------------------------------------------------------ */
.falcon-woo--account {
margin: 0;
padding: 40px 0 80px;
background:
radial-gradient(1200px 420px at 50% -160px, rgba(28, 51, 144, 0.07), transparent 70%),
var(--falcon-bg-light);
}
.falcon-woo--account > .falcon-container {
gap: 28px;
}
/* Header. */
.falcon-account-intro {
display: flex;
align-items: center;
gap: 18px;
}
.falcon-account-intro__avatar {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(150deg, #2a49ad 0%, var(--falcon-brand) 55%, #142671 100%);
box-shadow: 0 10px 24px -12px rgba(28, 51, 144, 0.7);
color: var(--falcon-white);
font-size: 21px;
font-weight: 600;
letter-spacing: 0.02em;
}
.falcon .falcon-account-intro__heading {
margin: 0;
color: var(--falcon-text);
font-size: 32px;
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.02em;
}
.falcon-account-intro__text {
max-width: 70ch;
margin: 6px 0 0;
color: var(--falcon-lower-text);
font-size: 16px;
line-height: 1.5;
}
/* Menu beside the page. WooCommerce floats both columns; the grid replaces that. */
.falcon-woo--account .falcon-account {
color: var(--falcon-text);
font-family: var(--falcon-font);
font-size: 15px;
}
.falcon-woo--account .falcon-account > .woocommerce {
display: grid;
grid-template-columns: 250px minmax(0, 1fr);
gap: 28px;
align-items: start;
}
.falcon-woo--account .falcon-account > .woocommerce::before,
.falcon-woo--account .falcon-account > .woocommerce::after {
content: none;
}
.falcon-account__tabs {
position: sticky;
top: 24px;
min-width: 0;
}
.falcon-woo--account .falcon-account .woocommerce-MyAccount-navigation {
float: none;
width: auto;
}
.falcon-woo--account .woocommerce-MyAccount-navigation ul {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
padding: 10px;
border: 1px solid #e3e7f0;
border-radius: 20px;
background: var(--falcon-white);
box-shadow: 0 1px 2px rgba(27, 29, 40, 0.04), 0 18px 40px -30px rgba(28, 51, 144, 0.35);
list-style: none;
}
.falcon-woo--account .woocommerce-MyAccount-navigation ul {
--icon: url(../icons/tabler-chevron-right.svg);
}
.falcon-woo--account .woocommerce-MyAccount-navigation li {
margin: 0;
padding: 0;
}
.falcon .falcon-account .woocommerce-MyAccount-navigation li a {
display: flex;
align-items: center;
gap: 12px;
min-height: 46px;
padding: 0 14px;
border-radius: 12px;
color: #3b4157;
font-size: 15px;
font-weight: 500;
line-height: 1.2;
transition: background-color 0.15s, color 0.15s;
}
.falcon .falcon-account .woocommerce-MyAccount-navigation li a::before {
content: "";
flex: none;
width: 20px;
height: 20px;
background: currentColor;
opacity: 0.85;
-webkit-mask: var(--icon) center / contain no-repeat;
mask: var(--icon) center / contain no-repeat;
}
.falcon .falcon-account .woocommerce-MyAccount-navigation li a:hover {
background: #f2f5fb;
color: var(--falcon-brand);
}
.falcon .falcon-account .woocommerce-MyAccount-navigation li.is-active a {
background: #eaeefb;
color: var(--falcon-brand);
font-weight: 600;
}
.falcon .falcon-account .woocommerce-MyAccount-navigation li.is-active a::before {
opacity: 1;
}
.falcon-woo--account .woocommerce-MyAccount-navigation-link--dashboard { --icon: url(../icons/tabler-layout-dashboard.svg); }
.falcon-woo--account .woocommerce-MyAccount-navigation-link--orders { --icon: url(../icons/tabler-package.svg); }
.falcon-woo--account .woocommerce-MyAccount-navigation-link--store-credit { --icon: url(../icons/tabler-coins.svg); }
.falcon-woo--account .woocommerce-MyAccount-navigation-link--downloads { --icon: url(../icons/tabler-download.svg); }
.falcon-woo--account .woocommerce-MyAccount-navigation-link--edit-address { --icon: url(../icons/tabler-map-pin.svg); }
.falcon-woo--account .woocommerce-MyAccount-navigation-link--payment-methods { --icon: url(../icons/tabler-credit-card.svg); }
.falcon-woo--account .woocommerce-MyAccount-navigation-link--edit-account { --icon: url(../icons/tabler-user.svg); }
.falcon-woo--account .woocommerce-MyAccount-navigation-link--my-coupons { --icon: url(../icons/tabler-ticket.svg); }
.falcon-woo--account .woocommerce-MyAccount-navigation-link--customer-logout { --icon: url(../icons/tabler-logout.svg); }
.falcon-woo--account .woocommerce-MyAccount-navigation-link--customer-logout {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid #edf0f6;
}
.falcon .falcon-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
background: #fdf1f1;
color: #a12626;
}
/* The page beside the menu. */
.falcon-woo--account .falcon-account .woocommerce-MyAccount-content {
float: none;
width: auto;
min-width: 0;
padding: 0;
}
.falcon-account__panel,
.falcon-account__empty {
display: flex;
flex-direction: column;
gap: 20px;
}
.falcon-woo--account .falcon-account .woocommerce-notices-wrapper {
margin: 0;
}
.falcon-woo--account .falcon-account .woocommerce-notices-wrapper:empty {
display: none;
}
.falcon-account p {
margin: 0;
}
.falcon .falcon-account a {
color: var(--falcon-brand);
}
.falcon .falcon-account a:hover {
color: var(--falcon-accent);
}
/* Cards: the dashboard's, each order, addresses, forms, and the pages plugins add. */
.falcon-card,
.falcon .falcon-woo--account .woocommerce-orders-table tbody tr,
.falcon .falcon-woo--account .woocommerce-Address,
.falcon-woo--account .woocommerce-EditAccountForm,
.falcon-woo--account .woocommerce-address-fields,
.falcon-woo--account .woocommerce-order-details,
.falcon-woo--account .woocommerce-customer-details,
.falcon-woo--account .falcon-account--view-order .woocommerce-MyAccount-content .falcon-account__panel > p:first-of-type,
.falcon-woo--account :is(.falcon-account--other, .falcon-account--payment-methods, .falcon-account--downloads) .falcon-account__panel,
.falcon-woo--account .falcon-account__empty > .woocommerce-info,
.falcon-woo--account .falcon-account__empty > .woocommerce-message {
padding: 24px 26px;
border: 1px solid #e3e7f0;
border-radius: 16px;
background: var(--falcon-white);
box-shadow: 0 1px 2px rgba(27, 29, 40, 0.04), 0 18px 40px -32px rgba(28, 51, 144, 0.35);
}
.falcon-card__head,
.falcon-woo--account .woocommerce-Address-title {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.falcon .falcon-card__title,
.falcon .falcon-woo--account .falcon-account h2,
.falcon .falcon-woo--account .falcon-account h3 {
margin: 0;
color: var(--falcon-text);
font-size: 19px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;
}
.falcon .falcon-card__link,
.falcon .falcon-woo--account .woocommerce-Address-title .edit {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 0 14px;
border: 1px solid #d3d8e4;
border-radius: 999px;
color: var(--falcon-text);
font-size: 14px;
font-weight: 500;
white-space: nowrap;
transition: border-color 0.15s, background-color 0.15s;
}
.falcon .falcon-card__link:hover,
.falcon .falcon-woo--account .woocommerce-Address-title .edit:hover {
border-color: var(--falcon-brand);
background: #f5f7fd;
color: var(--falcon-brand);
}
/* Account buttons, pill shaped: one primary per screen (navy), the rest outlined. Not .falcon-pill,
which is the product option pills (34-variation-pills.css). */
.falcon .falcon-account-btn,
.falcon .falcon-account a.falcon-account-btn,
.falcon .falcon-woo--account .falcon-account .button,
.falcon .falcon-woo--account .falcon-account button[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 40px;
margin: 0;
padding: 0 18px;
border: 1px solid #d3d8e4;
border-radius: 999px;
background: var(--falcon-white);
color: var(--falcon-text);
font-family: var(--falcon-font);
font-size: 14px;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
box-shadow: none;
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.falcon .falcon-account-btn:hover,
.falcon .falcon-account a.falcon-account-btn:hover,
.falcon .falcon-woo--account .falcon-account .button:hover,
.falcon .falcon-woo--account .falcon-account button[type="submit"]:hover {
border-color: var(--falcon-brand);
background: #f5f7fd;
color: var(--falcon-brand);
}
/* a.falcon-account-btn--primary: the account's link colour rule would otherwise turn the text navy on navy. */
.falcon .falcon-account-btn--primary,
.falcon .falcon-account a.falcon-account-btn--primary,
.falcon .falcon-woo--account .falcon-account .button.view,
.falcon .falcon-woo--account .falcon-account button[type="submit"],
.falcon .falcon-woo--account .falcon-account .woocommerce-info .button,
.falcon .falcon-woo--account .falcon-account .woocommerce-message .button {
border-color: var(--falcon-brand);
background: var(--falcon-brand);
color: var(--falcon-white);
}
.falcon .falcon-account-btn--primary:hover,
.falcon .falcon-account a.falcon-account-btn--primary:hover,
.falcon .falcon-woo--account .falcon-account .button.view:hover,
.falcon .falcon-woo--account .falcon-account button[type="submit"]:hover,
.falcon .falcon-woo--account .falcon-account .woocommerce-info .button:hover,
.falcon .falcon-woo--account .falcon-account .woocommerce-message .button:hover {
border-color: #15287a;
background: #15287a;
color: var(--falcon-white);
}
.falcon .falcon-woo--account .falcon-account button[type="submit"] {
min-height: 50px;
padding: 0 28px;
font-size: 15px;
font-weight: 600;
}
.falcon .falcon-account-btn:focus-visible,
.falcon .falcon-woo--account .falcon-account :is(.button, button, a):focus-visible {
outline: 3px solid rgba(28, 51, 144, 0.35);
outline-offset: 2px;
}
/* Order status. */
.falcon-status,
.falcon .falcon-woo--account .falcon-account .woocommerce-orders-table tr td.woocommerce-orders-table__cell-order-status {
display: inline-flex;
align-items: center;
align-self: center;
min-height: 26px;
padding: 0 11px;
border-radius: 999px;
background: #eef0f4;
color: #4c5268;
font-size: 13px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
.falcon-status--processing,
.falcon .falcon-woo--account .falcon-account .woocommerce-orders-table tr.woocommerce-orders-table__row--status-processing td.woocommerce-orders-table__cell-order-status {
background: #e8eeff;
color: var(--falcon-brand);
}
.falcon-status--completed,
.falcon .falcon-woo--account .falcon-account .woocommerce-orders-table tr.woocommerce-orders-table__row--status-completed td.woocommerce-orders-table__cell-order-status {
background: #e5f5ec;
color: #17603a;
}
.falcon-status--on-hold,
.falcon .falcon-woo--account .falcon-account .woocommerce-orders-table tr.woocommerce-orders-table__row--status-on-hold td.woocommerce-orders-table__cell-order-status {
background: #fff3dc;
color: #8a5300;
}
.falcon-status--cancelled,
.falcon-status--failed,
.falcon .falcon-woo--account .falcon-account .woocommerce-orders-table tr:is(.woocommerce-orders-table__row--status-cancelled, .woocommerce-orders-table__row--status-failed) td.woocommerce-orders-table__cell-order-status {
background: #fdecec;
color: #a12626;
}
/* -- Dashboard -------------------------------------------------------------------------------- */
.falcon-dash {
display: flex;
flex-direction: column;
gap: 20px;
}
.falcon-dash__order-list {
margin: 0 -10px;
padding: 0;
list-style: none;
}
.falcon-dash__order-list li + li {
border-top: 1px solid #edf0f6;
}
.falcon .falcon-dash__order {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto 18px;
gap: 16px;
align-items: center;
padding: 14px 10px;
border-radius: 12px;
color: var(--falcon-text);
transition: background-color 0.15s;
}
.falcon .falcon-dash__order:hover {
background: #f6f8fd;
color: var(--falcon-text);
}
.falcon-dash__order-main {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.falcon-dash__order-main strong {
font-size: 16px;
font-weight: 600;
}
.falcon-dash__order-main span {
color: var(--falcon-lower-text);
font-size: 14px;
}
.falcon-dash__order-total {
min-width: 84px;
font-weight: 600;
text-align: right;
}
.falcon-dash__order-arrow {
width: 18px;
height: 18px;
color: #8a90a5;
transition: transform 0.15s, color 0.15s;
}
.falcon .falcon-dash__order:hover .falcon-dash__order-arrow {
color: var(--falcon-brand);
transform: translateX(2px);
}
.falcon-dash__empty {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
color: var(--falcon-lower-text);
}
.falcon-dash__empty-icon,
.falcon-dash__help-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: #eef1fb;
color: var(--falcon-brand);
}
.falcon-dash__empty-icon .falcon-icon,
.falcon-dash__help-icon .falcon-icon {
width: 22px;
height: 22px;
}
.falcon-dash__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.falcon-dash__grid .falcon-card__head {
margin-bottom: 10px;
}
.falcon-dash__detail {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
color: var(--falcon-lower-text);
font-size: 15px;
font-style: normal;
line-height: 1.6;
}
.falcon-dash__detail strong {
color: var(--falcon-text);
font-weight: 600;
}
address.falcon-dash__detail {
display: block;
color: var(--falcon-text);
}
.falcon-dash__help {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
border: 1px dashed #cfd6e6;
border-radius: 16px;
color: var(--falcon-lower-text);
}
.falcon-dash__help strong {
color: var(--falcon-text);
font-weight: 600;
}
.falcon .falcon-dash__help a {
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
/* -- Orders: each order is a card ------------------------------------------------------------ */
.falcon .falcon-woo--account .woocommerce-orders-table {
width: 100%;
margin: 0;
border: 0;
border-collapse: separate;
border-spacing: 0;
}
.falcon .falcon-woo--account .woocommerce-orders-table thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
.falcon .falcon-woo--account .woocommerce-orders-table tbody {
display: flex;
flex-direction: column;
gap: 14px;
}
.falcon .falcon-woo--account .woocommerce-orders-table tbody tr {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"number status"
"date total"
"actions actions";
gap: 4px 16px;
padding: 20px 22px;
text-align: left;
}
.falcon .falcon-woo--account .falcon-account .woocommerce-orders-table tr :is(td, th) {
display: block;
padding: 0;
border: 0;
background: none;
/* WooCommerce right-aligns every cell on phones with !important. */
text-align: left !important;
line-height: 1.4;
}
.falcon .falcon-woo--account .falcon-account .woocommerce-orders-table tr :is(td, th)::before {
content: none !important;
}
.falcon-woo--account .woocommerce-orders-table__cell-order-number {
grid-area: number;
font-size: 17px;
font-weight: 600;
}
.falcon .falcon-woo--account .woocommerce-orders-table__cell-order-number a {
color: var(--falcon-text);
}
.falcon-woo--account .woocommerce-orders-table__cell-order-date {
grid-area: date;
color: var(--falcon-lower-text);
font-size: 14px;
}
.falcon-woo--account .woocommerce-orders-table__cell-order-status {
grid-area: status;
justify-self: end;
}
.falcon .falcon-woo--account .falcon-account .woocommerce-orders-table tr td.woocommerce-orders-table__cell-order-total {
grid-area: total;
justify-self: end;
color: var(--falcon-lower-text);
font-size: 14px;
text-align: right !important;
}
.falcon-woo--account .woocommerce-orders-table__cell-order-total .woocommerce-Price-amount {
color: var(--falcon-text);
font-size: 16px;
font-weight: 600;
}
.falcon-woo--account .woocommerce-orders-table__cell-order-actions {
display: flex !important;
flex-wrap: wrap;
gap: 8px;
grid-area: actions;
margin-top: 12px;
padding-top: 14px !important;
border-top: 1px solid #edf0f6 !important;
}
.falcon .falcon-woo--account .woocommerce-orders-table__cell-order-actions .button {
min-height: 36px;
padding: 0 14px;
font-size: 13.5px;
}
.falcon-woo--account .woocommerce-pagination {
display: flex;
justify-content: space-between;
gap: 10px;
}
/* WooCommerce's "confirm your email to find past orders" prompt and other notices. */
.falcon-woo--account .falcon-account :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0;
padding: 16px 20px;
border: 1px solid #cfd8f2 !important;
border-radius: 12px;
background: #f3f6fd !important;
color: var(--falcon-brand) !important;
font-size: 15px;
line-height: 1.5;
list-style: none;
}
.falcon-woo--account .falcon-account .woocommerce-message {
border-color: #bfe3cd !important;
background: #effaf3 !important;
color: #17603a !important;
}
.falcon-woo--account .falcon-account .woocommerce-error {
border-color: #f1c4c4 !important;
background: #fdf1f1 !important;
color: #8f1d1d !important;
}
.falcon-woo--account .falcon-account :is(.woocommerce-info, .woocommerce-message, .woocommerce-error)::before {
content: none;
}
.falcon-woo--account .falcon-account .woocommerce-info .button {
order: 2;
margin-left: auto;
}
/* An empty list (no orders, no downloads, no saved cards): the notice is the card. */
.falcon-woo--account .falcon-account__empty > :is(.woocommerce-info, .woocommerce-message) {
padding: 28px 26px;
border-color: #e3e7f0 !important;
background: var(--falcon-white) !important;
color: var(--falcon-lower-text) !important;
font-size: 16px;
}
/* -- One order --------------------------------------------------------------------------------- */
.falcon-woo--account .falcon-account--view-order .falcon-account__panel > p:first-of-type {
color: var(--falcon-lower-text);
font-size: 15px;
line-height: 1.6;
}
.falcon-woo--account .falcon-account--view-order mark {
background: none;
color: var(--falcon-text);
font-weight: 600;
}
.falcon-woo--account .falcon-account--view-order mark.order-number {
font-size: 17px;
}
.falcon-woo--account .falcon-account--view-order mark.order-status {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
background: #eaeefb;
color: var(--falcon-brand);
font-size: 13px;
}
.falcon .falcon-woo--account .falcon-account :is(.woocommerce-order-details, .woocommerce-customer-details) {
margin: 0;
}
.falcon .falcon-woo--account .falcon-account :is(.woocommerce-order-details__title, .woocommerce-column__title) {
margin-bottom: 14px;
}
.falcon .falcon-woo--account .woocommerce-table--order-details {
width: 100%;
margin: 0;
border: 0;
border-collapse: collapse;
}
.falcon .falcon-woo--account .woocommerce-table--order-details :is(th, td) {
padding: 12px 0;
border: 0;
border-bottom: 1px solid #edf0f6;
background: none;
color: var(--falcon-text);
font-size: 15px;
line-height: 1.45;
text-align: left;
vertical-align: top;
}
.falcon .falcon-woo--account .woocommerce-table--order-details :is(th, td):last-child {
padding-left: 16px;
text-align: right;
}
.falcon .falcon-woo--account .woocommerce-table--order-details thead th {
padding-top: 0;
color: var(--falcon-lower-text);
font-size: 13px;
font-weight: 600;
}
.falcon .falcon-woo--account .woocommerce-table--order-details tbody tr:nth-child(odd) > :is(td, th),
.falcon .falcon-woo--account .woocommerce-table--order-details tbody tr:hover > :is(td, th) {
background: none;
}
.falcon .falcon-woo--account .woocommerce-table--order-details .product-name a {
color: var(--falcon-text);
font-weight: 500;
}
.falcon .falcon-woo--account .woocommerce-table--order-details .product-quantity {
color: var(--falcon-lower-text);
font-weight: 400;
}
.falcon .falcon-woo--account .woocommerce-table--order-details .wc-item-meta {
margin: 4px 0 0;
padding: 0;
color: var(--falcon-lower-text);
font-size: 13px;
list-style: none;
}
.falcon .falcon-woo--account .woocommerce-table--order-details .wc-item-meta p {
display: inline;
}
.falcon .falcon-woo--account .woocommerce-table--order-details tfoot th {
color: var(--falcon-lower-text);
font-weight: 500;
}
.falcon .falcon-woo--account .woocommerce-table--order-details tfoot tr:last-child > * {
border-bottom: 0;
}
.falcon .falcon-woo--account .woocommerce-table--order-details tfoot tr:has(.woocommerce-Price-amount):nth-last-child(-n + 3) td .woocommerce-Price-amount {
font-weight: 600;
}
.falcon .falcon-woo--account .woocommerce-table--order-details tfoot td :is(a.button, .button) {
margin: 0 0 6px 6px;
}
.falcon .falcon-woo--account .woocommerce-table--order-details small {
color: var(--falcon-lower-text);
font-size: 13px;
}
.falcon .falcon-woo--account .woocommerce-order-details .order-again {
margin-top: 18px;
}
/* The delivery notes plugin repeats the order's print links under the addresses; the order table's
Actions row already has them. */
.falcon-woo--account .falcon-account--view-order .falcon-account__panel > .order-print {
display: none;
}
.falcon-woo--account .woocommerce-customer-details .woocommerce-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.falcon-woo--account .woocommerce-customer-details .woocommerce-columns::before,
.falcon-woo--account .woocommerce-customer-details .woocommerce-columns::after {
content: none;
}
.falcon .falcon-woo--account .woocommerce-customer-details .woocommerce-column {
float: none;
width: auto;
max-width: none;
padding: 0;
}
.falcon-woo--account .falcon-account address {
margin: 0;
padding: 0;
border: 0;
color: var(--falcon-text);
font-size: 15px;
font-style: normal;
line-height: 1.7;
}
.falcon-woo--account .woocommerce-customer-details address p {
margin: 6px 0 0;
color: var(--falcon-lower-text);
}
/* -- Addresses --------------------------------------------------------------------------------- */
.falcon-woo--account .falcon-account--edit-address .falcon-account__panel > p:first-of-type {
color: var(--falcon-lower-text);
}
.falcon .falcon-woo--account .woocommerce-Addresses {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 0;
}
.falcon .falcon-woo--account .woocommerce-Addresses::before,
.falcon .falcon-woo--account .woocommerce-Addresses::after {
content: none;
}
.falcon .falcon-woo--account .woocommerce-Address {
float: none;
width: auto;
max-width: none;
margin: 0;
}
.falcon .falcon-woo--account .falcon-account .woocommerce-Address-title::before,
.falcon .falcon-woo--account .falcon-account .woocommerce-Address-title::after {
content: none;
display: none;
}
.falcon .falcon-woo--account .falcon-account .woocommerce-Address-title h2 {
float: none;
}
.falcon .falcon-woo--account .falcon-account form > h2 {
margin-bottom: 14px;
}
.falcon .falcon-woo--account .woocommerce-Address-title .edit {
float: none;
}
.falcon .falcon-woo--account .woocommerce-Address-title .edit::before {
content: "";
width: 15px;
height: 15px;
background: currentColor;
-webkit-mask: url(../icons/tabler-pencil.svg) center / contain no-repeat;
mask: url(../icons/tabler-pencil.svg) center / contain no-repeat;
}
/* -- Forms: account details and address edit ---------------------------------------------------- */
.falcon-woo--account .woocommerce-EditAccountForm,
.falcon-woo--account .woocommerce-address-fields__field-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 16px;
}
.falcon-woo--account .woocommerce-EditAccountForm > *,
.falcon-woo--account .woocommerce-address-fields__field-wrapper > * {
grid-column: 1 / -1;
}
.falcon-woo--account .woocommerce-EditAccountForm > .form-row-first,
.falcon-woo--account .woocommerce-address-fields__field-wrapper > .form-row-first {
grid-column: 1;
}
.falcon-woo--account .woocommerce-EditAccountForm > .form-row-last,
.falcon-woo--account .woocommerce-address-fields__field-wrapper > .form-row-last {
grid-column: 2;
}
.falcon-woo--account .woocommerce-EditAccountForm > .clear,
.falcon-woo--account .woocommerce-EditAccountForm::before,
.falcon-woo--account .woocommerce-EditAccountForm::after {
display: none;
content: none;
}
.falcon-woo--account .falcon-account form .form-row {
float: none;
width: auto;
margin: 0 0 18px;
padding: 0;
}
.falcon .falcon-woo--account .falcon-account form label {
display: block;
margin-bottom: 8px;
color: var(--falcon-text);
font-size: 14px;
font-weight: 600;
line-height: 1.3;
}
.falcon-woo--account .falcon-account form .required {
color: #b42318;
text-decoration: none;
}
.falcon-woo--account .falcon-account form .optional {
color: var(--falcon-lower-text);
font-weight: 400;
}
.falcon .falcon-woo--account .falcon-account form :is(.input-text, select, textarea),
.falcon .falcon-woo--account .falcon-account form .select2-container .select2-selection--single {
width: 100%;
height: 50px;
padding: 0 14px;
border: 1px solid #d3d8e4;
border-radius: 10px;
background: var(--falcon-white);
color: var(--falcon-text);
font-family: var(--falcon-font);
font-size: 16px;
line-height: 1.4;
box-shadow: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.falcon .falcon-woo--account .falcon-account form .input-text:hover {
border-color: #b4bccf;
}
.falcon .falcon-woo--account .falcon-account form :is(.input-text, select, textarea):focus,
.falcon .falcon-woo--account .falcon-account form .select2-container--focus .select2-selection--single {
border-color: var(--falcon-brand);
outline: none;
box-shadow: 0 0 0 4px rgba(28, 51, 144, 0.14);
}
.falcon-woo--account .falcon-account form .select2-container .select2-selection--single .select2-selection__rendered {
padding: 0;
color: var(--falcon-text);
line-height: 48px;
}
.falcon-woo--account .falcon-account form .select2-container .select2-selection--single .select2-selection__arrow {
top: 11px;
right: 10px;
}
.woocommerce-account .select2-results__option {
color: var(--falcon-text);
font-family: var(--falcon-font);
font-size: 15px;
}
.woocommerce-account .select2-dropdown {
border-color: #d3d8e4;
border-radius: 10px;
overflow: hidden;
}
.falcon-woo--account .falcon-account form .password-input {
display: block;
position: relative;
}
.falcon-woo--account .falcon-account form .password-input .input-text {
padding-right: 48px;
}
.falcon .falcon-woo--account .falcon-account form .show-password-input,
.falcon .falcon-woo--account .falcon-account form .show-password-input:hover,
.falcon .falcon-woo--account .falcon-account form .show-password-input:focus {
top: 50%;
right: 8px;
width: 34px;
min-height: 0;
height: 34px;
padding: 0;
border: 0;
border-radius: 8px;
background-color: transparent;
transform: translateY(-50%);
}
.falcon .falcon-woo--account .falcon-account form .show-password-input:hover {
background-color: #eef1fb;
}
.falcon-woo--account .falcon-account form em {
display: block;
margin-top: 6px;
color: var(--falcon-lower-text);
font-size: 13px;
font-style: normal;
}
.falcon-woo--account .falcon-account fieldset {
margin: 4px 0 18px;
padding: 0;
border: 0;
}
.falcon-woo--account .falcon-account fieldset legend {
float: left;
width: 100%;
margin: 0 0 16px;
padding: 22px 0 0;
border-top: 1px solid #edf0f6;
color: var(--falcon-text);
font-size: 17px;
font-weight: 600;
}
.falcon-woo--account .falcon-account fieldset legend + * {
clear: left;
}
.falcon-woo--account .woocommerce-address-fields > p:last-child,
.falcon-woo--account .woocommerce-EditAccountForm > p:last-of-type {
margin: 4px 0 0;
}
/* -- Pages plugins add (Store Credits, My Coupons) and saved cards ------------------------------ */
.falcon-woo--account :is(.falcon-account--other, .falcon-account--payment-methods, .falcon-account--downloads) .falcon-account__panel {
gap: 16px;
color: var(--falcon-lower-text);
}
.falcon-woo--account .falcon-account--other .falcon-account__panel p {
margin: 0;
}
.falcon-woo--account :is(.falcon-account--other, .falcon-account--payment-methods, .falcon-account--downloads) .falcon-account__panel > .button {
align-self: flex-start;
}
/* "No saved methods found." sits in the card as plain text. */
.falcon .falcon-woo--account .falcon-account--payment-methods .falcon-account__panel > .woocommerce-info {
padding: 0;
border: 0 !important;
background: none !important;
color: var(--falcon-lower-text) !important;
}
.falcon-woo--account .falcon-account--other .falcon-account__panel strong {
color: var(--falcon-text);
}
.falcon .falcon-woo--account .falcon-account--payment-methods .woocommerce-MyAccount-paymentMethods :is(th, td) {
padding: 12px 8px;
border: 0;
border-bottom: 1px solid #edf0f6;
background: none;
text-align: left;
}
/* -- Tablets and phones -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
.falcon-woo--account > .falcon-container {
padding-inline: 20px;
}
.falcon-woo--account .falcon-account > .woocommerce {
grid-template-columns: 1fr;
gap: 20px;
}
.falcon-account__tabs {
position: static;
}
/* The menu becomes a row of tabs that slides sideways. */
.falcon-woo--account .woocommerce-MyAccount-navigation ul {
flex-direction: row;
gap: 4px;
padding: 6px;
border-radius: 16px;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.falcon-woo--account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
display: none;
}
.falcon-woo--account .woocommerce-MyAccount-navigation li {
flex: none;
scroll-snap-align: start;
}
.falcon .falcon-account .woocommerce-MyAccount-navigation li a {
gap: 8px;
min-height: 44px;
padding: 0 14px;
white-space: nowrap;
}
.falcon .falcon-account .woocommerce-MyAccount-navigation li a::before {
width: 18px;
height: 18px;
}
.falcon-woo--account .woocommerce-MyAccount-navigation-link--customer-logout {
margin: 0;
padding: 0;
border: 0;
}
}
@media (max-width: 767px) {
.falcon-woo--account {
padding: 24px 0 56px;
}
.falcon-woo--account > .falcon-container {
gap: 20px;
padding-inline: 14px;
}
.falcon-account-intro {
gap: 14px;
}
.falcon-account-intro__avatar {
width: 48px;
height: 48px;
font-size: 17px;
}
.falcon .falcon-account-intro__heading {
font-size: 24px;
}
.falcon-account-intro__text {
font-size: 15px;
}
.falcon-card,
.falcon .falcon-woo--account .woocommerce-orders-table tbody tr,
.falcon .falcon-woo--account .woocommerce-Address,
.falcon-woo--account .woocommerce-EditAccountForm,
.falcon-woo--account .woocommerce-address-fields,
.falcon-woo--account .woocommerce-order-details,
.falcon-woo--account .woocommerce-customer-details,
.falcon-woo--account .falcon-account--view-order .woocommerce-MyAccount-content .falcon-account__panel > p:first-of-type,
.falcon-woo--account :is(.falcon-account--other, .falcon-account--payment-methods, .falcon-account--downloads) .falcon-account__panel {
padding: 18px;
}
.falcon .falcon-dash__order {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"main total"
"main status";
gap: 6px 12px;
}
.falcon-dash__order-main {
grid-area: main;
}
.falcon-dash__order-total {
grid-area: total;
}
.falcon-dash__order .falcon-status {
grid-area: status;
justify-self: end;
}
.falcon-dash__order-arrow {
display: none;
}
.falcon-dash__grid,
.falcon .falcon-woo--account .woocommerce-Addresses,
.falcon-woo--account .woocommerce-customer-details .woocommerce-columns,
.falcon-woo--account .woocommerce-EditAccountForm,
.falcon-woo--account .woocommerce-address-fields__field-wrapper {
grid-template-columns: 1fr;
}
.falcon-woo--account .woocommerce-EditAccountForm > :is(.form-row-first, .form-row-last),
.falcon-woo--account .woocommerce-address-fields__field-wrapper > :is(.form-row-first, .form-row-last) {
grid-column: 1;
}
.falcon-woo--account .falcon-account button[type="submit"] {
width: 100%;
}
/* Product names get most of the width; totals and buttons wrap on the right. */
.falcon .falcon-woo--account .woocommerce-table--order-details {
table-layout: fixed;
}
.falcon .falcon-woo--account .woocommerce-table--order-details :is(th, td):first-child {
width: 58%;
}
/* The Actions row: its label above, the buttons below across the full width. */
.falcon .falcon-woo--account .woocommerce-table--order-details tr:has(> .order-actions--heading) {
display: flex;
flex-direction: column;
}
.falcon .falcon-woo--account .woocommerce-table--order-details tr:has(> .order-actions--heading) > th {
width: auto;
padding-bottom: 8px;
border-bottom: 0;
}
.falcon .falcon-woo--account .woocommerce-table--order-details tr:has(> .order-actions--heading) > td {
display: flex;
flex-wrap: wrap;
gap: 8px;
width: auto;
padding-left: 0;
padding-top: 0;
}
.falcon .falcon-woo--account .woocommerce-table--order-details tr:has(> .order-actions--heading) > td .button {
margin: 0;
}
}
/* 33-product-gallery.css */
/* Product gallery, lightbox and the audio overview under it (template-parts/product/gallery.php). */
.falcon-product__gallery {
gap: 16px;
}
@media (min-width: 768px) {
.falcon-product__gallery {
position: sticky;
top: calc(24px + var(--falcon-pinned-h, 0px));
transition: top 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
align-self: flex-start;
}
}
.falcon-gallery {
--falcon-gallery-line: #e6eaf0;
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.falcon-gallery button {
margin: 0;
padding: 0;
border: 0;
background: none;
font: inherit;
cursor: pointer;
}
/* Main image. */
.falcon-gallery__stage {
position: relative;
aspect-ratio: 1;
overflow: hidden;
border: 1px solid var(--falcon-gallery-line);
border-radius: 20px;
background: #fff;
}
.falcon-gallery__track,
.falcon-lightbox__track {
display: flex;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.falcon-gallery__track::-webkit-scrollbar,
.falcon-lightbox__track::-webkit-scrollbar {
display: none;
}
.falcon-gallery__track:focus-visible {
outline: 2px solid var(--falcon-brand);
outline-offset: -4px;
border-radius: 20px;
}
.falcon-gallery__slide,
.falcon-lightbox__slide {
display: flex;
flex: 0 0 100%;
align-items: center;
justify-content: center;
min-width: 0;
scroll-snap-align: center;
scroll-snap-stop: always;
}
.falcon-gallery__slide {
padding: 6%;
}
.falcon .falcon-gallery__slide img {
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
object-fit: contain;
cursor: zoom-in;
}
/* Videos: the poster with a play button, then the player in its place. */
.falcon-gallery .falcon-gallery__video {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 12px;
background: #000;
}
.falcon .falcon-gallery__video img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
}
.falcon-gallery__play {
position: absolute;
inset: 50% auto auto 50%;
display: grid;
place-items: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--falcon-brand);
color: #fff;
box-shadow: 0 8px 24px rgba(28, 51, 144, 0.35);
transform: translate(-50%, -50%);
transition: transform 0.2s ease;
}
.falcon-gallery__video:hover .falcon-gallery__play {
transform: translate(-50%, -50%) scale(1.08);
}
.falcon-gallery__play svg {
width: 26px;
height: 26px;
margin-left: 3px;
}
.falcon-gallery__frame {
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
border-radius: 12px;
}
/* Arrows, full-size button and counter. */
.falcon-gallery .falcon-gallery__nav,
.falcon-gallery .falcon-gallery__expand {
position: absolute;
display: grid;
place-items: center;
border-radius: 50%;
background: #fff;
color: var(--falcon-brand);
box-shadow: 0 4px 16px rgba(27, 29, 40, 0.12), 0 0 0 1px rgba(27, 29, 40, 0.04);
transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.falcon-gallery .falcon-gallery__nav {
top: 50%;
width: 44px;
height: 44px;
opacity: 0;
transform: translateY(-50%);
}
.falcon-gallery__nav--prev {
left: 16px;
}
.falcon-gallery__nav--next {
right: 16px;
}
.falcon-gallery__stage:hover .falcon-gallery__nav,
.falcon-gallery__stage:focus-within .falcon-gallery__nav {
opacity: 1;
}
.falcon-gallery .falcon-gallery__nav:hover,
.falcon-gallery .falcon-gallery__expand:hover {
background: var(--falcon-brand);
color: #fff;
}
.falcon-gallery .falcon-gallery__nav:disabled {
opacity: 0;
pointer-events: none;
}
.falcon-gallery .falcon-gallery__expand {
top: 16px;
right: 16px;
width: 40px;
height: 40px;
}
.falcon-gallery__nav svg {
width: 22px;
height: 22px;
}
.falcon-gallery__expand svg {
width: 18px;
height: 18px;
}
.falcon-gallery .falcon-gallery__nav:focus-visible,
.falcon-gallery .falcon-gallery__expand:focus-visible,
.falcon-gallery .falcon-gallery__thumb:focus-visible {
outline: 2px solid var(--falcon-brand);
outline-offset: 2px;
}
.falcon-gallery__count {
position: absolute;
bottom: 16px;
left: 16px;
margin: 0;
padding: 6px 11px;
border-radius: 99px;
background: rgba(27, 29, 40, 0.72);
color: #fff;
font-size: 12px;
font-variant-numeric: tabular-nums;
font-weight: 500;
line-height: 1;
pointer-events: none;
}
/* Touch screens swipe, so the arrows stay out of the way. */
@media (hover: none) {
.falcon-gallery .falcon-gallery__nav {
display: none;
}
}
/* Thumbnails. */
.falcon-gallery__thumbs {
display: flex;
gap: 10px;
padding: 3px;
margin: -3px;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: thin;
scrollbar-color: var(--falcon-gallery-line) transparent;
}
.falcon-gallery .falcon-gallery__thumb {
position: relative;
flex: 0 0 76px;
aspect-ratio: 1;
padding: 6px;
overflow: hidden;
border-radius: 12px;
background: #fff;
box-shadow: inset 0 0 0 1px var(--falcon-gallery-line);
opacity: 0.65;
scroll-snap-align: start;
transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.falcon-gallery .falcon-gallery__thumb:hover,
.falcon-gallery .falcon-gallery__thumb[aria-current="true"] {
opacity: 1;
}
.falcon-gallery .falcon-gallery__thumb[aria-current="true"] {
box-shadow: inset 0 0 0 2px var(--falcon-brand);
}
.falcon .falcon-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
.falcon-gallery__thumb--video {
padding: 0;
}
.falcon .falcon-gallery__thumb--video img {
object-fit: cover;
}
.falcon-gallery__thumb .falcon-gallery__play {
width: 28px;
height: 28px;
box-shadow: none;
}
.falcon-gallery__thumb .falcon-gallery__play svg {
width: 12px;
height: 12px;
margin-left: 2px;
}
.falcon-gallery--single .falcon-gallery__thumbs,
.falcon-gallery--single .falcon-gallery__nav,
.falcon-gallery--single .falcon-gallery__count {
display: none;
}
@media (max-width: 767px) {
.falcon-gallery__stage {
border-radius: 16px;
}
.falcon-gallery .falcon-gallery__thumb {
flex-basis: 60px;
border-radius: 10px;
padding: 4px;
}
.falcon-gallery .falcon-gallery__expand {
top: 12px;
right: 12px;
width: 36px;
height: 36px;
}
.falcon-gallery__count {
bottom: 12px;
left: 12px;
}
}
/* Lightbox. */
.falcon-lightbox {
width: 100vw;
max-width: none;
height: 100dvh;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: #0e101a;
color: #fff;
opacity: 1;
}
.falcon-lightbox::backdrop {
background: #0e101a;
}
html.falcon-lightbox-open {
overflow: hidden;
}
.falcon-lightbox__slide {
padding: 72px 96px;
overflow: hidden;
}
.falcon .falcon-lightbox__slide img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
cursor: zoom-in;
transition: transform 0.25s ease;
}
.falcon .falcon-lightbox__slide.is-zoomed img {
cursor: zoom-out;
transform: scale(2.2);
}
.falcon-lightbox .falcon-gallery__video,
.falcon-lightbox .falcon-gallery__frame {
width: min(100%, 1100px);
}
.falcon-lightbox button {
position: absolute;
display: grid;
place-items: center;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: #fff;
cursor: pointer;
transition: background 0.2s ease, opacity 0.2s ease;
z-index: 2;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
/* Over a zoomed image the controls need their own dark background. */
.falcon-lightbox:has(.is-zoomed) > button {
background: rgba(14, 16, 26, 0.7);
}
.falcon-lightbox button:hover {
background: rgba(255, 255, 255, 0.24);
}
.falcon-lightbox button:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.falcon-lightbox button:disabled {
opacity: 0;
pointer-events: none;
}
.falcon-lightbox .falcon-lightbox__close {
top: 20px;
right: 20px;
width: 48px;
height: 48px;
}
.falcon-lightbox .falcon-lightbox__nav {
top: 50%;
width: 56px;
height: 56px;
transform: translateY(-50%);
}
.falcon-lightbox__nav--prev {
left: 24px;
}
.falcon-lightbox__nav--next {
right: 24px;
}
.falcon-lightbox svg {
width: 26px;
height: 26px;
}
.falcon-lightbox .falcon-gallery__play svg {
width: 26px;
height: 26px;
}
.falcon-lightbox__count {
position: absolute;
z-index: 2;
bottom: 24px;
left: 50%;
margin: 0;
color: rgba(255, 255, 255, 0.75);
font-size: 14px;
font-variant-numeric: tabular-nums;
transform: translateX(-50%);
}
.falcon-lightbox--single .falcon-lightbox__nav,
.falcon-lightbox--single .falcon-lightbox__count {
display: none;
}
@media (max-width: 767px) {
.falcon-lightbox__slide {
padding: 72px 12px;
}
.falcon-lightbox .falcon-lightbox__nav {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-gallery__track,
.falcon-lightbox__track,
.falcon-gallery__thumbs {
scroll-behavior: auto;
}
}
/* Audio overview under the images, the same width as the gallery (on phones it moves under the
"Read more about this product." heading, 33-product-audio.js). */
.falcon-product__audio .falcon-audio {
max-width: none;
margin: 0;
}
/* 34-variation-pills.css */
/* Product options as pill buttons (falcon_variation_pills(), 34-variation-pills.js). */
/* WooCommerce's dropdown stays in the form for its script and the submitted value, out of sight. */
.falcon-pills__select {
position: absolute !important;
left: 0 !important;
width: 1px !important;
min-width: 0 !important; /* WooCommerce gives it min-width: 75%, which pushed the page wider than a phone. */
max-width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
border: 0 !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
/* "Fitting: Self Fit" above each group, or the group's heading from Site Settings on its own. */
:where(.single-product) .variations .falcon-pills-row th.label {
display: flex !important;
flex-wrap: wrap;
align-items: baseline;
gap: 0 6px;
margin-bottom: 12px;
color: var(--falcon-dark);
font-size: 16px;
font-weight: 700;
letter-spacing: -0.01em;
}
.falcon-pills__chosen {
color: var(--falcon-lower-text);
font-weight: 400;
}
.falcon-pills-row:not(.falcon-pills-row--heading) th.label:has(.falcon-pills__chosen:not(:empty)) .falcon-pills__label::after {
content: ":";
}
.falcon-pills-row--heading .falcon-pills__chosen {
display: none;
}
.falcon-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.falcon-pill {
position: relative;
display: inline-flex;
align-items: center;
padding: 10px 18px;
border: 1.5px solid #d6dbe6;
border-radius: 999px;
background: #fff;
color: var(--falcon-dark);
font-family: var(--falcon-font);
font-size: 14px;
font-weight: 500;
line-height: 1.2;
cursor: pointer;
user-select: none;
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease, transform 0.2s ease;
}
/* The radio covers the pill, invisible, so clicks, taps and focus all land on it. */
.falcon-pill input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.falcon-pill:hover {
border-color: #c9d2f1;
background: #eaeefb;
}
.falcon-pill:active {
transform: scale(0.97);
}
.falcon-pill:has(input:focus-visible) {
outline: 2px solid var(--falcon-brand);
outline-offset: 2px;
}
.falcon-pill:has(input:checked) {
border-color: var(--falcon-brand);
background: var(--falcon-brand);
color: #fff;
box-shadow: 0 10px 20px -12px rgba(28, 51, 144, 0.7);
}
/* The tick grows in beside the chosen value. */
.falcon-pill__tick {
display: inline-grid;
place-items: center;
width: 0;
margin-left: 0;
opacity: 0;
transform: scale(0.3) rotate(-30deg);
transition: width 0.25s ease, margin-left 0.25s ease, opacity 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.falcon-pill__tick .falcon-icon {
width: 12px;
height: 12px;
fill: currentColor;
}
.falcon-pill:has(input:checked) .falcon-pill__tick {
width: 12px;
margin-left: 8px;
opacity: 1;
transform: none;
}
/* What a value adds to, or takes off, the price of the current choices: "+£50". */
.falcon-pill__delta {
display: inline-block;
margin-left: 8px;
color: color-mix(in srgb, var(--falcon-brand) 75%, #fff);
font-size: 13px;
font-weight: 500;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.falcon-pill__delta:empty {
display: none;
}
.falcon-pill__delta.is-fresh {
animation: falcon-pill-delta 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes falcon-pill-delta {
from {
opacity: 0;
transform: translateY(3px);
}
}
/* Values that don't make an existing combination with the current choices. Still clickable:
choosing one clears the other options. */
.falcon-pill.is-unavailable {
border-style: dashed;
border-color: #cfd6e3;
background: transparent;
color: #8a8fa0;
}
.falcon-pill.is-unavailable .falcon-pill__text {
text-decoration: line-through;
text-decoration-color: rgba(100, 104, 122, 0.45);
}
.falcon-pill.is-unavailable:hover {
border-color: var(--falcon-brand);
color: var(--falcon-brand);
}
.falcon-pill.is-popping {
animation: falcon-pill-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes falcon-pill-pop {
0% {
transform: scale(1);
}
35% {
transform: scale(0.93);
}
100% {
transform: scale(1);
}
}
/* Option cards (Site Settings > Shop & Products > Product page > Option cards): an icon, the name
and a short description, two to a row and all the same height: the icon on top, the price
difference or the tick in the corner, the name on one line and the description on two. Chosen:
navy, as a chosen pill. */
/* The options table's body otherwise shrinks to its content, and the cards with it. */
:where(.single-product) .variations:has(.falcon-pills--cards) tbody {
display: block;
width: 100%;
}
.falcon-pills--cards {
display: grid;
flex: 1 1 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
width: 100%;
}
.falcon-pill.falcon-pill--card {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 12px;
min-width: 0;
padding: 16px;
border: 1.5px solid #dfe4ee;
border-radius: 18px;
background: #f7f8fc;
color: var(--falcon-dark);
line-height: 1.3;
text-align: start;
white-space: normal;
overflow-wrap: anywhere;
}
.falcon-pill.falcon-pill--card:hover {
border-color: #c9d2f1;
background: #f2f4fc;
}
.falcon-pill__icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 13px;
background: #fff;
box-shadow: 0 0 0 1px #e6eaf3;
color: var(--falcon-brand);
transition: background-color 0.25s ease;
}
.falcon-pill__icon svg {
width: 22px;
height: 22px;
}
.falcon-pill__icon svg:not([fill="none"]) {
fill: currentColor;
}
.falcon-pill__body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.falcon-pill--card .falcon-pill__text {
overflow: hidden;
font-size: 15px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Two lines (three where the cards are narrowest), kept even when a description is shorter or missing, so every card
is the same height. About 50 to 60 characters fills them. */
.falcon-pill__description {
display: -webkit-box;
min-height: calc(2 * 1.4em);
overflow: hidden;
color: var(--falcon-lower-text);
font-size: 13px;
font-weight: 400;
line-height: 1.4;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
transition: color 0.25s ease;
}
.falcon-pill--card .falcon-pill__delta {
position: absolute;
top: 16px;
right: 16px;
margin: 0;
padding: 3px 9px;
border-radius: 999px;
background: #fff;
box-shadow: 0 0 0 1px #e6eaf3;
color: var(--falcon-brand);
font-size: 12.5px;
font-weight: 600;
}
/* The tick: a white disc in the corner of the chosen card. */
.falcon-pill--card .falcon-pill__tick {
position: absolute;
top: 14px;
right: 14px;
width: 22px;
height: 22px;
margin: 0;
border-radius: 50%;
background: #fff;
color: var(--falcon-brand);
}
.falcon-pill--card:has(input:checked) .falcon-pill__tick {
width: 22px;
margin: 0;
}
.falcon-pill--card .falcon-pill__tick .falcon-icon {
width: 11px;
height: 11px;
}
.falcon-pill.falcon-pill--card:has(input:checked) {
border-color: var(--falcon-brand);
background: var(--falcon-brand);
color: #fff;
box-shadow: 0 14px 28px -16px rgba(28, 51, 144, 0.75);
}
.falcon-pill--card:has(input:checked) .falcon-pill__icon {
background: #fff;
}
.falcon-pill--card:has(input:checked) .falcon-pill__description {
color: rgba(255, 255, 255, 0.78);
}
.falcon-pill.falcon-pill--card.is-unavailable {
opacity: 0.6;
}
.falcon-pill.falcon-pill--card.is-unavailable .falcon-pill__icon {
background: #f1f3f7;
color: #8a8fa0;
}
/* Where the cards are narrowest (small tablets beside the gallery, and phones): three lines. */
@media (min-width: 768px) and (max-width: 999px), (max-width: 479px) {
.falcon-pill__description {
min-height: calc(3 * 1.4em);
-webkit-line-clamp: 3;
line-clamp: 3;
}
}
@media (max-width: 479px) {
.falcon-pill.falcon-pill--card {
padding: 14px;
}
.falcon-pill--card .falcon-pill__text {
font-size: 14px;
}
.falcon-pill__icon {
width: 40px;
height: 40px;
border-radius: 12px;
}
.falcon-pill--card .falcon-pill__delta {
top: 14px;
right: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-pill,
.falcon-pill__tick {
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.falcon-pill.is-popping,
.falcon-pill__delta.is-fresh,
.falcon-pill:active {
animation: none;
transform: none;
}
}
/* 35-live-search.css */
/*
* Live product search (template-parts/search/form.php, 35-live-search.js).
* The box keeps the 74px row the header's search had, so the header does not move. Wide screens: a
* panel under the field. Below the box's overlay width (the whole tablet and mobile header): full
* screen, the field at the top with a back button. Every class starts falcon-live-search, so one
* WP Rocket "Remove Unused CSS" safelist entry, .falcon-live-search(.*), keeps the panel's styles.
*/
.falcon-live-search {
--falcon-search-height: 54px;
--falcon-search-ring: rgba(28, 51, 144, 0.14);
--falcon-search-line: #e3e8ee;
--falcon-search-muted: #64687a;
--falcon-search-tint: #eef2fb;
position: relative;
display: flex;
align-items: center;
width: 100%;
min-width: 0;
min-height: 74px;
}
.falcon-live-search__form {
width: 100%;
min-width: 0;
margin: 0;
}
.falcon-live-search__box {
position: relative;
}
.falcon-live-search__bar {
display: flex;
align-items: center;
gap: 8px;
}
/* The field: a soft pill that turns white with a blue edge and ring while in use. */
.falcon-live-search__field {
position: relative;
display: flex;
flex: 1;
align-items: center;
min-width: 0;
height: var(--falcon-search-height);
border: 1px solid transparent;
border-radius: 999px;
background-color: var(--falcon-bg-light);
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.falcon-live-search__field:hover {
border-color: #d9e0e8;
}
.falcon-live-search__field:focus-within,
.falcon-live-search.is-open .falcon-live-search__field {
border-color: var(--falcon-brand);
background-color: var(--falcon-white);
box-shadow: 0 0 0 4px var(--falcon-search-ring);
}
.falcon .falcon-live-search__submit,
.falcon .falcon-live-search__submit:hover,
.falcon .falcon-live-search__submit:focus {
display: flex;
flex: none;
justify-content: center;
align-items: center;
width: 50px;
height: 100%;
margin: 0;
padding: 0 0 0 6px;
border: 0;
border-radius: 999px 0 0 999px;
background: none;
color: var(--falcon-dark);
cursor: pointer;
transition: color 0.2s ease;
}
.falcon .falcon-live-search__submit:hover,
.falcon-live-search.is-open .falcon-live-search__submit {
color: var(--falcon-brand);
}
.falcon-live-search__submit svg {
width: 20px;
height: 20px;
}
.falcon .falcon-live-search__input[type="search"] {
flex: 1;
width: auto;
min-width: 0;
height: 100%;
margin: 0;
padding: 0 10px 0 2px;
border: 0;
border-radius: 0;
outline: 0;
background: transparent;
box-shadow: none;
color: var(--falcon-dark);
font-family: var(--falcon-font);
font-size: 16px;
font-weight: 400;
line-height: 1.2;
text-overflow: ellipsis;
transition: none;
-webkit-appearance: none;
appearance: none;
}
.falcon .falcon-live-search__input[type="search"]::placeholder {
color: #6b7080;
opacity: 1;
}
.falcon-live-search__input::-webkit-search-cancel-button,
.falcon-live-search__input::-webkit-search-decoration {
display: none;
-webkit-appearance: none;
}
.falcon .falcon-live-search__clear,
.falcon .falcon-live-search__clear:focus {
display: grid;
flex: none;
place-items: center;
width: 30px;
height: 30px;
margin: 0 12px 0 0;
padding: 0;
border: 0;
border-radius: 50%;
background-color: #e6ebf1;
color: var(--falcon-dark);
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.falcon .falcon-live-search__clear:hover {
background-color: var(--falcon-bg-blue);
color: var(--falcon-brand);
}
.falcon .falcon-live-search__clear[hidden] {
display: none;
}
.falcon-live-search__clear svg {
width: 15px;
height: 15px;
}
.falcon-live-search :is(.falcon-live-search__submit, .falcon-live-search__clear, .falcon-live-search__back):focus-visible {
outline: 2px solid var(--falcon-brand);
outline-offset: 2px;
}
/* "/" focuses the header box; a hint for keyboard users on wide screens. */
.falcon-live-search__kbd {
display: none;
flex: none;
place-items: center;
min-width: 24px;
height: 24px;
margin-right: 16px;
padding: 0 6px;
border: 1px solid #d5dbe3;
border-radius: 7px;
background: var(--falcon-white);
color: var(--falcon-search-muted);
font-family: var(--falcon-font);
font-size: 12px;
font-weight: 500;
line-height: 1;
}
@media (min-width: 1280px) and (hover: hover) {
.falcon-live-search__kbd {
display: grid;
}
}
.falcon-live-search.is-open .falcon-live-search__kbd,
.falcon-live-search__kbd[hidden] {
display: none;
}
/* Back button: full screen only. */
.falcon .falcon-live-search__back,
.falcon .falcon-live-search__back:hover,
.falcon .falcon-live-search__back:focus {
display: none;
flex: none;
place-items: center;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: var(--falcon-dark);
cursor: pointer;
}
.falcon-live-search__back svg {
width: 24px;
height: 24px;
}
/* The panel under the field. */
.falcon-live-search__panel {
position: absolute;
top: calc(100% + 10px);
left: 0;
z-index: 9990;
width: max(100%, 600px);
max-width: calc(100vw - 40px);
max-height: min(72vh, 680px);
overflow-y: auto;
overscroll-behavior: contain;
border: 1px solid var(--falcon-search-line);
border-radius: 18px;
background: var(--falcon-white);
box-shadow: 0 28px 60px -20px rgba(27, 29, 40, 0.3), 0 8px 20px -10px rgba(27, 29, 40, 0.14);
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.16s ease, transform 0.16s ease;
}
.falcon-live-search__panel[hidden] {
display: none;
}
.falcon-live-search__panel--end {
right: 0;
left: auto;
}
.falcon-live-search.is-visible .falcon-live-search__panel {
opacity: 1;
transform: none;
}
.falcon-live-search__inner {
padding: 10px;
}
/* Groups, options and chips. */
.falcon-live-search__group + .falcon-live-search__group {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid #eef1f5;
}
.falcon-live-search__label {
padding: 10px 12px 6px;
color: var(--falcon-search-muted);
font-family: var(--falcon-font);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
line-height: 1.2;
text-transform: uppercase;
}
.falcon .falcon-live-search__option {
display: flex;
align-items: center;
gap: 14px;
padding: 8px 12px;
border-radius: 12px;
color: var(--falcon-dark);
font-family: var(--falcon-font);
text-decoration: none;
cursor: pointer;
transition: background-color 0.12s ease;
}
.falcon .falcon-live-search__option.is-active {
background-color: var(--falcon-bg-light);
color: var(--falcon-dark);
}
@media (hover: hover) {
.falcon .falcon-live-search__option:hover {
background-color: var(--falcon-bg-light);
color: var(--falcon-dark);
}
}
.falcon .falcon-live-search__option.is-active {
box-shadow: inset 3px 0 0 var(--falcon-brand);
}
.falcon-live-search__thumb {
display: grid;
flex: none;
place-items: center;
width: 56px;
height: 56px;
overflow: hidden;
border: 1px solid #edf0f4;
border-radius: 12px;
background: var(--falcon-white);
color: var(--falcon-brand);
}
.falcon .falcon-live-search__thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
.falcon-live-search__thumb svg {
width: 22px;
height: 22px;
}
.falcon-live-search__thumb--category {
width: 44px;
height: 44px;
border-color: transparent;
border-radius: 50%;
background: var(--falcon-search-tint);
}
.falcon-live-search__text {
display: flex;
flex: 1;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.falcon-live-search__title {
display: -webkit-box;
overflow: hidden;
color: var(--falcon-dark);
font-size: 14px;
font-weight: 500;
line-height: 1.35;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.falcon-live-search mark {
padding: 0 1px;
border-radius: 3px;
background-color: var(--falcon-bg-blue);
color: var(--falcon-brand);
font-weight: 700;
}
.falcon-live-search__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2px 8px;
color: var(--falcon-search-muted);
font-size: 12px;
line-height: 1.4;
}
.falcon-live-search__meta mark {
padding: 0;
font-weight: 600;
}
.falcon-live-search__dot {
width: 3px;
height: 3px;
border-radius: 50%;
background-color: #b7bcc8;
}
.falcon-live-search__stock {
color: #a4321f;
font-weight: 600;
}
.falcon-live-search__price {
display: flex;
flex: none;
flex-direction: column;
align-items: flex-end;
color: var(--falcon-brand);
font-size: 14px;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
}
.falcon-live-search__price del {
color: #8a8fa0;
font-size: 12px;
font-weight: 400;
}
.falcon-live-search__go {
display: grid;
flex: none;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
color: var(--falcon-brand);
transition: background-color 0.15s ease, transform 0.15s ease;
}
.falcon-live-search__go svg {
width: 16px;
height: 16px;
}
.falcon-live-search__option.is-active .falcon-live-search__go {
background-color: var(--falcon-bg-blue);
}
@media (hover: hover) {
.falcon-live-search__option:hover .falcon-live-search__go {
background-color: var(--falcon-bg-blue);
}
}
.falcon-live-search__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 4px 12px 12px;
}
.falcon .falcon-live-search__chip {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 5px 14px 5px 5px;
border: 1px solid var(--falcon-search-line);
border-radius: 999px;
background: var(--falcon-white);
color: var(--falcon-dark);
font-family: var(--falcon-font);
font-size: 13px;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.falcon .falcon-live-search__chip:not(:has(img)) {
padding-left: 14px;
}
.falcon .falcon-live-search__chip.is-active {
border-color: var(--falcon-brand);
background-color: var(--falcon-search-tint);
color: var(--falcon-brand);
}
@media (hover: hover) {
.falcon .falcon-live-search__chip:hover {
border-color: var(--falcon-brand);
background-color: var(--falcon-search-tint);
color: var(--falcon-brand);
}
}
.falcon .falcon-live-search__chip img {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--falcon-bg-light);
object-fit: contain;
}
/* "See all results". */
.falcon .falcon-live-search__all {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 8px;
padding: 14px 16px;
border-radius: 12px;
background-color: var(--falcon-bg-blue);
color: var(--falcon-brand);
font-family: var(--falcon-font);
font-size: 14px;
font-weight: 500;
line-height: 1.3;
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.falcon .falcon-live-search__all.is-active {
background-color: var(--falcon-brand);
color: var(--falcon-white);
}
@media (hover: hover) {
.falcon .falcon-live-search__all:hover {
background-color: var(--falcon-brand);
color: var(--falcon-white);
}
}
.falcon-live-search__all span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.falcon-live-search__all svg {
flex: none;
width: 18px;
height: 18px;
transition: transform 0.15s ease;
}
.falcon-live-search__all.is-active svg {
transform: translateX(3px);
}
@media (hover: hover) {
.falcon-live-search__all:hover svg {
transform: translateX(3px);
}
}
/* Nothing found, loading and the help line. */
.falcon-live-search__message:empty,
.falcon-live-search__help:empty {
display: none;
}
.falcon-live-search__message {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 12px 6px;
font-family: var(--falcon-font);
}
.falcon-live-search__message strong {
display: block;
color: var(--falcon-dark);
font-size: 15px;
font-weight: 600;
line-height: 1.35;
overflow-wrap: anywhere;
}
.falcon-live-search__message strong + span {
display: block;
margin-top: 3px;
color: var(--falcon-search-muted);
font-size: 13px;
line-height: 1.45;
}
.falcon-live-search__message-icon {
display: grid;
flex: none;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--falcon-search-tint);
color: var(--falcon-brand);
}
.falcon-live-search__message-icon svg {
width: 19px;
height: 19px;
}
.falcon-live-search__loading {
display: flex;
gap: 6px;
margin: 18px auto;
}
.falcon-live-search__loading span {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--falcon-brand);
opacity: 0.25;
animation: falcon-live-search-dot 0.9s infinite ease-in-out;
}
.falcon-live-search__loading span:nth-child(2) {
animation-delay: 0.15s;
}
.falcon-live-search__loading span:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes falcon-live-search-dot {
40% {
opacity: 1;
}
}
.falcon-live-search__help {
display: flex;
align-items: center;
gap: 10px;
margin: 8px 12px 4px;
padding-top: 12px;
border-top: 1px solid #eef1f5;
color: var(--falcon-search-muted);
font-family: var(--falcon-font);
font-size: 13px;
line-height: 1.4;
}
.falcon-live-search__help svg {
flex: none;
width: 18px;
height: 18px;
color: var(--falcon-brand);
}
.falcon .falcon-live-search__help a {
color: var(--falcon-brand);
font-weight: 600;
white-space: nowrap;
}
/* Full screen (tablet and mobile header; phones elsewhere). The box leaves its 74px row behind, so
the header keeps its height underneath. */
html.falcon-live-search-open,
html.falcon-live-search-open body {
overflow: hidden;
}
.falcon-live-search.is-overlay .falcon-live-search__box {
position: fixed;
inset: 0;
z-index: 2147483640;
display: flex;
flex-direction: column;
height: 100dvh;
background: var(--falcon-white);
opacity: 0;
transition: opacity 0.18s ease;
}
.falcon-live-search.is-overlay.is-visible .falcon-live-search__box {
opacity: 1;
}
.falcon-live-search.is-overlay .falcon-live-search__bar {
flex: none;
padding: 12px max(16px, calc((100% - 760px) / 2)) 12px max(8px, calc((100% - 760px) / 2 - 44px));
border-bottom: 1px solid #eef1f5;
}
.falcon .falcon-live-search.is-overlay .falcon-live-search__back {
display: grid;
}
.falcon-live-search.is-overlay .falcon-live-search__field {
--falcon-search-height: 50px;
box-shadow: none;
}
.falcon-live-search.is-overlay .falcon-live-search__panel {
position: static;
flex: 1;
width: auto;
max-width: none;
max-height: none;
border: 0;
border-radius: 0;
box-shadow: none;
opacity: 1;
transform: none;
}
.falcon-live-search.is-overlay .falcon-live-search__inner {
max-width: 760px;
margin-inline: auto;
padding: 8px 8px 32px;
}
.falcon-live-search.is-overlay .falcon-live-search__thumb {
width: 52px;
height: 52px;
}
.falcon-live-search.is-overlay .falcon-live-search__thumb--category {
width: 44px;
height: 44px;
}
/* Search results and other pages: a larger box. */
.falcon-live-search--page {
--falcon-search-height: 58px;
min-height: 0;
}
.falcon-live-search--page .falcon-live-search__field {
border-color: #dfe5ec;
background-color: var(--falcon-white);
box-shadow: 0 6px 18px -12px rgba(27, 29, 40, 0.35);
}
.falcon-live-search--page .falcon-live-search__panel {
width: 100%;
min-width: min(600px, calc(100vw - 40px));
}
@media (max-width: 767px) {
.falcon-live-search__price {
font-size: 13px;
}
.falcon .falcon-live-search__option {
gap: 12px;
padding: 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-live-search__panel,
.falcon-live-search.is-overlay .falcon-live-search__box,
.falcon-live-search__all svg,
.falcon-live-search__go {
transition: none;
}
.falcon-live-search__panel {
transform: none;
}
.falcon-live-search__loading span {
animation: none;
opacity: 0.6;
}
}
/* 36-search-results.css */
/* Search results page (search.php, template-parts/search/*). The product cards are the archive
variant (31-cards.css); the search box is 35-live-search.css. */
/* Header panel: text on the left, the search box on the right, matching categories underneath. */
.falcon-search-hero {
padding: 30px 30px 0;
}
.falcon-search-hero__panel {
position: relative;
padding: 0 30px;
border-radius: 20px;
background-color: var(--falcon-bg-light);
}
.falcon-search-hero__panel::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: url("../images/curve-line-1.svg") center center / cover;
opacity: 0.25;
pointer-events: none;
}
.falcon-search-hero__inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 28px 56px;
align-items: center;
width: 100%;
max-width: var(--falcon-width);
margin-inline: auto;
padding: 56px 0 48px;
}
.falcon-search-hero__eyebrow {
display: inline-flex;
margin: 0 0 16px;
padding: 7px 14px;
border-radius: 999px;
background-color: var(--falcon-bg-blue);
color: var(--falcon-brand);
font-family: var(--falcon-font);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
line-height: 1;
text-transform: uppercase;
}
.falcon .falcon-search-hero__title {
margin: 0;
color: var(--falcon-brand);
font-size: 40px;
font-weight: 400;
line-height: 1.15;
overflow-wrap: anywhere;
}
.falcon-search-hero__query {
font-weight: 600;
}
.falcon-search-hero__count {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 14px;
margin: 14px 0 0;
color: var(--falcon-lower-text);
font-family: var(--falcon-font);
font-size: 16px;
line-height: 1.5;
}
.falcon-search-hero__count strong {
color: var(--falcon-dark);
font-weight: 600;
}
.falcon-search-hero__range {
display: inline-flex;
align-items: center;
gap: 14px;
}
.falcon-search-hero__range::before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #b7bcc8;
}
.falcon-search-hero--empty .falcon-search-hero__inner {
grid-template-columns: minmax(0, 1fr) minmax(320px, 470px);
}
.falcon-search-hero--empty .falcon-search-hero__count {
max-width: 520px;
}
.falcon-search-hero__cats {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 16px;
padding-top: 24px;
border-top: 1px solid rgba(27, 29, 40, 0.08);
}
.falcon-search-hero__cats-label {
margin: 0;
color: var(--falcon-lower-text);
font-family: var(--falcon-font);
font-size: 13px;
font-weight: 600;
}
/* Category pills. */
.falcon-search-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.falcon .falcon-search-pill {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 42px;
padding: 5px 16px 5px 5px;
border: 1px solid #dfe5ec;
border-radius: 999px;
background-color: var(--falcon-white);
color: var(--falcon-dark);
font-family: var(--falcon-font);
font-size: 14px;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.falcon .falcon-search-pill:not(:has(img)) {
padding-left: 16px;
}
.falcon .falcon-search-pill:hover,
.falcon .falcon-search-pill:focus-visible {
border-color: var(--falcon-brand);
background-color: #eef2fb;
color: var(--falcon-brand);
}
.falcon .falcon-search-pill:focus-visible {
outline: 2px solid var(--falcon-brand);
outline-offset: 2px;
}
.falcon .falcon-search-pill__image {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--falcon-bg-light);
object-fit: contain;
}
.falcon-search-pill__count {
color: var(--falcon-lower-text);
font-size: 12px;
font-weight: 400;
white-space: nowrap;
}
.falcon-search-pills--large {
gap: 12px;
}
.falcon .falcon-search-pills--large .falcon-search-pill {
min-height: 56px;
padding: 6px 20px 6px 6px;
font-size: 15px;
}
.falcon .falcon-search-pills--large .falcon-search-pill__image {
width: 44px;
height: 44px;
}
/* Results grid and page numbers. */
.falcon .falcon-search-results.falcon-range {
width: calc(100% - 40px);
margin: 48px auto 80px;
}
.falcon-search-results .falcon-pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 48px;
}
.falcon .falcon-search-results .falcon-pagination .page-numbers {
display: grid;
place-items: center;
min-width: 44px;
height: 44px;
margin: 0;
padding: 0 14px;
border: 1px solid #dfe5ec;
border-radius: 999px;
color: var(--falcon-dark);
font-family: var(--falcon-font);
font-size: 15px;
font-weight: 500;
line-height: 1;
transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.falcon .falcon-search-results .falcon-pagination a.page-numbers:hover,
.falcon .falcon-search-results .falcon-pagination a.page-numbers:focus-visible {
border-color: var(--falcon-brand);
color: var(--falcon-brand);
}
.falcon .falcon-search-results .falcon-pagination .page-numbers.current {
border-color: var(--falcon-brand);
background-color: var(--falcon-brand);
color: var(--falcon-white);
}
.falcon .falcon-search-results .falcon-pagination .page-numbers.dots {
border-color: transparent;
}
/* Other content (pages, posts). */
.falcon-search-others {
margin-top: 56px;
}
.falcon .falcon-search-others__heading {
margin: 0 0 20px;
font-size: 28px;
font-weight: 400;
line-height: 1.25;
}
.falcon-search-others__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
.falcon .falcon-search-other {
display: flex;
flex-direction: column;
gap: 6px;
height: 100%;
padding: 22px 24px;
border: 1px solid #e3e8ee;
border-radius: 16px;
color: var(--falcon-dark);
transition: border-color 0.15s ease;
}
.falcon .falcon-search-other:hover {
border-color: var(--falcon-brand);
color: var(--falcon-dark);
}
.falcon-search-other__type {
color: var(--falcon-brand);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.falcon-search-other__title {
font-size: 17px;
font-weight: 600;
line-height: 1.35;
}
.falcon-search-other__excerpt {
color: var(--falcon-lower-text);
font-size: 14px;
line-height: 1.6;
}
/* Nothing found. */
.falcon-search-empty {
display: flex;
flex-direction: column;
gap: 64px;
width: calc(100% - 40px);
max-width: var(--falcon-width);
margin: 56px auto 80px;
}
.falcon-search-empty__head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 8px 24px;
margin-bottom: 24px;
}
.falcon .falcon-search-empty__heading {
margin: 0 0 24px;
color: var(--falcon-brand);
font-size: 28px;
font-weight: 400;
line-height: 1.25;
}
.falcon .falcon-search-empty__head .falcon-search-empty__heading {
margin: 0;
}
.falcon .falcon-search-empty__heading a {
color: var(--falcon-brand);
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.falcon .falcon-search-empty__more {
color: var(--falcon-brand);
font-size: 15px;
font-weight: 600;
}
.falcon-search-empty__help {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 24px 40px;
padding: 36px 40px;
border-radius: 20px;
background-color: var(--falcon-dark);
color: var(--falcon-white);
}
.falcon .falcon-search-empty__help-title {
margin: 0 0 6px;
color: var(--falcon-white);
font-size: 24px;
font-weight: 500;
line-height: 1.3;
}
.falcon-search-empty__help-text p {
margin: 0;
color: rgba(255, 255, 255, 0.75);
font-size: 15px;
line-height: 1.55;
}
.falcon-search-empty__help-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.falcon .falcon-search-empty__help .falcon-button {
padding: 15px 26px;
font-weight: 500;
}
.falcon .falcon-search-empty__help .falcon-button:not(.falcon-button--light):is(:hover, :focus) {
background-color: var(--falcon-white);
color: var(--falcon-brand);
}
@media (max-width: 1024px) {
.falcon-search-hero {
padding: 20px 20px 0;
}
.falcon-search-hero__inner,
.falcon-search-hero--empty .falcon-search-hero__inner {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
padding: 44px 0 36px;
}
/* The header's search box is right above on tablets and phones. */
.falcon-search-hero__search {
display: none;
}
.falcon-search-others__list {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 767px) {
.falcon-search-hero {
padding: 15px 15px 0;
}
.falcon-search-hero__panel {
padding: 0 20px;
border-radius: 16px;
}
.falcon-search-hero__inner {
gap: 20px;
padding: 32px 0 28px;
}
.falcon .falcon-search-hero__title {
font-size: 30px;
}
.falcon-search-hero__count {
font-size: 15px;
}
.falcon-search-hero__cats {
padding-top: 20px;
}
.falcon .falcon-search-results.falcon-range {
width: calc(100% - 30px);
margin: 32px auto 48px;
padding: 0;
}
.falcon-search-empty {
gap: 48px;
width: calc(100% - 30px);
margin: 40px auto 56px;
}
.falcon .falcon-search-empty__heading {
font-size: 22px;
}
.falcon .falcon-search-pills--large .falcon-search-pill {
min-height: 48px;
font-size: 14px;
}
.falcon .falcon-search-pills--large .falcon-search-pill__image {
width: 36px;
height: 36px;
}
.falcon-search-empty__help {
padding: 28px 24px;
}
.falcon .falcon-search-empty__help-title {
font-size: 20px;
}
}
/* 38-product-specs.css */
/* Product Specifications (template-parts/product/specifications.php, laid out by 30-product-single.js):
a card with the chosen option on top, groups of label and value rows, lists and tables, then SKU
and categories. Before an option is chosen, a prompt lists the options. */
.falcon-specs {
gap: 24px;
}
.falcon-specs__card {
overflow: hidden;
border: 1px solid #e6eaf0;
border-radius: 24px;
background: var(--falcon-white);
color: var(--falcon-dark);
font-family: var(--falcon-font);
}
.falcon-specs__svg {
flex-shrink: 0;
width: 22px;
height: 22px;
}
/* "Showing the specification for" the chosen option, with a way back to the options. */
.falcon-specs__showing {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 20px;
padding: 16px 32px;
border-bottom: 1px solid #e6eaf0;
background: var(--falcon-bg-light);
}
.falcon-specs__showing[hidden] {
display: none;
}
.falcon-specs__showing-text {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
margin: 0;
color: var(--falcon-lower-text);
font-size: 14px;
line-height: 1.4;
}
.falcon-specs__showing-chosen {
display: contents;
}
.falcon-specs__showing-value {
padding: 4px 11px;
border-radius: 999px;
background: #e8ecfa;
color: var(--falcon-brand);
font-size: 13px;
font-weight: 600;
}
.falcon-specs .falcon-specs__change {
flex-shrink: 0;
padding: 8px 16px;
border: 1px solid #cfd6e4;
border-radius: 999px;
background: var(--falcon-white);
color: var(--falcon-brand);
font-family: var(--falcon-font);
font-size: 14px;
font-weight: 600;
line-height: 1.2;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.falcon-specs .falcon-specs__change:hover,
.falcon-specs .falcon-specs__change:focus-visible {
border-color: var(--falcon-brand);
background: var(--falcon-white);
color: var(--falcon-brand);
}
/* The swapping area and its views. */
.falcon-specs__stage {
position: relative;
}
.falcon-specs__view {
padding: 8px 32px 12px;
}
.falcon-specs__card > .falcon-specs__meta:first-child {
border-top: 0;
}
/* Groups: the title on the left, its content on the right, a rule between groups. */
.falcon-specs__group {
display: grid;
grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
gap: 12px 48px;
padding: 26px 0;
border-top: 1px solid #e6eaf0;
}
.falcon-specs__content > .falcon-specs__group:first-child,
.falcon-specs__notice + .falcon-specs__content > .falcon-specs__group:first-child {
border-top: 0;
}
.falcon-specs__group--untitled > .falcon-specs__body,
.falcon-specs__group--lead > .falcon-specs__group-title {
grid-column: 1 / -1;
}
.falcon-specs__group--lead {
padding-bottom: 0;
}
.falcon-specs__group--lead + .falcon-specs__group {
border-top: 0;
}
.falcon-specs .falcon-specs__group-title {
margin: 0;
color: var(--falcon-brand);
font-family: var(--falcon-font);
font-size: 16px;
font-weight: 600;
line-height: 1.45;
}
.falcon-specs__group--lead > .falcon-specs__group-title {
font-size: 18px;
}
.falcon-specs__body {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
color: #33373d;
font-size: 15px;
line-height: 1.6;
}
.falcon-specs__body > * {
margin: 0;
}
.falcon-specs__body p {
max-width: 75ch;
}
/* Label and value rows, in two columns where there is room. */
.falcon-specs__rows {
margin: 0;
columns: 2 340px;
column-gap: 48px;
}
.falcon-specs__row {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
gap: 4px 16px;
padding: 11px 0;
border-bottom: 1px solid #edf0f4;
break-inside: avoid;
font-size: 15px;
line-height: 1.5;
}
.falcon-specs__row dt {
color: var(--falcon-lower-text);
font-weight: 400;
}
.falcon-specs__row dd {
margin: 0;
color: var(--falcon-dark);
font-weight: 500;
overflow-wrap: anywhere;
}
.falcon-specs__row--note dd {
grid-column: 1 / -1;
font-weight: 400;
}
/* Lists: a small dot, ticks for what's in the box, short items in columns. */
.falcon-specs__list {
display: flex;
flex-direction: column;
gap: 10px;
padding: 0;
list-style: none;
}
.falcon-specs__list--columns {
display: block;
columns: 3 220px;
column-gap: 40px;
}
.falcon-specs__list--columns > li {
margin-bottom: 10px;
break-inside: avoid;
}
.falcon-specs__list > li {
position: relative;
padding-left: 20px;
}
.falcon-specs__list > li::before {
content: "";
position: absolute;
top: 0.62em;
left: 3px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--falcon-brand);
}
.falcon-specs__list--ticks > li {
padding-left: 32px;
}
.falcon-specs__list--ticks > li::before {
top: 0.1em;
left: 0;
width: 20px;
height: 20px;
background: #e8ecfa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C3390' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.falcon-specs__list--numbered {
padding-left: 22px;
list-style: decimal;
}
.falcon-specs__list--numbered > li {
padding-left: 4px;
}
.falcon-specs__list--numbered > li::before {
content: none;
}
.falcon-specs__list ul,
.falcon-specs__list ol {
margin: 8px 0 0;
padding-left: 18px;
}
/* Tables. */
.falcon-specs .falcon-specs__table {
overflow-x: auto;
border: 1px solid #e6eaf0;
border-radius: 14px;
}
.falcon-specs .falcon-specs__table table {
width: 100%;
margin: 0;
border-collapse: collapse;
font-size: 14px;
}
.falcon-specs .falcon-specs__table :is(td, th) {
padding: 11px 16px;
border: 0;
border-bottom: 1px solid #edf0f4;
background: none;
line-height: 1.5;
text-align: left;
vertical-align: top;
}
.falcon-specs .falcon-specs__table tr:last-child > :is(td, th) {
border-bottom: 0;
}
.falcon-specs .falcon-specs__table tbody tr:hover > :is(td, th) {
background: none;
}
.falcon-specs .falcon-specs__table :is(thead th, thead td, tr:first-child > th) {
background: var(--falcon-bg-light);
color: var(--falcon-brand);
font-weight: 600;
}
.falcon-specs .falcon-specs__table--pairs td:first-child {
width: 40%;
color: var(--falcon-lower-text);
}
/* Pictures and links in the specification. Pictures that fail to load are hidden by the script. */
.falcon-specs__group[hidden],
.falcon-specs__media[hidden] {
display: none;
}
.falcon-specs__media {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.falcon-specs .falcon-specs__body img {
max-width: 100%;
height: auto;
border-radius: 12px;
}
.falcon-specs :is(.falcon-specs__body, .falcon-specs__empty) a:not(:has(img)) {
--falcon-line: 1.5px;
color: var(--falcon-accent);
background-image: linear-gradient(currentColor, currentColor), linear-gradient(color-mix(in srgb, currentColor 30%, transparent), color-mix(in srgb, currentColor 30%, transparent));
background-repeat: no-repeat;
background-position: 0 100%, 0 100%;
background-size: 0 var(--falcon-line), 100% 1px;
text-decoration: none;
transition: background-size 0.35s cubic-bezier(0.65, 0, 0.35, 1), color 0.2s ease;
}
.falcon-specs :is(.falcon-specs__body, .falcon-specs__empty) a:not(:has(img)):is(:hover, :focus-visible) {
background-size: 100% var(--falcon-line), 100% 1px;
}
/* Manuals and data sheets get a document mark. */
.falcon-specs .falcon-specs__body a[href$=".pdf" i]::before {
content: "";
display: inline-block;
width: 0.85em;
height: 1em;
margin-right: 6px;
vertical-align: -0.12em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M3 0h9l8 8v13a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3Zm8 1.5V7a2 2 0 0 0 2 2h5.5L11 1.5ZM5 13v1.6h10V13H5Zm0 4v1.6h7V17H5Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M3 0h9l8 8v13a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3Zm8 1.5V7a2 2 0 0 0 2 2h5.5L11 1.5ZM5 13v1.6h10V13H5Zm0 4v1.6h7V17H5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Before an option is chosen: the prompt and the options it lists. */
.falcon-specs__prompt {
display: flex;
flex-direction: column;
gap: 22px;
padding: 24px 0 26px;
}
.falcon-specs__prompt-head,
.falcon-specs__notice {
display: flex;
align-items: flex-start;
gap: 16px;
}
.falcon-specs__prompt-icon,
.falcon-specs__notice-icon {
display: grid;
flex-shrink: 0;
place-items: center;
width: 46px;
height: 46px;
border-radius: 14px;
background: #e8ecfa;
color: var(--falcon-brand);
}
.falcon-specs__prompt-title {
margin: 0 0 4px;
color: var(--falcon-dark);
font-size: 18px;
font-weight: 600;
line-height: 1.4;
}
.falcon-specs__prompt-text {
margin: 0;
color: var(--falcon-lower-text);
font-size: 15px;
line-height: 1.5;
}
.falcon-specs__options {
columns: 1;
border-top: 1px solid #edf0f4;
}
.falcon-specs__options .falcon-specs__row {
grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
gap: 8px 48px;
align-items: center;
padding: 14px 0;
}
.falcon-specs__options dt {
color: var(--falcon-dark);
font-weight: 600;
}
.falcon-specs__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.falcon-specs__chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border: 1px solid #dfe4ec;
border-radius: 999px;
background: var(--falcon-white);
color: var(--falcon-dark);
font-size: 13px;
font-weight: 500;
line-height: 1.4;
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.falcon-specs__chip.is-chosen {
border-color: var(--falcon-brand);
background: var(--falcon-brand);
color: var(--falcon-white);
}
.falcon-specs__chip.is-chosen::before {
content: "";
width: 10px;
height: 10px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.falcon-specs__prompt-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 18px;
}
.falcon-specs .falcon-specs__cta {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 46px;
padding: 0 22px;
border: 0;
border-radius: 999px;
background: var(--falcon-brand);
color: var(--falcon-white);
font-family: var(--falcon-font);
font-size: 15px;
font-weight: 600;
line-height: 1;
transition: background-color 0.2s ease, color 0.2s ease;
}
.falcon-specs .falcon-specs__cta:hover,
.falcon-specs .falcon-specs__cta:focus-visible {
background: var(--falcon-bg-blue);
color: var(--falcon-brand);
}
.falcon-specs .falcon-specs__cta:focus-visible,
.falcon-specs .falcon-specs__change:focus-visible {
outline: 2px solid var(--falcon-brand);
outline-offset: 3px;
}
.falcon-specs__cta .falcon-specs__svg {
width: 16px;
height: 16px;
}
.falcon-specs .falcon-specs__cta--small {
flex-shrink: 0;
min-height: 40px;
padding: 0 18px;
font-size: 14px;
}
.falcon-specs__progress {
color: var(--falcon-lower-text);
font-size: 14px;
}
/* A general specification shown before an option is chosen, with a note above it. */
.falcon-specs__notice {
align-items: center;
margin: 18px 0 6px;
padding: 16px 18px;
border-radius: 16px;
background: var(--falcon-bg-light);
}
.falcon-specs__notice-icon {
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--falcon-white);
}
.falcon-specs__notice-text {
flex: 1;
margin: 0;
color: var(--falcon-dark);
font-size: 15px;
line-height: 1.5;
}
.falcon-specs__empty {
padding: 26px 0;
color: var(--falcon-lower-text);
font-size: 15px;
}
.falcon-specs__empty p {
margin: 0;
}
/* SKU and categories. */
.falcon-specs__meta {
padding: 18px 32px;
border-top: 1px solid #e6eaf0;
background: var(--falcon-bg-light);
}
@media (max-width: 1024px) {
.falcon-specs__group {
grid-template-columns: minmax(0, 1fr);
gap: 14px;
padding: 24px 0;
}
.falcon-specs__options .falcon-specs__row {
grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
gap: 8px 24px;
}
}
@media (max-width: 767px) {
.falcon-specs {
gap: 18px;
}
.falcon-specs__card {
border-radius: 20px;
}
.falcon-specs__showing,
.falcon-specs__view,
.falcon-specs__meta {
padding-inline: 20px;
}
.falcon-specs__showing {
padding-block: 14px;
}
.falcon-specs__row {
font-size: 14px;
}
.falcon-specs__body {
font-size: 14px;
}
.falcon-specs__prompt-head {
gap: 14px;
}
.falcon-specs__prompt-icon {
width: 40px;
height: 40px;
border-radius: 12px;
}
.falcon-specs__prompt-title {
font-size: 16px;
}
.falcon-specs__prompt-text {
font-size: 14px;
}
.falcon-specs__options .falcon-specs__row {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.falcon-specs__notice {
flex-wrap: wrap;
}
.falcon-specs__notice-text {
flex-basis: calc(100% - 56px);
font-size: 14px;
}
.falcon-specs .falcon-specs__cta--small {
margin-left: 56px;
}
.falcon-specs .falcon-specs__table :is(td, th) {
padding: 10px 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-specs__chip,
.falcon-specs .falcon-specs__cta,
.falcon-specs .falcon-specs__change,
.falcon-specs a {
transition: none;
}
}
/* 39-sticky-cart.css */
/* Sticky add to cart bar on phones and tablets (template-parts/product/sticky-cart.php,
39-sticky-cart.js). It stacks under the side cart (9998), the gallery lightbox (9999) and the
menus; the cookie banner and Zendesk sit above it, and the Zendesk launcher moves up while it shows. */
.falcon-sticky-cart {
display: none;
}
@media (max-width: 1024px) {
.falcon-sticky-cart:not([hidden]) {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 9000;
display: block;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid #e6eaf0;
border-radius: 18px 18px 0 0;
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 -8px 28px rgba(27, 29, 40, 0.08);
font-family: var(--falcon-font);
transform: translateY(calc(100% + 30px));
visibility: hidden;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.4s;
}
.falcon-sticky-cart.is-visible:not([hidden]) {
transform: none;
visibility: visible;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}
@supports (backdrop-filter: blur(10px)) {
.falcon-sticky-cart:not([hidden]) {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: saturate(1.5) blur(14px);
}
}
/* Zendesk's launcher (bottom left), or the site's own chat button before chat is allowed,
moves up above the bar. */
html.falcon-has-sticky-cart iframe#launcher,
html.falcon-has-sticky-cart .falcon-chat-launcher {
transition: translate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.falcon-sticky-cart-on iframe#launcher,
html.falcon-sticky-cart-on .falcon-chat-launcher {
translate: 0 calc(-1 * var(--falcon-sticky-cart-h, 68px));
}
}
.falcon-sticky-cart__inner {
display: flex;
align-items: center;
gap: 12px;
max-width: 720px;
margin: 0 auto;
}
.falcon-sticky-cart__thumb {
flex-shrink: 0;
width: 48px;
height: 48px;
padding: 3px;
border: 1px solid #e6eaf0;
border-radius: 12px;
background: var(--falcon-white);
object-fit: contain;
}
.falcon-sticky-cart__info {
flex: 1 1 auto;
min-width: 0;
}
.falcon-sticky-cart__name {
overflow: hidden;
margin: 0;
color: var(--falcon-dark);
font-size: 13px;
font-weight: 500;
line-height: 1.35;
white-space: nowrap;
text-overflow: ellipsis;
}
.falcon-sticky-cart__price {
overflow: hidden;
margin-top: 2px;
color: var(--falcon-brand);
font-size: 16px;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
text-overflow: ellipsis;
}
.falcon-sticky-cart__price :is(p, span, .price) {
margin: 0;
color: inherit;
font-size: inherit;
font-weight: inherit;
}
.falcon-sticky-cart__price del {
margin-right: 4px;
color: #757575;
font-size: 13px;
font-weight: 400;
}
.falcon-sticky-cart__price ins {
text-decoration: none;
}
.falcon-sticky-cart__price small,
.falcon-sticky-cart__price .woocommerce-price-suffix {
color: var(--falcon-lower-text);
font-size: 12px;
font-weight: 400;
}
.falcon-sticky-cart .falcon-sticky-cart__button {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 132px;
min-height: 46px;
padding: 0 20px;
border: 0;
border-radius: 999px;
background: var(--falcon-brand);
color: var(--falcon-white);
font-family: var(--falcon-font);
font-size: 15px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
transition: background-color 0.2s ease, color 0.2s ease;
}
.falcon-sticky-cart .falcon-sticky-cart__button:hover,
.falcon-sticky-cart .falcon-sticky-cart__button:focus {
background: var(--falcon-brand);
color: var(--falcon-white);
}
.falcon-sticky-cart .falcon-sticky-cart__button:focus-visible {
outline: 2px solid var(--falcon-brand);
outline-offset: 3px;
}
.falcon-sticky-cart[data-mode="soldout"] .falcon-sticky-cart__button,
.falcon-sticky-cart[data-mode="unavailable"] .falcon-sticky-cart__button {
background: #e9edf2;
color: var(--falcon-lower-text);
}
.falcon-sticky-cart__icon {
display: none;
width: 16px;
height: 16px;
}
.falcon-sticky-cart[data-mode="choose"] .falcon-sticky-cart__icon--up,
.falcon-sticky-cart.is-busy .falcon-sticky-cart__icon--busy {
display: block;
}
.falcon-sticky-cart.is-busy .falcon-sticky-cart__icon--up {
display: none;
}
.falcon-sticky-cart.is-busy .falcon-sticky-cart__button {
cursor: progress;
opacity: 0.85;
}
.falcon-sticky-cart__icon--busy {
animation: falcon-sticky-cart-spin 0.8s linear infinite;
}
@keyframes falcon-sticky-cart-spin {
to {
transform: rotate(360deg);
}
}
/* Phones: a tighter button so the price keeps its room. */
@media (max-width: 480px) {
.falcon-sticky-cart .falcon-sticky-cart__button {
min-width: 0;
padding: 0 18px;
font-size: 14px;
}
.falcon-sticky-cart[data-mode="choose"] .falcon-sticky-cart__icon--up {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-sticky-cart:not([hidden]),
.falcon-sticky-cart.is-visible:not([hidden]) {
transition: opacity 0.15s linear, visibility 0s linear 0.15s;
transform: none;
opacity: 0;
}
.falcon-sticky-cart.is-visible:not([hidden]) {
opacity: 1;
transition: opacity 0.15s linear, visibility 0s;
}
html.falcon-has-sticky-cart iframe#launcher,
html.falcon-has-sticky-cart .falcon-chat-launcher {
transition: none;
}
.falcon-sticky-cart__icon--busy {
animation: none;
}
}
/* 40-blog-single.css */
/* Single blog post (single.php): header band, featured image, reading column with the contents
list beside it (desktop) or above it (tablet and phone), related posts. Every width is fluid,
so the text never runs off the screen (the old 833px column did between 768 and 832px). */
.falcon-single,
.falcon-related {
--falcon-blog-line: #e6eaf0;
--falcon-blog-measure: 720px;
--falcon-blog-gutter: 24px;
--falcon-blog-sticky-top: 32px;
}
.admin-bar .falcon-single {
--falcon-blog-sticky-top: 64px;
}
/* Header: a light band behind the title that runs into the top of the featured image. */
.falcon-single__hero {
padding: 64px 0 56px;
background: linear-gradient(var(--falcon-bg-light), var(--falcon-bg-light)) top / 100% 100% no-repeat;
}
.falcon-single__hero--image {
padding-bottom: 0;
background-size: 100% calc(100% - clamp(80px, 16vw, 220px));
}
.falcon-single__header {
display: flex;
flex-direction: column;
align-items: center;
max-width: calc(880px + 2 * var(--falcon-blog-gutter));
padding-inline: var(--falcon-blog-gutter);
text-align: center;
}
.falcon-single__terms {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 0 0 20px;
}
.falcon .falcon-single__term {
display: inline-flex;
padding: 7px 14px;
border-radius: 999px;
background-color: var(--falcon-bg-blue);
color: var(--falcon-brand);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.01em;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
.falcon .falcon-single__term:is(:hover, :focus-visible) {
background-color: var(--falcon-brand);
color: var(--falcon-white);
}
.falcon .falcon-single__title {
margin: 0;
color: var(--falcon-brand);
font-size: clamp(30px, 1.9vw + 16px, 46px);
font-weight: 650;
line-height: 1.15;
letter-spacing: -0.02em;
text-wrap: balance;
}
.falcon-single__intro {
max-width: 680px;
margin: 18px 0 0;
color: var(--falcon-lower-text);
font-size: clamp(17px, 0.3vw + 15.5px, 20px);
line-height: 1.55;
text-wrap: pretty;
}
.falcon-single__byline {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 12px;
margin-top: 28px;
color: var(--falcon-lower-text);
font-size: 14px;
line-height: 1.4;
}
.falcon-single__avatar {
display: grid;
flex-shrink: 0;
place-items: center;
width: 36px;
height: 36px;
border: 1px solid var(--falcon-blog-line);
border-radius: 50%;
background: var(--falcon-white);
}
.falcon-single__avatar svg {
width: 20px;
height: 20px;
}
.falcon-single__byline-text {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 12px;
}
.falcon-single__author {
color: var(--falcon-dark);
font-weight: 600;
}
.falcon-single__facts {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
}
.falcon-single__facts::before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: currentColor;
opacity: 0.5;
}
.falcon-single__read {
display: inline-flex;
align-items: center;
gap: 6px;
}
.falcon-single__read svg {
width: 15px;
height: 15px;
}
.falcon-single__image {
max-width: calc(1120px + 2 * var(--falcon-blog-gutter));
margin: 40px auto 0;
padding-inline: var(--falcon-blog-gutter);
}
.falcon .falcon-single__image-img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 2 / 1;
border-radius: 20px;
background: #e9edf2;
object-fit: cover;
}
/* Reading column, centred; with a contents list, the list takes the left gutter on desktop. */
/* The gutter sits outside the site's content width, so the columns line up with the header. */
.falcon-single__layout {
max-width: calc(var(--falcon-width) + 2 * var(--falcon-blog-gutter));
margin-block: 56px 72px;
padding-inline: var(--falcon-blog-gutter);
}
.falcon-single__main {
min-width: 0;
max-width: var(--falcon-blog-measure);
margin-inline: auto;
}
.falcon-single__aside {
display: none;
}
@media (min-width: 1025px) {
.falcon-single__layout--toc {
display: grid;
grid-template-columns: minmax(200px, 1fr) minmax(0, var(--falcon-blog-measure)) minmax(0, 1fr);
align-items: start;
column-gap: 48px;
}
.falcon-single__layout--toc .falcon-single__main {
grid-column: 2;
max-width: none;
margin: 0;
}
.falcon-single__aside {
position: sticky;
top: calc(var(--falcon-blog-sticky-top) + var(--falcon-pinned-h, 0px));
transition: top 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
display: block;
grid-row: 1;
grid-column: 1;
justify-self: end;
width: 100%;
max-width: 260px;
max-height: calc(100vh - 2 * var(--falcon-blog-sticky-top));
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
.falcon-toc--inline {
display: none;
}
}
/* Contents list. */
.falcon-toc__list {
margin: 0;
padding: 0;
border-left: 2px solid var(--falcon-blog-line);
list-style: none;
}
.falcon-toc__item {
margin: 0;
}
.falcon .falcon-toc__link {
display: block;
margin-left: -2px;
padding: 7px 0 7px 14px;
border-left: 2px solid transparent;
color: var(--falcon-lower-text);
font-size: 14px;
line-height: 1.45;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease;
}
.falcon .falcon-toc__link:is(:hover, :focus-visible) {
border-left-color: var(--falcon-brand);
color: var(--falcon-brand);
}
.falcon-toc--side .falcon-toc__title {
margin: 4px 0 12px;
color: var(--falcon-dark);
font-size: 12px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.falcon-toc--inline {
margin: 0 0 40px;
border: 1px solid var(--falcon-blog-line);
border-radius: 14px;
background: var(--falcon-bg-light);
}
.falcon-toc__summary {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 18px;
color: var(--falcon-dark);
font-size: 16px;
font-weight: 600;
line-height: 1.3;
list-style: none;
cursor: pointer;
}
.falcon-toc__summary::-webkit-details-marker {
display: none;
}
.falcon-toc__summary:focus-visible {
border-radius: 14px;
outline: 2px solid var(--falcon-brand);
outline-offset: 2px;
}
.falcon-toc__icon,
.falcon-toc__chevron {
flex-shrink: 0;
width: 18px;
height: 18px;
color: var(--falcon-brand);
}
.falcon-toc__count {
margin-left: auto;
color: var(--falcon-lower-text);
font-size: 14px;
font-weight: 400;
}
.falcon-toc__chevron {
transition: transform 0.2s ease;
}
.falcon-toc--inline[open] .falcon-toc__chevron {
transform: rotate(180deg);
}
.falcon-toc--inline .falcon-toc__nav {
padding: 0 18px 14px;
}
.falcon-toc--inline .falcon-toc__list {
border-left-color: #dfe4ec;
}
/* Contact box under the contents list. */
.falcon-blog-help {
margin-top: 28px;
padding: 18px;
border: 1px solid var(--falcon-blog-line);
border-radius: 14px;
background: var(--falcon-bg-light);
}
.falcon-blog-help__title {
margin: 0 0 8px;
color: var(--falcon-dark);
font-size: 15px;
font-weight: 600;
line-height: 1.4;
}
.falcon .falcon-blog-help__link {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
color: var(--falcon-brand);
font-size: 14px;
font-weight: 500;
line-height: 1.4;
text-decoration: none;
overflow-wrap: anywhere;
}
.falcon .falcon-blog-help__link:is(:hover, :focus-visible) {
color: var(--falcon-accent);
text-decoration: underline;
}
.falcon-blog-help__link svg {
flex-shrink: 0;
width: 16px;
height: 16px;
}
@media (prefers-reduced-motion: no-preference) {
html:has(.falcon-toc) {
scroll-behavior: smooth;
}
}
/* Post text. Element rules sit at :where() specificity so the product cards embedded in a post
(42-blog-products.css) style their own text with plain class selectors. */
.falcon-single__entry {
color: var(--falcon-text);
font-size: 18px;
line-height: 1.75;
overflow-wrap: break-word;
}
.falcon-single__entry > :first-child {
margin-top: 0;
}
.falcon-single__entry > :last-child {
margin-bottom: 0;
}
:where(.falcon-single__entry) :is(p, ul, ol, dl, pre) {
margin: 0 0 1.4em;
}
.falcon-single__entry h2 {
margin: 2.1em 0 0.6em;
color: var(--falcon-brand);
font-size: 30px;
font-weight: 650;
line-height: 1.25;
letter-spacing: -0.015em;
text-wrap: balance;
scroll-margin-top: var(--falcon-blog-sticky-top);
}
.falcon-single__entry h3 {
margin: 1.8em 0 0.5em;
color: var(--falcon-brand);
font-size: 22px;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.01em;
}
.falcon-single__entry h4 {
margin: 1.6em 0 0.4em;
color: var(--falcon-dark);
font-size: 19px;
font-weight: 600;
line-height: 1.4;
}
.falcon-single__entry :is(h5, h6) {
margin: 1.5em 0 0.4em;
color: var(--falcon-dark);
font-size: 17px;
font-weight: 600;
line-height: 1.45;
}
.falcon-single__entry :is(h2, h3, h4, h5, h6) + :is(h3, h4, h5, h6) {
margin-top: 0.6em;
}
:where(.falcon-single__entry) :is(strong, b) {
color: var(--falcon-dark);
font-weight: 650;
}
:where(.falcon-single__entry) :is(ul, ol) {
padding-left: 1.3em;
}
:where(.falcon-single__entry) li {
margin: 0 0 0.5em;
padding-left: 0.25em;
}
:where(.falcon-single__entry) li::marker {
color: var(--falcon-brand);
}
:where(.falcon-single__entry) ol > li::marker {
font-weight: 650;
}
:where(.falcon-single__entry) li > :is(ul, ol) {
margin: 0.5em 0 0;
}
:where(.falcon-single__entry) img {
display: block;
border-radius: 14px;
}
:where(.falcon-single__entry) p:has(> img:only-child) {
margin-block: 2em;
}
:where(.falcon-single__entry) figure {
margin: 2em 0;
}
:where(.falcon-single__entry) :is(figcaption, .wp-caption-text) {
margin-top: 10px;
color: var(--falcon-lower-text);
font-size: 14px;
font-style: normal;
line-height: 1.5;
text-align: center;
}
:where(.falcon-single__entry) blockquote {
margin: 2em 0;
padding: 20px 24px;
border-left: 4px solid var(--falcon-brand);
border-radius: 0 14px 14px 0;
background: var(--falcon-bg-light);
color: var(--falcon-dark);
font-size: 19px;
line-height: 1.6;
}
:where(.falcon-single__entry) blockquote > :last-child {
margin-bottom: 0;
}
:where(.falcon-single__entry) blockquote cite {
display: block;
margin-top: 10px;
color: var(--falcon-lower-text);
font-size: 14px;
font-style: normal;
}
:where(.falcon-single__entry) hr {
margin: 2.5em 0;
border: 0;
border-top: 1px solid var(--falcon-blog-line);
}
/* Embeds fill the column; YouTube and Vimeo keep 16:9 (WP Rocket lazy loads them from data-lazy-src). */
:where(.falcon-single__entry) :is(iframe, embed, object, video) {
display: block;
width: 100%;
max-width: 100%;
margin: 0;
border: none;
border-radius: 14px;
line-height: 1;
}
:where(.falcon-single__entry) iframe:is([src*="youtube"], [src*="youtu.be"], [src*="vimeo"], [data-lazy-src*="youtube"], [data-lazy-src*="vimeo"]) {
height: auto;
aspect-ratio: 16 / 9;
}
/* Tables scroll sideways inside a rounded frame when they are wider than the column. The posts'
tables carry inline margins, which only !important can clear inside the frame. */
.falcon-single__table {
margin: 2em 0;
overflow-x: auto;
border: 1px solid var(--falcon-blog-line);
border-radius: 14px;
}
.falcon-single__table > table {
width: 100%;
margin: 0 !important;
border-style: hidden;
border-collapse: collapse;
font-size: 16px;
line-height: 1.55;
}
.falcon-single__table :is(th, td) {
padding: 12px 16px;
border: 1px solid var(--falcon-blog-line);
text-align: left;
vertical-align: top;
}
.falcon-single__table th {
background: var(--falcon-bg-light);
color: var(--falcon-dark);
font-weight: 600;
}
.falcon-single__table tbody > tr:nth-child(odd) > td {
background: #fafbfc;
}
.falcon-single__table tbody tr:hover > :is(td, th) {
background: inherit;
}
.falcon-single__table th :is(h2, h3, h4) {
margin: 0;
color: var(--falcon-dark);
font-size: 17px;
line-height: 1.4;
}
.falcon-single__table :is(ul, ol, p) {
margin-bottom: 0;
}
.falcon-single__table li {
margin-bottom: 4px;
}
/* Legacy markup: one post (ID 1281) holds HTML pasted from an old Elementor page, which
Elementor's own CSS laid out. These rules give it the same layout; delete them once that
post's content is cleaned up. */
.falcon-single__entry .elementor-widget-wrap {
display: flex;
flex-wrap: wrap;
padding: 10px;
}
.falcon-single__entry .elementor-widget-wrap > * {
width: 100%;
}
.falcon-single__entry .elementor-heading-title {
font-weight: 650;
}
/* Related posts and the support boxes under the post. */
.falcon-related {
padding-block: 64px;
border-top: 1px solid var(--falcon-blog-line);
background: var(--falcon-bg-light);
}
.falcon-related__inner {
max-width: calc(var(--falcon-width) + 2 * var(--falcon-blog-gutter));
padding-inline: var(--falcon-blog-gutter);
}
.falcon-related__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 8px 16px;
margin-bottom: 28px;
}
.falcon-related__title {
margin: 0;
color: var(--falcon-brand);
font-size: 28px;
font-weight: 650;
line-height: 1.2;
letter-spacing: -0.015em;
}
.falcon .falcon-related__all {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--falcon-brand);
font-size: 15px;
font-weight: 600;
text-decoration: none;
}
.falcon-related__all svg {
width: 16px;
height: 16px;
transition: transform 0.25s ease;
}
.falcon-related__all:is(:hover, :focus-visible) svg {
transform: translateX(3px);
}
.falcon-related__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.falcon-single__support {
margin-block: 80px;
}
/* Tablet: contents list above the text; related posts scroll sideways. */
@media (max-width: 1024px) {
.falcon-single__layout {
margin-block: 48px 64px;
}
.falcon-related__grid {
grid-auto-columns: minmax(280px, 44%);
grid-auto-flow: column;
grid-template-columns: none;
overflow-x: auto;
padding-bottom: 8px;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
}
.falcon-related__grid > * {
scroll-snap-align: start;
}
}
@media (max-width: 767px) {
.falcon-single,
.falcon-related {
--falcon-blog-gutter: 16px;
}
.falcon-single__hero {
padding-top: 36px;
}
.falcon-single__header {
align-items: flex-start;
text-align: left;
}
.falcon-single__terms {
justify-content: flex-start;
margin-bottom: 16px;
}
.falcon-single__intro {
margin-top: 14px;
}
.falcon-single__byline {
flex-wrap: nowrap;
justify-content: flex-start;
margin-top: 20px;
text-align: left;
}
.falcon-single__byline-text {
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.falcon-single__facts::before {
display: none;
}
.falcon-single__image {
margin-top: 28px;
}
.falcon .falcon-single__image-img {
aspect-ratio: 3 / 2;
border-radius: 14px;
}
.falcon-single__layout {
margin-block: 32px 48px;
}
.falcon-toc--inline {
margin-bottom: 32px;
}
.falcon-single__entry {
font-size: 17px;
line-height: 1.7;
}
.falcon-single__entry h2 {
font-size: 24px;
}
.falcon-single__entry h3 {
font-size: 20px;
}
.falcon-single__entry h4 {
font-size: 18px;
}
:where(.falcon-single__entry) :is(.alignleft, .alignright) {
float: none;
margin: 0 0 1.4em;
}
.falcon-single__table > table {
font-size: 15px;
}
.falcon-related {
padding-block: 48px;
}
.falcon-related__title {
font-size: 24px;
}
.falcon-related__grid {
grid-auto-columns: 84%;
gap: 16px;
}
.falcon-single__support {
margin-block: 40px;
padding-inline: 15px;
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-toc__chevron,
.falcon-related__all svg {
transition: none;
}
.falcon-related__all:is(:hover, :focus-visible) svg {
transform: none;
}
}
/* 41-blog-listing.css */
/* Blog listing: posts grid with sidebar (category archives and the Posts page), and the post card
(template-parts/blog/post-card.php, also used for the related posts under a post). The archive
hero uses the Page Hero styles. The card follows the product card: white, a fine border that
tints on hover, the image easing in, the whole card one link. */
/* Grid and sidebar. */
.falcon-blog-listing {
--falcon-blog-line: #e6eaf0;
margin-block: 40px 80px;
}
.falcon-blog-listing__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
align-items: start;
gap: 40px;
max-width: calc(var(--falcon-width) + 48px);
padding-inline: 24px;
}
/* min-height: an empty category keeps a 60px gap where the grid would be. */
.falcon-blog-listing__main {
min-width: 0;
min-height: 60px;
}
/* Rows stretch to the tallest card, so the Posts page's masonry script (40-blog.js) finds nothing
to close up. */
.falcon-post-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 28px;
}
.falcon-post-grid__more {
display: flex;
justify-content: center;
margin-top: 15px;
}
.falcon-post-grid__spinner {
display: none;
width: 35px;
height: 35px;
fill: var(--falcon-brand);
animation: falcon-spin 2s linear infinite;
}
.falcon-post-grid__more.is-loading .falcon-post-grid__spinner {
display: block;
}
@keyframes falcon-spin {
to {
transform: rotate(360deg);
}
}
.falcon-blog-sidebar {
display: flex;
flex-direction: column;
gap: 20px;
min-width: 0;
}
.falcon-blog-box {
display: flex;
flex-direction: column;
min-width: 0;
padding: 26px;
border: 1px solid var(--falcon-blog-line);
border-radius: 20px;
background-color: var(--falcon-white);
}
.falcon-blog-box--categories {
background-color: var(--falcon-bg-light);
}
.falcon-blog-box__icon {
margin-bottom: 12px;
}
.falcon-blog-box__icon span,
.falcon-not-found__icon span {
display: inline-block;
font-size: 41px;
line-height: 1;
}
.falcon-blog-box__icon span {
font-size: 32px;
}
.falcon-blog-box__icon svg,
.falcon-not-found__icon svg {
display: block;
width: 1em;
height: 1em;
}
.falcon .falcon-blog-box__heading {
margin: 0 0 12px;
color: var(--falcon-brand);
font-size: 18px;
font-weight: 650;
line-height: 1.3;
}
.falcon-blog-box__text {
margin: 0;
color: var(--falcon-lower-text);
font-size: 15px;
line-height: 1.6;
}
.falcon .falcon-blog-box__link {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 8px;
margin-top: 18px;
padding: 11px 18px;
border-radius: 999px;
background-color: var(--falcon-brand);
color: var(--falcon-white);
font-size: 15px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
transition: background-color 0.2s ease;
}
.falcon .falcon-blog-box__link:is(:hover, :focus-visible) {
background-color: #14286f;
color: var(--falcon-white);
}
.falcon-blog-box__link svg {
width: 16px;
height: 16px;
}
.falcon-blog-box .ctw-category-list,
.falcon-blog-box__contact {
margin: 0;
padding: 0;
list-style: none;
}
.falcon-blog-box .ctw-category-list li {
margin: 0;
padding: 8px 0;
border-top: 1px solid #e3e8ef;
}
.falcon-blog-box .ctw-category-list li:first-child {
padding-top: 0;
border-top: 0;
}
.falcon-blog-box .ctw-category-list li:last-child {
padding-bottom: 0;
}
.falcon .falcon-blog-box .ctw-category-list a {
color: var(--falcon-text);
font-size: 15px;
line-height: 1.5;
text-decoration: none;
transition: color 0.2s ease-in-out;
}
.falcon .falcon-blog-box .ctw-category-list a:hover {
color: var(--falcon-brand);
}
.falcon-blog-box__contact {
display: flex;
flex-direction: column;
gap: 10px;
}
.falcon .falcon-blog-box__contact a {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--falcon-text);
font-size: 15px;
line-height: 1.4;
text-decoration: none;
overflow-wrap: anywhere;
transition: color 0.2s ease;
}
.falcon .falcon-blog-box__contact a:is(:hover, :focus-visible) {
color: var(--falcon-brand);
}
.falcon-blog-box__contact svg {
flex-shrink: 0;
width: 16px;
height: 16px;
color: var(--falcon-brand);
}
/* Post card. */
.falcon-post-card {
--falcon-blog-line: #e6eaf0;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
min-width: 0;
overflow: hidden;
border: 1px solid var(--falcon-blog-line);
border-radius: 20px;
background: var(--falcon-white);
transition: border-color 0.3s ease;
}
.falcon-post-card:is(:hover, :focus-within) {
border-color: #c9d2f1;
}
.falcon-post-card:has(.falcon-post-card__link:focus-visible) {
outline: 2px solid var(--falcon-brand);
outline-offset: 3px;
}
.falcon-post-card__media {
position: relative;
flex-shrink: 0;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--falcon-bg-light);
}
.falcon .falcon-post-card__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.falcon-post-card:hover .falcon-post-card__image {
transform: scale(1.03);
}
.falcon-post-card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: 12px;
padding: 22px 24px 24px;
}
.falcon-post-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
color: var(--falcon-lower-text);
font-size: 13px;
line-height: 1.3;
}
.falcon .falcon-post-card__term {
position: relative;
z-index: 1;
display: inline-flex;
padding: 5px 11px;
border-radius: 999px;
background: var(--falcon-bg-light);
color: var(--falcon-brand);
font-size: 12px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
transition: background-color 0.2s ease;
}
.falcon .falcon-post-card__term:is(:hover, :focus-visible) {
background: var(--falcon-bg-blue);
color: var(--falcon-brand);
}
.falcon-post-card__facts {
display: inline-flex;
gap: 6px;
}
.falcon-post-card__title {
margin: 2px 0 0;
color: var(--falcon-dark);
font-size: 19px;
font-weight: 650;
line-height: 1.35;
letter-spacing: -0.01em;
text-wrap: balance;
}
.falcon .falcon-post-card__link {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.falcon .falcon-post-card__link::after {
content: "";
position: absolute;
inset: 0;
}
.falcon .falcon-post-card__link:focus-visible {
outline: none;
}
.falcon .falcon-post-card:hover .falcon-post-card__link {
color: var(--falcon-brand);
}
.falcon-post-card__text {
display: -webkit-box;
margin: 0;
overflow: hidden;
color: var(--falcon-lower-text);
font-size: 15px;
line-height: 1.6;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.falcon-post-card__more {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
padding-top: 4px;
color: var(--falcon-brand);
font-size: 15px;
font-weight: 600;
line-height: 1.3;
}
.falcon-post-card__more svg {
width: 16px;
height: 16px;
transition: transform 0.25s ease;
}
.falcon-post-card:hover .falcon-post-card__more svg {
transform: translateX(3px);
}
/* Tablet: the sidebar boxes move under the posts, two a row. */
@media (max-width: 1024px) {
.falcon-blog-listing__inner {
grid-template-columns: minmax(0, 1fr);
}
.falcon-blog-sidebar {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 12px;
}
.falcon-post-grid {
gap: 24px;
}
}
@media (max-width: 767px) {
.falcon-blog-listing {
margin-block: 30px 40px;
}
.falcon-blog-listing__inner {
padding-inline: 16px;
}
.falcon-post-grid,
.falcon-blog-sidebar {
grid-template-columns: minmax(0, 1fr);
}
.falcon-post-card__body {
padding: 20px;
}
.falcon-post-card__title {
font-size: 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-post-card:hover .falcon-post-card__image,
.falcon-post-card:hover .falcon-post-card__more svg {
transform: none;
}
}
/* 42-blog-products.css */
/* Products in blog posts: [falcon_product], [falcon_products] and the old [elementor-template]
product embeds (template-parts/blog/products.php and product-card.php).
The cards size themselves to the post column, not the window (container queries):
- under 520px wide (phones): compact, a small image beside the title, then the summary, price
and button across the card. Two-up cards stack in this form too.
- "wide" layout from 520px: image on the left, text, price and button on the right.
- "card" layout from 560px: standard cards side by side (columns attribute, default 2).
Same look as the shop's product card: white, a fine border that tints on hover, the packshot on
a light tile. The whole card is one link (the title's link stretches over it). */
.falcon-post-products {
margin: 36px 0 40px;
container: falcon-post-products / inline-size;
}
.falcon-post-products__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.falcon-post-products__item {
min-width: 0;
}
.falcon-post-product {
--falcon-post-product-line: #e6eaf0;
position: relative;
display: grid;
grid-template-areas:
"media title"
"media rating"
"text text"
"footer footer";
grid-template-columns: 88px minmax(0, 1fr);
grid-template-rows: auto 1fr auto auto;
column-gap: 16px;
height: 100%;
padding: 16px;
border: 1px solid var(--falcon-post-product-line);
border-radius: 18px;
background: var(--falcon-white);
color: var(--falcon-text);
font-family: var(--falcon-font);
font-size: 15px;
line-height: 1.5;
transition: border-color 0.3s ease;
}
/* The body's parts are placed on the card's grid directly, so each layout can arrange them. */
.falcon-post-product__body {
display: contents;
}
.falcon-post-product:is(:hover, :focus-within) {
border-color: #c9d2f1;
}
.falcon-post-product:has(.falcon-post-product__link:focus-visible) {
outline: 2px solid var(--falcon-brand);
outline-offset: 3px;
}
/* The packshot on a light tile; multiply drops the photo's white background into the tile. */
.falcon-post-product__media {
position: relative;
grid-area: media;
align-self: start;
aspect-ratio: 1;
overflow: hidden;
border-radius: 12px;
background: var(--falcon-bg-light);
}
.falcon .falcon-post-product__image {
position: absolute;
inset: 8%;
display: block;
width: 84%;
max-width: none;
height: 84%;
margin: 0;
border-radius: 0;
mix-blend-mode: multiply;
object-fit: contain;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.falcon-post-product:hover .falcon-post-product__image {
transform: scale(1.04);
}
.falcon-post-product__badge {
position: absolute;
top: 8px;
left: 8px;
padding: 4px 8px;
border-radius: 99px;
background-color: #eaf6e8;
color: #00760f;
font-size: 11px;
font-weight: 600;
line-height: 1;
}
.falcon-post-product__title {
grid-area: title;
margin: 0;
color: var(--falcon-dark);
font-size: 16px;
font-weight: 650;
line-height: 1.35;
letter-spacing: -0.005em;
}
/* Not a text link: no underline or link colour from 90-links.css or the post text, in any state
(the selector outranks theirs). */
.falcon .falcon-post-products .falcon-post-product .falcon-post-product__title > a.falcon-post-product__link {
display: -webkit-box;
overflow: hidden;
background: none;
color: inherit;
text-decoration: none;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
transition: color 0.2s ease;
}
.falcon .falcon-post-products .falcon-post-product:hover .falcon-post-product__title > a.falcon-post-product__link {
color: var(--falcon-brand);
}
.falcon .falcon-post-product__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
}
.falcon .falcon-post-product__link:focus-visible {
outline: none;
}
/* Review rating (only for products with reviews): stars filled to the average, score, count. */
.falcon-post-product__rating {
display: flex;
flex-wrap: wrap;
grid-area: rating;
align-self: start;
align-items: center;
gap: 4px 6px;
margin: 6px 0 0;
color: var(--falcon-lower-text);
font-size: 13px;
line-height: 1.2;
}
.falcon-post-product__stars {
display: inline-block;
width: 81px;
height: 13px;
background: linear-gradient(90deg, #f5a524 var(--falcon-rating, 100%), #d7dce5 var(--falcon-rating, 100%));
-webkit-mask-image: url("../icons/fas-star.svg");
mask-image: url("../icons/fas-star.svg");
-webkit-mask-position: 0 50%;
mask-position: 0 50%;
-webkit-mask-repeat: space no-repeat;
mask-repeat: space no-repeat;
-webkit-mask-size: 14.6px 13px;
mask-size: 14.6px 13px;
}
.falcon-post-product__score {
color: var(--falcon-dark);
font-weight: 600;
}
.falcon-post-product__text {
display: -webkit-box;
grid-area: text;
margin: 12px 0 0;
overflow: hidden;
color: var(--falcon-lower-text);
font-size: 14px;
line-height: 1.55;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.falcon-post-product__footer {
display: flex;
flex-wrap: wrap;
grid-area: footer;
align-items: center;
justify-content: space-between;
gap: 10px 14px;
margin-top: 14px;
}
.falcon-post-product__price {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.falcon-post-product__price .price {
display: block;
margin: 0;
color: var(--falcon-brand);
font-size: 13px;
line-height: 1.25;
}
.falcon-post-product__price .woocommerce-Price-amount {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.01em;
}
.falcon-post-product__price del .woocommerce-Price-amount {
color: var(--falcon-lower-text);
font-size: 14px;
font-weight: 400;
}
.falcon-post-product__price ins {
text-decoration: none;
}
.falcon-post-product__stock {
color: #b42318;
font-size: 12px;
font-weight: 600;
}
.falcon-post-product__button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 18px;
border-radius: 999px;
background-color: var(--falcon-brand);
color: var(--falcon-white);
font-size: 14px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
transition: background-color 0.25s ease;
}
.falcon-post-product__button svg {
width: 16px;
height: 16px;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.falcon-post-product:hover .falcon-post-product__button {
background-color: #14286f;
}
.falcon-post-product:hover .falcon-post-product__button svg {
transform: translateX(3px);
}
/* Wide card: image left, everything else right. */
@container falcon-post-products (min-width: 520px) {
.falcon-post-products--wide .falcon-post-product {
grid-template-areas:
"media title"
"media rating"
"media text"
"media footer";
grid-template-columns: clamp(150px, 30%, 200px) minmax(0, 1fr);
grid-template-rows: auto auto 1fr auto;
column-gap: 24px;
padding: 18px;
}
.falcon-post-products--wide .falcon-post-product__title {
margin-top: 4px;
font-size: 18px;
}
.falcon .falcon-post-products--wide .falcon-post-product .falcon-post-product__title > a.falcon-post-product__link {
-webkit-line-clamp: 2;
}
.falcon-post-products--wide .falcon-post-product__text {
margin-top: 10px;
-webkit-line-clamp: 3;
}
.falcon-post-products--wide .falcon-post-product__footer {
align-self: end;
margin-top: 16px;
}
}
/* Standard cards side by side. */
@container falcon-post-products (min-width: 560px) {
.falcon-post-products--card .falcon-post-products__grid {
grid-template-columns: repeat(var(--falcon-post-products-columns, 2), minmax(0, 1fr));
gap: 20px;
}
.falcon-post-products--card.falcon-post-products--single .falcon-post-products__grid {
max-width: 340px;
}
.falcon-post-products--card .falcon-post-product {
grid-template-areas:
"media"
"title"
"rating"
"text"
"footer";
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto 1fr auto;
padding: 14px 14px 18px;
}
.falcon-post-products--card .falcon-post-product__media {
aspect-ratio: 4 / 3;
margin-bottom: 16px;
}
.falcon-post-products--card :is(.falcon-post-product__title, .falcon-post-product__rating, .falcon-post-product__text, .falcon-post-product__footer) {
margin-inline: 4px;
}
.falcon .falcon-post-products--card .falcon-post-product .falcon-post-product__title > a.falcon-post-product__link {
-webkit-line-clamp: 2;
}
.falcon-post-products--card .falcon-post-product__text {
align-self: start;
}
.falcon-post-products--card .falcon-post-product__footer {
margin-top: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-post-product__image,
.falcon-post-product__button svg {
transition: none;
}
.falcon-post-product:hover :is(.falcon-post-product__image, .falcon-post-product__button svg) {
transform: none;
}
}
/* 42-not-found.css */
/* Page not found (Elementor 404 template 1225). The icon span and svg rules are in 41-blog-listing.css. */
.falcon-not-found__inner {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
min-height: 50vh;
}
.falcon-not-found__icon {
text-align: center;
}
.falcon-not-found__icon span {
font-size: 84px;
}
.falcon-not-found__title {
margin: 0;
font-weight: 400;
line-height: 1;
text-align: center;
}
.falcon-not-found__text,
.falcon-not-found__help {
align-self: center;
width: 362px;
max-width: 362px;
text-align: center;
}
.falcon-not-found__search {
width: 480px;
max-width: 480px;
}
.falcon-not-found__button-wrap {
text-align: center;
}
@media (max-width: 767px) {
.falcon-not-found__inner {
min-height: 45vh;
}
.falcon-not-found__search {
width: 100%;
max-width: 100%;
}
}
/* 43-add-to-cart.css */
/* Add to cart without a reload (43-add-to-cart.js): the button while it works, the notification
("toast") that follows, and WooCommerce's own notices on the product page (shown when the form
posts normally, without JavaScript). */
/* ------------------------------------------------------------------------------------------------
* The add to cart button while adding.
* ---------------------------------------------------------------------------------------------- */
.woocommerce .falcon-product .falcon-product__add-to-cart .cart button.single_add_to_cart_button.falcon-atc-busy,
.woocommerce .falcon-product .falcon-product__add-to-cart .cart button.single_add_to_cart_button.falcon-atc-busy:hover {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: var(--falcon-brand);
color: var(--falcon-white);
cursor: progress;
}
.falcon-atc-spinner {
flex-shrink: 0;
width: 15px;
height: 15px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: falcon-atc-spin 0.7s linear infinite;
}
@keyframes falcon-atc-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-atc-spinner {
animation-duration: 1.6s;
}
}
/* ------------------------------------------------------------------------------------------------
* Notification. Top right under the header from 768px (the script sets --falcon-toast-top); on
* phones a panel that slides up from the bottom edge, over the sticky add to cart bar and the
* Zendesk launcher. Under the menus and the side cart.
* ---------------------------------------------------------------------------------------------- */
.falcon-cart-toasts {
position: fixed;
top: var(--falcon-toast-top, 16px);
right: 20px;
z-index: 2147483600;
width: min(390px, calc(100vw - 32px));
pointer-events: none;
}
@media (max-width: 767px) {
.falcon-cart-toasts {
top: auto;
right: 0;
bottom: 0;
left: 0;
width: auto;
}
}
.falcon-cart-toast {
position: relative;
overflow: hidden;
padding: 16px 16px 18px;
border: 1px solid #e6eaf0;
border-radius: 20px;
background: var(--falcon-white);
box-shadow: 0 22px 50px rgba(27, 29, 40, 0.16), 0 2px 6px rgba(27, 29, 40, 0.06);
color: var(--falcon-dark);
font-family: var(--falcon-font);
font-size: 14px;
line-height: 1.45;
text-align: start;
opacity: 0;
outline: none;
pointer-events: auto;
transform: translateY(-10px) scale(0.98);
transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.falcon-cart-toast.is-visible {
opacity: 1;
transform: none;
}
.falcon-cart-toast.is-leaving {
opacity: 0;
transform: translateY(-6px) scale(0.98);
transition-duration: 0.2s;
}
@media (max-width: 767px) {
.falcon-cart-toast {
border-width: 1px 0 0;
border-radius: 22px 22px 0 0;
box-shadow: 0 -14px 40px rgba(27, 29, 40, 0.16), 0 -2px 6px rgba(27, 29, 40, 0.05);
transform: translateY(105%);
}
.falcon-cart-toast.is-leaving {
transform: translateY(105%);
transition-duration: 0.25s;
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-cart-toast,
.falcon-cart-toast.is-leaving {
transform: none;
}
}
.falcon-cart-toast:focus-visible {
outline: 2px solid var(--falcon-brand);
outline-offset: 3px;
}
.falcon-cart-toast__head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.falcon-cart-toast__badge {
display: grid;
flex-shrink: 0;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--falcon-bg-blue);
color: var(--falcon-brand);
}
.falcon-cart-toast__badge svg {
width: 16px;
height: 16px;
stroke-width: 2.6;
}
.falcon-cart-toast--error .falcon-cart-toast__badge {
background: #fde8e6;
color: #b3261e;
}
.falcon-cart-toast--error .falcon-cart-toast__badge svg {
width: 18px;
height: 18px;
stroke-width: 2.2;
}
.falcon .falcon-cart-toast__title {
flex: 1 1 auto;
margin: 0;
color: var(--falcon-dark);
font-size: 15px;
font-weight: 700;
line-height: 1.3;
}
.falcon .falcon-cart-toast__close {
display: grid;
flex-shrink: 0;
place-items: center;
width: 32px;
height: 32px;
margin: -4px -4px -4px 0;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--falcon-bg-light);
color: var(--falcon-dark);
cursor: pointer;
transition: background-color 0.2s ease;
}
.falcon .falcon-cart-toast__close:hover {
background: var(--falcon-bg-blue);
color: var(--falcon-brand);
}
.falcon .falcon-cart-toast__close:focus-visible {
outline: 2px solid var(--falcon-brand);
outline-offset: 2px;
}
.falcon-cart-toast__close svg {
width: 16px;
height: 16px;
}
/* The item: picture, name, options and cart item data, quantity and price. */
.falcon-cart-toast__item {
display: flex;
align-items: flex-start;
gap: 12px;
}
.falcon-cart-toast__thumb {
display: block;
flex-shrink: 0;
}
.falcon-cart-toast__thumb img {
display: block;
width: 64px;
height: 64px;
padding: 4px;
border: 1px solid #e6eaf0;
border-radius: 12px;
background: var(--falcon-white);
object-fit: contain;
}
.falcon-cart-toast__info {
flex: 1 1 auto;
min-width: 0;
}
.falcon .falcon-cart-toast__name {
display: -webkit-box;
margin: 0;
overflow: hidden;
color: var(--falcon-dark);
font-size: 14px;
font-weight: 600;
line-height: 1.4;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.falcon-cart-toast__details dl.variation {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0 6px;
margin: 4px 0 0;
color: var(--falcon-lower-text);
font-size: 12.5px;
line-height: 1.45;
}
.falcon-cart-toast__details dl.variation dt {
margin: 0;
color: #4a4f63;
font-weight: 500;
}
.falcon-cart-toast__details dl.variation dd,
.falcon-cart-toast__details dl.variation dd p {
margin: 0;
}
.falcon .falcon-cart-toast__meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 12px;
margin: 6px 0 0;
color: var(--falcon-lower-text);
font-size: 13px;
}
.falcon-cart-toast__price {
color: var(--falcon-brand);
font-size: 15px;
font-weight: 700;
}
/* WooCommerce's messages: the error itself, or notes from plugins under an added item. */
.falcon-cart-toast__messages {
display: grid;
gap: 6px;
padding-left: 38px;
}
.falcon-cart-toast__messages--notes {
margin-top: 12px;
padding-left: 0;
}
.falcon .falcon-cart-toast__note {
margin: 0;
color: var(--falcon-dark);
font-size: 14px;
line-height: 1.5;
}
.falcon-cart-toast__messages--notes .falcon-cart-toast__note {
padding: 8px 12px;
border-radius: 10px;
background: var(--falcon-bg-light);
font-size: 13px;
}
.falcon .falcon-cart-toast__messages--notes .falcon-cart-toast__note--error {
background: #fdf0ef;
color: #8f1d16;
}
.falcon .falcon-cart-toast__note a:not(.button) {
color: var(--falcon-brand);
font-weight: 600;
}
/* A "View cart" button inside one of WooCommerce's messages: a quiet link here. */
.falcon .falcon-cart-toast__note a.button {
margin-left: 4px;
padding: 0;
border: 0;
background: none;
color: var(--falcon-brand);
font-size: inherit;
font-weight: 600;
text-decoration: underline;
}
.falcon-cart-toast__actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 14px;
}
.falcon-cart-toast__actions--single {
grid-template-columns: 1fr;
padding-left: 38px;
}
.falcon .falcon-cart-toast .falcon-button {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 44px;
padding: 0 16px;
font-size: 14.5px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
}
.falcon-cart-toast__checkout svg {
width: 16px;
height: 16px;
}
/* How long until it goes: a thin line along the bottom, paused while hovered or focused. */
.falcon-cart-toast__timer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: var(--falcon-brand);
opacity: 0.55;
transform-origin: left center;
animation: falcon-toast-timer var(--falcon-toast-duration, 6000ms) linear forwards;
}
.falcon-cart-toast--error .falcon-cart-toast__timer {
background: #b3261e;
opacity: 0.4;
}
.falcon-cart-toast.is-paused .falcon-cart-toast__timer {
animation-play-state: paused;
}
@keyframes falcon-toast-timer {
from {
transform: scaleX(1);
}
to {
transform: scaleX(0);
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-cart-toast__timer {
display: none;
}
}
@media (max-width: 767px) {
.falcon-cart-toast {
padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
}
.falcon-cart-toast__thumb img {
width: 56px;
height: 56px;
}
}
/* ------------------------------------------------------------------------------------------------
* WooCommerce's notices on the product page (when the form posts without JavaScript, or a notice is
* waiting from an earlier page): a rounded card with an icon, inside the page width.
* The success colours come from the shared notice rule in 32-woo-account.css.
* ---------------------------------------------------------------------------------------------- */
.single-product .woocommerce-notices-wrapper:not(:empty) {
display: grid;
gap: 10px;
width: calc(100% - 40px);
max-width: var(--falcon-width);
margin: 24px auto 0;
}
.single-product .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
width: auto;
margin: 0;
padding: 16px 20px 16px 62px;
border: 1px solid transparent;
border-radius: 16px;
font-family: var(--falcon-font);
font-size: 15px;
font-weight: 500;
line-height: 1.5;
list-style: none;
}
/* The icon: a tick, a cross or an "i" in a circle, in place of WooCommerce's icon font. */
.single-product .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-error, .woocommerce-info)::before {
content: "";
position: absolute;
top: 50%;
left: 18px;
display: block !important; /* 32-woo-account.css hides WooCommerce's icon with !important */
width: 30px;
height: 30px;
margin-top: -15px;
border-radius: 50%;
background-color: var(--falcon-bg-blue);
background-position: center;
background-repeat: no-repeat;
background-size: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c3390' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
color: transparent;
font-size: 0;
}
/* WooCommerce's clearfix would be an empty flex item. */
.single-product .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-error, .woocommerce-info)::after {
content: none;
display: none;
}
.single-product .woocommerce-notices-wrapper .woocommerce-message {
border-color: #e6eaf0 !important; /* over the shared rule's border: none !important */
}
.single-product .woocommerce-notices-wrapper .woocommerce-error {
border-color: #f3cdc9;
background: #fdf3f2;
color: #8f1d16;
}
.single-product .woocommerce-notices-wrapper .woocommerce-error::before {
background-color: #fbe0dd;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 7v6.5'/%3E%3Cpath d='M12 17.2h.01'/%3E%3C/svg%3E");
background-size: 20px;
}
.single-product .woocommerce-notices-wrapper .woocommerce-error li {
margin: 0;
}
.single-product .woocommerce-notices-wrapper .woocommerce-info {
border-color: #e6eaf0;
background: var(--falcon-bg-light);
color: var(--falcon-dark);
}
.single-product .woocommerce-notices-wrapper .woocommerce-info::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c3390' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 11v6'/%3E%3Cpath d='M12 7.2h.01'/%3E%3C/svg%3E");
background-size: 20px;
}
/* WooCommerce's "View cart" (and similar) button in a notice: a pill at the end of the line. */
.falcon.single-product .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) .button {
order: 2;
margin: 0 0 0 auto;
padding: 10px 20px;
border: 0;
border-radius: 999px;
font-family: var(--falcon-font);
font-size: 14px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
}
.falcon.single-product .woocommerce-notices-wrapper :is(.woocommerce-error, .woocommerce-info) .button {
background: var(--falcon-brand);
color: var(--falcon-white);
}
.falcon.single-product .woocommerce-notices-wrapper .woocommerce-error a:not(.button) {
color: inherit;
font-weight: 600;
}
@media (max-width: 767px) {
.single-product .woocommerce-notices-wrapper:not(:empty) {
width: calc(100% - 24px);
margin-top: 16px;
}
.single-product .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) {
padding: 14px 16px 14px 56px;
font-size: 14px;
}
.single-product .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-error, .woocommerce-info)::before {
top: 14px;
left: 14px;
margin-top: 0;
}
.falcon.single-product .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) .button {
margin-left: 0;
}
}
/* Touch screens keep :hover on whatever was under the finger; the buttons keep their own colours. */
@media (hover: none) {
.falcon .falcon-cart-toast .falcon-cart-toast__checkout:hover {
background-color: var(--falcon-brand);
color: var(--falcon-white);
}
.falcon .falcon-cart-toast .falcon-cart-toast__view:hover {
background-color: var(--falcon-bg-blue);
color: var(--falcon-brand);
}
}
/* 45-cart-checkout.css */
/* Basket and checkout (inc/52-woo-account.php: WooCommerce's own shortcodes and templates with
layout wrappers; 32-woo-account.js adds the quantity buttons and the checkout coupon box). */
:root {
--wc-primary: #1c3390;
--wc-primary-text: #fff;
--wc-form-border-color: #dfe4ee;
--falcon-line: #e6eaf0;
}
.falcon-woo--cart .woocommerce,
.falcon-woo--checkout .woocommerce {
color: var(--falcon-text);
font-family: var(--falcon-font);
font-size: 15px;
line-height: 1.6;
}
.falcon-woo--cart table tbody tr:hover > td,
.falcon-woo--checkout table tbody tr:hover > td,
.falcon-woo--checkout table tbody tr:hover > th {
background-color: inherit;
}
/* Shared: cards, inputs, buttons. */
.falcon-cart__section,
.falcon-checkout .col-1,
.falcon-checkout .col-2,
.falcon-checkout__review,
.falcon-checkout__coupon,
.falcon-checkout__payment {
border: 1px solid var(--falcon-line);
border-radius: 24px;
background: var(--falcon-white);
}
.falcon-woo--cart .falcon-cart__coupon .input-text,
.falcon-woo--checkout form .form-row .input-text,
.falcon-woo--checkout form .form-row select,
.falcon-woo--checkout form .form-row textarea,
.falcon-woo--checkout .falcon-checkout__coupon .input-text {
width: 100%;
min-height: 50px;
padding: 13px 16px;
border: 1px solid #dfe4ee;
border-radius: 14px;
background: #fbfcfe;
color: var(--falcon-dark);
font-family: var(--falcon-font);
font-size: 15px;
line-height: 1.4;
box-shadow: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.falcon-woo--checkout form .form-row textarea {
height: auto;
min-height: 110px;
resize: vertical;
}
.falcon-woo--cart .falcon-cart__coupon .input-text:hover,
.falcon-woo--checkout form .form-row .input-text:hover,
.falcon-woo--checkout form .form-row textarea:hover {
border-color: #c9d2f1;
}
.falcon-woo--cart .falcon-cart__coupon .input-text:focus,
.falcon-woo--checkout form .form-row .input-text:focus,
.falcon-woo--checkout form .form-row select:focus,
.falcon-woo--checkout form .form-row textarea:focus,
.falcon-woo--checkout .falcon-checkout__coupon .input-text:focus {
border-color: var(--falcon-brand);
background: #fff;
box-shadow: 0 0 0 4px rgba(28, 51, 144, 0.12);
outline: none;
}
.falcon-woo--cart ::placeholder,
.falcon-woo--checkout ::placeholder {
color: #9aa0b1;
opacity: 1;
}
.falcon-woo--cart button.button,
.falcon-woo--cart a.button,
.falcon-woo--checkout button.button {
min-height: 50px;
padding: 12px 24px;
border: 0;
border-radius: 999px;
background: var(--falcon-bg-light);
color: var(--falcon-brand);
font-family: var(--falcon-font);
font-size: 15px;
font-weight: 600;
line-height: 1.2;
transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.falcon-woo--cart button.button:hover,
.falcon-woo--cart a.button:hover,
.falcon-woo--checkout button.button:hover {
background: var(--falcon-bg-blue);
color: var(--falcon-brand);
}
/* The main actions: Proceed to Checkout and Place order, with a lock. */
.woocommerce .falcon-woo--cart a.checkout-button.button.alt,
.falcon-woo--cart .wc-proceed-to-checkout a.checkout-button,
.falcon-woo--checkout #place_order,
.woocommerce .falcon-woo--checkout button#place_order.button.alt {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 56px;
margin: 0;
padding: 14px 24px;
border-radius: 999px;
background: var(--falcon-brand);
color: #fff;
font-size: 17px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.25s ease, transform 0.2s ease;
}
/* PayPal hides the button while its own buttons are showing. */
.falcon-woo--checkout #place_order.ppcp-hidden {
display: none !important;
}
.falcon-woo--cart .wc-proceed-to-checkout a.checkout-button::before,
.falcon-woo--checkout #place_order::before {
content: "";
width: 15px;
height: 15px;
background: currentColor;
mask: url("../icons/fas-lock.svg") center / contain no-repeat;
}
.falcon-woo--cart .wc-proceed-to-checkout a.checkout-button:hover,
.falcon-woo--checkout #place_order:hover {
background: #142673;
color: #fff;
}
.falcon-woo--cart .wc-proceed-to-checkout a.checkout-button:active,
.falcon-woo--checkout #place_order:active {
transform: scale(0.99);
}
/* Notices on both pages. */
.falcon-woo--cart .woocommerce-notices-wrapper,
.falcon-woo--checkout .woocommerce-notices-wrapper {
margin: 0;
}
.falcon-woo--cart .woocommerce-error,
.falcon-woo--checkout .woocommerce-error,
.falcon-woo--cart .woocommerce-info,
.falcon-woo--checkout .woocommerce-info {
margin: 0 0 20px;
padding: 16px 20px 16px 52px;
border: 1px solid #f3c4c4;
border-radius: 16px;
background: #fff6f6;
color: #8f1d1d;
font-size: 15px;
list-style: none;
}
.falcon-woo--cart .woocommerce-info,
.falcon-woo--checkout .woocommerce-info {
border-color: #c9d2f1;
background: #f6f8fe;
color: var(--falcon-brand);
}
.falcon-woo--cart .woocommerce-error::before,
.falcon-woo--checkout .woocommerce-error::before,
.falcon-woo--cart .woocommerce-info::before,
.falcon-woo--checkout .woocommerce-info::before {
top: 17px;
left: 20px;
color: inherit;
}
.falcon-woo--checkout .woocommerce-error li + li {
margin-top: 4px;
}
.falcon .falcon-woo--cart .woocommerce-error a,
.falcon .falcon-woo--checkout .woocommerce-error a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
/* WooCommerce's message under a coupon field that did not apply. */
.falcon-woo--cart .coupon-error-notice,
.falcon-woo--checkout .coupon-error-notice {
grid-column: 1 / -1;
margin: 4px 0 0;
color: #b42318;
font-size: 13px;
}
.falcon-woo--cart .woocommerce-message,
.falcon-woo--checkout .woocommerce-message {
margin: 0 0 20px;
border-radius: 16px;
}
.falcon-woo--cart .woocommerce-notices-wrapper :focus,
.falcon-woo--checkout .woocommerce-NoticeGroup :focus {
outline: none;
}
/* ---------------------------------------------------------------------------------------------
* Basket: items and coupon on the left, the summary card on the right (stays in view).
* ------------------------------------------------------------------------------------------ */
.falcon-woo--cart {
margin: 48px 0 96px;
}
.falcon-cart {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 28px 40px;
align-items: start;
}
.falcon-cart__side {
position: sticky;
top: calc(120px + var(--falcon-pinned-h, 0px));
transition: top 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.falcon-cart__items {
padding: 8px 28px;
}
.falcon-woo--cart table.cart {
width: 100%;
margin: 0;
border: 0;
border-collapse: collapse;
}
.falcon-woo--cart table.cart thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
/* Each item: photo, name and options, unit price, quantity, line total, remove. */
.falcon-woo--cart table.cart tr.cart_item {
display: grid;
grid-template-areas:
"thumb name qty total remove"
"thumb price qty total remove";
grid-template-columns: 96px minmax(0, 1fr) auto 110px 40px;
grid-template-rows: auto 1fr;
gap: 4px 20px;
align-items: center;
padding: 22px 0;
border-bottom: 1px solid var(--falcon-line);
}
.falcon-woo--cart table.cart tr.cart_item:last-of-type {
border-bottom: 0;
}
.falcon-woo--cart table.cart tr.cart_item td {
display: block;
padding: 0;
border: 0;
background: none !important;
text-align: left !important;
}
.falcon-woo--cart table.cart tr.cart_item td::before {
display: none;
}
.falcon-woo--cart table.cart tr.cart_item td.product-thumbnail {
display: grid !important;
grid-area: thumb;
align-self: start;
place-items: center;
width: 96px;
height: 96px;
padding: 8px;
border: 1px solid var(--falcon-line);
border-radius: 18px;
background: #fff;
}
.falcon-woo--cart table.cart td.product-thumbnail img {
width: 100%;
max-width: none;
height: 100%;
object-fit: contain;
}
.falcon-woo--cart table.cart td.product-name {
grid-area: name;
align-self: end;
min-width: 0;
}
.falcon .falcon-woo--cart table.cart td.product-name > a {
color: var(--falcon-dark);
font-size: 16px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
}
.falcon .falcon-woo--cart table.cart td.product-name > a:hover {
color: var(--falcon-brand);
}
.falcon-woo--cart dl.variation {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 2px 8px;
margin: 8px 0 0;
color: var(--falcon-lower-text);
font-size: 13px;
line-height: 1.45;
}
.falcon-woo--cart dl.variation dt,
.falcon-woo--cart dl.variation dd {
float: none;
margin: 0;
padding: 0;
}
.falcon-woo--cart dl.variation dt {
font-weight: 500;
}
.falcon-woo--cart dl.variation dd p {
margin: 0;
}
.falcon-woo--cart .backorder_notification,
.falcon-woo--cart td.product-name .wc-item-meta {
margin: 6px 0 0;
color: var(--falcon-lower-text);
font-size: 13px;
}
.falcon-woo--cart table.cart td.product-price {
grid-area: price;
align-self: start;
color: var(--falcon-lower-text);
font-size: 14px;
}
.falcon-woo--cart table.cart td.product-price::after {
content: " each";
}
.falcon-woo--cart table.cart td.product-quantity {
grid-area: qty;
}
.falcon-woo--cart table.cart td.product-subtotal {
grid-area: total;
color: var(--falcon-brand);
font-size: 17px;
font-weight: 700;
text-align: right !important;
}
.falcon-woo--cart table.cart td.product-remove {
grid-area: remove;
align-self: start;
justify-self: end;
}
.woocommerce .falcon-woo--cart table.cart a.remove,
.falcon-woo--cart table.cart td.product-remove a.remove {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--falcon-bg-light);
color: var(--falcon-lower-text) !important;
font-size: 20px;
font-weight: 400;
line-height: 1;
text-decoration: none;
transition: background-color 0.25s ease, color 0.25s ease;
}
.woocommerce .falcon-woo--cart table.cart a.remove:hover {
background: #fde8e8;
color: #b42318 !important;
}
/* Quantity: - and + around the number (32-woo-account.js adds the buttons). */
.falcon-woo--cart .quantity {
display: inline-flex;
align-items: center;
border: 1px solid #dfe4ee;
border-radius: 999px;
background: #fff;
}
.falcon-woo--cart .quantity .qty {
width: 44px;
min-height: 40px;
padding: 0;
border: 0;
background: transparent;
color: var(--falcon-dark);
font-size: 15px;
font-weight: 600;
text-align: center;
box-shadow: none;
appearance: textfield;
-moz-appearance: textfield;
}
.falcon-woo--cart .quantity .qty::-webkit-inner-spin-button,
.falcon-woo--cart .quantity .qty::-webkit-outer-spin-button {
margin: 0;
-webkit-appearance: none;
}
.falcon-woo--cart .quantity .qty:focus {
box-shadow: none;
}
.falcon-woo--cart .quantity:focus-within {
border-color: var(--falcon-brand);
box-shadow: 0 0 0 4px rgba(28, 51, 144, 0.12);
}
.falcon .falcon-qty__step {
display: grid;
place-items: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--falcon-brand);
font-family: var(--falcon-font);
font-size: 19px;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: background-color 0.2s ease;
}
.falcon .falcon-qty__step:hover {
background: var(--falcon-bg-light);
color: var(--falcon-brand);
}
/* The quantity box updates the basket by itself, so the Update Cart row stays hidden. */
.falcon-woo--cart table.cart tr:has(td.actions) {
display: none;
}
/* WooCommerce's clearfix pseudo-elements would become empty grid cells. Its rules are specific
(".woocommerce form .form-row::before"), hence the long selectors. */
.falcon-woo--cart .woocommerce :is(.falcon-cart__coupon-row, .wc-proceed-to-checkout, .cart-collaterals)::before,
.falcon-woo--cart .woocommerce :is(.falcon-cart__coupon-row, .wc-proceed-to-checkout, .cart-collaterals)::after,
.falcon-woo--checkout .woocommerce :is(#customer_details, .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .falcon-checkout__coupon-grid, .place-order, .form-row)::before,
.falcon-woo--checkout .woocommerce :is(#customer_details, .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .falcon-checkout__coupon-grid, .place-order, .form-row)::after,
.falcon-woo--checkout #payment ul.payment_methods li.wc_payment_method::before,
.falcon-woo--checkout #payment ul.payment_methods li.wc_payment_method::after {
display: none;
}
/* Coupon. */
.falcon-cart__coupon {
margin-top: 16px;
padding: 18px 20px;
}
.falcon-cart__coupon-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
margin: 0;
}
.falcon-cart__coupon-field,
.falcon-cart__coupon-action {
margin: 0;
}
/* Summary card. */
.falcon-cart__totals {
padding: 28px;
}
.falcon-woo--cart .cart-collaterals,
.falcon-woo--cart .cart-collaterals .cart_totals {
width: 100%;
float: none;
}
.falcon .falcon-cart__totals .cart_totals h2 {
margin: 0 0 14px;
font-size: 24px;
font-weight: 500;
line-height: 1.3;
}
.falcon-cart__totals table.shop_table {
width: 100%;
margin: 0 0 20px;
border: 0;
border-collapse: collapse;
}
.falcon-cart__totals table.shop_table th,
.falcon-cart__totals table.shop_table td {
padding: 12px 0;
border: 0;
border-top: 1px solid var(--falcon-line);
background: none;
color: var(--falcon-text);
font-size: 15px;
vertical-align: top;
}
.falcon-cart__totals table.shop_table tr:first-child th,
.falcon-cart__totals table.shop_table tr:first-child td {
border-top: 0;
}
.falcon-cart__totals table.shop_table th {
padding-right: 12px;
color: var(--falcon-lower-text);
font-weight: 500;
text-align: left;
}
.falcon-cart__totals table.shop_table td {
text-align: right;
}
.falcon-cart__totals table.shop_table td::before {
display: none;
}
.falcon-cart__totals .woocommerce-shipping-destination,
.falcon-cart__totals .falcon-woo-message,
.falcon-cart__totals .woocommerce-shipping-totals td p {
margin: 4px 0 0;
color: var(--falcon-lower-text);
font-size: 13px;
line-height: 1.5;
}
.falcon-cart__totals ul#shipping_method {
margin: 0;
padding: 0;
list-style: none;
}
.falcon-cart__totals tr.order-total th,
.falcon-cart__totals tr.order-total td {
padding-top: 16px;
border-top: 1px solid #cfd6e3;
color: var(--falcon-dark);
}
.falcon-cart__totals tr.order-total td strong .woocommerce-Price-amount {
color: var(--falcon-brand);
font-size: 24px;
font-weight: 700;
}
.falcon-cart__totals tr.order-total small {
display: block;
color: var(--falcon-lower-text);
font-size: 12px;
font-weight: 400;
}
.falcon-cart__totals .wc-proceed-to-checkout {
display: grid;
gap: 12px;
padding: 0;
}
.falcon-cart__totals .ppcp-messages {
order: -1;
}
.falcon-cart__secure {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 2px 0 0;
color: var(--falcon-lower-text);
font-size: 13px;
}
.falcon-cart__secure .falcon-icon,
.falcon-checkout-head__secure .falcon-icon {
width: 12px;
height: 12px;
fill: currentColor;
}
/* Empty basket. */
.falcon-woo--cart .wc-empty-cart-message,
.falcon-woo--cart .wc-empty-cart-message .cart-empty.woocommerce-info,
.falcon-woo--cart .return-to-shop {
width: 100%;
max-width: 560px;
margin-inline: auto;
}
.falcon-woo--cart .cart-empty.woocommerce-info {
position: relative;
margin: 0;
padding: 40px 32px 12px;
border: 1px solid var(--falcon-line);
border-bottom: 0;
border-radius: 28px 28px 0 0;
background: #fff;
color: var(--falcon-dark);
font-size: 20px;
font-weight: 600;
text-align: center;
}
.falcon-woo--cart .cart-empty.woocommerce-info::before {
position: static;
display: block;
width: 64px;
height: 64px;
margin: 0 auto 18px;
border-radius: 20px;
background: var(--falcon-bg-light);
content: "";
}
.falcon-woo--cart .cart-empty.woocommerce-info::after {
content: "";
position: absolute;
top: 59px;
left: 50%;
width: 26px;
height: 26px;
background: var(--falcon-brand);
mask: url("../icons/eicon-cart-solid.svg") center / contain no-repeat;
transform: translateX(-50%);
}
.falcon-woo--cart .return-to-shop {
max-width: 560px;
margin: 0 auto;
padding: 4px 32px 40px;
border: 1px solid var(--falcon-line);
border-top: 0;
border-radius: 0 0 28px 28px;
background: #fff;
text-align: center;
}
.woocommerce .falcon-woo--cart .return-to-shop a.button,
.falcon-woo--cart .return-to-shop .button {
display: inline-flex;
align-items: center;
min-height: 52px;
padding-inline: 28px;
background: var(--falcon-brand);
color: #fff;
}
.falcon-woo--cart .return-to-shop .button:hover {
background: #142673;
color: #fff;
}
/* ---------------------------------------------------------------------------------------------
* Checkout: heading and steps, details on the left, the order card on the right (stays in view).
* ------------------------------------------------------------------------------------------ */
.falcon-woo--checkout {
margin: 40px 0 96px;
}
.falcon-checkout-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 32px;
margin-bottom: 32px;
}
.falcon .falcon-checkout-head__title {
margin: 0;
font-size: 40px;
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.015em;
}
.falcon-checkout-steps {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.falcon-checkout-steps__step {
display: flex;
align-items: center;
gap: 8px;
color: var(--falcon-lower-text);
font-size: 14px;
font-weight: 500;
}
.falcon-checkout-steps__step + .falcon-checkout-steps__step::before {
content: "";
width: 28px;
height: 1px;
margin-right: 0;
background: #cfd6e3;
}
.falcon-checkout-steps__dot {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border: 1px solid #cfd6e3;
border-radius: 50%;
background: #fff;
font-size: 12px;
font-weight: 600;
}
.falcon-checkout-steps__dot .falcon-icon {
width: 11px;
height: 11px;
fill: currentColor;
}
.falcon-checkout-steps__step.is-done .falcon-checkout-steps__dot {
border-color: var(--falcon-bg-blue);
background: var(--falcon-bg-light);
color: var(--falcon-brand);
}
.falcon-checkout-steps__step.is-current {
color: var(--falcon-dark);
}
.falcon-checkout-steps__step.is-current .falcon-checkout-steps__dot {
border-color: var(--falcon-brand);
background: var(--falcon-brand);
color: #fff;
}
.falcon .falcon-checkout-steps__label {
color: inherit;
text-decoration: none;
}
.falcon .falcon-checkout-steps a.falcon-checkout-steps__label:hover {
color: var(--falcon-brand);
}
.falcon-checkout-head__secure {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 0 auto;
padding: 8px 14px;
border-radius: 999px;
background: #eaf6e8;
color: #00760f;
font-size: 13px;
font-weight: 600;
}
/* Layout. */
.falcon-woo--checkout form.checkout {
display: block;
}
.falcon-checkout {
display: grid;
grid-template-columns: minmax(0, 1fr) 440px;
gap: 28px 40px;
align-items: start;
}
.falcon-checkout__main #customer_details {
display: grid;
gap: 20px;
}
.falcon-checkout .col2-set .col-1,
.falcon-checkout .col2-set .col-2 {
float: none;
width: auto;
padding: 28px 30px 30px;
}
.falcon-checkout__side {
position: sticky;
top: calc(110px + var(--falcon-pinned-h, 0px));
transition: top 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
display: grid;
gap: 16px;
}
/* Section headings. */
.falcon .falcon-woo--checkout .woocommerce-billing-fields > h3,
.falcon .falcon-woo--checkout #order_review_heading {
margin: 0 0 20px;
font-size: 22px;
font-weight: 600;
line-height: 1.3;
}
.falcon .falcon-woo--checkout #ship-to-different-address {
margin: 0;
font-size: 18px;
font-weight: 600;
line-height: 1.3;
}
/* Fields: two columns where WooCommerce pairs them (first and last name). */
.falcon-woo--checkout .woocommerce-billing-fields__field-wrapper,
.falcon-woo--checkout .woocommerce-shipping-fields__field-wrapper {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.falcon-woo--checkout .woocommerce-shipping-fields__field-wrapper {
margin-top: 20px;
}
/* As specific as WooCommerce's ".woocommerce form .form-row-first" (float and 47% width). */
.falcon-woo--checkout .woocommerce form .form-row {
float: none;
width: auto;
margin: 0;
padding: 0;
grid-column: 1 / -1;
}
.falcon-woo--checkout .woocommerce form .form-row-first {
grid-column: 1;
}
.falcon-woo--checkout .woocommerce form .form-row-last {
grid-column: 2;
}
.falcon-woo--checkout .woocommerce-input-wrapper {
display: block;
}
.falcon-woo--checkout .form-row label {
display: block;
margin: 0 0 7px;
color: var(--falcon-dark);
font-size: 14px;
font-weight: 600;
line-height: 1.4;
}
.falcon-woo--checkout .form-row label.screen-reader-text {
position: absolute;
margin: 0;
}
.falcon-woo--checkout .form-row .required {
color: #b42318;
font-weight: 600;
text-decoration: none;
border: 0;
}
.falcon-woo--checkout .form-row .optional {
color: var(--falcon-lower-text);
font-weight: 400;
}
.falcon-woo--checkout form .form-row.woocommerce-invalid .input-text,
.falcon-woo--checkout form .form-row.woocommerce-invalid select,
.falcon-woo--checkout .form-row.woocommerce-invalid .select2-selection {
border-color: #e35d5d;
background: #fffafa;
}
.falcon-woo--checkout .form-row.woocommerce-invalid label {
color: #b42318;
}
.falcon-woo--checkout .form-row .checkout-inline-error-message {
margin: 6px 0 0;
color: #b42318;
font-size: 13px;
}
/* Country list (select2). */
.falcon-woo--checkout .select2-container--default .select2-selection--single {
height: 50px;
border: 1px solid #dfe4ee;
border-radius: 14px;
background: #fbfcfe;
}
.falcon-woo--checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
padding-inline: 16px 40px;
color: var(--falcon-dark);
font-size: 15px;
line-height: 48px;
}
.falcon-woo--checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
top: 1px;
right: 10px;
height: 48px;
}
.falcon-woo--checkout .select2-container--focus .select2-selection--single,
.falcon-woo--checkout .select2-container--open .select2-selection--single {
border-color: var(--falcon-brand);
box-shadow: 0 0 0 4px rgba(28, 51, 144, 0.12);
}
.select2-container--open .select2-dropdown {
overflow: hidden;
border-color: #dfe4ee;
border-radius: 14px;
box-shadow: 0 18px 40px -20px rgba(28, 51, 144, 0.35);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
background: var(--falcon-brand);
}
/* Checkboxes: create an account, ship elsewhere, marketing opt-in. */
.falcon-woo--checkout .woocommerce-form__label-for-checkbox {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0;
font-weight: 500;
cursor: pointer;
}
.falcon-woo--checkout input[type="checkbox"],
.falcon-woo--checkout input[type="radio"] {
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--falcon-brand);
flex-shrink: 0;
}
.falcon-woo--checkout .woocommerce-account-fields {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--falcon-line);
}
.falcon-woo--checkout .woocommerce-additional-fields {
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid var(--falcon-line);
}
.falcon-woo--checkout .woocommerce-additional-fields > h3 {
display: none;
}
/* Order card. */
.falcon-checkout__review {
padding: 28px 28px 22px;
}
.falcon-woo--checkout table.woocommerce-checkout-review-order-table {
width: 100%;
margin: 0;
border: 0;
border-collapse: collapse;
}
.falcon-woo--checkout table.woocommerce-checkout-review-order-table thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.falcon-woo--checkout table.woocommerce-checkout-review-order-table th,
.falcon-woo--checkout table.woocommerce-checkout-review-order-table td {
padding: 12px 0;
border: 0;
border-top: 1px solid var(--falcon-line);
background: none;
color: var(--falcon-text);
font-size: 15px;
vertical-align: top;
}
.falcon-woo--checkout table.woocommerce-checkout-review-order-table tbody tr:first-child td {
border-top: 0;
}
.falcon-woo--checkout table.woocommerce-checkout-review-order-table td.product-name {
display: grid;
grid-template-columns: 60px minmax(0, 1fr);
gap: 2px 14px;
padding-right: 12px;
color: var(--falcon-dark);
font-weight: 600;
line-height: 1.4;
}
.falcon-checkout__thumb {
display: grid;
grid-row: span 3;
place-items: center;
width: 60px;
height: 60px;
padding: 5px;
border: 1px solid var(--falcon-line);
border-radius: 14px;
background: #fff;
}
.falcon-woo--checkout .falcon-checkout__thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
.falcon-woo--checkout td.product-name .product-quantity {
color: var(--falcon-lower-text);
font-weight: 500;
}
.falcon-woo--checkout td.product-name dl.variation {
display: block;
grid-column: 2;
margin: 4px 0 0;
color: var(--falcon-lower-text);
font-size: 12px;
font-weight: 400;
line-height: 1.45;
}
.falcon-woo--checkout td.product-name dl.variation dt,
.falcon-woo--checkout td.product-name dl.variation dd {
float: none;
margin: 0;
padding: 0;
}
.falcon-woo--checkout td.product-name dl.variation dt,
.falcon-woo--checkout td.product-name dl.variation dd,
.falcon-woo--checkout td.product-name dl.variation dd p {
display: inline;
}
.falcon-woo--checkout td.product-name dl.variation dt {
font-weight: 500;
}
.falcon-woo--checkout td.product-name dl.variation dd::after {
content: "";
display: block;
}
.falcon-woo--checkout td.product-name dl.variation dd p {
margin: 0;
}
.falcon-woo--checkout table.woocommerce-checkout-review-order-table td.product-total {
color: var(--falcon-dark);
font-weight: 600;
text-align: right;
white-space: nowrap;
}
.falcon-woo--checkout table.woocommerce-checkout-review-order-table tfoot th {
color: var(--falcon-lower-text);
font-weight: 500;
text-align: left;
}
.falcon-woo--checkout table.woocommerce-checkout-review-order-table tfoot td {
text-align: right;
}
.falcon-woo--checkout table.woocommerce-checkout-review-order-table tfoot tr:first-child th,
.falcon-woo--checkout table.woocommerce-checkout-review-order-table tfoot tr:first-child td {
border-top-color: #cfd6e3;
}
.falcon-woo--checkout #shipping_method {
margin: 0;
padding: 0;
list-style: none;
}
.falcon-woo--checkout tr.order-total th,
.falcon-woo--checkout tr.order-total td {
padding-top: 16px;
border-top: 1px solid #cfd6e3;
color: var(--falcon-dark);
}
.falcon-woo--checkout tr.order-total td strong .woocommerce-Price-amount {
color: var(--falcon-brand);
font-size: 24px;
font-weight: 700;
}
.falcon-woo--checkout tr.order-total small {
display: block;
white-space: nowrap;
color: var(--falcon-lower-text);
font-size: 12px;
font-weight: 400;
}
/* Coupon. */
.falcon-checkout__coupon {
padding: 16px 22px;
}
.falcon-checkout__coupon-toggle {
margin: 0;
color: var(--falcon-lower-text);
font-size: 14px;
}
.falcon .falcon-checkout__coupon-link {
color: var(--falcon-accent);
font-weight: 600;
}
.falcon-checkout__coupon-form {
margin-top: 12px;
}
.falcon-checkout__coupon-hint {
display: block;
margin-bottom: 8px;
color: var(--falcon-lower-text);
font-size: 13px;
}
.falcon-checkout__coupon-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
}
/* Payment. */
.falcon-checkout__payment {
padding: 24px 24px 26px;
}
.falcon-woo--checkout #payment {
border-radius: 0;
background: none;
}
.falcon-woo--checkout #payment ul.payment_methods {
display: grid;
gap: 10px;
margin: 0 0 18px;
padding: 0;
border: 0;
}
.falcon-woo--checkout #payment ul.payment_methods li.wc_payment_method {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: 10px;
margin: 0;
padding: 14px 16px;
border: 1.5px solid var(--falcon-line);
border-radius: 16px;
background: #fff;
line-height: 1.4;
transition: border-color 0.25s ease, background-color 0.25s ease;
}
.falcon-woo--checkout #payment ul.payment_methods li.wc_payment_method:has(> input:checked) {
border-color: var(--falcon-brand);
background: #f8f9fe;
}
.falcon-woo--checkout #payment ul.payment_methods li > input {
margin: 0;
}
.falcon-woo--checkout #payment ul.payment_methods li > .payment_box {
grid-column: 1 / -1;
}
.falcon-woo--checkout #payment ul.payment_methods li > label {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 10px;
margin: 0;
color: var(--falcon-dark);
font-size: 15px;
font-weight: 600;
vertical-align: middle;
cursor: pointer;
}
.falcon-woo--checkout #payment ul.payment_methods li img {
max-height: 22px;
margin: 0;
}
.falcon-woo--checkout #payment div.payment_box {
margin: 12px 0 0;
padding: 12px 14px;
border-radius: 12px;
background: var(--falcon-bg-light);
color: var(--falcon-lower-text);
font-size: 13px;
}
.falcon-woo--checkout #payment div.payment_box::before {
display: none;
}
.falcon-woo--checkout #payment div.payment_box p {
margin: 0;
}
.falcon-woo--checkout #payment div.form-row.place-order {
display: grid;
gap: 14px;
margin: 0;
padding: 0;
}
.falcon-woo--checkout .woocommerce-privacy-policy-text,
.falcon-woo--checkout .woocommerce-terms-and-conditions-wrapper {
color: var(--falcon-lower-text);
font-size: 13px;
line-height: 1.55;
}
.falcon-woo--checkout .woocommerce-privacy-policy-text p {
margin: 0;
}
.falcon-woo--checkout .automatewoo-optin {
font-size: 13px;
}
.falcon-woo--checkout .automatewoo-optin label {
font-weight: 500;
}
/* Checkout notices span the page above both columns. */
.falcon-woo--checkout .woocommerce-NoticeGroup-checkout {
margin-bottom: 20px;
}
/* ---------------------------------------------------------------------------------------------
* Tablet and phone: one column, the summary after the details.
* ------------------------------------------------------------------------------------------ */
@media (max-width: 1024px) {
.falcon-cart,
.falcon-checkout {
grid-template-columns: minmax(0, 1fr);
}
.falcon-cart__side,
.falcon-checkout__side {
position: static;
}
.falcon-woo--cart,
.falcon-woo--checkout {
margin: 32px 0 72px;
}
.falcon-woo--cart > .falcon-container,
.falcon-woo--checkout > .falcon-container {
padding-inline: 20px;
}
}
@media (max-width: 767px) {
.falcon-woo--cart > .falcon-container,
.falcon-woo--checkout > .falcon-container {
padding-inline: 15px;
}
.falcon-cart__items {
padding: 4px 18px;
}
.falcon-woo--cart table.cart tr.cart_item {
grid-template-areas:
"thumb name remove"
"thumb price price"
"qty qty total";
grid-template-columns: 72px minmax(0, 1fr) 36px;
grid-template-rows: auto auto auto;
gap: 6px 14px;
padding: 18px 0;
}
.falcon-woo--cart table.cart td.product-thumbnail {
width: 72px;
height: 72px;
padding: 6px;
border-radius: 14px;
}
.falcon-woo--cart table.cart td.product-name {
align-self: start;
}
.falcon-woo--cart table.cart td.product-quantity {
margin-top: 8px;
}
.falcon-woo--cart table.cart td.product-subtotal {
align-self: end;
}
.falcon-cart__coupon {
padding: 14px;
}
.falcon-cart__coupon-row {
grid-template-columns: minmax(0, 1fr) auto;
}
.falcon-cart__totals {
padding: 22px 20px;
}
/* Options as "Label: value" lines, so values are not squeezed into a narrow column. */
.falcon-woo--cart dl.variation {
display: block;
}
.falcon-woo--cart dl.variation dt,
.falcon-woo--cart dl.variation dd,
.falcon-woo--cart dl.variation dd p {
display: inline;
}
.falcon-woo--cart dl.variation dd::after {
content: "";
display: block;
}
/* WooCommerce turns the totals into stacked rows and hides the labels on phones; keep them. */
.falcon-cart__totals table.shop_table_responsive tr {
display: table-row;
}
.falcon-cart__totals table.shop_table_responsive tbody th,
.falcon-cart__totals table.shop_table_responsive tr td {
display: table-cell;
background: none !important;
}
.falcon-cart__totals table.shop_table_responsive tr td {
text-align: right !important;
}
.falcon-checkout-steps {
gap: 6px;
}
.falcon-checkout-steps__step {
gap: 6px;
font-size: 12px;
}
.falcon-checkout-steps__dot {
width: 22px;
height: 22px;
font-size: 11px;
}
.falcon .falcon-checkout-head__title {
font-size: 30px;
}
.falcon-checkout-head {
gap: 12px;
margin-bottom: 22px;
}
.falcon-checkout-steps__step + .falcon-checkout-steps__step::before {
width: 10px;
}
.falcon-checkout-head__secure {
margin-left: 0;
}
.falcon-checkout .col2-set .col-1,
.falcon-checkout .col2-set .col-2 {
padding: 22px 18px 24px;
border-radius: 20px;
}
.falcon-woo--checkout .woocommerce-billing-fields__field-wrapper,
.falcon-woo--checkout .woocommerce-shipping-fields__field-wrapper {
grid-template-columns: minmax(0, 1fr);
gap: 14px;
}
.falcon-woo--checkout .woocommerce form .form-row-first,
.falcon-woo--checkout .woocommerce form .form-row-last {
grid-column: 1;
}
.falcon-checkout__review,
.falcon-checkout__payment {
padding: 22px 18px;
border-radius: 20px;
}
.falcon-checkout__coupon {
border-radius: 20px;
}
}
@media (prefers-reduced-motion: reduce) {
.falcon-woo--cart .wc-proceed-to-checkout a.checkout-button:active,
.falcon-woo--checkout #place_order:active {
transform: none;
}
}
/* 46-checkout-extras.css */
/* Checkout tidying (inc/58-checkout-extras.php): payment options with matching badges, the VAT row,
the Pay Later message beside the PayPal button, the ship-to-another-address toggle and the
country list. */
/* Payment options: the name with its badges underneath, all badges one size, laid out the same for
PayPal and cards. */
.falcon-woo--checkout #payment ul.payment_methods li > label {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
width: 100%;
}
.falcon-pay-badges {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
}
.falcon-pay-badge {
display: grid;
place-items: center;
width: 46px;
height: 30px;
padding: 4px 5px;
border: 1px solid #dfe4ee;
border-radius: 6px;
background: #fff;
}
.falcon-woo--checkout #payment ul.payment_methods li .falcon-pay-badge img {
display: block;
width: 100%;
height: 100%;
max-height: none;
object-fit: contain;
}
/* VAT on its own row, quieter than the total. */
.falcon-woo--checkout .falcon-vat-row :is(th, td),
.falcon-woo--cart .falcon-vat-row :is(th, td) {
color: var(--falcon-lower-text);
font-size: 13px;
font-weight: 500;
}
/* Pay Later message: with the PayPal button, above it. */
.falcon-woo--checkout #payment .place-order .ppcp-messages {
margin: 4px 0 12px;
}
.falcon-woo--checkout #payment .place-order .ppcp-messages:empty {
display: none;
}
/* Ship to a different address: a full-width option card, like the payment options. */
.falcon .falcon-woo--checkout #ship-to-different-address {
display: block;
width: 100%;
margin: 0 0 4px;
font-size: 15px;
}
.falcon-woo--checkout #ship-to-different-address label {
display: flex;
width: 100%;
gap: 12px;
padding: 16px 18px;
border: 1.5px solid var(--falcon-line);
border-radius: 16px;
background: #fff;
color: var(--falcon-dark);
font-weight: 600;
transition: border-color 0.25s ease, background-color 0.25s ease;
}
.falcon-woo--checkout #ship-to-different-address label:hover {
border-color: #c9d2f1;
}
.falcon-woo--checkout #ship-to-different-address label:has(input:checked) {
border-color: var(--falcon-brand);
background: #f8f9fe;
color: var(--falcon-brand);
}
.falcon-woo--checkout #ship-to-different-address input {
width: 20px;
height: 20px;
}
/* Padding, as the margin collapsed into the card above. */
.falcon-woo--checkout .woocommerce-shipping-fields__field-wrapper {
margin-top: 0;
padding-top: 20px;
}
/* Country list: a rounded panel a little below the field, light highlight, roomier rows. */
.select2-container--open .select2-dropdown--below {
margin-top: 6px;
border-top: 1px solid #dfe4ee;
border-radius: 14px;
}
.select2-container--open .select2-dropdown--above {
margin-top: -6px;
border-bottom: 1px solid #dfe4ee;
border-radius: 14px;
}
.select2-container--default .select2-search--dropdown {
padding: 10px 10px 6px;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
height: 40px;
padding: 0 12px;
border: 1px solid #dfe4ee;
border-radius: 10px;
background: #fbfcfe;
font-size: 15px;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
border-color: var(--falcon-brand);
outline: 0;
box-shadow: 0 0 0 3px rgba(28, 51, 144, 0.12);
}
.select2-container--default .select2-results > .select2-results__options {
max-height: 280px;
padding: 4px 6px 8px;
}
.select2-container--default .select2-results__option {
margin: 1px 0;
padding: 9px 12px;
border-radius: 8px;
color: var(--falcon-dark);
font-size: 15px;
line-height: 1.35;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
background: #eef1fb;
color: var(--falcon-brand);
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
background: var(--falcon-brand);
color: #fff;
font-weight: 600;
}
/* 90-links.css */
/* Text links: an underline that draws in from the left on hover and focus, and runs back out when
the pointer leaves. It is a background line, so it follows the text onto every line it wraps to.
Buttons, pills, cards and image links are not text links and are left alone.
Menu and list links: no line until hovered.
Links inside body text: a faint line at rest, so they read as links, with the full line drawn
over it on hover. */
.falcon :is(
.falcon-shop-menu__links a,
.falcon-footer-menu a,
.falcon-mobile-nav__menu a,
.falcon-mobile-nav__foot a,
.falcon-blog-box .ctw-category-list a,
.falcon-header-main__links .falcon-icon-list__text,
.falcon-topbar__contact a .falcon-icon-list__text,
.falcon-footer-col a .falcon-icon-list__text,
.falcon-form-panel__links a .falcon-icon-list__text,
.falcon-content-form__lines a .falcon-icon-list__text,
.falcon-woo .product-name > a
) {
--falcon-line: 1.5px;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0 var(--falcon-line);
background-origin: content-box;
text-decoration: none;
transition: background-size 0.35s cubic-bezier(0.65, 0, 0.35, 1), color 0.2s ease;
}
.falcon :is(
.falcon-shop-menu__links a,
.falcon-footer-menu a,
.falcon-mobile-nav__menu a,
.falcon-mobile-nav__foot a,
.falcon-blog-box .ctw-category-list a,
.falcon-woo .product-name > a
):is(:hover, :focus-visible),
.falcon :is(
.falcon-header-main__links,
.falcon-topbar__contact,
.falcon-footer-col,
.falcon-form-panel__links,
.falcon-content-form__lines
) a:is(:hover, :focus-visible) .falcon-icon-list__text {
background-size: 100% var(--falcon-line);
}
/* The big full-screen menu links get a heavier line. */
.falcon .falcon-mobile-nav .falcon-mobile-nav__menu a {
--falcon-line: 2.5px;
}
/* Links in body text. */
.falcon :is(
.falcon-product__content,
.falcon-product__comparison-table,
.falcon-faq__answer,
.falcon-product__features-list,
.falcon-single__entry,
.falcon-rich-text,
.falcon-media-text__text,
.falcon-message__text,
.falcon-feature-cards__text,
.falcon-content-form__text,
.falcon-form-panel__text,
.page-content,
.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-checkbox-text
) a:not(.button, [class*="button"], [class*="btn"], [class*="falcon-product-card"], :has(img)) {
--falcon-line: 1.5px;
background-image: linear-gradient(currentColor, currentColor), linear-gradient(color-mix(in srgb, currentColor 30%, transparent), color-mix(in srgb, currentColor 30%, transparent));
background-repeat: no-repeat;
background-position: 0 100%, 0 100%;
background-size: 0 var(--falcon-line), 100% 1px;
text-decoration: none;
transition: background-size 0.35s cubic-bezier(0.65, 0, 0.35, 1), color 0.2s ease;
}
.falcon :is(
.falcon-product__content,
.falcon-product__comparison-table,
.falcon-faq__answer,
.falcon-product__features-list,
.falcon-single__entry,
.falcon-rich-text,
.falcon-media-text__text,
.falcon-message__text,
.falcon-feature-cards__text,
.falcon-content-form__text,
.falcon-form-panel__text,
.page-content,
.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-checkbox-text
) a:not(.button, [class*="button"], [class*="btn"], [class*="falcon-product-card"], :has(img)):is(:hover, :focus-visible) {
background-size: 100% var(--falcon-line), 100% 1px;
}
@media (prefers-reduced-motion: reduce) {
.falcon a,
.falcon a .falcon-icon-list__text {
transition-property: color !important;
}
}
/* 91-buttons.css */
/* Buttons: one interaction for every button on the site. This file loads after all the others and
changes only how buttons move; each button keeps the colours and size set in its own file.
- Colours change over 0.22s on one curve everywhere.
- Hover (mouse and trackpad only): a 1px lift. No shadow.
- Press: back down and 2% smaller, quickly.
- Keyboard focus: a 2px ring 3px outside the button (pale blue on the dark top bar).
- Arrows slide 3px to the right; other icons grow slightly.
- Disabled, loading and busy buttons do not move.
- Reduced motion: colours still change, nothing moves.
The same list of buttons appears in each rule below; a new button style goes into every list.
Left alone on purpose: product card arrows, option pills, gallery, lightbox and carousel controls,
video play buttons, the search submit, quantity steppers, the header cart icon, the mobile menu
toggle, PayPal's buttons (an iframe) and links that WooCommerce plugins style as buttons inside
the account area (they look like links there). */
:root {
--falcon-btn-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--falcon-btn-speed: 0.22s;
--falcon-btn-ring: var(--falcon-brand);
}
/* Rest: the shared timing. The ID selectors in the list give this rule enough weight to replace each
button's own transition. */
.falcon :is(
.falcon-button,
.falcon-topbar__button,
.falcon-mega__all,
.falcon-sticky-cart__button,
.falcon-specs__cta,
.falcon-product-reviews :is(.falcon-product-reviews__write, .falcon-product-reviews__more, .falcon-review-form__submit),
form.account-page-form button[type="submit"],
.gform_wrapper :is(.gform_button, input[type="submit"], .gform_next_button, .gform_previous_button, .gform_footer input[type="button"], .gform_page_footer input[type="button"]),
.single_add_to_cart_button,
.woocommerce-message .button,
.return-to-shop .button,
.falcon-woo--cart .woocommerce :is(button.button, .checkout-button, .shop_table .button),
.falcon-woo--checkout .woocommerce :is(button.woocommerce-button, .woocommerce-form-login__submit),
#place_order,
.falcon-account :is(button.button, .woocommerce-EditAccountForm .button, .woocommerce-address-fields .button, .shop_table .button, .order-again .button, .woocommerce-pagination .button, .falcon-account__panel .button)
) {
transition-property: background-color, border-color, box-shadow, color, fill, opacity, transform;
transition-duration: var(--falcon-btn-speed);
transition-timing-function: var(--falcon-btn-ease);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.falcon :is(
.falcon-button,
.falcon-topbar__button,
.falcon-mega__all,
.falcon-sticky-cart__button,
.falcon-specs__cta,
.falcon-product-reviews :is(.falcon-product-reviews__write, .falcon-product-reviews__more, .falcon-review-form__submit),
form.account-page-form button[type="submit"],
.gform_wrapper :is(.gform_button, input[type="submit"], .gform_next_button, .gform_previous_button, .gform_footer input[type="button"], .gform_page_footer input[type="button"]),
.single_add_to_cart_button,
.woocommerce-message .button,
.return-to-shop .button,
.falcon-woo--cart .woocommerce :is(button.button, .checkout-button, .shop_table .button),
.falcon-woo--checkout .woocommerce :is(button.woocommerce-button, .woocommerce-form-login__submit),
#place_order,
.falcon-account :is(button.button, .woocommerce-EditAccountForm .button, .woocommerce-address-fields .button, .shop_table .button, .order-again .button, .woocommerce-pagination .button, .falcon-account__panel .button)
):hover {
transform: translateY(-1px);
}
}
@media (prefers-reduced-motion: no-preference) {
.falcon :is(
.falcon-button,
.falcon-topbar__button,
.falcon-mega__all,
.falcon-sticky-cart__button,
.falcon-specs__cta,
.falcon-product-reviews :is(.falcon-product-reviews__write, .falcon-product-reviews__more, .falcon-review-form__submit),
form.account-page-form button[type="submit"],
.gform_wrapper :is(.gform_button, input[type="submit"], .gform_next_button, .gform_previous_button, .gform_footer input[type="button"], .gform_page_footer input[type="button"]),
.single_add_to_cart_button,
.woocommerce-message .button,
.return-to-shop .button,
.falcon-woo--cart .woocommerce :is(button.button, .checkout-button, .shop_table .button),
.falcon-woo--checkout .woocommerce :is(button.woocommerce-button, .woocommerce-form-login__submit),
#place_order,
.falcon-account :is(button.button, .woocommerce-EditAccountForm .button, .woocommerce-address-fields .button, .shop_table .button, .order-again .button, .woocommerce-pagination .button, .falcon-account__panel .button)
):active {
transform: translateY(0) scale(0.98);
transition-duration: 0.08s;
}
}
/* Keyboard focus ring, outside the button so it never covers the label. The product review pills
are not in this list: 30-product-reviews.css gives them their own ring. */
.falcon :is(
.falcon-button,
.falcon-topbar__button,
.falcon-mega__all,
.falcon-sticky-cart__button,
.falcon-specs__cta,
form.account-page-form button[type="submit"],
.gform_wrapper :is(.gform_button, input[type="submit"], .gform_next_button, .gform_previous_button, .gform_footer input[type="button"], .gform_page_footer input[type="button"]),
.single_add_to_cart_button,
.woocommerce-message .button,
.return-to-shop .button,
.falcon-woo--cart .woocommerce :is(button.button, .checkout-button, .shop_table .button),
.falcon-woo--checkout .woocommerce :is(button.woocommerce-button, .woocommerce-form-login__submit),
#place_order,
.falcon-account :is(button.button, .woocommerce-EditAccountForm .button, .woocommerce-address-fields .button, .shop_table .button, .order-again .button, .woocommerce-pagination .button, .falcon-account__panel .button)
):focus-visible {
outline: 2px solid var(--falcon-btn-ring);
outline-offset: 3px;
}
/* Gravity Forms draws its own ring whenever its buttons have focus, including after a mouse press;
like every other button, they show the ring above for the keyboard only. */
.falcon .gform_wrapper.gform-theme :is(.gform_button, input[type="submit"], .gform_next_button, .gform_previous_button, .gform_footer input[type="button"], .gform_page_footer input[type="button"]):focus:not(:focus-visible) {
outline: none;
}
/* Disabled, loading and busy buttons stay still (the sticky add to cart bar marks its state on the bar). */
.falcon :is(
.falcon-button,
.falcon-topbar__button,
.falcon-mega__all,
.falcon-sticky-cart__button,
.falcon-specs__cta,
.falcon-product-reviews :is(.falcon-product-reviews__write, .falcon-product-reviews__more, .falcon-review-form__submit),
form.account-page-form button[type="submit"],
.gform_wrapper :is(.gform_button, input[type="submit"], .gform_next_button, .gform_previous_button, .gform_footer input[type="button"], .gform_page_footer input[type="button"]),
.single_add_to_cart_button,
.woocommerce-message .button,
.return-to-shop .button,
.falcon-woo--cart .woocommerce :is(button.button, .checkout-button, .shop_table .button),
.falcon-woo--checkout .woocommerce :is(button.woocommerce-button, .woocommerce-form-login__submit),
#place_order,
.falcon-account :is(button.button, .woocommerce-EditAccountForm .button, .woocommerce-address-fields .button, .shop_table .button, .order-again .button, .woocommerce-pagination .button, .falcon-account__panel .button)
):is(:disabled, .disabled, [aria-disabled="true"], [aria-busy="true"], .loading, .is-busy, .falcon-sticky-cart:is([data-mode="soldout"], [data-mode="unavailable"], .is-busy) *) {
transform: none;
}
/* Add to cart before the options are chosen: WooCommerce greys it out, and it no longer changes colour
on hover either. */
.falcon.woocommerce .falcon-product .falcon-product__add-to-cart .cart button.single_add_to_cart_button:is(.disabled, :disabled):hover {
background-color: var(--falcon-brand);
color: var(--falcon-white);
}
/* Top bar: the ring is pale blue on the dark bar; the lock icon grows a little. */
.falcon .falcon-topbar {
--falcon-btn-ring: var(--falcon-bg-blue);
}
.falcon .falcon-topbar__button-icon svg {
transition: transform var(--falcon-btn-speed) var(--falcon-btn-ease), fill var(--falcon-btn-speed) var(--falcon-btn-ease);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.falcon .falcon-topbar .falcon-topbar__button:hover .falcon-topbar__button-icon svg {
transform: scale(1.12);
}
}
/* "View all products" in the Browse Catalog panel: the arrow slides on the same timing. */
.falcon .falcon-mega__all svg {
transition: transform var(--falcon-btn-speed) var(--falcon-btn-ease);
}
@media (prefers-reduced-motion: reduce) {
.falcon .falcon-mega__all:hover svg {
transform: none;
}
}
/* Browse Catalog: the blue box holds the menu panel, so the box itself never moves (a transform would
change where the panel and the page dimmer are drawn). It darkens on hover, the grid icon grows,
the label presses in, and the focus ring goes round the whole box. */
.falcon .falcon-mega {
transition: background-color var(--falcon-btn-speed) var(--falcon-btn-ease);
}
.falcon .falcon-mega:has(> .falcon-mega__toggle:hover) {
background-color: color-mix(in srgb, var(--falcon-brand) 84%, #000);
}
@media (prefers-reduced-motion: no-preference) {
.falcon .falcon-mega .falcon-mega__toggle {
transition: transform var(--falcon-btn-speed) var(--falcon-btn-ease);
}
.falcon .falcon-mega .falcon-mega__toggle:active {
transform: scale(0.97);
transition-duration: 0.08s;
}
}
@supports selector(:has(*)) {
.falcon .falcon-mega .falcon-mega__toggle:focus-visible {
outline: none;
}
.falcon .falcon-mega:has(> .falcon-mega__toggle:focus-visible) {
outline: 2px solid var(--falcon-btn-ring);
outline-offset: 3px;
}
}