/* ============================================================ FORGE — modern marketplace theme · light + dark Clean surfaces, soft depth, coral accent. Fully standalone. Theme is controlled by [data-theme="light|dark"] on . ============================================================ */ /* ---------- Theme tokens ---------- */ :root, :root[data-theme="light"] { --f-bg: #f4f5f8; --f-bg-tint: 236, 90, 60; /* accent rgb for glows */ --f-surface: #ffffff; --f-surface-2: #f1f2f6; --f-surface-3: #e9ebf0; --f-text: #14161c; --f-text-2: #565d6b; --f-text-3: #969cab; --f-border: #e7e9ef; --f-border-2: #d8dbe3; --f-shadow-xs: 0 1px 2px rgba(20,22,28,.06); --f-shadow-sm: 0 2px 8px rgba(20,22,28,.06); --f-shadow: 0 6px 20px rgba(20,22,28,.08); --f-shadow-lg: 0 18px 50px rgba(20,22,28,.14); --f-nav-bg: rgba(255,255,255,.78); } :root[data-theme="dark"] { --f-bg: #0e1014; --f-surface: #171a21; --f-surface-2: #1e222b; --f-surface-3: #272c37; --f-text: #eef0f5; --f-text-2: #a6adbb; --f-text-3: #6e7686; --f-border: #262b35; --f-border-2: #333a47; --f-shadow-xs: 0 1px 2px rgba(0,0,0,.4); --f-shadow-sm: 0 2px 10px rgba(0,0,0,.35); --f-shadow: 0 8px 26px rgba(0,0,0,.45); --f-shadow-lg: 0 22px 60px rgba(0,0,0,.6); --f-nav-bg: rgba(16,18,23,.72); } /* ---------- Brand (theme-independent) ---------- */ :root { --f-accent: #ff5a3c; --f-accent-2: #ff7a45; --f-accent-d: #e8462b; --f-accent-grad: linear-gradient(135deg, #ff6a3d 0%, #ff4d6d 100%); --f-blue: #4f7cff; --f-green: #1fae60; --f-yellow: #f2b21b; --f-red: #ef4444; --f-radius: 20px; --f-radius-sm: 13px; --f-radius-xs: 9px; --f-maxw: 1240px; --f-nav-h: 60px; --f-topbar-h: 60px; --f-rail-w: 232px; --f-rail-w-mini: 76px; --f-trans: .2s cubic-bezier(.2,.7,.3,1); --f-ring: 0 0 0 3px rgba(255,90,60,.22); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--f-bg); background-image: radial-gradient(60vw 50vh at 100% -10%, rgba(255,90,60,.06), transparent 60%), radial-gradient(50vw 40vh at -10% 0%, rgba(79,124,255,.05), transparent 55%); background-attachment: fixed; background-repeat: no-repeat; color: var(--f-text); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 15px; line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .3s ease, color .3s ease; } img { max-width: 100%; display: block; } a { color: var(--f-text); text-decoration: none; transition: color var(--f-trans); } a:hover { color: var(--f-accent); } h1,h2,h3,h4,h5,h6 { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 600; letter-spacing: -0.02em; color: var(--f-text); margin: 0 0 .5em; line-height: 1.15; } p { margin: 0 0 1rem; color: var(--f-text-2); } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; } ::selection { background: rgba(255,90,60,.25); } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--f-border-2); border: 3px solid var(--f-bg); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--f-text-3); } /* ---------- Layout: APP SHELL (rail + topbar) ---------- */ .f-container { max-width: var(--f-maxw); margin: 0 auto; padding: 0 20px; width: 100%; } .f-section { padding: 28px 0; } .f-app { display: grid; grid-template-columns: var(--f-rail-w) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns var(--f-trans); } .f-app-col { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; } .f-stage { flex: 1 0 auto; padding: 22px 28px 48px; width: 100%; } /* legacy aliases */ .f-shell { min-height: 100vh; display: flex; flex-direction: column; } .f-main { flex: 1 0 auto; padding: 26px 0 60px; } /* ============================================================ LEFT RAIL (primary nav — not standart top+catbar) ============================================================ */ .f-rail { position: sticky; top: 0; align-self: start; z-index: 920; height: 100vh; display: flex; flex-direction: column; padding: 18px 14px; border-right: 1px solid var(--f-border); background: var(--f-surface); box-shadow: inset -1px 0 0 rgba(255,255,255,.02); } .f-rail-brand { display: flex; align-items: center; gap: 12px; padding: 6px 10px 18px; text-decoration: none; flex-shrink: 0; } .f-rail-brand-text { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -.02em; color: var(--f-text); line-height: 1.1; overflow: hidden; white-space: nowrap; max-width: 160px; opacity: 1; transition: max-width var(--f-trans), opacity var(--f-trans); } .f-rail-brand .f-logo-mark { flex-shrink: 0; } .f-rail-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; padding: 4px 0; scrollbar-width: thin; } .f-rail-link { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; color: var(--f-text-2); font-weight: 600; font-size: 14px; border: 1px solid transparent; transition: all var(--f-trans); text-decoration: none; } .f-rail-link i { width: 20px; text-align: center; font-size: 15px; color: var(--f-text-3); transition: color var(--f-trans); } .f-rail-link span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; max-width: 180px; opacity: 1; transition: max-width var(--f-trans), opacity var(--f-trans); } .f-rail-link { position: relative; } .f-rail-link:hover { background: var(--f-surface-2); color: var(--f-text); } .f-rail-link:hover i { color: var(--f-accent); } .f-rail-link.active { background: rgba(255,90,60,.1); border-color: rgba(255,90,60,.22); color: var(--f-accent); } .f-rail-link.active i { color: var(--f-accent); } .f-rail-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--f-border); } .f-rail-foot-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--f-border); background: var(--f-surface-2); color: var(--f-text-2); font-weight: 600; font-size: 14px; cursor: pointer; font-family: inherit; transition: all var(--f-trans); } .f-rail-foot-btn:hover { border-color: var(--f-accent); color: var(--f-accent); } .f-rail-foot-btn i { width: 20px; text-align: center; flex-shrink: 0; } .f-rail-foot-btn span { overflow: hidden; white-space: nowrap; max-width: 120px; opacity: 1; transition: max-width var(--f-trans), opacity var(--f-trans); } .f-rail-backdrop { display: none; } .f-rail-toggle { display: grid; } body.f-rail-open { overflow: hidden; } /* desktop: collapse rail to icon dock (logo stays visible) */ .f-app.rail-collapsed, html.rail-collapsed .f-app { grid-template-columns: var(--f-rail-w-mini) minmax(0, 1fr); } .f-app.rail-collapsed .f-rail, html.rail-collapsed .f-app .f-rail { padding: 18px 10px; opacity: 1; pointer-events: auto; overflow: visible; width: var(--f-rail-w-mini); min-width: var(--f-rail-w-mini); } .f-app.rail-collapsed .f-rail-brand, html.rail-collapsed .f-app .f-rail-brand { justify-content: center; gap: 0; padding: 6px 4px 18px; } .f-app.rail-collapsed .f-rail-brand-text, html.rail-collapsed .f-app .f-rail-brand-text, .f-app.rail-collapsed .f-rail-link span, html.rail-collapsed .f-app .f-rail-link span, .f-app.rail-collapsed .f-rail-foot-btn span, html.rail-collapsed .f-app .f-rail-foot-btn span { max-width: 0; opacity: 0; pointer-events: none; } .f-app.rail-collapsed .f-rail-link, html.rail-collapsed .f-app .f-rail-link { justify-content: center; gap: 0; padding: 11px 8px; } .f-app.rail-collapsed .f-rail-foot-btn, html.rail-collapsed .f-app .f-rail-foot-btn { justify-content: center; gap: 0; padding: 11px 8px; } .f-app.rail-collapsed .f-rail-link[title]:hover::after, html.rail-collapsed .f-app .f-rail-link[title]:hover::after { content: attr(title); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); z-index: 950; padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; background: var(--f-surface); color: var(--f-text); border: 1px solid var(--f-border); box-shadow: var(--f-shadow-sm); font-size: 12.5px; font-weight: 600; } .f-app.rail-collapsed .f-rail-foot-btn[title]:hover::after, html.rail-collapsed .f-app .f-rail-foot-btn[title]:hover::after { content: attr(title); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); z-index: 950; padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; background: var(--f-surface); color: var(--f-text); border: 1px solid var(--f-border); box-shadow: var(--f-shadow-sm); font-size: 12.5px; font-weight: 600; } .f-rail-foot-btn { position: relative; } /* ============================================================ TOP BAR (search + account actions) ============================================================ */ .f-topbar { position: sticky; top: 0; z-index: 1000; height: var(--f-topbar-h); display: flex; align-items: center; gap: 14px; padding: 0 22px; background: var(--f-nav-bg); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--f-border); transition: box-shadow .3s ease; } .f-topbar.scrolled { box-shadow: 0 10px 30px -12px rgba(20,22,28,.22); } :root[data-theme="dark"] .f-topbar.scrolled { box-shadow: 0 10px 34px -10px rgba(0,0,0,.65); } .f-topbar-search { flex: 1 1 auto; max-width: 560px; } .f-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; flex-shrink: 0; } /* legacy navbar (auth pages etc.) */ .f-nav { position: sticky; top: 0; z-index: 900; background: var(--f-nav-bg); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--f-border); } .f-nav-inner { max-width: var(--f-maxw); margin: 0 auto; padding: 0 20px; height: var(--f-nav-h); display: flex; align-items: center; gap: 16px; } .f-logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; } .f-logo-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--f-accent-grad); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px; font-family: 'Space Grotesk', sans-serif; box-shadow: 0 6px 16px rgba(255,90,60,.4); transition: transform var(--f-trans); } .f-logo:hover .f-logo-mark { transform: translateY(-2px) rotate(-4deg); } .f-logo-word { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -0.03em; color: var(--f-text); } .f-logo-word small { display: block; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--f-text-3); margin-top: -1px; font-weight: 600; } .f-search { flex: 1 1 auto; max-width: 520px; position: relative; } .f-search input { width: 100%; height: 44px; padding: 0 44px 0 16px; border: 1px solid var(--f-border-2); border-radius: 12px; background: var(--f-surface); font-size: 14px; color: var(--f-text); transition: border-color var(--f-trans), box-shadow var(--f-trans); } .f-search input::placeholder { color: var(--f-text-3); } .f-search input:focus { outline: none; border-color: var(--f-accent); box-shadow: var(--f-ring); } .f-search .f-search-ico { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--f-text-3); pointer-events: none; font-size: 14px; } .Typeahead-spinner { display: none; } .Typeahead-menu { position: absolute; top: 52px; left: 0; right: 0; z-index: 950; background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); box-shadow: var(--f-shadow-lg); overflow: hidden; } .Typeahead-menu:empty { display: none; } .f-nav-right { margin-left: auto; display: flex; align-items: center; gap: 9px; flex-shrink: 0; } .f-iconbtn { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--f-border); border-radius: 11px; background: var(--f-surface); color: var(--f-text-2); font-size: 15px; transition: all var(--f-trans); } .f-iconbtn:hover { color: var(--f-accent); border-color: var(--f-accent); transform: translateY(-2px); box-shadow: var(--f-shadow-sm); } .f-iconbtn .f-dot { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--f-accent); color: #fff; border: 2px solid var(--f-surface); border-radius: 999px; font-size: 10px; font-weight: 700; display: grid; place-items: center; } .f-balance { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 15px; border-radius: 11px; background: var(--f-accent-grad); color: #fff; font-weight: 700; font-family: 'Space Grotesk', sans-serif; box-shadow: 0 6px 16px rgba(255,90,60,.32); transition: transform var(--f-trans), box-shadow var(--f-trans); } .f-balance:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(255,90,60,.45); } .f-balance .plus { opacity: .85; } .f-menu { position: relative; } .f-userchip { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 3px 8px 3px 4px; border: 1px solid var(--f-border); border-radius: 999px; background: var(--f-surface); transition: all var(--f-trans); } .f-userchip:hover { border-color: var(--f-border-2); transform: translateY(-2px); box-shadow: var(--f-shadow-sm); } .f-userchip img { width: 34px; height: 34px; border-radius: 999px; object-fit: cover; } .f-userchip .who { font-size: 13px; font-weight: 600; line-height: 1.1; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--f-text); } .f-userchip .who small { display: block; font-weight: 500; color: var(--f-text-3); font-size: 11px; margin-top: 2px; } .f-pop { position: absolute; right: 0; top: calc(100% + 12px); min-width: 234px; background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); box-shadow: var(--f-shadow-lg); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98); transform-origin: top right; transition: all var(--f-trans); z-index: 960; } .f-menu.open > .f-pop { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .f-pop a, .f-pop .f-pop-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--f-text); transition: background var(--f-trans); } .f-pop a:hover { background: var(--f-surface-2); color: var(--f-text); } .f-pop a i { width: 18px; text-align: center; color: var(--f-text-3); } .f-pop a:hover i { color: var(--f-accent); } .f-pop-head { padding: 8px 12px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--f-text-3); font-weight: 700; } .f-pop-sep { height: 1px; background: var(--f-border); margin: 6px 0; border: 0; } .f-pop.left { right: auto; left: 0; transform-origin: top left; } .f-noty-item { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 9px; font-size: 13px; } .f-noty-item:hover { background: var(--f-surface-2); } .f-burger { display: none; } /* legacy horizontal catbar (unused in app shell) */ .f-catbar { display: none; } .f-catlink { display: inline-flex; align-items: center; gap: 8px; padding: 13px 14px; white-space: nowrap; color: var(--f-text-2); font-weight: 600; font-size: 13.5px; } .f-catlink.active { color: var(--f-accent); border-bottom-color: var(--f-accent); } .f-catlink.active i { color: var(--f-accent); } /* ============================================================ BUTTONS ============================================================ */ .f-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border: 1px solid var(--f-border-2); border-radius: 11px; background: var(--f-surface); color: var(--f-text); font-weight: 600; font-size: 14px; line-height: 1; text-align: center; transition: all var(--f-trans); } .f-btn:hover { color: var(--f-text); border-color: var(--f-text-3); transform: translateY(-2px); box-shadow: var(--f-shadow-sm); } .f-btn:active { transform: translateY(0); } .f-btn-primary { background: var(--f-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(255,90,60,.32); } .f-btn-primary:hover { color: #fff; box-shadow: 0 10px 24px rgba(255,90,60,.45); } .f-btn-ink { background: var(--f-text); color: var(--f-bg); border-color: transparent; } .f-btn-ink:hover { color: var(--f-bg); } .f-btn-blue { background: var(--f-blue); color: #fff; border-color: transparent; } .f-btn-blue:hover { color: #fff; } .f-btn-success { background: var(--f-green); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(31,174,96,.28); } .f-btn-success:hover { color: #fff; box-shadow: 0 10px 24px rgba(31,174,96,.4); } .f-btn-danger { background: var(--f-red); color: #fff; border-color: transparent; } .f-btn-danger:hover { color: #fff; } .f-btn-secondary { background: var(--f-surface-2); color: var(--f-text); border-color: var(--f-border); } .f-btn-secondary:hover { color: var(--f-text); background: var(--f-surface-3); } .f-btn:disabled, .f-btn[disabled] { opacity: .5; pointer-events: none; } .f-btn-block { width: 100%; } .f-btn-sm { padding: 8px 13px; font-size: 13px; border-radius: 9px; } .f-btn-lg { padding: 14px 24px; font-size: 15px; } .f-btn-icon { padding: 9px; } /* ============================================================ CARDS / PANELS ============================================================ */ .f-panel { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius); box-shadow: var(--f-shadow-sm); overflow: hidden; } .f-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--f-border); } .f-panel-head h2, .f-panel-head h3, .f-panel-head h5 { margin: 0; font-size: 16px; } .f-panel-head .f-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--f-text-3); font-weight: 700; } .f-panel-head i { color: var(--f-text-3); } .f-panel-body { padding: 20px; } /* ============================================================ HOMEPAGE ============================================================ */ .f-hero { position: relative; overflow: hidden; margin-bottom: 24px; padding: 40px; border-radius: var(--f-radius); color: #fff; background: radial-gradient(120% 140% at 0% 0%, #2a2140 0%, #14161c 55%); box-shadow: var(--f-shadow); } .f-hero::before { content: ""; position: absolute; right: -80px; top: -100px; width: 360px; height: 360px; background: var(--f-accent-grad); border-radius: 50%; filter: blur(20px); opacity: .55; } .f-hero::after { content: ""; position: absolute; right: 120px; bottom: -120px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(79,124,255,.7), transparent 70%); border-radius: 50%; filter: blur(10px); } .f-hero-tag { display: inline-block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: #ff9a7a; margin-bottom: 14px; position: relative; z-index: 1; } .f-hero h1 { color: #fff; font-size: clamp(28px, 4vw, 44px); margin-bottom: 14px; position: relative; z-index: 1; max-width: 620px; } .f-hero p { color: rgba(255,255,255,.78); max-width: 520px; position: relative; z-index: 1; } .f-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; position: relative; z-index: 1; } .f-home-grid { display: grid; grid-template-columns: 290px 1fr; gap: 24px; align-items: start; } .f-aside { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--f-nav-h) + 16px); } .f-catlist { display: flex; flex-direction: column; padding: 8px; } .f-catitem { display: flex; align-items: center; gap: 11px; padding: 10px 12px; cursor: pointer; font-weight: 500; font-size: 14px; border-radius: 10px; color: var(--f-text-2); transition: all var(--f-trans); } .f-catitem:hover { background: var(--f-surface-2); color: var(--f-text); } .f-catitem.active { background: var(--f-accent-grad); color: #fff; box-shadow: 0 6px 16px rgba(255,90,60,.3); } .f-catitem img { width: 22px; height: 22px; object-fit: contain; border-radius: 6px; } .f-catitem.active img { filter: brightness(0) invert(1); } .f-ads { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; } .f-ad { position: relative; border: 1px solid var(--f-border); border-radius: var(--f-radius); overflow: hidden; box-shadow: var(--f-shadow-sm); transition: all var(--f-trans); min-height: 134px; background: var(--f-surface); } .f-ad:hover { transform: translateY(-3px); box-shadow: var(--f-shadow); } .f-ad img { width: 100%; height: 100%; object-fit: cover; } .f-ad-badge { position: absolute; top: 10px; left: 10px; background: rgba(20,22,28,.6); backdrop-filter: blur(6px); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; } .f-ad-empty { display: grid; place-items: center; text-align: center; padding: 22px; color: var(--f-text-3); border-style: dashed; border-color: var(--f-border-2); } .f-ad-empty i { font-size: 22px; margin-bottom: 6px; color: var(--f-accent); } .f-ad-empty h4 { font-size: 15px; margin: 0; color: var(--f-text-2); } .f-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 20px; } /* ---------- PRODUCT CARD (Forge ticket) ---------- */ .f-product { position: relative; display: flex; flex-direction: column; background: radial-gradient(120% 80% at 100% 0%, rgba(255,90,60,.06), transparent 55%), var(--f-surface); border: 1px solid var(--f-border); border-radius: 20px; overflow: hidden; isolation: isolate; transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow var(--f-trans), border-color var(--f-trans); } .f-product::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--f-accent-grad); opacity: .9; z-index: 4; } .f-product.is-free::before { background: linear-gradient(180deg, #1fae60, #16a34a); } .f-product.is-free { background: radial-gradient(120% 80% at 100% 0%, rgba(31,174,96,.08), transparent 55%), var(--f-surface); } .f-product-media { position: relative; display: block; text-decoration: none; } .f-product-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 11; background: linear-gradient(145deg, var(--f-surface-2), var(--f-surface-3, var(--f-surface-2))); } .f-product-frame img.cover { width: 100%; height: 100%; object-fit: cover; transition: transform .75s cubic-bezier(.2,.7,.3,1), filter .45s ease; } .f-product-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,10,14,.08) 0%, transparent 38%, transparent 55%, rgba(8,10,14,.72) 100%), linear-gradient(90deg, rgba(8,10,14,.18), transparent 42%); opacity: .88; transition: opacity var(--f-trans); } .f-product:hover .f-product-frame img.cover { transform: scale(1.08); filter: saturate(1.12) contrast(1.03); } .f-product:hover .f-product-shade { opacity: 1; } .f-product-cat { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% - 56px); background: rgba(14,16,20,.68); color: rgba(255,255,255,.9); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 5px 12px 5px 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 8px 22px rgba(0,0,0,.32); transition: border-color var(--f-trans), background var(--f-trans); } .f-product:hover .f-product-cat { background: rgba(14,16,20,.82); border-color: rgba(255,255,255,.16); } .f-product-cat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .f-product-cat img { width: 22px; height: 22px; object-fit: contain; border-radius: 8px; flex-shrink: 0; padding: 3px; background: color-mix(in srgb, var(--cat-color, var(--f-accent)) 22%, rgba(255,255,255,.06)); border: 1px solid color-mix(in srgb, var(--cat-color, var(--f-accent)) 38%, rgba(255,255,255,.1)); box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset; } .f-discount-badge { position: absolute; top: 12px; right: 12px; z-index: 3; background: var(--f-accent-grad); color: #fff; border-radius: 999px; padding: 5px 10px; font-weight: 800; font-size: 11px; font-family: 'Space Grotesk', sans-serif; box-shadow: 0 8px 18px rgba(255,90,60,.45); letter-spacing: .02em; } .f-product-view { position: absolute; right: 12px; bottom: 12px; z-index: 4; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.22); opacity: 0; transform: scale(.85); transition: all .35s cubic-bezier(.2,.7,.3,1); } .f-product:hover .f-product-view { opacity: 1; transform: scale(1); } .f-product-body { position: relative; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .f-product-body::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--f-border) 0 5px, transparent 5px 10px); opacity: .75; } .f-product-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .f-product-title { font-family: 'Space Grotesk', sans-serif; font-size: 15.5px; margin: 0; line-height: 1.28; font-weight: 700; letter-spacing: -.02em; flex: 1; min-width: 0; } .f-product-title a { color: var(--f-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; background-image: linear-gradient(var(--f-accent), var(--f-accent)); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: color var(--f-trans), background-size .35s ease; } .f-product-title a:hover { color: var(--f-accent); background-size: 100% 2px; } .f-product-ref { flex-shrink: 0; font: 600 10px/1 'Space Grotesk', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--f-text-3); background: var(--f-surface-2); border: 1px solid var(--f-border); border-radius: 6px; padding: 4px 6px; } .f-product-desc { font-size: 12.5px; color: var(--f-text-3); margin: 0; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--f-trans); } .f-product:hover .f-product-desc { color: var(--f-text-2); } .f-lic-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--f-blue); background: rgba(79,124,255,.1); border: 1px solid rgba(79,124,255,.22); border-radius: 999px; padding: 4px 9px; } .f-product-action { position: relative; display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px 12px 12px; background: linear-gradient(180deg, var(--f-surface-2), var(--f-surface)); } .f-product-action::before, .f-product-action::after { content: ""; position: absolute; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--f-bg, var(--f-surface)); border: 1px solid var(--f-border); z-index: 2; } .f-product-action::before { left: -7px; } .f-product-action::after { right: -7px; } .f-product-action .f-price { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 4px 6px; font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; } .f-product-action .f-price del { font-size: 11px; color: var(--f-text-3); font-weight: 500; margin-top: 3px; } .f-product-action .f-price.free .now { color: var(--f-green); font-size: 18px; } .f-product-cta { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 16px; border-radius: 999px; font-weight: 700; font-size: 12.5px; color: #fff; text-decoration: none; transition: all var(--f-trans); white-space: nowrap; box-shadow: 0 8px 18px rgba(0,0,0,.14); } .f-product-cta i { font-size: 13px; } .f-product-cta.primary { background: var(--f-accent-grad); } .f-product-cta.primary:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 10px 22px rgba(255,90,60,.35); } .f-product-cta.ghost { background: rgba(31,174,96,.14); color: var(--f-green); border: 1px solid rgba(31,174,96,.28); box-shadow: none; } .f-product-cta.ghost:hover { background: rgba(31,174,96,.22); color: #fff; transform: translateY(-1px); } /* subtle rhythm in dense catalog grid */ .f-grid-dense .f-product:nth-child(6n+2) .f-product-frame { aspect-ratio: 4 / 3; } .f-grid-dense .f-product:nth-child(6n+5) .f-product-frame { aspect-ratio: 5 / 4; } @media (prefers-reduced-motion: no-preference) { .f-grid-dense .f-product { animation: fCardIn .55s both; } .f-grid-dense .f-product:nth-child(1) { animation-delay: .02s; } .f-grid-dense .f-product:nth-child(2) { animation-delay: .05s; } .f-grid-dense .f-product:nth-child(3) { animation-delay: .08s; } .f-grid-dense .f-product:nth-child(4) { animation-delay: .11s; } .f-grid-dense .f-product:nth-child(5) { animation-delay: .14s; } .f-grid-dense .f-product:nth-child(6) { animation-delay: .17s; } } @keyframes fCardIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } /* legacy aliases */ .f-cat-pill { display: none; } .f-product-foot, .f-buy, .f-buy-ghost { display: none; } .f-price { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--f-text); } /* ============================================================ PAGINATION ============================================================ */ .f-pagination { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; padding: 0 20px 20px; } .f-pagination .page-link { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--f-border); border-radius: 10px; background: var(--f-surface); color: var(--f-text); font-weight: 600; transition: all var(--f-trans); } .f-pagination .page-link:hover { border-color: var(--f-accent); color: var(--f-accent); transform: translateY(-2px); box-shadow: var(--f-shadow-sm); } .f-pagination .page-item.active .page-link { background: var(--f-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(255,90,60,.3); } .f-pagination .page-item.disabled .page-link { opacity: .4; pointer-events: none; } .f-pagination > ul, .f-pagination > .pagination { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; align-items: center; justify-content: center; } .f-pagination nav { display: flex; justify-content: center; width: 100%; } .f-pagination nav .pagination { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; align-items: center; justify-content: center; } .f-pagination .page-item { list-style: none; } /* ============================================================ FORMS ============================================================ */ .f-field { margin-bottom: 16px; } .f-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; color: var(--f-text); } .f-input, .f-textarea, .f-select { width: 100%; padding: 12px 14px; border: 1px solid var(--f-border-2); border-radius: 11px; background: var(--f-surface); color: var(--f-text); font-size: 14px; font-family: inherit; transition: border-color var(--f-trans), box-shadow var(--f-trans); } .f-input:focus, .f-textarea:focus, .f-select:focus { outline: none; border-color: var(--f-accent); box-shadow: var(--f-ring); } .f-input-group { position: relative; } .f-input-group .f-input { padding-left: 42px; } .f-input-group > i:not(.f-gate-pw-toggle) { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--f-text-3); } /* ============================================================ ALERTS / BADGES ============================================================ */ .f-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); margin-bottom: 18px; background: var(--f-surface); box-shadow: var(--f-shadow-xs); } .f-alert i { font-size: 18px; } .f-alert-warn { border-color: rgba(242,178,27,.4); background: rgba(242,178,27,.08); } .f-alert-warn i { color: var(--f-yellow); } .f-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; } .f-badge-green { background: rgba(31,174,96,.14); color: var(--f-green); } .f-badge-red { background: rgba(239,68,68,.14); color: var(--f-red); } /* ============================================================ GATE — immersive auth portal (login / register / recovery) ============================================================ */ body.f-gate-body { --f-gate-page-bg: #06080c; --f-gate-fg: #eef0f5; --f-gate-fg-strong: #fff; --f-gate-fg-soft: rgba(238, 240, 245, .55); --f-gate-fg-muted: rgba(255, 255, 255, .72); --f-gate-fg-faint: rgba(255, 255, 255, .45); --f-gate-panel: rgba(18, 22, 30, .72); --f-gate-panel-2: rgba(255, 255, 255, .04); --f-gate-line: rgba(255, 255, 255, .08); --f-gate-term-bg: rgba(8, 10, 14, .55); --f-gate-term-bar: rgba(255, 255, 255, .03); --f-gate-input-bg: rgba(255, 255, 255, .05); --f-gate-input-fg: #fff; --f-gate-input-ph: rgba(255, 255, 255, .32); --f-gate-ghost-bg: rgba(255, 255, 255, .04); --f-gate-ghost-fg: rgba(255, 255, 255, .88); --f-gate-scene-a: rgba(79, 124, 255, .22); --f-gate-scene-b: rgba(255, 90, 60, .28); --f-gate-scene-c: rgba(255, 122, 69, .12); --f-gate-scene-base: linear-gradient(180deg, #080b11 0%, #06080c 45%, #0a0d14 100%); --f-gate-grid-line: rgba(255, 90, 60, .09); --f-gate-shadow: 0 18px 50px rgba(0, 0, 0, .35); --f-gate-portal-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 60px rgba(255, 90, 60, .12); --f-gate-scan: rgba(255, 255, 255, .018); --f-gate-eyebrow-fg: #ffb09e; --f-gate-badge-fg: #ff9a84; margin: 0; min-height: 100vh; background: var(--f-gate-page-bg); color: var(--f-gate-fg); overflow-x: hidden; transition: background .35s ease, color .35s ease; } :root[data-theme="light"] body.f-gate-body { --f-gate-page-bg: #f2f4fa; --f-gate-fg: #14161c; --f-gate-fg-strong: #14161c; --f-gate-fg-soft: #565d6b; --f-gate-fg-muted: #565d6b; --f-gate-fg-faint: #969cab; --f-gate-panel: rgba(255, 255, 255, .92); --f-gate-panel-2: rgba(255, 255, 255, .78); --f-gate-line: rgba(20, 22, 28, .1); --f-gate-term-bg: rgba(255, 255, 255, .82); --f-gate-term-bar: rgba(20, 22, 28, .04); --f-gate-input-bg: #fff; --f-gate-input-fg: #14161c; --f-gate-input-ph: #969cab; --f-gate-ghost-bg: #fff; --f-gate-ghost-fg: #14161c; --f-gate-scene-a: rgba(79, 124, 255, .12); --f-gate-scene-b: rgba(255, 90, 60, .14); --f-gate-scene-c: rgba(255, 122, 69, .08); --f-gate-scene-base: linear-gradient(180deg, #fafbfe 0%, #f2f4fa 45%, #eef1f7 100%); --f-gate-grid-line: rgba(255, 90, 60, .07); --f-gate-shadow: 0 18px 50px rgba(20, 22, 28, .08); --f-gate-portal-shadow: 0 24px 60px rgba(20, 22, 28, .12), 0 0 40px rgba(255, 90, 60, .08); --f-gate-scan: rgba(20, 22, 28, .03); --f-gate-eyebrow-fg: #e8462b; --f-gate-badge-fg: #e8462b; } :root[data-theme="light"] body.f-gate-body .f-gate-orb-a { background: rgba(79, 124, 255, .2); } :root[data-theme="light"] body.f-gate-body .f-gate-orb-b { background: rgba(255, 90, 60, .16); } :root[data-theme="light"] body.f-gate-body .f-gate-step-num { color: var(--f-accent); } :root[data-theme="light"] body.f-gate-body .f-gate-portal-glow { background: radial-gradient(circle at 50% 30%, rgba(255, 90, 60, .1), transparent 62%); } body.f-gate-body::before { display: none; } .f-gate { position: relative; min-height: 100vh; display: flex; flex-direction: column; isolation: isolate; } .f-gate-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .f-gate-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55vw 55vh at 12% 18%, var(--f-gate-scene-a), transparent 62%), radial-gradient(48vw 48vh at 88% 78%, var(--f-gate-scene-b), transparent 58%), radial-gradient(40vw 40vh at 70% 10%, var(--f-gate-scene-c), transparent 55%), var(--f-gate-scene-base); transition: background .35s ease; } .f-gate-grid { position: absolute; left: -20%; right: -20%; bottom: -35%; height: 70%; background-image: linear-gradient(var(--f-gate-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--f-gate-grid-line) 1px, transparent 1px); background-size: 44px 44px; transform: perspective(620px) rotateX(68deg); transform-origin: center bottom; mask-image: linear-gradient(to top, #000 15%, transparent 88%); animation: f-gate-grid-drift 28s linear infinite; } .f-gate-orb { position: absolute; border-radius: 50%; filter: blur(42px); animation: f-gate-orb-float 14s ease-in-out infinite; } .f-gate-orb-a { width: 340px; height: 340px; left: -80px; top: 12%; background: rgba(79, 124, 255, .35); } .f-gate-orb-b { width: 420px; height: 420px; right: -120px; bottom: 8%; background: rgba(255, 90, 60, .32); animation-delay: -5s; } .f-gate-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, var(--f-gate-scan) 2px, var(--f-gate-scan) 4px); opacity: .35; } @keyframes f-gate-grid-drift { from { background-position: 0 0, 0 0; } to { background-position: 0 44px, 44px 0; } } @keyframes f-gate-orb-float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(18px, -22px) scale(1.06); } } @keyframes f-gate-border-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes f-gate-shimmer { 0% { transform: translateX(-120%); } 100% { transform: translateX(220%); } } @keyframes f-gate-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes f-gate-cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .f-gate-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px clamp(20px, 4vw, 48px); } .f-gate-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--f-gate-fg-strong); text-decoration: none; font-weight: 700; } .f-gate-brand:hover { color: var(--f-gate-fg-strong); opacity: .92; } .f-gate-brand .f-logo-word { color: var(--f-gate-fg-strong); } .f-gate-top-actions { display: flex; align-items: center; gap: 10px; } .f-gate-iconbtn { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--f-gate-line); border-radius: 12px; background: var(--f-gate-panel-2); color: var(--f-gate-fg-muted); cursor: pointer; transition: all var(--f-trans); text-decoration: none; } .f-gate-iconbtn:hover { border-color: rgba(255, 90, 60, .45); color: var(--f-gate-fg-strong); box-shadow: 0 0 0 1px rgba(255, 90, 60, .15), 0 8px 24px rgba(255, 90, 60, .18); transform: translateY(-2px); } .f-gate-stage { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, 460px); align-items: center; gap: clamp(28px, 5vw, 72px); padding: 12px clamp(20px, 4vw, 48px) 48px; max-width: 1280px; width: 100%; margin: 0 auto; } .f-gate-show { animation: f-gate-rise .7s ease both; } .f-gate-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255, 90, 60, .28); background: rgba(255, 90, 60, .1); color: var(--f-gate-eyebrow-fg); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 22px; } .f-gate-headline { font-family: 'Space Grotesk', sans-serif; font-size: clamp(34px, 4.8vw, 58px); line-height: 1.02; letter-spacing: -.04em; margin: 0 0 16px; color: var(--f-gate-fg-strong); max-width: 11ch; } .f-gate-lead { margin: 0 0 28px; max-width: 46ch; color: var(--f-gate-fg-soft); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.65; } .f-gate-term { margin-bottom: 28px; border-radius: 16px; border: 1px solid var(--f-gate-line); background: var(--f-gate-term-bg); backdrop-filter: blur(14px); overflow: hidden; box-shadow: var(--f-gate-shadow); } .f-gate-term-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--f-gate-line); background: var(--f-gate-term-bar); } .f-gate-term-dot { width: 9px; height: 9px; border-radius: 50%; } .f-gate-term-dot.r { background: #ff5f57; } .f-gate-term-dot.y { background: #febc2e; } .f-gate-term-dot.g { background: #28c840; } .f-gate-term-title { margin-left: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--f-gate-fg-faint); font-weight: 600; } .f-gate-term-body { padding: 16px 18px 18px; font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace; font-size: 12.5px; line-height: 1.75; color: var(--f-gate-fg-muted); } .f-gate-term-line { display: flex; gap: 8px; align-items: baseline; } .f-gate-term-line .prompt { color: var(--f-accent); font-weight: 700; flex-shrink: 0; } .f-gate-term-line .ok { color: #5ee89a; } .f-gate-term-line .wait { color: #ffd27a; } .f-gate-term-cursor { display: inline-block; width: 8px; height: 14px; background: var(--f-accent); margin-left: 2px; animation: f-gate-cursor 1s step-end infinite; vertical-align: middle; } .f-gate-chips { display: flex; flex-wrap: wrap; gap: 10px; } .f-gate-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--f-gate-line); background: var(--f-gate-panel-2); color: var(--f-gate-fg-muted); font-size: 13px; font-weight: 600; } .f-gate-chip i { color: var(--f-accent); } .f-gate-steps { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } .f-gate-step { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--f-gate-line); background: var(--f-gate-panel-2); } .f-gate-step-num { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 90, 60, .16); color: #ffb09e; font-size: 12px; font-weight: 800; } .f-gate-step p { margin: 0; font-size: 14px; color: var(--f-gate-fg-muted); line-height: 1.5; } .f-gate-portal { position: relative; padding: 1px; border-radius: 26px; background: linear-gradient(135deg, rgba(255, 90, 60, .85), rgba(79, 124, 255, .35), rgba(255, 90, 60, .7)); background-size: 220% 220%; animation: f-gate-rise .7s .12s ease both, f-gate-border-shift 7s ease infinite; box-shadow: var(--f-gate-portal-shadow); } .f-gate-portal-glow { position: absolute; inset: -40px; background: radial-gradient(circle at 50% 30%, rgba(255, 90, 60, .22), transparent 62%); pointer-events: none; z-index: 0; } .f-gate-portal-inner { position: relative; z-index: 1; padding: clamp(24px, 3.5vw, 34px); border-radius: 25px; background: var(--f-gate-panel); backdrop-filter: blur(22px); } .f-gate-portal-head { margin-bottom: 24px; } .f-gate-badge { display: inline-block; margin-bottom: 12px; padding: 5px 10px; border-radius: 8px; background: rgba(255, 90, 60, .14); color: var(--f-gate-badge-fg); font-size: 10px; font-weight: 800; letter-spacing: .16em; } .f-gate-portal-head h1 { margin: 0 0 6px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(26px, 3vw, 32px); letter-spacing: -.03em; color: var(--f-gate-fg-strong); } .f-gate-portal-head p { margin: 0; color: var(--f-gate-fg-soft); font-size: 14px; } .f-gate-body .f-field { margin-bottom: 16px; } .f-gate-body .f-label { color: var(--f-gate-fg-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; margin-bottom: 8px; } .f-gate-body .f-input { background: var(--f-gate-input-bg); border: 1px solid var(--f-gate-line); color: var(--f-gate-input-fg); border-radius: 12px; padding: 13px 14px; transition: background .25s ease, border-color .25s ease, color .25s ease; } .f-gate-body .f-input::placeholder { color: var(--f-gate-input-ph); } .f-gate-body .f-input:-webkit-autofill, .f-gate-body .f-input:-webkit-autofill:hover, .f-gate-body .f-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--f-gate-input-bg) inset !important; -webkit-text-fill-color: var(--f-gate-input-fg) !important; caret-color: var(--f-gate-input-fg); transition: background-color 9999s ease-out 0s; } .f-gate-body .f-input:focus { border-color: rgba(255, 90, 60, .55); box-shadow: 0 0 0 3px rgba(255, 90, 60, .16); outline: none; } .f-gate-body .f-input-group { position: relative; } .f-gate-body .f-input-group > i:first-child { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--f-gate-fg-faint); pointer-events: none; z-index: 1; } .f-gate-body .f-input-group .f-input { padding-left: 42px; } .f-gate-body .f-input-group:has(.f-gate-pw-toggle) .f-input { padding-right: 42px; } .f-gate-body .f-input-group .f-input::-ms-reveal, .f-gate-body .f-input-group .f-input::-ms-clear { display: none; } .f-gate-body .f-input-group > .f-gate-pw-toggle { position: absolute; right: 14px; left: auto; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; cursor: pointer; color: var(--f-gate-fg-faint); z-index: 2; line-height: 1; transition: color var(--f-trans); } .f-gate-pw-toggle:hover { color: var(--f-accent); } .f-gate-body .f-btn-primary { position: relative; overflow: hidden; border: 0; background: var(--f-accent-grad); color: #fff; font-weight: 700; box-shadow: 0 12px 32px rgba(255, 90, 60, .35); } .f-gate-body .f-btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transform: translateX(-120%); animation: f-gate-shimmer 3.5s ease-in-out infinite; } .f-gate-body .f-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(255, 90, 60, .42); color: #fff; } .f-gate-body .f-btn:not(.f-btn-primary) { background: var(--f-gate-ghost-bg); border: 1px solid var(--f-gate-line); color: var(--f-gate-ghost-fg); } .f-gate-body .f-btn:not(.f-btn-primary):hover { border-color: rgba(255, 90, 60, .35); background: var(--f-gate-panel-2); color: var(--f-gate-fg-strong); } .f-gate-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .f-gate-social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .f-gate-links { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; font-size: 14px; font-weight: 600; } .f-gate-links a { color: var(--f-gate-fg-muted); text-decoration: none; } .f-gate-links a:hover { color: var(--f-gate-fg-strong); } .f-gate-links .accent { color: var(--f-accent); } .f-gate-links .accent:hover { color: #ff7a62; } .f-gate-links.center { justify-content: center; } .f-gate-links .muted { color: var(--f-gate-fg-faint); } .f-gate-tg { margin-top: 14px; display: flex; justify-content: center; } .f-gate-body .f-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--f-gate-fg-faint); font-size: 13px; } .f-gate-body .f-divider::before, .f-gate-body .f-divider::after { content: ""; flex: 1; height: 1px; background: var(--f-gate-line); } /* legacy auth aliases (recovery ending etc.) */ .f-auth { min-height: 100vh; } .f-auth-card h1 { font-size: 30px; margin-bottom: 6px; } .f-auth-card .sub { color: var(--f-text-3); margin-bottom: 26px; } /* ============================================================ 404 / SYSTEM ============================================================ */ .f-center-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; text-align: center; } .f-bignum { font-family: 'Space Grotesk', sans-serif; font-size: clamp(96px, 18vw, 210px); font-weight: 700; line-height: .9; letter-spacing: -0.04em; background: var(--f-accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ============================================================ FOOTER ============================================================ */ .f-footer { flex-shrink: 0; background: var(--f-surface); border-top: 1px solid var(--f-border); padding: 46px 28px 24px; margin-top: 20px; } .f-footer a { color: var(--f-text-2); } .f-footer a:hover { color: var(--f-accent); } .f-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 32px; } .f-footer h6 { color: var(--f-text); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; } .f-footer p { color: var(--f-text-3); } .f-footer-links { display: flex; flex-direction: column; gap: 9px; } .f-footer-social { display: flex; gap: 10px; margin-top: 14px; } .f-footer-social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--f-border); border-radius: 11px; color: var(--f-text-2); transition: all var(--f-trans); } .f-footer-social a:hover { background: var(--f-accent); border-color: var(--f-accent); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(255,90,60,.35); } .f-footer-bottom { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--f-border); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--f-text-3); font-size: 13px; } /* ---------- back to top ---------- */ .f-totop { position: fixed; right: 22px; bottom: 22px; z-index: 800; width: 48px; height: 48px; display: none; place-items: center; background: var(--f-accent-grad); color: #fff; border: 0; border-radius: 13px; box-shadow: 0 8px 22px rgba(255,90,60,.4); } .f-totop.show { display: grid; } .f-totop:hover { color: #fff; transform: translateY(-3px); } /* ---------- util ---------- */ .f-empty { text-align: center; padding: 40px 20px; color: var(--f-text-3); } .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 991px) { .f-home-grid { grid-template-columns: 1fr; } .f-aside { position: static; } .f-products { grid-template-columns: repeat(2, 1fr); } .f-footer-grid { grid-template-columns: 1fr 1fr; } .f-gate-stage { grid-template-columns: 1fr; padding-bottom: 32px; } .f-gate-show { display: none; } .f-gate-portal { max-width: 480px; margin: 0 auto; width: 100%; } .f-stage { padding: 18px 16px 40px; } } @media (max-width: 720px) { .f-topbar-search { display: none; } .f-search.mobile-open { display: block; position: absolute; left: 12px; right: 12px; top: 12px; max-width: none; z-index: 970; } .f-burger { display: grid; } .f-userchip .who { display: none; } .f-balance .lbl { display: none; } .f-ads { grid-template-columns: 1fr; } .f-products { grid-template-columns: 1fr; } .f-footer-grid { grid-template-columns: 1fr; } .f-hero { padding: 26px; } .f-inv-head { grid-template-columns: 1fr; gap: 10px; } .f-inv-head-actions { justify-content: flex-start; } .f-inv-expand span { display: none; } .f-gate-row-2 { grid-template-columns: 1fr; } .f-gate-headline { max-width: none; } /* Dropdowns in topbar — anchor to viewport, not narrow trigger */ .f-topbar-actions .f-menu .f-pop { position: fixed; top: calc(var(--f-topbar-h) + 8px); right: 12px; left: 12px; width: auto; min-width: 0; max-width: none; transform: translateY(8px) scale(.98); transform-origin: top center; z-index: 1100; } .f-topbar-actions .f-menu.open > .f-pop { transform: translateY(0) scale(1); } } /* ============================================================ MODERN LAYER — motion, depth & polish (additive overrides) ============================================================ */ /* --- Topbar: lift with shadow once the page is scrolled --- */ .f-topbar, .f-nav { transition: box-shadow .3s ease, background .3s ease, border-color .3s ease; } .f-topbar.scrolled, .f-nav.scrolled { box-shadow: 0 10px 30px -12px rgba(20,22,28,.25); } :root[data-theme="dark"] .f-topbar.scrolled, :root[data-theme="dark"] .f-nav.scrolled { box-shadow: 0 10px 34px -10px rgba(0,0,0,.7); } /* --- Animated living gradient hero --- */ .f-hero { background: linear-gradient(125deg, #1b1336 0%, #14161c 38%, #221634 62%, #12141a 100%); background-size: 220% 220%; animation: fHeroPan 16s ease-in-out infinite; border: 1px solid rgba(255,255,255,.06); } .f-hero::before { animation: fFloat 9s ease-in-out infinite; } .f-hero::after { animation: fFloat 11s ease-in-out infinite reverse; } @keyframes fHeroPan { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes fFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-18px, 16px); } } /* hero glass stat chips */ .f-hero-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; position: relative; z-index: 1; } .f-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); color: #fff; font-size: 13px; font-weight: 600; } .f-chip i { color: #ff9a7a; } .f-chip b { font-family: 'Space Grotesk', sans-serif; } /* --- Reveal on scroll (added by JS) --- */ @media (prefers-reduced-motion: no-preference) { .f-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); will-change: opacity, transform; } .f-reveal.f-in { opacity: 1; transform: none; } } /* --- Panels: gradient hairline + deeper hover --- */ .f-panel { transition: transform var(--f-trans), box-shadow var(--f-trans), border-color var(--f-trans); } .f-panel-head { background: linear-gradient(180deg, var(--f-surface-2), transparent); } /* --- Product card: lift + soft glow --- */ .f-product::after { content: ""; position: absolute; inset: 0; border-radius: 18px; pointer-events: none; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--f-trans); } .f-product:hover::after { box-shadow: inset 0 0 0 1.5px rgba(255,90,60,.45); } .f-product:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -16px rgba(255,90,60,.22), var(--f-shadow-lg); border-color: rgba(255,90,60,.25); } .f-product.is-free:hover { box-shadow: 0 18px 40px -16px rgba(31,174,96,.2), var(--f-shadow-lg); border-color: rgba(31,174,96,.28); } /* --- Buttons: subtle sheen on primary --- */ .f-btn-primary { position: relative; overflow: hidden; } .f-btn-primary::before { content: ""; position: absolute; top: 0; left: -130%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); transition: left .6s ease; } .f-btn-primary:hover::before { left: 130%; } /* --- Category bar active pill style --- */ .f-catlink { border-radius: 10px; margin: 6px 0; border-bottom: 0; } .f-catlink.active { background: var(--f-surface-2); color: var(--f-accent); } .f-catbar-inner { gap: 2px; } /* --- Icon buttons: springy press --- */ .f-iconbtn:active, .f-btn:active, .f-balance:active, .f-userchip:active { transform: scale(.96); } /* --- Theme toggle icon spin --- */ #f-theme-toggle i { transition: transform .4s cubic-bezier(.2,.7,.3,1); } #f-theme-toggle:hover i { transform: rotate(40deg); } /* --- Smooth focus rings everywhere --- */ a:focus-visible, button:focus-visible, input:focus-visible { outline: none; box-shadow: var(--f-ring); border-radius: 8px; } /* --- Initial page fade --- */ @media (prefers-reduced-motion: no-preference) { .f-main > .f-container > * { animation: fFadeUp .5s both; } } @keyframes fFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ============================================================ LAYOUT v2 — full-width, pill categories, bento (anti-sidebar) ============================================================ */ /* section heading row */ .f-sectionhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 30px 0 16px; } .f-sectionhead h2 { font-size: clamp(20px, 2.4vw, 26px); margin: 0; } .f-sectionhead .f-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--f-text-3); font-weight: 700; } .f-sectionhead a { font-size: 13px; font-weight: 600; color: var(--f-accent); white-space: nowrap; } /* horizontal category pills (replaces left sidebar) */ .f-catpills { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; scroll-snap-type: x proximity; } .f-catpills::-webkit-scrollbar { display: none; } .f-pill { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; white-space: nowrap; border: 1px solid var(--f-border); border-radius: 999px; background: var(--f-surface); color: var(--f-text-2); font-weight: 600; font-size: 13.5px; cursor: pointer; scroll-snap-align: start; transition: all var(--f-trans); box-shadow: var(--f-shadow-xs); } .f-pill img { width: 20px; height: 20px; object-fit: contain; border-radius: 6px; } .f-pill:hover { color: var(--f-text); border-color: var(--f-border-2); transform: translateY(-2px); box-shadow: var(--f-shadow-sm); } .f-pill.active { background: var(--f-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 8px 18px rgba(255,90,60,.32); } .f-pill.active img { filter: brightness(0) invert(1); } /* asymmetric bento spotlight */ .f-bento { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; } .f-bento-tall { grid-row: span 1; } .f-spot { position: relative; overflow: hidden; border-radius: var(--f-radius); border: 1px solid var(--f-border); min-height: 200px; display: flex; box-shadow: var(--f-shadow-sm); transition: all var(--f-trans); background: var(--f-surface); } .f-spot:hover { transform: translateY(-3px); box-shadow: var(--f-shadow); } .f-spot img { width: 100%; height: 100%; object-fit: cover; } .f-spot-badge { position: absolute; top: 12px; left: 12px; background: rgba(20,22,28,.6); backdrop-filter: blur(6px); color: #fff; font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 999px; } /* promo / info tile */ .f-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 22px; border-radius: var(--f-radius); border: 1px solid var(--f-border); background: var(--f-surface); box-shadow: var(--f-shadow-sm); transition: all var(--f-trans); min-height: 200px; } .f-tile:hover { transform: translateY(-3px); box-shadow: var(--f-shadow); } .f-tile.accent { background: radial-gradient(130% 130% at 0% 0%, #2a2140, #14161c); color: #fff; border-color: transparent; } .f-tile.accent h3, .f-tile.accent p { color: #fff; } .f-tile-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: var(--f-surface-2); color: var(--f-accent); font-size: 20px; } .f-tile.accent .f-tile-ico { background: rgba(255,255,255,.1); color: #ff9a7a; } /* full-width responsive product grid (no sidebar) */ .f-products-wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; padding: 0; } /* slim full-width banner */ .f-banner-wide { display: block; position: relative; overflow: hidden; border-radius: var(--f-radius); border: 1px solid var(--f-border); box-shadow: var(--f-shadow-sm); transition: all var(--f-trans); } .f-banner-wide:hover { transform: translateY(-3px); box-shadow: var(--f-shadow); } .f-banner-wide img { width: 100%; max-height: 150px; object-fit: cover; } /* bottom widgets row */ .f-widgets-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 12px; } @media (max-width: 880px) { .f-bento { grid-template-columns: 1fr; } .f-widgets-row { grid-template-columns: 1fr; } } /* ============================================================ LAYOUT v3 — "SPOTLIGHT FEED" (full-bleed, cinematic, magazine) ============================================================ */ /* break out of the centered container to full viewport width */ .f-bleed { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .f-bleed-inner { max-width: var(--f-maxw); margin: 0 auto; padding: 0 20px; } /* ---- Cinematic full-bleed hero (guests) ---- */ .f-herox { position: relative; overflow: hidden; color: #fff; padding: 72px 0 80px; background: radial-gradient(80% 120% at 85% -10%, rgba(255,90,60,.42), transparent 55%), radial-gradient(70% 120% at 0% 110%, rgba(79,124,255,.34), transparent 55%), linear-gradient(120deg, #14122a 0%, #0e0f16 50%, #1a1430 100%); background-size: 200% 200%, 200% 200%, 220% 220%; animation: fHeroPan 18s ease-in-out infinite; border-bottom: 1px solid var(--f-border); } .f-herox::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); mask-image: linear-gradient(180deg, #000, transparent 80%); } .f-herox-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr .85fr; gap: 40px; align-items: center; } .f-herox-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: #ff9a7a; padding: 7px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.05); backdrop-filter: blur(8px); } .f-herox h1 { color: #fff; font-size: clamp(34px, 5.4vw, 64px); line-height: 1.02; letter-spacing: -0.03em; margin: 20px 0 16px; } .f-herox h1 .accent { background: var(--f-accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .f-herox p { color: rgba(255,255,255,.8); font-size: 17px; max-width: 520px; margin-bottom: 26px; } .f-herox-actions { display: flex; gap: 12px; flex-wrap: wrap; } .f-herox-stats { display: flex; gap: 28px; margin-top: 30px; flex-wrap: wrap; } .f-herox-stat .n { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 30px; line-height: 1; color: #fff; } .f-herox-stat .l { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 4px; } /* floating glass product mockups on the right */ .f-herox-art { position: relative; height: 320px; } .f-herox-card { position: absolute; border-radius: 18px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); backdrop-filter: blur(14px); box-shadow: 0 30px 70px -20px rgba(0,0,0,.6); padding: 18px; color: #fff; } .f-herox-card i { font-size: 22px; color: #ff9a7a; } .f-herox-card .t { font-weight: 600; margin-top: 12px; font-size: 15px; } .f-herox-card .s { font-size: 12.5px; color: rgba(255,255,255,.6); } .f-herox-card.c1 { width: 220px; top: 4px; right: 36px; transform: rotate(4deg); animation: fFloat 8s ease-in-out infinite; } .f-herox-card.c2 { width: 200px; top: 128px; right: 150px; transform: rotate(-5deg); animation: fFloat 10s ease-in-out infinite reverse; } .f-herox-card.c3 { width: 180px; top: 210px; right: 10px; transform: rotate(7deg); animation: fFloat 9s ease-in-out infinite; } /* ---- Logged-in welcome strip (full-bleed slim) ---- */ .f-welcome { position: relative; overflow: hidden; color: #fff; padding: 26px 0; background: linear-gradient(120deg, #1a1430, #0f1016 60%, #221634); background-size: 200% 200%; animation: fHeroPan 18s ease-in-out infinite; border-bottom: 1px solid var(--f-border); } .f-welcome-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .f-welcome h2 { color: #fff; margin: 0; font-size: clamp(20px, 2.6vw, 28px); } .f-welcome p { color: rgba(255,255,255,.7); margin: 4px 0 0; } .f-welcome-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* ---- Sticky category rail with edge fades ---- */ .f-railwrap { position: sticky; top: var(--f-nav-h); z-index: 50; margin: 22px 0 4px; } .f-railwrap::before, .f-railwrap::after { content: ""; position: absolute; top: 0; bottom: 8px; width: 42px; z-index: 2; pointer-events: none; } .f-railwrap::before { left: 0; background: linear-gradient(90deg, var(--f-bg), transparent); } .f-railwrap::after { right: 0; background: linear-gradient(270deg, var(--f-bg), transparent); } /* ---- Magazine mosaic: first product is a wide featured card ---- */ .f-mosaic { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 18px; grid-auto-flow: dense; } .f-mosaic .f-product:first-child { grid-column: span 2; } .f-mosaic .f-product:first-child .f-product-frame { aspect-ratio: 16 / 9; } .f-mosaic .f-product:first-child .f-product-body { padding: 18px 20px 12px; gap: 10px; } .f-mosaic .f-product:first-child .f-product-title { font-size: 22px; } .f-mosaic .f-product:first-child .f-product-desc { -webkit-line-clamp: 3; font-size: 14px; } .f-mosaic .f-product:first-child .f-product-cat { display: none; } .f-mosaic .f-product:first-child .f-product-shade::after { content: "Featured"; position: absolute; z-index: 3; top: 12px; left: 12px; font: 700 11px/1 'Space Grotesk', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--f-accent-grad); padding: 6px 12px; border-radius: 999px; box-shadow: 0 6px 16px rgba(255,90,60,.4); } /* ---- Full-bleed dark CTA / ads band ---- */ .f-ctaband { position: relative; overflow: hidden; color: #fff; margin-top: 50px; padding: 52px 0; background: radial-gradient(60% 120% at 100% 0%, rgba(255,90,60,.3), transparent 55%), linear-gradient(120deg, #12141c, #1a1430); border-top: 1px solid var(--f-border); } .f-ctaband-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .f-glass { border-radius: var(--f-radius); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); backdrop-filter: blur(10px); padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: transform var(--f-trans), background var(--f-trans); overflow: hidden; min-height: 150px; } .f-glass:hover { transform: translateY(-4px); background: rgba(255,255,255,.09); } .f-glass h3 { color: #fff; margin: 0; font-size: 17px; } .f-glass p { color: rgba(255,255,255,.66); margin: 0; font-size: 13.5px; } .f-glass .f-tile-ico { background: rgba(255,255,255,.1); color: #ff9a7a; } .f-glass.ad { padding: 0; } .f-glass.ad img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 991px) { .f-herox-grid { grid-template-columns: 1fr; } .f-herox-art { display: none; } .f-ctaband-grid { grid-template-columns: 1fr; } .f-mosaic .f-product:first-child { grid-column: span 1; } .f-mosaic .f-product:first-child .f-product-frame { aspect-ratio: 4 / 3; } } /* ============================================================ LAYOUT v4 — "COMMAND CENTER" (app dashboard, segmented, dense) ============================================================ */ /* ---- Command bar (header panel with live metrics) ---- */ .f-cmdbar { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; padding: 30px 32px; margin: 8px 0 22px; border: 1px solid var(--f-border); border-radius: var(--f-radius); background: radial-gradient(90% 160% at 100% 0%, rgba(255,90,60,.10), transparent 55%), linear-gradient(180deg, var(--f-surface), var(--f-surface)); box-shadow: var(--f-shadow-sm); } .f-cmdbar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--f-accent-grad); } .f-cmdbar-lead .f-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--f-accent); font-weight: 700; } .f-cmdbar-lead h1 { font-size: clamp(26px, 3.4vw, 40px); margin: 8px 0 8px; letter-spacing: -0.03em; } .f-cmdbar-lead p { margin: 0 0 16px; max-width: 520px; color: var(--f-text-2); } .f-cmdbar-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* ---- Live metrics ---- */ .f-metrics { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 12px; } .f-metric { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); background: var(--f-surface-2); transition: transform var(--f-trans), border-color var(--f-trans); } .f-metric:hover { transform: translateY(-3px); border-color: var(--f-border-2); } .f-metric .ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--f-surface); color: var(--f-accent); font-size: 15px; margin-bottom: 8px; box-shadow: var(--f-shadow-xs); } .f-metric .n { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 26px; line-height: 1; color: var(--f-text); letter-spacing: -0.02em; } .f-metric .l { font-size: 12.5px; color: var(--f-text-3); font-weight: 500; } /* ---- Toolbar: iOS-style segmented control + count ---- */ .f-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 20px; flex-wrap: wrap; } .f-seg { display: inline-flex; gap: 4px; padding: 5px; border-radius: 14px; max-width: 100%; background: var(--f-surface-2); border: 1px solid var(--f-border); overflow-x: auto; scrollbar-width: none; } .f-seg::-webkit-scrollbar { display: none; } .f-seg-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 9px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--f-text-2); transition: all var(--f-trans); } .f-seg-item img { width: 18px; height: 18px; object-fit: contain; border-radius: 5px; } .f-seg-item:hover { color: var(--f-text); } .f-seg-item.active { background: var(--f-surface); color: var(--f-text); box-shadow: var(--f-shadow-sm); } :root[data-theme="dark"] .f-seg-item.active { background: var(--f-surface-3); } .f-toolbar-count { font-size: 13.5px; color: var(--f-text-3); white-space: nowrap; } .f-toolbar-count b { font-family: 'Space Grotesk', sans-serif; color: var(--f-text); font-size: 16px; } /* ---- Dense product grid ---- */ .f-grid-dense { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 16px; padding: 0; } /* ---- Compact ads strip ---- */ .f-adstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; } .f-adcard { position: relative; overflow: hidden; border-radius: var(--f-radius-sm); border: 1px solid var(--f-border); background: var(--f-surface); box-shadow: var(--f-shadow-xs); transition: all var(--f-trans); height: 128px; display: flex; align-items: center; gap: 13px; padding: 16px 18px; } .f-adcard:hover { transform: translateY(-3px); box-shadow: var(--f-shadow-sm); border-color: var(--f-border-2); } /* image banners: show the FULL banner (no ugly crop), letterboxed on a neutral surface */ .f-adcard.has-img { padding: 0; background: var(--f-surface-2); } .f-adcard.has-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; } .f-adcard .ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--f-surface-2); color: var(--f-accent); font-size: 17px; flex-shrink: 0; } .f-adcard .t { font-weight: 600; font-size: 14.5px; color: var(--f-text); } .f-adcard .s { font-size: 12.5px; color: var(--f-text-3); margin-top: 2px; } .f-adcard .badge { position: absolute; top: 9px; left: 9px; z-index: 2; background: rgba(20,22,28,.62); backdrop-filter: blur(6px); color: #fff; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; } @media (max-width: 860px) { .f-cmdbar { grid-template-columns: 1fr; } .f-metrics { grid-template-columns: repeat(4, 1fr); } .f-adstrip { grid-template-columns: 1fr; } } @media (max-width: 560px) { .f-metrics { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ SHARED PAGE PRIMITIVES (used across all inner pages) ============================================================ */ .f-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 6px 0 20px; flex-wrap: wrap; } .f-page-head .lead h1 { font-size: clamp(22px, 3vw, 32px); margin: 0 0 4px; letter-spacing: -0.02em; } .f-page-head .lead p { margin: 0; color: var(--f-text-3); } .f-page-head .f-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--f-accent); font-weight: 700; } /* command-style inner page header (distinct from standart page-head) */ .f-cmdpage { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 20px 24px; margin-bottom: 20px; background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius); box-shadow: var(--f-shadow-xs); position: relative; overflow: hidden; } .f-cmdpage::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--f-accent-grad); } .f-cmdpage .lead { padding-left: 6px; } .f-cmdpage .lead h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(22px, 2.8vw, 30px); margin: 0 0 4px; letter-spacing: -.02em; } .f-cmdpage .lead p { margin: 0; color: var(--f-text-3); font-size: 14px; } .f-cmdpage .f-eyebrow { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--f-accent); font-weight: 700; display: block; margin-bottom: 6px; } .f-cmdpage-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .f-card { position: relative; background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius); box-shadow: var(--f-shadow-sm); overflow: hidden; } .f-card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 4px 4px 0; background: var(--f-accent-grad); opacity: .55; pointer-events: none; } .f-card-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--f-border); } .f-card-head .ico { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--f-surface-2); color: var(--f-accent); font-size: 16px; flex-shrink: 0; } .f-card-head h2, .f-card-head h3 { margin: 0; font-size: 16px; } .f-card-sec { padding: 18px 20px; border-top: 1px solid var(--f-border); } .f-card-sec:first-of-type { border-top: 0; } .f-card-body { padding: 20px; } .f-sec-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; margin-bottom: 12px; color: var(--f-text); } .f-sec-title i { color: var(--f-accent); } .f-meta-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--f-border); font-size: 14px; } .f-meta-row:last-child { border-bottom: 0; } .f-meta-row > div:first-child { color: var(--f-text-3); } .f-meta-row > div:last-child { color: var(--f-text); font-weight: 500; text-align: right; } .text-success { color: var(--f-green) !important; } .text-danger { color: var(--f-red) !important; } .text-muted { color: var(--f-text-3) !important; } .text-center { text-align: center; } .help-text { font-size: 12.5px; color: var(--f-text-3); line-height: 1.5; display: block; margin-top: 6px; } /* generic form controls reused by engine partials */ .form-label, .section-title { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--f-text); } .form-control, .input-modern, .select-stars { width: 100%; padding: 11px 14px; border: 1px solid var(--f-border-2); border-radius: 11px; background: var(--f-surface); color: var(--f-text); font-size: 14px; font-family: inherit; transition: border-color var(--f-trans), box-shadow var(--f-trans); } .form-control:focus, .input-modern:focus, .select-stars:focus { outline: none; border-color: var(--f-accent); box-shadow: var(--f-ring); } .input-group-modern.horizontal { display: flex; gap: 8px; } .input-group-modern.horizontal .input-modern { flex: 1; } /* collapse + modal shims (driven by forge.js) */ .collapse { display: none; } .collapse.show { display: block; } .modal { position: fixed; inset: 0; z-index: 1200; display: none; align-items: flex-start; justify-content: center; padding: 7vh 16px; background: rgba(8,9,12,.55); backdrop-filter: blur(4px); overflow-y: auto; } .modal.show { display: flex; } .modal-dialog { width: 100%; max-width: 520px; } .modal-content { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius); box-shadow: var(--f-shadow-lg); overflow: hidden; } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--f-border); } .modal-title { margin: 0; font-size: 17px; } .modal-body { padding: 20px; color: var(--f-text-2); } .modal-footer { padding: 14px 20px; border-top: 1px solid var(--f-border); display: flex; justify-content: flex-end; gap: 10px; } .btn-close { width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--f-surface-2); color: var(--f-text-2); font-size: 18px; line-height: 1; cursor: pointer; } .btn-close::before { content: "\00d7"; } .btn-close:hover { background: var(--f-surface-3); color: var(--f-text); } body.f-modal-open { overflow: hidden; } /* ============================================================ PRODUCT DETAIL (PDP) ============================================================ */ .f-pdp { display: flex; flex-direction: column; gap: 22px; } .f-pdp-hero { padding: 22px 24px; border-radius: var(--f-radius); background: radial-gradient(90% 120% at 100% 0%, rgba(255,90,60,.08), transparent 55%), var(--f-surface); border: 1px solid var(--f-border); box-shadow: var(--f-shadow-sm); } .f-pdp-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .f-pdp-crumb { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--f-text-3); } .f-pdp-ref { font: 600 10px/1 'Space Grotesk', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--f-text-3); background: var(--f-surface-2); border: 1px solid var(--f-border); border-radius: 6px; padding: 5px 8px; } .f-pdp-title { margin: 0 0 14px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; letter-spacing: -.03em; font-weight: 700; } .f-pdp-metrics { display: flex; flex-wrap: wrap; gap: 10px; } .f-pdp-metric { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--f-border); background: var(--f-surface-2); font-size: 12.5px; font-weight: 600; color: var(--f-text-2); } .f-pdp-metric i { color: var(--f-accent); font-size: 11px; } .f-pdp-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 22px; align-items: start; } .f-pdp-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .f-pdp-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--f-nav-h) + 16px); } .f-pdp-stage { border-radius: var(--f-radius); overflow: hidden; background: var(--f-surface); border: 1px solid var(--f-border); box-shadow: var(--f-shadow-sm); } .product-gallery { padding: 16px; } .product-gallery-main { position: relative; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, var(--f-surface-2), var(--f-surface-3, var(--f-surface-2))); border: 1px solid var(--f-border); min-height: 320px; max-height: min(62vh, 560px); display: grid; place-items: center; } .pg-main { width: 100%; height: 100%; max-height: min(62vh, 560px); object-fit: contain; cursor: zoom-in; display: block; padding: 12px; transition: transform .45s cubic-bezier(.2,.7,.3,1); } .product-gallery-main:hover .pg-main { transform: scale(1.01); } .f-pdp-zoom { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(14,16,20,.72); color: rgba(255,255,255,.92); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12); font-size: 11.5px; font-weight: 600; pointer-events: none; opacity: .85; transition: opacity var(--f-trans); } .product-gallery-main:hover .f-pdp-zoom { opacity: 1; } .product-thumbs { display: flex; gap: 10px; margin-top: 14px; padding-bottom: 4px; overflow-x: auto; flex-wrap: nowrap; scroll-snap-type: x proximity; scrollbar-width: thin; } .product-thumbs::-webkit-scrollbar { height: 6px; } .product-thumbs::-webkit-scrollbar-thumb { background: var(--f-border-2); border-radius: 999px; } .pg-thumb-btn { flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer; scroll-snap-align: start; border-radius: 11px; transition: transform var(--f-trans); } .pg-thumb-btn:hover { transform: translateY(-2px); } .pg-thumb { display: block; width: 96px; height: 68px; object-fit: cover; border-radius: 11px; border: 2px solid var(--f-border); transition: border-color var(--f-trans), box-shadow var(--f-trans); } .pg-thumb-btn:hover .pg-thumb { border-color: var(--f-border-2); } .pg-thumb-btn.active .pg-thumb { border-color: var(--f-accent); box-shadow: 0 0 0 3px rgba(255,90,60,.18); } .f-pdp-buy-top { padding-top: 20px !important; } .f-pdp-price { margin-bottom: 16px; } .f-pdp-price .price { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 34px; line-height: 1; color: var(--f-text); font-variant-numeric: tabular-nums; } .f-pdp-buy .product-actions { margin-top: 4px; } .f-pdp-buy .f-btn-block { padding: 14px 18px; font-size: 14.5px; border-radius: 12px; } .f-price-line { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; } .f-price-line .price { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 30px; color: var(--f-text); } .f-perks { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; list-style: none; } .f-perks li { display: flex; gap: 10px; align-items: center; color: var(--f-text-2); font-size: 13px; } .f-perks i { color: var(--f-accent); width: 18px; text-align: center; flex-shrink: 0; } .f-pdp-details .product-desc { max-width: 72ch; } .product-desc, .order-description { color: var(--f-text-2); line-height: 1.75; word-break: break-word; font-size: 14.5px; } .product-desc img, .order-description img { border-radius: 10px; max-width: 100%; height: auto; } .product-desc p, .order-description p { margin: 0 0 12px; } .product-desc ul, .order-description ul { padding-left: 20px; margin: 0 0 12px; } .product-desc li, .order-description li { margin-bottom: 6px; } #list ul { padding-left: 18px; color: var(--f-text-2); margin: 0; } #list li { margin-bottom: 6px; } /* lightbox (created by inline gallery JS) */ .pg-lightbox { position: fixed; inset: 0; z-index: 1300; display: none; align-items: center; justify-content: center; background: rgba(6,7,10,.92); } .pg-lightbox.open { display: flex; } .pg-zoom-img { max-width: 92vw; max-height: 88vh; object-fit: contain; transition: transform .05s linear; } .pg-close, .pg-nav-btn { position: absolute; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; cursor: pointer; backdrop-filter: blur(6px); } .pg-close { top: 22px; right: 22px; width: 46px; height: 46px; font-size: 24px; } .pg-nav-btn { top: 50%; transform: translateY(-50%); width: 52px; height: 64px; font-size: 30px; } .pg-prev { left: 22px; } .pg-next { right: 22px; } .pg-close:hover, .pg-nav-btn:hover { background: rgba(255,255,255,.2); } body.no-scroll { overflow: hidden; } /* reviews */ .social-chat { display: flex; flex-direction: column; gap: 14px; } .your-msg .media { display: flex; gap: 14px; padding: 14px 16px; background: var(--f-surface-2); border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); } .your-msg .media img.rounded-circle { border-radius: 50%; flex-shrink: 0; width: 46px; height: 46px; object-fit: cover; } .your-msg .media-body { flex: 1; min-width: 0; } .your-msg .media-body a.f-w-600 { font-weight: 600; color: var(--f-text); } .your-msg .media-body small { color: var(--f-text-3); margin-left: 6px; font-size: 12px; } .your-msg .media-body p { margin: 6px 0; color: var(--f-text-2); word-break: break-word; } .your-msg .answer { display: flex; gap: 6px; margin-top: 8px; } .your-msg .answer .btn { color: var(--f-text-3); background: none; border: 0; padding: 4px 6px; cursor: pointer; } .your-msg .answer .btn:hover { color: var(--f-accent); } .f-review-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } .f-review-form .select-stars { max-width: 130px; } .f-review-form .input-modern { flex: 1; min-width: 170px; } /* ============================================================ ORDER — checkout terminal + receipt ticket ============================================================ */ .f-order { display: flex; flex-direction: column; gap: 22px; } .f-order-hero { padding: 22px 24px; border-radius: var(--f-radius); background: radial-gradient(80% 120% at 0% 0%, rgba(255,90,60,.1), transparent 55%), var(--f-surface); border: 1px solid var(--f-border); box-shadow: var(--f-shadow-sm); } .f-order-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .f-order-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--f-accent); } .f-order-ref { font: 600 10px/1 'Space Grotesk', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--f-text-3); background: var(--f-surface-2); border: 1px solid var(--f-border); border-radius: 6px; padding: 5px 8px; } .f-order-title { margin: 0 0 16px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(22px, 2.8vw, 30px); line-height: 1.15; letter-spacing: -.03em; } .f-order-steps { display: flex; flex-wrap: wrap; gap: 8px; } .f-order-step { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--f-border); background: var(--f-surface-2); font-size: 12px; font-weight: 600; color: var(--f-text-3); } .f-order-step em { font-style: normal; font-family: 'Space Grotesk', sans-serif; font-size: 10px; letter-spacing: .06em; opacity: .75; } .f-order-step.is-done { color: var(--f-text-2); border-color: rgba(31,174,96,.28); background: rgba(31,174,96,.08); } .f-order-step.is-active { color: var(--f-accent); border-color: rgba(255,90,60,.35); background: rgba(255,90,60,.1); } .f-order-deck { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 22px; align-items: start; } .f-order-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .f-order-panel { border-radius: var(--f-radius); background: var(--f-surface); border: 1px solid var(--f-border); box-shadow: var(--f-shadow-sm); overflow: hidden; } .f-order-panel-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--f-border); background: linear-gradient(180deg, var(--f-surface-2), transparent); } .f-order-panel-head .ico { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,90,60,.12); color: var(--f-accent); font-size: 17px; flex-shrink: 0; } .f-order-panel-head h2 { margin: 0; font-size: 16px; } .f-order-panel-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--f-text-3); } .f-order-panel-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; } .f-order-field .form-label { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; } .f-order-field .form-label i { color: var(--f-accent); } .f-order-blank .form-label { display: block; margin-bottom: 8px; } .f-order-desc { border-radius: var(--f-radius); background: var(--f-surface); border: 1px solid var(--f-border); box-shadow: var(--f-shadow-sm); overflow: hidden; } .f-order-desc > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; user-select: none; transition: background var(--f-trans); } .f-order-desc > summary::-webkit-details-marker { display: none; } .f-order-desc > summary:hover { background: var(--f-surface-2); } .f-order-desc[open] > summary { border-bottom: 1px solid var(--f-border); } .f-order-desc-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--f-surface-2); color: var(--f-accent); flex-shrink: 0; } .f-order-desc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .f-order-desc-text strong { font-size: 15px; color: var(--f-text); } .f-order-desc-text small { font-size: 12px; color: var(--f-text-3); } .f-order-desc-chevron { color: var(--f-text-3); font-size: 12px; transition: transform var(--f-trans); } .f-order-desc[open] .f-order-desc-chevron { transform: rotate(180deg); } .f-order-desc-body { padding: 18px 20px; } .f-order-desc-body .order-description { max-width: 72ch; } /* receipt ticket sidebar */ .f-order-ticket { position: sticky; top: calc(var(--f-nav-h) + 16px); } .f-order-ticket-inner { position: relative; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 80% at 100% 0%, rgba(255,90,60,.08), transparent 55%), var(--f-surface); border: 1px solid var(--f-border); box-shadow: var(--f-shadow); } .f-order-ticket-inner::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--f-accent-grad); z-index: 1; } .f-order-ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px 14px; border-bottom: 1px dashed var(--f-border); } .f-order-ticket-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--f-text-2); } .f-order-ticket-tag i { color: var(--f-accent); } .f-order-ticket-id { font: 600 10px/1 'Space Grotesk', sans-serif; letter-spacing: .08em; color: var(--f-text-3); background: var(--f-surface-2); border: 1px solid var(--f-border); border-radius: 6px; padding: 4px 7px; } .f-order-lines { padding: 6px 20px 0; } .f-order-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--f-border); font-size: 14px; } .f-order-line .lbl { color: var(--f-text-3); } .f-order-line .val { font-weight: 600; color: var(--f-text); font-variant-numeric: tabular-nums; } .f-order-line.is-discount .val { color: var(--f-green); } .f-order-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 20px; margin: 4px 0 0; border-top: 1px dashed var(--f-border); border-bottom: 1px dashed var(--f-border); background: linear-gradient(180deg, rgba(255,90,60,.06), transparent); } .f-order-total .lbl { font-size: 14px; font-weight: 600; color: var(--f-text); } .f-order-total .val { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 32px; line-height: 1; color: var(--f-accent); font-variant-numeric: tabular-nums; } .f-order-pay { padding: 16px 20px 6px; } .f-order-pay-label { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--f-text-3); margin-bottom: 10px; } .f-order-pay-label i { color: var(--f-accent); } .f-order-pay-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid rgba(255,90,60,.28); background: rgba(255,90,60,.08); cursor: pointer; transition: all var(--f-trans); } .f-order-pay-card:hover { border-color: rgba(255,90,60,.45); background: rgba(255,90,60,.12); } .f-order-pay-card .payment-radio { position: absolute; opacity: 0; pointer-events: none; } .f-order-pay-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--f-accent-grad); color: #fff; flex-shrink: 0; font-size: 16px; } .f-order-pay-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .f-order-pay-text strong { font-size: 14px; color: var(--f-text); } .f-order-pay-text small { font-size: 11.5px; color: var(--f-text-3); } .f-order-pay-check { color: var(--f-accent); font-size: 18px; flex-shrink: 0; } .f-order-submit { margin: 14px 20px 0; padding: 14px 18px; border-radius: 12px; font-size: 14.5px; } .f-order-note { margin: 12px 20px 18px; font-size: 11.5px; color: var(--f-text-3); text-align: center; display: flex; align-items: center; justify-content: center; gap: 7px; } .f-order-note i { color: var(--f-accent); font-size: 11px; } /* legacy aliases */ .f-order-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 20px; align-items: start; } .order-price-rows { display: flex; flex-direction: column; } .order-price-row { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--f-border); } .order-price-row .label { color: var(--f-text-3); } .order-price-row .value { font-weight: 600; } .order-price-row.total { border-bottom: 0; padding-top: 14px; } .order-price-row.total .label { color: var(--f-text); font-weight: 600; } .order-price-row.total .value { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px; color: var(--f-accent); } .payment-method { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--f-border-2); border-radius: 11px; cursor: pointer; } .payment-method .payment-label { font-weight: 500; } .payment-radio { accent-color: var(--f-accent); width: 16px; height: 16px; } /* ============================================================ PURCHASES — inventory list (not standart card grid) ============================================================ */ .f-purch-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; } .f-purch-m { position: relative; overflow: hidden; background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); padding: 18px; box-shadow: var(--f-shadow-xs); } .f-purch-m::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--f-accent-grad); } .f-purch-m .ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,90,60,.12); color: var(--f-accent); margin-bottom: 10px; } .f-purch-m .v { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 26px; line-height: 1; } .f-purch-m .l { font-size: 12.5px; color: var(--f-text-3); margin-top: 5px; } .f-inv-list { display: flex; flex-direction: column; gap: 12px; } .f-inv-pagination { display: flex; justify-content: center; margin-top: 22px; } .f-inv { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius); overflow: hidden; box-shadow: var(--f-shadow-xs); } .f-inv-blocked { border-color: rgba(239,68,68,.35); } .f-inv-head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; border-bottom: 1px solid transparent; } .f-inv.show-body .f-inv-head, .f-inv-head:has(+ .f-inv-body.show) { border-bottom-color: var(--f-border); } .f-inv-num { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px; color: var(--f-text-3); padding: 8px 12px; border-radius: 10px; background: var(--f-surface-2); border: 1px solid var(--f-border); } .f-inv-main { min-width: 0; } .f-inv-title { margin: 0 0 6px; font-size: 17px; font-family: 'Space Grotesk', sans-serif; letter-spacing: -.01em; } .f-inv-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; } .f-inv-pill.ok { background: rgba(31,174,96,.12); color: var(--f-green); } .f-inv-pill.danger { background: rgba(239,68,68,.12); color: var(--f-red); } .f-inv-head-actions { display: flex; align-items: center; gap: 8px; } .f-inv-expand { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 11px; border: 1px solid var(--f-border-2); background: var(--f-surface-2); color: var(--f-text); font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit; transition: all var(--f-trans); } .f-inv-expand:hover { border-color: var(--f-accent); color: var(--f-accent); } .f-inv-chev { font-size: 11px; transition: transform var(--f-trans); } .f-inv-expand[aria-expanded="true"] .f-inv-chev { transform: rotate(180deg); } .f-inv-body { padding: 18px 20px 20px; background: var(--f-surface-2); border-top: 1px solid var(--f-border); } .f-inv-deck { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 22px; align-items: start; } .f-inv-bind { min-width: 0; } .f-inv-ops-label, .f-inv-ops .f-set-label { display: block; margin-bottom: 10px; } .f-inv-ops-row { display: flex; flex-wrap: wrap; gap: 8px; } .f-inv-ops-row .f-btn { flex: 1 1 auto; min-width: 140px; justify-content: center; } .f-inv-data { max-width: 640px; } /* legacy purchase classes (other injections) */ .purchases-list { display: flex; flex-direction: column; gap: 12px; } .stat-label { color: var(--f-text-3); font-size: 13px; } .stat-value { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 24px; margin-top: 4px; display: flex; gap: 8px; align-items: baseline; } .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; } .status-active { background: rgba(31,174,96,.14); color: var(--f-green); } .status-blocked { background: rgba(239,68,68,.14); color: var(--f-red); } .btn-icon, .f-iconbtn-sm { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--f-border); background: var(--f-surface); color: var(--f-text); cursor: pointer; transition: all var(--f-trans); } .btn-icon:hover { border-color: var(--f-border-2); transform: translateY(-2px); } /* map legacy btn-modern to forge button look inside partials */ .btn-modern { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--f-border-2); border-radius: 11px; background: var(--f-surface); color: var(--f-text); font-weight: 600; font-size: 14px; cursor: pointer; transition: all var(--f-trans); } .btn-modern:hover { transform: translateY(-2px); box-shadow: var(--f-shadow-sm); color: var(--f-text); } .btn-modern.btn-primary { background: var(--f-accent-grad); color: #fff; border-color: transparent; } .btn-modern.btn-success { background: var(--f-green); color: #fff; border-color: transparent; } .btn-modern.btn-secondary { background: var(--f-surface-2); color: var(--f-text); } .btn-modern.btn-block { width: 100%; } .btn-modern:disabled { opacity: .5; pointer-events: none; } @media (max-width: 991px) { .f-app { grid-template-columns: 1fr; } html.rail-collapsed .f-app { grid-template-columns: 1fr; } html.rail-collapsed .f-app .f-rail, .f-app.rail-collapsed .f-rail { width: min(280px, 86vw); min-width: 0; padding: 18px 14px; } html.rail-collapsed .f-app .f-rail-brand-text, html.rail-collapsed .f-app .f-rail-link span, html.rail-collapsed .f-app .f-rail-foot-btn span, .f-app.rail-collapsed .f-rail-brand-text, .f-app.rail-collapsed .f-rail-link span, .f-app.rail-collapsed .f-rail-foot-btn span { max-width: 180px; opacity: 1; pointer-events: auto; } html.rail-collapsed .f-app .f-rail-brand, .f-app.rail-collapsed .f-rail-brand { justify-content: flex-start; gap: 12px; } html.rail-collapsed .f-app .f-rail-link, .f-app.rail-collapsed .f-rail-link { justify-content: flex-start; gap: 12px; padding: 11px 12px; } html.rail-collapsed .f-app .f-rail-foot-btn, .f-app.rail-collapsed .f-rail-foot-btn { justify-content: flex-start; gap: 12px; padding: 11px 12px; } .f-rail { position: fixed; left: 0; top: 0; bottom: 0; width: min(280px, 86vw); transform: translateX(-105%); transition: transform var(--f-trans); z-index: 990; box-shadow: var(--f-shadow-lg); } .f-rail.open { transform: translateX(0); } .f-rail-backdrop { display: block; position: fixed; inset: 0; z-index: 980; background: rgba(8,9,12,.5); backdrop-filter: blur(3px); } .f-rail-backdrop[hidden] { display: none !important; } .f-pdp-layout, .f-order-grid, .f-order-deck { grid-template-columns: 1fr; } .f-pdp-aside, .f-order-ticket { position: static; } .f-order-ticket { order: -1; } .f-order-hero { padding: 18px 16px; } .f-order-total .val { font-size: 28px; } .f-pdp-hero { padding: 18px 16px; } .product-gallery-main { min-height: 240px; max-height: 50vh; } .pg-main { max-height: 50vh; } .f-inv-deck { grid-template-columns: 1fr; } .f-purch-metrics { grid-template-columns: 1fr; } } /* ============================================================ TABLE (generic, replaces DataTables look) ============================================================ */ .f-table-wrap { overflow-x: auto; } table.f-table, table.display, table.table { width: 100%; border-collapse: collapse; font-size: 14px; } table.f-table th, table.display th, table.table th { text-align: left; padding: 12px 14px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--f-text-3); border-bottom: 1px solid var(--f-border); white-space: nowrap; } table.f-table td, table.display td, table.table td { padding: 13px 14px; border-bottom: 1px solid var(--f-border); color: var(--f-text-2); vertical-align: middle; } table.f-table tbody tr:hover td, table.display tbody tr:hover td, table.table tbody tr:hover td { background: var(--f-surface-2); } table.f-table tbody tr:last-child td { border-bottom: 0; } /* ============================================================ PROFILE ============================================================ */ .f-profile { display: flex; flex-direction: column; gap: 20px; } /* hero */ .f-prof-hero { position: relative; background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius); overflow: hidden; box-shadow: var(--f-shadow-sm); } .f-prof-hero-cover { height: 210px; background: var(--f-accent-grad); background-size: cover; background-position: center; position: relative; } .f-prof-hero-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--f-surface) 2%, rgba(0,0,0,.18) 45%, rgba(0,0,0,0) 75%); } .f-prof-hero-gear { position: absolute; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(0,0,0,.4); color: #fff; backdrop-filter: blur(8px); transition: all var(--f-trans); } .f-prof-hero-gear:hover { background: rgba(0,0,0,.6); color: #fff; transform: rotate(40deg); } .f-prof-hero-inner { display: flex; align-items: flex-end; gap: 22px; padding: 0 28px 24px; margin-top: -76px; position: relative; z-index: 1; } .f-prof-hero-avatar-wrap { position: relative; flex-shrink: 0; } .f-prof-hero-avatar { width: 132px; height: 132px; border-radius: 30px; object-fit: cover; border: 5px solid var(--f-surface); box-shadow: var(--f-shadow); background: var(--f-surface-2); display: block; } .f-prof-online-dot { position: absolute; right: 8px; bottom: 8px; width: 22px; height: 22px; border-radius: 50%; border: 4px solid var(--f-surface); background: var(--f-text-3); } .f-prof-online-dot.on { background: var(--f-green); box-shadow: 0 0 0 4px rgba(31,174,96,.18); } .f-prof-hero-main { flex: 1 1 auto; min-width: 0; padding-bottom: 8px; } .f-prof-hero-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -.02em; font-size: clamp(24px, 3vw, 34px); line-height: 1.05; margin: 0 0 12px; color: var(--f-text); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .f-prof-hero-name .fa-check, .f-prof-hero-name .fa-check-circle { color: var(--f-blue); font-size: .62em; } .f-prof-hero-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .f-prof-role { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--f-accent); background: rgba(255,90,60,.12); padding: 5px 13px; border-radius: 999px; } .f-prof-login { color: var(--f-text-3); font-size: 14px; font-weight: 500; } .f-prof-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--f-text-3); } .f-prof-status i { font-size: 8px; color: var(--f-text-3); } .f-prof-status.on { color: var(--f-green); } .f-prof-status.on i { color: var(--f-green); } .f-prof-hero-actions { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; flex-shrink: 0; } .f-prof-hero-actions #result_add_friends { display: inline-flex; } /* metrics strip */ .f-prof-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .f-prof-m { position: relative; overflow: hidden; background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); padding: 18px 18px 16px; box-shadow: var(--f-shadow-xs); } .f-prof-m::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--f-accent-grad); opacity: .9; } .f-prof-m .ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,90,60,.12); color: var(--f-accent); font-size: 15px; margin-bottom: 12px; } .f-prof-m .v { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 24px; line-height: 1; color: var(--f-text); } .f-prof-m .l { font-size: 12.5px; color: var(--f-text-3); margin-top: 5px; } /* body columns */ .f-prof-cols { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 20px; align-items: start; } .f-prof-main { min-width: 0; } .f-prof-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--f-nav-h) + 16px); } .f-prof-side-count { margin-left: auto; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px; color: var(--f-accent); background: rgba(255,90,60,.12); padding: 3px 10px; border-radius: 999px; } .f-prof-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px; } .f-prod-thumb { aspect-ratio: 1; border-radius: 13px; overflow: hidden; background: var(--f-surface-2) center/cover no-repeat; border: 1px solid var(--f-border); cursor: pointer; position: relative; transition: transform var(--f-trans), border-color var(--f-trans); } .f-prod-thumb:hover { transform: translateY(-3px); border-color: var(--f-accent); } .f-prod-thumb-go { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; opacity: 0; transition: opacity var(--f-trans); } .f-prod-thumb:hover .f-prod-thumb-go { opacity: 1; } /* wall */ .f-wall { display: flex; flex-direction: column; gap: 16px; } .f-wall-composer textarea { width: 100%; padding: 13px 15px; border: 1px solid var(--f-border-2); border-radius: 12px; background: var(--f-surface); color: var(--f-text); font-family: inherit; font-size: 14px; resize: vertical; } .f-wall-composer textarea:focus { outline: none; border-color: var(--f-accent); box-shadow: var(--f-ring); } .f-wall-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; } .f-wall-tool { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; color: var(--f-text-3); font-size: 13px; cursor: pointer; padding: 6px; } .f-wall-tool:hover { color: var(--f-accent); } .f-wall-post { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); padding: 16px; box-shadow: var(--f-shadow-xs); } .f-wall-post-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .f-wall-post-head img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .f-wall-post-author a { font-weight: 600; color: var(--f-text); } .f-wall-post-time { font-size: 12px; color: var(--f-text-3); display: flex; align-items: center; gap: 6px; margin-top: 2px; } .f-wall-post-msg { color: var(--f-text-2); margin: 0; line-height: 1.6; word-break: break-word; } .f-wall-attach { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px; border: 1px solid var(--f-border); border-radius: 11px; background: var(--f-surface-2); } .f-wall-attach a { color: var(--f-text); display: inline-flex; gap: 8px; align-items: center; } .f-empty-state { text-align: center; padding: 40px 20px; color: var(--f-text-3); } .f-empty-state i { font-size: 38px; margin-bottom: 12px; color: var(--f-text-3); opacity: .5; } .f-empty-state .t { font-weight: 600; color: var(--f-text-2); } .verified-badge { color: var(--f-blue); margin-left: 4px; } /* ============================================================ WALLET ============================================================ */ .f-wallet-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 20px; } .f-wstat { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius); padding: 22px; box-shadow: var(--f-shadow-sm); position: relative; overflow: hidden; } .f-wstat .lbl { color: var(--f-text-3); font-size: 13px; } .f-wstat .val { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 30px; margin: 6px 0 8px; } .f-wstat .ico { position: absolute; top: 20px; right: 20px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: var(--f-surface-2); color: var(--f-accent); font-size: 19px; } .f-wstat a { color: var(--f-accent); font-size: 13.5px; font-weight: 600; } /* ============================================================ REPLENISHMENT ============================================================ */ /* ============================================================ REPLENISHMENT — Vault Terminal ============================================================ */ .f-vault { display: flex; flex-direction: column; gap: 22px; } .f-vault-hero { position: relative; overflow: hidden; padding: 24px 26px; border-radius: var(--f-radius); background: radial-gradient(90% 120% at 100% 0%, rgba(255,90,60,.14), transparent 55%), radial-gradient(60% 80% at 0% 100%, rgba(79,124,255,.08), transparent 50%), var(--f-surface); border: 1px solid var(--f-border); box-shadow: var(--f-shadow-sm); } .f-vault-hero-glow { position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: var(--f-accent-grad); filter: blur(40px); opacity: .35; pointer-events: none; } .f-vault-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .f-vault-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--f-accent); } .f-vault-tag { font: 600 10px/1 'Space Grotesk', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--f-text-3); background: var(--f-surface-2); border: 1px solid var(--f-border); border-radius: 6px; padding: 5px 8px; } .f-vault-title { margin: 0 0 8px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.03em; } .f-vault-sub { margin: 0 0 16px; color: var(--f-text-3); font-size: 14px; max-width: 56ch; } .f-vault-flow { display: flex; flex-wrap: wrap; gap: 8px; } .f-vault-flow span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--f-border); background: var(--f-surface-2); font-size: 12px; font-weight: 600; color: var(--f-text-3); } .f-vault-flow span em { font-style: normal; font-family: 'Space Grotesk', sans-serif; font-size: 10px; opacity: .75; } .f-vault-flow span.is-active { color: var(--f-accent); border-color: rgba(255,90,60,.35); background: rgba(255,90,60,.1); } .f-vault-deck { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: stretch; } .f-vault-deck::before { content: ""; position: absolute; left: 50%; top: 20px; bottom: 20px; width: 1px; transform: translateX(-50%); pointer-events: none; background: linear-gradient(180deg, transparent, var(--f-border) 12%, var(--f-border) 88%, transparent); } .f-vault-deck::after { content: "или"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; padding: 7px 14px; border-radius: 999px; background: var(--f-bg); border: 1px solid var(--f-border); box-shadow: var(--f-shadow-xs); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--f-text-3); } .f-vault-manual, .f-vault-auto { display: flex; flex-direction: column; min-width: 0; } .f-vault-manual { order: 1; } .f-vault-auto { order: 2; } .f-vault-ticket, .f-vault-panel { flex: 1; display: flex; flex-direction: column; height: 100%; } .f-vault-reqs { flex: 1; } .f-vault-gateways { flex: 1; align-content: start; } .f-vault-action { margin-top: auto; } .f-vault-form { margin-top: auto; } .f-vault-panel { border-radius: var(--f-radius); background: var(--f-surface); border: 1px solid var(--f-border); box-shadow: var(--f-shadow-sm); overflow: hidden; } .f-vault-panel--alt { border-color: var(--f-border); box-shadow: var(--f-shadow-xs); background: linear-gradient(180deg, var(--f-surface), var(--f-surface-2)); } .f-vault-panel--alt .f-vault-panel-head .ico { background: var(--f-surface); color: var(--f-text-3); } .f-vault-panel--alt .f-vault-panel-head h2 { font-size: 15px; color: var(--f-text-2); } .f-vault-panel-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--f-border); background: linear-gradient(180deg, var(--f-surface-2), transparent); } .f-vault-panel-head .ico { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,90,60,.12); color: var(--f-accent); font-size: 17px; flex-shrink: 0; } .f-vault-panel-head h2 { margin: 0; font-size: 16px; } .f-vault-panel-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--f-text-3); } .f-vault-amount { padding: 16px 18px; border-bottom: 1px dashed var(--f-border); } .f-vault-amount-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--f-text-3); margin-bottom: 10px; } .f-vault-amount-row { display: flex; align-items: stretch; border-radius: 12px; overflow: hidden; border: 1px solid var(--f-border-2); background: var(--f-surface-2); } .f-vault-amount-input { flex: 1; border: 0; background: transparent; color: var(--f-text); font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 24px; line-height: 1.2; padding: 11px 14px; min-width: 0; font-variant-numeric: tabular-nums; } .f-vault-amount-input:focus { outline: none; } .f-vault-amount-input::placeholder { color: var(--f-text-3); opacity: .5; } .f-vault-amount-cur { display: grid; place-items: center; padding: 0 14px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; color: var(--f-text-2); border-left: 1px solid var(--f-border); background: var(--f-surface); } .f-vault-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .f-vault-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--f-border); background: var(--f-surface); color: var(--f-text-2); font-weight: 600; font-size: 12px; cursor: pointer; transition: all var(--f-trans); font-family: 'Space Grotesk', sans-serif; } .f-vault-chip:hover { border-color: var(--f-border-2); color: var(--f-text); } .f-vault-chip.is-active { background: var(--f-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(255,90,60,.22); } .f-vault-gateways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 16px 18px; } .f-vault-gw { display: flex; flex-direction: row; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--f-border); background: var(--f-surface); cursor: pointer; transition: all var(--f-trans); font-family: inherit; color: inherit; } .f-vault-gw:hover { border-color: var(--f-border-2); } .f-vault-gw.is-active { border-color: var(--f-border-2); background: var(--f-surface-2); box-shadow: none; } .f-vault-gw.is-featured { grid-column: span 1; } .f-vault-gw-top { display: flex; align-items: center; flex-shrink: 0; } .f-vault-gw-ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--f-surface-2); color: var(--f-text-3); font-size: 14px; flex-shrink: 0; } .f-vault-gw.is-active .f-vault-gw-ico { background: var(--f-surface-3, var(--f-surface-2)); color: var(--f-text-2); } .f-vault-gw-name { font-weight: 600; font-size: 13px; color: var(--f-text); flex: 1; } .f-vault-gw-hint { font-size: 11px; color: var(--f-text-3); margin-left: auto; flex-shrink: 0; } .f-vault-action { padding: 12px 16px 16px; } .f-vault-hint { margin: 0 0 10px; font-size: 11.5px; color: var(--f-text-3); } .f-vault-pay { padding: 11px 14px; font-size: 13px; border-radius: 10px; } /* manual transfer ticket */ .f-vault-manual, .f-vault-auto { position: sticky; top: calc(var(--f-nav-h) + 16px); align-self: start; } .f-vault-ticket { border-radius: 20px; overflow: hidden; background: radial-gradient(120% 80% at 100% 0%, rgba(79,124,255,.08), transparent 55%), var(--f-surface); border: 1px solid var(--f-border); box-shadow: var(--f-shadow); } .f-vault-ticket.is-primary { border-color: rgba(255,90,60,.22); box-shadow: var(--f-shadow-sm); background: radial-gradient(90% 100% at 0% 0%, rgba(255,90,60,.07), transparent 55%), var(--f-surface); } .f-vault-ticket.is-primary .f-vault-ticket-head { border-bottom-color: var(--f-border); } .f-vault-ticket-badge { font: 700 9.5px/1 'Space Grotesk', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--f-accent-grad); border-radius: 999px; padding: 5px 10px; box-shadow: 0 6px 14px rgba(255,90,60,.28); } .f-vault-ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-bottom: 1px dashed var(--f-border); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--f-text-2); } .f-vault-ticket-head i { color: var(--f-accent); margin-right: 6px; } .f-vault-ticket-id { font: 600 10px/1 'Space Grotesk', sans-serif; letter-spacing: .08em; color: var(--f-text-3); background: var(--f-surface-2); border: 1px solid var(--f-border); border-radius: 6px; padding: 4px 7px; } .f-vault-ticket-note { display: flex; gap: 10px; align-items: flex-start; padding: 14px 18px; font-size: 12.5px; color: var(--f-text-3); line-height: 1.5; border-bottom: 1px solid var(--f-border); background: rgba(79,124,255,.04); } .f-vault-ticket-note i { color: var(--f-blue); margin-top: 2px; flex-shrink: 0; } .f-vault-reqs { padding: 10px 18px 6px; display: flex; flex-direction: column; gap: 10px; } .f-vault-req { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--f-border); background: var(--f-surface-2); transition: border-color var(--f-trans); } .f-vault-req:hover { border-color: var(--f-border-2); } .f-vault-req-meta { flex: 1; min-width: 0; } .f-vault-req .lbl { display: block; font-size: 11px; color: var(--f-text-3); margin-bottom: 3px; } .f-vault-req .val { display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px; color: var(--f-text); word-break: break-all; } .f-vault-copy { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--f-border); background: var(--f-surface); color: var(--f-text-2); cursor: pointer; transition: all var(--f-trans); } .f-vault-copy:hover { border-color: var(--f-accent); color: var(--f-accent); background: rgba(255,90,60,.08); } .f-vault-form { padding: 14px 18px 18px; border-top: 1px dashed var(--f-border); } .f-vault-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } .f-vault-form .input-group-modern { margin-bottom: 12px; } .f-vault-form .input-group-modern:last-of-type { margin-bottom: 14px; } /* legacy aliases */ .f-repl-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,420px); gap: 20px; align-items: start; } .f-repl-providers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .f-provider { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius); padding: 18px; box-shadow: var(--f-shadow-xs); transition: all var(--f-trans); } .repl-req-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--f-border); } .repl-req-label { font-size: 12.5px; color: var(--f-text-3); } .repl-req-value { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: var(--f-text); margin-top: 2px; } .repl-copy-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--f-border); border-radius: 9px; background: var(--f-surface); color: var(--f-text-2); font-size: 12.5px; cursor: pointer; white-space: nowrap; transition: all var(--f-trans); } .repl-copy-btn:hover { border-color: var(--f-accent); color: var(--f-accent); } .f-repl-form .input-group-modern { margin-bottom: 14px; } .input-group { display: flex; gap: 8px; } .input-group .form-control { flex: 1; } @media (max-width: 991px) { .f-prof-cols, .f-repl-grid, .f-vault-deck { grid-template-columns: 1fr; } .f-vault-deck::before, .f-vault-deck::after { display: none; } .f-vault-manual { position: static; order: 1; } .f-vault-auto { position: static; order: 2; } .f-vault-gateways { grid-template-columns: 1fr; } .f-vault-form-grid { grid-template-columns: 1fr; } .f-vault-amount-input { font-size: 22px; } .f-prof-side { position: static; } .f-prof-metrics { grid-template-columns: repeat(2, 1fr); } .f-wallet-stats { grid-template-columns: 1fr; } .f-repl-providers { grid-template-columns: 1fr; } } @media (max-width: 620px) { .f-prof-hero-cover { height: 150px; } .f-prof-hero-inner { flex-direction: column; align-items: stretch; text-align: left; margin-top: -64px; padding: 0 18px 20px; gap: 14px; } .f-prof-hero-avatar { width: 104px; height: 104px; border-radius: 26px; } .f-prof-hero-actions { flex-wrap: wrap; } .f-prof-hero-actions .f-btn, .f-prof-hero-actions #result_add_friends { flex: 1; } .f-prof-metrics { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ SETTINGS ============================================================ */ /* ============================================================ SETTINGS — control deck ============================================================ */ .f-set { display: flex; flex-direction: column; gap: 18px; } .f-set-id { display: flex; align-items: center; gap: 18px; padding: 18px 22px; background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius); box-shadow: var(--f-shadow-sm); overflow: hidden; position: relative; } .f-set-id-cover { position: absolute; inset: 0; background: var(--f-accent-grad); background-size: cover; background-position: center; opacity: .14; pointer-events: none; } .f-set-id-avatar { width: 72px; height: 72px; border-radius: 20px; object-fit: cover; border: 3px solid var(--f-surface); box-shadow: var(--f-shadow-sm); background: var(--f-surface-2); flex-shrink: 0; position: relative; z-index: 1; } .f-set-id-main { flex: 1; min-width: 0; position: relative; z-index: 1; } .f-set-id-main h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(20px, 2.5vw, 28px); margin: 4px 0 2px; letter-spacing: -.02em; } .f-set-id-main p { margin: 0; color: var(--f-text-3); font-size: 14px; } .f-set-id > .f-btn { position: relative; z-index: 1; flex-shrink: 0; } .f-set-deck { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 18px; align-items: start; } .f-set-rail { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius); box-shadow: var(--f-shadow-xs); position: sticky; top: calc(var(--f-nav-h) + 16px); } .f-set-tab { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 14px; border: 1px solid transparent; border-radius: 12px; background: none; color: var(--f-text-2); font-weight: 600; font-size: 14px; text-align: left; cursor: pointer; transition: all var(--f-trans); font-family: inherit; } .f-set-tab i { width: 18px; text-align: center; color: var(--f-text-3); transition: color var(--f-trans); } .f-set-tab:hover { background: var(--f-surface-2); color: var(--f-text); } .f-set-tab.active { background: rgba(255,90,60,.1); border-color: rgba(255,90,60,.28); color: var(--f-accent); } .f-set-tab.active i { color: var(--f-accent); } .f-set-panels { min-width: 0; } .f-set-panel { display: none; padding: 24px 26px; background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius); box-shadow: var(--f-shadow-sm); } .f-set-panel.active { display: block; } .f-set-panel-head { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--f-border); } .f-set-panel-head h2 { font-family: 'Space Grotesk', sans-serif; font-size: 22px; margin: 0 0 6px; letter-spacing: -.02em; } .f-set-panel-head p { margin: 0; color: var(--f-text-3); font-size: 14px; line-height: 1.55; } .f-set-panel-foot { margin-top: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .f-set-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; } .f-set-field { display: flex; flex-direction: column; gap: 8px; } .f-set-label { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--f-text-3); } .f-set-inline { display: flex; gap: 10px; align-items: stretch; } .f-set-inline .input-modern { flex: 1; } .f-set-alert { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--f-radius-sm); background: rgba(79,124,255,.1); border: 1px solid rgba(79,124,255,.28); margin-bottom: 16px; } .f-set-alert i { color: var(--f-blue); font-size: 22px; margin-top: 2px; } .f-set-alert p { margin: 4px 0 0; color: var(--f-text-2); font-size: 14px; line-height: 1.5; } .f-set-alert.info { background: rgba(255,90,60,.08); border-color: rgba(255,90,60,.22); } .f-set-alert.info i { color: var(--f-accent); } .f-set-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; } .f-set-media-card { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); background: var(--f-surface-2); } .f-set-media-preview { border-radius: 14px; overflow: hidden; background: var(--f-accent-grad); background-size: cover; background-position: center; } .f-set-media-preview.avatar { width: 88px; height: 88px; border-radius: 22px; } .f-set-media-preview.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .f-set-media-preview.cover { height: 88px; } .f-set-media-body h3 { margin: 0 0 4px; font-size: 15px; } .f-set-media-body p { margin: 0 0 12px; font-size: 13px; color: var(--f-text-3); } .f-set-drop { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 2px dashed var(--f-border-2); border-radius: 11px; background: var(--f-surface); color: var(--f-text-2); font-weight: 600; font-size: 13px; cursor: pointer; transition: all var(--f-trans); } .f-set-drop:hover { border-color: var(--f-accent); color: var(--f-accent); } .f-set-tile { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); background: var(--f-surface-2); } .f-set-tile-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,90,60,.12); color: var(--f-accent); font-size: 18px; flex-shrink: 0; } .f-set-tile-body { flex: 1; min-width: 0; } .f-set-tile-body h3 { margin: 0 0 3px; font-size: 15px; } .f-set-tile-body p { margin: 0; font-size: 13px; color: var(--f-text-3); } .f-set-social-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } .f-set-social { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); background: var(--f-surface-2); } .f-set-social.wide { grid-column: 1 / -1; flex-wrap: wrap; } .f-set-social.linked { border-color: rgba(31,174,96,.35); background: rgba(31,174,96,.06); } .f-set-social-brand { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #fff; font-size: 18px; flex-shrink: 0; } .f-set-social-brand.vk { background: #4a76a8; } .f-set-social-brand.steam { background: #1b2838; } .f-set-social-brand.tg { background: #229ed9; } .f-set-social-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .f-set-social-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } .f-set-social-info .nm { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .f-set-social-info .st { font-size: 12px; color: var(--f-text-3); } .file-upload { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .file-upload input[type="file"] { display: none; } .file-upload-name { font-size: 12.5px; color: var(--f-text-3); } .alert-modern { padding: 14px 16px; border-radius: var(--f-radius-sm); margin-bottom: 14px; font-size: 14px; line-height: 1.5; } .alert-modern.alert-info { background: rgba(79,124,255,.1); border: 1px solid rgba(79,124,255,.3); color: var(--f-text); } .social-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); margin-bottom: 10px; background: var(--f-surface); } .social-item.linked { border-color: rgba(31,174,96,.4); background: rgba(31,174,96,.06); } .social-info { display: flex; align-items: center; gap: 10px; min-width: 0; } .social-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; } .social-icon { font-size: 20px; color: var(--f-text-2); width: 24px; text-align: center; } .social-name { font-weight: 500; } .text-warning { color: var(--f-yellow); } .btn-ghost-light { background: var(--f-surface-2); } /* ============================================================ OUTPUT (seller withdrawals) ============================================================ */ .f-out-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 20px; } .f-out-stat { position: relative; overflow: hidden; padding: 22px; border-radius: var(--f-radius); color: #fff; box-shadow: var(--f-shadow); } .f-out-stat.purple { background: linear-gradient(135deg, #6d4aff, #9b5cff); } .f-out-stat.green { background: linear-gradient(135deg, #1fae60, #16c772); } .f-out-stat.orange { background: linear-gradient(135deg, #ff7a45, #ff4d6d); } .f-out-stat .ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: rgba(255,255,255,.18); font-size: 19px; margin-bottom: 14px; } .f-out-stat .lbl { font-size: 13px; opacity: .85; } .f-out-stat .val { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 30px; margin-top: 4px; } .f-out-stat a { color: #fff; font-size: 13px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; margin-top: 10px; opacity: .9; } .f-out-methods { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; } .f-out-method { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius); padding: 20px; box-shadow: var(--f-shadow-sm); } .f-out-method-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .f-out-method-head .ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: var(--f-surface-2); color: var(--f-accent); font-size: 19px; } .f-out-method-head h3 { margin: 0; font-size: 16px; } .f-out-method-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--f-text-3); } .commission-badge { margin-left: auto; background: rgba(255,90,60,.12); color: var(--f-accent); font-weight: 700; font-size: 13px; padding: 5px 11px; border-radius: 999px; } .modern-input-wrapper, .modern-select-wrapper { position: relative; margin-bottom: 12px; } .modern-input-wrapper > i, .modern-select-wrapper > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--f-text-3); } .modern-input, .modern-select { width: 100%; padding: 12px 14px 12px 40px; border: 1px solid var(--f-border-2); border-radius: 11px; background: var(--f-surface); color: var(--f-text); font-size: 14px; font-family: inherit; } .modern-input:focus, .modern-select:focus { outline: none; border-color: var(--f-accent); box-shadow: var(--f-ring); } .output-method-submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 0; border-radius: 11px; background: var(--f-accent-grad); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; transition: all var(--f-trans); } .output-method-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255,90,60,.4); } .output-status-badge, .output-system-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; } .output-status-badge.success { background: rgba(31,174,96,.14); color: var(--f-green); } .output-status-badge.processing { background: rgba(242,178,27,.14); color: var(--f-yellow); } .output-status-badge.error { background: rgba(239,68,68,.14); color: var(--f-red); } .output-system-badge { background: var(--f-surface-2); color: var(--f-text-2); } /* ============================================================ LOGIN HISTORY — Security Log timeline ============================================================ */ .section-subtitle { color: var(--f-text-3); margin: 0 0 14px; } .history-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; background: var(--f-surface-2); border-radius: var(--f-radius-sm); font-size: 13.5px; color: var(--f-text-2); margin-bottom: 16px; } .history-summary .divider { color: var(--f-border-2); } .f-sess { display: flex; flex-direction: column; gap: 20px; } .f-sess-hero { padding: 22px 24px; border-radius: var(--f-radius); background: radial-gradient(90% 120% at 100% 0%, rgba(255,90,60,.08), transparent 55%), var(--f-surface); border: 1px solid var(--f-border); box-shadow: var(--f-shadow-sm); } .f-sess-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .f-sess-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--f-accent); } .f-sess-title { margin: 0 0 8px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(22px, 2.8vw, 30px); letter-spacing: -.03em; } .f-sess-sub { margin: 0 0 18px; color: var(--f-text-3); font-size: 14px; max-width: 62ch; } .f-sess-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .f-sess-metric { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--f-radius-sm); border: 1px solid var(--f-border); background: var(--f-surface-2); } .f-sess-metric .ico { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,90,60,.12); color: var(--f-accent); font-size: 15px; flex-shrink: 0; } .f-sess-metric .meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .f-sess-metric .v { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.1; } .f-sess-metric .l { font-size: 11.5px; color: var(--f-text-3); } .f-sess-alert { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border-radius: var(--f-radius-sm); border: 1px solid rgba(242,178,27,.35); background: rgba(242,178,27,.08); } .f-sess-alert > i { color: var(--f-yellow); font-size: 18px; flex-shrink: 0; } .f-sess-alert div { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--f-text-2); } .f-sess-alert strong { color: var(--f-text); font-size: 14px; } .f-sess-panel { border-radius: var(--f-radius); background: var(--f-surface); border: 1px solid var(--f-border); box-shadow: var(--f-shadow-sm); overflow: hidden; } .f-sess-panel-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--f-border); background: linear-gradient(180deg, var(--f-surface-2), transparent); } .f-sess-panel-head .ico { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,90,60,.12); color: var(--f-accent); font-size: 17px; flex-shrink: 0; } .f-sess-panel-head h2 { margin: 0; font-size: 16px; } .f-sess-panel-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--f-text-3); } .f-sess-log { position: relative; padding: 18px 20px 8px; } .f-sess-log::before { content: ""; position: absolute; left: 34px; top: 28px; bottom: 28px; width: 2px; background: linear-gradient(180deg, var(--f-green), var(--f-border) 8%, var(--f-border) 92%, transparent); border-radius: 999px; pointer-events: none; } .f-sess-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; } .f-sess-table thead { display: none; } .f-sess-table tbody tr.history-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 12px; margin-left: 0; background: var(--f-surface-2); border: 1px solid var(--f-border); border-radius: 14px; transition: border-color var(--f-trans), transform var(--f-trans), box-shadow var(--f-trans); } .f-sess-table tbody tr.history-row:hover { border-color: var(--f-border-2); transform: translateX(4px); box-shadow: var(--f-shadow-xs); } .f-sess-table tbody tr.history-row::before { content: ""; flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--f-border-2); box-shadow: 0 0 0 4px var(--f-surface); position: relative; z-index: 1; } .f-sess-table tbody tr.history-row:first-child::before { background: var(--f-green); box-shadow: 0 0 0 4px rgba(31,174,96,.18); } .f-sess-table tbody tr.history-row:first-child { border-color: rgba(31,174,96,.28); background: linear-gradient(90deg, rgba(31,174,96,.08), var(--f-surface-2) 42%); } .f-sess-table tbody td { display: block; padding: 0; border: 0; background: none; } .f-sess-table tbody td.ip-cell { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; } .f-sess-table tbody td.time-cell { flex-shrink: 0; text-align: right; } .f-sess-table .ip-text { font-family: 'Space Grotesk', ui-monospace, monospace; font-weight: 600; font-size: 14px; padding: 7px 11px; border-radius: 9px; background: var(--f-surface); border: 1px solid var(--f-border); color: var(--f-text); letter-spacing: .02em; } .f-sess-table .time-text { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12.5px; color: var(--f-text-2); white-space: nowrap; } .f-sess-table .f-sess-date { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 13px; color: var(--f-text); } .f-sess-table .f-sess-time { font-size: 11.5px; color: var(--f-text-3); font-variant-numeric: tabular-nums; } .f-sess-table tbody tr.history-row:first-child .f-sess-date, .f-sess-table tbody tr.history-row:first-child .f-sess-time { color: var(--f-green); } .f-sess-table .ip-copy { width: 34px; height: 34px; min-width: 34px; padding: 0; border-radius: 9px; border: 1px solid var(--f-border); background: var(--f-surface); color: var(--f-text-3); cursor: pointer; transition: all var(--f-trans); } .f-sess-table .ip-copy:hover { border-color: var(--f-accent); color: var(--f-accent); background: rgba(255,90,60,.08); } .history-pagination { margin-top: 0; padding: 8px 20px 20px; } .ip-copy { cursor: pointer; } @media (max-width: 991px) { .f-set-deck { grid-template-columns: 1fr; } .f-set-rail { position: static; flex-direction: row; flex-wrap: wrap; } .f-set-tab { flex: 1 1 auto; justify-content: center; } .f-set-fields, .f-set-media-grid, .f-set-social-grid { grid-template-columns: 1fr; } .f-sess-metrics { grid-template-columns: 1fr; } .f-sess-hero { padding: 18px 16px; } .f-sess-table tbody tr.history-row { flex-wrap: wrap; } .f-sess-table tbody tr.history-row:hover { transform: none; } .f-sess-table tbody td.time-cell { width: 100%; padding-left: 26px; text-align: left; } .f-sess-table .time-text { align-items: flex-start; } .f-set-id { flex-wrap: wrap; } .f-out-methods { grid-template-columns: 1fr; } .f-out-stats { grid-template-columns: 1fr; } } /* ============================================================ NOTIFICATIONS (page) ============================================================ */ .noty-list { display: flex; flex-direction: column; gap: 12px; padding: 20px; } .noty-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); background: var(--f-surface); position: relative; transition: all var(--f-trans); } .noty-card:hover { border-color: var(--f-border-2); box-shadow: var(--f-shadow-xs); } .noty-card.noty-primary { border-left: 3px solid var(--f-accent); } .noty-icon { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; background: var(--f-surface-2); color: var(--f-accent); font-size: 17px; } .noty-content { flex: 1; min-width: 0; } .noty-title { font-size: 15px; margin: 0 0 4px; } .noty-message { color: var(--f-text-2); margin: 0 0 6px; font-size: 14px; line-height: 1.5; } .noty-date { font-size: 12px; color: var(--f-text-3); display: inline-flex; align-items: center; gap: 6px; } .noty-close { width: 34px; height: 34px; flex-shrink: 0; border: 0; border-radius: 9px; background: var(--f-surface-2); color: var(--f-text-3); cursor: pointer; transition: all var(--f-trans); } .noty-close:hover { background: var(--f-red); color: #fff; } /* ============================================================ USERS GRID ============================================================ */ .users-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .user-card { display: block; background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius); overflow: hidden; box-shadow: var(--f-shadow-xs); transition: all var(--f-trans); } .user-card:hover { transform: translateY(-4px); box-shadow: var(--f-shadow); border-color: var(--f-border-2); } .user-cover { height: 72px; background: var(--f-accent-grad); overflow: hidden; } .user-cover img { width: 100%; height: 100%; object-fit: cover; } .user-cover.no-image { background: var(--f-accent-grad); } .user-avatar { width: 64px; height: 64px; margin: -32px auto 0; position: relative; } .user-avatar img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--f-surface); background: var(--f-surface-2); } .user-body { padding: 10px 16px 18px; text-align: center; } .user-name { font-weight: 600; color: var(--f-text); display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 4px; } .user-name a { color: var(--f-text); } .user-name-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-verified { color: var(--f-blue); font-size: 13px; } .user-role { font-size: 12.5px; color: var(--f-text-3); margin-top: 2px; } .user-stats { display: flex; justify-content: center; gap: 14px; margin-top: 12px; font-size: 12.5px; color: var(--f-text-2); } .user-stat { display: inline-flex; align-items: center; gap: 5px; } .user-stat i.fa-star { color: var(--f-yellow); } .users-pagination, .history-pagination, .users-pagination { display: flex; justify-content: center; margin-top: 22px; } /* ============================================================ CATALOG CATEGORIES (messages.tpl route) ============================================================ */ .catalog-hero { margin-bottom: 22px; } .catalog-hero-title { display: flex; align-items: center; gap: 12px; font-size: clamp(24px,3vw,34px); margin: 0 0 6px; } .catalog-hero-title i { color: var(--f-accent); } .catalog-hero-subtitle { color: var(--f-text-3); margin: 0; } .catalog-categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; } .catalog-category-card { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius); overflow: hidden; cursor: pointer; box-shadow: var(--f-shadow-xs); transition: all var(--f-trans); } .catalog-category-card:hover { transform: translateY(-5px); box-shadow: var(--f-shadow); border-color: var(--f-border-2); } .catalog-category-image { position: relative; height: 130px; background: var(--f-surface-2) center/cover no-repeat; display: grid; place-items: center; } .catalog-category-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,10,18,.1), rgba(12,10,18,.55)); } .catalog-category-icon { position: relative; z-index: 1; width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); } .catalog-category-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 16px; } .catalog-category-title { margin: 0; font-size: 16px; } .catalog-category-arrow { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--f-surface-2); color: var(--f-accent); transition: all var(--f-trans); } .catalog-category-card:hover .catalog-category-arrow { background: var(--f-accent); color: #fff; } /* wall element (generic) */ .media.d-flex { display: flex; gap: 14px; padding: 14px 16px; background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); margin-bottom: 12px; } .media.d-flex .avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; } .media.d-flex .info { flex: 1; min-width: 0; } .media.d-flex .info .name a { font-weight: 600; color: var(--f-text); } .media.d-flex .info .message { color: var(--f-text-2); margin-top: 6px; word-break: break-word; } .media.d-flex .info .attachment { margin-top: 8px; font-size: 13px; color: var(--f-text-3); } .media.d-flex .me-auto { color: var(--f-text-3); font-size: 12px; white-space: nowrap; } .d-none { display: none !important; } .mt-3 { margin-top: 1rem; } /* ============================================================ SELLER — products list ============================================================ */ .seller-products-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 20px; align-items: start; } .seller-products-header { margin-bottom: 16px; } .seller-products-title { display: flex; align-items: center; gap: 10px; font-size: 24px; margin: 0; } .seller-products-title i { color: var(--f-accent); } .seller-products-list { display: flex; flex-direction: column; gap: 14px; } .seller-products-sidebar { position: sticky; top: calc(var(--f-nav-h) + 16px); display: flex; flex-direction: column; gap: 14px; } .seller-btn-history, .seller-btn-output { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-radius: var(--f-radius-sm); border: 1px solid var(--f-border); background: var(--f-surface); color: var(--f-text); font-weight: 600; transition: all var(--f-trans); } .seller-btn-history i:first-child, .seller-btn-output i:first-child { color: var(--f-accent); } .seller-btn-history i:last-child { margin-left: auto; color: var(--f-text-3); } .seller-btn-history:hover, .seller-btn-output:hover { transform: translateY(-2px); box-shadow: var(--f-shadow-sm); border-color: var(--f-border-2); color: var(--f-text); } .seller-btn-output { background: var(--f-accent-grad); color: #fff; border-color: transparent; justify-content: center; } .seller-btn-output i { color: #fff !important; } .seller-btn-output:hover { color: #fff; } .seller-stats-card { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); overflow: hidden; } .seller-stats-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--f-border); font-weight: 600; } .seller-stats-header i { color: var(--f-accent); } .seller-stats-grid { display: grid; grid-template-columns: 1fr 1fr; } .seller-stat-item { display: flex; align-items: center; gap: 10px; padding: 16px; } .seller-stat-item:first-child { border-right: 1px solid var(--f-border); } .seller-stat-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--f-surface-2); color: var(--f-accent); } .seller-stat-value { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; } .seller-stat-label { font-size: 12px; color: var(--f-text-3); } /* seller product card */ .seller-product-card { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); padding: 16px; box-shadow: var(--f-shadow-xs); } .seller-product-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .seller-product-id { font-family: 'Space Grotesk', sans-serif; color: var(--f-text-3); font-size: 13px; } .seller-product-hash { color: var(--f-accent); } .seller-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; } .status-approved { background: rgba(31,174,96,.14); color: var(--f-green); } .status-rejected { background: rgba(239,68,68,.14); color: var(--f-red); } .status-deleted { background: var(--f-surface-2); color: var(--f-text-3); } .status-pending { background: rgba(242,178,27,.14); color: var(--f-yellow); } .seller-product-name { font-size: 16px; margin: 0 0 6px; } .seller-product-date { font-size: 12.5px; color: var(--f-text-3); display: flex; align-items: center; gap: 6px; } .seller-product-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .seller-action-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--f-border); border-radius: 10px; background: var(--f-surface); color: var(--f-text); font-size: 13px; font-weight: 500; cursor: pointer; transition: all var(--f-trans); } .seller-action-btn:hover { transform: translateY(-2px); box-shadow: var(--f-shadow-xs); border-color: var(--f-border-2); color: var(--f-text); } .seller-action-btn:disabled { opacity: .45; pointer-events: none; } .seller-action-btn.btn-boost { color: var(--f-accent); } .seller-action-btn.btn-toggle.active { color: var(--f-green); } /* ============================================================ SELLER — sales (analytics deck) ============================================================ */ .f-sales { display: flex; flex-direction: column; gap: 20px; } .f-sales-hero { padding: 22px 24px; border-radius: var(--f-radius); background: radial-gradient(90% 120% at 100% 0%, rgba(255,90,60,.08), transparent 55%), var(--f-surface); border: 1px solid var(--f-border); box-shadow: var(--f-shadow-sm); } .f-sales-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .f-sales-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--f-accent); } .f-sales-title { margin: 0 0 6px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(22px, 2.8vw, 30px); letter-spacing: -.03em; } .f-sales-sub { margin: 0; color: var(--f-text-3); font-size: 14px; } .f-sales-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .f-sales-metric { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--f-radius-sm); border: 1px solid var(--f-border); background: var(--f-surface); box-shadow: var(--f-shadow-xs); } .f-sales-metric .ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font-size: 17px; flex-shrink: 0; } .f-sales-metric.is-total .ico { background: rgba(109,74,255,.14); color: #9b7aff; } .f-sales-metric.is-month .ico { background: rgba(31,174,96,.14); color: var(--f-green); } .f-sales-metric.is-today .ico { background: rgba(255,90,60,.14); color: var(--f-accent); } .f-sales-metric .meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .f-sales-metric .lbl { font-size: 12px; color: var(--f-text-3); font-weight: 600; } .f-sales-metric .val { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(18px, 2vw, 24px); line-height: 1.1; font-variant-numeric: tabular-nums; } .f-sales-chart { border-radius: var(--f-radius); background: var(--f-surface); border: 1px solid var(--f-border); box-shadow: var(--f-shadow-sm); overflow: hidden; } .f-sales-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--f-border); background: linear-gradient(180deg, var(--f-surface-2), transparent); } .f-sales-chart-head .title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; } .f-sales-chart-head .title i { color: var(--f-accent); } .f-sales-periods { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--f-surface-2); border: 1px solid var(--f-border); } .f-sales-period { padding: 7px 13px; border: 0; border-radius: 9px; background: transparent; color: var(--f-text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all var(--f-trans); } .f-sales-period:hover:not(.is-active) { color: var(--f-text); background: var(--f-surface); } .f-sales-period.is-active { background: var(--f-accent-grad); color: #fff; box-shadow: 0 4px 12px rgba(255,90,60,.28); } .f-sales-chart-body { position: relative; padding: 16px 18px 18px; height: 340px; } .f-sales-chart-body canvas { width: 100% !important; height: 100% !important; display: block; } .f-sales-chart-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--f-text-3); pointer-events: none; } .f-sales-list { border-radius: var(--f-radius); background: var(--f-surface); border: 1px solid var(--f-border); box-shadow: var(--f-shadow-sm); overflow: hidden; } .f-sales-list-head { display: flex; align-items: center; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--f-border); font-weight: 600; font-size: 15px; } .f-sales-list-head i { color: var(--f-accent); } .f-sales-table-wrap { overflow-x: auto; } .f-sales-table { width: 100%; border-collapse: collapse; font-size: 14px; } .f-sales-table th { text-align: left; padding: 11px 20px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--f-text-3); border-bottom: 1px solid var(--f-border); background: var(--f-surface-2); } .f-sales-table td { padding: 14px 20px; border-bottom: 1px solid var(--f-border); color: var(--f-text-2); vertical-align: middle; } .f-sales-table tbody tr:hover td { background: rgba(255,90,60,.04); } .f-sales-table tbody tr:last-child td { border-bottom: 0; } .f-sales-table td:last-child { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--f-text); white-space: nowrap; } .f-sales-table .d-inline-block img { border-radius: 50%; border: 2px solid var(--f-border); } .f-sales-table .font-roboto { margin: 2px 0 0; font-size: 12px; color: var(--f-text-3); } .sales-pagination { padding: 14px 20px 18px; margin-top: 0; } /* legacy aliases */ .sales-header, .sales-stats-grid, .sales-chart-section, .sales-table-section { display: none; } .modern-sales-table { width: 100%; border-collapse: collapse; } /* ============================================================ PRODUCT EDIT / ADD form ============================================================ */ .modern-product-edit { max-width: 920px; margin: 0 auto; } .product-edit-header { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; } .edit-header-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 15px; background: var(--f-accent-grad); color: #fff; font-size: 22px; flex-shrink: 0; } .edit-title { margin: 0; font-size: 26px; } .edit-subtitle { margin: 2px 0 0; color: var(--f-text-3); } .edit-section { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius); padding: 22px; box-shadow: var(--f-shadow-sm); margin-bottom: 18px; } .section-header { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--f-border); } .section-header i { color: var(--f-accent); } .form-group-modern { margin-bottom: 18px; } .form-group-modern:last-child { margin-bottom: 0; } .form-row-modern { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .modern-label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; } .label-required { color: var(--f-accent); margin-left: 2px; } .modern-textarea { width: 100%; min-height: 120px; padding: 12px 14px; border: 1px solid var(--f-border-2); border-radius: 11px; background: var(--f-surface); color: var(--f-text); font-family: inherit; font-size: 14px; resize: vertical; } .modern-textarea:focus { outline: none; border-color: var(--f-accent); box-shadow: var(--f-ring); } .modern-product-edit .modern-textarea--description { min-height: 180px; background: var(--f-surface-2); line-height: 1.6; } /* SimpleMDE / CodeMirror — для страницы редактирования товара */ .modern-product-edit .EasyMDEContainer, .modern-product-edit .editor-toolbar, .modern-product-edit .CodeMirror, .modern-product-edit .editor-preview, .modern-product-edit .editor-preview-side, .modern-product-edit .editor-statusbar { color: var(--f-text); } .modern-product-edit .editor-toolbar { background: var(--f-surface-2); border: 1px solid var(--f-border-2); border-bottom: 0; border-radius: 11px 11px 0 0; opacity: 1; } .modern-product-edit .editor-toolbar:hover { opacity: 1; } .modern-product-edit .editor-toolbar a { color: var(--f-text-2) !important; border-color: transparent !important; } .modern-product-edit .editor-toolbar a:hover, .modern-product-edit .editor-toolbar a.active { background: var(--f-surface-3) !important; border-color: var(--f-border) !important; color: var(--f-text) !important; } .modern-product-edit .editor-toolbar i.separator { border-left-color: var(--f-border); border-right-color: var(--f-border); } .modern-product-edit .CodeMirror { background: var(--f-surface-2); border: 1px solid var(--f-border-2); border-radius: 0 0 11px 11px; color: var(--f-text); max-height: 250px; } .modern-product-edit .CodeMirror-scroll { min-height: 160px; } .modern-product-edit .CodeMirror-gutters { background: var(--f-surface-3); border-right: 1px solid var(--f-border); } .modern-product-edit .CodeMirror-linenumber { color: var(--f-text-3); } .modern-product-edit .CodeMirror-cursor { border-left-color: var(--f-text); } .modern-product-edit .CodeMirror-selected { background: rgba(255, 90, 60, .18) !important; } .modern-product-edit .CodeMirror-focused .CodeMirror-selected { background: rgba(255, 90, 60, .24) !important; } .modern-product-edit .CodeMirror-placeholder { color: var(--f-text-3) !important; } .modern-product-edit .editor-preview, .modern-product-edit .editor-preview-side { background: var(--f-surface-2); border: 1px solid var(--f-border-2); color: var(--f-text); } .modern-product-edit .editor-preview-side { border-left: 0; } .modern-product-edit .editor-statusbar { background: var(--f-surface-2); border: 1px solid var(--f-border-2); border-top: 0; border-radius: 0 0 11px 11px; color: var(--f-text-3); font-size: 12px; } .modern-product-edit .editor-toolbar.fullscreen, .modern-product-edit .CodeMirror-fullscreen, .modern-product-edit .editor-preview-side.pinned { background: var(--f-surface); } .modern-product-edit .editor-toolbar.fullscreen::before { background: linear-gradient(to right, var(--f-surface) 0, transparent 100%); } .modern-product-edit .editor-toolbar.fullscreen::after { background: linear-gradient(to right, transparent 0, var(--f-surface) 100%); } .input-helper { font-size: 12px; color: var(--f-text-3); margin-top: 6px; } .select-wrapper { position: relative; } .select-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--f-text-3); pointer-events: none; } .modern-select { appearance: none; } .input-with-icon { position: relative; } .input-with-icon .input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--f-text-3); } .modern-input.with-icon { padding-left: 38px; } .file-upload-wrapper { position: relative; } .modern-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; } .file-upload-label { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px; border: 2px dashed var(--f-border-2); border-radius: 12px; background: var(--f-surface-2); color: var(--f-text-2); cursor: pointer; transition: all var(--f-trans); } .file-upload-label:hover { border-color: var(--f-accent); color: var(--f-accent); } .file-upload-label i { font-size: 19px; } .modern-checkbox-card { border: 1px solid var(--f-border); border-radius: 12px; padding: 4px; transition: all var(--f-trans); } .modern-checkbox-card:has(.modern-checkbox:checked) { border-color: var(--f-accent); background: rgba(255,90,60,.05); } .checkbox-wrapper { position: relative; min-height: 72px; } .modern-checkbox { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; } .checkbox-label { display: flex; align-items: center; gap: 14px; padding: 14px; cursor: pointer; position: relative; z-index: 1; pointer-events: none; } .checkbox-label a { pointer-events: auto; } .checkbox-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; background: var(--f-surface-2); color: var(--f-text-3); font-size: 18px; flex-shrink: 0; transition: all var(--f-trans); } .modern-checkbox:checked + .checkbox-label .checkbox-icon { background: var(--f-accent-grad); color: #fff; } .checkbox-title { font-weight: 600; } .checkbox-description { font-size: 12.5px; color: var(--f-text-3); margin-top: 2px; } .rate-block { margin-top: 16px; border: 1px solid var(--f-border); border-radius: 12px; overflow: hidden; } .rate-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--f-surface-2); font-weight: 600; font-size: 13.5px; } .rate-header i { color: var(--f-accent); } .rate-add-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; padding: 16px; } .btn-add-rate { display: inline-flex; align-items: center; gap: 7px; padding: 0 16px; border: 0; border-radius: 11px; background: var(--f-accent-grad); color: #fff; font-weight: 600; cursor: pointer; } .rates-list { padding: 0 16px 16px; } .rates-list .input-group { margin-bottom: 8px; } .rates-list .input-group .form-control { border-radius: 10px; } .rates-list .btn { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--f-border); background: var(--f-surface); color: var(--f-text); cursor: pointer; } .rates-list .btn-danger { background: var(--f-red); color: #fff; border-color: transparent; } .rates-list .btn-primary { background: var(--f-accent-grad); color: #fff; border-color: transparent; } .submit-section { display: flex; flex-direction: column; gap: 18px; } .rules-link { color: var(--f-accent); } .btn-submit-modern { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px; border: 0; border-radius: 12px; background: var(--f-accent-grad); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; transition: all var(--f-trans); } .btn-submit-modern:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255,90,60,.4); } .btn-submit-modern:disabled { opacity: .5; cursor: not-allowed; } .upload-preview-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .upload-preview-item { position: relative; width: 88px; height: 88px; border-radius: 10px; overflow: hidden; border: 1px solid var(--f-border); background: var(--f-surface-2); flex-shrink: 0; } .upload-preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .upload-preview-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .65); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; } .upload-preview-remove:hover { background: var(--f-red); } @media (max-width: 991px) { .seller-products-grid { grid-template-columns: 1fr; } .seller-products-sidebar { position: static; } .sales-stats-grid, .f-sales-metrics { grid-template-columns: 1fr; } .f-sales-chart-head { flex-direction: column; align-items: flex-start; } .f-sales-periods { width: 100%; overflow-x: auto; flex-wrap: nowrap; } .f-sales-chart-body { height: 280px; } .form-row-modern, .rate-add-form { grid-template-columns: 1fr; } } /* ============================================================ GENERIC settings-card (used by widgets / news partials) ============================================================ */ .settings-card { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius); box-shadow: var(--f-shadow-sm); overflow: hidden; margin-bottom: 20px; } .settings-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--f-border); } .settings-header-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--f-surface-2); color: var(--f-accent); font-size: 16px; flex-shrink: 0; } .settings-title { margin: 0; font-size: 16px; } .settings-header h5 { margin: 0; font-size: 16px; } .settings-header-actions { margin-left: auto; } .settings-section { padding: 18px 20px; border-top: 1px solid var(--f-border); } .settings-section:first-of-type { border-top: 0; } /* ============================================================ NEWS ============================================================ */ .news-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 20px; align-items: start; } .news-list { display: flex; flex-direction: column; } .news-item { display: flex; gap: 16px; padding: 18px 20px; border-top: 1px solid var(--f-border); } .news-item:first-child { border-top: 0; } .news-image { width: 150px; flex-shrink: 0; } .news-image img { width: 100%; height: 100px; object-fit: cover; border-radius: 11px; background: var(--f-surface-2); } .news-content { flex: 1; min-width: 0; } .news-title { margin: 0 0 6px; font-size: 16px; } .news-title a { color: var(--f-text); } .news-title a:hover { color: var(--f-accent); } .news-excerpt { color: var(--f-text-3); font-size: 13.5px; line-height: 1.5; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .news-stats { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--f-text-2); } .news-stats .stat-btn { border: 0; background: var(--f-surface-2); color: var(--f-text-2); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; transition: all var(--f-trans); } .news-stats .stat-btn:hover { background: var(--f-accent); color: #fff; } .news-stats .stat-item { display: inline-flex; align-items: center; gap: 5px; } .news-date { font-size: 12px; color: var(--f-text-3); } .news-pagination, .news-sidebar .reviews-list { } /* news detail */ .news-detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 20px; align-items: start; } .news-detail-header { padding: 22px 24px 0; } .news-detail-title { font-size: clamp(22px,3vw,30px); margin: 0 0 12px; } .news-detail-meta-top { display: flex; flex-wrap: wrap; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--f-border); } .news-detail-meta-top .meta-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--f-text-3); } .news-detail-meta-top .meta-item i { color: var(--f-accent); } .news-detail-meta-top a { color: var(--f-text-2); } .news-detail-image { padding: 20px 24px; } .news-detail-image img { width: 100%; border-radius: var(--f-radius-sm); } .news-detail-content { padding: 0 24px 24px; color: var(--f-text-2); line-height: 1.75; word-break: break-word; } .news-detail-content img { max-width: 100%; border-radius: 10px; } .news-detail-info, .news-detail-sidebar-image { padding: 18px 20px; } .info-item { padding: 11px 0; border-bottom: 1px solid var(--f-border); } .info-item:last-child { border-bottom: 0; } .info-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--f-text-3); margin-bottom: 3px; } .info-label i { color: var(--f-accent); } .info-value { font-weight: 500; } .info-value a { color: var(--f-text); } .news-detail-sidebar-image img { width: 100%; border-radius: var(--f-radius-sm); } /* review item (news sidebar + widget) */ .reviews-list { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; } .review-item { padding: 14px; border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); background: var(--f-surface); transition: all var(--f-trans); } .review-item:hover { border-color: var(--f-border-2); box-shadow: var(--f-shadow-xs); } .review-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .review-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; } .review-name a { font-weight: 600; color: var(--f-text); font-size: 14px; } .review-date { font-size: 12px; color: var(--f-text-3); } .review-text { font-size: 13.5px; color: var(--f-text-2); line-height: 1.5; word-break: break-word; } .review-product-link a { font-size: 12.5px; color: var(--f-accent); display: inline-flex; gap: 6px; align-items: center; margin-top: 8px; } /* ============================================================ HOME WIDGETS (stats / sales) ============================================================ */ .home-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 20px; } .home-stat-item { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); background: var(--f-surface); } .home-stat-item > i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--f-surface-2); color: var(--f-accent); font-size: 16px; flex-shrink: 0; } .home-stat-value { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; } .home-stat-value a { color: var(--f-text); } .home-stat-label { font-size: 12px; color: var(--f-text-3); } .home-sales-ul { list-style: none; margin: 0; padding: 8px 20px 16px; } .home-sale-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--f-border); } .home-sale-item:last-child { border-bottom: 0; } .home-sale-link { color: var(--f-text); display: inline-flex; gap: 8px; align-items: center; font-size: 14px; min-width: 0; } .home-sale-link i { color: var(--f-accent); } .home-sale-time { font-size: 12px; color: var(--f-text-3); white-space: nowrap; } /* welcome (guest) section — faq widget */ .modern-welcome-section { display: flex; flex-direction: column; gap: 20px; } .welcome-hero { position: relative; overflow: hidden; border-radius: var(--f-radius); padding: 48px 32px; text-align: center; background: var(--f-accent-grad); color: #fff; box-shadow: var(--f-shadow); } .welcome-hero-icon { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 18px; background: rgba(255,255,255,.18); font-size: 28px; } .welcome-hero-title { font-size: clamp(24px,3.5vw,36px); margin: 0 0 8px; } .welcome-hero-subtitle { opacity: .9; margin: 0 0 24px; } .welcome-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .welcome-btn-primary, .welcome-btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 12px; font-weight: 600; } .welcome-btn-primary { background: #fff; color: var(--f-accent); } .welcome-btn-secondary { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.3); } .welcome-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .welcome-feature-card { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius); box-shadow: var(--f-shadow-xs); } .welcome-feature-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; background: var(--f-surface-2); color: var(--f-accent); font-size: 19px; flex-shrink: 0; } .welcome-feature-content h3 { margin: 0 0 3px; font-size: 15px; } .welcome-feature-content p { margin: 0; font-size: 12.5px; color: var(--f-text-3); } @media (max-width: 991px) { .news-grid, .news-detail-grid { grid-template-columns: 1fr; } .welcome-features { grid-template-columns: 1fr; } } @media (max-width: 560px) { .news-image { width: 110px; } .news-image img { height: 80px; } .home-stats-grid { grid-template-columns: 1fr; } } /* ============================================================ LEGACY BOOTSTRAP BRIDGE (static/system pages) ============================================================ */ .card { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius); box-shadow: var(--f-shadow-sm); margin-bottom: 20px; overflow: hidden; } .card-body { padding: 24px; color: var(--f-text-2); line-height: 1.75; word-break: break-word; } .card-body b { color: var(--f-text); } .card-body a, .card-title a { color: var(--f-accent); } .card-title { font-size: 19px; margin: 0 0 14px; color: var(--f-text); } .row { display: flex; flex-wrap: wrap; margin: 0 -10px; } .row > [class^="col"] { padding: 0 10px; width: 100%; } .col, .col-12, .col-sm-12, .col-md-12, .col-lg-12 { width: 100%; } .product-wrapper-grid { width: 100%; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 16px; } .mb-4 { margin-bottom: 24px; } .mt-2 { margin-top: 8px; } .mt-4 { margin-top: 24px; } .m-0 { margin: 0; } .me-1 { margin-right: 4px; } .p-2 { padding: 8px; } .p-3 { padding: 16px; } .p-4 { padding: 24px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border: 1px solid var(--f-border-2); border-radius: 11px; background: var(--f-surface); color: var(--f-text); font-weight: 600; font-size: 14px; cursor: pointer; transition: all var(--f-trans); text-decoration: none; } .btn:hover { transform: translateY(-2px); box-shadow: var(--f-shadow-sm); color: var(--f-text); } .btn-primary { background: var(--f-accent-grad); color: #fff; border-color: transparent; } .btn-primary:hover { color: #fff; } .btn-secondary { background: var(--f-surface-2); color: var(--f-text); } .btn-lg { padding: 14px 24px; font-size: 15px; } .btn-outline-primary { background: transparent; border-color: var(--f-accent); color: var(--f-accent); } .btn-outline-primary:hover { background: var(--f-accent); color: #fff; } .btn-outline-warning { background: transparent; border-color: #d9a300; color: #d9a300; } .btn-outline-warning:hover { background: #d9a300; color: #fff; } .btn-outline-danger { background: transparent; border-color: #ef4444; color: #ef4444; } .btn-outline-danger:hover { background: #ef4444; color: #fff; } .w-100 { width: 100%; } .text-primary { color: var(--f-accent) !important; } .text-light { color: #fff !important; } /* ============================================================ ADVERTISEMENT ============================================================ */ .advertisement-modern { max-width: 900px; margin: 0 auto; } .ad-description-card { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius); padding: 20px 24px; box-shadow: var(--f-shadow-xs); margin-bottom: 20px; color: var(--f-text-2); } .ad-section { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--f-radius); padding: 22px; box-shadow: var(--f-shadow-sm); margin-bottom: 20px; } .ad-section-title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; margin-bottom: 18px; } .ad-section-title i { color: var(--f-accent); } .traffic-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .traffic-stat-item { text-align: center; padding: 18px; border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); background: var(--f-surface-2); } .traffic-stat-label { font-size: 12.5px; color: var(--f-text-3); } .traffic-stat-value { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 28px; color: var(--f-accent); margin-top: 4px; } .ad-block-card { border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); padding: 20px; } .ad-block-title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; margin-bottom: 14px; } .ad-block-badge { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255,90,60,.12); color: var(--f-accent); } .ad-block-info-item { display: flex; align-items: center; gap: 8px; color: var(--f-text-2); font-size: 14px; margin-bottom: 6px; } .ad-block-info-item i { color: var(--f-green); } .ad-block-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--f-text-3); } .ad-price { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px; color: var(--f-text); margin: 14px 0; } .ad-example { border-top: 1px dashed var(--f-border-2); padding-top: 16px; } .ad-example-title, .ad-example-size { font-size: 12.5px; color: var(--f-text-3); display: flex; align-items: center; gap: 7px; } .ad-banner-placeholder { display: flex; align-items: center; justify-content: center; gap: 8px; height: 60px; max-width: 468px; margin: 10px 0; border: 2px dashed var(--f-border-2); border-radius: 10px; background: var(--f-surface-2); color: var(--f-text-3); } .ad-banner-placeholder .star { color: var(--f-accent); } /* ============================================================ FAQ (knowledge base) ============================================================ */ .modern-faq-page { display: flex; flex-direction: column; gap: 20px; } .faq-header-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .faq-info-card .faq-info-content { display: flex; gap: 14px; padding: 20px; } .faq-info-icon { width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center; border-radius: 13px; background: var(--f-accent-grad); color: #fff; font-size: 19px; } .faq-info-icon.support { background: linear-gradient(135deg, #4f7cff, #3a64e0); } .faq-info-text h3 { margin: 0 0 4px; font-size: 16px; } .faq-info-text p { margin: 0; font-size: 13px; color: var(--f-text-3); line-height: 1.5; } .faq-content-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 20px; align-items: start; } .faq-accordion { padding: 8px 0; } .faq-item { border-top: 1px solid var(--f-border); } .faq-item:first-child { border-top: 0; } .faq-question { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 20px; background: none; border: 0; color: var(--f-text); font-weight: 500; font-size: 14.5px; text-align: left; cursor: pointer; } .faq-question i:first-child { color: var(--f-accent); } .faq-question span { flex: 1; } .faq-arrow { color: var(--f-text-3); transition: transform var(--f-trans); } .faq-question[aria-expanded="true"] .faq-arrow { transform: rotate(180deg); } .faq-answer { padding: 0 20px 18px 52px; color: var(--f-text-2); line-height: 1.7; } .faq-sidebar { position: sticky; top: calc(var(--f-nav-h) + 16px); } .faq-nav-list { display: flex; flex-direction: column; gap: 8px; } .faq-nav-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--f-border); border-radius: 11px; color: var(--f-text); transition: all var(--f-trans); } .faq-nav-item:hover { border-color: var(--f-accent); color: var(--f-accent); } .faq-nav-item i { color: var(--f-accent); width: 18px; text-align: center; } /* ============================================================ STANDALONE: maintenance / vpn / banned / purse success ============================================================ */ .f-state { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: var(--f-bg); text-align: center; } .f-state-inner { max-width: 520px; } .f-state-icon { width: 90px; height: 90px; margin: 0 auto 26px; display: grid; place-items: center; border-radius: 26px; background: var(--f-accent-grad); color: #fff; font-size: 38px; box-shadow: var(--f-shadow); } .f-state-icon.danger { background: linear-gradient(135deg, #ef4444, #dc2626); } .f-state h1 { font-size: clamp(26px, 4vw, 40px); margin: 0 0 12px; } .f-state p { color: var(--f-text-2); font-size: 16px; line-height: 1.6; margin: 0 0 26px; } .f-state .f-spin { animation: f-spin 3.5s linear infinite; } @keyframes f-spin { to { transform: rotate(360deg); } } .purse { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 40px 20px; } .purse .image { width: 110px; height: 110px; object-fit: contain; margin-bottom: 10px; } .purse span { font-size: 22px; font-weight: 700; font-family: 'Space Grotesk', sans-serif; } .purse small { color: var(--f-text-3); } @media (max-width: 991px) { .faq-header-grid, .faq-content-grid { grid-template-columns: 1fr; } .faq-sidebar { position: static; } .traffic-stats { grid-template-columns: 1fr; } }