/* ========================================================================== CelebnMusic247 Restyle v1.0.7 Implements: rebrand-design-spec-LOCKED.md (Peter, Oct 20, 2026). The FINAL LOGO TREATMENT section of the spec supersedes earlier blend notes. Hard exclusions honored throughout: no dark theme, no green identity (volt/lime/emerald appear ONLY as their assigned accents), no orange base (fire orange ONLY on the Concert Calendar strip item), no hot-pink masthead, no slate. ========================================================================== */ /* -------------------------------------------------------------------------- SPEC: Brand tokens. Wordmark colors are the FINAL LOGO TREATMENT: "Celebn" #14161C, "Music" #B8860B, "247" #FF1493, tagline grey #8A8199. Toned-down black: graphite-plum #37334A (strip/footer/Boards), deeper plum #262238 (247 Report band). Brand red #E01A22 = JUST IN. Lime #A6E22E = system spark ONLY (slider FEATURED chip, 247 Boards header, seams). Desk colors per the flavor system in the spec. -------------------------------------------------------------------------- */ :root { --c247-ink: #14161c; --c247-gold: #b8860b; --c247-pink247: #ff1493; --c247-tagline: #8a8199; --c247-plum: #37334a; --c247-plum-deep: #262238; --c247-brand-red: #e01a22; --c247-studio-pink: #e11584; --c247-lime: #a6e22e; --c247-surface: #ffffff; --c247-surface-soft: #fdfcfa; --c247-music: #a31621; --c247-celebrity: #ff2e93; --c247-movies: #7b2fbe; --c247-reality: #c6f232; --c247-sports: #1668d2; --c247-health: #0e9f6e; --c247-books: #2dd4bf; --c247-concert: #ff5e1a; --c247-desk: var(--c247-brand-red); /* neutral default; body class overrides */ } /* -------------------------------------------------------------------------- SPEC: Base look — "light, white reading surface, ONE-COLUMN story stream with a photo on every post. No dark flip, no two-column grid." This plugin never restructures the stream; it only guarantees the light surface. -------------------------------------------------------------------------- */ body { background: var(--c247-surface-soft); color: var(--c247-ink); } .site-content, .content-area { background: var(--c247-surface); } /* -------------------------------------------------------------------------- SPEC: Logo size (Peter, Oct 20 ~10:38 PM) — "The header logo renders BIG — masthead-dominant, spanning most of the header width... On phones it scales down proportionally so it never eats the screen." Explicit logo-size rule: the plugin also ships the wordmark on a larger canvas (see logo-kit). Selectors cover WordPress's custom-logo markup plus BlogHash/Blogdash branding wrappers. -------------------------------------------------------------------------- */ .site-branding, .bloghash-branding, .header-logo { max-width: 1180px; margin-left: auto; margin-right: auto; text-align: center; } .custom-logo-link { display: block; line-height: 0; } img.custom-logo, .site-branding img.custom-logo, .bloghash-logo img, .site-logo img { width: min(880px, 94%) !important; max-width: 880px !important; height: auto !important; max-height: none !important; margin: 10px auto 6px; } .site-title, .site-description { text-align: center; } @media (max-width: 640px) { img.custom-logo, .site-branding img.custom-logo, .bloghash-logo img, .site-logo img { width: 94% !important; margin: 8px auto 4px; } } /* -------------------------------------------------------------------------- SPEC: Category strip — graphite-plum bar (#37334A replaces pure black), NINE items in ONE ROW that NEVER wraps; on phone widths the strip stays one row as a sideways-swipe row. Gold star separators (#B8860B). HOME first in WHITE. Desk colors per item; BOOKS teal #2DD4BF; CONCERT CALENDAR fire orange #FF5E1A (the only orange). Applies to: the primary menu restyled by the plugin (.c247-strip-menu) and the [c247_strip] shortcode (.c247-strip). -------------------------------------------------------------------------- */ .c247-strip-menu, .c247-strip { background: linear-gradient(180deg, #443f5c 0%, var(--c247-plum) 55%, #2e2a40 100%); border-radius: 999px; box-shadow: 0 2px 8px rgba(38, 34, 56, .35), inset 0 1px 0 rgba(255, 255, 255, .25); padding: 4px 10px; } .c247-strip-menu, .c247-strip .c247-strip-list { display: flex !important; flex-wrap: nowrap !important; align-items: center; justify-content: center; gap: 0; list-style: none; margin: 0; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .c247-strip-menu::-webkit-scrollbar, .c247-strip .c247-strip-list::-webkit-scrollbar { display: none; } .c247-strip-menu > li, .c247-strip .c247-strip-list > li { flex: 0 0 auto; position: relative; margin: 0; } /* Gold star separator between items (never before the first). */ .c247-strip-menu > li + li::before, .c247-strip .c247-strip-list > li + li::before { content: "\2605"; color: var(--c247-gold); font-size: 10px; margin: 0 7px; vertical-align: middle; } .c247-strip-menu > li > a, .c247-strip .c247-strip-list > li > a { display: inline-block; font-weight: 800; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; padding: 7px 2px; } /* Per-item spec colors. */ .c247-mi-home > a { color: #ffffff !important; } .c247-mi-celebrity > a { color: var(--c247-celebrity) !important; } .c247-mi-movies > a { color: #b07fe8 !important; } /* spec purple #7B2FBE lightened one step so it reads on the plum bar; full #7B2FBE is used on white surfaces below */ .c247-mi-music > a { color: #ff8f98 !important; } /* spec dark red #A31621 lightened for the dark bar; full #A31621 on white surfaces below */ .c247-mi-sports > a { color: #7db4f5 !important; } /* spec blue #1668D2 lightened for the dark bar; full #1668D2 on white below */ .c247-mi-reality > a { color: var(--c247-reality) !important; } .c247-mi-health > a { color: #4ade9e !important; } /* spec emerald #0E9F6E lightened for the dark bar; full #0E9F6E on white below */ .c247-mi-books > a { color: var(--c247-books) !important; } .c247-mi-concert > a { color: var(--c247-concert) !important; } .c247-strip-menu > li > a:hover, .c247-strip .c247-strip-list > li > a:hover { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 640px) { .c247-strip-menu > li > a, .c247-strip .c247-strip-list > li > a { font-size: 12.5px; } .c247-strip-menu, .c247-strip { border-radius: 0; justify-content: flex-start; } } /* -------------------------------------------------------------------------- SPEC: 247 REPORT BAND — permanent promo band ABOVE the homepage slider: #262238 band, studio pink #E11584 accents, "JUST IN — The 247 Report" wordmark, play button + WATCH pill, "New episode every morning", linking to YouTube @Celebnmusic247. Rendered by the [report247] shortcode. -------------------------------------------------------------------------- */ .c247-report-band { display: flex; align-items: center; gap: 16px; background: linear-gradient(90deg, var(--c247-plum-deep) 0%, #322b4d 70%, var(--c247-plum-deep) 100%); border-top: 2px solid var(--c247-lime); /* lime as seam spark, per spec */ border-bottom: 2px solid var(--c247-studio-pink); border-radius: 14px; padding: 12px 18px; margin: 14px auto; max-width: 1180px; box-shadow: 0 3px 10px rgba(38, 34, 56, .35); } .c247-report-play { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--c247-studio-pink); color: #fff !important; font-size: 18px; line-height: 46px; text-align: center; text-decoration: none; box-shadow: inset 0 2px 3px rgba(255, 255, 255, .45), 0 2px 6px rgba(0, 0, 0, .35); } .c247-report-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; flex: 1 1 auto; } .c247-report-kicker { background: var(--c247-brand-red); color: #fff; font-weight: 900; font-size: 12px; letter-spacing: .12em; padding: 3px 8px; border-radius: 6px; } .c247-report-title { color: #fff; font-weight: 900; font-size: 22px; letter-spacing: .02em; } .c247-report-sub { color: #cfc9de; font-size: 13.5px; width: 100%; } .c247-report-watch { flex: 0 0 auto; background: var(--c247-studio-pink); color: #fff !important; font-weight: 900; letter-spacing: .1em; font-size: 13px; text-decoration: none; padding: 9px 20px; border-radius: 999px; box-shadow: inset 0 2px 3px rgba(255, 255, 255, .45), 0 2px 6px rgba(0, 0, 0, .3); } .c247-report-watch:hover, .c247-report-play:hover { filter: brightness(1.12); } @media (max-width: 640px) { .c247-report-title { font-size: 18px; } .c247-report-band { gap: 10px; padding: 10px 12px; } } /* -------------------------------------------------------------------------- SPEC: JUST IN block — "solid RED block bug (white text), Mock A treatment — jumps first." Brand red #E01A22. [c247_justin] shortcode or any element with .c247-justin. -------------------------------------------------------------------------- */ .c247-justin { display: inline-block; background: var(--c247-brand-red); color: #fff !important; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: 5px 14px; border-radius: 8px; box-shadow: inset 0 2px 3px rgba(255, 255, 255, .35), 0 2px 5px rgba(224, 26, 34, .35); } /* -------------------------------------------------------------------------- SPEC: Candy gloss finish throughout — pill-shaped category tags, rounded corners, glossy gradients. Post cards keep the one-column stream; they just get the finish. -------------------------------------------------------------------------- */ article.post, .bloghash-post, .entry { border-radius: 16px; } .cat-links a, .entry-categories a, .post-categories a, a[rel="category tag"] { display: inline-block; border-radius: 999px; padding: 3px 12px; font-weight: 700; font-size: 12px; letter-spacing: .03em; color: #fff !important; text-decoration: none; background: linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 55%), var(--c247-desk); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); } .tags-links a, .tagcloud a { border-radius: 999px; } button, input[type="submit"], .wp-block-button__link { border-radius: 999px; } /* -------------------------------------------------------------------------- SPEC: Slider — featured SLIDER of 5 top stories at the top; lime #A6E22E FEATURED chip is the system spark here. Selectors cover the theme slider + common featured-label markup; the chip styling itself is available as .c247-featured-chip for any label element. -------------------------------------------------------------------------- */ .c247-featured-chip, .featured-chip, .slider-featured-label { display: inline-block; background: linear-gradient(180deg, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, 0) 55%), var(--c247-lime); color: var(--c247-ink) !important; font-weight: 900; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; box-shadow: 0 2px 5px rgba(0, 0, 0, .25); } /* -------------------------------------------------------------------------- SPEC: Right rail — ADS ONLY (300x250 + sticky 300x600) plus the 247 Boards house box. The plugin styles the rail; the ad units themselves come from the theme's slots/AdSense. Sticky support for a 300x600. 247 Boards header takes the lime spark; Boards surfaces graphite- plum #37334A (toned-down black rule). -------------------------------------------------------------------------- */ #secondary .widget, .sidebar .widget, .bloghash-sidebar .widget { border-radius: 14px; overflow: hidden; } #secondary .widget:last-child, .sidebar .widget:last-child, .bloghash-sidebar .widget:last-child { position: sticky; top: 16px; } .c247-boards-box { background: var(--c247-surface); border: 1px solid #e7e3f0; border-radius: 14px; overflow: hidden; } .c247-boards-box .c247-boards-header, .c247-boards-header { background: var(--c247-plum); color: var(--c247-lime); font-weight: 900; letter-spacing: .06em; padding: 10px 14px; } /* -------------------------------------------------------------------------- SPEC: Per-category pages — "category pages AND article pages theme to their desk: the masthead/logo stays constant; the category band, slider frame, pills, byline color, headline accents, links and footer seam all take the desk color. Homepage mixes all six flavors." The plugin's body_class filter sets body.c247-desk--; each rule below only re-points the --c247-desk variable. Full-strength desk colors are used on white surfaces (pills in the gloss section above read var(--c247-desk)). -------------------------------------------------------------------------- */ body.c247-desk--music { --c247-desk: var(--c247-music); } body.c247-desk--celebrity { --c247-desk: var(--c247-celebrity); } body.c247-desk--movies { --c247-desk: var(--c247-movies); } body.c247-desk--reality { --c247-desk: var(--c247-reality); } body.c247-desk--sports { --c247-desk: var(--c247-sports); } body.c247-desk--health { --c247-desk: var(--c247-health); } body.c247-desk--books { --c247-desk: var(--c247-books); } /* Category band / archive header takes the desk color. */ body.c247-desk .page-header, body.c247-desk .archive-header, body.c247-desk .category-header { border-top: 4px solid var(--c247-desk); border-bottom: 2px solid var(--c247-desk); } /* Slider frame takes the desk color on desk pages. */ body.c247-desk .bloghash-slider, body.c247-desk .featured-slider, body.c247-desk .slider-frame { border: 3px solid var(--c247-desk); border-radius: 16px; } /* Byline color takes the desk color. */ body.c247-desk .byline, body.c247-desk .byline a, body.c247-desk .entry-meta .author a, body.c247-desk .posted-by a { color: var(--c247-desk); } /* Headline accents on desk pages. */ body.c247-desk .entry-title a:hover, body.c247-desk .post-title a:hover { color: var(--c247-desk); } body.c247-desk .entry-title { text-decoration-color: var(--c247-desk); } /* In-content links take the desk color on desk pages. */ body.c247-desk .entry-content a { color: var(--c247-desk); } /* Pill colors by the POST's own category too (post_class always carries category slugs) — this is what lets the homepage "mix all six flavors" card by card. */ .post.category-music-news .cat-links a, .post.category-music-news a[rel="category tag"] { background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%), var(--c247-music); } .post.category-celebrity-news .cat-links a, .post.category-celebrity-news a[rel="category tag"] { background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%), var(--c247-celebrity); } .post.category-movie-news .cat-links a, .post.category-movie-news a[rel="category tag"] { background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%), var(--c247-movies); } .post.category-reality-tv-news .cat-links a, .post.category-reality-tv-news a[rel="category tag"] { background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%), var(--c247-reality); color: var(--c247-ink) !important; } .post.category-sports-news .cat-links a, .post.category-sports-news a[rel="category tag"] { background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%), var(--c247-sports); } .post.category-health-news .cat-links a, .post.category-health-news a[rel="category tag"] { background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%), var(--c247-health); } .post.category-books .cat-links a, .post.category-books a[rel="category tag"] { background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%), var(--c247-books); color: var(--c247-ink) !important; } /* -------------------------------------------------------------------------- SPEC: Footer — graphite-plum #37334A (toned-down black rule); the footer seam takes the desk color on desk pages (lime seam on the homepage default via the brand seam below). -------------------------------------------------------------------------- */ .site-footer, .bloghash-footer, footer.site-footer { background: var(--c247-plum); color: #e9e5f5; border-top: 4px solid var(--c247-desk); } .site-footer a, .bloghash-footer a { color: #ffffff; } body:not(.c247-desk) .site-footer, body:not(.c247-desk) .bloghash-footer { border-top: 4px solid var(--c247-lime); /* lime seam = system spark */ } /* ========================================================================== v1.0.1 — FIELD FIXES (Peter's report, Oct 23, 2026) 1) PINK BACKGROUND: the site's Customizer carries a leftover custom background color (#e070b5 pink) that WordPress prints as body.custom-background and that outranks the base rule above. The design background is the warm near-white surface — enforce it on the exact selector WordPress uses, image included. 2) PHONE + TABLET FORMATTING: the v1.0.0 sheet only carried a 640px phone breakpoint. Below: overflow guards, media that can never exceed the screen, a tablet band (641–1024px), and phone rules for the Report band so nothing crushes or scrolls sideways. ========================================================================== */ body.custom-background { background-color: var(--c247-surface-soft) !important; background-image: none !important; } /* Nothing may push the page wider than the screen. `clip` (not hidden) is used so the sticky right-rail ad keeps working. */ html, body { overflow-x: clip; } img, video, embed, object { max-width: 100%; } iframe { max-width: 100%; } .entry-content { overflow-wrap: break-word; } .entry-content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ------------------------------ TABLET ------------------------------ */ @media (min-width: 641px) and (max-width: 1024px) { /* Strip: keep ONE row, swipe sideways instead of crushing. */ .c247-strip-menu, .c247-strip .c247-strip-list { justify-content: flex-start; overflow-x: auto; } .c247-strip-menu > li > a, .c247-strip .c247-strip-list > li > a { font-size: 12.5px; padding: 7px 1px; } .c247-strip-menu > li + li::before, .c247-strip .c247-strip-list > li + li::before { margin: 0 5px; } /* Wordmark: full masthead presence, never wider than the screen. */ img.custom-logo, .site-branding img.custom-logo, .bloghash-logo img, .site-logo img { width: min(620px, 92%) !important; } /* Report band: a little tighter so it sits cleanly at this width. */ .c247-report-band { padding: 11px 14px; margin: 12px 10px; gap: 12px; } .c247-report-title { font-size: 19px; } /* Story cards breathe at tablet width. */ article.post, .bloghash-post, .entry { margin-left: 6px; margin-right: 6px; } } /* ------------------------------- PHONE ------------------------------ */ @media (max-width: 640px) { /* Report band stacks: play + text on the first row, WATCH pill drops to its own full-width row instead of crushing the text. */ .c247-report-band { flex-wrap: wrap; margin: 10px 8px; border-radius: 12px; } .c247-report-play { width: 38px; height: 38px; line-height: 38px; font-size: 15px; } .c247-report-text { flex: 1 1 200px; } .c247-report-title { font-size: 17px; } .c247-report-sub { font-size: 12.5px; } .c247-report-watch { flex: 1 1 100%; text-align: center; padding: 9px 12px; } /* Story cards use the full phone width. */ article.post, .bloghash-post, .entry { border-radius: 12px; margin-left: 0; margin-right: 0; } /* Category pills stay tappable but compact. */ .cat-links a, .entry-categories a, .post-categories a, a[rel="category tag"] { font-size: 11px; padding: 3px 10px; } /* The sticky 300x600 rail ad must not stick on phones — the rail stacks below the stories there and a sticky unit traps scroll. */ #secondary .widget:last-child, .sidebar .widget:last-child, .bloghash-sidebar .widget:last-child { position: static; } } /* ========================================================================== v1.0.2 — PER-POST COLOR LINE (Peter, Oct 23, 2026): "a line of color for each post so we see more of each individual colors." Every story card in the stream wears a 4px line across its top in its own desk's color (full-strength desk colors, the same ones the pills use), so the mixed homepage stream reads as a rotation of colors. Keyed to the category classes WordPress puts on each post, exactly like the pill rules above. SoCal Concerts posts take the concert fire orange. ========================================================================== */ article.post.category-celebrity-news, .bloghash-post.category-celebrity-news { border-top: 4px solid var(--c247-celebrity); } article.post.category-music-news, .bloghash-post.category-music-news { border-top: 4px solid var(--c247-music); } article.post.category-movie-news, .bloghash-post.category-movie-news { border-top: 4px solid var(--c247-movies); } article.post.category-reality-tv-news, .bloghash-post.category-reality-tv-news { border-top: 4px solid var(--c247-reality); } article.post.category-sports-news, .bloghash-post.category-sports-news { border-top: 4px solid var(--c247-sports); } article.post.category-health-news, .bloghash-post.category-health-news { border-top: 4px solid var(--c247-health); } article.post.category-books, .bloghash-post.category-books { border-top: 4px solid var(--c247-books); } article.post.category-socal-concerts, .bloghash-post.category-socal-concerts { border-top: 4px solid var(--c247-concert); } /* ========================================================================== v1.0.3 — PHONE LOGO SIZE (Peter's iPhone screenshot, Oct 23, 2026): "the top of the site is too big." On phones the wordmark rendered wider than the screen and center-cropped (only "ebnMusic" visible): the v1.0.x rules sized the logo in % of the theme's header container, and that container can be wider than the viewport. Size the logo in VIEWPORT units instead, so it can never exceed the screen, and cap the branding wrapper at the screen width. Desktop is untouched (the big masthead Peter approved stays exactly as it was). ========================================================================== */ @media (max-width: 1024px) { .site-branding, .bloghash-branding, .header-logo { max-width: 100%; } img.custom-logo, .site-branding img.custom-logo, .bloghash-logo img, .site-logo img { width: min(600px, 90vw) !important; max-width: 90vw !important; } } @media (max-width: 640px) { img.custom-logo, .site-branding img.custom-logo, .bloghash-logo img, .site-logo img { width: 88vw !important; max-width: 88vw !important; margin: 6px auto 2px; } } /* ========================================================================== v1.0.5 — STRIP BAR + BRIGHT CATEGORY LABELS (Peter, Oct 23, 2026). Two defects visible in Peter's own screenshots: (1) THE STRIP BAR NEVER RENDERED. The theme's primary menu list is