/* ============================================================ Cross World Boost — Design System (base + desktop) Hybrid: DESIGN.md system × CWB dark-gaming identity Responsive rules are in mobile.css ============================================================ */ /* Google Fonts are loaded via in each page's (after the preconnect links) instead of a render-blocking CSS @import. */ /* ── Tokens ── */ :root { /* Surfaces */ --bg: #0a0c12; --surface: #141822; --surface-2: #1c2030; --surface-3: #222840; /* elevated card inside dark band */ /* Borders */ --border: #2a3045; --border-soft:#1e2438; /* Text */ --text: #e8eaf0; --text-muted: #8b93a8; --text-soft: #5a6280; /* captions, fine-print */ /* Brand */ --primary: #ff7a59; /* CWB orange — the brand voltage */ --primary-dim:#cc5535; /* pressed / hover-darker */ --accent: #6c8cff; /* secondary blue accent */ /* Semantic */ --success: #4ade80; --warning: #fbbf24; --danger: #f87171; /* Spacing (4px base — DESIGN.md system) */ --sp-xxs: 4px; --sp-xs: 8px; --sp-sm: 12px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px; --sp-xxl: 48px; --sp-section: 96px; /* Radius (DESIGN.md scale) */ --radius-xs: 4px; --radius-sm: 6px; --radius: 12px; --radius-lg: 16px; --radius-pill: 9999px; /* Typography */ --font-display: 'Space Grotesk', sans-serif; --font-heading: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'IBM Plex Mono', monospace; --shadow: 0 4px 24px rgba(0,0,0,.4); --shadow-lg: 0 8px 40px rgba(0,0,0,.6); } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .hidden { display: none !important; } /* ── Layout ── */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-lg); } /* ── Header ── */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(10,12,18,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .logo { font-family: var(--font-heading); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; } .logo span { color: var(--primary); } .header-right { display: flex; align-items: center; gap: .75rem; } /* Currency + Language Toggle */ .currency-toggle { display: flex; gap: 2px; background: rgba(255,255,255,0.08); padding: 3px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); } .btn-currency { display: flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: 0.8125rem; font-weight: 600; border: none; cursor: pointer; border-radius: 6px; transition: all .15s; background: transparent; color: rgba(255,255,255,0.7); white-space: nowrap; } .btn-currency .currency-flag { font-size: 0.875rem; line-height: 1; } .btn-currency .currency-code { font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 0.75rem; letter-spacing: .04em; } .btn-currency[aria-pressed="true"] { background: rgba(255,255,255,0.95); color: #111; } /* Desktop nav — always visible; hamburger hidden by default */ .nav-links { display: flex; gap: 1.5rem; list-style: none; } .nav-links a { font-size: .875rem; font-weight: 500; color: var(--text-muted); transition: color .2s; } .nav-links a:hover, .nav-links a.nav-active { color: var(--text); } /* Mobile-only nav sections — hidden on desktop */ .nav-mobile-section { display: none; } .nav-section-label { display: none; } /* ── Nav dropdown (hamburger popup) ── */ /* Hidden by default everywhere; shown via .hidden removal in JS */ .nav-dropdown { position: absolute; top: calc(100% + .5rem); right: 1rem; z-index: 200; width: 260px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: .625rem; box-shadow: 0 8px 32px rgba(0,0,0,.55); animation: dropdownIn .18s ease; } @keyframes dropdownIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .nav-dropdown-main { display: flex; flex-direction: column; gap: .25rem; } .nav-dropdown-item { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: 10px; font-size: .9375rem; font-weight: 600; color: var(--text); transition: background .15s; } .nav-dropdown-item:hover { background: rgba(255,255,255,.06); } .nav-dropdown-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(255,255,255,.07); border-radius: 8px; flex-shrink: 0; } .nav-dropdown-icon svg { width: 18px; height: 18px; stroke: var(--accent); } .nav-dropdown-divider { height: 1px; background: var(--border); margin: .5rem .25rem; } .nav-dropdown-label { padding: .375rem 1rem .25rem; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); } .nav-dropdown-games { display: flex; flex-direction: column; gap: .25rem; } .nav-dropdown-game { display: flex; align-items: center; gap: .625rem; padding: .625rem 1rem; border-radius: 10px; font-size: .875rem; font-weight: 500; color: var(--text-muted); transition: background .15s, color .15s; } .nav-dropdown-game:hover { background: rgba(255,255,255,.06); color: var(--text); } .nav-dropdown-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--game-color, var(--accent)); flex-shrink: 0; } /* Hamburger — always visible on desktop & mobile (grid icon button) */ .nav-hamburger { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; padding: 0; flex-shrink: 0; transition: background .2s, border-color .2s; } .nav-hamburger:hover { background: rgba(255,255,255,.08); border-color: var(--text-muted); } .nav-hamburger.is-open { background: rgba(255,255,255,.1); border-color: var(--primary); } .nav-hamburger svg { width: 18px; height: 18px; stroke: var(--text-muted); transition: stroke .2s; } .nav-hamburger:hover svg, .nav-hamburger.is-open svg { stroke: var(--text); } /* 3-bar spans unused now SVG is rendered, hide them */ .nav-hamburger span { display: none; } /* Nav backdrop (mobile) — hidden by default */ .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 99; } body.nav-lock { overflow: hidden; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .625rem 1.25rem; border: none; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: .875rem; font-weight: 500; cursor: pointer; transition: all .2s; letter-spacing: 0; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-dim); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255,122,89,.3); } .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); } .btn-outline:hover { border-color: var(--text-muted); background: rgba(255,255,255,.04); } .btn-sm { padding: .375rem .875rem; font-size: .8125rem; } .btn-block { width: 100%; justify-content: center; } /* ── Hero ── */ .hero { padding: var(--sp-section) 0 5rem; text-align: center; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,122,89,.09), transparent); pointer-events: none; } .hero-badge { display: inline-flex; align-items: center; gap: .375rem; padding: .35rem var(--sp-md); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: .75rem; font-weight: 500; color: var(--text-muted); margin-bottom: var(--sp-lg); text-transform: uppercase; letter-spacing: .06em; } .hero h1 { font-family: var(--font-display); font-size: clamp(2.75rem, 7vw, 4.5rem); font-weight: 400; /* DESIGN.md: display at 400, not bold */ line-height: 1.1; letter-spacing: -.03em; /* negative tracking — non-negotiable */ margin-bottom: var(--sp-lg); } .hero h1 strong { font-weight: 400; color: var(--primary); } .hero p { font-size: 1.125rem; color: var(--text-muted); max-width: 520px; margin: 0 auto var(--sp-xxl); line-height: 1.65; } .hero-cta { display: flex; gap: var(--sp-sm); justify-content: center; flex-wrap: wrap; } /* ── Section titles ── */ .section-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 400; letter-spacing: -.025em; margin-bottom: var(--sp-xl); } .section-title--center { text-align: center; } .section-label { display: inline-block; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--primary); margin-bottom: var(--sp-xs); } .games-section { text-align: center; padding: var(--sp-section) 0; } .games-section .game-grid { text-align: left; } /* ── Game Cards ── */ .game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-lg); margin-bottom: var(--sp-section); } .game-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-xl); transition: all .25s; cursor: pointer; position: relative; overflow: hidden; } .game-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--card-accent, var(--primary)); } .game-card:hover { border-color: var(--card-accent, var(--primary)); transform: translateY(-4px); box-shadow: var(--shadow); } .game-card .unit-code { font-family: var(--font-mono); font-size: .6875rem; color: var(--card-accent, var(--primary)); margin-bottom: var(--sp-xs); text-transform: uppercase; letter-spacing: .08em; } .game-card h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; letter-spacing: -.015em; margin-bottom: .25rem; } .game-card .world { font-size: .8125rem; color: var(--text-muted); margin-bottom: var(--sp-lg); } .game-card .arrow { font-size: .8125rem; color: var(--card-accent, var(--primary)); font-weight: 500; } /* ── Trust Section ── */ .trust-row { display: flex; flex-wrap: wrap; gap: var(--sp-sm); justify-content: center; padding: var(--sp-xl) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-section); } .trust-badge { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--text-muted); padding: .5rem var(--sp-md); background: var(--surface); border-radius: var(--radius-sm); border: 1px solid var(--border); } .trust-section-interactive { margin-bottom: var(--sp-section); padding: var(--sp-xl) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .trust-showcase { margin-bottom: var(--sp-lg); } .showcase-card { display: grid; grid-template-columns: 1fr 280px; background: linear-gradient(135deg, #12182a 0%, #1a2240 50%, #141822 100%); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; min-height: 280px; } .showcase-visual { position: relative; display: flex; align-items: center; justify-content: center; padding: 2rem; min-height: 280px; overflow: hidden; } .showcase-visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(108,140,255,.12), transparent); pointer-events: none; } .showcase-game-name { position: absolute; font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .08; pointer-events: none; user-select: none; } .showcase-side { background: rgba(0,0,0,.25); border-left: 1px solid var(--border); padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; } .showcase-review { background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-sm); padding: 1rem; } .showcase-review .stars { color: #4ade80; font-size: .875rem; margin-bottom: .5rem; } .showcase-review-text { font-size: .75rem; color: #a8b0c4; line-height: 1.5; margin-bottom: .625rem; } .showcase-review-meta { font-size: .6875rem; color: #6b7288; margin-bottom: .5rem; } .showcase-review-score { font-size: .75rem; color: #8b93a8; } .showcase-review-score strong { color: #e8eaf0; font-size: .875rem; } .showcase-times { display: flex; flex-direction: column; gap: .75rem; margin-top: auto; } .showcase-times .est-time .value { display: block; font-family: var(--font-heading); font-size: 1.125rem; font-weight: 700; color: var(--text); margin-bottom: .15rem; } .showcase-times .est-time .label { font-size: .6875rem; color: #8b93a8; } /* ── Trust Bar Interactive ── */ .trust-bar-interactive { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; padding: 1rem 0 0; } .trust-badge-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .875rem; background: #0a0c12; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-family: var(--font-body); font-size: .75rem; font-weight: 500; cursor: pointer; transition: all .2s; white-space: nowrap; } .trust-badge-btn .icon-svg { width: .9rem; height: .9rem; color: var(--text-muted); transition: color .2s; } .trust-badge-btn:hover { border-color: var(--game-accent, var(--accent)); color: var(--text); } .trust-badge-btn:hover .icon-svg { color: var(--game-accent, var(--accent)); } .trust-badge-btn.active { border-color: var(--game-accent, var(--accent)); background: rgba(255,255,255,.04); color: var(--text); } .trust-badge-btn.active .icon-svg { color: var(--game-accent, var(--accent)); } .trust-info-panel { position: relative; z-index: 2; max-width: 420px; background: rgba(0,0,0,.75); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-sm); padding: 1.25rem 1.5rem; backdrop-filter: blur(8px); animation: trustFadeIn .25s ease; } .trust-info-panel--inline { max-width: 720px; margin: 0 auto 1.25rem; text-align: center; } .trust-info-text { font-size: .875rem; line-height: 1.65; color: #d4d8e4; margin: 0; } @keyframes trustFadeIn { from { opacity: .5; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .icon-svg { display: inline-flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; flex-shrink: 0; color: var(--game-accent, var(--accent)); } .icon-svg svg { width: 100%; height: 100%; } /* ── Testimonials (legacy star cards — kept for compat) ── */ .testimonials { margin-bottom: var(--sp-section); } .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-lg); } .testimonial-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-xl); } .testimonial-card .stars { color: #fbbf24; margin-bottom: var(--sp-sm); font-size: .875rem; } .testimonial-card p { font-size: .875rem; color: var(--text-muted); margin-bottom: var(--sp-md); line-height: 1.65; } .testimonial-card .author { font-size: .8125rem; font-weight: 600; } .review-count { text-align: center; margin-top: var(--sp-xl); font-size: .875rem; color: var(--text-muted); } .review-count strong { color: var(--text); font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -.02em; font-weight: 400; } /* ── Proof Gallery (screenshot grid) ── */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-md); margin-top: var(--sp-lg); } .gallery-item { position: relative; margin: 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: var(--surface-3); cursor: zoom-in; aspect-ratio: 4 / 3; transition: border-color .2s, transform .2s; } .gallery-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--proof-accent, var(--primary)); z-index: 2; } .gallery-item:hover { border-color: var(--proof-accent, var(--primary)); transform: translateY(-3px); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; } .gallery-item:hover img { transform: scale(1.04); } .gallery-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .4rem; padding: .5rem .6rem; font-size: .6875rem; font-weight: 600; letter-spacing: .03em; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0)); z-index: 1; } .gallery-empty { text-align: center; color: var(--text-muted); font-size: .875rem; padding: var(--sp-lg) 0; } /* ── Proof Gallery (chat screenshots) ── */ .testimonials { margin-bottom: var(--sp-section); } .section-sub { text-align: center; font-size: .875rem; color: var(--text-muted); margin-top: -.75rem; margin-bottom: var(--sp-xl); } .proof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-lg); margin-bottom: var(--sp-xl); } .proof-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-xl); display: flex; flex-direction: column; gap: var(--sp-md); position: relative; overflow: hidden; transition: border-color .2s, transform .2s; } .proof-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--proof-accent, var(--primary)); } .proof-card:hover { border-color: var(--proof-accent, var(--primary)); transform: translateY(-3px); } .proof-game-tag { display: flex; align-items: center; gap: .5rem; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--proof-accent, var(--primary)); flex-wrap: wrap; } .proof-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--proof-accent, var(--primary)); flex-shrink: 0; } .proof-service-tag { margin-left: auto; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-pill); padding: .15rem .5rem; font-size: .625rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; } /* Chat bubbles */ .proof-chat { display: flex; flex-direction: column; gap: .375rem; background: var(--surface-2); border-radius: var(--radius-sm); border: 1px solid var(--border-soft); padding: .75rem; } .chat-bubble { display: flex; flex-direction: column; max-width: 88%; } .chat-bubble--cwb { align-self: flex-start; align-items: flex-start; } .chat-bubble--customer { align-self: flex-end; align-items: flex-end; } .chat-sender { font-size: .5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--proof-accent, var(--primary)); margin-bottom: .15rem; padding-left: .25rem; } .chat-text { display: inline-block; font-size: .75rem; line-height: 1.45; padding: .375rem .625rem; border-radius: 10px; max-width: 100%; } .chat-bubble--cwb .chat-text { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09); color: var(--text); border-bottom-left-radius: 3px; } .chat-bubble--customer .chat-text { background: rgba(255,122,89,.15); background: color-mix(in srgb, var(--proof-accent, var(--primary)) 18%, transparent); border: 1px solid rgba(255,122,89,.25); border: 1px solid color-mix(in srgb, var(--proof-accent, var(--primary)) 30%, transparent); color: var(--text); border-bottom-right-radius: 3px; text-align: right; } .proof-quote { font-size: .8125rem; color: var(--text-muted); line-height: 1.6; font-style: italic; padding-top: .25rem; border-top: 1px solid var(--border-soft); } .proof-meta { display: flex; justify-content: space-between; align-items: center; gap: .5rem; } .proof-handle { font-size: .8125rem; font-weight: 600; color: var(--text); } .proof-time { font-size: .6875rem; color: var(--text-soft); font-family: var(--font-mono); } /* Star rating for customer reviews */ .proof-stars { font-size: 1rem; line-height: 1; color: #fbbf24; letter-spacing: .05em; } .proof-stars-empty { color: rgba(255,255,255,.18); } /* Demo/placeholder badge for fallback reviews */ .proof-demo-badge { margin-left: .5rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-pill); padding: .1rem .45rem; font-size: .5625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); } /* Proof screenshot thumbnail */ .proof-screenshot { position: relative; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-soft); cursor: zoom-in; background: var(--surface-3); max-height: 200px; display: flex; align-items: center; justify-content: center; } .proof-screenshot img { width: 100%; height: 100%; object-fit: cover; max-height: 200px; display: block; transition: transform .2s; } .proof-screenshot:hover img { transform: scale(1.02); } .proof-screenshot-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; opacity: 0; transition: opacity .18s; } .proof-screenshot:hover .proof-screenshot-overlay { opacity: 1; } /* Lightbox */ .proof-lightbox { position: fixed; inset: 0; z-index: 500; display: none; align-items: center; justify-content: center; } .proof-lightbox.active { display: flex; } .proof-lightbox-bg { position: absolute; inset: 0; background: rgba(0,0,0,.85); backdrop-filter: blur(6px); } .proof-lightbox-inner { position: relative; z-index: 1; max-width: min(90vw, 900px); max-height: 90vh; display: flex; align-items: center; justify-content: center; } .proof-lightbox-inner img { max-width: 100%; max-height: 90vh; border-radius: var(--radius); box-shadow: 0 8px 48px rgba(0,0,0,.7); display: block; } .proof-lightbox-close { position: absolute; top: -2.25rem; right: 0; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: var(--radius-pill); width: 32px; height: 32px; cursor: pointer; font-size: .875rem; display: flex; align-items: center; justify-content: center; transition: background .15s; } .proof-lightbox-close:hover { background: rgba(255,255,255,.22); } .review-count { text-align: center; margin-top: var(--sp-xl); font-size: .875rem; color: var(--text-muted); } .review-count strong { color: var(--text); font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -.02em; font-weight: 400; } /* ── Callout band (DESIGN.md feature) ── */ .callout-band { background: linear-gradient(135deg, rgba(255,122,89,.1) 0%, rgba(255,122,89,.04) 100%); border: 1px solid rgba(255,122,89,.2); border-radius: var(--radius); padding: var(--sp-xxl) var(--sp-xl); text-align: center; margin-bottom: var(--sp-section); } .callout-band h2 { font-family: var(--font-display); font-size: clamp(1.5rem,3vw,2rem); font-weight: 400; letter-spacing: -.025em; margin-bottom: var(--sp-sm); } .callout-band p { color: var(--text-muted); margin-bottom: var(--sp-xl); max-width: 480px; margin-left: auto; margin-right: auto; } /* ── Service Cards (Listing) ── */ .page-header { padding: var(--sp-xxl) 0 var(--sp-xl); } .page-header .breadcrumb { font-size: .8125rem; color: var(--text-muted); margin-bottom: var(--sp-md); } .page-header .breadcrumb a:hover { color: var(--text); } .page-header h1 { font-family: var(--font-display); font-size: clamp(1.75rem,4vw,2.5rem); font-weight: 400; letter-spacing: -.025em; } .page-header .subtitle { color: var(--text-muted); margin-top: .5rem; } /* ── Listing filter toolbar (pencarian pindah ke header global) ── */ .listing-toolbar { display: flex; flex-direction: column; gap: .75rem; margin-bottom: var(--sp-lg); } .filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; } .filter-chip { display: inline-flex; align-items: center; padding: .4rem .9rem; min-height: 38px; background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-pill); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: all .15s; } .filter-chip:hover { border-color: var(--game-accent, var(--primary)); color: var(--text); } .filter-chip.active { background: var(--game-accent, var(--primary)); border-color: var(--game-accent, var(--primary)); color: #0A0A0A; } .service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-lg); padding-bottom: var(--sp-section); } .service-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-xl); transition: all .2s; display: flex; flex-direction: column; } .service-card:hover { border-color: var(--game-accent, var(--primary)); transform: translateY(-2px); box-shadow: var(--shadow); } .service-card .category { display: inline-block; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: .25rem .625rem; background: rgba(255,255,255,.06); border-radius: var(--radius-pill); color: var(--game-accent, var(--primary)); margin-bottom: var(--sp-sm); width: fit-content; } .service-card h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 400; letter-spacing: -.01em; margin-bottom: .5rem; } .service-card .desc { font-size: .875rem; color: var(--text-muted); flex: 1; margin-bottom: var(--sp-md); line-height: 1.6; } .service-card .price { font-family: var(--font-mono); font-size: 1.125rem; font-weight: 500; color: var(--game-accent, var(--primary)); margin-bottom: var(--sp-md); } .service-card .price small { font-size: .75rem; color: var(--text-muted); } /* ── Product Detail ── */ .product-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--sp-xxl); padding: var(--sp-xl) 0 var(--sp-section); } .product-main { min-width: 0; } .product-title { font-family: var(--font-display); font-size: clamp(1.5rem,3.5vw,2rem); font-weight: 400; letter-spacing: -.025em; margin-bottom: var(--sp-md); } .product-desc { color: var(--text-muted); font-size: .9375rem; margin-bottom: var(--sp-xl); line-height: 1.7; } .product-desc-block h3 { font-family: var(--font-heading); font-size: .9375rem; font-weight: 700; margin-bottom: .5rem; } .what-you-get { margin-bottom: var(--sp-xl); } .what-you-get h3 { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; margin-bottom: var(--sp-sm); } .what-you-get ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; } .what-you-get li { font-size: .9375rem; color: var(--text-muted); padding-left: 1.5rem; position: relative; line-height: 1.5; } .what-you-get li::before { content: '✓'; position: absolute; left: 0; color: var(--game-accent, var(--success)); font-weight: 700; } /* ── Pricing Sidebar ── */ .pricing-sidebar { position: sticky; top: 80px; align-self: start; } .pricing-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-xl); } .pricing-card h2 { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; margin-bottom: var(--sp-lg); } .form-group { margin-bottom: var(--sp-lg); } .form-group label { display: block; font-size: .8125rem; font-weight: 500; margin-bottom: .5rem; color: var(--text-muted); } .form-group input[type="range"] { width: 100%; accent-color: var(--game-accent, var(--primary)); } .range-value { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 500; text-align: center; margin-top: .25rem; color: var(--game-accent, var(--primary)); } .option-group { display: flex; gap: .5rem; } .option-btn { flex: 1; padding: .625rem .5rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-size: .75rem; font-weight: 500; cursor: pointer; transition: all .2s; text-align: center; } .option-btn.active { border-color: var(--game-accent, var(--primary)); color: var(--game-accent, var(--primary)); background: rgba(255,255,255,.04); } .option-btn:hover { border-color: var(--text-muted); } .promo-row { display: flex; gap: .5rem; } .promo-row input { flex: 1; padding: .625rem .75rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-mono); font-size: .8125rem; } .promo-row input:focus { outline: none; border-color: var(--game-accent, var(--primary)); } .promo-msg { font-size: .75rem; margin-top: .35rem; } .promo-msg.success { color: var(--success); } .promo-msg.error { color: var(--danger); } /* ── Endgame Configurator ── */ .config-label { font-size: .8125rem; font-weight: 700; color: var(--text); margin-bottom: .625rem; } .endgame-card { background: linear-gradient(180deg, #1a1430 0%, var(--surface) 120px); border-color: rgba(185,138,255,.25); } .endgame-mode-group { display: flex; flex-direction: column; gap: .5rem; } .endgame-radio, .endgame-check { display: flex; align-items: center; gap: .625rem; padding: .75rem .875rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .2s; } .endgame-radio:hover, .endgame-check:hover:not(.disabled) { border-color: var(--game-accent, var(--primary)); } .endgame-radio input, .endgame-check input { accent-color: var(--game-accent, var(--primary)); flex-shrink: 0; } .endgame-radio-label, .endgame-check-label { flex: 1; font-size: .8125rem; color: var(--text); } .endgame-radio-price, .endgame-check-price { font-family: var(--font-mono); font-size: .75rem; color: var(--game-accent, var(--primary)); white-space: nowrap; } .endgame-checklist { display: flex; flex-direction: column; gap: .4rem; max-height: 280px; overflow-y: auto; padding-right: .25rem; } .endgame-check.disabled { opacity: .45; cursor: not-allowed; } /* ── Price Breakdown ── */ .summary-item-stack .val { max-width: 55%; text-align: right; font-size: .75rem; line-height: 1.4; } .price-breakdown { border-top: 1px solid var(--border); padding-top: var(--sp-md); margin-top: .5rem; } .price-row { display: flex; justify-content: space-between; font-size: .8125rem; margin-bottom: .35rem; color: var(--text-muted); } .price-row.discount { color: var(--success); } .price-row.total { font-size: 1.125rem; font-weight: 700; color: var(--text); margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); } .price-row.total .amount { font-family: var(--font-mono); color: var(--game-accent, var(--primary)); } .cashback-info { font-size: .75rem; color: var(--text-muted); text-align: center; margin-top: .75rem; padding: .5rem var(--sp-sm); background: rgba(74,222,128,.08); border-radius: var(--radius-sm); } .cashback-info strong { color: var(--success); } /* ── Checkout ── */ .checkout-layout { max-width: 1080px; margin: 0 auto; padding: var(--sp-xl) 0 var(--sp-section); } @media (max-width: 860px) { .order-summary { order: -1; } } .checkout-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-xl); } .checkout-form h2 { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 700; margin-bottom: var(--sp-xl); } .form-field { margin-bottom: var(--sp-lg); } .form-field label { display: block; font-size: .8125rem; font-weight: 500; margin-bottom: .4rem; color: var(--text-muted); } .form-field input, .form-field select, .form-field textarea { width: 100%; padding: .75rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-body); font-size: .875rem; transition: border-color .15s; } .form-field input:focus, .form-field select:focus { outline: none; border-color: var(--primary); } .payment-options { display: flex; flex-direction: column; gap: .625rem; } .payment-option { display: flex; align-items: flex-start; gap: .75rem; padding: .9rem 1rem; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; } .payment-option:hover { border-color: var(--text-muted); } .payment-option.selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--surface-2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); } .payment-option input[type="radio"] { width: 18px; height: 18px; margin-top: .15rem; flex-shrink: 0; accent-color: var(--primary); cursor: pointer; } .payment-option .po-body { flex: 1; min-width: 0; } .payment-option .po-title { font-weight: 600; font-size: .9375rem; color: var(--text); } .payment-option .po-desc { font-size: .8125rem; color: var(--text-muted); margin-top: .15rem; line-height: 1.45; } /* Crypto payment detail panel */ .crypto-detail { background: var(--surface-2); border: 1px solid rgba(255,122,89,.25); border-radius: var(--radius-sm); padding: var(--sp-md); display: flex; flex-direction: column; gap: .625rem; margin: .25rem 0 0 2.5rem; } .crypto-network-label { font-size: .75rem; font-weight: 600; color: var(--text-muted); margin-bottom: -.25rem; } .crypto-networks { display: flex; flex-wrap: wrap; gap: .4rem; } .crypto-net-btn { padding: .4rem .7rem; font-size: .75rem; font-weight: 600; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-3); color: var(--text); cursor: pointer; transition: all .15s ease; } .crypto-net-btn:hover { border-color: rgba(255,122,89,.5); } .crypto-net-btn.active { background: var(--primary); color: #111; border-color: var(--primary); } .crypto-network { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--primary); } .crypto-address-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .crypto-address { font-family: var(--font-mono); font-size: .75rem; color: var(--text); background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: .35rem .625rem; word-break: break-all; flex: 1; min-width: 0; } .crypto-warning { font-size: .6875rem; color: var(--warning); line-height: 1.5; padding: .375rem .5rem; background: rgba(251,191,36,.07); border-radius: var(--radius-xs); border: 1px solid rgba(251,191,36,.18); } .order-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-xl); position: sticky; top: 80px; align-self: start; justify-self: stretch; width: 100%; } .order-summary h2 { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 700; margin-bottom: var(--sp-lg); } .summary-item { display: flex; justify-content: space-between; font-size: .8125rem; margin-bottom: .5rem; color: var(--text-muted); } .summary-item .val { color: var(--text); font-weight: 500; } .summary-total { display: flex; justify-content: space-between; font-size: 1.25rem; font-weight: 700; margin-top: var(--sp-md); padding-top: var(--sp-md); border-top: 1px solid var(--border); } .summary-total .amount { font-family: var(--font-mono); color: var(--primary); } /* Success modal — multiple order chips (one per service) */ .order-ids-list { display: flex; flex-direction: column; gap: .5rem; margin: .25rem 0 .5rem; } .order-chip { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .8rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); text-align: left; } .order-chip-main { min-width: 0; } .order-chip-id { font-family: var(--font-mono); font-size: .875rem; color: var(--primary); } .order-chip-meta { font-size: .75rem; color: var(--text-muted); margin-top: .15rem; line-height: 1.4; } .order-chip-side { text-align: right; flex-shrink: 0; } .order-chip-price { font-family: var(--font-mono); font-weight: 600; font-size: .875rem; } .order-chip-links { display: flex; gap: .6rem; margin-top: .2rem; } .order-chip-links a { font-size: .6875rem; color: var(--accent); text-decoration: underline; white-space: nowrap; } /* Track page — itemized order breakdown */ .track-items { margin-top: 1rem; padding: .85rem 1rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .track-items-label { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .5rem; } .track-item { padding: .5rem 0; border-top: 1px dashed var(--border); } .track-item:first-of-type { border-top: none; padding-top: 0; } .track-item-top { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; } .ti-name { font-weight: 600; font-size: .9rem; color: var(--text); } .ti-price { font-family: var(--font-mono); font-weight: 600; font-size: .9rem; color: var(--primary); white-space: nowrap; } .track-item-meta { font-size: .8rem; color: var(--text-muted); margin-top: .2rem; line-height: 1.5; } /* ── Success Modal ── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 200; padding: var(--sp-md); } .modal-overlay.hidden { display: none; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-xxl); max-width: 480px; width: 100%; text-align: center; } .modal h2 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; letter-spacing: -.025em; margin-bottom: .75rem; } .modal .sku-display { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 500; color: var(--primary); margin: var(--sp-md) 0; padding: .75rem; background: var(--surface-2); border-radius: var(--radius-sm); } .modal p { color: var(--text-muted); font-size: .875rem; margin-bottom: var(--sp-xl); line-height: 1.65; } /* ── Track Page ── */ .track-section { max-width: 720px; margin: var(--sp-section) auto; padding: 0 var(--sp-lg) var(--sp-section); } .track-section h1 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; letter-spacing: -.025em; text-align: center; margin-bottom: var(--sp-xl); } .track-form { display: flex; gap: .75rem; margin-bottom: var(--sp-xl); } .track-form input { flex: 1; padding: .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-mono); font-size: .875rem; transition: border-color .15s; } .track-form input:focus { outline: none; border-color: var(--primary); } .track-result { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-xl); } .track-result.hidden { display: none; } /* Review section (post-order) */ .track-review-section { margin-top: var(--sp-lg); } .track-review-section.hidden { display: none; } .track-review-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-xl); } .track-review-done { text-align: center; color: var(--text-muted); font-size: .9375rem; } /* Star picker */ .star-picker { display: flex; gap: .25rem; margin-bottom: .25rem; } .star-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--border); transition: color .12s, transform .1s; padding: 0 .1rem; line-height: 1; } .star-btn.active { color: #fbbf24; } .star-btn:hover { transform: scale(1.15); } /* ── Shared status badges ── */ .status-badge { display: inline-block; padding: .2rem .625rem; border-radius: var(--radius-pill); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } .status-pending { background: rgba(251,191,36,.15); color: #fbbf24; } .status-queued { background: rgba(108,140,255,.15); color: #6c8cff; } .status-active { background: rgba(255,122,89,.15); color: #ff7a59; } .status-done { background: rgba(74,222,128,.15); color: #4ade80; } .status-cancelled{ background: rgba(248,113,113,.15); color: #f87171; } .sku-cell { font-family: var(--font-mono); font-size: .75rem; color: var(--primary); } .admin-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); } .admin-table { width: 100%; border-collapse: collapse; font-size: .8125rem; } .admin-table th { background: var(--surface-2); padding: .75rem var(--sp-md); text-align: left; font-weight: 600; color: var(--text-muted); white-space: nowrap; border-bottom: 1px solid var(--border); } .admin-table td { padding: .75rem var(--sp-md); border-bottom: 1px solid var(--border); white-space: nowrap; } .admin-table tr:last-child td { border-bottom: none; } .admin-table tr:hover td { background: rgba(255,255,255,.02); } .admin-actions { display: flex; gap: .35rem; } /* ── Footer ── */ .site-footer { border-top: 1px solid var(--border); padding: var(--sp-xl) 0; text-align: center; font-size: .8125rem; color: var(--text-muted); } .footer-link { font-size: .8125rem; color: var(--text-muted); transition: color .2s; } .footer-link:hover, .footer-link:focus-visible { color: var(--text); } /* ── Loading / Empty ── */ .loading, .empty-state { text-align: center; padding: var(--sp-section) 0; color: var(--text-muted); font-size: .9375rem; } /* ── Contact Page ── */ .contact-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-xxl); padding-bottom: var(--sp-section); } .contact-channels { display: flex; flex-direction: column; gap: var(--sp-md); } .contact-card { display: flex; align-items: center; gap: var(--sp-lg); padding: var(--sp-xl); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .2s, transform .2s; cursor: pointer; } .contact-card:hover { transform: translateY(-2px); } .contact-card--whatsapp:hover { border-color: #25d366; } .contact-card--email:hover { border-color: var(--primary); } .contact-card--request:hover { border-color: var(--primary); } .contact-card--request .contact-card-icon { background: rgba(255,122,89,.12); color: var(--primary); } .contact-card-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-sm); flex-shrink: 0; } .contact-card--whatsapp .contact-card-icon { background: rgba(37,211,102,.12); color: #25d366; } .contact-card--email .contact-card-icon { background: rgba(255,122,89,.12); color: var(--primary); } .contact-card-icon svg { width: 24px; height: 24px; } .contact-card-body { flex: 1; } .contact-card-title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; margin-bottom: .2rem; } .contact-card-desc { font-size: .8125rem; color: var(--text-muted); margin-bottom: .35rem; } .contact-card-value { font-family: var(--font-mono); font-size: .875rem; font-weight: 500; color: var(--text); } .contact-card-arrow { font-size: 1.25rem; color: var(--text-muted); flex-shrink: 0; transition: transform .2s; } .contact-card:hover .contact-card-arrow { transform: translateX(4px); color: var(--text); } .contact-info-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-xl); } .contact-info-card h2 { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; margin-bottom: var(--sp-md); } .contact-info-row { display: flex; justify-content: space-between; font-size: .8125rem; padding: .5rem 0; border-bottom: 1px solid var(--border); } .contact-info-row:last-of-type { border-bottom: none; } .contact-info-label { color: var(--text-muted); } .contact-info-value { font-weight: 600; } /* ── Request Service Page ── */ .request-wrap { max-width: 720px; margin: 0 auto; padding-bottom: var(--sp-section); display: flex; flex-direction: column; gap: 1.75rem; } .form-block { display: flex; flex-direction: column; gap: .65rem; } .form-label { font-size: .8125rem; font-weight: 600; color: var(--text); } .form-input { width: 100%; padding: .8rem .9rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-body); font-size: .9rem; resize: vertical; } .form-input:focus { outline: none; border-color: var(--primary); } .request-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; } .request-game { display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; text-align: left; padding: .9rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color .2s, transform .2s, background .2s; } .request-game:hover { transform: translateY(-2px); border-color: var(--game-accent, var(--primary)); } .request-game.is-active { border-color: var(--game-accent, var(--primary)); background: color-mix(in srgb, var(--game-accent, var(--primary)) 12%, var(--surface)); } .request-game-name { font-weight: 700; font-size: .9rem; color: var(--text); } .request-game-world { font-size: .7rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .06em; } .request-services { display: flex; flex-wrap: wrap; gap: .5rem; } .req-chip { padding: .5rem .85rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-muted); font-size: .8125rem; cursor: pointer; transition: border-color .2s, color .2s, background .2s; } .req-chip:hover { border-color: var(--primary); color: var(--text); } .req-chip.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--text); font-weight: 600; } .request-hint { font-size: .8125rem; color: var(--text-soft); padding: .35rem 0; } .request-msg { font-size: .8125rem; min-height: 1rem; } .request-msg.is-error { color: var(--danger); } /* ── Request Service Page — enhanced (v3) ── */ .request-wrap { max-width: 760px; gap: 1.1rem; } .req-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.35rem 1.5rem; display: flex; flex-direction: column; gap: .85rem; } .req-step__head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; } .req-step__head .section-label { font-size: .95rem; margin-bottom: 0; } /* stronger input contrast inside request */ .request-wrap .form-input { border-color: rgba(255,255,255,.14); } .request-wrap .form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); } .request-wrap .form-input::placeholder { color: var(--text-muted); } /* game cards */ .request-wrap .request-game { position: relative; overflow: hidden; text-align: left; } .request-wrap .request-game::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--game-accent, var(--primary)); opacity: .5; transition: opacity .2s; } .request-wrap .request-game:hover { transform: translateY(-2px); border-color: var(--game-accent, var(--primary)); box-shadow: 0 8px 20px rgba(0,0,0,.28); } .request-wrap .request-game.is-active { border-color: var(--game-accent, var(--primary)); background: color-mix(in srgb, var(--game-accent, var(--primary)) 14%, var(--surface)); box-shadow: inset 0 0 0 1px var(--game-accent, var(--primary)); } .request-wrap .request-game.is-active::before { opacity: 1; } /* service chips */ .request-wrap .req-chip { padding: .55rem .95rem; background: var(--surface-2); } .request-wrap .req-chip:hover { transform: translateY(-1px); border-color: var(--primary); color: var(--text); } .request-wrap .req-chip.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--text); font-weight: 600; } /* WhatsApp preview (chat-card style) */ .wa-preview { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .wa-preview__bar { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; padding: .55rem .85rem; background: #075e54; color: #fff; } .wa-preview__dot { width: 8px; height: 8px; border-radius: 50%; background: #25d366; flex: none; } .wa-preview__title { font-size: .8rem; font-weight: 700; letter-spacing: .02em; } .wa-preview__btn { margin-left: auto; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff; } .wa-preview__btn:hover { background: rgba(255,255,255,.24); color: #fff; } .wa-textarea { background: #0e2c28; border: none !important; border-radius: 0; color: #e8f5f1; font-family: var(--font-mono); font-size: .8125rem; } .wa-textarea:focus { box-shadow: 0 0 0 2px rgba(37,211,102,.4) !important; } .wa-textarea::placeholder { color: #6f9e95; } /* Mobile */ @media (max-width: 560px) { .request-games { grid-template-columns: repeat(2, 1fr); gap: .6rem; } .req-step { padding: 1.1rem 1rem; gap: .7rem; } .request-wrap { gap: .9rem; } .wa-preview__btn { margin-left: 0; } }