/* ===================================================================== llsted-brand.css · Brand v2, Direction C "Heritage Green" Bottle green · cream · brass | EB Garamond (display) + Source Sans 3 (UI) --------------------------------------------------------------------- * Loaded ONLY when the brand switch is on (layouts/default.blade.php): ?brand=v2 preview (session) or frontend_settings.brand_v2 = 1. * Every rule is scoped to html.brand-v2, so the file is inert without the class even if it were linked by mistake. * No gradients. Minimum visible text 12px. Fonts are self-hosted. * Data colours (up / down / score bands) are deliberately NOT the brand green: up = leaf green #3F6F00 (hue 125, L 42) vs brand #123B2C (hue 165, L 22), dE2000 = 24.6; amber = burnt orange; red = crimson. * Footer legal bar: colours only, wording untouched. v1 2026-10-08 ===================================================================== */ /* ---------- 0. Self-hosted fonts (SIL OFL 1.1, latin subset) ---------- */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/llsted/eb-garamond-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/llsted/eb-garamond-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('../fonts/llsted/eb-garamond-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('../fonts/llsted/eb-garamond-latin-400-italic.woff2') format('woff2'); } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 300 400; font-display: swap; src: url('../fonts/llsted/source-sans-3-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/llsted/source-sans-3-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/llsted/source-sans-3-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700 900; font-display: swap; src: url('../fonts/llsted/source-sans-3-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 300 900; font-display: swap; src: url('../fonts/llsted/source-sans-3-latin-400-italic.woff2') format('woff2'); } /* ---------- 1. Tokens ---------- */ html.brand-v2 { --primary: #123B2C; /* bottle green: actions, masthead rule, footer */ --primary-hover: #1B4D3A; --on-primary: #FFFDF8; --accent: #A07C3B; /* brass: hairlines, active tab rule (UI only, not text) */ --accent-text: #765A26; /* brass, text-safe */ --bg: #F7F3EA; /* cream page */ --surface: #FFFDF8; /* card */ --surface-alt: #F0EADC; --text: #1C211E; --muted: #545B56; --border: #E2DCCD; --border-strong: #CBC2AD; --control-border: #948B79; /* inputs/checkboxes: 3.3:1 on card, 3.0:1 on page (WCAG 1.4.11) */ --link: #123B2C; /* data colours: kept away from the brand green */ --pos: #3F6F00; --pos-bg: #EEF3E0; --pos-line: #B9CC92; --neg: #A12A2A; --neg-bg: #F8E8E5; --neg-line: #E2B4AD; --warn: #9A4D00; --warn-bg: #F8EADB; --warn-line: #E2C09A; --none: #545B56; --none-bg: #EDEAE2; --footer: #123B2C; --footer-text: #EFEADF; --footer-muted: #C3CCC2; --legal: #0C2B20; --footer-btn: #C9A66B; --footer-btn-text: #0C2B20; --track: #E7E0D0; --bar: #123B2C; --focus: #123B2C; --radius: 3px; /* buttons, inputs, chips, badges */ --radius-lg: 4px; /* cards, panels, dropdowns */ --shadow-pop: 0 8px 24px rgba(18,59,44,.10); --font-head: 'EB Garamond', Georgia, 'Times New Roman', serif; --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --primary-color: #123B2C; /* theme variable used by some inline buttons */ font-size: 100% !important; /* theme sets 62.5%: every rem-based size rendered at 6–9px */ } /* ---------- 2. Foundations ---------- */ html.brand-v2 body { font-family: var(--font-body) !important; font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg) !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1; } html.brand-v2 body *:not(i):not(.fa):not([class*="fa-"]):not([class^="fi-"]):not([class*=" fi-"]):not([class^="fi "]):not(.fi):not(code):not(pre) { font-family: inherit; } html.brand-v2 section, html.brand-v2 .breadcum-area, html.brand-v2 main { background-color: transparent; } html.brand-v2 h1, html.brand-v2 h2, html.brand-v2 h3, html.brand-v2 h4, html.brand-v2 .g-title, html.brand-v2 .bundle-details-title, html.brand-v2 .entry-title h3 { font-family: var(--font-head) !important; color: var(--text) !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.2; } html.brand-v2 h5, html.brand-v2 h6 { font-family: var(--font-body) !important; color: var(--text); font-weight: 600; letter-spacing: 0; } html.brand-v2 a { color: var(--link); } html.brand-v2 a:hover { color: var(--primary-hover); } html.brand-v2 .text-muted, html.brand-v2 .text-secondary { color: var(--muted) !important; } html.brand-v2 .text-dark { color: var(--text) !important; } html.brand-v2 small, html.brand-v2 .small { font-size: 13.5px !important; } html.brand-v2 .text-12 { font-size: 13px !important; } html.brand-v2 ::selection { background: rgba(160,124,59,.28); } html.brand-v2 :focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 2px; } /* tabular, lining figures wherever prices / scores / counts appear */ html.brand-v2 .live-price-num, html.brand-v2 .live-price-change, html.brand-v2 .market-meta, html.brand-v2 .score-num, html.brand-v2 .sift-card .fw-bold, html.brand-v2 .llp-sift, html.brand-v2 .llb-meta, html.brand-v2 .llb-meta strong, html.brand-v2 .llp-card strong, html.brand-v2 .ps-side-feature strong, html.brand-v2 .table, html.brand-v2 .fs-5, html.brand-v2 .price, html.brand-v2 .showing-text, html.brand-v2 .cart-top-number { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "kern" 1, "lnum" 1, "tnum" 1; } /* ---------- 3. Utility bar + header ---------- */ html.brand-v2 .sub-header { background: var(--bg) !important; border-bottom: 1px solid var(--border) !important; padding: 6px 0 !important; } html.brand-v2 .sub-header, html.brand-v2 .sub-header a, html.brand-v2 .sub-header p, html.brand-v2 .sub-header span, html.brand-v2 .sub-header .nice-select, html.brand-v2 .sub-header .nice-select .current, html.brand-v2 .sub-header .form-select { font-size: 13px !important; color: var(--muted) !important; } html.brand-v2 .sub-header svg path { fill: var(--muted) !important; } html.brand-v2 .sub-header .nice-select, html.brand-v2 .sub-header .form-select { border: 0 !important; background-color: transparent !important; box-shadow: none !important; } html.brand-v2 .sub-header .nice-select .list li { font-size: 13px !important; color: var(--text) !important; } html.brand-v2 .header-area { background: var(--surface) !important; border-top: 3px solid var(--primary) !important; border-bottom: 1px solid var(--accent) !important; box-shadow: none !important; } html.brand-v2 .header-area.sticky, html.brand-v2 .header-area.fixed-top { background: var(--surface) !important; } html.brand-v2 .primary-menu > li > a, html.brand-v2 .main-menu-ul > li > a { color: var(--text) !important; font-weight: 500 !important; font-size: 15px !important; } html.brand-v2 .primary-menu > li > a:hover, html.brand-v2 .primary-menu > li > a.active, html.brand-v2 .main-menu-ul > li > a.active { color: var(--primary) !important; } html.brand-v2 .primary-menu .have-mega-menu .menu-parent-a::after, html.brand-v2 .primary-menu .have-mega-menu .menu-parent-a:hover::after, html.brand-v2 .primary-menu .have-mega-menu.active .menu-parent-a::after, html.brand-v2 .primary-menu .have-mega-menu .menu-parent-a.active::after { background: transparent !important; background-image: none !important; border-top-color: var(--muted) !important; border-left-color: transparent !important; border-right-color: transparent !important; border-bottom: 0 !important; border-width: 5px !important; border-radius: 0 !important; } html.brand-v2 .mega-dropdown-menu, html.brand-v2 .dropdown-menu { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-pop) !important; border-radius: var(--radius-lg) !important; } html.brand-v2 .mega-dropdown-menu a, html.brand-v2 .mega-dropdown-menu li, html.brand-v2 .mega-menu-items a, html.brand-v2 .dropdown-menu a, html.brand-v2 .dropdown-item { font-size: 14px !important; color: var(--text) !important; } html.brand-v2 .mega-dropdown-menu a, html.brand-v2 .mega-menu-items a { border-radius: var(--radius) !important; } html.brand-v2 .mega-dropdown-menu a:hover, html.brand-v2 .dropdown-item:hover { color: var(--primary) !important; background: var(--surface-alt) !important; } html.brand-v2 .mega-dropdown-menu h4, html.brand-v2 .mega-dropdown-menu h5, html.brand-v2 .mega-dropdown-menu .title { font-family: var(--font-body) !important; font-size: 12px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) !important; } html.brand-v2 .Esearch_entry .form-control, html.brand-v2 .floating-searchbar .form-control { background: var(--bg) !important; border: 1px solid var(--control-border) !important; border-radius: var(--radius) !important; height: 40px; font-size: 14.5px !important; color: var(--text) !important; box-shadow: none !important; } html.brand-v2 .Esearch_entry .form-control::placeholder, html.brand-v2 .floating-searchbar .form-control::placeholder { color: var(--muted) !important; opacity: 1; } html.brand-v2 .Esearch_entry button, html.brand-v2 .Esearch_entry button i, html.brand-v2 .floating-searchbar i { color: var(--muted) !important; background: transparent !important; } html.brand-v2 .cart-top-number, html.brand-v2 .wishlist-top-number, html.brand-v2 .badge.rounded-pill.bg-danger { background: var(--primary) !important; background-image: none !important; color: var(--on-primary) !important; font-size: 12px !important; min-width: 18px; height: 18px; line-height: 18px !important; padding: 0 4px !important; border-radius: 9px !important; } html.brand-v2 .primary-end svg path { fill: var(--text); } html.brand-v2 .toggle-bar, html.brand-v2 .toggle-bar i { color: var(--text) !important; } /* off-canvas (mobile) menu */ html.brand-v2 .offcanvas { background: var(--surface) !important; } html.brand-v2 .offcanvas .offcanvas-title, html.brand-v2 .off-menu a, html.brand-v2 .off-menu button, html.brand-v2 .off-menu li { font-size: 15px !important; color: var(--text) !important; } html.brand-v2 .off-menu .btn-toggle-nav a { font-size: 14px !important; } /* ---------- 4. Buttons: solid, no gradients, one radius ---------- */ html.brand-v2 .eBtn, html.brand-v2 .gradient, html.brand-v2 .eBtn.gradient, html.brand-v2 a.eBtn.gradient, html.brand-v2 .btn.gradient, html.brand-v2 .btn-primary, html.brand-v2 .llb-btn { background: var(--primary) !important; background-image: none !important; color: var(--on-primary) !important; border: 1px solid var(--primary) !important; border-radius: var(--radius) !important; box-shadow: none !important; font-family: var(--font-body) !important; font-weight: 600 !important; font-size: 15px !important; letter-spacing: .01em; line-height: 1.3 !important; padding: 10px 18px !important; min-height: 42px; text-transform: none !important; transition: background-color .15s ease, border-color .15s ease; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } html.brand-v2 .eBtn:hover, html.brand-v2 .gradient:hover, html.brand-v2 .btn-primary:hover, html.brand-v2 .llb-btn:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; color: var(--on-primary) !important; } html.brand-v2 .eBtn::before, html.brand-v2 .eBtn::after, html.brand-v2 .gradient::before, html.brand-v2 .gradient::after { background-image: none !important; } html.brand-v2 .llb-btn { width: 100%; } html.brand-v2 .llb-btn.teal { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--on-primary) !important; } html.brand-v2 .llb-btn.ghost { background: var(--surface) !important; border-color: var(--border-strong) !important; color: var(--text) !important; } html.brand-v2 .btn-outline-primary, html.brand-v2 .btn-outline-secondary, html.brand-v2 .btn-light, html.brand-v2 .btn-secondary { background: var(--surface) !important; background-image: none !important; border: 1px solid var(--border-strong) !important; color: var(--text) !important; border-radius: var(--radius) !important; font-weight: 600 !important; box-shadow: none !important; } html.brand-v2 .btn-outline-primary:hover, html.brand-v2 .btn-outline-secondary:hover { border-color: var(--primary) !important; color: var(--primary) !important; } html.brand-v2 .btn { border-radius: var(--radius) !important; font-family: var(--font-body) !important; } html.brand-v2 .btn-sm, html.brand-v2 .sift-card .btn-sm { font-size: 13.5px !important; padding: 6px 12px !important; min-height: 34px; border-radius: var(--radius) !important; } html.brand-v2 .rounded-pill.btn { border-radius: var(--radius) !important; } html.brand-v2 .sift-card .btn.text-white { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--on-primary) !important; } html.brand-v2 .gradient-border, html.brand-v2 .gradient-border2 { background: none !important; background-image: none !important; padding: 0 !important; border-radius: var(--radius) !important; display: inline-block; } html.brand-v2 .gradient-border-btn { background: transparent !important; background-image: none !important; border: 1px solid var(--footer-muted) !important; border-radius: var(--radius) !important; color: var(--footer-text) !important; font-weight: 600 !important; font-size: 15px !important; padding: 10px 18px !important; display: inline-flex; align-items: center; } html.brand-v2 .gradient-border-btn:hover { border-color: var(--footer-text) !important; color: #FFFFFF !important; } html.brand-v2 .gradient-border-btn::before, html.brand-v2 .gradient-border-btn::after { display: none !important; } /* ---------- 5. Bands: remove lilac gradients ---------- */ html.brand-v2 .breadcum-area, html.brand-v2 .profile-banner-area, html.brand-v2 .breadcum-area.style-2 { background: var(--bg) !important; background-image: none !important; } html.brand-v2 .breadcum-area::before, html.brand-v2 .breadcum-area::after, html.brand-v2 .profile-banner-area::after, html.brand-v2 .profile-banner-area::before { display: none !important; background: none !important; } html.brand-v2 .breadcrumb, html.brand-v2 .breadcrumb a, html.brand-v2 .breadcrumb-item { font-size: 14px !important; color: var(--muted) !important; } html.brand-v2 .breadcrumb-item.active { color: var(--text) !important; } html.brand-v2 .breadcrumb-item + .breadcrumb-item::before { color: var(--border-strong) !important; } html.brand-v2 .showing-text { font-size: 14px !important; color: var(--muted) !important; } /* ---------- 6. Cards, inputs, tables, pagination, tabs ---------- */ html.brand-v2 .card, html.brand-v2 .ps-box, html.brand-v2 .llp-card, html.brand-v2 .course-sideBar, html.brand-v2 .ps-sidebar, html.brand-v2 .llb-card, html.brand-v2 .widget { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: none !important; } html.brand-v2 .ps-box.shadow-none.p-0 { border: 0 !important; background: transparent !important; } html.brand-v2 .card-header.bg-light, html.brand-v2 .table-light, html.brand-v2 .table-light th { background: var(--surface-alt) !important; color: var(--muted) !important; } html.brand-v2 .table { color: var(--text); } html.brand-v2 .table > :not(caption) > * > * { border-color: var(--border) !important; background-color: transparent; } html.brand-v2 .form-control, html.brand-v2 .form-select, html.brand-v2 .nice-select { border: 1px solid var(--control-border) !important; border-radius: var(--radius) !important; box-shadow: none !important; color: var(--text) !important; background-color: var(--surface) !important; font-size: 15px !important; } html.brand-v2 .form-control::placeholder { color: var(--muted) !important; opacity: 1; } html.brand-v2 .form-control:focus, html.brand-v2 .form-select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(18,59,44,.18) !important; } html.brand-v2 .form-check-input { border-color: var(--control-border) !important; border-radius: var(--radius) !important; } html.brand-v2 .form-check-input:checked { background-color: var(--primary) !important; border-color: var(--primary) !important; } html.brand-v2 .form-check-label { font-size: 14.5px !important; color: var(--text) !important; } html.brand-v2 .page-link { border-radius: var(--radius) !important; border: 1px solid var(--border) !important; color: var(--text) !important; background: var(--surface) !important; background-image: none !important; font-size: 14px !important; box-shadow: none !important; min-width: 36px; text-align: center; } html.brand-v2 .page-item.active .page-link, html.brand-v2 .page-link.active { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--on-primary) !important; } /* tabs: homepage pills and company-page bordered tabs become underline tabs */ html.brand-v2 .nav-pills, html.brand-v2 .nav-bordered, html.brand-v2 #homeTabs { border-bottom: 1px solid var(--border) !important; gap: 4px; } html.brand-v2 .nav-pills .nav-link, html.brand-v2 .nav-bordered .nav-link, html.brand-v2 #homeTabs .nav-link { background: transparent !important; background-image: none !important; color: var(--muted) !important; border: 0 !important; border-radius: 0 !important; border-bottom: 2px solid transparent !important; margin: 0 0 -1px 0 !important; padding: 12px 14px !important; font-weight: 600 !important; font-size: 15.5px !important; box-shadow: none !important; } html.brand-v2 .nav-pills .nav-link.active, html.brand-v2 .nav-pills .show > .nav-link, html.brand-v2 .nav-bordered .nav-link.active, html.brand-v2 #homeTabs .nav-link.active { color: var(--text) !important; border-bottom-color: var(--accent) !important; background: transparent !important; } html.brand-v2 .nav-pills .nav-link:hover { color: var(--primary) !important; } /* empty / logged-out prompts (homepage "Please log in…") */ html.brand-v2 .tab-content .text-center.py-5 p, html.brand-v2 .tab-content .text-center p { font-size: 16px !important; color: var(--muted) !important; } /* ---------- 7. Course cards (companies list + homepage featured), restyle only ---------- */ html.brand-v2 .Ecard, html.brand-v2 .eBar-card { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: none !important; overflow: hidden; } html.brand-v2 .Ecard:hover { border-color: var(--border-strong) !important; transform: none !important; box-shadow: var(--shadow-pop) !important; } html.brand-v2 .Ecard .courses-img { border-radius: 0 !important; background: var(--surface) !important; } html.brand-v2 .Ecard .courses-img::before, html.brand-v2 .Ecard .courses-img::after, html.brand-v2 .Ecard .cText::before { background-image: none !important; background: transparent !important; } html.brand-v2 .Ecard .entry-title h3, html.brand-v2 .Ecard .entry-title a, html.brand-v2 .Ecard h3 { font-family: var(--font-head) !important; font-size: 19px !important; line-height: 1.25 !important; color: var(--text) !important; } html.brand-v2 .Ecard p, html.brand-v2 .Ecard .description, html.brand-v2 .Ecard .info-card, html.brand-v2 .Ecard .info-card *, html.brand-v2 .Ecard .creator, html.brand-v2 .Ecard .creator * { font-size: 13.5px !important; color: var(--muted) !important; } html.brand-v2 .Ecard .learn-more, html.brand-v2 .Ecard .learn-more * { font-size: 14px !important; color: var(--link) !important; font-weight: 600 !important; } html.brand-v2 .Ecard .fa-star, html.brand-v2 .Ecard .fa-star + * { color: var(--accent-text) !important; } html.brand-v2 .Ecard .badge, html.brand-v2 .Ecard .tag, html.brand-v2 .Ecard .cat { font-size: 12px !important; border-radius: var(--radius) !important; } /* filter sidebar (/company) */ html.brand-v2 .widget-title, html.brand-v2 .widget h4, html.brand-v2 .widget .title { font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) !important; } html.brand-v2 .entry-widget, html.brand-v2 .entry-widget *, html.brand-v2 .category, html.brand-v2 .filter-item, html.brand-v2 .filter-item * { font-size: 14px !important; color: var(--text); } html.brand-v2 .entry-widget .ms-3, html.brand-v2 .category .ms-3 { color: var(--muted) !important; } html.brand-v2 .light-iconbox, html.brand-v2 .btn-toggle-list { background: var(--surface) !important; background-image: none !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; color: var(--text) !important; } html.brand-v2 .btn-toggle-list.active, html.brand-v2 .light-iconbox.active { background: var(--primary) !important; color: var(--on-primary) !important; border-color: var(--primary) !important; } /* gradient-text helper (.color = background-clip:text) and the grid/list switch */ html.brand-v2 .color, html.brand-v2 .color.gradient { background: none !important; background-image: none !important; -webkit-text-fill-color: currentColor !important; color: var(--primary) !important; border: 0 !important; padding: 0 !important; min-height: 0 !important; box-shadow: none !important; } html.brand-v2 .tab-list ul { background: transparent !important; border-radius: var(--radius) !important; } html.brand-v2 .tab-list li { border-radius: var(--radius) !important; border: 1px solid transparent; } html.brand-v2 .tab-list li.active { background: var(--surface) !important; border-color: var(--border-strong); } html.brand-v2 .tab-list a { color: var(--text) !important; font-size: 14.5px !important; font-weight: 600 !important; } html.brand-v2 .tab-list li.active a { color: var(--primary) !important; } html.brand-v2 .tab-list a svg path { fill: currentColor !important; } /* company list: card logos on a cream well with a 1px outline so white logos stay visible */ html.brand-v2 .Ecard .courses-img { background: var(--surface-alt) !important; border-bottom: 1px solid var(--border); } html.brand-v2 .Ecard .courses-img img[style] { background: transparent !important; filter: drop-shadow(0 0 1px rgba(28,33,30,.75)); } /* filter sidebar */ html.brand-v2 .sidebar { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: none !important; } html.brand-v2 .sidebar .widget { border: 0 !important; background: transparent !important; } html.brand-v2 .sidebar > .row span { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } html.brand-v2 .sidebar .search .submit, html.brand-v2 .sidebar .search .submit i { background: transparent !important; color: var(--muted) !important; } html.brand-v2 .sidebar .category a { gap: 12px; color: var(--text) !important; } html.brand-v2 .sidebar .category a span, html.brand-v2 .sidebar .category a span:first-child { font-size: 13px !important; letter-spacing: .02em; line-height: 1.35; } html.brand-v2 .sidebar .category a span:last-child { color: var(--muted) !important; font-variant-numeric: tabular-nums; flex: 0 0 auto; } html.brand-v2 .sidebar .category.active a, html.brand-v2 .sidebar .category a:hover { color: var(--primary) !important; } html.brand-v2 .overlay-content p:has(> .overlay-action) { background: var(--surface) !important; background-image: none !important; border-top: 1px solid var(--border); padding-top: 6px; } html.brand-v2 .overlay-action { font-size: 13.5px !important; font-weight: 600; color: var(--link) !important; } html.brand-v2 .overlay-content.show-more::before, html.brand-v2 .overlay-content.show-more::after, html.brand-v2 .overlay-content::after { background: none !important; background-image: none !important; } html.brand-v2 .eNtery-item .text-end a, html.brand-v2 .sidebar a.text-14, html.brand-v2 .show-more-btn, html.brand-v2 [onclick*="show"] { font-size: 13.5px !important; } /* ---------- 8. Score badges, verdicts, up/down (data colours) ---------- */ html.brand-v2 .llp-sift { display: inline-flex !important; align-items: center; justify-content: center; min-width: 42px; height: 28px; padding: 0 8px !important; border-radius: var(--radius) !important; font-weight: 700 !important; font-size: 14px !important; border: 1px solid transparent; background-image: none !important; } html.brand-v2 .llp-sift.green { background: var(--pos-bg) !important; color: var(--pos) !important; border-color: var(--pos-line) !important; } html.brand-v2 .llp-sift.amber { background: var(--warn-bg) !important; color: var(--warn) !important; border-color: var(--warn-line) !important; } html.brand-v2 .llp-sift.red { background: var(--neg-bg) !important; color: var(--neg) !important; border-color: var(--neg-line) !important; } html.brand-v2 .llp-sift.none { background: var(--none-bg) !important; color: var(--none) !important; border-color: var(--border-strong) !important; } html.brand-v2 .llp-verdict, html.brand-v2 .munger-verdict-badge { display: inline-flex !important; align-items: center; height: 24px; background: transparent !important; border: 1px solid currentColor !important; border-radius: var(--radius) !important; padding: 0 8px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; line-height: 1 !important; } html.brand-v2 .llp-verdict.buy { color: var(--pos) !important; } html.brand-v2 .llp-verdict.hold { color: var(--warn) !important; } html.brand-v2 .llp-verdict.avoid, html.brand-v2 .llp-verdict.sell { color: var(--neg) !important; } html.brand-v2 .llp-verdict.other { color: var(--muted) !important; } html.brand-v2 .llp-up, html.brand-v2 .llb-have { color: var(--pos) !important; font-weight: 600; } html.brand-v2 .llp-down { color: var(--neg) !important; font-weight: 600; } html.brand-v2 .llp-na { color: var(--muted) !important; } /* ---------- 9. Company page ---------- */ html.brand-v2 .course-details .g-title, html.brand-v2 .breadcum-area .g-title { font-size: 40px !important; margin: 6px 0 10px !important; } html.brand-v2 .course-details .g-text, html.brand-v2 .breadcum-area .g-text { color: var(--muted) !important; font-size: 17px !important; max-width: 62ch; } html.brand-v2 .course-details .row.row-gap-4, html.brand-v2 .course-details .row.row-gap-4 * { font-size: 14px !important; color: var(--muted); } html.brand-v2 .company-header-strip { background: var(--surface) !important; border: 1px solid var(--border) !important; border-bottom: 0 !important; border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; padding: 18px 22px !important; } html.brand-v2 .company-logo-wrap img { width: 48px !important; height: 48px !important; border-radius: var(--radius) !important; border: 1px solid var(--border) !important; background: #FFFFFF !important; } html.brand-v2 .company-logo-placeholder { background: var(--primary) !important; color: var(--on-primary) !important; border-radius: var(--radius) !important; font-size: 16px !important; } html.brand-v2 .company-header-strip .flex-grow-1 > div:first-child { font-family: var(--font-head) !important; font-size: 21px !important; font-weight: 600 !important; color: var(--text) !important; } html.brand-v2 .market-meta { font-size: 13.5px !important; color: var(--muted) !important; } html.brand-v2 .market-meta .badge.bg-dark { background: var(--surface-alt) !important; color: var(--text) !important; border: 1px solid var(--border-strong); font-size: 12px !important; font-weight: 700; letter-spacing: .06em; border-radius: var(--radius) !important; padding: 3px 6px; } html.brand-v2 .live-price-num { font-family: var(--font-head) !important; font-size: 34px !important; font-weight: 600 !important; color: var(--text) !important; } html.brand-v2 .live-price-change { background: transparent !important; padding: 2px 8px !important; border-radius: var(--radius) !important; font-size: 14.5px !important; font-weight: 700 !important; border: 1px solid transparent; } html.brand-v2 .live-price-change[style*="16a34a"] { color: var(--pos) !important; background: var(--pos-bg) !important; border-color: var(--pos-line) !important; } html.brand-v2 .live-price-change[style*="dc2626"] { color: var(--neg) !important; background: var(--neg-bg) !important; border-color: var(--neg-line) !important; } /* S.I.F.T. card: cream card, band shown by a coloured left rule + score badge (band derived from the pillar colour) */ html.brand-v2 .sift-card { --band: var(--none); --band-bg: var(--none-bg); --band-line: var(--border-strong); background: var(--surface) !important; border: 1px solid var(--border) !important; border-left: 4px solid var(--band) !important; border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important; padding: 24px 22px !important; } html.brand-v2 .sift-card:has(.fw-bold[style*="16a34a"]) { --band: var(--pos); --band-bg: var(--pos-bg); --band-line: var(--pos-line); } html.brand-v2 .sift-card:has(.fw-bold[style*="d97706"]) { --band: var(--warn); --band-bg: var(--warn-bg); --band-line: var(--warn-line); } html.brand-v2 .sift-card:has(.fw-bold[style*="dc2626"]) { --band: var(--neg); --band-bg: var(--neg-bg); --band-line: var(--neg-line); } html.brand-v2 .sift-score-circle { width: 88px !important; height: 88px !important; border-radius: var(--radius-lg) !important; border: 2px solid var(--band) !important; background: var(--band-bg) !important; color: var(--band) !important; } html.brand-v2 .sift-score-circle .score-num { font-family: var(--font-head) !important; font-size: 40px !important; font-weight: 600 !important; color: var(--band) !important; } html.brand-v2 .sift-score-circle .score-label { font-size: 12px !important; color: var(--text) !important; letter-spacing: .12em !important; font-weight: 700; } html.brand-v2 .sift-badge { background: var(--band-bg) !important; color: var(--band) !important; border: 1px solid var(--band) !important; border-radius: var(--radius) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em !important; padding: 2px 8px !important; } html.brand-v2 .sift-card h5 { font-family: var(--font-head) !important; font-size: 22px !important; font-weight: 600 !important; color: var(--text) !important; } html.brand-v2 .sift-card .small, html.brand-v2 .sift-card .small.text-muted { font-size: 14.5px !important; } html.brand-v2 .sift-card .fw-semibold.text-uppercase { font-size: 12px !important; letter-spacing: .12em !important; color: var(--muted) !important; } html.brand-v2 .sift-card .d-flex.small { font-size: 15px !important; color: var(--text); } html.brand-v2 .sift-card .d-flex.small .fw-bold { font-size: 15px !important; } html.brand-v2 .sift-card .d-flex.small .fw-bold[style] { color: var(--band) !important; } html.brand-v2 .sift-pillar-bar { height: 6px !important; background: var(--track) !important; border-radius: var(--radius) !important; } html.brand-v2 .sift-pillar-bar-fill { background: var(--band) !important; background-image: none !important; border-radius: var(--radius) !important; } html.brand-v2 .pillar-explanation { font-style: normal !important; font-size: 13.5px !important; color: var(--muted) !important; line-height: 1.45; margin-top: 6px !important; } /* Munger box: was slate with mint / pink text; now a cream card */ html.brand-v2 .munger-card { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; padding: 20px 22px !important; } html.brand-v2 .munger-card .fw-bold, html.brand-v2 .munger-card .fw-bold[style] { color: var(--text) !important; font-size: 15px !important; } html.brand-v2 .munger-card p, html.brand-v2 .munger-card p[style] { color: var(--text) !important; font-size: 15.5px !important; line-height: 1.6; } html.brand-v2 .munger-card .small, html.brand-v2 .munger-card .small[style] { font-size: 14.5px !important; color: var(--text) !important; line-height: 1.55; } html.brand-v2 .munger-card .small[style*="475569"] { color: var(--muted) !important; } html.brand-v2 .munger-card .small strong { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-right: 4px; } html.brand-v2 .munger-card .small[style*="86efac"] strong { color: var(--pos) !important; } html.brand-v2 .munger-card .small[style*="fca5a5"] strong { color: var(--neg) !important; } html.brand-v2 .munger-card .small[style*="fca5a5"] { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px !important; } html.brand-v2 .munger-verdict-badge { background: transparent !important; } html.brand-v2 .munger-verdict-badge[style*="16a34a"], html.brand-v2 .munger-verdict-badge[style*="22c55e"], html.brand-v2 .munger-verdict-badge[style*="dcfce7"] { color: var(--pos) !important; } html.brand-v2 .munger-verdict-badge[style*="d97706"], html.brand-v2 .munger-verdict-badge[style*="f59e0b"], html.brand-v2 .munger-verdict-badge[style*="fef3c7"], html.brand-v2 .munger-verdict-badge[style*="eab308"] { color: var(--warn) !important; } html.brand-v2 .munger-verdict-badge[style*="dc2626"], html.brand-v2 .munger-verdict-badge[style*="ef4444"], html.brand-v2 .munger-verdict-badge[style*="fee2e2"] { color: var(--neg) !important; } /* price chart frame (line colour + 12px ticks are set by llsted-brand.js) */ html.brand-v2 .chart-container { border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; background: var(--surface) !important; box-shadow: none !important; } html.brand-v2 .chart-container .fw-semibold { font-size: 15px !important; color: var(--text) !important; } html.brand-v2 .chart-tab-btn { border-radius: var(--radius) !important; border: 1px solid var(--border-strong) !important; color: var(--text) !important; font-size: 13.5px !important; padding: 4px 12px !important; background: var(--surface) !important; } html.brand-v2 .chart-tab-btn.active { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--on-primary) !important; } html.brand-v2 #chartLoading { font-size: 14px !important; } /* overview / details tabs below the chart */ html.brand-v2 .details-page-content .ps-box.static-menu { border: 1px solid var(--border) !important; padding: 8px 24px 24px !important; } html.brand-v2 #pills-overview .ps-box.border { border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; padding: 22px 0 !important; background: transparent !important; } html.brand-v2 #pills-overview .g-title, html.brand-v2 #pills-overview h5, html.brand-v2 .tab-pane h4, html.brand-v2 .tab-pane h5 { font-size: 23px !important; font-family: var(--font-head) !important; font-weight: 600 !important; } html.brand-v2 #pills-overview .description, html.brand-v2 .tab-pane .description { color: var(--text) !important; font-size: 16px !important; line-height: 1.75 !important; } html.brand-v2 #pills-overview .row.g-3 > [class*="col-"] > div { background: var(--surface) !important; border: 0 !important; border-left: 2px solid var(--border-strong) !important; border-radius: 0 !important; text-align: left !important; padding: 4px 0 4px 14px !important; } html.brand-v2 #pills-overview .row.g-3 .small { font-size: 12px !important; text-transform: uppercase; letter-spacing: .08em; color: var(--muted) !important; font-weight: 600 !important; } html.brand-v2 #pills-overview .row.g-3 .fs-5 { font-size: 24px !important; font-weight: 600 !important; color: var(--text) !important; } html.brand-v2 .accordion-item { border: 0 !important; border-bottom: 1px solid var(--border) !important; background: transparent !important; border-radius: 0 !important; } html.brand-v2 .accordion-button { border-radius: 0 !important; font-family: var(--font-body) !important; font-size: 16px !important; font-weight: 600 !important; color: var(--text) !important; background: transparent !important; box-shadow: none !important; padding: 16px 0 !important; } html.brand-v2 .accordion-body, html.brand-v2 .accordion-body * { font-size: 15px !important; color: var(--text); } /* right summary card (position unchanged; restyle only) */ html.brand-v2 .page-static-sidebar { box-shadow: none !important; } html.brand-v2 .ps-side-feature li { border-bottom: 1px solid var(--border) !important; padding: 12px 0 !important; font-size: 15px !important; color: var(--text) !important; } html.brand-v2 .ps-side-feature li span, html.brand-v2 .ps-side-feature li span p, html.brand-v2 .ps-side-feature li p { color: var(--muted) !important; font-size: 14.5px !important; } html.brand-v2 .ps-side-feature li i { color: var(--accent-text) !important; } html.brand-v2 .ps-side-feature strong { color: var(--text) !important; font-weight: 700 !important; font-size: 15px !important; } html.brand-v2 .ps-side-feature strong[style*="16a34a"] { color: var(--pos) !important; } html.brand-v2 .ps-side-feature strong[style*="d97706"] { color: var(--warn) !important; } html.brand-v2 .ps-side-feature strong[style*="dc2626"] { color: var(--neg) !important; } html.brand-v2 .ps-sidebar .btn-outline-primary { border: 0 !important; color: var(--link) !important; background: transparent !important; } /* ---------- 10. Company bundles (/course-bundle, detail) ---------- */ html.brand-v2 .llb-overlap { margin-top: 8px !important; } html.brand-v2 .breadcum-area:has(+ .llb-overlap) { padding-bottom: 28px !important; } html.brand-v2 .breadcum-area .g-title[style] { font-size: 40px !important; } html.brand-v2 .bundle-details-title { font-size: 40px !important; } html.brand-v2 .bundle-details-description, html.brand-v2 .llp-sub { color: var(--muted) !important; font-size: 16.5px !important; } html.brand-v2 .llp-card .llp-sub { font-size: 15px !important; } html.brand-v2 .llb-chip, html.brand-v2 .llb-badge { background: var(--surface-alt) !important; color: var(--text) !important; border: 1px solid var(--border-strong); border-radius: var(--radius) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em; padding: 3px 8px !important; } html.brand-v2 .llb-chip.match, html.brand-v2 .llb-badge.match { background: var(--primary) !important; color: var(--on-primary) !important; border-color: var(--primary); } html.brand-v2 .llb-badge { background: rgba(255,253,248,.96) !important; } html.brand-v2 .llb-card { color: var(--text) !important; transition: border-color .15s ease; } html.brand-v2 .llb-card:hover { transform: none !important; box-shadow: var(--shadow-pop) !important; border-color: var(--border-strong) !important; } html.brand-v2 .llb-thumb { background: var(--primary) !important; border-bottom: 1px solid var(--border); } html.brand-v2 .llb-title { font-family: var(--font-head) !important; font-size: 21px !important; font-weight: 600 !important; color: var(--text) !important; } html.brand-v2 .llb-meta, html.brand-v2 .llb-meta span, html.brand-v2 .llb-meta[style] { font-size: 14px !important; color: var(--muted) !important; } html.brand-v2 .llb-meta strong { color: var(--text) !important; } html.brand-v2 .llb-logos .co { font-size: 12.5px !important; color: var(--text) !important; } html.brand-v2 .llb-logos .llp-logo .ini, html.brand-v2 .llp-logo .ini { font-size: 12px !important; color: var(--primary) !important; } html.brand-v2 .llp-logo { border-radius: var(--radius) !important; border-color: var(--border) !important; } html.brand-v2 .llb-lg.dark .llp-logo, html.brand-v2 .llb-lg.dark .llp-logo img { background: var(--primary) !important; border-color: var(--primary) !important; } html.brand-v2 .llb-logos .llp-logo { border-radius: var(--radius) !important; } html.brand-v2 .llb-foot { border-top: 1px solid var(--border) !important; font-size: 14px !important; } html.brand-v2 .llb-foot a, html.brand-v2 .llp-view { color: var(--link) !important; font-weight: 600 !important; font-size: 14px !important; } html.brand-v2 .llb-free, html.brand-v2 .llb-free[style] { background: transparent !important; color: var(--text) !important; border: 1px solid var(--border-strong); border-radius: var(--radius) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px !important; } html.brand-v2 .llb-section { font-family: var(--font-head) !important; font-size: 22px !important; color: var(--text) !important; } html.brand-v2 .llb-row { border-bottom: 1px solid var(--border) !important; } html.brand-v2 .llp-name { color: var(--text) !important; font-weight: 600 !important; font-size: 16px !important; } html.brand-v2 .llp-name:hover { color: var(--primary) !important; } html.brand-v2 .llp-ticker { color: var(--muted) !important; font-size: 13px !important; letter-spacing: .04em !important; } html.brand-v2 .llb-note, html.brand-v2 .llb-note[style] { color: var(--muted) !important; font-size: 13px !important; } html.brand-v2 .llp-card strong { color: var(--text) !important; } html.brand-v2 .llp-empty .icon { background: var(--surface-alt) !important; background-image: none !important; } /* ---------- 11. Modals, toasts, cookie ---------- */ html.brand-v2 .modal-content { border-radius: var(--radius-lg) !important; border: 1px solid var(--border) !important; background: var(--surface) !important; } html.brand-v2 .modal-title { font-family: var(--font-head) !important; font-size: 22px !important; } html.brand-v2 .toast, html.brand-v2 .toast-header, html.brand-v2 .toast-body { font-size: 14px !important; border-radius: var(--radius-lg) !important; } html.brand-v2 .eBtn-red, html.brand-v2 .eBtn-green, html.brand-v2 .confirm-btn { font-size: 15px !important; border-radius: var(--radius) !important; background-image: none !important; } /* ---------- 12. Footer (legal-bar wording unchanged; colours only) ---------- */ html.brand-v2 .footer-area { background: var(--footer) !important; background-image: none !important; color: var(--footer-text) !important; border-top: 1px solid var(--accent) !important; } html.brand-v2 .footer-area .footer-content img { content: url('../images/llsted-brand/wordmark-cream.png'); height: 40px !important; width: auto !important; background: transparent !important; } html.brand-v2 .footer-area .description, html.brand-v2 .footer-area p { color: var(--footer-muted) !important; font-size: 15px !important; line-height: 1.6 !important; } html.brand-v2 .footer-area h4 { font-family: var(--font-body) !important; color: var(--footer-text) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase; } html.brand-v2 .footer-area li, html.brand-v2 .footer-area li a { color: var(--footer-muted) !important; font-size: 15px !important; } html.brand-v2 .footer-area li a:hover { color: #FFFFFF !important; } html.brand-v2 .footer-area .newslater-form { border: 0 !important; background: transparent !important; border-radius: var(--radius) !important; } html.brand-v2 .footer-area .newslater-form .form-control { background: transparent !important; border: 1px solid var(--footer-muted) !important; color: var(--footer-text) !important; border-radius: var(--radius) 0 0 var(--radius) !important; height: 44px; } html.brand-v2 .footer-area .newslater-form .form-control::placeholder { color: var(--footer-muted) !important; opacity: 1; } html.brand-v2 .footer-area .newslater-form .eBtn.gradient, html.brand-v2 .footer-area .newslater-form .eBtn { background: var(--footer-btn) !important; color: var(--footer-btn-text) !important; border-color: var(--footer-btn) !important; border-radius: 0 var(--radius) var(--radius) 0 !important; min-height: 44px; } html.brand-v2 .footer-area .newslater-form .eBtn:hover { background: #D8B97F !important; } html.brand-v2 .footer-area .f-socials a { color: var(--footer-text) !important; border-color: var(--footer-muted) !important; background: transparent !important; } html.brand-v2 .footer-bottom.hr-footer-bottom { background: var(--legal) !important; border-top: 1px solid rgba(195,204,194,.25); } html.brand-v2 .footer-bottom .footer-disclaimer { color: var(--footer-muted) !important; font-size: 13px !important; } html.brand-v2 .footer-bottom .hr-legal-bar, html.brand-v2 .footer-bottom .hr-legal-links { color: var(--footer-text) !important; font-size: 13.5px !important; } html.brand-v2 .footer-bottom a { color: #FFFFFF !important; } /* ---------- 13. Mobile ---------- */ @media (max-width: 576px) { html.brand-v2 .course-details .g-title, html.brand-v2 .breadcum-area .g-title, html.brand-v2 .breadcum-area .g-title[style], html.brand-v2 .bundle-details-title { font-size: 30px !important; } html.brand-v2 .live-price-num { font-size: 28px !important; } html.brand-v2 .sift-score-circle { width: 76px !important; height: 76px !important; } html.brand-v2 .sift-score-circle .score-num { font-size: 34px !important; } html.brand-v2 .company-header-strip { padding: 16px !important; } html.brand-v2 .company-header-strip .text-end, html.brand-v2 .company-header-strip .market-meta.text-end { text-align: left !important; width: 100%; } html.brand-v2 .company-header-strip .live-price-block { justify-content: flex-start !important; } html.brand-v2 .sift-card { padding: 20px 16px !important; } html.brand-v2 .details-page-content .ps-box.static-menu { padding: 4px 16px 16px !important; } html.brand-v2 .nav-pills, html.brand-v2 .nav-bordered { flex-wrap: nowrap !important; overflow-x: auto; } html.brand-v2 .nav-pills .nav-link, html.brand-v2 .nav-bordered .nav-link { white-space: nowrap; padding: 12px 8px !important; font-size: 14.5px !important; } html.brand-v2 .nav-pills.nav-justified .nav-item { flex: 1 1 auto; } html.brand-v2 .footer-area h4 { margin-top: 8px; } html.brand-v2 .breadcrumb { flex-wrap: nowrap; } html.brand-v2 .breadcrumb-item { white-space: nowrap; } html.brand-v2 .breadcrumb-item.active { overflow: hidden; text-overflow: ellipsis; min-width: 0; } } /* ---------- 14. Auth, support and error pages (2026-10-08 pm) ---------- Login, register, forgot/reset password, email verification, confirm password: the template cartoons are replaced by the bottle-green brand panel (resources/views/auth/partials/llsted-panel.blade.php). Form sits in a card; at <768px the form comes first and the panel becomes a compact band below it. Also: legal/FAQ/About breadcrumb band (white text on cream), contact page, 404/500. */ html.brand-v2 .login-area.llsted-auth { margin-top: 0 !important; padding: 56px 0 88px; } html.brand-v2 .llsted-auth > .container > .row { align-items: stretch; } html.brand-v2 .llsted-auth .llsted-panel-col { display: flex; } html.brand-v2 .llsted-auth .login-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px 36px 32px; margin-top: 0 !important; height: 100%; } html.brand-v2 .llsted-auth .global-form .g-title { font-size: 36px !important; line-height: 1.15 !important; margin-bottom: 8px !important; } html.brand-v2 .llsted-auth .global-form .description { color: var(--muted) !important; font-size: 16px !important; line-height: 1.55 !important; margin-bottom: 26px !important; } html.brand-v2 .llsted-auth .form-label, html.brand-v2 .contact-left .form-label { color: var(--text) !important; font-weight: 600 !important; font-size: 15px !important; line-height: 1.4 !important; margin-bottom: 6px !important; } html.brand-v2 .llsted-auth .form-group { margin-bottom: 18px; } html.brand-v2 .llsted-auth .global-form .form-control { height: 46px; } html.brand-v2 .llsted-auth .login-form p { color: var(--text); font-size: 15px; } html.brand-v2 .llsted-auth .login-form a:not(.eBtn), html.brand-v2 .llsted-error__link { color: var(--primary) !important; font-weight: 600 !important; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } html.brand-v2 .llsted-auth .login-form a:not(.eBtn):hover, html.brand-v2 .llsted-error__link:hover { color: var(--primary-hover) !important; text-decoration-color: var(--primary-hover); } html.brand-v2 .llsted-auth .login-form .eBtn { width: 100%; min-height: 46px; } html.brand-v2 .llsted-auth .text-danger, html.brand-v2 .llsted-auth small { font-size: 13px !important; } html.brand-v2 .llsted-auth .text-danger { color: var(--neg) !important; } html.brand-v2 .llsted-auth .text-success { color: var(--pos) !important; } /* brand panel: bottle green, cream wordmark, brass hairline frame and rule (no images of people, no gradients) */ html.brand-v2 .llsted-panel { display: flex; width: 100%; background: var(--primary); color: var(--footer-text); border-radius: var(--radius-lg); padding: 12px; } html.brand-v2 .llsted-panel__inner { display: flex; flex-direction: column; align-items: flex-start; width: 100%; border: 1px solid rgba(201,166,107,.5); border-radius: 2px; padding: 44px 48px 34px; } html.brand-v2 .llsted-panel__mark { height: 40px !important; width: auto !important; margin: 0 0 40px; } html.brand-v2 .llsted-panel__eyebrow { margin: auto 0 10px !important; color: var(--footer-btn) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3 !important; } html.brand-v2 .llsted-panel__title { margin: 0 !important; font-family: var(--font-head) !important; font-weight: 500 !important; font-size: 40px !important; line-height: 1.12 !important; color: var(--on-primary) !important; max-width: 16ch; } html.brand-v2 .llsted-panel__rule { display: block; width: 56px; height: 2px; background: var(--footer-btn); margin: 22px 0 18px; } html.brand-v2 .llsted-panel__list { list-style: none !important; margin: 0 !important; padding: 0 !important; width: 100%; max-width: 46ch; } html.brand-v2 .llsted-panel__list li { list-style: none !important; padding: 12px 0 !important; border-top: 1px solid rgba(239,234,223,.16); } html.brand-v2 .llsted-panel__list li:first-child { border-top: 0; padding-top: 0 !important; } html.brand-v2 .llsted-panel__label { display: block; color: var(--on-primary) !important; font-weight: 600 !important; font-size: 16px !important; line-height: 1.4; } html.brand-v2 a.llsted-panel__label { color: var(--on-primary) !important; text-decoration: underline; text-underline-offset: 3px; } html.brand-v2 .llsted-panel__text { display: block; color: var(--footer-muted) !important; font-size: 15px !important; line-height: 1.5; } html.brand-v2 .llsted-panel__note { margin: 26px 0 0 !important; color: var(--footer-muted) !important; font-size: 13px !important; line-height: 1.4 !important; } html.brand-v2 .llsted-panel--error .llsted-panel__inner { min-height: 340px; } html.brand-v2 .llsted-panel__code { margin: auto 0 0 !important; font-family: var(--font-head) !important; font-weight: 500 !important; font-size: 112px !important; line-height: 1 !important; color: var(--on-primary) !important; letter-spacing: .02em; } html.brand-v2 .llsted-panel__caption { margin: 0 !important; color: var(--footer-text) !important; font-size: 17px !important; } /* 404 / 500 */ html.brand-v2 .llsted-error .g-title { font-size: 40px !important; margin-top: 0 !important; margin-bottom: 14px !important; } html.brand-v2 .llsted-error .g-text { color: var(--muted) !important; font-size: 17px !important; line-height: 1.6; max-width: 52ch; } html.brand-v2 .llsted-error__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; } /* Legal / FAQ / About breadcrumb band (theme had white text on a lilac image; the image is gone in v2) */ html.brand-v2 section.py-56[data-background] { background: var(--bg) !important; background-image: none !important; padding: 36px 0 4px !important; } html.brand-v2 section.py-56[data-background] ul { column-gap: 8px !important; padding-bottom: 6px !important; margin: 0; } html.brand-v2 section.py-56[data-background] p.text-white { color: var(--muted) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.4 !important; } html.brand-v2 section.py-56[data-background] li img { filter: brightness(0); opacity: .55; width: 14px; height: 14px; } html.brand-v2 section.py-56[data-background] h4 { font-size: 40px !important; line-height: 1.15 !important; color: var(--text) !important; margin: 0 0 6px !important; } /* Contact page */ html.brand-v2 .llsted-contact .showing-text { color: var(--muted) !important; font-size: 16px !important; } html.brand-v2 .contact-card { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: none !important; padding: 28px 24px !important; } html.brand-v2 .contact-icon { display: inline-flex !important; align-items: center; justify-content: center; width: 52px !important; height: 52px !important; line-height: normal !important; color: var(--primary); background: var(--surface-alt); border: 1px solid var(--border-strong) !important; border-radius: var(--radius-lg) !important; } html.brand-v2 .contact-card .g-title { font-size: 22px !important; margin-bottom: 8px !important; } html.brand-v2 .contact-card p { color: var(--muted) !important; font-size: 14.5px !important; font-weight: 400 !important; line-height: 1.5 !important; margin-bottom: 2px; } html.brand-v2 .contact-card span { color: var(--text) !important; font-size: 15px; } html.brand-v2 .contact-card a { color: var(--primary) !important; font-weight: 600 !important; font-size: 15px !important; } html.brand-v2 .conatact-map iframe { border-radius: var(--radius-lg) !important; border: 1px solid var(--border) !important; } html.brand-v2 .contact-left .g-title { font-size: 28px !important; } html.brand-v2 .contact-left button, html.brand-v2 .contact-left button.g-recaptcha { background: var(--primary) !important; background-image: none !important; color: var(--on-primary) !important; border: 1px solid var(--primary) !important; border-radius: var(--radius) !important; font-weight: 600 !important; font-size: 15px !important; line-height: 1.3 !important; padding: 11px 24px !important; min-height: 44px; box-shadow: none !important; } html.brand-v2 .contact-left button:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; } @media (max-width: 991px) { html.brand-v2 .llsted-panel__inner { padding: 32px 28px 26px; } html.brand-v2 .llsted-panel__title { font-size: 32px !important; } html.brand-v2 .llsted-auth .login-form { padding: 32px 24px 26px; } } @media (max-width: 767px) { /* form first, panel collapses to a compact band below it */ html.brand-v2 .login-area.llsted-auth { padding: 24px 0 48px; } html.brand-v2 .llsted-auth > .container > .row > .llsted-panel-col, html.brand-v2 .llsted-error .row > .llsted-panel-col { order: 2; margin-top: 28px; } html.brand-v2 .llsted-auth > .container > .row > :not(.llsted-panel-col), html.brand-v2 .llsted-error .row > :not(.llsted-panel-col) { order: 1; } html.brand-v2 .llsted-auth .login-form { padding: 26px 20px 22px; height: auto; } html.brand-v2 .llsted-auth .global-form .g-title { font-size: 30px !important; } html.brand-v2 .llsted-panel { padding: 8px; } html.brand-v2 .llsted-panel__inner { padding: 22px 20px 20px; } html.brand-v2 .llsted-panel__mark { height: 30px !important; margin-bottom: 18px; } html.brand-v2 .llsted-panel__eyebrow { margin-top: 0 !important; } html.brand-v2 .llsted-panel__title { font-size: 26px !important; max-width: none; } html.brand-v2 .llsted-panel__rule { margin: 14px 0 12px; width: 44px; } html.brand-v2 .llsted-panel__list li { padding: 7px 0 !important; } html.brand-v2 .llsted-panel__text { display: none; } html.brand-v2 .llsted-panel__label { font-size: 15px !important; font-weight: 500 !important; } html.brand-v2 .llsted-panel__note { margin-top: 14px !important; } html.brand-v2 .llsted-panel--error .llsted-panel__inner { min-height: 0; } html.brand-v2 .llsted-panel__code { font-size: 64px !important; margin-top: 0 !important; } html.brand-v2 .llsted-error .g-title, html.brand-v2 section.py-56[data-background] h4 { font-size: 30px !important; } html.brand-v2 .llsted-error { padding-bottom: 56px !important; } html.brand-v2 .conatact-map iframe { height: 320px !important; } } /* 14b. register spacing + contact panel (replaces the Google Maps embed when v2 is on) */ html.brand-v2 .llsted-auth .form-group.mb-5 { margin-bottom: 18px !important; } html.brand-v2 .llsted-contact-row { align-items: stretch; } html.brand-v2 .llsted-contact-row .llsted-panel-col { display: flex; } html.brand-v2 .llsted-contact-row .contact-left { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 36px 32px; height: 100%; } @media (max-width: 991px) { html.brand-v2 .llsted-contact-row > .llsted-panel-col { order: 2; margin-top: 28px; } html.brand-v2 .llsted-contact-row > :not(.llsted-panel-col) { order: 1; } } @media (max-width: 767px) { html.brand-v2 .llsted-contact-row .contact-left { padding: 26px 20px 22px; } } html.brand-v2 .llsted-panel--contact .llsted-panel__eyebrow { margin-top: 0 !important; } html.brand-v2 .llsted-panel--contact .llsted-panel__note { margin-top: auto !important; padding-top: 26px; } /* FAQ: the in-page h1 sits under the band title, so it reads as a subheading */ html.brand-v2 section.py-56[data-background] + section h1.title { font-size: 26px !important; line-height: 1.25 !important; margin: 10px 0 8px !important; } html.brand-v2 section.py-56[data-background] + section p.info { color: var(--muted) !important; font-size: 16px !important; } @media (max-width: 767px) { html.brand-v2 .llsted-panel--contact .llsted-panel__note { padding-top: 14px; margin-top: 0 !important; } } html.brand-v2 .llsted-contact-row .contact-left { margin-top: 0 !important; } @media (max-width: 991px) { html.brand-v2 .llsted-contact-row .contact-left { margin-left: 0 !important; } } /* ---------- 15. Signed-in pages (2026-10-08 evening) ---------- Portfolio, Snapshot Journals, AI Mentor, Company Bundles, Profile, Watchlist, Message, Support tickets, the account sidebar and the header user menu. Shared empty state: resources/views/frontend/default/empty.blade.php. Initials avatar: resources/views/frontend/default/partials/llsted-avatar.blade.php. */ /* theme variables: the template blue (#2f57ef) and its slate text become brand colours everywhere they leak through */ html.brand-v2 { --color-1: #123B2C; --color-2: #1C211E; --text-color: #545B56; } /* account sidebar */ html.brand-v2 .course-sideBar .profile-info .email { color: var(--muted) !important; text-transform: none !important; font-size: 14px !important; letter-spacing: 0 !important; } html.brand-v2 .course-sideBar .profile-info .name { font-family: var(--font-head) !important; font-size: 21px !important; color: var(--text) !important; } html.brand-v2 .course-sideBar .profile-info .llsted-avatar.photo { font-family: var(--font-head) !important; font-size: 36px !important; border: 1px solid var(--accent) !important; } html.brand-v2 .couses-tab-list li a { color: var(--text) !important; font-size: 15px !important; font-weight: 500 !important; } html.brand-v2 .couses-tab-list li a svg path[fill], html.brand-v2 .couses-tab-list li a svg[fill]:not([fill="none"]) { fill: var(--muted) !important; } html.brand-v2 .couses-tab-list li a svg[stroke] { stroke: var(--muted) !important; } html.brand-v2 .couses-tab-list li a i { color: var(--muted) !important; } html.brand-v2 .couses-tab-list li.active a, html.brand-v2 .couses-tab-list li a:hover { color: var(--primary) !important; font-weight: 600 !important; } html.brand-v2 .couses-tab-list li.active a svg path[fill], html.brand-v2 .couses-tab-list li a:hover svg path[fill] { fill: var(--primary) !important; } html.brand-v2 .couses-tab-list li.active a svg[stroke], html.brand-v2 .couses-tab-list li a:hover svg[stroke] { stroke: var(--primary) !important; } html.brand-v2 .couses-tab-list li.active a i, html.brand-v2 .couses-tab-list li a:hover i { color: var(--primary) !important; } html.brand-v2 .couses-tab-list li.active { box-shadow: inset 2px 0 0 var(--accent); } html.brand-v2 .couses-tab-list li.active a { padding-left: 10px; } /* header user menu: initials avatar + menu text */ html.brand-v2 .primary-end svg path[stroke]:not([stroke="none"]) { stroke: var(--text) !important; } html.brand-v2 .Userprofile .us-btn { background: transparent !important; border: 0 !important; display: inline-flex; align-items: center; gap: 4px; } html.brand-v2 .Userprofile .llsted-avatar, html.brand-v2 .off-menu .llsted-avatar { font-family: var(--font-body) !important; } html.brand-v2 .figure_user { align-items: center; gap: 12px; } html.brand-v2 .figure_user .figure_text h4 { font-family: var(--font-head) !important; font-size: 18px !important; margin: 0 !important; } html.brand-v2 .figure_user .figure_text p { font-size: 13.5px !important; color: var(--muted) !important; margin: 0 !important; } html.brand-v2 .dropdown-menu .dropdown-item svg path[fill] { fill: var(--muted) !important; } html.brand-v2 .dropdown-menu .dropdown-item i { color: var(--muted) !important; } /* panels used by every signed-in page */ html.brand-v2 .my-panel { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: none !important; } html.brand-v2 .eTable th, html.brand-v2 .llp-table th { font-size: 12px !important; letter-spacing: .08em !important; text-transform: uppercase; color: var(--muted) !important; font-weight: 600 !important; } html.brand-v2 .eTable td { font-size: 15px !important; color: var(--text) !important; vertical-align: middle; } /* shared empty state */ html.brand-v2 .llsted-empty { padding: 0 !important; } html.brand-v2 .llsted-empty__inner { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px 24px 44px; text-align: center; display: flex; flex-direction: column; align-items: center; } html.brand-v2 .llsted-empty__icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 18px; } html.brand-v2 .llsted-empty__icon svg { stroke: var(--primary); } html.brand-v2 .llsted-empty__title { font-family: var(--font-head) !important; font-size: 24px !important; font-weight: 600 !important; color: var(--text) !important; margin: 0 0 8px !important; } html.brand-v2 .llsted-empty__text { color: var(--muted) !important; font-size: 16px !important; max-width: 46ch; margin: 0 auto !important; } html.brand-v2 .llsted-empty__action { margin-top: 22px; } html.brand-v2 .llsted-empty__note { color: var(--muted) !important; font-size: 15px !important; margin: 14px 0 0 !important; } html.brand-v2 .llsted-empty__note a, html.brand-v2 .llsted-empty__text a { color: var(--link) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } /* callers wrap the partial in the template's white rounded box; let the partial's card stand alone */ html.brand-v2 .bg-white.radius-10:has(.llsted-empty) { background: transparent !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; } html.brand-v2 .bg-white.radius-10:has(.llsted-empty) > .com-md-12 { width: 100%; padding: 0; } html.brand-v2 .llsted-welcome-msg { padding: 32px 16px; } html.brand-v2 .llsted-welcome-msg .llsted-empty__inner { border: 0; background: transparent; padding: 24px 8px; } html.brand-v2 .llsted-welcome-msg p { font-weight: 400 !important; } html.brand-v2 .llp-empty .icon { border: 1px solid var(--border); border-radius: var(--radius-lg) !important; font-size: 0; } html.brand-v2 .llp-empty h3 { font-family: var(--font-head) !important; } /* support: list, form, ticket thread */ html.brand-v2 .llsted-support__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; } html.brand-v2 .llsted-support__head .g-title, html.brand-v2 .llsted-support__formhead .g-title { font-size: 32px !important; margin: 0 0 6px !important; } html.brand-v2 .llsted-support__intro { color: var(--muted) !important; font-size: 16px !important; margin: 0 !important; max-width: 60ch; } html.brand-v2 .llsted-support__intro a { color: var(--link) !important; font-weight: 600; } html.brand-v2 .llsted-support__formhead { margin-bottom: 26px; } html.brand-v2 .llsted-support__crumb { display: inline-block; font-size: 14px !important; font-weight: 600; color: var(--muted) !important; margin-bottom: 6px; text-decoration: none; } html.brand-v2 .llsted-support__crumb::before { content: "\2190\00a0"; } html.brand-v2 .llsted-support__crumb:hover { color: var(--primary) !important; } html.brand-v2 .llsted-support__panel { padding: 8px 24px !important; } html.brand-v2 .llsted-tickets { margin: 0 !important; } html.brand-v2 .llsted-tickets th, html.brand-v2 .llsted-tickets td { padding: 14px 12px !important; } html.brand-v2 .llsted-tickets__subject a { color: var(--text) !important; font-weight: 600; text-decoration: none; } html.brand-v2 .llsted-tickets__subject a:hover { color: var(--primary) !important; text-decoration: underline; } html.brand-v2 .llsted-tickets__prio { display: block; font-size: 13px !important; color: var(--warn) !important; font-weight: 600; margin-top: 2px; } html.brand-v2 .llsted-tickets__view { font-size: 14px !important; font-weight: 600; color: var(--link) !important; white-space: nowrap; } html.brand-v2 .llsted-tickets__view::after { content: "\00a0\2192"; } html.brand-v2 .llsted-muted { color: var(--muted) !important; font-weight: 400; } html.brand-v2 .llsted-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid; border-radius: var(--radius); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap; } html.brand-v2 .llsted-badge--open { color: var(--primary); background: #E5EDE8; border-color: #B5C9BD; } html.brand-v2 .llsted-badge--answered { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); } html.brand-v2 .llsted-badge--closed, html.brand-v2 .llsted-badge--other { color: var(--muted); background: var(--none-bg); border-color: var(--border-strong); } html.brand-v2 .llsted-ticket__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 4px 0 0 !important; color: var(--muted); font-size: 14.5px; } html.brand-v2 .llsted-ticket__meta > span:not(.llsted-badge) + span:not(.llsted-badge)::before, html.brand-v2 .llsted-ticket__meta .llsted-badge + span::before { content: none; } html.brand-v2 .llsted-support__actions { display: flex; align-items: center; gap: 18px; margin-top: 6px; } html.brand-v2 .llsted-support__cancel { font-size: 15px; font-weight: 600; color: var(--muted) !important; } html.brand-v2 .edit_profile .form-label { font-size: 14.5px !important; font-weight: 600 !important; color: var(--text) !important; } html.brand-v2 .form-select { min-height: 44px; } /* ticket + message thread */ html.brand-v2 .custome-height, html.brand-v2 .message-send-option { background: var(--bg) !important; } html.brand-v2 .custome-height { border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; } html.brand-v2 .message-send-option { border: 1px solid var(--border); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important; } html.brand-v2 .message-list li p { border-radius: var(--radius-lg) !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.5 !important; padding: 10px 14px !important; color: var(--text) !important; background: var(--surface) !important; border: 1px solid var(--border); } html.brand-v2 .message-for-me .message-list li p { background: var(--primary) !important; color: var(--on-primary) !important; border-color: var(--primary); } html.brand-v2 .fz-13-m-grayish { font-size: 13px !important; color: var(--muted) !important; } html.brand-v2 .message-input { border: 1px solid var(--control-border); border-radius: var(--radius) !important; background: var(--surface) !important; } html.brand-v2 .message-input .form-control { font-size: 15px !important; color: var(--text) !important; border: 0 !important; background: transparent !important; } html.brand-v2 .message-input .form-control:focus { box-shadow: none !important; } html.brand-v2 .message-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(18,59,44,.18); } html.brand-v2 .message-input .ic-control svg path { stroke: var(--muted) !important; } html.brand-v2 .send_message_btn { background: var(--primary) !important; border-radius: var(--radius) !important; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; } html.brand-v2 .send_message_btn:hover { background: var(--primary-hover) !important; } html.brand-v2 .message-left .contact { border-radius: var(--radius) !important; } html.brand-v2 .message-left .contact:hover, html.brand-v2 .message-left .contact.active { background: var(--surface-alt) !important; } html.brand-v2 .count-files { border-radius: var(--radius-lg) !important; border: 1px solid var(--border); box-shadow: var(--shadow-pop) !important; } /* investing philosopher card (portfolio + profile) */ html.brand-v2 .llsted-philo { background: var(--surface) !important; border: 1px solid var(--border) !important; border-left: 3px solid var(--accent) !important; border-radius: var(--radius-lg) !important; box-shadow: none !important; color: var(--text) !important; } html.brand-v2 .llsted-philo__eyebrow { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase; color: var(--accent-text) !important; margin: 0 0 8px !important; } html.brand-v2 .llsted-philo__quote { font-family: var(--font-head) !important; font-size: 19px !important; line-height: 1.45 !important; color: var(--text) !important; margin: 0 !important; max-width: 68ch; } html.brand-v2 .llsted-philo__meta { font-size: 14px !important; color: var(--muted) !important; margin: 10px 0 0 !important; } html.brand-v2 .llsted-philo__meta strong { color: var(--text) !important; } html.brand-v2 .llsted-philo__label { font-size: 13px !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase; color: var(--muted) !important; margin: 18px 0 8px !important; } html.brand-v2 .llsted-philo__list { padding-left: 20px; margin: 0; color: var(--text); font-size: 15.5px; } html.brand-v2 .llsted-philo__list li { list-style: disc; margin-bottom: 4px; } html.brand-v2 .llsted-philo .g-title { font-size: 26px !important; } html.brand-v2 .llsted-btn-secondary { min-height: 42px; padding: 10px 18px !important; font-size: 15px !important; display: inline-flex; align-items: center; } html.brand-v2 .llsted-btn-secondary.btn-sm { min-height: 34px; padding: 6px 12px !important; font-size: 13.5px !important; } /* portfolio leftovers (inline