/* Session 14 — Member dashboard stylesheet. * * The member-facing dashboard uses a cream-tinted variant of the platform * palette. Public pages are nighttime browsing (deep navy background, * gold accent, cream type); member pages are daylight focus (cream * background on cards, navy as the page surround at ~12% lighter than * the public navy). * * Reused by Sessions 16 (advisor dashboard), 17 (supplier portal), and * 18 (admin dashboard) — role-specific surfaces opt in via the * data-role attribute on . * * Typography: Cormorant Garamond (display), Jost (body), DM Sans (utility). * WCAG AA: every body-text combination meets 4.5:1 contrast. */ :root { --bt-navy: #1A2B4A; --bt-navy-page: #FAF8F5; /* legacy alias — now resolves to cream paper */ --bt-paper: #FAF8F5; /* member dashboard page background */ --bt-navy-rule: #3d4a64; --bt-gold: #C4A052; --bt-gold-soft: #E5D4A0; --bt-cream: #FAF8F5; --bt-cream-card: #ffffff; --bt-ink: #1A2B4A; --bt-text: #2a2f3d; --bt-text-mid: #5b6378; --bt-text-faint: #8a8f9a; --bt-rule: rgba(196, 160, 82, 0.22); --bt-rule-soft: rgba(196, 160, 82, 0.12); --bt-success: #4d7a4a; --bt-warn: #C4A052; --bt-error: #8a3328; --bt-info: #3d5a7a; --bt-shadow-card: 0 8px 28px rgba(26, 43, 74, 0.08); --bt-shadow-hover: 0 12px 40px rgba(26, 43, 74, 0.14); --bt-font-display: 'Cormorant Garamond', Georgia, serif; --bt-font-body: 'Jost', system-ui, -apple-system, sans-serif; --bt-font-utility: 'DM Sans', system-ui, -apple-system, sans-serif; --bt-rail-width: 256px; --bt-content-max: 960px; --bt-radius: 4px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bt-navy-page); color: var(--bt-text); font-family: var(--bt-font-body); font-weight: 300; font-size: 15px; line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--bt-gold); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 120ms ease; } a:hover, a:focus { border-bottom-color: var(--bt-gold); } h1, h2, h3, h4 { font-family: var(--bt-font-display); font-weight: 300; letter-spacing: 0.005em; color: var(--bt-ink); margin: 0; } h1 { font-size: 36px; line-height: 1.15; } h2 { font-size: 28px; line-height: 1.2; } h3 { font-size: 22px; line-height: 1.25; } h4 { font-size: 18px; line-height: 1.3; } .bt-display-xl { font-family: var(--bt-font-display); font-size: 56px; font-weight: 300; color: var(--bt-ink); line-height: 1.05; } .bt-display-l { font-family: var(--bt-font-display); font-size: 44px; font-weight: 300; color: var(--bt-ink); line-height: 1.1; } .bt-display-m { font-family: var(--bt-font-display); font-size: 36px; font-weight: 300; color: var(--bt-ink); line-height: 1.15; } .bt-display-s { font-family: var(--bt-font-display); font-size: 28px; font-weight: 300; color: var(--bt-ink); line-height: 1.2; } .bt-eyebrow { font-family: var(--bt-font-utility); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; color: var(--bt-text-mid); } .bt-meta { font-family: var(--bt-font-utility); font-size: 12px; color: var(--bt-text-faint); } /* ── Layout ─────────────────────────────────────────────────────────── */ .bt-shell { display: grid; grid-template-columns: var(--bt-rail-width) 1fr; min-height: 100vh; } .bt-rail { background: var(--bt-navy); color: var(--bt-cream); padding: 32px 0 80px; position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 1px solid var(--bt-navy-rule); } .bt-rail-brand { padding: 0 28px 24px; border-bottom: 1px solid var(--bt-navy-rule); } .bt-rail-brand .name { font-family: var(--bt-font-display); font-size: 22px; color: var(--bt-cream); margin: 0 0 6px; } .bt-rail-brand .tier { font-family: var(--bt-font-utility); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bt-gold); } .bt-rail-nav { list-style: none; padding: 18px 0; margin: 0; } .bt-rail-nav li a { display: flex; align-items: center; gap: 14px; padding: 12px 28px; color: var(--bt-cream); font-family: var(--bt-font-utility); font-size: 13px; letter-spacing: 0.04em; border-bottom: none; border-left: 2px solid transparent; opacity: 0.85; transition: opacity 120ms ease, border-color 120ms ease, background 120ms ease; } .bt-rail-nav li a:hover, .bt-rail-nav li a:focus { opacity: 1; background: rgba(196, 160, 82, 0.06); } .bt-rail-nav li a.is-active { border-left-color: var(--bt-gold); color: var(--bt-gold); opacity: 1; } .bt-rail-nav li .icon { width: 16px; opacity: 0.75; } .bt-rail-nav li a.is-active .icon { opacity: 1; } /* Fix-plan §6 — sectioned nav hierarchy */ .bt-rail-nav.is-grouped { padding-top: 6px; padding-bottom: 6px; } .bt-rail-nav.is-grouped li a { padding-top: 10px; padding-bottom: 10px; font-size: 12px; } .bt-rail-nav.is-footer { border-top: 1px solid rgba(196, 160, 82, 0.15); margin-top: 14px; padding-top: 10px; padding-bottom: 18px; } .bt-rail-nav.is-footer li a { font-size: 11px; letter-spacing: 0.14em; opacity: 0.7; padding: 8px 28px; } .bt-rail-section { font-family: var(--bt-font-utility); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bt-gold); padding: 18px 28px 4px; opacity: 0.85; } /* Content area */ .bt-main { padding: 32px clamp(24px, 4vw, 56px) 80px; background: var(--bt-navy-page); min-height: 100vh; } .bt-content { max-width: var(--bt-content-max); margin: 0 auto; } /* ── Header ─────────────────────────────────────────────────────────── */ .bt-header { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-bottom: 28px; } .bt-header-actions { display: flex; align-items: center; gap: 8px; } .bt-bell { position: relative; background: transparent; border: 1px solid var(--bt-rule); border-radius: 50%; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--bt-cream); } .bt-bell:hover, .bt-bell:focus { border-color: var(--bt-gold); } .bt-bell .badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--bt-gold); color: var(--bt-ink); border-radius: 9px; font-family: var(--bt-font-utility); font-size: 10px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; } .bt-bell .badge[hidden] { display: none; } .bt-bell-dropdown { position: absolute; top: 48px; right: 0; background: var(--bt-cream-card); width: 360px; max-width: calc(100vw - 32px); box-shadow: var(--bt-shadow-card); border: 1px solid var(--bt-rule); border-radius: var(--bt-radius); z-index: 100; display: none; } .bt-bell-dropdown.open { display: block; } .bt-bell-dropdown header { padding: 16px 18px; border-bottom: 1px solid var(--bt-rule-soft); display: flex; justify-content: space-between; align-items: center; } .bt-bell-dropdown header h4 { font-size: 16px; } .bt-bell-dropdown footer { padding: 12px 18px; text-align: center; border-top: 1px solid var(--bt-rule-soft); } .bt-bell-dropdown ul { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; } .bt-bell-dropdown li { padding: 12px 18px; border-bottom: 1px solid var(--bt-rule-soft); cursor: pointer; } .bt-bell-dropdown li:last-child { border-bottom: none; } .bt-bell-dropdown li:hover { background: rgba(196, 160, 82, 0.05); } .bt-bell-dropdown li .title { color: var(--bt-ink); font-family: var(--bt-font-display); font-size: 15px; margin-bottom: 4px; } .bt-bell-dropdown li .body { color: var(--bt-text-mid); font-size: 13px; line-height: 1.4; } .bt-bell-dropdown li .ago { color: var(--bt-text-faint); font-size: 11px; font-family: var(--bt-font-utility); margin-top: 4px; } .bt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border: 1px solid var(--bt-gold); background: transparent; color: var(--bt-cream); font-family: var(--bt-font-utility); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; border-radius: var(--bt-radius); border-bottom: 1px solid var(--bt-gold); transition: background 120ms ease, color 120ms ease; } .bt-btn:hover, .bt-btn:focus { background: var(--bt-gold); color: var(--bt-ink); } .bt-btn.is-primary { background: var(--bt-gold); color: var(--bt-ink); } .bt-btn.is-primary:hover, .bt-btn.is-primary:focus { background: var(--bt-gold-soft); } .bt-btn.is-on-card { color: var(--bt-ink); border-color: var(--bt-gold); } .bt-btn.is-on-card:hover, .bt-btn.is-on-card:focus { background: var(--bt-gold); color: var(--bt-ink); } .bt-btn.is-danger { border-color: var(--bt-error); color: var(--bt-error); } .bt-btn.is-danger:hover, .bt-btn.is-danger:focus { background: var(--bt-error); color: var(--bt-cream); } .bt-btn[disabled] { opacity: 0.5; cursor: not-allowed; } .bt-user-menu { position: relative; } .bt-user-menu .trigger { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 28px; border: 1px solid var(--bt-rule); background: transparent; color: var(--bt-cream); font-family: var(--bt-font-utility); font-size: 13px; cursor: pointer; } .bt-user-menu .trigger:hover, .bt-user-menu .trigger:focus { border-color: var(--bt-gold); } .bt-user-menu .avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--bt-gold); color: var(--bt-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 500; font-size: 11px; } .bt-user-menu .menu { position: absolute; right: 0; top: 48px; background: var(--bt-cream-card); border: 1px solid var(--bt-rule); border-radius: var(--bt-radius); box-shadow: var(--bt-shadow-card); min-width: 220px; list-style: none; margin: 0; padding: 8px 0; display: none; z-index: 100; } .bt-user-menu.open .menu { display: block; } .bt-user-menu .menu li a, .bt-user-menu .menu li button { display: block; width: 100%; text-align: left; padding: 10px 18px; background: transparent; border: none; color: var(--bt-text); font-family: var(--bt-font-utility); font-size: 13px; cursor: pointer; } .bt-user-menu .menu li a:hover, .bt-user-menu .menu li button:hover { background: rgba(196, 160, 82, 0.06); color: var(--bt-ink); } /* ── Sections ───────────────────────────────────────────────────────── */ .bt-page-head { margin-bottom: 32px; } .bt-page-head h1 { color: var(--bt-cream); margin-bottom: 8px; } .bt-page-head .subtitle { color: var(--bt-text-faint); font-family: var(--bt-font-display); font-style: italic; font-size: 18px; } .bt-section { margin-bottom: 40px; } .bt-section-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--bt-rule); padding-bottom: 10px; margin-bottom: 24px; } .bt-section-head h2 { color: var(--bt-cream); font-size: 22px; } .bt-section-head .link { color: var(--bt-gold); font-family: var(--bt-font-utility); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; } .bt-card { background: var(--bt-cream-card); border-radius: var(--bt-radius); box-shadow: var(--bt-shadow-card); padding: 24px; color: var(--bt-text); } .bt-card.is-cream { background: var(--bt-cream); } .bt-card.is-pad-large { padding: 40px; } .bt-grid { display: grid; gap: 20px; } .bt-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .bt-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .bt-row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--bt-rule-soft); gap: 16px; } .bt-row:last-child { border-bottom: none; } .bt-row .label { color: var(--bt-text-mid); font-family: var(--bt-font-utility); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; } .bt-row .value { color: var(--bt-ink); } .bt-badge { display: inline-block; padding: 4px 10px; border: 1px solid currentColor; font-family: var(--bt-font-utility); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; border-radius: 2px; } .bt-badge.is-tier-baroque { color: var(--bt-gold); } .bt-badge.is-tier-noir { color: var(--bt-ink); border-color: var(--bt-ink); } .bt-badge.is-active { color: var(--bt-success); } .bt-badge.is-warn { color: var(--bt-warn); } .bt-badge.is-error { color: var(--bt-error); } .bt-amount { font-family: var(--bt-font-display); font-size: 36px; color: var(--bt-ink); line-height: 1; margin: 0; } .bt-amount-l { font-size: 56px; } .bt-ref-code { font-family: var(--bt-font-display); font-size: 32px; color: var(--bt-gold); letter-spacing: 0.04em; border-bottom: 1px solid var(--bt-gold); padding-bottom: 4px; display: inline-block; } .bt-thin-rule { border: none; border-top: 1px solid var(--bt-rule); margin: 24px 0; } /* Trip card */ .bt-trip-card { background: var(--bt-cream-card); border-radius: var(--bt-radius); overflow: hidden; box-shadow: var(--bt-shadow-card); margin-bottom: 16px; } .bt-trip-card .hero { background-color: var(--bt-navy-page); background-size: cover; background-position: center; aspect-ratio: 16 / 9; } .bt-trip-card .body { padding: 20px 24px 24px; } .bt-trip-card .title { font-family: var(--bt-font-display); font-size: 22px; color: var(--bt-ink); margin: 0 0 4px; } .bt-trip-card .sub { color: var(--bt-text-mid); font-size: 13px; } .bt-trip-card .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } /* Notification list */ .bt-notif-list { list-style: none; padding: 0; margin: 0; } .bt-notif-list li { padding: 14px 0; border-bottom: 1px solid var(--bt-rule-soft); display: flex; gap: 14px; cursor: pointer; } .bt-notif-list li:last-child { border-bottom: none; } .bt-notif-list li.is-unread .dot { background: var(--bt-gold); } .bt-notif-list .dot { flex: 0 0 8px; height: 8px; width: 8px; border-radius: 50%; background: var(--bt-text-faint); margin-top: 8px; } .bt-notif-list .text { flex: 1; } .bt-notif-list .text .title { font-family: var(--bt-font-display); font-size: 15px; color: var(--bt-ink); margin: 0 0 2px; } .bt-notif-list .text .body { color: var(--bt-text-mid); font-size: 13px; } .bt-notif-list .text .ago { font-family: var(--bt-font-utility); font-size: 11px; color: var(--bt-text-faint); text-transform: uppercase; letter-spacing: 0.14em; } /* Tabs */ .bt-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--bt-rule); margin-bottom: 24px; overflow-x: auto; } .bt-tabs button { background: transparent; border: none; padding: 12px 0; font-family: var(--bt-font-display); font-size: 18px; color: var(--bt-text-faint); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .bt-tabs button:hover, .bt-tabs button:focus { color: var(--bt-cream); } .bt-tabs button.is-active { color: var(--bt-cream); border-bottom-color: var(--bt-gold); } /* Filter chips */ .bt-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .bt-chip { padding: 6px 14px; border: 1px solid var(--bt-rule); border-radius: 16px; background: transparent; color: var(--bt-cream); font-family: var(--bt-font-utility); font-size: 12px; letter-spacing: 0.08em; cursor: pointer; } .bt-chip:hover, .bt-chip:focus { border-color: var(--bt-gold); } .bt-chip.is-active { background: var(--bt-gold); color: var(--bt-ink); border-color: var(--bt-gold); } /* Empty states */ .bt-empty { text-align: center; padding: 48px 24px; } .bt-empty h2 { font-family: var(--bt-font-display); font-size: 28px; color: var(--bt-cream); margin-bottom: 12px; } .bt-empty p { color: var(--bt-text-faint); font-style: italic; font-size: 15px; max-width: 520px; margin: 0 auto 24px; } /* Skeleton states */ .bt-skel { background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.12), rgba(255,255,255,0.05)); background-size: 200% 100%; animation: btSkel 1.4s ease-in-out infinite; border-radius: var(--bt-radius); } .bt-skel-line { height: 12px; margin: 8px 0; } .bt-skel-block { height: 180px; } @keyframes btSkel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Forms */ .bt-form label { display: block; font-family: var(--bt-font-utility); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bt-text-mid); margin: 14px 0 6px; } .bt-form input, .bt-form select, .bt-form textarea { width: 100%; padding: 10px 12px; background: var(--bt-cream); border: 1px solid var(--bt-rule); border-radius: var(--bt-radius); color: var(--bt-ink); font-family: var(--bt-font-body); font-size: 14px; font-weight: 300; } .bt-form input:focus, .bt-form select:focus, .bt-form textarea:focus { outline: none; border-color: var(--bt-gold); box-shadow: 0 0 0 2px rgba(196, 160, 82, 0.18); } .bt-form .help { color: var(--bt-text-faint); font-size: 12px; margin-top: 4px; } .bt-form .actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; } /* Toggles for the preferences matrix */ .bt-toggle { position: relative; display: inline-block; width: 36px; height: 20px; } .bt-toggle input { opacity: 0; width: 0; height: 0; } .bt-toggle .track { position: absolute; cursor: pointer; inset: 0; background: var(--bt-text-faint); border-radius: 10px; transition: background 120ms ease; } .bt-toggle .track:before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--bt-cream-card); border-radius: 50%; transition: transform 120ms ease; } .bt-toggle input:checked + .track { background: var(--bt-gold); } .bt-toggle input:checked + .track:before { transform: translateX(16px); } .bt-toggle input:focus-visible + .track { box-shadow: 0 0 0 3px rgba(196,160,82,0.3); } .bt-toggle input:disabled + .track { opacity: 0.45; cursor: not-allowed; } .bt-pref-table { width: 100%; border-collapse: collapse; } .bt-pref-table th, .bt-pref-table td { text-align: center; padding: 14px 8px; border-bottom: 1px solid var(--bt-rule-soft); } .bt-pref-table th { font-family: var(--bt-font-utility); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bt-text-mid); font-weight: 500; } .bt-pref-table tbody th { text-align: left; font-family: var(--bt-font-display); font-size: 16px; color: var(--bt-ink); text-transform: none; letter-spacing: 0; padding-right: 24px; } .bt-pref-table .forced { font-size: 10px; color: var(--bt-text-faint); display: block; margin-top: 2px; } /* Modal */ .bt-modal-backdrop { position: fixed; inset: 0; background: rgba(8, 12, 22, 0.72); display: none; align-items: center; justify-content: center; z-index: 200; padding: 24px; } .bt-modal-backdrop.open { display: flex; } .bt-modal { background: var(--bt-cream-card); border-radius: var(--bt-radius); padding: 32px; max-width: 540px; width: 100%; box-shadow: var(--bt-shadow-hover); color: var(--bt-text); } .bt-modal h2 { color: var(--bt-ink); margin-bottom: 12px; } .bt-modal p { color: var(--bt-text-mid); } /* Save button heart variant */ .bt-save-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(255,255,255,0.92); border: 1px solid var(--bt-rule); border-radius: 24px; color: var(--bt-ink); font-family: var(--bt-font-utility); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .bt-save-btn:hover, .bt-save-btn:focus { border-color: var(--bt-gold); } .bt-save-btn.is-saved { background: var(--bt-gold); color: var(--bt-ink); border-color: var(--bt-gold); } .bt-save-btn .heart { display: inline-block; width: 14px; height: 14px; } /* ── Mobile / responsive ─────────────────────────────────────────── */ /* Bottom tab bar (mobile) */ .bt-tabbar { display: none; } @media (max-width: 880px) { .bt-shell { grid-template-columns: 1fr; } .bt-rail { display: none; } .bt-main { padding: 24px 20px 88px; } .bt-tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bt-navy); border-top: 1px solid var(--bt-navy-rule); z-index: 50; } .bt-tabbar a { flex: 1; text-align: center; padding: 10px 4px 12px; color: var(--bt-cream); font-family: var(--bt-font-utility); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; border-bottom: none; border-top: 2px solid transparent; } .bt-tabbar a.is-active { opacity: 1; color: var(--bt-gold); border-top-color: var(--bt-gold); } .bt-tabbar a .icon { display: block; margin: 0 auto 4px; width: 18px; } .bt-grid.cols-2, .bt-grid.cols-3 { grid-template-columns: 1fr; } .bt-bell-dropdown { right: 0; left: 0; width: auto; } h1 { font-size: 28px; } h2 { font-size: 22px; } .bt-amount { font-size: 28px; } .bt-amount-l { font-size: 40px; } .bt-pref-table th, .bt-pref-table td { padding: 10px 4px; } } /* ── Accessibility focus rings ─────────────────────────────────── */ :focus-visible { outline: 2px solid var(--bt-gold); outline-offset: 2px; } .bt-rail-nav li a:focus-visible { outline-offset: -2px; }