* Recette ClickUp (tokens relevés sur clickup.com/brain) : * • fond NOIR NEUTRE, jamais teinté (Main #000 / Box #111) * • texte en gris neutre, hiérarchie nette en 3 crans * (#eee → #b4b4b4 → #838383, = Core-Text Main/Secondary/Tertiary) * • cartes SOLIDES à bordure hairline (pas de glassmorphism) → effet "pro" * • bordure hover violet désaturé (#6060A3), accents et glows discrets * Tout passe par les variables ; le thème light reste strictement inchangé. * ============================================================= */ .croco-ai.dark{ /* texte : titres blancs pleins + gris neutres (hiérarchie nette) */ --ink:#FFFFFF; --ink-soft:#A8A8B2; --ink-mute:#6E6E78; /* fonds : noir quasi pur, boîtes à peine relevées (ClickUp Main/Box) */ --bg:#060608; --bg-soft:#0C0C0F; --line:rgba(255,255,255,.10); --dark:#000000; --dark-soft:#0E0E12; /* surfaces SOLIDES + reflet supérieur (voir section BENTO) — rendu "pro" */ --surface:#101014; --surface-2:#17171C; --nav-bg:rgba(6,6,8,.78); --demo-bg:linear-gradient(180deg,#141418,#0C0C0F); --dot:rgba(255,255,255,.18); --sh:0 4px 24px rgba(0,0,0,.5); --sh-lg:0 24px 60px rgba(0,0,0,.6); } /* accents violets éclaircis, fonds très discrets (ClickUp badges ~10-15%) */ .croco-ai.dark .cc-eyebrow{color:#34E8A0;background:rgba(0,235,121,.14);border-color:rgba(0,235,121,.32)} .croco-ai.dark .cc-card .lnk, .croco-ai.dark .cc-row .txt li i, .croco-ai.dark .cc-price li i, .croco-ai.dark .cc-trust .pill i{color:#34E8A0} .croco-ai.dark .cc-step .nb, .croco-ai.dark .cc-faq summary .ic{background:rgba(0,235,121,.16);color:#34E8A0} /* hover : bordure violet désaturé, discret (ClickUp ui-border-hover #6060A3) */ .croco-ai.dark .cc-btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)} .croco-ai.dark .cc-card:hover{border-color:rgba(255,255,255,.16)} /* tint demo + glows du hero : volontairement discrets sur fond noir */ .croco-ai.dark .cc-demo:before{opacity:.06} .croco-ai.dark .cc-hero .glow1{opacity:.40} .croco-ai.dark .cc-hero .glow2{opacity:.32} .croco-ai.dark .cc-hero .glow3{opacity:.26} /* ============================================================= * BENTO / LIT — composants additionnels façon ClickUp Brain. * Layout réutilisable (sous-nav, halos ambiants, grille bento) + * finitions dark des cartes (reflet supérieur, grand rayon). * Classes NOUVELLES + règles scopées sous .dark → le light n'est * pas affecté. Pensé pour les pages en

. * ============================================================= */ /* halos ambiants : place des

dans une section. En dark, sections/hero passent en relative+overflow pour clipper le flou. */ .croco-ai.dark .cc-section,.croco-ai.dark .cc-hero{position:relative;overflow:hidden} .cc-section>.cc-wrap{position:relative;z-index:2} .cc-glow{position:absolute;width:520px;height:420px;border-radius:50%;filter:blur(120px);z-index:0;pointer-events:none;opacity:.22} .cc-glow.v{background:radial-gradient(circle,#00EB79,transparent 70%)} .cc-glow.m{background:radial-gradient(circle,#00C8C8,transparent 70%)} .cc-glow.b{background:radial-gradient(circle,#00B3FF,transparent 70%)} .cc-glow.o{background:radial-gradient(circle,#00C281,transparent 70%)} .cc-glow.top{top:-120px;left:50%;transform:translateX(-50%)} .cc-glow.tl{top:-140px;left:-100px}.cc-glow.tr{top:-120px;right:-100px} .cc-glow.bl{bottom:-160px;left:10%}.cc-glow.br{bottom:-160px;right:10%} /* ombre "sticky" quand la nav a défilé (classe .scrolled posée en JS) */ .cc-nav.scrolled .cc-subnav{background:rgba(255,255,255,.10);box-shadow:0 14px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.10)} /* sous-nav : 2e rangée de .cc-nav — onglets produit "icône en haut + libellé fin en dessous", façon ClickUp : icônes discrètes (désaturées), actif surligné. */ .cc-subnav{width:fit-content;max-width:100%;margin:0 auto;display:flex;gap:2px;justify-content:center;flex-wrap:nowrap;padding:7px 9px; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:22px; box-shadow:0 12px 36px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08); -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);transition:background .25s ease,box-shadow .25s ease} .cc-tab{display:inline-flex;flex-direction:column;align-items:center;gap:5px;font-family:'Plus Jakarta Sans'; font-weight:500;font-size:11px;color:var(--ink-mute);padding:8px 14px;border-radius:12px; transition:color .2s,background .2s;position:relative;white-space:nowrap} .cc-tab .e{font-size:18px;line-height:1;filter:grayscale(1);opacity:.55;transition:filter .2s,opacity .2s,transform .2s} .cc-tab:hover{color:var(--ink-soft);background:rgba(255,255,255,.04)} .cc-tab:hover .e{filter:grayscale(0);opacity:1;transform:translateY(-1px)} .cc-tab.on{color:var(--ink);background:rgba(255,255,255,.07)} .cc-tab.on .e{filter:grayscale(0);opacity:1} .cc-tab .new{position:absolute;top:3px;right:6px;font-size:7.5px;font-weight:800;color:#04231A;background:var(--croco-green); border-radius:4px;padding:1px 3px;letter-spacing:.02em} @media(max-width:760px){.cc-nav{padding:10px}.cc-subnav{width:auto;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch}} /* grille bento : cartes de tailles variées */ .cc-bento{display:grid;gap:20px;margin-top:54px} .cc-bento .b-row{display:grid;grid-template-columns:1fr 1fr;gap:20px} .cc-card.b-wide .in2{display:grid;grid-template-columns:1fr 1.05fr;gap:30px;align-items:center} @media(max-width:760px){.cc-bento .b-row{grid-template-columns:1fr}.cc-card.b-wide .in2{grid-template-columns:1fr;gap:22px}} /* rangée simple à 3 colonnes hors bento (aperçu des 3 familles sur le hub) */ .b-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px} @media(max-width:860px){.b-3{grid-template-columns:1fr}} /* ===== BANDEAU CTA FINAL (full-bleed) — remplace l'ancien hero dupliqué ===== Façon ClickUp : bande pleine largeur, dégradé de marque concentré en bas-droite + grain pointillé masqué vers la lumière. Titre blanc, accent en dégradé. */ .cc-cta-band{position:relative;overflow:hidden;padding:104px 0 110px;text-align:center; background:linear-gradient(165deg,#070B0C 0%,#081210 46%,#0A1620 100%);border-top:1px solid var(--line)} .cc-cta-band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(130% 130% at 84% 120%,rgba(0,179,255,.34),transparent 52%), radial-gradient(120% 120% at 92% 104%,rgba(0,200,200,.22),transparent 46%), radial-gradient(95% 130% at 10% -12%,rgba(0,235,121,.14),transparent 50%)} .cc-cta-band::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55; background-image:radial-gradient(rgba(255,255,255,.55) 1px,transparent 1.4px);background-size:22px 22px; -webkit-mask-image:radial-gradient(120% 110% at 80% 122%,#000,transparent 60%); mask-image:radial-gradient(120% 110% at 80% 122%,#000,transparent 60%)} .cc-cta-band .cc-wrap{position:relative;z-index:2} .cc-cta-band h2{color:#fff;font-size:clamp(32px,5.4vw,58px);line-height:1.05;letter-spacing:-.022em;margin:0 auto;max-width:17ch} .cc-cta-band .lead{font-size:clamp(16px,2vw,20px);color:var(--ink-soft);max-width:580px;margin:22px auto 0} .cc-cta-band .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px} .cc-cta-band .micro{margin-top:18px;font-size:13.5px;color:var(--ink-mute)} /* finitions dark des cartes : grand rayon, surface neutre + reflet supérieur discret, et SPOTLIGHT vert qui s'allume au survol (idée Gemini). */ .croco-ai.dark .cc-card{border-radius:var(--r-xl);overflow:hidden; background:radial-gradient(120% 78% at 50% 0,rgba(255,255,255,.025),transparent 58%),var(--surface)} .croco-ai.dark .cc-card>*{position:relative;z-index:1} .croco-ai.dark .cc-card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0; transition:opacity .35s ease;background:radial-gradient(440px circle at 50% -10%,rgba(0,235,121,.10),transparent 60%)} .croco-ai.dark .cc-card:hover::after{opacity:1} /* sur-titres (eyebrow) calés sur le modèle : pilule sombre discrète, texte gris doux sentence-case, petite icône accent (au lieu du point coloré). Réf. ClickUp : "⚡ Personalized · full context". */ .croco-ai.dark .cc-eyebrow{text-transform:none;letter-spacing:0;font-weight:600;font-size:12.5px; color:var(--ink-soft);background:rgba(255,255,255,.045);border-color:var(--line);padding:6px 13px} .croco-ai.dark .cc-eyebrow .pip{width:auto;height:auto;border-radius:0;background:none} .croco-ai.dark .cc-eyebrow .pip::before{content:"✦";color:#34E8A0;font-size:11px;line-height:1;font-weight:700} /* bulles de chat SUBTILES en dark (plus de bloc bleu saturé façon "template") */ .croco-ai.dark .cc-bub.a{background:rgba(0,235,121,.15);border:1px solid rgba(0,235,121,.34);color:#fff;box-shadow:none} .croco-ai.dark .cc-bub.a small{color:#34E8A0;opacity:1} .croco-ai.dark .cc-bub.u{border:1px solid var(--line)} .croco-ai.dark .cc-typing i{background:#34E8A0} /* démo alignée sur les cartes (grand rayon + reflet, pas de tint plein) */ .croco-ai.dark .cc-demo{border-radius:var(--r-xl); background:radial-gradient(120% 78% at 50% 0,rgba(0,235,121,.10),transparent 58%),var(--surface)} .croco-ai.dark .cc-demo:before{display:none} /* maquettes de bento réutilisables (mock UI sobres dans les cartes) */ .cc-mock{background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:18px} .cc-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-soft); background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px} .cc-chip.on{color:#fff;border-color:rgba(0,235,121,.5);background:rgba(0,235,121,.16)} .cc-mrow{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-soft);padding:6px 2px} .cc-mrow .d{width:7px;height:7px;border-radius:2px;background:var(--blue);flex:none} .cc-men{color:#34E8A0;font-weight:600} .cc-mlink{color:#9BD0FF;border-bottom:1px solid rgba(155,208,255,.4)} .cc-flag{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid var(--line);display:inline-grid;place-items:center;font-size:19px;vertical-align:middle} .cc-sw{width:34px;height:34px;border-radius:50%;background:var(--grad-brand);display:inline-grid;place-items:center;color:#fff;font-size:15px;box-shadow:var(--glow);vertical-align:middle} /* bande pricing/CTA en dark : carte sombre + halo ambiant (plus de gradient plein qui "surcharge"). On garde le contenu, on calme le contenant. */ .croco-ai.dark .cc-band{animation:none;border:1px solid var(--line);box-shadow:var(--sh-lg); background:radial-gradient(90% 130% at 50% -10%,rgba(0,235,121,.22),transparent 60%),var(--surface)} .croco-ai.dark .cc-band .noise{opacity:.05} .croco-ai.dark .cc-band p{color:var(--ink-soft)} .croco-ai.dark .cc-band .price{color:#fff} /* footer en dark : plus sobre (séparateurs fins, texte muté) */ .croco-ai.dark .cc-foot{background:var(--dark);border-top:1px solid var(--line)} .croco-ai.dark .cc-foot .top{border-bottom-color:var(--line)} .croco-ai.dark .cc-foot h4{color:var(--ink-mute)} .croco-ai.dark .cc-foot a{color:var(--ink-soft)} .croco-ai.dark .cc-foot .blurb,.croco-ai.dark .cc-foot .bot{color:var(--ink-mute)} /* ============================================================= * AMBIANCE PREMIUM (inspiration Linear/Vercel, accent vert on-brand) * Fond grille subtil · stats en bande transparente · tuiles neutres * (vert réservé à la carte vedette) · reveals en cascade · mock * "command center" du hero avec balayage laser en UN seul passage. * ============================================================= */ /* fond grille subtil (vert ~3%) ajouté au backdrop plein-écran dark */ .croco-ai.dark::before{ background-image: linear-gradient(to right,rgba(0,235,121,.03) 1px,transparent 1px), linear-gradient(to bottom,rgba(0,235,121,.03) 1px,transparent 1px); background-size:40px 40px} /* stats : bande transparente à filets fins (au lieu du bloc plein) + chiffres blancs */ .croco-ai.dark .cc-stats{background:transparent;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .croco-ai.dark .cc-stats .s .n{background:none;-webkit-text-fill-color:#fff;color:#fff} /* tuiles d'icônes neutres ; le vert guide l'œil sur la seule carte vedette */ .croco-ai.dark .cc-tile{background:rgba(255,255,255,.05);border:1px solid var(--line);color:#fff;box-shadow:none} .croco-ai.dark .cc-card.b-wide .cc-tile{background:rgba(0,235,121,.12);border-color:rgba(0,235,121,.35); color:var(--croco-green);box-shadow:0 0 22px rgba(0,235,121,.16)} /* reveals en cascade : classes utilitaires + auto-stagger des grilles */ .cc-rev.delay-1{transition-delay:.08s}.cc-rev.delay-2{transition-delay:.16s}.cc-rev.delay-3{transition-delay:.24s} .cc-bento .b-row .cc-card:nth-child(2){transition-delay:.08s} .cc-steps .cc-step:nth-child(2){transition-delay:.08s}.cc-steps .cc-step:nth-child(3){transition-delay:.16s} .cc-stats .s:nth-child(2){transition-delay:.06s}.cc-stats .s:nth-child(3){transition-delay:.12s}.cc-stats .s:nth-child(4){transition-delay:.18s} /* mock "command center" du hero (verre neutre) + balayage laser vert (1 passage) */ .cc-cmd{max-width:760px;margin:56px auto 0;position:relative;z-index:2;border-radius:var(--r-xl); background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-lg);overflow:hidden} .cc-cmd .hd{display:flex;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line)} .cc-cmd .hd i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.14)} .cc-cmd .bd{padding:22px;display:grid;gap:16px;text-align:left} .cc-cmd .in{display:flex;align-items:center;gap:14px;background:rgba(0,0,0,.45);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px 18px} .cc-cmd .in .ic{flex:none;width:34px;height:34px;border-radius:9px;background:var(--croco-green);display:grid;place-items:center;color:#04231A;font-weight:800} .cc-cmd .in .q{flex:1;min-width:0;color:#fff;font-size:15px} .cc-cmd .in .go{flex:none;font-family:'Plus Jakarta Sans';font-weight:700;font-size:13px;color:#04231A;background:var(--croco-green);border-radius:9px;padding:8px 13px} .cc-cmd .chips{display:flex;gap:9px;flex-wrap:wrap;justify-content:center} .cc-cmd .chips .c{font-size:12.5px;color:var(--ink-soft);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 13px} .cc-cmd::after{content:"";position:absolute;left:0;width:100%;height:1px;top:-5%; background:linear-gradient(90deg,transparent,var(--croco-green),transparent); box-shadow:0 0 16px 2px rgba(0,235,121,.5);pointer-events:none;z-index:5; animation:cc-scan 2.6s ease-out 1 .6s both} @keyframes cc-scan{0%{top:-5%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:105%;opacity:0}} @media(prefers-reduced-motion:reduce){.cc-cmd::after{display:none}} /* ============================================================= * EMPLACEMENT D'IMAGE (placeholder, AUCUN src/lien) — décrit l'image * à produire. Markup :

micro-description

* Ratios : `wide` (16/9) · `sq` (1/1) · `tall` (3/4) · rien = boîte auto. * ============================================================= */ .cc-img{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px; text-align:center;min-height:220px;padding:28px;border-radius:var(--r-xl);overflow:hidden; border:1px dashed rgba(255,255,255,.16); background:repeating-linear-gradient(135deg,rgba(255,255,255,.015) 0 12px,transparent 12px 24px),var(--surface)} .cc-img::before{content:"🖼 IMAGE À CRÉER";font-family:'Sometype Mono',monospace;font-size:10.5px; letter-spacing:.12em;color:var(--croco-green);opacity:.85} .cc-img p{font-size:14px;color:var(--ink-soft);max-width:40ch;line-height:1.5;margin:0} .cc-img.wide{aspect-ratio:16/9;min-height:0} .cc-img.sq{aspect-ratio:1/1;min-height:0} .cc-img.tall{aspect-ratio:3/4;min-height:0} /* ============================================================= * VISUELS RÉELS — captures à fond transparent (mockups 3D + glow). * L'image porte déjà son ombre : aucun cadre. Scopé sous .cc-figure * pour ne PAS toucher les .cc-shot de CrocoVibe. * ============================================================= */ .croco-ai .cc-figure{display:flex;justify-content:center;align-items:center;margin-inline:auto} .croco-ai .cc-figure .cc-shot{width:100%;height:auto;max-width:1040px} .croco-ai .cc-figure.hero .cc-shot{max-width:1180px} .croco-ai .cc-figure.in-card{margin-bottom:14px} .croco-ai .cc-figure.in-card .cc-shot{max-width:100%} /* ============================================================= * IA NEON BRAND — ambiance rainbow validée sur CrocoVibe, * partagée par les pages IA actives via .ai-neon-brand. * ============================================================= */ @property --cc-hero-border-angle{ syntax:""; initial-value:0deg; inherits:false; } .croco-ai.ai-neon-brand{ --cv-rainbow:linear-gradient(100deg,#10E7FF 0%,#685BFF 24%,#F43BD3 48%,#FF7A1A 72%,#F7F042 100%); --cv-rainbow-soft:linear-gradient(120deg,rgba(16,231,255,.16),rgba(244,59,211,.14),rgba(247,240,66,.12)); --cv-pink:#FF3BD6; --cv-cyan:#19E7FF; --cv-yellow:#F7F042; --bg:#030304; --bg-soft:#07070A; --surface:#0B0B10; --surface-2:#111119; --line:rgba(255,255,255,.12); --nav-bg:rgba(3,3,4,.78); } .croco-ai.ai-neon-brand::before{background:#030304} .croco-ai.ai-neon-brand .cc-text-grad{background:var(--cv-rainbow);-webkit-background-clip:text;background-clip:text;color:transparent} .croco-ai.ai-neon-brand .cc-nav{background:transparent;border:none} .croco-ai.ai-neon-brand .cc-subnav{background:rgba(255,255,255,.055)} .croco-ai.ai-neon-brand .cc-hero{ padding:72px 0 0; background: radial-gradient(120% 80% at 50% 44%,rgba(0,235,121,.08),transparent 62%), linear-gradient(180deg,#030304 0%,#050506 56%,#08080C 100%); } .croco-ai.ai-neon-brand .cc-hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(34% 24% at 22% 50%,rgba(255,59,214,.22),transparent 72%), radial-gradient(38% 24% at 76% 48%,rgba(25,231,255,.20),transparent 74%), radial-gradient(40% 26% at 54% 62%,rgba(247,240,66,.18),transparent 72%), radial-gradient(42% 30% at 44% 58%,rgba(255,122,26,.16),transparent 74%), radial-gradient(46% 30% at 58% 58%,rgba(0,235,121,.16),transparent 74%), radial-gradient(62% 30% at 50% 68%,rgba(104,91,255,.18),transparent 76%), linear-gradient(to right,rgba(255,255,255,.025) 1px,transparent 1px), linear-gradient(to bottom,rgba(255,255,255,.018) 1px,transparent 1px); background-size:auto,auto,auto,auto,auto,auto,46px 46px,46px 46px; -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 72%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 72%,transparent 100%); } .croco-ai.ai-neon-brand .cc-hero::after{ content:""; position:absolute; left:50%; bottom:0; z-index:2; width:min(920px,68vw); height:1px; transform:translateX(-50%); background:var(--cv-rainbow); opacity:.82; box-shadow:0 0 18px rgba(25,231,255,.36),0 0 28px rgba(255,59,214,.22); pointer-events:none; } .croco-ai.ai-neon-brand .cc-hero .glow1, .croco-ai.ai-neon-brand .cc-hero .glow2, .croco-ai.ai-neon-brand .cc-hero .glow3{display:none} .croco-ai.ai-neon-brand .cv-ring{ display:none; } .croco-ai.ai-neon-brand .cv-kicker{ color:#F3F4F8; background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 0 26px rgba(25,231,255,.08); } .croco-ai.ai-neon-brand .cv-kicker .pip::before{color:var(--cv-cyan)} .croco-ai.ai-neon-brand .cc-hero h1{ max-width:1040px; margin-top:20px; font-size:clamp(40px,6.4vw,78px); line-height:1.04; letter-spacing:0; text-shadow:0 12px 40px rgba(0,0,0,.44); } .croco-ai.ai-neon-brand .cc-hero .lead{ max-width:720px; margin-top:18px; color:rgba(255,255,255,.72); font-size:clamp(14.5px,1.45vw,17px); line-height:1.58; } .croco-ai.ai-neon-brand .cc-hero .micro{color:rgba(255,255,255,.68)} .croco-ai.ai-neon-brand .cc-hero .cta{margin-top:24px} .croco-ai.ai-neon-brand .cc-hero .cc-btn-primary{ --cc-hero-border-angle:0deg; position:relative; isolation:isolate; overflow:visible; border:2px solid transparent; background: linear-gradient(180deg,#111118 0%,#07070A 100%) padding-box, conic-gradient(from var(--cc-hero-border-angle), #10E7FF 0deg, #685BFF 54deg, #F43BD3 112deg, #FF7A1A 176deg, #F7F042 238deg, #00EB79 304deg, #10E7FF 360deg) border-box; box-shadow: inset 0 0 14px rgba(255,255,255,.06), 0 0 18px rgba(25,231,255,.44), 0 0 36px rgba(255,59,214,.32), 0 0 62px rgba(247,240,66,.16); animation:cc-hero-neon-border-orbit 4.2s linear infinite,cc-hero-neon-pulse 3.2s ease-in-out infinite; text-shadow:0 0 8px rgba(255,255,255,.18); } .croco-ai.ai-neon-brand .cc-hero .cc-btn-primary::before{ content:""; position:absolute; inset:-18px -24px; z-index:-2; border-radius:inherit; background: radial-gradient(circle at 20% 50%,rgba(16,231,255,.5),transparent 34%), radial-gradient(circle at 50% 18%,rgba(244,59,211,.42),transparent 36%), radial-gradient(circle at 82% 52%,rgba(247,240,66,.4),transparent 34%), linear-gradient(110deg,rgba(16,231,255,.35),rgba(244,59,211,.32),rgba(255,122,26,.28),rgba(0,235,121,.3)); background-size:180% 180%; filter:blur(18px); opacity:.58; animation:cc-hero-neon-aura 4.2s ease-in-out infinite; pointer-events:none; } .croco-ai.ai-neon-brand .cc-hero .cc-btn-primary:hover{ box-shadow: inset 0 0 16px rgba(255,255,255,.08), 0 0 22px rgba(25,231,255,.56), 0 0 48px rgba(255,59,214,.44), 0 0 82px rgba(247,240,66,.22); animation-duration:2.8s; } .croco-ai.ai-neon-brand .cc-hero .cc-btn-primary:hover::before{opacity:.72;filter:blur(20px)} @keyframes cc-hero-neon-aura{ 0%,100%{background-position:0% 50%;transform:scale(.98)} 50%{background-position:100% 50%;transform:scale(1.04)} } @keyframes cc-hero-neon-border-orbit{ to{--cc-hero-border-angle:360deg} } @keyframes cc-hero-neon-pulse{ 0%,100%{filter:saturate(1)} 50%{filter:saturate(1.28) brightness(1.08)} } @media (prefers-reduced-motion:reduce){ .croco-ai.ai-neon-brand .cc-hero .cc-btn-primary, .croco-ai.ai-neon-brand .cc-hero .cc-btn-primary::before{animation:none} } .croco-ai.ai-neon-brand .cv-proof{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; color:rgba(255,255,255,.72); } .croco-ai.ai-neon-brand .cv-proof span{ color:var(--cv-yellow); text-shadow:0 0 18px rgba(247,240,66,.45); } .croco-ai.ai-neon-brand .cv-hero-stage{ position:relative; z-index:2; max-width:1060px; margin:6px auto 36px; padding:0; transform:perspective(1400px) rotateX(4deg); transform-origin:50% 100%; filter:drop-shadow(0 -14px 44px rgba(255,59,214,.18)) drop-shadow(0 34px 70px rgba(0,0,0,.70)); } .croco-ai.ai-neon-brand .cv-hero-stage::before{ display:none; } .croco-ai.ai-neon-brand .cv-hero-stage::after{ content:""; position:absolute; left:-9%; right:-9%; top:-20%; height:72%; border-radius:50%; background: radial-gradient(42% 68% at 18% 58%,rgba(255,59,214,.42),transparent 72%), radial-gradient(34% 70% at 44% 48%,rgba(255,122,26,.30),transparent 72%), radial-gradient(32% 72% at 55% 42%,rgba(247,240,66,.30),transparent 72%), radial-gradient(42% 72% at 76% 52%,rgba(0,235,121,.32),transparent 74%), radial-gradient(50% 80% at 88% 46%,rgba(25,231,255,.30),transparent 74%), radial-gradient(60% 84% at 50% 62%,rgba(104,91,255,.28),transparent 76%); filter:blur(34px); opacity:.82; z-index:-1; } .croco-ai.ai-neon-brand .cv-hero-stage .cc-shot{ margin:0; border:0; border-radius:0; background:transparent; } .croco-ai.ai-neon-brand .cc-hero .cc-figure.hero, .croco-ai.ai-neon-brand .cc-hero>.cc-wrap>.cc-img.wide, .croco-ai.ai-neon-brand .cc-hero .cc-cmd{ position:relative; z-index:2; margin-top:18px!important; margin-bottom:36px!important; filter:drop-shadow(0 -14px 44px rgba(255,59,214,.16)) drop-shadow(0 34px 70px rgba(0,0,0,.62)); } .croco-ai.ai-neon-brand .cc-hero .cc-figure.hero::after, .croco-ai.ai-neon-brand .cc-hero>.cc-wrap>.cc-img.wide::after, .croco-ai.ai-neon-brand .cc-hero .cc-cmd::before{ content:""; position:absolute; left:-9%; right:-9%; top:-24%; height:76%; border-radius:50%; background: radial-gradient(42% 68% at 18% 58%,rgba(255,59,214,.36),transparent 72%), radial-gradient(34% 70% at 44% 48%,rgba(255,122,26,.26),transparent 72%), radial-gradient(32% 72% at 55% 42%,rgba(247,240,66,.26),transparent 72%), radial-gradient(42% 72% at 76% 52%,rgba(0,235,121,.28),transparent 74%), radial-gradient(50% 80% at 88% 46%,rgba(25,231,255,.26),transparent 74%), radial-gradient(60% 84% at 50% 62%,rgba(104,91,255,.24),transparent 76%); filter:blur(34px); opacity:.78; z-index:-1; pointer-events:none; } .croco-ai.ai-neon-brand .cc-hero .cc-cmd::after{display:none} .croco-ai.ai-neon-brand .cc-hero .cc-figure.hero .cc-shot{ border:0; border-radius:0; background:transparent; } .croco-ai.ai-neon-brand .cv-first-section, .croco-ai.ai-neon-brand .cc-hero+.cc-section, .croco-ai.ai-neon-brand .cc-hero+.cc-trust+.cc-section{ padding-top:104px; background: linear-gradient(180deg,#08080C 0%,#050507 54%,#07070A 100%); } .croco-ai.ai-neon-brand .cv-first-section .cc-glow.v, .croco-ai.ai-neon-brand .cc-hero+.cc-section .cc-glow.v, .croco-ai.ai-neon-brand .cc-hero+.cc-trust+.cc-section .cc-glow.v{background:radial-gradient(circle,rgba(255,59,214,.64),transparent 70%)} .croco-ai.ai-neon-brand .cv-first-section .cc-glow.m, .croco-ai.ai-neon-brand .cv-first-section .cc-glow.b, .croco-ai.ai-neon-brand .cc-hero+.cc-section .cc-glow.m, .croco-ai.ai-neon-brand .cc-hero+.cc-section .cc-glow.b, .croco-ai.ai-neon-brand .cc-hero+.cc-trust+.cc-section .cc-glow.m, .croco-ai.ai-neon-brand .cc-hero+.cc-trust+.cc-section .cc-glow.b{background:radial-gradient(circle,rgba(25,231,255,.58),transparent 70%)} .croco-ai.ai-neon-brand .cv-first-section .cc-head, .croco-ai.ai-neon-brand .cc-hero+.cc-section .cc-head, .croco-ai.ai-neon-brand .cc-hero+.cc-trust+.cc-section .cc-head{max-width:760px} .croco-ai.ai-neon-brand .cv-first-section .cc-head h2, .croco-ai.ai-neon-brand .cc-hero+.cc-section .cc-head h2, .croco-ai.ai-neon-brand .cc-hero+.cc-trust+.cc-section .cc-head h2{letter-spacing:0} .croco-ai.ai-neon-brand .cv-first-section .cc-head p, .croco-ai.ai-neon-brand .cc-hero+.cc-section .cc-head p, .croco-ai.ai-neon-brand .cc-hero+.cc-trust+.cc-section .cc-head p{color:rgba(255,255,255,.68)} .croco-ai.ai-neon-brand .cv-first-section .cc-card, .croco-ai.ai-neon-brand .cc-hero+.cc-section .cc-card, .croco-ai.ai-neon-brand .cc-hero+.cc-trust+.cc-section .cc-card{ background: radial-gradient(120% 82% at 50% 0,rgba(255,255,255,.055),transparent 58%), linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015)), #0A0A0F; border-color:rgba(255,255,255,.12); box-shadow:0 22px 60px rgba(0,0,0,.44); } .croco-ai.ai-neon-brand .cv-first-section .cc-card:hover, .croco-ai.ai-neon-brand .cc-hero+.cc-section .cc-card:hover, .croco-ai.ai-neon-brand .cc-hero+.cc-trust+.cc-section .cc-card:hover{ border-color:rgba(25,231,255,.30); box-shadow:0 28px 74px rgba(0,0,0,.58),0 0 34px rgba(255,59,214,.10); } .croco-ai.ai-neon-brand .cv-first-section .cc-card.b-wide, .croco-ai.ai-neon-brand .cc-hero+.cc-section .cc-card.b-wide, .croco-ai.ai-neon-brand .cc-hero+.cc-trust+.cc-section .cc-card.b-wide{ background: linear-gradient(#0A0A0F,#0A0A0F) padding-box, var(--cv-rainbow) border-box; border:1px solid transparent; } .croco-ai.ai-neon-brand .cv-first-section .cc-tile, .croco-ai.ai-neon-brand .cc-hero+.cc-section .cc-tile, .croco-ai.ai-neon-brand .cc-hero+.cc-trust+.cc-section .cc-tile{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); } .croco-ai.ai-neon-brand .cv-first-section .cc-card.b-wide .cc-tile, .croco-ai.ai-neon-brand .cc-hero+.cc-section .cc-card.b-wide .cc-tile, .croco-ai.ai-neon-brand .cc-hero+.cc-trust+.cc-section .cc-card.b-wide .cc-tile{ color:#fff; background:var(--cv-rainbow); box-shadow:0 0 28px rgba(255,59,214,.22); } .croco-ai.ai-neon-brand .cv-first-section .cc-card h3, .croco-ai.ai-neon-brand .cc-hero+.cc-section .cc-card h3, .croco-ai.ai-neon-brand .cc-hero+.cc-trust+.cc-section .cc-card h3{letter-spacing:0} .croco-ai.ai-neon-brand .cv-first-section .cc-card p, .croco-ai.ai-neon-brand .cc-hero+.cc-section .cc-card p, .croco-ai.ai-neon-brand .cc-hero+.cc-trust+.cc-section .cc-card p{color:rgba(255,255,255,.66)} .croco-ai.ai-neon-brand .cv-first-section .cc-shot, .croco-ai.ai-neon-brand .cc-hero+.cc-section .cc-shot, .croco-ai.ai-neon-brand .cc-hero+.cc-trust+.cc-section .cc-shot{ border:0; border-radius:0; background:transparent; box-shadow:none; filter:drop-shadow(0 18px 34px rgba(0,0,0,.28)); } @media(max-width:760px){ .croco-ai.ai-neon-brand .cc-hero{padding-top:56px} .croco-ai.ai-neon-brand .cv-ring{display:none} .croco-ai.ai-neon-brand .cc-hero h1{max-width:342px;font-size:clamp(34px,9.8vw,48px);line-height:1.05} .croco-ai.ai-neon-brand .cc-hero .lead{font-size:14.5px;line-height:1.55} .croco-ai.ai-neon-brand .cc-hero .cc-btn{width:100%;justify-content:center;white-space:normal;text-align:center} .croco-ai.ai-neon-brand .cv-proof{font-size:12.5px;flex-wrap:wrap} .croco-ai.ai-neon-brand .cv-hero-stage{margin-top:10px;margin-bottom:28px;transform:none} .croco-ai.ai-neon-brand .cc-hero .cc-figure.hero, .croco-ai.ai-neon-brand .cc-hero>.cc-wrap>.cc-img.wide, .croco-ai.ai-neon-brand .cc-hero .cc-cmd{margin-top:10px!important;margin-bottom:28px!important} .croco-ai.ai-neon-brand .cc-hero::after{width:calc(100% - 48px)} .croco-ai.ai-neon-brand .cv-first-section, .croco-ai.ai-neon-brand .cc-hero+.cc-section, .croco-ai.ai-neon-brand .cc-hero+.cc-trust+.cc-section{padding-top:80px} } @media(max-width:900px){ .croco-ai.ai-neon-brand .cc-nav .act{display:none} }