/* Layout: sticky near-black header with cart and login, red order-ticket in the hero as the one loud element, product grid and detail pages stay quiet. Single dark look by design. */ :root { --bg: #0b0b0e; --surface: #141418; --fg: #f1f1f3; --muted: #a0a0ab; --line: #2a2a31; --head: #101015; --red: #e10600; --red-fg: #ffffff; --focus: #ff5a52; --raised: #1b1b21; --code-bg: #07070a; --code-fg: #e8e8ee; --tile: #1b1b21; --ok: #4cd391; --ok-bg: #12301f; --warn: #ffd36b; --warn-bg: #352b0c; --bad: #ff8478; --bad-bg: #3a1613; --font: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif; --display: "Chakra Petch", "Barlow", system-ui, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color-scheme: dark; } * { box-sizing: border-box; } body { background: var(--bg); color: var(--fg); font: 400 1rem/1.55 var(--font); font-variant-numeric: tabular-nums; } h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.1; margin: 0 0 .5em; text-wrap: balance; } h1, h2 { text-transform: uppercase; } h1 { font-size: clamp(2.3rem, 7vw, 4.1rem); } h2 { font-size: clamp(1.4rem, 3.4vw, 2rem); } h3 { font-size: 1.1rem; } p { margin: 0 0 1em; max-width: 64ch; } code, pre { font-family: var(--mono); font-size: .85rem; } a { color: inherit; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; } .muted { color: var(--muted); } .wrap { width: min(1160px, 100%); margin-inline: auto; } .pad { padding-inline: 1rem; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } #store .hero { background: radial-gradient(60% 80% at 80% 20%, rgba(225,6,0,.22), transparent 60%), radial-gradient(40% 60% at 0% 100%, rgba(225,6,0,.10), transparent 60%), linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 100% 34px, var(--bg); } #store .section h2::before { content: ""; display: inline-block; width: 4px; height: .9em; background: var(--red); margin-right: .55rem; border-radius: 2px; vertical-align: -.08em; } #store .support h2::before, #store .banner h2::before { display: none; } .statbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); } .statbar > div { background: var(--surface); padding: 1rem 1.2rem; display: flex; gap: .8rem; align-items: center; } .statbar .ic, .step .ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(225,6,0,.14); color: var(--red); } .statbar b { display: block; font-family: var(--display); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; } .statbar span.sub { color: var(--muted); font-size: .85rem; } .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; counter-reset: st; } .step { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem; position: relative; overflow: hidden; } .step::after { counter-increment: st; content: "0" counter(st); position: absolute; right: .9rem; top: .4rem; font-family: var(--display); font-weight: 700; font-size: 3rem; color: rgba(255,255,255,.05); } .step h3 { margin: .8rem 0 .3rem; font-family: var(--display); text-transform: uppercase; font-size: 1.1rem; } .step p { margin: 0; color: var(--muted); } .card { transition: border-color .15s, transform .15s, box-shadow .15s; } .card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(225,6,0,.35), 0 0 28px rgba(225,6,0,.12); } .artw { position: relative; } .artw::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,11,14,.72), transparent 55%); pointer-events: none; } .artw .chip { position: absolute; left: .6rem; bottom: .55rem; z-index: 1; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: rgba(11,11,14,.7); border: 1px solid var(--line); border-radius: 99px; padding: .15rem .55rem; } .artw .bsl { position: absolute; left: .6rem; top: .55rem; z-index: 1; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--red); color: #fff; border-radius: 4px; padding: .15rem .5rem; } .artw .sp { position: absolute; right: .6rem; top: .55rem; z-index: 1; } .card .price { font-family: var(--display); font-weight: 700; font-size: 1.15rem; } footer.site .fgrid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2rem; } footer.site h4 { margin: 0 0 .7rem; color: var(--fg); font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; } footer.site .fcol button, footer.site .fcol a { display: block; text-decoration: none; padding: .2rem 0; margin: 0; color: var(--muted); } footer.site .fcol button:hover, footer.site .fcol a:hover { color: var(--fg); } footer.site .fcol .flink { margin: 0; text-decoration: none; } footer.site .fpay { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; } footer.site .fpay span { border: 1px solid var(--line); border-radius: 6px; padding: .2rem .55rem; font-size: .78rem; color: var(--fg); background: var(--surface); } footer.site .fbase { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); display: block; font-size: .85rem; } @media (max-width: 760px) { footer.site .fgrid { grid-template-columns: 1fr 1fr; } } .stsum { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0 .4rem; } .stbox { display: flex; align-items: baseline; gap: .55rem; padding: .55rem 1rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); } .stbox b { font-family: var(--display); font-size: 1.5rem; line-height: 1; } .stbox span { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .stbox.ok { border-color: rgba(76,211,145,.35); box-shadow: 0 0 18px rgba(76,211,145,.08); } .stbox.ok b { color: var(--ok); } .stbox.warn { border-color: rgba(255,211,107,.35); box-shadow: 0 0 18px rgba(255,211,107,.08); } .stbox.warn b { color: var(--warn); } .stbox.bad { border-color: rgba(255,132,120,.35); box-shadow: 0 0 18px rgba(255,132,120,.08); } .stbox.bad b { color: var(--bad); } .stgroup h3 span { font: 500 .8rem var(--font); text-transform: none; letter-spacing: 0; color: var(--muted); margin-left: .75rem; } .stgroup .plan-n { color: var(--muted); font-size: .8rem; margin-left: .7rem; } .stgroup tr.st-ok td:first-child { box-shadow: inset 3px 0 0 rgba(76,211,145,.75); } .stgroup tr.st-warn td:first-child { box-shadow: inset 3px 0 0 rgba(255,211,107,.8); } .stgroup tr.st-bad td:first-child { box-shadow: inset 3px 0 0 rgba(255,132,120,.8); } .stgroup .pill::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: .45rem; box-shadow: 0 0 8px currentColor; vertical-align: .05em; } .stgroup .pill.ok::before { animation: stpulse 2.2s ease-in-out infinite; } @keyframes stpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .stgroup .pill.ok::before { animation: none; } } .stgroup { margin-top: 1.75rem; } .stgroup table { table-layout: fixed; } .stgroup th:first-child { width: 70%; } .stgroup h3 { margin: 0 0 .6rem; font-family: var(--display); text-transform: uppercase; font-size: 1.15rem; letter-spacing: .04em; padding-left: .7rem; border-left: 4px solid var(--red); } /* ---- store glow + card polish ---- */ #store { background: radial-gradient(900px 520px at 88% -4%, rgba(225,6,0,.13), transparent 62%), radial-gradient(700px 520px at -6% 38%, rgba(225,6,0,.07), transparent 62%), radial-gradient(800px 500px at 100% 75%, rgba(225,6,0,.06), transparent 62%); } #store .card { border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(140deg, rgba(225,6,0,.65), rgba(225,6,0,.10) 38%, rgba(255,255,255,.07) 100%) border-box; box-shadow: 0 0 22px rgba(225,6,0,.10), 0 10px 24px rgba(0,0,0,.35); position: relative; } #store .card:hover { transform: translateY(-5px); box-shadow: 0 0 38px rgba(225,6,0,.34), 0 18px 36px rgba(0,0,0,.55); background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(140deg, #ff2a1f, rgba(225,6,0,.35) 45%, rgba(255,255,255,.12) 100%) border-box; } #store .card .art img { transition: transform .5s ease; } #store .card:hover .art img { transform: scale(1.07); } #store .card:hover .artw::after { background: linear-gradient(to top, rgba(110,0,0,.6), transparent 62%); } #store .artw::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: 1; pointer-events: none; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); opacity: 0; } #store .card:hover .artw::before { opacity: 1; left: 130%; transition: left .7s ease, opacity .1s; } #store .artw .bsl { box-shadow: 0 0 16px rgba(225,6,0,.75); } #store .card .price { color: #ff4b42; text-shadow: 0 0 18px rgba(225,6,0,.45); } #store .card .price small { color: var(--muted); font: 600 .72rem var(--font); text-transform: uppercase; letter-spacing: .06em; text-shadow: none; margin-right: .3rem; } #store .card .name { transition: color .15s; } #store .card:hover .name { color: #fff; } #store .card .prate { display: flex; align-items: center; gap: .45rem; font-size: .8rem; } #store .card .prate .stars { color: #ffd36b; letter-spacing: .05em; } #store .btn.solid { box-shadow: 0 0 18px rgba(225,6,0,.35); transition: box-shadow .15s, transform .15s; } #store .btn.solid:hover { box-shadow: 0 0 30px rgba(225,6,0,.6); } #store .step, #store .statbar > div { transition: border-color .15s, box-shadow .15s; } #store .step:hover { border-color: rgba(225,6,0,.6); box-shadow: 0 0 28px rgba(225,6,0,.18); } #store .statbar .ic, #store .step .ic { box-shadow: 0 0 16px rgba(225,6,0,.28); } #store .detail .art { box-shadow: 0 0 60px rgba(225,6,0,.2), 0 20px 40px rgba(0,0,0,.5); border-radius: 10px; } @media (prefers-reduced-motion: reduce) { #store .card:hover { transform: none; } #store .card .art img, #store .card:hover .art img { transform: none; transition: none; } #store .artw::before { display: none; } } #store .card .body { position: relative; gap: .5rem; padding: 1.05rem 1.1rem 1.1rem; background: linear-gradient(180deg, rgba(225,6,0,.13), rgba(225,6,0,0) 46%), linear-gradient(180deg, rgba(20,20,24,0) 25%, rgba(20,20,24,.82) 100%), radial-gradient(circle at center, rgba(255,90,82,.22) 1.1px, transparent 1.5px) 0 0 / 11px 11px, #141418; border-top: 1px solid rgba(225,6,0,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 14px 22px -16px rgba(225,6,0,.35); } #store .card .body::before { content: ""; position: absolute; left: 1.1rem; top: -2px; width: 46px; height: 3px; background: #ff2a1f; box-shadow: 0 0 14px rgba(255,42,31,.9); border-radius: 0 0 3px 3px; } #store .card .body::after { content: ""; position: absolute; right: 0; bottom: 0; border-style: solid; border-width: 0 0 24px 24px; border-color: transparent transparent rgba(225,6,0,.6) transparent; filter: drop-shadow(0 0 6px rgba(225,6,0,.6)); } #store .card .plans { display: flex; flex-wrap: wrap; gap: .35rem; } #store .card .plans span { font-size: .72rem; font-weight: 600; color: #d6d6dd; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); border-radius: 5px; padding: .12rem .5rem; box-shadow: inset 0 1px 3px rgba(0,0,0,.5); } #store .card .meta { border-top: 1px dashed rgba(255,255,255,.12); padding-top: .75rem; margin-top: auto; padding-right: 1.1rem; } #store { position: relative; isolation: isolate; } #store::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 64px 64px; -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 0%, #000 0%, transparent 78%); mask-image: radial-gradient(ellipse 85% 70% at 50% 0%, #000 0%, transparent 78%); } #store::after { content: ""; position: fixed; top: -20vh; right: 6vw; width: 34vw; height: 140vh; z-index: -1; pointer-events: none; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(225,6,0,.055) 50%, transparent); filter: blur(18px); } #store .section { position: relative; } #store .section + .section { border-top: 0; } #store .section + .section::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(225,6,0,.45), transparent); } @media (prefers-reduced-motion: reduce) { #store::after { filter: none; } } .announce { background: var(--raised); border-bottom: 1px solid var(--line); color: var(--text); font-size: .9rem; text-align: center; padding: .45rem 1rem; } .policy { white-space: pre-wrap; max-height: 55vh; overflow: auto; background: var(--raised); border: 1px solid var(--line); border-radius: 8px; padding: .9rem; font: inherit; font-size: .92rem; line-height: 1.55; margin: 0 0 1rem; } .flink { color: var(--text); margin-left: 1rem; text-decoration: underline; } .rv-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1rem; } .rv-avg { font-family: var(--display); font-size: 2.2rem; font-weight: 700; } .demo-note { background: var(--red); color: var(--red-fg); font-size: .85rem; font-weight: 700; text-align: center; padding: .4rem 1rem; } header.top { background: var(--head); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; padding-inline: 1rem; } header.top .wrap { display: flex; align-items: center; gap: .5rem 1.5rem; min-height: 62px; flex-wrap: wrap; padding-block: .4rem; } .brand { background: none; border: 0; cursor: pointer; padding: 0; display: block; } .brand img { height: 34px; width: auto; display: block; } .links { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; min-width: 0; } .links button { font: 600 .95rem var(--font); background: none; border: 0; color: var(--muted); padding: .5rem .7rem; cursor: pointer; border-bottom: 3px solid transparent; } .links button:hover { color: var(--fg); } .links button[aria-current="page"] { color: var(--fg); border-bottom-color: var(--red); } .tools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } select { font: 600 .9rem var(--font); background: var(--surface); color: var(--fg); border: 2px solid var(--line); border-radius: 6px; padding: .5rem .6rem; max-width: 100%; } input { font: 500 1rem var(--font); width: 100%; padding: .7rem .8rem; border: 2px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--fg); } input:focus-visible, select:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(255,90,82,.25); } label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .3rem; } .field { margin-bottom: 1rem; } .hint { font-size: .85rem; color: var(--muted); margin-top: .3rem; } .btn { font: 700 .95rem/1 var(--font); letter-spacing: .02em; padding: .8rem 1.1rem; border-radius: 6px; border: 2px solid var(--red); background: transparent; color: var(--fg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; transition: background-color .12s; } .btn:hover { background: var(--red); color: var(--red-fg); } .btn.solid { background: var(--red); color: var(--red-fg); } .btn.solid:hover { filter: brightness(1.12); } .btn.ghost { border-color: var(--line); } .btn.ghost:hover { background: var(--tile); color: var(--fg); } .btn.small { padding: .55rem .8rem; font-size: .85rem; } .btn.block { width: 100%; } .btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; } .count { background: var(--red); color: var(--red-fg); border-radius: 99px; padding: .05rem .5rem; font-size: .8rem; } .hero { padding: clamp(2.5rem, 7vw, 5rem) 1rem clamp(3rem, 7vw, 5rem); border-bottom: 1px solid var(--line); overflow: hidden; } .hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; } .lead { font-size: 1.15rem; color: var(--muted); } .actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; } .badges { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.75rem; color: var(--muted); font-weight: 600; font-size: .95rem; } .badges span::before { content: ""; display: inline-block; width: .55rem; height: .55rem; background: var(--red); border-radius: 50%; margin-right: .5rem; } .heroimg { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.55); min-width: 0; } .heroimg img { width: 100%; height: auto; display: block; } .tag { position: relative; background: var(--red); color: var(--red-fg); padding: 2.6rem 1.5rem 1.4rem 1.75rem; transform: rotate(2.2deg); transform-origin: 14% 0; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); min-width: 0; } .tag::before { content: ""; position: absolute; top: 14px; left: 18px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 3px #7a0300; } .tag .req { font-family: var(--display); font-weight: 700; margin: 0 0 .6rem; max-width: none; } .tag pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; } .tag .line { opacity: 0; animation: print .01s forwards; } .tag .line:nth-child(1) { animation-delay: .3s; } .tag .line:nth-child(2) { animation-delay: .7s; } .tag .line:nth-child(3) { animation-delay: 1.1s; } .tag .line:nth-child(4) { animation-delay: 1.5s; } .tag .line:nth-child(5) { animation-delay: 1.9s; } @keyframes print { to { opacity: 1; } } .tag .cap { font-size: .8rem; margin: .8rem 0 0; opacity: .85; } .section { padding: clamp(2rem, 5vw, 3.5rem) 1rem; } .section + .section { border-top: 1px solid var(--line); } .sechead { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .sechead h2 { margin: 0; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 1rem; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; text-align: left; color: inherit; font: inherit; padding: 0; cursor: pointer; min-width: 0; transition: border-color .12s; } .card:hover { border-color: var(--red); } .card .art { aspect-ratio: 16 / 9; background: var(--tile); display: flex; align-items: flex-end; padding: .8rem 1rem; font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1; color: #3b3b45; text-transform: uppercase; overflow: hidden; } .card .body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; } .card .name { font-family: var(--display); font-weight: 700; font-size: 1.1rem; overflow-wrap: anywhere; } .card .meta { display: flex; justify-content: space-between; gap: .5rem; align-items: center; margin-top: auto; padding-top: .5rem; } .card .art.pic, .detail .art.pic { padding: 0; color: transparent; } .art img { width: 100%; height: 100%; object-fit: cover; display: block; } .detail .art.pic { overflow: hidden; } .cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1rem; } .catcard { padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); cursor: pointer; display: block; width: 100%; transition: border-color .12s; } .catcard:hover { border-color: var(--red); } .catcard img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .catcard .noimg { aspect-ratio: 16 / 9; background: var(--tile); display: flex; align-items: flex-end; padding: .8rem 1rem; font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1; color: #3b3b45; text-transform: uppercase; } .catcard span { display: flex; justify-content: space-between; gap: .5rem; padding: .6rem .9rem; font-family: var(--display); font-weight: 700; color: var(--fg); } .catcard small { font-family: var(--font); font-weight: 500; color: var(--muted); } .banner { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); } .banner img { width: 100%; height: auto; display: block; } .banner .cta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.25rem; } .banner .cta p { margin: 0; color: var(--muted); } footer.site img.flogo { height: 70px; width: auto; display: block; margin-bottom: .75rem; } .price { font-weight: 700; } .pill { display: inline-block; padding: .12rem .55rem; border-radius: 99px; font-size: .78rem; font-weight: 700; background: var(--tile); color: var(--muted); white-space: nowrap; } .pill.ok { background: var(--ok-bg); color: var(--ok); } .pill.warn { background: var(--warn-bg); color: var(--warn); } .pill.bad { background: var(--bad-bg); color: var(--bad); } .filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; margin-bottom: 1rem; } .chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; } .chip { font: 600 .9rem var(--font); background: var(--surface); color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: .45rem .9rem; cursor: pointer; } .chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--red-fg); } .empty { padding: 2.5rem 1rem; text-align: center; color: var(--muted); } .crumbs { margin-bottom: 1rem; } .detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } .detail .art { aspect-ratio: 16 / 10; background: var(--tile); border-radius: 8px; display: flex; align-items: flex-end; padding: 1.25rem; font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 5vw, 3rem); color: #3b3b45; text-transform: uppercase; line-height: 1; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.25rem; min-width: 0; } .variant { display: flex; justify-content: space-between; align-items: center; gap: .75rem; width: 100%; background: var(--bg); border: 2px solid var(--line); border-radius: 6px; padding: .75rem .9rem; margin-bottom: .6rem; color: inherit; font: inherit; cursor: pointer; text-align: left; } .variant[aria-checked="true"] { border-color: var(--red); } .variant[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .variant b { font-weight: 700; } .variant small { display: block; color: var(--muted); } .qtyrow { display: flex; align-items: center; gap: .5rem; margin: 1rem 0; } .qtyrow input { width: 5rem; } .total { font-family: var(--display); font-weight: 700; font-size: 1.8rem; } .cartgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; } .cline { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .75rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--line); } .cline:last-child { border-bottom: 0; } .cline .qty { width: 4.5rem; padding: .45rem .5rem; } .sum { display: flex; justify-content: space-between; padding: .3rem 0; } .sum.big { font-family: var(--display); font-weight: 700; font-size: 1.3rem; border-top: 1px solid var(--line); margin-top: .5rem; padding-top: .8rem; } /* checkout */ .cx-steps { display: flex; align-items: center; gap: .6rem; margin: .25rem 0 1.5rem; flex-wrap: wrap; } .cx-step { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-weight: 700; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; } .cx-step i { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font: 700 .8rem var(--display); font-style: normal; } .cx-step.on { color: var(--fg); } .cx-step.on i { border-color: var(--red); background: var(--red); color: #fff; box-shadow: 0 0 14px rgba(225, 6, 0, .55); } .cx-sep { width: 2.2rem; height: 2px; background: var(--line); } .cx-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; } .cx-card { position: relative; background: linear-gradient(180deg, #17171c, var(--surface)); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem; min-width: 0; } .cx-card h3 { margin: 0 0 1rem; display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; } .cx-card h3 svg { color: var(--red); } .cx-item { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .9rem; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, .02); margin-bottom: .75rem; transition: border-color .15s, box-shadow .15s; } .cx-item:hover { border-color: rgba(225, 6, 0, .55); box-shadow: 0 0 0 1px rgba(225, 6, 0, .15), 0 8px 24px rgba(225, 6, 0, .08); } .cx-item:last-child { margin-bottom: 0; } .cx-thumb { width: 112px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: #000; } .cx-thumb .art { width: 100%; height: 100%; aspect-ratio: auto; } .cx-name { font-weight: 700; font-size: 1.02rem; line-height: 1.25; } .cx-plan { display: inline-block; margin-top: .3rem; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #ff8f8a; background: rgba(225, 6, 0, .12); border: 1px solid rgba(225, 6, 0, .35); border-radius: 999px; padding: .12rem .55rem; } .cx-each { color: var(--muted); font-size: .85rem; margin-top: .3rem; } .cx-right { display: grid; justify-items: end; gap: .55rem; } .cx-price { font: 700 1.25rem var(--display); } .cx-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: #0e0e12; } .cx-qty button { width: 2rem; height: 2rem; border: 0; background: transparent; color: var(--fg); font-size: 1.1rem; cursor: pointer; } .cx-qty button:hover:not(:disabled) { background: rgba(225, 6, 0, .25); } .cx-qty button:disabled { opacity: .35; cursor: default; } .cx-qty output { min-width: 2.2rem; text-align: center; font-weight: 700; } .cx-rm { border: 0; background: none; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; padding: .1rem; } .cx-rm:hover { color: #ff6b64; } .cx-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; } .cx-trust div { display: flex; align-items: center; gap: .6rem; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 9px; font-size: .85rem; color: var(--muted); background: rgba(255, 255, 255, .015); } .cx-trust svg { color: var(--red); flex: none; } .cx-trust b { display: block; color: var(--fg); font-size: .88rem; } .cx-side { position: sticky; top: 5.2rem; border-top: 3px solid var(--red); box-shadow: 0 -10px 30px -12px rgba(225, 6, 0, .45), 0 18px 40px rgba(0, 0, 0, .35); } .cx-field { margin-bottom: 1.1rem; } .cx-field > label, .cx-lab { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: .45rem; } .cx-input { position: relative; } .cx-input svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .cx-input input { width: 100%; padding-left: 2.4rem; } .cx-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } .cx-m { position: relative; display: flex; align-items: center; gap: .6rem; padding: .7rem .75rem; border: 1px solid var(--line); border-radius: 9px; background: #0e0e12; color: var(--fg); font: 600 .88rem var(--font); text-align: left; cursor: pointer; transition: border-color .12s, box-shadow .12s, background-color .12s; } .cx-m svg { color: var(--muted); flex: none; } .cx-m:hover { border-color: rgba(225, 6, 0, .6); } .cx-m[aria-pressed="true"] { border-color: var(--red); background: rgba(225, 6, 0, .1); box-shadow: 0 0 0 1px var(--red), 0 0 18px rgba(225, 6, 0, .3); } .cx-m[aria-pressed="true"] svg { color: #ff6b64; } .cx-m .tick { position: absolute; right: .45rem; top: .45rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--red); color: #fff; display: none; place-items: center; } .cx-m[aria-pressed="true"] .tick { display: grid; } .cx-m .tick svg { color: #fff; } .cx-coupon { display: flex; gap: .5rem; } .cx-coupon input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .06em; } .cx-applied { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; font-size: .85rem; color: #6ee7a0; background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .35); border-radius: 999px; padding: .15rem .6rem; } .cx-lines { border-top: 1px dashed var(--line); margin-top: 1.1rem; padding-top: .8rem; } .cx-lines .sum { color: var(--muted); } .cx-lines .sum.disc { color: #6ee7a0; } .cx-lines .sum.big { color: var(--fg); border-top: 1px solid var(--line); } .cx-lines .sum.big span:last-child { font-size: 1.7rem; color: #fff; text-shadow: 0 0 18px rgba(225, 6, 0, .5); } .cx-pay { margin-top: 1rem; padding: 1rem 1.1rem; font-size: 1.05rem; box-shadow: 0 8px 26px rgba(225, 6, 0, .4); } .cx-fine { display: flex; align-items: center; justify-content: center; gap: .4rem; color: var(--muted); font-size: .8rem; margin: .8rem 0 0; text-align: center; } @media (max-width: 860px) { .cx-grid { grid-template-columns: minmax(0, 1fr); } .cx-side { position: static; } .cx-item { grid-template-columns: 84px minmax(0, 1fr); } .cx-thumb { width: 84px; } .cx-right { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; justify-items: start; align-items: center; } .cx-trust { grid-template-columns: minmax(0, 1fr); } } /* legitimacy upgrades */ .trustbar { display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem 1.6rem; padding: .5rem 1rem; background: #0d0d11; border-bottom: 1px solid var(--line); font-size: .82rem; color: var(--muted); } .trustbar span { display: inline-flex; align-items: center; gap: .4rem; } .trustbar svg { color: var(--red); } .trustbar b { color: var(--fg); } .artw .bsl.pop2 { top: 2.15rem; } .artw .bsl.pop { background: #1b1b22; border: 1px solid rgba(225,6,0,.7); color: #ff9a95; box-shadow: none; } .rtrow { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .8rem; margin: .4rem 0 .6rem; color: var(--muted); font-size: .9rem; } .rtrow .stars { color: #ffd36b; letter-spacing: .08em; } .incl { margin: 1.25rem 0 0; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(180deg, #17171c, var(--surface)); } .incl h3 { margin: 0 0 .7rem; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; } .incl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .incl li { display: flex; gap: .6rem; align-items: flex-start; } .incl li svg { color: #ff6b64; flex: none; margin-top: .15rem; } .buytrust { display: grid; gap: .5rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--line); color: var(--muted); font-size: .88rem; } .buytrust div { display: flex; align-items: center; gap: .55rem; } .buytrust svg { color: var(--red); flex: none; } #store .detail .panel { position: sticky; top: 5.2rem; align-self: start; } .rvsum { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1rem; } .rvsum .big { font: 700 2.6rem var(--display); line-height: 1; } .rvsum .stars { color: #ffd36b; letter-spacing: .1em; } .rv-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6ee7a0; } .about { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; padding: 1.5rem; border: 1px solid var(--line); border-radius: 12px; background: radial-gradient(120% 140% at 0% 0%, rgba(225,6,0,.12), transparent 55%), var(--surface); } .about h2 { margin-top: 0; } .about p { color: var(--muted); } .abstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .abstats div { padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 9px; background: rgba(0,0,0,.25); } .abstats b { display: block; font: 700 1.6rem var(--display); color: #fff; text-shadow: 0 0 16px rgba(225,6,0,.45); } .abstats span { color: var(--muted); font-size: .85rem; } .helpgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1rem; } .helpgrid .panel h3 { margin-top: 0; } .helpgrid dt { font-weight: 700; margin-top: .8rem; } .helpgrid dd { margin: .25rem 0 0; color: var(--muted); } footer.site .fbase { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; } .fnote { color: var(--muted); font-size: .85rem; } /* cart drawer */ .drawer { position: fixed; inset: 0; z-index: 60; } .drawer[hidden] { display: none; } .dr-back { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); animation: drfade .18s ease-out; } .dr-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(430px, 100%); display: flex; flex-direction: column; background: #101015; border-left: 3px solid var(--red); box-shadow: -20px 0 60px rgba(0,0,0,.6), -6px 0 40px rgba(225,6,0,.2); animation: drslide .22s ease-out; } .dr-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); } .dr-head h3 { margin: 0; text-transform: uppercase; letter-spacing: .06em; } .dr-x { width: 2.2rem; height: 2.2rem; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--fg); font-size: 1.4rem; line-height: 1; cursor: pointer; } .dr-x:hover { border-color: var(--red); } .dr-body { flex: 1; overflow-y: auto; padding: 1rem 1.2rem; display: grid; gap: .75rem; align-content: start; } .dr-item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: .8rem; padding: .7rem; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.02); } .dr-item .cx-thumb { width: 76px; } .dr-item .cx-name { font-size: .95rem; } .dr-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .45rem; } .dr-foot { padding: 1rem 1.2rem 1.2rem; border-top: 1px solid var(--line); background: #0d0d11; display: grid; gap: .6rem; } .dr-foot .sum.big { border: 0; margin: 0; padding: 0 0 .3rem; } .dr-empty { text-align: center; color: var(--muted); padding: 3rem 1rem; } @keyframes drslide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes drfade { from { opacity: 0; } to { opacity: 1; } } /* recent purchase ticker */ .ticker { position: fixed; left: 1rem; bottom: 1rem; z-index: 50; max-width: min(340px, calc(100vw - 2rem)); display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; background: #14141a; border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 24px rgba(225,6,0,.15); cursor: pointer; animation: drslide .3s ease-out; font-size: .86rem; } .ticker[hidden] { display: none; } .ticker .tic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 8px; background: rgba(225,6,0,.15); color: var(--red); } .ticker b { display: block; color: var(--fg); } .ticker span { color: var(--muted); } .ticker .tx { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; padding: 0 .2rem; } @media (max-width: 860px) { .about { grid-template-columns: minmax(0, 1fr); } #store .detail .panel { position: static; } .ticker { bottom: .6rem; } } @media (prefers-reduced-motion: reduce) { .dr-panel, .dr-back, .ticker { animation: none; } } .stickybar { display: none; } @media (max-width: 860px) { .stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: .7rem; padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom)); background: rgba(14,14,18,.97); border-top: 2px solid var(--red); box-shadow: 0 -12px 34px rgba(0,0,0,.6); transform: translateY(0); transition: transform .2s ease; } .stickybar[hidden] { display: none; } .stickybar.away { transform: translateY(110%); } .stickybar .sb-info { flex: 1; min-width: 0; line-height: 1.2; } .stickybar .sb-info b { display: block; font-size: 1.05rem; } .stickybar .sb-info span { display: block; font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stickybar .btn { flex: 0 0 auto; padding-left: 1rem; padding-right: 1rem; } body.has-sticky footer.site { padding-bottom: 5.5rem; } } @media (prefers-reduced-motion: reduce) { .stickybar { transition: none; } } .acct-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.2rem; } .acct-stats > div { background: #101015; border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; } .acct-stats b { display: block; font: 700 1.4rem var(--display); } .acct-stats span { color: var(--muted); font-size: .82rem; } .acct-items { margin: .6rem 0 0; padding: 0; list-style: none; display: grid; gap: .25rem; font-size: .92rem; } .acct-items li { display: flex; justify-content: space-between; gap: 1rem; } @media (max-width: 560px) { .acct-stats { grid-template-columns: minmax(0, 1fr); } } .cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .rs-stack > * + * { margin-top: 1rem; } @media (max-width: 760px) { .cols2 { grid-template-columns: minmax(0, 1fr); } } .kv > div { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; border-bottom: 1px solid var(--line); } .tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); } table.tbl { width: 100%; border-collapse: collapse; min-width: 520px; } .tbl th { text-align: left; font-size: .85rem; color: var(--muted); font-weight: 700; padding: .65rem .8rem; border-bottom: 2px solid var(--red); white-space: nowrap; } .tbl td { padding: .7rem .8rem; border-bottom: 1px solid var(--line); vertical-align: middle; } .tbl tr:last-child td { border-bottom: 0; } .num { text-align: right; } .reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; } .stars { color: var(--warn); letter-spacing: .1em; font-size: 1rem; } .keys { background: var(--code-bg); color: var(--code-fg); border-radius: 6px; padding: .8rem 1rem; max-height: 14rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: .75rem 0; font-family: var(--mono); font-size: .85rem; } .notice { padding: .8rem 1rem; border-left: 5px solid var(--line); background: var(--surface); margin-bottom: 1rem; border-radius: 0 6px 6px 0; } .notice.warn { border-color: var(--warn); background: var(--warn-bg); } .notice.error { border-color: var(--bad); background: var(--bad-bg); } .notice.ok { border-color: var(--ok); background: var(--ok-bg); } .faq dt { font-weight: 700; margin-top: 1.1rem; } .faq dd { margin: .25rem 0 0; color: var(--muted); max-width: 64ch; } .support { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; } .support h2 { margin: 0 0 .25rem; } .support p { margin: 0; color: var(--muted); } footer.site { border-top: 1px solid var(--line); padding: 2rem 1rem; color: var(--muted); font-size: .9rem; } footer.site .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } footer.site button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; padding: 0 .5rem 0 0; } .row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } dialog { border: 0; border-radius: 10px; padding: 0; width: min(460px, calc(100% - 2rem)); background: var(--surface); color: var(--fg); box-shadow: 0 30px 60px rgba(0,0,0,.6); } dialog::backdrop { background: rgba(0,0,0,.7); } dialog .inner { padding: 1.5rem; } @media (max-width: 860px) { .hero .wrap, .detail, .cartgrid { grid-template-columns: minmax(0, 1fr); } .tag { transform: rotate(1deg); } .cline { grid-template-columns: minmax(0, 1fr) auto; } .filters { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .tag .line { animation: none; opacity: 1; } .btn, .card { transition: none; } } /* ---- dashboard (scoped) ---- */ #admin h1, #admin h2, #admin h3{ font-family: var(--display); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; } #admin h1{ font-size: clamp(1.5rem, 3vw, 2rem); text-transform: uppercase; margin: 0; } #admin h2{ font-size: 1.15rem; } #admin h3{ font-size: 1rem; } #admin p{ margin: 0 0 1em; max-width: 64ch; } #admin a{ color: inherit; } #admin :focus-visible{ outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; } #admin .muted{ color: var(--muted); } #admin .hello{ margin-bottom: 1rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-end; } #admin .hello h2{ margin: 0; font-family: var(--display); text-transform: uppercase; font-size: 1.5rem; } #admin .stat{ position: relative; overflow: hidden; } #admin .stat .ic{ width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: rgba(225,6,0,.15); color: var(--red); margin-bottom: .6rem; } #admin .stat .delta{ font-size: .8rem; font-weight: 700; margin-top: .15rem; } #admin .stat .delta.up{ color: var(--ok); } #admin .stat .delta.down{ color: var(--bad); } #admin .stat .spark{ display: block; width: 100%; height: 30px; margin-top: .5rem; } #admin .donutwrap{ display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; } #admin .donutwrap svg{ width: 140px; height: 140px; flex: none; } #admin .legend{ display: grid; gap: .4rem; font-size: .9rem; } #admin .legend i{ display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .5rem; } #admin .toplist{ display: grid; gap: .7rem; } #admin .toplist .tl{ display: flex; justify-content: space-between; gap: .5rem; font-size: .9rem; } #admin .toplist .track{ height: 6px; background: var(--raised); border-radius: 99px; overflow: hidden; margin-top: .25rem; } #admin .toplist .fill{ height: 100%; background: var(--red); border-radius: 99px; } #admin .pcell{ display: flex; align-items: center; gap: .7rem; } #admin .thumb{ width: 56px; height: 32px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); flex: none; } #admin .avatar{ display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(225,6,0,.18); color: var(--fg); font-weight: 700; font-size: .8rem; text-transform: uppercase; margin-right: .6rem; vertical-align: middle; } #admin [hidden], #store [hidden]{ display: none !important; } #admin{ font-variant-numeric: tabular-nums; } #admin .topline{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } #admin .gsearch{ position: relative; flex: 1; max-width: 520px; } #admin .gsearch input{ padding-left: 2.4rem; background: var(--surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0ab' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14z M20 20l-4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: .75rem 50%; background-size: 18px; } #admin .gres{ position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,.6); z-index: 30; max-height: 60vh; overflow: auto; padding: .4rem; } #admin .gres .gl{ font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6c6c78; padding: .5rem .6rem .2rem; } #admin .gres button{ display: flex; justify-content: space-between; gap: 1rem; width: 100%; text-align: left; background: none; border: 0; color: var(--fg); font: 500 .92rem var(--font); padding: .5rem .6rem; border-radius: 6px; cursor: pointer; } #admin .gres button:hover, #admin .gres button:focus-visible{ background: var(--raised); outline: none; } #admin .gres .muted{ font-size: .82rem; white-space: nowrap; } #admin .tl-right{ display: flex; align-items: center; gap: .8rem; } #admin .iconbtn{ position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; } #admin .iconbtn:hover{ border-color: #3a3a44; } #admin .iconbtn .nb{ position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--red); color: #fff; font: 700 .7rem/18px var(--font); text-align: center; } #admin .bellwrap{ position: relative; } #admin .pop{ position: absolute; right: 0; top: calc(100% + 8px); width: min(340px, 86vw); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.6); z-index: 30; padding: .5rem; } #admin .pop h3{ margin: 0; padding: .5rem .6rem; font-family: var(--display); text-transform: uppercase; font-size: .9rem; } #admin .pop button{ display: flex; gap: .7rem; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; color: var(--fg); font: 500 .9rem var(--font); padding: .55rem .6rem; border-radius: 8px; cursor: pointer; } #admin .pop button:hover{ background: var(--raised); } #admin .pop .dot{ width: 9px; height: 9px; border-radius: 50%; margin-top: .4rem; flex: none; background: var(--warn); } #admin .pop .dot.bad{ background: var(--bad); } #admin .pop .dot.ok{ background: var(--ok); } #admin .owner{ display: flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .9rem; } #admin .av, #admin .whoami .av{ display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #e10600, #7a0300); color: #fff; font: 700 .78rem var(--display); flex: none; } #admin .whoami{ display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; } #admin .whoami b{ color: var(--fg); display: block; font-size: .9rem; } #admin #aview > *{ animation: aview .22s ease both; } @keyframes aview{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce){ #admin #aview > *{ animation: none; } } #admin .tbl tbody tr:hover td{ background: rgba(255,255,255,.02); } #admin .panel, #admin .stat, #admin .tablewrap{ box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.25); } #admin .empty{ border: 1px dashed var(--line); border-radius: 10px; } @media (max-width: 760px){ #admin .owner .who{ display: none; } #admin .topline{ flex-wrap: wrap; } } #admin .cols{ align-items: start; } #admin .navlabel{ font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6c6c78; padding: .9rem .8rem .3rem; } #admin .nav button .nl{ display: flex; align-items: center; gap: .65rem; } #admin .nav button[aria-current="page"]{ box-shadow: inset 3px 0 0 var(--red); } #admin .nav button svg{ opacity: .85; } #admin .bar h1 + .muted, #admin .bar .sub{ margin-top: .15rem; font-size: .9rem; color: var(--muted); } #admin .seg{ display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } #admin .seg button{ font: 600 .85rem var(--font); background: var(--surface); color: var(--muted); border: 0; padding: .4rem .8rem; cursor: pointer; } #admin .seg button + button{ border-left: 1px solid var(--line); } #admin .seg button[aria-pressed="true"]{ background: var(--red); color: #fff; } #admin .toolbar{ display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; align-items: center; } #admin .toolbar input[type=search]{ max-width: 300px; } #admin .toolbar select{ width: auto; min-width: 150px; } #admin .pager{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .9rem; color: var(--muted); font-size: .9rem; } #admin .kpis{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1rem; } #admin .kpis > div{ background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .7rem .9rem; } #admin .kpis b{ display: block; font-family: var(--display); font-size: 1.25rem; } #admin .kpis span{ font-size: .8rem; color: var(--muted); } #admin .kv{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; margin: .8rem 0; } #admin .kv > div{ background: var(--raised); border-radius: 8px; padding: .6rem .8rem; } #admin .kv span{ display: block; font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } #admin .kv b{ overflow-wrap: anywhere; } #admin .tline{ list-style: none; margin: .8rem 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--line); display: grid; gap: .8rem; } #admin .tline li{ position: relative; } #admin .tline li::before{ content: ""; position: absolute; left: -1.62rem; top: .3rem; width: 11px; height: 11px; border-radius: 50%; background: var(--ok); border: 2px solid var(--surface); } #admin .tline li.bad::before{ background: var(--bad); } #admin .feed{ display: grid; gap: .1rem; } #admin .feed .fi{ display: flex; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid var(--line); align-items: flex-start; } #admin .feed .fi:last-child{ border-bottom: 0; } #admin .feed .fic{ width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: rgba(225,6,0,.14); color: var(--red); } #admin .feed .fi .when{ margin-left: auto; color: var(--muted); font-size: .8rem; white-space: nowrap; } #admin .dist{ display: grid; gap: .35rem; } #admin .dist .dr{ display: grid; grid-template-columns: 2.2rem 1fr 2.2rem; gap: .6rem; align-items: center; font-size: .85rem; } #admin .dist .track{ height: 8px; background: var(--raised); border-radius: 99px; overflow: hidden; } #admin .dist .fill{ height: 100%; background: #ffd36b; border-radius: 99px; } #admin .rowlink{ cursor: pointer; } #admin .rowlink:hover td{ background: rgba(255,255,255,.025); } #admin .policy-ta{ width:100%; min-height:9rem; font-size:.88rem; } #admin .demo-note{ background: var(--red); color: var(--red-fg); font-size: .85rem; font-weight: 700; text-align: center; padding: .4rem 1rem; } #admin .app{ display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: calc(100vh - 30px); } #admin .side{ background: #0f0f13; border-right: 1px solid var(--line); padding: 1.25rem .9rem; display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; } #admin .side img.logo{ height: auto; width: calc(100% - .8rem); max-width: 210px; display: block; margin: 0 .4rem; } #admin .nav{ display: flex; flex-direction: column; gap: .15rem; } #admin .nav button{ text-align: left; font: 600 .95rem var(--font); background: none; border: 0; color: var(--muted); padding: .65rem .8rem; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: .5rem; } #admin .nav button:hover{ color: var(--fg); background: var(--raised); } #admin .nav button[aria-current="page"]{ color: var(--fg); background: var(--raised); } #admin .nav .badge{ background: var(--red); color: var(--red-fg); border-radius: 99px; padding: 0 .5rem; font-size: .78rem; } #admin .side .foot{ margin-top: auto; font-size: .85rem; color: var(--muted); padding: 0 .4rem; } #admin .main{ padding: 1.5rem clamp(1rem, 3vw, 2rem) 4rem; min-width: 0; } #admin .bar{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } #admin .row{ display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } #admin .btn{ font: 700 .9rem/1 var(--font); letter-spacing: .02em; padding: .7rem 1rem; border-radius: 6px; border: 2px solid var(--red); background: transparent; color: var(--fg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } #admin .btn:hover{ background: var(--red); color: var(--red-fg); } #admin .btn.solid{ background: var(--red); color: var(--red-fg); } #admin .btn.solid:hover{ filter: brightness(1.12); } #admin .btn.ghost{ border-color: var(--line); } #admin .btn.ghost:hover{ background: var(--raised); color: var(--fg); } #admin .btn.small{ padding: .5rem .75rem; font-size: .82rem; } #admin .btn.danger{ border-color: var(--bad); color: var(--bad); } #admin .btn.danger:hover{ background: var(--bad); color: #1a0805; } #admin .btn[disabled]{ opacity: .45; cursor: not-allowed; } #admin label{ display: block; font-weight: 700; font-size: .88rem; margin-bottom: .3rem; } #admin input, #admin select{ font: 500 .95rem var(--font); width: 100%; padding: .6rem .7rem; border: 2px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); } #admin input:focus-visible, #admin select:focus-visible{ outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(255,90,82,.25); } #admin .field{ margin-bottom: .9rem; } #admin .hint{ font-size: .85rem; color: var(--muted); } #admin .stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1rem; margin-bottom: 1.25rem; } #admin .stat{ background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.1rem; min-width: 0; } #admin .stat .k{ color: var(--muted); font-size: .88rem; } #admin .stat .v{ font-family: var(--display); font-weight: 700; font-size: 1.7rem; line-height: 1.2; overflow-wrap: anywhere; } #admin .panel{ background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; min-width: 0; } #admin .panel .head{ display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; } #admin .panel .head h2{ margin: 0; } #admin .cols{ display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.25rem; } #admin .tablewrap{ overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); margin-bottom: 1.25rem; } #admin .panel .tablewrap{ border: 0; margin: 0; background: none; } #admin table.tbl{ width: 100%; border-collapse: collapse; min-width: 560px; } #admin .tbl th{ text-align: left; font-size: .82rem; color: var(--muted); font-weight: 700; padding: .65rem .8rem; border-bottom: 2px solid var(--line); white-space: nowrap; } #admin .tbl td{ padding: .65rem .8rem; border-bottom: 1px solid var(--line); vertical-align: middle; } #admin .tbl tr:last-child td{ border-bottom: 0; } #admin .num{ text-align: right; } #admin .pill{ display: inline-block; padding: .12rem .55rem; border-radius: 99px; font-size: .78rem; font-weight: 700; background: var(--raised); color: var(--muted); white-space: nowrap; } #admin .pill.ok{ background: var(--ok-bg); color: var(--ok); } #admin .pill.warn{ background: var(--warn-bg); color: var(--warn); } #admin .pill.bad{ background: var(--bad-bg); color: var(--bad); } #admin .chips{ display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; } #admin .chip{ font: 600 .88rem var(--font); background: var(--surface); color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: .4rem .85rem; cursor: pointer; } #admin .chip[aria-pressed="true"]{ background: var(--red); border-color: var(--red); color: var(--red-fg); } #admin .notice{ padding: .75rem 1rem; border-left: 5px solid var(--warn); background: var(--warn-bg); margin-bottom: 1rem; border-radius: 0 6px 6px 0; display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; } #admin .empty{ padding: 2rem 1rem; text-align: center; color: var(--muted); } #admin .keys{ background: var(--code-bg); color: var(--code-fg); border-radius: 6px; padding: .8rem 1rem; max-height: 12rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: .85rem; margin: .5rem 0 1rem; } #admin .list{ display: flex; flex-direction: column; } #admin .list .it{ display: flex; justify-content: space-between; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--line); align-items: center; } #admin .list .it:last-child{ border-bottom: 0; } #admin .switch{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); } #admin .switch:last-child{ border-bottom: 0; } #admin .tg{ width: 46px; height: 26px; border-radius: 99px; border: 2px solid var(--line); background: var(--bg); position: relative; cursor: pointer; padding: 0; flex: none; } #admin .tg::after{ content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .12s; } #admin .tg[aria-checked="true"]{ background: var(--red); border-color: var(--red); } #admin .tg[aria-checked="true"]::after{ transform: translateX(20px); background: #fff; } #admin .chartbox{ position: relative; } #admin .chartbox svg{ width: 100%; height: auto; display: block; overflow: visible; } #admin .chartbox .grid{ stroke: var(--line); stroke-width: 1; } #admin .chartbox .axis{ fill: var(--muted); font: 500 11px var(--font); } #admin .chartbox .bar{ fill: var(--red); } #admin .chartbox .hit:hover + .bar, #admin .chartbox .hit:focus-visible + .bar, #admin .chartbox .on{ fill: #ff4a43; } #admin .chartbox .hit{ fill: transparent; cursor: pointer; outline: none; } #admin .tip{ position: absolute; pointer-events: none; background: var(--raised); border: 1px solid var(--line); border-radius: 6px; padding: .4rem .6rem; font-size: .85rem; white-space: nowrap; transform: translate(-50%, -100%); z-index: 2; } #admin .tip b{ font-family: var(--display); } #admin dialog{ border: 0; border-radius: 10px; padding: 0; width: min(520px, calc(100% - 2rem)); background: var(--surface); color: var(--fg); box-shadow: 0 30px 60px rgba(0,0,0,.6); max-height: calc(100% - 2rem); } #admin dialog::backdrop{ background: rgba(0,0,0,.7); } #admin dialog .inner{ padding: 1.4rem; } #admin #atoast{ position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--raised); border: 1px solid var(--line); border-radius: 8px; padding: .7rem 1.1rem; font-weight: 600; z-index: 20; opacity: 0; pointer-events: none; transition: opacity .15s; max-width: calc(100% - 2rem); } #admin #atoast.show{ opacity: 1; } @media (max-width: 900px){#admin .app{ grid-template-columns: minmax(0, 1fr); } #admin .side{ position: static; height: auto; flex-direction: row; align-items: center; gap: .75rem; padding: .6rem .75rem; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); } #admin .side .foot{ display: none; } #admin .nav{ flex-direction: row; } #admin .nav button{ white-space: nowrap; } #admin .cols{ grid-template-columns: minmax(0, 1fr); }} @media (prefers-reduced-motion: reduce){#admin .tg::after, #admin #atoast{ transition: none; }} #admin .gate { min-height: 100vh; display: grid; place-items: center; padding: 1rem; } #admin .gate form { width: min(420px, 100%); margin: 0; } #admin .gate img { height: 32px; width: auto; display: block; margin-bottom: 1rem; } #admin .side .foot .btn { margin-top: .5rem; } /* ---- dashboard polish ---- */ #admin .app { background: radial-gradient(900px 420px at 85% -80px, rgba(225,6,0,.11), transparent 70%), transparent; } #admin .side { background: linear-gradient(180deg, #121217, #0c0c10); } #admin .nav button { transition: background-color .12s, color .12s; } #admin .nav button[aria-current="page"] { background: linear-gradient(90deg, rgba(225,6,0,.24), rgba(225,6,0,.04) 70%); box-shadow: inset 3px 0 0 var(--red); } #admin .bar h1 { letter-spacing: .03em; text-shadow: 0 0 24px rgba(225,6,0,.25); } #admin .stat, #admin .panel, #admin .tablewrap { border-radius: 10px; } #admin .stat { background: linear-gradient(180deg, #17171c, var(--surface)); transition: border-color .15s, box-shadow .15s, transform .15s; } #admin .stat::before { content: none; } #admin .stat:hover { transform: none; } #admin .panel { background: linear-gradient(180deg, #17171c, var(--surface)); } #admin .tbl thead th { background: rgba(255,255,255,.02); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; } #admin .tbl tbody tr { transition: background-color .1s; } #admin .tbl tbody tr:hover td { background: rgba(225,6,0,.05); } #admin .btn.solid { box-shadow: 0 6px 18px rgba(225,6,0,.28); } #admin .kpis > div { border-radius: 10px; background: linear-gradient(180deg, #17171c, var(--surface)); } #admin textarea { font: 500 .88rem/1.5 ui-monospace, Menlo, Consolas, monospace; padding: .65rem .75rem; border: 2px solid var(--line); border-radius: 8px; background: #0a0a0d; color: var(--fg); width: 100%; resize: vertical; } #admin textarea:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(255,90,82,.22); } #admin input:hover, #admin select:hover, #admin textarea:hover { border-color: #3a3a44; } /* dialogs */ #admin dialog { width: min(540px, calc(100% - 2rem)); border: 1px solid #2c2c34; border-top: 3px solid var(--red); border-radius: 14px; background: #101015; overflow: auto; box-shadow: 0 40px 90px rgba(0,0,0,.75), 0 0 70px rgba(225,6,0,.16); animation: dlgin .18s ease-out; } #admin dialog.wide { width: min(760px, calc(100% - 2rem)); } #admin dialog::backdrop { background: rgba(4,4,6,.78); backdrop-filter: blur(3px); } #admin dialog .inner { padding: 0; } #admin .dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #17171d, #101015); position: sticky; top: 0; z-index: 3; } #admin .dlg-head h2 { margin: 0; font-size: 1.15rem; letter-spacing: .05em; text-transform: uppercase; } #admin .dlg-x { width: 2.1rem; height: 2.1rem; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--fg); font-size: 1.35rem; line-height: 1; cursor: pointer; flex: none; } #admin .dlg-x:hover { border-color: var(--red); background: rgba(225,6,0,.15); } #admin .dlg-body { padding: 1.2rem 1.4rem 0; } #admin .dlg-body > div > .row:last-child { position: sticky; bottom: 0; z-index: 2; margin: 1.1rem -1.4rem 0; padding: .9rem 1.4rem; background: linear-gradient(180deg, rgba(16,16,21,.85), #101015 40%); border-top: 1px solid var(--line); backdrop-filter: blur(6px); } #admin .dlg-body .field > label, #admin .lab { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } @keyframes dlgin { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } } /* product editor */ #admin .pd-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; } #admin .pd-head img { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); flex: none; } #admin .pd-head h3 { margin: 0; font-size: 1.1rem; } #admin .pd-head .muted { margin-top: .2rem; } #admin .pd-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1.1rem; } #admin .pd-sum div { padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.02); } #admin .pd-sum b { display: block; font: 700 1.25rem var(--display); } #admin .pd-sum span { color: var(--muted); font-size: .78rem; } #admin .stseg { display: inline-flex; flex-wrap: wrap; gap: .35rem; padding: .25rem; border: 1px solid var(--line); border-radius: 10px; background: #0a0a0d; margin-bottom: 1.2rem; } #admin .stseg button { border: 0; border-radius: 7px; padding: .5rem .85rem; background: transparent; color: var(--muted); font: 700 .85rem var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; } #admin .stseg button::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #5a5a66; } #admin .stseg button.seg-ok::before { background: var(--ok); } #admin .stseg button.seg-warn::before { background: var(--warn); } #admin .stseg button.seg-bad::before { background: var(--bad); } #admin .stseg button:hover { color: var(--fg); } #admin .stseg button[aria-checked="true"] { background: var(--raised); color: #fff; box-shadow: 0 0 0 1px rgba(225,6,0,.6), 0 0 14px rgba(225,6,0,.2); } #admin .plan { margin-bottom: .85rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, #15151a, #111116); transition: border-color .15s; } #admin .plan:focus-within { border-color: rgba(225,6,0,.55); box-shadow: 0 0 0 1px rgba(225,6,0,.2); } #admin .plan-top { display: flex; align-items: flex-end; gap: .8rem; flex-wrap: wrap; } #admin .plan-name { flex: 1; min-width: 140px; } #admin .plan-name b { font-size: 1.02rem; } #admin .kc { display: inline-flex; align-items: center; gap: .35rem; margin-top: .3rem; padding: .12rem .6rem; border-radius: 99px; font-size: .76rem; font-weight: 700; background: var(--raised); color: var(--muted); } #admin .kc.has { background: var(--ok-bg); color: var(--ok); } #admin .kc.low { background: var(--warn-bg); color: var(--warn); } #admin .kc.none { background: var(--bad-bg); color: var(--bad); } #admin .mini { display: block; width: 7rem; margin: 0; } #admin .mini > span.t { display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .25rem; font-weight: 700; } #admin .pfx { position: relative; display: block; } #admin .pfx > i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-style: normal; font-weight: 700; pointer-events: none; } #admin .pfx input { padding-left: 1.5rem; } #admin .keys-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .9rem 0 .4rem; flex-wrap: wrap; } #admin .keys-head label { margin: 0; } #admin .kact { display: inline-flex; gap: .35rem; } #admin .kbtn { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 6px; padding: .25rem .6rem; font: 700 .74rem var(--font); cursor: pointer; } #admin .kbtn:hover { color: var(--fg); border-color: var(--red); } #admin .plan .hint { margin-top: .4rem; font-size: .78rem; } #admin .dirty { color: var(--warn); font-size: .82rem; font-weight: 700; margin-right: auto; } @media (max-width: 560px) { #admin .pd-head img { width: 80px; } #admin .pd-sum { grid-template-columns: minmax(0, 1fr); } #admin .mini { width: 46%; } } @media (prefers-reduced-motion: reduce) { #admin dialog { animation: none; } } #admin .imgpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; margin: .4rem 0 1.1rem; } #admin .imgpick button { padding: 0; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; background: #000; cursor: pointer; aspect-ratio: 16 / 9; opacity: .75; transition: opacity .12s, border-color .12s; } #admin .imgpick button:hover { opacity: 1; } #admin .imgpick button[aria-checked="true"] { opacity: 1; border-color: var(--red); box-shadow: 0 0 14px rgba(225,6,0,.45); } #admin .imgpick img { width: 100%; height: 100%; object-fit: cover; display: block; } #admin .keyrow { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .35rem .6rem; margin-top: .35rem; border: 1px solid var(--line); border-radius: 7px; background: #0a0a0d; } #admin .keyrow code { font: 500 .85rem ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; } #admin .wk { display: flex; align-items: flex-end; gap: .6rem; height: 150px; padding-top: .5rem; } #admin .wk > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .3rem; height: 100%; font-size: .78rem; color: var(--muted); } #admin .wk i { display: block; width: 100%; max-width: 44px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--red), #7a0300); min-height: 3px; } #admin .lowbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .8rem 1rem; margin-bottom: 1rem; border: 1px solid rgba(255,180,0,.35); border-left: 5px solid var(--warn); border-radius: 0 8px 8px 0; background: var(--warn-bg); } #admin .lowbar b { margin-right: .3rem; } #admin tr.subrow td { background: rgba(255,255,255,.015); color: var(--muted); font-size: .88rem; } /* ---- utilities (replace the inline styles of the preview; the CSP forbids style="") ---- */ .mt { margin-top: 1rem; } .mt2 { margin-top: 2.5rem; } .mt-s { margin-top: .6rem; } .pt { padding-top: 1rem; } .nomb { margin-bottom: 0; } .nomb2 { margin: 0 0 .25rem; } label.nomb { margin: 0; } .narrow { max-width: 36rem; } .full { width: 100%; } .grow { flex: 1; min-width: 200px; } .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } .reviews.one { grid-template-columns: minmax(0, 1fr); } .row.between { justify-content: space-between; } .row.nowrap { flex-wrap: nowrap; align-items: center; } .tablewrap.scroll { max-height: 440px; overflow: auto; } .tbl.wide { min-width: 560px; width: 100%; } .tbl.fluid { min-width: 0; width: 100%; } .qin { width: 4.5rem; } .sumlink { cursor: pointer; font-weight: 700; } .empty.empty-wide { grid-column: 1 / -1; } .rv-text { margin-top: .5rem; } .console-out { max-height: 360px; overflow: auto; min-height: 3rem; } .cx-rm-drawer { margin-top: .4rem; } .hidden-file { display: none; } #boot { padding: 4rem 1rem; text-align: center; color: var(--muted); } .demo-note { display: none; } /* ---- dashboard utilities (no inline styles allowed by the CSP) ---- */ #admin .pad-s { padding: 1rem 0; } #admin .empty-flat { border: 0; } #admin .maxw { max-width: 320px; } #admin .ml { margin-left: .4rem; } #admin .mb { margin-bottom: .5rem; } #admin .my { margin: 1rem 0; } #admin .mb-p { margin-bottom: 1rem; } #admin .body-font { font-family: var(--font); font-size: .95rem; width: 100%; } #admin .kbtn.danger-line { border-color: var(--bad); color: var(--bad); } #admin .seclab { margin-top: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; } #admin .notice.block { display: block; margin-top: 1rem; } #admin .notice.error { border-color: var(--bad); color: var(--bad); } #admin .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #admin .dr.dr-wide { grid-template-columns: minmax(90px, 1.2fr) 2fr auto; } #admin .sp-area { fill: rgba(225,6,0,.16); } #admin .sp-line { fill: none; stroke: #e10600; stroke-width: 1.6; vector-effect: non-scaling-stroke; } #admin .dn-bg { fill: none; stroke: var(--raised); stroke-width: 12; } #admin .dn-seg { fill: none; stroke-width: 12; transform: rotate(-90deg); transform-origin: 50% 50%; } #admin .dn-tx { fill: var(--fg); font: 700 16px var(--display); } #admin .bigavg { font: 700 2.4rem var(--display); } #admin .gold { color: #ffd36b; } #admin .dist.grow2 { flex: 1; min-width: 220px; } #admin .grow3 { flex: 1; min-width: 200px; } #admin .grow4 { flex: 1; min-width: 160px; } #admin .w110 { width: 110px; } #admin .w140 { width: 140px; } #admin .w160 { width: 160px; } #admin .w170 { width: 170px; } #admin .w5 { width: 5rem; } #admin .w6 { width: 6rem; } #admin .w12 { width: 12rem; } #admin .row.bottom { align-items: flex-end; } #admin .row.nowrap { flex-wrap: nowrap; align-items: center; } #admin .row.between { justify-content: space-between; } #admin .upper { text-transform: uppercase; } #admin .nw { white-space: nowrap; } #admin .tbl.w900 { min-width: 900px; } #admin .tbl.w760 { min-width: 760px; } #admin .tbl.w620 { min-width: 620px; } #admin .tbl.fluid { min-width: 0; width: 100%; } #admin .scroll320 { max-height: 320px; overflow: auto; } #admin .scroll360 { max-height: 360px; overflow: auto; min-height: 3rem; } #admin .detcell { max-width: 320px; overflow-wrap: anywhere; font-family: var(--mono); font-size: .82rem; } #admin .switch.flat { border: 0; padding: 0; } #admin .switch.mb { margin-bottom: .8rem; } #admin .full { width: 100%; } #admin .grow { flex: 1; min-width: 200px; } #admin .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } #admin .mt { margin-top: 1rem; } #admin .mt2 { margin-top: 1.5rem; } #admin .mt-s { margin-top: .6rem; } #admin .lab.mb { margin-bottom: .5rem; } #admin .plan-name .lab.mb { margin-bottom: .25rem; } #admin textarea.policy-ta { width: 100%; } #admin .row.nowrap > input[type=number] { flex: none; } html,body{overflow-x:clip} /* ====================================================================== Dashboard polish. Red is reserved for the one primary action, the active nav item and data emphasis; everything else is neutral. Sentence case, tabular figures, even spacing. ====================================================================== */ #admin{ --ink: #0a0a0d; --panel: #121216; --panel-2: #17171c; --edge: #25252c; --edge-2: #34343d; --soft: #8e8e99; --radius: 12px; } #admin h1, #admin h2, #admin h3{ font-family: var(--font); text-transform: none; letter-spacing: -.005em; } #admin h1{ font-size: 1.7rem; font-weight: 650; letter-spacing: -.015em; } #admin .panel .head h2, #admin .panel h2{ font-size: .98rem; font-weight: 600; color: var(--fg); letter-spacing: 0; } #admin h3{ font-size: .95rem; font-weight: 600; } #admin .bar{ margin-bottom: 1.4rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--edge); } #admin .bar h1 + .muted, #admin .bar .sub{ margin-top: .3rem; font-size: .92rem; color: var(--soft); } /* buttons: neutral by default, solid red for the primary action */ #admin .btn{ border: 1px solid var(--edge-2); background: var(--panel-2); color: var(--fg); border-radius: 8px; font-weight: 600; letter-spacing: 0; transition: background .12s, border-color .12s, filter .12s; } #admin .btn:hover{ background: #202027; border-color: #46464f; color: var(--fg); } #admin .btn.ghost{ background: transparent; border-color: var(--edge-2); } #admin .btn.ghost:hover{ background: var(--panel-2); } #admin .btn.solid, #admin #aactions .btn:not(.ghost):not(.danger){ background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 4px 14px rgba(225,6,0,.28); } #admin .btn.solid:hover, #admin #aactions .btn:not(.ghost):not(.danger):hover{ background: #f00b04; border-color: #f00b04; filter: none; } #admin .btn.danger{ background: transparent; border-color: rgba(255,132,120,.45); color: var(--bad); } #admin .btn.danger:hover{ background: rgba(255,132,120,.12); color: #ffa399; } #admin .btn[disabled]{ opacity: .4; } /* surfaces */ #admin .panel, #admin .stat, #admin .tablewrap, #admin .attn{ background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: 0 1px 0 rgba(255,255,255,.025) inset, 0 6px 20px rgba(0,0,0,.22); } #admin .panel{ padding: 1.25rem 1.4rem; } #admin .panel .head{ margin-bottom: 1rem; padding-bottom: .85rem; border-bottom: 1px solid var(--edge); } #admin .cols{ align-items: stretch; } #admin .cols > .panel{ margin-bottom: 0; } #admin .cols{ margin-bottom: 1.25rem; } /* overview: welcome line + attention tiles */ #admin .hello{ align-items: center; margin-bottom: 1.1rem; } #admin .hello .muted{ font-size: .95rem; } #admin .attns{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: .9rem; margin-bottom: 1.25rem; } #admin .attn{ display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic t" "ic s"; column-gap: .85rem; row-gap: .1rem; align-items: center; text-align: left; padding: .95rem 1.05rem; color: var(--fg); font: inherit; cursor: pointer; transition: border-color .12s, transform .12s; } #admin .attn:hover{ border-color: var(--edge-2); transform: translateY(-1px); } #admin .attn-ic{ grid-area: ic; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--panel-2); color: var(--soft); } #admin .attn-t{ grid-area: t; display: flex; align-items: baseline; gap: .5rem; min-width: 0; } #admin .attn-t b{ font-size: 1.45rem; font-weight: 650; line-height: 1; } #admin .attn-t span{ font-size: .86rem; color: var(--soft); } #admin .attn-s{ grid-area: s; font-size: .8rem; color: var(--soft); } #admin .attn.warn .attn-ic{ background: rgba(255,211,107,.12); color: var(--warn); } #admin .attn.warn .attn-t b{ color: var(--warn); } #admin .attn.bad .attn-ic{ background: rgba(255,132,120,.13); color: var(--bad); } #admin .attn.bad .attn-t b{ color: var(--bad); } #admin .attn.calm .attn-t b{ color: var(--soft); } #admin .attn.calm .attn-s{ color: #6e6e79; } /* KPI cards */ #admin .stats{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: .9rem; } #admin .stat{ padding: 1.1rem 1.2rem 0; display: flex; flex-direction: column; min-height: 150px; } #admin .stat:hover{ border-color: var(--edge-2); } #admin .stat .ic{ position: absolute; top: 1rem; right: 1.1rem; width: 32px; height: 32px; margin: 0; background: rgba(225,6,0,.12); } #admin .stat .k{ font-size: .85rem; color: var(--soft); font-weight: 500; text-transform: none; letter-spacing: 0; padding-right: 2.6rem; } #admin .stat .v{ font-size: 2rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; margin-top: .35rem; font-family: var(--font); } #admin .stat .delta{ display: inline-block; align-self: flex-start; margin-top: .5rem; padding: .15rem .5rem; border-radius: 99px; font-size: .74rem; font-weight: 600; } #admin .stat .delta.up{ background: rgba(76,211,145,.12); } #admin .stat .delta.down{ background: rgba(255,132,120,.12); } #admin .stat .spark{ margin: auto -1.2rem 0; width: calc(100% + 2.4rem); height: 38px; } #admin .sp-line{ fill: none; stroke: var(--red); stroke-width: 1.6; vector-effect: non-scaling-stroke; } #admin .sp-area{ fill: rgba(225,6,0,.12); stroke: none; } /* product status row */ #admin .swrow{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; } #admin .sw{ display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; background: var(--panel-2); border: 1px solid var(--edge); border-radius: 10px; } #admin .sw span{ color: var(--soft); font-size: .88rem; flex: 1; } #admin .sw b{ font-size: 1.25rem; font-weight: 650; } #admin .dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 0 3px rgba(76,211,145,.14); } #admin .dot.warn{ background: var(--warn); box-shadow: 0 0 0 3px rgba(255,211,107,.14); } #admin .dot.bad{ background: var(--bad); box-shadow: 0 0 0 3px rgba(255,132,120,.14); } #admin .dot.off{ background: #5b5b66; box-shadow: 0 0 0 3px rgba(255,255,255,.06); } /* lists, feed, top products */ #admin .toplist .tl{ font-size: .9rem; } #admin .toplist .tl b{ font-weight: 650; } #admin .toplist .track{ height: 5px; } #admin .toplist .fill{ background: linear-gradient(90deg, #a30400, var(--red)); } #admin .list .it, #admin .feed .fi{ border-bottom: 1px solid var(--edge); } #admin .list .it:last-child, #admin .feed .fi:last-child{ border-bottom: 0; } #admin .feed .fic{ width: 30px; height: 30px; border-radius: 8px; background: var(--panel-2); color: var(--soft); display: grid; place-items: center; flex: none; } #admin .feed .when{ margin-left: auto; font-size: .78rem; color: var(--soft); white-space: nowrap; } #admin .empty{ padding: 1.6rem 1rem; text-align: center; color: var(--soft); background: rgba(255,255,255,.015); } /* tables */ #admin .tbl thead th{ text-transform: none; letter-spacing: 0; font-size: .78rem; font-weight: 600; color: var(--soft); background: var(--panel-2); border-bottom: 1px solid var(--edge); padding: .7rem 1rem; } #admin .tbl td{ padding: .8rem 1rem; border-bottom: 1px solid var(--edge); } #admin .tbl tbody tr:last-child td{ border-bottom: 0; } #admin .tbl tbody tr:hover td{ background: rgba(255,255,255,.025); } #admin .tbl .num{ font-variant-numeric: tabular-nums; } /* nav + chrome */ #admin .navlabel{ text-transform: none; letter-spacing: .02em; font-size: .74rem; font-weight: 600; color: #6e6e79; padding: 1rem .85rem .35rem; } #admin .nav button{ border-radius: 8px; font-weight: 500; } #admin .nav button[aria-current="page"]{ background: rgba(225,6,0,.12); box-shadow: inset 3px 0 0 var(--red); font-weight: 600; } #admin .topline{ border-bottom-color: var(--edge); } #admin .gsearch input{ background-color: var(--panel); border-color: var(--edge); border-radius: 10px; } #admin .iconbtn{ background: var(--panel); border-color: var(--edge); } #admin .seg{ border-color: var(--edge-2); border-radius: 9px; } #admin .seg button{ background: var(--panel); font-weight: 600; } #admin .seg button[aria-pressed="true"]{ background: #25252d; color: #fff; box-shadow: inset 0 -2px 0 var(--red); } /* forms and dialogs */ #admin .dlg-head h2{ text-transform: none; letter-spacing: 0; font-size: 1.1rem; font-weight: 650; } #admin .dlg-body .field > label, #admin .lab{ text-transform: none; letter-spacing: 0; font-size: .82rem; font-weight: 600; color: var(--soft); } #admin .kv span{ text-transform: none; letter-spacing: 0; font-size: .78rem; } #admin .kv > div{ background: var(--panel-2); border: 1px solid var(--edge); } #admin .seclab{ text-transform: none; letter-spacing: 0; font-size: .82rem; } #admin .pop h3{ text-transform: none; font-size: .92rem; } #admin .gres .gl{ text-transform: none; letter-spacing: .02em; font-weight: 600; } #admin .pill{ font-weight: 600; letter-spacing: 0; } #admin input, #admin select, #admin textarea{ border-radius: 8px; } #admin ::-webkit-scrollbar{ width: 10px; height: 10px; } #admin ::-webkit-scrollbar-thumb{ background: #2c2c35; border-radius: 99px; border: 2px solid var(--ink); } #admin ::-webkit-scrollbar-thumb:hover{ background: #3c3c47; } @media (max-width: 760px){ #admin .stat .v{ font-size: 1.7rem; } #admin .attn-t b{ font-size: 1.25rem; } } #admin .chart-empty{ margin-top: -9.5rem; margin-bottom: 7.5rem; position: relative; text-align: center; color: var(--soft); font-size: .9rem; pointer-events: none; } #admin .list .it.more{ align-items: center; } #admin .lowbar{ background: var(--panel); border: 1px solid var(--edge); border-left: 3px solid var(--warn); border-radius: var(--radius); padding: .85rem 1.1rem; gap: .5rem; } #admin .lowbar > b{ color: var(--fg); font-weight: 600; font-size: .92rem; } #admin .notice{ border-radius: var(--radius); } #admin .panel > h2{ margin: 0 0 .9rem; padding-bottom: .8rem; border-bottom: 1px solid var(--edge); } #admin .panel > p.muted, #admin .panel > .hint{ margin-top: -.2rem; } #admin .field{ margin-bottom: 1rem; } /* help page: setup guide */ #store .setup{ margin: 0; padding-left: 1.2rem; display: grid; gap: .8rem; } #store .setup li::marker{ color: var(--red); font-weight: 700; } #store .dls{ display: grid; gap: .6rem; } #store .dl{ display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--line); } #store .dl:last-child{ border-bottom: 0; } #store .dl b{ display: block; } #store .dl .muted{ font-size: .86rem; } #store .stack{ display: grid; gap: .6rem; } #store .stack .btn{ text-align: center; } #store .span2{ grid-column: span 2; } @media (max-width: 860px){ #store .span2{ grid-column: auto; } } #store .fixes details{ border-bottom: 1px solid var(--line); padding: .15rem 0; } #store .fixes details:last-child{ border-bottom: 0; } #store .fixes summary{ cursor: pointer; font-weight: 700; padding: .7rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; } #store .fixes summary::-webkit-details-marker{ display: none; } #store .fixes summary::after{ content: "+"; color: var(--red); font-weight: 700; } #store .fixes details[open] summary::after{ content: "\2212"; } #store .fixes p{ margin: 0 0 .9rem; max-width: 70ch; } /* ---- Store polish: conversion details (real data only) ---- */ #store .hero h1 { text-shadow: 0 0 40px rgba(225,6,0,.35); } #store .heroimg { position: relative; box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 70px rgba(225,6,0,.28); border-color: rgba(225,6,0,.45); } #store .hero .btn.solid { box-shadow: 0 0 0 0 rgba(225,6,0,.55), 0 8px 24px rgba(225,6,0,.35); } #store .btn.solid:not(:disabled):hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(225,6,0,.5); } #store .btn.solid { transition: background-color .12s, transform .12s, box-shadow .12s, filter .12s; } .btn.big { padding: 1rem 1.6rem; font-size: 1.05rem; } .proof { display: flex; flex-wrap: wrap; gap: 1.5rem 2.2rem; margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line); } .proof b { display: block; font-family: var(--display); font-size: 1.6rem; line-height: 1.1; } .proof span { color: var(--muted); font-size: .85rem; } .proof .stars { color: #ffc23d; } .livedot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: #35d07f; margin-right: .45rem; vertical-align: .12em; box-shadow: 0 0 10px #35d07f; animation: stpulse 2.2s ease-in-out infinite; } .card .low { position: absolute; left: .6rem; top: 2.15rem; z-index: 1; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: #3a2a05; color: #ffc23d; border: 1px solid #ffc23d; border-radius: 4px; padding: .12rem .45rem; } .card .soldn { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .82rem; } .card .soldn svg { color: var(--red); } .card .cta-row { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: .6rem; padding: .55rem; border-radius: 6px; background: rgba(225,6,0,.12); color: #ff8a85; font-weight: 700; font-size: .88rem; transition: background-color .15s, color .15s; } .card:hover .cta-row, .card:focus-visible .cta-row { background: var(--red); color: #fff; } .variant { transition: border-color .12s, background-color .12s, box-shadow .12s; } .variant:not([aria-disabled="true"]):hover { border-color: rgba(225,6,0,.6); } .variant[aria-checked="true"] { background: rgba(225,6,0,.1); box-shadow: 0 0 0 1px var(--red), 0 0 20px rgba(225,6,0,.25); } .vbest { font-style: normal; margin-left: .5rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--red); color: #fff; border-radius: 4px; padding: .1rem .4rem; vertical-align: .1em; } .vprice { text-align: right; } .vprice small.vsave { display: block; color: #35d07f; font-weight: 700; font-size: .78rem; } .detail > .panel { border-top: 3px solid var(--red); box-shadow: 0 -10px 30px -14px rgba(225,6,0,.5), 0 16px 40px rgba(0,0,0,.35); } @media (min-width: 861px) { .detail > .panel { position: sticky; top: 5.2rem; align-self: start; } } .total { text-shadow: 0 0 22px rgba(225,6,0,.35); } .closer { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: clamp(1.6rem, 4vw, 2.6rem); border-radius: 12px; border: 1px solid rgba(225,6,0,.5); background: radial-gradient(70% 140% at 100% 0%, rgba(225,6,0,.35), transparent 60%), linear-gradient(135deg, #1a0a0b, #0f0f14); box-shadow: 0 0 60px rgba(225,6,0,.15); } .closer h2 { margin: 0 0 .3rem; font-size: clamp(1.5rem, 3.5vw, 2.2rem); } .closer h2::before { display: none !important; } .closer p { margin: 0; color: #c9c9d1; max-width: 46ch; } .closer .actions { display: flex; gap: .75rem; flex-wrap: wrap; } .rv { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; } .rv.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } .livedot { animation: none; } } /* ---- Why choose us ---- */ .whyhead { text-align: center; max-width: 46rem; margin: 0 auto 2rem; } .whyhead h2 { margin: .6rem 0 .5rem; font-size: clamp(1.7rem, 4vw, 2.6rem); } #store .whyhead h2::before { display: none; } .whyhead p { margin: 0; color: var(--muted); } .eyebrow { display: inline-block; padding: .35rem .9rem; border: 2px solid var(--red); border-radius: 99px; color: #ff8a85; font: 700 .78rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 0 22px rgba(225,6,0,.25); } .whygrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; } .why { text-align: center; padding: 1.7rem 1.3rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: border-color .15s, transform .15s, box-shadow .15s; } .why:hover { border-color: rgba(225,6,0,.6); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.45), 0 0 28px rgba(225,6,0,.14); } .why .ic { width: 56px; height: 56px; margin: 0 auto 1rem; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, #ff2a22, #a30400); color: #fff; box-shadow: 0 0 24px rgba(225,6,0,.45); } .why h3 { margin: 0 0 .5rem; font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; font-size: 1.15rem; } .why p { margin: 0; color: var(--muted); font-size: .93rem; } @media (prefers-reduced-motion: reduce) { .why:hover { transform: none; } } a.btn { text-decoration: none; } /* ---- Animated wordmark + Discord pill (from the banner) ---- */ .brand img { height: 38px; width: auto; display: block; } .dpill { display: block; margin-left: auto; margin-right: .9rem; flex: none; } .dpill[hidden] { display: none; } .dpill img { height: 30px; width: auto; display: block; transition: transform .15s, filter .15s; } .dpill:hover img { transform: translateY(-1px) scale(1.04); filter: drop-shadow(0 0 8px rgba(225,6,0,.6)); } @media (max-width: 900px) { .dpill { display: none; } } @media (max-width: 560px) { .brand img { height: 28px; } } #admin .gate img.gatelogo{ height: auto; width: min(260px, 80%); display: block; margin: 0 auto .8rem; } /* ---- Hero feature callouts + ESP box ---- */ .heroimg { position: relative; } .fcall { position: absolute; display: flex; gap: .8rem; align-items: center; padding: .85rem 1.1rem .85rem .9rem; min-width: 11rem; background: rgba(16,10,12,.72); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(0,0,0,.55); animation: fbob 5s ease-in-out infinite; } .fcall .chev { color: #fff; font-size: 1.5rem; line-height: 1; } .fcall div b { display: block; font-family: var(--display); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .03em; } .fcall div span { display: block; color: var(--muted); font-size: .82rem; } .fcall::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; background: var(--red); border-radius: 2px; box-shadow: 0 0 10px var(--red); } .fcall.fc1 { left: 4%; top: 9%; } .fcall.fc2 { left: 2%; top: 63%; animation-delay: -1.6s; } .fcall.fc3 { right: 3%; top: 74%; animation-delay: -3.1s; } @keyframes fbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .esp { position: absolute; pointer-events: none; border: 1px solid rgba(255,70,60,.55); box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 26px rgba(225,6,0,.35), inset 0 0 40px rgba(225,6,0,.08); animation: espp 2.4s ease-in-out infinite; } .esp-c { position: absolute; width: 22px; height: 22px; border: 0 solid #ff2a22; } .esp-c.a { left: -3px; top: -3px; border-width: 3px 0 0 3px; } .esp-c.b { right: -3px; top: -3px; border-width: 3px 3px 0 0; } .esp-c.c { left: -3px; bottom: -3px; border-width: 0 0 3px 3px; } .esp-c.d { right: -3px; bottom: -3px; border-width: 0 3px 3px 0; } .esp-tag { position: absolute; left: -1px; top: -1px; background: var(--red); color: #fff; font: 700 .72rem/1 var(--font); letter-spacing: .08em; padding: .3rem .5rem; border-radius: 0 0 3px 0; white-space: nowrap; } .esp-hp { position: absolute; left: -12px; top: 0; bottom: 0; width: 5px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.25); } .esp-hp i { position: absolute; left: 0; right: 0; bottom: 0; height: 78%; background: linear-gradient(#35d07f, #1f9d5c); } @keyframes espp { 0%, 100% { opacity: 1; } 50% { opacity: .72; } } @media (max-width: 700px) { .fcall.fc2, .fcall.fc3 { display: none; } .fcall.fc1 { left: 3%; top: 6%; padding: .55rem .7rem; min-width: 0; } .fcall div span { display: none; } .esp-tag { font-size: .6rem; } } @media (prefers-reduced-motion: reduce) { .fcall, .esp { animation: none; } } @media (max-width: 700px) { header.top .wrap { gap: .3rem .75rem; } .brand { order: 1; } .tools { order: 2; margin-left: auto; } .links { order: 3; flex: 1 0 100%; overflow-x: auto; flex-wrap: nowrap; } .links button { white-space: nowrap; } } .esp.e1 { left: 15%; top: 14%; width: 36%; height: 84%; } .esp.e2 { left: 40%; top: 5%; width: 43%; height: 93%; animation-delay: -1.2s; } .esp.e2 .esp-hp i { height: 55%; background: linear-gradient(#ffc23d, #e08a00); } .fcall { min-width: 0; padding: .55rem .8rem .55rem .65rem; gap: .55rem; } .fcall div b { font-size: .88rem; } .fcall div span { font-size: .7rem; } .fcall .chev { font-size: 1.2rem; } .fcall.fc1 { left: 2%; top: 1.5%; } .fcall.fc2 { left: 2%; top: 76%; } .fcall.fc3 { right: 2%; top: 83%; } .esp.e1 .esp-tag { top: 2.2rem; border-radius: 0 3px 3px 0; } /* hero v3: single operator, callouts stacked on the dark right side */ .esp.e1 { left: 11%; top: 3%; width: 56%; height: 94%; } .esp.e1 .esp-tag { top: -1px; border-radius: 0 0 3px 0; } .fcall.fc1 { left: auto; right: 2%; top: 7%; } .fcall.fc2 { left: auto; right: 2%; top: 38%; } .fcall.fc3 { left: auto; right: 2%; top: 69%; } @media (max-width: 700px) { .fcall.fc1 { right: 3%; top: 5%; } } .bsl.inl { position: static; display: inline-block; vertical-align: middle; }