/* ========================================================================== BespokeLMS Audience Personalisation — Class Convention ========================================================================== The following classes are used to map content to the respective audience cookie. DO NOT manually apply display styles to these classes outside of this engine. - audience-a-only : Shown exclusively to Staff Training visitors - audience-b-only : Shown exclusively to Course Seller visitors - audience-a-primary : Lead position/weight for Staff Training - audience-b-primary : Lead position/weight for Course Seller - audience-universal : Shown equally to both Implementation notes: The `data-audience` CSS attribute on `` is the absolute source of truth to avoid DOM manipulation flash. */ /* ── Default: all content visible ──────────────────────────────── */ /* No rules needed — everything shows by default */ /* ── Team (Staff Training) mode ────────────────────────────── */ [data-audience="team"] .audience-b-only, [data-audience="team"] [data-show-for="selling"] { display: none !important; } /* ── Selling (Course Selling) mode ──────────────────────────── */ [data-audience="selling"] .audience-a-only, [data-audience="selling"] [data-show-for="team"] { display: none !important; } /* ── All (Universal) mode ─────────────────────────────────────── */ [data-audience="all"] .audience-a-only, [data-audience="all"] .audience-b-only, [data-audience="all"] [data-show-for="team"], [data-audience="all"] [data-show-for="selling"] { display: none !important; } /* ── Smooth audience switch transition ─────────────────────────── */ html[data-audience-switching] * { transition: opacity 0.15s ease !important; } /* ────────────────────────────────────────────────────────────────── Use Case Cards & Reordering Logic ────────────────────────────────────────────────────────────────── */ .use-case-cards { display: flex; flex-wrap: wrap; gap: var(--space-4); } .use-case-card-employee { order: 1; } .use-case-card-compliance { order: 2; } .use-case-card-onboarding { order: 3; } .use-case-card-continuous { order: 4; } .use-case-card-commercial { order: 5; } /* Team audience: selling moves to last */ [data-audience="team"] .use-case-card-commercial { order: 10; } [data-audience="team"] .use-case-card-employee { order: 1; } /* Selling audience: commercial moves to first */ [data-audience="selling"] .use-case-card-commercial { order: 0; } [data-audience="selling"] .use-case-card-employee { order: 6; } [data-audience="selling"] .use-case-card-compliance { order: 7; } [data-audience="selling"] .use-case-card-onboarding { order: 8; } [data-audience="selling"] .use-case-card-continuous { order: 9; } /* ────────────────────────────────────────────────────────────────── Deprioritised visual weight ────────────────────────────────────────────────────────────────── */ [data-audience="team"] .audience-b-primary:not(.audience-a-primary) { opacity: 0.55; transition: opacity 0.2s ease; } [data-audience="team"] .audience-b-primary:not(.audience-a-primary):hover { opacity: 1; } [data-audience="selling"] .audience-a-primary:not(.audience-b-primary) { opacity: 0.55; transition: opacity 0.2s ease; } [data-audience="selling"] .audience-a-primary:not(.audience-b-primary):hover { opacity: 1; } @media (prefers-reduced-motion: reduce) { [data-audience="team"] .audience-b-primary:not(.audience-a-primary), [data-audience="selling"] .audience-a-primary:not(.audience-b-primary) { transition: none; } } /* ────────────────────────────────────────────────────────────────── Specific Component Highlights ────────────────────────────────────────────────────────────────── */ [data-audience="selling"] .pricing-feature-commerce { font-weight: 600; color: var(--color-primary); } [data-audience="selling"] .pricing-feature-commerce::before { content: "★ "; font-size: 0.75em; } .callout { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); border-left: 4px solid var(--color-primary); background: var(--surface-primary); box-shadow: var(--shadow-sm); } .callout h4 { font-size: var(--text-sm); margin-bottom: var(--space-1); color: var(--text-primary); } .callout p { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; } /* ────────────────────────────────────────────────────────────────── Copy Variants ────────────────────────────────────────────────────────────────── */ [data-audience="team"] .audience-both-only, [data-audience="team"] [data-show-for="all"], [data-audience="selling"] .audience-both-only, [data-audience="selling"] [data-show-for="all"] { display: none !important; } /* ────────────────────────────────────────────────────────────────── Audience Switcher UI (Edge Tab) ────────────────────────────────────────────────────────────────── */ .audience-edge-tab { position: fixed; bottom: 0; right: var(--space-6); z-index: var(--z-index-sticky); display: flex; align-items: center; } .edge-tab-label { display: inline-block; } .edge-tab-btn { display: flex; align-items: center; gap: var(--space-2); background: color-mix(in srgb, var(--surface-primary) 60%, transparent); border: 1px solid color-mix(in srgb, var(--border-default) 60%, transparent); border-bottom: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; color: var(--text-secondary); padding: var(--space-2) var(--space-4); font-size: var(--text-xs); font-weight: 500; cursor: pointer; transition: all 0.2s ease; box-shadow: var(--shadow-float); backdrop-filter: blur(4px); /* Add a nice blur since background is semitransparent */ } .edge-tab-btn:hover, .edge-tab-btn[aria-expanded="true"] { color: var(--text-primary); background: var(--surface-primary); border-color: var(--border-focus); box-shadow: var(--shadow-raised); transform: translateY(-2px); outline: none; } .edge-tab-dropdown { position: absolute; bottom: calc(100% + var(--space-2)); right: 0; width: 280px; background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); padding: var(--space-2); z-index: 100; display: flex; flex-direction: column; gap: var(--space-1); } .edge-tab-dropdown[hidden] { display: none; } .switcher-option { display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: transparent; border: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); cursor: pointer; transition: background 0.2s ease; } .switcher-option:hover, .switcher-option:focus { background: var(--surface-secondary); outline: none; } .switcher-option strong { font-size: var(--text-sm); color: var(--text-primary); margin-bottom: 2px; } .switcher-option span { font-size: var(--text-xs); color: var(--text-secondary); } /* ────────────────────────────────────────────────────────────────── Contextual Navigation & Banners ────────────────────────────────────────────────────────────────── */ .audience-context-banner { background: var(--surface-secondary); border-bottom: 1px solid var(--border-default); padding: var(--space-3) 0; text-align: center; font-size: var(--text-sm); color: var(--text-secondary); } .audience-context-banner a { color: var(--color-primary); font-weight: 600; text-decoration: none; } .audience-context-banner a:hover { text-decoration: underline; } /* ────────────────────────────────────────────────────────────────── Audience Modal UI ────────────────────────────────────────────────────────────────── */ .audience-modal { margin: auto; /* Required for native dialog centering */ max-width: 560px; width: 90%; border: none; border-radius: var(--radius-xl); padding: 0; background: var(--surface-primary); color: var(--text-primary); box-shadow: var(--shadow-2xl); } .audience-modal[open] { animation: modal-fade-in 0.2s ease-out forwards; } .audience-modal::backdrop { background: rgba(15, 23, 42, 0.4); /* Slate 900 */ backdrop-filter: blur(4px); animation: backdrop-fade-in 0.2s ease-out forwards; } /* Typography and Options Styling */ .audience-modal .modal-inner { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); text-align: center; position: relative; } .modal-close { position: absolute; top: var(--space-4); right: var(--space-4); background: transparent; border: none; padding: var(--space-2); color: var(--text-secondary); cursor: pointer; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; transition: all var(--duration-200) ease; } .modal-close:hover { background: var(--color-bg-subtle-hovered); color: var(--text-primary); } .audience-modal h2 { font-size: var(--text-2xl); margin-bottom: var(--space-2); color: var(--color-ink); } .audience-modal .modal-subtitle { color: var(--text-secondary); margin: 0; } .modal-options { display: flex; flex-direction: column; gap: var(--space-4); } @media (min-width: 640px) { .modal-options { flex-direction: row; } } .modal-card { flex: 1; display: flex; flex-direction: column; align-items: center; background: var(--surface-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-4); cursor: pointer; text-align: center; transition: all 0.2s ease-out; } .modal-card:hover, .modal-card:focus { background: var(--surface-primary); border-color: var(--border-focus); box-shadow: var(--shadow-raised); transform: translateY(-2px); outline: none; } .modal-card-icon { font-size: var(--text-3xl); margin-bottom: var(--space-3); } .modal-card strong { display: block; font-size: var(--text-base); margin-bottom: var(--space-2); color: var(--color-ink); } .modal-card span { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--line-height-relaxed); } .modal-skip { margin-top: var(--space-2); width: 100%; } @keyframes modal-fade-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes backdrop-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes backdrop-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes modal-collapse-to-tab { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(45vw, 45vh) scale(0.05); } } @keyframes tab-pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 184, 205, 0.4); transform: scale(1); } 50% { box-shadow: 0 0 0 12px rgba(31, 184, 205, 0); transform: scale(1.05); } 100% { box-shadow: 0 0 0 0 rgba(31, 184, 205, 0); transform: scale(1); } } .audience-modal--collapsing { animation: modal-collapse-to-tab 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; } .audience-modal--collapsing::backdrop { animation: backdrop-fade-out 0.4s ease-out forwards !important; } .edge-tab-btn--pulse { animation: tab-pulse 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; border-color: var(--color-primary) !important; background: var(--surface-primary) !important; color: var(--text-primary) !important; } @media (prefers-reduced-motion: reduce) { .audience-modal[open], .audience-modal::backdrop, .audience-modal--collapsing, .edge-tab-btn--pulse { animation: none !important; } }