/* ========================================================================== EURL RS FUTUR — Design System Style: Technical Minimalism (Industrial Precision) ========================================================================== */ /* Fonts are loaded from via (Google Fonts) for a faster first paint than a render-blocking @import would give. */ /* ------------------------------ Design tokens ---------------------------- */ :root{ /* Surfaces */ --surface:#f8f9fa; --surface-dim:#d9dadb; --surface-bright:#f8f9fa; --surface-lowest:#ffffff; --surface-low:#f3f4f5; --surface-container:#edeeef; --surface-high:#e7e8e9; --surface-highest:#e1e3e4; --border-subtle:#e2e4e7; --row-stripe:#f1f3f5; /* Text */ --on-surface:#191c1d; --on-surface-variant:#5d3f3c; --outline:#926f6b; --outline-variant:#e7bdb8; /* Inverse (dark sections: header, footer, hero, CTA bands) */ --inverse-surface:#22252a; --inverse-surface-2:#191c1d; --inverse-on-surface:#f0f1f2; --inverse-muted:#c6c6c9; /* Brand */ --primary:#ba0015; --primary-strong:#93000e; --primary-soft:#e21f26; --on-primary:#ffffff; --primary-accent:#ffb4ac; --secondary:#00786e; /* unified teal used across the whole site */ --secondary-strong:#00504a; --secondary-soft:#59dacd; --on-secondary:#ffffff; --secondary-container:#e3f7f4; --on-secondary-container:#004f48; --error:#ba1a1a; /* Radii */ --r-xs:2px; --r-sm:4px; --r-md:8px; --r-lg:12px; --r-pill:999px; /* Spacing rhythm */ --gutter:24px; --container-max:1280px; --section-y:clamp(64px, 9vw, 120px); --section-y-sm:clamp(48px, 7vw, 80px); /* Type */ --font-display:'Hanken Grotesk', 'Noto Sans Arabic', system-ui, sans-serif; --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --fs-headline-xl: clamp(2rem, 1.55rem + 2vw, 3rem); /* 32 -> 48 */ --fs-headline-lg: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); /* 24 -> 32 */ --fs-headline-md: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); /* 20 -> 24 */ --fs-body-lg: clamp(1rem, 0.96rem + 0.15vw, 1.125rem); --fs-body-md: 1rem; --fs-caption: 0.75rem; --fs-technical: 0.8125rem; /* Elevation */ --shadow-sm: 0 1px 2px rgba(25,28,29,0.06), 0 1px 1px rgba(25,28,29,0.04); --shadow-md: 0 10px 30px -10px rgba(0,32,29,0.14); --shadow-lg: 0 24px 48px -16px rgba(0,32,29,0.22); --ease: cubic-bezier(0.4,0,0.2,1); } /* --------------------------------- Reset --------------------------------- */ *, *::before, *::after{ box-sizing:border-box; } *{ margin:0; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } html, body{ height:100%; } body{ font-family:var(--font-display); font-size:var(--fs-body-md); line-height:1.5; color:var(--on-surface); background:var(--surface); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img, picture, svg{ display:block; max-width:100%; } img{ height:auto; } input, button, textarea, select{ font:inherit; color:inherit; } button{ cursor:pointer; background:none; border:none; } a{ color:inherit; text-decoration:none; } ul, ol{ list-style:none; padding:0; } h1,h2,h3,h4,h5,h6{ font-weight:600; line-height:1.2; } table{ border-collapse:collapse; width:100%; } ::selection{ background:var(--primary-soft); color:#fff; } [hidden]{ display:none !important; } .data-state{ text-align:center; color:var(--on-surface-variant); padding:64px 0; font-size:0.9375rem; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } } /* -------------------------------- Layout --------------------------------- */ .container{ width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:20px; } @media (min-width:768px){ .container{ padding-inline:40px; } } @media (min-width:1280px){ .container{ padding-inline:80px; } } .section{ padding-block:var(--section-y); } .section-tight{ padding-block:var(--section-y-sm); } .section--dark{ background:var(--inverse-surface); color:var(--inverse-on-surface); } .section-head{ display:flex; flex-direction:column; gap:16px; margin-bottom:clamp(32px,5vw,64px); } @media (min-width:860px){ .section-head--row{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:24px; } } .eyebrow{ font-family:var(--font-mono); font-size:var(--fs-technical); font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--secondary-soft); display:block; } .section--dark .eyebrow, .navbar .eyebrow{ color:var(--secondary-soft); } .eyebrow--light{ color:var(--secondary); } h1, .h1{ font-size:var(--fs-headline-xl); letter-spacing:-0.02em; font-weight:700; } h2, .h2{ font-size:var(--fs-headline-lg); letter-spacing:-0.01em; font-weight:600; } h3, .h3{ font-size:var(--fs-headline-md); font-weight:600; } .lede{ font-size:var(--fs-body-lg); line-height:1.6; color:var(--on-surface-variant); } .section--dark .lede{ color:var(--inverse-muted); } .mono{ font-family:var(--font-mono); letter-spacing:0.03em; } /* -------------------------------- Buttons --------------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 28px; border-radius:var(--r-sm); font-weight:600; font-size:0.9375rem; line-height:1; border:1px solid transparent; transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); white-space:nowrap; } .btn svg{ width:18px; height:18px; flex-shrink:0; } .btn--primary{ background:var(--primary); color:#fff; box-shadow:var(--shadow-sm); } .btn--primary:hover{ background:var(--primary-strong); box-shadow:var(--shadow-md); } .btn--outline{ border-color:var(--outline-variant); color:var(--inverse-on-surface); } .btn--outline:hover{ background:rgba(255,255,255,0.08); border-color:var(--inverse-on-surface); } .btn--outline-light{ border-color:var(--border-subtle); color:var(--on-surface); background:var(--surface-lowest); } .btn--outline-light:hover{ border-color:var(--secondary); color:var(--secondary); } .btn--dark{ background:var(--inverse-surface-2); color:#fff; } .btn--dark:hover{ background:#000; } .btn--teal{ background:var(--secondary); color:#fff; } .btn--teal:hover{ background:var(--secondary-strong); } .btn--sm{ padding:10px 20px; font-size:0.875rem; } .btn--block{ width:100%; } .btn:active{ transform:translateY(1px); } .btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--secondary); outline-offset:2px; } .link-arrow{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--primary); transition:gap .2s var(--ease), color .2s var(--ease); } .link-arrow svg{ width:18px; height:18px; transition:transform .2s var(--ease); } .link-arrow:hover{ gap:12px; color:var(--primary-strong); } /* -------------------------------- Navbar --------------------------------- */ .navbar{ position:sticky; top:0; z-index:100; background:var(--inverse-surface); border-bottom:1px solid rgba(255,255,255,0.08); } .navbar__inner{ display:flex; align-items:center; justify-content:space-between; height:88px; gap:16px; } .navbar__brand{ display:flex; align-items:center; flex-shrink:0; } .navbar__logo-img{ display:block; height:68px; width:auto; } .navbar__nav{ display:none; align-items:center; gap:36px; position:absolute; left:50%; transform:translateX(-50%); } .navbar__link{ color:var(--inverse-muted); font-size:0.9375rem; font-weight:500; padding-block:4px; border-bottom:2px solid transparent; transition:color .2s var(--ease), border-color .2s var(--ease); } .navbar__link:hover{ color:#fff; } .navbar__link.is-active{ color:var(--primary-accent); font-weight:700; border-color:var(--primary); } .navbar__actions{ display:flex; align-items:center; gap:12px; } .lang-switch{ position:relative; } .lang-switch__btn{ display:flex; align-items:center; gap:6px; color:var(--inverse-muted); padding:8px; border-radius:var(--r-sm); transition:color .2s var(--ease), background-color .2s var(--ease); } .lang-switch__btn svg{ width:20px; height:20px; } .lang-switch__btn:hover{ color:#fff; background:rgba(255,255,255,0.06); } .lang-switch__code{ font-family:var(--font-mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; } .lang-switch__chevron{ width:14px !important; height:14px !important; opacity:0.6; transition:transform .2s var(--ease); } .lang-switch.is-open .lang-switch__chevron{ transform:rotate(180deg); } .lang-switch__menu{ position:absolute; right:0; top:calc(100% + 8px); background:var(--surface-lowest); color:var(--on-surface); border:1px solid var(--border-subtle); border-radius:var(--r-sm); box-shadow:var(--shadow-lg); min-width:150px; padding:6px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; } .lang-switch.is-open .lang-switch__menu{ opacity:1; visibility:visible; transform:translateY(0); } .lang-switch__option{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; padding:9px 10px; border-radius:var(--r-xs); font-size:0.875rem; text-align:left; } .lang-switch__option:hover{ background:var(--surface-low); } .lang-switch__option.is-current{ color:var(--secondary); font-weight:600; } .lang-switch__option small{ font-family:var(--font-mono); opacity:0.55; } .navbar__cta{ display:none; } .navbar__toggle{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:8px; border-radius:var(--r-sm); } .navbar__toggle span{ display:block; width:100%; height:2px; background:#fff; border-radius:1px; transition:transform .25s var(--ease), opacity .25s var(--ease); } .navbar__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .navbar__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .navbar__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .navbar__mobile{ display:grid; grid-template-rows:0fr; background:var(--inverse-surface-2); transition:grid-template-rows .3s var(--ease); } .navbar__mobile.is-open{ grid-template-rows:1fr; } .navbar__mobile-inner{ overflow:hidden; } .navbar__mobile .container{ display:flex; flex-direction:column; padding-block:8px; } .navbar__mobile-link{ padding:16px 4px; font-size:1rem; font-weight:500; color:var(--inverse-muted); border-bottom:1px solid rgba(255,255,255,0.06); } .navbar__mobile-link.is-active{ color:var(--primary-accent); font-weight:700; } .navbar__mobile-cta{ margin:20px 4px; } .navbar__mobile-langs{ display:flex; gap:8px; padding:16px 4px 20px; } .navbar__mobile-langs button{ flex:1; padding:10px; border:1px solid rgba(255,255,255,0.14); border-radius:var(--r-sm); font-family:var(--font-mono); font-size:0.8125rem; color:var(--inverse-muted); } .navbar__mobile-langs button.is-current{ border-color:var(--secondary-soft); color:#fff; background:rgba(0,120,110,0.25); } @media (min-width:960px){ .navbar__nav{ display:flex; } .navbar__cta{ display:inline-flex; } .navbar__toggle{ display:none; } .navbar__mobile{ display:none; } } /* --------------------------------- Hero ----------------------------------- */ .hero{ position:relative; min-height:min(86vh, 720px); display:flex; align-items:center; background:var(--inverse-surface-2); color:#fff; overflow:hidden; } .hero__media{ position:absolute; inset:0; z-index:0; } .hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; opacity:0.75; } .hero__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(to bottom, var(--inverse-surface-2) 0%, rgba(25,28,29,0.88) 32%, rgba(25,28,29,0.4) 62%, rgba(25,28,29,0.2) 100%); } .hero__content{ position:relative; z-index:2; padding-block:120px 80px; } .hero__content .container{ max-width:100%; } .hero__text{ max-width:640px; } .hero__title{ margin-block:16px 20px; } .hero__title em{ font-style:normal; color:var(--primary-accent); } .hero__lede{ color:var(--surface-highest); max-width:520px; margin-bottom:36px; } .hero__actions{ display:flex; flex-wrap:wrap; gap:16px; } .hero__annotations{ position:absolute; inset:0; z-index:1; display:none; pointer-events:none; } .hero__annotation{ position:absolute; max-width:190px; } .hero__annotation-label{ display:block; font-family:var(--font-mono); font-size:0.75rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:#fff; margin-bottom:4px; } .hero__annotation-desc{ display:block; font-size:0.8125rem; line-height:1.45; color:var(--surface-highest); } .hero__annotation::before{ content:''; position:absolute; top:8px; width:38px; height:1px; background:rgba(255,255,255,0.4); } @media (min-width:960px){ .hero__media img{ opacity:0.9; object-position:right center; } .hero__scrim{ background:linear-gradient(100deg, var(--inverse-surface-2) 8%, rgba(25,28,29,0.86) 34%, rgba(25,28,29,0.15) 58%, rgba(25,28,29,0.05) 100%); } .hero__annotations{ display:block; } .hero__annotation{ text-align:left; } .hero__annotation::before{ left:-46px; } .hero__annotation--1{ top:20%; right:9%; } .hero__annotation--2{ top:46%; right:3%; } .hero__annotation--3{ top:74%; right:16%; } [dir="rtl"] .hero__media img{ object-position:right center; transform:scaleX(-1); } [dir="rtl"] .hero__scrim{ background:linear-gradient(260deg, var(--inverse-surface-2) 8%, rgba(25,28,29,0.86) 34%, rgba(25,28,29,0.15) 58%, rgba(25,28,29,0.05) 100%); } [dir="rtl"] .hero__annotation{ text-align:right; } [dir="rtl"] .hero__annotation::before{ left:auto; right:-46px; } [dir="rtl"] .hero__annotation--1{ right:auto; left:9%; } [dir="rtl"] .hero__annotation--2{ right:auto; left:3%; } [dir="rtl"] .hero__annotation--3{ right:auto; left:16%; } } .hero--page{ min-height:auto; padding-block:64px 0; background:transparent; color:var(--on-surface); } .hero--page .hero__scrim, .hero--page .hero__media{ display:none; } /* ------------------------------ Trust strip -------------------------------- */ .trust-strip{ background:var(--surface-lowest); border-bottom:1px solid var(--border-subtle); } .trust-strip .container{ display:flex; flex-wrap:wrap; gap:24px 40px; justify-content:space-between; align-items:center; padding-block:22px; } .trust-item{ display:flex; align-items:center; gap:10px; color:var(--on-surface-variant); font-size:0.875rem; font-weight:500; } .trust-item svg{ width:20px; height:20px; color:var(--secondary); flex-shrink:0; } /* -------------------------------- Bento grid -------------------------------- */ .bento{ display:grid; grid-template-columns:1fr; gap:var(--gutter); } .bento__main{ background:var(--surface-lowest); border:1px solid var(--border-subtle); border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column; transition:border-color .25s var(--ease), box-shadow .25s var(--ease); } .bento__main:hover{ border-color:var(--secondary); box-shadow:var(--shadow-md); } .bento__main-media{ height:260px; overflow:hidden; } .bento__main-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); } .bento__main:hover .bento__main-media img{ transform:scale(1.06); } .bento__main-body{ padding:32px; display:flex; flex-direction:column; flex:1; } .bento__meta{ display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; } .bento__side{ background:var(--surface-lowest); border:1px solid var(--border-subtle); border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column; transition:border-color .25s var(--ease), box-shadow .25s var(--ease); } .bento__side:hover{ border-color:var(--secondary); box-shadow:var(--shadow-md); } .bento__side-media{ height:180px; overflow:hidden; } .bento__side-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); } .bento__side:hover .bento__side-media img{ transform:scale(1.06); } .bento__side-body{ padding:24px; display:flex; flex-direction:column; flex:1; } @media (min-width:860px){ .bento{ grid-template-columns:repeat(12,1fr); } .bento__main{ grid-column:span 8; flex-direction:row; } .bento__main-media{ width:46%; height:auto; } .bento__main-body{ width:54%; justify-content:center; } .bento__side{ grid-column:span 4; } } /* -------------------------------- Badges ----------------------------------- */ .badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--fs-technical); font-weight:500; padding:5px 10px; border-radius:var(--r-xs); } .badge--filled{ background:rgba(0,120,110,0.1); color:var(--secondary); } .badge--outline{ border:1px solid var(--secondary); color:var(--secondary); background:transparent; } .badge--muted{ color:var(--on-surface-variant); font-family:var(--font-mono); } .badge--dark{ background:rgba(0,120,110,0.14); color:var(--secondary-soft); border:1px solid rgba(89,218,205,0.25); } .tag-row{ display:flex; flex-wrap:wrap; gap:8px; } /* -------------------------------- Quality section -------------------------------- */ .quality{ display:grid; gap:56px; align-items:center; } .quality__list{ display:flex; flex-direction:column; gap:32px; margin-top:40px; } .quality__item{ display:flex; gap:18px; } .quality__icon{ width:52px; height:52px; border-radius:var(--r-sm); flex-shrink:0; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; color:var(--secondary-soft); } .quality__icon svg{ width:24px; height:24px; } .quality__item h4{ color:#fff; margin-bottom:6px; font-size:1.0625rem; } .quality__media{ position:relative; border-radius:var(--r-md); overflow:hidden; border:1px solid rgba(255,255,255,0.12); aspect-ratio:4/5; } .quality__media img{ width:100%; height:100%; object-fit:cover; } .quality__media::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(25,28,29,0.55), transparent 45%); } @media (min-width:960px){ .quality{ grid-template-columns:1fr 1fr; gap:80px; } .quality__media{ aspect-ratio:auto; height:520px; } } /* -------------------------------- CTA band -------------------------------- */ .cta-band{ background:var(--primary); color:#fff; border-radius:var(--r-md); padding:clamp(32px,5vw,56px); display:flex; flex-direction:column; gap:24px; align-items:flex-start; } .cta-band h2{ color:#fff; } .cta-band p{ color:rgba(255,255,255,0.85); max-width:560px; } @media (min-width:860px){ .cta-band{ flex-direction:row; align-items:center; justify-content:space-between; gap:32px; } } /* -------------------------------- Footer ----------------------------------- */ .footer{ background:var(--inverse-surface-2); color:var(--inverse-muted); border-top:1px solid rgba(255,255,255,0.08); } .footer .container{ display:grid; gap:40px; padding-block:var(--section-y); grid-template-columns:1fr; } .footer__brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.125rem; color:#fff; margin-bottom:14px; } .footer__brand svg{ width:24px; height:24px; color:var(--primary); } .footer__tag{ font-size:0.9375rem; max-width:320px; line-height:1.6; } .footer__copy{ font-size:0.8125rem; margin-top:18px; opacity:0.7; } .footer h5{ color:#fff; font-size:0.8125rem; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:18px; font-weight:600; } .footer__links{ display:flex; flex-direction:column; gap:12px; } .footer__links a{ font-size:0.9375rem; transition:color .2s var(--ease); } .footer__links a:hover{ color:#fff; } .footer__contact{ display:flex; flex-direction:column; gap:10px; font-size:0.9375rem; } .footer__bottom{ border-top:1px solid rgba(255,255,255,0.08); padding-block:20px; } .footer__bottom .container{ padding-block:0; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; } .footer__bottom p{ font-size:0.8125rem; opacity:0.6; } .footer__bottom-text{ display:flex; flex-direction:column; gap:2px; } .footer__credit{ opacity:1 !important; } .footer__credit a{ color:var(--inverse-muted); text-decoration:underline; text-underline-offset:2px; transition:color .2s var(--ease); } .footer__credit a:hover{ color:#fff; } .footer__social{ display:flex; gap:10px; } .footer__social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.14); display:flex; align-items:center; justify-content:center; transition:all .2s var(--ease); } .footer__social a:hover{ background:var(--secondary); border-color:var(--secondary); color:#fff; } .footer__social svg{ width:18px; height:18px; } @media (min-width:640px){ .footer .container{ grid-template-columns:1fr 1fr; } } @media (min-width:960px){ .footer .container{ grid-template-columns:1.6fr 1fr 1fr; } } /* ================================ PAGE: CATALOGUE ================================ */ .catalogue-layout{ display:flex; flex-direction:column; gap:var(--gutter); align-items:flex-start; } .search-field{ position:relative; max-width:640px; margin-bottom:40px; } .search-field svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--outline); } .search-field input{ width:100%; height:56px; padding:0 16px 0 48px; background:var(--surface-lowest); border:1px solid var(--outline-variant); border-radius:var(--r-sm); box-shadow:var(--shadow-sm); transition:border-color .2s var(--ease), box-shadow .2s var(--ease); } .search-field input:focus{ border-color:var(--secondary); box-shadow:0 0 0 3px rgba(0,120,110,0.12); outline:none; } .filters{ width:100%; background:var(--surface-lowest); border:1px solid var(--border-subtle); border-radius:var(--r-sm); padding:24px; box-shadow:var(--shadow-sm); } .filters h3{ padding-bottom:16px; margin-bottom:20px; border-bottom:1px solid var(--surface-highest); } .filters__group + .filters__group{ margin-top:28px; } .filters__group h4{ font-size:0.875rem; font-weight:600; color:var(--on-surface-variant); margin-bottom:12px; } .filters__group ul{ display:flex; flex-direction:column; gap:10px; } .check{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:0.9375rem; } .check input{ width:18px; height:18px; accent-color:var(--secondary); border-radius:3px; flex-shrink:0; } .check span{ transition:color .15s var(--ease); } .check:hover span{ color:var(--secondary); } .filters__reset{ margin-top:24px; font-size:0.875rem; color:var(--secondary); font-weight:600; } .product-grid{ flex:1; width:100%; display:grid; grid-template-columns:1fr; gap:20px; } @media (min-width:640px){ .product-grid{ grid-template-columns:1fr 1fr; } } @media (min-width:1200px){ .product-grid{ grid-template-columns:repeat(3,1fr); } } .product-card{ position:relative; display:flex; flex-direction:column; height:100%; background:var(--surface-lowest); border:1px solid var(--border-subtle); border-radius:var(--r-sm); overflow:hidden; transition:border-color .25s var(--ease), box-shadow .25s var(--ease); } .product-card:hover{ border-color:var(--secondary); box-shadow:0 8px 24px rgba(0,120,110,0.1); } .product-card__media{ position:relative; height:200px; overflow:hidden; } .product-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); } .product-card:hover .product-card__media img{ transform:scale(1.06); } .product-card__overlay{ position:absolute; inset:0; background:rgba(25,28,29,0.6); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .25s var(--ease); } .product-card:hover .product-card__overlay{ opacity:1; } .product-card__overlay .btn{ transform:translateY(10px); transition:transform .25s var(--ease); } .product-card:hover .product-card__overlay .btn{ transform:translateY(0); } .product-card__body{ padding:20px; display:flex; flex-direction:column; flex:1; gap:8px; } .product-card__ref{ font-family:var(--font-mono); font-size:var(--fs-technical); color:var(--secondary); } .product-card__desc{ color:var(--on-surface-variant); font-size:0.9375rem; flex:1; } .catalogue-loadmore{ display:flex; justify-content:center; margin-top:56px; } @media (min-width:960px){ .catalogue-layout{ flex-direction:row; } .filters{ width:272px; flex-shrink:0; position:sticky; top:96px; } } /* ================================ PAGE: COMPARATEUR ================================ */ .compare-scroll{ overflow-x:auto; border-radius:var(--r-md); border:1px solid var(--border-subtle); box-shadow:var(--shadow-sm); -webkit-overflow-scrolling:touch; } .compare-table{ min-width:760px; background:var(--surface-lowest); } .compare-table thead th{ background:var(--secondary); color:#fff; text-align:left; padding:20px; vertical-align:top; min-width:230px; } .compare-table thead th:first-child{ min-width:200px; } .compare-table thead .compare-ref{ font-family:var(--font-mono); font-size:var(--fs-technical); color:var(--secondary-soft); margin-bottom:4px; } .compare-table thead .compare-name{ font-size:1.0625rem; font-weight:700; margin-bottom:16px; } .compare-table thead img{ width:100%; height:120px; object-fit:cover; border-radius:var(--r-sm); margin-bottom:16px; border:1px solid rgba(255,255,255,0.25); } .compare-table tbody td{ padding:18px 20px; border-bottom:1px solid var(--border-subtle); } .compare-table tbody tr:nth-child(even){ background:var(--row-stripe); } .compare-table tbody tr:hover{ background:var(--secondary-container); } .compare-table tbody tr:last-child td{ border-bottom:none; } .compare-table td:first-child{ font-weight:600; color:var(--on-surface-variant); } .compare-table td.mono{ color:var(--on-surface); } /* ================================ PAGE: CONTACT ================================ */ .contact-grid{ display:grid; grid-template-columns:1fr; gap:48px; align-items:start; } @media (min-width:960px){ .contact-grid{ grid-template-columns:1fr 1fr; gap:var(--gutter); } } .contact-form{ background:var(--surface-lowest); border:1px solid var(--border-subtle); border-radius:var(--r-md); padding:clamp(24px,4vw,40px); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:28px; } .form-row{ display:grid; grid-template-columns:1fr; gap:24px; } @media (min-width:560px){ .form-row{ grid-template-columns:1fr 1fr; } } .field label{ display:block; font-size:var(--fs-caption); font-weight:600; color:var(--on-surface-variant); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.04em; } .field input, .field textarea{ width:100%; border:none; border-bottom:1px solid var(--outline); background:transparent; padding:8px 2px; font-size:1rem; transition:border-color .2s var(--ease); } .field textarea{ resize:vertical; min-height:96px; } .field input:focus, .field textarea:focus{ outline:none; border-bottom:2px solid var(--secondary); padding-bottom:7px; } .field input::placeholder, .field textarea::placeholder{ color:var(--outline); opacity:0.8; } .field small.error{ display:none; color:var(--error); font-size:0.8125rem; margin-top:6px; } .field.has-error input, .field.has-error textarea{ border-bottom-color:var(--error); } .field.has-error small.error{ display:block; } .contact-info{ display:grid; grid-template-columns:1fr; gap:32px; padding-top:32px; margin-top:8px; border-top:1px solid var(--border-subtle); } @media (min-width:480px){ .contact-info{ grid-template-columns:1fr 1fr; } } .info-list{ display:flex; flex-direction:column; gap:16px; } .info-list li{ display:flex; align-items:flex-start; gap:12px; color:var(--on-surface-variant); } .info-list svg{ width:22px; height:22px; color:var(--secondary); flex-shrink:0; margin-top:2px; } .map-card{ position:relative; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border-subtle); box-shadow:var(--shadow-sm); height:340px; background:var(--surface-high); } .map-card img{ width:100%; height:100%; object-fit:cover; } .map-card__pin{ position:absolute; left:20px; bottom:20px; right:20px; max-width:260px; background:rgba(255,255,255,0.94); backdrop-filter:blur(8px); border:1px solid var(--border-subtle); border-radius:var(--r-sm); padding:14px 16px; box-shadow:var(--shadow-md); } @media (min-width:960px){ .map-card{ height:100%; min-height:600px; } } .success-banner{ display:none; align-items:center; gap:12px; background:var(--secondary-container); color:var(--on-secondary-container); border:1px solid rgba(0,120,110,0.25); border-radius:var(--r-sm); padding:14px 18px; font-size:0.9375rem; font-weight:500; } .success-banner.is-visible{ display:flex; } .success-banner svg{ width:20px; height:20px; flex-shrink:0; } .error-banner{ display:none; align-items:center; gap:12px; background:rgba(186,0,21,0.08); color:var(--primary-strong); border:1px solid rgba(186,0,21,0.25); border-radius:var(--r-sm); padding:14px 18px; font-size:0.9375rem; font-weight:500; } .error-banner.is-visible{ display:flex; } .error-banner svg{ width:20px; height:20px; flex-shrink:0; } /* ================================ PAGE: FICHE PRODUIT ================================ */ .breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:0.875rem; color:var(--outline); margin-bottom:28px; } .breadcrumb a:hover{ color:var(--secondary); } .breadcrumb svg{ width:16px; height:16px; opacity:0.6; } .breadcrumb .current{ color:var(--on-surface); font-weight:600; } .product-hero{ display:flex; flex-direction:column; gap:48px; align-items:flex-start; } @media (min-width:960px){ .product-hero{ flex-direction:row; gap:64px; } } .product-hero__main{ flex:1; min-width:0; } .product-hero__desc{ margin:24px 0 32px; max-width:720px; } .app-icons{ display:flex; flex-wrap:wrap; gap:28px; padding-bottom:36px; margin-bottom:32px; border-bottom:1px solid var(--border-subtle); } .app-icon{ display:flex; align-items:center; gap:12px; } .app-icon__circle{ width:42px; height:42px; border-radius:50%; background:var(--surface-high); color:var(--secondary); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .app-icon__circle svg{ width:20px; height:20px; } .app-icon span{ font-family:var(--font-mono); font-size:0.8125rem; letter-spacing:0.04em; } .product-hero__side{ width:100%; display:flex; flex-direction:column; gap:20px; flex-shrink:0; } @media (min-width:960px){ .product-hero__side{ width:380px; } } .product-visual{ background:#fff; border:1px solid var(--border-subtle); border-radius:var(--r-sm); padding:16px; box-shadow:var(--shadow-sm); } .product-visual__frame{ position:relative; aspect-ratio:1.22/1; border-radius:var(--r-xs); overflow:hidden; } .product-visual__frame img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); } .product-visual:hover img{ transform:scale(1.05); } .stock-box{ background:var(--surface-lowest); border:1px solid var(--border-subtle); border-top:3px solid var(--secondary); border-radius:var(--r-sm); padding:24px; box-shadow:var(--shadow-sm); } .stock-box h4{ display:flex; align-items:center; gap:10px; margin-bottom:18px; } .stock-box h4 svg{ width:20px; height:20px; color:var(--secondary); } .stock-row{ display:flex; justify-content:space-between; align-items:baseline; padding-block:12px; border-bottom:1px solid var(--border-subtle); } .stock-row:last-child{ border-bottom:none; padding-bottom:0; } .stock-row span:first-child{ color:var(--on-surface-variant); font-size:0.9375rem; } .stock-row strong{ font-family:var(--font-mono); font-size:1.0625rem; } .stock-row--total strong{ color:var(--secondary); font-size:1.25rem; } .spec-table{ background:var(--surface-lowest); border:1px solid var(--border-subtle); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-sm); margin-top:64px; } .spec-table__head{ display:grid; grid-template-columns:1fr 90px 60px 110px; gap:12px; background:var(--secondary); color:#fff; padding:16px 20px; font-size:0.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; } .spec-table__section{ background:var(--inverse-surface-2); color:#fff; padding:10px 20px; font-family:var(--font-mono); font-size:0.8125rem; letter-spacing:0.04em; opacity:0.95; } .spec-table__row{ display:grid; grid-template-columns:1fr 90px 60px 110px; gap:12px; align-items:center; padding:14px 20px; border-bottom:1px solid var(--row-stripe); transition:background-color .15s var(--ease); } .spec-table__row:hover{ background:var(--row-stripe); } .spec-table__row .label{ font-size:0.9375rem; } .spec-table__row .label small{ display:block; color:var(--on-surface-variant); font-size:0.8125rem; margin-top:4px; } .spec-table__row .value{ font-family:var(--font-mono); font-weight:700; color:var(--secondary); } .spec-table__row .unit{ font-family:var(--font-mono); color:var(--on-surface-variant); font-size:0.875rem; } .spec-table__row .norm{ text-align:right; } @media (max-width:640px){ .spec-table__head{ display:none; } .spec-table__row{ grid-template-columns:1fr 1fr; grid-template-areas:"label label" "value unit" "norm norm"; row-gap:6px; padding-block:16px; } .spec-table__row .label{ grid-area:label; } .spec-table__row .value{ grid-area:value; } .spec-table__row .unit{ grid-area:unit; text-align:right; } .spec-table__row .norm{ grid-area:norm; text-align:left; margin-top:4px; } } .related-products{ margin-top:var(--section-y); } /* -------------------------------- Misc utilities -------------------------------- */ .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .stack{ display:flex; flex-direction:column; } .center-text{ text-align:center; } .mt-0{ margin-top:0 !important; } .skip-link{ position:fixed; top:-100px; left:16px; z-index:200; background:#fff; color:var(--on-surface); padding:12px 20px; border-radius:var(--r-sm); box-shadow:var(--shadow-lg); transition:top .2s var(--ease); } .skip-link:focus{ top:16px; }