/* ================================================================== Kovine Gorsek — Site-wide Design System 2026 (kg-site.css) Dark industrial theme for all redesigned pages + header/footer skin. Self-contained: subpages only need this file (+ js/home-redesign.js for reveals/counters/tilt). Pages opt in via . ================================================================== */ :root { --kg-bg: #0a0e14; --kg-bg-alt: #0e141d; --kg-panel: #121a26; --kg-line: rgba(255, 255, 255, 0.08); --kg-blue: #005eb8; --kg-cyan: #2ea3f2; --kg-text: #aab4c3; --kg-text-bright: #eef2f7; --kg-glow: rgba(46, 163, 242, 0.35); } body.kg-dark { background-color: var(--kg-bg); color: var(--kg-text); } body.kg-dark ::selection { background: rgba(46, 163, 242, 0.35); color: #fff; } /* ================================================================== PRIMITIVES (shared with homepage design) ================================================================== */ .kg-section { position: relative; padding: 100px 0; background: var(--kg-bg); overflow: hidden; } .kg-section.kg-alt { background: var(--kg-bg-alt); } .kg-container { width: 88%; max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; } .kg-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--kg-cyan); margin-bottom: 18px; } .kg-eyebrow::before { content: ''; display: block; width: 34px; height: 2px; background: linear-gradient(90deg, var(--kg-blue), var(--kg-cyan)); } .kg-h2 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.12; color: var(--kg-text-bright); font-weight: 700; letter-spacing: -0.5px; margin-bottom: 22px; } .kg-h3 { font-size: 20px; color: var(--kg-text-bright); font-weight: 700; letter-spacing: -0.2px; margin-bottom: 12px; } .kg-lead { font-size: 17px; line-height: 1.8; color: var(--kg-text); max-width: 680px; } .kg-grid-bg::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(46, 163, 242, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 163, 242, 0.045) 1px, transparent 1px); background-size: 56px 56px; pointer-events: none; z-index: 1; } /* Buttons */ .kg-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 34px; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 4px; cursor: pointer; border: none; position: relative; overflow: hidden; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease; will-change: transform; } .kg-btn svg { transition: transform 0.3s ease; } .kg-btn:hover svg { transform: translateX(4px); } .kg-btn-primary { background: linear-gradient(120deg, var(--kg-blue) 0%, #0a78dd 100%); color: #fff !important; box-shadow: 0 8px 28px rgba(0, 94, 184, 0.35); } .kg-btn-primary::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.25), transparent); transform: skewX(-20deg); transition: left 0.55s ease; } .kg-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0, 94, 184, 0.5); } .kg-btn-primary:hover::after { left: 130%; } .kg-btn-ghost { background: transparent; color: var(--kg-text-bright) !important; border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(4px); } .kg-btn-ghost:hover { transform: translateY(-3px); border-color: var(--kg-cyan); color: var(--kg-cyan) !important; box-shadow: 0 10px 30px rgba(46, 163, 242, 0.18); } .kg-link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--kg-cyan) !important; white-space: nowrap; } .kg-link-arrow svg { transition: transform 0.3s ease; } .kg-link-arrow:hover svg { transform: translateX(5px); } /* Scroll reveal (js/home-redesign.js) */ .kg-reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--kg-delay, 0s); } .kg-reveal.kg-revealed { opacity: 1; transform: translateY(0); } /* Cards (tilt + spotlight via home-redesign.js) */ .kg-card { position: relative; background: var(--kg-panel); border: 1px solid var(--kg-line); border-radius: 12px; padding: 36px 28px; transform-style: preserve-3d; transition: border-color 0.35s ease, box-shadow 0.35s ease; will-change: transform; } .kg-card:hover { border-color: rgba(46, 163, 242, 0.45); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(46, 163, 242, 0.12); } .kg-card::before { content: ''; position: absolute; inset: 0; border-radius: 12px; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(46, 163, 242, 0.10), transparent 45%); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .kg-card:hover::before { opacity: 1; } .kg-card-icon { width: 54px; height: 54px; margin-bottom: 22px; color: var(--kg-cyan); } .kg-card-icon svg { width: 100%; height: 100%; } .kg-card h3 { font-size: 19px; color: var(--kg-text-bright); font-weight: 700; margin-bottom: 12px; letter-spacing: -0.2px; } .kg-card p { font-size: 14.5px; line-height: 1.75; color: var(--kg-text); margin: 0; } .kg-draw-icon path, .kg-draw-icon circle, .kg-draw-icon rect, .kg-draw-icon line, .kg-draw-icon polygon, .kg-draw-icon polyline { stroke-dasharray: 180; stroke-dashoffset: 180; } .kg-revealed .kg-draw-icon path, .kg-revealed .kg-draw-icon circle, .kg-revealed .kg-draw-icon rect, .kg-revealed .kg-draw-icon line, .kg-revealed .kg-draw-icon polygon, .kg-revealed .kg-draw-icon polyline { animation: kg-draw-icon 1.4s cubic-bezier(0.65, 0, 0.35, 1) forwards; } @keyframes kg-draw-icon { to { stroke-dashoffset: 0; } } /* Generic responsive card grids */ .kg-grid-2, .kg-grid-3, .kg-grid-4 { display: grid; gap: 22px; margin-top: 50px; } .kg-grid-2 { grid-template-columns: repeat(2, 1fr); } .kg-grid-3 { grid-template-columns: repeat(3, 1fr); } .kg-grid-4 { grid-template-columns: repeat(4, 1fr); } /* Checklist */ .kg-checklist { list-style: none; margin: 34px 0 40px; padding: 0; display: grid; gap: 18px; } .kg-checklist li { display: flex; gap: 16px; align-items: flex-start; font-size: 16px; color: var(--kg-text); line-height: 1.6; } .kg-checklist li strong { color: var(--kg-text-bright); } .kg-check { flex: none; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; background: rgba(46, 163, 242, 0.12); border: 1px solid rgba(46, 163, 242, 0.4); display: flex; align-items: center; justify-content: center; color: var(--kg-cyan); } /* Stats band */ .kg-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--kg-line); border-radius: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)); overflow: hidden; } .kg-stat { padding: 38px 28px; text-align: center; position: relative; } .kg-stat + .kg-stat::before { content: ''; position: absolute; left: 0; top: 22%; height: 56%; width: 1px; background: var(--kg-line); } .kg-stat-num { font-size: clamp(34px, 4vw, 50px); font-weight: 800; letter-spacing: -1px; color: var(--kg-text-bright); line-height: 1; margin-bottom: 10px; font-variant-numeric: tabular-nums; } .kg-stat-num .kg-suffix { color: var(--kg-cyan); } .kg-stat-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--kg-text); } .kg-stat-tick { width: 26px; height: 3px; margin: 0 auto 18px; border-radius: 2px; background: linear-gradient(90deg, var(--kg-blue), var(--kg-cyan)); box-shadow: 0 0 14px var(--kg-glow); } /* Chips */ .kg-chip { display: inline-flex; align-items: center; gap: 12px; padding: 14px 26px; background: var(--kg-panel); border: 1px solid var(--kg-line); border-radius: 999px; font-size: 15px; font-weight: 700; color: var(--kg-text-bright); white-space: nowrap; transition: border-color 0.3s ease, color 0.3s ease; } .kg-chip:hover { border-color: rgba(46, 163, 242, 0.5); color: var(--kg-cyan); } .kg-chip svg { color: var(--kg-cyan); flex: none; } .kg-chip-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; } /* Note / info box */ .kg-note { display: flex; gap: 13px; align-items: flex-start; max-width: 560px; margin: 0 0 34px; padding: 15px 18px; border-radius: 10px; border: 1px solid rgba(255, 193, 90, 0.32); background: rgba(255, 193, 90, 0.07); font-size: 14px; line-height: 1.65; color: var(--kg-text); } .kg-note svg { flex: none; margin-top: 1px; color: #ffc15a; } .kg-note strong { color: var(--kg-text-bright); font-weight: 700; } /* Security note */ .kg-security-note { display: flex; align-items: center; gap: 9px; margin: 22px 0 0; font-size: 13px; line-height: 1.5; color: var(--kg-text-muted, rgba(255,255,255,0.45)); } .kg-security-note svg { flex: none; color: rgba(255,255,255,0.35); } /* Final CTA */ .kg-cta { position: relative; padding: 130px 0; overflow: hidden; text-align: center; background: var(--kg-bg); } .kg-cta-bg { position: absolute; inset: 0; background-size: cover; background-position: center; animation: kg-kenburns 26s ease-in-out infinite alternate; } .kg-cta::after { content: ''; position: absolute; inset: 0; background: rgba(7, 11, 17, 0.86); } .kg-cta .kg-container { z-index: 3; } .kg-cta .kg-h2 { margin-left: auto; margin-right: auto; } .kg-cta .kg-lead { margin: 0 auto 42px; } .kg-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } @keyframes kg-kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, -1%); } } @keyframes kg-fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes kg-fade-in { to { opacity: 1; } } /* ================================================================== PAGE HERO (compact hero for subpages) ================================================================== */ .kg-page-hero { position: relative; min-height: 62vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--kg-bg); padding: 170px 0 80px; } .kg-ph-media { position: absolute; inset: 0; z-index: 0; } .kg-ph-media img, .kg-ph-media .kg-ph-img { width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; animation: kg-kenburns 26s ease-in-out infinite alternate; } .kg-ph-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(7, 11, 17, 0.92) 25%, rgba(7, 11, 17, 0.55) 70%, rgba(7, 11, 17, 0.4) 100%), linear-gradient(to top, var(--kg-bg) 0%, transparent 32%); } .kg-ph-grid { position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(rgba(46, 163, 242, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 163, 242, 0.06) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 70% at 30% 60%, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 60%, black 30%, transparent 75%); pointer-events: none; } .kg-page-hero .kg-container { z-index: 2; } .kg-page-hero .kg-eyebrow { opacity: 0; animation: kg-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards; } .kg-ph-title { font-size: clamp(36px, 5.6vw, 64px); line-height: 1.05; font-weight: 800; letter-spacing: -1.2px; color: var(--kg-text-bright); margin-bottom: 18px; max-width: 18ch; opacity: 0; animation: kg-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards; } .kg-ph-title .kg-accent { background: linear-gradient(92deg, var(--kg-cyan) 0%, #7cc7ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .kg-ph-sub { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.75; color: var(--kg-text); max-width: 600px; margin-bottom: 0; opacity: 0; animation: kg-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards; } .kg-ph-sub strong { color: var(--kg-text-bright); } .kg-ph-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; opacity: 0; animation: kg-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.65s forwards; } /* toolpath divider (optional decorative line) */ .kg-toolpath-line { width: min(380px, 60%); height: 14px; margin: 20px 0 4px; opacity: 0; animation: kg-fade-in 0.4s ease 0.7s forwards; } .kg-toolpath-line path { stroke-dasharray: 520; stroke-dashoffset: 520; animation: kg-draw-line 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.8s forwards; } @keyframes kg-draw-line { to { stroke-dashoffset: 0; } } /* ================================================================== PROCESS STEPS (engineering) ================================================================== */ .kg-process { position: relative; display: grid; gap: 26px; margin-top: 56px; counter-reset: kgstep; } .kg-process-step { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 26px; background: var(--kg-panel); border: 1px solid var(--kg-line); border-radius: 12px; padding: 30px 32px; transition: border-color 0.35s ease, transform 0.35s ease; } .kg-process-step:hover { border-color: rgba(46, 163, 242, 0.45); transform: translateX(6px); } .kg-process-num { width: 56px; height: 56px; border-radius: 12px; background: rgba(46, 163, 242, 0.1); border: 1px solid rgba(46, 163, 242, 0.35); color: var(--kg-cyan); font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .kg-process-step h3 { margin-bottom: 10px; font-size: 19px; color: var(--kg-text-bright); } .kg-process-step p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--kg-text); } /* ================================================================== DATA TABLES (machinery) ================================================================== */ .kg-table-wrap { margin-top: 44px; border: 1px solid var(--kg-line); border-radius: 12px; overflow: hidden; background: var(--kg-panel); } .kg-table-title { display: flex; align-items: center; gap: 14px; padding: 22px 26px; font-size: 17px; font-weight: 700; color: var(--kg-text-bright); border-bottom: 1px solid var(--kg-line); background: linear-gradient(180deg, rgba(46, 163, 242, 0.06), transparent); } .kg-table-title svg { color: var(--kg-cyan); flex: none; } .kg-table-scroll { overflow-x: auto; } table.kg-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; } table.kg-table th { text-align: left; padding: 14px 26px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--kg-cyan); border-bottom: 1px solid var(--kg-line); white-space: nowrap; } table.kg-table td { padding: 14px 26px; color: var(--kg-text); border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-variant-numeric: tabular-nums; } table.kg-table td:first-child { color: var(--kg-text-bright); font-weight: 600; } table.kg-table tr:last-child td { border-bottom: none; } table.kg-table tbody tr { transition: background 0.25s ease; } table.kg-table tbody tr:hover { background: rgba(46, 163, 242, 0.05); } /* ================================================================== TIMELINE (about) ================================================================== */ .kg-timeline { position: relative; margin-top: 60px; padding-left: 36px; } .kg-timeline::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--kg-blue), var(--kg-cyan), rgba(46, 163, 242, 0.1)); } .kg-tl-item { position: relative; padding-bottom: 42px; } .kg-tl-item:last-child { padding-bottom: 0; } .kg-tl-item::before { content: ''; position: absolute; left: -34px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--kg-bg); border: 3px solid var(--kg-cyan); box-shadow: 0 0 14px var(--kg-glow); } .kg-tl-year { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: 2px; color: var(--kg-cyan); background: rgba(46, 163, 242, 0.1); border: 1px solid rgba(46, 163, 242, 0.3); border-radius: 6px; padding: 4px 12px; margin-bottom: 12px; } .kg-tl-item h3 { font-size: 18px; color: var(--kg-text-bright); margin-bottom: 8px; } .kg-tl-item p { font-size: 15px; line-height: 1.75; color: var(--kg-text); margin: 0; max-width: 640px; } @media (min-width: 900px) { .kg-timeline { padding-left: 0; } .kg-timeline::before { left: 50%; margin-left: -1px; } .kg-tl-item { width: 50%; padding-right: 56px; } .kg-tl-item::before { left: auto; right: -7px; } .kg-tl-item:nth-child(even) { margin-left: 50%; padding-right: 0; padding-left: 56px; } .kg-tl-item:nth-child(even)::before { right: auto; left: -7px; } } /* ================================================================== TEAM (about) ================================================================== */ .kg-team-card { background: var(--kg-panel); border: 1px solid var(--kg-line); border-radius: 12px; padding: 34px 28px; text-align: center; transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease; } .kg-team-card:hover { border-color: rgba(46, 163, 242, 0.45); transform: translateY(-6px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); } .kg-avatar { width: 76px; height: 76px; margin: 0 auto 20px; border-radius: 50%; background: linear-gradient(135deg, rgba(0, 94, 184, 0.35), rgba(46, 163, 242, 0.15)); border: 1px solid rgba(46, 163, 242, 0.4); color: var(--kg-cyan); font-size: 24px; font-weight: 800; letter-spacing: 1px; display: flex; align-items: center; justify-content: center; } .kg-team-card h3 { font-size: 18px; color: var(--kg-text-bright); margin-bottom: 4px; } .kg-team-role { display: block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--kg-cyan); margin-bottom: 14px; } .kg-team-card p { font-size: 14px; line-height: 1.7; color: var(--kg-text); margin: 0; } /* ================================================================== GALLERY (gallery page + page galleries) ================================================================== */ .kg-filterbar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; } .kg-filter-btn { padding: 11px 22px; border-radius: 999px; background: var(--kg-panel); border: 1px solid var(--kg-line); color: var(--kg-text); font-size: 13.5px; font-weight: 700; letter-spacing: 0.5px; cursor: pointer; transition: all 0.3s ease; } .kg-filter-btn:hover { border-color: rgba(46, 163, 242, 0.5); color: var(--kg-cyan); } .kg-filter-btn.active { background: linear-gradient(120deg, var(--kg-blue), #0a78dd); border-color: transparent; color: #fff; box-shadow: 0 6px 20px rgba(0, 94, 184, 0.4); } .kg-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; } .kg-gallery-grid .gallery-item, .kg-gitem { position: relative; border-radius: 10px; overflow: hidden; cursor: pointer; border: 1px solid var(--kg-line); aspect-ratio: 4 / 3; transition: opacity 0.4s ease, transform 0.4s ease; } .kg-gallery-grid .gallery-item img, .kg-gitem img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease; filter: saturate(0.85); } .kg-gallery-grid .gallery-item:hover img, .kg-gitem:hover img { transform: scale(1.08); filter: saturate(1.05); } .kg-gcap { position: absolute; inset: auto 0 0 0; padding: 46px 18px 14px; background: linear-gradient(to top, rgba(7, 11, 17, 0.94), transparent); color: var(--kg-text-bright); transform: translateY(12px); opacity: 0; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease; pointer-events: none; } .kg-gcap h4 { font-size: 15px; font-weight: 700; color: var(--kg-text-bright); margin: 0 0 2px; } .kg-gcap p { font-size: 12.5px; color: var(--kg-text); margin: 0; } .kg-gallery-grid .gallery-item:hover .kg-gcap, .kg-gitem:hover .kg-gcap { transform: translateY(0); opacity: 1; } .kg-gitem.kg-hidden { display: none; } /* ================================================================== CONTACT (contact page) ================================================================== */ .kg-contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 50px; } .kg-contact-card { background: var(--kg-panel); border: 1px solid var(--kg-line); border-radius: 12px; padding: 32px 28px; transition: border-color 0.35s ease, transform 0.35s ease; } .kg-contact-card:hover { border-color: rgba(46, 163, 242, 0.45); transform: translateY(-4px); } .kg-contact-card .kg-card-icon { margin-bottom: 18px; width: 46px; height: 46px; } .kg-contact-card h3 { font-size: 18px; color: var(--kg-text-bright); margin-bottom: 12px; } .kg-contact-card p { font-size: 15px; line-height: 1.8; color: var(--kg-text); margin: 0 0 8px; } .kg-contact-card a { color: var(--kg-cyan); } .kg-contact-card a:hover { color: #7cc7ff; } .kg-hours { width: 100%; border-collapse: collapse; font-size: 15px; } .kg-hours td { padding: 8px 0; color: var(--kg-text); border-bottom: 1px solid rgba(255,255,255,0.05); } .kg-hours td:last-child { text-align: right; color: var(--kg-text-bright); font-weight: 600; } .kg-hours tr:last-child td { border-bottom: none; } /* reveal-contact buttons inside dark pages */ body.kg-dark .reveal-contact { color: var(--kg-cyan) !important; cursor: pointer; } /* ================================================================== HEADER — dark glass skin (body.kg-dark scope) ================================================================== */ body.kg-dark #main-header { background: rgba(9, 13, 20, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } body.kg-dark #main-header.scrolled { background: rgba(9, 13, 20, 0.94); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important; } /* white logo on dark */ body.kg-dark #logo { filter: brightness(0) invert(1); } body.kg-dark #nav-menu > li > a { color: var(--kg-text); font-weight: 600; position: relative; transition: color 0.25s ease; } body.kg-dark #nav-menu > li > a:hover { color: var(--kg-text-bright); } /* animated underline */ @media (min-width: 981px) { body.kg-dark #nav-menu > li > a::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 0; height: 2px; background: linear-gradient(90deg, var(--kg-blue), var(--kg-cyan)); transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), left 0.3s cubic-bezier(0.22, 1, 0.36, 1); border-radius: 2px; /* neutralize modern.css translateX(-50%)/scaleX underline */ transform: none !important; } body.kg-dark #nav-menu > li > a:hover::after { width: 100%; left: 0; transform: none !important; } /* Active page is shown as a pill (from style.css); no underline under it */ body.kg-dark #nav-menu > li.active > a::after, body.kg-dark #nav-menu > li.nav-portal-btn > a::after, body.kg-dark #nav-menu > li.language-selector > a::after { display: none !important; } } body.kg-dark #nav-menu > li.active > a { color: #fff; } /* Quote tool nav button keeps its highlight, restyled */ body.kg-dark .nav-quote-tool > a { background: linear-gradient(120deg, var(--kg-blue), #0a78dd) !important; color: #fff !important; border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 94, 184, 0.4); } body.kg-dark .nav-quote-tool > a::after { display: none !important; } /* dropdowns */ body.kg-dark .qt-dropdown, body.kg-dark .language-dropdown { background: rgba(14, 20, 29, 0.97) !important; backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.09) !important; border-radius: 10px !important; box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55) !important; overflow: hidden; } body.kg-dark .qt-dropdown a, body.kg-dark .language-dropdown a { color: var(--kg-text) !important; } body.kg-dark .qt-dropdown a:hover, body.kg-dark .language-dropdown a:hover { background: rgba(46, 163, 242, 0.1) !important; color: var(--kg-cyan) !important; } body.kg-dark .qt-dd-sep { background: rgba(255, 255, 255, 0.07) !important; } /* portal/login button */ body.kg-dark .nav-portal-btn a { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: var(--kg-text-bright) !important; border-radius: 999px; transition: all 0.3s ease; } body.kg-dark .nav-portal-btn a:hover { border-color: var(--kg-cyan) !important; color: var(--kg-cyan) !important; box-shadow: 0 6px 18px rgba(46, 163, 242, 0.2); } body.kg-dark .nav-portal-btn a svg { fill: currentColor; } /* mobile toggle + slide-in menu */ body.kg-dark .mobile-menu-toggle span { background: var(--kg-text-bright) !important; } @media (max-width: 980px) { body.kg-dark #nav-menu { background: rgba(11, 16, 24, 0.98) !important; border-left: 1px solid rgba(255, 255, 255, 0.07); } body.kg-dark #nav-menu li { border-color: rgba(255, 255, 255, 0.06) !important; } body.kg-dark #nav-menu a { color: var(--kg-text) !important; } body.kg-dark #nav-menu a:hover { color: var(--kg-cyan) !important; } } /* ================================================================== FOOTER — re-skin of #main-footer (body.kg-dark scope) Overrides modern-footer.css on redesigned pages only. ================================================================== */ body.kg-dark #main-footer { background: linear-gradient(180deg, var(--kg-bg-alt) 0%, #070b11 100%); margin-top: 0; box-shadow: none; padding: 80px 0 28px; } body.kg-dark #main-footer::before { background: linear-gradient(90deg, transparent, var(--kg-blue) 30%, var(--kg-cyan) 50%, var(--kg-blue) 70%, transparent); background-size: 200% 100%; height: 2px; } body.kg-dark #main-footer::after { background-image: radial-gradient(circle at 15% 85%, rgba(0, 94, 184, 0.10) 0%, transparent 50%), radial-gradient(circle at 85% 15%, rgba(46, 163, 242, 0.07) 0%, transparent 50%); } body.kg-dark #main-footer .footer-content { gap: 44px; margin-bottom: 44px; } body.kg-dark #main-footer .footer-section h3 { font-size: 15px; letter-spacing: 2.5px; color: var(--kg-text-bright); padding-bottom: 12px; margin-bottom: 20px; text-shadow: none; } body.kg-dark #main-footer .footer-section h3::after { width: 34px; height: 2px; background: linear-gradient(90deg, var(--kg-blue), var(--kg-cyan)); animation: none; } body.kg-dark #main-footer .footer-section p { color: var(--kg-text); font-size: 14.5px; text-shadow: none; } body.kg-dark #main-footer .footer-section strong { color: #ffc15a; text-shadow: none; } body.kg-dark #main-footer .footer-section ul li { margin-bottom: 11px; } body.kg-dark #main-footer .footer-section ul li a { color: var(--kg-text) !important; font-size: 14.5px; transition: color 0.25s ease, padding-left 0.25s ease; position: relative; } body.kg-dark #main-footer .footer-section ul li a:hover { color: var(--kg-cyan) !important; padding-left: 6px; } body.kg-dark #main-footer .location-link { color: var(--kg-text) !important; } body.kg-dark #main-footer .location-link:hover { color: var(--kg-cyan) !important; } body.kg-dark #main-footer .location-link::after { background: linear-gradient(90deg, var(--kg-blue), var(--kg-cyan)); } body.kg-dark #main-footer .footer-social { display: block !important; } body.kg-dark #main-footer .social-buttons { display: flex !important; flex-wrap: wrap; gap: 12px; } body.kg-dark #main-footer .footer-social a.social-btn { width: auto !important; height: auto !important; } body.kg-dark #main-footer .social-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 9px; border-radius: 8px !important; min-width: 0 !important; padding: 10px 18px !important; border: 1px solid var(--kg-line) !important; background: rgba(255, 255, 255, 0.04) !important; color: var(--kg-text-bright) !important; font-size: 13.5px !important; backdrop-filter: none !important; } body.kg-dark #main-footer .social-btn::before { display: none !important; } body.kg-dark #main-footer .social-btn svg { position: static !important; width: 17px !important; height: 17px !important; } body.kg-dark #main-footer .social-btn:hover { border-color: var(--kg-cyan) !important; background: rgba(46, 163, 242, 0.1) !important; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(46, 163, 242, 0.18) !important; } /* contact rows with svg icons */ body.kg-dark #main-footer .kg-frow { display: flex; align-items: flex-start; gap: 10px; } body.kg-dark #main-footer .kg-frow > svg { flex: none; margin-top: 4px; color: var(--kg-cyan); } body.kg-dark #main-footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 24px; } body.kg-dark #main-footer .footer-bottom p { color: rgba(170, 180, 195, 0.6); font-size: 13.5px; } /* footer brand block (new markup, harmless on old pages) */ .kg-foot-brand-logo { font-size: 20px; font-weight: 800; letter-spacing: 1px; color: var(--kg-text-bright); } .kg-foot-brand-logo span { color: var(--kg-cyan); } .kg-foot-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(46, 163, 242, 0.35); background: rgba(46, 163, 242, 0.08); font-size: 12.5px; font-weight: 700; letter-spacing: 1px; color: var(--kg-cyan); text-transform: uppercase; } /* ================================================================== RESPONSIVE ================================================================== */ @media (max-width: 1024px) { .kg-grid-4 { grid-template-columns: repeat(2, 1fr); } .kg-grid-3 { grid-template-columns: repeat(2, 1fr); } .kg-stats-grid { grid-template-columns: repeat(2, 1fr); } .kg-stat:nth-child(3)::before { display: none; } .kg-stat:nth-child(-n+2) { border-bottom: 1px solid var(--kg-line); } .kg-gallery-grid { grid-template-columns: repeat(2, 1fr); } .kg-contact-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .kg-section { padding: 70px 0; } .kg-page-hero { padding: 140px 0 60px; min-height: 0; } .kg-grid-2, .kg-grid-3, .kg-grid-4 { grid-template-columns: 1fr; } .kg-stats-grid { grid-template-columns: repeat(2, 1fr); } .kg-stat { padding: 26px 14px; } .kg-gallery-grid { grid-template-columns: 1fr; } .kg-contact-grid { grid-template-columns: 1fr; } .kg-process-step { grid-template-columns: 1fr; gap: 14px; padding: 24px 22px; } .kg-cta { padding: 90px 0; } .kg-ph-actions .kg-btn { width: 100%; justify-content: center; } } /* ================================================================== REDUCED MOTION ================================================================== */ @media (prefers-reduced-motion: reduce) { .kg-ph-media img, .kg-ph-media .kg-ph-img, .kg-cta-bg { animation: none !important; } .kg-page-hero .kg-eyebrow, .kg-ph-title, .kg-ph-sub, .kg-ph-actions, .kg-toolpath-line { opacity: 1; animation: none !important; } .kg-toolpath-line path { stroke-dashoffset: 0; animation: none !important; } .kg-draw-icon path, .kg-draw-icon circle, .kg-draw-icon rect, .kg-draw-icon line, .kg-draw-icon polygon, .kg-draw-icon polyline { stroke-dashoffset: 0 !important; animation: none !important; } .kg-reveal { opacity: 1; transform: none; transition: none; } }