/* * Boykin Legacy Portal 8.0 * One measured responsive presentation layer for portal, auth and planner. */ :root { --bl-ink: #2d3138; --bl-ink-soft: #454a50; --bl-bone: #f5f3ef; --bl-paper: #fcfbf9; --bl-white: #ffffff; --bl-marble: #faf8f5; --bl-pearl: #fcfbf9; --bl-teal: #0d6076; --bl-teal-deep: #0d6076; --bl-gold: #c89a3d; --bl-gold-light: #f2e5c8; --bl-champagne: #f2e5c8; --bl-sand: #d8c7a2; --bl-line: rgba(45, 49, 56, 0.14); --bl-line-gold: rgba(200, 154, 61, 0.52); --bl-muted: #6b7177; --bl-danger: #8c2f38; --bl-success: #2e624b; --bl-shadow: 0 20px 55px rgba(45, 49, 56, 0.08); --bl-shadow-soft: 0 10px 30px rgba(45, 49, 56, 0.06); --bl-display: "Cinzel", "Cormorant Garamond", Georgia, serif; --bl-serif: "Cormorant Garamond", "Cinzel", Georgia, serif; --bl-sans: "Montserrat", "Avenir Next", "Source Sans 3", Arial, sans-serif; --bl-sidebar: 248px; --bl-panel: 288px; --bl-content: 1600px; --bl-radius: 4px; --bl-control-height: 44px; --bl-control-height-sm: 38px; --bl-control-min: 136px; --bl-control-min-sm: 108px; } html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; background: var(--bl-bone); color: var(--bl-ink); font-family: var(--bl-sans); font-size: 16px; line-height: 1.55; letter-spacing: 0; } #boykin-portal :where(h1, h2, h3, h4, p, span, strong, label, button, a) { min-width: 0; overflow-wrap: normal; word-break: normal; } body.bl-portal-drawer-open { overflow: hidden; } button, input, select, textarea { font: inherit; letter-spacing: 0; } button, a { -webkit-tap-highlight-color: transparent; } img, svg, canvas, iframe { display: block; max-width: 100%; } [hidden] { display: none !important; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* Keep WordPress themes from restyling the private application controls. */ #boykin-portal :where(button, input, select, textarea) { font-family: var(--bl-sans) !important; letter-spacing: 0 !important; text-shadow: none !important; } #boykin-portal :where(h1, h2, h3, h4) { font-family: var(--bl-serif) !important; font-style: normal !important; font-weight: 500 !important; line-height: 1.06 !important; letter-spacing: 0 !important; text-transform: none !important; overflow-wrap: break-word; } #boykin-portal :where(button) { margin: 0; box-shadow: none; font-size: 11px !important; line-height: 1.2 !important; white-space: normal; } /* Kentha assigns every nav a fixed 56px height; portal navigation must size to its content. */ #boykin-portal nav { width: auto !important; height: auto !important; line-height: normal !important; } /* Elementor paints every button teal. Restore each portal control family explicitly. */ #boykin-portal .bl-nav-list__link { display: grid !important; grid-template-columns: 20px minmax(0, 1fr) !important; gap: 11px !important; align-items: center !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 43px !important; padding: 9px 11px !important; border-radius: 0 !important; background-color: transparent !important; color: rgba(255,255,255,.77) !important; font-size: 11px !important; line-height: 1.25 !important; text-align: left !important; box-shadow: none !important; } #boykin-portal .bl-sidebar__nav { align-self: stretch !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow-x: hidden !important; overflow-y: auto !important; } #boykin-portal .bl-nav-list, #boykin-portal .bl-nav-list__item { width: 100% !important; height: auto !important; min-height: 0 !important; } #boykin-portal .bl-nav-list__label { display: block !important; min-width: 0 !important; font-size: 11px !important; line-height: 1.25 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #boykin-portal .bl-nav-list__link:hover, #boykin-portal .bl-nav-list__link:focus-visible, #boykin-portal .bl-nav-list__link.is-active { color: #fff !important; } #boykin-portal .bl-nav-list__link.is-active { background-color: rgba(255,255,255,.08) !important; } #boykin-portal .bl-sidebar__close, #boykin-portal .bl-header__menu-btn, #boykin-portal .bl-mobile-nav__item, #boykin-portal .bl-calendar__nav, #boykin-portal .bl-calendar__day, #boykin-portal .bl-q-tabs button, #boykin-portal .bl-auth-tab, #boykin-portal .bl-auth-gate__link, #boykin-portal .bl-flipbook__hit { background-color: transparent !important; } #boykin-portal .bl-sidebar__close { width: 36px !important; font-size: 26px !important; } #boykin-portal .bl-mobile-nav__item { width: 100% !important; min-height: 66px !important; padding: 7px 3px !important; } #boykin-portal .bl-btn { border-color: var(--bl-line-gold) !important; background-color: #fff !important; color: var(--bl-ink) !important; } #boykin-portal .bl-btn:hover, #boykin-portal .bl-btn:focus-visible { border-color: var(--bl-ink) !important; background-color: var(--bl-ink) !important; color: #fff !important; } #boykin-portal .bl-btn--gold { border-color: var(--bl-gold) !important; background-color: #fff !important; color: var(--bl-ink) !important; box-shadow: inset 0 -2px var(--bl-gold) !important; } #boykin-portal .bl-btn--gold:hover, #boykin-portal .bl-btn--gold:focus-visible { border-color: var(--bl-ink) !important; background-color: var(--bl-ink) !important; color: #fff !important; box-shadow: none !important; } #boykin-portal .bl-btn--outline { background-color: #fff !important; color: var(--bl-ink) !important; } #boykin-portal .bl-btn--outline:hover, #boykin-portal .bl-btn--outline:focus-visible { background-color: var(--bl-ink) !important; color: #fff !important; } #boykin-portal .bl-btn--ghost { border-color: var(--bl-line-gold) !important; background-color: #fff !important; color: var(--bl-ink) !important; } #boykin-portal .bl-btn--danger { background-color: var(--bl-danger) !important; color: #fff !important; } #boykin-portal .bl-btn--sm { font-size: 10px !important; } #boykin-portal .bl-event-type-card, #boykin-portal .bl-package-card, #boykin-portal .bl-addon-card, #boykin-portal .blp-button, #boykin-portal .blp-tool, #boykin-portal .blp-icon-tool, #boykin-portal .blp-toolmenu > summary, #boykin-portal .blp-filter, #boykin-portal .blp-sticker-option, #boykin-portal .blp-book-tabs button { background-color: #fff !important; color: var(--bl-ink) !important; } #boykin-portal .blp-button--primary, #boykin-portal .blp-tool--accent, #boykin-portal .blp-filter.is-active, #boykin-portal .blp-book-tabs button:hover { background-color: var(--bl-gold) !important; color: #fff !important; } #boykin-portal .blp-swatch { background-color: var(--blp-swatch,#fff) !important; } #boykin-portal .blp-sticker-drawer__backdrop { background-color: rgba(10,10,9,.68) !important; } /* Application shell */ #boykin-portal { display: grid; grid-template-columns: var(--bl-sidebar) minmax(0, 1fr); width: min(100%, var(--bl-content)); min-height: 100dvh; margin: 0 auto; background: var(--bl-paper); box-shadow: 0 0 0 1px var(--bl-line), 0 26px 80px rgba(45,49,56,.1); overflow: clip; } .bl-portal__overlay { position: fixed; inset: 0; z-index: 80; background: rgba(10,10,9,.64); opacity: 0; pointer-events: none; transition: opacity .3s ease; } .bl-portal__overlay.is-visible { opacity: 1; pointer-events: auto; } .bl-portal__sidebar { min-width: 0; background: var(--bl-ink); color: #fff; border-right: 1px solid rgba(242,229,200,.3); } .bl-portal__main { min-width: 0; overflow-x: clip; } .bl-portal__body { display: grid; grid-template-columns: minmax(0, 1fr) var(--bl-panel); min-width: 0; } .bl-portal__content { min-width: 0; padding: 32px; } .bl-portal__panel { min-width: 0; padding: 32px 22px 32px 0; border-left: 1px solid var(--bl-line); } .bl-portal__mobile-nav { display: none; } .bl-global-alert { margin: 16px 32px 0; } .bl-sidebar { position: sticky; top: 0; display: grid; grid-template-rows: auto 1fr auto; height: 100dvh; min-height: 0; padding: 26px 18px 20px; } .bl-sidebar__brand { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 0 6px 24px; border-bottom: 1px solid rgba(255,255,255,.14); } .bl-sidebar__logo { width: 42px; height: 42px; object-fit: contain; filter: brightness(1.08) contrast(1.02); } .bl-sidebar__brand-text { min-width: 0; } .bl-sidebar__brand-name { display: block; font-family: var(--bl-serif); font-size: 23px; font-weight: 500; line-height: 1; color: #fff; } .bl-sidebar__brand-tag, .bl-sidebar__eyebrow, .bl-sidebar__footnote { display: block; margin-top: 5px; color: rgba(255,255,255,.58); font-size: 10px; font-weight: 600; line-height: 1.3; text-transform: uppercase; letter-spacing: .15em; } .bl-sidebar__close { display: none; width: 36px; height: 36px; border: 0; background: transparent; color: #fff; font-size: 26px; cursor: pointer; } .bl-sidebar__nav { min-height: 0; padding-top: 25px; overflow-y: auto; scrollbar-width: thin; } .bl-sidebar__eyebrow { margin: 0 10px 12px; color: var(--bl-gold-light); } .bl-nav-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .bl-nav-list__link { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 11px; align-items: center; width: 100%; min-height: 43px; padding: 9px 11px; border: 1px solid transparent; border-radius: 0; background: transparent; color: rgba(255,255,255,.77); cursor: pointer; text-align: left; transition: color .28s ease, background .28s ease, border-color .28s ease; } .bl-nav-list__link:hover, .bl-nav-list__link:focus-visible { color: #fff; border-color: rgba(242,229,200,.42); outline: none; } .bl-nav-list__link.is-active { color: #fff; background: rgba(255,255,255,.08); border-left-color: var(--bl-gold-light); } .bl-nav-list__icon { display: grid; place-items: center; width: 20px; height: 20px; color: var(--bl-gold-light); } .bl-nav-list__icon svg { width: 17px; height: 17px; } .bl-nav-list__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; } .bl-sidebar__footer { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); } .bl-sidebar__footnote { margin: 0 10px 8px; } .bl-nav-list__link--logout { color: rgba(255,255,255,.72); } .bl-header { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 32px; background: rgba(252,251,249,.97); border-bottom: 1px solid var(--bl-line); } .bl-header__left { display: flex; align-items: center; gap: 14px; min-width: 0; } .bl-header__eyebrow { margin: 0 0 2px; color: var(--bl-teal); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; } .bl-header__welcome, .bl-header__title { margin: 0; min-width: 0; font-family: var(--bl-serif); font-size: 27px; font-weight: 500; line-height: 1.05; letter-spacing: 0 !important; overflow-wrap: break-word; } .bl-header__actions { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; align-items: center; gap: 8px; } .bl-header__actions .bl-btn { min-width: 96px; } .bl-header__avatar { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--bl-line-gold); border-radius: 50%; background: #fff; color: var(--bl-teal); font-weight: 700; } .bl-header__menu-btn, .bl-header__panel-toggle, .bl-header__signout { min-height: 40px; border: 1px solid var(--bl-line); border-radius: 0; background: transparent; color: var(--bl-ink); cursor: pointer; } .bl-header__menu-btn { display: none; width: 40px; } .bl-header__menu-icon, .bl-header__menu-icon::before, .bl-header__menu-icon::after { display: block; width: 17px; height: 1px; background: currentColor; content: ""; } .bl-header__menu-icon { position: relative; } .bl-header__menu-icon::before { position: absolute; top: -5px; left: 0; } .bl-header__menu-icon::after { position: absolute; top: 5px; left: 0; } .bl-header__signout { padding: 0 14px; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; } .bl-header__panel-toggle { width: auto; min-width: 96px; padding: 0 14px; } .bl-portal-test-banner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 32px; background: var(--bl-champagne); border-bottom: 1px solid var(--bl-line-gold); color: var(--bl-ink); } .bl-portal-test-banner__copy { display: grid; gap: 2px; } .bl-portal-test-banner__copy strong { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; } .bl-portal-test-banner__copy span { font-size: 13px; color: var(--bl-muted); } .bl-portal-test-banner__actions { display: flex; gap: 8px; } .bl-portal-test-banner__btn { min-height: 34px; padding: 0 12px; border: 1px solid var(--bl-line-gold); background: transparent; cursor: pointer; } /* Shared typography and controls */ .bl-section { width: 100%; min-width: 0; } .bl-section > * + * { margin-top: 24px; } .bl-section__header { max-width: 760px; margin-bottom: 28px; } .bl-section__title, .bl-card__title, .bl-card__subtitle, .bl-empty-state__title { min-width: 0; max-width: 100%; margin: 0; color: var(--bl-teal); font-family: var(--bl-serif); font-weight: 500; line-height: 1.06; overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: balance; } .bl-section__title { font-size: 40px; } .bl-card__title { font-size: 27px; } .bl-card__subtitle { font-size: 22px; } #boykin-portal .bl-section__title { font-size: 40px !important; } #boykin-portal .bl-card__title { font-size: 27px !important; } #boykin-portal .bl-card__subtitle { font-size: 22px !important; } .bl-section__desc, .bl-card__text, .bl-form-hint, .bl-form-help, .bl-empty-state__text { color: var(--bl-muted); overflow-wrap: break-word; } .bl-section__desc { max-width: 680px; margin: 10px 0 0; font-size: 16px; } .bl-eyebrow, .bl-card__eyebrow, .blx-hero__eyebrow { margin: 0 0 12px; color: var(--bl-teal); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; } .bl-card, .bl-admin-card, .bl-music-panel, .bl-editorial-panel, .bl-action-card, .bl-stat-card { min-width: 0; padding: 26px; border: 1px solid var(--bl-line); border-radius: var(--bl-radius); background: var(--bl-white); box-shadow: var(--bl-shadow-soft); } .bl-card--muted { background: var(--bl-bone); box-shadow: none; } .bl-card--double { outline: 1px solid rgba(200,154,61,.2); outline-offset: -7px; } .bl-btn { display: inline-flex; width: auto; min-width: var(--bl-control-min); max-width: 100%; min-height: var(--bl-control-height); height: var(--bl-control-height); align-items: center; justify-content: center; gap: 9px; padding: 0 18px; overflow: hidden; border: 1px solid var(--bl-line-gold); border-radius: 0; background: #fff; color: var(--bl-ink); font-family: var(--bl-sans) !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center; text-decoration: none; text-transform: uppercase; letter-spacing: .09em !important; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; transition: color .35s ease, background .35s ease, border-color .35s ease, opacity .2s ease; } .bl-btn:hover, .bl-btn:focus-visible { border-color: var(--bl-ink); background: var(--bl-ink); color: #fff; outline: none; } .bl-btn--gold { border-color: var(--bl-gold); background: #fff; color: var(--bl-ink); box-shadow: inset 0 -2px var(--bl-gold); } .bl-btn--gold:hover, .bl-btn--gold:focus-visible { border-color: var(--bl-ink); background: var(--bl-ink); color: #fff; box-shadow: none; } .bl-btn--outline { border-color: var(--bl-line-gold); background: #fff; color: var(--bl-ink); } .bl-btn--outline:hover, .bl-btn--outline:focus-visible { border-color: var(--bl-ink); background: var(--bl-ink); color: #fff; } .bl-btn--ghost { border-color: var(--bl-line-gold); background: #fff; color: var(--bl-ink); } .bl-btn--danger { border-color: var(--bl-danger); background: var(--bl-danger); } .bl-btn--sm { min-width: var(--bl-control-min-sm); min-height: var(--bl-control-height-sm); height: var(--bl-control-height-sm); padding-inline: 14px; font-size: 9px !important; } .bl-btn--block { width: 100%; } .bl-btn:disabled, .bl-btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; } .bl-form-row { min-width: 0; } .bl-form-row + .bl-form-row { margin-top: 18px; } .bl-label { display: block; margin-bottom: 7px; color: var(--bl-ink); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; } .bl-input, .bl-select, .bl-textarea, .bl-time-select, .bl-form-row input:not([type="checkbox"]):not([type="radio"]), .bl-form-row select, .bl-form-row textarea { width: 100%; min-width: 0; min-height: 48px; padding: 11px 13px; border: 1px solid var(--bl-line); border-radius: 0; background: #fff; color: var(--bl-ink); box-shadow: none; outline: none; } .bl-textarea, .bl-form-row textarea { min-height: 116px; resize: vertical; } .bl-input:focus, .bl-select:focus, .bl-textarea:focus, .bl-form-row input:focus, .bl-form-row select:focus, .bl-form-row textarea:focus { border-color: var(--bl-gold); box-shadow: 0 0 0 2px rgba(200,154,61,.14); } .bl-grid, .bl-form-grid { display: grid; gap: 20px; min-width: 0; } .bl-grid--2, .bl-form-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .bl-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .bl-form-actions--between { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 12px; } .bl-form-actions--primary { display: flex; justify-content: flex-end; margin-left: 0; } .bl-checkbox, .bl-check { display: flex; gap: 10px; align-items: flex-start; color: var(--bl-ink-soft); } .bl-checkbox input, .bl-check input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--bl-gold); } .bl-alert, .bl-note { padding: 14px 16px; border: 1px solid var(--bl-line); border-radius: 0; background: #f5f7f7; color: var(--bl-ink-soft); } .bl-alert--success { border-color: rgba(46,98,75,.4); background: #f0f7f2; } .bl-alert--error { border-color: rgba(140,47,56,.36); background: #fbf0f1; color: #6e1f27; } .bl-empty-state { padding: 38px; border: 1px solid var(--bl-line); background: #fff; text-align: center; } .bl-empty-state--compact { padding: 26px; } .bl-empty-state__title { font-size: 28px; } .bl-empty-state__text { margin: 9px auto 20px; max-width: 560px; } .bl-status-badge { display: inline-flex; width: fit-content; min-height: 26px; align-items: center; padding: 3px 9px; border: 1px solid var(--bl-line); border-radius: 0; color: var(--bl-muted); background: #f7f7f5; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .bl-status-badge--ready, .bl-status-badge--complete { color: var(--bl-success); border-color: rgba(46,98,75,.35); background: #f0f7f2; } .bl-status-badge--pending { color: #76561b; border-color: var(--bl-line-gold); background: var(--bl-champagne); } .bl-list { margin: 0; padding: 0; list-style: none; } .bl-list__item { display: flex; justify-content: space-between; gap: 22px; padding: 12px 0; border-bottom: 1px solid var(--bl-line); } .bl-list__item span { min-width: 0; color: var(--bl-muted); } .bl-list__item strong { flex: 0 0 auto; } .bl-list__item--total { margin-top: 6px; border-top: 1px solid var(--bl-ink); font-size: 17px; } /* Editorial section hero */ .blx-hero { display: grid; grid-template-columns: minmax(0,.84fr) minmax(360px,1.16fr); min-height: 320px; border: 1px solid var(--bl-line-gold); background: #fff; overflow: hidden; box-shadow: var(--bl-shadow); } .blx-hero__copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 48px; } .blx-hero__title { min-width: 0; max-width: 620px; margin: 0; color: var(--bl-teal-deep); font-family: var(--bl-serif); font-size: 46px; font-weight: 500; line-height: 1; overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: balance; } #boykin-portal .blx-hero__title { font-size: 46px !important; } .blx-hero__description { max-width: 580px; margin: 18px 0 0; color: var(--bl-muted); font-size: 16px; line-height: 1.65; } .blx-hero__media { min-width: 0; margin: 0; background: var(--bl-bone); } .blx-hero__media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; object-position: center; } .blx-hero--dark { border-color: rgba(242,229,200,.4); background: var(--bl-ink); } .blx-hero--dark .blx-hero__title { color: #fff; } .blx-hero--dark .blx-hero__description { color: rgba(255,255,255,.67); } /* Dashboard and existing image-led pages */ .bl-dashboard-hero, .bl-booking-hero, .bl-music-hero, .bl-guide-hero { display: grid; grid-template-columns: minmax(0,1.04fr) minmax(360px,.96fr); min-height: 330px; border: 1px solid var(--bl-line-gold); background: #fff; overflow: hidden; box-shadow: var(--bl-shadow); } .bl-dashboard-hero__copy, .bl-booking-hero__copy, .bl-music-hero__copy, .bl-guide-hero__copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 46px; } .bl-dashboard-hero__title, .bl-booking-hero h1, .bl-music-hero h1, .bl-guide-hero h1 { min-width: 0; max-width: 620px; margin: 0; color: var(--bl-teal-deep); font-family: var(--bl-serif); font-size: 46px; font-weight: 500; line-height: 1; overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: balance; } #boykin-portal :where(.bl-dashboard-hero__title, .bl-booking-hero h1, .bl-music-hero h1, .bl-guide-hero h1) { font-size: 46px !important; } .bl-dashboard-hero__lead, .bl-booking-hero p, .bl-music-hero p, .bl-guide-hero p { max-width: 600px; color: var(--bl-muted); } .bl-dashboard-local-clock { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-top: 18px; color: var(--bl-teal); } .bl-dashboard-local-clock > span { font-family: var(--bl-serif); font-size: 28px; line-height: 1; } .bl-dashboard-local-clock > small { color: var(--bl-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; } .bl-dashboard-hero__context { margin: 14px 0 0; color: var(--bl-teal); font-family: var(--bl-serif); font-size: 19px; } .bl-dashboard-hero__action { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: center; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--bl-line); } .bl-dashboard-hero__next { display: block; margin-top: 4px; color: var(--bl-teal); font-family: var(--bl-serif); font-size: 20px; font-weight: 500; line-height: 1.1; } .bl-dashboard-hero__media, .bl-booking-hero__visual, .bl-music-hero__art, .bl-guide-hero__image { min-width: 0; margin: 0; overflow: hidden; } .bl-dashboard-hero > img.bl-dashboard-hero__media, .bl-dashboard-hero__media img, .bl-booking-hero__visual img, .bl-music-hero__art img, .bl-guide-hero__image { width: 100%; height: 100%; min-height: 330px; object-fit: cover; } .bl-dashboard-hero__copy { grid-column: 1; grid-row: 1; } .bl-dashboard-hero > img.bl-dashboard-hero__media { grid-column: 2; grid-row: 1; object-position: center; } .bl-dashboard-page__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; } .bl-dashboard-page__journey { grid-column: 1 / -1; } .bl-editorial-panel__header { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(260px,.85fr); gap: 32px; align-items: end; padding-bottom: 20px; border-bottom: 1px solid var(--bl-line); } .bl-editorial-panel__title { min-width: 0; margin: 0; color: var(--bl-teal); font-family: var(--bl-serif); font-size: 29px; font-weight: 500; line-height: 1.06; text-wrap: balance; } .bl-editorial-panel__intro { max-width: 620px; margin: 10px 0 0; color: var(--bl-muted); } .bl-editorial-panel__header > .bl-editorial-panel__intro { margin: 0; } .bl-dashboard-page__focus-action, .bl-dashboard-page__mini-stat { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: center; min-width: 0; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--bl-line); } .bl-dashboard-page__focus-action strong, .bl-dashboard-page__mini-stat strong { color: var(--bl-teal); } .bl-dashboard-quick-links, .bl-action-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; } .bl-action-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .bl-action-card__title { min-width: 0; margin: 0; color: var(--bl-teal); font-family: var(--bl-serif); font-size: 22px; font-weight: 500; overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: balance; } .bl-action-card__text { color: var(--bl-muted); } .bl-dashboard-timepiece { display: grid; grid-template-columns: minmax(190px,.38fr) minmax(0,.62fr); gap: 32px; align-items: center; padding: 28px 32px; border: 1px solid var(--bl-line-gold); background: var(--bl-marble); } .bl-dashboard-countdown-copy { display: grid; min-width: 0; gap: 12px; align-content: center; } .bl-dashboard-countdown-copy .bl-eyebrow { margin-bottom: 0; } .bl-event-countdown__grid { display: grid; grid-template-columns: minmax(104px,.95fr) minmax(0,2.05fr); gap: 1px; background: var(--bl-line); } .bl-event-countdown__secondary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; min-width: 0; background: var(--bl-line); } .bl-event-countdown__unit { padding: 12px 8px; background: #fff; text-align: center; } .bl-event-countdown__value { display: block; font-family: var(--bl-serif); font-size: 28px; } .bl-event-countdown__label { display: block; color: var(--bl-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; } .bl-dashboard-hero__date { margin: 0; color: var(--bl-muted); font-size: 13px; } /* Booking */ .bl-booking-flow { display: grid; gap: 22px; } .bl-booking-step { min-width: 0; padding: 30px; border: 1px solid var(--bl-line); background: #fff; box-shadow: var(--bl-shadow-soft); } .bl-booking-step__label { color: var(--bl-teal); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; } .bl-booking-step__body { min-width: 0; } .bl-event-type-grid, .bl-package-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; } .bl-event-type-card, .bl-package-card, .bl-addon-card { position: relative; min-width: 0; padding: 0; border: 1px solid var(--bl-line); border-radius: 0; background: #fff; color: var(--bl-ink); cursor: pointer; overflow: hidden; transition: border-color .3s ease, box-shadow .3s ease; } .bl-event-type-card:hover, .bl-package-card:hover, .bl-addon-card:hover, .bl-event-type-card.is-selected, .bl-package-card.is-selected, .bl-addon-card.is-selected { border-color: var(--bl-gold); box-shadow: var(--bl-shadow-soft); } .bl-event-type-card__art, .bl-package-card__art, .bl-addon-card__art { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bl-bone); } .bl-event-type-card__art img, .bl-package-card__art img, .bl-addon-card__art img { width: 100%; height: 100%; object-fit: cover; } .bl-event-type-card__label, .bl-package-card__body, .bl-addon-card__body { display: block; min-width: 0; padding: 17px; } .bl-event-type-card__label, .bl-package-card__title, .bl-addon-card__title { min-width: 0; font-family: var(--bl-serif); font-size: 23px; font-weight: 500; line-height: 1.08; overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: balance; } .bl-package-card__name, .bl-package-card__desc, .bl-package-card__meta, .bl-package-card__price { display: block; min-width: 0; max-width: 100%; padding-inline: 17px; text-align: left; overflow-wrap: break-word; word-break: normal; hyphens: none; } .bl-package-card__name { padding-top: 18px; color: var(--bl-teal-deep); font-family: var(--bl-serif); font-size: 25px; font-weight: 500; line-height: 1; } .bl-package-card__desc { padding-top: 8px; color: var(--bl-muted); font-size: 13px; line-height: 1.5; } .bl-package-card__meta { padding-top: 12px; color: var(--bl-teal); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; } .bl-package-card__price { padding-top: 8px; padding-bottom: 18px; color: var(--bl-ink); font-family: var(--bl-serif); font-size: 24px; } .bl-package-card__check { position: absolute; top: 10px; right: 10px; width: 25px; height: 25px; border-radius: 50%; background: var(--bl-gold); } .bl-package-card__check::after { content: "✓"; display: grid; height: 100%; place-items: center; color: #fff; font-size: 13px; } .bl-event-type-card__check { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 25px; height: 25px; background: var(--bl-gold); color: #fff; border-radius: 50%; } .bl-calendar { min-width: 0; padding: 20px; border: 1px solid var(--bl-line); background: #fff; } .bl-calendar__header { display: grid; grid-template-columns: 40px minmax(0,1fr) 40px; align-items: center; gap: 8px; margin-bottom: 16px; } .bl-calendar__nav { width: 40px; height: 40px; border: 1px solid var(--bl-line); background: #fff; cursor: pointer; } .bl-calendar__title { margin: 0; text-align: center; font-family: var(--bl-serif); font-size: 25px; } .bl-calendar__weekdays, .bl-calendar__grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 4px; } .bl-calendar__weekdays > * { padding: 6px 0; color: var(--bl-muted); font-size: 10px; font-weight: 700; text-align: center; text-transform: uppercase; } .bl-calendar__grid button, .bl-calendar__day { display: grid; place-items: center; width: 100%; min-width: 0; aspect-ratio: 1; border: 1px solid transparent; border-radius: 0; background: transparent; color: var(--bl-ink); cursor: pointer; } .bl-calendar__grid button:hover, .bl-calendar__day:hover, .bl-calendar__day.is-selected { border-color: var(--bl-gold); background: #fff8e9; } .bl-calendar__day.is-booked, .bl-calendar__day:disabled { color: #aaa; cursor: not-allowed; } .bl-calendar__cell { display: grid; place-items: center; width: 100%; min-width: 0; aspect-ratio: 1; border: 1px solid transparent; border-radius: 0; background: transparent; color: var(--bl-ink); cursor: pointer; } .bl-calendar__cell:hover, .bl-calendar__cell.is-selected { border-color: var(--bl-gold); background: #fff8e9; } .bl-calendar__cell.is-booked, .bl-calendar__cell.is-unavailable, .bl-calendar__cell:disabled { color: #aaa; background: #f4f4f2; cursor: not-allowed; } .bl-calendar__cell.is-available { box-shadow: inset 0 -2px var(--bl-success); } .bl-calendar__cell.is-limited { box-shadow: inset 0 -2px var(--bl-gold); } .bl-calendar__legend { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 15px; color: var(--bl-muted); font-size: 11px; } .bl-time-range-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; } .bl-review-summary, .bl-pricing-breakdown, .bl-selected-addons { min-width: 0; overflow: hidden; } .bl-addon-filter { min-height: 36px; padding: 0 13px; border: 1px solid var(--bl-line); border-radius: 0; background: #fff; color: var(--bl-ink); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; cursor: pointer; } .bl-addon-filter.is-active, .bl-addon-filter:hover { border-color: var(--bl-gold); background: var(--bl-gold); color: #fff; } .bl-drawer-addon { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: center; min-width: 0; padding: 17px 0; border-bottom: 1px solid var(--bl-line); } .bl-drawer-addon.is-selected { border-left: 3px solid var(--bl-gold); padding-left: 14px; } .bl-drawer-addon__info { min-width: 0; } .bl-drawer-addon__info strong { display: block; color: var(--bl-ink); font-family: var(--bl-serif); font-size: 21px; font-weight: 500; } .bl-drawer-addon__info p { margin: 4px 0; color: var(--bl-muted); font-size: 13px; } .bl-drawer-addon__price { color: var(--bl-teal); font-weight: 700; } /* Proposal, payment and documents */ .bl-proposal-page > :not(.blx-hero) { width: min(100%,1120px); margin-right: auto; margin-left: auto; } .bl-proposal-page__topbar, .bl-proposal-quick-nav, .bl-proposal-review-actions, .bl-proposal-footer-actions, .bl-contract-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; } .bl-proposal-page__topbar { justify-content: space-between; min-height: 38px; } .bl-proposal-quick-nav { min-width: 0; } .bl-proposal-status-card { display: flex; align-items: center; gap: 10px; width: fit-content !important; margin-right: 0 !important; margin-left: auto !important; padding: 10px 14px; border: 1px solid var(--bl-line-gold); background: #fff; } .bl-proposal-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bl-gold); box-shadow: 0 0 0 4px rgba(200,154,61,.14); } .bl-proposal-status-card small, .bl-proposal-status-card strong { display: block; } .bl-proposal-status-card small { color: var(--bl-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .09em; } .bl-proposal-progress { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; padding: 0; list-style: none; counter-reset: proposal; } .bl-proposal-progress li { position: relative; padding: 14px; border-top: 1px solid var(--bl-line); border-bottom: 1px solid var(--bl-line); text-align: center; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .bl-proposal-progress li + li { border-left: 1px solid var(--bl-line); } .bl-proposal-progress li.is-current { color: var(--bl-teal); } .bl-proposal-progress li.is-complete::before { content: "✓"; margin-right: 7px; color: var(--bl-success); } .bl-proposal-loading, .bl-proposal-empty { max-width: 760px; } .bl-proposal-empty .bl-empty-state { padding: 38px; text-align: left; } .bl-proposal-empty .bl-empty-state__text { max-width: 560px; } .bl-proposal-actions { align-items: center; } .bl-proposal-actions .bl-btn { width: auto; min-width: 132px; } .bl-proposal-document-card { position: relative; padding: 44px; overflow: hidden; border-color: var(--bl-line-gold); background: #fff; box-shadow: 0 18px 50px rgba(45,49,56,.07); } .bl-proposal-document-card::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(200,154,61,.18); pointer-events: none; } .bl-proposal-document-card > * { position: relative; z-index: 1; } .bl-proposal-brandline, .bl-proposal-document-card__header, .bl-contract-document__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; } .bl-proposal-brandline__seal { width: 58px; height: 58px; border: 1px solid var(--bl-line-gold); background: #080908; object-fit: cover; } .bl-proposal-brandline { justify-content: flex-start; padding-bottom: 20px; border-bottom: 1px solid var(--bl-line); } .bl-proposal-brandline strong { display: block; color: var(--bl-teal-deep); font-family: var(--bl-serif); font-size: 23px; font-weight: 500; line-height: 1; } .bl-proposal-brandline span { display: block; color: var(--bl-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; } .bl-proposal-document-card__header { padding-top: 27px; } .bl-proposal-document-card__header .bl-card__subtitle { max-width: 620px; margin: 4px 0 0; font-size: 34px; line-height: 1.05; overflow-wrap: normal; word-break: normal; text-wrap: balance; } .bl-proposal-meta { display: flex; gap: 22px; } .bl-proposal-meta p { min-width: 96px; margin: 0; } .bl-proposal-meta strong { display: block; overflow-wrap: break-word; word-break: normal; } .bl-proposal-meta span, .bl-proposal-event-strip span { display: block; color: var(--bl-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; } .bl-proposal-event-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin: 24px 0; background: var(--bl-line); } .bl-proposal-event-strip > div { min-width: 0; padding: 14px; background: var(--bl-bone); } .bl-proposal-event-strip strong { overflow-wrap: break-word; } .bl-proposal-columns, .bl-payment-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 22px; } .bl-proposal-experience, .bl-proposal-investment { min-width: 0; } .bl-proposal-experience .bl-list__item, .bl-proposal-investment .bl-list__item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: start; } .bl-proposal-experience .bl-list__item span, .bl-proposal-investment .bl-list__item span { overflow-wrap: break-word; word-break: normal; } .bl-proposal-investment { padding: 24px; border: 1px solid var(--bl-line-gold); background: var(--bl-paper); } .bl-proposal-review-card { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(0,1.2fr); gap: 32px; align-items: center; padding: 30px 34px; } .bl-proposal-review-actions { justify-content: flex-end; } .bl-proposal-review-actions .bl-btn { min-width: 0; min-height: 40px; padding: 0 14px; } .bl-proposal-preview { grid-column: 1 / -1; } .bl-proposal-preview__frame { width: 100%; min-height: 720px; border: 1px solid var(--bl-line); background: #fff; } .bl-proposal-sign { max-width: 900px; margin-right: auto !important; margin-left: 0 !important; } .bl-proposal-footer-actions { justify-content: flex-end; padding: 18px 0 4px; border-top: 1px solid var(--bl-line); } .bl-proposal-footer-actions .bl-btn { min-width: 164px; } .bl-signature-modes { display: inline-grid; grid-template-columns: repeat(2,auto); margin: 16px 0; border: 1px solid var(--bl-line); } .bl-signature-mode { min-height: 38px; padding: 0 16px; border: 0; background: transparent; color: var(--bl-muted); cursor: pointer; } .bl-signature-mode.is-active { background: var(--bl-ink); color: #fff; } .bl-signature-pad { width: 100%; max-width: 640px; height: 180px; border: 1px solid var(--bl-line); background: #fff; touch-action: none; } .bl-payment-plan-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 18px; } .bl-payment-plan-option { min-width: 0; padding: 18px; border: 1px solid var(--bl-line); background: #fff; cursor: pointer; } .bl-payment-plan-option.is-selected { border-color: var(--bl-gold); background: #fffaf0; } .bl-payment-schedule { margin-top: 22px; } .bl-contract-sign__text { max-height: 600px; margin: 22px 0; padding: 28px; overflow: auto; border: 1px solid var(--bl-line); background: #fff; font-family: Georgia,serif; } .bl-contract-signature-panel { max-width: 760px; padding-top: 24px; border-top: 1px solid var(--bl-line); } .bl-documents__list { display: grid; gap: 10px; } /* Questionnaire, music, messages and timeline */ .bl-q-tabs { display: flex; max-width: 100%; overflow-x: auto; border-bottom: 1px solid var(--bl-line); } .bl-q-tabs button { flex: 0 0 auto; min-height: 42px; padding: 0 16px; border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; } .bl-q-tabs button.is-active { border-color: var(--bl-gold); } .bl-progress { height: 3px; overflow: hidden; background: #e8e6df; } .bl-progress__bar { height: 100%; background: var(--bl-gold); transition: width .4s ease; } /* Booking uses the shared stepper markup, but its controls are a horizontal wizard. */ #boykin-portal #bl-booking-steps.bl-stepper--horizontal { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; width: 100% !important; margin: 0 0 24px !important; padding: 0 !important; overflow: hidden !important; border: 1px solid var(--bl-line-gold) !important; background: #fff !important; } #boykin-portal #bl-booking-steps.bl-stepper--horizontal .bl-stepper__item { position: relative !important; display: flex !important; grid-template-columns: none !important; align-items: center !important; justify-content: center !important; gap: 0 !important; width: 100% !important; min-width: 0 !important; min-height: 50px !important; height: auto !important; margin: 0 !important; padding: 10px 12px !important; overflow: hidden !important; border: 0 !important; border-right: 1px solid var(--bl-line) !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; color: var(--bl-muted) !important; font-family: var(--bl-sans) !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: .05em !important; text-align: center !important; text-transform: uppercase !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; cursor: pointer !important; } #boykin-portal #bl-booking-steps.bl-stepper--horizontal .bl-stepper__item:last-child { border-right: 0 !important; } #boykin-portal #bl-booking-steps.bl-stepper--horizontal .bl-stepper__item::after { content: ""; position: absolute; right: 16px; bottom: 0; left: 16px; height: 2px; background: transparent; } #boykin-portal #bl-booking-steps.bl-stepper--horizontal .bl-stepper__item.is-active { background: var(--bl-bone) !important; color: var(--bl-ink) !important; } #boykin-portal #bl-booking-steps.bl-stepper--horizontal .bl-stepper__item.is-active::after, #boykin-portal #bl-booking-steps.bl-stepper--horizontal .bl-stepper__item.is-complete::after { background: var(--bl-gold); } #boykin-portal #bl-booking-steps.bl-stepper--horizontal .bl-stepper__item.is-complete { color: var(--bl-teal-deep) !important; } #boykin-portal #bl-booking-steps.bl-stepper--horizontal .bl-stepper__item:hover, #boykin-portal #bl-booking-steps.bl-stepper--horizontal .bl-stepper__item:focus-visible { background: var(--bl-bone) !important; color: var(--bl-ink) !important; } /* Questionnaire is a measured working form, not a full-width billboard. */ .bl-questionnaire-wrap { width: min(100%,1080px); margin-right: auto; margin-left: auto; } .bl-questionnaire-intro { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 18px; align-items: center; padding: 17px 20px; border: 1px solid var(--bl-line-gold); background: var(--bl-bone); } .bl-questionnaire-intro strong { color: var(--bl-teal-deep); font-family: var(--bl-serif); font-size: 21px; font-weight: 500; } .bl-questionnaire-intro span { color: var(--bl-muted); font-size: 13px; } .bl-questionnaire #bl-questionnaire-step-title { font-size: 27px !important; line-height: 1.1 !important; } .bl-questionnaire .bl-save-later-done__title { margin: 0; color: var(--bl-teal-deep); font-family: var(--bl-serif) !important; font-size: 28px !important; font-style: normal !important; font-weight: 500 !important; line-height: 1.08 !important; } .bl-questionnaire .bl-save-later-done__text { color: var(--bl-muted); font-size: 15px; } .bl-questionnaire-progress { display: grid; gap: 8px; margin: 16px 0; } .bl-questionnaire-progress p { margin: 0; color: var(--bl-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .bl-questionnaire #bl-questionnaire-panel { padding: clamp(22px,4vw,44px); } .bl-questionnaire #bl-questionnaire-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 24px; } .bl-questionnaire #bl-questionnaire-form > .bl-form-row { min-width: 0; margin: 0; } .bl-questionnaire #bl-questionnaire-form > .bl-form-row:has(textarea) { grid-column: 1 / -1; } .bl-field-help { margin: 7px 0 0; color: var(--bl-muted); font-size: 12px; line-height: 1.5; } .bl-questionnaire-review__intro { grid-column: 1 / -1; margin: 0 0 4px; color: var(--bl-muted); } .bl-questionnaire-review__section { grid-column: 1 / -1; padding: 22px 0; border-top: 1px solid var(--bl-line); } .bl-questionnaire-review__heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .bl-questionnaire-review__heading h3 { margin: 0; color: var(--bl-teal-deep); font-family: var(--bl-serif); font-size: 26px; font-weight: 500; } .bl-questionnaire-review__edit { min-height: 34px; padding: 0 14px; border: 1px solid var(--bl-line-gold); border-radius: 0; background: #fff; color: var(--bl-ink); font: 700 10px/1 var(--bl-sans); text-transform: uppercase; letter-spacing: .07em; cursor: pointer; } .bl-questionnaire-review__list { display: grid; grid-template-columns: minmax(180px,.7fr) minmax(0,1.3fr); margin: 16px 0 0; } .bl-questionnaire-review__list dt, .bl-questionnaire-review__list dd { margin: 0; padding: 11px 0; border-top: 1px solid var(--bl-line); } .bl-questionnaire-review__list dt { padding-right: 20px; color: var(--bl-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .bl-questionnaire-review__list dd { color: var(--bl-ink); white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; } .bl-questionnaire-review__empty { margin: 12px 0 0; color: var(--bl-muted); font-style: italic; } .bl-music-overview, .bl-music-details-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; } .bl-music-add-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; } .bl-music-panel__heading, .bl-music-add-actions, .bl-music-savebar, .bl-music-share { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .bl-music-track-list { margin: 0; padding: 0; list-style: none; } .bl-music-track-list > li { padding: 13px 0; border-bottom: 1px solid var(--bl-line); } .bl-music-meter { height: 3px; background: #e8e6df; } .bl-music-meter span { display: block; height: 100%; background: var(--bl-gold); } .bl-music-search-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; } .bl-music-workspace { display: grid; gap: 18px; } .bl-music-panel { min-width: 0; } .bl-music-panel h3 { margin: 3px 0 0; color: var(--bl-teal-deep); font-family: var(--bl-serif); font-size: 29px; font-weight: 500; line-height: 1.05; } .bl-music-playlist-tools, .bl-music-edit-actions, .bl-music-track__actions, .bl-music-search-result__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .bl-music-count { color: var(--bl-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .bl-music-text-action, .bl-music-icon-btn, .bl-music-result-action { min-height: 34px; padding: 0 11px; border: 1px solid var(--bl-line-gold); background: #fff; color: var(--bl-teal-deep); font: 700 10px/1 var(--bl-sans); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; } .bl-music-text-action:hover, .bl-music-icon-btn:hover, .bl-music-result-action:hover { border-color: var(--bl-gold); background: var(--bl-ink); color: #fff; } .bl-music-icon-btn:disabled { opacity: .35; cursor: default; } .bl-music-icon-btn--danger { border-color: #d9c4c0; color: #8b4038; } .bl-music-empty { display: grid; gap: 4px; margin-top: 18px; padding: 28px 0 14px; border-top: 1px solid var(--bl-line); color: var(--bl-muted); } .bl-music-empty strong { color: var(--bl-ink); font-family: var(--bl-serif); font-size: 23px; font-weight: 500; } .bl-music-track { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: 14px; align-items: center; min-width: 0; } .bl-music-track__art, .bl-music-search-result__art { display: grid; width: 58px; height: 58px; place-items: center; overflow: hidden; border: 1px solid var(--bl-line); background: var(--bl-paper); color: var(--bl-gold); font-family: var(--bl-serif); font-size: 26px; } .bl-music-track__art img, .bl-music-search-result__art img { width: 100%; height: 100%; object-fit: cover; } .bl-music-track__copy, .bl-music-search-result__copy { display: grid; min-width: 0; gap: 2px; } .bl-music-track__title, .bl-music-search-result__copy strong { overflow: hidden; color: var(--bl-ink); font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .bl-music-track__artist, .bl-music-track__meta, .bl-music-search-result__copy small, .bl-music-search-result__copy em { overflow: hidden; color: var(--bl-muted); font-size: 12px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; } .bl-music-listen-menu { position: relative; } .bl-music-listen-menu summary { display: grid; min-height: 34px; padding: 0 11px; place-items: center; border: 1px solid var(--bl-line-gold); color: var(--bl-teal-deep); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; list-style: none; } .bl-music-listen-menu summary::-webkit-details-marker { display: none; } .bl-music-listen-menu > span { position: absolute; z-index: 4; top: calc(100% + 5px); right: 0; display: grid; min-width: 170px; border: 1px solid var(--bl-line); background: #fff; box-shadow: var(--bl-shadow); } .bl-music-listen-menu a { padding: 10px 12px; color: var(--bl-ink); font-size: 12px; text-decoration: none; } .bl-music-listen-menu a + a { border-top: 1px solid var(--bl-line); } .bl-music-catalog-search { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--bl-line); } .bl-music-search-results { display: grid; gap: 1px; margin-top: 12px; border: 1px solid var(--bl-line); background: var(--bl-line); } .bl-music-search-result { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: 13px; align-items: center; min-width: 0; padding: 10px; background: #fff; } .bl-music-result-action--add { background: var(--bl-ink); color: #fff; } .bl-music-suggestion-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin-top: 18px; border: 1px solid var(--bl-line); background: var(--bl-line); } .bl-music-suggestion { display: flex; min-width: 0; min-height: 78px; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border: 0; background: #fff; color: var(--bl-ink); text-align: left; cursor: pointer; } .bl-music-suggestion:hover { background: var(--bl-paper); } .bl-music-suggestion span { display: grid; min-width: 0; gap: 3px; } .bl-music-suggestion strong, .bl-music-suggestion small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bl-music-suggestion strong { font-family: var(--bl-serif); font-size: 17px; font-weight: 500; } .bl-music-suggestion small { color: var(--bl-muted); font-size: 11px; } .bl-music-suggestion b { color: var(--bl-gold); font-size: 22px; font-weight: 400; } .bl-music-share__intro { max-width: 500px; } .bl-music-savebar { align-items: center; padding: 17px 20px; border: 1px solid var(--bl-line); background: #fff; } .bl-music-savebar p { display: grid; gap: 2px; margin: 0; color: var(--bl-muted); font-size: 12px; } .bl-music-savebar strong { color: var(--bl-ink); } .bl-music-meter { margin: 18px 0 12px; } .bl-music-meter span { transition: width .35s ease; } .bl-messages { padding: 0; overflow: hidden; } .bl-messages__thread { min-height: 360px; max-height: 560px; padding: 24px; overflow-y: auto; } .bl-messages__compose, .bl-messages__composer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: end; padding: 16px; border-top: 1px solid var(--bl-line); } .bl-timeline-list, .bl-stepper { margin: 0; padding: 0; list-style: none; } .bl-stepper__item { position: relative; display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 14px; padding-bottom: 23px; } .bl-stepper__dot { width: 12px; height: 12px; margin-top: 5px; border: 1px solid var(--bl-gold); border-radius: 50%; background: #fff; } .bl-stepper__item.is-complete .bl-stepper__dot { background: var(--bl-gold); } /* Experience guide */ .bl-flipbook__stage { position: relative; width: min(100%,900px); margin: 0 auto; aspect-ratio: 16/10; background: var(--bl-bone); overflow: hidden; } .bl-flipbook__page { width: 100%; height: 100%; margin: 0; } .bl-flipbook__page img { width: 100%; height: 100%; object-fit: contain; } .bl-flipbook__hit { position: absolute; top: 0; bottom: 0; z-index: 2; width: 30%; border: 0; background: transparent; cursor: pointer; } .bl-flipbook__hit--prev { left: 0; } .bl-flipbook__hit--next { right: 0; } .bl-flipbook__controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; } .bl-flipbook__thumbs { display: flex; gap: 8px; max-width: 100%; margin-top: 14px; overflow-x: auto; } /* Planner notebook */ .blp-planner { color: var(--bl-ink); } .blp-hero { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 28px; align-items: center; padding: 40px 46px; border: 1px solid var(--bl-line-gold); background: #fff; box-shadow: var(--bl-shadow); } .blp-eyebrow { color: var(--bl-gold); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; } .blp-hero h1 { min-width: 0; margin: 7px 0 10px; color: var(--bl-teal-deep); font-family: var(--bl-serif); font-size: 48px; font-weight: 500; line-height: 1; overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: balance; } .blp-hero p { max-width: 700px; margin: 0; color: var(--bl-muted); } .blp-event-date { min-width: 210px; padding: 19px; border: 1px solid var(--bl-line-gold); background: var(--bl-paper); text-align: center; } .blp-event-date span { display: block; color: var(--bl-gold); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; } .blp-event-date strong { display: block; margin-top: 4px; color: var(--bl-teal-deep); font-family: var(--bl-serif); font-size: 24px; font-weight: 500; } .blp-workspace { min-width: 0; } .blp-pagebar, .blp-toolbar { display: flex; height: auto !important; min-height: 0; flex-wrap: wrap; align-items: center; gap: 9px; padding: 13px; border: 1px solid var(--bl-line); background: #fff; font-family: var(--bl-sans) !important; font-size: 14px; line-height: 1.3 !important; } .blp-pagebar { justify-content: space-between; margin-bottom: 10px; } .blp-toolbar { position: sticky; top: 8px; z-index: 20; margin-bottom: 16px; box-shadow: var(--bl-shadow-soft); } .blp-button, .blp-tool, .blp-icon-tool, .blp-toolmenu > summary, .blp-filter { display: inline-flex; width: auto; height: auto !important; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 12px; border: 1px solid var(--bl-line); border-radius: 0; background: #fff; color: var(--bl-ink); font-family: var(--bl-sans) !important; font-size: 11px !important; font-weight: 650 !important; line-height: 1.15 !important; letter-spacing: 0 !important; text-transform: none; cursor: pointer; } .blp-button--primary, .blp-tool--accent { border-color: var(--bl-gold); background: var(--bl-gold); color: #fff; } .blp-button:disabled, .blp-tool:disabled, .blp-icon-tool:disabled { opacity: .35; cursor: not-allowed; } .blp-page-select { display: grid; grid-template-columns: auto minmax(150px,1fr); align-items: center; gap: 9px; color: var(--bl-muted); font-size: 11px; } .blp-page-select select, .blp-field select, .blp-sticker-search input { min-height: 38px; padding: 7px 10px; border: 1px solid var(--bl-line); border-radius: 0; background: #fff; } .blp-page-count { color: var(--bl-muted); font-size: 11px; } .blp-toolgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .blp-toolgroup__label { margin-right: 3px; color: var(--bl-gold); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; } .blp-toolmenu { position: relative; } .blp-toolmenu > summary { list-style: none; } .blp-toolmenu > summary::-webkit-details-marker { display: none; } .blp-toolmenu__panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 35; width: min(420px,80vw); padding: 16px; border: 1px solid var(--bl-line); background: #fff; box-shadow: var(--bl-shadow); } .blp-toolmenu__panel--grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; } .blp-text-studio__heading { display: grid; margin-bottom: 13px; } .blp-text-studio__heading span { color: var(--bl-muted); font-size: 12px; } .blp-text-studio__fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(110px,.45fr); gap: 10px; margin-top: 10px; } .blp-field { display: grid; gap: 5px; color: var(--bl-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; } .blp-format-row, .blp-swatches, .blp-custom-colors { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; } .blp-swatch { width: 28px; height: 28px; border: 1px solid var(--bl-line); border-radius: 50%; background: var(--blp-swatch,#fff); cursor: pointer; } .blp-palette__label { display: block; margin-top: 11px; color: var(--bl-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; } .blp-history, .blp-save { display: flex; align-items: center; gap: 7px; } .blp-save { margin-left: auto; } .blp-book { position: relative; width: min(100%,1100px); min-height: 760px; margin: 0 auto; padding: 34px 72px 34px 54px; border: 1px solid var(--bl-line-gold); background: var(--bl-sand) var(--blp-cover-image) center/cover no-repeat; box-shadow: 0 28px 70px rgba(45,49,56,.16); overflow: visible; } .blp-paper { position: relative; width: 100%; min-height: 690px; border: 1px solid rgba(200,154,61,.36); background: var(--bl-pearl); box-shadow: 0 8px 26px rgba(45,49,56,.1); overflow: hidden; } .blp-paper::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0, transparent 43px, rgba(13,96,118,.14) 44px); pointer-events: none; } .blp-paper::after { content: ""; position: absolute; top: 0; bottom: 0; left: 72px; width: 1px; background: rgba(158,79,79,.16); pointer-events: none; } .blp-paper__static { position: relative; min-height: 690px; padding: 48px 58px 50px 100px; pointer-events: none; } .blp-paper__header { max-width: 700px; margin-bottom: 32px; } .blp-paper__header span { color: var(--bl-gold); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; } .blp-paper__header h3 { min-width: 0; margin: 4px 0 3px; color: var(--bl-teal-deep); font-family: var(--bl-serif); font-size: 46px; font-weight: 500; line-height: 1; overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: balance; } .blp-paper__header p { margin: 0; color: var(--bl-muted); } .blp-canvas { position: absolute; inset: 0; z-index: 5; touch-action: pan-y pinch-zoom; } .blp-writing-area { min-height: 440px; } .blp-calendar { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 7px; max-width: 720px; } .blp-calendar > * { min-width: 0; min-height: 52px; padding: 6px; border: 1px solid var(--bl-line); background: rgba(255,255,255,.72); overflow: hidden; } .blp-calendar button.blp-calendar__day { position: relative; z-index: 6; border-radius: 0; color: var(--bl-ink); font: inherit; line-height: 1; cursor: pointer; pointer-events: auto; transition: color .22s ease, background-color .22s ease, border-color .22s ease; } .blp-calendar button.blp-calendar__day:hover { border-color: var(--bl-gold); background: var(--bl-ink); color: #fff; } .blp-calendar button.blp-calendar__day:focus-visible { outline: 2px solid var(--bl-teal); outline-offset: 2px; } .blp-calendar button.blp-calendar__day.is-event-day { border-color: var(--bl-gold); box-shadow: inset 0 0 0 1px var(--bl-gold); } .blp-spine { position: absolute; top: 45px; bottom: 45px; left: 28px; z-index: 10; display: flex; flex-direction: column; justify-content: space-around; } .blp-spine span { display: block; width: 54px; height: 12px; border: 2px solid #a47a2b; border-radius: 10px; background: linear-gradient(90deg,#8a641f,#eed494,#8a641f); } .blp-book-tabs { position: absolute; top: 55px; right: 9px; z-index: 9; display: grid; gap: 4px; } .blp-book-tabs button { width: 64px; min-width: 0; min-height: 39px; padding: 0 8px; border: 1px solid var(--bl-line-gold); border-radius: 0; background: #fff; color: var(--bl-ink); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; text-align: center; } .blp-book-tabs button:hover { background: var(--bl-gold); color: #fff; } .blp-help { color: var(--bl-muted); font-size: 12px; text-align: center; } .blp-sticker-drawer { position: fixed; inset: 0; z-index: 100; } .blp-sticker-drawer__backdrop { position: absolute; inset: 0; border: 0; background: rgba(10,10,9,.68); } .blp-sticker-drawer__panel { position: absolute; top: 0; right: 0; width: min(440px,100%); height: 100%; padding: 22px; overflow-y: auto; background: var(--bl-paper); box-shadow: -20px 0 60px rgba(0,0,0,.2); } .blp-sticker-drawer__header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; } .blp-sticker-drawer__header h3 { margin: 4px 0 0; font-family: var(--bl-serif); font-size: 30px; font-weight: 500; } .blp-sticker-search { display: grid; gap: 6px; margin: 20px 0 12px; color: var(--bl-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; } .blp-sticker-filters { display: flex; flex-wrap: wrap; gap: 6px; } .blp-filter.is-active { border-color: var(--bl-gold); background: var(--bl-gold); color: #fff; } .blp-sticker-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 16px; } .blp-sticker-option { min-width: 0; padding: 10px; border: 1px solid var(--bl-line); background: #fff; cursor: pointer; } .blp-sticker-option img { width: 100%; aspect-ratio: 1; object-fit: contain; } .blp-sticker-option span { display: block; margin-top: 7px; color: var(--bl-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; } .blp-element { position: absolute; min-width: 48px; min-height: 38px; border: 1px solid transparent; touch-action: auto; } .blp-element.is-selected { border-color: var(--bl-gold); outline: 2px solid rgba(200,154,61,.16); } .blp-element--text, .blp-element--note { display: flex; flex-direction: column; background: rgba(255,255,255,.9); } .blp-element.is-editing { border-color: var(--bl-teal); outline: 2px solid rgba(13,96,118,.13); box-shadow: 0 8px 24px rgba(45,49,56,.08); } .blp-element__handle { flex: 0 0 24px; width: 100%; min-width: 0; min-height: 24px; padding: 0 9px; border: 0; border-bottom: 1px solid rgba(13,96,118,.13); border-radius: 0; background: rgba(252,251,249,.95); color: var(--bl-muted); font-size: 9px; line-height: 24px; text-align: left; text-transform: uppercase; letter-spacing: .08em; cursor: grab; touch-action: none; } .blp-element__handle:active { cursor: grabbing; } .blp-element__text { display: block; flex: 1 1 auto; width: 100%; min-width: 0; min-height: 0; height: auto; margin: 0; padding: 9px 11px; overflow: auto; border: 0; border-radius: 0; outline: 0; box-shadow: none; resize: none; caret-color: var(--bl-teal); cursor: text; touch-action: pan-y; -webkit-user-select: text; user-select: text; -webkit-overflow-scrolling: touch; } .blp-element__text:focus { border: 0; outline: 0; box-shadow: none; } .blp-element__text::placeholder { color: rgba(39,49,56,.48); } .blp-element__resize { position: absolute; right: -9px; bottom: -9px; z-index: 4; display: grid; place-items: center; width: 20px; min-width: 20px; height: 20px; min-height: 20px; padding: 0; border: 1px solid var(--bl-gold); border-radius: 50%; background: #fff; color: var(--bl-gold-dark); font-size: 10px; line-height: 1; cursor: nwse-resize; touch-action: none; } .blp-element__checklist { height: 100%; padding: 10px; overflow: auto; background: #fff; } .blp-checkline { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 7px; align-items: center; min-width: 0; margin-bottom: 6px; } .blp-checkline input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--bl-gold); } .blp-checkline input[type="text"] { width: 100%; min-width: 0; height: 30px; min-height: 30px; padding: 4px 2px; border: 0; border-bottom: 1px solid var(--bl-line); border-radius: 0; background: transparent; color: var(--bl-ink); touch-action: manipulation; } .blp-checkline input[type="text"]:focus { border-color: var(--bl-gold); outline: 0; box-shadow: none; } .blp-checkline__add { min-height: 30px; padding: 4px 8px; border: 1px solid var(--bl-line); border-radius: 0; background: #fff; color: var(--bl-teal); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; } .blp-element__sticker { width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; } .blp-element__sticker img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; } /* Authentication */ .bl-auth-gate { display: grid; grid-template-columns: minmax(360px,.9fr) minmax(420px,1.1fr); width: min(100%,1300px); min-height: 720px; margin: 34px auto; border: 1px solid var(--bl-line); background: #fff; box-shadow: var(--bl-shadow); } .bl-auth-gate__visual { min-width: 0; background: var(--bl-ink) url("../img/editorial/sections/concierge-v2.webp") center/cover no-repeat; color: #fff; } .bl-auth-gate__visual-inner { display: flex; min-height: 100%; flex-direction: column; justify-content: flex-end; padding: 48px; background: linear-gradient(to top,rgba(10,10,9,.86),rgba(10,10,9,.1) 62%); } .bl-auth-gate__eyebrow { color: var(--bl-gold-light); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; } .bl-auth-gate__heading { margin: 10px 0 0; font-family: var(--bl-serif); font-size: 48px; font-weight: 500; line-height: 1; } .bl-auth-gate__card { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 54px; } .bl-auth-gate__title { margin: 0; font-family: var(--bl-serif); font-size: 42px; font-weight: 500; line-height: 1; } .bl-auth-gate__text { color: var(--bl-muted); } .bl-auth-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 24px 0; border-bottom: 1px solid var(--bl-line); } .bl-auth-tab { min-height: 42px; border: 1px solid var(--bl-line-gold); border-bottom: 2px solid transparent; background: #fff; color: var(--bl-ink); cursor: pointer; } .bl-auth-tab + .bl-auth-tab { border-left: 0; } .bl-auth-tab.is-active { border-bottom-color: var(--bl-gold); background: var(--bl-bone); color: var(--bl-ink); } .bl-auth-form { min-width: 0; } .bl-auth-gate__switch { margin-top: 20px; color: var(--bl-muted); font-size: 13px; } .bl-auth-gate__link { border: 0; background: none; color: var(--bl-teal); cursor: pointer; text-decoration: underline; } /* The host theme assigns a teal button background with !important. Auth controls * sit outside #boykin-portal, so they need their own final, fully scoped reset. */ #boykin-portal-auth .bl-auth-tab { appearance: none !important; display: inline-flex !important; width: 100% !important; min-width: 0 !important; min-height: 44px !important; align-items: center !important; justify-content: center !important; padding: 8px 12px !important; border: 1px solid var(--bl-line-gold) !important; border-bottom-width: 2px !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; color: var(--bl-ink) !important; font-family: var(--bl-sans) !important; font-size: 12px !important; font-weight: 650 !important; line-height: 1.25 !important; letter-spacing: .06em !important; text-align: center !important; text-transform: uppercase !important; } #boykin-portal-auth .bl-auth-tab + .bl-auth-tab { border-left: 0 !important; } #boykin-portal-auth .bl-auth-tab.is-active { border-bottom-color: var(--bl-gold) !important; background: var(--bl-bone) !important; color: var(--bl-ink) !important; } #boykin-portal-auth .bl-auth-tab:hover, #boykin-portal-auth .bl-auth-tab:focus-visible { background: var(--bl-bone) !important; color: var(--bl-ink) !important; } #boykin-portal-auth .bl-auth-gate__link { appearance: none !important; display: inline !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 2px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--bl-teal) !important; font-family: var(--bl-sans) !important; font-size: 13px !important; font-weight: 650 !important; line-height: 1.5 !important; letter-spacing: 0 !important; text-align: left !important; text-decoration: underline !important; text-decoration-color: var(--bl-gold) !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important; text-transform: none !important; } #boykin-portal-auth .bl-auth-gate__link:hover, #boykin-portal-auth .bl-auth-gate__link:focus-visible { background: transparent !important; color: var(--bl-ink) !important; } #boykin-portal-auth .bl-auth-gate__link:focus-visible, #boykin-portal-auth .bl-auth-tab:focus-visible { outline: 2px solid var(--bl-gold) !important; outline-offset: 3px !important; } /* Consultation experience */ .bl-consultation-overview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0 0 24px; border-block: 1px solid var(--bl-line-gold); background: var(--bl-paper); } .bl-consultation-overview__step { min-width: 0; padding: 22px 24px; } .bl-consultation-overview__step + .bl-consultation-overview__step { border-left: 1px solid var(--bl-line); } .bl-consultation-overview__step > span { display: block; margin-bottom: 9px; color: var(--bl-gold); font-size: 10px; font-weight: 700; letter-spacing: .16em; } .bl-consultation-overview__step strong { display: block; color: var(--bl-teal); font-family: var(--bl-serif); font-size: 22px; font-weight: 500; line-height: 1.08; } .bl-consultation-overview__step p { margin: 8px 0 0; color: var(--bl-muted); font-size: 13px; line-height: 1.55; } .bl-consultation-scope { margin: 0 0 20px; padding: 14px 18px; border-left: 2px solid var(--bl-gold); background: var(--bl-bone); color: var(--bl-ink); font-size: 13px; line-height: 1.55; } .bl-consultations-book { display: grid; gap: 20px; } .bl-consultation-timezone { margin: -12px 0 0; color: var(--bl-muted); font-size: 12px; } .bl-consultation-timezone strong { color: var(--bl-ink); font-weight: 650; } .bl-consultation-types { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; min-width: 0; } .bl-consultation-type { position: relative; display: block; min-width: 0; min-height: 152px; border: 1px solid var(--bl-line); background: #fff; cursor: pointer; transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease; } .bl-consultation-type:hover { border-color: var(--bl-line-gold); } .bl-consultation-type.is-selected { border-color: var(--bl-gold); background: var(--bl-marble); box-shadow: inset 0 -3px var(--bl-gold); } .bl-consultation-type input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .bl-consultation-type input:focus-visible + .bl-consultation-type__body { outline: 2px solid var(--bl-teal); outline-offset: -4px; } .bl-consultation-type__body { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px 12px; min-height: 150px; padding: 20px; align-content: start; } .bl-consultation-type__title { min-width: 0; color: var(--bl-teal); font-family: var(--bl-serif); font-size: 22px; font-weight: 500; line-height: 1.08; overflow-wrap: normal; word-break: normal; text-wrap: balance; } .bl-consultation-type__meta { color: var(--bl-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; } .bl-consultation-type__price { color: var(--bl-ink); font-family: var(--bl-serif); font-size: 18px; text-align: right; } .bl-consultation-type__desc { grid-column: 1 / -1; color: var(--bl-muted); font-size: 12px; line-height: 1.48; } .bl-consultation-guidelines { padding: 16px 18px; border: 1px solid var(--bl-line); background: var(--bl-bone); } .bl-consultation-guidelines__title { margin: 0 0 7px; color: var(--bl-teal); font-family: var(--bl-serif); font-size: 18px; font-weight: 500; } .bl-consultation-guidelines__body { color: var(--bl-ink-soft); font-size: 12px; line-height: 1.6; } .bl-consultation-selected { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; padding: 13px 16px; border-block: 1px solid var(--bl-line); } .bl-consultation-selected__label { color: var(--bl-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; } .bl-consultation-selected strong { color: var(--bl-teal); font-family: var(--bl-serif); font-size: 18px; font-weight: 500; } .bl-consultation-booking-layout { display: grid; grid-template-columns: minmax(300px,.92fr) minmax(360px,1.08fr); gap: 28px; min-width: 0; align-items: start; } .bl-consultation-booking-layout__calendar, .bl-consultation-booking-layout__details { display: grid; gap: 18px; min-width: 0; } .bl-consultation-calendar-field .bl-calendar { padding: 18px; } .bl-consultation-providers { display: flex; flex-wrap: wrap; gap: 8px; } .bl-radio-pill { position: relative; display: inline-grid; min-height: 42px; place-items: center; cursor: pointer; } .bl-radio-pill input { position: absolute; width: 1px; height: 1px; opacity: 0; } .bl-radio-pill span { display: grid; min-height: 42px; padding: 0 16px; place-items: center; border: 1px solid var(--bl-line); background: #fff; color: var(--bl-ink); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .bl-radio-pill input:checked + span { border-color: var(--bl-gold); background: var(--bl-bone); color: var(--bl-teal); box-shadow: inset 0 -2px var(--bl-gold); } .bl-radio-pill input:focus-visible + span { outline: 2px solid var(--bl-teal); outline-offset: 2px; } .bl-consultation-provider-links { margin-top: 9px; color: var(--bl-muted); font-size: 12px; line-height: 1.45; } .bl-consultation-slots { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; } .bl-consultation-slots > .bl-form-hint { grid-column: 1 / -1; margin: 0; padding: 14px; border: 1px solid var(--bl-line); background: var(--bl-bone); } .bl-consultation-slot { min-width: 0; min-height: 42px; padding: 6px 8px; border: 1px solid var(--bl-line); background: #fff; color: var(--bl-ink); font: 650 12px/1.2 var(--bl-sans); cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease; } .bl-consultation-slot:hover, .bl-consultation-slot.is-active { border-color: var(--bl-gold); background: var(--bl-teal); color: #fff; } .bl-consultation-slot.is-booked, .bl-consultation-slot:disabled { background: var(--bl-bone); color: var(--bl-muted); cursor: not-allowed; opacity: .66; } .bl-consultation-review { padding: 16px 18px; border: 1px solid var(--bl-line-gold); background: var(--bl-marble); } .bl-consultation-review dl { display: grid; gap: 0; margin: 10px 0 0; } .bl-consultation-review dl > div { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--bl-line); } .bl-consultation-review dt { color: var(--bl-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .bl-consultation-review dd { min-width: 0; margin: 0; color: var(--bl-ink); font-size: 13px; text-align: right; overflow-wrap: break-word; } .bl-consultation-book-actions, .bl-consultation-calendar-links { display: flex; flex-wrap: wrap; gap: 9px; } .bl-consultation-book-actions .bl-btn { flex: 1 1 180px; } .bl-consultation-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 20px; min-width: 0; padding: 20px 0; border-top: 1px solid var(--bl-line); align-items: center; } .bl-consultation-item:first-child { margin-top: 12px; } .bl-consultation-item__main { display: grid; gap: 6px; min-width: 0; } .bl-consultation-item__main > strong { color: var(--bl-teal); font-family: var(--bl-serif); font-size: 21px; font-weight: 500; } .bl-consultation-item__main > span { color: var(--bl-muted); font-size: 12px; } .bl-consultation-item__status { width: fit-content; padding: 5px 8px; border: 1px solid var(--bl-line-gold); color: var(--bl-ink) !important; font-size: 9px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .bl-consultation-item__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; max-width: 420px; } .bl-consultation-room { position: fixed; inset: 0; z-index: 10020; display: grid; place-items: center; padding: 20px; } .bl-consultation-room[hidden] { display: none; } .bl-consultation-room__backdrop { position: absolute; inset: 0; background: rgba(13,13,13,.72); } .bl-consultation-room__panel { position: relative; z-index: 1; width: min(720px,100%); max-height: calc(100vh - 40px); padding: 26px; overflow: auto; background: var(--bl-paper); box-shadow: 0 28px 80px rgba(13,13,13,.3); } .bl-consultation-room__header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--bl-line); } .bl-consultation-room__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; } .bl-consultation-room__diary { padding-top: 16px; border-top: 1px solid var(--bl-line); } /* Responsive measurements */ @media (max-width: 1320px) { :root { --bl-panel: 260px; } .bl-portal__content { padding: 26px; } .bl-portal__panel { padding: 26px 18px 26px 0; } .blx-hero__copy, .bl-dashboard-hero__copy, .bl-booking-hero__copy, .bl-music-hero__copy, .bl-guide-hero__copy { padding: 38px; } .blx-hero__title, .bl-dashboard-hero__title, .bl-booking-hero h1, .bl-music-hero h1, .bl-guide-hero h1 { font-size: 40px; } #boykin-portal .blx-hero__title { font-size: 40px !important; } #boykin-portal :where(.bl-dashboard-hero__title, .bl-booking-hero h1, .bl-music-hero h1, .bl-guide-hero h1) { font-size: 40px !important; } } @media (max-width: 1120px) { .bl-portal__body { grid-template-columns: minmax(0,1fr); } .bl-portal__panel { display: none; position: fixed; top: 0; right: 0; z-index: 90; width: min(360px,92vw); height: 100dvh; padding: 24px; overflow-y: auto; background: var(--bl-paper); box-shadow: -20px 0 60px rgba(0,0,0,.18); } .bl-portal__panel.is-open { display: block; } .blx-hero, .bl-dashboard-hero, .bl-booking-hero, .bl-music-hero, .bl-guide-hero { grid-template-columns: minmax(0,.9fr) minmax(320px,1.1fr); } .bl-dashboard-quick-links, .bl-action-cards { grid-template-columns: repeat(2,minmax(0,1fr)); } .bl-event-type-grid, .bl-package-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .blp-book { width: 100%; padding-right: 72px; } } @media (max-width: 900px) { #boykin-portal { display: block; width: 100%; min-height: 100dvh; box-shadow: none; } #boykin-portal .bl-portal__sidebar { position: fixed !important; inset: 0 auto 0 0 !important; z-index: 100 !important; width: min(310px,88vw) !important; height: 100dvh !important; transform: translate3d(-102%,0,0) !important; visibility: visible !important; transition: transform .35s cubic-bezier(.25,1,.5,1); box-shadow: 24px 0 60px rgba(0,0,0,.25); } #boykin-portal .bl-portal__sidebar.is-open { transform: translate3d(0,0,0) !important; } #boykin-portal .bl-sidebar { width: 100% !important; height: 100dvh !important; } .bl-sidebar__close { display: block; } .bl-header__menu-btn { display: inline-grid; place-items: center; } .bl-header { padding-inline: 22px; } .bl-portal__content { padding: 22px 22px 94px; } .bl-portal__mobile-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 70; display: block; border-top: 1px solid var(--bl-line); background: rgba(251,250,247,.97); backdrop-filter: blur(14px); } .bl-mobile-nav { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); width: min(100%,720px); margin: 0 auto; } .bl-mobile-nav__item { display: grid; place-items: center; gap: 3px; min-width: 0; min-height: 66px; padding: 7px 3px; border: 0; background: transparent; color: var(--bl-muted); } .bl-mobile-nav__item.is-active { color: var(--bl-teal); } .bl-mobile-nav__icon svg { width: 18px; height: 18px; } .bl-mobile-nav__label { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; } .blx-hero, .bl-dashboard-hero, .bl-booking-hero, .bl-music-hero, .bl-guide-hero { grid-template-columns: minmax(0,1fr); } .blx-hero__media, .bl-dashboard-hero__media, .bl-booking-hero__visual, .bl-music-hero__art, .bl-guide-hero__image { grid-row: 1; } .bl-dashboard-hero > img.bl-dashboard-hero__media { grid-column: 1; grid-row: 1; } .bl-dashboard-hero__copy { grid-column: 1; grid-row: 2; } .blx-hero__media img, .bl-dashboard-hero > img.bl-dashboard-hero__media, .bl-dashboard-hero__media img, .bl-booking-hero__visual img, .bl-music-hero__art img, .bl-guide-hero__image { min-height: 0; aspect-ratio: 16/9; } .blx-hero__copy, .bl-dashboard-hero__copy, .bl-booking-hero__copy, .bl-music-hero__copy, .bl-guide-hero__copy { padding: 32px; } .blx-hero__title, .bl-dashboard-hero__title, .bl-booking-hero h1, .bl-music-hero h1, .bl-guide-hero h1 { font-size: 36px; } #boykin-portal .blx-hero__title { font-size: 36px !important; } #boykin-portal :where(.bl-dashboard-hero__title, .bl-booking-hero h1, .bl-music-hero h1, .bl-guide-hero h1) { font-size: 36px !important; } .bl-proposal-columns, .bl-payment-layout { grid-template-columns: minmax(0,1fr); } .bl-proposal-review-card { grid-template-columns: minmax(0,1fr); } .bl-proposal-review-actions { justify-content: flex-start; } .bl-music-overview { grid-template-columns: minmax(0,1fr); } .blp-hero { grid-template-columns: minmax(0,1fr); padding: 32px; } .blp-event-date { min-width: 0; width: fit-content; } .blp-toolbar { position: static; } .blp-book { width: 100%; min-height: 670px; padding: 24px 58px 24px 38px; } .blp-paper, .blp-paper__static { min-height: 620px; } .blp-paper__static { padding: 42px 34px 42px 72px; } .blp-paper__header h3 { font-size: 40px; } .blp-spine { left: 15px; } .blp-spine span { width: 43px; } .blp-book-tabs { right: 7px; } .blp-book-tabs button { width: 48px; padding-inline: 4px; font-size: 8px; } .bl-auth-gate { grid-template-columns: minmax(0,1fr); width: min(100% - 30px,680px); margin: 15px auto; } .bl-auth-gate__visual { min-height: 360px; } } @media (max-width: 720px) { body { font-size: 16px; } #boykin-portal .bl-btn:not(.bl-btn--sm) { height: auto !important; min-height: var(--bl-control-height); padding-block: 9px !important; white-space: normal; text-overflow: clip; } #boykin-portal .bl-btn--sm { height: auto !important; min-height: var(--bl-control-height-sm); padding-block: 7px !important; white-space: normal; text-overflow: clip; } .bl-header { display: grid; grid-template-columns: minmax(0,1fr) auto; min-height: 66px; gap: 9px; padding: 10px 12px; } .bl-header__left { gap: 9px; } .bl-header__menu-btn { width: 36px !important; min-width: 36px; min-height: 36px; padding: 0 !important; border-color: var(--bl-line) !important; background: transparent !important; color: var(--bl-ink) !important; } .bl-header__welcome { min-width: 0; } .bl-header__welcome, .bl-header__title { font-size: 19px; line-height: 1.05; } .bl-header__eyebrow { margin-bottom: 3px; font-size: 8px; } .bl-header__actions { grid-auto-columns: max-content; gap: 6px; } .bl-header__actions > .bl-sound-toggle { display: none; } .bl-header__panel-toggle { width: auto !important; min-width: 78px; min-height: 34px; padding-inline: 9px; font-size: 9px !important; } .bl-header__avatar { width: 32px; height: 32px; font-size: 12px; } .bl-header__signout { display: none; } .bl-portal__content { padding: 14px 14px 86px; } .bl-global-alert { margin: 12px 14px 0; } .bl-portal-test-banner { align-items: flex-start; padding: 10px 14px; } .bl-portal-test-banner__actions { display: none; } .bl-section > * + * { margin-top: 16px; } .bl-section__title { font-size: 31px; } #boykin-portal .bl-section__title { font-size: 31px !important; } .bl-card, .bl-admin-card, .bl-music-panel, .bl-editorial-panel, .bl-action-card, .bl-stat-card, .bl-booking-step { padding: 20px; } .bl-card__title { font-size: 24px; } .bl-card__subtitle { font-size: 20px; } #boykin-portal .bl-card__title { font-size: 24px !important; } #boykin-portal .bl-card__subtitle { font-size: 20px !important; } .bl-form-actions { align-items: stretch; width: 100%; margin-left: 0; } .bl-form-actions--between { display: flex; flex-direction: column-reverse; gap: 9px; } .bl-form-actions--primary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; width: 100%; } .bl-form-actions .bl-btn { width: 100%; min-width: 0; white-space: normal; text-overflow: clip; } .bl-grid--2, .bl-form-grid--2, .bl-dashboard-page__grid, .bl-dashboard-quick-links, .bl-action-cards, .bl-event-type-grid, .bl-package-grid, .bl-time-range-grid, .bl-proposal-event-strip, .bl-payment-plan-options, .bl-music-details-grid, .bl-music-add-grid { grid-template-columns: minmax(0,1fr); } .blx-hero__copy, .bl-dashboard-hero__copy, .bl-booking-hero__copy, .bl-music-hero__copy, .bl-guide-hero__copy { padding: 25px 21px 27px; } .blx-hero__title, .bl-dashboard-hero__title, .bl-booking-hero h1, .bl-music-hero h1, .bl-guide-hero h1 { font-size: 31px; line-height: 1.04; } #boykin-portal .blx-hero__title { font-size: 31px !important; } #boykin-portal :where(.bl-dashboard-hero__title, .bl-booking-hero h1, .bl-music-hero h1, .bl-guide-hero h1) { font-size: 31px !important; } .blx-hero__description { font-size: 14px; } .bl-dashboard-page__journey { grid-column: auto; } .bl-dashboard-timepiece { grid-template-columns: minmax(0,1fr); } .bl-event-countdown__grid { grid-template-columns: minmax(0,1fr); } .bl-event-countdown__secondary { grid-template-columns: repeat(3,minmax(0,1fr)); } .bl-editorial-panel__header { grid-template-columns: minmax(0,1fr); gap: 12px; align-items: start; } .bl-dashboard-hero__action, .bl-dashboard-page__focus-action, .bl-dashboard-page__mini-stat { grid-template-columns: minmax(0,1fr); align-items: start; } .bl-dashboard-hero__action .bl-btn, .bl-dashboard-page__focus-action .bl-btn { width: 100%; } .bl-booking-step { padding: 20px 16px; } .bl-calendar { padding: 12px; } .bl-calendar__weekdays, .bl-calendar__grid { gap: 2px; } .bl-calendar__grid button, .bl-calendar__day { font-size: 12px; } .bl-calendar__cell { font-size: 12px; } #boykin-portal #bl-booking-steps.bl-stepper--horizontal { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } #boykin-portal #bl-booking-steps.bl-stepper--horizontal .bl-stepper__item { min-height: 46px !important; padding: 8px 10px !important; border-bottom: 1px solid var(--bl-line) !important; font-size: 9px !important; } #boykin-portal #bl-booking-steps.bl-stepper--horizontal .bl-stepper__item:nth-child(2n) { border-right: 0 !important; } #boykin-portal #bl-booking-steps.bl-stepper--horizontal .bl-stepper__item:nth-last-child(-n+2) { border-bottom: 0 !important; } .bl-questionnaire-intro { grid-template-columns: minmax(0,1fr); gap: 5px; padding: 15px 16px; } .bl-questionnaire #bl-questionnaire-panel { padding: 22px 17px; } .bl-questionnaire #bl-questionnaire-step-title { font-size: 24px !important; } .bl-questionnaire #bl-questionnaire-form { grid-template-columns: minmax(0,1fr); gap: 18px; } .bl-questionnaire :where(.bl-input, .bl-select, .bl-textarea, input, select, textarea) { font-size: 16px !important; } .bl-questionnaire #bl-questionnaire-form > .bl-form-row:has(textarea) { grid-column: auto; } .bl-q-tabs { gap: 0; } .bl-q-tabs button { min-height: 39px; padding: 0 11px; font-size: 9px; white-space: nowrap; } .bl-questionnaire-review__list { grid-template-columns: minmax(0,1fr); } .bl-questionnaire-review__list dt { padding-bottom: 4px; border-top: 1px solid var(--bl-line); } .bl-questionnaire-review__list dd { padding-top: 0; border-top: 0; } .bl-drawer-addon { grid-template-columns: minmax(0,1fr); } .bl-proposal-page > :not(.blx-hero) { width: 100%; } .bl-proposal-document-card { padding: 28px 22px; } .bl-proposal-page__topbar { display: grid; gap: 8px; width: 100%; overflow: hidden; } .bl-proposal-page__topbar > .bl-section__back { width: fit-content; } .bl-proposal-quick-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; } .bl-proposal-quick-nav .bl-btn { width: 100%; min-height: 38px; padding-inline: 10px; font-size: 9px !important; } .bl-proposal-brandline, .bl-proposal-document-card__header, .bl-contract-document__heading { align-items: stretch; flex-direction: column; } .bl-proposal-document-card__header .bl-card__subtitle { font-size: 28px; } .bl-proposal-meta { width: 100%; justify-content: space-between; } .bl-proposal-status-card { width: 100% !important; margin-left: 0 !important; } .bl-proposal-progress li { padding: 11px 4px; font-size: 9px; } .bl-proposal-empty .bl-empty-state { padding: 26px 20px; } .bl-proposal-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; flex-direction: initial; } .bl-proposal-actions .bl-btn { width: 100%; min-width: 0; } .bl-proposal-actions .bl-btn--gold:only-child, .bl-proposal-actions .bl-btn--gold:last-child:nth-child(odd) { grid-column: 1 / -1; } .bl-proposal-review-card { gap: 20px; padding: 24px 20px; } .bl-proposal-review-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } .bl-proposal-review-actions .bl-btn { width: 100%; } .bl-proposal-footer-actions { display: grid; grid-template-columns: minmax(0,1fr); } .bl-proposal-footer-actions .bl-btn { width: 100%; min-width: 0; } .bl-proposal-preview__frame { min-height: 520px; } .bl-signature-pad { height: 150px; } .bl-music-panel__heading, .bl-music-add-actions, .bl-music-savebar, .bl-music-share { flex-direction: column; } .bl-music-search-row, .bl-messages__compose, .bl-messages__composer { grid-template-columns: minmax(0,1fr); } .bl-music-playlist-tools { width: 100%; } .bl-music-track, .bl-music-search-result { grid-template-columns: 52px minmax(0,1fr); } .bl-music-track__art, .bl-music-search-result__art { width: 52px; height: 52px; } .bl-music-track__actions, .bl-music-search-result__actions { grid-column: 1 / -1; padding-left: 66px; } .bl-music-suggestion-list { grid-template-columns: minmax(0,1fr); } .bl-music-savebar .bl-btn { width: 100%; } .blp-hero { padding: 24px 20px; } .blp-hero h1 { font-size: 37px; } .blp-pagebar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); height: auto !important; align-items: stretch; } .blp-page-select { grid-column: 1 / -1; grid-row: 1; grid-template-columns: minmax(0,1fr); } .blp-page-count { grid-column: 1 / -1; text-align: center; } .blp-pagebar .blp-button { width: 100%; } .blp-toolbar { height: auto !important; align-items: stretch; overflow: visible; } .blp-toolgroup { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; } .blp-toolgroup__label { grid-column: 1 / -1; } .blp-tool { width: 100% !important; min-width: 0; min-height: 40px; } .blp-toolbar > .blp-toolmenu, .blp-toolbar > .blp-history, .blp-toolbar > .blp-sound-control { flex: 1 1 calc(50% - 5px); min-width: 0; } .blp-toolmenu > summary, .blp-history, .blp-sound-control { width: 100% !important; min-height: 40px; } .blp-history { justify-content: center; } .blp-save { width: 100%; margin-left: 0; justify-content: space-between; } .blp-toolmenu { flex: 1 1 0; } .blp-toolmenu > summary { width: 100%; } .blp-toolmenu__panel { position: fixed; top: auto; right: 10px; bottom: 78px; left: 10px; width: auto; max-height: 70dvh; overflow-y: auto; } .blp-book { width: calc(100% - 12px); min-height: 610px; padding: 14px 18px 14px 24px; } .blp-paper, .blp-paper__static { min-height: 580px; } .blp-paper::after { left: 42px; } .blp-paper__static { padding: 38px 17px 35px 55px; } .blp-paper__header { margin-bottom: 22px; } .blp-paper__header h3 { font-size: 34px; } .blp-paper__header p { font-size: 13px; } .blp-calendar { gap: 3px; } .blp-calendar > * { min-height: 38px; padding: 3px; font-size: 10px; } .blp-spine { left: 6px; } .blp-spine span { width: 31px; height: 9px; } .blp-book-tabs { position: static; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1px; margin-top: 10px; transform: none; } .blp-book-tabs button { min-width: 0; padding: 0 3px; font-size: 8px; text-align: center; } .blp-sticker-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .bl-auth-gate { width: 100%; min-height: 100dvh; margin: 0; border: 0; } .bl-auth-gate__visual { min-height: 260px; } .bl-auth-gate__visual-inner { padding: 30px 22px; } .bl-auth-gate__heading { font-size: 38px; } .bl-auth-gate__card { padding: 34px 20px; } .bl-auth-gate__title { font-size: 36px; } } @media (max-width: 900px) { .bl-consultation-overview { grid-template-columns: minmax(0,1fr); } .bl-consultation-overview__step + .bl-consultation-overview__step { border-top: 1px solid var(--bl-line); border-left: 0; } .bl-consultation-types { grid-template-columns: repeat(2,minmax(0,1fr)); } .bl-consultation-booking-layout { grid-template-columns: minmax(0,1fr); } .bl-consultation-item { grid-template-columns: minmax(0,1fr); } .bl-consultation-item__actions { justify-content: flex-start; max-width: none; } } @media (max-width: 560px) { .bl-consultation-overview__step { padding: 18px; } .bl-consultation-types { grid-template-columns: minmax(0,1fr); } .bl-consultation-type, .bl-consultation-type__body { min-height: 0; } .bl-consultation-slots { grid-template-columns: repeat(2,minmax(0,1fr)); } .bl-consultation-review dl > div { grid-template-columns: minmax(0,1fr); gap: 4px; } .bl-consultation-review dd { text-align: left; } .bl-consultation-book-actions, .bl-consultation-calendar-links, .bl-consultation-item__actions { display: grid; grid-template-columns: minmax(0,1fr); } .bl-consultation-book-actions .bl-btn, .bl-consultation-calendar-links .bl-btn, .bl-consultation-item__actions .bl-btn { width: 100%; } .bl-consultation-room { padding: 10px; } .bl-consultation-room__panel { max-height: calc(100vh - 20px); padding: 20px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }