/* ========================================================= YNLBPC Global Theme (Production 2026) File: /ynlbpc-website/css/global.css Purpose: One cinematic overlay wrapper + premium glass nav ========================================================= */ /* ----------------------------- 0) Brand tokens ----------------------------- */ :root { --bg: #000; --ink: #f3f3f3; --muted: rgba(243,243,243,.72); --muted2: rgba(243,243,243,.58); --line: rgba(243,243,243,.12); --accent: #d7c07a; --accent2: #bfa85f; --radius: 20px; --radius-pill: 999px; --shadow: 0 16px 40px rgba(0,0,0,.35); --shadow-soft: 0 10px 24px rgba(0,0,0,.25); --focus: 0 0 0 .25rem rgba(215,192,122,.25); /* button + text gold color */ --yn-btn-gold: #b9975b; --yn-btn-gold-hover: #b9975b; --yn-gold-text: #b9975b; /* overlay controls */ --overlay-alpha: 0.58; --overlay-blur: 10px; } /* ------------------------------------ 0) WP-HIDDEN PAGES 206,249,269,441 ---------------------------------------*/ .page-id-xxx main article > h1:first-of-type, .page-id-206 main article > h1:first-of-type, .page-id-249 main article > h1:first-of-type, .page-id-439 main article > h1:first-of-type, .page-id-269 main article > h1:first-of-type, .page-id-441 main article > h1:first-of-type { display: none !important; } /* ----------------------------- 1) Base / Typography ----------------------------- */ html, body{ height:100%; } /* global background image source */ html{ background: #090909 url("../images/ynlbpc-background.png") center center / cover no-repeat; } body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--ink); letter-spacing: .2px; padding-top: 86px; /* fixed nav clearance */ } /* Serif headings */ h1,h2,h3,.serif{ font-family: "Playfair Display", Georgia, "Times New Roman", serif; letter-spacing: .2px; } p{ margin-bottom: 1rem; } /* Links */ a{ color: inherit; text-decoration: none; } a:hover{ color: var(--accent); } /* Focus */ a:focus, button:focus, input:focus, textarea:focus, select:focus, .btn:focus, .form-control:focus{ outline: none; box-shadow: var(--focus) !important; } /* Selection */ ::selection{ background: rgba(215,192,122,.25); } /* Images */ img{ max-width:100%; height:auto; } /* ----------------------------- 2) Background Image + ONE Overlay Wrapper Apply your background image to body using a class. - Add class to body: "yn-bg" - Or target page templates with body classes if needed ----------------------------- */ .yn-page-image-wrap { text-align: center; padding: 20px 0; line-height: 0; } .yn-page-image { display: inline-block; width: 840px; /* ← change this ONE value to resize ALL page images */ max-width: 90vw; /* keeps it responsive on mobile */ height: auto; } /* ----------------------------- 3) Navbar: premium glass (keep) ----------------------------- */ .navbar{ background: rgba(0,0,0,0.20) !important; /* lets bg show */ border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: none !important; /* backdrop-filter: blur(10px); — DISABLED: testing if this causes background image blur */ /* -webkit-backdrop-filter: blur(10px); */ } /* Remove any hard borders under header areas */ header, .site-header{ border: none !important; background: transparent !important; } /* Nav links */ .navbar .nav-link{ font-family: 'Inter', sans-serif !important; font-weight: 500 !important; font-size: 15px !important; letter-spacing: .6px !important; text-transform: uppercase !important; color: rgba(255,255,255,0.92) !important; padding: 10px 16px !important; } .navbar .nav-link:hover{ color: #fff !important; text-shadow: 0 0 10px rgba(255,255,255,0.20); } /* Center nav items */ .navbar-nav{ align-items:center; } /* Mobile nav spacing */ @media (max-width: 768px){ .navbar .nav-link{ padding: 12px 0 !important; font-size: 14px !important; } } /* Join dropdown: open on hover (desktop) + focus (keyboard) */ #joinDropdown { position: relative; } #joinDropdown .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 9999; } /* Open when hovering the LI or when focusing inside it */ #joinDropdown:hover .dropdown-menu, #joinDropdown:focus-within .dropdown-menu { display: block; } /* Optional: make the button look like your links */ #joinDropdown > .dropdown-toggle { background: none; border: 0; padding: 0; cursor: pointer; } /* Explore YNLBPC dropdown: open on hover (desktop) + focus (keyboard) */ @media (min-width: 992px) { #exploreNav { position: relative; } #exploreNav > .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 99999; } #exploreNav:hover > .dropdown-menu, #exploreNav:focus-within > .dropdown-menu { display: block !important; } } /* Dropdown base */ .nav-item.dropdown { position: relative; } .dropdown-toggle { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 0.35rem; } /* Menu */ .dropdown-menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 220px; padding: 0.5rem 0; margin: 0; list-style: none; border-radius: 10px; background: #111; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 16px 30px rgba(0,0,0,0.35); display: none; z-index: 9999; } .dropdown-link { display: block; padding: 0.65rem 0.9rem; text-decoration: none; color: #fff; white-space: nowrap; } .dropdown-link:hover, .dropdown-link:focus { background: rgba(255,255,255,0.08); outline: none; } /* Open state */ .nav-item.dropdown.open > .dropdown-menu { display: block; } /* Desktop hover (optional) */ @media (hover: hover) { .nav-item.dropdown:hover > .dropdown-menu { display: block; } } /* ----------------------------- 4) Layout sections (NO per-section glass) ----------------------------- */ .section{ padding: 4.5rem 0; border-bottom: 1px solid var(--line); background: transparent !important; /* ✅ no per section background */ } .hero{ min-height: 52vh; display:flex; align-items:center; position:relative; overflow:hidden; border-bottom: 1px solid var(--line); background: transparent !important; /* ✅ */ } .hero > .container{ position:relative; z-index:2; } .hero-center{ text-align:center !important; } .kicker{ color: var(--accent); text-transform: uppercase; letter-spacing: .22em; font-size:.78rem; } .lead-muted{ color: var(--muted); max-width: 52rem; margin-left:auto; margin-right:auto; } /* Divider / fineprint */ .divider-title{ color: rgba(243,243,243,.85); letter-spacing: .18em; text-transform: uppercase; font-size: .82rem; } .fineprint{ color: rgba(243,243,243,.55); font-size: .85rem; line-height: 1.6; letter-spacing: .04em; } /* Kill any card glass by default */ .card-lux, .video-frame, .strip, .featured-episode{ background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Video iframe still premium */ .video-frame{ border-radius: var(--radius); overflow:hidden; } .video-frame iframe{ border:0; border-radius: 12px; box-shadow: 0 25px 60px rgba(0,0,0,.55); } @media (min-width: 992px){ body.home .video-frame, body.front-page .video-frame, body.page-template-front-page .video-frame{ width: min(1100px, 72vw); margin-left: auto; margin-right: auto; } /* Match content width to the video so text + buttons align with the video edges */ body.home .section:has(.video-frame) > .container > *:not(.video-frame), body.front-page .section:has(.video-frame) > .container > *:not(.video-frame), body.page-template-front-page .section:has(.video-frame) > .container > *:not(.video-frame) { max-width: min(1100px, 72vw); margin-left: auto !important; margin-right: auto !important; } /* Authority strip row */ body.home .strip > .container > *, body.front-page .strip > .container > *, body.page-template-front-page .strip > .container > * { max-width: min(1100px, 72vw); margin-left: auto !important; margin-right: auto !important; } /* Join section card */ body.home .section > .container > .card-lux, body.front-page .section > .container > .card-lux, body.page-template-front-page .section > .container > .card-lux { max-width: min(1100px, 72vw); margin-left: auto !important; margin-right: auto !important; } } /* ── Desktop two-column layout: video left, content+buttons right ── */ @media (min-width: 992px) { .yn-video-split > .container { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 3rem; row-gap: 0.5rem; align-items: start; } /* Video: left column, spans enough rows to sit beside all right-side content */ .yn-video-split > .container > .video-frame { grid-column: 1; grid-row: 1 / span 10; width: 100% !important; margin: 0 !important; align-self: start; } /* First child (text/heading block) → right column, row 1 */ .yn-video-split > .container > *:first-child { grid-column: 2; grid-row: 1; } /* Buttons, fineprint, any other siblings → right column, stacked below */ .yn-video-split > .container > *:not(:first-child):not(.video-frame) { grid-column: 2; } } /* Strip items (no background, just clean type) */ .strip{ padding: 1.25rem 0; } .strip .item{ color: rgba(243,243,243,.82); } /* Responsive section padding */ @media (max-width: 575.98px){ .section{ padding: 3.25rem 0; } .hero{ min-height: 58vh; } } /* ----------------------------- 5) Buttons (single source of truth) ----------------------------- */ .btn{ font-weight: 650; border-radius: var(--radius-pill); transition: transform .15s ease, background-color .2s ease, border-color .2s ease, color .2s ease; letter-spacing: .02em; } .btn:active{ transform: translateY(1px); } /* Primary gold */ a.btn.btn-lux, button.btn.btn-lux, input.btn.btn-lux{ background-color: #b9975b !important; border: 1px solid #b9975b !important; color: #000 !important; border-radius: 999px !important; font-weight: 700; letter-spacing: .4px; padding: 12px 28px; line-height: 1.2; } a.btn.btn-lux:hover, button.btn.btn-lux:hover, input.btn.btn-lux:hover, a.btn.btn-lux:focus, button.btn.btn-lux:focus, input.btn.btn-lux:focus{ background-color: #d4b36f !important; border-color: #d4b36f !important; color: #000 !important; box-shadow: none !important; } /* Ghost */ .btn-ghost{ border: 1px solid rgba(215,192,122,.55); color: var(--ink); background: transparent; padding: .85rem 1.2rem; } .btn-ghost:hover{ border-color: var(--accent); background: rgba(215,192,122,.14); color: var(--ink); } a.btn, button.btn, input.btn, a.ynlbpc-buy-now{ display:inline-flex !important; align-items:center !important; justify-content:center !important; } /* ----------------------------- 6) Floating Buy Now (position only) ----------------------------- */ a.ynlbpc-buy-now{ position: fixed; right: 130px; bottom: 22px; z-index: 9999; text-decoration:none; } a.ynlbpc-buy-now:hover{ transform: translateY(-2px); } /* ========================================== MOBILE ONLY CENTER BUY NOW BUTTON ========================================== */ @media (max-width: 768px) { a.ynlbpc-buy-now { left: 50% !important; right: auto !important; /* 🔥 cancels desktop rule */ transform: translateX(-50%) !important; } a.ynlbpc-buy-now:hover { transform: translateX(-50%) translateY(-2px) !important; } } /* ----------------------------- 7) Forms (global dark) ----------------------------- */ input, select, textarea{ background:#000 !important; color:#fff !important; border:1px solid rgba(255,255,255,.18) !important; border-radius: 14px; } input::placeholder, textarea::placeholder{ color:#aaa !important; } /* ----------------------------- 8) WooCommerce Blocks Checkout (clean + premium) ----------------------------- */ /* Make blocks readable on dark */ .wc-block-components-checkout, .wc-block-components-sidebar, .wc-block-checkout__sidebar, .wc-block-components-order-summary, .wc-block-components-totals-wrapper{ background: transparent !important; color: var(--ink) !important; } /* Remove block cards backgrounds */ .wc-block-components-panel, .wc-block-components-totals-item, .wc-block-components-order-summary-item, .wc-block-components-order-summary__content{ background: transparent !important; border-color: rgba(255,255,255,.12) !important; box-shadow: none !important; } /* Lines subtle */ .wc-block-components-totals-item, .wc-block-components-order-summary-item{ border-bottom: 1px solid rgba(255,255,255,.10) !important; } /* Money text crisp */ .wc-block-components-formatted-money-amount{ color: #fff !important; } /* Checkout buttons */ .wc-block-components-button{ border-radius: 999px !important; font-weight: 800 !important; } /* Make primary checkout button gold */ .wc-block-components-button.wp-element-button{ background: #b9975b !important; color: #000 !important; border: 1px solid #b9975b !important; } .wc-block-components-button.wp-element-button:hover{ background: #d4b36f !important; border-color: #d4b36f !important; } /* Hide coupon panel (optional: you can remove if you want it later) */ .wc-block-components-totals-coupon{ display:none !important; } /* ========================================================= CLEAN CINEMATIC BACKGROUND SYSTEM (single background + adjustable transparency) ========================================================= */ /* MASTER transparency control — this is your working adjuster */ :root{ --yn-wrapper-alpha: 0.35 /* adjust: lower = lighter, higher = darker */ } /* direct background image on body */ body{ background: linear-gradient(rgba(0,0,0,var(--yn-wrapper-alpha)), rgba(0,0,0,var(--yn-wrapper-alpha))), url("../images/ynlbpc-background.png") center center / cover no-repeat !important; position: relative; } /* Remove divider lines completely */ .section, .hero, .strip, .featured-episode{ border-top: none !important; border-bottom: none !important; } /* ========================================== YNLBPC Membership Benefit Bar ========================================== */ .ynlbpc-member-bar{ width: 100%; padding: 10px 16px; background: rgba(0,0,0,0.55); border-top: 1px solid rgba(215,192,122,0.35); border-bottom: 1px solid rgba(215,192,122,0.35); font-size: 14px; letter-spacing: .3px; color: rgba(255,255,255,0.92); } .ynlbpc-member-badge{ display: inline-block; background: linear-gradient(135deg,#d7c07a,#bfa85f); color: #000; font-weight: 700; padding: 4px 10px; border-radius: 999px; margin-right: 10px; font-size: 12px; } .ynlbpc-member-link{ margin-left: 10px; color: #d7c07a; font-weight: 600; text-decoration: none; } .ynlbpc-member-link:hover{ color: #fff; text-decoration: underline; } .yn-thankyou-wrapper{ text-align:center; max-width:700px; margin:0 auto; padding:40px 20px; } .yn-membership-message{ margin-top:30px; padding:28px; border:1px solid rgba(215,192,122,.35); border-radius:14px; background:rgba(0,0,0,.35); } .yn-membership-title{ font-family:"Playfair Display", serif; color:#d7c07a; font-size:26px; margin-bottom:15px; } .yn-membership-text{ color:#ffffff; font-size:16px; margin-bottom:15px; } .yn-benefits-list{ list-style:none; padding:0; margin:20px 0; } .yn-benefits-list li{ color:#d7c07a; font-size:17px; margin-bottom:10px; font-weight:500; } .yn-membership-expire{ margin-top:20px; font-size:15px; color:#cccccc; } .yn-cta-row{ margin-top:18px; display:flex; justify-content:center; } a.yn-shop-again{ min-width: 200px; text-align:center; } /* ========================================== Member Coupon Display Box ========================================== */ .yn-coupon-box{ margin-top:16px; padding:18px; border:1px solid rgba(215,192,122,.45); border-radius:14px; background:rgba(0,0,0,.45); } .yn-coupon-label{ color: rgba(255,255,255,.75); letter-spacing:.12em; text-transform:uppercase; font-size:12px; margin-bottom:10px; } .yn-coupon-code{ font-family: "Playfair Display", serif; font-size: 28px; color: #d7c07a; font-weight: 700; letter-spacing: .08em; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(215,192,122,.55); display:inline-block; } .yn-coupon-meta{ margin-top:10px; color: rgba(255,255,255,.70); font-size: 14px; } /* ========================================================= YNLBPC Membership (Shortcode) — Professional Layout Targets: .yn-membership-form + the logged-in card before it ========================================================= */ /* 1) Constrain + center the form */ .yn-membership-form{ max-width: 520px; margin: 0 auto; } /* Ensure the Bootstrap row doesn't stretch weirdly */ .yn-membership-form .row{ margin-left: 0 !important; margin-right: 0 !important; } /* 2) Labels + input spacing (premium) */ .yn-membership-form .form-label{ display: block; margin-bottom: 6px; font-weight: 600; letter-spacing: .02em; color: rgba(243,243,243,.90); } /* Inputs: consistent height + clean width */ .yn-membership-form .form-control{ width: 100% !important; max-width: 520px; padding: 12px 14px; border-radius: 14px; } /* Placeholder tone */ .yn-membership-form .form-control::placeholder{ color: rgba(243,243,243,.45) !important; } /* 3) Button row alignment + spacing */ .yn-membership-form .btn.btn-lux{ min-width: 220px; } /* Make the helper text align nicely under/next to button */ .yn-membership-form .fineprint{ flex: 1 1 260px; margin-top: 30px; } /* 4) Logged-in message card: make it match the same width */ .ynlbpc-membership-card{ max-width: 520px; margin: 0 auto 18px auto; padding: 18px 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.35); /* backdrop-filter: blur(10px); — DISABLED: testing if this causes background image blur */ /* -webkit-backdrop-filter: blur(10px); */ } .ynlbpc-membership-card h2{ margin: 0 0 6px 0; font-family: "Playfair Display", serif; letter-spacing: .01em; } .ynlbpc-membership-card p{ margin: 0; color: rgba(243,243,243,.72); line-height: 1.5; } /* Mobile: keep it clean */ @media (max-width: 575.98px){ .yn-membership-form, .ynlbpc-membership-card{ max-width: 92vw; } .yn-membership-form .btn.btn-lux{ width: 100%; } } /* MASTER membership container */ .yn-membership-wrap{ width: 100%; max-width: 560px; margin: 40px auto; display: flex; flex-direction: column; align-items: stretch; } /* Logged-in message block */ .yn-membership-card{ width: 100%; margin-bottom: 20px; text-align: left; } /* Membership form */ .yn-membership-form{ width: 100%; } /* Ensure inputs align perfectly */ .yn-membership-form .form-control{ width: 100%; } /* Optional premium spacing */ .yn-membership-form .form-label{ margin-bottom: 6px; font-weight: 600; } .yn-membership-form .btn{ margin-top: 10px; } /* ========================================= YNLBPC Membership Benefit Bar — Clean Version Remove background and borders ========================================= */ .ynlbpc-member-bar { background: transparent !important; background-color: transparent !important; border: none !important; border-top: none !important; border-bottom: none !important; border-left: none !important; border-right: none !important; box-shadow: none !important; padding: 12px 0; } /* Remove any badge background if present */ .ynlbpc-member-badge { background: transparent !important; border: none !important; box-shadow: none !important; } /* ========================================= YNLBPC Luxury Membership Announcement Bar High-conversion premium version ========================================= */ .ynlbpc-member-bar { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 18px; text-align: center; margin: 28px auto 36px auto; font-family: "Playfair Display", Georgia, serif; letter-spacing: .3px; } /* Main headline (gold luxury emphasis) */ .ynlbpc-member-badge { color: #d7c07a !important; font-size: 22px; font-weight: 700; letter-spacing: .6px; } /* Supporting text */ .ynlbpc-member-text { color: rgba(255,255,255,0.92); font-size: 17px; font-weight: 500; } /* Call-to-action link */ .ynlbpc-member-link { color: #d7c07a !important; font-size: 17px; font-weight: 700; text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid rgba(215,192,122,0.45); transition: all .25s ease; } /* Hover effect (luxury subtle glow) */ .ynlbpc-member-link:hover { color: #f2dc9b !important; border-bottom: 1px solid #f2dc9b; text-shadow: 0 0 8px rgba(215,192,122,0.25); } /* Mobile optimization */ @media (max-width: 768px) { .ynlbpc-member-bar { flex-direction: column; gap: 8px; } .ynlbpc-member-badge { font-size: 20px; } .ynlbpc-member-text, .ynlbpc-member-link { font-size: 16px; } } /* ========================================================= YNLBPC Membership Announcement Bar Professional Luxury Version (Production Ready) ========================================================= */ .ynlbpc-member-bar { /* Layout */ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px; max-width: 1000px; margin: 28px auto 36px auto; padding: 10px 20px; text-align: center; /* Typography */ font-family: "Playfair Display", Georgia, serif; letter-spacing: .35px; /* Clean cinematic appearance */ background: transparent; border: none; box-shadow: none; } /* Gold headline */ .ynlbpc-member-badge { color: var(--accent); font-size: 22px; font-weight: 700; letter-spacing: .6px; } /* Supporting text */ .ynlbpc-member-text { color: rgba(255,255,255,0.92); font-family: Inter, system-ui, sans-serif; font-size: 17px; font-weight: 500; } /* Call-to-action link */ .ynlbpc-member-link { color: var(--accent); font-family: Inter, system-ui, sans-serif; font-size: 17px; font-weight: 700; text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid rgba(215,192,122,0.45); transition: all .25s ease; } /* Premium hover effect */ .ynlbpc-member-link:hover { color: #f2dc9b; border-bottom: 1px solid #f2dc9b; text-shadow: 0 0 8px rgba(215,192,122,0.25); } /* Optional: subtle divider above bar */ .ynlbpc-member-bar::before { content: ""; display: block; width: 120px; height: 1px; background: linear-gradient( 90deg, transparent, rgba(215,192,122,.6), transparent ); margin: 0 auto 14px auto; } /* Mobile optimization */ @media (max-width: 768px) { .ynlbpc-member-bar { flex-direction: column; gap: 6px; margin: 22px auto 28px auto; } .ynlbpc-member-badge { font-size: 19px; } .ynlbpc-member-text, .ynlbpc-member-link { font-size: 15.5px; } } /* Force the YNLBPC benefit bar to stay on ONE line */ .ynlbpc-member-bar{ display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; gap: 12px !important; } .ynlbpc-member-badge, .ynlbpc-member-text, .ynlbpc-member-link{ display: inline !important; white-space: nowrap !important; } /* ============================================================ YNLBPC Member Thank You + Coupon Card ============================================================ */ .yn-member-thanks-wrap{ max-width: 980px; margin: 0 auto; padding: 24px 16px; color: #fff; } .yn-member-thanks-title{ font-size: 28px; font-weight: 900; letter-spacing: .3px; text-align: center; margin: 10px 0 6px; } .yn-member-thanks-sub{ text-align: center; opacity: .9; margin: 0 0 18px; } .yn-coupon-card{ margin: 0 auto 16px; max-width: 760px; border-radius: 18px; padding: 18px; background: rgba(255,255,255,.06); box-shadow: 0 20px 50px rgba(0,0,0,.55); } .yn-coupon-top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 14px; } .yn-coupon-badge{ font-weight: 900; letter-spacing: .14em; font-size: 12px; opacity: .9; } /* ========================================== YNLBPC COUPON VALUE TEXT $10.00 Off ========================================== */ .yn-coupon-off{ font-weight:1000; font-size:26px; letter-spacing:.06em; color:var(--yn-btn-gold) !important; } .yn-coupon-label{ font-weight: 800; opacity: .9; margin-bottom: 6px; } .yn-coupon-code{ font-weight: 1000; font-size: 26px; letter-spacing: .08em; color: #d4af37; /* gold */ padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.35); display: inline-block; max-width: 100%; overflow-wrap: anywhere; } .yn-coupon-code.yn-muted{ color: rgba(255,255,255,.65); letter-spacing: normal; font-size: 16px; } .yn-coupon-meta{ margin-top: 10px; opacity: .8; font-size: 13px; } .yn-coupon-actions{ display:flex; justify-content:center; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .yn-member-next{ display:flex; justify-content:center; margin-top: 12px; } .yn-member-disclaimer{ max-width: 760px; margin: 18px auto 0; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.04); } .yn-member-disclaimer h3{ margin: 0 0 8px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; opacity: .95; } .yn-member-disclaimer p{ margin: 0; font-size: 13px; line-height: 1.55; opacity: .85; } /* Print-friendly */ @media print{ body * { visibility: hidden !important; } #ynCouponCard, #ynCouponCard * { visibility: visible !important; } #ynCouponCard{ position: fixed; left: 0; top: 0; width: 100% !important; max-width: none !important; margin: 0 !important; box-shadow: none !important; background: #fff !important; color: #000 !important; } .yn-coupon-code{ background:#fff !important; color:#000 !important; border: 1px solid #000 !important; } .yn-coupon-off{ color:#000 !important; } .yn-coupon-actions{ display:none !important; } } .yn-resend-form { display:inline-block; margin:0; } .yn-resend-form button { white-space: nowrap; } /* ===== Member Thank You (Coupon Card + Video + Print) ===== */ .yn-member-thanks-wrap{ max-width: 980px; margin: 0 auto; padding: 18px 16px 40px; } .yn-member-thanks-title{ margin: 0 0 8px; font-weight: 900; letter-spacing: .3px; } .yn-member-thanks-sub{ margin: 0 0 16px; opacity: .88; } .yn-coupon-card{ border-radius: 18px; padding: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 18px 40px rgba(0,0,0,.55); } .yn-coupon-top{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.10); } .yn-coupon-badge{ font-weight: 900; letter-spacing: .22em; font-size: 12px; opacity: .9; } .yn-coupon-off{ font-weight: 1000; font-size: 26px; letter-spacing: .06em; } .yn-coupon-label{ font-weight: 800; opacity: .9; margin-bottom: 6px; } .yn-coupon-code{ font-size: 22px; font-weight: 1000; letter-spacing: .10em; padding: 12px 14px; border-radius: 14px; background: rgba(0,0,0,.35); border: 1px dashed rgba(255,255,255,.22); display: inline-block; } .yn-coupon-code.yn-muted{ opacity: .75; letter-spacing: .02em; font-weight: 700; font-size: 16px; } .yn-coupon-meta{ margin-top: 10px; font-size: 13px; opacity: .8; } .yn-coupon-actions{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 14px; align-items:center; } .yn-resend-form{ margin:0; } .yn-member-video{ margin-top: 18px; } .yn-member-video-frame{ max-width: 960px; margin: 0 auto; border-radius: 18px; box-shadow: 0 18px 40px rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.10); } /* ===== PRINT: coupon prints like a real voucher, hides buttons + video ===== */ @media print { body{ background: #fff !important; color: #000 !important; } .yn-coupon-actions, .yn-member-video, .site-footer, .navbar, .btn, a{ display: none !important; } .yn-coupon-card{ background: #fff !important; border: 2px solid #000 !important; box-shadow: none !important; } .yn-coupon-code{ background: #fff !important; color: #000 !important; border: 2px dashed #000 !important; } } .position-relative { position: relative; } .toggle-password{ position:absolute; right:14px; top:50%; transform:translateY(-50%); border:0; background:transparent; padding:0; cursor:pointer; z-index:5; /* <-- important */ font-size:18px; line-height:1; opacity:.8; } .toggle-password:hover{ opacity:1; } /* YNLBPC Member Welcome Block */ .yn-welcome{ padding: 18px 18px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: 0 10px 26px rgba(0,0,0,.22); } .yn-welcome__title{ font-family: "Playfair Display", serif; font-weight: 700; letter-spacing: .2px; font-size: 1.25rem; margin-bottom: 8px; } .yn-welcome__name{ display: inline-block; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); } .yn-welcome__copy{ margin: 0; font-family: "Inter", sans-serif; font-size: 1rem; line-height: 1.6; color: rgba(255,255,255,.82); } .yn-welcome__copy strong{ color: rgba(255,255,255,.95); font-weight: 700; } .yn-welcome__note{ margin-top: 12px; padding: 10px 12px; border-radius: 12px; font-family: "Inter", sans-serif; font-size: .95rem; line-height: 1.4; color: rgba(255,255,255,.88); background: rgba(0,0,0,.28); border: 1px dashed rgba(255,255,255,.18); } .yn-btn-shop{ display:inline-block; padding: 14px 34px; border-radius: 999px; font-weight: 700; letter-spacing: .4px; text-decoration:none !important; box-shadow: 0 10px 26px rgba(0,0,0,.28); transition: transform .2s ease, box-shadow .2s ease; } .yn-btn-shop:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.36); } @media (max-width: 576px){ .yn-welcome{ padding: 14px; } .yn-welcome__title{ font-size: 1.15rem; } .yn-welcome__copy{ font-size: .98rem; } } /* YNLBPC Membership Card */ .yn-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.10); border-radius: 16px; padding: 22px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 16px 40px rgba(0,0,0,.35); } .yn-card__header { padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.10); } .yn-card__title { margin: 0 0 6px; font-size: 1.35rem; letter-spacing: .02em; line-height: 1.2; color: rgba(255,255,255,.95); } .yn-card__subtitle { margin: 0; font-size: .95rem; color: rgba(255,255,255,.65); } .yn-card__lead { margin: 0 0 10px; font-size: 1.02rem; line-height: 1.65; color: rgba(255,255,255,.86); } .yn-name { color: rgba(255,255,255,.98); font-weight: 800; } .yn-card__copy { margin: 0 0 14px; font-size: .98rem; line-height: 1.75; color: rgba(255,255,255,.78); } /* “Note” callout */ .yn-note { background: rgba(225,29,46,.08); border: 1px solid rgba(225,29,46,.30); border-radius: 14px; padding: 14px 14px 12px; } .yn-note__title { font-weight: 900; letter-spacing: .02em; margin: 0 0 8px; color: rgba(255,255,255,.95); } .yn-note__list { margin: 0; padding-left: 18px; color: rgba(255,255,255,.82); line-height: 1.7; font-size: .95rem; } .yn-note__list li { margin: 6px 0; } /* Optional: tighten on mobile */ @media (max-width: 520px) { .yn-card { padding: 16px; border-radius: 14px; } .yn-card__title { font-size: 1.2rem; } } /* ========================================================= 9) TEAM LOGOS (MATCHES HEADER STRUCTURE) ========================================================= */ .teamlogos-track { display: flex; align-items: center; gap: 20px; white-space: nowrap; } .teamlogos-set { display: flex; align-items: center; gap: 20px; } .teamlogos-set a { display: inline-flex; align-items: center; justify-content: center; } /* ===== Global 17-logo strip (every page) ===== */ .yn-logo-strip{ padding: 14px 0 10px; margin-top: 86px; /* matches body padding-top / fixed nav clearance */ } .yn-logo-row{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; } .yn-logo-link{ display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } /* ===== Global 17-logo Size ===== */ .team-logo{ width: 100px !important; height: 100px !important; object-fit: contain !important; opacity: .92; filter: grayscale(12%); transition: transform .18s ease, opacity .18s ease, filter .18s ease; } .yn-logo-link:hover .team-logo{ transform: scale(1.10); opacity: 1; filter: grayscale(0%); } @media (max-width: 768px){ .team-logo{ width: 80px !important; height: 80px !important; } } /* ================================ YNLBPC 17-LOGO STRIP (FINAL) Put this at the BOTTOM of global.css ================================ */ .yn-logo-strip{ padding: 10px 0 12px; margin-top: 10px; } .yn-logo-head{ text-align: center; margin-bottom: 10px; } .yn-logo-h1{ margin: 0 0 6px; font-family: "Playfair Display", Georgia, serif; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: clamp(18px, 2.1vw, 34px); line-height: 1.15; white-space: nowrap; /* forces one row */ } .yn-logo-h2{ margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 600; font-size: clamp(14px, 1.35vw, 20px); line-height: 1.25; color: rgba(255,255,255,.82); } /* ONE ROW on desktop */ .yn-logo-row{ display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 18px; } /* Allow swipe/scroll on smaller screens (still one row) */ @media (max-width: 992px){ .yn-logo-row{ justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 6px 10px 10px; scrollbar-width: thin; } } /* LOGO SIZE (DESKTOP) */ .yn-logo-row .team-logo{ width: 130px !important; /* <-- change desktop size here */ height: 130px !important; object-fit: contain; opacity: .92; filter: grayscale(12%); transition: transform .18s ease, opacity .18s ease, filter .18s ease; } /* LOGO SIZE (TABLET) */ @media (max-width: 768px){ .yn-logo-row .team-logo{ width: 90px !important; /* <-- tablet size */ height: 90px !important; } } /* LOGO SIZE (PHONE) */ @media (max-width: 576px){ .yn-logo-row .team-logo{ width: 72px !important; /* <-- phone size */ height: 72px !important; } } .yn-logo-link{ display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .yn-logo-link:hover .team-logo{ transform: scale(1.08); opacity: 1; filter: grayscale(0%); } /* ========================================================= TEAM LOGOS STRIP (works with your existing markup) Put at VERY BOTTOM of global.css ========================================================= */ /* Headline: keep on one line desktop, allow wrap on mobile */ .yn-logo-h1{ margin: 0 0 6px; font-family: "Playfair Display", Georgia, serif; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; line-height: 1.12; font-size: clamp(18px, 2.2vw, 36px); white-space: nowrap; } .yn-logo-h2{ margin: 0 0 10px; font-family: "Playfair Display", Georgia, serif; font-weight: 600; font-size: clamp(14px, 1.35vw, 20px); color: rgba(255,255,255,.82); } /* Allow headline wrap on smaller screens */ @media (max-width: 768px){ .yn-logo-h1{ white-space: normal; } } /* Strip spacing */ .yn-team-strip{ padding: 10px 0 16px; } /* ONE ROW always; scroll on small screens */ .yn-team-logos{ display: flex !important; flex-wrap: nowrap !important; /* one row */ align-items: center !important; justify-content: center !important; gap: 18px !important; } /* Make the anchors not collapse */ .yn-team-logos a{ display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; } /* LOGO SIZE DESKTOP (increase here) */ .yn-team-logos img.team-logo{ width: 170px !important; /* desktop size */ height: 170px !important; object-fit: contain !important; opacity: .95; filter: grayscale(10%); transition: transform .18s ease, opacity .18s ease, filter .18s ease; } .yn-team-logos a:hover img.team-logo{ transform: scale(1.08); opacity: 1; filter: grayscale(0%); } /* Tablet */ @media (max-width: 992px){ .yn-team-logos{ justify-content: flex-start !important; /* better for scrolling */ overflow-x: auto !important; -webkit-overflow-scrolling: touch; padding: 6px 12px 10px; } .yn-team-logos img.team-logo{ width: 130px !important; height: 130px !important; } } /* Phone (make them clearly visible) */ @media (max-width: 576px){ .yn-team-logos img.team-logo{ width: 110px !important; height: 110px !important; } } /* ===== YNLBPC Member Nav (Howdy) ===== */ .yn-member-nav .yn-member-toggle{ display:flex; align-items:center; gap:8px; white-space:nowrap; } .yn-member-avatar{ border-radius:999px; border:1px solid rgba(255,255,255,.22); } .yn-member-howdy{ opacity:.7; font-weight:600; } .yn-member-name{ font-weight:800; } .yn-member-menu{ min-width:240px; } .yn-member-header{ padding:10px 14px; } .yn-member-title{ font-size:12px; text-transform:uppercase; opacity:.7; letter-spacing:.08em; } .yn-member-fullname{ font-weight:900; } .yn-login-btn{ padding:10px 16px; border-radius:999px; font-weight:800; } /* ===================================== YNLBPC Member Dropdown (Join Style) ===================================== */ @media (min-width: 992px) { .yn-member-nav .dropdown-menu { display: none; } .yn-member-nav:hover > .dropdown-menu { display: block; } } /* ===================================== FIX: Hover dropdown stays open (Desktop) ===================================== */ @media (min-width: 992px) { /* Ensure the LI is the hover “container” */ li.yn-member-nav { position: relative; } /* Default hidden */ li.yn-member-nav > .dropdown-menu { display: none; position: absolute; top: 100%; /* sit directly under button */ left: 0; margin-top: 0; /* IMPORTANT: remove hover gap */ z-index: 9999; } /* Stay open if hovering parent OR the menu itself */ li.yn-member-nav:hover > .dropdown-menu, li.yn-member-nav > .dropdown-menu:hover { display: block; } } /* ============================== YNLBPC Cart Dropdown Hover ============================== */ .yn-cart-nav { position: relative; } .yn-cart-dropdown { display: block; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.25s ease; pointer-events: none; min-width: 320px; right: 0; left: auto; } @media (min-width: 992px) { .yn-cart-nav:hover .yn-cart-dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } } /* =============================== YNLBPC CART ICON + COUNTER =============================== */ .yn-cart-icon{ position:relative; display:inline-block; font-size:22px; line-height:1; } /* cart count badge */ .yn-cart-count{ position:absolute; top:-6px; right:-10px; background:#d4af37; color:#000; font-size:11px; font-weight:700; border-radius:999px; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; padding:0 5px; } .navbar-nav { align-items: center; } .yn-cart-nav { margin-left: 12px; } /* Home logo hover (WP version) */ .teamlogos a:hover img.team-logo { -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } /* Make the animation smooth */ .teamlogos img.team-logo { transition: transform .1s ease; -webkit-transition: -webkit-transform .1s ease; } /* ============================ YNLBPC Logo Ticker (Banner) ============================ */ /* Outer zone (transparent, behind dropdowns) */ .ynlbpc-logo-ticker-zone{ position: relative; z-index: 1; /* keep LOW so dropdown can overlay */ background: transparent !important; padding-top: 10px; } /* Banner wrapper */ .teamlogos-banner{ width: 100%; padding: 15px 0; background: transparent !important; } /* Scrolling track */ .teamlogos-track{ display: flex; align-items: center; width: max-content; animation: scrollLogos 75s linear infinite; gap: 6px; /* primary spacing control */ } /* Links should not add spacing */ .teamlogos-track a{ display: inline-block; margin: 0; padding: 0; } /* Pause on hover */ .teamlogos-track:hover{ animation-play-state: paused; } /* Continuous scrolling */ @keyframes scrollLogos{ 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Dropdown should always sit above banner */ .navbar .dropdown-menu{ position: absolute; z-index: 99999 !important; } .teamlogos-banner{ width: 100%; padding: 15px 0; background: transparent !important; } /* DESKTOP SCROLLING BANNER */ .ynlbpc-logo-ticker-zone{ background: transparent !important; position: relative; z-index: 1; /* KEEP BANNER BELOW DROPDOWN */ margin-top: 30px;/* DESKTOP SCROLLING BANNER -UP +DOWN */ padding-top: 0 !important; } /* Splash Page Banner – DESKTOP -UP +DOWN */ html.yn-entry-locked .ynlbpc-logo-ticker-zone { position: fixed; top: 120px; left: 0; width: 100%; margin-top: 0px !important; z-index: 1000001 !important; } /* MOBILE SCROLLING BANNER -up +DOWN */ @media (max-width: 991px) { .ynlbpc-logo-ticker-zone { margin-top: 20px !important; } } /* MOBILE SPLASH PAGE BANNER -up +DOWN */ @media (max-width: 991px) { html.yn-entry-locked .ynlbpc-logo-ticker-zone { top: 100px; margin-top: 10px !important; } } .teamlogos-track{ display: flex; align-items: center; width: max-content; /* will-change: transform; — DISABLED: testing if this causes background blur */ animation: scrollLogos 35s linear infinite; } .teamlogos-set{ display: flex; align-items: center; gap: 6px; /* spacing control between logos */ } /* kill any old margin spacing */ .teamlogos-track img.team-logo{ display: block; } @keyframes scrollLogos{ 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } /* because we have 2 identical sets */ } .teamlogos-track:hover{ animation-play-state: paused; } /* dropdown always above banner */ .navbar .dropdown-menu{ z-index: 99999 !important; } .ynlbpc-logo-ticker-zone::before,.ynlbpc-logo-ticker-zone::after{content:"";position:absolute;top:0;bottom:0;width:70px;pointer-events:none;z-index:5} .ynlbpc-logo-ticker-zone::before{left:0;background:linear-gradient(to right, rgba(0,0,0,.85), rgba(0,0,0,0))} .ynlbpc-logo-ticker-zone::after{right:0;background:linear-gradient(to left, rgba(0,0,0,.85), rgba(0,0,0,0))} .ynlbpc-logo-ticker-zone{position:relative;isolation:isolate} .teamlogos-banner{background:transparent!important;padding-top:0px!important;padding-bottom:2px!important} /* .teamlogos-track{will-change:transform} — DISABLED: testing */ /* ========================================================= YNLBPC NAVIGATION SYSTEM (FINAL CLEAN) ========================================================= */ /* NAVBAR SHELL */ .navbar{ background: rgba(0,0,0,0.20) !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: none !important; /* backdrop-filter: blur(10px); — DISABLED: testing if this causes background image blur */ /* -webkit-backdrop-filter: blur(10px); */ } .navbar-nav{ align-items:center; } /* TOP-LEVEL NAV LINKS */ .navbar .nav-link{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important; font-weight: 600 !important; font-size: 15px !important; letter-spacing: .6px !important; text-transform: uppercase !important; color: var(--yn-white) !important; padding: 10px 16px !important; transition: color .18s ease; } .navbar .nav-link:hover, .navbar .nav-link:focus{ color: var(--yn-gold) !important; } /* JOIN BUTTON = SAME FAMILY AS BTN-LUX */ .yn-join-btn{ background: var(--yn-btn-gold) !important; color: #000 !important; border: 1px solid var(--yn-btn-gold) !important; border-radius: 999px !important; padding: 10px 18px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: .4px !important; box-shadow: none !important; } .yn-join-btn:hover, .yn-join-btn:focus{ background: var(--yn-btn-gold-hover) !important; border-color: var(--yn-btn-gold-hover) !important; color: #000 !important; } /* GENERIC DROPDOWN POSITIONING */ .nav-item.dropdown{ position: relative; } .dropdown-toggle{ background: none; border: 0; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: .35rem; } /* DROPDOWN PANEL */ .navbar .dropdown-menu{ position: absolute; top: calc(100% + 10px); left: 0; min-width: 220px; padding: 8px 0; margin: 0; list-style: none; background: var(--yn-black); border: 1px solid rgba(212,175,55,.25); border-radius: 10px; box-shadow: 0 16px 30px rgba(0,0,0,.35); z-index: 99999 !important; } /* DROPDOWN LINKS */ .navbar .dropdown-menu .dropdown-item, .navbar .dropdown-menu .dropdown-link, .navbar .dropdown-menu li > a{ display:block; padding: .65rem .9rem; color: var(--yn-white) !important; background: transparent !important; text-decoration: none; white-space: nowrap; font-weight: 600; opacity: 1 !important; transition: color .18s ease; } /* ========================================== YNLBPC DROPDOWN TEXT SYSTEM (FINAL FIX) ========================================== */ /* Default dropdown text = white */ .navbar .dropdown-menu a, .navbar .dropdown-menu .dropdown-item, .navbar .dropdown-menu .dropdown-link, .navbar .dropdown-menu li > a{ color:#ffffff !important; background:transparent !important; } /* Hover = universal button gold */ .navbar .dropdown-menu a:hover, .navbar .dropdown-menu a:focus, .navbar .dropdown-menu .dropdown-item:hover, .navbar .dropdown-menu .dropdown-item:focus, .navbar .dropdown-menu .dropdown-link:hover, .navbar .dropdown-menu .dropdown-link:focus, .navbar .dropdown-menu li > a:hover, .navbar .dropdown-menu li > a:focus{ color:var(--yn-btn-gold) !important; background:transparent !important; } /* Remove Bootstrap yellow/blue active block */ .navbar .dropdown-menu .dropdown-item.active, .navbar .dropdown-menu .dropdown-item:active, .navbar .dropdown-menu a.active, .navbar .dropdown-menu a:active, .navbar .dropdown-menu .current-menu-item > a, .navbar .dropdown-menu .current_page_item > a, .navbar .dropdown-menu .current-menu-ancestor > a{ color:var(--yn-btn-gold) !important; background:transparent !important; } /* Remove faded bootstrap dropdown text */ .navbar .dropdown-menu .dropdown-item{ opacity:1 !important; } /* ========================================== YNLBPC DROPDOWN PANEL READABILITY FIX ========================================== */ .navbar .dropdown-menu{ background: #0b0b0b !important; background-color: #0b0b0b !important; opacity: 1 !important; border: 1px solid rgba(185,151,91,.35) !important; box-shadow: 0 18px 40px rgba(0,0,0,.55) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* keep text readable */ .navbar .dropdown-menu a, .navbar .dropdown-menu .dropdown-item, .navbar .dropdown-menu .dropdown-link, .navbar .dropdown-menu li > a{ color: #ffffff !important; background: transparent !important; } /* hover = universal gold */ .navbar .dropdown-menu a:hover, .navbar .dropdown-menu a:focus, .navbar .dropdown-menu .dropdown-item:hover, .navbar .dropdown-menu .dropdown-item:focus, .navbar .dropdown-menu .dropdown-link:hover, .navbar .dropdown-menu .dropdown-link:focus, .navbar .dropdown-menu li > a:hover, .navbar .dropdown-menu li > a:focus{ color: var(--yn-btn-gold) !important; background: transparent !important; } /* remove active/current background blocks */ .navbar .dropdown-menu .dropdown-item.active, .navbar .dropdown-menu .dropdown-item:active, .navbar .dropdown-menu a.active, .navbar .dropdown-menu a:active, .navbar .dropdown-menu .current-menu-item > a, .navbar .dropdown-menu .current_page_item > a, .navbar .dropdown-menu .current-menu-ancestor > a{ color: var(--yn-btn-gold) !important; background: transparent !important; } /* JOIN MESSAGE INSIDE DROPDOWN */ .yn-join-message{ padding: 10px 16px 6px; color: var(--yn-btn-gold) !important; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } /* MEMBER DROPDOWN */ .yn-member-nav .yn-member-toggle{ display:flex; align-items:center; gap:8px; white-space:nowrap; } .yn-member-avatar{ border-radius:999px; border:1px solid rgba(255,255,255,.22); } .yn-member-howdy{ opacity:.7; font-weight:600; } .yn-member-name{ font-weight:800; } .yn-member-menu{ min-width:240px; } .yn-member-header{ padding:10px 14px; } .yn-member-title{ font-size:12px; text-transform:uppercase; opacity:.7; letter-spacing:.08em; } /* ========================================== YNLBPC CUSTOMER NAME (DROPDOWN) ========================================== */ .yn-member-header{ color: var(--yn-btn-gold); } .yn-member-fullname{ color: var(--yn-btn-gold) !important; font-weight: 900; } .yn-login-btn{ padding:10px 16px; border-radius:999px; font-weight:800; } /* MEMBER DROPDOWN HOVER OPEN */ @media (min-width: 992px){ li.yn-member-nav{ position: relative; } li.yn-member-nav > .dropdown-menu{ display: none; position: absolute; top: 100%; left: 0; margin-top: 0; z-index: 99999; } li.yn-member-nav:hover > .dropdown-menu, li.yn-member-nav > .dropdown-menu:hover{ display: block; } } /* CART */ .yn-cart-nav{ position: relative; margin-left: 12px; } .yn-cart-toggle{ display:inline-flex; align-items:center; } .yn-cart-icon{ position:relative; display:inline-block; font-size:22px; line-height:1; } .yn-cart-count{ position:absolute; top: 2px; right: 10px; background: var(--yn-btn-gold); color:#000; font-size:11px; font-weight:700; border-radius:999px; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; padding:0 5px; } .yn-cart-dropdown{ display:block; opacity:0; visibility:hidden; transform:translateY(8px); transition:all .25s ease; pointer-events:none; min-width:320px; right:0; left:auto; } @media (min-width: 992px){ .yn-cart-nav:hover .yn-cart-dropdown{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; } } /* MOBILE */ @media (max-width: 768px){ .navbar .nav-link{ padding: 12px 0 !important; font-size: 14px !important; } .navbar .dropdown-menu{ background:#111; } .navbar .dropdown-menu .dropdown-item, .navbar .dropdown-menu .dropdown-link, .navbar .dropdown-menu li > a{ padding:12px 18px; } } /* ========================================== YNLBPC MEMBER DROPDOWN CARD ========================================== */ .yn-member-card{ padding:14px 16px 12px; } .yn-member-name{ font-weight:900; font-size:16px; color:var(--yn-btn-gold); } .yn-member-status{ font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--yn-btn-gold) !important; opacity:1 !important; } /* divider */ .dropdown-divider{ height:1px; margin:6px 0; background:rgba(255,255,255,.10); border:0; } .navbar .dropdown-menu{ padding:6px 0; } .navbar .dropdown-menu .dropdown-item{ padding:10px 16px; } /* ========================================== YNLBPC VIP UNLOCK PROGRESS BAR ========================================== */ .yn-db-vip-progress{ margin-top:14px; padding:14px 16px; border:1px solid rgba(185,151,91,.28); border-radius:14px; background:rgba(255,255,255,.03); } .yn-db-vip-progress-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; } .yn-db-vip-label{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--yn-btn-gold); } .yn-db-vip-points{ font-size:13px; font-weight:700; color:#ffffff; } .yn-db-vip-bar{ width:100%; height:12px; border-radius:999px; background:rgba(255,255,255,.10); overflow:hidden; position:relative; } .yn-db-vip-fill{ height:100%; border-radius:999px; background:var(--yn-btn-gold); transition:width .35s ease; } .yn-db-vip-copy{ margin-top:10px; font-size:13px; line-height:1.6; color:rgba(255,255,255,.84); } .yn-db-vip-copy strong{ color:var(--yn-btn-gold); } /* ========================================== YNLBPC VIP REFERRAL ACTIONS ========================================== */ .yn-db-vip-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:14px; } .yn-db-referral-copy{ flex:1 1 320px; min-width:260px; } .yn-db-copy-status{ font-size:13px; font-weight:700; color:var(--yn-btn-gold); min-height:20px; } .yn-cap-preview-wrap{ width:100%; max-width:520px; margin:0 auto; } .yn-cap-preview-zoom{ position:relative; overflow:hidden; border-radius:18px; cursor:zoom-in; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.10); } .yn-cap-preview-zoom img{ display:block; width:100%; height:auto; transition:transform .28s ease; transform-origin:center center; } .yn-cap-preview-zoom:hover img{ transform:scale(1.35); } .yn-cap-lightbox{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.88); z-index:99999; padding:30px 16px; } .yn-cap-lightbox.is-open{ display:flex; } .yn-cap-lightbox img{ max-width:min(92vw, 1100px); max-height:88vh; width:auto; height:auto; border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.10); } .yn-cap-lightbox-close{ position:absolute; top:16px; right:18px; width:44px; height:44px; border:none; border-radius:999px; background:var(--yn-btn-gold); color:#000; font-size:28px; font-weight:700; line-height:1; cursor:pointer; } @media (max-width:768px){ .yn-cap-preview-zoom:hover img{ transform:none; } } .yn-cart-count.is-hidden{ display:none !important; } /* ========================================= YNLBPC STRIPE CHECKOUT FIX (Dark Theme) ========================================= */ /* Stripe card fields container */ .woocommerce-checkout .StripeElement{ background:#ffffff !important; color:#000000 !important; border:1px solid rgba(0,0,0,.25) !important; border-radius:6px; padding:12px 14px; font-size:16px; } /* Focus state */ .woocommerce-checkout .StripeElement--focus{ border-color:var(--yn-btn-gold) !important; box-shadow:0 0 0 2px rgba(212,175,55,.25); } /* Invalid card */ .woocommerce-checkout .StripeElement--invalid{ border-color:#d63638 !important; } /* Stripe labels */ .woocommerce-checkout #payment label{ color:#ffffff !important; font-weight:600; } /* Stripe payment method title */ .woocommerce-checkout #payment .payment_method_stripe label{ color:#ffffff !important; } /* Stripe test mode message */ .woocommerce-checkout #payment .woocommerce-info{ background:#111; color:#fff; border-left:4px solid var(--yn-btn-gold); } /* Save card checkbox */ .woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew label{ color:#ffffff !important; } /* Card field wrapper */ .woocommerce-checkout #stripe-card-element{ background:#ffffff !important; padding:12px; border-radius:6px; } .woocommerce-checkout .StripeElement{ font-size:17px; padding:14px 16px; } /* YNLBPC Thank You transparency fix */ .yn-wrap{ background: transparent !important; } .yn-card{ background: transparent !important; border: 1px solid rgba(212,175,55,.25); /* optional gold border */ box-shadow: none !important; } .yn-top{ background: transparent !important; } .yn-thankyou-wrapper{ background: transparent !important; } .join-dropdown-toggle, .customer-dropdown-toggle{ height:42px; padding:0 18px; } /* ----------------------------- 1) ALL NAV CTA TRIGGERS Join / Login / Member ----------------------------- */ .yn-nav-trigger, .yn-login-btn, .yn-member-toggle{ display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; height:42px !important; min-height:42px !important; padding:0 18px !important; border-radius:999px !important; line-height:1 !important; white-space:nowrap !important; text-decoration:none !important; font-size:14px !important; font-weight:700 !important; } /* inner trigger text */ .yn-nav-trigger-text, .yn-member-name, .yn-login-btn{ font-size:14px !important; font-weight:700 !important; line-height:1 !important; } /* keep member button text black like btn-lux */ .yn-member-toggle .yn-member-name{ color:#000 !important; } /* avatar sizing */ .yn-member-toggle .yn-member-avatar{ width:28px; height:28px; border-radius:999px; border:1px solid rgba(255,255,255,.20); flex:0 0 auto; } /* dropdown arrows */ .yn-nav-trigger.dropdown-toggle::after, .yn-member-toggle.dropdown-toggle::after{ margin-left:6px !important; } /* same minimum visual width on desktop */ @media (min-width:992px){ .yn-join-cta .yn-nav-trigger, .yn-login-btn, .yn-member-toggle{ min-width:118px; } } /* ----------------------------- 2) DROPDOWN PANELS ----------------------------- */ .navbar .yn-member-menu, .navbar #joinDropdown .dropdown-menu{ min-width:260px; padding:10px 0; border-radius:14px; background:#0b0b0b !important; border:1px solid rgba(185,151,91,.30) !important; box-shadow:0 18px 40px rgba(0,0,0,.50) !important; } /* ----------------------------- 3) MEMBER CARD HEADER ----------------------------- */ .yn-member-header-wrap{ padding:0 12px 8px; list-style:none; } .yn-member-header-card{ padding:14px 14px 12px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(185,151,91,.18); } .yn-member-title{ font-size:11px; font-weight:800; letter-spacing:.10em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:6px; } .yn-member-fullname{ font-size:16px; font-weight:900; color:var(--yn-btn-gold) !important; line-height:1.2; } .yn-member-status{ margin-top:6px; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--yn-btn-gold) !important; opacity:1 !important; } /* ----------------------------- 4) DROPDOWN LINKS ----------------------------- */ .navbar .dropdown-divider{ margin:8px 0; border-color:rgba(255,255,255,.10) !important; } .navbar .dropdown-menu .dropdown-item, .navbar .dropdown-menu .dropdown-link, .navbar .dropdown-menu li > a{ display:block; padding:10px 16px; color:#fff !important; background:transparent !important; font-weight:600; transition:color .18s ease; } .navbar .dropdown-menu .dropdown-item:hover, .navbar .dropdown-menu .dropdown-item:focus, .navbar .dropdown-menu .dropdown-link:hover, .navbar .dropdown-menu .dropdown-link:focus, .navbar .dropdown-menu li > a:hover, .navbar .dropdown-menu li > a:focus{ color:var(--yn-btn-gold) !important; background:transparent !important; box-shadow:none !important; } .navbar .dropdown-menu .dropdown-item.active, .navbar .dropdown-menu .dropdown-item:active, .navbar .dropdown-menu a.active, .navbar .dropdown-menu a:active, .navbar .dropdown-menu .current-menu-item > a, .navbar .dropdown-menu .current_page_item > a, .navbar .dropdown-menu .current-menu-ancestor > a{ color:var(--yn-btn-gold) !important; background:transparent !important; } /* ----------------------------- 5) JOIN HELPER TEXT ----------------------------- */ .yn-join-message{ padding:6px 16px 8px; color:var(--yn-btn-gold) !important; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; } /* ========================================== YNLBPC CONFIRM ORDER (PROFESSIONAL FINAL) ========================================== */ /* OUTER WRAP */ .yn-confirm-wrap{ display:flex; justify-content:center; align-items:flex-start; padding:60px 20px; } /* CARD — uses your yn-card system cleanly */ .yn-confirm-card{ width:100%; max-width:720px; text-align:left; } /* HEADER */ .yn-confirm-header{ display:flex; align-items:center; gap:14px; margin-bottom:22px; } /* CAP IMAGE */ .yn-confirm-cap{ width:80px; height:auto; } /* TEXT — FORCE BRAND GOLD */ .yn-confirm-card, .yn-confirm-card p, .yn-confirm-card strong, .yn-confirm-card h1{ color:var(--yn-gold-text); } /* TITLE */ .yn-confirm-header h1{ font-size:28px; font-weight:800; letter-spacing:.3px; margin:0; } /* BODY TEXT SPACING */ .yn-confirm-card p{ font-size:16px; line-height:1.6; margin-bottom:10px; } /* TOTAL (highlight area) */ .yn-confirm-total{ margin-top:18px; font-size:24px; font-weight:900; letter-spacing:.4px; color:var(--yn-gold-text); } /* ACTION ROW */ .yn-confirm-actions{ margin-top:28px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; } /* FORCE BUTTON TEXT TO STAY ON ONE LINE */ .yn-confirm-actions .yn-btn-uniform { white-space: nowrap; } /* BUTTON SYSTEM MATCH btn-lux */ .yn-confirm-actions .yn-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:160px; padding:12px 26px; border-radius:999px; /*OVAL / PILL */ font-weight:700; letter-spacing:.4px; background:var(--yn-btn-gold); border:1px solid var(--yn-btn-gold); color:#000; text-decoration:none; transition:all .2s ease; } /* HOVER */ .yn-confirm-actions .yn-btn:hover{ background:var(--yn-btn-gold-hover); border-color:var(--yn-btn-gold-hover); transform:translateY(-1px); } /* OPTIONAL: secondary visual (slightly softer) */ .yn-confirm-actions .yn-btn-secondary{ opacity:.85; } /* MOBILE */ @media (max-width:768px){ .yn-confirm-actions{ flex-direction:column; align-items:stretch; } .yn-confirm-actions .yn-btn{ width:100%; } .yn-confirm-header{ flex-direction:column; align-items:flex-start; } } /* ========================================== YNLBPC CONFIRM — LUXURY FINISH ========================================== */ /* subtle gold divider */ .yn-confirm-header::after{ content:""; display:block; width:100%; height:2px; margin-top:18px; background:linear-gradient( 90deg, transparent, rgba(185,151,91,.6), transparent ); } /* total glow (premium feel) */ .yn-confirm-total{ text-shadow:0 0 10px rgba(185,151,91,.25); } /* button luxury hover */ .yn-confirm-actions .yn-btn{ box-shadow:0 10px 26px rgba(0,0,0,.28); } .yn-confirm-actions .yn-btn:hover{ box-shadow:0 14px 34px rgba(0,0,0,.36); } /* subtle card depth */ .yn-confirm-card{ background:rgba(255,255,255,.03); border:1px solid rgba(185,151,91,.28); box-shadow:0 18px 45px rgba(0,0,0,.45); } /* cap slight glow */ .yn-confirm-cap{ filter: drop-shadow(0 0 6px rgba(185,151,91,.25)); } /* ========================================== CONFIRM HEADER (INLINE LAYOUT FIX) ========================================== */ .yn-confirm-header { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; /* 🚀 prevents wrapping */ } .yn-confirm-header h1 { margin: 0; white-space: nowrap; /* 🚀 FORCE one line */ font-size: 28px; } .yn-confirm-cap { width: 50px; height: auto; flex-shrink: 0; /* 🚀 prevents image from shrinking */ } /* ========================================== THANK YOU PAGE MOBILE RESPONSIVE FIX ========================================== */ @media (max-width: 768px) { /* Main container */ .yn-thankyou-container, .thank-you-wrapper, .ynlbpc-thankyou { width: 100% !important; padding: 20px 16px !important; margin: 0 auto !important; box-sizing: border-box; } /* Card / content box */ .yn-thankyou-card, .thank-you-card { width: 100% !important; padding: 20px !important; border-radius: 12px !important; } /* Headings */ .yn-thankyou-card h1, .thank-you-card h1 { font-size: 24px !important; line-height: 1.3; text-align: center; } /* Paragraph text */ .yn-thankyou-card p, .thank-you-card p { font-size: 15px; line-height: 1.5; text-align: center; } /* Buttons */ .yn-btn, .thank-you-card .btn { width: 100% !important; display: block; text-align: center; padding: 14px !important; font-size: 16px; border-radius: 50px !important; margin-top: 12px; } /* Button container */ .yn-confirm-actions, .thank-you-actions { display: flex; flex-direction: column; gap: 12px; } /* Images (logo / cap) */ .yn-confirm-cap, .thank-you-card img { max-width: 120px; height: auto; display: block; margin: 0 auto 10px auto; } /* Prevent overflow issues */ body, html { overflow-x: hidden; } } /* ========================================== FIX RIGHT-SHIFTED INNER BLOCK ========================================== */ @media (max-width: 768px) { .yn-top { display: flex; flex-direction: column; align-items: center !important; } .yn-thankyou-wrapper { width: 100%; max-width: 600px; margin: 0 auto; } .yn-membership-message { width: 100%; margin: 0 auto; } } /* ========================================== YNLBPC UNIVERSAL BUTTON (TRUE TAN) ========================================== */ :root { --yn-tan: #c2a16a; --yn-tan-dark: #a88752; --yn-text-dark: #111; } .yn-btn-uniform { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 190px; height: 48px; padding: 0 18px; border-radius: 999px; font-weight: 800; background: linear-gradient(135deg, var(--yn-tan), var(--yn-tan-dark)); color: var(--yn-text-dark) !important; border: 1px solid rgba(194,161,106,0.6); text-decoration: none; box-shadow: 0 6px 16px rgba(0,0,0,0.35); transition: all 0.25s ease; } .yn-btn-uniform:hover { background: linear-gradient(135deg, #d6b784, var(--yn-tan)); transform: translateY(-1px); } .yn-btn-uniform:active { transform: scale(0.98); } .yn-cta-row, .yn-coupon-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; } /* Universal background system defined above near line 1057 — duplicates removed */ /* ============================================================ LOGIN HEADER (YNLBPC) ============================================================ */ .yn-login-header { text-align: center; margin-bottom: 30px; } .yn-login-header img { max-width: 120px; margin-bottom: 15px; } .yn-login-header h2 { font-family: 'Playfair Display', serif; font-size: 28px; margin-bottom: 10px; } .yn-login-header p { font-size: 14px; margin: 6px 0; } /* FORCE GOLD LINKS IN LOGIN HEADER */ .yn-login-header a, .yn-login-header a:visited, .yn-login-header a:active { color: #d4af37 !important; text-decoration: none; font-weight: 500; } .yn-login-header a:hover { color: #f5d97a !important; /* lighter gold hover */ text-decoration: underline; } .yn-login-header a:hover { text-decoration: underline; } .yn-login-terms { font-size: 12px; opacity: 0.7; margin-top: 12px; }.yn-member-disclaimer { max-width: 800px; margin: 40px auto; line-height: 1.7; } .yn-member-disclaimer h2 { font-family: 'Playfair Display', serif; margin-bottom: 15px; } .yn-member-disclaimer p { margin-bottom: 12px; font-size: 15px; } /*CAP IMAGES PG. CONFIRM */ .yn-confirm-caps { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 25px; } .yn-cap-item { text-align: center; } .yn-cap-item img { width: 120px; height: auto; border-radius: 8px; border: 2px solid #d4af37; background: #000; padding: 8px; } .yn-cap-item p { margin-top: 8px; font-size: 14px; color: #d4af37; } .yn-confirm-wrapper { text-align: center; } .yn-confirm-caps { display: flex; justify-content: center; gap: 25px; flex-wrap: wrap; } .yn-confirm-caps { display: flex; justify-content: center; gap: 25px; flex-wrap: wrap; margin-bottom: 25px; } .yn-cap-item { text-align: center; } .yn-cap-item img { width: 120px; height: auto; border: 2px solid #d4af37; border-radius: 8px; background: #000; padding: 8px; } .yn-cap-item img { box-shadow: 0 0 0 transparent; transition: transform 0.35s ease, box-shadow 0.35s ease; } .yn-cap-item:hover img { transform: scale(1.25); box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4); } /* ========================================== PREMIUM CAP UI ========================================== */ .yn-cap-item { text-align: center; } .yn-cap-card { position: relative; display: inline-block; border-radius: 10px; padding: 15px; max-width: 240px; /* 👈 keeps layout balanced */ margin: 0 auto; } .yn-cap-img { width: 100%; max-width: 220px; /* 🔥 increase size */ height: auto; transition: transform 0.35s ease; cursor: pointer; position: relative; z-index: 1; } /* Selected Badge */ .yn-badge-selected { position: absolute; top: 6px; left: 6px; background: #d4af37; color: #111; font-size: 10px; padding: 4px 6px; border-radius: 4px; font-weight: bold; } /* Quantity Badge */ .yn-badge-qty { position: absolute; bottom: 6px; right: 6px; background: #111; color: #fff; font-size: 12px; padding: 4px 6px; border-radius: 50%; border: 1px solid #d4af37; } /* Title */ .yn-cap-title { margin-top: 8px; color: #d4af37; font-size: 14px; } /* ========================================== MODAL ========================================== */ .yn-modal { display: none; position: fixed; z-index: 9999; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); } .yn-modal-content { margin: auto; display: block; max-width: 500px; } .yn-modal-close { position: absolute; top: 30px; right: 40px; color: #fff; font-size: 40px; cursor: pointer; } .yn-cap-item { opacity: 0; transform: translateY(15px); animation: ynFadeUp 0.5s ease forwards; } .yn-cap-item:nth-child(1) { animation-delay: 0.1s; } .yn-cap-item:nth-child(2) { animation-delay: 0.2s; } .yn-cap-item:nth-child(3) { animation-delay: 0.3s; } @keyframes ynFadeUp { to { opacity: 1; transform: translateY(0); } } .yn-cap-card:hover { box-shadow: 0 12px 30px rgba(212, 175, 55, 0.4); transform: translateY(-6px); transition: all 0.3s ease; } .yn-cap-card { position: relative; overflow: hidden; /* 🔥 THIS STOPS IMAGE FROM SPILLING */ } .yn-confirm-heading { text-align: center; font-size: 22px; color: #d4af37; margin-bottom: 20px; letter-spacing: 1px; } /* ================================ PRICING PANEL ================================ */ .yn-pricing-panel { margin: 30px auto 0; padding: 20px; border: 1px solid #d4af37; border-radius: 10px; background: #0a0a0a; max-width: 400px; } .yn-pricing-title { color: #d4af37; text-align: center; margin-bottom: 15px; font-size: 18px; } .yn-line-item { display: flex; justify-content: space-between; margin: 8px 0; font-size: 14px; } .yn-divider { height: 1px; background: #333; margin: 12px 0; } .yn-subtotal { opacity: 0.8; } .yn-total { font-weight: bold; font-size: 16px; color: #d4af37; } /* ========================================== UPSSELL BUTTON ========================================== */ .yn-upsell { text-align: center; margin: 20px 0; } .yn-btn-upsell { display: inline-block; padding: 10px 18px; background: #d4af37; color: #111; border-radius: 6px; font-weight: bold; text-decoration: none; } .yn-btn-upsell:hover { background: #f1d97a; } /* ========================================== QUANTITY CONTROL ========================================== */ .yn-qty-control { position: absolute; bottom: 6px; right: 6px; display: flex; gap: 5px; z-index: 5; } .yn-qty-control button { background: #111; color: #fff; border: 1px solid #d4af37; width: 22px; height: 22px; cursor: pointer; } .yn-qty-value { font-size: 12px; } /* ========================================== PRODUCT DISPLAY ========================================== */ .yn-product-image { width: 60px; margin-right: 10px; border-radius: 6px; } .yn-product-title { font-weight: bold; color: #d4af37; } .yn-product-sub { font-size: 12px; opacity: 0.7; } .wc-block-components-order-summary-item { display: flex; align-items: center; gap: 10px; } /* ========================================== CAPS DISPLAY (CLEANED) ========================================== */ .yn-total-caps-row-inner { display: flex; align-items: center; gap: 8px; } .yn-multi-caps-inline { display: flex; gap: 6px; } .yn-cap-preview { position: relative; } .yn-cap-preview img { width: 55px; border-radius: 6px; } .yn-cap-preview span { position: absolute; bottom: -3px; right: -3px; background: #d4af37; color: #000; font-size: 9px; padding: 1px 4px; border-radius: 8px; } /* ========================================== CHECKOUT UI ========================================== */ .yn-checkout-caps { text-align: center; padding: 20px 0 10px; } .yn-checkout-total { font-size: 18px; font-weight: 600; margin-bottom: 10px; color: #d4af37; } .yn-checkout-images { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .yn-checkout-images img { width: 60px; border-radius: 6px; } /* ========================================== UTILITIES ========================================== */ .yn-error { background: #2a0000; color: #ffb3b3; border-left: 4px solid #ff0000; padding: 12px 15px; margin-bottom: 15px; border-radius: 6px; font-size: 14px; } .yn-error a { color: #d4af37; text-decoration: underline; } /* REMOVE PRICE IN CHECKOUT */ .wc-block-components-product-price { display: none !important; } /* ========================================== 🔥 CONFIRM PAGE CAPS CENTERING ========================================== */ .yn-cap-grid { display: flex; /* use flex (not grid) */ flex-wrap: wrap; justify-content: center; /* centers caps */ align-items: center; gap: 20px; max-width: 900px; margin: 0 auto 30px; text-align: center; } /* Individual cap item */ .yn-cap-item { flex: 0 0 auto; } @media (max-width: 600px) { .yn-cap-grid { gap: 12px; } } /* ========================================================== 📱 YNLBPC — MOBILE SYSTEM LAYER (NAV SAFE) DOES NOT MODIFY NAV STRUCTURE ========================================================== */ @media (max-width: 768px) { /* ========================================== 1. 🔘 BUTTON CENTER (SAFE — NO NAV BREAK) ========================================== */ .yn-member-nav { text-align: center; /* ✅ safe centering */ } .yn-nav-cta-btn { display: inline-flex; margin-left: auto; margin-right: auto; } /* ========================================== 2. 📦 DROPDOWN (CENTERED MODAL STYLE) ========================================== */ .yn-member-nav .dropdown-menu { position: fixed !important; top: 90%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 360px; max-height: 75vh; overflow-y: auto; text-align: center; z-index: 999999; } /* ========================================== 3. 🚫 BUY NOW BUTTON LAYER ONLY ========================================== */ .ynlbpc-buy-now { z-index: 1000 !important; } /* ========================================== 4. 🎞 BANNER (UNCHANGED SAFE) ========================================== */ .team-logo { height: 60px; width: 60px; object-fit: contain; } .logo-group { gap: 16px; } .teamlogos-track { /* will-change: transform; — DISABLED: testing if this causes background blur */ /* transform: translateZ(0); — DISABLED: testing */ } /* ========================================== 🎞 BANNER FADE EDGES (GLOBAL) ========================================== */ .teamlogos-banner { position: relative; overflow: hidden; } .teamlogos-banner::before, .teamlogos-banner::after { content: ""; position: absolute; top: 0; width: 60px; height: 100%; z-index: 5; pointer-events: none; } .teamlogos-banner::before { left: 0; background: linear-gradient(to right, #0b0b0b 0%, transparent 100%); } .teamlogos-banner::after { right: 0; background: linear-gradient(to left, #0b0b0b 0%, transparent 100%); } /* ========================================== 🔘 BUY NOW BUTTON POLISH ========================================== */ a.ynlbpc-buy-now { transition: transform 0.2s ease, box-shadow 0.2s ease; } /* subtle floating feel */ a.ynlbpc-buy-now:hover { transform: translateX(-50%) translateY(-4px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); } /* mobile tap feel */ @media (max-width: 768px) { a.ynlbpc-buy-now { padding: 14px 28px; } } /* ========================================== 5. 🧼 CLEAN VISUAL ONLY ========================================== */ .dropdown-menu { box-shadow: 0 20px 60px rgba(0,0,0,0.35); border-radius: 12px; } /* 🔥 FIX LOGIN BUTTON CENTER (ONLY THIS) */ @media (max-width: 768px) { .navbar-nav.ms-auto { margin-left: 0 !important; /* removes push-right */ width: 100%; text-align: center; } } /* ===== Distributor Dashboard ===== */ .yn-dash { max-width: 1100px; margin: 40px auto; font-family: 'Inter', sans-serif; } /* HEADER */ .yn-dash-header h2 { font-size: 30px; margin-bottom: 5px; } .yn-sub { color: #777; margin-bottom: 25px; } /* CARD */ .yn-card { background: #fff; padding: 20px; margin-bottom: 25px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); } /* REFERRAL */ .yn-ref-row { display: flex; gap: 10px; } .yn-input { flex: 1; padding: 10px; border-radius: 6px; border: 1px solid #ddd; } /* BUTTON */ .yn-btn { background: #c6a24a; color: #111; border: none; padding: 10px 16px; border-radius: 6px; cursor: pointer; } .yn-btn:hover { background: #d7c07a; } /* TIP */ .yn-tip { font-size: 13px; color: #666; margin-top: 10px; } /* STATS */ .yn-stats { display: flex; gap: 20px; margin-bottom: 25px; } .yn-stat { flex: 1; background: #111; color: #fff; padding: 20px; border-radius: 10px; text-align: center; } .yn-stat span { font-size: 14px; color: #ccc; } .yn-stat strong { display: block; font-size: 22px; } /* TABLE */ .yn-table { width: 100%; border-collapse: collapse; } .yn-table th, .yn-table td { padding: 10px; border-bottom: 1px solid #eee; } .yn-table th { background: #f8f8f8; text-align: left; } /* ========================================== YNLBPC AI ASSISTANT ========================================== */ /* MAIN CONTAINER */ #yn-ai-assistant { position: fixed; bottom: 20px; left: 20px; z-index: 99999; width: auto; /* OR 260px if you want fixed */ font-family: Inter, sans-serif; } #yn-avatar-wrap { text-align: center; margin-bottom: 8px; position: relative; width: 120px; } /* ========================================== AVATAR IMAGE ========================================== */ #yn-ai-avatar { height: auto; display: block; margin: 0 auto 10px; cursor: pointer; border-radius: 50%; animation: ynIdle 3s ease-in-out infinite; position: fixed; top: 50%; left: 20px; width: 120px; /* 🔥 CONTROL SIZE HERE */ } /* ========================================== LOADING TEXT ========================================== */ #yn-avatar-loading { display: none; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #c6a24a; pointer-events: none; /* 🔥 prevents click blocking */ } /* IDLE ANIMATION */ @keyframes ynIdle { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } } /* TALKING STATE */ #yn-ai-avatar.talking { animation: ynTalk 0.5s infinite; } @keyframes ynTalk { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } } /* CHAT LOG */ #yn-ai-log { background: #0b0b0b; border-radius: 10px; padding: 10px; max-height: 220px; overflow-y: auto; color: #fff; } /* INPUT #yn-ai-input { width: 100%; margin-top: 8px; padding: 8px; }*/ /* BUTTONS */ .yn-ai-btn { margin: 3px; padding: 6px 10px; background: #c6a24a; border: none; color: #111; cursor: pointer; border-radius: 5px; } /* ============================================ 🔥 YNLBPC LOGIN PAGE — BASE ============================================ */ .yn-login-page { min-height: 100vh; background: #111111; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', sans-serif; } /* CENTER WRAPPER */ .yn-login-wrapper { width: 100%; max-width: 420px; text-align: center; } /* ============================================ 🔥 HEADER ============================================ */ .yn-login-logo { width: 120px; margin-bottom: 10px; } .yn-login-title { color: #ffffff; font-size: 28px; margin-bottom: 5px; } .yn-login-subtitle { color: #c6a24a; font-size: 14px; margin-bottom: 25px; } /* ============================================ 🔥 LOGIN CARD ============================================ */ .yn-login-card { background: rgba(0,0,0,0.85); border: 1px solid #c6a24a; border-radius: 16px; padding: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); } /* ============================================ 🔥 FORM INPUTS (PROFILEPRESS OVERRIDE) ============================================ */ .yn-login-card input { width: 100%; padding: 12px; margin-bottom: 12px; background: #1a1a1a; border: 1px solid #333; color: #ffffff; border-radius: 6px; } .yn-login-card input:focus { border-color: #c6a24a; outline: none; } /* ============================================ 🔥 BUTTON ============================================ */ .yn-login-card button, .yn-login-card input[type="submit"] { width: 100%; padding: 12px; background: #c6a24a; color: #111; font-weight: bold; border: none; border-radius: 6px; cursor: pointer; } .yn-login-card button:hover { background: #d4af57; } /* ============================================ 🔥 LINKS (YOUR MAIN FIX) ============================================ */ .yn-login-links { margin-top: 15px; } .yn-login-link { display: block; color: #c6a24a; margin-top: 8px; text-decoration: none; font-weight: 500; } .yn-login-link:hover { text-decoration: underline; } /* ============================================ 🔥 FOOTER ============================================ */ .yn-login-footer { margin-top: 20px; color: #777; font-size: 12px; }