/* * Lumemar — main.css * Farby sú definované ako CSS premenné v cez functions.php * Fonty: Cormorant Garamond (serif) + Inter (sans-serif) */ /* ═══════════════════════════════════════════ RESET + BASE ═══════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Fallback farby — prepísané z PHP cez CSS premenné */ --cream: #F7F3EE; --linen: #EDE6DC; --ink: #1C1916; --ember: #9C6B3C; --smoke: #7A736C; --stone: #C8BFB2; /* Typografia */ --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Inter', system-ui, -apple-system, sans-serif; /* Spacing systém */ --space-xs: 8px; --space-sm: 16px; --space-md: 32px; --space-lg: 64px; --space-xl: 100px; --space-2xl: 140px; /* Nav výška */ --nav-h: 64px; /* Prechody */ --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --dur: 0.25s; } html { scroll-behavior: smooth; font-size: 16px; } body { background-color: var(--cream); color: var(--ink); font-family: var(--sans); font-weight: 300; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } ul, ol { list-style: none; } /* Prístupnosť — screen reader text */ .screen-reader-text, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip link */ .skip-link { position: absolute; top: -100%; left: var(--space-sm); padding: var(--space-xs) var(--space-sm); background: var(--ink); color: #fff; font-size: 13px; z-index: 9999; text-decoration: none; } .skip-link:focus { top: var(--space-xs); } /* ═══════════════════════════════════════════ TYPOGRAFIA — spoločné prvky ═══════════════════════════════════════════ */ .section-eyebrow { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ember); margin-bottom: 12px; display: flex; align-items: center; gap: 12px; } .section-eyebrow::before { content: ''; display: block; width: 24px; height: 1px; background: var(--ember); flex-shrink: 0; } .section-title { font-family: var(--serif); font-size: clamp(32px, 3.5vw, 52px); font-weight: 300; line-height: 1.08; } .section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-lg); } .section-link { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--smoke); text-decoration: none; border-bottom: 1px solid var(--stone); padding-bottom: 2px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); white-space: nowrap; } .section-link:hover { color: var(--ember); border-color: var(--ember); } /* ═══════════════════════════════════════════ TLAČIDLÁ ═══════════════════════════════════════════ */ .btn-dark { display: inline-block; padding: 15px 36px; background: var(--ink); color: #fff; font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; transition: background var(--dur) var(--ease); } .btn-dark:hover, .btn-dark:focus-visible { background: var(--ember); outline: none; } .btn-ghost { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--smoke); text-decoration: none; border-bottom: 1px solid var(--stone); padding-bottom: 2px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn-ghost:hover, .btn-ghost:focus-visible { color: var(--ember); border-color: var(--ember); outline: none; } .btn-submit { width: 100%; padding: 15px; background: var(--ink); color: #fff; font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; border: none; cursor: pointer; transition: background var(--dur) var(--ease); } .btn-submit:hover { background: var(--ember); } /* ═══════════════════════════════════════════ NAV ═══════════════════════════════════════════ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; } .site-nav { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 48px; background: rgba(247, 243, 238, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(200, 191, 178, 0.3); } /* Logo */ .nav-brand { display: flex; align-items: center; } .nav-brand .custom-logo-link img { height: 36px; width: auto; } .nav-logo-text { font-family: var(--serif); font-size: 21px; font-weight: 300; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--ink); } /* Pravá strana */ .nav-right { display: flex; align-items: center; gap: 32px; } /* Nav menu — WordPress generuje ul priamo */ .nav-right ul.nav-links, ul.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; } .nav-right ul.nav-links li, ul.nav-links li { margin: 0; padding: 0; } .nav-right ul.nav-links a, ul.nav-links a { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--smoke); transition: color var(--dur) var(--ease); white-space: nowrap; } .nav-right ul.nav-links a:hover, ul.nav-links .current-menu-item > a { color: var(--ink); } /* Ikony */ .nav-icons { display: flex; align-items: center; gap: 18px; margin-left: 8px; } .nav-icon-btn { display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 4px; position: relative; color: inherit; text-decoration: none; } .nav-icon-btn svg { width: 18px; height: 18px; stroke: var(--smoke); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--dur) var(--ease); } .nav-icon-btn:hover svg { stroke: var(--ink); } /* Počítadlo košíka */ .nav-cart-count { position: absolute; top: -4px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--ember); color: #fff; font-size: 9px; font-weight: 500; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.5); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); pointer-events: none; } .nav-cart-count.is-visible { opacity: 1; transform: scale(1); } /* Hamburger */ .nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 4px; } .nav-hamburger-line { display: block; width: 100%; height: 1.5px; background: var(--ink); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); transform-origin: center; } .nav-hamburger[aria-expanded="true"] .nav-hamburger-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-hamburger[aria-expanded="true"] .nav-hamburger-line:nth-child(2) { opacity: 0; } .nav-hamburger[aria-expanded="true"] .nav-hamburger-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile menu */ .nav-mobile { position: fixed; top: 0; right: 0; width: min(320px, 85vw); height: 100dvh; background: var(--cream); z-index: 200; padding: calc(var(--nav-h) + var(--space-lg)) var(--space-lg) var(--space-lg); transform: translateX(100%); transition: transform 0.35s var(--ease); overflow-y: auto; } .nav-mobile[aria-hidden="false"] { transform: translateX(0); } .nav-mobile-links { display: flex; flex-direction: column; gap: var(--space-md); } .nav-mobile-links a { font-family: var(--serif); font-size: 32px; font-weight: 300; text-decoration: none; color: var(--ink); transition: color var(--dur) var(--ease); } .nav-mobile-links a:hover { color: var(--ember); } .nav-mobile-close { position: absolute; top: var(--space-md); right: var(--space-md); background: none; border: none; font-size: 20px; cursor: pointer; color: var(--smoke); line-height: 1; padding: 8px; } .nav-mobile-backdrop { position: fixed; inset: 0; background: rgba(28, 25, 22, 0.5); z-index: 190; opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease); } .nav-mobile-backdrop.is-active { opacity: 1; pointer-events: all; } /* Search panel */ .search-panel { position: fixed; top: 0; left: 0; right: 0; z-index: 150; background: var(--cream); padding: var(--space-lg) 48px; transform: translateY(-100%); transition: transform 0.3s var(--ease); border-bottom: 1px solid var(--linen); } .search-panel[aria-hidden="false"] { transform: translateY(0); } .search-panel-inner { display: flex; align-items: center; gap: var(--space-md); max-width: 600px; margin: 0 auto; } .search-panel .search-form { flex: 1; display: flex; } .search-panel .search-field { flex: 1; padding: 14px 18px; border: 1px solid var(--stone); background: transparent; font-family: var(--sans); font-size: 15px; color: var(--ink); outline: none; } .search-panel .search-field:focus { border-color: var(--ember); } .search-panel .search-submit { padding: 14px 24px; background: var(--ink); color: #fff; border: none; cursor: pointer; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--sans); } .search-panel-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--smoke); padding: 8px; flex-shrink: 0; } /* ═══════════════════════════════════════════ HERO ═══════════════════════════════════════════ */ .hero { padding-top: var(--nav-h); min-height: 100svh; display: grid; grid-template-columns: 52% 48%; } .hero-left { display: flex; flex-direction: column; justify-content: center; padding: var(--space-xl) var(--space-lg) var(--space-xl) 80px; } .hero-eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ember); margin-bottom: var(--space-md); display: flex; align-items: center; gap: 12px; } .hero-eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: var(--ember); flex-shrink: 0; } .hero-h1 { font-family: var(--serif); font-size: clamp(52px, 5.5vw, 88px); font-weight: 300; line-height: 1.02; letter-spacing: -0.01em; margin-bottom: var(--space-md); } .hero-h1 em { font-style: italic; color: var(--ember); } .hero-sub { font-size: 15px; color: var(--smoke); max-width: 360px; line-height: 1.8; margin-bottom: var(--space-lg); } .hero-btns { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; } /* Foto mriežka */ .hero-right { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; background: var(--ink); padding: 3px; } .hero-photo { overflow: hidden; position: relative; background: var(--linen); } .hero-photo--main { grid-row: span 2; } .hero-photo .hero-img, .hero-photo .photo-placeholder { width: 100%; height: 100%; object-fit: cover; } .photo-placeholder { background: var(--linen); } /* ═══════════════════════════════════════════ OBSAHOVÉ BLOKY ═══════════════════════════════════════════ */ .content-blocks { padding: var(--space-xl) 80px; } .blocks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--ink); padding: 4px; } .cblock { background: var(--cream); position: relative; overflow: hidden; transition: transform var(--dur) var(--ease); } .cblock:hover { transform: scale(0.99); } .cblock--wide { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; } .cblock--wide .cblock-img { aspect-ratio: auto; } .cblock--wide .cblock-body { display: flex; flex-direction: column; justify-content: center; padding: 48px; } .cblock--wide .cblock-title { font-size: 28px; margin-bottom: 14px; } .cblock--wide .cblock-text { font-size: 14px; max-width: 320px; margin-bottom: 24px; } .cblock-img { aspect-ratio: 4/3; background: var(--linen); overflow: hidden; } .cblock-img-src { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); } .cblock:hover .cblock-img-src { transform: scale(1.03); } .cblock-img-placeholder { width: 100%; height: 100%; background: var(--linen); } .cblock-body { padding: 28px 28px 32px; } .cblock-tag { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember); margin-bottom: 10px; } .cblock-title { font-family: var(--serif); font-size: 22px; font-weight: 300; line-height: 1.2; margin-bottom: 10px; } .cblock-text { font-size: 13px; color: var(--smoke); line-height: 1.7; margin-bottom: 20px; } .cblock-text p { margin-bottom: 0; } /* Admin — edit link */ .block-edit-link { position: absolute; top: 10px; right: 10px; background: var(--ember); color: #fff; font-size: 12px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; text-decoration: none; opacity: 0; transition: opacity var(--dur) var(--ease); } .cblock:hover .block-edit-link { opacity: 1; } .admin-add-btn { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); text-decoration: none; border: 1px dashed var(--stone); padding: 10px 18px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); white-space: nowrap; } .admin-add-btn:hover { color: var(--ember); border-color: var(--ember); } .blocks-empty { font-size: 14px; color: var(--smoke); padding: var(--space-md); } .blocks-empty a { color: var(--ember); } /* ═══════════════════════════════════════════ PRODUKTY ═══════════════════════════════════════════ */ .products { padding: var(--space-xl) 80px; background: var(--linen); } .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .pcard { background: var(--cream); position: relative; transition: transform 0.35s var(--ease); } .pcard:hover { transform: translateY(-5px); } /* Overlay link — celá karta klikateľná */ .pcard-overlay-link { position: absolute; inset: 0; z-index: 4; /* musí byť nad obrázkami (1,2) aj nad imgs kontajnerom */ } /* Tlačidlo a názov musia byť nad overlay linkom */ .pcard-name a, .pcard-btn, .pcard-footer { position: relative; z-index: 5; } .pcard-imgs { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--linen); } .pcard-badge { position: absolute; top: 14px; left: 14px; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 10px; z-index: 3; pointer-events: none; } .pcard-badge--best { background: var(--ink); color: #fff; } .pcard-badge--new { background: var(--ember); color: #fff; } .pcard-badge--sold { background: var(--stone); color: var(--ink); } .pcard-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s var(--ease); } .pcard-img--main { opacity: 1; z-index: 1; } .pcard-img--hover { opacity: 0; z-index: 2; } .pcard:hover .pcard-img--main { opacity: 0; } .pcard:hover .pcard-img--hover { opacity: 1; } .pcard-img--placeholder { background: var(--linen); } .pcard-body { padding: 18px 20px 24px; } .pcard-scent { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--smoke); margin-bottom: 6px; } .pcard-name { font-family: var(--serif); font-size: 22px; font-weight: 300; margin-bottom: 14px; } .pcard-name a { text-decoration: none; color: inherit; position: relative; z-index: 2; } .pcard-footer { display: flex; align-items: center; justify-content: space-between; } .pcard-price { font-family: var(--serif); font-size: 20px; font-weight: 300; } /* WooCommerce price HTML */ .pcard-price .woocommerce-Price-amount { font-family: var(--serif); font-size: 20px; font-weight: 300; } .pcard-price del { color: var(--stone); font-size: 14px; margin-right: 6px; } .pcard-price ins { text-decoration: none; color: var(--ember); } .pcard-btn { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--smoke); background: none; border: none; border-bottom: 1px solid var(--stone); padding-bottom: 1px; cursor: pointer; font-family: var(--sans); text-decoration: none; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); position: relative; z-index: 2; } .pcard-btn:hover:not(.pcard-btn--sold) { color: var(--ember); border-color: var(--ember); } .pcard-btn--sold { color: var(--stone); cursor: default; border-color: transparent; } /* AJAX stav */ .pcard-btn.is-adding { opacity: 0.6; pointer-events: none; } .pcard-btn.is-added { color: var(--ember); border-color: var(--ember); } /* ═══════════════════════════════════════════ O NÁS ═══════════════════════════════════════════ */ .about { display: grid; grid-template-columns: 1fr 1fr; min-height: 75vh; } .about-text { display: flex; flex-direction: column; justify-content: center; padding: var(--space-xl) 80px; background: var(--ink); color: #fff; } .about-eyebrow { color: var(--ember); } .about-eyebrow::before { background: var(--ember); } .about-h2 { font-family: var(--serif); font-size: clamp(34px, 3.5vw, 56px); font-weight: 300; line-height: 1.08; margin-bottom: var(--space-md); } .about-h2 em { font-style: italic; color: var(--ember); } .about-p { font-size: 15px; color: rgba(255, 255, 255, 0.55); line-height: 1.85; max-width: 400px; margin-bottom: 18px; } .about-signature { margin-top: var(--space-md); font-family: var(--serif); font-size: 22px; font-style: italic; color: rgba(255, 255, 255, 0.3); } /* Foto mriežka */ .about-photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; background: var(--ink); padding: 3px; } .about-photo { background: var(--linen); overflow: hidden; position: relative; } .about-photo--tall { grid-row: span 2; } .about-img { width: 100%; height: 100%; object-fit: cover; } .about-photo-placeholder { width: 100%; height: 100%; min-height: 200px; background: var(--linen); } /* ═══════════════════════════════════════════ NEWSLETTER ═══════════════════════════════════════════ */ .newsletter { padding: var(--space-xl) 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .nl-eyebrow { color: var(--ember); } .nl-eyebrow::before { background: var(--ember); } .nl-title { font-family: var(--serif); font-size: clamp(28px, 3vw, 46px); font-weight: 300; line-height: 1.1; margin-bottom: 14px; } .nl-sub { font-size: 14px; color: var(--smoke); line-height: 1.75; } .nl-form { display: flex; flex-direction: column; gap: 10px; } .nl-form input[type="text"], .nl-form input[type="email"] { padding: 15px 18px; border: 1px solid var(--stone); background: transparent; font-family: var(--sans); font-size: 14px; font-weight: 300; color: var(--ink); outline: none; transition: border-color var(--dur) var(--ease); -webkit-appearance: none; appearance: none; } .nl-form input:focus { border-color: var(--ember); } .nl-form input::placeholder { color: var(--stone); } .nl-note { font-size: 11px; color: var(--stone); margin-top: 4px; } /* Honeypot — skrytý pred používateľom, viditeľný pre botov */ .nl-honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; tab-index: -1; } /* ═══════════════════════════════════════════ FOOTER ═══════════════════════════════════════════ */ .site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.35); } .footer-inner { padding: 56px 80px 36px; } .footer-top { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); margin-bottom: 28px; } .footer-brand .custom-logo-link img { filter: brightness(0) invert(1); opacity: 0.5; height: 32px; width: auto; margin-bottom: 14px; } .footer-brand .nav-logo-text { font-family: var(--serif); font-size: 18px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); display: block; margin-bottom: 14px; } .footer-brand-text { font-size: 13px; color: rgba(255, 255, 255, 0.3); line-height: 1.7; max-width: 200px; } .footer-col-heading { font-family: var(--sans); font-size: 10px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.3); margin-bottom: 16px; } .footer-col ul li { margin-bottom: 10px; } .footer-col ul li a { font-size: 13px; color: rgba(255, 255, 255, 0.4); text-decoration: none; transition: color var(--dur) var(--ease); } .footer-col ul li a:hover { color: rgba(255, 255, 255, 0.85); } .footer-bottom { text-align: center; } .footer-copyright { font-size: 11px; color: rgba(255, 255, 255, 0.25); } /* ═══════════════════════════════════════════ RESPONZIVITA — tablet ═══════════════════════════════════════════ */ @media (max-width: 1200px) { .site-nav { padding: 0 32px; } .hero-left { padding: var(--space-xl) var(--space-lg) var(--space-xl) 48px; } .content-blocks, .products, .newsletter { padding-left: 48px; padding-right: 48px; } .about-text { padding: var(--space-xl) 48px; } .footer-inner { padding: 48px 48px 32px; } } @media (max-width: 960px) { /* Nav — skryť desktop menu, zobraziť hamburger */ .nav-right ul.nav-links { display: none !important; } .nav-hamburger { display: flex; } /* Hero */ .hero { grid-template-columns: 1fr; min-height: auto; } .hero-left { padding: var(--space-lg) var(--space-md); } .hero-right { min-height: 65vw; grid-template-rows: auto; } .hero-photo--main { grid-row: span 1; } /* Bloky */ .content-blocks { padding: var(--space-lg) var(--space-md); } .blocks-grid { grid-template-columns: 1fr; } .cblock--wide { grid-column: span 1; grid-template-columns: 1fr; } .cblock--wide .cblock-img { aspect-ratio: 4/3; } /* Produkty */ .products { padding: var(--space-lg) var(--space-md); } .products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } /* O nás */ .about { grid-template-columns: 1fr; } .about-text { padding: var(--space-lg) var(--space-md); } .about-photos { min-height: 60vw; grid-template-rows: auto; } .about-photo--tall { grid-row: span 1; } /* Newsletter */ .newsletter { grid-template-columns: 1fr; padding: var(--space-lg) var(--space-md); gap: var(--space-lg); } /* Footer */ .footer-inner { padding: var(--space-lg) var(--space-md) var(--space-md); } .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-md); } /* Section header */ .section-header { flex-direction: column; align-items: flex-start; gap: var(--space-sm); } } @media (max-width: 600px) { :root { --nav-h: 56px; } .site-nav { padding: 0 20px; } /* Hero */ .hero-right { display: none; } .hero { min-height: auto; } /* Produkty — jeden stĺpec */ .products-grid { grid-template-columns: 1fr; } /* Footer */ .footer-top { grid-template-columns: 1fr; } /* Nav mobile */ .nav-icons .nav-icon-btn:not(.nav-cart-btn) { display: none; } } /* ═══════════════════════════════════════════ WORDPRESS ADMIN BAR — kompenzácia Platí len pre admina — zákazník admin bar nevidí ═══════════════════════════════════════════ */ .admin-bar .site-header { top: 32px; } .admin-bar .hero { padding-top: calc(var(--nav-h) + 32px); } .admin-bar .woocommerce, .admin-bar .woocommerce-page { padding-top: calc(var(--nav-h) + 32px); } .admin-bar .page-wrap, .admin-bar .woo-wrap { padding-top: calc(var(--nav-h) + 32px); } .admin-bar .single-product-wrap { padding-top: calc(var(--nav-h) + 32px); } /* Tablet 601–782px — admin bar má 46px a je fixed */ @media (min-width: 601px) and (max-width: 782px) { .admin-bar .site-header { top: 46px; } .admin-bar .hero { padding-top: calc(var(--nav-h) + 46px); } .admin-bar .woocommerce, .admin-bar .woocommerce-page { padding-top: calc(var(--nav-h) + 46px); } .admin-bar .page-wrap, .admin-bar .woo-wrap { padding-top: calc(var(--nav-h) + 46px); } .admin-bar .single-product-wrap { padding-top: calc(var(--nav-h) + 46px); } } /* Pod 600px — WordPress admin bar je absolute (nie fixed), body dostane margin-top: 46px automaticky od WP, náš nav ostáva na top: 0 */ @media (max-width: 600px) { .admin-bar .site-header { top: 0; } .admin-bar .hero { padding-top: var(--nav-h); } .admin-bar .woocommerce, .admin-bar .woocommerce-page { padding-top: var(--nav-h); } .admin-bar .page-wrap, .admin-bar .woo-wrap { padding-top: var(--nav-h); } .admin-bar .single-product-wrap { padding-top: var(--nav-h); } } /* ═══════════════════════════════════════════ VYHĽADÁVANIE — výsledky ═══════════════════════════════════════════ */ .search-results-wrap { padding-bottom: var(--space-xl); } .search-results-inner { max-width: 1200px; margin: 0 auto; padding: var(--space-xl) 80px; } .search-results-header { margin-bottom: var(--space-xl); } .search-results-header .section-title em { font-style: italic; color: var(--ember); } .search-no-results-text { font-size: 15px; color: var(--smoke); margin: var(--space-md) 0; } .search-results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: var(--space-xl); } .search-result-item { background: var(--linen); overflow: hidden; } .search-result-thumb { display: block; aspect-ratio: 4/3; overflow: hidden; } .search-result-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); } .search-result-item:hover .search-result-thumb img { transform: scale(1.03); } .search-result-body { padding: 20px 24px 28px; } .search-result-type { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ember); margin-bottom: 8px; } .search-result-title { font-family: var(--serif); font-size: 22px; font-weight: 300; margin-bottom: 10px; } .search-result-title a { text-decoration: none; color: var(--ink); transition: color var(--dur); } .search-result-title a:hover { color: var(--ember); } .search-result-excerpt { font-size: 13px; color: var(--smoke); line-height: 1.7; margin-bottom: 16px; } /* Stránkovanie výsledkov */ .search-pagination .nav-links, .posts-navigation .nav-links { display: flex; justify-content: center; gap: var(--space-xs); margin-top: var(--space-xl); } .search-pagination .nav-links .page-numbers, .posts-navigation .nav-links .page-numbers { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 13px; color: var(--smoke); text-decoration: none; border: 1px solid var(--stone); transition: all var(--dur); } .search-pagination .nav-links .page-numbers.current, .search-pagination .nav-links .page-numbers:hover, .posts-navigation .nav-links .page-numbers.current, .posts-navigation .nav-links .page-numbers:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .search-pagination .nav-links .page-numbers.dots, .posts-navigation .nav-links .page-numbers.dots { border: none; cursor: default; } @media (max-width: 960px) { .search-results-inner { padding: var(--space-lg) var(--space-md); } .search-results-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .search-results-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════ SOCIÁLNE SIETE ═══════════════════════════════════════════ */ .social-section { padding: var(--space-xl) 80px; background: var(--linen); } .social-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-lg); gap: var(--space-md); } .social-sub { font-size: 15px; color: var(--smoke); line-height: 1.7; max-width: 440px; margin-top: 14px; } /* Ikony */ .social-icons { display: flex; gap: var(--space-sm); flex-shrink: 0; } .social-icon-btn { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid var(--stone); text-decoration: none; color: var(--smoke); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; transition: all var(--dur) var(--ease); } .social-icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .social-icon-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); } /* Instagram feed kontajner */ .ig-feed { margin-top: var(--space-md); } /* Smash Balloon — základné prispôsobenie */ .ig-feed .sbi_item { border-radius: 0 !important; } @media (max-width: 960px) { .social-section { padding: var(--space-lg) var(--space-md); } .social-header { flex-direction: column; align-items: flex-start; } } @media (max-width: 600px) { .social-icon-label { display: none; } .social-icon-btn { padding: 12px; } } /* ═══════════════════════════════════════════ STATICKÉ STRÁNKY (page.php) ═══════════════════════════════════════════ */ .page-inner { max-width: 1100px; margin: 0 auto; padding: var(--space-xl) 80px var(--space-2xl); } /* Account stránka — bez obmedzenej šírky, WC potrebuje priestor */ .page-inner--account { max-width: 100%; width: 100%; padding: 0; } .page-inner--account .page-content, .page-inner--account .page-content .woocommerce { width: 100% !important; max-width: 100% !important; float: none !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } .page-header { margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--linen); } .page-title { font-family: var(--serif); font-size: clamp(32px, 3.5vw, 52px); font-weight: 300; line-height: 1.1; color: var(--ink); } /* Typografia obsahu stránky */ .page-content h2 { font-family: var(--serif); font-size: 26px; font-weight: 300; margin: var(--space-lg) 0 var(--space-sm); color: var(--ink); } .page-content h3 { font-family: var(--serif); font-size: 20px; font-weight: 300; margin: var(--space-md) 0 var(--space-xs); color: var(--ink); } .page-content p { font-size: 15px; color: var(--smoke); line-height: 1.8; margin-bottom: var(--space-sm); } .page-content strong { color: var(--ink); font-weight: 500; } .page-content a { color: var(--ember); text-decoration: underline; } .page-content a:hover { color: var(--ink); } .page-content ul, .page-content ol { padding-left: var(--space-md); margin-bottom: var(--space-sm); } .page-content ul { list-style: disc; } .page-content ol { list-style: decimal; } .page-content li { font-size: 15px; color: var(--smoke); line-height: 1.8; margin-bottom: 6px; } .page-content table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-md); font-size: 14px; } .page-content table th { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--smoke); font-weight: 400; padding: 10px 14px; border-bottom: 1px solid var(--linen); text-align: left; } .page-content table td { padding: 12px 14px; border-bottom: 1px solid var(--linen); color: var(--smoke); vertical-align: top; } @media (max-width: 960px) { .page-inner { padding: var(--space-lg) var(--space-md) var(--space-xl); } } @media (max-width: 600px) { .page-inner { padding: var(--space-md) var(--space-sm) var(--space-xl); } } /* ═══════════════════════════════════════════ PAGE.PHP + WOOCOMMERCE.PHP — obal stránok ═══════════════════════════════════════════ */ .page-wrap, .woo-wrap { padding-top: var(--nav-h); min-height: 60vh; } /* ═══════════════════════════════════════════ SHOP ARCHÍV — custom šablóna ═══════════════════════════════════════════ */ .shop-wrap { padding-top: var(--nav-h); min-height: 60vh; } .admin-bar .shop-wrap { padding-top: calc(var(--nav-h) + 32px); } @media (min-width: 601px) and (max-width: 782px) { .admin-bar .shop-wrap { padding-top: calc(var(--nav-h) + 46px); } } @media (max-width: 600px) { .admin-bar .shop-wrap { padding-top: var(--nav-h); } } .shop-inner { max-width: 1400px; margin: 0 auto; padding: var(--space-lg) 80px var(--space-xl); } .shop-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--linen); } .shop-count { font-size: 12px; letter-spacing: 0.1em; color: var(--stone); text-transform: uppercase; } .shop-pagination { display: flex; justify-content: center; gap: 8px; margin-top: var(--space-xl); } .shop-pagination .page-numbers { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 13px; color: var(--smoke); text-decoration: none; border: 1px solid var(--stone); transition: all var(--dur); } .shop-pagination .page-numbers.current, .shop-pagination .page-numbers:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .shop-pagination .page-numbers.dots { border: none; cursor: default; } .shop-empty { text-align: center; padding: var(--space-xl) 0; } .shop-empty p { font-size: 16px; color: var(--smoke); margin-bottom: var(--space-md); } @media (max-width: 960px) { .shop-inner { padding: var(--space-md) var(--space-md) var(--space-xl); } .shop-header { flex-direction: column; align-items: flex-start; gap: var(--space-sm); } } /* ═══════════════════════════════════════════ PAGE — ACCOUNT VARIANT