/* ============================================================ IRONWORKS FLEET — Design Tokens v2 Deep charcoal + steel-blue structure + yellow (action) + orange (urgency) Breakpoints: 1440 / 1180 / 900 / 640 / 400 ============================================================ */ :root { --charcoal: #14171B; --charcoal-2: #1B1F25; --charcoal-3: #23282F; --steel: #2E3947; --steel-mid: #445266; --steel-light: #7C8AA0; --off-white: #F3F2EF; --white: #FFFFFF; --ink-muted-90: rgba(243,242,239,0.92); --ink-muted-70: rgba(243,242,239,0.70); --ink-muted-55: rgba(243,242,239,0.55); --ink-muted-38: rgba(243,242,239,0.38); --yellow: #F5B301; --yellow-dark: #C88F00; --yellow-dim: rgba(245,179,1,0.12); --orange: #D9631E; --orange-light: #F08A45; --line: rgba(243,242,239,0.10); --line-strong: rgba(243,242,239,0.18); --line-dark: rgba(0,0,0,0.3); --font-display: 'Archivo Black', 'Arial Black', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', 'Courier New', monospace; --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --shadow-plate: 0 1px 0 rgba(255,255,255,0.05) inset, 0 10px 28px rgba(0,0,0,0.4); --shadow-elevated: 0 24px 60px rgba(0,0,0,0.45); --fs-h1: clamp(2.1rem, 1.2rem + 4.2vw, 4.2rem); --fs-h2: clamp(1.65rem, 1.1rem + 2.4vw, 2.55rem); --fs-h3: clamp(1.25rem, 1rem + 1vw, 1.55rem); --fs-h4: clamp(1rem, 0.92rem + 0.4vw, 1.1rem); --fs-body-lg: clamp(1rem, 0.94rem + 0.3vw, 1.125rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-tiny: 0.75rem; --space-section: clamp(48px, 6vw + 16px, 104px); --space-section-tight: clamp(36px, 4vw + 12px, 64px); color-scheme: dark; } /* ============================================================ LIGHT THEME — overrides the same variable names, so every rule below (which all reference these tokens) repaints automatically. Toggled via [data-theme="light"] on . ============================================================ */ :root[data-theme="light"] { --charcoal: #F6F5F2; /* page background (was darkest surface) */ --charcoal-2: #FFFFFF; /* card / panel surface */ --charcoal-3: #ECEAE5; /* alternate panel surface */ --steel: #D7DAE0; /* image placeholder / neutral fill */ --steel-mid: #98A2B3; --steel-light: #667085; --off-white: #1B1D21; /* primary text (was light text) */ --white: #14171B; /* heading text (was pure white) */ --ink-muted-90: rgba(20,23,27,0.88); --ink-muted-70: rgba(20,23,27,0.68); --ink-muted-55: rgba(20,23,27,0.52); --ink-muted-38: rgba(20,23,27,0.36); --yellow: #B87E00; /* darkened for AA contrast on white */ --yellow-dark: #966600; --yellow-dim: rgba(184,126,0,0.10); --orange: #C1560F; --orange-light: #A8480C; --line: rgba(20,23,27,0.10); --line-strong: rgba(20,23,27,0.18); --line-dark: rgba(20,23,27,0.08); --shadow-plate: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 22px rgba(20,23,27,0.10); --shadow-elevated: 0 20px 50px rgba(20,23,27,0.16); color-scheme: light; } /* Hero keeps a dark backdrop in both themes — it's a photo/gradient surface, not a content surface, so it does not follow the swap. */ :root[data-theme="light"] .hero { background: linear-gradient(180deg, rgba(20,23,27,0.5) 0%, rgba(20,23,27,0.82) 58%, #14171B 100%), linear-gradient(135deg, #232A32 0%, #171B20 65%); } :root[data-theme="light"] .hero-sub { color: rgba(243,242,239,0.88); } :root[data-theme="light"] .hero h1 { color: #FFFFFF; } :root[data-theme="light"] .hero h1 .hl { color: #F5B301; } :root[data-theme="light"] .hero-eyebrow-badge { color: #F5B301; border-color: rgba(245,179,1,0.35); background: rgba(245,179,1,0.12); } :root[data-theme="light"] .hero-stat .num { color: #F5B301; } :root[data-theme="light"] .hero-stat .label { color: rgba(243,242,239,0.6); } :root[data-theme="light"] .hero-stats, :root[data-theme="light"] .hero-stat { border-color: rgba(243,242,239,0.14); } /* Theme toggle switch */ .theme-toggle { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--white); font-size: 1.05rem; transition: border-color 0.15s, background 0.15s; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--yellow); background: var(--yellow-dim); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; } body { font-family: var(--font-body); background: var(--charcoal); color: var(--off-white); line-height: 1.65; font-size: var(--fs-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; width: 100%; position: relative; transition: background-color 0.25s ease, color 0.25s ease; } body, .site-header, .site-footer, .spec-plate, .feature-item, .process-step, .stat-cell, .industry-card, .testi-card, .contact-info-card, .booking-card, .filter-panel, .value-card, .page-header, .cart-panel, .modal-box { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; } ul { list-style: none; } table { max-width: 100%; } .container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); } .container-narrow { max-width: 900px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); } .container-prose { max-width: 720px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } :focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; } /* ============================================================ Typography ============================================================ */ h1, h2, h3, h4 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.005em; line-height: 1.08; color: var(--white); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } p { font-size: var(--fs-body); } .eyebrow { font-family: var(--font-mono); font-size: var(--fs-tiny); letter-spacing: 0.18em; text-transform: uppercase; color: var(--yellow); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--yellow); flex-shrink: 0; } .section-head { max-width: 620px; margin-bottom: clamp(32px, 4vw, 52px); } .section-head h2 { margin-bottom: 14px; } .section-head p { color: var(--ink-muted-70); font-size: var(--fs-body-lg); } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head.center .eyebrow { justify-content: center; } .section-head.center .eyebrow::before { display: none; } .section-head.wide { max-width: 760px; } .section { padding: var(--space-section) 0; } .section.tight { padding: var(--space-section-tight) 0; } .section.on-steel { background: var(--charcoal-2); } .section.on-panel { background: var(--charcoal-3); } .section.on-white { background: var(--off-white); color: var(--charcoal); } .section.on-white h2, .section.on-white h3, .section.on-white h4 { color: var(--charcoal); } .section.on-white .section-head p { color: rgba(20,23,27,0.65); } .section + .section { border-top: 1px solid var(--line); } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center;gap: 8px; font-family: var(--font-mono); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 15px 30px; border-radius: var(--radius-sm); transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease; white-space: nowrap; } .btn-primary { background: var(--yellow); color: var(--charcoal); } .btn-primary:hover { background: var(--yellow-dark); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(245,179,1,0.28); } .btn-outline { background: transparent; color: var(--yellow); border: 1.5px solid var(--yellow); } .btn-outline:hover { background: var(--yellow-dim); border-color: var(--yellow-dark); color: var(--yellow-dark); } .btn-orange { background: var(--orange); color: var(--white); } .btn-orange:hover { background: var(--orange-light); transform: translateY(-2px); } .btn-sm { padding: 11px 20px; font-size: 0.72rem; } .btn-block { width: 100%; } .btn:disabled { opacity: 0.4; cursor: not-allowed; } /* ============================================================ Header / Nav ============================================================ */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--charcoal); background: color-mix(in srgb, var(--charcoal) 94%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 78px; } .brand { font-family: var(--font-display); font-size: 1.15rem; color: var(--white); display: flex; align-items: center; gap: 11px; flex-shrink: 0; min-width: 0; } .brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand .mark { width: 34px; height: 34px; background: var(--yellow); color: var(--charcoal); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; border-radius: var(--radius-sm); transform: skew(-6deg); flex-shrink: 0; } .brand .mark span { transform: skew(6deg); } .main-nav { display: flex; align-items: center; gap: 2px; } .main-nav a { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.03em; text-transform: uppercase; padding: 10px 14px; border-radius: var(--radius-sm); color: var(--ink-muted-70); transition: color 0.15s, background 0.15s; position: relative; } .main-nav a:hover { color: var(--yellow); background: var(--yellow-dim); } .main-nav a.active { color: var(--yellow); } .main-nav a.active::after { content: ''; position: absolute; bottom: 4px; left: 14px; right: 14px; height: 2px; background: var(--yellow); } .header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .nav-toggle { display: none; background: none; color: var(--white); font-size: 1.4rem; width: 40px; height: 40px; } @media (max-width: 1180px) { .main-nav a { padding: 10px 10px; font-size: 0.72rem; } } @media (max-width: 980px) { .main-nav { position: fixed; top: 78px; left: 0; right: 0; bottom: 0; width: 100%; background: var(--charcoal-2); flex-direction: column; align-items: stretch; padding: 20px; gap: 4px; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform 0.28s ease, visibility 0s linear 0.28s; border-top: 1px solid var(--line); z-index: 150; } .main-nav.open { height: calc(100vh - 78px); transform: translateX(0); visibility: visible; transition: transform 0.28s ease, visibility 0s linear 0s; } .main-nav a { padding: 16px 14px; font-size: 0.95rem; border-bottom: 1px solid var(--line); } .main-nav a.active::after { display: none; } .nav-toggle { display: flex; align-items: center; justify-content: center; } .header-actions .btn-outline { display: none; } } @media (max-width: 480px) { .brand-name { font-size: 0.92rem; } .site-header .container { height: 68px; padding: 0 16px; } .main-nav { top: 68px; } .header-actions { gap: 8px; } } @media (max-width: 360px) { .brand-name { display: none; } } /* ============================================================ Hero ============================================================ */ .hero { position: relative; min-height: min(92vh, 860px); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; background: linear-gradient(180deg, rgba(20,23,27,0.5) 0%, rgba(20,23,27,0.78) 58%, var(--charcoal) 100%), linear-gradient(135deg, #232A32 0%, #171B20 65%); overflow: hidden; padding-top: 78px; } .hero > .container { width: 100%; } .hero::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(115deg, rgba(245,179,1,0.035) 0px, rgba(245,179,1,0.035) 2px, transparent 2px, transparent 64px); pointer-events: none; } .hero-inner { position: relative; z-index: 2; padding: 72px 0 0; text-align: center; } .hero-message { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); } .hero-eyebrow-badge { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--fs-tiny); letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow); background: var(--yellow-dim); border: 1px solid rgba(245,179,1,0.35); padding: 9px 18px 9px 14px; border-radius: 999px; margin: 0 0 28px; } .hero-eyebrow-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px rgba(245,179,1,0.18); flex-shrink: 0; } .hero h1 { max-width: 920px; margin: 0 auto 24px; overflow-wrap: break-word; } .hero h1 .hl { color: var(--yellow); } .hero-rule { width: 64px; height: 3px; background: var(--yellow); margin: 0 auto 26px; border-radius: 2px; } .hero-sub { max-width: 560px; margin: 0 auto; font-size: var(--fs-body-lg); color: var(--ink-muted-90); } .hero-actions { margin-bottom: 60px; } .hero-cta { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); width: 100%; max-width: 920px; margin: 0 auto; border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: var(--radius-md) var(--radius-md) 0 0; } .hero-stat { padding: 24px clamp(16px, 2vw, 28px); border-right: 1px solid var(--line); } .hero-stat:last-child { border-right: none; } .hero-stat .num { font-family: var(--font-mono); font-size: clamp(1.2rem, 1vw + 1rem, 1.75rem); font-weight: 700; color: var(--yellow); display: block; line-height: 1.2; } .hero-stat .label { font-size: 0.72rem; color: var(--ink-muted-55); text-transform: uppercase; letter-spacing: 0.04em; } @media (max-width: 640px) { .hero { min-height: auto; padding-bottom: 8px; } .hero-inner { padding-top: 48px; } .hero-message { padding-bottom: 32px; margin-bottom: 32px; } .hero h1 { font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1.15; } .hero-stats { grid-template-columns: repeat(2, 1fr); } .hero-stat:nth-child(odd) { border-right: 1px solid var(--line); } .hero-stat { border-bottom: 1px solid var(--line); padding: 20px 14px; } .hero-actions { margin-bottom: 40px; } .hero-cta .btn { flex: 1 1 auto; } } /* ============================================================ SPEC PLATE — signature element ============================================================ */ .spec-plate { position: relative; background: linear-gradient(160deg, #262C33 0%, #1D2127 100%); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-plate); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease; height: 100%; display: flex; flex-direction: column; } :root[data-theme="light"] .spec-plate { background: linear-gradient(160deg, #FFFFFF 0%, #F7F6F3 100%); } .spec-plate:hover { transform: translateY(-6px); border-color: rgba(245,179,1,0.45); box-shadow: var(--shadow-elevated); } .spec-plate::before, .spec-plate::after, .spec-plate .rivet { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(243,242,239,0.16); box-shadow: inset 0 1px 1px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.05); } :root[data-theme="light"] .spec-plate::before, :root[data-theme="light"] .spec-plate::after, :root[data-theme="light"] .spec-plate .rivet { background: rgba(20,23,27,0.12); box-shadow: inset 0 1px 1px rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,0.6); } .spec-plate::before { top: 10px; left: 10px; } .spec-plate::after { top: 10px; right: 10px; } .spec-plate .rivet.bl { bottom: 10px; left: 10px; } .spec-plate .rivet.br { bottom: 10px; right: 10px; } .plate-media { position: relative; aspect-ratio: 16/11; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; background: repeating-linear-gradient(135deg, rgba(245,179,1,0.05) 0px, rgba(245,179,1,0.05) 1px, transparent 1px, transparent 14px), linear-gradient(160deg, var(--steel-mid) 0%, var(--steel) 100%); flex-shrink: 0; } .plate-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .spec-plate:hover .plate-media img { transform: scale(1.06); } .plate-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,23,27,0) 55%, rgba(20,23,27,0.35) 100%); pointer-events: none; } :root[data-theme="light"] .plate-media::after { background: linear-gradient(180deg, rgba(20,23,27,0) 60%, rgba(20,23,27,0.18) 100%); } .plate-badge { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 10px; border-radius: 3px; background: rgba(20,23,27,0.88); color: var(--yellow); border: 1px solid rgba(245,179,1,0.35); } .plate-badge.limited { color: var(--orange-light); border-color: rgba(217,99,30,0.4); } .plate-badge.unavailable { color: var(--ink-muted-38); border-color: var(--line-strong); } .plate-body { padding: 20px 20px 18px; display: flex; flex-direction: column; flex: 1; } .plate-brand { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); margin-bottom: 6px; } .plate-body h4 { font-size: 1rem; margin-bottom: 8px; text-transform: none; letter-spacing: normal; line-height: 1.3; } .plate-desc { font-size: 0.85rem; color: var(--ink-muted-55); margin-bottom: 16px; flex: 1; line-height: 1.55; } .plate-data { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 0.78rem; border-top: 1px dashed var(--line-strong); padding-top: 14px; margin-top: auto; gap: 10px; } .plate-price .amt { font-size: 1.15rem; color: var(--white); font-weight: 700; } .plate-price .per { color: var(--ink-muted-38); } /* ============================================================ Grids ============================================================ */ .grid-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 1.8vw, 28px); } .grid-cats.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid-cats.cols-4 { grid-template-columns: repeat(4, 1fr); } .grid-cats.cols-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 1180px) { .grid-cats.cols-4 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .grid-cats, .grid-cats.cols-3, .grid-cats.cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .grid-cats, .grid-cats.cols-3, .grid-cats.cols-4, .grid-cats.cols-2 { grid-template-columns: 1fr; } } /* ============================================================ Why Choose Us ============================================================ */ .feature-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; } .feature-item { background: var(--charcoal-2); padding: 30px 24px; transition: background 0.2s; } .feature-item:hover { background: var(--charcoal-3); } .feature-item .ic { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--yellow-dim); border: 1px solid rgba(245,179,1,0.3); border-radius: var(--radius-sm); color: var(--yellow); margin-bottom: 16px; font-size: 1rem; } .feature-item h4 { font-size: 0.92rem; text-transform: none; margin-bottom: 6px; letter-spacing: normal; } .feature-item p { font-size: 0.83rem; color: var(--ink-muted-55); } @media (max-width: 1180px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .feature-grid { grid-template-columns: 1fr; } } /* ============================================================ Process steps ============================================================ */ .process-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); position: relative; } @media (max-width: 860px) { .process-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .process-row { grid-template-columns: 1fr; } } .process-step { position: relative; padding: 32px 24px; background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius-md); transition: border-color 0.2s; } .process-step:hover { border-color: rgba(245,179,1,0.35); } .process-num { font-family: var(--font-mono); font-size: 2.3rem; font-weight: 700; color: transparent; -webkit-text-stroke: 1.5px rgba(245,179,1,0.55); margin-bottom: 16px; display: block; } .process-step h4 { font-size: 0.98rem; text-transform: none; letter-spacing: normal; } /* ============================================================ Stats counters ============================================================ */ .stats-band { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; } @media (max-width: 860px) { .stats-band { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 520px) { .stats-band { grid-template-columns: repeat(2, 1fr); } } .stat-cell { background: var(--charcoal-2); padding: 32px 18px; text-align: center; } .stat-cell .num { font-family: var(--font-mono); font-size: clamp(1.4rem, 1vw + 1.1rem, 1.9rem); font-weight: 700; color: var(--yellow); display: block; } .stat-cell .label { font-size: 0.74rem; color: var(--ink-muted-55); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 7px; } /* ============================================================ Industries ============================================================ */ .industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 860px) { .industry-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .industry-grid { grid-template-columns: 1fr; } } .industry-card { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; display: flex; align-items: center; gap: 14px; transition: border-color 0.2s, transform 0.2s; } .industry-card:hover { border-color: rgba(245,179,1,0.4); transform: translateX(3px); } .industry-card .dot { width: 8px; height: 8px; background: var(--yellow); border-radius: 50%; flex-shrink: 0; } .industry-card span:last-child { font-family: var(--font-mono); font-size: 0.83rem; } /* ============================================================ Testimonials ============================================================ */ .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 24px); } @media (max-width: 1080px) { .catalog-layout { grid-template-columns: 230px 1fr; } } @media (max-width: 900px) { .catalog-layout { grid-template-columns: 1fr; } } .filter-panel { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px; position: sticky; top: 98px; } @media (max-width: 900px) { .filter-panel { position: static; } } .filter-group { margin-bottom: 24px; } .filter-group:last-child { margin-bottom: 0; } .filter-group h5 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); margin-bottom: 12px; } .filter-group label { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; color: var(--ink-muted-70); margin-bottom: 9px; cursor: pointer; } .filter-group input[type="checkbox"], .filter-group input[type="radio"] { accent-color: var(--yellow); width: 15px; height: 15px; flex-shrink: 0; } .filter-group select, .filter-group input[type="text"] { width: 100%; background: var(--charcoal); border: 1px solid var(--line-strong); color: var(--white); padding: 10px 12px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.87rem; } .range-row { display: flex; gap: 10px; align-items: center; } .range-row input { width: 100%; accent-color: var(--yellow); } .catalog-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; gap: 12px; } .result-count { font-family: var(--font-mono); font-size: 0.83rem; color: var(--ink-muted-70); } .result-count strong { color: var(--yellow); font-weight: 700; } .sort-select { background: var(--charcoal-2); border: 1px solid var(--line-strong); color: var(--white); padding: 10px 14px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.8rem; } .card-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .icon-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink-muted-70); transition: border-color 0.15s, color 0.15s; } .icon-btn:hover, .icon-btn.active { border-color: var(--yellow); color: var(--yellow); } .empty-state { text-align: center; padding: 64px 24px; color: var(--ink-muted-55); grid-column: 1 / -1; } /* ============================================================ Equipment detail page ============================================================ */ .detail-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 3.5vw, 48px); align-items: flex-start; } @media (max-width: 1080px) { .detail-layout { grid-template-columns: 1.25fr 1fr; } } @media (max-width: 980px) { .detail-layout { grid-template-columns: 1fr; } } .gallery-main { aspect-ratio: 16/10; border-radius: var(--radius-md); overflow: hidden; background: var(--steel); margin-bottom: 12px; } .gallery-main img { width: 100%; height: 100%; object-fit: cover; } .gallery-thumbs { display: flex; gap: 10px; flex-wrap: wrap; } .gallery-thumbs .thumb { width: 76px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; cursor: pointer; opacity: 0.6; transition: opacity 0.15s, border-color 0.15s; flex-shrink: 0; } .gallery-thumbs .thumb.active, .gallery-thumbs .thumb:hover { opacity: 1; border-color: var(--yellow); } .tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 36px 0 24px; overflow-x: auto; scrollbar-width: thin; } .tab-btn { background: none; color: var(--ink-muted-55); font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 12px 18px; border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; } @media (max-width: 900px) { .testi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .testi-grid { grid-template-columns: 1fr; } } .testi-card { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 28px; } .stars { color: var(--yellow); letter-spacing: 2px; margin-bottom: 14px; font-size: 0.92rem; } .testi-card p.quote { font-size: 0.93rem; color: var(--ink-muted-90); margin-bottom: 20px; } .testi-name { font-weight: 600; color: var(--white); font-size: 0.88rem; } .testi-role { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-muted-55); margin-top: 2px; } /* ============================================================ Contact banner / CTA ============================================================ */ .cta-banner { background: linear-gradient(120deg, var(--orange) 0%, var(--yellow-dark) 100%); border-radius: var(--radius-lg); padding: clamp(32px, 4vw, 56px) clamp(28px, 5vw, 52px); display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .cta-banner h3 { color: #14171B; font-size: var(--fs-h3); max-width: 500px; } .cta-banner p { color: rgba(20,23,27,0.72); margin-top: 8px; } .cta-banner .btn-primary { background: #14171B; color: #FFFFFF; } .cta-banner .btn-primary:hover { background: #000; } @media (max-width: 560px) { .cta-banner { flex-direction: column; align-items: stretch; text-align: center; } .cta-banner .btn { width: 100%; } } /* ============================================================ Footer ============================================================ */ .site-footer { background: var(--charcoal-2); border-top: 1px solid var(--line); padding: clamp(48px, 5vw, 68px) 0 24px; } .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: clamp(24px, 3vw, 36px); margin-bottom: 48px; } @media (max-width: 1024px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .footer-grid { grid-template-columns: 1fr; } } .footer-col h5 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); margin-bottom: 18px; } .footer-col ul li { margin-bottom: 11px; } .footer-col ul a { font-size: 0.86rem; color: var(--ink-muted-70); transition: color 0.15s; } .footer-col ul a:hover { color: var(--yellow); } .footer-col p { font-size: 0.86rem; color: var(--ink-muted-55); margin-top: 8px; line-height: 1.5; } .footer-bottom { border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.78rem; color: var(--ink-muted-38); } /* ============================================================ Page header (interior pages) ============================================================ */ .page-header { position: relative; padding: clamp(40px, 5vw, 64px) 0 clamp(28px, 3vw, 44px); background: linear-gradient(160deg, var(--charcoal-3) 0%, var(--charcoal-2) 100%); border-bottom: 1px solid var(--line); } .page-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: repeating-linear-gradient(115deg, var(--yellow) 0px, var(--yellow) 14px, var(--charcoal) 14px, var(--charcoal) 28px); opacity: 0.85; } .breadcrumb { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-muted-55); margin-bottom: 16px; } .breadcrumb a:hover { color: var(--yellow); } .page-header h1 { font-size: var(--fs-h2); } .page-header p { color: var(--ink-muted-70); margin-top: 12px; max-width: 620px; font-size: var(--fs-body-lg); } /* ============================================================ Catalog page ============================================================ */ .catalog-layout { display: grid; grid-template-columns: 268px 1fr; gap: clamp(24px, 3vw, 40px); align-items: flex-start; } active { color: var(--yellow); border-color: var(--yellow); } .spec-table { width: 100%; border-collapse: collapse; } .spec-table tr { border-bottom: 1px solid var(--line); } .spec-table td { padding: 13px 4px; font-size: 0.89rem; } .spec-table td:first-child { font-family: var(--font-mono); color: var(--ink-muted-55); width: 42%; } .spec-table td:last-child { color: var(--white); font-weight: 500; } .booking-card { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 26px; position: sticky; top: 98px; } @media (max-width: 980px) { .booking-card { position: static; } } .price-tabs { display: flex; gap: 8px; margin-bottom: 20px; } .price-tab { flex: 1; text-align: center; padding: 12px 6px; background: var(--charcoal); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; transition: border-color 0.15s; } .price-tab.active { border-color: var(--yellow); } .price-tab .amt { font-family: var(--font-mono); font-weight: 700; color: var(--white); display: block; font-size: 0.95rem; } .price-tab .per { font-size: 0.68rem; color: var(--ink-muted-55); text-transform: uppercase; } .form-row { margin-bottom: 16px; } .form-row label { display: block; font-size: 0.82rem; color: var(--ink-muted-70); margin-bottom: 7px; } .form-row input, .form-row select, .form-row textarea { width: 100%; background: var(--charcoal); border: 1px solid var(--line-strong); color: var(--white); padding: 11px 13px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.9rem; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--yellow); } .form-row textarea { resize: vertical; min-height: 90px; } .form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 420px) { .form-two { grid-template-columns: 1fr; } } .booking-total { display: flex; justify-content: space-between; padding: 16px 0; border-top: 1px dashed var(--line-strong); margin: 16px 0; font-family: var(--font-mono); } .booking-total .amt { font-size: 1.25rem; color: var(--yellow); font-weight: 700; } /* ============================================================ About page ============================================================ */ .value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.6vw, 24px); } @media (max-width: 900px) { .value-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .value-grid { grid-template-columns: 1fr; } } .value-card { padding: 26px; background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius-md); } .value-card h4 { font-size: 0.98rem; text-transform: none; letter-spacing: normal; margin-bottom: 8px; color: var(--yellow); } .value-card p { font-size: 0.88rem; color: var(--ink-muted-55); } .timeline { border-left: 2px solid rgba(245,179,1,0.3); padding-left: 28px; max-width: 640px; } .timeline-item { margin-bottom: 32px; position: relative; } .timeline-item:last-child { margin-bottom: 0; } .timeline-item::before { content: ''; position: absolute; left: -33px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); } .timeline-year { font-family: var(--font-mono); color: var(--yellow); font-size: 0.85rem; margin-bottom: 4px; } /* ============================================================ Contact page ============================================================ */ .contact-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 3.5vw, 44px); } @media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } } .contact-info-card { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px 24px; margin-bottom: 14px; } .contact-info-card h5 { font-family: var(--font-mono); font-size: 0.72rem; color: var(--yellow); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; } .contact-info-card p { font-size: 0.92rem; } /* ============================================================ Leaflet map — real interactive map with branch legend ============================================================ */ .map-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--shadow-elevated); } @media (max-width: 860px) { .map-wrap { grid-template-columns: 1fr; } } .leaflet-map { width: 100%; height: 440px; background: var(--steel); z-index: 1; } @media (max-width: 640px) { .leaflet-map { height: 320px; } } /* Recolor OSM tiles to match the dark theme; light theme keeps tiles natural */ .leaflet-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9) saturate(0.7); } :root[data-theme="light"] .leaflet-map .leaflet-tile-pane { filter: none; } .map-legend { background: var(--charcoal-2); padding: 22px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; } @media (max-width: 860px) { .map-legend { flex-direction: row; flex-wrap: wrap; } } .map-legend-item { display: flex; gap: 12px; align-items: flex-start; } .map-legend-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--steel-light); margin-top: 5px; flex-shrink: 0; box-shadow: 0 0 0 3px var(--yellow-dim); } .map-legend-dot.primary { background: var(--yellow); } .map-legend-name { font-size: 0.86rem; font-weight: 600; color: var(--white); margin-bottom: 3px; } .map-legend-addr { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-muted-55); } /* Custom pin marker used inside Leaflet's divIcon */ .map-pin span { display: block; width: 16px; height: 16px; background: var(--orange); border: 2px solid var(--white); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,0.4); } .map-pin-primary span { background: var(--yellow); width: 20px; height: 20px; } /* Leaflet popup theming to match site design */ .leaflet-popup-content-wrapper { background: var(--charcoal-2); color: var(--off-white); border-radius: var(--radius-sm); border: 1px solid var(--line-strong); } .leaflet-popup-content { font-family: var(--font-body); font-size: 0.85rem; margin: 12px 14px; } .leaflet-popup-content strong { color: var(--yellow); font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; } .leaflet-popup-tip { background: var(--charcoal-2); } .leaflet-container a.leaflet-popup-close-button { color: var(--ink-muted-55); } .leaflet-container a.leaflet-popup-close-button:hover { color: var(--white); } .leaflet-control-attribution { font-size: 0.68rem; } /* ============================================================ Blog ============================================================ */ .blog-card { display: flex; } .blog-read-more { font-family: var(--font-mono); font-size: 0.76rem; color: var(--yellow); text-transform: uppercase; letter-spacing: 0.04em; transition: transform 0.15s ease; white-space: nowrap; } .spec-plate:hover .blog-read-more { transform: translateX(3px); } .blog-article p { font-size: 1.02rem; line-height: 1.8; color: var(--ink-muted-90); margin-bottom: 22px; } .blog-article p:first-child { font-size: 1.12rem; color: var(--white); } .blog-tag-pill { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--yellow); background: var(--yellow-dim); border: 1px solid rgba(245,179,1,0.3); padding: 6px 14px; border-radius: var(--radius-sm); margin-top: 8px; } /* ============================================================ Legal pages (Privacy Policy / Terms of Service) ============================================================ */ .legal-layout { display: grid; grid-template-columns: 260px 1fr; gap: clamp(28px, 3.5vw, 48px); align-items: flex-start; max-width: 1080px; margin: 0 auto; } @media (max-width: 900px) { .legal-layout { grid-template-columns: 1fr; } } .legal-nav { position: sticky; top: 98px; background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 20px; } @media (max-width: 900px) { .legal-nav { position: static; } } .legal-nav-switch { display: flex; gap: 6px; background: var(--charcoal); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 4px; margin-bottom: 22px; } .legal-switch-btn { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-muted-55); padding: 9px 6px; border-radius: 2px; transition: background 0.15s, color 0.15s; line-height: 1.3; } .legal-switch-btn.active { background: var(--yellow); color: var(--charcoal); font-weight: 700; } .legal-switch-btn:not(.active):hover { color: var(--white); } .legal-nav-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); margin-bottom: 12px; } .legal-nav-list { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; } @media (max-width: 900px) { .legal-nav-list { max-height: none; } } .legal-nav-link { font-size: 0.82rem; color: var(--ink-muted-70); padding: 8px 10px; border-radius: var(--radius-sm); border-left: 2px solid transparent; transition: color 0.15s, background 0.15s, border-color 0.15s; line-height: 1.4; } .legal-nav-link:hover { color: var(--white); background: rgba(245,179,1,0.06); } .legal-nav-link.active { color: var(--yellow); border-left-color: var(--yellow); background: var(--yellow-dim); } .legal-doc { min-width: 0; } .legal-intro { font-size: 1.05rem; line-height: 1.75; color: var(--ink-muted-90); padding-bottom: 28px; margin-bottom: 8px; border-bottom: 1px solid var(--line); } .legal-section { padding: 30px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 96px; } .legal-section:last-of-type { border-bottom: none; } .legal-section h3 { font-size: 1.05rem; text-transform: none; letter-spacing: normal; color: var(--yellow); margin-bottom: 14px; } .legal-section p { font-size: 0.94rem; line-height: 1.75; color: var(--ink-muted-70); margin-bottom: 14px; } .legal-section p:last-child { margin-bottom: 0; } .legal-contact-block { margin-top: 32px; padding: 22px 24px; background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius-md); } .legal-contact-block p { font-size: 0.88rem; color: var(--ink-muted-70); } /* ============================================================ FAQ Accordion ============================================================ */ .faq-item { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; background: none; color: var(--white); text-align: left; padding: 20px 4px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 0.98rem; font-weight: 500; } .faq-q .plus { font-family: var(--font-mono); color: var(--yellow); font-size: 1.15rem; transition: transform 0.2s; flex-shrink: 0; } .faq-item.open .plus { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; color: var(--ink-muted-70); font-size: 0.9rem; } .faq-item.open .faq-a { max-height: 220px; padding-bottom: 20px; } /* ============================================================ Cart trigger (header) ============================================================ */ .cart-trigger { position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--white); transition: border-color 0.15s, background 0.15s; } .cart-trigger:hover { border-color: var(--yellow); background: var(--yellow-dim); } .cart-ic { font-size: 1.05rem; line-height: 1; } .cart-badge { position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 10px; background: var(--yellow); color: var(--charcoal); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; display: none; align-items: center; justify-content: center; line-height: 1; } .cart-badge.show { display: flex; } /* ============================================================ Add-to-cart modal ============================================================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(10,11,13,0.72); backdrop-filter: blur(3px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .modal-overlay.show { opacity: 1; pointer-events: auto; } .modal-box { background: var(--charcoal-2); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 30px; width: 100%; max-width: 420px; position: relative; box-shadow: var(--shadow-elevated); transform: translateY(12px); transition: transform 0.2s ease; } .modal-overlay.show .modal-box { transform: translateY(0); } .modal-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--ink-muted-55); font-size: 1.4rem; line-height: 1; border-radius: var(--radius-sm); transition: color 0.15s, background 0.15s; } .modal-close:hover { color: var(--white); background: rgba(255,255,255,0.06); } /* ============================================================ Cart side panel (slide-in) ============================================================ */ .cart-backdrop { position: fixed; inset: 0; background: rgba(10,11,13,0.6); z-index: 210; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .cart-backdrop.show { opacity: 1; pointer-events: auto; } .cart-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--charcoal-2); border-left: 1px solid var(--line-strong); z-index: 211; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s ease; box-shadow: -20px 0 50px rgba(0,0,0,0.4); } .cart-panel.show { transform: translateX(0); } .cart-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .cart-panel-head h3 { font-size: 1.05rem; text-transform: none; letter-spacing: normal; } .cart-panel-items { flex: 1; overflow-y: auto; padding: 16px 24px; } .cart-panel-footer { padding: 20px 24px 24px; border-top: 1px solid var(--line); flex-shrink: 0; } .cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; color: var(--ink-muted-55); } /* ---- cart line item (used in panel, cart page, checkout summary) ---- */ .cart-line { display: flex; gap: 14px; margin-bottom: 18px; } .cart-line-img { width: 76px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; background: var(--steel); } .cart-line-img img { width: 100%; height: 100%; object-fit: cover; } .cart-line-info { flex: 1; min-width: 0; } .cart-line-name { font-size: 0.9rem; font-weight: 600; color: var(--white); margin-bottom: 4px; } .cart-line-meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-muted-55); margin-bottom: 8px; } .cart-line-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .cart-line-price { font-family: var(--font-mono); font-weight: 700; color: var(--yellow); font-size: 0.9rem; } .cart-line-remove { background: none; color: var(--ink-muted-55); font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: underline; transition: color 0.15s; } .cart-line-remove:hover { color: var(--orange-light); } @media (max-width: 480px) { .cart-panel { width: 100vw; } } /* ---- cart page (full page) item layout adjustments ---- */ .cart-page-item .plate-media { border-radius: var(--radius-md) 0 0 var(--radius-md); } @media (max-width: 640px) { .cart-page-item { flex-direction: column !important; } .cart-page-item .plate-media { width: 100% !important; aspect-ratio: 16/9 !important; border-radius: var(--radius-md) var(--radius-md) 0 0; } } /* ============================================================ Toast / confirmation ============================================================ */ .toast { position: fixed; bottom: 24px; right: 24px; left: 24px; max-width: 380px; margin-left: auto; background: var(--charcoal-2); border: 1px solid var(--yellow); border-radius: var(--radius-md); padding: 16px 20px; z-index: 999; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-elevated); transform: translateY(140%); transition: transform 0.3s ease; font-size: 0.88rem; } .toast.show { transform: translateY(0); } .toast .ic { color: var(--yellow); font-family: var(--font-mono); font-weight: 700; flex-shrink: 0; } /* ============================================================ HERO V2 — Split spec-sheet layout (alternative hero design) Text column + equipment ID-card panel, echoing the spec-plate motif used elsewhere on the site. Collapses to a centered single column on mobile. ============================================================ */ .hero-v2 { position: relative; padding: 110px 0 0; background: var(--charcoal); overflow: hidden; border-bottom: 1px solid var(--line); } .hero-v2::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(115deg, rgba(245,179,1,0.03) 0px, rgba(245,179,1,0.03) 2px, transparent 2px, transparent 64px); pointer-events: none; } .hero-v2-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding-bottom: 64px; } @media (max-width: 980px) { .hero-v2-grid { grid-template-columns: 1fr; text-align: center; } } .hero-v2-text { max-width: 620px; } @media (max-width: 980px) { .hero-v2-text { max-width: 640px; margin: 0 auto; } } .hero-v2-tag { font-family: var(--font-mono); font-size: var(--fs-tiny); letter-spacing: 0.18em; text-transform: uppercase; color: var(--yellow); background: var(--yellow-dim); border: 1px solid rgba(245,179,1,0.35); display: inline-block; padding: 8px 15px; border-radius: var(--radius-sm); margin: 0 0 24px; } .hero-v2-text h1 { font-size: var(--fs-h1); margin-bottom: 20px; } .hero-v2-text h1 .hl { color: var(--yellow); } .hero-v2-text p { font-size: var(--fs-body-lg); color: var(--ink-muted-90); margin-bottom: 32px; } .hero-v2-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; } @media (max-width: 980px) { .hero-v2-cta { justify-content: center; } } .hero-v2-trust { display: flex; gap: clamp(20px, 3vw, 36px); flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--line); } @media (max-width: 980px) { .hero-v2-trust { justify-content: center; } } .hero-v2-trust-item { display: flex; align-items: baseline; gap: 8px; } .hero-v2-trust-item .num { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--yellow); } .hero-v2-trust-item .label { font-size: 0.78rem; color: var(--ink-muted-55); text-transform: uppercase; letter-spacing: 0.03em; } /* ---- ID-card panel, right column ---- */ .hero-v2-card { position: relative; background: linear-gradient(160deg, #262C33 0%, #1D2127 100%); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); overflow: hidden; } .hero-v2-card::before, .hero-v2-card::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: rgba(243,242,239,0.16); box-shadow: inset 0 1px 1px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.05); } .hero-v2-card::before { top: 14px; left: 14px; } .hero-v2-card::after { top: 14px; right: 14px; } :root[data-theme="light"] .hero-v2-card { background: linear-gradient(160deg, #FFFFFF 0%, #F7F6F3 100%); } :root[data-theme="light"] .hero-v2-card::before, :root[data-theme="light"] .hero-v2-card::after { background: rgba(20,23,27,0.12); box-shadow: inset 0 1px 1px rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,0.6); } .hero-v2-card-media { aspect-ratio: 4/3; background: var(--steel); overflow: hidden; } .hero-v2-card-media img { width: 100%; height: 100%; object-fit: cover; } .hero-v2-card-body { padding: 26px 28px 28px; } .hero-v2-card-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); margin-bottom: 8px; } .hero-v2-card-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--white); margin-bottom: 18px; text-transform: none; } .hero-v2-spec-row { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px dashed var(--line-strong); font-family: var(--font-mono); font-size: 0.82rem; } .hero-v2-spec-row:first-of-type { border-top: none; } .hero-v2-spec-row .k { color: var(--ink-muted-55); } .hero-v2-spec-row .v { color: var(--white); font-weight: 600; } .hero-v2-card-badge { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; border-radius: 3px; background: rgba(20,23,27,0.88); color: var(--yellow); border: 1px solid rgba(245,179,1,0.35); } /* ---- bottom stat strip, full width beneath the split grid ---- */ .hero-v2-stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); } .hero-v2-stat { padding: 22px clamp(16px, 2vw, 28px); border-right: 1px solid var(--line); text-align: center; } .hero-v2-stat:last-child { border-right: none; } .hero-v2-stat .num { font-family: var(--font-mono); font-size: clamp(1.1rem, 1vw + 0.9rem, 1.6rem); font-weight: 700; color: var(--yellow); display: block; } .hero-v2-stat .label { font-size: 0.7rem; color: var(--ink-muted-55); text-transform: uppercase; letter-spacing: 0.03em; } @media (max-width: 640px) { .hero-v2-stats { grid-template-columns: repeat(2, 1fr); } .hero-v2-stat:nth-child(odd) { border-right: 1px solid var(--line); } .hero-v2-stat { border-bottom: 1px solid var(--line); padding: 18px 12px; } } /* ============================================================ Utility ============================================================ */ .text-center { text-align: center; } .mt-24 { margin-top: 24px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .hidden { display: none !important; } [data-page] { display: none; } [data-page].active { display: block; } /* ============================================================ Payment method selector (checkout) ============================================================ */ .pay-method-tabs { display: flex; gap: 10px; margin-bottom: 20px; } .pay-method-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 12px; background: var(--charcoal); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink-muted-70); font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; transition: border-color 0.15s, color 0.15s, background 0.15s; } .pay-method-tab .pm-ic { font-size: 1.1rem; } .pay-method-tab.active { border-color: var(--yellow); color: var(--yellow); background: var(--yellow-dim); } .pay-method-tab:not(.active):hover { border-color: var(--ink-muted-55); } .pay-panel { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 20px; margin-bottom: 20px; } .pay-panel-note { font-size: 0.86rem; color: var(--ink-muted-70); line-height: 1.6; margin-bottom: 18px; } .coin-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .coin-tab { padding: 8px 16px; background: var(--charcoal); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-muted-70); font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; transition: border-color 0.15s, color 0.15s, background 0.15s; } .coin-tab.active { border-color: var(--yellow); color: var(--yellow); background: var(--yellow-dim); } .pay-address-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--charcoal); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 18px; } .pay-address-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted-55); margin-bottom: 6px; } .pay-address-value { font-family: var(--font-mono); font-size: 0.95rem; color: var(--yellow); font-weight: 700; } .pay-address-value.mono-wrap { word-break: break-all; font-size: 0.8rem; line-height: 1.5; } @media (max-width: 560px) { .pay-address-row { flex-direction: column; align-items: stretch; } } /* ============================================================ Invoice code block (confirmation page) ============================================================ */ .invoice-code-block { background: var(--charcoal-2); border: 1.5px dashed rgba(245,179,1,0.4); border-radius: var(--radius-md); padding: 28px; margin: 0 auto 8px; display: inline-block; } .invoice-code-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted-55); margin-bottom: 10px; } .invoice-code-value { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; color: var(--yellow); letter-spacing: 0.04em; } /* ============================================================ Printable invoice ============================================================ */ .invoice-paper { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: clamp(24px, 4vw, 44px); } .invoice-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 24px; border-bottom: 2px solid var(--line-strong); margin-bottom: 24px; flex-wrap: wrap; } .invoice-brand { font-family: var(--font-display); font-size: 1.2rem; color: var(--white); } .invoice-brand-sub { font-size: 0.82rem; color: var(--ink-muted-55); margin-top: 4px; } .invoice-head-right { text-align: right; } .invoice-meta-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted-55); } .invoice-meta-value { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; color: var(--yellow); } .invoice-meta-value-sm { font-family: var(--font-mono); font-size: 0.85rem; color: var(--white); } .invoice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 28px; } @media (max-width: 700px) { .invoice-grid { grid-template-columns: 1fr; } } .invoice-section-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); margin-bottom: 8px; } .invoice-text { font-size: 0.9rem; color: var(--white); line-height: 1.6; } .invoice-text-muted { font-size: 0.8rem; color: var(--ink-muted-55); } .invoice-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; } .invoice-table th { text-align: left;font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted-55); padding: 10px 8px; border-bottom: 1px solid var(--line-strong); } .invoice-table td { padding: 14px 8px; font-size: 0.88rem; color: var(--white); border-bottom: 1px solid var(--line); vertical-align: top; } .invoice-totals { max-width: 320px; margin-left: auto; } .invoice-totals-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.88rem; color: var(--ink-muted-70); } .invoice-totals-final { border-top: 1px solid var(--line-strong); margin-top: 6px; padding-top: 14px; font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem; color: var(--yellow); } .invoice-footer { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--ink-muted-55); text-align: center; } @media print { .site-header, .site-footer, .no-print, .page-header, .invoice-code-block, .cart-panel, .cart-backdrop { display: none !important; } body { background: #fff; color: #000; } .invoice-paper { border: none; padding: 0; background: #fff; color: #000; } .invoice-brand, .invoice-text, .invoice-table td, .invoice-meta-value-sm { color: #000; } .invoice-meta-value, .invoice-section-label, .invoice-totals-final { color: #a06b00; } } /* ============================================================ Track order page ============================================================ */ .track-form { display: flex; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; } .track-form input { flex: 1; min-width: 220px; background: var(--charcoal-2); border: 1px solid var(--line-strong); color: var(--white); padding: 14px 16px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.95rem; letter-spacing: 0.04em; } .track-form input:focus { border-color: var(--yellow); } .track-empty { text-align: center; padding: 32px; color: var(--ink-muted-55); background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius-md); } .track-result { background: var(--charcoal-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: clamp(20px, 3vw, 32px); } .track-result-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } .track-status-pill { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; color: var(--charcoal); background: var(--yellow); padding: 8px 16px; border-radius: 999px; } .track-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; } @media (max-width: 640px) { .track-steps { grid-template-columns: repeat(2, 1fr); } } .track-step { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: var(--radius-sm); background: var(--charcoal); border: 1px solid var(--line); } .track-step-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-muted-38); flex-shrink: 0; } .track-step.done .track-step-dot { background: var(--yellow); } .track-step.current { border-color: var(--yellow); } .track-step-label { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-muted-55); } .track-step.done .track-step-label, .track-step.current .track-step-label { color: var(--white); } .track-status-detail { font-size: 0.9rem; color: var(--ink-muted-70); margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); } .track-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 700px) { .track-detail-grid { grid-template-columns: 1fr; } } /* ============================================================ Project category cards (colorful, click-through) ============================================================ */ .project-cat-card { display: block;background: linear-gradient(160deg, #262C33 0%, #1D2127 100%); border: 1px solid var(--line-strong); border-top: 3px solid var(--cat-color, var(--yellow)); border-radius: var(--radius-md); padding: 26px 22px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .project-cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); } .project-cat-icon { width: 46px; height: 46px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; font-family: var(--font-display); font-size: 1.2rem; color: #14171B; } .project-cat-card h4 { font-size: 1.05rem; margin-bottom: 6px; text-transform: none; letter-spacing: normal; } .project-cat-card p { font-size: 0.85rem; color: var(--ink-muted-55); margin-bottom: 16px; } .project-cat-arrow { font-family: var(--font-mono); font-size: 0.78rem; color: var(--cat-color, var(--yellow)); font-weight: 600; } /* ============================================================ MOBILE NAV — TAP-THROUGH FIX Replaces the earlier nav-height-fix.css block. Forces the links themselves to be the top-most, tappable layer, and uses dvh (dynamic viewport height) instead of vh so mobile Safari/Chrome's address bar show/hide doesn't shift the nav's height out of sync with where taps actually land. ============================================================ */ @media (max-width: 980px) { .main-nav.open { height: 100dvh !important; height: calc(100vh - 78px) !important; /* fallback for browsers without dvh support */ z-index: 150; } .main-nav.open a { position: relative; z-index: 5; pointer-events: auto; -webkit-tap-highlight-color: rgba(245,179,1,0.25); touch-action: manipulation; } } @media (max-width: 480px) { .main-nav.open { height: 100dvh !important; height: calc(100vh - 68px) !important; } } /* ============================================================ MOBILE FILTER DRAWER — Equipment catalog On mobile, the filter panel becomes a collapsible drawer triggered by a "Filters" button, instead of an always-open block that pushes the equipment grid off-screen. ============================================================ */ .filter-toggle-btn { display: none; width: 100%; align-items: center; justify-content: space-between; background: var(--charcoal-2); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 14px 18px; color: var(--white); font-family: var(--font-mono); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 16px; } .filter-toggle-btn .chev { font-size: 0.75rem; color: var(--yellow); transition: transform 0.2s ease; } .filter-toggle-btn.open .chev { transform: rotate(180deg); } @media (max-width: 900px) { .filter-toggle-btn { display: flex; } .filter-panel { display: none; margin-bottom: 20px; } .filter-panel.mobile-open { display: block; } } @media (max-width: 900px) { .catalog-layout { display: block !important; } .catalog-layout > div { width: 100% !important; } }