/* newsletter-styles.css – opieka.farm · Centrum newsletterów (filar P2.4) Buduje na home-styles.css (tokeny) + calc-styles.css (.calc-head). Onest = UI, Source Sans 3 = treść/meta (lekka waga, bez mono w chrome edytorskim). Akcent sterowalny --nl-accent. */ :root { --nl-accent: var(--primary); } /* ───────────── Segmentowany przełącznik widoku ───────────── */ .nlx-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; margin: 2px 0 24px; } .nlx-tabs button { display: inline-flex; align-items: center; gap: 8px; font-family: 'Onest', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--ink-2); padding: 9px 18px; border-radius: 999px; transition: background 0.14s, color 0.14s; } .nlx-tabs button svg { width: 16px; height: 16px; } .nlx-tabs button:hover { color: var(--primary); } .nlx-tabs button.on { background: var(--card); color: var(--primary); box-shadow: var(--shadow-sm); } .nlx-tabs button .badge { font-family: 'Source Sans 3', sans-serif; font-size: 11px; font-weight: 600; color: #fff; background: var(--nl-accent); border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; } /* ───────────── Pasek statystyk ───────────── */ .nlx-statstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 26px; } .nlx-statstrip .st { background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-md); padding: 16px 18px; box-shadow: var(--shadow-sm); } .nlx-statstrip .st b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--nl-accent); line-height: 1; } .nlx-statstrip .st span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); } /* ───────────── Karty tytułów ───────────── */ .nlx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .nlx-card { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-lg); padding: 22px 22px 20px; box-shadow: var(--shadow-sm); transition: border-color 0.14s, box-shadow 0.14s; } .nlx-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); } .nlx-card.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } .nlx-card.flag { grid-column: 1 / -1; grid-template-columns: 56px 1fr; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 4%, #fff), #fff); } .nlx-ic { width: 48px; height: 48px; border-radius: 13px; background: color-mix(in srgb, var(--primary) 9%, transparent); color: var(--primary); display: grid; place-items: center; } .nlx-ic svg { width: 24px; height: 24px; } .nlx-card.flag .nlx-ic { width: 56px; height: 56px; background: var(--primary); color: #fff; } .nlx-card.flag .nlx-ic svg { width: 28px; height: 28px; } .nlx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .nlx-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .nlx-title h3 { font-size: 17px; letter-spacing: -0.015em; margin: 0; color: var(--ink); } .nlx-card.flag .nlx-title h3 { font-size: 21px; } .nlx-flagtag { font-family: 'Source Sans 3', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-2); background: color-mix(in srgb, var(--primary-2) 12%, #fff); padding: 3px 8px; border-radius: 5px; } .nlx-cadence { font-family: 'Source Sans 3', sans-serif; font-size: 11.5px; font-weight: 500; color: var(--ink-3); margin-top: 4px; display: flex; align-items: center; gap: 7px; } .nlx-cadence .min { color: var(--ink-4); } .nlx-dek { font-family: 'Source Sans 3', sans-serif; font-size: 14px; line-height: 1.58; color: var(--ink-2); margin: 11px 0 0; } .nlx-card.flag .nlx-dek { font-size: 15px; max-width: 62ch; } .nlx-inside { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px 8px; } .nlx-inside li { font-family: 'Source Sans 3', sans-serif; font-size: 11.5px; color: var(--ink-2); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; } /* Przełącznik zapisu */ .nlx-sub { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-family: 'Onest', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--primary-2); border: 1px solid var(--line-2); background: var(--card); border-radius: 999px; padding: 8px 15px; transition: all 0.14s; white-space: nowrap; } .nlx-sub svg { width: 15px; height: 15px; } .nlx-sub:hover { border-color: var(--primary-2); background: rgba(13,75,92,0.05); } .nlx-sub.on { background: var(--accent); border-color: var(--accent); color: #fff; } .nlx-sub.on:hover { background: var(--accent-2); } /* ───────────── Centrum preferencji ───────────── */ .nlx-pref-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 32px; align-items: start; } .nlx-pref-main { min-width: 0; } .nlx-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-lg); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 18px; } .nlx-panel-h { padding: 16px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .nlx-panel-h h2 { font-size: 16px; letter-spacing: -0.015em; margin: 0; color: var(--ink); } .nlx-panel-h .hint { font-family: 'Source Sans 3', sans-serif; font-size: 11.5px; color: var(--ink-3); } .nlx-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 15px 22px; border-bottom: 1px solid var(--line); } .nlx-row:last-child { border-bottom: 0; } .nlx-row .ri { width: 40px; height: 40px; border-radius: 11px; background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--primary); display: grid; place-items: center; } .nlx-row .ri svg { width: 20px; height: 20px; } .nlx-row .rt b { display: block; font-family: 'Onest', sans-serif; font-size: 14.5px; font-weight: 600; color: var(--ink); } .nlx-row .rt span { font-family: 'Source Sans 3', sans-serif; font-size: 11.5px; color: var(--ink-3); } /* Switch */ .nlx-switch { width: 44px; height: 26px; border-radius: 999px; background: var(--line-2); position: relative; transition: background 0.16s; flex-shrink: 0; } .nlx-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform 0.16s; } .nlx-switch.on { background: var(--accent); } .nlx-switch.on::after { transform: translateX(18px); } /* Format / segmenty w preferencjach */ .nlx-seg { display: inline-flex; gap: 0; border: 1px solid var(--line-2); border-radius: var(--rad-sm); overflow: hidden; } .nlx-seg button { font-family: 'Onest', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding: 8px 16px; background: var(--card); transition: background 0.12s, color 0.12s; } .nlx-seg button + button { border-left: 1px solid var(--line-2); } .nlx-seg button.on { background: var(--primary); color: #fff; } .nlx-field { padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); } .nlx-field:last-child { border-bottom: 0; } .nlx-field .fl b { display: block; font-family: 'Onest', sans-serif; font-size: 14px; font-weight: 600; color: var(--ink); } .nlx-field .fl span { font-family: 'Source Sans 3', sans-serif; font-size: 11.5px; color: var(--ink-3); } /* Email input */ .nlx-email { display: flex; gap: 8px; align-items: center; } .nlx-email input { font-family: 'Source Sans 3', sans-serif; font-size: 14px; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--rad-sm); padding: 10px 14px; width: 230px; } .nlx-email input:focus { outline: none; border-color: var(--primary-2); background: #fff; } /* Zgoda RODO */ .nlx-consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 18px 22px; background: var(--bg); border-bottom: 1px solid var(--line); cursor: pointer; } .nlx-consent input { position: absolute; opacity: 0; width: 0; height: 0; } .nlx-consent .box { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line-2); background: #fff; display: grid; place-items: center; color: #fff; margin-top: 1px; } .nlx-consent .box svg { width: 14px; height: 14px; opacity: 0; } .nlx-consent.on .box { background: var(--accent); border-color: var(--accent); } .nlx-consent.on .box svg { opacity: 1; } .nlx-consent .tx { font-family: 'Source Sans 3', sans-serif; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); } .nlx-consent .tx b { color: var(--ink); font-weight: 600; } .nlx-save-row { padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; } .nlx-save { display: inline-flex; align-items: center; gap: 9px; font-family: 'Onest', sans-serif; font-size: 14.5px; font-weight: 600; color: #fff; background: var(--primary); border-radius: var(--rad-md); padding: 12px 22px; transition: background 0.14s, transform 0.12s, opacity 0.14s; } .nlx-save:hover { background: var(--primary-d); transform: translateY(-1px); } .nlx-save:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .nlx-save svg { width: 17px; height: 17px; } .nlx-saved { display: inline-flex; align-items: center; gap: 8px; font-family: 'Source Sans 3', sans-serif; font-size: 13px; font-weight: 600; color: var(--accent-2); } .nlx-saved svg { width: 16px; height: 16px; } .nlx-unsub { font-family: 'Source Sans 3', sans-serif; font-size: 12.5px; font-weight: 500; color: var(--warn); } .nlx-unsub:hover { text-decoration: underline; } /* ───────────── Aside: podsumowanie + nota ───────────── */ .nlx-aside { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 16px; } .nlx-sumcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-lg); padding: 20px 22px; box-shadow: var(--shadow-md); } .nlx-sumcard h3 { font-size: 14px; letter-spacing: 0.02em; margin: 0 0 14px; color: var(--ink); } .nlx-sum-big { font-size: 42px; font-weight: 700; letter-spacing: -0.04em; color: var(--nl-accent); line-height: 0.9; } .nlx-sum-big span { font-family: 'Source Sans 3', sans-serif; font-size: 14px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-left: 6px; } .nlx-sum-list { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; } .nlx-sum-list li { display: flex; align-items: center; gap: 9px; font-family: 'Source Sans 3', sans-serif; font-size: 13px; color: var(--ink-2); } .nlx-sum-list li svg { width: 15px; height: 15px; color: var(--accent-2); flex-shrink: 0; } .nlx-sum-empty { font-family: 'Source Sans 3', sans-serif; font-size: 12.5px; color: var(--ink-3); } .nlx-note { display: grid; grid-template-columns: 18px 1fr; gap: 11px; padding: 15px 18px; background: color-mix(in srgb, var(--primary-2) 7%, transparent); border-radius: var(--rad-md); } .nlx-note svg { width: 16px; height: 16px; color: var(--primary-2); margin-top: 1px; } .nlx-note p { font-family: 'Source Sans 3', sans-serif; font-size: 12px; line-height: 1.55; color: var(--ink-2); margin: 0; } .nlx-note b { color: var(--ink); } /* ───────────── Podgląd „w mailu" ───────────── */ .nlx-preview-wrap { margin-top: 4px; } .nlx-preview-lbl { font-family: 'Source Sans 3', sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; } .nlx-mail { max-width: 560px; border: 1px solid var(--line); border-radius: var(--rad-lg); overflow: hidden; box-shadow: var(--shadow-md); background: #fff; } .nlx-mail-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: linear-gradient(135deg, var(--primary-2), var(--primary)); color: #fff; } .nlx-mail-bar .mlogo { display: flex; align-items: center; gap: 9px; font-family: 'Onest', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; } .nlx-mail-bar .mlogo svg { width: 18px; height: 18px; } .nlx-mail-bar .med { font-family: 'Source Sans 3', sans-serif; font-size: 11px; color: rgba(255,255,255,0.82); } .nlx-mail-meta { padding: 14px 22px 0; font-family: 'Source Sans 3', sans-serif; font-size: 11px; color: var(--ink-3); } .nlx-mail-hero { padding: 6px 22px 18px; border-bottom: 1px solid var(--line); } .nlx-mail-hero h4 { font-size: 19px; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); margin: 6px 0 8px; } .nlx-mail-hero p { font-family: 'Source Sans 3', sans-serif; font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; } .nlx-mail-items { padding: 8px 22px 18px; display: flex; flex-direction: column; } .nlx-mail-item { display: grid; grid-template-columns: 1fr; gap: 3px; padding: 14px 0; border-bottom: 1px solid var(--line); } .nlx-mail-item:last-child { border-bottom: 0; } .nlx-mail-item .it-tag { font-family: 'Source Sans 3', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary-2); } .nlx-mail-item .it-t { font-family: 'Onest', sans-serif; font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.3; } .nlx-mail-item .it-s { font-family: 'Source Sans 3', sans-serif; font-size: 12.5px; color: var(--ink-2); } .nlx-mail-foot { padding: 14px 22px; background: var(--bg-2); font-family: 'Source Sans 3', sans-serif; font-size: 10.5px; line-height: 1.5; color: var(--ink-3); text-align: center; } .nlx-mail-foot a { color: var(--primary-2); text-decoration: underline; } .nlx-mail-cta { display: inline-flex; align-items: center; gap: 7px; margin: 10px 22px 20px; font-family: 'Onest', sans-serif; font-size: 13px; font-weight: 600; color: var(--primary-2); } .nlx-mail-cta svg { width: 15px; height: 15px; } /* ───────────── Hero subscribe quick bar ───────────── */ .nlx-quick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 24px; padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-md); box-shadow: var(--shadow-sm); } .nlx-quick .ql { font-family: 'Onest', sans-serif; font-size: 14px; font-weight: 600; color: var(--ink); } .nlx-quick form { display: flex; gap: 8px; flex: 1; min-width: 240px; } .nlx-quick input { flex: 1; font-family: 'Source Sans 3', sans-serif; font-size: 14px; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--rad-sm); padding: 11px 14px; } .nlx-quick input:focus { outline: none; border-color: var(--primary-2); background: #fff; } .nlx-quick .go { display: inline-flex; align-items: center; gap: 8px; font-family: 'Onest', sans-serif; font-size: 14px; font-weight: 600; color: #fff; background: var(--primary); border-radius: var(--rad-sm); padding: 11px 20px; transition: background 0.14s; white-space: nowrap; } .nlx-quick .go:hover { background: var(--primary-d); } .nlx-quick .go svg { width: 16px; height: 16px; } /* ───────────── Responsywność ───────────── */ @media (max-width: 1080px) { .nlx-pref-grid { grid-template-columns: 1fr; } .nlx-aside { position: static; flex-direction: row; flex-wrap: wrap; } .nlx-aside > * { flex: 1; min-width: 280px; } } @media (max-width: 820px) { .nlx-statstrip { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .nlx-grid { grid-template-columns: 1fr; } .nlx-card.flag, .nlx-card { grid-template-columns: 44px 1fr; } .nlx-head { flex-direction: column; } .nlx-sub { align-self: flex-start; } } /* Motyw WP: elementy interaktywne to