/* ========================================================================== VAYUÉ — global dark base. Loaded BEFORE vy-chrome / vy-shop / vy-product / vy-cart / vy-page so the component stylesheets always win. Its job is only to darken the ground the theme paints: , XStore's layout wrappers, and the generic blog / widget / WooCommerce chrome on pages we do not own a template for (the posts homepage in particular). Selectors here deliberately target XStore / WordPress class names rather than bare elements, so they cannot outrank our own .vh-* / .vf-* / .vp-* / .vs-* / .vc-* / .vy-* component rules. Single-theme, not a media query: there is no light variant to fall back to, so no prefers-color-scheme blocks anywhere. ========================================================================== */ :root { --vy-gold: #BB9D50; --vy-gold-lt: #C8B57E; --vy-gold-dk: #C8B57E; --vy-on-gold: #0F0E13; --vy-bg: #0B0A0E; --vy-deep: #060609; --vy-surface: #15141A; --vy-surface-2: #1E1C24; --vy-text: #F2EEE4; --vy-muted: #A29C92; --vy-line: #2C2A33; --vy-line-strong: #494450; --vy-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --vy-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* --------------------------------------------------------------- ground */ html { background: var(--vy-bg); } body.vy-body { background: var(--vy-bg); color: var(--vy-text); -webkit-text-fill-color: var(--vy-text); } /* XStore paints white on its layout wrappers — make them carry the page. */ .vy-body .template-container, .vy-body .template-content, .vy-body .page-wrapper, .vy-body .content-page, .vy-body .site-content, .vy-body .container, .vy-body .row, .vy-body .content, .vy-body #main-content, .vy-body .et-content-wrapper { background: transparent; } /* ----------------------------------------------------- generic typography Scoped to WP/XStore class names so our components are never outranked. */ .vy-body .entry-title, .vy-body .entry-title a, .vy-body .post-title, .vy-body .post-title a, .vy-body .widget-title, .vy-body .widgettitle, .vy-body .page-title, .vy-body .archive-title { color: var(--vy-text); -webkit-text-fill-color: var(--vy-text); font-family: var(--vy-serif); font-weight: 300; } .vy-body .entry-content, .vy-body .entry-summary, .vy-body .post-excerpt, .vy-body .entry-meta, .vy-body .post-meta, .vy-body .widget, .vy-body .comment-content { color: var(--vy-muted); -webkit-text-fill-color: var(--vy-muted); } .vy-body .entry-meta a, .vy-body .post-meta a, .vy-body .widget a { color: var(--vy-gold-dk); -webkit-text-fill-color: var(--vy-gold-dk); } /* Blog cards on the posts homepage. */ .vy-body .blog-post, .vy-body article.post, .vy-body .post-item, .vy-body .hentry { background: transparent; border-color: var(--vy-line); } /* -------------------------------------------------------------- widgets */ .vy-body .widget, .vy-body .wp-block-group, .vy-body .sidebar-container { background: transparent; border-color: var(--vy-line); } .vy-body hr, .vy-body .wp-block-separator { border-color: var(--vy-line); background: var(--vy-line); } /* ---------------------------------------------------------------- forms */ .vy-body input[type="text"], .vy-body input[type="email"], .vy-body input[type="tel"], .vy-body input[type="url"], .vy-body input[type="number"], .vy-body input[type="password"], .vy-body input[type="search"], .vy-body textarea, .vy-body select { background: var(--vy-surface); border-color: var(--vy-line); color: var(--vy-text); -webkit-text-fill-color: var(--vy-text); } .vy-body input::placeholder, .vy-body textarea::placeholder { color: #6F6A62; -webkit-text-fill-color: #6F6A62; opacity: 1; } /* Native dropdown lists render with the OS palette unless told otherwise. */ .vy-body select option { background: var(--vy-surface); color: var(--vy-text); } /* ------------------------------------------------- WooCommerce messages */ .vy-body .woocommerce-message, .vy-body .woocommerce-info, .vy-body .woocommerce-error, .vy-body .wc-block-components-notice-banner { background: var(--vy-surface) !important; border-top-color: var(--vy-gold); color: var(--vy-text) !important; -webkit-text-fill-color: var(--vy-text); } .vy-body .woocommerce-message a, .vy-body .woocommerce-info a { color: var(--vy-gold-dk) !important; -webkit-text-fill-color: var(--vy-gold-dk); } /* --------------------------------------------------------- breadcrumbs */ .vy-body .woocommerce-breadcrumb, .vy-body .woocommerce-breadcrumb a, .vy-body .breadcrumbs, .vy-body .breadcrumbs a { color: var(--vy-muted); -webkit-text-fill-color: var(--vy-muted); } /* ------------------------------------------------------------ scrollbar */ .vy-body { scrollbar-color: var(--vy-line-strong) var(--vy-bg); } .vy-body ::-webkit-scrollbar { width: 10px; height: 10px; } .vy-body ::-webkit-scrollbar-track { background: var(--vy-bg); } .vy-body ::-webkit-scrollbar-thumb { background: var(--vy-line-strong); border-radius: 6px; } /* Selection + focus ring in brand gold. */ .vy-body ::selection { background: var(--vy-gold); color: var(--vy-on-gold); } .vy-body :focus-visible { outline: 2px solid var(--vy-gold); outline-offset: 2px; }