/* ═══════════════════════════════════════════════════════════════════ GAMZZI DARK THEME — Indigo/Violet Palette ALL rules scoped to html.yc-dark-mode so light mode is unaffected. The theme toggle in the header adds/removes this class on . ═══════════════════════════════════════════════════════════════════ */ /* ─── Base ─────────────────────────────────────────────────────── */ html.yc-dark-mode body, html.yc-dark-mode body .yc-portal, html.yc-dark-mode body .new-feed-page { background: radial-gradient(circle at 8% 0%, rgba(255, 100, 34, 0.18), transparent 32%), radial-gradient(circle at 90% 20%, rgba(255, 122, 47, 0.12), transparent 28%), #121212 !important; color: #e8e6f0; } /* ─── Logo — force dark version ─────────────────────────────────── */ html.yc-dark-mode body .new-feed-logo .new-logo-light { display: none !important; } html.yc-dark-mode body .new-feed-logo .new-logo-dark { display: inline-block !important; } /* ─── Topbar / Header ───────────────────────────────────────────── */ html.yc-dark-mode body .new-feed-topbar { background: rgba(16, 14, 30, 0.97) !important; border-bottom-color: rgba(255, 100, 34, 0.18) !important; box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5) !important; backdrop-filter: blur(20px) !important; } html.yc-dark-mode body .new-feed-search, html.yc-dark-mode body .new-hero-search, html.yc-dark-mode body .new-user-pill, html.yc-dark-mode body .new-login-link, html.yc-dark-mode body .yc-foodies-search { background: rgba(30, 30, 30, 0.95) !important; border-color: rgba(255, 100, 34, 0.2) !important; color: #c8c4de !important; } html.yc-dark-mode body .new-feed-search i, html.yc-dark-mode body .new-hero-search i, html.yc-dark-mode body .yc-foodies-search i { color: #7c7a95 !important; } html.yc-dark-mode body .new-feed-search input, html.yc-dark-mode body .new-hero-search input, html.yc-dark-mode body .yc-foodies-search input { color: #e8e6f0 !important; } html.yc-dark-mode body .new-feed-search input::placeholder, html.yc-dark-mode body .new-hero-search input::placeholder, html.yc-dark-mode body .yc-foodies-search input::placeholder { color: #7c7a95 !important; } html.yc-dark-mode body .new-feed-nav a { color: #a5a3b8 !important; } html.yc-dark-mode body .new-feed-nav a.active, html.yc-dark-mode body .new-feed-nav a:hover { background: rgba(255, 100, 34, 0.16) !important; color: #ffaa7d !important; } html.yc-dark-mode body .new-icon-action { background: rgba(30, 30, 30, 0.9) !important; border-color: rgba(255, 100, 34, 0.2) !important; color: #c8c4de !important; } /* ─── Profile Dropdown ──────────────────────────────────────────── */ html.yc-dark-mode body .new-profile-dropdown, html.yc-dark-mode body .new-create-dropdown { background: linear-gradient(160deg, rgba(30, 30, 30, 0.99), rgba(22, 22, 22, 0.99)) !important; border-color: rgba(255, 100, 34, 0.2) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6) !important; } html.yc-dark-mode body .new-profile-summary { background: rgba(255, 100, 34, 0.1) !important; border-bottom: 1px solid rgba(255, 100, 34, 0.12) !important; } html.yc-dark-mode body .new-profile-summary strong { color: #f0eeff !important; } html.yc-dark-mode body .new-profile-summary small { color: #9490ac !important; } html.yc-dark-mode body .new-profile-dropdown a, html.yc-dark-mode body .new-profile-dropdown button, html.yc-dark-mode body .new-create-dropdown a { color: #c8c4de !important; } html.yc-dark-mode body .new-profile-dropdown a:hover, html.yc-dark-mode body .new-profile-dropdown button:hover, html.yc-dark-mode body .new-create-dropdown a:hover { background: rgba(255, 100, 34, 0.16) !important; color: #ffe3d5 !important; } html.yc-dark-mode body .new-profile-control { background: rgba(26, 26, 26, 0.9) !important; border-color: rgba(255, 100, 34, 0.12) !important; } html.yc-dark-mode body .new-profile-control strong { color: #c8c4de !important; } html.yc-dark-mode body .new-menu-select { background: rgba(18, 18, 18, 0.98) !important; border-color: rgba(255, 100, 34, 0.22) !important; color: #e8e6f0 !important; } html.yc-dark-mode body .new-theme-toggle { background: rgba(26, 26, 26, 0.9) !important; border-color: rgba(255, 100, 34, 0.2) !important; color: #ffaa7d !important; } /* ─── Cards & Surfaces ──────────────────────────────────────────── */ html.yc-dark-mode body .yc-side-panel, html.yc-dark-mode body .yc-card, html.yc-dark-mode body .yc-method-card, html.yc-dark-mode body .yc-empty, html.yc-dark-mode body .yc-form-card, html.yc-dark-mode body .yc-recipe-facts div, html.yc-dark-mode body .new-card, html.yc-dark-mode body .new-menu-card, html.yc-dark-mode body .new-post-actions, html.yc-dark-mode body .new-feed-empty, html.yc-dark-mode body .yc-article-card, html.yc-dark-mode body .yc-category-card, html.yc-dark-mode body .yc-profile-mini-card, html.yc-dark-mode body .yc-profile-tabs, html.yc-dark-mode body .yc-profile-banner, html.yc-dark-mode body .yc-foodies-panel, html.yc-dark-mode body .yc-notifications-card, html.yc-dark-mode body .yc-notifications-help { background: linear-gradient(160deg, rgba(30, 30, 30, 0.97), rgba(22, 22, 22, 0.98)) !important; border-color: rgba(255, 100, 34, 0.15) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 100, 34, 0.09) inset !important; } /* ─── Hero Sections ─────────────────────────────────────────────── */ html.yc-dark-mode body .yc-hero, html.yc-dark-mode body .yc-detail-hero, html.yc-dark-mode body .yc-category-detail-hero, html.yc-dark-mode body .yc-profile-hero, html.yc-dark-mode body .yc-article-hero, html.yc-dark-mode body .new-guest-hero, html.yc-dark-mode body .yc-foodies-hero { background: radial-gradient(circle at 80% 20%, rgba(255, 100, 34, 0.36), transparent 36%), radial-gradient(circle at 10% 80%, rgba(255, 122, 47, 0.22), transparent 30%), linear-gradient(135deg, #1e1e1e 0%, #161616 55%, #121212 100%) !important; border-color: rgba(255, 100, 34, 0.2) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important; } html.yc-dark-mode body .yc-hero span, html.yc-dark-mode body .yc-detail-copy span, html.yc-dark-mode body .yc-profile-hero span, html.yc-dark-mode body .new-guest-hero span, html.yc-dark-mode body .new-join-card > span, html.yc-dark-mode body .yc-category-detail-hero span, html.yc-dark-mode body .yc-foodies-hero span { color: #ff9a66 !important; } html.yc-dark-mode body .yc-hero h1, html.yc-dark-mode body .yc-detail-copy h1, html.yc-dark-mode body .yc-profile-hero h1, html.yc-dark-mode body .yc-article-hero h1, html.yc-dark-mode body .new-guest-hero h1, html.yc-dark-mode body .yc-category-detail-hero h1, html.yc-dark-mode body .yc-foodies-hero h1 { color: #f0eeff !important; } html.yc-dark-mode body .yc-hero p, html.yc-dark-mode body .yc-detail-copy p, html.yc-dark-mode body .yc-profile-hero p, html.yc-dark-mode body .yc-article-hero p, html.yc-dark-mode body .new-guest-hero p, html.yc-dark-mode body .yc-category-detail-hero p, html.yc-dark-mode body .yc-foodies-hero p { color: #9490ac !important; } html.yc-dark-mode body .yc-hero-card { background: linear-gradient(135deg, #ff6422, #ff7a2f) !important; } html.yc-dark-mode body .yc-category-meta { background: rgba(30, 30, 30, 0.95) !important; border-color: rgba(255, 100, 34, 0.2) !important; color: #c8c4de !important; } html.yc-dark-mode body .yc-category-meta strong { color: #ff8c5a !important; } html.yc-dark-mode body .yc-category-meta small { color: #9490ac !important; } /* ─── Section Headings & Text ───────────────────────────────────── */ html.yc-dark-mode body .yc-section-title h2, html.yc-dark-mode body .new-section-heading h2, html.yc-dark-mode body .new-card h2, html.yc-dark-mode body .new-card h2 a, html.yc-dark-mode body .new-card-title h4, html.yc-dark-mode body .new-author strong, html.yc-dark-mode body .new-trending-item strong, html.yc-dark-mode body .new-foodie-item strong, html.yc-dark-mode body .yc-profile-identity h1, html.yc-dark-mode body .yc-article-card h2 a, html.yc-dark-mode body .new-recipe-content h2, html.yc-dark-mode body .new-recipe-content h2 a, html.yc-dark-mode body .new-tile-body h3, html.yc-dark-mode body .new-tile-body h3 a, html.yc-dark-mode body .yc-side-panel h3, html.yc-dark-mode body .new-profile-card h3, html.yc-dark-mode body .new-join-card h3 { color: #f0eeff !important; } html.yc-dark-mode body .yc-section-title span { background: rgba(30, 30, 30, 0.95) !important; border: 1px solid rgba(255, 100, 34, 0.15) !important; color: #9490ac !important; } html.yc-dark-mode body .yc-side-panel a, html.yc-dark-mode body .new-menu-card a { color: #c8c4de !important; } html.yc-dark-mode body .yc-side-panel a:hover { background: rgba(255, 100, 34, 0.12) !important; color: #ffaa7d !important; } html.yc-dark-mode body .yc-side-panel em, html.yc-dark-mode body .yc-muted, html.yc-dark-mode body .new-author small, html.yc-dark-mode body .new-trending-item small, html.yc-dark-mode body .new-section-heading span, html.yc-dark-mode body .new-profile-card p, html.yc-dark-mode body .new-join-card p, html.yc-dark-mode body .yc-profile-mini-card p, html.yc-dark-mode body .yc-article-card p { color: #9490ac !important; } /* ─── Recipe & Post Cards ───────────────────────────────────────── */ html.yc-dark-mode body .new-recipe-content p, html.yc-dark-mode body .new-post-caption { color: #9490ac !important; } html.yc-dark-mode body .new-type-pill { background: rgba(255, 100, 34, 0.2) !important; color: #ffaa7d !important; } html.yc-dark-mode body .new-type-pill.is-post { background: rgba(255, 122, 47, 0.2) !important; color: #ffaa7d !important; } html.yc-dark-mode body .new-recipe-badges span { background: rgba(255, 100, 34, 0.14) !important; color: #a5a3b8 !important; } html.yc-dark-mode body .new-recipe-badges .veg { background: rgba(52, 211, 153, 0.15) !important; color: #6ee7b7 !important; } html.yc-dark-mode body .new-recipe-badges .non-veg { background: rgba(251, 113, 133, 0.15) !important; color: #fda4af !important; } html.yc-dark-mode body .new-recipe-media span, html.yc-dark-mode body .new-tile-media span, html.yc-dark-mode body .yc-recipe-img span { background: rgba(15, 12, 30, 0.88) !important; color: #ffe3d5 !important; } /* ─── Action Buttons ────────────────────────────────────────────── */ html.yc-dark-mode body .new-ajax-btn, html.yc-dark-mode body .new-local-action { background: rgba(30, 30, 30, 0.85) !important; border-color: rgba(255, 100, 34, 0.2) !important; color: #a5a3b8 !important; } html.yc-dark-mode body .new-ajax-btn.is-active, html.yc-dark-mode body .new-ajax-btn:hover, html.yc-dark-mode body .new-local-action:hover { background: rgba(255, 100, 34, 0.22) !important; border-color: rgba(255, 100, 34, 0.45) !important; color: #ffaa7d !important; } html.yc-dark-mode body .new-post-actions .new-local-action { background: transparent !important; color: #9490ac !important; } html.yc-dark-mode body .new-recipe-footer { border-top-color: rgba(255, 100, 34, 0.12) !important; } html.yc-dark-mode body .new-edit-link { background: rgba(30, 30, 30, 0.8) !important; border-color: rgba(255, 100, 34, 0.18) !important; color: #9490ac !important; } html.yc-dark-mode body .new-edit-link:hover { background: rgba(255, 100, 34, 0.25) !important; color: #ffaa7d !important; } /* ─── Chip Row / Filters ────────────────────────────────────────── */ html.yc-dark-mode body .new-chip-row a, html.yc-dark-mode body .new-composer-input { background: rgba(30, 30, 30, 0.95) !important; border-color: rgba(255, 100, 34, 0.2) !important; color: #a5a3b8 !important; } html.yc-dark-mode body .new-chip-row a.active, html.yc-dark-mode body .new-chip-row a:hover { background: linear-gradient(135deg, #ff6422, #ff7a2f) !important; border-color: rgba(255, 100, 34, 0.5) !important; color: #fff !important; } /* ─── Sidebar Menu Active ───────────────────────────────────────── */ html.yc-dark-mode body .new-menu-card a.active { background: linear-gradient(135deg, rgba(255, 100, 34, 0.28), rgba(255, 122, 47, 0.22)) !important; box-shadow: inset 3px 0 0 #ff7a2f !important; color: #ffaa7d !important; } html.yc-dark-mode body .new-menu-card a i { color: #ff9a66 !important; } html.yc-dark-mode body .new-menu-card a.active i, html.yc-dark-mode body .new-menu-card a:hover i { color: #ffaa7d !important; } /* ─── Join card ─────────────────────────────────────────────────── */ html.yc-dark-mode body .new-join-card { background: radial-gradient(circle at 12% 10%, rgba(255, 100, 34, 0.3), transparent 40%), linear-gradient(135deg, #161616, #1e1e1e) !important; border-color: rgba(255, 100, 34, 0.25) !important; } html.yc-dark-mode body .new-join-card h3 { color: #f0eeff !important; } html.yc-dark-mode body .new-join-card p { color: #9490ac !important; } html.yc-dark-mode body .new-profile-card img { border-color: rgba(255, 100, 34, 0.3) !important; } /* ─── Linked Recipe ─────────────────────────────────────────────── */ html.yc-dark-mode body .new-linked-recipe { background: rgba(255, 100, 34, 0.1) !important; border-color: rgba(255, 100, 34, 0.25) !important; color: #ff9a66 !important; } /* ─── Feed Loader & Empty ───────────────────────────────────────── */ html.yc-dark-mode body .new-feed-loader { color: #7c7a95 !important; } html.yc-dark-mode body .new-feed-loader span { border-color: rgba(255, 100, 34, 0.2) !important; border-top-color: #ff7a2f !important; } html.yc-dark-mode body .new-feed-empty i { color: #ff7a2f !important; } html.yc-dark-mode body .new-feed-empty h3 { color: #f0eeff !important; } html.yc-dark-mode body .new-feed-empty p { color: #9490ac !important; } /* ─── Toast ─────────────────────────────────────────────────────── */ html.yc-dark-mode body .new-toast, html.yc-dark-mode body .yc-toast { background: rgba(30, 30, 30, 0.98) !important; border: 1px solid rgba(255, 100, 34, 0.25) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55) !important; color: #e8e6f0 !important; } /* ─── Portal Recipe Cards ───────────────────────────────────────── */ html.yc-dark-mode body .yc-recipe-card h3 a, html.yc-dark-mode body .yc-card h3 a { color: #f0eeff !important; } html.yc-dark-mode body .yc-recipe-card p, html.yc-dark-mode body .yc-card p { color: #9490ac !important; } html.yc-dark-mode body .yc-author-line a { color: #c8c4de !important; } html.yc-dark-mode body .yc-author-line em { background: rgba(255, 100, 34, 0.14) !important; color: #ffaa7d !important; } /* ─── Category Cards ────────────────────────────────────────────── */ html.yc-dark-mode body .yc-category-card-info span { color: #f0eeff !important; } html.yc-dark-mode body .yc-category-card-info em { color: #ff9a66 !important; } /* ─── Article Cards ─────────────────────────────────────────────── */ html.yc-dark-mode body .yc-article-card h2 a { color: #f0eeff !important; } html.yc-dark-mode body .yc-article-card p { color: #9490ac !important; } html.yc-dark-mode body .yc-article-card small { color: #7c7a95 !important; } html.yc-dark-mode body .yc-article-placeholder { background: rgba(255, 100, 34, 0.12) !important; color: #ff7a2f !important; } /* ─── Profile Page ──────────────────────────────────────────────── */ html.yc-dark-mode body .yc-profile-banner-art { background: radial-gradient(circle at 18% 28%, rgba(255, 100, 34, 0.5), transparent 28%), radial-gradient(circle at 76% 20%, rgba(255, 122, 47, 0.3), transparent 24%), linear-gradient(110deg, #1e1e1e 0%, #161616 54%, #262626 100%) !important; } html.yc-dark-mode body .yc-profile-identity h1 { color: #f0eeff !important; } html.yc-dark-mode body .yc-profile-identity p, html.yc-dark-mode body .yc-profile-identity span { color: #9490ac !important; } html.yc-dark-mode body .yc-profile-statbar strong { background: rgba(255, 100, 34, 0.12) !important; border-color: rgba(255, 100, 34, 0.25) !important; color: #f0eeff !important; } html.yc-dark-mode body .yc-profile-statbar small { color: #9490ac !important; } html.yc-dark-mode body .yc-profile-tabs a { color: #c8c4de !important; } html.yc-dark-mode body .yc-profile-tabs a.active { background: rgba(255, 100, 34, 0.16) !important; color: #ffaa7d !important; } html.yc-dark-mode body .yc-profile-loader span { border-color: rgba(255, 100, 34, 0.2) !important; border-top-color: #ff7a2f !important; } html.yc-dark-mode body .yc-profile-empty i { color: #ff7a2f !important; } html.yc-dark-mode body .yc-profile-empty h3 { color: #f0eeff !important; } html.yc-dark-mode body .yc-profile-empty p { color: #9490ac !important; } /* ─── Recipe Detail Page ────────────────────────────────────────── */ html.yc-dark-mode body .yc-recipe-story-card, html.yc-dark-mode body .yc-method-card, html.yc-dark-mode body .yc-watch-card { background: linear-gradient(160deg, rgba(30, 30, 30, 0.97), rgba(22, 22, 22, 0.98)) !important; border-color: rgba(255, 100, 34, 0.15) !important; } html.yc-dark-mode body .yc-story-head { border-bottom: 1px solid rgba(255, 100, 34, 0.1) !important; } html.yc-dark-mode body .yc-story-type { background: rgba(255, 100, 34, 0.2) !important; color: #ffaa7d !important; } html.yc-dark-mode body .yc-story-content h1 { color: #f0eeff !important; } html.yc-dark-mode body .yc-story-content p, html.yc-dark-mode body .yc-story-kicker { color: #9490ac !important; } html.yc-dark-mode body .yc-story-pills span { background: rgba(255, 100, 34, 0.14) !important; color: #a5a3b8 !important; } html.yc-dark-mode body .yc-story-actions { border-top: 1px solid rgba(255, 100, 34, 0.1) !important; } html.yc-dark-mode body .yc-action-btn { background: rgba(30, 30, 30, 0.85) !important; border-color: rgba(255, 100, 34, 0.2) !important; color: #a5a3b8 !important; } html.yc-dark-mode body .yc-action-btn:hover, html.yc-dark-mode body .yc-action-btn.active { background: rgba(255, 100, 34, 0.22) !important; color: #ffaa7d !important; } html.yc-dark-mode body .yc-recipe-section-head h2 { color: #f0eeff !important; } html.yc-dark-mode body .yc-recipe-section-head span { background: rgba(255, 100, 34, 0.18) !important; color: #ffaa7d !important; } html.yc-dark-mode body .yc-recipe-section-head { border-bottom-color: rgba(255, 100, 34, 0.14) !important; } html.yc-dark-mode body .yc-side-creator strong { color: #f0eeff !important; } html.yc-dark-mode body .yc-side-creator span { color: #9490ac !important; } html.yc-dark-mode body .yc-side-title strong { color: #f0eeff !important; } html.yc-dark-mode body .yc-side-title a { color: #ff9a66 !important; } html.yc-dark-mode body .yc-trend-row strong { color: #f0eeff !important; } html.yc-dark-mode body .yc-trend-row small { color: #9490ac !important; } html.yc-dark-mode body .yc-mini-facts span { background: rgba(30, 30, 30, 0.95) !important; border-color: rgba(255, 100, 34, 0.15) !important; } html.yc-dark-mode body .yc-mini-facts strong { color: #f0eeff !important; } html.yc-dark-mode body .yc-mini-facts small { color: #9490ac !important; } /* ─── Ingredients Checklist (dark) ─────────────────────────────── */ html.yc-dark-mode body .yc-ingredients-checklist li.yc-ingredient-item { background: linear-gradient(160deg, rgba(30, 30, 30, 0.97), rgba(22, 22, 22, 0.98)) !important; border-color: rgba(255, 100, 34, 0.15) !important; } html.yc-dark-mode body .yc-ingredients-checklist li.yc-ingredient-item input[type="checkbox"] { accent-color: #ff7a2f !important; } html.yc-dark-mode body .yc-ingredients-checklist li.yc-ingredient-item label { color: #e8e6f0 !important; } html.yc-dark-mode body .yc-ingredients-checklist li.is-checked label { color: #7c7a95 !important; } html.yc-dark-mode body .yc-ingredients-checklist li.yc-group-header { border-bottom-color: rgba(255, 100, 34, 0.25) !important; color: #ffaa7d !important; } html.yc-dark-mode body .yc-ingredients-checklist li:not(.yc-ingredient-item):not(.yc-group-header) { background: linear-gradient(160deg, rgba(30, 30, 30, 0.97), rgba(22, 22, 22, 0.98)) !important; border-color: rgba(255, 100, 34, 0.15) !important; color: #e8e6f0 !important; } /* ─── Form Pages ────────────────────────────────────────────────── */ html.yc-dark-mode body .yc-form-card { background: linear-gradient(160deg, rgba(30, 30, 30, 0.97), rgba(22, 22, 22, 0.98)) !important; border-color: rgba(255, 100, 34, 0.15) !important; } html.yc-dark-mode body .yc-field label, html.yc-dark-mode body .yc-editor-label { color: #c8c4de !important; } html.yc-dark-mode body .yc-field input, html.yc-dark-mode body .yc-field select, html.yc-dark-mode body .yc-field textarea { background: rgba(18, 18, 18, 0.95) !important; border-color: rgba(255, 100, 34, 0.22) !important; color: #e8e6f0 !important; } html.yc-dark-mode body .yc-field input::placeholder, html.yc-dark-mode body .yc-field textarea::placeholder { color: #7c7a95 !important; } html.yc-dark-mode body .yc-field input:focus, html.yc-dark-mode body .yc-field select:focus, html.yc-dark-mode body .yc-field textarea:focus { border-color: rgba(255, 100, 34, 0.5) !important; box-shadow: 0 0 0 3px rgba(255, 100, 34, 0.12) !important; } /* ─── Crop Modal ────────────────────────────────────────────────── */ html.yc-dark-mode body .yc-crop-modal .yc-crop-dialog { background: linear-gradient(160deg, rgba(30, 30, 30, 0.99), rgba(22, 22, 22, 0.99)) !important; border-color: rgba(255, 100, 34, 0.2) !important; } html.yc-dark-mode body .yc-crop-head { border-bottom-color: rgba(255, 100, 34, 0.12) !important; color: #f0eeff !important; } html.yc-dark-mode body .yc-crop-ratios button { background: rgba(30, 30, 30, 0.9) !important; border-color: rgba(255, 100, 34, 0.2) !important; color: #c8c4de !important; } html.yc-dark-mode body .yc-crop-ratios button.active { background: rgba(255, 100, 34, 0.25) !important; border-color: rgba(255, 100, 34, 0.5) !important; color: #ffaa7d !important; } html.yc-dark-mode body .yc-crop-actions { border-top: 1px solid rgba(255, 100, 34, 0.12) !important; } /* ─── Foodies ───────────────────────────────────────────────────── */ html.yc-dark-mode body .new-foodie-item em { border-color: rgba(255, 100, 34, 0.3) !important; color: #ff9a66 !important; } html.yc-dark-mode body .new-filter-card a { color: #c8c4de !important; } html.yc-dark-mode body .new-filter-card a:hover { background: rgba(255, 100, 34, 0.12) !important; color: #ffaa7d !important; } html.yc-dark-mode body .new-card-title a { color: #ff9a66 !important; } html.yc-dark-mode body .new-composer-tools a { color: #9490ac !important; } html.yc-dark-mode body .new-composer-tools a:hover { background: rgba(255, 100, 34, 0.12) !important; color: #ffaa7d !important; } /* ─── Scrollbar (dark) ──────────────────────────────────────────── */ html.yc-dark-mode ::-webkit-scrollbar { width: 6px; } html.yc-dark-mode ::-webkit-scrollbar-track { background: rgba(15, 15, 26, 0.8); } html.yc-dark-mode ::-webkit-scrollbar-thumb { background: rgba(255, 100, 34, 0.35); border-radius: 99px; } html.yc-dark-mode ::-webkit-scrollbar-thumb:hover { background: rgba(255, 100, 34, 0.6); } /* ─── Pagination ────────────────────────────────────────────────── */ html.yc-dark-mode body .pagination .page-link { background: rgba(30, 30, 30, 0.95) !important; border-color: rgba(255, 100, 34, 0.2) !important; color: #c8c4de !important; } html.yc-dark-mode body .pagination .page-item.active .page-link { background: linear-gradient(135deg, #ff6422, #ff7a2f) !important; border-color: transparent !important; color: #fff !important; } html.yc-dark-mode body .pagination .page-link:hover { background: rgba(255, 100, 34, 0.18) !important; color: #ffaa7d !important; } /* ─── Keep orange on primary CTAs ──────────────────────────────── */ html.yc-dark-mode body .new-icon-action.is-primary, html.yc-dark-mode body .new-start-btn, html.yc-dark-mode body .new-hero-search button, html.yc-dark-mode body .new-profile-card a, html.yc-dark-mode body .new-join-card a:first-child, html.yc-dark-mode body .yc-submit, html.yc-dark-mode body .yc-cook-link, html.yc-dark-mode body .yc-profile-action { background: linear-gradient(135deg, #ff7a2f, #f15a24) !important; color: #fff !important; border: none !important; } html.yc-dark-mode body .yc-profile-action:hover, html.yc-dark-mode body .yc-profile-action:focus, html.yc-dark-mode body .yc-profile-action:active { background: linear-gradient(135deg, #f15a24, #d84513) !important; color: #fff !important; box-shadow: 0 6px 14px rgba(255, 100, 34, 0.4) !important; transform: translateY(-1.5px) !important; } html.yc-dark-mode body .new-create-link { background: linear-gradient(135deg, #ff6422, #ff7a2f) !important; color: #fff !important; } /* Recipe detail: match the feed dark purple/indigo palette */ html.yc-dark-mode body .yc-recipe-view-shell { color: #e8e6f0 !important; } html.yc-dark-mode body .yc-recipe-view-shell .yc-side-creator, html.yc-dark-mode body .yc-recipe-view-shell .yc-side-menu, html.yc-dark-mode body .yc-recipe-view-shell .yc-side-create, html.yc-dark-mode body .yc-recipe-view-shell .yc-side-list, html.yc-dark-mode body .yc-recipe-view-shell .yc-recipe-story-card, html.yc-dark-mode body .yc-recipe-view-shell .yc-method-card, html.yc-dark-mode body .yc-recipe-view-shell .yc-watch-card { background: linear-gradient(160deg, rgba(30, 30, 30, 0.97), rgba(22, 22, 22, 0.98)) !important; border-color: rgba(255, 100, 34, 0.14) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 100, 34, 0.08) inset !important; } html.yc-dark-mode body .yc-recipe-view-shell .yc-recipe-story-card { overflow: hidden !important; } html.yc-dark-mode body .yc-recipe-view-shell .yc-story-head, html.yc-dark-mode body .yc-recipe-view-shell .yc-story-actions, html.yc-dark-mode body .yc-recipe-view-shell .yc-recipe-section-head { border-color: rgba(255, 100, 34, 0.12) !important; } html.yc-dark-mode body .yc-recipe-view-shell .yc-side-creator strong, html.yc-dark-mode body .yc-recipe-view-shell .yc-side-create span, html.yc-dark-mode body .yc-recipe-view-shell .yc-side-title strong, html.yc-dark-mode body .yc-recipe-view-shell .yc-story-author strong, html.yc-dark-mode body .yc-recipe-view-shell .yc-story-content h1, html.yc-dark-mode body .yc-recipe-view-shell .yc-recipe-section-head h2, html.yc-dark-mode body .yc-recipe-view-shell .yc-rich-text h1, html.yc-dark-mode body .yc-recipe-view-shell .yc-rich-text h2, html.yc-dark-mode body .yc-recipe-view-shell .yc-rich-text h3, html.yc-dark-mode body .yc-recipe-view-shell .yc-trend-row strong, html.yc-dark-mode body .yc-recipe-view-shell .yc-mini-facts strong { color: #f0eeff !important; } html.yc-dark-mode body .yc-recipe-view-shell .yc-side-creator span, html.yc-dark-mode body .yc-recipe-view-shell .yc-side-create p, html.yc-dark-mode body .yc-recipe-view-shell .yc-story-author small, html.yc-dark-mode body .yc-recipe-view-shell .yc-story-content p, html.yc-dark-mode body .yc-recipe-view-shell .yc-rich-text, html.yc-dark-mode body .yc-recipe-view-shell .yc-rich-text p, html.yc-dark-mode body .yc-recipe-view-shell .yc-rich-text li, html.yc-dark-mode body .yc-recipe-view-shell .yc-trend-row small, html.yc-dark-mode body .yc-recipe-view-shell .yc-mini-facts small { color: #9490ac !important; } html.yc-dark-mode body .yc-recipe-view-shell .yc-side-menu a, html.yc-dark-mode body .yc-recipe-view-shell .yc-side-create a, html.yc-dark-mode body .yc-recipe-view-shell .yc-trend-row, html.yc-dark-mode body .yc-recipe-view-shell .yc-side-title a { color: #c8c4de !important; } html.yc-dark-mode body .yc-recipe-view-shell .yc-side-menu a:hover, html.yc-dark-mode body .yc-recipe-view-shell .yc-side-create a:hover, html.yc-dark-mode body .yc-recipe-view-shell .yc-trend-row:hover { background: rgba(255, 100, 34, 0.12) !important; color: #ffe3d5 !important; } html.yc-dark-mode body .yc-recipe-view-shell .yc-side-menu a:first-child { background: linear-gradient(135deg, rgba(255, 100, 34, 0.28), rgba(255, 122, 47, 0.22)) !important; box-shadow: inset 3px 0 0 #ff7a2f !important; color: #ffaa7d !important; } html.yc-dark-mode body .yc-recipe-view-shell .yc-side-menu i, html.yc-dark-mode body .yc-recipe-view-shell .yc-side-title a { color: #ff9a66 !important; } html.yc-dark-mode body .yc-recipe-view-shell .yc-story-kicker, html.yc-dark-mode body .yc-recipe-view-shell .yc-mini-facts i { color: #ffaa7d !important; } html.yc-dark-mode body .yc-recipe-view-shell .yc-side-creator img, html.yc-dark-mode body .yc-recipe-view-shell .yc-story-author img { background: #fff !important; border-color: rgba(255, 100, 34, 0.3) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28) !important; } html.yc-dark-mode body .yc-recipe-view-shell .yc-story-type, html.yc-dark-mode body .yc-recipe-view-shell .yc-recipe-section-head span { background: rgba(255, 100, 34, 0.2) !important; color: #ffaa7d !important; } html.yc-dark-mode body .yc-recipe-view-shell .yc-story-pills span, html.yc-dark-mode body .yc-recipe-view-shell .yc-story-pills a, html.yc-dark-mode body .yc-recipe-view-shell .yc-mini-facts span { background: rgba(255, 100, 34, 0.14) !important; border: 1px solid rgba(255, 100, 34, 0.18) !important; color: #a5a3b8 !important; } html.yc-dark-mode body .yc-recipe-view-shell .yc-story-pills .is-green { background: rgba(50, 190, 130, 0.15) !important; border-color: rgba(50, 190, 130, 0.2) !important; color: #8ce7bc !important; } html.yc-dark-mode body .yc-recipe-view-shell .yc-action-btn { background: rgba(30, 30, 30, 0.8) !important; border-color: rgba(255, 100, 34, 0.18) !important; color: #a5a3b8 !important; } html.yc-dark-mode body .yc-recipe-view-shell .yc-action-btn:hover, html.yc-dark-mode body .yc-recipe-view-shell .yc-action-btn.active { background: rgba(255, 100, 34, 0.2) !important; border-color: rgba(255, 100, 34, 0.4) !important; color: #ffaa7d !important; } html.yc-dark-mode body .yc-recipe-view-shell .yc-ingredients-checklist li.yc-ingredient-item, html.yc-dark-mode body .yc-recipe-view-shell .yc-ingredients-checklist li:not(.yc-ingredient-item):not(.yc-group-header) { background: linear-gradient(160deg, rgba(30, 30, 30, 0.97), rgba(22, 22, 22, 0.98)) !important; border-color: rgba(255, 100, 34, 0.15) !important; } html.yc-dark-mode body .yc-recipe-view-shell .yc-ingredients-checklist li.yc-ingredient-item label { color: #e8e6f0 !important; } /* ─── Profile mini-card dark mode overrides ─── */ html.yc-dark-mode body .yc-profile-mini-card strong { color: #f0eeff !important; } html.yc-dark-mode body .yc-profile-mini-card a { color: #c8c4de !important; } html.yc-dark-mode body .yc-profile-mini-card a i { color: #ff9a66 !important; } html.yc-dark-mode body .yc-profile-mini-card a:hover { background: rgba(255, 100, 34, 0.12) !important; color: #ffaa7d !important; } html.yc-dark-mode body .yc-profile-mini-card a:hover i { color: #ffaa7d !important; } /* ─── Method Steps (dark) ───────────────────────────────────────── */ html.yc-dark-mode body .yc-method-steps li { background: linear-gradient(160deg, rgba(30, 30, 30, 0.97), rgba(22, 22, 22, 0.98)) !important; border-color: rgba(255, 100, 34, 0.15) !important; color: #c8c4de !important; } html.yc-dark-mode body .yc-method-steps li:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; border-color: rgba(255, 100, 34, 0.3) !important; } html.yc-dark-mode body .yc-method-steps li::before { background: rgba(255, 100, 34, 0.15) !important; color: #ff8c5a !important; } /* Nested lists inside step cards (dark mode overrides) */ html.yc-dark-mode body .yc-method-steps li li { background: transparent !important; border: none !important; color: #9490ac !important; } html.yc-dark-mode body .yc-method-steps li li::before { background: transparent !important; color: inherit !important; } /* ─── Premium Sidebars & Scrollbars (dark mode) ──────────────────── */ html.yc-dark-mode body .new-left-sidebar:hover, html.yc-dark-mode body .new-right-sidebar:hover { scrollbar-color: rgba(255, 100, 34, 0.4) rgba(30, 30, 30, 0.5) !important; } html.yc-dark-mode body .new-left-sidebar:hover::-webkit-scrollbar-track, html.yc-dark-mode body .new-right-sidebar:hover::-webkit-scrollbar-track { background: rgba(30, 30, 30, 0.5) !important; border-radius: 999px; } html.yc-dark-mode body .new-left-sidebar:hover::-webkit-scrollbar-thumb, html.yc-dark-mode body .new-right-sidebar:hover::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ff7a2f 0%, #f15a24 100%) !important; border-radius: 999px; } /* Make card layouts in sidebar feel premium and dynamic */ html.yc-dark-mode body .new-card { background: linear-gradient(165deg, rgba(30, 30, 30, 0.95), rgba(16, 14, 30, 0.98)) !important; border: 1px solid rgba(255, 100, 34, 0.12) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } html.yc-dark-mode body .new-card:hover { border-color: rgba(255, 100, 34, 0.25) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important; transform: translateY(-2px); } /* Sidebar Menu Link hover micro-animations */ html.yc-dark-mode body .new-menu-card a { transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; } html.yc-dark-mode body .new-menu-card a:hover { background: rgba(255, 100, 34, 0.08) !important; color: #ffaa7d !important; padding-left: 14px !important; } /* ─── Ionic Notifications (dark mode) ───────────────────────────── */ html.yc-dark-mode body .yc-notification-row { border-top-color: rgba(255, 100, 34, 0.12) !important; } html.yc-dark-mode body .yc-notification-row:hover { background-color: rgba(255, 100, 34, 0.04) !important; } html.yc-dark-mode body .yc-notification-avatar img, html.yc-dark-mode body .yc-notification-thumbnail img { border-color: rgba(255, 100, 34, 0.18) !important; } html.yc-dark-mode body .yc-avatar-icon { background: rgba(255, 100, 34, 0.15) !important; color: #ff8c5a !important; } html.yc-dark-mode body .yc-badge-icon { border-color: #262626 !important; } html.yc-dark-mode body .yc-notification-content p { color: #c8c4de !important; } html.yc-dark-mode body .yc-notification-content p strong { color: #f0eeff !important; } html.yc-dark-mode body .yc-item-link { color: #ff8c5a !important; } html.yc-dark-mode body .yc-notification-time { color: #9490ac !important; } /* ─── Form Elements and Overrides (dark mode) ─────────────────────── */ html.yc-dark-mode body .yc-upload-modern { background: radial-gradient(circle at 12% 18%, rgba(255, 100, 34, 0.08), transparent 28%), rgba(18, 18, 18, 0.95) !important; border-color: rgba(255, 100, 34, 0.22) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important; } html.yc-dark-mode body .yc-upload-modern:hover { border-color: rgba(255, 100, 34, 0.5) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45) !important; } html.yc-dark-mode body .yc-upload-preview.is-empty { background: radial-gradient(circle at 50% 42%, rgba(255, 100, 34, 0.12), transparent 28%), rgba(18, 18, 18, 0.9) !important; border-color: rgba(255, 100, 34, 0.2) !important; color: #ff8c5a !important; } html.yc-dark-mode body .yc-upload-preview.is-empty em { background: rgba(30, 30, 30, 0.95) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4) !important; color: #ff8c5a !important; } html.yc-dark-mode body .yc-upload-preview strong { color: #ff8c5a !important; } html.yc-dark-mode body .yc-upload-preview small { color: #9490ac !important; } html.yc-dark-mode body .yc-food-toggle span { background: rgba(18, 18, 18, 0.95) !important; border-color: rgba(255, 100, 34, 0.22) !important; color: #9490ac !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 18px rgba(0, 0, 0, 0.35) !important; } html.yc-dark-mode body .yc-food-toggle span::before { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4) !important; } html.yc-dark-mode body .yc-food-toggle input:checked + span { background: rgba(18, 18, 18, 0.95) !important; border-color: rgba(255, 100, 34, 0.3) !important; } html.yc-dark-mode body .yc-food-toggle input:checked + span b:first-child { color: #9490ac !important; } html.yc-dark-mode body .yc-food-toggle span b { color: #9490ac !important; } html.yc-dark-mode body .yc-food-toggle span b:first-child { color: #fff !important; } html.yc-dark-mode body .yc-food-toggle input:checked + span b:last-child { color: #fff !important; } html.yc-dark-mode body .yc-field .select2-container--default .select2-selection--multiple, html.yc-dark-mode body .yc-field .select2-container--default .select2-selection--single { background: rgba(18, 18, 18, 0.95) !important; border-color: rgba(255, 100, 34, 0.22) !important; color: #e8e6f0 !important; } html.yc-dark-mode body .yc-field .select2-container--default .select2-selection--multiple .select2-selection__choice { background: rgba(255, 100, 34, 0.2) !important; border-color: rgba(255, 100, 34, 0.4) !important; color: #ffaa7d !important; } html.yc-dark-mode body .yc-field .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #ff9a66 !important; } html.yc-dark-mode body .yc-upload-lock { background: rgba(196, 61, 47, 0.15) !important; border-color: rgba(196, 61, 47, 0.3) !important; color: #ff9e94 !important; } html.yc-dark-mode body .yc-field-note { color: #ff9e94 !important; } html.yc-dark-mode body .yc-alert.is-danger { background: rgba(185, 61, 39, 0.15) !important; border: 1px solid rgba(185, 61, 39, 0.3) !important; color: #ff9e94 !important; } html.yc-dark-mode body .yc-alert.is-success { background: rgba(47, 125, 66, 0.15) !important; border: 1px solid rgba(47, 125, 66, 0.3) !important; color: #a3e2b2 !important; } /* TinyMCE Dark mode container styling */ html.yc-dark-mode body .yc-field .tox-tinymce { border-color: rgba(255, 100, 34, 0.22) !important; background: rgba(18, 18, 18, 0.95) !important; } html.yc-dark-mode body .yc-field .tox .tox-statusbar { background: rgba(30, 30, 30, 0.95) !important; border-top: 1px solid rgba(255, 100, 34, 0.15) !important; color: #a5a3b8 !important; } html.yc-dark-mode body .yc-field .tox .tox-statusbar a, html.yc-dark-mode body .yc-field .tox .tox-statusbar__path-item, html.yc-dark-mode body .yc-field .tox .tox-statusbar__wordcount { color: #a5a3b8 !important; } html.yc-dark-mode body .yc-field .tox .tox-toolbar, html.yc-dark-mode body .yc-field .tox .tox-toolbar__overflow, html.yc-dark-mode body .yc-field .tox .tox-toolbar__primary { background: rgba(30, 30, 30, 0.95) !important; border-bottom: 1px solid rgba(255, 100, 34, 0.15) !important; } html.yc-dark-mode body .yc-field .tox .tox-toolbar__group { border-color: rgba(255, 100, 34, 0.15) !important; } html.yc-dark-mode body .yc-field .tox .tox-tbtn, html.yc-dark-mode body .yc-field .tox .tox-split-button, html.yc-dark-mode body .yc-field .tox .tox-listboxfield .tox-listbox--select { background: rgba(18, 18, 18, 0.6) !important; color: #e8e6f0 !important; } html.yc-dark-mode body .yc-field .tox .tox-tbtn:hover, html.yc-dark-mode body .yc-field .tox .tox-split-button:hover { background: rgba(255, 100, 34, 0.15) !important; color: #fff !important; } html.yc-dark-mode body .yc-field .tox .tox-tbtn svg { fill: #c8c4de !important; } html.yc-dark-mode body .yc-field .tox .tox-tbtn:hover svg { fill: #fff !important; } html.yc-dark-mode body .yc-field .tox .tox-edit-area__iframe { background: rgba(18, 18, 18, 0.95) !important; } html.yc-dark-mode body .yc-field textarea.yc-tinymce-editor { background: rgba(18, 18, 18, 0.95) !important; color: #e8e6f0 !important; border-color: rgba(255, 100, 34, 0.22) !important; } /* Sidebar and Heading Improvements (dark mode) */ html.yc-dark-mode body .new-trending-item { color: #f0eeff !important; transition: all 0.2s ease; } html.yc-dark-mode body .new-trending-item:hover, html.yc-dark-mode body .new-foodie-item:hover { background: rgba(255, 100, 34, 0.08) !important; } html.yc-dark-mode body .new-filter-card h4 { color: #f0eeff !important; } /* Ionic-like notification lists (both light and dark mode enhancements) */ .yc-notification-row { border-top: none !important; border-bottom: 1px solid rgba(31, 51, 66, 0.06) !important; padding: 18px 12px !important; border-radius: 12px; margin-bottom: 6px; } .yc-notification-row:last-child { border-bottom: none !important; margin-bottom: 0; } /* Dark mode custom divider and item highlights */ html.yc-dark-mode body .yc-notification-row { border-bottom: 1px solid rgba(255, 100, 34, 0.12) !important; background: rgba(30, 30, 30, 0.2) !important; } html.yc-dark-mode body .yc-notification-row:hover { background: rgba(255, 100, 34, 0.08) !important; } /* ─── Post Actions Focus Outline Reset (dark mode) ───────────────── */ html.yc-dark-mode body .new-post-actions .new-local-action:focus, html.yc-dark-mode body .new-post-actions .new-local-action:active, html.yc-dark-mode body .new-post-actions .new-local-action:focus-visible { outline: 0 !important; outline: none !important; box-shadow: none !important; border: 0 !important; } /* ─── Scrollbars for Recipe Details Sidebars (dark mode) ─────────── */ html.yc-dark-mode body .yc-recipe-side { scrollbar-color: transparent transparent; } html.yc-dark-mode body .yc-recipe-side:hover { scrollbar-color: rgba(255, 100, 34, 0.5) rgba(30, 30, 30, 0.5); } html.yc-dark-mode body .yc-recipe-side::-webkit-scrollbar { width: 8px; } html.yc-dark-mode body .yc-recipe-side::-webkit-scrollbar-track { background: transparent; } html.yc-dark-mode body .yc-recipe-side::-webkit-scrollbar-thumb { background: transparent; border: 2px solid transparent; border-radius: 999px; background-clip: content-box; } html.yc-dark-mode body .yc-recipe-side:hover::-webkit-scrollbar-track { background: rgba(30, 30, 30, 0.5) !important; border-radius: 999px; } html.yc-dark-mode body .yc-recipe-side:hover::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ff7a2f 0%, #f15a24 100%) !important; border-radius: 999px; } /* ─── Loader Styling (dark mode) ────────────────────────────────── */ html.yc-dark-mode body .yc-loader { color: #ffaa7d !important; } /* ─── Login & Register Button Hover Styling (dark mode) ─────────── */ html.yc-dark-mode body .new-login-link, html.yc-dark-mode body .new-login-link:visited, html.yc-dark-mode body .new-login-link:focus, html.yc-dark-mode body .new-login-link:active { background: rgba(30, 30, 30, 0.95) !important; color: #c8c4de !important; border: 1px solid rgba(255, 100, 34, 0.2) !important; text-decoration: none !important; } html.yc-dark-mode body .new-login-link:hover { background: rgba(255, 100, 34, 0.25) !important; color: #ffffff !important; border-color: rgba(255, 100, 34, 0.4) !important; text-decoration: none !important; } html.yc-dark-mode body .new-create-link, html.yc-dark-mode body .new-create-link:visited, html.yc-dark-mode body .new-create-link:focus, html.yc-dark-mode body .new-create-link:active { background: linear-gradient(135deg, #ff6422, #ff7a2f) !important; color: #ffffff !important; text-decoration: none !important; border: none !important; } html.yc-dark-mode body .new-create-link:hover { background: linear-gradient(135deg, #ffe3d5, #ff9a66) !important; color: #ffffff !important; text-decoration: none !important; border: none !important; } /* ─── Premium Post Action Overrides (dark mode) ──────────────────── */ html.yc-dark-mode body .new-post-actions { border-top-color: rgba(255, 255, 255, 0.08) !important; } html.yc-dark-mode body .new-post-actions .new-local-action { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.03) !important; color: #9490ac !important; } /* Dark mode hover states with glowing highlights */ html.yc-dark-mode body .new-post-actions .yc-post-like-btn:hover { background: rgba(244, 63, 94, 0.15) !important; color: #fb7185 !important; box-shadow: 0 4px 16px rgba(244, 63, 94, 0.25) !important; } html.yc-dark-mode body .new-post-actions .yc-share-btn:hover { background: rgba(2, 132, 199, 0.15) !important; color: #38bdf8 !important; box-shadow: 0 4px 16px rgba(2, 132, 199, 0.25) !important; } html.yc-dark-mode body .new-post-actions .yc-post-save-btn:hover { background: rgba(217, 119, 6, 0.15) !important; color: #fbbf24 !important; box-shadow: 0 4px 16px rgba(217, 119, 6, 0.25) !important; } /* Dark mode active/is-active states */ html.yc-dark-mode body .new-post-actions .yc-post-like-btn.active, html.yc-dark-mode body .new-post-actions .yc-post-like-btn.is-active { background: rgba(244, 63, 94, 0.18) !important; color: #fb7185 !important; border-color: rgba(244, 63, 94, 0.2) !important; } html.yc-dark-mode body .new-post-actions .yc-post-save-btn.active, html.yc-dark-mode body .new-post-actions .yc-post-save-btn.is-active { background: rgba(217, 119, 6, 0.18) !important; color: #fbbf24 !important; border-color: rgba(217, 119, 6, 0.2) !important; } /* Dark Mode overrides for Mobile Bottom Navigation */ html.yc-dark-mode body .new-bottom-nav { background: rgba(22, 22, 22, 0.95) !important; border-top-color: rgba(255, 100, 34, 0.16) !important; box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.5) !important; } html.yc-dark-mode body .new-bottom-nav-item { color: #9490ac !important; } html.yc-dark-mode body .new-bottom-nav-item i { color: #7c7a95 !important; } html.yc-dark-mode body .new-bottom-nav-item:hover, html.yc-dark-mode body .new-bottom-nav-item:focus { color: #ffaa7d !important; } html.yc-dark-mode body .new-bottom-nav-item.is-active, html.yc-dark-mode body .new-bottom-nav-item.is-active i { color: #ffaa7d !important; } html.yc-dark-mode body .new-bottom-nav-avatar { border-color: #7c7a95 !important; } html.yc-dark-mode body .new-bottom-nav-item.is-active .new-bottom-nav-avatar { border-color: #ffaa7d !important; } /* Dark Mode overrides for Mobile Bottom Profile / Settings dropdown drawer */ html.yc-dark-mode body .new-mobile-profile-dropdown { background: rgba(22, 22, 22, 0.98) !important; border-color: rgba(255, 100, 34, 0.2) !important; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(16px) !important; } html.yc-dark-mode body .new-mobile-drawer-header { border-bottom-color: rgba(255, 255, 255, 0.08) !important; } html.yc-dark-mode body .new-mobile-drawer-header .new-profile-summary { background: transparent !important; border-bottom: none !important; } html.yc-dark-mode body .new-mobile-profile-dropdown .new-drawer-close-btn { background: rgba(255, 255, 255, 0.08) !important; color: #a5a3b8 !important; } html.yc-dark-mode body .new-mobile-profile-dropdown .new-drawer-close-btn i { color: #a5a3b8 !important; } html.yc-dark-mode body .new-mobile-profile-dropdown .new-drawer-close-btn:hover, html.yc-dark-mode body .new-mobile-profile-dropdown .new-drawer-close-btn:focus { background: rgba(255, 255, 255, 0.16) !important; color: #ffaa7d !important; } html.yc-dark-mode body .new-mobile-profile-dropdown .new-drawer-close-btn:hover i, html.yc-dark-mode body .new-mobile-profile-dropdown .new-drawer-close-btn:focus i { color: #ffaa7d !important; } html.yc-dark-mode body .new-mobile-profile-dropdown a, html.yc-dark-mode body .new-mobile-profile-dropdown button { color: #e8e6f0 !important; } html.yc-dark-mode body .new-mobile-profile-dropdown a:hover, html.yc-dark-mode body .new-mobile-profile-dropdown button:hover { background: rgba(255, 100, 34, 0.16) !important; color: #ffe3d5 !important; } html.yc-dark-mode body .new-mobile-profile-dropdown .new-mobile-login-btn { background: rgba(255, 100, 34, 0.15) !important; color: #ffaa7d !important; border-color: rgba(255, 100, 34, 0.3) !important; } html.yc-dark-mode body .new-mobile-profile-dropdown .new-mobile-login-btn:hover { background: rgba(255, 100, 34, 0.25) !important; color: #ffffff !important; } html.yc-dark-mode body .new-mobile-profile-dropdown .new-mobile-register-btn { background: linear-gradient(135deg, #ff6422, #ff7a2f) !important; color: #ffffff !important; } html.yc-dark-mode body .new-mobile-profile-dropdown .new-mobile-register-btn:hover { background: linear-gradient(135deg, #ffe3d5, #ff9a66) !important; color: #ffffff !important; } /* Dark Mode overrides for Mobile Floating Create Dropdown */ html.yc-dark-mode body .new-mobile-create-dropdown { background: linear-gradient(160deg, rgba(30, 30, 30, 0.99), rgba(22, 22, 22, 0.99)) !important; border-color: rgba(255, 100, 34, 0.2) !important; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5) !important; backdrop-filter: blur(16px) !important; } html.yc-dark-mode body .new-mobile-create-dropdown a { color: #e8e6f0 !important; } html.yc-dark-mode body .new-mobile-create-dropdown a:hover, html.yc-dark-mode body .new-mobile-create-dropdown a:focus { background: rgba(255, 100, 34, 0.16) !important; color: #ffe3d5 !important; } html.yc-dark-mode body .new-mobile-create-dropdown a i { color: #ffaa7d !important; } /* Dark Mode overrides for Hero Search */ html.yc-dark-mode body .yc-hero-search input { background: #2b2b2b !important; border-color: rgba(255, 100, 34, 0.3) !important; color: #ffffff !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important; } html.yc-dark-mode body .yc-hero-search input:focus { border-color: #ff7a2f !important; box-shadow: 0 4px 20px rgba(255, 122, 47, 0.25) !important; }