/* ==== base/layout.css ==== */ /* ========================================================= V2 LAYOUT BASE – Divi + Cinematic infra ========================================================= */ #et-main-area, #main-content { background: transparent !important; } #main-content .container { background: transparent !important; } /* ========================================================= V2 HERO – CINEMATIC GREEN GLOW (TOP5 / HERO) ========================================================= */ .rp-hero-row { position: relative; z-index: 1; } .rp-hero-row::before { content: ""; position: absolute; left: 6%; top: 18%; width: 62%; height: 140px; background: radial-gradient( circle at 20% 50%, rgba(41,255,38,0.24), rgba(41,255,38,0.10), transparent 65% ); filter: blur(14px); opacity: 0.9; pointer-events: none; z-index: 0; } /* biztosítjuk, hogy a szöveg a glow felett legyen */ .rp-hero-row > * { position: relative; z-index: 2; } /* ========================================================= V2 GLOBAL STACKING FIX – DIVI DROPDOWN MENÜ ========================================================= */ /* Header mindig legfelső réteg */ #main-header, #et-top-navigation, .et_pb_menu, .et_pb_menu__wrap, .nav, #top-menu { position: relative; z-index: 9999 !important; } /* Dropdown konkrétan */ #top-menu li ul, .et_pb_menu ul.sub-menu { z-index: 10000 !important; position: absolute; } /* ==== base/site-base.css ==== */ /* ========================================================= SITE BASE – Cinematic Background + Global Typography (Migrated from base-legacy.css) ========================================================= */ /* ========================================================= GLOBAL SITE BACKGROUND – Rollerpiac Cinematic Base ========================================================= */ #page-container { background: radial-gradient(circle at 18% 18%, rgba(41,255,38,0.12), transparent 44%), radial-gradient(circle at 82% 28%, rgba(0,180,255,0.10), transparent 46%), radial-gradient(circle at 48% 92%, rgba(41,255,38,0.08), transparent 54%), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03), transparent 60%), #070a0f; } /* Vignette */ #page-container::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle at 50% 40%, rgba(0,0,0,0.10), rgba(0,0,0,0.70)), linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.08)); } /* Grain */ #page-container::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.07; background-image: repeating-linear-gradient( 0deg, rgba(255,255,255,0.06), rgba(255,255,255,0.06) 1px, transparent 1px, transparent 2px ); } /* ========================================================= BRAND TYPOGRAPHY – CONTENT AREA ONLY (Frontend + Visual Builder egységesen) ========================================================= */ #et-main-area h1, #et-main-area .et_pb_text h1, #et-main-area .et_pb_module h1 { font-size: clamp(38px, 4.8vw, 78px) !important; line-height: 1.02 !important; font-weight: 900; letter-spacing: -0.02em; color: #ffffff; } /* Optional: egységes heading karakter */ #et-main-area h2, #et-main-area h3, #et-main-area h4, #et-main-area h5, #et-main-area h6 { font-weight: 900; letter-spacing: -0.02em; color: #ffffff; } /* Global word-break protection (no extra classes needed). */ #et-main-area h1, #et-main-area h2, #et-main-area h3, #et-main-area h4, #et-main-area h5, #et-main-area h6, #et-main-area p, #et-main-area li, #et-main-area a, #et-main-area span { word-break: keep-all !important; overflow-wrap: normal !important; hyphens: none !important; } /* Legacy Large Title maradhat */ .large-title { font-family: 'Archivo Black', sans-serif !important; font-size: 65px !important; line-height: 65px !important; text-transform: uppercase; } /* Mobile */ @media (max-width: 768px) { #et-main-area h1 { font-size: 32px; line-height: 1.1; } .large-title { font-size: 48px !important; line-height: 54px !important; } } /* ========================================================= TYPOGRAPHY HELPERS – WORD BREAK CONTROL ========================================================= */ /* Add this class on Divi modules where words must stay intact on smaller screens. */ .rp-no-break, .rp-no-break p, .rp-no-break li, .rp-no-break h1, .rp-no-break h2, .rp-no-break h3, .rp-no-break h4, .rp-no-break h5, .rp-no-break h6 { word-break: keep-all !important; overflow-wrap: normal !important; hyphens: none !important; } /* Optional text utility classes used in module_class fields. */ .rp-text { color: #ffffff; } .rp-text-muted { color: var(--rp-text-soft, rgba(255,255,255,0.75)); } /* ==== tokens/colors.css ==== */ /* ========================================================= V2 TOKENS – COLORS Central place for brand colors (safe to reference across components) ========================================================= */ :root{ --rp-green: #29ff26; --rp-green-2: #00c853; --rp-black: #000000; --rp-white: #ffffff; --rp-text-soft: rgba(255,255,255,0.75); } /* ==== tokens/radius.css ==== */ /* ========================================================= V2 TOKENS – RADIUS ========================================================= */ :root{ --rp-radius-sm: 10px; --rp-radius-md: 14px; --rp-radius-lg: 20px; --rp-radius-xl: 30px; } /* ==== tokens/shadows.css ==== */ /* ========================================================= V2 TOKENS – SHADOWS ========================================================= */ :root{ --rp-shadow-glow: 0 0 14px rgba(41,255,38,0.45); --rp-shadow-card: 0 8px 25px rgba(41,255,38,0.12), 0 8px 32px rgba(0,0,0,0.25); } /* ==== legacy/plugin-overrides.css ==== */ /* ========================================================= LEGACY PLUGIN + WOO OVERRIDES (Migrated from legacy css: cart-pricing-legacy.css, visual-legacy.css, reviews-cusrev.css, coins.css, stock-notify.css) ========================================================= */ /* ========================================================= III. KOSÁR / PÉNZÜGY / ÁRAK – LEGACY STÍLUSOK ========================================================= */ /* === KOSÁR OLDAL – Szállítási cím elrejtése (Legacy) === */ .woocommerce-shipping-destination { display: none !important; } /* === KOSÁR LINK SZÖVEG – "Kosár megtekintése" (Legacy) === */ .woocommerce a.added_to_cart { margin-left: 10px !important; } /* === EREDETI ÁR ÁTHÚZÁSA – Zöld vonallal (Legacy) === */ .price del { text-decoration: line-through #29ff26 2px; } /* === NETTÓ ÁR + FELIRAT (Legacy) === */ .theniel-netto-wrapper .netto-value .amount { font-size: 12px !important; line-height: 1.2 !important; } .netto-label { font-size: 10px; } /* ========================================================= IV. VISUAL – DIVI OVERLAY & AKCIÓ MATRICA – LEGACY ========================================================= */ /* === DIVI OVERLAY KÉP – Legacy overlay ikon cseréje === */ .et_overlay:before { content: "" !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; background-image: url('https://rollerpiac.hu/wp-content/uploads/cropped-favico.png'); background-size: cover; background-position: center; } /* === AKCIÓS MATRICA SZÍNE – Jelenleg elrejtve (Legacy) === */ .woocommerce-page span.onsale, .woocommerce span.onsale { background: #29FF26 !important; display: none; } /* ========================================================= V. VÁSÁRLÓI VÉLEMÉNYEK (CusRev) – LEGACY, AKTÍV A V2 ALATT IS ========================================================= */ /* Vásárlói vélemények – szerzők és terméknév színek */ .cr-all-reviews-shortcode ol.commentlist li .comment-text .meta .woocommerce-review__author { color: #fff; } .cr-all-reviews-shortcode ol.commentlist li .comment-text .cr-rating-product-name .cr-product-name-picture .cr-comment-productname-a { color: #29ff26; } /* "További vélemények" gombok */ .cr-reviews-ajax-reviews .cr-show-more-reviews-prd, .cr-all-reviews-shortcode .cr-show-more-button, .cr-reviews-grid .cr-show-more-button, .cr-qna-block .cr-show-more-que { display: block; border-radius: 25px; margin: 10px auto; height: 40px; padding: 0 20px; border: solid 0px #29ff26; font-size: 14px; background-color: #29ff26; color: #000; transition: all 0.3s ease-in-out; } .cr-reviews-ajax-reviews .cr-show-more-reviews-prd:hover, .cr-all-reviews-shortcode .cr-show-more-button:hover, .cr-reviews-grid .cr-show-more-button:hover, .cr-qna-block .cr-show-more-que:hover { background-color: transparent; border: solid 2px #29ff26; color: #29ff26; } /* Vélemények összesítő doboz – háttér átlátszó */ .cr-all-reviews-shortcode .cr-summaryBox-wrap, .cr-reviews-grid .cr-summaryBox-wrap { background-color: transparent; } /* 4-5 csillag és átlag értékelés színei */ .cr-histogramTable tr.ivole-histogramRow .ivole-histogram-a, .cr-histogramTable tr.ivole-histogramRow .cr-histogram-a, .cr-all-reviews-shortcode .cr-summaryBox-wrap .cr-average-rating, .cr-all-reviews-shortcode .cr-summaryBox-wrap .cr-total-rating-count, .cr-all-reviews-shortcode .crstar-rating { color: #29ff26; } /* Összértékelés darabszám – fehér szín */ .cr-all-reviews-shortcode .cr-summaryBox-wrap .cr-total-rating-count { color: #fff; } /* Vélemények – kereső és rendezés sáv elrejtése */ #reviews.cr-reviews-ajax-reviews .cr-ajax-search, .cr-all-reviews-shortcode .cr-ajax-search, .cr-all-reviews-shortcode .cr-count-row { display: none; } /* ========================================================= VII. COIN TRANZAKCIÓK TÁBLA – LEGACY ========================================================= */ /* Coin tranzakciók tábla frontend stílus */ .woocommerce-MyAccount-content .coin-transactions-table { width: 100% !important; border-collapse: collapse; margin-top: 20px; } .woocommerce-MyAccount-content .coin-transactions-table th, .woocommerce-MyAccount-content .coin-transactions-table td { padding: 10px; border: 1px solid #ddd; text-align: left; } .woocommerce-MyAccount-content .coin-transactions-table th { background: #f8f8f8; font-weight: bold; } .coin-transactions-table td.coin-positive { color: #29ff26 !important; /* Rollerpiac zöld */ font-weight: bold; } .coin-transactions-table td.coin-negative { color: #e74c3c !important; /* piros */ font-weight: bold; } /* ========================================================= VI. KÉSZLET ÉRTESÍTÉS – LEGACY ========================================================= */ /* === KÉSZLET ÉRTESÍTÉS – gomb színe (Legacy) === */ .cwgstock_button { color: #000 !important; } /* ==== legacy/legacy-overrides.css ==== */ /* LEGACY-OVERRIDES (deprecated) This file is intentionally kept as a placeholder to avoid breaking any hardcoded references. All previous contents were migrated into: - assets/css/base/site-base.css - assets/css/legacy/plugin-overrides.css - assets/css/global/glass.css Do not add new styles here. */ /* ==== global/buttons.css ==== */ /* ========================================================= ROLLERPIAC V2 – BUTTON SYSTEM Csak tudatosan jelölt V2 gombokra ========================================================= */ /* ========================= BASE V2 BUTTON ========================= */ .et_pb_button.rp-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.92); padding: 13px 18px; border-radius: 16px; font-weight: 900; letter-spacing: 0.01em; transition: all 0.25s ease; text-align: center; } /* ========================= PRIMARY – Rollerpiac Green ========================= */ .et_pb_button.rp-btn-primary { background: rgba(41,255,38,0.20); border-color: rgba(41,255,38,0.72); color: #eaffea !important; } .et_pb_button.rp-btn-primary:hover { background: rgba(41,255,38,0.28); box-shadow: 0 0 14px rgba(41,255,38,0.55); } /* ========================= SECONDARY – Neutral glass ========================= */ .et_pb_button.rp-btn-secondary { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.92) !important; } .et_pb_button.rp-btn-secondary:hover { background: rgba(255,255,255,0.12); box-shadow: 0 0 10px rgba(255,255,255,0.25); } /* ========================= DIVI ICON CLEANUP (V2 ONLY) ========================= */ .et_pb_button.rp-btn:after { display: none !important; } /* ==== global/glass.css ==== */ /* ========================================================= RP GLASS – Cinematic Glass (Migrated from v2-glass.css) ========================================================= */ /* ========================================================= RP GLASS – Cinematic Glass (V2 FINAL) ========================================================= */ .rp-glass { position: relative; background: rgba(255,255,255,0.055) !important; border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 22px !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 28px 90px rgba(0,0,0,0.65), 0 0 0 1px rgba(41,255,38,0.11) inset; } /* Inner reflection */ .rp-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 120deg, rgba(255,255,255,0.12), transparent 35%, transparent 65%, rgba(41,255,38,0.08) ); pointer-events: none; opacity: 0.9; } /* Neon edge */ .rp-glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 135deg, rgba(41,255,38,0.18), rgba(255,255,255,0.06), rgba(0,180,255,0.12) ); opacity: 0.22; } /* ==== global/glass-utilities.css ==== */ .rp-glass2 { border-radius: 30px; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) ); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 25px rgba(41,255,38,0.12), 0 8px 32px rgba(0,0,0,0.25); } /* ==== components/flip.css ==== */ /* --------------------------------------------------------- 8.3 – ROLLERPIAC FLIP TEXT CARD (V2 UI elem) --------------------------------------------------------- */ .rp-flip { width: 260px; height: 120px; perspective: 1000px; cursor: pointer; margin: 20px auto; } .rp-flip-inner { position: relative; width: 100%; height: 100%; transition: transform 0.7s ease; transform-style: preserve-3d; } /* === HOVER → fordul meg === */ .rp-flip:hover .rp-flip-inner { transform: rotateY(180deg); } /* FRONT + BACK közös */ .rp-flip-front, .rp-flip-back { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; display: flex; justify-content: center; align-items: center; text-align: center; padding: 14px; transition: background 0.6s ease-in-out, backdrop-filter 0.6s ease-in-out, border 0.6s ease-in-out; } /* === FRONT – row layout a bal oldali ikon miatt === */ .rp-flip-front { flex-direction: row; /* ikon bal, szöveg jobb */ gap: 10px; /* ikon és szöveg közti távolság */ background: transparent; border: 1px solid transparent; color: #fff; font-size: 22px; font-weight: 600; } /* === BACK – középre igazított layout === */ .rp-flip-back { flex-direction: column; background: transparent; border: 1px solid transparent; transform: rotateY(180deg); color: #eee; font-size: 14px; line-height: 1.4; } /* FLIP után kap keretet + üveghatást */ .rp-flip:hover .rp-flip-back { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.20); backdrop-filter: blur(10px); } /* === INFO IKON — bal oldalon, vertikálisan középen === */ .rp-flip-info-icon { font-size: 22px; color: rgba(255,255,255,0.75); display: flex; align-items: center; justify-content: center; height: 100%; filter: drop-shadow(0 0 6px rgba(255,255,255,0.45)); pointer-events: none; /* ne zavarja a flipet */ } /* ==== components/images.css ==== */ /* ========================================================= ROLLERPIAC V2 – GLASS LOOK IMAGE (STABIL VERZIÓ) Használat: ========================================================= */ img.rp-glass-image { display: inline-block; border-radius: 22px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); box-shadow: 0 10px 30px rgba(0,0,0,0.55), inset 0 0 14px rgba(255,255,255,0.08); transition: all 0.3s ease; } /* Finom fényes perem */ img.rp-glass-image:hover { border-color: #29ff26; box-shadow: 0 0 18px rgba(41,255,38,0.35), 0 12px 40px rgba(0,0,0,0.6); } /* ========================================================= DIVI WOO IMAGE MODUL – V2 GLASS SKIN Használat: a Woo Images modul CSS class mezőjébe: rp-v2-woo-image-glass ========================================================= */ .rp-v2-woo-image-glass { position: relative; padding: 14px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.16); background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); backdrop-filter: blur(16px); box-shadow: 0 24px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.28), inset 0 0 0 1px rgba(41,255,38,0.08); overflow: hidden; } .rp-v2-woo-image-glass::before { content: ""; position: absolute; top: -35%; left: -15%; width: 70%; height: 80%; background: radial-gradient(circle, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0) 70%); pointer-events: none; } .rp-v2-woo-image-glass .woocommerce-product-gallery__image img, .rp-v2-woo-image-glass .flex-viewport img { border-radius: 18px; border: 1px solid rgba(255,255,255,0.18); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; box-shadow: 0 10px 28px rgba(0,0,0,0.35); } .rp-v2-woo-image-glass:hover .woocommerce-product-gallery__image img, .rp-v2-woo-image-glass:hover .flex-viewport img { transform: translateY(-2px) scale(1.01); border-color: rgba(41,255,38,0.5); box-shadow: 0 0 24px rgba(41,255,38,0.22), 0 16px 36px rgba(0,0,0,0.5); } .rp-v2-woo-image-glass .flex-control-thumbs li img { border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); transition: border-color .25s ease, box-shadow .25s ease, opacity .25s ease; } .rp-v2-woo-image-glass .flex-control-thumbs li img.flex-active, .rp-v2-woo-image-glass .flex-control-thumbs li img:hover { border-color: rgba(41,255,38,0.65); box-shadow: 0 0 14px rgba(41,255,38,0.24); opacity: 1; } @media (max-width: 980px) { .rp-v2-woo-image-glass { padding: 10px; border-radius: 18px; backdrop-filter: blur(12px); } } /* ==== components/navbar.css ==== */ /* ========================================================= V2 NAVBAR MENU SKIN – ROLLERPIAC ❗ Glass hatást NEM itt adunk (rp-glass2 a sectionön) Ez csak a MENÜ kinézetét szabályozza ========================================================= */ /* ========================================================= FŐ MENÜ LINK STÍLUS ========================================================= */ .rp-nav-menu .et-menu-nav > ul > li > a { color: #ffffff !important; font-weight: 600; transition: all .25s ease; } .rp-nav-menu .et-menu-nav > ul > li > a:hover { color: #29ff26 !important; text-shadow: 0 0 6px rgba(41,255,38,0.7), 0 0 12px rgba(41,255,38,0.4); } .rp-nav-menu .current-menu-item > a { color: #29ff26 !important; } /* ========================================================= DESKTOP DROPDOWN ========================================================= */ .rp-nav-menu ul.sub-menu { background: linear-gradient( 135deg, rgba(15,18,24,0.96), rgba(20,22,30,0.90) ); backdrop-filter: blur(14px); border: 1px solid rgba(41,255,38,0.18); border-radius: 12px; padding: 8px 0; box-shadow: 0 20px 60px rgba(0,0,0,0.6); } .rp-nav-menu ul.sub-menu li a { color: #fff !important; padding: 10px 18px !important; transition: all .2s ease; font-weight: 500; font-size: 14px; display: block; position: relative; } .rp-nav-menu ul.sub-menu li a:hover { background: rgba(41,255,38,0.06); box-shadow: inset 0 0 12px rgba(41,255,38,0.12); color: #29ff26 !important; padding-left: 22px !important; } /* Elválasztó */ .rp-nav-menu ul.sub-menu li:not(:last-child)::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(41,255,38,0.15), transparent ); opacity: 0.6; } /* ========================================================= 📱 MOBILE MENU PANEL ========================================================= */ @media (max-width: 980px) { .rp-nav-menu .et_mobile_menu { background: linear-gradient( 180deg, rgba(12,14,20,0.98), rgba(16,18,26,0.95) ); backdrop-filter: blur(18px); border: 1px solid rgba(41,255,38,0.18); border-radius: 12px; padding: 10px 0; box-shadow: 0 25px 70px rgba(0,0,0,0.65); } .rp-nav-menu .et_mobile_menu li a { color: #ffffff !important; padding: 14px 18px !important; border-bottom: 1px solid rgba(41,255,38,0.10); } .rp-nav-menu .et_mobile_menu li:last-child a { border-bottom: none; } .rp-nav-menu .et_mobile_menu li.current-menu-item > a { color: #29ff26 !important; } /* ===================================================== 🔥 CRITICAL FIX — ACCORDION FLOW (NEM OVERLAY) ===================================================== */ .rp-nav-menu .et_mobile_menu ul.sub-menu { position: relative !important; top: 0 !important; left: 0 !important; width: 100% !important; box-shadow: none !important; } .rp-nav-menu .et_mobile_menu li { position: relative !important; } } /* ========================================================= 📱 V2 MOBILE SUBMENU INDICATOR (GREEN DOT) ========================================================= */ @media (max-width: 980px) { .rp-nav-menu .et_mobile_menu .sub-menu-toggle { display: none !important; } .rp-nav-menu .et_mobile_menu .menu-item-has-children > a { position: relative; padding-right: 36px !important; } .rp-nav-menu .et_mobile_menu .menu-item-has-children > a::after { content: ""; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: #29ff26; box-shadow: 0 0 6px rgba(41,255,38,0.8), 0 0 12px rgba(41,255,38,0.4); } } /* ========================================================= V2 DROPDOWN – COMPACT SPACING (ROLLERPIAC) Több almenü elemhez optimalizálva ========================================================= */ /* Teljes submenu panel */ .rp-nav-menu ul.sub-menu { padding: 4px 0; /* kisebb felső/alsó tér */ } /* Almenü link */ .rp-nav-menu ul.sub-menu li a { padding: 7px 16px !important; /* volt 10px → most kompakt */ font-size: 13px; /* picit elegánsabb, sűrűbb */ line-height: 1.25; /* ne legyen levegős */ } /* Hover balra tolás ne legyen túl nagy */ .rp-nav-menu ul.sub-menu li a:hover { padding-left: 19px !important; /* volt 22px */ } /* Elválasztó vonal közelebb */ .rp-nav-menu ul.sub-menu li:not(:last-child)::after { left: 12px; right: 12px; opacity: 0.5; } /* Többszintű submenu is kompakt */ .rp-nav-menu ul.sub-menu ul.sub-menu li a { font-size: 12.5px; padding: 6px 14px !important; } /* ========================================================= V2 MOBILE PANEL BASE (FIXED STRUCTURE) ========================================================= */ @media (max-width: 980px) { /* 🔥 A TELJES MOBIL PANEL HÁTTERE */ .rp-nav-menu .et_mobile_menu { background: linear-gradient( 180deg, #0d1117, #141922 ) !important; border: 1px solid rgba(41,255,38,0.18); border-radius: 14px; box-shadow: 0 25px 70px rgba(0,0,0,0.65); } /* Főmenü sor */ .rp-nav-menu .et_mobile_menu > li { background: transparent !important; } /* Főmenü link */ .rp-nav-menu .et_mobile_menu > li > a { background: transparent !important; } }