/* ========================================================================== XIDAX Configurator — Dark Mode / Gaming Vibe Override Loaded AFTER configurator.css (priority 5 vs 4) to override via cascade. ========================================================================== */ /* ========================= 1. CSS Custom Properties / Design Tokens ========================= */ :root { --brand: #205c0c; --brand-2: #8fd59d; --brand-bright: #02bc00; --brand-glow: rgba(32, 92, 12, 0.4); --brand-glow-strong: rgba(32, 92, 12, 0.65); --brand-glow-subtle: rgba(32, 92, 12, 0.15); --bg: #050606; --panel: #0d0f10; --panel-2: #111416; --panel-hover: #161a1d; --line: #1a1f22; --line-light: #252b2f; --input-border: #2a2f31; --text: #f8f9f9; --text-muted: #9aa3a6; --text-dim: #6b7275; --shadow-color: rgba(0, 0, 0, 0.55); --ring-outline: rgba(32, 92, 12, 0.35); --ring-glow: rgba(32, 92, 12, 0.5); --cta-fg: #03180b; --danger: #cc3843; --intel-blue: #0071c5; --amd-red: #ED1C24; --radius: 16px; --radius-sm: 12px; --radius-xs: 8px; --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ========================= 2. Global / Body ========================= */ body { background-color: var(--bg) !important; color: var(--text); } #configurator { background-color: var(--bg); position: relative; overflow-x: hidden; } #page { background-color: var(--bg) !important; } #wrapper { background-color: var(--bg) !important; } #loading_display { background-color: rgba(5, 6, 6, 0.88); } a { color: var(--text-muted); } a:hover { color: var(--brand-bright); } /* ========================= 3. Hero Section Removal ========================= */ .wrapper, #w1, #w2, #w3, #bg1, #bg2, .bg-shape { display: none !important; } /* ========================= 4. Gaming Background Effects ========================= */ .vibe { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(1100px 600px at 100% -10%, rgba(32, 92, 12, 0.10), transparent 60%), radial-gradient(1000px 700px at -10% 110%, rgba(32, 92, 12, 0.08), transparent 60%); } .vibe::before, .vibe::after { content: ""; position: absolute; inset: 0; pointer-events: none; } /* Animated isometric grid */ .vibe::before { background: linear-gradient(transparent 96%, rgba(32, 92, 12, 0.06) 100%), repeating-linear-gradient(45deg, rgba(32, 92, 12, 0.05) 0 2px, transparent 2px 60px), repeating-linear-gradient(135deg, rgba(32, 92, 12, 0.05) 0 2px, transparent 2px 60px); background-size: 100% 100%, 120px 120px, 120px 120px; animation: gridPan 18s linear infinite; mix-blend-mode: screen; opacity: 0.35; } @keyframes gridPan { to { background-position: 0 0, 120px 0, 0 120px; } } /* Floating particles */ .vibe::after { background-image: radial-gradient(6px 6px at 12% 22%, rgba(32, 92, 12, 0.22), transparent 60%), radial-gradient(6px 6px at 72% 12%, rgba(32, 92, 12, 0.18), transparent 60%), radial-gradient(6px 6px at 32% 82%, rgba(32, 92, 12, 0.2), transparent 60%), radial-gradient(6px 6px at 88% 66%, rgba(32, 92, 12, 0.18), transparent 60%); filter: blur(0.3px); animation: drift 22s ease-in-out infinite alternate; opacity: 0.45; } @keyframes drift { to { transform: translate3d(0, -10px, 0); } } /* ========================= 5. Main Layout ========================= */ #buildbody { position: relative; z-index: auto; /* avoid stacking context — modals must escape to level */ overflow-x: clip; max-width: 100vw; } #build { position: relative; z-index: auto; /* avoid stacking context — modals must escape to level */ overflow-x: clip; } #build > .row { display: grid; /* minmax(0, ...) allows columns to shrink below content min-width */ grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 22px; margin: 0; } #build > .row > .col-12.col-lg-12.col-xl-9, #build > .row > .col-12.col-xl-9 { max-width: 100% !important; flex: none !important; padding: 0 !important; min-width: 0 !important; /* prevent grid blowout from content */ width: auto !important; overflow-x: clip; } #build > .row > .col-12.col-lg-3.col-xl-3 { max-width: 100% !important; flex: none !important; padding: 0 !important; min-width: 0 !important; width: auto !important; } /* Mobile sumbox is a 3rd child of .row — span full width, not a grid column */ #build > .row > .specs2.fixed-bottom { grid-column: 1 / -1; } @media (max-width: 1199px) { #build > .row { grid-template-columns: minmax(0, 1fr); } } .container.subsection, #build.container.subsection { width: 100% !important; max-width: 100% !important; padding: 1.5rem 15px !important; box-sizing: border-box; } /* Override Bootstrap offset/col classes — constrained centered layout */ #buildbody { max-width: 70vw !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding: 0 30px !important; box-sizing: border-box !important; } /* Prevent any fixed-width container from causing horizontal overflow */ #configurator .container { max-width: 100% !important; box-sizing: border-box; } /* Green accent line */ .accent-line { height: 3px; background: linear-gradient(90deg, transparent, var(--brand) 30%, var(--brand) 70%, transparent); filter: blur(0.2px); opacity: 0.9; margin: 6px 0 18px; } /* ========================= 6. Topbar / Title Area ========================= */ /* Prevent the title row from overflowing its grid parent */ /* Config header — single row: title left, controls right */ .config-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; } .config-header__title { color: var(--text) !important; font-size: 22px !important; letter-spacing: 1px !important; font-weight: 700 !important; line-height: 1.3 !important; padding-bottom: 0 !important; white-space: nowrap; margin: 0; } .config-header__controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .accordionconfig h1, .accordionconfig h2 { color: var(--text); } .product-links2 { color: var(--text-muted); align-items: center; } .product-links2 .open-overview, .product-links2 .save-cart-config, .product-links2 .copy-cart-config { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)); border: 1px solid var(--line); color: var(--text-muted); padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: 0.2s; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px; padding: 11px 14px; } .product-links2 .open-overview:hover, .product-links2 .save-cart-config:hover, .product-links2 .copy-cart-config:hover { border-color: rgba(32, 92, 12, 0.5); color: var(--text); } span.save-copy { color: inherit; font-size: 12px; letter-spacing: 0.02em; } /* ========================= 7. Performance Mode Toggle ========================= */ .performance-mode-toggle { display: flex; align-items: center; gap: 10px; margin-bottom: 0; } .perf-label { color: var(--text-muted); font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; } .perf-options { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 4px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)); } .perf-btn { padding: 6px 14px; border-radius: 999px; font-size: 12px; color: var(--text-muted); background: transparent; border: 1px solid transparent; cursor: pointer; transition: 0.2s; font-weight: 600; letter-spacing: 0.02em; } .perf-btn:hover { color: var(--text); } .perf-btn.active { background: rgba(32, 92, 12, 0.18); border: 1px solid rgba(32, 92, 12, 0.45); color: #c7f0cf; } /* ========================= 8. AMD/Intel Platform Toggle (pill style) ========================= */ .amd-intel-switches { display: none; } .platform-toggle { display: flex; align-items: center; } .platform-options { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 4px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)); } .plat-btn { padding: 6px 14px; border-radius: 999px; font-size: 12px; color: var(--text-muted); background: transparent; border: 1px solid transparent; cursor: pointer; transition: 0.2s; font-weight: 600; letter-spacing: 0.02em; } .plat-btn:hover { color: var(--text); } .plat-btn.active[data-chipset-group="Intel"] { background: rgba(0, 113, 197, 0.22); border: 1px solid rgba(0, 113, 197, 0.5); color: #7ec8ff; } .plat-btn.active[data-chipset-group="AMD"] { background: rgba(237, 28, 36, 0.22); border: 1px solid rgba(237, 28, 36, 0.5); color: #ff9a9e; } /* ========================= 9. Accordion / Category Steps ========================= */ .accordionconfig, #accordionconfig { /* Reset the centering technique from base CSS that causes horizontal overflow */ left: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; /* Override light-mode styles */ background-color: transparent !important; box-shadow: none !important; border-top: 3px solid var(--brand) !important; padding: 1.5rem 0 0 0 !important; } .prod { border: 1px solid var(--line) !important; border-radius: var(--radius) !important; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)) !important; box-shadow: 0 10px 30px var(--shadow-color); margin-bottom: 14px; border-top: none !important; } .prod__title { color: var(--text); padding: 16px 20px; background: transparent; transition: background 0.2s var(--ease), color 0.2s var(--ease); display: grid; grid-template-columns: 86px 1fr auto; gap: 16px; align-items: center; font-size: 16px; } .prod__title:hover { background-color: rgba(255, 255, 255, 0.03) !important; color: var(--text) !important; } .prod--open { border-color: var(--line-light) !important; box-shadow: 0 10px 30px var(--shadow-color) !important; background: var(--panel) !important; } .prod--open .prod__title { color: var(--text); background: var(--panel-2) !important; } .prod--open .prod__title:hover { color: var(--text) !important; background-color: var(--panel-hover) !important; } .focus .prod__title { color: var(--text); } .prod__icon .line-01, .prod__icon .line-02 { background-color: var(--text-muted); } .prod__title:hover .line-01, .prod__title:hover .line-02 { background-color: var(--brand-bright); } .prod--open .prod__icon .line-01, .prod--open .prod__icon .line-02 { background-color: var(--brand-bright); } .prod__content { border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(255, 255, 255, 0.0)); padding: 16px; } /* Category header image */ .producttype { width: 86px; height: 58px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); object-fit: contain; padding: 4px; } /* Header text */ .headertitle .header-title-category { color: var(--text); font-weight: 800; letter-spacing: 0.02em; position: relative; } .header-title-chosen { color: var(--brand-2) !important; font-size: 12px; } .prod__title:hover .header-title-chosen { color: var(--brand-2) !important; } .prod__title:hover > div[id^="header_title_"] > span[id^="header_title_chosen_"] { color: var(--brand-2) !important; } /* Count value display (watts etc) */ .count-value-display { color: var(--text-muted); font-size: 12px; } /* Total watts display */ .total-watts { color: var(--text-muted); } /* ========================= 10. Chipset Tabs (Intel/AMD within categories) ========================= */ .cardnav { display: flex; align-items: center; gap: 4px; background: var(--panel); border-radius: var(--radius-xs); padding: 4px; margin-bottom: 12px; border: 1px solid var(--line); width: fit-content; } .nav-category-item { color: var(--text-muted); padding: 8px 16px; border-radius: var(--radius-xs); cursor: pointer; transition: 0.2s; font-size: 13px; font-weight: 600; } .nav-category-item:hover { color: var(--text); } .nav-category-item.is-active { color: var(--text) !important; } /* Intel active tab */ .nav-category-item.chipset-select-Intel.is-active { background: rgba(0, 104, 181, 0.2); border-bottom: 2px solid #0068B5; color: #5ba8e0 !important; } /* AMD active tab */ .nav-category-item.chipset-select-AMD.is-active { background: rgba(237, 28, 36, 0.2); border-bottom: 2px solid #ED1C24; color: #f06b70 !important; } /* Hide the old sliding indicator — unreliable with multiple categories */ .nav-indicator { display: none !important; } /* ========================= 11. Product Tiles Grid ========================= */ .testbox.row { display: block; margin: 0; } /* Override base CSS `div .product-contents { display: contents }` with matching specificity */ div .product-contents, .product-contents { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } /* Allow hide-section to override the grid display above */ div .product-contents.hide-section, .product-contents.hide-section { display: none !important; } /* Remove Bootstrap grid column sizing from product cards */ .product-card-master { max-width: 100% !important; flex: none !important; padding: 0 !important; width: 100% !important; } /* ========================= 12. Product Card / Tile Styles — Horizontal Tile Layout ========================= */ /* -- Card container: horizontal tile via CSS Grid -- */ .product-card2 { width: 100%; position: relative; background: var(--panel) !important; border: 1px solid var(--line) !important; border-radius: var(--radius-sm); box-shadow: none !important; overflow: hidden; margin-bottom: 0 !important; /* Horizontal tile grid: [radio] [thumb] [details] [price] */ display: grid !important; grid-template-columns: 18px 56px 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 0 10px; padding: 10px 12px !important; transition: border-color 0.2s var(--ease); } /* -- Radio circle via ::before pseudo-element -- */ .product-card2::before { content: ""; grid-column: 1; grid-row: 1 / -1; align-self: center; width: 16px; height: 16px; border: 2px solid var(--input-border); border-radius: 50%; box-sizing: border-box; transition: 0.2s; flex-shrink: 0; } /* Checked radio when card is selected */ .product-card2.greenselected::before { border-color: var(--brand); background: radial-gradient(circle, var(--brand-bright) 38%, transparent 40%); box-shadow: 0 0 0 3px rgba(32, 92, 12, 0.28); } .product-card2:hover { box-shadow: none !important; border-color: rgba(32, 92, 12, 0.4) !important; } /* Override base .pickacard { border: 2px solid #b8b8b8 } */ .pickacard { border: 1px solid var(--line) !important; border-radius: var(--radius-sm); box-shadow: none !important; } .pickacard:hover { border-color: rgba(32, 92, 12, 0.4) !important; cursor: pointer; box-shadow: none !important; } /* -- Selected state -- */ .greenselected { border: 2px solid var(--brand-bright) !important; box-shadow: 0 0 0 2px rgba(32, 92, 12, 0.28), 0 0 20px rgba(32, 92, 12, 0.25) !important; } .greenselectedbg { background-color: var(--panel-2) !important; } /* -- Badges/flags: keep absolutely positioned over the tile -- */ .product-card2 > .badge { position: absolute !important; z-index: 2; } .product-card2 > .product-flags { position: absolute !important; top: 3px; left: 42px; right: auto !important; z-index: 2; } /* -- Thumbnail: small square on the left -- */ .product-tumb2 { grid-column: 2; grid-row: 1 / -1; align-self: center; width: 56px !important; min-width: 56px; height: 42px !important; min-height: unset !important; padding: 4px !important; background: var(--panel-2); border: 1px solid var(--line) !important; border-radius: var(--radius-xs) !important; display: flex !important; align-items: center; justify-content: center; overflow: hidden; } /* Cancel/remove button — overlay top-right of tile */ .product-tumb2-cancel { position: absolute !important; top: 4px; right: 4px; font-size: 14px !important; z-index: 3; color: var(--danger); opacity: 0; transition: opacity 0.2s; } .product-card2:hover .product-tumb2-cancel { opacity: 1; } /* Product image — fit inside small thumbnail */ .product-card-img { max-height: 34px !important; max-width: 48px; width: auto !important; object-fit: contain; } /* -- Details area: title + optional attributes -- */ .product-details2 { grid-column: 3; grid-row: 1; padding: 0 !important; min-height: unset !important; background: transparent !important; display: block !important; } .product-details2 .col-12 { padding: 0 !important; } .product-details2 h4 { color: var(--text) !important; font-size: 12px !important; font-weight: 800; line-height: 1.3; text-transform: uppercase; margin-bottom: 2px !important; } .product-details2 h4 a { color: var(--text); margin-bottom: 0 !important; } .product-details2 h4 a:hover { color: var(--brand-bright); } .product-details2 p { color: var(--text-muted); font-size: 12px; } /* -- Price area: right-aligned in tile -- */ .product-bottom-details2 { grid-column: 4; grid-row: 1; align-self: center; border-top: none !important; padding: 0 !important; background: transparent !important; text-align: right; white-space: nowrap; overflow: visible !important; display: block !important; flex-direction: unset !important; flex-wrap: unset !important; } .product-bottom-details2 div { float: none !important; } /* Price display */ .product-price { color: var(--brand-bright); font-weight: 900; font-size: 14px; padding-right: 0 !important; } .product-price small { display: none; } .product-price2 { color: var(--brand-2); } /* -- More info link: compact, below details -- */ .product-bottom-details3 { grid-column: 3 / -1; grid-row: 2; padding: 2px 0 0 !important; background: transparent !important; margin: 0 !important; justify-content: flex-start !important; } .infolink, .more-info-link a { color: var(--text-dim) !important; font-size: 11px; text-decoration: none; } .infolink:hover, .more-info-link a:hover { color: var(--brand-bright) !important; } /* -- Availability badges -- */ .badge { background: rgba(204, 56, 67, 0.85); color: var(--text); border-radius: var(--radius-xs); font-size: 11px; text-align: left !important; white-space: normal !important; } /* -- Product flags (socket badges) — small pill style -- */ .product-flag { font-size: 9px !important; padding: 1px 5px !important; font-weight: 600; line-height: 1.3; } .product-flag.new { background: rgba(32, 92, 12, 0.65); border: 1px solid rgba(32, 92, 12, 0.85); color: var(--cta-fg); border-radius: 999px; } .parallelogram { background: transparent; transform: none !important; /* remove skew in dark mode */ } /* -- Disabled product cards -- */ .disabled-product-card { opacity: 0.4; pointer-events: none; } .disabled-product-banner { background: var(--panel-2); color: var(--danger); border: 1px solid var(--danger); border-radius: var(--radius-xs); } /* -- Quantity selector -- */ .product-qty { color: var(--text-muted); font-size: 12px; } .product-quantity { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 4px 8px; } /* ========================= 13. Attribute Radio Buttons ========================= */ .product-attribute-single { border-bottom: 1px solid var(--line); padding: 6px 0; } .product-attribute-single:last-child { border-bottom: none; } .product-attribute-radio-label { color: var(--text) !important; font-size: 13px; } .ex-radio label { color: var(--text); } .ex-radio-price-impact { color: var(--brand-2); } .ex-radio-price-impact .product-price2 { color: var(--brand-2); } /* ========================= 14. Desktop Sumbox (Sidebar) ========================= */ #sumbox { position: sticky; top: 16px; height: max-content; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px var(--shadow-color); padding: 0; overflow: hidden; } .sumboxtop { width: 100%; } #sumbox .product-card { background: transparent; box-shadow: none; border-radius: 0; } #sumbox .product-tumb { background: var(--panel-2); border-radius: var(--radius) var(--radius) 0 0; padding: 12px; } /* Build summary header */ .sum-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .sum-title { font-weight: 900; letter-spacing: 0.03em; text-transform: uppercase; font-size: 14px; } /* Key specs grid */ .sum-kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 12px 0 16px; font-size: 13px; } .sum-k { color: var(--text-muted); } .sum-v { text-align: right; color: var(--text); font-weight: 600; } #sumbox .product-details { background: transparent; color: var(--text); padding: 18px; } #sumbox .product-details h4 { color: var(--text); font-weight: 900; letter-spacing: 0.03em; margin-bottom: 8px; } #sumbox .product-details p { color: var(--text-muted); font-size: 13px; } /* Specs accordion in sumbox */ .specs { border: none; border-radius: 0; } .specs__title { color: var(--text); padding: 10px 0; border-bottom: 1px solid var(--line); } .specs__title:hover { background-color: rgba(32, 92, 12, 0.15); color: var(--text); } .specs--open .specs__title { color: var(--text); } .specs--open .specs__title:hover { color: var(--text); } .specs__icon .line-01, .specs__icon .line-02 { background-color: var(--text-muted); } .specs__title:hover .line-01, .specs__title:hover .line-02 { background-color: var(--brand-bright); } .specs__content { background: transparent; } .yourspecs { color: var(--text-muted); font-size: 13px; list-style: none; padding: 0; } .yourspecs li { padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--text-muted); } /* Sumbox price */ .total-product-price { color: var(--brand-bright) !important; font-size: clamp(26px, 4vw, 34px); font-weight: 900; text-shadow: 0 0 18px rgba(32, 92, 12, 0.35); } .total-product-price small { display: none; } /* Price and links row */ .price-and-links { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } /* Product links (save/copy/overview icons) */ .product-links span, .product-links a { color: var(--text-muted); } .product-links span:hover, .product-links a:hover { color: var(--brand-bright); } /* CTA Button - Add to Cart */ .product-slider__cart, .product-slider__cart2, .product-slider__cart3 { position: relative; background: linear-gradient(135deg, rgba(32, 92, 12, 0.98), rgba(32, 92, 12, 0.7)) !important; color: #e6ffe6 !important; border: none !important; border-radius: 14px !important; padding: 14px 16px; font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; transition: 0.18s; box-shadow: 0 10px 24px rgba(32, 92, 12, 0.28); transform: skewX(0deg) !important; width: 100%; font-size: 14px; } .product-slider__cart:hover, .product-slider__cart2:hover, .product-slider__cart3:hover { transform: translateY(-1px) skewX(0deg) !important; box-shadow: 0 14px 28px rgba(32, 92, 12, 0.35); } /* RGB animated border on CTA */ .product-slider__cart2::after, .product-slider__cart3::after { content: ""; position: absolute; inset: -2px; border-radius: 16px; padding: 2px; background: linear-gradient(90deg, #39c65c, #35a7ff, #a855f7, #39c65c); background-size: 300% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: hue 6s linear infinite; pointer-events: none; } @keyframes hue { to { background-position: 300% 0; } } /* Save Build button */ .save-build-btn { background: transparent; border: 1px solid var(--line); color: var(--text); border-radius: var(--radius-sm); padding: 12px; cursor: pointer; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em; width: 100%; margin-top: 10px; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; } .save-build-btn:hover { border-color: rgba(32, 92, 12, 0.5); color: var(--brand-2); } /* Component list (selected specs summary) */ .component-list { border-top: 1px solid var(--line); margin-top: 14px; text-align: left; } .component-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .component-name { color: var(--text-muted); text-align: left; } .component-price { text-align: right; font-weight: 700; color: var(--text); white-space: nowrap; } /* Tooltip */ [data-tooltip]:before { background-color: var(--brand-bright) !important; color: var(--cta-fg) !important; } [data-tooltip]:after { border-top-color: var(--brand-bright) !important; } /* Promotions section */ #sumbox-promotions { border-top: 1px solid var(--line); } .cart-rules { color: var(--text-muted); } /* PayTomorrow / financing */ .pt-mpe-wrapper { color: var(--text-muted); font-size: 12px; } /* Financing strip */ .fin-strip { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 10px; border: 1px dashed #223129; border-radius: var(--radius-sm); margin-top: 12px; color: var(--text-muted); font-size: 12px; } /* ========================= 15. Gaming Power Score ========================= */ .gaming-power-score { padding: 16px 0; border-bottom: 1px solid var(--line); margin-bottom: 12px; } .gps-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .gps-label { font-size: 12px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; font-weight: 600; } .gps-value { font-size: 14px; font-weight: 900; color: var(--brand-bright); } .gps-meter { position: relative; height: 14px; border-radius: 999px; background: #0b0e0f; border: 1px solid #1f2629; overflow: hidden; margin: 8px 0; } .gps-bar { position: absolute; inset: 0; width: 65%; background: linear-gradient(90deg, #1f7a0c, #39c65c); box-shadow: 0 0 22px rgba(32, 92, 12, 0.35); transition: width 0.4s ease; border-radius: 999px; } /* ========================= 16. Mobile Sumbox ========================= */ #sumbox_mobil { background-color: var(--panel) !important; border-top: 1px solid var(--line); } #sumbox_mobil .li { color: var(--text); } .specs2 { border-color: var(--line); } .specs__title2 { color: var(--text); background: var(--panel); } .specs__title2:hover { background-color: rgba(32, 92, 12, 0.15); color: var(--text); } .specs__title2:hover .cartlink { color: var(--brand-bright); } .cartlink { color: var(--brand-bright); } .specs__content2 { background: var(--panel); } .specs__icon2 .line-01, .specs__icon2 .line-02 { background-color: var(--text-muted); } .specs--open2 .specs__title { color: var(--text); } .specs--open2 .specs__title:hover { color: var(--text); } .specs--open2 .specs__title2 { color: var(--text); } .specs--open2 .specs__title2:hover { color: var(--text); } .yourspecs2 li { color: var(--text-muted); } /* Mobile price */ .product-price3 { color: var(--brand-bright); } .product-price3 small { display: none; } /* Arrow button */ .arrow-button .line-a, .arrow-button .line-b { background: var(--text); } /* ========================= 17. Modals ========================= */ .modal-content { background-color: var(--panel) !important; color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); } .modal-header { border-bottom-color: var(--line); } .modal-footer { border-top-color: var(--line); } .modal .close, .modal .close span { color: var(--text-muted); } .modal-title, .product-infomodal-title { color: var(--text); } /* Save config modal */ .saveconfig-modal-wrapper .form-control, .saved-config-modal-input { background: var(--panel-2) !important; border-color: var(--line) !important; color: var(--text) !important; } label.saveconfig { color: var(--text-muted); } .form-text.text-muted { color: var(--text-dim) !important; } /* More info modal */ .product-infomodal-content-description { color: var(--text); } .product-infomodal-image img { border-radius: var(--radius-sm); } /* Overview modal */ #overviewModal .modal-body { color: var(--text); padding: 28px 32px; } #overviewModal .modal-header { padding: 20px 32px 0; border-bottom: none; } #overviewModal .modal-title { font-size: 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } #overviewModal h4 { color: var(--text); font-size: 18px; font-weight: 600; margin-bottom: 4px; } #overviewModal p { color: var(--text-muted); font-size: 13px; margin-bottom: 20px; } /* Overview specs table — replaces the placeholder UL */ .yourspecs3 { color: var(--text); list-style: none; padding: 0; margin: 0; font-size: 14px; } .overview-table { width: 100%; border-collapse: separate; border-spacing: 0; } .overview-table, .overview-table tr, .overview-table td, .overview-table th { border: none !important; background: transparent !important; } .overview-table tr.overview-line td { padding: 10px 12px; vertical-align: top; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; } .overview-table tr.overview-line:last-child td { border-bottom: none !important; } .overview-table tr.overview-line:nth-child(even) td { background: rgba(255, 255, 255, 0.02) !important; } .overview-table .overview-category { color: var(--text-muted); font-size: 13px; font-weight: 500; white-space: nowrap; width: 140px; min-width: 140px; } .overview-table .overview-category strong { font-weight: 600; } .overview-table .overview-product-multiple, .overview-table .overview-product { color: var(--text); font-size: 14px; line-height: 1.5; } .overview-table .overview-product ul { list-style: none; padding: 0; margin: 0; } .overview-table .overview-product ul li { padding: 2px 0; } .overview-attribute { color: var(--brand-bright) !important; font-size: 12px; } .price-and-links-overview { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); } .product-tumb-overview { border-radius: var(--radius-sm); overflow: hidden; background: var(--panel-2); } .overview-disclaimer { color: var(--text-muted); font-size: 12px; margin-top: 16px; opacity: 0.6; } /* Alert popup */ #popup_alert .modal-content, .popup { background: var(--panel) !important; color: var(--text); border: 1px solid var(--line); } /* ========================= 18. Scrollbar ========================= */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--panel-2); } ::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--brand-bright); } /* ========================= 19. Responsive Overrides ========================= */ /* --- Tablet & smaller (≤ 768px) --- */ @media (max-width: 768px) { /* Prevent right-side overflow from base CSS centering trick */ .accordionconfig { left: 0 !important; transform: none !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden; } /* Header: stack title above controls */ .config-header { flex-direction: column; align-items: flex-start; gap: 10px; } .config-header__title { white-space: normal !important; font-size: 18px !important; } .config-header__controls { width: 100%; flex-wrap: wrap; gap: 8px; } /* Single column product tiles */ div .product-contents, .product-contents { grid-template-columns: 1fr !important; } .product-details2 h4 { font-size: 12px !important; } #sumbox .product-details { padding: 12px; } #buildbody { padding: 0px !important; } } /* --- Phone (≤ 576px) --- */ @media (max-width: 576px) { .performance-mode-toggle { flex-wrap: wrap; gap: 6px; } /* Single column on mobile — tiles stack full-width */ div .product-contents, .product-contents { grid-template-columns: 1fr !important; } .prod__title { grid-template-columns: 40px 1fr auto; gap: 8px; padding: 10px; font-size: 13px; } .prod__title .headertitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .producttype { width: 40px; height: 30px; } .prod__content { padding: 10px !important; } .config-header__title { font-size: 16px !important; } /* Scale down button text */ .config-header__controls .plat-btn, .config-header__controls .product-links2 a { font-size: 11px !important; padding: 5px 10px !important; } .performance-mode-toggle label { font-size: 11px !important; padding: 5px 10px !important; } .container.subsection { padding: 0.5rem 10px !important; } #buildbody { padding: 0px !important; } } @media (min-width: 768px) and (max-width: 1199px) { div .product-contents, .product-contents { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } } @media (max-width: 1200px) { #sumbox { display: none; top: 2000px; } } @media (max-height: 800px) { #sumbox { display: none; top: 2000px; } } @media (min-width: 1200px) and (min-height: 801px) { #sumbox_mobil { display: none; } } /* ========================= 20. Misc Overrides ========================= */ /* Override base background colors that bleed through */ .product-card { background: transparent; box-shadow: none; } .product-tumb { background: var(--panel-2); } /* Ensure the accordion background doesn't show white */ .accordionconfig ul li { border-top-color: var(--line); } /* General link colors */ .product-links a:visited { color: var(--text-muted); } /* Zoom hover effect - tone down for dark mode */ .zoom:hover { transform: scale(1.03); } /* Fix form elements in dark mode */ .form-control { background-color: var(--panel-2); color: var(--text); border-color: var(--line); } .form-control:focus { background-color: var(--panel-2); color: var(--text); border-color: var(--brand); box-shadow: 0 0 0 3px rgba(32, 92, 12, 0.25); } .btn-secondary { background-color: var(--brand); border-color: var(--brand); color: var(--text); } .btn-secondary:hover { background-color: var(--brand-bright); border-color: var(--brand-bright); } /* Fix any white text on white background issues from base CSS */ .select-container { color: var(--text); } /* Images disclaimer text */ #sumbox span[style*="color:gray"], #sumbox_mobil span[style*="color:gray"] { color: var(--text-dim) !important; } .hide-section { display: none !important; }