/* ============================================================ ANDRA2 HOME V1 — FULL WIDTH GAME PORTAL Applies only to .andra-home on /news ============================================================ */ .andra-home{ width:min(1760px,calc(100% - 64px)); margin:0 auto; padding:52px 0 72px; color:#eaf4fb; } .andra-home *{box-sizing:border-box} .andra-home-status{ position:relative; display:grid; grid-template-columns:minmax(320px,.95fr) 1.45fr; gap:42px; align-items:center; margin-bottom:28px; padding:28px 32px; overflow:hidden; border:1px solid rgba(112,167,216,.15); border-radius:12px; background: linear-gradient(rgba(118,236,255,.018) 1px,transparent 1px), linear-gradient(90deg,rgba(118,236,255,.018) 1px,transparent 1px), radial-gradient(circle at 75% 0,rgba(73,132,255,.12),transparent 38%), linear-gradient(180deg,rgba(10,18,29,.96),rgba(6,11,18,.98)); background-size:34px 34px,34px 34px,auto,auto; box-shadow:0 24px 65px rgba(0,0,0,.3); } .andra-home-status:before{content:"";position:absolute;left:0;top:0;width:220px;height:2px;background:linear-gradient(90deg,#76ecff,#6288ff,transparent);box-shadow:0 0 18px rgba(118,236,255,.52)} .andra-home-eyebrow,.andra-home-section-head>div>span,.andra-home-cta>div>span{display:block;margin-bottom:8px;color:#79eaff;font:900 7px Inter,sans-serif;letter-spacing:.24em} .andra-home-status-copy h2{margin:0 0 9px!important;color:#f4f9ff!important;font:700 25px "Cinzel Decorative",serif!important;letter-spacing:.025em} .andra-home-status-copy p{max-width:540px;margin:0;color:#8294a6;font:500 9px/1.65 Inter,sans-serif} .andra-home-status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px} .andra-home-stat{position:relative;min-height:74px;padding:15px;border:1px solid rgba(114,160,202,.12);border-radius:6px;background:rgba(255,255,255,.018)} .andra-home-stat small{display:block;margin-bottom:8px;color:#60798e;font:900 6px Inter,sans-serif;letter-spacing:.14em} .andra-home-stat strong{display:block;overflow:hidden;color:#edf8ff;font:900 10px Inter,sans-serif;text-overflow:ellipsis;white-space:nowrap} .andra-home-stat>i{position:absolute;right:12px;top:13px;width:6px;height:6px;border-radius:50%;background:#69f7b0;box-shadow:0 0 10px #69f7b0} .andra-home-stat-action{display:flex;align-items:center;justify-content:center;padding:0;background:linear-gradient(180deg,rgba(19,105,128,.65),rgba(8,54,71,.78));border-color:rgba(118,236,255,.26)} .andra-home-stat-action a{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:9px;color:#eefdff!important;text-decoration:none!important;font:900 8px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase}.andra-home-stat-action b{color:#8befff} .andra-home-news,.andra-home-ranking,.andra-home-server,.andra-home-cta{ position:relative; overflow:hidden; border:1px solid rgba(112,167,216,.14); border-radius:12px; background: linear-gradient(rgba(118,236,255,.015) 1px,transparent 1px), linear-gradient(90deg,rgba(118,236,255,.015) 1px,transparent 1px), linear-gradient(180deg,rgba(9,17,28,.97),rgba(5,10,17,.99)); background-size:32px 32px,32px 32px,auto; box-shadow:0 24px 70px rgba(0,0,0,.3); } .andra-home-news{padding:30px;margin-bottom:28px} .andra-home-news:before,.andra-home-ranking:before,.andra-home-server:before{content:"";position:absolute;top:0;left:0;width:150px;height:2px;background:linear-gradient(90deg,#76ecff,transparent);box-shadow:0 0 15px rgba(118,236,255,.45)} .andra-home-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px;padding-bottom:17px;border-bottom:1px solid rgba(118,236,255,.08)} .andra-home-section-head h2{margin:0!important;color:#f3f8fd!important;font:700 25px "Cinzel Decorative",serif!important;letter-spacing:.03em} .andra-home-section-head.compact{align-items:center;margin-bottom:15px;padding-bottom:14px} .andra-home-section-head.compact h2{font-size:20px!important} .andra-home-section-head.compact>div>span{font-size:16px;margin-bottom:16px} .andra-home-section-head>a{color:#7f9db2!important;text-decoration:none!important;font:850 7px Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase}.andra-home-section-head>a:hover{color:#aef6ff!important} .andra-home-live{display:flex;align-items:center;gap:7px;color:#718b9e;font:900 7px Inter,sans-serif;letter-spacing:.12em}.andra-home-live i{width:6px;height:6px;border-radius:50%;background:#69f7b0;box-shadow:0 0 10px #69f7b0} .andra-home-news-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(360px,.85fr);gap:16px} .andra-home-featured{min-height:540px} .andra-home-featured-media{position:relative;height:100%;min-height:540px;overflow:hidden;border:1px solid rgba(118,236,255,.15);border-radius:8px;background:radial-gradient(circle at 50% 30%,rgba(53,115,180,.22),transparent 40%),#08111b center/cover no-repeat;box-shadow:0 18px 50px rgba(0,0,0,.26)} .andra-home-featured-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,17,.08),rgba(5,10,17,.35) 45%,rgba(4,8,14,.96) 92%),linear-gradient(90deg,rgba(5,10,17,.4),transparent 60%)} .andra-home-featured-badge{position:absolute;left:22px;top:22px;padding:7px 9px;border:1px solid rgba(118,236,255,.25);border-radius:4px;background:rgba(5,14,23,.7);backdrop-filter:blur(8px);color:#81efff;font:900 6px Inter,sans-serif;letter-spacing:.15em} .andra-home-featured-content{position:absolute;left:28px;right:28px;bottom:27px} .andra-home-featured-content time{display:block;margin-bottom:10px;color:#86a0b4;font:750 7px Inter,sans-serif;letter-spacing:.08em}.andra-home-featured-content time b{margin-left:8px;color:#a5eefa} .andra-home-featured-content h3{max-width:820px;margin:0 0 12px!important;color:#fff!important;font:800 27px/1.2 Inter,sans-serif!important;letter-spacing:-.01em} .andra-home-featured-content p{display:-webkit-box;max-width:790px;margin:0 0 19px;color:#a6b5c4;font:500 10px/1.7 Inter,sans-serif;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden} .andra-home-read{color:#bdeefa;font:900 7px Inter,sans-serif;letter-spacing:.12em}.andra-home-read b{margin-left:7px;color:#76ecff;font-size:16px} .andra-home-news-stack{display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:10px} .andra-home-news-card{display:grid;grid-template-columns:148px 1fr;min-height:126px;overflow:hidden;border:1px solid rgba(115,158,198,.12);border-radius:7px;background:rgba(255,255,255,.015);transition:.22s ease} .andra-home-news-card:hover{transform:translateX(3px);border-color:rgba(118,236,255,.26);background:rgba(118,236,255,.025);box-shadow:0 12px 26px rgba(0,0,0,.18)} .andra-home-news-thumb{min-height:126px;background:#07111b center/cover no-repeat}.andra-home-news-thumb.is-empty{display:grid;place-items:center;background:linear-gradient(135deg,#0b1b2a,#07111b)}.andra-home-news-thumb.is-empty span{color:#315065;font:900 20px "Cinzel Decorative",serif} .andra-home-news-card-content{min-width:0;padding:13px 14px} .andra-home-news-meta{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px}.andra-home-news-meta span,.andra-home-news-meta time{color:#5e8096;font:900 6px Inter,sans-serif;letter-spacing:.10em} .andra-home-news-card h3{display:-webkit-box;margin:0 0 6px!important;color:#eef7fd!important;font:800 11px/1.3 Inter,sans-serif!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .andra-home-news-card p{display:-webkit-box;margin:0;color:#718496;font:500 8px/1.5 Inter,sans-serif;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .andra-home-empty{min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed rgba(118,236,255,.14);border-radius:7px;color:#70879a}.andra-home-empty strong{margin-bottom:7px;color:#e5f4fb} .andra-home-dashboard{display:grid;grid-template-columns:1fr .88fr 1fr;gap:18px;margin-bottom:28px} .andra-home-ranking,.andra-home-server{padding:22px;min-height:395px} .andra-home-rank-list{display:grid;gap:7px} .andra-home-rank-row{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;min-height:54px;padding:0 12px;border:1px solid rgba(114,158,199,.10);border-radius:6px;background:rgba(255,255,255,.017);transition:.2s ease} .andra-home-rank-row:hover{transform:translateX(3px);border-color:rgba(118,236,255,.24);background:rgba(118,236,255,.025)} .andra-home-rank-row.top-1{border-color:rgba(240,203,120,.28);background:linear-gradient(90deg,rgba(240,203,120,.07),rgba(255,255,255,.012))} .andra-home-rank-row.top-2{border-color:rgba(205,221,233,.18)}.andra-home-rank-row.top-3{border-color:rgba(220,152,99,.18)} .andra-home-rank-pos{color:#648298;font:900 9px Inter,sans-serif}.top-1 .andra-home-rank-pos{color:#f0cb78}.top-2 .andra-home-rank-pos{color:#d5e2eb}.top-3 .andra-home-rank-pos{color:#df9b69} .andra-home-rank-main{min-width:0}.andra-home-rank-main strong{display:block;overflow:hidden;color:#edf6fb;font:850 10px Inter,sans-serif;text-overflow:ellipsis;white-space:nowrap}.andra-home-rank-main small{display:block;margin-top:4px;color:#607789;font:800 6px Inter,sans-serif;text-transform:uppercase}.andra-home-rank-main small.red{color:#ff727c}.andra-home-rank-main small.blue{color:#73b8ff}.andra-home-rank-main small.yellow{color:#e9c469} .andra-home-rank-value{color:#9db4c5;font:900 7px Inter,sans-serif;white-space:nowrap}.andra-home-rank-empty{display:grid;place-items:center;min-height:200px;color:#65798b;font:700 8px Inter,sans-serif} .andra-home-server-inner .lane-stat{height:54px!important;margin:0 0 7px!important;padding:0 13px!important;border:1px solid rgba(114,158,199,.10)!important;border-radius:6px!important;background:rgba(255,255,255,.017)!important}.andra-home-server-inner .lane-stat .text{width:100%!important;height:100%;margin:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;color:#8195a7!important;font:700 8px Inter,sans-serif!important}.andra-home-server-inner .lane-stat .text strong{color:#eaf6fb!important;font:900 10px Inter,sans-serif!important} .andra-home-cta{min-height:220px;padding:34px 38px;display:flex;align-items:center;justify-content:space-between;gap:40px;background:radial-gradient(circle at 80% 50%,rgba(53,126,255,.15),transparent 35%),linear-gradient(110deg,rgba(11,24,39,.98),rgba(5,10,17,.99));} .andra-home-cta:before{content:"";position:absolute;left:0;top:0;width:260px;height:2px;background:linear-gradient(90deg,#76ecff,#6288ff,transparent);box-shadow:0 0 18px rgba(118,236,255,.45)} .andra-home-cta h2{margin:0 0 9px!important;color:#fff!important;font:700 29px "Cinzel Decorative",serif!important}.andra-home-cta p{margin:0;color:#8395a7;font:500 9px Inter,sans-serif} .andra-home-cta-actions{display:flex;gap:10px;flex-shrink:0}.andra-home-cta-actions a{min-width:175px;height:51px;display:flex;align-items:center;justify-content:center;border-radius:5px;text-decoration:none!important;font:900 8px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;transition:.22s ease}.andra-home-cta-actions .primary{color:#061119!important;border:1px solid #a8f4ff;background:linear-gradient(180deg,#7ceeff,#35b8d2);box-shadow:0 12px 30px rgba(53,184,210,.16)}.andra-home-cta-actions .secondary{color:#dcebf5!important;border:1px solid rgba(118,236,255,.18);background:#091522}.andra-home-cta-actions a:hover{transform:translateY(-2px);filter:brightness(1.08)} @media(max-width:1250px){ .andra-home{width:calc(100% - 36px)} .andra-home-status{grid-template-columns:1fr} .andra-home-news-layout{grid-template-columns:1fr} .andra-home-news-stack{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto} .andra-home-dashboard{grid-template-columns:1fr 1fr}.andra-home-server{grid-column:1/-1} } @media(max-width:780px){ .andra-home{width:calc(100% - 20px);padding-top:22px} .andra-home-status,.andra-home-news,.andra-home-ranking,.andra-home-server,.andra-home-cta{border-radius:8px} .andra-home-status{padding:20px}.andra-home-status-grid{grid-template-columns:1fr 1fr} .andra-home-news{padding:18px}.andra-home-featured,.andra-home-featured-media{min-height:430px}.andra-home-featured-content{left:18px;right:18px;bottom:18px}.andra-home-featured-content h3{font-size:20px!important} .andra-home-news-stack{grid-template-columns:1fr}.andra-home-news-card{grid-template-columns:110px 1fr} .andra-home-dashboard{grid-template-columns:1fr}.andra-home-server{grid-column:auto} .andra-home-cta{align-items:flex-start;flex-direction:column;padding:26px}.andra-home-cta-actions{width:100%;flex-direction:column}.andra-home-cta-actions a{width:100%} } /* ============================================================ ANDRA2 HOME V1.1 — HORIZONTAL WORLD TELEMETRY ============================================================ */ .andra-home-telemetry{ position:relative; margin:0 0 28px; padding:22px 24px 24px; overflow:hidden; border:1px solid rgba(112,167,216,.14); border-radius:12px; background: linear-gradient(rgba(118,236,255,.015) 1px,transparent 1px), linear-gradient(90deg,rgba(118,236,255,.015) 1px,transparent 1px), radial-gradient(circle at 65% -20%,rgba(73,132,255,.13),transparent 38%), linear-gradient(180deg,rgba(9,17,28,.97),rgba(5,10,17,.99)); background-size:32px 32px,32px 32px,auto,auto; box-shadow:0 24px 70px rgba(0,0,0,.30); } .andra-home-telemetry:before{ content:""; position:absolute; top:0; left:0; width:190px; height:2px; background:linear-gradient(90deg,#76ecff,#6288ff,transparent); box-shadow:0 0 16px rgba(118,236,255,.50); } .andra-home-telemetry .andra-home-section-head{ margin-bottom:16px; } .andra-home-telemetry-inner{ display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:10px!important; } /* statistics.php outputs .lane-stat */ .andra-home-telemetry-inner .lane-stat{ position:relative!important; width:100%!important; min-width:0!important; height:96px!important; margin:0!important; padding:15px 16px!important; overflow:hidden!important; border:1px solid rgba(114,158,199,.12)!important; border-radius:7px!important; background: linear-gradient(145deg,rgba(17,31,46,.82),rgba(8,17,27,.90))!important; box-shadow: inset 0 1px rgba(255,255,255,.018), 0 10px 24px rgba(0,0,0,.12)!important; transition:.22s ease!important; } .andra-home-telemetry-inner .lane-stat:hover{ transform:translateY(-3px)!important; border-color:rgba(118,236,255,.30)!important; background: linear-gradient(145deg,rgba(18,39,56,.90),rgba(8,19,30,.94))!important; box-shadow: 0 14px 30px rgba(0,0,0,.20), 0 0 24px rgba(118,236,255,.05)!important; } .andra-home-telemetry-inner .lane-stat:before{ content:""; position:absolute; left:0; top:15px; bottom:15px; width:2px; background:#76ecff; opacity:.34; box-shadow:0 0 9px rgba(118,236,255,.42); } .andra-home-telemetry-inner .lane-stat .text{ width:100%!important; height:100%!important; margin:0!important; display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:space-between!important; color:#73899c!important; font:800 7px/1.25 Inter,sans-serif!important; letter-spacing:.045em!important; text-transform:uppercase!important; } .andra-home-telemetry-inner .lane-stat .text strong{ display:block!important; min-width:0!important; padding:0!important; border:0!important; background:none!important; color:#edf8ff!important; font:900 24px/1 Inter,sans-serif!important; letter-spacing:-.035em!important; text-align:left!important; text-shadow:0 0 18px rgba(118,236,255,.08)!important; } /* First card = live players */ .andra-home-telemetry-inner .lane-stat:first-child{ border-color:rgba(105,247,176,.20)!important; background: linear-gradient(145deg,rgba(18,54,45,.50),rgba(8,22,23,.92))!important; } .andra-home-telemetry-inner .lane-stat:first-child:before{ background:#69f7b0; opacity:.75; box-shadow:0 0 10px rgba(105,247,176,.55); } .andra-home-telemetry-inner .lane-stat:first-child .text strong{ color:#8fffc4!important; text-shadow:0 0 18px rgba(105,247,176,.18)!important; } /* Accounts */ .andra-home-telemetry-inner .lane-stat:nth-child(2) .text strong{ color:#9beeff!important; } /* Guilds */ .andra-home-telemetry-inner .lane-stat:nth-child(3) .text strong{ color:#b9a5ff!important; } /* Shops */ .andra-home-telemetry-inner .lane-stat:nth-child(4) .text strong{ color:#e2c985!important; } /* 24 hours */ .andra-home-telemetry-inner .lane-stat:nth-child(5) .text strong{ color:#b8d9ff!important; } /* Rankings now use two large columns */ .andra-home-dashboard{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:18px!important; } .andra-home-dashboard .andra-home-ranking{ min-height:395px!important; } .andra-home-rank-row{ min-height:58px!important; } .andra-home-rank-main strong{ font-size:16px!important; } @media(max-width:1050px){ .andra-home-telemetry-inner{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } .andra-home-telemetry-inner .lane-stat:nth-child(4), .andra-home-telemetry-inner .lane-stat:nth-child(5){ min-height:88px!important; } } @media(max-width:780px){ .andra-home-telemetry{ padding:18px!important; } .andra-home-telemetry-inner{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } .andra-home-telemetry-inner .lane-stat{ height:88px!important; } .andra-home-telemetry-inner .lane-stat .text strong{ font-size:20px!important; } .andra-home-dashboard{ grid-template-columns:1fr!important; } } @media(max-width:460px){ .andra-home-telemetry-inner{ grid-template-columns:1fr!important; } } /* ============================================================ ANDRA2 HOME V1.2 — TELEMETRY DIRECTLY UNDER HERO ============================================================ */ /* Home starts tighter below the main hero */ .andra-home{ padding-top:26px!important; } /* Telemetry is the very first dashboard strip */ .andra-home > .andra-home-telemetry:first-child{ margin-top:0!important; margin-bottom:16px!important; padding:15px 18px 17px!important; border-color:rgba(118,236,255,.18)!important; background: linear-gradient(rgba(118,236,255,.014) 1px,transparent 1px), linear-gradient(90deg,rgba(118,236,255,.014) 1px,transparent 1px), radial-gradient(circle at 76% -50%,rgba(86,137,255,.16),transparent 48%), linear-gradient(180deg,rgba(10,19,31,.98),rgba(6,12,20,.99))!important; background-size:34px 34px,34px 34px,auto,auto!important; } /* Compact title row like a real game HUD */ .andra-home > .andra-home-telemetry:first-child .andra-home-section-head{ min-height:30px!important; margin-bottom:11px!important; padding-bottom:10px!important; } .andra-home > .andra-home-telemetry:first-child .andra-home-section-head.compact h2{ font-size:20px!important; letter-spacing:.04em!important; } .andra-home > .andra-home-telemetry:first-child .andra-home-section-head.compact>div>span{ margin-bottom:4px!important; font-size:15px!important; letter-spacing:.22em!important; } /* Five values in one clean line */ .andra-home > .andra-home-telemetry:first-child .andra-home-telemetry-inner{ display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:8px!important; } .andra-home > .andra-home-telemetry:first-child .lane-stat{ height:68px!important; min-height:68px!important; padding:11px 14px!important; border-radius:6px!important; background: linear-gradient(145deg,rgba(18,34,51,.76),rgba(8,17,28,.90))!important; } .andra-home > .andra-home-telemetry:first-child .lane-stat .text{ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; color:#748a9e!important; font-size:16px!important; line-height:1.25!important; letter-spacing:.055em!important; } .andra-home > .andra-home-telemetry:first-child .lane-stat .text strong{ flex:0 0 auto!important; font-size:18px!important; line-height:1!important; letter-spacing:-.02em!important; } .andra-home > .andra-home-telemetry:first-child .lane-stat:before{ top:12px!important; bottom:12px!important; } /* LIVE WORLD immediately follows telemetry */ .andra-home > .andra-home-telemetry:first-child + .andra-home-status{ margin-top:0!important; } /* Keep status card visually connected to telemetry */ .andra-home-status{ margin-bottom:28px!important; } /* Slightly stronger hover, but not too flashy */ .andra-home > .andra-home-telemetry:first-child .lane-stat:hover{ transform:translateY(-2px)!important; box-shadow: 0 12px 28px rgba(0,0,0,.20), 0 0 20px rgba(118,236,255,.045)!important; } /* desktop 1920: telemetry remains one row */ @media(min-width:1200px){ .andra-home > .andra-home-telemetry:first-child .andra-home-telemetry-inner{ grid-template-columns:repeat(5,minmax(0,1fr))!important; } } /* tablet */ @media(max-width:1000px){ .andra-home > .andra-home-telemetry:first-child .andra-home-telemetry-inner{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } .andra-home > .andra-home-telemetry:first-child .lane-stat{ height:72px!important; } } /* mobile */ @media(max-width:650px){ .andra-home{ padding-top:14px!important; } .andra-home > .andra-home-telemetry:first-child{ padding:14px!important; } .andra-home > .andra-home-telemetry:first-child .andra-home-telemetry-inner{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } .andra-home > .andra-home-telemetry:first-child .lane-stat .text{ flex-direction:column!important; align-items:flex-start!important; } .andra-home > .andra-home-telemetry:first-child .lane-stat{ height:80px!important; } } @media(max-width:420px){ .andra-home > .andra-home-telemetry:first-child .andra-home-telemetry-inner{ grid-template-columns:1fr!important; } } /* ============================================================ ANDRA2 HOME V1.3 — TELEMETRY AS COMPACT LIVE-WORLD MENU ============================================================ */ /* Hide previous big telemetry treatment through stronger scoped overrides */ .andra-home-telemetry-menu{ position:relative; display:grid; grid-template-columns:minmax(330px,.9fr) 1.5fr; gap:34px; align-items:center; min-height:132px; margin:0 0 14px; padding:24px 30px; overflow:hidden; border:1px solid rgba(118,236,255,.17); border-radius:12px; background: linear-gradient(rgba(118,236,255,.015) 1px,transparent 1px), linear-gradient(90deg,rgba(118,236,255,.015) 1px,transparent 1px), radial-gradient(circle at 78% -45%,rgba(86,137,255,.16),transparent 48%), linear-gradient(180deg,rgba(10,19,31,.98),rgba(6,12,20,.99)); background-size:34px 34px,34px 34px,auto,auto; box-shadow:0 20px 55px rgba(0,0,0,.26); } .andra-home-telemetry-menu:before{ content:""; position:absolute; left:0; top:0; width:205px; height:2px; background:linear-gradient(90deg,#76ecff,#6288ff,transparent); box-shadow:0 0 16px rgba(118,236,255,.5); } .andra-home-telemetry-copy span{ display:block; margin-bottom:7px; color:#79eaff; font:900 6px Inter,sans-serif; letter-spacing:.24em; } .andra-home-telemetry-copy h2{ margin:0 0 8px!important; color:#f5f9ff!important; font:700 19px "Cinzel Decorative",serif!important; letter-spacing:.025em; } .andra-home-telemetry-copy p{ max-width:430px; margin:0; color:#7890a4; font:500 8px/1.55 Inter,sans-serif; } /* statistics.php becomes horizontal mini-cards */ .andra-home-telemetry-cards{ display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:8px!important; align-items:stretch!important; } /* Direct output from statistics.php */ .andra-home-telemetry-cards .lane-stat{ position:relative!important; width:100%!important; min-width:0!important; height:76px!important; min-height:76px!important; margin:0!important; padding:13px 14px!important; overflow:hidden!important; border:1px solid rgba(115,160,202,.14)!important; border-radius:6px!important; background: linear-gradient(145deg,rgba(18,34,51,.77),rgba(8,17,28,.91))!important; box-shadow: inset 0 1px rgba(255,255,255,.018), 0 9px 20px rgba(0,0,0,.10)!important; transition:.20s ease!important; } .andra-home-telemetry-cards .lane-stat:hover{ transform:translateY(-2px)!important; border-color:rgba(118,236,255,.30)!important; background: linear-gradient(145deg,rgba(21,42,60,.86),rgba(8,19,30,.94))!important; box-shadow: 0 12px 26px rgba(0,0,0,.18), 0 0 18px rgba(118,236,255,.04)!important; } .andra-home-telemetry-cards .lane-stat:before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:2px; background:#76ecff; opacity:.35; box-shadow:0 0 8px rgba(118,236,255,.35); } .andra-home-telemetry-cards .lane-stat .text{ width:100%!important; height:100%!important; margin:0!important; display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:space-between!important; color:#6f879b!important; font:850 6px/1.25 Inter,sans-serif!important; letter-spacing:.05em!important; text-transform:uppercase!important; } .andra-home-telemetry-cards .lane-stat .text strong{ display:block!important; min-width:0!important; padding:0!important; border:0!important; border-radius:0!important; background:none!important; box-shadow:none!important; color:#edf8ff!important; font:900 18px/1 Inter,sans-serif!important; letter-spacing:-.025em!important; text-align:left!important; } /* online */ .andra-home-telemetry-cards .lane-stat:first-child{ border-color:rgba(105,247,176,.20)!important; background: linear-gradient(145deg,rgba(17,54,44,.48),rgba(8,22,23,.92))!important; } .andra-home-telemetry-cards .lane-stat:first-child:before{ background:#69f7b0; opacity:.8; box-shadow:0 0 10px rgba(105,247,176,.55); } .andra-home-telemetry-cards .lane-stat:first-child .text strong{ color:#8fffc4!important; text-shadow:0 0 15px rgba(105,247,176,.16)!important; } /* subtle individual accents */ .andra-home-telemetry-cards .lane-stat:nth-child(2) .text strong{color:#9beeff!important} .andra-home-telemetry-cards .lane-stat:nth-child(3) .text strong{color:#b9a5ff!important} .andra-home-telemetry-cards .lane-stat:nth-child(4) .text strong{color:#e2c985!important} .andra-home-telemetry-cards .lane-stat:nth-child(5) .text strong{color:#b8d9ff!important} .andra-home-telemetry-offline{ grid-column:1/-1; display:flex; align-items:center; justify-content:center; min-height:76px; border:1px solid rgba(255,99,119,.18); border-radius:6px; background:rgba(255,99,119,.035); color:#ff9cab; font:800 8px Inter,sans-serif; } /* visually pair telemetry and LIVE WORLD */ .andra-home-telemetry-menu + .andra-home-status{ margin-top:0!important; } @media(max-width:1250px){ .andra-home-telemetry-menu{ grid-template-columns:1fr; gap:16px; } } @media(max-width:950px){ .andra-home-telemetry-cards{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } } @media(max-width:650px){ .andra-home-telemetry-menu{ padding:18px; } .andra-home-telemetry-cards{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } @media(max-width:420px){ .andra-home-telemetry-cards{ grid-template-columns:1fr!important; } } /* ============================================================ ANDRA2 HOME V1.4 — REAL HORIZONTAL STATISTICS MARKUP ============================================================ */ .andra-home-telemetry-menu{ min-height:132px!important; grid-template-columns:minmax(330px,.78fr) 1.72fr!important; } .andra-home-telemetry-cards{ display:block!important; width:100%!important; } .andra-stats-horizontal{ width:100%; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; } .andra-stat-mini{ position:relative; min-width:0; height:76px; padding:14px 15px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; border:1px solid rgba(115,160,202,.16); border-radius:6px; background:linear-gradient(145deg,rgba(18,34,51,.78),rgba(8,17,28,.91)); box-shadow:inset 0 1px rgba(255,255,255,.02),0 9px 20px rgba(0,0,0,.10); transition:transform .2s ease,border-color .2s ease,background .2s ease; } .andra-stat-mini:before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:2px; background:#76ecff; opacity:.38; box-shadow:0 0 8px rgba(118,236,255,.38); } .andra-stat-mini:hover{ transform:translateY(-2px); border-color:rgba(118,236,255,.32); background:linear-gradient(145deg,rgba(21,42,60,.88),rgba(8,19,30,.95)); } .andra-stat-mini-label{ overflow:hidden; color:#71899d; font:900 6px/1.3 Inter,sans-serif; letter-spacing:.055em; text-transform:uppercase; text-overflow:ellipsis; white-space:nowrap; } .andra-stat-mini-value{ color:#eef8ff; font:900 19px/1 Inter,sans-serif; letter-spacing:-.025em; } .andra-stat-mini-live{ position:absolute; top:13px; right:13px; width:6px; height:6px; border-radius:50%; background:#69f7b0; box-shadow:0 0 10px #69f7b0; } .andra-stat-mini-1{ border-color:rgba(105,247,176,.22); background:linear-gradient(145deg,rgba(17,54,44,.50),rgba(8,22,23,.92)); } .andra-stat-mini-1:before{background:#69f7b0;opacity:.82;box-shadow:0 0 10px rgba(105,247,176,.58)} .andra-stat-mini-1 .andra-stat-mini-value{color:#8fffc4} .andra-stat-mini-2 .andra-stat-mini-value{color:#9beeff} .andra-stat-mini-3 .andra-stat-mini-value{color:#b9a5ff} .andra-stat-mini-4 .andra-stat-mini-value{color:#e2c985} .andra-stat-mini-5 .andra-stat-mini-value{color:#b8d9ff} @media(max-width:1200px){ .andra-home-telemetry-menu{grid-template-columns:1fr!important} } @media(max-width:900px){ .andra-stats-horizontal{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:620px){ .andra-stats-horizontal{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:400px){ .andra-stats-horizontal{grid-template-columns:1fr} } /* ============================================================ ANDRA2 NEWS POPUP ============================================================ */ .andra-news-modal { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 35px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s ease; } .andra-news-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; } /* ------------------------------------------------------------ DARK BACKDROP ------------------------------------------------------------ */ .andra-news-modal-backdrop { position: absolute; inset: 0; background: radial-gradient( circle at 50% 35%, rgba(21, 47, 75, .30), rgba(2, 6, 11, .92) 65% ); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ------------------------------------------------------------ WINDOW ------------------------------------------------------------ */ .andra-news-modal-window { position: relative; z-index: 2; width: min(1100px, 94vw); max-height: 90vh; overflow-x: hidden; overflow-y: auto; border: 1px solid rgba(118, 236, 255, .24); border-radius: 12px; background: linear-gradient( rgba(118, 236, 255, .018) 1px, transparent 1px ), linear-gradient( 90deg, rgba(118, 236, 255, .018) 1px, transparent 1px ), radial-gradient( circle at 90% 0, rgba(77, 125, 255, .13), transparent 32% ), linear-gradient( 180deg, rgba(12, 23, 38, .99), rgba(5, 11, 19, .995) ); background-size: 34px 34px, 34px 34px, auto, auto; box-shadow: 0 45px 130px rgba(0, 0, 0, .72), 0 0 50px rgba(76, 170, 255, .08), inset 0 1px rgba(255, 255, 255, .03); transform: translateY(30px) scale(.97); transition: transform .32s cubic-bezier(.2, .8, .2, 1); } .andra-news-modal.is-open .andra-news-modal-window { transform: translateY(0) scale(1); } /* glowing top rail */ .andra-news-modal-window::before { content: ""; position: absolute; z-index: 10; left: 0; top: 0; width: 260px; height: 2px; background: linear-gradient( 90deg, #8ff4ff, #6689ff 55%, transparent ); box-shadow: 0 0 18px rgba(118, 236, 255, .7); } /* ------------------------------------------------------------ IMAGE ------------------------------------------------------------ */ .andra-news-modal-image { position: relative; width: 100%; height: 430px; background-position: center; background-repeat: no-repeat; background-size: cover; border-bottom: 1px solid rgba(118, 236, 255, .12); } .andra-news-modal-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(4, 9, 15, .04), rgba(4, 9, 15, .10) 45%, rgba(5, 11, 19, .92) 100% ); } /* ------------------------------------------------------------ CONTENT ------------------------------------------------------------ */ .andra-news-modal-content { position: relative; padding: 31px 42px 42px; } /* kicker */ .andra-news-modal-kicker { position: relative; display: inline-block; margin-bottom: 12px; padding-left: 20px; color: #82efff; font-family: Inter, sans-serif; font-size: 17px; font-weight: 900; letter-spacing: .24em; text-transform: uppercase; } .andra-news-modal-kicker::before { content: ""; position: absolute; left: 0; top: 50%; width: 11px; height: 1px; background: #76ecff; box-shadow: 0 0 9px rgba(118, 236, 255, .8); } /* date */ .andra-news-modal-date { margin-bottom: 11px; color: #718ba0; font-family: Inter, sans-serif; font-size: 18px; font-weight: 800; letter-spacing: .10em; } /* headline */ .andra-news-modal-content h2 { max-width: 880px; margin: 0 0 20px !important; color: #f6faff !important; font-family: "Cinzel Decorative", serif !important; font-size: 31px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: .015em !important; text-shadow: 0 8px 30px rgba(0, 0, 0, .7) !important; } /* divider */ .andra-news-modal-content h2::after { content: ""; display: block; width: 95px; height: 1px; margin-top: 18px; background: linear-gradient( 90deg, #76ecff, transparent ); box-shadow: 0 0 10px rgba(118, 236, 255, .32); } /* full news text */ .andra-news-modal-text { max-width: 930px; color: #aabac8; font-family: Inter, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.9; white-space: pre-line; overflow-wrap: break-word; } /* ------------------------------------------------------------ CLOSE BUTTON ------------------------------------------------------------ */ .andra-news-modal-close { position: absolute; z-index: 20; top: 17px; right: 17px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(118, 236, 255, .25); border-radius: 50%; background: rgba(5, 14, 23, .78); backdrop-filter: blur(10px); color: #dffaff; font-size: 24px; font-weight: 300; line-height: 1; cursor: pointer; box-shadow: 0 8px 20px rgba(0, 0, 0, .30); transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; } .andra-news-modal-close:hover { transform: rotate(90deg); border-color: #8ff5ff; background: rgba(15, 54, 72, .92); box-shadow: 0 0 22px rgba(118, 236, 255, .17); } /* ------------------------------------------------------------ "READ NEWS" BUTTON ------------------------------------------------------------ */ .andra-home-read { display: inline-flex !important; align-items: center; gap: 8px; padding: 10px 0; border: 0 !important; outline: 0 !important; background: none !important; color: #bceefa !important; font-family: Inter, sans-serif !important; font-size: 17px !important; font-weight: 900 !important; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: color .2s ease, text-shadow .2s ease; } .andra-home-read b { color: #76ecff; font-size: 18px; transition: transform .2s ease; } .andra-home-read:hover { color: #ffffff !important; text-shadow: 0 0 12px rgba(118, 236, 255, .35); } .andra-home-read:hover b { transform: translate(3px, -2px); } /* small news cards can also be clickable */ .andra-home-news-card.js-news-open { cursor: pointer; } /* ------------------------------------------------------------ SCROLLBAR ------------------------------------------------------------ */ .andra-news-modal-window::-webkit-scrollbar { width: 6px; } .andra-news-modal-window::-webkit-scrollbar-track { background: rgba(5, 12, 20, .7); } .andra-news-modal-window::-webkit-scrollbar-thumb { border-radius: 10px; background: linear-gradient( 180deg, #5ccce4, #4569b6 ); } /* ------------------------------------------------------------ MOBILE ------------------------------------------------------------ */ @media (max-width: 760px) { .andra-news-modal { padding: 12px; } .andra-news-modal-window { width: 100%; max-height: 94vh; border-radius: 8px; } .andra-news-modal-image { height: 250px; } .andra-news-modal-content { padding: 23px 20px 30px; } .andra-news-modal-content h2 { font-size: 21px !important; } .andra-news-modal-text { font-size: 11px; line-height: 1.75; } .andra-news-modal-close { top: 12px; right: 12px; width: 38px; height: 38px; } } /* ============================================================ ANDRA2 — LIVE EVENTS ============================================================ */ .andra-home-events{ position:relative; margin:0 0 14px; padding:24px 30px; overflow:hidden; border:1px solid rgba(118,236,255,.17); border-radius:12px; background: linear-gradient(rgba(118,236,255,.015) 1px,transparent 1px), linear-gradient(90deg,rgba(118,236,255,.015) 1px,transparent 1px), radial-gradient(circle at 82% -40%,rgba(86,137,255,.14),transparent 48%), linear-gradient(180deg,rgba(10,19,31,.98),rgba(6,12,20,.99)); background-size:34px 34px,34px 34px,auto,auto; box-shadow:0 20px 55px rgba(0,0,0,.26); } .andra-home-events:before{ content:""; position:absolute; left:0; top:0; width:205px; height:2px; background:linear-gradient( 90deg, #76ecff, #6288ff, transparent ); box-shadow:0 0 16px rgba(118,236,255,.5); } /* HEADER */ .andra-home-events-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid rgba(118,236,255,.08); } .andra-home-events-copy span{ display:block; margin-bottom:7px; color:#79eaff; font:900 15px Inter,sans-serif; letter-spacing:.22em; } .andra-home-events-copy h2{ margin:0 0 7px!important; color:#f5f9ff!important; font:700 21px "Cinzel Decorative",serif!important; letter-spacing:.025em; } .andra-home-events-copy p{ margin:0; color:#7890a4; font:500 12px/1.55 Inter,sans-serif; } /* LIVE INDICATOR */ .andra-home-events-live{ display:flex; align-items:center; gap:8px; flex-shrink:0; padding:8px 11px; border:1px solid rgba(105,247,176,.16); border-radius:5px; background:rgba(105,247,176,.035); color:#8fffc4; font:900 10px Inter,sans-serif; letter-spacing:.12em; } .andra-home-events-live i{ width:6px; height:6px; border-radius:50%; background:#69f7b0; box-shadow:0 0 10px #69f7b0; } /* EVENTS GRID */ .andra-home-events-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; } /* EVENT CARD */ .andra-home-event-card{ position:relative; min-width:0; height:165px; overflow:hidden; border:1px solid rgba(115,160,202,.15); border-radius:7px; background:#08111b; box-shadow:0 12px 28px rgba(0,0,0,.16); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } .andra-home-event-card:hover{ transform:translateY(-3px); border-color:rgba(118,236,255,.34); box-shadow: 0 17px 35px rgba(0,0,0,.25), 0 0 25px rgba(118,236,255,.045); } /* IMAGE */ .andra-home-event-image{ position:absolute; inset:0; background-position:center; background-repeat:no-repeat; background-size:cover; transition:transform .45s ease; } .andra-home-event-card:hover .andra-home-event-image{ transform:scale(1.045); } /* DARK IMAGE OVERLAY */ .andra-home-event-card:after{ content:""; position:absolute; inset:0; background: linear-gradient( 90deg, rgba(4,10,17,.94) 0%, rgba(4,10,17,.78) 42%, rgba(4,10,17,.28) 100% ), linear-gradient( 180deg, rgba(5,10,17,.08), rgba(5,10,17,.72) ); pointer-events:none; } /* CONTENT */ .andra-home-event-content{ position:absolute; z-index:2; left:19px; right:19px; top:18px; bottom:17px; display:flex; flex-direction:column; justify-content:space-between; } /* STATUS */ .andra-home-event-status{ display:inline-flex; align-items:center; gap:7px; align-self:flex-start; padding:6px 8px; border:1px solid rgba(105,247,176,.20); border-radius:4px; background:rgba(5,20,18,.62); backdrop-filter:blur(7px); color:#8fffc4; font:900 8px Inter,sans-serif; letter-spacing:.11em; } .andra-home-event-status i{ width:5px; height:5px; border-radius:50%; background:#69f7b0; box-shadow:0 0 9px #69f7b0; } /* EVENT NAME */ .andra-home-event-info small{ display:block; margin-bottom:6px; color:#79eaff; font:900 8px Inter,sans-serif; letter-spacing:.15em; } .andra-home-event-info h3{ margin:0 0 10px!important; color:#fff!important; font:800 18px/1.15 Inter,sans-serif!important; text-shadow:0 4px 15px rgba(0,0,0,.75); } /* TIMER */ .andra-home-event-timer{ display:flex; align-items:center; gap:9px; } .andra-home-event-timer span{ color:#7c91a3; font:800 7px Inter,sans-serif; letter-spacing:.11em; } .andra-home-event-timer strong{ color:#dffaff; font:900 14px Inter,sans-serif; letter-spacing:.04em; text-shadow:0 0 12px rgba(118,236,255,.14); } /* EMPTY / INACTIVE */ .andra-home-event-card.is-inactive{ filter:saturate(.45); } .andra-home-event-card.is-inactive .andra-home-event-status{ border-color:rgba(255,255,255,.12); background:rgba(15,18,22,.65); color:#87939d; } .andra-home-event-card.is-inactive .andra-home-event-status i{ background:#65727d; box-shadow:none; } /* RESPONSIVE */ @media(max-width:1100px){ .andra-home-events-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:700px){ .andra-home-events{ padding:18px; } .andra-home-events-head{ align-items:flex-start; flex-direction:column; gap:12px; } .andra-home-events-list{ grid-template-columns:1fr; } .andra-home-event-card{ height:155px; } } @media(max-width:420px){ .andra-home-events-copy h2{ font-size:18px!important; } .andra-home-event-card{ height:145px; } .andra-home-event-info h3{ font-size:16px!important; } } /* ============================================================ ANDRA2 EVENTS — FINAL ADDITIONS ============================================================ */ /* На большом экране можем показать до 4 ивентов в одну строку */ @media(min-width:1350px){ .andra-home-events-list{ grid-template-columns:repeat(4,minmax(0,1fr)); } } /* ============================================================ NO ACTIVE EVENTS ============================================================ */ .andra-home-events-empty{ position:relative; min-height:115px; display:flex; align-items:center; gap:22px; padding:20px 23px; overflow:hidden; border:1px solid rgba(115,160,202,.13); border-radius:7px; background: linear-gradient( 145deg, rgba(15,29,44,.70), rgba(7,15,25,.88) ); } .andra-home-events-empty:before{ content:""; position:absolute; left:0; top:17px; bottom:17px; width:2px; background:#76ecff; opacity:.38; box-shadow: 0 0 10px rgba(118,236,255,.45); } .andra-home-events-empty-icon{ flex:0 0 72px; width:72px; height:72px; display:flex; align-items:center; justify-content:center; border: 1px solid rgba(118,236,255,.13); border-radius:7px; background: linear-gradient( 145deg, rgba(19,43,63,.65), rgba(7,17,28,.90) ); color:#315d74; font: 900 20px "Cinzel Decorative", serif; box-shadow: inset 0 1px rgba(255,255,255,.025); } .andra-home-events-empty-content{ min-width:0; } .andra-home-events-empty-content > small{ display:block; margin-bottom:5px; color:#79eaff; font: 900 7px Inter, sans-serif; letter-spacing:.18em; } .andra-home-events-empty-content h3{ margin:0 0 7px!important; color:#edf8ff!important; font: 800 16px Inter, sans-serif!important; } .andra-home-events-empty-content p{ margin:0; color:#738b9f; font: 600 9px/1.5 Inter, sans-serif; } .andra-home-events-empty-content p strong{ color:#bcefff; font-weight:800; } .andra-home-next-event{ display:flex; align-items:center; gap:18px; margin-top:10px; } .andra-home-next-event > span{ padding:6px 9px; border: 1px solid rgba(118,236,255,.12); border-radius:4px; background: rgba(118,236,255,.025); color:#8da7b9; font: 800 8px Inter, sans-serif; letter-spacing:.05em; } .andra-home-next-event > strong{ color:#8fffc4; font: 900 10px Inter, sans-serif; letter-spacing:.04em; text-shadow: 0 0 13px rgba(105,247,176,.15); } @media(max-width:600px){ .andra-home-events-empty{ align-items:flex-start; } .andra-home-events-empty-icon{ flex-basis:55px; width:55px; height:55px; } .andra-home-next-event{ align-items:flex-start; flex-direction:column; gap:7px; } } .andra-home-events-empty-preview{ flex:0 0 220px; width:220px; height:110px; border:1px solid rgba(118,236,255,.22); border-radius:8px; background-position:center; background-repeat:no-repeat; background-size:cover; box-shadow: inset 0 0 35px rgba(0,0,0,.20), 0 10px 30px rgba(0,0,0,.22), 0 0 20px rgba(118,236,255,.06); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .andra-home-events-empty-preview:hover{ transform:scale(1.025); border-color:rgba(118,236,255,.40); box-shadow: inset 0 0 35px rgba(0,0,0,.16), 0 14px 35px rgba(0,0,0,.30), 0 0 28px rgba(118,236,255,.09); } @media(max-width:600px){ .andra-home-events-empty-preview{ flex:0 0 120px; width:120px; height:85px; } } /* ============================================================ ANDRA2 — CLICKABLE EVENT CARDS ============================================================ */ .andra-home-event-card.is-active{ cursor:pointer; } .andra-home-event-card.is-active:hover{ transform:translateY(-4px); border-color:rgba(118,236,255,.48); box-shadow: 0 20px 45px rgba(0,0,0,.32), 0 0 30px rgba(118,236,255,.08); } .andra-home-event-card.is-active:focus{ outline:none; border-color:rgba(118,236,255,.55); box-shadow: 0 0 0 1px rgba(118,236,255,.18), 0 20px 45px rgba(0,0,0,.32), 0 0 30px rgba(118,236,255,.08); } /* ============================================================ EVENT MODAL ============================================================ */ .andra-event-modal{ position:fixed; inset:0; z-index:999999; display:flex; align-items:center; justify-content:center; padding:30px; opacity:0; visibility:hidden; pointer-events:none; transition: opacity .25s ease, visibility .25s ease; } .andra-event-modal.is-open{ opacity:1; visibility:visible; pointer-events:auto; } .andra-event-modal-backdrop{ position:absolute; inset:0; background: radial-gradient( circle at 50% 35%, rgba(29,71,106,.30), rgba(2,7,13,.94) 68% ); backdrop-filter:blur(12px); } .andra-event-modal-window{ position:relative; z-index:2; width:min(900px,94vw); overflow:hidden; border:1px solid rgba(118,236,255,.25); border-radius:12px; background: linear-gradient(rgba(118,236,255,.015) 1px,transparent 1px), linear-gradient(90deg,rgba(118,236,255,.015) 1px,transparent 1px), linear-gradient(180deg,rgba(11,22,36,.99),rgba(5,11,19,.995)); background-size: 34px 34px, 34px 34px, auto; box-shadow: 0 45px 130px rgba(0,0,0,.75), 0 0 50px rgba(118,236,255,.08); transform: translateY(25px) scale(.975); transition: transform .28s ease; } .andra-event-modal.is-open .andra-event-modal-window{ transform: translateY(0) scale(1); } .andra-event-modal-window:before{ content:""; position:absolute; z-index:10; left:0; top:0; width:240px; height:2px; background: linear-gradient( 90deg, #8ff4ff, #6689ff, transparent ); box-shadow: 0 0 18px rgba(118,236,255,.65); } .andra-event-modal-image{ position:relative; width:100%; height:360px; background-position:center; background-repeat:no-repeat; background-size:cover; border-bottom:1px solid rgba(118,236,255,.12); } .andra-event-modal-image:after{ content:""; position:absolute; inset:0; background: linear-gradient( 180deg, rgba(4,9,15,.03), rgba(4,9,15,.10) 50%, rgba(5,11,19,.92) 100% ); } .andra-event-modal-content{ padding:28px 36px 34px; } .andra-event-modal-content > span{ display:block; margin-bottom:8px; color:#79eaff; font: 900 9px Inter, sans-serif; letter-spacing:.20em; } .andra-event-modal-content h2{ margin:0 0 14px!important; color:#f5f9ff!important; font: 700 28px/1.25 "Cinzel Decorative", serif!important; } .andra-event-modal-content p{ max-width:760px; margin:0; color:#9aafbf; font: 500 13px/1.75 Inter, sans-serif; } .andra-event-modal-bottom{ display:flex; align-items:center; gap:45px; margin-top:26px; padding-top:20px; border-top: 1px solid rgba(118,236,255,.10); } .andra-event-modal-bottom > div{ display:flex; flex-direction:column; gap:6px; } .andra-event-modal-bottom small{ color:#667f92; font: 900 7px Inter, sans-serif; letter-spacing:.13em; } .andra-event-modal-bottom strong{ color:#e9f8ff; font: 900 14px Inter, sans-serif; } .andra-event-modal-bottom strong.is-active{ display:flex; align-items:center; gap:7px; color:#8fffc4; } .andra-event-modal-bottom strong.is-active i{ width:6px; height:6px; border-radius:50%; background:#69f7b0; box-shadow: 0 0 10px #69f7b0; } .andra-event-modal-close{ position:absolute; z-index:20; top:15px; right:15px; width:42px; height:42px; display:flex; align-items:center; justify-content:center; padding:0; border: 1px solid rgba(118,236,255,.28); border-radius:50%; background: rgba(5,14,23,.82); color:#e9fbff; font-size:25px; cursor:pointer; transition: transform .20s ease, border-color .20s ease, background .20s ease; } .andra-event-modal-close:hover{ transform:rotate(90deg); border-color:#8ff5ff; background: rgba(15,54,72,.94); } @media(max-width:700px){ .andra-event-modal{ padding:12px; } .andra-event-modal-image{ height:230px; } .andra-event-modal-content{ padding:22px 20px 27px; } .andra-event-modal-content h2{ font-size:21px!important; } .andra-event-modal-bottom{ align-items:flex-start; flex-direction:column; gap:15px; } }