/* ========================================================================== Accessibility Page (Bootstrap) — Scoped Styles (Fixed TOC) Scope: ========================================================================== */ /* Vars */ :root{ --clinic-color:#6d3c5e; --clinic-light:#f3e8ee; --clinic-light-border:#ead7e3; --text:#222; --muted:#6c757d; --header-offset:140px; /* set to your actual fixed header height */ --toc-gap:8px; } /* Base (no body padding!) */ body.a11y-page{ font-family:"Lato",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--text); } /* Offset just the content wrapper, not the header */ body.a11y-page .a11y-header-buffer{ margin-top:var(--header-offset); } /* Anchors never hide under header */ body.a11y-page :target{ scroll-margin-top:calc(var(--header-offset) + 16px); } /* Nice selection */ body.a11y-page ::selection{ background-color:var(--clinic-light); color:var(--text); } /* Headings & panels */ body.a11y-page .page-title{ color:var(--clinic-color); font-weight:900; } body.a11y-page .section-title{ color:var(--clinic-color); text-decoration:underline; } body.a11y-page .panel-bg{ background:#fff; border:1px solid var(--clinic-light-border); border-radius:1rem; } /* Breadcrumbs */ body.a11y-page .breadcrumb .breadcrumb-item a{ color:var(--clinic-color); text-decoration:none; } body.a11y-page .breadcrumb .breadcrumb-item a:hover{ text-decoration:underline; } body.a11y-page .breadcrumb .breadcrumb-item.active{ color:var(--text); } /* Notes / callouts */ body.a11y-page .note{ border-left:4px solid var(--clinic-color); background:rgba(255,255,255,.85); } /* Fixed TOC (lg+) — sits below header, never over it */ @media (min-width: 992px) { /* lg and up */ body.a11y-page #toc { position: fixed; /* header height + 30px buffer */ top: calc(var(--header-offset) + 70px); /* align with Bootstrap container’s left + gutter */ left: calc((100vw - 960px) / 2 + 12px); /* 960px = .container-lg max width */ width: 280px; max-height: calc(100vh - var(--header-offset) - 60px); overflow: auto; overscroll-behavior: contain; z-index: -1; /* below navbar */ background: var(--clinic-light); border: 1px solid var(--clinic-color); border-radius: .75rem; box-shadow: 0 2px 6px rgba(0,0,0,.06); } } /* Refine TOC left alignment for wider containers */ @media (min-width:1200px){ body.a11y-page #toc{ left:calc((100vw - 1140px)/2 + 12px);} } @media (min-width:1400px){ body.a11y-page #toc{ left:calc((100vw - 1320px)/2 + 12px);} } /* TOC heading & links */ body.a11y-page #toc h3{ color:var(--clinic-color); font-weight:900; margin-bottom:.75rem; } body.a11y-page #toc .nav-link{ color:#333; padding:.25rem .5rem; border-radius:.375rem; transition:color .15s, background-color .15s, text-decoration-color .15s; } body.a11y-page #toc .nav-link:hover{ color:var(--clinic-color); text-decoration:underline; } /* ScrollSpy active */ body.a11y-page #toc .nav-link.active{ background-color:var(--clinic-light-border); color:var(--clinic-color) !important; font-weight:700; text-decoration:underline; } /* Typo tweaks */ body.a11y-page ul{ padding-left:1.25rem; } body.a11y-page li + li{ margin-top:.25rem; } body.a11y-page p{ line-height:1.65; } /* Utilities (scoped) */ body.a11y-page .text-muted{ color:var(--muted) !important; } /* Print */ @media print{ body.a11y-page .a11y-header-buffer{ margin-top:0; } body.a11y-page #toc{ display:none !important; } body.a11y-page .panel-bg{ border:1px solid #ccc; } body.a11y-page a{ color:#000 !important; text-decoration:underline; } } /* Hide TOC when toggled off */ body.a11y-page #toc.toc-hidden { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; /* smooth fade */ } body { background-color: #f2eef5; } /* Ready to Book CSS */ .btn-purple { background-color: rgb(109,60,94); border-color: rgb(109,60,94); color: #fff; } .btn-purple:hover, .btn-purple:focus { background-color: rgb(75, 41, 65); border-color: rgb(75, 41, 65); color: #fff; } .btn-outline-purple { border-color: rgb(109,60,94); color: rgb(109,60,94); } .btn-outline-purple:hover, .btn-outline-purple:focus { border-color: rgb(75, 41, 65); color: rgb(75, 41, 65); }