/* ============================================================ GRINDSELL — DESIGN SYSTEM Versione: 3.0 FONT STACK: - Montserrat → tutto il sito (body, UI, labels, bottoni) Self-hosted: /assets/fonts/montserrat/ 9 pesi (100→900) + italic — tutti i file .woff + .otf - Rigid Square → SOLO il nome brand "GrindSell" Self-hosted: /assets/fonts/rigidsquare/ 7 pesi (100→800) + italic — tutti i file .woff + .otf SEARCH BAR: - Bordo gradiente verde→blu→viola (identico a PlayerAuctions) - Implementato con pseudo-element ::before su wrapper USO: Importa questo file come PRIMO stylesheet in ogni pagina. NON servono più link Google Fonts — tutto è self-hosted. ============================================================ */ /* ============================================================ 1. FONT FACE DECLARATIONS ============================================================ */ /* ---------------------------------------------------------- 1.1 RIGID SQUARE — Font esclusivo per il brand GrindSell Percorso server: /assets/fonts/rigidsquare/ ---------------------------------------------------------- */ @font-face { font-family:'Rigid Square'; src:url('../fonts/rigidsquare/Rigid_Square_Thin.otf') format('opentype'); font-weight:100; font-style:normal; font-display:swap; } @font-face { font-family:'Rigid Square'; src:url('../fonts/rigidsquare/Rigid_Square_Thin_Italic.otf') format('opentype'); font-weight:100; font-style:italic; font-display:swap; } @font-face { font-family:'Rigid Square'; src:url('../fonts/rigidsquare/Rigid_Square_ExtraLight.otf') format('opentype'); font-weight:200; font-style:normal; font-display:swap; } @font-face { font-family:'Rigid Square'; src:url('../fonts/rigidsquare/Rigid_Square_ExtraLight_Italic.otf') format('opentype'); font-weight:200; font-style:italic; font-display:swap; } @font-face { font-family:'Rigid Square'; src:url('../fonts/rigidsquare/Rigid_Square_Light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; } @font-face { font-family:'Rigid Square'; src:url('../fonts/rigidsquare/Rigid_Square_Light_Italic.otf') format('opentype'); font-weight:300; font-style:italic; font-display:swap; } @font-face { font-family:'Rigid Square'; src:url('../fonts/rigidsquare/Rigid_Square_Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Rigid Square'; src:url('../fonts/rigidsquare/Rigid_Square_Italic.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap; } @font-face { font-family:'Rigid Square'; src:url('../fonts/rigidsquare/Rigid_Square_SemiBold.otf') format('opentype'); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:'Rigid Square'; src:url('../fonts/rigidsquare/Rigid_Square_SemiBold_Italic.otf') format('opentype'); font-weight:600; font-style:italic; font-display:swap; } @font-face { font-family:'Rigid Square'; src:url('../fonts/rigidsquare/Rigid_Square_Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:'Rigid Square'; src:url('../fonts/rigidsquare/Rigid_Square_Bold_Italic.otf') format('opentype'); font-weight:700; font-style:italic; font-display:swap; } @font-face { font-family:'Rigid Square'; src:url('../fonts/rigidsquare/Rigid_Square_ExtraBold.otf') format('opentype'); font-weight:800; font-style:normal; font-display:swap; } @font-face { font-family:'Rigid Square'; src:url('../fonts/rigidsquare/Rigid_Square_ExtraBold_Italic.otf') format('opentype'); font-weight:800; font-style:italic; font-display:swap; } /* ---------------------------------------------------------- 1.2 MONTSERRAT — Font principale del sito (tutto tranne brand) Percorso server: /assets/fonts/montserrat/ 9 pesi completi (100→900) + italic = 18 varianti NOTA: NON serve più il link Google Fonts nell' ---------------------------------------------------------- */ @font-face { font-family:'Montserrat'; src:url('../fonts/montserrat/Montserrat-Thin.otf') format('opentype'); font-weight:100; font-style:normal; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/montserrat/Montserrat-ThinItalic.otf') format('opentype'); font-weight:100; font-style:italic; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/montserrat/Montserrat-ExtraLight.otf') format('opentype'); font-weight:200; font-style:normal; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/montserrat/Montserrat-ExtraLightItalic.otf') format('opentype'); font-weight:200; font-style:italic; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/montserrat/Montserrat-Light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/montserrat/Montserrat-LightItalic.otf') format('opentype'); font-weight:300; font-style:italic; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/montserrat/Montserrat-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/montserrat/Montserrat-Italic.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/montserrat/Montserrat-Medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/montserrat/Montserrat-MediumItalic.otf') format('opentype'); font-weight:500; font-style:italic; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/montserrat/Montserrat-SemiBold.otf') format('opentype'); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/montserrat/Montserrat-SemiBoldItalic.otf') format('opentype'); font-weight:600; font-style:italic; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/montserrat/Montserrat-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/montserrat/Montserrat-BoldItalic.otf') format('opentype'); font-weight:700; font-style:italic; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/montserrat/Montserrat-ExtraBold.otf') format('opentype'); font-weight:800; font-style:normal; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/montserrat/Montserrat-ExtraBoldItalic.otf') format('opentype'); font-weight:800; font-style:italic; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/montserrat/Montserrat-Black.otf') format('opentype'); font-weight:900; font-style:normal; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/montserrat/Montserrat-BlackItalic.otf') format('opentype'); font-weight:900; font-style:italic; font-display:swap; } /* ============================================================ 2. CSS CUSTOM PROPERTIES — DESIGN TOKENS ============================================================ */ :root { /* ---------------------------------------------------------- 2.1 FONT STACK ---------------------------------------------------------- */ --font-brand: 'Rigid Square', 'Montserrat', sans-serif; /* SOLO nome GrindSell */ --font-body: 'Montserrat', sans-serif; /* Tutto il resto del sito */ --font-display: 'Montserrat', sans-serif; /* Titoli h1-h6 */ --font-mono: 'Courier New', monospace; /* Codice, order ID */ /* ---------------------------------------------------------- 2.2 BRAND COLORS — Logo GrindSell Regola: NON derogare mai da questi valori per il nome brand ---------------------------------------------------------- */ --brand-grind: #FFFFFF; /* "Grind" — sempre bianco */ --brand-sell: #FFA300; /* "Sell" — sempre arancione */ /* ---------------------------------------------------------- 2.3 SFONDI (dal più scuro al più chiaro — 9 livelli) ---------------------------------------------------------- */ --bg-deepest: #0D1117; /* tooltip, dropdown bg */ --bg-base: #141922; /* sfondo pagina principale */ --bg-subtle: #161C26; /* liste, zebra row */ --bg-elevated: #191F2B; /* navbar, sidebar, header */ --bg-card: #1F2635; /* card, pannelli, riquadri */ --bg-input: #202635; /* input standard */ --bg-input-alt: #263044; /* input secondari, meno utili */ --bg-input-search: #121213; /* campo ricerca */ --bg-raised: #283044; /* hover card, skeleton shimmer */ --bg-overlay: rgba(0,0,0,0.65); /* modal backdrop */ --bg-overlay-light: rgba(0,0,0,0.35); /* drawer backdrop */ /* ---------------------------------------------------------- 2.4 TESTO ---------------------------------------------------------- */ --text-primary: #FFFFFF; --text-secondary: #B3B3B3; --text-muted: #B2B2B2; --text-faint: #6C757D; --text-placeholder:#555C6E; --text-disabled: #3D4557; --text-inverse: #141922; /* testo su sfondo chiaro/accent */ /* ---------------------------------------------------------- 2.5 ACCENT PRIMARIO — GOLD/ORANGE ---------------------------------------------------------- */ --accent: #FFA300; --accent-hover: #E09200; --accent-active: #C07E00; --accent-light: #FFB733; /* hover bottone — più chiaro del base */ --accent-disabled: rgba(255,163,0,0.25); --accent-subtle: rgba(255,163,0,0.10); --accent-glow: rgba(255,163,0,0.35); /* ---------------------------------------------------------- 2.6 COLORI SEMANTICI ---------------------------------------------------------- */ --success: #37BD20; --success-bright: #74DC00; --success-hover: #2EA61B; --success-light: #45D12C; /* hover bottone — più chiaro del base */ --success-bg: rgba(55,189,32,0.10); --success-border: rgba(55,189,32,0.35); --danger: #DC3545; --danger-hover: #C12535; --danger-light: #E8495A; /* hover bottone — più chiaro del base */ --danger-bg: rgba(220,53,69,0.10); --danger-border: rgba(220,53,69,0.35); --warning: #FFE014; --warning-hover: #E5CA00; --warning-bg: rgba(255,224,20,0.10); --warning-border: rgba(255,224,20,0.35); --info: #1A9BF7; --info-hover: #0F85DC; --info-light: #42AEF9; /* hover bottone — più chiaro del base */ --info-bg: rgba(26,155,247,0.10); --info-border: rgba(26,155,247,0.35); --pink: #EF68A7; --pink-bg: rgba(239,104,167,0.10); --pink-border: rgba(239,104,167,0.35); --cta-green: #28A745; /* BUY NOW button */ --cta-green-hover: #1E8035; --cta-green-active:#166128; --cta-green-light: #30C453; /* hover bottone — più chiaro del base */ /* ---------------------------------------------------------- 2.7 BORDI ---------------------------------------------------------- */ --border-color: #444444; --border-subtle: rgba(68,68,68,0.50); --border-focus: #FFA300; --border-error: #DC3545; --border-success: #37BD20; --border-info: #1A9BF7; --border-radius-xs: 4px; --border-radius-sm: 6px; --border-radius: 8px; --border-radius-md: 10px; --border-radius-lg: 14px; --border-radius-xl: 20px; --border-radius-pill: 9999px; /* ---------------------------------------------------------- 2.8 TIPOGRAFIA — SCALA DIMENSIONI ---------------------------------------------------------- */ --text-xs: 0.70rem; /* ~11px */ --text-sm: 0.813rem; /* ~13px */ --text-base: 0.938rem; /* ~15px */ --text-md: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-xbold: 800; --fw-black: 900; --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5; --lh-relaxed: 1.65; --lh-loose: 1.8; /* ---------------------------------------------------------- 2.9 SPAZIATURA ---------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ---------------------------------------------------------- 2.10 BREAKPOINT RESPONSIVI Uso: @media (max-width: var(--bp-md)) { ... } ---------------------------------------------------------- */ --bp-xs: 320px; /* telefoni piccoli */ --bp-sm: 576px; /* telefoni standard */ --bp-md: 768px; /* tablet portrait */ --bp-lg: 992px; /* tablet landscape / laptop */ --bp-xl: 1200px; /* desktop standard */ --bp-xxl: 1400px; /* desktop wide */ --bp-xxxl: 1600px; /* monitor ultra-wide */ /* ---------------------------------------------------------- 2.11 LAYOUT ---------------------------------------------------------- */ --sidebar-width: 260px; --sidebar-width-collapsed: 64px; --navbar-height: 64px; --navbar-height-mobile: 52px; --card-padding: var(--space-5); --input-height: 42px; --input-height-sm: 34px; --input-height-lg: 50px; --container-max: 1280px; /* ---------------------------------------------------------- 2.12 OMBRE ---------------------------------------------------------- */ --shadow-xs: 0 1px 3px rgba(0,0,0,0.30); --shadow-sm: 0 2px 6px rgba(0,0,0,0.40); --shadow-md: 0 4px 16px rgba(0,0,0,0.50); --shadow-lg: 0 8px 32px rgba(0,0,0,0.60); --shadow-xl: 0 16px 48px rgba(0,0,0,0.70); --shadow-accent: 0 4px 20px rgba(255,163,0,0.25); --shadow-success:0 4px 20px rgba(55,189,32,0.25); --shadow-danger: 0 4px 20px rgba(220,53,69,0.25); --shadow-info: 0 4px 20px rgba(26,155,247,0.25); --shadow-brand: 0 0 40px rgba(255,163,0,0.15); /* ---------------------------------------------------------- 2.13 SEARCH BAR GRADIENT BORDER Identico a PlayerAuctions — verde → blu → viola ---------------------------------------------------------- */ --search-gradient: linear-gradient(90deg, #00C851 0%, #1A9BF7 50%, #FFA300 100%); /* ---------------------------------------------------------- 2.13 TRANSIZIONI & DURATE ---------------------------------------------------------- */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 350ms; --duration-xslow: 600ms; --ease-default: ease; --ease-in: cubic-bezier(0.4,0,1,1); --ease-out: cubic-bezier(0,0,0.2,1); --ease-in-out: cubic-bezier(0.4,0,0.2,1); --ease-bounce: cubic-bezier(0.34,1.56,0.64,1); --ease-spring: cubic-bezier(0.175,0.885,0.32,1.275); --transition-fast: all var(--duration-fast) var(--ease-default); --transition-base: all var(--duration-base) var(--ease-default); --transition-slow: all var(--duration-slow) var(--ease-default); --transition-bounce: all var(--duration-base) var(--ease-bounce); --transition-spring: all var(--duration-slow) var(--ease-spring); /* ---------------------------------------------------------- 2.14 Z-INDEX ---------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown:100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; } /* ============================================================ 3. RESET & BASE ============================================================ */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body { font-family:var(--font-body); font-size:var(--text-base); font-weight:var(--fw-normal); line-height:var(--lh-normal); color:var(--text-primary); background-color:var(--bg-base); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } a { color:var(--info); text-decoration:none; transition:var(--transition-fast); } a:hover { color:var(--accent); text-decoration:underline; } img,svg { display:block; max-width:100%; } button { cursor:pointer; font-family:var(--font-body); } input,textarea,select { font-family:var(--font-body); } ::-webkit-scrollbar { width:6px; height:6px; } ::-webkit-scrollbar-track { background:var(--bg-subtle); } ::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:var(--border-radius-pill); } ::-webkit-scrollbar-thumb:hover { background:var(--text-faint); } /* ============================================================ 4. BRAND — LOGO / NOME AZIENDA ============================================================ REGOLE BRAND — OBBLIGATORIE: ✅ CORRETTO: · "Grind" sempre #FFFFFF (--brand-grind) · "Sell" sempre #FFA300 (--brand-sell) · Font: Rigid Square Bold o ExtraBold (700/800) · Sempre MAIUSCOLO: GRINDSELL · Dimensione minima: 18px web, 14px mobile ❌ VIETATO: · Non usare altri font per il nome brand · Non invertire i colori (Grind arancione / Sell bianco) · Non usare un unico colore per entrambe le parole · Non scalare sotto i minimi indicati · Non applicare opacità < 0.85 · Non inserire altri elementi nel clearzone (clearzone = metà altezza della "G" su ogni lato) VARIANTI APPROVATE: · Default: sfondo scuro, Grind bianco / Sell arancione · On-light: sfondo chiaro, Grind #141922 / Sell #FFA300 · Solo icona: nessuna (il brand è sempre testuale) ============================================================ */ .gs-brand { font-family: var(--font-brand); font-weight: 700; letter-spacing: 0.04em; text-decoration: none !important; display: inline-flex; align-items: baseline; line-height: 1; white-space: nowrap; user-select: none; } .gs-brand .grind { color: var(--brand-grind); } .gs-brand .sell { color: var(--brand-sell); } /* Dimensioni brand */ .gs-brand-xs { font-size: 1.125rem; } /* footer, breadcrumb */ .gs-brand-sm { font-size: 1.4rem; } /* sidebar collapsed */ .gs-brand-md { font-size: 1.75rem; } /* navbar (default) */ .gs-brand-lg { font-size: 2.5rem; } /* header pagine */ .gs-brand-xl { font-size: 3.5rem; } /* hero section */ .gs-brand-hero { font-size: 4.5rem; } /* homepage full hero */ /* Brand con tagline */ .gs-brand-wrapper { display:inline-flex; flex-direction:column; gap:2px; } .gs-brand-tagline { font-family:var(--font-body); font-size:var(--text-xs); font-weight:var(--fw-medium); color:var(--text-faint); letter-spacing:0.12em; text-transform:uppercase; } /* Variante su sfondo chiaro */ .gs-brand-on-light .grind { color: #141922; } .gs-brand-on-light .sell { color: var(--accent); } /* ============================================================ 5. TIPOGRAFIA ============================================================ */ h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); font-weight:var(--fw-bold); line-height:var(--lh-tight); color:var(--text-primary); } h1 { font-size:var(--text-4xl); } h2 { font-size:var(--text-3xl); } h3 { font-size:var(--text-2xl); } h4 { font-size:var(--text-xl); } h5 { font-size:var(--text-lg); } h6 { font-size:var(--text-md); } .gs-title-accent { color:var(--accent); } .gs-text-primary { color:var(--text-primary) !important; } .gs-text-secondary{ color:var(--text-secondary) !important; } .gs-text-muted { color:var(--text-muted) !important; } .gs-text-faint { color:var(--text-faint) !important; } .gs-text-accent { color:var(--accent) !important; } .gs-text-success { color:var(--success-bright) !important; } .gs-text-danger { color:var(--danger) !important; } .gs-text-warning { color:var(--warning) !important; } .gs-text-info { color:var(--info) !important; } .gs-text-pink { color:var(--pink) !important; } .gs-price { font-family:var(--font-body); font-size:var(--text-3xl); font-weight:var(--fw-bold); color:var(--text-primary); letter-spacing:-0.5px; } .gs-price-display { font-family:var(--font-body); font-size:var(--text-3xl); font-weight:var(--fw-bold); color:var(--text-primary); line-height:1; } .gs-price-old { font-size:var(--text-sm); color:var(--text-faint); text-decoration:line-through; } .gs-price-discount{ font-size:var(--text-sm); color:var(--success-bright); font-weight:var(--fw-semi); } /* ============================================================ 6. ANIMAZIONI UTILITY ============================================================ */ @keyframes gs-fade-in { from{opacity:0} to{opacity:1} } @keyframes gs-fade-in-up { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} } @keyframes gs-fade-in-down { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} } @keyframes gs-slide-in-left { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:translateX(0)} } @keyframes gs-slide-in-right { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:translateX(0)} } @keyframes gs-scale-in { from{opacity:0;transform:scale(0.92)} to{opacity:1;transform:scale(1)} } @keyframes gs-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} } @keyframes gs-pulse { 0%,100%{opacity:1} 50%{opacity:0.5} } @keyframes gs-spin { to{transform:rotate(360deg)} } @keyframes gs-bounce-in { 0%{transform:scale(0.85);opacity:0} 60%{transform:scale(1.05);opacity:1} 100%{transform:scale(1)} } @keyframes gs-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} } @keyframes gs-glow-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,163,0,0)} 50%{box-shadow:0 0 20px 4px rgba(255,163,0,0.3)} } @keyframes pulse-dot { 0%,100%{box-shadow:0 0 0 0 rgba(55,189,32,0.4)} 50%{box-shadow:0 0 0 5px rgba(55,189,32,0)} } .gs-anim-fade-in { animation:gs-fade-in var(--duration-base) var(--ease-out) both; } .gs-anim-fade-in-up { animation:gs-fade-in-up var(--duration-slow) var(--ease-out) both; } .gs-anim-fade-in-down { animation:gs-fade-in-down var(--duration-slow) var(--ease-out) both; } .gs-anim-slide-left { animation:gs-slide-in-left var(--duration-slow) var(--ease-out) both; } .gs-anim-slide-right { animation:gs-slide-in-right var(--duration-slow) var(--ease-out) both; } .gs-anim-scale-in { animation:gs-scale-in var(--duration-base) var(--ease-bounce) both; } .gs-anim-bounce-in { animation:gs-bounce-in var(--duration-slow) var(--ease-spring) both; } .gs-anim-shake { animation:gs-shake var(--duration-slow) var(--ease-default); } .gs-anim-pulse { animation:gs-pulse 1.8s var(--ease-in-out) infinite; } .gs-anim-spin { animation:gs-spin 1s linear infinite; } .gs-anim-glow-pulse { animation:gs-glow-pulse 2s ease-in-out infinite; } .gs-delay-1 { animation-delay: 80ms; } .gs-delay-2 { animation-delay:160ms; } .gs-delay-3 { animation-delay:240ms; } .gs-delay-4 { animation-delay:320ms; } .gs-delay-5 { animation-delay:400ms; } .gs-delay-6 { animation-delay:480ms; } /* ============================================================ 7. LAYOUT ============================================================ */ .gs-wrapper { max-width:var(--container-max); margin:0 auto; padding:0 var(--space-6); } .gs-wrapper-fluid { width:100%; padding:0 var(--space-6); } .gs-section { padding:var(--space-12) 0; } .gs-divider { border:none; border-top:1px solid var(--border-subtle); margin:var(--space-6) 0; } /* ============================================================ 8. NAVBAR ============================================================ */ .gs-navbar { height:var(--navbar-height); background:var(--bg-elevated); border-bottom:1px solid var(--border-subtle); position:sticky; top:0; z-index:var(--z-sticky); display:flex; align-items:center; padding:0 var(--space-6); gap:var(--space-4); box-shadow:var(--shadow-sm); } /* ---------------------------------------------------------- Search bar con bordo gradiente verde→blu→viola Tecnica: wrapper con ::before che crea il bordo gradiente. Il border:none sull'input elimina il bordo nativo, il padding del wrapper crea lo spazio visivo del bordo (2px). ---------------------------------------------------------- */ .gs-navbar-search { flex: 1; max-width: 480px; position: relative; /* Bordo gradiente via ::before */ border-radius: var(--border-radius-pill); padding: 1px; /* spessore bordo */ background: var(--search-gradient); /* gradiente visibile come bordo */ transition: var(--transition-base); } .gs-navbar-search::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--search-gradient); transition: var(--transition-base); z-index: 0; } .gs-navbar-search:focus-within { /* Al focus: bordo più brillante con glow */ filter: brightness(1.2); box-shadow: 0 0 12px rgba(0, 200, 81, 0.20), 0 0 12px rgba(26, 155, 247, 0.20), 0 0 12px rgba(124, 77, 255, 0.20); } .gs-navbar-search input { position: relative; z-index: 1; width: 100%; height: calc(var(--input-height) - 4px); /* compensa i 2px padding */ background: var(--bg-input-search); border: none; /* bordo gestito dal wrapper */ border-radius: calc(var(--border-radius-pill) - 2px); color: var(--text-primary); font-size: var(--text-sm); font-family: var(--font-body); padding: 0 var(--space-10) 0 var(--space-5); outline: none; transition: var(--transition-base); } .gs-navbar-search input::placeholder { color: var(--text-placeholder); } .gs-navbar-search .gs-search-icon { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--brand-grind); z-index: 2; pointer-events: none; } /* ============================================================ 9. SIDEBAR ============================================================ */ .gs-sidebar { width:var(--sidebar-width); background:var(--bg-elevated); border-right:1px solid var(--border-subtle); height:100%; overflow-y:auto; padding:var(--space-4) 0; } .gs-sidebar-item { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-5); color:var(--text-secondary); font-size:var(--text-sm); font-weight:var(--fw-medium); text-decoration:none; border-left:3px solid transparent; transition:var(--transition-fast); cursor:pointer; } .gs-sidebar-item:hover { color:var(--text-primary); background:var(--bg-card); text-decoration:none; } .gs-sidebar-item.active { color:var(--accent); background:var(--accent-subtle); border-left-color:var(--accent); } .gs-sidebar-label { padding:var(--space-3) var(--space-5) var(--space-2); font-size:var(--text-xs); font-weight:var(--fw-semi); color:var(--text-faint); text-transform:uppercase; letter-spacing:0.08em; } /* ============================================================ 10. CARDS ============================================================ */ .gs-card { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--border-radius-md); padding:var(--card-padding); transition:var(--transition-base); } .gs-card:hover { border-color:var(--border-color); } .gs-card-elevated { background:var(--bg-raised); border-radius:var(--border-radius-md); padding:var(--card-padding); box-shadow:var(--shadow-md); } .gs-card-dark { background:var(--bg-subtle); border:1px solid var(--border-subtle); border-radius:var(--border-radius-md); padding:var(--card-padding); } .gs-card-accent { background:var(--bg-card); border:1px solid var(--accent); border-radius:var(--border-radius-md); padding:var(--card-padding); box-shadow:var(--shadow-accent); } .gs-card-offer { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--border-radius); padding:var(--space-4); transition:var(--transition-base); cursor:pointer; } .gs-card-offer:hover { border-color:var(--accent); background:var(--bg-raised); transform:translateY(-2px); box-shadow:var(--shadow-md); } .gs-card-header { padding-bottom:var(--space-4); margin-bottom:var(--space-4); border-bottom:1px solid var(--border-subtle); font-family:var(--font-display); font-size:var(--text-lg); font-weight:var(--fw-semi); color:var(--text-primary); } .gs-card-footer { padding-top:var(--space-4); margin-top:var(--space-4); border-top:1px solid var(--border-subtle); } /* ============================================================ 11. BOTTONI ============================================================ */ .gs-btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); font-family:var(--font-body); font-size:var(--text-sm); font-weight:var(--fw-semi); padding:0 var(--space-5); height:var(--input-height); border-radius:var(--border-radius); border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap; transition:var(--transition-base); letter-spacing:0.03em; line-height:1; outline:none; position:relative; overflow:hidden; -webkit-font-smoothing:antialiased; } .gs-btn-primary { background:var(--accent); color:var(--text-inverse); border-color:var(--accent); } .gs-btn-primary:hover { background:var(--accent-light); border-color:var(--accent-light); color:var(--text-inverse); } .gs-btn-primary:active { background:var(--accent-active); box-shadow:none; color:var(--text-inverse); } .gs-btn-primary:focus-visible { box-shadow:0 0 0 3px var(--accent-glow); } .gs-btn-primary:disabled,.gs-btn-primary.disabled { background:var(--accent-disabled); color:var(--text-disabled); border-color:transparent; cursor:not-allowed; transform:none; box-shadow:none; } .gs-btn-cta { background:var(--cta-green); color:var(--text-primary); border-color:var(--cta-green); font-weight:var(--fw-bold); letter-spacing:0.05em; } .gs-btn-cta:hover { background:var(--cta-green-light); border-color:var(--cta-green-light); color:var(--text-primary); } .gs-btn-cta:active { background:var(--cta-green-active); } .gs-btn-cta:disabled { opacity:0.4; cursor:not-allowed; transform:none; } .gs-btn-secondary { background:transparent; color:var(--accent); border-color:var(--accent); } .gs-btn-secondary:hover { background:var(--accent-subtle); color:var(--accent); } .gs-btn-secondary:disabled { opacity:0.35; cursor:not-allowed; transform:none; } .gs-btn-ghost { background:transparent; color:var(--text-secondary); border-color:var(--border-subtle); } .gs-btn-ghost:hover { background:var(--bg-raised); color:var(--text-primary); border-color:var(--border-color); } .gs-btn-danger { background:var(--danger); color:var(--text-primary); border-color:var(--danger); } .gs-btn-danger:hover { background:var(--danger-light); border-color:var(--danger-light); color:var(--text-primary); } .gs-btn-success { background:var(--success); color:var(--text-primary); border-color:var(--success); } .gs-btn-success:hover { background:var(--success-light); border-color:var(--success-light); color:var(--text-primary); } .gs-btn-info { background:var(--info); color:var(--text-primary); border-color:var(--info); } .gs-btn-info:hover { background:var(--info-light); border-color:var(--info-light); color:var(--text-primary); } .gs-btn-sm { height:var(--input-height-sm); padding:0 var(--space-4); font-size:var(--text-xs); } .gs-btn-lg { height:var(--input-height-lg); padding:0 var(--space-8); font-size:var(--text-md); } .gs-btn-block { width:100%; } .gs-btn-icon { width:var(--input-height); padding:0; } .gs-btn-icon.gs-btn-sm { width:var(--input-height-sm); } .gs-btn-round { border-radius:var(--border-radius-pill); } /* Ancora con classi button — impedisce text-decoration dal reset a:hover */ a.gs-btn:hover, a.gs-btn:focus { text-decoration: none !important; } /* ============================================================ 12. FORM / INPUTS ============================================================ */ .gs-form-group { margin-bottom:var(--space-5); } .gs-form-label { display:block; font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--text-secondary); margin-bottom:var(--space-2); } .gs-form-label .required { color:var(--danger); margin-left:2px; } .gs-input,.gs-select,.gs-textarea { width:100%; height:var(--input-height); background:var(--bg-input); border:1px solid var(--border-color); border-radius:var(--border-radius); color:var(--text-primary); font-size:var(--text-sm); font-family:var(--font-body); padding:0 var(--space-4); outline:none; transition:var(--transition-base); -webkit-appearance:none; } .gs-textarea { height:auto; padding:var(--space-3) var(--space-4); resize:vertical; min-height:100px; } .gs-input::placeholder,.gs-textarea::placeholder { color:var(--text-placeholder); } .gs-input:hover,.gs-select:hover,.gs-textarea:hover { border-color:var(--text-faint); } .gs-input:focus,.gs-select:focus,.gs-textarea:focus { border-color:var(--border-focus); box-shadow:0 0 0 3px var(--accent-glow); background:var(--bg-input); } .gs-input:disabled,.gs-select:disabled,.gs-textarea:disabled { background:var(--bg-subtle); color:var(--text-disabled); cursor:not-allowed; border-color:var(--border-subtle); } .gs-input-success { border-color:var(--border-success) !important; } .gs-input-success:focus { box-shadow:0 0 0 3px var(--success-bg); } .gs-input-error { border-color:var(--border-error) !important; } .gs-input-error:focus { box-shadow:0 0 0 3px var(--danger-bg); } .gs-input-sm { height:var(--input-height-sm); font-size:var(--text-xs); } .gs-input-lg { height:var(--input-height-lg); font-size:var(--text-md); } .gs-input-group { position:relative; } .gs-input-icon { padding-left:2.5rem; } .gs-input-icon-end { padding-right:2.5rem; } .gs-input-group .gs-icon-left,.gs-input-group .gs-icon-right { position:absolute; top:50%; transform:translateY(-50%); color:var(--text-faint); pointer-events:none; font-size:0.9rem; } .gs-input-group .gs-icon-left { left:var(--space-3); } .gs-input-group .gs-icon-right { right:var(--space-3); } .gs-form-feedback { font-size:var(--text-xs); margin-top:var(--space-1); } .gs-form-feedback.valid { color:var(--success-bright); } .gs-form-feedback.invalid { color:var(--danger); } .gs-form-hint { font-size:var(--text-xs); color:var(--text-faint); margin-top:var(--space-1); } .gs-check { display:flex; align-items:center; gap:var(--space-3); cursor:pointer; font-size:var(--text-sm); color:var(--text-secondary); user-select:none; } .gs-check input[type="checkbox"],.gs-check input[type="radio"] { appearance:none; width:18px; height:18px; background:var(--bg-input); border:2px solid var(--border-color); border-radius:var(--border-radius-xs); flex-shrink:0; cursor:pointer; transition:var(--transition-base); position:relative; } .gs-check input[type="radio"] { border-radius:50%; } .gs-check input:hover { border-color:var(--accent); } .gs-check input:checked { background:var(--accent); border-color:var(--accent); } .gs-check input[type="checkbox"]:checked::after { content:''; position:absolute; left:4px; top:1px; width:6px; height:10px; border:2px solid var(--text-inverse); border-top:none; border-left:none; transform:rotate(45deg); } .gs-check input[type="radio"]:checked::after { content:''; position:absolute; left:3px; top:3px; width:8px; height:8px; background:var(--text-inverse); border-radius:50%; } .gs-switch { display:flex; align-items:center; gap:var(--space-3); cursor:pointer; } .gs-switch-track { position:relative; width:42px; height:24px; background:var(--bg-raised); border:1px solid var(--border-color); border-radius:var(--border-radius-pill); transition:var(--transition-base); } .gs-switch input { display:none; } .gs-switch input:checked ~ .gs-switch-track { background:var(--accent); border-color:var(--accent); } .gs-switch-thumb { position:absolute; top:2px; left:2px; width:18px; height:18px; background:var(--text-primary); border-radius:50%; transition:var(--transition-bounce); box-shadow:var(--shadow-xs); } .gs-switch input:checked ~ .gs-switch-track .gs-switch-thumb { transform:translateX(18px); } .gs-range { appearance:none; width:100%; height:4px; background:var(--bg-raised); border-radius:var(--border-radius-pill); outline:none; cursor:pointer; } .gs-range::-webkit-slider-thumb { appearance:none; width:18px; height:18px; background:var(--accent); border-radius:50%; box-shadow:var(--shadow-xs); transition:var(--transition-base); } .gs-range::-webkit-slider-thumb:hover { transform:scale(1.2); box-shadow:var(--shadow-accent); } .gs-select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFA300' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right var(--space-3) center; background-size:12px; padding-right:2.5rem; cursor:pointer; } /* ============================================================ 13. BADGE / TAG / STATUS ============================================================ */ .gs-badge { display:inline-flex; align-items:center; gap:4px; font-size:var(--text-xs); font-weight:var(--fw-semi); padding:2px 8px; border-radius:var(--border-radius-pill); line-height:1.5; white-space:nowrap; letter-spacing:0.02em; } .gs-badge-accent { background:var(--accent-subtle); color:var(--accent); border:1px solid rgba(255,163,0,0.3); } .gs-badge-success { background:var(--success-bg); color:var(--success-bright); border:1px solid var(--success-border); } .gs-badge-danger { background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-border); } .gs-badge-warning { background:var(--warning-bg); color:var(--warning); border:1px solid var(--warning-border); } .gs-badge-info { background:var(--info-bg); color:var(--info); border:1px solid var(--info-border); } .gs-badge-pink { background:var(--pink-bg); color:var(--pink); border:1px solid var(--pink-border); } .gs-badge-muted { background:var(--bg-raised); color:var(--text-faint); border:1px solid var(--border-subtle); } .gs-tag { display:inline-flex; align-items:center; gap:4px; font-size:var(--text-xs); font-weight:var(--fw-medium); padding:4px 10px; border-radius:var(--border-radius-sm); background:var(--bg-raised); color:var(--text-secondary); border:1px solid var(--border-subtle); cursor:pointer; transition:var(--transition-fast); } .gs-tag:hover,.gs-tag.active { background:var(--accent-subtle); color:var(--accent); border-color:rgba(255,163,0,0.4); } .gs-delivery-instant { display:inline-flex; align-items:center; gap:4px; color:var(--success-bright); font-size:var(--text-xs); font-weight:var(--fw-semi); } .gs-delivery-manual { display:inline-flex; align-items:center; gap:4px; color:var(--info); font-size:var(--text-xs); font-weight:var(--fw-semi); } .gs-status { display:inline-flex; align-items:center; gap:5px; font-size:var(--text-xs); font-weight:var(--fw-semi); } .gs-status::before { content:''; width:7px; height:7px; border-radius:50%; flex-shrink:0; } .gs-status-pending::before { background:var(--warning); } .gs-status-pending { color:var(--warning); } .gs-status-active::before { background:var(--success); box-shadow:0 0 0 3px rgba(55,189,32,0.2); animation:pulse-dot 1.5s infinite; } .gs-status-active { color:var(--success-bright); } .gs-status-closed::before { background:var(--text-faint); } .gs-status-closed { color:var(--text-faint); } .gs-status-dispute::before { background:var(--danger); } .gs-status-dispute { color:var(--danger); } .gs-status-completed::before { background:var(--info); } .gs-status-completed { color:var(--info); } /* ============================================================ 14. ALERT / TOAST ============================================================ */ .gs-alert { display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-4) var(--space-5); border-radius:var(--border-radius); border-left:4px solid transparent; font-size:var(--text-sm); line-height:var(--lh-relaxed); } .gs-alert-success { background:var(--success-bg); border-color:var(--success); color:var(--success-bright); } .gs-alert-danger { background:var(--danger-bg); border-color:var(--danger); color:var(--danger); } .gs-alert-warning { background:var(--warning-bg); border-color:var(--warning); color:var(--warning); } .gs-alert-info { background:var(--info-bg); border-color:var(--info); color:var(--info); } .gs-alert-accent { background:var(--accent-subtle); border-color:var(--accent); color:var(--accent); } .gs-toast { min-width:280px; max-width:360px; background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--border-radius-md); padding:var(--space-4); box-shadow:var(--shadow-lg); display:flex; align-items:flex-start; gap:var(--space-3); font-size:var(--text-sm); } .gs-toast-title { font-weight:var(--fw-semi); margin-bottom:2px; } /* ============================================================ 15. TABELLE ============================================================ */ .gs-table { width:100%; border-collapse:collapse; font-size:var(--text-sm); } .gs-table thead th { background:var(--bg-subtle); color:var(--text-faint); font-size:var(--text-xs); font-weight:var(--fw-semi); text-transform:uppercase; letter-spacing:0.06em; padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border-color); text-align:left; white-space:nowrap; } .gs-table tbody td { padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border-subtle); color:var(--text-primary); vertical-align:middle; } .gs-table tbody tr:hover td { background:var(--bg-raised); } .gs-table tbody tr:last-child td { border-bottom:none; } /* ============================================================ 16. MODALI ============================================================ */ .gs-modal-backdrop { position:fixed; inset:0; background:var(--bg-overlay); z-index:var(--z-overlay); display:flex; align-items:center; justify-content:center; padding:var(--space-4); } .gs-modal { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--border-radius-lg); box-shadow:var(--shadow-xl); width:100%; max-width:520px; max-height:90vh; overflow-y:auto; z-index:var(--z-modal); } .gs-modal-header { padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--border-subtle); display:flex; align-items:center; justify-content:space-between; } .gs-modal-title { font-family:var(--font-display); font-size:var(--text-xl); font-weight:var(--fw-bold); color:var(--text-primary); } .gs-modal-body { padding:var(--space-6); } .gs-modal-footer { padding:var(--space-4) var(--space-6); border-top:1px solid var(--border-subtle); display:flex; align-items:center; justify-content:flex-end; gap:var(--space-3); } /* ============================================================ 17. DROPDOWN / TOOLTIP ============================================================ */ .gs-dropdown { background:var(--bg-deepest); border:1px solid var(--border-color); border-radius:var(--border-radius-md); box-shadow:var(--shadow-lg); min-width:180px; overflow:hidden; z-index:var(--z-dropdown); } .gs-dropdown-item { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); font-size:var(--text-sm); color:var(--text-secondary); cursor:pointer; transition:var(--transition-fast); border:none; background:transparent; width:100%; text-align:left; font-family:var(--font-body); } .gs-dropdown-item:hover { background:var(--bg-raised); color:var(--text-primary); } .gs-dropdown-item.danger { color:var(--danger); } .gs-dropdown-item.danger:hover { background:var(--danger-bg); } .gs-dropdown-divider { border:none; border-top:1px solid var(--border-subtle); margin:var(--space-1) 0; } [data-tooltip] { position:relative; } [data-tooltip]::after { content:attr(data-tooltip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--bg-deepest); color:var(--text-primary); font-size:var(--text-xs); padding:5px 10px; border-radius:var(--border-radius-sm); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 0.15s ease; border:1px solid var(--border-subtle); box-shadow:var(--shadow-md); z-index:var(--z-tooltip); } [data-tooltip]:hover::after { opacity:1; } /* ============================================================ 18. PROGRESS / PAGINATION / TABS / AVATAR / RATING / SKELETON ============================================================ */ .gs-progress { width:100%; height:6px; background:var(--bg-raised); border-radius:var(--border-radius-pill); overflow:hidden; } .gs-progress-bar { height:100%; background:var(--accent); border-radius:var(--border-radius-pill); transition:width 0.5s ease; } .gs-progress-bar.success { background:var(--success); } .gs-progress-bar.info { background:var(--info); } .gs-progress-bar.danger { background:var(--danger); } .gs-progress-bar.warning { background:var(--warning); } .gs-progress-lg { height:10px; } .gs-progress-sm { height:3px; } .gs-pagination { display:flex; align-items:center; gap:var(--space-1); list-style:none; } .gs-pagination-item a,.gs-pagination-item button { display:flex; align-items:center; justify-content:center; width:36px; height:36px; background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--border-radius); color:var(--text-secondary); font-size:var(--text-sm); cursor:pointer; text-decoration:none; transition:var(--transition-fast); font-family:var(--font-body); } .gs-pagination-item a:hover,.gs-pagination-item button:hover { border-color:var(--accent); color:var(--accent); } .gs-pagination-item.active a,.gs-pagination-item.active button { background:var(--accent); border-color:var(--accent); color:var(--text-inverse); font-weight:var(--fw-bold); } .gs-pagination-item.disabled a,.gs-pagination-item.disabled button { opacity:0.35; cursor:not-allowed; } .gs-tabs { display:flex; border-bottom:1px solid var(--border-subtle); } .gs-tab-item { padding:var(--space-3) var(--space-5); font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--text-faint); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:var(--transition-fast); white-space:nowrap; } .gs-tab-item:hover { color:var(--text-secondary); } .gs-tab-item.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:var(--fw-semi); } .gs-avatar { border-radius:50%; object-fit:cover; background:var(--bg-raised); border:2px solid var(--border-color); display:flex; align-items:center; justify-content:center; font-weight:var(--fw-bold); font-family:var(--font-body); color:var(--accent); flex-shrink:0; } .gs-avatar-xs { width:24px; height:24px; font-size:10px; } .gs-avatar-sm { width:32px; height:32px; font-size:12px; } .gs-avatar-md { width:40px; height:40px; font-size:14px; } .gs-avatar-lg { width:56px; height:56px; font-size:18px; } .gs-avatar-xl { width:80px; height:80px; font-size:24px; } .gs-avatar-wrapper { position:relative; display:inline-flex; } .gs-online-dot { position:absolute; bottom:1px; right:1px; width:10px; height:10px; background:var(--success); border-radius:50%; border:2px solid var(--bg-base); } .gs-stars { display:inline-flex; gap:2px; align-items:center; } .gs-star { color:var(--accent); font-size:0.85rem; } .gs-star.empty { color:var(--bg-raised); } .gs-rating-text { font-size:var(--text-xs); color:var(--text-faint); margin-left:var(--space-1); } .gs-skeleton { background:linear-gradient(90deg, var(--bg-card) 25%, var(--bg-raised) 50%, var(--bg-card) 75%); background-size:200% 100%; animation:gs-shimmer 1.5s infinite; border-radius:var(--border-radius); } .gs-skeleton-text { height:14px; width:100%; margin-bottom:var(--space-2); } .gs-skeleton-title { height:22px; width:60%; margin-bottom:var(--space-3); } .gs-skeleton-btn { height:var(--input-height); width:100px; border-radius:var(--border-radius); } .gs-skeleton-avatar { border-radius:50%; width:40px; height:40px; } .gs-skeleton-card { height:120px; border-radius:var(--border-radius-md); } .gs-skeleton-img { height:180px; border-radius:var(--border-radius-md); } /* ============================================================ 19. BREADCRUMB ============================================================ */ .gs-breadcrumb { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-xs); } .gs-breadcrumb-item { color:var(--text-faint); } .gs-breadcrumb-item a { color:var(--text-faint); } .gs-breadcrumb-item a:hover { color:var(--accent); text-decoration:none; } .gs-breadcrumb-item.active { color:var(--accent); } .gs-breadcrumb-sep { color:var(--text-faint); font-size:0.6rem; } /* ============================================================ 20. MARKETPLACE-SPECIFIC ============================================================ */ .gs-offer-title { color:var(--accent); font-size:var(--text-sm); font-weight:var(--fw-medium); line-height:var(--lh-snug); cursor:pointer; transition:var(--transition-fast); } .gs-offer-title:hover { color:var(--accent-hover); text-decoration:none; filter:brightness(1.15); } .gs-seller-name { font-weight:var(--fw-semi); color:var(--text-primary); font-size:var(--text-sm); } .gs-seller-meta { font-size:var(--text-xs); color:var(--text-faint); } .gs-level-badge { display:inline-flex; align-items:center; justify-content:center; padding:2px 8px; background:rgba(255,163,0,0.15); border:1px solid rgba(255,163,0,0.4); border-radius:var(--border-radius-sm); font-size:var(--text-xs); font-weight:var(--fw-bold); color:var(--accent); font-family:var(--font-body); } .gs-filter-bar { display:flex; flex-wrap:wrap; gap:var(--space-2); padding:var(--space-3) 0; } .gs-category-icon { width:56px; height:56px; background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--border-radius-md); display:flex; align-items:center; justify-content:center; font-size:1.4rem; transition:var(--transition-base); cursor:pointer; } .gs-category-icon:hover { border-color:var(--accent); background:var(--accent-subtle); transform:translateY(-2px); } /* ============================================================ 21. HERO / FOOTER ============================================================ */ .gs-hero { background:linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-base) 100%); padding:var(--space-16) 0; position:relative; overflow:hidden; } .gs-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 60% 50%, rgba(255,163,0,0.06) 0%, transparent 70%); pointer-events:none; } .gs-footer { background:var(--bg-elevated); border-top:1px solid var(--border-subtle); padding:var(--space-12) 0 var(--space-6); } .gs-footer-link { color:var(--text-faint); font-size:var(--text-sm); transition:var(--transition-fast); display:block; margin-bottom:var(--space-2); } .gs-footer-link:hover { color:var(--accent); text-decoration:none; } .gs-footer-heading { font-family:var(--font-display); font-size:var(--text-sm); font-weight:var(--fw-bold); color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:var(--space-4); } .gs-footer-bottom { border-top:1px solid var(--border-subtle); padding-top:var(--space-6); margin-top:var(--space-8); font-size:var(--text-xs); color:var(--text-faint); } /* ============================================================ 22. UTILITIES ============================================================ */ .bg-base { background-color:var(--bg-base) !important; } .bg-card { background-color:var(--bg-card) !important; } .bg-elevated { background-color:var(--bg-elevated) !important; } .bg-subtle { background-color:var(--bg-subtle) !important; } .bg-raised { background-color:var(--bg-raised) !important; } .bg-accent-subtle { background-color:var(--accent-subtle)!important; } .bg-success-subtle { background-color:var(--success-bg) !important; } .bg-danger-subtle { background-color:var(--danger-bg) !important; } .bg-warning-subtle { background-color:var(--warning-bg) !important; } .bg-info-subtle { background-color:var(--info-bg) !important; } .border-accent { border-color:var(--accent) !important; } .border-success { border-color:var(--success) !important; } .border-danger { border-color:var(--danger) !important; } .border-info { border-color:var(--info) !important; } .border-subtle { border-color:var(--border-subtle) !important; } .rounded-pill { border-radius:var(--border-radius-pill) !important; } .rounded-lg { border-radius:var(--border-radius-lg) !important; } .rounded-md { border-radius:var(--border-radius-md) !important; } .rounded { border-radius:var(--border-radius) !important; } .shadow-sm { box-shadow:var(--shadow-sm) !important; } .shadow-md { box-shadow:var(--shadow-md) !important; } .shadow-lg { box-shadow:var(--shadow-lg) !important; } .shadow-accent { box-shadow:var(--shadow-accent)!important; } .font-brand { font-family:var(--font-brand) !important; } .font-body { font-family:var(--font-body) !important; } .fw-light { font-weight:var(--fw-light) !important; } .fw-normal { font-weight:var(--fw-normal) !important; } .fw-medium { font-weight:var(--fw-medium) !important; } .fw-semi { font-weight:var(--fw-semi) !important; } .fw-bold { font-weight:var(--fw-bold) !important; } .fw-xbold { font-weight:var(--fw-xbold) !important; } .fw-black { font-weight:var(--fw-black) !important; } .flex-1 { flex: 1; min-width: 0; } .cursor-pointer { cursor:pointer; } .user-select-none { user-select:none; } .overflow-hidden { overflow:hidden; } .transition { transition:var(--transition-base); } /* ============================================================ 23. SPINNER / LOADER ============================================================ */ @keyframes gs-spin-smooth { to { transform: rotate(360deg); } } /* Spinner base — cerchio con gap colorato */ .gs-spinner { display: inline-block; width: 32px; height: 32px; border: 3px solid var(--border-subtle); border-top-color: var(--accent); border-radius: 50%; animation: gs-spin-smooth 0.75s linear infinite; flex-shrink: 0; } /* Varianti colore */ .gs-spinner-accent { border-top-color: var(--accent); } .gs-spinner-success { border-top-color: var(--success-bright); } .gs-spinner-danger { border-top-color: var(--danger); } .gs-spinner-info { border-top-color: var(--info); } .gs-spinner-white { border-color: rgba(255,255,255,0.25); border-top-color: #FFFFFF; } /* Varianti dimensione */ .gs-spinner-xs { width:16px; height:16px; border-width:2px; } .gs-spinner-sm { width:22px; height:22px; border-width:2px; } .gs-spinner-md { width:32px; height:32px; border-width:3px; } .gs-spinner-lg { width:48px; height:48px; border-width:4px; } .gs-spinner-xl { width:64px; height:64px; border-width:5px; } /* Overlay fullscreen loader — uso:
*/ .gs-loader-overlay { position: fixed; inset: 0; background: var(--bg-overlay); z-index: var(--z-modal); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); } .gs-loader-overlay .gs-spinner { width:52px; height:52px; border-width:4px; } .gs-loader-overlay-label { font-size: var(--text-sm); color: var(--text-secondary); font-weight: var(--fw-medium); } /* Inline loader (dentro bottone) */ .gs-btn-loading { pointer-events: none; opacity: 0.75; } .gs-btn-loading .gs-spinner { width:16px; height:16px; border-width:2px; } /* Loader inline centrato — uso:
*/ .gs-loader-inline { width: 100%; padding: var(--space-8) 0; display: flex; align-items: center; justify-content: center; gap: var(--space-3); } .gs-loader-inline-label { font-size: var(--text-sm); color: var(--text-faint); } /* ============================================================ 24. EMPTY STATE ============================================================ */ .gs-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-12) var(--space-6); gap: var(--space-4); } .gs-empty-icon { width: 72px; height: 72px; background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--text-faint); flex-shrink: 0; } .gs-empty-icon-accent { background: var(--accent-subtle); border-color: rgba(255,163,0,0.3); color: var(--accent); } .gs-empty-icon-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info); } .gs-empty-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--text-primary); line-height: var(--lh-snug); } .gs-empty-desc { font-size: var(--text-sm); color: var(--text-faint); max-width: 360px; line-height: var(--lh-relaxed); margin-top: calc(-1 * var(--space-2)); } .gs-empty-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-top: var(--space-2); } /* Variante compatta — dentro tabella o lista */ .gs-empty-sm { padding: var(--space-8) var(--space-4); gap: var(--space-3); } .gs-empty-sm .gs-empty-icon { width: 52px; height: 52px; font-size: 1.3rem; } .gs-empty-sm .gs-empty-title { font-size: var(--text-md); } /* ============================================================ 25. ORDER STEPPER ============================================================ 9 stati workflow GrindSell: attesa_registrazione → attesa_accesso_gta → attesa_attivazione → disponibile → in_modding → pronto_vendita → in_vendita → da_rinnovare → venduto / annullato Uso HTML:
...
...
...
============================================================ */ /* Stepper orizzontale */ .gs-stepper { display: flex; align-items: flex-start; gap: 0; width: 100%; overflow-x: auto; padding-bottom: var(--space-2); } .gs-stepper::-webkit-scrollbar { height: 3px; } .gs-step { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 80px; position: relative; } /* Linea connettore tra step */ .gs-step:not(:last-child)::after { content: ''; position: absolute; top: 18px; left: calc(50% + 18px); width: calc(100% - 36px); height: 2px; background: var(--border-subtle); transition: background var(--duration-slow) var(--ease-default); } .gs-step.completed:not(:last-child)::after { background: var(--success); } .gs-step.cancelled:not(:last-child)::after { background: var(--danger); } /* Pallino step */ .gs-step-dot { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-raised); border: 2px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: var(--text-faint); font-weight: var(--fw-bold); font-family: var(--font-body); position: relative; z-index: 1; transition: var(--transition-base); flex-shrink: 0; } .gs-step.completed .gs-step-dot { background: var(--success); border-color: var(--success); color: #FFFFFF; } .gs-step.active .gs-step-dot { background: var(--bg-card); border-color: #FFFFFF; color: #FFFFFF; border-width: 2px; box-shadow: 0 0 0 4px rgba(255,255,255,0.10); } .gs-step.cancelled .gs-step-dot { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); } /* Label step */ .gs-step-label { margin-top: var(--space-2); font-size: var(--text-xs); text-align: center; color: var(--text-faint); font-weight: var(--fw-medium); line-height: var(--lh-snug); max-width: 90px; word-break: break-word; } .gs-step.completed .gs-step-label { color: var(--text-secondary); } .gs-step.active .gs-step-label { color: #FFFFFF; font-weight: var(--fw-semi); } .gs-step.cancelled .gs-step-label { color: var(--danger); } /* Stepper verticale — sidebar timeline ordine */ .gs-stepper-vertical { display: flex; flex-direction: column; gap: 0; position: relative; } .gs-stepper-vertical .gs-step { flex-direction: row; align-items: flex-start; flex: none; min-width: auto; gap: var(--space-4); padding-bottom: var(--space-5); } .gs-stepper-vertical .gs-step::after { display: none; } .gs-stepper-vertical .gs-step:not(:last-child) .gs-step-dot::after { content: ''; position: absolute; top: 36px; left: 50%; transform: translateX(-50%); width: 2px; height: calc(100% + var(--space-5) - 36px); background: var(--border-subtle); z-index: 0; } .gs-stepper-vertical .gs-step.completed:not(:last-child) .gs-step-dot::after { background: var(--success); } .gs-stepper-vertical .gs-step-label { max-width: none; text-align: left; margin-top: var(--space-1); } .gs-stepper-vertical .gs-step-content { padding-top: 6px; } .gs-stepper-vertical .gs-step-date { font-size: var(--text-xs); color: var(--text-faint); margin-top: 2px; } /* ============================================================ 26. CHAT / MESSAGE THREAD ============================================================ */ .gs-chat { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); max-height: 480px; overflow-y: auto; background: var(--bg-subtle); border-radius: var(--border-radius-md); border: 1px solid var(--border-subtle); } .gs-chat::-webkit-scrollbar { width: 4px; } /* Bolla messaggio */ .gs-msg { display: flex; gap: var(--space-3); align-items: flex-end; max-width: 85%; } .gs-msg-in { align-self: flex-start; } .gs-msg-out { align-self: flex-end; flex-direction: row-reverse; } .gs-msg-bubble { padding: var(--space-3) var(--space-4); border-radius: var(--border-radius-md); font-size: var(--text-sm); line-height: var(--lh-relaxed); word-break: break-word; position: relative; } /* Messaggio in entrata — buyer */ .gs-msg-in .gs-msg-bubble { background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-primary); border-bottom-left-radius: var(--border-radius-xs); } /* Messaggio in uscita — seller (tu) */ .gs-msg-out .gs-msg-bubble { background: var(--accent-subtle); border: 1px solid rgba(255,163,0,0.25); color: var(--text-primary); border-bottom-right-radius: var(--border-radius-xs); } .gs-msg-meta { font-size: var(--text-xs); color: var(--text-faint); margin-top: 3px; display: flex; align-items: center; gap: var(--space-1); } .gs-msg-in .gs-msg-meta { justify-content: flex-start; padding-left: var(--space-1); } .gs-msg-out .gs-msg-meta { justify-content: flex-end; padding-right: var(--space-1); } /* Tick di lettura */ .gs-msg-tick { color: var(--text-faint); font-size: 0.75rem; } .gs-msg-tick.read { color: var(--info); } /* Messaggio di sistema — es. "Ordine creato", "Credenziali inviate" */ .gs-msg-system { align-self: center; background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--border-radius-pill); padding: var(--space-1) var(--space-4); font-size: var(--text-xs); color: var(--text-faint); text-align: center; font-style: italic; } .gs-msg-system.accent { background: var(--accent-subtle); color: var(--accent); border-color: rgba(255,163,0,0.3); font-style: normal; font-weight: var(--fw-medium); } .gs-msg-system.success { background: var(--success-bg); color: var(--success-bright); border-color: var(--success-border); font-style: normal; font-weight: var(--fw-medium); } .gs-msg-system.danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); font-style: normal; font-weight: var(--fw-medium); } /* Area input chat */ .gs-chat-input-area { display: flex; gap: var(--space-2); padding: var(--space-3); background: var(--bg-card); border: 1px solid var(--border-subtle); border-top: none; border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } .gs-chat-input { flex: 1; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--border-radius); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-sm); padding: var(--space-2) var(--space-3); outline: none; resize: none; min-height: 40px; max-height: 120px; line-height: var(--lh-normal); transition: var(--transition-base); } .gs-chat-input::placeholder { color: var(--text-placeholder); } .gs-chat-input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-glow); } /* ============================================================ 27. FILE UPLOAD ============================================================ */ /* Dropzone */ .gs-dropzone { border: 2px dashed var(--border-color); border-radius: var(--border-radius-md); padding: var(--space-8) var(--space-6); text-align: center; background: var(--bg-subtle); cursor: pointer; transition: var(--transition-base); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .gs-dropzone:hover, .gs-dropzone.dragover { border-color: var(--accent); background: var(--accent-subtle); } .gs-dropzone-icon { width: 56px; height: 56px; background: var(--bg-raised); border-radius: var(--border-radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--text-faint); transition: var(--transition-base); } .gs-dropzone:hover .gs-dropzone-icon, .gs-dropzone.dragover .gs-dropzone-icon { color: var(--accent); background: var(--bg-card); } .gs-dropzone-title { font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--text-secondary); } .gs-dropzone-title span { color: var(--accent); } .gs-dropzone-sub { font-size: var(--text-xs); color: var(--text-faint); } /* File input nascosto — usato con label che wrappa .gs-dropzone */ .gs-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } /* Lista file caricati */ .gs-file-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); } .gs-file-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--border-radius); transition: var(--transition-fast); } .gs-file-item:hover { border-color: var(--border-color); } .gs-file-icon { width: 36px; height: 36px; background: var(--bg-raised); border-radius: var(--border-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--accent); flex-shrink: 0; } .gs-file-icon.img { color: var(--pink); } .gs-file-icon.pdf { color: var(--danger); } .gs-file-icon.zip { color: var(--warning); } .gs-file-name { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-primary); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; } .gs-file-size { font-size: var(--text-xs); color: var(--text-faint); margin-top: 2px; } .gs-file-progress { flex: 1; } .gs-file-status-done { color: var(--success-bright); font-size: 1rem; flex-shrink: 0; } .gs-file-status-error { color: var(--danger); font-size: 1rem; flex-shrink: 0; } .gs-file-remove { background: transparent; border: none; color: var(--text-faint); cursor: pointer; padding: 4px; border-radius: var(--border-radius-sm); transition: var(--transition-fast); line-height: 1; flex-shrink: 0; } .gs-file-remove:hover { color: var(--danger); background: var(--danger-bg); } /* ============================================================ 28. IMAGE THUMBNAIL / PRODUCT IMAGE ============================================================ */ /* Wrapper immagine prodotto */ .gs-img-wrap { position: relative; overflow: hidden; border-radius: var(--border-radius-md); background: var(--bg-raised); display: block; } /* Aspect ratio helpers */ .gs-img-wrap-16x9 { aspect-ratio: 16/9; } .gs-img-wrap-4x3 { aspect-ratio: 4/3; } .gs-img-wrap-1x1 { aspect-ratio: 1/1; } .gs-img-wrap-3x4 { aspect-ratio: 3/4; } .gs-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--duration-slow) var(--ease-out); } .gs-img-wrap:hover img { transform: scale(1.05); } /* Overlay scuro al hover */ .gs-img-overlay { position: absolute; inset: 0; background: var(--bg-overlay-light); opacity: 0; transition: opacity var(--duration-base) var(--ease-default); display: flex; align-items: center; justify-content: center; gap: var(--space-3); } .gs-img-wrap:hover .gs-img-overlay { opacity: 1; } /* Placeholder immagine — quando non c'è ancora la foto */ .gs-img-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); color: var(--text-faint); font-size: 0.8rem; background: var(--bg-raised); min-height: 120px; } .gs-img-placeholder i { font-size: 2rem; color: var(--border-color); } /* Badge sovrapposto all'immagine */ .gs-img-badge { position: absolute; z-index: 2; font-size: var(--text-xs); font-weight: var(--fw-bold); padding: 4px 8px; border-radius: var(--border-radius-sm); line-height: 1; } .gs-img-badge-tl { top: var(--space-2); left: var(--space-2); } .gs-img-badge-tr { top: var(--space-2); right: var(--space-2); } .gs-img-badge-bl { bottom: var(--space-2); left: var(--space-2); } .gs-img-badge-br { bottom: var(--space-2); right: var(--space-2); } /* Galleria thumbnail */ .gs-thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: var(--space-2); } .gs-thumb { aspect-ratio: 1/1; border-radius: var(--border-radius-sm); overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: var(--transition-base); background: var(--bg-raised); } .gs-thumb img { width: 100%; height: 100%; object-fit: cover; } .gs-thumb:hover { border-color: var(--border-color); } .gs-thumb.active { border-color: var(--accent); } /* ============================================================ 29. NOTIFICATION DOT / COUNTER BADGE ============================================================ */ /* Wrapper — deve avere position:relative */ .gs-notif-wrap { position: relative; display: inline-flex; } /* Dot semplice — solo pallino colorato */ .gs-notif-dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); border: 2px solid var(--bg-base); flex-shrink: 0; } .gs-notif-dot-accent { background: var(--accent); } .gs-notif-dot-success { background: var(--success); } .gs-notif-dot-warning { background: var(--warning); } .gs-notif-dot-info { background: var(--info); } .gs-notif-dot-pulse { animation: pulse-dot 1.5s infinite; } /* Counter badge — numero sopra icona */ .gs-notif-count { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; background: var(--danger); border: 2px solid var(--bg-base); border-radius: var(--border-radius-pill); font-size: 10px; font-weight: var(--fw-bold); font-family: var(--font-body); color: #FFFFFF; display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; pointer-events: none; } .gs-notif-count-accent { background: var(--accent); color: var(--text-inverse); } .gs-notif-count-success { background: var(--success); color: #FFFFFF; } .gs-notif-count-warning { background: var(--warning); color: var(--text-inverse); } .gs-notif-count-info { background: var(--info); color: #FFFFFF; } /* Variante large — per sidebar nav item */ .gs-notif-count-lg { min-width: 22px; height: 22px; font-size: 11px; top: -8px; right: -10px; padding: 0 5px; } /* Badge inline (non posizionato) — uso diretto in testo */ .gs-notif-inline { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; background: var(--danger); border-radius: var(--border-radius-pill); font-size: 11px; font-weight: var(--fw-bold); font-family: var(--font-body); color: #FFFFFF; padding: 0 5px; line-height: 1; } .gs-notif-inline-accent { background: var(--accent); color: var(--text-inverse); } .gs-notif-inline-success { background: var(--success); color: #FFFFFF; } /* ============================================================ 30. DRAWER / OFFCANVAS ============================================================ */ @keyframes gs-drawer-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes gs-drawer-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes gs-drawer-in-bottom { from { transform: translateY(100%); } to { transform: translateY(0); } } .gs-drawer-overlay { position: fixed; inset: 0; background: var(--bg-overlay); z-index: var(--z-overlay); opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-default); } .gs-drawer-overlay.active { opacity: 1; pointer-events: all; } .gs-drawer { position: fixed; background: var(--bg-elevated); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xl); z-index: var(--z-modal); display: flex; flex-direction: column; transition: transform var(--duration-slow) var(--ease-out); } .gs-drawer-right { top: 0; right: 0; bottom: 0; width: 100%; max-width: 420px; border-right: none; border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg); transform: translateX(100%); } .gs-drawer-left { top: 0; left: 0; bottom: 0; width: 100%; max-width: 420px; border-left: none; border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0; transform: translateX(-100%); } .gs-drawer-bottom { bottom: 0; left: 0; right: 0; height: auto; max-height: 85vh; border-bottom: none; border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0; transform: translateY(100%); } .gs-drawer.active { transform: translate(0); } .gs-drawer-handle { width: 40px; height: 4px; background: var(--border-color); border-radius: var(--border-radius-pill); margin: var(--space-3) auto var(--space-1); flex-shrink: 0; } .gs-drawer-header { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .gs-drawer-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--text-primary); } .gs-drawer-body { flex: 1; overflow-y: auto; padding: var(--space-6); } .gs-drawer-body::-webkit-scrollbar { width: 4px; } .gs-drawer-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-subtle); display: flex; gap: var(--space-3); flex-shrink: 0; } /* ============================================================ 31. ACCORDION ============================================================ */ .gs-accordion { border: 1px solid var(--border-subtle); border-radius: var(--border-radius-md); overflow: hidden; } .gs-accordion-item { border-bottom: 1px solid var(--border-subtle); } .gs-accordion-item:last-child { border-bottom: none; } .gs-accordion-trigger { width: 100%; background: var(--bg-card); border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--text-primary); text-align: left; transition: var(--transition-fast); gap: var(--space-3); } .gs-accordion-trigger:hover { background: var(--bg-raised); color: var(--accent); } .gs-accordion-trigger.open { color: var(--accent); background: var(--bg-raised); } .gs-accordion-icon { flex-shrink: 0; font-size: 0.75rem; color: var(--text-faint); transition: transform var(--duration-base) var(--ease-in-out); } .gs-accordion-trigger.open .gs-accordion-icon { transform: rotate(180deg); color: var(--accent); } .gs-accordion-body { background: var(--bg-subtle); max-height: 0; overflow: hidden; transition: max-height var(--duration-slow) var(--ease-in-out), padding var(--duration-slow) var(--ease-in-out); padding: 0 var(--space-5); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--lh-relaxed); } .gs-accordion-body.open { max-height: 600px; padding: var(--space-4) var(--space-5); } .gs-accordion-flush { border: none; border-radius: 0; } .gs-accordion-flush .gs-accordion-item { border-bottom: 1px solid var(--border-subtle); } .gs-accordion-flush .gs-accordion-trigger { background: transparent; padding-left: 0; } .gs-accordion-flush .gs-accordion-trigger:hover { background: transparent; } .gs-accordion-flush .gs-accordion-body { background: transparent; padding-left: 0; } /* ============================================================ 32. CREDENTIAL REVEAL + COPY ============================================================ */ .gs-credential-box { background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--border-radius-md); overflow: hidden; } .gs-credential-box-header { padding: var(--space-3) var(--space-5); background: var(--bg-card); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; } .gs-credential-box-title { font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--text-primary); display: flex; align-items: center; gap: var(--space-2); } .gs-credential-box-title i { color: var(--accent); } .gs-credential { display: flex; align-items: center; padding: var(--space-3) var(--space-5); gap: var(--space-3); border-bottom: 1px solid var(--border-subtle); transition: var(--transition-fast); } .gs-credential:last-child { border-bottom: none; } .gs-credential:hover { background: var(--bg-raised); } .gs-credential-label { font-size: var(--text-xs); font-weight: var(--fw-semi); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; min-width: 80px; flex-shrink: 0; } .gs-credential-value { flex: 1; min-width: 0; } .gs-credential-text { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-primary); word-break: break-all; } .gs-credential-text.hidden { display: none; } .gs-credential-mask { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-faint); letter-spacing: 2px; } .gs-credential-mask.hidden { display: none; } .gs-btn-credential-reveal, .gs-btn-credential-copy { background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--border-radius-sm); color: var(--text-faint); cursor: pointer; padding: 5px 8px; font-size: 0.85rem; transition: var(--transition-fast); line-height: 1; flex-shrink: 0; } .gs-btn-credential-reveal:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-subtle); } .gs-btn-credential-copy:hover { color: var(--success-bright); border-color: var(--success); background: var(--success-bg); } .gs-btn-credential-copy.copied { color: var(--success-bright); border-color: var(--success); background: var(--success-bg); } .gs-credential-alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-5); background: var(--warning-bg); border-bottom: 1px solid var(--warning-border); font-size: var(--text-xs); color: var(--warning); line-height: var(--lh-relaxed); } /* ============================================================ 33. COUNTDOWN TIMER ============================================================ */ .gs-countdown { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); } .gs-countdown-unit { display: flex; flex-direction: column; align-items: center; background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--border-radius); padding: var(--space-2) var(--space-3); min-width: 52px; transition: var(--transition-base); } .gs-countdown-num { font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--text-primary); line-height: 1; } .gs-countdown-label { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; } .gs-countdown-sep { font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--text-faint); line-height: 1; margin-bottom: var(--space-3); } .gs-countdown.urgent .gs-countdown-unit { background: var(--danger-bg); border-color: var(--danger-border); } .gs-countdown.urgent .gs-countdown-num { color: var(--danger); } .gs-countdown.urgent .gs-countdown-sep { color: var(--danger); } .gs-countdown.accent .gs-countdown-unit { background: var(--accent-subtle); border-color: rgba(255,163,0,0.3); } .gs-countdown.accent .gs-countdown-num { color: var(--accent); } .gs-countdown.accent .gs-countdown-sep { color: var(--accent); } .gs-countdown-inline { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--text-primary); } .gs-countdown-inline.urgent { color: var(--danger); } .gs-countdown-inline.accent { color: var(--accent); } /* ============================================================ 34. COOKIE BANNER / GDPR ============================================================ */ .gs-cookie-banner { position: fixed; bottom: var(--space-4); left: 50%; transform: translateX(-50%); width: calc(100% - var(--space-8)); max-width: 720px; background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-xl); padding: var(--space-5) var(--space-6); z-index: var(--z-toast); display: flex; align-items: flex-start; gap: var(--space-5); animation: gs-anim-fade-in-up var(--duration-slow) var(--ease-out) both; } .gs-cookie-icon { font-size: 1.8rem; flex-shrink: 0; margin-top: 2px; } .gs-cookie-content { flex: 1; min-width: 0; } .gs-cookie-title { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--text-primary); margin-bottom: var(--space-1); } .gs-cookie-text { font-size: var(--text-xs); color: var(--text-secondary); line-height: var(--lh-relaxed); } .gs-cookie-text a { color: var(--accent); } .gs-cookie-text a:hover { text-decoration: underline; } .gs-cookie-actions { display: flex; gap: var(--space-2); flex-shrink: 0; align-items: center; flex-wrap: wrap; } @media (max-width: 576px) { .gs-cookie-banner { flex-direction: column; gap: var(--space-3); bottom: 0; left: 0; right: 0; transform: none; width: 100%; border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0; max-width: none; } .gs-cookie-actions { width: 100%; } .gs-cookie-actions .gs-btn { flex: 1; } } /* ============================================================ 35. PRICE RANGE SLIDER (doppio handle) ============================================================ */ .gs-range-dual { position: relative; width: 100%; height: 36px; display: flex; align-items: center; } .gs-range-track { position: absolute; left: 0; right: 0; height: 4px; background: var(--bg-raised); border-radius: var(--border-radius-pill); z-index: 0; } .gs-range-fill { position: absolute; height: 100%; background: var(--accent); border-radius: var(--border-radius-pill); transition: left var(--duration-fast), width var(--duration-fast); } .gs-range-dual .gs-range { position: absolute; width: 100%; appearance: none; background: transparent; pointer-events: none; z-index: 1; height: 4px; padding: 0; } .gs-range-dual .gs-range::-webkit-slider-thumb { appearance: none; pointer-events: all; width: 20px; height: 20px; background: var(--text-primary); border: 2px solid var(--accent); border-radius: 50%; box-shadow: var(--shadow-sm); cursor: grab; transition: var(--transition-fast); } .gs-range-dual .gs-range::-webkit-slider-thumb:hover, .gs-range-dual .gs-range::-webkit-slider-thumb:active { transform: scale(1.2); box-shadow: var(--shadow-accent); cursor: grabbing; } .gs-range-values { display: flex; justify-content: space-between; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-secondary); font-weight: var(--fw-medium); } .gs-range-values span { color: var(--accent); font-weight: var(--fw-bold); } /* ============================================================ 36. STAR RATING INTERATTIVO ============================================================ */ .gs-rating-input { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; } .gs-rating-star { font-size: 1.4rem; color: var(--bg-raised); transition: color var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-bounce); cursor: pointer; line-height: 1; } .gs-rating-star.hovered, .gs-rating-star.selected { color: var(--accent); } .gs-rating-star:hover { transform: scale(1.2); } .gs-rating-star.selected { transform: scale(1.1); } .gs-rating-input-sm .gs-rating-star { font-size: 1rem; } .gs-rating-input-lg .gs-rating-star { font-size: 2rem; } .gs-rating-feedback { font-size: var(--text-xs); color: var(--text-faint); margin-left: var(--space-2); font-weight: var(--fw-medium); transition: var(--transition-fast); min-width: 60px; } /* ============================================================ 37. RICH TEXT VIEWER ============================================================ */ .gs-rich-text { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--lh-relaxed); } .gs-rich-text h1,.gs-rich-text h2,.gs-rich-text h3,.gs-rich-text h4,.gs-rich-text h5,.gs-rich-text h6 { color: var(--text-primary); margin: var(--space-4) 0 var(--space-2); font-weight: var(--fw-bold); } .gs-rich-text h1 { font-size: var(--text-xl); } .gs-rich-text h2 { font-size: var(--text-lg); } .gs-rich-text h3 { font-size: var(--text-md); } .gs-rich-text p { margin-bottom: var(--space-3); } .gs-rich-text strong { color: var(--text-primary); font-weight: var(--fw-bold); } .gs-rich-text em { font-style: italic; } .gs-rich-text a { color: var(--accent); } .gs-rich-text a:hover { text-decoration: underline; } .gs-rich-text ul,.gs-rich-text ol { padding-left: var(--space-5); margin-bottom: var(--space-3); } .gs-rich-text li { margin-bottom: var(--space-1); } .gs-rich-text ul li::marker { color: var(--accent); } .gs-rich-text ol li::marker { color: var(--accent); font-weight: var(--fw-bold); } .gs-rich-text blockquote { border-left: 3px solid var(--accent); padding: var(--space-2) var(--space-4); background: var(--accent-subtle); border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0; margin: var(--space-4) 0; font-style: italic; } .gs-rich-text code { background: var(--bg-raised); color: var(--accent); padding: 2px 6px; border-radius: var(--border-radius-xs); font-family: var(--font-mono); font-size: 0.9em; } .gs-rich-text pre { background: var(--bg-deepest); border: 1px solid var(--border-subtle); border-radius: var(--border-radius); padding: var(--space-4); overflow-x: auto; margin: var(--space-4) 0; } .gs-rich-text pre code { background: transparent; color: var(--success-bright); padding: 0; } .gs-rich-text hr { border: none; border-top: 1px solid var(--border-subtle); margin: var(--space-5) 0; } .gs-rich-text table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); margin: var(--space-4) 0; } .gs-rich-text th { background: var(--bg-raised); color: var(--text-primary); font-weight: var(--fw-semi); padding: var(--space-2) var(--space-3); border-bottom: 2px solid var(--border-color); text-align: left; } .gs-rich-text td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); } .gs-rich-text tr:last-child td { border-bottom: none; } .gs-rich-text img { max-width: 100%; border-radius: var(--border-radius); margin: var(--space-3) 0; } .gs-rich-text-truncated { max-height: 160px; overflow: hidden; position: relative; } .gs-rich-text-truncated::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(to bottom, transparent, var(--bg-card)); pointer-events: none; } .gs-rich-text-expand-btn { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--accent); font-weight: var(--fw-semi); cursor: pointer; background: none; border: none; padding: var(--space-2) 0; transition: var(--transition-fast); font-family: var(--font-body); } .gs-rich-text-expand-btn:hover { color: var(--accent-hover); } /* ============================================================ 38. MULTISTEP FORM / CHECKOUT WIZARD ============================================================ Navigazione tra step di un form multi-pagina. Step: indicatore numerico + barra progresso + contenuto + nav bottoni. Uso:
...
...
...
...
============================================================ */ /* Contenitore principale */ .gs-wizard { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--border-radius-lg); overflow: hidden; } /* Intestazione con step numerati */ .gs-wizard-steps { display: flex; background: var(--bg-elevated); border-bottom: 1px solid var(--border-subtle); padding: var(--space-5) var(--space-6); gap: 0; overflow-x: auto; } .gs-wizard-steps::-webkit-scrollbar { height: 0; } .gs-wizard-step { display: flex; align-items: center; flex: 1; min-width: 0; gap: var(--space-3); position: relative; } /* Connettore tra step */ .gs-wizard-step:not(:last-child)::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); margin: 0 var(--space-3); flex-shrink: 0; min-width: var(--space-6); transition: background var(--duration-base); } .gs-wizard-step.completed:not(:last-child)::after { background: var(--success); } /* Pallino step */ .gs-wizard-step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-raised); border: 2px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--fw-bold); font-family: var(--font-body); color: var(--text-faint); flex-shrink: 0; transition: var(--transition-base); } .gs-wizard-step.completed .gs-wizard-step-num { background: var(--success); border-color: var(--success); color: #fff; } .gs-wizard-step.active .gs-wizard-step-num { background: var(--bg-card); border-color: #fff; color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.08); } /* Label step */ .gs-wizard-step-info { min-width: 0; } .gs-wizard-step-label { font-size: var(--text-xs); font-weight: var(--fw-semi); color: var(--text-faint); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gs-wizard-step.active .gs-wizard-step-label { color: #fff; } .gs-wizard-step.completed .gs-wizard-step-label { color: var(--text-secondary); } .gs-wizard-step-sublabel { font-size: 10px; color: var(--text-faint); margin-top: 1px; white-space: nowrap; } .gs-wizard-step.active .gs-wizard-step-sublabel { color: var(--text-faint); } /* Barra progresso sotto gli step */ .gs-wizard-progress { height: 3px; background: var(--bg-raised); position: relative; } .gs-wizard-progress-fill { height: 100%; background: var(--success); border-radius: 0 var(--border-radius-pill) var(--border-radius-pill) 0; transition: width var(--duration-slow) var(--ease-out); } /* Pannelli contenuto */ .gs-wizard-panels { padding: var(--space-6); } .gs-wizard-panel { display: none; animation: gs-anim-fade-in var(--duration-base) var(--ease-out); } .gs-wizard-panel.active { display: block; } /* Titolo pannello */ .gs-wizard-panel-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--text-primary); margin-bottom: var(--space-1); } .gs-wizard-panel-sub { font-size: var(--text-sm); color: var(--text-faint); margin-bottom: var(--space-5); } /* Navigazione bottoni */ .gs-wizard-nav { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-subtle); background: var(--bg-elevated); gap: var(--space-3); } .gs-wizard-nav-left { display: flex; gap: var(--space-2); } .gs-wizard-nav-right { display: flex; gap: var(--space-2); } /* Step counter testuale */ .gs-wizard-counter { font-size: var(--text-xs); color: var(--text-faint); font-weight: var(--fw-medium); } /* ============================================================ 39. SEARCH AUTOCOMPLETE / COMBOBOX ============================================================ Search con dropdown di suggerimenti. Usa il gradient border della navbar se inserito nella navbar, oppure stile standalone nelle pagine interne. Uso:
...
...
============================================================ */ .gs-search-combo { position: relative; width: 100%; } /* Input con icona search */ .gs-search-combo-wrap { position: relative; display: flex; align-items: center; } .gs-search-combo-icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 0.9rem; pointer-events: none; z-index: 1; } .gs-search-combo-input { width: 100%; height: var(--input-height); background: var(--bg-input-search); border: 1px solid var(--border-color); border-radius: var(--border-radius); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-sm); padding: 0 var(--space-10) 0 var(--space-9); outline: none; transition: var(--transition-base); } .gs-search-combo-input::placeholder { color: var(--text-placeholder); } .gs-search-combo-input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-glow); } /* Bottone clear */ .gs-search-combo-clear { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--text-faint); cursor: pointer; font-size: 0.8rem; padding: 2px; line-height: 1; display: none; transition: var(--transition-fast); } .gs-search-combo-clear:hover { color: var(--text-primary); } .gs-search-combo-clear.visible { display: block; } /* Dropdown */ .gs-search-combo-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); max-height: 380px; overflow-y: auto; display: none; } .gs-search-combo-dropdown::-webkit-scrollbar { width: 4px; } .gs-search-combo-dropdown.open { display: block; animation: gs-anim-fade-in-down var(--duration-fast) var(--ease-out); } /* Label sezione */ .gs-search-combo-section { padding: var(--space-2) var(--space-4) var(--space-1); font-size: 10px; font-weight: var(--fw-bold); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; border-top: 1px solid var(--border-subtle); } .gs-search-combo-section:first-child { border-top: none; } /* Item suggerimento */ .gs-search-combo-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; transition: var(--transition-fast); text-decoration: none; } .gs-search-combo-item:hover, .gs-search-combo-item.focused { background: var(--bg-raised); } .gs-search-combo-item-icon { width: 32px; height: 32px; border-radius: var(--border-radius-sm); background: var(--bg-raised); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: var(--text-faint); flex-shrink: 0; } .gs-search-combo-item-icon.accent { background: var(--accent-subtle); color: var(--accent); } .gs-search-combo-item-icon.success { background: var(--success-bg); color: var(--success-bright); } .gs-search-combo-item-icon.info { background: var(--info-bg); color: var(--info); } .gs-search-combo-item-body { flex: 1; min-width: 0; } .gs-search-combo-item-title { font-size: var(--text-sm); color: var(--text-primary); font-weight: var(--fw-medium); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Testo evidenziato nel match */ .gs-search-combo-item-title mark { background: transparent; color: var(--accent); font-weight: var(--fw-bold); padding: 0; } .gs-search-combo-item-meta { font-size: var(--text-xs); color: var(--text-faint); margin-top: 1px; } .gs-search-combo-item-price { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--accent); flex-shrink: 0; } /* Footer dropdown — "vedi tutti i risultati" */ .gs-search-combo-footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-subtle); text-align: center; font-size: var(--text-xs); color: var(--accent); cursor: pointer; transition: var(--transition-fast); font-weight: var(--fw-semi); } .gs-search-combo-footer:hover { background: var(--bg-raised); } /* Stato empty */ .gs-search-combo-empty { padding: var(--space-6) var(--space-4); text-align: center; font-size: var(--text-sm); color: var(--text-faint); } .gs-search-combo-empty i { display: block; font-size: 1.5rem; margin-bottom: var(--space-2); } /* ============================================================ 40. POPOVER ============================================================ Tooltip arricchito: cliccabile, HTML ricco, freccia posizionabile. Diverso dal tooltip (hover-only, solo testo breve). Posizioni: top / bottom / left / right Uso:
Titolo
Contenuto ricco
============================================================ */ .gs-popover-wrap { position: relative; display: inline-flex; } .gs-popover { position: absolute; z-index: var(--z-tooltip); background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); box-shadow: var(--shadow-lg); min-width: 220px; max-width: 320px; pointer-events: none; opacity: 0; transition: opacity var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-out); } .gs-popover.open { pointer-events: all; opacity: 1; } /* Posizione TOP */ .gs-popover-top { bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px); } .gs-popover-top.open { transform: translateX(-50%) translateY(0); } /* Posizione BOTTOM */ .gs-popover-bottom { top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px); } .gs-popover-bottom.open { transform: translateX(-50%) translateY(0); } /* Posizione RIGHT */ .gs-popover-right { left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-6px); } .gs-popover-right.open { transform: translateY(-50%) translateX(0); } /* Posizione LEFT */ .gs-popover-left { right: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(6px); } .gs-popover-left.open { transform: translateY(-50%) translateX(0); } /* Freccia */ .gs-popover-arrow { position: absolute; width: 10px; height: 10px; background: var(--bg-elevated); border: 1px solid var(--border-color); transform: rotate(45deg); } .gs-popover-top .gs-popover-arrow { bottom: -6px; left: 50%; margin-left: -5px; border-top: none; border-left: none; } .gs-popover-bottom .gs-popover-arrow { top: -6px; left: 50%; margin-left: -5px; border-bottom: none; border-right: none; } .gs-popover-right .gs-popover-arrow { left: -6px; top: 50%; margin-top: -5px; border-right: none; border-bottom: none; } .gs-popover-left .gs-popover-arrow { right: -6px; top: 50%; margin-top: -5px; border-left: none; border-top: none; } /* Contenuto */ .gs-popover-header { padding: var(--space-3) var(--space-4) var(--space-2); border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--text-primary); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .gs-popover-close { background: transparent; border: none; cursor: pointer; color: var(--text-faint); font-size: 0.75rem; padding: 0; line-height: 1; transition: var(--transition-fast); } .gs-popover-close:hover { color: var(--text-primary); } .gs-popover-body { padding: var(--space-3) var(--space-4); font-size: var(--text-xs); color: var(--text-secondary); line-height: var(--lh-relaxed); } .gs-popover-footer { padding: var(--space-2) var(--space-4) var(--space-3); border-top: 1px solid var(--border-subtle); display: flex; gap: var(--space-2); justify-content: flex-end; } /* ============================================================ 41. RESPONSIVE ============================================================ */ @media (max-width: 768px) { :root { --sidebar-width:100%; --navbar-height:var(--navbar-height-mobile); } .gs-wrapper { padding:0 var(--space-4); } .gs-price-display { font-size:var(--text-2xl); } h1 { font-size:var(--text-3xl); } h2 { font-size:var(--text-2xl); } .gs-brand-hero { font-size:var(--text-5xl); } } @media (max-width: 576px) { h1 { font-size:var(--text-2xl); } h2 { font-size:var(--text-xl); } .gs-section { padding:var(--space-8) 0; } .gs-brand-hero { font-size:var(--text-4xl); } } /* ============================================================ 42. PAGE BODY VARIANTS ============================================================ */ /* Webmail e pagine a layout verticale: footer spinto in fondo */ body.gs-body-flex { min-height: 100vh; display: flex; flex-direction: column; } body.gs-body-flex main { flex: 1; } /* Coming-soon e pagine con contenuto centrato */ body.gs-body-centered { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; text-align: center; } /* ============================================================ 43. SHARED PAGE FOOTER (.gs-page-footer) ============================================================ */ .gs-page-footer { background: var(--bg-deepest); border-top: 1px solid var(--border-subtle); text-align: center; padding: var(--space-4); font-size: var(--text-xs); color: var(--text-faint); } /* Variante fixed - usata solo nella coming-soon */ .gs-page-footer--fixed { position: fixed; bottom: 0; width: 100%; } /* ============================================================ 44. COMING SOON (.cs-*) ============================================================ */ .cs-container { max-width: 760px; padding: var(--space-10) var(--space-6); } .cs-brand { margin-bottom: var(--space-8); } .cs-subtitle { font-size: var(--text-xl); font-weight: var(--fw-semi); color: var(--text-secondary); margin-bottom: var(--space-5); letter-spacing: 0.02em; } .cs-description { font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--text-muted); margin-bottom: var(--space-10); } .cs-description strong { color: var(--text-secondary); font-weight: var(--fw-semi); } .cs-divider { width: 48px; height: 3px; background: var(--accent); border-radius: 2px; margin: 0 auto var(--space-8); } /* ============================================================ 45. WEBMAIL (.wm-*) ============================================================ */ /* Login layout */ .wm-login-outer { flex: 1; display: flex; flex-direction: column; } .wm-login-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-8) var(--space-4); } .wm-login-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--border-radius-lg); padding: var(--space-8); width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); } .wm-login-brand { text-align: center; margin-bottom: var(--space-6); } .wm-login-tagline { font-size: var(--text-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.12em; font-weight: var(--fw-semi); margin-top: var(--space-2); } .wm-input-suffix { display: inline-flex; align-items: center; padding: 0 var(--space-3); background: var(--bg-elevated); border: 1px solid var(--border-color); border-left: none; border-radius: 0 var(--border-radius) var(--border-radius) 0; color: var(--text-faint); font-size: var(--text-sm); height: 42px; white-space: nowrap; } .wm-input-group { display: flex; } .wm-input-group .gs-input { border-radius: var(--border-radius) 0 0 var(--border-radius); border-right: none; flex: 1; } .wm-pass-group { display: flex; } .wm-pass-group .gs-input { border-radius: var(--border-radius) 0 0 var(--border-radius); border-right: none; flex: 1; } .wm-pass-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; background: var(--bg-elevated); border: 1px solid var(--border-color); border-left: none; border-radius: 0 var(--border-radius) var(--border-radius) 0; color: var(--text-faint); cursor: pointer; transition: var(--transition-fast); } .wm-pass-toggle:hover { color: var(--accent); } .wm-login-group { display: flex; flex-direction: column; width: 100%; max-width: 420px; } .wm-login-notice { text-align: center; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--lh-relaxed); margin-top: var(--space-5); padding: 0 var(--space-2); } /* Header bar inbox + view */ .wm-header { background: var(--bg-elevated); border-bottom: 1px solid var(--border-subtle); padding: var(--space-4) var(--space-6); display: flex; align-items: center; justify-content: space-between; } .wm-user-info { font-size: var(--text-sm); color: var(--text-secondary); } .wm-user-info strong { color: var(--text-primary); } /* Inbox */ .wm-inbox-wrap { max-width: 900px; margin: 0 auto; padding: var(--space-8) var(--space-4); } .wm-inbox-title { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--text-primary); margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); } .wm-table-wrap { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--border-radius-lg); overflow: hidden; } .wm-table { width: 100%; border-collapse: collapse; } .wm-table thead tr { background: var(--bg-elevated); } .wm-table thead th { padding: var(--space-3) var(--space-5); font-size: var(--text-xs); font-weight: var(--fw-semi); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--border-subtle); } .wm-table tbody tr { border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background var(--duration-fast) var(--ease-default); } .wm-table tbody tr:last-child { border-bottom: none; } .wm-table tbody tr:hover { background: var(--bg-raised); } .wm-table tbody tr:hover .wm-td-subject { color: var(--accent); } .wm-table td { padding: var(--space-4) var(--space-5); font-size: var(--text-sm); color: var(--text-secondary); } .wm-td-subject { font-weight: var(--fw-semi); color: var(--text-primary); transition: color var(--duration-fast); } .wm-td-date { color: var(--text-faint); font-size: var(--text-xs); white-space: nowrap; } .wm-empty { text-align: center; padding: var(--space-16) var(--space-4); color: var(--text-faint); font-size: var(--text-sm); } .wm-empty i { font-size: 2.5rem; display: block; margin-bottom: var(--space-3); color: var(--text-disabled); } /* Email view */ .wm-view-wrap { max-width: 900px; margin: 0 auto; padding: var(--space-8) var(--space-4); } .wm-view-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--border-radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .wm-view-card-header { background: var(--bg-elevated); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-subtle); } .wm-view-subject { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--text-primary); margin-bottom: var(--space-3); } .wm-view-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); color: var(--text-faint); } .wm-view-meta span { display: flex; align-items: center; gap: var(--space-2); } .wm-view-meta strong{ color: var(--text-secondary); } .wm-view-body { padding: 0; } .wm-view-body iframe { display: block; width: 100%; min-height: 500px; border: none; background: #ffffff; } .wm-view-body-plain { padding: var(--space-6); font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--text-secondary); white-space: pre-wrap; } .wm-nav-actions { display: flex; gap: var(--space-3); margin-bottom: var(--space-5); } /* ============================================================ WEBMAIL — SPLIT PANEL LAYOUT ============================================================ */ /* Body bloccato a 100vh nel layout split */ body:has(.wm-split) { height: 100vh; overflow: hidden; } /* Wrapper che occupa tutto lo spazio rimanente sotto l'header */ .wm-split { display: flex; flex: 1; min-height: 0; overflow: hidden; } /* ── Pannello sinistro: lista email ── */ .wm-split-list { width: 320px; min-width: 260px; max-width: 380px; display: flex; flex-direction: column; border-right: 1px solid var(--border-subtle); background: var(--bg-base); overflow-y: auto; flex-shrink: 0; } .wm-split-list-header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--text-primary); background: var(--bg-elevated); border-bottom: 1px solid var(--border-subtle); text-transform: uppercase; letter-spacing: 0.06em; position: sticky; top: 0; z-index: 1; } .wm-split-list-count { margin-left: auto; background: var(--accent-subtle); color: var(--accent); font-size: var(--text-xs); font-weight: var(--fw-bold); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--accent-glow); } /* Singola riga nella lista */ .wm-split-list-item { display: block; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); text-decoration: none; cursor: pointer; transition: background var(--duration-fast) var(--ease-default); } .wm-split-list-item:last-child { border-bottom: none; } .wm-split-list-item:hover { background: var(--bg-raised); } .wm-split-list-item.active { background: var(--accent-subtle); border-left: 3px solid var(--accent); padding-left: calc(var(--space-5) - 3px); } .wm-sli-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-1); } .wm-sli-from { font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .wm-split-list-item.active .wm-sli-from { color: var(--accent); } .wm-sli-date { font-size: var(--text-xs); color: var(--text-faint); white-space: nowrap; flex-shrink: 0; } .wm-sli-subject { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Pannello destro: corpo email ── */ .wm-split-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; background: var(--bg-base); } .wm-split-panel-header { background: var(--bg-elevated); border-bottom: 1px solid var(--border-subtle); padding: var(--space-5) var(--space-7); flex-shrink: 0; } .wm-split-panel-header .wm-view-subject { font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--text-primary); margin-bottom: var(--space-3); } .wm-split-panel-header .wm-view-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); color: var(--text-faint); } .wm-split-panel-header .wm-view-meta span { display: flex; align-items: center; gap: var(--space-2); } .wm-split-panel-header .wm-view-meta strong{ color: var(--text-secondary); } .wm-split-panel-body { flex: 1; min-height: 0; padding: var(--space-6) var(--space-7); overflow-y: auto; } .wm-split-panel-body iframe { display: block; width: 100%; min-height: 400px; border: none; background: #ffffff; border-radius: var(--border-radius); } .wm-split-panel-body .wm-view-body-plain { font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--text-secondary); white-space: pre-wrap; padding: 0; } /* Stato vuoto pannello destro */ .wm-split-panel-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); color: var(--text-disabled); } .wm-split-panel-empty i { font-size: 3rem; } .wm-split-panel-empty span { font-size: var(--text-sm); } /* ── Responsive: mobile ── */ @media (max-width: 767px) { .wm-split { flex-direction: column; height: auto; overflow: visible; } .wm-split-list { width: 100%; max-width: 100%; border-right: none; border-bottom: 1px solid var(--border-subtle); overflow-y: visible; } /* Su mobile il pannello destro è nascosto (si usa view.php) */ .wm-split-panel { display: none; } }} /* ============================================================ 27. MARKETPLACE — HOMEPAGE ============================================================ */ /* Hero */ .gs-hero { padding:var(--space-20) 0 var(--space-16); text-align:center; } .gs-hero-headline { font-size:var(--text-4xl); font-weight:var(--fw-black); color:var(--text-primary); line-height:var(--lh-tight); margin-bottom:var(--space-4); } .gs-hero-sub { font-size:var(--text-lg); color:var(--text-secondary); max-width:520px; margin:0 auto var(--space-8); line-height:var(--lh-relaxed); } @media (max-width:768px) { .gs-hero { padding:var(--space-12) 0 var(--space-8); } .gs-hero-headline { font-size:var(--text-3xl); } } /* Filter bar */ .gs-filter-bar { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; margin-bottom:var(--space-6); } .gs-filter-btn { font-size:var(--text-sm); font-weight:var(--fw-medium); padding:var(--space-2) var(--space-4); border:1px solid var(--border-subtle); border-radius:var(--border-radius-pill); background:var(--bg-card); color:var(--text-secondary); cursor:pointer; transition:var(--transition-fast); } .gs-filter-btn:hover,.gs-filter-btn.active { background:var(--accent-subtle); border-color:rgba(255,163,0,0.4); color:var(--accent); } /* Product grid */ .gs-product-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--space-5); } @media (max-width:576px) { .gs-product-grid { grid-template-columns:1fr; } } /* Product card image */ .gs-card-offer .gs-card-offer-img { border-radius:var(--border-radius-sm); overflow:hidden; margin-bottom:var(--space-3); aspect-ratio:16/9; background:var(--bg-raised); } .gs-card-offer .gs-card-offer-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--duration-slow) var(--ease-out); } .gs-card-offer:hover .gs-card-offer-img img { transform:scale(1.05); } .gs-card-offer-price { font-size:var(--text-xl); font-weight:var(--fw-bold); color:var(--text-primary); margin:var(--space-2) 0 var(--space-3); } .gs-card-offer-price .from { font-size:var(--text-xs); font-weight:var(--fw-normal); color:var(--text-faint); margin-right:3px; } /* Trust section */ .gs-trust-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:var(--space-5); } .gs-trust-item { text-align:center; padding:var(--space-5); } .gs-trust-icon { width:52px; height:52px; background:var(--accent-subtle); border:1px solid rgba(255,163,0,0.25); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--accent); margin:0 auto var(--space-3); } .gs-trust-title { font-weight:var(--fw-semi); color:var(--text-primary); font-size:var(--text-sm); margin-bottom:var(--space-1); } .gs-trust-desc { font-size:var(--text-xs); color:var(--text-faint); line-height:var(--lh-relaxed); } /* Review cards */ .gs-review-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--space-5); } .gs-review-card { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--border-radius-md); padding:var(--space-5); } .gs-review-stars { margin-bottom:var(--space-2); } .gs-review-text { font-size:var(--text-sm); color:var(--text-secondary); line-height:var(--lh-relaxed); margin-bottom:var(--space-3); } .gs-review-author { font-size:var(--text-xs); color:var(--text-faint); } /* ============================================================ 28. MARKETPLACE — PRODUCT PAGE ============================================================ */ .gs-product-hero { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-10); align-items:start; padding:var(--space-10) 0; } @media (max-width:768px) { .gs-product-hero { grid-template-columns:1fr; } } .gs-product-img-wrap { border-radius:var(--border-radius-lg); overflow:hidden; aspect-ratio:4/3; background:var(--bg-raised); } .gs-product-img-wrap img { width:100%; height:100%; object-fit:cover; } /* Boost tier selector */ .gs-boost-tier-btn { border:1px solid var(--border-color); background:var(--bg-card); color:var(--text-secondary); border-radius:var(--border-radius); padding:var(--space-2) var(--space-4); font-size:var(--text-sm); font-weight:var(--fw-medium); cursor:pointer; transition:var(--transition-fast); } .gs-boost-tier-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-subtle); } .gs-boost-tier-btn.active { border-color:var(--accent); background:var(--accent-subtle); color:var(--accent); font-weight:var(--fw-bold); } /* Deluxo notice */ #deluxoNotice { display:none; } /* Stats table (account page) */ .gs-stats-table td:first-child { color:var(--text-faint); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:0.06em; width:40%; } .gs-stats-table td:last-child { color:var(--text-primary); font-weight:var(--fw-medium); } /* ============================================================ 29. MARKETPLACE — CHECKOUT ============================================================ */ .gs-checkout-wrap { max-width:640px; margin:0 auto; padding:var(--space-10) var(--space-4); } .gs-checkout-summary { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--border-radius-lg); padding:var(--space-6); margin-bottom:var(--space-6); } .gs-checkout-product { display:flex; gap:var(--space-4); align-items:center; } .gs-checkout-product-img { width:72px; height:72px; border-radius:var(--border-radius); overflow:hidden; background:var(--bg-raised); flex-shrink:0; } .gs-checkout-product-img img { width:100%; height:100%; object-fit:cover; } .gs-checkout-total { display:flex; justify-content:space-between; align-items:baseline; margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--border-subtle); } .gs-checkout-total-label { font-size:var(--text-sm); color:var(--text-secondary); } .gs-checkout-total-price { font-size:var(--text-2xl); font-weight:var(--fw-bold); color:var(--text-primary); } .gs-trust-stripe { display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-xs); color:var(--text-faint); padding:var(--space-3) var(--space-4); background:var(--bg-subtle); border-radius:var(--border-radius); margin-top:var(--space-4); } .gs-trust-stripe i { color:var(--info); font-size:1rem; } /* ============================================================ 30. MARKETPLACE — AUTH PAGES ============================================================ */ .gs-auth-wrap { min-height:calc(100vh - var(--navbar-height)); display:flex; align-items:center; justify-content:center; padding:var(--space-8) var(--space-4); } .gs-auth-card { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--border-radius-lg); padding:var(--space-8); width:100%; max-width:440px; box-shadow:var(--shadow-lg); } .gs-auth-brand { text-align:center; margin-bottom:var(--space-6); } .gs-auth-title { font-size:var(--text-xl); font-weight:var(--fw-bold); color:var(--text-primary); text-align:center; margin-bottom:var(--space-2); } .gs-auth-sub { font-size:var(--text-sm); color:var(--text-faint); text-align:center; margin-bottom:var(--space-6); } /* ============================================================ 31. MARKETPLACE — ACCOUNT / ADMIN PAGES ============================================================ */ .gs-page-header { padding:var(--space-8) 0 var(--space-6); border-bottom:1px solid var(--border-subtle); margin-bottom:var(--space-6); } .gs-page-title { font-size:var(--text-2xl); font-weight:var(--fw-bold); color:var(--text-primary); } .gs-page-sub { font-size:var(--text-sm); color:var(--text-faint); margin-top:var(--space-1); } /* Admin stats bar */ .gs-stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:var(--space-4); } .gs-stat-card { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--border-radius-md); padding:var(--space-5); } .gs-stat-label { font-size:var(--text-xs); font-weight:var(--fw-semi); color:var(--text-faint); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:var(--space-2); } .gs-stat-value { font-size:var(--text-2xl); font-weight:var(--fw-black); color:var(--text-primary); line-height:1; } .gs-stat-value.accent { color:var(--accent); } .gs-stat-value.success { color:var(--success-bright); } .gs-stat-value.danger { color:var(--danger); } .gs-stat-value.info { color:var(--info); } /* ============================================================ NAVBAR LINKS & MOBILE NAV — aggiunte v3.1 ============================================================ */ .gs-navbar-link { font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--text-secondary); padding:var(--space-2) var(--space-3); border-radius:var(--border-radius); transition:var(--transition-fast); text-decoration:none !important; white-space:nowrap; position:relative; background:transparent; } .gs-navbar-link:hover { color:var(--text-primary); background:transparent; text-decoration:none !important; } .gs-navbar-link.active { color:var(--accent); background:transparent; text-decoration:none !important; } .gs-dropdown-menu { background: var(--bg-deepest) !important; border: 1px solid var(--border-color) !important; border-radius: var(--border-radius-md) !important; box-shadow: var(--shadow-lg) !important; min-width: 200px; padding: var(--space-1) 0; } .gs-dropdown-item { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-4); font-size:var(--text-sm); color:var(--text-secondary) !important; transition:var(--transition-fast); text-decoration:none; background:transparent !important; } .gs-dropdown-item:hover { background:var(--bg-raised) !important; color:var(--text-primary) !important; text-decoration:none; } .gs-dropdown-item.danger { color:var(--danger) !important; } .gs-dropdown-item.danger:hover { background:var(--danger-bg) !important; color:var(--danger) !important; } .gs-dropdown-divider { border-color:var(--border-subtle) !important; } .gs-mobile-nav { background:var(--bg-elevated); border-bottom:1px solid var(--border-subtle); padding:var(--space-2) 0; display:none; } .gs-mobile-nav.open { display:block; animation:gs-fade-in-down var(--duration-base) var(--ease-out) both; } .gs-mobile-nav-item { display:flex; align-items:center; padding:var(--space-3) var(--space-6); font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--text-secondary); text-decoration:none; transition:var(--transition-fast); } .gs-mobile-nav-item:hover { background:var(--bg-raised); color:var(--text-primary); text-decoration:none; } .gs-mobile-nav-item.active { color:var(--accent); background:var(--accent-subtle); } /* Stars */ .gs-stars { display:inline-flex; gap:2px; } .gs-star { color:var(--accent); font-size:0.9rem; } .gs-star.empty { color:var(--bg-raised); } /* Trust stripe (checkout/product) */ .gs-trust-stripe { display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-xs); color:var(--text-faint); padding:var(--space-3) var(--space-4); background:var(--bg-subtle); border-radius:var(--border-radius); margin-top:var(--space-4); } .gs-trust-stripe i { color:var(--info); font-size:1rem; } /* Boost tier button */ .gs-boost-tier-btn { border:1px solid var(--border-color); background:var(--bg-card); color:var(--text-secondary); border-radius:var(--border-radius); padding:var(--space-2) var(--space-4); font-size:var(--text-sm); font-weight:var(--fw-medium); cursor:pointer; transition:var(--transition-fast); } .gs-boost-tier-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-subtle); } .gs-boost-tier-btn.active { border-color:var(--accent); background:var(--accent-subtle); color:var(--accent); font-weight:var(--fw-bold); } /* ============================================================ MARKETPLACE EXTENSIONS — added for the full GrindSell site All classes referenced by the PHP templates live below. ============================================================ */ /* ── Utility spacing helpers ────────────────────────────────────────────── */ .py-8 { padding-top:var(--space-8) !important; padding-bottom:var(--space-8) !important; } .py-10 { padding-top:var(--space-10) !important; padding-bottom:var(--space-10) !important; } .pb-10 { padding-bottom:var(--space-10) !important; } .p-5 { padding:var(--space-5) !important; } .font-mono { font-family:var(--font-mono) !important; } /* ── Navbar — defined in section 8, no override needed ──────────────────── */ /* ── Footer ─────────────────────────────────────────────────────────────── */ .gs-footer { background: var(--bg-elevated) !important; border-top: 1px solid var(--border-subtle) !important; padding: var(--space-6) 0 !important; position: relative; } .gs-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,163,0,0.5) 30%, rgba(255,163,0,0.5) 70%, transparent 100%); pointer-events: none; } .gs-footer-fixed { position:fixed !important; bottom:0; left:0; right:0; z-index:var(--z-sticky); } .gs-footer-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap; gap: var(--space-4); } .gs-footer-brand { display:flex; flex-direction:column; gap:2px; } .gs-footer-tagline { font-size:var(--text-xs); color:var(--text-faint); margin-top:2px; } .gs-footer-links { display:flex; gap:var(--space-5); flex-wrap:wrap; align-items:center; } .gs-footer-link { font-size:var(--text-xs); color:var(--text-faint); text-decoration:none !important; transition:var(--transition-fast); } .gs-footer-link:hover { color:var(--accent); } .gs-footer-copy { font-size:var(--text-xs); color:var(--text-disabled); } @media (max-width: 640px) { .gs-footer-inner { flex-direction:column; align-items:flex-start; gap:var(--space-3); } .gs-footer-copy { width:100%; } } /* ── Cookie banner ──────────────────────────────────────────────────────── */ .gs-cookie-banner { position: fixed; bottom: var(--space-5); left: 50%; transform: translateX(-50%); z-index: var(--z-toast); background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); padding: var(--space-4) var(--space-5); display: flex; align-items: center; gap: var(--space-4); max-width: 560px; width: calc(100% - 2rem); box-shadow: var(--shadow-lg); } .gs-cookie-text { font-size:var(--text-xs); color:var(--text-secondary); flex:1; line-height:var(--lh-relaxed); } .gs-cookie-link { color:var(--accent); } /* ── Generic page layout ────────────────────────────────────────────────── */ main { min-height:calc(100vh - var(--navbar-height)); display:flex; flex-direction:column; } /* ── Card component ─────────────────────────────────────────────────────── */ .gs-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--border-radius-lg); overflow: hidden; } .gs-card-header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--text-secondary); background: var(--bg-elevated); display: flex; align-items: center; } /* ── Buttons ────────────────────────────────────────────────────────────── */ .gs-btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-2) var(--space-4); border-radius: var(--border-radius); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-semi); text-decoration: none !important; border: 1px solid transparent; cursor: pointer; transition: var(--transition-fast); white-space: nowrap; line-height: 1.4; } .gs-btn:disabled, .gs-btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .gs-btn-primary { background:var(--accent); color:#000; border-color:var(--accent); } .gs-btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:#000; } .gs-btn-ghost { background:transparent; color:var(--text-secondary); border-color:var(--border-color); } .gs-btn-ghost:hover { background:var(--bg-card); color:var(--text-primary); border-color:var(--border-color); } .gs-btn-ghost.active { background:var(--bg-raised); color:var(--text-primary); } .gs-btn-danger { background:var(--danger); color:#fff; border-color:var(--danger); } .gs-btn-danger:hover { background:var(--danger-hover); border-color:var(--danger-hover); color:#fff; } .gs-btn-info { background:var(--info); color:#fff; border-color:var(--info); } .gs-btn-info:hover { background:var(--info-hover); color:#fff; } .gs-btn-sm { padding:var(--space-1) var(--space-3); font-size:var(--text-xs); } .gs-btn-lg { padding:var(--space-3) var(--space-6); font-size:var(--text-base); } /* ── Badges ─────────────────────────────────────────────────────────────── */ .gs-badge { display: inline-flex; align-items: center; padding: 2px var(--space-2); border-radius: var(--border-radius-pill); font-size: var(--text-xs); font-weight: var(--fw-semi); line-height: 1.5; white-space: nowrap; } .gs-badge-accent { background:var(--accent-subtle); color:var(--accent); } .gs-badge-success { background:var(--success-bg); color:var(--success-bright); } .gs-badge-danger { background:var(--danger-bg); color:var(--danger); } .gs-badge-warning { background:var(--warning-bg); color:var(--warning); } .gs-badge-info { background:var(--info-bg); color:var(--info); } .gs-badge-account { background:rgba(26,155,247,0.12); color:var(--info); } .gs-badge-boost { background:var(--accent-subtle); color:var(--accent); } .gs-badge-platform { background:var(--bg-raised); color:var(--text-secondary); } /* ── Alerts ─────────────────────────────────────────────────────────────── */ .gs-alert { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--border-radius-md); font-size: var(--text-sm); line-height: var(--lh-relaxed); } .gs-alert-success { background:var(--success-bg); color:var(--success-bright); border:1px solid var(--success-border); } .gs-alert-danger { background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-border); } .gs-alert-warning { background:var(--warning-bg); color:var(--warning); border:1px solid var(--warning-border); } .gs-alert-info { background:var(--info-bg); color:var(--info); border:1px solid var(--info-border); } /* ── Forms ──────────────────────────────────────────────────────────────── */ .gs-form-group { margin-bottom:var(--space-4); } .gs-label { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-xs); font-weight: var(--fw-semi); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-2); } .gs-input, .gs-textarea, .gs-select { width: 100%; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--border-radius); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-sm); padding: var(--space-2) var(--space-3); transition: var(--transition-fast); height: var(--input-height); outline: none; } .gs-textarea { height:auto; resize:vertical; } .gs-select { height:var(--input-height); appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236C757D' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right var(--space-3) center; padding-right:var(--space-8); } .gs-input:focus,.gs-textarea:focus,.gs-select:focus { border-color:var(--border-focus); box-shadow:0 0 0 3px var(--accent-subtle); } .gs-input::placeholder,.gs-textarea::placeholder { color:var(--text-placeholder); } .gs-checkbox { display:flex; align-items:flex-start; gap:var(--space-2); cursor:pointer; font-size:var(--text-sm); color:var(--text-secondary); line-height:var(--lh-relaxed); } .gs-checkbox input[type="checkbox"] { margin-top:2px; flex-shrink:0; accent-color:var(--accent); width:16px; height:16px; } /* ── Link ───────────────────────────────────────────────────────────────── */ .gs-link { color:var(--accent); text-decoration:none; transition:var(--transition-fast); } .gs-link:hover { color:var(--accent-hover); text-decoration:underline; } /* ── Table ──────────────────────────────────────────────────────────────── */ .gs-table { border-collapse:collapse; width:100%; } .gs-table th { padding:var(--space-2) var(--space-3); text-align:left; font-size:var(--text-xs); font-weight:var(--fw-semi); color:var(--text-faint); text-transform:uppercase; letter-spacing:0.06em; border-bottom:1px solid var(--border-subtle); background:var(--bg-elevated); } .gs-table td { padding:var(--space-3) var(--space-3); font-size:var(--text-sm); color:var(--text-secondary); border-bottom:1px solid var(--border-subtle); vertical-align:middle; } .gs-table tr:last-child td { border-bottom:none; } .gs-table tbody tr:hover td { background:var(--bg-subtle); } /* ── Empty state ────────────────────────────────────────────────────────── */ .gs-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-12) var(--space-4); color: var(--text-disabled); text-align: center; } .gs-empty-state i { font-size:2.5rem; } .gs-empty-state p { font-size:var(--text-sm); margin:0; } /* ── Hero section ───────────────────────────────────────────────────────── */ .gs-hero { position: relative; padding: var(--space-20) 0 var(--space-16); overflow: hidden; } .gs-hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% -5%, rgba(255,163,0,0.13) 0%, transparent 60%), radial-gradient(ellipse 40% 30% at 20% 80%, rgba(26,155,247,0.05) 0%, transparent 70%), radial-gradient(ellipse 30% 20% at 80% 90%, rgba(255,163,0,0.04) 0%, transparent 70%); pointer-events: none; } /* Subtle grid texture on hero */ .gs-hero-bg::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; } .gs-hero-content { max-width:680px; margin:0 auto; text-align:center; } .gs-hero-eyebrow { display: inline-flex; align-items: center; font-size: var(--text-xs); font-weight: var(--fw-semi); color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-4); background: var(--accent-subtle); border: 1px solid rgba(255,163,0,0.35); padding: var(--space-1) var(--space-3); border-radius: var(--border-radius-pill); box-shadow: 0 0 12px rgba(255,163,0,0.12); } .gs-hero-title { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: var(--fw-black); line-height: var(--lh-tight); color: var(--text-primary); margin-bottom: var(--space-4); } .gs-hero-accent { color: var(--accent); text-shadow: 0 0 32px rgba(255,163,0,0.35); } .gs-hero-sub { font-size:var(--text-lg); color:var(--text-secondary); line-height:var(--lh-relaxed); margin:0 auto var(--space-6); max-width:520px; } .gs-hero-actions { display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; } /* ── Section layout ─────────────────────────────────────────────────────── */ .gs-section { padding:var(--space-16) 0; } .gs-section-alt { padding:var(--space-16) 0; background: var(--bg-subtle); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } .gs-section-header { text-align:center; margin-bottom:var(--space-10); } .gs-section-title { font-size:var(--text-3xl); font-weight:var(--fw-bold); color:var(--text-primary); margin-bottom:var(--space-2); } .gs-section-sub { font-size:var(--text-base); color:var(--text-faint); max-width:520px; margin:0 auto; } /* ── Filter bar ─────────────────────────────────────────────────────────── */ .gs-filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--border-radius-lg); padding: var(--space-4) var(--space-5); } .gs-filter-group { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; } .gs-filter-label { font-size:var(--text-xs); font-weight:var(--fw-semi); color:var(--text-faint); text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap; } .gs-filter-btns { display:flex; flex-wrap:wrap; gap:var(--space-2); } .gs-filter-btn { padding:var(--space-1) var(--space-3); font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--text-secondary); background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--border-radius-pill); cursor:pointer; transition:var(--transition-fast); white-space:nowrap; font-family:var(--font-body); } .gs-filter-btn:hover { color:var(--text-primary); border-color:var(--border-color); background:var(--bg-raised); } .gs-filter-btn.active { color:var(--accent); border-color:var(--accent); background:var(--accent-subtle); font-weight:var(--fw-semi); } /* ── Product grid ───────────────────────────────────────────────────────── */ .gs-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-5); } .gs-product-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--border-radius-lg); overflow: hidden; transition: var(--transition-base); display: flex; flex-direction: column; } .gs-product-card:hover { border-color: rgba(255,163,0,0.40); transform: translateY(-3px); box-shadow: var(--shadow-md), 0 0 0 1px rgba(255,163,0,0.12); } .gs-product-card-img-wrap { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-raised); display: block; } .gs-product-card-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease; } .gs-product-card:hover .gs-product-card-img-wrap img { transform:scale(1.04); } .gs-product-card-badges { position:absolute; top:var(--space-2); left:var(--space-2); display:flex; gap:var(--space-1); flex-wrap:wrap; } .gs-product-card-body { padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2); flex:1; } .gs-product-card-platform { font-size:var(--text-xs); color:var(--text-faint); text-transform:uppercase; letter-spacing:0.06em; } .gs-product-card-title { font-size:var(--text-base); font-weight:var(--fw-semi); color:var(--text-primary); line-height:var(--lh-snug); flex:1; } .gs-product-card-price { font-size:var(--text-xl); font-weight:var(--fw-black); color:var(--accent); } /* ── Product detail page ────────────────────────────────────────────────── */ .gs-product-title { font-size:var(--text-3xl); font-weight:var(--fw-black); color:var(--text-primary); line-height:var(--lh-tight); } .gs-product-price { font-size:var(--text-4xl); font-weight:var(--fw-black); color:var(--accent); line-height:1; } /* ── Trust grid ─────────────────────────────────────────────────────────── */ .gs-trust-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:var(--space-5); } .gs-trust-item { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--border-radius-md); padding: var(--space-6); text-align: center; transition: var(--transition-base); } .gs-trust-item:hover { border-color: rgba(255,163,0,0.35); background: var(--bg-raised); } .gs-trust-icon { width:52px; height:52px; background:var(--accent-subtle); border:1px solid rgba(255,163,0,0.30); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--accent); margin:0 auto var(--space-3); transition:var(--transition-base); } .gs-trust-item:hover .gs-trust-icon { box-shadow:0 0 18px rgba(255,163,0,0.25); } .gs-trust-title { font-weight:var(--fw-semi); color:var(--text-primary); font-size:var(--text-sm); margin-bottom:var(--space-1); } .gs-trust-desc { font-size:var(--text-xs); color:var(--text-faint); line-height:var(--lh-relaxed); } /* ── Review cards ───────────────────────────────────────────────────────── */ .gs-review-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--space-5); } .gs-review-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--border-radius-md); padding: var(--space-5); border-left: 3px solid var(--accent); transition: var(--transition-base); } .gs-review-card:hover { background:var(--bg-raised); border-color:var(--accent); } .gs-review-stars { margin-bottom:var(--space-2); } .gs-star { color:var(--accent); font-size:0.9rem; } .gs-star.empty{ color:var(--bg-raised); } .gs-review-text { font-size:var(--text-sm); color:var(--text-secondary); line-height:var(--lh-relaxed); margin-bottom:var(--space-3); } .gs-review-author { font-size:var(--text-xs); color:var(--text-faint); } /* ── Auth pages ─────────────────────────────────────────────────────────── */ .gs-auth-wrap { min-height:calc(100vh - var(--navbar-height)); display:flex; align-items:center; justify-content:center; padding:var(--space-8) var(--space-4); } .gs-auth-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--border-radius-lg); padding: var(--space-8); width: 100%; max-width: 440px; box-shadow: var(--shadow-lg), 0 0 40px rgba(255,163,0,0.06); } .gs-auth-brand { text-align:center; margin-bottom:var(--space-6); } .gs-auth-title { font-size:var(--text-xl); font-weight:var(--fw-bold); color:var(--text-primary); text-align:center; margin-bottom:var(--space-2); } .gs-auth-sub { font-size:var(--text-sm); color:var(--text-faint); text-align:center; margin-bottom:var(--space-6); } /* ── Checkout wrap ──────────────────────────────────────────────────────── */ .gs-checkout-wrap { max-width:640px; margin:0 auto; padding:var(--space-10) var(--space-4); } /* ── Account / admin page header ────────────────────────────────────────── */ .gs-page-header { padding:var(--space-8) 0 var(--space-6); border-bottom:1px solid var(--border-subtle); margin-bottom:var(--space-6); } .gs-page-title { font-size:var(--text-2xl); font-weight:var(--fw-bold); color:var(--text-primary); } .gs-page-sub { font-size:var(--text-sm); color:var(--text-faint); margin-top:var(--space-1); } /* ── Admin stat cards ───────────────────────────────────────────────────── */ .gs-stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:var(--space-4); } .gs-stat-card { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--border-radius-md); padding:var(--space-5); } .gs-stat-label { font-size:var(--text-xs); font-weight:var(--fw-semi); color:var(--text-faint); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:var(--space-2); } .gs-stat-value { font-size:var(--text-2xl); font-weight:var(--fw-black); color:var(--text-primary); line-height:1; } .gs-stat-value.accent { color:var(--accent); } .gs-stat-value.success { color:var(--success-bright); } .gs-stat-value.danger { color:var(--danger); } .gs-stat-value.info { color:var(--info); } /* ── Webmail split (also used by messages page) ─────────────────────────── */ .wm-split { display:flex; gap:0; min-height:480px; border:1px solid var(--border-subtle); border-radius:var(--border-radius-lg); overflow:hidden; background:var(--bg-card); } .wm-split-list { width:280px; min-width:200px; max-width:320px; border-right:1px solid var(--border-subtle); overflow-y:auto; flex-shrink:0; } .wm-split-panel { flex:1; min-height:0; display:flex; flex-direction:column; overflow-y:auto; background:var(--bg-base); } .wm-split-panel-header { background:var(--bg-elevated); border-bottom:1px solid var(--border-subtle); padding:var(--space-5) var(--space-6); flex-shrink:0; } .wm-view-subject { font-size:var(--text-lg); font-weight:var(--fw-bold); color:var(--text-primary); margin-bottom:var(--space-2); } .wm-view-meta { display:flex; flex-wrap:wrap; gap:var(--space-3); font-size:var(--text-sm); color:var(--text-faint); align-items:center; } .wm-split-panel-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-4); color:var(--text-disabled); } .wm-split-panel-empty i { font-size:3rem; } .wm-split-panel-empty span { font-size:var(--text-sm); } .wm-message-row { display:block; padding:var(--space-4) var(--space-4); border-bottom:1px solid var(--border-subtle); cursor:pointer; transition:var(--transition-fast); text-decoration:none !important; } .wm-message-row:hover,.wm-message-row.active { background:var(--bg-raised); } .wm-row-title { font-size:var(--text-sm); font-weight:var(--fw-semi); color:var(--text-primary); display:flex; align-items:center; margin-bottom:var(--space-1); } .wm-row-meta { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; } .wm-row-preview { font-size:var(--text-xs); color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; } @media (max-width:767px) { .wm-split { flex-direction:column; } .wm-split-list { width:100%; max-width:100%; border-right:none; border-bottom:1px solid var(--border-subtle); } .wm-split-panel { display:none; } } /* ── Chat UI ────────────────────────────────────────────────────────────── */ .gs-chat-messages { overflow-y:auto; padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-3); } .gs-chat-msg { display:flex; flex-direction:column; max-width:80%; } .gs-chat-msg-user { align-self:flex-end; align-items:flex-end; } .gs-chat-msg-admin { align-self:flex-start; align-items:flex-start; } .gs-chat-bubble { padding:var(--space-3) var(--space-4); border-radius:var(--border-radius-lg); font-size:var(--text-sm); line-height:var(--lh-relaxed); max-width:100%; word-wrap:break-word; } .gs-chat-msg-user .gs-chat-bubble { background:var(--accent); color:#000; border-bottom-right-radius:4px; } .gs-chat-msg-admin .gs-chat-bubble { background:var(--bg-raised); color:var(--text-primary); border-bottom-left-radius:4px; } .gs-chat-meta { font-size:var(--text-xs); color:var(--text-faint); margin-top:var(--space-1); padding:0 var(--space-1); } .gs-chat-composer { border-top:1px solid var(--border-subtle); background:var(--bg-elevated); flex-shrink:0; } /* ── Service order timeline ─────────────────────────────────────────────── */ .gs-timeline { display:flex; align-items:flex-start; gap:0; overflow-x:auto; padding:var(--space-3) 0; } .gs-timeline-item { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; gap:var(--space-2); } .gs-timeline-item:not(:last-child)::after { content:''; position:absolute; top:16px; left:calc(50% + 16px); right:calc(-50% + 16px); height:2px; background:var(--border-subtle); } .gs-timeline-item.done::after { background:var(--success-bright); } .gs-timeline-icon { width:32px; height:32px; border-radius:50%; background:var(--bg-raised); border:2px solid var(--border-subtle); display:flex; align-items:center; justify-content:center; font-size:0.9rem; color:var(--text-faint); position:relative; z-index:1; transition:var(--transition-fast); } .gs-timeline-item.done .gs-timeline-icon { background:var(--success-bg); border-color:var(--success-bright); color:var(--success-bright); } .gs-timeline-label { font-size:var(--text-xs); color:var(--text-faint); text-align:center; font-weight:var(--fw-medium); } .gs-timeline-item.done .gs-timeline-label { color:var(--success-bright); } /* ── Credential value ───────────────────────────────────────────────────── */ .gs-credential-value { font-family:var(--font-mono); font-size:var(--text-sm); color:var(--text-primary); } /* ── Accordion (product FAQ) ────────────────────────────────────────────── */ .gs-accordion { border:1px solid var(--border-subtle); border-radius:var(--border-radius-lg); overflow:hidden; } .gs-accordion-item { border-bottom:1px solid var(--border-subtle); background:var(--bg-card); } .gs-accordion-item:last-child { border-bottom:none; } .gs-accordion-btn { width:100%; text-align:left; background:transparent !important; color:var(--text-primary) !important; font-size:var(--text-sm); font-weight:var(--fw-semi); padding:var(--space-4) var(--space-5); border:none; box-shadow:none !important; } .gs-accordion-btn:not(.collapsed) { color:var(--accent) !important; } .gs-accordion-body { padding:0 var(--space-5) var(--space-4); font-size:var(--text-sm); color:var(--text-secondary); line-height:var(--lh-relaxed); } /* ── Rich text (legal pages) ────────────────────────────────────────────── */ .gs-rich-text h1,.gs-rich-text h2,.gs-rich-text h3 { margin-bottom:var(--space-3); margin-top:var(--space-8); color:var(--text-primary); } .gs-rich-text h1:first-child,.gs-rich-text h2:first-child { margin-top:0; } .gs-rich-text h2 { font-size:var(--text-xl); } .gs-rich-text p { font-size:var(--text-sm); color:var(--text-secondary); line-height:var(--lh-relaxed); margin-bottom:var(--space-4); } .gs-rich-text ul,.gs-rich-text ol { font-size:var(--text-sm); color:var(--text-secondary); line-height:var(--lh-relaxed); margin-bottom:var(--space-4); padding-left:var(--space-6); } .gs-rich-text li { margin-bottom:var(--space-2); } .gs-rich-text a { color:var(--accent); } /* ── Webmail — view page specific ──────────────────────────────────────── */ .wm-header { background:var(--bg-elevated); border-bottom:1px solid var(--border-subtle); height:var(--navbar-height); display:flex; align-items:center; justify-content:space-between; padding:0 var(--space-6); position:sticky; top:0; z-index:var(--z-sticky); } .wm-view-wrap { max-width:900px; margin:0 auto; padding:var(--space-6) var(--space-4); } .wm-nav-actions { margin-bottom:var(--space-4); } .wm-view-card { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--border-radius-lg); overflow:hidden; } .wm-view-card-header { padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--border-subtle); background:var(--bg-elevated); } .wm-view-body { padding:var(--space-6); } .wm-view-body iframe { display:block; width:100%; min-height:400px; border:none; background:#fff; border-radius:var(--border-radius); } .wm-view-body-plain { font-size:var(--text-sm); line-height:var(--lh-relaxed); color:var(--text-secondary); white-space:pre-wrap; } /* ── Webmail — centered login page ─────────────────────────────────────── */ .gs-body-centered { display:flex; flex-direction:column; min-height:100vh; } .gs-body-flex { display:flex; flex-direction:column; min-height:100vh; } .cs-container { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--space-10) var(--space-4); max-width:520px; margin:0 auto; text-align:center; } .cs-brand { margin-bottom:var(--space-6); } .cs-subtitle { font-size:var(--text-sm); color:var(--text-faint); margin-top:var(--space-2); } .cs-divider { width:100%; height:1px; background:var(--border-subtle); margin:var(--space-6) 0; } .cs-description { font-size:var(--text-sm); color:var(--text-secondary); line-height:var(--lh-relaxed); } .divider { height:1px; background:var(--border-subtle); margin:var(--space-4) 0; } /* ── Missing utility classes ────────────────────────────────────────────── */ /* Inline link — used in auth forms */ .gs-link { color:var(--accent); text-decoration:none; transition:var(--transition-fast); font-weight:var(--fw-medium); } .gs-link:hover { color:var(--accent-hover); text-decoration:underline; } /* Checkbox label wrapper — used in register.php */ .gs-checkbox { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--lh-relaxed); user-select: none; } .gs-checkbox input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; min-width: 16px; background: var(--bg-input); border: 2px solid var(--border-color); border-radius: var(--border-radius-xs); cursor: pointer; transition: var(--transition-base); position: relative; margin-top: 3px; } .gs-checkbox input[type="checkbox"]:hover { border-color:var(--accent); } .gs-checkbox input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } .gs-checkbox input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 3px; top: 0px; width: 6px; height: 10px; border: 2px solid #000; border-top: none; border-left: none; transform: rotate(45deg); } /* Warning button — used in dashboard.php awaiting_data action */ .gs-btn-warning { background:var(--warning); color:#000; border-color:var(--warning); font-weight:var(--fw-semi); } .gs-btn-warning:hover { background:var(--warning-hover); border-color:var(--warning-hover); color:#000; } /* ── Admin stat value — warning variant ─────────────────────────────────── */ .gs-stat-value.warning { color:var(--warning); } /* ── Admin quick-action cards (admin/index.php) ─────────────────────────── */ .gs-admin-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); } .gs-admin-action-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--border-radius-lg); padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); text-decoration: none !important; transition: var(--transition-base); color: var(--text-primary); } .gs-admin-action-card:hover { border-color: rgba(255,163,0,0.40); background: var(--bg-raised); transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--text-primary); text-decoration: none !important; } /* Accent variant — "New Product" button */ .gs-admin-action-primary { border-color: rgba(255,163,0,0.40); background: var(--accent-subtle); } .gs-admin-action-primary:hover { background: rgba(255,163,0,0.18); border-color: var(--accent); } .gs-admin-action-icon { font-size: 1.8rem; color: var(--text-faint); line-height: 1; transition: var(--transition-fast); } .gs-admin-action-primary .gs-admin-action-icon { color: var(--accent); } .gs-admin-action-card:hover .gs-admin-action-icon { color: var(--accent); } .gs-admin-action-label { font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--text-primary); }