/* ============================================================
NExxLON — Advanced Polymer Solutions
Design system: modern industrial B2B
============================================================ */
:root {
--navy-900: #081426;
--navy-800: #0b1f3a;
--navy-700: #12294d;
--navy-600: #1a3563;
--ink: #16233a;
--slate: #4b5a72;
--slate-light: #7b8aa0;
--line: #e3e8f0;
--bg: #ffffff;
--surface: #f4f6fa;
--surface-2: #eceff5;
--blue: #1b5cd6;
--blue-dark: #124199;
--blue-soft: #e8effc;
--teal: #0e7c86;
--teal-soft: #e4f4f5;
--amber: #e8862e;
--amber-soft: #fdf1e4;
--radius: 14px;
--radius-sm: 10px;
--shadow-sm: 0 1px 3px rgba(11, 31, 58, 0.08);
--shadow-md: 0 6px 24px rgba(11, 31, 58, 0.10);
--shadow-lg: 0 16px 48px rgba(11, 31, 58, 0.16);
--font-head: "Space Grotesk", "Inter", system-ui, sans-serif;
--font-body: "Inter", system-ui, -apple-system, sans-serif;
--font-nav: "Sora", "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
--maxw: 1180px;
--card: #ffffff;
--heading: #0b1f3a;
--header-bg: rgba(255, 255, 255, 0.94);
--ghost-border: rgba(11, 31, 58, 0.25);
--link: #1b5cd6;
--link-strong: #124199;
}
/* Dark theme — activated via data-theme="dark" on (set by js/script.js;
follows the visitor's system preference until they choose manually) */
:root[data-theme="dark"] {
--bg: #0a1322;
--surface: #0d1830;
--surface-2: #182742;
--line: #22304a;
--ink: #e6edf7;
--slate: #a7b4c8;
--slate-light: #7e8ca2;
--blue-soft: rgba(27, 92, 214, 0.22);
--teal-soft: rgba(30, 160, 170, 0.16);
--amber-soft: rgba(232, 134, 46, 0.12);
--card: #101d35;
--heading: #eef3fa;
--header-bg: rgba(8, 17, 31, 0.92);
--ghost-border: rgba(255, 255, 255, 0.3);
--link: #8ab5ff;
--link-strong: #a9c8ff;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
--shadow-md: 0 6px 24px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
color: var(--ink);
background: var(--bg);
line-height: 1.65;
font-size: 16px;
-webkit-font-smoothing: antialiased;
transition: background-color 0.25s ease, color 0.25s ease;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.container {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 24px;
}
/* ---------- Typography ---------- */
h1, h2, h3, h4 {
font-family: var(--font-head);
line-height: 1.2;
color: var(--heading);
letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
.lead {
font-size: 1.1rem;
color: var(--slate);
max-width: 68ch;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-head);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--link);
margin-bottom: 14px;
}
.eyebrow::before {
content: "";
width: 26px;
height: 2px;
background: var(--blue);
border-radius: 2px;
}
.section {
padding: 88px 0;
}
.section-alt {
background: var(--surface);
}
.section-dark {
background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-700) 100%);
}
.section-dark h2,
.section-dark h3 { color: #fff; }
.section-dark p { color: #b9c5d8; }
.section-head {
max-width: 720px;
margin-bottom: 48px;
}
.section-head.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.section-head.center .eyebrow::before { display: none; }
.section-head p {
margin-top: 14px;
color: var(--slate);
font-size: 1.05rem;
}
.section-dark .section-head p { color: #b9c5d8; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-head);
font-weight: 600;
font-size: 0.95rem;
padding: 14px 28px;
border-radius: 999px;
border: 1.5px solid transparent;
cursor: pointer;
transition: all 0.22s ease;
white-space: nowrap;
}
.btn-primary {
background: var(--blue);
color: #fff;
box-shadow: 0 6px 18px rgba(27, 92, 214, 0.35);
}
.btn-primary:hover {
background: var(--blue-dark);
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(27, 92, 214, 0.42);
}
.btn-ghost {
background: transparent;
color: var(--heading);
border-color: var(--ghost-border);
}
.btn-ghost:hover {
border-color: var(--link);
color: var(--link);
transform: translateY(-2px);
}
.btn-light {
background: #fff;
color: #0b1f3a;
}
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost-light {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, 0.4);
}
.btn-ghost-light:hover { border-color: #fff; transform: translateY(-2px); }
.btn-arrow::after {
content: "→";
font-size: 1.05em;
transition: transform 0.22s ease;
}
.btn-arrow:hover::after { transform: translateX(4px); }
/* ---------- Header ---------- */
.topbar {
background: var(--navy-900);
color: #aebbd0;
font-family: var(--font-nav);
font-size: 0.78rem;
font-weight: 400;
letter-spacing: 0.012em;
padding: 7px 0;
}
.topbar .container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.topbar a { color: #dce5f2; }
.topbar a:hover { color: #fff; }
.topbar-contacts {
display: flex;
gap: 22px;
flex-wrap: wrap;
}
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--header-bg);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
font-family: var(--font-nav);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.nav-wrap {
display: flex;
align-items: center;
justify-content: space-between;
height: 74px;
gap: 24px;
}
.brand {
display: flex;
align-items: center;
gap: 11px;
flex-shrink: 0;
}
/* Two colourways of the mark — the light one takes over in dark mode */
.brand-mark {
display: block;
height: 21px;
width: auto;
}
.brand-mark.on-dark { display: none; }
:root[data-theme="dark"] .brand-mark.on-light { display: none; }
:root[data-theme="dark"] .brand-mark.on-dark { display: block; }
.brand-name {
font-family: var(--font-nav);
font-weight: 700;
font-size: 1.3rem;
letter-spacing: -0.005em;
color: var(--heading);
}
.brand-name .xx { color: var(--link); }
.brand-reg {
font-size: 0.58rem;
font-weight: 500;
vertical-align: super;
margin-left: 1px;
color: var(--slate-light);
}
.nav-links {
display: flex;
align-items: center;
gap: 6px;
}
.nav-links a {
font-family: var(--font-nav);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.012em;
color: var(--ink);
padding: 9px 14px;
border-radius: 8px;
transition: all 0.18s ease;
}
.nav-links a:hover {
color: var(--link);
background: var(--blue-soft);
}
.nav-links a.active {
color: var(--link);
background: var(--blue-soft);
}
.nav-cta { flex-shrink: 0; }
.nav-cta .btn {
font-family: var(--font-nav);
font-weight: 600;
letter-spacing: 0.012em;
padding: 11px 22px;
font-size: 0.85rem;
}
.nav-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px;
}
.nav-toggle span {
display: block;
width: 24px;
height: 2.5px;
background: var(--heading);
border-radius: 2px;
margin: 5px 0;
transition: all 0.25s ease;
}
/* ---------- Hero ---------- */
.hero {
position: relative;
background:
radial-gradient(ellipse 900px 500px at 85% 10%, rgba(27, 92, 214, 0.28), transparent 60%),
radial-gradient(ellipse 700px 460px at 10% 95%, rgba(14, 124, 134, 0.22), transparent 60%),
linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
color: #fff;
overflow: hidden;
}
.hero-grid-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 30%, transparent 75%);
}
.hero-inner {
position: relative;
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 56px;
align-items: center;
padding: 96px 0 104px;
}
.hero h1 { color: #fff; }
.hero h1 .accent {
background: linear-gradient(100deg, #6ea8ff, #4dd6e0);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
padding: 7px 16px;
font-size: 0.82rem;
font-weight: 500;
color: #cdd9ea;
margin-bottom: 26px;
}
.hero-badge .dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #4dd6e0;
box-shadow: 0 0 10px #4dd6e0;
}
.hero p.sub {
margin-top: 22px;
font-size: 1.12rem;
color: #b9c8dd;
max-width: 54ch;
}
.hero-ctas {
display: flex;
gap: 14px;
margin-top: 36px;
flex-wrap: wrap;
}
.hero-points {
display: flex;
gap: 26px;
margin-top: 42px;
flex-wrap: wrap;
}
.hero-points li {
display: flex;
align-items: center;
gap: 9px;
font-size: 0.9rem;
color: #cdd9ea;
}
.hero-points li::before {
content: "";
width: 18px;
height: 18px;
flex-shrink: 0;
background: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.hero-visual { position: relative; }
.hero-visual svg { width: 100%; height: auto; }
/* ---------- Stats band ---------- */
.stats-band {
background: var(--bg);
border-bottom: 1px solid var(--line);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
padding: 44px 0;
}
.stat {
text-align: center;
padding: 0 12px;
}
.stat + .stat { border-left: 1px solid var(--line); }
.stat .num {
font-family: var(--font-head);
font-size: 2.3rem;
font-weight: 700;
color: var(--heading);
line-height: 1.1;
}
.stat .num em {
font-style: normal;
color: var(--link);
}
.stat .label {
margin-top: 6px;
font-size: 0.88rem;
color: var(--slate);
}
/* ---------- Cards ---------- */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
gap: 24px;
}
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 30px 28px;
transition: all 0.25s ease;
position: relative;
overflow: hidden;
}
.card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: rgba(27, 92, 214, 0.35);
}
.card .icon {
width: 52px;
height: 52px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
background: var(--blue-soft);
color: var(--link);
}
.card .icon svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: 10px; }
.card p {
font-size: 0.94rem;
color: var(--slate);
}
.card .card-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 18px;
font-family: var(--font-head);
font-weight: 600;
font-size: 0.88rem;
color: var(--link);
}
.card .card-link::after { content: "→"; transition: transform 0.2s ease; }
.card:hover .card-link::after { transform: translateX(4px); }
/* Product category cards */
.product-card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
transition: all 0.25s ease;
display: flex;
flex-direction: column;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: rgba(27, 92, 214, 0.35);
}
.product-card .pc-head {
padding: 26px 26px 20px;
border-bottom: 1px solid var(--line);
background: linear-gradient(150deg, var(--surface) 0%, var(--card) 90%);
}
.product-card .pc-tag {
display: inline-block;
font-family: var(--font-head);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--teal);
background: var(--teal-soft);
border-radius: 999px;
padding: 4px 12px;
margin-bottom: 12px;
}
.product-card .pc-body {
padding: 22px 26px 26px;
flex: 1;
display: flex;
flex-direction: column;
}
.product-card p {
font-size: 0.93rem;
color: var(--slate);
margin-bottom: 18px;
}
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: auto;
}
.chip {
font-family: var(--font-head);
font-size: 0.8rem;
font-weight: 600;
color: var(--ink);
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 5px 11px;
transition: all 0.18s ease;
}
.chip:hover {
background: var(--blue-soft);
border-color: rgba(27, 92, 214, 0.4);
color: var(--link);
}
.chip-accent {
background: var(--blue-soft);
border-color: rgba(27, 92, 214, 0.3);
color: var(--link-strong);
}
/* ---------- Brand families strip ---------- */
.families-table {
width: 100%;
border-collapse: collapse;
background: var(--card);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid var(--line);
}
.families-table th,
.families-table td {
text-align: left;
padding: 15px 22px;
font-size: 0.94rem;
border-bottom: 1px solid var(--line);
}
.families-table th {
font-family: var(--font-head);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
background: var(--navy-800);
}
.families-table tr:last-child td { border-bottom: none; }
.families-table tr:hover td { background: var(--blue-soft); }
.families-table td:first-child {
font-family: var(--font-head);
font-weight: 700;
color: var(--link);
white-space: nowrap;
}
.families-table td { color: var(--slate); }
.families-table td:nth-child(2) { color: var(--ink); font-weight: 500; }
.table-scroll { overflow-x: auto; border-radius: var(--radius); }
/* ---------- NExxALLOY ---------- */
.alloy-band {
position: relative;
overflow: hidden;
}
.alloy-band .hero-grid-bg { opacity: 0.8; }
.alloy-grid {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 14px;
margin-top: 40px;
}
.alloy-tile {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius-sm);
padding: 20px 14px;
text-align: center;
font-family: var(--font-head);
font-weight: 600;
font-size: 1rem;
color: #fff;
transition: all 0.22s ease;
backdrop-filter: blur(4px);
}
.alloy-tile:hover {
background: rgba(27, 92, 214, 0.35);
border-color: rgba(110, 168, 255, 0.6);
transform: translateY(-3px);
}
.alloy-tile .sub {
display: block;
margin-top: 5px;
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 400;
color: #9fb2cc;
}
/* Benefit list */
.benefit-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 18px;
margin-top: 36px;
}
.benefit-list li {
display: flex;
gap: 12px;
align-items: flex-start;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-sm);
padding: 16px 18px;
font-size: 0.92rem;
color: #cdd9ea;
}
.benefit-list li::before {
content: "";
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 2px;
background: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* ---------- Industries ---------- */
.industry-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
.industry-card {
position: relative;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--line);
background: var(--card);
transition: all 0.25s ease;
}
.industry-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.industry-card .ind-visual {
height: 130px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(150deg, var(--navy-800), var(--navy-600));
color: #6ea8ff;
}
.industry-card .ind-visual svg { width: 54px; height: 54px; }
.industry-card .ind-body { padding: 24px 26px 28px; }
.industry-card h3 { margin-bottom: 8px; }
.industry-card p { font-size: 0.92rem; color: var(--slate); margin-bottom: 14px; }
.industry-card .mini-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.industry-card .mini-chips span {
font-size: 0.74rem;
font-weight: 600;
font-family: var(--font-head);
color: var(--teal);
background: var(--teal-soft);
border-radius: 6px;
padding: 3px 9px;
}
/* ---------- Quality / features ---------- */
.feature-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
.check-list li {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 13px 0;
border-bottom: 1px solid var(--line);
}
.check-list li:last-child { border-bottom: none; }
.check-list .check-ico {
width: 26px;
height: 26px;
flex-shrink: 0;
border-radius: 8px;
background: var(--blue-soft);
color: var(--link);
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
}
.check-list .check-ico svg { width: 14px; height: 14px; }
.check-list strong {
display: block;
font-family: var(--font-head);
font-size: 0.98rem;
color: var(--heading);
}
.check-list span.desc {
font-size: 0.9rem;
color: var(--slate);
}
.note-box {
margin-top: 26px;
background: var(--amber-soft);
border: 1px dashed rgba(232, 134, 46, 0.5);
border-radius: var(--radius-sm);
padding: 16px 20px;
font-size: 0.88rem;
color: #8a5a22;
}
/* Docs pills */
.doc-pills {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 22px;
}
.doc-pills span {
font-family: var(--font-head);
font-weight: 600;
font-size: 0.85rem;
color: var(--heading);
background: var(--card);
border: 1px solid var(--line);
border-radius: 999px;
padding: 8px 18px;
box-shadow: var(--shadow-sm);
}
/* ---------- Why choose ---------- */
.why-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 20px;
counter-reset: why;
}
.why-item {
counter-increment: why;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 26px 26px 26px 78px;
position: relative;
transition: all 0.22s ease;
}
.why-item:hover {
border-color: rgba(27, 92, 214, 0.4);
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.why-item::before {
content: "0" counter(why);
position: absolute;
left: 24px;
top: 26px;
font-family: var(--font-head);
font-weight: 700;
font-size: 1.05rem;
color: var(--link);
background: var(--blue-soft);
border-radius: 10px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.why-item h3 { font-size: 1.05rem; margin-bottom: 6px; }
.why-item p { font-size: 0.9rem; color: var(--slate); }
/* ---------- Customers strip ---------- */
.customers-note {
text-align: center;
font-size: 0.82rem;
color: var(--slate-light);
margin-top: 18px;
}
.logo-strip {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 14px;
margin-top: 34px;
}
.logo-strip span {
font-family: var(--font-head);
font-weight: 600;
font-size: 0.92rem;
letter-spacing: 0.04em;
color: var(--slate);
background: var(--card);
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px 24px;
transition: all 0.2s ease;
}
.logo-strip span:hover {
color: var(--heading);
border-color: rgba(27, 92, 214, 0.4);
box-shadow: var(--shadow-sm);
}
/* ---------- CTA banner ---------- */
.cta-banner {
position: relative;
overflow: hidden;
border-radius: 22px;
background:
radial-gradient(ellipse 600px 300px at 90% 0%, rgba(77, 214, 224, 0.25), transparent 60%),
linear-gradient(135deg, var(--navy-900), var(--navy-700));
color: #fff;
padding: 64px 56px;
display: grid;
grid-template-columns: 1.4fr auto;
gap: 36px;
align-items: center;
}
.cta-banner h2 { color: #fff; margin-bottom: 12px; }
.cta-banner p { color: #b9c8dd; max-width: 54ch; }
.cta-banner .btn-group { display: flex; gap: 14px; flex-wrap: wrap; }
/* ---------- Page hero (inner pages) ---------- */
.page-hero {
position: relative;
background:
radial-gradient(ellipse 700px 380px at 88% 20%, rgba(27, 92, 214, 0.3), transparent 60%),
linear-gradient(155deg, var(--navy-900) 0%, var(--navy-700) 100%);
color: #fff;
padding: 76px 0 68px;
overflow: hidden;
}
.page-hero h1 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.page-hero p {
margin-top: 16px;
color: #b9c8dd;
font-size: 1.08rem;
max-width: 62ch;
}
.breadcrumb {
display: flex;
gap: 8px;
font-size: 0.82rem;
color: #8fa2bd;
margin-bottom: 20px;
}
.breadcrumb a:hover { color: #fff; }
.breadcrumb .sep { color: #4d6180; }
/* ---------- About page ---------- */
.about-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 56px;
align-items: start;
}
.about-grid .prose p { margin-bottom: 18px; color: var(--slate); }
.about-grid .prose p strong { color: var(--heading); }
.value-cards { display: grid; gap: 16px; }
.value-card {
background: var(--card);
border: 1px solid var(--line);
border-left: 4px solid var(--blue);
border-radius: var(--radius-sm);
padding: 20px 22px;
box-shadow: var(--shadow-sm);
}
.value-card h3 { font-size: 1rem; margin-bottom: 4px; }
.value-card p { font-size: 0.9rem; color: var(--slate); }
/* ---------- Contact ---------- */
.contact-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 48px;
align-items: start;
}
.contact-info-card {
background: linear-gradient(160deg, var(--navy-900), var(--navy-700));
color: #fff;
border-radius: var(--radius);
padding: 38px 34px;
position: sticky;
top: 100px;
}
.contact-info-card h3 { color: #fff; font-size: 1.3rem; margin-bottom: 8px; }
.contact-info-card > p { color: #b9c8dd; font-size: 0.94rem; margin-bottom: 28px; }
.contact-line {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 14px 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.contact-line .cl-ico {
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 10px;
background: rgba(255, 255, 255, 0.1);
color: #6ea8ff;
display: flex;
align-items: center;
justify-content: center;
}
.contact-line .cl-ico svg { width: 18px; height: 18px; }
.contact-line strong {
display: block;
font-family: var(--font-head);
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #8fa2bd;
margin-bottom: 3px;
}
.contact-line a, .contact-line span.val {
color: #e7eef8;
font-size: 0.95rem;
}
.contact-line a:hover { color: #6ea8ff; }
.enquiry-form {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 38px 36px;
box-shadow: var(--shadow-sm);
}
.enquiry-form h3 { margin-bottom: 6px; }
.enquiry-form > p { font-size: 0.94rem; color: var(--slate); margin-bottom: 26px; }
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
font-family: var(--font-head);
font-size: 0.84rem;
font-weight: 600;
color: var(--heading);
}
.form-field label .req { color: var(--amber); }
.form-field input,
.form-field select,
.form-field textarea {
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--ink);
background: var(--surface);
border: 1.5px solid var(--line);
border-radius: var(--radius-sm);
padding: 12px 15px;
transition: all 0.18s ease;
width: 100%;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--link);
background: var(--card);
box-shadow: 0 0 0 4px rgba(27, 92, 214, 0.12);
}
.form-field textarea { resize: vertical; min-height: 110px; }
.form-submit-row {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
margin-top: 6px;
}
.form-note { font-size: 0.82rem; color: var(--slate-light); }
.form-status {
grid-column: 1 / -1;
display: none;
border-radius: var(--radius-sm);
padding: 14px 18px;
font-size: 0.92rem;
}
.form-status.ok {
display: block;
background: var(--teal-soft);
color: var(--teal);
border: 1px solid rgba(14, 124, 134, 0.3);
}
/* ---------- Footer ---------- */
.site-footer {
background: var(--navy-900);
color: #9fb0c7;
padding: 64px 0 0;
font-size: 0.92rem;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: 44px;
padding-bottom: 48px;
}
.footer-grid h4 {
color: #fff;
font-size: 0.95rem;
margin-bottom: 18px;
letter-spacing: 0.04em;
}
.footer-brand .brand-name { color: #fff; font-size: 1.4rem; }
.footer-brand .brand-name .xx { color: #6ea8ff; }
.footer-mark { display: block; height: 24px; width: auto; margin-bottom: 14px; }
.footer-brand p { margin-top: 14px; max-width: 34ch; font-size: 0.9rem; }
.footer-grid ul li { margin-bottom: 10px; }
.footer-grid ul a { color: #9fb0c7; transition: color 0.18s ease; }
.footer-grid ul a:hover { color: #fff; }
.footer-contact li {
display: flex;
gap: 10px;
align-items: flex-start;
margin-bottom: 12px;
}
.footer-contact svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px; color: #6ea8ff; }
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 22px 0;
display: flex;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
font-size: 0.82rem;
color: #7488a3;
}
/* ---------- Reveal animations ---------- */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
}
/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
.hero-inner { grid-template-columns: 1fr; padding: 72px 0 80px; }
.hero-visual { max-width: 480px; margin: 0 auto; }
.feature-row, .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
.contact-info-card { position: static; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.cta-banner { grid-template-columns: 1fr; padding: 48px 36px; }
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 12px; }
.stat + .stat { border-left: none; }
.stat:nth-child(even) { border-left: 1px solid var(--line); }
}
@media (max-width: 820px) {
.nav-links {
position: fixed;
top: 0;
right: -100%;
width: min(320px, 82vw);
height: 100vh;
background: var(--card);
flex-direction: column;
align-items: flex-start;
padding: 96px 28px 28px;
gap: 8px;
box-shadow: -12px 0 40px rgba(11, 31, 58, 0.18);
transition: right 0.3s ease;
z-index: 90;
}
.nav-links.open { right: 0; }
.nav-links a { width: 100%; font-size: 1rem; font-weight: 500; padding: 13px 14px; }
.nav-toggle { display: block; z-index: 95; position: relative; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.nav-cta { display: none; }
.topbar { display: none; }
.section { padding: 64px 0; }
.form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
.hero-ctas .btn { width: 100%; }
.cta-banner .btn-group .btn { width: 100%; }
}
/* Keep the mark + wordmark on one comfortable line on small phones */
@media (max-width: 380px) {
.nav-wrap { gap: 12px; }
.brand { gap: 8px; }
.brand-mark { height: 18px; }
.brand-name { font-size: 1.12rem; }
}
/* ---------- Theme toggle ---------- */
.theme-toggle {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1.5px solid var(--line);
border-radius: 999px;
color: var(--heading);
cursor: pointer;
transition: all 0.2s ease;
}
.theme-toggle:hover {
border-color: var(--link);
color: var(--link);
transform: translateY(-1px);
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .ico-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
/* ---------- Dark-mode fine-tuning ---------- */
:root[data-theme="dark"] .note-box {
color: #e0b483;
border-color: rgba(232, 134, 46, 0.4);
}
:root[data-theme="dark"] .form-status.ok { color: #6fd9e2; }
:root[data-theme="dark"] .product-card .pc-tag,
:root[data-theme="dark"] .industry-card .mini-chips span { color: #4dd6e0; }
:root[data-theme="dark"] .chip:hover {
background: var(--blue-soft);
color: var(--link);
}
:root[data-theme="dark"] .logo-strip span:hover { border-color: rgba(138, 181, 255, 0.5); }
:root[data-theme="dark"] .form-field input:focus,
:root[data-theme="dark"] .form-field select:focus,
:root[data-theme="dark"] .form-field textarea:focus {
box-shadow: 0 0 0 4px rgba(138, 181, 255, 0.15);
}