/* ============================================================================
theme.css — Refresh grafico Falkem Swiss (2026)
Caricato PER ULTIMO. Modernizza tipografia, colori, spaziature e componenti
sopra il markup esistente, mantenendo l'identità (arancione del logo) e la
piena usabilità. Ispirato a IMCD / Brenntag / Univar: sans-serif pulito,
accenti blu/navy, molto bianco, hero ampio, contenuti a card.
I font (Inter + Poppins) sono caricati via +
nell' di ogni pagina (più veloce dell'@import, che blocca il rendering).
============================================================================ */
:root {
/* Colori aziendali ammorbiditi: il logo usa blu #4878d8 e arancione #ff7900,
entrambi molto accesi → qui versioni più tenui, calde e professionali,
mantenendo l'identità. */
--navy:#22384f; --navy-2:#2d4a68; /* slate navy morbido (sezioni scure) */
--blue:#4a73b2; --blue-d:#3c6098; /* blu del logo desaturato (link/accenti) */
--orange:#e2823f; --orange-d:#c96e2c; /* arancione del logo virato ad ambra caldo (CTA) */
--orange-soft:#f2cba6; /* ambra chiaro (occhielli) */
--ink:#1f2a37; --text:#4a525f; --muted:#7b8493;
--bg:#ffffff; --soft:#f5f7fa; --border:#e6e9ef;
--radius:12px;
--shadow:0 8px 30px rgba(15,39,66,.08);
--shadow-h:0 16px 44px rgba(15,39,66,.16);
--maxw:1140px;
}
/* ----------------------------------------------------------------- base --- */
html { scroll-behavior:smooth; }
body {
font-family:'Inter', system-ui, -apple-system, Arial, sans-serif;
color:var(--text); font-size:16px; line-height:1.65;
background:var(--navy); -webkit-font-smoothing:antialiased;
}
a { color:var(--blue); }
img { border:0; }
h1, h2, h3,
.services_hdng, .products_hdng, .falkam_swiss_hdng,
.inner_hdng, .banner_hdng, .cf-h, .hero-title, .address_hdng, .address_hdng1 {
font-family:'Poppins', system-ui, sans-serif; color:var(--ink); letter-spacing:0;
}
/* full-bleed sections + contenitore centrato */
#header, #navigation, #banner_inner, #body, #welcome, #footer {
width:100%; max-width:none; float:none;
}
.contain {
width:auto; max-width:var(--maxw);
margin:0 auto; padding:0 28px; box-sizing:border-box;
}
/* --------------------------------------------------------------- header --- */
#header { display:none; }
#header .contain { }
.hdr_main { width:100%; display:flex; align-items:center; justify-content:space-between; }
.logo_main { float:none; margin:14px 0; }
.logo_main img { height:46px; width:auto; }
.search { float:none; width:auto; height:auto; margin:0; display:flex; align-items:center; gap:8px; }
.search_icon { float:none; width:auto; padding:0; }
.login { float:none; padding:0; margin:0; }
.login a { color:var(--text); font-family:'Inter',sans-serif; font-weight:500; font-size:14px; }
.login a:hover { color:var(--orange); }
/* ----------------------------------------------------------- navigation --- */
#navigation {
background:#fff;
border-bottom:1px solid var(--border);
position:sticky;
top:0;
z-index:50;
box-shadow:0 8px 28px rgba(15,39,66,.06);
}
#navigation .contain {
display:flex;
align-items:center;
justify-content:stretch;
gap:12px;
max-width:none;
height:72px;
min-height:72px;
padding:10px 18px;
box-sizing:border-box;
}
.nav-logo { flex:0 0 auto; margin:0; width:auto; }
.nav-logo img { height:38px; width:auto; display:block; }
.nav_menu { float:none; width:auto; padding:0; flex:1 1 auto; }
.nav_menu ul { display:flex; align-items:center; gap:2px; width:100%; }
.nav_li { float:none; padding:0; font-size:15px; }
.nav_navi { display:flex; align-items:center; height:42px; padding:0 14px; box-sizing:border-box;
font-family:'Inter',sans-serif; font-weight:500; font-size:15px; color:var(--ink);
position:relative; white-space:nowrap; }
.nav_navi:hover { color:var(--orange); }
.nav_navi::after { content:''; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
background:var(--orange); transform:scaleX(0); transition:transform .2s ease; }
.nav_navi:hover::after { transform:scaleX(1); }
/* voce del menu della pagina corrente: evidenziata e con sottolineatura fissa */
.nav_navi[aria-current="page"] { color:var(--orange); font-weight:600; }
.nav_navi[aria-current="page"]::after { transform:scaleX(1); }
.nav-actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; margin-left:auto; }
.nav-contact-cta, .call_main, .nav-toggle { box-sizing:border-box; }
.nav-contact-cta { height:42px; display:inline-flex; align-items:center; }
.nav-contact-cta { padding:0 14px; font-size:13.5px; white-space:nowrap; }
.nav-contact-cta[aria-current="page"] { background:var(--orange-d); box-shadow:0 10px 24px rgba(226,130,63,.28); }
.call_main {
float:none;
display:inline-flex;
align-items:center;
gap:8px;
background:#f4f8fb !important;
border:1px solid rgba(74,115,178,.22);
border-radius:8px;
height:42px;
padding:0 16px;
margin:0;
color:var(--navy);
font-family:'Inter',sans-serif;
font-weight:700;
font-size:14px;
line-height:1;
text-decoration:none;
white-space:nowrap;
transition:all .2s ease;
}
.call_main span { color:var(--orange); font-size:14px; display:inline; }
.call_main .call-number { color:var(--navy); display:inline; }
.call_main:hover {
color:var(--navy);
border-color:var(--orange);
background:#fff7ed !important;
transform:translateY(-1px);
}
.nav-toggle {
display:none;
width:42px;
height:42px;
align-items:center;
justify-content:center;
flex-direction:column;
gap:5px;
border:1px solid rgba(74,115,178,.22);
border-radius:8px;
background:#f4f8fb;
cursor:pointer;
padding:0;
}
.nav-toggle span {
display:block;
width:18px;
height:2px;
border-radius:2px;
background:var(--navy);
}
#navigation.nav-open .nav-toggle {
border-color:var(--orange);
background:#fff7ed;
}
/* CTA compatto nell'header (sostituisce il vecchio "Webmail Login") */
.header-cta { padding:9px 20px; font-size:14px; }
/* -------------------------------------------------- sezione Download --- */
.dl-list { display:flex; flex-direction:column; gap:14px; max-width:820px; }
.dl-item { display:flex; align-items:center; gap:18px; background:#fff;
border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
padding:18px 22px; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
.dl-item:hover { transform:translateY(-3px); box-shadow:var(--shadow-h); }
.dl-ico { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
width:42px; height:42px; background:var(--orange); color:#fff; border-radius:8px; }
.dl-ico .ico-svg { width:22px; height:22px; }
.dl-meta { flex:1; display:flex; flex-direction:column; gap:3px; }
.dl-meta strong { color:var(--ink); font-family:'Poppins',sans-serif; font-size:16px; }
.dl-meta span { color:var(--muted); font-size:14px; }
.dl-act { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; color:var(--orange); font-weight:600; white-space:nowrap; }
.dl-act .ico-svg { width:16px; height:16px; }
.dl-note { margin-top:24px; color:var(--muted); font-size:14px; max-width:820px; }
/* -------------------------------------------------------------- buttons --- */
.btn { display:inline-block; font-family:'Inter',sans-serif; font-weight:600; font-size:15px;
padding:13px 26px; border-radius:8px; text-decoration:none; cursor:pointer;
border:2px solid transparent; transition:all .2s ease; }
.btn-primary { background:var(--orange); color:#fff; }
.btn-primary:hover { background:var(--orange-d); color:#fff; transform:translateY(-2px);
box-shadow:0 10px 24px rgba(226,130,63,.34); }
.btn.nav-contact-cta {
display:inline-flex;
align-items:center;
justify-content:center;
height:42px;
padding:0 14px;
line-height:1;
}
.btn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.btn-ghost:hover { background:#fff; color:var(--navy); border-color:#fff; }
/* --------------------------------------------------------- hero (index) --- */
#hero {
position:relative;
min-height:calc(100vh - 73px);
display:flex;
align-items:center;
background-color:var(--navy);
background-image:
linear-gradient(180deg, rgba(15,39,66,.28), rgba(15,39,66,.68)),
url('images/banner_bg_tall.jpg');
background-position:top center, top center;
background-size:100% 100%, calc(100% + 2px) auto;
background-repeat:no-repeat;
overflow:hidden;
}
.hero-inner { width:100%; max-width:var(--maxw); margin:0 auto; padding:96px 28px; color:#fff; }
.hero-eyebrow { text-transform:uppercase; letter-spacing:.14em; font-weight:600; font-size:13px;
color:var(--orange-soft); margin:0 0 14px; }
.hero-title { font-weight:700; color:#fff; font-size:48px; line-height:1.12; max-width:760px; margin:0 0 18px; }
.hero-sub { font-size:18px; max-width:620px; color:rgba(255,255,255,.92); margin:0 0 30px; font-style:italic; }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; }
/* --------------------------------------------------- banner pagine interne --- */
#banner_inner { height:auto;
background:linear-gradient(180deg, rgba(15,39,66,.64), rgba(15,39,66,.74)),
url('images/bnr_inner_bg.jpg') center/cover no-repeat; }
.banner_hdng { float:none; width:auto; color:#fff; font-size:38px; font-weight:700;
line-height:1.15; margin:0; padding:56px 0; text-transform:none; }
.banner_small_img { display:none; } /* immagini-banner generiche: rimosse */
/* ---------------------------------------------------- titoli di sezione --- */
.services_hdng, .products_hdng, .falkam_swiss_hdng {
float:none; width:auto; font-size:28px; font-weight:700; color:var(--ink);
text-transform:none; margin:0 0 26px; padding:0 0 14px;
border-bottom:2px solid var(--border); position:relative;
}
.services_hdng::after, .products_hdng::after, .falkam_swiss_hdng::after {
content:''; position:absolute; left:0; bottom:-2px; width:64px; height:2px; background:var(--orange);
}
/* ------------------------------------------------------- sezione "body" --- */
#body {
background:
linear-gradient(135deg, rgba(226,130,63,.08), transparent 28%),
linear-gradient(180deg, #f8fbfd 0%, #edf3f7 100%);
padding:72px 0;
}
#body .contain { display:flex; flex-wrap:wrap; gap:44px; align-items:flex-start; }
/* i div .clear sono artefatti del vecchio layout float: inutili dentro ai flex */
#body .contain > .clear, .footer_main > .clear,
#navigation .contain > .clear, .hdr_main > .clear { display:none; }
/* HOME: servizi (sinistra) + prodotti (destra) */
.our_services_main { float:none; width:auto; margin:0; flex:1 1 62%; }
.our_products_main {
float:none; width:auto; margin:0; flex:1 1 30%;
background:linear-gradient(155deg, var(--navy), var(--navy-2));
border-radius:var(--radius); box-shadow:var(--shadow-h);
padding:28px; color:#dce6ef;
box-sizing:border-box; min-width:0; max-width:100%;
}
.our_products_main .products_hdng { color:#fff; border-bottom-color:rgba(255,255,255,.18); }
.our_products_main .product1_main { border-bottom-color:rgba(255,255,255,.16); }
.our_products_main .product_txt1 { color:var(--orange-soft); }
.our_products_main .product_txt2 { color:#dce6ef; }
.our_products_main .btn-outline { color:#fff; border-color:rgba(255,255,255,.28); }
.our_products_main .btn-outline:hover { color:#fff; border-color:var(--orange); background:rgba(226,130,63,.16); }
.services_row1 { float:none; width:auto; display:flex; flex-wrap:wrap; gap:20px; padding:0 0 20px; }
.servicesOur { float:none; width:auto; flex:1 1 220px; background:linear-gradient(145deg, #fff 0%, #f3f8fb 100%);
border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
padding:24px; transition:transform .2s ease, box-shadow .2s ease; }
.servicesOur:nth-child(2n) { background:linear-gradient(145deg, #fff7ed 0%, #fff 70%); }
.servicesOur:hover { transform:translateY(-4px); box-shadow:var(--shadow-h); }
.services1_hdng { float:none; width:auto; padding:0 0 8px; font-size:18px; }
.services1_hdng_navi { color:var(--ink); font-weight:600; }
.services1_hdng_navi:hover { color:var(--orange); }
.services111_box_main, .services1_box_main, .product1_box_main {
float:none; width:auto; background:none; border:none; padding:0; height:auto !important;
color:var(--text); font-size:15px; line-height:1.6; }
/* Niente linea/bordo a lato del testo, NEMMENO in hover (su tutti i box, tutte le pagine):
resta solo l'animazione di sollevamento della card. */
.services111_box_main, .services1_box_main, .product1_box_main, .services11_box_main,
.services111_box_main:hover, .services1_box_main:hover,
.product1_box_main:hover, .services11_box_main:hover {
border: none !important;
}
/* HOME: lista prodotti (sidebar) */
.product1_main { padding:16px 0; border-bottom:1px solid var(--border); }
.product_txt1 { font-weight:600; color:var(--blue); font-size:16px; padding-bottom:6px; }
.product_txt2 { color:var(--text); font-size:14.5px; line-height:1.6; }
/* PAGINE servizi / prodotti / about / contatti: il wrapper riempie la riga */
.inner_body_main { float:none; width:auto; margin:0; flex:1 1 100%; }
.inner_services_main { float:none; width:auto; display:flex; flex-wrap:wrap; gap:24px; padding:0 0 8px; }
.services1 { float:none; width:auto; margin:0; flex:1 1 260px; background:linear-gradient(145deg, #fff 0%, #f5f9fb 100%);
border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
padding:26px; transition:transform .2s ease, box-shadow .2s ease; }
.inner_services_main .services1:nth-child(2n) { background:linear-gradient(145deg, #fff8f0 0%, #fff 72%); }
.services1:hover { transform:translateY(-4px); box-shadow:var(--shadow-h); }
.line { display:none; }
.contactListLink { position:static; text-align:left; padding-top:14px; }
.contactListLink a { color:var(--orange); font-weight:600; }
.contactListLink a:hover { color:var(--orange-d); }
/* PRODUCT LIST: righe illustrate, non griglia di box bianchi */
.product-list-intro {
max-width:780px;
margin:0 0 34px;
}
.section-kicker {
margin:0 0 10px;
color:var(--orange-d);
font-size:13px;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
}
.product-list-intro h2 {
margin:0 0 14px;
font-size:34px;
line-height:1.18;
}
.product-list-intro p {
margin:0;
color:var(--text);
font-size:17px;
line-height:1.7;
}
.product-showcase {
display:flex;
flex-direction:column;
gap:28px;
}
.product-card {
display:grid;
grid-template-columns:minmax(260px, 38%) 1fr;
min-height:320px;
overflow:hidden;
border:1px solid rgba(74,115,178,.14);
border-radius:18px;
background:linear-gradient(120deg, #f6f0e8 0%, #ffffff 46%, #eaf2f7 100%);
box-shadow:0 18px 48px rgba(15,39,66,.12);
}
.product-card:nth-child(2n) {
grid-template-columns:1fr minmax(260px, 38%);
background:linear-gradient(120deg, #e7f0f6 0%, #ffffff 52%, #fff6ea 100%);
}
.product-card:nth-child(2n) .product-media { order:2; }
.product-media {
min-height:320px;
overflow:hidden;
background:#e9f1f6;
position:relative;
align-self:stretch;
}
.product-media img {
position:absolute;
inset:0;
width:100%;
height:100%;
min-height:0;
display:block;
object-fit:cover;
object-position:center;
transform:scale(1.045);
transform-origin:left center;
}
.product-card:nth-child(2n) .product-media img {
transform-origin:right center;
}
.product-copy {
position:relative;
display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
padding:42px;
}
.product-count {
display:inline-flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
margin-bottom:18px;
border-radius:50%;
background:rgba(226,130,63,.13);
color:var(--orange-d);
font-weight:700;
}
.product-copy h2 {
margin:0 0 12px;
color:var(--ink);
font-size:28px;
}
.product-copy p {
max-width:620px;
margin:0 0 24px;
color:var(--text);
font-size:16px;
line-height:1.7;
}
.product-card:nth-child(3) {
grid-template-columns:1fr minmax(260px, 38%);
background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
}
.product-card:nth-child(3) .product-media { order:2; }
.product-card:nth-child(3) .product-media img {
transform-origin:center center;
}
.product-card:nth-child(3) .product-copy h2,
.product-card:nth-child(3) .product-copy p { color:#fff; }
.product-card:nth-child(3) .product-count {
background:rgba(255,255,255,.14);
color:var(--orange-soft);
}
/* ABOUT: prosa */
.inner_about_txt {
float:none; width:auto; font-size:17px; color:var(--text); max-width:860px;
padding:36px;
border-left:6px solid var(--orange);
border-radius:0 var(--radius) var(--radius) 0;
background:linear-gradient(135deg, #ffffff 0%, #eef5f9 100%);
box-shadow:var(--shadow);
}
.privacy-page {
max-width:1060px;
}
.privacy-lead {
max-width:780px;
margin:0 0 30px;
}
.privacy-lead h2 {
margin:0 0 14px;
font-size:34px;
line-height:1.18;
}
.privacy-lead p {
margin:0;
color:var(--text);
font-size:17px;
line-height:1.7;
}
.privacy-grid {
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:22px;
}
.privacy-panel {
padding:26px;
border:1px solid rgba(74,115,178,.14);
border-radius:var(--radius);
background:linear-gradient(145deg, #fff 0%, #f3f8fb 100%);
box-shadow:var(--shadow);
}
.privacy-panel:nth-child(3n) {
background:linear-gradient(145deg, #fff7ed 0%, #fff 72%);
}
.privacy-panel-strong {
background:linear-gradient(155deg, var(--navy), var(--navy-2));
color:#dce6ef;
}
.privacy-panel h3 {
margin:0 0 12px;
color:var(--ink);
font-size:18px;
line-height:1.3;
}
.privacy-panel-strong h3 { color:#fff; }
.privacy-panel p {
margin:0 0 12px;
color:var(--text);
font-size:15px;
line-height:1.7;
}
.privacy-panel p:last-child { margin-bottom:0; }
.privacy-panel-strong p { color:#dce6ef; }
.privacy-panel-strong a { color:#fff; font-weight:600; }
/* ----------------------------------------------- sezione FALKEM SWISS --- */
#welcome { background:#fff; padding:72px 0; }
.falkam_swiss_main { float:none; width:auto; padding:0; }
.falkam_swiss_txt { float:none; width:auto; max-width:840px; }
.falkam_swiss_txt_main { float:none; width:auto; padding-top:18px; font-size:16px; color:var(--text); }
/* CTA di sezione (home: "tutti i servizi/prodotti") */
.section-cta { margin-top:26px; }
.btn-outline { background:transparent; color:var(--navy); border-color:var(--border); }
.btn-outline:hover { border-color:var(--orange); color:var(--orange); transform:translateY(-2px); }
/* "Why Falkem Swiss": punti di forza in card */
.why { display:flex; flex-wrap:wrap; gap:22px; margin-top:30px; }
.why-item { flex:1 1 200px; background:linear-gradient(145deg, #fff 0%, #f5f9fb 100%); border:1px solid var(--border);
border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; }
.why-item:nth-child(2n) { background:linear-gradient(145deg, #fff7ed 0%, #fff 74%); }
.why-item h3 { font-family:'Poppins',sans-serif; font-size:17px; color:var(--ink); margin:0 0 8px; }
.why-item p { margin:0; font-size:14.5px; color:var(--text); line-height:1.6; }
/* ----------------------------------------------------------------- footer --- */
#footer { background:var(--navy); padding:22px 0 16px; }
.footer_main { float:none; width:auto; padding:0; display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; }
.footer_left { float:none; width:auto; margin:0; flex:2 1 520px; display:grid;
grid-template-columns:minmax(0, 1fr) 70px; gap:6px 20px; align-items:start; }
.footer_right { float:none; width:auto; padding:0; flex:1 1 250px; }
.ftr_navigation { float:none; width:auto; padding-bottom:6px; grid-column:1; }
.ftr_navigation ul { display:flex; flex-wrap:wrap; gap:0 14px; }
.ftr_li { background:none; padding:0 !important; line-height:1.25; }
.ftr_li_navi { color:#c4cedb; font-weight:500; font-size:14px; }
.ftr_li_navi:hover { color:#fff; }
.email_us_main { float:none; width:auto; grid-column:1; }
.email_main { float:none; width:auto; color:#e3e9f1; font-size:14px; line-height:1.35; }
.footer-phone-main { margin-top:2px; }
.email_link_navi { color:#9fd0ff; }
.find_out_main { float:none; width:auto; }
.find_out_main a { color:#8d99a8; }
.copyright_main { float:none; width:auto; color:#8d99a8; font-size:12.5px; line-height:1.3; padding-top:8px; }
.footer_middle { float:none; grid-column:2; grid-row:1 / span 2; margin:0; align-self:center; justify-self:center; transform:translateY(22px); }
.footer_middle img { width:64px; height:64px; object-fit:contain; }
.company_name { float:none; width:auto; color:#fff; font-weight:600; font-size:14px; line-height:1.3; }
.company_add { float:none; width:auto; color:#9fabba; font-size:14px; line-height:1.35; }
/* --------------------------------------------- pagina contatti (allineo) --- */
#body .cf-wrap { width:100%; }
/* ============================== RESPONSIVE (proprio del tema) ============== */
@media (max-width:900px) {
.hero-title { font-size:38px; }
.hero-inner { padding:92px 28px; }
.product-card,
.product-card:nth-child(2n),
.product-card:nth-child(3) {
grid-template-columns:1fr;
}
.product-card:nth-child(3) {
background:linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
}
.product-card:nth-child(2n) .product-media,
.product-card:nth-child(3) .product-media { order:0; }
.product-card .product-media img,
.product-card:nth-child(2n) .product-media img,
.product-card:nth-child(3) .product-media img {
transform-origin:center center;
transform:none;
}
.product-media,
.product-media img {
height:300px;
min-height:260px;
max-height:360px;
}
.product-copy { padding:32px; }
.privacy-grid { grid-template-columns:1fr; }
}
@media (max-width:1260px) {
#navigation .contain {
position:relative;
flex-wrap:nowrap;
justify-content:space-between;
}
.nav-logo { margin:0; min-width:0; }
.call_main { justify-content:center; }
.call-number { display:inline; }
.nav-toggle { display:inline-flex; flex:0 0 auto; }
.nav_menu { position:absolute; top:100%; right:18px; display:none; width:min(260px, calc(100vw - 36px)); padding:10px 0 12px; }
#navigation.nav-open .nav_menu { display:block; }
.nav_menu ul {
display:grid;
grid-template-columns:1fr;
gap:4px;
width:100%;
box-sizing:border-box;
padding:10px;
border:1px solid var(--border);
border-radius:10px;
background:#fff;
box-shadow:0 18px 44px rgba(15,39,66,.16);
}
.nav_li { width:100%; box-sizing:border-box; }
.nav_navi {
padding:11px 12px;
border-radius:8px;
white-space:nowrap;
box-sizing:border-box;
}
.nav_navi:hover { background:#fff7ed; }
.nav_navi::after { display:none; }
}
@media (max-width:768px) {
#body, #welcome { padding:48px 0; }
#body .contain { flex-direction:column; gap:32px; }
.our_services_main, .our_products_main { flex:1 1 100%; width:100%; }
.footer_main { gap:24px; }
.hero-title { font-size:30px; }
.hero-sub { font-size:16px; }
.hero-inner { padding:64px 22px; }
.banner_hdng { font-size:28px; padding:40px 0; }
.contain { padding:0 18px; }
.logo_main { margin:10px 0; }
}
@media (max-width:560px) {
#navigation .contain {
gap:6px;
min-height:58px;
padding:8px 8px;
}
.nav-logo img { height:26px; }
.nav-actions { gap:4px; min-width:0; flex:0 0 auto; }
.btn.nav-contact-cta { height:36px; padding:0 8px; font-size:12px; }
.call_main { height:36px; padding:0 8px; font-size:12.5px; }
.call_main span { font-size:12.5px; }
.call_main .call-number { display:none; }
.nav-toggle { width:35px; height:36px; }
.nav_menu { right:8px; width:min(240px, calc(100vw - 16px)); }
.hero-title { font-size:26px; }
.dl-item { flex-direction:column; align-items:flex-start; }
.dl-meta { width:100%; min-width:0; }
.dl-act { white-space:normal; }
.services_row1 { gap:16px; }
.servicesOur, .services1 { flex:1 1 100%; }
.hdr_main { gap:10px; }
.product-list-intro h2 { font-size:27px; }
.product-card { border-radius:12px; }
.product-copy { padding:24px; }
.product-copy h2 { font-size:24px; }
.product-media,
.product-media img {
height:240px;
min-height:220px;
max-height:260px;
}
#footer { padding:16px 0 14px; }
.footer_main { gap:12px; }
.footer_left {
grid-template-columns:1fr;
gap:6px;
}
.ftr_navigation { padding-bottom:4px; }
.ftr_navigation ul { gap:0 12px; }
.ftr_li_navi { font-size:13.5px; }
.email_main { font-size:13.5px; line-height:1.3; }
.copyright_main { font-size:12px; padding-top:6px; }
.footer_middle img { width:54px; height:54px; }
.footer_middle { grid-column:1; grid-row:auto; justify-self:start; transform:none; }
.footer_right {
display:grid;
grid-template-columns:1fr;
gap:6px;
}
.company_name { font-size:13.5px; }
.company_add { font-size:13px; line-height:1.25; }
}
@media (max-width:360px) {
#navigation .contain {
gap:4px;
padding:8px 6px;
}
.nav-logo img { height:24px; }
.nav-actions { gap:3px; }
.btn.nav-contact-cta { padding:0 6px; font-size:11.5px; }
.call_main { min-width:58px; padding:0 10px; justify-content:center; }
.call_main .call-label { font-size:11px; }
.nav-toggle { width:34px; }
}
/* ===========================================================================
MODERNIZATION 2026 — Direction A "Swiss Trust"
Appended block. Reusable components used across home, services, products,
quality and contact pages. Tokens reused from :root above.
('falkem-include' is the build-time chrome wrapper — must not render.)
=========================================================================== */
falkem-include { display:contents; }
/* shared section shells ---------------------------------------------------- */
.section { padding:72px 0; }
.section--soft { background:linear-gradient(180deg,#f8fbfd 0%, #edf3f7 100%); }
.section--white { background:#fff; }
.section--navy { background:linear-gradient(155deg,var(--navy),var(--navy-2)); color:#dce6ef; }
.section-head { max-width:780px; margin:0 0 34px; }
.section-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2 { margin:0 0 14px; font-size:32px; line-height:1.18; color:var(--ink); }
.section--navy .section-head h2 { color:#fff; }
.section-head p { margin:0; color:var(--text); font-size:17px; line-height:1.7; }
.section--navy .section-head p { color:#cdd9e6; }
.eyebrow { margin:0 0 10px; color:var(--orange-d); font-size:13px; font-weight:700;
letter-spacing:.12em; text-transform:uppercase; }
.section--navy .eyebrow { color:var(--orange-soft); }
/* hero proof chips (inside .hero-inner) ------------------------------------ */
.hero-stats { display:flex; flex-wrap:wrap; gap:26px 40px; margin:34px 0 0; padding:0; list-style:none; }
.hero-stats li { color:#fff; }
.hero-stats .num { display:block; font-family:'Poppins',sans-serif; font-weight:700; font-size:30px; line-height:1.1; }
.hero-stats .lbl { display:block; font-size:13.5px; color:rgba(255,255,255,.82); margin-top:4px; max-width:170px; }
/* three pillars ------------------------------------------------------------ */
.pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pillar { background:linear-gradient(145deg,#fff 0%, #f3f8fb 100%); border:1px solid var(--border);
border-radius:var(--radius); box-shadow:var(--shadow); padding:30px 26px;
transition:transform .2s ease, box-shadow .2s ease; }
.pillar:nth-child(2n) { background:linear-gradient(145deg,#fff7ed 0%, #fff 70%); }
.pillar:hover { transform:translateY(-4px); box-shadow:var(--shadow-h); }
.pillar .ico { display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px;
border-radius:12px; background:rgba(226,130,63,.13); color:var(--orange-d); margin-bottom:16px; }
.pillar h3 { font-family:'Poppins',sans-serif; font-size:19px; color:var(--ink); margin:0 0 10px; }
.pillar p { margin:0; font-size:15px; color:var(--text); line-height:1.65; }
/* trust / certifications strip --------------------------------------------- */
.trust-strip { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 18px; }
.trust-item { display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--border);
border-radius:999px; padding:10px 18px; box-shadow:var(--shadow); font-weight:600; font-size:14px; color:var(--ink); }
.trust-item .dot { width:9px; height:9px; border-radius:50%; background:var(--orange); flex:0 0 auto; }
.trust-note { margin:18px auto 0; max-width:760px; text-align:center; color:var(--muted); font-size:13.5px; }
/* service detail blocks (our_services) ------------------------------------- */
.service-list { display:flex; flex-direction:column; gap:22px; }
.service-block { scroll-margin-top:90px; background:linear-gradient(145deg,#fff 0%, #f5f9fb 100%);
border:1px solid var(--border); border-left:6px solid var(--orange); border-radius:0 var(--radius) var(--radius) 0;
box-shadow:var(--shadow); padding:30px 32px; }
.service-block:nth-child(2n) { background:linear-gradient(145deg,#fff8f0 0%, #fff 72%); }
.service-block .ico { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
border-radius:10px; background:rgba(226,130,63,.13); color:var(--orange-d); margin-bottom:14px; }
.service-block .ico .ico-svg { width:24px; height:24px; }
.service-block h3 { font-family:'Poppins',sans-serif; font-size:22px; color:var(--ink); margin:0 0 6px; }
.service-block .role { margin:0 0 14px; color:var(--orange-d); font-size:13px; font-weight:700;
letter-spacing:.08em; text-transform:uppercase; }
.service-block p { margin:0 0 14px; color:var(--text); font-size:15.5px; line-height:1.7; }
.service-block ul { margin:0 0 18px; padding-left:20px; color:var(--text); font-size:15px; line-height:1.7; }
.service-block ul li { margin-bottom:4px; }
.service-block .btn { font-size:14px; padding:11px 22px; }
.service-nav { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 30px; }
.service-nav a { display:inline-flex; align-items:center; padding:9px 16px; border-radius:999px;
border:1px solid var(--border); background:#fff; color:var(--navy); font-weight:600; font-size:14px;
text-decoration:none; transition:all .2s ease; }
.service-nav a:hover { border-color:var(--orange); color:var(--orange-d); }
/* quality & compliance page ------------------------------------------------ */
.quality-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.quality-card { padding:28px; border:1px solid var(--border); border-radius:var(--radius);
background:linear-gradient(145deg,#fff 0%, #f3f8fb 100%); box-shadow:var(--shadow); }
.quality-card:nth-child(2n) { background:linear-gradient(145deg,#fff7ed 0%, #fff 72%); }
.quality-card h3 { font-family:'Poppins',sans-serif; font-size:18px; color:var(--ink); margin:0 0 12px; }
.quality-card p { margin:0 0 12px; color:var(--text); font-size:15px; line-height:1.7; }
.quality-card p:last-child { margin-bottom:0; }
.quality-card .verified { color:var(--blue-d); font-weight:600; }
.draft-flag { display:inline-block; margin-bottom:18px; padding:8px 14px; border-radius:8px;
background:#fff6ea; border:1px solid var(--orange-soft); color:var(--orange-d);
font-size:13px; font-weight:600; }
/* product catalog toolbar + filtering (product_list) ----------------------- */
.catalog-toolbar { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:0 0 28px; }
.catalog-search { flex:1 1 280px; display:flex; align-items:center; gap:10px; background:#fff;
border:1px solid var(--border); border-radius:10px; padding:0 14px; box-shadow:var(--shadow); }
.catalog-search input { flex:1; border:0; outline:0; background:none; padding:14px 0; font-size:15px;
font-family:'Inter',sans-serif; color:var(--ink); }
.catalog-search .ico { color:var(--muted); display:inline-flex; align-items:center; }
.catalog-search .ico .ico-svg { width:18px; height:18px; }
.filter-chips { display:flex; flex-wrap:wrap; gap:8px; }
.filter-chip { padding:9px 16px; border-radius:999px; border:1px solid var(--border); background:#fff;
color:var(--navy); font-weight:600; font-size:13.5px; cursor:pointer; transition:all .2s ease; }
.filter-chip:hover { border-color:var(--orange); color:var(--orange-d); }
.filter-chip.is-active { background:var(--orange); border-color:var(--orange); color:#fff; }
.catalog-empty { padding:30px; text-align:center; color:var(--muted);
border:1px dashed var(--border); border-radius:var(--radius); }
.catalog-empty[hidden] { display:none; }
.product-card[hidden] { display:none; }
/* inquiry CTA band (reused on service/product/quality pages) ---------------- */
.inquiry-band { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
padding:34px 40px; border-radius:18px; background:linear-gradient(135deg,var(--navy) 0%, var(--navy-2) 100%);
box-shadow:var(--shadow-h); color:#fff; }
.inquiry-band h2 { margin:0 0 6px; color:#fff; font-size:24px; }
.inquiry-band p { margin:0; color:#cdd9e6; font-size:15.5px; max-width:560px; }
.inquiry-band .btn-ghost { border-color:rgba(255,255,255,.7); }
/* SVG icon system (inline sprite, currentColor) ---------------------------- */
.ico-svg { display:block; width:24px; height:24px; flex:0 0 auto; }
.pillar .ico { color:var(--orange-d); }
.pillar .ico .ico-svg { width:26px; height:26px; }
.trust-item .ico-svg { width:18px; height:18px; color:var(--orange-d); }
/* "how we work" process steps (about page) */
.process { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:0; padding:0; list-style:none; counter-reset:step; }
.process li { position:relative; background:linear-gradient(145deg,#fff 0%, #f5f9fb 100%); border:1px solid var(--border);
border-radius:var(--radius); box-shadow:var(--shadow); padding:24px 22px; }
.process li:nth-child(2n) { background:linear-gradient(145deg,#fff7ed 0%, #fff 72%); }
.process .step-ico { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
border-radius:12px; background:rgba(226,130,63,.13); color:var(--orange-d); margin-bottom:14px; }
.process h4 { font-family:'Poppins',sans-serif; font-size:16px; color:var(--ink); margin:0 0 6px; }
.process .num-badge { position:absolute; top:16px; right:18px; font-family:'Poppins',sans-serif; font-weight:700;
font-size:14px; color:var(--muted); }
.process p { margin:0; font-size:14px; color:var(--text); line-height:1.6; }
/* modernization responsive ------------------------------------------------- */
@media (max-width:900px) {
.process { grid-template-columns:repeat(2,1fr); }
.pillars { grid-template-columns:1fr; }
.quality-grid { grid-template-columns:1fr; }
.section { padding:52px 0; }
.inquiry-band { padding:28px; }
}
@media (max-width:560px) {
.hero-stats { gap:18px 28px; }
.hero-stats .num { font-size:24px; }
.section-head h2 { font-size:26px; }
.service-block { padding:24px; }
.process { grid-template-columns:1fr; }
}