body { background: #ffffff; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 300; } html { width: 100%; } /* overflow-x:hidden je namenoma SAMO na body, ne na html - na iPhone/iOS Safari nastavitev overflow-x:hidden na pokvari position:fixed (znana WebKit napaka): fiksna navigacija se med pomikanjem "odlepi" od vrha zaslona in obstane na napačnem mestu sredi strani, nad njo pa ostane viden del vsebine, ki bi moral biti pod njo. Isti vzrok je povzročal tudi premikanje/skakanje navigacije ob odpiranju in zapiranju mobilnega menija. Navpično drsenje strani ostaja preprečeno, ker ga zdaj omejuje body namesto html. */ body { width: 100%; overflow-x: hidden; } /* ========================= TYPOGRAPHY (fluid, bigger) ========================= */ h1,h2,h3,h4,h5,h6,blockquote { font-weight: 800; } h1 { font-size: clamp(44px, 6vw, 110px); line-height: 1.05; letter-spacing: clamp(2px, 0.8vw, 10px); text-transform: uppercase; padding-top: 12px; font-family: 'Poppins', sans-serif; } h2 { font-size: clamp(26px, 3.2vw, 70px); letter-spacing: clamp(1px, 0.5vw, 6px); padding-bottom: 18px; text-transform: uppercase; font-family: 'Poppins', sans-serif; line-height: 1.1; } h3 { font-size: clamp(25px, 1.6vw, 26px); font-family: 'Poppins', sans-serif; font-style: italic; } h4 { color: #999; letter-spacing: 1.2px; margin-top: 18px; font-family: 'Poppins', sans-serif; font-size: clamp(14px, 1.1vw, 18px); } h5{ font-size: clamp(20px, 1.1vw, 25px); line-height: 1.55; color: #000; background: rgba(255,255,255,0.75); /* prosojno belo */ display: inline-block; padding: 6px 12px; border-radius: 8px; } /* Prosojni "label" samo po dolžini besedila */ .pill-title{ display: inline-block; width: fit-content; max-width: 100%; background: rgba(255,255,255,0.75); padding: 6px 12px; border-radius: 8px; font-weight: 800; } /* Stil samo za programe (da ne vpliva drugje) */ #blog .pill-title{ font-size: clamp(22px, 1.6vw, 28px); font-family: 'Poppins', sans-serif; font-style: italic; color: #000; } /* Če je kartica na sredini, naj pill ostane levo */ #blog .blog-thumb, #blog .blog-thumb1, #blog .blog-thumb2, #blog .blog-thumb3, #blog .blog-thumb4, #blog .blog-thumb5, #blog .blog-thumb6, #blog .blog-thumb7{ position: relative; text-align: left; /* da je kot na sliki */ } p { color: #707070; font-size: clamp(20px, 1.2vw, 20px); line-height: 1.55; letter-spacing: 0.2px; } a { text-decoration: none !important; outline: none; } /* RDEČ MG POVSOD */ .highlight { color: #cc0000 !important; font-weight: 700 !important; } /* ========================= GENERAL / LAYOUT ========================= */ .container { width: min(1400px, calc(100% - 48px)) !important; max-width: none !important; margin-left: auto; margin-right: auto; padding-left: clamp(10px, 2vw, 28px); padding-right: clamp(10px, 2vw, 28px); } #home, #overview, #blog, #testimonial, #trgovina, #gallery, footer { width: 100%; max-width: none; } #trainer, #blog, #price { padding-top: clamp(70px, 8vw, 120px); padding-bottom: clamp(70px, 8vw, 120px); } #home, #trainer, #newsletter, #price, #image, #testimonial, #blog-header { text-align: center; } .parallax-section { background-attachment: fixed !important; background-size: cover !important; } /* ========================= PRELOADER ========================= */ .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; display: flex; justify-content: center; align-items: center; background: #ffffff; } .sk-spinner-pulse { width: 40px; height: 40px; background-color: #26253a; border-radius: 100%; -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out; animation: sk-pulseScaleOut 1s infinite ease-in-out; } @-webkit-keyframes sk-pulseScaleOut { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @keyframes sk-pulseScaleOut { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } /* ========================= NAVBAR ========================= */ .navbar-default { background: #ffffff; border-bottom: 2px solid #f9f9f9; box-shadow: none; margin: 0 !important; } /* OPOMBA: prejšnji poskus stabilizacije fiksne navigacije s "transform: translateZ(0)" je bil odstranjen, ker je pri dejanskem testiranju povzročil nasproten učinek - po pomiku po strani se navigacija ni več pravilno prerisala (postala je nevidna, čeprav je bila v DOM-u na pravilnem mestu). Pravilno in zanesljivo pozicioniranje zdaj v celoti zagotavljata obstoječe CSS pravilo ".navbar-fixed-top" (position:fixed) ter JS funkcija alignNavToMobileAdminBar v custom.js. */ .navbar-default .navbar-brand { color: #000; font-size: 32px; font-weight: bold; line-height: 90px; margin: 0; } .navbar-default .navbar-nav li a { color: #000; font-size: 20px; font-weight: 300; line-height: 60px; letter-spacing: 0.6px; transition: all 0.4s ease-in-out; } .navbar-default span1 { color: #cc0000; font-weight: 700; } .navbar-default .navbar-nav li a:hover { color: #000; } .mggym-cart-count { display: inline-flex; min-width: 22px; height: 22px; align-items: center; justify-content: center; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #cc0000; color: #fff; font-size: 12px; font-weight: 800; } /* ========================= HOME ========================= */ #home { background-color: #111; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; background-position: center center; color: ghostwhite; display: flex; align-items: center; height: 100vh; position: relative; } #home::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.34); z-index: 0; } #home > .container { position: relative; z-index: 2; } #home .row { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; } #home .row > div { float: none; } #home h1, #home h3 { margin-left: auto; margin-right: auto; } #home .btn { display: inline-block; } #home h1 { font-family: 'Poppins', sans-serif; font-weight: 600; width: fit-content; padding: 10px 20px; border-radius: 14px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 26px rgba(0,0,0,.28); } #home span1 { color: #cc0000; font-weight: 700; } #home h3 { letter-spacing: 2px; color: #ffffff; width: fit-content; padding: 10px 20px; border-radius: 14px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 26px rgba(0,0,0,.28); } #home .btn { background: none; border: none; border-radius: 0px; color: #ffffff; font-size: 22px; font-weight: bold; letter-spacing: 4px; padding: 16px 38px; margin-top: 28px; transition: all 0.4s ease-in-out; } #home .btn:hover { background: #cc0000; color: #ffffff; } /* ========================= OVERVIEW ========================= */ #overview { padding: 100px 0; background: #f4f4f4; } #overview .row { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(40px, 6vw, 90px); align-items: center; margin-left: 0; margin-right: 0; } #overview .row > .col-md-1 { display: none; } #overview .row > .col-md-6, #overview .row > .col-md-4 { width: auto; float: none; min-width: 0; padding-left: 0; padding-right: 0; } #overview .row > .col-md-6 { grid-column: 1; grid-row: 1; } #overview .row > .col-md-4 { grid-column: 2; grid-row: 1; } #overview img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } #overview blockquote { background: #ffffff; border-left: 6px solid #000; padding: 40px 45px; font-size: 18px; line-height: 1.6; margin-top: 40px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); position: relative; } #overview span1 { color: #cc0000; font-weight: 700; } #overview .overview-detail { padding-top: 20px; } #overview .overview-detail h2 { font-size: 34px; margin-bottom: 20px; } #overview .btn { display: inline-block; margin-top: 25px; background: transparent; border: 3px solid #000; padding: 14px 38px; font-weight: 700; letter-spacing: 3px; transition: 0.3s ease; } #overview .btn:hover { background: #000; color: #fff; } /* ========================= PROGRAMI – KARTICE ========================= */ .programs-wrapper { display: flex; flex-direction: column; gap: 50px; margin-top: 60px; } /* kartice */ #blog .blog-thumb, #blog .blog-thumb1, #blog .blog-thumb2, #blog .blog-thumb3, #blog .blog-thumb4, #blog .blog-thumb5, #blog .blog-thumb6, #blog .blog-thumb7 { position: relative; /* za blog-date */ border: 1px solid #000; padding: clamp(22px, 3vw, 50px); background: #ffffff; display: flex; flex-direction: column; gap: 18px; transition: all 0.6s ease; text-align: left; /* kartica naj bo levo */ } /* naslov link */ #blog h3 a { color: #000; transition: color 0.4s ease; } /* MG-GYM badge levo zgoraj */ #blog .blog-date { position: absolute; top: 18px; left: 18px; text-align: left !important; color: #000; font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; } /* hover backgrounds (spremeni slike po želji) */ #blog .blog-thumb:hover { background: url('../images/osebnotrenerstvo.jpg') center/cover; } #blog .blog-thumb2:hover { background: url('../images/IMG_1628_Original.jpg') center/cover; } #blog .blog-thumb3:hover { background: url('../images/IMG_54533.JPEG') center/cover; } #blog .blog-thumb4:hover { background: url('../images/IMG_4678.JPEG') center/cover; } #blog .blog-thumb5:hover { background: url('../images/IMG_8047.JPEG') center/cover; } #blog .blog-thumb6:hover { background: url('../images/IMG_0247.JPEG') center/cover; } #blog .blog-thumb7:hover { background: url('../images/IMG_9425.JPEG') center/cover; } /* text light on hover */ #blog .blog-thumb:hover, #blog .blog-thumb2:hover, #blog .blog-thumb3:hover, #blog .blog-thumb4:hover, #blog .blog-thumb5:hover, #blog .blog-thumb6:hover, #blog .blog-thumb7:hover, #blog .blog-thumb:hover h3 a, #blog .blog-thumb2:hover h3 a, #blog .blog-thumb3:hover h3 a, #blog .blog-thumb4:hover h3 a, #blog .blog-thumb5:hover h3 a, #blog .blog-thumb6:hover h3 a, #blog .blog-thumb7:hover h3 a { color: #000; } /* ========================= GUMB CENIK ========================= */ .program-btn { margin-left: auto; display: block; width: clamp(170px, 22vw, 280px); max-width: 100%; padding: 18px 0; margin-top: 14px; text-align: center; font-size: 16px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #000; background: transparent; border: 2px solid #000; border-radius: 999px; transition: all 0.3s ease; } #blog .blog-thumb:hover .program-btn, #blog .blog-thumb2:hover .program-btn, #blog .blog-thumb3:hover .program-btn, #blog .blog-thumb4:hover .program-btn, #blog .blog-thumb5:hover .program-btn, #blog .blog-thumb6:hover .program-btn, #blog .blog-thumb7:hover .program-btn { color: #fff; border-color: #fff; } .program-btn:hover { background: #2b2b2b; color: #fff; border-color: #2b2b2b; transform: translateY(-2px); } .program-shop-btn { margin-left: auto; display: block; width: clamp(170px, 22vw, 280px); max-width: 100%; padding: 18px 0; text-align: center; font-size: 16px; font-weight: 800; letter-spacing: 2px; color: #fff; background: #cc0000; border: 2px solid #cc0000; border-radius: 999px; transition: all .3s ease; } .program-shop-btn:hover { background: #000; border-color: #000; color: #fff; transform: translateY(-2px); } @media (max-width: 768px) { .program-btn { width: 100%; } .program-shop-btn { width: 100%; } } /* ========================= CENIK BOX (univerzalno) ========================= */ #blog .cenik-box { display: none; margin-top: 18px; padding: 26px 28px; border: 2px solid #000; border-radius: 18px; background: #fff !important; color: #000 !important; opacity: 1 !important; position: relative; z-index: 10; text-align: left; } #blog .cenik-box.is-open { display: block; } .cenik-title { font-size: 22px; font-weight: 900; letter-spacing: 1px; margin: 0 0 6px 0; color: #000; text-transform: uppercase; } .cenik-subtitle { font-size: 13px; color: #555; margin: 0 0 18px 0; letter-spacing: 0.4px; } /* grid */ .cenik-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 38px); } .cenik-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .cenik-grid.cols-1 { grid-template-columns: 1fr; } .cenik-col h5 { font-size: 18px; font-weight: 900; margin: 0 0 10px 0; color: #000; } .cenik-col p { margin: 6px 0; font-size: 14px; line-height: 1.25; color: #333; } /* cenik line */ .cenik-line { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.12); } .cenik-line:last-child { border-bottom: 0; } .cenik-line .label { font-size: 14px; color: #222; } .cenik-line .price { font-weight: 900; font-size: 18px; letter-spacing: 0.2px; color: #C99A2E !important; /* zlato */ white-space: nowrap; } .mggym-add-to-cart.button { display: inline-flex; align-items: center; justify-content: center; width: fit-content; margin: 7px 0 10px auto; padding: 9px 16px !important; border: 0; border-radius: 999px !important; background: #cc0000 !important; color: #fff !important; font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; box-shadow: none; } .mggym-add-to-cart.button:hover { background: #000 !important; transform: translateY(-1px); } .mggym-add-to-cart.added::after { color: #fff; } .cenik-col > .mggym-add-to-cart { margin-left: 0; } .cenik-line .mggym-add-to-cart { grid-column: 2; grid-row: 2; align-self: center; margin: 2px 0 5px 12px; } .cenik-line .cenik-note { grid-column: 1; } .cenik-note { grid-column: 1 / -1; font-size: 12.5px; color: #666; margin-top: -4px; } /* FIX: zlato za vodeno vadbo (span.price v

) */ #blog .cenik-box .cenik-col p .price { color: #C99A2E !important; font-weight: 900 !important; font-size: 17px; } /* mobile cenik */ @media (max-width: 768px) { .cenik-grid { grid-template-columns: 1fr !important; } } /* ========================= TESTIMONIAL ========================= */ #testimonial { background: #e6f7ff; color: #1a0000; padding-top: 10rem; padding-bottom: 10rem; } #testimonial .fa { font-size: 42px; padding-bottom: 14px; } /* ========================= FOOTER ========================= */ footer { width: 100%; margin: 0; padding: 10rem; /* zgoraj/spodaj */ background: url('../images/fotter.jpg')center center / cover no-repeat fixed; color: #ffffff; } footer p { color: aliceblue; } footer h4 { color: aliceblue; } footer h3 { font-style: normal; color: white; font-family: 'Poppins', sans-serif; } footer .copyright-text { padding-top: 50px; text-align: center; } .copyright-text a { color: #e6e6e6; transition: all 0.4s ease-in-out; } .copyright-text a:hover { color: #ffffff; } /* Social */ .social-icon { position: center; padding: 1rem; margin: 1rem; } .social-icon li { display: inline-block; list-style: none; } .social-icon li a { color: white; border-radius: 100px; font-size: 16px; text-decoration: none; transition: all 0.4s ease-in-out; width: 60px; height: 60px; line-height: 60px; text-align: center; vertical-align: middle; } .social-icon li a:hover { background: grey; border: 1px solid black; } /* ========================= RESPONSIVE FIXES ========================= */ @media (max-width: 991px) { #overview { padding: 60px 20px; } #overview .row { grid-template-columns: 1fr; gap: 35px; } #overview .row > .col-md-6 { grid-column: 1; grid-row: 1; } #overview .row > .col-md-4 { grid-column: 1; grid-row: 2; } #overview blockquote { padding: 25px; font-size: 16px; } } @media (max-width: 767px) { .container { width: calc(100% - 24px) !important; padding-left: 8px; padding-right: 8px; } .navbar-default .navbar-brand { line-height: 15px; } .navbar-default .navbar-nav li a { font-size: 18px; line-height: 18px; } } /* WORDPRESS / WOOCOMMERCE */ .mggym-featured-shop, .mggym-gallery { padding: clamp(70px, 8vw, 120px) 0; } .mggym-featured-shop { background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), url('https://mg-gym.com/wp-content/uploads/2026/08/IMG_0739-e1787846031833.jpeg') center center / cover no-repeat; } .mggym-featured-shop .text-center h2, .mggym-featured-shop .text-center p { color: #fff; } .mggym-coming-products { max-width: 760px; margin: 35px auto; padding: 28px; text-align: center; color: #333; background: #fff; border: 1px solid #ddd; border-radius: 14px; } .mggym-shop-button { margin-top: 30px; border: 2px solid #000; border-radius: 999px; padding: 14px 34px; font-weight: 800; letter-spacing: 1px; } .mggym-gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 40px; } .mggym-gallery-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; transition: transform .3s ease, filter .3s ease; } .mggym-gallery-grid a:hover img { transform: translateY(-4px); filter: brightness(.82); } .admin-bar .navbar-fixed-top { top: 32px; } .mggym-shop, .mggym-content { padding-top: 130px; padding-bottom: 90px; min-height: 70vh; } /* Fotografsko ozadje za trgovino, kategorije in posamezen izdelek (vedno) ter za Moj račun, prijavo/registracijo, košarico in blagajno (ne na navadnih straneh kot so pogoji/zasebnost/kontakt) */ .mggym-shop, body.woocommerce-account .mggym-content, body.woocommerce-cart .mggym-content, body.woocommerce-checkout .mggym-content { position: relative; background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url('https://mg-gym.com/wp-content/uploads/2026/09/img-eleiko-scaled.jpg') center center / cover no-repeat; } .mggym-shop h1, body.woocommerce-account .mggym-content h1, body.woocommerce-cart .mggym-content h1, body.woocommerce-checkout .mggym-content h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.15; padding-top: 0; word-break: break-word; overflow-wrap: anywhere; } .mggym-shop h2, body.woocommerce-account .mggym-content h2, body.woocommerce-cart .mggym-content h2, body.woocommerce-checkout .mggym-content h2 { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.2; padding-bottom: 10px; } .mggym-shop h1, .mggym-shop h2, body.woocommerce-account .mggym-content h1, body.woocommerce-cart .mggym-content h1, body.woocommerce-checkout .mggym-content h1 { letter-spacing: 1px; } .woocommerce ul.products li.product .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { background: #cc0000; color: #fff; border-radius: 999px; padding: 14px 24px; font-weight: 700; } .woocommerce ul.products li.product .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: #000; color: #fff; } .woocommerce span.onsale { background: #cc0000; } .woocommerce div.product p.price, .woocommerce div.product span.price, .woocommerce ul.products li.product .price { color: #cc0000; font-weight: 800; } .woocommerce ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } .woocommerce ul.products::before, .woocommerce ul.products::after { display: none; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce ul.products[class*="columns-"] li.product, .woocommerce-page ul.products[class*="columns-"] li.product { float: none !important; width: auto !important; clear: none !important; margin: 0 !important; padding: 18px; background: #fff; border: 1px solid #e3e3e3; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.06); } .woocommerce ul.products li.product img { border-radius: 9px; aspect-ratio: 1 / 1; object-fit: cover; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 20px; line-height: 1.25; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-cart table.cart td.actions .coupon .input-text { min-height: 46px; padding: 10px 13px; border: 1px solid #bbb; border-radius: 7px; } .woocommerce-checkout #payment { background: #f4f4f4; border-radius: 12px; } .woocommerce-message, .woocommerce-info { border-top-color: #cc0000; } .woocommerce-message::before, .woocommerce-info::before { color: #cc0000; } @media (max-width: 782px) { /* Na tej širini WordPress administratorsko vrstico prestavi iz "position:fixed" v "position:absolute" (vrstica torej ni več pripeta na vrh, ampak se ob pomikanju navzdol odmakne skupaj z vsebino). Prejšnje pravilo (top:46px) je to vrzel med (zdaj odmaknjeno) administratorsko vrstico in fiksno navigacijo ohranjalo TUDI po pomiku navzdol, zaradi česar je navigacija obstala 46px pod vrhom zaslona z vidnim praznim/odrezanim prostorom nad njo. Ker vrstica na tej širini ne zaseda trajnega prostora na vrhu, mora biti navigacija enako kot pri neprijavljenih uporabnikih vedno poravnana na sam vrh (top:0), tako na vrhu strani kot po pomiku navzdol. */ .admin-bar .navbar-fixed-top { top: 0; } } @media (max-width: 767px) { #home { min-height: 720px; height: 100svh; } #home h1 { font-size: 52px; } #home h3 { font-size: 24px; } footer { padding: 70px 24px; background-attachment: scroll; } .mggym-shop, .mggym-content { padding-top: 100px; } .mggym-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { padding: 10px; } } @media (max-width: 480px) { .woocommerce ul.products { grid-template-columns: 1fr; } } /* ================================ IZPOSTAVLJENI IZDELKI (naslovnica) ================================ */ #trgovina .mggym-featured-products ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.5vw, 30px); list-style: none; margin: 40px 0 0 0; padding: 0; } #trgovina .mggym-featured-products ul.products li.product { background: transparent; border: none; box-shadow: none; padding: 0; margin: 0; text-align: center; } #trgovina .mggym-featured-products ul.products li.product a { text-decoration: none; box-shadow: none; } #trgovina .mggym-featured-products ul.products li.product img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); margin-bottom: 16px; transition: transform 0.25s ease; } #trgovina .mggym-featured-products ul.products li.product a:hover img { transform: scale(1.03); } #trgovina .mggym-featured-products ul.products li.product .woocommerce-loop-product__title { font-size: clamp(15px, 1.1vw, 18px); font-weight: 700; color: #000; margin: 0 auto 8px auto; background: rgba(255,255,255,0.85); display: block; width: fit-content; max-width: 100%; padding: 6px 16px; border-radius: 8px; } #trgovina .mggym-featured-products ul.products li.product .price { display: block; width: fit-content; max-width: 100%; margin: 0 auto 14px auto; background: rgba(255,255,255,0.85); padding: 4px 16px; border-radius: 8px; color: #cc0000; font-weight: 700; } #trgovina .mggym-featured-products ul.products li.product .button { display: inline-block; padding: 12px 30px; border: 2px solid #000; border-radius: 999px; color: #000; background: rgba(255,255,255,0.85); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; font-size: 12px; transition: all 0.25s; } #trgovina .mggym-featured-products ul.products li.product .button:hover { background: #000; color: #fff; } #trgovina .mggym-coming-products { text-align: center; color: #666; max-width: 700px; margin: 40px auto 0 auto; } @media (max-width: 767px) { #trgovina .mggym-featured-products ul.products { grid-template-columns: repeat(2, 1fr); } } /* Ozadje strani trgovine (Shop, kategorije, izdelek) — glej tudi novo skupno ozadje za .mggym-shop / Moj račun v razdelku "POSODOBLJEN VIDEZ" na koncu datoteke */ body.woocommerce-shop .woocommerce-result-count, body.woocommerce-shop .woocommerce-ordering select { background: rgba(255,255,255,0.9); padding: 6px 14px; border-radius: 8px; } /* Gumb KUPI pred CENIK pri vsakem programu */ .program-btn.btn-kupi { background: #cc0000; border-color: #cc0000; color: #fff; } .program-btn.btn-kupi:hover { background: #a30000; border-color: #a30000; color: #fff; } /* ========================================================= POSODOBLJEN VIDEZ — MOJ RAČUN & TRGOVINA (dodano 3.9.2026) Popravlja: prelom glavnega menija čez naslov strani na širinah 768-1149px (glej nov prelom menija spodaj), prevelike naslove "Moj račun"/"Trgovina"/ime izdelka, doda fotografsko ozadje + svetlo "kartico" za vsebino, uredi izgled zavihkov Moj račun ter prepreči vodoravno raztezanje strani zaradi dolgih e-poštnih naslovov/tabel/obrazcev. ========================================================= */ /* --- 1) Glavni meni: prelom v "hamburger" meni premaknjen s 768px na 1150px, ker se z dodano povezavo "Moj račun" 8 povezav + logotip med 768-1149px ne prilega več v eno vrstico in se lomi čez naslov. --- */ @media (min-width: 768px) and (max-width: 1149px) { /* Logotip je podedoval line-height:90px (namenjen širokemu meniju pri >=1150px), medtem ko je vrstica na tej širini (s hamburger gumbom) visoka le 50px (visino doloca privzeta Bootstrap .navbar-brand height:50px). Zaradi neujemanja se je besedilo logotipa navidezno 'izlilo' pod belo vrstico na fotografijo. Poravnamo line-height na dejansko visino vrstice, da je logotip navpicno na sredini in znotraj bele vrstice na celotnem obmocju 768-1149px. */ .navbar-default .navbar-brand { line-height: 50px; padding-top: 0; padding-bottom: 0; } .navbar-default .navbar-header { float: none; } .navbar-default .navbar-toggle { display: block; } .navbar-default .navbar-collapse.collapse { display: none !important; } .navbar-default .navbar-collapse.collapse.in { display: block !important; } .navbar-default .navbar-nav { float: none !important; margin: 7.5px -15px; } .navbar-default .navbar-nav > li { float: none; } .navbar-default .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; } } @media (min-width: 1150px) { .navbar-default .navbar-toggle { display: none; } .navbar-default .navbar-collapse.collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; } /* Logotip (line-height 90px) in povezave menija (privzeto 60px) sta imela različno višino vrstice, zato so bile povezave navidezno dvignjene nad sredino te 90px-visoke vrstice namesto poravnane z logotipom. Ko je meni v eni vodoravni vrstici (>=1150px), ju izenačimo. */ .navbar-default .navbar-nav > li > a { line-height: 90px; } } /* --- 2) Svetla "kartica" za vsebino nad fotografskim ozadjem (Moj račun, Trgovina, kategorije, izdelek) --- */ .mggym-page-card { background: #fff; border-radius: 18px; padding: clamp(20px, 4vw, 48px); box-shadow: 0 20px 50px rgba(0,0,0,.18); } @media (max-width: 767px) { .mggym-page-card { border-radius: 12px; padding: 22px 16px; } } /* Na strani Moj račun ne rabimo vsiljene 70vh višine - vsebina naj bo samo tako visoka, kot jo dejansko potrebuje (manj odvečnega praznega prostora) */ body.woocommerce-account .mggym-content { min-height: 0; } /* --- 3) Postavitev zavihkov znotraj "Moj račun" --- */ .woocommerce-account .woocommerce { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; } .woocommerce-MyAccount-navigation { flex: 0 0 220px; } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid #eee; border-radius: 14px; overflow: hidden; } .woocommerce-MyAccount-navigation li { border-bottom: 1px solid #eee; } .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; } .woocommerce-MyAccount-navigation li a { display: block; padding: 13px 18px; color: #000; text-decoration: none; font-weight: 600; font-size: 15px; } .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover { background: #cc0000; color: #fff; } .woocommerce-MyAccount-content { flex: 1 1 320px; min-width: 0; } @media (max-width: 767px) { .woocommerce-account .woocommerce { flex-direction: column; gap: 18px; } .woocommerce-MyAccount-navigation { flex: 1 1 auto; width: 100%; } .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; } .woocommerce-MyAccount-navigation li { border-bottom: none; border-right: 1px solid #eee; flex: 1 1 auto; } .woocommerce-MyAccount-navigation li:last-child { border-right: none; } .woocommerce-MyAccount-navigation li a { padding: 10px 8px; font-size: 13px; text-align: center; } .woocommerce-MyAccount-content { width: 100%; } } /* --- 4) Zaščita pred vodoravnim raztezanjem strani (dolgi e-poštni naslovi, obrazci, tabele naročil/naslovov) --- */ .woocommerce-MyAccount-content p, .woocommerce-MyAccount-content li, .woocommerce-MyAccount-content td, .woocommerce-MyAccount-content th, .woocommerce-MyAccount-content address, .woocommerce-MyAccount-content label { overflow-wrap: anywhere; word-break: break-word; } .woocommerce-MyAccount-content table, .woocommerce table.shop_table { max-width: 100%; } .woocommerce-MyAccount-content .woocommerce-orders-table, .woocommerce-MyAccount-content table.shop_table_responsive { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .woocommerce-MyAccount-content form, .woocommerce-MyAccount-content .woocommerce-form-login, .woocommerce-MyAccount-content .woocommerce-form-register, .woocommerce form.woocommerce-form-login, .woocommerce form.woocommerce-form-register { max-width: 100%; } .woocommerce-MyAccount-content input, .woocommerce-MyAccount-content select, .woocommerce-MyAccount-content textarea, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea { max-width: 100%; box-sizing: border-box; } .u-columns.woocommerce-Addresses, .u-columns.col2-set { display: flex; flex-wrap: wrap; gap: 24px; } .u-columns.woocommerce-Addresses .u-column1, .u-columns.woocommerce-Addresses .u-column2, .u-columns.col2-set .u-column1, .u-columns.col2-set .u-column2 { flex: 1 1 280px; width: auto; float: none; } /* --- 5) Izdelek (single product): slika + opis drug ob drugem na računalniku, drug pod drugim na telefonu; dovolj velik gumb za dotik --- */ .single-product div.product div.images, .single-product div.product div.summary { box-sizing: border-box; } @media (max-width: 767px) { .single-product div.product div.images, .single-product div.product div.summary { width: 100% !important; float: none !important; } .single-product .woocommerce-product-gallery { margin-bottom: 20px; } } .single_add_to_cart_button { min-height: 46px; padding-top: 14px !important; padding-bottom: 14px !important; } table.variations select { min-height: 44px; max-width: 100%; } .quantity .qty { min-height: 44px; min-width: 54px; }