/* frg.gg shop - deep-void theme. Matches changelogs.frg.gg / the in-game FRG hub: blue-black space, steel-blue projection light, Cinzel display text, HUD corner brackets on every pane. Gold is reserved for value (price, item names) so it reads as loot, not chrome. The previous hacker/neon look lives on untouched in styles_cyber2.css. */ :root { --void: #05060a; /* Panels stay near-opaque: translucent + backdrop-filter forces a per-frame re-blur of every card over the background and janks scrolling. */ --panel: rgba(17, 21, 33, 0.92); --panel-deep: rgba(10, 13, 22, 0.96); --sunk: rgba(3, 5, 10, 0.75); --border: rgba(120, 145, 190, 0.22); --border-hi: rgba(170, 200, 245, 0.45); --ink: #e9ebf1; --muted: #a7adbd; --dim: #78808f; --accent: #9fbce4; --accent-mid: #6d92c4; --accent-lo: #3f5c88; --glow: rgba(110, 150, 210, 0.14); --gold: #edc95e; --gold-lo: rgba(237, 201, 94, 0.7); --gift: #7ed8ce; --gift-edge: rgba(92, 199, 192, 0.5); --danger: #ff8f9b; --projection: #f0f3f9; --proj-halo: 0 0 1px rgba(245, 248, 255, 0.5), 0 0 22px rgba(160, 195, 255, 0.32), 0 0 46px rgba(110, 150, 210, 0.14); } * { margin: 0; padding: 0; box-sizing: border-box; } body, html { font-family: 'Source Sans Pro', 'Poppins', sans-serif; font-size: 15px; line-height: 1.65; scroll-behavior: smooth; color: var(--ink); } /* The void paints on , never on . Once the root carries a background, body's stops propagating to the canvas and paints as an ordinary in-flow box: that box lands on top of every z-index:-1 layer and hides the rings, the emblem and the starfield outright. */ html { background-color: var(--void); background-image: radial-gradient(1000px 640px at 14% -10%, rgba(140, 25, 40, 0.13), transparent 62%), radial-gradient(880px 600px at 86% 4%, rgba(35, 60, 120, 0.14), transparent 60%), radial-gradient(1300px 900px at 50% 118%, rgba(25, 45, 95, 0.14), transparent 62%), radial-gradient(800px 560px at 22% 68%, rgba(45, 70, 115, 0.10), transparent 65%); background-attachment: fixed; background-repeat: no-repeat; } body { min-height: 100vh; } /* Starfield. One fixed layer; the gradients themselves are never animated, they rasterize slowly and repainting them per frame stalls scroll. */ body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.75; background-image: radial-gradient(1px 1px at 22px 34px, rgba(240, 244, 252, 0.95), transparent 55%), radial-gradient(1px 1px at 128px 156px, rgba(170, 195, 240, 0.7), transparent 55%), radial-gradient(1.4px 1.4px at 231px 61px, rgba(255, 255, 255, 0.8), transparent 55%), radial-gradient(1px 1px at 66px 208px, rgba(190, 210, 250, 0.55), transparent 55%), radial-gradient(1px 1px at 178px 246px, rgba(240, 244, 252, 0.5), transparent 55%), radial-gradient(1.6px 1.6px at 289px 190px, rgba(215, 228, 252, 0.9), transparent 55%), radial-gradient(1px 1px at 316px 108px, rgba(230, 170, 180, 0.5), transparent 55%), radial-gradient(1.2px 1.2px at 260px 300px, rgba(175, 200, 245, 0.65), transparent 55%), radial-gradient(1px 1px at 104px 12px, rgba(215, 228, 252, 0.6), transparent 55%); background-size: 340px 340px; } @media (prefers-reduced-motion: no-preference) { body::after { will-change: opacity; animation: frg-twinkle 9s ease-in-out infinite alternate; } @keyframes frg-twinkle { from { opacity: 0.55; } to { opacity: 1; } } } /* The orrery: the page's backdrop, not a header ornament. Sized in vmax so the ring band always sweeps past both viewport edges, with hairline strokes that stay hairlines once scaled up. will-change is load-bearing on Firefox, which otherwise refuses to composite a layer this large and repaints it on the main thread every frame. */ .rings { position: fixed; top: 50%; left: 50%; width: 138vmax; height: 138vmax; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; background: radial-gradient(closest-side at 50% 50%, rgba(70, 110, 190, 0.07), transparent 70%), radial-gradient(46% 40% at 62% 38%, rgba(150, 40, 60, 0.05), transparent 70%); } .rings::before, .rings::after { content: ''; position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; } .rings::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201240%201240'%3E%3Cg%20fill='none'%20stroke='%23dde4ee'%20stroke-width='.8'%3E%3Ccircle%20cx='620'%20cy='620'%20r='372'%20stroke-opacity='.55'%20stroke-dasharray='190%2044%2012%2044'/%3E%3Ccircle%20cx='620'%20cy='620'%20r='440'%20stroke-opacity='.3'%20stroke-dasharray='2%2022'/%3E%3Cpath%20d='M620%20234v26M620%201006v26M234%20620h26M1006%20620h26'%20stroke-opacity='.6'/%3E%3C/g%3E%3C/svg%3E"); } .rings::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201240%201240'%3E%3Cg%20fill='none'%20stroke='%23dde4ee'%20stroke-width='.8'%3E%3Ccircle%20cx='620'%20cy='620'%20r='252'%20stroke-opacity='.5'%20stroke-dasharray='470%20165'/%3E%3Ccircle%20cx='620'%20cy='620'%20r='304'%20stroke-opacity='.28'%20stroke-dasharray='1%2018'/%3E%3Ccircle%20cx='620'%20cy='620'%20r='178'%20stroke-width='1.1'%20stroke-opacity='.6'%20stroke-dasharray='130%20500'/%3E%3C/g%3E%3C/svg%3E"); } @media (prefers-reduced-motion: no-preference) { .rings { will-change: opacity; animation: ring-breathe 26s ease-in-out infinite; } .rings::before { will-change: transform; animation: ring-spin 200s linear infinite; } .rings::after { will-change: transform; animation: ring-spin-rev 140s linear infinite; } @keyframes ring-spin { to { transform: rotate(360deg); } } @keyframes ring-spin-rev { to { transform: rotate(-360deg); } } @keyframes ring-breathe { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } } @media (prefers-reduced-motion: reduce) { .rings { opacity: 0.7; } } /* The FRG emblem sits at the orrery's core: both are viewport-centred and fixed, so the rings read as an armature around the mark. */ .background-logo { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34vmax; height: 34vmax; max-width: 560px; max-height: 560px; background: url('frg_small_ic.png') center / contain no-repeat; opacity: 0.17; z-index: -1; pointer-events: none; filter: grayscale(1) sepia(1) hue-rotate(184deg) saturate(2.6) brightness(0.9); } a { text-decoration: none; color: var(--accent); transition: color .18s, text-shadow .18s; } a:hover { color: #fff; text-shadow: 0 0 12px rgba(160, 195, 255, 0.5); } /* ── Topbar ─────────────────────────────────────────────────────── */ .navbar { width: 100%; position: fixed; top: 0; z-index: 1000; background: rgba(8, 11, 18, 0.94); border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(190, 210, 245, 0.05), 0 12px 34px rgba(1, 2, 6, 0.55); } .navbar-container { display: flex; align-items: center; justify-content: space-between; padding: 10px 34px; max-width: 1500px; margin: 0 auto; } .logo a { color: var(--accent); font-size: 28px; font-weight: 700; } .logo-image2 { width: 132px; height: auto; display: block; filter: drop-shadow(0 0 10px rgba(160, 195, 255, 0.22)); transition: filter .18s; } .logo a:hover .logo-image2 { filter: drop-shadow(0 0 16px rgba(190, 215, 255, 0.45)); } .nav-links { list-style: none; display: flex; margin-left: 34px; } .nav-links li { margin-left: 4px; } nav ul { list-style: none; display: flex; padding: 0; } .nav-links a { display: block; padding: 8px 13px; color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; border-radius: 4px; } .nav-links a:hover { color: #fff; background: rgba(110, 150, 210, 0.10); text-shadow: none; } .active-link { color: var(--accent) !important; border-bottom: 1px solid var(--accent-mid); } .menu-icon { display: none; color: var(--accent); font-size: 26px; cursor: pointer; } .user-info { display: flex; align-items: center; margin-left: auto; gap: 10px; } .user-avatar { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-hi); box-shadow: 0 0 12px var(--glow); } .user-name { color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: .04em; } .login-button a img { height: 32px; width: auto; transition: transform .25s, filter .25s; } .login-button a img:hover { transform: scale(1.05); filter: drop-shadow(0 0 14px var(--glow)); } .logout-form .logout-button { display: inline-block; padding: 5px 13px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-radius: 4px; border: 1px solid var(--border); background: rgba(15, 19, 30, 0.5); color: var(--muted); cursor: pointer; transition: color .18s, border-color .18s; } .logout-form .logout-button:hover { color: var(--accent); border-color: var(--accent-mid); } /* ── Sections ───────────────────────────────────────────────────── */ /* Explicit layer above the z-index:-1 backdrop, so the rings and the emblem stay behind the cards instead of washing across them. */ .section, .section-nobg { position: relative; z-index: 1; padding: 132px 34px 70px; color: var(--ink); } .section, .section.reveal, .section-nobg, .section-nobg.reveal, .store-section, .store-section.reveal { opacity: 1; transform: none; background: none; backdrop-filter: none; } .container { max-width: 1320px; margin: 0 auto; } /* ── Page head: title projected under a chart crest ─────────────── */ .section-header { text-align: center; color: var(--muted); font-size: 15px; } .section-header h1 { font-family: 'Cinzel', serif; font-size: 38px; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: var(--projection); text-shadow: var(--proj-halo); margin: 0 auto 6px; padding-top: 16px; } .section-header h1::after { content: ''; display: block; width: 190px; height: 1px; margin: 18px auto 0; background: linear-gradient(90deg, transparent, rgba(170, 200, 245, 0.8), transparent); box-shadow: 0 0 10px rgba(160, 195, 255, 0.45); } .section-header h2 { font-family: 'Cinzel', serif; font-size: 30px; letter-spacing: .08em; color: var(--projection); text-shadow: 0 0 1px rgba(245, 248, 255, .4), 0 0 18px rgba(160, 195, 255, .22); margin-bottom: 16px; } .section-header a { color: var(--accent); } .section-header i { color: var(--accent); margin-right: 10px; } .section-header .login-button { display: flex; justify-content: center; margin-top: 14px; } /* ── Banner strip ───────────────────────────────────────────────── */ .promotion-banner { max-width: 760px; margin: 18px auto 0; padding: 13px 22px 13px 26px; border: 1px solid var(--border); border-left: 2px solid var(--accent-mid); border-radius: 0 6px 6px 0; background: linear-gradient(90deg, rgba(110, 150, 210, 0.12), rgba(17, 21, 33, 0.55) 80%); box-shadow: inset 0 1px 0 rgba(200, 218, 248, 0.06), 0 10px 30px rgba(1, 2, 6, 0.4); color: var(--muted); font-size: 15px; text-align: center; } .promotion-banner p { margin: 0; } .promotion-banner strong { color: var(--projection); font-weight: 600; } .promotion-banner a { color: var(--accent); } /* ── Product grid ───────────────────────────────────────────────── */ .product-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(316px, 1fr)); gap: 22px; padding: 34px 0 0; align-items: stretch; } .product-panel { position: relative; width: auto; margin: 0; padding: 24px 24px 22px; display: flex; flex-direction: column; border: 1px solid var(--border); border-top-color: var(--border-hi); border-radius: 6px; background: linear-gradient(180deg, var(--panel), var(--panel-deep)); box-shadow: inset 0 1px 0 rgba(200, 218, 248, 0.07), 0 10px 30px rgba(1, 2, 6, 0.45); color: var(--ink); text-align: center; transition: border-color .18s, box-shadow .18s, transform .18s; } /* Corner accents ride the border itself, the way the old shop cards did */ .product-panel::before, .product-panel::after { content: ''; position: absolute; width: 22px; height: 22px; pointer-events: none; border-style: solid; border-color: rgba(170, 200, 245, 0.45); border-width: 0; transition: border-color .18s; } .product-panel::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 6px; } .product-panel::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 6px; } .product-panel:hover { transform: translateY(-3px); border-color: var(--border-hi); box-shadow: inset 0 1px 0 rgba(200, 218, 248, 0.12), 0 16px 40px rgba(1, 2, 6, 0.6), 0 0 28px var(--glow); } .product-panel:hover::before, .product-panel:hover::after { border-color: rgba(205, 226, 255, 0.8); } /* Entrance is CSS-only so a JS hiccup can never leave the grid blank. .reveal (added by script.js on load and scroll) is kept as a no-op. */ .product-panel.reveal { opacity: 1; transform: none; } .product-panel.reveal:hover { transform: translateY(-3px); } @media (prefers-reduced-motion: no-preference) { .product-panel { animation: panel-rise .5s ease-out both; } .product-panel:nth-child(1) { animation-delay: .02s; } .product-panel:nth-child(2) { animation-delay: .06s; } .product-panel:nth-child(3) { animation-delay: .10s; } .product-panel:nth-child(4) { animation-delay: .14s; } .product-panel:nth-child(5) { animation-delay: .18s; } .product-panel:nth-child(6) { animation-delay: .22s; } .product-panel:nth-child(n+7) { animation-delay: .26s; } @keyframes panel-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } } .product-content { display: flex; flex-direction: column; flex-grow: 1; } /* The icon sits on an orrery pedestal: a soft core glow ringed by the same dashed/dotted chart art as the page crest. The two rings counter-rotate on hover, which is the card's main piece of motion. */ .product-icon-container { position: relative; display: flex; align-items: center; justify-content: center; width: 168px; height: 168px; margin: 2px auto 14px; background: radial-gradient(closest-side at 50% 52%, rgba(110, 150, 210, 0.22), rgba(110, 150, 210, 0.05) 62%, transparent 74%); } .product-icon-container::before, .product-icon-container::after { content: ''; position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; background-size: contain; pointer-events: none; opacity: 0.6; transition: opacity .3s ease, transform .7s cubic-bezier(.2, .7, .3, 1); } .product-icon-container::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%3E%3Cg%20fill='none'%20stroke='%23dde4ee'%3E%3Ccircle%20cx='100'%20cy='100'%20r='78'%20stroke-width='1'%20stroke-opacity='.30'%20stroke-dasharray='118%2034%208%2034'/%3E%3Cpath%20d='M100%2010v13M100%20177v13M10%20100h13M177%20100h13'%20stroke-width='1'%20stroke-opacity='.38'/%3E%3C/g%3E%3C/svg%3E"); } .product-icon-container::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%3E%3Cg%20fill='none'%20stroke='%23dde4ee'%3E%3Ccircle%20cx='100'%20cy='100'%20r='93'%20stroke-width='1'%20stroke-opacity='.13'%20stroke-dasharray='2%2013'/%3E%3Ccircle%20cx='100'%20cy='100'%20r='62'%20stroke-width='1.3'%20stroke-opacity='.22'%20stroke-dasharray='46%20130'/%3E%3C/g%3E%3C/svg%3E"); } .product-panel:hover .product-icon-container::before { opacity: 1; transform: rotate(38deg); } .product-panel:hover .product-icon-container::after { opacity: 1; transform: rotate(-52deg); } .product-icon { position: relative; max-width: 124px; max-height: 124px; width: auto; height: auto; object-fit: contain; display: block; filter: drop-shadow(0 4px 14px rgba(1, 2, 6, 0.7)) drop-shadow(0 0 14px rgba(140, 180, 240, 0.28)); transition: transform .25s ease, filter .25s ease; } .product-panel:hover .product-icon { transform: scale(1.06); filter: drop-shadow(0 4px 16px rgba(1, 2, 6, 0.75)) drop-shadow(0 0 22px rgba(160, 200, 255, 0.45)); } .product-content h2 { min-height: 58px; margin: 0 0 12px; font-family: 'Cinzel', serif; font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: .05em; color: var(--projection); text-shadow: 0 0 1px rgba(245, 248, 255, .4), 0 0 18px rgba(160, 195, 255, .2); word-wrap: break-word; } /* Auto on both sides: grid rows stretch every card to the tallest, and this splits the slack evenly above and below the copy instead of dumping it all in one place. Buttons still land on a common baseline across the row. */ .product-info { margin: auto 0; } .product-info p { display: block; text-align: center; margin-bottom: 10px; font-size: 14px; color: var(--muted); } .product-info p i { margin-right: 8px; color: var(--accent-mid); } /* The rule above the price is a centred light bar, not a full-width border: it reads as a projected divider instead of a table row. */ .product-info p.product-price { margin: 16px 0 6px; padding-top: 15px; background: linear-gradient(90deg, transparent, rgba(170, 200, 245, 0.55), transparent) top center / 76% 1px no-repeat; font-family: 'Cinzel', serif; font-size: 17px; font-weight: 700; letter-spacing: .04em; color: var(--gold); text-shadow: 0 0 16px rgba(237, 201, 94, 0.25); } .product-info p.product-price i { color: var(--gold-lo); } .product-info p.has-term { display: block; text-align: center; } .frg-term { color: var(--accent); text-decoration: underline dotted rgba(159, 188, 228, 0.85); text-underline-offset: 3px; } /* Stock / limit line. Kept out of any flex rule: as a flex container every text node becomes its own item and the whitespace BETWEEN items is dropped, so "15 of 15 remaining" rendered as "15of 15 remaining". */ .product-info p.product-stock { display: block; text-align: center; font-size: 13px; letter-spacing: .04em; } .product-info p.product-stock small { display: inline-block; margin-top: 4px; color: var(--dim); } /* ── Buttons ────────────────────────────────────────────────────── */ /* Lit outlines rather than filled slabs. The hover sheen is a background-image sweep, not a ::before, because the purchase control is an and inputs render no pseudo-elements. text-indent offsets the trailing letter-space so the label stays optically centred. */ .btn-default, .btn-gift, .btn-lookup, .btn-gift-confirm { display: inline-block; width: 100%; border: 1px solid; border-radius: 4px; font-family: inherit; font-weight: 700; text-transform: uppercase; text-indent: .18em; cursor: pointer; background-repeat: no-repeat; background-size: 260% 100%; background-position: 155% 0; background-image: linear-gradient(105deg, transparent 40%, rgba(205, 228, 255, 0.16) 50%, transparent 60%); transition: color .18s, border-color .18s, background-color .18s, box-shadow .18s, text-shadow .18s, background-position .6s ease; } .btn-default, .btn-lookup, .btn-gift-confirm { padding: 11px 20px; font-size: 13px; letter-spacing: .18em; border-color: rgba(150, 190, 240, 0.6); background-color: rgba(110, 150, 210, 0.09); color: #bcd4f5; text-shadow: 0 0 10px rgba(150, 195, 255, 0.35); box-shadow: inset 0 0 18px rgba(110, 150, 210, 0.1); } .btn-default { margin-top: 12px; } .btn-default:hover, .btn-lookup:hover:not(:disabled), .btn-gift-confirm:hover:not(:disabled) { color: #fff; border-color: rgba(195, 222, 255, 0.9); background-color: rgba(110, 150, 210, 0.18); background-position: -60% 0; box-shadow: 0 0 24px rgba(120, 165, 235, 0.32), inset 0 0 24px rgba(140, 185, 245, 0.14); text-shadow: 0 0 12px rgba(180, 215, 255, 0.75); } .btn-default:active, .btn-lookup:active, .btn-gift-confirm:active { transform: translateY(1px); } .btn-default:disabled { box-shadow: none; } .paypal { margin: 0; } .btn-gift { margin-top: 9px; padding: 9px 16px; font-size: 12px; letter-spacing: .16em; border-color: var(--gift-edge); background-color: rgba(38, 128, 126, 0.14); background-image: linear-gradient(105deg, transparent 40%, rgba(214, 255, 250, 0.18) 50%, transparent 60%); color: var(--gift); text-shadow: 0 0 10px rgba(110, 220, 210, 0.35); box-shadow: inset 0 0 16px rgba(50, 150, 148, 0.12); } .btn-gift:hover { color: #e6fffb; border-color: rgba(158, 240, 233, 0.9); background-color: rgba(46, 152, 150, 0.24); background-position: -60% 0; box-shadow: 0 0 24px rgba(94, 214, 206, 0.34), inset 0 0 24px rgba(128, 232, 224, 0.16); text-shadow: 0 0 12px rgba(178, 248, 240, 0.75); } .btn-gift:active { transform: translateY(1px); } .btn-gift i { margin-right: 7px; } /* ── Contents dropdown ──────────────────────────────────────────── */ .frg-drop { margin: 4px 0 14px; border: 1px solid var(--border); border-radius: 6px; background: rgba(2, 4, 9, 0.45); text-align: left; overflow: hidden; } .frg-drop summary { display: flex; align-items: center; gap: 9px; padding: 10px 13px; cursor: pointer; color: var(--accent); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; user-select: none; transition: background .18s, color .18s; /* Both are needed: the default disclosure triangle is a ::marker in most engines and a ::-webkit-details-marker in older WebKit. */ list-style: none; } .frg-drop summary::-webkit-details-marker { display: none; } .frg-drop summary::marker { content: ''; } .frg-drop summary:hover { background: rgba(110, 150, 210, 0.10); color: #fff; } .frg-drop summary > span { flex: 1; } .frg-drop-caret { font-size: 10px; transition: transform .2s ease; } .frg-drop[open] .frg-drop-caret { transform: rotate(180deg); } .frg-drop[open] summary { border-bottom: 1px solid var(--border); } .frg-drop-body { padding: 2px 13px 12px; } .frg-drop-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(120, 145, 190, 0.12); } .frg-drop-row:last-of-type { border-bottom: none; } .frg-drop-row img { flex: 0 0 44px; width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(140, 180, 240, 0.25)); } /* game-icons.net art is a white silhouette on transparent, so it needs padding off the card and a warmer glow than the coloured PNG item art gets. */ .frg-drop-row img[src$=".svg"] { padding: 3px; opacity: 0.9; filter: drop-shadow(0 0 7px rgba(237, 201, 94, 0.4)); } .frg-drop-icon-wrap { position: relative; flex: 0 0 44px; } .frg-has-preview img { cursor: pointer; outline: 1px solid rgba(237, 201, 94, 0.35); outline-offset: 3px; border-radius: 3px; } .frg-preview-tip { position: absolute; left: 54px; top: 50%; transform: translateY(-50%) scale(0.96); width: 220px; aspect-ratio: 1 / 1; border: 1px solid rgba(237, 201, 94, 0.4); border-radius: 6px; background: rgba(6, 8, 14, 0.96); box-shadow: 0 0 24px rgba(237, 201, 94, 0.22), 0 8px 20px rgba(0, 0, 0, 0.6); padding: 4px; z-index: 20; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, transform .15s ease; } .frg-has-preview:hover .frg-preview-tip { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); } .frg-preview-tip video { width: 100%; height: 100%; object-fit: contain; border-radius: 3px; } .frg-drop-text b { display: block; margin-bottom: 3px; color: var(--gold); font-size: 14.5px; font-weight: 700; letter-spacing: .02em; } .frg-drop-text span { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; } .frg-drop-tag { display: block; margin-top: 6px; padding-left: 10px; border-left: 1px solid var(--accent-lo); color: var(--accent); font-size: 12px; font-style: normal; line-height: 1.45; } .frg-drop-note { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--accent); font-size: 12.5px; text-align: center; } /* ── Gift modal ─────────────────────────────────────────────────── */ .gift-modal { display: none; position: fixed; inset: 0; z-index: 2000; justify-content: center; align-items: center; background: rgba(2, 3, 7, 0.86); backdrop-filter: blur(8px); } .gift-modal-content { position: relative; width: 90%; max-width: 520px; max-height: 90vh; overflow-y: auto; padding: 30px 32px; border: 1px solid var(--border); border-top-color: var(--border-hi); border-radius: 6px; background: linear-gradient(180deg, var(--panel), var(--panel-deep)); box-shadow: inset 0 1px 0 rgba(200, 218, 248, 0.08), 0 24px 70px rgba(1, 2, 6, 0.75), 0 0 40px var(--glow); animation: modal-rise .28s ease-out; } @keyframes modal-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .gift-modal-close { position: absolute; top: 12px; right: 18px; font-size: 26px; line-height: 1; cursor: pointer; color: var(--dim); transition: color .18s; } .gift-modal-close:hover { color: var(--accent); } .gift-modal-content h2 { margin-bottom: 22px; font-family: 'Cinzel', serif; font-size: 21px; letter-spacing: .08em; text-align: center; color: var(--projection); text-shadow: var(--proj-halo); } .gift-modal-content h2 i { color: var(--accent); margin-right: 10px; } .gift-product-name { text-align: center; font-family: 'Cinzel', serif; font-size: 19px; font-weight: 700; letter-spacing: .04em; color: var(--projection); margin-bottom: 4px; } .gift-product-price { text-align: center; font-family: 'Cinzel', serif; font-size: 17px; font-weight: 700; color: var(--gold); text-shadow: 0 0 16px rgba(237, 201, 94, 0.25); margin-bottom: 24px; } .gift-input-group { margin-bottom: 20px; } .gift-input-group label { display: block; margin: 0 0 6px; color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: .05em; } .gift-input-group input[type="text"] { width: 100%; padding: 11px 13px; border: 1px solid rgba(85, 110, 155, 0.55); border-top-color: rgba(110, 140, 190, 0.7); border-radius: 6px; background: var(--sunk); color: #eef1f7; font-family: inherit; font-size: 15px; box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.55); transition: border-color .18s, box-shadow .18s; } .gift-input-group input[type="text"]:focus { outline: none; border-color: var(--accent-mid); box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 14px rgba(160, 195, 255, 0.28); } .gift-input-group input[type="text"]::placeholder { color: var(--dim); } .gift-input-group small { display: block; margin-top: 7px; color: var(--dim); font-size: 12px; } .btn-lookup:disabled { opacity: 0.5; cursor: not-allowed; } .btn-lookup i { margin-right: 8px; } .gift-error { display: none; margin-top: 15px; padding: 11px; border: 1px solid rgba(255, 143, 155, 0.35); border-left: 2px solid var(--danger); border-radius: 0 6px 6px 0; background: linear-gradient(90deg, rgba(150, 40, 55, 0.22), rgba(17, 21, 33, 0.5) 80%); color: var(--danger); text-align: center; font-size: 14px; } .gift-error:not(:empty) { display: block; } .gift-recipient-card { display: flex; align-items: center; margin-bottom: 24px; padding: 18px; border: 1px solid var(--border); border-radius: 6px; background: rgba(2, 4, 9, 0.5); box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.45); } .recipient-avatar { width: 76px; height: 76px; margin-right: 18px; border-radius: 50%; border: 1px solid var(--border-hi); box-shadow: 0 0 20px var(--glow); } .recipient-info { flex: 1; } .recipient-info h3 { margin-bottom: 3px; font-family: 'Cinzel', serif; font-size: 18px; letter-spacing: .04em; color: var(--projection); } .recipient-steamid { margin-bottom: 8px; color: var(--dim); font-size: 12px; letter-spacing: .05em; } .recipient-profile-link { color: var(--accent); font-size: 13px; } .recipient-profile-link:hover { text-decoration: underline; } .recipient-profile-link i { margin-right: 5px; } .gift-confirm-section { margin-bottom: 24px; } .gift-checkbox-label { display: flex; align-items: flex-start; padding: 14px; border: 1px solid var(--border); border-radius: 6px; background: rgba(2, 4, 9, 0.45); color: var(--muted); font-size: 14px; line-height: 1.5; cursor: pointer; transition: border-color .18s; } .gift-checkbox-label:hover { border-color: var(--border-hi); } .gift-checkbox-label input[type="checkbox"] { width: 19px; height: 19px; margin-right: 12px; margin-top: 2px; flex-shrink: 0; cursor: pointer; accent-color: var(--accent-mid); } .gift-checkbox-label strong { color: var(--projection); } .gift-buttons { display: flex; gap: 14px; } .btn-back { padding: 12px 20px; border: 1px solid var(--border); border-radius: 4px; background: rgba(15, 19, 30, 0.5); color: var(--muted); font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: color .18s, border-color .18s; } .btn-back:hover { color: var(--accent); border-color: var(--accent-mid); } .btn-back i { margin-right: 6px; } .gift-form { flex: 1; } .btn-gift-confirm:disabled { background-color: rgba(15, 19, 30, 0.6); border-color: var(--border); color: var(--dim); cursor: not-allowed; box-shadow: none; } /* ── Shared panels used by success / failed / server pages ──────── */ .status, .server-panel { position: relative; padding: 26px 28px; border: 1px solid var(--border); border-top-color: var(--border-hi); border-radius: 6px; background: linear-gradient(180deg, var(--panel), var(--panel-deep)); box-shadow: inset 0 1px 0 rgba(200, 218, 248, 0.07), 0 14px 40px rgba(1, 2, 6, 0.5); } .status h4, .server-panel h2, .server-content h2 { margin-bottom: 16px; font-family: 'Cinzel', serif; font-size: 21px; letter-spacing: .06em; color: var(--projection); text-shadow: 0 0 1px rgba(245, 248, 255, .4), 0 0 18px rgba(160, 195, 255, .2); } .status p, .server-panel p, .server-info p { margin-bottom: 12px; color: var(--muted); } .status p strong { color: var(--accent); } .status p:last-child { margin-top: 24px; color: var(--accent); } .server-panel p i, .server-info p i { margin-right: 8px; color: var(--accent-mid); } .server-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(316px, 1fr)); gap: 22px; } .server-panel { width: auto; margin: 0; opacity: 1; transform: none; transition: border-color .18s, box-shadow .18s, transform .18s; } .server-panel.reveal { opacity: 1; transform: none; } .server-panel:hover { transform: translateY(-3px); border-color: var(--border-hi); box-shadow: inset 0 1px 0 rgba(200, 218, 248, 0.12), 0 16px 40px rgba(1, 2, 6, 0.6), 0 0 28px var(--glow); } .server-content { display: flex; flex-direction: column; flex-grow: 1; } .server-info { margin-top: auto; } .server-panel .button { display: inline-block; margin-top: 12px; } .servers-section, .servers-section.reveal { opacity: 1; transform: none; } .frg-attrib { position: relative; z-index: 1; margin: 40px 0 18px; text-align: center; font-size: 11px; letter-spacing: .05em; color: var(--dim); opacity: 0.7; } .frg-attrib a { color: inherit; text-decoration: underline; } /* ── Mobile ─────────────────────────────────────────────────────── */ @media (max-width: 900px) { .product-list, .server-list { grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)); gap: 18px; } } @media (max-width: 768px) { .section, .section-nobg { padding: 116px 18px 60px; } .section-header h1 { font-size: 27px; padding-top: 8px; } .product-list, .server-list { grid-template-columns: 1fr; } .product-panel, .server-panel { width: auto; } .navbar-container { padding: 12px 18px; flex-wrap: wrap; } .nav-links { position: absolute; right: 0; top: 62px; flex-direction: column; width: 210px; display: none; margin-left: 0; padding: 8px 0; background: rgba(8, 11, 18, 0.97); border: 1px solid var(--border); border-radius: 0 0 0 6px; box-shadow: 0 18px 40px rgba(1, 2, 6, 0.6); } .nav-links li { margin: 0; text-align: right; } .nav-links a { padding: 11px 18px; border-radius: 0; } .nav-links.show, .nav-links.active { display: flex; } .menu-icon { display: block; order: 1; margin-left: auto; } .user-info { order: 3; width: 100%; margin: 10px 0 0; justify-content: center; } .gift-modal-content { width: calc(100% - 20px); margin: 10px; padding: 22px 20px; } .gift-recipient-card { flex-direction: column; text-align: center; } .recipient-avatar { margin: 0 0 15px; } .gift-buttons { flex-direction: column; } .btn-back { order: 2; } .gift-form { order: 1; } /* Side placement runs the 220px preview off the panel edge at this width; drop it below the icon and center it instead. */ .frg-preview-tip { left: 50%; top: calc(100% + 10px); width: 160px; transform: translateX(-50%) scale(0.96); } .frg-has-preview:hover .frg-preview-tip { transform: translateX(-50%) scale(1); } } .error-banner { border-color: rgba(250, 80, 80, 0.55); border-left-color: rgb(250, 80, 80); background: linear-gradient(90deg, rgba(250, 80, 80, 0.16), rgba(17, 21, 33, 0.55) 80%); } .error-banner strong { color: rgb(255, 140, 140); } .stock-count { font-weight: bold; } .stock-plenty { color: rgb(20, 250, 150); } .stock-low { color: rgb(255, 190, 70); text-shadow: 0 0 10px rgba(255, 170, 40, 0.55); } .stock-critical { display: inline-block; padding: 2px 10px; border-radius: 4px; color: rgb(255, 235, 225); letter-spacing: 0.4px; text-transform: uppercase; background: linear-gradient(90deg, rgba(255, 70, 50, 0.35), rgba(255, 140, 40, 0.35)); border: 1px solid rgba(255, 110, 60, 0.7); animation: stock-pulse 1.15s ease-in-out infinite; } .stock-critical i { color: rgb(255, 170, 60); margin-right: 4px; } @keyframes stock-pulse { 0%, 100% { box-shadow: 0 0 6px rgba(255, 90, 50, 0.45); text-shadow: 0 0 8px rgba(255, 120, 60, 0.6); transform: scale(1); } 50% { box-shadow: 0 0 20px rgba(255, 110, 60, 0.9); text-shadow: 0 0 14px rgba(255, 170, 90, 0.95); transform: scale(1.045); } } @media (prefers-reduced-motion: reduce) { .stock-critical { animation: none; } }