/* * ZP Sport — brand stil (modernized) * Brand boje: žuta (PRIMARY action), plava (SECONDARY/headings), bijela (TERTIARY/background) * * CSS varijable se inline-aju iz functions.php (zps_inline_brand_vars). */ /* === Tipografija === */ body, .flatsome-style, .woocommerce { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--zps-text); font-size: 16px; line-height: 1.6; } /* * Override Flatsome heading font + color. * Flatsome koristi --fontHeading custom property + ima brojne specifične selektore * (.entry-title, .stack-title-inner, .vc_custom_heading itd.) — moramo ih sve pokriti * i upotrijebiti !important da Flatsome inline-style override ne pobjedi. */ :root, body, body.flatsome, body .row, body .section { --fontHeading: "Bebas Neue", "Oswald", "Impact", "Helvetica Neue", sans-serif; } html body h1, html body h2, html body h3, html body h4, html body h5, html body h6, html body .heading-font, html body .entry-title, html body .product_title, html body .vc_custom_heading, html body .uppercase, html body .stack-title-inner, html body .ux-banner h1, html body .ux-banner h2, html body .ux-banner h3, html body .text-box h1, html body .text-box h2, html body .text-box h3, html body .text-box h4 { font-family: "Bebas Neue", "Oswald", "Impact", "Helvetica Neue", sans-serif !important; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.1; font-weight: 400 !important; } /* Brand boja na headingovima — ali NE na onima u tamnom kontekstu (banner, footer, CTA section) gdje su namijenjeni biti svijetli. Pokrivamo to s eksplicitnom listom svijetlih kontekstâ. */ html body h1, html body h2, html body h3, html body h4, html body h5, html body h6, html body .entry-title, html body .product_title { color: var(--zps-blue) !important; } /* Iznimke za tamne/coloured pozadine — heading mora ostati bijel/žut */ html body .dark h1, html body .dark h2, html body .dark h3, html body .dark h4, html body .dark h5, html body .dark h6, html body [data-text-color="light"] h1, html body [data-text-color="light"] h2, html body [data-text-color="light"] h3, html body [data-text-color="light"] h4, html body [data-text-color="light"] h5, html body [data-text-color="light"] h6, html body .text-color-light h1, html body .text-color-light h2, html body .text-color-light h3, html body .text-color-light h4, html body .text-color-light h5, html body .text-color-light h6, html body .ux-banner.dark h1, html body .ux-banner.dark h2, html body .ux-banner.dark h3, html body .ux-banner h1[style*="color"], html body .ux-banner h2[style*="color"], html body .ux-banner h3[style*="color"], html body .footer h1, html body .footer h2, html body .footer h3, html body .footer h4, html body footer h1, html body footer h2, html body footer h3, html body footer h4 { color: inherit !important; } /* === Typography scale === * Default (sve stranice osim home): h1 mora biti puno veći od h2 — minimum 16px gap * na desktopu (h1=72px, h2=44.8px → 27px gap). Bebas Neue je condensed pa veće * razlike izgledaju prirodnije. */ html body h1 { font-size: clamp(2.5rem, 4.8vw, 4.2rem) !important; } /* ~67px max */ html body h2 { font-size: clamp(1.6rem, 3vw, 2.8rem) !important; } /* ~44.8px max — 22px gap */ html body h3 { font-size: clamp(1.25rem, 2.2vw, 1.75rem) !important; } html body h4 { font-size: clamp(1.05rem, 1.7vw, 1.3rem) !important; } html body h5 { font-size: clamp(0.95rem, 1.4vw, 1.1rem) !important; } /* Homepage (body.home) — h2 mora biti iste veličine kao h1 na ostalim stranicama. * Body.home klasu WordPress automatski stavlja na kad je trenutna stranica * postavljena kao "Front page" u Settings → Reading. */ html body.home h2, html body.home .row h2, html body.home section h2, html body.home .text-box h2 { font-size: clamp(2.5rem, 4.8vw, 4.2rem) !important; } /* === Header === */ .header-main, .header-bottom, header.header { background: var(--zps-white); border-bottom: none; } .header-bg-color, .header-bg-image { background: var(--zps-white) !important; } /* Žuti accent ispod headera */ .header-wrapper::after, .header-wrapper { border-bottom: 4px solid var(--zps-yellow) !important; } .header-nav a, .header-nav-main a, .nav-line-bottom > li > a, .header-nav .nav-top-link, .header-nav-main .nav-top-link { /* color: var(--zps-blue) !important; */ font-family: "Bebas Neue", "Oswald", "Impact", sans-serif !important; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.05rem; } .header-nav a:hover, .header-nav-main a:hover, .nav-line-bottom > li > a:hover { /* color: var(--zps-white) !important; */ } .nav-line-bottom > li > a:after { background: var(--zps-yellow) !important; height: 3px !important; } /* === Top bar === */ .top-bar { background: var(--zps-blue) !important; color: #fff; font-size: 0.85rem; } .top-bar a { color: #fff !important; } .top-bar a:hover { color: var(--zps-yellow) !important; } /* === Buttons — ŽUTA JE PRIMARY === */ /* Sve buttone (uključujući Add to Cart, CTA, Flatsome buttoni) — Bebas Neue */ html body .button, html body button, html body input[type="submit"], html body input[type="button"], html body .woocommerce a.button, html body .woocommerce button.button, html body .woocommerce-page a.button, html body .woocommerce-page button.button, html body .woocommerce a.button.alt, html body .woocommerce button.button.alt, html body .single_add_to_cart_button, html body .add_to_cart_button, html body .checkout-button, html body .ux-button { font-family: "Bebas Neue", "Oswald", "Impact", sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.05rem; } .button.primary, button.primary, input.button.primary, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce-page button.button.alt, .woocommerce-page input.button.alt, .is-yellow, .button.alert, .button.is-link, .single_add_to_cart_button, .checkout-button { background-color: var(--zps-yellow) !important; color: var(--zps-blue) !important; border: 0 !important; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.85em 1.6em; border-radius: 4px; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 14px rgba(245, 196, 0, 0.4); font-size: 1.05rem; } .button.primary:hover, button.primary:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .button.alert:hover, .is-yellow:hover { background-color: #FFC400 !important; color: var(--zps-blue) !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245, 196, 0, 0.5); } .button.secondary { background-color: var(--zps-blue) !important; color: var(--zps-white) !important; border: 0 !important; } .button.secondary:hover { background-color: #002b7a !important; } .wc-block-components-button:not(.is-link):hover { color: var(--zps-white) !important; background-color: var(--zps-blue); } /* === Links === */ a { color: var(--zps-blue); transition: color 150ms ease; } a:hover { color: #FFA800; } /* === Footer === */ .footer-wrapper, .footer-1, .footer-2, footer.footer { background: var(--zps-blue); color: var(--zps-white); } .footer-wrapper *, footer .widget, footer h4, footer h3 { color: var(--zps-white); } .footer h4 { color: var(--zps-yellow); border-bottom: 2px solid var(--zps-yellow); padding-bottom: 0.5rem; display: inline-block; margin-bottom: 1rem; } .footer a { color: rgba(255, 255, 255, 0.85); } .footer a:hover { color: var(--zps-yellow); text-decoration: none; } .absolute-footer { background: #002b7a; color: rgba(255, 255, 255, 0.7); padding: 1rem 0; font-size: 0.85rem; } .absolute-footer a { color: var(--zps-yellow); } /* === Forme === */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], textarea, select { border: 1.5px solid #e1e5ec; border-radius: 6px; padding: 0.65em 0.85em; font-size: 1rem; transition: all 150ms ease; background: #fff; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--zps-yellow); box-shadow: 0 0 0 3px rgba(245, 196, 0, 0.2); } /* === Najniža cijena 30 dana === */ .zps-lowest-price { margin-top: 0.5em; color: #888; font-size: 0.82em; font-style: italic; } /* === Helper klase === */ .zps-text-blue { color: var(--zps-blue); } .zps-text-yellow { color: var(--zps-yellow); } .zps-bg-blue { background: var(--zps-blue); color: var(--zps-white); } .zps-bg-yellow { background: var(--zps-yellow); color: var(--zps-text); } /* === Žuti horizontalni accent strip — koristi se kao section divider === */ .zps-accent-strip { height: 4px; background: var(--zps-yellow); width: 80px; margin: 1rem auto; border-radius: 2px; } /* === Step ikone na homepage "Kako naručiti" — bez kruga, plavo+žuto === */ .zps-step-icon { display: inline-block; width: 80px; height: 80px; margin: 0 auto 1rem; transition: transform 250ms ease; } .zps-step-icon svg { width: 100%; height: 100%; display: block; } .zps-step-icon:hover { transform: translateY(-4px) scale(1.05); } /* === Section-level brand polish === */ section, .section { position: relative; } /* === Dekorativni accent ispod heading-a === */ /* Aplicira na većinu h1/h2 (page, post, section). Ne na sidebar widgete jer oni imaju svoj stil. */ .entry-title, .product_title, h1.entry-title, .row h1, .row h2, section h1, section h2, .section-content h1, .section-content h2 { position: relative; padding-bottom: 0.6rem; margin-bottom: 1.5rem; } .entry-title::after, .product_title::after, .row h1::after, .row h2::after, section h1::after, section h2::after, .section-content h1::after, .section-content h2::after { content: ''; display: block; width: 64px; height: 5px; background: linear-gradient(90deg, var(--zps-yellow) 0%, var(--zps-yellow) 40%, var(--zps-blue) 40%, var(--zps-blue) 100%); margin-top: 0.65rem; border-radius: 3px; transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Kad je h1/h2 unutar text-center kolone, accent linija centrira se */ [align="center"] h1::after, [align="center"] h2::after, .text-center h1::after, .text-center h2::after, .is-center h2::after, .has-text-align-center h2::after { margin-left: auto; margin-right: auto; } /* Hover na heading prosiri liniju (subtle interaction) */ h1:hover::after, h2:hover::after { width: 90px; } /* === Shop page hero — H1 isto kao na ostalim stranicama === */ .zps-shop-hero { background: linear-gradient(135deg, var(--zps-blue, #001A66) 0%, #002b7a 100%); color: #fff; padding: 3.5rem 2rem 3rem; margin: 0 0 2rem; text-align: center; position: relative; overflow: hidden; border-radius: 0; } .zps-shop-hero::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 6px; background: var(--zps-yellow, #F5C400); } .zps-shop-hero__inner { max-width: 920px; margin: 0 auto; position: relative; } .zps-shop-hero__title { font-family: "Bebas Neue", "Oswald", "Impact", sans-serif !important; font-size: clamp(2.5rem, 4.8vw, 4.2rem) !important; color: #fff !important; margin: 0 0 0.5rem; line-height: 1.05; letter-spacing: 0.04em; text-transform: uppercase; } .zps-shop-hero__title::after { content: ''; display: block; width: 80px; height: 5px; background: var(--zps-yellow, #F5C400); margin: 0.85rem auto 0; border-radius: 3px; } .zps-shop-hero__subtitle { font-size: 1.05rem; color: rgba(255, 255, 255, 0.85); margin: 0; max-width: 640px; margin-left: auto; margin-right: auto; line-height: 1.45; } /* === Sakrij Flatsome-ovu small "Shop" page-title koja se pojavljuje gore lijevo * iznad kategorija sidebara. Imamo svoj puni hero, ovaj mali title je suvisan. === */ body.woocommerce-shop .shop-page-title, body.woocommerce-shop .page-title.shop-page-title, body.woocommerce-shop > .page-title-inner h1, body.tax-product_cat .shop-page-title, body.tax-product_cat .page-title-inner h1, .woocommerce-products-header__title, .woocommerce-products-header { display: none !important; } /* Hero margin-bottom kad je full-width iznad shop loopa */ body.woocommerce-shop .zps-shop-hero, body.tax-product_cat .zps-shop-hero { margin: 0 0 2rem 0; } /* === Shop title — minimalistican stil, kao O NAMA === */ .zps-shop-title { padding: 0; margin: 0 auto; max-width: 1230px; } .zps-shop-title .entry-title { color: var(--zps-blue) !important; text-align: left; margin: 0 0 1.25rem; } /* Hide stari hero ako negdje ostao */ .zps-shop-hero { display: none !important; } /* === Tekst iznad payment ikona u footeru === */ .footer-secondary .zps-footer-payment-text { display: block; margin: 0 0 0.5rem; font-size: 0.85em; line-height: 1.4; opacity: 0.85; } .copyright-footer { margin-top: 30px; } .payment-icons { display: block !important; text-align: right; } /* Vlastite payment ikone (slike) uskladene s visinom Flatsome SVG ikona */ .payment-icons .payment-icon img.zps-payment-img { height: 24px; width: auto; vertical-align: middle; display: inline-block; } .footer-1 #text-3 { font-size: 14px !important; } .category-logo { width: 200px !important; margin-top: -15px; } .term-description a { color: var(--zps-blue); text-decoration: underline; } .term-description a:hover { text-decoration: none; } .social-icons .button i { top: 1px !important; }