/** * Design version: BERRY * Scoped entirely under body.design--berry so it cleanly overrides the * theme's base (Pixel) style.css when active, and is inert otherwise. * * Dark teal/indigo abstract palette · Fredoka (display) + Nunito (body) — NO * pixel fonts · gem-strawberry · sharp DASHED edges (the inverse of Pixel's * rounded solid cards) · blueprint geometric backdrop · per-CATEGORY accent * colours. No pink / no red (project rule). * * NOTE: many Pixel rules use !important (fonts, rounded corners, buttons), so * Berry mirrors !important where it must win. */ @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap'); /* ---------- ground & type ---------- */ body.design--berry{ font-family:'Nunito',system-ui,sans-serif; color:#CFE6E2; background-color:#081213; /* Berry uses Fredoka (display) + Nunito (body) — NO pixel fonts. The theme assigns its four fonts via these presets (.has-*-font-family classes and direct var() refs), so remapping the vars flips every pixel font to Berry's two in one move: Jersey 15 + Pixelify Sans -> Fredoka; Silkscreen + DM Sans -> Nunito. */ --wp--preset--font-family--jersey-15:'Fredoka',sans-serif; --wp--preset--font-family--pixelify-sans:'Fredoka',sans-serif; --wp--preset--font-family--silkscreen:'Nunito',sans-serif; --wp--preset--font-family--dm-sans:'Nunito',sans-serif; /* page gradient lives on , BEHIND the fixed .berry-deco shape layer */ background-image: radial-gradient(90% 60% at 16% -6%, rgba(90,166,240,0.22) 0%, transparent 55%), radial-gradient(80% 55% at 92% 6%, rgba(79,227,206,0.18) 0%, transparent 55%), radial-gradient(120% 90% at 50% -10%, #0F2A2C 0%, #0B1A1C 52%, #081213 100%); background-attachment:fixed; } /* content sits ABOVE the deco (z-index 1) but is transparent, so the geometric backdrop shows through the page. */ body.design--berry .wp-site-blocks{position:relative;z-index:1;background:transparent;} /* headings → Fredoka (Pixel forces Jersey 15 !important, so mirror it). The wordmark now becomes Fredoka too via the font-preset remap above. */ body.design--berry h1, body.design--berry h2, body.design--berry h3, body.design--berry h4, body.design--berry h5, body.design--berry h6, body.design--berry .wp-block-post-title, body.design--berry .wp-block-post-title a, body.design--berry .wp-block-latest-posts__post-title, body.design--berry .wp-block-latest-posts__post-title a, body.design--berry .wp-block-query-title{ font-family:'Fredoka',sans-serif !important;font-weight:600;letter-spacing:-0.01em;color:#EAF6F3; } /* ---------- header ---------- */ body.design--berry header.wp-block-template-part{ background:rgba(9,18,19,0.72); background-image:none; -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border-bottom:1px solid rgba(79,227,206,0.18); } /* wordmark: recolour the ::before moon (teal) + ::after "cbm blog" text (light). ::after also needs Fredoka (theme sets Pixelify literal here). */ body.design--berry .wp-block-site-title a::before{background-color:#4FE3CE;} body.design--berry .wp-block-site-title a::after{color:#EAF6F3;font-family:'Fredoka',sans-serif !important;} /* ---------- FONT OVERRIDES ---------- The theme assigns pixel fonts via high-specificity LITERAL rules (not the presets), so these explicit selectors match/beat each one. Titles/wordmark/ headings -> Fredoka; meta, dates, labels, sidebar, calendar -> Nunito. */ body.design--berry .wp-block-latest-posts__list > li > a.wp-block-latest-posts__post-title{font-family:'Fredoka',sans-serif !important;} body.design--berry .pixel-sidebar__heading{font-family:'Fredoka',sans-serif !important;} body.design--berry .wp-block-latest-posts__post-date, body.design--berry .pixel-comment-count, body.design--berry ul.wp-block-categories li a, body.design--berry ul.wp-block-categories-list li a, body.design--berry .wp-block-post-date, body.design--berry .wp-block-post-date a, body.design--berry time.wp-block-post-date, body.design--berry .pixel-sidebar__item a, body.design--berry .pixel-sidebar__calendar-month, body.design--berry .pixel-sidebar__calendar-weekday, body.design--berry .pixel-sidebar__calendar-count, body.design--berry .pixel-sidebar__calendar-nav, body.design--berry .pixel-sidebar__calendar-day{font-family:'Nunito',sans-serif !important;} /* tablet inline nav links (desktop nav is hidden by the theme) */ body.design--berry .wp-block-navigation:not(.is-menu-open) .wp-block-navigation-item__content{color:#CFE6E2;} body.design--berry .wp-block-navigation:not(.is-menu-open) .wp-block-navigation-item__content:hover, body.design--berry .wp-block-navigation:not(.is-menu-open) .wp-block-navigation-item__content:focus{color:#4FE3CE;} body.design--berry .wp-block-navigation:not(.is-menu-open) .current-menu-item .wp-block-navigation-item__content{color:#4FE3CE !important;} /* ---------- mobile burger nav (Pixel renders cream boxes + light pixel overlay) ---------- */ /* open + close burger buttons → dark dashed teal (override Pixel cream boxes) */ body.design--berry .wp-block-navigation__responsive-container-open, body.design--berry .wp-block-navigation__responsive-container-close{ background:rgba(255,255,255,0.05) !important;border:1px dashed rgba(79,227,206,0.6) !important; border-radius:0 !important;box-shadow:none !important;color:#CFE6E2 !important; } body.design--berry .wp-block-navigation__responsive-container-open:hover, body.design--berry .wp-block-navigation__responsive-container-close:hover{transform:none !important;box-shadow:none !important;border-color:#4FE3CE !important;} body.design--berry .wp-block-navigation__responsive-container-open svg, body.design--berry .wp-block-navigation__responsive-container-close svg{fill:#CFE6E2 !important;} /* any submenu toggle button inside the nav */ body.design--berry header .wp-block-navigation button.wp-block-navigation-submenu__toggle{ background:transparent !important;border:0 !important;box-shadow:none !important;color:#CFE6E2 !important;border-radius:0 !important; } body.design--berry header .wp-block-navigation button.wp-block-navigation-submenu__toggle svg{fill:currentColor !important;} /* the fullscreen overlay panel → dark berry ground + teal dots (replaces light pixel). Force fixed-fullscreen + internal scroll: the nav puts has-modal-open on THIS container (not ), and core's .has-modal-open{overflow:hidden} was clipping the menu so it couldn't scroll. overflow-y:auto !important restores scrolling. */ body.design--berry .wp-block-navigation__responsive-container.is-menu-open{ position:fixed !important;top:0 !important;right:0 !important;bottom:0 !important;left:0 !important; width:100% !important;height:100dvh !important; overflow-y:auto !important;-webkit-overflow-scrolling:touch;z-index:100000 !important; background-color:#0B1A1C !important; background-image:radial-gradient(rgba(79,227,206,0.14) 1.5px, transparent 1.5px) !important; background-size:28px 28px !important; } /* CRITICAL: the header's backdrop-filter makes it the containing block for the fixed overlay, trapping it at header height. Drop the blur while the menu is open so the overlay escapes to the full viewport (Pixel header has no blur). */ body.design--berry:has(.wp-block-navigation__responsive-container.is-menu-open) header.wp-block-template-part{ -webkit-backdrop-filter:none !important;backdrop-filter:none !important; } /* "— MENU —" label */ body.design--berry .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before{color:#8FB7B0 !important;} /* item dividers (Pixel: 3px dashed eggplant) → dashed teal */ body.design--berry .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{border-bottom-color:rgba(79,227,206,0.3) !important;} /* fullscreen menu: centered column so labels, text and dividers all align tidily (Fredoka is wider than the theme's pixel font, items were right-justified). */ body.design--berry .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{max-width:440px !important;width:100% !important;margin:0 auto !important;padding:0 !important;align-items:stretch !important;justify-content:flex-start !important;} body.design--berry .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{align-items:center !important;justify-content:center !important;width:100% !important;} body.design--berry .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{text-align:center !important;width:100% !important;} /* item links → light, Fredoka, fit-to-screen size, centered (override items-justified-right → justify-content:flex-end) */ body.design--berry .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{color:#CFE6E2 !important;font-family:'Fredoka',sans-serif !important;font-size:1.5rem !important;justify-content:center !important;text-align:center !important;width:100% !important;} body.design--berry .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover, body.design--berry .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus{color:#4FE3CE !important;} /* kill the current-item box outline (it ran off the right edge); teal text marks current */ body.design--berry .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{border:0 !important;outline:0 !important;box-shadow:none !important;background:transparent !important;box-sizing:border-box !important;} /* hide the ▸ markers (they sat at the far-left edge, off-centering the row) */ body.design--berry .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before{display:none !important;} body.design--berry .wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content{color:#4FE3CE !important;} /* homepage logo card → sharp dashed berry card, glow removed */ body.design--berry .wp-block-html:has(svg.pixel-logo){ background:linear-gradient(150deg,rgba(90,166,240,0.12),rgba(79,227,206,0.06)); border:1px dashed rgba(79,227,206,0.45);border-radius:0; box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); } /* page/archive/single/blog/search content card → dark berry panel */ body.design--berry.single .wp-site-blocks > main.wp-block-group, body.design--berry.page:not(.home) .wp-site-blocks > main.wp-block-group, body.design--berry.archive .wp-site-blocks > main.wp-block-group, body.design--berry.search .wp-site-blocks > main.wp-block-group, body.design--berry.blog .wp-site-blocks > main.wp-block-group{ background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02)); border:1px dashed rgba(79,227,206,0.4);border-radius:0; box-shadow:0 12px 30px rgba(0,0,0,0.34); padding-left:clamp(1.15rem,4vw,2rem) !important;padding-right:clamp(1.15rem,4vw,2rem) !important; } /* keep alignfull content (entry-content, terms) inside the dashed border so bullets/text don't crowd or cross the edge — single posts AND query-loop cards */ body.design--berry.single .wp-site-blocks > main.wp-block-group .alignfull, body.design--berry li.wp-block-post .alignfull{margin-left:0 !important;margin-right:0 !important;max-width:100% !important;} /* single-post title centered (was left-aligned) */ body.design--berry.single .wp-block-post-title, body.design--berry.single .wp-block-post-title a{text-align:center !important;} /* ---------- switcher pills (Berry look) ---------- Must outrank the theme's global button:not(...){...!important} rule, so these use high specificity (.cbm-switcher .cbm-switcher__pills button.pill) + !important on the properties Pixel marks important. */ body.design--berry .cbm-switcher__label{color:#8FB7B0;font-family:'Fredoka',sans-serif;font-weight:500;letter-spacing:.16em;} body.design--berry .cbm-switcher .cbm-switcher__pills button.pill{ background:rgba(255,255,255,0.04) !important;color:#93BDB5 !important; border:1px dashed rgba(79,227,206,0.5) !important;border-radius:0 !important; box-shadow:none !important;padding:.55em .85em !important; font-family:'Fredoka',sans-serif !important;font-weight:500 !important;text-transform:none !important;letter-spacing:.01em !important;font-size:.78rem !important; } body.design--berry .cbm-switcher .cbm-switcher__pills button.pill:hover{transform:translateY(-1px);color:#EAF6F3 !important;border-color:rgba(79,227,206,0.8) !important;box-shadow:none !important;} body.design--berry .cbm-switcher .cbm-switcher__pills button.pill[aria-selected="true"]{ background:#4FE3CE !important;color:#04221F !important;border:1px dashed #4FE3CE !important;border-radius:0 !important;box-shadow:none !important; } body.design--berry .cbm-switcher .cbm-switcher__pills button.pill[aria-selected="true"] .pi{filter:brightness(0) invert(1);} /* ---------- homepage "Latest posts" (Latest Posts block) ---------- */ body.design--berry .wp-block-latest-posts__list{--accent:#4FE3CE;} body.design--berry .wp-block-latest-posts__list > li{ background:linear-gradient(180deg,rgba(255,255,255,0.055),rgba(255,255,255,0.02)) !important; border:1px dashed rgba(79,227,206,0.4) !important;border-radius:0 !important; box-shadow:0 12px 30px rgba(0,0,0,0.34) !important; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; } /* per-category accent (consistent colour per category, no pink/red) */ body.design--berry .wp-block-latest-posts__list > li[data-cat="health-fitness"]{--accent:#4FE3CE;} body.design--berry .wp-block-latest-posts__list > li[data-cat="random"]{--accent:#5AA6F0;} body.design--berry .wp-block-latest-posts__list > li[data-cat="food-cooking"]{--accent:#9BE25A;} body.design--berry .wp-block-latest-posts__list > li[data-cat="uncategorized"]{--accent:#E7B24C;} body.design--berry .wp-block-latest-posts__list > li:hover{transform:translateY(-3px);border-color:var(--accent) !important;box-shadow:0 14px 32px rgba(0,0,0,0.42) !important;} body.design--berry .wp-block-latest-posts__list > li > a.wp-block-latest-posts__post-title{color:#EAF6F3;} body.design--berry .wp-block-latest-posts__list > li > a.wp-block-latest-posts__post-title:hover, body.design--berry .wp-block-latest-posts__list > li > a.wp-block-latest-posts__post-title:focus{color:var(--accent);} body.design--berry .wp-block-latest-posts__list > li > a.wp-block-latest-posts__post-title::before{background-color:var(--accent);} body.design--berry .wp-block-latest-posts__post-date{color:#7FA8A0;} body.design--berry .pixel-comment-count{color:#7FA8A0;} body.design--berry .pixel-comment-count:hover, body.design--berry .pixel-comment-count:focus{color:var(--accent,#4FE3CE);} body.design--berry .wp-block-latest-posts__post-excerpt{color:#CFE6E2;} /* ---------- post list (core Query Loop — archive/category pages) ---------- */ body.design--berry .wp-block-post-template{display:flex;flex-direction:column;gap:1.5rem;} body.design--berry li.wp-block-post{ background:linear-gradient(180deg,rgba(255,255,255,0.055),rgba(255,255,255,0.02)); border:1px dashed rgba(79,227,206,0.4);border-radius:0; padding:1.6rem 1.8rem;box-shadow:0 12px 30px rgba(0,0,0,0.34); transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; } /* per-category accent — Query Loop posts carry category-{slug} via post_class() */ body.design--berry li.wp-block-post.category-health-fitness{--accent:#4FE3CE;} body.design--berry li.wp-block-post.category-random{--accent:#5AA6F0;} body.design--berry li.wp-block-post.category-food-cooking{--accent:#9BE25A;} body.design--berry li.wp-block-post.category-uncategorized{--accent:#E7B24C;} body.design--berry li.wp-block-post:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,0.42);border-color:var(--accent,#4FE3CE);} body.design--berry .wp-block-post-title a{color:#EAF6F3;} body.design--berry .wp-block-post-title a:hover{color:var(--accent,#4FE3CE);} body.design--berry .wp-block-post-excerpt{color:#CFE6E2;} body.design--berry .wp-block-read-more, body.design--berry .wp-block-post-excerpt__more-link{color:var(--accent,#4FE3CE);font-family:'Fredoka',sans-serif;font-weight:500;text-decoration:none;} /* date pill (core post-date, used on single/archive) */ body.design--berry .wp-block-post-date, body.design--berry .wp-block-post-date a, body.design--berry time.wp-block-post-date{color:#7FA8A0;} /* ---------- Categories block (pill buttons) ---------- */ body.design--berry ul.wp-block-categories li a, body.design--berry ul.wp-block-categories-list li a{ color:#CFE6E2;background:rgba(255,255,255,0.04); border:1px dashed rgba(79,227,206,0.5);border-radius:0;box-shadow:none; } body.design--berry ul.wp-block-categories li a:hover, body.design--berry ul.wp-block-categories-list li a:hover{color:#4FE3CE;transform:none;box-shadow:none;border-color:rgba(79,227,206,0.8);} /* ---------- links & buttons ---------- */ body.design--berry a{color:#4FE3CE;} body.design--berry a:hover,body.design--berry a:focus{color:#9BE25A;} body.design--berry .wp-block-button__link, body.design--berry .wp-block-search__button, body.design--berry input[type="submit"]{ color:#04221F !important;background:linear-gradient(180deg,#4FE3CE,#27A38F) !important; border:1px dashed transparent !important;border-radius:0 !important;box-shadow:none; } body.design--berry .wp-block-image img{border:1px dashed rgba(79,227,206,0.4) !important;border-radius:0 !important;box-shadow:0 10px 24px rgba(0,0,0,0.4);} /* Strava embed — base theme adds iframe[src*="strava"]{box-shadow:6px 6px 0 0 #6B4A7A!important} (eggplant offset, unscoped). Keep it for Pixel; restyle for Berry. */ body.design--berry iframe[src*="strava"], body.design--berry .strava-embed-placeholder{ border:1px dashed rgba(79,227,206,0.4) !important;border-radius:0 !important; box-shadow:0 12px 30px rgba(0,0,0,0.4) !important; } /* ---------- footer ---------- */ body.design--berry footer.wp-block-template-part{ border-top:1px solid rgba(79,227,206,0.18);background:#081213;background-image:none; } body.design--berry footer.wp-block-template-part a{color:#4FE3CE;} /* footer uses INLINE #6B4A7A (eggplant) — override the dashed top border, the tagline + copyright text, and the heart icon. !important beats inline. */ body.design--berry footer.wp-block-template-part > .wp-block-group{border-top-color:rgba(79,227,206,0.3) !important;} body.design--berry footer.wp-block-template-part p[style*="6B4A7A"]{color:#7FA8A0 !important;} body.design--berry footer.wp-block-template-part .pixel-icon--heart{background-color:#4FE3CE !important;} /* ---------- custom Pixel sidebar (Categories list + activity calendar) ---------- */ body.design--berry .pixel-sidebar{ background:linear-gradient(180deg,rgba(18,42,44,0.94),rgba(11,26,28,0.94)); border:1px dashed rgba(79,227,206,0.4);border-radius:0; box-shadow:0 14px 34px rgba(0,0,0,0.45); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } body.design--berry .pixel-sidebar__heading{color:#EAF6F3;font-family:'Fredoka',sans-serif;} body.design--berry .pixel-sidebar__heading--calendar{border-top-color:rgba(79,227,206,0.28);} body.design--berry .pixel-sidebar__item{border-bottom-color:rgba(79,227,206,0.18);} body.design--berry .pixel-sidebar__item a{color:#CFE6E2;} body.design--berry .pixel-sidebar__item a::before{color:#4FE3CE;} body.design--berry .pixel-sidebar__item a:hover, body.design--berry .pixel-sidebar__item a:focus, body.design--berry .pixel-sidebar__item.is-current a{color:#4FE3CE;} /* activity calendar */ body.design--berry .pixel-sidebar__calendar-month{color:#8FB7B0;} body.design--berry .pixel-sidebar__calendar-nav{color:#4FE3CE;} body.design--berry .pixel-sidebar__calendar-nav:hover, body.design--berry .pixel-sidebar__calendar-nav:focus{background:#4FE3CE;color:#04221F;} body.design--berry .pixel-sidebar__calendar-nav--disabled, body.design--berry .pixel-sidebar__calendar-nav--disabled:hover{color:rgba(143,183,176,0.4);background:transparent;} body.design--berry .pixel-sidebar__calendar-weekday{color:#9BE25A;} body.design--berry .pixel-sidebar__calendar-day{color:#CFE6E2;} body.design--berry .pixel-sidebar__calendar-day--has-posts{background:#4FE3CE;color:#04221F;} body.design--berry .pixel-sidebar__calendar-day--has-posts:hover, body.design--berry .pixel-sidebar__calendar-day--has-posts:focus{background:#27A38F;color:#04221F;} body.design--berry .pixel-sidebar__calendar-day--today{outline-color:#4FE3CE;} body.design--berry .pixel-sidebar__calendar-day--today.pixel-sidebar__calendar-day--has-posts{outline-color:#9BE25A;} body.design--berry .pixel-sidebar__calendar-count{background:#E7B24C;color:#04221F;border-color:rgba(79,227,206,0.5);} /* ---------- blueprint geometric backdrop ---------- */ .berry-deco{display:none;} body.design--berry .berry-deco{ display:block;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden; background-image: linear-gradient(rgba(79,227,206,0.05) 1px,transparent 1px), linear-gradient(90deg,rgba(79,227,206,0.05) 1px,transparent 1px); background-size:46px 46px,46px 46px; } body.design--berry .bshape{position:absolute;animation:cbm-bdrift 26s ease-in-out infinite;} body.design--berry .target{border:2px solid currentColor;border-radius:50%;opacity:.18;} body.design--berry .target::before{content:"";position:absolute;inset:22%;border:2px solid currentColor;border-radius:50%;} body.design--berry .diamond{border:2px solid currentColor;transform:rotate(45deg);opacity:.16;} body.design--berry .arc{border:2px solid currentColor;border-color:currentColor transparent transparent currentColor;border-radius:50% 0 0 0;opacity:.18;} body.design--berry .lines{opacity:.20;background-image:repeating-linear-gradient(45deg,currentColor 0 2px,transparent 2px 11px);} body.design--berry .hex{opacity:.16;background:currentColor;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);} body.design--berry .hex::before{content:"";position:absolute;inset:3px;background:#0B1A1C;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);} body.design--berry .chevron{opacity:.18;background-image:repeating-linear-gradient(135deg,currentColor 0 2px,transparent 2px 12px),repeating-linear-gradient(45deg,currentColor 0 2px,transparent 2px 12px);background-size:50% 100%,50% 100%;background-position:left,right;background-repeat:no-repeat;} body.design--berry .g1{width:150px;height:150px;color:#5AA6F0;top:11%;left:4%;animation-duration:30s;} body.design--berry .g2{width:84px;height:84px;color:#9BE25A;top:70%;right:7%;animation-duration:25s;animation-delay:-6s;} body.design--berry .g3{width:70px;height:70px;color:#4FE3CE;top:20%;right:9%;animation-duration:28s;animation-delay:-3s;} body.design--berry .g4{width:38px;height:38px;color:#5AA6F0;top:82%;left:40%;animation-duration:22s;animation-delay:-9s;} body.design--berry .g5{width:96px;height:96px;color:#4FE3CE;top:60%;left:9%;animation-duration:27s;animation-delay:-4s;} body.design--berry .g7{width:90px;height:60px;color:#5AA6F0;top:38%;right:6%;animation-duration:26s;animation-delay:-2s;} body.design--berry .g9{width:58px;height:64px;color:#9BE25A;top:33%;left:14%;animation-duration:29s;animation-delay:-8s;} body.design--berry .g10{width:54px;height:54px;color:#5AA6F0;top:50%;right:22%;animation-duration:21s;animation-delay:-1s;} @keyframes cbm-bdrift{0%{translate:0 0}50%{translate:0 -18px}100%{translate:0 0}} @media(prefers-reduced-motion:reduce){body.design--berry .bshape{animation:none;}}