/* ========================= IST d.o.o. – STYLE.CSS (POENOTENO / STABILNO) - brez podvojenih blokov - stabilen hero (sivo ozadje + črn tekst) - proizvajalci: logotipi celi (contain) - enotna verzija LIGHTBOX (fullscreen + opis) ========================= */ /* ========================= OSNOVNE NASTAVITVE ========================= */ :root{ --red:#d10000; --red-dark:#a60000; --text:#222; --muted:#666; --bg:#ffffff; --light:#f9f9f9; --border:#e5e5e5; --black:#111; --header-height:100px; } *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } html{ scroll-behavior:smooth; } :target{ scroll-margin-top: var(--header-height); } body{ font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background:var(--bg); line-height:1.6; min-height:100vh; display:flex; flex-direction:column; } main{ width:100%; max-width:1000px; margin:0 auto; padding:20px; } section{ margin:24px 0; } h1,h2,h3{ margin:0 0 10px; } /* ========================= HEADER + NAVIGACIJA ========================= */ header{ position:relative; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:15px 40px; background:#fff; border-bottom:1px solid var(--border); flex-wrap:wrap; min-height: var(--header-height); } .header-left{ display:flex; align-items:center; gap:20px; } .logo img{ height:60px; width:auto; transition:transform .25s ease; } .logo img:hover{ transform:scale(1.06); } /* če želiš manjši logo samo na podstraneh: na podstran v dodaj class="subpage-body" */ .subpage-body .logo img{ height:50px; } nav ul{ list-style:none; display:flex; gap:18px; margin:0; padding:0; flex-wrap:wrap; } nav a{ color:var(--text); text-decoration:none; font-weight:600; padding:8px 10px; border-radius:8px; transition:background .2s, color .2s; } nav a:hover{ background:var(--light); } .news-link{ font-weight:800; color:var(--red); border:2px solid var(--red); border-radius:10px; padding:6px 12px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:background .25s, color .25s, transform .2s; } .news-link:hover{ background:var(--red); color:#fff; transform:translateY(-1px); } /* ========================= HERO (VAŠ PARTNER...) - sivo ozadje + črn tekst (kot želiš) ========================= */ .hero{ border-radius:16px; overflow:hidden; text-align:center; padding:90px 20px; background:#f2f2f2; /* svetlo sivo ozadje */ color:#111; } .hero h1{ color:#111; font-size:2.6rem; font-weight:800; margin-bottom:10px; } .hero p{ color:#111; /* subtitle črn */ opacity:.85; margin-top:0; } /* Če bi kdaj želel sliko v ozadju hero, uporabi to: .hero{ background: linear-gradient(rgba(255,255,255,.65), rgba(255,255,255,.65)), url("images/hero-bg.jpg") center/cover no-repeat; } */ /* ========================= GUMBI ========================= */ .btn, .btn-visit, .btn-visit-small, .btn-pdf, .home-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--red); color:#fff; border-radius:10px; text-decoration:none; font-weight:800; transition:background .25s, transform .2s, box-shadow .2s; } .btn:hover, .btn-visit:hover, .btn-visit-small:hover, .btn-pdf:hover, .home-btn:hover{ background:var(--red-dark); transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.18); } .btn{ padding:12px 20px; } .btn-visit{ padding:10px 18px; } .btn-visit-small{ padding:6px 12px; font-size:13px; } .page-buttons{ display:flex; justify-content:flex-start; margin:30px 0; } .home-btn{ padding:14px 18px; font-size:20px; } .home-btn.icon{ width:48px; height:48px; border-radius:50%; padding:0; } .btn-pdf{ padding:10px 16px; font-size:15px; white-space:nowrap; } /* ========================= MREŽA IZDELKOV (INDEX) ========================= */ #products .products-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:20px; } .product{ display:flex; flex-direction:column; align-items:center; justify-content:center; background:#fff; border:2px solid transparent; border-radius:12px; padding:15px; text-align:center; color:var(--text); text-decoration:none; transition:border .25s, transform .2s, box-shadow .2s; } .product:hover{ border-color:var(--red); transform:translateY(-2px); box-shadow:0 10px 18px rgba(0,0,0,.08); } #products .product img{ width:100%; height:150px; object-fit:cover; border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,.1); transition:transform .25s ease, box-shadow .25s ease; } #products .product img:hover{ transform:scale(1.05); box-shadow:0 8px 16px rgba(0,0,0,.22); } #products .product h3{ font-size:18px; font-weight:800; color:var(--black); margin-top:10px; letter-spacing:.3px; background:#fff; padding:6px 10px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.08); display:inline-block; } #products .product:hover h3{ color:var(--red-dark); } /* ========================= PODSTRAN: SLIKA OB BESEDILU ========================= */ .flex-layout{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; } .text-content{ flex:1; min-width:260px; } .image-content{ flex:1; text-align:center; } .image-content img{ width:55%; max-width:320px; height:auto; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.18); transition:transform .25s ease; margin:0 auto; display:block; } .image-content img:hover{ transform:scale(1.04); } /* ========================= ISKALNIK ========================= */ #searchBox{ width:100%; padding:12px; margin:15px 0; border-radius:10px; border:1px solid #ccc; font-size:15px; } /* ========================= PROIZVAJALCI (FADE SLIDER) - pomembno: contain, da se logotipi vidijo celi ========================= */ #partners{ padding:40px 20px; background:var(--light); text-align:center; border-top:1px solid var(--border); border-bottom:1px solid var(--border); } #partners h2{ margin-bottom:16px; font-size:26px; font-weight:900; color:var(--red); } .manufacturers{ text-align:center; } .fade-slider{ position:relative; height:140px; } .fade-slide{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .4s ease; } .fade-slide.active{ opacity:1; } .fade-slide img{ max-height:120px; max-width:90%; width:auto; height:auto; object-fit:contain; display:block; } .controls{ margin-top:10px; } .controls .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#ccc; margin:0 4px; } .controls .dot.active{ background:var(--red); } /* ========================= MODUL MANAGER (PROMO BLOK) ========================= */ #modulmanager-top{ background:var(--light); padding:35px 20px; text-align:center; border-bottom:1px solid var(--border); } .modulmanager-top-box{ position:relative; display:flex; align-items:center; justify-content:center; gap:25px; flex-wrap:wrap; max-width:900px; margin:0 auto; background:#fff; border-radius:14px; padding:20px; box-shadow:0 6px 18px rgba(0,0,0,.08); } .modulmanager-badge{ position:absolute; top:-12px; left:20px; background:var(--red); color:#fff; font-size:13px; font-weight:900; padding:5px 12px; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,.2); } .modulmanager-top-box img{ height:90px; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,.1); } .modulmanager-text{ max-width:420px; text-align:left; } .modulmanager-text h2{ color:var(--red); font-size:20px; margin-bottom:6px; font-weight:900; } .modulmanager-text p{ color:#444; margin:0 0 10px; font-size:15px; } /* ========================= KATALOGI (PDF + SLIKE) ========================= */ .catalog-block{ text-align:center; margin-top:40px; } .pdf-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; width:100%; margin-top:20px; } .pdf-links .btn-pdf{ white-space:normal; text-align:center; max-width:520px; line-height:1.4; } .catalog-gallery{ display:flex; justify-content:center; flex-wrap:wrap; gap:25px; margin-top:25px; } .catalog-item{ text-align:center; max-width:220px; } .catalog-item p{ margin-top:10px; font-weight:800; color:var(--text); line-height:1.3; } .catalog-image{ width:100%; height:auto; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.18); transition:transform .25s ease, box-shadow .25s ease; display:block; } .catalog-image:hover{ transform:scale(1.05); box-shadow:0 10px 24px rgba(0,0,0,.22); } /* ========================= NOVICE / OBVESTILA ========================= */ #news{ padding:20px; background:var(--light); border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .news-card{ max-width:1100px; margin:0 auto; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,.06); padding:16px; } .news-card__header{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; } .news-card__header h2{ margin:0; font-size:22px; font-weight:900; } .badge{ background:var(--red); color:#fff; font-size:12px; font-weight:900; padding:4px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.5px; } .news-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px; } .news-item{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px; transition:box-shadow .2s, transform .2s; } .news-item:hover{ transform:translateY(-1px); box-shadow:0 10px 18px rgba(0,0,0,.08); } .news-meta{ display:flex; gap:10px; align-items:center; margin-bottom:6px; font-size:13px; } .news-date{ color:#666; } .news-tag{ background:#111; color:#fff; border-radius:8px; padding:2px 8px; font-size:12px; } .news-title{ margin:0; font-size:15px; font-weight:800; } .news-more{ display:none; margin-top:10px; padding-top:8px; border-top:1px dashed var(--border); color:#333; } .news-item.open .news-more{ display:block; } .news-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:10px; } .btn-news-toggle{ background:transparent; border:2px solid var(--red); color:var(--red); font-weight:900; padding:8px 12px; border-radius:10px; cursor:pointer; transition:background .2s, color .2s, transform .2s; } .btn-news-toggle:hover{ background:var(--red); color:#fff; transform:translateY(-1px); } /* stran vseh novic */ .news-page .news-card{ max-width:900px; padding:20px; } /* ========================= NOVITETE & AKCIJE (SLIDER) ========================= */ .promos{ padding:30px 20px; background:var(--light); border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .promos h2{ text-align:center; margin-bottom:18px; font-weight:900; color:var(--red); } .promo-slider{ position:relative; max-width:1100px; margin:0 auto; min-height:260px; } .promo-slide{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .45s ease; } .promo-slide.active{ opacity:1; pointer-events:auto; } .promo-card{ display:flex; gap:18px; align-items:center; justify-content:space-between; background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:0 10px 22px rgba(0,0,0,.06); } .promo-text{ flex:1; min-width:240px; } .promo-text h3{ margin:8px 0 6px; font-size:20px; font-weight:900; } .promo-text p{ margin:0 0 12px; color:var(--muted); } .promo-badge{ display:inline-block; background:var(--red); color:#fff; font-weight:900; font-size:12px; padding:4px 10px; border-radius:999px; letter-spacing:.5px; } .promo-badge--new{ background:#111; } .promo-card img{ width:320px; max-width:320px; height:190px; object-fit:cover; border-radius:14px; box-shadow:0 6px 14px rgba(0,0,0,.12); display:block; } /* puščice */ .promo-nav{ position:absolute; top:50%; transform:translateY(-50%); border:none; cursor:pointer; width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:22px; display:flex; align-items:center; justify-content:center; transition: transform .15s ease, background .2s ease; z-index:2; } .promo-nav:hover{ background:rgba(0,0,0,.72); transform:translateY(-50%) scale(1.06); } .promo-prev{ left:-10px; } .promo-next{ right:-10px; } /* pike */ .promo-dots{ display:flex; justify-content:center; gap:8px; margin-top:12px; } .promo-dot{ width:10px; height:10px; border-radius:50%; border:none; background:#cfcfcf; cursor:pointer; } .promo-dot.active{ background:var(--red); } /* ========================= KONTAKT + ZEMLJEVID ========================= */ .contact{ padding:40px 20px; } .contact-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:20px; max-width:1100px; margin:0 auto; } .contact-card, .map-card{ background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,.06); padding:18px; } .contact-card h3, .map-card h3{ margin:0 0 12px; font-size:18px; font-weight:900; } .contact-item{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px dashed var(--border); } .contact-item:last-child{ border-bottom:none; } .contact-icon{ font-size:20px; line-height:1; margin-top:2px; } .contact-label{ font-size:12px; color:#666; font-weight:900; text-transform:uppercase; letter-spacing:.3px; } .contact-link{ display:inline-block; margin-top:2px; font-weight:900; color:var(--red); text-decoration:none; } .contact-link:hover{ text-decoration:underline; } .contact-text{ margin-top:2px; font-weight:700; color:#222; } .hours-box{ margin-top:14px; padding:12px; background:var(--light); border:1px solid var(--border); border-radius:14px; } .hours-box h4{ margin:0 0 10px; font-size:14px; font-weight:900; color:#111; } .hours-row{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; font-weight:700; color:#222; } .contact-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; } /* gumb pokliči */ .btn-call{ background:#0a8f08; color:#fff; font-weight:900; padding:12px 20px; border-radius:12px; text-decoration:none; display:inline-flex; align-items:center; gap:10px; box-shadow:0 6px 14px rgba(0,0,0,.2); transition:background .2s, transform .2s; } .btn-call:hover{ background:#087507; transform:translateY(-1px); } /* poudarjena lokacija */ .address-highlight{ margin-top:18px; background:var(--light); border:2px solid var(--red); border-radius:14px; padding:14px; text-align:left; } .strong-address{ font-size:16px; font-weight:900; color:#111; line-height:1.35; } .strong-address small{ display:block; margin-top:4px; font-size:13px; font-weight:700; color:#555; } .map-card iframe{ width:100%; height:360px; border:0; border-radius:14px; } /* ========================= GALERIJA (thumbs) ========================= */ .gallery{ padding:40px 20px; text-align:center; background:#fff; } .gallery h2{ margin-bottom:25px; font-size:24px; font-weight:900; color:var(--text); } .gallery-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; justify-items:center; align-items:center; max-width:1200px; margin:0 auto; } .gallery-grid img{ width:100%; height:140px; object-fit:cover; border-radius:12px; cursor:pointer; transition:transform .25s ease, box-shadow .25s ease; box-shadow:0 4px 10px rgba(0,0,0,.1); } .gallery-grid img:hover{ transform:scale(1.06); box-shadow:0 10px 18px rgba(0,0,0,.22); } /* lebdeč gumb galerija (podstrani) */ .gallery-btn{ position:fixed; top:calc(var(--header-height) + 10px); right:25px; background:var(--red); color:#fff; font-weight:900; border:none; border-radius:10px; padding:10px 16px; text-decoration:none; box-shadow:0 6px 14px rgba(0,0,0,.2); transition:background .25s ease, transform .2s ease; z-index:500; } .gallery-btn:hover{ background:var(--red-dark); transform:scale(1.03); } /* ========================= LIGHTBOX – ENOTNA VERZIJA (FULLSCREEN + OPIS) ========================= */ .lightbox-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.86); display:none; z-index:9999; } .lightbox-backdrop.active{ display:block; } .lightbox-panel{ position:absolute; inset:0; width:100vw; height:100vh; display:grid; place-items:center; overflow:hidden; } .lightbox-img{ max-width:100vw; max-height:100vh; width:auto; height:auto; object-fit:contain; border-radius:0; box-shadow:none; } /* opis spodaj */ .lightbox-info{ position:absolute; left:0; bottom:0; width:100%; padding:16px 22px; background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.35), rgba(0,0,0,0) ); color:#fff; text-align:left; } .lightbox-title{ margin:0 0 6px; font-size:22px; font-weight:900; } .lightbox-desc{ margin:0 0 6px; font-size:15px; line-height:1.45; color:#eaeaea; } .lightbox-specs{ margin:0; font-size:14px; color:#cfcfcf; } /* close */ .lightbox-close{ position:absolute; top:18px; right:18px; width:46px; height:46px; border-radius:50%; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:24px; cursor:pointer; z-index:3; display:flex; align-items:center; justify-content:center; transition:background .2s, transform .15s; } .lightbox-close:hover{ background:rgba(0,0,0,.65); transform:scale(1.08); } /* puščice */ .lightbox-prev, .lightbox-next{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.45); color:#fff; border:none; font-size:3rem; padding:18px 22px; cursor:pointer; border-radius:50%; z-index:3; transition:background .2s, transform .2s; } .lightbox-prev:hover, .lightbox-next:hover{ background:rgba(0,0,0,.65); transform:translateY(-50%) scale(1.08); } .lightbox-prev{ left:20px; } .lightbox-next{ right:20px; } body.lb-open{ overflow:hidden; touch-action:none; } /* ========================= COOKIE BANNER ========================= */ .cookie-banner{ position:fixed; bottom:0; left:0; width:100%; background:#111; color:#fff; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px; z-index:9999; box-shadow:0 -4px 12px rgba(0,0,0,.3); } .cookie-banner p{ margin:0; font-size:14px; line-height:1.4; } .cookie-banner a{ color:#ff4d4d; font-weight:700; text-decoration:underline; } .btn-cookie{ background:var(--red); color:#fff; border:none; border-radius:10px; padding:8px 16px; font-weight:900; cursor:pointer; transition:background .2s ease; } .btn-cookie:hover{ background:var(--red-dark); } /* ========================= FOOTER ========================= */ footer{ margin-top:auto; text-align:center; padding:18px 20px; background:#111; color:#ddd; border-top:1px solid #000; } footer .hours{ margin-top:10px; font-size:14px; color:#ddd; } /* ========================= RESPONSIVE ========================= */ @media (max-width: 900px){ header{ padding:12px 20px; } .gallery-grid{ grid-template-columns:repeat(3, 1fr); } .gallery-grid img{ height:130px; } .promo-card{ flex-direction:column-reverse; align-items:stretch; } .promo-card img{ width:100%; max-width:100%; height:210px; } .promo-prev{ left:8px; } .promo-next{ right:8px; } .contact-grid{ grid-template-columns:1fr; } .map-card iframe{ height:320px; } } @media (max-width: 600px){ .gallery-grid{ grid-template-columns:repeat(2, 1fr); } .gallery-grid img{ height:120px; } .gallery-btn{ right:12px; padding:8px 12px; font-size:14px; } .btn-call{ width:100%; justify-content:center; font-size:18px; } .cookie-banner{ flex-direction:column; align-items:flex-start; } .lightbox-title{ font-size:18px; } .lightbox-desc{ font-size:14px; } .lightbox-prev, .lightbox-next{ font-size:2.2rem; padding:12px 14px; } }