/* CSS original do arquivo projeto[4.0].html; regras preservadas. */
:root{ --bg:#04060b; --bg-2:#070b14; --panel:#0b101b; --panel-2:#0e1421; --primary:#7868ff; --primary-2:#9b8cff; --cyan:#25d9ff; --cyan-2:#00a8ff; --green:#25d366; --white:#ffffff; --text:#eef1f7; --muted:#9ca7ba; --muted-2:#727d91; --border:rgba(255,255,255,.08); } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ min-height:100vh; font-family:'Inter',Arial,sans-serif; color:var(--text); overflow-x:hidden; background: radial-gradient( circle at 50% -10%, rgba(120,104,255,.18), transparent 35% ), radial-gradient( circle at 10% 30%, rgba(37,217,255,.05), transparent 25% ), radial-gradient( circle at 90% 60%, rgba(120,104,255,.06), transparent 30% ), linear-gradient( 180deg, #05070d 0%, #04060b 100% ); } body::before{ content:""; position:fixed; inset:0; pointer-events:none; opacity:.20; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size:50px 50px; mask-image: linear-gradient( to bottom, black, transparent 85% ); z-index:-1; } ::-webkit-scrollbar{ width:8px; } ::-webkit-scrollbar-track{ background:#03050a; } ::-webkit-scrollbar-thumb{ background: linear-gradient( 180deg, var(--primary), var(--cyan) ); border-radius:20px; } header{ position:relative; width:100%; padding:26px 20px 22px; display:flex; justify-content:center; align-items:center; border-bottom: 1px solid rgba(255,255,255,.06); background: linear-gradient( 180deg, rgba(12,16,28,.95), rgba(5,7,13,.70) ); backdrop-filter:blur(18px); } header::after{ content:""; position:absolute; left:50%; bottom:-1px; transform:translateX(-50%); width:240px; height:1px; background: linear-gradient( 90deg, transparent, var(--primary), var(--cyan), transparent ); box-shadow: 0 0 15px rgba(120,104,255,.6); } header img{ width:auto; max-width:190px; max-height:80px; object-fit:contain; filter: drop-shadow( 0 0 15px rgba(120,104,255,.55) ) drop-shadow( 0 0 30px rgba(37,217,255,.12) ); transition:.35s ease; } header img:hover{ transform:scale(1.04); filter: drop-shadow( 0 0 20px rgba(120,104,255,.8) ) drop-shadow( 0 0 35px rgba(37,217,255,.2) ); } .wrapper{ width:100%; max-width:1180px; margin:0 auto; padding: 32px 18px 80px; } .project-label{ display:flex; justify-content:center; margin-bottom:14px; } .project-badge{ display:inline-flex; align-items:center; gap:8px; padding: 7px 14px; border: 1px solid rgba(120,104,255,.25); border-radius:100px; background: rgba(120,104,255,.07); color:#bdb6ff; font-size:9px; font-weight:800; letter-spacing:2px; } .project-badge i{ color:var(--cyan); font-size:7px; } .title{ text-align:center; font-family:'Cinzel',serif; font-size: clamp( 26px, 4vw, 42px ); line-height:1.2; font-weight:800; color:#fff; text-shadow: 0 0 20px rgba(120,104,255,.25); } .title span{ background: linear-gradient( 90deg, #ffffff, #bdb5ff, #71e8ff ); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .subtitle{ max-width:760px; margin: 12px auto 0; text-align:center; color:var(--muted); font-size:12px; line-height:1.8; } .top-nav{ display:flex; justify-content:center; margin-top:24px; } .back-button{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding: 0 19px; border-radius:12px; color:#d8deea; text-decoration:none; font-size:10px; font-weight:800; background: linear-gradient( 145deg, rgba(255,255,255,.055), rgba(255,255,255,.018) ); border: 1px solid rgba(255,255,255,.09); transition:.3s ease; } .back-button:hover{ transform:translateY(-2px); color:#fff; border-color: rgba(120,104,255,.40); background: linear-gradient( 145deg, rgba(120,104,255,.13), rgba(37,217,255,.04) ); box-shadow: 0 12px 30px rgba(0,0,0,.30); } .divider{ width:100%; height:1px; margin:40px 0; background: linear-gradient( 90deg, transparent, rgba(120,104,255,.45), rgba(37,217,255,.35), transparent ); } .info-card{ position:relative; padding:30px; border: 1px solid rgba(120,104,255,.16); border-radius:24px; background: radial-gradient( circle at 10% 0%, rgba(120,104,255,.08), transparent 35% ), linear-gradient( 145deg, rgba(13,18,31,.96), rgba(7,10,17,.96) ); box-shadow: 0 25px 70px rgba(0,0,0,.42); } .info-header{ display:flex; align-items:center; gap:15px; margin-bottom:25px; } .info-icon{ width:50px; height:50px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:14px; color:#b8afff; background: linear-gradient( 145deg, rgba(120,104,255,.17), rgba(37,217,255,.05) ); border: 1px solid rgba(120,104,255,.20); box-shadow: 0 0 25px rgba(120,104,255,.08); } .info-header h2{ font-family:'Cinzel',serif; font-size:21px; color:#fff; } .info-header p{ margin-top:5px; color:#778296; font-size:10px; } .accordion-item{ margin-bottom:14px; } .accordion-btn{ position:relative; width:100%; min-height:62px; padding: 15px 18px; display:flex; align-items:center; justify-content:space-between; gap:15px; cursor:pointer; outline:none; color:#e9eaf2; text-align:left; font-family:'Inter',Arial,sans-serif; font-size:11px; font-weight:800; letter-spacing:.5px; border: 1px solid rgba(255,255,255,.07); border-radius:14px; background: linear-gradient( 145deg, rgba(255,255,255,.045), rgba(255,255,255,.012) ); transition:.3s ease; } .accordion-btn::before{ content:""; width:3px; height:25px; flex-shrink:0; border-radius:10px; background: linear-gradient( 180deg, var(--primary), var(--cyan) ); box-shadow: 0 0 12px rgba(120,104,255,.4); } .accordion-btn:hover{ transform:translateY(-2px); color:#fff; border-color: rgba(120,104,255,.35); background: linear-gradient( 145deg, rgba(120,104,255,.10), rgba(255,255,255,.025) ); box-shadow: 0 12px 30px rgba(0,0,0,.25); } .accordion-btn.active{ color:#fff; border-color: rgba(120,104,255,.35); background: linear-gradient( 145deg, rgba(120,104,255,.12), rgba(37,217,255,.025) ); } .accordion-title{ flex:1; } .arrow{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:9px; color:#8f99ab; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.025); transition:.3s ease; } .accordion-btn.active .arrow{ color:#fff; transform:rotate(180deg); border-color: rgba(120,104,255,.25); background: rgba(120,104,255,.10); } .accordion-content{ display:none; margin-top:10px; padding:20px; border: 1px solid rgba(255,255,255,.06); border-radius:14px; background: linear-gradient( 145deg, rgba(5,8,14,.92), rgba(10,14,23,.92) ); animation: contentOpen .25s ease; } .accordion-content.open{ display:block; } @keyframes contentOpen{ from{ opacity:0; transform: translateY(-5px); } to{ opacity:1; transform: translateY(0); } } .cmd-box{ margin:0; white-space:pre-wrap; font-family:'Inter',Arial,sans-serif; line-height:1.75; color:#aab3c3; font-size:11px; } .cmd-box > div{ padding: 2px 0; } .cmd{ color:#71e8ff; font-weight:800; text-shadow: 0 0 10px rgba(37,217,255,.20); } .cmd + span{ color:#858fa2; } .events-grid, .server-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:14px; } .event-card, .server-card{ position:relative; overflow:hidden; padding:18px; border: 1px solid rgba(255,255,255,.06); border-radius:15px; background: linear-gradient( 145deg, rgba(255,255,255,.035), rgba(255,255,255,.012) ); transition:.3s ease; } .event-card::before, .server-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background: linear-gradient( 180deg, var(--primary), var(--cyan) ); opacity:.6; } .event-card:hover, .server-card:hover{ transform: translateY(-3px); border-color: rgba(120,104,255,.28); background: linear-gradient( 145deg, rgba(120,104,255,.075), rgba(255,255,255,.015) ); box-shadow: 0 15px 35px rgba(0,0,0,.28); } .event-title, .server-title{ display:flex; align-items:center; gap:8px; margin-bottom:12px; color:#fff; font-family:'Cinzel',serif; font-size:13px; line-height:1.5; } .event-title{ color:#b9b0ff; } .server-title{ color:#71e8ff; } .event-card .cmd-box, .server-card .cmd-box{ font-size:10px; line-height:1.75; color:#929daf; } .server-card .cmd-box{ white-space:pre-wrap; } .whatsapp-box{ margin-top:20px; padding:18px 20px; display:flex; align-items:center; justify-content:center; gap:10px; text-align:center; border: 1px solid rgba(37,211,102,.12); border-radius:15px; background: rgba(37,211,102,.025); } .whatsapp-box span{ color:#788397; font-size:10px; } .whatsapp-box a{ display:inline-flex; align-items:center; gap:6px; color:#72edaa; text-decoration:none; font-size:10px; font-weight:800; } .whatsapp-box a:hover{ color:#fff; } footer{ margin-top:45px; padding:25px 15px; text-align:center; border-top: 1px solid rgba(255,255,255,.06); color:#606b7d; font-size:10px; line-height:1.7; } footer strong{ color:#9ca7ba; } .whatsapp-float{ position:fixed; right:22px; bottom:22px; z-index:999; width:54px; height:54px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; text-decoration:none; background:#25d366; border: 3px solid rgba(255,255,255,.12); box-shadow: 0 12px 35px rgba(0,0,0,.40), 0 0 25px rgba(37,211,102,.25); transition:.3s ease; } .whatsapp-float i{ font-size:25px; } .whatsapp-float:hover{ transform: translateY(-4px) scale(1.04); box-shadow: 0 15px 40px rgba(0,0,0,.50), 0 0 35px rgba(37,211,102,.40); } .snow{ position:fixed; top:-20px; color:#fff; pointer-events:none; z-index:1000; opacity:.35; animation: snowFall linear forwards; } @keyframes snowFall{ from{ transform: translateY(-20px); } to{ transform: translateY(110vh); } } @media(max-width:800px){ .wrapper{ padding: 28px 12px 70px; } .info-card{ padding:20px 15px; border-radius:20px; } .events-grid, .server-grid{ grid-template-columns:1fr; } .accordion-content{ padding:15px; } .info-header{ align-items:flex-start; } .info-header h2{ font-size:18px; } } @media(max-width:500px){ header{ padding: 22px 15px; } header img{ max-width:155px; } .title{ font-size:25px; } .subtitle{ font-size:10px; } .accordion-btn{ min-height:58px; padding: 13px 12px; font-size:10px; } .accordion-content{ padding:13px; } .cmd-box{ font-size:10px; } .event-card, .server-card{ padding:15px; } .event-title, .server-title{ font-size:12px; } .whatsapp-box{ flex-direction:column; } .whatsapp-float{ right:16px; bottom:16px; } }