/* * AI SiteCrafter — frontend design system v2.3 * * Loaded on every page when the plugin is active. Design tokens (CSS custom * properties) + utility classes the AI uses inside Gutenberg block markup. * Override tokens via the active "vibe" or set_custom_css to retheme an * entire site without changing class names. */ :root { /* Colors — overridden per-vibe */ --aisc-color-bg: #ffffff; --aisc-color-bg-soft: #f8fafc; --aisc-color-fg: #0f172a; --aisc-color-muted: #475569; --aisc-color-faint: #94a3b8; --aisc-color-accent: #6366f1; --aisc-color-accent-2: #a855f7; --aisc-color-accent-fg: #ffffff; --aisc-color-card: #ffffff; --aisc-color-border: rgba(15, 23, 42, 0.08); --aisc-color-border-strong: rgba(15, 23, 42, 0.18); --aisc-color-dark-bg: #0b1020; --aisc-color-dark-fg: #f8fafc; --aisc-color-dark-muted: #cbd5e1; /* Typography */ --aisc-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Noto Sans Hebrew", sans-serif; --aisc-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Noto Sans Hebrew", sans-serif; --aisc-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Geometry */ --aisc-radius-sm: 10px; --aisc-radius: 16px; --aisc-radius-lg: 24px; --aisc-radius-pill: 999px; /* Shadows */ --aisc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --aisc-shadow: 0 12px 36px -16px rgba(15, 23, 42, 0.20); --aisc-shadow-lg: 0 30px 70px -25px rgba(15, 23, 42, 0.32); --aisc-shadow-glow: 0 0 0 1px rgba(99, 102, 241, 0.15), 0 20px 60px -20px rgba(99, 102, 241, 0.45); /* Layout */ --aisc-section-y: clamp(48px, 7vw, 96px); --aisc-container: 1180px; --aisc-container-narrow: 760px; /* Gradients */ --aisc-grad: linear-gradient(135deg, var(--aisc-color-accent) 0%, var(--aisc-color-accent-2) 100%); --aisc-grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--aisc-color-accent) 12%, transparent) 0%, color-mix(in srgb, var(--aisc-color-accent-2) 12%, transparent) 100%); } /* Theme isolation — when content is wrapped in .aisc-page or .aisc-section, the design system fully owns typography & spacing inside. Twenty-Twenty-Five and other block themes inject competing CSS — neutralise it. */ .aisc-section, .aisc-page { font-family: var(--aisc-font-body); color: var(--aisc-color-fg); font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; } .aisc-section h1, .aisc-section h2, .aisc-section h3, .aisc-section h4, .aisc-page h1, .aisc-page h2, .aisc-page h3, .aisc-page h4 { font-family: var(--aisc-font-display); color: inherit; } /* Sections ------------------------------------------------------------- */ .aisc-section { position: relative; padding-block: var(--aisc-section-y); padding-inline: clamp(20px, 5vw, 56px); background: var(--aisc-color-bg); overflow: hidden; } .aisc-section--soft { background: var(--aisc-color-bg-soft); } .aisc-section--gradient { background: var(--aisc-grad-soft); } .aisc-section--dark { background: var(--aisc-color-dark-bg); color: var(--aisc-color-dark-fg); } .aisc-section--dark .aisc-eyebrow { color: var(--aisc-color-dark-muted); background: rgba(255,255,255,0.08); } .aisc-section--dark .aisc-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); color: var(--aisc-color-dark-fg); } .aisc-section--dark .aisc-muted, .aisc-section--dark .aisc-lead { color: var(--aisc-color-dark-muted); } .aisc-container { max-width: var(--aisc-container); margin-inline: auto; position: relative; z-index: 1; } .aisc-container-narrow { max-width: var(--aisc-container-narrow); margin-inline: auto; position: relative; z-index: 1; } .aisc-center { text-align: center; } /* Background patterns -------------------------------------------------- */ .aisc-bg-grid::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(15,23,42,0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(15,23,42,0.06) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 30%, transparent 80%); pointer-events: none; z-index: 0; } .aisc-bg-dots::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(15,23,42,0.18) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%); pointer-events: none; z-index: 0; } .aisc-section--dark.aisc-bg-grid::before, .aisc-section--dark.aisc-bg-dots::before { background-image: linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px); } /* Animated gradient blobs */ .aisc-bg-blob { position: relative; } .aisc-bg-blob::before, .aisc-bg-blob::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(90px); opacity: 0.55; pointer-events: none; z-index: 0; animation: aisc-blob 22s ease-in-out infinite alternate; } .aisc-bg-blob::before { background: var(--aisc-color-accent); top: -180px; left: -120px; } .aisc-bg-blob::after { background: var(--aisc-color-accent-2); bottom: -200px; right: -160px; animation-delay: -7s; } @keyframes aisc-blob { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.08); } 100% { transform: translate(-30px, 20px) scale(0.96); } } @media (prefers-reduced-motion: reduce) { .aisc-bg-blob::before, .aisc-bg-blob::after { animation: none; } } /* Typography ----------------------------------------------------------- */ .aisc-display { font-family: var(--aisc-font-display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.02; font-size: clamp(40px, 7vw, 88px); margin: 0 0 0.4em; color: inherit; } .aisc-display .aisc-grad-text { background: var(--aisc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline; } .aisc-h2 { font-family: var(--aisc-font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; font-size: clamp(30px, 4vw, 50px); margin: 0 0 0.4em; } .aisc-h3 { font-family: var(--aisc-font-display); font-weight: 600; font-size: clamp(20px, 2.2vw, 26px); margin: 0 0 0.4em; letter-spacing: -0.01em; line-height: 1.3; } .aisc-lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--aisc-color-muted); margin: 0 0 1.4em; max-width: 640px; } .aisc-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aisc-color-accent); background: var(--aisc-grad-soft); border: 1px solid color-mix(in srgb, var(--aisc-color-accent) 20%, transparent); padding: 6px 14px; border-radius: var(--aisc-radius-pill); margin-bottom: 20px; } .aisc-muted { color: var(--aisc-color-muted); } .aisc-mark { background: var(--aisc-grad-soft); color: var(--aisc-color-accent); padding: 0 6px; border-radius: 6px; font-weight: 600; } /* Buttons -------------------------------------------------------------- */ .aisc-btn, .wp-block-button.aisc-btn .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: var(--aisc-radius-pill); font-weight: 600; font-size: 15px; border: 1px solid transparent; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; cursor: pointer; line-height: 1; font-family: inherit; } .aisc-btn-primary, .wp-block-button.aisc-btn-primary .wp-block-button__link { background: var(--aisc-grad); color: var(--aisc-color-accent-fg) !important; box-shadow: var(--aisc-shadow); } .aisc-btn-primary:hover, .wp-block-button.aisc-btn-primary .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: var(--aisc-shadow-glow); } .aisc-btn-secondary, .wp-block-button.aisc-btn-secondary .wp-block-button__link { background: var(--aisc-color-fg); color: var(--aisc-color-bg) !important; } .aisc-btn-secondary:hover, .wp-block-button.aisc-btn-secondary .wp-block-button__link:hover { transform: translateY(-2px); } .aisc-btn-ghost, .wp-block-button.aisc-btn-ghost .wp-block-button__link { background: transparent; color: inherit !important; border-color: var(--aisc-color-border-strong); } .aisc-btn-ghost:hover, .wp-block-button.aisc-btn-ghost .wp-block-button__link:hover { background: var(--aisc-color-bg-soft); border-color: var(--aisc-color-fg); } /* Hero ----------------------------------------------------------------- */ .aisc-hero { position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 90% -10%, color-mix(in srgb, var(--aisc-color-accent) 22%, transparent), transparent 60%), radial-gradient(900px 500px at -10% 100%, color-mix(in srgb, var(--aisc-color-accent-2) 22%, transparent), transparent 60%), var(--aisc-color-bg); padding-block: clamp(56px, 8vw, 100px); padding-inline: clamp(20px, 5vw, 56px); } .aisc-hero--dark { background: radial-gradient(1200px 600px at 90% -10%, color-mix(in srgb, var(--aisc-color-accent) 35%, transparent), transparent 60%), radial-gradient(900px 500px at -10% 100%, color-mix(in srgb, var(--aisc-color-accent-2) 30%, transparent), transparent 60%), var(--aisc-color-dark-bg); color: var(--aisc-color-dark-fg); } .aisc-hero--dark .aisc-lead { color: var(--aisc-color-dark-muted); } .aisc-hero__inner { max-width: var(--aisc-container); margin-inline: auto; text-align: center; position: relative; z-index: 1; } .aisc-hero__cta-row { display: flex !important; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; } .aisc-hero__media { margin-top: clamp(48px, 6vw, 88px); border-radius: var(--aisc-radius-lg); overflow: hidden; box-shadow: var(--aisc-shadow-lg); max-width: 1080px; margin-inline: auto; border: 1px solid var(--aisc-color-border); } .aisc-hero__media img { display: block; width: 100%; height: auto; } /* Logos cloud ---------------------------------------------------------- */ .aisc-logos { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); align-items: center; justify-content: center; max-width: var(--aisc-container); margin-inline: auto; opacity: 0.65; filter: grayscale(100%); } .aisc-logos img, .aisc-logos .aisc-logo-text { height: 28px; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--aisc-color-fg); display: inline-flex; align-items: center; } .aisc-logos-title { text-align: center; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aisc-color-muted); margin-bottom: 28px; } /* Grids and bento ----------------------------------------------------- */ .aisc-grid { display: grid; gap: clamp(16px, 2vw, 28px); max-width: var(--aisc-container); margin-inline: auto; position: relative; z-index: 1; } .aisc-grid-2, .aisc-grid-3, .aisc-grid-4 { display: grid !important; gap: clamp(16px, 2vw, 28px); max-width: var(--aisc-container); margin-inline: auto; position: relative; z-index: 1; } .aisc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aisc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .aisc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .aisc-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(16px, 2vw, 24px); max-width: var(--aisc-container); margin-inline: auto; position: relative; z-index: 1; } .aisc-bento > * { grid-column: span 2; } .aisc-bento-lg { grid-column: span 4 !important; } .aisc-bento-wide { grid-column: span 6 !important; } .aisc-bento-tall { grid-row: span 2; } @media (max-width: 900px) { .aisc-grid-3, .aisc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .aisc-bento { grid-template-columns: repeat(2, 1fr) !important; } .aisc-bento > *, .aisc-bento-lg, .aisc-bento-wide { grid-column: span 2 !important; } } @media (max-width: 600px) { .aisc-grid-2, .aisc-grid-3, .aisc-grid-4 { grid-template-columns: 1fr !important; } .aisc-bento { grid-template-columns: 1fr !important; } .aisc-bento > *, .aisc-bento-lg, .aisc-bento-wide { grid-column: span 1 !important; } } /* Cards ---------------------------------------------------------------- */ .aisc-card { background: var(--aisc-color-card); border: 1px solid var(--aisc-color-border); border-radius: var(--aisc-radius); padding: clamp(20px, 2.4vw, 32px); box-shadow: var(--aisc-shadow-sm); transition: transform 0.15s ease, box-shadow 0.25s ease, border-color 0.2s ease; } .aisc-card:hover { transform: translateY(-4px); box-shadow: var(--aisc-shadow); border-color: color-mix(in srgb, var(--aisc-color-accent) 40%, var(--aisc-color-border)); } .aisc-card--lift { box-shadow: var(--aisc-shadow); } .aisc-card--gradient { background: var(--aisc-grad); color: var(--aisc-color-accent-fg); border: none; } .aisc-card--gradient .aisc-feature__title, .aisc-card--gradient .aisc-h3 { color: inherit; } .aisc-card--gradient .aisc-feature__body, .aisc-card--gradient .aisc-muted { color: rgba(255,255,255,0.85); } /* Contrast guardrails (v3.7.0) ----------------------------------------- * Comprehensive rules to prevent low-contrast text across all contexts. * The AI sometimes generates markup with accent colours on titles/body * text that washes out against the background. These rules force readable * contrast everywhere. Icons keep their accent colour. */ /* 1. Cards on LIGHT sections: titles + body use dark fg. */ .aisc-card .aisc-feature__title, .aisc-card .aisc-h3, .aisc-card h2, .aisc-card h3, .aisc-card h4, .aisc-feature .aisc-feature__title { color: var(--aisc-color-fg) !important; } .aisc-card .aisc-feature__body, .aisc-card p:not(.aisc-eyebrow) { color: var(--aisc-color-muted); } /* 2. Cards on DARK / NOIR sections: force light text. */ .aisc-section--dark .aisc-card .aisc-feature__title, .aisc-section--dark .aisc-card .aisc-h3, .aisc-section--dark .aisc-card h2, .aisc-section--dark .aisc-card h3, .aisc-section--dark .aisc-card h4, .aisc-section--noir .aisc-card .aisc-feature__title, .aisc-section--noir .aisc-card .aisc-h3, .aisc-section--noir .aisc-card h2, .aisc-section--noir .aisc-card h3, .aisc-section--noir .aisc-card h4 { color: var(--aisc-color-dark-fg) !important; } .aisc-section--dark .aisc-card .aisc-feature__body, .aisc-section--dark .aisc-card p:not(.aisc-eyebrow), .aisc-section--noir .aisc-card .aisc-feature__body, .aisc-section--noir .aisc-card p:not(.aisc-eyebrow) { color: var(--aisc-color-dark-muted) !important; } /* 3. Gradient card: ensure dark overlay so text is always readable. */ .aisc-card--gradient { position: relative; } .aisc-card--gradient::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); border-radius: inherit; pointer-events: none; z-index: 0; } .aisc-card--gradient > * { position: relative; z-index: 1; } .aisc-card--gradient .aisc-feature__title, .aisc-card--gradient .aisc-h3, .aisc-card--gradient h2, .aisc-card--gradient h3, .aisc-card--gradient h4 { color: inherit !important; } .aisc-card--gradient p { color: rgba(255,255,255,0.85) !important; } /* 4. Testimonials on dark/noir: force readable text. */ .aisc-section--dark .aisc-testimonial, .aisc-section--noir .aisc-testimonial { color: var(--aisc-color-dark-fg) !important; } .aisc-section--dark .aisc-testimonial__author, .aisc-section--noir .aisc-testimonial__author { color: var(--aisc-color-dark-muted) !important; } .aisc-section--dark .aisc-card .aisc-testimonial, .aisc-section--noir .aisc-card .aisc-testimonial { color: var(--aisc-color-dark-fg) !important; } /* 5. Buttons: white-bg buttons get dark text; gradient-bg CTA buttons * inside CTA strips get proper contrast. */ .wp-block-button .wp-block-button__link[style*="background:#fff" i], .wp-block-button .wp-block-button__link[style*="background-color:#fff" i], .wp-block-button .wp-block-button__link[style*="background:white" i], .wp-block-button .wp-block-button__link[style*="background-color:white" i], .wp-block-button .wp-block-button__link[style*="background:#ffffff" i], .wp-block-button .wp-block-button__link[style*="background-color:#ffffff" i], .aisc-btn[style*="background:#fff" i], .aisc-btn[style*="background-color:#fff" i], .aisc-btn[style*="background:#ffffff" i], .aisc-btn[style*="background-color:#ffffff" i] { color: #0f172a !important; } /* CTA strip primary buttons are white-on-gradient — force dark text. Use explicit #0f172a, NOT var(--aisc-color-fg), because dark vibes redefine --aisc-color-fg to near-white which would be invisible. */ .aisc-cta .aisc-btn-primary, .aisc-cta .wp-block-button.aisc-btn-primary .wp-block-button__link { color: #0f172a !important; } /* 6. Headings inside ANY section: never use accent colour as body text. */ .aisc-section h2[style*="color:var(--aisc-color-accent)"], .aisc-section h3[style*="color:var(--aisc-color-accent)"], .aisc-section h4[style*="color:var(--aisc-color-accent)"] { color: inherit !important; } /* 7. Override any inline color on body text inside dark sections that * would render as dark-on-dark (invisible). */ .aisc-section--dark [style*="color:#0f172a"], .aisc-section--dark [style*="color:#1e293b"], .aisc-section--dark [style*="color:#334155"], .aisc-section--noir [style*="color:#0f172a"], .aisc-section--noir [style*="color:#1e293b"], .aisc-section--noir [style*="color:#334155"] { color: var(--aisc-color-dark-muted) !important; } /* 8. Override any inline light color on text in light sections. */ .aisc-section:not(.aisc-section--dark):not(.aisc-section--noir):not(.aisc-section--gradient) [style*="color:#f8fafc"], .aisc-section:not(.aisc-section--dark):not(.aisc-section--noir):not(.aisc-section--gradient) [style*="color:#e2e8f0"], .aisc-section:not(.aisc-section--dark):not(.aisc-section--noir):not(.aisc-section--gradient) [style*="color:#cbd5e1"] { color: var(--aisc-color-muted) !important; } /* 9. Cards on LIGHT sections: titles and body must be DARK — never white/light. */ .aisc-section:not(.aisc-section--dark):not(.aisc-section--noir) .aisc-card:not(.aisc-card--gradient) .aisc-feature__title, .aisc-section:not(.aisc-section--dark):not(.aisc-section--noir) .aisc-card:not(.aisc-card--gradient) .aisc-h3, .aisc-section:not(.aisc-section--dark):not(.aisc-section--noir) .aisc-card:not(.aisc-card--gradient) h2, .aisc-section:not(.aisc-section--dark):not(.aisc-section--noir) .aisc-card:not(.aisc-card--gradient) h3, .aisc-section:not(.aisc-section--dark):not(.aisc-section--noir) .aisc-card:not(.aisc-card--gradient) h4 { color: var(--aisc-color-fg) !important; } .aisc-section:not(.aisc-section--dark):not(.aisc-section--noir) .aisc-card:not(.aisc-card--gradient) .aisc-feature__body, .aisc-section:not(.aisc-section--dark):not(.aisc-section--noir) .aisc-card:not(.aisc-card--gradient) p:not(.aisc-eyebrow) { color: var(--aisc-color-muted) !important; } /* 10. Glass cards on dark sections: ensure text is readable with text-shadow. */ .aisc-glass-card .aisc-feature__title, .aisc-glass-card .aisc-h3, .aisc-glass-card h2, .aisc-glass-card h3, .aisc-glass-card h4 { color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,0.4); } .aisc-glass-card .aisc-feature__body, .aisc-glass-card p:not(.aisc-eyebrow) { color: rgba(255,255,255,0.8) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.3); } /* 11. CTA primary button: ALWAYS visible — catch any combination. IMPORTANT: Do NOT use the bare ".aisc-cta .wp-block-button__link" selector here — it matches ghost buttons too, giving them a white background and causing white-on-white text. Only target .aisc-btn-primary. */ .aisc-cta .aisc-btn-primary, .aisc-cta .aisc-btn-primary a, .aisc-cta .wp-block-button.aisc-btn-primary a, .aisc-cta .wp-block-button.aisc-btn-primary .wp-block-button__link { background: #ffffff !important; color: #0f172a !important; box-shadow: 0 6px 20px rgba(0,0,0,0.15); } /* On noir sections outside CTA strip too */ .aisc-section--noir .aisc-btn-primary, .aisc-section--noir .wp-block-button.aisc-btn-primary .wp-block-button__link, .aisc-section--dark .aisc-btn-primary, .aisc-section--dark .wp-block-button.aisc-btn-primary .wp-block-button__link { background: #ffffff !important; color: #0f172a !important; } /* Glassmorphism */ .aisc-glass { background: rgba(255,255,255,0.55); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid rgba(255,255,255,0.5); } .aisc-section--dark .aisc-glass { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); } /* Feature card */ .aisc-feature__icon { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--aisc-grad); color: #fff; font-size: 22px; margin-bottom: 16px; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--aisc-color-accent) 60%, transparent); } .aisc-feature__title { font-size: 18px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; } .aisc-feature__body { color: var(--aisc-color-muted); margin: 0; line-height: 1.6; font-size: 15px; } /* Lucide icon library (CSS masks) ------------------------------------- */ .aisc-icon { display: inline-block; width: 22px; height: 22px; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; flex: 0 0 auto; vertical-align: -4px; } .aisc-icon-rocket{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-zap{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-sparkles{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-shield{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-code{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-heart{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-globe{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-bot{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-layers{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-mail{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-message{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-chart{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-users{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-check{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-star{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-trending{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-target{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-cpu{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-lightbulb{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-award{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-clock{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-lock{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-palette{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-search{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-cart{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-camera{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-music{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-icon-flame{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");} .aisc-feature__icon .aisc-icon { width: 22px; height: 22px; color: #fff; } /* Stats ---------------------------------------------------------------- */ .aisc-stat__number { font-family: var(--aisc-font-display); font-weight: 800; font-size: clamp(40px, 5.5vw, 64px); background: var(--aisc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; letter-spacing: -0.03em; } .aisc-stat__label { color: var(--aisc-color-muted); margin-top: 8px; font-size: 14px; font-weight: 500; } /* Testimonials --------------------------------------------------------- */ .aisc-testimonial { font-size: 17px; line-height: 1.6; } .aisc-testimonial::before { content: "\201C"; font-family: Georgia, serif; font-size: 64px; line-height: 0.6; color: var(--aisc-color-accent); margin-bottom: 8px; display: block; opacity: 0.4; } .aisc-testimonial__author { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--aisc-color-muted); font-size: 14px; } .aisc-avatar-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 40px; } /* Pricing -------------------------------------------------------------- */ .aisc-price__amount { font-family: var(--aisc-font-display); font-weight: 800; font-size: clamp(36px, 4.5vw, 56px); letter-spacing: -0.03em; line-height: 1; } .aisc-price__period { color: var(--aisc-color-muted); font-size: 14px; } .aisc-price__list { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 10px; } .aisc-price__list li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--aisc-color-muted); } .aisc-price__list li::before { content: ""; width: 18px; height: 18px; background-color: var(--aisc-color-accent); -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; flex: 0 0 18px; } .aisc-price-tier--popular { border: 2px solid var(--aisc-color-accent); box-shadow: var(--aisc-shadow-glow); transform: scale(1.03); position: relative; } .aisc-price-tier--popular::before { content: "Popular"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--aisc-grad); color: #fff; padding: 4px 12px; border-radius: var(--aisc-radius-pill); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } /* FAQ accordion (use
) --------------------------------------- */ .aisc-faq details { background: var(--aisc-color-card); border: 1px solid var(--aisc-color-border); border-radius: var(--aisc-radius); padding: 18px 22px; margin-bottom: 12px; transition: box-shadow 0.2s; } .aisc-faq details[open] { box-shadow: var(--aisc-shadow-sm); } .aisc-faq summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .aisc-faq summary::-webkit-details-marker { display: none; } .aisc-faq summary::after { content: "+"; font-size: 24px; color: var(--aisc-color-accent); font-weight: 300; transition: transform 0.2s; } .aisc-faq details[open] summary::after { transform: rotate(45deg); } .aisc-faq details > p { margin-top: 12px; color: var(--aisc-color-muted); line-height: 1.6; } /* CTA strip ------------------------------------------------------------ */ .aisc-cta { max-width: var(--aisc-container); margin-inline: auto; padding: clamp(40px, 6vw, 80px); border-radius: var(--aisc-radius-lg); background: var(--aisc-grad); color: var(--aisc-color-accent-fg); text-align: center; box-shadow: var(--aisc-shadow-lg); position: relative; overflow: hidden; } .aisc-cta::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1px); background-size: 22px 22px; mask: radial-gradient(ellipse at center, black 0%, transparent 70%); -webkit-mask: radial-gradient(ellipse at center, black 0%, transparent 70%); } .aisc-cta > * { position: relative; z-index: 1; } .aisc-cta .aisc-h2 { color: inherit; } .aisc-cta .aisc-lead { color: rgba(255,255,255,0.88); margin-inline: auto; } .aisc-cta__row { display: flex !important; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; } .aisc-cta .aisc-btn-primary, .aisc-cta .wp-block-button.aisc-btn-primary .wp-block-button__link { background: #ffffff; color: var(--aisc-color-fg) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.15); } .aisc-cta .aisc-btn-ghost, .aisc-cta .wp-block-button.aisc-btn-ghost .wp-block-button__link { background: transparent !important; color: #ffffff !important; border-color: rgba(255,255,255,0.4); } .aisc-cta .aisc-btn-ghost:hover, .aisc-cta .wp-block-button.aisc-btn-ghost .wp-block-button__link:hover { background: rgba(255,255,255,0.12) !important; color: #ffffff !important; } /* Footer --------------------------------------------------------------- */ .aisc-footer { background: var(--aisc-color-bg-soft); color: var(--aisc-color-muted); font-size: 14px; padding-block: 56px; padding-inline: clamp(20px, 5vw, 56px); border-top: 1px solid var(--aisc-color-border); } .aisc-footer__inner { max-width: var(--aisc-container); margin-inline: auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; } /* Forms ---------------------------------------------------------------- */ .aisc-form { display: grid; gap: 12px; max-width: 560px; margin-inline: auto; } .aisc-form input, .aisc-form textarea, .aisc-form select { font: inherit; width: 100%; padding: 14px 16px; border: 1px solid var(--aisc-color-border-strong); border-radius: var(--aisc-radius-sm); background: var(--aisc-color-card); color: inherit; } .aisc-form input:focus, .aisc-form textarea:focus { outline: none; border-color: var(--aisc-color-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--aisc-color-accent) 22%, transparent); } /* Screenshot frame (browser chrome around an image) ------------------- */ .aisc-screenshot { border-radius: var(--aisc-radius); border: 1px solid var(--aisc-color-border); background: var(--aisc-color-card); overflow: hidden; box-shadow: var(--aisc-shadow-lg); max-width: 1080px; margin-inline: auto; } .aisc-screenshot__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--aisc-color-bg-soft); border-bottom: 1px solid var(--aisc-color-border); } .aisc-screenshot__bar::before, .aisc-screenshot__bar::after, .aisc-screenshot__bar > .aisc-dot { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #e2e8f0; } .aisc-screenshot img { display: block; width: 100%; height: auto; } /* Spacing utilities --------------------------------------------------- */ .aisc-mt-0 { margin-top: 0; } .aisc-mt-2 { margin-top: 8px; } .aisc-mt-4 { margin-top: 16px; } .aisc-mt-6 { margin-top: 24px; } .aisc-mt-8 { margin-top: 32px; } .aisc-mt-12 { margin-top: 48px; } .aisc-mb-0 { margin-bottom: 0; } .aisc-mb-4 { margin-bottom: 16px; } /* Image rounding ------------------------------------------------------ */ .aisc-rounded img, .aisc-rounded .wp-block-cover, .aisc-rounded.wp-block-cover { border-radius: var(--aisc-radius-lg); overflow: hidden; } /* ==================================================================== * v2.5 additions — Lovable-quality moves * ==================================================================== */ /* Multi-stop gradient text variants — for richer hero typography */ .aisc-grad-text-warm { background: linear-gradient(135deg, #fbbf24 0%, #ec4899 50%, #8b5cf6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline; } .aisc-grad-text-cool { background: linear-gradient(135deg, #06b6d4 0%, #6366f1 50%, #ec4899 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline; } .aisc-grad-text-fire { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 50%, #ec4899 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline; } /* Noir section — Lovable-style dark hero with warm gradient orbs */ .aisc-section--noir { background: #0a0612; color: #f5f3ff; position: relative; overflow: hidden; } .aisc-section--noir::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 600px at 80% 0%, rgba(236,72,153,0.18) 0%, transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(139,92,246,0.18) 0%, transparent 60%), radial-gradient(500px 400px at 50% 60%, rgba(251,191,36,0.10) 0%, transparent 60%); pointer-events: none; } .aisc-section--noir > * { position: relative; z-index: 1; } .aisc-section--noir .aisc-eyebrow { color: #fbbf24; background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.30); } .aisc-section--noir .aisc-lead { color: #c4b8e8; } .aisc-section--noir .aisc-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #f5f3ff; } .aisc-section--noir .aisc-feature__body { color: #a89cc8; } .aisc-section--noir .aisc-btn-ghost, .aisc-section--noir .wp-block-button.aisc-btn-ghost .wp-block-button__link { background: transparent !important; color: #f5f3ff !important; border-color: rgba(255,255,255,0.18); } /* Code card — for visualizing technical content / SEO contrast / API examples */ .aisc-code-card { background: #0d0a17; border: 1px solid rgba(255,255,255,0.08); border-radius: var(--aisc-radius); overflow: hidden; font-family: var(--aisc-font-mono), ui-monospace, monospace; font-size: 13.5px; line-height: 1.6; box-shadow: var(--aisc-shadow); } .aisc-code-card__head { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); font-size: 12.5px; } .aisc-code-card__title { color: #94a3b8; font-weight: 500; } .aisc-code-card__meta { color: #fbbf24; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; } .aisc-code-card__meta--bad { color: #f87171; } .aisc-code-card__meta--good { color: #4ade80; } .aisc-code-card__body { padding: 16px 20px; color: #e2e8f0; overflow-x: auto; white-space: pre-wrap; word-break: break-word; } .aisc-code-card__body .aisc-code-tag { color: #8b5cf6; } .aisc-code-card__body .aisc-code-attr { color: #fbbf24; } .aisc-code-card__body .aisc-code-string { color: #4ade80; } .aisc-code-card__body .aisc-code-comment { color: #64748b; font-style: italic; } /* Inline mono code emphasis (for use inside aisc-display, aisc-h2, body) */ .aisc-mono-inline { font-family: var(--aisc-font-mono), monospace; background: rgba(99,102,241,0.10); border: 1px solid rgba(99,102,241,0.20); color: var(--aisc-color-accent); padding: 0.05em 0.35em; border-radius: 6px; font-size: 0.85em; font-weight: 500; } .aisc-section--noir .aisc-mono-inline { background: rgba(251,191,36,0.10); border-color: rgba(251,191,36,0.25); color: #fbbf24; } /* ==================================================================== * v2.7 — Full-width break-out, site header, mobile nav * ==================================================================== * Goal: AI-generated pages must visually own the full viewport width, * not whatever narrow content container the active block theme provides * (Twenty-Twenty-Five constrains content to ~620px by default). * * Strategy: .aisc-page (and any .aisc-section that's not nested inside * one) breaks out of its parent using the negative-margin viewport trick, * then sets its own width to 100vw. Everything inside continues to honor * .aisc-container's max-width for centered content. */ /* Kill horizontal scroll caused by the 100vw breakout below. 100vw includes the vertical scrollbar's width, so the breakout extends a few pixels past the visible viewport on Windows/Chrome. v4.5.6: removed overflow-x: clip from html/body because the CSS spec says `clip` clips position:fixed descendants too (unlike `hidden`). This broke the WP block-navigation mobile overlay (only showed 2 of 4 items). Using `hidden` on body is safe — it propagates to the viewport scroller and does NOT create a new scroll container that breaks sticky. */ html, body { overflow-x: hidden; } /* Belt-and-suspenders: also clip the WP outer wrapper (but NOT body, so the fixed-position nav overlay can escape). */ .wp-site-blocks { overflow-x: hidden; overflow-x: clip; } .aisc-page, .entry-content > .aisc-section, .wp-block-post-content > .aisc-section, .is-layout-constrained > .aisc-section { width: 100vw; max-width: 100vw !important; /* Use logical properties so the breakout works in both LTR and RTL */ margin-inline-start: calc(50% - 50vw); margin-inline-end: calc(50% - 50vw); box-sizing: border-box; } /* v4.5.6: WordPress 7.0 layout JS injects an inline style with width:(viewport-scrollbar)px !important on is-layout-flow groups. On mobile there IS no scrollbar, so the page ends up 15px too narrow. Override with attribute selector + important for maximum specificity (inline !important still wins, so we also nuke it in JS — see below). */ @media (max-width: 782px) { .aisc-page.is-layout-flow { width: 100vw !important; max-width: 100vw !important; margin-left: 0 !important; margin-right: 0 !important; } } /* When .aisc-page wraps everything, it becomes the breakout — sections inside it stay 100% (they don't need to break out twice). */ .aisc-page > .aisc-section, .aisc-page > .wp-block-group, .aisc-page > section { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } /* Site header --------------------------------------------------------- */ .aisc-site-header { width: 100%; padding-block: 16px; padding-inline: clamp(20px, 5vw, 48px); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); background: color-mix(in srgb, var(--aisc-color-bg) 80%, transparent); border-bottom: 1px solid var(--aisc-color-border); } .aisc-section--noir .aisc-site-header, .aisc-page--noir .aisc-site-header, .aisc-site-header--noir { background: rgba(10, 6, 18, 0.7); border-bottom: 1px solid rgba(255,255,255,0.06); } .aisc-site-header__inner { max-width: var(--aisc-container); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .aisc-site-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-weight: 700; letter-spacing: -0.01em; font-size: 17px; } .aisc-site-brand__mark { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--aisc-grad); color: #fff; font-size: 14px; } .aisc-site-brand__name { color: inherit; } .aisc-site-brand__sub { color: var(--aisc-color-muted); font-weight: 500; margin-inline-start: 6px; } .aisc-site-nav { display: flex; gap: clamp(16px, 2.4vw, 36px); align-items: center; } .aisc-site-nav a { color: var(--aisc-color-muted); text-decoration: none; font-size: 15px; font-weight: 500; transition: color 0.15s; } .aisc-site-nav a:hover { color: var(--aisc-color-fg); } .aisc-section--noir .aisc-site-nav a, .aisc-site-header--noir .aisc-site-nav a { color: var(--aisc-color-dark-muted); } .aisc-section--noir .aisc-site-nav a:hover, .aisc-site-header--noir .aisc-site-nav a:hover { color: var(--aisc-color-dark-fg); } .aisc-site-cta { flex: 0 0 auto; } /* Mobile collapse */ @media (max-width: 720px) { .aisc-site-header__inner { gap: 12px; } .aisc-site-nav { display: none; /* hide nav links on small screens; keep brand + CTA */ } } /* ==================================================================== * v3.0 — E-commerce design system + WooCommerce overrides * ==================================================================== */ /* Product grid (used in shop / category sections) */ .aisc-product-grid { display: grid; gap: clamp(16px, 2vw, 28px); grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--aisc-container); margin-inline: auto; } @media (max-width: 1024px) { .aisc-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 768px) { .aisc-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .aisc-product-grid { grid-template-columns: 1fr; } } .aisc-product-card { background: var(--aisc-color-card); border: 1px solid var(--aisc-color-border); border-radius: var(--aisc-radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.18s, box-shadow 0.25s, border-color 0.18s; } .aisc-product-card:hover { transform: translateY(-4px); box-shadow: var(--aisc-shadow); border-color: color-mix(in srgb, var(--aisc-color-accent) 40%, var(--aisc-color-border)); } .aisc-product-card__image { aspect-ratio: 1 / 1; background: var(--aisc-color-bg-soft); overflow: hidden; } .aisc-product-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .aisc-product-card:hover .aisc-product-card__image img { transform: scale(1.04); } .aisc-product-card__body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; } .aisc-product-card__title { font-weight: 600; font-size: 15px; color: var(--aisc-color-fg); line-height: 1.35; margin: 0; } .aisc-product-card__category { font-size: 12px; color: var(--aisc-color-muted); text-transform: uppercase; letter-spacing: 0.06em; } .aisc-product-card__price { font-weight: 700; font-size: 16px; color: var(--aisc-color-fg); margin-top: 6px; } .aisc-product-card__price-old { color: var(--aisc-color-muted); text-decoration: line-through; font-weight: 400; margin-inline-end: 6px; font-size: 14px; } /* Categories grid (3-6 large category tiles) */ .aisc-categories { display: grid; gap: clamp(12px, 1.6vw, 20px); grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: var(--aisc-container); margin-inline: auto; } @media (max-width: 768px) { .aisc-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .aisc-categories { grid-template-columns: 1fr; } } .aisc-category-card { position: relative; border-radius: var(--aisc-radius); overflow: hidden; aspect-ratio: 4 / 3; display: flex; align-items: flex-end; padding: 20px; color: #fff; text-decoration: none; background: var(--aisc-color-fg); transition: transform 0.2s; } .aisc-category-card:hover { transform: translateY(-3px); } .aisc-category-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .aisc-category-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%, transparent 100%); z-index: 1; } .aisc-category-card__label { position: relative; z-index: 2; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; } .aisc-category-card__count { position: relative; z-index: 2; font-size: 12.5px; opacity: 0.8; margin-inline-start: 8px; } /* Trust strip — 4 inline icons + labels (free shipping, secure checkout, returns, etc.) */ .aisc-trust-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 32px); max-width: var(--aisc-container); margin-inline: auto; padding-block: 8px; } @media (max-width: 720px) { .aisc-trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .aisc-trust-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--aisc-color-fg); } .aisc-trust-item .aisc-icon { width: 22px; height: 22px; color: var(--aisc-color-accent); flex: 0 0 22px; } .aisc-trust-item__label { font-weight: 600; } .aisc-trust-item__sub { display: block; font-weight: 400; color: var(--aisc-color-muted); font-size: 12.5px; } /* WooCommerce default classes — restyle to match design system */ .woocommerce ul.products, .woocommerce-page ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); list-style: none !important; margin: 0 !important; padding: 0 !important; } @media (max-width: 1024px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 768px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: 1fr; } } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { background: var(--aisc-color-card); border: 1px solid var(--aisc-color-border); border-radius: var(--aisc-radius); overflow: hidden; padding: 0 !important; margin: 0 !important; width: auto !important; float: none !important; transition: transform 0.18s, box-shadow 0.25s, border-color 0.18s; } .woocommerce ul.products li.product:hover, .woocommerce-page ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--aisc-shadow); } .woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img { width: 100% !important; aspect-ratio: 1/1; object-fit: cover; display: block; margin: 0 !important; } .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce-page ul.products li.product .woocommerce-loop-product__title { font-family: var(--aisc-font-display); font-size: 15px !important; font-weight: 600 !important; padding: 14px 16px 4px !important; color: var(--aisc-color-fg) !important; } .woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price { padding: 0 16px 12px !important; font-weight: 700 !important; color: var(--aisc-color-fg) !important; font-size: 15px !important; } .woocommerce ul.products li.product .price del { color: var(--aisc-color-muted) !important; font-weight: 400 !important; } .woocommerce ul.products li.product .button, .woocommerce-page ul.products li.product .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce .button.add_to_cart_button, .woocommerce a.button.add_to_cart_button { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--aisc-grad) !important; color: #fff !important; border: none !important; border-radius: var(--aisc-radius-pill) !important; padding: 10px 20px !important; font-family: inherit !important; font-weight: 600 !important; font-size: 14px !important; margin: 0 16px 16px !important; box-shadow: var(--aisc-shadow-sm) !important; text-shadow: none !important; transition: transform 0.12s, box-shadow 0.2s !important; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.add_to_cart_button:hover { transform: translateY(-2px); box-shadow: var(--aisc-shadow); } .woocommerce .added_to_cart { display: inline-flex !important; align-items: center !important; background: transparent !important; color: var(--aisc-color-accent) !important; border: 1px solid var(--aisc-color-accent) !important; border-radius: var(--aisc-radius-pill) !important; padding: 10px 16px !important; margin: 0 16px 16px !important; font-weight: 600 !important; text-decoration: none !important; } /* Single product page */ .woocommerce div.product .product_title { font-family: var(--aisc-font-display) !important; font-size: clamp(28px, 3.4vw, 44px) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: var(--aisc-color-fg) !important; line-height: 1.1 !important; } .woocommerce div.product p.price, .woocommerce div.product span.price { font-family: var(--aisc-font-display) !important; font-size: clamp(22px, 2.6vw, 32px) !important; font-weight: 700 !important; color: var(--aisc-color-accent) !important; } .woocommerce div.product form.cart .single_add_to_cart_button { background: var(--aisc-grad) !important; color: #fff !important; border: none !important; border-radius: var(--aisc-radius-pill) !important; padding: 14px 28px !important; font-weight: 600 !important; font-size: 15px !important; box-shadow: var(--aisc-shadow) !important; } /* Cart + checkout buttons */ .woocommerce-cart .cart-collaterals .checkout-button, .woocommerce-checkout #place_order { background: var(--aisc-grad) !important; color: #fff !important; border: none !important; border-radius: var(--aisc-radius-pill) !important; padding: 14px 28px !important; font-weight: 700 !important; font-size: 16px !important; box-shadow: var(--aisc-shadow-glow) !important; } /* Notices */ .woocommerce-message, .woocommerce-info { background: var(--aisc-grad-soft) !important; border-top: 3px solid var(--aisc-color-accent) !important; color: var(--aisc-color-fg) !important; border-radius: var(--aisc-radius-sm) !important; } .woocommerce-error { background: rgba(239,68,68,0.08) !important; border-top: 3px solid #ef4444 !important; color: #b91c1c !important; border-radius: var(--aisc-radius-sm) !important; } /* ==================================================================== * v3.2 — LOVABLE-GRADE PRIMITIVES * Adds the moves that make Lovable / Replit / Base44 sites feel slick: * asymmetric heroes, watermark text, accent-word headings, inset stat * cards, split-card inner heroes, pro product cards. * ==================================================================== */ /* 12.1 — Asymmetric hero (copy left, image card right) */ .aisc-hero-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; position: relative; padding: clamp(48px, 7vw, 100px) clamp(20px, 4vw, 64px); max-width: 1240px; margin: 0 auto; } @media (max-width: 900px) { .aisc-hero-split { grid-template-columns: 1fr !important; gap: 32px !important; padding: 40px 20px 36px !important; } .aisc-hero-split__copy { max-width: 100%; } .aisc-hero-split__media { max-width: 100%; } } .aisc-hero-split__copy { position: relative; z-index: 2; max-width: 640px; } .aisc-hero-split__media { position: relative; z-index: 2; } /* Massive watermark text behind hero copy. Capped at 100% of parent width and clipped to prevent mobile overflow. v4.5.5: use text-overflow + clip to prevent mobile horizontal scroll. */ .aisc-watermark-text { position: absolute; left: clamp(-40px, -3vw, 0px); top: 50%; transform: translateY(-50%); font-size: clamp(120px, 20vw, 280px); font-weight: 900; letter-spacing: -0.04em; line-height: 0.85; color: var(--aisc-color-text); opacity: 0.04; pointer-events: none; white-space: nowrap; z-index: 0; font-family: var(--aisc-font-display, inherit); user-select: none; max-width: 100%; overflow: hidden; text-overflow: clip; } @media (max-width: 600px) { .aisc-watermark-text { font-size: clamp(80px, 18vw, 140px) !important; left: 0 !important; max-width: 100vw; } } .aisc-section--noir .aisc-watermark-text, .aisc-hero--dark .aisc-watermark-text { color: #fff; opacity: 0.06; } /* Eyebrow as a real PILL with a colored dot — replaces the plain text eyebrow */ .aisc-eyebrow-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--aisc-color-text) 14%, transparent); background: color-mix(in srgb, var(--aisc-color-text) 4%, transparent); font-size: 12.5px; font-weight: 500; color: color-mix(in srgb, var(--aisc-color-text) 75%, transparent); letter-spacing: 0; text-transform: none; margin-bottom: 24px; max-width: 100%; } .aisc-section--noir .aisc-eyebrow-pill, .aisc-hero--dark .aisc-eyebrow-pill { border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.78); } .aisc-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--aisc-color-accent, #2d8cf0); box-shadow: 0 0 0 3px color-mix(in srgb, var(--aisc-color-accent, #2d8cf0) 25%, transparent); flex: 0 0 auto; } /* Display heading — bigger, tighter, editorial */ .aisc-display { font-size: clamp(40px, 6.4vw, 80px); font-weight: 800; line-height: 0.98; letter-spacing: -0.025em; margin: 0 0 24px; } .aisc-display > span { display: inline; } /* Single accent word — brand color, italic-feel weight, period included */ .aisc-display-accent-word { color: var(--aisc-color-accent, #2d8cf0); font-style: italic; font-weight: 800; background: linear-gradient(135deg, var(--aisc-color-accent, #2d8cf0), color-mix(in srgb, var(--aisc-color-accent, #2d8cf0) 60%, var(--aisc-color-text) 40%)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Hero image card — large rounded, shadow stack */ .aisc-hero-card-image { margin: 0; border-radius: 28px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 16px rgba(0,0,0,0.08), 0 24px 48px rgba(0,0,0,0.10); background: #fff; position: relative; aspect-ratio: 4 / 3; } .aisc-hero-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .aisc-section--noir .aisc-hero-card-image, .aisc-hero--dark .aisc-hero-card-image { background: #14171c; box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06); } /* 3 inset stat cards floating at the bottom of the hero image card */ .aisc-hero-stats-inset { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: -56px; background: rgba(20, 23, 28, 0.94); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-radius: 0 0 28px 28px; border: 1px solid rgba(255,255,255,0.08); border-top: none; overflow: hidden; position: relative; z-index: 3; } .aisc-stat-inset { padding: 18px 16px; background: rgba(20, 23, 28, 0.94); display: flex; flex-direction: column; gap: 6px; min-width: 0; } .aisc-stat-inset__eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.65) !important; /* always on dark bg — force light */ } .aisc-stat-inset__value { font-size: 13.5px; font-weight: 600; color: #fff !important; /* always on dark bg — force light */ line-height: 1.3; } @media (max-width: 600px) { .aisc-hero-stats-inset { grid-template-columns: 1fr !important; margin-top: -32px; } .aisc-stat-inset { padding: 12px 14px; } } /* Pro trust strip — 3 dark cards with icon + label + sub */ .aisc-trust-strip-pro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; max-width: 720px; } .aisc-trust-card-pro { display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(20, 23, 28, 0.85); border: 1px solid rgba(255,255,255,0.08); align-items: flex-start; } .aisc-trust-card-pro .aisc-icon { width: 18px; height: 18px; background-color: var(--aisc-color-accent, #2d8cf0); flex: 0 0 18px; margin-top: 1px; } .aisc-trust-card-pro__title { font-size: 14px; font-weight: 600; color: var(--aisc-color-fg, #0f172a) !important; margin-bottom: 4px; } .aisc-trust-card-pro__sub { font-size: 12.5px; color: var(--aisc-color-muted, #475569) !important; line-height: 1.4; } /* Dark-bg context (dark bg on card itself) — force white */ .aisc-trust-card-pro[style*="dark"], .aisc-section--dark .aisc-trust-card-pro__title, .aisc-section--noir .aisc-trust-card-pro__title, .aisc-hero-split .aisc-trust-card-pro__title { color: #fff !important; } .aisc-section--dark .aisc-trust-card-pro__sub, .aisc-section--noir .aisc-trust-card-pro__sub, .aisc-hero-split .aisc-trust-card-pro__sub { color: rgba(255,255,255,0.6) !important; } /* When card has dark bg (the default raw markup) but sits in a light page, the light-variant rule below flips the card to white bg + dark text. */ .aisc-trust-strip-pro { /* Cards default to light when NOT inside a dark section */ } .aisc-page > .aisc-trust-strip-pro .aisc-trust-card-pro, .aisc-section:not(.aisc-section--noir):not(.aisc-section--dark) .aisc-trust-card-pro { background: #fff; border-color: rgba(0,0,0,0.08); box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04); } @media (max-width: 700px) { .aisc-trust-strip-pro { grid-template-columns: 1fr !important; } } /* Section eyebrow — uppercase tracked label before each H2 */ .aisc-section-eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--aisc-color-text) 50%, transparent); margin-bottom: 16px; } .aisc-section--noir .aisc-section-eyebrow, .aisc-section--dark .aisc-section-eyebrow { color: rgba(255,255,255,0.55); } /* Editorial H2 — period-ended, centered, large */ .aisc-h2-editorial { font-size: clamp(28px, 4.4vw, 56px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; max-width: 22ch; margin-left: auto; margin-right: auto; text-wrap: balance; } /* Inner-page split-card hero — dark left + photo right in one rounded shape */ .aisc-hero-split-card { display: grid; grid-template-columns: 1fr 1fr; border-radius: 32px; overflow: hidden; min-height: 380px; box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08); } .aisc-hero-split-card__copy { background: #131a2b; color: #fff; padding: clamp(32px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; } .aisc-hero-split-card__copy .aisc-lead { color: rgba(255,255,255,0.85); font-size: 17px; line-height: 1.5; } .aisc-hero-split-card__media { position: relative; background: #f1f1f3; min-height: 380px; } .aisc-hero-split-card__media img, .aisc-hero-split-card__media .wp-block-image, .aisc-hero-split-card__media figure { width: 100%; height: 100%; margin: 0; } .aisc-hero-split-card__media img { object-fit: cover; } @media (max-width: 800px) { .aisc-hero-split-card { grid-template-columns: 1fr !important; } .aisc-hero-split-card__media { min-height: 240px; } } /* Pro product card — Lovable e-commerce style */ .aisc-product-card-pro { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 8px; transition: transform 0.18s ease, box-shadow 0.18s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.03); } .aisc-product-card-pro:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .aisc-product-pill { display: inline-block; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--aisc-color-accent, #2d8cf0) 14%, transparent); color: var(--aisc-color-accent, #2d8cf0); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 4px; } .aisc-product-card-pro__title { font-size: 17px; font-weight: 700; color: var(--aisc-color-text); margin: 0; line-height: 1.3; } .aisc-product-card-pro__sku { font-size: 12px; color: var(--aisc-color-muted); font-weight: 500; } .aisc-product-card-pro__desc { font-size: 13.5px; color: var(--aisc-color-muted); line-height: 1.5; margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aisc-product-card-pro__foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 12px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.06); } .aisc-product-card-pro__price { font-size: 22px; font-weight: 800; color: var(--aisc-color-text); } .aisc-product-card-pro__unit { font-size: 12px; color: var(--aisc-color-muted); font-weight: 500; } .aisc-product-card-pro__stock { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; font-weight: 600; color: #16a34a; } .aisc-product-card-pro__stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #16a34a; } .aisc-product-card-pro__cta { font-size: 13px; font-weight: 600; color: var(--aisc-color-accent, #2d8cf0); text-decoration: none; white-space: nowrap; } .aisc-product-card-pro__cta:hover { text-decoration: underline; } /* CTA secondary with play icon */ .aisc-btn-with-icon { display: inline-flex; align-items: center; gap: 8px; } .aisc-btn-with-icon .aisc-icon { width: 16px; height: 16px; } /* Play icon (Lucide play) */ .aisc-icon-play { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: currentColor; display: inline-block; } /* ==================================================================== * v3.5.1 — Hero self-containment + safety nets * Make the asymmetric hero look correct even when: * - the AI forgot to wrap it in aisc-section--noir * - generate_image was skipped (no inside the card) * - the page is on a light theme * Goal: never render a white, invisible, empty hero again. * ==================================================================== */ /* Hero is dark by default — defensive */ .aisc-hero-split { background: linear-gradient(180deg, #0e1014 0%, #16181f 100%); color: #fff !important; border-radius: 0; overflow: hidden; /* clip the ::before radial + watermark on mobile */ overflow-x: clip; isolation: isolate; } .aisc-hero-split::before { /* Subtle radial spotlight to add depth without an image */ content: ""; position: absolute; inset: -10% -10% auto auto; width: 60vw; height: 60vw; max-width: 720px; max-height: 720px; background: radial-gradient(closest-side, color-mix(in srgb, var(--aisc-color-accent, #6e56cf) 35%, transparent), transparent 70%); filter: blur(40px); pointer-events: none; z-index: 0; } /* Heading is ALWAYS visible — explicit color, not inherited. !important needed to beat theme/vibe overrides on dark bg. */ .aisc-hero-split .aisc-display, .aisc-hero-split__copy .aisc-display { color: #fff !important; } .aisc-hero-split .aisc-lead, .aisc-hero-split__copy .aisc-lead { color: rgba(255, 255, 255, 0.78) !important; } .aisc-hero-split .aisc-eyebrow-pill { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.82) !important; } /* Accent word — explicit accent color BEFORE background-clip; if clip fails, accent stays visible */ .aisc-hero-split .aisc-display-accent-word, .aisc-display-accent-word { color: var(--aisc-color-accent, #6e56cf); } @supports (background-clip: text) or (-webkit-background-clip: text) { .aisc-display-accent-word { background: linear-gradient(135deg, var(--aisc-color-accent, #6e56cf), #c4b8ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } /* Watermark — high contrast on dark, sized so it can't accidentally double as the heading */ .aisc-hero-split .aisc-watermark-text, .aisc-watermark-text { color: #fff; opacity: 0.045; font-size: clamp(140px, 22vw, 320px); letter-spacing: -0.05em; left: clamp(-60px, -4vw, -20px); z-index: 0; max-width: 100%; overflow: hidden; } /* Image card — placeholder when no inside */ .aisc-hero-card-image { background: linear-gradient(135deg, #1c1f27 0%, #2a2f3a 60%, color-mix(in srgb, var(--aisc-color-accent, #6e56cf) 30%, #2a2f3a 70%) 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06); min-height: 320px; display: flex; align-items: center; justify-content: center; position: relative; } /* Show a soft brand mark when the card is empty (no img child) */ .aisc-hero-card-image:not(:has(img))::after { content: "✦"; font-size: 96px; color: rgba(255, 255, 255, 0.12); font-weight: 200; } .aisc-hero-card-image img { border-radius: inherit; } /* Inset stat cards — ensure they always sit nicely whether image is there or not */ .aisc-hero-split__media { display: flex; flex-direction: column; } .aisc-hero-stats-inset { margin-top: -1px; /* sit flush with image bottom */ border-radius: 0 0 28px 28px; border-top: 1px solid rgba(255, 255, 255, 0.08); } /* Light-mode variant for users who explicitly want a bright hero */ .aisc-hero-split.aisc-hero-split--light { background: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%); color: var(--aisc-color-text, #0e1014); } .aisc-hero-split--light .aisc-display, .aisc-hero-split--light .aisc-display * { color: var(--aisc-color-text, #0e1014); } .aisc-hero-split--light .aisc-lead { color: var(--aisc-color-muted, #50575e); } .aisc-hero-split--light .aisc-watermark-text { color: var(--aisc-color-text, #0e1014); opacity: 0.04; } .aisc-hero-split--light .aisc-hero-card-image { background: linear-gradient(135deg, #f6f7f9 0%, #e9ebef 100%); box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 12px 32px rgba(0,0,0,0.08); } .aisc-hero-split--light .aisc-hero-stats-inset { background: rgba(20, 23, 28, 0.94); border-color: rgba(0,0,0,0.08); } /* ==================================================================== * v4.2.1 — MOTION & MICRO-INTERACTIONS (Lovable-grade) * Scroll-reveal, animated gradients, glow effects, stagger children. * All gated behind prefers-reduced-motion. * ==================================================================== */ /* ---------- 1. Scroll-reveal entrance animations -------------------- */ /* Elements with .aisc-reveal start invisible and animate in when IntersectionObserver adds .is-visible. The JS lives in breakout-fix.js. */ .aisc-reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .aisc-reveal.is-visible { opacity: 1; transform: translateY(0); } /* Slide-in from left / right variants */ .aisc-reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .aisc-reveal-left.is-visible { opacity: 1; transform: translateX(0); } .aisc-reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .aisc-reveal-right.is-visible { opacity: 1; transform: translateX(0); } /* Scale-up variant — good for hero images / stats */ .aisc-reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .aisc-reveal-scale.is-visible { opacity: 1; transform: scale(1); } /* ---------- 2. Stagger children -------------------------------------- */ /* Add .aisc-stagger to a parent (e.g. grid) — each .aisc-reveal child gets an increasing delay so cards cascade in. Max 12 children. */ .aisc-stagger > .aisc-reveal:nth-child(1), .aisc-stagger > .aisc-reveal-left:nth-child(1), .aisc-stagger > .aisc-reveal-right:nth-child(1), .aisc-stagger > .aisc-reveal-scale:nth-child(1) { transition-delay: 0s; } .aisc-stagger > .aisc-reveal:nth-child(2), .aisc-stagger > .aisc-reveal-left:nth-child(2), .aisc-stagger > .aisc-reveal-right:nth-child(2), .aisc-stagger > .aisc-reveal-scale:nth-child(2) { transition-delay: 0.08s; } .aisc-stagger > .aisc-reveal:nth-child(3), .aisc-stagger > .aisc-reveal-left:nth-child(3), .aisc-stagger > .aisc-reveal-right:nth-child(3), .aisc-stagger > .aisc-reveal-scale:nth-child(3) { transition-delay: 0.16s; } .aisc-stagger > .aisc-reveal:nth-child(4), .aisc-stagger > .aisc-reveal-left:nth-child(4), .aisc-stagger > .aisc-reveal-right:nth-child(4), .aisc-stagger > .aisc-reveal-scale:nth-child(4) { transition-delay: 0.24s; } .aisc-stagger > .aisc-reveal:nth-child(5), .aisc-stagger > .aisc-reveal-left:nth-child(5), .aisc-stagger > .aisc-reveal-right:nth-child(5), .aisc-stagger > .aisc-reveal-scale:nth-child(5) { transition-delay: 0.32s; } .aisc-stagger > .aisc-reveal:nth-child(6), .aisc-stagger > .aisc-reveal-left:nth-child(6), .aisc-stagger > .aisc-reveal-right:nth-child(6), .aisc-stagger > .aisc-reveal-scale:nth-child(6) { transition-delay: 0.40s; } .aisc-stagger > :nth-child(n+7) { transition-delay: 0.48s; } /* ---------- 3. Animated gradient border (hero card, featured) -------- */ .aisc-glow-border { position: relative; border-radius: var(--aisc-radius-lg); overflow: hidden; } .aisc-glow-border::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; background: conic-gradient( from var(--aisc-glow-angle, 0deg), var(--aisc-color-accent) 0%, var(--aisc-color-accent-2) 33%, transparent 50%, var(--aisc-color-accent) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; animation: aisc-glow-spin 4s linear infinite; opacity: 0.7; pointer-events: none; } @keyframes aisc-glow-spin { to { --aisc-glow-angle: 360deg; } } @property --aisc-glow-angle { syntax: ''; initial-value: 0deg; inherits: false; } /* Static gradient border fallback (for browsers without @property) */ @supports not (syntax: '') { .aisc-glow-border::before { background: linear-gradient(135deg, var(--aisc-color-accent), var(--aisc-color-accent-2), transparent, var(--aisc-color-accent)); animation: none; } } /* ---------- 4. Glassmorphism card (enhanced) ------------------------- */ .aisc-glass-card { background: rgba(255,255,255,0.06); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--aisc-radius-lg); padding: 32px; transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .aisc-glass-card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px -20px rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.18); } /* Light-theme glass */ .aisc-section:not(.aisc-section--dark):not(.aisc-section--noir) .aisc-glass-card { background: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.5); } /* ---------- 5. Accent glow on primary CTA hover --------------------- */ .aisc-btn-primary:hover, .wp-block-button.aisc-btn-primary .wp-block-button__link:hover { box-shadow: 0 0 0 1px rgba(99,102,241,0.15), 0 0 24px -4px color-mix(in srgb, var(--aisc-color-accent) 55%, transparent), 0 20px 48px -16px color-mix(in srgb, var(--aisc-color-accent) 35%, transparent); } /* ---------- 6. Text shimmer on accent word --------------------------- */ .aisc-shimmer { position: relative; overflow: hidden; display: inline-block; } .aisc-shimmer::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 40%, rgba(255,255,255,0.25) 50%, transparent 60% ); animation: aisc-shimmer-slide 3s ease-in-out infinite; pointer-events: none; } @keyframes aisc-shimmer-slide { 0%, 100% { transform: translateX(-120%); } 50% { transform: translateX(120%); } } /* ---------- 7. Number counter animation (stats) ---------------------- */ .aisc-stat__number { font-variant-numeric: tabular-nums; } /* ---------- 8. Floating orbs (enhanced background) ------------------- */ /* Orbs use negative offsets (left:-5%, right:-8%) that break out of the viewport on mobile. Clip them at the section boundary. */ .aisc-bg-orbs { position: relative; overflow: hidden; } .aisc-bg-orbs::before, .aisc-bg-orbs::after { content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%; filter: blur(100px); opacity: 0.15; z-index: 0; pointer-events: none; } .aisc-bg-orbs::before { background: var(--aisc-color-accent); top: -10%; left: -5%; animation: aisc-orb-float-1 18s ease-in-out infinite alternate; } .aisc-bg-orbs::after { background: var(--aisc-color-accent-2); bottom: -15%; right: -8%; animation: aisc-orb-float-2 22s ease-in-out infinite alternate; } @keyframes aisc-orb-float-1 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(60px, 40px) scale(1.15); } } @keyframes aisc-orb-float-2 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-50px, -30px) scale(1.1); } } /* ---------- 9. Gradient text that pulses subtly ---------------------- */ .aisc-grad-text-animated { background: linear-gradient( 135deg, var(--aisc-color-accent) 0%, var(--aisc-color-accent-2) 50%, var(--aisc-color-accent) 100% ); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: aisc-grad-flow 4s ease-in-out infinite; } @keyframes aisc-grad-flow { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } } /* ---------- 10. Enhanced card hover with glow ring ------------------- */ .aisc-card--glow { position: relative; } .aisc-card--glow::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--aisc-grad); opacity: 0; z-index: -1; transition: opacity 0.3s ease; filter: blur(12px); } .aisc-card--glow:hover::after { opacity: 0.25; } /* ---------- Respect reduced motion ----------------------------------- */ @media (prefers-reduced-motion: reduce) { .aisc-reveal, .aisc-reveal-left, .aisc-reveal-right, .aisc-reveal-scale { opacity: 1; transform: none; transition: none; } .aisc-glow-border::before { animation: none; } .aisc-shimmer::after { animation: none; display: none; } .aisc-grad-text-animated { animation: none; } .aisc-bg-orbs::before, .aisc-bg-orbs::after { animation: none; } } /* ==================================================================== * v4.5.5 — Extra mobile overflow protection * ==================================================================== * Some mobile browsers (older Samsung Internet, UC Browser) don't fully * respect overflow-x: clip on body. Belt-and-suspenders: also contain * paint on sections that have decorative overflow elements (watermarks, * orbs, radial spotlights). And hide the admin bar's min-width impact. */ @media (max-width: 782px) { #wpadminbar { min-width: 0 !important; overflow-x: hidden !important; } } @media (max-width: 600px) { .aisc-hero-split, .aisc-bg-orbs, .aisc-hero { contain: paint; } .aisc-hero-split::before { width: 80vw; max-width: 300px; } .aisc-bg-orbs::before, .aisc-bg-orbs::after { width: 280px; height: 280px; left: 0 !important; right: 0 !important; } /* v4.5.6: CTA button rows — stack vertically on narrow screens so buttons don't get cut off at the viewport edge. */ .aisc-hero__cta-row, .wp-block-buttons { flex-direction: column !important; align-items: center !important; } .aisc-hero__cta-row .wp-block-button, .wp-block-buttons .wp-block-button { width: 100%; max-width: 280px; } .aisc-hero__cta-row .aisc-btn, .aisc-hero__cta-row .wp-block-button__link, .wp-block-buttons .aisc-btn, .wp-block-buttons .wp-block-button__link { width: 100%; text-align: center; } }