|
|
| Line 1: |
Line 1: |
|
| |
|
| /* ── Ore cards ── */
| |
| .ore-card-common{
| |
| background:linear-gradient(135deg,#0d1117 0%,#12191f 50%,#0a1016 100%);
| |
| border:1px solid #37474f;border-radius:10px;
| |
| padding:18px;cursor:default;
| |
| transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
| |
| animation:ore-pulse-common 3s ease-in-out infinite;
| |
| }
| |
| .ore-card-common:hover{
| |
| transform:translateY(-6px);
| |
| border-color:#78909c;
| |
| box-shadow:0 12px 36px rgba(96,125,139,.45);
| |
| animation:none;
| |
| }
| |
| .ore-card-epic{
| |
| background:linear-gradient(135deg,#0d0f07 0%,#141209 50%,#0a0c06 100%);
| |
| border:1px solid #7c5c00;border-radius:10px;
| |
| padding:18px;cursor:default;
| |
| transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
| |
| animation:ore-pulse-epic 2.5s ease-in-out infinite;
| |
| }
| |
| .ore-card-epic:hover{
| |
| transform:translateY(-6px);
| |
| border-color:#ffd54f;
| |
| box-shadow:0 12px 36px rgba(255,193,7,.35);
| |
| animation:none;
| |
| }
| |
|
| |
| /* ── Tier nodes ── */
| |
| .tier-node{
| |
| display:inline-flex;flex-direction:column;align-items:center;gap:6px;
| |
| cursor:default;
| |
| }
| |
| .tier-orb{
| |
| width:64px;height:64px;border-radius:50%;
| |
| display:flex;align-items:center;justify-content:center;
| |
| font-size:22px;font-weight:900;
| |
| transition:transform .25s ease,filter .25s ease;
| |
| }
| |
| .tier-orb:hover{transform:scale(1.15);filter:brightness(1.3);}
| |
| .tier-orb.t-low{
| |
| background:radial-gradient(circle,#1b5e20 0%,#0a1a0a 100%);
| |
| border:2px solid #66bb6a;
| |
| animation:tier-low 3s ease-in-out infinite;
| |
| }
| |
| .tier-orb.t-deep{
| |
| background:radial-gradient(circle,#5c3200 0%,#1a0e00 100%);
| |
| border:2px solid #ffa726;
| |
| animation:tier-deep 3s ease-in-out infinite;
| |
| }
| |
| .tier-orb.t-guardian{
| |
| background:radial-gradient(circle,#5c0000 0%,#1a0000 100%);
| |
| border:2px solid #ef5350;
| |
| animation:tier-guardian 2.5s ease-in-out infinite;
| |
| }
| |
|
| |
| /* ── Connector track ── */
| |
| .field-track{
| |
| flex:1;height:4px;border-radius:2px;
| |
| background:linear-gradient(90deg,#26c6da,#0097a7,#26c6da);
| |
| background-size:200% 100%;
| |
| animation:track-cyan 2s linear infinite;
| |
| }
| |
|
| |
| /* ── MVP cards ── */
| |
| .mvp-card{
| |
| background:linear-gradient(135deg,#12091a 0%,#1a0a28 50%,#0e0615 100%);
| |
| border:1px solid #6a1b9a;border-radius:10px;padding:16px;
| |
| transition:transform .3s,box-shadow .3s,border-color .3s;
| |
| animation:mvp-glow 3s ease-in-out infinite;
| |
| }
| |
| .mvp-card:hover{
| |
| transform:translateY(-5px);
| |
| border-color:#ce93d8;
| |
| box-shadow:0 10px 30px rgba(171,71,188,.4);
| |
| animation:none;
| |
| }
| |
|
| |
| /* ── Pill badges ── */
| |
| .pill{
| |
| display:inline-block;padding:2px 10px;border-radius:20px;
| |
| font-size:11px;font-weight:700;letter-spacing:.5px;
| |
| animation:badge-pop .4s ease both;
| |
| }
| |
| .pill-common{background:#1c2d35;border:1px solid #546e7a;color:#b0bec5;}
| |
| .pill-epic{background:#2d2200;border:1px solid #ffa000;color:#ffe082;}
| |
| .pill-rare{background:#1a0a28;border:1px solid #ab47bc;color:#e1bee7;}
| |
| .pill-pvp{background:#2d0000;border:1px solid #ef5350;color:#ffcdd2;}
| |
|
| |
| /* ── Stat bubble ── */
| |
| .stat-bubble{
| |
| background:#0d1117;border:1px solid #26c6da44;border-radius:8px;
| |
| padding:12px 16px;text-align:center;
| |
| transition:border-color .3s,box-shadow .3s;
| |
| }
| |
| .stat-bubble:hover{border-color:#26c6da;box-shadow:0 0 18px #26c6da33;}
| |
|
| |
| /* ── Strategy cards ── */
| |
| .strat-card{
| |
| background:linear-gradient(135deg,#060d12 0%,#0c1820 100%);
| |
| border-left:3px solid #26c6da;border-radius:0 8px 8px 0;
| |
| padding:14px 18px;margin-bottom:10px;
| |
| transition:border-color .3s,background .3s,transform .25s;
| |
| }
| |
| .strat-card:hover{
| |
| transform:translateX(6px);
| |
| border-color:#80deea;
| |
| background:linear-gradient(135deg,#0a1622 0%,#122030 100%);
| |
| }
| |
|
| |
| /* ── Section animation wrapper ── */
| |
| .ef-section{animation:section-in .6s ease both;}
| |
| </style>
| |
|
| |
|
| {{DISPLAYTITLE:Extraction Fields}} | | {{DISPLAYTITLE:Extraction Fields}} |