/* ============================================================= RDR Newsletter — front.css v3 Utilise exclusivement les variables CSS du thème RDR-IT. Compatibilité automatique dark / light via data-theme sur . ============================================================= */ /* ── Accent dynamique : bleu en dark, bleu foncé en light ── */ :root { --nl-accent: var(--rdr-accent, #2ea8ff); --nl-accent-rgb: 46, 168, 255; --nl-bg: var(--rdr-bg-primary, #0d1117); --nl-surface: var(--rdr-bg-surface, #161b22); --nl-card: var(--rdr-bg-card, #1c2128); --nl-text: var(--rdr-text-primary, #e6edf3); --nl-text-2: var(--rdr-text-secondary, #8b949e); --nl-text-muted: var(--rdr-text-muted, #484f58); --nl-border: var(--rdr-border, rgba(255,255,255,0.07)); --nl-border-strong: var(--rdr-border-strong, rgba(255,255,255,0.15)); --nl-shadow: var(--rdr-shadow-card, 0 2px 8px rgba(0,0,0,0.3)); --nl-radius: 10px; --nl-radius-sm: 6px; --nl-transition: 0.2s ease; } [data-theme="light"] { --nl-accent-rgb: 30, 115, 190; } /* ───────────────────────────────────────────────────────────── FORMULAIRE D'INSCRIPTION [rdrnl_subscribe] ───────────────────────────────────────────────────────────── */ .rdrnl-subscribe-wrap { margin: 24px 0; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* Styles de conteneur */ .rdrnl-form-card { background: var(--nl-card); border: 1px solid var(--nl-border); border-radius: var(--nl-radius); padding: 24px 28px; max-width: 480px; box-shadow: var(--nl-shadow); transition: background var(--nl-transition), border-color var(--nl-transition); } .rdrnl-form-inline .rdrnl-form-fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; } .rdrnl-form-inline .rdrnl-form-row { flex: 1; min-width: 260px; } .rdrnl-form-minimal { background: transparent; border: none; padding: 0; box-shadow: none; } /* Titres et description */ .rdrnl-form-title { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 6px; color: var(--nl-text); } .rdrnl-form-desc { font-size: 13px; color: var(--nl-text-2); margin-bottom: 14px; line-height: 1.5; } /* Champs */ .rdrnl-form-fields { display: flex; flex-direction: column; gap: 10px; } .rdrnl-form-row { display: flex; gap: 8px; } .rdrnl-form-row input[type="email"] { flex: 1; } .rdrnl-subscribe-wrap input[type="text"], .rdrnl-subscribe-wrap input[type="email"], .rdrnl-subscribe-wrap input[type="url"], .rdrnl-subscribe-wrap input[type="number"] { width: 100%; padding: 10px 14px; border: 1px solid var(--nl-border); border-radius: var(--nl-radius-sm); font-size: 14px; font-family: inherit; background: var(--nl-surface); color: var(--nl-text); transition: border-color var(--nl-transition), box-shadow var(--nl-transition), background var(--nl-transition); -webkit-appearance: none; } .rdrnl-subscribe-wrap input:focus, .rdrnl-profile-wrap input:focus, .rdrnl-profile-wrap select:focus, .rdrnl-profile-wrap textarea:focus { outline: none; border-color: var(--nl-accent); box-shadow: 0 0 0 3px rgba(var(--nl-accent-rgb), .15); } .rdrnl-subscribe-wrap input::placeholder { color: var(--nl-text-muted); } /* Bouton principal */ .rdrnl-btn-primary { display: inline-flex; align-items: center; gap: 6px; background: var(--nl-accent); color: #fff; border: none; border-radius: var(--nl-radius-sm); padding: 10px 20px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; transition: background var(--nl-transition), transform .1s, opacity var(--nl-transition); text-decoration: none; } [data-theme="light"] .rdrnl-btn-primary { color: #fff; } .rdrnl-btn-primary:hover { background: color-mix(in srgb, var(--nl-accent) 85%, #000); } .rdrnl-btn-primary:active { transform: scale(.98); } .rdrnl-btn-primary:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; } /* Bouton secondaire/outline */ .rdrnl-btn-outline { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--nl-accent); border: 1px solid var(--nl-accent); border-radius: var(--nl-radius-sm); padding: 9px 18px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background var(--nl-transition), color var(--nl-transition); text-decoration: none; } .rdrnl-btn-outline:hover { background: rgba(var(--nl-accent-rgb), .1); } /* Consentement */ .rdrnl-consent { font-size: 11px; color: var(--nl-text-muted); line-height: 1.5; } /* Notice d'attente (liste pleine) */ .rdrnl-waitlist-notice { font-size: 13px; color: var(--nl-text-2); background: rgba(var(--nl-accent-rgb), .06); border: 1px solid rgba(var(--nl-accent-rgb), .2); border-radius: var(--nl-radius-sm); padding: 10px 14px; margin-bottom: 14px; line-height: 1.5; } /* ───────────────────────────────────────────────────────────── NOTICES (réponses formulaire) ───────────────────────────────────────────────────────────── */ .rdrnl-notice { padding: 12px 16px; border-radius: var(--nl-radius-sm); font-size: 13px; margin-bottom: 12px; line-height: 1.5; border: 1px solid transparent; } /* active / already_active */ .rdrnl-notice-active, .rdrnl-notice-already_active { background: rgba(var(--nl-accent-rgb), .1); color: var(--nl-accent); border-color: rgba(var(--nl-accent-rgb), .25); } /* waitlist */ .rdrnl-notice-waitlist { background: rgba(139, 92, 246, .1); color: #a78bfa; border-color: rgba(139, 92, 246, .25); } [data-theme="light"] .rdrnl-notice-waitlist { color: #5b21b6; background: rgba(139, 92, 246, .07); } /* pending / already_pending */ .rdrnl-notice-pending, .rdrnl-notice-already_pending { background: rgba(251, 191, 36, .1); color: #fbbf24; border-color: rgba(251, 191, 36, .25); } [data-theme="light"] .rdrnl-notice-pending, [data-theme="light"] .rdrnl-notice-already_pending { color: #92400e; background: rgba(251, 191, 36, .08); } /* error */ .rdrnl-notice-error { background: rgba(248, 81, 73, .1); color: #f85149; border-color: rgba(248, 81, 73, .25); } [data-theme="light"] .rdrnl-notice-error { color: #b91c1c; background: rgba(248, 81, 73, .07); } /* unsubscribed */ .rdrnl-notice-unsubscribed { background: rgba(var(--nl-accent-rgb), .04); color: var(--nl-text-2); border-color: var(--nl-border); } .rdrnl-ajax-msg { margin-bottom: 10px; } /* Spinner */ .rdrnl-front-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(var(--nl-accent-rgb), .25); border-top-color: var(--nl-accent); border-radius: 50%; animation: rdrnl-spin .6s linear infinite; vertical-align: middle; flex-shrink: 0; } @keyframes rdrnl-spin { to { transform: rotate(360deg); } } /* ───────────────────────────────────────────────────────────── PAGE PROFIL /newsletter/profil/{slug}/ ───────────────────────────────────────────────────────────── */ .rdrnl-profile-wrap { max-width: 680px; margin: 0 auto; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .rdrnl-profile-card { background: var(--nl-card); border: 1px solid var(--nl-border); border-radius: var(--nl-radius); padding: 32px; box-shadow: var(--nl-shadow); transition: background var(--nl-transition), border-color var(--nl-transition); } /* Non authentifié */ .rdrnl-profile-noauth { text-align: center; padding: 48px 32px; } .rdrnl-profile-icon { font-size: 40px; margin-bottom: 16px; display: block; } .rdrnl-profile-noauth h1 { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 700; color: var(--nl-text); margin-bottom: 10px; } .rdrnl-profile-noauth p { color: var(--nl-text-2); font-size: 14px; max-width: 420px; margin: 0 auto 24px; line-height: 1.6; } .rdrnl-profile-form-row { display: flex; gap: 8px; max-width: 400px; margin: 0 auto; flex-wrap: wrap; justify-content: center; } .rdrnl-profile-form-row input[type="email"] { flex: 1; min-width: 200px; padding: 10px 14px; border: 1px solid var(--nl-border); border-radius: var(--nl-radius-sm); font-size: 14px; background: var(--nl-surface); color: var(--nl-text); transition: border-color var(--nl-transition), box-shadow var(--nl-transition); } .rdrnl-profile-form-row input::placeholder { color: var(--nl-text-muted); } /* Header page profil */ .rdrnl-profile-header { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--nl-border); } .rdrnl-profile-header h1 { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 700; color: var(--nl-text); margin-bottom: 8px; } .rdrnl-profile-header p { font-size: 14px; color: var(--nl-text-2); line-height: 1.6; margin: 0; } .rdrnl-profile-header strong { color: var(--nl-accent); } /* ── Slots de flux RSS ── */ .rdrnl-feeds-form { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; } .rdrnl-feed-slot { background: var(--nl-surface); border: 1px solid var(--nl-border); border-radius: var(--nl-radius); padding: 20px; transition: border-color var(--nl-transition), background var(--nl-transition), box-shadow var(--nl-transition); position: relative; } .rdrnl-feed-slot.has-feed { border-color: rgba(var(--nl-accent-rgb), .35); background: rgba(var(--nl-accent-rgb), .03); } .rdrnl-feed-slot.has-feed:hover { border-color: rgba(var(--nl-accent-rgb), .55); box-shadow: 0 0 0 3px rgba(var(--nl-accent-rgb), .07); } /* Numéro + header du slot */ .rdrnl-slot-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .rdrnl-slot-num { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--nl-accent-rgb), .12); color: var(--nl-accent); font-size: 12px; font-weight: 700; flex-shrink: 0; font-family: 'Syne', sans-serif; } .rdrnl-slot-header h3 { font-size: 14px; font-weight: 600; color: var(--nl-text); margin: 0; flex: 1; } .rdrnl-slot-active { font-size: 10px; font-weight: 700; background: rgba(var(--nl-accent-rgb), .15); color: var(--nl-accent); border: 1px solid rgba(var(--nl-accent-rgb), .3); border-radius: 20px; padding: 2px 8px; text-transform: uppercase; letter-spacing: .5px; } /* Champ URL + bouton check */ .rdrnl-slot-url-row { display: flex; gap: 8px; margin-bottom: 12px; } .rdrnl-feed-url { flex: 1; padding: 9px 13px; border: 1px solid var(--nl-border); border-radius: var(--nl-radius-sm); font-size: 13px; background: var(--nl-card); color: var(--nl-text); font-family: 'JetBrains Mono', monospace; transition: border-color var(--nl-transition), background var(--nl-transition); } .rdrnl-feed-url::placeholder { color: var(--nl-text-muted); font-family: 'DM Sans', sans-serif; } .rdrnl-feed-url:focus { outline: none; border-color: var(--nl-accent); box-shadow: 0 0 0 3px rgba(var(--nl-accent-rgb), .12); } .rdrnl-btn-check-feed { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; background: var(--nl-surface); border: 1px solid var(--nl-border); border-radius: var(--nl-radius-sm); cursor: pointer; font-size: 16px; transition: background var(--nl-transition), border-color var(--nl-transition), transform .1s; text-decoration: none; } .rdrnl-btn-check-feed:hover { background: rgba(var(--nl-accent-rgb), .08); border-color: var(--nl-accent); transform: scale(1.05); } /* Résultat de vérification du flux */ .rdrnl-feed-check-result { font-size: 12px; margin-bottom: 10px; min-height: 18px; line-height: 1.5; transition: all var(--nl-transition); } .rdrnl-feed-check-result.ok { color: #4ade80; } .rdrnl-feed-check-result.error { color: #f85149; } [data-theme="light"] .rdrnl-feed-check-result.ok { color: #15803d; } [data-theme="light"] .rdrnl-feed-check-result.error { color: #b91c1c; } /* Label + limite côte à côte */ .rdrnl-slot-meta { display: grid; grid-template-columns: 1fr 140px; gap: 10px; } @media (max-width: 480px) { .rdrnl-slot-meta { grid-template-columns: 1fr; } } .rdrnl-slot-label-wrap label, .rdrnl-slot-limit-wrap label { display: block; font-size: 11px; font-weight: 600; color: var(--nl-text-muted); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 5px; } .rdrnl-feed-label, .rdrnl-feed-limit { width: 100%; padding: 8px 12px; border: 1px solid var(--nl-border); border-radius: var(--nl-radius-sm); font-size: 13px; font-family: inherit; background: var(--nl-card); color: var(--nl-text); transition: border-color var(--nl-transition), background var(--nl-transition); } .rdrnl-feed-label:focus, .rdrnl-feed-limit:focus { outline: none; border-color: var(--nl-accent); box-shadow: 0 0 0 3px rgba(var(--nl-accent-rgb), .12); } .rdrnl-feed-label::placeholder { color: var(--nl-text-muted); } /* Slot vide (hint visuel) */ .rdrnl-feed-slot.empty-slot { border-style: dashed; opacity: .75; } .rdrnl-feed-slot.empty-slot:focus-within { opacity: 1; border-style: solid; border-color: rgba(var(--nl-accent-rgb), .4); } /* Actions (bouton save + hint) */ .rdrnl-profile-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 4px; } .rdrnl-save-hint { font-size: 12px; color: var(--nl-text-muted); line-height: 1.4; } /* Message AJAX profil */ #rdrnl-prof-msg, #rdrnl-req-msg { margin-bottom: 16px; border-radius: var(--nl-radius-sm); padding: 10px 14px; font-size: 13px; line-height: 1.5; border: 1px solid transparent; } #rdrnl-prof-msg.ok, #rdrnl-req-msg.ok { background: rgba(var(--nl-accent-rgb), .1); color: var(--nl-accent); border-color: rgba(var(--nl-accent-rgb), .25); } #rdrnl-prof-msg.error, #rdrnl-req-msg.error { background: rgba(248, 81, 73, .1); color: #f85149; border-color: rgba(248, 81, 73, .25); } [data-theme="light"] #rdrnl-prof-msg.error, [data-theme="light"] #rdrnl-req-msg.error { color: #b91c1c; } /* ───────────────────────────────────────────────────────────── APERÇU ARTICLE SÉLECTIONNÉ dans le picker (admin modal) ───────────────────────────────────────────────────────────── */ .rdrnl-picker-selected-preview { display: flex; align-items: center; gap: 10px; background: var(--nl-surface); border: 1px solid var(--nl-border); border-radius: var(--nl-radius-sm); padding: 10px 12px; margin-bottom: 10px; } .rdrnl-picker-selected-preview img { width: 50px; height: 38px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .rdrnl-picker-selected-preview .rdrnl-ps-title { font-size: 13px; font-weight: 600; color: var(--nl-text); line-height: 1.3; } .rdrnl-picker-selected-preview .rdrnl-ps-meta { font-size: 11px; color: var(--nl-text-muted); margin-top: 2px; } /* ───────────────────────────────────────────────────────────── RESPONSIVE ───────────────────────────────────────────────────────────── */ @media (max-width: 600px) { .rdrnl-profile-card { padding: 20px 16px; } .rdrnl-profile-noauth { padding: 32px 16px; } .rdrnl-form-card { padding: 20px 16px; } .rdrnl-profile-form-row { flex-direction: column; } .rdrnl-profile-actions { flex-direction: column; align-items: flex-start; } .rdrnl-feed-slot { padding: 16px; } } /* ── Reengagement notice ── */ .rdrnl-notice-reengagement_ok { background: rgba(var(--nl-accent-rgb), .1); color: var(--nl-accent); border-color: rgba(var(--nl-accent-rgb), .25); font-weight: 500; } .rdrnl-notice-reengagement_invalid, .rdrnl-notice-reengagement_expired { background: rgba(251, 191, 36, .1); color: #fbbf24; border-color: rgba(251, 191, 36, .25); } [data-theme="light"] .rdrnl-notice-reengagement_invalid, [data-theme="light"] .rdrnl-notice-reengagement_expired { color: #92400e; } /* ───────────────────────────────────────────────────────────── EDITION — single + archive (GeneratePress layout) ───────────────────────────────────────────────────────────── */ /* Single */ .rdrnl-edition-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 13px; color: var(--rdr-text-secondary, #666); } .rdrnl-edition-badge { background: rgba(46,168,255,.12); color: #2ea8ff; border: 1px solid rgba(46,168,255,.25); border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600; } .rdrnl-edition-excerpt { font-size: 16px; color: var(--rdr-text-secondary, #666); margin: 8px 0 20px; line-height: 1.6; } .rdrnl-edition-content h2 { font-size: 18px; margin: 28px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--rdr-border, rgba(0,0,0,.08)); } .rdrnl-edition-content ul.rdrnl-edition-list { list-style: none; padding: 0; margin: 0 0 16px; } .rdrnl-edition-content ul.rdrnl-edition-list li { padding: 10px 0; border-bottom: 1px solid var(--rdr-border, rgba(0,0,0,.06)); } .rdrnl-edition-content ul.rdrnl-edition-list li:last-child { border-bottom: none; } .rdrnl-edition-content .rdrnl-edition-desc { font-size: 13px; color: var(--rdr-text-secondary, #666); display: block; margin-top: 2px; } .rdrnl-edition-content .rdrnl-edition-note { font-size: 12px; color: var(--nl-accent, #2ea8ff); display: block; margin-top: 4px; } .rdrnl-edition-content .rdrnl-edition-date { font-size: 11px; color: var(--rdr-text-muted, #999); display: block; margin-top: 2px; } .rdrnl-edition-content .rdrnl-edition-alt-label { font-size: 11px; color: var(--rdr-text-muted, #999); font-weight: 600; } .rdrnl-edition-content .rdrnl-edition-alt-link { font-size: 11px; color: var(--nl-accent, #2ea8ff); } .rdrnl-edition-content .rdrnl-edition-alt-link:hover { text-decoration: underline; } .rdrnl-edition-content blockquote.rdrnl-edition-intro { border-left: 3px solid var(--nl-accent, #2ea8ff); padding: 12px 18px; margin: 0 0 20px; background: var(--rdr-bg-surface, #f8f9fa); border-radius: 0 8px 8px 0; font-style: italic; } .rdrnl-edition-footer { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rdr-border, rgba(0,0,0,.08)); } .rdrnl-edition-subscribe { background: var(--rdr-bg-surface, #f8f9fa); border-radius: 10px; padding: 20px; margin-bottom: 16px; } .rdrnl-edition-subscribe p { margin-bottom: 12px; color: var(--rdr-text-secondary, #555); } .rdrnl-edition-feed-link { font-size: 13px; } .rdrnl-edition-feed-link a { color: var(--nl-accent, #2ea8ff); } /* Archive */ .page-header { margin-bottom: 28px; } .rdrnl-archive-desc { color: var(--rdr-text-secondary, #666); margin-bottom: 16px; } .rdrnl-archive-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; } .rdrnl-rss-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--nl-accent, #2ea8ff); border: 1px solid rgba(46,168,255,.25); border-radius: 6px; padding: 8px 14px; text-decoration: none; transition: background var(--nl-transition); } .rdrnl-rss-link:hover { background: rgba(46,168,255,.08); } .rdrnl-edition-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .rdrnl-edition-card { background: var(--rdr-bg-card, #fff); border: 1px solid var(--rdr-border, rgba(0,0,0,.08)); border-radius: 10px; overflow: hidden; transition: transform .15s, box-shadow .15s; } .rdrnl-edition-card:hover { transform: translateY(-2px); box-shadow: var(--rdr-shadow-card, 0 4px 16px rgba(0,0,0,.1)); } .rdrnl-edition-card-link { display: block; text-decoration: none; color: inherit; } .rdrnl-edition-card-inner { padding: 20px; } .rdrnl-edition-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12px; color: var(--rdr-text-muted, #999); } .rdrnl-edition-card-title { font-size: 16px; font-weight: 700; color: var(--rdr-text-primary, #1a1a2e); margin-bottom: 8px; line-height: 1.4; } .rdrnl-edition-card-excerpt { font-size: 13px; color: var(--rdr-text-secondary, #666); line-height: 1.5; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rdrnl-edition-card-count { font-size: 11px; color: var(--nl-accent, #2ea8ff); font-weight: 600; } /* ── Edition card thumbnail ── */ .rdrnl-edition-card-thumb { height: 140px; background-size: cover; background-position: center; background-color: var(--rdr-bg-card, #1c2128); border-radius: 10px 10px 0 0; } /* ── Shortcode grid columns ── */ .rdrnl-sc-cols-1 { grid-template-columns: 1fr; } .rdrnl-sc-cols-2 { grid-template-columns: repeat(2, 1fr); } .rdrnl-sc-cols-3 { grid-template-columns: repeat(3, 1fr); } .rdrnl-sc-cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 768px) { .rdrnl-sc-cols-3, .rdrnl-sc-cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .rdrnl-sc-cols-2, .rdrnl-sc-cols-3, .rdrnl-sc-cols-4 { grid-template-columns: 1fr; } } /* ── rdrnl_newsletter_page shortcode ── */ .rdrnl-nl-page-header { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--rdr-border, rgba(0,0,0,.08)); } .rdrnl-nl-pagination { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 28px; align-items: center; } .rdrnl-page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--rdr-border, rgba(0,0,0,.12)); border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--rdr-text-secondary, #555); text-decoration: none; background: var(--rdr-bg-card, #fff); transition: background var(--nl-transition), color var(--nl-transition), border-color var(--nl-transition); } .rdrnl-page-btn:hover { background: rgba(var(--nl-accent-rgb, 46,168,255), .08); border-color: var(--nl-accent, #2ea8ff); color: var(--nl-accent, #2ea8ff); text-decoration: none; } .rdrnl-page-btn.current { background: var(--nl-accent, #2ea8ff); border-color: var(--nl-accent, #2ea8ff); color: #fff; pointer-events: none; }