/* ============================================================================ PICK VIZ — SHOWCASE SITE CSS KIT Global design tokens, dark/light utility, button system, and WooCommerce harmonization for the Vault Theme + PickViz Plugin marketing site. HOW TO USE ---------- 1. Elementor → Site Settings → Custom CSS (or a child-theme style.css), OR enqueue this file directly. 2. Put data-theme="dark" (default) on . A toggle flips it to "light". 3. Use the utility classes: .pv-btn.pv-btn--primary , .vault-dark-bg , etc. BRAND ORANGE ------------ Canonical brand orange = #e85500 (matches --pp-accent / --vt-accent in the plugin + theme). To use the brighter "sports-action" hue, change ONE line: --pv-orange: #FF6600; Everything else (buttons, links, WooCommerce, focus states) re-derives. ============================================================================ */ /* --------------------------------------------------------------------------- 1. DESIGN TOKENS (brand-level, theme-agnostic) --------------------------------------------------------------------------- */ :root { /* — Brand — */ --pv-orange: #e85500; /* ← single source of truth. Swap to #FF6600 for brighter */ --pv-orange-hover: #ff6a1f; --pv-orange-press: #cc4a00; --pv-orange-soft: rgba(232, 85, 0, .12); --pv-orange-glow: rgba(232, 85, 0, .35); --pv-gradient: linear-gradient(135deg, #ff7a2e 0%, #e85500 55%, #cc4000 100%); /* — Result semantics (shared with plugin) — */ --pv-win: #16a34a; --pv-loss: #dc2626; --pv-push: #d97706; /* — Type scale (fluid) — */ --pv-h1: clamp(2.4rem, 5vw + 1rem, 4.25rem); --pv-h2: clamp(1.8rem, 3vw + 1rem, 2.75rem); --pv-h3: clamp(1.25rem, 1.5vw + .75rem, 1.6rem); --pv-lead: clamp(1.05rem, .6vw + .95rem, 1.25rem); /* — Spacing rhythm — */ --pv-space-section: clamp(3.5rem, 8vw, 7rem); --pv-radius: 14px; --pv-radius-sm: 8px; --pv-radius-pill: 999px; /* — Motion — */ --pv-ease: cubic-bezier(.4, 0, .2, 1); --pv-ease-spring: cubic-bezier(.34, 1.56, .64, 1); --pv-dur: .22s; /* — Elevation — */ --pv-shadow-1: 0 1px 3px rgba(0,0,0,.12), 0 6px 18px rgba(0,0,0,.10); --pv-shadow-2: 0 12px 40px rgba(0,0,0,.22); --pv-shadow-orange: 0 10px 30px -8px var(--pv-orange-glow); } /* --------------------------------------------------------------------------- 2. THEME MODES (dark = default, light = toggle) Every surface/text color is a semantic token so components never hardcode. --------------------------------------------------------------------------- */ :root, [data-theme="dark"] { color-scheme: dark; --pv-bg: #0b0b0d; --pv-bg-elev: #141418; --pv-bg-card: #17171c; --pv-bg-input: #1c1c22; --pv-text: #f5f6f7; --pv-text-muted: #a1a1aa; --pv-text-faint: #6b6b74; --pv-border: #26262e; --pv-border-strong: #34343e; --pv-grid: rgba(255,255,255,.035); --pv-hero-glow: radial-gradient(60% 55% at 70% 20%, rgba(232,85,0,.18), transparent 70%); } [data-theme="light"] { color-scheme: light; --pv-bg: #ffffff; --pv-bg-elev: #f7f7f9; --pv-bg-card: #ffffff; --pv-bg-input: #f4f4f6; --pv-text: #111318; --pv-text-muted: #55565f; --pv-text-faint: #8a8b95; --pv-border: #e6e6ea; --pv-border-strong: #d3d3da; --pv-grid: rgba(0,0,0,.04); --pv-hero-glow: radial-gradient(60% 55% at 70% 20%, rgba(232,85,0,.10), transparent 70%); } /* Respect OS preference on first paint if no explicit toggle set */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --pv-bg:#ffffff; --pv-bg-elev:#f7f7f9; --pv-bg-card:#ffffff; --pv-bg-input:#f4f4f6; --pv-text:#111318; --pv-text-muted:#55565f; --pv-text-faint:#8a8b95; --pv-border:#e6e6ea; --pv-border-strong:#d3d3da; } } /* --------------------------------------------------------------------------- 3. BACKGROUND / SURFACE UTILITIES --------------------------------------------------------------------------- */ .vault-dark-bg { background: var(--pv-bg); color: var(--pv-text); } .vault-light-bg { background: var(--pv-bg-elev); color: var(--pv-text); } .pv-card { background: var(--pv-bg-card); border: 1px solid var(--pv-border); border-radius: var(--pv-radius); box-shadow: var(--pv-shadow-1); transition: transform var(--pv-dur) var(--pv-ease), box-shadow var(--pv-dur) var(--pv-ease), border-color var(--pv-dur) var(--pv-ease); } .pv-card:hover { transform: translateY(-4px); border-color: var(--pv-orange); box-shadow: var(--pv-shadow-2); } .pv-section { padding-block: var(--pv-space-section); } .pv-hero-glow { position: relative; } .pv-hero-glow::before { content: ""; position: absolute; inset: 0; background: var(--pv-hero-glow); pointer-events: none; z-index: 0; } /* --------------------------------------------------------------------------- 4. BUTTON SYSTEM — orange reserved for the primary conversion action ONLY --------------------------------------------------------------------------- */ .pv-btn { --_bg: transparent; --_fg: var(--pv-text); --_bd: var(--pv-border-strong); display: inline-flex; align-items: center; justify-content: center; gap: .55em; font-weight: 700; font-size: 1rem; line-height: 1; padding: .95em 1.75em; border-radius: var(--pv-radius-pill); background: var(--_bg); color: var(--_fg); border: 1.5px solid var(--_bd); cursor: pointer; text-decoration: none; transition: transform var(--pv-dur) var(--pv-ease-spring), box-shadow var(--pv-dur) var(--pv-ease), background var(--pv-dur) var(--pv-ease), filter var(--pv-dur) var(--pv-ease); will-change: transform; } .pv-btn:active { transform: translateY(1px) scale(.99); } .pv-btn:focus-visible { outline: 3px solid var(--pv-orange-glow); outline-offset: 2px; } /* PRIMARY — the money button. High-emphasis orange. */ .pv-btn--primary, .pickviz-orange-btn { --_bg: var(--pv-orange); --_fg: #fff; --_bd: transparent; background-image: var(--pv-gradient); box-shadow: var(--pv-shadow-orange); } .pv-btn--primary:hover, .pickviz-orange-btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 38px -8px var(--pv-orange-glow); } /* SECONDARY — ghost, for the "Free Download" / low-commitment path */ .pv-btn--ghost { --_bg: transparent; --_fg: var(--pv-text); --_bd: var(--pv-border-strong); } .pv-btn--ghost:hover { --_bd: var(--pv-orange); --_fg: var(--pv-orange); } /* SUBTLE — text/link style */ .pv-btn--link { border: 0; padding-inline: .25em; color: var(--pv-orange); border-radius: 0; } .pv-btn--link:hover { color: var(--pv-orange-hover); text-decoration: underline; } .pv-btn--lg { font-size: 1.125rem; padding: 1.1em 2.1em; } .pv-btn--block { display: flex; width: 100%; } /* --------------------------------------------------------------------------- 5. TEXT + LINK PRIMITIVES --------------------------------------------------------------------------- */ .pv-eyebrow { display: inline-flex; align-items: center; gap: .5em; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pv-orange); } .pv-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--pv-orange); } .pv-h1 { font-size: var(--pv-h1); line-height: 1.04; font-weight: 800; letter-spacing: -.02em; color: var(--pv-text); } .pv-h2 { font-size: var(--pv-h2); line-height: 1.1; font-weight: 800; letter-spacing: -.015em; color: var(--pv-text); } .pv-lead { font-size: var(--pv-lead); color: var(--pv-text-muted); max-width: 56ch; } .pv-text-orange { color: var(--pv-orange); } .pv-gradient-text { background: var(--pv-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } a.pv-link { color: var(--pv-orange); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--pv-dur); } a.pv-link:hover { border-bottom-color: currentColor; } /* --------------------------------------------------------------------------- 6. BADGES (Most Popular, Verified, Pro, Free) --------------------------------------------------------------------------- */ .pv-badge { display: inline-flex; align-items: center; gap: .4em; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: .35em .8em; border-radius: var(--pv-radius-pill); background: var(--pv-orange-soft); color: var(--pv-orange); border: 1px solid transparent; } .pv-badge--popular { background: var(--pv-gradient); color: #fff; box-shadow: var(--pv-shadow-orange); } .pv-badge--verified { background: rgba(22,163,74,.14); color: var(--pv-win); } .pv-badge--free { background: rgba(37,99,235,.14); color: #2563eb; } /* --------------------------------------------------------------------------- 7. PRICING TABLE (3-col, hero column emphasized) --------------------------------------------------------------------------- */ .pv-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; } .pv-plan { position: relative; display: flex; flex-direction: column; padding: 2rem 1.75rem; } .pv-plan__price { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; color: var(--pv-text); } .pv-plan__price small { font-size: .95rem; font-weight: 600; color: var(--pv-text-muted); } .pv-plan ul { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: .6rem; } .pv-plan li { display: flex; gap: .6em; font-size: .95rem; color: var(--pv-text-muted); } .pv-plan li::before { content: "✓"; color: var(--pv-orange); font-weight: 800; } .pv-plan li[data-off]::before { content: "—"; color: var(--pv-text-faint); } .pv-plan .pv-btn { margin-top: auto; } /* Flagship column — scale, orange ring, gradient top-bar */ .pv-plan--hero { border-color: var(--pv-orange); box-shadow: var(--pv-shadow-2), 0 0 0 1px var(--pv-orange) inset; transform: scale(1.035); z-index: 2; } .pv-plan--hero::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 5px; background: var(--pv-gradient); border-radius: var(--pv-radius) var(--pv-radius) 0 0; } .pv-plan--hero .pv-badge--popular { position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%); } /* --------------------------------------------------------------------------- 8. THEME TOGGLE (drop-in sun/moon switch) --------------------------------------------------------------------------- */ .pv-theme-toggle { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: var(--pv-radius-pill); border: 1px solid var(--pv-border-strong); background: var(--pv-bg-card); color: var(--pv-text); cursor: pointer; transition: border-color var(--pv-dur), transform var(--pv-dur) var(--pv-ease-spring); } .pv-theme-toggle:hover { border-color: var(--pv-orange); transform: rotate(-15deg); } [data-theme="dark"] .pv-theme-toggle .pv-icon-sun { display: block; } [data-theme="dark"] .pv-theme-toggle .pv-icon-moon { display: none; } [data-theme="light"] .pv-theme-toggle .pv-icon-sun { display: none; } [data-theme="light"] .pv-theme-toggle .pv-icon-moon { display: block; } /* =========================================================================== 9. WOOCOMMERCE HARMONIZATION Maps Woo's buttons, prices, notices, inputs, and checkout to the brand system so shop/cart/checkout never break the dark/light + orange language. =========================================================================== */ /* — Primary Woo buttons → brand orange gradient — */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce .button.alt, .woocommerce-page button.button.alt, .wc-block-components-button { background: var(--pv-gradient) !important; color: #fff !important; border: 0 !important; border-radius: var(--pv-radius-pill) !important; font-weight: 700 !important; padding: .85em 1.6em !important; box-shadow: var(--pv-shadow-orange); transition: transform var(--pv-dur) var(--pv-ease-spring), filter var(--pv-dur); } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button.alt:hover, .wc-block-components-button:hover { transform: translateY(-2px); filter: brightness(1.06); } /* Secondary Woo buttons (e.g. "Update cart") → ghost */ .woocommerce button.button[name="update_cart"], .woocommerce .button:not(.alt):not([id="submit"]) { background: transparent !important; color: var(--pv-text) !important; border: 1.5px solid var(--pv-border-strong) !important; box-shadow: none; } /* — Prices & sale — */ .woocommerce .price, .woocommerce ul.products li.product .price { color: var(--pv-text) !important; font-weight: 800; } .woocommerce .price del { color: var(--pv-text-faint) !important; } .woocommerce .price ins { color: var(--pv-orange) !important; text-decoration: none; } .woocommerce span.onsale { background: var(--pv-gradient) !important; color: #fff !important; border-radius: var(--pv-radius-pill); min-height: auto; min-width: auto; padding: .3em .7em; } /* — Surfaces: product cards, cart, checkout panels — */ .woocommerce ul.products li.product, .woocommerce-cart .cart-collaterals .cart_totals, .woocommerce-checkout #order_review, .woocommerce .woocommerce-info, .wc-block-components-panel { background: var(--pv-bg-card) !important; border: 1px solid var(--pv-border) !important; border-radius: var(--pv-radius) !important; color: var(--pv-text) !important; } /* — Inputs — */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .wc-block-components-text-input input { background: var(--pv-bg-input) !important; border: 1px solid var(--pv-border-strong) !important; color: var(--pv-text) !important; border-radius: var(--pv-radius-sm) !important; padding: .8em 1em !important; } .woocommerce form .form-row input.input-text:focus, .wc-block-components-text-input input:focus { border-color: var(--pv-orange) !important; box-shadow: 0 0 0 3px var(--pv-orange-soft) !important; outline: 0 !important; } /* — Notices (trust signals) mapped to result semantics — */ .woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: var(--pv-orange) !important; } .woocommerce-message { border-top-color: var(--pv-win) !important; } .woocommerce-error { border-top-color: var(--pv-loss) !important; } /* — Checkout: reinforce security/trust near the pay button — */ .woocommerce-checkout #payment { background: var(--pv-bg-elev) !important; border-radius: var(--pv-radius) !important; border: 1px solid var(--pv-border) !important; } .woocommerce-checkout #place_order { width: 100%; font-size: 1.1rem !important; } /* --------------------------------------------------------------------------- 10. RESPONSIVE --------------------------------------------------------------------------- */ @media (max-width: 900px) { .pv-pricing { grid-template-columns: 1fr; } .pv-plan--hero { transform: none; order: -1; } /* flagship first on mobile */ } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } .pv-card:hover, .pv-btn:hover { transform: none; } }