/* Theme Name: NewVail Theme URI: https://webtrixcode.com/themes/newvail Author: Zohaib Ali Author URI: https://webtrixcode.com Description: NewVail is a production-ready digital-goods storefront theme. It ships custom post types for products, banners, reviews and FAQs, a tabbed settings panel that makes every string, colour, image and link on the front end editable, a robust CSV product importer, AJAX filtering and search, and full SEO and translation support. There is no cart or checkout — every "Buy Now" button links out to an external checkout portal. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: newvail Tags: e-commerce, custom-logo, custom-menu, featured-images, translation-ready, theme-options, three-columns, dark-mode-support */ /* -------------------------------------------------------------------------- * 1. Design tokens * * Every value below is overridden at runtime by the inline custom-property * block that inc/theme-options.php prints into , so the admin's colour * and font choices restyle the whole site without touching this file. * ----------------------------------------------------------------------- */ :root { --nv-background: #0a0a19; --nv-foreground: #ffffff; --nv-card: #0f1024; --nv-popover: #14162c; --nv-primary: #7e3fdb; --nv-primary-rgb: 126, 63, 219; --nv-primary-glow: #c597f1; --nv-primary-glow-rgb: 197, 151, 241; --nv-primary-foreground: #ffffff; --nv-secondary: #14162c; --nv-muted: #14162c; --nv-muted-foreground: #b6b6ba; --nv-accent: #1d1737; --nv-destructive: #f22a36; --nv-success: #2ac360; --nv-success-rgb: 42, 195, 96; --nv-border: #232330; --nv-border-rgb: 35, 35, 48; /* Frosted-glass card surfaces. */ --nv-surface-opacity: 78%; --nv-surface-blur: 24px; /* Background watermark. */ --nv-watermark-size: 860px; --nv-watermark-x: -320px; --nv-watermark-y: -220px; --nv-watermark-opacity: 0.055; --nv-watermark-hover-opacity: 0.095; --nv-watermark-blur: 0px; --nv-watermark-glow: rgba(126, 63, 219, 0.24); --nv-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --nv-font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif; --nv-font-size: 16px; --nv-radius: 1rem; --nv-radius-sm: calc(var(--nv-radius) - 4px); --nv-radius-md: calc(var(--nv-radius) - 2px); --nv-radius-lg: var(--nv-radius); --nv-radius-xl: calc(var(--nv-radius) + 4px); --nv-radius-2xl: calc(var(--nv-radius) + 8px); /* Overridden from Settings → Colours & Fonts → Content width. */ --nv-container: 80rem; --nv-gutter: 1.25rem; --nv-gradient: linear-gradient(135deg, var(--nv-primary), var(--nv-primary-glow)); --nv-glow: 0 0 0 1px rgba(var(--nv-primary-rgb), 0.35), 0 12px 40px -8px rgba(var(--nv-primary-rgb), 0.55); --nv-shadow-card-hover: 0 18px 45px -12px rgba(var(--nv-primary-rgb), 0.45); --nv-ease: cubic-bezier(0.16, 1, 0.3, 1); } /* -------------------------------------------------------------------------- * 2. Reset & base * ----------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; border: 0 solid var(--nv-border); } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: var(--nv-font-size); /* * `clip`, never `hidden`. On the root element `overflow-x: hidden` forces * overflow-y to `auto`, which turns the page into a scroll container and * silently breaks every `position: sticky` element (header, shop filters, * product purchase panel). `clip` still contains stray overflow but leaves * the viewport as the scroll container, and degrades to `visible` on * browsers that do not support it. */ overflow-x: clip; } body { margin: 0; min-height: 100vh; background-color: var(--nv-background); color: var(--nv-foreground); font-family: var(--nv-font-sans); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; overflow-x: clip; } /* The grain layer that sits over the whole document in the original build. */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } body.nv-no-scroll { overflow: hidden; } h1, h2, h3, h4 { font-family: var(--nv-font-display); letter-spacing: -0.02em; margin: 0; font-weight: 700; } h5, h6 { margin: 0; font-weight: 600; } p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } img, svg, video, canvas, iframe { display: block; max-width: 100%; height: auto; } svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } button, input, select, textarea { font: inherit; color: inherit; margin: 0; } button { background: none; cursor: pointer; padding: 0; } hr { border-top-width: 1px; margin: 2rem 0; } table { border-collapse: collapse; width: 100%; } ::selection { background-color: rgba(var(--nv-primary-rgb), 0.45); } :focus-visible { outline: 2px solid var(--nv-primary-glow); outline-offset: 2px; } /* -------------------------------------------------------------------------- * 3. Layout helpers * ----------------------------------------------------------------------- */ .nv-container { width: 100%; max-width: var(--nv-container); margin-inline: auto; padding-inline: var(--nv-gutter); } .nv-container--narrow { max-width: 56rem; } .nv-container--prose { max-width: 48rem; } .nv-section { padding-block: 4rem; } .nv-section--tight { padding-block: 3.5rem; } .nv-section--wide { padding-block: 5rem; } .nv-section--bordered { border-bottom: 1px solid var(--nv-border); } .nv-section--banded { border-block: 1px solid var(--nv-border); background-color: rgba(10, 10, 15, 0.3); background-color: color-mix(in srgb, var(--nv-card) 30%, transparent); } .nv-main { display: block; } .screen-reader-text, .nv-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .screen-reader-text:focus { background-color: var(--nv-card); border-radius: var(--nv-radius-lg); clip: auto !important; color: var(--nv-foreground); display: block; font-size: 0.875rem; font-weight: 600; height: auto; left: 1.25rem; line-height: normal; padding: 0.9rem 1.4rem; text-decoration: none; top: 1.25rem; width: auto; z-index: 100000; box-shadow: var(--nv-glow); } /* Decorative surfaces reproduced from the original utility layer. */ .nv-radial-glow { position: relative; isolation: isolate; } .nv-radial-glow::before { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 70%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(var(--nv-primary-rgb), 0.28), transparent 70%); } .nv-grid-lines { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 64px 64px; } .nv-gradient-border { border: 1px solid transparent; background: linear-gradient(var(--nv-card), var(--nv-card)) padding-box, var(--nv-gradient) border-box; } .nv-glass { background-color: color-mix(in srgb, var(--nv-card) 82%, transparent); border: 1px solid var(--nv-border); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } /* -------------------------------------------------------------------------- * 4. Reveal-on-scroll * ----------------------------------------------------------------------- */ .nv-reveal { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--nv-ease), transform 600ms var(--nv-ease); } .nv-reveal.is-visible { opacity: 1; transform: none; } /* * Safety net: without JavaScript nothing would ever get .is-visible, so the * page would render blank. Show everything instead. */ @media (scripting: none) { .nv-reveal { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- * 5. Buttons * ----------------------------------------------------------------------- */ .nv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding-inline: 1.5rem; border-radius: var(--nv-radius-xl); font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; text-align: center; transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease, color 200ms ease; } .nv-btn svg { width: 1rem; height: 1rem; } .nv-btn--primary { background-image: var(--nv-gradient); color: var(--nv-primary-foreground); } .nv-btn--primary:hover { transform: scale(1.02); box-shadow: var(--nv-glow); } .nv-btn--outline { border: 1px solid var(--nv-border); color: var(--nv-foreground); } .nv-btn--outline:hover { border-color: rgba(var(--nv-primary-rgb), 0.6); color: var(--nv-primary-glow); } .nv-btn--ghost { border: 1px solid var(--nv-border); color: var(--nv-muted-foreground); background-color: color-mix(in srgb, var(--nv-card) 60%, transparent); } .nv-btn--ghost:hover { border-color: rgba(var(--nv-primary-rgb), 0.6); color: var(--nv-foreground); } .nv-btn--lg { min-height: 56px; padding-inline: 2.25rem; font-size: 1rem; line-height: 1.5rem; } .nv-btn--md { min-height: 52px; padding-inline: 1.75rem; } .nv-btn--block { width: 100%; } .nv-btn--disabled, .nv-btn[aria-disabled="true"] { background: var(--nv-muted); background-image: none; color: var(--nv-muted-foreground); cursor: not-allowed; box-shadow: none; } .nv-btn--disabled:hover, .nv-btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; } .nv-btn--buy { box-shadow: 0 8px 24px -10px var(--nv-primary); } .nv-btn:disabled { opacity: 0.7; cursor: not-allowed; } .nv-icon-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--nv-radius-xl); border: 1px solid var(--nv-border); background-color: color-mix(in srgb, var(--nv-card) 60%, transparent); color: var(--nv-muted-foreground); transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease; } .nv-icon-btn:hover { border-color: rgba(var(--nv-primary-rgb), 0.6); color: var(--nv-foreground); } .nv-icon-btn svg { width: 1.125rem; height: 1.125rem; } .nv-link-arrow { display: inline-flex; flex-shrink: 0; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; color: var(--nv-primary-glow); transition: color 200ms ease; } .nv-link-arrow:hover { color: var(--nv-foreground); } .nv-link-arrow svg { width: 1rem; height: 1rem; } .nv-inline-link { color: var(--nv-primary-glow); text-underline-offset: 4px; } .nv-inline-link:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- * 6. Form controls * ----------------------------------------------------------------------- */ .nv-field { height: 3rem; width: 100%; border-radius: var(--nv-radius-xl); border: 1px solid var(--nv-border); background-color: var(--nv-card); padding-inline: 1rem; font-size: 0.875rem; color: var(--nv-foreground); outline: none; transition: border-color 200ms ease; -webkit-appearance: none; appearance: none; } textarea.nv-field { height: auto; padding: 1rem; line-height: 1.6; resize: vertical; } .nv-field:focus { border-color: rgba(var(--nv-primary-rgb), 0.6); } .nv-field::placeholder { color: var(--nv-muted-foreground); } select.nv-field { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239999a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; cursor: pointer; } .nv-label { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; color: var(--nv-muted-foreground); } .nv-search-field { position: relative; min-width: 0; } .nv-search-field svg { pointer-events: none; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--nv-muted-foreground); } .nv-search-field .nv-field { padding-left: 2.75rem; } /* Checkbox + switch, matching the shadcn primitives used originally. */ .nv-checkbox { position: relative; display: inline-grid; place-items: center; width: 1rem; height: 1rem; flex-shrink: 0; border: 1px solid var(--nv-border); border-radius: var(--nv-radius-sm); background-color: var(--nv-card); cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color 150ms ease, border-color 150ms ease; } .nv-checkbox:checked { background-color: var(--nv-primary); border-color: var(--nv-primary); } .nv-checkbox:checked::after { content: ""; width: 0.625rem; height: 0.625rem; background-color: var(--nv-primary-foreground); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; } .nv-switch { position: relative; width: 2.25rem; height: 1.25rem; flex-shrink: 0; border-radius: 9999px; background-color: var(--nv-muted); border: 1px solid var(--nv-border); cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color 150ms ease, border-color 150ms ease; } .nv-switch::after { content: ""; position: absolute; top: 50%; left: 2px; transform: translateY(-50%); width: 0.875rem; height: 0.875rem; border-radius: 9999px; background-color: var(--nv-foreground); transition: transform 150ms ease; } .nv-switch:checked { background-color: var(--nv-primary); border-color: var(--nv-primary); } .nv-switch:checked::after { transform: translateY(-50%) translateX(0.9375rem); } .nv-range { width: 100%; height: 0.5rem; border-radius: 9999px; background-color: var(--nv-muted); -webkit-appearance: none; appearance: none; cursor: pointer; } .nv-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.125rem; height: 1.125rem; border-radius: 9999px; background-color: var(--nv-primary); border: 2px solid var(--nv-foreground); cursor: pointer; } .nv-range::-moz-range-thumb { width: 1.125rem; height: 1.125rem; border-radius: 9999px; background-color: var(--nv-primary); border: 2px solid var(--nv-foreground); cursor: pointer; } /* -------------------------------------------------------------------------- * 7. Shared surfaces * ----------------------------------------------------------------------- */ .nv-card { border: 1px solid var(--nv-border); border-radius: var(--nv-radius-2xl); background-color: var(--nv-card); } .nv-eyebrow { margin-bottom: 0.75rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--nv-primary-glow); } .nv-muted { color: var(--nv-muted-foreground); } .nv-pill { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; border: 1px solid rgba(var(--nv-primary-rgb), 0.3); background-color: rgba(var(--nv-primary-rgb), 0.1); padding: 0.375rem 0.875rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--nv-primary-glow); } .nv-pill svg { width: 0.875rem; height: 0.875rem; } /* -------------------------------------------------------------------------- * 8. WordPress core output * ----------------------------------------------------------------------- */ .nv-prose { font-size: 0.9375rem; line-height: 1.75; color: var(--nv-muted-foreground); } .nv-prose > * + * { margin-top: 1.25rem; } .nv-prose h1, .nv-prose h2, .nv-prose h3, .nv-prose h4, .nv-prose h5, .nv-prose h6 { color: var(--nv-foreground); margin-top: 2.5rem; } .nv-prose h2 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; } .nv-prose h3 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; } .nv-prose a { color: var(--nv-primary-glow); text-underline-offset: 4px; text-decoration: underline; } .nv-prose strong, .nv-prose b { color: var(--nv-foreground); font-weight: 600; } .nv-prose ul, .nv-prose ol { padding-left: 1.25rem; list-style: disc; } .nv-prose ol { list-style: decimal; } .nv-prose li + li { margin-top: 0.5rem; } .nv-prose blockquote { border-left: 3px solid var(--nv-primary); padding-left: 1.25rem; font-style: italic; } .nv-prose code { background-color: var(--nv-muted); border-radius: var(--nv-radius-sm); padding: 0.15em 0.4em; font-size: 0.875em; } .nv-prose pre { background-color: var(--nv-muted); border: 1px solid var(--nv-border); border-radius: var(--nv-radius-xl); padding: 1.25rem; overflow-x: auto; } .nv-prose img, .nv-prose figure { border-radius: var(--nv-radius-2xl); overflow: hidden; } .nv-prose table { font-size: 0.875rem; display: block; overflow-x: auto; } .nv-prose th, .nv-prose td { border: 1px solid var(--nv-border); padding: 0.625rem 0.875rem; text-align: left; } .nv-prose th { color: var(--nv-foreground); background-color: var(--nv-muted); } .alignleft { float: left; margin: 0 1.5rem 1.5rem 0; } .alignright { float: right; margin: 0 0 1.5rem 1.5rem; } .aligncenter { display: block; margin-inline: auto; } .alignwide { max-width: min(100%, 68rem); margin-inline: auto; } .alignfull { max-width: 100%; } .wp-caption { max-width: 100%; } .wp-caption-text, .wp-element-caption { margin-top: 0.5rem; font-size: 0.75rem; color: var(--nv-muted-foreground); text-align: center; } .sticky .nv-post-card__title::after { content: " ★"; color: var(--nv-primary-glow); } .bypostauthor > .nv-comment__body { border-color: rgba(var(--nv-primary-rgb), 0.45); } .gallery { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .gallery-item img { border-radius: var(--nv-radius-xl); } /* -------------------------------------------------------------------------- * 9. Animations * ----------------------------------------------------------------------- */ @keyframes nv-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes nv-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes nv-glitch { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-2px, 1px); } 40% { transform: translate(2px, -1px); } 60% { transform: translate(-1px, -2px); } 80% { transform: translate(1px, 2px); } } @keyframes nv-spin { to { transform: rotate(360deg); } } @keyframes nv-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes nv-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .nv-shimmer { background: linear-gradient( 90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.08) 100% ); background-size: 200% 100%; animation: nv-shimmer 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .nv-reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }