/** * design-system.css — AnyLauncher UI layer (ds-v2) * * Stylesheet order in HTML (cascade: general → specific → overrides): * 1. style-revamped.css — global tokens + legacy components * 2. sanctum.css — sanctum / glass / hero imagery layer * 3. page CSS — home.css, store.css, profile.css, … * 4. Font Awesome * 5. design-system.css — THIS FILE LAST (ds-v2 overrides) */ /* ── Scoped layout tokens (see :root in style-revamped.css) ───────── */ body.ds-v2 { /* 100% of containing block — avoids vw + vertical scrollbar horizontal overflow */ --ds-max: min(1180px, 100%); --ds-pad-x: clamp(1.1rem, 3.2vw, 2rem); --ds-section-y: clamp(3rem, 6.5vw, 5.75rem); --ds-ease: cubic-bezier(0.22, 1, 0.36, 1); --ds-header-h: 76px; --ds-radius-sm: 10px; --ds-radius-md: 14px; --ds-radius-lg: 22px; --ds-radius-xl: 30px; --ds-radius-pill: 999px; --color-header-top: rgba(235, 192, 111, 0.72); --color-nav-inactive: #999999; --color-nav-pill-bg: rgba(18, 18, 18, 0.94); --color-nav-pill-border: rgba(235, 192, 111, 0.14); --ds-shadow-nav: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 14px 40px rgba(0, 0, 0, 0.55); --ds-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--color-accent-rgb), 0.14), 0 0 36px rgba(var(--color-accent-rgb), 0.06); --ds-shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 28px 64px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(var(--color-accent-rgb), 0.28), 0 0 48px rgba(var(--color-accent-rgb), 0.1); /* Decorative motion (derived from accent RGB only) */ --ds-fx-ring-strong: rgba(var(--color-accent-rgb), 0.42); --ds-fx-ring-soft: rgba(var(--color-accent-rgb), 0.22); --ds-fx-glow-mid: rgba(var(--color-accent-rgb), 0.28); --ds-fx-shine: linear-gradient( 105deg, transparent 0%, rgba(255, 248, 230, 0.34) 45%, rgba(255, 255, 255, 0.08) 52%, transparent 100% ); } html:has(body.ds-v2) { -webkit-text-size-adjust: 100%; overflow-x: clip; scrollbar-color: rgba(var(--color-accent-rgb), 0.55) rgba(6, 5, 4, 0.75); } html:has(body.ds-v2)::-webkit-scrollbar { width: 10px; height: 10px; } html:has(body.ds-v2)::-webkit-scrollbar-track { background: rgba(4, 3, 2, 0.85); } html:has(body.ds-v2)::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--color-accent-dark), var(--color-accent)); border-radius: 999px; border: 2px solid rgba(4, 3, 2, 0.85); } html:has(body.ds-v2)::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--color-accent), var(--color-accent-hover)); } /* ── Page canvas: photo + dark veil (public); admin uses .admin-layout chrome ─ */ body.ds-v2 { font-size: 17px; line-height: 1.68; letter-spacing: 0.01em; font-weight: 400; } body.ds-v2:not(:has(.admin-layout)) { background-color: #060504; /* Top → bottom stack: veils / PCB traces / brass motif / photo (photo stays dominant). */ background-image: linear-gradient(180deg, rgba(4, 3, 2, 0.86) 0%, rgba(3, 2, 2, 0.78) 40%, rgba(2, 2, 2, 0.9) 100%), linear-gradient(118deg, rgba(22, 14, 8, 0.4) 0%, transparent 52%), radial-gradient(ellipse 100% 68% at 50% 0%, rgba(var(--color-accent-rgb), 0.1) 0%, transparent 54%), linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0%, transparent 14%, transparent 86%, rgba(0, 0, 0, 0.26) 100%), repeating-linear-gradient( 90deg, rgba(var(--color-accent-rgb), 0.045) 0 1px, transparent 1px, transparent 62px ), repeating-linear-gradient( 0deg, rgba(var(--color-accent-rgb), 0.038) 0 1px, transparent 1px, transparent 54px ), repeating-linear-gradient( 128deg, transparent 0 26px, rgba(var(--color-accent-rgb), 0.028) 26px 27px, transparent 27px 76px ), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23EBC06F' stroke-opacity='0.09' stroke-width='0.8'%3E%3Ccircle cx='48' cy='48' r='14'/%3E%3Cpath d='M48 20v10M48 66v10M20 48h10M66 48h10M30 30l7 7M59 59l7 7M59 37l-7 7M30 66l7-7'/%3E%3C/g%3E%3C/svg%3E"), url('/images/anybackgorund.png'); background-size: cover, cover, cover, cover, 72px 72px, 72px 72px, 88px 88px, 200px 200px, cover; background-position: center; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat, no-repeat; background-attachment: scroll, scroll, scroll, scroll, scroll, scroll, scroll, scroll, scroll; } @media (min-width: 769px) { body.ds-v2:not(:has(.admin-layout)) { background-attachment: scroll, scroll, scroll, scroll, scroll, scroll, scroll, scroll, fixed; } } body.ds-v2:has(.admin-layout) { background-color: var(--color-background); background-image: none; background-attachment: scroll; } /* Drop style-revamped cyan scanline overlay on ds-v2 (it reads as “blue” on the photo bg) */ body.ds-v2::after { content: none; } /* Typography: sentence case, Exo-led hierarchy (still same font files) */ body.ds-v2 h1, body.ds-v2 h2, body.ds-v2 h3, body.ds-v2 h4, body.ds-v2 h5, body.ds-v2 h6 { font-family: var(--font-primary); font-weight: 600; line-height: 1.18; letter-spacing: -0.035em; text-transform: none; color: var(--color-heading); } body.ds-v2 h1 { letter-spacing: -0.045em; font-weight: 700; } body.ds-v2 p { line-height: 1.72; } body.ds-v2 .gradient-text { background: linear-gradient( 135deg, var(--color-accent) 0%, var(--color-accent-hover) 52%, var(--color-accent-light) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } body.ds-v2 .container, body.ds-v2 .main-container { width: 100%; max-width: var(--ds-max); margin-left: auto; margin-right: auto; padding-left: var(--ds-pad-x); padding-right: var(--ds-pad-x); } body.ds-v2 .container { padding-top: var(--ds-section-y); padding-bottom: var(--ds-section-y); } body.ds-v2 .section-header { margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); max-width: 760px; } body.ds-v2 .section-header h2 { font-size: clamp(1.85rem, 3.6vw, 2.65rem); font-weight: 600; } body.ds-v2 .section-tag { font-family: var(--font-primary); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border-radius: var(--ds-radius-pill); padding: 7px 18px; background: rgba(var(--color-accent-rgb), 0.1); border: 1px solid rgba(var(--color-accent-rgb), 0.28); color: var(--color-accent-light); } /* Button / CTA visuals: see “Primitive components (.ds-btn)” at end of file. */ /* Cards & chrome */ body.ds-v2 .card, body.ds-v2 .feature-card-deluxe, body.ds-v2 .product-card-deluxe, body.ds-v2 .home-stat-card { border-radius: var(--ds-radius-lg); border: 1px solid rgba(var(--color-accent-rgb), 0.18); background: linear-gradient( 165deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 40%, rgba(0, 0, 0, 0.25) 100% ), var(--color-card-bg); box-shadow: var(--ds-shadow-card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.3s var(--ds-ease), box-shadow 0.3s var(--ds-ease), border-color 0.25s ease; } body.ds-v2 .card:hover, body.ds-v2 .feature-card-deluxe:hover, body.ds-v2 .product-card-deluxe:hover { transform: translateY(-5px); box-shadow: var(--ds-shadow-card-hover); border-color: rgba(var(--color-accent-rgb), 0.35); } body.ds-v2 .feature-card-deluxe .icon, body.ds-v2 .solution-card-icon, body.ds-v2 .home-stat-icon { border-radius: var(--ds-radius-md); clip-path: none; } body.ds-v2 .feature-card-deluxe .icon { width: 56px; height: 56px; } body.ds-v2 .store-filter-chip { border-radius: var(--ds-radius-pill); clip-path: none; font-family: var(--font-primary); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: none; } body.ds-v2 .product-card-deluxe .product-badge { border-radius: var(--ds-radius-pill); clip-path: none; } body.ds-v2 .form-group label { font-family: var(--font-primary); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.05em; text-transform: none; } body.ds-v2 .form-group input, body.ds-v2 .form-group select, body.ds-v2 .form-group textarea { border-radius: var(--ds-radius-md); border: 1px solid rgba(var(--color-accent-rgb), 0.2); background: rgba(255, 255, 255, 0.04); } body.ds-v2 .form-group input:focus, body.ds-v2 .form-group select:focus, body.ds-v2 .form-group textarea:focus { border-color: var(--color-border-interactive); background: rgba(var(--color-accent-rgb), 0.07); box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.12); } /* Header: dark bar + thin gold top edge + pill cluster */ body.ds-v2 .main-header-revamped { position: relative; height: var(--ds-header-h); background: linear-gradient( 180deg, rgba(10, 10, 10, 0.96) 0%, rgba(4, 4, 4, 0.98) 100% ); border-top: 1px solid var(--color-header-top, rgba(var(--color-accent-rgb), 0.7)); border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.1); box-shadow: var(--ds-shadow-nav); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15); } body.ds-v2 .main-header-revamped::before { display: none; } body.ds-v2 .main-header-revamped::after { opacity: 0.45; background: linear-gradient( 90deg, transparent 0%, rgba(var(--color-accent-rgb), 0.35) 50%, transparent 100% ); } body.ds-v2 .header-container { position: relative; z-index: 2; max-width: var(--ds-max); padding: 0 var(--ds-pad-x); } body.ds-v2 .main-header-revamped .nav-links { gap: 0.3rem; padding: 4px 6px; background: var(--color-nav-pill-bg, rgba(18, 18, 18, 0.95)); border: 1px solid var(--color-nav-pill-border, rgba(var(--color-accent-rgb), 0.14)); border-radius: 50px; } body.ds-v2 .main-header-revamped .nav-links a, body.ds-v2 .main-header-revamped .nav-actions #nav-auth a:not(.btn) { border-radius: 50px; font-family: var(--font-primary); font-size: 0.84rem; font-weight: 700; letter-spacing: 0.02em; text-transform: none; padding: 9px 18px; color: var(--color-nav-inactive, #999999); border: 1px solid transparent; display: inline-flex; align-items: center; line-height: 1.2; } body.ds-v2 .main-header-revamped .nav-actions #nav-auth a:not(.btn) { justify-content: center; white-space: nowrap; flex-shrink: 0; } body.ds-v2 .main-header-revamped .nav-links a:hover, body.ds-v2 .main-header-revamped .nav-actions #nav-auth a:not(.btn):hover { background: rgba(var(--color-accent-rgb), 0.12); color: var(--color-text-primary); border-color: rgba(var(--color-accent-rgb), 0.2); box-shadow: none; } body.ds-v2 .main-header-revamped .nav-links a.active, body.ds-v2 .main-header-revamped .nav-actions #nav-auth a:not(.btn).active { color: #0a0a0a; background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%); box-shadow: 0 8px 28px rgba(var(--color-accent-rgb), 0.38); } body.ds-v2 .main-header-revamped .nav-logo { height: 44px; filter: drop-shadow(0 3px 12px rgba(var(--color-accent-rgb), 0.35)) brightness(1.06); } body.ds-v2 .lang-switcher-btn { border-radius: var(--ds-radius-pill); border: 1px solid rgba(var(--color-accent-rgb), 0.22); background: rgba(255, 255, 255, 0.04); } body.ds-v2 .lang-dropdown { border-radius: var(--ds-radius-lg); border: 1px solid rgba(var(--color-accent-rgb), 0.22); background: linear-gradient(180deg, var(--color-card-bg) 0%, var(--color-background-alt) 100%); box-shadow: var(--ds-shadow-card); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } body.ds-v2 .mobile-menu-toggle { border-radius: 50px; border-color: rgba(var(--color-accent-rgb), 0.28); background: rgba(var(--color-accent-rgb), 0.08); position: relative; z-index: 1210; } body.ds-v2 .mobile-menu { border-radius: var(--ds-radius-xl) 0 0 var(--ds-radius-xl); border-left: 1px solid rgba(var(--color-accent-rgb), 0.22); background: linear-gradient(180deg, #101010 0%, #050505 100%); } /* Mobile drawer: start below sticky header so it is not positioned over the hero as a loose layer */ @media (max-width: 1100px) { body.ds-v2 .mobile-menu { top: var(--ds-header-h, 76px); height: calc(100dvh - var(--ds-header-h, 76px)); max-height: calc(100dvh - var(--ds-header-h, 76px)); padding: 0.75rem 1rem 1rem; z-index: 1200; width: min(300px, 82vw); max-width: min(300px, 82vw); justify-content: flex-start; } body.ds-v2.mobile-menu-is-open::before { top: var(--ds-header-h, 76px); height: calc(100dvh - var(--ds-header-h, 76px)); max-height: calc(100dvh - var(--ds-header-h, 76px)); } body.ds-v2 .mobile-menu a { border-radius: 12px; font-size: 0.8rem; padding: 8px 11px; min-height: 0; } body.ds-v2 .mobile-menu a.active { box-shadow: 0 2px 10px rgba(var(--color-accent-rgb), 0.22); } body.ds-v2 .mobile-menu .ds-btn, body.ds-v2 .mobile-menu a.ds-btn { padding: 0.5rem 0.85rem; min-height: 2.15rem; font-size: 0.78rem; border-radius: 10px; width: 100%; box-sizing: border-box; justify-content: center; } body.ds-v2 .mobile-menu .ds-btn:not(:disabled):not([aria-disabled='true']):hover, body.ds-v2 .mobile-menu a.ds-btn:not(:disabled):not([aria-disabled='true']):hover { transform: none; } body.ds-v2 .mobile-menu .lang-switcher-btn { padding: 6px 10px; font-size: 0.68rem; min-height: 0; } } /* Dim veil above main but below header + drawer (drawer stays clickable) */ body.ds-v2.mobile-menu-is-open::before { z-index: 1150; } body.ds-v2.mobile-menu-is-open #header-placeholder { z-index: 1250; } /* Logged-in pill rail: horizontal scroll, scrollbar hidden (scroll container = #nav-auth) */ body.ds-v2 .main-header-revamped .nav-actions #nav-auth { display: flex; align-items: center; flex-wrap: nowrap; gap: 0.28rem; padding-block: 4px; padding-inline: 5px; min-width: 0; max-width: min(520px, 42vw); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } body.ds-v2 .main-header-revamped .nav-actions #nav-auth::-webkit-scrollbar { display: none; width: 0; height: 0; } body.ds-v2 .main-header-revamped .nav-actions #nav-auth::-webkit-scrollbar:horizontal { height: 0; } body.ds-v2 .mobile-menu .mobile-nav-actions #nav-auth { scrollbar-width: none; -ms-overflow-style: none; } body.ds-v2 .mobile-menu .mobile-nav-actions #nav-auth::-webkit-scrollbar { display: none; } @media (max-width: 1280px) and (min-width: 1101px) { body.ds-v2 .main-header-revamped .nav-links a, body.ds-v2 .main-header-revamped .nav-actions #nav-auth a:not(.btn) { padding: 7px 12px; font-size: 0.78rem; letter-spacing: 0.01em; } body.ds-v2 .main-header-revamped .nav-actions #nav-auth { gap: 0.22rem; padding-block: 3px; padding-inline: 5px; max-width: min(500px, 44vw); } body.ds-v2 .main-header-revamped .nav-actions #nav-auth a.btn.ds-btn { padding: 7px 16px; font-size: 0.74rem; min-height: 0; } } body.ds-v2 .mobile-menu a { font-family: var(--font-primary); font-weight: 700; letter-spacing: 0.02em; text-transform: none; color: var(--color-nav-inactive, #999); border-radius: 12px; } body.ds-v2 .mobile-menu a.active { color: #0a0a0a; background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%); box-shadow: 0 2px 10px rgba(var(--color-accent-rgb), 0.22); } body.ds-v2 #header-placeholder.header-scrolled .main-header-revamped { background: linear-gradient(180deg, rgba(8, 8, 8, 0.98) 0%, rgba(3, 3, 3, 0.98) 100%); border-top-color: var(--color-header-top, rgba(var(--color-accent-rgb), 0.85)); border-bottom-color: rgba(var(--color-accent-rgb), 0.16); } /* Home only: nav sits over hero; at top use glass so slides read through the bar */ body.ds-v2:has(.ds-page--home) #header-placeholder:not(.header-scrolled) .main-header-revamped { background: linear-gradient( 180deg, rgba(8, 8, 8, 0.42) 0%, rgba(4, 4, 4, 0.58) 100% ); border-bottom-color: rgba(var(--color-accent-rgb), 0.05); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset; } body.ds-v2:has(.ds-page--home) #header-placeholder:not(.header-scrolled) .main-header-revamped::after { opacity: 0.22; } html:has(body.ds-v2 .ds-page--home) { scroll-padding-top: var(--ds-header-h, 76px); } /* Footer */ body.ds-v2 .main-footer-revamped { margin-top: auto; padding: clamp(2.5rem, 5vw, 3.75rem) 0; background: linear-gradient(180deg, rgba(4, 4, 4, 0.99) 0%, var(--color-background) 100%); border-top: 1px solid var(--color-header-top, rgba(var(--color-accent-rgb), 0.35)); } body.ds-v2 .footer-container { max-width: var(--ds-max); padding: 0 var(--ds-pad-x); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.75rem; } @media (max-width: 900px) { body.ds-v2 .footer-container { grid-template-columns: 1fr; text-align: center; justify-items: center; } body.ds-v2 .footer-right { align-items: center !important; } } body.ds-v2 .footer-logo-text { letter-spacing: 0.04em; text-transform: none; font-weight: 700; font-family: var(--font-primary); } body.ds-v2 .footer-btn { border-radius: var(--ds-radius-pill); text-transform: none; letter-spacing: 0.04em; padding: 9px 20px; font-family: var(--font-primary); font-weight: 600; } body.ds-v2 .social-link { border-radius: var(--ds-radius-md); } /* Home hero: breaks home.css uppercase / sizing */ body.ds-v2 .slide { padding: clamp(2.5rem, 5vw, 4rem) var(--ds-pad-x); } body.ds-v2 .slide-content h1 { font-family: var(--font-primary); font-size: clamp(1.85rem, 4.2vw, 3.1rem); font-weight: 700; letter-spacing: -0.045em; text-transform: none; line-height: 1.12; } body.ds-v2 .slide-content h1 em { font-style: italic; font-weight: 700; } body.ds-v2 .slide-content p { font-size: 1.02rem; max-width: 560px; } body.ds-v2 .home-link-label { text-transform: none; letter-spacing: 0.03em; font-weight: 600; font-family: var(--font-primary); } body.ds-v2 .bf-countdown-content { border-radius: var(--ds-radius-lg); clip-path: none; } /* Releases */ body.ds-v2 .releases-main { padding: clamp(2.25rem, 5vw, 3.75rem) var(--ds-pad-x) clamp(3.25rem, 7vw, 4.5rem); } body.ds-v2 .releases-title { font-weight: 600; letter-spacing: -0.03em; text-transform: none; font-family: var(--font-primary); } /* Toasts */ body.ds-v2 .toast { border-radius: var(--ds-radius-md); } body.ds-v2 .reveal-ready { transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } /* Admin (admin-panel.css unchanged) */ body.ds-v2 .admin-layout .stat-card:hover { transform: translateY(-3px); } body.ds-v2 .admin-table thead th { text-transform: none; letter-spacing: 0.06em; font-size: 0.74rem; font-weight: 600; font-family: var(--font-primary); } body.ds-v2 .main-content { padding: clamp(1.35rem, 2.8vw, 2.25rem); } body.ds-v2 .content-title { font-weight: 600; letter-spacing: -0.03em; font-family: var(--font-primary); } body.ds-v2 .table-container { border: 1px solid rgba(var(--color-accent-rgb), 0.16); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-card); overflow: hidden; } body.ds-v2 .license-filters-bar { border-color: rgba(var(--color-accent-rgb), 0.16); border-radius: var(--ds-radius-md); } /* ── Page shell & section rhythm ───────────────────────────────────── */ body.ds-v2 .ds-page { position: relative; z-index: 1; } body.ds-v2 .ds-section-header { text-align: left; } body.ds-v2 .ds-section { position: relative; } body.ds-v2 .ds-surface-panel { border-radius: var(--ds-radius-xl); border: 1px solid rgba(var(--color-accent-rgb), 0.14); background: linear-gradient( 165deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 42%, rgba(0, 0, 0, 0.22) 100% ), rgba(var(--color-accent-rgb), 0.03); box-shadow: var(--ds-shadow-card); padding: clamp(1.25rem, 3vw, 1.75rem); } body.ds-v2 .home-stats-heading.stats-live-text { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--font-mono); line-height: 1.3; } /* ── Editorial hero (store, profile, about, releases, …) ──────────── */ body.ds-v2 .ds-page-hero { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); padding: clamp(1.5rem, 3.5vw, 2.25rem); border-radius: var(--ds-radius-xl); border: 1px solid rgba(var(--color-accent-rgb), 0.18); background: linear-gradient( 145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 38%, rgba(0, 0, 0, 0.35) 100% ), var(--color-card-bg); box-shadow: var(--ds-shadow-card); position: relative; overflow: hidden; } body.ds-v2 .ds-page-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 55% at 100% 0%, rgba(var(--color-accent-rgb), 0.14), transparent 55%); opacity: 0.9; } body.ds-v2 .ds-page-hero__inner { position: relative; z-index: 1; max-width: 720px; } body.ds-v2 .ds-page-hero--compact { padding: clamp(1.25rem, 3vw, 1.85rem); } body.ds-v2 .ds-page-hero h1 { margin: 0.35rem 0 0.5rem; font-size: clamp(1.65rem, 3.2vw, 2.35rem); } body.ds-v2 .ds-page-hero__lead { margin: 0; font-size: 1.02rem; color: var(--color-text-secondary); max-width: 52ch; } body.ds-v2 .ds-hero-eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; } body.ds-v2 .ds-about-hero .about-page-label { margin: 0 0 0.5rem; } body.ds-v2 .ds-about-article { border-radius: var(--ds-radius-xl); } body.ds-v2 .ds-profile-page-header { margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem); } body.ds-v2 .ds-profile-shell { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: clamp(1.35rem, 3vw, 2.25rem); align-items: start; } @media (min-width: 1200px) { body.ds-v2 .ds-profile-shell { grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: clamp(1.75rem, 2.5vw, 2.75rem); } } @media (max-width: 900px) { body.ds-v2 .ds-profile-shell { grid-template-columns: 1fr; } } body.ds-v2 .ds-link-grid { gap: clamp(1rem, 2.5vw, 1.5rem); } body.ds-v2 .ds-feature-grid { gap: clamp(1.25rem, 3vw, 1.75rem); } body.ds-v2 .ds-releases-board { margin-top: 0.5rem; } body.ds-v2 .ds-bug-root { margin-top: clamp(0.5rem, 2vw, 1rem); } body.ds-v2 .ds-auth-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: min(70vh, 720px); gap: 1.5rem; padding-top: clamp(1rem, 4vw, 2rem); padding-bottom: clamp(2rem, 5vw, 3rem); } body.ds-v2 .ds-auth-panel { width: min(440px, 100%); border-radius: var(--ds-radius-xl); } body.ds-v2 .ds-store-page .store-hero.ds-page-hero { margin-bottom: clamp(1.25rem, 3vw, 2rem); padding: clamp(1.5rem, 3.5vw, 2.25rem); border-radius: var(--ds-radius-xl); border: 1px solid rgba(var(--color-accent-rgb), 0.18); box-shadow: var(--ds-shadow-card); } body.ds-v2 .ds-footer-nav { flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.75rem; } body.ds-v2 .ds-hero-slider { position: relative; z-index: 1; } /* ── Home: editorial shell (no skip link) ─────────────────────────── */ body.ds-v2 .ds-home-shell { position: relative; z-index: 1; } body.ds-v2 .ds-page--home { padding-top: 0; /* Wider editorial column on home only (store/profile keep global --ds-max). */ --ds-max: min(1200px, 100%); } body.ds-v2 .ds-page--home .container { max-width: var(--ds-max); } body.ds-v2 .ds-page--home .section-header, body.ds-v2 .ds-page--home .ds-section-header { max-width: min(56rem, 100%); } body.ds-v2 .ds-page--home .ds-home-closer.container.ds-sanctum-eco-band { padding-left: 0; padding-right: 0; } body.ds-v2 .ds-page--home .ds-home-closer-card { padding: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2.5rem); gap: clamp(1.75rem, 3.5vw, 2.75rem); } body.ds-v2 .ds-page--home .ds-home-closer-copy h2 { font-size: clamp(1.55rem, 2.9vw, 2.15rem); margin: 0; } body.ds-v2 .ds-page--home .ds-home-closer-actions { gap: 1rem; } body.ds-v2 .ds-page--home .ds-home-closer-actions .ds-home-closer-btn { min-height: 3.15rem; padding-left: clamp(1.25rem, 3vw, 1.65rem); padding-right: clamp(1.25rem, 3vw, 1.65rem); font-size: clamp(0.95rem, 1.2vw, 1.05rem); } body.ds-v2 .ds-page--home .ds-sanctum-features .ds-feature-grid { gap: 2rem; } body.ds-v2 .ds-page--home .ds-sanctum-features .feature-card-deluxe { min-height: clamp(280px, 32vh, 380px); padding: clamp(1.75rem, 3vw, 2.35rem) clamp(1.35rem, 2.5vw, 1.85rem); text-align: center; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 22px 56px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(var(--color-accent-rgb), 0.16), 0 0 36px rgba(var(--color-cyan-rgb), 0.06); } body.ds-v2 .ds-page--home .ds-sanctum-features .feature-card-deluxe .icon { width: 4.25rem; height: 4.25rem; font-size: 1.65rem; margin-bottom: 1.35rem; margin-inline: auto; } body.ds-v2 .ds-page--home .ds-sanctum-features .feature-card-deluxe h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); margin-bottom: 0.75rem; } body.ds-v2 .ds-page--home .ds-sanctum-features .feature-card-deluxe p { max-width: 28rem; margin-inline: auto; font-size: clamp(0.95rem, 1.15vw, 1.05rem); line-height: 1.7; } @media (min-width: 900px) { body.ds-v2 .ds-page--home .features-grid-deluxe.ds-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: center; gap: clamp(1.25rem, 2.2vw, 1.85rem); max-width: min(1180px, 100%); margin-inline: auto; } } @media (min-width: 769px) and (max-width: 899px) { body.ds-v2 .ds-page--home .features-grid-deluxe.ds-feature-grid { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1.5rem; max-width: min(28rem, 100%); margin-inline: auto; } } @media (max-width: 768px) { body.ds-v2 .ds-page--home .features-grid-deluxe.ds-feature-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; } body.ds-v2 .ds-page--home .ds-sanctum-features .feature-card-deluxe { width: min(100%, 28rem); } } body.ds-v2 .ds-page--home .ds-sanctum-features .ds-feature-card--installments { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(var(--color-accent-rgb), 0.2), 0 18px 48px rgba(0, 0, 0, 0.5), 0 0 36px rgba(var(--color-accent-rgb), 0.12); } body.ds-v2 .ds-page--home .ds-sanctum-features .ds-feature-card__foot { margin: 1rem 0 0; font-size: 0.82rem; } body.ds-v2 .ds-page--home .ds-sanctum-features .ds-feature-card__link { color: var(--color-accent-light, #e8c96a); font-weight: 600; text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.35); transition: color 0.15s ease, border-color 0.15s ease; } body.ds-v2 .ds-page--home .ds-sanctum-features .ds-feature-card__link:hover { color: var(--color-text-primary); border-bottom-color: rgba(var(--color-accent-rgb), 0.65); } body.ds-v2 .ds-home-hero-stage { position: relative; } body.ds-v2 .ds-home-body { display: flex; flex-direction: column; gap: 0; } body.ds-v2 .ds-home-closer { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); } body.ds-v2 .ds-home-closer-card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, auto); align-items: center; gap: clamp(1.5rem, 3vw, 2.5rem); padding: clamp(1.75rem, 3.5vw, 2.5rem); border-radius: var(--ds-radius-xl); border: 1px solid rgba(var(--color-accent-rgb), 0.22); background: linear-gradient( 125deg, rgba(var(--color-accent-rgb), 0.14) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.55) 100% ), var(--color-card-bg); box-shadow: var(--ds-shadow-card); } body.ds-v2 .ds-home-closer-copy h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); margin: 0 0 0.5rem; } body.ds-v2 .ds-home-closer-copy p { margin: 0; color: var(--color-text-secondary); } body.ds-v2 .ds-home-closer-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; } @media (max-width: 720px) { body.ds-v2 .ds-home-closer-card { grid-template-columns: 1fr; } body.ds-v2 .ds-home-closer-actions { justify-content: stretch; flex-direction: column; } body.ds-v2 .ds-home-closer-actions .btn { justify-content: center; text-align: center; } } /* ── Store: hero split + catalog panel ─────────────────────────────── */ body.ds-v2 .ds-store-shell { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem); } body.ds-v2 .ds-store-hero .ds-page-hero__inner, body.ds-v2 .ds-profile-hero .ds-page-hero__inner { max-width: min(var(--ds-max), 100%); width: 100%; } body.ds-v2 .ds-store-hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(260px, 0.88fr); gap: clamp(1.75rem, 4vw, 3rem); align-items: stretch; text-align: left; } @media (max-width: 900px) { body.ds-v2 .ds-store-hero__grid { grid-template-columns: 1fr; text-align: center; } body.ds-v2 .ds-store-hero__copy .section-tag { margin-left: auto; margin-right: auto; } body.ds-v2 .ds-store-hero-points { justify-content: center; } } body.ds-v2 .ds-store-hero__copy .ds-page-hero__lead { margin-left: 0; margin-right: 0; max-width: 36rem; } @media (max-width: 900px) { body.ds-v2 .ds-store-hero__copy .ds-page-hero__lead { margin-left: auto; margin-right: auto; } } body.ds-v2 .ds-store-hero-points { display: flex; flex-wrap: wrap; gap: 0.65rem 1rem; list-style: none; margin: 1.35rem 0 0; padding: 0; justify-content: flex-start; } body.ds-v2 .ds-store-hero-points li { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: none; color: var(--color-text-secondary); padding: 0.35rem 0.75rem; border-radius: var(--ds-radius-pill); border: 1px solid rgba(var(--color-accent-rgb), 0.16); background: rgba(0, 0, 0, 0.2); } body.ds-v2 .ds-store-hero-points li i { color: var(--color-accent); } body.ds-v2 .ds-store-hero-card { height: 100%; padding: clamp(1.35rem, 2.5vw, 1.75rem); border-radius: var(--ds-radius-lg); border: 1px solid rgba(var(--color-accent-rgb), 0.2); background: linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.28) 100%); display: flex; flex-direction: column; gap: 0.75rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } body.ds-v2 .ds-store-hero-card__kicker { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-light); } body.ds-v2 .ds-store-hero-card__text { margin: 0; font-size: 0.95rem; color: var(--color-text-secondary); line-height: 1.6; flex: 1; } body.ds-v2 .ds-store-hero-card__btn { align-self: flex-start; } @media (max-width: 900px) { body.ds-v2 .ds-store-hero-card__btn { align-self: center; } } body.ds-v2 .ds-store-catalog { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--ds-radius-xl); border: 1px solid rgba(var(--color-accent-rgb), 0.18); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.2) 100%), var(--color-card-bg); box-shadow: var(--ds-shadow-card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } body.ds-v2 .ds-store-catalog-head { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); padding-bottom: clamp(1rem, 2vw, 1.35rem); border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.12); } body.ds-v2 .ds-store-catalog-title { font-size: clamp(1.25rem, 2.4vw, 1.65rem); font-weight: 600; letter-spacing: -0.03em; margin: 0 0 0.35rem; color: var(--color-heading); } body.ds-v2 .ds-store-catalog-sub { margin: 0; max-width: 42rem; color: var(--color-text-secondary); font-size: 0.98rem; } body.ds-v2 .ds-store-filters-bar { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); } body.ds-v2 .ds-store-content, body.ds-v2 .ds-store-grid-view { min-width: 0; } /* ── Profile: dashboard workspace ──────────────────────────────────── */ body.ds-v2 .ds-profile-app { display: flex; flex-direction: column; gap: clamp(1.75rem, 3.5vw, 2.75rem); } body.ds-v2 .ds-profile-hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; } body.ds-v2 .ds-profile-hero-eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-light); padding: 6px 14px; border-radius: var(--ds-radius-pill); background: rgba(var(--color-accent-rgb), 0.1); border: 1px solid rgba(var(--color-accent-rgb), 0.22); margin-bottom: 0.65rem; } body.ds-v2 .ds-profile-hero__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; } body.ds-v2 .ds-profile-chip { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; padding: 0.4rem 0.85rem; border-radius: var(--ds-radius-pill); color: var(--color-text-secondary); border: 1px solid rgba(var(--color-accent-rgb), 0.16); background: rgba(0, 0, 0, 0.22); } body.ds-v2 .ds-profile-chip i { color: var(--color-accent); } @media (max-width: 720px) { body.ds-v2 .ds-profile-hero__chips { justify-content: flex-start; } } body.ds-v2 .ds-profile-board { gap: clamp(1.25rem, 3vw, 2rem); } body.ds-v2 .ds-profile-workspace { padding: clamp(1.35rem, 2.8vw, 2rem); border-radius: var(--ds-radius-xl); border: 1px solid rgba(var(--color-accent-rgb), 0.22); background: linear-gradient(170deg, rgba(var(--color-accent-rgb), 0.07) 0%, rgba(0, 0, 0, 0.15) 100%), #12100e; box-shadow: var(--ds-shadow-card); backdrop-filter: none; -webkit-backdrop-filter: none; } body.ds-v2 .ds-profile-tabs-wrap { margin-bottom: 1.25rem; } body.ds-v2 .ds-profile-views { min-width: 0; } /* ═══════════════════════════════════════════════════════════════════════════ Site-wide controls — accent motion (shine / lift / gold focus rings) Does not use body::before (reserved for mobile menu veil in style-revamped). ═══════════════════════════════════════════════════════════════════════════ */ @keyframes ds-accent-focus-ring { 0%, 100% { box-shadow: 0 0 0 1px rgba(var(--color-accent-rgb), 0.35), 0 0 0 3px rgba(var(--color-accent-rgb), 0.18), 0 0 22px rgba(var(--color-accent-rgb), 0.2); } 50% { box-shadow: 0 0 0 1px rgba(var(--color-accent-rgb), 0.52), 0 0 0 4px rgba(var(--color-accent-rgb), 0.12), 0 0 28px rgba(var(--color-accent-rgb), 0.28); } } @media (prefers-reduced-motion: reduce) { body.ds-v2 .btn:focus-visible:not(:disabled):not([disabled]), body.ds-v2 .ds-btn:focus-visible:not(:disabled):not([aria-disabled='true']) { animation: none; box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.4); } } body.ds-v2 .btn:disabled, body.ds-v2 .btn[disabled], body.ds-v2 button.btn:disabled, body.ds-v2 input[type='submit'].btn:disabled { opacity: 0.48; cursor: not-allowed; pointer-events: none; transform: none !important; filter: none !important; box-shadow: none; } body.ds-v2 .btn:disabled::before, body.ds-v2 .btn[disabled]::before, body.ds-v2 button.btn:disabled::before { display: none !important; } body.ds-v2 .btn::before, body.ds-v2 .ds-btn::before { content: ''; position: absolute; top: 0; left: -120%; width: 55%; height: 100%; background: var(--ds-fx-shine); transform: skewX(-16deg); pointer-events: none; opacity: 0; transition: left 0.58s var(--ds-ease), opacity 0.28s ease; } body.ds-v2 .btn:not(:disabled):not([disabled]):hover::before, body.ds-v2 .ds-btn:not(:disabled):not([aria-disabled='true']):hover::before { left: 135%; opacity: 1; } body.ds-v2 .btn:not(:disabled):not([disabled]):active, body.ds-v2 .ds-btn:not(:disabled):not([aria-disabled='true']):active { transform: translateY(0) scale(0.985); transition-duration: 0.12s; } body.ds-v2 .btn:focus-visible:not(:disabled):not([disabled]), body.ds-v2 .ds-btn:focus-visible:not(:disabled):not([aria-disabled='true']) { outline: none; animation: ds-accent-focus-ring 2.4s ease-in-out infinite; } body.ds-v2 .btn.btn-discord:focus-visible, body.ds-v2 .btn.btn-discord.ds-btn:focus-visible, body.ds-v2 .ds-btn.ds-btn--discord:focus-visible { animation: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12), 0 0 0 4px rgba(88, 101, 242, 0.45); } body.ds-v2 .btn.btn-danger:focus-visible, body.ds-v2 .btn.btn-danger.ds-btn:focus-visible, body.ds-v2 .ds-btn.ds-btn--danger:focus-visible { animation: none; box-shadow: 0 0 0 3px rgba(var(--color-danger-rgb), 0.38); } body.ds-v2 .btn.btn-outline-danger:focus-visible, body.ds-v2 .ds-btn.ds-btn--outline-danger:focus-visible { animation: none; box-shadow: 0 0 0 3px rgba(var(--color-danger-rgb), 0.32); } body.ds-v2 input[type='submit']:not(.btn):not(:disabled), body.ds-v2 button[type='submit']:not(.btn):not(:disabled) { transition: transform 0.2s var(--ds-ease), box-shadow 0.28s var(--ds-ease), border-color 0.2s ease, filter 0.2s ease; } body.ds-v2 input[type='submit']:not(.btn):not(:disabled):hover, body.ds-v2 button[type='submit']:not(.btn):not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(var(--color-accent-rgb), 0.35), 0 0 24px rgba(var(--color-accent-rgb), 0.22); } body.ds-v2 input[type='submit']:not(.btn):focus-visible, body.ds-v2 button[type='submit']:not(.btn):focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.38); } body.ds-v2 .main-header-revamped .nav-links a:hover { transform: translateY(-1px); box-shadow: 0 0 18px rgba(var(--color-accent-rgb), 0.14); } body.ds-v2 .main-header-revamped .nav-actions #nav-auth a:not(.btn):hover { box-shadow: 0 0 18px rgba(var(--color-accent-rgb), 0.14); } body.ds-v2 .main-header-revamped .nav-links a:focus-visible, body.ds-v2 .main-header-revamped .nav-actions #nav-auth a:not(.btn):focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.28); } body.ds-v2 .main-header-revamped .nav-links a.active { transform: translateY(-1px); } body.ds-v2 .store-filter-chip { transition: transform 0.2s var(--ds-ease), box-shadow 0.25s var(--ds-ease), border-color 0.2s ease, background 0.2s ease, color 0.2s ease; } body.ds-v2 .store-filter-chip:not(.active):hover { transform: translateY(-1px); box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.12); } body.ds-v2 .store-filter-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.22); } body.ds-v2 .store-filter-chip.active { transform: translateY(-1px); box-shadow: 0 0 22px rgba(var(--color-accent-rgb), 0.18); } body.ds-v2 .hwid-modal-tabs .tab-link:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 0 16px rgba(var(--color-accent-rgb), 0.1); } body.ds-v2 .hwid-modal-tabs .tab-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.22); } body.ds-v2 .ds-tabs .content-tab-link:focus-visible, body.ds-v2 .ds-tabs .ds-tab-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.22); } body.ds-v2 .ds-hero-slider .slider-nav:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.35), 0 10px 32px rgba(0, 0, 0, 0.55); } /* ═══════════════════════════════════════════════════════════════════════════ Primitive components (.ds-*) — tokens only (var(--color-*), *-rgb rgba) Pair with legacy .btn / .card classes where JS depends on them. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Buttons ───────────────────────────────────────────────────────── */ body.ds-v2 .ds-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; box-sizing: border-box; margin: 0; padding: 0.78rem 1.45rem; min-height: 2.75rem; border: 1px solid transparent; border-radius: var(--ds-radius-pill); font-family: var(--font-primary); font-weight: 600; font-size: 0.94rem; letter-spacing: 0.02em; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; isolation: isolate; transition: transform 0.2s var(--ds-ease), box-shadow 0.28s var(--ds-ease), border-color 0.2s ease, background 0.22s ease, color 0.2s ease, filter 0.2s ease; } body.ds-v2 a.ds-btn { color: inherit; } body.ds-v2 .ds-btn:disabled, body.ds-v2 .ds-btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; } body.ds-v2 .ds-btn--sm, body.ds-v2 .btn.ds-btn.ds-btn--sm, body.ds-v2 .btn.btn-sm.ds-btn { min-height: 2.1rem; padding: 0.45rem 0.95rem; font-size: 0.82rem; border-radius: var(--ds-radius-md); } body.ds-v2 .ds-btn--lg, body.ds-v2 .btn.btn-hero.ds-btn { padding: 0.95rem 1.85rem; min-height: 3.1rem; font-size: 1.05rem; border-radius: var(--ds-radius-pill); } body.ds-v2 .ds-btn--block { width: 100%; } body.ds-v2 .ds-btn--primary, body.ds-v2 .btn.ds-btn.ds-btn--primary:not(.btn-secondary):not(.btn-ghost-hero):not(.btn-discord):not(.btn-danger) { color: var(--color-button-text); border-color: rgba(var(--color-accent-rgb), 0.45); background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 55%, var(--color-accent-light) 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 12px 36px rgba(var(--color-accent-rgb), 0.32); } body.ds-v2 .ds-btn--primary:hover, body.ds-v2 .btn.ds-btn.ds-btn--primary:not(.btn-secondary):not(.btn-ghost-hero):not(.btn-discord):not(.btn-danger):hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 18px 48px rgba(var(--color-accent-rgb), 0.42); } body.ds-v2 .ds-btn--primary:active, body.ds-v2 .btn.ds-btn.ds-btn--primary:not(.btn-secondary):not(.btn-ghost-hero):not(.btn-discord):not(.btn-danger):active { transform: translateY(0); } body.ds-v2 .ds-btn--secondary, body.ds-v2 .btn.btn-secondary.ds-btn { color: var(--color-text-primary); background: rgba(0, 0, 0, 0.28); border-color: rgba(var(--color-accent-rgb), 0.38); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset; } body.ds-v2 .ds-btn--secondary:hover, body.ds-v2 .btn.btn-secondary.ds-btn:hover { transform: translateY(-2px); background: rgba(var(--color-accent-rgb), 0.12); border-color: var(--color-accent-hover); color: var(--color-heading); } body.ds-v2 .ds-btn--ghost, body.ds-v2 .btn-ghost-hero.ds-btn { color: var(--color-text-primary); background: rgba(255, 255, 255, 0.03); border-color: rgba(var(--color-accent-rgb), 0.28); box-shadow: none; } body.ds-v2 .ds-btn--ghost:hover, body.ds-v2 .btn-ghost-hero.ds-btn:hover { transform: translateY(-2px); background: rgba(var(--color-accent-rgb), 0.1); border-color: rgba(var(--color-accent-rgb), 0.45); color: var(--color-accent-light); } body.ds-v2 .ds-btn--danger, body.ds-v2 .btn.btn-danger.ds-btn { color: #fff; background: linear-gradient(135deg, #000000 0%, #000000 100%); border-color: rgba(var(--color-danger-rgb), 0.55); /* box-shadow: 0 10px 32px rgba(var(--color-danger-rgb), 0.28); */ } body.ds-v2 .ds-btn--danger:hover, body.ds-v2 .btn.btn-danger.ds-btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 40px rgba(var(--color-danger-rgb), 0.38); } body.ds-v2 .ds-btn--outline-danger, body.ds-v2 .btn.btn-outline-danger.ds-btn { color: var(--color-danger); background: transparent; border-color: rgba(var(--color-danger-rgb), 0.55); box-shadow: none; } body.ds-v2 .ds-btn--outline-danger:hover, body.ds-v2 .btn.btn-outline-danger.ds-btn:hover { background: var(--color-danger-bg); transform: translateY(-1px); } body.ds-v2 .ds-btn--outline-warning, body.ds-v2 .btn.btn-outline-warning.ds-btn { color: var(--color-warning); background: transparent; border-color: rgba(var(--color-warning-rgb), 0.55); } body.ds-v2 .ds-btn--outline-warning:hover, body.ds-v2 .btn.btn-outline-warning.ds-btn:hover { background: var(--color-warning-bg); } body.ds-v2 .ds-btn--outline-success, body.ds-v2 .btn.btn-outline-success.ds-btn { color: var(--color-success); background: transparent; border-color: rgba(var(--color-success-rgb), 0.55); } body.ds-v2 .ds-btn--outline-success:hover, body.ds-v2 .btn.btn-outline-success.ds-btn:hover { background: var(--color-success-bg); } body.ds-v2 .btn.btn-primary.ds-btn { color: var(--color-button-text); border-color: rgba(var(--color-accent-rgb), 0.45); background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); box-shadow: 0 10px 32px rgba(var(--color-accent-rgb), 0.28); } body.ds-v2 .btn.btn-primary.ds-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(var(--color-accent-rgb), 0.4); } /* Discord CTA: indigo surface, still token-based text */ body.ds-v2 .btn.btn-discord.ds-btn, body.ds-v2 .ds-btn.ds-btn--discord { color: #fff; border-color: rgba(88, 101, 242, 0.85); background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%); box-shadow: 0 10px 32px rgba(88, 101, 242, 0.35); } body.ds-v2 .btn.btn-discord.ds-btn:hover { transform: translateY(-2px); filter: brightness(1.06); } /* Icon-only / square admin tool buttons */ body.ds-v2 .ds-btn--icon { width: 2.35rem; min-width: 2.35rem; height: 2.35rem; padding: 0; border-radius: var(--ds-radius-md); } /* ── Form controls ─────────────────────────────────────────────────── */ body.ds-v2 .ds-input, body.ds-v2 .ds-select, body.ds-v2 .ds-textarea, body.ds-v2 input.ds-input, body.ds-v2 select.ds-select, body.ds-v2 textarea.ds-textarea { width: 100%; max-width: 100%; box-sizing: border-box; padding: 0.72rem 1rem; border-radius: var(--ds-radius-md); border: 1px solid rgba(var(--color-accent-rgb), 0.22); background: rgba(255, 255, 255, 0.04); color: var(--color-text-primary); font-family: var(--font-primary); font-size: 0.95rem; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } body.ds-v2 .ds-input:focus, body.ds-v2 .ds-select:focus, body.ds-v2 .ds-textarea:focus { outline: none; border-color: var(--color-border-interactive); background: rgba(var(--color-accent-rgb), 0.08); box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.14); } body.ds-v2 .ds-label { display: block; font-family: var(--font-primary); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color-text-secondary); margin-bottom: 0.4rem; } /* ── Card surface (optional second class) ─────────────────────────── */ body.ds-v2 .ds-card { border-radius: var(--ds-radius-xl); border: 1px solid rgba(var(--color-accent-rgb), 0.18); background: linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(0, 0, 0, 0.28) 100%), var(--color-card-bg); box-shadow: var(--ds-shadow-card); } /* ── Tables ────────────────────────────────────────────────────────── */ body.ds-v2 .ds-table-wrap { width: 100%; overflow-x: auto; border-radius: var(--ds-radius-lg); border: 1px solid rgba(var(--color-accent-rgb), 0.16); box-shadow: var(--ds-shadow-card); background: var(--color-card-bg); } body.ds-v2 .ds-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } body.ds-v2 .ds-table th, body.ds-v2 .ds-table td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.1); } body.ds-v2 .ds-table th { font-family: var(--font-primary); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); background: rgba(0, 0, 0, 0.25); } body.ds-v2 .ds-table tbody tr:hover td { background: rgba(var(--color-accent-rgb), 0.04); } /* ── Badges ────────────────────────────────────────────────────────── */ body.ds-v2 .ds-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.65rem; border-radius: var(--ds-radius-pill); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid rgba(var(--color-accent-rgb), 0.22); background: rgba(0, 0, 0, 0.25); color: var(--color-text-secondary); } body.ds-v2 .ds-badge--success { color: var(--color-success); border-color: rgba(var(--color-success-rgb), 0.45); background: var(--color-success-bg); } body.ds-v2 .ds-badge--danger { color: var(--color-danger); border-color: rgba(var(--color-danger-rgb), 0.45); background: var(--color-danger-bg); } body.ds-v2 .ds-badge--warn { color: var(--color-warning); border-color: rgba(var(--color-warning-rgb), 0.4); background: var(--color-warning-bg); } /* ── Tab pills (profile + inline panels) ───────────────────────────── */ body.ds-v2 .ds-tabs, body.ds-v2 .content-tabs.ds-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.45rem; margin-bottom: 1.5rem; border-radius: var(--ds-radius-pill); border: 1px solid rgba(var(--color-accent-rgb), 0.16); background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } body.ds-v2 .ds-tabs .content-tab-link, body.ds-v2 .ds-tabs .ds-tab-link { margin-bottom: 0; border-bottom: none; border-radius: var(--ds-radius-pill); padding: 0.55rem 1.1rem; font-family: var(--font-primary); font-weight: 600; font-size: 0.84rem; letter-spacing: 0.02em; text-transform: none; color: var(--color-text-secondary); background: transparent; border: 1px solid transparent; text-decoration: none; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease; } body.ds-v2 .ds-tabs .content-tab-link:hover, body.ds-v2 .ds-tabs .ds-tab-link:hover { color: var(--color-text-primary); background: rgba(var(--color-accent-rgb), 0.08); } body.ds-v2 .ds-tabs .content-tab-link.active, body.ds-v2 .ds-tabs .ds-tab-link.active { color: var(--color-button-text); background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); border-color: rgba(var(--color-accent-rgb), 0.5); box-shadow: 0 10px 28px rgba(var(--color-accent-rgb), 0.28); text-shadow: none; } /* HWID / store inline tabs */ body.ds-v2 .hwid-modal-tabs.ds-tabs--segmented, body.ds-v2 .hwid-modal-tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; padding: 0.35rem; border-radius: var(--ds-radius-lg); border: 1px solid rgba(var(--color-accent-rgb), 0.16); background: rgba(0, 0, 0, 0.3); } body.ds-v2 .hwid-modal-tabs .tab-link { border-radius: var(--ds-radius-md); padding: 0.5rem 0.9rem; font-weight: 600; font-size: 0.84rem; border: 1px solid transparent; background: transparent; color: var(--color-text-secondary); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } body.ds-v2 .hwid-modal-tabs .tab-link.active { color: var(--color-button-text); background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); border-color: rgba(var(--color-accent-rgb), 0.45); } /* ── Modal shell ───────────────────────────────────────────────────── */ body.ds-v2 .modal-overlay.ds-modal, body.ds-v2 .modal-overlay { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } body.ds-v2 .modal-box { border-radius: var(--ds-radius-xl); border: 1px solid rgba(var(--color-accent-rgb), 0.22); background: linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.35) 100%), var(--color-card-bg); box-shadow: var(--ds-shadow-card), 0 0 0 1px rgba(0, 0, 0, 0.5); } body.ds-v2 .modal-header { border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.12); } body.ds-v2 .modal-close-btn { border-radius: var(--ds-radius-md); border: 1px solid rgba(var(--color-accent-rgb), 0.2); background: rgba(0, 0, 0, 0.25); color: var(--color-text-primary); transition: background 0.2s ease, color 0.2s ease; } body.ds-v2 .modal-close-btn:hover { background: rgba(var(--color-danger-rgb), 0.15); color: var(--color-danger); } /* ── Nav pills (header cluster already styled; utility for in-page) ─ */ body.ds-v2 .ds-nav-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } body.ds-v2 .ds-nav-pills > a, body.ds-v2 .ds-nav-pills > button { border-radius: var(--ds-radius-pill); padding: 0.45rem 0.95rem; font-size: 0.82rem; font-weight: 600; border: 1px solid rgba(var(--color-accent-rgb), 0.18); background: rgba(0, 0, 0, 0.22); color: var(--color-text-secondary); text-decoration: none; cursor: pointer; transition: transform 0.2s var(--ds-ease), box-shadow 0.25s var(--ds-ease), background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } body.ds-v2 .ds-nav-pills > a:hover, body.ds-v2 .ds-nav-pills > button:hover { border-color: rgba(var(--color-accent-rgb), 0.35); color: var(--color-text-primary); background: rgba(var(--color-accent-rgb), 0.1); transform: translateY(-1px); box-shadow: 0 0 18px rgba(var(--color-accent-rgb), 0.12); } body.ds-v2 .ds-nav-pills > a:focus-visible, body.ds-v2 .ds-nav-pills > button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.24); } /* ── Purchase / form wrappers (store) ──────────────────────────────── */ body.ds-v2 #store-purchase-view .form-container.card, body.ds-v2 #store-purchase-view .form-container.ds-card { border-radius: var(--ds-radius-xl); border: 1px solid rgba(var(--color-accent-rgb), 0.18); box-shadow: var(--ds-shadow-card); } body.ds-v2 .form-wrapper.ds-purchase-shell { /* max-width: 720px; */ margin-left: auto; margin-right: auto; } /* ── Home slider chrome ───────────────────────────────────────────── */ body.ds-v2 .ds-hero-slider .slider-nav { width: 48px; height: 48px; border-radius: var(--ds-radius-pill); border: 1px solid rgba(var(--color-accent-rgb), 0.35); background: rgba(0, 0, 0, 0.45); color: var(--color-accent-light); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.2s var(--ds-ease), border-color 0.2s ease, background 0.2s ease, color 0.2s ease; } body.ds-v2 .ds-hero-slider .slider-nav:hover { transform: scale(1.06); border-color: var(--color-accent-hover); background: rgba(var(--color-accent-rgb), 0.15); color: var(--color-heading); } body.ds-v2 .main-header-revamped .nav-actions #nav-auth a.btn.ds-btn { padding: 0.48rem 1.05rem; min-height: 2.15rem; font-size: 0.8rem; } body.ds-v2 .btn-copy-code.ds-btn { margin-top: 0.65rem; }