/* AEU Showcase — landing di default per i domini nostri senza contenuto. Tema grafico IDENTICO ad aeu-i.com: stesso design system a variabili (48 combinazioni colore: :root + 47 [data-theme="..."], copiate verbatim da aeu-i.com), stesso font Orbitron, stessi bordi/glow. Zero JS bloccante nel render, zero framework. Il tema attivo di default è impostato via in index.php; qui sotto sono presenti TUTTI i temi cosi' un futuro selettore tema (come quello di aeu-i) funziona senza altre modifiche. */ :root { --bg: #ffffff; --bg-secondary: #f2f9ff; --text: #002244; --text-secondary: #003366; --accent: #3399ff; --accent-rgb: 51, 153, 255; --accent-glow: #3399ff66; --accent-glow-strong: #3399ffaa; --accent-glow-text: #003366; --accent-dark: #003366; --border: #3399ff44; --border-strong: #3399ff88; --shadow: #3399ff22; --scroll-track: #e0e0e0; --scroll-thumb: #3399ff; --header-bg: rgba(245, 252, 255, 0.9); --nav-bg: rgba(0, 51, 102, 0.05); --nav-hover-bg: rgba(0, 51, 102, 0.12); --nav-text: #003366; --line-light: #ffffff; --line-dark: #222222; --card-bg: rgba(240, 248, 255, 0.65); --footer-bg: rgba(245, 252, 255, 0.9); } [data-theme="Sunset Industrial"] { --bg: #2f3a3f; --bg-secondary: #39464c; --text: #ebebeb; --text-secondary: #ffc300; --accent: #ff8300; --accent-alt: #ffc300; --accent-dark: #cc6700; --accent-rgb: 255, 131, 0; --accent-glow: #ff830044; --accent-glow-strong: #ff830088; --accent-glow-text: #ff8300; --border: #424d54; --border-strong: #ff830066; --shadow: #ff830022; --scroll-track: #313e44; --scroll-thumb: #ff8300; --header-bg: #2f3a3f; --footer-bg: #39464c; --card-bg: #39464c; --nav-bg: #2f3a3f; --nav-hover-bg: #ff830011; --nav-text: #ffc300; --line-light: #ffc30099; --line-dark: #232b2e; --glow-box: 0 0 14px #ff830044; --glow-text: 0 0 6px #ffc30077; } [data-theme="Sunset Modern Dark"] { --bg: #2f3a3f; --bg-secondary: #38444a; --text: #ebebeb; --text-secondary: #ffc300; --accent: #ff8300; --accent-alt: #ffc300; --accent-dark: #cc6700; --accent-rgb: 255,131,0; --accent-glow: #ff830044; --accent-glow-strong: #ff830088; --accent-glow-text: #ffc300; --border: #424d54; --border-strong: #ff830066; --shadow: #ff830022; --scroll-track: #39464c; --scroll-thumb: #ff8300; --header-bg: #2f3a3f; --footer-bg: #38444a; --card-bg: #38444a; --nav-bg: #2f3a3f; --nav-hover-bg: #ff830012; --nav-text: #ffc300; --line-light: #ffc30099; --line-dark: #232b2e; --glow-box: 0 0 14px #ff830044; --glow-text: 0 0 8px #ffc30088; } [data-theme="Sunset Modern Light"] { --bg: #ebebeb; --bg-secondary: #ffc30022; --text: #2f3a3f; --text-secondary: #ff8300; --accent: #ff8300; --accent-alt: #ffc300; --accent-dark: #b95d00; --accent-rgb: 255,131,0; --accent-glow: #ff830066; --accent-glow-strong: #ff8300bb; --accent-glow-text: #ff8300; --border: #c1b099; --border-strong: #ff830066; --shadow: #ff830022; --scroll-track: #e3dfd4; --scroll-thumb: #ff8300; --header-bg: #ff830012; --footer-bg: #ffc30022; --card-bg: #fff4e3; --nav-bg: #ebebeb; --nav-hover-bg: #ff830010; --nav-text: #ff8300; --line-light: #ffc30099; --line-dark: #2f3a3f; --glow-box: 0 0 14px #ff830033; --glow-text: 0 0 8px #ff830099; } [data-theme="Ebook Paper"] { --bg: #fdf6e3; --bg-secondary: #f9eec3; --text: #2e2b23; --text-secondary: #655c41; --accent: #a46a00; --accent-dark: #825100; --accent-rgb: 164,106,0; --accent-glow: #a46a0033; --accent-glow-strong: #a46a0066; --accent-glow-text: #a46a00; --border: #e8d3a8; --border-strong: #ccb06c; --shadow: #f0e7ca; --header-bg: #f6ecd4; --footer-bg: #f3e3b9; --card-bg: #f9eec3; --nav-bg: #fdf6e3; --nav-hover-bg: #f5e5bc; --nav-text: #825100; --line-light: #e2d5b0; --line-dark: #c1a768; --scroll-track: #f3e3b9; --scroll-thumb: #a46a00; } [data-theme="Ebook Sepia"] { --bg: #f5e5bc; --bg-secondary: #efe2c6; --text: #2e2b23; --text-secondary: #6b624a; --accent: #b47e16; --accent-dark: #7a570a; --accent-rgb: 180,126,22; --accent-glow: #b47e1633; --accent-glow-strong: #b47e1666; --accent-glow-text: #b47e16; --border: #e0ce99; --border-strong: #c5a95c; --shadow: #ebd9ab; --header-bg: #f3deb7; --footer-bg: #e7c97b; --card-bg: #efe2c6; --nav-bg: #f5e5bc; --nav-hover-bg: #e7c97b; --nav-text: #7a570a; --line-light: #dfc98a; --line-dark: #b49754; --scroll-track: #e7c97b; --scroll-thumb: #b47e16; } [data-theme="OLED"] { --bg: #000000; --bg-secondary: #161819; --text: #e6e6e6; --text-secondary: #a7a7a7; --text-dark: #161819; --accent: #30d9fa; --accent-dark: #1785b5; --accent-rgb: 48, 217, 250; --accent-glow: #30d9fa55; --accent-glow-strong: #30d9fabf; --accent-glow-text: #30d9fa; --border: #222b2e; --border-strong: #30d9fa99; --shadow: #30d9fa1a; --scroll-track: #101014; --scroll-thumb: #30d9fa; --header-bg: #070808; --footer-bg: #090909; --card-bg: #161819; --nav-bg: #000000; --nav-hover-bg: #1b2730; --nav-text: #30d9fa; --line-light: #30d9fa44; --line-dark: #191e21; --glow-box: 0 0 20px #30d9fa80; --glow-text: 0 0 10px #30d9fa80; } [data-theme="Executive Dark"] { --bg: #0d1117; --bg-secondary: #161b22; --text: #f0f0f0; --text-secondary: #d0d0d0; --accent: #1f6feb; --accent-dark: #1749a0; --accent-rgb: 31, 111, 235; --accent-glow: #1f6feb33; --accent-glow-strong: #1f6feb77; --accent-glow-text: #1f6feb; --border: #2b313c; --border-strong: #3a3f4b; --shadow: rgba(0, 0, 0, 0.3); --nav-bg: #0d1117; --nav-hover-bg: #1a1f29; --nav-text: #f0f0f0; --card-bg: #161b22; --header-bg: #0d1117; --footer-bg: #0d1117; --scroll-track: #1a1f29; --scroll-thumb: #2d384a; --line-light: #f0f0f055; --line-dark: #0d1117; --glow-box: 0 0 12px rgba(31, 111, 235, 0.3); --glow-text: 0 0 6px rgba(31, 111, 235, 0.4); } [data-theme="Executive Light"] { --bg: #ffffff; --bg-secondary: #f2f4f8; --text: #0d1117; --text-secondary: #4a4a4a; --accent: #1f6feb; --accent-dark: #1749a0; --accent-rgb: 31, 111, 235; --accent-glow: #1f6feb22; --accent-glow-strong: #1f6feb55; --accent-glow-text: #1f6feb; --border: #d8dee9; --border-strong: #c5ccd6; --shadow: rgba(0, 0, 0, 0.08); --nav-bg: #ffffff; --nav-hover-bg: #f0f4ff; --nav-text: #0d1117; --card-bg: #f9fafa; --header-bg: #ffffff; --footer-bg: #f2f4f8; --scroll-track: #f5f5f5; --scroll-thumb: #cfd8e0; --line-light: #dddddd; --line-dark: #ffffff; --glow-box: 0 0 6px rgba(31, 111, 235, 0.2); --glow-text: 0 0 4px rgba(31, 111, 235, 0.3); } [data-theme="dark"] { --bg: #0a0a1a; --bg-secondary: #11182a; --text: #cce7ff; --text-secondary: #99bbcc; --accent: #66b2ff; --accent-rgb: 102, 178, 255; --accent-glow: #66b2ff66; --accent-glow-strong: #66b2ffaa; --accent-glow-text: #66b2ff; --accent-dark: #66b2ff; --border: #66b2ff33; --border-strong: #66b2ff99; --shadow: #66b2ff22; --scroll-track: #0a0a0a; --scroll-thumb: #66b2ff; --header-bg: rgba(10, 20, 40, 0.7); --nav-bg: rgba(51, 102, 153, 0.05); --nav-hover-bg: rgba(51, 102, 153, 0.15); --nav-text: #cceeff; --line-light: #cccccc; --line-dark: #111111; --card-bg: rgba(20, 30, 45, 0.8); --footer-bg: rgba(15, 20, 35, 0.8); } [data-theme="Cyber"] { --bg: #0a0a0a; --bg-secondary: #111; --text: #00f0ff; --text-secondary: #ccf; --accent: #00f0ff; --accent-rgb: 0, 240, 255; --accent-glow: #00f0ff88; --accent-glow-strong: #00f0ff66; --accent-glow-text: #00f0ff; --accent-dark: #00f0ff; --border: #00f0ff55; --border-strong: #00f0ff88; --shadow: #00f0ff22; --scroll-track: #0a0a0a; --scroll-thumb: #00f0ff; --header-bg: #0a0a0a; --line-light: #cccccc; --line-dark: #111111; --nav-bg: #0a0a0a; --nav-hover-bg: rgba(0, 240, 255, 0.12); --nav-text: #00f0ff; --card-bg: #111111; --footer-bg: #0a0a0a; --glow-box: 0 0 18px #00f0ff88; --glow-text: 0 0 6px #00f0ffaa; } [data-theme="Black Red"] { --bg: #000000; --bg-secondary: #121212; --text: #ff4444; --text-secondary: #ff6666; --accent: #ff1a1a; --accent-rgb: 255, 26, 26; --accent-glow: #ff1a1a77; --accent-glow-strong: #ff1a1a99; --accent-glow-text: #ff4d4d; --accent-dark: #cc0000; --border: #ff1a1a44; --border-strong: #ff1a1a99; --shadow: #ff1a1a22; --scroll-track: #1a1a1a; --scroll-thumb: #ff1a1a; --header-bg: #050505; --nav-bg: #000000; --nav-hover-bg: rgba(255, 26, 26, 0.15); --nav-text: #ff4d4d; --line-light: #ff6666; --line-dark: #0f0f0f; --card-bg: #1b1b1b; --footer-bg: #0a0a0a; --glow-box: 0 0 18px #ff1a1a88; --glow-text: 0 0 6px #ff1a1acc; } [data-theme="LimeBlue"] { --bg: #0f1b2c; --bg-secondary: #192b40; --text: #aaff00; --text-secondary: #d6ff66; --accent: #aaff00; --accent-rgb: 170, 255, 0; --accent-glow: #aaff0088; --accent-glow-strong: #aaff0066; --accent-glow-text: #aaff00; --accent-dark: #88cc00; --border: #aaff0055; --border-strong: #aaff0088; --shadow: #aaff0022; --scroll-track: #102030; --scroll-thumb: #aaff00; --header-bg: #0f1b2c; --line-light: #eaffaa; --line-dark: #101010; --nav-bg: #0f1b2c; --nav-hover-bg: rgba(170, 255, 0, 0.12); --nav-text: #aaff00; --card-bg: #111d2b; --footer-bg: #0f1b2c; --glow-box: 0 0 18px #aaff0088; --glow-text: 0 0 6px #aaff00aa; } [data-theme="Charcoal Gold"] { --bg: #121212; --bg-secondary: #1a1a1a; --text: #ffbf00; --text-secondary: #ffe066; --accent: #ffbf00; --accent-rgb: 255, 191, 0; --accent-glow: #ffbf0088; --accent-glow-strong: #ffbf0066; --accent-glow-text: #ffbf00; --accent-dark: #cc9900; --border: #ffbf0055; --border-strong: #ffbf0088; --shadow: #ffbf0022; --scroll-track: #1a1a1a; --scroll-thumb: #ffbf00; --header-bg: #121212; --line-light: #ffeeaa; --line-dark: #1a1a1a; --nav-bg: #121212; --nav-hover-bg: rgba(255, 191, 0, 0.12); --nav-text: #ffbf00; --card-bg: #1e1e1e; --footer-bg: #121212; --glow-box: 0 0 18px #ffbf0088; --glow-text: 0 0 6px #ffbf00aa; } [data-theme="Slate Purple"] { --bg: #1e1f2f; --bg-secondary: #27283d; --text: #cc66ff; --text-secondary: #e0b3ff; --accent: #cc66ff; --accent-rgb: 204, 102, 255; --accent-glow: #cc66ff88; --accent-glow-strong: #cc66ff66; --accent-glow-text: #cc66ff; --accent-dark: #e0b3ff; --border: #cc66ff55; --border-strong: #cc66ff88; --shadow: #cc66ff22; --scroll-track: #222234; --scroll-thumb: #cc66ff; --header-bg: #1e1f2f; --line-light: #f5d6ff; --line-dark: #1a1a2a; --nav-bg: #1e1f2f; --nav-hover-bg: rgba(204, 102, 255, 0.12); --nav-text: #cc66ff; --card-bg: #2a2b3f; --footer-bg: #1e1f2f; --glow-box: 0 0 18px #cc66ff99; --glow-text: 0 0 6px #cc66ffcc; } [data-theme="Sky Blue"] { --bg: #ffffff; --bg-secondary: #f0f8ff; --text: #004080; --text-secondary: #336699; --accent: #3399ff; --accent-rgb: 51, 153, 255; --accent-glow: #3399ff88; --accent-glow-strong: #3399ff66; --accent-glow-text: #004080; --accent-dark: #003366; --border: #3399ff55; --border-strong: #3399ff88; --shadow: #3399ff22; --scroll-track: #e0e0e0; --scroll-thumb: #3399ff; --header-bg: rgba(240, 255, 255, 0.8); --line-light: #ffffff; --line-dark: #222222; --nav-bg: rgba(51, 153, 255, 0.05); --nav-hover-bg: rgba(51, 153, 255, 0.12); --nav-text: #004080; --card-bg: rgba(230, 245, 255, 0.6); --footer-bg: #e0f2ff; --glow-box: 0 0 15px #3399ff88; --glow-text: 0 0 5px #3399ffcc; } [data-theme="Acid Carbon"] { --bg: #1c1c1c; --bg-secondary: #222222; --text: #baff29; --text-secondary: #d7ff5e; --accent: #baff29; --accent-rgb: 186, 255, 41; --accent-glow: #baff2988; --accent-glow-strong: #baff2966; --accent-glow-text: #baff29; --accent-dark: #99dd00; --border: #baff2955; --border-strong: #baff2988; --shadow: #baff2922; --scroll-track: #1a1a1a; --scroll-thumb: #baff29; --header-bg: rgba(20, 20, 20, 0.6); --line-light: #dddddd; --line-dark: #0a0a0a; --nav-bg: rgba(186, 255, 41, 0.05); --nav-hover-bg: rgba(186, 255, 41, 0.12); --nav-text: #baff29; --card-bg: #242424; --footer-bg: #1c1c1c; --glow-box: 0 0 15px #baff29aa; --glow-text: 0 0 8px #baff29cc; } [data-theme="Oceanic Midnight"] { --bg: #011627; --bg-secondary: #022B3A; --text: #E0F7FA; --text-secondary: #B2DFDB; --accent: #2EC4B6; --accent-rgb: 46, 196, 182; --accent-glow: #2EC4B688; --accent-glow-strong: #2EC4B666; --accent-glow-text: #2EC4B6; --accent-dark: #1CA89C; --border: #2EC4B655; --border-strong: #2EC4B688; --shadow: #2EC4B622; --scroll-track: #011627; --scroll-thumb: #2EC4B6; --header-bg: rgba(1, 22, 39, 0.8); --line-light: #BFDDE0; --line-dark: #0A2233; --nav-bg: rgba(46, 196, 182, 0.06); --nav-hover-bg: rgba(46, 196, 182, 0.15); --nav-text: #2EC4B6; --card-bg: rgba(3, 28, 42, 0.85); --footer-bg: rgba(1, 22, 39, 0.85); } [data-theme="Graphite Royal Violet"] { --bg: #1A1A1A; --bg-secondary: #222; --text: #EAEAEA; --text-secondary: #CFCFCF; --accent: #8E44AD; --accent-rgb: 142, 68, 173; --accent-glow: #8E44AD88; --accent-glow-strong: #8E44AD66; --accent-glow-text: #CBA2D8; --accent-dark: #732D91; --border: #8E44AD55; --border-strong: #8E44AD88; --shadow: #8E44AD22; --scroll-track: #1A1A1A; --scroll-thumb: #8E44AD; --header-bg: rgba(26, 26, 26, 0.9); --line-light: #CCCCCC; --line-dark: #101010; --nav-bg: rgba(142, 68, 173, 0.05); --nav-hover-bg: rgba(142, 68, 173, 0.12); --nav-text: #8E44AD; --card-bg: rgba(30, 30, 30, 0.9); --footer-bg: rgba(20, 20, 20, 0.9); } [data-theme="Aurora Gray"] { --bg: #2e2e3a; --bg-secondary: #3b3b4c; --text: #ff4d88; --text-secondary: #ff99bb; --accent: #ff4d88; --accent-rgb: 255, 77, 136; --accent-glow: #ff4d8888; --accent-glow-strong: #ff4d8866; --accent-glow-text: #ff4d88; --accent-dark: #ff99bb; --border: #ff4d8855; --border-strong: #ff4d8888; --shadow: #ff4d8822; --scroll-track: #2b2b35; --scroll-thumb: #ff4d88; --header-bg: rgba(46, 46, 58, 0.8); --line-light: #f0c5d5; --line-dark: #1f1f2c; --nav-bg: rgba(255, 77, 136, 0.05); --nav-hover-bg: rgba(255, 77, 136, 0.12); --nav-text: #ff4d88; --card-bg: rgba(50, 50, 65, 0.9); --footer-bg: rgba(40, 40, 50, 0.9); } [data-theme="Forest Night"] { --bg: #0b2e26; --bg-secondary: #144035; --text: #a8ff60; --text-secondary: #cfff90; --accent: #a8ff60; --accent-rgb: 168, 255, 96; --accent-glow: #a8ff6088; --accent-glow-strong: #a8ff6066; --accent-glow-text: #a8ff60; --accent-dark: #7fbf40; --border: #a8ff6055; --border-strong: #a8ff6088; --shadow: #a8ff6022; --scroll-track: #103b30; --scroll-thumb: #a8ff60; --header-bg: rgba(11, 46, 38, 0.8); --line-light: #dbffc4; --line-dark: #0a1f19; --nav-bg: rgba(168, 255, 96, 0.05); --nav-hover-bg: rgba(168, 255, 96, 0.12); --nav-text: #a8ff60; --card-bg: rgba(20, 55, 40, 0.9); --footer-bg: rgba(15, 40, 30, 0.9); } [data-theme="Coral Reef"] { --bg: #f4f1de; --bg-secondary: #eae6d9; --text: #2a9d8f; --text-secondary: #ff6f61; --accent: #ff6f61; --accent-rgb: 255, 111, 97; --accent-glow: #ff6f6188; --accent-glow-strong: #ff6f6166; --accent-glow-text: #2a9d8f; --accent-dark: #cc564d; --border: #ff6f6155; --border-strong: #ff6f6188; --shadow: #ff6f6122; --scroll-track: #eee8dd; --scroll-thumb: #ff6f61; --header-bg: rgba(255, 255, 255, 0.8); --line-light: #fffaf0; --line-dark: #ddd2c5; --nav-bg: rgba(255, 111, 97, 0.05); --nav-hover-bg: rgba(255, 111, 97, 0.12); --nav-text: #2a9d8f; --card-bg: rgba(255, 255, 255, 0.7); --footer-bg: rgba(244, 241, 222, 0.9); } [data-theme="Tundra Teal"] { --bg: #ffffff; --bg-secondary: #f2f9f9; --text: #003b5c; --text-secondary: #00697c; --accent: #00bfa6; --accent-rgb: 0, 191, 166; --accent-glow: #00bfa688; --accent-glow-strong: #00bfa666; --accent-glow-text: #006f63; --accent-dark: #007b6c; --border: #00bfa655; --border-strong: #00bfa688; --shadow: #00bfa622; --scroll-track: #e6f0f0; --scroll-thumb: #00bfa6; --header-bg: rgba(255, 255, 255, 0.85); --line-light: #cccccc; --line-dark: #004c5c; --nav-bg: rgba(0, 191, 166, 0.04); --nav-hover-bg: rgba(0, 191, 166, 0.1); --nav-text: #006c61; --card-bg: rgba(240, 255, 255, 0.6); --footer-bg: rgba(245, 255, 255, 0.9); } [data-theme="Arctic Ice"] { --bg: #f8fafc; --bg-secondary: #e2e8f0; --text: #1e293b; --text-secondary: #475569; --accent: #3b82f6; --accent-rgb: 59, 130, 246; --accent-glow: #3b82f688; --accent-glow-strong: #3b82f666; --accent-glow-text: #1e3a8a; --accent-dark: #1d4ed8; --border: #3b82f655; --border-strong: #3b82f688; --shadow: #3b82f622; --scroll-track: #e0e7ef; --scroll-thumb: #3b82f6; --header-bg: rgba(255, 255, 255, 0.85); --line-light: #ffffff; --line-dark: #cbd5e1; --nav-bg: rgba(59, 130, 246, 0.05); --nav-hover-bg: rgba(59, 130, 246, 0.12); --nav-text: #1e293b; --card-bg: rgba(255, 255, 255, 0.75); --footer-bg: rgba(248, 250, 252, 0.9); } [data-theme="Espresso Rose"] { --bg: #3e2723; --bg-secondary: #4e342e; --text: #f48fb1; --text-secondary: #f8bbd0; --accent: #f48fb1; --accent-rgb: 244, 143, 177; --accent-glow: #f48fb188; --accent-glow-strong: #f48fb166; --accent-glow-text: #ad1457; --accent-dark: #f8bbd0; --border: #f48fb155; --border-strong: #f48fb188; --shadow: #f48fb122; --scroll-track: #4e342e; --scroll-thumb: #f48fb1; --header-bg: rgba(62, 39, 35, 0.85); --line-light: #ffe4ec; --line-dark: #2e1a18; --nav-bg: rgba(244, 143, 177, 0.05); --nav-hover-bg: rgba(244, 143, 177, 0.12); --nav-text: #f48fb1; --card-bg: rgba(50, 30, 28, 0.9); --footer-bg: rgba(62, 39, 35, 0.95); } [data-theme="Tech Mint"] { --bg: #212121; --bg-secondary: #2c2c2c; --text: #a8ffce; --text-secondary: #d0ffe5; --accent: #a8ffce; --accent-rgb: 168, 255, 206; --accent-glow: #a8ffce88; --accent-glow-strong: #a8ffce66; --accent-glow-text: #a8ffce; --accent-dark: #3ddc97; --border: #a8ffce55; --border-strong: #a8ffce88; --shadow: #a8ffce22; --scroll-track: #2c2c2c; --scroll-thumb: #a8ffce; --header-bg: rgba(33, 33, 33, 0.85); --line-light: #d0ffe5; --line-dark: #1b1b1b; --nav-bg: rgba(168, 255, 206, 0.05); --nav-hover-bg: rgba(168, 255, 206, 0.12); --nav-text: #a8ffce; --card-bg: rgba(30, 30, 30, 0.9); --footer-bg: rgba(33, 33, 33, 0.95); } [data-theme="Solar Storm"] { --bg: #000000; --bg-secondary: #111111; --text: #ffee00; --text-secondary: #ffbb00; --accent: #ff8800; --accent-rgb: 255, 136, 0; --accent-glow: #ff880088; --accent-glow-strong: #ff880066; --accent-glow-text: #ff8800; --accent-dark: #ffbb00; --border: #ff880055; --border-strong: #ff880088; --shadow: #ff880022; --scroll-track: #1a1a1a; --scroll-thumb: #ffaa00; --header-bg: rgba(20, 10, 0, 0.6); --line-light: #ffdd99; --line-dark: #1a1a1a; --nav-bg: rgba(255, 136, 0, 0.05); --nav-hover-bg: rgba(255, 136, 0, 0.12); --nav-text: #ffaa00; --card-bg: rgba(25, 10, 5, 0.85); --footer-bg: rgba(10, 5, 0, 0.85); } [data-theme="Ice Terminal"] { --bg: #fefefe; --bg-secondary: #f2f9ff; --text: #404040; --text-secondary: #333; --accent: #80dfff; --accent-rgb: 128, 223, 255; --accent-glow: #80dfff88; --accent-glow-strong: #80dfff66; --accent-glow-text: #0077aa; --accent-dark: #005577; --border: #80dfff55; --border-strong: #80dfff88; --shadow: #80dfff22; --scroll-track: #e0e0e0; --scroll-thumb: #66cce6; --header-bg: rgba(255, 255, 255, 0.8); --line-light: #ffffff; --line-dark: #cccccc; --nav-bg: rgba(0, 120, 170, 0.05); --nav-hover-bg: rgba(0, 120, 170, 0.12); --nav-text: #005577; --card-bg: rgba(240, 250, 255, 0.8); --footer-bg: rgba(230, 240, 255, 0.9); } [data-theme="Infra Night"] { --bg: #0b0b0f; --bg-secondary: #1a0e1e; --text: #ff0033; --text-secondary: #ff3366; --accent: #9900ff; --accent-rgb: 153, 0, 255; --accent-glow: #9900ff88; --accent-glow-strong: #9900ff66; --accent-glow-text: #cc33ff; --accent-dark: #ff3366; --border: #9900ff55; --border-strong: #9900ffaa; --shadow: #9900ff33; --scroll-track: #1a1a1a; --scroll-thumb: #9900ff; --header-bg: rgba(11, 11, 20, 0.8); --line-light: #cccccc; --line-dark: #101010; --nav-bg: rgba(255, 0, 51, 0.06); --nav-hover-bg: rgba(255, 0, 51, 0.15); --nav-text: #ff0033; --card-bg: rgba(20, 10, 30, 0.85); --footer-bg: rgba(10, 5, 15, 0.85); } [data-theme="Solarized Terminal"] { --bg: #002b36; --bg-secondary: #073642; --text: #b58900; --text-secondary: #93a1a1; --accent: #2aa198; --accent-rgb: 42, 161, 152; --accent-glow: #2aa19888; --accent-glow-strong: #2aa19866; --accent-glow-text: #2aa198; --accent-dark: #93a1a1; --border: #2aa19855; --border-strong: #2aa198aa; --shadow: #2aa19822; --scroll-track: #003845; --scroll-thumb: #2aa198; --header-bg: rgba(0, 43, 54, 0.85); --line-light: #eee8d5; --line-dark: #002b36; --nav-bg: rgba(42, 161, 152, 0.05); --nav-hover-bg: rgba(42, 161, 152, 0.12); --nav-text: #2aa198; --card-bg: rgba(7, 54, 66, 0.8); --footer-bg: rgba(0, 43, 54, 0.85); } [data-theme="Sunset Blaze"] { --bg: #290001; --bg-secondary: #40020a; --text: #ff6f00; --text-secondary: #ffb380; --accent: #ff3e3e; --accent-rgb: 255, 62, 62; --accent-glow: #ff3e3e88; --accent-glow-strong: #ff3e3e66; --accent-glow-text: #ff3e3e; --accent-dark: #cc3300; --border: #ff3e3e55; --border-strong: #ff3e3eaa; --shadow: #ff3e3e22; --scroll-track: #3a0003; --scroll-thumb: #ff3e3e; --header-bg: rgba(41, 0, 1, 0.85); --line-light: #ff9f80; --line-dark: #1a0001; --nav-bg: rgba(255, 62, 62, 0.05); --nav-hover-bg: rgba(255, 62, 62, 0.12); --nav-text: #ff6f00; --card-bg: rgba(64, 2, 10, 0.85); --footer-bg: rgba(41, 0, 1, 0.85); } [data-theme="Arctic Breeze"] { --bg: #f7fafd; --bg-secondary: #e0e5ec; --text: #1a3c57; --text-secondary: #4f7b9f; --accent: #a6d4f2; --accent-rgb: 166, 212, 242; --accent-glow: #a6d4f288; --accent-glow-strong: #a6d4f266; --accent-glow-text: #1a3c57; --accent-dark: #7cb6da; --border: #a6d4f255; --border-strong: #a6d4f288; --shadow: #a6d4f222; --scroll-track: #eaf3fa; --scroll-thumb: #a6d4f2; --header-bg: rgba(255, 255, 255, 0.7); --line-light: #c9d8e5; --line-dark: #e0e5ec; --nav-bg: rgba(166, 212, 242, 0.1); --nav-hover-bg: rgba(166, 212, 242, 0.2); --nav-text: #1a3c57; --card-bg: rgba(255, 255, 255, 0.85); --footer-bg: #f0f4f9; } [data-theme="Eclipse Void"] { --bg: #000000; --bg-secondary: #111111; --text: #e6e6e6; --text-secondary: #aaa; --accent: #5A4FCF; --accent-rgb: 90, 79, 207; --accent-glow: #5a4fcf88; --accent-glow-strong: #5a4fcf66; --accent-glow-text: #5a4fcf; --accent-dark: #3a2fa0; --border: #5a4fcf55; --border-strong: #5a4fcf88; --shadow: #5a4fcf22; --scroll-track: #101010; --scroll-thumb: #5a4fcf; --header-bg: rgba(0, 0, 0, 0.6); --line-light: #444; --line-dark: #000; --nav-bg: rgba(90, 79, 207, 0.08); --nav-hover-bg: rgba(90, 79, 207, 0.2); --nav-text: #d72638; --card-bg: #141414; --footer-bg: #0a0a0a; } [data-theme="Quantum Emerald"] { --bg: #1b1b1b; --bg-secondary: #222; --text: #e0f8ec; --text-secondary: #a3e4d7; --accent: #2ecc71; --accent-rgb: 46, 204, 113; --accent-glow: #2ecc7188; --accent-glow-strong: #2ecc7166; --accent-glow-text: #2ecc71; --accent-dark: #27ae60; --border: #2ecc7155; --border-strong: #2ecc7188; --shadow: #2ecc7122; --scroll-track: #1b1b1b; --scroll-thumb: #2ecc71; --header-bg: rgba(27, 27, 27, 0.6); --line-light: #4f4f4f; --line-dark: #121212; --nav-bg: rgba(46, 204, 113, 0.05); --nav-hover-bg: rgba(46, 204, 113, 0.15); --nav-text: #00b894; --card-bg: #252525; --footer-bg: #1b1b1b; } [data-theme="Noir Rose"] { --bg: #2e2e2e; --bg-secondary: #3a3a3a; --text: #f2f2f2; --text-secondary: #ffe6eb; --accent: #ffb6c1; --accent-rgb: 255, 182, 193; --accent-glow: #ffb6c188; --accent-glow-strong: #ffb6c166; --accent-glow-text: #ffb6c1; --accent-dark: #cc99aa; --border: #ffb6c155; --border-strong: #ffb6c188; --shadow: #ffb6c122; --scroll-track: #2e2e2e; --scroll-thumb: #ffb6c1; --header-bg: rgba(46, 46, 46, 0.6); --line-light: #cccccc; --line-dark: #1e1e1e; --nav-bg: rgba(255, 182, 193, 0.05); --nav-hover-bg: rgba(255, 182, 193, 0.12); --nav-text: #ffb6c1; --card-bg: #383838; --footer-bg: #2e2e2e; } [data-theme="Night Ice"] { --bg: #0b132b; --bg-secondary: #1c2541; --text: #b0c4de; --text-secondary: #dbe9f4; --accent: #b0c4de; --accent-rgb: 176, 196, 222; --accent-glow: #b0c4de88; --accent-glow-strong: #b0c4de66; --accent-glow-text: #b0c4de; --accent-dark: #7f9bad; --border: #b0c4de55; --border-strong: #b0c4deaa; --shadow: #b0c4de22; --scroll-track: #0b132b; --scroll-thumb: #b0c4de; --header-bg: rgba(11, 19, 43, 0.7); --line-light: #cccccc; --line-dark: #0b132b; --nav-bg: rgba(176, 196, 222, 0.05); --nav-hover-bg: rgba(176, 196, 222, 0.12); --nav-text: #b0c4de; --card-bg: #1a2238; --footer-bg: #0b132b; } [data-theme="Inkbyte"] { --bg: #000000; --bg-secondary: #111111; --text: #f8f8f8; --text-secondary: #cccccc; --accent: #f8f8f8; --accent-rgb: 248, 248, 248; --accent-glow: #ffffff22; --accent-glow-strong: #ffffff44; --accent-glow-text: #ffffff; --accent-dark: #cccccc; --border: #ffffff33; --border-strong: #ffffff88; --shadow: #ffffff11; --scroll-track: #0f0f0f; --scroll-thumb: #f8f8f8; --header-bg: rgba(0, 0, 0, 0.7); --line-light: #f0f0f0; --line-dark: #000000; --nav-bg: rgba(255, 255, 255, 0.05); --nav-hover-bg: rgba(255, 255, 255, 0.12); --nav-text: #f8f8f8; --card-bg: #111111; --footer-bg: #000000; } [data-theme="Metal Pulse"] { --bg: #2c2f36; --bg-secondary: #383b42; --text: #ff6f61; --text-secondary: #ff958b; --accent: #ff6f61; --accent-rgb: 255, 111, 97; --accent-glow: #ff6f6188; --accent-glow-strong: #ff6f6166; --accent-glow-text: #ff6f61; --accent-dark: #cc564d; --border: #ff6f6155; --border-strong: #ff6f6188; --shadow: #ff6f6122; --scroll-track: #2c2f36; --scroll-thumb: #ff6f61; --header-bg: rgba(44, 47, 54, 0.7); --line-light: #ffb3a8; --line-dark: #1e1f22; --nav-bg: rgba(255, 111, 97, 0.05); --nav-hover-bg: rgba(255, 111, 97, 0.12); --nav-text: #ff6f61; --card-bg: rgba(50, 53, 60, 0.9); --footer-bg: #2c2f36; } [data-theme="Obsidian Green"] { --bg: #0b0c10; --bg-secondary: #121417; --text: #c5ff00; --text-secondary: #e2ff66; --accent: #c5ff00; --accent-rgb: 197, 255, 0; --accent-glow: #c5ff0088; --accent-glow-strong: #c5ff0066; --accent-glow-text: #c5ff00; --accent-dark: #a3dd00; --border: #c5ff0055; --border-strong: #c5ff0088; --shadow: #c5ff0022; --scroll-track: #0b0c10; --scroll-thumb: #c5ff00; --header-bg: rgba(11, 12, 16, 0.7); --line-light: #f6ffcc; --line-dark: #080a0d; --nav-bg: rgba(197, 255, 0, 0.05); --nav-hover-bg: rgba(197, 255, 0, 0.12); --nav-text: #c5ff00; --card-bg: rgba(20, 22, 28, 0.9); --footer-bg: #0b0c10; } [data-theme="Retro Terminal"] { --bg: #000000; --bg-secondary: #0a0a0a; --text: #33ff33; --text-secondary: #66ff66; --accent: #33ff33; --accent-rgb: 51, 255, 51; --accent-glow: #33ff3388; --accent-glow-strong: #33ff3366; --accent-glow-text: #33ff33; --accent-dark: #00cc00; --border: #33ff3355; --border-strong: #33ff3388; --shadow: #33ff3322; --scroll-track: #000000; --scroll-thumb: #33ff33; --header-bg: rgba(0, 0, 0, 0.8); --line-light: #66ff66; --line-dark: #000000; --nav-bg: rgba(51, 255, 51, 0.05); --nav-hover-bg: rgba(51, 255, 51, 0.12); --nav-text: #33ff33; --card-bg: rgba(10, 10, 10, 0.9); --footer-bg: #000000; } [data-theme="Arctic Snow"] { --bg: #ffffff; --bg-secondary: #f4f4f4; --text: #1c1c1c; --text-secondary: #444; --accent: #80d8ff; --accent-rgb: 128, 216, 255; --accent-glow: #80d8ff55; --accent-glow-strong: #80d8ff88; --accent-glow-text: #80d8ff; --accent-dark: #33bbff; --border: #80d8ff33; --border-strong: #80d8ff88; --shadow: #80d8ff22; --scroll-track: #f0f0f0; --scroll-thumb: #80d8ff; --header-bg: rgba(255, 255, 255, 0.95); --line-light: #cccccc; --line-dark: #eeeeee; --nav-bg: rgba(128, 216, 255, 0.05); --nav-hover-bg: rgba(128, 216, 255, 0.12); --nav-text: #1c1c1c; --card-bg: rgba(250, 250, 250, 0.85); --footer-bg: rgba(245, 245, 245, 0.9); } [data-theme="Sandstone Glow"] { --bg: #faf3e0; --bg-secondary: #f0e8d0; --text: #3e2f1c; --text-secondary: #6b5842; --accent: #ff9900; --accent-rgb: 255, 153, 0; --accent-glow: #ff990055; --accent-glow-strong: #ff990088; --accent-glow-text: #ff9900; --accent-dark: #cc7a00; --border: #ff990033; --border-strong: #ff990088; --shadow: #ff990022; --scroll-track: #f5e9d6; --scroll-thumb: #ff9900; --header-bg: rgba(250, 243, 224, 0.95); --line-light: #ddd0b8; --line-dark: #f0e0c8; --nav-bg: rgba(255, 153, 0, 0.05); --nav-hover-bg: rgba(255, 153, 0, 0.12); --nav-text: #3e2f1c; --card-bg: rgba(255, 250, 240, 0.85); --footer-bg: rgba(245, 230, 210, 0.9); } [data-theme="Lavender Haze"] { --bg: #f5f0fa; --bg-secondary: #ece2f6; --text: #4b375d; --text-secondary: #7e6990; --accent: #b388eb; --accent-rgb: 179, 136, 235; --accent-glow: #b388eb55; --accent-glow-strong: #b388eb88; --accent-glow-text: #b388eb; --accent-dark: #9a6fd8; --border: #b388eb33; --border-strong: #b388eb88; --shadow: #b388eb22; --scroll-track: #f0e6f8; --scroll-thumb: #b388eb; --header-bg: rgba(245, 240, 250, 0.95); --line-light: #d8cfe5; --line-dark: #e6d8f0; --nav-bg: rgba(179, 136, 235, 0.05); --nav-hover-bg: rgba(179, 136, 235, 0.12); --nav-text: #4b375d; --card-bg: rgba(250, 245, 255, 0.85); --footer-bg: rgba(240, 230, 250, 0.9); } [data-theme="Mint Cloud"] { --bg: #f6fffb; --bg-secondary: #e3faf2; --text: #005344; --text-secondary: #338c7a; --accent: #44d7b6; --accent-rgb: 68, 215, 182; --accent-glow: #44d7b655; --accent-glow-strong: #44d7b688; --accent-glow-text: #44d7b6; --accent-dark: #2cb499; --border: #44d7b633; --border-strong: #44d7b688; --shadow: #44d7b622; --scroll-track: #ecfdf8; --scroll-thumb: #44d7b6; --header-bg: rgba(246, 255, 251, 0.95); --line-light: #d1f1e9; --line-dark: #e0f9f3; --nav-bg: rgba(68, 215, 182, 0.05); --nav-hover-bg: rgba(68, 215, 182, 0.12); --nav-text: #005344; --card-bg: rgba(240, 255, 250, 0.85); --footer-bg: rgba(224, 252, 246, 0.9); } [data-theme="Sunrise Shell"] { --bg: #fff9f0; --bg-secondary: #fff2e0; --text: #7b3e19; --text-secondary: #aa6841; --accent: #ffb347; --accent-rgb: 255, 179, 71; --accent-glow: #ffb34755; --accent-glow-strong: #ffb34788; --accent-glow-text: #ff8c42; --accent-dark: #e68a00; --border: #ffb34733; --border-strong: #ffb34788; --shadow: #ffb34722; --scroll-track: #fff0e0; --scroll-thumb: #ffb347; --header-bg: rgba(255, 249, 240, 0.95); --line-light: #ffddb3; --line-dark: #ffe5cc; --nav-bg: rgba(255, 179, 71, 0.05); --nav-hover-bg: rgba(255, 179, 71, 0.12); --nav-text: #7b3e19; --card-bg: rgba(255, 239, 219, 0.9); --footer-bg: rgba(255, 245, 232, 0.95); } [data-theme="Pearl Mist"] { --bg: #fdfdfd; --bg-secondary: #f6f6f6; --text: #4c4c4c; --text-secondary: #7a7a7a; --accent: #b2bec3; --accent-rgb: 178, 190, 195; --accent-glow: #b2bec355; --accent-glow-strong: #b2bec388; --accent-glow-text: #7f8c8d; --accent-dark: #95a5a6; --border: #b2bec333; --border-strong: #b2bec388; --shadow: #b2bec322; --scroll-track: #f0f0f0; --scroll-thumb: #b2bec3; --header-bg: rgba(253, 253, 253, 0.95); --line-light: #dedede; --line-dark: #eaeaea; --nav-bg: rgba(178, 190, 195, 0.05); --nav-hover-bg: rgba(178, 190, 195, 0.12); --nav-text: #4c4c4c; --card-bg: rgba(250, 250, 250, 0.9); --footer-bg: rgba(248, 248, 248, 0.95); } [data-theme="Mango Cream"] { --bg: #fff9f0; --bg-secondary: #fff3e0; --text: #6e3b0d; --text-secondary: #a65c24; --accent: #ffb347; --accent-rgb: 255, 179, 71; --accent-glow: #ffb34766; --accent-glow-strong: #ffb347aa; --accent-glow-text: #e67e22; --accent-dark: #cc7722; --border: #ffb34744; --border-strong: #ffb34788; --shadow: #ffb34733; --scroll-track: #f5e5d4; --scroll-thumb: #ffb347; --header-bg: rgba(255, 249, 240, 0.95); --line-light: #ffe6c7; --line-dark: #fbe0b8; --nav-bg: rgba(255, 179, 71, 0.05); --nav-hover-bg: rgba(255, 179, 71, 0.15); --nav-text: #6e3b0d; --card-bg: rgba(255, 243, 221, 0.9); --footer-bg: rgba(255, 239, 210, 0.95); } [data-theme="Mint Snow"] { --bg: #f4fffa; --bg-secondary: #e9fcf5; --text: #1a3c34; --text-secondary: #3a6b5a; --accent: #3ed598; --accent-rgb: 62, 213, 152; --accent-glow: #3ed59866; --accent-glow-strong: #3ed598aa; --accent-glow-text: #2ecc91; --accent-dark: #25a37a; --border: #3ed59844; --border-strong: #3ed59888; --shadow: #3ed59833; --scroll-track: #e0f5ed; --scroll-thumb: #3ed598; --header-bg: rgba(244, 255, 250, 0.95); --line-light: #d1f7e9; --line-dark: #c4ebdd; --nav-bg: rgba(62, 213, 152, 0.05); --nav-hover-bg: rgba(62, 213, 152, 0.15); --nav-text: #1a3c34; --card-bg: rgba(230, 255, 246, 0.9); --footer-bg: rgba(220, 250, 240, 0.95); } /* ========================================================================== COMPONENT LAYER — header / nav / hero / card / insights / footer Ricostruito sullo stile reale di aeu-i.com (vedi header/btn/card/footer in aeui-style.css): Orbitron ovunque, bordi+glow color-mix dagli accent, card in --card-bg, bottoni "glassy" con bordo pieno + glow, header sticky con blur, footer con border-top + glow. NIENTE colori hardcoded: ogni tinta viene da var(--token) definito sopra (:root + [data-theme]). Le uniche variabili locali qui sotto sono di GEOMETRIA (radius/gap/font stack), non di colore, quindi non violano la regola del design system. ========================================================================== */ /* ========================================================================== Webfont self-hosted, identici ad aeu-i.com: Plus Jakarta Sans (corpo) + Sora (titoli/eyebrow/logo). Sono font VARIABILI (un file copre tutti i pesi 400–800) → 4 woff2 in totale (~86 KB), niente dipendenza esterna, niente chiamata a Google Fonts (privacy + velocità, regola 10e). URL relativi al CSS: showcase.css è servito da /aeu-assets/, i font da /aeu-assets/fonts/. ========================================================================== */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/plus-jakarta-sans-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/sora-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/sora-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } *, *::before, *::after { box-sizing: border-box; } :root { --radius: 18px; /* card, come aeu-i (border-radius:18px) */ --radius-sm: 10px; /* input/small */ --radius-pill: 999px; /* bottoni a pillola, come aeu-i */ --gap: clamp(1rem, 2.5vw, 2rem); --maxw: 1180px; /* stack tipografico identico ad aeu-i: Plus Jakarta Sans (corpo) + Sora (display) */ --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Sora', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* overflow-x:clip su ENTRAMBI html+body: gli elementi .reveal-left/.reveal-right (sotto) si spostano di transform:translateX(±42px) prima di entrare in viewport — su mobile questo sporgeva oltre il bordo e, siccome solo clippava l'asse X, restava scrollabile lateralmente di quel tanto (bug confermato dal vivo: window.scrollTo(x,0) spostava scrollX di 26px). */ html { scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.65; color: var(--text); background: linear-gradient(160deg, var(--bg), var(--bg-secondary)); -webkit-font-smoothing: antialiased; position: relative; overflow-x: clip; } /* alone atmosferico radiale, come body::before di aeu-i */ body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(1200px 600px at 70% -10%, var(--accent-glow), transparent 70%); opacity: .12; z-index: -1; pointer-events: none; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img, svg { max-width: 100%; height: auto; } /* Come aeu-i: Sora (--font-display) su TUTTI i titoli, eyebrow e wordmark; il corpo resta Plus Jakarta Sans (--font). letter-spacing -0.02em = firma tipografica di aeu-i sugli heading Sora. */ .brand-name, .eyebrow, .hero h1, h1, h2, h3, .section-head h2, .card h3, .article-head h1 { font-family: var(--font-display); letter-spacing: -0.02em; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } .skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: 1rem; background: var(--accent); /* --accent e --bg sono per costruzione a contrasto reciproco in ogni tema */ color: var(--bg); padding: .5rem 1rem; border-radius: var(--radius-sm); z-index: 100; } /* Scrollbar tematizzata come aeu-i */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: 6px; } ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 6px; box-shadow: 0 0 10px var(--accent-glow); border: 2px solid var(--bg-secondary); } ::-webkit-scrollbar-thumb:hover { background: var(--accent-glow-text); } html { scrollbar-color: var(--accent) var(--bg-secondary); scrollbar-width: thin; } /* ---------------- Header ---------------- */ .site-header { position: sticky; top: 0; z-index: 20; background: var(--header-bg, var(--bg)); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--border); box-shadow: 0 6px 26px var(--shadow); /* sobrio come aeu-i, niente glow neon */ } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .7rem; } .brand { display: flex; align-items: center; gap: .7rem; font-weight: 700; font-size: 1.3rem; letter-spacing: .5px; color: var(--text); } .brand-logo { display: inline-flex; flex: 0 0 auto; width: 42px; } .brand-logo svg { width: 100%; height: auto; display: block; } .nav a { color: var(--nav-text); margin-left: .5rem; font-weight: 600; padding: .55rem .9rem; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--nav-bg); transition: all .25s ease; } .nav a:hover { background: var(--nav-hover-bg); border-color: var(--accent-glow); box-shadow: 0 0 15px var(--accent-glow); color: var(--accent); text-decoration: none; } /* selettore lingua (multilingue) */ .lang-switch { position: relative; display: inline-block; margin-left: .5rem; } .lang-current { font-family: var(--font); font-weight: 700; color: var(--nav-text); padding: .55rem .8rem; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--nav-bg); cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; transition: all .25s ease; } .lang-current:hover, .lang-switch.open .lang-current { background: var(--nav-hover-bg); border-color: var(--accent-glow); color: var(--accent); } .lang-caret { font-size: .7em; opacity: .8; } .lang-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 160px; list-style: none; margin: 0; padding: 6px; z-index: 30; background: var(--header-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: 0 10px 30px var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease; } /* riempie il vuoto di 6px tra il bottone e il menu, così spostando il mouse verso una voce l'hover NON si interrompe (il menu non si richiude prima del clic) */ .lang-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; } .lang-switch:hover .lang-menu, .lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); } .lang-menu a { display: block; padding: .5rem .7rem; border-radius: 6px; color: var(--nav-text); font-weight: 600; font-size: .92rem; } .lang-menu a:hover { background: var(--nav-hover-bg); color: var(--accent); text-decoration: none; } .lang-menu a[aria-current="true"] { color: var(--accent); background: var(--nav-bg); } @media (max-width: 640px) { .nav { display: flex; gap: .3rem; } .nav a { display: none; } .lang-switch { display: inline-block; margin-left: 0; } } /* ---------------- Hero ---------------- */ .hero { padding-block: clamp(3rem, 9vw, 6.5rem); text-align: center; position: relative; } .eyebrow { display: inline-block; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: .78rem; color: var(--accent); border: 1px solid var(--border-strong); border-radius: 999px; padding: .35rem 1.1rem; margin-bottom: 1.5rem; } .hero h1 { font-size: clamp(2.1rem, 5.6vw, 3.7rem); line-height: 1.1; margin: 0 0 1rem; font-weight: 800; line-height: 1.08; } .hero h1 .accent { color: var(--accent); } .hero p.lead { font-size: clamp(1.02rem, 2.3vw, 1.3rem); color: var(--text-secondary); max-width: 50ch; margin: 0 auto 2rem; } .cta-row { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; } .btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font); font-weight: 700; padding: .85rem 1.7rem; border-radius: var(--radius-pill); /* pillola, come aeu-i */ border: 2px solid var(--accent); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; } /* aeu-i v44: primario PIENO accent, testo sul colore di sfondo, glow leggero */ .btn-primary { background: var(--accent); color: var(--bg); box-shadow: 0 0 18px var(--accent-glow); } .btn-primary:hover { background: var(--accent-glow); color: var(--accent); box-shadow: 0 0 30px var(--accent-glow-strong); transform: translateY(-2px); text-decoration: none; } /* aeu-i secondario: trasparente, bordo neutro, hover → accent con velo 10% */ .btn-ghost { border-color: var(--border-strong); color: var(--text); background: transparent; } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); text-decoration: none; } /* ---------------- Sections ---------------- */ section { padding-block: clamp(2.5rem, 7vw, 4.5rem); } .section-head { text-align: center; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); } .section-head h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); margin: 0 0 .5rem; font-weight: 800; color: var(--text); } .section-head p { color: var(--text-secondary); margin: 0 auto; max-width: 54ch; } /* ---------------- Service cards ---------------- */ /* card in largo, una sopra l'altra (niente colonne affiancate) */ .grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); } .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.8rem; display: flex; flex-direction: column; box-shadow: 0 1px 0 rgba(255, 255, 255, .02), 0 22px 55px var(--shadow); /* hairline + deep soft, come aeu-i */ transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; } .card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 32px 74px var(--shadow); } /* header della card: icona a sinistra, nome + tagline accanto (in riga) */ .card-head { display: flex; align-items: center; gap: 18px; margin-bottom: 1.15rem; } .card .icon { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; background: var(--nav-bg); border: 1px solid var(--border); color: var(--accent); } .card-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .card h3 { margin: 0; font-size: 1.4rem; color: var(--text); } .card .tag { color: var(--accent); font-weight: 700; margin: 0; font-size: .92rem; } .card p.desc { color: var(--text-secondary); margin: 0 0 1.15rem; } /* feature su più colonne per riempire la larghezza (niente spazi vuoti) */ .card ul { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); column-gap: 1.6rem; row-gap: .6rem; } .card ul li { position: relative; padding-left: 1.6rem; color: var(--text); font-size: .96rem; } .card ul li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent); font-weight: 800; } .card .card-cta { margin-top: auto; font-weight: 700; color: var(--accent); } .card .card-cta:hover { color: var(--accent-dark); } /* ---------------- Insights (news feed) ---------------- */ .insights .feed { display: grid; grid-template-columns: 1fr; gap: var(--gap); } /* News come lista uniforme: thumbnail a sinistra + testo a destra, stessa altezza per ogni riga → un gruppo ordinato in colonna (niente item sparsi). */ .insights .item { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1.1rem 1.25rem; box-shadow: 0 6px 20px var(--shadow); display: grid; grid-template-columns: 210px 1fr; gap: 20px; align-items: center; } .insights .item .item-body { min-width: 0; } .insights .item .item-body:only-child { grid-column: 1 / -1; } /* senza thumb: testo pieno */ .insights .item time { color: var(--text-secondary); font-size: .82rem; } .insights .item h4 { margin: .3rem 0 .5rem; font-size: 1.12rem; line-height: 1.3; color: var(--text); } .insights .item p { color: var(--text-secondary); font-size: .93rem; margin: 0 0 .6rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .insights .item .src { font-size: .82rem; color: var(--accent); font-weight: 600; } @media (max-width: 640px) { .insights .item { grid-template-columns: 1fr; } } /* ---------------- Contact ---------------- */ #contact .cta-row .btn-ghost { font-weight: 700; } /* ---------------- Footer ---------------- */ .site-footer { border-top: 1px solid var(--border-strong); background: var(--footer-bg, var(--bg)); box-shadow: 0 0 20px var(--shadow); padding-block: 2.4rem; color: var(--text-secondary); } .site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; } .site-footer a { color: var(--text-secondary); } .site-footer a:hover { color: var(--accent); text-decoration: underline; } .foot-links { display: flex; flex-wrap: wrap; gap: 1rem; } .foot-sign { font-weight: 700; color: var(--accent); letter-spacing: .3px; } /* ---------------- Responsive ---------------- */ /* NB: la visibilità di .nav <640px (link nascosti, switch lingua visibile) è già gestita sopra, nel componente Header — non ridefinirla qui: un vecchio `.nav { display:none }` duplicato in questo blocco vinceva in cascata su quella regola e nascondeva ANCHE lo switch lingua su mobile (nessun modo di cambiare lingua né di navigare), bug confermato dal vivo. */ @media (max-width: 640px) { body { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto; } /* Il logo SVG animato è inline nel markup (classi .line1/.line2/.cls-flag definite nel proprio