/* Theme Name: Alsarisi — Option O (Manufacturer-Grade) Description: Custom theme for شركة الساريسي لأنظمة وحلول الطباعة — printing machines & spare parts catalog. The client named the real Epson and Xerox sites (brands they represent) as references they like: a bold patterned hero, an icon category row right under it, and a dark feature banner with a real product photo bleeding to the edge — translated into the brand's own navy, never copying either manufacturer's color or marks. Author: Mohammad Version: 1.0 Text Domain: alsarisi */ :root { --bg: #f3f5f8; --surface: #ffffff; --surface-alt: #e8edf3; --border: #d7dee6; --text: #151b23; --text-soft: #5b6672; --accent: #124a85; --accent-strong: #0c3862; --accent-soft: rgba(18,74,133,0.10); --accent-text: #ffffff; --header-bg: #0c223e; --header-text: #eef2f7; --shadow: 0 12px 28px rgba(15,23,34,0.10); } * { box-sizing: border-box; } body { margin: 0; font-family: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif; background: var(--bg); color: var(--text); /* direction follows the attribute set per-language in header.php — do not hardcode it here, or it overrides English (LTR). */ /* the hero carousel breaks out to 100vw, which is a hair wider than the visible viewport once a scrollbar is present — clip that sliver instead of letting it force a horizontal scrollbar. */ overflow-x: hidden; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } .container { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Header */ .site-header-wrap { background: var(--header-bg); } .site-header { display: flex; align-items: center; justify-content: space-between; height: 92px; border-bottom: 1px solid rgba(255,255,255,0.06); } .brand { display: flex; align-items: center; gap: 14px; } .brand img, .brand .custom-logo { width: 58px; height: 58px; object-fit: contain; } .brand .custom-logo-link { display: flex; flex-shrink: 0; } .brand-text { display: flex; flex-direction: column; line-height: 1.2; } .brand-text .name { color: var(--header-text); font-weight: 800; font-size: 24px; } .brand-text .tag { color: #94a1b0; font-size: 14px; } .main-nav { display: flex; align-items: center; gap: 6px; } .main-nav a { color: #b9c2cc; font-size: 17px; font-weight: 600; padding: 9px 16px; border-radius: 9px; transition: background 0.15s ease, color 0.15s ease; } .main-nav a:hover { color: #ffffff; background: rgba(255,255,255,0.08); } .main-nav a.active { color: #ffffff; font-weight: 800; background: rgba(255,255,255,0.16); } .nav-toggle { display: none; background: none; border: none; padding: 6px; cursor: pointer; align-items: center; justify-content: center; } .btn { display: inline-block; font-weight: 700; border-radius: 9px; text-align: center; cursor: pointer; border: none; font-family: inherit; } .btn-accent { background: var(--accent); color: var(--accent-text); } .btn-accent:hover { filter: brightness(1.08); } .btn-outline { border: 1.5px solid var(--border); color: var(--text); background: transparent; } .btn-outline-light { border: 1.5px solid rgba(255,255,255,0.18); color: #f6f4ef; background: transparent; } .btn-sm { font-size: 13.5px; padding: 9px 16px; } .btn-md { font-size: 14px; padding: 11px 22px; } .btn-lg { font-size: 15px; padding: 15px 28px; } .btn-block { display: block; width: 100%; } /* Hero — a bold statement headline over the brand's own navy, carrying a geometric dot-grid texture (never a photo imitation) the way the real Epson/Xerox sites the client named commit to one saturated ground. */ .hero { padding: 110px 0 120px; position: relative; display: flex; align-items: center; gap: 50px; min-height: 600px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,0.10) 1.5px, transparent 1.5px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 45%, transparent 78%); mask-image: linear-gradient(115deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 45%, transparent 78%); } .hero > * { position: relative; z-index: 1; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: #fff; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 20px; margin-bottom: 22px; } .hero h1 { font-size: 52px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.18; margin: 0 0 24px; color: #f6f4ef; max-width: 640px; white-space: pre-line; } .hero p.lead { font-size: 17px; line-height: 1.9; color: #a8b2bf; margin: 0 0 38px; max-width: 480px; } .hero-ctas { display: flex; align-items: center; gap: 26px; } .btn-text-light { color: #fff; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; } .hero-graphic { flex: 1; position: relative; height: 320px; } .hero-tile { position: absolute; border-radius: 16px; box-shadow: 0 24px 48px rgba(0,0,0,0.4); } .hero-graphic-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(255,255,255,0.04); border: 2px dashed rgba(255,255,255,0.25); border-radius: 16px; } .hero-graphic-placeholder span { color: rgba(255,255,255,0.55); font-size: 13px; font-weight: 700; text-align: center; padding: 0 24px; } .hero-graphic-placeholder span.hint { color: rgba(255,255,255,0.35); font-size: 11.5px; font-weight: 500; } /* Photo-carousel hero: the image sets the banner's own height (via aspect-ratio, kept in sync with whichever slide is active), the text sits as an absolute overlay over its left 38%, and nothing else is added around the photo — no scrim, gradient or padding strip. */ .hero:has(.hero-carousel) { display: block; padding: 0; min-height: 0; overflow: visible; } .hero:has(.hero-carousel)::before { display: none; } .hero-carousel { position: relative; height: auto; flex: none; overflow: hidden; cursor: grab; touch-action: pan-y; aspect-ratio: var(--slide-ratio, 3 / 2); max-height: 620px; width: 100vw; margin-inline-start: calc(50% - 50vw); margin-inline-end: calc(50% - 50vw); } .hero-carousel.is-dragging { cursor: grabbing; } .hero-carousel::after { content: ""; position: absolute; z-index: 1; pointer-events: none; left: 0; top: 0; bottom: 0; width: 48%; background: linear-gradient(90deg, rgba(12,34,62,0.75) 0%, rgba(12,34,62,0.55) 55%, rgba(12,34,62,0) 100%); } .hero-carousel img { -webkit-user-drag: none; user-select: none; } .hero-slides-viewport { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-slide { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 0.7s ease; } .hero-slide.active { opacity: 1; } .hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; } /* Pinned to the physical left regardless of language: the photos themselves never mirror (real product shots with real logos on them), so the text zone has to stay over the same side of the image in Arabic and English — letting it flip to "inline-start" would slide Arabic text over the product instead of the empty side of the shot. */ .hero-text-overlay { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 38%; display: flex; flex-direction: column; justify-content: flex-start; padding: 70px 5% 40px; text-align: start; } .hero-text-overlay .hero-badge, .hero-text-overlay h1, .hero-text-overlay p.lead, .hero-text-overlay .hero-ctas { text-shadow: 0 2px 12px rgba(0,0,0,0.55); } .hero-text-overlay h1 { font-size: 40px; margin-bottom: 18px; } .hero-text-overlay p.lead { margin-bottom: 30px; } .hero-carousel-footer { position: absolute; z-index: 2; inset-inline: 0; bottom: 24px; display: flex; align-items: center; justify-content: center; gap: 14px; } .hero-carousel-dots { display: flex; align-items: center; gap: 4px; } .hero-carousel-dot { background: none; border: none; padding: 11px; margin: -11px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .hero-carousel-dot::before { content: ""; display: block; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.4); transition: background 0.25s ease, transform 0.25s ease; } .hero-carousel-dot:hover::before { background: rgba(255,255,255,0.65); } .hero-carousel-dot.active::before { background: #5ec8f0; transform: scale(1.15); } /* Hero quick-links — a slim dark bar right under the hero with a link into each broad product area, so visitors can jump in without scrolling. */ .hero-quicklinks { background: var(--surface); border-top: 1px solid var(--border); } .hero-quicklinks-row { display: flex; align-items: stretch; justify-content: center; } .hero-quicklinks-row a { flex: 1; text-align: center; padding: 34px 20px; color: var(--text); font-size: 15px; font-weight: 700; border-inline-end: 1px solid var(--border); transition: background 0.25s ease, color 0.25s ease; } .hero-quicklinks-row a:last-child { border-inline-end: none; } .hero-quicklinks-row a:hover { background: var(--accent-soft); color: var(--accent); } /* Category strip — an icon + label row right under the hero, the exact device from the reference sites, sitting above the richer tile section further down the page rather than replacing it. */ .cat-strip { background: var(--surface); border-bottom: 1px solid var(--border); } .cat-strip-grid { padding: 26px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; } .cat-strip-item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 10px 6px; border-radius: 10px; } .cat-strip-item:hover { background: var(--accent-soft); } .cat-strip-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; color: var(--accent); } .cat-strip-item span { font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.35; } /* Feature banner — a dark panel with a real photo bleeding to its edge and a bold headline beside it, the same device as the reference sites' own mid-page product feature. */ .feature-banner { background: var(--header-bg); border-radius: 20px; overflow: hidden; display: flex; align-items: stretch; min-height: 320px; position: relative; } .feature-banner-text { flex: 1; padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; } .feature-banner-text h2 { color: #fff; font-size: 28px; font-weight: 900; letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 16px; max-width: 13ch; } .feature-banner-text p { color: rgba(255,255,255,0.72); font-size: 15px; line-height: 1.85; margin: 0 0 26px; max-width: 40ch; } .feature-banner-media { flex: 1; position: relative; min-height: 260px; } .feature-banner-media img, .feature-banner-media video { width: 100%; height: 100%; object-fit: cover; display: block; } .feature-banner > .feature-banner-media:not(.feature-banner-media-placeholder) { position: absolute; inset: 0; flex: none; min-height: 0; } .feature-banner > .feature-banner-media:not(.feature-banner-media-placeholder)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--header-bg) 0%, rgba(12,34,62,0.88) 32%, rgba(12,34,62,0.45) 60%, rgba(12,34,62,0.05) 100%); } [dir="rtl"] .feature-banner > .feature-banner-media:not(.feature-banner-media-placeholder)::after { background: linear-gradient(270deg, var(--header-bg) 0%, rgba(12,34,62,0.88) 32%, rgba(12,34,62,0.45) 60%, rgba(12,34,62,0.05) 100%); } .feature-banner:has(> .feature-banner-media:not(.feature-banner-media-placeholder)) .feature-banner-text { position: relative; z-index: 1; flex: 1 1 100%; max-width: 480px; } /* Scroll-reveal + hover motion — small script-driven touches so sections and cards feel alive instead of a static mockup. */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.is-visible { opacity: 1; transform: none; } .reveal-stagger > * { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal-stagger.is-visible > * { opacity: 1; transform: none; } .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; } .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.18s; } .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.31s; } .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.44s; } .card { transition: transform 0.35s ease, box-shadow 0.35s ease; } .card:hover { transform: translateY(-6px); box-shadow: 0 20px 36px rgba(15,23,34,0.14); } .brand-photo img { transition: transform 0.5s ease; } .brand-col:hover .brand-photo img { transform: scale(1.05); } .brand-col .link { transition: gap 0.25s ease; } .brand-col:hover .link { gap: 10px; } .hero-ctas .btn { transition: transform 0.25s ease; } .hero-ctas .btn:hover { transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-stagger > *, .card, .brand-photo img, .brand-col .link, .hero-ctas .btn { transition: none !important; transform: none !important; opacity: 1 !important; } .hero-slide, .hero-carousel-dot::before { transition: none !important; } } /* Sections */ section.block { padding: 70px 0 20px; } .section-head { text-align: center; margin-bottom: 44px; } .section-head h2 { font-size: 30px; font-weight: 800; margin: 0 0 12px; } .section-head p { font-size: 15px; color: var(--text-soft); margin: 0; } /* Brand partners — an editorial layout (big headline + caption, then a photo-led column per manufacturer) instead of small uniform cards, matching the reseller-style brand pages the client pointed to as a reference. */ .brands-editorial-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 40px; } .brands-editorial-head h2 { font-size: 32px; font-weight: 900; line-height: 1.3; margin: 0; max-width: 14ch; } .brands-editorial-head p { font-size: 14px; color: var(--text-soft); margin: 0; text-align: end; max-width: 30ch; } .brands-editorial-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px; } .brand-col { display: flex; flex-direction: column; gap: 14px; } .brand-col-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .brand-col-head .wordmark { font-size: 22px; font-weight: 900; letter-spacing: -0.01em; color: var(--accent-strong); } .brand-col-head .wordmark-logo { height: 26px; width: auto; max-width: 130px; object-fit: contain; } .brand-col-head .brand-tag { font-size: 10.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 4px 10px; border-radius: 12px; white-space: nowrap; } .brand-photo { height: 220px; border-radius: 14px; overflow: hidden; background: var(--surface-alt); border-bottom: 3px solid var(--border); } .brand-photo img { width: 100%; height: 100%; object-fit: contain; display: block; } .brand-photo-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 2px dashed var(--border); background: transparent; } .brand-photo-placeholder span { font-size: 12px; font-weight: 700; color: var(--text-soft); text-align: center; padding: 0 20px; } .brand-col h3 { font-size: 17px; font-weight: 800; margin: 8px 0 0; } .brand-col p { font-size: 13.5px; color: var(--text-soft); line-height: 1.7; margin: 0; } .brand-col .link { font-size: 13px; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 6px; } .brands-cta { background: var(--header-bg); margin-top: 10px; } .brands-cta-row { padding: 26px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brands-cta-row span { color: #eef2f7; font-size: 15px; font-weight: 700; } .brands-cta-row a { color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; } /* Feature banner placeholder — an empty, obviously-a-placeholder slot so the client can drop in their own real machine photo without us sourcing one. */ .feature-banner-media-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(255,255,255,0.04); border: 2px dashed rgba(255,255,255,0.25); } .feature-banner-media-placeholder span { color: rgba(255,255,255,0.55); font-size: 13px; font-weight: 700; text-align: center; padding: 0 20px; } .feature-banner-media-placeholder span.hint { color: rgba(255,255,255,0.35); font-size: 11.5px; font-weight: 500; } .trust-bar { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .trust-grid { padding: 36px 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; text-align: center; } .trust-grid > div { border-inline-end: 1px solid var(--border); } .trust-grid > div:last-child { border-inline-end: none; } .trust-grid .num-wrap { display: flex; align-items: baseline; justify-content: center; gap: 5px; } .trust-grid .num { font-size: 18px; font-weight: 800; color: var(--accent); } .trust-grid .num-unit { font-size: 12px; font-weight: 700; color: var(--accent); } .trust-grid .label { font-size: 13px; color: var(--text-soft); margin-top: 4px; } .about-panel { position: relative; border-radius: 22px; overflow: hidden; padding: 56px; background: linear-gradient(120deg, var(--accent) 0%, var(--header-bg) 100%); } .about-panel h2 { color: #fff; font-size: 27px; font-weight: 800; margin: 0 0 16px; } .about-panel p { color: rgba(255,255,255,0.92); font-size: 15px; line-height: 1.95; margin: 0 0 24px; max-width: 640px; } /* About page: single minimal section — photo + intro, 3-point line, CTA */ .about-intro { background: #fff; border-radius: 20px; } .about-intro-grid { display: flex; gap: 48px; align-items: center; margin-bottom: 50px; } .about-intro-photo { flex: 1; min-width: 0; } .about-intro-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; display: block; } .about-intro-photo-placeholder { width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; background: var(--surface-alt); border: 1.5px dashed var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-soft); font-size: 13px; text-align: center; padding: 20px; } .about-intro-text { flex: 1; min-width: 0; } .about-intro-text h1 { color: var(--header-bg); font-size: 32px; font-weight: 800; margin: 0 0 16px; } .about-intro-text p { color: var(--text-soft); font-size: 15.5px; line-height: 1.9; margin: 0 0 22px; } .about-points { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-weight: 700; color: var(--header-bg); font-size: 15px; } .about-points .sep { color: var(--accent); } .about-cta { text-align: center; padding-top: 40px; border-top: 1px solid var(--border); } .about-cta h2 { color: var(--header-bg); font-size: 22px; font-weight: 800; margin: 0 0 20px; } /* About page: Vision/Mission/Values + Media Gallery */ .vmv-section { display: flex; gap: 32px; padding: 50px 40px; background: #fff; } .vmv-item { flex: 1; text-align: center; } .vmv-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .vmv-item h3 { color: var(--header-bg); font-size: 18px; font-weight: 800; margin: 0 0 10px; } .vmv-item p { color: var(--text-soft); font-size: 14px; line-height: 1.85; margin: 0 auto; max-width: 280px; } .about-gallery-section { padding: 10px 40px 50px; } .about-gallery-title { color: var(--header-bg); font-size: 22px; font-weight: 800; text-align: center; margin: 0 0 26px; } .about-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .about-gallery-item { aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; } .about-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px; margin-bottom: 34px; } .cat-tile { display: block; border-radius: 16px; overflow: hidden; background: var(--header-bg); } .cat-tile .img { height: 220px; display: flex; align-items: center; justify-content: center; } .cat-tile .body { padding: 22px 24px; border-top: 1px solid rgba(255,255,255,0.08); } .cat-tile h3 { color: #f6f4ef; font-size: 18px; font-weight: 800; margin: 0 0 8px; } .cat-tile p { color: #94a1b0; font-size: 13.5px; margin: 0; line-height: 1.8; } .why-us { background: var(--surface-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .why-grid { padding: 70px 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; } .why-item { text-align: center; padding: 0 8px; } .why-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .why-item h4 { font-size: 15.5px; font-weight: 700; margin: 0 0 8px; } .why-item p { font-size: 13.5px; color: var(--text-soft); line-height: 1.8; margin: 0; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); } .card .thumb { height: 150px; background: var(--surface-alt); display: flex; align-items: center; justify-content: center; } .card .body { padding: 20px; } .badge { font-size: 11.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 4px 10px; border-radius: 12px; } .card h4 { font-size: 16px; font-weight: 700; margin: 14px 0 8px; } .card p.desc { font-size: 13px; color: var(--text-soft); margin: 0 0 16px; line-height: 1.7; } .product-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; } .clients-band { background: var(--header-bg); } .clients-grid { padding: 70px 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; } .client-card { background: #f6f4ef; border-radius: 12px; height: 96px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #8b8477; font-size: 12.5px; font-weight: 600; } .cta-banner { border-radius: 20px; padding: 50px 56px; display: flex; align-items: center; justify-content: space-between; gap: 30px; background: var(--accent); } .cta-banner h3 { color: var(--accent-text); font-size: 24px; font-weight: 800; margin: 0 0 10px; } .cta-banner p { color: var(--accent-text); opacity: 0.85; font-size: 14.5px; margin: 0; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin: 20px 0; } .contact-card { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 16px; padding: 30px; display: flex; flex-direction: column; justify-content: center; gap: 16px; } .contact-row { display: flex; align-items: center; gap: 10px; font-size: 14px; } .contact-row a { color: var(--text); text-decoration: none; } .contact-row a:hover { color: var(--accent); } /* Contact page */ .contact-info-col { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; } .contact-form-col { flex: 1; min-width: 0; } .whatsapp-cta { display: flex; align-items: center; justify-content: center; gap: 10px; background: #25d366; color: #fff; font-weight: 800; font-size: 15.5px; padding: 16px; border-radius: 12px; text-decoration: none; } .whatsapp-cta:hover { filter: brightness(1.05); } .form-field select { width: 100%; padding: 13px; border: 1.5px solid var(--border); border-radius: 9px; font-size: 14px; font-family: inherit; background: var(--surface); color: var(--text); } /* FAQ — native
/, no JS needed */ .faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 22px; } .faq-item summary { cursor: pointer; font-weight: 700; font-size: 15px; list-style: none; display: flex; align-items: center; justify-content: space-between; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--accent); flex-shrink: 0; margin-inline-start: 12px; transition: transform 0.2s ease; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item p { font-size: 13.5px; color: var(--text-soft); line-height: 1.8; margin: 14px 0 0; } /* Floating social rail — pinned to the physical left edge regardless of page language, so it never mirrors under RTL (it's chrome, not content). */ .social-rail { position: fixed; z-index: 99; top: 50%; left: 0; transform: translateY(-50%); display: flex; flex-direction: column; direction: ltr; box-shadow: 0 10px 24px rgba(0,0,0,0.2); } .social-rail-item { display: flex; align-items: center; gap: 10px; height: 44px; width: 44px; padding: 0 13px; overflow: hidden; white-space: nowrap; transition: width 0.25s ease; } .social-rail-item svg { flex-shrink: 0; } .social-rail-item span { font-size: 13px; font-weight: 700; color: #fff; opacity: 0; transition: opacity 0.15s ease; } .social-rail-item:hover { width: 150px; } .social-rail-item:hover span { opacity: 1; } @media (prefers-reduced-motion: reduce) { .social-rail-item, .social-rail-item span { transition: none !important; } } /* AI chat widget — pinned to the physical right edge (opposite the social rail), so the two floating elements never collide on either page language. */ .ai-chat-widget { position: fixed; z-index: 100; right: 20px; bottom: 20px; } .ai-chat-bubble { width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; background: var(--accent); box-shadow: 0 10px 24px rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; } .ai-chat-panel { display: none; flex-direction: column; position: absolute; bottom: 68px; right: 0; width: 340px; height: 460px; max-height: 70vh; background: var(--surface); border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,0.28); border: 1px solid var(--border); } .ai-chat-widget.is-open .ai-chat-panel { display: flex; } .ai-chat-header { background: var(--header-bg); color: #fff; padding: 14px 18px; font-weight: 800; font-size: 14.5px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .ai-chat-close { background: none; border: none; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; opacity: 0.8; } .ai-chat-close:hover { opacity: 1; } .ai-chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .ai-msg { max-width: 82%; padding: 10px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.7; } .ai-msg-bot { align-self: flex-start; background: var(--surface-alt); color: var(--text); } .ai-msg-user { align-self: flex-end; background: var(--accent); color: #fff; } .ai-msg-typing { opacity: 0.6; font-style: italic; } .ai-chat-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); flex-shrink: 0; } .ai-chat-input { flex: 1; padding: 10px 13px; border: 1.5px solid var(--border); border-radius: 9px; font-size: 13.5px; font-family: inherit; background: var(--surface); color: var(--text); } .ai-chat-send { width: 38px; height: 38px; border-radius: 9px; border: none; cursor: pointer; flex-shrink: 0; background: var(--accent); display: flex; align-items: center; justify-content: center; } @media (max-width: 480px) { .ai-chat-widget { right: 14px; bottom: 14px; } .ai-chat-panel { width: calc(100vw - 28px); height: 65vh; } } /* Floating quote-cart bubble — stacked just above the AI chat bubble, same physical-right pinning so it never collides with either the chat widget or the social rail on the opposite side. */ .quote-cart-bubble { position: fixed; z-index: 100; right: 20px; bottom: 86px; width: 50px; height: 50px; border-radius: 50%; border: none; cursor: pointer; background: var(--header-bg); box-shadow: 0 10px 24px rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; } .quote-cart-badge { position: absolute; top: -4px; left: -4px; min-width: 20px; height: 20px; border-radius: 10px; background: #c99a2e; color: #fff; font-size: 11.5px; font-weight: 800; align-items: center; justify-content: center; display: none; padding: 0 5px; } @media (max-width: 480px) { .quote-cart-bubble { right: 14px; bottom: 78px; width: 46px; height: 46px; } } .quote-cart-item { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 10px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 12px; } .quote-cart-item-thumb { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--surface); flex-shrink: 0; } .quote-cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; } .quote-cart-item-name { flex: 1; font-weight: 700; font-size: 13.5px; } .quote-cart-item-qty { width: 70px; padding: 8px; border: 1.5px solid var(--border); border-radius: 8px; font-family: inherit; text-align: center; } .quote-cart-item-remove { background: none; border: none; color: var(--text-soft); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; } .quote-cart-item-remove:hover { color: #a63244; } /* Footer */ .site-footer { background: var(--header-bg); padding: 50px 0 28px; margin-top: 20px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; } .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .footer-brand img, .footer-brand .custom-logo { width: 34px; height: 34px; object-fit: contain; } .footer-brand .custom-logo-link { display: flex; flex-shrink: 0; } .footer-brand span { color: #eef2f7; font-weight: 800; font-size: 16px; } .site-footer h5 { color: #eef2f7; font-size: 14px; font-weight: 700; margin: 0 0 16px; } .footer-links { display: flex; flex-direction: column; gap: 11px; } .footer-links a, .footer-links span { color: #94a1b0; font-size: 13.5px; } .footer-bottom { max-width: 1200px; margin: 40px auto 0; padding: 20px 40px 0; border-top: 1px solid rgba(255,255,255,0.08); text-align: center; display: flex; flex-direction: column; gap: 6px; } .footer-bottom span { color: #66707c; font-size: 12.5px; } .footer-credit { opacity: 0.75; } .footer-credit a { color: #8a94a1; text-decoration: none; } .footer-credit a:hover { color: #ffffff; text-decoration: underline; } /* Breadcrumb */ .breadcrumb { font-size: 13px; color: var(--text-soft); padding: 24px 0 0; } .breadcrumb .sep { margin: 0 6px; } .breadcrumb .current { color: var(--text); font-weight: 700; } /* Products archive — this page gets the full page width instead of the 1200px centered .container, so it doesn't leave big empty gutters on wide screens; a fixed side gutter keeps it off the browser edge. */ .container.shop-container { max-width: 100%; padding-inline: 48px; } .product-grid.shop-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .products-layout { display: flex; gap: 32px; align-items: flex-start; padding-bottom: 100px; } .filters { width: 260px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 24px; } .filters h5 { font-size: 14px; font-weight: 800; margin: 0 0 14px; } .filter-group { display: flex; flex-direction: column; margin-bottom: 26px; } .filter-group label { display: flex; align-items: center; gap: 9px; font-size: 13.5px; padding: 6px 0; } .search-box { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 9px; padding: 11px 14px; margin-bottom: 26px; } .search-box input { border: none; background: transparent; font-family: inherit; font-size: 13.5px; outline: none; width: 100%; color: var(--text); } .search-box-wide { background: var(--surface); margin-bottom: 0; padding: 15px 20px; box-shadow: var(--shadow); } .search-box-wide input { font-size: 15px; } /* Product detail */ .product-main { display: flex; gap: 48px; align-items: flex-start; padding: 30px 0 20px; } .product-gallery-col { width: 460px; max-width: 100%; flex-shrink: 0; } .gallery-main { position: relative; height: 360px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; overflow: hidden; } .gallery-main img { width: 100%; height: 100%; object-fit: cover; } .gallery-zoom { position: absolute; top: 14px; inset-inline-end: 14px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); } .gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .gallery-thumbs img { height: 76px; width: 100%; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; } .specs-table { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .specs-table .row { display: flex; justify-content: space-between; padding: 14px 18px; font-size: 13.5px; } .specs-table .row:nth-child(odd) { background: rgba(0,0,0,0.015); } .specs-table .row .k { color: var(--text-soft); } .specs-table .row .v { font-weight: 700; } .ask-whatsapp { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #1c8a4a; } .product-tabs { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); margin-bottom: 26px; } .product-tabs-nav { display: flex; gap: 6px; } .product-tab-btn { background: none; border: none; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--text-soft); padding: 14px 6px; margin-inline-end: 22px; border-bottom: 2px solid transparent; cursor: pointer; } .product-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } .product-tabs-cta { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--accent); } .product-tab-panel { display: none; } .product-tab-panel.active { display: block; } /* Quote form */ .quote-form-wrap { max-width: 560px; margin: 0 auto; padding: 40px 20px 80px; } .product-mini { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; margin-bottom: 22px; } .form-field { margin-bottom: 16px; } .form-field label { font-size: 13px; font-weight: 700; display: block; margin-bottom: 7px; } .form-field input, .form-field textarea { width: 100%; padding: 13px; border: 1.5px solid var(--border); border-radius: 9px; font-size: 14px; font-family: inherit; background: var(--surface); color: var(--text); } .form-note { text-align: center; font-size: 11.5px; color: var(--text-soft); margin-top: 14px; } .form-success { background: #e7f6ec; border: 1px solid #b7e4c7; color: #256b3d; padding: 16px 20px; border-radius: 10px; font-size: 14px; margin-bottom: 20px; } .form-error { background: #fde8e8; border: 1px solid #f3b4b4; color: #8a2b2b; padding: 16px 20px; border-radius: 10px; font-size: 14px; margin-bottom: 20px; } /* The 38%-overlay layout needs real room to breathe; below this it starts crowding the headline into three lines, so switch to the stacked layout (image on top, text below) earlier than the rest of the page's own 900px breakpoint. */ @media (max-width: 1100px) { .hero-graphic.hero-carousel { display: block; height: auto; aspect-ratio: auto; } .hero-slides-viewport { position: relative; inset: auto; height: 260px; width: 100%; } .hero-text-overlay { position: relative; inset: auto; top: auto; bottom: auto; width: 100%; padding: 30px 4px 0; } .hero-text-overlay .hero-badge, .hero-text-overlay h1, .hero-text-overlay p.lead, .hero-text-overlay .hero-ctas { text-shadow: none; } .hero-text-overlay h1 { font-size: 32px; } } @media (max-width: 900px) { .container { padding: 0 18px; } .container.shop-container { padding-inline: 18px; } .nav-toggle { display: flex; } .main-nav { display: none; position: absolute; inset-inline: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 2px; background: var(--header-bg); padding: 12px 18px 20px; z-index: 50; box-shadow: 0 12px 24px rgba(0,0,0,0.2); } .main-nav.is-open { display: flex; } .main-nav a { text-align: center; padding: 13px 16px; } .site-header-wrap { position: relative; } /* On narrow screens a vertically-centered fixed rail inevitably drifts over whatever content is currently on screen as the page scrolls — anchor it to the bottom corner instead, like a typical mobile floating-action stack, so it stays out of the way. */ .social-rail { top: auto; bottom: 14px; left: 10px; transform: none; } .site-header { height: auto; min-height: 76px; padding: 10px 0; } .brand img, .brand .custom-logo { width: 46px; height: 46px; } .brand-text .name { font-size: 18px; } .brand-text .tag { font-size: 11.5px; } .hero { flex-direction: column; padding: 40px 0 50px; min-height: 0; } .hero-graphic { display: none; } .hero h1 { font-size: 30px; } .hero-slides-viewport { height: 220px; } .hero-text-overlay h1 { font-size: 28px; } .trust-grid, .why-grid, .clients-grid, .cat-grid, .contact-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .brands-editorial-head { flex-direction: column; align-items: flex-start; gap: 12px; } .brands-editorial-head p { text-align: start; max-width: none; } .brands-editorial-grid { grid-template-columns: 1fr; gap: 30px; } /* Stacked to one column, each 220px photo would triple the section's scroll height on a phone — shrink it so the section stays proportional. */ .brand-photo { height: 150px; } .product-grid { grid-template-columns: 1fr; } .products-layout { flex-direction: column; } .filters { width: 100%; } .product-main { flex-direction: column; } .contact-page-row { flex-direction: column; } .about-intro-grid { flex-direction: column; } .vmv-section { flex-direction: column; gap: 34px; padding: 40px 18px; } .about-gallery-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr; } .cta-banner { flex-direction: column; text-align: center; } .cat-strip-grid { grid-template-columns: repeat(3, 1fr); } .feature-banner { flex-direction: column; } .feature-banner-text { padding: 34px 24px; } .feature-banner-media { min-height: 200px; } } /* Product archive: list/grid toggle + applied-filters chips + sort (added across all options) */ .product-grid.is-list { grid-template-columns: 1fr; gap: 14px; } .product-grid.is-list .card { display: flex; align-items: stretch; } .product-grid.is-list .card .thumb { width: 140px; height: auto; flex-shrink: 0; } .product-grid.is-list .card .body { flex: 1; display: flex; flex-direction: column; justify-content: center; } .applied-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .applied-filters-label { font-size: 13px; font-weight: 700; color: var(--text-soft); } .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; } .chip span { font-size: 14px; line-height: 1; } .applied-filters-clear { font-size: 12.5px; font-weight: 700; color: var(--text-soft); text-decoration: underline; } .view-toggle { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .view-toggle-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--text-soft); border: none; cursor: pointer; } .view-toggle-btn.active { background: var(--accent); color: #fff; }