/* ============================================================ PYQ CORE — GLOBAL DESIGN TOKENS Mapped to Blocksy Theme Customizer Variables ============================================================ */ :root { /* ======================================================= 1. BRAND COLORS (Theme Customizer से जुड़ेंगे) ======================================================= */ /* Color 1: मुख्य ब्रांड कलर (Primary Brand Color) */ --pt-primary: var(--theme-palette-color-1, #2563eb); --pt-blue: var(--theme-palette-color-1, #3b82f6); /* Color 2: होवर कलर (Hover Dark Color) */ --pt-primary-hover: var(--theme-palette-color-2, #1d4ed8); --pt-primary-dark: var(--theme-palette-color-2, #1d4ed8); /* Color 4: हल्का ब्रांड कलर (Very Light / Soft Brand Color) Uses modern CSS color-mix to create a 8% opacity tint of the primary color */ --pt-primary-soft: color-mix(in srgb, var(--pt-primary) 8%, transparent); /* ======================================================= 2. NEUTRAL & BACKGROUND COLORS (Theme Customizer) ======================================================= */ /* Color 3/4: Texts (Blocksy Default) */ --pt-text: var(--theme-palette-color-3, #1e293b); --pt-dark: var(--theme-palette-color-4, #0f172a); --pt-text-md: #475569; --pt-text-lt: #64748b; --pt-text-light: #64748b; --pt-text-muted: #94a3b8; --pt-gray: #64748b; /* Backgrounds */ --pt-bg-page: var(--theme-palette-color-7, #f6f6f6); --pt-bg: var(--theme-palette-color-7, #f8fafc); --pt-bg-card: #ffffff; --pt-white: #ffffff; --pt-bg-subtle: #f8fafc; /* Borders */ --pt-border: var(--theme-border-color, #e2e8f0); --pt-border-light: #f1f5f9; /* ======================================================= 3. STATUS COLORS (ये फिक्स रहेंगे, थीम से नहीं बदलेंगे) ======================================================= */ /* सही जवाब (Correct / Success / Navigation) */ --pt-success: #10b981; --pt-success-bg: #ecfdf5; --pt-green: #10b981; /* गलत जवाब (Wrong / Error / Danger) */ --pt-error: #ef4444; --pt-error-bg: #fef2f2; --pt-red: #ef4444; /* चेतावनी (Warning / Exam Pills) */ --pt-warning: #f59e0b; --pt-warning-bg: #fff7ed; --pt-warning-border: #ffedd5; --pt-orange: #f59e0b; /* ======================================================= 4. TYPOGRAPHY & LAYOUT UTILS ======================================================= */ --pt-font: var(--theme-font-family, 'Inter', system-ui, sans-serif); /* Shadows & Radius */ --pt-shadow-xs: 0 1px 2px rgba(0,0,0,0.05); --pt-shadow: 0 8px 32px -8px rgba(0,0,0,.12); --pt-shadow-sm: 0 2px 4px rgba(0,0,0,0.06); --pt-shadow-md: 0 4px 12px rgba(0,0,0,0.08); --pt-shadow-lg: 0 10px 25px rgba(0,0,0,0.10); --pt-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.10), 0 10px 10px -5px rgba(0,0,0,0.04); --pt-radius-sm: 4px; --pt-radius: 6px; --pt-radius-md: 8px; --pt-radius-lg: 10px; --pt-radius-pill: 50px; /* Spacing Tokens (For Question Components) */ --pt-main-gap: 16px; --pt-inner-gap: 6px; --pt-p-margin: 0px; /* ======================================================= 5. RESPONSIVE BREAKPOINTS (Phase 3 — for utility consumers) ======================================================= */ --pt-bp-xs: 320px; --pt-bp-sm: 380px; --pt-bp-md: 480px; --pt-bp-lg: 640px; --pt-bp-xl: 768px; --pt-bp-2xl: 1024px; /* Focus ring color (Phase 3 — used by global :focus-visible utility) */ --pt-focus-ring: color-mix(in srgb, var(--pt-primary) 60%, transparent); } /* ============================================================ 6. GLOBAL FOCUS-VISIBLE UTILITY (Phase 3 — a11y baseline) Provides a consistent keyboard-focus outline across all pt-* and pyq-* interactive elements. Uses :focus-visible so mouse clicks don't trigger the ring (only keyboard navigation). ============================================================ */ .pt-btn:focus-visible, .pt-btn-soft:focus-visible, .pt-btn-outline:focus-visible, .pt-btn-primary:focus-visible, .pt-btn-ghost:focus-visible, .pt-btn-sm:focus-visible, .pt-btn-save:focus-visible, .pt-btn-logout:focus-visible, .pt-btn-danger:focus-visible, .pt-action-btn:focus-visible, .pt-option-btn:focus-visible, .pt-tab-btn:focus-visible, .pt-auth-tab:focus-visible, .pt-profile-tab:focus-visible, .pt-quick-action-btn:focus-visible, .pt-input:focus-visible, .pt-otp-box:focus-visible, .pt-pass-eye:focus-visible, .pyq-tool-btn:focus-visible, .pyq-vote-btn:focus-visible, .pyq-toggle-lang:focus-visible, .pyq-card-view-link:focus-visible, .pyq-related-link:focus-visible, .pyq-dash-chip:focus-visible, .pyq-dash-pdf-list__link:focus-visible, .pyq-dash-mock-preview__link:focus-visible, .pyq-dash-browser-preview__link:focus-visible, .pt-checkout-gateway-option input[type="radio"]:focus-visible, .pt-coupon-remove:focus-visible, .pt-share-btn:focus-visible, .pt-add-to-cart-btn:focus-visible, .pt-buy-btn:focus-visible, .pt-preview-btn:focus-visible, .pt-product-card-link:focus-visible { outline: 2px solid var(--pt-focus-ring) !important; outline-offset: 2px !important; border-radius: var(--pt-radius-md, 8px); } /* High-contrast outline override for danger/destructive actions */ .pt-btn-danger:focus-visible, .pt-coupon-remove:focus-visible { outline-color: var(--pt-error) !important; } /* Logout button on dark hero — light outline */ .pt-btn-logout:focus-visible { outline-color: rgba(255, 255, 255, .85) !important; } /* Anchor-tag wrapper around product cards — keep ring visible */ .pt-product-card-link:focus-visible { outline-offset: 4px !important; } /* ============================================================ 7. PHASE 4 — GLOBAL MOBILE A11Y / UX HOTFIXES Findings from the multi-agent QA recheck on store.css gaps that were missed by the per-page Phase 1-3 fixes. Scoped globally so any frontend page (not just .pt-checkout-wrap) benefits. ============================================================ */ @media (max-width: 480px) { /* QA finding #1 (CRITICAL) — prevent iOS Safari auto-zoom on form input focus. iOS zooms in if input font-size < 16px. Phase 1 only covered .pt-checkout-wrap; this catches the rest: product reviews, profile forms, search inputs, etc. */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], input[type="url"], textarea { font-size: 16px !important; } /* QA finding #4 (IMPORTANT) — small buttons meet 44px touch target on mobile. The base .pt-btn-sm has padding 7px 16px which is below WCAG 2.5.5 minimum on touch devices. */ .pt-btn-sm { min-height: 44px; } } /* QA finding #5 (IMPORTANT) — payment gateway radio focus ring. The radio input is visually hidden behind the gateway card, so the existing :focus-visible outline is invisible to keyboard users. Forward the outline to the visible card via adjacent sibling combinator. */ .pt-checkout-gateway-option input[type="radio"]:focus-visible + .pt-checkout-gateway-card { outline: 2px solid var(--pt-focus-ring) !important; outline-offset: 2px !important; border-radius: var(--pt-radius-md, 8px); }