/* ───────────────────────────────────────────────────────────────────────────── BirdieBot Overrides Fixes for Webflow IX2 interactions that don't rebind on dynamically-cloned DOM nodes. Include this stylesheet AFTER the Webflow CSS on every page. ───────────────────────────────────────────────────────────────────────────── */ /* Table row action button — hidden by default, revealed on hover. Webflow IX2 normally manages this via opacity animation, but cloned rows lose those bindings. Pure CSS replicates the same behavior reliably. */ .tablerow:not(.header) .tablebutton { opacity: 0 !important; transition: opacity 0.2s ease !important; } .tablerow:not(.header):hover .tablebutton { opacity: 1 !important; } /* Team Members invite form — Send Invite button always visible (not hover-only). */ .tablerow.bb-invite-form-row .tablebutton.addnew { opacity: 1 !important; } /* Team Members invite form — row layout for 50/50 columns (override global formcontent column). */ .formcontent.bb-invite-form-content { flex-direction: row !important; } .bb-team-actions-row { justify-content: flex-end; margin-bottom: 10px; } .contextside .invitecontent { display: none; } .contextside .invitecontent .bb-send-invite-btn { width: 100%; justify-content: center; } .checkboxelement.w--redirected-checked { background-color: var(--admin-primary, #34c759); border-color: var(--admin-primary, #34c759); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M10 3L4.5 8.5 2 6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 12px; background-position: center; background-repeat: no-repeat; } /* Table row action column — reserve min-width so selecting a row doesn't shift left content. Selected card overlays; keep column width stable. */ .tablerow-right { min-width: 200px !important; } /* Table action button — fix width so "View" vs "View / Edit" text change doesn't cause layout shift when row becomes selected. */ .tablerow-right .tablebutton { min-width: 90px !important; } /* Checkbox checked state — filled background with a CSS checkmark. Used for multi-select in table rows and select-all in headers. */ .checkboxelement.checked { background-color: var(--black) !important; border-color: var(--black) !important; position: relative; font-size: 10px; } .checkboxelement.checked::after { content: ""; position: absolute; top: 50%; left: 50%; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: translate(-50%, -60%) rotate(45deg); } /* Page-ready gate — keep the ENTIRE page invisible from first paint until page JS has loaded data and rendered real content, then fade in as a single smooth reveal. Nav, content, everything — all at once. admin-read-client.js applies cached branding colours immediately (while the page is still invisible), then each page script calls client.contentReady() once data is rendered — that adds .content-ready on which triggers the transition below. A safety-net timeout in admin-read-client.js ensures the page is always revealed even if a page script errors or is missing. */ body { opacity: 0 !important; } /* Public login/cancel pages do not use admin-read-client gating. */ body.bb-public-login-page { opacity: 1 !important; } body.bb-public-login-page .page-wrapper, body.bb-public-login-page .loginsection, body.bb-public-login-page .glancewidget, body.bb-public-login-page .glancewidget-tabs, body.bb-public-login-page .contenttype.full-flex, body.bb-public-login-page .content-card, body.bb-public-login-page .loginblock { opacity: 1 !important; visibility: visible !important; } html.content-ready body { opacity: 1 !important; transition: opacity 0.15s ease !important; } /* Hide widget scrollbar chrome while preserving scrolling in preview/admin. */ .glancewidget-tab-nav, .widget-content, .widget-content.waitlist .waitliststep-block, .widget-content.custom .content-wrapper, .contextcards-wrapper, .contextcards-feed { -ms-overflow-style: none; scrollbar-width: none; } .glancewidget-tab-nav::-webkit-scrollbar, .widget-content::-webkit-scrollbar, .widget-content.waitlist .waitliststep-block::-webkit-scrollbar, .widget-content.custom .content-wrapper::-webkit-scrollbar, .contextcards-wrapper::-webkit-scrollbar, .contextcards-feed::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Right-side detail panel — hidden by default; page JS shows it when a row is selected. */ .contextside .activecontent { display: none; } /* Player profile page — default to #profile panel visible, hide empty state. */ .player-profile-page .contextside .emptystatecontent { display: none; } .player-profile-page .contextside #profile.activecontent { display: flex; } /* Player profile — use toasts for save feedback; hide w-form-done/fail. */ .player-profile-page #profile .w-form-done, .player-profile-page #profile .w-form-fail { display: none !important; } /* Player profile — hide Tee Times section (not integrated yet). */ .player-profile-page #teetimes { display: none !important; } /* Player profile waitlist and nearby-courses cards — thumbnail height. */ .player-profile-page #waitlist .reservationsthumbnail, .player-profile-page #nearby-courses .reservationsthumbnail { height: 89px !important; } /* Player profile Save button — disabled until there are changes to save. */ .player-profile-page .buttonblock.green.disabled { pointer-events: none !important; opacity: 0.5 !important; cursor: not-allowed !important; } /* Dashboard stat cards — use callout color for .statcard-text.background */ .statcard-text.background { color: var(--gold) !important; } /* Login / signup pages use a different layout (no .maincontent). Hide .loginblock until its page script reveals it. */ .loginblock { visibility: hidden; } /* Player login — progressive message styling */ .loginblock .bb-player-login-msg { margin-bottom: 12px; padding: 12px 16px; border-radius: 8px; font-size: 15px; line-height: 1.5; white-space: pre-line; } .loginblock .bb-player-login-msg.error { background: rgba(192, 54, 26, 0.12); color: #a12d14; } .loginblock .bb-player-login-msg.success { background: rgba(16, 134, 63, 0.12); color: #0d6a31; } .loginblock.bb-loaded { visibility: visible; } .loginsection { background-color: var(--admin-border); justify-content: center; align-items: center; min-height: 100vh; display: flex; position: relative; overflow: hidden; } .loginsection.withnav { flex-flow: column; justify-content: center; align-items: center; padding-top: 80px; } .loginsection.logincard { flex-flow: column; justify-content: center; align-items: center; padding-top: 0; } .loginoverlay { background-image: linear-gradient(#000000ad, #000000ad); position: absolute; inset: 0%; } .cardlogo { width: 160px; } .widgetlogin-overlay.bb-static-overlay { display: flex !important; position: relative !important; } /* Player login page (scoped, collision-free layout) */ .bb-player-login-page { min-height: 100vh; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; padding: 24px; } .bb-player-login-background { position: absolute; inset: 0; z-index: 0; } .bb-player-login-background-image { width: 100%; height: 100%; object-fit: cover; } .bb-player-login-shell { position: relative; z-index: 2; width: 100%; max-width: 620px; visibility: hidden; background: #7db400; border-radius: 28px; padding: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); } .bb-player-login-shell.bb-loaded { visibility: visible; } .bb-player-login-card { background: #fff; border-radius: 22px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16); } .bb-player-login-hero { position: relative; height: 150px; margin: 14px 14px 0; border-radius: 14px; overflow: hidden; } .bb-player-login-hero-image { width: 100%; height: 100%; object-fit: cover; } .bb-player-login-heading { margin-top: -64px; padding: 0 34px; text-align: center; position: relative; z-index: 2; } .bb-player-login-logo-wrap { width: 142px; height: 142px; margin: 0 auto 12px; border-radius: 18px; background: #050505; border: 4px solid #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; } .bb-player-login-logo { width: 76%; height: 76%; object-fit: contain; display: block; } .bb-player-login-title { font-size: clamp(40px, 5vw, 56px); line-height: 1.1; font-weight: 600; color: #072518; letter-spacing: -0.02em; } .bb-player-login-subtitle { margin-top: 8px; margin-bottom: 18px; color: #5f6667; font-size: clamp(22px, 3vw, 34px); line-height: 1.25; } .bb-player-login-card .player-login-form-block { margin: 0 20px 20px; padding: 0; background: transparent; border: 0; border-radius: 0; } .bb-player-login-card .player-login-form-block .formblock[data-player-login-form="email"], .bb-player-login-card .player-login-form-block .formblock[data-player-login-form="verify"] { background: #fff; border-radius: 12px; } .bb-player-login-card .player-login-form-block .formblock[data-player-login-form="verify"] { margin-top: 16px; padding: 12px; background: #eef2e7; } .bb-player-login-card .player-login-form-block .fieldblocks { gap: 8px; } .bb-player-login-card .player-login-form-block .labeltext { color: #232727; font-weight: 600; letter-spacing: 0.04em; font-size: 15px; text-transform: uppercase; } .bb-player-login-card .player-login-form-block .labeldivider { background: #d7d9d9; } .bb-player-login-card .player-login-form-block .formfields { height: 78px; border-radius: 16px; border: 2px solid #ececec; background: #f8f8f8; font-size: 18px; color: #40484c; padding: 0 18px; } .bb-player-login-card .player-login-form-block .button { width: 100%; min-height: 64px; border-radius: 10px; background: #7db400 !important; border: 0 !important; color: #fff !important; font-size: 18px; font-weight: 600; } .bb-player-login-card .player-login-form-block .button:hover { background: #6ca000 !important; } .bb-player-login-card .player-login-form-block .firstlogin { gap: 15px; } @media screen and (max-width: 767px) { .bb-player-login-shell { max-width: 100%; border-radius: 20px; padding: 8px; } .bb-player-login-card { border-radius: 16px; } .bb-player-login-hero { height: 128px; margin: 10px 10px 0; border-radius: 10px; } .bb-player-login-heading { margin-top: -52px; padding: 0 20px; } .bb-player-login-logo-wrap { width: 108px; height: 108px; border-width: 3px; border-radius: 14px; } .bb-player-login-title { font-size: 42px; } .bb-player-login-subtitle { font-size: 26px; } .bb-player-login-card .player-login-form-block { margin: 0 14px 14px; } .bb-player-login-card .player-login-form-block .formfields { height: 62px; } .bb-player-login-card .player-login-form-block .button { min-height: 56px; font-size: 20px; } } /* Player login (alternate class set from provided design) */ .playercard[data-player-login-root] { visibility: hidden; } .playercard[data-player-login-root].bb-loaded { visibility: visible; } .playercard { z-index: 9; grid-column-gap: 5px; grid-row-gap: 5px; background-color: var(--green); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1.5px solid #ffffff1a; border-radius: 20px; flex-flow: column; width: 390px; max-width: 100%; padding: 7px; display: flex; position: relative; } .playercard-content { background-color: var(--gold); border-radius: 14px 14px 5px 5px; flex-flow: column; flex: none; height: 77vh; min-height: 500px; max-height: 690px; display: flex; position: relative; overflow: clip; box-shadow: 0 0 5px 2px #0000002e; } .playercard-content.rounded { border-radius: 13px; } .playercard-login { flex: 1; } .playeroverlay { z-index: 999; background-color: var(--gold); border-radius: 0; flex: 1; display: flex; position: absolute; inset: 0%; } .playercontent-type.full-flex { flex: 1; display: flex; } .playercards.dark { color: var(--dark); background-color: rgba(255, 255, 255, 1); border-style: none; border-radius: 0; flex: 1; justify-content: flex-start; align-items: stretch; padding: 10px 10px 20px; overflow: scroll; } .playercards.dark.rounded { border-radius: 13px; } .playercard .tabhero.loginhero { border-radius: 8px; overflow: hidden; height: 89px; width: 100%; } .playercard .createlogo { width: 80px; height: 80px; margin: -40px auto 12px; border-radius: 13px; background: #050505; border: 3px solid #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; } .playercard .createlogo .fullimage { width: 100%; height: 100%; object-fit: contain; } .playercard .cardheading-block.loginheading { margin-top: 0; margin-bottom: 0px; } .playercard .content-stack-header.large { color: #072518; font-size: 26px; line-height: 1.1; text-align: center; margin-top: 0; } .playercard .content-stack-subheader.large { color: rgba(56, 56, 56, 1); font-size: 18px; line-height: 1.3; text-align: center; margin-top: 10px; margin-bottom: 16px; } .playercard .loginform-block.player-login-form-block { margin-top: 8px; padding-right: 10px; padding-top: 5px; padding-left: 10px; } .playercard .player-login-form-block .formblock[data-player-login-form="verify"] { margin-top: 16px; padding: 12px; background: #eef2e7; border-radius: 12px; } .playercard .player-login-form-block .button { font-size: 17px !important; min-height: 58px; border-radius: 10px; background-color: rgba(130, 182, 1, 1) !important; border: 1px solid rgba(121, 169, 4, 1) !important; } .bb-cancel-msg { margin: 0 16px 12px; padding: 12px 16px; border-radius: 8px; font-size: 17px; font-weight: 500; text-align: center; line-height: 1.5; } .bb-cancel-msg.error { background: rgba(192, 54, 26, 0.12); color: #ffb5a5; } .bb-cancel-msg.success { background: rgba(16, 134, 63, 0.1); color: rgba(0, 0, 0, 1); } .undo-countdown { text-align: center; margin-bottom: 0px; font-size: 16px; color: rgba(120, 120, 120, 1); } /* Login page submit button — black background */ .loginblock .loginform .button, .loginblock form.loginform .button { background-color: #000 !important; border-color: #000 !important; color: #fff !important; } .loginblock .loginform .button:hover, .loginblock form.loginform .button:hover { background-color: #1a1a1a !important; border-color: #1a1a1a !important; color: #fff !important; } /* Player login page — form block card styling and typography. Scoped to .player-login-form-block so admin login/signup stay unchanged. */ .loginform-wrapper:has(.player-login-form-block) .loginheader { font-size: 39px; } .loginform-wrapper:has(.player-login-form-block) .loginsubheader { font-size: 20px; } .loginform-wrapper:has(.player-login-form-block) { width: 444px; } .loginblock .loginform-block.player-login-form-block { padding: 15px; margin-top: 20px; background-color: #fff; border: 1.5px solid rgba(237, 237, 237, 1); border-radius: 10px; } .player-login-form-block form.loginform { gap: 10px; } /* Player login email field — full width, taller height, readable font size. */ .player-login-form-block .formfields.bb-player-login-email { width: 100%; height: 60px; font-size: 16px; } /* Remove browser default focus outline on form fields — the CSS border-color transition already provides a clear focus indicator. */ .formfields:focus { outline: none !important; } /* Toast notifications — fixed bottom-right, slide-in, auto-dismiss. Use: client.showToast("Message", "success") or showToast("Error", "error") */ .bb-toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .bb-toast { padding: 12px 18px; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 1.4; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateX(120%); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; } .bb-toast-success { background: #15803d; color: #fff; } .bb-toast-error { background: #c0392b; color: #fff; } .bb-toast.bb-toast-visible { transform: translateX(0); opacity: 1; } /* Prevent the nav from shrinking when main content is wide. */ .navwrapper { flex-shrink: 0 !important; } /* TipTap editor — match font size to form fields (15.5px). */ .textdoc-content .tiptap { font-size: 15.5px; line-height: 1.8em; } /* Inner hero nav links — match active border to callout theme color. */ .innerhero-nav-link.active { border-bottom-color: var(--gold) !important; } /* TipTap text size overrides (adjust these as needed) */ .textdoc-content .tiptap p { font-size: 15px; margin-bottom: .5em; } .textdoc-content .tiptap h1 { font-size: 20px; font-weight: 600; margin-top: .25em; margin-bottom: 0.25em; } .textdoc-content .tiptap h2 { font-size: 18px; font-weight: 600; margin-top: 0.25em; margin-bottom: 0.25em; } .textdoc-content .tiptap h3 { font-size: 16px; font-weight: 600; margin-top: 0.25em; margin-bottom: 0.25em; } .textdoc-content .tiptap ul, .textdoc-content .tiptap ol { padding-left: 15px; margin-top: 0.5em; margin-bottom: 0.5em; } .textdoc-content .tiptap li { margin-bottom: 0.25em; } /* TipTap editor surface — keep consistent across pages (knowledge/chat). */ .textdoc-content .tiptap, .textdoc-content .tiptap-editable, .textdoc-content .ProseMirror { outline: none !important; border: none !important; box-shadow: none !important; height: 100%; overflow-y: auto; color: var(--admin-dark, #1a1a1a); } /* Welcome/Failed Message textareas — match line height for readability. */ .formfields.message._100 { line-height: 1.5em; padding-top: 12px; padding-bottom: 12px; } /* Input prefix styling (e.g. for # links) */ .input-prefix-wrapper { position: relative; display: flex; align-items: center; } .input-prefix { position: absolute; left: 12px; font-size: 15.5px; font-weight: 500; color: #9ca3af; pointer-events: none; z-index: 2; } .input-prefix-wrapper .formfields { padding-left: 30px !important; } /* Landing Page URL — domain prefix (read-only) + editable course slug only */ .landing-url-field { display: flex; align-items: center; border: 1.5px solid var(--admin-border, #e5e7eb); border-radius: 5px; background-color: #fff; overflow: hidden; } .landing-url-field .landing-url-prefix { flex-shrink: 0; padding: 0 12px; font-size: 15.5px; color: #9ca3af; background-color: #f9fafb; border-right: 1.5px solid var(--admin-border, #e5e7eb); white-space: nowrap; } .landing-url-field .formfields.pageurl { flex: 1; min-width: 0; border: none !important; background-image: none !important; padding-left: 12px !important; } /* Chat Preview Send Button Hover Effect */ .tldrchat-send-button { transition: filter 0.2s ease; } .tldrchat-send-button:hover { filter: none !important; } .sendicon { width: 20px; height: 19px; background-color: currentColor; -webkit-mask-image: url("../images/sendicon.svg"); mask-image: url("../images/sendicon.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transform: translateX(-3px); transition: transform 0.2s ease; } .tldrchat-send-button:hover .sendicon { transform: translateX(0); } .sendwaves { width: 9px; height: 13px; background-color: currentColor; -webkit-mask-image: url("../images/sendwaves.svg"); mask-image: url("../images/sendwaves.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; opacity: 0; transition: opacity 0.2s ease; } .tldrchat-send-button:hover .sendwaves { opacity: 1; } /* ── Waitlist Widget Flow ──────────────────────────────────────────────────── Shared across widget-settings preview and course landing page. Branding colours are injected as CSS custom properties on .widget-content.waitlist by the page JS: --bb-accent (button / active-step colour, default #639F28) --bb-bg-05 (time-item fill at 5 % opacity) --bb-bg-10 (time-item hover fill at 10 % opacity) ──────────────────────────────────────────────────────────────────────────── */ .widget-content.waitlist { --bb-accent: #639F28; --bb-bg-05: rgba(5, 77, 87, 0.05); --bb-bg-10: rgba(5, 77, 87, 0.10); position: relative; overflow: hidden !important; height: 100%; min-height: 100%; } .widget-content.waitlist .birdiebotwaitlist-step { flex: 1 1 auto; min-height: 100%; height: 100%; position: relative; overflow: hidden; } .birdiebotwaitlist-step .waitliststep-block { overflow: auto; } .birdiebotwaitlist-step .widgetlogin-overlay, .birdiebotwaitlist-step .widgetconfirm-overlay { inset: 0; } .widget-content.waitlist .complete-overlay-details { display: flex; flex-direction: column; gap: 5px; } /* Widget confirmation overlay layout tweaks */ .widget-content.waitlist .widgetconfirm-overlay .tabhero img.full-image { height: 100px; } .widget-content.waitlist .widgetconfirm-overlay .cardheading-block.loginheading { margin-top: -89px; } .widget-content.waitlist .widgetconfirm-overlay .content-card { gap: 5px; } .widget-content.waitlist .widgetconfirm-overlay .loginform-block { gap: 7px; } /* Buttons */ .widget-content.waitlist .waitlistbutton { background-color: var(--bb-accent) !important; border-color: var(--bb-accent) !important; color: #fff !important; } .widget-content.waitlist .waitlistbutton:hover { filter: brightness(110%); } .widget-content.waitlist .waitlistbutton.disabled { opacity: .45 !important; cursor: not-allowed !important; pointer-events: none !important; filter: none !important; } /* Calendar */ .widget-content.waitlist .waitlistcalendar-day.disabled { opacity: .35 !important; cursor: not-allowed !important; pointer-events: none !important; } /* Time grid */ .widget-content.waitlist .waitlisttimes-block { grid-column-gap: 3px; grid-row-gap: 3px; background-color: #ffffff0d; border: 1.5px solid #054D571A; border-radius: 10px; flex-flow: column; padding: 3px; font-weight: 500; display: flex; overflow: hidden; } .widget-content.waitlist .waitlisttimes-row { grid-column-gap: 3px; grid-row-gap: 3px; border-radius: 6px; display: flex; overflow: hidden; } .widget-content.waitlist .waitlisttimes-item { cursor: pointer; color: #000; background-color: var(--bb-bg-05); border-radius: 6px; flex-flow: column; flex: 1; justify-content: center; align-items: center; height: 60px; font-size: 15px; transition: all .2s; display: flex; text-decoration: none; } .widget-content.waitlist .waitlisttimes-item:hover { background-color: var(--bb-bg-10); } .widget-content.waitlist .waitlisttimes-item.selected { background-color: var(--navy); color: var(--white); } .widget-content.waitlist .waitlisttimes-item.tod { cursor: default; background-color: #bb8f2f00; } .widget-content.waitlist .waitlisttimes-item.tod:hover { background-color: #bb8f2f00; } .widget-content.waitlist .timeofday { opacity: .6; text-transform: uppercase; margin-top: -7px; margin-bottom: 4px; font-size: 11.55px; font-weight: 600; } /* Overlay close button */ .widget-content.waitlist .waitlistoverlay-close { position: absolute; top: 5px; left: 5px; width: 40px; height: 40px; border-radius: 10px; background-color: rgba(255, 255, 255, 0); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; z-index: 3; cursor: pointer; opacity: .85; transition: background-color .2s, opacity .2s; } .widget-content.waitlist .waitlistoverlay-close svg { opacity: .8; transition: opacity .2s; } .widget-content.waitlist .waitlistoverlay-close:hover { background: rgba(255, 255, 255, 0.15); opacity: 1; } .widget-content.waitlist .waitlistoverlay-close:hover svg { opacity: 1; } /* Login message */ .widget-content.waitlist .waitlist-login-message { display: none; margin-bottom: 10px; padding: 15px 20px; border-radius: 8px; font-size: 15.55px; line-height: 1.5; text-align: center; font-weight: 500; white-space: pre-line; } .widget-content.waitlist .waitlist-login-message.error { background: rgba(192, 54, 26, 0.12); color: #a12d14; } .widget-content.waitlist .waitlist-login-message.success { background: rgba(16, 134, 63, 0.12); color: #0d6a31; } /* Submit message */ .widget-content.waitlist .waitlist-submit-message { display: none; margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.4; } .widget-content.waitlist .waitlist-submit-message.error { background: rgba(192, 54, 26, 0.12); color: #a12d14; } .widget-content.waitlist .waitlist-submit-message.success { background: rgba(16, 134, 63, 0.12); color: #0d6a31; } /* Step breadcrumb active state */ .waitliststep.current-step { opacity: 1 !important; color: var(--bb-accent) !important; } .waitliststep.current-step .waitlisticon-block { opacity: 1 !important; border-color: var(--bb-accent) !important; color: var(--bb-accent) !important; } .waitliststep.current-step .waitlisticon-block svg { color: var(--bb-accent) !important; } .waitliststep.disabled { pointer-events: none !important; cursor: not-allowed !important; } /* Empty media/quote/row rows: show centered upload icon placeholder. */ .thumbnailpicker { display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; } img.full-image.media-upload-placeholder { position: static !important; inset: auto !important; width: 18px !important; height: 18px !important; object-fit: contain !important; padding: 0 !important; opacity: 0.5; transition: opacity 0.2s ease; } .thumbnailpicker:hover img.full-image.media-upload-placeholder { opacity: 0.8; } /* Specific overrides for content-type blocks if needed */ .contenttype-block[content-type="photos"] .thumbnailpicker, .contenttype-block[content-type="quote"] .thumbnailpicker, .contenttype-block[content-type="row"] .thumbnailpicker { display: flex; align-items: center; justify-content: center; cursor: pointer; } .contenttype-block[content-type="photos"] .thumbnailpicker img.full-image.media-upload-placeholder, .contenttype-block[content-type="quote"] .thumbnailpicker img.full-image.media-upload-placeholder, .contenttype-block[content-type="row"] .thumbnailpicker img.full-image.media-upload-placeholder { position: static; inset: auto; width: 18px; height: 18px; object-fit: contain; padding: 0; opacity: 0.5; transition: opacity 0.2s ease; } .contenttype-block[content-type="photos"] .thumbnailpicker:hover img.full-image.media-upload-placeholder, .contenttype-block[content-type="quote"] .thumbnailpicker:hover img.full-image.media-upload-placeholder, .contenttype-block[content-type="row"] .thumbnailpicker:hover img.full-image.media-upload-placeholder { opacity: 0.5; } /* Row content preview list spacing inside card wrapper. */ .widget-content.custom .content-row-list.buttons { display: flex; flex-direction: column; gap: 5px; } /* Content editor: keep only delete + explicit static secondary action. */ .contentblock .rowcard-actions .rowcard-action:not(.delete):not(.static-secondary-action) { display: none; } .contentblock .bb-favorite-label-input { max-width: 220px; margin-right: 8px; } .contentblock .rowcard-action.static-secondary-action.active, .contentblock .rowcard-action.static-secondary-action.is-active { color: var(--gold, #639F28); transform: scale(1.06); } .contentblock .widgetsmodal .pillswrapper.bb-favorites-picker { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; align-content: stretch; gap: 8px; } .contentblock .widgetsmodal .pillswrapper.bb-favorites-picker .bb-widgetpill-section { display: flex; flex-direction: column; width: 100%; flex: 0 0 auto; gap: 4px; } .contentblock .widgetsmodal .pillswrapper.bb-favorites-picker .bb-widgetpill-section-row { width: 100%; margin: 0; } .contentblock .widgetsmodal .pillswrapper.bb-favorites-picker .bb-widgetpill-section-pills { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 5px; } .contentblock .widgetsmodal .pillswrapper.bb-favorites-picker .bb-widgetpill-section-pills .widgetpill { width: fit-content; max-width: 100%; } .contentblock .widgetsmodal .pillswrapper.bb-favorites-picker .bb-widgetpill-empty { font-size: 12px; opacity: 0.65; padding: 4px 2px; } /* Widget settings modal: slightly reduced height */ .widgetsmodal { height: 113px; } /* Fix clipping of widgetsmodal dropdown by parent card */ .rowcard.verticaldown, .rowcard.withdrag, .dropdownblocks { overflow: visible !important; } /* Course info grid uses stored background color, not callout color. */ .widget-content.custom .holes-grid { border-color: var(--navy-1a); } .widget-content.custom .holes-grid .grid-rows { background-color: transparent; border-bottom-color: var(--navy-1a); } .widget-content.custom .holes-grid .grid-rows.alt { background-color: var(--navy-0d); } .widget-content.custom .holes-grid .grid-rows.header { background-color: var(--navy); } .widget-content.custom .holes-grid .grid-block { border-right-color: var(--navy-1a); } /* Form content editor: title + background-style toggle row. */ .contenttype-block[content-type="form"] .contentheader .bb-form-card-style-row { display: flex; align-items: center; gap: 5px; } .contenttype-block[content-type="form"] .contentheader .bb-form-card-style-row .formfields { flex: 1; } .contenttype-block[content-type="photos"] .contentheader .bb-media-card-style-row { display: flex; align-items: center; gap: 5px; } .contenttype-block[content-type="photos"] .contentheader .bb-media-card-style-row .formfields { flex: 1; } .contenttype-block[content-type="quote"] .contentheader .bb-quote-card-style-row, .contenttype-block[content-type="QA"] .contentheader .bb-qa-card-style-row, .contenttype-block[content-type="row"] .contentheader .bb-row-card-style-row, .contenttype-block[content-type="stack"] .contentheader .bb-stack-card-style-row { display: flex; align-items: center; gap: 5px; } .contenttype-block[content-type="quote"] .contentheader .bb-quote-card-style-row .formfields, .contenttype-block[content-type="QA"] .contentheader .bb-qa-card-style-row .formfields, .contenttype-block[content-type="row"] .contentheader .bb-row-card-style-row .formfields, .contenttype-block[content-type="stack"] .contentheader .bb-stack-card-style-row .formfields { flex: 1; } .contenttype-block[content-type="form"] .contentheader .bb-form-card-bg-toggle { width: 20px; height: 20px; border: 1.5px solid var(--admin-border); border-radius: 4px; background-color: #fff; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } .contenttype-block[content-type="photos"] .contentheader .bb-media-card-bg-toggle { width: 20px; height: 20px; border: 1.5px solid var(--admin-border); border-radius: 4px; background-color: #fff; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } .contenttype-block[content-type="quote"] .contentheader .bb-quote-card-bg-toggle, .contenttype-block[content-type="QA"] .contentheader .bb-qa-card-bg-toggle, .contenttype-block[content-type="row"] .contentheader .bb-row-card-bg-toggle, .contenttype-block[content-type="stack"] .contentheader .bb-stack-card-bg-toggle { width: 20px; height: 20px; border: 1.5px solid var(--admin-border); border-radius: 4px; background-color: #fff; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } .contenttype-block[content-type="form"] .contentheader .bb-form-card-bg-toggle.is-active { background-color: var(--navy); border-color: var(--navy); } .contenttype-block[content-type="photos"] .contentheader .bb-media-card-bg-toggle.is-active { background-color: var(--navy); border-color: var(--navy); } .contenttype-block[content-type="quote"] .contentheader .bb-quote-card-bg-toggle.is-active, .contenttype-block[content-type="QA"] .contentheader .bb-qa-card-bg-toggle.is-active, .contenttype-block[content-type="row"] .contentheader .bb-row-card-bg-toggle.is-active, .contenttype-block[content-type="stack"] .contentheader .bb-stack-card-bg-toggle.is-active { background-color: var(--navy); border-color: var(--navy); } .widget-content.custom .content-stack-list.buttons { display: flex; flex-direction: column; gap: 5px; } .widget-content.custom .content-quote-list { display: flex; flex-direction: column; gap: 5px; } /* Base custom content cards should use course callout tint at 5%. */ .widget-content.custom .content-card.more { background-color: #fff; border-color: #E5E7EB; } /* Card background mode: explicit dark mode when toggle is active. */ .widget-content.custom .content-card.more.bb-card-bg-enabled { background-color: var(--navy); border-color: var(--navy); } .widget-content.custom .content-card.bb-card-bg-enabled { background-color: var(--navy); border-color: var(--navy); } .widget-content.custom .content-card.more.bb-card-bg-enabled .content-stack-header, .widget-content.custom .content-card.more.bb-card-bg-enabled .content-stack-subheader, .widget-content.custom .content-card.more.bb-card-bg-enabled .labeltext { color: #fff; } .widget-content.custom .content-card.more.bb-card-bg-enabled .content-row-link .content-stack-header, .widget-content.custom .content-card.more.bb-card-bg-enabled .content-row-link .content-stack-subheader, .widget-content.custom .content-card.more.bb-card-bg-enabled .content-stack-link .content-stack-header, .widget-content.custom .content-card.more.bb-card-bg-enabled .content-stack-link .content-stack-subheader { color: #000 !important; } .widget-content.custom .content-card.more.bb-card-bg-enabled .formfields:focus { border-color: var(--gold); } .widget-content.custom .content-card.bb-card-bg-enabled .content-stack-header, .widget-content.custom .content-card.bb-card-bg-enabled .content-stack-subheader { color: #fff; } .widget-content.custom .content-card.bb-card-bg-enabled .content-row-link .content-stack-header, .widget-content.custom .content-card.bb-card-bg-enabled .content-row-link .content-stack-subheader, .widget-content.custom .content-card.bb-card-bg-enabled .content-stack-link .content-stack-header, .widget-content.custom .content-card.bb-card-bg-enabled .content-stack-link .content-stack-subheader { color: #000 !important; } .widget-content.custom .content-card.more.bb-card-bg-enabled .labeldivider.bb-on-dark { background-color: #ffffff1a; } /* Row content link background color update */ .widget-content.custom .content-row-link, .widget-content.custom .content-stack-link { background-color: #fff !important; color: #000 !important; } /* Keep email field icon consistent on focus */ .formfields.emailfield:focus { background-image: linear-gradient(#ffffff80, #ffffff80), url('../images/at.svg') !important; } /* Button design: Dark uses stored background color */ .widget-content.custom .button.dark { background-color: var(--navy); border-color: var(--navy); color: #fff; } .widget-content.custom .button.dark:hover { opacity: 0.9; } /* Gallery hover overlay icon + restored lightbox styles. */ .widget-content.custom .photo-holder .imageoverlay { opacity: 0; display: flex; align-items: flex-start; justify-content: flex-end; padding: 15px; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.68) 100%); transition: opacity 0.2s ease; } .widget-content.custom .photo-holder:hover .imageoverlay { opacity: 1; } .widget-content.custom .photo-holder .imageoverlay .imageoverlay-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; background-color: #fff; -webkit-mask-image: url("../images/magnify.svg"); mask-image: url("../images/magnify.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; pointer-events: none; } .widget-content.custom .photo-holder .imageoverlay .imageoverlay-label { display: none; } .bb-media-lightbox { position: fixed; inset: 0; z-index: 200000; display: none; align-items: center; justify-content: center; } .bb-media-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(2px); } .bb-media-lightbox-image { position: relative; z-index: 1; max-width: min(90vw, 1100px); max-height: 82vh; width: auto; height: auto; border-radius: 10px; object-fit: contain; } .bb-media-lightbox-close { position: absolute; top: 20px; right: 20px; z-index: 3; width: 36px; height: 36px; border: 0; border-radius: 8px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; } .bb-media-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; } .bb-media-lightbox-nav.prev { left: 20px; } .bb-media-lightbox-nav.next { right: 20px; } .bb-media-lightbox-label { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 3; max-width: min(84vw, 780px); color: #fff; text-align: center; font-size: 14px; line-height: 1.4; padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.38); } .contextcards-wrapper { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-color: rgba(6, 65, 68, 0.33); border: 1.5px solid #ffffff1a; border-radius: 20px; width: 333px; overflow: visible; animation: bb-context-fade-drop 220ms ease-out both; } .contextcards-feed { grid-column-gap: 10px; grid-row-gap: 10px; flex-flow: column; padding: 7px; display: flex; overflow: visible; } .contextcard-item { grid-column-gap: 5px; grid-row-gap: 5px; background-color: rgba(255, 255, 255, 1); border-radius: 10px; flex-flow: column; padding: 8px; display: flex; overflow: hidden; animation: bb-context-fade-drop 220ms ease-out both; } .contextcards-feed .contextcard-item:nth-child(1) { animation-delay: 20ms; } .contextcards-feed .contextcard-item:nth-child(2) { animation-delay: 45ms; } .contextcards-feed .contextcard-item:nth-child(3) { animation-delay: 70ms; } .contextcards-feed .contextcard-item:nth-child(4) { animation-delay: 95ms; } .contextcards-feed .contextcard-item:nth-child(5) { animation-delay: 120ms; } @keyframes bb-context-fade-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Context card preview: mirror .widget-content.custom styles */ .contextcard-item .holes-grid { border-color: var(--navy-1a); } .contextcard-item .holes-grid .grid-rows { background-color: transparent; border-bottom-color: var(--navy-1a); } .contextcard-item .holes-grid .grid-rows.alt { background-color: var(--navy-0d); } .contextcard-item .holes-grid .grid-rows.header { background-color: var(--navy); } .contextcard-item .holes-grid .grid-block { border-right-color: var(--navy-1a); } .contextcard-item .content-row-list.buttons, .contextcard-item .content-stack-list.buttons { display: flex; flex-direction: column; gap: 5px; } .contextcard-item .content-quote-list { display: flex; flex-direction: column; gap: 5px; } .contextcard-item .content-card.more { background-color: #fff; border-color: #E5E7EB; } .contextcard-item .content-card.more.bb-card-bg-enabled { background-color: var(--navy); border-color: var(--navy); } .contextcard-item .content-card.bb-card-bg-enabled { background-color: var(--navy); border-color: var(--navy); } .contextcard-item .content-card.more.bb-card-bg-enabled .content-stack-header, .contextcard-item .content-card.more.bb-card-bg-enabled .content-stack-subheader, .contextcard-item .content-card.more.bb-card-bg-enabled .labeltext { color: #fff; } .contextcard-item .content-card.more.bb-card-bg-enabled .content-row-link .content-stack-header, .contextcard-item .content-card.more.bb-card-bg-enabled .content-row-link .content-stack-subheader, .contextcard-item .content-card.more.bb-card-bg-enabled .content-stack-link .content-stack-header, .contextcard-item .content-card.more.bb-card-bg-enabled .content-stack-link .content-stack-subheader { color: #000 !important; } .contextcard-item .content-card.more.bb-card-bg-enabled .formfields:focus { border-color: var(--gold); } .contextcard-item .content-card.bb-card-bg-enabled .content-stack-header, .contextcard-item .content-card.bb-card-bg-enabled .content-stack-subheader { color: #fff; } .contextcard-item .content-card.bb-card-bg-enabled .content-row-link .content-stack-header, .contextcard-item .content-card.bb-card-bg-enabled .content-row-link .content-stack-subheader, .contextcard-item .content-card.bb-card-bg-enabled .content-stack-link .content-stack-header, .contextcard-item .content-card.bb-card-bg-enabled .content-stack-link .content-stack-subheader { color: #000 !important; } .contextcard-item .content-card.more.bb-card-bg-enabled .labeldivider.bb-on-dark { background-color: #ffffff1a; } .contextcard-item .content-row-link, .contextcard-item .content-stack-link { background-color: #fff !important; color: #000 !important; } .contextcard-item .button.dark { background-color: var(--navy); border-color: var(--navy); color: #fff; } .contextcard-item .button.dark:hover { opacity: 0.9; } .contextcard-item .photo-holder .imageoverlay { opacity: 0; display: flex; align-items: flex-start; justify-content: flex-end; padding: 15px; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.68) 100%); transition: opacity 0.2s ease; } .contextcard-item .photo-holder:hover .imageoverlay { opacity: 1; } .contextcard-item .photo-holder .imageoverlay .imageoverlay-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; background-color: #fff; -webkit-mask-image: url("../images/magnify.svg"); mask-image: url("../images/magnify.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; pointer-events: none; } .contextcard-item .photo-holder .imageoverlay .imageoverlay-label { display: none; } .contextitem-header { margin-bottom: 5px; padding-top: 5px; padding-left: 5px; font-size: 16.4px; font-weight: 500; line-height: 1.3em; } .holes-grid-2 { border: 1.5px solid #639F28; border-radius: 10px; flex-flow: column; display: flex; overflow: hidden; } .ikonik-lk9tr, .ikonik-nrouxg, .ikonik-793up, .ikonik-it4xr { color: #fff; } .specialinstructions { grid-column-gap: 9px; grid-row-gap: 9px; border-top: 1.5px solid var(--admin-border); flex-flow: column; margin-top: 10px; padding-top: 15px; padding-bottom: 15px; padding-left: 10px; padding-right: 10px; background-color: #fff; display: flex; } .contentsettings-drawer { background-color: #fff; } /* Settings blocks (e.g. Data to Collect, Send Submissions to) inside form drawers */ .settingsblocks { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; } /* Form submissions drawer — answers list layout */ .bb-sub-answers { display: flex; flex-direction: column; gap: 10px; } /* Form submissions drawer — person section layout */ .bb-sub-player { display: flex; flex-direction: column; gap: 10px; } /* ── Header content-type unique classes ────────────────────────────── */ .bb-header-hero { z-index: 1; aspect-ratio: 4; border-radius: 10px; flex: none; position: relative; overflow: hidden; } .bb-header-logo-block { flex-flow: column; padding-bottom: 0; display: flex; } .bb-header-logo-row { z-index: 3; grid-column-gap: 0px; grid-row-gap: 0px; margin-bottom: 13px; padding-left: 0; padding-right: 10px; display: flex; position: relative; } .bb-header-logo { border: 1.5px solid #fff; border-radius: 10px; flex: none; width: 70px; height: 70px; margin-top: -20px; margin-left: 10px; position: relative; overflow: hidden; } .bb-header-name-block { flex-flow: column; padding-top: 5px; padding-left: 9px; display: flex; } .bb-header-title { margin-top: -3px; margin-bottom: 1px; font-size: 19px; font-weight: 500; line-height: 1.3em; } .bb-header-subtitle { opacity: .7; font-size: 15px; font-weight: 400; line-height: 1.3em; } .bb-header-social-row { grid-column-gap: 5px; grid-row-gap: 5px; display: flex; flex-wrap: wrap; } .contextcard-overlay { z-index: 999; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); justify-content: center; align-items: center; display: none; position: absolute; inset: 0%; } /* Accept-invite password visibility toggle (scoped to invite page only). */ #accept-invite-form .bb-password-field-wrap { position: relative; } #accept-invite-form .bb-password-field-wrap .textfield { padding-right: 80px; } #accept-invite-form .bb-password-toggle { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #6b7280; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 6px; line-height: 1; } #accept-invite-form .bb-password-toggle:hover { color: #111827; }