/** * XoXo Cards - Shortcode [xoxo_cards] styles * * Fichier CSS dedie au shortcode autonome [xoxo_cards]. * Enqueue via wp_enqueue_style() pour garantir le chargement dans * (jamais strippe par Elementor / autres sanitizers de contenu HTML). * * Selecteurs imbriques a haute specificite + !important strategique pour * vaincre les overrides du theme (SocialV / Elementor / autres). * * Palette XoXo officielle : * #FF00AA : primary brand * #FF66C4 : secondary brand * #831843 : dark accent (texte rose fonce) * #c71585 : medium accent (hover) * #fbcfe8 : border rose pale * #fff5fb : background rose pastel * * @package XoXo_Cards * @since 8.4.2 */ /* ============================================================ */ /* WRAPPER PRINCIPAL */ /* ============================================================ */ .xoxo-cards-shortcode-wrapper { max-width: 1200px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; color: #1f2937; } /* ============================================================ */ /* BARRE DE NAVIGATION (pilules avec icones SVG) */ /* ============================================================ */ .xoxo-cards-shortcode-wrapper .xoxo-cards-shortcode-nav, nav.xoxo-cards-shortcode-nav { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding: 14px 0 18px 0 !important; margin: 0 0 24px 0 !important; border-bottom: 1px solid #fce7f3 !important; list-style: none !important; background: transparent !important; align-items: center !important; justify-content: flex-start !important; } /* ----- ETAT NORMAL (repos) ----- */ .xoxo-cards-shortcode-wrapper .xoxo-cards-shortcode-nav a.xoxo-cards-shortcode-tab, .xoxo-cards-shortcode-wrapper .xoxo-cards-shortcode-nav .xoxo-cards-shortcode-tab, nav.xoxo-cards-shortcode-nav a.xoxo-cards-shortcode-tab { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; padding: 10px 18px !important; border-radius: 999px !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.2 !important; color: #831843 !important; background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; border: 1.5px solid #fbcfe8 !important; text-decoration: none !important; text-shadow: none !important; box-shadow: 0 1px 2px rgba(255, 0, 170, 0.04) !important; transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important; white-space: nowrap !important; cursor: pointer !important; font-family: inherit !important; letter-spacing: normal !important; text-transform: none !important; outline: none !important; box-sizing: border-box !important; min-height: 0 !important; height: auto !important; width: auto !important; } /* ----- ETAT HOVER ----- */ .xoxo-cards-shortcode-wrapper .xoxo-cards-shortcode-nav a.xoxo-cards-shortcode-tab:hover, .xoxo-cards-shortcode-wrapper .xoxo-cards-shortcode-nav a.xoxo-cards-shortcode-tab:focus, .xoxo-cards-shortcode-wrapper .xoxo-cards-shortcode-nav .xoxo-cards-shortcode-tab:hover, .xoxo-cards-shortcode-wrapper .xoxo-cards-shortcode-nav .xoxo-cards-shortcode-tab:focus, nav.xoxo-cards-shortcode-nav a.xoxo-cards-shortcode-tab:hover { background: #fff5fb !important; background-color: #fff5fb !important; background-image: none !important; color: #c71585 !important; border-color: #FF66C4 !important; text-decoration: none !important; box-shadow: 0 3px 10px rgba(255, 0, 170, 0.12) !important; transform: translateY(-1px) !important; outline: none !important; } /* ----- ETAT ACTIF ----- */ .xoxo-cards-shortcode-wrapper .xoxo-cards-shortcode-nav a.xoxo-cards-shortcode-tab.is-active, .xoxo-cards-shortcode-wrapper .xoxo-cards-shortcode-nav a.xoxo-cards-shortcode-tab.is-active:link, .xoxo-cards-shortcode-wrapper .xoxo-cards-shortcode-nav a.xoxo-cards-shortcode-tab.is-active:visited, .xoxo-cards-shortcode-wrapper .xoxo-cards-shortcode-nav .xoxo-cards-shortcode-tab.is-active, nav.xoxo-cards-shortcode-nav a.xoxo-cards-shortcode-tab.is-active { background: #FF00AA !important; background: linear-gradient(135deg, #FF00AA 0%, #FF66C4 100%) !important; background-color: #FF00AA !important; color: #ffffff !important; border-color: transparent !important; box-shadow: 0 4px 14px rgba(255, 0, 170, 0.30) !important; transform: none !important; } /* ----- ETAT ACTIF + HOVER ----- */ .xoxo-cards-shortcode-wrapper .xoxo-cards-shortcode-nav a.xoxo-cards-shortcode-tab.is-active:hover, .xoxo-cards-shortcode-wrapper .xoxo-cards-shortcode-nav a.xoxo-cards-shortcode-tab.is-active:focus, .xoxo-cards-shortcode-wrapper .xoxo-cards-shortcode-nav .xoxo-cards-shortcode-tab.is-active:hover, nav.xoxo-cards-shortcode-nav a.xoxo-cards-shortcode-tab.is-active:hover { color: #ffffff !important; box-shadow: 0 6px 18px rgba(255, 0, 170, 0.42) !important; transform: translateY(-1px) !important; } /* ----- ICONES SVG INLINE - TOUJOURS VISIBLES ----- */ .xoxo-cards-shortcode-wrapper .xoxo-cards-shortcode-nav .xoxo-cards-shortcode-tab svg.xoxo-cards-shortcode-tab-icon, nav.xoxo-cards-shortcode-nav a.xoxo-cards-shortcode-tab svg.xoxo-cards-shortcode-tab-icon { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; color: inherit !important; stroke: currentColor !important; fill: none !important; vertical-align: middle !important; display: inline-block !important; } /* ----- LABEL ----- */ .xoxo-cards-shortcode-wrapper .xoxo-cards-shortcode-nav .xoxo-cards-shortcode-tab-label, nav.xoxo-cards-shortcode-nav .xoxo-cards-shortcode-tab-label { display: inline !important; color: inherit !important; font-weight: inherit !important; text-shadow: none !important; } /* ============================================================ */ /* CONTENU DE LA SECTION */ /* ============================================================ */ .xoxo-cards-shortcode-content { min-height: 200px; } /* ============================================================ */ /* LOGIN WALL (non connectes) */ /* ============================================================ */ .xoxo-cards-shortcode-loginwall { padding: 40px 16px !important; } .xoxo-cards-loginwall-card { max-width: 520px; margin: 0 auto; padding: 36px 28px; background: #fff; border: 1px solid #f3f4f6; border-radius: 18px; box-shadow: 0 8px 32px rgba(17, 24, 39, 0.06); text-align: center; } .xoxo-cards-loginwall-icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #FF00AA, #FF66C4); color: #fff; margin-bottom: 18px; } .xoxo-cards-loginwall-title { font-size: 22px; font-weight: 700; margin: 0 0 10px 0; color: #111827; } .xoxo-cards-loginwall-text { font-size: 15px; line-height: 1.55; color: #4b5563; margin: 0 0 24px 0; } .xoxo-cards-loginwall-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .xoxo-cards-loginwall-btn { display: inline-block !important; padding: 12px 22px !important; font-size: 15px !important; font-weight: 700 !important; border-radius: 10px !important; text-decoration: none !important; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important; line-height: 1.2 !important; min-width: 160px !important; } .xoxo-cards-loginwall-btn-primary { background: linear-gradient(135deg, #FF00AA, #FF66C4) !important; color: #fff !important; border: 2px solid transparent !important; box-shadow: 0 4px 14px rgba(255, 0, 170, 0.28) !important; } .xoxo-cards-loginwall-btn-primary:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(255, 0, 170, 0.38) !important; color: #fff !important; } .xoxo-cards-loginwall-btn-secondary { background: #fff !important; color: #FF00AA !important; border: 2px solid #FF00AA !important; } .xoxo-cards-loginwall-btn-secondary:hover { background: #fff5fb !important; transform: translateY(-1px) !important; color: #FF00AA !important; } /* ============================================================ */ /* RESPONSIVE */ /* ============================================================ */ @media (max-width: 782px) { .xoxo-cards-shortcode-wrapper .xoxo-cards-shortcode-nav, nav.xoxo-cards-shortcode-nav { gap: 6px !important; padding: 10px 0 14px 0 !important; } .xoxo-cards-shortcode-wrapper .xoxo-cards-shortcode-nav a.xoxo-cards-shortcode-tab, .xoxo-cards-shortcode-wrapper .xoxo-cards-shortcode-nav .xoxo-cards-shortcode-tab, nav.xoxo-cards-shortcode-nav a.xoxo-cards-shortcode-tab { padding: 8px 14px !important; font-size: 13px !important; } .xoxo-cards-shortcode-wrapper .xoxo-cards-shortcode-nav .xoxo-cards-shortcode-tab svg.xoxo-cards-shortcode-tab-icon, nav.xoxo-cards-shortcode-nav a.xoxo-cards-shortcode-tab svg.xoxo-cards-shortcode-tab-icon { width: 15px !important; height: 15px !important; } } @media (max-width: 480px) { .xoxo-cards-shortcode-wrapper .xoxo-cards-shortcode-nav a.xoxo-cards-shortcode-tab, .xoxo-cards-shortcode-wrapper .xoxo-cards-shortcode-nav .xoxo-cards-shortcode-tab, nav.xoxo-cards-shortcode-nav a.xoxo-cards-shortcode-tab { padding: 7px 12px !important; font-size: 12.5px !important; gap: 5px !important; } .xoxo-cards-loginwall-card { padding: 28px 18px; } .xoxo-cards-loginwall-title { font-size: 19px; } .xoxo-cards-loginwall-text { font-size: 14px; } .xoxo-cards-loginwall-btn { width: 100% !important; min-width: auto !important; } }