/* Aim Master Status Page Styles */ :root { --green: #00ff10; --orange: #ffa600; --blue: #2986cc; --red: #ff0000; --bg-dark: #0e0f14; --panel: #14151a; --panel-2: #1a1b20; --text-light: #ffffff; --text-gray: #a8a8a8; --border: #222; --border-2: #2a2b30; --radius: 6px; --transition: 0.3s ease; /* Purchase button colors */ --purchase-a: #f09821; /* left */ --purchase-b: #ff4b5c; /* right */ } /* IPS resets */ #statusPage__root ul { list-style: none; margin: 0; padding: 0; } /* Root */ #statusPage__root { background: var(--bg-dark); color: var(--text-light); padding: 30px; border-radius: var(--radius); font-family: Inter, Roboto, sans-serif; } #statusPage__root.ipsBox { border: 0; box-shadow: none; } /* Header */ .statusPageHeader__title { font-size: 2rem; font-weight: 600; margin-bottom: 20px; text-transform: uppercase; } /* Shared pill style: legend + product status */ .statusTypes { display: flex; flex-wrap: wrap; gap: 10px; } .statusType__row, .status { position: relative; padding: 8px 14px; border-radius: 999px; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 8px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 24px rgba(0,0,0,0.20); } .statusType__row::after, .status::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.20)); opacity: 0.85; } .statusType__row > *, .status > * { position: relative; z-index: 1; } /* Make all status pills same size (fix Testing shorter than Undetected) */ #statusPage__root .status, #statusPage__root .statusType__row{ min-width: 160px; justify-content: center; } /* Icons */ .status--icon { position: relative; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; } .status--icon i { font-size: 1rem; line-height: 1; position: relative; } /* Glow + animacija */ .status--icon .icon-effect { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; opacity: 0.30; filter: blur(0.7px); transform: scale(1.12); pointer-events: none; animation: amIconPulse 1.35s ease-in-out infinite; } @keyframes amIconPulse { 0% { opacity: 0.30; transform: scale(1.05); } 60% { opacity: 0.00; transform: scale(1.45); } 100% { opacity: 0.30; transform: scale(1.05); } } /* LIVE BAR (added) */ .statusLiveBar{ margin-top: 16px; background: var(--panel-2); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; box-shadow: 0 18px 40px rgba(0,0,0,0.22); } .statusLiveBar__left{ display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.75); } .statusLiveBar__icon{ color: var(--purchase-a, #f09821); } .statusLiveBar__right{ display: inline-flex; align-items: center; gap: 12px; } .statusLiveBar__count{ color: rgba(255,255,255,0.75); font-size: 0.95rem; } .statusLiveBar__btn{ border: 0; cursor: pointer; color: #fff; font-weight: 800; padding: 10px 14px; border-radius: 10px; background: linear-gradient(90deg, var(--purchase-a, #f09821) 0%, var(--purchase-b, #ff4b5c) 100%); box-shadow: 0 12px 28px rgba(240,152,33,0.22); transition: transform 0.2s ease, filter 0.2s ease; } .statusLiveBar__btn:hover{ transform: translateY(-1px); filter: brightness(1.03); } /* (Tabs ostavljeni ako ih vratiš) */ .statusPageControls { margin-top: 20px; background: var(--panel); border-radius: var(--radius); padding: 12px; position: sticky; top: 0; z-index: 5; } .status-page__controls { display: flex; flex-wrap: wrap; gap: 8px; } .status-tabButton { background: var(--panel-2); border: 1px solid var(--border-2); color: var(--text-light); padding: 8px 16px; border-radius: var(--radius); cursor: pointer; transition: var(--transition); } .status-tabButton:hover, .status-tabButton.is-active { background: #e9213d; border-color: #e9213d; } /* Groups */ .statusGroup { margin-top: 35px; background: var(--panel); border-radius: var(--radius); padding: 20px; } .statusGroup__title { font-size: 1.4rem; font-weight: 600; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.02em; } /* Apex-style table layout */ .statusGroup--table { background: transparent; padding: 0; } .statusGroup--table .statusTable{ background: var(--panel-2); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,0.22); } .statusGroup--table .statusTable__row{ display: grid; grid-template-columns: 1fr 190px 180px 160px; align-items: center; column-gap: 22px; padding: 18px 18px; } .statusGroup--table .statusTable__row + .statusTable__row{ border-top: 1px dashed rgba(255,255,255,0.10); } .statusGroup--table .statusTable__title{ font-size: 1.05rem; font-weight: 700; color: var(--text-light); } /* Undetected since block */ .statusGroup--table .statusTable__sinceLabel{ font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: rgba(255,255,255,0.75); text-transform: uppercase; margin-bottom: 4px; } .statusGroup--table .statusTable__sinceValue{ font-size: 13px; font-weight: 700; color: #e9213d; } /* keep status pill compact inside grid */ .statusGroup--table .status{ white-space: nowrap; } /* button in grid */ .statusGroup--table .statusButton{ width: 160px; padding: 12px 18px; } /* ========================= PURCHASE NOW BUTTON (pill gradient like screenshot) ========================= */ .statusButton { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 800; letter-spacing: 0.02em; text-decoration: none; color: #fff; background: linear-gradient(90deg, var(--purchase-a) 0%, var(--purchase-b) 100%); box-shadow: 0 14px 30px rgba(0,0,0,0.35), 0 10px 24px rgba(240,152,33,0.22); border: 0; transition: transform 0.2s ease, filter 0.2s ease; position: relative; overflow: hidden; } .statusButton::after{ content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none; background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(0,0,0,0.18)); opacity: .75; } .statusButton:hover { transform: translateY(-1px); filter: brightness(1.03); color: #fff; } .statusButton:active{ transform: translateY(0px); filter: brightness(0.98); } /* Tabs content visibility (if used) */ .status-tabContent { display: none; animation: fadeIn 0.35s ease; } .status-tabContent.is-active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Responsive */ @media (max-width: 980px){ .statusGroup--table .statusTable__row{ grid-template-columns: 1fr 170px 170px 150px; column-gap: 16px; } } @media (max-width: 820px){ .statusGroup--table .statusTable__row{ grid-template-columns: 1fr; row-gap: 10px; } .statusGroup--table .statusTable__since, .statusGroup--table .statusTable__status, .statusGroup--table .statusTable__action{ justify-self: start; } .statusGroup--table .statusButton{ width: auto; } /* on mobile don't force equal pill width */ #statusPage__root .status, #statusPage__root .statusType__row{ min-width: 0; justify-content: flex-start; } } @media (max-width: 768px) { #statusPage__root { padding: 15px; } .statusPageHeader__title { font-size: 1.5rem; } .statusPageControls { overflow-x: auto; } .status-tabButton { flex: 0 0 auto; } } /* live bar responsive (added) */ @media (max-width: 700px){ .statusLiveBar{ flex-direction: column; align-items: stretch; } .statusLiveBar__right{ justify-content: space-between; width: 100%; } } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { .status--icon .icon-effect { animation: none; } .status-tabContent { animation: none; } } faq.css: /* faq.css — Aim Master FAQ (matches status.css theme) */ :root{ --green:#00ff10; --orange:#ffa600; --blue:#2986cc; --red:#ff0000; --bg-dark:#0e0f14; --panel:#14151a; --panel-2:#1a1b20; --text-light:#ffffff; --text-gray:#a8a8a8; --border:#222; --border-2:#2a2b30; --radius:6px; --transition:0.3s ease; /* Purchase button colors */ --purchase-a:#f09821; --purchase-b:#ff4b5c; } /* Resets */ #faqPage__root ul{ list-style:none; margin:0; padding:0; } #faqPage__root *{ box-sizing:border-box; } /* Root */ #faqPage__root{ background:var(--bg-dark); color:var(--text-light); padding:30px; border-radius:var(--radius); font-family:Inter, Roboto, sans-serif; } #faqPage__root.ipsBox{ border:0; box-shadow:none; } /* Header */ #faqPage__root .statusPageHeader__title{ font-size:2rem; font-weight:600; margin-bottom:20px; text-transform:uppercase; } /* ========================= Pill style (legend-like tabs) ========================= */ #faqPage__root .statusTypes{ display:flex; flex-wrap:wrap; gap:10px; } /* in FAQ tabs, statusType__row is a <button> */ #faqPage__root .faqTab{ appearance:none; -webkit-appearance:none; border:0; background:transparent; cursor:pointer; font:inherit; } /* Shared pill look */ #faqPage__root .statusType__row{ position:relative; padding:8px 14px; border-radius:999px; font-size:0.9rem; display:inline-flex; align-items:center; gap:8px; border-top:1px solid currentColor; border-bottom:1px solid currentColor; overflow:hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 24px rgba(0,0,0,0.20); } #faqPage__root .statusType__row::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.20)); opacity:0.85; } #faqPage__root .statusType__row > *{ position:relative; z-index:1; } /* active tab slight lift (keeps your inline colors) */ #faqPage__root .faqTab.is-active{ transform:translateY(-1px); } #faqPage__root .faqTab:focus-visible{ outline:2px solid rgba(240,152,33,0.45); outline-offset:3px; border-radius:999px; } /* Icons (same as status) */ #faqPage__root .status--icon{ position:relative; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; } #faqPage__root .status--icon i{ font-size:1rem; line-height:1; } #faqPage__root .status--icon .icon-effect{ position:absolute; inset:0; display:inline-flex; align-items:center; justify-content:center; opacity:0.30; filter:blur(0.7px); transform:scale(1.12); pointer-events:none; animation:amIconPulse 1.35s ease-in-out infinite; } @keyframes amIconPulse{ 0%{ opacity:0.30; transform:scale(1.05); } 60%{ opacity:0.00; transform:scale(1.45); } 100%{ opacity:0.30; transform:scale(1.05); } } /* Main */ #faqPage__root .statusPageMain.ipsBox{ border:0; box-shadow:none; } /* Groups */ #faqPage__root .statusGroup{ margin-top:35px; background:var(--panel); border-radius:var(--radius); padding:20px; } #faqPage__root .statusGroup__title{ font-size:2rem; font-weight:600; margin-bottom:16px; text-transform:uppercase; letter-spacing:0.02em; } /* ========================= FAQ accordion (details/summary) ========================= */ #faqPage__root .faqList{ display:grid; gap:0; } /* each FAQ item looks like a row inside panel */ #faqPage__root .faqItem{ background:transparent; border:0; padding:0; margin:0; } #faqPage__root .faqItem + .faqItem{ border-top:1px dashed rgba(255,255,255,0.10); } #faqPage__root .faqItem__q{ list-style:none; cursor:pointer; user-select:none; padding:18px 8px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-weight:800; color:var(--text-light); } /* remove default triangle */ #faqPage__root .faqItem__q::-webkit-details-marker{ display:none; } #faqPage__root .faqItem__q::marker{ content:""; } /* plus button on the right */ #faqPage__root .faqItem__toggle{ width:38px; height:38px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); box-shadow:inset 0 1px 0 rgba(255,255,255,0.06); } #faqPage__root .faqItem__toggle i{ font-size:1.05rem; transition:transform 0.18s ease; } /* open state: rotate plus -> x */ #faqPage__root details[open] .faqItem__toggle i{ transform:rotate(45deg); } #faqPage__root .faqItem__a{ padding:0 8px 18px 8px; color:rgba(255,255,255,0.75); } #faqPage__root .faqItem__a p{ margin:0; line-height:1.55; } /* ========================= CTA (Open Support) — uses same gradient button ========================= */ #faqPage__root .statusButton{ display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-weight:800; letter-spacing:0.02em; text-decoration:none; color:#fff; padding:12px 18px; background:linear-gradient(90deg, var(--purchase-a) 0%, var(--purchase-b) 100%); box-shadow: 0 14px 30px rgba(0,0,0,0.35), 0 10px 24px rgba(240,152,33,0.22); border:0; transition:transform 0.2s ease, filter 0.2s ease; position:relative; overflow:hidden; } #faqPage__root .statusButton::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,0.18), rgba(0,0,0,0.18)); opacity:.75; } #faqPage__root .statusButton:hover{ transform:translateY(-1px); filter:brightness(1.03); color:#fff; } #faqPage__root .statusButton:active{ transform:translateY(0); filter:brightness(0.98); } /* help row */ #faqPage__root .faqHelp{ margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:14px; border-top:1px dashed rgba(255,255,255,0.10); } #faqPage__root .faqHelp__left{ display:inline-flex; align-items:center; gap:10px; color:rgba(255,255,255,0.75); } /* tab panels */ #faqPage__root .faqTabContent{ display:none; } #faqPage__root .faqTabContent.is-active{ display:block; } /* Responsive */ @media (max-width: 768px){ #faqPage__root{ padding:15px; } #faqPage__root .statusPageHeader__title{ font-size:1.5rem; } #faqPage__root .faqHelp{ flex-direction:column; align-items:stretch; } #faqPage__root .faqHelp__btn{ width:100%; } } /* Reduce motion */ @media (prefers-reduced-motion: reduce){ #faqPage__root .status--icon .icon-effect{ animation:none; } } znaci faq.css ostaje isti, samo font size i font nek bude isti kao u status.css, nista drugo ne mjenjamo