/*
Theme Name: FCX World Group — Blocksy Child
Theme URI: https://www.fcxworld.com/
Description: Premium corporate + WooCommerce child theme for FCX WORLD GROUP DIŞ TİC. LTD. ŞTİ., built to the approved Developer Handoff Package. Includes custom Gutenberg section blocks, WooCommerce catalog templates, a quote-request workflow and a full demo-content importer. Every section is editable from the WordPress Dashboard.
Author: FCX World Group
Author URI: https://www.fcxworld.com/
Template: blocksy
Version: 1.85.1
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fcx
Tags: business, e-commerce, custom-colors, custom-menu, custom-logo, featured-images, full-width-template, translation-ready
*/
/* =========================================================================
1. Design tokens (from the handoff "Design Tokens" table)
========================================================================= */
:root {
--fcx-ink: #14181f;
--fcx-ink-soft: #3a4150;
--fcx-muted: #4b5563;
--fcx-subtle: #8a90a0;
--fcx-line: #e2e5ea;
--fcx-line-soft: #dfe3e8;
--fcx-paper: #f7f8fa;
--fcx-surface-alt: #eef1f5;
--fcx-navy: #22407a;
--fcx-navy-deep: #16264a;
--fcx-charcoal-deep: #0f1523;
/* Accent: brand blue. The variable keeps its historical name so existing
markup, the Customizer control and saved settings all keep working. */
--fcx-amber: #2f6fd0;
--fcx-accent: #2f6fd0;
--fcx-accent-strong: #2559ab;
--fcx-accent-soft: #ffffff;
--fcx-whatsapp: #25d366;
--fcx-email-blue: #1A73E8;
--fcx-youtube: #ff0000;
--fcx-card-dark: #171e2e;
--fcx-card-dark-line: #262c3a;
--fcx-on-dark: #c7ccd6;
--fcx-on-dark-soft: #9aa2b1;
--fcx-on-dark-strong: #dfe3ea;
--fcx-container: 1360px;
--fcx-gutter: 32px;
--fcx-radius: 8px;
--fcx-radius-sm: 4px;
--fcx-radius-lg: 12px;
--fcx-heading-font: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--fcx-body-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
/* =========================================================================
2. Base
========================================================================= */
body.fcx-site {
font-family: var(--fcx-body-font);
color: var(--fcx-ink);
background: #fff;
margin: 0;
}
body.fcx-site *,
body.fcx-site *::before,
body.fcx-site *::after { box-sizing: border-box; }
body.fcx-site h1,
body.fcx-site h2,
body.fcx-site h3,
body.fcx-site h4,
body.fcx-site h5,
body.fcx-site h6 {
font-family: var(--fcx-heading-font);
font-weight: 700;
color: var(--fcx-ink);
margin: 0;
line-height: 1.2;
}
body.fcx-site a { color: var(--fcx-navy); text-decoration: none; }
body.fcx-site a:hover { color: var(--fcx-navy-deep); }
body.fcx-site img { max-width: 100%; height: auto; display: block; }
body.fcx-site p { margin: 0 0 1em; }
body.fcx-site ul.fcx-plain { list-style: none; margin: 0; padding: 0; }
.fcx-container {
max-width: var(--fcx-container);
margin: 0 auto;
padding: 0 var(--fcx-gutter);
width: 100%;
}
.fcx-narrow { max-width: 900px; }
.fcx-mid { max-width: 1100px; }
.fcx-section { padding: 96px 0; }
.fcx-section--compact { padding: 56px 0; }
.fcx-section--md { padding: 80px 0; }
.fcx-section--paper { background: var(--fcx-paper); }
.fcx-section--dark { background: var(--fcx-charcoal-deep); }
.fcx-section--ink { background: var(--fcx-ink); }
.fcx-eyebrow {
color: var(--fcx-amber);
font-weight: 700;
letter-spacing: 0.14em;
font-size: 13px;
text-transform: uppercase;
margin-bottom: 14px;
}
.fcx-head-center { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.fcx-head-center p { color: var(--fcx-muted); font-size: 15.5px; line-height: 1.7; margin: 0; }
.fcx-section--dark .fcx-head-center p { color: var(--fcx-on-dark); }
.fcx-h2 { font-size: 36px; line-height: 1.15; margin-bottom: 14px; }
.fcx-h2--sm { font-size: 32px; }
.fcx-section--dark .fcx-h2,
.fcx-section--dark h2,
.fcx-section--dark h3 { color: #fff; }
.fcx-lead { color: var(--fcx-muted); font-size: 15px; line-height: 1.75; }
.fcx-section--dark .fcx-lead { color: var(--fcx-on-dark); }
/* Buttons */
.fcx-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: var(--fcx-radius-sm);
font-weight: 700;
font-size: 14px;
padding: 15px 28px;
border: 1px solid transparent;
cursor: pointer;
transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
line-height: 1;
text-align: center;
}
.fcx-btn:hover { transform: translateY(-1px); }
.fcx-btn--amber { background: var(--fcx-amber); color: #fff; }
.fcx-btn--amber:hover { background: var(--fcx-accent-strong); color: #fff; }
.fcx-btn--navy { background: var(--fcx-navy); color: #fff; }
.fcx-btn--navy:hover { background: var(--fcx-navy-deep); color: #fff; }
.fcx-btn--ghost-light { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; font-weight: 600; }
.fcx-btn--ghost-light:hover { background: rgba(255,255,255,.12); color: #fff; }
.fcx-btn--ghost-fill { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; font-weight: 600; }
.fcx-btn--ghost-fill:hover { background: rgba(255,255,255,.2); color: #fff; }
.fcx-btn--outline { background: transparent; border-color: var(--fcx-navy); color: var(--fcx-navy); font-weight: 600; padding: 14px 32px; }
.fcx-btn--outline:hover { background: var(--fcx-navy); color: #fff; }
.fcx-btn--line { background: #fff; border-color: var(--fcx-line-soft); color: var(--fcx-ink); font-weight: 600; }
.fcx-btn--line:hover { border-color: var(--fcx-navy); color: var(--fcx-navy); }
.fcx-btn--wa { background: var(--fcx-whatsapp); color: #fff; }
.fcx-btn--wa:hover { background: #1eb457; color: #fff; }
.fcx-btn--block { display: flex; width: 100%; }
.fcx-link-arrow { font-size: 13px; font-weight: 700; color: var(--fcx-navy); }
.fcx-link-arrow--amber { color: var(--fcx-amber); }
.fcx-link-arrow--amber:hover { color: var(--fcx-accent-soft); }
/* Reveal animation */
/*
* Scroll reveal is opt-in, armed by JavaScript. Content is visible by default,
* so a script failure can never leave a section (or a whole product grid)
* stranded at opacity 0.
*/
.fcx-reveal { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
.fcx-reveal.is-armed { opacity: 0; transform: translateY(18px); }
.fcx-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.fcx-reveal { opacity: 1; transform: none; transition: none; }
.fcx-btn:hover { transform: none; }
}
/* =========================================================================
3. Header
========================================================================= */
.fcx-topbar { background: var(--fcx-navy-deep); color: #c7d0e0; font-size: 12px; }
.fcx-topbar .fcx-container {
padding-top: 8px;
padding-bottom: 8px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.fcx-topbar__left { display: flex; gap: 20px; flex-wrap: wrap; }
.fcx-topbar__right { display: flex; gap: 16px; align-items: center; }
.fcx-topbar a { color: #c7d0e0; }
.fcx-topbar a:hover { color: #fff; }
.fcx-topbar__label { letter-spacing: 0.06em; }
.fcx-topbar__sep { opacity: .5; }
.fcx-topbar__quote { color: var(--fcx-amber) !important; font-weight: 600; }
.fcx-topbar__quote:hover { color: #f3ab5f !important; }
.fcx-header {
background: #fff;
border-bottom: 1px solid var(--fcx-line-soft);
position: relative;
z-index: 90;
}
.fcx-header.is-sticky { position: sticky; top: 0; }
.fcx-header .fcx-container {
padding-top: 18px;
padding-bottom: 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.fcx-brand { display: flex; align-items: center; gap: 12px; color: var(--fcx-ink); }
.fcx-brand:hover { color: var(--fcx-ink); }
.fcx-brand__mark {
width: 44px; height: 44px;
background: var(--fcx-navy);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--fcx-heading-font);
font-weight: 700; font-size: 18px;
border-radius: var(--fcx-radius-sm);
flex-shrink: 0;
}
.fcx-brand__logo { max-height: 52px; width: auto; }
.fcx-brand__name {
font-family: var(--fcx-heading-font);
font-weight: 700; font-size: 19px;
letter-spacing: .01em; line-height: 1;
white-space: nowrap;
}
.fcx-brand__tag { font-size: 11px; color: var(--fcx-muted); letter-spacing: .12em; margin-top: 3px; }
.fcx-nav { display: flex; align-items: center; gap: 28px; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.fcx-nav a { color: var(--fcx-ink); display: flex; align-items: center; gap: 6px; }
.fcx-nav a:hover,
.fcx-nav .current-menu-item > a,
.fcx-nav .current_page_item > a,
.fcx-nav .fcx-nav__item.is-active > a { color: var(--fcx-navy); }
.fcx-nav__item { position: relative; }
.fcx-nav__caret { transition: transform .2s ease; }
.fcx-nav__item.is-open .fcx-nav__caret { transform: rotate(180deg); }
.fcx-mega {
position: absolute;
top: 100%;
left: -40px;
background: #fff;
border: 1px solid var(--fcx-line-soft);
box-shadow: 0 20px 40px rgba(20,24,31,.12);
border-radius: var(--fcx-radius);
padding: 20px 24px;
display: grid;
grid-template-columns: repeat(3, 180px);
gap: 6px 28px;
z-index: 50;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.fcx-nav__item.is-open > .fcx-mega { opacity: 1; visibility: visible; transform: none; }
.fcx-mega a {
font-size: 13px;
font-weight: 500;
color: var(--fcx-ink-soft);
padding: 6px 0;
border-bottom: 1px solid #f1f2f4;
display: block;
}
.fcx-mega a:hover { color: var(--fcx-navy); }
.fcx-burger {
display: none;
width: 44px; height: 44px;
border: 1px solid var(--fcx-line-soft);
border-radius: var(--fcx-radius-sm);
background: #fff;
align-items: center; justify-content: center;
cursor: pointer;
flex-direction: column;
gap: 4px;
}
.fcx-burger span { display: block; width: 18px; height: 2px; background: var(--fcx-ink); }
/* =========================================================================
4. Footer
========================================================================= */
.fcx-footer { background: var(--fcx-ink); color: var(--fcx-on-dark); font-family: var(--fcx-body-font); }
.fcx-footer__grid {
padding: 64px var(--fcx-gutter) 32px;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: 48px;
max-width: var(--fcx-container);
margin: 0 auto;
width: 100%;
}
.fcx-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fcx-footer__mark {
width: 40px; height: 40px;
background: var(--fcx-navy); color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--fcx-heading-font); font-weight: 700; font-size: 16px;
border-radius: var(--fcx-radius-sm);
}
.fcx-footer__logo { max-height: 44px; width: auto; }
.fcx-footer__name { font-family: var(--fcx-heading-font); font-weight: 700; font-size: 18px; color: #fff; }
.fcx-footer__about { font-size: 13.5px; line-height: 1.7; color: var(--fcx-on-dark-soft); max-width: 320px; margin: 0 0 16px; }
.fcx-footer__socials { display: flex; gap: 10px; }
.fcx-footer__socials a {
width: 34px; height: 34px;
border: 1px solid var(--fcx-card-dark-line);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--fcx-on-dark);
}
.fcx-footer__title {
font-family: var(--fcx-heading-font); font-weight: 600; color: #fff;
font-size: 13px; letter-spacing: .08em; margin-bottom: 18px;
}
.fcx-footer__links { display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; }
.fcx-footer__links a,
.fcx-footer__links li a { color: var(--fcx-on-dark); }
.fcx-footer__links a:hover { color: var(--fcx-f-hover, var(--fcx-accent-soft)); }
.fcx-footer__links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fcx-footer__office { font-size: 13.5px; line-height: 1.8; color: var(--fcx-on-dark); }
.fcx-footer__office .fcx-footer__addr { margin-bottom: 10px; }
.fcx-footer__bottom { border-top: 1px solid var(--fcx-card-dark-line); }
.fcx-footer__bottom .fcx-container {
padding-top: 20px; padding-bottom: 20px;
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
font-size: 12.5px; color: #7d8496;
}
/* Floating contact buttons */
.fcx-floating {
position: fixed; right: 24px; bottom: 24px;
display: flex; flex-direction: column; gap: 12px;
z-index: 999;
}
.fcx-floating a {
width: 52px; height: 52px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 20px rgba(0,0,0,.25);
color: #fff;
transition: transform .18s ease;
}
.fcx-floating a:hover { transform: scale(1.06); color: #fff; }
.fcx-floating__wa { background: var(--fcx-whatsapp); }
.fcx-floating__mail { background: var(--fcx-navy); }
.fcx-floating__yt { background: var(--fcx-youtube); }
/* =========================================================================
5. Hero slider
========================================================================= */
.fcx-hero { position: relative; height: 640px; overflow: hidden; background: var(--fcx-charcoal-deep); }
.fcx-hero__slide {
position: absolute; inset: 0;
opacity: 0; pointer-events: none;
transition: opacity .6s ease;
}
.fcx-hero__slide.is-active { opacity: 1; pointer-events: auto; }
.fcx-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fcx-hero__scrim {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(90deg, rgba(10,14,24,.75) 0%, rgba(10,14,24,.35) 55%, rgba(10,14,24,.15) 100%);
}
.fcx-hero__inner {
position: absolute; left: 0; right: 0; top: 0; bottom: 0;
display: flex; flex-direction: column; justify-content: center;
max-width: var(--fcx-container); width: 100%; margin: 0 auto;
padding: 0 var(--fcx-gutter);
}
.fcx-hero__copy { max-width: 620px; }
.fcx-hero__eyebrow { color: var(--fcx-amber); font-weight: 700; letter-spacing: .14em; font-size: 13px; margin-bottom: 16px; }
.fcx-hero__title { font-size: 52px; line-height: 1.08; color: #fff; margin-bottom: 20px; }
.fcx-hero__sub { font-size: 17px; line-height: 1.6; color: var(--fcx-on-dark-strong); margin-bottom: 32px; max-width: 520px; }
.fcx-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.fcx-hero__dots {
position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
display: flex; gap: 10px; z-index: 10;
}
.fcx-hero__dot {
width: 10px; height: 6px; border-radius: 3px;
background: rgba(255,255,255,.4);
border: 0; padding: 0; cursor: pointer;
transition: all .3s ease;
}
.fcx-hero__dot.is-active { width: 28px; background: var(--fcx-amber); }
.fcx-hero__arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 46px; height: 46px; border-radius: 50%;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.3);
color: #fff; font-size: 22px; line-height: 1;
display: flex; align-items: center; justify-content: center;
cursor: pointer; z-index: 10;
}
.fcx-hero__arrow:hover { background: rgba(255,255,255,.24); }
.fcx-hero__arrow--prev { left: 24px; }
.fcx-hero__arrow--next { right: 24px; }
/* =========================================================================
6. Home sections
========================================================================= */
.fcx-promos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 56px 0; }
.fcx-promo { position: relative; height: 220px; border-radius: var(--fcx-radius); overflow: hidden; display: block; }
.fcx-promo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.fcx-promo:hover img { transform: scale(1.05); }
.fcx-promo__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,14,24,.7), rgba(10,14,24,.05)); pointer-events: none; }
.fcx-promo__copy { position: absolute; left: 28px; bottom: 24px; color: #fff; }
.fcx-promo__title { font-family: var(--fcx-heading-font); font-weight: 700; font-size: 22px; margin-bottom: 6px; color: #fff; }
.fcx-video-feature { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.fcx-video-feature__title { font-size: 34px; color: #fff; line-height: 1.2; margin-bottom: 18px; }
.fcx-video-feature p { color: var(--fcx-on-dark); font-size: 15.5px; line-height: 1.75; margin: 0; }
.fcx-video { position: relative; border-radius: 10px; overflow: hidden; height: 400px; background: #000; }
.fcx-video img, .fcx-video iframe, .fcx-video video { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.fcx-video__play {
position: absolute; inset: 0; background: rgba(10,14,24,.25);
display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; width: 100%;
}
.fcx-video__play span {
width: 84px; height: 84px; border-radius: 50%;
background: rgba(255,255,255,.92);
display: flex; align-items: center; justify-content: center;
transition: transform .2s ease;
}
.fcx-video__play span::after {
content: ''; width: 0; height: 0;
border-top: 14px solid transparent; border-bottom: 14px solid transparent;
border-left: 22px solid var(--fcx-ink); margin-left: 6px;
}
.fcx-video__play:hover span { transform: scale(1.06); }
.fcx-grid { display: grid; gap: 24px; }
.fcx-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fcx-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fcx-grid--4 { grid-template-columns: repeat(4, 1fr); }
.fcx-grid--5 { grid-template-columns: repeat(5, 1fr); }
.fcx-grid--tight { gap: 22px; }
.fcx-cat-card {
display: block;
border: 1px solid var(--fcx-line);
border-radius: var(--fcx-radius);
overflow: hidden;
background: #fff;
color: var(--fcx-ink);
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.fcx-cat-card:hover { border-color: #c9d0dd; box-shadow: 0 14px 30px rgba(20,24,31,.08); transform: translateY(-2px); color: var(--fcx-ink); }
.fcx-cat-card__media { height: 160px; overflow: hidden; }
.fcx-cat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.fcx-cat-card:hover .fcx-cat-card__media img { transform: scale(1.06); }
.fcx-cat-card__body { padding: 16px 18px; }
.fcx-cat-card__name { font-family: var(--fcx-heading-font); font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.fcx-cat-card__meta { font-size: 12.5px; color: var(--fcx-subtle); }
.fcx-cat-card--sm .fcx-cat-card__media { height: 140px; }
.fcx-cat-card--sm .fcx-cat-card__body { padding: 14px 16px; }
.fcx-cat-card--sm .fcx-cat-card__name { font-size: 14px; }
.fcx-cat-card--sm .fcx-cat-card__meta { font-size: 12px; }
.fcx-section-head {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 44px; gap: 24px; flex-wrap: wrap;
}
.fcx-section-head .fcx-h2 { font-size: 32px; margin-bottom: 0; }
.fcx-prod-card {
background: #fff;
border: 1px solid var(--fcx-line);
border-radius: var(--fcx-radius);
overflow: hidden;
display: flex; flex-direction: column;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.fcx-prod-card:hover { border-color: #c9d0dd; box-shadow: 0 14px 30px rgba(20,24,31,.08); transform: translateY(-2px); }
.fcx-prod-card__media { height: 200px; position: relative; overflow: hidden; display: block; }
.fcx-prod-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.fcx-prod-card:hover .fcx-prod-card__media img { transform: scale(1.05); }
.fcx-prod-card__badge {
position: absolute; top: 12px; left: 12px;
background: var(--fcx-navy); color: #fff;
font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 3px;
}
.fcx-prod-card__body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.fcx-prod-card__cat { font-size: 11.5px; color: var(--fcx-subtle); letter-spacing: .06em; margin-bottom: 6px; }
.fcx-prod-card__name { font-family: var(--fcx-heading-font); font-weight: 600; font-size: 15.5px; margin-bottom: 8px; }
.fcx-prod-card__name a { color: var(--fcx-ink); }
.fcx-prod-card__name a:hover { color: var(--fcx-navy); }
.fcx-prod-card__sku { font-size: 12px; color: var(--fcx-subtle); margin-bottom: 14px; }
.fcx-prod-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.fcx-tag { font-size: 10.5px; background: var(--fcx-surface-alt); color: var(--fcx-ink-soft); padding: 3px 8px; border-radius: 3px; }
.fcx-prod-card__actions { display: flex; gap: 8px; margin-top: auto; }
.fcx-prod-card__actions .fcx-btn { flex: 1; padding: 10px; font-size: 12.5px; font-weight: 600; }
.fcx-icon-btn {
width: 38px; height: 38px; flex-shrink: 0;
border: 1px solid var(--fcx-line-soft); border-radius: var(--fcx-radius-sm);
display: flex; align-items: center; justify-content: center;
color: var(--fcx-whatsapp);
}
.fcx-icon-btn:hover { border-color: var(--fcx-whatsapp); color: var(--fcx-whatsapp); }
.fcx-prod-card--sm .fcx-prod-card__media { height: 190px; }
.fcx-prod-card--sm .fcx-prod-card__body { padding: 16px; }
.fcx-prod-card--sm .fcx-prod-card__name { font-size: 14.5px; margin-bottom: 6px; }
.fcx-tabs-bar { display: flex; gap: 32px; margin-bottom: 44px; border-bottom: 1px solid var(--fcx-line); flex-wrap: wrap; }
.fcx-tabs-bar__btn {
padding: 0 0 16px; background: none; border: 0; border-bottom: 2px solid transparent;
font-family: var(--fcx-heading-font); font-weight: 700; font-size: 22px;
color: var(--fcx-subtle); cursor: pointer;
}
.fcx-tabs-bar__btn.is-active { color: var(--fcx-ink); border-bottom-color: var(--fcx-amber); }
.fcx-tab-panel { display: none; }
.fcx-tab-panel.is-active { display: grid; }
.fcx-pills { display: flex; justify-content: center; gap: 12px; margin-bottom: 44px; flex-wrap: wrap; }
.fcx-pill {
padding: 10px 22px; border-radius: 20px; font-size: 13.5px; font-weight: 600;
background: #fff; color: var(--fcx-ink-soft); border: 1px solid var(--fcx-line-soft);
cursor: pointer;
}
.fcx-pill.is-active { background: var(--fcx-navy); color: #fff; border-color: var(--fcx-navy); }
.fcx-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.fcx-split--reverse .fcx-split__media { order: 2; }
.fcx-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fcx-mosaic__tall { grid-row: span 2; height: 220px; }
.fcx-mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--fcx-radius); }
.fcx-mosaic__short { height: 102px; }
.fcx-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fcx-stat__value { font-family: var(--fcx-heading-font); font-weight: 700; font-size: 30px; color: var(--fcx-amber); }
.fcx-stat__label { font-size: 13px; color: var(--fcx-on-dark); margin-top: 4px; }
.fcx-section:not(.fcx-section--dark) .fcx-stat__label { color: var(--fcx-muted); }
.fcx-checklist { display: flex; flex-direction: column; gap: 16px; }
.fcx-check { display: flex; gap: 14px; align-items: flex-start; }
.fcx-check__dot {
width: 26px; height: 26px; border-radius: 50%;
background: var(--fcx-navy); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.fcx-check__title { font-weight: 600; font-size: 14.5px; margin-bottom: 2px; }
.fcx-check__desc { font-size: 13.5px; color: var(--fcx-subtle); }
.fcx-qc-images { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fcx-qc-images img { width: 100%; height: 180px; object-fit: cover; border-radius: var(--fcx-radius); }
.fcx-qc-images > div:nth-child(2) { margin-top: 32px; }
.fcx-chips { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; }
.fcx-chip {
background: #fff; border: 1px solid var(--fcx-line); border-radius: 6px;
padding: 14px 8px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--fcx-ink-soft);
}
.fcx-adv-card { padding: 32px; border: 1px solid var(--fcx-line); border-radius: var(--fcx-radius); background: #fff; }
.fcx-adv-card__icon {
width: 48px; height: 48px; border-radius: var(--fcx-radius);
background: var(--fcx-surface-alt);
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
}
.fcx-adv-card__icon i, .fcx-adv-card__icon span { width: 20px; height: 20px; background: var(--fcx-navy); border-radius: var(--fcx-radius-sm); display: block; }
.fcx-adv-card__icon img { width: 24px; height: 24px; object-fit: contain; }
.fcx-adv-card__title { font-family: var(--fcx-heading-font); font-weight: 600; font-size: 17px; margin-bottom: 10px; }
.fcx-adv-card__desc { font-size: 14px; color: var(--fcx-subtle); line-height: 1.65; }
.fcx-testimonial {
background: var(--fcx-card-dark); border: 1px solid var(--fcx-card-dark-line);
border-radius: var(--fcx-radius); padding: 32px;
}
.fcx-testimonial__stars { color: var(--fcx-amber); font-size: 22px; margin-bottom: 16px; letter-spacing: 2px; }
.fcx-testimonial__quote { color: var(--fcx-on-dark-strong); font-size: 14.5px; line-height: 1.75; margin-bottom: 24px; }
.fcx-testimonial__author { display: flex; align-items: center; gap: 12px; }
.fcx-testimonial__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.fcx-testimonial__name { color: #fff; font-weight: 600; font-size: 13.5px; }
.fcx-testimonial__meta { color: var(--fcx-subtle); font-size: 12.5px; }
.fcx-faq__item { border-bottom: 1px solid var(--fcx-line); }
.fcx-faq__q {
width: 100%; text-align: left; background: none; border: 0;
padding: 22px 4px; cursor: pointer;
display: flex; justify-content: space-between; align-items: center; gap: 20px;
font-family: var(--fcx-body-font); font-weight: 600; font-size: 15.5px; color: var(--fcx-ink);
}
.fcx-faq__icon { font-size: 20px; color: var(--fcx-subtle); flex-shrink: 0; }
.fcx-faq__a { font-size: 14px; color: var(--fcx-subtle); line-height: 1.7; max-width: 760px; padding: 0 4px 22px; display: none; }
.fcx-faq__item.is-open .fcx-faq__a { display: block; }
.fcx-news-card { background: #fff; border: 1px solid var(--fcx-line); border-radius: var(--fcx-radius); overflow: hidden; }
.fcx-news-card__media { height: 180px; overflow: hidden; }
.fcx-news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.fcx-news-card:hover .fcx-news-card__media img { transform: scale(1.05); }
.fcx-news-card__body { padding: 20px; }
.fcx-news-card__date { font-size: 12px; color: var(--fcx-subtle); margin-bottom: 8px; }
.fcx-news-card__title { font-family: var(--fcx-heading-font); font-weight: 600; font-size: 16px; margin-bottom: 10px; }
.fcx-news-card__title a { color: var(--fcx-ink); }
.fcx-news-card__title a:hover { color: var(--fcx-navy); }
.fcx-news-card__excerpt { font-size: 13.5px; color: var(--fcx-subtle); line-height: 1.6; }
.fcx-panel {
border-radius: var(--fcx-radius-lg); padding: 56px;
display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
}
.fcx-panel--navy { background: var(--fcx-navy); }
.fcx-panel--dark { background: var(--fcx-charcoal-deep); }
.fcx-panel--center { display: block; text-align: center; }
.fcx-panel__title { font-size: 28px; color: #fff; margin-bottom: 10px; }
.fcx-panel__text { color: #c9d5ea; font-size: 14.5px; margin: 0; }
.fcx-panel--dark .fcx-panel__text { color: var(--fcx-on-dark); }
.fcx-panel__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.fcx-panel--center .fcx-panel__actions { justify-content: center; margin-top: 28px; }
.fcx-panel .fcx-btn { white-space: nowrap; }
.fcx-cta-band { position: relative; padding: 100px var(--fcx-gutter); text-align: center; overflow: hidden; }
.fcx-cta-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fcx-cta-band__scrim { position: absolute; inset: 0; background: rgba(10,14,24,.72); pointer-events: none; }
.fcx-cta-band__inner { position: relative; max-width: 680px; margin: 0 auto; }
.fcx-cta-band__title { font-size: 34px; color: #fff; margin-bottom: 16px; }
.fcx-cta-band__text { color: var(--fcx-on-dark-strong); font-size: 15.5px; line-height: 1.7; margin-bottom: 32px; }
.fcx-contact-band { background: var(--fcx-ink); padding: 40px 0; }
.fcx-contact-band .fcx-container {
display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; color: #fff;
}
.fcx-contact-band__items { display: flex; gap: 40px; flex-wrap: wrap; font-size: 14px; }
.fcx-contact-band__label { color: var(--fcx-subtle); }
.fcx-contact-band a { color: #fff; }
.fcx-contact-band a.fcx-btn { color: var(--fcx-ink); }
/* =========================================================================
7. Page hero (dark breadcrumb header) + About hero
========================================================================= */
.fcx-page-hero { background: var(--fcx-charcoal-deep); padding: 64px 0 48px; }
.fcx-page-hero__crumbs { font-size: 13px; color: var(--fcx-subtle); margin-bottom: 16px; }
.fcx-page-hero__crumbs a { color: var(--fcx-subtle); }
.fcx-page-hero__crumbs a:hover { color: #fff; }
.fcx-page-hero__crumbs .current { color: var(--fcx-amber); }
.fcx-page-hero__title { font-size: 38px; color: #fff; margin-bottom: 12px; }
.fcx-page-hero__text { color: var(--fcx-on-dark); font-size: 15.5px; max-width: 680px; line-height: 1.7; }
.fcx-image-hero { position: relative; height: 420px; overflow: hidden; }
.fcx-image-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fcx-image-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,14,24,.78), rgba(10,14,24,.25)); }
.fcx-image-hero__inner {
position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
max-width: var(--fcx-container); width: 100%; margin: 0 auto; padding: 0 var(--fcx-gutter);
}
.fcx-image-hero__crumbs { font-size: 13px; color: var(--fcx-on-dark); margin-bottom: 16px; }
.fcx-image-hero__crumbs .current { color: var(--fcx-amber); }
.fcx-image-hero__title { font-size: 42px; color: #fff; max-width: 640px; }
/* =========================================================================
8. About page sections
========================================================================= */
.fcx-story__img { height: 420px; width: 100%; object-fit: cover; border-radius: var(--fcx-radius); }
.fcx-cap-card { background: var(--fcx-card-dark); border: 1px solid var(--fcx-card-dark-line); border-radius: var(--fcx-radius); overflow: hidden; }
.fcx-cap-card__media { height: 150px; }
.fcx-cap-card__media img { width: 100%; height: 100%; object-fit: cover; }
.fcx-cap-card__body { padding: 18px; }
.fcx-cap-card__title { font-family: var(--fcx-heading-font); font-weight: 600; font-size: 15px; color: #fff; margin-bottom: 8px; }
.fcx-cap-card__desc { font-size: 13px; color: var(--fcx-on-dark-soft); line-height: 1.6; }
.fcx-step { text-align: center; }
.fcx-step__num {
width: 56px; height: 56px; border-radius: 50%;
background: var(--fcx-surface-alt); color: var(--fcx-navy);
display: flex; align-items: center; justify-content: center;
font-family: var(--fcx-heading-font); font-weight: 700; font-size: 20px;
margin: 0 auto 16px;
}
.fcx-step__name { font-weight: 600; font-size: 14.5px; margin-bottom: 8px; }
.fcx-step__desc { font-size: 13px; color: var(--fcx-subtle); line-height: 1.6; }
.fcx-standards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fcx-standard { display: flex; gap: 10px; align-items: center; }
.fcx-standard__dot {
width: 22px; height: 22px; border-radius: 50%; background: var(--fcx-navy); color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0;
}
.fcx-standard__label { font-size: 13.5px; font-weight: 600; }
.fcx-quality__img { height: 380px; width: 100%; object-fit: cover; border-radius: var(--fcx-radius); }
.fcx-info-card { border: 1px solid var(--fcx-line); border-radius: var(--fcx-radius); padding: 36px; background: #fff; }
.fcx-info-card__title { font-family: var(--fcx-heading-font); font-weight: 700; font-size: 20px; margin-bottom: 14px; }
.fcx-info-card p { font-size: 14px; color: var(--fcx-subtle); line-height: 1.75; margin: 0; }
.fcx-continents { display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; margin-top: 48px; }
.fcx-continent__count { font-family: var(--fcx-heading-font); font-weight: 700; font-size: 36px; color: var(--fcx-amber); }
.fcx-continent__name { font-size: 13.5px; color: var(--fcx-on-dark); margin-top: 6px; }
.fcx-value { text-align: center; padding: 8px; }
.fcx-value__icon {
width: 52px; height: 52px; border-radius: var(--fcx-radius); background: var(--fcx-surface-alt);
display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.fcx-value__icon span { width: 20px; height: 20px; background: var(--fcx-navy); border-radius: var(--fcx-radius-sm); display: block; }
.fcx-value__icon img { width: 26px; height: 26px; object-fit: contain; }
.fcx-value__title { font-family: var(--fcx-heading-font); font-weight: 600; font-size: 15.5px; margin-bottom: 10px; }
.fcx-value__desc { font-size: 13.5px; color: var(--fcx-subtle); line-height: 1.65; }
.fcx-factory { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.fcx-factory__col { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.fcx-factory img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--fcx-radius); }
.fcx-factory__main { height: 340px; }
.fcx-factory__col img { height: 162px; }
/* =========================================================================
9. Products archive (WooCommerce)
========================================================================= */
.fcx-group-nav { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--fcx-line); }
.fcx-group-nav .fcx-container { display: flex; gap: 28px; overflow-x: auto; padding-top: 0; padding-bottom: 0; }
.fcx-group-nav a {
padding: 16px 0; font-size: 13.5px; font-weight: 600; color: var(--fcx-ink-soft);
white-space: nowrap; border-bottom: 2px solid transparent;
}
.fcx-group-nav a:hover, .fcx-group-nav a.is-active { color: var(--fcx-navy); border-bottom-color: var(--fcx-amber); }
.fcx-filters { background: var(--fcx-paper); border-bottom: 1px solid var(--fcx-line); padding: 24px 0; }
.fcx-filters__label { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--fcx-subtle); margin-bottom: 12px; }
.fcx-filters__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.fcx-filters select, .fcx-filters input[type="text"], .fcx-filters input[type="search"] {
padding: 10px 30px 10px 12px;
border: 1px solid var(--fcx-line-soft);
border-radius: var(--fcx-radius-sm);
font-size: 13px; color: var(--fcx-ink-soft); background-color: #fff;
font-family: var(--fcx-body-font); width: 100%;
appearance: none; -webkit-appearance: none;
}
.fcx-filters select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center;
}
.fcx-filters input[type="text"], .fcx-filters input[type="search"] { padding-right: 12px; }
.fcx-filters__actions { display: flex; gap: 12px; margin-top: 12px; }
.fcx-filters__actions .fcx-btn { padding: 10px 22px; font-size: 13px; }
.fcx-group { padding: 80px 0 64px; }
.fcx-group__banner { position: relative; height: 180px; border-radius: 10px; overflow: hidden; margin-bottom: 40px; }
.fcx-group__banner img { width: 100%; height: 100%; object-fit: cover; }
.fcx-group__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,14,24,.78), rgba(10,14,24,.2)); }
.fcx-group__copy { position: absolute; left: 32px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; }
.fcx-group__name { font-size: 26px; color: #fff; margin-bottom: 6px; }
.fcx-group__desc { color: var(--fcx-on-dark-strong); font-size: 14px; max-width: 520px; }
.fcx-results-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.fcx-results-head__count { font-size: 13.5px; color: var(--fcx-subtle); }
.woocommerce-pagination ul { display: flex; gap: 8px; list-style: none; padding: 0; margin: 48px 0 0; justify-content: center; }
.woocommerce-pagination a, .woocommerce-pagination span {
display: flex; align-items: center; justify-content: center;
min-width: 40px; height: 40px; padding: 0 12px;
border: 1px solid var(--fcx-line); border-radius: var(--fcx-radius-sm);
font-size: 13.5px; font-weight: 600; color: var(--fcx-ink-soft); background: #fff;
}
.woocommerce-pagination span.current { background: var(--fcx-navy); border-color: var(--fcx-navy); color: #fff; }
/* =========================================================================
10. Single product
========================================================================= */
.fcx-breadcrumb { font-size: 13px; color: var(--fcx-subtle); padding: 24px 0 0; }
.fcx-breadcrumb a { color: var(--fcx-subtle); }
.fcx-breadcrumb a:hover { color: var(--fcx-navy); }
.fcx-breadcrumb .current { color: var(--fcx-amber); }
.fcx-single { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; padding: 32px 0 80px; }
.fcx-gallery__main { height: 440px; border-radius: var(--fcx-radius); overflow: hidden; margin-bottom: 14px; background: var(--fcx-surface-alt); }
.fcx-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.fcx-gallery__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.fcx-gallery__thumb {
height: 80px; border-radius: 6px; overflow: hidden;
border: 2px solid transparent; cursor: pointer; padding: 0; background: none;
}
.fcx-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.fcx-gallery__thumb.is-active { border-color: var(--fcx-navy); }
.fcx-single__cat { font-size: 11.5px; color: var(--fcx-subtle); letter-spacing: .08em; margin-bottom: 10px; text-transform: uppercase; }
.fcx-single__title { font-size: 32px; margin-bottom: 10px; }
.fcx-single__meta { font-size: 13px; color: var(--fcx-subtle); margin-bottom: 24px; }
.fcx-single__desc { font-size: 14.5px; line-height: 1.75; color: var(--fcx-ink-soft); margin-bottom: 28px; }
.fcx-single__badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.fcx-badge { font-size: 12px; background: var(--fcx-surface-alt); color: var(--fcx-ink-soft); padding: 6px 12px; border-radius: var(--fcx-radius-sm); font-weight: 600; }
.fcx-single__actions { display: flex; gap: 12px; margin-bottom: 20px; }
.fcx-single__actions .fcx-btn { flex: 1; padding: 15px; }
.fcx-single__mail { display: block; text-align: center; border: 1px solid var(--fcx-line-soft); color: var(--fcx-ink); padding: 15px; border-radius: var(--fcx-radius-sm); font-weight: 600; font-size: 14px; margin-bottom: 24px; }
.fcx-single__mail:hover { border-color: var(--fcx-navy); color: var(--fcx-navy); }
.fcx-single__docs { display: flex; gap: 12px; flex-wrap: wrap; }
.fcx-single__docs a {
flex: 1; min-width: 180px; text-align: center;
border: 1px solid var(--fcx-line-soft); color: var(--fcx-ink-soft);
padding: 12px; border-radius: var(--fcx-radius-sm); font-weight: 600; font-size: 13px;
}
.fcx-single__docs a:hover { border-color: var(--fcx-navy); color: var(--fcx-navy); }
.fcx-single__price { font-family: var(--fcx-heading-font); font-size: 26px; font-weight: 700; color: var(--fcx-navy); margin-bottom: 20px; }
.fcx-single__price del { color: var(--fcx-subtle); font-size: 18px; font-weight: 500; margin-right: 8px; }
.fcx-ptabs { background: var(--fcx-paper); padding: 80px 0; }
.fcx-ptabs__nav { display: flex; gap: 8px; margin-bottom: 36px; flex-wrap: wrap; }
.fcx-ptabs__btn {
padding: 12px 22px; border-radius: 6px; font-size: 13.5px; font-weight: 600;
background: #fff; color: var(--fcx-ink-soft); border: 0; cursor: pointer;
font-family: var(--fcx-body-font);
}
.fcx-ptabs__btn.is-active { background: var(--fcx-navy); color: #fff; }
.fcx-ptabs__panel { display: none; }
.fcx-ptabs__panel.is-active { display: block; }
.fcx-spec-table { background: #fff; border: 1px solid var(--fcx-line); border-radius: var(--fcx-radius); overflow: hidden; }
.fcx-spec-row { display: grid; grid-template-columns: 280px 1fr; border-bottom: 1px solid #f0f1f4; }
.fcx-spec-row:last-child { border-bottom: 0; }
.fcx-spec-row__k { padding: 16px 24px; background: var(--fcx-paper); font-size: 13.5px; font-weight: 600; color: var(--fcx-ink-soft); }
.fcx-spec-row__v { padding: 16px 24px; font-size: 13.5px; color: var(--fcx-ink-soft); }
.fcx-compat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fcx-compat { background: #fff; border: 1px solid var(--fcx-line); border-radius: var(--fcx-radius); padding: 18px; }
.fcx-compat__name { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }
.fcx-compat__meta { font-size: 12.5px; color: var(--fcx-subtle); }
.fcx-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.fcx-feature {
display: flex; gap: 14px; align-items: flex-start;
background: #fff; border: 1px solid var(--fcx-line); border-radius: var(--fcx-radius); padding: 18px;
}
.fcx-feature__dot {
width: 24px; height: 24px; border-radius: 50%; background: var(--fcx-navy); color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;
}
.fcx-feature__text { font-size: 14px; color: var(--fcx-ink-soft); line-height: 1.6; }
.fcx-install-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fcx-install-grid img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--fcx-radius); }
.fcx-related__title { font-size: 28px; margin-bottom: 36px; }
/* =========================================================================
11. Catalog page
========================================================================= */
.fcx-cat-pills { display: flex; gap: 12px; margin-bottom: 40px; flex-wrap: wrap; }
.fcx-cat-pill {
padding: 12px 22px; border-radius: 6px; font-size: 13.5px; font-weight: 600;
background: #fff; color: var(--fcx-ink-soft); border: 1px solid var(--fcx-line-soft); cursor: pointer;
font-family: var(--fcx-body-font);
}
.fcx-cat-pill.is-active { background: var(--fcx-navy); color: #fff; border-color: var(--fcx-navy); }
.fcx-flip { background: var(--fcx-surface-alt); border-radius: var(--fcx-radius-lg); padding: 40px; box-shadow: 0 30px 60px rgba(20,24,31,.12); }
.fcx-flip__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 20px; flex-wrap: wrap; }
.fcx-flip__name { font-family: var(--fcx-heading-font); font-weight: 700; font-size: 18px; }
.fcx-flip__meta { font-size: 12.5px; color: var(--fcx-subtle); }
.fcx-flip__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fcx-flip__actions .fcx-btn { padding: 10px 18px; font-size: 13px; font-weight: 600; }
.fcx-flip__stage {
position: relative; background: #fff; border-radius: var(--fcx-radius); overflow: hidden;
height: 640px; display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 24px rgba(20,24,31,.08);
}
.fcx-flip__page { width: 100%; height: 100%; object-fit: contain; }
.fcx-flip__frame { width: 100%; height: 100%; border: 0; }
.fcx-flip__nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; border-radius: 50%;
background: rgba(20,24,31,.7); color: #fff; border: 0;
display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 22px;
}
.fcx-flip__nav:hover { background: rgba(20,24,31,.88); }
.fcx-flip__nav--prev { left: 16px; }
.fcx-flip__nav--next { right: 16px; }
.fcx-flip__dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.fcx-flip__dot { width: 8px; height: 6px; border-radius: 3px; background: var(--fcx-line-soft); border: 0; padding: 0; cursor: pointer; transition: all .25s ease; }
.fcx-flip__dot.is-active { width: 24px; background: var(--fcx-navy); }
.fcx-flip__viewer.is-fullscreen { background: #0f1523; padding: 24px; }
.fcx-flip__viewer.is-fullscreen .fcx-flip__stage { height: calc(100vh - 190px); }
.fcx-dl-card { background: #fff; border: 1px solid var(--fcx-line); border-radius: var(--fcx-radius); padding: 24px; }
.fcx-dl-card__icon {
width: 44px; height: 44px; border-radius: var(--fcx-radius);
background: var(--fcx-surface-alt); color: var(--fcx-navy);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 13px; margin-bottom: 16px;
}
.fcx-dl-card__name { font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }
.fcx-dl-card__meta { font-size: 12px; color: var(--fcx-subtle); margin-bottom: 16px; }
/* =========================================================================
12. Contact page
========================================================================= */
.fcx-contact-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; }
.fcx-contact-split__img { height: 460px; width: 100%; object-fit: cover; border-radius: var(--fcx-radius); }
.fcx-contact-info__title { font-size: 26px; margin-bottom: 24px; }
.fcx-contact-rows { display: flex; flex-direction: column; gap: 22px; }
.fcx-contact-row { display: flex; gap: 16px; }
.fcx-contact-row__icon {
width: 40px; height: 40px; border-radius: var(--fcx-radius);
background: var(--fcx-surface-alt); color: var(--fcx-navy);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fcx-contact-row__label { font-weight: 600; font-size: 14.5px; margin-bottom: 4px; }
.fcx-contact-row__value { font-size: 14px; color: var(--fcx-subtle); line-height: 1.6; }
.fcx-contact-row__value a { display: block; color: var(--fcx-navy); }
.fcx-contact-socials { display: flex; gap: 10px; }
.fcx-contact-socials a {
width: 36px; height: 36px; border: 1px solid var(--fcx-line-soft); border-radius: 50%;
display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.fcx-map { height: 380px; border-radius: var(--fcx-radius); overflow: hidden; border: 1px solid var(--fcx-line); }
.fcx-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.fcx-form-wrap { background: #fff; border: 1px solid var(--fcx-line); border-radius: 10px; padding: 40px; }
.fcx-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.fcx-form__field { margin-bottom: 20px; }
.fcx-form__row .fcx-form__field { margin-bottom: 0; }
.fcx-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--fcx-ink); }
.fcx-form input[type="text"],
.fcx-form input[type="email"],
.fcx-form input[type="tel"],
.fcx-form textarea {
width: 100%; padding: 12px 14px;
border: 1px solid var(--fcx-line-soft); border-radius: var(--fcx-radius-sm);
font-size: 14px; font-family: var(--fcx-body-font); color: var(--fcx-ink); background: #fff;
}
.fcx-form textarea { resize: vertical; min-height: 130px; }
.fcx-form input:focus, .fcx-form textarea:focus { outline: 2px solid rgba(34,64,122,.25); border-color: var(--fcx-navy); }
.fcx-form__submit { width: 100%; padding: 15px; font-size: 14.5px; border: 0; }
.fcx-form__hp { position: absolute; left: -9999px; }
.fcx-form__note { margin-top: 14px; font-size: 12.5px; color: var(--fcx-subtle); text-align: center; }
.fcx-alert { padding: 20px; border-radius: var(--fcx-radius); text-align: center; font-weight: 600; margin-bottom: 24px; }
.fcx-alert--ok { background: #eafff1; border: 1px solid #baf0cf; color: #146c3e; }
.fcx-alert--err { background: #fff2f2; border: 1px solid #f3c9c9; color: #98262b; }
.fcx-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fcx-quick__card {
border: 1px solid var(--fcx-line); border-radius: var(--fcx-radius);
padding: 28px; text-align: center; display: block; background: #fff;
transition: border-color .2s ease, transform .2s ease;
}
.fcx-quick__card:hover { border-color: var(--fcx-navy); transform: translateY(-2px); }
.fcx-quick__icon { display: flex; justify-content: center; margin-bottom: 12px; color: var(--fcx-navy); }
.fcx-quick__title { font-weight: 600; font-size: 15px; margin-bottom: 6px; color: var(--fcx-ink); }
.fcx-quick__value { font-size: 13.5px; color: var(--fcx-subtle); }
/* =========================================================================
13. Blocksy resets — let our full-width sections breathe
========================================================================= */
.fcx-site .fcx-entry-content > .alignfull,
.fcx-site .fcx-entry-content > .fcx-block { width: 100%; }
.fcx-site .ct-container, .fcx-site .ct-container-full { max-width: none; padding: 0; }
.fcx-site #main-container, .fcx-site .site-main { margin: 0; padding: 0; }
.fcx-site article.post, .fcx-site .entry-content { margin: 0; }
/* ==========================================================================
Elementor compatibility
--------------------------------------------------------------------------
FCX sections carry their own container and vertical rhythm, so when one is
placed inside an Elementor section the wrapper must contribute no width
constraint, padding or gap of its own. Without this, Elementor's default
1140px boxed column nests inside the 1360px FCX container and every section
renders visibly narrower than the approved design.
========================================================================== */
.fcx-site .elementor-section.elementor-section-full_width > .elementor-container { max-width: none; }
.fcx-site .elementor-widget-wrap:has(> .elementor-widget[data-widget_type^="fcx-"]) { padding: 0; }
.fcx-site .elementor-widget[data-widget_type^="fcx-"],
.fcx-site .elementor-widget[data-widget_type^="fcx-"] > .elementor-widget-container {
margin: 0;
padding: 0;
width: 100%;
}
.fcx-site .elementor-widget[data-widget_type^="fcx-"] > .elementor-widget-container > .fcx-block { width: 100%; }
/* Elementor resets list styles on the front end; FCX lists opt back out. */
.fcx-site .elementor-widget[data-widget_type^="fcx-"] ul,
.fcx-site .elementor-widget[data-widget_type^="fcx-"] ol { list-style: none; margin: 0; padding: 0; }
/* Editor-only hint shown when a section has no content yet. */
.fcx-elementor-empty {
border: 1px dashed var(--fcx-line);
border-radius: var(--fcx-radius-sm);
color: var(--fcx-subtle);
font-family: var(--fcx-body-font);
font-size: 14px;
padding: 40px 32px;
text-align: center;
}
/* Editor preview niceties */
.editor-styles-wrapper .fcx-hero { height: 480px; }
.wp-block[data-type^="fcx/"] { max-width: none !important; }
/* =========================================================================
14. Responsive
========================================================================= */
@media (max-width: 1200px) {
.fcx-grid--4 { grid-template-columns: repeat(3, 1fr); }
.fcx-grid--5 { grid-template-columns: repeat(3, 1fr); }
.fcx-chips { grid-template-columns: repeat(6, 1fr); }
.fcx-filters__grid { grid-template-columns: repeat(4, 1fr); }
.fcx-compat-grid { grid-template-columns: repeat(3, 1fr); }
.fcx-nav { gap: 18px; font-size: 13.5px; }
}
@media (max-width: 1024px) {
.fcx-nav, .fcx-header .fcx-header__cta { display: none; }
.fcx-burger { display: flex; }
.fcx-header.is-open .fcx-nav {
display: flex; flex-direction: column; align-items: flex-start;
position: absolute; top: 100%; left: 0; right: 0;
background: #fff; border-bottom: 1px solid var(--fcx-line);
padding: 16px var(--fcx-gutter) 24px; gap: 4px; z-index: 80;
max-height: 74vh; overflow-y: auto;
}
.fcx-header.is-open .fcx-nav > a,
.fcx-header.is-open .fcx-nav__item > a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--fcx-line); }
.fcx-header.is-open .fcx-nav__item { width: 100%; }
.fcx-mega {
position: static; opacity: 1; visibility: visible; transform: none;
display: none; grid-template-columns: 1fr; box-shadow: none; border: 0;
padding: 4px 0 8px 12px;
}
.fcx-nav__item.is-open > .fcx-mega { display: grid; }
.fcx-hero { height: 540px; }
.fcx-hero__title { font-size: 40px; }
.fcx-split, .fcx-video-feature, .fcx-single, .fcx-contact-split { grid-template-columns: 1fr; gap: 36px; }
.fcx-split--reverse .fcx-split__media { order: 0; }
.fcx-factory { grid-template-columns: 1fr 1fr; }
.fcx-factory__main { height: 300px; grid-column: 1 / -1; }
.fcx-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
.fcx-gallery__main { height: 360px; }
.fcx-flip__stage { height: 520px; }
}
@media (max-width: 782px) {
:root { --fcx-gutter: 20px; }
.fcx-section { padding: 64px 0; }
.fcx-section--md { padding: 56px 0; }
.fcx-grid--3, .fcx-grid--4, .fcx-grid--5 { grid-template-columns: repeat(2, 1fr); }
.fcx-promos { grid-template-columns: 1fr; padding: 40px 0; }
.fcx-hero { height: 480px; }
.fcx-hero__title { font-size: 32px; }
.fcx-hero__sub { font-size: 15px; }
.fcx-h2, .fcx-page-hero__title, .fcx-image-hero__title { font-size: 28px; }
.fcx-chips { grid-template-columns: repeat(3, 1fr); }
.fcx-filters__grid { grid-template-columns: repeat(2, 1fr); }
.fcx-compat-grid, .fcx-feature-grid, .fcx-install-grid, .fcx-quick, .fcx-standards { grid-template-columns: 1fr; }
.fcx-spec-row { grid-template-columns: 1fr; }
.fcx-spec-row__k { border-bottom: 1px solid #f0f1f4; }
.fcx-panel { padding: 36px 24px; }
.fcx-cta-band { padding: 72px var(--fcx-gutter); }
.fcx-form__row { grid-template-columns: 1fr; gap: 0; }
.fcx-form__row .fcx-form__field { margin-bottom: 20px; }
.fcx-form-wrap { padding: 24px; }
.fcx-flip { padding: 20px; }
.fcx-flip__stage { height: 420px; }
.fcx-mosaic__tall { height: 180px; }
.fcx-mosaic__short { height: 82px; }
.fcx-continents { gap: 28px; }
.fcx-footer__grid { grid-template-columns: 1fr; }
.fcx-floating a { width: 46px; height: 46px; }
.fcx-gallery__main { height: 280px; }
.fcx-story__img, .fcx-quality__img, .fcx-contact-split__img { height: 280px; }
.fcx-factory { grid-template-columns: 1fr; }
.fcx-factory__col img, .fcx-factory__main { height: 200px; }
.fcx-single__actions { flex-direction: column; }
.fcx-tabs-bar { gap: 20px; }
.fcx-tabs-bar__btn { font-size: 18px; }
}
@media (max-width: 520px) {
.fcx-grid--3, .fcx-grid--4, .fcx-grid--5 { grid-template-columns: 1fr; }
.fcx-chips { grid-template-columns: repeat(2, 1fr); }
.fcx-gallery__thumbs { grid-template-columns: repeat(3, 1fr); }
.fcx-topbar .fcx-container { justify-content: center; text-align: center; }
.fcx-brand__tag { display: none; }
}
/* ==========================================================================
Wrappers, widget areas and WooCommerce chrome
========================================================================== */
.fcx-main {
display: block;
min-height: 40vh;
}
.fcx-footer-widget {
margin-bottom: 24px;
font-size: 14px;
line-height: 1.7;
color: rgba(255, 255, 255, .62);
}
.fcx-footer-widget .widget-title,
.fcx-footer-widget h2,
.fcx-footer-widget h3 {
font-family: var(--fcx-heading-font);
font-size: 13px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: #fff;
margin: 0 0 14px;
}
.fcx-footer-widget ul {
list-style: none;
margin: 0;
padding: 0;
}
.fcx-footer-widget a {
color: rgba(255, 255, 255, .62);
text-decoration: none;
}
.fcx-footer-widget a:hover {
color: #fff;
}
.fcx-shop-widget {
margin-bottom: 16px;
font-size: 14px;
}
.fcx-shop-widget .widget-title {
font-size: 13px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--fcx-ink);
margin: 0 0 10px;
}
/* Catalog ordering select on a filtered shop archive. */
.fcx-results-head__sort select,
.fcx-results-head__sort .orderby {
appearance: none;
-webkit-appearance: none;
background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234b5563'/%3E%3C/svg%3E") no-repeat right 14px center;
border: 1px solid var(--fcx-line);
border-radius: 4px;
color: var(--fcx-ink);
font-family: var(--fcx-body-font);
font-size: 14px;
padding: 10px 38px 10px 14px;
cursor: pointer;
}
.fcx-results-head__sort form {
margin: 0;
}
.fcx-results-head__sort select:focus {
outline: 2px solid var(--fcx-navy);
outline-offset: 1px;
}
/* WooCommerce notices, kept in the FCX visual language for store mode. */
.fcx-site .woocommerce-notices-wrapper .woocommerce-message,
.fcx-site .woocommerce-notices-wrapper .woocommerce-info,
.fcx-site .woocommerce-notices-wrapper .woocommerce-error {
background: var(--fcx-surface-alt);
border-left: 3px solid var(--fcx-navy);
border-radius: 4px;
color: var(--fcx-ink);
font-size: 14.5px;
list-style: none;
margin: 0 0 20px;
padding: 14px 18px;
}
.fcx-site .woocommerce-notices-wrapper .woocommerce-error {
border-left-color: #b42318;
}
/* ==========================================================================
Global logo (Customizer-driven, header + footer)
========================================================================== */
.fcx-brand__names,
.fcx-footer__names {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.fcx-logo {
display: block;
max-width: 100%;
height: auto;
object-fit: contain;
}
.fcx-header .fcx-logo { max-height: 52px; width: auto; }
.fcx-footer .fcx-logo { max-height: 44px; width: auto; }
/* A light-on-dark fallback when only one logo is supplied for both places. */
.fcx-footer__logo { max-height: 44px; width: auto; }
@media (max-width: 782px) {
.fcx-header .fcx-logo { max-height: 40px; }
.fcx-footer .fcx-logo { max-height: 38px; }
}
/* ==========================================================================
Independent header / footer theming
--------------------------------------------------------------------------
Header and footer read their own variable namespaces (--fcx-h-*, --fcx-f-*)
which the Customizer scopes to .fcx-header / .fcx-footer. Restyling one
therefore cannot affect the other, or the page content between them.
Each falls back to the original design token when no override is set.
========================================================================== */
.fcx-topbar {
background: var(--fcx-h-top-bg, var(--fcx-navy-deep));
color: var(--fcx-h-top-text, #c3cad8);
}
.fcx-topbar a { color: var(--fcx-h-top-link, #fff); }
.fcx-header {
background: var(--fcx-h-bg, #fff);
border-bottom: 1px solid var(--fcx-h-border, var(--fcx-line));
}
.fcx-header .fcx-nav__link,
.fcx-header .fcx-brand__name { color: var(--fcx-h-text, var(--fcx-ink)); }
.fcx-header .fcx-nav__link:hover,
.fcx-header .fcx-nav__item.is-open > .fcx-nav__link,
.fcx-header .fcx-nav__item.current-menu-item > .fcx-nav__link { color: var(--fcx-h-hover, var(--fcx-navy)); }
.fcx-header .fcx-header__cta {
background: var(--fcx-h-cta-bg, var(--fcx-navy));
color: var(--fcx-h-cta-text, #fff);
}
.fcx-footer { background: var(--fcx-f-bg, var(--fcx-ink)); color: var(--fcx-f-text, var(--fcx-subtle)); }
.fcx-footer__title { color: var(--fcx-f-heading, #fff); }
.fcx-footer__links a, .fcx-footer__about { color: var(--fcx-f-link, var(--fcx-subtle)); }
.fcx-footer__links a:hover { color: var(--fcx-f-hover, #fff); }
.fcx-footer__bar { background: var(--fcx-f-bar-bg, var(--fcx-charcoal-deep)); }
/* ==========================================================================
Social icons — recognisable brand colours by default
========================================================================== */
.fcx-footer__socials { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fcx-social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex: 0 0 38px;
border-radius: 50%;
color: #fff;
background: rgba(255, 255, 255, .08);
transition: transform .18s ease, filter .18s ease;
}
.fcx-social svg { display: block; }
.fcx-social:hover { transform: translateY(-2px); filter: brightness(1.08); color: #fff; }
.fcx-social--wa { background: var(--fcx-whatsapp); }
.fcx-social--mail { background: var(--fcx-email-blue); }
.fcx-social--yt { background: var(--fcx-youtube); }
.fcx-social--in { background: #0A66C2; }
.fcx-social--ig { background: #C13584; }
.fcx-social--fb { background: #1877F2; }
/* ==========================================================================
Floating contact buttons
========================================================================== */
.fcx-floating a {
color: #fff;
box-shadow: 0 6px 20px rgba(15, 21, 35, .22);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.fcx-floating a:hover {
transform: translateY(-2px) scale(1.04);
box-shadow: 0 10px 26px rgba(15, 21, 35, .3);
filter: brightness(1.06);
color: #fff;
}
.fcx-floating a svg { display: block; }
/* Brand defaults; overridden by the Customizer's inline CSS when changed. */
.fcx-floating__wa { background: var(--fcx-whatsapp); }
.fcx-floating__mail { background: var(--fcx-email-blue); }
.fcx-floating__yt { background: var(--fcx-youtube); }
@media (max-width: 782px) {
.fcx-floating { z-index: 99; }
.fcx-floating a { box-shadow: 0 4px 14px rgba(15, 21, 35, .26); }
}
/* ==========================================================================
Header polish — modern B2B navigation
========================================================================== */
.fcx-nav__link {
position: relative;
transition: color .18s ease;
}
/* Understated active/hover indicator rather than a heavy underline. */
.fcx-nav__link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 2px;
background: var(--fcx-h-hover, var(--fcx-navy));
transform: scaleX(0);
transform-origin: center;
transition: transform .22s ease;
}
.fcx-nav__item:hover > .fcx-nav__link::after,
.fcx-nav__item.is-open > .fcx-nav__link::after,
.fcx-nav__item.current-menu-item > .fcx-nav__link::after,
.fcx-nav__item.current-menu-parent > .fcx-nav__link::after { transform: scaleX(1); }
.fcx-header__cta { transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
.fcx-header__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(34, 64, 122, .28); }
.fcx-mega { transition: opacity .18s ease, transform .18s ease; }
/* ==========================================================================
Product gallery — arrows, active thumb, transition, lightbox
========================================================================== */
.fcx-gallery__main { position: relative; overflow: hidden; border-radius: var(--fcx-radius-sm); }
.fcx-gallery__main img { cursor: zoom-in; transition: opacity .18s ease, transform .4s ease; }
.fcx-gallery__main img.is-swapping { opacity: 0; }
.fcx-gallery__main:hover img { transform: scale(1.02); }
.fcx-gallery__arrow,
.fcx-gallery__zoom {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--fcx-line);
border-radius: 50%;
background: rgba(255, 255, 255, .94);
color: var(--fcx-ink);
cursor: pointer;
opacity: 0;
transition: opacity .2s ease, background .2s ease, transform .2s ease;
z-index: 2;
}
.fcx-gallery__arrow { top: 50%; transform: translateY(-50%); font-size: 24px; line-height: 1; }
.fcx-gallery__arrow--prev { left: 12px; }
.fcx-gallery__arrow--next { right: 12px; }
.fcx-gallery__zoom { right: 12px; bottom: 12px; }
.fcx-gallery__main:hover .fcx-gallery__arrow,
.fcx-gallery__main:hover .fcx-gallery__zoom,
.fcx-gallery__arrow:focus-visible,
.fcx-gallery__zoom:focus-visible { opacity: 1; }
.fcx-gallery__arrow:hover, .fcx-gallery__zoom:hover { background: #fff; border-color: var(--fcx-navy); color: var(--fcx-navy); }
.fcx-gallery__arrow--prev:hover { transform: translateY(-50%) translateX(-2px); }
.fcx-gallery__arrow--next:hover { transform: translateY(-50%) translateX(2px); }
.fcx-gallery__count {
position: absolute;
left: 12px;
bottom: 12px;
background: rgba(15, 21, 35, .74);
color: #fff;
border-radius: 20px;
font-size: 12px;
padding: 5px 12px;
z-index: 2;
}
.fcx-gallery__thumb {
position: relative;
border: 1px solid var(--fcx-line);
border-radius: var(--fcx-radius-sm);
overflow: hidden;
padding: 0;
background: none;
cursor: pointer;
transition: border-color .18s ease, transform .18s ease;
}
.fcx-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fcx-gallery__thumb:hover { border-color: var(--fcx-subtle); transform: translateY(-2px); }
.fcx-gallery__thumb.is-active { border-color: var(--fcx-navy); box-shadow: 0 0 0 2px rgba(34, 64, 122, .18); }
/* Lightbox */
.fcx-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(9, 14, 26, .92);
padding: 40px;
animation: fcx-fade .2s ease;
}
@keyframes fcx-fade { from { opacity: 0; } to { opacity: 1; } }
.fcx-lightbox__img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 4px; }
.fcx-lightbox__close,
.fcx-lightbox__nav {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, .25);
background: rgba(255, 255, 255, .08);
color: #fff;
cursor: pointer;
border-radius: 50%;
transition: background .18s ease;
}
.fcx-lightbox__close { top: 24px; right: 24px; width: 44px; height: 44px; font-size: 26px; }
.fcx-lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 32px; }
.fcx-lightbox__nav--prev { left: 24px; }
.fcx-lightbox__nav--next { right: 24px; }
.fcx-lightbox__close:hover, .fcx-lightbox__nav:hover { background: rgba(255, 255, 255, .2); }
/* Video */
.fcx-video__el { display: block; width: 100%; height: 100%; object-fit: cover; }
.fcx-video__empty {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
min-height: 260px;
padding: 32px;
text-align: center;
color: rgba(255, 255, 255, .55);
font-size: 14px;
}
/* Centred copyright in the footer bottom bar */
.fcx-footer__bottom .fcx-container { justify-content: center; text-align: center; }
@media (max-width: 782px) {
.fcx-gallery__arrow, .fcx-gallery__zoom { opacity: 1; width: 36px; height: 36px; }
.fcx-lightbox { padding: 16px; }
.fcx-lightbox__nav { width: 42px; height: 42px; font-size: 26px; }
.fcx-lightbox__nav--prev { left: 8px; }
.fcx-lightbox__nav--next { right: 8px; }
.fcx-lightbox__close { top: 12px; right: 12px; }
}
/* ==========================================================================
Footer readability (no orange), map label, product action buttons
========================================================================== */
/* Contact details in the footer must be easy to read on the dark background. */
.fcx-footer__contact,
.fcx-footer__contact a,
.fcx-footer address,
.fcx-footer__links a {
color: var(--fcx-f-link, rgba(255, 255, 255, .82));
font-weight: 500;
}
.fcx-footer__contact a,
.fcx-footer a[href^="tel:"],
.fcx-footer a[href^="mailto:"] {
color: #fff;
font-weight: 600;
text-decoration: none;
transition: color .18s ease;
}
.fcx-footer a[href^="tel:"]:hover,
.fcx-footer a[href^="mailto:"]:hover,
.fcx-footer__links a:hover {
color: var(--fcx-f-hover, var(--fcx-accent-soft));
}
/* Underline-on-hover keeps links obvious without relying on colour alone. */
.fcx-footer__links a { position: relative; }
.fcx-footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fcx-footer__copy { font-weight: 500; }
/* Map caption — identifies the location without needing map interaction. */
.fcx-map__label {
display: flex;
align-items: center;
gap: 10px;
margin-top: 14px;
padding: 14px 18px;
background: var(--fcx-surface-alt);
border: 1px solid var(--fcx-line);
border-radius: var(--fcx-radius-sm);
color: var(--fcx-muted);
font-size: 14px;
}
.fcx-map__label strong { color: var(--fcx-ink); }
.fcx-map__label svg { color: var(--fcx-navy); flex: 0 0 auto; }
/* Product actions: labelled WhatsApp button, e-mail link with icon. */
.fcx-btn--wa { background: var(--fcx-whatsapp); color: #fff; }
.fcx-btn--wa:hover { background: #1da851; color: #fff; }
.fcx-btn--icon { display: inline-flex; align-items: center; gap: 8px; }
.fcx-btn--icon svg { flex: 0 0 auto; }
.fcx-single__mail {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
color: var(--fcx-navy);
font-weight: 600;
font-size: 14.5px;
text-decoration: none;
transition: color .18s ease;
}
.fcx-single__mail:hover { color: var(--fcx-accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.fcx-single__mail svg { color: var(--fcx-email-blue); }
/* Product card action row alignment. */
.fcx-prod-card__actions { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.fcx-prod-card__actions .fcx-btn { flex: 1 1 auto; justify-content: center; text-align: center; }
/* Video frame — integrated, modern, no hard edges. */
.fcx-video {
position: relative;
overflow: hidden;
border-radius: var(--fcx-radius-lg, 12px);
box-shadow: 0 24px 60px rgba(9, 14, 26, .38);
background: #0b0f18;
}
.fcx-video::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px solid rgba(255, 255, 255, .08);
pointer-events: none;
}
@media (max-width: 782px) {
.fcx-prod-card__actions .fcx-btn { flex: 1 1 100%; }
.fcx-map__label { font-size: 13px; align-items: flex-start; }
}
/* ==========================================================================
PRODUCTS PAGE — approved catalogue layout
Dark navy rail + white main area on subtle silver. Navy / white / silver only.
========================================================================== */
.fcx-shop { background: var(--fcx-paper); }
.fcx-shop__inner {
display: grid;
grid-template-columns: 268px minmax(0, 1fr);
align-items: stretch;
gap: 0;
}
/* ---------------------------------------------------------------- the rail */
.fcx-shop__aside {
align-self: stretch;
display: flex;
flex-direction: column;
background: var(--fcx-charcoal-deep);
}
.fcx-shop__rail { flex: 1 1 auto; display: flex; flex-direction: column; }
.fcx-shop__toggle { display: none; }
.fcx-rail {
background: var(--fcx-charcoal-deep);
flex: 1 1 auto;
padding: 26px 18px 34px;
color: rgba(255, 255, 255, .78);
}
.fcx-rail__logo { display: block; margin-bottom: 26px; text-decoration: none; }
.fcx-rail__logo .fcx-footer__mark,
.fcx-rail__logo .fcx-logo { max-height: 42px; width: auto; }
.fcx-rail__logo .fcx-footer__names { gap: 1px; }
.fcx-rail__logo .fcx-footer__name { color: #fff; font-size: 17px; font-weight: 700; letter-spacing: .04em; }
.fcx-rail__head {
font-family: var(--fcx-heading-font);
font-size: 11px;
font-weight: 700;
letter-spacing: .16em;
color: rgba(255, 255, 255, .5);
margin-bottom: 12px;
}
.fcx-rail__list { list-style: none; margin: 0 0 22px; padding: 0; }
.fcx-rail__list li + li { border-top: 1px solid rgba(255, 255, 255, .07); }
.fcx-rail__item {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 12px;
border-radius: 8px;
color: rgba(255, 255, 255, .84);
font-size: 14.5px;
font-weight: 500;
text-decoration: none;
transition: background .16s ease, color .16s ease;
}
.fcx-rail__icon { display: inline-flex; flex: 0 0 auto; color: rgba(255, 255, 255, .72); }
.fcx-rail__label { flex: 1 1 auto; line-height: 1.3; }
.fcx-rail__chev { opacity: 0; transition: opacity .16s ease, transform .16s ease; }
.fcx-rail__item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.fcx-rail__item:hover .fcx-rail__icon { color: #fff; }
.fcx-rail__item:hover .fcx-rail__chev { opacity: .7; }
.fcx-rail__item.is-active {
background: linear-gradient(90deg, var(--fcx-navy) 0%, #2b529b 100%);
color: #fff;
box-shadow: 0 8px 20px rgba(34, 64, 122, .4);
}
.fcx-rail__item.is-active .fcx-rail__icon { color: #fff; }
.fcx-rail__item.is-active .fcx-rail__chev { opacity: 1; }
/* help card */
.fcx-rail__help {
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 10px;
padding: 18px 16px;
margin-bottom: 20px;
}
.fcx-rail__help-top { display: flex; align-items: center; gap: 9px; color: #fff; font-family: var(--fcx-heading-font); font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.fcx-rail__help p { font-size: 13px; line-height: 1.6; margin: 0 0 14px; color: rgba(255, 255, 255, .68); }
.fcx-rail__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--fcx-navy);
color: #fff;
border-radius: 6px;
padding: 11px 16px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background .16s ease;
}
.fcx-rail__cta:hover { background: #2b529b; color: #fff; }
/* service notes */
.fcx-rail__notes { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 18px; }
.fcx-rail__note { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 16px; }
.fcx-rail__note-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; flex: 0 0 30px;
border-radius: 50%;
background: rgba(255, 255, 255, .08);
color: #fff;
}
.fcx-rail__note strong { display: block; color: #fff; font-size: 13.5px; font-weight: 600; }
.fcx-rail__note em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .6); }
/* ---------------------------------------------------------------- main col */
.fcx-shop__main { min-width: 0; padding: 0 0 72px; }
/* hero */
.fcx-phero { position: relative; overflow: hidden; min-height: 250px; display: flex; align-items: center; }
.fcx-phero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fcx-phero__scrim {
position: absolute; inset: 0;
background: linear-gradient(100deg, #fff 0%, rgba(255, 255, 255, .95) 34%, rgba(255, 255, 255, .55) 52%, rgba(255, 255, 255, 0) 74%);
}
.fcx-phero__copy { position: relative; padding: 42px 40px; max-width: 620px; }
.fcx-phero__crumbs { font-size: 13px; color: var(--fcx-muted); margin-bottom: 12px; }
.fcx-phero__crumbs a { color: var(--fcx-muted); text-decoration: none; }
.fcx-phero__crumbs a:hover { color: var(--fcx-navy); }
.fcx-phero__title {
font-family: var(--fcx-heading-font);
font-size: 46px;
line-height: 1.05;
font-weight: 700;
color: var(--fcx-ink);
margin: 0 0 12px;
}
.fcx-phero__text { font-size: 15.5px; line-height: 1.6; color: var(--fcx-muted); margin: 0; max-width: 420px; }
/* family cards */
.fcx-famcards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 14px;
padding: 26px 32px 0;
}
.fcx-famcard {
position: relative;
display: block;
border-radius: 10px;
overflow: hidden;
background: var(--fcx-navy-deep);
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease;
}
.fcx-famcard:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(15, 21, 35, .22); }
.fcx-famcard__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fcx-surface-alt); }
.fcx-famcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.fcx-famcard:hover .fcx-famcard__media img { transform: scale(1.05); }
.fcx-famcard__panel {
position: relative;
display: block;
background: linear-gradient(180deg, var(--fcx-navy-deep) 0%, #0f1e3d 100%);
padding: 30px 16px 18px;
min-height: 128px;
}
.fcx-famcard__icon {
position: absolute;
top: -22px;
left: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--fcx-navy);
border: 3px solid var(--fcx-navy-deep);
color: #fff;
}
.fcx-famcard__name {
display: block;
font-family: var(--fcx-heading-font);
font-size: 14px;
font-weight: 700;
letter-spacing: .02em;
text-transform: uppercase;
color: #fff;
margin-bottom: 6px;
line-height: 1.25;
}
.fcx-famcard__desc { display: block; font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .66); padding-right: 34px; }
.fcx-famcard__go {
position: absolute;
right: 14px;
bottom: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .3);
color: #fff;
transition: background .16s ease, transform .16s ease;
}
.fcx-famcard:hover .fcx-famcard__go { background: var(--fcx-navy); transform: translateX(2px); }
/* ------------------------------------------------ find your perfect fit */
.fcx-fit {
display: grid;
grid-template-columns: 210px minmax(0, 1fr) auto;
gap: 22px;
align-items: center;
background: linear-gradient(120deg, var(--fcx-navy-deep) 0%, #14294f 100%);
border-radius: 10px;
padding: 22px 24px;
margin: 26px 32px 0;
}
.fcx-fit__title { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--fcx-heading-font); font-size: 15px; font-weight: 700; letter-spacing: .04em; line-height: 1.2; }
.fcx-fit__sub { color: rgba(255, 255, 255, .6); font-size: 13px; line-height: 1.5; margin: 8px 0 0; }
.fcx-fit__fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fcx-fit__field {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border-radius: 8px;
padding: 8px 12px;
min-width: 0;
}
.fcx-fit__field.is-hidden { display: none; }
.fcx-fit__icon { display: inline-flex; flex: 0 0 auto; color: var(--fcx-navy); }
.fcx-fit__body { display: block; min-width: 0; flex: 1 1 auto; }
.fcx-fit__label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: var(--fcx-subtle); text-transform: none; }
.fcx-fit__field select,
.fcx-fit__field input[type="text"] {
width: 100%;
border: none;
background: transparent;
appearance: none;
-webkit-appearance: none;
font-family: var(--fcx-body-font);
font-size: 13.5px;
font-weight: 600;
color: var(--fcx-ink);
padding: 1px 16px 1px 0;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234b5563'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
}
.fcx-fit__field input[type="text"] { background-image: none; }
.fcx-fit__field select:focus,
.fcx-fit__field input:focus { outline: 2px solid var(--fcx-navy); outline-offset: 3px; border-radius: 2px; }
.fcx-fit__actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.fcx-fit__submit {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
background: var(--fcx-navy);
color: #fff;
border: none;
border-radius: 8px;
font-family: var(--fcx-body-font);
font-size: 14px;
font-weight: 700;
line-height: 1.2;
padding: 16px 26px;
cursor: pointer;
transition: background .16s ease, transform .16s ease;
}
.fcx-fit__submit:hover { background: #2b529b; transform: translateY(-1px); }
.fcx-fit__reset { color: rgba(255, 255, 255, .85); font-size: 13px; font-weight: 600; text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.fcx-fit__reset:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* -------------------------------------------------------------- product list */
.fcx-plist { padding: 34px 32px 0; }
.fcx-plist__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.fcx-plist__title {
position: relative;
font-family: var(--fcx-heading-font);
font-size: 19px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--fcx-ink);
margin: 0;
padding-bottom: 10px;
}
.fcx-plist__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; background: var(--fcx-navy); border-radius: 2px; }
.fcx-plist__tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fcx-plist__count { font-size: 13.5px; color: var(--fcx-muted); }
.fcx-plist__sort select {
appearance: none; -webkit-appearance: none;
background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234b5563'/%3E%3C/svg%3E") no-repeat right 12px center;
border: 1px solid var(--fcx-line);
border-radius: 6px;
font-family: var(--fcx-body-font);
font-size: 13.5px;
font-weight: 600;
color: var(--fcx-ink);
padding: 9px 32px 9px 12px;
cursor: pointer;
}
.fcx-pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.fcx-pcard {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--fcx-line);
border-radius: 10px;
overflow: hidden;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.fcx-pcard:hover { border-color: #c9d2e2; transform: translateY(-3px); box-shadow: 0 16px 30px rgba(20, 24, 31, .1); }
.fcx-pcard__media { display: block; aspect-ratio: 4 / 3; background: var(--fcx-surface-alt); overflow: hidden; }
.fcx-pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.fcx-pcard:hover .fcx-pcard__media img { transform: scale(1.04); }
.fcx-pcard__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 16px 18px; }
.fcx-pcard__cat { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fcx-navy); margin-bottom: 7px; }
.fcx-pcard__name { font-family: var(--fcx-heading-font); font-size: 15.5px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; }
.fcx-pcard__name a { color: var(--fcx-ink); text-decoration: none; }
.fcx-pcard__name a:hover { color: var(--fcx-navy); }
.fcx-pcard__fit { font-size: 13px; color: var(--fcx-muted); line-height: 1.5; }
.fcx-pcard__cab { font-size: 13px; color: var(--fcx-muted); }
.fcx-pcard__sku { font-size: 12px; color: var(--fcx-subtle); margin-top: 8px; }
.fcx-pcard__actions { margin-top: auto; padding-top: 14px; }
.fcx-pcard__view {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid var(--fcx-line);
border-radius: 6px;
padding: 9px 15px;
font-size: 13.5px;
font-weight: 600;
color: var(--fcx-ink);
text-decoration: none;
transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.fcx-pcard__view:hover { background: var(--fcx-navy); border-color: var(--fcx-navy); color: #fff; }
.fcx-pcard__view svg { transition: transform .16s ease; }
.fcx-pcard__view:hover svg { transform: translateX(3px); }
.fcx-pcard__contact { display: flex; gap: 8px; margin-top: 10px; }
.fcx-pcard__wa,
.fcx-pcard__mail {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
flex: 1 1 0;
border-radius: 6px;
padding: 8px 6px;
font-size: 11.5px;
font-weight: 600;
white-space: nowrap;
text-decoration: none;
transition: filter .16s ease, background .16s ease;
}
.fcx-pcard__wa { background: var(--fcx-whatsapp); color: #fff; }
.fcx-pcard__wa:hover { filter: brightness(1.07); color: #fff; }
.fcx-pcard__mail { background: var(--fcx-email-blue); color: #fff; }
.fcx-pcard__mail:hover { filter: brightness(1.07); color: #fff; }
.fcx-shop__empty {
background: #fff;
border: 1px solid var(--fcx-line);
border-radius: 10px;
padding: 44px 32px;
text-align: center;
color: var(--fcx-muted);
}
.fcx-shop__empty p { margin: 0 0 18px; }
.fcx-shop__empty-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.fcx-shop .woocommerce-pagination { padding: 30px 0 0; }
/* ------------------------------------------------------------- responsive */
@media (max-width: 1400px) {
.fcx-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
.fcx-fit { grid-template-columns: 1fr; gap: 16px; }
.fcx-fit__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fcx-fit__actions { flex-direction: row; align-items: center; justify-content: flex-start; }
.fcx-fit__submit { flex-direction: row; gap: 8px; padding: 13px 24px; }
}
@media (max-width: 1024px) {
.fcx-shop__inner { grid-template-columns: 1fr; }
.fcx-shop__rail { display: none; }
.fcx-shop__rail.is-open { display: block; }
.fcx-shop__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
width: calc(100% - 32px);
margin: 16px;
background: var(--fcx-navy);
color: #fff;
border: none;
border-radius: 6px;
font-family: var(--fcx-body-font);
font-size: 14.5px;
font-weight: 600;
padding: 13px 20px;
cursor: pointer;
}
.fcx-phero__copy { padding: 30px 20px; }
.fcx-phero__title { font-size: 34px; }
.fcx-phero__scrim { background: linear-gradient(100deg, #fff 0%, rgba(255, 255, 255, .93) 46%, rgba(255, 255, 255, .35) 82%); }
.fcx-famcards, .fcx-fit, .fcx-plist { padding-left: 20px; padding-right: 20px; }
.fcx-fit { margin-left: 20px; margin-right: 20px; }
.fcx-famcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fcx-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
.fcx-phero { min-height: 200px; }
.fcx-phero__title { font-size: 27px; }
.fcx-famcards { grid-template-columns: 1fr; }
.fcx-pgrid { grid-template-columns: 1fr; }
.fcx-fit__fields { grid-template-columns: 1fr; }
.fcx-plist__head { align-items: flex-start; }
}
/* Products page: the page's own section blocks, shown under the catalogue. */
.fcx-shop__page-content { margin-top: 8px; }
.fcx-shop__page-content > .fcx-block:first-child > section:first-child { padding-top: 24px; }
/* Sort control above the product grid */
.fcx-plist__sort { display: flex; align-items: center; gap: 9px; margin: 0; }
.fcx-plist__sort label { font-size: 13.5px; color: var(--fcx-muted); }
.fcx-plist__sort noscript button {
border: 1px solid var(--fcx-line); background: #fff; border-radius: 6px;
padding: 8px 12px; font-size: 13px; cursor: pointer;
}
/* Specification tags on the catalogue card */
.fcx-pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.fcx-pcard__tag {
display: inline-block;
background: var(--fcx-surface-alt);
border: 1px solid var(--fcx-line);
border-radius: 4px;
color: var(--fcx-muted);
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
line-height: 1.4;
}
/* Floating buttons: reveal a text label so none reads as a bare circle. */
.fcx-floating a { position: relative; }
.fcx-floating a::after {
content: attr(data-label);
position: absolute;
right: calc(100% + 10px);
top: 50%;
transform: translateY(-50%) translateX(6px);
background: var(--fcx-charcoal-deep);
color: #fff;
font-family: var(--fcx-body-font);
font-size: 12.5px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
padding: 8px 12px;
border-radius: 5px;
opacity: 0;
pointer-events: none;
transition: opacity .16s ease, transform .16s ease;
}
.fcx-floating a:hover::after,
.fcx-floating a:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); }
/* Left-positioned stacks flip the label to the other side. */
.fcx-floating--left a::after { right: auto; left: calc(100% + 10px); transform: translateY(-50%) translateX(-6px); }
.fcx-floating--left a:hover::after { transform: translateY(-50%) translateX(0); }
/* Touch devices have no hover, so the label is always visible there. */
@media (hover: none) and (max-width: 782px) {
.fcx-floating a::after { display: none; }
}
/* ==========================================================================
Action-button contrast enforcement
--------------------------------------------------------------------------
Blocksy (and WooCommerce) set link colours with high specificity, which is
how blue text ended up on the green WhatsApp button. Every solid-background
action here declares white text for its normal, visited, hover and focus
states, and forces SVG icons to inherit it.
========================================================================== */
.fcx-site .fcx-btn--navy,
.fcx-site .fcx-btn--navy:visited,
.fcx-site .fcx-btn--navy:hover,
.fcx-site .fcx-btn--navy:focus,
.fcx-site .fcx-btn--wa,
.fcx-site .fcx-btn--wa:visited,
.fcx-site .fcx-btn--wa:hover,
.fcx-site .fcx-btn--wa:focus,
.fcx-site .fcx-btn--amber,
.fcx-site .fcx-btn--amber:visited,
.fcx-site .fcx-btn--amber:hover,
.fcx-site .fcx-btn--amber:focus,
.fcx-site .fcx-header__cta,
.fcx-site .fcx-header__cta:visited,
.fcx-site .fcx-header__cta:hover,
.fcx-site .fcx-pcard__wa,
.fcx-site .fcx-pcard__wa:visited,
.fcx-site .fcx-pcard__wa:hover,
.fcx-site .fcx-pcard__mail,
.fcx-site .fcx-pcard__mail:visited,
.fcx-site .fcx-pcard__mail:hover,
.fcx-site .fcx-rail__cta,
.fcx-site .fcx-rail__cta:visited,
.fcx-site .fcx-rail__cta:hover,
.fcx-site .fcx-famhelp__wa,
.fcx-site .fcx-famhelp__mail,
.fcx-site .fcx-fit__submit,
.fcx-site .fcx-fit__submit:hover,
.fcx-site .fcx-single__actions .fcx-btn--navy,
.fcx-site .fcx-single__actions .fcx-btn--wa,
.fcx-site .fcx-floating a,
.fcx-site .fcx-social,
.fcx-site .fcx-topbar__quote {
color: #fff !important;
}
/* Icons inside those actions follow the text colour. */
.fcx-site .fcx-btn--navy svg,
.fcx-site .fcx-btn--wa svg,
.fcx-site .fcx-pcard__wa svg,
.fcx-site .fcx-pcard__mail svg,
.fcx-site .fcx-rail__cta svg,
.fcx-site .fcx-famhelp__wa svg,
.fcx-site .fcx-famhelp__mail svg,
.fcx-site .fcx-fit__submit svg,
.fcx-site .fcx-floating a svg,
.fcx-site .fcx-social svg,
.fcx-site .fcx-header__cta svg { color: #fff; fill: currentColor; }
/* An action element must never render as a bare coloured shape. */
.fcx-site .fcx-btn:empty,
.fcx-site .fcx-pcard__view:empty,
.fcx-site .fcx-pcard__wa:empty,
.fcx-site .fcx-pcard__mail:empty { display: none; }
/* Hovering the outlined View Details button flips it to navy, so its label and
arrow must go white together. */
.fcx-site .fcx-pcard__view:hover,
.fcx-site .fcx-pcard__view:hover svg { color: #fff; }
/* ==========================================================================
Footer — white text on navy, with a subtle technical pattern
========================================================================== */
.fcx-footer { position: relative; overflow: hidden; }
/*
* Two very low-opacity layers: a fine technical grid and a set of wide
* diagonals. Both sit behind the content and neither reduces readability.
*/
.fcx-footer::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
background-size: 46px 46px, 46px 46px;
pointer-events: none;
}
.fcx-footer::after {
content: "";
position: absolute;
top: -30%;
right: -10%;
width: 70%;
height: 180%;
background:
linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, .045) 42% 44%, transparent 44%),
linear-gradient(115deg, transparent 0 56%, rgba(255, 255, 255, .03) 56% 60%, transparent 60%),
linear-gradient(115deg, transparent 0 72%, rgba(255, 255, 255, .05) 72% 73%, transparent 73%);
pointer-events: none;
}
.fcx-footer > * { position: relative; z-index: 1; }
/* Primary footer text is white; only genuinely secondary lines go light grey. */
.fcx-site .fcx-footer,
.fcx-site .fcx-footer p,
.fcx-site .fcx-footer address,
.fcx-site .fcx-footer__about,
.fcx-site .fcx-footer__copy,
.fcx-site .fcx-footer__note,
.fcx-site .fcx-footer__links a,
.fcx-site .fcx-footer__links a:visited,
.fcx-site .fcx-footer__contact,
.fcx-site .fcx-footer__contact a,
.fcx-site .fcx-footer a[href^="tel:"],
.fcx-site .fcx-footer a[href^="mailto:"] { color: #fff; }
.fcx-site .fcx-footer__title { color: #fff; }
.fcx-site .fcx-footer__links a:hover,
.fcx-site .fcx-footer a[href^="tel:"]:hover,
.fcx-site .fcx-footer a[href^="mailto:"]:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.fcx-site .fcx-footer__meta,
.fcx-site .fcx-footer small { color: rgba(255, 255, 255, .72); }
.fcx-site .fcx-footer svg { color: #fff; }
/* ==========================================================================
Sidebar / brand-mark contrast fixes
--------------------------------------------------------------------------
Two faults visible on the live site:
1. The lettermark used the accent token with ink-coloured text, so it
rendered as a light-blue box with dark letters.
2. Family links inherited Blocksy's link colour, so they showed light blue
on the navy rail instead of white.
Both are corrected at a specificity that survives the parent theme.
========================================================================== */
.fcx-site .fcx-footer__mark,
.fcx-site .fcx-brand__mark,
.fcx-site .fcx-rail__logo .fcx-footer__mark {
background: var(--fcx-navy);
color: #fff;
}
/* The rail: white text and icons on navy, at every link state. */
.fcx-site .fcx-rail a,
.fcx-site .fcx-rail a:visited,
.fcx-site .fcx-rail__item,
.fcx-site .fcx-rail__item:visited,
.fcx-site .fcx-rail__item:hover,
.fcx-site .fcx-rail__item:focus,
.fcx-site .fcx-rail__label,
.fcx-site .fcx-rail__logo,
.fcx-site .fcx-rail__logo .fcx-footer__name,
.fcx-site .fcx-rail__help-top,
.fcx-site .fcx-rail__note strong { color: #fff; }
.fcx-site .fcx-rail__item .fcx-rail__icon,
.fcx-site .fcx-rail__item:hover .fcx-rail__icon,
.fcx-site .fcx-rail a svg,
.fcx-site .fcx-rail svg { color: #fff; }
/* Supporting copy stays legible but recedes. */
.fcx-site .fcx-rail__help p,
.fcx-site .fcx-rail__note em { color: rgba(255, 255, 255, .72); }
.fcx-site .fcx-rail__head { color: rgba(255, 255, 255, .6); }
/* The lettermark in the rail is a brand block, not a button: give it a border
rather than a solid fill so it never reads as an empty blue button. */
.fcx-site .fcx-rail__logo .fcx-footer__mark {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .18);
width: 46px;
height: 46px;
font-size: 15px;
letter-spacing: .04em;
}
/* Sidebar scrolls with the page rather than pinning to the viewport. */
.fcx-shop__aside { position: static; }
.fcx-shop__rail { position: static; }
/* ==========================================================================
Copyright bar — a distinct final layer beneath the footer
========================================================================== */
.fcx-site .fcx-footer__bar,
.fcx-site .fcx-footer__bottom {
background: #0b1424;
border-top: 1px solid rgba(255, 255, 255, .09);
position: relative;
z-index: 1;
}
.fcx-site .fcx-footer__bar,
.fcx-site .fcx-footer__bottom,
.fcx-site .fcx-footer__copy,
.fcx-site .fcx-footer__bottom a { color: #fff; }
/* ==========================================================================
Sidebar & logo contrast (fixes blue-on-navy links and the light blue mark)
--------------------------------------------------------------------------
Blocksy sets `a { color: … }` with enough specificity to beat the rail's own
rule, which rendered the family links in blue on the navy sidebar. These
declarations pin them to white for every state.
========================================================================== */
.fcx-site .fcx-rail__item,
.fcx-site .fcx-rail__item:visited,
.fcx-site .fcx-rail__item:hover,
.fcx-site .fcx-rail__item:focus,
.fcx-site .fcx-rail__label,
.fcx-site .fcx-rail__head,
.fcx-site .fcx-rail__logo,
.fcx-site .fcx-rail__logo .fcx-footer__name,
.fcx-site .fcx-rail__help-top,
.fcx-site .fcx-rail__note strong { color: #fff !important; }
.fcx-site .fcx-rail__item svg,
.fcx-site .fcx-rail__icon,
.fcx-site .fcx-rail__chev,
.fcx-site .fcx-rail__note-icon,
.fcx-site .fcx-rail__help-top svg { color: #fff !important; }
/* Secondary rail copy stays legible without competing with the labels. */
.fcx-site .fcx-rail__help p,
.fcx-site .fcx-rail__note em { color: rgba(255, 255, 255, .72) !important; }
/* The lettermark is a brand block, not an accent chip: navy with white text. */
.fcx-site .fcx-brand__mark,
.fcx-site .fcx-footer__mark,
.fcx-site .fcx-rail__logo .fcx-footer__mark {
background: var(--fcx-navy);
color: #fff;
}
/* The rail scrolls with the page rather than pinning to the viewport. */
.fcx-shop__aside { position: static; }
.fcx-shop__rail { position: static; }
/* ==========================================================================
Copyright bar — a distinct final layer beneath the footer
========================================================================== */
.fcx-footer__bar,
.fcx-footer__bottom {
position: relative;
z-index: 1;
background: #0a1120;
}
.fcx-site .fcx-footer__bar,
.fcx-site .fcx-footer__bottom {
background: #0a1120;
border-top: 1px solid rgba(255, 255, 255, .1);
padding-top: 18px;
padding-bottom: 18px;
}
.fcx-site .fcx-footer__bar *,
.fcx-site .fcx-footer__bottom * { color: #fff; }
/* ==========================================================================
HEADER — utility strip with icon boxes + navigation with icons
========================================================================== */
.fcx-topbar { padding: 0; }
.fcx-topbar .fcx-container {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 16px;
flex-wrap: nowrap;
min-height: 76px;
max-width: none;
padding-left: 28px;
padding-right: 28px;
}
.fcx-topbar__items {
display: flex;
align-items: stretch;
flex-wrap: nowrap;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
}
.fcx-util {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px 14px 0;
margin-right: 20px;
border-right: 1px solid rgba(255, 255, 255, .14);
text-decoration: none;
min-width: 0;
}
.fcx-util:last-child { border-right: none; margin-right: 0; }
.fcx-util__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex: 0 0 42px;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 8px;
color: #fff;
transition: background .16s ease, border-color .16s ease;
}
a.fcx-util:hover .fcx-util__icon { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }
.fcx-util__text { display: flex; flex-direction: column; min-width: 0; }
.fcx-util__sub { white-space: nowrap; }
.fcx-util:nth-child(4) { flex: 0 1 auto; }
.fcx-util__title {
font-size: 14.5px;
font-weight: 700;
color: #fff;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fcx-util__sub { font-size: 12.5px; color: #fff; line-height: 1.3; }
/* Reach item reads label-above-value, matching the reference. */
.fcx-util:nth-child(3) .fcx-util__text { flex-direction: column-reverse; }
.fcx-site .fcx-topbar__quote {
display: inline-flex;
align-items: center;
gap: 10px;
align-self: center;
border: 1px solid rgba(255, 255, 255, .55);
border-radius: 4px;
padding: 13px 22px;
font-size: 13px;
white-space: nowrap;
flex: 0 0 auto;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
transition: background .16s ease, border-color .16s ease;
}
.fcx-site .fcx-topbar__quote:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.fcx-site .fcx-topbar__quote svg { color: #fff; }
/* --- main bar --- */
.fcx-header .fcx-container { min-height: 96px; gap: 26px; }
.fcx-brand { gap: 18px; }
.fcx-brand__names { padding-left: 18px; border-left: 1px solid var(--fcx-line); }
.fcx-nav__link,
.fcx-nav__item > a {
display: inline-flex;
align-items: center;
gap: 8px;
}
.fcx-nav__icon { display: inline-flex; align-items: center; color: currentColor; opacity: .85; }
.fcx-nav__text { white-space: nowrap; }
.fcx-nav__item:hover .fcx-nav__icon,
.fcx-nav__link:hover .fcx-nav__icon,
.fcx-nav__link.is-active .fcx-nav__icon { opacity: 1; }
@media (max-width: 1200px) {
.fcx-util { padding-right: 18px; margin-right: 18px; }
.fcx-util__title { font-size: 14px; }
.fcx-nav__icon { display: none; }
}
@media (max-width: 1024px) {
.fcx-topbar .fcx-container { min-height: 0; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
.fcx-topbar__items { flex-wrap: wrap; overflow: visible; }
.fcx-util { border-right: none; margin-right: 0; padding: 8px 0; flex: 1 1 240px; }
.fcx-topbar__quote { width: 100%; justify-content: center; }
.fcx-nav__icon { display: inline-flex; }
}
@media (max-width: 782px) {
.fcx-topbar__items { flex-direction: column; }
.fcx-util { flex: 1 1 auto; }
.fcx-brand__names { padding-left: 12px; }
}
/* ==========================================================================
Top information bar — dark navy background, white text without exception
--------------------------------------------------------------------------
Blocksy and the global palette both set link/text colours that can win over
the bar's own rules, which is how secondary lines ended up reading dim
rather than white. Everything inside the bar is pinned to #fff.
========================================================================== */
.fcx-site .fcx-topbar,
.fcx-site .fcx-topbar *,
.fcx-site .fcx-topbar a,
.fcx-site .fcx-topbar a:visited,
.fcx-site .fcx-topbar a:hover,
.fcx-site .fcx-topbar a:focus,
.fcx-site .fcx-topbar span,
.fcx-site .fcx-topbar .fcx-util__title,
.fcx-site .fcx-topbar .fcx-util__sub,
.fcx-site .fcx-topbar .fcx-topbar__quote {
color: #fff !important;
}
.fcx-site .fcx-topbar svg,
.fcx-site .fcx-topbar .fcx-util__icon { color: #fff !important; }
/* Separator between the information bar and the white navigation area. */
.fcx-site .fcx-topbar { border-bottom: 1px solid rgba(255, 255, 255, .08); }
/* Mobile: keep the information bar left-aligned and evenly spaced. */
@media (max-width: 782px) {
.fcx-topbar__items { align-items: stretch; gap: 4px; }
.fcx-util { justify-content: flex-start; text-align: left; padding: 10px 0; }
.fcx-util__text { align-items: flex-start; }
.fcx-util__title, .fcx-util__sub { text-align: left; white-space: normal; }
.fcx-topbar__quote { margin-top: 6px; }
}
/* ==========================================================================
HEADER — branding row, stacked icon navigation, angled vehicle panel
========================================================================== */
.fcx-header { padding: 0; }
.fcx-mast {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
align-items: stretch;
min-height: 210px;
background: var(--fcx-h-bg, #fff);
}
.fcx-mast__main {
display: flex;
flex-direction: column;
justify-content: center;
gap: 26px;
padding: 30px 0 30px 44px;
min-width: 0;
}
.fcx-mast__brandrow { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
/* --- stacked navigation: icon above label, hairline dividers --- */
.fcx-nav--stacked {
display: flex;
align-items: stretch;
flex-wrap: wrap;
gap: 0;
}
.fcx-nav--stacked .fcx-nav__link,
.fcx-nav--stacked .fcx-nav__item > a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 6px 32px;
border-right: 1px solid var(--fcx-line);
font-size: 14.5px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--fcx-h-text, var(--fcx-ink));
text-decoration: none;
}
.fcx-nav--stacked > *:last-child .fcx-nav__link,
.fcx-nav--stacked > a.fcx-nav__link:last-child,
.fcx-nav--stacked .fcx-nav__item:last-child > a { border-right: none; }
.fcx-nav--stacked .fcx-nav__icon {
display: inline-flex;
align-items: center;
justify-content: center;
height: 38px;
color: var(--fcx-navy);
opacity: 1;
}
.fcx-nav--stacked .fcx-nav__icon svg { width: 34px; height: 34px; }
.fcx-nav--stacked .fcx-nav__text { white-space: nowrap; }
.fcx-nav--stacked .fcx-nav__link:hover,
.fcx-nav--stacked .fcx-nav__item > a:hover { color: var(--fcx-navy); }
.fcx-nav--stacked .fcx-nav__link.is-active,
.fcx-nav--stacked .fcx-nav__item.is-active > a { color: var(--fcx-navy); }
/* The stacked nav supplies its own layout, so the underline indicator is off. */
.fcx-nav--stacked .fcx-nav__link::after,
.fcx-nav--stacked .fcx-nav__item > a::after { display: none; }
.fcx-nav--stacked .fcx-nav__caret { display: inline-flex; margin-left: 6px; }
/* --- angled vehicle panel --- */
.fcx-mast__visual {
position: relative;
min-height: 100%;
overflow: hidden;
/* Diagonal edge, matching the reference. */
clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}
.fcx-mast__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fcx-mast__cta {
position: absolute;
right: 0;
bottom: 28px;
display: inline-flex;
align-items: center;
gap: 14px;
background: var(--fcx-navy-deep);
color: #fff;
padding: 18px 30px;
font-size: 15px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 12px 30px rgba(15, 21, 35, .28);
transition: background .16s ease, transform .16s ease;
}
.fcx-mast__cta:hover { background: var(--fcx-navy); transform: translateX(-3px); color: #fff; }
.fcx-site .fcx-mast__cta, .fcx-site .fcx-mast__cta svg { color: #fff !important; }
.fcx-mast__ctawrap { display: flex; align-items: center; justify-content: flex-end; padding: 0 44px; }
.fcx-mast__cta--plain { position: static; border-radius: 4px; }
@media (max-width: 1200px) {
.fcx-mast { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); min-height: 190px; }
.fcx-mast__main { padding-left: 28px; }
.fcx-nav--stacked .fcx-nav__link,
.fcx-nav--stacked .fcx-nav__item > a { padding: 6px 20px; font-size: 13px; }
.fcx-nav--stacked .fcx-nav__icon svg { width: 28px; height: 28px; }
}
@media (max-width: 1024px) {
.fcx-mast { grid-template-columns: 1fr; min-height: 0; }
.fcx-mast__visual { display: none; }
.fcx-mast__main { padding: 18px 20px; gap: 16px; }
.fcx-mast__ctawrap { padding: 0 20px 18px; justify-content: flex-start; }
.fcx-nav--stacked { flex-direction: column; align-items: stretch; }
.fcx-nav--stacked .fcx-nav__link,
.fcx-nav--stacked .fcx-nav__item > a {
flex-direction: row;
justify-content: flex-start;
gap: 12px;
padding: 13px 4px;
border-right: none;
border-bottom: 1px solid var(--fcx-line);
text-transform: none;
letter-spacing: 0;
font-size: 15px;
}
.fcx-nav--stacked .fcx-nav__icon { height: auto; }
.fcx-nav--stacked .fcx-nav__icon svg { width: 22px; height: 22px; }
}
/* ==========================================================================
Top information bar — slim proportions
========================================================================== */
.fcx-topbar .fcx-container { min-height: 0; padding-top: 0; padding-bottom: 0; }
.fcx-util { padding: 9px 18px 9px 0; margin-right: 18px; }
.fcx-util__icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 6px; }
.fcx-util__icon svg { width: 15px; height: 15px; }
.fcx-util__title { font-size: 13.5px; line-height: 1.2; }
.fcx-util__sub { font-size: 11.5px; line-height: 1.2; }
.fcx-site .fcx-topbar__quote { padding: 9px 18px; font-size: 12px; }
.fcx-site .fcx-topbar__quote svg { width: 14px; height: 14px; }
/* Every nav item shows its icon at a consistent size. */
.fcx-nav--stacked .fcx-nav__icon { min-width: 34px; }
.fcx-nav--stacked .fcx-nav__icon svg { width: 30px; height: 30px; }
@media (max-width: 782px) {
.fcx-util { padding: 7px 0; }
.fcx-util__icon { width: 30px; height: 30px; flex: 0 0 30px; }
}
/* ==========================================================================
HEADER — reference refinement: single-line info bar, solid quote button,
logo + divider, icon-over-label navigation, search control
========================================================================== */
/* --- information bar --- */
.fcx-topbar .fcx-container { align-items: center; }
.fcx-util {
align-items: center;
padding: 0 22px 0 0;
margin-right: 22px;
border-right: 1px solid rgba(255, 255, 255, .18);
gap: 10px;
}
/* No boxed frame — the glyph sits directly beside the text. */
.fcx-util__icon { width: auto; height: auto; flex: 0 0 auto; border: none; border-radius: 0; background: none; }
.fcx-util__icon svg { width: 17px; height: 17px; }
.fcx-util__title { font-size: 13.5px; font-weight: 500; }
.fcx-util__sub:empty { display: none; }
/* Solid quote button in the brand blue. */
.fcx-site .fcx-topbar__quote {
background: var(--fcx-accent, #2f6fd0);
border: none;
border-radius: 3px;
padding: 13px 22px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .06em;
}
.fcx-site .fcx-topbar__quote:hover { background: var(--fcx-accent-strong, #2559ab); }
/* --- main header --- */
.fcx-mast { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.fcx-mast__main { flex-direction: row; align-items: center; gap: 0; padding: 18px 40px; }
.fcx-mast__brandrow {
flex: 0 0 auto;
padding-right: 36px;
margin-right: 36px;
border-right: 1px solid var(--fcx-line);
}
.fcx-mast__navrow { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex: 1 1 auto; min-width: 0; }
.fcx-nav--stacked { flex: 1 1 auto; justify-content: flex-start; }
.fcx-nav--stacked .fcx-nav__link,
.fcx-nav--stacked .fcx-nav__item > a {
position: relative;
border-right: none;
padding: 4px 26px;
gap: 10px;
font-size: 15px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
.fcx-nav--stacked .fcx-nav__icon svg { width: 34px; height: 34px; }
/* Active item: blue label with a short underline, as in the reference. */
.fcx-nav--stacked .fcx-nav__link.is-active,
.fcx-nav--stacked .fcx-nav__item.current-menu-item > a { color: var(--fcx-accent, #2f6fd0); }
.fcx-nav--stacked .fcx-nav__link.is-active::after,
.fcx-nav--stacked .fcx-nav__item.current-menu-item > a::after {
content: "";
display: block;
position: absolute;
left: 50%;
bottom: -14px;
width: 52px;
height: 3px;
margin-left: -26px;
background: var(--fcx-accent, #2f6fd0);
border-radius: 2px;
}
/* --- search --- */
.fcx-headsearch {
display: flex;
align-items: center;
gap: 0;
flex: 0 0 auto;
padding-left: 24px;
border-left: 1px solid var(--fcx-line);
margin: 0;
}
.fcx-headsearch input[type="search"] {
width: 0;
min-width: 0;
opacity: 0;
padding: 0;
border: 1px solid transparent;
border-radius: 22px;
font-family: var(--fcx-body-font);
font-size: 14px;
transition: width .22s ease, opacity .22s ease, padding .22s ease;
}
.fcx-headsearch:hover input[type="search"],
.fcx-headsearch:focus-within input[type="search"] {
width: 190px;
opacity: 1;
padding: 9px 14px;
border-color: var(--fcx-line);
margin-right: 8px;
}
.fcx-headsearch button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex: 0 0 44px;
border: 1px solid var(--fcx-line);
border-radius: 50%;
background: #fff;
color: var(--fcx-ink);
cursor: pointer;
transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.fcx-headsearch button:hover { border-color: var(--fcx-navy); color: var(--fcx-navy); background: var(--fcx-surface-alt); }
@media (max-width: 1200px) {
.fcx-mast__main { padding: 16px 24px; }
.fcx-mast__brandrow { padding-right: 22px; margin-right: 22px; }
.fcx-nav--stacked .fcx-nav__link,
.fcx-nav--stacked .fcx-nav__item > a { padding: 4px 16px; font-size: 14px; }
.fcx-nav--stacked .fcx-nav__icon svg { width: 28px; height: 28px; }
}
@media (max-width: 1024px) {
.fcx-mast__main { flex-direction: column; align-items: stretch; padding: 16px 20px; gap: 14px; }
.fcx-mast__brandrow { border-right: none; padding-right: 0; margin-right: 0; }
.fcx-mast__navrow { flex-direction: column; align-items: stretch; gap: 12px; }
.fcx-headsearch { padding-left: 0; border-left: none; }
.fcx-headsearch input[type="search"] { width: 100%; opacity: 1; padding: 10px 14px; border-color: var(--fcx-line); margin-right: 8px; }
.fcx-nav--stacked .fcx-nav__link.is-active::after,
.fcx-nav--stacked .fcx-nav__item.current-menu-item > a::after { display: none; }
}
@media (max-width: 782px) {
.fcx-util { border-right: none; margin-right: 0; padding: 6px 0; }
}
/* Screen-reader-only text must not display visually. */
.screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.screen-reader-text:focus {
position: static !important;
width: auto; height: auto;
clip: auto; margin: 0;
}
/* Active navigation underline sits just below the label, inside the row. */
.fcx-mast__main { overflow: visible; }
.fcx-nav--stacked .fcx-nav__link,
.fcx-nav--stacked .fcx-nav__item > a { padding-bottom: 12px; }
.fcx-nav--stacked .fcx-nav__link.is-active::after,
.fcx-nav--stacked .fcx-nav__item.current-menu-item > a::after { bottom: 0; display: block; }
/* ==========================================================================
SEPARATE MOBILE / TABLET HEADER
--------------------------------------------------------------------------
The desktop header is not shrunk to fit small screens: it is hidden outright
below 1025px and a purpose-built compact header takes its place. The drawer
carries the `hidden` attribute in the markup, so the navigation is closed
before any script runs.
========================================================================== */
.fcx-mobile-only { display: none; }
@media (max-width: 1024px) {
/* Desktop utility bar and desktop navigation: gone, not reflowed. */
.fcx-site .fcx-desktop-only { display: none !important; }
.fcx-mobile-only { display: block; }
}
/* --- compact utility strip --- */
.fcx-mhead__util {
display: flex;
align-items: stretch;
background: var(--fcx-h-top-bg, var(--fcx-navy-deep));
}
.fcx-site .fcx-mhead__u {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
flex: 1 1 0;
padding: 9px 10px;
color: #fff !important;
font-size: 12.5px;
font-weight: 600;
line-height: 1;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fcx-site .fcx-mhead__u svg { color: #fff; flex: 0 0 auto; }
.fcx-mhead__u--mail { border-left: 1px solid rgba(255, 255, 255, .18); }
/* --- brand bar --- */
.fcx-mhead__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 12px 16px;
background: var(--fcx-h-bg, #fff);
border-bottom: 1px solid var(--fcx-h-border, var(--fcx-line));
}
.fcx-mhead__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.fcx-mhead__brand .fcx-logo { max-height: 38px; width: auto; }
.fcx-mhead__brand .fcx-brand__mark { width: 38px; height: 38px; font-size: 14px; }
.fcx-mhead__brand .fcx-brand__name { font-size: 15px; line-height: 1.2; }
.fcx-mhead__brand .fcx-brand__tag { font-size: 9.5px; letter-spacing: .06em; }
.fcx-mhead__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.fcx-mhead__actions .fcx-b2b-link--mobile {
height: 36px;
width: 36px;
padding: 0;
justify-content: center;
border-radius: 50%;
}
.fcx-mhead__actions .fcx-b2b-link--mobile span { display: none; }
.fcx-mhead__actions .fcx-b2b-link--mobile svg { width: 16px; height: 16px; }
/* --- hamburger --- */
.fcx-mhead .fcx-burger {
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 46px;
height: 46px;
flex: 0 0 46px;
padding: 0 11px;
border: 1px solid var(--fcx-line);
border-radius: 6px;
background: #fff;
cursor: pointer;
}
.fcx-mhead .fcx-burger span {
display: block;
height: 2px;
width: 100%;
background: var(--fcx-ink);
border-radius: 2px;
transition: transform .2s ease, opacity .2s ease;
}
.fcx-header.is-open .fcx-mhead .fcx-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fcx-header.is-open .fcx-mhead .fcx-burger span:nth-child(2) { opacity: 0; }
.fcx-header.is-open .fcx-mhead .fcx-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* --- drawer: closed until tapped --- */
.fcx-mdrawer[hidden] { display: none !important; }
.fcx-mdrawer {
background: #fff;
border-bottom: 1px solid var(--fcx-line);
padding: 6px 16px 18px;
max-height: calc(100vh - 140px);
overflow-y: auto;
animation: fcx-drawer-in .18s ease;
}
@keyframes fcx-drawer-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.fcx-mdrawer__nav { display: block; }
/* Drawer links: full-width rows with their icon, regardless of nav variant. */
.fcx-mdrawer .fcx-nav,
.fcx-mdrawer .fcx-nav--stacked { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.fcx-site .fcx-mdrawer .fcx-nav__link,
.fcx-site .fcx-mdrawer .fcx-nav__item > a {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 13px;
padding: 14px 4px;
border-right: none;
border-bottom: 1px solid var(--fcx-line);
font-size: 15.5px;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
color: var(--fcx-ink);
}
.fcx-site .fcx-mdrawer .fcx-nav__icon { height: auto; min-width: 26px; color: var(--fcx-navy); }
.fcx-site .fcx-mdrawer .fcx-nav__icon svg { width: 24px; height: 24px; }
.fcx-site .fcx-mdrawer .fcx-nav__link.is-active { color: var(--fcx-accent, #2f6fd0); }
.fcx-site .fcx-mdrawer .fcx-nav__link.is-active::after { display: none; }
/* The mega panel stays out of the drawer; families are on the Products page. */
.fcx-mdrawer .fcx-mega { display: none !important; }
.fcx-site .fcx-mdrawer__cta {
display: block;
margin-top: 16px;
padding: 14px 18px;
background: var(--fcx-accent, #2f6fd0);
color: #fff !important;
border-radius: 4px;
font-size: 14.5px;
font-weight: 700;
text-align: center;
text-decoration: none;
}
/* Lock the page behind an open drawer. */
body.fcx-nav-open { overflow: hidden; }
@media (min-width: 1025px) {
.fcx-mhead { display: none !important; }
}
/* ==========================================================================
Search control — clearly FCX blue, matching the navigation icons
========================================================================== */
.fcx-site .fcx-headsearch button {
border-color: var(--fcx-navy);
color: var(--fcx-navy);
background: #fff;
}
.fcx-site .fcx-headsearch button svg { color: var(--fcx-navy); }
.fcx-site .fcx-headsearch button:hover,
.fcx-site .fcx-headsearch button:focus-visible {
background: var(--fcx-navy);
border-color: var(--fcx-navy);
color: #fff;
}
.fcx-site .fcx-headsearch button:hover svg,
.fcx-site .fcx-headsearch button:focus-visible svg { color: #fff; }
/* Stays blue while the field is open. */
.fcx-site .fcx-headsearch:focus-within button,
.fcx-site .fcx-headsearch:hover button {
border-color: var(--fcx-navy);
color: var(--fcx-navy);
}
.fcx-site .fcx-headsearch:focus-within button svg,
.fcx-site .fcx-headsearch:hover button svg { color: var(--fcx-navy); }
.fcx-site .fcx-headsearch:focus-within button:hover svg { color: #fff; }
.fcx-site .fcx-headsearch input[type="search"]:focus {
border-color: var(--fcx-navy);
outline: none;
box-shadow: 0 0 0 3px rgba(34, 64, 122, .14);
}
/* ==========================================================================
Footer copyright bar — same blue family as the top information bar
========================================================================== */
.fcx-site .fcx-footer__bar,
.fcx-site .fcx-footer__bottom {
background: var(--fcx-f-bar-bg, var(--fcx-navy-deep));
border-top: 1px solid rgba(255, 255, 255, .12);
}
/* Instagram in the footer social row and the floating stack. */
.fcx-social--ig { background: #C13584; }
.fcx-floating__ig { background: #C13584; }
/* ==========================================================================
Contact cards — title and value on separate lines
--------------------------------------------------------------------------
The title and value are elements, which are inline, so the existing
margin-bottom had no vertical effect and "WhatsApp" ran straight into the
number. Making them block-level separates the two lines properly.
========================================================================== */
.fcx-quick__card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
padding: 32px 24px;
}
.fcx-quick__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
margin-bottom: 18px;
border-radius: 50%;
background: var(--fcx-surface-alt);
color: var(--fcx-navy);
transition: background .18s ease, color .18s ease;
}
.fcx-quick__card:hover .fcx-quick__icon { background: var(--fcx-navy); color: #fff; }
.fcx-quick__icon svg { display: block; }
.fcx-quick__title {
display: block;
width: 100%;
font-family: var(--fcx-heading-font);
font-size: 15.5px;
font-weight: 600;
line-height: 1.3;
color: var(--fcx-ink);
margin: 0 0 8px;
}
.fcx-quick__value {
display: block;
width: 100%;
font-size: 15px;
font-weight: 600;
line-height: 1.45;
color: var(--fcx-navy);
word-break: break-word;
}
.fcx-site .fcx-quick__card:hover .fcx-quick__value { color: var(--fcx-navy); }
@media (max-width: 900px) {
.fcx-quick { grid-template-columns: 1fr; gap: 16px; }
.fcx-quick__card { padding: 24px 20px; }
}
/* ==========================================================================
1. Logo — no fixed cap; the Customizer height governs
========================================================================== */
.fcx-site .fcx-header .fcx-logo,
.fcx-site .fcx-brand__logo {
max-height: none;
height: var(--fcx-logo-h, 44px);
width: auto;
}
.fcx-site .fcx-footer .fcx-logo,
.fcx-site .fcx-footer__logo { max-height: none; height: auto; max-width: 240px; width: auto; }
.fcx-site .fcx-mhead__brand .fcx-logo { max-height: none; height: var(--fcx-logo-h, 38px); max-height: 56px; width: auto; }
/* Brand name and tagline are independent of the logo and never inherit its size. */
.fcx-brand__names { flex: 1 1 auto; min-width: 0; }
/* ==========================================================================
2. Product Families — own logo on white, sticky sidebar
========================================================================== */
.fcx-site .fcx-rail__logo {
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 8px;
padding: 14px 16px;
margin-bottom: 22px;
}
.fcx-rail__logoimg {
display: block;
height: var(--fcx-rail-logo-h, 54px);
max-height: none;
width: auto;
max-width: 100%;
object-fit: contain;
}
/* Fallback lettermark also centres on the white panel. */
.fcx-site .fcx-rail__logo .fcx-footer__names { align-items: center; text-align: center; }
.fcx-site .fcx-rail__logo .fcx-footer__name { color: var(--fcx-ink) !important; }
/* Sticky while the product grid scrolls. */
@media (min-width: 1025px) {
.fcx-site .fcx-shop__aside { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; }
.fcx-site .fcx-shop__rail { position: static; }
.fcx-shop__aside::-webkit-scrollbar { width: 6px; }
.fcx-shop__aside::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 3px; }
}
/* ==========================================================================
3. Navigation hover — solid blue shape, white icon and label
========================================================================== */
.fcx-site .fcx-nav--stacked .fcx-nav__link,
.fcx-site .fcx-nav--stacked .fcx-nav__item > a {
border-radius: 8px;
color: var(--fcx-navy);
transition: background .18s ease, color .18s ease, transform .18s ease;
}
.fcx-site .fcx-nav--stacked .fcx-nav__icon { color: var(--fcx-navy); transition: color .18s ease; }
.fcx-site .fcx-nav--stacked .fcx-nav__link:hover,
.fcx-site .fcx-nav--stacked .fcx-nav__link:focus-visible,
.fcx-site .fcx-nav--stacked .fcx-nav__item > a:hover,
.fcx-site .fcx-nav--stacked .fcx-nav__item:hover > a {
background: var(--fcx-navy);
color: #fff;
transform: translateY(-1px);
}
.fcx-site .fcx-nav--stacked .fcx-nav__link:hover .fcx-nav__icon,
.fcx-site .fcx-nav--stacked .fcx-nav__link:hover .fcx-nav__text,
.fcx-site .fcx-nav--stacked .fcx-nav__link:hover svg,
.fcx-site .fcx-nav--stacked .fcx-nav__item:hover > a .fcx-nav__icon,
.fcx-site .fcx-nav--stacked .fcx-nav__item:hover > a .fcx-nav__text,
.fcx-site .fcx-nav--stacked .fcx-nav__item:hover > a svg { color: #fff; }
/* The active underline sits clear of the hover shape. */
.fcx-nav--stacked .fcx-nav__link.is-active::after,
.fcx-nav--stacked .fcx-nav__item.current-menu-item > a::after { bottom: -6px; }
/* ==========================================================================
4. Search — blue circle, white glyph
========================================================================== */
.fcx-site .fcx-headsearch button {
background: var(--fcx-navy);
border-color: var(--fcx-navy);
color: #fff;
}
.fcx-site .fcx-headsearch button svg { color: #fff !important; }
.fcx-site .fcx-headsearch button:hover,
.fcx-site .fcx-headsearch button:focus-visible,
.fcx-site .fcx-headsearch:hover button,
.fcx-site .fcx-headsearch:focus-within button {
background: var(--fcx-navy-deep);
border-color: var(--fcx-navy-deep);
color: #fff;
}
.fcx-site .fcx-headsearch:hover button svg,
.fcx-site .fcx-headsearch:focus-within button svg { color: #fff !important; }
/* ==========================================================================
6. Welcome animation
========================================================================== */
.fcx-welcome {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 26px;
background: var(--fcx-navy-deep);
opacity: 1;
transition: opacity .5s ease, visibility .5s ease;
}
.fcx-welcome.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.fcx-welcome__badge {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 118px;
height: 118px;
border-radius: 50%;
background: var(--fcx-navy);
color: #fff;
animation: fcx-w-pop .55s cubic-bezier(.2, .8, .3, 1) both;
}
.fcx-welcome__badge svg { width: 58px; height: 58px; color: #fff; }
/* Animated ring around the badge. */
.fcx-welcome__badge::after {
content: "";
position: absolute;
inset: -12px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, .25);
border-top-color: #fff;
animation: fcx-w-spin 1.05s linear infinite;
}
.fcx-welcome__title {
font-family: var(--fcx-heading-font);
font-size: 27px;
font-weight: 700;
color: #fff;
text-align: center;
margin: 0;
animation: fcx-w-rise .5s .12s ease both;
}
.fcx-welcome__sub {
font-size: 13.5px;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255, 255, 255, .8);
text-align: center;
margin: -14px 0 0;
animation: fcx-w-rise .5s .22s ease both;
}
@keyframes fcx-w-pop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes fcx-w-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fcx-w-spin { to { transform: rotate(360deg); } }
/* Respect a reduced-motion preference: show it briefly, without spinning. */
@media (prefers-reduced-motion: reduce) {
.fcx-welcome__badge, .fcx-welcome__title, .fcx-welcome__sub { animation: none; }
.fcx-welcome__badge::after { animation: none; border-top-color: rgba(255, 255, 255, .25); }
}
@media (max-width: 620px) {
.fcx-welcome__badge { width: 96px; height: 96px; }
.fcx-welcome__badge svg { width: 46px; height: 46px; }
.fcx-welcome__title { font-size: 21px; padding: 0 24px; }
.fcx-welcome__sub { font-size: 11.5px; padding: 0 24px; }
}
/* ==========================================================================
1-3. Three independent logo slots — each sized by its own setting
========================================================================== */
.fcx-site .fcx-logo--header { height: var(--fcx-logo-h, 44px); max-height: none; width: auto; }
.fcx-site .fcx-logo--footer { height: var(--fcx-footer-logo-h, 48px); max-height: none; width: auto; }
.fcx-site .fcx-logo--rail { height: var(--fcx-rail-logo-h, 54px); max-height: none; width: auto; }
/* 2. Footer logo centred above the company name. */
.fcx-site .fcx-footer__brand,
.fcx-site .fcx-footer .fcx-footer__logo-wrap {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
}
.fcx-site .fcx-footer__brand .fcx-footer__names { align-items: center; text-align: center; }
.fcx-site .fcx-footer__brand .fcx-logo--footer { margin: 0 auto 4px; }
/* 3. Rail logo centred on its white panel. */
.fcx-site .fcx-rail__logo { flex-direction: column; gap: 8px; }
.fcx-site .fcx-rail__names { align-items: center; text-align: center; }
.fcx-site .fcx-rail__name { color: var(--fcx-ink) !important; font-family: var(--fcx-heading-font); font-size: 15px; font-weight: 700; }
.fcx-site .fcx-rail__mark {
display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px; border-radius: 8px;
background: var(--fcx-navy); color: #fff;
font-family: var(--fcx-heading-font); font-weight: 700; font-size: 16px;
}
/* ==========================================================================
4. Instagram — official gradient, recognisable at a glance
========================================================================== */
.fcx-site .fcx-social--ig,
.fcx-site .fcx-floating__ig {
background: radial-gradient(circle at 30% 107%,
#fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
color: #fff !important;
}
.fcx-site .fcx-social--ig svg,
.fcx-site .fcx-floating__ig svg { color: #fff !important; fill: currentColor; }
/* ==========================================================================
8. Blue backgrounds always carry white text and icons
========================================================================== */
.fcx-site .fcx-topbar,
.fcx-site .fcx-topbar *,
.fcx-site .fcx-rail,
.fcx-site .fcx-rail *,
.fcx-site .fcx-famhelp,
.fcx-site .fcx-famhelp *,
.fcx-site .fcx-fit,
.fcx-site .fcx-fit__title,
.fcx-site .fcx-fit__sub,
.fcx-site .fcx-panel--navy,
.fcx-site .fcx-panel--navy *,
.fcx-site .fcx-contact-band,
.fcx-site .fcx-contact-band *,
.fcx-site .fcx-section--dark,
.fcx-site .fcx-section--dark p,
.fcx-site .fcx-footer__bar,
.fcx-site .fcx-footer__bar *,
.fcx-site .fcx-mhead__util,
.fcx-site .fcx-mhead__util * { color: #fff; }
/* Phone numbers and e-mail links on any blue surface. */
.fcx-site .fcx-topbar a[href^="tel:"],
.fcx-site .fcx-topbar a[href^="mailto:"],
.fcx-site .fcx-rail a[href^="tel:"],
.fcx-site .fcx-rail a[href^="mailto:"],
.fcx-site .fcx-contact-band a,
.fcx-site .fcx-footer a[href^="tel:"],
.fcx-site .fcx-footer a[href^="mailto:"],
.fcx-site .fcx-mhead__util a { color: #fff !important; }
/* Icons on blue never render dark. */
.fcx-site .fcx-topbar svg,
.fcx-site .fcx-rail svg,
.fcx-site .fcx-famhelp svg,
.fcx-site .fcx-contact-band svg,
.fcx-site .fcx-footer__bar svg,
.fcx-site .fcx-mhead__util svg { color: #fff; }
/* Exception: white cards that sit on a blue panel keep their dark text. */
.fcx-site .fcx-fit__field,
.fcx-site .fcx-fit__field * { color: var(--fcx-ink); }
.fcx-site .fcx-fit__field .fcx-fit__label { color: var(--fcx-subtle); }
.fcx-site .fcx-fit__icon { color: var(--fcx-navy); }
/* ==========================================================================
7. Footer decoration — background only, copyright frame untouched
========================================================================== */
.fcx-footer::after {
background:
linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, .05) 42% 44%, transparent 44%),
linear-gradient(115deg, transparent 0 56%, rgba(255, 255, 255, .035) 56% 60%, transparent 60%),
linear-gradient(115deg, transparent 0 72%, rgba(255, 255, 255, .055) 72% 73%, transparent 73%),
radial-gradient(circle at 82% 18%, rgba(47, 111, 208, .16) 0%, transparent 58%);
}
/* A soft brand glow at the top edge, behind the columns. */
.fcx-footer__glow {
position: absolute;
top: -120px;
left: 50%;
width: 900px;
height: 300px;
margin-left: -450px;
background: radial-gradient(ellipse at center, rgba(47, 111, 208, .22) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
/* ==========================================================================
6. Welcome intro — travelling pickup through mountains
========================================================================== */
.fcx-welcome { gap: 0; overflow: hidden; }
.fcx-welcome__video,
.fcx-welcome__scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.fcx-welcome__video { object-fit: cover; animation: fcxWelcomeKenBurns 9s ease-out forwards; }
@keyframes fcxWelcomeKenBurns {
0% { transform: scale(1.12); filter: brightness(.82) saturate(1.05); }
100% { transform: scale(1); filter: brightness(1) saturate(1); }
}
@media (prefers-reduced-motion: reduce) {
.fcx-welcome__video { animation: none; }
}
.fcx-welcome__scene svg { width: 100%; height: 100%; display: block; }
.fcx-welcome__scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(5, 11, 26, .55) 0%, rgba(5, 11, 26, .22) 40%, rgba(5, 11, 26, .62) 100%);
}
.fcx-welcome__copy {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 0 24px;
text-align: center;
}
/* Cinematic parallax: three ranges at different speeds, streaming road,
truck driving in with headlights, slow push-in on the whole frame. */
.fcx-welcome__scene { animation: fcx-w-push 6s ease-out both; }
.fcx-w-l1 { animation: fcx-w-drift1 26s linear infinite; }
.fcx-w-l2 { animation: fcx-w-drift2 16s linear infinite; }
.fcx-w-l3 { animation: fcx-w-drift3 10s linear infinite; }
.fcx-w-road { animation: fcx-w-stream .85s linear infinite; }
.fcx-w-truck { animation: fcx-w-drive 2.1s cubic-bezier(.22, .7, .3, 1) both; }
.fcx-w-beam { animation: fcx-w-beam 2.4s ease-in-out infinite; }
.fcx-w-haze { animation: fcx-w-haze 14s ease-in-out infinite; }
.fcx-w-sun { animation: fcx-w-glow 5s ease-in-out infinite; }
@keyframes fcx-w-push { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes fcx-w-drive { from { transform: translateX(-460px); opacity: 0; } 12% { opacity: 1; } to { transform: translateX(980px); opacity: 1; } }
@keyframes fcx-w-drift1 { from { transform: translateX(0); } to { transform: translateX(-40px); } }
@keyframes fcx-w-drift2 { from { transform: translateX(0); } to { transform: translateX(-90px); } }
@keyframes fcx-w-drift3 { from { transform: translateX(0); } to { transform: translateX(-160px); } }
@keyframes fcx-w-stream { from { transform: translateX(0); } to { transform: translateX(-260px); } }
@keyframes fcx-w-beam { 0%,100% { opacity: .18; } 50% { opacity: .34; } }
@keyframes fcx-w-haze { 0%,100% { transform: translateX(-60px); opacity: .5; } 50% { transform: translateX(60px); opacity: .9; } }
@keyframes fcx-w-glow { 0%,100% { opacity: .75; } 50% { opacity: 1; } }
.fcx-welcome__badge { width: 92px; height: 92px; }
.fcx-welcome__badge svg { width: 46px; height: 46px; }
.fcx-welcome__title { margin: 0; }
.fcx-welcome__sub { margin: 0; }
@media (prefers-reduced-motion: reduce) {
.fcx-welcome__scene, .fcx-w-l1, .fcx-w-l2, .fcx-w-l3, .fcx-w-road,
.fcx-w-truck, .fcx-w-beam, .fcx-w-haze, .fcx-w-sun { animation: none; }
.fcx-w-truck { transform: translateX(560px); }
}
/* ==========================================================================
1. Header search — the icon is dramatically enlarged (2–3× a normal
utility icon) while the circle keeps it perfectly centred.
========================================================================== */
.fcx-site .fcx-headsearch button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 68px;
height: 68px;
flex: 0 0 68px;
background: var(--fcx-navy);
border-color: var(--fcx-navy);
box-shadow: 0 6px 18px rgba(34, 64, 122, .32);
}
.fcx-site .fcx-headsearch button svg {
width: 42px;
height: 42px;
display: block;
color: #fff !important;
stroke-width: 1.9;
}
.fcx-site .fcx-headsearch button:hover { transform: scale(1.06); }
@media (max-width: 640px) {
.fcx-site .fcx-headsearch button { width: 54px; height: 54px; flex-basis: 54px; }
.fcx-site .fcx-headsearch button svg { width: 32px; height: 32px; }
}
.fcx-site .fcx-mast__tools { display: flex; align-items: center; gap: 12px; }
/* ==========================================================================
1b. B2B access button — lives in the top utility bar next to the
"Pickup Cab & Accessories" item, styled as a premium members-portal
entry point rather than a plain nav link.
========================================================================== */
.fcx-site .fcx-topbar__b2b {
display: inline-flex;
align-items: center;
gap: 10px;
align-self: center;
flex: 0 0 auto;
position: relative;
overflow: hidden;
padding: 8px 18px 8px 8px;
margin-right: 6px;
border-radius: 999px;
background: linear-gradient(135deg, #3a76d8 0%, #1c3a72 68%, #142c5c 100%);
border: 1px solid rgba(255, 255, 255, .2);
text-decoration: none;
box-shadow: 0 4px 16px rgba(10, 22, 50, .38), inset 0 1px 0 rgba(255, 255, 255, .14);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.fcx-site .fcx-topbar__b2b::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .22) 46%, transparent 60%);
transform: translateX(-120%);
transition: transform .65s ease;
pointer-events: none;
}
.fcx-site .fcx-topbar__b2b:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(10, 22, 50, .48), inset 0 1px 0 rgba(255, 255, 255, .2);
filter: brightness(1.06);
}
.fcx-site .fcx-topbar__b2b:hover::after { transform: translateX(120%); }
.fcx-site .fcx-topbar__b2b-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex: 0 0 20px;
}
.fcx-site .fcx-topbar__b2b-icon svg { width: 20px; height: 20px; color: #fff !important; stroke-width: 2.1; }
.fcx-site .fcx-topbar__b2b-text { display: flex; flex-direction: column; line-height: 1.18; }
.fcx-site .fcx-topbar__b2b-title {
font-size: 12px;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
color: #fff !important;
}
.fcx-site .fcx-topbar__b2b-sub { font-size: 10.5px; font-weight: 500; color: rgba(255, 255, 255, .74) !important; }
.fcx-site .fcx-topbar__b2b.is-logged-in { box-shadow: 0 4px 16px rgba(10, 22, 50, .38), inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 2px rgba(87, 214, 140, .55); }
.fcx-site .fcx-topbar__b2b.is-logged-in .fcx-topbar__b2b-icon { position: relative; }
.fcx-site .fcx-topbar__b2b.is-logged-in .fcx-topbar__b2b-icon::after {
content: "";
position: absolute;
top: -2px;
right: -2px;
width: 7px;
height: 7px;
border-radius: 50%;
background: #57d68c;
box-shadow: 0 0 0 2px #16264a;
}
@media (max-width: 1240px) {
.fcx-site .fcx-topbar__b2b-text { display: none; }
.fcx-site .fcx-topbar__b2b { padding: 7px; }
}
/* Compact circular B2B button in the mobile header (no topbar there). */
.fcx-site .fcx-b2b-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 42px;
height: 42px;
border-radius: 50%;
position: relative;
background: linear-gradient(135deg, #3a76d8 0%, #1c3a72 100%);
color: #fff !important;
text-decoration: none;
box-shadow: 0 4px 14px rgba(10, 22, 50, .35), inset 0 1px 0 rgba(255, 255, 255, .16);
transition: transform .15s ease, filter .15s ease;
}
.fcx-site .fcx-b2b-link svg { width: 18px; height: 18px; color: #fff !important; flex: 0 0 auto; }
.fcx-site .fcx-b2b-link span { display: none; }
.fcx-site .fcx-b2b-link:hover { transform: translateY(-1px) scale(1.05); filter: brightness(1.08); }
.fcx-site .fcx-b2b-link.is-logged-in { box-shadow: 0 4px 14px rgba(10, 22, 50, .35), inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 2px rgba(87, 214, 140, .55); }
.fcx-site .fcx-b2b-link.is-logged-in::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: #57d68c;
box-shadow: 0 0 0 2px #fff;
}
/* ==========================================================================
2. Footer brand — the block sits at the left of the column; the logo
itself stays centred directly above the two-line company name.
========================================================================== */
.fcx-site .fcx-footer__brand {
display: inline-flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
margin: 0 0 16px;
width: auto;
}
.fcx-site .fcx-footer__brand .fcx-footer__names { align-items: center; text-align: center; }
.fcx-site .fcx-footer__brand .fcx-logo--footer { margin: 0 auto 2px; }
.fcx-site .fcx-footer__about { text-align: left; }
/* Footer phone numbers / addresses / office block: always solid white. */
.fcx-site .fcx-footer__office,
.fcx-site .fcx-footer__addr,
.fcx-site .fcx-footer__office a,
.fcx-site .fcx-footer__office div { color: #fff !important; }
.fcx-site .fcx-footer__office a:hover { color: var(--fcx-footer-hover, #fff) !important; text-decoration: underline; }
/* ==========================================================================
3. Product Families card — logo + name left-aligned, flush with the
family list below it, minimal gap between mark and text.
========================================================================== */
.fcx-site .fcx-rail__logo {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
text-align: left;
gap: 8px;
background: transparent;
border-radius: 0;
padding: 0 0 16px 12px;
margin: 4px 0 16px;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.fcx-site .fcx-rail__logo .fcx-logo--rail,
.fcx-site .fcx-rail__logo .fcx-footer__mark,
.fcx-site .fcx-rail__mark { margin: 0; display: block; flex: 0 0 auto; }
.fcx-site .fcx-rail__logo .fcx-footer__names,
.fcx-site .fcx-rail__names { align-items: flex-start; text-align: left; gap: 0; margin: 0; }
.fcx-site .fcx-rail__logo .fcx-footer__name,
.fcx-site .fcx-rail__name { margin: 0; line-height: 1.18; color: #fff !important; }
/* ==========================================================================
Footer — premium dark-blue automotive / technical background + dynamic
world map (see fcx_footer_world_map() — pins are data-driven).
========================================================================== */
.fcx-footer {
background:
radial-gradient(circle at 14% -10%, rgba(63, 122, 214, .22) 0%, transparent 46%),
radial-gradient(circle at 88% 112%, rgba(47, 111, 208, .16) 0%, transparent 50%),
linear-gradient(160deg, #0c1730 0%, #0f1e3d 38%, #16264a 72%, #0c1730 100%) !important;
}
.fcx-footer::before {
background-image:
linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
background-size: 42px 42px, 42px 42px;
mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
}
.fcx-footer > .fcx-footer__map-wrap,
.fcx-footer__map-wrap {
position: absolute !important;
inset: 0;
z-index: 0 !important;
pointer-events: none;
opacity: .55;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%);
}
.fcx-footer__map { width: 100%; height: 100%; display: block; }
.fcx-map__land circle { fill: rgba(255, 255, 255, .14); }
.fcx-map__pin .fcx-map__dot { fill: #4f8cf2; }
.fcx-map__pin .fcx-map__ping { fill: none; stroke: #4f8cf2; stroke-width: .35; opacity: 0; transform-origin: center; animation: fcxMapPing 3.2s ease-out infinite; }
.fcx-map__pin--home .fcx-map__dot { fill: #ffb020; }
.fcx-map__pin--home .fcx-map__ping { stroke: #ffb020; stroke-width: .4; animation-duration: 2.4s; }
@keyframes fcxMapPing {
0% { opacity: .85; transform: scale(.3); }
70% { opacity: 0; transform: scale(2.6); }
100% { opacity: 0; transform: scale(2.6); }
}
@media (prefers-reduced-motion: reduce) {
.fcx-map__pin .fcx-map__ping { animation: none; opacity: .25; transform: scale(1.4); }
}
@media (max-width: 640px) {
.fcx-footer__map-wrap { opacity: .35; }
}