/* ================================================================ Picsart Blog — dark-theme redesign - Global theme tokens (apply everywhere via :root[data-theme]) - Header + theme toggle styling - Single-post page restyle, mapped to existing WP template classes ================================================================ */ :root[data-theme="dark"] { --pb-bg: #0a0a0a; --pb-bg-elev: #141414; --pb-bg-elev-2: #1c1c1c; --pb-line: rgba(255, 255, 255, 0.08); --pb-line-strong: rgba(255, 255, 255, 0.14); --pb-text: #ffffff; --pb-text-dim: rgba(255, 255, 255, 1); --pb-text-mute: rgba(255, 255, 255, 0.5); --pb-accent: #C209C1; --pb-accent-hover: #d92ed8; --pb-pill-bg: rgba(255, 255, 255, 0.06); --pb-pill-active-bg: #ffffff; --pb-pill-active-text: #0a0a0a; --pb-card-bg: #141414; --pb-card-bg-hover: #1a1a1a; --pb-header-bg: rgba(10, 10, 10, 0.85); --pb-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04); /* Card-hover purple→pink wash. Figma: 20% layer opacity over dark. */ --card-hover-gradient: linear-gradient(135deg, rgba(14, 0, 172, 0.2) 0%, rgba(255, 52, 249, 0.2) 100%); color-scheme: dark; } :root[data-theme="light"] { --pb-bg: #ffffff; --pb-bg-elev: #f6f6f7; --pb-bg-elev-2: #eceef0; --pb-line: rgba(0, 0, 0, 0.08); --pb-line-strong: rgba(0, 0, 0, 0.14); --pb-text: #0a0a0a; --pb-text-dim: rgba(10, 10, 10, 1); --pb-text-mute: rgba(10, 10, 10, 0.5); --pb-accent: #C209C1; --pb-accent-hover: #a407a3; --pb-pill-bg: rgba(0, 0, 0, 0.05); --pb-pill-active-bg: #0a0a0a; --pb-pill-active-text: #ffffff; --pb-card-bg: #ffffff; --pb-card-bg-hover: #f6f6f7; --pb-header-bg: rgba(255, 255, 255, 0.88); --pb-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06); /* Card-hover purple→pink wash. Figma: 30% layer opacity over light. */ --card-hover-gradient: linear-gradient(135deg, rgba(14, 0, 172, 0.3) 0%, rgba(255, 52, 249, 0.3) 100%); color-scheme: light; } html, body { background: var(--pb-bg); color: var(--pb-text); } /* Theme transitions only kick in AFTER the JS switcher has reconciled the cookie value (it adds `theme-ready` to ). Skipping the transition on the very first paint avoids the dark→light fade-in flash when a CDN cached an HTML page with the wrong data-theme. */ html.theme-ready, html.theme-ready body { transition: background-color 0.2s ease, color 0.2s ease; } /* Text selection — tint the highlight with the brand accent so copied spans stand out instead of the browser's default blue. */ ::selection { background-color: var(--pb-accent, #C209C1); color: #fff; } ::-moz-selection { background-color: var(--pb-accent, #C209C1); color: #fff; } /* ================================================================ HEADER + THEME TOGGLE (applies on every page) ================================================================ */ .header { background: var(--pb-header-bg); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--pb-line); } .header .navbar-wrapper { display: flex; align-items: center; gap: 12px; } .header .menu a, .header .navbar-wrapper a { color: var(--pb-text-dim); transition: color 0.15s ease; } .header .menu a:hover, .header .navbar-wrapper a:hover { color: var(--pb-text); } .header .link_new_window { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: var(--pb-accent); color: #ffffff !important; font-weight: 600; transition: background 0.15s ease; } .header .link_new_window:hover { background: var(--pb-accent-hover); color: #fff !important; } /* The toggle button itself. Higher-specificity selectors override the parent twentynineteen theme's blue button defaults (.button, button { background:#0073aa }) and its #111 hover, both of which used to leak through and make the toggle appear solid black in light mode. */ .header .theme-toggle, button.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid transparent; border-radius: 999px; background: var(--pb-pill-bg); color: var(--pb-text); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; flex-shrink: 0; } .header .theme-toggle:hover, button.theme-toggle:hover { background: var(--pb-bg-elev-2); color: var(--pb-text); } .theme-toggle:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 2px; } .theme-toggle__sun, .theme-toggle__moon { display: block; } /* In dark mode we offer to switch to light → show sun icon */ :root[data-theme="dark"] .theme-toggle__sun { display: none; } :root[data-theme="dark"] .theme-toggle__moon { display: block; } :root[data-theme="light"] .theme-toggle__sun { display: block; } :root[data-theme="light"] .theme-toggle__moon { display: none; } /* Header search icon — force pure white in dark mode. brightness(0) flattens any color in the source SVG to black, then invert(1) flips it to white, producing a clean white icon regardless of the original fill. */ :root[data-theme="dark"] .header .search_post, :root[data-theme="dark"] .header .navigation .search_post, :root[data-theme="dark"] .header .innericon img, :root[data-theme="dark"] .header .probox .promagnifier img { filter: brightness(0) invert(1); } /* ================================================================ SINGLE POST PAGE ================================================================ */ .single-post .single_content_main, .single-post .single_post_wrapper { background: var(--pb-bg); color: var(--pb-text); } /* ---------- Banner (page-banner.php on single) ---------- */ .single-post .banner_section { position: relative; background: var(--pb-bg); padding: 24px 0 48px; margin-bottom: 0; /* override main.css 64px */ overflow: hidden; /* contain the ambient glow */ } /* Kill the inherited purple → white top band from main.css and replace it with a full-width ambient wash that covers BOTH columns (title + image), matching the picsart.com hero. Applied on every page so home/archive/ single share the same banner treatment. */ .banner_section { overflow: hidden; } .banner_section::after { content: ''; position: absolute; inset: 0; width: 100%; height: 100%; background: radial-gradient(70% 90% at 85% 50%, rgba(255, 107, 200, 0.32) 0%, transparent 60%), radial-gradient(60% 80% at 15% 30%, rgba(194, 9, 193, 0.22) 0%, transparent 65%), linear-gradient(180deg, rgba(74, 10, 94, 0.35) 0%, rgba(26, 5, 48, 0.12) 100%); pointer-events: none; z-index: 0; } :root[data-theme="light"] .banner_section::after { background: radial-gradient(70% 90% at 85% 50%, rgba(255, 107, 200, 0.35) 0%, transparent 60%), radial-gradient(60% 80% at 15% 30%, rgba(194, 9, 193, 0.18) 0%, transparent 65%), linear-gradient(180deg, rgba(255, 230, 247, 0.5) 0%, rgba(255, 245, 252, 0.2) 100%); } .banner_section > .container { position: relative; z-index: 1; } /* Breadcrumbs — themed across all pages so the trail is legible against the gradient banner in both dark and light modes. Links use a muted token; the current-page text node keeps the accent so it stands out. */ #main .breadcrumbs, .breadcrumbs { color: var(--pb-accent); } #main .breadcrumbs a, .breadcrumbs a { /* Default: light-mode tone — dark gray over the gradient banner. */ color: rgba(82, 82, 82, 1); font-weight: 600; transition: color 0.15s ease; } :root[data-theme="dark"] #main .breadcrumbs a, :root[data-theme="dark"] .breadcrumbs a { color: rgba(179, 179, 179, 1); } #main .breadcrumbs a:hover, .breadcrumbs a:hover { color: var(--pb-text); } .breadcrumbs img { width: 12px; height: 12px; opacity: 0.6; filter: var(--pb-icon-invert, none); } .single-post .breadcrumbs { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 20px; width: 100%; } :root[data-theme="dark"] { --pb-icon-invert: invert(1); } .single-post .banner_section div.banner_wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* 50/50 split */ gap: 48px; align-items: center; margin-top: 0; padding-bottom: 0; border-bottom: 0; /* override main.css 1px #D4D4D4 line */ } .single-post .banner_content { min-width: 0; flex: initial; } .single-post .banner_content .banner_content_container { margin-right: 0; } .single-post .post_category_name { display: inline-block; color: var(--pb-accent); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; text-decoration: none; } .single-post .banner_title_, .single-post h1.banner_title_, .single-post #main .banner_content h1 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.18; letter-spacing: -0.02em; font-weight: 700; font-family: Gilroy, sans-serif; color: var(--pb-text); margin: 0 0 28px; } /* Banner title color — apply on every page (home, archive, single) so the heading stays legible against the new gradient in both dark and light modes. Specificity bumped via #main to beat home.scss's hardcoded black. */ #main .banner_section .banner_content h1, #main .banner_section .banner_title_, #main .banner_section .home_title { color: var(--pb-text); } #main .banner_section .home_title:hover { color: var(--pb-accent); } .single-post .author_info_wrapper { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; } .single-post .author_info { display: inline-flex; align-items: center; gap: 10px; color: var(--pb-text-dim); font-size: 14px; } .single-post .author-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid var(--pb-line); } .single-post .author_name { margin: 0; font-weight: 600; color: var(--pb-text); font-size: 14px; } .single-post .time_reading, .single-post .recently_update { color: var(--pb-text-mute); font-size: 16px; margin: 0; } .single-post .doth_start { position: relative; } /* Banner image — give it a backdrop card so transparent PNGs don't show the browser's checkerboard, and constrain proportions. */ .single-post .banner_img { position: relative; flex: initial; border-radius: 24px; overflow: hidden; max-height: 380px; } .single-post .banner_img a, .single-post .banner_img picture { display: block; width: 100%; height: 100%; border-radius: 24px; overflow: hidden; } .single-post .banner_img img, .single-post .banner_img .banner_image_ { width: 100%; height: 100%; max-height: none; border-radius: 24px; object-fit: contain; /* don't crop; keep cup intact */ object-position: center; background: transparent; z-index: 1; } /* ---------- Article layout (sticky TOC + content) ---------- */ .single-post .single_post { padding: 48px 0 80px; background: var(--pb-bg); } .single-post .post_content_wrapper { display: flex; grid-template-columns: 220px minmax(0, 1fr) 56px; gap: 48px; align-items: start; } /* ---------- Sticky TOC (desktop) ---------- */ .single-post #table_contents_wrapper { position: sticky; top: 96px; } .single-post .table_contents > p { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pb-text-mute); margin: 0 0 12px; } .single-post .table_contents .titles { display: flex; flex-direction: column; border-left: 1px solid var(--pb-line); } .single-post .table_contents .title_links_ { display: block; padding: 8px 0 8px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--pb-text-mute); font-size: 14px; line-height: 1.4; text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease; } .single-post .table_contents .title_links_:hover { color: var(--pb-text); } .single-post .table_contents .title_links_.active { color: var(--pb-text); border-left-color: var(--pb-accent); font-weight: 600; } /* Mobile TOC select — keep but theme it */ .single-post .table_contents_wrapper_mobile { display: none; margin: 0 0 24px; } .single-post .select_titles { width: 100%; background: var(--pb-bg-elev); color: var(--pb-text); border: 1px solid var(--pb-line); border-radius: 12px; padding: 12px 16px; font-family: inherit; font-size: 14px; } /* ---------- Post content (prose) ---------- */ .single-post .post-content { min-width: 0; } .single-post .entry-content { color: var(--pb-text-dim); } .single-post .entry-content p, .single-post .entry-content li, .single-post .entry-content blockquote { color: var(--pb-text-dim); font-size: 17px; line-height: 1.7; } .single-post .entry-content p { margin: 0 0 20px; } .single-post .entry-content strong, .single-post .entry-content b { color: var(--pb-text); } .single-post .entry-content a { color: var(--pb-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .single-post .entry-content a:hover { color: var(--pb-accent-hover); } .single-post .entry-content h2, .single-post .entry-content h3, .single-post .entry-content h4 { color: var(--pb-text); font-weight: 700; letter-spacing: -0.01em; margin: 48px 0 16px; scroll-margin-top: 96px; } .single-post .entry-content h2 { font-size: 28px; } .single-post .entry-content h3 { font-size: 22px; margin-top: 36px; } .single-post .entry-content h4 { font-size: 18px; margin-top: 28px; } /* Lists */ .single-post .entry-content ul, .single-post .entry-content ol { padding-left: 24px; margin: 0 0 24px; } .single-post .entry-content ul li { list-style: none; position: relative; padding-left: 6px; margin-bottom: 10px; } .single-post .entry-content ul li::before { content: ''; position: absolute; left: -16px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--pb-accent); } /* Images / figures inside content */ .single-post .entry-content img, .single-post .entry-content picture, .single-post .entry-content figure { border-radius: 12px; overflow: hidden; margin: 24px 0; max-width: 100%; height: auto; display: block; } .single-post .entry-content figcaption { margin-top: 10px; font-size: 13px; color: var(--pb-text-mute); text-align: center; } /* Blockquote */ .single-post .entry-content blockquote { border-left: 3px solid var(--pb-accent); padding: 4px 0 4px 20px; margin: 24px 0; color: var(--pb-text); font-style: italic; } /* Tables */ .single-post .entry-content table { width: 100%; border-collapse: collapse; border: 1px solid var(--pb-line); border-radius: 12px; overflow: hidden; margin: 16px 0 32px; font-size: 14px; } .single-post .entry-content th, .single-post .entry-content td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--pb-line); } .single-post .entry-content th { font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pb-text-mute); background: var(--pb-bg-elev); } .single-post .entry-content tbody tr:last-child td { border-bottom: 0; } .single-post .entry-content tbody tr:hover { background: var(--pb-bg-elev); } /* Video shortcode bg (works with functions.php post_video_inline_styles) */ .single-post .wp-video, .single-post .wp-video video, .single-post .wp-video-shortcode { background: #000; border-radius: 12px; overflow: hidden; } /* "Read more" toggle existing button */ .single-post .post-read-more-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 20px; border-radius: 999px; color: var(--pb-text); font-weight: 600; font-size: 14px; cursor: pointer; transition: background 0.15s; } /* ---------- Social share — sticky right rail ---------- */ .single-post .social_share { position: sticky; top: 96px; align-self: start; margin-top: 8px; padding: 0; border: 0; z-index: 2; } .single-post .share-buttons { display: flex; flex-direction: column; gap: 10px; align-items: center; } .single-post .share-buttons a { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--pb-pill-bg); border: 1px solid var(--pb-line); border-radius: 50%; transition: background 0.15s ease, border-color 0.15s ease; } .single-post .share-buttons a:hover { background: var(--pb-bg-elev-2); border-color: var(--pb-line-strong); } .single-post .share-buttons img { width: 34px; height: 34px; filter: var(--pb-icon-invert, none); } /* ---------- Related articles ---------- */ .single-post .related_posts_wrapper { background: var(--pb-bg); } .single-post .related_posts_wrapper .block_posts_header h3 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--pb-text); margin: 0 0 28px; } .single-post .block_posts_container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* Defensive styling for the block-items markup (varies by template). */ .single-post .block_posts_container > * { background: var(--pb-card-bg); border-radius: 12px; /* Match the same light-gray card border used across the carousel, category and tag grids; dark mode override below flips to a dark tone. */ border: 1px solid rgba(232, 232, 232, 1); overflow: hidden; transition: background 0.2s, transform 0.2s; box-shadow: var(--pb-shadow-card); } :root[data-theme="dark"] .single-post .block_posts_container > * { border-color: rgba(48, 48, 48, 1); } .single-post .block_posts_container > *:hover { background: var(--pb-card-bg-hover); transform: translateY(-2px); } .single-post .block_posts_container img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; } .single-post .block_posts_container a, .single-post .block_posts_container h2, .single-post .block_posts_container h3, .single-post .block_posts_container h4, .single-post .block_posts_container p { color: var(--pb-text); } /* ---------- Related tags ---------- */ .single-post .related_tags { padding: 0 0 64px; background: var(--pb-bg); } .single-post .related_tags .block_posts_header h3 { font-size: 28px; font-weight: 700; color: var(--pb-text); margin: 0 0 16px; } .single-post .related_tags .tags { display: flex; flex-wrap: wrap; gap: 8px; } .single-post .related_tags .tags a { display: inline-flex; padding: 6px 14px; border-radius: 999px; background: var(--pb-pill-bg); color: var(--pb-text-dim); font-size: 13px; font-weight: 500; text-decoration: none; transition: background 0.15s, color 0.15s; } .single-post .related_tags .tags a:hover { background: var(--pb-bg-elev-2); color: var(--pb-text); } /* ---------- Bottom banner (sticky CTA from footer.php) ---------- */ .single-post .bottom-banner { background: var(--pb-bg-elev); border-top: 1px solid var(--pb-line); } .single-post .bottom-banner p { color: var(--pb-text); } .single-post .bottom-banner a { background: var(--pb-accent); color: #fff; border-radius: 999px; } .single-post .bottom-banner a:hover { background: var(--pb-accent-hover); } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 1024px) { .single-post .banner_wrapper { grid-template-columns: 1fr; gap: 24px; } .single-post .post_content_wrapper { grid-template-columns: 1fr; gap: 24px; } .single-post #table_contents_wrapper { display: none; } /* hide desktop TOC */ .single-post .table_contents_wrapper_mobile { display: block; width: 100%; } /* show mobile TOC select */ .single-post .block_posts_container { grid-template-columns: repeat(2, 1fr); } /* Share rail collapses to a horizontal row below the article */ .single-post .social_share { position: static; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--pb-line); } .single-post .share-buttons { flex-direction: row; justify-content: flex-start; } } @media (max-width: 640px) { .single-post .entry-content p, .single-post .entry-content li { font-size: 16px; } .single-post .entry-content h2 { font-size: 24px; } .single-post .entry-content h3 { font-size: 20px; } .single-post .block_posts_container { grid-template-columns: 1fr; } .single-post .author_info_wrapper { flex-direction: column; align-items: flex-start; gap: 8px; } } /* ================================================================ SINGLE POST — mobile (<=768px) banner layout Re-stacks the hero into: title → category meta → image → author. `display: contents` flattens .banner_content and the title wrapper inside .banner_content_container so their children become direct flex items of .banner_wrapper, which lets us re-order with `order:`. Selectors bumped to .banner_section .banner_wrapper specificity (0,3,0) so they outweigh the desktop grid rule (0,2,2). ================================================================ */ @media (max-width: 768px) { .single-post .banner_section div.banner_wrapper{ gap: 16px; } .single-post .single_post { padding: 0 0 64px; } .single-post .banner_section { padding: 16px 0 16px; } .single-post .banner_section .banner_wrapper { display: flex !important; flex-direction: column; gap: 16px; border-bottom: 0; padding-bottom: 0; margin-top: 16px; } /* Flatten the title-block layers ONLY. .author_info_wrapper stays intact (still a flex row), otherwise its avatar / name / reading-time leak out and stack as separate items in the banner. */ .single-post .banner_section .banner_content, .single-post .banner_section .banner_content_container, .single-post .banner_section .banner_content_container > div:not(.author_info_wrapper):not(.single_banner_mobile_meta) { display: contents; } .single-post .banner_title_, .single-post h1.banner_title_, .single-post #main .banner_content h1 { order: 1; font-size: 28px; line-height: 1.2; margin-bottom: 8px; } .single-post h1.banner_title_{ margin-bottom: 0; } /* Mobile meta line — categories • reading time • level badge — sits directly under the title and above the image. Rendered server-side in page-banner.php so the categories list and level badge are real data (not a CSS rearrangement). */ .single-post .single_banner_mobile_meta { order: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 8px 0 16px; font-family: Gilroy-bold, sans-serif; font-size: 12px; line-height: 16px; letter-spacing: 0.6px; } .single-post .single_banner_mobile_meta__cats { display: inline-flex; align-items: center; gap: 6px; color: var(--pb-accent); text-transform: uppercase; } .single-post .single_banner_mobile_meta__cats a { color: inherit; text-decoration: none; } .single-post .single_banner_mobile_meta__cats .dot { font-style: normal; opacity: 0.8; } .single-post .single_banner_mobile_meta__sep { width: 1px; height: 14px; background: rgba(0, 0, 0, 0.2); } :root[data-theme="dark"] .single-post .single_banner_mobile_meta__sep { background: rgba(255, 255, 255, 0.25); } .single-post .single_banner_mobile_meta__reading { font-family: Gilroy-Medium, sans-serif; font-size: 13px; line-height: 18px; color: var(--pb-text-dim); letter-spacing: 0; text-transform: none; } .single-post .single_banner_mobile_meta__level { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; line-height: 16px; color: #000; background: #D4D4D4; text-transform: none; letter-spacing: 0; } .single-post .single_banner_mobile_meta__level--easy, .single-post .single_banner_mobile_meta__level--beginner { background: #7CE08A; } .single-post .single_banner_mobile_meta__level--intermediate { background: #F5C24B; } .single-post .single_banner_mobile_meta__level--advanced { background: #FF6B6B; color: #fff; } .single-post .single_banner_mobile_meta__level--news { background: #E0BFFF; } /* Desktop category eyebrow is rendered inside single_banner_mobile_meta on mobile — hide the original to avoid duplication. */ .single-post .post_category_name { display: none; } .single-post .banner_img { order: 3; margin: 0; aspect-ratio: inherit; max-height: 235px; width: 100%; } .single-post .author_info_wrapper { order: 4; flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; } .single-post .banner_img a, .single-post .banner_img picture { border-radius: 16px; } /* Below the image we only want avatar + name + date. Reading time is already in the meta line above the image; "Recently updated" pill is hidden per Figma. */ .single-post .author_info_wrapper .recently_update, .single-post .author_info_wrapper .time_reading { display: none; } } /* Hide the mobile-only meta line on desktop / tablet (>768px). */ @media (min-width: 769px) { .single-post .single_banner_mobile_meta { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } html { scroll-behavior: auto; } }