/* KARMA · Vrátenie a výmena tovaru — samostatné štýly (scoped pod .karma-page). Nezasahuje do zvyšku webu — všetky triedy majú predponu "karma-". rem hodnoty sú prevedené na px, takže vzhľad nezávisí od root font-size témy. */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap'); /* Variables live on the page AND on .karma-modal — the confirmation popup is appended to (outside .karma-page), so it needs its own copy to get the KARMA colours + fonts. */ .karma-page, .karma-modal { --k-bone: #f4efe6; --k-paper: #faf7f1; --k-ink: #1c1813; --k-ink-soft: #564d40; --k-taupe: #9b8e7c; --k-line: #e4dccd; --k-gold: #a98545; --k-serif: "Cormorant Garamond", Georgia, serif; --k-sans: "Inter", system-ui, -apple-system, sans-serif; --k-track: 0.28em; --k-ease: cubic-bezier(0.22, 1, 0.36, 1); } .karma-page, .karma-page *, .karma-page *::before, .karma-page *::after, .karma-modal, .karma-modal *, .karma-modal *::before, .karma-modal *::after { box-sizing: border-box; } .karma-page { max-width: 768px; margin-left: auto; margin-right: auto; font-size: 16px; font-family: var(--k-sans); font-weight: 300; color: var(--k-ink); -webkit-font-smoothing: antialiased; } .karma-page :focus-visible { outline: 2px solid var(--k-gold); outline-offset: 3px; } .karma-eyebrow { font-family: var(--k-sans); font-size: 11px; font-weight: 500; letter-spacing: var(--k-track); text-transform: uppercase; color: var(--k-gold); margin: 0 0 20px; } .karma-page__title { font-family: var(--k-serif); font-weight: 300; font-size: clamp(36px, 5vw, 60px); line-height: 1.04; letter-spacing: -0.01em; margin: 12px 0 0; color: var(--k-ink); } .karma-page__intro { margin-top: 24px; max-width: 576px; font-weight: 300; line-height: 1.7; color: var(--k-ink-soft); } .karma-h2 { font-family: var(--k-serif); font-weight: 300; font-size: 24px; letter-spacing: -0.01em; margin: 56px 0 0; color: var(--k-ink); } .karma-page p, .karma-page li { font-weight: 300; line-height: 1.7; color: var(--k-ink-soft); } .karma-page a { color: var(--k-ink); text-decoration: underline; text-underline-offset: 2px; transition: color 0.3s var(--k-ease); } .karma-page a:hover, .karma-page a:focus { color: var(--k-gold); text-decoration: none; } /* Číslované kroky */ .karma-steps { margin: 24px 0 0; padding: 0; list-style: none; counter-reset: karma-step; } .karma-steps li { counter-increment: karma-step; position: relative; padding: 0 0 20px 48px; } .karma-steps li::before { content: counter(karma-step, decimal-leading-zero); position: absolute; left: 0; top: 1.6px; font-family: var(--k-serif); font-size: 18px; color: var(--k-gold); } /* Zvýraznený box (odporúčaný postup) */ .karma-callout { margin: 40px 0 0; padding: 32px 30.4px; background: var(--k-paper); border: 1px solid var(--k-line); border-left: 3px solid var(--k-gold); } @media (min-width: 640px) { .karma-callout { padding: 40px 44px; } } .karma-callout > :first-child { margin-top: 0 !important; } .karma-callout > :last-child { margin-bottom: 0 !important; } .karma-callout .karma-h2 { font-size: 28px; font-weight: 600 !important; } .karma-callout .karma-steps { margin-top: 28px; } .karma-callout .karma-steps li { font-size: 17px; line-height: 1.65; padding-left: 54.4px; padding-bottom: 22.4px; } .karma-callout .karma-steps li::before { font-size: 21.6px; } .karma-callout .karma-steps li:last-child { padding-bottom: 0; } /* Formuláre */ .karma-form-card { border: 1px solid var(--k-line); background: var(--k-paper); padding: 28px; margin-top: 24px; } @media (min-width: 640px) { .karma-form-card { padding: 36px; } } .karma-form-card > h3 { font-family: var(--k-serif); font-weight: 300; font-size: 24px; letter-spacing: -0.01em; margin: 0; color: var(--k-ink); } .karma-form { margin-top: 28px; display: grid; gap: 20px; } @media (min-width: 640px) { .karma-form { grid-template-columns: 1fr 1fr; } .karma-form .karma-form__full { grid-column: span 2; } } .karma-form label { display: block; font-family: var(--k-sans); font-size: 11.2px; font-weight: 500; letter-spacing: var(--k-track); text-transform: uppercase; color: var(--k-ink-soft); } .karma-form label b { color: var(--k-gold); font-weight: 500; } .karma-form input, .karma-form textarea { margin-top: 8px; width: 100%; border: 1px solid var(--k-line); background: var(--k-bone); padding: 12px 16px; font-family: var(--k-sans); font-size: 14px; font-weight: 300; color: var(--k-ink); transition: border-color 0.3s var(--k-ease); } .karma-form input:focus, .karma-form textarea:focus { border-color: var(--k-gold); outline: none; } .karma-form button[type="submit"] { display: inline-flex; align-items: center; gap: 12px; border: 0; cursor: pointer; background: var(--k-ink); color: var(--k-paper) !important; padding: 16px 32px; font-family: var(--k-sans); font-size: 11px; font-weight: 500; letter-spacing: var(--k-track); text-transform: uppercase; transition: background-color 0.3s var(--k-ease); } .karma-form button[type="submit"]:hover { background: var(--k-gold); } .karma-form__success { margin-top: 24px; font-family: var(--k-serif); font-style: italic; font-weight: 300; font-size: 18px; color: var(--k-gold); } /* Honeypot (skrytá pasca na botov) */ .karma-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; } /* Sprievodca vrátením/výmenou */ .karma-returns { margin-top: 32px; } .karma-returns__panel { animation: karma-returns-in 0.45s var(--k-ease) both; } @keyframes karma-returns-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .karma-returns__label { display: block; font-family: var(--k-sans); font-size: 11.2px; font-weight: 500; letter-spacing: var(--k-track); text-transform: uppercase; color: var(--k-ink-soft); } .karma-returns__label b { color: var(--k-gold); font-weight: 500; } .karma-returns__orderrow { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; } .karma-returns__orderrow input { flex: 1 1 240px; min-width: 0; border: 1px solid var(--k-line); background: var(--k-bone); padding: 14.4px 17.6px; font-family: var(--k-sans); font-size: 16px; font-weight: 300; letter-spacing: 0.02em; color: var(--k-ink); transition: border-color 0.3s var(--k-ease); } .karma-returns__orderrow input:focus { border-color: var(--k-gold); outline: none; } .karma-returns__next { display: inline-flex; align-items: center; gap: 9.6px; border: 0; cursor: pointer; background: var(--k-ink); color: var(--k-paper); padding: 0 28px; font-family: var(--k-sans); font-size: 11px; font-weight: 500; letter-spacing: var(--k-track); text-transform: uppercase; transition: background-color 0.3s var(--k-ease); } .karma-returns__next:hover { background: var(--k-gold); } .karma-returns__next span { transition: transform 0.3s var(--k-ease); } .karma-returns__next:hover span { transform: translateX(3px); } .karma-returns__error { margin-top: 9.6px; font-family: var(--k-sans); font-size: 12.8px; color: #b4423a; } .karma-returns__lead { font-family: var(--k-serif); font-weight: 300; font-size: 21.6px; color: var(--k-ink); margin: 0 0 20px; } .karma-returns__lead strong { color: var(--k-gold); font-weight: 400; } .karma-returns__choices { display: grid; gap: 16px; } @media (min-width: 560px) { .karma-returns__choices { grid-template-columns: 1fr 1fr; } } .karma-returns__choice { display: flex; flex-direction: column; gap: 6.4px; text-align: left; cursor: pointer; border: 1px solid var(--k-line); background: var(--k-paper); padding: 25.6px; transition: border-color 0.3s var(--k-ease), background-color 0.3s var(--k-ease), transform 0.3s var(--k-ease); } .karma-returns__choice:hover { border-color: var(--k-ink); background: var(--k-bone); transform: translateY(-2px); } .karma-returns__choice-title { font-family: var(--k-serif); font-weight: 300; font-size: 20.8px; color: var(--k-ink); } .karma-returns__choice-sub { font-family: var(--k-sans); font-size: 11.52px; font-weight: 500; letter-spacing: var(--k-track); text-transform: uppercase; color: var(--k-ink-soft); } .karma-returns__back { margin-top: 24px; border: 0; background: none; cursor: pointer; font-family: var(--k-sans); font-size: 11.52px; font-weight: 500; letter-spacing: var(--k-track); text-transform: uppercase; color: var(--k-taupe); transition: color 0.3s var(--k-ease); } .karma-returns__back:hover { color: var(--k-gold); } .karma-returns input[readonly] { background: var(--k-bone); color: var(--k-taupe); cursor: default; } /* Potvrdzovacie okno po odoslaní */ .karma-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(28, 24, 19, 0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.28s var(--k-ease); } .karma-modal.is-open { opacity: 1; } .karma-modal__box { position: relative; width: 100%; max-width: 380px; background: var(--k-paper); border: 1px solid var(--k-line); box-shadow: 0 40px 90px -30px rgba(28, 24, 19, 0.6); padding: 40px 32px; text-align: center; transform: translateY(16px) scale(0.98); transition: transform 0.32s var(--k-ease); } .karma-modal.is-open .karma-modal__box { transform: none; } .karma-modal__icon { width: 48px; height: 48px; margin: 0 auto 20px; border-radius: 50%; border: 1px solid var(--k-gold); display: flex; align-items: center; justify-content: center; color: var(--k-gold); font-size: 22.4px; } .karma-modal__title { font-family: var(--k-serif); font-weight: 300; font-size: 24px; color: var(--k-ink); margin: 0 0 9.6px; } .karma-modal__msg { font-family: var(--k-sans); font-size: 14.4px; font-weight: 300; line-height: 1.6; color: var(--k-ink-soft); margin: 0 0 28px; } .karma-modal__btn { border: 0; cursor: pointer; background: var(--k-ink); color: var(--k-paper); padding: 13.6px 32px; font-family: var(--k-sans); font-size: 11px; font-weight: 500; letter-spacing: var(--k-track); text-transform: uppercase; transition: background-color 0.3s var(--k-ease); } .karma-modal__btn:hover { background: var(--k-gold); }