/* ========================================================================== Marcel Kušnír Photography - responzivita, mobilné menu, lightbox Inline štýly v šablónach majú vyššiu prioritu, preto tu používame !important - je to zámerné, nie nedbalosť. ========================================================================== */ * { -webkit-tap-highlight-color: transparent; } /* POZOR: overflow-x:hidden na spraví z html scroll kontajner a zablokuje zvislé skrolovanie. Preto ho dávame len na , a to cez "clip", ktoré scroll kontajner nevytvára. */ body { max-width: 100%; overflow-x: hidden; /* záloha pre staršie prehliadače */ overflow-x: clip; } img { max-width: 100%; } /* Viditeľný focus pre klávesnicu (prístupnosť) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #f9d036; outline-offset: 3px; } /* -------------------------------------------------------------------------- HAMBURGER TLAČIDLO - na desktope skryté -------------------------------------------------------------------------- */ .mk-nav-toggle { display: none; background: transparent; border: 0; padding: 10px; cursor: pointer; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; z-index: 60; } .mk-nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; transition: transform .3s ease, opacity .2s ease; } .mk-nav-open .mk-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mk-nav-open .mk-nav-toggle span:nth-child(2) { opacity: 0; } .mk-nav-open .mk-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* -------------------------------------------------------------------------- TABLET -------------------------------------------------------------------------- */ @media (max-width: 1100px) { .mk-nav-links { gap: 18px !important; } .mk-nav-links a { font-size: 10px !important; } .mk-nav-cta { padding: 14px 20px !important; font-size: 11px !important; } } @media (max-width: 960px) { .mk-grid-2 { grid-template-columns: 1fr !important; gap: 28px !important; } .mk-about-grid { grid-template-columns: 1fr !important; gap: 32px !important; } .mk-contact-grid { grid-template-columns: 1fr !important; gap: 36px !important; } .mk-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } .mk-cofotim-row { direction: ltr !important; } .mk-cofotim-row > div { direction: ltr !important; } } /* -------------------------------------------------------------------------- MOBIL - menu sa mení na vysúvacie -------------------------------------------------------------------------- */ @media (max-width: 860px) { .mk-nav-toggle { display: flex !important; } .mk-nav-links { position: fixed !important; inset: 0 !important; background: #111010 !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 26px !important; transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1); z-index: 50; padding: 80px 24px !important; overflow-y: auto; } .mk-nav-open .mk-nav-links { transform: translateX(0); } .mk-nav-links a { font-size: 15px !important; letter-spacing: .18em !important; padding: 10px 0 !important; border-bottom: 0 !important; } .mk-nav-links a.mk-nav-active { color: #f9d036 !important; } .mk-nav-cta { margin-top: 14px !important; padding: 18px 34px !important; font-size: 12px !important; } /* Zamedzí skrolovaniu pozadia pri otvorenom menu */ body.mk-nav-open { overflow: hidden; } /* Hero */ .mk-hero { height: auto !important; min-height: 88vh !important; } .mk-hero-heading { font-size: clamp(30px, 8.5vw, 46px) !important; } .mk-hero-actions { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; } .mk-hero-actions a { width: 100%; text-align: center; } /* Mriežky */ .mk-grid-2 { grid-template-columns: 1fr !important; } .mk-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } .mk-duo { grid-template-columns: 1fr !important; } .mk-footer-grid { grid-template-columns: 1fr !important; gap: 30px !important; } .mk-steps { grid-template-columns: 1fr !important; gap: 22px !important; } /* Nadpisy sekcií */ .mk-section-heading { font-size: clamp(26px, 7vw, 40px) !important; } /* Banner podstránky */ .mk-page-banner { padding: 100px 20px 30px !important; } .mk-page-banner h1 { font-size: clamp(28px, 8vw, 40px) !important; } /* CTA */ .mk-cta-heading { font-size: clamp(26px, 7.5vw, 42px) !important; } /* Formulár - 16px zabráni auto-zoomu na iOS */ .mk-form input, .mk-form textarea { font-size: 16px !important; } } @media (max-width: 520px) { .mk-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px !important; } .mk-doplnky-card { padding: 22px !important; } } /* -------------------------------------------------------------------------- IKONY SOCIÁLNYCH SIETÍ V PÄTIČKE -------------------------------------------------------------------------- */ .mk-social { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mk-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(17, 16, 16, .16); color: #111010; text-decoration: none; transition: background .25s ease, border-color .25s ease, color .25s ease; } .mk-social-icon:hover, .mk-social-icon:focus-visible { background: #f9d036; border-color: #f9d036; color: #111010; } /* -------------------------------------------------------------------------- REFERENCIE - SLIDER S KARTAMI Na počítači 3 karty naraz, na mobile jedna (a strieda sa sama). -------------------------------------------------------------------------- */ .mk-testi { background: #faf9f7; padding: calc(clamp(52px,8vh,96px) * var(--mk-space)) calc(clamp(20px,4vw,56px) * var(--mk-space)); } .mk-testi-head { text-align: center; margin-bottom: clamp(28px,4vh,46px); } .mk-testi-label { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 12px; font-size: 11px; font-weight: 500; letter-spacing: var(--mk-label-sp); text-transform: uppercase; color: var(--mk-muted); } .mk-testi-line { display: block; width: 34px; height: 1px; background: var(--mk-accent); } .mk-testi-heading { margin: 0; font-family: var(--mk-font-h); font-weight: 400; font-size: calc(clamp(28px,4vw,52px) * var(--mk-h-scale)); line-height: 1.05; letter-spacing: -0.02em; color: var(--mk-dark); } .mk-testi-wrap { position: relative; display: flex; align-items: center; gap: 10px; max-width: 1280px; margin: 0 auto; } .mk-testi-viewport { overflow: hidden; flex: 1 1 auto; } .mk-testi-track { display: flex; transition: transform .55s cubic-bezier(.4,0,.2,1); will-change: transform; } /* Tri karty vedľa seba - drží sa aj po preklikaní. */ .mk-testi-card { flex: 0 0 33.3333%; box-sizing: border-box; margin: 0; padding: 0 clamp(7px,0.8vw,12px); } .mk-testi-inner { height: 100%; box-sizing: border-box; background: #fff; border: 1px solid rgba(17,16,16,.1); padding: clamp(22px,2.4vw,34px); display: flex; flex-direction: column; align-items: center; text-align: center; } .mk-testi-name { margin: 0 0 10px; font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--mk-dark); } .mk-testi-stars { display: flex; justify-content: center; gap: 4px; margin-bottom: 16px; } .mk-testi-stars svg { width: 17px; height: 17px; display: block; } .mk-testi-stars svg.is-on { fill: var(--mk-accent); } .mk-testi-stars svg.is-off { fill: rgba(17,16,16,.16); } .mk-testi-text { margin: 0; font-style: italic; font-size: 14.5px; line-height: 1.75; color: #4a4642; } /* Šípky */ .mk-testi-arrow { flex: 0 0 auto; background: #fff; border: 1px solid rgba(17,16,16,.18); color: var(--mk-dark); width: 42px; height: 42px; font-size: 20px; line-height: 1; cursor: pointer; transition: background .25s ease, border-color .25s ease; } .mk-testi-arrow:hover { background: var(--mk-accent); border-color: var(--mk-accent); } .mk-testi-arrow[disabled] { opacity: .3; cursor: default; } .mk-testi-arrow[disabled]:hover { background: #fff; border-color: rgba(17,16,16,.18); } /* Bodky - používajú sa hlavne na mobile */ .mk-testi-dots { display: none; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; } .mk-testi-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(17,16,16,.22); cursor: pointer; transition: background .25s ease, transform .25s ease; } .mk-testi-dots button.is-active { background: var(--mk-accent); transform: scale(1.45); } /* Tablet - dve karty */ @media (max-width: 1000px) { .mk-testi-card { flex-basis: 50%; } } /* Mobil - jedna karta, šípky preč, bodky namiesto nich */ @media (max-width: 700px) { .mk-testi-card { flex-basis: 100%; padding: 0 4px; } .mk-testi-arrow { display: none; } .mk-testi-dots { display: flex; } .mk-testi-text { font-size: 15px; } } /* -------------------------------------------------------------------------- IKONY SOCIÁLNYCH SIETÍ V PÄTIČKE (ponechané nižšie) -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- LIGHTBOX -------------------------------------------------------------------------- */ .mk-lb { position: fixed; inset: 0; background: rgba(10,9,9,.96); z-index: 9999; display: none; align-items: center; justify-content: center; } .mk-lb.is-open { display: flex; } .mk-lb img { max-width: 92vw; max-height: 86vh; object-fit: contain; display: block; box-shadow: 0 20px 60px rgba(0,0,0,.5); } .mk-lb-btn { position: absolute; background: transparent; border: 0; color: #fff; cursor: pointer; font-size: 34px; line-height: 1; padding: 16px; opacity: .75; transition: opacity .2s ease; } .mk-lb-btn:hover { opacity: 1; } .mk-lb-close { top: 10px; right: 14px; font-size: 30px; } .mk-lb-prev { left: 6px; top: 50%; transform: translateY(-50%); } .mk-lb-next { right: 6px; top: 50%; transform: translateY(-50%); } .mk-lb-count { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.65); font-size: 11px; letter-spacing: .2em; } .mk-lb-trigger { cursor: zoom-in; } @media (max-width: 640px) { .mk-lb-btn { font-size: 26px; padding: 12px; } } /* -------------------------------------------------------------------------- DROBNOSTI -------------------------------------------------------------------------- */ .mk-hidden { display: none !important; } /* Plynulé skrolovanie na kotvy */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* -------------------------------------------------------------------------- MODERNIZÁCIA - zaoblené rohy, jemné tiene, plynulé prechody Hodnoty sa nastavujú v editore Home (záložka „Písmo a vzhľad"). -------------------------------------------------------------------------- */ /* Tlačidlá a odkazy so žltým alebo orámovaným pozadím */ a[style*="background:var(--mk-accent)"], button[style*="background:var(--mk-accent)"], .mk-nav-cta, a[style*="border:1px solid rgba(17,16,16,.22)"], .mk-form button[type="submit"], .mk-testi-arrow, .mk-social-icon { border-radius: var(--mk-r-btn); transition: background .25s ease, border-color .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease; } /* Jemné nadvihnutie tlačidla pri prejdení myšou */ a[style*="background:var(--mk-accent)"]:hover, button[style*="background:var(--mk-accent)"]:hover, .mk-nav-cta:hover, .mk-form button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(17,16,16,.14); } /* Karty a rámčeky */ .mk-testi-inner, .mk-doplnky-card { border-radius: var(--mk-r-card); box-shadow: var(--mk-shadow); } /* Karty cenníka a ohraničené boxy v obsahu */ .mk-cennik-card, [style*="border:1px solid rgba(17,16,16,.14)"], [style*="border:2px solid var(--mk-accent)"], [style*="border:1px dashed rgba(17,16,16,.2)"] { border-radius: var(--mk-r-card); } /* Polia formulára */ .mk-form input, .mk-form textarea { border-radius: var(--mk-r-btn); transition: border-color .2s ease, box-shadow .2s ease; } .mk-form input:focus, .mk-form textarea:focus { border-color: var(--mk-accent); box-shadow: 0 0 0 3px rgba(249,208,54,.18); outline: none; } /* Fotografie - galéria, prehľad galérií, kategórie */ .mk-lb-trigger, .mk-grid-3 > div, .mk-cofotim-row > div:first-child, .mk-testi-card img { border-radius: var(--mk-r-img); overflow: hidden; } /* Fotky v prehľade galérií a v sekcii Vybrané fotografie */ .mk-grid-2 a > div, .mk-grid-2 > a { border-radius: var(--mk-r-img); overflow: hidden; } /* Hlásenia po odoslaní formulára */ [role="status"], [role="alert"] { border-radius: var(--mk-r-card); } /* Plynulejšie prechody na odkazoch v pätičke a menu */ footer a, .mk-nav-links a { transition: color .2s ease, opacity .2s ease; } footer a:hover { color: var(--mk-accent); } /* -------------------------------------------------------------------------- FILTER KATEGÓRIÍ NAD GALÉRIOU -------------------------------------------------------------------------- */ .mk-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: clamp(26px,4vh,44px); } .mk-filter-btn { background: transparent; border: 1px solid rgba(17,16,16,.16); border-radius: var(--mk-r-btn); color: var(--mk-dark); font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: var(--mk-label-sp); text-transform: uppercase; padding: 12px 22px; cursor: pointer; transition: background .22s ease, border-color .22s ease, color .22s ease; white-space: nowrap; } .mk-filter-btn:hover { border-color: var(--mk-accent); } .mk-filter-btn.is-active { background: var(--mk-accent); border-color: var(--mk-accent); color: var(--mk-on-accent); } .mk-filter-item.is-hidden { display: none; } @media (max-width: 700px) { .mk-filter { gap: 6px; } .mk-filter-btn { font-size: 10px; padding: 10px 15px; } }