/* ========================================================================== Meliora Cenník — Frontend Styles Elegant design matching ReprOmedica website ========================================================================== */ /* --- Google Fonts import --- */ @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap'); /* --- Variables --- */ :root { --mc-primary: #6e3ebc; --mc-primary-soft: #c8b6e2; --mc-primary-bg: #f5f0fb; --mc-primary-light: #ede6f6; --mc-bg: #ffffff; --mc-bg-section: #f8f7fa; --mc-text: #1a1a2e; --mc-text-secondary: #6b6b7b; --mc-text-muted: #9e9eae; --mc-border: #e8e5ef; --mc-border-light: #f0edf5; --mc-check: #6e3ebc; --mc-font-heading: 'Lora', Georgia, 'Times New Roman', serif; --mc-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --mc-radius: 16px; --mc-radius-sm: 8px; --mc-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03); --mc-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.05); } /* --- WPML auto-language filter --- When multiple [meliora_cennik lang="X"] shortcodes are on the same page, only the one matching is shown. Works instantly via CSS, no PHP/JS language detection needed. */ html[lang^="sk"] .meliora-cennik:not([lang="sk"]), html[lang^="en"] .meliora-cennik:not([lang="en"]), html[lang^="de"] .meliora-cennik:not([lang="de"]), html[lang^="sr"] .meliora-cennik:not([lang="sr"]), html[lang^="it"] .meliora-cennik:not([lang="it"]), html[lang^="ro"] .meliora-cennik:not([lang="ro"]) { display: none !important; } /* --- Container --- */ .meliora-cennik { width: 100%; max-width: 100%; margin: 0 auto; font-family: var(--mc-font-body); font-size: 15px; color: var(--mc-text); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* --- Header --- */ .meliora-cennik__header { text-align: center; padding: 48px 24px 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .meliora-cennik__logo-img { max-width: 140px; height: auto; margin-bottom: 8px; } .meliora-cennik__title-block { text-align: center; } .meliora-cennik__brand { font-family: var(--mc-font-heading); font-size: 20px; font-weight: 400; color: var(--mc-text-secondary); margin: 0 0 4px; letter-spacing: 0.5px; font-style: italic; } .meliora-cennik__title { font-family: var(--mc-font-heading); font-size: 42px; font-weight: 500; color: var(--mc-text); margin: 0 0 12px; letter-spacing: -0.5px; line-height: 1.15; } .meliora-cennik__valid { display: inline-block; font-size: 13px; color: var(--mc-text-secondary); margin: 0; padding: 4px 16px; border: 1px solid var(--mc-border); border-radius: 20px; letter-spacing: 0.3px; } /* --- Table --- */ .meliora-cennik__table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 32px; } .meliora-cennik__table thead th { padding: 12px 16px; text-align: right; font-size: 11px; font-weight: 600; color: var(--mc-text-muted); text-transform: uppercase; letter-spacing: 0.8px; border-bottom: 1px solid var(--mc-border); vertical-align: bottom; } .meliora-cennik__table thead th span { display: block; font-weight: 600; font-size: 13px; color: var(--mc-text); text-transform: none; letter-spacing: 0; margin-top: 2px; } .meliora-cennik__th-name { text-align: left !important; } .meliora-cennik__th-price { width: 160px; min-width: 140px; text-align: right !important; } /* Two-column layout price width */ .meliora-cennik--sk .meliora-cennik__th-price { width: 150px; min-width: 130px; } /* --- Category rows --- */ .meliora-cennik__category-row { background-color: transparent; } .meliora-cennik__category-name { padding: 28px 16px 10px; font-family: var(--mc-font-heading); font-weight: 600; font-size: 20px; color: var(--mc-text); border-bottom: 2px solid var(--mc-text); letter-spacing: -0.2px; text-align: left; } /* --- Item rows --- */ .meliora-cennik__item-row td { padding: 12px 16px; border-bottom: 1px solid var(--mc-border-light); vertical-align: middle; transition: background-color 0.15s ease; } .meliora-cennik__item-row:hover td { background-color: var(--mc-bg-section); } .meliora-cennik__item-row:last-child td { border-bottom: 1px solid var(--mc-border); } .meliora-cennik__item-name { padding-left: 16px !important; color: var(--mc-text); font-weight: 400; text-align: left; } .meliora-cennik__item-price { text-align: right !important; white-space: nowrap; color: var(--mc-text); font-weight: 500; font-variant-numeric: tabular-nums; } /* Bold items (package header with price) */ .meliora-cennik__item-row--bold td { font-weight: 600; background-color: var(--mc-primary-bg); border-bottom-color: var(--mc-primary-soft); } .meliora-cennik__item-row--bold:hover td { background-color: var(--mc-primary-light); } .meliora-cennik__item-row--bold .meliora-cennik__item-name { padding-left: 16px !important; font-family: var(--mc-font-heading); font-size: 16px; } .meliora-cennik__item-row--bold .meliora-cennik__item-price { color: var(--mc-primary); font-size: 16px; } /* Sub-items (indented) */ .meliora-cennik__item-row--sub .meliora-cennik__item-name { padding-left: 36px !important; font-size: 14px; color: var(--mc-text-secondary); } .meliora-cennik__item-row--sub .meliora-cennik__item-price { font-size: 14px; color: var(--mc-text-secondary); } /* Check mark */ .meliora-cennik__check { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background-color: var(--mc-primary-bg); color: var(--mc-check); font-size: 13px; font-weight: 700; line-height: 1; } /* --- Info section below table --- */ .meliora-cennik__info { padding: 28px 16px; font-size: 14px; color: var(--mc-text-secondary); line-height: 1.7; border-top: 1px solid var(--mc-border-light); } .meliora-cennik__info p { margin: 0 0 8px; } .meliora-cennik__info p:last-child { margin-bottom: 0; } .meliora-cennik__info a { color: var(--mc-primary); text-decoration: none; } .meliora-cennik__info a:hover { text-decoration: underline; } /* --- Footer / PDF button --- */ .meliora-cennik__footer { text-align: center; padding: 32px 0 16px; } .meliora-cennik__pdf-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--mc-text); border: 1.5px solid var(--mc-border); padding: 12px 32px; font-size: 14px; font-weight: 500; border-radius: 50px; cursor: pointer; font-family: var(--mc-font-body); transition: all 0.2s ease; letter-spacing: 0.3px; } .meliora-cennik__pdf-btn:hover { border-color: var(--mc-primary); color: var(--mc-primary); background: var(--mc-primary-bg); box-shadow: var(--mc-shadow); } /* --- Responsive --- */ @media (max-width: 600px) { .meliora-cennik { font-size: 13px; } .meliora-cennik__header { padding: 32px 16px 24px; } .meliora-cennik__logo-img { max-width: 100px; } .meliora-cennik__brand { font-size: 16px; } .meliora-cennik__title { font-size: 28px; } .meliora-cennik__category-name { font-size: 16px; padding: 20px 12px 8px; } .meliora-cennik__th-price { width: 90px; min-width: 80px; font-size: 10px; } .meliora-cennik--sk .meliora-cennik__th-price { width: 85px; min-width: 75px; } .meliora-cennik__item-name { padding-left: 12px !important; } .meliora-cennik__item-row--sub .meliora-cennik__item-name { padding-left: 24px !important; } .meliora-cennik__item-row td { padding: 8px 10px; } .meliora-cennik__item-row--bold .meliora-cennik__item-name { font-size: 14px; } .meliora-cennik__item-row--bold .meliora-cennik__item-price { font-size: 14px; } } /* --- Print styles --- */ @media print { .meliora-cennik__footer { display: none !important; } .meliora-cennik { max-width: 100%; font-size: 11px; } .meliora-cennik__header { padding: 10px 0; } .meliora-cennik__title { font-size: 24px; } .meliora-cennik__category-name { font-size: 14px; } .meliora-cennik__table { page-break-inside: auto; } .meliora-cennik__category-row { page-break-after: avoid; } .meliora-cennik__item-row { page-break-inside: avoid; } .meliora-cennik__item-row:hover td { background-color: transparent; } .meliora-cennik__check { background: none; width: auto; height: auto; } }