/* * Frontend-Stylesheet – Lackwerk Heller * Übernommen aus dem freigegebenen Mockup (v8.1), erweitert um: * - Linke Hover/Klick-Navigationsleiste für Desktop (vorher: einfache * Top-Nav) – finale Entscheidung aus dem Umsetzungsgespräch * - Echte -Kacheln in der Galerie statt Farbverlauf-Platzhaltern * Die Farben (--c-red, --c-ink, --c-bg) werden per kleinem Inline-Style * im aus den Backend-Einstellungen überschrieben (siehe * lh_render_color_variables() in includes/lh-frontend.php). */ :root{ --c-bg:#FAFAF7; --c-bg-alt:#F0EEE8; --c-ink:#141414; --c-ink-soft:#2A2A2A; --c-red:#D6272B; --c-red-deep:#8F1417; --c-white:#FFFFFF; --c-gray:#6B6B66; --c-line:rgba(20,20,20,0.10); --font-display:'Bebas Neue', sans-serif; --font-body:'Inter', sans-serif; --font-mono:'Roboto Mono', monospace; --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2.25rem; --space-5:3.5rem; --space-6:5.5rem; --radius-sm:4px; --radius-md:10px; --shadow-md:0 16px 40px rgba(20,20,20,0.14); --shadow-sm:0 4px 14px rgba(20,20,20,0.10); --ease:cubic-bezier(.22,.68,.35,1); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body.lh-body{ margin:0; font-family:var(--font-body); color:var(--c-ink); background:var(--c-bg); -webkit-font-smoothing:antialiased; overflow-x:hidden; } .lh-body img,.lh-body svg{ display:block; max-width:100%; } .lh-body a{ color:inherit; text-decoration:none; } .lh-body h1,.lh-body h2,.lh-body h3{ font-family:var(--font-display); letter-spacing:.02em; line-height:1; margin:0; } .lh-body p{ margin:0; } .lh-body ul{ margin:0; padding:0; list-style:none; } .lh-body button{ font-family:inherit; cursor:pointer; } .skip-link{ position:absolute; left:-999px; top:0; background:var(--c-red); color:var(--c-white); padding:.75rem 1.25rem; z-index:1000; border-radius:0 0 var(--radius-sm) 0; font-weight:600; } .skip-link:focus{ left:0; } .lh-body :focus-visible{ outline:3px solid var(--c-red); outline-offset:3px; } .container{ width:100%; max-width:1180px; margin:0 auto; padding:0 var(--space-2); } @media(min-width:640px){ .container{ padding:0 var(--space-3); } } .eyebrow{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--c-red); font-weight:500; display:inline-flex; align-items:center; gap:.5rem; min-height:1.4em; } .eyebrow::before{ content:""; width:18px; height:2px; background:var(--c-red); display:inline-block; flex-shrink:0; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem 1.6rem; font-weight:600; font-size:.95rem; border-radius:var(--radius-sm); border:2px solid transparent; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); white-space:nowrap; } .btn--primary{ background:var(--c-red); color:var(--c-white); box-shadow:var(--shadow-sm); } .btn--primary:hover{ background:var(--c-red-deep); transform:translateY(-2px); box-shadow:var(--shadow-md); } .btn--outline{ border-color:var(--c-ink); color:var(--c-ink); } .btn--outline:hover{ background:var(--c-ink); color:var(--c-white); transform:translateY(-2px); } .btn--ghost-invert{ border-color:rgba(255,255,255,.7); color:var(--c-white); } .btn--ghost-invert:hover{ background:var(--c-white); color:var(--c-ink); } /* Signature: Spritzstreifen */ .spray-divider{ position:relative; height:7px; margin:0 auto; background:linear-gradient(100deg, transparent 0%, var(--c-red) 12%, var(--c-ink) 50%, var(--c-red) 88%, transparent 100%); transform:rotate(-1.1deg); width:104%; margin-left:-2%; box-shadow:0 6px 18px -6px rgba(214,39,43,.55); } .spray-divider::before,.spray-divider::after{ content:""; position:absolute; top:50%; width:10px; height:10px; border-radius:50%; background:radial-gradient(circle, var(--c-red) 0%, transparent 72%); transform:translateY(-50%); } .spray-divider::before{ left:6%; opacity:.7; } .spray-divider::after{ right:9%; width:6px; height:6px; opacity:.5; } /* ---- Navigation: Desktop (horizontal im Header, wie ursprünglich getestet) ---- */ .nav-desktop{ display:none; align-items:center; gap:var(--space-4); } .nav-desktop a{ font-weight:600; font-size:.9rem; position:relative; padding:.3rem 0; } .nav-desktop a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--c-red); transition:width .25s var(--ease); } .nav-desktop a:hover::after{ width:100%; } @media(min-width:900px){ .nav-desktop{ display:flex; } } /* ---- Header (Logo + Nav + Aktionen; volle Breite, keine seitliche Leiste) ---- */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:500; display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:1.1rem var(--space-2); transition:background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease); } .site-header.is-scrolled{ background:rgba(250,250,247,.92); backdrop-filter:blur(10px); box-shadow:0 2px 18px rgba(20,20,20,.08); padding:.7rem var(--space-2); } .logo{ display:flex; align-items:center; gap:.6rem; line-height:1; flex-shrink:0; } .logo img{ max-height:34px; width:auto; } .logo .name{ font-family:var(--font-display); font-size:1.6rem; letter-spacing:.03em; color:var(--c-ink); } .header-actions{ display:flex; align-items:center; gap:.7rem; } .call-link{ display:none; align-items:center; gap:.45rem; font-family:var(--font-mono); font-size:.82rem; font-weight:500; } .call-link svg{ width:16px; height:16px; fill:var(--c-red); } .btn--header{ display:none; padding:.65rem 1.1rem; font-size:.85rem; } @media(min-width:900px){ .call-link{ display:flex; } .btn--header{ display:inline-flex; } } .burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:42px; height:42px; border:2px solid var(--c-ink); border-radius:var(--radius-sm); background:transparent; padding:0; align-items:center; } .burger span{ width:18px; height:2px; background:var(--c-ink); transition:transform .3s var(--ease), opacity .3s var(--ease); } .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .nav-mobile{ position:fixed; inset:0; background:var(--c-ink); color:var(--c-white); z-index:495; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-3); transform:translateX(100%); transition:transform .4s var(--ease); } .nav-mobile.is-open{ transform:translateX(0); } .nav-mobile a{ font-family:var(--font-display); font-size:2.1rem; letter-spacing:.04em; } .nav-mobile a:hover{ color:var(--c-red); } .nav-mobile .call-link{ display:flex; color:var(--c-white); margin-top:var(--space-3); } .nav-mobile .call-link svg{ fill:var(--c-red); } @media(min-width:900px){ .burger{ display:none; } } /* Hero */ .hero{ position:relative; min-height:100svh; overflow:hidden; } .hero-inner{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:calc(var(--space-6) + 2rem) 0 var(--space-5); transform:translateY(100%); } .hero-slide{ position:absolute; inset:0; opacity:0; overflow:hidden; transition:opacity 1.4s ease-in-out; } .hero-slide.is-active{ opacity:1; } .hero-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform 6.5s linear; } .hero-slide.is-active img{ transform:scale(1.08); } .hero-slide::after{ content:""; position:absolute; inset:0; background:rgba(15,15,15,.32); } .hero-slide .cap{ position:absolute; left:var(--space-2); bottom:var(--space-2); z-index:1; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.28); padding:.3rem .6rem; border-radius:var(--radius-sm); } .hero-inner::before{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.24) 45%, rgba(0,0,0,.46) 100%); z-index:1; } .hero-content{ position:relative; z-index:2; color:var(--c-white); width:100%; } .hero-content .eyebrow{ color:#ffb3b3; } .hero-content .eyebrow::before{ background:#ffb3b3; } .hero h1{ font-size:clamp(3rem, 11vw, 6.5rem); color:var(--c-white); margin-top:var(--space-1); min-height:1.05em; } .hero h1 .accent{ color:var(--c-red); } .hero-sub{ max-width:34ch; font-size:1.05rem; color:rgba(255,255,255,.85); margin-top:var(--space-2); line-height:1.5; min-height:1.6em; } .hero-actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3); opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); } .hero-actions.is-visible{ opacity:1; transform:translateY(0); } .type-cursor{ display:inline-block; width:3px; height:.9em; background:currentColor; margin-left:2px; vertical-align:-0.08em; animation:blink 1s step-start infinite; } .type-cursor.is-done{ animation:none; opacity:0; transition:opacity .5s ease; } @keyframes blink{ 50%{ opacity:0; } } .paint-drip{ display:flex; gap:10px; margin-top:var(--space-2); height:34px; } .paint-drip span{ display:block; width:8px; background:var(--c-red); border-radius:0 0 8px 8px; transform-origin:top; transform:scaleY(0); } .paint-drip.is-triggered span{ animation:drip .7s var(--ease) forwards; } .paint-drip.is-triggered span:nth-child(1){ height:34px; animation-delay:0s; } .paint-drip.is-triggered span:nth-child(2){ height:20px; animation-delay:.15s; } .paint-drip.is-triggered span:nth-child(3){ height:28px; animation-delay:.3s; } .paint-drip.is-triggered span:nth-child(4){ height:14px; animation-delay:.45s; } .paint-drip span:nth-child(1){ height:34px; } .paint-drip span:nth-child(2){ height:20px; } .paint-drip span:nth-child(3){ height:28px; } .paint-drip span:nth-child(4){ height:14px; } @keyframes drip{ to{ transform:scaleY(1); } } .scroll-cue{ position:absolute; right:var(--space-2); bottom:var(--space-2); z-index:2; display:none; flex-direction:column; align-items:center; gap:.4rem; color:rgba(255,255,255,.7); } .scroll-cue span{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.2em; writing-mode:vertical-rl; } .scroll-cue .line{ width:1px; height:44px; background:rgba(255,255,255,.4); overflow:hidden; position:relative; } .scroll-cue .line::after{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--c-red); animation:cue 1.8s ease-in-out infinite; } @keyframes cue{ 50%{ top:100%; } 100%{ top:100%; } } @media(min-width:900px){ .scroll-cue{ display:flex; } } .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .reveal.is-visible{ opacity:1; transform:translateY(0); } .section{ padding:var(--space-6) 0; position:relative; } .section--alt{ background:var(--c-bg-alt); } .section-head{ max-width:640px; margin-bottom:var(--space-4); } .section-head h2{ font-size:clamp(2.2rem,5vw,3.4rem); margin-top:.5rem; } .rating-summary{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-bottom:var(--space-4); font-family:var(--font-mono); } .rating-summary .score{ font-family:var(--font-display); font-size:3rem; color:var(--c-red); } .stars{ display:flex; gap:3px; } .stars svg{ width:20px; height:20px; fill:var(--c-red); } .rating-summary small{ color:var(--c-gray); font-size:.8rem; display:block; } .review-grid{ display:grid; gap:var(--space-3); grid-template-columns:1fr; } @media(min-width:760px){ .review-grid{ grid-template-columns:repeat(3,1fr); } } .review-card{ background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--radius-md); padding:var(--space-3); box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .review-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); } .review-card .stars{ margin-bottom:var(--space-2); } .review-card p{ font-size:.95rem; line-height:1.55; color:var(--c-ink-soft); } .review-card footer{ margin-top:var(--space-2); font-family:var(--font-mono); font-size:.75rem; color:var(--c-gray); } .google-link{ margin-top:var(--space-4); display:inline-flex; align-items:center; gap:.6rem; font-weight:700; } .google-link svg{ width:20px; height:20px; } .lh-google-hinweis{ font-size:.85rem; color:var(--c-gray); background:var(--c-white); border:1px dashed var(--c-line); padding:var(--space-2); border-radius:var(--radius-sm); } .cat-filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:var(--space-4); } .chip{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; padding:.4rem .8rem; border:1px solid var(--c-line); border-radius:var(--radius-sm); background:var(--c-white); color:var(--c-gray); transition:all .2s var(--ease); } .chip[aria-pressed="true"]{ background:var(--c-red); border-color:var(--c-red); color:var(--c-white); } .lh-empty-state{ color:var(--c-gray); font-size:.95rem; padding:var(--space-3) 0; } .gallery-grid{ display:grid; gap:var(--space-2); grid-template-columns:repeat(2,1fr); } @media(min-width:640px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } } .gallery-tile{ position:relative; aspect-ratio:4/5; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease); background:var(--c-bg-alt); display:block; width:100%; padding:0; border:none; font:inherit; cursor:pointer; text-align:left; } .gallery-tile:hover{ transform:translateY(-6px) scale(1.01); box-shadow:var(--shadow-md); } .gallery-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .gallery-tile .tag{ position:absolute; top:.6rem; left:.6rem; background:rgba(20,20,20,.75); color:var(--c-white); font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; padding:.3rem .55rem; border-radius:var(--radius-sm); } .gallery-tile .cap{ position:absolute; left:.6rem; bottom:.6rem; right:.6rem; color:var(--c-white); font-weight:700; font-size:.85rem; } .gallery-tile[hidden]{ display:none; } /* Vorher-Nachher-Regler (wird jetzt im Referenz-Detail-Popup verwendet) */ .ba-slider{ position:relative; aspect-ratio:16/10; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); background:var(--c-bg-alt); margin-bottom:var(--space-2); } .ba-before,.ba-after{ position:absolute; inset:0; } .ba-before img,.ba-after img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .ba-after{ clip-path:inset(0 50% 0 0); } .ba-label{ position:absolute; top:.8rem; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; background:rgba(255,255,255,.85); color:var(--c-ink); padding:.3rem .6rem; border-radius:var(--radius-sm); z-index:2; } .ba-before .ba-label{ left:.8rem; } .ba-after .ba-label{ right:.8rem; background:rgba(20,20,20,.8); color:var(--c-white); } .ba-handle{ position:absolute; top:0; bottom:0; width:2px; background:var(--c-white); left:50%; transform:translateX(-1px); pointer-events:none; box-shadow:0 0 0 1px rgba(0,0,0,.2); z-index:2; } .ba-handle::after{ content:"⇔"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:38px; background:var(--c-red); color:var(--c-white); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; box-shadow:var(--shadow-sm); } .ba-range{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; z-index:3; } /* Einfache Foto-Reihe im Referenz-Detail-Popup (Galerie-/Einzelbild-Modus) */ .lh-detail-fotos{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:var(--space-2); } .lh-detail-fotos img{ width:100%; height:auto; border-radius:var(--radius-sm); display:block; } .lh-detail-text{ font-size:.92rem; line-height:1.6; color:var(--c-ink-soft); } /* Unsere Leistungen */ .leistungen-grid{ display:grid; gap:var(--space-3); grid-template-columns:1fr; } @media(min-width:640px){ .leistungen-grid{ grid-template-columns:repeat(2,1fr); } } @media(min-width:960px){ .leistungen-grid{ grid-template-columns:repeat(3,1fr); } } .leistung-card{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--radius-md); overflow:hidden; padding:0; font:inherit; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .leistung-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); } .leistung-card-bild{ width:100%; aspect-ratio:16/10; background:var(--c-bg-alt); display:block; } .leistung-card-bild img{ width:100%; height:100%; object-fit:cover; display:block; } .leistung-card-titel{ font-family:var(--font-display); font-size:1.3rem; letter-spacing:.02em; padding:1rem 1rem 0; color:var(--c-ink); } .leistung-card-text{ font-size:.9rem; line-height:1.5; color:var(--c-gray); padding:.4rem 1rem 1.2rem; } .lh-leistung-detail-bild{ width:100%; height:auto; border-radius:var(--radius-sm); display:block; margin-bottom:var(--space-2); } .site-footer{ background:var(--c-ink); color:rgba(255,255,255,.85); padding:var(--space-5) 0 var(--space-3); } .footer-grid{ display:grid; gap:var(--space-4); grid-template-columns:1fr; } @media(min-width:760px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr; } } .site-footer h3{ font-size:1.1rem; color:var(--c-white); margin-bottom:var(--space-2); letter-spacing:.04em; } .footer-logo{ font-family:var(--font-display); font-size:1.8rem; color:var(--c-white); display:inline-flex; align-items:center; gap:.6rem; } .footer-logo img{ max-height:32px; width:auto; } .footer-col address{ font-style:normal; line-height:1.7; font-size:.9rem; } .hours-table{ width:100%; font-size:.9rem; } .hours-table td{ padding:.3rem 0; border-bottom:1px solid rgba(255,255,255,.08); } .hours-table td:last-child{ text-align:right; font-family:var(--font-mono); color:var(--c-white); } .footer-links li{ margin-bottom:.5rem; font-size:.9rem; } .footer-links a:hover{ color:var(--c-red); } .lh-legal-link{ background:none; border:none; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; text-align:left; } .lh-legal-link:hover{ color:var(--c-red); } .lh-legal-modal{ max-width:640px; } .lh-legal-modal-body{ max-height:60vh; overflow-y:auto; font-size:.92rem; line-height:1.65; color:var(--c-ink-soft); } .lh-legal-modal-body p{ margin-bottom:1em; } .lh-legal-modal-body h1, .lh-legal-modal-body h2, .lh-legal-modal-body h3{ font-family:var(--font-body); font-weight:700; margin:1.2em 0 .5em; letter-spacing:0; } .lh-legal-modal-body ul{ list-style:disc; margin:0 0 1em 1.4em; } .lh-legal-modal-body a{ color:var(--c-red); text-decoration:underline; } .footer-bottom{ margin-top:var(--space-4); padding-top:var(--space-2); border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-1); font-size:.75rem; color:rgba(255,255,255,.5); } .lh-credit{ margin-top:.6rem; font-size:.72rem; color:rgba(255,255,255,.4); } .lh-credit a{ color:rgba(255,255,255,.65); text-decoration:underline; } .lh-credit a:hover{ color:var(--c-white); } .modal-overlay{ position:fixed; inset:0; background:rgba(15,15,15,.6); z-index:600; display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s var(--ease); } .modal-overlay.is-open{ opacity:1; pointer-events:auto; } @media(min-width:640px){ .modal-overlay{ align-items:center; } } .modal{ background:var(--c-white); width:100%; max-width:520px; max-height:92vh; overflow-y:auto; border-radius:var(--radius-md) var(--radius-md) 0 0; padding:var(--space-4); transform:translateY(40px); transition:transform .35s var(--ease); } .modal-overlay.is-open .modal{ transform:translateY(0); } @media(min-width:640px){ .modal{ border-radius:var(--radius-md); } } .modal-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:var(--space-2); } .modal-close{ background:none; border:none; font-size:1.4rem; line-height:1; padding:.2rem .5rem; } .modal p.hint{ font-size:.85rem; color:var(--c-gray); margin-bottom:var(--space-3); } .field{ margin-bottom:var(--space-2); } .field label{ display:block; font-size:.8rem; font-weight:600; margin-bottom:.35rem; } .field input[type="text"],.field input[type="tel"],.field input[type="email"],.field textarea,.field input[type="file"]{ width:100%; border:1.5px solid var(--c-line); border-radius:var(--radius-sm); padding:.7rem .8rem; font-family:inherit; font-size:.9rem; background:var(--c-bg-alt); } .field textarea{ resize:vertical; min-height:80px; } .field-check{ display:flex; align-items:flex-start; gap:.6rem; font-size:.78rem; color:var(--c-gray); margin:var(--space-2) 0; } .field-check input{ margin-top:.2rem; } .modal .btn{ width:100%; } .lh-anfrage-ergebnis{ font-size:.85rem; margin-top:.8rem; } .lh-anfrage-ergebnis--fehler{ color:var(--c-red-deep); } .lh-anfrage-ergebnis--erfolg{ color:#1a7a3c; } .modal-success{ text-align:center; padding:var(--space-3) 0; } .modal-success .check{ width:56px; height:56px; border-radius:50%; background:var(--c-red); color:var(--c-white); display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto var(--space-2); } .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .fab-tooltip{ position:fixed; right:var(--space-2); bottom:var(--space-2); z-index:700; background:var(--c-ink); color:var(--c-white); padding:.7rem 1rem; border-radius:var(--radius-sm); font-size:.78rem; max-width:240px; box-shadow:var(--shadow-md); opacity:0; transform:translateY(8px); pointer-events:none; transition:all .25s var(--ease); } .fab-tooltip.is-visible{ opacity:1; transform:translateY(0); } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .hero-slide{ transition:none; } }