/* ====================================================================== NIELAY — theme.css (Araucanía Vibrante + AI Studio-like UX) Objetivo: dark premium + acentos (bosque/lago/volcán) + motion suave. Uso: - Incluye este CSS globalmente (Filament/app/demo). - Para colapsar sidebar: o ====================================================================== */ /* ------------------------------ 1) TOKENS -------------------------------- */ :root{ /* Brand (Araucanía) */ --nielay-primary-50:#eafff6; --nielay-primary-100:#c9ffe7; --nielay-primary-200:#99ffd3; --nielay-primary-300:#60ffb8; --nielay-primary-400:#2df2a0; --nielay-primary-500:#00d084; /* Verde Araucanía (principal) */ --nielay-primary-600:#00b074; --nielay-primary-700:#008a5b; --nielay-primary-800:#006844; --nielay-primary-900:#004b32; --nielay-lake-400:#38c5ff; --nielay-lake-500:#19b3ff; --nielay-lake-600:#0a92d6; --nielay-lava-500:#ff4d1f; --nielay-lava-600:#e83c12; /* Neutrals */ --nielay-bg:#05080b; --nielay-bg-2:#070d12; --nielay-surface:#0b141c; --nielay-surface-2:#0f1b26; --nielay-stroke:#1c2b3a; --nielay-stroke-2:#243649; /* Text */ --nielay-text:#eaf2fb; --nielay-muted:#9ab0c3; --nielay-muted-2:#7f97ad; /* Semantic */ --nielay-primary:var(--nielay-primary-500); --nielay-primary-2:var(--nielay-primary-600); --nielay-accent:var(--nielay-lake-500); --nielay-success:#22c55e; --nielay-warning:var(--nielay-lava-500); --nielay-danger:#ef4444; --nielay-info:var(--nielay-lake-500); /* Radius */ --nielay-radius-sm:10px; --nielay-radius-md:14px; --nielay-radius-lg:18px; --nielay-radius-xl:22px; /* Shadow / glow (sutil) */ --nielay-shadow:0 10px 30px rgba(0,0,0,.55); --nielay-shadow-2:0 18px 55px rgba(0,0,0,.65); --nielay-glow:0 0 0 1px rgba(0,208,132,.22),0 0 26px rgba(0,208,132,.10); --nielay-glow-soft:0 0 0 1px rgba(25,179,255,.18),0 0 28px rgba(25,179,255,.08); /* Motion (AI Studio vibe) */ --nielay-ease-out:cubic-bezier(.2,.9,.2,1); --nielay-ease:cubic-bezier(.2,.6,.2,1); --nielay-fast:140ms; --nielay-mid:220ms; --nielay-slow:320ms; /* Layout */ --nielay-sidebar-w:18.5rem; --nielay-sidebar-w-collapsed:4.75rem; /* Background */ --nielay-bg-grad: radial-gradient(1100px 520px at 18% 0%, rgba(0,208,132,.14) 0%, rgba(25,179,255,.10) 35%, rgba(0,0,0,0) 70%), radial-gradient(900px 520px at 92% 10%, rgba(255,77,31,.10) 0%, rgba(0,0,0,0) 60%), linear-gradient(180deg,var(--nielay-bg) 0%,var(--nielay-bg-2) 100%); } /* ------------------------------ 2) BASE -------------------------------- */ html,body{height:100%;} body{ background:var(--nielay-bg-grad); color:var(--nielay-text); font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:inherit;} ::selection{background:rgba(0,208,132,.22);} .nielay-glass{ background:linear-gradient(180deg,rgba(15,27,38,.78),rgba(11,20,28,.72)); border:1px solid rgba(36,54,73,.85); box-shadow:var(--nielay-shadow); backdrop-filter:blur(12px); border-radius:var(--nielay-radius-xl); } .nielay-card{ background:linear-gradient(180deg,rgba(15,27,38,.92),rgba(11,20,28,.86)); border:1px solid rgba(36,54,73,.85); box-shadow:var(--nielay-shadow); border-radius:var(--nielay-radius-lg); } .nielay-card:hover{ border-color:rgba(0,208,132,.28); box-shadow:var(--nielay-shadow),var(--nielay-glow); } /* Scrollbar (premium) */ *::-webkit-scrollbar{width:10px;height:10px;} *::-webkit-scrollbar-thumb{ background:rgba(154,176,195,.18); border-radius:999px; border:2px solid rgba(0,0,0,0); background-clip:padding-box; } *::-webkit-scrollbar-thumb:hover{background:rgba(154,176,195,.28);} /* ------------------------------ 3) BUTTONS / CHIPS -------------------------------- */ .nielay-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.6rem .85rem; border-radius:999px; border:1px solid rgba(36,54,73,.9); background:rgba(15,27,38,.82); box-shadow:0 6px 18px rgba(0,0,0,.35); transition:transform var(--nielay-fast) var(--nielay-ease-out), border-color var(--nielay-fast) var(--nielay-ease-out), background var(--nielay-fast) var(--nielay-ease-out); } .nielay-btn:hover{transform:translateY(-1px);border-color:rgba(0,208,132,.35);background:rgba(15,27,38,.92);} .nielay-btn:active{transform:translateY(0);} .nielay-btn--primary{ border-color:rgba(0,208,132,.35); background:linear-gradient(180deg,rgba(0,208,132,.22),rgba(0,176,116,.12)); } .nielay-btn--primary:hover{box-shadow:var(--nielay-shadow),var(--nielay-glow);} .nielay-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .6rem; border-radius:999px; border:1px solid rgba(36,54,73,.85); background:rgba(11,20,28,.72); color:var(--nielay-muted); font-size:.78rem; } .nielay-chip--ok{border-color:rgba(34,197,94,.35);color:#bfffd8;} .nielay-chip--warn{border-color:rgba(255,77,31,.35);color:#ffd3c7;} .nielay-chip--info{border-color:rgba(25,179,255,.35);color:#cfefff;} /* ------------------------------ 4) FILAMENT/ADMIN HOOKS (safe) Si tu UI no es Filament, igual no rompe. -------------------------------- */ .fi-body, .fi-main, .fi-page{background:transparent !important;} .fi-section, .fi-ta, .fi-wi, .fi-modal-window{ background:linear-gradient(180deg,rgba(15,27,38,.92),rgba(11,20,28,.86)) !important; border:1px solid rgba(36,54,73,.85) !important; border-radius:var(--nielay-radius-lg) !important; box-shadow:var(--nielay-shadow) !important; } /* Topbar - estilo ux-demo */ .fi-topbar{ background:rgba(11,20,28,.75) !important; border-bottom:1px solid rgba(36,54,73,.85) !important; backdrop-filter:blur(14px); padding:.75rem 1.5rem !important; } /* Main content area */ .fi-main-ctn{ transition:padding-left var(--nielay-mid) var(--nielay-ease-out); } /* Breadcrumbs */ .fi-breadcrumbs{ background:transparent !important; } .fi-breadcrumbs-item{ color:var(--nielay-muted) !important; font-size:.85rem !important; } .fi-breadcrumbs-item-separator{ color:rgba(154,176,195,.4) !important; } /* Global search */ .fi-global-search-input{ background:rgba(7,13,18,.6) !important; border:1px solid rgba(36,54,73,.7) !important; border-radius:12px !important; } .fi-global-search-input:focus{ border-color:rgba(0,208,132,.4) !important; box-shadow:var(--nielay-glow) !important; } /* User menu */ .fi-user-menu-trigger{ background:rgba(255,255,255,.04) !important; border:1px solid rgba(36,54,73,.7) !important; border-radius:12px !important; padding:.5rem .75rem !important; } .fi-user-menu-trigger:hover{ background:rgba(255,255,255,.08) !important; border-color:rgba(0,208,132,.3) !important; } /* Dropdown menus */ .fi-dropdown-panel{ background:linear-gradient(180deg,rgba(15,27,38,.98),rgba(11,20,28,.96)) !important; border:1px solid rgba(36,54,73,.85) !important; border-radius:var(--nielay-radius-md) !important; box-shadow:var(--nielay-shadow-2) !important; backdrop-filter:blur(12px); } .fi-dropdown-list-item:hover{ background:rgba(0,208,132,.08) !important; } .fi-dropdown-list-item-label{ color:var(--nielay-text) !important; } /* Inputs */ .fi-input, .fi-select-input, .fi-ta-search-field input{ background:rgba(7,13,18,.55) !important; border:1px solid rgba(36,54,73,.85) !important; border-radius:12px !important; color:var(--nielay-text) !important; } .fi-input:focus, .fi-select-input:focus, .fi-ta-search-field input:focus{ outline:none !important; border-color:rgba(0,208,132,.40) !important; box-shadow:var(--nielay-glow) !important; } /* Tables */ .fi-ta-table{ border-radius:var(--nielay-radius-lg); overflow:hidden; } .fi-ta-row:hover{background:rgba(25,179,255,.06) !important;} /* Badges */ .fi-badge{ border-radius:999px !important; border:1px solid rgba(36,54,73,.85) !important; background:rgba(11,20,28,.72) !important; } /* ------------------------------ 5) SIDEBAR (AI Studio-like) - Compatible con Filament 3 + Alpine.js -------------------------------- */ /* Base sidebar styling */ .fi-sidebar{ background:linear-gradient(180deg,rgba(11,20,28,.95),rgba(7,13,18,.92)) !important; border-right:1px solid rgba(36,54,73,.85) !important; box-shadow:var(--nielay-shadow); backdrop-filter:blur(12px); } /* Sidebar header con logo */ .fi-sidebar-header{ padding:1rem 1rem .75rem 1rem !important; gap:.75rem; background:rgba(11,20,28,.6) !important; border-bottom:1px solid rgba(36,54,73,.5) !important; } /* Logo styling */ .fi-sidebar-header .fi-logo{ font-weight:900 !important; font-size:1.25rem !important; background:linear-gradient(135deg,var(--nielay-primary-400),var(--nielay-lake-400)) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; } /* Nav container */ .fi-sidebar-nav{ padding:1rem .75rem !important; } /* Navigation groups - estilo ux-demo */ .fi-sidebar-group{ background:rgba(255,255,255,.025) !important; border:1px solid rgba(36,54,73,.6) !important; border-radius:var(--nielay-radius-lg) !important; margin-bottom:.75rem !important; overflow:hidden; } .fi-sidebar-group-button{ padding:.75rem 1rem !important; background:transparent !important; border-bottom:1px solid rgba(36,54,73,.4) !important; } .fi-sidebar-group-label{ font-weight:700 !important; font-size:.8rem !important; letter-spacing:.3px !important; color:var(--nielay-muted) !important; text-transform:uppercase !important; } .fi-sidebar-group-items{ padding:.5rem .5rem .75rem .5rem !important; } /* Navigation items */ .fi-sidebar-item{ margin-bottom:.35rem !important; } .fi-sidebar-item > a, .fi-sidebar-item > button{ border-radius:14px !important; border:1px solid transparent !important; padding:.65rem .85rem !important; transition:all var(--nielay-fast) var(--nielay-ease-out) !important; } .fi-sidebar-item > a:hover, .fi-sidebar-item > button:hover{ background:rgba(255,255,255,.04) !important; border-color:rgba(255,255,255,.08) !important; transform:translateX(2px); } /* Active item - gradiente como ux-demo */ .fi-sidebar-item-active > a, .fi-sidebar-item-active > button{ background:linear-gradient(90deg,rgba(0,208,132,.18),rgba(25,179,255,.10)) !important; border-color:rgba(0,208,132,.28) !important; box-shadow:var(--nielay-glow); } /* Item icon */ .fi-sidebar-item-icon{ width:1.35rem !important; height:1.35rem !important; color:var(--nielay-muted) !important; } .fi-sidebar-item-active .fi-sidebar-item-icon{ color:var(--nielay-primary) !important; } /* Item label */ .fi-sidebar-item-label{ font-weight:600 !important; font-size:.875rem !important; color:rgba(234,242,251,.92) !important; } /* Badge */ .fi-sidebar-item-badge, .fi-badge{ background:rgba(255,255,255,.07) !important; border:1px solid rgba(36,54,73,.85) !important; border-radius:999px !important; font-size:.7rem !important; font-weight:700 !important; padding:.2rem .5rem !important; } /* ====== COLLAPSED STATE ====== */ /* Filament usa Alpine.js: cuando sidebar NO tiene .fi-sidebar-open en lg screens, está colapsado */ @media (min-width: 1024px) { /* Sidebar colapsado (sin clase fi-sidebar-open) */ .fi-sidebar:not(.fi-sidebar-open){ width:var(--collapsed-sidebar-width, 4.5rem) !important; } /* Ocultar labels cuando está colapsado */ .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-label, .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-label, .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-badge{ opacity:0 !important; width:0 !important; overflow:hidden !important; white-space:nowrap !important; margin:0 !important; padding:0 !important; } /* Centrar iconos cuando colapsado */ .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item > a, .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item > button{ justify-content:center !important; padding:.65rem !important; } /* Ocultar logo texto cuando colapsado */ .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header > div:first-child{ display:none !important; } /* Ajustar grupos cuando colapsado */ .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group{ background:transparent !important; border:none !important; margin-bottom:.25rem !important; } .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-button{ display:none !important; } .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-items{ padding:.25rem !important; } /* Sidebar abierto */ .fi-sidebar.fi-sidebar-open{ width:var(--sidebar-width, 17rem) !important; } } /* Botón de toggle del sidebar */ .fi-sidebar-header .fi-icon-btn{ background:rgba(0,208,132,.1) !important; border:1px solid rgba(0,208,132,.25) !important; border-radius:12px !important; color:var(--nielay-primary) !important; } .fi-sidebar-header .fi-icon-btn:hover{ background:rgba(0,208,132,.2) !important; border-color:rgba(0,208,132,.4) !important; } /* Footer del sidebar */ .fi-sidebar-footer{ position:sticky; bottom:0; padding:.75rem !important; background:linear-gradient(180deg,rgba(11,20,28,0) 0%,rgba(11,20,28,.95) 25%,rgba(11,20,28,1) 100%) !important; border-top:1px solid rgba(36,54,73,.6) !important; } /* ------------------------------ 6) SERVICE CARDS (tu modelo "compran y habilitas") -------------------------------- */ .nielay-service-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; } .nielay-service-card{ grid-column:span 4; padding:1rem; border-radius:var(--nielay-radius-lg); border:1px solid rgba(36,54,73,.85); background:linear-gradient(180deg,rgba(15,27,38,.92),rgba(11,20,28,.86)); box-shadow:var(--nielay-shadow); transition:transform var(--nielay-fast) var(--nielay-ease-out), border-color var(--nielay-fast) var(--nielay-ease-out), box-shadow var(--nielay-fast) var(--nielay-ease-out); } .nielay-service-card:hover{ transform:translateY(-2px); border-color:rgba(25,179,255,.28); box-shadow:var(--nielay-shadow),var(--nielay-glow-soft); } .nielay-service-card__top{ display:flex;align-items:center;justify-content:space-between;gap:.75rem; } .nielay-service-icon{ width:42px;height:42px;border-radius:14px; display:grid;place-items:center; background:rgba(25,179,255,.08); border:1px solid rgba(25,179,255,.20); } .nielay-service-title{font-weight:700;} .nielay-service-desc{color:var(--nielay-muted);font-size:.9rem;line-height:1.35;margin-top:.35rem;} .nielay-service-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.85rem;} /* Responsive */ @media (max-width: 1100px){ .nielay-service-card{grid-column:span 6;} } @media (max-width: 720px){ .nielay-service-card{grid-column:span 12;} } /* ------------------------------ 7) STATS WIDGETS -------------------------------- */ .fi-wi-stats-overview-stat{ background:linear-gradient(180deg,rgba(15,27,38,.92),rgba(11,20,28,.86)) !important; border:1px solid rgba(36,54,73,.85) !important; border-radius:var(--nielay-radius-lg) !important; padding:1.25rem !important; transition:transform var(--nielay-fast) var(--nielay-ease-out), border-color var(--nielay-fast) var(--nielay-ease-out), box-shadow var(--nielay-fast) var(--nielay-ease-out); } .fi-wi-stats-overview-stat:hover{ transform:translateY(-2px); border-color:rgba(0,208,132,.28); box-shadow:var(--nielay-shadow),var(--nielay-glow); } .fi-wi-stats-overview-stat-value{ font-size:1.75rem !important; font-weight:700 !important; color:var(--nielay-text) !important; } .fi-wi-stats-overview-stat-label{ font-size:.75rem !important; text-transform:uppercase !important; letter-spacing:.04em !important; color:var(--nielay-muted) !important; } /* ------------------------------ 8) BUTTONS FILAMENT -------------------------------- */ .fi-btn{ border-radius:999px !important; border:1px solid rgba(36,54,73,.9) !important; background:rgba(15,27,38,.82) !important; transition:transform var(--nielay-fast) var(--nielay-ease-out), border-color var(--nielay-fast) var(--nielay-ease-out), background var(--nielay-fast) var(--nielay-ease-out), box-shadow var(--nielay-fast) var(--nielay-ease-out) !important; } .fi-btn:hover{ transform:translateY(-1px) !important; border-color:rgba(0,208,132,.35) !important; background:rgba(15,27,38,.92) !important; } .fi-btn-primary{ border-color:rgba(0,208,132,.35) !important; background:linear-gradient(180deg,rgba(0,208,132,.22),rgba(0,176,116,.12)) !important; } .fi-btn-primary:hover{ box-shadow:var(--nielay-shadow),var(--nielay-glow) !important; } /* ------------------------------ 9) HEADER -------------------------------- */ .fi-header{ padding:1.5rem 2rem !important; } .fi-header-heading{ font-size:1.5rem !important; font-weight:700 !important; letter-spacing:-.02em !important; color:var(--nielay-text) !important; } .fi-header-subheading{ color:var(--nielay-muted) !important; font-size:.9rem !important; } /* ------------------------------ 10) MODALS -------------------------------- */ .fi-modal-window{ border-radius:var(--nielay-radius-xl) !important; box-shadow:var(--nielay-shadow-2),0 0 80px rgba(0,208,132,.08) !important; } .fi-modal-header{ border-bottom:1px solid rgba(36,54,73,.85) !important; padding:1.25rem 1.5rem !important; } .fi-modal-content{ padding:1.5rem !important; } .fi-modal-footer{ border-top:1px solid rgba(36,54,73,.85) !important; padding:1rem 1.5rem !important; background:rgba(7,13,18,.55) !important; } /* ------------------------------ 11) NOTIFICATIONS -------------------------------- */ .fi-notification{ background:linear-gradient(180deg,rgba(15,27,38,.95),rgba(11,20,28,.92)) !important; border:1px solid rgba(36,54,73,.85) !important; border-radius:var(--nielay-radius-lg) !important; box-shadow:var(--nielay-shadow-2) !important; } /* ------------------------------ 12) LOGIN PAGE -------------------------------- */ .fi-simple-layout{ background:var(--nielay-bg-grad) !important; } .fi-simple-main-ctn{ background:linear-gradient(180deg,rgba(15,27,38,.92),rgba(11,20,28,.86)) !important; border:1px solid rgba(36,54,73,.85) !important; border-radius:var(--nielay-radius-xl) !important; box-shadow:var(--nielay-shadow-2),0 0 80px rgba(0,208,132,.06) !important; padding:2.5rem !important; } .fi-simple-header .fi-logo{ font-size:2rem !important; font-weight:800 !important; background:linear-gradient(135deg,var(--nielay-primary-400),var(--nielay-lake-400)) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; } /* ------------------------------ 13) ANIMATIONS -------------------------------- */ @keyframes nielay-fade-up{ from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} } @keyframes nielay-scale-in{ from{opacity:0;transform:scale(.96);} to{opacity:1;transform:scale(1);} } @keyframes nielay-glow-pulse{ 0%,100%{box-shadow:var(--nielay-glow);} 50%{box-shadow:0 0 0 1px rgba(0,208,132,.32),0 0 36px rgba(0,208,132,.18);} } .fi-section, .fi-wi-stats-overview-stat, .nielay-card, .nielay-service-card{ animation:nielay-fade-up var(--nielay-slow) var(--nielay-ease-out); } .fi-modal-window{ animation:nielay-scale-in var(--nielay-mid) var(--nielay-ease-out); } /* ------------------------------ 14) FOCUS STATES (Accessibility) -------------------------------- */ *:focus-visible{ outline:2px solid rgba(0,208,132,.55) !important; outline-offset:2px !important; } /* ------------------------------ 15) UTILITY CLASSES -------------------------------- */ .nielay-text-primary{color:var(--nielay-primary) !important;} .nielay-text-accent{color:var(--nielay-accent) !important;} .nielay-text-muted{color:var(--nielay-muted) !important;} .nielay-text-success{color:var(--nielay-success) !important;} .nielay-text-warning{color:var(--nielay-warning) !important;} .nielay-text-danger{color:var(--nielay-danger) !important;} .nielay-bg-surface{background:var(--nielay-surface) !important;} .nielay-bg-surface-2{background:var(--nielay-surface-2) !important;} .nielay-border{border-color:var(--nielay-stroke) !important;} .nielay-border-glow{border-color:rgba(0,208,132,.28) !important;box-shadow:var(--nielay-glow) !important;} /* ------------------------------ 16) DASHBOARD - Ocultar header redundante -------------------------------- */ .fi-page-dashboard .fi-header { display: none !important; } /* ------------------------------ 17) HERO WIDGET (Dashboard Welcome) -------------------------------- */ .nielay-hero { background: linear-gradient(135deg, rgba(0, 208, 132, 0.08) 0%, rgba(25, 179, 255, 0.04) 100%); border: 1px solid rgba(0, 208, 132, 0.2); border-radius: var(--nielay-radius-xl); padding: 2rem; margin-bottom: 1.5rem; position: relative; overflow: hidden; } .nielay-hero::before { content: ''; position: absolute; top: 0; right: 0; width: 300px; height: 300px; background: radial-gradient(circle, rgba(0, 208, 132, 0.1) 0%, transparent 70%); pointer-events: none; } .nielay-hero-content { position: relative; z-index: 1; } .nielay-hero-title { font-size: 1.75rem; font-weight: 700; color: #f8fafc; margin: 0 0 0.5rem 0; background: linear-gradient(135deg, var(--nielay-primary-400) 0%, var(--nielay-lake-400) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .nielay-hero-subtitle { font-size: 1rem; color: var(--nielay-muted); margin: 0 0 1.5rem 0; } .nielay-action-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .nielay-action-card { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--nielay-radius-lg); text-decoration: none; transition: all var(--nielay-fast) var(--nielay-ease-out); cursor: pointer; } .nielay-action-card:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(0, 208, 132, 0.3); transform: translateY(-2px); } .nielay-action-icon { width: 48px; height: 48px; border-radius: var(--nielay-radius-lg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nielay-action-icon svg { width: 24px; height: 24px; color: white; } .nielay-icon-clients { background: linear-gradient(135deg, #6366f1, #8b5cf6); } .nielay-icon-users { background: linear-gradient(135deg, #06b6d4, #0ea5e9); } .nielay-icon-integrations { background: linear-gradient(135deg, var(--nielay-primary), #10b981); } .nielay-icon-services { background: linear-gradient(135deg, #f59e0b, #f97316); } .nielay-icon-marketplace { background: linear-gradient(135deg, #ec4899, #f43f5e); } .nielay-icon-config { background: linear-gradient(135deg, #64748b, #475569); } .nielay-action-content { flex: 1; min-width: 0; } .nielay-action-title { font-size: 0.9375rem; font-weight: 600; color: #f1f5f9; margin-bottom: 0.25rem; } .nielay-action-desc { font-size: 0.8125rem; color: var(--nielay-muted-2); line-height: 1.4; } .nielay-action-arrow { font-size: 1.25rem; color: var(--nielay-muted-2); transition: all var(--nielay-fast) var(--nielay-ease-out); } .nielay-action-card:hover .nielay-action-arrow { color: var(--nielay-primary); transform: translateX(4px); } .nielay-hero-stats { display: flex; gap: 2rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .nielay-stat { text-align: center; } .nielay-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--nielay-primary); } .nielay-stat-label { font-size: 0.75rem; color: var(--nielay-muted-2); text-transform: uppercase; letter-spacing: 0.05em; } @media (max-width: 768px) { .nielay-hero { padding: 1.5rem; } .nielay-hero-title { font-size: 1.5rem; } .nielay-action-cards { grid-template-columns: 1fr; } .nielay-hero-stats { justify-content: space-around; } }