/* ═══════════════════════════════════════ SMX CNC – Global Styles Barlow + Barlow Condensed @import dans ton : https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Barlow+Condensed:wght@700&display=swap ════════════════════════════════════════ */ body { background: #1a1a1a; font-family: 'Barlow', sans-serif; } /* ═══════════════════════════════════════ NAVBAR ════════════════════════════════════════ */ #smx-navbar { background: #161616; border-bottom: 1px solid #222; align-items: flex-start; padding-top: 14px; padding-bottom: 0; } /* Cap inner content at 1200px – background stays 100% */ #smx-navbar .container-xxl { max-width: 1200px; } /* Logo */ .smx-logo-text { font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 700; color: #fff; letter-spacing: 0.08em; line-height: 1; } .smx-logo-sub { font-size: 10px; color: #666; letter-spacing: 0.18em; text-transform: uppercase; display: block; margin-top: 2px; } .navbar-brand { padding-bottom: 14px; } /* Right column: nav on top, phone below */ .smx-right-col { display: flex; flex-direction: column; align-items: flex-end; } /* Nav row */ .smx-nav-row { display: flex; align-items: center; gap: 4px; padding-bottom: 6px; } /* Phone row – sits just below the nav links */ .smx-phone-row { width: 100%; display: flex; justify-content: flex-end; padding: 5px 4px 10px 4px; border-top: 0.5px solid #222; } .smx-phone-row a { font-size: 12px; color: #e8a020; font-weight: 600; letter-spacing: 0.05em; text-decoration: none; display: flex; align-items: center; gap: 5px; } .smx-phone-row a:hover { color: #f5b535; } .smx-phone-icon { width: 12px; height: 12px; stroke: #e8a020; fill: none; stroke-width: 2; stroke-linecap: round; } /* Nav links */ #smx-navbar .nav-link { color: #aaa; font-size: 13px; font-weight: 500; letter-spacing: 0.03em; padding: 7px 11px; border-radius: 6px; transition: color 0.15s, background 0.15s; } #smx-navbar .nav-link:hover, #smx-navbar .nav-link:focus { color: #fff; background: #222; } #smx-navbar .nav-link.active { color: #fff; } /* Soumission – highlighted */ #smx-navbar .nav-link.smx-quote { color: #e8a020; font-weight: 600; } #smx-navbar .nav-link.smx-quote:hover { color: #f5b535; background: rgba(232, 160, 32, 0.08); } /* Dropdown */ #smx-navbar .dropdown-menu { background: #1e1e1e; border: 0.5px solid #333; border-radius: 8px; padding: 6px 0; min-width: 230px; } #smx-navbar .dropdown-item { font-size: 12.5px; color: #aaa; padding: 8px 16px; letter-spacing: 0.02em; } #smx-navbar .dropdown-item:hover { color: #fff; background: #2a2a2a; } #smx-navbar .dropdown-divider { border-color: #2a2a2a; margin: 4px 0; } #smx-navbar .dropdown-toggle::after { border-top-color: #888; } /* Language toggle */ .smx-lang { font-size: 12px; color: #666; border: 0.5px solid #333; border-radius: 5px; padding: 5px 9px; background: transparent; cursor: pointer; font-family: 'Barlow', sans-serif; transition: color 0.15s, border-color 0.15s; } .smx-lang:hover { color: #aaa; border-color: #555; } /* Vertical divider (navbar) */ .smx-divider { width: 1px; height: 18px; background: #2a2a2a; display: inline-block; margin: 0 4px; vertical-align: middle; } /* Mobile toggler */ .navbar-toggler { border-color: #444; } .navbar-toggler-icon { filter: invert(0.6); } /* Mobile adjustments */ @media (max-width: 991px) { #smx-navbar { align-items: center; padding-bottom: 10px; } .smx-right-col { width: 100%; align-items: flex-start; } .smx-nav-row { flex-wrap: wrap; } .smx-phone-row { justify-content: flex-start; border-top: none; padding-top: 8px; } .navbar-brand { padding-bottom: 0; } } /* ═══════════════════════════════════════ FOOTER ════════════════════════════════════════ */ #smx-footer { background: #111; border-top: 1px solid #222; } /* Cap inner content at 1200px – background stays 100% */ #smx-footer .container-xxl { max-width: 1200px; } /* ── Main columns ── */ .ft-top { background: #161616; padding: 40px 0 32px; border-bottom: 1px solid #222; } .ft-logo-text { font-family: 'Barlow Condensed', sans-serif; font-size: 24px; font-weight: 700; color: #fff; letter-spacing: 0.08em; line-height: 1; } .ft-logo-sub { font-size: 10px; color: #555; letter-spacing: 0.18em; text-transform: uppercase; display: block; margin-top: 2px; margin-bottom: 16px; } .ft-desc { font-size: 12.5px; color: #666; line-height: 1.7; margin-bottom: 20px; } .ft-address { font-size: 12px; color: #555; line-height: 1.8; } .ft-address a { color: #e8a020; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; } .ft-address a:hover { color: #f5b535; } .ft-phone-icon { width: 12px; height: 12px; stroke: #e8a020; fill: none; stroke-width: 2; stroke-linecap: round; } /* Trust badges */ .ft-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .ft-badge { font-size: 11px; color: #555; border: 0.5px solid #2a2a2a; border-radius: 5px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 5px; } .ft-badge-icon { width: 11px; height: 11px; stroke: #e8a020; fill: none; stroke-width: 2; flex-shrink: 0; } /* Column titles */ .ft-col-title { font-size: 11px; font-weight: 600; color: #fff; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 0.5px solid #222; } /* Column links */ .ft-col a { display: block; font-size: 12.5px; color: #666; text-decoration: none; padding: 4px 0; transition: color 0.15s; } .ft-col a:hover { color: #e8a020; } .ft-col .ft-col-cta { color: #e8a020; font-weight: 600; } /* ── Newsletter ── */ .ft-newsletter { background: #1a1a1a; border-bottom: 1px solid #222; padding: 20px 0; } .ft-nl-label { font-size: 13px; color: #aaa; font-weight: 500; } .ft-nl-label span { color: #666; font-size: 12px; font-weight: 400; display: block; margin-top: 2px; } .ft-nl-input { background: #222; border: 0.5px solid #333; border-radius: 6px; padding: 8px 14px; font-size: 12.5px; color: #fff; font-family: 'Barlow', sans-serif; outline: none; width: 240px; transition: border-color 0.15s; } .ft-nl-input::placeholder { color: #555; } .ft-nl-input:focus { border-color: #555; } .ft-nl-btn { background: #e8a020; color: #000; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 18px; border-radius: 6px; border: none; cursor: pointer; transition: background 0.15s; } .ft-nl-btn:hover { background: #f5b535; } /* ── Bottom bar ── */ .ft-bottom { background: #0a0a0a; padding: 12px 0; } .ft-copy { font-size: 11px; color: #444; letter-spacing: 0.02em; } .ft-legal a { font-size: 11px; color: #444; text-decoration: none; transition: color 0.15s; } .ft-legal a:hover { color: #aaa; } /* Social icons */ .ft-social { width: 28px; height: 28px; border: 0.5px solid #2a2a2a; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.15s; text-decoration: none; } .ft-social:hover { border-color: #555; } .ft-social-icon { width: 13px; height: 13px; fill: none; stroke: #555; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.15s; } .ft-social:hover .ft-social-icon { stroke: #aaa; } /* Mobile footer */ @media (max-width: 991px) { .ft-newsletter .d-flex { flex-direction: column; align-items: flex-start; gap: 12px; } .ft-nl-input { width: 100%; } .ft-bottom .d-flex { flex-direction: column; gap: 10px; text-align: center; } }