{} *{} {} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } :root { --apex-bg: #050608; --apex-bg-alt: #0c0f14; --apex-gold: #f5c354; --apex-gold-soft: rgba(245,195,84,0.2); --apex-text: #f5f5f5; --apex-muted: #b3b3b3; --apex-border: #20242f; --apex-max-width: 1100px; } .apex-tracker { background: radial-gradient(circle at top, #262a40 0, transparent 55%), radial-gradient(circle at bottom, #181824 0, #050608 60%); color: var(--apex-text); padding: 3.5rem 1.5rem 4rem; } .apex-tracker-inner { max-width: var(--apex-max-width); margin: 0 auto; } .apex-tracker-eyebrow { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--apex-gold); margin-bottom: 0.6rem; } .apex-tracker-title { font-size: clamp(2rem, 4vw, 2.8rem); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; margin-bottom: 0.7rem; } .apex-tracker-title span { color: var(--apex-gold); } .apex-tracker-sub { font-size: 0.98rem; color: var(--apex-muted); max-width: 650px; margin-bottom: 1.6rem; } .apex-tracker-highlight { border-left: 2px solid var(--apex-border); padding-left: 0.8rem; font-size: 0.9rem; color: var(--apex-muted); margin-bottom: 2rem; } .apex-tracker-highlight strong { color: #fff; } /* Layout */ .apex-tracker-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr); gap: 2rem; } @media (max-width: 900px) { .apex-tracker-grid { grid-template-columns: 1fr; } } .apex-panel { border-radius: 18px; border: 1px solid var(--apex-border); background: linear-gradient(160deg, rgba(12,15,20,0.96), rgba(5,7,11,0.98)); padding: 1.6rem 1.4rem 1.8rem; } .apex-panel + .apex-panel { margin-top: 1rem; } .apex-panel-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--apex-gold); margin-bottom: 0.4rem; } .apex-panel-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.6rem; } .apex-panel-desc { font-size: 0.88rem; color: var(--apex-muted); margin-bottom: 0.9rem; } /* Counters */ .apex-counter-group { margin-bottom: 1.1rem; } .apex-counter-group-title { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--apex-muted); margin-bottom: 0.3rem; } .apex-counter-row { display: grid; grid-template-columns: 1.1fr auto; gap: 0.75rem; align-items: center; margin-bottom: 0.5rem; } .apex-counter-info { font-size: 0.85rem; } .apex-counter-label { font-weight: 500; } .apex-counter-target { font-size: 0.78rem; color: var(--apex-muted); } .apex-counter-controls { display: flex; align-items: center; gap: 0.25rem; justify-content: flex-end; } .apex-counter-btn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--apex-border); background: #050608; color: var(--apex-text); font-size: 1rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .apex-counter-btn:hover { border-color: var(--apex-gold); color: var(--apex-gold); } .apex-counter-input { width: 60px; padding: 0.4rem 0.3rem; border-radius: 8px; border: 1px solid var(--apex-border); background: #050608; color: var(--apex-text); font-size: 0.85rem; text-align: center; } .apex-counter-input:focus { outline: none; border-color: var(--apex-gold); box-shadow: 0 0 0 1px rgba(245,195,84,0.35); } /* Summary side */ .apex-summary-card { border-radius: 18px; border: 1px solid var(--apex-gold-soft); background: radial-gradient(circle at top left, rgba(245,195,84,0.18), rgba(5,6,8,0.98)); padding: 1.9rem 1.5rem 1.8rem; } .apex-summary-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.6rem; } .apex-summary-sub { font-size: 0.9rem; color: var(--apex-muted); margin-bottom: 1.1rem; } .apex-summary-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin-bottom: 1.3rem; } .apex-summary-pill { border-radius: 14px; border: 1px solid var(--apex-border); background: rgba(5,6,8,0.9); padding: 0.55rem 0.7rem; font-size: 0.8rem; } .apex-summary-pill-label { color: var(--apex-muted); text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.72rem; } .apex-summary-pill-value { font-weight: 700; color: var(--apex-gold); } .apex-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.85rem 2.1rem; border-radius: 999px; border: none; cursor: pointer; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; transition: all 0.2s ease; text-decoration: none; white-space: nowrap; } .apex-btn-primary { background: linear-gradient(135deg, #f5c354, #ff9a3c); color: #050608; box-shadow: 0 8px 24px rgba(0,0,0,0.7); } .apex-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.9); } .apex-copy-status { font-size: 0.8rem; color: var(--apex-muted); margin-top: 0.6rem; min-height: 1em; transition: opacity 0.3s ease; opacity: 0; } .apex-summary-footer { font-size: 0.8rem; color: var(--apex-muted); margin-top: 1.2rem; } .apex-footer { background: linear-gradient(135deg, rgba(245,195,84,0.12), rgba(5,6,8,0.95)); border-top: 1px solid rgba(245,195,84,0.3); padding: 18px 10px; text-align: center; font-family: 'Montserrat', sans-serif; } .apex-footer-inner { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; } .footer-links a { color: #f5c354; text-decoration: none; transition: color 0.2s ease; } .footer-links a:hover { color: #ffd773; text-decoration: underline; } .footer-links span { color: rgba(245,195,84,0.4); } .footer-copy { font-size: 11px; color: #e3e4e7; letter-spacing: 0.14em; text-transform: uppercase; }