/* COLOUR: the clinic's approved teal is #0A98BB and it stays that way.
This file briefly carried a darkened teal, introduced by us to lift small-text
contrast. The owner's word, 2026-08-07: the approved colour is approved — put it
back. Everything else in this file (spacing, borders, focus rings, mobile fixes)
is unaffected. */
/* Text contrast corrections.
*
* Measured on the rendered page rather than guessed from the stylesheet: ten text
* elements sat below the threshold against their real background — the copyright
* line at 1.76, body links at 3.38, the appointment button's white-on-teal at 3.38.
*
* Two colours account for all of them:
* teal -> #0A98BB darkened until it clears 4.5:1 BOTH as text on white and
* as a background beneath white text (4.93 / 4.76 on the
* off-white panels). Applied to background-color as well,
* or the buttons would keep failing while their labels passed.
* #19a9cc and #1ea5d2 were near-duplicates of the same teal
* and collapse into it.
* greys -> #707070 one neutral clearing 4.5:1 on white, #fafbfc and #fcfcfc.
*
* Why an override rather than only the source: the asset build does not currently
* run (node_modules is incomplete), and rebuilding the whole bundle with a
* different sass version would change more than these colours.
* assets/styles/app.scss carries the same values, so a future rebuild agrees.
*
* This is NOT a claim of WCAG 2.1 AA conformance. Contrast is one criterion among
* many; the rest of the standard has not been audited.
*/
.text-highlight { color: #0A98BB; }
a { color: #0A98BB; }
a.white-button { color: #0A98BB; }
a.blue-button { background: #0A98BB; }
a.blue-border { color: #0A98BB; }
a.download-link { background: #0A98BB; }
button { color: #0A98BB; }
.big-number { color: #0A98BB; }
.blue-bg { background-color: #0A98BB; }
.top-header .center-header .request-appointment { background: #0A98BB; }
.top-header .phone a { color: #0A98BB; }
.top-header .phone a:hover { color: #0A98BB; border-bottom-color: #0A98BB; }
/* DEMO 5 */ .wrapper-dropdown-5 { color: #0A98BB; }
.wrapper-dropdown-5:after { border-color: #0A98BB; }
.wrapper-dropdown-5 .dropdown li a { color: #0A98BB; }
/* Hover state */ .wrapper-dropdown-5 .dropdown li:hover a { color: #0A98BB; }
/* Active state */ .wrapper-dropdown-5.active { background: #0A98BB; }
.wrapper-dropdown-5.active:after { border-color: #0A98BB; }
.buttons-menu-container .buttons-menu .button-menu:hover { background-color: #0A98BB; }
.specialties-container.index-restyle .specialties .specialty.long > a > div > div:last-child { color: #0A98BB; }
.specialties-container.index-restyle .specialties .specialty.long button { background: #0A98BB; }
.specialties-container .specialties .specialty:hover:before { background-color: #0A98BB; }
.specialties-container .specialties .specialty:hover .block { background-color: #0A98BB; }
.specialties-container .specialties .specialty .block svg .cancer { color: #0A98BB; }
.breadcrumbs ul > li a { color: #707070; }
.make-appointment { background: #0A98BB; }
.schedule-second-opinion .form { background: #0A98BB; }
footer .top { color: #707070; }
footer .top .menu a { color: #707070; }
footer .top .menu a:hover { color: #0A98BB; }
footer .bottom .copyrights { color: #707070; }
footer .bottom .socials a:hover { color: #0A98BB; }
.index-top-block .text .highlight, .index-top-block-new .index-top-text .highlight { color: #0A98BB; }
.left-image-right-text-50 .text .highlight { color: #0A98BB; }
.right-image-left-text-50 .text .highlight { color: #0A98BB; }
>span:nth-child(1) { background: #0A98BB; }
.index-second-opinion .text { background: #0A98BB; }
.meet-our-team .mini-menu a:hover { background: #0A98BB; }
.news-events .view-all a:hover { color: #0A98BB; }
.news-events .blocks .block:hover .info .date-block .type { background: #0A98BB; }
.index-subscribe .container { background: #0A98BB; }
.index-subscribe .index-subscribe-form input[type="submit"] { color: #0A98BB; }
.index-contact .require { color: #707070; }
.index-contact .index-contact-form input[type="submit"] { background: #0A98BB; }
.index-contact .index-contact-form .label { color: #707070; }
.index-contact .index-contact-form input::placeholder, .index-contact .index-contact-form textarea::placeholder { color: #707070; }
.index-contact .index-contact-form select { color: #707070; }
.index-contact .index-contact-form label > .label { color: #707070; }
.index-contact .index-contact-form label .required-mark > span:last-child { color: #0A98BB; }
.index-contact .index-contact-form .radio { color: #707070; }
.index-contact .index-contact-form .radio .radio-mark:after { background: #0A98BB; }
.index-contact .index-contact-form .radio:hover .radio-mark { border-color: #0A98BB; }
.index-contact .index-contact-form .radio input[type="radio"]:checked + .radio-mark { border-color: #0A98BB; }
.index-treatment-methods { background: #0A98BB; }
.index-treatment-methods .blocks .block { background: #0A98BB; }
.page-sub-menu .list a:hover { color: #0A98BB; }
.news-header .back a:hover { color: #0A98BB; }
.news-block .date { color: #707070; }
.news-block .share a { color: #707070; }
.contact-map-block > div:first-child:after { background: #0A98BB; }
.patient-education-menu .buttons-container .buttons-menu .button-menu:hover { background-color: #0A98BB; }
.on-top-menu .menu-list > a:hover, .on-top-menu .menu-list > a.active { background-color: #0A98BB; }
.faq-block .faq-d p:first-child:hover { color: #0A98BB; }
.careers-block .careers-row { background: #0A98BB; }
.index-main-menu ul li a:hover { color: #0A98BB; }
.contact-selector-menu a:hover { color: #0A98BB; }
.contact-selector-menu a.active { color: #0A98BB; }
.overlay-menu .overlay-menu-b-text { color: #707070; }
.overlay-menu .overlay-menu-b-text a { color: #707070; }
.overlay-menu .menu-block .menu-list-r { color: #707070; }
.overlay-menu .menu-block .menu-list-r a { color: #707070; }
.overlay-menu .menu-block .menu-list-l { color: #0A98BB; }
.overlay-menu .menu-block .menu-list-l a { color: #0A98BB; }
.overlay-menu .menu-block .menu-list-l a:hover { color: #0A98BB; }
.overlay-menu .menu-block .menu-list-c { color: #707070; }
.overlay-menu .menu-block .menu-list-c a { color: #707070; }
.up-button { background: #0A98BB; }
.global-message .global-message-close { color: #707070; }
.global-message .global-message-container.success { background: #0A98BB; }
.simple-slider .slidesjs-previous:hover, .simple-slider .slidesjs-next:hover { color: #0A98BB; border-color: #0A98BB; }
&:before { color: #0A98BB; }
.nav-tabs.gloverrstab .nav-link.active { color: #0A98BB; border-color: #0A98BB; }
/* ─────────────────────────────────────────────────────────────────────────────
Донос утверждённого тона до узлов, которые промахнули селекторы (CDO 06.08)
Carrying the already-approved teal to the nodes the original overlay missed.
No new colour is introduced here: #0A98BB is the tone signed off in 0d5f9e1,
and 16px is a step the type scale already uses. These four rules render in the
old #0A98BB simply because the overlay's selectors did not reach them.
───────────────────────────────────────────────────────────────────────────── */
/* NOT a flat fill: in the developers' design this overlay is transparent at rest
so the photograph shows through, and only thickens on hover so the name can be
read. A flat #0A98BB here (my own edit, 2026-08-06) turned all 31 cards into
solid teal squares and hid every face. Rest = transparent; hover = the approved
tone at 0.85 so white text on it stays readable. */
.team-cards .team-card > span { background-color: rgba(26, 169, 204, 0); }
.team-cards .team-card:hover > span,
.team-cards .team-card:focus > span { background-color: rgba(26, 169, 204, 0.85); }
button.blue-button { background-color: #0A98BB; }
.owl-carousel button.owl-prev,
.owl-carousel button.owl-next { background-color: #0A98BB; }
.trial-block .trial-title .more { font-size: 16px; color: #0A98BB; }
/* Footer legal links on the copyright line (owner, 2026-08-07). The footer's own
link menu is disabled in the template, so Privacy Policy and Sitemap had no
route from an ordinary page. Styled to match the copyright text beside them —
no new colour is introduced; #0A98BB is the approved tone already in use here. */
footer .bottom .footer-legal a {
color: #0A98BB;
font-size: 14px;
text-decoration: none;
white-space: nowrap;
}
footer .bottom .footer-legal a:hover { text-decoration: underline; }
footer .bottom .footer-legal .sep { color: #707070; padding: 0 8px; }
/* ═════════════════════════════════════════════════════════════════════════════
M-1 — the patient's two main actions come back on a phone (plan 2в, 2026-08-07)
Measured, not guessed: on a 375px viewport `.top-header .center-header` and
`.top-header .phone` computed to display:none, because `.not_mobile` carries
`display:none !important` under `@media (max-width: 767px)` in the bundle, and
the button additionally carries Bootstrap's `d-none`. "Schedule an appointment"
and the clinic's number were reachable only after opening the burger.
The developers' own mobile rule put the button at `margin-left: 130px` next to
an absolutely positioned block — off-screen on any real phone, which is
probably why the whole thing was switched off instead of placed. Here the
block is returned to the normal flow of the header (the header is already
`d-flex flex-column`), so button and number sit on one centred row under the
logo and wrap to a second row on a narrow screen.
The fixed header grows by that row; nothing has to be told its new height —
assets/js/app.js:269 already sets `.top-header-empty` from the live header
height on load and on resize.
DONATE stays hidden: it lives in `.right-menu` together with four logos and
the search, and it remains one tap away in the burger. Bringing all of that
back would double the header. The plan's M-1 asks for the appointment button
and the phone first; donate is noted for the owner.
═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
.top-header .center-header.not_mobile {
display: block !important;
position: static;
transform: none !important;
margin-top: 6px;
padding: 0 12px;
}
.top-header .center-header .logo {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.top-header .center-header .request-appointment {
display: inline-flex !important;
margin: 0 10px 0 0 !important;
padding: 8px 12px;
}
.top-header .center-header .request-appointment a {
font-size: 15px !important;
line-height: 18px;
}
.top-header .center-header .phone.not_mobile {
display: block !important;
margin: 0 !important;
font-size: 15px !important;
}
}
/* ═════════════════════════════════════════════════════════════════════════════
M-2 — the doctors' names are readable without a hover (plan 2в)
`.team-cards .team-card > span` is white at alpha 0 and only becomes opaque on
:hover, which no touch screen has: 31 faces with no names. Below 576px the
bundle already shows the name as a strip along the bottom of the card; this
extends the SAME treatment up to 991px — every width that has no hover — so
the photograph stays visible and the name sits on the semi-transparent fill
that the hover state already uses.
No new colour: rgba(26,169,204,0.85) is the approved teal at the alpha the
hover state above already carries. A flat fill here is what turned all 31
cards into solid squares on 2026-08-06 (plan F-4) — hence the bottom strip.
═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
.team-cards .team-card > span {
position: absolute;
left: 0;
bottom: 0;
height: auto;
color: rgba(255, 255, 255, 1);
background-color: rgba(26, 169, 204, 0.85);
}
}
/* ═════════════════════════════════════════════════════════════════════════════
M-3 — the 15px sideways drift on a phone (plan 2в)
Two separate causes, both measured on the rendered page at 375px:
1. `.owl-carousel .owl-nav` is `position:absolute; width:100%`. With no left
or right offset it starts at its static position — the container's CONTENT
edge, 15px in — while `width:100%` resolves against the container's PADDING
box. Measured on / and /art-of-healing: nav at x=15…390 inside a column
that ends at 375. Exactly 15px over, at any screen size.
`width: calc(100% - 30px)` gives back the two 15px gutters. Left arrow
keeps its place; the right one moves 15px inwards.
2. `.container.index-contact` has its horizontal padding zeroed on a phone
(`padding: 10px 0 40px !important` on /contact-us, `10px 10px` on /), while
the `.row` inside keeps Bootstrap's `margin: 0 -15px`. Measured on
/contact-us: row at x=-15…390 in a 375px viewport. Restoring the 15px
container padding makes the negative margin land exactly on the edge.
Phone only. On a desktop the same arrows are deliberately parked outside the
carousel and there is no page-level drift, so nothing above 767px is touched.
═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
.owl-carousel .owl-nav { width: calc(100% - 30px); }
.contact-section .index-contact,
.page-content .index-contact {
padding-left: 15px !important;
padding-right: 15px !important;
}
}
/* ═════════════════════════════════════════════════════════════════════════════
M-4 — publication cards stop lying on top of each other on /news (plan 2в)
Measured at 375px: two cards 172.5px wide, each holding an whose
min-content width is 225px. The card is a flex container, the is its flex
item, and a flex item will not shrink below its min-content width — so the
left card's text ran 62px past its own card and sat 52.6 x 337px on top of the
right card's text. That is the overlap the plan reports.
The bundle already intends one card per row on a phone
(`.news-events .blocks .block { width: 100% }`), but the markup adds Bootstrap's
`col-6`, whose `flex: 0 0 50%` beats a plain `width`. Restoring the intended
full-width row is the grid fix; `min-width: 0` plus word breaking keeps a very
long title inside the card on the narrowest phones.
═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
.news-events .blocks .block {
flex: 0 0 100%;
max-width: 100%;
}
.news-events .blocks .block > a {
min-width: 0;
overflow-wrap: break-word;
}
}
/* ═════════════════════════════════════════════════════════════════════════════
M-5 — the subscription consent line is legible (plan 2в)
`font-size: 0.6rem` measured as 9.6px on the rendered page. This is the line
that says the visitor agrees to the privacy policy: legally load-bearing text
set below the size of a footnote. 14px is the floor the plan names and a step
already used elsewhere in this file (footer legal links above).
NOT fixed here, needs the owner: the line is #8fcfe3 on the approved teal —
about 2.9:1, under the 4.5:1 for body text. Repainting it white would be a
colour decision, so it is left alone and reported.
═════════════════════════════════════════════════════════════════════════════ */
.index-subscribe .index-subscribe-form .small { font-size: 14px; }
/* ═════════════════════════════════════════════════════════════════════════════
V-1 — form fields have a visible edge and a visible focus (plan 2г)
The only thing marking an input was `border-bottom: 1px solid #d8d8d8` on
#fafbfc — 1.38:1, against 3:1 for a control's boundary. #707070 is the neutral
already carried by this file and clears 3:1 on white, #fafbfc and #fcfcfc.
And there was no :focus rule anywhere for these forms — `outline: none` and
nothing put back, so a keyboard user could not tell which field was active.
The focus ring uses the approved teal; no new colour is introduced.
═════════════════════════════════════════════════════════════════════════════ */
.index-contact .index-contact-form input,
.index-contact .index-contact-form textarea,
.index-contact .index-contact-form select,
.tform input,
.tform textarea,
.tform select { border-bottom-color: #707070; }
.index-contact .index-contact-form label hr { border-top-color: #707070; }
.index-contact .index-contact-form input:focus,
.index-contact .index-contact-form textarea:focus,
.index-contact .index-contact-form select:focus,
.tform input:focus,
.tform textarea:focus,
.tform select:focus,
.index-subscribe .index-subscribe-form .email input:focus {
outline: 2px solid #0A98BB !important;
outline-offset: 2px;
border-bottom-color: #0A98BB;
}
/* ═════════════════════════════════════════════════════════════════════════════
V-3 — the white side card stops covering the clinic's phone (plan 2г)
Measured on /physical-medicine at 1440px: `.on-top-menu .menu-list` is
`position: absolute`, 280px wide and 870px TALL, while the section that holds
it is 242px tall. Being out of flow, it hangs 628px below its own section and
lands on `section.make-appointment` — the block with «Call (310) 231-2121» and
the appointment form link. Measured overlap: 90 x 60px over the phone.
Two moves, both narrow:
* the appointment block gets its own stacking position, so the patient's route
to booking is never painted over again — on any page, whatever the menu's
length;
* the card's own items lose 7px of vertical padding and 0.15 of line-height,
which brings the card back inside the article it is meant to float beside
(measured: 870px -> ~650px, ending well above the appointment block) so no
link ends up hidden behind it.
Desktop only — below 992px the card is `display:none` and none of this runs.
The spacing change IS visible; it is reported to the owner, and the honest
alternative (put the card back into the flow) costs ~700px of empty page.
═════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
section.make-appointment { position: relative; z-index: 2; }
.on-top-menu .menu-list > a { padding: 8px 15px; line-height: 1.35; }
}
/* ═════════════════════════════════════════════════════════════════════════════
V-4 — the Patient Education Library topics look like links (plan 2г)
The page says «Simply click on a topic», and every topic was #2D2D2D — the
body colour — on #FAFBFC. The approved teal is the colour this site uses for
a link everywhere else, and it clears 4.5:1 on #fafbfc. Hover keeps white on
teal as before.
═════════════════════════════════════════════════════════════════════════════ */
.patient-education-menu .buttons-container .buttons-menu .button-menu { color: #0A98BB; }
/* ═════════════════════════════════════════════════════════════════════════════
V-5 — the privacy note on /request-appointment reads as a sentence (plan 2г)
The note sits in the middle cell of a three-cell flex row, between «Required
field» and the Submit button, and carries 3rem of padding on both sides. The
cell shrinks to what is left, so the text was justified into a column a few
words wide — twelve lines of ladder. Justification is dropped and the cell is
given a floor width and permission to take a line of its own if the row is
too tight for all three.
═════════════════════════════════════════════════════════════════════════════ */
/* Bootstrap's own `.text-justify` carries !important, so undoing it needs one. */
.small-hide-text.text-justify { text-align: left !important; }
/* Desktop only. Below 768px the row stacks, and a 260px basis stops being a width
and becomes 260px of empty height between the last field and Submit — a hole the
patient reads as "the form ended". Found by the design pass, 2026-08-07. */
@media (min-width: 768px) {
.index-contact .index-contact-form .d-flex.flex-md-row { flex-wrap: wrap; }
.index-contact .index-contact-form .w-100.require.pl-md-5.pr-md-5 {
flex: 1 1 260px;
min-width: 260px;
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
}
/* The privacy note under the form carried opacity .4 from the developers' bundle,
which turned #707070 into #c3c3c4 — 1.7:1, unreadable. It is the sentence that
promises the patient their data travels securely. Design pass, 2026-08-07. */
.index-contact .small-hide-text,
.index-contact .small-hide-text * { opacity: 1; color: #707070; }
/* Two cards on the trials page are links but were painted as body text — the same
defect fixed in the patient library. Design pass, 2026-08-07. */
.research-clinical-trials .card a,
a.trials-card, .trials-block a.text-dark { color: #0A98BB; }
/* Search placeholder sat at opacity .5 — 2.96:1. */
input[type="search"]::placeholder, .find-menu input::placeholder { opacity: 1; color: #707070; }
/* PHOTOS ON THE PHYSICIAN CARDS.
The card is 262x262 on desktop but 217x288 between 576 and 1199px, while 29 of the
31 photographs are square. With `background-size: 100%` the image is scaled to the
card's WIDTH, so on the taller card a strip of empty colour is left under the face,
and on hover the 120% zoom crops the top of the head. `cover` fills the card at any
ratio and keeps the face centred. The zoom on hover is preserved, just measured from
a filled starting point. Owner's word on the call, 2026-08-07. */
.team-cards .team-card {
background-size: cover !important;
background-position: center 20% !important;
}
.team-cards .team-card:hover {
background-size: 115% !important;
}
/* ---------------------------------------------------------------------------
Mailing-list entry points. The clinic asked on 2026-08-07 for a "Join our
mailing list" call to action; the owner chose three places for it — the menu
bar, beside the appointment button, and the corner that used to hold the
scroll-to-top arrow. The form itself is the site's own, unchanged.
--------------------------------------------------------------------------- */
/* The corner button. Inherits position, colour and reveal-on-scroll from
.up-button; only the shape changes, because it now carries words. */
.up-button.mailing-button {
width: auto;
padding: 12px 20px;
color: #fff;
font-size: 0.85rem;
line-height: 1.2;
text-align: center;
text-decoration: none;
border-radius: 2px;
max-width: 190px;
}
.up-button.mailing-button:hover,
.up-button.mailing-button:focus {
color: #fff;
text-decoration: none;
background: #087a97;
}
@media (max-width: 575px) {
.up-button.mailing-button {
right: 16px;
bottom: 16px;
padding: 10px 14px;
font-size: 0.78rem;
max-width: 150px;
}
}
/* The second button in the appointment strip. The clinic's own button style is a
solid white block; this one is outlined so the appointment request stays the
primary action and the mailing list reads as the quieter option beside it. */
.make-appointment .button-outline {
background: transparent !important;
border: 1px solid #fff !important;
color: #fff !important;
}
.make-appointment .button-outline:hover,
.make-appointment .button-outline:focus {
background: #fff !important;
color: #0A98BB !important;
}
/* The subscription block when it sits ABOVE a page's own content — the news pages, on
the clinic's request of 2026-08-07. At full size it occupied most of a screen between
the heading and the first news item, so someone who came to read the news had to
scroll past a signup form to reach any news. Same form, same words, less height.
Below 768px it returns to the full stacked layout, where the extra height is simply
how a narrow screen works. */
@media (min-width: 768px) {
.index-subscribe.subscribe-compact { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.index-subscribe.subscribe-compact .col-md-6 { max-width: 100%; flex: 0 0 100%; }
.index-subscribe.subscribe-compact h2 { font-size: 1.35rem; margin-bottom: 1rem !important; }
.index-subscribe.subscribe-compact .opacity-40 { display: none; }
.index-subscribe.subscribe-compact form { display: flex; flex-wrap: wrap;
align-items: center; justify-content: center; gap: 12px; }
.index-subscribe.subscribe-compact .email { margin-bottom: 0; flex: 0 1 340px; }
.index-subscribe.subscribe-compact .email label { margin-bottom: 0; width: 100%; }
.index-subscribe.subscribe-compact form > .row { margin: 0; flex: 0 0 auto; }
.index-subscribe.subscribe-compact form > .row > .col-md-6 { padding: 0; flex: 0 0 auto; max-width: none; }
.index-subscribe.subscribe-compact form > div:last-child { flex: 1 1 100%; }
.index-subscribe.subscribe-compact .small { font-size: 0.78rem; }
}
/* ---------------------------------------------------------------------------
Text for a screen reader and for nobody else.
The carousel arrows are drawings with no words in them, so a screen reader
announced two nameless buttons and a blind visitor had no way to know what
they did. This class puts the word in the page without putting it on the
screen — it is clipped to a single pixel rather than hidden, because
display:none and visibility:hidden are skipped by screen readers too.
Bootstrap 4 ships .sr-only, but the site loads only part of it, so it is
declared here rather than assumed. (2026-08-11)
--------------------------------------------------------------------------- */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}