/* BoneForte public brand — patient-facing pages only. Everything is scoped under .bf-public so the authenticated app (app.css tokens, dark mode) is untouched. Future patient pages should build on the --bfp-* tokens and .bfp-* classes below. */ /* Smooth in-page scrolling for the public site only, with a landing offset so anchored sections clear the sticky header. Scoped via :has() so the authenticated app keeps native scrolling. */ html:has(.bf-public) { scroll-behavior: smooth; scroll-padding-top: 5rem; } /* Offset for any anchored element (belt-and-suspenders for browsers without :has support on the scroll container). */ .bf-public [id] { scroll-margin-top: 5rem; } @media (prefers-reduced-motion: reduce) { html:has(.bf-public) { scroll-behavior: auto; } .bf-public *, .bf-public *::before, .bf-public *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } .bf-public .btn-primary:hover, .bf-public .bfp-btn-primary:hover, .bf-public .bfp-card:hover { transform: none !important; } } .bf-public { /* Brand tokens (boneforte.com style guide) */ --bfp-bg: #F7F5F0; --bfp-surface: #FBFAF7; --bfp-alt: #EEF4F1; --bfp-text: #2B2A26; --bfp-muted: #6E746F; --bfp-accent: #1B6B68; --bfp-accent-hover: #145654; --bfp-soft: #DDEBE7; --bfp-border: #DDD9D1; --bfp-sand: #C9B27A; --bfp-radius-sm: 10px; --bfp-radius-md: 14px; --bfp-radius-lg: 18px; --bfp-shadow-sm: 0 2px 10px rgba(43, 42, 38, 0.05); --bfp-shadow-md: 0 8px 24px rgba(43, 42, 38, 0.08); --bfp-container: 1160px; --bfp-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --bfp-sans: 'Work Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Remap legacy --bf-* tokens inside the public subtree so shared app.css classes (.form-control, .checkbox-label, .alert, .login-footer) inherit the brand without any change to app.css. This also keeps public pages light even when data-theme="dark" is set on . */ --bf-primary: var(--bfp-accent); --bf-primary-dark: var(--bfp-accent-hover); --bf-primary-light: var(--bfp-accent); --bf-bg: var(--bfp-bg); --bf-surface: var(--bfp-surface); --bf-border: var(--bfp-border); --bf-text: var(--bfp-text); --bf-text-secondary: var(--bfp-muted); --bf-text-muted: var(--bfp-muted); font-family: var(--bfp-sans); background: var(--bfp-bg); color: var(--bfp-text); min-height: 100vh; display: flex; flex-direction: column; line-height: 1.6; } .bf-public h1, .bf-public h2, .bf-public h3 { font-family: var(--bfp-serif); color: var(--bfp-text); line-height: 1.2; font-weight: 600; } .bf-public a { color: var(--bfp-accent); } /* ---- Overrides for hardcoded blues in app.css login styles ---- */ /* Sign-in submit — friendly full-width pill with a gentle lift on hover */ .bf-public .btn-primary { background: var(--bfp-accent); color: #ffffff; border-radius: 999px; padding: 0.8rem 1.4rem; min-height: 46px; font-weight: 600; box-shadow: 0 2px 8px rgba(27, 107, 104, 0.18); transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .bf-public .btn-primary:hover { background: var(--bfp-accent-hover); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(27, 107, 104, 0.24); } .bf-public .btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(27, 107, 104, 0.18); } /* Comfortable inputs with a clearly visible teal focus ring */ .bf-public .form-control { border-color: var(--bfp-border); background: #ffffff; color: var(--bfp-text); padding: 0.72rem 0.9rem; font-size: 1rem; min-height: 46px; border-radius: var(--bfp-radius-sm); } .bf-public .form-control:focus { border-color: var(--bfp-accent); box-shadow: 0 0 0 3px rgba(27, 107, 104, 0.16); } .bf-public .form-group label { color: var(--bfp-text); } /* Remember-me checkbox — larger tap target, warm label, visible focus */ .bf-public .checkbox-label { font-size: 0.9rem; color: var(--bfp-muted); min-height: 44px; } .bf-public .checkbox-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--bfp-accent); } .bf-public .checkbox-label input[type="checkbox"]:focus-visible { outline: 2px solid var(--bfp-accent); outline-offset: 2px; } /* Consistent keyboard focus affordance across links, nav, and buttons */ .bf-public a:focus-visible, .bf-public .btn:focus-visible, .bf-public .bfp-btn:focus-visible, .bf-public .bfp-nav a:focus-visible { outline: 2px solid var(--bfp-accent); outline-offset: 2px; border-radius: 4px; } .bf-public .login-card { background: var(--bfp-surface); border: 1px solid var(--bfp-border); border-radius: var(--bfp-radius-lg); box-shadow: var(--bfp-shadow-md); } .bf-public .login-header p { color: var(--bfp-muted); } /* ---- Shared landing / page scaffolding (.bfp-*) ---- */ .bfp-container { width: 100%; max-width: var(--bfp-container); margin: 0 auto; padding: 0 1.25rem; } /* Header */ .bfp-header { position: sticky; top: 0; z-index: 50; background: var(--bfp-surface); border-bottom: 1px solid var(--bfp-border); } .bfp-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.85rem 0; } .bfp-header-logo img { display: block; height: 2.4rem; width: auto; } .bfp-nav { display: flex; align-items: center; gap: 1.75rem; } .bfp-nav a { color: var(--bfp-text); text-decoration: none; font-size: 0.95rem; font-weight: 500; } .bfp-nav a:hover { color: var(--bfp-accent); } /* Buttons */ .bfp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1.4rem; border-radius: 999px; font-family: var(--bfp-sans); font-size: 0.95rem; font-weight: 600; text-decoration: none; border: 1px solid transparent; min-height: 44px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } /* Extra .bf-public qualifier so this outranks the `.bf-public a` link color when the button is an anchor (e.g., the header "Sign in" pill). */ .bfp-btn-primary, .bf-public .bfp-btn-primary { background: var(--bfp-accent); color: #ffffff; box-shadow: 0 2px 8px rgba(27, 107, 104, 0.18); } .bfp-btn-primary:hover { background: var(--bfp-accent-hover); color: #ffffff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(27, 107, 104, 0.24); } .bfp-btn-primary:active { transform: translateY(0); } .bfp-btn-outline { background: transparent; color: var(--bfp-accent); border-color: var(--bfp-accent); } .bfp-btn-outline:hover { background: var(--bfp-soft); } /* Hero — a soft teal wash at the top fades into the warm background, giving the sign-in area a calm, welcoming lift. */ .bfp-hero { background: linear-gradient(180deg, var(--bfp-soft) 0%, var(--bfp-bg) 42%); padding: 4rem 0 4.5rem; } .bfp-hero-grid { display: grid; grid-template-columns: 1fr minmax(22rem, 27rem); gap: 3.5rem; align-items: center; } .bfp-eyebrow { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bfp-accent); margin: 0 0 0.75rem; } .bfp-hero h1 { font-size: clamp(2.25rem, 4.5vw, 3.35rem); margin: 0 0 1.25rem; } .bfp-lead { font-size: 1.15rem; color: var(--bfp-text); margin: 0 0 0.9rem; max-width: 34rem; } .bfp-sub { font-size: 1rem; color: var(--bfp-muted); margin: 0 0 1.5rem; max-width: 34rem; } .bfp-hero-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; } .bfp-hero-points li { display: flex; align-items: center; gap: 0.7rem; font-size: 1rem; } .bfp-hero-points i { color: var(--bfp-accent); font-size: 1.15rem; flex-shrink: 0; } /* Sign-in card (hero) — elevated, inviting, with a soft teal accent bar across the top that follows the card's rounded corners. */ .bfp-signin-card { position: relative; background: var(--bfp-surface); border: 1px solid var(--bfp-border); border-radius: var(--bfp-radius-lg); box-shadow: 0 12px 32px rgba(43, 42, 38, 0.10); padding: 2.15rem 1.85rem 2rem; } .bfp-signin-card::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 4px; background: var(--bfp-accent); border-radius: var(--bfp-radius-lg) var(--bfp-radius-lg) 0 0; } .bfp-signin-card h2 { font-size: 1.6rem; margin: 0 0 0.35rem; } .bfp-signin-card .bfp-signin-sub { color: var(--bfp-muted); font-size: 0.95rem; margin: 0 0 1.25rem; } .bfp-signin-help { text-align: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--bfp-border); font-size: 0.9rem; color: var(--bfp-muted); } .bfp-signin-help p { margin: 0 0 0.35rem; } .bfp-signin-help a { color: var(--bfp-accent); font-weight: 500; text-decoration: none; } .bfp-signin-help a:hover { text-decoration: underline; } /* Generic content sections */ .bfp-section { padding: 3.75rem 0; } .bfp-section-alt { background: var(--bfp-alt); } .bfp-section h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); margin: 0 0 0.75rem; } .bfp-section-lead { font-size: 1.05rem; color: var(--bfp-muted); max-width: 44rem; margin: 0 0 2.25rem; } /* Card grids (audience pathways, benefit strips) */ .bfp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .bfp-card { background: var(--bfp-surface); border: 1px solid var(--bfp-border); border-radius: var(--bfp-radius-md); box-shadow: var(--bfp-shadow-sm); padding: 1.75rem 1.5rem; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .bfp-card:hover { transform: translateY(-3px); box-shadow: var(--bfp-shadow-md); border-color: var(--bfp-soft); } .bfp-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--bfp-soft); color: var(--bfp-accent); font-size: 1.35rem; margin-bottom: 1rem; } .bfp-card h3 { font-size: 1.25rem; margin: 0 0 0.5rem; } .bfp-card p { margin: 0; color: var(--bfp-muted); font-size: 0.97rem; } /* FAQ accordion */ .bfp-faq-list { display: flex; flex-direction: column; gap: 0.85rem; max-width: 52rem; } .bfp-faq-item { background: var(--bfp-surface); border: 1px solid var(--bfp-border); border-radius: var(--bfp-radius-md); box-shadow: var(--bfp-shadow-sm); padding: 0; } .bfp-faq-item summary { cursor: pointer; list-style: none; padding: 1.1rem 1.35rem; font-family: var(--bfp-serif); font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .bfp-faq-item summary::-webkit-details-marker { display: none; } .bfp-faq-item summary::after { content: '+'; color: var(--bfp-accent); font-family: var(--bfp-sans); font-size: 1.3rem; font-weight: 400; line-height: 1; flex-shrink: 0; } .bfp-faq-item[open] summary::after { content: '\2212'; } .bfp-faq-item p { margin: 0; padding: 0 1.35rem 1.15rem; color: var(--bfp-muted); } /* Help request page */ .bfp-help-grid { display: grid; grid-template-columns: 1fr minmax(22rem, 30rem); gap: 3.5rem; align-items: start; } @media (max-width: 900px) { .bfp-help-grid { grid-template-columns: 1fr; gap: 2rem; } } .bfp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .bfp-help-success { text-align: center; padding: 1rem 0; } .bfp-help-success i { font-size: 2.5rem; color: var(--bfp-accent); } .bfp-help-success h2 { margin: 0.5rem 0; } .bfp-help-success p { color: var(--bfp-muted); margin: 0 0 1.25rem; } /* Public scheduling (/schedule) — Calendly-style booking card */ .bfp-book-card { background: var(--bfp-surface); border: 1px solid var(--bfp-border); border-radius: var(--bfp-radius-lg); box-shadow: var(--bfp-shadow-md); padding: 2.25rem; max-width: 60rem; margin: 0 auto; } .bfp-book-grid { display: grid; grid-template-columns: minmax(16rem, 22rem) 1fr; gap: 2.5rem; } @media (max-width: 900px) { .bfp-book-grid { grid-template-columns: 1fr; gap: 1.75rem; } } .bfp-book-info { border-right: 1px solid var(--bfp-border); padding-right: 2.25rem; } @media (max-width: 900px) { .bfp-book-info { border-right: none; border-bottom: 1px solid var(--bfp-border); padding-right: 0; padding-bottom: 1.5rem; } } .bfp-book-info h1 { font-size: 1.8rem; margin: 0 0 1rem; } .bfp-book-meta p { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.5rem; color: var(--bfp-muted); font-size: 0.95rem; } .bfp-book-meta i { color: var(--bfp-accent); } .bfp-book-picker h2 { font-size: 1.35rem; margin: 0 0 1rem; } .bfp-book-hint { color: var(--bfp-muted); font-size: 0.95rem; } .bfp-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.6rem; margin-top: 0.5rem; } .bfp-slot-btn { padding: 0.6rem 0.5rem; border: 1px solid var(--bfp-accent); border-radius: var(--bfp-radius-sm); background: transparent; color: var(--bfp-accent); font-family: var(--bfp-sans); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .bfp-slot-btn:hover { background: var(--bfp-soft); } .bfp-slot-btn-active { background: var(--bfp-accent); color: #ffffff; } .bfp-book-back { display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: none; color: var(--bfp-accent); font-family: var(--bfp-sans); font-size: 0.92rem; font-weight: 500; cursor: pointer; padding: 0; margin-bottom: 0.85rem; } .bfp-book-back:hover { text-decoration: underline; } .bfp-book-confirm, .bfp-book-empty { text-align: center; max-width: 36rem; } .bfp-book-confirm i { font-size: 3rem; color: var(--bfp-accent); } .bfp-book-confirm h1, .bfp-book-empty h1 { font-size: 2rem; margin: 0.75rem 0; } .bfp-book-confirm-when { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.25rem; } .bfp-book-confirm-where { color: var(--bfp-muted); margin: 0 0 1rem; } .bfp-book-confirm-note { color: var(--bfp-muted); font-size: 0.95rem; margin: 0 0 1.5rem; } /* Manage appointment — action buttons (reschedule / cancel) */ .bfp-manage-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; } .bfp-manage-actions .bfp-btn, .bfp-manage-actions .btn { display: inline-flex; align-items: center; gap: 0.5rem; } /* Contact strip */ .bfp-contact-strip { text-align: center; padding: 3rem 0; } .bfp-contact-strip h2 { margin-bottom: 0.5rem; } .bfp-contact-strip p { color: var(--bfp-muted); margin: 0 0 1.25rem; } .bfp-contact-links { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; font-size: 1.05rem; } .bfp-contact-links a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--bfp-accent); font-weight: 500; text-decoration: none; } .bfp-contact-links a:hover { text-decoration: underline; } /* Footer */ .bfp-footer { margin-top: auto; background: var(--bfp-surface); border-top: 1px solid var(--bfp-border); padding: 2.25rem 0; } .bfp-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .bfp-footer-logo img { display: block; height: 2rem; width: auto; } .bfp-footer-info { color: var(--bfp-muted); font-size: 0.9rem; text-align: right; } .bfp-footer-info p { margin: 0 0 0.25rem; } .bfp-footer-info a { color: var(--bfp-accent); text-decoration: none; } .bfp-footer-info a:hover { text-decoration: underline; } /* Auth pages (LandingLayout) */ .bfp-auth-page { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; padding: 2.5rem 1.25rem; background: var(--bfp-bg); } .bfp-auth-focus { width: 100%; max-width: 30rem; display: flex; justify-content: center; } .bfp-auth-focus .login-container { padding: 0; } .bfp-auth-info { width: 100%; max-width: 26rem; background: var(--bfp-surface); border: 1px solid var(--bfp-border); border-radius: var(--bfp-radius-md); box-shadow: var(--bfp-shadow-sm); padding: 1.5rem 1.6rem; font-size: 0.92rem; color: var(--bfp-muted); } .bfp-auth-info h2 { font-size: 1.15rem; margin: 0 0 0.6rem; } .bfp-auth-info ul { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; } .bfp-auth-info li { display: flex; align-items: center; gap: 0.6rem; } .bfp-auth-info li i { color: var(--bfp-accent); flex-shrink: 0; } .bfp-auth-info .bfp-auth-contact { border-top: 1px solid var(--bfp-border); padding-top: 0.85rem; margin-top: 0.25rem; } .bfp-auth-info .bfp-auth-contact p { margin: 0 0 0.3rem; } .bfp-auth-info a { color: var(--bfp-accent); text-decoration: none; } .bfp-auth-info a:hover { text-decoration: underline; } /* Responsive */ @media (max-width: 900px) { .bfp-hero { padding: 2.75rem 0 3.25rem; } .bfp-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; } .bfp-cards { grid-template-columns: 1fr; } .bfp-nav { gap: 1.1rem; } .bfp-nav .bfp-nav-link { display: none; } .bfp-footer-inner { flex-direction: column; align-items: flex-start; } .bfp-footer-info { text-align: left; } } /* Small phones (~390px) — tighter rhythm, comfortable tap targets */ @media (max-width: 480px) { .bfp-container { padding: 0 1rem; } .bfp-hero { padding: 2.25rem 0 2.75rem; } .bfp-hero h1 { font-size: clamp(1.9rem, 8vw, 2.35rem); } .bfp-lead { font-size: 1.08rem; } .bfp-signin-card { padding: 1.75rem 1.35rem 1.6rem; } .bfp-section { padding: 2.75rem 0; } .bfp-contact-links { flex-direction: column; gap: 0.85rem; align-items: center; } .bfp-header-inner { gap: 1rem; } }