/* Theme Name: Bear Bull Traders Theme URI: https://generatepress.com Description: Child theme for GeneratePress Author: Bear Bull Traders Template: generatepress Version: 5.2 Text Domain: generatepress-child */ :root { --bbt-red: #c0202a; --bbt-red-dark: #a01a22; --bbt-badge-bg: #fce8e8; --bbt-gray-900: #111827; --bbt-gray-700: #374151; --bbt-gray-500: #6b7280; --bbt-gray-400: #9ca3af; --bbt-gray-200: #e5e7eb; --bbt-gray-100: #f3f4f6; --bbt-gray-50: #f9fafb; --bbt-emerald-400: #34d399; } .pmpro_section_title { display: none; } .inside-right-sidebar { display: none; } body.bbt-wrapped { margin: 0; padding: 0; min-height: 100vh; overflow: hidden; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--bbt-gray-900); background: #fff; -webkit-font-smoothing: antialiased; } body.bbt-wrapped * { box-sizing: border-box; } .bbt-shell { display: flex; width: 100%; max-width: none; height: 100vh; overflow: hidden; background: #fff; } /* Logged-in WP admin toolbar sits above and eats into the viewport without being part of it, so a plain 100vh on .bbt-shell runs past the visible area and forces the whole window to scroll even on short pages (e.g. the order-confirmation page) — offset by the toolbar's own height (WP core adds the wp-toolbar class to whenever it's showing). */ html.wp-toolbar body.bbt-wrapped, html.wp-toolbar .bbt-shell { height: calc(100vh - 32px); } @media screen and (max-width: 782px) { html.wp-toolbar body.bbt-wrapped, html.wp-toolbar .bbt-shell { height: calc(100vh - 46px); } } /* ─── Sidebar ─────────────────────────────────────────────────────────── */ .bbt-sidebar { display: flex; flex-direction: column; width: 248px; height: 100%; flex-shrink: 0; background: #fff; border-right: 1px solid var(--bbt-gray-100); } .bbt-sidebar-logo { display: flex; align-items: center; height: 46px; padding: 0 16px; flex-shrink: 0; } .bbt-sidebar-logo img { display: block; height: 28px; width: auto; } .bbt-nav { flex: 1; overflow-y: auto; padding: 6px 0; } .bbt-nav-section-label { margin: 4px 0 2px; padding: 8px 16px 2px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--bbt-gray-400); font-weight: 600; user-select: none; } .bbt-nav-list { list-style: none; margin: 0; padding: 0; } .bbt-nav-list li { margin: 0; } .bbt-nav-link { display: flex; align-items: center; gap: 10px; padding: 5px 12px; margin: 0 6px 1px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--bbt-gray-500); text-decoration: none; transition: color 0.15s ease, background-color 0.15s ease; cursor: pointer; } .bbt-nav-link:hover, .bbt-nav-link.is-active { color: var(--bbt-gray-900); background: var(--bbt-gray-100); } .bbt-nav-icon { display: flex; align-items: center; color: var(--bbt-gray-400); flex-shrink: 0; } .bbt-nav-icon svg { width: 16px; height: 16px; } /* This icon's viewBox (IBKR arrow mark) is tall/narrow with a lot of empty space around the glyph, so at the standard 16px box it reads visually smaller/thinner than the other nav icons — bump it up to compensate. */ .bbt-nav-icon-lg svg { width: 24px; height: 24px; } .bbt-nav-link:hover .bbt-nav-icon, .bbt-nav-link.is-active .bbt-nav-icon { color: var(--bbt-red); } .bbt-nav-label { flex: 1; line-height: 1; white-space: nowrap; } /* Nav items with a hover-reveal submenu (e.g. Education Center) */ .bbt-nav-chevron { width: 12px; height: 12px; color: var(--bbt-gray-400); flex-shrink: 0; transition: transform 0.15s ease; } .bbt-has-children:hover .bbt-nav-chevron { transform: rotate(180deg); } .bbt-nav-sublist { display: none; list-style: none; margin: 2px 0 4px; padding: 0; } .bbt-has-children:hover .bbt-nav-sublist { display: block; } .bbt-nav-sublist li { margin: 0; } .bbt-nav-sublist a { display: flex; align-items: center; padding: 4px 12px 4px 38px; margin: 0 6px; border-radius: 6px; font-size: 12px; color: var(--bbt-gray-500); text-decoration: none; transition: color 0.15s ease, background-color 0.15s ease; } .bbt-nav-sublist a:hover { color: var(--bbt-gray-900); background: var(--bbt-gray-50); } .bbt-badge { margin-left: auto; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; border-radius: 4px; padding: 2px 6px; line-height: 1; background: var(--bbt-badge-bg); color: var(--bbt-red); flex-shrink: 0; } /* ─── Sidebar bottom ──────────────────────────────────────────────────── */ .bbt-sidebar-bottom { flex-shrink: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .bbt-user-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--bbt-gray-100); text-decoration: none; transition: opacity 0.15s ease; } .bbt-user-row:hover { opacity: 0.8; } .bbt-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; flex-shrink: 0; } .bbt-status-dot.is-online { background: var(--bbt-emerald-400); } .bbt-user-name { font-size: 12px; color: var(--bbt-gray-700); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bbt-signout { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--bbt-gray-500); text-decoration: none; background: none; border: 0; cursor: pointer; transition: color 0.15s ease; } .bbt-signout:hover { color: var(--bbt-gray-900); } .bbt-signout svg { width: 16px; height: 16px; fill: none; stroke: currentColor; } .bbt-auth-buttons { display: flex; flex-direction: column; gap: 8px; } .bbt-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 8px 16px; border-radius: 4px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.15s ease; } .bbt-btn-primary { background: #991b1e; color: #fff !important; padding: 10px 20px; border-radius: 50px; } .bbt-btn-primary:hover { background: var(--bbt-red-dark); } .bbt-btn-secondary { background: #fff; color: var(--bbt-gray-900); border: 1px solid var(--bbt-gray-200); } .bbt-btn-secondary:hover { border-color: #9ca3af; } .bbt-social-label { margin: 0 0 8px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--bbt-gray-400); font-weight: 600; user-select: none; } .bbt-social-icons { display: flex; align-items: center; gap: 12px; } .bbt-social-icons a { color: var(--bbt-gray-400); transition: color 0.15s ease; } .bbt-social-icons a:hover { color: var(--bbt-gray-900); } .bbt-social-icons svg { width: 16px; height: 16px; } /* ─── Main content ────────────────────────────────────────────────────── */ .bbt-main { flex: 1; overflow-y: auto; padding: 20px; min-width: 0; } /* Loosen up common WP content elements so they read like the rest of the app rather than a raw, unstyled WordPress page. */ .bbt-breadcrumb { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px !important; font-weight: 600 !important; line-height: 1.4 !important; color: var(--bbt-gray-400) !important; margin: 0 !important; padding: 16px 20px 14px !important; border-bottom: 1px solid var(--bbt-gray-100); } .bbt-breadcrumb a { color: var(--bbt-gray-400) !important; text-decoration: none !important; font-weight: 600 !important; } .bbt-breadcrumb a:hover { color: var(--bbt-red) !important; text-decoration: none !important; } .bbt-breadcrumb-sep { color: var(--bbt-gray-200) !important; margin: 0 2px; } .bbt-breadcrumb-current { color: var(--bbt-gray-700) !important; font-weight: 700 !important; } .bbt-main h1 { font-size: 18px; font-weight: 600; color: var(--bbt-gray-900); text-transform: uppercase; letter-spacing: 0.02em; margin: 20px; } .bbt-main h2 { font-size: 15px; font-weight: 700; color: var(--bbt-gray-900); margin: 0 0 12px; } .bbt-main p { color: var(--bbt-gray-700); line-height: 1.6; } .bbt-main a { color: var(--bbt-red); } .bbt-main a:hover { color: var(--bbt-red-dark); } .bbt-main table { width: 100%; border-collapse: collapse; } .bbt-main table th, .bbt-main table td { padding: 10px 12px; border-bottom: 1px solid var(--bbt-gray-100); text-align: left; font-size: 14px; } /* Card containers — PMPro (and similar plugins) wrap sections in these. Different PMPro page templates nest the visible box at different depths (pmpro_card containing pmpro_card_content on some pages, plain pmpro_section containing pmpro_section_content on others like Billing), so both get the same card treatment; the outer wrappers stay bare. */ .bbt-main .pmpro_card, .bbt-main .pmpro_section { background: transparent; border: 0; padding: 0; margin: 0; box-shadow: none; width: 100%; } .bbt-main .pmpro_card_content, .bbt-main .pmpro_section_content { background: #fff; border: 1px solid var(--bbt-gray-200); border-radius: 8px; padding: 24px; } .bbt-main .pmpro_section_content { border: 0 !important; padding: 0 !important; } .bbt-main .pmpro_card_content { border-radius: 0 0 8px 8px !important; border-top: 0 !important; } .bbt-main .pmpro_spacer { height: 24px; } .bbt-main .pmpro_card_title { background: #fff; border: 1px solid var(--bbt-gray-200); border-bottom: 0; border-radius: 8px 8px 0 0 !important; padding: 20px 24px 12px !important; margin: 0 !important; } /* Vertical rhythm between stacked form rows (Current Password, New Password/Confirm row, hint text, buttons, etc.) — PMPro wraps each row in its own paragraph, so this adds breathing room between rows without affecting the New Password / Confirm New Password columns that sit side by side inside a single row. */ .bbt-main .pmpro_card_content p, .bbt-main .pmpro_section_content p { margin: 0 0 20px !important; } .bbt-main .pmpro_card_content p:last-child, .bbt-main .pmpro_section_content p:last-child { margin-bottom: 0 !important; } /* Action link rows (Cancel / Upgrade / Renew / View Your Membership Account) — clean links instead of underlined default anchors. */ .bbt-main .pmpro_card_content a, .bbt-main .pmpro_section_content a { text-decoration: none; font-weight: 600; } .bbt-main .pmpro_card_content a:hover, .bbt-main .pmpro_section_content a:hover { text-decoration: underline; } span.pmpro_actions_nav-right { margin-top: 20px; } .pmpro_actions_nav { width: 100%; } p.mt-bbt-1 { margin-top: 1rem; } .bbt-secondary-card-container { max-width: 50vw !important; } /* Fieldsets / section headings */ .bbt-main fieldset { border: 0; padding: 0; margin: 0 0 24px; } .bbt-main fieldset legend, .bbt-main .pmpro_form_fieldset-legend { font-size: 15px; font-weight: 700; color: var(--bbt-gray-900); padding: 0; margin: 0 0 16px; } /* Labels + helper text */ .bbt-main label { display: block; font-size: 13px; font-weight: 600; color: var(--bbt-gray-700); margin-bottom: 6px; } .bbt-main .description, .bbt-main small { display: block; font-size: 12px; color: var(--bbt-gray-400); margin-top: 6px; font-weight: 400; } /* Text inputs, selects, textareas */ .bbt-main input[type="text"], .bbt-main input[type="email"], .bbt-main input[type="password"], .bbt-main input[type="number"], .bbt-main input[type="tel"], .bbt-main input[type="url"], .bbt-main input[type="search"], .bbt-main input[type="date"], .bbt-main select, .bbt-main textarea { width: 100%; font-family: inherit; font-size: 14px; color: var(--bbt-gray-900); background: #fff; border: 1px solid var(--bbt-gray-200); border-radius: 6px; padding: 10px 12px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .bbt-main input[type="text"]:focus, .bbt-main input[type="email"]:focus, .bbt-main input[type="password"]:focus, .bbt-main input[type="number"]:focus, .bbt-main input[type="tel"]:focus, .bbt-main input[type="url"]:focus, .bbt-main input[type="search"]:focus, .bbt-main input[type="date"]:focus, .bbt-main select:focus, .bbt-main textarea:focus { outline: none; border-color: var(--bbt-red); box-shadow: 0 0 0 3px rgba(192, 32, 42, 0.12); } /* Checkboxes / radios */ .bbt-main input[type="checkbox"], .bbt-main input[type="radio"] { accent-color: var(--bbt-red); width: 16px; height: 16px; margin-right: 8px; vertical-align: middle; } /* Buttons — default to secondary/outline (safe for Cancel/reset/typeless buttons), submit specifically overridden to primary red below. */ .bbt-main button, .bbt-main input[type="submit"], .bbt-main input[type="button"], .bbt-main input[type="reset"], .bbt-main .pmpro_btn, .bbt-main a.button { display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-size: 13px; font-weight: 600; border-radius: 6px; padding: 10px 20px; cursor: pointer; border: 1px solid var(--bbt-gray-200); background: #fff; color: var(--bbt-gray-900); text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease; } .bbt-main button:hover, .bbt-main input[type="button"]:hover, .bbt-main input[type="reset"]:hover, .bbt-main a.button:hover { border-color: #9ca3af; } .bbt-main button[type="submit"], .bbt-main input[type="submit"], .bbt-main .pmpro_btn-submit { background: var(--bbt-red); color: #fff; } .bbt-main button[type="submit"]:hover, .bbt-main input[type="submit"]:hover, .bbt-main .pmpro_btn-submit:hover { background: var(--bbt-red-dark); } .bbt-main .pmpro_btn-cancel, .bbt-main .pmpro_btn-secondary { background: #fff; color: var(--bbt-gray-900); border-color: var(--bbt-gray-200); } .bbt-main .pmpro_btn-cancel:hover, .bbt-main .pmpro_btn-secondary:hover { border-color: #9ca3af; } /* ─── Membership Account page ─────────────────────────────────────────── */ /* Profile + Membership cards sit side by side; Orders stays full width below both, since a date/level/total/status table reads badly squeezed into a half-width column. */ .bbt-main .pmpro { display: flex; flex-wrap: wrap; gap: 20px; } .bbt-main .pmpro #pmpro_account-profile, .bbt-main .pmpro #pmpro_account-membership { flex: 1 1 0 !important; min-width: 280px !important; max-width: none !important; width: auto !important; display: flex !important; } .bbt-main .pmpro #pmpro_account-orders { flex: 1 1 100% !important; max-width: none !important; width: auto !important; } /* The section stretches to match its sibling's height (flex default), but the bordered box itself is a child that only wraps its own content — so the border needs its own full-height stretch too. flex:1 (not just width:100%) since the section is itself a flex container now. !important because PMPro's own stylesheet appears to set a fixed/shrink width on these with higher specificity or later cascade order. */ .bbt-main #pmpro_account-profile .pmpro_section_content, .bbt-main #pmpro_account-membership .pmpro_section_content { flex: 1 1 auto !important; width: auto !important; max-width: none !important; display: flex !important; flex-direction: column; } /* .pmpro_card itself needs to stretch to fill that section_content, and .pmpro_card_content needs to grow inside .pmpro_card — that's what pushes .pmpro_card_actions (the gray button strip) down to the same bottom edge on both cards regardless of how much text each one has. */ .bbt-main #pmpro_account-profile .pmpro_card, .bbt-main #pmpro_account-membership .pmpro_card { display: flex !important; flex-direction: column; flex: 1 1 auto !important; width: auto !important; max-width: none !important; } .bbt-main #pmpro_account-profile .pmpro_card_content, .bbt-main #pmpro_account-membership .pmpro_card_content { flex: 1 1 auto !important; width: auto !important; max-width: none !important; display: block !important; } /* Hide the default WordPress/Gravatar placeholder avatar on the profile card. */ .bbt-main #pmpro_account-profile img.avatar { display: none; } /* Action link rows (Edit Profile / Change Password / Log Out / Upgrade / Cancel) as button pills instead of plain underlined red links. */ .bbt-main .pmpro_card_actions a, .bbt-main .pmpro_actions_nav a { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--bbt-gray-200); background: #fff; color: var(--bbt-gray-700); text-decoration: none; margin: 2px 4px 2px 0; transition: border-color 0.15s ease, color 0.15s ease; } .bbt-main .pmpro_card_actions a:hover, .bbt-main .pmpro_actions_nav a:hover { border-color: #9ca3af; color: var(--bbt-gray-900); text-decoration: none; } /* "Upgrade" is the primary action on the Membership card — make it the brand red button, distinct from the neutral Cancel/Edit Profile/Log Out pills above. */ .bbt-main .pmpro_card_actions #pmpro_actionlink-change, .bbt-main .pmpro_actions_nav #pmpro_actionlink-change, .bbt-main .pmpro_actionlink-change { background: var(--bbt-red); color: #fff; border-color: var(--bbt-red); } .bbt-main .pmpro_card_actions #pmpro_actionlink-change:hover, .bbt-main .pmpro_actions_nav #pmpro_actionlink-change:hover, .bbt-main .pmpro_actionlink-change:hover { background: var(--bbt-red-dark); border-color: var(--bbt-red-dark); color: #fff; } /* PMPro's own "Expires" / "Username & Email" list carries its own border + background by default, which nests a second frame inside our card frame. Flatten it so each card only has the one outer border. */ .bbt-main .pmpro_list, .bbt-main .pmpro_list_item { border: 0; background: none; box-shadow: none; } .bbt-main .pmpro_list { padding: 0; margin: 0 0 16px; } .bbt-main .pmpro_list_item { padding: 4px 0; } /* ─── Right aside ─────────────────────────────────────────────────────── */ .bbt-aside { width: 400px !important; min-width: 340px; flex-shrink: 0; overflow-y: auto; padding: 12px; } .bbt-aside-img { display: block; width: 100%; height: auto; border-radius: 8px; } .bbt-aside-leaderboard { display: block; width: 100%; border: 0; border-radius: 8px; } .leaderboard-page { background: transparent !important; } .bbt-aside-eyebrow { margin: 0 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bbt-red); } .bbt-aside-title { margin: 0 0 12px; font-size: 16px; font-weight: 800; color: var(--bbt-gray-900); } /* ─── Dashboard content (template-bbt-dashboard.php, page 1102) ───────── Rendered inside the theme's normal header/footer (not .bbt-main), so these are unscoped and self-contained — matches the same card language as the rest of the dashboard (white card, 1px gray-200 border, 8px radius) without depending on the .bbt-shell wrapper being present. */ .bbt-dashboard-content-inner-container { font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .bbt-dashboard-content-inner-row { display: flex; flex-wrap: wrap; gap: 20px; margin: 0 0 32px; } .bbt-dash-content-col { flex: 1 1 220px; min-width: 220px; } .bbt-dash-content-col a { display: block; height: 100%; text-decoration: none; } .bbt-dash-content-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--bbt-gray-200); border-radius: 8px; padding: 16px; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .bbt-dash-content-card:hover { border-color: var(--bbt-gray-400); box-shadow: 0 4px 12px rgba(17, 24, 39, 0.06); } section.bbt-dash-videos .bbt-dash-content-card { border: 0; } .bbt-dash-content-card img { max-width: 100%; height: auto; border-radius: 6px; } .hd-aspect { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .grow-sm, .grow-xs, .grow-xsm { transition: transform 0.2s ease; } .grow-sm:hover, .grow-xs:hover { transform: scale(1.02); } .grow-xsm:hover { transform: scale(1.08); } .bbt-dash-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--bbt-gray-900); margin: 0 0 14px; line-height: 1.3; } .bbt-dash-title.mt-2 { margin-top: 8px; } .bbt-dash-title a { color: inherit; text-decoration: none; } .bbt-dash-title a:hover { color: var(--bbt-red); } .bbt-dash-content-card .bbt-dash-title { margin-bottom: 10px; font-size: 13px; } .bbt-dash-content-card-top { margin-bottom: 12px; } .bbt-dash-webinar-date { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bbt-gray-400); margin: 0 0 4px; } .bbt-dash-webinar-title { font-size: 14px; font-weight: 600; color: var(--bbt-gray-900); line-height: 1.35; margin: 0; } .bbt-dash-webinar-presenter-wrapper { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; } .presenter-headshots { display: flex; align-items: center; flex-shrink: 0; } .presenter-headshots img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--bbt-gray-200); } .second-presenter-headshot { margin-left: -10px; } .bbt-dash-webinar-presenter-name { font-size: 12px; font-weight: 600; color: var(--bbt-gray-700); margin: 0; } /* ─── Downloads table (template-bbt-downloads.php) ───────────────────── */ .bbt-downloads-wrap { overflow-x: auto; border: 1px solid var(--bbt-gray-200); border-radius: 8px; } .bbt-downloads { width: 100%; border-collapse: collapse; font-size: 14px; } .bbt-downloads thead th { padding: 12px 16px; background: var(--bbt-gray-50); border-bottom: 1px solid var(--bbt-gray-200); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bbt-gray-500); text-align: left; } .bbt-downloads tbody td { padding: 12px 16px; border-bottom: 1px solid var(--bbt-gray-100); color: var(--bbt-gray-900); vertical-align: middle; } .bbt-downloads tbody tr:last-child td { border-bottom: 0; } .bbt-downloads tbody tr:hover { background: var(--bbt-gray-50); } .bbt-downloads td.d-flex { display: flex; align-items: center; gap: 10px; } .bbt-downloads .center-td { text-align: center; } .bbt-downloads .file-icon { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; } .bbt-downloads a { color: var(--bbt-gray-900); font-weight: 600; text-decoration: none; } .bbt-downloads a:hover { color: var(--bbt-red); text-decoration: underline; } .download-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: var(--bbt-gray-100); transition: background-color 0.15s ease; } .download-icon-btn:hover { background: var(--bbt-badge-bg); } .download-icon { width: 16px; height: 16px; } /* ─── Onboarding Room (template-bbt-onboarding.php) ──────────────────── */ .bbt-onboarding-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; } .bbt-onboarding-enter-card, .bbt-onboarding-disclaimer-card { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; border-radius: 8px; padding: 20px; } .bbt-onboarding-enter-card { background: linear-gradient(135deg, #111827, #1f2937); } .bbt-onboarding-disclaimer-card { background: linear-gradient(135deg, #1a0305, #2d0508); } .bbt-onboarding-eyebrow { margin: 0 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.5) !important; } .bbt-onboarding-heading { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25; color: #fff !important; } .bbt-onboarding-enter-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: flex-start; padding: 12px 20px; border-radius: 6px; background: var(--bbt-red) !important; color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none !important; transition: background-color 0.15s ease; } .bbt-onboarding-enter-btn:hover { background: var(--bbt-red-dark) !important; color: #fff !important; } .bbt-onboarding-enter-btn svg { width: 16px; height: 16px; } .bbt-onboarding-enter-card-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .bbt-onboarding-countdown { display: flex; align-items: flex-end; gap: 4px; flex-shrink: 0; } .bbt-onboarding-countdown-part { text-align: center; } .bbt-onboarding-countdown-value { font-size: 28px; font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; } .bbt-onboarding-countdown-label { margin-top: 2px; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6); } .bbt-onboarding-countdown-sep { padding-bottom: 12px; font-size: 22px; font-weight: 800; color: rgba(255, 255, 255, 0.4); } .bbt-onboarding-disclaimer-card p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.7) !important; } .bbt-onboarding-disclaimer-card a { color: #e05060 !important; font-weight: 600; text-decoration: none !important; } .bbt-onboarding-disclaimer-card a:hover { text-decoration: underline !important; } .bbt-onboarding-browser-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.4) !important; } .bbt-onboarding-browser-note svg { width: 16px; height: 16px; flex-shrink: 0; } .bbt-onboarding-sessions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } .bbt-onboarding-session-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--bbt-gray-100); border-radius: 8px; background: linear-gradient(135deg, #fff, var(--bbt-gray-50)); } .bbt-onboarding-session-card h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--bbt-gray-900); } .bbt-onboarding-session-access { margin: 2px 0 0; font-size: 12px; color: var(--bbt-gray-400); } .bbt-onboarding-session-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .bbt-onboarding-session-presenter { display: flex; align-items: center; gap: 10px; } .bbt-onboarding-session-presenter img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .bbt-onboarding-session-presenter span { font-size: 13px; font-weight: 700; color: var(--bbt-gray-700); } .bbt-onboarding-session-schedule { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--bbt-gray-500); white-space: nowrap; } .bbt-onboarding-session-schedule svg { width: 15px; height: 15px; color: var(--bbt-gray-400); flex-shrink: 0; } .bbt-onboarding-session-subtitle { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--bbt-gray-900); } .bbt-onboarding-session-desc { margin: 0; font-size: 13px; line-height: 1.6; color: var(--bbt-gray-500); } .bbt-onboarding-notes-card { padding: 20px; border: 1px solid var(--bbt-gray-100); border-radius: 8px; background: linear-gradient(135deg, #fff, var(--bbt-gray-50)); } .bbt-onboarding-notes-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--bbt-gray-700); } .bbt-onboarding-notes-heading svg { width: 16px; height: 16px; color: var(--bbt-gray-400); } .bbt-onboarding-notes-card ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--bbt-gray-700); } .bbt-onboarding-notes-card a { color: var(--bbt-red); } .bbt-onboarding-notes-card a:hover { text-decoration: underline; } @media (max-width: 768px) { .bbt-onboarding-hero, .bbt-onboarding-sessions { grid-template-columns: 1fr; } } /* ─── Chatroom (template-bbt-chatroom.php) ────────────────────────────── */ .bbt-chatroom-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; } .bbt-chatroom-enter-card, .bbt-chatroom-disclaimer-card { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; border-radius: 8px; padding: 20px; } .bbt-chatroom-enter-card { background: linear-gradient(135deg, #111827, #1f2937); } .bbt-chatroom-disclaimer-card { background: linear-gradient(135deg, #1a0305, #2d0508); } .bbt-chatroom-eyebrow { margin: 0 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.5) !important; } .bbt-chatroom-heading { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25; color: #fff !important; } .bbt-chatroom-enter-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: flex-start; padding: 12px 20px; border-radius: 6px; background: var(--bbt-red) !important; color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none !important; transition: background-color 0.15s ease; } .bbt-chatroom-enter-btn:hover { background: var(--bbt-red-dark) !important; color: #fff !important; } .bbt-chatroom-enter-btn svg { width: 16px; height: 16px; } .bbt-chatroom-join-prompt { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .bbt-chatroom-join-note { margin: 0; font-size: 11px; color: rgba(255, 255, 255, 0.4) !important; } .bbt-chatroom-disclaimer-card p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.7) !important; } .bbt-chatroom-disclaimer-card a { color: #e05060 !important; font-weight: 600; text-decoration: none !important; } .bbt-chatroom-disclaimer-card a:hover { text-decoration: underline !important; } .bbt-chatroom-browser-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.4) !important; } .bbt-chatroom-browser-note svg { width: 16px; height: 16px; flex-shrink: 0; } .bbt-chatroom-schedule { border: 1px solid var(--bbt-gray-100); border-radius: 8px; overflow: hidden; margin-bottom: 16px; } .bbt-chatroom-schedule-header { padding: 12px 16px; border-bottom: 1px solid var(--bbt-gray-100); font-size: 14px; font-weight: 700; color: var(--bbt-gray-700); } .bbt-chatroom-schedule-row { display: grid; grid-template-columns: 56px 1fr 150px auto; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--bbt-gray-50); } .bbt-chatroom-schedule-row:last-child { border-bottom: 0; } .bbt-chatroom-schedule-row:not(.bbt-chatroom-schedule-row-head):hover { background: var(--bbt-gray-50); } .bbt-chatroom-schedule-row-head { background: var(--bbt-gray-50); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bbt-gray-400); } .bbt-chatroom-schedule-days-head { text-align: right; } .bbt-chatroom-schedule-avatars { display: flex; align-items: center; } .bbt-chatroom-schedule-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--bbt-gray-200); margin-left: -10px; } .bbt-chatroom-schedule-avatar:first-child { margin-left: 0; } .bbt-chatroom-schedule-name { margin: 0; font-size: 14px; font-weight: 700; color: var(--bbt-gray-900); } .bbt-chatroom-schedule-presenters { margin: 2px 0 0; font-size: 12px; color: var(--bbt-gray-400); } .bbt-chatroom-schedule-time { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--bbt-gray-500); white-space: nowrap; } .bbt-chatroom-schedule-time svg { width: 15px; height: 15px; color: var(--bbt-gray-400); flex-shrink: 0; } .bbt-chatroom-schedule-days { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; } .bbt-chatroom-day-pill { padding: 2px 8px; border-radius: 4px; background: #eff6ff; color: #1d4ed8; font-size: 11px; font-weight: 700; } @media (max-width: 768px) { .bbt-chatroom-hero { grid-template-columns: 1fr; } .bbt-chatroom-schedule-row { grid-template-columns: 44px 1fr auto; } .bbt-chatroom-schedule-time { display: none; } } /* ─── Webinar Room (template-bbt-webinarroom.php) ─────────────────────── */ .bbt-webinar-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; } .bbt-webinar-enter-card, .bbt-webinar-disclaimer-card { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; border-radius: 8px; padding: 20px; } .bbt-webinar-enter-card { background: linear-gradient(135deg, #111827, #1f2937); } .bbt-webinar-disclaimer-card { background: linear-gradient(135deg, #1a0305, #2d0508); } .bbt-webinar-eyebrow { margin: 0 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.5) !important; } .bbt-webinar-heading { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25; color: #fff !important; } .bbt-webinar-enter-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: flex-start; padding: 12px 20px; border-radius: 6px; background: var(--bbt-red) !important; color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none !important; transition: background-color 0.15s ease; } .bbt-webinar-enter-btn:hover { background: var(--bbt-red-dark) !important; color: #fff !important; } .bbt-webinar-enter-btn svg { width: 16px; height: 16px; } .bbt-webinar-join-prompt { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .bbt-webinar-join-note { margin: 0; font-size: 11px; color: rgba(255, 255, 255, 0.4) !important; } .bbt-webinar-disclaimer-card p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.7) !important; } .bbt-webinar-disclaimer-card a { color: #e05060 !important; font-weight: 600; text-decoration: none !important; } .bbt-webinar-disclaimer-card a:hover { text-decoration: underline !important; } .bbt-webinar-browser-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.4) !important; } .bbt-webinar-browser-note svg { width: 16px; height: 16px; flex-shrink: 0; } .bbt-webinar-schedule { border: 1px solid var(--bbt-gray-100); border-radius: 8px; overflow: hidden; margin-bottom: 16px; } .bbt-webinar-schedule-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--bbt-gray-100); } .bbt-webinar-schedule-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--bbt-gray-700); } .bbt-webinar-schedule-sub { margin: 2px 0 0; font-size: 12px; color: var(--bbt-gray-400); } .bbt-webinar-week-nav { display: flex; align-items: center; gap: 4px; } .bbt-webinar-week-nav button { display: flex !important; align-items: center; justify-content: center; width: 28px !important; height: 28px !important; padding: 0 !important; border: 0 !important; border-radius: 6px; background: none !important; color: var(--bbt-gray-500) !important; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .bbt-webinar-week-nav button:hover:not(:disabled) { background: var(--bbt-gray-100) !important; color: var(--bbt-gray-900) !important; } .bbt-webinar-week-nav button:disabled { opacity: 0.3; cursor: not-allowed; } .bbt-webinar-week-nav svg { width: 16px; height: 16px; } .bbt-webinar-weeks { overflow-x: auto; } .bbt-webinar-week { display: none; min-width: 640px; } .bbt-webinar-week.is-active { display: block; } .bbt-webinar-week-header, .bbt-webinar-time-row { display: grid; grid-template-columns: 56px repeat(5, 1fr); } .bbt-webinar-week-header { background: linear-gradient(135deg, #fff, var(--bbt-gray-50)); border-bottom: 1px solid var(--bbt-gray-100); } .bbt-webinar-day-header { padding: 10px 4px; text-align: center; border-left: 1px solid var(--bbt-gray-100); } .bbt-webinar-day-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bbt-gray-400); } .bbt-webinar-day-date { display: block; margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--bbt-gray-700); } .bbt-webinar-day-header.is-today .bbt-webinar-day-date { color: var(--bbt-red); } .bbt-webinar-time-row { border-bottom: 1px solid var(--bbt-gray-50); min-height: 36px; } .bbt-webinar-time-label { padding: 6px 8px 0; font-size: 11px; font-weight: 500; color: var(--bbt-gray-400); } .bbt-webinar-cell { padding: 6px; border-left: 1px solid var(--bbt-gray-100); } .bbt-webinar-slot { padding: 4px 6px; margin-bottom: 4px; border-radius: 6px; background: var(--bbt-gray-50); } .bbt-webinar-slot:last-child { margin-bottom: 0; } .bbt-webinar-slot-title { margin: 0; font-size: 12px; font-style: italic; line-height: 1.35; color: var(--bbt-gray-700); } .bbt-webinar-slot-presenter { margin: 2px 0 0; font-size: 11px; font-weight: 700; color: var(--bbt-gray-900); } @media (max-width: 768px) { .bbt-webinar-hero { grid-template-columns: 1fr; } } /* ─── Simulator (template-bbt-simulator.php) ──────────────────────────── */ .bbt-sim-top { display: grid; grid-template-columns: 2fr 3fr; gap: 20px; align-items: start; margin: 16px 0; } .bbt-sim-intro h2 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--bbt-gray-900); } .bbt-sim-intro p { margin: 8px 0 16px; font-size: 14px; line-height: 1.6; color: var(--bbt-gray-700); } .bbt-sim-intro strong { color: var(--bbt-gray-900); } .bbt-sim-video { position: relative; width: 100%; padding-top: 56.25%; border-radius: 8px; overflow: hidden; background: var(--bbt-gray-900); } .bbt-sim-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .bbt-sim-compare { border: 1px solid var(--bbt-gray-100); border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #fff, var(--bbt-gray-50)); } .bbt-sim-compare-header, .bbt-sim-compare-row, .bbt-sim-compare-cta { display: grid; grid-template-columns: 2fr 1fr 1fr; } .bbt-sim-compare-header { border-bottom: 1px solid var(--bbt-gray-100); } .bbt-sim-compare-header-cell { padding: 20px 16px; text-align: center; border-left: 1px solid var(--bbt-gray-100); } .bbt-sim-compare-header-note { border-left: 0; text-align: left; display: flex; align-items: flex-end; } .bbt-sim-compare-header-note p { margin: 0; font-size: 13px; font-style: italic; color: var(--bbt-gray-500); } .bbt-sim-compare-logo { max-width: 140px; max-height: 28px; margin-bottom: 4px; } .bbt-sim-compare-sub { margin: 6px 0 0; font-size: 10px; color: var(--bbt-gray-400); line-height: 1.4; } .bbt-sim-compare-price { margin: 8px 0 0; font-size: 22px; font-weight: 800; color: var(--bbt-gray-900); } .bbt-sim-compare-rows { position: relative; } .bbt-sim-compare-or { position: absolute; top: 50%; left: 66.666%; transform: translate(-50%, -50%); z-index: 1; width: 32px; height: 32px; border-radius: 50%; background: var(--bbt-gray-900); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(17, 24, 39, 0.25); } .bbt-sim-compare-row { align-items: center; border-bottom: 1px solid var(--bbt-gray-100); } .bbt-sim-compare-row:last-child { border-bottom: 0; } .bbt-sim-compare-row:nth-child(odd) { background: rgba(249, 250, 251, 0.6); } .bbt-sim-compare-row-label { padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--bbt-gray-700); } .bbt-sim-compare-row-cell { padding: 10px 0; border-left: 1px solid var(--bbt-gray-100); display: flex; justify-content: center; } .bbt-sim-check { width: 18px; height: 18px; color: var(--bbt-emerald-400); } .bbt-sim-dash { color: var(--bbt-gray-200); font-weight: 700; } .bbt-sim-compare-cta { border-top: 1px solid var(--bbt-gray-100); background: #fff; } .bbt-sim-compare-cta-cell { padding: 14px 12px; border-left: 1px solid var(--bbt-gray-100); display: flex; justify-content: center; } .bbt-sim-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 6px; background: var(--bbt-red) !important; color: #fff !important; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease; } .bbt-sim-btn:hover { background: var(--bbt-red-dark) !important; color: #fff !important; } .bbt-sim-btn-secondary { background: #fff !important; color: var(--bbt-gray-900) !important; border: 1px solid var(--bbt-gray-200); } .bbt-sim-btn-secondary:hover { background: var(--bbt-gray-50) !important; border-color: #9ca3af; } .bbt-sim-timeline { border: 1px solid var(--bbt-gray-100); border-radius: 8px; padding: 24px; background: linear-gradient(135deg, #fff, var(--bbt-gray-50)); } .bbt-sim-timeline h2 { margin: 0 0 20px; font-size: 15px; font-weight: 700; color: var(--bbt-gray-900); } .bbt-sim-timeline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .bbt-sim-phase-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; margin-bottom: 10px; } .bbt-sim-phase-title-row { display: flex; align-items: center; gap: 8px; } .bbt-sim-phase-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--bbt-red); flex-shrink: 0; } .bbt-sim-phase-period { margin: 0; font-size: 13px; font-weight: 700; color: var(--bbt-gray-900); } .bbt-sim-phase-label { margin: 4px 0 0 20px; font-size: 11px; font-style: italic; color: var(--bbt-gray-400); } .bbt-sim-phase-list { list-style: none; margin: 10px 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .bbt-sim-phase-list li { display: flex; align-items: flex-start; gap: 6px; } .bbt-sim-phase-list svg { width: 12px; height: 12px; margin-top: 3px; color: var(--bbt-gray-200); flex-shrink: 0; } .bbt-sim-phase-list span { font-size: 13px; line-height: 1.5; color: var(--bbt-gray-500); } .bbt-sim-phase-list a { font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--bbt-red); text-decoration: none; } .bbt-sim-phase-list a:hover { text-decoration: underline; } @media (max-width: 1024px) { .bbt-sim-timeline-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .bbt-sim-top { grid-template-columns: 1fr; } .bbt-sim-timeline-grid { grid-template-columns: 1fr; } } /* -------------------------------------------- LESSON PAGE */ li.bbt-lesson-download-item a { display: flex; align-items: center; justify-content: space-between; width: 100%; color: #303036; font-size: 15px; font-weight: 500; } li.bbt-lesson-download-item:hover { background: #f7f7f7; } li.bbt-lesson-download-item { display: flex; border-bottom: 1px solid #eaeaea; padding: 5px 5px 5px 5px; } .video-card { position: relative; width: 100%; padding-top: 56.25%; /* Maintains 16:9 aspect ratio */ overflow: hidden; } .video-card iframe, .video-card embed, .video-card object, .video-card video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .bbt-lesson-container { padding: 1rem 1rem 0 0; } .bbt-lesson-past-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; } .setup-button { margin-top: 20px; font-size: 15px; display: flex; align-items: center; gap: 4px; color: black !important; } .setup-button:hover { color: black !important; } h3.bbt-lesson-webinar-subtitle { margin-bottom: 10px !important; font-size: 18px; font-weight: 600; } .bbt-topic-pagination { display: flex; gap: 8px; margin-top: 15px; flex-wrap: wrap; } .bbt-topic-pagination a, .bbt-topic-pagination span { display: inline-block; padding: 6px 12px; border-radius: 4px; text-decoration: none; font-weight: 500; border: 1px solid #ccc; background-color: #f9f9f9; color: #333; transition: background 0.2s, color 0.2s, border-color 0.2s; } .bbt-topic-pagination a:hover { background-color: #991e20; color: #fff; border-color: #991e20; } .bbt-topic-pagination span.current { background-color: #991e20; color: #fff; border-color: #991e20; font-weight: 600; } .bbt-lesson-webinar-link p { color: #303036; cursor: pointer; } .bbt-lesson-webinar-link { border-bottom: 1px solid #eaeaea !important; padding: 5px 5px 5px 0 !important; gap: 10px; } p.bbt-lesson-lesson-description { margin-bottom: 20px; } .bbt-lesson-col { display: flex; flex-direction: column; gap: 10px; } .bbt-lesson-buttons-row { display: flex; gap: 20px; flex-wrap: wrap; } .bbt-lesson-course-title { font-size: 20px; margin-bottom: 10px !important; } /* Renamed from .bbt-btn-primary (the original ported name) — that name collides with bbt-sidebar-left.php's real, live .bbt-btn-primary "Sign In" button (same selector, same specificity), and being defined later here was silently overriding that button's layout. */ .bbt-lesson-btn-primary { display: flex; justify-content: center !important; align-items: center; font-size: 15px; width: fit-content; gap: 10px; background: #991e20; color: white !important; padding: 10px 20px; border-radius: 50px; } .bbt-lesson-btn-primary:hover { color: white; } .me-2 { margin-right: 10px; } .bbt-lesson-row { background: white; padding: 2rem; border-radius: 20px; } h1.bbt-lesson-post-title { font-size: 35px; } .bbt-lesson-inner-container { display: grid; grid-template-columns: repeat( 3, calc((100% - 40px) / 3) ); /* 3 columns, accounting for gaps */ gap: 10px; display: grid; } .bbt-lesson-col-full { margin-bottom: 20px; } .bbt-lesson-inner-container iframe { border-radius: 20px; } img.bbt-lesson-presenter-photo { width: 50px; border-radius: 50px; } .bbt-lesson-card { border: 1px solid #eaeaea; border-radius: 20px; padding: 1rem 2rem 2rem 2rem; height: 100%; } .bbt-lesson-card ul.bbt-lesson-downloads-row { margin-left: 0; } .bbt-lesson-card-row { display: grid; grid-template-columns: 50px auto; gap: 20px; } /* Matches the redesigned Education Center course-card titles (EDUCATION CENTER section below — 15px/600/gray-900, red on hover). */ .bbt-lesson-card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--bbt-gray-900); line-height: 1.3; } .bbt-lesson-card h3 a { color: inherit; text-decoration: none; } .bbt-lesson-card h3 a:hover { color: var(--bbt-red); } .bbt-lesson-card p { text-align: left !important; font-size: 15px !important; } p.bbt-presenter-name { font-size: 22px !important; font-weight: 600; } p.muted-text { padding-bottom: 0; font-size: 15px; color: grey; } .bbt-lesson-card-details-row { display: flex; justify-content: flex-start; gap: 40px; align-items: center; margin-bottom: 20px; } img.payment-security-badges-bbt { position: absolute; right: 12px; width: 172px; bottom: 80px; } @media (max-width: 500px) { img.payment-security-badges-bbt { position: relative; right: unset; border: unset; bottom: unset; margin-top: 20px; margin-bottom: -20px; } .bbt-free-member-title h2 { font-size: 1.5rem !important; margin-bottom: 1.5rem !important; } .pmpro_form_field-radio-items { gap: 0 !important; flex-direction: column !important; } .vc_custom_1593453039260 { padding-top: 0 !important; } button#other_discount_code_toggle { text-align: left; margin-top: 10px !important; } .pmpro_card_title.pmpro_font-large { margin-left: 11px; padding-left: 0 !important; } tr.woocommerce-cart-form__cart-item.cart_item { display: flex; flex-direction: column; } .product-subtotal { display: none; } .woocommerce-message { margin-top: 0; } } .pmpro_form_submit { margin-top: 20px !important; } input#pmpro_btn-submit { font-family: inherit !important; } /* video on free member */ .bbt-free-member-video-container { margin-top: -50px; margin-bottom: -50px; } .bbt-free-member-title h2 { font-size: 2rem; } .player .vp-video-wrapper .vp-preview { border-radius: 20px; } .bbt-new-checkout form#pmpro_form { margin: 0 auto !important; border: none !important; border-radius: 10px !important; padding: 0 !important; } /* hide course thumb*/ article#post-2592884 { display: none; } .mt-2 { margin-top: 20px !important; } .woocommerce form.check-login .form-row { width: 95% !important; } .q_logo a { visibility: visible; } label.woocommerce-form__label.woocommerce-form__label-for-checkbox.inline.woo-my-account-rememberme input.button { border: 1px solid black !important; } .hover-glide-up { transition: transform 0.3s ease, opacity 0.3s ease; transform: translateY(0); } .hover-glide-up:hover { transform: translateY(-10px); } p.form-row.form-row-last .form-row input[type="password"] { width: 97%; border-radius: 5px; } .bbt-dash-pct-extra-content .hurrytimer-cdt__headline.hurrytimer-headline { display: none; } button.search-submit { padding: 8px; margin: 0 !important; } form.search-form { display: flex; align-items: center; gap: 4px; float: right; } /* 404 page */ .page-missing-col { margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 100px 20px; text-align: center; } .page-missing-col h3 { font-size: 32px; font-weight: 500; margin-bottom: 10px; letter-spacing: 0; } .page-missing-col img { height: 100%; width: auto; margin-bottom: 30px; } a.page-missing-pill-button { background: #9a1e21; padding: 0.5rem 1.5rem; border-radius: 50px; color: white; margin-top: 26px; } a.page-missing-pill-button:hover { background: #cb0000; } .bbt-dash-pct-extra-content [class~="hurrytimer-campaign"] { line-height: normal; text-align: center; padding: 0; } .bbt-home-plans-button[disabled] { pointer-events: none; opacity: 0.7; cursor: not-allowed; } .pmpro_card_content { margin-bottom: 0; } fieldset#pmpro_form_fieldset-checkout_boxes { display: none; } img.height-set { height: 200px; } abbr.required { text-decoration: none !important; } div#pmpro_billing_address_fields { clear: both; } tr.cart-discount th { text-align: left !important; color: #0cb963 !important; } .empty-cart-wrapper { text-align: center !important; display: flex; flex-direction: column; justify-content: center; align-items: center; } /* ─── Funded Trading (template-bbt-funded.php) ────────────────────────── */ .bbt-funded-main { display: grid; grid-template-columns: 3fr 1fr; gap: 20px; align-items: start; margin: 16px 0; } .bbt-funded-compare { border: 2px solid var(--bbt-red); border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #fff, var(--bbt-gray-50)); } .bbt-funded-compare-header, .bbt-funded-compare-row, .bbt-funded-compare-footer { display: grid; grid-template-columns: 2fr 1fr 1fr; } .bbt-funded-compare-header { border-bottom: 1px solid var(--bbt-gray-100); } .bbt-funded-compare-header-cell { padding: 20px 16px; text-align: center; border-left: 1px solid var(--bbt-gray-100); background: rgba(249, 250, 251, 0.5); } .bbt-funded-compare-header-note { border-left: 0; text-align: left; background: none; } .bbt-funded-eyebrow { margin: 0 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bbt-red); } .bbt-funded-compare-header-note h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--bbt-gray-900); } .bbt-funded-compare-logo { max-height: 30px; max-width: 160px; margin: 0 auto; } .bbt-funded-compare-plan { margin: 8px 0 0; font-size: 11px; font-weight: 700; line-height: 1.3; color: var(--bbt-red); } .bbt-funded-compare-price { margin: 4px 0 0; font-size: 24px; font-weight: 800; color: var(--bbt-gray-900); } .bbt-funded-compare-term { margin: 2px 0 0; font-size: 11px; font-weight: 700; color: var(--bbt-gray-700); } .bbt-funded-compare-note { margin: 2px 0 0; font-size: 10px; font-style: italic; color: var(--bbt-gray-400); } .bbt-funded-compare-row { align-items: center; border-bottom: 1px solid var(--bbt-gray-100); } .bbt-funded-compare-row:nth-child(odd) { background: rgba(249, 250, 251, 0.4); } .bbt-funded-compare-row-label { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; } .bbt-funded-compare-row-label svg { width: 20px; height: 20px; margin-top: 2px; color: var(--bbt-gray-400); flex-shrink: 0; } .bbt-funded-feature-label { margin: 0; font-size: 14px; font-weight: 600; color: var(--bbt-gray-900); } .bbt-funded-feature-desc { margin: 2px 0 0; font-size: 12px; color: var(--bbt-red); } .bbt-funded-compare-row-cell { padding: 14px 0; border-left: 1px solid var(--bbt-gray-100); display: flex; justify-content: center; } .bbt-funded-check { width: 22px; height: 22px; color: var(--bbt-emerald-400); } .bbt-funded-compare-footer { border-top: 1px solid var(--bbt-gray-100); background: #fff; } .bbt-funded-compare-footnote { padding: 16px; } .bbt-funded-compare-footnote p { margin: 0; font-size: 12px; font-style: italic; line-height: 1.5; color: var(--bbt-red); } .bbt-funded-compare-footer-cell { padding: 14px 12px; border-left: 1px solid var(--bbt-gray-100); display: flex; align-items: center; justify-content: center; } .bbt-funded-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 6px; background: var(--bbt-red) !important; color: #fff !important; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease; } .bbt-funded-btn:hover { background: var(--bbt-red-dark) !important; color: #fff !important; } .bbt-funded-rules { border: 1px solid var(--bbt-gray-100); border-radius: 8px; padding: 20px; background: #fff; } .bbt-funded-rules h2 { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--bbt-gray-900); } .bbt-funded-rules ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .bbt-funded-rules li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.5; color: var(--bbt-gray-700); } .bbt-funded-rules li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--bbt-gray-400); } .bbt-funded-rules li a { color: var(--bbt-red); font-weight: 600; } .bbt-funded-rules li a:hover { text-decoration: underline; } .bbt-funded-rules-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 16px; border-radius: 6px; border: 1px solid var(--bbt-gray-200); font-size: 13px; font-weight: 600; color: var(--bbt-gray-900) !important; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .bbt-funded-rules-btn:hover { border-color: #9ca3af; box-shadow: 0 2px 6px rgba(17, 24, 39, 0.08); } .bbt-funded-rules-btn svg { width: 14px; height: 14px; } .bbt-funded-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; } .bbt-funded-gallery-item { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--bbt-gray-900); } .bbt-funded-gallery-img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; } .bbt-funded-video { cursor: pointer; } .bbt-funded-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); } .bbt-funded-play-btn svg { width: 24px; height: 24px; color: var(--bbt-gray-900); margin-left: 3px; } .bbt-funded-video-embed { position: relative; width: 100%; height: 100%; } .bbt-funded-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .bbt-funded-gallery-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); } .bbt-funded-gallery-caption-eyebrow { margin: 0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6); } .bbt-funded-gallery-caption-title { margin: 2px 0 0; font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: #fff; } .bbt-funded-disclaimer { border: 1px solid var(--bbt-gray-100); border-radius: 8px; padding: 20px; background: #fff; } .bbt-funded-disclaimer p { margin: 0; font-size: 11px; line-height: 1.7; color: var(--bbt-gray-400); } .bbt-funded-disclaimer strong { color: var(--bbt-gray-700); } .bbt-funded-disclaimer a { color: var(--bbt-red); } .bbt-funded-disclaimer a:hover { text-decoration: underline; } @media (max-width: 1024px) { .bbt-funded-gallery { grid-template-columns: 1fr; } } @media (max-width: 768px) { .bbt-funded-main { grid-template-columns: 1fr; } .bbt-funded-compare-header, .bbt-funded-compare-footer { grid-template-columns: 1fr; } .bbt-funded-compare-row { grid-template-columns: 1fr; } .bbt-funded-compare-row-cell { border-left: 0; border-top: 1px solid var(--bbt-gray-100); justify-content: flex-start; padding: 8px 16px; } } /* ─── DAS Funded Account (template-bbt-das-funded-account.php) ────────── */ /* Bottom gallery/disclaimer reuse .bbt-funded-gallery/.bbt-funded-disclaimer from the Funded Trading section above — only the top pricing-card row needs its own classes. */ .bbt-das-funded-top { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: stretch; margin: 16px 0; } .bbt-das-funded-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--bbt-gray-200); border-radius: 8px; overflow: hidden; } .bbt-das-funded-card.is-elite { border: 2px solid var(--bbt-red); } .bbt-das-funded-card-banner { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 16px; color: #fff; } .bbt-das-funded-card.is-elite .bbt-das-funded-card-banner { background: var(--bbt-red); } .bbt-das-funded-card.is-diamond .bbt-das-funded-card-banner { background: var(--bbt-gray-900); } .bbt-das-funded-card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; } .bbt-das-funded-card-body h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--bbt-gray-900); } .bbt-das-funded-card-sub { margin: 4px 0 16px; font-size: 13px; font-weight: 600; color: var(--bbt-red); } .bbt-das-funded-price { margin-bottom: 20px; } .bbt-das-funded-price-was { margin: 0 0 2px; font-size: 13px; color: var(--bbt-gray-400); text-decoration: line-through; } .bbt-das-funded-price-value { font-size: 32px; font-weight: 800; color: var(--bbt-gray-900); } .bbt-das-funded-price-note { margin-left: 6px; font-size: 13px; color: var(--bbt-gray-500); } .bbt-das-funded-price-offer { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; font-size: 13px; font-weight: 700; color: #059669; } .bbt-das-funded-price-offer svg { width: 15px; height: 15px; } .bbt-das-funded-features { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; } .bbt-das-funded-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--bbt-gray-700); } .bbt-das-funded-features svg { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; } .bbt-das-funded-features .is-check svg { color: var(--bbt-emerald-400); } .bbt-das-funded-features .is-arrow svg { color: var(--bbt-red); } .bbt-das-funded-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 10px 20px; border-radius: 6px; font-size: 13px; font-weight: 700; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease; } .bbt-das-funded-btn.is-primary { background: var(--bbt-red); color: #fff; } .bbt-das-funded-btn.is-primary:hover { background: var(--bbt-red-dark); color: #fff; } .bbt-das-funded-btn.is-secondary { background: #fff; color: var(--bbt-gray-900); border: 1px solid var(--bbt-gray-200); } .bbt-das-funded-btn.is-secondary:hover { border-color: #9ca3af; } .bbt-das-funded-rules { display: flex; flex-direction: column; gap: 20px; background: #fff; border: 1px solid var(--bbt-gray-100); border-radius: 8px; padding: 20px; } .bbt-das-funded-rules h2 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--bbt-gray-900); } .bbt-das-funded-rules ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .bbt-das-funded-rules li { position: relative; padding-left: 14px; font-size: 13px; line-height: 1.5; color: var(--bbt-gray-700); } .bbt-das-funded-rules li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--bbt-gray-400); } .bbt-das-funded-rules li a { color: var(--bbt-red); font-weight: 600; } .bbt-das-funded-rules li a:hover { text-decoration: underline; } .bbt-das-funded-activation { border-top: 1px solid var(--bbt-gray-100); padding-top: 16px; } .bbt-das-funded-activation p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--bbt-gray-700); } .bbt-das-funded-activation strong { color: var(--bbt-red); } .bbt-das-funded-activation a { color: var(--bbt-red); font-weight: 600; } .bbt-das-funded-activation a:hover { text-decoration: underline; } .bbt-das-funded-faq-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 16px; border-radius: 6px; border: 1px solid var(--bbt-gray-200); font-size: 13px; font-weight: 600; color: var(--bbt-gray-900) !important; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .bbt-das-funded-faq-btn:hover { border-color: #9ca3af; box-shadow: 0 2px 6px rgba(17, 24, 39, 0.08); } .bbt-das-funded-faq-btn svg { width: 14px; height: 14px; } @media (max-width: 1024px) { .bbt-das-funded-top { grid-template-columns: 1fr; } } /* ─── IBKR for DAS (template-bbt-ibkr-das.php) ────────────────────────── */ .bbt-ibkr-top { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; margin: 16px 0; } .bbt-ibkr-video { position: relative; width: 100%; padding-top: 56.25%; border-radius: 8px; overflow: hidden; background: var(--bbt-gray-900); } .bbt-ibkr-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .bbt-ibkr-description { border: 1px solid var(--bbt-gray-200); border-radius: 8px; padding: 20px; background: #fff; } .bbt-ibkr-description h2, .bbt-ibkr-instructions h2 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--bbt-gray-900); } .bbt-ibkr-description p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--bbt-gray-700); } .bbt-ibkr-description ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .bbt-ibkr-description li { position: relative; padding-left: 16px; font-size: 14px; color: var(--bbt-gray-700); } .bbt-ibkr-description li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--bbt-red); } .bbt-ibkr-instructions { border: 1px solid var(--bbt-gray-200); border-radius: 8px; padding: 24px; background: #fff; } .bbt-ibkr-instructions ol { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .bbt-ibkr-instructions ol li { display: flex; align-items: flex-start; gap: 12px; } .bbt-ibkr-step-check { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bbt-emerald-400); flex-shrink: 0; margin-top: 1px; } .bbt-ibkr-step-check svg { width: 12px; height: 12px; color: #fff; } .bbt-ibkr-instructions ol span:last-child { font-size: 14px; line-height: 1.5; color: var(--bbt-gray-700); } .bbt-ibkr-signup-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 6px; background: var(--bbt-red) !important; color: #fff !important; font-size: 13px; font-weight: 600; text-decoration: none; transition: background-color 0.15s ease; } .bbt-ibkr-signup-btn:hover { background: var(--bbt-red-dark) !important; color: #fff !important; } @media (max-width: 768px) { .bbt-ibkr-top { grid-template-columns: 1fr; } } /* ─── Order DAS Pro Simulator (template-bbt-order-das-simulator.php) ──── */ .bbt-das-order-top { display: grid; grid-template-columns: 50% auto; gap: 20px; align-items: start; margin: 16px 0; } .bbt-das-order-left { display: flex; flex-direction: column; gap: 16px; } .bbt-das-order-video { position: relative; width: 100%; padding-top: 56.25%; border-radius: 8px; overflow: hidden; background: var(--bbt-gray-900); } .bbt-das-order-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .bbt-das-order-link-card { background: #fff; border: 1px solid var(--bbt-gray-200); border-radius: 8px; padding: 14px 16px; } .bbt-das-order-link-card a { color: var(--bbt-red); font-size: 14px; font-weight: 600; text-decoration: none; } .bbt-das-order-link-card a:hover { text-decoration: underline; } .bbt-das-order-activation { background: #fff; border: 1px solid var(--bbt-gray-200); border-radius: 8px; padding: 20px; } .bbt-das-order-activation h2 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--bbt-gray-900); } .bbt-das-order-activation p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--bbt-gray-700); } .bbt-das-order-activation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .bbt-das-order-activation li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--bbt-gray-700); } .bbt-das-order-check { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bbt-emerald-400); flex-shrink: 0; } .bbt-das-order-check svg { width: 12px; height: 12px; color: #fff; } .bbt-das-order-right { background: #fff; border: 1px solid var(--bbt-gray-200); border-radius: 8px; padding: 24px; display: flex; flex-direction: column; gap: 20px; } .bbt-das-order-right h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--bbt-gray-900); } .bbt-das-order-cart-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: flex-start; padding: 10px 20px; border-radius: 6px; background: var(--bbt-red) !important; color: #fff !important; font-size: 13px; font-weight: 600; text-decoration: none; transition: background-color 0.15s ease; } .bbt-das-order-cart-btn:hover { background: var(--bbt-red-dark) !important; color: #fff !important; } .bbt-das-order-cart-btn svg { width: 16px; height: 16px; } .bbt-das-order-details { border-top: 1px solid var(--bbt-gray-100); padding-top: 16px; } .bbt-das-order-details p { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--bbt-gray-900); } .bbt-das-order-details ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; } .bbt-das-order-details li { font-size: 14px; line-height: 1.6; color: var(--bbt-gray-700); } .bbt-das-order-contact { border-top: 1px solid var(--bbt-gray-100); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; } .bbt-das-order-contact p { margin: 0; font-size: 14px; color: var(--bbt-gray-700); } .bbt-das-order-contact a { color: var(--bbt-red); font-weight: 600; text-decoration: none; } .bbt-das-order-contact a:hover { text-decoration: underline; } @media (max-width: 768px) { .bbt-das-order-top { grid-template-columns: 1fr; } } /* ─── Upgrade Unavailable (template-bbt-upgrade-unavailable.php) ──────── */ .bbt-upgrade-unavailable { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 20px; } .bbt-upgrade-unavailable-card { max-width: 420px; width: 100%; text-align: center; background: #fff; border: 1px solid var(--bbt-gray-200); border-radius: 8px; padding: 40px 32px; } .bbt-upgrade-unavailable-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%; background: var(--bbt-badge-bg); color: var(--bbt-red); } .bbt-upgrade-unavailable-icon svg { width: 26px; height: 26px; } .bbt-upgrade-unavailable-card h1 { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--bbt-gray-900); text-transform: none; letter-spacing: normal; } .bbt-upgrade-unavailable-card p { margin: 0 0 24px; font-size: 14px; line-height: 1.6; color: var(--bbt-gray-500); } .bbt-upgrade-unavailable-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; border-radius: 6px; background: var(--bbt-red) !important; color: #fff !important; font-size: 13px; font-weight: 600; text-decoration: none; transition: background-color 0.15s ease; } .bbt-upgrade-unavailable-btn:hover { background: var(--bbt-red-dark) !important; color: #fff !important; } /* ─── Trade Ideas Scanner (template-bbt-trade-ideas.php) ──────────────── */ .bbt-ti-hero { display: flex; align-items: flex-start; gap: 32px; border: 1px solid var(--bbt-gray-200); border-radius: 8px; padding: 24px; margin: 16px 0; background: #fff; } .bbt-ti-logo { flex-shrink: 0; width: 128px; height: auto; } .bbt-ti-hero-body { flex: 1; display: flex; flex-direction: column; gap: 16px; } .bbt-ti-hero-body p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--bbt-gray-700); } .bbt-ti-hero-body strong { color: var(--bbt-gray-900); } .bbt-ti-btn { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 10px 20px; border-radius: 6px; background: var(--bbt-red) !important; color: #fff !important; font-size: 13px; font-weight: 600; text-decoration: none; transition: background-color 0.15s ease; } .bbt-ti-btn:hover { background: var(--bbt-red-dark) !important; color: #fff !important; } .bbt-ti-btn svg { width: 16px; height: 16px; } .bbt-ti-subscription { border: 1px solid var(--bbt-gray-200); border-radius: 8px; padding: 24px; background: #fff; display: flex; flex-direction: column; gap: 24px; } .bbt-ti-subscription-intro h2 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--bbt-gray-900); } .bbt-ti-subscription-intro p { margin: 0; font-size: 14px; color: var(--bbt-gray-700); } .bbt-ti-step { display: flex; align-items: flex-start; gap: 20px; } .bbt-ti-step-badge { flex-shrink: 0; width: 48px; height: 48px; border-radius: 6px; background: var(--bbt-gray-100); border: 1px solid var(--bbt-gray-200); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: var(--bbt-gray-900); line-height: 1.4; } .bbt-ti-step-badge span { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bbt-gray-500); line-height: 1; } .bbt-ti-step-body { flex: 1; display: flex; flex-direction: column; gap: 12px; } .bbt-ti-step-body p { margin: 0; font-size: 14px; color: var(--bbt-gray-700); } .bbt-ti-step-img { display: block; max-width: 480px; width: 100%; border-radius: 6px; border: 1px solid var(--bbt-gray-100); } .bbt-ti-or { font-style: italic; color: var(--bbt-gray-400) !important; } .bbt-ti-codebox { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--bbt-gray-200); background: var(--bbt-gray-50); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .bbt-ti-codebox:hover { border-color: #9ca3af; background: var(--bbt-gray-100); } .bbt-ti-codebox-text { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12px; color: var(--bbt-gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bbt-ti-codebox-icon { flex-shrink: 0; display: flex; color: var(--bbt-gray-400); } .bbt-ti-icon-copy, .bbt-ti-icon-check { width: 14px; height: 14px; } .bbt-ti-icon-check { color: var(--bbt-emerald-400); } /* ─── Marketing nav (template-bbt-checkout.php) ────────────────────────── */ /* Static port of the main site's Navbar.tsx (src/components/Navbar.tsx) — same look, but every internal link is hardcoded to bearbulltraders.com since this renders on the WP members site, not the Next.js marketing app, so a relative path would resolve against the wrong domain. */ .bbt-marketing-nav { display: block !important; position: fixed !important; top: 0 !important; left: 0; right: 0; z-index: 999; height: 64px; background: #000; transition: background-color 0.3s ease, box-shadow 0.3s ease; } .bbt-marketing-nav.is-scrolled { background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } .bbt-marketing-nav-inner { max-width: 1280px; height: 64px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; } .bbt-marketing-nav-logo { flex-shrink: 0; display: flex; align-items: center; opacity: 0.9; transition: opacity 0.15s ease; } .bbt-marketing-nav-logo:hover { opacity: 1; } .bbt-marketing-nav-logo svg { display: block; height: 28px; width: auto; } .bbt-marketing-nav-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 6px; border: 0; border-radius: 6px; background: none; color: rgba(255, 255, 255, 0.8); cursor: pointer; } .bbt-marketing-nav-toggle svg { width: 22px; height: 22px; } .bbt-marketing-nav-toggle:hover { color: #fff; } .bbt-marketing-nav-links { display: flex; align-items: center; gap: 2px; } .bbt-marketing-nav-link { padding: 8px 12px; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.7) !important; text-decoration: none !important; transition: color 0.15s ease; } .bbt-marketing-nav-link:hover { color: #fff !important; } .bbt-marketing-nav-dropdown { position: relative; } .bbt-marketing-nav-dropdown-trigger { display: flex; align-items: center; gap: 4px; padding: 8px 12px; border: 0; background: none; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.7); cursor: pointer; transition: color 0.15s ease; } .bbt-marketing-nav-dropdown-trigger:hover { color: #fff; } .bbt-marketing-nav-dropdown-trigger svg { width: 14px; height: 14px; transition: transform 0.2s ease; } .bbt-marketing-nav-dropdown.is-open .bbt-marketing-nav-dropdown-trigger svg { transform: rotate(180deg); } .bbt-marketing-nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 180px; margin-top: 4px; padding: 8px 0; background: #000; border: 1px solid rgba(255, 255, 255, 0.1); border-top: 2px solid var(--bbt-red); border-radius: 4px; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); } .bbt-marketing-nav-dropdown.is-open .bbt-marketing-nav-dropdown-menu { display: block; } .bbt-marketing-nav-dropdown-menu a { display: block; padding: 8px 16px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.7) !important; text-decoration: none !important; transition: color 0.15s ease, background-color 0.15s ease; } .bbt-marketing-nav-dropdown-menu a:hover { color: #fff !important; background: rgba(255, 255, 255, 0.05); } .bbt-marketing-nav-cta { margin-left: 8px; padding: 8px 16px; border-radius: 4px; background: #8e111a !important; color: #fff !important; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none !important; transition: background-color 0.15s ease; } .bbt-marketing-nav-cta:hover { background: #7a0f17 !important; color: #fff !important; } .bbt-marketing-nav-cta:active { background: #6a0d14 !important; } @media (max-width: 1024px) { .bbt-marketing-nav-toggle { display: flex; } .bbt-marketing-nav-links { display: none; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 64px; left: 0; right: 0; padding: 8px 16px 20px; background: #000; border-top: 1px solid rgba(255, 255, 255, 0.1); } .bbt-marketing-nav-links.is-open { display: flex; } .bbt-marketing-nav-link, .bbt-marketing-nav-dropdown-trigger { justify-content: center; text-align: center; } .bbt-marketing-nav-dropdown-menu { position: static; margin-top: 0; border: 0; box-shadow: none; background: rgba(255, 255, 255, 0.03); } .bbt-marketing-nav-dropdown-menu a { text-align: center; } .bbt-marketing-nav-cta { margin: 8px 0 0; text-align: center; } } /* ─── Checkout (template-bbt-checkout.php) ────────────────────────────── */ /* Just centers/constrains PMPro's own checkout markup — not restyling its form fields, which already have their own look (see screenshot: red section headers, bordered card). No sidebar, no distractions. */ .bbt-checkout-page { margin: 0; padding-top: 64px; background: var(--bbt-gray-50); } .bbt-checkout-shell { position: relative; max-width: 720px; margin: 40px auto; padding: 0 20px 40px; } /* .bbt-breadcrumb's own left/right padding is meant for full-bleed .bbt-main pages — inside the already-padded checkout shell it would double up and misalign against the content below, so flatten it back to the shell edge. */ .bbt-checkout-shell .bbt-breadcrumb { padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 0 !important; } @media (max-width: 768px) { .bbt-checkout-shell { margin: 20px auto; padding: 0 16px 24px; margin-top: 0 !important; } } /* ─── Generic PMPro page content (confirmation/receipt, cancel, invoice, change level, etc.) — template-bbt-pmpro-page.php reuses .bbt-checkout-shell as its wrapper, this styles PMPro's own unstyled shortcode markup inside it. */ .pmpro_confirmation_wrap, .bbt-checkout-shell .pmpro_actions_nav { font-size: 15px; line-height: 1.7; color: var(--bbt-gray-700); } .pmpro_confirmation_wrap p { margin: 0 0 16px; } .pmpro_confirmation_wrap h1, .pmpro_confirmation_wrap h2, .pmpro_confirmation_wrap h3 { font-family: var(--bbt-font-display, inherit); font-weight: 700; color: var(--bbt-gray-900); margin: 32px 0 16px; } .pmpro_confirmation_wrap h2 { font-size: 22px; } .pmpro_confirmation_wrap hr { border: 0; border-top: 1px solid var(--bbt-gray-200); margin: 24px 0; } .pmpro_confirmation_wrap ul { margin: 0 0 16px; padding-left: 20px; } .pmpro_confirmation_wrap ul li { margin-bottom: 6px; } .pmpro_confirmation_wrap strong { color: var(--bbt-gray-900); } .pmpro_confirmation_wrap a, .pmpro_confirmation_wrap .pmpro_a_print { color: var(--bbt-red) !important; text-decoration: none; font-weight: 600; } .pmpro_confirmation_wrap a:hover, .pmpro_confirmation_wrap .pmpro_a_print:hover { text-decoration: underline; } /* ─── WooCommerce checkout (product cart, e.g. DAS Simulator add-to-cart) Same shell (.bbt-checkout-shell) as the PMPro membership checkout, but PMPro's own form ships styled already — WooCommerce's default checkout markup doesn't, so it renders as bare browser form controls until styled here to match the PMPro side's input/button language. Can't reach inside Stripe's own embedded card-number/expiry/CVC iframe, only the WooCommerce markup around it. */ .bbt-checkout-shell .woocommerce-notices-wrapper .woocommerce-message, .bbt-checkout-shell .woocommerce-notices-wrapper .woocommerce-info { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin: 0 0 16px !important; padding: 14px 16px !important; background: #fff !important; border: 1px solid var(--bbt-gray-200) !important; border-left: 3px solid var(--bbt-red) !important; border-radius: 6px !important; font-size: 13px !important; color: var(--bbt-gray-700) !important; list-style: none !important; } .bbt-checkout-shell .woocommerce-notices-wrapper .woocommerce-message::before, .bbt-checkout-shell .woocommerce-notices-wrapper .woocommerce-info::before { display: none !important; } .bbt-checkout-shell .woocommerce-notices-wrapper a.button { display: inline-flex !important; align-items: center !important; padding: 6px 14px !important; border-radius: 6px !important; border: 1px solid var(--bbt-gray-200) !important; background: #fff !important; color: var(--bbt-gray-900) !important; font-size: 12px !important; font-weight: 600 !important; text-decoration: none !important; } .bbt-checkout-shell .woocommerce-form-coupon-toggle .woocommerce-info { margin: 0 0 20px !important; padding: 10px 16px !important; background: var(--bbt-gray-50) !important; border: 1px solid var(--bbt-gray-100) !important; border-left: 0 !important; border-radius: 6px !important; font-size: 13px !important; color: var(--bbt-gray-700) !important; } .bbt-checkout-shell .woocommerce-form-coupon-toggle a { color: var(--bbt-red) !important; font-weight: 600 !important; } .bbt-checkout-shell .woocommerce-billing-fields h3, .bbt-checkout-shell .woocommerce-additional-fields h3, .bbt-checkout-shell #order_review_heading { font-size: 17px !important; font-weight: 700 !important; color: var(--bbt-gray-900) !important; margin: 0 0 16px !important; padding-bottom: 10px !important; border-bottom: 2px solid var(--bbt-red) !important; } .bbt-checkout-shell .form-row { margin: 0 0 16px !important; } .bbt-checkout-shell .form-row label { display: block !important; font-size: 13px !important; font-weight: 600 !important; color: var(--bbt-gray-700) !important; margin-bottom: 6px !important; } .bbt-checkout-shell .form-row label .required { color: var(--bbt-red) !important; text-decoration: none !important; } .bbt-checkout-shell .form-row input.input-text, .bbt-checkout-shell .form-row textarea, .bbt-checkout-shell .select2-selection, .bbt-checkout-shell select { width: 100% !important; font-family: inherit !important; font-size: 14px !important; color: var(--bbt-gray-900) !important; background: #fff !important; border: 1px solid var(--bbt-gray-200) !important; border-radius: 6px !important; padding: 10px 12px !important; height: auto !important; box-shadow: none !important; transition: border-color 0.15s ease, box-shadow 0.15s ease !important; } .bbt-checkout-shell .select2-selection__rendered { padding-left: 0 !important; line-height: 1.4 !important; } .bbt-checkout-shell .select2-selection__arrow { height: 100% !important; } .bbt-checkout-shell .form-row input.input-text:focus, .bbt-checkout-shell .form-row textarea:focus, .bbt-checkout-shell .select2-container--open .select2-selection { outline: none !important; border-color: var(--bbt-red) !important; box-shadow: 0 0 0 3px rgba(192, 32, 42, 0.12) !important; } .bbt-checkout-shell table.woocommerce-checkout-review-order-table { width: 100% !important; border-collapse: collapse !important; margin: 0 0 20px !important; background: #fff !important; border: 1px solid var(--bbt-gray-200) !important; border-radius: 8px !important; overflow: hidden !important; } .bbt-checkout-shell table.woocommerce-checkout-review-order-table thead th { padding: 12px 16px !important; background: var(--bbt-gray-50) !important; border-bottom: 1px solid var(--bbt-gray-200) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: var(--bbt-gray-500) !important; text-align: left !important; } .bbt-checkout-shell table.woocommerce-checkout-review-order-table td, .bbt-checkout-shell table.woocommerce-checkout-review-order-table tfoot th { padding: 12px 16px !important; border-bottom: 1px solid var(--bbt-gray-100) !important; font-size: 14px !important; color: var(--bbt-gray-900) !important; } .bbt-checkout-shell table.woocommerce-checkout-review-order-table tfoot tr:last-child td, .bbt-checkout-shell table.woocommerce-checkout-review-order-table tfoot tr:last-child th { border-bottom: 0 !important; } .bbt-checkout-shell table.woocommerce-checkout-review-order-table tfoot .order-total td, .bbt-checkout-shell table.woocommerce-checkout-review-order-table tfoot .order-total th { font-size: 16px !important; font-weight: 800 !important; } .bbt-checkout-shell #payment { background: #fff !important; border: 1px solid var(--bbt-gray-200) !important; border-radius: 8px !important; overflow: hidden !important; } .bbt-checkout-shell #payment ul.payment_methods { list-style: none !important; margin: 0 !important; padding: 16px !important; } .bbt-checkout-shell #payment ul.payment_methods li { margin: 0 0 4px !important; } .bbt-checkout-shell #payment ul.payment_methods li label { font-size: 14px !important; font-weight: 600 !important; color: var(--bbt-gray-900) !important; } .bbt-checkout-shell #payment ul.payment_methods input.input-radio { accent-color: var(--bbt-red) !important; width: 16px !important; height: 16px !important; vertical-align: middle !important; margin-right: 6px !important; } .bbt-checkout-shell #payment .payment_box { margin: 10px 0 0 !important; padding: 16px !important; background: var(--bbt-gray-50) !important; border: 1px solid var(--bbt-gray-100) !important; border-radius: 6px !important; font-size: 13px !important; color: var(--bbt-gray-700) !important; } .bbt-checkout-shell #payment .payment_box::before { display: none !important; } .bbt-checkout-shell .woocommerce-terms-and-conditions-wrapper { margin: 20px 0 !important; font-size: 13px !important; color: var(--bbt-gray-700) !important; } .bbt-checkout-shell .woocommerce-terms-and-conditions-wrapper a { color: var(--bbt-red) !important; font-weight: 600 !important; } .bbt-checkout-shell .woocommerce-form__label-for-checkbox input.woocommerce-form__input-checkbox { accent-color: var(--bbt-red) !important; width: 16px !important; height: 16px !important; vertical-align: middle !important; margin-right: 8px !important; } .bbt-checkout-shell #place_order, .bbt-checkout-shell .checkout button[type="submit"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 14px 20px !important; border-radius: 6px !important; background: var(--bbt-red) !important; color: #fff !important; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; border: 0 !important; cursor: pointer !important; transition: background-color 0.15s ease !important; } .bbt-checkout-shell #place_order:hover, .bbt-checkout-shell .checkout button[type="submit"]:hover { background: var(--bbt-red-dark) !important; } /* Stripe/security seal image on the checkout page content — ported from existingCss.css. Missing from here entirely was why it rendered at its native (huge) size instead of the pinned 172px badge in the corner. */ img.payment-security-badges-bbt { position: absolute; right: 12px; width: 172px; bottom: 80px; } @media (max-width: 500px) { img.payment-security-badges-bbt { position: relative; right: unset; border: unset; bottom: unset; margin-top: 20px; margin-bottom: -20px; } } img.das-checkout-secure-icons.center { width: 250px !important; } .woocommerce-checkout #payment div.payment_box { position: relative; box-sizing: border-box; width: 100%; padding: 1em; margin: 1em 0; font-size: 0.92em; border-radius: 2px; line-height: 1.5; background-color: #f5f5f5; color: #515151; } /* ─── Login (template-bbt-login.php) ──────────────────────────────────── */ /* Ported from the site's current live login page CSS — dropped the old Bridge-theme sidebar-hiding rules and the WPBakery vc_row hash class, since this template has no page-builder row to target. Left nav stays (get_header()/get_footer() render it site-wide); only the right aside is hidden here, via the 'bbt-login-page' body class from functions.php. */ body.bbt-login-page .bbt-aside { display: none; } #pmpro_login { width: 22%; margin: 0 auto; } body:has(#loginform) { background-color: #f7f8fb; } .bbt-login-shell { padding: 60px 20px; } body.bbt-login-page .pmpro_card { width: 400px; margin: 0 auto !important; box-shadow: 2px 1px 20px 0px rgba(0, 0, 0, 0.07) !important; border-radius: 20px !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } body.bbt-login-page .pmpro_card:hover { transform: translateY(-4px) !important; box-shadow: 2px 6px 28px 0px rgba(0, 0, 0, 0.12) !important; } body:has(#loginform) #pmpro_account-login, body:has(#loginform) .pmpro_box { background: #ffffff; border-radius: 16px; box-shadow: 0 4px 32px rgba(0, 0, 0, 0.08); padding: 48px 40px; border: none !important; width: 100%; max-width: 420px; box-sizing: border-box; } body:has(#loginform) #pmpro_account-login h2, body:has(#loginform) .pmpro_box h2 { font-size: 22px; font-weight: 700; color: #111; margin-bottom: 6px; text-align: center; } body:has(#loginform) .pmpro_login_intro, body:has(#loginform) #pmpro_account-login p:first-of-type { text-align: center; color: #888; font-size: 14px; margin-bottom: 28px; } body:has(#loginform) form.pmpro_form label, #loginform label { font-weight: 500 !important; display: block; font-size: 13px !important; color: #333 !important; margin-bottom: 6px; } #loginform input[type="text"], #loginform input[type="password"] { border-radius: 8px; border: 1.5px solid #e2e5ea !important; padding: 12px 14px; width: 100%; font-size: 14px; color: #111; background: #fafafa; transition: border-color 0.2s; box-sizing: border-box; } #loginform input[type="text"]:focus, #loginform input[type="password"]:focus { border-color: #111 !important; background: #fff; outline: none; } #loginform p { margin-bottom: 18px; } #loginform p.login-lost-password { text-align: right; margin-top: -10px; margin-bottom: 18px; } #loginform input#wp-submit { border: none !important; background: #9a1e21 !important; padding: 14px !important; width: 100% !important; border-radius: 8px !important; color: white !important; cursor: pointer !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; transition: background 0.2s !important; margin-top: 8px !important; } #loginform input#wp-submit:hover { background: #7a1719 !important; } #loginform p.login-lost-password a { color: #888 !important; font-size: 12px !important; text-decoration: underline !important; text-underline-offset: 2px !important; } #loginform p.login-lost-password a:hover { color: #333 !important; } body.bbt-login-page .pmpro_login_links, body.bbt-login-page .pmpro_actions_nav { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; margin-top: 12px !important; } body.bbt-login-page .pmpro_login_links a, body.bbt-login-page .pmpro_actions_nav a { color: #888 !important; font-size: 12px !important; text-decoration: underline !important; text-underline-offset: 2px !important; transition: color 0.2s !important; } body.bbt-login-page .pmpro_login_links a:hover, body.bbt-login-page .pmpro_actions_nav a:hover { color: #333 !important; } button#pmpro_btn-password-toggle-1 { background: none !important; border: none !important; box-shadow: none !important; color: #aaa !important; font-size: 12px !important; font-weight: 400 !important; padding: 0 !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 4px !important; } button#pmpro_btn-password-toggle-1:hover { color: #555 !important; } button#pmpro_btn-password-toggle-1 svg { width: 14px !important; height: 14px !important; stroke: #aaa !important; } button#pmpro_btn-password-toggle-1:hover svg { stroke: #555 !important; } .pmpro_form_field-password-toggle-state { font-size: 12px !important; color: #aaa !important; } #loginform .login-remember label { font-size: 13px !important; font-weight: 400 !important; color: #888 !important; } body.bbt-login-page .pmpro_message.pmpro_success { display: none; } body:has(#loginform) .pmpro_message { border-radius: 8px; font-size: 14px; padding: 12px 16px; } @media (max-width: 600px) { body.bbt-login-page .pmpro_card { width: 100% !important; box-sizing: border-box; } body:has(#loginform) #pmpro_account-login, body:has(#loginform) .pmpro_box { padding: 32px 24px; max-width: 100%; } } /* ─── Mobile ──────────────────────────────────────────────────────────── */ .bbt-mobile-bar { display: none; flex-direction: column; align-items: center; position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: #111827; } .bbt-mobile-bar-logo { display: flex; padding: 14px 16px; } .bbt-mobile-bar-logo img { display: block; height: 22px; width: auto; } .bbt-mobile-toggle { display: flex; align-items: center; justify-content: center; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); background: none; color: #fff; cursor: pointer; } .bbt-mobile-toggle svg { width: 22px; height: 22px; } @media (max-width: 1024px) { .bbt-aside { display: none; } } @media (max-width: 768px) { .bbt-mobile-bar { display: flex; } .bbt-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0); } .bbt-shell.bbt-nav-open .bbt-sidebar { transform: translateX(0); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3); } .bbt-main { padding-top: 96px; } } /* ------------------------------------------------------------ EDUCATION CENTER */ /* Restyled to match the Next.js member portal's Education Center pages (src/app/(dashboard)/education/day-trading/DayTradingTabs.tsx) — card border + hover shadow/zoom/veil, red-underline tabs, rounded search field. LearnDash/BetterDocs render this markup server-side, so these are all !important overrides of their default plugin styling rather than fresh classes we control. The Next.js page has no "Completed/In progress" ribbon at all (that state is real LearnDash progress data with no Next.js equivalent to match) — kept as a small badge instead of the old full-width banner, recolored to fit the same palette. */ /* Lessons/topics/quizzes/courses (any LearnDash CPT, body class .learndash-cpt) and the Education Center landing pages (body class WP auto-adds for pages using template-bbt-education-center.php) — left nav only, no right aside. .bbt-shell is a flex row so .bbt-main (flex:1) fills the freed space automatically once .bbt-aside is gone. */ body.learndash-cpt .bbt-aside, body.page-template-template-bbt-education-center-php .bbt-aside, body:has(.tab) .bbt-aside { display: none !important; } .separate-containers .featured-image { display: none; } .inside-article h1.entry-title { display: none; } .inside-article { padding-top: 0 !important; } form#betterdocs-searchform { max-width: 260px !important; border: 1px solid var(--bbt-gray-200) !important; border-radius: 8px !important; float: right !important; transition: border-color 0.15s ease, box-shadow 0.15s ease; } form#betterdocs-searchform:focus-within { border-color: var(--bbt-red) !important; box-shadow: 0 0 0 3px rgba(192, 32, 42, 0.12); } .betterdocs-searchform { padding-top: 9px !important; padding-right: 5px !important; padding-bottom: 9px !important; padding-left: 9px !important; } .betterdocs-searchform .betterdocs-search-field { font-size: 13px !important; padding: 0 !important; } .betterdocs-searchform svg { height: 17px !important; color: var(--bbt-gray-400); } .betterdocs-searchform svg.docs-search-icon { margin-left: 0 !important; } .ld-course-list-items.row { display: grid !important; grid-gap: 16px !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; justify-content: stretch !important; width: 100% !important; } .bbt-ec-eq-course-thumbs-container.author-cards- .ld_course_grid { display: grid !important; grid-gap: 16px !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; justify-content: stretch !important; width: 100% !important; } .caption { padding: 0 !important; display: none !important; } .ribbon { display: none; } .bbt-ec-landing-header-inner { margin-bottom: 24px !important; } .tab { margin-bottom: 24px !important; border-bottom: 1px solid var(--bbt-gray-100) !important; } /* Squares off any bordered element sitting in the tab row (the tab-cta pill, the search field) — the tabs themselves are square already. */ .tab, .tab * { border-radius: 0 !important; } .tablinks { background: transparent !important; border: none !important; font-size: 12px !important; color: var(--bbt-gray-500) !important; font-weight: 600 !important; letter-spacing: 0 !important; cursor: pointer !important; padding: 10px 14px 12px !important; margin-right: 2px !important; transition: color 0.15s ease, border-color 0.15s ease; } .tablinks:hover { color: var(--bbt-gray-900) !important; border-bottom: 2px solid var(--bbt-gray-200) !important; padding-bottom: 10px !important; } .tablinks.active { color: var(--bbt-red) !important; border-bottom: 2px solid var(--bbt-red) !important; padding-bottom: 10px !important; } /* "Get full Access to Education" — sits at the end of the same flex tab row (pushed right by its own inline margin-left:auto), styled as a CTA pill instead of the plain underlined red link it renders as by default. */ .tab-cta { display: inline-flex !important; align-items: center; padding: 8px 16px !important; border-radius: 6px; background: var(--bbt-red) !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; text-decoration: none !important; white-space: nowrap; transition: background-color 0.15s ease; } .tab-cta:hover { background: var(--bbt-red-dark) !important; color: #fff !important; } .bbt-ec-eq-course-thumbs-container.essentials-block .ld_course_grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; grid-gap: 16px !important; } .recent-webinars .thumbnail.course { max-width: auto !important; } h3.bbt-ec-recent-course-title { position: absolute !important; color: white !important; top: 25% !important; pad: 20px !important; left: 5% !important; right: 5% !important; line-height: 33px !important; font-size: 20px !important; } .ld-course-list-items .ld_course_grid .thumbnail.course { width: 100%; } .bbt-ec-course-thumb-row { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; grid-gap: 16px !important; } .ld_course_grid img { border-radius: 8px 8px 0 0 !important; transition: transform 0.3s ease !important; } .bbt-ec-course-thumb img { border-radius: 8px 8px 0 0 !important; transition: transform 0.3s ease !important; } .thumbnail.course { border: 1px solid var(--bbt-gray-100) !important; border-radius: 8px !important; overflow: hidden !important; position: relative !important; background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .bbt-ec-course-thumb { border: 1px solid var(--bbt-gray-100); border-radius: 8px; overflow: hidden; position: relative; background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .bbt-ec-course-thumb:hover, .thumbnail.course:hover { transform: none !important; border-color: #d1d5db !important; box-shadow: 0 12px 24px rgba(17, 24, 39, 0.12) !important; } .bbt-ec-course-thumb:hover img, .thumbnail.course:hover img { transform: scale(1.04) !important; } .ld_course_grid a:hover, .bbt-ec-course-thumb-row a:hover { color: var(--bbt-red) !important; } /* ------------------------------------- FOOTER NOTE BLOCK */ h3.bbt-info-block-title { display: flex !important; align-items: center !important; grid-gap: 10px !important; margin-bottom: 12px !important; } ul.bbt-info-block-list { list-style-position: outside !important; margin-left: 21px !important; } ul.bbt-info-block-list li { font-size: 14px !important; color: #666 !important; } @media (max-width: 2000px) { .ld-course-list-items.row, .d-flex-left-wrap { width: 100% !important; } } @media (max-width: 789px) { .ld-course-list-items .ld_course_grid .thumbnail.course { width: 100% !important; } } /* ------------------------------- ACCORDION */ .accordion-item { border: 1px solid #ddd; margin-bottom: 10px; border-radius: 8px; overflow: hidden; } .accordion-header { background-color: white; padding: 20px; cursor: pointer; display: flex; align-items: center; font-size: 17px !important; font-weight: 600; color: #1c4734; justify-content: space-between; } .accordion-header div { display: flex; align-items: center; grid-gap: 15px; } .accordion-content { padding: 0 20px 20px 20px; background: white; display: none; } /* Show content when accordion-header is active */ .accordion-item.active .accordion-content { display: block; } .accordion-header::after { content: "+"; display: inline-block; width: 1rem; text-align: center; margin-right: 0.5rem; transform: rotate(0deg); color: #999; transition: transform 0.3s ease-in-out; } .accordion-item.active .accordion-header::after { transform: rotate(45deg); } .bbt-replay-practice-container .accordion-header::after { float: right; } .bbt-replay-practice-mod-container { display: flex; align-items: center; grid-gap: 20px; } .bbt-replay-practice-mod-container p { padding-bottom: 0; } /* ----------------------------- REPLAY PAGE -----------------------------------*/ /* -------------------------------------------------------------------- MODAL */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; } .modal-content { background-color: #fff; padding: 32px; border-radius: 8px; width: 32vw; } .modal-content table thead { background-color: #f7f7f7; border-radius: 8px 8px 0 0; } .modal-content table th { border: 0; padding: 10px 20px; text-align: left; } .modal-content table td { padding: 10px 20px; text-align: left; font-size: 14px; } .modal-content tr:nth-child(even) { background-color: #f7f7f7; } .close { cursor: pointer; font-size: 25px; color: #999; } .modal-top { display: flex; justify-content: space-between; align-items: center; grid-gap: 20px; margin-bottom: 20px; } .modal-top h2 { font-size: 20px; } table.bbt-replay-table { font-size: 12px; border: 1px solid #ddd; border-radius: 20px; border-collapse: separate; width: 100%; margin-bottom: 20px; overflow: hidden; } a.bbt-replay-tt-btn { font-size: 14px; } .bbt-modal-replay-link { margin-top: 20px; } /* ------------------------------------------------------------ REPLAY */ .tradebook-practice .bbt-replay-center-dropdown { display: none; } .bbt-dash-replay-container { background: white; padding: 20px; border-radius: 8px; border: 1px solid #dddddd; } h3.bbt-dash-replay-title { font-size: 19px !important; margin-bottom: 24px; } .bbt-dash-replay-row { display: flex; grid-gap: 50px; } h5.bbt-dash-replay-col-title { font-size: 14px !important; margin-bottom: 10px !important; } .bbt-dash-replay-col li { font-size: 14px !important; } .bbt-dash-replay-row { border-bottom: 1px solid #ddd; padding-bottom: 20px; margin-bottom: 20px; } .bbt-dash-replay-buttons-row { display: flex; grid-gap: 60px; } .dash-replay-title { display: flex; grid-gap: 10px; align-items: center; font-size: 16px !important; } .dash-replay-button-col { display: flex; flex-direction: column; grid-gap: 9px; } a.dash-replay-button-link { font-size: 15px !important; display: flex; align-items: center; grid-gap: 8px; font-weight: 600; margin-left: 35px; } .bbt-replay-center-row.tradebook-practice { display: grid; grid-gap: 32px 22px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); justify-content: stretch; width: 100% !important; } button.bbt-replay-watch-btn { border: none; background: transparent; display: flex; align-items: center; grid-gap: 5px; font-weight: 600; letter-spacing: 0; font-size: 14px; cursor: pointer; padding: 0; } button.bbt-setup-practice-button { border: none; background: transparent; display: flex; align-items: center; grid-gap: 5px; font-weight: 200; letter-spacing: 0; font-size: 14px; cursor: pointer; color: #666; padding: 0; } .bbt-replay-center-lower { display: flex; justify-content: space-between; } img.bbt-replay-center-img { border-radius: 8px; margin-bottom: 6px; } /* Distinct from .tablinks (Education Center) — Replay page's own tab-switcher class. */ .tablinks-sim { background: transparent; border: none; font-size: 14px !important; color: #667085; font-weight: 700; letter-spacing: 0 !important; cursor: pointer; padding-bottom: 16px; margin-right: 10px; } .tablinks-sim:hover, .tablinks-sim:active { color: #991e20; border-bottom: 2px solid #991e20; padding-bottom: 14px; } .tablinks-sim.active { color: #991e20; border-bottom: 2px solid #991e20; padding-bottom: 14px; }