/* ============================================================ NAMJENSKA PROIZVODNJA — Main Stylesheet ============================================================ EDITABLE SECTIONS: 1. COLORS — line ~15 2. TYPOGRAPHY — line ~30 3. HEADER — line ~80 4. HERO — line ~140 5. HOME SECTIONS — line ~190 6. INNER PAGES — line ~350 7. PRODUCT DETAIL — line ~420 8. FOOTER — line ~560 9. ANIMATIONS — line ~600 10. RESPONSIVE — line ~650 ============================================================ */ /* ── 1. COLORS ───────────────────────────────────────────── Change these variables to update the entire color scheme. */ :root { /* Dark backgrounds */ --k0: #090b0f; /* deepest black — hero, page headers */ --k1: #161a20; /* dark — capabilities bg, about img */ --k2: #2b3138; /* body text */ --k3: #3e4750; /* secondary text */ --k4: #59616a; /* muted text */ --k5: #9aa0a8; /* labels, placeholders */ /* Light backgrounds */ --k6: #f4f6f8; /* page background */ --w: #ffffff; /* white — cards, panels */ --b: #e4e7eb; /* borders */ /* Brand blue — used sparingly */ --bl: #1f7fbd; /* primary blue */ --bl2: #175f8e; /* blue hover */ } /* ── END COLORS ──────────────────────────────────────────── */ /* ── 2. TYPOGRAPHY ────────────────────────────────────────── Font stack. Google Fonts loaded in each HTML . */ /* Base reset */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "Barlow", sans-serif; background: var(--k6); color: var(--k2); line-height: 1.6; overflow-x: hidden; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } .container { width: min(1100px, calc(100% - 44px)); margin: auto; } h1 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(38px, 5.5vw, 68px); line-height: 1.0; text-transform: uppercase; letter-spacing: -0.5px; } h2 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(26px, 3.5vw, 44px); line-height: 1.05; text-transform: uppercase; } h3 { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: 0.3px; } h4 { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--bl); } /* Section label */ .lbl { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--bl); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .lbl::before { content: ""; display: block; width: 14px; height: 1px; background: var(--bl); } /* ── END TYPOGRAPHY ──────────────────────────────────────── */ /* ── 3. HEADER ───────────────────────────────────────────── */ .hdr { position: sticky; top: 0; z-index: 300; background: #fff; border-bottom: 1px solid #e2e5e9; box-shadow: 0 1px 3px rgba(0,0,0,.04); } .hdr-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; } .hdr-logo { height: 44px; object-fit: contain; max-width: 260px; display: block; filter: none; transition: opacity .15s; } .hdr-logo:hover { opacity: .8; } /* Desktop nav */ .hdr-nav { display: flex; gap: 28px; list-style: none; } .hdr-nav a { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: #6b7280; padding-bottom: 3px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; } .hdr-nav a:hover, .hdr-nav a.on { color: #0d0f12; border-bottom-color: var(--bl); } /* Hamburger button */ .hdr-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 4px; background: none; border: none; cursor: pointer; z-index: 400; } .hdr-burger span { display: block; width: 22px; height: 1.5px; background: #0d0f12; transition: transform .25s ease, opacity .2s ease; transform-origin: center; } .hdr-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .hdr-burger.open span:nth-child(2) { opacity: 0; } .hdr-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile menu overlay */ .mob-menu { display: none; position: fixed; inset: 0; top: 66px; background: #fff; z-index: 200; padding: 0; overflow-y: auto; opacity: 0; transform: translateY(-6px); transition: opacity .22s ease, transform .22s ease; pointer-events: none; border-top: 1px solid var(--b); } .mob-menu.open { opacity: 1; transform: translateY(0); pointer-events: all; } .mob-menu-inner { padding: 24px 22px 40px; } .mob-nav-item { display: block; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 20px; letter-spacing: 1px; text-transform: uppercase; color: var(--k1); padding: 14px 0; border-bottom: 1px solid var(--b); transition: color .15s, padding-left .15s; } .mob-nav-item:hover { color: var(--bl); padding-left: 4px; } .mob-nav-item.on { color: var(--bl); } /* Products sub-items in mobile menu */ .mob-sub-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .mob-sub-toggle .arr { font-size: 14px; color: var(--k5); transition: transform .2s; } .mob-sub-toggle.expanded .arr { transform: rotate(180deg); } .mob-sub-list { display: none; padding: 6px 0 4px 12px; border-left: 2px solid var(--b); margin-top: 6px; } .mob-sub-list.open { display: block; } .mob-sub-list a { display: block; font-family: "Barlow Condensed", sans-serif; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--k4); padding: 7px 0; border-bottom: 1px solid rgba(0,0,0,.04); transition: color .15s; } .mob-sub-list a:last-child { border: none; } .mob-sub-list a:hover { color: var(--bl); } .mob-sub-num { font-size: 9px; color: var(--k5); margin-right: 6px; font-weight: 400; } /* ── END HEADER ──────────────────────────────────────────── */ /* ── BUTTONS ─────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; border: none; cursor: pointer; transition: background .18s, color .18s, border-color .18s, transform .18s; } .btn-solid { background: var(--bl); color: #fff; } .btn-solid:hover { background: var(--bl2); transform: translateY(-1px); } .btn-dark { background: transparent; border: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.8); } .btn-dark:hover { border-color: rgba(255,255,255,.6); color: #fff; } .btn-light { background: transparent; border: 1px solid var(--b); color: var(--k2); } .btn-light:hover { border-color: var(--k4); color: var(--k0); } /* ── 4. HERO ─────────────────────────────────────────────── */ .hero { min-height: 86vh; display: flex; flex-direction: column; justify-content: flex-end; background: var(--k0); color: #fff; position: relative; overflow: hidden; } /* Swap hero background image here when available: background: url('../images/hero.jpg') center/cover no-repeat; */ .hero-grad { position: absolute; inset: 0; background: linear-gradient(160deg, #090b0f 0%, #101520 55%, #090d12 100%); } .hero-body { position: relative; z-index: 2; padding: 64px 0 52px; } .hero-pre { font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 18px; } .hero h1 { max-width: 700px; margin-bottom: 18px; color: #fff; } .hero-sub { font-size: 15px; font-weight: 300; color: rgba(255,255,255,.5); max-width: 480px; margin-bottom: 32px; line-height: 1.72; } .hero-cta { display: flex; gap: 10px; flex-wrap: wrap; } /* ── END HERO ────────────────────────────────────────────── */ /* ── 5. HOME SECTIONS ────────────────────────────────────── */ /* About strip */ .home-about { background: #fff; padding: 80px 0; border-bottom: 1px solid var(--b); } .hab-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .hab-img { background: var(--k1); aspect-ratio: 4/3; /* Replace with: background: url('../images/about.jpg') center/cover no-repeat; */ } .hab-text h2 { margin-bottom: 18px; } .hab-text p { font-size: 14px; color: var(--k4); margin-bottom: 14px; line-height: 1.75; font-weight: 300; } /* Products grid */ .home-prods { background: var(--k6); padding: 80px 0; } .hp-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; flex-wrap: wrap; gap: 14px; } .hp-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--b); background: var(--b); } .hp-card { padding: 24px 22px; background: #fff; cursor: pointer; transition: background .15s, transform .2s; position: relative; } .hp-card:hover { background: var(--k6); } .hp-num { font-family: "Barlow Condensed", sans-serif; font-size: 10px; letter-spacing: 1.5px; color: var(--k5); margin-bottom: 12px; } .hp-card h3 { font-size: 13px; margin-bottom: 6px; color: var(--k1); } .hp-card p { font-size: 12px; color: var(--k4); line-height: 1.5; } .hp-arr { position: absolute; bottom: 20px; right: 18px; color: var(--bl); font-size: 12px; opacity: 0; transform: translateX(-3px); transition: opacity .15s, transform .15s; } .hp-card:hover .hp-arr { opacity: 1; transform: translateX(0); } /* Capabilities strip */ .home-caps { background: var(--k0); color: #fff; padding: 72px 0; } .hcaps-inner { display: grid; grid-template-columns: 1.8fr 3fr; gap: 72px; align-items: start; } .hcaps-text h2 { color: #fff; margin-bottom: 14px; } .hcaps-text p { font-size: 14px; color: rgba(255,255,255,.42); font-weight: 300; line-height: 1.72; } .hcaps-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.06); } .hcap { background: var(--k1); padding: 20px 18px; } .hcap h3 { font-size: 12px; color: #fff; margin-bottom: 4px; } .hcap p { font-size: 12px; color: rgba(255,255,255,.32); line-height: 1.5; } .hcap-5 { grid-column: 1 / -1; } /* Contact strip — minimal */ .home-contact { background: #fff; padding: 72px 0; border-top: 1px solid var(--b); } .hcon-text h2 { margin-bottom: 12px; } .hcon-text p { font-size: 14px; color: var(--k4); font-weight: 300; margin-bottom: 24px; max-width: 440px; line-height: 1.72; } /* Company info rows (used on contact page, not homepage) */ .ci-row { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--b); font-size: 13px; } .ci-row:first-child { border-top: 1px solid var(--b); } .ci-k { font-family: "Barlow Condensed", sans-serif; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--k5); width: 68px; flex-shrink: 0; padding-top: 2px; } .ci-v { color: var(--k2); } /* ── END HOME SECTIONS ───────────────────────────────────── */ /* ── 6. INNER PAGE COMPONENTS ────────────────────────────── */ /* Page hero (dark header for inner pages) */ .ph { background: var(--k0); color: #fff; padding: 72px 0 44px; border-bottom: 1px solid rgba(255,255,255,.05); position: relative; overflow: hidden; } .ph h1 { max-width: 640px; margin-bottom: 10px; } .ph-sub { font-size: 14px; color: rgba(255,255,255,.45); max-width: 520px; font-weight: 300; line-height: 1.72; } /* Breadcrumb */ .bc { display: flex; align-items: center; gap: 6px; font-family: "Barlow Condensed", sans-serif; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.2); margin-bottom: 20px; } .bc a { color: rgba(255,255,255,.2); transition: color .12s; } .bc a:hover { color: var(--bl); } .bc .sep { color: rgba(255,255,255,.1); } .bc .cur { color: rgba(255,255,255,.45); } /* About page */ /* .abt — see rebuilt section below */ .abt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; margin-bottom: 48px; } .abt-img { background: var(--k1); aspect-ratio: 4/3; /* Replace with: background: url('../images/about.jpg') center/cover no-repeat; */ } .abt-text h2 { margin-bottom: 18px; } .abt-text p { font-size: 14px; color: var(--k4); margin-bottom: 13px; line-height: 1.75; font-weight: 300; } .abt-panels { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--b); background: var(--b); } .abt-panel { padding: 26px 22px; background: var(--k6); } .abt-panel h3 { font-size: 12px; color: var(--k1); margin-bottom: 8px; } .abt-panel p { font-size: 13px; color: var(--k4); line-height: 1.65; font-weight: 300; } /* Products list page */ .prods-page { background: #fff; padding: 64px 0; } .pp-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--b); background: var(--b); } .pp-card { padding: 24px 22px; background: #fff; cursor: pointer; transition: background .15s; position: relative; } .pp-card:hover { background: var(--k6); } .pp-num { font-family: "Barlow Condensed", sans-serif; font-size: 10px; letter-spacing: 1.5px; color: var(--k5); margin-bottom: 12px; } .pp-card h3 { font-size: 13px; color: var(--k1); margin-bottom: 6px; } .pp-card p { font-size: 12px; color: var(--k4); line-height: 1.5; } .pp-arr { position: absolute; bottom: 20px; right: 18px; color: var(--bl); font-size: 12px; opacity: 0; transform: translateX(-3px); transition: .12s; } .pp-card:hover .pp-arr { opacity: 1; transform: translateX(0); } /* Capabilities page */ .caps-page { background: #fff; padding: 64px 0; } .cp-grid { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--b); background: var(--b); margin-top: 32px; } .cp-item { padding: 28px 20px; background: #fff; border-top: 2px solid transparent; transition: border-top-color .15s; } .cp-item:hover { border-top-color: var(--bl); } .cp-item h3 { font-size: 12px; color: var(--k1); margin-bottom: 7px; } .cp-item p { font-size: 12px; color: var(--k4); line-height: 1.6; font-weight: 300; } .scope-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--b); background: var(--b); margin-top: 20px; } .scope-item { padding: 18px 20px; background: var(--k6); } .scope-item h3 { font-size: 12px; color: var(--k1); margin-bottom: 4px; } .scope-item p { font-size: 12px; color: var(--k4); } /* Contact page */ .contact-page { background: #fff; padding: 64px 0; } .cp-cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; } .cp-info > p { font-size: 14px; color: var(--k4); margin-bottom: 28px; font-weight: 300; line-height: 1.72; } .cf-title { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--k5); margin-bottom: 18px; } .fgrp { margin-bottom: 9px; } .fgrp label { display: block; font-family: "Barlow Condensed", sans-serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--k5); margin-bottom: 4px; } .fgrp input, .fgrp textarea, .fgrp select { width: 100%; padding: 8px 11px; background: var(--k6); border: 1px solid var(--b); font-family: "Barlow", sans-serif; font-size: 13px; color: var(--k2); outline: none; transition: border-color .15s; } .fgrp input:focus, .fgrp textarea:focus, .fgrp select:focus { border-color: var(--bl); } .fgrp textarea { min-height: 96px; resize: vertical; } .frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } /* Privacy page */ .privacy-page { background: #fff; padding: 64px 0; } .privacy-body { max-width: 720px; } .privacy-body h3 { font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--k1); margin: 32px 0 8px; font-weight: 600; } .privacy-body h3:first-child { margin-top: 0; } .privacy-body p { font-size: 14px; color: var(--k4); margin-bottom: 12px; line-height: 1.75; font-weight: 300; } .privacy-body ul { margin: 8px 0 14px 18px; } .privacy-body ul li { font-size: 14px; color: var(--k4); margin-bottom: 5px; line-height: 1.65; font-weight: 300; } .privacy-meta { font-family: "Barlow Condensed", sans-serif; font-size: 11px; letter-spacing: 1px; color: var(--k5); margin-bottom: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--b); } /* ── END INNER PAGES ─────────────────────────────────────── */ /* ── 7. PRODUCT DETAIL ───────────────────────────────────── */ .pd-wrap { background: var(--k6); padding: 0 0 48px; } .pd-layout { display: grid; grid-template-columns: 1fr 232px; gap: 1px; background: var(--b); margin-top: 2px; } /* Main body */ .pd-main { background: #fff; } .pd-sec { padding: 20px 24px; border-bottom: 1px solid var(--b); } .pd-sec:last-child { border-bottom: none; } .pd-sh { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--k5); margin-bottom: 10px; padding-bottom: 7px; border-bottom: 1px solid var(--b); } .pd-main p { font-size: 13px; color: var(--k3); line-height: 1.72; font-weight: 300; max-width: 640px; } .pd-subgroup { font-family: "Barlow Condensed", sans-serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--bl); margin: 14px 0 6px; display: block; } .pd-subgroup:first-child { margin-top: 0; } .pd-list { list-style: none; margin: 0; } .pd-list li { font-size: 12px; color: var(--k3); padding: 6px 0 6px 14px; border-bottom: 1px solid rgba(0,0,0,.04); position: relative; font-weight: 300; line-height: 1.6; } .pd-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 3px; height: 3px; border-radius: 50%; background: var(--bl); } .pd-list li:last-child { border: none; } /* Sidebar */ .pd-side { background: var(--k6); display: flex; flex-direction: column; } .pd-panel { background: #fff; border-bottom: 1px solid var(--b); flex-shrink: 0; } .pd-ph { padding: 9px 14px; font-family: "Barlow Condensed", sans-serif; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--k5); background: var(--k6); border-bottom: 1px solid var(--b); } .pd-spec-row { display: flex; padding: 8px 14px; border-bottom: 1px solid var(--b); font-size: 12px; align-items: baseline; gap: 12px; } .pd-spec-row:last-child { border: none; } .pd-sk { color: var(--k5); font-size: 10px; width: 80px; flex-shrink: 0; letter-spacing: .3px; } .pd-sv { color: var(--k0); font-weight: 500; font-size: 12px; letter-spacing: .2px; } .pd-cap-row { padding: 8px 14px; border-bottom: 1px solid var(--b); font-size: 12px; color: var(--k2); display: flex; align-items: center; gap: 8px; } .pd-cap-row:last-child { border: none; } .pd-cap-row::before { content: ""; display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--bl); flex-shrink: 0; } /* Enquiry box */ .pd-enq { background: var(--k1); padding: 16px 14px; margin-top: auto; } .pd-enq-label { font-family: "Barlow Condensed", sans-serif; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 6px; } .pd-enq p { font-size: 12px; color: rgba(255,255,255,.4); margin-bottom: 12px; line-height: 1.5; } .pd-enq .btn-solid { width: 100%; justify-content: center; font-size: 10px; padding: 9px 16px; } /* Related */ .pd-related { border-top: 1px solid var(--b); padding: 20px 0 0; } .pd-related-label { font-family: "Barlow Condensed", sans-serif; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--k5); margin-bottom: 10px; } .rel-row { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--b); background: var(--b); } .rel-item { background: #fff; padding: 13px 15px; cursor: pointer; transition: background .12s; } .rel-item:hover { background: var(--k6); } .rel-name { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 12px; color: var(--k0); text-transform: uppercase; margin-bottom: 3px; letter-spacing: .3px; } .rel-cal { font-size: 11px; color: var(--k5); } /* ── END PRODUCT DETAIL ──────────────────────────────────── */ /* ── 8. FOOTER ───────────────────────────────────────────── */ footer { background: var(--k0); color: rgba(255,255,255,.38); padding: 18px 0; border-top: 1px solid rgba(255,255,255,.05); } .foot-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } .foot-logo { height: 26px; object-fit: contain; filter: brightness(0) invert(1); opacity: .45; transition: opacity .15s; } .foot-logo:hover { opacity: .7; } .foot-left { display: flex; align-items: center; gap: 16px; font-size: 11px; } .foot-right { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .foot-right a { font-family: "Barlow Condensed", sans-serif; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.22); transition: color .12s; } .foot-right a:hover { color: rgba(255,255,255,.55); } .foot-sep { display: inline-block; width: 1px; height: 10px; background: rgba(255,255,255,.1); } /* ── END FOOTER ──────────────────────────────────────────── */ /* ── 9. ANIMATIONS ───────────────────────────────────────── */ /* Fade-up reveal — applied via JS IntersectionObserver */ .fade-up { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } /* Stagger delay utilities */ .delay-1 { transition-delay: .08s; } .delay-2 { transition-delay: .16s; } .delay-3 { transition-delay: .24s; } .delay-4 { transition-delay: .32s; } .delay-5 { transition-delay: .40s; } .delay-6 { transition-delay: .48s; } /* ── END ANIMATIONS ──────────────────────────────────────── */ /* ── 10. RESPONSIVE ──────────────────────────────────────── */ @media (max-width: 840px) { .hdr-nav { display: none; } .hdr-burger { display: flex; } .mob-menu { display: block; } .hdr-logo { height: 40px; } /* Stack layouts */ .hab-inner, .abt-grid, .hcaps-inner, .hcon-inner, .cp-cols { grid-template-columns: 1fr; } .hp-grid, .pp-grid { grid-template-columns: 1fr 1fr; } .cp-grid { grid-template-columns: repeat(3, 1fr); } .abt-panels, .scope-grid { grid-template-columns: 1fr; } .hcaps-list { grid-template-columns: 1fr; } .hcap-5 { grid-column: 1; } .hab-img, .abt-img { aspect-ratio: 16/7; } /* Product detail: stack main then sidebar */ .pd-layout { grid-template-columns: 1fr; } .pd-side { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--b); border-top: 1px solid var(--b); } .pd-panel { background: #fff; } .pd-enq { grid-column: 1 / -1; background: var(--k1); } /* Related: 2 col */ .rel-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .hp-grid, .pp-grid, .cp-grid, .rel-row { grid-template-columns: 1fr; } .frow2 { grid-template-columns: 1fr; } .pd-side { grid-template-columns: 1fr; } .pd-enq { grid-column: 1; } h1, .ph h1, .hero h1 { font-size: 32px; } h2 { font-size: 24px; } .hero-body { padding: 48px 0 40px; } .hero-sub { font-size: 14px; } .home-about, .home-prods, .home-caps, .home-contact { padding: 56px 0; } .abt { padding: 52px 0; } .prods-page, .caps-page, .contact-page, .privacy-page { padding: 44px 0; } .ph { padding: 56px 0 32px; } .pd-sec { padding: 16px 18px; } .pd-main p { font-size: 13px; } .pd-list li { font-size: 12px; } .pd-spec-row { padding: 8px 14px; } .pd-cap-row { padding: 8px 14px; } footer { padding: 14px 0; } .foot-inner { flex-direction: column; align-items: flex-start; gap: 8px; } .foot-right { gap: 12px; } } /* ── END RESPONSIVE ──────────────────────────────────────── */ /* ── ABOUT — Rebuilt ──────────────────────────────────────── */ .abt { background: var(--k0); color: #fff; } .abt-main { padding: 44px 0 0; } .abt-grid-new { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.06); } .abt-text-col .lbl { color: rgba(31,127,189,.85); } .abt-text-col .lbl::before { background: rgba(31,127,189,.85); } .abt-h2 { color: #fff; margin-bottom: 18px; font-size: clamp(24px, 3.2vw, 40px); line-height: 1.08; } .abt-text-col p { font-size: 14px; color: rgba(255,255,255,.52); margin-bottom: 15px; line-height: 1.78; font-weight: 300; } /* Blueprint panel */ .abt-bp-col { position: relative; } .abt-bp-panel { position: relative; width: 100%; aspect-ratio: 4/3; background: #0a0e14; overflow: hidden; border: 1px solid rgba(31,127,189,.15); } .abt-bp-label { position: absolute; bottom: 16px; left: 18px; z-index: 10; display: flex; flex-direction: column; gap: 3px; } .abt-bp-tag { font-family: "Barlow Condensed", sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(31,127,189,.7); } .abt-bp-sub { font-family: "Barlow Condensed", sans-serif; font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.22); } /* Capability panels */ .abt-caps { padding: 28px 0 52px; } .abt-caps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.07); } .abt-cap-panel { background: rgba(255,255,255,.03); padding: 32px 28px; border-top: 2px solid transparent; transition: border-top-color .2s, background .2s; } .abt-cap-panel:hover { border-top-color: var(--bl); background: rgba(255,255,255,.06); } .abt-cap-num { font-family: "Barlow Condensed", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; color: rgba(31,127,189,.5); margin-bottom: 12px; } .abt-cap-panel h3 { font-size: 14px; color: rgba(255,255,255,.85); margin-bottom: 10px; letter-spacing: .4px; } .abt-cap-panel p { font-size: 13px; color: rgba(255,255,255,.38); line-height: 1.65; font-weight: 300; } /* Mobile */ @media (max-width: 840px) { .abt-grid-new { grid-template-columns: 1fr; gap: 20px; } .abt-caps-grid { grid-template-columns: 1fr; } /* Image panel: below text, landscape ratio */ .abt-bp-col { order: 2; margin-top: 0; } .abt-text-col { order: 1; } .abt-bp-panel { aspect-ratio: 16 / 7; } .abt-main { padding: 32px 0 0; } } @media (max-width: 520px) { .abt-main { padding: 52px 0 0; } .abt-caps { padding: 32px 0 48px; } } /* ── END ABOUT ────────────────────────────────────────────── */ /* ════════════════════════════════════════════════════════════ PHASE 2B — PRODUCT PAGE REFINEMENT ════════════════════════════════════════════════════════════ */ /* Section header — left accent + stronger label */ .pd-sh { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 9px; letter-spacing: 2.8px; text-transform: uppercase; color: var(--k2); margin-bottom: 12px; padding: 0 0 8px 10px; border-bottom: 1px solid var(--b); border-left: 2px solid var(--bl); line-height: 1.4; } /* Section padding — slightly more generous */ .pd-sec { padding: 22px 24px; border-bottom: 1px solid var(--b); transition: background .15s; } .pd-sec:last-child { border-bottom: none; } /* List item hover */ .pd-list li { transition: background .12s, padding-left .12s; } .pd-list li:hover { background: rgba(31,127,189,.04); padding-left: 18px; } /* Sidebar panel headers — dark treatment */ .pd-ph { padding: 10px 14px; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.55); background: var(--k1); border-bottom: 1px solid rgba(255,255,255,.06); } /* Sidebar panels — slightly elevated */ .pd-panel { background: #fff; border-bottom: 1px solid var(--b); flex-shrink: 0; box-shadow: inset 0 -1px 0 var(--b); } /* Spec rows — zebra striping */ .pd-spec-row:nth-child(even) { background: #fafbfc; } .pd-spec-row { display: flex; padding: 8px 14px; border-bottom: 1px solid var(--b); font-size: 12px; align-items: baseline; gap: 12px; transition: background .1s; } .pd-spec-row:hover { background: rgba(31,127,189,.04); } .pd-spec-row:last-child { border: none; } .pd-sk { color: var(--k4); font-size: 10px; width: 80px; flex-shrink: 0; letter-spacing: .3px; } .pd-sv { color: var(--k0); font-weight: 600; font-size: 12px; letter-spacing: .2px; } /* Cap rows */ .pd-cap-row { padding: 8px 14px; border-bottom: 1px solid var(--b); font-size: 12px; color: var(--k2); display: flex; align-items: center; gap: 8px; transition: background .1s; } .pd-cap-row:hover { background: rgba(31,127,189,.04); } .pd-cap-row:last-child { border: none; } .pd-cap-row::before { content: ""; display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--bl); flex-shrink: 0; } /* Enquiry box refinement */ .pd-enq { background: var(--k0); padding: 18px 14px; border-top: 1px solid rgba(255,255,255,.06); margin-top: auto; } .pd-enq-label { font-family: "Barlow Condensed", sans-serif; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.28); margin-bottom: 8px; } .pd-enq p { font-size: 12px; color: rgba(255,255,255,.38); margin-bottom: 14px; line-height: 1.55; } /* Sidebar sticky */ .pd-side { background: var(--k6); display: flex; flex-direction: column; position: sticky; top: 66px; max-height: calc(100vh - 66px); overflow-y: auto; } /* pd-main text color slightly stronger */ .pd-main p { color: var(--k2); } /* Subgroup labels */ .pd-subgroup { font-family: "Barlow Condensed", sans-serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--bl); margin: 16px 0 7px; display: block; font-weight: 700; } .pd-subgroup:first-child { margin-top: 0; } /* Related section refinement */ .pd-related { border-top: 1px solid var(--b); padding: 22px 0 0; background: var(--k6); } .rel-item { background: #fff; padding: 14px 16px; cursor: pointer; transition: background .15s, border-left-color .15s; border-left: 2px solid transparent; } .rel-item:hover { background: var(--k6); border-left-color: var(--bl); } /* ════════════════════════════════════════════════════════════ PHASE 3 — GLOBAL POLISH ════════════════════════════════════════════════════════════ */ /* Card hover depth */ .hp-card:hover { background: var(--k6); box-shadow: inset 0 0 0 1px rgba(31,127,189,.12); } .pp-card:hover { background: var(--k6); box-shadow: inset 0 0 0 1px rgba(31,127,189,.12); } /* Capabilities hover */ .cp-item:hover { border-top-color: var(--bl); background: #fafbfc; } /* About panels hover */ .abt-panel:hover { background: #fff; } /* Footer polish */ .foot-logo { opacity: .5; } footer { color: rgba(255,255,255,.42); } .foot-right a { color: rgba(255,255,255,.28); } /* Breadcrumb — slightly more visible */ .bc .cur { color: rgba(255,255,255,.55); } /* Hero pre-label */ .hero-pre { letter-spacing: 3.5px; } /* Section transitions — thin separator between home-prods and home-caps */ .home-prods { border-bottom: 1px solid var(--b); } /* Contact info rows — slightly more defined */ .ci-row { border-bottom: 1px solid #e8eaed; } .ci-row:first-child { border-top: 1px solid #e8eaed; } /* Form focus rings */ .fgrp input:focus, .fgrp textarea:focus, .fgrp select:focus { border-color: var(--bl); box-shadow: 0 0 0 2px rgba(31,127,189,.08); } /* Privacy page — link color */ .privacy-body a { color: var(--bl); } /* Smooth page transitions for fade-up */ .fade-up { opacity: 0; transform: translateY(16px); transition: opacity .52s cubic-bezier(.22,.61,.36,1), transform .52s cubic-bezier(.22,.61,.36,1); } .fade-up.visible { opacity: 1; transform: translateY(0); } /* Delay helpers — slightly longer for more premium feel */ .delay-1 { transition-delay: .09s; } .delay-2 { transition-delay: .18s; } .delay-3 { transition-delay: .27s; } .delay-4 { transition-delay: .36s; } .delay-5 { transition-delay: .45s; } .delay-6 { transition-delay: .54s; } /* ── END REFINEMENTS ──────────────────────────────────────── */ /* ── Homepage About strip: text-only layout ───────────────── */ .hab-inner--text-only { grid-template-columns: 1fr; max-width: 720px; gap: 0; } .hab-inner--text-only .hab-text h2 { margin-bottom: 16px; } /* ── END ───────────────────────────────────────────────────── */ /* ════════════════════════════════════════════════════════════ LANGUAGE SWITCHER ════════════════════════════════════════════════════════════ */ .lang-sw { position: relative; margin-left: 20px; flex-shrink: 0; } .lang-btn { background: none; border: none; cursor: pointer; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: #6b7280; padding: 4px 0; display: flex; align-items: center; gap: 4px; transition: color .15s; } .lang-btn:hover { color: #0d0f12; } .lang-arr { font-size: 9px; } .lang-drop { position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border: 1px solid #e2e5e9; box-shadow: 0 4px 12px rgba(0,0,0,.08); min-width: 120px; z-index: 400; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .lang-drop.open { opacity: 1; transform: translateY(0); pointer-events: all; } .lang-opt { display: block; padding: 9px 14px; font-family: "Barlow Condensed", sans-serif; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: #6b7280; text-decoration: none; transition: background .12s, color .12s; } .lang-opt:hover { background: #f4f6f8; color: #0d0f12; } .lang-opt--active { color: #0d0f12; font-weight: 700; } /* Mobile language selector */ .mob-lang { padding: 20px 0 4px; border-top: 1px solid var(--b); margin-top: 8px; } .mob-lang-label { font-family: "Barlow Condensed", sans-serif; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--k5); margin-bottom: 12px; } .mob-lang-opt { display: block; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; color: var(--k2); padding: 13px 0; border-bottom: 1px solid var(--b); transition: color .15s, padding-left .15s; } .mob-lang-opt:hover { color: var(--bl); padding-left: 4px; } .mob-lang-opt--active { color: var(--k0); font-weight: 700; } /* Hide lang-sw on mobile (replaced by mob-lang) */ @media (max-width: 840px) { .lang-sw { display: none; } } /* ════════════════════════════════════════════════════════════ DESKTOP TYPOGRAPHY SCALING (min-width: 1200px) ════════════════════════════════════════════════════════════ */ /* ── END DESKTOP SCALING ──────────────────────────────────── */ /* ════════════════════════════════════════════════════════════ DESKTOP READABILITY + DENSITY (min-width: 1200px) ════════════════════════════════════════════════════════════ */ /* ── END DESKTOP ─────────────────────────────────────────── */ /* ════════════════════════════════════════════════════════════ DESKTOP READABILITY + PRODUCT PAGE DENSITY min-width: 1200px — do not modify mobile below this ════════════════════════════════════════════════════════════ */ @media (min-width: 1200px) { /* ── Navigation ─────────────────────────────────────────── */ .hdr-nav a { font-size: 13px; letter-spacing: 1.6px; } .lang-btn { font-size: 12px; letter-spacing: 1.6px; } /* ── Page hero subtitle (h1 description) ────────────────── */ .ph-sub { font-size: 16px; line-height: 1.78; } /* ── General body paragraphs ────────────────────────────── */ .pd-main p, .abt-text-col p, .hab-text p, .hcon-text p, .cp-info > p, .privacy-body p { font-size: 16px; line-height: 1.80; } /* ── Product list items ──────────────────────────────────── */ .pd-list li { font-size: 15px; line-height: 1.65; } /* ── Sidebar specification rows ──────────────────────────── */ .pd-spec-row { font-size: 13px; padding: 8px 12px; } .pd-sk { font-size: 11px; width: 86px; } .pd-sv { font-size: 15px; } .pd-cap-row { font-size: 15px; padding: 8px 12px; } .pd-enq p { font-size: 15px; line-height: 1.62; } /* ── Sidebar: slightly wider ─────────────────────────────── */ .pd-layout { grid-template-columns: 1fr 280px; } /* ── Product page section spacing (tighter) ──────────────── */ .pd-sec { padding: 16px 20px; } .pd-ph { padding: 8px 12px; } .pd-wrap { padding-bottom: 36px; } /* ── Related products ────────────────────────────────────── */ .pd-related { padding: 14px 0 0; } .rel-item { padding: 10px 12px; } .rel-name { font-size: 14px; } .rel-cal { font-size: 14px; } /* ── Product cards (homepage + products list) ────────────── */ .hp-card h3, .pp-card h3 { font-size: 14px; } .hp-card p, .pp-card p { font-size: 14px; } /* ── Capabilities page ───────────────────────────────────── */ .cp-item p, .scope-item p { font-size: 14px; } .hcap p { font-size: 14px; } /* ── About section panels ────────────────────────────────── */ .abt-cap-panel p { font-size: 14px; } .abt-panel p { font-size: 14px; } /* ── Privacy page ────────────────────────────────────────── */ .privacy-body ul li { font-size: 16px; line-height: 1.80; } /* ── Contact ─────────────────────────────────────────────── */ .ci-v { font-size: 14px; } } /* ── END DESKTOP ─────────────────────────────────────────── */