/* * DO NOT EDIT THIS FILE. * See the following change record for more information, * https://www.drupal.org/node/3084859 * @preserve */ /** * @file * Dark Purple AI Theme — source with PostCSS nesting. * * Compiled to css/theme/theme-dark-purple.css by `yarn build:css`. * Scoped entirely to body[data-theme="dark-purple"] so the classic * and purple themes coexist with zero style bleed. * * @see js/theme-switcher.js — sets data-theme on * @see sp.libraries.yml — loaded via sp/theme-dark-purple library */ /* ================================================================ §1 · DESIGN TOKENS Reverse-engineered from reference image: dark violet AI landing page. Primary accent = clean standard violet #7c3aed (not neon/pink-shifted). Backgrounds are extremely dark — near-black with faint purple warmth. ================================================================ */ body[data-theme="dark-purple"] { /* — Deep backgrounds (match the near-black reference palette) — */ --ai-bg-deepest: #06040b; --ai-bg-page: #08060f; --ai-bg-card: #0d0a1c; --ai-bg-elevated: #130f24; --ai-bg-hover: #1a1430; --ai-bg-glass: rgba(255, 255, 255, 0.025); --ai-bg-overlay: rgba(6, 4, 11, 0.85); /* — Violet palette (standard violet scale, clean & professional) — */ --ai-violet-700: #5b21b6; --ai-violet-600: #7c3aed; /* ← primary brand colour from reference */ --ai-violet-500: #8b5cf6; --ai-violet-400: #a78bfa; --ai-violet-300: #c4b5fd; --ai-violet-200: #ddd6fe; /* — Legacy purple aliases (kept for backward compat with Bootstrap overrides) — */ --ai-purple-950: #1a0533; --ai-purple-900: #2d0a5e; --ai-purple-800: #3d0f7a; --ai-purple-700: var(--ai-violet-700); --ai-purple-600: var(--ai-violet-600); --ai-purple-500: var(--ai-violet-500); --ai-purple-400: var(--ai-violet-400); --ai-purple-300: var(--ai-violet-300); --ai-purple-200: var(--ai-violet-200); /* — Pink / rose secondary accent (visible in gradient CTAs & accents) — */ --ai-pink-600: #db2777; --ai-pink-500: #ec4899; --ai-pink-400: #f472b6; /* — Neon utility colours — */ --ai-neon-violet: #bf00ff; --ai-neon-blue: #00b4ff; --ai-neon-pink: #ff2d78; --ai-neon-cyan: #00ffe5; --ai-neon-green: #00ffa5; /* — Typography (pure white headings; warm muted secondary) — */ --ai-text-primary: #fff; --ai-text-secondary: #a09ab8; --ai-text-muted: #5c5474; --ai-text-accent: var(--ai-violet-400); /* — Borders (lighter opacity to match reference's subtle card edges) — */ --ai-border: rgba(124, 58, 237, 0.15); --ai-border-soft: rgba(124, 58, 237, 0.1); --ai-border-glow: rgba(124, 58, 237, 0.5); /* — Gradients — */ /* Heading gradient: white fades into light lavender — ref image style */ --ai-gradient-heading: linear-gradient(135deg, #fff 25%, #c4b5fd 100%); /* Accent gradient: lavender→pink — for CTAs, badges, decorative text */ --ai-gradient-accent: linear-gradient(135deg, #a78bfa 0%, #ec4899 100%); /* CTA button: solid violet range */ --ai-gradient-cta: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%); /* Card inner surface */ --ai-gradient-card: linear-gradient(145deg, rgba(13, 10, 28, 0.97) 0%, rgba(19, 15, 36, 0.93) 100%); /* Subtle section alternation */ --ai-gradient-subtle: linear-gradient(180deg, var(--ai-bg-page) 0%, var(--ai-bg-deepest) 100%); /* Hero background atmosphere — large radial violet bloom */ --ai-gradient-hero-atmo: radial-gradient(ellipse 75% 55% at 65% 45%, rgba(124, 58, 237, 0.18) 0%, transparent 65%); /* Mockup glow — purple corona under floating screenshot */ --ai-gradient-mockup-glow: radial-gradient(ellipse at 50% 100%, rgba(124, 58, 237, 0.55) 0%, transparent 65%); /* CTA block bottom atmosphere */ --ai-gradient-cta-atmo: radial-gradient(ellipse 60% 45% at 50% 105%, rgba(124, 58, 237, 0.22) 0%, transparent 60%); /* — Glows (using the standard violet base #7c3aed → rgb 124,58,237) — */ --ai-glow-xs: 0 0 0.375rem rgba(124, 58, 237, 0.35); --ai-glow-sm: 0 0 0.875rem rgba(124, 58, 237, 0.45); --ai-glow-md: 0 0 1.5rem rgba(124, 58, 237, 0.55), 0 0 3.125rem rgba(124, 58, 237, 0.18); --ai-glow-lg: 0 0 2.375rem rgba(124, 58, 237, 0.65), 0 0 5.9375rem rgba(124, 58, 237, 0.28); --ai-glow-neon: 0 0 0.5rem #bf00ff, 0 0 1.75rem rgba(191, 0, 255, 0.35); --ai-glow-blue: 0 0 0.5rem #00b4ff, 0 0 1.75rem rgba(0, 180, 255, 0.35); --ai-glow-cyan: 0 0 0.5rem #00ffe5, 0 0 1.75rem rgba(0, 255, 229, 0.3); /* Violet button glow — used on .ai-btn--primary */ --ai-glow-violet: 0 0.25rem 1.25rem rgba(124, 58, 237, 0.5); /* — Shadows — */ --ai-shadow-card: 0 0.5rem 2rem rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(124, 58, 237, 0.1); --ai-shadow-elevated: 0 1.5rem 3.75rem rgba(0, 0, 0, 0.9), 0 0 2.5rem rgba(124, 58, 237, 0.08); --ai-shadow-mockup: 0 1.5rem 4.375rem rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(124, 58, 237, 0.18); /* — Radii — */ --ai-radius-xs: 0.25rem; --ai-radius-sm: 0.5rem; --ai-radius-md: 0.875rem; --ai-radius-lg: 1.25rem; --ai-radius-xl: 2rem; /* — Motion — */ --ai-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --ai-transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================================ §2 · BASE ================================================================ */ body[data-theme="dark-purple"] { color: var(--ai-text-primary); background-color: var(--ai-bg-page); } body[data-theme="dark-purple"] a { transition: color var(--ai-transition), text-shadow var(--ai-transition); text-decoration: none; color: var(--ai-text-accent); } body[data-theme="dark-purple"] a:hover, body[data-theme="dark-purple"] a:focus { color: var(--ai-purple-300); text-shadow: var(--ai-glow-xs); } body[data-theme="dark-purple"] h1, body[data-theme="dark-purple"] h2, body[data-theme="dark-purple"] h3, body[data-theme="dark-purple"] h4, body[data-theme="dark-purple"] h5, body[data-theme="dark-purple"] h6 { color: var(--ai-text-primary); } body[data-theme="dark-purple"] p { color: var(--ai-text-secondary); } body[data-theme="dark-purple"] hr { border-color: var(--ai-border); } /* Scrollbar */ body[data-theme="dark-purple"] { scrollbar-color: var(--ai-purple-700) var(--ai-bg-deepest); scrollbar-width: thin; } body[data-theme="dark-purple"] ::-webkit-scrollbar { width: 0.3125rem; } body[data-theme="dark-purple"] ::-webkit-scrollbar-track { background: var(--ai-bg-deepest); } body[data-theme="dark-purple"] ::-webkit-scrollbar-thumb { border-radius: 0.1875rem; background: var(--ai-purple-700); } body[data-theme="dark-purple"] ::-webkit-scrollbar-thumb:hover { background: var(--ai-purple-500); } /* ================================================================ §3 · LAYOUT WRAPPERS ================================================================ */ body[data-theme="dark-purple"] #page-wrapper, body[data-theme="dark-purple"] #page { background-color: var(--ai-bg-page); } body[data-theme="dark-purple"] .container { color: var(--ai-text-primary); background-color: transparent; } /* ================================================================ §4 · PRELOADER Replaces the legacy GIF with a hardware-accelerated CSS spinner. Scoped to body[data-theme="dark-purple"] only — every other theme keeps rendering the original #preloader > img GIF untouched. ================================================================ */ body[data-theme="dark-purple"] #preloader { display: flex; align-items: center; justify-content: center; background-color: var(--ai-bg-deepest); } body[data-theme="dark-purple"] #preloader .preloader__gif { display: none; } body[data-theme="dark-purple"] #preloader .preloader__spinner { position: relative; display: block; width: 4.5rem; height: 4.5rem; } body[data-theme="dark-purple"] #preloader .preloader__ring { position: absolute; animation: ai-preloader-spin 1.1s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite; border: 3px solid transparent; border-top-color: var(--ai-violet-500); border-right-color: var(--ai-violet-400); border-radius: 50%; inset: 0; will-change: transform; } body[data-theme="dark-purple"] #preloader .preloader__ring:nth-child(2) { animation-duration: 1.6s; animation-direction: reverse; opacity: 0.85; border-top-color: var(--ai-pink-500); border-right-color: transparent; inset: 0.625rem; } body[data-theme="dark-purple"] #preloader .preloader__ring:nth-child(3) { animation-duration: 0.9s; opacity: 0.6; border-top-color: var(--ai-neon-cyan); border-right-color: transparent; inset: 1.25rem; } @keyframes ai-preloader-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { body[data-theme="dark-purple"] #preloader .preloader__ring { animation: none; border-top-color: var(--ai-violet-500); border-right-color: transparent; } } /* ================================================================ §5 · NAVIGATION (Bootstrap 3 navbar + slide-out panel) ================================================================ */ body[data-theme="dark-purple"] #navigation.navbar { border-top: none; border-bottom: 1px solid var(--ai-border-glow); background-color: #ffffff1a; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(147, 51, 234, 0.25); -webkit-backdrop-filter: blur(0.4375rem); backdrop-filter: blur(0.4375rem); } body[data-theme="dark-purple"] .navbar-brand h1#logo { color: var(--ai-text-primary); } body[data-theme="dark-purple"] .navbar-brand h1#logo img { filter: brightness(1.2) drop-shadow(0 0 0.5rem rgba(147, 51, 234, 0.55)); } body[data-theme="dark-purple"] .navbar-nav > li > a { position: relative; transition: color var(--ai-transition), text-shadow var(--ai-transition); letter-spacing: 0.02em; color: var(--ai-text-secondary); font-weight: 500; } body[data-theme="dark-purple"] .navbar-nav > li > a:hover, body[data-theme="dark-purple"] .navbar-nav > li > a:focus { color: var(--ai-text-accent); background-color: transparent; text-shadow: var(--ai-glow-xs); } body[data-theme="dark-purple"] .navbar-nav > li.active > a, body[data-theme="dark-purple"] .navbar-nav > li.active > a:hover, body[data-theme="dark-purple"] .navbar-nav > li.active > a:focus { color: var(--ai-purple-300); background-color: transparent; text-shadow: var(--ai-glow-xs); } body[data-theme="dark-purple"] .navbar-toggle { border-color: var(--ai-border-glow); } body[data-theme="dark-purple"] .navbar-toggle .icon-bar { background-color: var(--ai-text-accent); } body[data-theme="dark-purple"] .navbar-toggle:hover, body[data-theme="dark-purple"] .navbar-toggle:focus { background-color: rgba(147, 51, 234, 0.18); } body[data-theme="dark-purple"] .navbar-collapse { border-color: var(--ai-border); } @media (max-width: 47.9375rem) { body[data-theme="dark-purple"] .navbar-collapse { border-top: 1px solid var(--ai-border); background-color: rgba(6, 3, 16, 0.96); } } body[data-theme="dark-purple"] .menu__panel { border-inline-end: 1px solid var(--ai-border); background-color: var(--ai-bg-deepest); box-shadow: 4px 0 30px rgba(0, 0, 0, 0.6); } body[data-theme="dark-purple"] .menu__overlay { background: rgba(6, 3, 16, 0.7); -webkit-backdrop-filter: blur(0.25rem); backdrop-filter: blur(0.25rem); } /* ================================================================ §6 · HERO SLIDER (Bootstrap 3 carousel) ================================================================ */ body[data-theme="dark-purple"] #slider { position: relative; } body[data-theme="dark-purple"] #slider .carousel-inner .item { position: relative; } body[data-theme="dark-purple"] #slider .carousel-inner .item::before { position: absolute; z-index: 1; content: ""; background: linear-gradient( to bottom, rgba(6, 3, 16, 0.35) 0%, rgba(13, 8, 32, 0.65) 55%, rgba(6, 3, 16, 0.92) 100% ); inset: 0; } body[data-theme="dark-purple"] .carousel-caption { /* position: relative; */ z-index: 10; } body[data-theme="dark-purple"] .service-icon { color: var(--ai-purple-500); border: 1px solid var(--ai-purple-500); border-radius: 50%; /* float: left; */ /* padding: 10px 13px; */ } body[data-theme="dark-purple"] .counters-item i { display: block; margin: 0 auto; } body[data-theme="dark-purple"] .project-wrapper figure { margin-bottom: 1.5rem; transition: transform var(--ai-transition), box-shadow var(--ai-transition), border-color var(--ai-transition); background: transparent; /* border: 1px solid var(--ai-border); border-radius: var(--ai-radius-lg); background: var(--ai-gradient-card); box-shadow: var(--ai-shadow-card); */ } body[data-theme="dark-purple"] figure.mix.work-item img { padding: 0.3125rem; transition: transform var(--ai-transition), box-shadow var(--ai-transition), border-color var(--ai-transition); border: none; border-color: transparent; border-radius: var(--ai-radius-lg); background-color: transparent;/* var(--ai-purple-500); */ } body[data-theme="dark-purple"] figure.mix.work-item img:hover { transform: translateY(-0.375rem); border-color: var(--ai-border-glow); box-shadow: var(--ai-shadow-elevated), var(--ai-glow-sm); } body[data-theme="dark-purple"] .carousel-caption h2 { letter-spacing: -0.02em; color: var(--ai-text-primary); text-shadow: 0 0 1.875rem rgba(147, 51, 234, 0.8), 0 2px 0.625rem rgba(0, 0, 0, 0.8); font-weight: 700; } body[data-theme="dark-purple"] .carousel-caption h2 span { } body[data-theme="dark-purple"] .carousel-caption h3 { color: var(--ai-text-secondary); } body[data-theme="dark-purple"] .carousel-caption h3 span.color { color: var(--ai-neon-cyan); text-shadow: var(--ai-glow-cyan); } body[data-theme="dark-purple"] .carousel-caption p { color: var(--ai-text-muted); } body[data-theme="dark-purple"] .carousel-caption .social-links li a { transition: color var(--ai-transition), text-shadow var(--ai-transition); color: var(--ai-text-muted); } body[data-theme="dark-purple"] .carousel-caption .social-links li a:hover { color: var(--ai-text-accent); text-shadow: var(--ai-glow-neon); } body[data-theme="dark-purple"] .carousel-indicators li { transition: background-color var(--ai-transition), box-shadow var(--ai-transition); border-color: var(--ai-purple-500); background-color: transparent; } body[data-theme="dark-purple"] .carousel-indicators li.active { background-color: var(--ai-purple-500); box-shadow: var(--ai-glow-sm); } body[data-theme="dark-purple"] .carousel-control { transition: opacity var(--ai-transition); opacity: 0.55; background-image: none; } body[data-theme="dark-purple"] .carousel-control:hover, body[data-theme="dark-purple"] .carousel-control:focus { opacity: 1; } /* ================================================================ §7 · SECTION HEADERS ================================================================ */ body[data-theme="dark-purple"] .sec-title h2 { letter-spacing: -0.01em; color: var(--ai-text-primary); font-weight: 700; } body[data-theme="dark-purple"] .sec-sub-title p { color: var(--ai-text-secondary); } body[data-theme="dark-purple"] .devider i { animation: ai-pulse-glow 3s ease-in-out infinite; color: var(--ai-purple-500); text-shadow: var(--ai-glow-neon); } /* ================================================================ §8 · FEATURES SECTION ================================================================ */ body[data-theme="dark-purple"] #features { background-color: var(--ai-bg-page); } body[data-theme="dark-purple"] .service-item { transition: transform var(--ai-transition), box-shadow var(--ai-transition), border-color var(--ai-transition); border: 1px solid var(--ai-border); border-radius: var(--ai-radius-lg); background: var(--ai-gradient-card); box-shadow: var(--ai-shadow-card); } body[data-theme="dark-purple"] .service-item:hover { transform: translateY(-0.375rem); border-color: var(--ai-border-glow); box-shadow: var(--ai-shadow-elevated), var(--ai-glow-sm); } body[data-theme="dark-purple"] .service-icon i { transition: color var(--ai-transition), text-shadow var(--ai-transition); color: var(--ai-purple-400); text-shadow: var(--ai-glow-neon); } body[data-theme="dark-purple"] .service-item:hover .service-icon i { color: var(--ai-neon-violet); text-shadow: var(--ai-glow-neon); } body[data-theme="dark-purple"] .service-desc h3 { color: var(--ai-text-primary); font-weight: 600; } body[data-theme="dark-purple"] .service-desc p { color: var(--ai-text-secondary); } /* ================================================================ §9 · PORTFOLIO / WORKS SECTION ================================================================ */ body[data-theme="dark-purple"] #works { background-color: var(--ai-bg-deepest); } body[data-theme="dark-purple"] .work-filter ul li a { padding: 0.35rem 1.1rem; transition: all var(--ai-transition); color: var(--ai-text-secondary); border: 1px solid var(--ai-border); border-radius: var(--ai-radius-xl); background: transparent; } body[data-theme="dark-purple"] .work-filter ul li a:hover, body[data-theme="dark-purple"] .work-filter ul li a.active { text-decoration: none; color: var(--ai-text-primary); border-color: var(--ai-purple-500); background-color: var(--ai-purple-700); box-shadow: var(--ai-glow-xs); } body[data-theme="dark-purple"] .work-item figcaption.overlay { background: linear-gradient( to top, rgba(6, 3, 16, 0.95) 0%, rgba(45, 10, 94, 0.82) 55%, transparent 100% ); } body[data-theme="dark-purple"] .work-item figcaption.overlay h4 { color: var(--ai-text-primary); } body[data-theme="dark-purple"] .work-item figcaption.overlay p { color: var(--ai-text-accent); } body[data-theme="dark-purple"] .work-item figcaption.overlay a i { color: var(--ai-neon-violet); text-shadow: var(--ai-glow-neon); } /* ================================================================ §10 · TEAM SECTION ================================================================ */ body[data-theme="dark-purple"] #team { background-color: var(--ai-bg-page); } body[data-theme="dark-purple"] .team-member .member-thumb figcaption.overlay { background: linear-gradient(to top, rgba(6, 3, 16, 0.92) 0%, rgba(45, 10, 94, 0.7) 60%, transparent 100%); } body[data-theme="dark-purple"] .team-member h4 { color: var(--ai-text-primary); } body[data-theme="dark-purple"] .team-member span { color: var(--ai-text-accent); } /* ================================================================ §11 · PRICING SECTION ================================================================ */ body[data-theme="dark-purple"] #price { background: var(--ai-gradient-subtle); } body[data-theme="dark-purple"] .price-item { position: relative; overflow: hidden; transition: transform var(--ai-transition), box-shadow var(--ai-transition), border-color var(--ai-transition); border: 1px solid var(--ai-border); border-radius: var(--ai-radius-lg); background: var(--ai-gradient-card); box-shadow: var(--ai-shadow-card); } body[data-theme="dark-purple"] .price-item::before { position: absolute; height: 2px; content: ""; transition: opacity var(--ai-transition); opacity: 0; background: var(--ai-gradient-cta); inset-block-start: 0; inset-inline-start: 0; inset-inline-end: 0; } body[data-theme="dark-purple"] .price-item:hover { transform: translateY(-0.4375rem); border-color: var(--ai-border-glow); box-shadow: var(--ai-shadow-elevated); } body[data-theme="dark-purple"] .price-item:hover::before { opacity: 1; } body[data-theme="dark-purple"] .price-item-title, body[data-theme="dark-purple"] .price-item-title:hover, body[data-theme="dark-purple"] .price-item-title:focus { letter-spacing: 0.04em; color: var(--ai-text-primary); font-weight: 700; } body[data-theme="dark-purple"] .price-item-text { color: var(--ai-text-secondary); line-height: 1.65; } body[data-theme="dark-purple"] .price-item-time { color: var(--ai-neon-cyan); text-shadow: var(--ai-glow-cyan); font-size: 0.85rem; font-weight: 600; } body[data-theme="dark-purple"] .price-item-price { background: var(--ai-gradient-accent); -webkit-background-clip: text; background-clip: text; font-weight: 800; -webkit-text-fill-color: transparent; } body[data-theme="dark-purple"] .price-item-price i { -webkit-text-fill-color: var(--ai-purple-400); } body[data-theme="dark-purple"] .price-item-icon i { transition: color var(--ai-transition), text-shadow var(--ai-transition); color: var(--ai-purple-500); text-shadow: var(--ai-glow-neon); } body[data-theme="dark-purple"] .price-item:hover .price-item-icon i { color: var(--ai-neon-violet); text-shadow: var(--ai-glow-neon); } /* ================================================================ §12 · BUTTONS & LINKS ================================================================ */ body[data-theme="dark-purple"] .btn2, body[data-theme="dark-purple"] .button, body[data-theme="dark-purple"] button:not(.theme-switcher, .toolbar-icon, .toolbar-handle), body[data-theme="dark-purple"] input[type="submit"], body[data-theme="dark-purple"] input[type="button"], body[data-theme="dark-purple"] .su-button { cursor: pointer; transition: transform var(--ai-transition), box-shadow var(--ai-transition), filter var(--ai-transition); text-decoration: none; letter-spacing: 0.03em; color: #fff; border: none; border-radius: var(--ai-radius-xl); background: var(--ai-gradient-cta); box-shadow: var(--ai-glow-xs), 0 4px 16px rgba(0, 0, 0, 0.45); font-weight: 600; /* display: inline-block; */ } body[data-theme="dark-purple"] .btn2:hover, body[data-theme="dark-purple"] .btn2:focus, body[data-theme="dark-purple"] .button:hover, body[data-theme="dark-purple"] .button:focus, body[data-theme="dark-purple"] button:not(.theme-switcher):hover, body[data-theme="dark-purple"] button:not(.theme-switcher):focus, body[data-theme="dark-purple"] input[type="submit"]:hover, body[data-theme="dark-purple"] input[type="submit"]:focus, body[data-theme="dark-purple"] input[type="button"]:hover, body[data-theme="dark-purple"] input[type="button"]:focus, body[data-theme="dark-purple"] .su-button:hover, body[data-theme="dark-purple"] .su-button:focus { transform: translateY(-2px); text-decoration: none; filter: brightness(1.1); color: #fff; box-shadow: var(--ai-glow-md), 0 8px 28px rgba(0, 0, 0, 0.5); } body[data-theme="dark-purple"] .btn2:active, body[data-theme="dark-purple"] .button:active, body[data-theme="dark-purple"] button:not(.theme-switcher):active, body[data-theme="dark-purple"] input[type="submit"]:active, body[data-theme="dark-purple"] input[type="button"]:active, body[data-theme="dark-purple"] .su-button:active { transform: translateY(0); filter: brightness(0.95); } /* ================================================================ §13 · FORM ELEMENTS ================================================================ */ body[data-theme="dark-purple"] .form-control, body[data-theme="dark-purple"] input[type="text"], body[data-theme="dark-purple"] input[type="email"], body[data-theme="dark-purple"] input[type="tel"], body[data-theme="dark-purple"] input[type="search"], body[data-theme="dark-purple"] textarea { transition: border-color var(--ai-transition), box-shadow var(--ai-transition), background-color var(--ai-transition); color: var(--ai-text-primary); border: 1px solid var(--ai-border); border-radius: var(--ai-radius-md); background-color: var(--ai-bg-elevated); } body[data-theme="dark-purple"] .form-control::placeholder, body[data-theme="dark-purple"] input[type="text"]::placeholder, body[data-theme="dark-purple"] input[type="email"]::placeholder, body[data-theme="dark-purple"] input[type="tel"]::placeholder, body[data-theme="dark-purple"] textarea::placeholder { color: var(--ai-text-muted); } body[data-theme="dark-purple"] .form-control:focus, body[data-theme="dark-purple"] input[type="text"]:focus, body[data-theme="dark-purple"] input[type="email"]:focus, body[data-theme="dark-purple"] input[type="tel"]:focus, body[data-theme="dark-purple"] textarea:focus { color: var(--ai-text-primary); border-color: var(--ai-purple-500); outline: none; background-color: var(--ai-bg-hover); box-shadow: var(--ai-glow-xs); } body[data-theme="dark-purple"] label { color: var(--ai-text-secondary); } /* ================================================================ §14 · FACTS / COUNTERS SECTION ================================================================ */ body[data-theme="dark-purple"] #facts { position: relative; } body[data-theme="dark-purple"] #facts .parallax-overlay { background: linear-gradient( 135deg, rgba(6, 3, 16, 0.9) 0%, rgba(45, 10, 94, 0.82) 50%, rgba(6, 3, 16, 0.9) 100% ); } body[data-theme="dark-purple"] .counters-item i { display: block; margin-block-end: 1rem; animation: ai-float 4s ease-in-out infinite; color: var(--ai-purple-400); text-shadow: var(--ai-glow-neon); } body[data-theme="dark-purple"] .counters-item strong { display: block; background: var(--ai-gradient-accent); -webkit-background-clip: text; background-clip: text; font-size: 3rem; font-weight: 800; line-height: 1.1; -webkit-text-fill-color: transparent; } body[data-theme="dark-purple"] .counters-item p { letter-spacing: 0.09em; text-transform: uppercase; color: var(--ai-text-muted); font-size: 0.85rem; } /* ================================================================ §15 · CONTACT SECTION ================================================================ */ body[data-theme="dark-purple"] #contact { background-color: var(--ai-bg-page); } body[data-theme="dark-purple"] .contact-address p { color: var(--ai-text-secondary); } body[data-theme="dark-purple"] .contact-address span { color: var(--ai-text-accent); } body[data-theme="dark-purple"] .contact-form h3 { color: var(--ai-text-primary); } body[data-theme="dark-purple"] .footer-social li a i { transition: color var(--ai-transition), text-shadow var(--ai-transition); color: var(--ai-text-muted); } body[data-theme="dark-purple"] .footer-social li a:hover i { color: var(--ai-purple-400); text-shadow: var(--ai-glow-neon); } /* ================================================================ §16 · FOOTER ================================================================ */ body[data-theme="dark-purple"] #footer { border-block-start: 1px solid var(--ai-border); background-color: var(--ai-bg-deepest); } body[data-theme="dark-purple"] .footer-single h6 { margin-block-end: 1rem; padding-block-end: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ai-text-primary); border-block-end: 1px solid var(--ai-border); font-size: 0.78rem; } body[data-theme="dark-purple"] .footer-single p { color: var(--ai-text-secondary); } body[data-theme="dark-purple"] .footer-single ul li a { transition: color var(--ai-transition); color: var(--ai-text-muted); } body[data-theme="dark-purple"] .footer-single ul li a:hover { color: var(--ai-text-accent); } body[data-theme="dark-purple"] .copyright { padding-block-start: 1rem; color: var(--ai-text-muted); border-block-start: 1px solid var(--ai-border); } body[data-theme="dark-purple"] .copyright a { color: var(--ai-text-accent); } body[data-theme="dark-purple"] .copyright a:hover { color: var(--ai-purple-300); } /* ================================================================ §17 · BACK-TO-TOP ================================================================ */ body[data-theme="dark-purple"] #back-top { transition: transform var(--ai-transition), box-shadow var(--ai-transition); border-radius: 50%; background: var(--ai-gradient-cta); box-shadow: var(--ai-glow-sm); } body[data-theme="dark-purple"] #back-top i { color: #fff; } body[data-theme="dark-purple"] #back-top:hover { transform: translateY(-0.1875rem); box-shadow: var(--ai-glow-md); } /* ================================================================ §18 · THEME SWITCHER (active state when dark-purple is on) ================================================================ */ body[data-theme="dark-purple"] .theme-switcher { color: #fff; background: var(--ai-gradient-cta); box-shadow: var(--ai-glow-sm), 0 4px 14px rgba(0, 0, 0, 0.35); } body[data-theme="dark-purple"] .theme-switcher .theme-switcher__icon { background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 0 6px rgba(255, 255, 255, 0.6); } body[data-theme="dark-purple"] .theme-switcher:hover, body[data-theme="dark-purple"] .theme-switcher:focus-visible { filter: brightness(1.18); box-shadow: var(--ai-glow-md), 0 6px 22px rgba(0, 0, 0, 0.45); } /* ================================================================ §19 · AI HERO COMPONENT Full-width hero section with orb glows and grid overlay. Twig template: templates/components/ai-hero.html.twig ================================================================ */ body[data-theme="dark-purple"] .ai-hero { position: relative; display: flex; overflow: hidden; align-items: center; justify-content: center; min-height: 100svh; background: var(--ai-gradient-hero); isolation: isolate; } /* Atmospheric orb blobs */ body[data-theme="dark-purple"] .ai-hero__orb { position: absolute; pointer-events: none; filter: blur(5rem); border-radius: 50%; will-change: transform; } body[data-theme="dark-purple"] .ai-hero__orb--primary { width: 37.5rem; height: 37.5rem; animation: ai-float 8s ease-in-out infinite; background: radial-gradient(circle, rgba(122, 47, 212, 0.45) 0%, transparent 70%); inset-block-start: -12.5rem; inset-inline-end: -6.25rem; } body[data-theme="dark-purple"] .ai-hero__orb--secondary { width: 28.125rem; height: 28.125rem; animation: ai-float 11s ease-in-out infinite reverse; background: radial-gradient(circle, rgba(0, 180, 255, 0.22) 0%, transparent 70%); inset-block-end: -10rem; inset-inline-start: -7.5rem; } body[data-theme="dark-purple"] .ai-hero__orb--accent { width: 20rem; height: 20rem; transform: translate(-50%, -50%); animation: ai-float 13s ease-in-out infinite; background: radial-gradient(circle, rgba(255, 45, 120, 0.2) 0%, transparent 70%); inset-block-start: 50%; inset-inline-start: 50%; } /* Subtle perspective grid */ body[data-theme="dark-purple"] .ai-hero__grid { position: absolute; pointer-events: none; background-image: linear-gradient(rgba(147, 51, 234, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(147, 51, 234, 0.06) 1px, transparent 1px); background-size: 3.75rem 3.75rem; inset: 0; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 100%); mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 100%); } /* Content */ body[data-theme="dark-purple"] .ai-hero__content { position: relative; z-index: 10; max-width: 57.5rem; text-align: center; padding-inline: 2rem; padding-block: 4rem; } body[data-theme="dark-purple"] .ai-hero__eyebrow { display: inline-flex; align-items: center; margin-block-end: 1.75rem; padding: 0.35rem 1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ai-text-accent); border: 1px solid var(--ai-border-glow); border-radius: var(--ai-radius-xl); background: rgba(147, 51, 234, 0.15); font-size: 0.75rem; font-weight: 700; gap: 0.5rem; -webkit-backdrop-filter: blur(0.5rem); backdrop-filter: blur(0.5rem); } body[data-theme="dark-purple"] .ai-hero__eyebrow::before { display: inline-block; flex-shrink: 0; width: 0.375rem; height: 0.375rem; content: ""; animation: ai-pulse-glow 2s ease-in-out infinite; border-radius: 50%; background: var(--ai-neon-violet); box-shadow: var(--ai-glow-neon); } body[data-theme="dark-purple"] .ai-hero__title { margin-block-end: 1.5rem; letter-spacing: -0.03em; color: var(--ai-text-primary); font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 800; line-height: 1.1; } body[data-theme="dark-purple"] .ai-hero__title-gradient { animation: ai-gradient-pan 4s ease infinite; background: var(--ai-gradient-accent); -webkit-background-clip: text; background-clip: text; background-size: 200% auto; -webkit-text-fill-color: transparent; } body[data-theme="dark-purple"] .ai-hero__description { max-width: 38.75rem; margin-block-end: 2.75rem; color: var(--ai-text-secondary); font-size: 1.15rem; line-height: 1.75; margin-inline: auto; } body[data-theme="dark-purple"] .ai-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } body[data-theme="dark-purple"] .ai-hero__cta { display: inline-flex; align-items: center; padding: 0.85rem 2rem; cursor: pointer; transition: transform var(--ai-transition), box-shadow var(--ai-transition), filter var(--ai-transition); text-decoration: none; border-radius: var(--ai-radius-xl); font-size: 1rem; font-weight: 600; gap: 0.5rem; } body[data-theme="dark-purple"] .ai-hero__cta--primary { color: #fff; border: none; background: var(--ai-gradient-cta); box-shadow: var(--ai-glow-md), 0 4px 22px rgba(0, 0, 0, 0.45); } body[data-theme="dark-purple"] .ai-hero__cta--primary:hover { transform: translateY(-0.1875rem); text-decoration: none; filter: brightness(1.1); color: #fff; box-shadow: var(--ai-glow-lg), 0 8px 32px rgba(0, 0, 0, 0.55); } body[data-theme="dark-purple"] .ai-hero__cta--secondary { color: var(--ai-text-accent); border: 1px solid var(--ai-border-glow); background: transparent; -webkit-backdrop-filter: blur(0.5rem); backdrop-filter: blur(0.5rem); } body[data-theme="dark-purple"] .ai-hero__cta--secondary:hover { transform: translateY(-2px); text-decoration: none; color: var(--ai-text-primary); border-color: var(--ai-purple-500); background: rgba(147, 51, 234, 0.14); box-shadow: var(--ai-glow-xs); } /* ================================================================ §20 · AI DASHBOARD CARDS Use class="ai-card" on any card-like element. ================================================================ */ body[data-theme="dark-purple"] .ai-card { position: relative; overflow: hidden; padding: 1.5rem; transition: transform var(--ai-transition), box-shadow var(--ai-transition), border-color var(--ai-transition); border: 1px solid var(--ai-border); border-radius: var(--ai-radius-lg); background: var(--ai-gradient-card); box-shadow: var(--ai-shadow-card); } body[data-theme="dark-purple"] .ai-card::before { position: absolute; width: 0.1875rem; height: 100%; content: ""; transition: opacity var(--ai-transition); opacity: 0; background: var(--ai-gradient-cta); inset-inline-start: 0; inset-block-start: 0; } body[data-theme="dark-purple"] .ai-card:hover { transform: translateY(-0.3125rem); border-color: var(--ai-border-glow); box-shadow: var(--ai-shadow-elevated), var(--ai-glow-xs); } body[data-theme="dark-purple"] .ai-card:hover::before { opacity: 1; } body[data-theme="dark-purple"] .ai-card__header { display: flex; align-items: center; gap: 0.75rem; margin-block-end: 1rem; } body[data-theme="dark-purple"] .ai-card__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; color: var(--ai-purple-400); border: 1px solid var(--ai-border); border-radius: var(--ai-radius-sm); background: rgba(147, 51, 234, 0.2); text-shadow: var(--ai-glow-neon); font-size: 1.1rem; } body[data-theme="dark-purple"] .ai-card__title { margin: 0; color: var(--ai-text-primary); font-size: 0.95rem; font-weight: 600; } body[data-theme="dark-purple"] .ai-card__subtitle { margin: 0; color: var(--ai-text-muted); font-size: 0.78rem; } body[data-theme="dark-purple"] .ai-card__value { margin-block-end: 0.25rem; background: var(--ai-gradient-accent); -webkit-background-clip: text; background-clip: text; font-size: 2.2rem; font-weight: 800; line-height: 1.1; -webkit-text-fill-color: transparent; } body[data-theme="dark-purple"] .ai-card__label { letter-spacing: 0.09em; text-transform: uppercase; color: var(--ai-text-muted); font-size: 0.78rem; } body[data-theme="dark-purple"] .ai-card__badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: var(--ai-radius-xl); font-size: 0.72rem; font-weight: 600; } body[data-theme="dark-purple"] .ai-card__badge--up { color: var(--ai-neon-green); border: 1px solid rgba(0, 255, 165, 0.25); background: rgba(0, 255, 165, 0.12); } body[data-theme="dark-purple"] .ai-card__badge--down { color: var(--ai-neon-pink); border: 1px solid rgba(255, 45, 120, 0.25); background: rgba(255, 45, 120, 0.12); } body[data-theme="dark-purple"] .ai-card__badge--neutral { color: var(--ai-text-accent); border: 1px solid var(--ai-border); background: rgba(147, 51, 234, 0.12); } /* ================================================================ §21 · AI NAVIGATION COMPONENT For new front-end nav separate from Bootstrap navbar. ================================================================ */ body[data-theme="dark-purple"] .ai-nav { position: sticky; z-index: 999; display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 2rem; border-block-end: 1px solid var(--ai-border); background: rgba(6, 3, 16, 0.8); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(147, 51, 234, 0.2); inset-block-start: 0; -webkit-backdrop-filter: blur(1.25rem); backdrop-filter: blur(1.25rem); } body[data-theme="dark-purple"] .ai-nav__logo { text-decoration: none; letter-spacing: -0.03em; background: var(--ai-gradient-accent); -webkit-background-clip: text; background-clip: text; font-size: 1.2rem; font-weight: 800; -webkit-text-fill-color: transparent; } body[data-theme="dark-purple"] .ai-nav__links { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; gap: 2rem; } body[data-theme="dark-purple"] .ai-nav__link { transition: color var(--ai-transition), text-shadow var(--ai-transition); text-decoration: none; color: var(--ai-text-secondary); font-size: 0.9rem; font-weight: 500; } body[data-theme="dark-purple"] .ai-nav__link:hover, body[data-theme="dark-purple"] .ai-nav__link.is-active { color: var(--ai-text-primary); text-shadow: var(--ai-glow-xs); } body[data-theme="dark-purple"] .ai-nav__cta { padding: 0.5rem 1.25rem; transition: transform var(--ai-transition), box-shadow var(--ai-transition), filter var(--ai-transition); text-decoration: none; color: #fff; border-radius: var(--ai-radius-xl); background: var(--ai-gradient-cta); box-shadow: var(--ai-glow-xs); font-size: 0.875rem; font-weight: 600; } body[data-theme="dark-purple"] .ai-nav__cta:hover { transform: translateY(-1px); text-decoration: none; filter: brightness(1.1); color: #fff; box-shadow: var(--ai-glow-md); } /* ================================================================ §22 · KEYFRAME ANIMATIONS ================================================================ */ @keyframes ai-pulse-glow { 0%, 100% { opacity: 1; text-shadow: var(--ai-glow-neon); } 50% { opacity: 0.6; text-shadow: 0 0 0.25rem rgba(147, 51, 234, 0.2); } } @keyframes ai-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.5rem); } } @keyframes ai-gradient-pan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes ai-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ================================================================ §23 · UTILITY CLASSES ================================================================ */ /* Gradient text — use on any inline element or heading span */ body[data-theme="dark-purple"] .ai-gradient-text { background: var(--ai-gradient-heading); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="dark-purple"] .ai-gradient-text--accent { background: var(--ai-gradient-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ================================================================ §24 · AI PAGE SECTIONS Generic padded section wrapper. Use .ai-section--alt for the slightly-tinted alternating-row treatment seen in the reference. ================================================================ */ body[data-theme="dark-purple"] .ai-section { position: relative; padding-block: 5rem; } body[data-theme="dark-purple"] .ai-section--alt { background-color: rgba(124, 58, 237, 0.03); border-block: 1px solid var(--ai-border-soft); } body[data-theme="dark-purple"] .ai-section--dark { background-color: var(--ai-bg-deepest); } /* Centered section heading block — badge + h2 + subtext */ body[data-theme="dark-purple"] .ai-section-header { display: flex; flex-direction: column; align-items: center; max-width: 42.5rem; margin-block-end: 3.5rem; text-align: center; margin-inline: auto; gap: 1rem; } body[data-theme="dark-purple"] .ai-section-header__title { margin: 0; letter-spacing: -0.025em; color: var(--ai-text-primary); font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; line-height: 1.15; } body[data-theme="dark-purple"] .ai-section-header__sub { max-width: 33.75rem; margin: 0; color: var(--ai-text-secondary); font-size: 1rem; line-height: 1.7; } /* ================================================================ §25 · AI BADGE / PILL Pill-shaped badge with animated dot — matches hero eyebrow in ref. ================================================================ */ body[data-theme="dark-purple"] .ai-badge { display: inline-flex; align-items: center; padding: 0.3rem 0.85rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ai-violet-300); border: 1px solid rgba(124, 58, 237, 0.32); border-radius: 62.4375rem; background: rgba(124, 58, 237, 0.1); font-size: 0.73rem; font-weight: 600; gap: 0.45rem; -webkit-backdrop-filter: blur(0.5rem); backdrop-filter: blur(0.5rem); } body[data-theme="dark-purple"] .ai-badge__dot { flex-shrink: 0; width: 0.375rem; height: 0.375rem; animation: ai-pulse-glow 2s ease-in-out infinite; border-radius: 50%; background: var(--ai-violet-400); box-shadow: 0 0 8px var(--ai-violet-500); } /* Coloured badge variants */ body[data-theme="dark-purple"] .ai-badge--green { color: var(--ai-neon-green); border-color: rgba(0, 255, 165, 0.28); background: rgba(0, 255, 165, 0.08); } body[data-theme="dark-purple"] .ai-badge--pink { color: var(--ai-pink-400); border-color: rgba(236, 72, 153, 0.3); background: rgba(236, 72, 153, 0.1); } /* ================================================================ §26 · AI BUTTON SYSTEM Clean minimal buttons matching the reference design. --primary: solid violet fill --ghost: transparent outline --text: no border, just colour ================================================================ */ body[data-theme="dark-purple"] .ai-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.7rem 1.5rem; cursor: pointer; transition: transform var(--ai-transition), box-shadow var(--ai-transition), background-color var(--ai-transition), color var(--ai-transition), border-color var(--ai-transition), filter var(--ai-transition); white-space: nowrap; text-decoration: none; border-radius: var(--ai-radius-xl); font-size: 0.9rem; font-weight: 600; line-height: 1; gap: 0.5rem; } body[data-theme="dark-purple"] .ai-btn--primary { color: #fff; border: none; background: var(--ai-violet-600); box-shadow: var(--ai-glow-violet); } body[data-theme="dark-purple"] .ai-btn--primary:hover, body[data-theme="dark-purple"] .ai-btn--primary:focus { transform: translateY(-1px); text-decoration: none; color: #fff; background: var(--ai-violet-500); box-shadow: 0 6px 28px rgba(124, 58, 237, 0.6); } body[data-theme="dark-purple"] .ai-btn--primary:active { transform: translateY(0); filter: brightness(0.95); } body[data-theme="dark-purple"] .ai-btn--ghost { color: var(--ai-text-secondary); border: 1px solid var(--ai-border); background: transparent; } body[data-theme="dark-purple"] .ai-btn--ghost:hover, body[data-theme="dark-purple"] .ai-btn--ghost:focus { text-decoration: none; color: var(--ai-text-primary); border-color: var(--ai-border-glow); background: rgba(124, 58, 237, 0.08); } body[data-theme="dark-purple"] .ai-btn--outline { color: var(--ai-violet-300); border: 1px solid var(--ai-border-glow); background: transparent; } body[data-theme="dark-purple"] .ai-btn--outline:hover, body[data-theme="dark-purple"] .ai-btn--outline:focus { text-decoration: none; color: var(--ai-text-primary); border-color: var(--ai-violet-500); background: rgba(124, 58, 237, 0.12); box-shadow: var(--ai-glow-xs); } body[data-theme="dark-purple"] .ai-btn--sm { padding: 0.5rem 1.1rem; font-size: 0.82rem; } body[data-theme="dark-purple"] .ai-btn--lg { padding: 0.9rem 2rem; font-size: 1rem; } /* ================================================================ §27 · AI TWO-COLUMN HERO LAYOUT Matches reference: text-left, mockup-right, purple atmosphere. ================================================================ */ body[data-theme="dark-purple"] .ai-page-hero { position: relative; display: flex; overflow: hidden; align-items: center; min-height: 100vh; background-color: var(--ai-bg-deepest); } /* Purple atmospheric haze — large bloom behind mockup */ body[data-theme="dark-purple"] .ai-page-hero::before { position: absolute; z-index: 0; content: ""; pointer-events: none; background: var(--ai-gradient-hero-atmo); inset: 0; } /* Faint grid lines across the hero */ body[data-theme="dark-purple"] .ai-page-hero::after { position: absolute; z-index: 0; content: ""; pointer-events: none; background-image: linear-gradient(rgba(124, 58, 237, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 58, 237, 0.04) 1px, transparent 1px); background-size: 4rem 4rem; inset: 0; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 60% 50%, black 0%, transparent 70%); mask-image: radial-gradient(ellipse 80% 60% at 60% 50%, black 0%, transparent 70%); } body[data-theme="dark-purple"] .ai-page-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 100%; max-width: 77.5rem; margin-inline: auto; padding-inline: 2rem; padding-block: 5rem; gap: 3.5rem; } @media (max-width: 60rem) { body[data-theme="dark-purple"] .ai-page-hero__inner { grid-template-columns: 1fr; text-align: center; gap: 3rem; } } body[data-theme="dark-purple"] .ai-page-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; } @media (max-width: 60rem) { body[data-theme="dark-purple"] .ai-page-hero__text { align-items: center; } } body[data-theme="dark-purple"] .ai-page-hero__title { margin: 0; letter-spacing: -0.025em; color: var(--ai-text-primary); font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 700; line-height: 1.12; } body[data-theme="dark-purple"] .ai-page-hero__desc { max-width: 28.75rem; margin: 0; color: var(--ai-text-secondary); font-size: 1rem; line-height: 1.72; } @media (max-width: 60rem) { body[data-theme="dark-purple"] .ai-page-hero__desc { max-width: 100%; } } body[data-theme="dark-purple"] .ai-page-hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-block-start: 0.5rem; } body[data-theme="dark-purple"] .ai-page-hero__visual { position: relative; display: flex; align-items: center; justify-content: center; } /* ================================================================ §28 · AI PRODUCT MOCKUP Floating screenshot with atmospheric purple corona glow underneath. ================================================================ */ body[data-theme="dark-purple"] .ai-mockup { position: relative; width: 100%; max-width: 36.25rem; } /* Purple corona beneath the frame */ body[data-theme="dark-purple"] .ai-mockup__glow { position: absolute; z-index: 0; right: 10%; bottom: -10%; left: 10%; height: 55%; pointer-events: none; filter: blur(2.25rem); background: var(--ai-gradient-mockup-glow); } body[data-theme="dark-purple"] .ai-mockup__frame { position: relative; z-index: 1; overflow: hidden; border: 1px solid rgba(124, 58, 237, 0.22); border-radius: var(--ai-radius-md); background: var(--ai-bg-card); box-shadow: var(--ai-shadow-mockup); } body[data-theme="dark-purple"] .ai-mockup__frame img, body[data-theme="dark-purple"] .ai-mockup__frame video { display: block; width: 100%; height: auto; } /* Subtle top bar on the mockup frame (mimics browser / app chrome) */ body[data-theme="dark-purple"] .ai-mockup__chrome { display: flex; align-items: center; padding: 0.65rem 0.85rem; border-block-end: 1px solid var(--ai-border-soft); background: var(--ai-bg-elevated); gap: 0.4rem; } body[data-theme="dark-purple"] .ai-mockup__chrome-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.15); } body[data-theme="dark-purple"] .ai-mockup__chrome-dot:first-child { background: rgba(255, 95, 87, 0.7); } body[data-theme="dark-purple"] .ai-mockup__chrome-dot:nth-child(2) { background: rgba(255, 188, 46, 0.7); } body[data-theme="dark-purple"] .ai-mockup__chrome-dot:nth-child(3) { background: rgba(40, 201, 64, 0.7); } body[data-theme="dark-purple"] .ai-mockup__body { padding: 1.5rem; background: var(--ai-bg-card); } /* ================================================================ §29 · AI STAT ROW Horizontal metrics row with thin vertical dividers — reference §3. ================================================================ */ body[data-theme="dark-purple"] .ai-stat-row { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; margin-block: 1rem 3rem; } @media (max-width: 37.5rem) { body[data-theme="dark-purple"] .ai-stat-row { gap: 2rem; } } body[data-theme="dark-purple"] .ai-stat { position: relative; text-align: center; padding-inline: 2.5rem; } @media (max-width: 37.5rem) { body[data-theme="dark-purple"] .ai-stat { padding-inline: 1rem; } } /* Vertical divider between stats */ body[data-theme="dark-purple"] .ai-stat + .ai-stat::before { position: absolute; width: 1px; content: ""; background: var(--ai-border); inset-inline-start: 0; inset-block: 15%; } body[data-theme="dark-purple"] .ai-stat__value { display: block; letter-spacing: -0.03em; color: var(--ai-text-primary); font-size: 1.85rem; font-weight: 800; line-height: 1.05; } body[data-theme="dark-purple"] .ai-stat__label { display: block; margin-block-start: 0.2rem; letter-spacing: 0.04em; color: var(--ai-text-muted); font-size: 0.8rem; } /* ================================================================ §30 · AI CAPABILITY CARDS (3-column grid) "Powerful Capabilities Built for Intelligent Creation" section. Each card: square icon + title + short description. ================================================================ */ body[data-theme="dark-purple"] .ai-cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } @media (max-width: 56.25rem) { body[data-theme="dark-purple"] .ai-cap-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 35rem) { body[data-theme="dark-purple"] .ai-cap-grid { grid-template-columns: 1fr; } } body[data-theme="dark-purple"] .ai-cap-card { padding: 1.5rem; transition: border-color var(--ai-transition), transform var(--ai-transition), box-shadow var(--ai-transition); border: 1px solid var(--ai-border); border-radius: var(--ai-radius-md); background: var(--ai-bg-card); } body[data-theme="dark-purple"] .ai-cap-card:hover { transform: translateY(-0.25rem); border-color: rgba(124, 58, 237, 0.35); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), var(--ai-glow-xs); } body[data-theme="dark-purple"] .ai-cap-card__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-block-end: 1.25rem; transition: background-color var(--ai-transition), box-shadow var(--ai-transition); color: var(--ai-violet-400); border: 1px solid rgba(124, 58, 237, 0.24); border-radius: var(--ai-radius-sm); background: rgba(124, 58, 237, 0.14); font-size: 1.1rem; .ai-cap-card:hover & { background: rgba(124, 58, 237, 0.22); box-shadow: 0 0 12px rgba(124, 58, 237, 0.3); } } body[data-theme="dark-purple"] .ai-cap-card__title { margin: 0 0 0.5rem; color: var(--ai-text-primary); font-size: 1rem; font-weight: 600; line-height: 1.3; } body[data-theme="dark-purple"] .ai-cap-card__desc { margin: 0; color: var(--ai-text-secondary); font-size: 0.875rem; line-height: 1.65; } /* ================================================================ §31 · AI FEATURE SPLIT Two-column layout: text block on one side, mockup on the other. Use .ai-feature-split--reverse to flip the column order. ================================================================ */ body[data-theme="dark-purple"] .ai-feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } @media (max-width: 53.75rem) { body[data-theme="dark-purple"] .ai-feature-split { grid-template-columns: 1fr; gap: 2.5rem; } } body[data-theme="dark-purple"] .ai-feature-split--reverse { direction: rtl; } body[data-theme="dark-purple"] .ai-feature-split--reverse > * { direction: ltr; } body[data-theme="dark-purple"] .ai-feature-split__text { display: flex; flex-direction: column; gap: 1.25rem; } body[data-theme="dark-purple"] .ai-feature-split__eyebrow { letter-spacing: 0.1em; text-transform: uppercase; color: var(--ai-violet-400); font-size: 0.78rem; font-weight: 700; } body[data-theme="dark-purple"] .ai-feature-split__title { margin: 0; letter-spacing: -0.022em; color: var(--ai-text-primary); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; line-height: 1.2; } body[data-theme="dark-purple"] .ai-feature-split__desc { margin: 0; color: var(--ai-text-secondary); font-size: 0.95rem; line-height: 1.72; } body[data-theme="dark-purple"] .ai-feature-split__visual { position: relative; } /* ================================================================ §32 · AI CHECK LIST Feature list with violet circle checkmarks — inside pricing cards and feature sections. ================================================================ */ body[data-theme="dark-purple"] .ai-check-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; gap: 0.65rem; } body[data-theme="dark-purple"] .ai-check-list li { display: flex; align-items: flex-start; color: var(--ai-text-secondary); font-size: 0.88rem; line-height: 1.55; gap: 0.65rem; } body[data-theme="dark-purple"] .ai-check-list li::before { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; margin-top: 1px; content: "✓"; color: var(--ai-violet-400); border: 1px solid rgba(124, 58, 237, 0.3); border-radius: 50%; background: rgba(124, 58, 237, 0.18); font-size: 0.62rem; font-weight: 800; } body[data-theme="dark-purple"] .ai-check-list li.is-muted { opacity: 0.4; } body[data-theme="dark-purple"] .ai-check-list li.is-muted::before { content: "–"; color: var(--ai-text-muted); border-color: rgba(255, 255, 255, 0.12); background: transparent; } /* ================================================================ §33 · AI PRICING TIERS Three-column grid: Free / Pro (featured) / Enterprise. ================================================================ */ body[data-theme="dark-purple"] .ai-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; } @media (max-width: 53.75rem) { body[data-theme="dark-purple"] .ai-pricing-grid { grid-template-columns: 1fr; max-width: 27.5rem; margin-inline: auto; } } body[data-theme="dark-purple"] .ai-pricing-tier { position: relative; padding: 2rem; transition: border-color var(--ai-transition), box-shadow var(--ai-transition); border: 1px solid var(--ai-border); border-radius: var(--ai-radius-lg); background: var(--ai-bg-card); } body[data-theme="dark-purple"] .ai-pricing-tier:hover { border-color: rgba(124, 58, 237, 0.3); } /* Featured (Pro) card — violet border glow, slightly elevated bg */ body[data-theme="dark-purple"] .ai-pricing-tier--featured { z-index: 1; border-color: var(--ai-violet-600); background: var(--ai-bg-elevated); box-shadow: 0 0 0 1px var(--ai-violet-600), var(--ai-glow-sm), 0 24px 50px rgba(0, 0, 0, 0.75); } /* "Most Popular" floating badge */ body[data-theme="dark-purple"] .ai-pricing-tier--featured::after { position: absolute; padding: 0.22rem 0.9rem; content: "Most Popular"; transform: translateX(-50%); white-space: nowrap; letter-spacing: 0.07em; text-transform: uppercase; color: #fff; border-radius: 62.4375rem; background: var(--ai-violet-600); font-size: 0.68rem; font-weight: 700; inset-block-start: -0.8125rem; inset-inline-start: 50%; } body[data-theme="dark-purple"] .ai-pricing-tier__plan { margin-block-end: 1.25rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ai-text-muted); font-size: 0.8rem; font-weight: 700; } body[data-theme="dark-purple"] .ai-pricing-tier__price { display: flex; flex-wrap: wrap; align-items: baseline; margin-block-end: 0.35rem; gap: 0.15rem; } body[data-theme="dark-purple"] .ai-pricing-tier__currency { align-self: flex-start; padding-top: 0.35rem; color: var(--ai-text-secondary); font-size: 1.1rem; font-weight: 600; } body[data-theme="dark-purple"] .ai-pricing-tier__amount { letter-spacing: -0.035em; color: var(--ai-text-primary); font-size: 2.6rem; font-weight: 800; line-height: 1; } body[data-theme="dark-purple"] .ai-pricing-tier__period { align-self: flex-end; margin-inline-start: 0.2rem; padding-bottom: 0.2rem; color: var(--ai-text-muted); font-size: 0.85rem; } body[data-theme="dark-purple"] .ai-pricing-tier__tagline { margin-block-end: 1.5rem; color: var(--ai-text-secondary); font-size: 0.85rem; line-height: 1.55; } body[data-theme="dark-purple"] .ai-pricing-tier__divider { border: none; border-top: 1px solid var(--ai-border); margin-block: 1.5rem; } body[data-theme="dark-purple"] .ai-pricing-tier__cta { display: block; margin-block-start: 1.5rem; padding: 0.7rem 1.5rem; transition: all var(--ai-transition); text-align: center; text-decoration: none; border-radius: var(--ai-radius-xl); font-size: 0.9rem; font-weight: 600; } body[data-theme="dark-purple"] .ai-pricing-tier__cta--outline { color: var(--ai-violet-300); border: 1px solid var(--ai-border-glow); background: transparent; } body[data-theme="dark-purple"] .ai-pricing-tier__cta--outline:hover, body[data-theme="dark-purple"] .ai-pricing-tier__cta--outline:focus { text-decoration: none; color: var(--ai-text-primary); border-color: var(--ai-violet-500); background: rgba(124, 58, 237, 0.1); } body[data-theme="dark-purple"] .ai-pricing-tier__cta--primary { color: #fff; border: none; background: var(--ai-violet-600); box-shadow: var(--ai-glow-violet); } body[data-theme="dark-purple"] .ai-pricing-tier__cta--primary:hover, body[data-theme="dark-purple"] .ai-pricing-tier__cta--primary:focus { transform: translateY(-1px); text-decoration: none; color: #fff; background: var(--ai-violet-500); box-shadow: 0 6px 26px rgba(124, 58, 237, 0.6); } /* ================================================================ §34 · AI CTA BLOCK "Start Creating with Intelligent AI Today" — bottom email CTA. Card-in-section layout with atmospheric glow from bottom. ================================================================ */ body[data-theme="dark-purple"] .ai-cta-block { position: relative; overflow: hidden; padding: 4.5rem 2rem; text-align: center; border: 1px solid var(--ai-border); border-radius: var(--ai-radius-xl); background: var(--ai-bg-card); isolation: isolate; } /* Upward-blooming atmosphere glow */ body[data-theme="dark-purple"] .ai-cta-block::before { position: absolute; z-index: -1; content: ""; pointer-events: none; background: var(--ai-gradient-cta-atmo); inset: 0; } body[data-theme="dark-purple"] .ai-cta-block__title { margin-block-end: 1.75rem; letter-spacing: -0.022em; color: var(--ai-text-primary); font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 700; line-height: 1.15; } body[data-theme="dark-purple"] .ai-cta-block__sub { max-width: 30rem; margin-block-end: 2rem; color: var(--ai-text-secondary); font-size: 1rem; line-height: 1.7; margin-inline: auto; } /* Email capture row */ body[data-theme="dark-purple"] .ai-cta-block__form { display: flex; gap: 0.5rem; max-width: 28.75rem; margin-inline: auto; } @media (max-width: 35rem) { body[data-theme="dark-purple"] .ai-cta-block__form { flex-direction: column; } } body[data-theme="dark-purple"] .ai-cta-block__input { flex: 1; padding: 0.75rem 1.1rem; transition: border-color var(--ai-transition), box-shadow var(--ai-transition); color: var(--ai-text-primary); border: 1px solid var(--ai-border); border-radius: var(--ai-radius-xl); outline: none; background: var(--ai-bg-elevated); font-size: 0.9rem; } body[data-theme="dark-purple"] .ai-cta-block__input::placeholder { color: var(--ai-text-muted); } body[data-theme="dark-purple"] .ai-cta-block__input:focus { border-color: var(--ai-violet-500); box-shadow: var(--ai-glow-xs); } body[data-theme="dark-purple"] .ai-cta-block__btn { padding: 0.75rem 1.5rem; cursor: pointer; transition: background-color var(--ai-transition), box-shadow var(--ai-transition), transform var(--ai-transition); white-space: nowrap; color: #fff; border: none; border-radius: var(--ai-radius-xl); background: var(--ai-violet-600); font-size: 0.9rem; font-weight: 600; } body[data-theme="dark-purple"] .ai-cta-block__btn:hover, body[data-theme="dark-purple"] .ai-cta-block__btn:focus { transform: translateY(-1px); background: var(--ai-violet-500); box-shadow: var(--ai-glow-sm); } /* ================================================================ §35 · AI NAVIGATION BAR (standalone component) Frosted-glass nav matching the reference header. ================================================================ */ body[data-theme="dark-purple"] .ai-topnav { position: sticky; z-index: 1000; top: 0; display: flex; align-items: center; justify-content: space-between; height: 4rem; border-bottom: 1px solid var(--ai-border-soft); background: rgba(8, 6, 15, 0.8); box-shadow: 0 1px 0 var(--ai-border-soft), 0 4px 30px rgba(0, 0, 0, 0.45); padding-inline: 2rem; -webkit-backdrop-filter: blur(1.25rem); backdrop-filter: blur(1.25rem); } body[data-theme="dark-purple"] .ai-topnav__logo { display: flex; align-items: center; text-decoration: none; letter-spacing: -0.03em; color: var(--ai-text-primary); font-size: 1.15rem; font-weight: 800; gap: 0.5rem; } body[data-theme="dark-purple"] .ai-topnav__logo-mark { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; color: #fff; border-radius: 0.4375rem; background: var(--ai-violet-600); box-shadow: 0 0 12px rgba(124, 58, 237, 0.5); font-size: 0.85rem; } body[data-theme="dark-purple"] .ai-topnav__links { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; gap: 1.75rem; } @media (max-width: 48rem) { body[data-theme="dark-purple"] .ai-topnav__links { display: none; } } body[data-theme="dark-purple"] .ai-topnav__link { transition: color var(--ai-transition); text-decoration: none; color: var(--ai-text-secondary); font-size: 0.875rem; font-weight: 500; } body[data-theme="dark-purple"] .ai-topnav__link:hover, body[data-theme="dark-purple"] .ai-topnav__link.is-active { color: var(--ai-text-primary); } body[data-theme="dark-purple"] .ai-topnav__actions { display: flex; align-items: center; gap: 0.75rem; } body[data-theme="dark-purple"] .ai-topnav__link-cta { transition: color var(--ai-transition); text-decoration: none; color: var(--ai-text-muted); font-size: 0.875rem; } body[data-theme="dark-purple"] .ai-topnav__link-cta:hover { color: var(--ai-text-secondary); } /* ================================================================ §36 · AI WORKFLOW / STEP LIST "From idea to execution" section — numbered step flow. ================================================================ */ body[data-theme="dark-purple"] .ai-steps { position: relative; display: flex; flex-direction: column; gap: 0; /* Vertical connector line */ } body[data-theme="dark-purple"] .ai-steps::before { position: absolute; width: 1px; content: ""; background: linear-gradient( to bottom, transparent 0%, var(--ai-border) 10%, var(--ai-border) 90%, transparent 100% ); inset-inline-start: 1.25rem; inset-block: 1.5rem; } body[data-theme="dark-purple"] .ai-step { position: relative; display: grid; grid-template-columns: 2.625rem 1fr; align-items: flex-start; gap: 1.25rem; padding-block: 1.5rem; } body[data-theme="dark-purple"] .ai-step__number { position: relative; z-index: 1; display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.625rem; height: 2.625rem; transition: border-color var(--ai-transition), box-shadow var(--ai-transition); color: var(--ai-violet-400); border: 1px solid var(--ai-border); border-radius: 50%; background: var(--ai-bg-elevated); font-size: 0.78rem; font-weight: 700; .ai-step:hover & { border-color: var(--ai-violet-600); box-shadow: 0 0 12px rgba(124, 58, 237, 0.35); } } body[data-theme="dark-purple"] .ai-step__content { padding-block-start: 0.5rem; } body[data-theme="dark-purple"] .ai-step__title { margin: 0 0 0.4rem; color: var(--ai-text-primary); font-size: 1rem; font-weight: 600; } body[data-theme="dark-purple"] .ai-step__desc { margin: 0; color: var(--ai-text-secondary); font-size: 0.875rem; line-height: 1.65; } /* ================================================================ §37 · AI TAG / CHIP Small inline label, used in cards for categories/tags. ================================================================ */ body[data-theme="dark-purple"] .ai-tag { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ai-violet-400); border: 1px solid rgba(124, 58, 237, 0.2); border-radius: 0.25rem; background: rgba(124, 58, 237, 0.1); font-size: 0.7rem; font-weight: 600; } /* ================================================================ §38 · AI DIVIDER Horizontal rule with optional label, matching reference faint rules. ================================================================ */ body[data-theme="dark-purple"] .ai-divider { display: flex; align-items: center; gap: 1rem; margin-block: 3rem; } body[data-theme="dark-purple"] .ai-divider::before, body[data-theme="dark-purple"] .ai-divider::after { flex: 1; height: 1px; content: ""; background: var(--ai-border); } body[data-theme="dark-purple"] .ai-divider__label { white-space: nowrap; letter-spacing: 0.06em; color: var(--ai-text-muted); font-size: 0.75rem; } /* ================================================================ §39 · RESPONSIVE HELPERS ================================================================ */ @media (max-width: 48rem) { body[data-theme="dark-purple"] .ai-section { padding-block: 3.5rem; } body[data-theme="dark-purple"] .ai-section-header { margin-block-end: 2.5rem; } body[data-theme="dark-purple"] .ai-page-hero { min-height: auto; padding-block: 4rem 3rem; } body[data-theme="dark-purple"] .ai-stat-row { gap: 1.5rem; } body[data-theme="dark-purple"] .ai-stat { padding-inline: 1.25rem; } } @media (max-width: 30rem) { body[data-theme="dark-purple"] .ai-pricing-grid { grid-template-columns: 1fr; max-width: 100%; } body[data-theme="dark-purple"] .ai-cap-grid { grid-template-columns: 1fr; } } /* ================================================================ §40 · BODY ATMOSPHERE — wearesmall.es aurora mesh recreation Two-layer composition matching the reference implementation: Layer 1 (base): background-color: rgb(0, 0, 0) — from token var(--token-48294a87…, rgb(0,0,0)) Layer 2 (overlay): background-image with five radial-gradient orbs — duplicate of .framer-bagwf.framer-xd48gr background-attachment: fixed keeps gradients viewport-relative, identical to the Framer element's position: fixed + inset: 0 behaviour. ================================================================ */ /* Override §2 background-color and §3 wrappers with the new scheme. */ body[data-theme="dark-purple"] { /* Layer 1 — absolute black foundation (token reference) */ background-color: rgb(0, 0, 0); /* Layer 2 — aurora mesh overlay (.framer-bagwf.framer-xd48gr duplicate) Five soft elliptical orbs: one per corner + centre atmosphere. Opacity tuned for immersive depth without overwhelming content. */ background-image: radial-gradient( ellipse 80% 75% at 6% 6%, rgba(80, 0, 210, 0.58) 0%, rgba(80, 0, 210, 0) 55% ), radial-gradient( ellipse 55% 62% at 96% 3%, rgba(10, 8, 178, 0.5) 0%, rgba(10, 8, 178, 0) 52% ), radial-gradient( ellipse 88% 58% at 83% 100%, rgba(118, 22, 212, 0.52) 0%, rgba(118, 22, 212, 0) 55% ), radial-gradient( ellipse 52% 72% at 1% 97%, rgba(48, 0, 138, 0.44) 0%, rgba(48, 0, 138, 0) 52% ), radial-gradient( ellipse 62% 68% at 50% 50%, rgba(32, 4, 80, 0.32) 0%, rgba(32, 4, 80, 0) 65% ); background-repeat: no-repeat; /* Fixed attachment = gradients stay relative to viewport as page scrolls */ background-attachment: fixed; background-size: 100% 100%; } /* Override §3 page wrappers: transparent so aurora shows through. */ body[data-theme="dark-purple"] #page-wrapper, body[data-theme="dark-purple"] #page { background-color: transparent; } /* ================================================================ §41 · SLIDER — BASE OVERRIDES & SHARED LAYER SETUP Layer stack (bottom → top): 1. .item — base dark colour + CSS art gradients 2. .ai-slide-bg — gradient accent canvas (z-index: 0) 3. .item::before — dark readability veil (z-index: 1) ← existing 4. .item::after — dot-matrix texture (z-index: 2) 5. .carousel-caption — text content (z-index: 10) ← existing ================================================================ */ /* Kill the inline background-image on all items in dark-purple theme. !important is required to override the inline style attribute. */ body[data-theme="dark-purple"] #slider .carousel-inner .item { background-image: none !important; } body[data-theme="dark-purple"] #slider .carousel-inner .item { background-repeat: no-repeat; background-position: center center; background-size: cover; } /* Belt-and-suspenders: hide any tags ever placed inside the slider. */ body[data-theme="dark-purple"] #slider img { display: none !important; } /* Update the existing ::before dark veil to use pure-black alpha so it works cleanly over the new CSS-art backgrounds. */ body[data-theme="dark-purple"] #slider .carousel-inner .item::before { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.38) 42%, rgba(0, 0, 0, 0.85) 100% ); } /* Layer 4: Dot-matrix texture — 1 px white dots on a 38 px grid. Creates the "digital grid / data canvas" premium AI feel. */ body[data-theme="dark-purple"] #slider .carousel-inner .item::after { position: absolute; z-index: 2; content: ""; pointer-events: none; background-image: radial-gradient( circle, rgba(255, 255, 255, 0.045) 1px, transparent 1px ); background-size: 2.375rem 2.375rem; inset: 0; } /* Layer 2 (.ai-slide-bg) — gradient accent canvas added via Twig. z-index: 0 keeps it behind the ::before readability veil. */ body[data-theme="dark-purple"] #slider .carousel-inner .item .ai-slide-bg { position: absolute; z-index: 0; overflow: hidden; pointer-events: none; inset: 0; } /* Glowing horizontal line at the slide's base — shared across all slides. Colour is overridden per-slide in §§42-44. */ body[data-theme="dark-purple"] #slider .carousel-inner .item .ai-slide-bg::after { position: absolute; right: -10%; bottom: 0; left: -10%; height: 1px; content: ""; animation: ai-slide-line-pulse 4s ease-in-out infinite; background: linear-gradient( 90deg, transparent 0%, rgba(124, 58, 237, 0) 12%, rgba(124, 58, 237, 0.7) 38%, rgba(191, 0, 255, 1) 50%, rgba(124, 58, 237, 0.7) 62%, rgba(124, 58, 237, 0) 88%, transparent 100% ); box-shadow: 0 0 18px 2px rgba(124, 58, 237, 0.55), 0 0 55px 10px rgba(124, 58, 237, 0.2); } /* ================================================================ §42 · SLIDE 1 — VIOLET NEBULA Aesthetic: standing inside a violet nebula, looking toward a bright violet star at the top. Dominant: violet / indigo / blue. ================================================================ */ body[data-theme="dark-purple"] #slider .carousel-inner .item:nth-child(1), body[data-theme="dark-purple"] #slider .carousel-inner .item.ai-slide-1 { background-color: transparent; background-image: /* Central star — intense violet crown from the top */ radial-gradient( ellipse 100% 55% at 50% -5%, rgba(110, 20, 240, 0.88) 0%, rgba(80, 10, 180, 0.55) 35%, rgba(80, 10, 180, 0) 60% ), /* Left nebula fog — indigo cloud bank */ radial-gradient( ellipse 65% 80% at -8% 88%, rgba(55, 0, 165, 0.65) 0%, rgba(55, 0, 165, 0) 52% ), /* Right rim light — electric blue accent */ radial-gradient( ellipse 52% 55% at 110% 72%, rgba(0, 70, 200, 0.42) 0%, rgba(0, 70, 200, 0) 50% ), /* Centre absorption — dark nebula interior depth */ radial-gradient( ellipse 72% 68% at 50% 58%, rgba(15, 0, 55, 0.78) 0%, rgba(15, 0, 55, 0) 62% ); } /* Slide 1 accent line: electric violet */ body[data-theme="dark-purple"] #slider .carousel-inner .item.ai-slide-1 .ai-slide-bg::after { background: linear-gradient( 90deg, transparent 0%, rgba(110, 20, 240, 0) 12%, rgba(110, 20, 240, 0.7) 38%, rgba(180, 120, 255, 1) 50%, rgba(110, 20, 240, 0.7) 62%, rgba(110, 20, 240, 0) 88%, transparent 100% ); box-shadow: 0 0 20px 2px rgba(110, 20, 240, 0.62), 0 0 60px 12px rgba(110, 20, 240, 0.22); } /* ================================================================ §43 · SLIDE 2 — NEURAL CRIMSON Aesthetic: a neural network activating — data pulses outward in waves of magenta. Dominant: magenta / rose / deep violet. ================================================================ */ body[data-theme="dark-purple"] #slider .carousel-inner .item:nth-child(2), body[data-theme="dark-purple"] #slider .carousel-inner .item.ai-slide-2 { background-color: transparent; background-image: /* Right magenta bloom — neural activation pulse */ radial-gradient( ellipse 70% 80% at 112% 52%, rgba(200, 15, 145, 0.72) 0%, rgba(160, 10, 115, 0.4) 35%, rgba(160, 10, 115, 0) 55% ), radial-gradient( ellipse 62% 58% at -6% 4%, rgba(72, 10, 195, 0.62) 0%, rgba(72, 10, 195, 0) 52% ), radial-gradient( ellipse 55% 65% at 55% 112%, rgba(110, 0, 168, 0.55) 0%, rgba(110, 0, 168, 0) 52% ), radial-gradient( ellipse 68% 68% at 48% 48%, rgba(48, 0, 80, 0.62) 0%, rgba(48, 0, 80, 0) 62% ); } /* Slide 2 accent line: rose / magenta */ body[data-theme="dark-purple"] #slider .carousel-inner .item.ai-slide-2 .ai-slide-bg::after { background: linear-gradient( 90deg, transparent 0%, rgba(200, 15, 145, 0) 12%, rgba(200, 15, 145, 0.7) 38%, rgba(255, 80, 180, 1) 50%, rgba(200, 15, 145, 0.7) 62%, rgba(200, 15, 145, 0) 88%, transparent 100% ); box-shadow: 0 0 20px 2px rgba(200, 15, 145, 0.62), 0 0 60px 12px rgba(200, 15, 145, 0.22); } /* ================================================================ §44 · SLIDE 3 — DIGITAL HORIZON Aesthetic: looking out from deep space toward a digital planet — blue data-ocean below, stars above. Dominant: electric blue / cobalt / teal. ================================================================ */ body[data-theme="dark-purple"] #slider .carousel-inner .item:nth-child(3), body[data-theme="dark-purple"] #slider .carousel-inner .item.ai-slide-3 { background-color: transparent; background-image: /* Top-right electric-blue star cluster */ radial-gradient( ellipse 65% 72% at 110% -5%, rgba(20, 55, 245, 0.72) 0%, rgba(15, 40, 200, 0.42) 35%, rgba(15, 40, 200, 0) 55% ), /* Bottom teal/cyan horizon — data ocean surface */ radial-gradient( ellipse 82% 52% at 42% 115%, rgba(0, 148, 212, 0.58) 0%, rgba(0, 148, 212, 0) 52% ), /* Left violet drift — magnetosphere edge */ radial-gradient( ellipse 52% 65% at -8% 55%, rgba(58, 10, 185, 0.52) 0%, rgba(58, 10, 185, 0) 50% ), /* Centre dark space — void between stars */ radial-gradient( ellipse 65% 72% at 52% 52%, rgba(8, 14, 75, 0.68) 0%, rgba(8, 14, 75, 0) 62% ); } /* Slide 3 accent line: electric blue / teal */ body[data-theme="dark-purple"] #slider .carousel-inner .item.ai-slide-3 .ai-slide-bg::after { background: linear-gradient( 90deg, transparent 0%, rgba(0, 148, 212, 0) 12%, rgba(0, 148, 212, 0.7) 38%, rgba(80, 210, 255, 1) 50%, rgba(0, 148, 212, 0.7) 62%, rgba(0, 148, 212, 0) 88%, transparent 100% ); box-shadow: 0 0 20px 2px rgba(0, 148, 212, 0.62), 0 0 60px 12px rgba(0, 148, 212, 0.22); } /* ================================================================ §45 · KEYFRAMES — AURORA & SLIDE EFFECTS ================================================================ */ /* Accent line breathing — gently pulses slide's glow-line opacity. */ @keyframes ai-slide-line-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* ================================================================ §46 · WEARESMALL.ES NAVIGATION LAYOUT Matches the minimal frosted-glass top nav (.framer-w06gao aesthetic): • Flexbox replaces Bootstrap 3 floats on desktop • Centre-expanding underline on hover (width 0 → 100%) • Last nav item styled as solid-violet CTA pill button • Mobile: full-width stacked list, Bootstrap collapse preserved Extends §5 colour/glow rules — only layout & interaction additions. ================================================================ */ /* — Navbar box-model reset — */ body[data-theme="dark-purple"] #navigation.navbar { height: 2.5rem; min-height: 0; padding: 0; } /* — Flexbox container (replaces Bootstrap float layout) — */ body[data-theme="dark-purple"] #navigation .container { display: flex; align-items: center; max-width: 100%; height: 2.5rem; padding-inline: clamp(1rem, 3vw, 2.5rem); } /* — Logo slot — */ body[data-theme="dark-purple"] #navigation .navbar-header { display: flex; float: none; flex-shrink: 0; align-items: center; } body[data-theme="dark-purple"] #navigation .navbar-brand { display: flex; align-items: center; height: 4rem; margin: 0; padding: 0; padding-inline-end: 1rem; } body[data-theme="dark-purple"] #navigation #logo { display: flex; align-items: center; margin: 0; letter-spacing: -0.03em; font-size: 1.1rem; font-weight: 700; line-height: 1; } body[data-theme="dark-purple"] #navigation #logo img { display: block; width: auto; height: 1.875rem; filter: brightness(1.3) drop-shadow(0 0 0.5625rem rgba(124, 58, 237, 0.55)); } /* — Desktop: region wrapper fills remaining space — */ @media (min-width: 48rem) { body[data-theme="dark-purple"] #navigation .region, body[data-theme="dark-purple"] #navigation .region-primary-menu { display: flex; flex: 1; align-items: center; justify-content: flex-end; } body[data-theme="dark-purple"] #navigation #logo img { height: 2rem; } /* Override Bootstrap's display:block !important on .collapse.navbar-collapse */ body[data-theme="dark-purple"] #navigation nav.navbar-collapse, body[data-theme="dark-purple"] #navigation .navbar-collapse { display: flex !important; } body[data-theme="dark-purple"] #navigation nav.navbar-collapse, body[data-theme="dark-purple"] #navigation .navbar-collapse { float: none; overflow: visible; flex: 1; align-items: center; justify-content: flex-end; width: auto; height: 4rem; max-height: none; padding: 0; border: none; background: transparent; box-shadow: none; } body[data-theme="dark-purple"] #navigation .navbar-nav { display: flex; float: none; align-items: center; margin: 0; gap: 0; } body[data-theme="dark-purple"] #navigation .navbar-nav > li { position: relative; float: none; } /* — Nav link — */ body[data-theme="dark-purple"] #navigation .navbar-nav > li > .menu-link, body[data-theme="dark-purple"] #navigation .navbar-nav > li > a { position: relative; display: flex; align-items: center; height: 2rem; margin-right: 0.3125rem; transition: color 0.2s ease; text-decoration: none; letter-spacing: 0.015em; opacity: 1; color: rgba(160, 154, 184, 0.78); border: none; border-radius: 1.25rem; outline: none; background: transparent; background-color: #8e8e8e4d; text-shadow: none; font-size: 0.875rem; font-weight: 500; line-height: 1; /* height: 64px; */ padding-inline: 0.875rem; padding-block: 0; } #navigation > div > nav > ul > li > a > span { height: 1rem; } /* Centre-expanding underline indicator */ body[data-theme="dark-purple"] #navigation .navbar-nav > li > .menu-link::after, body[data-theme="dark-purple"] #navigation .navbar-nav > li > a::after { position: absolute; bottom: 0.75rem; left: 50%; width: 0; height: 1px; content: ""; transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(-50%); pointer-events: none; background: var(--ai-violet-500); box-shadow: 0 0 6px rgba(124, 58, 237, 0.55); } body[data-theme="dark-purple"] #navigation .navbar-nav > li > .menu-link:hover, body[data-theme="dark-purple"] #navigation .navbar-nav > li > .menu-link:focus, body[data-theme="dark-purple"] #navigation .navbar-nav > li > a:hover, body[data-theme="dark-purple"] #navigation .navbar-nav > li > a:focus { color: rgba(255, 255, 255, 0.92); background: transparent; text-shadow: none; } body[data-theme="dark-purple"] #navigation .navbar-nav > li > .menu-link:hover::after, body[data-theme="dark-purple"] #navigation .navbar-nav > li > .menu-link:focus::after, body[data-theme="dark-purple"] #navigation .navbar-nav > li > a:hover::after, body[data-theme="dark-purple"] #navigation .navbar-nav > li > a:focus::after { width: calc(100% - 1.75rem); } /* Active trail */ body[data-theme="dark-purple"] #navigation .navbar-nav > li.primary-nav__menu-item--active-trail > .menu-link, body[data-theme="dark-purple"] #navigation .navbar-nav > li.active > a { color: rgba(255, 255, 255, 1); background: transparent; text-shadow: none; } body[data-theme="dark-purple"] #navigation .navbar-nav > li.primary-nav__menu-item--active-trail > .menu-link::after, body[data-theme="dark-purple"] #navigation .navbar-nav > li.active > a::after { width: calc(100% - 1.75rem); } /* — Last item: CTA pill button — */ body[data-theme="dark-purple"] #navigation .navbar-nav > li:last-child > .menu-link, body[data-theme="dark-purple"] #navigation .navbar-nav > li:last-child > a.menu-link { padding: 0.5rem 1.25rem !important; } body[data-theme="dark-purple"] #navigation .navbar-nav > li:last-child > .menu-link, body[data-theme="dark-purple"] #navigation .navbar-nav > li:last-child > a.menu-link { /* height: auto; */ margin-inline-start: 1rem; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease; letter-spacing: 0.02em; color: #fff; border-radius: 624.9375rem; background: var(--ai-violet-600); box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.35), var(--ai-glow-xs); font-weight: 600; } body[data-theme="dark-purple"] #navigation .navbar-nav > li:last-child > .menu-link::after, body[data-theme="dark-purple"] #navigation .navbar-nav > li:last-child > a::after { display: none; } body[data-theme="dark-purple"] #navigation .navbar-nav > li:last-child > .menu-link:hover, body[data-theme="dark-purple"] #navigation .navbar-nav > li:last-child > .menu-link:focus, body[data-theme="dark-purple"] #navigation .navbar-nav > li:last-child > a:hover, body[data-theme="dark-purple"] #navigation .navbar-nav > li:last-child > a:focus { transform: translateY(-1px); color: #fff; background: var(--ai-violet-500); box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.55), var(--ai-glow-sm); text-shadow: none; } } /* — Mobile toggle button — */ body[data-theme="dark-purple"] #navigation .navbar-toggle { float: none; align-items: center; justify-content: center; margin: 0; padding: 0.5rem 0.6rem; transition: background-color 0.18s ease, border-color 0.18s ease; border: 1px solid rgba(124, 58, 237, 0.28); border-radius: 0.5rem; background: transparent; /* display: flex; flex-direction: column; */ gap: 0.3125rem; } body[data-theme="dark-purple"] #navigation .navbar-toggle:hover, body[data-theme="dark-purple"] #navigation .navbar-toggle:focus { border-color: rgba(124, 58, 237, 0.5); background: rgba(124, 58, 237, 0.1); } body[data-theme="dark-purple"] #navigation .navbar-toggle .fa, body[data-theme="dark-purple"] #navigation .navbar-toggle .fa-bars { color: rgba(167, 139, 250, 0.85); font-size: 1rem; } /* — Mobile: full-width vertical stack — */ @media (max-width: 47.9375rem) { body[data-theme="dark-purple"] #navigation.navbar { height: auto; min-height: 3.5rem; } body[data-theme="dark-purple"] #page #navigation.navbar { position: relative; border-top: none; border-bottom: none; background-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } body[data-theme="dark-purple"] #navigation .container { flex-wrap: wrap; height: auto; padding-block: 0.75rem; } body[data-theme="dark-purple"] #navigation .navbar-header { display: flex; align-items: center; justify-content: space-between; width: 100%; } /* Visually: [logo] [hamburger] regardless of DOM order */ body[data-theme="dark-purple"] #navigation .navbar-brand { order: 1; } body[data-theme="dark-purple"] #navigation .navbar-toggle { order: 2; } body[data-theme="dark-purple"] #navigation .navbar-collapse { width: 100%; margin-block-start: 0.5rem; border-block-start: 1px solid rgba(124, 58, 237, 0.12); background: rgba(5, 3, 12, 0.97); padding-block: 0.75rem; -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); } body[data-theme="dark-purple"] #navigation .region, body[data-theme="dark-purple"] #navigation .region-primary-menu { width: 100%; } body[data-theme="dark-purple"] #navigation .navbar-nav { display: flex; float: none; flex-direction: column; width: 100%; margin: 0; gap: 0; } body[data-theme="dark-purple"] #navigation .navbar-nav > li { float: none; width: 100%; } body[data-theme="dark-purple"] #navigation .navbar-nav > li > .menu-link, body[data-theme="dark-purple"] #navigation .navbar-nav > li > a { display: block; height: auto; padding: 0.75rem 1rem; transition: color 0.18s ease, background-color 0.18s ease; color: rgba(160, 154, 184, 0.85); border-radius: 0.4375rem; font-size: 0.9375rem; margin-inline: 0.5rem; } body[data-theme="dark-purple"] #navigation .navbar-nav > li > .menu-link::after, body[data-theme="dark-purple"] #navigation .navbar-nav > li > a::after { display: none; } body[data-theme="dark-purple"] #navigation .navbar-nav > li > .menu-link:hover, body[data-theme="dark-purple"] #navigation .navbar-nav > li > a:hover { color: #fff; background: rgba(124, 58, 237, 0.1); text-shadow: none; } body[data-theme="dark-purple"] #navigation .navbar-nav > li:last-child > .menu-link, body[data-theme="dark-purple"] #navigation .navbar-nav > li:last-child > a { margin-block-start: 0.5rem; transform: none; text-align: center; color: #fff; background: var(--ai-violet-600); box-shadow: none; } } /* Link inner span (from menu--primary-menu.html.twig) */ body[data-theme="dark-purple"] #navigation .primary-nav__menu-link-inner { pointer-events: none; } /* ================================================================ §47 · FLOATING BLOB BACKDROP Framer .framer-12m6s8y-container recreation: • 4 × 1040px blurred gradient circles (mix-blend-mode: screen) • Continuous CSS @keyframes drift — GPU-accelerated (will-change) • SVG fractal-noise overlay at 2 % opacity for grain texture .sp-blob-backdrop is inserted in page.html.twig (position: fixed, z-index: 0) — above the body aurora mesh, below #page-wrapper at z-index: 1. ================================================================ */ /* Global default: invisible in all non-dark-purple themes */ /* Базовое состояние — скрыто */ .sp-blob-backdrop { display: none; } /* Активация только для темы dark-purple */ body[data-theme="dark-purple"] .sp-blob-backdrop { position: fixed; z-index: 0; /* Делаем контейнер на 20% больше экрана во все стороны для безопасного сдвига */ top: -20%; left: -20%; display: block; overflow: hidden; width: 140%; height: 140%; transform: translateZ(0); /* Запуск плавной «жидкой» траектории */ animation: sp-fluid-drift 28s ease-in-out infinite alternate; pointer-events: none; /* Формируем жидкий многослойный градиент из ваших цветов */ background-color: #1a0066; background-image: radial-gradient(at 85% 15%, rgb(144, 74, 198) 0, transparent 50%), radial-gradient(at 15% 35%, rgb(137, 44, 123) 0, transparent 50%), radial-gradient(at 30% 85%, #312e81 0, transparent 55%), radial-gradient(at 85% 80%, rgb(255, 0, 127) 0, transparent 50%), radial-gradient(at 50% 50%, #4c1d95 0, transparent 60%); /* Принудительный вынос на графический чип (GPU) */ will-change: transform; } /* Контент сайта поверх фона */ body[data-theme="dark-purple"] #page-wrapper { position: relative; z-index: 1; } /* ================================================================ ЭКОНОМНАЯ АНИМАЦИЯ: Двигает весь холст, не перерисовывая пиксели ================================================================ */ @keyframes sp-fluid-drift { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 33% { transform: translate(3%, -4%) rotate(2deg) scale(1.03); } 66% { transform: translate(-2%, 5%) rotate(-2deg) scale(0.97); } 100% { transform: translate(4%, 3%) rotate(3deg) scale(1.05); } } /* Отключение динамики для пользователей с чувствительностью к движению */ @media (prefers-reduced-motion: reduce) { body[data-theme="dark-purple"] .sp-blob-backdrop { transform: scale(1); animation: none; } } body[data-theme="dark-purple"]:not(.is-always-mobile-nav) .block-search-narrow { display: none; } body[data-theme="dark-purple"] { #navigation { position: relative; display: flex; overflow: hidden; flex: none; flex-flow: row; place-content: center; align-items: center; width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; padding: 0.375rem; opacity: 1; border-radius: 2.25rem; background-color: var(#ffffff1a, rgba(255, 255, 255, 0.1)); -webkit-backdrop-filter: blur(0.4375rem); backdrop-filter: blur(0.4375rem); will-change: var(none, transform); gap: 0.5rem; } #navigation { margin: 0 auto; opacity: 1; border-radius: 2.25rem; background-color: var(#ffffff1a, rgba(255, 255, 255, 0.1)); -webkit-backdrop-filter: blur(0.4375rem); backdrop-filter: blur(0.4375rem); } #page-wrapper #navigation.navbar { position: fixed; z-index: 1000; top: auto; right: 0; bottom: 5%; left: 0; } .scrol-lnav { background-color: #ffffff1a; } #block-sp-content > div > article > div.node__content.layout--content-narrow > div > ul > li, #footer > div > div:nth-child(1) > div > div > ul > li > a, #footer > div > div > div:nth-child(3) > div > ul > li > a { color: var(--ai-text-secondary); } #main > div.social-bar, #block-sp-breadcrumbs > div.block__content > nav, #block-sp-primary-local-tasks > div.block__content > nav > ul > li.tabs__tab > a, #sp-quick-chat-form textarea, #sp-quick-chat-form input[type="text"], #sp-quick-chat-form input[type="email"] { color: var(--ai-text-secondary); border: 1px solid #ffffff1a; background-color: #ffffff1a; } #edit-comment-body-wrapper > div > div.js-form-item.form-item.js-form-type-textarea.form-item-comment-body-0-value.js-form-item-comment-body-0-value > div > div > div.ck.ck-editor__main > div, form-control, input[type="text"], select.form-select, #edit-tel, #edit-email, #edit-body, #edit-name, #sp-quick-chat-form input[type="text"], #sp-quick-chat-form input[type="email"], #sp-quick-chat-form textarea { background-color: #ffffff1a; } div.form-item--editor-format select.form-select:focus { border: 1px solid #ccc; outline: none; } }