/** * Paletes pastel Bicial (v33). Requereix `data-theme-palette="1".."5"` a ``. * 1 blau · 2 taronja · 3 verd · 4 lila · 5 mode fosc * Sobreescriu variables de styles.css, styles-bicial-visual.css i Playtomic. */ /* Fallback abans que s’apliqui data-theme-palette (paleta 1 = blau pastel) */ :root { --bg-app: #ffffff; --bg-app-2: #f5f9ff; --surface: transparent; --surface-solid: transparent; --surface-soft: transparent; --surface-hover: #eef6ff; --border: #cfe3fc; --border-strong: #b8d4f7; --text-main: #1e3a5f; --text-soft: #4a6b8a; --text-muted: #6b8caf; --text-faint: #8aa8c4; --primary: #7eb8f0; --primary-dark: #4a90d9; --accent: #a8d4ff; --danger: #e07a7a; --quick-icon-bg: #e8f4ff; --quick-icon-bg-hover: #d6ebff; --quick-icon-bg-active: #c4e2ff; --quick-icon-color: #2d6fad; --quick-icon-ring: #4a90d9; --brand: #7eb8f0; --brand-strong: #4a90d9; --brand-soft: transparent; --playtomic-shell-bg: #ffffff; --playtomic-nav-gradient-start: #d6ebff; --playtomic-nav-gradient-end: #7eb8f0; --playtomic-nav-title: #f5f9ff; --playtomic-bottom-chrome-bg: #ffffff; --playtomic-bottom-border-top: #cfe3fc; --playtomic-muted: #6b8caf; --playtomic-link: #4a90d9; --playtomic-link-bg: transparent; --playtomic-header-dropdown-border: #b8d4f7; --playtomic-header-dropdown-shadow: none; --playtomic-card-border: #cfe3fc; --playtomic-card-shadow: none; --palette-accent-strong: #2d6fad; --palette-accent-mid: #4a90d9; --palette-accent-soft: #7eb8f0; --palette-on-accent-text: #f5f9ff; } /* --- 1: Blau pastel (per defecte) --- */ html[data-theme-palette="1"] { --bg-app: #ffffff; --bg-app-2: #f5f9ff; --surface: transparent; --surface-solid: transparent; --surface-soft: transparent; --surface-hover: #eef6ff; --border: #cfe3fc; --border-strong: #b8d4f7; --text-main: #1e3a5f; --text-soft: #4a6b8a; --text-muted: #6b8caf; --text-faint: #8aa8c4; --primary: #7eb8f0; --primary-dark: #4a90d9; --accent: #a8d4ff; --danger: #e07a7a; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 8px; --radius-pill: 6px; --quick-icon-bg: #e8f4ff; --quick-icon-bg-hover: #d6ebff; --quick-icon-bg-active: #c4e2ff; --quick-icon-color: #2d6fad; --quick-icon-ring: #4a90d9; --brand: #7eb8f0; --brand-strong: #4a90d9; --brand-soft: transparent; --playtomic-shell-bg: #ffffff; --playtomic-nav-gradient-start: #d6ebff; --playtomic-nav-gradient-end: #7eb8f0; --playtomic-nav-title: #f5f9ff; --playtomic-bottom-chrome-bg: #ffffff; --playtomic-bottom-border-top: #cfe3fc; --playtomic-muted: #6b8caf; --playtomic-link: #4a90d9; --playtomic-link-bg: transparent; --playtomic-header-dropdown-border: #b8d4f7; --playtomic-header-dropdown-shadow: none; --playtomic-card-border: #cfe3fc; --playtomic-card-shadow: none; --palette-accent-strong: #2d6fad; --palette-accent-mid: #4a90d9; --palette-accent-soft: #7eb8f0; --palette-on-accent-text: #f5f9ff; } /* --- 2: Taronja pastel --- */ html[data-theme-palette="2"] { --bg-app: #ffffff; --bg-app-2: #fffaf5; --surface: transparent; --surface-solid: transparent; --surface-soft: transparent; --surface-hover: #fff4e8; --border: #fde0c4; --border-strong: #f5c9a0; --text-main: #4a3428; --text-soft: #7a5c48; --text-muted: #9a7358; --text-faint: #b8957a; --primary: #f4a261; --primary-dark: #e76f51; --accent: #f9c784; --danger: #e07a7a; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 8px; --radius-pill: 6px; --quick-icon-bg: #ffedd8; --quick-icon-bg-hover: #fde8c8; --quick-icon-bg-active: #fcd9b8; --quick-icon-color: #c45a2c; --quick-icon-ring: #e76f51; --brand: #f4a261; --brand-strong: #e76f51; --brand-soft: transparent; --playtomic-shell-bg: #ffffff; --playtomic-nav-gradient-start: #fcd9b8; --playtomic-nav-gradient-end: #f4a261; --playtomic-nav-title: #fffaf5; --playtomic-bottom-chrome-bg: #ffffff; --playtomic-bottom-border-top: #fde0c4; --playtomic-muted: #9a7358; --playtomic-link: #e76f51; --playtomic-link-bg: transparent; --playtomic-header-dropdown-border: #f5c9a0; --playtomic-header-dropdown-shadow: none; --playtomic-card-border: #fde0c4; --playtomic-card-shadow: none; --palette-accent-strong: #c45a2c; --palette-accent-mid: #e76f51; --palette-accent-soft: #f4a261; --palette-on-accent-text: #fffaf5; } /* --- 3: Verd pastel --- */ html[data-theme-palette="3"] { --bg-app: #ffffff; --bg-app-2: #f4fdf7; --surface: transparent; --surface-solid: transparent; --surface-soft: transparent; --surface-hover: #e8f8ef; --border: #c8ead4; --border-strong: #a8dcc0; --text-main: #1a4d32; --text-soft: #2d6b4a; --text-muted: #4a8a66; --text-faint: #6ba883; --primary: #6bc99a; --primary-dark: #3da876; --accent: #9edfb8; --danger: #d97070; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 8px; --radius-pill: 6px; --quick-icon-bg: #e4f7ec; --quick-icon-bg-hover: #d4f0e0; --quick-icon-bg-active: #c4e9d4; --quick-icon-color: #2d7a52; --quick-icon-ring: #3da876; --brand: #6bc99a; --brand-strong: #3da876; --brand-soft: transparent; --playtomic-shell-bg: #ffffff; --playtomic-nav-gradient-start: #c8ead4; --playtomic-nav-gradient-end: #6bc99a; --playtomic-nav-title: #f4fdf7; --playtomic-bottom-chrome-bg: #ffffff; --playtomic-bottom-border-top: #c8ead4; --playtomic-muted: #4a8a66; --playtomic-link: #3da876; --playtomic-link-bg: transparent; --playtomic-header-dropdown-border: #a8dcc0; --playtomic-header-dropdown-shadow: none; --playtomic-card-border: #c8ead4; --playtomic-card-shadow: none; --palette-accent-strong: #2d7a52; --palette-accent-mid: #3da876; --palette-accent-soft: #6bc99a; --palette-on-accent-text: #f4fdf7; } /* --- 4: Lila pastel --- */ html[data-theme-palette="4"] { --bg-app: #ffffff; --bg-app-2: #faf7ff; --surface: transparent; --surface-solid: transparent; --surface-soft: transparent; --surface-hover: #f3edff; --border: #e4d4f5; --border-strong: #d4c0ef; --text-main: #3d2f5c; --text-soft: #5c4a7a; --text-muted: #7a6896; --text-faint: #9a88b0; --primary: #c4b5fd; --primary-dark: #8b6fc0; --accent: #ddd6fe; --danger: #d9708a; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 8px; --radius-pill: 6px; --quick-icon-bg: #f0eaff; --quick-icon-bg-hover: #e8e0ff; --quick-icon-bg-active: #dfd4ff; --quick-icon-color: #6b4fa8; --quick-icon-ring: #8b6fc0; --brand: #c4b5fd; --brand-strong: #8b6fc0; --brand-soft: transparent; --playtomic-shell-bg: #ffffff; --playtomic-nav-gradient-start: #e4d4f5; --playtomic-nav-gradient-end: #c4b5fd; --playtomic-nav-title: #faf7ff; --playtomic-bottom-chrome-bg: #ffffff; --playtomic-bottom-border-top: #e4d4f5; --playtomic-muted: #7a6896; --playtomic-link: #8b6fc0; --playtomic-link-bg: transparent; --playtomic-header-dropdown-border: #d4c0ef; --playtomic-header-dropdown-shadow: none; --playtomic-card-border: #e4d4f5; --playtomic-card-shadow: none; --palette-accent-strong: #6b4fa8; --palette-accent-mid: #8b6fc0; --palette-accent-soft: #c4b5fd; --palette-on-accent-text: #faf7ff; } /* --- 5: Blanc i negre (mode fosc) --- */ html[data-theme-palette="5"] { color-scheme: dark; --bg-app: #0f1115; --bg-app-2: #161a22; --surface: rgba(28, 32, 40, 0.94); --surface-solid: #1e232b; --surface-soft: #252b36; --surface-hover: #323946; --border: #3d4655; --border-strong: #4b5563; --text-main: #f3f4f6; --text-soft: #d1d5db; --text-muted: #9ca3af; --text-faint: #6b7280; --primary: #e5e7eb; --primary-dark: #f9fafb; --accent: #a1a1aa; --danger: #f87171; --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.55); --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.62); --quick-icon-bg: #323946; --quick-icon-bg-hover: #3d4655; --quick-icon-bg-active: #4b5563; --quick-icon-color: #e5e7eb; --quick-icon-ring: #d1d5db; --brand: #d1d5db; --brand-strong: #f3f4f6; --brand-soft: rgba(243, 244, 246, 0.1); --success-soft: rgba(52, 211, 153, 0.12); --danger-soft: rgba(248, 113, 113, 0.12); --danger-border: rgba(248, 113, 113, 0.32); --danger-text: #fca5a5; --shop-bg: #13161c; --shop-surface: #1c212b; --shop-surface-soft: #252b36; --shop-border: #3d4655; --shop-text: #f3f4f6; --shop-muted: #9ca3af; --shop-primary: #f9fafb; --shop-accent: #d1d5db; --shop-accent-hover: #f3f4f6; --shop-success: #86efac; --shop-danger: #f87171; --shop-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.4); --shop-shadow-md: 0 18px 44px rgba(0, 0, 0, 0.5); --playtomic-shell-bg: #111318; --playtomic-nav-gradient-start: #3f4654; --playtomic-nav-gradient-end: #0b0d10; --playtomic-nav-title: #f9fafb; --playtomic-bottom-chrome-bg: #161a22; --playtomic-bottom-border-top: #2f3540; --playtomic-muted: #9ca3af; --playtomic-link: #e5e7eb; --playtomic-link-bg: rgba(255, 255, 255, 0.1); --playtomic-header-dropdown-border: rgba(75, 85, 99, 0.85); --playtomic-header-dropdown-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); --playtomic-card-border: #2f3540; --playtomic-card-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); } /* ============================================================================= Pastels 1–4: capçalera Playtomic, icones i enllaços (per paleta) ============================================================================= */ html[data-theme-palette="1"] .navbar, html[data-theme-palette="2"] .navbar, html[data-theme-palette="3"] .navbar, html[data-theme-palette="4"] .navbar { background: linear-gradient( 180deg, color-mix(in srgb, var(--playtomic-nav-gradient-start) 88%, #ffffff) 0%, color-mix(in srgb, var(--playtomic-nav-gradient-end) 72%, #ffffff) 100% ); border-bottom: 1px solid var(--border-strong); } html[data-theme-palette="1"] body.page-feed.feed-theme-playtomic .navbar, html[data-theme-palette="2"] body.page-feed.feed-theme-playtomic .navbar, html[data-theme-palette="3"] body.page-feed.feed-theme-playtomic .navbar, html[data-theme-palette="4"] body.page-feed.feed-theme-playtomic .navbar { background: linear-gradient( 180deg, var(--playtomic-nav-gradient-start) 0%, var(--playtomic-nav-gradient-end) 100% ); border-bottom: 1px solid color-mix(in srgb, var(--palette-accent-mid) 35%, transparent); } html[data-theme-palette="1"] body.page-feed.feed-theme-playtomic .navbar .menu-item.navbar-brand-link strong, html[data-theme-palette="2"] body.page-feed.feed-theme-playtomic .navbar .menu-item.navbar-brand-link strong, html[data-theme-palette="3"] body.page-feed.feed-theme-playtomic .navbar .menu-item.navbar-brand-link strong, html[data-theme-palette="4"] body.page-feed.feed-theme-playtomic .navbar .menu-item.navbar-brand-link strong, html[data-theme-palette="1"] body.page-feed.feed-theme-playtomic .navbar .btn-circle, html[data-theme-palette="2"] body.page-feed.feed-theme-playtomic .navbar .btn-circle, html[data-theme-palette="3"] body.page-feed.feed-theme-playtomic .navbar .btn-circle, html[data-theme-palette="4"] body.page-feed.feed-theme-playtomic .navbar .btn-circle { color: var(--palette-on-accent-text); } html[data-theme-palette="1"] .main-container i[class*="fa-"], html[data-theme-palette="2"] .main-container i[class*="fa-"], html[data-theme-palette="3"] .main-container i[class*="fa-"], html[data-theme-palette="4"] .main-container i[class*="fa-"], html[data-theme-palette="1"] .bottom-nav-bar i[class*="fa-"], html[data-theme-palette="2"] .bottom-nav-bar i[class*="fa-"], html[data-theme-palette="3"] .bottom-nav-bar i[class*="fa-"], html[data-theme-palette="4"] .bottom-nav-bar i[class*="fa-"] { color: var(--palette-accent-mid); } html[data-theme-palette="1"] .bottom-nav-icon.active, html[data-theme-palette="2"] .bottom-nav-icon.active, html[data-theme-palette="3"] .bottom-nav-icon.active, html[data-theme-palette="4"] .bottom-nav-icon.active, html[data-theme-palette="1"] .bottom-nav-icon.active > i, html[data-theme-palette="2"] .bottom-nav-icon.active > i, html[data-theme-palette="3"] .bottom-nav-icon.active > i, html[data-theme-palette="4"] .bottom-nav-icon.active > i { color: var(--palette-accent-strong); } html[data-theme-palette="1"] .config-title, html[data-theme-palette="2"] .config-title, html[data-theme-palette="3"] .config-title, html[data-theme-palette="4"] .config-title, html[data-theme-palette="1"] .config-section-title, html[data-theme-palette="2"] .config-section-title, html[data-theme-palette="3"] .config-section-title, html[data-theme-palette="4"] .config-section-title { color: var(--palette-accent-strong); } html[data-theme-palette="1"] .main-container a[href]:where(:not(.btn-primary):not(.btn-send):not(.club-portada-membres-btn):not(.club-portada-subnav__btn):not(.nivell-ranking-period__tab)), html[data-theme-palette="2"] .main-container a[href]:where(:not(.btn-primary):not(.btn-send):not(.club-portada-membres-btn):not(.club-portada-subnav__btn):not(.nivell-ranking-period__tab)), html[data-theme-palette="3"] .main-container a[href]:where(:not(.btn-primary):not(.btn-send):not(.club-portada-membres-btn):not(.club-portada-subnav__btn):not(.nivell-ranking-period__tab)), html[data-theme-palette="4"] .main-container a[href]:where(:not(.btn-primary):not(.btn-send):not(.club-portada-membres-btn):not(.club-portada-subnav__btn):not(.nivell-ranking-period__tab)), html[data-theme-palette="1"] .config-shell a[href]:where(:not(.btn-primary):not(.config-pending-btn):not(.club-portada-subnav__btn):not(.nivell-ranking-period__tab)), html[data-theme-palette="2"] .config-shell a[href]:where(:not(.btn-primary):not(.config-pending-btn):not(.club-portada-subnav__btn):not(.nivell-ranking-period__tab)), html[data-theme-palette="3"] .config-shell a[href]:where(:not(.btn-primary):not(.config-pending-btn):not(.club-portada-subnav__btn):not(.nivell-ranking-period__tab)), html[data-theme-palette="4"] .config-shell a[href]:where(:not(.btn-primary):not(.config-pending-btn):not(.club-portada-subnav__btn):not(.nivell-ranking-period__tab)) { color: var(--palette-accent-strong); text-decoration-color: var(--palette-accent-mid); } html[data-theme-palette="1"] mark, html[data-theme-palette="2"] mark, html[data-theme-palette="3"] mark, html[data-theme-palette="4"] mark { background: color-mix(in srgb, var(--palette-accent-soft) 40%, #ffffff); color: var(--palette-accent-strong); } /* ============================================================================= Paleta 5 — mode fosc (sobreescriptures) ============================================================================= */ html[data-theme-palette="5"] .navbar { background: rgba(22, 26, 32, 0.92); border-bottom-color: rgba(75, 85, 99, 0.65); } html[data-theme-palette="5"] .left-sidebar, html[data-theme-palette="5"] .right-sidebar { border-color: rgba(75, 85, 99, 0.75); } html[data-theme-palette="5"] .divider { background: rgba(156, 163, 175, 0.28); } html[data-theme-palette="5"] .menu-item.is-active, html[data-theme-palette="5"] .dropdown-item.is-active { background: rgba(255, 255, 255, 0.1); color: var(--text-main); } html[data-theme-palette="5"] .sidebar-icon-community, html[data-theme-palette="5"] .sidebar-icon-bookmark { color: #c4c9d4; } html[data-theme-palette="5"] .online-dot { border-color: var(--surface-solid); } html[data-theme-palette="5"] .contact-friendship-tag.is-friend { color: #86efac; background: rgba(34, 197, 94, 0.12); border-color: rgba(74, 222, 128, 0.35); } html[data-theme-palette="5"] .contact-friendship-tag.is-non-friend { color: var(--text-muted); background: var(--surface-soft); border-color: var(--border); } html[data-theme-palette="5"] .contacts-filter-btn { border-color: var(--border); background: var(--surface-solid); color: var(--text-soft); } html[data-theme-palette="5"] .contacts-filter-btn.is-active { background: rgba(255, 255, 255, 0.12); color: var(--text-main); border-color: var(--border-strong); } html[data-theme-palette="5"] .ad-card { background: rgba(30, 35, 44, 0.88); border-color: rgba(75, 85, 99, 0.65); } html[data-theme-palette="5"] .btn-circle:hover { background: var(--surface-hover); border-color: var(--border-strong); } html[data-theme-palette="5"] .btn-send { color: #0b0d10; } html[data-theme-palette="5"] .bottom-nav-bar { background: var(--surface-solid); border-top-color: rgba(75, 85, 99, 0.75); box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.45); } html[data-theme-palette="5"] .bottom-nav-icon.active { background: rgba(255, 255, 255, 0.1); color: var(--text-main); } html[data-theme-palette="5"] .bottom-dropdown { background: rgba(30, 35, 44, 0.98); border: 1px solid rgba(75, 85, 99, 0.85); } html[data-theme-palette="5"] .dropdown-divider { background: rgba(156, 163, 175, 0.25); } html[data-theme-palette="5"] .modal-content, html[data-theme-palette="5"] .new-post-content { background: rgba(30, 35, 44, 0.98); border: 1px solid rgba(75, 85, 99, 0.85); color: var(--text-main); } html[data-theme-palette="5"] .header-more-dropdown { background: rgba(30, 35, 44, 0.98); color: var(--text-main); border: 1px solid rgba(75, 85, 99, 0.85); } html[data-theme-palette="5"] .feed-discover-btn { color: #0b0d10; } html[data-theme-palette="5"] .shop-page { background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), transparent 26%), linear-gradient(180deg, #1a1f28 0%, var(--shop-bg) 100%); } html[data-theme-palette="5"] .shop-hero { border-color: rgba(255, 255, 255, 0.08); } html[data-theme-palette="5"] .page-configuracio a:not(.btn-primary):not(.club-portada-membres-btn):not(.club-portada-subnav__btn) { color: var(--text-soft); } html[data-theme-palette="5"] .page-configuracio a:not(.btn-primary):not(.club-portada-membres-btn):not(.club-portada-subnav__btn):hover { color: var(--text-main); } html[data-theme-palette="5"] .config-actions .btn-primary, html[data-theme-palette="5"] .admin-form-actions .btn-primary { background: linear-gradient(135deg, #e5e7eb 0%, #f9fafb 100%); color: #111827; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); } html[data-theme-palette="5"] .config-actions .btn-primary:hover, html[data-theme-palette="5"] .admin-form-actions .btn-primary:hover { background: #f9fafb; } html[data-theme-palette="5"] .config-pending-btn--ok { background: linear-gradient(135deg, #d1d5db 0%, #f3f4f6 100%); color: #111827; border-color: #9ca3af; } html[data-theme-palette="5"] .config-pending-btn--ok:hover { background: #f3f4f6; } html[data-theme-palette="5"] .config-pending-club { color: var(--text-soft); } html[data-theme-palette="5"] .config-pending-meta { color: var(--text-muted); } html[data-theme-palette="5"] .config-pending-btn--no { border-color: var(--border); } html[data-theme-palette="5"] .config-section--club-admin { border-color: rgba(255, 255, 255, 0.12); } html[data-theme-palette="5"] .admin-usuaris-nav a { color: var(--text-soft); } html[data-theme-palette="5"] .admin-user-avatar { background: var(--surface-soft); } html[data-theme-palette="5"] .club-portada-membres-btn { background: linear-gradient(135deg, #d1d5db 0%, #f3f4f6 100%); color: #111827; border-color: #6b7280; } html[data-theme-palette="5"] .club-portada-membres-btn:hover { background: #f9fafb; color: #111827; } html[data-theme-palette="5"] .club-portada-membres-btn:focus-visible { outline-color: #d1d5db; } html[data-theme-palette="5"] .club-portada-header .config-lead code { background: var(--surface-soft); color: var(--text-soft); } html[data-theme-palette="5"] .config-palette-card--active { border-color: var(--border-strong); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12); } html[data-theme-palette="5"] .config-palette-card:focus-within { outline-color: var(--text-muted); } html[data-theme-palette="5"] .page-configuracio .config-flash--ok { background: rgba(34, 197, 94, 0.15); color: #86efac; border-color: rgba(74, 222, 128, 0.35); } html[data-theme-palette="5"] .page-configuracio .config-flash--error { background: rgba(248, 113, 113, 0.12); color: #fecaca; border-color: rgba(248, 113, 113, 0.35); } html[data-theme-palette="5"] textarea, html[data-theme-palette="5"] select, html[data-theme-palette="5"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]):not([type="hidden"]) { background: var(--surface-soft); color: var(--text-main); border-color: var(--border); } html[data-theme-palette="5"] ::placeholder { color: var(--text-muted); opacity: 0.95; }