/* ALU PACK — design system. Hand-written CSS (no build step) for maximum portability and fast first paint / high Lighthouse performance scores. */ :root { --blue: #1d4ed8; --blue-dark: #1e3a8a; --blue-light: #eff6ff; --ink: #0f172a; --ink-soft: #334155; --muted: #64748b; --border: #e2e8f0; --bg-alt: #f8fafc; --white: #ffffff; --radius: 10px; --radius-lg: 16px; --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12); /* Side gutter matched to the reference mock-up, which insets its content ~2.6% of the page width on each side. Keeping it proportional means that ratio holds at every desktop size instead of only one. The cap is set past 2560 so it doesn't bind on any ordinary monitor; on an ultrawide it finally centres rather than stretching a text column to 3600px. */ --container: 2560px; --gutter: clamp(16px, 2.6vw, 66px); --header-h: 72px; font-size: 16px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); } body { margin: 0; font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; color: var(--ink-soft); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { color: var(--ink); font-weight: 700; line-height: 1.25; margin: 0 0 0.5em; } h1 { font-size: clamp(1.9rem, 3.2vw, 2.75rem); } h2 { font-size: clamp(1.65rem, 2.6vw, 2.3rem); } h3 { font-size: 1.15rem; } p { margin: 0 0 1em; } ul { list-style: none; margin: 0; padding: 0; } .icon { width: 1.1em; height: 1.1em; vertical-align: -0.15em; } .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .skip-link { position: absolute; left: -999px; top: 0; background: var(--blue); color: #fff; padding: 10px 16px; z-index: 200; } .skip-link:focus { left: 8px; top: 8px; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 8px; font-weight: 600; font-size: 0.95rem; border: 1px solid transparent; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--blue); color: #fff; } .btn-primary:hover { background: var(--blue-dark); box-shadow: 0 8px 20px -6px rgba(29, 78, 216, 0.45); } .btn-outline { background: #fff; color: var(--ink); border-color: var(--border); } .btn-outline:hover { border-color: var(--blue); color: var(--blue); } .btn-white { background: #fff; color: var(--blue); } .btn-white:hover { background: var(--blue-light); } .btn-sm { padding: 9px 16px; font-size: 0.85rem; } .btn-danger { background: #dc2626; color: #fff; } .btn:disabled { opacity: 0.4; cursor: not-allowed; background: #94a3b8; box-shadow: none; transform: none; } .btn:disabled:hover { transform: none; box-shadow: none; } .btn-block { width: 100%; justify-content: center; } /* Header */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 24px; } .logo { font-size: 1.4rem; font-weight: 800; letter-spacing: 0.5px; flex-shrink: 0; } .logo-primary { color: var(--blue); } .logo-secondary { color: var(--ink); } .main-nav ul { display: flex; gap: 4px; } .main-nav a { padding: 10px 14px; border-radius: 6px; font-weight: 500; font-size: 0.94rem; color: var(--ink-soft); transition: background .2s ease, color .2s ease; } .main-nav a:hover, .main-nav a.active { color: var(--blue); background: var(--blue-light); } .header-actions { display: flex; align-items: center; gap: 10px; } .nav-toggle { display: none; background: none; border: 1px solid var(--border); border-radius: 8px; padding: 8px; cursor: pointer; color: var(--ink); } .mobile-nav { display: none; border-top: 1px solid var(--border); } .mobile-nav ul { padding: 8px 24px 16px; } .mobile-nav a { display: block; padding: 12px 0; border-bottom: 1px solid var(--border); } body.nav-open .mobile-nav { display: block; } /* Hero */ .hero { position: relative; overflow: hidden; background-color: #0b1220; /* Banner artwork is authored at 1980 × 900 (2.2:1). aspect-ratio keeps that exact shape on wide screens so nothing is cropped, while min-height stops it collapsing on short/narrow viewports where the ratio would be too flat to hold the headline. */ width: 100%; aspect-ratio: 1980 / 900; min-height: 460px; max-height: 900px; /* Slides stack in one grid cell rather than being absolutely positioned, so the section is still sized by its tallest slide — absolute positioning would collapse the height and clip long copy on narrow screens. */ display: grid; } .hero-slide { grid-area: 1 / 1; background-size: cover; background-position: center; padding: 96px 0 100px; display: flex; align-items: center; opacity: 0; pointer-events: none; transition: opacity .8s ease; } .hero-slide.is-active { opacity: 1; pointer-events: auto; } /* Video banner: fills the slide behind the copy, same scrim as an image. */ .hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .hero-slide::after { /* extra readability scrim on top of the banner image's own baked-in gradient */ content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, rgba(5,8,16,0.72) 0%, rgba(5,8,16,0.42) 45%, rgba(5,8,16,0.08) 75%); } .hero-inner { position: relative; z-index: 1; display: block; width: 100%; } .hero-copy { max-width: 640px; } /* Scoped to the active slide so the copy re-animates each time a slide becomes current (the rule starts matching, which restarts the animation). */ .hero-slide.is-active .hero-copy > * { opacity: 0; transform: translateY(16px); animation: heroFadeUp 0.7s cubic-bezier(.16,.8,.24,1) forwards; } /* ---- Banner carousel controls (only rendered when >1 slide) ---- */ .hero-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(8,12,22,.4); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease, border-color .2s ease, opacity .2s ease; opacity: 0; } .hero-carousel:hover .hero-nav, .hero-nav:focus-visible { opacity: 1; } .hero-nav:hover { background: rgba(8,12,22,.75); border-color: #fff; } .hero-prev { left: 18px; } .hero-next { right: 18px; } .hero-dots { position: absolute; z-index: 3; bottom: 22px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; } .hero-dot { width: 34px; height: 4px; padding: 0; border: none; border-radius: 999px; background: rgba(255,255,255,.38); cursor: pointer; transition: background .25s ease, width .25s ease; } .hero-dot:hover { background: rgba(255,255,255,.65); } .hero-dot.is-active { background: #fff; width: 48px; } .hero-copy h1 { color: #fff; animation-delay: .05s; } .hero-copy .hero-subtitle { animation-delay: .16s; } .hero-copy .hero-badges { animation-delay: .27s; } .hero-copy .hero-ctas { animation-delay: .38s; } .hero-subtitle { font-size: 1.1rem; color: rgba(255,255,255,0.82); max-width: 46ch; } .hero-badges { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 18px 0 26px; } .hero-badges li { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; color: rgba(255,255,255,0.78); font-weight: 500; } .hero-badges .icon { color: #60a5fa; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); } .btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.1); } @keyframes heroFadeUp { to { opacity: 1; transform: translateY(0); } } /* Sections */ .section { padding: 88px 0; } .section-alt { background: var(--bg-alt); } .section-heading { text-align: center; margin-bottom: 52px; } .section-heading h2 { position: relative; display: inline-block; padding-bottom: 18px; } .section-heading h2::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 68px; height: 3px; background: var(--blue); border-radius: 2px; } .center-cta { text-align: center; margin-top: 48px; } /* Scroll-reveal utility — elements fade/rise into view as they enter the viewport (see data-reveal init in main.js). Staggered via --reveal-delay, set per-element by JS based on position among sibling .reveal items. */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.16,.8,.24,1), transform .6s cubic-bezier(.16,.8,.24,1); transition-delay: var(--reveal-delay, 0s); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Products grid */ .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .product-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .28s ease, transform .28s ease; } .product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } /* Square media: a tin photographed head-on is round, so a 1:1 crop shows the whole lid where a 4:3 letterbox cropped the top and bottom off it. */ .product-card-media { display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--bg-alt); } .product-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16,.8,.24,1); } .product-card:hover .product-card-media img { transform: scale(1.07); } .product-card-body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; } .product-card-body h3 { margin-bottom: 14px; font-size: 1.16rem; } .product-card-body h3 a:hover { color: var(--blue); } .spec-list { margin-bottom: 22px; } .spec-list li { display: flex; align-items: center; gap: 8px; font-size: 0.93rem; color: var(--muted); margin-bottom: 7px; } .spec-list .icon { color: var(--blue); width: 0.95em; height: 0.95em; } .card-link { color: var(--blue); font-weight: 600; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 5px; margin-top: auto; align-self: flex-start; } /* Feature grid (Why choose us) */ /* gap:0 + a hairline on each card draws the column rules between the four reasons. The rule lives on the card (not a separate divider element) so it wraps correctly at every breakpoint — the overrides in the media queries just clear whichever card starts a row. */ .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .feature-card { text-align: center; padding: 18px 30px; border-left: 1px solid var(--border); } .feature-card:nth-child(4n + 1) { border-left: none; } .feature-icon { width: 112px; height: 112px; border-radius: 50%; background: #fff; border: 1px solid #d7e1f4; color: var(--blue); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease; } .feature-card:hover .feature-icon { background: var(--blue); border-color: var(--blue); color: #fff; transform: scale(1.05); } .feature-icon .icon { width: 62px; height: 62px; } .feature-card h3 { font-size: 1.2rem; margin-bottom: 10px; } .feature-card p { color: var(--muted); font-size: 0.95rem; margin: 0 auto; max-width: 34ch; } /* Applications */ /* Six across, as in the reference — the section grew by making each tile's photo square instead of a squat 4:3 strip, not by dropping columns. */ .applications-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; } .application-tile { display: block; border-radius: var(--radius-lg); overflow: hidden; text-align: center; border: 1px solid var(--border); background: #fff; transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease; } .application-tile:hover { box-shadow: var(--shadow-lg); border-color: var(--blue); transform: translateY(-3px); } .application-tile img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform .5s cubic-bezier(.16,.8,.24,1); } .application-tile:hover img { transform: scale(1.08); } .application-tile span { display: block; padding: 18px 8px; font-weight: 600; font-size: 0.98rem; color: var(--ink); transition: color .2s ease; } .application-tile:hover span { color: var(--blue); } /* Process */ .process-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; flex-wrap: wrap; } .process-step { flex: 1 1 150px; text-align: center; min-width: 140px; } .process-icon { width: 118px; height: 118px; border-radius: 50%; background: #fff; border: 1px solid #d7e1f4; color: var(--blue); display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease; } /* Without this the glyph falls back to the global `.icon { 1.1em }` and sits as an 18px speck inside a 92px circle. */ .process-icon .icon { width: 64px; height: 64px; } .process-step:hover .process-icon { background: var(--blue); border-color: var(--blue); color: #fff; transform: scale(1.05); } .process-step h3 { font-size: 1.12rem; margin-bottom: 8px; } .process-step p { font-size: 0.92rem; color: var(--muted); margin: 0 auto; max-width: 26ch; } /* Dashed connector: the ::before is the rule, the glyph is its head, and margin-top lines the pair up with the middle of the 92px circle. */ .process-arrow { display: flex; align-items: center; color: #94a3b8; margin-top: 48px; flex: 0 0 auto; } .process-arrow::before { content: ""; width: 30px; border-top: 2px dashed #cbd5e1; } .process-arrow .icon { width: 20px; height: 20px; margin-left: -5px; } /* Strength */ /* Five across, as in the reference. The section got taller because each photo is now square instead of a short 4:3 crop — not because columns were cut. */ .strength-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; } .strength-card { transition: transform .3s ease; } .strength-card:hover { transform: translateY(-4px); } .strength-card img { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 1/1; object-fit: cover; margin-bottom: 18px; overflow: hidden; transition: box-shadow .3s ease; } .strength-card:hover img { box-shadow: var(--shadow-lg); } .strength-card h3 { font-size: 1.08rem; margin-bottom: 8px; } .strength-card p { font-size: 0.9rem; color: var(--muted); margin: 0; } /* CTA banner */ .cta-banner { background-image: linear-gradient(100deg, rgba(15,23,58,0.55), rgba(29,78,216,0.35)), url('/images/cta-bg.svg'); background-size: cover; background-position: center; background-color: var(--blue-dark); color: #fff; padding: 78px 0; } .cta-banner-inner { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } .cta-icon { width: 92px; height: 92px; border-radius: 50%; background: #fff; color: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cta-icon .icon { width: 44px; height: 44px; } .cta-copy { flex: 1 1 400px; } .cta-copy h2 { color: #fff; margin-bottom: 6px; } .cta-copy p { color: rgba(255,255,255,0.85); margin: 0; max-width: 60ch; font-size: 1.05rem; } /* Footer */ .site-footer { background: #0f172a; color: #cbd5e1; padding: 76px 0 0; } .footer-grid { display: grid; grid-template-columns: 1.55fr 1.25fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 48px; } .footer-col h4 { color: #fff; font-size: 1.02rem; margin-bottom: 20px; } .footer-col ul li { margin-bottom: 12px; } .footer-col a { color: #94a3b8; font-size: 0.92rem; } .footer-col a:hover { color: #fff; } .footer-about p { font-size: 0.9rem; color: #94a3b8; } /* Contact sits second, right after the brand block — it is the one thing a buyer scrolls to the footer looking for. Each row is a badge plus a labelled value, so "WhatsApp" and "Address" read as headings rather than guesswork. */ .footer-contact p { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; line-height: 1.5; } .fc-badge { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; color: #cbd5e1; } .fc-badge .icon { width: 1.25rem; height: 1.25rem; } .fc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .fc-body b { color: #fff; font-size: 0.92rem; font-weight: 600; } .fc-body span, .footer-contact a { color: #94a3b8; font-size: 0.88rem; word-break: break-word; } .footer-contact a:hover { color: #fff; } /* Two real bugs lived here. (1) `.footer-col a` is (0,1,1) and was beating a bare `.logo-footer` (0,1,0), so the footer wordmark had always been rendering at link size instead of logo size — scoping it to `.footer-col .logo-footer` (0,2,0) wins. (2) `.logo-secondary` is var(--ink) = #0f172a, which is exactly the footer background, so the "PACK" half of the wordmark was invisible down there. */ .footer-col .logo-footer { display: inline-block; font-size: 2rem; line-height: 1.15; margin-bottom: 18px; } .site-footer .logo-secondary { color: #ffffff; } .social-links { display: flex; gap: 10px; margin-top: 20px; } .social-links a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; } .social-links a:hover { background: var(--blue); } .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 20px var(--gutter); border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.82rem; } .footer-bottom-links { display: flex; gap: 18px; } .footer-bottom-links a:hover { color: #fff; } /* Breadcrumbs */ .breadcrumbs { background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 12px 0; font-size: 0.86rem; color: var(--muted); } .breadcrumbs a:hover { color: var(--blue); } .breadcrumbs .sep { margin: 0 6px; } /* Product detail */ .product-detail { padding: 40px 0 20px; } .product-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; } .pd-gallery-main { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 4/3; background: var(--bg-alt); cursor: zoom-in; } .pd-gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s cubic-bezier(.16,.8,.24,1), opacity .18s ease; will-change: transform; } .pd-gallery-main:hover img { transform: scale(1.5); } .pd-thumbs { display: flex; gap: 10px; margin-top: 12px; } .pd-thumbs img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; border: 2px solid var(--border); cursor: pointer; transition: border-color .2s ease, transform .2s ease; } .pd-thumbs img:hover { transform: translateY(-2px); } .pd-thumbs img.active { border-color: var(--blue); } /* Lightbox (opened from the product gallery main image) */ .lightbox-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.85); display: flex; align-items: center; justify-content: center; padding: 32px; z-index: 1000; opacity: 0; animation: lightboxIn .18s ease forwards; cursor: zoom-out; } .lightbox-overlay img { max-width: min(90vw, 900px); max-height: 85vh; border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,0.45); cursor: default; } .lightbox-close { position: absolute; top: 20px; right: 24px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.14); color: #fff; border: none; font-size: 1.2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .lightbox-close:hover { background: rgba(255,255,255,0.24); } @keyframes lightboxIn { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .lightbox-overlay { animation: none; opacity: 1; } } .pd-info h1 { margin-bottom: 10px; } .pd-specs { margin: 18px 0 22px; } .pd-specs li { display: flex; gap: 8px; font-size: 0.94rem; margin-bottom: 8px; } .pd-specs li strong { min-width: 110px; color: var(--ink); } .pd-ctas { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; } .trust-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 24px; background: var(--bg-alt); border-radius: var(--radius); margin: 32px 0; } .trust-badge { text-align: center; font-size: 0.82rem; color: var(--ink-soft); } .trust-badge .icon-wrap { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--blue); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; box-shadow: var(--shadow); } .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 40px 0 28px; overflow-x: auto; } .tab-btn { padding: 12px 18px; font-weight: 600; font-size: 0.92rem; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; } .tab-btn.active, .tab-btn:hover { color: var(--blue); border-bottom-color: var(--blue); } .tab-panel { display: none; } .tab-panel.active { display: block; } .spec-table { width: 100%; border-collapse: collapse; } .spec-table th, .spec-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 0.92rem; } .spec-table th { width: 200px; background: var(--bg-alt); color: var(--ink); font-weight: 600; } .custom-options-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 20px; } .option-card { text-align: center; padding: 20px 12px; border: 1px solid var(--border); border-radius: var(--radius); } .option-card .icon { width: 30px; height: 30px; color: var(--blue); margin-bottom: 10px; } .pd-apps-inquiry { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; margin-top: 10px; } .app-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .app-mini-grid img { border-radius: 8px; aspect-ratio: 1; object-fit: cover; } /* Forms */ .form-field { margin-bottom: 16px; } .form-field label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; color: var(--ink); } .form-field input, .form-field textarea, .form-field select { width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.94rem; font-family: inherit; background: #fff; color: var(--ink); } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); } .form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); } /* Was an inline style on the contact page. Inline styles outrank media queries, so the two-column split survived onto phones and pushed the form off the right edge; as a class it can collapse like everything else. */ .contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; } .form-note { font-size: 0.82rem; color: var(--muted); margin-top: 10px; } .form-success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; padding: 14px 16px; border-radius: 8px; margin-bottom: 16px; } .form-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 14px 16px; border-radius: 8px; margin-bottom: 16px; } /* Related products / news list */ .related-title { margin: 0 0 22px; } /* News */ .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .news-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .news-card-media img { aspect-ratio: 16/10; object-fit: cover; } .news-card-body { padding: 18px 20px; } .news-card-body time { font-size: 0.8rem; color: var(--muted); } .news-card-body h3 { margin: 6px 0 10px; font-size: 1.05rem; } .news-card-body p { font-size: 0.9rem; color: var(--muted); } .news-article { max-width: 780px; margin: 0 auto; padding: 40px 0 80px; } .news-article img.cover { border-radius: var(--radius-lg); margin-bottom: 24px; aspect-ratio: 16/9; object-fit: cover; } .news-article .meta { color: var(--muted); font-size: 0.88rem; margin-bottom: 10px; } .news-article .content { font-size: 1.02rem; } .news-article .content p { margin-bottom: 1.2em; } .tag-list { display: flex; gap: 8px; margin: 20px 0; flex-wrap: wrap; } .tag-list span { background: var(--blue-light); color: var(--blue); padding: 5px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; } /* Generic content page */ .page-header { background: var(--bg-alt); padding: 48px 0; text-align: center; border-bottom: 1px solid var(--border); } .page-header p { max-width: 60ch; margin: 0 auto; color: var(--muted); } .prose { max-width: 820px; margin: 0 auto; } .prose p { font-size: 1.02rem; } .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; text-align: center; } .stat-card { background: var(--bg-alt); border-radius: var(--radius); padding: 26px 12px; } .stat-card .value { font-size: 2rem; font-weight: 800; color: var(--blue); } .stat-card .label { font-size: 0.86rem; color: var(--muted); margin-top: 4px; } .cert-list { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 24px; } .cert-list span { background: #fff; border: 1px solid var(--border); padding: 10px 18px; border-radius: 8px; font-weight: 600; color: var(--ink); } /* Product filter bar */ .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; } .filter-chip { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); } .filter-chip.active, .filter-chip:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); } .empty-state { text-align: center; padding: 60px 20px; color: var(--muted); } /* Pagination */ .pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; } .pagination a, .pagination span { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); font-weight: 600; font-size: 0.88rem; } .pagination a:hover { border-color: var(--blue); color: var(--blue); } .pagination .current { background: var(--blue); color: #fff; border-color: var(--blue); } /* Reduced motion — disable all decorative animation added above; content remains fully visible and interactive, it just stops moving. */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .hero-copy > *, .hero-slide.is-active .hero-copy > * { animation: none !important; opacity: 1; transform: none; } /* Carousel still switches slides (JS honours reduced-motion by not auto-rotating), but the cross-fade itself is dropped. */ .hero-slide { transition: none; } .btn, .btn:hover, .btn:active { transform: none; } .product-card:hover, .feature-card:hover, .strength-card:hover, .application-tile:hover, .pd-thumbs img:hover, .pd-gallery-main:hover img { transform: none; } * { scroll-behavior: auto !important; } } /* Responsive */ @media (max-width: 1080px) { .products-grid { grid-template-columns: repeat(2, 1fr); } .feature-grid { grid-template-columns: repeat(2, 1fr); } /* two-up: restore the rule on every card, then clear it on whichever card starts a row, and add a horizontal rule above the second row. */ .feature-card:nth-child(4n + 1) { border-left: 1px solid var(--border); } .feature-card:nth-child(2n + 1) { border-left: none; } .feature-card:nth-child(n + 3) { border-top: 1px solid var(--border); padding-top: 34px; } .applications-grid { grid-template-columns: repeat(3, 1fr); } .strength-grid { grid-template-columns: repeat(3, 1fr); } .custom-options-grid { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: repeat(3, 1fr); } .news-grid { grid-template-columns: repeat(2, 1fr); } .stats-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1024px) { .main-nav, .header-actions .btn-primary { display: none; } .nav-toggle { display: inline-flex; } } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 28px; } .hero { aspect-ratio: auto; min-height: 440px; max-height: none; } .hero-slide { padding: 72px 0 80px; } .hero-nav { width: 38px; height: 38px; font-size: 1.4rem; opacity: 1; } .hero-prev { left: 8px; } .hero-next { right: 8px; } .product-detail-grid, .pd-apps-inquiry { grid-template-columns: 1fr; gap: 28px; } .trust-badges { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { /* Phones get the tighter rhythm back — the desktop sizes above are what the wide layout needs, not what a 390px screen needs. */ .section { padding: 56px 0; } .section-heading { margin-bottom: 36px; } .center-cta { margin-top: 32px; } .products-grid, .applications-grid, .strength-grid, .custom-options-grid, .news-grid { grid-template-columns: repeat(2, 1fr); } .product-card-body { padding: 16px 16px 20px; } .product-card-body h3 { font-size: 1rem; margin-bottom: 10px; } .spec-list li { font-size: 0.84rem; margin-bottom: 5px; } .application-tile span { padding: 14px 8px; font-size: 0.95rem; } .strength-card h3 { font-size: 1.02rem; } .strength-card p { font-size: 0.86rem; } .feature-grid, .stats-row { grid-template-columns: 1fr; } .feature-card { border-left: none; padding: 30px 8px; } .feature-card:nth-child(4n + 1), .feature-card:nth-child(2n + 1) { border-left: none; } .feature-card:nth-child(n + 2) { border-top: 1px solid var(--border); } .feature-card:first-child { border-top: none; } .feature-icon { width: 96px; height: 96px; } .feature-icon .icon { width: 52px; height: 52px; } .process-icon { width: 96px; height: 96px; } .process-icon .icon { width: 52px; height: 52px; } /* Link columns pair up rather than forming one long stack — five columns end to end is a lot of thumb-scrolling past the real content. */ .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; text-align: left; } .footer-about, .footer-contact { grid-column: 1 / -1; } .process-row { flex-direction: column; align-items: stretch; } .process-arrow { display: none; } .cta-banner { padding: 56px 0; } .cta-banner-inner { text-align: center; justify-content: center; } } /* ---- Admin ---- */ .admin-body { background: var(--bg-alt); min-height: 100vh; } .admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; } .admin-sidebar { background: #14181f; color: #cbd5e1; padding: 22px 0; } .admin-sidebar .logo { color: #fff; margin-bottom: 12px; display: block; padding: 0 20px; } .admin-sidebar nav { border-top: 1px solid rgba(255,255,255,0.06); } .admin-sidebar nav a { display: flex; align-items: center; gap: 12px; padding: 15px 20px; font-size: 0.92rem; color: #8b93a3; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.06); border-left: 3px solid transparent; transition: background .18s ease, color .18s ease, border-color .18s ease; } .admin-sidebar nav a:hover { background: rgba(255,255,255,0.04); color: #fff; } .admin-sidebar nav a.active { background: rgba(255,255,255,0.06); color: #fff; border-left-color: #d97757; } .admin-sidebar nav a .icon { flex-shrink: 0; width: 18px; height: 18px; transition: transform .18s ease; } .admin-sidebar nav a:hover .icon { transform: scale(1.1); } .admin-sidebar nav a .nav-label { display: flex; align-items: baseline; gap: 7px; } .admin-sidebar nav a .nav-label b { font-weight: 700; } .admin-sidebar nav a .nav-label-en { font-size: 0.78rem; color: #64748b; font-weight: 400; } .admin-sidebar nav a.active .nav-label-en { color: #94a3b8; } .admin-sidebar .logo, .admin-sidebar > div { padding-left: 20px; padding-right: 20px; } .admin-sidebar .nav-group { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; margin: 18px 0 6px; padding: 0 20px; } .admin-main { padding: 28px 32px 60px; max-width: 1200px; } .admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; } .admin-topbar h1 { margin: 0; font-size: 1.5rem; } .admin-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 22px; } .admin-card h2 { font-size: 1.05rem; margin-bottom: 16px; } .stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } .stat-tile { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; transition: box-shadow .2s ease, transform .2s ease; } .stat-tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .stat-tile .label { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .stat-tile .value { font-size: 1.8rem; font-weight: 800; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; } .stat-tile .delta { font-size: 0.78rem; margin-top: 4px; } .stat-tile .delta.up { color: #16a34a; } .stat-tile .delta.down { color: #dc2626; } .admin-table { width: 100%; border-collapse: collapse; } .admin-table th, .admin-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 0.88rem; } .admin-table th { color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; } .admin-table tr td { transition: background .15s ease; } .admin-table tr:hover td { background: var(--bg-alt); } .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; } .badge-green { background: #dcfce7; color: #166534; } .badge-gray { background: #f1f5f9; color: #475569; } .badge-blue { background: var(--blue-light); color: var(--blue); } .badge-amber { background: #fef3c7; color: #92400e; } .login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--blue-dark), var(--blue)); padding: 20px; } .login-card { background: #fff; border-radius: var(--radius-lg); padding: 40px 36px; width: 100%; max-width: 380px; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(14px) scale(.98); animation: loginCardIn .5s cubic-bezier(.16,.8,.24,1) forwards; } .login-card h1 { text-align: center; font-size: 1.3rem; } .login-card .logo { display: block; text-align: center; margin-bottom: 8px; font-size: 1.6rem; } @keyframes loginCardIn { to { opacity: 1; transform: translateY(0) scale(1); } } .admin-actions { display: flex; gap: 8px; } .admin-actions a, .admin-actions button { font-size: 0.8rem; padding: 6px 12px; } .section-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .section-tab { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: #fff; font-size: 0.84rem; font-weight: 600; color: var(--ink-soft); transition: all .18s ease; } .section-tab.active { background: var(--blue); color: #fff; border-color: var(--blue); } .repeater-item { border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; background: var(--bg-alt); transition: opacity .22s ease, transform .22s ease, max-height .22s ease; } .repeater-item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .repeater-item-head button { transition: background .15s ease, color .15s ease, border-color .15s ease; } .field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; } .chart-wrap { overflow-x: auto; } .chart-wrap svg rect { transition: fill-opacity .15s ease; } .chart-wrap svg rect:hover { fill-opacity: 1; } .ai-box { background: var(--blue-light); border: 1px dashed var(--blue); border-radius: 8px; padding: 16px; margin-bottom: 16px; } .helper-text { font-size: 0.8rem; color: var(--muted); margin-top: 4px; } .upload-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .upload-tile { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; transition: box-shadow .2s ease, transform .2s ease; } .upload-tile:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .upload-tile img { aspect-ratio: 1; object-fit: cover; } .upload-tile .path { font-size: 0.7rem; color: var(--muted); padding: 6px 8px; word-break: break-all; } /* Admin content entrance — cards/tiles settle in on page load, staggered by position so a dense dashboard doesn't feel like it "jumps" into place. */ .admin-main > *, .stat-tiles > *, .admin-card > table > tbody > tr, .upload-grid > * { animation: adminSettle .38s cubic-bezier(.16,.8,.24,1) both; } .admin-main > *:nth-child(1) { animation-delay: 0s; } .admin-main > *:nth-child(2) { animation-delay: .04s; } .admin-main > *:nth-child(3) { animation-delay: .08s; } .admin-main > *:nth-child(4) { animation-delay: .12s; } .admin-main > *:nth-child(n+5) { animation-delay: .16s; } .stat-tiles > *:nth-child(1) { animation-delay: .03s; } .stat-tiles > *:nth-child(2) { animation-delay: .07s; } .stat-tiles > *:nth-child(3) { animation-delay: .11s; } .stat-tiles > *:nth-child(4) { animation-delay: .15s; } @keyframes adminSettle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Flash banners (save confirmations, form errors) slide in at the top of the page */ .admin-main .form-success, .admin-main .form-error { animation: flashIn .3s cubic-bezier(.16,.8,.24,1) both; } @keyframes flashIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Repeater add/remove transition hooks (toggled via JS in admin.js) */ .repeater-item.is-leaving { opacity: 0; transform: scale(.97); } .repeater-item.is-entering { opacity: 0; transform: translateY(-6px); } /* Inline spinner for the AI-generate button's loading state */ .spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(29,78,216,0.25); border-top-color: var(--blue); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; margin-right: 6px; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .login-card { animation: none; opacity: 1; transform: none; } .admin-main > *, .stat-tiles > *, .admin-card > table > tbody > tr, .upload-grid > * { animation: none; opacity: 1; transform: none; } .admin-main .form-success, .admin-main .form-error { animation: none; opacity: 1; transform: none; } .admin-sidebar nav a:hover { transform: none; } .stat-tile:hover, .upload-tile:hover { transform: none; } .spinner { animation: none; border-top-color: rgba(29,78,216,0.25); } } /* ---- Mobile admin ---- Under 900px the sidebar becomes a fixed off-canvas drawer opened by the hamburger in .admin-mobile-bar. It used to be display:none, which left the admin with no navigation at all on a phone — you could log in and then go nowhere. */ .admin-mobile-bar { display: none; } .admin-backdrop { display: none; } @media (max-width: 900px) { .admin-mobile-bar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 120; background: #14181f; color: #fff; padding: 10px 14px; } .admin-mobile-title { font-size: 0.9rem; font-weight: 600; flex: 1; } .admin-mobile-title strong { color: var(--blue); } .admin-mobile-view { color: #94a3b8; font-size: 0.78rem; white-space: nowrap; } .admin-nav-toggle { width: 38px; height: 34px; flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 5px; background: transparent; border: 1px solid rgba(255,255,255,.25); border-radius: 7px; padding: 0 8px; cursor: pointer; } .admin-nav-toggle span { display: block; height: 2px; background: #fff; border-radius: 2px; } .admin-shell { grid-template-columns: 1fr; } /* The off-canvas drawer is translated off to the left but still counts toward document scrollWidth, which would let the whole admin scroll sideways on a phone. Clip it at the root. */ html:has(.admin-body), .admin-body { overflow-x: hidden; } .admin-sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 270px; z-index: 200; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(-100%); transition: transform .25s ease; padding: 18px 0 28px; } body.admin-nav-open .admin-sidebar { transform: none; } body.admin-nav-open { overflow: hidden; } .admin-backdrop { display: block; position: fixed; inset: 0; z-index: 150; background: rgba(3,7,18,.55); } .admin-backdrop[hidden] { display: none; } .admin-main { padding: 18px 14px 40px; } .admin-topbar { align-items: flex-start; } .admin-topbar h1 { font-size: 1.2rem; } .stat-tiles { grid-template-columns: repeat(2, 1fr); } /* Two-column layouts in the dashboard / forms stack on a phone */ .admin-main > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } .field-row { grid-template-columns: 1fr; } .admin-card { padding: 16px 14px; } /* Wide tables scroll inside their own container instead of the page */ .admin-card > .admin-table, .admin-card > table.admin-table { display: block; overflow-x: auto; white-space: nowrap; } .admin-actions { flex-wrap: wrap; } .image-field-row { flex-direction: column; align-items: stretch; } .image-upload-btn { justify-content: center; } .richtext-toolbar { gap: 3px; padding: 6px; } .rt-btn { min-width: 30px; height: 30px; padding: 0 6px; } .richtext-toolbar .rt-select { height: 30px; font-size: 0.74rem; } .richtext-editor { min-height: 200px; padding: 12px; } } /* Inline "upload from my computer" image widget — a text path input plus a real file-upload button, used on the hero/applications/products/news forms. The file input itself is visually hidden; the