:root { --bg: #0d0d0d; --bg-alt: #161616; --bg-card: #1c1c1c; --red: #e10600; --red-dark: #a80500; --text: #f5f5f5; --text-muted: #9a9a9a; --border: #262626; /* Font history 2026-09-16, most recent first. To revert, set both vars back to an earlier pair AND swap the Google Fonts in every page's to match: 1) Outfit (current) --font-heading/body: "Outfit", Arial, sans-serif; link: https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap 2) Noto Sans --font-heading/body: "Noto Sans", Arial, sans-serif; link: https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap 3) Oswald (heading) + Barlow (body) — original --font-heading: "Oswald", Arial, sans-serif; --font-body: "Barlow", Arial, sans-serif; link: https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Barlow:wght@400;500;600&display=swap */ --font-heading: "Outfit", Arial, sans-serif; --font-body: "Outfit", Arial, sans-serif; --container-w: 1200px; --header-h: 76px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.6; } .container { width: 100%; max-width: var(--container-w); margin: 0 auto; padding: 0 24px; } a { color: inherit; text-decoration: none; } section { padding: 88px 0; } img { max-width: 100%; display: block; } h1, h2, h3 { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.02em; font-weight: 600; line-height: 1.15; } h1 { font-weight: 700; } /* Section kickers: red diagonal bar before section headings */ main h2 { position: relative; display: inline-flex; align-items: center; gap: 16px; font-size: clamp(1.6rem, 3vw, 2rem); } main h2::before { content: ""; width: 28px; height: 4px; background: var(--red); transform: skewX(-20deg); flex-shrink: 0; } /* ===== Header ===== */ .site-header { position: sticky; top: 0; background: rgba(13, 13, 13, 0.95); backdrop-filter: blur(4px); z-index: 100; border-bottom: 1px solid var(--border); transition: box-shadow 0.3s ease; } .header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); } .logo { display: inline-flex; align-items: center; } .logo img { display: block; height: 20px; width: auto; } /* Compact sticky header on scroll — desktop only. Mobile keeps a fixed header height because the slide-out nav panel positions itself at top: var(--header-h). */ @media (min-width: 901px) { .header-inner { transition: height 0.3s ease; } .site-header.is-compact { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); } .site-header.is-compact .header-inner { height: 56px; } .logo img { transition: height 0.3s ease; } .site-header.is-compact .logo img { height: 16px; } } .main-nav { display: flex; align-items: center; gap: 22px; } .main-nav a:not(.nav-cta) { font-family: var(--font-heading); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.04em; padding-bottom: 4px; border-bottom: 2px solid transparent; white-space: nowrap; } .main-nav a:not(.nav-cta):hover, .main-nav a[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); } .nav-cta { background: var(--red); padding: 10px 18px; border: 1px solid transparent; border-radius: 2px; font-family: var(--font-heading); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.05em; font-weight: 600; white-space: nowrap; transition: padding 0.3s ease; } .site-header.is-compact .nav-cta { padding: 7px 16px; } .nav-cta:hover { background: var(--red-dark); border-color: #fff; } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 0; } .nav-toggle span { display: block; width: 100%; height: 2px; background: var(--text); } /* ===== Buttons ===== */ .btn { display: inline-block; padding: 15px 30px; border-radius: 2px; font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; } .btn-primary { background: var(--red); color: #fff; } .btn-primary:hover { background: var(--red-dark); outline: 2px solid #fff; outline-offset: 2px; } .btn-secondary { background: transparent; color: var(--text); border: 1px solid #3a3a3a; margin-right: 10px; margin-top: 10px; } .btn-secondary:hover { background: var(--bg-alt); border-color: var(--text); } /* ===== Hero (home) ===== */ .hero { --photo: repeating-linear-gradient(135deg, #151515, #151515 12px, #1b1b1b 12px, #1b1b1b 24px); min-height: 90vh; display: flex; align-items: center; background: linear-gradient(100deg, rgba(13,13,13,0.97) 0%, rgba(13,13,13,0.88) 50%, rgba(13,13,13,0.6) 100%), var(--photo); background-size: cover; background-position: center; text-align: left; border-bottom: 1px solid var(--border); } .hero h1 { margin: 0 0 36px; line-height: 0; } .hero-logo { display: block; width: clamp(280px, 40vw, 480px); height: auto; } /* ===== Sub-page header ===== */ .page-header { --photo: none; background: linear-gradient(100deg, rgba(13,13,13,0.93) 0%, rgba(13,13,13,0.8) 60%, rgba(13,13,13,0.55) 100%), var(--photo) center / cover no-repeat, var(--bg-alt); padding: 88px 0; text-align: left; border-bottom: 1px solid var(--border); } /* ===== Hero / page-header photo variants ===== Mobile gets a smaller 900w source; a wider viewport swaps in the full-size image. Kept as classes (not inline styles) so the media query below can actually override --photo. */ .hero-action-3 { --photo: url('/assets/img/photos/action-3-900w.webp'); } .page-header-production { --photo: url('/assets/img/photos/banner-production-900w.webp'); } .page-header-services { --photo: url('/assets/img/photos/banner-services-900w.webp'); } .page-header-spare-parts { --photo: url('/assets/img/photos/banner-spare-parts-900w.webp'); } @media (min-width: 900px) { .hero-action-3 { --photo: url('/assets/img/photos/action-3.webp'); } .page-header-production { --photo: url('/assets/img/photos/banner-production.webp'); } .page-header-services { --photo: url('/assets/img/photos/banner-services.webp'); } .page-header-spare-parts { --photo: url('/assets/img/photos/banner-spare-parts.webp'); } } .page-header h1 { font-size: clamp(2.1rem, 5vw, 3.25rem); position: relative; padding-left: 20px; } .page-header h1::before { content: ""; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 4px; background: var(--red); transform: skewX(-20deg); } .page-header .tagline { color: var(--text-muted); margin-top: 16px; font-size: 1.05rem; padding-left: 20px; } /* ===== Advantages / feature strip ===== */ .advantages { background: var(--bg-alt); border-bottom: 1px solid var(--border); } .advantages-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; margin-top: 40px; } .advantages-list li { background: transparent; padding: 0; border-left: none; border-top: 2px solid var(--red); padding-top: 16px; font-size: 0.95rem; color: var(--text-muted); } /* ===== Service / business-area cards (index.html) ===== Follows the CARD DESIGN STANDARD defined above .parts-categories below. */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 40px; counter-reset: card; } .service-card { background: var(--bg-card); padding: 32px 28px; border-radius: 2px; border: 1px solid var(--border); position: relative; overflow: hidden; transition: border-color 0.25s ease; } .service-card:hover { border-color: var(--red); } .service-card::before { counter-increment: card; content: counter(card, decimal-leading-zero); position: absolute; top: 16px; right: 16px; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; color: var(--text-muted); background: rgba(13, 13, 13, 0.55); border: 1px solid var(--border); padding: 5px 10px; border-radius: 2px; } .service-card h2, .service-card h3 { font-size: 1.3rem; margin-bottom: 12px; position: relative; } .service-card h2::before, .service-card h3::before { content: ""; display: block; width: 32px; height: 3px; background: var(--red); transform: skewX(-20deg); margin-bottom: 14px; transition: width 0.25s ease; } .service-card:hover h2::before, .service-card:hover h3::before { width: 48px; } .service-card p { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 16px; position: relative; } .service-card > a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .service-card > a { font-family: var(--font-heading); text-transform: uppercase; font-size: 0.78rem; line-height: 1; letter-spacing: 0.05em; color: var(--red); display: inline-flex; align-items: center; gap: 6px; transition: gap 0.25s ease; } .service-card > a span[aria-hidden] { line-height: 1; } .service-card:hover > a { gap: 12px; } .service-card .btn-secondary { font-size: 0.72rem; padding: 10px 16px; } @media (prefers-reduced-motion: reduce) { .service-card, .service-card h2::before, .service-card h3::before, .service-card > a { transition: none; } } /* ===================================================================== CARD DESIGN STANDARD — reference: .part-card below (spare-parts.html) ===================================================================== Any new "card" component (grid item, tab, list entry that represents one item among several) must follow these rules unless it has a functional reason not to (documented at the bottom of this block): 1. Border: 1px solid var(--border) at rest, 2px border-radius. 2. Hover: border-color transitions to var(--red) on hover. transition: border-color 0.25s ease (this is the standard base duration for all card hover transitions — do not use 0.2s/0.3s). 3. Numbered badge (when the card is part of a numbered set): a small bordered chip, top-right corner — NOT a giant faint watermark digit. Style: font: var(--font-heading), 0.8rem, weight 600, letter-spacing 0.06em, color var(--text-muted) background: rgba(13, 13, 13, 0.55) border: 1px solid var(--border), border-radius: 2px padding: 5px 10px 4. Accent kicker bar (the small skewed red line before a heading): 32px × 3px, skewX(-20deg), background var(--red) BY DEFAULT (always red, not conditional on state), margin-bottom 14px when stacked above the heading. On hover, widens to 48px (transition: width 0.25s ease). Do not use gray-by-default / red-only-when-active — that reads as a selection state, not a decorative accent (see exception below for genuinely selectable components). 5. Card CTA link (small uppercase link, e.g. "Request price", "Learn more"): font-size 0.78rem, letter-spacing 0.05em, color var(--red), inline-flex with an arrow. On hover the gap between text and arrow grows from 6px to 12px (transition: gap 0.25s ease). 6. Card title size inside a grid card: 1.3rem. 7. Respect prefers-reduced-motion: disable the above transitions. Documented exception — persistent selection (e.g. .service-tab in services.html): a tab/list item that stays visually "selected" after click (not just on :hover) MAY additionally change its background (var(--bg-alt)) while active, on top of the standard red border/accent — that background swap is a functional selection signal, not a stylistic choice, and has no equivalent on read-only cards like .part-card. ===================================================================== */ /* ===== Spare parts: category grid (spare-parts.html) ===== Large image cards with a dark overlay, similar in spirit to the .page-header / .hero photo treatment used elsewhere on the site. This is the CARD DESIGN STANDARD reference implementation — see the comment block above. */ .parts-categories { padding-top: 40px; padding-bottom: 40px; } .parts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .part-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; border: 1px solid var(--border); border-radius: 2px; overflow: hidden; background: var(--bg-card); transition: border-color 0.25s ease; } .part-card-media { position: absolute; inset: 0; z-index: 0; } .part-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .part-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(13, 13, 13, 0) 30%, rgba(13, 13, 13, 0.75) 65%, rgba(13, 13, 13, 0.94) 100%); transition: background 0.25s ease; } .part-card-number { position: absolute; top: 20px; right: 20px; z-index: 2; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; color: var(--text-muted); background: rgba(13, 13, 13, 0.55); border: 1px solid var(--border); padding: 5px 10px; border-radius: 2px; } .part-card-content { position: relative; z-index: 2; padding: 28px 28px 32px; } .part-card-accent { display: block; width: 32px; height: 3px; background: var(--red); transform: skewX(-20deg); margin-bottom: 14px; transition: width 0.25s ease; } .part-card-content h2 { display: block; font-size: 1.3rem; margin-bottom: 10px; } /* .part-card-accent (above) is the card's kicker bar — suppress the generic "main h2::before" kicker here so it doesn't duplicate it. */ .part-card-content h2::before { content: none; } .part-card-content p { color: var(--text-muted); font-size: 0.92rem; max-width: 380px; } .part-card-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-family: var(--font-heading); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.05em; color: var(--red); transition: gap 0.25s ease; } .part-card:hover { border-color: var(--red); } .part-card:hover .part-card-media img { transform: scale(1.04); } .part-card:hover::after { background: linear-gradient(180deg, rgba(13, 13, 13, 0) 30%, rgba(161, 5, 0, 0.14) 65%, rgba(13, 13, 13, 0.94) 100%); } .part-card:hover .part-card-accent { width: 48px; } .part-card:hover .part-card-cta { gap: 12px; } @media (prefers-reduced-motion: reduce) { .part-card-media img, .part-card-accent, .part-card-cta, .part-card { transition: none; } } @media (max-width: 900px) { .part-card { min-height: 360px; } } @media (max-width: 700px) { .parts-grid { grid-template-columns: 1fr; } .part-card { min-height: 320px; } } /* ===== Spare parts: sourcing CTA band ===== */ .parts-sourcing-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 2px; padding: 56px; } .parts-sourcing-text p { color: var(--text-muted); margin-top: 12px; font-size: 1.05rem; max-width: 480px; } .parts-sourcing-inner .btn { flex-shrink: 0; white-space: nowrap; } @media (max-width: 720px) { .parts-sourcing-inner { flex-direction: column; align-items: flex-start; padding: 36px 28px; } } /* ===== Projects / gallery placeholders (Phase 2: mockup only, no real gallery yet) ===== */ .projects-gallery, .partners-logos { background: repeating-linear-gradient(135deg, #161616, #161616 12px, #1c1c1c 12px, #1c1c1c 24px); border: 1px dashed var(--border); border-radius: 2px; min-height: 220px; } .projects-gallery, .partners-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 40px; } .services-grid + .btn, .projects-gallery + .btn { margin-top: 40px; } /* ===== Services split view (services.html) ===== Left: clickable list of service tabs, scrolls within its own box. Right: detail panel, stays in place, content swaps on tab click. Follows the CARD DESIGN STANDARD above .parts-categories, with the documented "persistent selection" exception for .is-active. */ .services { padding-top: 40px; padding-bottom: 88px; } .services-split { display: flex; gap: 32px; height: calc(100vh - var(--header-h) - 40px); } .services-tabs { flex: 0 0 340px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; padding-right: 8px; counter-reset: tab; } .service-tab { flex: 1 1 0; min-height: 90px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 2px; padding: 24px 28px; display: flex; align-items: center; text-align: left; cursor: pointer; position: relative; overflow: hidden; font: inherit; color: inherit; transition: border-color 0.25s ease, background 0.25s ease; } .service-tab:hover { border-color: var(--red); } .service-tab.is-active { border-color: var(--red); background: var(--bg-alt); } .service-tab::before { counter-increment: tab; content: counter(tab, decimal-leading-zero); position: absolute; top: 10px; right: 12px; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; color: var(--text-muted); background: rgba(13, 13, 13, 0.55); border: 1px solid var(--border); padding: 5px 10px; border-radius: 2px; } .service-tab-title { font-family: var(--font-heading); text-transform: uppercase; font-weight: 600; font-size: 1.15rem; letter-spacing: 0.02em; position: relative; display: inline-flex; align-items: center; gap: 14px; } .service-tab-title::before { content: ""; width: 32px; height: 3px; background: var(--red); transform: skewX(-20deg); flex-shrink: 0; transition: width 0.25s ease; } .service-tab:hover .service-tab-title::before, .service-tab.is-active .service-tab-title::before { width: 48px; } .service-detail { flex: 1; background: var(--bg-card); border: 1px solid var(--border); border-radius: 2px; padding: 48px; overflow-y: auto; position: relative; } .service-panel { display: flex; flex-direction: column; height: 100%; } .service-panel[hidden] { display: none; } .service-panel h2 { font-size: 1.75rem; flex-shrink: 0; } .service-panel-divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; flex-shrink: 0; } .service-panel-media { flex: 1 1 0; min-height: 140px; position: relative; overflow: hidden; border: 1px dashed var(--border); border-radius: 2px; } /* ===== Media carousel (inside .service-panel-media) ===== Markup only needs the slides; js/main.js builds the prev/next arrows and dots for however many .carousel-slide elements exist. */ .carousel-track { display: flex; height: 100%; transition: transform 0.35s ease; } .carousel-slide { flex: 0 0 100%; height: 100%; background: repeating-linear-gradient(135deg, #161616, #161616 12px, #1c1c1c 12px, #1c1c1c 24px); } .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; padding: 0; margin: 0; border-radius: 50%; background: rgba(13, 13, 13, 0.7); border: 1px solid var(--border); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, border-color 0.2s ease; } .carousel-arrow svg { display: block; } .carousel-arrow:hover { background: var(--red); border-color: var(--red); } .carousel-prev { left: 12px; } .carousel-next { right: 12px; } .carousel-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; } .carousel-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: rgba(245, 245, 245, 0.25); cursor: pointer; } .carousel-dot.is-active { background: var(--red); } .service-panel-text { flex: 1 1 0; min-height: 100px; overflow-y: auto; } .service-panel-text p { color: var(--text-muted); font-size: 1rem; max-width: 520px; } @keyframes service-panel-in { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } } .service-panel.is-entering { animation: service-panel-in 0.35s ease-out; } @media (prefers-reduced-motion: reduce) { .service-panel.is-entering { animation: none; } .service-tab, .service-tab-title::before { transition: none; } } @media (max-width: 900px) { .services-split { flex-direction: column; height: auto; } .services-tabs { flex-direction: row; flex: none; overflow-x: auto; overflow-y: visible; padding-right: 0; padding-bottom: 8px; } .service-tab { flex: 0 0 260px; } .service-detail { min-height: 280px; padding: 32px 24px; } } /* ===== END Services split view ===== */ .projects-gallery.has-photos { background: none; border: none; min-height: 0; } .projects-gallery img { width: 100%; height: 260px; object-fit: cover; border-radius: 2px; display: block; } .project-gallery .projects-gallery img { cursor: zoom-in; } /* ===== About: team photo + quote plate ===== */ .about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 32px; } .about-photo { position: relative; } .about-photo img { width: 100%; height: 380px; object-fit: cover; border-radius: 2px; display: block; } .about-quote { position: absolute; right: 20px; bottom: -20px; max-width: 280px; background: var(--red); color: #fff; padding: 24px 28px; font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; line-height: 1.3; text-transform: uppercase; } @media (max-width: 720px) { .about-grid { grid-template-columns: 1fr; } .about-quote { right: 12px; left: 12px; max-width: none; bottom: -16px; } } /* ===== Testimonials ===== */ .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; margin-top: 40px; } .testimonial-card { background: transparent; padding: 0; border-left: none; position: relative; padding-left: 24px; border-left: 2px solid var(--red); } .testimonial-card p { font-size: 1.05rem; font-style: italic; color: var(--text); } .testimonial-card cite { display: block; margin-top: 14px; color: var(--text-muted); font-style: normal; font-family: var(--font-heading); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; } /* ===== Partners section ===== */ .partners { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* ===== Contacts / request form ===== */ .contacts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 56px; align-items: start; } .request-form h2, .contact-details h2 { margin-bottom: 24px; } .request-form { display: flex; flex-direction: column; gap: 6px; background: var(--bg-alt); border: 1px solid var(--border); padding: 32px; border-radius: 2px; } .request-form label { font-family: var(--font-heading); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 12px; } .request-form input, .request-form textarea, .request-form select { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 13px 14px; border-radius: 2px; font-family: var(--font-body); font-size: 0.95rem; width: 100%; } .request-form input:focus, .request-form textarea:focus, .request-form select:focus { outline: none; border-color: var(--red); } .request-form button { align-self: flex-start; border: none; cursor: pointer; margin-top: 20px; } .form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; } .form-consent input[type="checkbox"] { width: auto; margin-top: 3px; accent-color: var(--red); } .form-consent label { margin-top: 0; text-transform: none; font-family: var(--font-body); font-size: 0.85rem; letter-spacing: normal; color: var(--text-muted); } .form-consent label a { color: var(--text); text-decoration: underline; } .form-consent label a:hover { color: var(--red); } .form-status { margin-top: 12px; font-size: 0.9em; } .form-status[data-state="success"] { color: #2e7d32; } .form-status[data-state="error"] { color: var(--red); } .contact-list { list-style: none; margin: 8px 0 0; display: flex; flex-direction: column; gap: 14px; } .contact-list a { font-family: var(--font-heading); font-size: 1rem; letter-spacing: 0.02em; } .contact-list a:hover { color: var(--red); } .map-embed { margin-top: 32px; border: 1px solid var(--border); border-radius: 2px; overflow: hidden; } .map-embed iframe { display: block; } .social-links { margin-top: 24px; display: flex; gap: 16px; } /* ===== Legal pages ===== */ .legal { padding: 60px 0 80px; } .legal-content { max-width: 760px; } .legal-content h2 { margin-top: 36px; margin-bottom: 12px; } .legal-content h2:first-of-type { margin-top: 0; } .legal-content p { color: var(--text-muted); line-height: 1.7; margin-bottom: 14px; } .legal-content ul { color: var(--text-muted); line-height: 1.7; margin: 0 0 14px 20px; } .legal-content a { color: var(--text); text-decoration: underline; } .legal-content a:hover { color: var(--red); } /* ===== Footer ===== */ .site-footer { padding: 56px 0 32px; border-top: 1px solid var(--border); color: var(--text-muted); } .footer-inner { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; text-align: left; padding-bottom: 32px; } .footer-logo { display: block; width: 180px; height: auto; margin-bottom: 20px; } .footer-address { font-size: 0.85rem; line-height: 1.7; } .footer-address .footer-legal-name { color: var(--text); } .footer-heading { font-family: var(--font-heading); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.08em; color: var(--text); margin-bottom: 18px; } .footer-nav, .footer-contact { display: flex; flex-direction: column; gap: 12px; } .footer-nav a, .footer-contact a { color: var(--text-muted); font-size: 0.9rem; width: fit-content; } .footer-nav a:hover, .footer-contact a:hover { color: var(--red); } .footer-social { display: flex; gap: 16px; margin-top: 20px; } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 0.78rem; } .footer-bottom a:hover { color: var(--red); } @media (max-width: 700px) { .footer-inner { grid-template-columns: 1fr; text-align: center; } .footer-logo { margin: 0 auto 20px; } .footer-nav, .footer-contact { display: grid; grid-template-columns: repeat(2, auto); gap: 12px 28px; justify-content: center; text-align: left; } .footer-heading { grid-column: 1 / -1; text-align: center; } .footer-bottom { justify-content: center; text-align: center; } } /* ===== Responsive ===== */ @media (max-width: 900px) { .main-nav { position: fixed; top: var(--header-h); left: 0; right: 0; height: calc(100vh - var(--header-h)); background: var(--bg); flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; padding: 24px; transform: translateX(100%); transition: transform 0.25s ease; overflow-y: auto; z-index: 90; } .main-nav.is-open { transform: translateX(0); } .main-nav a:not(.nav-cta) { width: 100%; padding: 16px 0; border-bottom: 1px solid var(--border); font-size: 0.95rem; } .main-nav .nav-cta { margin-top: 20px; text-align: center; width: 100%; } .nav-toggle { display: flex; } section { padding: 64px 0; } } @media (max-width: 560px) { .request-form { padding: 24px; } } /* ===== Production: featured showcase (production.html) ===== Full-bleed image directly under the page header, with an overlapping content plate carrying the numbered heading + CTA. Reuses the .part-card-cta component for the link (see CARD DESIGN STANDARD). */ .production-showcase { padding: 40px 0 64px; } .production-showcase-media { position: relative; width: 100%; aspect-ratio: 16 / 7; overflow: hidden; background: var(--bg-alt); } .production-showcase-media img { width: 100%; height: 100%; object-fit: cover; } .production-showcase-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 13, 13, 0) 45%, rgba(13, 13, 13, 0.88) 100%); } .production-showcase-content { position: relative; z-index: 2; margin-top: -150px; max-width: 580px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 2px; padding: 40px 44px 44px; } .production-showcase-number { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.08em; color: var(--red); margin-bottom: 12px; } .production-showcase-title { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 14px; } .production-showcase-title::before { content: none; } .production-showcase-content p { color: var(--text-muted); max-width: 460px; margin-bottom: 24px; } /* Allow .part-card-cta to be used outside .part-card (its own :hover, not just the parent-card hover it gets inside .part-card). */ .part-card-cta:hover { gap: 12px; } @media (max-width: 900px) { .production-showcase-content { margin-top: -90px; padding: 32px 28px 36px; } } @media (max-width: 560px) { .production-showcase-content { margin-top: 0; max-width: none; } } /* ===== Production: capability cards (production.html) ===== Three large image cards, same visual language as .part-card (CARD DESIGN STANDARD) laid out on a 3-column desktop grid. */ .production-categories { padding-top: 40px; } .production-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; } @media (max-width: 1000px) { .production-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .production-grid { grid-template-columns: 1fr; } } /* ===== Production: build process timeline (production.html) ===== Thin top-line per step reads as one continuous line across the row; a small red tick marks each step, large dark numbers stay minimal and technical rather than illustrative. */ .process { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 48px; } .process-step { position: relative; padding-top: 24px; border-top: 1px solid var(--border); } .process-step-accent { position: absolute; top: -1px; left: 0; width: 32px; height: 3px; background: var(--red); transform: skewX(-20deg); } .process-step-number { position: absolute; top: -1px; right: 0; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1; color: var(--text-muted); background: rgba(13, 13, 13, 0.55); border: 1px solid var(--border); padding: 5px 10px; border-radius: 2px; } .process-step h3 { font-size: 1.05rem; margin-bottom: 8px; } .process-step p { color: var(--text-muted); font-size: 0.9rem; } @media (max-width: 900px) { .process-steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; } } @media (max-width: 560px) { .process-steps { grid-template-columns: 1fr; } } /* ===== Production: final CTA band (production.html) ===== */ .final-cta { text-align: center; } .final-cta-accent { display: inline-block; width: 40px; height: 4px; background: var(--red); transform: skewX(-20deg); margin-bottom: 24px; } .final-cta-title { display: block; font-size: clamp(2rem, 5vw, 3.1rem); margin: 0 auto 16px; } .final-cta-title::before { content: none; } .final-cta p { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 32px; } /* ===================================================================== Projects archive (projects.html) + project detail pages (/projects/*) ===================================================================== */ /* ===== Overview: asymmetric archive grid ===== Cards reuse .part-card (CARD DESIGN STANDARD, see spare-parts.html) so the hover interaction and visual language stay identical — only the grid placement changes. Rendered client-side from data/projects-data.js by js/projects.js so the layout scales with the data instead of being redesigned per project. */ .projects-archive { padding-top: 40px; } .projects-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 260px; gap: 24px; } .projects-archive-grid .part-card { min-height: 0; } .part-card--lg { grid-column: span 2; grid-row: span 2; } .part-card--sm { grid-column: span 1; grid-row: span 1; } .part-card--wide { grid-column: 1 / -1; grid-row: span 1; } .part-card-content .project-card-vehicle { font-family: var(--font-heading); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 8px; } @media (max-width: 1000px) { .projects-archive-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 320px; } .part-card--lg, .part-card--sm, .part-card--wide { grid-column: span 1; grid-row: span 1; } } @media (max-width: 700px) { .projects-archive-grid { grid-template-columns: 1fr; grid-auto-rows: 360px; } } /* ===== Detail page: header additions ===== */ .project-back-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-heading); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 28px; transition: color 0.25s ease; } .project-back-link:hover { color: var(--red); } .project-kicker { font-family: var(--font-heading); text-transform: uppercase; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.08em; color: var(--red); padding-left: 20px; margin-bottom: 14px; } /* ===== Detail page: full-bleed hero image ===== Reuses .production-showcase-media (see production.html) — same full-width photo + gradient-overlay treatment, no overlapping card. */ .project-hero { padding: 0; border-bottom: 1px solid var(--border); } /* ===== Detail page: overview + flexible content blocks ===== */ .project-overview p { color: var(--text-muted); font-size: 1.05rem; max-width: 640px; margin-top: 16px; } .project-content-blocks { display: flex; flex-direction: column; gap: 40px; margin-top: 32px; } .project-content-block--text h3 { font-size: 1.2rem; margin-bottom: 12px; } .project-content-block--text p { color: var(--text-muted); max-width: 720px; } .project-content-block--text p a { color: var(--text); text-decoration: underline; } .project-content-block--text p a:hover { color: var(--red); } .project-content-block--image img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 2px; border: 1px solid var(--border); } /* ===== Detail page: services provided ===== */ .project-services { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .project-services-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px 32px; margin-top: 32px; } .project-services-item { display: flex; align-items: baseline; gap: 14px; padding-top: 16px; border-top: 1px solid var(--border); } .project-services-number { flex-shrink: 0; font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em; color: var(--red); } .project-services-label { font-family: var(--font-heading); text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.02em; } /* ===== Detail page: more projects ===== Reuses .part-card at uniform size (no --lg/--sm modifier) in an auto-fit grid, since this is always a short 2–3 item list. */ .more-projects-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* ===== Detail page: prev/next project pager ===== */ .project-pager { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .project-pager-inner { display: grid; grid-template-columns: 1fr 1fr; } .project-pager-link { display: flex; flex-direction: column; gap: 8px; padding: 32px 0; } .project-pager-prev { text-align: left; padding-right: 24px; border-right: 1px solid var(--border); } .project-pager-next { text-align: right; align-items: flex-end; padding-left: 24px; } .project-pager-label { font-family: var(--font-heading); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--text-muted); transition: color 0.25s ease; } .project-pager-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; transition: color 0.25s ease; } .project-pager-link:hover .project-pager-label, .project-pager-link:hover .project-pager-title { color: var(--red); } @media (max-width: 700px) { .project-pager-inner { grid-template-columns: 1fr; } .project-pager-prev { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 20px; } .project-pager-next { align-items: flex-start; text-align: left; padding-left: 0; padding-top: 20px; } } @media (prefers-reduced-motion: reduce) { .project-back-link, .project-pager-label, .project-pager-title { transition: none; } } /* ===== Gallery lightbox (project detail pages) ===== */ .lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(13, 13, 13, 0.92); opacity: 0; visibility: hidden; transition: opacity 0.25s ease; } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox-figure { position: relative; max-width: min(90vw, 1100px); max-height: 86vh; margin: 0 64px; } .lightbox-figure img { display: block; max-width: 100%; max-height: 86vh; width: auto; height: auto; border-radius: 2px; object-fit: contain; } .lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-card); color: var(--text); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .lightbox-close svg, .lightbox-prev svg, .lightbox-next svg { display: block; } .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: var(--red); border-color: var(--red); } .lightbox-close { top: -56px; right: 0; } .lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); } .lightbox-prev { left: -64px; } .lightbox-next { right: -64px; } .lightbox-counter { position: absolute; bottom: -36px; left: 0; right: 0; text-align: center; font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--text-muted); } @media (max-width: 720px) { .lightbox-figure { margin: 0 16px; } .lightbox-close { top: -48px; right: 0; } .lightbox-prev, .lightbox-next { width: 36px; height: 36px; } .lightbox-prev { left: 4px; } .lightbox-next { right: 4px; } .lightbox-counter { bottom: -32px; } } @media (prefers-reduced-motion: reduce) { .lightbox { transition: none; } }