- Il colore cambia SOLO dentro al pannello (prezzo, req, accent, os pill, hover dropdown, bottone) ========================================================= */ /* ===== Plans cards (Xenia-like) ===== */ :root{ --plan-bg: rgba(18, 22, 40, .72); --plan-bg2: rgba(18, 22, 40, .55); --plan-stroke: rgba(255,255,255,.10); --plan-stroke2: rgba(255,255,255,.16); --plan-text: #fff; --plan-muted: rgba(255,255,255,.72); --plan-muted2: rgba(255,255,255,.56); --plan-accent: var(--primary, #ff6a00); /* fallback */ --plan-radius: 22px; } /* container */ .plans-x{ padding: 56px 0; } .plans-x .section-title p{ color: var(--plan-muted); } /* grid */ .plans-x-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } @media (max-width: 980px){ .plans-x-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 640px){ .plans-x-grid{ grid-template-columns: 1fr; } } /* card */ .plan-card-x{ background: linear-gradient(180deg, var(--plan-bg), var(--plan-bg2)); border: 1px solid var(--plan-stroke); border-radius: var(--plan-radius); padding: 20px 18px 16px; box-shadow: 0 14px 36px rgba(0,0,0,.45); backdrop-filter: blur(10px); position: relative; overflow:hidden; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; /* ==== PER-CARD ACCENT (default = viola se usi page-violet) ==== */ --card-accent: var(--plan-accent); --card-accent-rgb: 139, 92, 246; /* viola default */ } .plan-card-x:hover{ transform: translateY(-4px); border-color: rgba(255,255,255,.22); box-shadow: 0 18px 46px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--card-accent-rgb), .10) inset; } /* title row */ .plan-title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .plan-title-row h3{ margin:0; color: var(--plan-text); font-size: 20px; font-weight: 800; } .plan-badge-x{ font-size: 11px; font-weight: 800; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--plan-stroke); color: var(--plan-muted); background: rgba(0,0,0,.22); } /* list */ .plan-list-x{ list-style:none; padding:0; margin: 12px 0 0; display:grid; gap: 10px; } .plan-list-x li{ display:flex; align-items:center; gap:10px; color: var(--plan-text); font-weight:700; } .plan-list-x .plan-ico{ width: 26px; height: 26px; border-radius: 10px; display:inline-flex; align-items:center; justify-content:center; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); color: rgba(255,255,255,.85); } .plan-list-x .plan-ico img{ width: 16px; height: 16px; display:block; } .plan-list-x .plan-ico img.flag{ width: 18px; height: 13px; border-radius: 3px; } .plan-list-x .muted{ color: var(--plan-muted); font-weight:700; } /* ✅ accent ora segue SEMPRE l’accent della card */ .plan-list-x .accent{ color: var(--card-accent); } /* divider */ .plan-divider-x{ height:1px; background: rgba(255,255,255,.10); margin: 14px 0; } /* labels */ .plan-label-x{ margin:0 0 10px; font-size: 12px; font-weight: 900; color: var(--plan-text); } .plan-label-x .req{ color: var(--card-accent); } /* select */ .select-x{ width: 100%; border-radius: 12px; border: 1px solid var(--plan-stroke); background: rgba(255,255,255,.04); padding: 10px 12px; color: #fff; font-weight: 800; outline:none; } .select-x option{ color:#000; } /* price row */ .price-row-x{ display:flex; align-items:flex-end; justify-content:space-between; margin-top: 14px; } .price-x{ font-size: 34px; font-weight: 900; color: var(--card-accent); letter-spacing: -0.5px; } .price-x .per{ font-size: 18px; color: rgba(255,255,255,.70); font-weight: 900; } .vat-x{ font-size: 12px; color: rgba(255,255,255,.60); font-weight: 800; } /* button */ .btn-stock-x{ margin-top: 14px; width: 100%; border-radius: 999px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.20); background: rgba(255,255,255,.04); color: rgba(255,255,255,.45); font-weight: 900; letter-spacing: .6px; text-transform: uppercase; } .btn-stock-x{ transition: transform .16s ease, filter .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease; } .btn-stock-x.is-available{ cursor:pointer; color:#fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); box-shadow: 0 10px 22px rgba(0,0,0,.28); } .btn-stock-x.is-available:hover{ transform: scale(1.03); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.45); filter: brightness(.92); } .btn-stock-x.is-available:active{ transform: scale(0.995); } /* ========================================================= OS SECTION ========================================================= */ .os-grid-x{ display:flex; flex-wrap:wrap; gap: 10px; position: relative; z-index: 1; } .os-pill-x{ position: relative; z-index: 2; border: 1px solid var(--plan-stroke); background: rgba(255,255,255,.04); color: rgba(255,255,255,.82); border-radius: 12px; padding: 8px 10px; font-size: 12px; font-weight: 800; display:flex; align-items:center; gap: 8px; cursor:pointer; user-select:none; transition: transform .15s ease, border-color .15s ease, background .15s ease; } .os-pill-x:hover{ transform: translateY(-1px); border-color: rgba(var(--card-accent-rgb), .25); background: rgba(var(--card-accent-rgb), .08); z-index: 10; } .os-pill-x.is-open{ z-index: 999; } .os-pill-x.is-open:hover{ transform: none; } .os-pill-x .os-icon{ width: 18px; height: 18px; display:block; border-radius: 6px; } .os-pill-x .os-dot{ width: 12px; height: 12px; border-radius: 4px; background: rgba(255,255,255,.22); } .os-pill-x .os-chev{ width: 8px; height: 8px; margin-left: 2px; opacity: .75; border-right: 2px solid rgba(255,255,255,.60); border-bottom: 2px solid rgba(255,255,255,.60); transform: rotate(45deg); } /* Active default -> segue colore della card */ .os-pill-x.is-active{ border-color: rgba(var(--card-accent-rgb), .45); background: rgba(var(--card-accent-rgb), .14); color:#fff; box-shadow: 0 0 0 1px rgba(var(--card-accent-rgb), .10) inset, 0 10px 26px rgba(0,0,0,.28); } /* OS version badge (se lo usi) */ .os-ver-badge{ margin-left: auto; font-size: 11px; font-weight: 900; padding: 5px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.20); color: rgba(255,255,255,.86); } /* Dropdown base */ .os-dd{ position: absolute; left: 0; top: calc(100% + 8px); width: 140px; z-index: 9999; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(18, 22, 40, .94); box-shadow: 0 18px 40px rgba(0,0,0,.55); backdrop-filter: blur(12px); overflow: hidden; display:none; } .os-pill-x.is-open .os-dd{ display:block; } .os-dd-inner{ padding: 6px; display:grid; gap: 6px; } .os-ver-item{ width: 100%; text-align: left; border-radius: 10px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: rgba(255,255,255,.88); padding: 8px 10px; font-size: 12px; font-weight: 900; cursor:pointer; transition: transform .12s ease, border-color .12s ease, background .12s ease; } .os-ver-item:hover{ transform: translateY(-1px); border-color: rgba(var(--card-accent-rgb), .45); background: rgba(var(--card-accent-rgb), .14); } /* Floating dropdown portal */ .os-dd.os-dd-float{ position: fixed; left: 0; top: 0; width: 140px; z-index: 99999; display:none; background: rgba(18, 22, 40, .98); border-color: rgba(255,255,255,.18); } .os-dd.os-dd-float.is-visible{ display:block; } .os-dd.os-dd-float .os-ver-item{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); } .os-dd.os-dd-float .os-ver-item:hover{ background: rgba(var(--card-accent-rgb), .16); border-color: rgba(var(--card-accent-rgb), .45); } /* quick OS dot colors (restano come sono) */ .os-dot.ubuntu{ background:#e95420; } .os-dot.centos{ background:#7d4698; } .os-dot.alma{ background:#1b9aaa; } .os-dot.fedora{ background:#51a2da; } .os-dot.opensuse{ background:#73ba25; } .os-dot.windows{ background:#00a4ef; } .os-dot.debian{ background:#d70a53; } .os-dot.rocky{ background:#10b981; } .os-dot.scientific{ background:#6366f1; } /* ========================================================= PAGE THEME: VIOLET (solo pagina, NON pannelli) Usa: ========================================================= */ body.page-violet{ --primary: #8b5cf6; --plan-accent: #8b5cf6; } /* ========================================================= CARD THEMES (solo pannelli) Usa:

========================================================= */ .plan-card-x.plan-theme-purple{ --card-accent: #8b5cf6; --card-accent-rgb: 139, 92, 246; } /* GIALLO */ .plan-card-x.plan-theme-yellow{ --card-accent: #ffd557; --card-accent-rgb: 255, 213, 87; } /* CYAN / ACQUA */ .plan-card-x.plan-theme-cyan{ --card-accent: #70ffec; --card-accent-rgb: 112, 255, 236; } /* VERDE */ .plan-card-x.plan-theme-green{ --card-accent: #9BEB75; --card-accent-rgb: 155, 235, 117; } /* ROSSO */ .plan-card-x.plan-theme-red{ --card-accent: #ff0000; --card-accent-rgb: 255, 0, 0; } /* Alias: vecchi bottoni acquisto */ .btn-buy-x{ composes: btn-stock-x; }