/* ========================================================== Megatek Brand Theme (preview lab) Override on top of style.css. Activate via: Roles: orange-primary | blue-primary | gradient | split Backgrounds: bg-recolor | bg-reduced | bg-simple ========================================================== */ /* ---------- Brand palette ---------- Orange #ef8812 (rgb 239,136,18) Blue #3498db (rgb 52,152,219) ------------------------------------- */ /* ===== Role: orange primary, blue accent ===== */ body[data-role="orange-primary"] { --accent: #ef8812; --accent-dark: #c46b00; --accent-light: #ffa940; --accent-extra: #ffd07a; --accent-rgb: 239, 136, 18; --secondary: #3498db; --secondary-dark: #2980b9; --secondary-light: #5dade2; --secondary-rgb: 52, 152, 219; } /* ===== Role: blue primary, orange accent ===== */ body[data-role="blue-primary"] { --accent: #3498db; --accent-dark: #2980b9; --accent-light: #5dade2; --accent-extra: #aed6f1; --accent-rgb: 52, 152, 219; --secondary: #ef8812; --secondary-dark: #c46b00; --secondary-light: #ffa940; --secondary-rgb: 239, 136, 18; } /* ===== Role: gradient (orange -> blue) ===== */ body[data-role="gradient"] { --accent: #ef8812; --accent-dark: #c46b00; --accent-light: #ffa940; --accent-extra: #ffd07a; --accent-rgb: 239, 136, 18; --secondary: #3498db; --secondary-dark: #2980b9; --secondary-light: #5dade2; --secondary-rgb: 52, 152, 219; } /* ===== Role: split per section (warm hero/contatti, cool servizi/azienda) ===== */ body[data-role="split"] { --accent: #ef8812; --accent-dark: #c46b00; --accent-light: #ffa940; --accent-extra: #ffd07a; --accent-rgb: 239, 136, 18; --secondary: #3498db; --secondary-dark: #2980b9; --secondary-light: #5dade2; --secondary-rgb: 52, 152, 219; } body[data-role="split"] #servizi, body[data-role="split"] #azienda { --accent: #3498db; --accent-dark: #2980b9; --accent-light: #5dade2; --accent-extra: #aed6f1; --accent-rgb: 52, 152, 219; } /* ========================================================== Refined palettes — dark-native adaptations of the brand (warm + cool kept, but tonalities rebalanced for dark UI) ========================================================== */ /* ===== Refined: amber + deep blue ===== */ body[data-role="refined"] { --accent: #f59e0b; --accent-dark: #b45309; --accent-light: #fbbf24; --accent-extra: #fcd34d; --accent-rgb: 245, 158, 11; --secondary: #2563eb; --secondary-dark: #1e40af; --secondary-light: #60a5fa; --secondary-rgb: 37, 99, 235; } /* ===== Sunset: soft orange + indigo deep (bridge to current theme) ===== */ body[data-role="sunset"] { --accent: #fb923c; --accent-dark: #ea580c; --accent-light: #fdba74; --accent-extra: #fed7aa; --accent-rgb: 251, 146, 60; --secondary: #4f46e5; --secondary-dark: #4338ca; --secondary-light: #818cf8; --secondary-rgb: 79, 70, 229; } /* ===== Tech-warm: ocra/copper + sky cyan ===== */ body[data-role="tech-warm"] { --accent: #d97706; --accent-dark: #92400e; --accent-light: #f59e0b; --accent-extra: #fbbf24; --accent-rgb: 217, 119, 6; --secondary: #0ea5e9; --secondary-dark: #0369a1; --secondary-light: #38bdf8; --secondary-rgb: 14, 165, 233; } /* ===== Cool inversions: same palettes, but cool primary + warm accent ===== */ /* Refined cool: deep blue primary + amber accent */ body[data-role="refined-cool"] { --accent: #2563eb; --accent-dark: #1e40af; --accent-light: #60a5fa; --accent-extra: #93c5fd; --accent-rgb: 37, 99, 235; --secondary: #f59e0b; --secondary-dark: #b45309; --secondary-light: #fbbf24; --secondary-rgb: 245, 158, 11; } /* Sunset cool: indigo primary + soft orange accent (closest to current site) */ body[data-role="sunset-cool"] { --accent: #4f46e5; --accent-dark: #4338ca; --accent-light: #818cf8; --accent-extra: #a5b4fc; --accent-rgb: 79, 70, 229; --secondary: #fb923c; --secondary-dark: #ea580c; --secondary-light: #fdba74; --secondary-rgb: 251, 146, 60; } /* Tech cool: sky primary + ocra accent */ body[data-role="tech-cool"] { --accent: #0ea5e9; --accent-dark: #0369a1; --accent-light: #38bdf8; --accent-extra: #7dd3fc; --accent-rgb: 14, 165, 233; --secondary: #d97706; --secondary-dark: #92400e; --secondary-light: #f59e0b; --secondary-rgb: 217, 119, 6; } /* ===== Legacy: pre-brand indigo + violet (original style.css palette) ===== */ body[data-role="legacy"] { --accent: #818cf8; --accent-dark: #6366f1; --accent-light: #a78bfa; --accent-extra: #c4b5fd; --accent-rgb: 99, 102, 241; --secondary: #a78bfa; --secondary-dark: #8b5cf6; --secondary-light: #c4b5fd; --secondary-rgb: 167, 139, 250; } /* Gradient variant for refined-style roles uses their own accent+secondary */ body[data-role="refined"] .accent-text, body[data-role="sunset"] .accent-text, body[data-role="tech-warm"] .accent-text, body[data-role="refined-cool"] .accent-text, body[data-role="sunset-cool"] .accent-text, body[data-role="tech-cool"] .accent-text { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 50%, var(--accent-extra) 100%); -webkit-background-clip: text; background-clip: text; } /* Subtle secondary touch: service-num uses secondary tint on refined roles */ body[data-role="refined"] .service-num, body[data-role="sunset"] .service-num, body[data-role="tech-warm"] .service-num, body[data-role="refined-cool"] .service-num, body[data-role="sunset-cool"] .service-num, body[data-role="tech-cool"] .service-num { color: var(--secondary); opacity: 0.85; } /* ========================================================== Generic overrides (apply to all roles by reading --accent-rgb) These replace the hardcoded indigo/violet from style.css. ========================================================== */ body[data-role] .accent-text { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 50%, var(--accent-extra, var(--accent-light)) 100%); -webkit-background-clip: text; background-clip: text; } body[data-role] .btn-primary:hover { box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.35); } body[data-role] .service-visual-inner:hover { border-color: rgba(var(--accent-rgb), 0.25); box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.1); } body[data-role] .service-tags span { background: rgba(var(--accent-rgb), 0.1); border-color: rgba(var(--accent-rgb), 0.22); } body[data-role] .timeline::before { background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.32), rgba(var(--accent-rgb), 0.05)); } body[data-role] .timeline-item::before { box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.45); } body[data-role] .social-link:hover { border-color: rgba(var(--accent-rgb), 0.35); } body[data-role] .back-to-top:hover { border-color: rgba(var(--accent-rgb), 0.35); } /* ========================================================== Role-specific specials ========================================================== */ /* --- Gradient role: brand gradients on titles, button, hero line --- */ body[data-role="gradient"] .accent-text { background: linear-gradient(135deg, #ef8812 0%, #f39c12 35%, #3498db 80%, #2980b9 100%); -webkit-background-clip: text; background-clip: text; } body[data-role="gradient"] .btn-primary { background: linear-gradient(135deg, #ef8812 0%, #f39c12 45%, #3498db 100%); } body[data-role="gradient"] .hero-line { background: linear-gradient(90deg, #ef8812, #f39c12, #3498db, #2980b9, #ef8812); background-size: 200% 100%; } /* --- Blue-primary: use orange as micro-accent on service numbers + timeline dot --- */ body[data-role="blue-primary"] .service-num { color: var(--secondary); opacity: 1; } body[data-role="blue-primary"] .timeline-item::before { background: var(--secondary); box-shadow: 0 0 12px rgba(var(--secondary-rgb), 0.45); } /* --- Orange-primary: a touch of blue on partner-section label + timeline pulse --- */ body[data-role="orange-primary"] .partners-label { color: rgba(var(--secondary-rgb), 0.75); } /* ========================================================== Background variants (orbs + hero glow) ========================================================== */ /* Common: rebuild orbs in brand tints */ body.bg-recolor .orb-1 { background: radial-gradient(circle, rgba(239,136,18,0.32) 0%, rgba(239,136,18,0.08) 40%, transparent 65%); } body.bg-recolor .orb-2 { background: radial-gradient(circle, rgba(52,152,219,0.28) 0%, rgba(52,152,219,0.07) 40%, transparent 65%); } body.bg-recolor .orb-3 { background: radial-gradient(circle, rgba(52,152,219,0.2) 0%, transparent 55%); } body.bg-recolor .orb-4 { background: radial-gradient(circle, rgba(239,136,18,0.22) 0%, transparent 55%); } body.bg-recolor .orb-5 { background: radial-gradient(circle, rgba(52,152,219,0.14) 0%, transparent 60%); } body.bg-recolor .hero-content::before { background: radial-gradient(ellipse, rgba(239,136,18,0.22) 0%, rgba(52,152,219,0.08) 45%, transparent 70%); } /* Reduced: keep 2 main orbs only, soften glow */ body.bg-reduced .orb-3, body.bg-reduced .orb-4, body.bg-reduced .orb-5 { display: none; } body.bg-reduced .orb-1 { background: radial-gradient(circle, rgba(239,136,18,0.22) 0%, rgba(239,136,18,0.05) 40%, transparent 65%); } body.bg-reduced .orb-2 { background: radial-gradient(circle, rgba(52,152,219,0.2) 0%, rgba(52,152,219,0.05) 40%, transparent 65%); } body.bg-reduced .hero-content::before { background: radial-gradient(ellipse, rgba(239,136,18,0.14) 0%, rgba(52,152,219,0.05) 45%, transparent 70%); } /* Simple: flat black, no glow at all */ body.bg-simple .orb, body.bg-simple .hero-content::before { display: none; } /* Legacy: restore original multicolor orbs (indigo, purple, cyan, violet, pink) */ body.bg-legacy .orb-1 { background: radial-gradient(circle, rgba(99,102,241,0.3) 0%, rgba(99,102,241,0.08) 40%, transparent 65%); } body.bg-legacy .orb-2 { background: radial-gradient(circle, rgba(168,85,247,0.25) 0%, rgba(168,85,247,0.06) 40%, transparent 65%); } body.bg-legacy .orb-3 { background: radial-gradient(circle, rgba(34,211,238,0.15) 0%, transparent 55%); } body.bg-legacy .orb-4 { background: radial-gradient(circle, rgba(139,92,246,0.2) 0%, transparent 55%); } body.bg-legacy .orb-5 { background: radial-gradient(circle, rgba(236,72,153,0.1) 0%, transparent 60%); } body.bg-legacy .hero-content::before { background: radial-gradient(ellipse, rgba(99,102,241,0.2) 0%, rgba(167,139,250,0.08) 40%, transparent 70%); } /* ========================================================== Theme switcher widget (only on preview page) ========================================================== */ .theme-switcher { position: fixed; top: 84px; right: 16px; z-index: 200; background: rgba(15, 15, 15, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-family: system-ui, -apple-system, sans-serif; color: #fff; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); } .theme-switcher__title { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 2px; } .theme-switcher .ts-row { display: flex; align-items: center; gap: 8px; } .theme-switcher label { letter-spacing: 0.4px; font-size: 11px; color: rgba(255, 255, 255, 0.65); min-width: 54px; } .theme-switcher select { background: rgba(255, 255, 255, 0.06); color: #fff; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 6px; padding: 5px 8px; font-size: 12px; cursor: pointer; min-width: 180px; font-family: inherit; } .theme-switcher select:focus { outline: 1px solid rgba(255, 255, 255, 0.4); outline-offset: 1px; } .theme-switcher__current { font-size: 10px; color: rgba(255, 255, 255, 0.45); letter-spacing: 0.3px; margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } @media (max-width: 600px) { .theme-switcher { top: auto; bottom: 90px; right: 12px; left: 12px; } .theme-switcher select { min-width: 0; flex: 1; } }