/* Theme Name: Industrial Decoder Pro Theme URI: https://candycode.be/themes/industrial-decoder Author: CandyCode Author URI: https://candycode.be Description: A premium industrial-grade WordPress theme featuring the Industrial Error Decoder tool with WooCommerce subscription integration. Cyberpunk-industrial interface with cyan/orange accents, glassmorphism panels, and animated terminal aesthetics. Version: 2.9.2 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: industrial-decoder Tags: dark, industrial, woocommerce, custom-colors, custom-logo, custom-menu, featured-images, theme-options, translation-ready */ /* ============================================================ CSS CUSTOM PROPERTIES ============================================================ */ :root { /* Primary Palette */ --id-bg-primary: #0A0A0F; --id-bg-secondary: #12121A; --id-bg-tertiary: #1A1A25; --id-bg-panel: rgba(18, 18, 26, 0.8); --id-bg-elevated: #22222E; /* Accent Colors */ --id-cyan: #00F0FF; --id-cyan-light: #33F5FF; --id-cyan-dark: #00C8D6; --id-cyan-glow: rgba(0, 240, 255, 0.12); --id-orange: #FF6B00; --id-orange-light: #FF8C33; --id-orange-glow: rgba(255, 107, 0, 0.12); --id-green: #00FF88; --id-green-glow: rgba(0, 255, 136, 0.12); --id-red: #FF4444; --id-red-glow: rgba(255, 68, 68, 0.12); --id-warning: #F59E0B; --id-warning-glow: rgba(245, 158, 11, 0.12); /* Semantic aliases */ --id-amber: var(--id-cyan); --id-amber-light: var(--id-cyan-light); --id-amber-dark: var(--id-cyan-dark); --id-amber-glow: var(--id-cyan-glow); --id-blue: var(--id-cyan); --id-blue-glow: var(--id-cyan-glow); /* Text */ --id-text-primary: #E8E8E8; --id-text-secondary: #9CA3AF; --id-text-muted: #6B7280; --id-text-amber: var(--id-cyan); /* Borders */ --id-border: rgba(255, 255, 255, 0.08); --id-border-active: var(--id-cyan); --id-metallic: #2A2A35; /* Typography */ --id-font-display: 'Rajdhani', sans-serif; --id-font-body: 'Inter', sans-serif; --id-font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Spacing */ --id-space-xs: 0.25rem; --id-space-sm: 0.5rem; --id-space-md: 1rem; --id-space-lg: 1.5rem; --id-space-xl: 2rem; --id-space-2xl: 3rem; --id-space-3xl: 4rem; --id-space-4xl: 6rem; /* Radius */ --id-radius-sm: 4px; --id-radius-md: 8px; --id-radius-lg: 12px; --id-radius-full: 9999px; /* Shadows */ --id-shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --id-shadow-md: 0 4px 12px rgba(0,0,0,0.5); --id-shadow-lg: 0 8px 30px rgba(0,0,0,0.6); --id-glow-cyan: 0 0 20px rgba(0, 240, 255, 0.3), 0 0 40px rgba(0, 240, 255, 0.1); --id-glow-orange: 0 0 20px rgba(255, 107, 0, 0.3), 0 0 40px rgba(255, 107, 0, 0.1); --id-glow-green: 0 0 20px rgba(0, 255, 136, 0.3), 0 0 40px rgba(0, 255, 136, 0.1); --id-shadow-inset: inset 0 0 30px rgba(0, 240, 255, 0.03); /* Transitions */ --id-transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1); --id-transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1); /* Layout */ --id-container-max: 1280px; --id-container-wide: 1440px; --id-header-height: 72px; } /* ============================================================ LIGHT MODE — data-theme="light" on ============================================================ */ [data-theme="light"] { --id-bg-primary: #F4F5F7; --id-bg-secondary: #FFFFFF; --id-bg-tertiary: #E9EBF0; --id-bg-panel: rgba(255, 255, 255, 0.85); --id-bg-elevated: #FFFFFF; --id-cyan: #0099AA; --id-cyan-light: #00B8CC; --id-cyan-dark: #007A88; --id-cyan-glow: rgba(0, 153, 170, 0.10); --id-orange: #D45A00; --id-orange-light: #E87420; --id-orange-glow: rgba(212, 90, 0, 0.08); --id-green: #00994D; --id-green-glow: rgba(0, 153, 77, 0.08); --id-red: #CC3333; --id-red-glow: rgba(204, 51, 51, 0.08); --id-warning: #B37A00; --id-warning-glow: rgba(179, 122, 0, 0.08); --id-amber: var(--id-cyan); --id-amber-light: var(--id-cyan-light); --id-amber-dark: var(--id-cyan-dark); --id-amber-glow: var(--id-cyan-glow); --id-blue: var(--id-cyan); --id-blue-glow: var(--id-cyan-glow); --id-text-primary: #1A1A2E; --id-text-secondary: #4B5563; --id-text-muted: #9CA3AF; --id-text-amber: var(--id-cyan); --id-border: rgba(0, 0, 0, 0.10); --id-border-active: var(--id-cyan); --id-metallic: #D1D5DB; --id-shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --id-shadow-md: 0 4px 12px rgba(0,0,0,0.10); --id-shadow-lg: 0 8px 30px rgba(0,0,0,0.12); --id-glow-cyan: 0 0 15px rgba(0, 153, 170, 0.15); --id-glow-orange: 0 0 15px rgba(212, 90, 0, 0.15); --id-glow-green: 0 0 15px rgba(0, 153, 77, 0.15); --id-shadow-inset: inset 0 0 30px rgba(0, 153, 170, 0.03); } /* Light: override ALL hardcoded dark backgrounds, borders, text */ [data-theme="light"] body::before { display: none; } /* ── Header ── */ [data-theme="light"] .id-header { background: rgba(244, 245, 247, 0.92); border-bottom-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .id-nav__link { color: var(--id-text-secondary); } [data-theme="light"] .id-nav__link:hover, [data-theme="light"] .id-nav__link--active, [data-theme="light"] .id-nav__link.active { color: var(--id-text-primary); } /* ── Hero ── */ [data-theme="light"] .id-hero { background: var(--id-bg-primary); } [data-theme="light"] .id-hero__cta--outline { border-color: rgba(0, 0, 0, 0.15); color: var(--id-text-primary); } /* ── Cards / Panels — background + border fix ── */ [data-theme="light"] .id-panel, [data-theme="light"] .id-feature { background: rgba(255, 255, 255, 0.90); border-color: rgba(0, 0, 0, 0.08); box-shadow: var(--id-shadow-sm); } [data-theme="light"] .id-panel:hover, [data-theme="light"] .id-feature:hover { border-color: rgba(0, 0, 0, 0.15); box-shadow: var(--id-shadow-md); } /* ── Pricing cards ── */ [data-theme="light"] .id-pricing__card { background: rgba(255, 255, 255, 0.95); border-color: rgba(0, 0, 0, 0.08); box-shadow: var(--id-shadow-sm); } [data-theme="light"] .id-pricing__card:hover { border-color: rgba(0, 0, 0, 0.15); box-shadow: var(--id-shadow-md); } [data-theme="light"] .id-pricing__card--featured { border-color: var(--id-cyan); } /* ── Decoder section ── */ [data-theme="light"] .id-decoder__console { background: rgba(255, 255, 255, 0.95); border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .id-decoder__form { background: var(--id-bg-secondary); border-color: rgba(0, 0, 0, 0.10); } [data-theme="light"] .id-solution { background: var(--id-bg-secondary); border-color: rgba(0, 0, 0, 0.08); } /* ── Form inputs ── */ [data-theme="light"] .id-form-row input, [data-theme="light"] .id-form-row select, [data-theme="light"] .id-form-row textarea, [data-theme="light"] input[type="text"], [data-theme="light"] input[type="email"], [data-theme="light"] input[type="password"], [data-theme="light"] input[type="number"], [data-theme="light"] input[type="search"], [data-theme="light"] input[type="url"], [data-theme="light"] select, [data-theme="light"] textarea { background: var(--id-bg-secondary); border-color: rgba(0, 0, 0, 0.12); color: var(--id-text-primary); } /* ── FAQ ── */ [data-theme="light"] .id-faq__item { background: var(--id-bg-secondary); border-color: rgba(0, 0, 0, 0.08); } /* ── Modal ── */ [data-theme="light"] .id-modal__overlay { background: rgba(0, 0, 0, 0.35); } [data-theme="light"] .id-modal__panel, [data-theme="light"] #id-auth-modal .id-modal__panel { background: var(--id-bg-secondary); border-color: rgba(0, 0, 0, 0.10); color: var(--id-text-primary); } /* ── WooCommerce elements ── */ [data-theme="light"] .id-woo-card, [data-theme="light"] .woocommerce .products .product { background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(0, 0, 0, 0.08) !important; color: var(--id-text-primary) !important; } [data-theme="light"] .woocommerce table.shop_table { background: var(--id-bg-secondary) !important; border-color: rgba(0, 0, 0, 0.08) !important; color: var(--id-text-primary) !important; } [data-theme="light"] .woocommerce .woocommerce-info, [data-theme="light"] .woocommerce .woocommerce-error, [data-theme="light"] .woocommerce .woocommerce-message { background: var(--id-bg-secondary) !important; border-color: rgba(0, 0, 0, 0.08) !important; color: var(--id-text-primary) !important; } [data-theme="light"] .woocommerce table.shop_table th, [data-theme="light"] .woocommerce table.shop_table td { border-color: rgba(0, 0, 0, 0.06) !important; color: var(--id-text-primary) !important; } /* ── Block editor content ── */ [data-theme="light"] .wp-block-post-content pre { background: var(--id-bg-tertiary); color: var(--id-text-primary); } [data-theme="light"] .wp-block-post-content h2, [data-theme="light"] .wp-block-post-content h3, [data-theme="light"] .wp-block-post-content h4 { color: var(--id-text-primary); } /* ── Hardcoded "color: white" overrides ── */ [data-theme="light"] .id-hero__title, [data-theme="light"] .id-hero__desc, [data-theme="light"] .id-section__title, [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3 { color: var(--id-text-primary); } /* ── Social proof / counters ── */ [data-theme="light"] .id-social-proof { background: var(--id-bg-secondary); border-color: rgba(0, 0, 0, 0.06); } /* ── CTA section ── */ [data-theme="light"] .id-cta { background: var(--id-bg-tertiary); } /* ── Borders: global fix for rgba(255,255,255,...) ── */ [data-theme="light"] .id-decoder__severity, [data-theme="light"] .id-process-card, [data-theme="light"] .id-engine-card, [data-theme="light"] .id-review-panel, [data-theme="light"] .id-measurement-card, [data-theme="light"] .id-solution-header, [data-theme="light"] .id-steps-list li, [data-theme="light"] .id-combobox, [data-theme="light"] .id-quota-badge, [data-theme="light"] .id-topbar, [data-theme="light"] .id-hero__cta--outline, [data-theme="light"] .id-btn--outline, [data-theme="light"] .id-nav__cta, [data-theme="light"] .id-sub-status-card, [data-theme="light"] .id-gate, [data-theme="light"] .id-decoder__result, [data-theme="light"] .id-process-step, [data-theme="light"] .id-history-item, [data-theme="light"] .id-accordion__item { border-color: rgba(0, 0, 0, 0.08); } /* ── Hardcoded color:white fixes ── */ [data-theme="light"] .id-header__brand-text { color: var(--id-text-primary); } [data-theme="light"] .id-header__brand-text span { -webkit-text-fill-color: var(--id-cyan); } [data-theme="light"] .id-btn--outline { color: var(--id-text-primary); border-color: rgba(0,0,0,0.15); } [data-theme="light"] .id-btn--outline:hover { color: var(--id-cyan); border-color: var(--id-cyan); } [data-theme="light"] .id-pricing__price { color: var(--id-text-primary); } [data-theme="light"] .id-pricing__name { color: var(--id-text-primary); } [data-theme="light"] .id-modal__close { color: var(--id-text-muted); } [data-theme="light"] .id-modal__close:hover { color: var(--id-text-primary); } [data-theme="light"] .id-sub-status-card__title { color: var(--id-text-primary); } [data-theme="light"] .id-sub-status-card__meta-val { color: var(--id-text-primary); } [data-theme="light"] .id-solution-header__label { color: var(--id-text-primary); } [data-theme="light"] .woocommerce .products .product .woocommerce-loop-product__title { color: var(--id-text-primary) !important; } [data-theme="light"] .id-counter__value { color: var(--id-cyan); } /* ── Remaining dark backgrounds ── */ [data-theme="light"] .id-decoder__gate, [data-theme="light"] .id-decoder__result, [data-theme="light"] .id-process-card { background: var(--id-bg-secondary); border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .id-auth-modal .id-modal__panel, [data-theme="light"] #id-auth-modal { background: var(--id-bg-secondary); } [data-theme="light"] .id-auth-modal input, [data-theme="light"] #id-auth-modal input { background: var(--id-bg-tertiary); border-color: rgba(0, 0, 0, 0.10); color: var(--id-text-primary); } /* ── WooCommerce shop_table hardcoded white fix ── */ [data-theme="light"] .woocommerce table.shop_table, [data-theme="light"] .woocommerce table.shop_table th, [data-theme="light"] .woocommerce table.shop_table td { color: var(--id-text-primary) !important; } /* ── Hero badge in light mode ── */ [data-theme="light"] .id-hero__badge { background: rgba(0, 153, 170, 0.08); border-color: rgba(0, 153, 170, 0.2); } /* ── Decoder console specific dark elements ── */ [data-theme="light"] .id-decoder__form label, [data-theme="light"] .id-decoder__form .id-label, [data-theme="light"] .id-error-input, [data-theme="light"] #id-error-input { color: var(--id-text-primary); } [data-theme="light"] .id-error-input, [data-theme="light"] #id-error-input, [data-theme="light"] #id-manufacturer-select, [data-theme="light"] #id-equipment-select, [data-theme="light"] #id-family-select, [data-theme="light"] #id-model-select, [data-theme="light"] .id-decoder__form select, [data-theme="light"] .id-decoder__form input { background: var(--id-bg-primary); border-color: rgba(0, 0, 0, 0.12); color: var(--id-text-primary); } /* ── Subscription / Account cards ── */ [data-theme="light"] .id-sub-status-card { background: var(--id-bg-secondary); } /* ── Work order / history ── */ [data-theme="light"] .id-history-item { background: var(--id-bg-secondary); } /* ── Light mode: remaining inline-style border overrides ── */ [data-theme="light"] .id-social-proof { border-color: rgba(0, 0, 0, 0.06) !important; } [data-theme="light"] .id-section[style*="border"] { border-color: rgba(0, 0, 0, 0.06) !important; } [data-theme="light"] .id-pricing__feature-list li { border-color: rgba(0, 0, 0, 0.05); } [data-theme="light"] .id-faq__question { border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .woocommerce-MyAccount-navigation li { border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] table, [data-theme="light"] th, [data-theme="light"] td { border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] hr { border-color: rgba(0, 0, 0, 0.06); } /* ── Checkout overlay ── */ [data-theme="light"] .woocommerce-checkout form.processing::after { background: rgba(255, 255, 255, 0.7) !important; } /* ── Footer stays dark for contrast ── */ [data-theme="light"] .id-footer { background: #1A1A2E; --id-text-primary: #E8E8E8; --id-text-secondary: #9CA3AF; --id-text-muted: #6B7280; --id-border: rgba(255, 255, 255, 0.08); --id-cyan: #00F0FF; } /* ── Smooth transitions ── */ body, .id-header, .id-hero, .id-section, .id-feature, .id-pricing__card, .id-panel, .id-decoder__console { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ============================================================ THEME TOGGLE BUTTON (sun/moon) ============================================================ */ .id-theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--id-border); border-radius: var(--id-radius-full); background: transparent; color: var(--id-text-muted); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; flex-shrink: 0; margin-left: 4px; } .id-theme-toggle:hover { border-color: var(--id-cyan); color: var(--id-cyan); } /* Dark mode: show sun icon */ .id-theme-toggle__sun { display: block; } .id-theme-toggle__moon { display: none; } /* Light mode: show moon icon */ [data-theme="light"] .id-theme-toggle__sun { display: none; } [data-theme="light"] .id-theme-toggle__moon { display: block; } [data-theme="light"] .id-theme-toggle { background: rgba(0, 0, 0, 0.04); } @media print { .id-theme-toggle { display: none !important; } } /* ============================================================ BREADCRUMBS ============================================================ */ .id-breadcrumbs { padding: calc(var(--id-header-height) + var(--id-space-md)) 0 0; font-size: 0.78rem; font-family: var(--id-font-mono); color: var(--id-text-muted); } .id-breadcrumbs a { color: var(--id-text-muted); text-decoration: none; transition: color 0.15s ease; } .id-breadcrumbs a:hover { color: var(--id-cyan); } .id-breadcrumbs__sep { margin: 0 6px; opacity: 0.4; } .id-breadcrumbs [aria-current] { color: var(--id-text-secondary); } /* ============================================================ COOKIE CONSENT BAR (GDPR) ============================================================ */ .id-cookie-consent { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; gap: var(--id-space-md); padding: var(--id-space-md) var(--id-space-xl); background: var(--id-bg-secondary); border-top: 1px solid var(--id-border); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3); font-size: 0.85rem; flex-wrap: wrap; } .id-cookie-consent__text { color: var(--id-text-secondary); margin: 0; flex: 1; min-width: 200px; } .id-cookie-consent__link { color: var(--id-cyan); text-decoration: underline; margin-left: 4px; } .id-cookie-consent__link:hover { color: var(--id-cyan-light); } .id-cookie-consent__actions { display: flex; gap: 8px; flex-shrink: 0; } .id-cookie-consent__accept, .id-cookie-consent__reject { font-family: var(--id-font-display); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 24px; border: none; border-radius: var(--id-radius-full); cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; white-space: nowrap; } .id-cookie-consent__accept { background: var(--id-cyan); color: #0A0A0F; } .id-cookie-consent__accept:hover { background: var(--id-cyan-light); transform: translateY(-1px); } .id-cookie-consent__reject { background: transparent; border: 1px solid var(--id-border); color: var(--id-text-muted); } .id-cookie-consent__reject:hover { border-color: var(--id-text-secondary); color: var(--id-text-secondary); } [data-theme="light"] .id-cookie-consent { box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08); } @media print { .id-cookie-consent { display: none !important; } } /* ============================================================ SCROLL REVEAL ANIMATIONS ============================================================ */ .id-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .id-reveal--visible { opacity: 1; transform: translateY(0); } /* Stagger children */ .id-reveal:nth-child(2) { transition-delay: 0.08s; } .id-reveal:nth-child(3) { transition-delay: 0.16s; } .id-reveal:nth-child(4) { transition-delay: 0.24s; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .id-reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================ PRELOADER ============================================================ */ .id-preloader { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--id-space-md); background: var(--id-bg-primary); transition: opacity 0.4s ease; } .id-preloader__logo { max-width: 120px; height: auto; margin-bottom: var(--id-space-sm); } .id-preloader__spinner { width: 36px; height: 36px; border: 3px solid var(--id-border); border-top-color: var(--id-cyan); border-radius: 50%; animation: id-spin 0.8s linear infinite; } @keyframes id-spin { to { transform: rotate(360deg); } } .id-preloader__text { font-family: var(--id-font-mono); font-size: 0.78rem; color: var(--id-text-muted); letter-spacing: 0.05em; } /* ============================================================ BACK TO TOP — fixed button ============================================================ */ .id-back-top { position: fixed; bottom: var(--id-space-xl); right: var(--id-space-xl); z-index: 900; display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--id-bg-secondary); color: var(--id-text-muted); border: 1px solid var(--id-border); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.2s ease, color 0.2s ease; } .id-back-top--visible { opacity: 1; visibility: visible; transform: translateY(0); } .id-back-top:hover { border-color: var(--id-cyan); color: var(--id-cyan); } /* Variants */ .id-back-top--circle { width: 42px; height: 42px; border-radius: 50%; } .id-back-top--square { width: 42px; height: 42px; border-radius: var(--id-radius-md); } .id-back-top--pill { padding: 8px 16px; border-radius: var(--id-radius-full); font-family: var(--id-font-mono); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } @media print { .id-back-top { display: none !important; } } /* ============================================================ HEADER SHRINK ON SCROLL ============================================================ */ .id-header--shrink { --id-header-height: 52px; box-shadow: var(--id-shadow-md); } .id-header--shrink .id-header__brand-logo img { max-height: 28px; } .id-header--shrink .id-header__brand-text { font-size: 1rem; } /* ============================================================ EFFECT 1: PARTICLE NETWORK CANVAS ============================================================ */ .id-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* ============================================================ EFFECT 2: CARD TILT 3D ON HOVER (applied via JS) ============================================================ */ /* ============================================================ EFFECT 3: TYPEWRITER CURSOR ============================================================ */ .id-typewriter-cursor::after { content: '|'; display: inline-block; color: var(--id-cyan); font-weight: 300; animation: id-blink 0.7s step-end infinite; margin-left: 2px; } @keyframes id-blink { 50% { opacity: 0; } } /* ============================================================ EFFECT 4: ANIMATED COUNTERS ============================================================ */ .id-counter__value { font-family: var(--id-font-display); font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 700; color: var(--id-cyan); display: block; line-height: 1.2; tabular-nums: true; font-variant-numeric: tabular-nums; } /* ============================================================ EFFECT 5: GLITCH TEXT on brand accent word ============================================================ */ .id-header__brand-text span { position: relative; display: inline-block; } .id-glitch { animation: id-glitch-anim 4s infinite; } @keyframes id-glitch-anim { 0%, 92%, 100% { opacity: 1; transform: translate(0); filter: none; } 93% { opacity: 0.85; transform: translate(-2px, 1px); filter: hue-rotate(90deg); } 94% { opacity: 0.85; transform: translate(2px, -1px); filter: hue-rotate(-90deg); } 95% { opacity: 1; transform: translate(0); filter: none; } 96% { opacity: 0.9; transform: translate(1px, 1px) skewX(-2deg); filter: hue-rotate(45deg); } 97% { opacity: 1; transform: translate(0); filter: none; } } /* Glitch pseudo-layers */ .id-glitch::before, .id-glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; opacity: 0; } .id-glitch::before { color: var(--id-cyan); animation: id-glitch-before 4s infinite; } .id-glitch::after { color: var(--id-orange); animation: id-glitch-after 4s infinite; } @keyframes id-glitch-before { 0%, 92%, 100% { opacity: 0; clip-path: inset(0); transform: translate(0); } 93% { opacity: 0.6; clip-path: inset(20% 0 40% 0); transform: translate(-3px); } 94%, 100% { opacity: 0; } } @keyframes id-glitch-after { 0%, 94%, 100% { opacity: 0; clip-path: inset(0); transform: translate(0); } 95% { opacity: 0.6; clip-path: inset(50% 0 10% 0); transform: translate(3px); } 96%, 100% { opacity: 0; } } /* ============================================================ EFFECT 6: GRADIENT BORDER on featured pricing card ============================================================ */ .id-pricing__card--featured { position: relative; } .id-pricing__card--featured::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient( 135deg, var(--id-cyan) 0%, var(--id-orange) 30%, var(--id-cyan) 60%, var(--id-orange) 100% ); background-size: 300% 300%; animation: id-gradient-border 4s ease infinite; z-index: -1; pointer-events: none; } @keyframes id-gradient-border { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Respect reduced motion for all effects */ @media (prefers-reduced-motion: reduce) { .id-glitch, .id-glitch::before, .id-glitch::after, .id-pricing__card--featured::after, .id-typewriter-cursor::after { animation: none; } .id-particles { display: none; } } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--id-font-body); font-weight: 400; line-height: 1.6; color: var(--id-text-primary); background-color: var(--id-bg-primary); overflow-x: hidden; } /* Noise grain overlay */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.02; pointer-events: none; z-index: 0; } img { max-width: 100%; height: auto; display: block; } a { color: var(--id-cyan); text-decoration: none; transition: color var(--id-transition); } a:hover { color: var(--id-cyan-light); } ::selection { background: rgba(0, 240, 255, 0.3); color: var(--id-text-primary); } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--id-bg-primary); } ::-webkit-scrollbar-thumb { background: var(--id-metallic); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--id-cyan); } /* ============================================================ KIMI-INSPIRED MOTION UTILITIES ============================================================ */ /* Pulse glow on interactive elements */ .id-pulse-glow { animation: id-pulse-glow 3s ease-in-out infinite; } @keyframes id-pulse-glow { 0%, 100% { box-shadow: 0 0 5px var(--id-cyan-glow); } 50% { box-shadow: 0 0 25px rgba(0, 240, 255, 0.4), 0 0 50px rgba(0, 240, 255, 0.15); } } /* Float animation for decorative elements */ .id-float { animation: id-float 6s ease-in-out infinite; } @keyframes id-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* Text glow (neon) */ .id-text-glow { text-shadow: 0 0 10px rgba(0, 240, 255, 0.5), 0 0 20px rgba(0, 240, 255, 0.2); } /* Card scanline sweep on hover */ .id-panel::after, .id-pricing__card:not(.id-pricing__card--featured)::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--id-cyan), transparent); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .id-panel:hover::after, .id-pricing__card:not(.id-pricing__card--featured):hover::after { opacity: 1; animation: id-scanline-sweep 1.5s ease-out; } @keyframes id-scanline-sweep { 0% { top: 0; } 100% { top: 100%; } } /* Data stream vertical lines (decorative) */ .id-data-stream { position: absolute; width: 1px; height: 100%; background: linear-gradient(180deg, transparent, var(--id-cyan), transparent); opacity: 0.06; animation: id-data-flow 3s linear infinite; pointer-events: none; } @keyframes id-data-flow { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } /* Border glow utility */ .id-border-glow::before { content: ''; position: absolute; inset: -1px; background: linear-gradient(135deg, var(--id-cyan), var(--id-orange)); border-radius: inherit; z-index: -1; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .id-border-glow:hover::before { opacity: 0.5; } /* Badge micro-animation */ .id-hero__badge { animation: id-badge-pulse 2.5s ease-in-out infinite; } @keyframes id-badge-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.2); } 50% { box-shadow: 0 0 0 8px rgba(0, 240, 255, 0); } } /* Button hover: ripple fill from center */ .id-btn--primary { position: relative; overflow: hidden; } .id-btn--primary::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 255, 255, 0.15); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.5s ease, height 0.5s ease; pointer-events: none; } .id-btn--primary:hover::after { width: 300px; height: 300px; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .id-pulse-glow, .id-float, .id-hero__badge, .id-data-stream { animation: none; } .id-panel::after, .id-pricing__card::after, .id-btn--primary::after { display: none; } } /* ============================================================ ACCESSIBILITY — Focus States ============================================================ */ :focus-visible { outline: 2px solid var(--id-cyan); outline-offset: 2px; } .id-btn:focus-visible, .id-nav__link:focus-visible, .id-nav__cta:focus-visible, .id-theme-toggle:focus-visible, .id-back-top:focus-visible, .id-cookie-consent__accept:focus-visible, .id-cookie-consent__reject:focus-visible, .id-nav__toggle:focus-visible { outline: 2px solid var(--id-cyan); outline-offset: 2px; box-shadow: 0 0 0 4px var(--id-cyan-glow); } /* Remove outline on mouse click, keep on keyboard */ :focus:not(:focus-visible) { outline: none; box-shadow: none; } /* ============================================================ ACCESSIBILITY — Light Mode Contrast Fix (WCAG AA) ============================================================ */ [data-theme="light"] { /* Darken muted text from #9CA3AF (2.8:1) to #6B7280 (4.6:1) */ --id-text-muted: #6B7280; } /* ============================================================ WOOCOMMERCE MY ACCOUNT — Light Mode ============================================================ */ [data-theme="light"] .woocommerce-MyAccount-navigation { background: var(--id-bg-secondary); border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .woocommerce-MyAccount-navigation ul li a { color: var(--id-text-secondary); } [data-theme="light"] .woocommerce-MyAccount-navigation ul li.is-active a { color: var(--id-cyan); } [data-theme="light"] .woocommerce-MyAccount-content { color: var(--id-text-primary); } [data-theme="light"] .woocommerce-MyAccount-content h2, [data-theme="light"] .woocommerce-MyAccount-content h3 { color: var(--id-text-primary); } [data-theme="light"] .woocommerce-order-details, [data-theme="light"] .woocommerce-customer-details, [data-theme="light"] .woocommerce-EditAccountForm, [data-theme="light"] .woocommerce-address-fields { background: var(--id-bg-secondary); border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .woocommerce-MyAccount-content input, [data-theme="light"] .woocommerce-MyAccount-content select, [data-theme="light"] .woocommerce-MyAccount-content textarea { background: var(--id-bg-primary); border-color: rgba(0, 0, 0, 0.12); color: var(--id-text-primary); } [data-theme="light"] .id-account-sidebar, [data-theme="light"] .id-account-page__header { background: var(--id-bg-secondary); border-color: rgba(0, 0, 0, 0.08); color: var(--id-text-primary); } [data-theme="light"] .id-account-content { background: var(--id-bg-secondary); } /* ============================================================ RESPONSIVE — Mobile Refinements ============================================================ */ @media (max-width: 960px) { /* Theme toggle & back-to-top: slightly smaller on mobile */ .id-theme-toggle { width: 32px; height: 32px; } .id-theme-toggle svg { width: 16px; height: 16px; } /* Mobile nav light mode */ [data-theme="light"] .id-nav__list { background: var(--id-bg-secondary); border-bottom-color: rgba(0, 0, 0, 0.08); } /* Disable card tilt on tablet */ .id-panel, .id-pricing__card, .id-feature { transform: none !important; } } @media (max-width: 640px) { /* Cookie consent: stack vertically */ .id-cookie-consent { flex-direction: column; text-align: center; padding: var(--id-space-md); } .id-cookie-consent__actions { width: 100%; justify-content: center; } /* Back-to-top: smaller */ .id-back-top--circle, .id-back-top--square { width: 36px; height: 36px; } /* Preloader text smaller */ .id-preloader__text { font-size: 0.7rem; } /* Breadcrumbs: hide on very small screens */ .id-breadcrumbs { font-size: 0.7rem; } /* Hero title: reduce typewriter speed impression */ .id-hero__title { font-size: clamp(1.8rem, 6vw, 3rem); } } /* ============================================================ TYPOGRAPHY ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--id-font-display); font-weight: 700; line-height: 1.2; color: var(--id-text-primary); } h1 { font-size: clamp(2.2rem, 5vw, 3.75rem); } h2 { font-size: clamp(1.6rem, 3.5vw, 2.75rem); } h3 { font-size: clamp(1.3rem, 2.5vw, 1.85rem); } h4 { font-size: 1.3rem; } h5 { font-size: 1.1rem; } h6 { font-size: 0.9rem; } p { margin-bottom: var(--id-space-md); color: var(--id-text-secondary); } .id-label { font-family: var(--id-font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--id-text-muted); } .id-readout { font-family: var(--id-font-mono); color: var(--id-cyan); letter-spacing: 0.05em; } /* Text gradients */ .id-text-gradient-cyan { background: linear-gradient(135deg, var(--id-cyan) 0%, #00c8d6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .id-text-gradient-orange { background: linear-gradient(135deg, var(--id-orange) 0%, #ff8c33 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================================ LAYOUT ============================================================ */ .id-container { width: 100%; max-width: var(--id-container-max); margin: 0 auto; padding: 0 var(--id-space-xl); } .id-container--wide { max-width: var(--id-container-wide); } .id-section { padding: var(--id-space-4xl) 0; position: relative; } .id-grid { display: grid; gap: var(--id-space-xl); } .id-grid--2 { grid-template-columns: repeat(2, 1fr); } .id-grid--3 { grid-template-columns: repeat(3, 1fr); } .id-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .id-grid--3, .id-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .id-grid--2, .id-grid--3, .id-grid--4 { grid-template-columns: 1fr; } } /* ============================================================ HEADER ============================================================ */ .id-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--id-header-height); background: rgba(10, 10, 15, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--id-border); transition: all var(--id-transition); } .id-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--id-container-wide); margin: 0 auto; padding: 0 var(--id-space-xl); } .id-header__brand { display: flex; align-items: center; gap: var(--id-space-sm); } .id-header__brand-logo { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--id-radius-md); background: linear-gradient(135deg, var(--id-cyan), var(--id-orange)); color: var(--id-bg-primary); font-weight: 900; font-family: var(--id-font-display); font-size: 1.1rem; } .id-header__brand-text { font-family: var(--id-font-display); font-size: 1.25rem; font-weight: 700; color: white; } .id-header__brand-text span { color: var(--id-cyan); } .id-header__led { width: 8px; height: 8px; border-radius: 50%; background: var(--id-green); box-shadow: 0 0 6px var(--id-green); animation: led-pulse 2s ease-in-out infinite; } @keyframes led-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* Navigation */ .id-nav { display: flex; align-items: center; gap: var(--id-space-lg); } .id-nav__list { display: flex; list-style: none; gap: var(--id-space-xs); } .id-nav__link { display: block; padding: var(--id-space-sm) var(--id-space-md); font-family: var(--id-font-body); font-size: 0.875rem; font-weight: 500; color: var(--id-text-muted); border-radius: var(--id-radius-sm); transition: color var(--id-transition); position: relative; } .id-nav__link:hover { color: rgba(255,255,255,0.85); } .id-nav__link--active { color: var(--id-cyan) !important; } .id-nav__link::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--id-cyan); transition: width var(--id-transition); } .id-nav__link:hover::after, .id-nav__link--active::after { width: 100%; } .id-nav__cta { display: inline-flex; align-items: center; gap: var(--id-space-sm); padding: 0.6rem 1.4rem; font-family: var(--id-font-display); font-size: 0.85rem; font-weight: 600; color: var(--id-bg-primary); background: var(--id-cyan); border: none; border-radius: var(--id-radius-md); cursor: pointer; transition: all var(--id-transition); } .id-nav__cta:hover { background: var(--id-orange); color: var(--id-bg-primary); transform: translateY(-2px); box-shadow: var(--id-glow-orange); } .id-nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: var(--id-space-sm); } .id-nav__toggle span { width: 24px; height: 2px; background: white; transition: all var(--id-transition); } @media (max-width: 960px) { .id-nav__toggle { display: flex; } .id-nav__list { display: none; position: absolute; top: var(--id-header-height); left: 0; right: 0; flex-direction: column; background: var(--id-bg-secondary); border-bottom: 1px solid var(--id-border); padding: var(--id-space-md); } .id-nav__list.is-open { display: flex; } .id-nav__cta { display: none; } } /* ============================================================ HERO SECTION ============================================================ */ .id-hero { min-height: 90vh; display: flex; align-items: center; position: relative; padding-top: var(--id-header-height); overflow: hidden; } /* Grid pattern background */ .id-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px); background-size: 50px 50px; pointer-events: none; } /* Ambient glow */ .id-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 20% 50%, rgba(0, 240, 255, 0.06) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 80% 50%, rgba(255, 107, 0, 0.04) 0%, transparent 70%); pointer-events: none; } .id-hero__content { position: relative; z-index: 2; max-width: 720px; } .id-hero__badge { display: inline-flex; align-items: center; gap: var(--id-space-sm); padding: 0.4rem 1rem; font-family: var(--id-font-body); font-size: 0.8rem; font-weight: 600; color: var(--id-cyan); background: var(--id-cyan-glow); border: 1px solid rgba(0, 240, 255, 0.25); border-radius: var(--id-radius-full); margin-bottom: var(--id-space-xl); } .id-hero__badge::before { content: '✦'; font-size: 0.7rem; } .id-hero__title { margin-bottom: var(--id-space-lg); line-height: 1.1; } .id-hero__title span { background: linear-gradient(135deg, var(--id-cyan) 0%, var(--id-cyan-light) 50%, var(--id-orange) 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: id-text-gradient-shift 6s ease infinite; } @keyframes id-text-gradient-shift { 0% { background-position: 0% center; } 50% { background-position: 100% center; } 100% { background-position: 0% center; } } .id-hero__desc { font-size: 1.1rem; line-height: 1.8; color: var(--id-text-secondary); margin-bottom: var(--id-space-2xl); max-width: 560px; } .id-hero__actions { display: flex; gap: var(--id-space-md); flex-wrap: wrap; } /* ============================================================ BUTTONS ============================================================ */ .id-btn { display: inline-flex; align-items: center; gap: var(--id-space-sm); padding: 0.875rem 2rem; font-family: var(--id-font-display); font-size: 0.9rem; font-weight: 600; border: none; border-radius: var(--id-radius-md); cursor: pointer; transition: all var(--id-transition); text-decoration: none; line-height: 1; position: relative; overflow: hidden; } .id-btn--primary { color: var(--id-bg-primary); background: var(--id-cyan); } .id-btn--primary:hover { background: var(--id-orange); color: var(--id-bg-primary); transform: translateY(-2px); box-shadow: var(--id-glow-orange); } .id-btn--outline { color: white; background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); } .id-btn--outline:hover { border-color: var(--id-cyan); color: var(--id-cyan); transform: translateY(-2px); } .id-btn--ghost { color: var(--id-text-secondary); background: transparent; padding: 0.875rem 1rem; } .id-btn--ghost:hover { color: var(--id-cyan); } .id-btn--sm { padding: 0.5rem 1.1rem; font-size: 0.8rem; } .id-btn--lg { padding: 1rem 2.5rem; font-size: 0.95rem; } /* ============================================================ GLASSMORPHISM PANELS / CARDS ============================================================ */ .id-panel { background: rgba(18, 18, 26, 0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--id-radius-lg); padding: var(--id-space-xl); position: relative; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); transform-style: preserve-3d; } .id-panel::before { content: ''; position: absolute; top: 0; left: var(--id-space-lg); right: var(--id-space-lg); height: 1px; background: linear-gradient(90deg, transparent, var(--id-cyan), transparent); opacity: 0; transition: opacity var(--id-transition); } .id-panel:hover { border-color: rgba(0, 240, 255, 0.2); transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); } .id-panel:hover::before { opacity: 1; } .id-panel__header { display: flex; align-items: center; gap: var(--id-space-md); margin-bottom: var(--id-space-lg); } .id-panel__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--id-cyan-glow); border: 1px solid rgba(0, 240, 255, 0.2); border-radius: var(--id-radius-md); color: var(--id-cyan); font-size: 1.25rem; transition: all var(--id-transition); } .id-panel:hover .id-panel__icon { background: var(--id-cyan); color: var(--id-bg-primary); box-shadow: var(--id-glow-cyan); } .id-panel__title { font-family: var(--id-font-display); font-size: 1.1rem; } .id-panel__text { color: var(--id-text-secondary); font-size: 0.95rem; line-height: 1.7; } /* ============================================================ SECTIONS ============================================================ */ .id-features { background: var(--id-bg-secondary); border-top: 1px solid var(--id-border); border-bottom: 1px solid var(--id-border); } .id-section__header { text-align: center; max-width: 640px; margin: 0 auto var(--id-space-3xl); } .id-section__label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--id-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--id-cyan); margin-bottom: var(--id-space-md); padding: 0.35rem 1rem; background: var(--id-cyan-glow); border: 1px solid rgba(0, 240, 255, 0.25); border-radius: var(--id-radius-full); } .id-section__title { margin-bottom: var(--id-space-md); } .id-section__desc { font-size: 1.05rem; color: var(--id-text-secondary); } /* ============================================================ PRICING ============================================================ */ .id-pricing__card { background: rgba(18, 18, 26, 0.8); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.92rem; border-radius: var(--id-radius-lg); padding: var(--id-space-2xl); text-align: center; position: relative; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); transform-style: preserve-3d; } .id-pricing__card:hover { transform: translateY(-15px); } .id-pricing__card--featured { border-color: var(--id-cyan); transform: translateY(-8px) scale(1.02); animation: popularPulse 2s ease-in-out infinite; } .id-pricing__card--featured:hover { transform: translateY(-25px) scale(1.05); } @keyframes popularPulse { 0%, 100% { box-shadow: 0 0 20px rgba(0, 240, 255, 0.2); } 50% { box-shadow: 0 0 40px rgba(0, 240, 255, 0.4), 0 0 60px rgba(0, 240, 255, 0.2); } } .id-pricing__card--featured::before { content: 'MOST POPULAR'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 0.3rem 1.2rem; font-family: var(--id-font-body); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; color: var(--id-bg-primary); background: var(--id-cyan); border-radius: var(--id-radius-full); box-shadow: var(--id-glow-cyan); } .id-pricing__name { font-family: var(--id-font-display); font-size: 1rem; letter-spacing: 0.05em; color: var(--id-text-muted); margin-bottom: var(--id-space-lg); text-transform: uppercase; } .id-pricing__price { font-family: var(--id-font-display); font-size: 3.5rem; font-weight: 700; color: white; line-height: 1; margin-bottom: var(--id-space-xs); } .id-pricing__price span { font-size: 1rem; color: var(--id-text-muted); font-weight: 400; } .id-pricing__trial { font-family: var(--id-font-mono); font-size: 0.75rem; color: var(--id-green); margin-bottom: var(--id-space-xl); letter-spacing: 0.05em; } /* Search quota badge inside pricing card */ .id-pricing__quota { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.85rem; background: rgba(0,240,255,0.06); border: 1px solid rgba(0,240,255,0.18); border-radius: 100px; font-family: var(--id-font-mono); font-size: 0.7rem; color: var(--id-text-muted); margin-bottom: var(--id-space-lg); letter-spacing: 0.04em; } .id-pricing__quota strong { color: var(--id-cyan); font-weight: 700; } .id-pricing__card--featured .id-pricing__quota { background: rgba(0,240,255,0.1); border-color: rgba(0,240,255,0.3); } .id-pricing__features { list-style: none; margin-bottom: var(--id-space-xl); text-align: left; } .id-pricing__features li { padding: 0.55rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 0.9rem; color: var(--id-text-secondary); display: flex; align-items: center; gap: var(--id-space-sm); transition: transform 0.3s ease; } .id-pricing__features li:hover { transform: translateX(5px); } .id-pricing__features li::before { content: '✓'; color: var(--id-green); font-weight: 700; font-size: 0.85rem; } .id-pricing__features li:last-child { border-bottom: none; } @media (max-width: 768px) { .id-pricing__card--featured { transform: none; } .id-pricing__card--featured:hover { transform: translateY(-10px); } } /* ============================================================ ERROR DECODER CONSOLE (terminal style) ============================================================ */ .id-decoder { background: var(--id-bg-secondary); } .id-decoder__console { background: rgba(10, 10, 15, 0.95); border: 1px solid rgba(0, 240, 255, 0.3); border-radius: var(--id-radius-lg); overflow: hidden; box-shadow: 0 0 40px rgba(0, 240, 255, 0.15), inset 0 0 40px rgba(0, 240, 255, 0.03); position: relative; } /* Top glow line */ .id-decoder__console::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 30px; background: linear-gradient(180deg, rgba(0, 240, 255, 0.08), transparent); pointer-events: none; z-index: 1; } .id-decoder__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 10px var(--id-space-lg); background: rgba(0, 240, 255, 0.05); border-bottom: 1px solid rgba(0, 240, 255, 0.1); } .id-decoder__toolbar-dots { display: flex; gap: 8px; } .id-decoder__toolbar-dots span { width: 12px; height: 12px; border-radius: 50%; } .id-decoder__toolbar-dots span:nth-child(1) { background: #FF5F56; } .id-decoder__toolbar-dots span:nth-child(2) { background: #FFBD2E; } .id-decoder__toolbar-dots span:nth-child(3) { background: #27C93F; } .id-decoder__toolbar-title { font-family: var(--id-font-mono); font-size: 0.75rem; color: var(--id-text-muted); letter-spacing: 0.05em; } .id-decoder__status { display: flex; align-items: center; gap: var(--id-space-sm); font-family: var(--id-font-mono); font-size: 0.7rem; color: var(--id-green); letter-spacing: 0.05em; } .id-decoder__status::before { content: ''; width: 6px; height: 6px; background: var(--id-green); border-radius: 50%; box-shadow: 0 0 6px var(--id-green); } .id-decoder__body { padding: var(--id-space-2xl); } .id-decoder__input-label { display: block; font-family: var(--id-font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--id-text-muted); margin-bottom: var(--id-space-sm); } .id-decoder__input { width: 100%; padding: 0.9rem var(--id-space-lg); font-family: var(--id-font-mono); font-size: 0.95rem; color: var(--id-cyan); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--id-radius-md); transition: all var(--id-transition); outline: none; } .id-decoder__input:focus { border-color: var(--id-cyan); box-shadow: 0 0 0 3px var(--id-cyan-glow), var(--id-glow-cyan); } .id-decoder__input::placeholder { color: var(--id-text-muted); } .id-decoder__select { width: 100%; padding: 0.9rem var(--id-space-lg); font-family: var(--id-font-mono); font-size: 0.9rem; color: var(--id-text-primary); background: var(--id-bg-tertiary); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--id-radius-md); cursor: pointer; outline: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236B7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; transition: all var(--id-transition); } .id-decoder__select option, .id-decoder__select optgroup { background: var(--id-bg-secondary); color: var(--id-text-primary); padding: 8px 12px; } .id-decoder__select:focus { border-color: var(--id-cyan); box-shadow: 0 0 0 3px var(--id-cyan-glow); } .id-decoder__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--id-space-lg); } @media (max-width: 640px) { .id-decoder__row { grid-template-columns: 1fr; } } .id-decoder__input-group { margin-bottom: var(--id-space-lg); } .id-decoder__result { margin-top: var(--id-space-xl); padding: var(--id-space-xl); background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--id-radius-md); display: none; } .id-decoder__result.is-active { display: block; animation: fadeSlideIn 0.4s ease; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .id-decoder__result-header { display: flex; align-items: center; gap: var(--id-space-md); margin-bottom: var(--id-space-lg); padding-bottom: var(--id-space-md); border-bottom: 1px solid var(--id-border); flex-wrap: wrap; } /* Severity badges */ .id-decoder__severity { padding: 0.25rem 0.8rem; font-family: var(--id-font-mono); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: var(--id-radius-full); } .id-decoder__severity--critical { color: var(--id-red); background: var(--id-red-glow); border: 1px solid rgba(255, 68, 68, 0.3); } .id-decoder__severity--warning { color: var(--id-warning); background: var(--id-warning-glow); border: 1px solid rgba(245, 158, 11, 0.3); } .id-decoder__severity--info { color: var(--id-cyan); background: var(--id-cyan-glow); border: 1px solid rgba(0, 240, 255, 0.3); } .id-decoder__severity--ok { color: var(--id-green); background: var(--id-green-glow); border: 1px solid rgba(0, 255, 136, 0.3); } /* ============================================================ SUBSCRIPTION GATE ============================================================ */ .id-gate { text-align: center; padding: var(--id-space-4xl) var(--id-space-xl); } .id-gate__icon { width: 80px; height: 80px; margin: 0 auto var(--id-space-xl); display: flex; align-items: center; justify-content: center; background: var(--id-cyan-glow); border: 2px solid rgba(0, 240, 255, 0.3); border-radius: 50%; font-size: 2rem; color: var(--id-cyan); animation: popularPulse 3s ease-in-out infinite; } .id-gate__title { margin-bottom: var(--id-space-md); } .id-gate__text { max-width: 480px; margin: 0 auto var(--id-space-xl); font-size: 1.05rem; } /* ============================================================ FOOTER ============================================================ */ .id-footer { background: var(--id-bg-secondary); border-top: 1px solid var(--id-border); padding: var(--id-space-3xl) 0 var(--id-space-xl); } .id-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--id-space-2xl); margin-bottom: var(--id-space-2xl); } @media (max-width: 768px) { .id-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .id-footer__grid { grid-template-columns: 1fr; } } .id-footer__brand-text { font-family: var(--id-font-display); font-size: 1.25rem; font-weight: 700; color: white; margin-bottom: var(--id-space-md); } .id-footer__brand-text span { color: var(--id-cyan); } .id-footer__brand-desc { font-size: 0.9rem; color: var(--id-text-muted); line-height: 1.6; } .id-footer__heading { font-family: var(--id-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--id-text-muted); margin-bottom: var(--id-space-lg); } .id-footer__links { list-style: none; } .id-footer__links li { margin-bottom: var(--id-space-sm); } .id-footer__links a { font-size: 0.9rem; color: var(--id-text-secondary); transition: color var(--id-transition); } .id-footer__links a:hover { color: var(--id-cyan); } .id-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: var(--id-space-xl); border-top: 1px solid var(--id-border); font-size: 0.8rem; color: var(--id-text-muted); } /* ============================================================ WOOCOMMERCE OVERRIDES ============================================================ */ .woocommerce .products .product { background: rgba(18, 18, 26, 0.8) !important; backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--id-radius-lg); padding: var(--id-space-lg); transition: all var(--id-transition); } .woocommerce .products .product:hover { border-color: rgba(0, 240, 255, 0.2); transform: translateY(-5px); } .woocommerce .products .product .woocommerce-loop-product__title { font-family: var(--id-font-display) !important; color: white !important; font-size: 1rem !important; } .woocommerce .products .product .price { color: var(--id-cyan) !important; font-family: var(--id-font-mono) !important; font-size: 1.2rem !important; } .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce .button { font-family: var(--id-font-display) !important; font-size: 0.85rem !important; font-weight: 600 !important; background: var(--id-cyan) !important; color: var(--id-bg-primary) !important; border: none !important; border-radius: var(--id-radius-md) !important; padding: 0.75rem 1.5rem !important; transition: all var(--id-transition) !important; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--id-orange) !important; color: var(--id-bg-primary) !important; box-shadow: var(--id-glow-orange) !important; } .woocommerce .woocommerce-message, .woocommerce .woocommerce-info { background: rgba(18, 18, 26, 0.9) !important; border-top-color: var(--id-cyan) !important; color: var(--id-text-primary) !important; } .woocommerce .woocommerce-error { background: rgba(18, 18, 26, 0.9) !important; border-top-color: var(--id-red) !important; color: var(--id-text-primary) !important; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { background: var(--id-bg-tertiary) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; color: var(--id-text-primary) !important; border-radius: var(--id-radius-md) !important; padding: 0.75rem 1rem !important; } .woocommerce form .form-row select option { background: var(--id-bg-secondary); color: var(--id-text-primary); } .woocommerce form .form-row input.input-text:focus { border-color: var(--id-cyan) !important; box-shadow: 0 0 0 3px var(--id-cyan-glow) !important; } .woocommerce form .form-row label { color: var(--id-text-secondary) !important; } .woocommerce table.shop_table { background: rgba(18, 18, 26, 0.8) !important; border-color: var(--id-border) !important; color: white !important; } .woocommerce table.shop_table td, .woocommerce table.shop_table th { border-color: var(--id-border) !important; color: var(--id-text-primary) !important; } /* ============================================================ WORDPRESS CONTENT ============================================================ */ .wp-block-post-content { color: var(--id-text-secondary); } .wp-block-post-content h2, .wp-block-post-content h3, .wp-block-post-content h4 { color: white; margin: var(--id-space-2xl) 0 var(--id-space-md); } .wp-block-post-content p { margin-bottom: var(--id-space-md); } .wp-block-post-content a { color: var(--id-cyan); text-decoration: underline; text-underline-offset: 3px; } .wp-block-post-content a:hover { color: var(--id-cyan-light); } .wp-block-post-content ul, .wp-block-post-content ol { margin: 0 0 var(--id-space-lg) var(--id-space-xl); color: var(--id-text-secondary); } .wp-block-post-content blockquote { border-left: 3px solid var(--id-cyan); padding: var(--id-space-md) var(--id-space-lg); background: rgba(0, 240, 255, 0.03); margin: var(--id-space-lg) 0; border-radius: 0 var(--id-radius-md) var(--id-radius-md) 0; } .wp-block-post-content code { font-family: var(--id-font-mono); font-size: 0.85em; padding: 0.15em 0.4em; background: rgba(0, 240, 255, 0.08); border: 1px solid rgba(0, 240, 255, 0.15); border-radius: 4px; color: var(--id-cyan); } .wp-block-post-content pre { background: rgba(10, 10, 15, 0.95); border: 1px solid rgba(0, 240, 255, 0.15); border-radius: var(--id-radius-lg); padding: var(--id-space-lg); overflow-x: auto; } /* ============================================================ UTILITIES ============================================================ */ .id-text-center { text-align: center; } .id-text-amber { color: var(--id-cyan); } .id-text-muted { color: var(--id-text-muted); } .id-mt-sm { margin-top: var(--id-space-sm); } .id-mt-md { margin-top: var(--id-space-md); } .id-mt-lg { margin-top: var(--id-space-lg); } .id-mt-xl { margin-top: var(--id-space-xl); } .id-mb-sm { margin-bottom: var(--id-space-sm); } .id-mb-md { margin-bottom: var(--id-space-md); } .id-mb-lg { margin-bottom: var(--id-space-lg); } .id-mb-xl { margin-bottom: var(--id-space-xl); } .id-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Scanline animation */ .id-scanlines::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--id-cyan), transparent); animation: scanline 3s linear infinite; } @keyframes scanline { 0% { transform: translateY(-100%); } 100% { transform: translateY(100vh); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ AUTH MODAL — Industrial Decoder Pro ============================================================ */ /* Full-screen backdrop — hidden by default via [hidden] attr */ .id-modal { display: none; position: fixed; inset: 0; z-index: 9000; align-items: center; justify-content: center; padding: 1.5rem; } /* JS removes [hidden] → we switch to flex */ .id-modal:not([hidden]) { display: flex; } /* Dim overlay */ .id-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; } /* Centered card — fixed square-ish dimensions */ .id-modal__panel { position: relative; z-index: 1; width: 100%; max-width: 420px; /* compact square feel */ background: var(--id-bg-secondary); border: 1px solid rgba(0, 240, 255, 0.22); border-radius: var(--id-radius-lg); overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.06), 0 0 60px rgba(0, 240, 255, 0.12), 0 32px 80px rgba(0, 0, 0, 0.65); animation: id-modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes id-modal-in { from { opacity: 0; transform: translateY(-18px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── Toolbar ────────────────────────────────────────────────── */ .id-modal__toolbar { display: flex; align-items: center; gap: var(--id-space-sm); padding: 9px var(--id-space-md); background: rgba(0, 240, 255, 0.04); border-bottom: 1px solid rgba(0, 240, 255, 0.09); } .id-modal__toolbar .id-decoder__toolbar-dots { flex-shrink: 0; } .id-modal__toolbar-title { flex: 1; font-family: var(--id-font-mono); font-size: 0.7rem; color: var(--id-text-muted); letter-spacing: 0.08em; text-align: center; } .id-modal__close { flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: rgba(255, 68, 68, 0.08); border: 1px solid rgba(255, 68, 68, 0.18); border-radius: 50%; color: #FF6060; font-size: 0.7rem; line-height: 1; cursor: pointer; transition: background var(--id-transition), color var(--id-transition); padding: 0; } .id-modal__close:hover { background: var(--id-red); border-color: var(--id-red); color: #fff; } /* ── Plan context badge ─────────────────────────────────────── */ .id-modal__plan-ctx { display: none; /* hidden by default */ align-items: center; gap: 8px; padding: 8px var(--id-space-lg); background: rgba(0, 240, 255, 0.06); border-bottom: 1px solid rgba(0, 240, 255, 0.12); } /* Show only when JS removes the [hidden] attribute */ .id-modal__plan-ctx:not([hidden]) { display: flex; } .id-modal__plan-icon { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: var(--id-cyan); border-radius: 4px; padding: 3px; } .id-modal__plan-icon img.emoji { width: 12px !important; height: 12px !important; margin: 0 !important; vertical-align: middle !important; filter: brightness(0) invert(1); } #id-modal-plan-text { font-family: var(--id-font-mono); font-size: 0.72rem; color: var(--id-cyan); letter-spacing: 0.04em; line-height: 1.4; } /* ── Tabs ───────────────────────────────────────────────────── */ .id-modal__tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--id-border); } .id-modal__tab { padding: 14px var(--id-space-md); font-family: var(--id-font-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--id-text-muted); background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: color var(--id-transition), background var(--id-transition), border-color var(--id-transition); position: relative; margin-bottom: -1px; } .id-modal__tab:hover { color: var(--id-text-primary); background: rgba(255, 255, 255, 0.02); } .id-modal__tab--active { color: var(--id-cyan); border-bottom-color: var(--id-cyan); background: rgba(0, 240, 255, 0.03); } /* ── Form body ──────────────────────────────────────────────── */ .id-modal__form { padding: var(--id-space-xl); } .id-modal__form[hidden] { display: none !important; } .id-modal__field { margin-bottom: var(--id-space-lg); } .id-modal__field:last-of-type { margin-bottom: 0; } /* Error bar */ .id-modal__error { display: flex; align-items: flex-start; gap: 8px; padding: 10px var(--id-space-md); background: rgba(255, 68, 68, 0.07); border: 1px solid rgba(255, 68, 68, 0.22); border-left-width: 3px; border-left-color: var(--id-red); border-radius: var(--id-radius-sm); color: #FF8080; font-family: var(--id-font-mono); font-size: 0.78rem; line-height: 1.5; margin-bottom: var(--id-space-md); } .id-modal__error[hidden] { display: none !important; } .id-modal__error::before { content: '!'; flex-shrink: 0; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 68, 68, 0.4); border-radius: 50%; font-size: 0.65rem; font-weight: 700; color: var(--id-red); margin-top: 1px; } /* Submit button — full-width, theme-consistent */ .id-modal__form .id-btn--primary { width: 100% !important; justify-content: center !important; padding: 0.9rem 1.5rem !important; font-family: var(--id-font-display) !important; font-size: 0.85rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; margin-top: var(--id-space-sm); } .id-modal__form .id-btn--primary:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* Forgot / helper link */ .id-modal__footer-link { text-align: center; margin-top: var(--id-space-md); font-family: var(--id-font-body); font-size: 0.78rem; } .id-modal__footer-link a { color: var(--id-text-muted); text-decoration: underline; text-underline-offset: 2px; transition: color var(--id-transition); } .id-modal__footer-link a:hover { color: var(--id-cyan); } /* T&C copy */ .id-modal__terms { text-align: center; margin-top: var(--id-space-md); font-family: var(--id-font-body); font-size: 0.72rem; color: var(--id-text-muted); line-height: 1.6; } .id-modal__terms a { color: var(--id-text-muted); text-decoration: underline; text-underline-offset: 2px; } .id-modal__terms a:hover { color: var(--id-cyan); } /* ── Mobile — bottom sheet on small screens ─────────────────── */ @media (max-width: 480px) { .id-modal { align-items: flex-end; padding: 0; } .id-modal__panel { max-width: 100%; border-radius: var(--id-radius-lg) var(--id-radius-lg) 0 0; border-left: none; border-right: none; border-bottom: none; } @keyframes id-modal-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } } /* ============================================================ WOOCOMMERCE WIDE CONTAINER ============================================================ */ .id-woo-section { padding-bottom: var(--id-space-4xl); } /* Ensure WooCommerce pages use full available width */ .id-woo-section .id-container--wide { /* No inner min-width; rely on viewport. The max is 1440px so on 1280-1440 screens it stretches to the viewport edge minus padding. */ } /* Breadcrumb */ .woocommerce-breadcrumb { font-family: var(--id-font-mono); font-size: 0.75rem; color: var(--id-text-muted); letter-spacing: 0.05em; margin-bottom: var(--id-space-xl) !important; } .woocommerce-breadcrumb a { color: var(--id-text-muted); } .woocommerce-breadcrumb a:hover { color: var(--id-cyan); } /* WooCommerce notices */ .woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: var(--id-radius-md) !important; font-family: var(--id-font-body) !important; margin-bottom: var(--id-space-xl) !important; } /* ============================================================ SUBSCRIPTION STATUS CARD — My Account Dashboard ============================================================ */ .id-sub-status-card { border: 1px solid var(--id-border); border-radius: var(--id-radius-lg); background: var(--id-bg-tertiary); overflow: hidden; margin-bottom: var(--id-space-xl); } .id-sub-status-card--active { border-color: rgba(0, 255, 136, 0.3); background: rgba(0, 255, 136, 0.03); } .id-sub-status-card--none { border-color: rgba(245, 158, 11, 0.25); background: rgba(245, 158, 11, 0.03); } /* Header row */ .id-sub-status-card__header { display: flex; align-items: flex-start; gap: var(--id-space-md); padding: var(--id-space-lg) var(--id-space-xl); position: relative; } /* Status icon circle */ .id-sub-status-card__indicator { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 255, 136, 0.12); border: 1px solid rgba(0, 255, 136, 0.3); color: var(--id-green); display: flex; align-items: center; justify-content: center; margin-top: 2px; } .id-sub-status-card__indicator--warn { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); color: var(--id-warning); } .id-sub-status-card__title { font-family: var(--id-font-display); font-size: 1rem; font-weight: 700; color: white; line-height: 1.3; } .id-sub-status-card__plan { font-family: var(--id-font-mono); font-size: 0.75rem; color: var(--id-green); margin-top: 3px; letter-spacing: 0.03em; } /* Animated pulse dot top-right */ .id-sub-status-card__pulse { position: absolute; top: var(--id-space-lg); right: var(--id-space-xl); width: 8px; height: 8px; border-radius: 50%; background: var(--id-green); box-shadow: 0 0 8px var(--id-green); animation: led-pulse 2.5s ease-in-out infinite; } /* Meta row — next billing / expiry */ .id-sub-status-card__meta { display: flex; gap: var(--id-space-xl); padding: var(--id-space-md) var(--id-space-xl); border-top: 1px solid rgba(255,255,255,0.05); background: rgba(0, 0, 0, 0.15); flex-wrap: wrap; } .id-sub-status-card__meta-item { display: flex; flex-direction: column; gap: 3px; } .id-sub-status-card__meta-label { font-family: var(--id-font-mono); font-size: 0.62rem; color: var(--id-text-muted); text-transform: uppercase; letter-spacing: 0.1em; } .id-sub-status-card__meta-val { font-family: var(--id-font-display); font-size: 0.88rem; font-weight: 600; color: white; } /* Action buttons row */ .id-sub-status-card__actions { display: flex; align-items: center; gap: var(--id-space-sm); padding: var(--id-space-md) var(--id-space-xl) var(--id-space-lg); flex-wrap: wrap; } /* Cancel link — small, destructive */ .id-sub-status-card__cancel { margin-left: auto; font-family: var(--id-font-mono); font-size: 0.72rem; color: var(--id-text-muted); text-decoration: underline; text-underline-offset: 2px; transition: color var(--id-transition); cursor: pointer; } .id-sub-status-card__cancel:hover { color: var(--id-red); } @media (max-width: 600px) { .id-sub-status-card__actions { flex-direction: column; align-items: stretch; } .id-sub-status-card__actions .id-btn { justify-content: center; } .id-sub-status-card__cancel { margin-left: 0; text-align: center; } } /* ============================================================ CHECKOUT PAGE — Terminal aesthetic matching auth modal ============================================================ */ /* ── Page layout ──────────────────────────────────────────── */ .woocommerce-checkout #page, .woocommerce-checkout .site-content, .woocommerce-checkout .entry-content, .woocommerce-checkout .woocommerce { max-width: 1100px; margin: 0 auto; padding: var(--id-space-xl) var(--id-space-md); } .woocommerce-checkout h1, .woocommerce-checkout h2, .woocommerce-checkout h3 { font-family: var(--id-font-display); text-transform: uppercase; letter-spacing: 0.08em; color: var(--id-text-primary); } /* Two-column grid: billing on left, order summary on right */ .woocommerce-checkout form.woocommerce-checkout { display: grid; grid-template-columns: 1fr 400px; grid-template-areas: "notices notices" "billing summary" "payment payment-full"; gap: var(--id-space-xl); align-items: start; } .woocommerce-checkout .woocommerce-notices-wrapper { grid-area: notices; } .woocommerce-checkout #customer_details { grid-area: billing; } .woocommerce-checkout #order_review { grid-area: summary; } .woocommerce-checkout #payment { grid-column: 1 / -1; } @media (max-width: 860px) { .woocommerce-checkout form.woocommerce-checkout { grid-template-columns: 1fr; grid-template-areas: "notices" "billing" "summary" "payment-full"; } .woocommerce-checkout #payment { grid-column: 1; } } /* ── Panel card — matches .id-modal__panel ────────────────── */ .woocommerce-checkout #customer_details .woocommerce-billing-fields, .woocommerce-checkout #order_review, .woocommerce-checkout #payment { background: var(--id-bg-secondary); border: 1px solid rgba(0, 240, 255, 0.18); border-radius: var(--id-radius-lg); overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.05), 0 0 40px rgba(0, 240, 255, 0.07), 0 16px 48px rgba(0, 0, 0, 0.5); } /* ── Terminal toolbar — same as modal toolbar ─────────────── */ .woocommerce-checkout #customer_details .woocommerce-billing-fields::before, .woocommerce-checkout #order_review::before, .woocommerce-checkout #payment::before { content: ''; display: block; height: 38px; background: rgba(0, 240, 255, 0.04); border-bottom: 1px solid rgba(0, 240, 255, 0.09); } /* Fake toolbar using a wrapper label overlay */ .woocommerce-checkout .id-co-toolbar { display: flex; align-items: center; gap: var(--id-space-sm); padding: 9px var(--id-space-md); background: rgba(0, 240, 255, 0.04); border-bottom: 1px solid rgba(0, 240, 255, 0.09); margin: 0; } .woocommerce-checkout .id-co-toolbar__dots { display: flex; gap: 5px; flex-shrink: 0; } .woocommerce-checkout .id-co-toolbar__dots span { width: 10px; height: 10px; border-radius: 50%; display: block; } .woocommerce-checkout .id-co-toolbar__dots span:nth-child(1) { background: #FF5F57; } .woocommerce-checkout .id-co-toolbar__dots span:nth-child(2) { background: #FEBC2E; } .woocommerce-checkout .id-co-toolbar__dots span:nth-child(3) { background: #28C840; } .woocommerce-checkout .id-co-toolbar__title { flex: 1; font-family: var(--id-font-mono); font-size: 0.7rem; color: var(--id-text-muted); letter-spacing: 0.08em; text-align: center; } /* ── Section headings — match toolbar style ───────────────── */ .woocommerce-checkout .woocommerce-billing-fields h3, .woocommerce-checkout #order_review h3, .woocommerce-checkout #order_review_heading { display: none; /* replaced by toolbar */ } /* ── Panel inner padding ──────────────────────────────────── */ .woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout #order_review .woocommerce-checkout-review-order-table, .woocommerce-checkout #order_review .woocommerce-checkout-payment { padding: var(--id-space-xl); } /* ── Form fields — match .id-decoder__input ───────────────── */ .woocommerce-checkout .form-row { margin-bottom: var(--id-space-lg) !important; } .woocommerce-checkout .form-row label { font-family: var(--id-font-mono) !important; font-size: 0.68rem !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--id-text-muted) !important; margin-bottom: 0.45rem !important; display: block !important; } .woocommerce-checkout .form-row .required { color: var(--id-cyan) !important; } .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row select, .woocommerce-checkout .form-row textarea { width: 100% !important; background: var(--id-bg-tertiary) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: var(--id-radius-sm) !important; padding: 0.75rem 1rem !important; font-family: var(--id-font-body) !important; font-size: 0.88rem !important; color: var(--id-text-primary) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; outline: none !important; -webkit-appearance: none !important; appearance: none !important; box-shadow: none !important; } .woocommerce-checkout .form-row select option { background: var(--id-bg-secondary) !important; color: var(--id-text-primary) !important; } .woocommerce-checkout .form-row input.input-text:focus, .woocommerce-checkout .form-row select:focus, .woocommerce-checkout .form-row textarea:focus { border-color: var(--id-cyan) !important; box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.1) !important; } .woocommerce-checkout .form-row input.input-text::placeholder { color: var(--id-text-muted) !important; } /* Select arrow */ .woocommerce-checkout .form-row select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.35)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 0.9rem center !important; padding-right: 2.2rem !important; cursor: pointer !important; } /* Inline col layout (first name / last name side by side) */ .woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { width: calc(50% - 0.5rem) !important; display: inline-block !important; vertical-align: top !important; } .woocommerce-checkout .form-row-first { margin-right: 1rem !important; } /* Validation states */ .woocommerce-checkout .form-row.woocommerce-invalid input.input-text, .woocommerce-checkout .form-row.woocommerce-invalid select { border-color: var(--id-red) !important; box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.12) !important; } .woocommerce-checkout .form-row.woocommerce-validated input.input-text { border-color: var(--id-green) !important; } .woocommerce-checkout .woocommerce-invalid-required-field .input-text, .woocommerce-checkout .woocommerce-invalid-email .input-text { border-color: var(--id-red) !important; } /* ── Order review table ───────────────────────────────────── */ .woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; font-family: var(--id-font-body); font-size: 0.88rem; } .woocommerce-checkout-review-order-table th { font-family: var(--id-font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--id-text-muted); padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .woocommerce-checkout-review-order-table td { padding: 0.75rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); color: var(--id-text-secondary); vertical-align: middle; } .woocommerce-checkout-review-order-table .product-name { color: var(--id-text-primary); font-weight: 500; } .woocommerce-checkout-review-order-table .product-total, .woocommerce-checkout-review-order-table .order-total td, .woocommerce-checkout-review-order-table .order-total th { color: var(--id-cyan) !important; font-family: var(--id-font-display) !important; font-weight: 700; font-size: 1rem; } .woocommerce-checkout-review-order-table .cart-subtotal td, .woocommerce-checkout-review-order-table .tax-rate td { color: var(--id-text-muted); font-size: 0.82rem; } /* ── Payment section ──────────────────────────────────────── */ .woocommerce-checkout #payment { padding: 0; } .woocommerce-checkout #payment .woocommerce-checkout-payment { padding: var(--id-space-xl); } .woocommerce-checkout #payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 var(--id-space-lg); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--id-radius-md); overflow: hidden; } .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:last-child { border-bottom: none; } .woocommerce-checkout #payment ul.payment_methods label { display: flex !important; align-items: center !important; gap: 0.65rem !important; padding: 0.9rem var(--id-space-md) !important; cursor: pointer !important; font-family: var(--id-font-display) !important; font-size: 0.82rem !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: var(--id-text-secondary) !important; background: transparent !important; transition: background 0.15s ease, color 0.15s ease !important; margin: 0 !important; } .woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:checked + label, .woocommerce-checkout #payment ul.payment_methods label:hover { background: rgba(0, 240, 255, 0.05) !important; color: var(--id-cyan) !important; } .woocommerce-checkout #payment ul.payment_methods input[type="radio"] { accent-color: var(--id-cyan); width: 15px; height: 15px; flex-shrink: 0; } /* Payment method description / extra fields */ .woocommerce-checkout #payment .payment_box { background: rgba(0, 0, 0, 0.2) !important; border-top: 1px solid rgba(255, 255, 255, 0.05) !important; padding: var(--id-space-md) !important; font-size: 0.82rem !important; color: var(--id-text-muted) !important; margin: 0 !important; } .woocommerce-checkout #payment .payment_box p { margin: 0; } /* ── Place Order button — match .id-btn--primary ─────────── */ .woocommerce-checkout #payment #place_order { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; width: 100% !important; padding: 1rem 2rem !important; background: var(--id-cyan) !important; color: var(--id-bg-primary) !important; border: none !important; border-radius: var(--id-radius-md) !important; font-family: var(--id-font-display) !important; font-size: 1rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; cursor: pointer !important; transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important; box-shadow: 0 0 20px rgba(0, 240, 255, 0.2) !important; margin-top: 0 !important; } .woocommerce-checkout #payment #place_order:hover { background: var(--id-cyan-light) !important; box-shadow: 0 0 30px rgba(0, 240, 255, 0.35) !important; transform: translateY(-1px) !important; } .woocommerce-checkout #payment #place_order:active { transform: translateY(0) !important; } /* ── Notices / error messages ─────────────────────────────── */ .woocommerce-checkout .woocommerce-error, .woocommerce-checkout .woocommerce-message, .woocommerce-checkout .woocommerce-info { background: rgba(255, 68, 68, 0.06) !important; border-left: 3px solid var(--id-red) !important; border-radius: var(--id-radius-sm) !important; padding: 0.85rem var(--id-space-md) !important; font-family: var(--id-font-mono) !important; font-size: 0.8rem !important; color: #FF8080 !important; list-style: none !important; margin-bottom: var(--id-space-md) !important; } .woocommerce-checkout .woocommerce-message, .woocommerce-checkout .woocommerce-info { background: rgba(0, 240, 255, 0.05) !important; border-left-color: var(--id-cyan) !important; color: var(--id-cyan) !important; } /* ── Privacy policy copy ──────────────────────────────────── */ .woocommerce-checkout .woocommerce-privacy-policy-text { font-size: 0.72rem; color: var(--id-text-muted); font-family: var(--id-font-body); margin-top: var(--id-space-md); text-align: center; line-height: 1.6; } .woocommerce-checkout .woocommerce-privacy-policy-text a { color: rgba(0, 240, 255, 0.7); text-decoration: underline; } /* ── Loading spinner overlay ──────────────────────────────── */ .woocommerce-checkout form.processing::after { background: rgba(10, 10, 15, 0.7) !important; } /* ============================================================ PREMIUM DECODER v2.0 — DARK DROPDOWN FIX (ALL SELECTS) ============================================================ */ select, .woocommerce select, .woocommerce form select, .woocommerce-checkout select, .woocommerce-cart select, .woocommerce .woocommerce-ordering select, .woocommerce-MyAccount-content select { background-color: var(--id-bg-secondary) !important; color: var(--id-text-primary) !important; } select option, .woocommerce select option, .woocommerce form select option { background: var(--id-bg-secondary); color: var(--id-text-primary); padding: 8px 12px; } /* ============================================================ CONFIDENCE METER — Animated 0-100 bar ============================================================ */ .id-confidence-meter { display: flex; align-items: center; gap: 10px; margin-bottom: var(--id-space-md); } .id-confidence-meter__track { flex: 1; height: 6px; background: rgba(255, 255, 255, 0.06); border-radius: var(--id-radius-full); overflow: hidden; position: relative; } .id-confidence-meter__fill { height: 100%; border-radius: var(--id-radius-full); transition: width 1.2s cubic-bezier(0.23, 1, 0.32, 1); position: relative; } .id-confidence-meter__fill::after { content: ''; position: absolute; right: 0; top: -2px; width: 10px; height: 10px; border-radius: 50%; background: inherit; box-shadow: 0 0 8px currentColor; } .id-confidence-meter__label { font-family: var(--id-font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; min-width: 48px; text-align: right; } .id-confidence--high .id-confidence-meter__fill { background: var(--id-green); color: var(--id-green); } .id-confidence--high .id-confidence-meter__label { color: var(--id-green); } .id-confidence--medium .id-confidence-meter__fill { background: var(--id-cyan); color: var(--id-cyan); } .id-confidence--medium .id-confidence-meter__label { color: var(--id-cyan); } .id-confidence--low .id-confidence-meter__fill { background: var(--id-warning); color: var(--id-warning); } .id-confidence--low .id-confidence-meter__label { color: var(--id-warning); } /* ============================================================ ANCHOR SCORE BADGE ============================================================ */ .id-anchor-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-family: var(--id-font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: var(--id-radius-full); border: 1px solid; } .id-anchor-badge--strong { color: var(--id-green); border-color: rgba(0,255,136,0.3); background: var(--id-green-glow); } .id-anchor-badge--good { color: var(--id-cyan); border-color: rgba(0,240,255,0.3); background: var(--id-cyan-glow); } .id-anchor-badge--mixed { color: var(--id-warning); border-color: rgba(245,158,11,0.25); background: var(--id-warning-glow); } .id-anchor-badge--weak { color: var(--id-text-muted); border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); } /* ============================================================ REVIEW STATUS BADGES (consensus) ============================================================ */ .id-review-badge { margin-left: auto; font-family: var(--id-font-mono); font-size: 0.6rem; padding: 2px 8px; border-radius: var(--id-radius-full); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .id-review-badge--cross-checked { background: var(--id-green-glow); border: 1px solid rgba(0,255,136,0.3); color: var(--id-green); } .id-review-badge--needs-confirmation { background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.25); color: #F59E0B; } .id-review-badge--verified { background: var(--id-green-glow); border: 1px solid rgba(0,255,136,0.3); color: var(--id-green); } /* ============================================================ SOLUTION HEADER (Solution 1, 2, 3) ============================================================ */ .id-solution-header { display: flex; align-items: center; gap: 10px; margin-bottom: var(--id-space-md); } .id-solution-header__num { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-family: var(--id-font-display); font-weight: 700; font-size: 0.9rem; color: var(--id-bg-primary); } .id-solution-header__num--1 { background: var(--id-cyan); } .id-solution-header__num--2 { background: var(--id-orange); } .id-solution-header__num--3 { background: var(--id-green); } .id-solution-header__num--4 { background: #A78BFA; } .id-solution-header__label { font-family: var(--id-font-display); font-size: 1.1rem; font-weight: 700; color: white; letter-spacing: 0.03em; text-transform: uppercase; } /* ============================================================ RATING UI ============================================================ */ .id-rating { display: flex; align-items: center; gap: 12px; margin-top: var(--id-space-lg); padding-top: var(--id-space-md); border-top: 1px solid var(--id-border); } .id-rating__stars { display: flex; gap: 4px; } .id-rating__star { width: 24px; height: 24px; cursor: pointer; color: rgba(255,255,255,0.15); transition: color 0.15s ease, transform 0.15s ease; } .id-rating__star:hover, .id-rating__star.is-active { color: var(--id-warning); transform: scale(1.15); } .id-rating__star svg { width: 100%; height: 100%; fill: currentColor; } .id-rating__label { font-family: var(--id-font-mono); font-size: 0.7rem; color: var(--id-text-muted); letter-spacing: 0.06em; } .id-rating__feedback { width: 100%; margin-top: var(--id-space-sm); padding: 8px 12px; font-family: var(--id-font-mono); font-size: 0.8rem; color: var(--id-text-primary); background: var(--id-bg-tertiary); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--id-radius-sm, 8px); outline: none; resize: vertical; min-height: 40px; max-height: 120px; } .id-rating__feedback:focus { border-color: var(--id-cyan); } /* ============================================================ SEARCH HISTORY PANEL ============================================================ */ .id-history { margin-top: var(--id-space-md); padding: 10px 14px; background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--id-radius-md); } .id-history__title { font-family: var(--id-font-mono); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--id-text-muted); margin-bottom: var(--id-space-sm); } .id-history__list { display: flex; flex-wrap: wrap; gap: 6px; } .id-history__item { padding: 4px 10px; font-family: var(--id-font-mono); font-size: 0.75rem; color: var(--id-cyan); background: rgba(0,240,255,0.06); border: 1px solid rgba(0,240,255,0.12); border-radius: var(--id-radius-full); cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .id-history__item:hover { background: rgba(0,240,255,0.12); border-color: rgba(0,240,255,0.3); } .id-history__item__mfr { color: var(--id-text-muted); font-size: 0.65rem; margin-left: 4px; } /* ============================================================ PRINT BUTTON & PRINT STYLES ============================================================ */ .id-print-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-family: var(--id-font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; color: var(--id-text-muted); background: transparent; border: 1px solid rgba(255,255,255,0.1); border-radius: var(--id-radius-full); cursor: pointer; transition: all 0.15s ease; } .id-print-btn:hover { color: var(--id-cyan); border-color: var(--id-cyan); } @media print { /* Hide non-content elements */ .id-header, .id-footer, .id-topbar, .id-nav, .id-hero, .id-account-sidebar, .id-account-page__header, .id-decoder__toolbar, .id-quota-bar, .id-quota-bar__track, .id-decoder__input-group, .id-decoder__row, #id-decode-btn, #id-family-input, .id-print-btn, .id-rating, .id-history, .id-related-btn, .id-doc-links, .id-gate, #id-decoder-gate, .id-solution-header, .id-cta-section, .id-features-section, #pricing, nav, aside, footer, header { display: none !important; } /* Reset ALL wrappers — zero padding/margin, white background */ *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; } body, html { background: white !important; color: #1a1a1a !important; margin: 0 !important; padding: 0 !important; } .id-decoder__console, .id-decoder__body, .id-account-content, .id-account-layout, .id-account-page, .id-page__inner, .site-main, main, .entry-content { background: white !important; color: #1a1a1a !important; border: none !important; padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; display: block !important; } .id-decoder__console::before { display: none !important; } .id-account-layout { grid-template-columns: 1fr !important; } /* Results area */ .id-decoder__result { display: block !important; padding: 0 !important; margin: 0 !important; border: none !important; background: white !important; } .id-decoder__result-item { background: white !important; border: none !important; margin-bottom: 20px !important; page-break-inside: avoid; } .id-decoder__result *, .id-decoder__result-item * { color: #1a1a1a !important; background: transparent !important; } .id-decoder__result h4 { color: #000 !important; font-size: 14pt !important; } .id-decoder__result .id-label { color: #555 !important; } .id-decoder__result .id-readout { color: #0055aa !important; } .id-decoder__result-header { border-bottom: 2px solid #ccc !important; padding-bottom: 8px !important; } /* Severity badges — force print colors */ .id-decoder__severity { print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; border: 1px solid !important; padding: 2px 8px !important; } .id-decoder__severity--critical { color: #cc0000 !important; border-color: #cc0000 !important; } .id-decoder__severity--warning { color: #cc8800 !important; border-color: #cc8800 !important; } .id-decoder__severity--info { color: #0055aa !important; border-color: #0055aa !important; } .id-decoder__severity--ok { color: #008844 !important; border-color: #008844 !important; } /* Repair badge */ .id-repair-badge { border: 1px solid #666 !important; } .id-repair-time { color: #666 !important; } /* Numbered lists — readable on paper */ .id-decoder__result div[style*="rgba(10, 10, 15"] { background: #f8f8f8 !important; border: 1px solid #ddd !important; } .id-decoder__result div[style*="border-left: 3px solid #FF4444"] { border-left: 3px solid #cc0000 !important; } .id-decoder__result div[style*="border-left: 3px solid #F59E0B"] { border-left: 3px solid #cc8800 !important; } /* Measurement cards */ .id-measurement-card { border: 1px solid #ccc !important; page-break-inside: avoid; } .id-measurement-card__header { background: #f0f0f0 !important; color: #0055aa !important; } .id-measurement-card__value { color: #008844 !important; font-weight: 700 !important; } .id-measurement-card__safety { color: #cc8800 !important; background: #fff8ee !important; } /* Meta badges */ .id-review-badge, .id-meta-badge, .id-anchor-badge, .id-confidence-meter { border-color: #999 !important; } .id-confidence-meter__track { background: #eee !important; } .id-confidence-meter__fill { print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; } /* Safety warnings box */ .id-decoder__result div[style*="id-red-glow"] { background: #fff0f0 !important; border: 1px solid #cc0000 !important; } /* Page setup */ @page { margin: 15mm; } } /* ============================================================ FAMILY / CANONICAL META BADGES ============================================================ */ .id-meta-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--id-space-md); } .id-meta-badge { padding: 2px 8px; font-family: var(--id-font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--id-text-muted); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--id-radius-full); } /* ============================================================ SPINNER OVERRIDE (ensure it works everywhere) ============================================================ */ .id-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(10, 10, 15, 0.25); border-top-color: rgba(10, 10, 15, 0.9); display: inline-block; animation: idSpin 0.8s linear infinite; } @keyframes idSpin { to { transform: rotate(360deg); } } /* ============================================================ QUOTA BAR (enhanced) ============================================================ */ .id-quota-bar { margin-bottom: var(--id-space-lg); } .id-quota-bar__track { height: 4px; background: rgba(255,255,255,0.06); border-radius: var(--id-radius-full); overflow: hidden; } .id-quota-bar__fill { height: 100%; border-radius: var(--id-radius-full); transition: width 0.6s ease, background 0.3s ease; } .id-quota-bar__label { display: block; margin-top: 4px; font-family: var(--id-font-mono); font-size: 0.65rem; color: var(--id-text-muted); letter-spacing: 0.04em; } /* ============================================================ REPAIR COMPLEXITY INDICATOR ============================================================ */ .id-repair-complexity { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--id-space-md); } .id-repair-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-family: var(--id-font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; border-radius: var(--id-radius-full); } .id-repair-time { font-family: var(--id-font-mono); font-size: 0.75rem; color: var(--id-text-muted); letter-spacing: 0.04em; } .id-tools-list { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: var(--id-space-md); } .id-tool-chip { padding: 3px 10px; font-family: var(--id-font-mono); font-size: 0.7rem; color: var(--id-text-secondary); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--id-radius-full); } /* ============================================================ MEASUREMENT REFERENCE CARDS ============================================================ */ .id-measurements { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .id-measurement-card { background: rgba(0, 240, 255, 0.03); border: 1px solid rgba(0, 240, 255, 0.1); border-radius: var(--id-radius-md); overflow: hidden; } .id-measurement-card__header { padding: 8px 14px; font-family: var(--id-font-mono); font-size: 0.78rem; font-weight: 700; color: var(--id-cyan); background: rgba(0, 240, 255, 0.06); border-bottom: 1px solid rgba(0, 240, 255, 0.08); letter-spacing: 0.03em; } .id-measurement-card__row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 14px; font-family: var(--id-font-mono); font-size: 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.03); } .id-measurement-card__row:last-of-type { border-bottom: none; } .id-measurement-card__key { color: var(--id-text-muted); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.65rem; flex-shrink: 0; padding-top: 1px; } .id-measurement-card__row span:last-child { color: var(--id-text-primary); text-align: right; } .id-measurement-card__value { color: var(--id-green) !important; font-weight: 600; } .id-measurement-card__safety { padding: 6px 14px; font-family: var(--id-font-mono); font-size: 0.7rem; color: var(--id-warning); background: rgba(245, 158, 11, 0.05); border-top: 1px solid rgba(245, 158, 11, 0.1); } /* ============================================================ DOCUMENTATION LINKS ============================================================ */ .id-doc-links { margin-top: var(--id-space-xl); padding-top: var(--id-space-lg); border-top: 1px solid var(--id-border); } .id-doc-link { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-top: 6px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--id-radius-md); text-decoration: none; transition: all 0.2s ease; } .id-doc-link:hover { background: rgba(0, 240, 255, 0.04); border-color: rgba(0, 240, 255, 0.2); } .id-doc-link__icon { font-size: 1.2rem; flex-shrink: 0; } .id-doc-link__text { flex: 1; font-family: var(--id-font-mono); font-size: 0.82rem; color: var(--id-cyan); letter-spacing: 0.02em; } .id-doc-link:hover .id-doc-link__text { color: var(--id-cyan-light, #33F5FF); } .id-doc-link__arrow { font-family: var(--id-font-mono); font-size: 1rem; color: var(--id-text-muted); transition: transform 0.2s ease; } .id-doc-link:hover .id-doc-link__arrow { color: var(--id-cyan); transform: translateX(4px); } /* Print: hide doc links */ @media print { .id-doc-links { display: none !important; } } /* ============================================================ ENGINE ERROR STATUS (admin debug) ============================================================ */ .id-engine-errors { margin-top: var(--id-space-lg); padding: 10px 14px; background: rgba(245, 158, 11, 0.05); border: 1px solid rgba(245, 158, 11, 0.15); border-radius: var(--id-radius-md); } .id-engine-error { font-family: var(--id-font-mono); font-size: 0.72rem; color: var(--id-text-muted); padding: 3px 0; line-height: 1.6; } .id-engine-error strong { color: var(--id-warning); } @media print { .id-engine-errors { display: none !important; } } /* ── Combobox (select + text input) ── */ .id-combobox { position: relative; } .id-combobox__text { font-size: 0.8rem; opacity: 0.8; } .id-combobox__text:focus { opacity: 1; } .id-combobox__text::placeholder { font-size: 0.75rem; } /* ── Social Proof Counters ── */ .id-counter { padding: var(--id-space-md); } .id-counter__icon { display: block; font-size: 1.8rem; margin-bottom: var(--id-space-xs); } .id-counter__value { display: block; font-size: 2rem; font-weight: 800; color: var(--id-accent); letter-spacing: -0.02em; } .id-counter__label { display: block; font-size: 0.8rem; color: var(--id-text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; } /* ── Testimonials ── */ .id-testimonials .id-panel { display: flex; flex-direction: column; min-height: 200px; } @media (max-width: 768px) { .id-social-proof .id-grid--4 { grid-template-columns: repeat(2, 1fr); } .id-counter__value { font-size: 1.5rem; } } /* ── Decode Status Card — Glassmorphism Pipeline ── */ .id-status-card { margin-top: var(--id-space-md); animation: idStatusSlideIn 0.4s ease-out; } .id-status-card[hidden] { display: none; } @keyframes idStatusSlideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .id-status-card__inner { background: rgba(15, 15, 30, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--id-radius-lg, 12px); padding: 16px 20px; position: relative; overflow: hidden; } .id-status-card__inner::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(245,158,11,0.04), transparent); animation: idStatusSweep 3s ease-in-out infinite; } @keyframes idStatusSweep { 0% { left: -50%; } 100% { left: 150%; } } .id-status-card__pipeline { display: flex; flex-direction: column; gap: 6px; } .id-status-step { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; transition: all 0.5s ease; opacity: 0.3; transform: translateX(-8px); } .id-status-step.is-active { opacity: 1; transform: translateX(0); background: rgba(245, 158, 11, 0.06); border-left: 2px solid var(--id-accent); } .id-status-step.is-done { opacity: 0.6; transform: translateX(0); } .id-status-step.is-done .id-status-step__indicator::after { content: '✓'; color: #00FF88; font-size: 0.7rem; } .id-status-step__icon { font-size: 1.1rem; width: 28px; text-align: center; flex-shrink: 0; } .id-status-step.is-active .id-status-step__icon { animation: idIconPulse 1.5s ease-in-out infinite; } @keyframes idIconPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.8; } } .id-status-step__info { flex: 1; min-width: 0; } .id-status-step__title { display: block; font-size: 0.82rem; font-weight: 600; color: var(--id-text); letter-spacing: 0.01em; } .id-status-step__desc { display: block; font-size: 0.68rem; color: var(--id-text-muted); margin-top: 1px; } .id-status-step.is-active .id-status-step__title { color: var(--id-accent); } .id-status-step__indicator { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .id-status-step.is-active .id-status-step__indicator::after { content: ''; width: 8px; height: 8px; border: 2px solid var(--id-accent); border-top-color: transparent; border-radius: 50%; animation: idSpinSmall 0.8s linear infinite; } @keyframes idSpinSmall { to { transform: rotate(360deg); } } /* Progress bar */ .id-status-card__progress { height: 2px; background: rgba(255, 255, 255, 0.05); border-radius: 1px; margin-top: 12px; overflow: hidden; } .id-status-card__bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--id-accent), var(--id-cyan)); border-radius: 1px; transition: width 1s ease; } @media (max-width: 640px) { .id-status-step__desc { display: none; } .id-status-step { padding: 6px 8px; gap: 8px; } .id-status-step__icon { font-size: 0.95rem; } .id-status-step__title { font-size: 0.78rem; } } /* ── Process Visualization Card (Glassmorphism) ── */ .id-process-card { margin-top: var(--id-space-md); animation: id-process-appear 0.4s ease-out; perspective: 1000px; } .id-process-card--done { animation: id-process-fade 0.6s ease-out forwards; } .id-process-card__inner { background: rgba(15, 15, 30, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(245, 158, 11, 0.15); border-radius: 12px; padding: 16px 20px; position: relative; overflow: hidden; box-shadow: 0 0 30px rgba(245, 158, 11, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .id-process-card__inner::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient( from 0deg, transparent 0%, rgba(245, 158, 11, 0.03) 25%, transparent 50%, rgba(79, 195, 247, 0.03) 75%, transparent 100% ); animation: id-process-rotate 8s linear infinite; pointer-events: none; } .id-process-card__header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; position: relative; z-index: 1; } .id-process-card__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--id-accent); box-shadow: 0 0 8px var(--id-accent); animation: id-pulse-glow 1.5s ease-in-out infinite; } .id-process-card__title { font-size: 0.78rem; font-weight: 600; color: var(--id-accent); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--id-font-mono); } .id-process-card__steps { position: relative; z-index: 1; min-height: 60px; } .id-process-step { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 0.82rem; transition: all 0.3s ease; } .id-process-step__icon { flex-shrink: 0; font-size: 1rem; width: 24px; text-align: center; } .id-process-step__text { color: var(--id-text-secondary); font-family: var(--id-font-mono); font-size: 0.78rem; } .id-process-step__dots { margin-left: 2px; } .id-process-step__dots span { animation: id-dot-blink 1.4s infinite; opacity: 0; color: var(--id-accent); font-weight: 700; } .id-process-step__dots span:nth-child(2) { animation-delay: 0.2s; } .id-process-step__dots span:nth-child(3) { animation-delay: 0.4s; } .id-process-step--active .id-process-step__text { color: var(--id-text); } .id-process-step--active .id-process-step__icon { animation: id-icon-pulse 0.6s ease-out; } .id-process-step--done { opacity: 0.4; } .id-process-step--done .id-process-step__dots { display: none; } .id-process-step--done .id-process-step__text::after { content: ' ✓'; color: #00FF88; font-size: 0.7rem; } .id-process-step--complete .id-process-step__text { color: #00FF88; font-weight: 600; } /* Progress bar */ .id-process-card__bar { height: 2px; background: rgba(255, 255, 255, 0.06); border-radius: 2px; margin-top: 12px; overflow: hidden; position: relative; z-index: 1; } .id-process-card__bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--id-accent), var(--id-cyan)); border-radius: 2px; transition: width 1.5s ease-out; position: relative; } .id-process-card__bar-fill::after { content: ''; position: absolute; right: 0; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--id-cyan); box-shadow: 0 0 10px var(--id-cyan); } /* Animations */ @keyframes id-process-appear { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes id-process-fade { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.96) translateY(-5px); } } @keyframes id-process-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes id-pulse-glow { 0%, 100% { opacity: 1; box-shadow: 0 0 4px var(--id-accent); } 50% { opacity: 0.5; box-shadow: 0 0 12px var(--id-accent), 0 0 24px rgba(245,158,11,0.3); } } @keyframes id-dot-blink { 0%, 20% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes id-icon-pulse { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } } @media (max-width: 640px) { .id-process-card__inner { padding: 12px 14px; } .id-process-step__text { font-size: 0.72rem; } }