:root { /* LIGHT MODE (Default) */ --bg-primary: #FAFAFA; --bg-secondary: #F5F5F5; --bg-tertiary: #FFFFFF; --bg-header: #FAFAFA; --bg-footer: #232426; --bg-footer-dark: #1A1A1A; --text-primary: #666666; --text-secondary: #2F3238; /* Header color */ --text-muted: #999999; --text-inverse: #FFFFFF; --color-primary: #FF8749; --color-secondary: #0CD9D9; --color-success: #22c55e; --color-danger: #ef4444; --border-color: #ddd; --border-light: #ececec; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --paragraph-margin-bottom: 16px; /* Legacy variable mapping for compatibility */ --color-white: var(--text-inverse); --color-light: #E6F4F1; --color-green: #95B1B0; --color-gray: var(--text-primary); --bg: var(--bg-primary); --bg-black: var(--bg-footer); --bg-footer-black: var(--bg-footer-dark); --white-color: var(--text-inverse); --color-text: var(--text-primary); --color-header: var(--text-secondary); } [data-theme="dark"] { /* DARK MODE */ --bg-primary: #0f1115; /* Deep dark bg */ --bg-secondary: #1a1d24; /* Cards/Sections */ --bg-tertiary: #242933; /* Inputs/Elevated */ --bg-header: #0f1115; --bg-footer: #050505; --bg-footer-dark: #000000; --text-primary: #d1d5db; /* Light gray text */ --text-secondary: #f3f4f6; /* White headers */ --text-muted: #9ca3af; --text-inverse: #1a1d23; /* Dark text on light elements if any */ --color-primary: #FF9F6D; /* Slightly lighter orange for contrast */ --color-secondary: #22eaea; /* Brighter cyan */ --border-color: #2e3440; --border-light: #2e3440; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5); /* Legacy variable mapping */ --color-white: #e5e7eb; /* Off-white for text that was hardcoded 'white' */ --color-light: #2d3748; --color-green: #4a5568; } /* Global Dark Mode Styles */ [data-theme="dark"] body { background-color: var(--bg-primary); color: var(--text-primary); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--text-secondary); } [data-theme="dark"] a { color: var(--color-primary); } [data-theme="dark"] .mainscreen { background: radial-gradient(circle at 20% 50%, rgba(0, 243, 255, 0.1) 0%, transparent 40%), #0b0d11; } [data-theme="dark"] .order-item, [data-theme="dark"] .card, [data-theme="dark"] .box { background-color: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border-color); } [data-theme="dark"] .header { background-color: rgba(15, 17, 21, 0.85) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* Performance: GPU compositing for smooth scroll */ will-change: transform; transform: translateZ(0); -webkit-transform: translateZ(0); } [data-theme="dark"] .header:hover { background-color: rgba(15, 17, 21, 0.95) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15); transition: background-color 0.3s ease, border-bottom 0.3s ease; } /* Dark Mode: Footer */ [data-theme="dark"] .footer { background-color: var(--bg-footer); } [data-theme="dark"] .footer-bottom { background-color: var(--bg-footer-dark); } /* Dark Mode: Sidenav */ [data-theme="dark"] .sidenav { background-color: var(--bg-secondary); } [data-theme="dark"] .backdrop { background-color: rgba(0, 0, 0, 0.7); } /* Dark Mode: Navigation */ [data-theme="dark"] .headblock { background-color: rgba(0, 0, 0, 0.4) !important; backdrop-filter: blur(10px); } [data-theme="dark"] .headblock__text { color: var(--color-primary) !important; font-weight: 600; } [data-theme="dark"] .logo svg { filter: drop-shadow(0 0 8px rgba(79, 203, 205, 0.3)); } /* Dark Mode: Buttons */ [data-theme="dark"] .btn-form { background-color: var(--color-primary) !important; color: #ffffff !important; border-color: var(--color-primary) !important; } [data-theme="dark"] .btn-form:hover { background-color: #e56b00 !important; color: #ffffff !important; } /* Dark Mode: Page Headers */ [data-theme="dark"] .page-header { color: var(--text-secondary); } [data-theme="dark"] .page-subheader { color: var(--text-primary); } /* Dark Mode: Order Forms */ [data-theme="dark"] .order-form__input { background-color: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border-color); } [data-theme="dark"] .order-form__label { color: var(--text-muted); } [data-theme="dark"] .order-form__total { color: var(--text-secondary); } /* Dark Mode: Currency Picker */ [data-theme="dark"] .currency-picker__trigger { background: var(--bg-tertiary) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; } [data-theme="dark"] .currency-picker__list { background-color: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .currency-picker__option:hover { background-color: var(--bg-tertiary); } /* Dark Mode: Mobile Currency Select */ [data-theme="dark"] .mobile-currency-select { background-color: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-secondary); } /* Dark Mode: Mobile Theme Toggle */ [data-theme="dark"] .mobile-theme-toggle { background-color: var(--bg-tertiary); border-color: var(--border-color); } /* UX FIX: CSS-based Slider Positioning (Prevents Flash) This forces the slider handle to the correct side immediately based on data-theme, without waiting for JS to execute. */ [data-theme="dark"] .theme-slider__handle { left: 100% !important; /* Force to right side */ } [data-theme="dark"] .theme-slider__fill { width: 100% !important; /* Force full width */ } /* Ensure icons reflect the state immediately via CSS */ [data-theme="dark"] .theme-slider__icon--sun { opacity: 0.5; transform: scale(0.8); } [data-theme="dark"] .theme-slider__icon--moon { opacity: 1; transform: scale(1.1); color: #fff; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); } /* Dark Mode: Navigation Links */ [data-theme="dark"] .header__menu li a, [data-theme="dark"] .nav-link, [data-theme="dark"] .nav-with-arrow { color: var(--text-secondary) !important; } [data-theme="dark"] .header__menu li a:hover, [data-theme="dark"] .nav-link:hover { color: var(--color-primary) !important; } /* Dark Mode: Dropdown Menus */ [data-theme="dark"] .header__dropdown ul { background-color: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .header__dropdown ul li a { color: var(--text-primary) !important; } [data-theme="dark"] .header__dropdown ul li a:hover { background-color: var(--bg-tertiary); color: var(--color-primary) !important; } /* Dark Mode: Main Container */ [data-theme="dark"] .main { background-color: var(--bg-primary); } [data-theme="dark"] .container { color: var(--text-primary); } /* Dark Mode: Hero/Banner Sections */ [data-theme="dark"] .hero, [data-theme="dark"] .banner, [data-theme="dark"] .hero-section { background-color: var(--bg-secondary); } /* Dark Mode: Product Cards */ [data-theme="dark"] .product-card, [data-theme="dark"] .account-card, [data-theme="dark"] .item-card { background-color: var(--bg-secondary); border-color: var(--border-color); } /* Dark Mode: Price Tags */ [data-theme="dark"] .price, [data-theme="dark"] .product-price { color: var(--color-primary); } /* Dark Mode: Sections */ [data-theme="dark"] .section, [data-theme="dark"] .section-block, [data-theme="dark"] .content-section { background-color: var(--bg-primary); } [data-theme="dark"] .section--alt, [data-theme="dark"] .section-alt { background-color: var(--bg-secondary); } /* Dark Mode: Wrapper */ [data-theme="dark"] .wrapper { background-color: var(--bg-primary); } /* Dark Mode: All White Backgrounds */ [data-theme="dark"] [style*="background: #FFFFFF"], [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background: white"], [data-theme="dark"] [style*="background-color: #FFFFFF"], [data-theme="dark"] [style*="background-color: #fff"], [data-theme="dark"] [style*="background-color: white"] { background-color: var(--bg-secondary) !important; } /* Dark Mode: Reviews */ [data-theme="dark"] .review-card, [data-theme="dark"] .review-screen, [data-theme="dark"] .review-screen__block { background-color: var(--bg-secondary); } [data-theme="dark"] .review-screen__text, [data-theme="dark"] .review-screen__name { color: var(--text-primary); } /* Dark Mode: FAQ */ [data-theme="dark"] .faq-item, [data-theme="dark"] .faq-question, [data-theme="dark"] .faq-answer { background-color: var(--bg-secondary); color: var(--text-primary); } /* Dark Mode: Blog */ [data-theme="dark"] .blog-card, [data-theme="dark"] .blog-item { background-color: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .blog-card__title, [data-theme="dark"] .blog-item__title { color: var(--text-secondary); } /* Dark Mode: Checkout */ [data-theme="dark"] .checkout-form, [data-theme="dark"] .checkout-summary { background-color: var(--bg-secondary); border-color: var(--border-color); } /* Dark Mode: Tables */ [data-theme="dark"] table, [data-theme="dark"] .table { background-color: var(--bg-secondary); color: var(--text-primary); } [data-theme="dark"] th { background-color: var(--bg-tertiary); color: var(--text-secondary); } [data-theme="dark"] td { border-color: var(--border-color); } /* Dark Mode: Buttons General */ [data-theme="dark"] .btn, [data-theme="dark"] button:not(.theme-toggle__button):not(.mobile-theme-toggle) { background-color: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border-color); } [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn--primary { background-color: var(--color-primary); color: var(--bg-primary); border-color: var(--color-primary); } [data-theme="dark"] .btn-secondary { background-color: var(--bg-tertiary); /* Keep grey but slightly lighter */ color: var(--text-secondary); border-color: var(--border-color); } [data-theme="dark"] .btn-secondary:hover { background-color: var(--border-color); } [data-theme="dark"] .btn-danger { background-color: var(--color-danger) !important; color: #fff !important; border-color: var(--color-danger) !important; } /* Dark Mode: Slider/Swiper */ [data-theme="dark"] .swiper-container, [data-theme="dark"] .swiper-slide { background-color: transparent; } /* Dark Mode: Modal/Popup */ [data-theme="dark"] .modal, [data-theme="dark"] .popup, [data-theme="dark"] .modal-content { background-color: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); } /* Dark Mode: Misc Elements */ [data-theme="dark"] .subscription-box, [data-theme="dark"] .subscribe-section { background-color: var(--bg-secondary); } [data-theme="dark"] .feature-box, [data-theme="dark"] .feature-item { background-color: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .stat-box, [data-theme="dark"] .stats-item { background-color: var(--bg-secondary); } /* Dark Mode: SVG/Icon Colors in Nav */ [data-theme="dark"] .nav-angle { color: var(--text-secondary); } /* Dark Mode: Logo adjustment if needed */ [data-theme="dark"] .logo svg path[fill="#434850"] { fill: var(--text-secondary); } /* Dark Mode: Main Screen / Hero */ [data-theme="dark"] .mainscreen { background-color: #0f1115 !important; background-image: none !important; } /* Light/Dark mode picture toggle - use html prefix for higher specificity */ html .mainscreen__picture--dark, .mainscreen__picture--dark { display: none !important; visibility: hidden !important; } html[data-theme="dark"] .mainscreen__picture--light, [data-theme="dark"] .mainscreen__picture--light { display: none !important; visibility: hidden !important; } html[data-theme="dark"] .mainscreen__picture--dark, [data-theme="dark"] .mainscreen__picture--dark { display: flex !important; visibility: visible !important; justify-content: flex-end !important; } /* Dark mode hero image - no special filtering needed for Yasuo */ [data-theme="dark"] .mainscreen__img { filter: none !important; mix-blend-mode: normal !important; } [data-theme="dark"] .mainscreen__header { color: #FFFFFF !important; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5) !important; } [data-theme="dark"] .mainscreen__subheader { color: rgba(255, 255, 255, 0.9) !important; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5) !important; } [data-theme="dark"] .mainscreen__cta { z-index: 5; position: relative; max-width: 600px; } /* Hide only the light-only picture container */ [data-theme="dark"] .mainscreen__picture.light-only { display: none !important; } /* Premium Gradient Button */ [data-theme="dark"] .mainscreen .button.--primary { background: linear-gradient(135deg, #ff8c42 0%, #a064ff 100%) !important; border: none !important; box-shadow: 0 4px 15px rgba(255, 140, 66, 0.3) !important; transition: all 0.3s ease !important; z-index: 10; } [data-theme="dark"] .mainscreen .button.--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(160, 100, 255, 0.4) !important; filter: brightness(1.1); } /* Mobile Tweak: Keeps Zed visible on phones */ @media (max-width: 768px) { [data-theme="dark"] .mainscreen { background-position: 70% center !important; min-height: 400px !important; } } /* Dark Mode: Third Screen (Benefits Section) */ [data-theme="dark"] .third-screen { background-color: var(--bg-primary); } [data-theme="dark"] .third-infoblock { background-color: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .third-infoblock__header { color: var(--text-secondary); } [data-theme="dark"] .third-infoblock__text { color: var(--text-primary); } /* Dark Mode: Info Screen (Purchase Blocks) */ [data-theme="dark"] .info-screen { background-color: var(--bg-primary); } [data-theme="dark"] .info-screen__block { background-color: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .info-screen__block.green-bg { background-color: var(--bg-tertiary); } [data-theme="dark"] .info-screen__title { color: var(--text-secondary); } [data-theme="dark"] .info-screen__text { color: var(--text-primary); } /* Dark Mode: Account Section */ [data-theme="dark"] .account-section { background-color: var(--bg-primary); } [data-theme="dark"] .account-controls { background-color: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .account-controls li { color: var(--text-primary); } [data-theme="dark"] .account-controls li.--active { color: var(--text-secondary); background-color: var(--bg-tertiary); } /* Dark Mode: FAQ Section */ [data-theme="dark"] .faqs-section { background-color: var(--bg-primary); } [data-theme="dark"] .faqs-section__box { background-color: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .faqs-section__title { color: var(--text-secondary); } [data-theme="dark"] .faqs-section__desc { color: var(--text-primary); background-color: var(--bg-tertiary); } /* Dark Mode: Subscribe Section */ [data-theme="dark"] .subscribe-section, [data-theme="dark"] .newsletter-section { background-color: transparent !important; background: none !important; } [data-theme="dark"] .subscribe-section input, [data-theme="dark"] .newsletter-section input { background-color: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border-color); } /* Dark Mode: Override grey shading boxes in subscribe section */ [data-theme="dark"] .subscribe-section *[style*="background:#"], [data-theme="dark"] .subscribe-section *[style*="background: #"] { background-color: transparent !important; } /* Dark Mode: Footer Review Section */ [data-theme="dark"] .footer-review-section, [data-theme="dark"] .reviews-cta-section { background-color: var(--bg-secondary); } /* Dark Mode: Page Header Text */ [data-theme="dark"] .page-header { color: var(--text-secondary); } [data-theme="dark"] .page-header mark { color: var(--color-secondary); } [data-theme="dark"] .page-subheader { color: var(--text-primary); } /* Dark Mode: Ordered/Unordered Lists */ [data-theme="dark"] ol, [data-theme="dark"] ul { color: var(--text-primary); } /* Dark Mode: Strong/Bold Text */ [data-theme="dark"] strong { color: var(--text-secondary); } /* Dark Mode: Reviews Page */ [data-theme="dark"] .review-page { background-color: var(--bg-primary); } [data-theme="dark"] .review-page article, [data-theme="dark"] .review-page article[style*="background"] { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .review-page article p, [data-theme="dark"] .review-page article[style] p { color: var(--text-primary) !important; } [data-theme="dark"] .review-page__title, [data-theme="dark"] .review-page__num { color: var(--text-secondary); } [data-theme="dark"] .review-page__desc { color: var(--text-primary); } [data-theme="dark"] .review-page__block { background-color: var(--bg-secondary); border-color: var(--border-color); } /* Dark Mode: Account Value Calculator */ [data-theme="dark"] .calculator-hero, [data-theme="dark"] .calculator-section { background-color: var(--bg-primary); } [data-theme="dark"] .calculator-wrapper, [data-theme="dark"] .calculator-step, [data-theme="dark"] .calculator-results, [data-theme="dark"] .account-selection-card { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .calculator-step__header, [data-theme="dark"] .calculator-step__title, [data-theme="dark"] .calculator-results__title { color: var(--text-secondary) !important; } [data-theme="dark"] .calculator-step__subtitle, [data-theme="dark"] .calculator-results__label { color: var(--text-muted) !important; } [data-theme="dark"] .calculator-hero-header h1, [data-theme="dark"] .calculator-hero-header h2 { color: var(--text-secondary); } [data-theme="dark"] .calculator-hero-header p { color: var(--text-primary); } [data-theme="dark"] .account-selection-card--selected { border-color: var(--color-secondary) !important; background-color: var(--bg-tertiary) !important; } /* Dark Mode: Floating Widget / Recent Purchase Popup */ [data-theme="dark"] .floating-widget, [data-theme="dark"] .floating-widget__popup, [data-theme="dark"] .purchase-notification, [data-theme="dark"] [class*="notification"], [data-theme="dark"] [class*="popup"][style*="background:#"], [data-theme="dark"] [class*="popup"][style*="background: #fff"] { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .floating-widget h3, [data-theme="dark"] .floating-widget h4, [data-theme="dark"] .floating-widget strong { color: var(--text-secondary) !important; } [data-theme="dark"] .floating-widget p, [data-theme="dark"] .floating-widget span { color: var(--text-primary) !important; } /* ============================================ COMPREHENSIVE DARK MODE OVERRIDES ============================================ */ /* Dark Mode: Account Row Cards (Product Selection) */ [data-theme="dark"] .account-row__item { background-color: var(--bg-secondary) !important; border-color: var(--border-color); box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.3); } [data-theme="dark"] .account-row__item:hover { background-color: var(--bg-tertiary) !important; border-color: var(--color-secondary); } [data-theme="dark"] .account-row__item.--active { background-color: var(--bg-tertiary) !important; border-color: var(--color-secondary); /* Ensure consistent layout - prevent box from growing taller when selected */ flex-flow: row nowrap !important; align-items: center !important; } /* Ensure all child elements in active box maintain same layout as non-active */ [data-theme="dark"] .account-row__item.--active .account-row__left { flex: 1 1 auto !important; min-width: 0 !important; } [data-theme="dark"] .account-row__item.--active .account-row__box { flex-flow: row nowrap !important; background-color: transparent !important; } [data-theme="dark"] .account-row__item.--active .account-row__meta { flex-wrap: nowrap !important; gap: 8px !important; } [data-theme="dark"] .account-row__box { background-color: transparent !important; } [data-theme="dark"] .account-row__caption, [data-theme="dark"] .account-row__be, [data-theme="dark"] .account-row__badge { color: var(--text-primary); } [data-theme="dark"] .account-row__price { color: var(--color-primary); } [data-theme="dark"] .account-row__oldprice { color: var(--text-muted); } /* Dark Mode: Order Form / Review Your Account Box */ [data-theme="dark"] .order-form { background-color: var(--bg-secondary) !important; border-color: var(--border-color); } [data-theme="dark"] .order-form__box { background-color: var(--bg-secondary); } [data-theme="dark"] .order-form__rowbox { background-color: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .order-form__row { border-color: var(--border-color); } [data-theme="dark"] .order-form__caption { color: var(--text-muted); } [data-theme="dark"] .order-form__value { color: var(--text-secondary); } [data-theme="dark"] .order-form__title { color: var(--text-secondary); } /* Dark Mode: Order Summary Cards */ [data-theme="dark"] .order-summary-card, [data-theme="dark"] .order-lookup-card, [data-theme="dark"] .help-section-card { background-color: var(--bg-secondary) !important; border-color: var(--border-color); } [data-theme="dark"] .order-summary-label { color: var(--text-muted); } [data-theme="dark"] .order-summary-value { color: var(--text-secondary); } [data-theme="dark"] .order-summary-title, [data-theme="dark"] .order-lookup-title { color: var(--text-secondary); } /* Dark Mode: Server/Region Selector */ [data-theme="dark"] .server-selector, [data-theme="dark"] .region-selector, [data-theme="dark"] select.form-control { background-color: var(--bg-tertiary) !important; color: var(--text-secondary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] select option { background-color: var(--bg-secondary); color: var(--text-primary); } /* Dark Mode: FAQ Page */ [data-theme="dark"] .faqs-page, [data-theme="dark"] .faq-page-section { background-color: var(--bg-primary); } [data-theme="dark"] .faqs-section__box, [data-theme="dark"] .faq-accordion, [data-theme="dark"] .faq-item, [data-theme="dark"] .accordion-item { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .faqs-section__title, [data-theme="dark"] .faq-question, [data-theme="dark"] .accordion-header, [data-theme="dark"] .accordion-button { color: var(--text-secondary) !important; background-color: var(--bg-secondary) !important; } [data-theme="dark"] .faqs-section__desc, [data-theme="dark"] .faq-answer, [data-theme="dark"] .accordion-body, [data-theme="dark"] .accordion-collapse { background-color: var(--bg-tertiary) !important; color: var(--text-primary) !important; } [data-theme="dark"] .faq-answer p, [data-theme="dark"] .accordion-body p, [data-theme="dark"] .faqs-section__desc p { color: var(--text-primary) !important; } /* Dark Mode: Contact Page */ [data-theme="dark"] .contact-section, [data-theme="dark"] .contact-page { background-color: var(--bg-primary); } [data-theme="dark"] .contact-form, [data-theme="dark"] .message-form, [data-theme="dark"] .contact-card { background-color: var(--bg-secondary) !important; border-color: var(--border-color); } [data-theme="dark"] .contact-form__group, [data-theme="dark"] .contact-form__label { color: var(--text-primary); } [data-theme="dark"] .contact-form__input, [data-theme="dark"] .contact-form textarea { background-color: var(--bg-tertiary) !important; color: var(--text-secondary) !important; border-color: var(--border-color) !important; } /* Dark Mode: Order History Page */ [data-theme="dark"] .order-history-section, [data-theme="dark"] .order-lookup-section { background-color: var(--bg-primary); } [data-theme="dark"] .order-history-card, [data-theme="dark"] .order-details-card, [data-theme="dark"] .lookup-card { background-color: var(--bg-secondary) !important; border-color: var(--border-color); } /* Dark Mode: Info Blocks with white backgrounds */ [data-theme="dark"] .info-block, [data-theme="dark"] .info-card, [data-theme="dark"] .content-block, [data-theme="dark"] .white-box, [data-theme="dark"] .white-card, [data-theme="dark"] .light-bg { background-color: var(--bg-secondary) !important; border-color: var(--border-color); } /* Dark Mode: Generic White Background Elements */ [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-light, [data-theme="dark"] [class*="--white"], [data-theme="dark"] [class*="--light-bg"] { background-color: var(--bg-secondary) !important; } /* Dark Mode: Mainscreen Box (Product Cards in Hero) */ [data-theme="dark"] .mainscreen__box { background-color: var(--bg-secondary) !important; border-color: var(--border-color); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .mainscreen__box:hover { background-color: var(--bg-tertiary) !important; } /* Dark Mode: All form sections */ [data-theme="dark"] .form-section, [data-theme="dark"] .form-card, [data-theme="dark"] .form-container, [data-theme="dark"] .form-wrapper { background-color: var(--bg-secondary) !important; } /* Dark Mode: Checkout */ [data-theme="dark"] .checkout-section, [data-theme="dark"] .checkout-card, [data-theme="dark"] .checkout-form__box { background-color: var(--bg-secondary) !important; border-color: var(--border-color); } [data-theme="dark"] .checkout-form__input { background-color: var(--bg-tertiary) !important; color: var(--text-secondary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .checkout-form__label { color: var(--text-primary); } /* Dark Mode: Blog Cards and Articles */ [data-theme="dark"] .blog-section, [data-theme="dark"] .blog-page { background-color: var(--bg-primary); } [data-theme="dark"] .blog-article, [data-theme="dark"] .blog-content { background-color: var(--bg-secondary) !important; } [data-theme="dark"] .blog-article p, [data-theme="dark"] .blog-content p { color: var(--text-primary); } /* Dark Mode: Review Cards */ [data-theme="dark"] .review-card, [data-theme="dark"] .review-item, [data-theme="dark"] .testimonial-card { background-color: var(--bg-secondary) !important; border-color: var(--border-color); } [data-theme="dark"] .review-text, [data-theme="dark"] .review-content { color: var(--text-primary); } [data-theme="dark"] .review-author, [data-theme="dark"] .reviewer-name { color: var(--text-secondary); } /* Dark Mode: Tables in all contexts */ [data-theme="dark"] .table-wrapper, [data-theme="dark"] .table-container { background-color: var(--bg-secondary); } [data-theme="dark"] table th, [data-theme="dark"] .table thead th { background-color: var(--bg-tertiary) !important; color: var(--text-secondary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] table td, [data-theme="dark"] .table tbody td { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color) !important; } [data-theme="dark"] table tr:nth-child(even) td, [data-theme="dark"] tbody tr:nth-child(even) { background-color: var(--bg-tertiary); } /* Dark Mode: Paragraphs and text */ [data-theme="dark"] p { color: var(--text-primary); } /* Dark Mode: Horizontal Rules */ [data-theme="dark"] hr { border-color: var(--border-color); } /* Dark Mode: Blockquotes */ [data-theme="dark"] blockquote { background-color: var(--bg-tertiary); border-left-color: var(--color-primary); color: var(--text-primary); } /* Dark Mode: Code blocks */ [data-theme="dark"] code, [data-theme="dark"] pre { background-color: var(--bg-tertiary); color: var(--text-secondary); } /* Dark Mode: Badges and Labels */ [data-theme="dark"] .badge, [data-theme="dark"] .label, [data-theme="dark"] .tag { background-color: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border-color); } /* Dark Mode: Tooltips */ [data-theme="dark"] .tooltip, [data-theme="dark"] [data-tooltip] { background-color: var(--bg-tertiary); color: var(--text-secondary); } /* Dark Mode: Alert/Notice boxes */ [data-theme="dark"] .alert, [data-theme="dark"] .notice, [data-theme="dark"] .warning-box { background-color: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-primary); } /* Dark Mode: Pagination */ [data-theme="dark"] .pagination, [data-theme="dark"] .pager { background-color: transparent; } [data-theme="dark"] .pagination a, [data-theme="dark"] .pager a { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } [data-theme="dark"] .pagination a:hover, [data-theme="dark"] .pager a:hover { background-color: var(--bg-tertiary); } [data-theme="dark"] .pagination .active, [data-theme="dark"] .pager .active { background-color: var(--color-primary); color: var(--bg-primary); } /* Dark Mode: Section separators and dividers */ [data-theme="dark"] .section-divider, [data-theme="dark"] .divider { background-color: var(--border-color); } /* Dark Mode: Placeholder text */ [data-theme="dark"] ::placeholder { color: var(--text-muted); opacity: 0.7; } /* Dark Mode: Scrollbars (Webkit) */ [data-theme="dark"] ::-webkit-scrollbar { background-color: var(--bg-primary); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: var(--bg-tertiary); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: var(--border-color); } /* ============================================ SECOND WAVE: PAGE-SPECIFIC DARK MODE FIXES ============================================ */ /* Dark Mode: Order History Page */ [data-theme="dark"] .order-history-section { background-color: var(--bg-primary); } [data-theme="dark"] .order-history-header, [data-theme="dark"] .order-history-icon { color: var(--text-secondary); } [data-theme="dark"] .order-history-title { color: var(--text-secondary); } [data-theme="dark"] .order-history-subtitle { color: var(--text-primary); } [data-theme="dark"] .order-lookup-card { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .order-lookup-label { color: var(--text-primary); } [data-theme="dark"] .order-lookup-input { background-color: var(--bg-tertiary) !important; color: var(--text-secondary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .order-lookup-btn { background-color: var(--color-primary); color: var(--bg-primary); } [data-theme="dark"] .order-lookup-info { background-color: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border-color); } [data-theme="dark"] .order-lookup-error { background-color: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); } [data-theme="dark"] .verification-sent-notice { background-color: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); color: var(--text-secondary); } [data-theme="dark"] .verification-code-input { background-color: var(--bg-tertiary) !important; } [data-theme="dark"] .verification-actions, [data-theme="dark"] .verification-link { color: var(--text-muted); } [data-theme="dark"] .verification-link:hover { color: var(--color-primary); } [data-theme="dark"] .verified-badge { background-color: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); color: var(--text-secondary); } [data-theme="dark"] .order-results-header h2 { color: var(--text-secondary); } [data-theme="dark"] .order-results-count { color: var(--text-muted); } [data-theme="dark"] .order-card { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .order-card-header { border-bottom-color: var(--border-color); } [data-theme="dark"] .order-card-date, [data-theme="dark"] .order-card-id { color: var(--text-muted); } [data-theme="dark"] .order-card-status { background-color: rgba(34, 197, 94, 0.1); color: #22c55e; } [data-theme="dark"] .order-card-product-name { color: var(--text-secondary); } [data-theme="dark"] .order-card-product-region { color: var(--text-muted); } [data-theme="dark"] .order-card-price { color: var(--color-primary); } [data-theme="dark"] .order-card-credentials { background-color: var(--bg-tertiary); border-color: var(--border-color); } [data-theme="dark"] .order-card-credential label { color: var(--text-muted); } [data-theme="dark"] .order-card-credential code { background-color: var(--bg-primary); color: var(--text-secondary); } [data-theme="dark"] .order-card-copy-btn { background-color: var(--color-primary); color: var(--bg-primary); } [data-theme="dark"] .order-card-footer, [data-theme="dark"] .order-card-hint { color: var(--text-muted); border-top-color: var(--border-color); } [data-theme="dark"] .order-no-results { color: var(--text-primary); } [data-theme="dark"] .order-no-results h3 { color: var(--text-secondary); } [data-theme="dark"] .order-help-section { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .order-help-section h3 { color: var(--text-secondary); } [data-theme="dark"] .order-help-section p { color: var(--text-primary); } [data-theme="dark"] .order-help-btn { background-color: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border-color); } [data-theme="dark"] .order-help-btn:hover { background-color: var(--color-primary); color: var(--bg-primary); } /* Dark Mode: Contact Page */ [data-theme="dark"] .contact-page-section { background-color: var(--bg-primary); } [data-theme="dark"] .contact-discord-banner { background: linear-gradient(135deg, rgba(88, 101, 242, 0.15) 0%, rgba(88, 101, 242, 0.08) 100%); border-color: rgba(88, 101, 242, 0.3); } [data-theme="dark"] .contact-discord-banner strong { color: var(--text-secondary); } [data-theme="dark"] .contact-discord-banner p { color: var(--text-primary); } [data-theme="dark"] .contact-form-container { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .contact-form-header { border-bottom-color: var(--border-color); } [data-theme="dark"] .contact-form-header h2 { color: var(--text-secondary); } [data-theme="dark"] .contact-response-time { color: var(--text-primary); } [data-theme="dark"] .contact-form-label { color: var(--text-secondary); } [data-theme="dark"] .contact-form-input { background-color: var(--bg-tertiary) !important; color: var(--text-secondary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .contact-form-input:focus { border-color: var(--color-primary) !important; } [data-theme="dark"] .contact-success-container { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .contact-success-title { color: var(--text-secondary); } [data-theme="dark"] .contact-success-subtitle { color: var(--text-primary); } /* Dark Mode: Contact FAQ Section */ [data-theme="dark"] .contact-faq-section { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .contact-faq-title { color: var(--text-secondary); } [data-theme="dark"] .contact-faq-item { border-color: var(--border-color); } [data-theme="dark"] .contact-faq-question { background-color: var(--bg-tertiary) !important; color: var(--text-secondary) !important; } [data-theme="dark"] .contact-faq-question:hover { background-color: var(--bg-primary) !important; } [data-theme="dark"] .contact-faq-answer { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; } [data-theme="dark"] .contact-faq-answer p { color: var(--text-primary) !important; } /* Dark Mode: FAQs Page Main */ [data-theme="dark"] .faqs-section { background-color: var(--bg-primary); } [data-theme="dark"] .faqs-main-title { color: var(--text-secondary); } [data-theme="dark"] .faqs-category { background-color: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .faqs-category-title { color: var(--text-secondary); } [data-theme="dark"] .faqs-list { background-color: transparent; } [data-theme="dark"] .faqs-item { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .faqs-question { background-color: var(--bg-tertiary) !important; color: var(--text-secondary) !important; } [data-theme="dark"] .faqs-question:hover { background-color: var(--bg-primary) !important; } [data-theme="dark"] .faqs-answer { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; } [data-theme="dark"] .faqs-answer p, [data-theme="dark"] .faqs-answer li, [data-theme="dark"] .faqs-answer span { color: var(--text-primary) !important; } [data-theme="dark"] .faqs-answer strong { color: var(--text-secondary) !important; } [data-theme="dark"] .faqs-answer a { color: var(--color-primary) !important; } /* Theme Toggle Button Styles */ .theme-toggle__button { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--border-color); background: var(--bg-secondary); cursor: pointer; transition: all 0.3s ease; position: relative; padding: 0; } .theme-toggle__button:hover { border-color: var(--color-primary); transform: scale(1.05); } .theme-toggle__icon { position: absolute; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); color: var(--text-primary); } /* Light mode: show moon, hide sun */ .theme-toggle__icon--sun { opacity: 0; transform: rotate(-90deg) scale(0.5); } .theme-toggle__icon--moon { opacity: 1; transform: rotate(0deg) scale(1); } /* Dark mode: show sun, hide moon */ [data-theme="dark"] .theme-toggle__icon--sun { opacity: 1; transform: rotate(0deg) scale(1); } [data-theme="dark"] .theme-toggle__icon--moon { opacity: 0; transform: rotate(90deg) scale(0.5); } /* Dark mode adjustments for button */ [data-theme="dark"] .theme-toggle__button { background: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .theme-toggle__icon { color: var(--text-secondary); } /* Header toggle positioning */ .header-theme-toggle { display: flex; align-items: center; margin-left: 12px; } html { font-family: 'Montserrat', sans-serif; font-size: 16px; line-height: 1.5; -ms-text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; box-sizing: border-box; -webkit-text-size-adjust: 100%; } body { font-family: 'Montserrat', sans-serif; background-color: var(--bg); color: var(--color-text); transition: background-color .3s, color .3s; margin: 0; font-size: 16px; font-weight: 400; line-height: 1.5; text-align: left; } a { color: var(--color-primary); transition: all 0.3s; text-decoration: none; } a:hover { color: var(--color-primary); text-decoration: underline; } .header { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding: 15px 0px; /* Reduced padding for modern look */ background-color: rgba(250, 250, 250, 0.8); color: var(--color-text); /* Performance: no transition on base - only on hover */ position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Performance: GPU compositing for smooth scroll */ will-change: transform; transform: translateZ(0); -webkit-transform: translateZ(0); } .header__menu { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; list-style: none; padding: 0; } .header__menu.--column { flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .header__menu.--column li { margin-bottom: 20px; } .header__menu.--column li a { font-size: 1.5rem; line-height: 1.5rem; font-weight: 600; } .header__menu li { display: block; margin-right: 40px; } .header__menu li:last-of-type { margin-right: 0; } .header__menu li a { color: var(--color-header); font-size: 1rem; font-weight: 500; transition: color 0.3s; } @media only screen and (max-width: 480px) { .header-links { display: none !important; } } .navbar-toggle { display: none; width: 40px; height: 32px; flex-flow: column nowrap; justify-content: space-around; align-content: center; } @media only screen and (max-width: 480px) { .navbar-toggle { display: flex; } } .navbar-toggle__bar { display: block; width: 36px; height: 3px; background: var(--color-header); } .header { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding: 30px 0px; } .header__menu { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; list-style: none; padding: 0; } .header__menu li { display: block; margin-right: 40px; } .header__menu li:last-of-type { margin-right: 0; } .header__menu li a { color: var(--text-secondary); font-size: 1rem; font-weight: 500; } .main { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; min-height: calc(100vh - 80px); background-color: var(--bg); color: var(--color-text); transition: background-color 0.3s, color 0.3s; } .headblock { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; background: var(--bg-black); padding: 11px 0px; } .headblock__text { text-align: center; font-size: 1rem; color: var(--white-color); font-weight: 500; margin: 0; transition: color 0.3s; } @media only screen and (max-width: 480px) { .headblock__text { font-size: 0.875rem; line-height: 1.25rem; } } .headblock__text mark { padding: 4px 7px; border-radius: 5px; border: 1px dashed var(--color-secondary); background: transparent; color: var(--color-secondary); text-transform: uppercase; } @media only screen and (max-width: 480px) { .headblock__text mark { padding: 2px 4px; } } .header { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding: 30px 0px; } .header__menu { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; list-style: none; padding: 0; } .header__menu.--column { flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .header__menu.--column li { margin-bottom: 20px; } .header__menu.--column li a { font-size: 1.5rem; line-height: 1.5rem; font-weight: 600; } .header__menu li { display: block; margin-right: 40px; } .header__menu li:last-of-type { margin-right: 0; } .header__menu li a { color: var(--text-secondary); font-size: 1rem; font-weight: 500; } @media only screen and (max-width: 480px) { .header-links { display: none !important; } } .navbar-toggle { display: none; width: 40px; height: 32px; flex-flow: column nowrap; justify-content: space-around; align-content: center; } @media only screen and (max-width: 480px) { .navbar-toggle { display: flex; } } .navbar-toggle__bar { display: block; width: 36px; height: 3px; background: var(--color-header); } .header { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding: 30px 0px; } .header__menu { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; list-style: none; padding: 0; } .header__menu li { display: block; margin-right: 40px; } .header__menu li:last-of-type { margin-right: 0; } .header__menu li a { color: #2f3238; font-size: 1rem; font-weight: 500; } .sidenav-container { height: 100%; width: 100%; } .sidenav { height: 100%; width: 300px; background-color: #d6d6d6; z-index: 10000; position: fixed; top: 0; left: 0; box-sizing: border-box; padding: 30px; } .sidenav__close { display: block; position: absolute; right: 20px; top: 20px; width: 30px; height: 30px; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+Q29tYmluZWQgU2hhcGU8L3RpdGxlPgogICAgPGcgaWQ9ImRlc2lnbiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9ImdhbWVwYWdlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTI5NC4wMDAwMDAsIC0yNzQuMDAwMDAwKSIgZmlsbD0iIzJGMzIzOCI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMzAzLDI3MSBDMTMwMy41NTIyOCwyNzEgMTMwNCwyNzEuNDQ3NzE1IDEzMDQsMjcyIEwxMzA0LDI4MiBMMTMxNCwyODIgQzEzMTQuNTUyMjgsMjgyIDEzMTUsMjgyLjQ0NzcxNSAxMzE1LDI4MyBDMTMxNSwyODMuNTUyMjg1IDEzMTQuNTUyMjgsMjg0IDEzMTQsMjg0IEwxMzAzLjk5OSwyODQgTDEzMDQsMjk0IEMxMzA0LDI5NC41NTIyODUgMTMwMy41NTIyOCwyOTUgMTMwMywyOTUgQzEzMDIuNDQ3NzIsMjk1IDEzMDIsMjk0LjU1MjI4NSAxMzAyLDI5NCBMMTMwMS45OTksMjg0IEwxMjkyLDI4NCBDMTI5MS40NDc3MiwyODQgMTI5MSwyODMuNTUyMjg1IDEyOTEsMjgzIEMxMjkxLDI4Mi40NDc3MTUgMTI5MS40NDc3MiwyODIgMTI5MiwyODIgTDEzMDIsMjgyIEwxMzAyLDI3MiBDMTMwMiwyNzEuNDQ3NzE1IDEzMDIuNDQ3NzIsMjcxIDEzMDMsMjcxIFoiIGlkPSJDb21iaW5lZC1TaGFwZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMwMy4wMDAwMDAsIDI4My4wMDAwMDApIHJvdGF0ZSgtMzE1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMzAzLjAwMDAwMCwgLTI4My4wMDAwMDApICI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+") no-repeat center center; background-size: 28px 28px; } .sidenav span { position: absolute; right: 20px; top: 20px; } p { margin-top: 0; margin-bottom: 16px; margin-bottom: var(--paragraph-margin-bottom); } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 16px; margin-bottom: var(--paragraph-margin-bottom); } .page-header { display: block; font-size: 2.875rem; line-height: 3.5rem; color: #2F3238; color: var(--color-header); font-weight: 700; text-align: center; margin-bottom: 20px; } @media only screen and (max-width: 480px) { .page-header { font-size: 2rem; line-height: 2.625rem; } } .page-header mark { color: #0CD9D9; color: var(--color-secondary); padding: 0; background: transparent; } .page-header.--mb-50 { margin-bottom: 50px; } .page-header.--white { color: #FFFFFF; color: var(--color-white); } .page-header.--big { font-size: 3.5rem; line-height: 3.75rem; text-align: center; } @media only screen and (max-width: 480px) { .page-header.--big { font-size: 2.25rem; line-height: 2.875rem; text-align: center; } } .page-header.--mw-880 { width: 100%; max-width: 880px; } .page-subheader { display: block; width: 100%; max-width: 807px; font-size: 1rem; font-weight: 500; line-height: 1.375rem; text-align: center; color: #666666; color: var(--color-text); margin-bottom: 70px; } .page-subheader.--left { text-align: left; } .page-subheader.--white { color: #FFFFFF; color: var(--color-white); } .page-subheader.--big { margin-bottom: 0; } .page-subheader.--big mark { padding: 4px 7px; border-radius: 5px; border: 1px dashed #0CD9D9; border: 1px dashed var(--color-secondary); background: transparent; color: #0CD9D9; color: var(--color-secondary); text-transform: uppercase; font-weight: 600; } .slide-side-enter-active, .slide-side-leave-active { transition: all 0.3s ease-out; } .slide-side-enter, .slide-side-leave-to { transform: translateX(-100%); } .btn-form { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; height: 42px; padding: 11px 35px; background: var(--color-primary); border-radius: 0px 8px 8px 0px; border: 1px solid var(--color-primary); font-size: 1rem; font-weight: 600; color: #ffffff; text-align: center; transition: all 0.3s; cursor: pointer; } .btn-form:hover { background: #e56b00; color: #ffffff; border-color: #e56b00; } .payment-select { display: flex; width: 100%; flex-flow: column nowrap; justify-content: center; align-items: center; cursor: pointer; position: relative; } .payment-select__img { display: block; flex-shrink: 0; -o-object-fit: contain; object-fit: contain; min-width: 120px; max-width: 120px; width: 120px; height: auto; } .payment-select input { position: absolute; left: 0; cursor: pointer; top: 50%; bottom: 0; transform: translateY(-50%); margin-top: -3px; } .payment-select:hover input~.payment-select__label { border-color: #FF8749; } .payment-select input:checked~.payment-select__label { border-color: #FF8749; } .payment-select__label { display: flex; width: 100%; flex-flow: column nowrap; justify-content: center; align-items: center; padding: 12px 20px; border-radius: 8px; cursor: pointer; transition: all 0.3s; margin-left: 50px; } .order-form { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .order-form form { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .order-form__totalbox { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; border-top: solid 1px #ececec; padding-top: 20px; } .order-form__total { display: block; font-size: 1.875rem; line-height: 1; color: #2f3238; text-align: left; font-weight: 600; text-align: left; margin-bottom: 30px; } .order-form__row { display: flex; width: 100%; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; padding-bottom: 20px; } .order-form__row.--flex { width: 100%; margin: 0; } .order-form__box { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .order-form__box.--w-50 { width: calc(1 / 2 * 100% - 26px); margin: 0 13px 0px; } .order-form__box.--small { max-width: 118px; padding-right: 26px; } .order-form__box.--pb-20 { padding-bottom: 20px; } .order-form__rowbox { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; width: 100%; } .order-form__input { display: inline-block; width: 100%; height: 42px; border-radius: 8px; background: #FFFFFF; text-align: left; font-size: 1rem; line-height: 1; padding: 5px 12px; color: #2f3238; box-shadow: none; border: 1px solid #c1e1e0; } .order-form__input:focus { outline: none; box-shadow: none; border-color: #95b1b0; } .order-form__input::-moz-placeholder { color: rgba(47, 50, 56, 0.2); } .order-form__input:-ms-input-placeholder { color: rgba(47, 50, 56, 0.2); } .order-form__input::placeholder { color: rgba(47, 50, 56, 0.2); } .order-form__input.--small-center { text-align: center; } .order-form__input.--wrow-100 { border-radius: 8px 0px 0px 8px; } .order-form__label { display: block; font-size: 0.75rem; font-weight: 600; text-align: left; margin-bottom: 2px; color: #434850; } .order-item { display: flex; width: 100%; flex-flow: row nowrap; justify-content: space-between; align-items: center; border-radius: 8px; background: #FFFFFF; margin: 0 0px 26px; padding: 13px 22px; border: 2px solid var(--color-secondary); transition: all 0.3s; } .order-item__currency { text-transform: uppercase; padding-left: 0px; } .order-item__left { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .order-item__right { display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: center; } .order-item__delete { display: block; width: 20px; height: 20px; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTRweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgMTQgMTUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+aWNvbi10cmFzaDwvdGl0bGU+CiAgICA8ZyBpZD0iZGVzaWduIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iY2hlY2tvdXQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNDE2LjAwMDAwMCwgLTM4Ny4wMDAwMDApIiBmaWxsPSIjMkYzMjM4IiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8ZyBpZD0iaWNvbi10cmFzaCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTQxNi4wMDAwMDAsIDM4Ny4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMC45MjIzMjQ1LDE0LjkxMDQ1NSBMMi42Njc2MTIyLDE0LjkxMDQ1NSBDMi4zMjE3ODE3MiwxNC45MTA0NTUgMi4wMzU4MTg3MiwxNC42NDA0MTQyIDIuMDE2MzkzNTksMTQuMjk0NTgzNyBMMS4zNjYxMzAzNSwyLjcyMDQwNzExIEMxLjM1NjI1ODU5LDIuNTQxNDQxMzkgMS40MjAyNjU4NywyLjM2NTk3ODYzIDEuNTQzNTAzODUsMi4yMzU3MzQ4NyBDMS42NjY3NDE4MywyLjEwNTQ5MTExIDEuODM4MDY0ODUsMi4wMzE2MTIwNyAyLjAxNzM0ODk2LDIuMDMxNjEyMDcgTDExLjU3MjU4NzgsMi4wMzE2MTIwNyBDMTEuNzU0MTAxLDIuMDMxNjEyMDcgMTEuOTI3MzM0NywyLjEwNzA4MzM5IDEyLjA1MDI1NDIsMi4yMzk4NzQ2MSBDMTIuMTczODEwNiwyLjM3Mjk4NDM1IDEyLjIzNjIyNTcsMi41NTA5OTQ3IDEyLjIyMjg1MSwyLjczMTg3MTAyIEwxMi4wODg0Njc1LDQuNTQ2Njg1MDIgQzEyLjA2MTcxODIsNC45MDU1NzIwMiAxMS43NTI4MjczLDUuMTcxNzkxNSAxMS4zODk4MDA3LDUuMTQ4ODYzNDggQzExLjAzMDU5NTYsNS4xMjI0MzI2MyAxMC43NjExOTE3LDQuODA5NzIwMzMgMTAuNzg3OTQxLDQuNDUwNTE0OCBMMTAuODcwMDk5NiwzLjMzNTk1OTc2IEwyLjcwNzA5OTMsMy4zMzU5NTk3NiBMMy4yODQxMjAzNSwxMy42MDYxMDY3IEwxMC4zMDU4MTY0LDEzLjYwNjEwNjcgTDEwLjY2MDU2MzMsNy4yOTAwODI1NyBDMTAuNjgwMzA2OCw2LjkzMDU1ODk4IDEwLjk5MzAxOTIsNi42NTQ0Njc3NCAxMS4zNDc3NjYxLDYuNjc1NDg1MDkgQzExLjcwNzYwODEsNi42OTU4NjU1MiAxMS45ODI3NDQsNy4wMDM0ODI3MiAxMS45NjIzNjM2LDcuMzYzMzI0NzYgTDExLjU3MzIyNDYsMTQuMjk0NTgzMyBDMTEuNTU0MTE4LDE0LjY0MDQxNDIgMTEuMjY4MTU1MSwxNC45MTA0NTUgMTAuOTIyMzI0NSwxNC45MTA0NTUgWiIgaWQ9IlBhdGgiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMi42MjQwOTA4LDUuMjQxNTMwODcgTDAuODg0OTYwNDEzLDUuMjQxNTMwODcgQzAuNTI0Nzk5ODQ4LDUuMjQxNTMwODcgMC4yMzI3ODY0MzUsNC45NDk1MTc0NiAwLjIzMjc4NjQzNSw0LjU4OTM1Njk2IEMwLjIzMjc4NjQzNSw0LjIyOTE5NjQ2IDAuNTI0Nzk5ODQ4LDMuOTM3MTgyNzIgMC44ODQ5NjA0MTMsMy45MzcxODI3MiBMMTIuNjI0MDkwOCwzLjkzNzE4MjcyIEMxMi45ODQ1Njk4LDMuOTM3MTgyNzIgMTMuMjc2MjY0OCw0LjIyOTE5NjEzIDEzLjI3NjI2NDgsNC41ODkzNTY5NiBDMTMuMjc2MjY0OCw0Ljk0OTUxNzc4IDEyLjk4NDU2OTgsNS4yNDE1MzA4NyAxMi42MjQwOTA4LDUuMjQxNTMwODcgWiIgaWQ9IlBhdGgiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik00LjUwNDM5ODkxLDEyLjc0MTIxMjQgQzQuMTQ0MjM4NDEsMTIuNzQxMjEyNCAzLjg1MjIyNSwxMi40NDk1MTc1IDMuODUyMjI1LDEyLjA4OTAzODUgTDMuODUyMjI1LDYuNzc0NTIxNjcgQzMuODUyMjI1LDYuNDE0MzYxMTcgNC4xNDQyMzg0MSw2LjEyMjM0Nzc2IDQuNTA0Mzk4OTEsNi4xMjIzNDc3NiBDNC44NjQ1NTk0MSw2LjEyMjM0Nzc2IDUuMTU2NTcyODMsNi40MTQzNjExNyA1LjE1NjU3MjgzLDYuNzc0NTIxNjcgTDUuMTU2NTcyODMsMTIuMDg5MDM4NSBDNS4xNTY1NzI4MywxMi40NDk1MTc1IDQuODY0NTU5NDEsMTIuNzQxMjEyNCA0LjUwNDM5ODkxLDEyLjc0MTIxMjQgWiIgaWQ9IlBhdGgiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02LjcyMjA0NDk2LDEyLjc0MTIxMjQgQzYuMzYxODg0NDYsMTIuNzQxMjEyNCA2LjA2OTg3MTA0LDEyLjQ0OTUxNzUgNi4wNjk4NzEwNCwxMi4wODkwMzg1IEw2LjA2OTg3MTA0LDYuNzc0NTIxNjcgQzYuMDY5ODcxMDQsNi40MTQzNjExNyA2LjM2MTg4NDQ2LDYuMTIyMzQ3NzYgNi43MjIwNDQ5Niw2LjEyMjM0Nzc2IEM3LjA4MjIwNTQ2LDYuMTIyMzQ3NzYgNy4zNzQyMTg4Nyw2LjQxNDM2MTE3IDcuMzc0MjE4ODcsNi43NzQ1MjE2NyBMNy4zNzQyMTg4NywxMi4wODkwMzg1IEM3LjM3NDIxODg3LDEyLjQ0OTUxNzUgNy4wODIyMDU0NiwxMi43NDEyMTI0IDYuNzIyMDQ0OTYsMTIuNzQxMjEyNCBaIiBpZD0iUGF0aCI+PC9wYXRoPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTguOTM5MDU0MDksMTIuNzQxMjEyNCBDOC41Nzg1NzUxMywxMi43NDEyMTI0IDguMjg2ODgwMTcsMTIuNDQ5NTE3NSA4LjI4Njg4MDE3LDEyLjA4OTAzODUgTDguMjg2ODgwMTcsNi43NzQ1MjE2NyBDOC4yODY4ODAxNyw2LjQxNDM2MTE3IDguNTc4NTc1MTMsNi4xMjIzNDc3NiA4LjkzOTA1NDA5LDYuMTIyMzQ3NzYgQzkuMjk5NTMzMDQsNi4xMjIzNDc3NiA5LjU5MTIyOCw2LjQxNDM2MTE3IDkuNTkxMjI4LDYuNzc0NTIxNjcgTDkuNTkxMjI4LDEyLjA4OTAzODUgQzkuNTkxMjI4LDEyLjQ0OTUxNzUgOS4yOTk1MzMwNCwxMi43NDEyMTI0IDguOTM5MDU0MDksMTIuNzQxMjEyNCBaIiBpZD0iUGF0aCI+PC9wYXRoPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuNzMyNzg3MTUsMS41MjA4Mjc1NyBMNS43NzYyNjU0MSwxLjUyMDgyNzU3IEM1LjQxNjEwNDkxLDEuNTIwODI3NTcgNS4xMjQwOTE1LDEuMjI4ODE0MTUgNS4xMjQwOTE1LDAuODY4NjUzNjUyIEM1LjEyNDA5MTUsMC41MDg0OTMxNTIgNS40MTYxMDQ5MSwwLjIxNjQ3OTY3NCA1Ljc3NjI2NTQxLDAuMjE2NDc5Njc0IEw3LjczMjc4NzE1LDAuMjE2NDc5Njc0IEM4LjA5Mjk0NzY1LDAuMjE2NDc5Njc0IDguMzg0OTYxMDcsMC41MDg0OTMwODcgOC4zODQ5NjEwNywwLjg2ODY1MzY1MiBDOC4zODQ5NjEwNywxLjIyODgxNDIyIDguMDkyOTQ3NjUsMS41MjA4Mjc1NyA3LjczMjc4NzE1LDEuNTIwODI3NTcgWiIgaWQ9IlBhdGgiPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+") no-repeat center center; background-size: 14px 15px; cursor: pointer; right: 0; margin-left: 8px; transition: all 0.3s; opacity: 0.5; } .order-item__delete:hover { opacity: 1; } .order-item__box { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; } .order-item__be { display: block; font-size: 1.25rem; font-weight: 600; text-align: left; color: #2f3238; } .order-item__caption { display: block; font-size: 0.875rem; color: var(--color-text); font-weight: 400; text-align: left; } .order-item__price { display: block; font-size: 1.25rem; font-weight: 600; text-align: left; color: #2f3238; } .order-container { height: 100%; width: 100%; } .orderbar { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; height: 100%; width: 100%; max-width: 470px; background-color: #FFFFFF; z-index: 10000; position: fixed; top: 0; right: 0; box-sizing: border-box; transform: translateX(0%); } .orderbar__container { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; height: 100vh; overflow-y: scroll; padding: 30px; box-sizing: border-box; } .orderbar__condition { font-size: 0.75rem; line-height: 0.875rem; text-align: center; margin-bottom: 0; } .orderbar__footer { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: center; padding-top: 18px; } .orderbar__info { display: block; font-size: 0.875rem; line-height: 1.125rem; text-align: center; color: #2f3238; font-weight: 500; margin-bottom: 12px; } .orderbar__info mark { background: transparent; padding: 0; color: var(--color-secondary); } .orderbar__head { display: flex; position: relative; width: 100%; flex-flow: row nowrap; justify-content: flex-start; align-items: center; padding-bottom: 30px; } .orderbar__header { display: block; font-size: 1.25rem; line-break: 1.25rem; font-weight: 700; text-align: left; color: #2f3238; text-transform: uppercase; margin-bottom: 0; } .orderbar__close { display: block; position: absolute; right: 0px; width: 20px; height: 20px; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+Q29tYmluZWQgU2hhcGU8L3RpdGxlPgogICAgPGcgaWQ9ImRlc2lnbiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9ImdhbWVwYWdlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTI5NC4wMDAwMDAsIC0yNzQuMDAwMDAwKSIgZmlsbD0iIzJGMzIzOCI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMzAzLDI3MSBDMTMwMy41NTIyOCwyNzEgMTMwNCwyNzEuNDQ3NzE1IDEzMDQsMjcyIEwxMzA0LDI4MiBMMTMxNCwyODIgQzEzMTQuNTUyMjgsMjgyIDEzMTUsMjgyLjQ0NzcxNSAxMzE1LDI4MyBDMTMxNSwyODMuNTUyMjg1IDEzMTQuNTUyMjgsMjg0IDEzMTQsMjg0IEwxMzAzLjk5OSwyODQgTDEzMDQsMjk0IEMxMzA0LDI5NC41NTIyODUgMTMwMy41NTIyOCwyOTUgMTMwMywyOTUgQzEzMDIuNDQ3NzIsMjk1IDEzMDIsMjk0LjU1MjI4NSAxMzAyLDI5NCBMMTMwMS45OTksMjg0IEwxMjkyLDI4NCBDMTI5MS40NDc3MiwyODQgMTI5MSwyODMuNTUyMjg1IDEyOTEsMjgzIEMxMjkxLDI4Mi40NDc3MTUgMTI5MS40NDc3MiwyODIgMTI5MiwyODIgTDEzMDIsMjgyIEwxMzAyLDI3MiBDMTMwMiwyNzEuNDQ3NzE1IDEzMDIuNDQ3NzIsMjcxIDEzMDMsMjcxIFoiIGlkPSJDb21iaW5lZC1TaGFwZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMwMy4wMDAwMDAsIDI4My4wMDAwMDApIHJvdGF0ZSgtMzE1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMzAzLjAwMDAwMCwgLTI4My4wMDAwMDApICI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+") no-repeat center center; background-size: 20px 20px; opacity: 0.5; transition: all 0.3s; cursor: pointer; } .orderbar__close:hover { opacity: 1; } .backdrop { width: 100%; height: 100%; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-color: rgba(149, 177, 176, 0.71); z-index: 1000; position: fixed; top: 0; left: 0; transition: all 0.3s; } .slide-side-enter-active, .slide-side-leave-active { transition: all 0.3s ease-out; transform: translateX(0%); } .slide-side-enter, .slide-side-leave-to { transform: translateX(100%); } .swiper-slide.--space-between { display: flex; width: 100%; flex-flow: row nowrap; justify-content: flex-start; align-items: center; } @media only screen and (max-width: 480px) { .swiper-slide.--space-between { flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } } .swiper-pagination.--left { display: flex; justify-content: flex-start; align-items: center; flex-flow: row nowrap; padding: 10px 30px; z-index: 30; } .mainscreen { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .mainscreen__cta { display: flex; flex: 1 1 50%; max-width: 50%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding-left: 30px; } @media only screen and (max-width: 480px) { .mainscreen__cta { flex: 1 1 100%; max-width: 100%; padding-left: 0; padding-bottom: 20px; align-items: center; } } .mainscreen__header { display: block; font-size: 3.5rem; margin-bottom: 20px; color: #2f3238; text-align: left; font-weight: 700; line-height: 1.2; } @media only screen and (max-width: 480px) { .mainscreen__header { font-size: 2.5rem; text-align: center; } } .mainscreen__subheader { display: block; width: 100%; max-width: 385px; text-align: left; font-size: 1rem; line-height: 1.5rem; margin-bottom: 40px; } @media only screen and (max-width: 480px) { .mainscreen__subheader { text-align: center; } } .swiper-slide.--space-between picture { display: flex; flex: 0 0 50%; max-width: 50%; } .mainscreen__img { display: block; width: 100%; height: auto; max-height: 510px; -o-object-fit: contain; object-fit: contain; } @media only screen and (max-width: 480px) { .swiper-slide.--space-between picture { flex: 0 0 100%; max-width: 100%; } .mainscreen__img { width: 100%; height: auto; max-height: 300px; } } .account-review { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; width: 100%; border-radius: 8px; background: #FFFFFF; box-shadow: 0 6px 24px 0 rgba(120, 141, 162, 0.13); } .account-review__row { display: flex; width: 100%; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; padding: 10px 0px; border-bottom: 1px solid var(--border-light); } .account-review__col { display: flex; flex-flow: column nowrap; width: calc(100% / 3); padding: 10px 26px; } @media only screen and (max-width: 480px) { .account-review__col { width: 100%; } } .account-review__col.--footer-left { width: 70%; padding: 24px 26px; } @media only screen and (max-width: 480px) { .account-review__col.--footer-left { width: 100%; } } .account-review__col.--footer-right { width: calc(100% / 3); padding-top: 12px; padding-bottom: 12px; padding-left: 13px; padding-right: 26px; justify-content: center; align-items: center; } @media only screen and (max-width: 480px) { .account-review__col.--footer-right { width: 100%; padding-right: 13px; } } .account-review__caption { display: block; font-size: 0.875rem; font-weight: 500; text-align: left; color: #434850; margin-bottom: 2px; } .account-review__caption.--info { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; position: relative; padding-left: 21px; } .account-review__caption.--info::before { display: block; position: absolute; width: 12px; height: 12px; content: ""; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+Y2xvY2s8L3RpdGxlPgogICAgPGcgaWQ9ImRlc2lnbiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9ImhvbWVwYWdlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQ2LjAwMDAwMCwgLTEzODEuMDAwMDAwKSIgZmlsbD0iI0ExQTRBOSIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgPGcgaWQ9InN0ZXAzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjAuMDAwMDAwLCAxMTgxLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2LjAwMDAwMCwgMTk3LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJjbG9jayIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02LDAgQzIuNjg1NDgzODcsMCAwLDIuNjg1NDgzODcgMCw2IEMwLDkuMzE0NTE2MTMgMi42ODU0ODM4NywxMiA2LDEyIEM5LjMxNDUxNjEzLDEyIDEyLDkuMzE0NTE2MTMgMTIsNiBDMTIsMi42ODU0ODM4NyA5LjMxNDUxNjEzLDAgNiwwIFogTTYsMTAuODM4NzA5NyBDMy4zMjY2MTI5LDEwLjgzODcwOTcgMS4xNjEyOTAzMiw4LjY3MzM4NzEgMS4xNjEyOTAzMiw2IEMxLjE2MTI5MDMyLDMuMzI2NjEyOSAzLjMyNjYxMjksMS4xNjEyOTAzMiA2LDEuMTYxMjkwMzIgQzguNjczMzg3MSwxLjE2MTI5MDMyIDEwLjgzODcwOTcsMy4zMjY2MTI5IDEwLjgzODcwOTcsNiBDMTAuODM4NzA5Nyw4LjY3MzM4NzEgOC42NzMzODcxLDEwLjgzODcwOTcgNiwxMC44Mzg3MDk3IFogTTcuNDk1MTYxMjksOC4zMTI5MDMyMyBMNS40NDExMjkwMyw2LjgyMDE2MTI5IEM1LjM2NjEyOTAzLDYuNzY0NTE2MTMgNS4zMjI1ODA2NSw2LjY3NzQxOTM1IDUuMzIyNTgwNjUsNi41ODU0ODM4NyBMNS4zMjI1ODA2NSwyLjYxMjkwMzIzIEM1LjMyMjU4MDY1LDIuNDUzMjI1ODEgNS40NTMyMjU4MSwyLjMyMjU4MDY1IDUuNjEyOTAzMjMsMi4zMjI1ODA2NSBMNi4zODcwOTY3NywyLjMyMjU4MDY1IEM2LjU0Njc3NDE5LDIuMzIyNTgwNjUgNi42Nzc0MTkzNSwyLjQ1MzIyNTgxIDYuNjc3NDE5MzUsMi42MTI5MDMyMyBMNi42Nzc0MTkzNSw2LjA0MTEyOTAzIEw4LjI5MzU0ODM5LDcuMjE2OTM1NDggQzguNDI0MTkzNTUsNy4zMTEyOTAzMiA4LjQ1MDgwNjQ1LDcuNDkyNzQxOTQgOC4zNTY0NTE2MSw3LjYyMzM4NzEgTDcuOTAxNjEyOSw4LjI1IEM3LjgwNzI1ODA2LDguMzc4MjI1ODEgNy42MjU4MDY0NSw4LjQwNzI1ODA2IDcuNDk1MTYxMjksOC4zMTI5MDMyMyBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") no-repeat center center; background-size: 12px 12px; left: 0; } .account-review__caption.--info.--information { padding-left: 21px; } .account-review__caption.--info.--information::before { display: block; content: ""; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTInIGhlaWdodD0nMTInIHZpZXdCb3g9JzAgMCAxMiAxMicgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48Y2lyY2xlIGN4PSc2JyBjeT0nNicgcj0nNicgZmlsbD0nI0IwQjRDMScvPjxyZWN0IHg9JzUuNScgeT0nNC41JyB3aWR0aD0nMScgaGVpZ2h0PSc0LjUnIGZpbGw9J3doaXRlJy8+PHJlY3QgeD0nNS41JyB5PSczJyB3aWR0aD0nMScgaGVpZ2h0PScxJyBmaWxsPSd3aGl0ZScvPjwvc3ZnPg==") no-repeat center center; background-size: 12px 12px; } .account-review__value { display: block; font-size: 1rem; font-weight: 600; text-align: left; color: #2f3238; margin-bottom: 2px; } .account-review__value.--blue { color: var(--color-secondary); } .account-review__value.--info { padding-left: 21px; margin-bottom: 0; } .account-review__footer { display: flex; width: 100%; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; } @media only screen and (max-width: 480px) { .account-review__footer { flex-flow: column nowrap; align-items: flex-start; } } .account-footer { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: center; } .account-footer__center { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: center; } .discord-btn { display: flex; width: 100%; max-width: 587px; padding: 12px 20px; border-radius: 8px; border: 1px solid #5c6bc0; background: transparent; cursor: pointer; flex-flow: row nowrap; justify-content: space-between; align-items: center; text-decoration: none; transition: all 0.3s; margin-bottom: 7px; } @media only screen and (max-width: 480px) { .discord-btn { flex-flow: column nowrap; justify-content: flex-start; align-content: center; } } .discord-btn:hover { text-decoration: none; background: #5c6bc0; border-color: #5c6bc0; } .discord-btn:hover .discord-btn__title { color: #FFFFFF; } .discord-btn:hover .discord-btn__subtitle { color: #FFFFFF; } .discord-btn:hover .discord-btn__logo { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTQ2cHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDE0NiA0MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT5kaXNjb3JkLWJ0bjwvdGl0bGU+CiAgICA8ZyBpZD0iZGVzaWduIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iaG9tZXBhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04NDMuMDAwMDAwLCAtMTQ5MC4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8ZyBpZD0iZGlzY29yZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDI2LjAwMDAwMCwgMTQ3Mi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJkaXNjb3JkLWJ0biIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDE3LjAwMDAwMCwgMTguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIxLjM2LDE2LjgyIEMyMC4yMiwxNi44MiAxOS4zMiwxNy44IDE5LjMyLDE5LjAyIEMxOS4zMiwyMC4yNCAyMC4yNCwyMS4yMiAyMS4zNiwyMS4yMiBDMjIuNSwyMS4yMiAyMy40LDIwLjI0IDIzLjQsMTkuMDIgQzIzLjQsMTcuOCAyMi40OCwxNi44MiAyMS4zNiwxNi44MiBaIE0xNC4wNiwxNi44MiBDMTIuOTIsMTYuODIgMTIuMDIsMTcuOCAxMi4wMiwxOS4wMiBDMTIuMDIsMjAuMjQgMTIuOTQsMjEuMjIgMTQuMDYsMjEuMjIgQzE1LjIsMjEuMjIgMTYuMSwyMC4yNCAxNi4xLDE5LjAyIEMxNi4xMiwxNy44IDE1LjIsMTYuODIgMTQuMDYsMTYuODIgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMxLjA4LDAuMTggTDQuMjgsMC4xOCBDMi4wMiwwLjE4IDAuMTgsMi4wMiAwLjE4LDQuMjggTDAuMTgsMzEuMDggQzAuMTgsMzMuMzQgMi4wMiwzNS4xOCA0LjI4LDM1LjE4IEwyNi45NiwzNS4xOCBMMjUuOSwzMS41MiBMMjguNDYsMzMuODggTDMwLjg4LDM2LjEgTDM1LjIsMzkuODQgTDM1LjIsNC4yOCBDMzUuMTgsMi4wMiAzMy4zNCwwLjE4IDMxLjA4LDAuMTggWiBNMjMuMzYsMjYuMDggQzIzLjM2LDI2LjA4IDIyLjY0LDI1LjIyIDIyLjA0LDI0LjQ4IEMyNC42NiwyMy43NCAyNS42NiwyMi4xMiAyNS42NiwyMi4xMiBDMjQuODQsMjIuNjYgMjQuMDYsMjMuMDQgMjMuMzYsMjMuMyBDMjIuMzYsMjMuNzIgMjEuNCwyMy45OCAyMC40NiwyNC4xNiBDMTguNTQsMjQuNTIgMTYuNzgsMjQuNDIgMTUuMjgsMjQuMTQgQzE0LjE0LDIzLjkyIDEzLjE2LDIzLjYyIDEyLjM0LDIzLjI4IEMxMS44OCwyMy4xIDExLjM4LDIyLjg4IDEwLjg4LDIyLjYgQzEwLjgyLDIyLjU2IDEwLjc2LDIyLjU0IDEwLjcsMjIuNSBDMTAuNjYsMjIuNDggMTAuNjQsMjIuNDYgMTAuNjIsMjIuNDYgQzEwLjI2LDIyLjI2IDEwLjA2LDIyLjEyIDEwLjA2LDIyLjEyIEMxMC4wNiwyMi4xMiAxMS4wMiwyMy43IDEzLjU2LDI0LjQ2IEMxMi45NiwyNS4yMiAxMi4yMiwyNi4xIDEyLjIyLDI2LjEgQzcuOCwyNS45NiA2LjEyLDIzLjA4IDYuMTIsMjMuMDggQzYuMTIsMTYuNyA5LDExLjUyIDksMTEuNTIgQzExLjg4LDkuMzggMTQuNiw5LjQ0IDE0LjYsOS40NCBMMTQuOCw5LjY4IEMxMS4yLDEwLjcgOS41NiwxMi4yOCA5LjU2LDEyLjI4IEM5LjU2LDEyLjI4IDEwLDEyLjA0IDEwLjc0LDExLjcyIEMxMi44OCwxMC43OCAxNC41OCwxMC41NCAxNS4yOCwxMC40NiBDMTUuNCwxMC40NCAxNS41LDEwLjQyIDE1LjYyLDEwLjQyIEMxNi44NCwxMC4yNiAxOC4yMiwxMC4yMiAxOS42NiwxMC4zOCBDMjEuNTYsMTAuNiAyMy42LDExLjE2IDI1LjY4LDEyLjI4IEMyNS42OCwxMi4yOCAyNC4xLDEwLjc4IDIwLjcsOS43NiBMMjAuOTgsOS40NCBDMjAuOTgsOS40NCAyMy43Miw5LjM4IDI2LjU4LDExLjUyIEMyNi41OCwxMS41MiAyOS40NiwxNi43IDI5LjQ2LDIzLjA4IEMyOS40NiwyMy4wNiAyNy43OCwyNS45NCAyMy4zNiwyNi4wOCBMMjMuMzYsMjYuMDggWiBNNTMuNTYsOC43NCBMNDYuOTIsOC43NCBMNDYuOTIsMTYuMiBMNTEuMzQsMjAuMTggTDUxLjM0LDEyLjk0IEw1My43LDEyLjk0IEM1NS4yLDEyLjk0IDU1Ljk0LDEzLjY2IDU1Ljk0LDE0LjgyIEw1NS45NCwyMC4zNiBDNTUuOTQsMjEuNTIgNTUuMjQsMjIuMyA1My43LDIyLjMgTDQ2LjksMjIuMyBMNDYuOSwyNi41MjAzMzA0IEw1My41NCwyNi41MjAzMzA0IEM1Ny4xLDI2LjU0IDYwLjQ0MDE3NzksMjQuNzYgNjAuNDQwMTc3OSwyMC42OCBMNjAuNDQwMTc3OSwxNC43MiBDNjAuNDYsMTAuNTYgNTcuMTIsOC43NCA1My41Niw4Ljc0IEw1My41Niw4Ljc0IFogTTg4LjM2LDIwLjY4IEw4OC4zNiwxNC41NiBDODguMzYsMTIuMzYgOTIuMzIsMTEuODYgOTMuNTIsMTQuMDYgTDk3LjE4LDEyLjU4IEM5NS43NCw5LjQyIDkzLjEyLDguNSA5MC45NCw4LjUgQzg3LjM4LDguNSA4My44NiwxMC41NiA4My44NiwxNC41NiBMODMuODYsMjAuNjggQzgzLjg2LDI0LjcyIDg3LjM4LDI2Ljc0IDkwLjg2LDI2Ljc0IEM5My4xLDI2Ljc0IDk1Ljc4LDI1LjY0IDk3LjI2LDIyLjc2IEw5My4zNCwyMC45NiBDOTIuMzgsMjMuNDIgODguMzYsMjIuODIgODguMzYsMjAuNjggWiBNNzYuMjYsMTUuNCBDNzQuODgsMTUuMSA3My45NiwxNC42IDczLjksMTMuNzQgQzczLjk4LDExLjY4IDc3LjE2LDExLjYgNzkuMDIsMTMuNTggTDgxLjk2LDExLjMyIEM4MC4xMiw5LjA4IDc4LjA0LDguNDggNzUuOSw4LjQ4IEM3Mi42NCw4LjQ4IDY5LjQ4LDEwLjMyIDY5LjQ4LDEzLjggQzY5LjQ4LDE3LjE4IDcyLjA4LDE5IDc0Ljk0LDE5LjQ0IEM3Ni40LDE5LjY0IDc4LjAyLDIwLjIyIDc3Ljk4LDIxLjIyIEM3Ny44NiwyMy4xMiA3My45NCwyMy4wMiA3Mi4xNiwyMC44NiBMNjkuMzIsMjMuNTIgQzcwLjk4LDI1LjY2IDczLjI0LDI2Ljc0IDc1LjM2LDI2Ljc0IEM3OC42MiwyNi43NCA4Mi4yNCwyNC44NiA4Mi4zOCwyMS40MiBDODIuNTgsMTcuMDggNzkuNDIsMTUuOTggNzYuMjYsMTUuNCBaIE02Mi44NiwyNi41IEw2Ny4zNCwyNi41IEw2Ny4zNCw4Ljc0IEw2Mi44Niw4Ljc0IEw2Mi44NiwyNi41IFogTTEzOC40LDguNzQgTDEzMS43Niw4Ljc0IEwxMzEuNzYsMTYuMiBMMTM2LjE4LDIwLjE4IEwxMzYuMTgsMTIuOTQgTDEzOC41NCwxMi45NCBDMTQwLjA0LDEyLjk0IDE0MC43OCwxMy42NiAxNDAuNzgsMTQuODIgTDE0MC43OCwyMC4zNiBDMTQwLjc4LDIxLjUyIDE0MC4wOCwyMi4zIDEzOC41NCwyMi4zIEwxMzEuNzQsMjIuMyBMMTMxLjc0LDI2LjUyMDMzMDQgTDEzOC40LDI2LjUyMDMzMDQgQzE0MS45NiwyNi41NCAxNDUuMywyNC43NiAxNDUuMywyMC42OCBMMTQ1LjMsMTQuNzIgQzE0NS4zLDEwLjU2IDE0MS45Niw4Ljc0IDEzOC40LDguNzQgWiBNMTA1LjgyLDguNSBDMTAyLjE0LDguNSA5OC40OCwxMC41IDk4LjQ4LDE0LjYgTDk4LjQ4LDIwLjY2IEM5OC40OCwyNC43MiAxMDIuMTYsMjYuNzYgMTA1Ljg2LDI2Ljc2IEMxMDkuNTQsMjYuNzYgMTEzLjIsMjQuNzIgMTEzLjIsMjAuNjYgTDExMy4yLDE0LjYgQzExMy4yLDEwLjUyIDEwOS41LDguNSAxMDUuODIsOC41IFogTTEwOC43LDIwLjY2IEMxMDguNywyMS45NCAxMDcuMjYsMjIuNiAxMDUuODQsMjIuNiBDMTA0LjQsMjIuNiAxMDIuOTYsMjEuOTggMTAyLjk2LDIwLjY2IEwxMDIuOTYsMTQuNiBDMTAyLjk2LDEzLjMgMTA0LjM2LDEyLjYgMTA1Ljc2LDEyLjYgQzEwNy4yMiwxMi42IDEwOC43LDEzLjIyIDEwOC43LDE0LjYgTDEwOC43LDIwLjY2IEwxMDguNywyMC42NiBaIE0xMjkuMjgsMTQuNiBDMTI5LjE4LDEwLjQ0IDEyNi4zNCw4Ljc2IDEyMi42OCw4Ljc2IEwxMTUuNTgsOC43NiBMMTE1LjU4LDI2LjUyIEwxMjAuMTIsMjYuNTIgTDEyMC4xMiwyMC44OCBMMTIwLjkyLDIwLjg4IEwxMjUuMDQsMjYuNTIgTDEzMC42NCwyNi41MiBMMTI1LjgsMjAuNDIgQzEyNy45NCwxOS43NCAxMjkuMjgsMTcuODggMTI5LjI4LDE0LjYgWiBNMTIyLjc2LDE3IEwxMjAuMTIsMTcgTDEyMC4xMiwxMi45NCBMMTIyLjc2LDEyLjk0IEMxMjUuNTgsMTIuOTQgMTI1LjU4LDE3IDEyMi43NiwxNyBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+") no-repeat center center; } .discord-btn__left { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .discord-btn__title { display: block; font-size: 1.5rem; line-height: 1; color: #5c6bc0; text-align: left; margin-bottom: 3px; font-weight: 700; } .discord-btn__subtitle { display: block; font-size: 0.875rem; font-weight: 400; text-align: left; color: #2f3238; } @media only screen and (max-width: 480px) { .discord-btn__subtitle { margin-bottom: 12px; } } .discord-btn__caption { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; position: relative; font-size: 0.875rem; font-weight: 400; color: #2f3238; text-align: center; padding-right: 17px; } .discord-btn__caption::before { display: block; position: absolute; width: 10px; height: 10px; background: #4cc249; border-radius: 50%; right: 0; content: ''; } .discord-btn__logo { display: block; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTQ2cHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDE0NiA0MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT5kaXNjb3JkLWJ0bjwvdGl0bGU+CiAgICA8ZyBpZD0iZGVzaWduIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iaG9tZXBhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04NDMuMDAwMDAwLCAtMTQ5MC4wMDAwMDApIiBmaWxsPSIjNUM2QkMwIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8ZyBpZD0iZGlzY29yZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDI2LjAwMDAwMCwgMTQ3Mi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJkaXNjb3JkLWJ0biIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDE3LjAwMDAwMCwgMTguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIxLjM2LDE2LjgyIEMyMC4yMiwxNi44MiAxOS4zMiwxNy44IDE5LjMyLDE5LjAyIEMxOS4zMiwyMC4yNCAyMC4yNCwyMS4yMiAyMS4zNiwyMS4yMiBDMjIuNSwyMS4yMiAyMy40LDIwLjI0IDIzLjQsMTkuMDIgQzIzLjQsMTcuOCAyMi40OCwxNi44MiAyMS4zNiwxNi44MiBaIE0xNC4wNiwxNi44MiBDMTIuOTIsMTYuODIgMTIuMDIsMTcuOCAxMi4wMiwxOS4wMiBDMTIuMDIsMjAuMjQgMTIuOTQsMjEuMjIgMTQuMDYsMjEuMjIgQzE1LjIsMjEuMjIgMTYuMSwyMC4yNCAxNi4xLDE5LjAyIEMxNi4xMiwxNy44IDE1LjIsMTYuODIgMTQuMDYsMTYuODIgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMxLjA4LDAuMTggTDQuMjgsMC4xOCBDMi4wMiwwLjE4IDAuMTgsMi4wMiAwLjE4LDQuMjggTDAuMTgsMzEuMDggQzAuMTgsMzMuMzQgMi4wMiwzNS4xOCA0LjI4LDM1LjE4IEwyNi45NiwzNS4xOCBMMjUuOSwzMS41MiBMMjguNDYsMzMuODggTDMwLjg4LDM2LjEgTDM1LjIsMzkuODQgTDM1LjIsNC4yOCBDMzUuMTgsMi4wMiAzMy4zNCwwLjE4IDMxLjA4LDAuMTggWiBNMjMuMzYsMjYuMDggQzIzLjM2LDI2LjA4IDIyLjY0LDI1LjIyIDIyLjA0LDI0LjQ4IEMyNC42NiwyMy43NCAyNS42NiwyMi4xMiAyNS42NiwyMi4xMiBDMjQuODQsMjIuNjYgMjQuMDYsMjMuMDQgMjMuMzYsMjMuMyBDMjIuMzYsMjMuNzIgMjEuNCwyMy45OCAyMC40NiwyNC4xNiBDMTguNTQsMjQuNTIgMTYuNzgsMjQuNDIgMTUuMjgsMjQuMTQgQzE0LjE0LDIzLjkyIDEzLjE2LDIzLjYyIDEyLjM0LDIzLjI4IEMxMS44OCwyMy4xIDExLjM4LDIyLjg4IDEwLjg4LDIyLjYgQzEwLjgyLDIyLjU2IDEwLjc2LDIyLjU0IDEwLjcsMjIuNSBDMTAuNjYsMjIuNDggMTAuNjQsMjIuNDYgMTAuNjIsMjIuNDYgQzEwLjI2LDIyLjI2IDEwLjA2LDIyLjEyIDEwLjA2LDIyLjEyIEMxMC4wNiwyMi4xMiAxMS4wMiwyMy43IDEzLjU2LDI0LjQ2IEMxMi45NiwyNS4yMiAxMi4yMiwyNi4xIDEyLjIyLDI2LjEgQzcuOCwyNS45NiA2LjEyLDIzLjA4IDYuMTIsMjMuMDggQzYuMTIsMTYuNyA5LDExLjUyIDksMTEuNTIgQzExLjg4LDkuMzggMTQuNiw5LjQ0IDE0LjYsOS40NCBMMTQuOCw5LjY4IEMxMS4yLDEwLjcgOS41NiwxMi4yOCA5LjU2LDEyLjI4IEM5LjU2LDEyLjI4IDEwLDEyLjA0IDEwLjc0LDExLjcyIEMxMi44OCwxMC43OCAxNC41OCwxMC41NCAxNS4yOCwxMC40NiBDMTUuNCwxMC40NCAxNS41LDEwLjQyIDE1LjYyLDEwLjQyIEMxNi44NCwxMC4yNiAxOC4yMiwxMC4yMiAxOS42NiwxMC4zOCBDMjEuNTYsMTAuNiAyMy42LDExLjE2IDI1LjY4LDEyLjI4IEMyNS42OCwxMi4yOCAyNC4xLDEwLjc4IDIwLjcsOS43NiBMMjAuOTgsOS40NCBDMjAuOTgsOS40NCAyMy43Miw5LjM4IDI2LjU4LDExLjUyIEMyNi41OCwxMS41MiAyOS40NiwxNi43IDI5LjQ2LDIzLjA4IEMyOS40NiwyMy4wNiAyNy43OCwyNS45NCAyMy4zNiwyNi4wOCBMMjMuMzYsMjYuMDggWiBNNTMuNTYsOC43NCBMNDYuOTIsOC43NCBMNDYuOTIsMTYuMiBMNTEuMzQsMjAuMTggTDUxLjM0LDEyLjk0IEw1My43LDEyLjk0IEM1NS4yLDEyLjk0IDU1Ljk0LDEzLjY2IDU1Ljk0LDE0LjgyIEw1NS45NCwyMC4zNiBDNTUuOTQsMjEuNTIgNTUuMjQsMjIuMyA1My43LDIyLjMgTDQ2LjksMjIuMyBMNDYuOSwyNi41MjAzMzA0IEw1My41NCwyNi41MjAzMzA0IEM1Ny4xLDI2LjU0IDYwLjQ0MDE3NzksMjQuNzYgNjAuNDQwMTc3OSwyMC42OCBMNjAuNDQwMTc3OSwxNC43MiBDNjAuNDYsMTAuNTYgNTcuMTIsOC43NCA1My41Niw4Ljc0IEw1My41Niw4Ljc0IFogTTg4LjM2LDIwLjY4IEw4OC4zNiwxNC41NiBDODguMzYsMTIuMzYgOTIuMzIsMTEuODYgOTMuNTIsMTQuMDYgTDk3LjE4LDEyLjU4IEM5NS43NCw5LjQyIDkzLjEyLDguNSA5MC45NCw4LjUgQzg3LjM4LDguNSA4My44NiwxMC41NiA4My44NiwxNC41NiBMODMuODYsMjAuNjggQzgzLjg2LDI0LjcyIDg3LjM4LDI2Ljc0IDkwLjg2LDI2Ljc0IEM5My4xLDI2Ljc0IDk1Ljc4LDI1LjY0IDk3LjI2LDIyLjc2IEw5My4zNCwyMC45NiBDOTIuMzgsMjMuNDIgODguMzYsMjIuODIgODguMzYsMjAuNjggWiBNNzYuMjYsMTUuNCBDNzQuODgsMTUuMSA3My45NiwxNC42IDczLjksMTMuNzQgQzczLjk4LDExLjY4IDc3LjE2LDExLjYgNzkuMDIsMTMuNTggTDgxLjk2LDExLjMyIEM4MC4xMiw5LjA4IDc4LjA0LDguNDggNzUuOSw4LjQ4IEM3Mi42NCw4LjQ4IDY5LjQ4LDEwLjMyIDY5LjQ4LDEzLjggQzY5LjQ4LDE3LjE4IDcyLjA4LDE5IDc0Ljk0LDE5LjQ0IEM3Ni40LDE5LjY0IDc4LjAyLDIwLjIyIDc3Ljk4LDIxLjIyIEM3Ny44NiwyMy4xMiA3My45NCwyMy4wMiA3Mi4xNiwyMC44NiBMNjkuMzIsMjMuNTIgQzcwLjk4LDI1LjY2IDczLjI0LDI2Ljc0IDc1LjM2LDI2Ljc0IEM3OC42MiwyNi43NCA4Mi4yNCwyNC44NiA4Mi4zOCwyMS40MiBDODIuNTgsMTcuMDggNzkuNDIsMTUuOTggNzYuMjYsMTUuNCBaIE02Mi44NiwyNi41IEw2Ny4zNCwyNi41IEw2Ny4zNCw4Ljc0IEw2Mi44Niw4Ljc0IEw2Mi44NiwyNi41IFogTTEzOC40LDguNzQgTDEzMS43Niw4Ljc0IEwxMzEuNzYsMTYuMiBMMTM2LjE4LDIwLjE4IEwxMzYuMTgsMTIuOTQgTDEzOC41NCwxMi45NCBDMTQwLjA0LDEyLjk0IDE0MC43OCwxMy42NiAxNDAuNzgsMTQuODIgTDE0MC43OCwyMC4zNiBDMTQwLjc4LDIxLjUyIDE0MC4wOCwyMi4zIDEzOC41NCwyMi4zIEwxMzEuNzQsMjIuMyBMMTMxLjc0LDI2LjUyMDMzMDQgTDEzOC40LDI2LjUyMDMzMDQgQzE0MS45NiwyNi41NCAxNDUuMywyNC43NiAxNDUuMywyMC42OCBMMTQ1LjMsMTQuNzIgQzE0NS4zLDEwLjU2IDE0MS45Niw4Ljc0IDEzOC40LDguNzQgWiBNMTA1LjgyLDguNSBDMTAyLjE0LDguNSA5OC40OCwxMC41IDk4LjQ4LDE0LjYgTDk4LjQ4LDIwLjY2IEM5OC40OCwyNC43MiAxMDIuMTYsMjYuNzYgMTA1Ljg2LDI2Ljc2IEMxMDkuNTQsMjYuNzYgMTEzLjIsMjQuNzIgMTEzLjIsMjAuNjYgTDExMy4yLDE0LjYgQzExMy4yLDEwLjUyIDEwOS41LDguNSAxMDUuODIsOC41IFogTTEwOC43LDIwLjY2IEMxMDguNywyMS45NCAxMDcuMjYsMjIuNiAxMDUuODQsMjIuNiBDMTA0LjQsMjIuNiAxMDIuOTYsMjEuOTggMTAyLjk2LDIwLjY2IEwxMDIuOTYsMTQuNiBDMTAyLjk2LDEzLjMgMTA0LjM2LDEyLjYgMTA1Ljc2LDEyLjYgQzEwNy4yMiwxMi42IDEwOC43LDEzLjIyIDEwOC43LDE0LjYgTDEwOC43LDIwLjY2IEwxMDguNywyMC42NiBaIE0xMjkuMjgsMTQuNiBDMTI5LjE4LDEwLjQ0IDEyNi4zNCw4Ljc2IDEyMi42OCw4Ljc2IEwxMTUuNTgsOC43NiBMMTE1LjU4LDI2LjUyIEwxMjAuMTIsMjYuNTIgTDEyMC4xMiwyMC44OCBMMTIwLjkyLDIwLjg4IEwxMjUuMDQsMjYuNTIgTDEzMC42NCwyNi41MiBMMTI1LjgsMjAuNDIgQzEyNy45NCwxOS43NCAxMjkuMjgsMTcuODggMTI5LjI4LDE0LjYgWiBNMTIyLjc2LDE3IEwxMjAuMTIsMTcgTDEyMC4xMiwxMi45NCBMMTIyLjc2LDEyLjk0IEMxMjUuNTgsMTIuOTQgMTI1LjU4LDE3IDEyMi43NiwxNyBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+") no-repeat center center; background-size: 145px 40px; width: 145px; height: 40px; } .account-section { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding: 40px 0px 70px; } .account-controls { display: flex; width: 100%; flex-flow: row nowrap; justify-content: flex-start; align-items: center; list-style: none; padding: 0; } @media only screen and (max-width: 480px) { .account-controls { flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } } .account-controls li { display: flex; width: 100%; font-size: 1.5rem; line-height: 1; text-align: center; flex-flow: row; justify-content: center; align-items: center; padding: 22px 30px; background: var(--color-light); color: #2f3238; font-weight: 700; cursor: pointer; transition: all 0.3s; } @media only screen and (max-width: 480px) { .account-controls li { font-size: 1rem; } } .account-controls li.--active { background: var(--color-green); color: #FFFFFF; } .account-controls li.--active:hover { background: var(--color-green); color: #FFFFFF; } .account-controls li:first-of-type { border-radius: 15px 0px 0px 15px; } @media only screen and (max-width: 480px) { .account-controls li:first-of-type { border-radius: 15px 15px 0px 0px; } } .account-controls li:last-of-type { border-radius: 0px 15px 15px 0px; } @media only screen and (max-width: 480px) { .account-controls li:last-of-type { border-radius: 0px 0px 15px 15px; } } .account-controls li:hover { background: #c6dcd7; color: #2f3238; } .account-container { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding: 50px 0px 30px; } .account-container__step { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding-bottom: 50px; } .account-container__step.--second { padding-bottom: 50px; } .account-container__step.--third { padding-bottom: 50px; } .account-container__header { display: block; font-size: 1.25rem; font-weight: 700; color: #2f3238; text-align: left; text-transform: uppercase; margin-bottom: 24px; } .account-container__header mark { background: transparent; padding-right: 5px; color: var(--color-secondary); } .account-row { display: flex; width: 100%; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; list-style: none; padding: 0; margin: 0; gap: 16px; } .account-row__item { display: flex; width: calc(1 / 3 * 100% - 26px); min-width: 200px; max-width: 420px; /* Prevent single card from spanning full width */ flex-flow: row nowrap; justify-content: space-between; align-items: center; border-radius: 8px; box-shadow: 0 6px 24px 0 rgba(120, 141, 162, 0.13); background: #FFFFFF; margin: 0 13px 26px; padding: 13px 22px; border: 3px solid transparent; cursor: pointer; transition: all 0.15s ease; flex: 0 1 auto; box-sizing: border-box; overflow: hidden; /* Touch optimization for all devices */ touch-action: manipulation; -webkit-tap-highlight-color: rgba(79, 203, 205, 0.2); user-select: none; -webkit-user-select: none; } .account-row__item:active { transform: scale(0.98); transition: transform 0.1s ease; } /* ============================================ ACCOUNT ROW RESPONSIVE STYLES - CLEAN SET ============================================ */ /* Large Tablets (769px - 1024px) - Nest Hub, iPad Pro */ @media (min-width: 769px) and (max-width: 1024px) { .account-row { justify-content: center !important; padding: 0 2px !important; margin: 0 !important; gap: 4px !important; width: 100% !important; box-sizing: border-box !important; } .account-row__item { width: calc(50% - 2px) !important; min-width: calc(50% - 2px) !important; max-width: calc(50% - 2px) !important; padding: 16px 20px !important; margin: 0 1px !important; box-sizing: border-box !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; } .account-row__left { flex: 1 1 auto !important; min-width: 0 !important; max-width: calc(100% - 95px) !important; overflow: visible !important; padding-right: 10px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; flex-flow: column nowrap !important; align-items: flex-start !important; gap: 4px !important; } .account-row__right { flex: 0 0 auto !important; min-width: 85px !important; max-width: 95px !important; overflow: hidden !important; box-sizing: border-box !important; } .account-row__box { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; flex-direction: row !important; flex-flow: row nowrap !important; gap: 6px !important; overflow: visible !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .account-row__be { font-size: 1.05rem !important; white-space: nowrap !important; overflow: visible !important; text-overflow: ellipsis !important; flex-shrink: 0 !important; } .account-row__badge { font-size: 0.55rem !important; padding: 2px 6px !important; white-space: nowrap !important; flex-shrink: 0 !important; } .account-row__caption { font-size: 0.7rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; } .account-row__price { font-size: 1.05rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .account-row__oldprice { font-size: 0.65rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } } /* Tablets (481px - 768px) */ @media (min-width: 481px) and (max-width: 768px) { .account-row { justify-content: center !important; padding: 0 2px !important; margin: 0 !important; gap: 4px !important; width: 100% !important; box-sizing: border-box !important; } .account-row__item { width: calc(50% - 2px) !important; min-width: calc(50% - 2px) !important; max-width: calc(50% - 2px) !important; padding: 14px 18px !important; margin: 0 1px !important; box-sizing: border-box !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; } .account-row__left { flex: 1 1 auto !important; min-width: 0 !important; max-width: calc(100% - 90px) !important; overflow: visible !important; padding-right: 10px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; flex-flow: column nowrap !important; align-items: flex-start !important; gap: 4px !important; } .account-row__right { flex: 0 0 auto !important; min-width: 80px !important; max-width: 90px !important; overflow: hidden !important; box-sizing: border-box !important; } .account-row__box { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; flex-direction: row !important; flex-flow: row nowrap !important; gap: 5px !important; overflow: visible !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .account-row__be { font-size: 1rem !important; white-space: nowrap !important; overflow: visible !important; text-overflow: ellipsis !important; flex-shrink: 0 !important; max-width: none !important; } .account-row__badge { font-size: 0.55rem !important; padding: 2px 4px !important; white-space: nowrap !important; flex-shrink: 0 !important; } .account-row__caption { font-size: 0.7rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; } .account-row__price { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account-row__oldprice { font-size: 0.65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* Small Tablets/Large Phones (481px - 640px) */ @media (min-width: 481px) and (max-width: 640px) { .account-row { padding: 0 8px; gap: 10px; box-sizing: border-box; } .account-row__item { width: 100% !important; padding: 12px 14px !important; gap: 8px; box-sizing: border-box; } .account-row__left { max-width: calc(100% - 80px); } .account-row__right { min-width: 70px; max-width: 80px; } .account-row__be { max-width: 90px; } } /* Mobile (up to 480px) */ @media (max-width: 480px) { .account-row { padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; box-sizing: border-box; } .account-row__item { width: 100% !important; margin: 0 !important; min-height: 80px; padding: 10px 12px !important; border-radius: 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); border-width: 2px; gap: 10px; box-sizing: border-box; overflow: hidden; touch-action: manipulation; -webkit-tap-highlight-color: rgba(79, 203, 205, 0.3); user-select: none; -webkit-user-select: none; } .account-row__item:active { transform: scale(0.99); background-color: #fafafa; } .account-row__item.--active { box-shadow: 0 0 0 2px var(--color-secondary); background-color: #f8fffe; border-color: var(--color-secondary); } .account-row__left { flex: 1 1 auto !important; min-width: 0 !important; max-width: calc(100% - 90px) !important; padding-right: 6px !important; gap: 3px !important; overflow: visible !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; flex-flow: column nowrap !important; justify-content: center !important; align-items: flex-start !important; } .account-row__right { flex: 0 0 auto !important; min-width: 80px !important; max-width: 90px !important; gap: 0 !important; overflow: hidden !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; } .account-row__box { flex-wrap: nowrap !important; gap: 4px !important; overflow: visible !important; width: auto !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; flex-shrink: 0 !important; flex-grow: 0 !important; margin: 0 !important; flex-direction: row !important; flex-flow: row nowrap !important; } .account-row__be { font-size: 1.05rem !important; font-weight: 700 !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; flex-shrink: 0 !important; } .account-row__badge { font-size: 0.5rem !important; font-weight: 600 !important; padding: 2px 5px !important; line-height: 1.2 !important; white-space: nowrap !important; flex-shrink: 0 !important; } .account-row__caption { font-size: 0.7rem !important; color: #999 !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: 0 !important; display: block !important; } .account-row__price { font-size: 1rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; } .account-row__oldprice { font-size: 0.65rem; color: #bbb; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; } } .account-row__item:hover { box-shadow: 0 2px 14px 0 rgba(120, 141, 162, 0.2); } .account-row__item.--active { border-color: var(--color-secondary); } .account-row__left { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; flex: 1 1 auto; min-width: 0; padding-right: 12px; overflow: hidden; max-width: 100%; } .account-row__right { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-end; flex-shrink: 0; flex-grow: 0; } .account-row__box { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow: hidden; width: 100%; max-width: 100%; } /* Tablet overrides - must come after base styles */ @media (min-width: 481px) and (max-width: 1024px) { .account-row__box { flex-flow: row nowrap !important; width: auto !important; max-width: none !important; flex-grow: 0 !important; flex-shrink: 0 !important; } .account-row__be { flex-shrink: 0 !important; max-width: none !important; } .account-row__badge { flex-shrink: 0 !important; } } .account-row__be-icon { width: 32px; height: 32px; flex-shrink: 0; margin-right: 4px; margin-left: 0; margin-top: 0; margin-bottom: 0; object-fit: contain; object-position: center; image-rendering: -webkit-optimize-contrast; image-rendering: auto; filter: drop-shadow(0 0 4px rgba(12, 217, 217, 0.5)); transition: filter 0.3s ease, transform 0.3s ease; display: block; padding: 0; border: none; } .account-row__item:hover .account-row__be-icon { filter: drop-shadow(0 0 6px rgba(12, 217, 217, 0.7)); transform: scale(1.05); } .account-row__be { display: block; font-size: 1.25rem; font-weight: 600; text-align: left; color: #2f3238; flex-shrink: 0; } .account-row__badge { display: inline-block; font-size: 0.75rem; font-weight: 400; text-align: center; color: #FFFFFF; padding: 2px 8px; border-radius: 45px; white-space: nowrap; flex-shrink: 0; } .account-row__badge.--sale { background-color: #FF8749; } .account-row__badge.--popular { background-color: #49b8ff; } .account-row__badge.--premium { background-color: #8b5cf6; } .account-row__badge.--ranked-ready { background: linear-gradient(135deg, #00b8d4 0%, #00d1d2 100%); color: white !important; padding: 4px 12px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-left: 8px; display: inline-flex !important; align-items: center; gap: 4px; box-shadow: 0 2px 8px rgba(0, 209, 210, 0.3); animation: pulseRanked 2s ease-in-out infinite; white-space: nowrap; } @keyframes pulseRanked { 0%, 100% { box-shadow: 0 2px 8px rgba(0, 209, 210, 0.3); } 50% { box-shadow: 0 2px 12px rgba(0, 209, 210, 0.5); } } .account-row__caption { display: block; font-size: 0.875rem; color: var(--color-text); font-weight: 400; text-align: left; } .account-row__price { display: block; font-size: 1.25rem; font-weight: 600; text-align: left; color: #2f3238; } .account-row__oldprice { display: block; font-size: 0.875rem; color: var(--color-text); font-weight: 400; text-align: left; text-decoration: line-through; } .third-screen { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; background: var(--bg-secondary); padding: 70px 0px; } .third-screen__row { display: flex; width: 100%; flex-flow: row wrap; justify-content: flex-start; align-items: stretch; margin: 0; gap: 16px; } @media only screen and (max-width: 480px) { .third-screen__row { flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; width: 100%; margin: 0; } } .third-infoblock { display: flex; width: calc(1 / 2 * 100% - 26px); margin: 0px 13px 26px; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; background: #FFFFFF; border-radius: 15px; padding: 50px 60px 60px; } @media only screen and (max-width: 480px) { .third-infoblock { width: 100%; margin: 0 0 26px; flex-flow: column nowrap; justify-content: flex-start; align-items: center; padding: 30px 20px 30px; } } .third-infoblock__icon { display: block; width: 100px; flex-shrink: 0; } @media only screen and (max-width: 480px) { .third-infoblock__icon { margin-bottom: 20px; width: 60px; } } .third-infoblock__icon1 { width: 100px; flex-shrink: 0; float: left; margin-right: 90px; } @media only screen and (max-width: 480px) { .third-infoblock__icon1 { display: inline-block; width: 60px; margin-right: 20px; } } .third-infoblock__box { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding-left: 50px; } @media only screen and (max-width: 480px) { .third-infoblock__box { padding-left: 0; justify-content: flex-start; align-items: center; } } .third-infoblock__header { display: block; font-size: rem(20); text-align: left; font-weight: 700; color: #2f3238; margin-bottom: 12px; text-transform: uppercase; } @media only screen and (max-width: 480px) { .third-infoblock__header { text-align: center; } } .third-infoblock__text { font-size: rem(16); font-weight: 500; text-align: left; color: var(--color-text); line-height: rem(22); margin-bottom: 0; } @media only screen and (max-width: 480px) { .third-infoblock__text { text-align: center; } } .info-screen { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; background: #FFFFFF; padding: 70px 0px; } .info-screen__container { display: flex; width: 100%; flex-flow: row wrap; justify-content: flex-start; align-items: stretch; margin: 0; gap: 16px; } .info-screen__container.--pb-50 { padding-bottom: 50px; } .info-screen__grad { display: flex; position: absolute; bottom: 0; left: 0; width: 100%; height: 190px; flex-flow: column nowrap; justify-content: flex-end; align-items: center; background-image: linear-gradient(to bottom, #ffffff, rgba(251, 251, 251, 0.14) 0%, #ffffff 50%); } .info-screen__btn { display: block; font-size: 1.5rem; line-height: 1.5rem; color: #FF8749; text-align: center; font-weight: 600; } .info-screen__block { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; max-width: 50%; padding: 28px 30px; border-radius: 15px; background: var(--bg); width: calc(1 / 2 * 100% - 26px); margin: 0px 13px 0px; margin-bottom: 20px; } .info-screen__block.green-bg { background: var(--color-light); } .info-screen__block:last-of-type { margin-left: auto; margin-right: auto; } .info-screen__title { display: block; font-size: 1.25rem; line-height: 1.625rem; text-align: left; font-weight: 700; color: #2f3238; margin-bottom: 14px; } .info-screen__text { font-size: 1rem; line-height: 1.375rem; font-weight: 500; text-align: left; color: var(--color-text); } .page-header.--mb-50 { margin-bottom: 50px; } .subscribe-screen { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; background: var(--color-green); padding: 70px 0px; } .subscribe-form { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: center; } .subscribe-form form { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: center; } .subscribe-form__row { display: flex; width: 100%; max-width: 720px; flex-flow: row nowrap; justify-content: center; align-items: center; gap: 15px; } @media only screen and (max-width: 480px) { .subscribe-form form { flex-flow: column nowrap; justify-content: flex-start; align-items: center; } .subscribe-form__row { flex-flow: column nowrap; gap: 10px; } } .subscribe-form__box { display: flex; width: 100%; flex: 1; } @media only screen and (max-width: 480px) { .subscribe-form__box { margin-bottom: 10px; } } .subscribe-form__input { display: inline-block; width: 100%; height: 58px; font-size: 1.375rem; color: #FFFFFF; text-align: left; background-clip: padding-box; padding: 8px 0px; border-bottom: 2px solid #FFFFFF; border-top: none; border-left: none; border-right: none; border-radius: 0; box-shadow: none; background: transparent; } @media only screen and (max-width: 480px) { .subscribe-form__input { text-align: center; } } .subscribe-form__input:focus { outline: 0; border-top: none; border-left: none; border-right: none; border-bottom: 2px solid #FFFFFF; box-shadow: none; } .subscribe-form__input::-moz-placeholder { color: rgba(248, 248, 248, 0.8); } .subscribe-form__input:-ms-input-placeholder { color: rgba(248, 248, 248, 0.8); } .subscribe-form__input::placeholder { color: rgba(248, 248, 248, 0.8); } .subscribe-form__btn { display: inline-block; height: 58px; text-align: center; font-size: 1.5rem; line-height: 1.5rem; padding: 13px 60px; background: #FFFFFF; color: #2f3238; font-weight: 600; border: 1px solid #FFFFFF; cursor: pointer; transition: all 0.3s; } .subscribe-form__btn:hover { color: #FF8749; } .subscribe-form__btn:focus { color: #2f3238; outline: none; } .subscribe-form__message { display: block; width: 100%; max-width: 720px; margin-top: 20px; text-align: center; font-size: 1.125rem; line-height: 1.6; font-weight: 500; padding: 12px 20px; border-radius: 6px; transition: all 0.3s ease; } .subscribe-form__message--success { color: #FFFFFF; background-color: rgba(34, 197, 94, 0.2); border: 1px solid rgba(34, 197, 94, 0.4); } .subscribe-form__message--error { color: #FFFFFF; background-color: rgba(239, 68, 68, 0.2); border: 1px solid rgba(239, 68, 68, 0.4); } @media only screen and (max-width: 480px) { .subscribe-form__message { font-size: 1rem; padding: 10px 15px; margin-top: 15px; } } .footer-review { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding: 10px 0px; background: var(--color-header); } .footer-review__block { display: flex; width: 100%; flex-flow: row nowrap; justify-content: center; align-items: center; } @media only screen and (max-width: 480px) { .footer-review__block { flex-flow: column nowrap; justify-content: flex-start; align-items: center; } } .footer-review__num { display: block; font-size: 3.75rem; font-weight: 400; text-align: left; color: var(--color-secondary); line-height: 1; } .footer-review__stars { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; list-style: none; padding: 0; margin: 0 0 7px; } .footer-review__stars li { display: block; margin-right: 7px; } .footer-review__stars li:last-of-type { margin-right: 0; } .footer-review__star { display: block; width: 20px; height: 20px; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjFweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjEgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+c3RhcjwvdGl0bGU+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iRGVza3RvcC1IRCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU1Mi4wMDAwMDAsIC0xMDAuMDAwMDAwKSIgZmlsbD0iIzBDRDlEOSIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgPGcgaWQ9InN0YXIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU1Mi4wMDAwMDAsIDEwMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik05LjMxMTI4NDA1LDAuNzMxNTE3NTEgTDYuNzcwNDI4MDIsNS44ODMyNjg0OCBMMS4wODU2MDMxMSw2LjcxMjA2MjI2IEMwLjA2NjE0Nzg1OTksNi44NTk5MjIxOCAtMC4zNDI0MTI0NTEsOC4xMTY3MzE1MiAwLjM5Njg4NzE2LDguODM2NTc1ODggTDQuNTA5NzI3NjMsMTIuODQ0MzU4IEwzLjUzNjk2NDk4LDE4LjUwNTgzNjYgQzMuMzYxODY3NywxOS41MjkxODI5IDQuNDM5Njg4NzIsMjAuMjk1NzE5OCA1LjM0MjQxMjQ1LDE5LjgxNzEyMDYgTDEwLjQyODAxNTYsMTcuMTQzOTY4OSBMMTUuNTEzNjE4NywxOS44MTcxMjA2IEMxNi40MTYzNDI0LDIwLjI5MTgyODggMTcuNDk0MTYzNCwxOS41MjkxODI5IDE3LjMxOTA2NjEsMTguNTA1ODM2NiBMMTYuMzQ2MzAzNSwxMi44NDQzNTggTDIwLjQ1OTE0NCw4LjgzNjU3NTg4IEMyMS4xOTg0NDM2LDguMTE2NzMxNTIgMjAuNzg5ODgzMyw2Ljg1OTkyMjE4IDE5Ljc3MDQyOCw2LjcxMjA2MjI2IEwxNC4wODU2MDMxLDUuODgzMjY4NDggTDExLjU0NDc0NzEsMC43MzE1MTc1MSBDMTEuMDg5NDk0MiwtMC4xODY3NzA0MjggOS43NzA0MjgwMiwtMC4xOTg0NDM1OCA5LjMxMTI4NDA1LDAuNzMxNTE3NTEgWiIgaWQ9IlBhdGgiPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+") no-repeat center center; background-size: 18px 18px; } .footer-review__star.--half { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjFweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjEgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+c3Rhci1oYWxmLWFsdDwvdGl0bGU+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iRGVza3RvcC1IRCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQ4OS4wMDAwMDAsIC0xMDAuMDAwMDAwKSIgZmlsbD0iIzBDRDlEOSIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgPGcgaWQ9InN0YXItaGFsZi1hbHQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ4OS4wMDAwMDAsIDEwMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xOS44NjUyMzQ0LDYuNjk5NjA5MzcgTDE0LjE0NzY1NjMsNS44NjcxODc1IEwxMS41OTI1NzgxLDAuNjk1NzAzMTI1IEMxMS4zNjI4OTA2LDAuMjMzNTkzNzUgMTAuOTE0ODQzOCwwIDEwLjQ2Njc5NjksMCBDMTAuMDIxNDg0NCwwIDkuNTc2NTYyNSwwLjIzMDQ2ODc1IDkuMzQ2MDkzNzUsMC42OTU3MDMxMjUgTDYuNzkwMjM0MzcsNS44NjY3OTY4OCBMMS4wNzIyNjU2Miw2LjY5ODQzNzUgQzAuMDQ2ODc1LDYuODQ2ODc1IC0wLjM2NDA2MjUsOC4xMDgyMDMxMiAwLjM3OTI5Njg3NSw4LjgzMDg1OTM3IEw0LjUxNTYyNSwxMi44NTQyOTY5IEwzLjUzNjcxODc1LDE4LjUzNzEwOTQgQzMuMzk3NjU2MjUsMTkuMzQ4ODI4MSA0LjA0NTcwMzEzLDIwIDQuNzcxNDg0MzgsMjAgQzQuOTY0MDYyNSwyMCA1LjE2MjEwOTM4LDE5Ljk1NDI5NjkgNS4zNTIzNDM3NSwxOS44NTM1MTU2IEwxMC40Njc1NzgxLDE3LjE3MDcwMzEgTDE1LjU4MjQyMTksMTkuODU0Mjk2OSBDMTUuNzcyMjY1NiwxOS45NTM5MDYyIDE1Ljk2OTkyMTksMTkuOTk5MjE4NyAxNi4xNjE3MTg4LDE5Ljk5OTIxODcgQzE2Ljg4ODI4MTMsMTkuOTk5MjE4NyAxNy41Mzc1LDE5LjM1MDM5MDYgMTcuMzk4NDM3NSwxOC41MzgyODEzIEwxNi40MjA3MDMxLDEyLjg1NTA3ODEgTDIwLjU1NzgxMjUsOC44MzI0MjE4NyBDMjEuMzAxNTYyNSw4LjEwOTc2NTYyIDIwLjg5MDYyNSw2Ljg0ODA0Njg3IDE5Ljg2NTIzNDQsNi42OTk2MDkzNyBaIE0xNS4xMDk3NjU2LDExLjUxMjEwOTQgTDE0LjQwMTk1MzEsMTIuMjAwMzkwNiBMMTQuNTY5MTQwNiwxMy4xNzIyNjU2IEwxNS4zMzE2NDA2LDE3LjYwMzkwNjIgTDExLjM0MjE4NzUsMTUuNTEwNTQ2OSBMMTAuNDY3OTY4NywxNS4wNTE5NTMxIEwxMC40NjkxNDA2LDIuNjYxNzE4NzUgTDEyLjQ2MjUsNi42OTY0ODQzNyBMMTIuODk5MjE4Nyw3LjU4MDQ2ODc1IEwxMy44NzYxNzE5LDcuNzIyNjU2MjUgTDE4LjMzODI4MTIsOC4zNzIyNjU2MiBMMTUuMTA5NzY1NiwxMS41MTIxMDk0IEwxNS4xMDk3NjU2LDExLjUxMjEwOTQgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") no-repeat center center; background-size: 18px 18px; } .footer-review__desc { font-size: 1.25rem; line-height: 1.5rem; color: #FFFFFF; text-align: left; font-weight: 400; margin: 0; } @media only screen and (max-width: 480px) { .footer-review__desc { font-size: 1rem; line-height: 1.375rem; text-align: center; } } .footer-review__desc a { color: var(--color-secondary); text-decoration: none; } .footer-review__desc a:hover { color: var(--color-secondary); text-decoration: underline; } .footer-review__box { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding-left: 20px; } @media only screen and (max-width: 480px) { .footer-review__box { justify-content: flex-start; align-items: center; padding-left: 0; padding-top: 12px; } } .review-page { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding: 0 0 70px; } .review-page__block { display: flex; width: 100%; max-width: 800px; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; border-radius: 15px; border: 1px dashed #cacaca; margin-bottom: 70px; } @media only screen and (max-width: 480px) { .review-page__block { flex-flow: column nowrap; justify-content: flex-start; align-items: center; } } .review-page__numbox { display: flex; width: 200px; flex-flow: column nowrap; justify-content: center; align-items: center; padding: 24px; border-right: 1px dashed #cacaca; } @media only screen and (max-width: 480px) { .review-page__numbox { border-right: none; border-bottom: 1px dashed #cacaca; width: 100%; } } .review-page__box { display: flex; width: 100%; flex-flow: column nowrap; justify-content: center; align-items: flex-start; padding: 24px 26px; } .review-page__num { display: block; font-size: 5rem; line-height: 5rem; text-align: center; font-weight: 400; color: var(--color-secondary); } .review-page__desc { display: block; text-align: center; font-size: 1rem; line-height: 1.375rem; color: var(--color-text); } .review-page__title { font-size: 1.25rem; line-height: 1.75rem; color: #2f3238; text-align: left; font-weight: 600; } .review-page__text { margin: 0; font-size: 1rem; line-height: 1.375rem; text-align: left; color: var(--color-text); } .review-page__row { display: flex; width: 100%; margin: 0; flex-flow: row wrap; justify-content: flex-start; align-items: stretch; gap: 16px; } @media only screen and (max-width: 480px) { .review-page__row { width: 100%; margin: 0; } } .review-item { display: flex; width: calc(1 / 3 * 100% - 26px); margin: 0 13px 26px; flex-flow: column nowrap; justify-content: space-between; align-items: flex-start; padding: 24px; border-radius: 8px; background: #FFFFFF; box-shadow: 0 6px 24px 0 rgba(120, 141, 162, 0.13); transition: all 0.3s; } @media only screen and (max-width: 480px) { .review-item { width: 100%; margin: 0 0 16px; } } .review-item:hover { box-shadow: 0 2px 14px 0 rgba(120, 141, 162, 0.2); text-decoration: none; } .review-item__box { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .review-item__stars { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; padding: 0; margin: 0; list-style: none; } .review-item__stars li { display: block; margin-right: 7px; } .review-item__stars li:last-of-type { margin-right: 0; } .review-item__star { display: block; width: 20px; height: 20px; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjFweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjEgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+c3RhcjwvdGl0bGU+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iRGVza3RvcC1IRCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU1Mi4wMDAwMDAsIC0xMDAuMDAwMDAwKSIgZmlsbD0iIzBDRDlEOSIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgPGcgaWQ9InN0YXIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU1Mi4wMDAwMDAsIDEwMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik05LjMxMTI4NDA1LDAuNzMxNTE3NTEgTDYuNzcwNDI4MDIsNS44ODMyNjg0OCBMMS4wODU2MDMxMSw2LjcxMjA2MjI2IEMwLjA2NjE0Nzg1OTksNi44NTk5MjIxOCAtMC4zNDI0MTI0NTEsOC4xMTY3MzE1MiAwLjM5Njg4NzE2LDguODM2NTc1ODggTDQuNTA5NzI3NjMsMTIuODQ0MzU4IEwzLjUzNjk2NDk4LDE4LjUwNTgzNjYgQzMuMzYxODY3NywxOS41MjkxODI5IDQuNDM5Njg4NzIsMjAuMjk1NzE5OCA1LjM0MjQxMjQ1LDE5LjgxNzEyMDYgTDEwLjQyODAxNTYsMTcuMTQzOTY4OSBMMTUuNTEzNjE4NywxOS44MTcxMjA2IEMxNi40MTYzNDI0LDIwLjI5MTgyODggMTcuNDk0MTYzNCwxOS41MjkxODI5IDE3LjMxOTA2NjEsMTguNTA1ODM2NiBMMTYuMzQ2MzAzNSwxMi44NDQzNTggTDIwLjQ1OTE0NCw4LjgzNjU3NTg4IEMyMS4xOTg0NDM2LDguMTE2NzMxNTIgMjAuNzg5ODgzMyw2Ljg1OTkyMjE4IDE5Ljc3MDQyOCw2LjcxMjA2MjI2IEwxNC4wODU2MDMxLDUuODgzMjY4NDggTDExLjU0NDc0NzEsMC43MzE1MTc1MSBDMTEuMDg5NDk0MiwtMC4xODY3NzA0MjggOS43NzA0MjgwMiwtMC4xOTg0NDM1OCA5LjMxMTI4NDA1LDAuNzMxNTE3NTEgWiIgaWQ9IlBhdGgiPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+") no-repeat center center; background-size: 18px 18px; } .review-item__star.--half { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjFweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjEgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+c3Rhci1oYWxmLWFsdDwvdGl0bGU+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iRGVza3RvcC1IRCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQ4OS4wMDAwMDAsIC0xMDAuMDAwMDAwKSIgZmlsbD0iIzBDRDlEOSIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgPGcgaWQ9InN0YXItaGFsZi1hbHQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ4OS4wMDAwMDAsIDEwMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xOS44NjUyMzQ0LDYuNjk5NjA5MzcgTDE0LjE0NzY1NjMsNS44NjcxODc1IEwxMS41OTI1NzgxLDAuNjk1NzAzMTI1IEMxMS4zNjI4OTA2LDAuMjMzNTkzNzUgMTAuOTE0ODQzOCwwIDEwLjQ2Njc5NjksMCBDMTAuMDIxNDg0NCwwIDkuNTc2NTYyNSwwLjIzMDQ2ODc1IDkuMzQ2MDkzNzUsMC42OTU3MDMxMjUgTDYuNzkwMjM0MzcsNS44NjY3OTY4OCBMMS4wNzIyNjU2Miw2LjY5ODQzNzUgQzAuMDQ2ODc1LDYuODQ2ODc1IC0wLjM2NDA2MjUsOC4xMDgyMDMxMiAwLjM3OTI5Njg3NSw4LjgzMDg1OTM3IEw0LjUxNTYyNSwxMi44NTQyOTY5IEwzLjUzNjcxODc1LDE4LjUzNzEwOTQgQzMuMzk3NjU2MjUsMTkuMzQ4ODI4MSA0LjA0NTcwMzEzLDIwIDQuNzcxNDg0MzgsMjAgQzQuOTY0MDYyNSwyMCA1LjE2MjEwOTM4LDE5Ljk1NDI5NjkgNS4zNTIzNDM3NSwxOS44NTM1MTU2IEwxMC40Njc1NzgxLDE3LjE3MDcwMzEgTDE1LjU4MjQyMTksMTkuODU0Mjk2OSBDMTUuNzcyMjY1NiwxOS45NTM5MDYyIDE1Ljk2OTkyMTksMTkuOTk5MjE4NyAxNi4xNjE3MTg4LDE5Ljk5OTIxODcgQzE2Ljg4ODI4MTMsMTkuOTk5MjE4NyAxNy41Mzc1LDE5LjM1MDM5MDYgMTcuMzk4NDM3NSwxOC41MzgyODEzIEwxNi40MjA3MDMxLDEyLjg1NTA3ODEgTDIwLjU1NzgxMjUsOC44MzI0MjE4NyBDMjEuMzAxNTYyNSw4LjEwOTc2NTYyIDIwLjg5MDYyNSw2Ljg0ODA0Njg3IDE5Ljg2NTIzNDQsNi42OTk2MDkzNyBaIE0xNS4xMDk3NjU2LDExLjUxMjEwOTQgTDE0LjQwMTk1MzEsMTIuMjAwMzkwNiBMMTQuNTY5MTQwNiwxMy4xNzIyNjU2IEwxNS4zMzE2NDA2LDE3LjYwMzkwNjIgTDExLjM0MjE4NzUsMTUuNTEwNTQ2OSBMMTAuNDY3OTY4NywxNS4wNTE5NTMxIEwxMC40NjkxNDA2LDIuNjYxNzE4NzUgTDEyLjQ2MjUsNi42OTY0ODQzNyBMMTIuODk5MjE4Nyw3LjU4MDQ2ODc1IEwxMy44NzYxNzE5LDcuNzIyNjU2MjUgTDE4LjMzODI4MTIsOC4zNzIyNjU2MiBMMTUuMTA5NzY1NiwxMS41MTIxMDk0IEwxNS4xMDk3NjU2LDExLjUxMjEwOTQgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") no-repeat center center; background-size: 18px 18px; } .review-item__name { display: block; font-size: 1.25rem; font-weight: 600; text-align: left; color: #2f3238; } .review-item__text { display: block; width: 100%; max-width: 720px; font-size: 1rem; text-align: left; font-weight: 500; font-style: italic; line-height: 1.375rem; color: var(--color-text); margin-bottom: 12px; } .account-footer { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: center; } .account-footer__center { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: center; } .discord-btn { display: flex; width: 100%; max-width: 587px; padding: 12px 20px; border-radius: 8px; border: 1px solid #5c6bc0; background: transparent; cursor: pointer; flex-flow: row nowrap; justify-content: space-between; align-items: center; text-decoration: none; transition: all 0.3s; margin-bottom: 7px; } @media only screen and (max-width: 480px) { .discord-btn { flex-flow: column nowrap; justify-content: flex-start; align-content: center; } } .discord-btn:hover { text-decoration: none; background: #5c6bc0; border-color: #5c6bc0; } .discord-btn:hover .discord-btn__title { color: #FFFFFF; } .discord-btn:hover .discord-btn__subtitle { color: #FFFFFF; } .discord-btn:hover .discord-btn__logo { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTQ2cHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDE0NiA0MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT5kaXNjb3JkLWJ0bjwvdGl0bGU+CiAgICA8ZyBpZD0iZGVzaWduIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iaG9tZXBhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04NDMuMDAwMDAwLCAtMTQ5MC4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8ZyBpZD0iZGlzY29yZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDI2LjAwMDAwMCwgMTQ3Mi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJkaXNjb3JkLWJ0biIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDE3LjAwMDAwMCwgMTguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIxLjM2LDE2LjgyIEMyMC4yMiwxNi44MiAxOS4zMiwxNy44IDE5LjMyLDE5LjAyIEMxOS4zMiwyMC4yNCAyMC4yNCwyMS4yMiAyMS4zNiwyMS4yMiBDMjIuNSwyMS4yMiAyMy40LDIwLjI0IDIzLjQsMTkuMDIgQzIzLjQsMTcuOCAyMi40OCwxNi44MiAyMS4zNiwxNi44MiBaIE0xNC4wNiwxNi44MiBDMTIuOTIsMTYuODIgMTIuMDIsMTcuOCAxMi4wMiwxOS4wMiBDMTIuMDIsMjAuMjQgMTIuOTQsMjEuMjIgMTQuMDYsMjEuMjIgQzE1LjIsMjEuMjIgMTYuMSwyMC4yNCAxNi4xLDE5LjAyIEMxNi4xMiwxNy44IDE1LjIsMTYuODIgMTQuMDYsMTYuODIgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMxLjA4LDAuMTggTDQuMjgsMC4xOCBDMi4wMiwwLjE4IDAuMTgsMi4wMiAwLjE4LDQuMjggTDAuMTgsMzEuMDggQzAuMTgsMzMuMzQgMi4wMiwzNS4xOCA0LjI4LDM1LjE4IEwyNi45NiwzNS4xOCBMMjUuOSwzMS41MiBMMjguNDYsMzMuODggTDMwLjg4LDM2LjEgTDM1LjIsMzkuODQgTDM1LjIsNC4yOCBDMzUuMTgsMi4wMiAzMy4zNCwwLjE4IDMxLjA4LDAuMTggWiBNMjMuMzYsMjYuMDggQzIzLjM2LDI2LjA4IDIyLjY0LDI1LjIyIDIyLjA0LDI0LjQ4IEMyNC42NiwyMy43NCAyNS42NiwyMi4xMiAyNS42NiwyMi4xMiBDMjQuODQsMjIuNjYgMjQuMDYsMjMuMDQgMjMuMzYsMjMuMyBDMjIuMzYsMjMuNzIgMjEuNCwyMy45OCAyMC40NiwyNC4xNiBDMTguNTQsMjQuNTIgMTYuNzgsMjQuNDIgMTUuMjgsMjQuMTQgQzE0LjE0LDIzLjkyIDEzLjE2LDIzLjYyIDEyLjM0LDIzLjI4IEMxMS44OCwyMy4xIDExLjM4LDIyLjg4IDEwLjg4LDIyLjYgQzEwLjgyLDIyLjU2IDEwLjc2LDIyLjU0IDEwLjcsMjIuNSBDMTAuNjYsMjIuNDggMTAuNjQsMjIuNDYgMTAuNjIsMjIuNDYgQzEwLjI2LDIyLjI2IDEwLjA2LDIyLjEyIDEwLjA2LDIyLjEyIEMxMC4wNiwyMi4xMiAxMS4wMiwyMy43IDEzLjU2LDI0LjQ2IEMxMi45NiwyNS4yMiAxMi4yMiwyNi4xIDEyLjIyLDI2LjEgQzcuOCwyNS45NiA2LjEyLDIzLjA4IDYuMTIsMjMuMDggQzYuMTIsMTYuNyA5LDExLjUyIDksMTEuNTIgQzExLjg4LDkuMzggMTQuNiw5LjQ0IDE0LjYsOS40NCBMMTQuOCw5LjY4IEMxMS4yLDEwLjcgOS41NiwxMi4yOCA5LjU2LDEyLjI4IEM5LjU2LDEyLjI4IDEwLDEyLjA0IDEwLjc0LDExLjcyIEMxMi44OCwxMC43OCAxNC41OCwxMC41NCAxNS4yOCwxMC40NiBDMTUuNCwxMC40NCAxNS41LDEwLjQyIDE1LjYyLDEwLjQyIEMxNi44NCwxMC4yNiAxOC4yMiwxMC4yMiAxOS42NiwxMC4zOCBDMjEuNTYsMTAuNiAyMy42LDExLjE2IDI1LjY4LDEyLjI4IEMyNS42OCwxMi4yOCAyNC4xLDEwLjc4IDIwLjcsOS43NiBMMjAuOTgsOS40NCBDMjAuOTgsOS40NCAyMy43Miw5LjM4IDI2LjU4LDExLjUyIEMyNi41OCwxMS41MiAyOS40NiwxNi43IDI5LjQ2LDIzLjA4IEMyOS40NiwyMy4wNiAyNy43OCwyNS45NCAyMy4zNiwyNi4wOCBMMjMuMzYsMjYuMDggWiBNNTMuNTYsOC43NCBMNDYuOTIsOC43NCBMNDYuOTIsMTYuMiBMNTEuMzQsMjAuMTggTDUxLjM0LDEyLjk0IEw1My43LDEyLjk0IEM1NS4yLDEyLjk0IDU1Ljk0LDEzLjY2IDU1Ljk0LDE0LjgyIEw1NS45NCwyMC4zNiBDNTUuOTQsMjEuNTIgNTUuMjQsMjIuMyA1My43LDIyLjMgTDQ2LjksMjIuMyBMNDYuOSwyNi41MjAzMzA0IEw1My41NCwyNi41MjAzMzA0IEM1Ny4xLDI2LjU0IDYwLjQ0MDE3NzksMjQuNzYgNjAuNDQwMTc3OSwyMC42OCBMNjAuNDQwMTc3OSwxNC43MiBDNjAuNDYsMTAuNTYgNTcuMTIsOC43NCA1My41Niw4Ljc0IEw1My41Niw4Ljc0IFogTTg4LjM2LDIwLjY4IEw4OC4zNiwxNC41NiBDODguMzYsMTIuMzYgOTIuMzIsMTEuODYgOTMuNTIsMTQuMDYgTDk3LjE4LDEyLjU4IEM5NS43NCw5LjQyIDkzLjEyLDguNSA5MC45NCw4LjUgQzg3LjM4LDguNSA4My44NiwxMC41NiA4My44NiwxNC41NiBMODMuODYsMjAuNjggQzgzLjg2LDI0LjcyIDg3LjM4LDI2Ljc0IDkwLjg2LDI2Ljc0IEM5My4xLDI2Ljc0IDk1Ljc4LDI1LjY0IDk3LjI2LDIyLjc2IEw5My4zNCwyMC45NiBDOTIuMzgsMjMuNDIgODguMzYsMjIuODIgODguMzYsMjAuNjggWiBNNzYuMjYsMTUuNCBDNzQuODgsMTUuMSA3My45NiwxNC42IDczLjksMTMuNzQgQzczLjk4LDExLjY4IDc3LjE2LDExLjYgNzkuMDIsMTMuNTggTDgxLjk2LDExLjMyIEM4MC4xMiw5LjA4IDc4LjA0LDguNDggNzUuOSw4LjQ4IEM3Mi42NCw4LjQ4IDY5LjQ4LDEwLjMyIDY5LjQ4LDEzLjggQzY5LjQ4LDE3LjE4IDcyLjA4LDE5IDc0Ljk0LDE5LjQ0IEM3Ni40LDE5LjY0IDc4LjAyLDIwLjIyIDc3Ljk4LDIxLjIyIEM3Ny44NiwyMy4xMiA3My45NCwyMy4wMiA3Mi4xNiwyMC44NiBMNjkuMzIsMjMuNTIgQzcwLjk4LDI1LjY2IDczLjI0LDI2Ljc0IDc1LjM2LDI2Ljc0IEM3OC42MiwyNi43NCA4Mi4yNCwyNC44NiA4Mi4zOCwyMS40MiBDODIuNTgsMTcuMDggNzkuNDIsMTUuOTggNzYuMjYsMTUuNCBaIE02Mi44NiwyNi41IEw2Ny4zNCwyNi41IEw2Ny4zNCw4Ljc0IEw2Mi44Niw4Ljc0IEw2Mi44NiwyNi41IFogTTEzOC40LDguNzQgTDEzMS43Niw4Ljc0IEwxMzEuNzYsMTYuMiBMMTM2LjE4LDIwLjE4IEwxMzYuMTgsMTIuOTQgTDEzOC41NCwxMi45NCBDMTQwLjA0LDEyLjk0IDE0MC43OCwxMy42NiAxNDAuNzgsMTQuODIgTDE0MC43OCwyMC4zNiBDMTQwLjc4LDIxLjUyIDE0MC4wOCwyMi4zIDEzOC41NCwyMi4zIEwxMzEuNzQsMjIuMyBMMTMxLjc0LDI2LjUyMDMzMDQgTDEzOC40LDI2LjUyMDMzMDQgQzE0MS45NiwyNi41NCAxNDUuMywyNC43NiAxNDUuMywyMC42OCBMMTQ1LjMsMTQuNzIgQzE0NS4zLDEwLjU2IDE0MS45Niw4Ljc0IDEzOC40LDguNzQgWiBNMTA1LjgyLDguNSBDMTAyLjE0LDguNSA5OC40OCwxMC41IDk4LjQ4LDE0LjYgTDk4LjQ4LDIwLjY2IEM5OC40OCwyNC43MiAxMDIuMTYsMjYuNzYgMTA1Ljg2LDI2Ljc2IEMxMDkuNTQsMjYuNzYgMTEzLjIsMjQuNzIgMTEzLjIsMjAuNjYgTDExMy4yLDE0LjYgQzExMy4yLDEwLjUyIDEwOS41LDguNSAxMDUuODIsOC41IFogTTEwOC43LDIwLjY2IEMxMDguNywyMS45NCAxMDcuMjYsMjIuNiAxMDUuODQsMjIuNiBDMTA0LjQsMjIuNiAxMDIuOTYsMjEuOTggMTAyLjk2LDIwLjY2IEwxMDIuOTYsMTQuNiBDMTAyLjk2LDEzLjMgMTA0LjM2LDEyLjYgMTA1Ljc2LDEyLjYgQzEwNy4yMiwxMi42IDEwOC43LDEzLjIyIDEwOC43LDE0LjYgTDEwOC43LDIwLjY2IEwxMDguNywyMC42NiBaIE0xMjkuMjgsMTQuNiBDMTI5LjE4LDEwLjQ0IDEyNi4zNCw4Ljc2IDEyMi42OCw4Ljc2IEwxMTUuNTgsOC43NiBMMTE1LjU4LDI2LjUyIEwxMjAuMTIsMjYuNTIgTDEyMC4xMiwyMC44OCBMMTIwLjkyLDIwLjg4IEwxMjUuMDQsMjYuNTIgTDEzMC42NCwyNi41MiBMMTI1LjgsMjAuNDIgQzEyNy45NCwxOS43NCAxMjkuMjgsMTcuODggMTI5LjI4LDE0LjYgWiBNMTIyLjc2LDE3IEwxMjAuMTIsMTcgTDEyMC4xMiwxMi45NCBMMTIyLjc2LDEyLjk0IEMxMjUuNTgsMTIuOTQgMTI1LjU4LDE3IDEyMi43NiwxNyBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+") no-repeat center center; } .discord-btn__left { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .discord-btn__title { display: block; font-size: 1.5rem; line-height: 1; color: #5c6bc0; text-align: left; margin-bottom: 3px; font-weight: 700; } .discord-btn__subtitle { display: block; font-size: 0.875rem; font-weight: 400; text-align: left; color: #2f3238; } @media only screen and (max-width: 480px) { .discord-btn__subtitle { margin-bottom: 12px; } } .discord-btn__caption { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; position: relative; font-size: 0.875rem; font-weight: 400; color: #2f3238; text-align: center; padding-right: 17px; } .discord-btn__caption::before { display: block; position: absolute; width: 10px; height: 10px; background: #4cc249; border-radius: 50%; right: 0; content: ""; } .discord-btn__logo { display: block; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTQ2cHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDE0NiA0MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT5kaXNjb3JkLWJ0bjwvdGl0bGU+CiAgICA8ZyBpZD0iZGVzaWduIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iaG9tZXBhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04NDMuMDAwMDAwLCAtMTQ5MC4wMDAwMDApIiBmaWxsPSIjNUM2QkMwIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8ZyBpZD0iZGlzY29yZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDI2LjAwMDAwMCwgMTQ3Mi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJkaXNjb3JkLWJ0biIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDE3LjAwMDAwMCwgMTguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIxLjM2LDE2LjgyIEMyMC4yMiwxNi44MiAxOS4zMiwxNy44IDE5LjMyLDE5LjAyIEMxOS4zMiwyMC4yNCAyMC4yNCwyMS4yMiAyMS4zNiwyMS4yMiBDMjIuNSwyMS4yMiAyMy40LDIwLjI0IDIzLjQsMTkuMDIgQzIzLjQsMTcuOCAyMi40OCwxNi44MiAyMS4zNiwxNi44MiBaIE0xNC4wNiwxNi44MiBDMTIuOTIsMTYuODIgMTIuMDIsMTcuOCAxMi4wMiwxOS4wMiBDMTIuMDIsMjAuMjQgMTIuOTQsMjEuMjIgMTQuMDYsMjEuMjIgQzE1LjIsMjEuMjIgMTYuMSwyMC4yNCAxNi4xLDE5LjAyIEMxNi4xMiwxNy44IDE1LjIsMTYuODIgMTQuMDYsMTYuODIgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMxLjA4LDAuMTggTDQuMjgsMC4xOCBDMi4wMiwwLjE4IDAuMTgsMi4wMiAwLjE4LDQuMjggTDAuMTgsMzEuMDggQzAuMTgsMzMuMzQgMi4wMiwzNS4xOCA0LjI4LDM1LjE4IEwyNi45NiwzNS4xOCBMMjUuOSwzMS41MiBMMjguNDYsMzMuODggTDMwLjg4LDM2LjEgTDM1LjIsMzkuODQgTDM1LjIsNC4yOCBDMzUuMTgsMi4wMiAzMy4zNCwwLjE4IDMxLjA4LDAuMTggWiBNMjMuMzYsMjYuMDggQzIzLjM2LDI2LjA4IDIyLjY0LDI1LjIyIDIyLjA0LDI0LjQ4IEMyNC42NiwyMy43NCAyNS42NiwyMi4xMiAyNS42NiwyMi4xMiBDMjQuODQsMjIuNjYgMjQuMDYsMjMuMDQgMjMuMzYsMjMuMyBDMjIuMzYsMjMuNzIgMjEuNCwyMy45OCAyMC40NiwyNC4xNiBDMTguNTQsMjQuNTIgMTYuNzgsMjQuNDIgMTUuMjgsMjQuMTQgQzE0LjE0LDIzLjkyIDEzLjE2LDIzLjYyIDEyLjM0LDIzLjI4IEMxMS44OCwyMy4xIDExLjM4LDIyLjg4IDEwLjg4LDIyLjYgQzEwLjgyLDIyLjU2IDEwLjc2LDIyLjU0IDEwLjcsMjIuNSBDMTAuNjYsMjIuNDggMTAuNjQsMjIuNDYgMTAuNjIsMjIuNDYgQzEwLjI2LDIyLjI2IDEwLjA2LDIyLjEyIDEwLjA2LDIyLjEyIEMxMC4wNiwyMi4xMiAxMS4wMiwyMy43IDEzLjU2LDI0LjQ2IEMxMi45NiwyNS4yMiAxMi4yMiwyNi4xIDEyLjIyLDI2LjEgQzcuOCwyNS45NiA2LjEyLDIzLjA4IDYuMTIsMjMuMDggQzYuMTIsMTYuNyA5LDExLjUyIDksMTEuNTIgQzExLjg4LDkuMzggMTQuNiw5LjQ0IDE0LjYsOS40NCBMMTQuOCw5LjY4IEMxMS4yLDEwLjcgOS41NiwxMi4yOCA5LjU2LDEyLjI4IEM5LjU2LDEyLjI4IDEwLDEyLjA0IDEwLjc0LDExLjcyIEMxMi44OCwxMC43OCAxNC41OCwxMC41NCAxNS4yOCwxMC40NiBDMTUuNCwxMC40NCAxNS41LDEwLjQyIDE1LjYyLDEwLjQyIEMxNi44NCwxMC4yNiAxOC4yMiwxMC4yMiAxOS42NiwxMC4zOCBDMjEuNTYsMTAuNiAyMy42LDExLjE2IDI1LjY4LDEyLjI4IEMyNS42OCwxMi4yOCAyNC4xLDEwLjc4IDIwLjcsOS43NiBMMjAuOTgsOS40NCBDMjAuOTgsOS40NCAyMy43Miw5LjM4IDI2LjU4LDExLjUyIEMyNi41OCwxMS41MiAyOS40NiwxNi43IDI5LjQ2LDIzLjA4IEMyOS40NiwyMy4wNiAyNy43OCwyNS45NCAyMy4zNiwyNi4wOCBMMjMuMzYsMjYuMDggWiBNNTMuNTYsOC43NCBMNDYuOTIsOC43NCBMNDYuOTIsMTYuMiBMNTEuMzQsMjAuMTggTDUxLjM0LDEyLjk0IEw1My43LDEyLjk0IEM1NS4yLDEyLjk0IDU1Ljk0LDEzLjY2IDU1Ljk0LDE0LjgyIEw1NS45NCwyMC4zNiBDNTUuOTQsMjEuNTIgNTUuMjQsMjIuMyA1My43LDIyLjMgTDQ2LjksMjIuMyBMNDYuOSwyNi41MjAzMzA0IEw1My41NCwyNi41MjAzMzA0IEM1Ny4xLDI2LjU0IDYwLjQ0MDE3NzksMjQuNzYgNjAuNDQwMTc3OSwyMC42OCBMNjAuNDQwMTc3OSwxNC43MiBDNjAuNDYsMTAuNTYgNTcuMTIsOC43NCA1My41Niw4Ljc0IEw1My41Niw4Ljc0IFogTTg4LjM2LDIwLjY4IEw4OC4zNiwxNC41NiBDODguMzYsMTIuMzYgOTIuMzIsMTEuODYgOTMuNTIsMTQuMDYgTDk3LjE4LDEyLjU4IEM5NS43NCw5LjQyIDkzLjEyLDguNSA5MC45NCw4LjUgQzg3LjM4LDguNSA4My44NiwxMC41NiA4My44NiwxNC41NiBMODMuODYsMjAuNjggQzgzLjg2LDI0LjcyIDg3LjM4LDI2Ljc0IDkwLjg2LDI2Ljc0IEM5My4xLDI2Ljc0IDk1Ljc4LDI1LjY0IDk3LjI2LDIyLjc2IEw5My4zNCwyMC45NiBDOTIuMzgsMjMuNDIgODguMzYsMjIuODIgODguMzYsMjAuNjggWiBNNzYuMjYsMTUuNCBDNzQuODgsMTUuMSA3My45NiwxNC42IDczLjksMTMuNzQgQzczLjk4LDExLjY4IDc3LjE2LDExLjYgNzkuMDIsMTMuNTggTDgxLjk2LDExLjMyIEM4MC4xMiw5LjA4IDc4LjA0LDguNDggNzUuOSw4LjQ4IEM3Mi42NCw4LjQ4IDY5LjQ4LDEwLjMyIDY5LjQ4LDEzLjggQzY5LjQ4LDE3LjE4IDcyLjA4LDE5IDc0Ljk0LDE5LjQ0IEM3Ni40LDE5LjY0IDc4LjAyLDIwLjIyIDc3Ljk4LDIxLjIyIEM3Ny44NiwyMy4xMiA3My45NCwyMy4wMiA3Mi4xNiwyMC44NiBMNjkuMzIsMjMuNTIgQzcwLjk4LDI1LjY2IDczLjI0LDI2Ljc0IDc1LjM2LDI2Ljc0IEM3OC42MiwyNi43NCA4Mi4yNCwyNC44NiA4Mi4zOCwyMS40MiBDODIuNTgsMTcuMDggNzkuNDIsMTUuOTggNzYuMjYsMTUuNCBaIE02Mi44NiwyNi41IEw2Ny4zNCwyNi41IEw2Ny4zNCw4Ljc0IEw2Mi44Niw4Ljc0IEw2Mi44NiwyNi41IFogTTEzOC40LDguNzQgTDEzMS43Niw4Ljc0IEwxMzEuNzYsMTYuMiBMMTM2LjE4LDIwLjE4IEwxMzYuMTgsMTIuOTQgTDEzOC41NCwxMi45NCBDMTQwLjA0LDEyLjk0IDE0MC43OCwxMy42NiAxNDAuNzgsMTQuODIgTDE0MC43OCwyMC4zNiBDMTQwLjc4LDIxLjUyIDE0MC4wOCwyMi4zIDEzOC41NCwyMi4zIEwxMzEuNzQsMjIuMyBMMTMxLjc0LDI2LjUyMDMzMDQgTDEzOC40LDI2LjUyMDMzMDQgQzE0MS45NiwyNi41NCAxNDUuMywyNC43NiAxNDUuMywyMC42OCBMMTQ1LjMsMTQuNzIgQzE0NS4zLDEwLjU2IDE0MS45Niw4Ljc0IDEzOC40LDguNzQgWiBNMTA1LjgyLDguNSBDMTAyLjE0LDguNSA5OC40OCwxMC41IDk4LjQ4LDE0LjYgTDk4LjQ4LDIwLjY2IEM5OC40OCwyNC43MiAxMDIuMTYsMjYuNzYgMTA1Ljg2LDI2Ljc2IEMxMDkuNTQsMjYuNzYgMTEzLjIsMjQuNzIgMTEzLjIsMjAuNjYgTDExMy4yLDE0LjYgQzExMy4yLDEwLjUyIDEwOS41LDguNSAxMDUuODIsOC41IFogTTEwOC43LDIwLjY2IEMxMDguNywyMS45NCAxMDcuMjYsMjIuNiAxMDUuODQsMjIuNiBDMTA0LjQsMjIuNiAxMDIuOTYsMjEuOTggMTAyLjk2LDIwLjY2IEwxMDIuOTYsMTQuNiBDMTAyLjk2LDEzLjMgMTA0LjM2LDEyLjYgMTA1Ljc2LDEyLjYgQzEwNy4yMiwxMi42IDEwOC43LDEzLjIyIDEwOC43LDE0LjYgTDEwOC43LDIwLjY2IEwxMDguNywyMC42NiBaIE0xMjkuMjgsMTQuNiBDMTI5LjE4LDEwLjQ0IDEyNi4zNCw4Ljc2IDEyMi42OCw4Ljc2IEwxMTUuNTgsOC43NiBMMTE1LjU4LDI2LjUyIEwxMjAuMTIsMjYuNTIgTDEyMC4xMiwyMC44OCBMMTIwLjkyLDIwLjg4IEwxMjUuMDQsMjYuNTIgTDEzMC42NCwyNi41MiBMMTI1LjgsMjAuNDIgQzEyNy45NCwxOS43NCAxMjkuMjgsMTcuODggMTI5LjI4LDE0LjYgWiBNMTIyLjc2LDE3IEwxMjAuMTIsMTcgTDEyMC4xMiwxMi45NCBMMTIyLjc2LDEyLjk0IEMxMjUuNTgsMTIuOTQgMTI1LjU4LDE3IDEyMi43NiwxNyBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+") no-repeat center center; background-size: 145px 40px; width: 145px; height: 40px; } .account-section { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding: 40px 0px 70px; } .account-controls { display: flex; width: 100%; flex-flow: row nowrap; justify-content: flex-start; align-items: center; list-style: none; padding: 0; } .account-controls li { display: flex; width: 100%; font-size: 1.5rem; line-height: 1; text-align: center; flex-flow: row; justify-content: center; align-items: center; padding: 22px 30px; background: var(--color-light); color: #2f3238; font-weight: 700; cursor: pointer; transition: all 0.3s; } .account-controls li.--active { background: var(--color-green); color: #FFFFFF; } .account-controls li.--active:hover { background: var(--color-green); color: #FFFFFF; } .account-controls li:first-of-type { border-radius: 15px 0px 0px 15px; } .account-controls li:last-of-type { border-radius: 0px 15px 15px 0px; } .account-controls li:hover { background: #c6dcd7; color: #2f3238; } .account-container { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding: 50px 0px 30px; } .account-container__step { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding-bottom: 40px; } .account-container__step.--second { padding-bottom: 14px; } .account-container__step.--third { padding-bottom: 0; } .account-container__header { display: block; font-size: 1.25rem; font-weight: 700; color: #2f3238; text-align: left; text-transform: uppercase; margin-bottom: 18px; } .account-container__header mark { background: transparent; padding-right: 5px; color: var(--color-secondary); } .account-row__currency { text-transform: uppercase; } @media (max-width: 768px) { .lw-section__box { max-width: none; width: 100%; } .lw-section__box:last-of-type { margin: 0px 13px 26px; } } .lw-section { display: flex; width: 100%; flex-flow: row wrap; justify-content: flex-start; align-items: center; padding-top: 30px; } .lw-section__box { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; max-width: 50%; padding: 28px 30px; border-radius: 15px; background: var(--bg); width: calc(1 / 2 * 100% - 26px); margin: 0px 13px 0px; margin-bottom: 20px; } .lw-section__box.green-bg { background: var(--color-light); } .lw-section__box:last-of-type { margin-left: auto; margin-right: auto; } .lw-section__title { display: block; font-size: 1.25rem; line-height: 1.5rem; color: #2f3238; text-align: left; margin-bottom: 12px; font-weight: 700; } .lw-section__desc { font-size: 1rem; line-height: 1.375rem; text-align: left; color: var(--color-text); font-weight: 500; margin-bottom: 0; } .info-content { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; background: #FFFFFF; padding: 70px 0px; } .info-content__list { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: center; list-style: none; padding: 0; margin: 30px 0px 70px; } .info-content__list li { display: flex; width: 100%; max-width: 790px; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; margin-bottom: 20px; border-radius: 15px; background: var(--bg); padding: 28px 30px; } .info-content__list li:last-of-type { margin-bottom: 0; } .info-content__title { display: block; font-size: 1.25rem; line-height: 1.5rem; color: #2f3238; text-align: left; margin-bottom: 12px; font-weight: 700; } .info-content__desc { font-size: 1rem; line-height: 1.375rem; text-align: left; color: var(--color-text); font-weight: 500; margin-bottom: 0; } .info-content__desc1 { font-size: 1rem; line-height: 1.375rem; text-align: center; color: var(--color-text); font-weight: 500; margin-bottom: 0; } .account-review { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; width: 100%; border-radius: 8px; background: #FFFFFF; box-shadow: 0 6px 24px 0 rgba(120, 141, 162, 0.13); } .account-review__row { display: flex; width: 100%; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; padding: 10px 0px; border-bottom: 1px solid var(--border-light); } .account-review__col { display: flex; flex-flow: column nowrap; width: calc(100% / 3); padding: 10px 26px; } @media only screen and (max-width: 480px) { .account-review__col { width: 100%; } } .account-review__col.--footer-left { width: 70%; padding: 24px 26px; } @media only screen and (max-width: 480px) { .account-review__col.--footer-left { width: 100%; } } .account-review__col.--footer-right { width: calc(100% / 3); padding-top: 12px; padding-bottom: 12px; padding-left: 13px; padding-right: 26px; justify-content: center; align-items: center; } @media only screen and (max-width: 480px) { .account-review__col.--footer-right { width: 100%; padding-right: 13px; } } .account-review__caption { display: block; font-size: 0.875rem; font-weight: 500; text-align: left; color: #434850; margin-bottom: 2px; } .account-review__caption.--info { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; position: relative; padding-left: 21px; } .account-review__caption.--info::before { display: block; position: absolute; width: 12px; height: 12px; content: ""; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTIgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+Y2xvY2s8L3RpdGxlPgogICAgPGcgaWQ9ImRlc2lnbiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9ImhvbWVwYWdlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQ2LjAwMDAwMCwgLTEzODEuMDAwMDAwKSIgZmlsbD0iI0ExQTRBOSIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgPGcgaWQ9InN0ZXAzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjAuMDAwMDAwLCAxMTgxLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2LjAwMDAwMCwgMTk3LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJjbG9jayIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02LDAgQzIuNjg1NDgzODcsMCAwLDIuNjg1NDgzODcgMCw2IEMwLDkuMzE0NTE2MTMgMi42ODU0ODM4NywxMiA2LDEyIEM5LjMxNDUxNjEzLDEyIDEyLDkuMzE0NTE2MTMgMTIsNiBDMTIsMi42ODU0ODM4NyA5LjMxNDUxNjEzLDAgNiwwIFogTTYsMTAuODM4NzA5NyBDMy4zMjY2MTI5LDEwLjgzODcwOTcgMS4xNjEyOTAzMiw4LjY3MzM4NzEgMS4xNjEyOTAzMiw2IEMxLjE2MTI5MDMyLDMuMzI2NjEyOSAzLjMyNjYxMjksMS4xNjEyOTAzMiA2LDEuMTYxMjkwMzIgQzguNjczMzg3MSwxLjE2MTI5MDMyIDEwLjgzODcwOTcsMy4zMjY2MTI5IDEwLjgzODcwOTcsNiBDMTAuODM4NzA5Nyw4LjY3MzM4NzEgOC42NzMzODcxLDEwLjgzODcwOTcgNiwxMC44Mzg3MDk3IFogTTcuNDk1MTYxMjksOC4zMTI5MDMyMyBMNS40NDExMjkwMyw2LjgyMDE2MTI5IEM1LjM2NjEyOTAzLDYuNzY0NTE2MTMgNS4zMjI1ODA2NSw2LjY3NzQxOTM1IDUuMzIyNTgwNjUsNi41ODU0ODM4NyBMNS4zMjI1ODA2NSwyLjYxMjkwMzIzIEM1LjMyMjU4MDY1LDIuNDUzMjI1ODEgNS40NTMyMjU4MSwyLjMyMjU4MDY1IDUuNjEyOTAzMjMsMi4zMjI1ODA2NSBMNi4zODcwOTY3NywyLjMyMjU4MDY1IEM2LjU0Njc3NDE5LDIuMzIyNTgwNjUgNi42Nzc0MTkzNSwyLjQ1MzIyNTgxIDYuNjc3NDE5MzUsMi42MTI5MDMyMyBMNi42Nzc0MTkzNSw2LjA0MTEyOTAzIEw4LjI5MzU0ODM5LDcuMjE2OTM1NDggQzguNDI0MTkzNTUsNy4zMTEyOTAzMiA4LjQ1MDgwNjQ1LDcuNDkyNzQxOTQgOC4zNTY0NTE2MSw3LjYyMzM4NzEgTDcuOTAxNjEyOSw4LjI1IEM3LjgwNzI1ODA2LDguMzc4MjI1ODEgNy42MjU4MDY0NSw4LjQwNzI1ODA2IDcuNDk1MTYxMjksOC4zMTI5MDMyMyBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") no-repeat center center; background-size: 12px 12px; left: 0; } .account-review__value { display: block; font-size: 1rem; font-weight: 600; text-align: left; color: #2f3238; margin-bottom: 2px; } .account-review__value.--blue { color: var(--color-secondary); } .account-review__value.--info { padding-left: 21px; margin-bottom: 0; } .account-review__footer { display: flex; width: 100%; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; } @media only screen and (max-width: 480px) { .account-review__footer { flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } } .account-footer { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: center; } .account-footer__center { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: center; } .discord-btn { display: flex; width: 100%; max-width: 587px; padding: 12px 20px; border-radius: 8px; border: 1px solid #5c6bc0; background: transparent; cursor: pointer; flex-flow: row nowrap; justify-content: space-between; align-items: center; text-decoration: none; transition: all 0.3s; margin-bottom: 7px; } @media only screen and (max-width: 480px) { .discord-btn { flex-flow: column nowrap; justify-content: flex-start; align-content: center; } } .discord-btn:hover { text-decoration: none; background: #5c6bc0; border-color: #5c6bc0; } .discord-btn:hover .discord-btn__title { color: #FFFFFF; } .discord-btn:hover .discord-btn__subtitle { color: #FFFFFF; } .discord-btn:hover .discord-btn__logo { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTQ2cHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDE0NiA0MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT5kaXNjb3JkLWJ0bjwvdGl0bGU+CiAgICA8ZyBpZD0iZGVzaWduIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iaG9tZXBhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04NDMuMDAwMDAwLCAtMTQ5MC4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8ZyBpZD0iZGlzY29yZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDI2LjAwMDAwMCwgMTQ3Mi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJkaXNjb3JkLWJ0biIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDE3LjAwMDAwMCwgMTguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIxLjM2LDE2LjgyIEMyMC4yMiwxNi44MiAxOS4zMiwxNy44IDE5LjMyLDE5LjAyIEMxOS4zMiwyMC4yNCAyMC4yNCwyMS4yMiAyMS4zNiwyMS4yMiBDMjIuNSwyMS4yMiAyMy40LDIwLjI0IDIzLjQsMTkuMDIgQzIzLjQsMTcuOCAyMi40OCwxNi44MiAyMS4zNiwxNi44MiBaIE0xNC4wNiwxNi44MiBDMTIuOTIsMTYuODIgMTIuMDIsMTcuOCAxMi4wMiwxOS4wMiBDMTIuMDIsMjAuMjQgMTIuOTQsMjEuMjIgMTQuMDYsMjEuMjIgQzE1LjIsMjEuMjIgMTYuMSwyMC4yNCAxNi4xLDE5LjAyIEMxNi4xMiwxNy44IDE1LjIsMTYuODIgMTQuMDYsMTYuODIgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMxLjA4LDAuMTggTDQuMjgsMC4xOCBDMi4wMiwwLjE4IDAuMTgsMi4wMiAwLjE4LDQuMjggTDAuMTgsMzEuMDggQzAuMTgsMzMuMzQgMi4wMiwzNS4xOCA0LjI4LDM1LjE4IEwyNi45NiwzNS4xOCBMMjUuOSwzMS41MiBMMjguNDYsMzMuODggTDMwLjg4LDM2LjEgTDM1LjIsMzkuODQgTDM1LjIsNC4yOCBDMzUuMTgsMi4wMiAzMy4zNCwwLjE4IDMxLjA4LDAuMTggWiBNMjMuMzYsMjYuMDggQzIzLjM2LDI2LjA4IDIyLjY0LDI1LjIyIDIyLjA0LDI0LjQ4IEMyNC42NiwyMy43NCAyNS42NiwyMi4xMiAyNS42NiwyMi4xMiBDMjQuODQsMjIuNjYgMjQuMDYsMjMuMDQgMjMuMzYsMjMuMyBDMjIuMzYsMjMuNzIgMjEuNCwyMy45OCAyMC40NiwyNC4xNiBDMTguNTQsMjQuNTIgMTYuNzgsMjQuNDIgMTUuMjgsMjQuMTQgQzE0LjE0LDIzLjkyIDEzLjE2LDIzLjYyIDEyLjM0LDIzLjI4IEMxMS44OCwyMy4xIDExLjM4LDIyLjg4IDEwLjg4LDIyLjYgQzEwLjgyLDIyLjU2IDEwLjc2LDIyLjU0IDEwLjcsMjIuNSBDMTAuNjYsMjIuNDggMTAuNjQsMjIuNDYgMTAuNjIsMjIuNDYgQzEwLjI2LDIyLjI2IDEwLjA2LDIyLjEyIDEwLjA2LDIyLjEyIEMxMC4wNiwyMi4xMiAxMS4wMiwyMy43IDEzLjU2LDI0LjQ2IEMxMi45NiwyNS4yMiAxMi4yMiwyNi4xIDEyLjIyLDI2LjEgQzcuOCwyNS45NiA2LjEyLDIzLjA4IDYuMTIsMjMuMDggQzYuMTIsMTYuNyA5LDExLjUyIDksMTEuNTIgQzExLjg4LDkuMzggMTQuNiw5LjQ0IDE0LjYsOS40NCBMMTQuOCw5LjY4IEMxMS4yLDEwLjcgOS41NiwxMi4yOCA5LjU2LDEyLjI4IEM5LjU2LDEyLjI4IDEwLDEyLjA0IDEwLjc0LDExLjcyIEMxMi44OCwxMC43OCAxNC41OCwxMC41NCAxNS4yOCwxMC40NiBDMTUuNCwxMC40NCAxNS41LDEwLjQyIDE1LjYyLDEwLjQyIEMxNi44NCwxMC4yNiAxOC4yMiwxMC4yMiAxOS42NiwxMC4zOCBDMjEuNTYsMTAuNiAyMy42LDExLjE2IDI1LjY4LDEyLjI4IEMyNS42OCwxMi4yOCAyNC4xLDEwLjc4IDIwLjcsOS43NiBMMjAuOTgsOS40NCBDMjAuOTgsOS40NCAyMy43Miw5LjM4IDI2LjU4LDExLjUyIEMyNi41OCwxMS41MiAyOS40NiwxNi43IDI5LjQ2LDIzLjA4IEMyOS40NiwyMy4wNiAyNy43OCwyNS45NCAyMy4zNiwyNi4wOCBMMjMuMzYsMjYuMDggWiBNNTMuNTYsOC43NCBMNDYuOTIsOC43NCBMNDYuOTIsMTYuMiBMNTEuMzQsMjAuMTggTDUxLjM0LDEyLjk0IEw1My43LDEyLjk0IEM1NS4yLDEyLjk0IDU1Ljk0LDEzLjY2IDU1Ljk0LDE0LjgyIEw1NS45NCwyMC4zNiBDNTUuOTQsMjEuNTIgNTUuMjQsMjIuMyA1My43LDIyLjMgTDQ2LjksMjIuMyBMNDYuOSwyNi41MjAzMzA0IEw1My41NCwyNi41MjAzMzA0IEM1Ny4xLDI2LjU0IDYwLjQ0MDE3NzksMjQuNzYgNjAuNDQwMTc3OSwyMC42OCBMNjAuNDQwMTc3OSwxNC43MiBDNjAuNDYsMTAuNTYgNTcuMTIsOC43NCA1My41Niw4Ljc0IEw1My41Niw4Ljc0IFogTTg4LjM2LDIwLjY4IEw4OC4zNiwxNC41NiBDODguMzYsMTIuMzYgOTIuMzIsMTEuODYgOTMuNTIsMTQuMDYgTDk3LjE4LDEyLjU4IEM5NS43NCw5LjQyIDkzLjEyLDguNSA5MC45NCw4LjUgQzg3LjM4LDguNSA4My44NiwxMC41NiA4My44NiwxNC41NiBMODMuODYsMjAuNjggQzgzLjg2LDI0LjcyIDg3LjM4LDI2Ljc0IDkwLjg2LDI2Ljc0IEM5My4xLDI2Ljc0IDk1Ljc4LDI1LjY0IDk3LjI2LDIyLjc2IEw5My4zNCwyMC45NiBDOTIuMzgsMjMuNDIgODguMzYsMjIuODIgODguMzYsMjAuNjggWiBNNzYuMjYsMTUuNCBDNzQuODgsMTUuMSA3My45NiwxNC42IDczLjksMTMuNzQgQzczLjk4LDExLjY4IDc3LjE2LDExLjYgNzkuMDIsMTMuNTggTDgxLjk2LDExLjMyIEM4MC4xMiw5LjA4IDc4LjA0LDguNDggNzUuOSw4LjQ4IEM3Mi42NCw4LjQ4IDY5LjQ4LDEwLjMyIDY5LjQ4LDEzLjggQzY5LjQ4LDE3LjE4IDcyLjA4LDE5IDc0Ljk0LDE5LjQ0IEM3Ni40LDE5LjY0IDc4LjAyLDIwLjIyIDc3Ljk4LDIxLjIyIEM3Ny44NiwyMy4xMiA3My45NCwyMy4wMiA3Mi4xNiwyMC44NiBMNjkuMzIsMjMuNTIgQzcwLjk4LDI1LjY2IDczLjI0LDI2Ljc0IDc1LjM2LDI2Ljc0IEM3OC42MiwyNi43NCA4Mi4yNCwyNC44NiA4Mi4zOCwyMS40MiBDODIuNTgsMTcuMDggNzkuNDIsMTUuOTggNzYuMjYsMTUuNCBaIE02Mi44NiwyNi41IEw2Ny4zNCwyNi41IEw2Ny4zNCw4Ljc0IEw2Mi44Niw4Ljc0IEw2Mi44NiwyNi41IFogTTEzOC40LDguNzQgTDEzMS43Niw4Ljc0IEwxMzEuNzYsMTYuMiBMMTM2LjE4LDIwLjE4IEwxMzYuMTgsMTIuOTQgTDEzOC41NCwxMi45NCBDMTQwLjA0LDEyLjk0IDE0MC43OCwxMy42NiAxNDAuNzgsMTQuODIgTDE0MC43OCwyMC4zNiBDMTQwLjc4LDIxLjUyIDE0MC4wOCwyMi4zIDEzOC41NCwyMi4zIEwxMzEuNzQsMjIuMyBMMTMxLjc0LDI2LjUyMDMzMDQgTDEzOC40LDI2LjUyMDMzMDQgQzE0MS45NiwyNi41NCAxNDUuMywyNC43NiAxNDUuMywyMC42OCBMMTQ1LjMsMTQuNzIgQzE0NS4zLDEwLjU2IDE0MS45Niw4Ljc0IDEzOC40LDguNzQgWiBNMTA1LjgyLDguNSBDMTAyLjE0LDguNSA5OC40OCwxMC41IDk4LjQ4LDE0LjYgTDk4LjQ4LDIwLjY2IEM5OC40OCwyNC43MiAxMDIuMTYsMjYuNzYgMTA1Ljg2LDI2Ljc2IEMxMDkuNTQsMjYuNzYgMTEzLjIsMjQuNzIgMTEzLjIsMjAuNjYgTDExMy4yLDE0LjYgQzExMy4yLDEwLjUyIDEwOS41LDguNSAxMDUuODIsOC41IFogTTEwOC43LDIwLjY2IEMxMDguNywyMS45NCAxMDcuMjYsMjIuNiAxMDUuODQsMjIuNiBDMTA0LjQsMjIuNiAxMDIuOTYsMjEuOTggMTAyLjk2LDIwLjY2IEwxMDIuOTYsMTQuNiBDMTAyLjk2LDEzLjMgMTA0LjM2LDEyLjYgMTA1Ljc2LDEyLjYgQzEwNy4yMiwxMi42IDEwOC43LDEzLjIyIDEwOC43LDE0LjYgTDEwOC43LDIwLjY2IEwxMDguNywyMC42NiBaIE0xMjkuMjgsMTQuNiBDMTI5LjE4LDEwLjQ0IDEyNi4zNCw4Ljc2IDEyMi42OCw4Ljc2IEwxMTUuNTgsOC43NiBMMTE1LjU4LDI2LjUyIEwxMjAuMTIsMjYuNTIgTDEyMC4xMiwyMC44OCBMMTIwLjkyLDIwLjg4IEwxMjUuMDQsMjYuNTIgTDEzMC42NCwyNi41MiBMMTI1LjgsMjAuNDIgQzEyNy45NCwxOS43NCAxMjkuMjgsMTcuODggMTI5LjI4LDE0LjYgWiBNMTIyLjc2LDE3IEwxMjAuMTIsMTcgTDEyMC4xMiwxMi45NCBMMTIyLjc2LDEyLjk0IEMxMjUuNTgsMTIuOTQgMTI1LjU4LDE3IDEyMi43NiwxNyBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+") no-repeat center center; } .discord-btn__left { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .discord-btn__title { display: block; font-size: 1.5rem; line-height: 1; color: #5c6bc0; text-align: left; margin-bottom: 3px; font-weight: 700; } .discord-btn__subtitle { display: block; font-size: 0.875rem; font-weight: 400; text-align: left; color: #2f3238; } @media only screen and (max-width: 480px) { .discord-btn__subtitle { margin-bottom: 12px; } } .discord-btn__caption { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; position: relative; font-size: 0.875rem; font-weight: 400; color: #2f3238; text-align: center; padding-right: 17px; } .discord-btn__caption::before { display: block; position: absolute; width: 10px; height: 10px; background: #4cc249; border-radius: 50%; right: 0; content: ""; } .discord-btn__logo { display: block; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTQ2cHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDE0NiA0MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT5kaXNjb3JkLWJ0bjwvdGl0bGU+CiAgICA8ZyBpZD0iZGVzaWduIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iaG9tZXBhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04NDMuMDAwMDAwLCAtMTQ5MC4wMDAwMDApIiBmaWxsPSIjNUM2QkMwIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8ZyBpZD0iZGlzY29yZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDI2LjAwMDAwMCwgMTQ3Mi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJkaXNjb3JkLWJ0biIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDE3LjAwMDAwMCwgMTguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIxLjM2LDE2LjgyIEMyMC4yMiwxNi44MiAxOS4zMiwxNy44IDE5LjMyLDE5LjAyIEMxOS4zMiwyMC4yNCAyMC4yNCwyMS4yMiAyMS4zNiwyMS4yMiBDMjIuNSwyMS4yMiAyMy40LDIwLjI0IDIzLjQsMTkuMDIgQzIzLjQsMTcuOCAyMi40OCwxNi44MiAyMS4zNiwxNi44MiBaIE0xNC4wNiwxNi44MiBDMTIuOTIsMTYuODIgMTIuMDIsMTcuOCAxMi4wMiwxOS4wMiBDMTIuMDIsMjAuMjQgMTIuOTQsMjEuMjIgMTQuMDYsMjEuMjIgQzE1LjIsMjEuMjIgMTYuMSwyMC4yNCAxNi4xLDE5LjAyIEMxNi4xMiwxNy44IDE1LjIsMTYuODIgMTQuMDYsMTYuODIgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMxLjA4LDAuMTggTDQuMjgsMC4xOCBDMi4wMiwwLjE4IDAuMTgsMi4wMiAwLjE4LDQuMjggTDAuMTgsMzEuMDggQzAuMTgsMzMuMzQgMi4wMiwzNS4xOCA0LjI4LDM1LjE4IEwyNi45NiwzNS4xOCBMMjUuOSwzMS41MiBMMjguNDYsMzMuODggTDMwLjg4LDM2LjEgTDM1LjIsMzkuODQgTDM1LjIsNC4yOCBDMzUuMTgsMi4wMiAzMy4zNCwwLjE4IDMxLjA4LDAuMTggWiBNMjMuMzYsMjYuMDggQzIzLjM2LDI2LjA4IDIyLjY0LDI1LjIyIDIyLjA0LDI0LjQ4IEMyNC42NiwyMy43NCAyNS42NiwyMi4xMiAyNS42NiwyMi4xMiBDMjQuODQsMjIuNjYgMjQuMDYsMjMuMDQgMjMuMzYsMjMuMyBDMjIuMzYsMjMuNzIgMjEuNCwyMy45OCAyMC40NiwyNC4xNiBDMTguNTQsMjQuNTIgMTYuNzgsMjQuNDIgMTUuMjgsMjQuMTQgQzE0LjE0LDIzLjkyIDEzLjE2LDIzLjYyIDEyLjM0LDIzLjI4IEMxMS44OCwyMy4xIDExLjM4LDIyLjg4IDEwLjg4LDIyLjYgQzEwLjgyLDIyLjU2IDEwLjc2LDIyLjU0IDEwLjcsMjIuNSBDMTAuNjYsMjIuNDggMTAuNjQsMjIuNDYgMTAuNjIsMjIuNDYgQzEwLjI2LDIyLjI2IDEwLjA2LDIyLjEyIDEwLjA2LDIyLjEyIEMxMC4wNiwyMi4xMiAxMS4wMiwyMy43IDEzLjU2LDI0LjQ2IEMxMi45NiwyNS4yMiAxMi4yMiwyNi4xIDEyLjIyLDI2LjEgQzcuOCwyNS45NiA2LjEyLDIzLjA4IDYuMTIsMjMuMDggQzYuMTIsMTYuNyA5LDExLjUyIDksMTEuNTIgQzExLjg4LDkuMzggMTQuNiw5LjQ0IDE0LjYsOS40NCBMMTQuOCw5LjY4IEMxMS4yLDEwLjcgOS41NiwxMi4yOCA5LjU2LDEyLjI4IEM5LjU2LDEyLjI4IDEwLDEyLjA0IDEwLjc0LDExLjcyIEMxMi44OCwxMC43OCAxNC41OCwxMC41NCAxNS4yOCwxMC40NiBDMTUuNCwxMC40NCAxNS41LDEwLjQyIDE1LjYyLDEwLjQyIEMxNi44NCwxMC4yNiAxOC4yMiwxMC4yMiAxOS42NiwxMC4zOCBDMjEuNTYsMTAuNiAyMy42LDExLjE2IDI1LjY4LDEyLjI4IEMyNS42OCwxMi4yOCAyNC4xLDEwLjc4IDIwLjcsOS43NiBMMjAuOTgsOS40NCBDMjAuOTgsOS40NCAyMy43Miw5LjM4IDI2LjU4LDExLjUyIEMyNi41OCwxMS41MiAyOS40NiwxNi43IDI5LjQ2LDIzLjA4IEMyOS40NiwyMy4wNiAyNy43OCwyNS45NCAyMy4zNiwyNi4wOCBMMjMuMzYsMjYuMDggWiBNNTMuNTYsOC43NCBMNDYuOTIsOC43NCBMNDYuOTIsMTYuMiBMNTEuMzQsMjAuMTggTDUxLjM0LDEyLjk0IEw1My43LDEyLjk0IEM1NS4yLDEyLjk0IDU1Ljk0LDEzLjY2IDU1Ljk0LDE0LjgyIEw1NS45NCwyMC4zNiBDNTUuOTQsMjEuNTIgNTUuMjQsMjIuMyA1My43LDIyLjMgTDQ2LjksMjIuMyBMNDYuOSwyNi41MjAzMzA0IEw1My41NCwyNi41MjAzMzA0IEM1Ny4xLDI2LjU0IDYwLjQ0MDE3NzksMjQuNzYgNjAuNDQwMTc3OSwyMC42OCBMNjAuNDQwMTc3OSwxNC43MiBDNjAuNDYsMTAuNTYgNTcuMTIsOC43NCA1My41Niw4Ljc0IEw1My41Niw4Ljc0IFogTTg4LjM2LDIwLjY4IEw4OC4zNiwxNC41NiBDODguMzYsMTIuMzYgOTIuMzIsMTEuODYgOTMuNTIsMTQuMDYgTDk3LjE4LDEyLjU4IEM5NS43NCw5LjQyIDkzLjEyLDguNSA5MC45NCw4LjUgQzg3LjM4LDguNSA4My44NiwxMC41NiA4My44NiwxNC41NiBMODMuODYsMjAuNjggQzgzLjg2LDI0LjcyIDg3LjM4LDI2Ljc0IDkwLjg2LDI2Ljc0IEM5My4xLDI2Ljc0IDk1Ljc4LDI1LjY0IDk3LjI2LDIyLjc2IEw5My4zNCwyMC45NiBDOTIuMzgsMjMuNDIgODguMzYsMjIuODIgODguMzYsMjAuNjggWiBNNzYuMjYsMTUuNCBDNzQuODgsMTUuMSA3My45NiwxNC42IDczLjksMTMuNzQgQzczLjk4LDExLjY4IDc3LjE2LDExLjYgNzkuMDIsMTMuNTggTDgxLjk2LDExLjMyIEM4MC4xMiw5LjA4IDc4LjA0LDguNDggNzUuOSw4LjQ4IEM3Mi42NCw4LjQ4IDY5LjQ4LDEwLjMyIDY5LjQ4LDEzLjggQzY5LjQ4LDE3LjE4IDcyLjA4LDE5IDc0Ljk0LDE5LjQ0IEM3Ni40LDE5LjY0IDc4LjAyLDIwLjIyIDc3Ljk4LDIxLjIyIEM3Ny44NiwyMy4xMiA3My45NCwyMy4wMiA3Mi4xNiwyMC44NiBMNjkuMzIsMjMuNTIgQzcwLjk4LDI1LjY2IDczLjI0LDI2Ljc0IDc1LjM2LDI2Ljc0IEM3OC42MiwyNi43NCA4Mi4yNCwyNC44NiA4Mi4zOCwyMS40MiBDODIuNTgsMTcuMDggNzkuNDIsMTUuOTggNzYuMjYsMTUuNCBaIE02Mi44NiwyNi41IEw2Ny4zNCwyNi41IEw2Ny4zNCw4Ljc0IEw2Mi44Niw4Ljc0IEw2Mi44NiwyNi41IFogTTEzOC40LDguNzQgTDEzMS43Niw4Ljc0IEwxMzEuNzYsMTYuMiBMMTM2LjE4LDIwLjE4IEwxMzYuMTgsMTIuOTQgTDEzOC41NCwxMi45NCBDMTQwLjA0LDEyLjk0IDE0MC43OCwxMy42NiAxNDAuNzgsMTQuODIgTDE0MC43OCwyMC4zNiBDMTQwLjc4LDIxLjUyIDE0MC4wOCwyMi4zIDEzOC41NCwyMi4zIEwxMzEuNzQsMjIuMyBMMTMxLjc0LDI2LjUyMDMzMDQgTDEzOC40LDI2LjUyMDMzMDQgQzE0MS45NiwyNi41NCAxNDUuMywyNC43NiAxNDUuMywyMC42OCBMMTQ1LjMsMTQuNzIgQzE0NS4zLDEwLjU2IDE0MS45Niw4Ljc0IDEzOC40LDguNzQgWiBNMTA1LjgyLDguNSBDMTAyLjE0LDguNSA5OC40OCwxMC41IDk4LjQ4LDE0LjYgTDk4LjQ4LDIwLjY2IEM5OC40OCwyNC43MiAxMDIuMTYsMjYuNzYgMTA1Ljg2LDI2Ljc2IEMxMDkuNTQsMjYuNzYgMTEzLjIsMjQuNzIgMTEzLjIsMjAuNjYgTDExMy4yLDE0LjYgQzExMy4yLDEwLjUyIDEwOS41LDguNSAxMDUuODIsOC41IFogTTEwOC43LDIwLjY2IEMxMDguNywyMS45NCAxMDcuMjYsMjIuNiAxMDUuODQsMjIuNiBDMTA0LjQsMjIuNiAxMDIuOTYsMjEuOTggMTAyLjk2LDIwLjY2IEwxMDIuOTYsMTQuNiBDMTAyLjk2LDEzLjMgMTA0LjM2LDEyLjYgMTA1Ljc2LDEyLjYgQzEwNy4yMiwxMi42IDEwOC43LDEzLjIyIDEwOC43LDE0LjYgTDEwOC43LDIwLjY2IEwxMDguNywyMC42NiBaIE0xMjkuMjgsMTQuNiBDMTI5LjE4LDEwLjQ0IDEyNi4zNCw4Ljc2IDEyMi42OCw4Ljc2IEwxMTUuNTgsOC43NiBMMTE1LjU4LDI2LjUyIEwxMjAuMTIsMjYuNTIgTDEyMC4xMiwyMC44OCBMMTIwLjkyLDIwLjg4IEwxMjUuMDQsMjYuNTIgTDEzMC42NCwyNi41MiBMMTI1LjgsMjAuNDIgQzEyNy45NCwxOS43NCAxMjkuMjgsMTcuODggMTI5LjI4LDE0LjYgWiBNMTIyLjc2LDE3IEwxMjAuMTIsMTcgTDEyMC4xMiwxMi45NCBMMTIyLjc2LDEyLjk0IEMxMjUuNTgsMTIuOTQgMTI1LjU4LDE3IDEyMi43NiwxNyBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+") no-repeat center center; background-size: 145px 40px; width: 145px; height: 40px; } .account-section { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding: 40px 0px 70px; } .account-controls { display: flex; width: 100%; flex-flow: row nowrap; justify-content: flex-start; align-items: center; list-style: none; padding: 0; } .account-controls li { display: flex; width: 100%; font-size: 1.5rem; line-height: 1; text-align: center; flex-flow: row; justify-content: center; align-items: center; padding: 22px 30px; background: var(--color-light); color: #2f3238; font-weight: 700; cursor: pointer; transition: all 0.3s; } .account-controls li.--active { background: var(--color-green); color: #FFFFFF; } .account-controls li.--active:hover { background: var(--color-green); color: #FFFFFF; } .account-controls li:first-of-type { border-radius: 15px 0px 0px 15px; } .account-controls li:last-of-type { border-radius: 0px 15px 15px 0px; } .account-controls li:hover { background: #c6dcd7; color: #2f3238; } .account-container { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding: 50px 0px 30px; } .account-container__step { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding-bottom: 40px; } .account-container__step.--second { padding-bottom: 14px; } .account-container__step.--third { padding-bottom: 0; } .account-container__header { display: block; font-size: 1.25rem; font-weight: 700; color: #2f3238; text-align: left; text-transform: uppercase; margin-bottom: 18px; } .account-container__header mark { background: transparent; padding-right: 5px; color: var(--color-secondary); } .account-row { display: flex; width: 100%; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; list-style: none; padding: 0; margin: 0; gap: 16px; } @media only screen and (max-width: 480px) { .account-row { flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; width: 100%; margin: 0; } } .account-row__item { display: flex; width: calc(1 / 3 * 75% - 26px); flex-flow: row nowrap; justify-content: space-between; align-items: center; border-radius: 8px; box-shadow: 0 6px 24px 0 rgba(120, 141, 162, 0.13); background: #FFFFFF; margin: 0 13px 26px; padding: 13px 22px; border: 3px solid transparent; cursor: pointer; transition: all 0.3s; } @media only screen and (max-width: 480px) { .account-row { padding: 0; display: flex; flex-direction: column; gap: 10px; } .account-row__item { width: 100%; margin: 0; min-width: 100%; height: 72px; padding: 0 16px; border-radius: 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); border-width: 2px; display: flex; align-items: center; justify-content: space-between; touch-action: manipulation; -webkit-tap-highlight-color: rgba(79, 203, 205, 0.3); user-select: none; -webkit-user-select: none; cursor: pointer; box-sizing: border-box; } .account-row__item:active { transform: scale(0.99); background-color: #fafafa; } .account-row__item.--active { box-shadow: 0 0 0 2px var(--color-secondary); background-color: #f8fffe; border-color: var(--color-secondary); } .account-row__left { padding-right: 12px; pointer-events: none; display: flex; flex-direction: column; justify-content: center; gap: 4px; flex: 1; min-width: 0; } .account-row__right { pointer-events: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; flex-shrink: 0; } .account-row__box { display: flex; align-items: center; gap: 8px; margin-bottom: 0; pointer-events: none; flex-wrap: nowrap; } .account-row__be { font-size: 1.1rem; font-weight: 700; margin-bottom: 0; pointer-events: none; line-height: 1; white-space: nowrap; } .account-row__badge { font-size: 0.55rem; font-weight: 600; padding: 3px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.2px; pointer-events: none; line-height: 1; white-space: nowrap; flex-shrink: 0; } .account-row__caption { font-size: 0.7rem; color: #999; margin-top: 0; pointer-events: none; line-height: 1; } .account-row__price { font-size: 1.05rem; font-weight: 700; color: #2f3238; pointer-events: none; line-height: 1; white-space: nowrap; } .account-row__oldprice { font-size: 0.65rem; color: #bbb; margin-top: 0; pointer-events: none; line-height: 1; white-space: nowrap; } } .account-row__item:hover { /* Use older rgba syntax for maximum editor/parser compatibility */ box-shadow: 0 2px 11px 5px rgba(120, 122, 124, 0.2); } .account-row__item.--active { border-color: var(--color-secondary); } .account-row__lef { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .account-row__right { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-end; } .account-row__box { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; } .account-row__be { display: block; font-size: 1.25rem; font-weight: 600; text-align: left; color: #2f3238; } .account-row__badge { display: inline-block; font-size: 0.75rem; font-weight: 400; text-align: center; color: #FFFFFF; padding: 2px 8px; border-radius: 45px; margin-left: 8px; white-space: nowrap; flex-shrink: 0; } .account-row__badge.--sale { background-color: #FF8749; } .account-row__badge.--popular { background-color: #49b8ff; } .account-row__caption { display: block; font-size: 0.875rem; color: var(--color-text); font-weight: 400; text-align: left; } .account-row__price { display: block; font-size: 1.25rem; font-weight: 600; text-align: left; color: #2f3238; } .account-row__oldprice { display: block; font-size: 0.875rem; color: var(--color-text); font-weight: 400; text-align: left; text-decoration: line-through; } .lw-section { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: center; padding-top: 30px; } .lw-section__box { display: flex; width: 100%; max-width: 790px; padding: 28px 30px; border-radius: 15px; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .lw-section__box.custom-margin-last { margin-right: 13px; margin-left: 13px; } .lw-section__title { display: block; font-size: 1.25rem; line-height: 1.5rem; color: #2f3238; text-align: left; margin-bottom: 12px; font-weight: 700; } .lw-section__desc { font-size: 1rem; line-height: 1.375rem; text-align: left; color: var(--color-text); font-weight: 500; margin-bottom: 0; } .info-content { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; background: #FFFFFF; padding: 70px 0px; } .info-content__list { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: center; list-style: none; padding: 0; margin: 30px 0px 70px; } .info-content__list li { display: flex; width: 100%; max-width: 790px; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; margin-bottom: 20px; border-radius: 15px; background: var(--bg); padding: 28px 30px; } .info-content__list li:last-of-type { margin-bottom: 0; } .info-content__title { display: block; font-size: 1.25rem; line-height: 1.5rem; color: #2f3238; text-align: left; margin-bottom: 12px; font-weight: 700; } .info-content__desc { font-size: 1rem; line-height: 1.375rem; text-align: left; color: var(--color-text); font-weight: 500; margin-bottom: 0; } .container.--row { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } .container { width: 100%; flex: 0 0 auto; position: relative; margin: 0 auto; padding: 0 5%; max-width: 100%; } @media (min-width: 1200px) { .container { padding: 0 3%; } } .--main-screen { padding: 0 2.8%; } .--flex-center { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; flex: 1 1 auto; } .--top-center { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; } .--w-860 { max-width: 860px; padding: 0 15px; } .--row { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } @media (min-width: 768px) and (max-width: 1023px) { .container { max-width: 100%; padding: 0 15px; } .account-row__item { width: calc(1 / 2 * 100% - 26px); } } @media (min-width:481px) and (max-width: 767px) { .container { max-width: 100%; padding: 0 15px; } } @media only screen and (max-width: 480px) { .container { max-width: 100%; padding: 0 15px; } } #blazor-error-ui { display: none; } .header__dropdown ul { display: none; } .header__dropdown ul li { margin: 0; } .header__dropdown { position: relative; } /* Create invisible bridge to prevent dropdown from closing */ .header__dropdown::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 4px; background: transparent; } .header__dropdown:hover::after { display: block; } .header__dropdown:hover ul { display: block; position: absolute; padding-left: 0; z-index: 500; background: #ffffff; width: 180px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); border: 1px solid #e4e7f2; padding: 8px 0; margin-top: 0; top: 100%; left: 0; } /* Keep dropdown open when hovering over it */ .header__dropdown ul:hover { display: block; } .header__dropdown ul li { margin: 0; padding: 0; } .header__dropdown ul li a { display: block; padding: 10px 20px; color: #2f3238; font-size: 0.95rem; font-weight: 500; transition: all 0.2s ease; text-decoration: none; border-bottom: none; position: relative; } .header__dropdown ul li a::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--color-primary); transition: width 0.2s ease; } .header__dropdown ul li a:hover { background: linear-gradient(135deg, rgba(255, 135, 73, 0.08) 0%, rgba(255, 135, 73, 0.04) 100%); color: var(--color-primary); text-decoration: none; border-bottom: none; padding-left: 20px; } .header__dropdown ul li a:hover::before { width: 3px; } .header__dropdown ul li a.active { background: linear-gradient(135deg, rgba(255, 135, 73, 0.1) 0%, rgba(255, 135, 73, 0.05) 100%); color: var(--color-primary); border-bottom: none; } .header-currency-picker .header__dropdown:hover { padding-bottom: 8px; } /* Right-align currency picker dropdown */ .header-currency-picker .header__dropdown { position: relative; } .header-currency-picker .header__dropdown ul { right: 0; left: auto; } /* Bridge for currency picker */ .header-currency-picker .header__dropdown::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 4px; background: transparent; } /* Prevent dropdown from showing when closing */ .header-currency-picker .header__dropdown.dropdown-closing:hover ul { display: none; } .header__dropdown .nav-with-arrow { cursor: pointer; color: #2f3238; font-size: 1rem; font-weight: 500; transition: all 0.2s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; position: relative; } .header__dropdown:hover .nav-with-arrow { color: var(--color-primary); text-decoration: none; } .header__dropdown .nav-with-arrow::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--color-primary); transition: width 0.3s ease; } .header__dropdown:hover .nav-with-arrow::after { width: 100%; } .currency-picker { display: inline-block; } .currency-picker__trigger { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; border: 2px solid #e4e7f2; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); box-shadow: 0 4px 12px rgba(21, 32, 55, 0.15), 0 0 0 0 rgba(255, 135, 73, 0); cursor: pointer; transition: all 0.3s ease; font-weight: 600; position: relative; } .currency-picker__trigger::before { content: ''; position: absolute; inset: -2px; border-radius: 999px; padding: 2px; background: linear-gradient(135deg, var(--color-primary), #FF6B2B); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; } .currency-picker__trigger:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(255, 135, 73, 0.25); } .header__dropdown:hover .currency-picker__trigger { border-color: #d0d6ea; box-shadow: 0 12px 24px rgba(21, 32, 55, 0.18); transform: translateY(-1px); } .currency-picker__symbol { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(12, 217, 217, 0.08); /* Light Cyan Tint */ border: 1px solid rgba(12, 217, 217, 0.2); font-size: 0.85rem; font-weight: 700; color: #0891b2; /* Darker Cyan for Light Mode readability */ transition: all 0.3s ease; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary) 0%, #FF6B2B 100%); font-size: 0.8rem; font-weight: 700; color: #ffffff; box-shadow: 0 2px 8px rgba(255, 135, 73, 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; flex-shrink: 0; } .currency-picker__chevron { width: 12px; height: 12px; color: #6b7086; transition: transform 0.2s ease; } .header__dropdown:hover .currency-picker__chevron { transform: rotate(180deg); } .currency-picker__label { font-size: 0.875rem; font-weight: 600; color: #2f3238; white-space: nowrap; flex: 1; text-align: left; } .currency-picker__list { width: 200px; padding: 0 0 4px 0; position: absolute; top: calc(100% + 4px); right: 0; left: auto; background: #fff; border-radius: 10px; box-shadow: 0 16px 30px rgba(18, 22, 33, 0.18); display: none; z-index: 1000; } .header__dropdown:hover .currency-picker__list, .currency-picker__list:hover { display: block; } .currency-picker__option { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-weight: 600; font-size: 0.875rem; color: #2f3238; cursor: pointer; transition: all 0.2s ease; position: relative; margin: 0 !important; } .currency-picker__option:hover { background: #f5f7fc; } .currency-picker__option.active { color: var(--color-primary); margin-top: 0 !important; margin-bottom: 0 !important; } .currency-picker__option.active .currency-picker__symbol { background: linear-gradient(135deg, var(--color-primary) 0%, #FF6B2B 100%); color: #ffffff; box-shadow: 0 2px 8px rgba(255, 135, 73, 0.3); } .currency-picker__check { margin-left: auto; color: var(--color-primary); opacity: 0; transform: scale(0.8); transition: all 0.2s ease; } .currency-picker__option.active .currency-picker__check { opacity: 1; transform: scale(1); } .header__menu.--column .currency-picker__trigger { width: 100%; justify-content: flex-start; } .header__menu.--column .currency-picker__list { width: 100%; box-shadow: none; border-radius: 10px; } .button { color: #fff; text-align: center; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 11px 16px; font-size: rem(14); line-height: 1.3; border-radius: 8px; text-transform: uppercase; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .button:hover { text-decoration: none; } .button:focus { outline: none; box-shadow: none; } .button:disabled, .button.disabled { cursor: not-allowed !important; opacity: 0.7; } .button.--big { padding: 22px 40px; font-size: rem(15); font-weight: 600; } .button.--w-100 { padding: 22px 40px; font-size: rem(15); font-weight: 600; width: 100%; } .button.--primary { background-color: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); box-shadow: 0 4px 26px 0 rgba(255, 135, 73, 0.5); } .button.--primary:hover { background-color: #FF7933; border-color: #FF7933; color: var(--white-color); box-shadow: 0 2px 14px 0 rgba(255, 135, 73, 0.8); } .button.--primary:focus { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--white-color); } .button.--gray { background-color: var(--color-gray); color: var(--color-white); border-color: var(--color-gray); box-shadow: 0 4px 26px 0 #40404080; } .button.--gray:hover { background-color: var(--color-gray); border-color: var(--color-gray); color: var(--white-color); box-shadow: 0 4px 26px 0 #40404080; } .button.--gray:focus { background-color: var(--color-gray); border-color: var(--color-gray); color: var(--white-color); } .footer { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding-top: 40px; background: #232525; } .footer__container { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; width: 100%; flex: 0 0 auto; position: relative; margin: 0 auto; padding: 0px 68px; max-width: 1920px; } @media (min-width: 769px) and (max-width: 1200px) { .footer__container { max-width: 100%; padding: 0px 15px; } } @media (min-width: 481px) and (max-width: 768px) { .footer__container { max-width: 100%; padding: 0px 15px; flex-flow: column nowrap; } } @media only screen and (max-width: 480px) { .footer__container { max-width: 100%; padding: 0px 15px; flex-flow: column nowrap; } } .footer__container.--pb-40 { padding-bottom: 40px; } .footer__container.--sp-bt { flex-flow: row wrap; justify-content: space-between; align-items: center; } @media only screen and (max-width: 480px) { .footer__container.--sp-bt { justify-content: flex-start; flex-flow: column nowrap; align-items: center; } } .footer__col { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; max-width: 320px; padding-right: 15px; } @media only screen and (max-width: 480px) { .footer__col { justify-content: flex-start; align-items: center; max-width: 100%; padding-right: 0px; } } @media (min-width: 481px) and (max-width: 768px) { .footer__col { justify-content: flex-start; align-items: center; max-width: 100%; padding-right: 0px; } } .footer__col.--center { max-width: 100%; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; padding-right: 15px; padding-left: 60px; } @media only screen and (max-width: 480px) { .footer__col.--center { justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; display: none; padding-left: 0; padding-right: 0; } } @media (min-width: 481px) and (max-width: 768px) { .footer__col.--center { display: none; } } .footer__col.--right { justify-content: flex-start; align-items: flex-end; padding-right: 0px; max-width: 320px; } @media only screen and (max-width: 480px) { .footer__col.--right { width: 100%; max-width: 100%; padding-top: 30px; justify-content: flex-start; align-items: center; padding-right: 0px; } } @media (min-width: 481px) and (max-width: 768px) { .footer__col.--right { width: 100%; max-width: 100%; padding-top: 30px; justify-content: flex-start; align-items: center; padding-right: 0px; } } .footer__logo { display: block; height: 50px; flex-shrink: 0; margin-bottom: 30px; } .footer__text { display: block; text-align: left; font-size: 16px; line-height: 22px; color: #929393; } @media only screen and (max-width: 480px) { .footer__text { text-align: center; } } @media (min-width: 481px) and (max-width: 768px) { .footer__text { text-align: center; max-width: 500px; width: 100%; } } .footer__menu-block { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding-right: 15px; } @media only screen and (max-width: 480px) { .footer__menu-block { padding-right: 0px; } } .footer__menu-header { display: flex; position: relative; font-size: 16px; font-weight: 600; color: #ffffff; text-align: left; margin-bottom: 14px; } .footer__menu { display: flex; width: auto; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; list-style: none; padding-left: 0; } @media only screen and (max-width: 480px) { .footer__menu { width: 100%; display: none; } .footer__menu.--show { display: flex; } } .footer__menu li { display: block; margin-bottom: 4px; } .footer__menu li:last-of-type { margin-bottom: 0; } .footer__menu li a { font-size: 16px; color: #CDCDCD; text-decoration: none; transition: all 0.3s; } .footer__menu li a:hover { color: #0CD9D9; text-decoration: none; } .footer__cards { display: block; height: 24px; flex-shrink: 0; } .footer-discord { display: flex; width: 100%; max-width: 290px; flex-flow: column nowrap; justify-content: flex-start; align-items: center; background: #333535; border-radius: 5px; padding: 15px 24px; } @media only screen and (max-width: 480px) { .footer-discord { width: 100%; max-width: 100%; } } @media (min-width: 481px) and (max-width: 768px) { .footer-discord { width: 100%; max-width: 500px; } } .footer-discord__title { display: block; font-size: 20px; font-weight: 600; color: #ffffff; text-align: center; margin-bottom: 1px; } .footer-discord__subtitle { display: block; font-size: 16px; color: #ffffff; text-align: center; margin-bottom: 15px; } .footer-discord__btn { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: #ffffff; width: 100%; border-radius: 5px; background: #5C6BC0; padding: 13px 20px; text-align: center; transition: all 0.3s; border: 1px solid #5C6BC0; text-decoration: none; } .footer-discord__btn:hover { background-color: #8A99F2; border-color: #8A99F2; color: #ffffff; } .footer-discord__btn:focus { background-color: #5C6BC0; border-color: #5C6BC0; color: #ffffff; } .footer-discord__logo { display: block; width: 120px; height: auto; flex-shrink: 0; object-fit: contain; } .footer-discord__text { display: block; font-size: 16px; font-weight: 600; color: #ffffff; white-space: nowrap; } .footer-discord__online { display: flex; position: relative; flex-flow: row nowrap; justify-content: center; align-items: center; font-size: 12px; color: #F3F3F3; margin-top: 12px; text-align: center; padding-right: 20px; } .footer-discord__online::before { display: block; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #14A016; right: 0; content: ""; } .footer-payop { display: flex; width: auto; flex-flow: row nowrap; justify-content: flex-start; align-items: center; margin: 20px 0px; } @media only screen and (max-width: 480px) { .footer-payop { flex-flow: column nowrap; justify-content: flex-start; align-items: center; margin: 30px 0px 20px; } } @media (min-width: 481px) and (max-width: 768px) { .footer-payop { flex-flow: column nowrap; justify-content: flex-start; align-items: center; margin: 30px 0px 20px; } } .footer-payop__text { display: block; text-align: right; font-size: 14px; color: #F3F3F3; line-height: 18px; padding-right: 22px; } @media only screen and (max-width: 480px) { .footer-payop__text { text-align: center; padding-right: 0; padding-bottom: 14px; } } @media (min-width: 481px) and (max-width: 768px) { .footer-payop__text { text-align: center; padding-right: 0; padding-bottom: 14px; } } .footer-payop__logo { display: block; height: 26px; flex-shrink: 0; } .footer-social { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding-top: 30px; } @media only screen and (max-width: 480px) { .footer-social { justify-content: flex-start; align-items: center; } } @media (min-width: 481px) and (max-width: 768px) { .footer-social { justify-content: flex-start; align-items: center; } } @media (max-width: 768px) { .info-screen__block { max-width: none; width: 100%; } .info-screen__block:last-of-type { margin: 0px 13px 26px; } .account-row__item { width: 100%; } } .footer-social__header { display: block; font-size: 16px; font-weight: 600; color: #ffffff; text-align: left; margin-bottom: 14px; } .footer-social__list { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; padding: 0; list-style: none; } .footer-social__list li { display: block; margin-right: 15px; } .footer-social__list li:last-of-type { margin-right: 0; } .footer-social__list li a { display: block; opacity: 0.6; transition: all 0.3s; } .footer-social__list li a:hover { opacity: 1; } .footer-social__icon { display: block; width: 24px; height: 24px; -o-object-fit: contain; object-fit: contain; flex-shrink: 0; } .footer-bottom { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; background: #1A1A1A; padding: 20px 0px; } @media only screen and (max-width: 480px) { .footer-bottom { justify-content: flex-start; align-items: center; } } .footer-bottom__copyright { display: block; font-size: 14px; text-align: left; color: #A4A4A4; } .footer-bottom__box { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; } @media only screen and (max-width: 480px) { .footer-bottom__box { justify-content: flex-start; flex-flow: column nowrap; align-items: center; padding-top: 20px; } } .footer-bottom__box a { display: block; color: #C7C7C7; text-decoration: none; font-size: 14px; transition: all 0.3s; margin-right: 30px; } @media only screen and (max-width: 480px) { .footer-bottom__box a { margin-right: 0; margin-bottom: 10px; } .footer-bottom__box a:last-of-type { margin-right: 0; margin-bottom: 0; } } .footer-bottom__box a:last-of-type { margin-right: 0; } .footer-bottom__box a:hover { color: #0CD9D9; text-decoration: none; } .blog-page { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding: 30px 0px 70px; background: var(--bg); } .blog-page__container { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: center; padding: 0 20px; } .blog-page__articles { display: flex; width: 100%; max-width: 1100px; flex-flow: column nowrap; justify-content: flex-start; align-items: stretch; gap: 40px; } .blog-page__article { display: grid; grid-template-columns: 400px 1fr; gap: 30px; width: 100%; background: var(--bg-secondary); backdrop-filter: blur(10px); border: 1px solid var(--border-color); border-radius: 20px; padding: 25px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); } [data-theme="dark"] .blog-page__article { background: rgba(30, 41, 59, 0.4); border-color: rgba(255, 255, 255, 0.05); } .blog-page__article:hover { transform: translateY(-8px) scale(1.01); border-color: var(--color-primary); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 20px rgba(255, 135, 73, 0.2); } [data-theme="dark"] .blog-page__article:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 243, 255, 0.2); } .blog-page__article::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 0%, rgba(255, 135, 73, 0.05) 100%); opacity: 0; transition: opacity 0.4s; pointer-events: none; } .blog-page__article:hover::after { opacity: 1; } .blog-page__fullimg-link { width: 100%; border-radius: 12px; overflow: hidden; position: relative; } .blog-page__cover { display: block; width: 100%; height: 280px; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .blog-page__article:hover .blog-page__cover { transform: scale(1.1); } .blog-page__article-content { display: flex; flex-direction: column; justify-content: center; } .blog-page__title { display: block; font-family: 'Rajdhani', sans-serif; font-size: 2rem; line-height: 2.4rem; text-align: left; color: var(--color-header); font-weight: 700; margin-bottom: 15px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.3s; } .blog-page__title:hover { color: var(--color-primary); } .blog-page__announce { display: block; font-size: 1rem; line-height: 1.6rem; color: var(--color-text); margin-bottom: 25px; opacity: 0.8; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-page__date { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--color-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } .blog-page__date::before { content: ''; width: 12px; height: 2px; background: var(--color-primary); } @media only screen and (max-width: 900px) { .blog-page__article { grid-template-columns: 1fr; } .blog-page__cover { height: 300px; } } @media only screen and (max-width: 480px) { .blog-page__cover { height: 200px; } } .article-page { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding: 0px 0px 70px; } .article-page__container { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: center; } .article-page__footer { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .article-page__author { display: block; font-size: 0.875rem; color: var(--color-header); font-weight: 600; margin-bottom: 30px; } .article-page__article { display: flex; width: 100%; max-width: 1400px; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .article-page__articles { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; flex: 2 1 auto; padding-right: 80px; } .article-page__side { display: flex; flex: 1 0 400px; } .article-page__article { display: flex; width: 100%; max-width: 1400px; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; margin-bottom: 50px; } .article-page__article:last-of-type { margin-bottom: 0; } .article-page__fullimg-link { width: 100%; margin-bottom: 30px; } .article-page__cover { display: block; width: 100%; height: 400px; -o-object-fit: cover; object-fit: cover; flex-shrink: 0; border-radius: 15px; margin-bottom: 30px; } @media only screen and (max-width: 480px) { .article-page__cover { height: 260px; } } .article-page__img { display: block; width: 100%; height: 400px; -o-object-fit: cover; object-fit: cover; flex-shrink: 0; border-radius: 15px; margin-bottom: 30px; } @media only screen and (max-width: 480px) { .article-page__img { height: 260px; } } .article-page__title { display: block; font-size: 1.5rem; line-height: 2.125rem; text-align: left; color: var(--color-header); font-weight: 600; margin-bottom: 12px; text-decoration: none; } .article-page__title:hover { text-decoration: none; color: var(--color-primary); } .article-page__header { display: block; font-size: 1.5rem; line-height: 2.125rem; text-align: left; color: var(--color-header); font-weight: 600; margin-bottom: 30px; } .article-page__text { font-size: 1.25rem; line-height: 1.75rem; text-align: left; margin-bottom: 30px; } @media only screen and (max-width: 480px) { .article-page__text { font-size: 1rem; line-height: 1.375rem; } } .article-page__date { display: block; font-size: 0.875rem; color: var(--color-text); font-weight: 600; text-align: left; } .sidenav-container { height: 100%; width: 100%; } .sidenav { height: 100%; width: 300px; background-color: #d6d6d6; z-index: 10000; position: fixed; top: 0; left: 0; box-sizing: border-box; padding: 30px; } .sidenav__close { display: block; position: absolute; right: 20px; top: 20px; width: 30px; height: 30px; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTggMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+Q29tYmluZWQgU2hhcGU8L3RpdGxlPgogICAgPGcgaWQ9ImRlc2lnbiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9ImdhbWVwYWdlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTI5NC4wMDAwMDAsIC0yNzQuMDAwMDAwKSIgZmlsbD0iIzJGMzIzOCI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMzAzLDI3MSBDMTMwMy41NTIyOCwyNzEgMTMwNCwyNzEuNDQ3NzE1IDEzMDQsMjcyIEwxMzA0LDI4MiBMMTMxNCwyODIgQzEzMTQuNTUyMjgsMjgyIDEzMTUsMjgyLjQ0NzcxNSAxMzE1LDI4MyBDMTMxNSwyODMuNTUyMjg1IDEzMTQuNTUyMjgsMjg0IDEzMTQsMjg0IEwxMzAzLjk5OSwyODQgTDEzMDQsMjk0IEMxMzA0LDI5NC41NTIyODUgMTMwMy41NTIyOCwyOTUgMTMwMywyOTUgQzEzMDIuNDQ3NzIsMjk1IDEzMDIsMjk0LjU1MjI4NSAxMzAyLDI5NCBMMTMwMS45OTksMjg0IEwxMjkyLDI4NCBDMTI5MS40NDc3MiwyODQgMTI5MSwyODMuNTUyMjg1IDEyOTEsMjgzIEMxMjkxLDI4Mi40NDc3MTUgMTI5MS40NDc3MiwyODIgMTI5MiwyODIgTDEzMDIsMjgyIEwxMzAyLDI3MiBDMTMwMiwyNzEuNDQ3NzE1IDEzMDIuNDQ3NzIsMjcxIDEzMDMsMjcxIFoiIGlkPSJDb21iaW5lZC1TaGFwZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMwMy4wMDAwMDAsIDI4My4wMDAwMDApIHJvdGF0ZSgtMzE1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMzAzLjAwMDAwMCwgLTI4My4wMDAwMDApICI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+") no-repeat center center; background-size: 28px 28px; } .sidenav span { position: absolute; right: 20px; top: 20px; } .slide-side-enter-active, .slide-side-leave-active { transition: all 0.3s ease-out; } .slide-side-enter, .slide-side-leave-to { transform: translateX(-100%); } .admin-menu ul { padding: 0; list-style: none; } .admin-menu ul li { display: inline-block; padding-left: 5px; } .admin-menu { text-align: right; } .faqs-section { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding: 0px 0px 70px; } .faqs-section__column { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: center; } .faqs-section__box { display: flex; width: 100%; max-width: 790px; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; margin-bottom: 20px; border-radius: 15px; background: var(--bg-secondary); padding: 28px 30px; } .faqs-section__box:last-of-type { margin-bottom: 0; } .faqs-section__title { display: block; font-size: 1.25rem; line-height: 1.5rem; color: var(--color-header); text-align: left; margin-bottom: 12px; font-weight: 700; } .faqs-section__desc { font-size: 1rem; line-height: 1.375rem; text-align: left; color: var(--color-text); font-weight: 500; margin-bottom: 0; } .contact-page { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding: 0 0 70px; } .contact-page__inform { font-size: 0.75rem; line-height: 0.875rem; text-align: center; margin-bottom: 0; padding-top: 12px; } .contact-page__container { display: flex; width: 100%; max-width: 790px; padding: 32px; border-radius: 8px; background: var(--color-white); box-shadow: 0 6px 24px 0 rgba(120, 141, 162, 0.13); } .contact-page__container form { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .contact-page__row { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; width: 100%; margin: 0; padding-bottom: 20px; gap: 16px; } @media only screen and (max-width: 480px) { .contact-page__row { flex-flow: column nowrap; align-items: flex-start; width: 100%; margin: 0; } } .contact-page__footer { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: center; } .contact-page__box { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; width: 100%; padding-bottom: 20px; } .contact-page__box.--big { justify-content: flex-start; align-items: stretch; } .contact-page__box.--w-50 { width: calc(1 / 2 * 100% - 26px); margin: 0 13px 0px; padding-bottom: 0px; } @media only screen and (max-width: 480px) { .contact-page__box.--w-50 { width: 100%; margin: 0; padding-bottom: 20px; } .contact-page__box.--w-50:last-of-type { padding-bottom: 0px; } } .contact-page__input { display: inline-block; width: 100%; height: 42px; border-radius: 8px; background: var(--color-white); text-align: left; font-size: 1rem; line-height: 1; padding: 5px 12px; color: var(--color-header); box-shadow: none; border: 1px solid #c1e1e0; } .contact-page__input:focus { outline: none; box-shadow: none; border-color: #95b1b0; } .contact-page__input::-moz-placeholder { color: rgba(47, 50, 56, 0.2); } .contact-page__input:-ms-input-placeholder { color: rgba(47, 50, 56, 0.2); } .contact-page__input::placeholder { color: rgba(47, 50, 56, 0.2); } .contact-page__input.--small-center { text-align: center; } .contact-page__input.--wrow-100 { border-radius: 8px 0px 0px 8px; } .contact-page__input.--message { resize: none; height: 180px; } .contact-page__label { display: block; font-size: 0.75rem; font-weight: 600; text-align: left; margin-bottom: 2px; color: #434850; } .cancel-payment { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding: 70px 0 70px; } .cancel-payment__box { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; } .cancel-payment__icon { display: block; flex-shrink: 0; height: 80px; margin-bottom: 40px; } .cancel-payment__header { display: block; font-size: 2.25rem; line-height: 2.875rem; text-align: center; color: var(--color-header); margin-bottom: 20px; font-weight: 700; } .cancel-payment__text { width: 100%; max-width: 790px; font-size: 1rem; line-height: 1.375rem; text-align: center; margin-bottom: 30px; } .cancel-payment__inform { display: block; font-size: 0.875rem; line-height: 1.125rem; text-align: left; padding: 22px; background: #f5f5f5; border-radius: 15px; width: 100%; max-width: 600px; } .complete-payment { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding: 70px 0 70px; } .complete-payment__box { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; } .complete-payment__icon { display: block; flex-shrink: 0; height: 80px; margin-bottom: 40px; } .complete-payment__header { display: block; font-size: 2.25rem; line-height: 2.875rem; text-align: center; color: var(--color-header); margin-bottom: 20px; font-weight: 700; } .complete-payment__text { width: 100%; max-width: 790px; font-size: 1rem; line-height: 1.375rem; text-align: center; margin-bottom: 30px; } .complete-payment__inform { display: block; font-size: 0.875rem; line-height: 1.125rem; text-align: left; padding: 22px; background: #f5f5f5; border-radius: 15px; width: 100%; max-width: 600px; } /* Modern Thank You Page Styles */ .thank-you-section { padding: 60px 0 80px; min-height: 60vh; } /* Modern Thank You Page Styles */ .thank-you-section { padding: 60px 0 80px; min-height: 60vh; display: flex; justify-content: center; align-items: flex-start; width: 100%; } .thank-you-section .container { max-width: 900px !important; width: 100% !important; margin: 0 auto !important; padding: 0 20px !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .thank-you-loading { text-align: center; padding: 60px 20px; } .thank-you-spinner { width: 50px; height: 50px; border: 4px solid #f3f3f3; border-top: 4px solid var(--color-primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .thank-you-container { max-width: 800px; margin: 0 auto; animation: fadeInUp 0.6s ease-out; width: 100%; display: flex; flex-direction: column; align-items: center; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .thank-you-header { text-align: center; margin-bottom: 40px; } .thank-you-icon-wrapper { margin-bottom: 24px; display: inline-block; } .thank-you-checkmark { width: 80px; height: 80px; border-radius: 50%; display: block; stroke-width: 3; stroke: #22c55e; stroke-miterlimit: 10; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); animation: scale 0.3s ease-in-out 0.9s both, pulse 2s ease-in-out 1.2s infinite; } @keyframes scale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } .thank-you-checkmark-circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 3; stroke-miterlimit: 10; stroke: #22c55e; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; } .thank-you-checkmark-check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; } @keyframes stroke { 100% { stroke-dashoffset: 0; } } .thank-you-title { font-size: 2.5rem; font-weight: 700; color: var(--color-header); margin-bottom: 12px; line-height: 1.2; } .thank-you-subtitle { font-size: 1.125rem; color: var(--color-text); margin: 0; } .account-details-card, .order-summary-card, .next-steps-card, .order-not-found-card { background: var(--bg-secondary); border-radius: 16px; padding: 32px; margin-bottom: 24px; box-shadow: var(--shadow-md); border: 1px solid var(--border-color); transition: box-shadow 0.3s ease; width: 100%; max-width: 800px; margin-left: auto !important; margin-right: auto !important; display: block; } .account-details-card:hover, .order-summary-card:hover, .next-steps-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .account-details-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 2px solid var(--border-color); } .account-details-title { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; font-weight: 600; color: var(--color-header); margin: 0; } .account-icon { color: var(--color-primary); } .account-status-badge { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: white; padding: 6px 16px; border-radius: 20px; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .account-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; margin-bottom: 24px; } .account-detail-item { display: flex; flex-direction: column; gap: 8px; } .account-detail-label { font-size: 0.875rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; } .account-detail-value { font-size: 1.125rem; font-weight: 500; color: var(--color-header); } .account-detail-value-with-copy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .account-credential { background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 16px; font-family: 'Consolas', 'Monaco', monospace; font-size: 1rem; color: var(--color-header); flex: 1; min-width: 200px; word-break: break-all; } .copy-btn, .show-password-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.875rem; font-weight: 500; color: var(--color-header); cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .copy-btn:hover, .show-password-btn:hover { background: var(--color-primary); color: white; border-color: var(--color-primary); transform: translateY(-1px); } .copy-btn svg, .show-password-btn svg { flex-shrink: 0; } .copy-btn-text { font-size: 0.875rem; } .account-security-note { display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); font-size: 0.875rem; line-height: 1.5; } .account-security-note.--info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; } [data-theme="dark"] .account-security-note.--info { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); color: #93c5fd; } .account-security-note.--error { background: #fef2f2; border-color: #fecaca; color: #991b1b; } [data-theme="dark"] .account-security-note.--error { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); color: #fca5a5; } .security-icon { flex-shrink: 0; margin-top: 2px; color: #3b82f6; } .order-summary-title, .next-steps-title { font-size: 1.25rem; font-weight: 600; color: var(--color-header); margin: 0 0 20px 0; } .order-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } .order-summary-item { display: flex; flex-direction: column; gap: 6px; } .order-summary-label { font-size: 0.875rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; } .order-summary-value { font-size: 1rem; font-weight: 500; color: var(--color-header); } .order-id { font-family: 'Consolas', 'Monaco', monospace; font-size: 0.875rem; } .order-total { font-size: 1.25rem; font-weight: 700; color: var(--color-primary); } .next-steps-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .next-steps-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 1rem; color: var(--color-text); line-height: 1.6; } .step-icon { flex-shrink: 0; margin-top: 4px; color: #22c55e; } .thank-you-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 32px; } .btn-primary, .btn-secondary, .btn-discord { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 8px; font-size: 1rem; font-weight: 600; text-decoration: none; transition: all 0.2s ease; border: 2px solid transparent; } .btn-primary { background: var(--color-primary); color: white; } .btn-primary:hover { background: #e6763a; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 135, 73, 0.3); } .btn-secondary { background: var(--bg-tertiary); color: var(--color-header); border-color: var(--border-color); } .btn-secondary:hover { background: #f9fafb; border-color: var(--color-primary); color: var(--color-primary); } .btn-discord { background: #5865f2; color: white; } .btn-discord:hover { background: #4752c4; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3); } .btn-discord svg { width: 20px; height: 20px; } .order-not-found-card { text-align: center; } .order-not-found-card p { margin: 0 0 12px 0; color: var(--color-text); line-height: 1.6; } .order-not-found-card a { color: var(--color-primary); font-weight: 600; } /* Mobile Responsive */ @media (max-width: 768px) { .thank-you-section { padding: 40px 0 60px; } .thank-you-title { font-size: 2rem; } .thank-you-subtitle { font-size: 1rem; } .account-details-card, .order-summary-card, .next-steps-card { padding: 24px 20px; } .account-details-grid { grid-template-columns: 1fr; gap: 20px; } .order-summary-grid { grid-template-columns: 1fr; } .account-detail-value-with-copy { flex-direction: column; align-items: stretch; } .copy-btn, .show-password-btn { width: 100%; justify-content: center; } .thank-you-actions { flex-direction: column; } .btn-primary, .btn-secondary, .btn-discord { width: 100%; } } .order-form__totalbox.has-discount span.order-form__total.old-price { text-decoration: line-through; font-size: 18px; } .swiper-container { position: relative; width: 100%; overflow: hidden; } /* Specific styling for testimonials swiper */ .swiper-container.what-people-say-swiper { width: 100% !important; margin: 0 auto !important; padding: 0 80px !important; text-align: center !important; display: flex !important; justify-content: center !important; align-items: center !important; } .swiper-container .swiper-wrapper { position: relative !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } .swiper-container.what-people-say-swiper .swiper-wrapper { text-align: center !important; justify-content: center !important; align-items: center !important; } .swiper-slide.--flex-center { display: flex !important; width: 100% !important; flex-flow: column nowrap !important; justify-content: center !important; align-items: center !important; padding: 20px 0 !important; text-align: center !important; } /* Force center alignment for all content in testimonial slides */ .what-people-say-swiper .swiper-slide.--flex-center { text-align: center !important; } .what-people-say-swiper .swiper-slide.--flex-center * { text-align: center !important; } .swiper-pagination.--center { display: flex; position: relative; width: 100%; justify-content: center; align-items: center; flex-flow: row nowrap; padding: 10px 30px; z-index: 30; bottom: 0px; } .review-screen { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: center; padding: 70px 0px; background: var(--bg-secondary); } /* Reviews Call-to-Action Section */ .reviews-cta { display: flex; width: 100%; flex-flow: column nowrap; justify-content: center; align-items: center; padding: 100px 0px; background: var(--bg-secondary); text-align: center; } .reviews-cta .container { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .reviews-cta .container.--top-center { text-align: center !important; align-items: center !important; } .reviews-cta .page-header { text-align: center !important; } .reviews-cta .page-subheader { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } .reviews-cta__button-wrapper { display: flex; justify-content: center; align-items: center; margin-top: 40px; width: 100%; } .reviews-cta .button { min-width: 200px; text-decoration: none; } .reviews-cta .button:hover { transform: translateY(-2px); box-shadow: 0 6px 30px 0 rgba(255, 135, 73, 0.6); } @media only screen and (max-width: 768px) { .reviews-cta { padding: 70px 0px; } .reviews-cta__button-wrapper { margin-top: 30px; } .reviews-cta .button { width: 100%; max-width: 300px; } } .review-screen__block { display: flex !important; flex-flow: column nowrap !important; width: 100% !important; max-width: 900px !important; margin: 0 auto !important; justify-content: center !important; align-items: center !important; text-align: center !important; } /* Override global p text-align: left for testimonials - VERY SPECIFIC */ .review-screen .review-screen__block p.review-screen__text, .review-screen .review-screen__block span.review-screen__name, .review-screen__block p, .review-screen__block span, .what-people-say-swiper p, .what-people-say-swiper span, .swiper-slide.--flex-center p, .swiper-slide.--flex-center span, .swiper-container.what-people-say-swiper p, .swiper-container.what-people-say-swiper span { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } .review-screen__text { display: block !important; width: 100% !important; max-width: 900px !important; font-size: 1rem !important; text-align: center !important; font-weight: 500 !important; font-style: italic !important; line-height: 1.375rem !important; color: var(--color-text) !important; margin: 0 auto 12px auto !important; padding: 0 20px !important; box-sizing: border-box !important; } .review-screen__name { display: block !important; font-size: 1.25rem !important; font-weight: 600 !important; text-align: center !important; color: var(--color-header) !important; margin: 0 auto !important; width: 100% !important; } .swiper-pagination.--center span.swiper-pagination-bullet-active { background: var(--color-secondary); opacity: 1; } .swiper-button-next.arrow--next, .swiper-button-prev.arrow--prev { color: #696969; opacity: 0.5; transition: all 0.3s; z-index: 20; } .swiper-button-next.arrow--next:hover, .swiper-button-prev.arrow--prev:hover { opacity: 1; } /* Ensure testimonials are fully visible during fade transition */ .what-people-say-swiper .swiper-slide { opacity: 0 !important; transition: opacity 0.4s ease-in-out; } .what-people-say-swiper .swiper-slide-active { opacity: 1 !important; } /* Prevent text cutoff and ensure center alignment */ .what-people-say-swiper .review-screen__block { padding: 0 20px; box-sizing: border-box; text-align: center !important; } .what-people-say-swiper .review-screen__block p, .what-people-say-swiper .review-screen__block span { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* Center the swiper container within the section */ .review-screen .container { display: flex !important; flex-flow: column nowrap !important; align-items: center !important; text-align: center !important; } .review-screen .swiper-container.what-people-say-swiper { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; display: flex !important; justify-content: center !important; align-items: center !important; text-align: center !important; } .review-screen .swiper-container.what-people-say-swiper .swiper-wrapper { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } .mainscreen .swiper-pagination.--left.swiper-pagination-bullets { display: none; } .error-page { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding: 0 0px 70px; min-height: 80vh; } .error-page__box { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; } .text-static-page { display: flex; width: 100%; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; padding: 0 0 70px; } [data-toggle="collapse"] { cursor: pointer; text-decoration: underline; position: relative; width: 100%; } ul.header__menu.header-links svg.nav-angle { width: 10px; margin-left: 2px; } .header__menu.--column svg.nav-angle { width: 22px; margin-left: 8px; float: right; vertical-align: top; height: 30px; margin-top: -5px; color: #2f3238; } .header__menu.--column .nav-with-arrow { font-size: 1.5rem; line-height: 1.5rem; font-weight: 600; } .header__menu.--column .header__dropdown:hover ul { position: relative; margin-top: 20px; } ul.header__menu.header-links .nav-with-arrow { vertical-align: middle; } .header__menu.--column li { width: 100%; } .header__menu.--column .header__dropdown .nav-with-arrow { position: relative; top: 0; left: 0; } .header__menu.--column .header-currency-picker .header__dropdown:hover { text-decoration: none; width: 100%; display: inline-block; } .form-control { display: block; width: 100%; height: calc(1.5em + .75rem + 5px); padding: .375rem .75rem; font-size: 1rem; font-weight: 700; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #C1E1E0; border-radius: .50rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out } @media (prefers-reduced-motion:reduce) { .form-control { transition: none } } .form-control::-ms-expand { background-color: transparent; border: 0 } .form-control:focus { color: #495057; background-color: #fff; border-color: #80bdff; outline: 0; box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25) } .form-control::-webkit-input-placeholder { color: #6c757d; opacity: 1 } .form-control::-moz-placeholder { color: #6c757d; opacity: 1 } .form-control:-ms-input-placeholder { color: #6c757d; opacity: 1 } .form-control::-ms-input-placeholder { color: #6c757d; opacity: 1 } .form-control::placeholder { color: #6c757d; opacity: 1 } .form-control:disabled, .form-control[readonly] { background-color: #e9ecef; opacity: 1 } select.form-control:focus::-ms-value { color: #495057; background-color: #fff } .form-control-file, .form-control-range { display: block; width: 100% } .col-form-label { padding-top: calc(.375rem + 1px); padding-bottom: calc(.375rem + 1px); margin-bottom: 0; font-size: inherit; line-height: 1.5 } .col-form-label-lg { padding-top: calc(.5rem + 1px); padding-bottom: calc(.5rem + 1px); font-size: 1.25rem; line-height: 1.5 } .col-form-label-sm { padding-top: calc(.25rem + 1px); padding-bottom: calc(.25rem + 1px); font-size: .875rem; line-height: 1.5 } .form-control-plaintext { display: block; width: 100%; padding-top: .375rem; padding-bottom: .375rem; margin-bottom: 0; line-height: 1.5; color: #212529; background-color: transparent; border: solid transparent; border-width: 1px 0 } .form-control-plaintext.form-control-lg, .form-control-plaintext.form-control-sm { padding-right: 0; padding-left: 0 } .form-control-sm { height: calc(1.5em + .5rem + 2px); padding: .25rem .5rem; font-size: .875rem; line-height: 1.5; border-radius: .2rem } .form-control-lg { height: calc(1.5em + 1rem + 2px); padding: .5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: .3rem } select.form-control[multiple], select.form-control[size] { height: auto } textarea.form-control { height: auto } .form-group { margin-bottom: 1rem } .form-text { display: block; margin-top: .25rem } .header-links .nav-link, ul.header__menu.--column .nav-link { padding: 0; } .header-links li a.active, .header__menu.--column li a.active, .header-links li a:not(.header__dropdown):hover, .header-currency-picker li.active { color: var(--color-primary); text-decoration: none; } ul.header__menu.--column .header__dropdown:hover ul { width: 100%; background: transparent; } .article-page .article-page__article img { width: 100%; position: relative; text-decoration: none; transition: color 0.2s ease; } .header-links li a.active, .header__menu.--column li a.active { color: var(--color-primary); text-decoration: none; position: relative; display: inline-block; } .header-links li a.active::after, .header__menu.--column li a.active::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background: var(--color-primary); } .header-links li a:not(.header__dropdown), .header__menu.--column li a:not(.header__dropdown) { position: relative; display: inline-block; } .header-links li a:not(.header__dropdown):hover, .header__menu.--column li a:not(.header__dropdown):hover { color: var(--color-primary); text-decoration: none; } .header-links li a:not(.header__dropdown):hover::after, .header__menu.--column li a:not(.header__dropdown):hover::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background: var(--color-primary); animation: slideIn 0.3s ease; } @keyframes slideIn { from { width: 0; } to { width: 100%; } } .header-currency-picker li.active:not(.currency-picker__option) { color: var(--color-primary); border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); max-width: 1000px; margin: 0 auto; margin-top: 20px; } /* Article Title - Integrated with content */ .article-page__header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; } .article-page__title-main { font-size: 2.5rem; line-height: 1.2; color: var(--color-header); font-weight: 700; margin: 0 0 1.5rem 0; padding-bottom: 1.5rem; border-bottom: 2px solid #f0f0f0; flex: 1; } @media only screen and (max-width: 768px) { .article-page__header-row { flex-direction: column; gap: 16px; } } @media only screen and (max-width: 768px) { .article-page__title-main { font-size: 2rem; line-height: 1.3; margin-bottom: 1.25rem; padding-bottom: 1.25rem; } } @media only screen and (max-width: 768px) { .article-page__article { padding: 30px 25px; } } /* Typography improvements for article content - PREMIUM REDESIGN */ .article-page__article p { font-size: 1.125rem; line-height: 1.85; color: #3a3a3a; margin-bottom: 1.75rem; font-weight: 400; text-align: left; letter-spacing: 0.01em; } /* First paragraph special styling - Drop cap effect */ .article-page__article>p:first-of-type::first-letter { font-size: 3.5rem; font-weight: 700; float: left; line-height: 1; margin-right: 12px; margin-top: 6px; color: var(--color-primary); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .article-page__article h1 { font-size: 2.5rem; line-height: 1.25; color: var(--color-header); font-weight: 800; margin-top: 3rem; margin-bottom: 1.5rem; letter-spacing: -0.02em; position: relative; } /* H2 - Main section headers with premium accent */ .article-page__article h2 { font-size: 1.875rem; line-height: 1.35; color: var(--color-header); font-weight: 700; margin-top: 3rem; margin-bottom: 1.25rem; padding-bottom: 0.75rem; letter-spacing: -0.01em; position: relative; } .article-page__article h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 80px; height: 4px; background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%); border-radius: 2px; } /* H3 - Subsection headers with icon indicator */ .article-page__article h3 { font-size: 1.5rem; line-height: 1.45; color: var(--color-header); font-weight: 600; margin-top: 2.5rem; margin-bottom: 1rem; padding-left: 20px; position: relative; } .article-page__article h3::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 70%; background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-secondary) 100%); border-radius: 3px; } .article-page__article h4 { font-size: 1.25rem; line-height: 1.5; color: var(--color-header); font-weight: 600; margin-top: 2rem; margin-bottom: 0.875rem; letter-spacing: -0.01em; } .article-page__article h5, .article-page__article h6 { font-size: 1.125rem; line-height: 1.6; color: var(--color-header); font-weight: 600; margin-top: 1.75rem; margin-bottom: 0.625rem; } /* List styling improvements - Premium bullet points */ .article-page__article ul, .article-page__article ol { margin: 1.75rem 0; padding-left: 0; line-height: 1.85; list-style: none; } .article-page__article li:not(.toc-item) { font-size: 1.125rem; line-height: 1.8; color: #3a3a3a; margin-bottom: 1rem; padding-left: 2rem; position: relative; } .article-page__article ul:not(.toc-list) li:not(.toc-item)::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 10px; height: 10px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); border-radius: 3px; transform: rotate(45deg); } .article-page__article ol { counter-reset: premium-counter; } .article-page__article ol li { counter-increment: premium-counter; } .article-page__article ol li::before { content: counter(premium-counter); position: absolute; left: 0; top: 0; width: 26px; height: 26px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); border-radius: 8px; color: white; font-size: 0.8125rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* Link styling improvements */ .article-page__article a { color: var(--color-primary); text-decoration: none; background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-primary) 100%); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: all 0.3s ease; padding-bottom: 2px; } .article-page__article a:hover { color: var(--color-secondary); background-size: 100% 2px; } /* Blockquote styling - Premium glassmorphism callout */ .article-page__article blockquote { position: relative; border: none; border-left: none; padding: 2rem 2rem 2rem 4rem; margin: 2.5rem 0; font-style: normal; color: #444; background: linear-gradient(145deg, rgba(255, 138, 0, 0.08) 0%, rgba(255, 169, 64, 0.04) 100%); border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8); border-left: 5px solid var(--color-primary); } .article-page__article blockquote::before { content: '"'; position: absolute; top: 10px; left: 16px; font-size: 4rem; font-weight: 700; line-height: 1; color: var(--color-primary); opacity: 0.3; font-family: Georgia, serif; } .article-page__article blockquote p { font-size: 1.125rem; font-weight: 500; line-height: 1.75; margin-bottom: 0; } /* Code/Pre styling - Modern dark theme */ .article-page__article code { background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%); padding: 0.25rem 0.5rem; border-radius: 6px; font-size: 0.875em; color: #d63384; font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Courier New', monospace; border: 1px solid rgba(0, 0, 0, 0.08); } .article-page__article pre { background: linear-gradient(180deg, #1e1e2e 0%, #11111b 100%); color: #cdd6f4; padding: 2rem; border-radius: 16px; overflow-x: auto; margin: 2rem 0; line-height: 1.7; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.05); } .article-page__article pre code { background: transparent; color: inherit; padding: 0; border: none; } /* Table styling - Premium glassmorphism */ .article-page__article table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 2.5rem 0; font-size: 1rem; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); } .article-page__article table th, .article-page__article table td { padding: 1rem 1.25rem; border: none; text-align: left; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .article-page__article table th { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); font-weight: 600; color: white; text-transform: uppercase; font-size: 0.8125rem; letter-spacing: 0.05em; } .article-page__article table tr:nth-child(even) { background: rgba(0, 0, 0, 0.02); } .article-page__article table tr:hover { background: rgba(255, 138, 0, 0.04); } /* Image improvements */ .article-page__article img { max-width: 100%; height: auto; border-radius: 8px; margin: 2rem 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } /* Strong/Bold text */ .article-page__article strong, .article-page__article b { font-weight: 600; color: var(--color-header); } /* Emphasis/Italic */ .article-page__article em, .article-page__article i { font-style: italic; color: #555555; } /* Horizontal rule */ .article-page__article hr { border: none; border-top: 2px solid #e0e0e0; margin: 2.5rem 0; } /* Footer improvements */ .article-page__footer { margin-top: 3rem; padding-top: 2rem; border-top: 2px solid #f0f0f0; display: flex; flex-flow: column nowrap; gap: 1.5rem; } .article-page__footer .article-page__footer-meta { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; flex-wrap: nowrap !important; gap: 1rem !important; } .article-page__footer .article-page__footer-meta-group { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 0.5rem !important; flex-wrap: nowrap !important; flex-shrink: 0 !important; } .article-page__footer .article-page__date, .article-page__footer .article-page__author { font-size: 0.9375rem !important; color: #888888 !important; font-weight: 500 !important; white-space: nowrap !important; display: inline-block !important; margin: 0 !important; } .article-page__footer .article-page__reading-time { color: #888888 !important; font-size: 0.875rem !important; white-space: nowrap !important; display: inline-block !important; margin-left: 0 !important; } .article-page__footer .article-page__back-link { color: var(--color-primary) !important; font-weight: 500 !important; text-decoration: none !important; white-space: nowrap !important; flex-shrink: 0 !important; margin-left: auto !important; } .article-page__back-link:hover { text-decoration: underline; } .article-page__footer-cta { margin-top: 0.5rem; padding-top: 1.5rem; border-top: 1px solid #e0e0e0; width: 100%; } .article-page__footer-cta p { font-size: 0.95em; color: #666; margin: 0; line-height: 1.6; } .article-page__footer-cta a { color: #0CD9D9; font-weight: 600; text-decoration: none; } .article-page__footer-cta a:hover { text-decoration: underline; } .article-page__footer a { color: var(--color-primary); font-weight: 500; text-decoration: none; } .article-page__footer a:hover { text-decoration: underline; } /* Blog listing page improvements */ .blog-page__announce { font-size: 1rem; line-height: 1.7; color: #555555; margin-bottom: 1rem; } .blog-page__article { background: #FFFFFF; padding: 30px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); transition: box-shadow 0.3s ease; } .blog-page__article:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } .blog-page__cover { border-radius: 8px; margin-bottom: 20px; } .blog-page__title { font-size: 1.625rem; line-height: 1.4; margin-bottom: 12px; } .blog-page__date { color: #888888; font-size: 0.875rem; margin-top: 1rem; } /* Blog Article Reading Time */ /* Related Posts (Blog Article) */ .related-posts { width: 100%; margin: 60px 0 80px; padding-top: 40px; border-top: 2px solid #e0e0e0; } .related-posts .container { display: flex; flex-flow: column nowrap; align-items: center; justify-content: flex-start; } .related-posts__title { font-size: 1.75rem; font-weight: 600; color: var(--color-header); margin-bottom: 30px; text-align: center; } .related-posts__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; width: 100%; max-width: 1200px; margin: 0 auto; } @media only screen and (max-width: 768px) { .related-posts { margin: 40px 0 60px; padding-top: 30px; } .related-posts__grid { gap: 20px; } } /* Table of Contents Styles - Premium Redesign */ .table-of-contents { background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px; padding: 0; margin: 50px 0; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8); overflow: hidden; position: relative; } .table-of-contents::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 50%, #9333ea 100%); } .toc-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; padding: 24px 32px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, transparent 100%); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .toc-header:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%); } .toc-title { font-size: 1.375rem; font-weight: 700; color: var(--color-header); margin: 0; padding: 0; border: none; display: flex; align-items: center; gap: 12px; letter-spacing: -0.02em; } .toc-title::before { content: '📑'; font-size: 1.25rem; } .toc-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(145deg, #f0f0f0 0%, #e0e0e0 100%); transition: all 0.3s ease; color: var(--color-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .toc-header:hover .toc-toggle { background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-secondary) 100%); color: white; transform: scale(1.05); box-shadow: 0 4px 16px rgba(var(--color-primary-rgb, 0, 0, 0), 0.3); } .toc-toggle-icon { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); color: inherit; } .toc-toggle-icon--expanded { transform: rotate(180deg); } .toc-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease; padding: 0 32px; } .toc-content--expanded { max-height: 2000px; padding: 24px 32px 32px; } .toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .toc-item { margin: 0; padding: 0; position: relative; } .toc-link { color: #4a5568; text-decoration: none; font-size: 1rem; line-height: 1.5; display: flex; align-items: center; padding: 14px 18px; border-radius: 14px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; background: transparent; border: 1px solid transparent; gap: 16px; } .toc-link:hover { background: linear-gradient(145deg, rgba(var(--color-primary-rgb, 255, 138, 0), 0.08) 0%, rgba(var(--color-secondary-rgb, 255, 169, 64), 0.04) 100%); border-color: rgba(var(--color-primary-rgb, 255, 138, 0), 0.15); color: var(--color-primary); transform: translateX(8px); box-shadow: 0 4px 16px rgba(var(--color-primary-rgb, 0, 0, 0), 0.08); } .toc-link:hover .toc-number { transform: scale(1.15) rotate(-5deg); box-shadow: 0 4px 16px rgba(var(--color-primary-rgb, 0, 0, 0), 0.25); } .toc-number { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-secondary) 100%); color: #fff; border-radius: 10px; font-size: 0.875rem; font-weight: 700; flex-shrink: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(var(--color-primary-rgb, 0, 0, 0), 0.2); } .toc-text { flex: 1; font-weight: 500; transition: all 0.2s ease; } .toc-link:hover .toc-text { font-weight: 600; letter-spacing: 0.01em; } /* Progressive numbering with staggered animation */ .toc-item:nth-child(1) .toc-link { animation-delay: 0ms; } .toc-item:nth-child(2) .toc-link { animation-delay: 30ms; } .toc-item:nth-child(3) .toc-link { animation-delay: 60ms; } .toc-item:nth-child(4) .toc-link { animation-delay: 90ms; } .toc-item:nth-child(5) .toc-link { animation-delay: 120ms; } .toc-item:nth-child(6) .toc-link { animation-delay: 150ms; } .toc-item:nth-child(7) .toc-link { animation-delay: 180ms; } .toc-item:nth-child(8) .toc-link { animation-delay: 210ms; } @media only screen and (max-width: 768px) { .table-of-contents { margin: 30px 0; border-radius: 16px; } .toc-header { padding: 20px 24px; } .toc-title { font-size: 1.125rem; } .toc-title::before { font-size: 1rem; } .toc-toggle { width: 36px; height: 36px; border-radius: 10px; } .toc-content--expanded { padding: 16px 24px 24px; } .toc-link { font-size: 0.9375rem; padding: 12px 14px; border-radius: 12px; } .toc-number { min-width: 32px; height: 32px; font-size: 0.8125rem; border-radius: 8px; } .toc-list { gap: 4px; } } /* Blog Pagination Styles */ .blog-page .pagination { margin: 40px 0 20px; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; } .blog-page .pagination .page-item { margin: 0; } .blog-page .pagination .page-link { color: var(--color-header); background-color: #FFFFFF; border: 1px solid var(--border-light); padding: 8px 14px; margin: 0; border-radius: 6px; transition: all 0.3s ease; text-decoration: none; min-width: 40px; text-align: center; display: inline-block; } .blog-page .pagination .page-link:hover { background-color: var(--color-primary); color: #FFFFFF; border-color: var(--color-primary); text-decoration: none; } .blog-page .pagination .page-item.active .page-link { background-color: var(--color-primary); color: #FFFFFF; border-color: var(--color-primary); font-weight: 600; } .blog-page .pagination .page-item.disabled .page-link { color: #CCCCCC; background-color: #F5F5F5; border-color: var(--border-light); cursor: not-allowed; opacity: 0.6; } .blog-page .pagination .page-item.disabled .page-link:hover { background-color: #F5F5F5; color: #CCCCCC; border-color: var(--border-light); } @media only screen and (max-width: 480px) { .blog-page .pagination { gap: 2px; } .blog-page .pagination .page-link { padding: 6px 10px; font-size: 0.875rem; min-width: 36px; } } .faqs-section__title[data-toggle="collapse"] .fa:before { position: absolute; content: ""; width: 25px; height: 28px; right: 0; background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='minus' class='svg-inline--fa fa-minus fa-w-14' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23666' d='M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'%3E%3C/path%3E%3C/svg%3E"); } [data-theme="dark"] .faqs-section__title[data-toggle="collapse"] .fa:before { background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='minus' class='svg-inline--fa fa-minus fa-w-14' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23fff' d='M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'%3E%3C/path%3E%3C/svg%3E") !important; } .faqs-section__title[data-toggle="collapse"].collapsed .fa:before { position: absolute; content: ""; width: 25px; height: 28px; right: 0; background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='plus' class='svg-inline--fa fa-plus fa-w-14' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23666' d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'%3E%3C/path%3E%3C/svg%3E"); } [data-theme="dark"] .faqs-section__title[data-toggle="collapse"].collapsed .fa:before { background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='plus' class='svg-inline--fa fa-plus fa-w-14' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23fff' d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'%3E%3C/path%3E%3C/svg%3E") !important; } /* Exit Intent Popup */ .exit-intent-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .exit-intent-popup { position: relative; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; max-width: 500px; width: 100%; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); animation: slideUp 0.3s ease; overflow: hidden; } @keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .exit-intent-close { position: absolute; top: 12px; right: 12px; background: transparent; border: none; font-size: 28px; line-height: 1; color: #999999; cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s ease; z-index: 1; } .exit-intent-close:hover { background-color: #f0f0f0; color: #333333; } .exit-intent-content { padding: 40px 30px 30px 30px; text-align: center; } .exit-intent-icon { width: 64px; height: 64px; margin: 0 auto 20px; background: linear-gradient(135deg, var(--color-primary) 0%, #FF6B2B 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: pulse-icon 2s ease-in-out infinite; box-shadow: 0 4px 20px rgba(255, 135, 73, 0.4); } .exit-intent-icon svg { color: #FFFFFF; width: 32px; height: 32px; } @keyframes pulse-icon { 0%, 100% { transform: scale(1); box-shadow: 0 4px 20px rgba(255, 135, 73, 0.4); } 50% { transform: scale(1.05); box-shadow: 0 6px 30px rgba(255, 135, 73, 0.6); } } .exit-intent-title { font-size: 28px; font-weight: 700; color: var(--color-header); margin: 0 0 16px 0; line-height: 1.2; } .exit-intent-text { font-size: 18px; color: var(--text-secondary); margin: 0 0 12px 0; line-height: 1.5; } .exit-intent-text strong { color: var(--color-primary); font-weight: 700; } .exit-intent-subtext { font-size: 16px; color: var(--text-tertiary); margin: 0 0 24px 0; line-height: 1.5; } .exit-intent-coupon-box { background: var(--bg-tertiary); border: 2px dashed var(--color-primary); border-radius: 12px; padding: 16px 24px; margin: 20px 0; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } .exit-intent-coupon-label { font-size: 14px; color: var(--text-secondary); font-weight: 600; } .exit-intent-coupon { background-color: var(--color-primary); color: #FFFFFF; padding: 10px 20px; border-radius: 8px; font-weight: 700; font-size: 20px; display: inline-block; margin: 0; letter-spacing: 1px; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(255, 135, 73, 0.3); } .exit-intent-coupon:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(255, 135, 73, 0.5); } .exit-intent-actions { display: flex; flex-flow: row nowrap; gap: 12px; justify-content: center; } .exit-intent-btn { padding: 14px 28px; border-radius: 6px; font-size: 16px; font-weight: 600; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: all 0.2s ease; border: 2px solid transparent; min-width: 140px; } .exit-intent-btn.--primary { background-color: var(--color-primary); color: #FFFFFF; border-color: var(--color-primary); } .exit-intent-btn.--primary:hover { background-color: var(--color-secondary); border-color: var(--color-secondary); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } .exit-intent-btn.--secondary { background-color: #FFFFFF; color: #666666; border-color: #e0e0e0; } .exit-intent-btn.--secondary:hover { background-color: #f5f5f5; border-color: #d0d0d0; color: #333333; } .exit-intent-btn:active { transform: translateY(0); } /* Mobile adjustments */ @media (max-width: 480px) { .exit-intent-popup { max-width: 100%; margin: 0; border-radius: 12px 12px 0 0; } .exit-intent-content { padding: 30px 20px 20px 20px; } .exit-intent-title { font-size: 24px; } .exit-intent-text { font-size: 16px; } .exit-intent-subtext { font-size: 14px; } .exit-intent-actions { flex-direction: column; } .exit-intent-btn { width: 100%; } } /* ================================================ LIVE PURCHASE NOTIFICATIONS ================================================ */ .live-notification { position: fixed; bottom: 24px; left: 24px; background: #FFFFFF; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08); display: flex; align-items: flex-start; gap: 12px; padding: 16px; max-width: 360px; z-index: 9999; border-left: 4px solid #22c55e; } .live-notification--enter { animation: slideInLeft 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .live-notification--exit { animation: slideOutLeft 0.3s ease-in forwards; } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } } @keyframes slideOutLeft { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-100%); } } .live-notification__icon { width: 40px; height: 40px; background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .live-notification__icon svg { color: #FFFFFF; width: 20px; height: 20px; } .live-notification__content { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .live-notification__title { font-size: 12px; font-weight: 600; color: #22c55e; text-transform: uppercase; letter-spacing: 0.5px; } .live-notification__message { font-size: 14px; color: var(--color-header); line-height: 1.4; } .live-notification__message strong { color: var(--color-primary); } .live-notification__time { font-size: 12px; color: #999999; } .live-notification__close { background: none; border: none; cursor: pointer; padding: 4px; color: #999999; transition: color 0.2s; flex-shrink: 0; } .live-notification__close:hover { color: #333333; } @media (max-width: 480px) { .live-notification { left: 12px; right: 12px; bottom: 12px; max-width: none; } } /* ================================================ STOCK INDICATOR ================================================ */ .account-row__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .stock-indicator { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 12px; white-space: nowrap; } .stock-indicator__dot { width: 6px; height: 6px; border-radius: 50%; animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .stock-indicator--low { background: #fef2f2; color: #dc2626; } .stock-indicator--low .stock-indicator__dot { background: #dc2626; } .stock-indicator--medium { background: #fffbeb; color: #d97706; } .stock-indicator--medium .stock-indicator__dot { background: #d97706; } .stock-indicator--high { background: #f0fdf4; color: #16a34a; } .stock-indicator--high .stock-indicator__dot { background: #16a34a; } /* ================================================ ORDER HISTORY PAGE ================================================ */ .order-history-section { background: var(--bg); min-height: calc(100vh - 200px); padding: 20px 0 60px; display: flex; justify-content: center; } .order-history-section>.container { max-width: 900px !important; width: 100% !important; margin: 0 auto !important; } .order-history-header { text-align: center; margin-bottom: 40px; display: flex; flex-direction: column; align-items: center; } .order-history-icon { width: 80px; height: 80px; background: linear-gradient(135deg, var(--color-primary) 0%, #FF6B2B 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: 0 8px 24px rgba(255, 135, 73, 0.25); } .order-history-icon svg { color: #FFFFFF; } .order-history-title { font-size: 32px; font-weight: 700; color: var(--color-header); margin: 0 0 12px; } .order-history-subtitle { font-size: 16px; color: var(--color-text); margin: 0; } /* Order Lookup Card */ .order-lookup-card { background: #FFFFFF; border-radius: 16px; padding: 32px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); margin-bottom: 32px; max-width: 500px; margin-left: auto; margin-right: auto; } .order-lookup-input-group { margin-bottom: 20px; } .order-lookup-label { display: block; font-size: 14px; font-weight: 600; color: var(--color-header); margin-bottom: 8px; } .order-lookup-input { width: 100%; padding: 14px 16px; font-size: 16px; border: 2px solid #e5e7eb; border-radius: 10px; transition: all 0.2s; font-family: 'Montserrat', sans-serif; box-sizing: border-box; } .order-lookup-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(255, 135, 73, 0.1); } .order-lookup-btn { width: 100%; padding: 14px 24px; background: linear-gradient(135deg, var(--color-primary) 0%, #FF6B2B 100%); color: #FFFFFF; font-size: 16px; font-weight: 600; border: none; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; font-family: 'Montserrat', sans-serif; } .order-lookup-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 135, 73, 0.35); } .order-lookup-btn:disabled { opacity: 0.7; cursor: not-allowed; } .order-lookup-spinner { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #FFFFFF; border-radius: 50%; animation: spin 0.8s linear infinite; } .order-lookup-error { display: flex; align-items: center; gap: 8px; background: #fef2f2; color: #dc2626; padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; } /* Order Results */ .order-results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; width: 100%; max-width: 700px; } .order-results-header h2 { font-size: 24px; font-weight: 700; color: var(--color-header); margin: 0; } .order-results-count { font-size: 14px; color: var(--color-text); background: var(--bg-secondary); padding: 6px 12px; border-radius: 20px; } .order-list { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 700px; } /* Order Card */ .order-card { background: #FFFFFF; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); border: 1px solid #f0f0f0; } .order-card-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--bg-secondary); border-bottom: 1px solid #f0f0f0; } .order-card-info { display: flex; flex-direction: column; gap: 2px; } .order-card-date { font-size: 14px; font-weight: 600; color: var(--color-header); } .order-card-id { font-size: 12px; color: var(--color-text); font-family: monospace; } .order-card-status { background: #f0fdf4; color: #16a34a; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; } .order-card-status--test { background: #fef3c7; color: #d97706; } .order-card-body { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid #f0f0f0; } .order-card-product { display: flex; align-items: center; gap: 12px; } .order-card-product-icon { width: 48px; height: 48px; background: linear-gradient(135deg, var(--color-primary) 0%, #FF6B2B 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; } .order-card-product-icon svg { color: #FFFFFF; } .order-card-product-details { display: flex; flex-direction: column; gap: 2px; } .order-card-product-name { font-size: 16px; font-weight: 600; color: var(--color-header); } .order-card-product-region { font-size: 13px; color: var(--color-text); } .order-card-price { font-size: 20px; font-weight: 700; color: var(--color-primary); } .order-card-credentials { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: #fafafa; } .order-card-credential label { display: block; font-size: 12px; font-weight: 600; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .order-card-credential-value { display: flex; align-items: center; gap: 8px; } .order-card-credential-value code { background: #FFFFFF; padding: 10px 14px; border-radius: 8px; font-size: 14px; font-family: 'Courier New', monospace; color: var(--color-header); border: 1px solid #e5e7eb; flex: 1; word-break: break-all; } .order-card-copy-btn { background: var(--color-primary); color: #FFFFFF; border: none; padding: 10px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; font-family: 'Montserrat', sans-serif; } .order-card-copy-btn:hover { background: #FF6B2B; } .order-card-footer { padding: 12px 20px; background: #f0fdf4; } .order-card-hint { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #16a34a; } /* No Results */ .order-no-results { text-align: center; padding: 60px 20px; background: #FFFFFF; border-radius: 16px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); width: 100%; max-width: 500px; } .order-no-results svg { color: #d1d5db; margin-bottom: 20px; } .order-no-results h3 { font-size: 20px; font-weight: 600; color: var(--color-header); margin: 0 0 8px; } .order-no-results p { color: var(--color-text); margin: 0 0 8px; } .order-no-results-hint { font-size: 14px; color: #999999; } /* Help Section */ .order-help-section { text-align: center; margin-top: 48px; padding: 32px; background: #FFFFFF; border-radius: 16px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); max-width: 500px; margin-left: auto; margin-right: auto; } .order-help-section h3 { font-size: 20px; font-weight: 700; color: var(--color-header); margin: 0 0 8px; } .order-help-section p { color: var(--color-text); margin: 0 0 20px; } .order-help-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .order-help-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.2s; } .order-help-btn--discord { background: #5865F2; color: #FFFFFF; } .order-help-btn--discord:hover { background: #4752c4; color: #FFFFFF; text-decoration: none; transform: translateY(-2px); } .order-help-btn--contact { background: var(--bg-secondary); color: var(--color-header); border: 1px solid #e5e7eb; } .order-help-btn--contact:hover { background: #e5e7eb; color: var(--color-header); text-decoration: none; } @media (max-width: 640px) { .order-card-credentials { grid-template-columns: 1fr; } .order-card-body { flex-direction: column; align-items: flex-start; gap: 16px; } .order-card-price { align-self: flex-end; } .order-history-title { font-size: 26px; } } /* Order History - Verification Flow */ .order-lookup-info { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 12px 16px; background: #f0f9ff; border-radius: 8px; font-size: 13px; color: #0369a1; } .order-lookup-info svg { flex-shrink: 0; } .verification-sent-notice { display: flex; align-items: flex-start; gap: 12px; padding: 20px; background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border-radius: 12px; margin-bottom: 24px; border: 1px solid #bbf7d0; } .verification-sent-notice svg { color: #16a34a; flex-shrink: 0; margin-top: 2px; } .verification-sent-notice strong { color: #166534; font-size: 16px; display: block; margin-bottom: 4px; } .verification-sent-notice p { margin: 0; color: #15803d; font-size: 14px; } .verification-code-input { font-size: 20px !important; letter-spacing: 4px; text-align: center; font-family: 'Courier New', monospace; font-weight: 700; } .verification-code-input::placeholder { font-size: 14px; letter-spacing: 0; font-weight: 400; color: #999999; } .verification-actions { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #f0f0f0; } .verification-link { background: none; border: none; color: var(--color-primary); font-size: 14px; font-weight: 500; cursor: pointer; padding: 0; font-family: 'Montserrat', sans-serif; transition: color 0.2s; } .verification-link:hover { color: #FF6B2B; text-decoration: underline; } .verification-link:disabled { color: #999999; cursor: not-allowed; } .verified-badge { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border: 1px solid #bbf7d0; color: #166534; padding: 10px 16px; border-radius: 24px; font-size: 14px; font-weight: 500; margin-bottom: 24px; margin-left: auto; margin-right: auto; } .verified-badge svg { color: #16a34a; } .verified-badge-change { background: none; border: none; color: #15803d; font-size: 13px; cursor: pointer; padding: 0; margin-left: 8px; text-decoration: underline; font-family: 'Montserrat', sans-serif; } .verified-badge-change:hover { color: #166534; } @media (max-width: 480px) { .verification-actions { flex-direction: column; gap: 12px; } .verification-code-input { font-size: 20px !important; letter-spacing: 4px; } } /* Dark Mode: Final Targeted Overrides */ [data-theme="dark"] .account-review { background-color: var(--bg-secondary) !important; box-shadow: var(--shadow-sm) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .account-review__row { border-bottom-color: var(--border-color) !important; } [data-theme="dark"] .account-review__caption { color: var(--text-muted) !important; } [data-theme="dark"] .account-review__value { color: var(--text-secondary) !important; } [data-theme="dark"] .account-review__value.--blue { color: var(--color-secondary) !important; } [data-theme="dark"] .blog-page { background-color: var(--bg-primary) !important; } [data-theme="dark"] .blog-page__article { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; box-shadow: var(--shadow-sm) !important; } [data-theme="dark"] .blog-page__title { color: var(--text-secondary) !important; } [data-theme="dark"] .blog-page__announce { color: var(--text-primary) !important; } [data-theme="dark"] .blog-page__date { color: var(--text-muted) !important; } /* Dark Mode: Table of Contents */ [data-theme="dark"] .table-of-contents { background: linear-gradient(145deg, rgba(30, 35, 45, 0.95) 0%, rgba(20, 25, 35, 0.9) 100%); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05); } [data-theme="dark"] .toc-header { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%); border-bottom-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .toc-header:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%); } [data-theme="dark"] .toc-title { color: var(--text-secondary); } [data-theme="dark"] .toc-toggle { background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .toc-link { color: var(--text-primary); } [data-theme="dark"] .toc-link:hover { background: linear-gradient(145deg, rgba(var(--color-primary-rgb, 255, 138, 0), 0.12) 0%, rgba(var(--color-secondary-rgb, 255, 169, 64), 0.06) 100%); border-color: rgba(var(--color-primary-rgb, 255, 138, 0), 0.2); color: var(--color-primary); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } [data-theme="dark"] .toc-text { color: #f1f5f9; } [data-theme="dark"] .toc-link { color: #f1f5f9; } [data-theme="dark"] .toc-number { color: #ffffff; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); background: linear-gradient(145deg, #3b5998 0%, #5dade2 100%); } [data-theme="dark"] .toc-link:hover .toc-text { color: var(--color-primary); } /* Dark Mode: Article Typography */ [data-theme="dark"] .article-page__article p, [data-theme="dark"] .article-page__article li { color: var(--text-primary); } [data-theme="dark"] .article-page__article h1, [data-theme="dark"] .article-page__article h2, [data-theme="dark"] .article-page__article h3, [data-theme="dark"] .article-page__article h4, [data-theme="dark"] .article-page__article h5, [data-theme="dark"] .article-page__article h6 { color: var(--text-secondary); } [data-theme="dark"] .article-page__article blockquote { background: linear-gradient(145deg, rgba(255, 138, 0, 0.1) 0%, rgba(255, 169, 64, 0.05) 100%); border-left-color: var(--color-primary); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05); } [data-theme="dark"] .article-page__article blockquote p { color: var(--text-primary); } [data-theme="dark"] .article-page__article code { background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%); border-color: rgba(255, 255, 255, 0.1); color: #f0abfc; } [data-theme="dark"] .article-page__article pre { background: linear-gradient(180deg, #0d0d14 0%, #050508 100%); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.03); } [data-theme="dark"] .article-page__article table { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .article-page__article table th, [data-theme="dark"] .article-page__article table td { border-bottom-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .article-page__article table td { color: var(--text-primary); } [data-theme="dark"] .article-page__article table tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); } [data-theme="dark"] .article-page__article table tr:hover { background: rgba(255, 138, 0, 0.06); } /* Dark Mode: Admin Backend */ [data-theme="dark"] .nav-tabs { border-bottom: 2px solid var(--border-color); gap: 8px; } [data-theme="dark"] .nav-tabs .nav-link { background-color: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 8px 8px 0 0; transition: all 0.3s ease; } [data-theme="dark"] .nav-tabs .nav-link:hover { background-color: var(--bg-tertiary); border-color: var(--color-primary); color: var(--color-primary); } [data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--color-primary) !important; color: #FFFFFF !important; border-color: var(--color-primary) !important; font-weight: 600; } [data-theme="dark"] .table-admin-info { background-color: var(--bg-tertiary) !important; color: var(--text-muted) !important; border: 1px dashed var(--border-color); } [data-theme="dark"] .tab-pane { background-color: var(--bg-secondary); padding: 15px; border-radius: 0 0 8px 8px; border: 1px solid var(--border-color); border-top: none; } [data-theme="dark"] thead td, [data-theme="dark"] thead th { background-color: var(--bg-tertiary) !important; color: var(--text-secondary) !important; font-weight: 600; border-bottom: 2px solid var(--border-color) !important; } [data-theme="dark"] .article-page { background-color: var(--bg-primary) !important; } [data-theme="dark"] .article-page__article { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .article-page__title-main { color: var(--text-secondary) !important; } [data-theme="dark"] .table-of-contents { background-color: var(--bg-tertiary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .toc-header { border-bottom-color: var(--border-color) !important; } [data-theme="dark"] .toc-title { color: var(--text-secondary) !important; } [data-theme="dark"] .toc-link { color: var(--text-primary) !important; } [data-theme="dark"] .toc-link:hover { background-color: var(--bg-secondary) !important; color: var(--color-primary) !important; } [data-theme="dark"] .toc-number { background-color: var(--bg-secondary) !important; color: var(--color-primary) !important; border-color: var(--border-color) !important; } /* Visibility helpers for theme-specific content */ .dark-only { display: none !important; } [data-theme="dark"] .dark-only { display: block !important; } [data-theme="dark"] .light-only { display: none !important; } /* Ensure primary buttons stay orange in dark mode */ [data-theme="dark"] .button.--primary, [data-theme="dark"] .btn-primary { background-color: var(--color-primary) !important; color: #FFFFFF !important; border-color: var(--color-primary) !important; } [data-theme="dark"] .button.--primary:hover, [data-theme="dark"] .btn-primary:hover { filter: brightness(1.1); } /* Dark Mode: FAQ Page */ [data-theme="dark"] .faqs-item { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .faqs-question { color: var(--text-primary) !important; background-color: transparent !important; } [data-theme="dark"] .faqs-question span { color: var(--text-primary) !important; } [data-theme="dark"] .faqs-answer { color: var(--text-secondary) !important; border-top-color: var(--border-color) !important; } [data-theme="dark"] .faqs-main-title, [data-theme="dark"] .faqs-category-title { color: var(--text-secondary) !important; } /* Dark Mode: SEO Content Block (Override Inline Styles) */ [data-theme="dark"] .seo-content-block { background-color: var(--bg-secondary) !important; background: var(--bg-secondary) !important; color: var(--text-primary) !important; } [data-theme="dark"] .seo-content-block h2, [data-theme="dark"] .seo-content-block div, [data-theme="dark"] .seo-content-block p, [data-theme="dark"] .seo-content-block span { color: var(--text-primary) !important; } [data-theme="dark"] .seo-content-block strong { color: var(--text-secondary) !important; } /* Dark Mode: Account Value Calculator Widget (Shared Component) */ [data-theme="dark"] .account-value-calculator { background: var(--bg-secondary) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; } [data-theme="dark"] .account-value-calculator__title { color: var(--text-secondary) !important; } [data-theme="dark"] .account-value-calculator__subtitle { color: var(--text-primary) !important; } [data-theme="dark"] .calculator-input-wrapper { background-color: var(--bg-tertiary) !important; background: var(--bg-tertiary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .calculator-input { color: var(--text-secondary) !important; } [data-theme="dark"] .calculator-suffix { color: var(--text-muted) !important; } [data-theme="dark"] .value-row__item { background-color: var(--bg-tertiary) !important; } [data-theme="dark"] .value-row__label { color: var(--text-muted) !important; } [data-theme="dark"] .value-row__value { color: var(--text-secondary) !important; } [data-theme="dark"] .comparison-title, [data-theme="dark"] .breakdown-title { color: var(--text-secondary) !important; } [data-theme="dark"] .breakdown-item { border-bottom-color: var(--border-color) !important; } [data-theme="dark"] .breakdown-label { color: var(--text-primary) !important; } [data-theme="dark"] .breakdown-value { color: var(--text-secondary) !important; } /* Dark Mode Fixes: Hero Alignment & Subscribe Section Conflict */ /* Removed appended hero alignment fix */ [data-theme="dark"] .subscribe-section { background-color: transparent !important; background: none !important; } /* Nuclear Fix for Grey Background Boxes */ [data-theme="dark"] .subscribe-screen, [data-theme="dark"] .subscribe-screen h2, [data-theme="dark"] .subscribe-screen span, [data-theme="dark"] .page-header, [data-theme="dark"] .page-subheader, [data-theme="dark"] .faqs-category-title { background-color: transparent !important; background: none !important; } [data-theme="dark"] .faqs-category { background-color: transparent !important; } /* FINAL FIXES: Dropdown & Calculator */ [data-theme="dark"] .header__dropdown ul, [data-theme="dark"] .dropdown-menu { background-color: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] .header__dropdown ul li a, [data-theme="dark"] .header__dropdown ul li .nav-link { color: var(--text-primary) !important; } [data-theme="dark"] .header__dropdown ul li a:hover, [data-theme="dark"] .header__dropdown ul li .nav-link:hover { background-color: var(--bg-tertiary) !important; } /* Calculator Page Dark Mode */ [data-theme="dark"] .account-selection-card, [data-theme="dark"] .value-result-card, [data-theme="dark"] .info-card, [data-theme="dark"] .calculator-empty-state, [data-theme="dark"] .calculator-prompt, [data-theme="dark"] .value-breakdown-section { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .account-selection-card--selected { background-color: var(--bg-tertiary) !important; border-color: var(--color-primary) !important; } [data-theme="dark"] .calculator-step__title, [data-theme="dark"] .calculator-hero-title, [data-theme="dark"] .value-result-card__label, [data-theme="dark"] .info-card__title, [data-theme="dark"] .be-value-number, [data-theme="dark"] .be-value-label, [data-theme="dark"] .breakdown-label, [data-theme="dark"] .breakdown-value, [data-theme="dark"] .value-result-card__value { color: var(--text-primary) !important; } [data-theme="dark"] .calculator-step__description, [data-theme="dark"] .calculator-hero-subtitle, [data-theme="dark"] .value-result-card__description, [data-theme="dark"] .info-card__description, [data-theme="dark"] .value-result-card__unit { color: var(--text-secondary) !important; } /* Hero Safety Centering */ [data-theme="dark"] .mainscreen__picture { justify-content: center !important; } /* SUPER FIXES: Logo, Currency, Calculator, Hero */ /* 1. LOGO FIX */ [data-theme="dark"] .logo svg path:not([fill="#4FCBCD"]) { fill: #ffffff !important; } /* 2. CURRENCY SELECTOR FIX */ [data-theme="dark"] .currency-picker__trigger, [data-theme="dark"] .currency-picker__list { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .currency-picker__trigger:hover, [data-theme="dark"] .currency-picker__option:hover { background-color: var(--bg-tertiary) !important; } [data-theme="dark"] .currency-picker__symbol, [data-theme="dark"] .currency-picker__label { color: var(--text-primary) !important; } /* 3. CALCULATOR FIX (High Specificity) */ html[data-theme="dark"] .account-selection-card, html[data-theme="dark"] .value-result-card, html[data-theme="dark"] .info-card, html[data-theme="dark"] .calculator-empty-state, html[data-theme="dark"] .calculator-prompt, html[data-theme="dark"] .comparison-bar-item__label, html[data-theme="dark"] .value-breakdown-item { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } html[data-theme="dark"] .account-selection-card--selected { background-color: var(--bg-tertiary) !important; border-color: var(--color-primary) !important; } html[data-theme="dark"] .value-breakdown-item__value--total { color: var(--color-primary) !important; } /* 4. HERO POSITION FIX */ [data-theme="dark"] .mainscreen__picture { justify-content: flex-end !important; display: flex !important; width: 100% !important; } /* SUPER FIXES V2 (Overrides previous) */ /* 1. LOGO FIX - Explicit Color Target */ [data-theme="dark"] .logo svg path[fill="#434850"] { fill: #ffffff !important; } [data-theme="dark"] .logo svg path[fill="#040200"] { fill: #ffffff !important; opacity: 0.5 !important; } /* 2. CURRENCY SELECTOR FIX - High Specificity */ html[data-theme="dark"] body .currency-picker__trigger, html[data-theme="dark"] body .currency-picker__list { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; } /* 3. CALCULATOR FIX - Expanded List */ html[data-theme="dark"] .account-selection-card, html[data-theme="dark"] .value-result-card, html[data-theme="dark"] .info-card, html[data-theme="dark"] .calculator-empty-state, html[data-theme="dark"] .calculator-prompt, html[data-theme="dark"] .comparison-bar-item__label, html[data-theme="dark"] .value-breakdown-item, html[data-theme="dark"] .comparison-visualization, html[data-theme="dark"] .value-breakdown-section, html[data-theme="dark"] .account-controls li { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } html[data-theme="dark"] .comparison-bar__container { background-color: var(--bg-tertiary) !important; } /* 4. HERO POSITION FIX - Alignment Only */ [data-theme="dark"] .mainscreen__picture { justify-content: flex-end !important; display: flex !important; /* Removed width: 100% to prevent layout breakage */ } /* SUPER FIXES V3 (Fixing Width & Force Flush) */ /* HERO FIX - Reset Width */ [data-theme="dark"] .mainscreen__picture { width: auto !important; justify-content: flex-end !important; } /* LOGO FIX - Force White Fill */ [data-theme="dark"] .logo svg path[fill="#434850"] { fill: #ffffff !important; } /* CALCULATOR FIX - Catch-all Card Backgrounds */ html[data-theme="dark"] div[class*="card"] { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } html[data-theme="dark"] .comparison-visualization { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; } /* FINAL HERO PLACEMENT FIX */ [data-theme="dark"] .mainscreen__picture { margin-left: auto !important; flex: 0 0 50% !important; display: flex !important; justify-content: flex-end !important; } [data-theme="dark"] .mainscreen__cta { max-width: 50% !important; flex: 1 1 50% !important; } /* BLOG POLISH FIXES */ [data-theme="dark"] .breadcrumb { background-color: transparent !important; padding: 0 !important; margin-bottom: 20px !important; } [data-theme="dark"] .breadcrumb-item, [data-theme="dark"] .breadcrumb-item.active { color: var(--text-muted) !important; } [data-theme="dark"] .breadcrumb-item+.breadcrumb-item::before { color: var(--text-muted) !important; } [data-theme="dark"] .breadcrumb-item a { color: var(--color-primary) !important; } [data-theme="dark"] .article-page__article p, [data-theme="dark"] .article-page__article li { color: var(--text-primary) !important; } [data-theme="dark"] .article-page__article blockquote { background-color: var(--bg-tertiary) !important; color: var(--text-secondary) !important; border-left-color: var(--color-primary) !important; } /* BLOG POLISH FIXES */ [data-theme="dark"] .breadcrumb { background-color: transparent !important; padding: 0 !important; margin-bottom: 20px !important; } [data-theme="dark"] .breadcrumb-item, [data-theme="dark"] .breadcrumb-item.active { color: var(--text-muted) !important; } [data-theme="dark"] .breadcrumb-item+.breadcrumb-item::before { color: var(--text-muted) !important; } [data-theme="dark"] .breadcrumb-item a { color: var(--color-primary) !important; } [data-theme="dark"] .article-page__article p, [data-theme="dark"] .article-page__article li { color: var(--text-primary) !important; } [data-theme="dark"] .article-page__article blockquote { background-color: var(--bg-tertiary) !important; color: var(--text-secondary) !important; border-left-color: var(--color-primary) !important; } /* BLOG POLISH FIXES */ [data-theme="dark"] .breadcrumb { background-color: transparent !important; padding: 0 !important; margin-bottom: 20px !important; } [data-theme="dark"] .breadcrumb-item, [data-theme="dark"] .breadcrumb-item.active { color: var(--text-muted) !important; } [data-theme="dark"] .breadcrumb-item+.breadcrumb-item::before { color: var(--text-muted) !important; } [data-theme="dark"] .breadcrumb-item a { color: var(--color-primary) !important; } [data-theme="dark"] .article-page__article p, [data-theme="dark"] .article-page__article li { color: var(--text-primary) !important; } [data-theme="dark"] .article-page__article blockquote { background-color: var(--bg-tertiary) !important; color: var(--text-secondary) !important; border-left-color: var(--color-primary) !important; } /* UI POLISH: ORDER HISTORY & HOMEPAGE DISCORD */ [data-theme="dark"] .verified-badge { background: #bbf7d0 !important; color: #000000 !important; border-color: #86efac !important; } [data-theme="dark"] .verified-badge svg { color: #166534 !important; } [data-theme="dark"] .verified-badge-change { color: #15803d !important; } [data-theme="dark"] .discord-btn__title { color: var(--text-secondary) !important; } [data-theme="dark"] .discord-btn__subtitle { color: var(--text-muted) !important; } [data-theme="dark"] .discord-btn__caption { color: rgba(255, 255, 255, 0.7) !important; } [data-theme="dark"] .discord-btn { border-color: rgba(255, 255, 255, 0.1) !important; background-color: var(--bg-secondary) !important; } /* CHECKOUT DARK MODE POLISH */ [data-theme="dark"] .checkout-page__title { color: var(--text-secondary) !important; } [data-theme="dark"] .checkout-page__back { color: var(--text-muted) !important; } [data-theme="dark"] .checkout-page__back:hover { color: var(--color-primary) !important; } /* Progress Indicator Dark Mode */ [data-theme="dark"] .checkout-progress--separated { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .checkout-progress__step-number { background: var(--bg-tertiary) !important; border-color: var(--border-color) !important; color: var(--text-muted) !important; } [data-theme="dark"] .checkout-progress__step--active .checkout-progress__step-number { background: linear-gradient(135deg, var(--color-primary) 0%, #FF6B2B 100%) !important; color: #FFFFFF !important; } [data-theme="dark"] .checkout-progress__step-label { color: var(--text-muted) !important; } [data-theme="dark"] .checkout-progress__step--active .checkout-progress__step-label { color: var(--text-secondary) !important; } [data-theme="dark"] .checkout-progress__connector { background: var(--border-color) !important; } [data-theme="dark"] .checkout-progress__connector--active { background: linear-gradient(90deg, var(--color-primary) 0%, #FF6B2B 100%) !important; } /* Checkout Breakdown Dark Mode */ [data-theme="dark"] .checkout-form__breakdown-label { color: var(--text-muted) !important; } [data-theme="dark"] .checkout-form__breakdown-value { color: var(--text-secondary) !important; } [data-theme="dark"] .checkout-form__breakdown-row--total .checkout-form__breakdown-label { color: var(--text-secondary) !important; } [data-theme="dark"] .checkout-form__breakdown-row--total { border-top-color: var(--border-color) !important; } /* Misc Checkout Text */ [data-theme="dark"] .checkout-form__help, [data-theme="dark"] .checkout-form__terms, [data-theme="dark"] .checkout-summary__benefit-desc, [data-theme="dark"] .checkout-summary__info-label, [data-theme="dark"] .checkout-form__badge-desc { color: var(--text-muted) !important; } [data-theme="dark"] .checkout-summary__info-value, [data-theme="dark"] .checkout-summary__benefit-title { color: var(--text-secondary) !important; } /* FIX: Remove background from 'Change' button in verified badge */ [data-theme="dark"] .verified-badge-change { background: none !important; border: none !important; box-shadow: none !important; } /* HERO IMAGE EDGE SMOOTHING V3 (ELIMINATE HALO) */ [data-theme="dark"] .mainscreen__picture { mask-image: radial-gradient(circle at center, black 0%, black 82%, transparent 88%) !important; -webkit-mask-image: radial-gradient(circle at center, black 0%, black 82%, transparent 88%) !important; background: transparent !important; overflow: hidden !important; } [data-theme="dark"] .mainscreen__img { /* Use contrast/brightness to potentially crush the light fringe pixels */ filter: brightness(0.95) contrast(1.05) drop-shadow(0 0 40px rgba(160, 100, 255, 0.15)) !important; /* Screen blend mode is excellent for dark backgrounds */ mix-blend-mode: screen !important; /* Slight blur + scale down can help recede the white halo */ filter: blur(0.3px) brightness(0.95) contrast(1.05) !important; transform: scale(0.995) !important; } /* ACCOUNT BADGES DARK MODE - Stock Indicators & Sale Badges */ [data-theme="dark"] .stock-indicator { background: rgba(251, 191, 36, 0.15) !important; color: #fcd34d !important; border: 1px solid rgba(251, 191, 36, 0.3) !important; } [data-theme="dark"] .stock-indicator--low { background: rgba(239, 68, 68, 0.15) !important; color: #fca5a5 !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; } [data-theme="dark"] .stock-indicator--medium { background: rgba(251, 191, 36, 0.15) !important; color: #fcd34d !important; border: 1px solid rgba(251, 191, 36, 0.3) !important; } [data-theme="dark"] .stock-indicator--high { background: rgba(34, 197, 94, 0.15) !important; color: #86efac !important; border: 1px solid rgba(34, 197, 94, 0.3) !important; } /* Sale/Badge styles */ [data-theme="dark"] .account-row__badge { border: 1px solid transparent !important; } [data-theme="dark"] .account-row__badge.--sale { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; color: #ffffff !important; } [data-theme="dark"] .account-row__badge.--rankedready { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important; color: #ffffff !important; } [data-theme="dark"] .account-row__badge.--popular { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important; color: #ffffff !important; } [data-theme="dark"] .account-row__badge.--premium { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; color: #ffffff !important; } /* FAQ to Subscribe Section Separator */ .subscribe-screen { position: relative; margin-top: 60px; padding-top: 60px; } .subscribe-screen::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80%; max-width: 800px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(160, 100, 255, 0.5) 50%, transparent 100%); } [data-theme="dark"] .subscribe-screen::before { background: linear-gradient(90deg, transparent 0%, rgba(160, 100, 255, 0.6) 30%, rgba(255, 140, 66, 0.4) 70%, transparent 100%); } /* Dark Mode: White price text instead of orange */ [data-theme="dark"] .account-row__price { color: #ffffff !important; } [data-theme="dark"] .account-row__price * { color: #ffffff !important; } /* Dark Mode: Toast Notifications */ [data-theme="dark"] .toast { background: #1f2937 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] .toast__message { color: #f9fafb !important; } [data-theme="dark"] .toast__close { color: #9ca3af !important; } [data-theme="dark"] .toast__close:hover { color: #f9fafb !important; } /* Dark Mode: Reviews CTA Section */ [data-theme="dark"] .reviews-cta { background: var(--bg-tertiary) !important; } [data-theme="dark"] .reviews-cta .page-header { color: #ffffff !important; } [data-theme="dark"] .reviews-cta .page-subheader { color: rgba(255, 255, 255, 0.85) !important; } /* Dark Mode: Reviews Page - Happy Customers CTA Card */ [data-theme="dark"] .review-page div[style*="linear-gradient"] h3 { color: #ffffff !important; } [data-theme="dark"] .review-page div[style*="linear-gradient"] p { color: rgba(255, 255, 255, 0.85) !important; } /* Dark Mode: Review Cards */ [data-theme="dark"] .review-card-clickable { background: var(--bg-tertiary) !important; border-color: rgba(12, 217, 217, 0.3) !important; } [data-theme="dark"] .review-card-clickable strong { color: #ffffff !important; } [data-theme="dark"] .review-card-clickable p { color: rgba(255, 255, 255, 0.8) !important; } /* ============================================ QUANTITY SELECTOR COMPONENT ============================================ */ .account-review__quantity-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; margin-top: 16px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; } .quantity-selector { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .quantity-selector__label { font-size: 14px; font-weight: 600; color: var(--text-secondary); } .quantity-selector__controls { display: flex; align-items: center; gap: 0; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; } .quantity-selector__btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; color: var(--text-secondary); background: transparent; border: none; cursor: pointer; transition: all 0.2s ease; } .quantity-selector__btn:hover:not(:disabled) { background: var(--color-primary); color: #FFFFFF; } .quantity-selector__btn:disabled { opacity: 0.4; cursor: not-allowed; } .quantity-selector__value { min-width: 40px; text-align: center; font-size: 16px; font-weight: 700; color: var(--text-secondary); padding: 0 4px; } .quantity-selector__discount { font-size: 13px; font-weight: 600; color: #22c55e; background: rgba(34, 197, 94, 0.1); padding: 4px 10px; border-radius: 20px; white-space: nowrap; } .quantity-selector__pricing { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 140px; } .quantity-selector__subtotal, .quantity-selector__savings { display: flex; justify-content: space-between; width: 100%; font-size: 13px; color: var(--text-muted); } .quantity-selector__savings .--green { color: #22c55e; font-weight: 600; } .quantity-selector__total { display: flex; justify-content: space-between; width: 100%; font-size: 15px; font-weight: 700; color: var(--text-secondary); padding-top: 4px; border-top: 1px solid var(--border-light); } .quantity-selector__total .--highlight { color: var(--color-primary); font-size: 18px; } /* Mobile Responsive */ @media (max-width: 600px) { .account-review__quantity-row { flex-direction: column; align-items: stretch; padding: 12px 16px; gap: 12px; } .quantity-selector { justify-content: center; gap: 8px; } .quantity-selector__pricing { align-items: stretch; min-width: unset; } .quantity-selector__total { font-size: 14px; } .quantity-selector__total .--highlight { font-size: 16px; } } /* Dark Mode */ [data-theme="dark"] .account-review__quantity-row { background: var(--bg-tertiary); border-color: var(--border-color); } [data-theme="dark"] .quantity-selector__controls { background: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .quantity-selector__discount { background: rgba(34, 197, 94, 0.15); } .quantity-selector__stock-warning { font-size: 11px; font-weight: 500; color: #f59e0b; margin-left: 8px; } [data-theme="dark"] .quantity-selector__stock-warning { color: #fbbf24; } /* Checkout Summary Discount Badge */ .checkout-summary__discount-badge { display: inline-block; font-size: 11px; font-weight: 600; color: #22c55e; background: rgba(34, 197, 94, 0.12); padding: 3px 8px; border-radius: 12px; margin-left: 8px; } /* Multi-Account Display Styles */ .account-credentials-section { padding: 0; } .account-credentials-section--additional { margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--border-color, #e5e7eb); } .account-number-label { font-size: 16px; font-weight: 600; color: var(--text-primary, #1f2937); margin: 0 0 12px 0; padding: 0; display: flex; align-items: center; gap: 8px; } [data-theme="dark"] .account-number-label { color: var(--text-primary, #f3f4f6); } [data-theme="dark"] .account-credentials-section--additional { border-top-color: var(--border-color, #374151); } [data-theme="dark"] .checkout-summary__discount-badge { background: rgba(34, 197, 94, 0.2); } /* Quantity Selector Card - Step 2 */ .quantity-selector-card { margin-top: 20px; background: linear-gradient(135deg, rgba(13, 217, 217, 0.05) 0%, rgba(255, 135, 73, 0.05) 100%); border: 2px solid rgba(13, 217, 217, 0.2); border-radius: 12px; padding: 20px; } .quantity-selector-card__header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; } .quantity-selector-card__title { font-size: 16px; font-weight: 600; color: var(--text-primary, #1f2937); } .quantity-selector-card__subtitle { font-size: 13px; color: #22c55e; font-weight: 500; } .quantity-selector-card__body { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .quantity-selector-card__options { display: flex; gap: 12px; } .quantity-option { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 90px; height: 80px; background: var(--bg-secondary, #f9fafb); border: 2px solid var(--border-color, #e5e7eb); border-radius: 10px; cursor: pointer; transition: all 0.2s ease; position: relative; padding: 10px 8px; } .quantity-option:hover:not(:disabled) { border-color: rgba(13, 217, 217, 0.5); background: rgba(13, 217, 217, 0.05); } .quantity-option--selected { border-color: #0dd9d9; background: rgba(13, 217, 217, 0.1); box-shadow: 0 0 0 3px rgba(13, 217, 217, 0.15); } .quantity-option--disabled { opacity: 0.5; cursor: not-allowed; } .quantity-option__number { font-size: 24px; font-weight: 700; color: var(--text-primary, #1f2937); line-height: 1; } .quantity-option--selected .quantity-option__number { color: #0dd9d9; } .quantity-option__label { font-size: 11px; color: var(--text-tertiary, #6b7280); margin-top: 4px; } .quantity-option__discount { position: absolute; top: -8px; right: -8px; background: linear-gradient(135deg, #22c55e, #16a34a); color: white; font-size: 10px; font-weight: 700; padding: 3px 6px; border-radius: 8px; } .quantity-option__unavailable { font-size: 9px; color: #ef4444; position: absolute; bottom: 6px; } .quantity-selector-card__total { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .quantity-selector-card__savings { font-size: 13px; color: var(--text-secondary, #6b7280); display: flex; gap: 6px; } .quantity-selector-card__savings .--green { color: #22c55e; font-weight: 600; } .quantity-selector-card__price { font-size: 18px; font-weight: 600; color: var(--text-primary, #1f2937); display: flex; gap: 8px; } .quantity-selector-card__price .--highlight { color: #0dd9d9; font-weight: 700; } /* Dark mode */ [data-theme="dark"] .quantity-selector-card { background: linear-gradient(135deg, rgba(13, 217, 217, 0.08) 0%, rgba(255, 135, 73, 0.05) 100%); border-color: rgba(13, 217, 217, 0.25); } [data-theme="dark"] .quantity-selector-card__title { color: var(--text-primary, #f3f4f6); } [data-theme="dark"] .quantity-option { background: var(--bg-secondary, #1f2937); border-color: var(--border-color, #374151); } [data-theme="dark"] .quantity-option:hover:not(:disabled) { border-color: rgba(13, 217, 217, 0.6); background: rgba(13, 217, 217, 0.1); } [data-theme="dark"] .quantity-option--selected { background: rgba(13, 217, 217, 0.15); } [data-theme="dark"] .quantity-option__number { color: var(--text-primary, #f3f4f6); } [data-theme="dark"] .quantity-selector-card__price { color: var(--text-primary, #f3f4f6); } /* Mobile responsive */ @media (max-width: 600px) { .quantity-selector-card { padding: 16px; } .quantity-selector-card__header { flex-direction: column; gap: 4px; margin-bottom: 12px; } .quantity-selector-card__body { flex-direction: column; align-items: stretch; } .quantity-selector-card__options { justify-content: center; } .quantity-option { width: 80px; height: 70px; } .quantity-selector-card__total { align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color, #e5e7eb); } } /* Quantity Inline Bar - compact horizontal layout */ .quantity-inline { display: flex; align-items: center; gap: 20px; padding: 16px 20px; background: linear-gradient(135deg, rgba(13, 217, 217, 0.06) 0%, rgba(255, 135, 73, 0.04) 100%); border: 1px solid rgba(13, 217, 217, 0.2); border-radius: 10px; flex-wrap: wrap; } .quantity-inline__left { display: flex; flex-direction: column; gap: 2px; } .quantity-inline__label { font-size: 13px; font-weight: 600; color: var(--text-primary, #1f2937); } .quantity-inline__promo { font-size: 11px; color: #22c55e; font-weight: 500; } .quantity-inline__options { display: flex; gap: 8px; } .quantity-inline__btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 60px; height: 40px; padding: 0 14px; background: var(--bg-secondary, #f9fafb); border: 2px solid var(--border-color, #e5e7eb); border-radius: 8px; cursor: pointer; transition: all 0.15s ease; } .quantity-inline__btn:hover:not(:disabled) { border-color: rgba(13, 217, 217, 0.5); background: rgba(13, 217, 217, 0.05); } .quantity-inline__btn--selected { border-color: #0dd9d9; background: rgba(13, 217, 217, 0.1); } .quantity-inline__btn--disabled { opacity: 0.4; cursor: not-allowed; } .quantity-inline__num { font-size: 18px; font-weight: 700; color: var(--text-primary, #1f2937); } .quantity-inline__btn--selected .quantity-inline__num { color: #0dd9d9; } .quantity-inline__discount { font-size: 10px; font-weight: 700; color: white; background: linear-gradient(135deg, #22c55e, #16a34a); padding: 2px 5px; border-radius: 4px; } .quantity-inline__total { display: flex; align-items: center; gap: 16px; margin-left: auto; } .quantity-inline__save { font-size: 12px; color: var(--text-secondary, #6b7280); } .quantity-inline__save .--green { color: #22c55e; } .quantity-inline__price { font-size: 14px; color: var(--text-primary, #1f2937); } .quantity-inline__price strong { color: #0dd9d9; font-size: 16px; } /* Dark mode for inline quantity */ [data-theme="dark"] .quantity-inline { background: linear-gradient(135deg, rgba(13, 217, 217, 0.08) 0%, rgba(255, 135, 73, 0.04) 100%); border-color: rgba(13, 217, 217, 0.25); } [data-theme="dark"] .quantity-inline__label { color: var(--text-primary, #f3f4f6); } [data-theme="dark"] .quantity-inline__btn { background: var(--bg-secondary, #1f2937); border-color: var(--border-color, #374151); } [data-theme="dark"] .quantity-inline__num { color: var(--text-primary, #f3f4f6); } [data-theme="dark"] .quantity-inline__price { color: var(--text-primary, #f3f4f6); } /* Mobile responsive for inline quantity */ @media (max-width: 600px) { .quantity-inline { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 16px; } .quantity-inline__left { text-align: center; } .quantity-inline__options { justify-content: center; } .quantity-inline__total { justify-content: center; margin-left: 0; padding-top: 10px; border-top: 1px solid var(--border-color, #e5e7eb); } } /* Track Order Page Centering */ .track-order-section { width: 100%; display: flex; justify-content: center; } .track-order-section .container { text-align: center; } .track-order-header { text-align: center; } .track-order-form { max-width: 500px; margin: 0 auto; } /* ============================================ MOBILE TOUCH TARGETS (48px minimum) Improves mobile accessibility and UX ============================================ */ @media (max-width: 768px) { /* Buttons - ensure 48px minimum touch target */ .button, .btn, .btn-primary, .btn-secondary, button:not(.copy-btn):not(.navbar-toggle) { min-height: 48px; padding-top: 12px; padding-bottom: 12px; } /* Navigation links in sidenav */ .sidenav .header__menu li a { min-height: 48px; display: flex; align-items: center; padding: 12px 0; } /* Form inputs */ input[type='text'], input[type='email'], input[type='password'], input[type='tel'], input[type='number'], input[type='search'], select, textarea { min-height: 48px; padding: 12px 16px; } /* Clickable cards and rows */ .account-row__item { min-height: 60px; } /* Copy buttons */ .copy-btn { min-height: 44px; min-width: 44px; } /* Footer links */ .footer__menu a { min-height: 44px; display: inline-flex; align-items: center; } /* Close buttons */ .sidenav__close, .modal-close, .popup-close { min-width: 48px; min-height: 48px; } } /* Order summary copy button alignment */ .order-summary-value-with-copy { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .copy-btn--small { padding: 4px 8px; font-size: 12px; } .copy-btn--small svg { width: 14px; height: 14px; } /* --- PREMIUM VISUAL ENHANCEMENTS (Re-applied) --- */ :root { --glass-bg: rgba(255, 255, 255, 0.7); --glass-border: rgba(255, 255, 255, 0.5); --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1); } [data-theme="dark"] { --glass-bg: rgba(26, 29, 36, 0.7); --glass-border: rgba(255, 255, 255, 0.05); --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); } /* Glassmorphism Utility */ .glass-card { background: var(--glass-bg) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; } /* --- ANIMATIONS --- */ @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } } @keyframes glow { 0% { filter: drop-shadow(0 0 15px rgba(255, 135, 73, 0.4)); } 50% { filter: drop-shadow(0 0 25px rgba(255, 135, 73, 0.7)); } 100% { filter: drop-shadow(0 0 15px rgba(255, 135, 73, 0.4)); } } @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes shimmer { 0% { transform: translateX(-100%) rotate(45deg); } 100% { transform: translateX(100%) rotate(45deg); } } @keyframes successPop { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* --- HERO SECTION ANIMATIONS --- */ .mainscreen__picture { animation: float 6s ease-in-out infinite; } .mainscreen__img { animation: glow 4s ease-in-out infinite alternate; } /* Content Fade In */ .mainscreen__header, .mainscreen__subheader, .mainscreen__cta { animation: fadeInUp 0.8s ease-out forwards; } .mainscreen__subheader { animation-delay: 0.2s; opacity: 0; } .mainscreen__cta { animation-delay: 0.4s; opacity: 0; } /* --- MICRO-INTERACTIONS --- */ /* Button Shimmer */ .button.--primary, .btn-primary { position: relative; overflow: hidden; } .button.--primary::after, .btn-primary::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%); transform: rotate(45deg); animation: shimmer 3s infinite; pointer-events: none; } /* Button Press Effect */ .button:active, .btn:active, .btn-primary:active, .btn-form:active, .navbar-toggle:active, .copy-btn:active, .account-row__item:active { transform: scale(0.98); transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1); } /* Input Focus Glow */ input:focus, textarea:focus, select:focus, .order-form__input:focus, .checkout-form__input:focus { border-color: #0CD9D9 !important; box-shadow: 0 0 0 4px rgba(13, 217, 217, 0.15) !important; outline: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } /* Success Check */ .thank-you-checkmark, .success-check { animation: successPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } /* Link Glow */ a:not(.button):not(.btn):hover { text-shadow: 0 0 8px rgba(13, 217, 217, 0.3); } /* --- COMPONENT GLASSMORPHISM OVERRIDES --- */ .account-row__item, .order-form, .checkout-form, .account-details-card, .order-summary-card, .faqs-section__item { background: var(--glass-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); transition: all 0.3s ease; } .account-row__item:hover, .account-details-card:hover, .order-summary-card:hover, .faqs-section__item:hover { transform: translateY(-5px); box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.2) !important; border-color: rgba(255, 255, 255, 0.8); } /* --- VISUAL POLISH: SCROLLBAR & FOOTER --- */ /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #0891B2; } /* Modern Footer Polish */ .footer { position: relative; } .footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--color-primary), transparent); opacity: 0.5; } /* --- VISUAL POLISH: NOTIFICATIONS --- */ /* Glassmorphism Toasts */ div.toast { background: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15) !important; color: var(--color-text) !important; } [data-theme="dark"] div.toast { background: rgba(26, 29, 36, 0.9) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4) !important; color: #fff !important; } div.toast__message { color: inherit !important; } /* Live Purchase Notification */ .live-notification { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 10px 40px 0 rgba(31, 38, 135, 0.15); animation: slideInNotification 0.5s cubic-bezier(0.4, 0, 0.2, 1); } [data-theme="dark"] .live-notification { background: rgba(26, 29, 36, 0.95); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.5); } .live-notification__icon { background: linear-gradient(135deg, rgba(12, 217, 217, 0.1), rgba(8, 145, 178, 0.2)); color: var(--color-primary); box-shadow: 0 0 15px rgba(12, 217, 217, 0.3); } @keyframes slideInNotification { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Loading Spinner Brand Colors */ .thank-you-spinner, .order-lookup-spinner { border-top-color: var(--color-primary) !important; border-left-color: var(--color-primary-light, #0CD9D9) !important; } /* Skeleton Enhancements */ .skeleton { background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(12, 217, 217, 0.1) 37%, rgba(255, 255, 255, 0.1) 63%) !important; background-size: 400% 100% !important; } [data-theme="dark"] .skeleton { background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(12, 217, 217, 0.05) 37%, rgba(255, 255, 255, 0.05) 63%) !important; } /* --- VISUAL POLISH: SELECTION --- */ ::selection { background: var(--color-primary); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } [data-theme="dark"] ::selection { background: rgba(12, 217, 217, 0.4); color: #fff; } /* --- VISUAL POLISH: DYNAMIC STOCK --- */ .stock-visualizer { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 59, 48, 0.08); padding: 6px 12px; border-radius: 20px; border: 1px solid rgba(255, 59, 48, 0.2); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .stock-visualizer__bar { width: 40px; height: 6px; background: rgba(0, 0, 0, 0.1); border-radius: 3px; overflow: hidden; position: relative; } [data-theme="dark"] .stock-visualizer__bar { background: rgba(255, 255, 255, 0.1); } .stock-visualizer__fill { height: 100%; background: linear-gradient(90deg, #ff3b30, #ff9500); border-radius: 3px; box-shadow: 0 0 10px rgba(255, 59, 48, 0.4); transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .stock-visualizer__text { font-size: 11px; font-weight: 700; color: #d63031; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1; } [data-theme="dark"] .stock-visualizer__text { color: #ff6b6b; text-shadow: 0 0 10px rgba(255, 59, 48, 0.3); } /* --- VISUAL POLISH: ANIMATED SHIELD --- */ .ranked-ready-shield { display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); filter: drop-shadow(0 0 5px rgba(12, 217, 217, 0.6)); animation: shieldPulse 2s infinite ease-in-out; margin-left: 8px; } .ranked-ready-shield svg { width: 20px; height: 20px; } @keyframes shieldPulse { 0% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(12, 217, 217, 0.6)); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(12, 217, 217, 1)); } 100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(12, 217, 217, 0.6)); } } /* --- VISUAL POLISH: GLASS EXIT INTENT --- */ .exit-intent-overlay.glass-mode { backdrop-filter: blur(8px); background: rgba(0, 0, 0, 0.6); } .exit-intent-popup.glass-mode { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .exit-intent-popup.glass-mode { background: rgba(30, 35, 45, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); } /* --- VISUAL POLISH: GLOW PRICES --- */ .account-row__price { transition: all 0.3s ease; padding: 2px 6px; border-radius: 4px; } .account-row__item:hover .account-row__price { color: #0CD9D9; text-shadow: 0 0 12px rgba(12, 217, 217, 0.6); transform: scale(1.05); } /* --- VISUAL POLISH: FAQ ANIMATION --- */ .faq-details { border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 12px; background: var(--bg-secondary); transition: all 0.3s ease; overflow: hidden; } .faq-details:hover { border-color: var(--color-primary); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } [data-theme="dark"] .faq-details:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .faq-summary { padding: 16px 20px; cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--color-header); } .faq-summary::-webkit-details-marker { display: none; } .faq-summary::after { content: '+'; font-size: 20px; font-weight: 400; transition: transform 0.3s ease; } .faq-details[open] .faq-summary::after { transform: rotate(45deg); } .faq-content { padding: 0 20px 20px 20px; color: var(--color-text); line-height: 1.6; opacity: 0; animation: slideDown 0.3s ease forwards; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Coupon Toast Style */ .toast--coupon { border-left-color: #f47e27; /* AussyELO Orange */ background: rgba(30, 35, 45, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(244, 126, 39, 0.3); } .toast--coupon .toast__icon { color: #f47e27; } .toast--coupon .toast__message { color: #fff; font-weight: 600; } [data-theme="light"] .toast--coupon { background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(244, 126, 39, 0.2); } [data-theme="light"] .toast--coupon .toast__message { color: #111; } /* ============================================ V2: Holographic 3D Card Tilt ============================================ */ .js-tilt-card { /* Optimize for 3D transforms */ transform-style: preserve-3d; backface-visibility: hidden; /* Smooth return transition, but instant mousemove */ transition: transform 0.1s ease-out; will-change: transform; position: relative; overflow: hidden; /* Contain glare */ z-index: 1; /* Ensure on top */ } /* Increase z-index on hover so it pops over neighbors */ .js-tilt-card:hover { z-index: 10; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); /* Enhanced shadow lift */ } .tilt-glare { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; mix-blend-mode: overlay; /* Better blending */ z-index: 2; border-radius: inherit; /* Follow card radius */ } [data-theme="dark"] .tilt-glare { mix-blend-mode: soft-light; /* Softer glare in dark mode */ } /* ============================================ V2: Animated Gradient Borders ============================================ */ @keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .animated-border-gradient { position: relative; border: double 2px transparent; border-radius: 12px; background-image: linear-gradient(var(--bg-secondary), var(--bg-secondary)), linear-gradient(115deg, #f47e27, #ec4899, #8b5cf6, #f47e27); background-origin: border-box; background-clip: padding-box, border-box; background-size: 200% 200%; animation: gradientFlow 3s ease infinite; } /* Apply directly to badges for immediate effect */ .account-row__badge.--ranked-ready, .account-row__badge.--RankedReady, .account-row__badge.--premium, .account-row__badge.--Premium { /* Override standard badge styles to allow border trick */ border: 2px solid transparent !important; background: linear-gradient(#e0f2fe, #e0f2fe) padding-box, linear-gradient(115deg, #0ea5e9, #6366f1, #0ea5e9) border-box !important; background-origin: border-box !important; background-clip: padding-box, border-box !important; background-size: 200% 100% !important; animation: gradientFlow 2s linear infinite !important; color: #0284c7 !important; box-shadow: 0 2px 10px rgba(14, 165, 233, 0.2); } [data-theme="dark"] .account-row__badge.--ranked-ready, [data-theme="dark"] .account-row__badge.--RankedReady { background: linear-gradient(#0f172a, #0f172a) padding-box, linear-gradient(115deg, #38bdf8, #818cf8, #38bdf8) border-box !important; color: #38bdf8 !important; } /* Sale Badge - Fiery Gradient */ .account-row__badge.--sale, .account-row__badge.--Sale { border: 2px solid transparent !important; background: linear-gradient(#fff1f2, #fff1f2) padding-box, linear-gradient(115deg, #dc2626, #f59e0b, #dc2626) border-box !important; background-origin: border-box !important; background-clip: padding-box, border-box !important; background-size: 200% 100% !important; animation: gradientFlow 2s linear infinite !important; color: #dc2626 !important; box-shadow: 0 2px 10px rgba(220, 38, 38, 0.2); } [data-theme="dark"] .account-row__badge.--sale, [data-theme="dark"] .account-row__badge.--Sale { background: linear-gradient(#1a0505, #1a0505) padding-box, linear-gradient(115deg, #ef4444, #f59e0b, #ef4444) border-box !important; color: #ef4444 !important; } /* ============================================ V2: Animated Rank Emblems (Text Effects) ============================================ */ /* Since we are targeting the text span for now */ .account-row__be { position: relative; display: inline-block; } /* Shimmer Effect for Gold/Silver */ @keyframes textShimmer { 0% { background-position: -200%; } 100% { background-position: 200%; } } /* Let's use a universal subtle pulse for now */ .account-row__be { transition: color 0.3s, text-shadow 0.3s; } .account-row__item:hover .account-row__be { text-shadow: 0 0 8px currentColor; animation: float 2s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } /* Theme Slider Component */ .theme-slider { position: relative; width: 68px; height: 32px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 32px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); overflow: hidden; touch-action: none; -webkit-tap-highlight-color: transparent; transition: all 0.3s ease; margin-left: 0.5rem; } [data-theme='dark'] .theme-slider { background: rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.1); } /* Track Icons (Static Background) */ .theme-slider__track-icon { position: absolute; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; z-index: 1; /* Behind handle (z-index 2) */ pointer-events: none; color: #6b7280; display: flex; align-items: center; justify-content: center; transition: color 0.3s ease; } [data-theme='dark'] .theme-slider__track-icon { color: rgba(255, 255, 255, 0.5); } /* Dark Mode: Track Moon Icon "Pop" */ [data-theme='dark'] .theme-slider__track-icon--moon { color: #38bdf8 !important; filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.9)); opacity: 1; } /* Dark Mode: Handle Moon Icon "Pop" */ [data-theme='dark'] .theme-slider__icon--moon { color: #38bdf8 !important; filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.8)); opacity: 1; } /* Dark Mode: Handle Glow */ [data-theme='dark'] .theme-slider__handle { box-shadow: 0 0 8px rgba(56, 189, 248, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3); } .theme-slider__track-icon--sun { left: 6px; color: #FF8749; /* Always orange, maybe dim it? */ opacity: 0.8; } .theme-slider__track-icon--moon { right: 6px; /* Uses inherited color (dark gray in light mode, white in dark mode) */ opacity: 0.8; } .theme-slider__track { width: 100%; height: 100%; position: relative; padding: 2px; box-sizing: border-box; } .theme-slider__fill { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: linear-gradient(90deg, #FF8749, #FFD049); /* Sunset gradient */ opacity: 0; /* Hidden by default, only shows when dragging to moon? No, fills track */ /* Revised design: Track is background. Handle moves. Let's stick to the plan: fill follows handle. */ background: linear-gradient(90deg, #1a1d24, #2d3748); opacity: 0; transition: opacity 0.3s; } [data-theme='dark'] .theme-slider__fill { opacity: 1; /* Dark mode fill */ } /* Handle is the circular knob */ .theme-slider__handle { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; background: white; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transform: translateX(0); display: flex; align-items: center; justify-content: center; z-index: 2; transition: transform 0.1s cubic-bezier(0.2, 0.8, 0.2, 1); /* Snappy drag */ /* Note: JS sets 'left' percentage. We need to override or work with it. If JS sets left: 0% -> 100%. We need 100% to equate to 'right side minus width'. Best way: let JS handle 0-100 logic, but use calc in CSS? No JS sets style. */ } [data-theme='dark'] .theme-slider__handle { background: #2d3748; /* Lighter gray for contrast */ border: 2px solid #38bdf8; /* Blue border to match moon */ box-shadow: 0 0 10px rgba(56, 189, 248, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4); } .theme-slider__icon { width: 14px; height: 14px; position: absolute; transition: opacity 0.2s ease, transform 0.2s ease; } .theme-slider__icon--sun { color: #FF8749; opacity: 1; transform: scale(1); filter: drop-shadow(0 0 2px rgba(255, 135, 73, 0.6)); /* Glow effect */ } .theme-slider__icon--moon { color: #f3f4f6; opacity: 0; transform: scale(0.5) rotate(-90deg); } [data-theme='dark'] .theme-slider__icon--sun { opacity: 0; transform: scale(0.5) rotate(90deg); } /* Dark Mode: Moon Icon "Pop" (Authoritative) */ [data-theme='dark'] .theme-slider__icon--moon, [data-theme='dark'] .theme-slider__icon--moon.theme-slider__icon--active { opacity: 1 !important; transform: scale(1) rotate(0) !important; color: #38bdf8 !important; filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.9)) !important; } /* Mobile responsive */ @media (max-width: 768px) { .theme-slider { margin-left: 0.5rem; transform: scale(0.9); } } /* Premium Benefit Highlights */ .benefit-highlights { display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; gap: 40px; margin: 30px 0; flex-wrap: wrap; width: 100%; } .benefit-item { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 12px; transition: transform 0.3s ease; min-width: 120px; background: transparent !important; border: none !important; box-shadow: none !important; } .benefit-item:hover { transform: translateY(-5px); } .benefit-icon-wrapper { position: relative; width: 80px; height: 80px; background: transparent !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.05) !important; transition: all 0.3s ease; overflow: hidden; } .benefit-svg { width: 32px; height: 32px; z-index: 2; transition: all 0.3s ease; } /* Colors & Glows */ .delivery { color: #00d4ff; } .warranty { color: #4cc249; } .security { color: #ff8749; } .delivery .icon-glow { background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, transparent 70%); } .warranty .icon-glow { background: radial-gradient(circle, rgba(76, 194, 73, 0.3) 0%, transparent 70%); } .security .icon-glow { background: radial-gradient(circle, rgba(255, 135, 73, 0.3) 0%, transparent 70%); } .icon-glow { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.3; z-index: 1; filter: blur(10px); transition: opacity 0.3s ease; } .benefit-item:hover .icon-glow { opacity: 0.7; } .benefit-item:hover .benefit-icon-wrapper { border-color: currentColor !important; box-shadow: 0 0 15px currentColor !important; } .notification-dot { animation: pulse 2s infinite; } @keyframes pulse { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } } @media (max-width: 480px) { .benefit-highlights { gap: 20px; } .benefit-icon-wrapper { width: 60px; height: 60px; } .benefit-svg { width: 24px; height: 24px; } } /* ========================================== BLOG ARTICLE PAGE - PREMIUM STYLING ========================================== */ /* Article Page Container */ .article-page { padding: 40px 0 80px; background: var(--bg-primary); } .article-page__container { max-width: 1200px; margin: 0 auto; } /* Header Row with Title and Save Button */ .article-page__header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 30px; padding-bottom: 25px; border-bottom: 1px solid var(--border-color); } /* Premium Title Styling */ .article-page__title-main { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.2; color: var(--color-header); margin: 0; letter-spacing: -0.02em; flex: 1; } [data-theme="dark"] .article-page__title-main { background: linear-gradient(135deg, #ffffff 0%, #b8b8b8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Hero Image Styling */ .article-page__img { width: 100%; height: auto; border-radius: 16px; margin-bottom: 40px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); transition: transform 0.3s ease, box-shadow 0.3s ease; } [data-theme="dark"] .article-page__img { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05); } .article-page__img:hover { transform: translateY(-5px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2); } /* Article Content Typography */ .article-page__article { background: var(--bg-tertiary); border-radius: 20px; padding: 50px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05); border: 1px solid var(--border-color); } [data-theme="dark"] .article-page__article { background: linear-gradient(180deg, var(--bg-secondary) 0%, rgba(26, 29, 36, 0.95) 100%); border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); } /* Content H2 Headers */ .article-page__article h2 { font-size: 1.75rem; font-weight: 700; color: var(--color-header); margin: 50px 0 25px; padding-bottom: 12px; border-bottom: 2px solid var(--color-primary); position: relative; } .article-page__article h2:first-of-type { margin-top: 30px; } /* H2 accent line animation */ .article-page__article h2::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 60px; height: 4px; background: linear-gradient(90deg, var(--color-primary), #a064ff); border-radius: 2px; } /* Content H3 Headers */ .article-page__article h3 { font-size: 1.35rem; font-weight: 600; color: var(--color-header); margin: 35px 0 18px; padding-left: 15px; border-left: 4px solid var(--color-primary); } /* Paragraphs */ .article-page__article p { font-size: 1.1rem; line-height: 1.85; color: var(--color-text); margin-bottom: 20px; } /* Lists */ .article-page__article ul, .article-page__article ol { margin: 25px 0; padding-left: 25px; } .article-page__article li { font-size: 1.05rem; line-height: 1.8; color: var(--color-text); margin-bottom: 12px; } .article-page__article ul li::marker { color: var(--color-primary); } .article-page__article ol li::marker { color: var(--color-primary); font-weight: 600; } /* Links in Content */ .article-page__article a { color: var(--color-primary); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; transition: all 0.2s ease; } .article-page__article a:hover { border-bottom-color: var(--color-primary); } /* Strong text */ .article-page__article strong { color: var(--color-header); font-weight: 600; } /* Blockquotes */ .article-page__article blockquote { margin: 30px 0; padding: 25px 30px; background: linear-gradient(135deg, rgba(255, 140, 66, 0.08) 0%, rgba(160, 100, 255, 0.08) 100%); border-left: 5px solid var(--color-primary); border-radius: 0 12px 12px 0; font-style: italic; } [data-theme="dark"] .article-page__article blockquote { background: linear-gradient(135deg, rgba(255, 140, 66, 0.12) 0%, rgba(160, 100, 255, 0.12) 100%); } /* Article Footer */ .article-page__footer { margin-top: 60px; padding-top: 40px; border-top: 1px solid var(--border-color); } .article-page__footer-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; margin-bottom: 30px; } .article-page__footer-meta-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .article-page__date { font-size: 0.95rem; color: var(--color-text); opacity: 0.8; } .article-page__author { font-size: 0.95rem; font-weight: 600; color: var(--color-primary); padding: 4px 12px; background: rgba(255, 140, 66, 0.1); border-radius: 20px; } .article-page__reading-time { font-size: 0.9rem; color: var(--color-text); opacity: 0.7; } .article-page__back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 600; color: var(--color-primary); text-decoration: none; padding: 10px 20px; background: var(--bg-secondary); border-radius: 8px; transition: all 0.2s ease; } .article-page__back-link:hover { background: var(--color-primary); color: #fff; transform: translateX(-5px); } .article-page__back-link::before { content: '←'; font-size: 1.1rem; } /* Footer CTA Box */ .article-page__footer-cta { background: linear-gradient(135deg, rgba(255, 140, 66, 0.1) 0%, rgba(160, 100, 255, 0.1) 100%); padding: 30px; border-radius: 16px; border: 1px solid rgba(255, 140, 66, 0.2); } [data-theme="dark"] .article-page__footer-cta { background: linear-gradient(135deg, rgba(255, 140, 66, 0.15) 0%, rgba(160, 100, 255, 0.15) 100%); } .article-page__footer-cta p { font-size: 1.1rem; line-height: 1.7; margin: 0; } .article-page__footer-cta a { color: var(--color-primary); font-weight: 600; text-decoration: none; } /* ========================================== TABLE OF CONTENTS - PREMIUM STYLING ========================================== */ .toc-container { background: var(--bg-secondary); border-radius: 16px; padding: 25px 30px; margin-bottom: 40px; border: 1px solid var(--border-color); } [data-theme="dark"] .toc-container { background: rgba(26, 29, 36, 0.8); border: 1px solid rgba(255, 255, 255, 0.08); } .toc-container__header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .toc-container__title { font-size: 1.1rem; font-weight: 700; color: var(--color-header); margin: 0; } .toc-container__toggle { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--bg-tertiary); border-radius: 6px; color: var(--color-text); transition: all 0.3s ease; } .toc-container__toggle:hover { background: var(--color-primary); color: #fff; } .toc-container__list { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 8px; } .toc-container__link { display: block; padding: 12px 16px; font-size: 0.95rem; color: var(--color-text); text-decoration: none; background: var(--bg-tertiary); border-radius: 8px; border-left: 3px solid transparent; transition: all 0.2s ease; } .toc-container__link:hover { background: rgba(255, 140, 66, 0.1); border-left-color: var(--color-primary); color: var(--color-primary); transform: translateX(5px); } /* ========================================== READING PROGRESS BAR ========================================== */ .reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 4px; z-index: 9999; background: rgba(0, 0, 0, 0.1); } .reading-progress__bar { height: 100%; background: linear-gradient(90deg, var(--color-primary), #a064ff); transition: width 0.1s ease; border-radius: 0 2px 2px 0; box-shadow: 0 0 10px rgba(255, 140, 66, 0.5); } /* ========================================== PAGINATION - DARK MODE FIX ========================================== */ [data-theme="dark"] .pagination .page-item .page-link, [data-theme="dark"] .pagination .page-link, [data-theme="dark"] .pagination button, [data-theme="dark"] .pagination a { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--color-text) !important; } [data-theme="dark"] .pagination .page-item.active .page-link, [data-theme="dark"] .pagination .active .page-link, [data-theme="dark"] .pagination .active button { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; color: #fff !important; } [data-theme="dark"] .pagination .page-item .page-link:hover, [data-theme="dark"] .pagination .page-link:hover, [data-theme="dark"] .pagination button:hover, [data-theme="dark"] .pagination a:hover { background-color: var(--bg-tertiary) !important; border-color: var(--color-primary) !important; color: var(--color-primary) !important; } [data-theme="dark"] .pagination .page-item.disabled .page-link, [data-theme="dark"] .pagination .disabled .page-link, [data-theme="dark"] .pagination .disabled button { background-color: var(--bg-tertiary) !important; border-color: var(--border-color) !important; color: rgba(255, 255, 255, 0.3) !important; opacity: 0.6; } /* ========================================== MOBILE RESPONSIVE - BLOG ARTICLE ========================================== */ @media (max-width: 768px) { .article-page { padding: 20px 0 60px; } .article-page__article { padding: 25px 20px; border-radius: 12px; } .article-page__header-row { flex-direction: column; gap: 15px; } .article-page__title-main { font-size: 1.75rem; } .article-page__article h2 { font-size: 1.4rem; margin: 35px 0 18px; } .article-page__article h3 { font-size: 1.15rem; } .article-page__article p, .article-page__article li { font-size: 1rem; } .article-page__footer-meta { flex-direction: column; align-items: flex-start; } .article-page__img { border-radius: 12px; margin-bottom: 25px; } .toc-container { padding: 20px; } .toc-container__link { padding: 10px 12px; font-size: 0.9rem; } } /* ========================================== LATEST BLOG SECTION - Homepage SEO Internal Linking ========================================== */ .latest-blog-section { padding: 60px 0; background: var(--bg-secondary); display: flex !important; justify-content: center !important; width: 100%; } .latest-blog-section .page-subheader { margin-bottom: 40px; opacity: 0.8; text-align: center !important; display: block; margin-left: auto; margin-right: auto; max-width: 800px; } .latest-blog-section .container { text-align: center; display: block; width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 20px !important; } .latest-blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin: 40px auto; /* Vertical spacing + Horizontal Centering */ width: 100%; max-width: 1200px; justify-content: center; text-align: left; /* Reset text align for card content */ } .latest-blog-card { display: flex; flex-direction: column; background: var(--bg-tertiary); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid var(--border-color); } .latest-blog-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); } [data-theme="dark"] .latest-blog-card:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); } .latest-blog-card__img { width: 100%; height: 180px; object-fit: cover; } .latest-blog-card__content { padding: 20px; display: flex; flex-direction: column; gap: 8px; } .latest-blog-card__title { font-size: 1.1rem; font-weight: 600; color: var(--color-header); margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .latest-blog-card__date { font-size: 0.85rem; color: var(--text-secondary); opacity: 0.7; } @media (max-width: 768px) { .latest-blog-grid { grid-template-columns: 1fr; } .latest-blog-section { padding: 40px 0; } } /* ============================================== 1000x VISUAL UPGRADE - PREMIUM GLASS UI ============================================== */ /* Glass Card Container */ .glass-panel { background: rgba(23, 23, 23, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 24px; padding: 32px; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.2); } .glass-panel::before { content: ''; position: absolute; inset: 0; border-radius: 24px; padding: 1px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.01)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .glass-panel:hover { transform: translateY(-4px); background: rgba(30, 30, 30, 0.6); box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1); } /* Gradient Glow Effect on Hover */ .glass-panel::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%; background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.06), transparent 40%); opacity: 0; transition: opacity 0.5s; pointer-events: none; z-index: 1; } .glass-panel:hover::after { opacity: 1; } /* Icon Styles */ .glass-icon-wrapper { width: 64px; height: 64px; border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; transition: all 0.3s ease; position: relative; } .glass-panel:hover .glass-icon-wrapper { transform: scale(1.1) rotate(5deg); background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.1); } /* Icon Gradients */ .glass-icon-wrapper.--blue { box-shadow: 0 0 30px rgba(59, 130, 246, 0.15); } .glass-icon-wrapper.--purple { box-shadow: 0 0 30px rgba(139, 92, 246, 0.15); } .glass-icon-wrapper.--emerald { box-shadow: 0 0 30px rgba(16, 185, 129, 0.15); } .glass-icon-wrapper.--amber { box-shadow: 0 0 30px rgba(245, 158, 11, 0.15); } /* Typography */ .glass-title { font-size: 1.25rem; font-weight: 700; color: #FFFFFF; margin-bottom: 12px; letter-spacing: -0.01em; } .glass-text { font-size: 0.95rem; color: #94A3B8; line-height: 1.6; margin: 0; } .glass-text strong { color: #E2E8F0; font-weight: 600; } /* Grids */ .glass-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; } .glass-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; } /* Responsive */ @media (max-width: 968px) { .glass-grid-2, .glass-grid-3 { gap: 16px; } } /* PREMIUM FAQ ACCORDIONS (Glass) */ [data-theme="dark"] .faqs-item { background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 12px; margin-bottom: 16px; transition: all 0.3s ease; overflow: hidden; } [data-theme="dark"] .faqs-item:hover { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.1) !important; transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .faqs-question { background: transparent !important; color: #fff !important; font-weight: 600; padding: 20px; } [data-theme="dark"] .faqs-answer { background: rgba(0, 0, 0, 0.2) !important; border-top: 1px solid rgba(255, 255, 255, 0.05); color: #94A3B8 !important; padding: 20px; line-height: 1.7; } [data-theme="dark"] .faqs-icon-open { transform: rotate(180deg); stroke: var(--color-primary); filter: drop-shadow(0 0 8px var(--color-primary)); } /* PREMIUM CONTACT FORM (Glass Inputs) */ [data-theme="dark"] .contact-form-container { background: transparent !important; /* Let parent glass container show */ } [data-theme="dark"] .contact-form-input { background: rgba(0, 0, 0, 0.2) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: #fff !important; transition: all 0.3s ease; } [data-theme="dark"] .contact-form-input:focus { background: rgba(0, 0, 0, 0.4) !important; border-color: var(--color-primary) !important; box-shadow: 0 0 0 2px rgba(255, 135, 73, 0.1); outline: none; } [data-theme="dark"] .contact-form-label { color: #94A3B8 !important; font-weight: 500; letter-spacing: 0.5px; } /* PREMIUM DAILY DROP (Cinematic Blur) */ [data-theme="dark"] .daily-drop-modal { backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; background-color: rgba(10, 10, 12, 0.6) !important; } [data-theme="dark"] .daily-drop-modal__content { background: rgba(23, 23, 23, 0.65) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 25px 80px -15px rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(16px); } /* Restore Responsive Padding for Glass Panel */ @media (max-width: 968px) { .glass-panel { padding: 24px; } } /* ============================================== LIGHT MODE OVERRIDES ============================================== */ [data-theme="light"] .glass-panel { background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.05); } [data-theme="light"] .glass-panel::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2)); } [data-theme="light"] .glass-panel:hover { background: rgba(255, 255, 255, 0.9); box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05); } [data-theme="light"] .glass-text { color: #475569; } [data-theme="light"] .glass-text strong, [data-theme="light"] .glass-title { color: #0F172A; } [data-theme="light"] .glass-icon-wrapper { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.05); } [data-theme="light"] .glass-panel:hover .glass-icon-wrapper { background: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.1); } /* ============================================== SPACING STANDARDIZATION ============================================== */ :root { --section-spacing-desktop: 120px; --section-spacing-mobile: 60px; --content-gap: 60px; } /* Standardize spacing for all major sections */ .third-screen, .info-screen, .faqs-section, .subscribe-section, .footer-review-section { padding-top: var(--section-spacing-desktop) !important; padding-bottom: var(--section-spacing-desktop) !important; } /* Hero Section - Compact User Request */ .mainscreen { padding-top: 20px !important; padding-bottom: 20px !important; min-height: unset !important; height: auto !important; display: flex !important; align-items: center !important; } /* Revert Image Constraint (User Request) */ /* .mainscreen__img normal size */ /* Reduce gap between Hero and Account Selection (League Banner) */ .account-section { padding-top: 30px !important; /* Was 120px */ } /* Consistent gap between Header and Grid */ .page-header { margin-bottom: var(--content-gap) !important; } /* Consistent gap between Grid and Next Section/Header */ .glass-grid-2, .glass-grid-3 { margin-bottom: var(--section-spacing-desktop); } /* Clean up last child to prevent double spacing */ .glass-grid-2:last-child, .glass-grid-3:last-child { margin-bottom: 0; } /* Mobile Adjustments */ @media (max-width: 768px) { /* Standard Sections Mobile Spacing */ .third-screen, .info-screen, .account-section { padding-top: var(--section-spacing-mobile) !important; padding-bottom: var(--section-spacing-mobile) !important; } /* Compact Hero Mobile */ .mainscreen { padding-top: 20px !important; padding-bottom: 20px !important; min-height: 350px !important; } .page-header { margin-bottom: 30px !important; } .glass-grid-2, .glass-grid-3 { margin-bottom: var(--section-spacing-mobile); } } /* ========================================= DESKTOP CURRENCY PICKER IMPROVEMENTS ========================================= */ @media (min-width: 769px) { .currency-picker__list { min-width: 220px !important; padding: 8px !important; /* Basic display logic remains, we just override styling */ background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.2) !important; border-radius: 12px !important; } [data-theme="dark"] .currency-picker__list { background: #1e293b; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5) !important; } .currency-picker__option { display: flex !important; align-items: center !important; flex-direction: row !important; /* Force row layout */ gap: 12px !important; padding: 10px 12px !important; margin-bottom: 4px !important; border-radius: 8px !important; transition: all 0.2s ease !important; } /* Symbol circle */ .currency-picker__symbol { width: 32px !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #f1f5f9; border-radius: 50% !important; font-weight: 700 !important; font-size: 0.9rem !important; color: #64748b; transition: all 0.2s ease !important; margin-right: 0 !important; /* Reset any margins */ } [data-theme="dark"] .currency-picker__symbol { background: rgba(12, 217, 217, 0.15) !important; color: #0cd9d9 !important; border: 1px solid rgba(12, 217, 217, 0.3) !important; box-shadow: 0 0 10px rgba(12, 217, 217, 0.15); } /* Label text */ .currency-picker__label { font-weight: 600 !important; font-size: 0.95rem !important; color: #334155; margin: 0 !important; /* Reset margins */ } [data-theme="dark"] .currency-picker__label { color: #e2e8f0; } /* Active State */ .currency-picker__option.active { background: rgba(255, 135, 73, 0.1) !important; } .currency-picker__option.active .currency-picker__symbol { background: linear-gradient(135deg, #FF8749 0%, #FF6B2B 100%) !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(255, 107, 43, 0.3) !important; } .currency-picker__option.active .currency-picker__label { color: #FF6B2B !important; } /* Hover State */ .currency-picker__option:hover { background: #f8fafc !important; } [data-theme="dark"] .currency-picker__option:hover { background: rgba(255, 255, 255, 0.05) !important; } .currency-picker__option:hover .currency-picker__symbol { transform: scale(1.1); } /* Checkmark */ .currency-picker__check { margin-left: auto !important; color: #FF6B2B !important; } } /* ============================================ BE CALCULATOR NAV HIGHLIGHT ============================================ */ /* Nav Highlight for BE Calculator Link */ .nav-highlight, .nav-link.nav-highlight { color: #0CD9D9 !important; font-weight: 600 !important; position: relative; } .nav-highlight::after, .nav-link.nav-highlight::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #0CD9D9, transparent); border-radius: 2px; } .nav-highlight:hover, .nav-link.nav-highlight:hover { color: #fff !important; } [data-theme="dark"] .nav-highlight, [data-theme="dark"] .nav-link.nav-highlight { color: #22eaea !important; } [data-theme="dark"] .nav-highlight::after, [data-theme="dark"] .nav-link.nav-highlight::after { background: linear-gradient(90deg, #22eaea, transparent); } /* NEW Badge for Nav Links */ .nav-badge { display: inline-block; padding: 2px 6px; margin-left: 6px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #FF6B2B, #ff8749); border-radius: 4px; vertical-align: middle; animation: badge-pulse 2s ease-in-out infinite; } @keyframes badge-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.02); } } /* New Badge Style */ .nav-badge { display: inline-block; padding: 2px 5px; font-size: 0.7em; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: middle; background-color: #22c55e; border-radius: 4px; margin-left: 6px; position: relative; top: -1px; } /* Blog Table Styles */ .blog-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .blog-table thead { background: linear-gradient(135deg, #FF8749 0%, #e56b00 100%); color: #fff; } .blog-table th { padding: 12px 16px; text-align: left; font-weight: 600; white-space: nowrap; } .blog-table td { padding: 10px 16px; border-bottom: 1px solid var(--border-color); } .blog-table tbody tr:nth-child(even) { background-color: var(--bg-secondary); } .blog-table tbody tr:hover { background-color: var(--bg-tertiary); } /* Dark mode blog table */ [data-theme="dark"] .blog-table { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .blog-table thead { background: linear-gradient(135deg, #FF9F6D 0%, #FF8749 100%); } [data-theme="dark"] .blog-table tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.03); } [data-theme="dark"] .blog-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.06); } /* Responsive table */ @media (max-width: 768px) { .blog-table { font-size: 0.85rem; } .blog-table th, .blog-table td { padding: 8px 10px; } } /* ============================================ SEASON 16 LAUNCH COMPONENTS ============================================ */ /* Countdown Timer - Always centered */ .s16-countdown { background: linear-gradient(135deg, rgba(34, 234, 234, 0.08) 0%, rgba(167, 139, 250, 0.08) 100%); border-bottom: 1px solid rgba(34, 234, 234, 0.2); padding: 12px 20px; text-align: center; position: relative; overflow: hidden; width: 100%; } [data-theme="dark"] .s16-countdown { background: linear-gradient(135deg, rgba(34, 234, 234, 0.15) 0%, rgba(167, 139, 250, 0.15) 100%); border-bottom: 1px solid rgba(34, 234, 234, 0.3); } .s16-countdown__content { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; width: 100%; } /* Hero Banner - Always centered */ .s16-hero-banner { position: relative; padding: 60px 20px; overflow: hidden; margin-bottom: 0; width: 100%; background: linear-gradient(135deg, #f0fafa 0%, #f5f0ff 50%, #fafafa 100%); } [data-theme="dark"] .s16-hero-banner { background: linear-gradient(135deg, #0a1a1a 0%, #0f0a1a 50%, #0f1115 100%); } .s16-hero-banner__content { position: relative; z-index: 10; max-width: 800px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; width: 100%; } .s16-hero-banner__promo { position: relative; margin-bottom: 30px; display: flex; flex-direction: column; align-items: center; width: 100%; } .s16-promo-code { display: flex; flex-direction: column; align-items: center; gap: 8px; } .s16-hero-banner__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; width: 100%; } /* Season 16 Active Mode - Compact and Connected */ .s16-hero-banner { padding: 35px 20px !important; /* Reduced from 60px */ margin-bottom: 0 !important; } /* When S16 is active, reduce gap and connect sections */ .account-section.s16-active { padding-top: 20px !important; margin-top: 0 !important; } /* Hide the account-controls tab completely when S16 is active */ .account-section.s16-active .account-controls { display: none !important; } /* ============================================ CLEAN STICKY HEADER - Simple and Working The header stays in normal document flow but becomes sticky when you scroll past it ============================================ */ /* Make the header sticky within its container */ /* CSS for JS Sticky Header */ .header-fixed { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; width: 100% !important; animation: slideDown 0.3s ease; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* Light mode background */ .header { background-color: rgba(250, 250, 250, 0.95); border-bottom: 1px solid rgba(0, 0, 0, 0.08); } /* Dark mode background */ [data-theme="dark"] .header { background-color: rgba(15, 17, 21, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* --- CUSTOM DARK MODE SCROLLBAR --- */ [data-theme='dark'] ::-webkit-scrollbar { width: 10px; } [data-theme='dark'] ::-webkit-scrollbar-track { background: #0f1115; } [data-theme='dark'] ::-webkit-scrollbar-thumb { background: #2e3440; border-radius: 5px; border: 2px solid #0f1115; } [data-theme='dark'] ::-webkit-scrollbar-thumb:hover { background: #0CD9D9; /* Hextech Cyan Hover */ } /* Region Header Styling */ .account-container__header.--region-focus { font-size: 2.8rem; font-weight: 800; text-transform: uppercase; margin-bottom: 50px; margin-top: 40px; padding-top: 20px; padding-bottom: 20px; color: var(--text-secondary); padding-left: 10px; letter-spacing: 1px; } /* Icon Styling */ .premium-icon { transition: transform 0.3s ease; } .premium-icon:hover { transform: translateY(-5px); } /* Navigation Split Styling */ .nav-interactive-wrapper { display: flex; align-items: center; gap: 0; /* Important for visual cohesion */ } /* Ensure NavLink acts like part of the group */ .nav-interactive-wrapper .nav-link { padding-right: 4px; /* Move space to toggle */ } .nav-toggle-icon { display: flex; align-items: center; justify-content: center; padding: 8px 4px; /* Generous touch target but slim visual */ cursor: pointer; color: var(--text-dim); transition: color 0.2s; } .nav-toggle-icon:hover { color: var(--primary); } /* Mobile Specific Adjustments */ @media (max-width: 991px) { .nav-interactive-wrapper { width: 100%; justify-content: space-between; } .nav-interactive-wrapper .nav-link { flex: 1; /* Make link take up available width */ } .nav-toggle-icon { padding: 12px 20px; /* Larger touch target on mobile */ border-left: 1px solid rgba(255, 255, 255, 0.05); /* Subtle divider */ } /* Override default angle rotation for dedicated toggle */ .nav-angle.rotated { transform: rotate(180deg); } } /* Out of Stock Indicator */ .stock-indicator--out { color: #ff6b6b; } .stock-indicator--out .stock-indicator__dot { background: #ff6b6b; animation: none; } /* Compact Layout Utilities */ .account-section.--compact { padding-top: 15px !important; padding-bottom: 15px !important; } .page-header.--compact { margin-top: 10px !important; margin-bottom: 10px !important; } .benefit-highlights.--compact { margin-top: 15px !important; margin-bottom: 15px !important; gap: 15px !important; } .benefit-highlights.--compact .benefit-item { transform: scale(0.85); } /* ========================================= HERO SECTION STABILITY & ANIMATIONS Extracted from Index.razor to prevent Hydration FOUC ========================================= */ /* Hero specific upgrades - Subtle Atmosphere Connection */ .logo-overlay { display: block; position: absolute; top: -20%; right: -10%; width: 70%; height: 140%; /* Soft blue/purple glow behind Yasuo bleeding left */ background: radial-gradient(circle at 60% 50%, rgba(99, 91, 255, 0.15) 0%, rgba(34, 234, 234, 0.05) 50%, transparent 80%); z-index: 0; pointer-events: none; filter: blur(60px); /* Make it super soft */ } .mainscreen__header mark { color: transparent; background: linear-gradient(90deg, #22EAEA, #A78BFA); -webkit-background-clip: text; background-clip: text; font-weight: 800; } /* Strict Alignment Rules */ .mainscreen__header { margin: 0 0 16px 0 !important; padding: 0 !important; line-height: 48px !important; /* Fixed PX height instead of relative */ height: 48px; /* Force height lock */ min-height: 48px; overflow: visible; /* Allow text to render even if slightly larger, preventing clip */ position: relative; text-align: left !important; left: -12px !important; white-space: nowrap; /* Prevent wrapping at specific widths */ } .mainscreen__subheader { display: block; margin: 0 0 24px 0 !important; padding: 0 !important; text-align: left; /* Force left align */ } .hero-trust { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 0.9rem; color: var(--text-dim); font-weight: 500; } .hero-trust__item { display: flex; align-items: center; gap: 6px; } .hero-trust__item svg { color: #0CD9D9; filter: drop-shadow(0 0 5px rgba(12, 217, 217, 0.3)); } /* CTA Heartbeat Pulse */ .mainscreen__cta .button { animation: heartbeat-cta 4s infinite ease-in-out; box-shadow: 0 4px 15px rgba(255, 100, 100, 0.4); /* Base shadow */ } @keyframes heartbeat-cta { 0% { box-shadow: 0 4px 15px rgba(255, 100, 100, 0.4); transform: scale(1); } 5% { box-shadow: 0 4px 25px rgba(255, 100, 100, 0.6); transform: scale(1.02); } 10% { box-shadow: 0 4px 15px rgba(255, 100, 100, 0.4); transform: scale(1); } 100% { box-shadow: 0 4px 15px rgba(255, 100, 100, 0.4); transform: scale(1); } } /* Atmospheric Dust Particles */ .dust-particle { position: absolute; background: white; border-radius: 50%; opacity: 0.3; pointer-events: none; animation: float-dust 20s infinite linear; } .p1 { width: 3px; height: 3px; top: 40%; left: 60%; animation-duration: 25s; opacity: 0.2; } .p2 { width: 2px; height: 2px; top: 20%; left: 80%; animation-duration: 35s; opacity: 0.15; } .p3 { width: 4px; height: 4px; top: 70%; left: 50%; animation-duration: 40s; opacity: 0.1; } @keyframes float-dust { 0% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-40px) translateX(20px); } 100% { transform: translateY(0) translateX(0); } } /* Dark Mode Fix for Footer Review */ [data-theme="dark"] .footer-review { background-color: var(--bg-secondary) !important; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .footer-review__desc--static { font-size: 0.9rem; color: var(--color-text-muted); margin: 0; line-height: 1.5; }