/* Theme Name: BlankSlate Theme URI: https://opencollective.com/blankslate Author: Web Guy Author URI: https://opencollective.com/blankslate#section-contributors Description: Donate: https://opencollective.com/blankslate. Learn: https://blankslate.me/. BlankSlate is the definitive WordPress boilerplate starter theme. I've carefully constructed the most clean and minimalist theme possible for designers and developers to use as a base to build websites for clients or to build completely custom themes from scratch. Clean, simple, unstyled, semi-minified, unformatted, and valid code, SEO-friendly, jQuery-enabled, no programmer comments, standardized and as white label as possible, and most importantly, the CSS is reset for cross-browser-compatability, with no intrusive visual CSS styles added whatsoever. A perfect skeleton theme. For support and suggestions, go to: https://github.com/webguyio/blankslate/issues. Thank you. Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready Version: 2026 Requires at least: 5.2 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v3 or Later License URI: https://www.gnu.org/licenses/gpl.html Text Domain: blankslate BlankSlate WordPress Theme 2011-2026 BlankSlate is distributed under the terms of the GNU GPL */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{appearance:none;border-radius:0}input[type="search"]{appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent} /* Stops Chrome/Android from auto-inflating font sizes on narrow screens ("font boosting" / text-size-adjust). This is Android-Chrome-specific behaviour, not present in iOS Safari — which is exactly why a narrow Android phone (e.g. Galaxy S8) can render every page looking "zoomed in" while a wider iPhone shows no problem at all: iOS never applies this boosting, Android applies it more aggressively the narrower the screen is. Locking it to 100% forces text to always render at the size the CSS actually specifies. */ html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; /* Scales the ENTIRE rendered page 5% larger — text, images, spacing, layout, all of it — the same way the browser's own Ctrl/Cmd-+ zoom does, rather than just bumping a base font-size (which wouldn't touch anything set in fixed px, and most of this theme is). `zoom` is a long-standing Chrome/Safari/Edge property that Firefox also picked up in 2024 (v126+), so this now behaves consistently across current browsers. */ zoom: 1.05; } .screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal} .screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000} .skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline} .skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto} .visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap} /* ========================================================= Evolution Vaping — Custom Site Styles Brand tokens per Evolution_Brand_Pack_2023 ========================================================= */ :root { --evo-purple-haze: #7c79d9; --evo-quality-sneaks: #6a2bc6; --evo-skate-n-destroy: #a92f78; --evo-yorkie: #d53586; --evo-builders-brew: #b9803d; --evo-orange-ya-glad: #dc852d; --evo-vintage-days: #daaf96; --evo-burnt-cotton: #2a2724; --evo-defeater: #191816; --evo-cloud: #fbefef; --evo-magenta: var(--evo-yorkie); --evo-body-font: 'Montserrat', Arial, sans-serif; --evo-subtitle-font: 'Barlow Condensed', Arial, sans-serif; --evo-heading-font: 'Anton', Impact, sans-serif; /* placeholder for Owners XWide Black — swap once webfont files are supplied */ --evo-graffiti-font: 'Permanent Marker', cursive; /* Matches the .evo-cart-drawer width exactly so #evo-page-shift shrinks by precisely the amount the drawer takes up — see "Cart drawer" section below. */ --evo-cart-drawer-width: min(420px, 92vw); /* A genuine, fixed white for product photography specifically — deliberately NOT one of the --evo-glass-* variables below, since those are translucent and swap to a dark tint in dark mode. Most product photos are transparent-background PNGs; sitting them on a dark glass backdrop let the dark tint show through the transparent areas, which looked like a rendering fault rather than a design choice. Every product-image container in this file uses this one variable, so product photography always sits on plain white regardless of which theme mode the visitor has picked — matching the plain white backdrop the photos were actually shot on. */ --evo-product-image-bg: #ffffff; } /* ========================================================= Evolution Vaping — Glass theme system (light/dark toggle) Every "surface" component in this file (header, cards, cart, forms, buttons) pulls its background/border/shadow/text colour from these variables instead of a hardcoded colour, so flipping the toggle (see .evo-theme-toggle in the header, and the inline script in footer.php that sets data-evo-theme on ) re-themes the whole site consistently. Dark is the default/fallback (matches the brand's existing dark header/footer mood); the switch remembers the visitor's choice in localStorage, defaulting to their OS-level preference the first time they land on the site. */ :root, [data-evo-theme='dark'] { --evo-page-bg: #0e0d0c; --evo-glass-bg: rgba(46, 43, 40, 0.55); --evo-glass-bg-strong: rgba(25, 24, 22, 0.82); --evo-glass-bg-solid: rgba(25, 24, 22, 0.96); --evo-glass-border: rgba(255, 255, 255, 0.14); --evo-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); --evo-glass-glow: 0 0 46px rgba(106, 43, 198, 0.4); --evo-glass-text: var(--evo-cloud); --evo-glass-input-bg: rgba(255, 255, 255, 0.07); --evo-glass-blur: blur(20px) saturate(180%); --evo-glass-blob-opacity: 0.55; /* Dark red reads fine on the light cards these were designed against, but goes muddy and low-contrast on dark glass — brighter in dark mode, same hue family. */ --evo-error-red: #ff6b6b; --evo-error-red-strong: #ff4d4d; } [data-evo-theme='light'] { /* Plain white rather than the previous warm/pinkish off-white (#f3efec) — the body::before "glow" blobs below (purple/magenta/orange, matching the promo header's own brand gradient) are untouched, so the glow still shows through exactly as before; only the flat base colour underneath it changed. */ --evo-page-bg: #ffffff; --evo-glass-bg: rgba(255, 255, 255, 0.55); --evo-glass-bg-strong: rgba(255, 255, 255, 0.85); --evo-glass-bg-solid: rgba(255, 255, 255, 0.96); --evo-glass-border: rgba(25, 24, 22, 0.1); --evo-glass-shadow: 0 8px 32px rgba(25, 24, 22, 0.12); --evo-glass-glow: 0 0 46px rgba(106, 43, 198, 0.22); --evo-glass-text: var(--evo-defeater); --evo-glass-input-bg: rgba(25, 24, 22, 0.045); --evo-glass-blur: blur(20px) saturate(180%); /* Was 0.3 — over the new pure-white page background (was the old off-white #f3efec) the same glow read as a much more noticeable pink/purple wash than intended. Turned down so it's only a faint trace, closer to plain white, rather than removed outright. */ --evo-glass-blob-opacity: 0.1; --evo-error-red: #a12525; --evo-error-red-strong: #720e0e; } /* --evo-quality-sneaks (the deep #6a2bc6 purple used everywhere for headings, prices, links, etc.) reads fine on the light theme's near-white cards, but is low-contrast and hard to read on the dark theme's near-black backgrounds — the same issue already fixed one-off for the cart item price (.wc-block-cart-item__prices/__total further down). Rather than hunting down every individual selector that uses it, overriding the variable itself here (dark mode only) swaps every one of those uses over to the lighter lavender-blue already used for that cart price fix (--evo-purple-haze) in one place. Light mode is untouched. */ [data-evo-theme='dark'] { --evo-quality-sneaks: var(--evo-purple-haze); } body { background: var(--evo-page-bg); transition: background-color 0.3s ease; } /* Soft blurred colour blobs fixed behind the whole page — the "glow" every frosted panel sits on top of. Lives on a pseudo-element (not on itself) so it can't turn into a containing block for the fixed cart drawer/toast (a filter/backdrop-filter/transform on an actual ancestor element would do that and break their fixed positioning — see the cart drawer notes below). Fixed + negative z-index keeps it behind all real content everywhere. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 12% 18%, rgba(106, 43, 198, 0.55), transparent 45%), radial-gradient(circle at 88% 12%, rgba(213, 53, 134, 0.45), transparent 45%), radial-gradient(circle at 50% 92%, rgba(220, 133, 45, 0.3), transparent 50%); filter: blur(70px); opacity: var(--evo-glass-blob-opacity); transition: opacity 0.3s ease; } /* Shared "pop" for every solid purple CTA button/badge on the site — layers a soft glow shadow behind the button and lifts it slightly on hover, on top of whatever background-color/shape each one already has. Purely additive (box-shadow/transform), so it can't break any existing button's layout, sizing, or click target. */ .evo-header-search__view-all, .quick-shop__card-button, .evo-contact__submit, .woocommerce-MyAccount-navigation-link.is-active a, .woocommerce-account .button, .woocommerce-account .woocommerce-Address-title a.edit, .evo-quick-order__add-btn, .evo-quick-order-summary__push, .evo-cart-drawer__body .woocommerce-mini-cart__buttons .button.checkout, .wc-block-cart__submit-button, .wc-block-cart .wc-block-components-button, .wholesale-hero__cta, .wholesale-form__submit, .evo-returns-contact__button { box-shadow: var(--evo-glass-glow); transition: background-color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease; } .evo-header-search__view-all:hover, .quick-shop__card:hover .quick-shop__card-button, .quick-shop__card:focus-visible .quick-shop__card-button, .evo-contact__submit:hover, .woocommerce-account .button:hover, .woocommerce-account .woocommerce-Address-title a.edit:hover, .evo-quick-order__add-btn:hover, .evo-quick-order-summary__push:hover, .evo-cart-drawer__body .woocommerce-mini-cart__buttons .button.checkout:hover, .wc-block-cart__submit-button:hover, .wc-block-cart .wc-block-components-button:hover, .wholesale-hero__cta:hover, .wholesale-form__submit:hover, .evo-returns-contact__button:hover { transform: translateY(-2px); } * { box-sizing: border-box; } /* ---------- Global mobile safety net ---------- Applies sitewide, on every page/template, present and future. Stops any image, video, embed, or table (including ones pasted into post/product content) from ever overflowing the viewport width on a small screen, and catches any stray element that still does. */ img, svg, video, iframe, embed, object { max-width: 100%; height: auto; } table { max-width: 100%; } @media (max-width: 640px) { table:not(.variations) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Several of our inputs/selects render below 16px (search box, shop filter dropdowns, newsletter email, quantity box). Below 16px, iOS/WebKit auto-zooms the whole page in when the field is focused — and if a link is clicked or a filter auto-submits while still zoomed, that zoomed-in scale carries over onto the next page. Forcing 16px here stops the zoom from ever triggering in the first place. */ input, select, textarea { font-size: 16px !important; } } body { font-family: var(--evo-body-font); margin: 0; /* Safety-net fallback: anything WooCommerce/WordPress renders that this theme doesn't explicitly style (login form, lost/reset password, review form, order-received page, and any future gap) inherits this instead of the browser's default black text, so it's never invisible against the dark theme's near-black page background. Anything that DOES have its own explicit color rule elsewhere simply overrides this as normal. */ color: var(--evo-glass-text); } /* ---------- Global page width: every ordinary page (posts, pages, archives, search, 404) ---------- .site-content is the wrapper header.php/footer.php add around everything except WooCommerce pages (which get their own #primary.content-area from WooCommerce) and the front page (whose promo/hero sections are deliberately full-width). Styling both here keeps every page on the site — blog, shop, cart, checkout, account, single post — at the same consistent, readable, centred width that scales with the screen, from phones up through ultra-wide monitors. Search results also render via WooCommerce's #primary.content-area wrapper (see search.php), but is_woocommerce() (and so the "woocommerce-page" body class) doesn't cover is_search(), so it's matched here via WordPress's own "search"/"search-results" body classes instead. */ /* Same 1500px + 28/18/12px formula as the header (.site-header__inner) and the homepage's own Quick Shop/Latest Products sections (.quick-shop, .latest-products) — used here so every ordinary page (posts, blog index, 404, search) and every WooCommerce page (shop, cart, checkout, account) lines up with the same edges as the homepage and header, instead of each using its own separate width formula. A flat max-width (not vw/clamp-based) also avoids the mobile-overflow bug clamp(760px, 82vw, 1300px) used to cause here: that formula had a 760px FLOOR — below ~927px viewport width, 82vw came out smaller than that floor, so clamp() fell back to 760px regardless of how narrow the actual screen was, forcing real horizontal overflow on phones. 1500px has no such floor — it's just an upper bound, so the page is always exactly as wide as the viewport (minus padding) below that. */ .site-content, .woocommerce-page #primary.content-area, .search #primary.content-area { max-width: none; margin-left: auto; margin-right: auto; padding-left: 28px; padding-right: 28px; padding-bottom: 48px; } @media (max-width: 960px) { .site-content, .woocommerce-page #primary.content-area, .search #primary.content-area { padding-left: 18px; padding-right: 18px; } } @media (max-width: 640px) { .site-content, .woocommerce-page #primary.content-area, .search #primary.content-area { padding-bottom: 32px; } } @media (max-width: 400px) { .site-content, .woocommerce-page #primary.content-area, .search #primary.content-area { padding-left: 12px; padding-right: 12px; } } /* ---------- Blog post reading column ---------- .site-content above is deliberately full-bleed (edge-to-edge with fixed gutters) for every ordinary page, since some pages (tables, wide embeds) want the extra room. A single blog post reads better as a narrower centred column though — same convention already used by page-about.php (.evo-about-mission), page-gdpr.php (.evo-gdpr-body) and page-terms- conditions.php (.evo-terms-tabs-section): a max-width + margin:0 auto on an inner wrapper, not a change to .site-content itself (which stays full-bleed for the shop/cart/checkout/account pages that also use it). Scoped to actual blog posts only (is_singular('post') in entry-content.php adds this class) — ordinary Pages using the generic template are untouched. */ .entry-content--blog { max-width: 820px; margin-left: auto; margin-right: auto; } /* ---------- Blog landing page (index.php "Posts page" + archive.php category/ tag archives) ---------- Both templates wrap their post loop in .evo-blog-grid — the same reused card grid for the main blog index and any category/tag archive, so they look consistent. Reuses the same "glass card" convention already used for the WooCommerce product grid (--evo-glass-bg/-border/-shadow/-glow) for visual consistency with the rest of the site, rather than inventing a new card style. Was previously completely unstyled — the loop just printed plain stacked
blocks with no grid, no card, no image cropping, relying entirely on the global reset. */ .evo-blog-grid { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 28px; max-width: 1200px; margin: 0 auto 40px; padding: 0 28px; } @media ( max-width: 900px ) { .evo-blog-grid { grid-template-columns: repeat( 2, 1fr ); padding: 0 18px; } } @media ( max-width: 600px ) { .evo-blog-grid { grid-template-columns: 1fr; padding: 0 12px; gap: 20px; } } .evo-blog-grid article { background: var(--evo-glass-bg); backdrop-filter: var(--evo-glass-blur); border: 1px solid var(--evo-glass-border); border-radius: 8px; box-shadow: var(--evo-glass-shadow); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; } .evo-blog-grid article:hover { transform: translateY(-4px); box-shadow: var(--evo-glass-glow); } .evo-blog-grid article header { padding: 18px 20px 0; } .evo-blog-grid .entry-title { font-family: var(--evo-body-font); font-weight: 700; font-size: 19px; line-height: 1.35; margin: 0; /* Clamps every card title to 2 lines regardless of length, so cards in the same row stay the same height whether a post title is short or long. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .evo-blog-grid .entry-title a { color: var(--evo-glass-text); text-decoration: none; } .evo-blog-grid .post-edit-link { display: inline-block; margin-top: 6px; font-family: var(--evo-body-font); font-size: 11px; color: var(--evo-glass-text); opacity: 0.6; } .evo-blog-grid .entry-meta { margin-top: 8px; font-family: var(--evo-body-font); font-size: 12px; color: var(--evo-glass-text); opacity: 0.65; } .evo-blog-grid .entry-meta a { color: inherit; text-decoration: none; } .evo-blog-grid .entry-summary { padding: 16px 20px 20px; display: flex; flex-direction: column; flex: 1; } .evo-blog-grid .entry-summary__image { display: block; line-height: 0; } .evo-blog-grid .entry-summary__image img { width: 100%; height: 200px; object-fit: cover; display: block; } .evo-blog-grid .entry-summary__excerpt { font-family: var(--evo-body-font); font-size: 14px; line-height: 1.6; color: var(--evo-glass-text); opacity: 0.85; margin-top: 4px; /* Clamps the excerpt to 3 lines for the same "equal card heights" reason as the title clamp above. */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .evo-blog-grid .entry-summary__more { display: inline-block; margin-top: 14px; font-family: var(--evo-body-font); font-weight: 600; font-size: 13px; color: var(--evo-quality-sneaks); text-decoration: none; } .evo-blog-grid .entry-summary__more:hover { text-decoration: underline; } /* Blog index/archive title block (archive.php's own
) — was plain unstyled text, same reset issue as everywhere else. */ .evo-blog-archive-header { max-width: 1200px; margin: 40px auto 32px; padding: 0 28px; text-align: center; } .evo-blog-archive-header .entry-title { font-family: var(--evo-body-font); font-weight: 700; font-size: 32px; color: var(--evo-glass-text); margin: 0; } .evo-blog-archive-header .archive-meta { margin-top: 10px; font-family: var(--evo-body-font); font-size: 14px; color: var(--evo-glass-text); opacity: 0.7; } /* Prev/newer post pagination (nav-below.php's the_posts_navigation()) — WP core's own default markup/classes, previously completely unstyled. */ .posts-navigation { max-width: 1200px; margin: 0 auto 60px; padding: 0 28px; } .posts-navigation .nav-links { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--evo-glass-border); padding-top: 20px; } .posts-navigation .nav-links a { font-family: var(--evo-body-font); font-weight: 600; font-size: 14px; color: var(--evo-glass-text); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .posts-navigation .nav-links a:hover { color: var(--evo-quality-sneaks); } /* ---------- Blog post header (badge, title, byline) ---------- Was completely unstyled and left-aligned at the page edge — the theme's global reset strips h1 back to plain inherited text, and edit_post_link()/ entry-meta.php print raw, unstyled markup by default. Matches your old Bloggle blog header layout: a small "Blogs" pill, the title, then "Written by: X | date | Time to read Y min" — centered and constrained to the same 820px column as the featured image and body text below it, so the top of the page reads as one aligned unit instead of a plain block stuck in the top-left corner. */ .entry-header--blog { max-width: 820px; margin: 32px auto 24px; text-align: center; } .entry-header--blog__badge { margin-bottom: 14px; } .entry-header--blog__badge a { display: inline-block; padding: 5px 14px; border: 1px solid var(--evo-glass-border); border-radius: 4px; background: var(--evo-glass-bg); font-family: var(--evo-body-font); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--evo-glass-text); opacity: 0.75; text-decoration: none; } .entry-header--blog .entry-title { font-family: var(--evo-body-font); font-weight: 700; font-size: 32px; line-height: 1.25; color: var(--evo-glass-text); margin: 0; } .entry-header--blog .entry-title a { color: inherit; text-decoration: none; } /* Admin-only "Edit This" (edit_post_link()) — never seen by a real customer, but tidied to match the muted treatment used elsewhere on the site rather than the raw default blue underlined link. */ .entry-header--blog .post-edit-link { display: inline-block; margin-top: 8px; font-family: var(--evo-body-font); font-size: 12px; color: var(--evo-glass-text); opacity: 0.6; } .entry-header--blog .entry-meta { margin-top: 12px; font-family: var(--evo-body-font); font-size: 14px; color: var(--evo-glass-text); opacity: 0.7; } .entry-header--blog .entry-meta a { color: inherit; text-decoration: none; } .entry-header--blog .entry-meta a:hover { text-decoration: underline; } /* ---------- Blog post featured image ---------- Rendered in entry-content.php as a sibling right before .entry-content--blog opens, so it isn't subject to that div's own text/paragraph styling — but matches its exact width and centering (max-width: 820px, margin: 0 auto) so the image lines up flush with the text column underneath it, same as the reference layout (image the same width as the title/content, not stretched edge-to-edge of the page). A fixed height with object-fit:cover means any image you set as the featured image gets cropped to fill this banner rather than distorting or leaving empty space, regardless of its original aspect ratio. */ .entry-featured-image { max-width: 820px; height: 400px; overflow: hidden; margin: 0 auto 30px; } .entry-featured-image a { display: block; width: 100%; height: 100%; } .entry-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---------- Blog post content typography ---------- Same problem as .woocommerce-Tabs-panel--description further down: the theme's global reset (style.css line 20) strips h1-h6/p/ul/ol/li/hr back to plain unstyled inherited text — margin:0, font-size:100%, list-style:none, the lot. That's invisible for Gutenberg's own Paragraph/Heading/List blocks because core's block-library CSS restyles those specific block classes independently. It is NOT invisible for raw HTML pasted into the Embed Code block (e.g. copied straight from a Bloggle export) — that's bare

/

/

/