/* ============================================================================ ltek-seo-enhance.css — Visual upgrade for country×category landing pages Drop-in: link AFTER your main stylesheet. Themes every page by category via a `data-cat=""` attribute on . Reuses your existing ltek-* markup so no HTML restructuring is needed (one small body-attribute add — see notes). ============================================================================ */ /* ---- Per-category accent palette (the signature: sciences are colour-coded) */ :root{ --ltek-primary:#009ee3; /* site default / fallback */ --cat-accent:#009ee3; --cat-accent-dark:#0072a8; --cat-tint:#eef7fd; --cat-tint-2:#f6fbfe; --card-shadow:0 6px 22px rgba(18,38,63,.07); --card-shadow-hover:0 14px 34px rgba(18,38,63,.14); } body[data-cat="physics-laboratory-equipment"] { --cat-accent:#4f46e5; --cat-accent-dark:#3730a3; --cat-tint:#eef0fe; --cat-tint-2:#f6f7ff; } body[data-cat="chemistry-laboratory-equipment"] { --cat-accent:#0d9488; --cat-accent-dark:#0f766e; --cat-tint:#e7f7f4; --cat-tint-2:#f4fbfa; } body[data-cat="biology-laboratory-equipment"] { --cat-accent:#16a34a; --cat-accent-dark:#15803d; --cat-tint:#e9f8ee; --cat-tint-2:#f5fcf7; } body[data-cat="engineering-laboratory-equipment"]{ --cat-accent:#ea580c; --cat-accent-dark:#c2410c; --cat-tint:#fdefe6; --cat-tint-2:#fff7f2; } body[data-cat="technical-training-equipment"] { --cat-accent:#0284c7; --cat-accent-dark:#0369a1; --cat-tint:#e6f4fb; --cat-tint-2:#f3fafd; } body[data-cat="stem-education-equipment"] { --cat-accent:#7c3aed; --cat-accent-dark:#6d28d9; --cat-tint:#f1eafe; --cat-tint-2:#f9f6ff; } body[data-cat="school-laboratory-equipment"] { --cat-accent:#0891b2; --cat-accent-dark:#0e7490; --cat-tint:#e6f6fa; --cat-tint-2:#f3fbfd; } /* ---- Section rhythm: alternate white / faint category tint --------------- */ .ltek-seo-block { background:#fff; padding:56px 0; } .ltek-seo-block-alt { background:var(--cat-tint-2); padding:56px 0; } .ltek-products-page { padding:48px 0 20px; } /* ---- Eyebrow pill: use the category accent ------------------------------- */ .ltek-eyebrow-pill{ display:inline-block; background:var(--cat-tint); color:var(--cat-accent-dark); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; padding:6px 14px; border-radius:20px; margin-bottom:12px; } /* ---- Block titles get a short accent underline --------------------------- */ .ltek-block-head{ text-align:center; max-width:760px; margin:0 auto 34px; } .ltek-block-title{ position:relative; color:#16224b; font-weight:700; } .ltek-block-head .ltek-block-title::after{ content:""; display:block; width:56px; height:4px; border-radius:3px; background:var(--cat-accent); margin:14px auto 0; } /* ---- Cards: gradient icon tile, hover lift, accent top border ------------ */ .ltek-sector-card{ position:relative; background:#fff; border:1px solid #eef1f5; border-radius:16px; padding:26px 22px; box-shadow:var(--card-shadow); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; overflow:hidden; } .ltek-sector-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--cat-accent),var(--cat-accent-dark)); opacity:0; transition:opacity .18s ease; } .ltek-sector-card:hover{ transform:translateY(-5px); box-shadow:var(--card-shadow-hover); border-color:var(--cat-tint); } .ltek-sector-card:hover::before{ opacity:1; } .ltek-sector-card > i{ display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:14px; margin-bottom:16px; font-size:1.5rem; color:#fff; background:linear-gradient(135deg,var(--cat-accent),var(--cat-accent-dark)); box-shadow:0 6px 16px rgba(0,110,180,.28); box-shadow:0 6px 16px color-mix(in srgb,var(--cat-accent) 35%,transparent); } .ltek-sector-card h3{ color:#16224b; font-weight:700; margin-bottom:8px; } .ltek-sector-card p{ color:#5b6472; font-size:.92rem; line-height:1.6; margin:0; } /* Packages: keep the accent left-rail but modernise ------------------------ */ .ltek-sector-card[style*="border-left"]{ border-left:4px solid var(--cat-accent)!important; } /* ---- Stats band: gradient, larger numbers, glass dividers ---------------- */ .ltek-seo-card{ background:#fff; border-radius:22px; padding:34px; box-shadow:var(--card-shadow); border:1px solid #eef1f5; } .ltek-seo-title{ color:#16224b; font-weight:800; } .ltek-seo-stat-block{ background:linear-gradient(150deg,var(--cat-accent),var(--cat-accent-dark)); border-radius:18px; padding:26px 18px; color:#fff; display:grid; grid-template-columns:1fr 1fr; gap:20px 10px; box-shadow:0 16px 34px rgba(0,110,180,.24); box-shadow:0 16px 34px color-mix(in srgb,var(--cat-accent) 30%,transparent); } .ltek-seo-stat{ text-align:center; padding:4px; } .ltek-seo-stat-num{ display:block; font-size:2.1rem; font-weight:800; line-height:1.05; letter-spacing:-.5px; } .ltek-seo-stat-label{ display:block; font-size:.72rem; opacity:.9; margin-top:4px; letter-spacing:.03em; } .ltek-seo-features{ list-style:none; padding:0; margin:16px 0 0; } .ltek-seo-features li{ padding:5px 0; color:#374151; } .ltek-seo-features li i{ color:var(--cat-accent); margin-right:8px; } /* ---- Hero banner: category-tinted gradient instead of flat blue ---------- */ .inner_banner.ltek-product-banner{ background:linear-gradient(120deg,var(--cat-accent-dark),var(--cat-accent)); position:relative; overflow:hidden; } .inner_banner.ltek-product-banner::after{ /* subtle lab-glass sheen */ content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px; background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%); pointer-events:none; } .inner_banner.ltek-product-banner .heading{ position:relative; z-index:1; } .inner_banner.ltek-product-banner .ltek-banner-sub{ position:relative; z-index:1; opacity:.95; } /* ---- Equipment chips: pill style with accent hover ----------------------- */ .ltek-cat-chip{ border:1px solid #e7ebf0!important; border-radius:30px!important; background:#fff; transition:.16s; } .ltek-cat-chip:hover{ border-color:var(--cat-accent)!important; background:var(--cat-tint); transform:translateY(-2px); } .ltek-cat-chip i{ color:var(--cat-accent)!important; } /* ---- FAQ: accented summary marker + open state --------------------------- */ .ltek-seo-block details{ border:1px solid #e9edf2!important; border-radius:12px!important; transition:.16s; } .ltek-seo-block details[open]{ border-color:var(--cat-accent)!important; box-shadow:var(--card-shadow); } .ltek-seo-block summary{ color:#16224b!important; } .ltek-seo-block summary::marker{ color:var(--cat-accent); } /* ---- Sibling category links: accent hover -------------------------------- */ .ltek-country-link:hover{ border-color:var(--cat-accent)!important; background:var(--cat-tint)!important; } .ltek-country-link i{ color:var(--cat-accent)!important; } /* ---- CTA strip: richer gradient ------------------------------------------ */ .ltek-cta-strip{ background:linear-gradient(120deg,#16224b,var(--cat-accent-dark)); border-radius:0; position:relative; overflow:hidden; } .ltek-btn-cta-primary{ background:var(--cat-accent)!important; border:none!important; font-weight:600; transition:.16s; box-shadow:0 6px 18px rgba(0,110,180,.32); box-shadow:0 6px 18px color-mix(in srgb,var(--cat-accent) 40%,transparent); } .ltek-btn-cta-primary:hover{ background:#fff!important; color:var(--cat-accent-dark)!important; transform:translateY(-2px); } .ltek-btn-cta-outline:hover{ background:rgba(255,255,255,.12)!important; } /* ---- Breadcrumb current uses accent -------------------------------------- */ .ltek-breadcrumbs .ltek-bc-current{ color:var(--cat-accent-dark); font-weight:600; } /* ---- Responsive polish --------------------------------------------------- */ @media (max-width:768px){ .ltek-seo-block, .ltek-seo-block-alt{ padding:40px 0; } .ltek-seo-stat-num{ font-size:1.7rem; } .ltek-seo-card{ padding:22px; } } /* ---- Respect reduced-motion ---------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .ltek-sector-card, .ltek-cat-chip, .ltek-btn-cta-primary, .ltek-country-link{ transition:none; } .ltek-sector-card:hover{ transform:none; } }