since 2026-10-08 so its phone can be a tel: link (a link
can't nest in a link). The office-name link is stretched over the whole card;
the phone sits above it. (0,2,1)/(0,2,0)+ because `.entry a` (0,2,0) would
otherwise underline and recolour both. */
.gsd-provided-locations__card {
position: relative;
}
.gsd-provided-locations__card a.gsd-provided-locations__link {
color: inherit;
text-decoration: none;
}
.gsd-provided-locations__card a.gsd-provided-locations__link::after {
content: "";
position: absolute;
inset: 0;
}
.gsd-provided-locations__card a.gsd-provided-locations__link:focus-visible {
outline: none;
}
.gsd-provided-locations__card:focus-within {
outline: 2px solid var(--color-2, #001543);
outline-offset: 2px;
}
.gsd-provided-locations__card a.gsd-provided-locations__phone {
position: relative;
z-index: 1;
align-self: flex-start;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Truncation (2026-09-14). The busiest service pages list 39 offices — a wall
on desktop, a screen-and-a-half of photos on a phone. Collapsed, the grid
keeps the first 6 cards on desktop and NONE at <= 767px, where the ZIP field
is the interaction; js/gsd-provided-locations.js flips the state class on the
button. The cards stay in the DOM and the rules run on :nth-child, so the ZIP
sort's reordering decides WHICH six are on screen — always the nearest.
⚠ The 6, the 3 and the 767px are duplicated in
includes/gsd/gsd-provided-locations.php (gsd_provided_locations_limits(),
which the button's label counts with). Change them together. */
.gsd-provided-locations--collapsed .gsd-provided-locations__card:nth-child(n + 7) {
display: none;
}
.gsd-provided-locations__more {
margin-top: 1.75rem;
text-align: center;
}
/* Mirrors the Webflow .button look — the shared rule at the top of this file is
anchor-qualified (a.ui-button, button.wp-block-button__link), and this is
neither. Navy on transparent, filling on hover, like every other CTA. */
.gsd-provided-locations__toggle {
display: inline-block;
padding: 13px 28px;
border: 2px solid var(--color-2, #001543);
border-radius: 0;
background: transparent;
color: var(--color-2, #001543);
font-size: 1rem;
font-weight: 500;
line-height: 1;
text-align: center;
cursor: pointer;
transition: color .2s, background-color .2s;
}
.gsd-provided-locations__toggle:hover {
color: var(--color, #fff);
background: var(--color-2, #001543);
}
.gsd-provided-locations__toggle:focus-visible {
outline: 2px solid var(--color-6, #d29f13);
outline-offset: 2px;
}
/* Fewer cards than the desktop limit: nothing is hidden there, so the button
has no job — but it still has one on mobile, where every card is hidden. */
@media (min-width: 768px) {
.gsd-provided-locations--few .gsd-provided-locations__more {
display: none;
}
}
@media (max-width: 767px) {
.gsd-provided-locations--collapsed .gsd-provided-locations__card {
display: none;
}
/* A ZIP search has to be able to answer itself. Once one has run, the
nearest offices sort to the front of the grid, so show the first few
even while the rest of the list is still collapsed. */
.gsd-provided-locations--collapsed.gsd-provided-locations--zipped .gsd-provided-locations__card:nth-child(-n + 3) {
display: flex;
}
}
.standard-inner-wrapper > .main-service-section:first-child:not(.gl-page-intro) {
padding-top: 0;
}
.entry h5 {
font-size: 1.3em;
}
@media (max-width: 1080px) {
.wp-block-image.img-50 figure {
width: 100% !important;
}
/** Center images to avoid narrow text wrap **/
.alignleft, .alignright, .aligncenter, .wp-block-image .alignright, .wp-block-image .alignleft {
display: block;
float: none;
margin: auto;
margin-bottom: 20px;
text-align: center;
}
figcaption {
display: block !important;
}
.blog-entry-wrapper {
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
flex-direction: column-reverse;
}
.blog-entry-wrap, .featured-img-post {
width: 100%;
}
.featured-img-post {
margin-bottom: 0px;
text-align: center;
}
.attachment-post-thumbnail {
float: none;
}
.blog-entry-wrapper {
-webkit-box-pack: center;
justify-content: center;
}
.blog-title-excerpt, .blog-entry-wrap p {
text-align: center;
}
.entry a.moretag {
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 991px) {
.top-dd-list.w--open {
right: 0;
}
.search-button-modal {
margin-top: 1em;
margin-left: 10px;
}
.modal__overlay {
align-items: flex-start;
}
.modal__container {
margin-top: 100px;
}
.services-single-image {
display: flex;
flex-direction: column-reverse;
}
.w--open .w-icon-nav-menu:before {
content: "\e900";
}
aside {
flex-basis: auto;
width: 100%;
border-left: none;
padding: 10px;
}
.pillar-link-grid a {
padding: 1.5em;
}
/* Blog Containers */
.main-content {
width: 100%;
padding-right: 0;
}
.embed-container {
max-width: 100%;
padding-bottom: 56.25%;
}
/* Rollover LASIK Callouts */
.colorbox {
display: block;
z-index: 99999999;
-webkit-transform: translateX(0px) translateY(0px) translateZ(0px) !important;
transform: translateX(0px) translateY(0px) translateZ(0px) !important;
opacity: 1 !important;
}
.project-name {
-webkit-transform: translateX(0px) translateY(0px) translateZ(0px) !important;
transform: translateX(0px) translateY(0px) translateZ(0px) !important;
}
}
@media (max-width: 800px) {
/** Stack Gutenberg Columns & Media Text **/
.wp-block-columns {
display: block
}
.wp-block-column {
margin-left: 0px;
margin-right: 0;
}
.wp-block-column:nth-child(2n) {
margin-left: 0 !important;
}
.wp-block-media-text {
display: -webkit-box !important;
display: flex !important;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
margin-bottom: 0;
}
.wp-block-media-text__media img, .wp-block-media-text__media video {
padding-bottom: 30px;
}
.wp-block-media-text .wp-block-media-text__content {
padding: 0;
}
/* Column Shadow Boxes Mobile */
.box-columns .wp-block-column {
margin-left: 0;
margin-bottom: 20px;
width: 100%;
flex-basis: unset;
}
.wp-block-columns.box-columns {
flex-wrap: wrap;
}
.box-columns .wp-block-column:not(:first-child) {
margin-left: 0;
}
}
@media (max-width: 767px) {
figure.alignleft, img.alignleft, figure.alignright, img.alignright {
float: none !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
.kt-sc-textcol {
margin: 0 !important;
}
.kt-row-column-wrap {
max-width: 100% !important;
}
.wp-block-buttons > .wp-block-button {
width: 100%;
}
.blog-grid-wrapper .grid-excerpt {
max-width: 100%;
}
}
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
@media (max-width: 479px) {
body, :root {
font-size: 16px;
}
a.ui-button, a.wp-block-button__link, button.wp-block-button__link, .entry a.moretag {
width: 100%;
}
.featured-img-post {
float: none;
margin: 0 0 30px 0;
text-align: center;
}
}
/* Top bar (template-parts/header/menu-banner.php) — Book Online Today is the ONE
button in the row. Order is About, For Doctors, For Patients, Specials &
Events, Find a Location, Book Online Today — set in the MARKUP, not with flex `order`, so the keyboard
tab order matches what is seen.
The three dropdown toggles were webflow's navy boxes with white text; they now
read as links, like Find a Location (.top-nav-link): bold navy uppercase text
on the white bar. Book's label stays at webflow's regular weight. Hover darkens
the four text items to --color-3 (75% navy, ~8.1:1 on white; webflow's
--color-5 was 25% navy, ~1.75:1) and underlines the label.
The dropdown icons are hidden >=992px; Find a Location and Book keep theirs.
Below 992px webflow already hides the dropdown icons (.hide-tab) and brings
them back at <=479px, where every label is hidden and the icon IS the item.
They are inline SVGs filled with currentColor (the image files are
white-filled for the old box), pinned navy here.
The caret (.icon-3) stays as the dropdown cue. It is absolutely positioned
inside the toggle, so padding-right is its 1em width plus a 6px gap, with
webflow's 8px right margin zeroed. Gaps follow .top-nav-link: 20px, 10px at
<=479px. Same specificity as webflow.css and loaded after it, so these also
replace webflow's <=479px `.top-dd-toggle { padding-right: 20px }`.
components.css zeroes the toggle's :focus outline and the navy fill was the
only thing that marked focus, hence the :focus-visible ring. */
.top-dropdown {
margin-right: 20px;
}
.top-dd-toggle,
.top-dd-toggle:hover {
background-color: transparent;
}
.top-dd-toggle {
color: var(--color-2);
padding: 0 calc(1em + 2px) 0 0;
line-height: 1.2em;
}
/* A dropdown keeps its hover state while the pointer is in its open panel: the
panel is inside .top-dropdown, so :hover on the wrapper still matches there,
and webflow.js puts .w--open on the toggle for as long as the panel is open —
which also covers a panel opened from the keyboard or by a tap. */
.top-dropdown:hover > .top-dd-toggle,
.top-dd-toggle.w--open,
.top-nav-link:not(.special):hover {
color: var(--color-3);
}
.top-dropdown:hover > .top-dd-toggle .nav-top-link-txt,
.top-dd-toggle.w--open .nav-top-link-txt,
.top-nav-link:not(.special):hover .nav-top-link-txt {
text-decoration: underline;
text-underline-offset: 3px;
}
.top-dd-toggle .nav-top-link-txt,
.top-nav-link:not(.special) .nav-top-link-txt {
font-weight: 700;
}
/* No icon ever sits beside a dropdown label, so no gap before it either. */
.top-dd-toggle .nav-top-link-txt {
margin-left: 0;
}
@media (min-width: 992px) {
.top-dd-toggle .top-nav-icon {
display: none;
}
}
.top-dd-toggle .icon-3 {
margin-right: 0;
}
.top-dd-toggle .top-nav-icon {
color: var(--color-2);
}
/* Webflow sizes .top-nav-icon by width only; the SVG's height attribute would
otherwise stay 25px when the <=479px rule below narrows it to 18px. */
.nav-link-holder svg.top-nav-icon {
height: auto;
}
.top-dd-toggle:focus-visible {
outline: 2px solid var(--color-2);
outline-offset: 2px;
}
/* Book Online Today, reversed from webflow's: gold at rest, navy on hover. The
label is navy on the gold (~7.4:1; white on gold is ~2.4:1 and fails 1.4.3)
and white on the navy. The icon is currentColor, so it follows the label. */
.top-nav-link.special {
background-color: var(--color-6);
color: var(--color-2);
}
.top-nav-link.special:hover {
background-color: var(--color-2);
color: var(--color);
}
/* Room for Specials & Events (2026-10-05). The fourth dropdown label costs
~190px, and the row (logo 250px + five items) was already ~1030px wide, so
from 992px to roughly 1220px it would no longer fit. In that band Find a Location
goes icon-only, as it already is below 992px (the pin needs no label; its
aria-label in menu-banner.php names it), and the item gaps drop from 20px to
14px. :not(.special) leaves Book Online Today's label alone. */
@media (min-width: 992px) and (max-width: 1279px) {
.top-nav-link:not(.special) .nav-top-link-txt.hide {
display: none;
}
.top-dropdown,
.top-nav-link:not(.special) {
margin-right: 14px;
}
/* 2026-10-08: Blog & Media is a fifth dropdown, so in this band the two
icon-bearing dropdowns (Specials & Events, Blog & Media — the ones whose
label is `.hide` and whose icon has no `.hide-tab`) go icon-only too. Their
aria-label names them. (0,3,0) beats the >=992px icon-hiding rule. */
.top-dd-toggle .nav-top-link-txt.hide {
display: none;
}
.top-dd-toggle .top-nav-icon:not(.hide-tab) {
display: block;
}
}
/* The logo is the only flexible item in the non-wrapping .nav-top-items row,
and it is `width: 100%` (navigation.css) with a fixed `height: 70px` (.image),
so when the row ran short it used to squash HORIZONTALLY. contain scales it
down proportionally instead. A logo that fits renders exactly as before:
its box already has the image's own proportions. */
.nav-top-items .header-logo {
object-fit: contain;
object-position: left center;
}
@media (max-width: 479px) {
.top-dropdown, .top-nav-link {
margin-right: 14px;
}
.top-nav-link.special {
margin-right: 0;
}
}
/* Top bar under 480px — the .nav-link-holder icons (template-parts/header/
menu-banner.php). At <=479px webflow.css hides every label
(.nav-top-link-txt) and brings the .hide-tab icons back, so the row is the
logo plus bare icons — since 2026-10-05 just Specials & Events, Find a
Location and Book Online Today (About / For Doctors / For Patients move into
the mobile menu at <=767px; see .gsd-topbar-dd--to-mobile-menu below). The icons kept webflow's desktop 25px (.top-nav-icon,
0,1,0) while the logo, the only elastic thing in the non-wrapping
.nav-top-items row, absorbed whatever was left. Two classes (0,2,0) beat the
base rule. The dropdown caret (.icon-3) is a 1em glyph of the toggle's .8em
type and is already small; left alone. */
@media (max-width: 479px) {
.nav-link-holder .top-nav-icon {
width: 18px;
}
/* The three top-bar dropdown panels (About / For Patients / For Doctors) ran
off the LEFT edge of the screen here. Each is absolutely positioned inside
its own .top-dropdown (position: relative, ~48px wide once the labels are
hidden) and the <=991px rule above pins it with `right: 0`, so the panel
hangs leftwards from a ~48px icon. .top-dd-list a is `white-space: nowrap`,
so "Nurse Practitioners & Physician Assistants" makes the About panel about
340px wide while its icon sits ~200px into a 375px screen — the panel
started at a negative x. For Patients ("What To Expect At Your Appointment")
did the same, less far.
Fix: center each panel on the SCREEN rather than on its icon. Dropping
.top-dropdown to `position: static` re-resolves the panel's containing block
to .nav-top-items — the top-bar row itself, made relative here — which is the
same device navigation.css uses for .gl-mega-full (static
so the panel
reaches .glacial-top-banner). The row is exactly viewport-wide, so `top: 100%`
still means "immediately under the icon row" with no header height baked in,
while left/transform center the box and max-width keeps both edges on screen.
Not .glacial-top-banner as the anchor: at this width the banner is two rows
(icons, then the hamburger), so `top: 100%` there would drop the panel below
the hamburger and detach it from its icon.
WARNING min-width has to be zeroed: components.css gives every
.w-dropdown-list `min-width: 100%`, which now measures against the full-width
row and would force every panel edge-to-edge.
WARNING nowrap has to go with it, or max-width clips the long labels instead
of wrapping them. (0,2,0)/(0,2,1) to beat .w-dropdown-list and .top-dd-list a. */
.nav-top-items {
position: relative;
}
.top-dropdown {
position: static;
}
.top-dd-list.w--open {
left: 50%;
width: 100%;
right: auto;
transform: translateX(-50%);
min-width: 0;
max-width: calc(100% - 20px);
}
.top-dd-list.w--open a {
white-space: normal;
}
}
/* <=767px: About / For Doctors / For Patients leave the top bar and become a
section of the mobile menu (owner, 2026-10-05). Which dropdowns move is
decided in ONE place, gsd_mobile_topbar_menus() in
includes/gsd/gsd-mobile-topbar-menus.php: it tags the top-bar dropdowns
(.gsd-topbar-dd--to-mobile-menu) and prints the matching section
(ul.gsd-mobile-topbar) inside #navigation. These two rules are the swap.
The section reuses the primary nav's markup, so navigation.css's mobile rules
style its rows and js/glacial.js opens them with no extra CSS.
(0,2,1) because `.site-navigation > ul { display: flex }` is (0,1,1). */
@media (max-width: 767px) {
.top-dropdown.gsd-topbar-dd--to-mobile-menu {
display: none;
}
}
@media (min-width: 768px) {
.site-navigation > ul.gsd-mobile-topbar {
display: none;
}
}
/* <=767px: ONE header row — the hamburger joins the top bar (owner,
2026-10-05), which has the room now that About / For Doctors / For Patients
live in the mobile menu.
--gsd-header-h IS the fixed header's height at these widths, and it is SET
here rather than measured: the top row gets it as an explicit height and the
menu button is taken out of flow, so .navbar (a flex column whose other
children are the closed, display:none #navigation and an empty
glacial_after_nav) is exactly that tall. Everything that clears the header
below reads the same property, so changing the header height is one edit.
480–767px: 70px = logo 50px (webflow `.image`) + .brand's 5px margins
+ .nav-top-items' 5px padding.
<=479px: 60px = logo 40px (navigation.css caps .header-logo at 140px
wide, 722×206 → 40px tall; it loads after webflow.css, so its
height:auto beats `.image { height: 45px }`) + the same 20px.
(0,2,0) on the row: navigation.css sets `.nav-top-items { height: auto }`
at (0,1,0) and prints after this file.
The button (#openNavMenu, Webflow's .w-nav-button: a 24px icon glyph +
navigation.css's padding, 11px <=991px and 7px <=479px, so ~46px / ~38px)
is absolutely placed at the right of the
row, centred on it; the row's padding-right keeps the Book button clear of
it. Webflow still finds it (it looks for .w-nav-button inside the nav), and
glacial.js still measures .glacial-top-banner to place the open menu, so the
menu now opens straight under the single row. 768–991px is untouched: the
three text dropdowns are still in the top bar there and the hamburger keeps
its own row. */
@media (max-width: 767px) {
:root {
--gsd-header-h: 70px;
}
.navbar .nav-top-items {
height: var(--gsd-header-h);
padding-right: 60px;
}
.navbar > #openNavMenu {
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
}
/* Clear the fixed header — every hero/first section that sits directly
under it, flush (owner, 2026-09-17: no blank band above a hero on a
phone). webflow.css gave these 130px / 140px (.new-hero.vein) / 150px
(.ip-luminous-hero) / 90px (.ip-luminous-hero.est) / 151px
(.standard-inner-head), and 100px <=479px; style.css used to restate
them at 89px <=479px, the two-row header's measured height. The block
heroes all render one of these classes: glacial/home-hero = .new-hero-2,
lum-hero and lum-video-hero = .ip-luminous-hero, new-hero = .new-hero;
inner pages get .standard-inner-head from page-title.php.
⚠ .location-hero must stay in the list — the export left it out, and
it alone kept a gap on 54 location pages until 2026-09-17. The two-class
selectors match webflow's own (0,2,0) and win on source order. */
.ip-luminous-hero,
.ip-luminous-hero.est,
.new-hero,
.new-hero.vein,
.new-hero-2,
.standard-inner-head,
.location-hero {
margin-top: var(--gsd-header-h);
}
/* /locations/ (templates/template-locations.php) keeps a little air
above its , as it does on desktop (200px under a 151px header). */
.locations-archive-page {
margin-top: calc(var(--gsd-header-h) + 16px);
}
}
@media (max-width: 479px) {
:root {
--gsd-header-h: 60px;
}
/* Inner-page header (page-title.php): 30px top and bottom on small phones
(owner, 2026-10-12). webflow.css gives it 20% of the width on top below
992px and 50px below; this loads later at the same (0,1,0), so it wins. */
.standard-inner-head {
padding-top: 30px;
padding-bottom: 30px;
}
}
/* Any #hash target clears the fixed header (2026-10-12). Arriving at
/dermatology/#medical-skin from ANOTHER page, the browser's own fragment jump
parked the section at y=41 (the announcement banner's scroll-padding) under a
header that ends at y=191, so its first 150px were hidden. A same-page click
was fine, because Webflow's scroll module measures the header itself; the
browser's jump knows nothing about it. Measured in Chromium and WebKit: the
load-time and +2.5s positions were identical, so it is not a late layout shift.
Same numbers as glacial/service-tabs and the region finder's panels, which
already carry their own (blocks-frontend.css, gsd-region-finder.css). It adds
to html's banner scroll-padding, as theirs does. :target (0,1,0) reaches only
the element the URL names, so nothing else's scrollIntoView() changes. */
:target {
scroll-margin-top: 172px;
}
@media (max-width: 991px) {
:target {
scroll-margin-top: 160px;
}
}
@media (max-width: 767px) {
:target {
scroll-margin-top: calc(var(--gsd-header-h, 103px) + 21px);
}
}
/* Provider headshot cards — cpt-acf-templates/doctor-headshot-link.php now
emits the same .service-link tile the location pages use (styled in
css/webflow.css). The listing templates still wrap each card in
.cpt-doctor-image-link inside a .cpt-grid, so neutralize that wrapper and
let the tile fill its grid cell instead of webflow's width:20%.
:has() scopes this to the new markup — old markup elsewhere is untouched. */
.cpt-doctor-image-link:has(> a.service-link) {
border: 0;
box-shadow: none;
background: none;
}
.cpt-doctor-image-link > a.service-link {
width: 100%;
margin: 0;
min-height: 0;
aspect-ratio: var(--cpt-doctor-aspect, 4 / 5);
display: block;
}
/* The headshot must fill the tile for object-fit: cover to crop it. webflow.css
sets .image-7 { height: 100% } at (0,1,0), but the listing pages render the
grid inside #main.standard-inner-wrapper.entry, where the generic
`.entry img { height: auto }` reset above (0,1,1) wins and the photo drops to
its intrinsic height, leaving the tile short with the gradient band floating.
Two classes (0,2,0) out-rank the reset; location pages have no .entry wrapper
and are unaffected either way. */
.service-photo-div .image-7 {
width: 100%;
height: 100%;
}
/* Name band: keep the gradient legible and let long credentials wrap. */
.cpt-doctor-image-link .service-link-text-div {
background-image: linear-gradient(0deg, #000000eb, #0000 32%, #0000);
font-size: 1em;
line-height: 1.25;
text-align: center;
flex-direction: column;
justify-content: end;
align-items: center;
gap: 2px;
color: #fff;
}
.doctor-filter-grid {
margin-bottom: 3rem;
}
.doctor-filter-controls {
margin-bottom: 1rem;
}
.doctor-filter-controls {
margin-top: 0;
padding-bottom: 1em;
}
.service-link-specialty {
font-size: 0.78em;
font-weight: 400;
opacity: 0.9;
}
/* "Joining GSD " on the card of a provider who has not started yet
(includes/gsd/gsd-provider-join-date.php). Gold on the band's near-black
gradient foot is ~8.7:1, and it separates the announcement from the name
without a second font.
⚠ The band needs telling to stack. On /providers/ it already does — the
.cpt-doctor-image-link rule above sets flex-direction: column — but the cards
on a LOCATION page have no such wrapper and fall through to webflow.css:2531,
which is a plain `display: flex` ROW. A second child there would sit BESIDE
the name. :has() scopes the fix to cards that actually carry a date, so every
other provider card on the site renders exactly as before. */
.service-link-text-div:has(> .gsd-join-date) {
flex-direction: column;
justify-content: flex-end;
align-items: center;
text-align: center;
gap: 2px;
}
.gsd-join-date {
font-size: 0.78em;
font-weight: 500;
line-height: 1.25;
color: var(--color-6, #d29f13);
}
/* The same line as a BANNER across the foot of the headshot on /staff//
(owner request 2026-09-17). cpt-acf-templates/single-provider.php wraps the
photo in .gsd-headshot only when there is a banner to hang on it, so the ~160
providers with no start date keep byte-identical markup.
⚠ The wrapper is `width: fit-content`, NOT `width: 100%`, and the image is not
stretched. 47 providers' only headshot is under 800px (open question #9), and
forcing the photo to fill the 25% column would upscale those into a blur. This
way the wrapper shrinks to whatever the photo actually renders at and the
banner spans exactly that.
⚠ Navy background, WHITE text — not the gold the card version uses. Gold on
this navy is 7.4:1 and would pass, but the card's gold sits on a near-black
photo gradient where white would glare; a solid navy band is a banner, and
white on it is ~17:1.
⚠ Qualified with .gsd-headshot (0,2,0) rather than left at (0,1,0): the card
rule above sets `color` on the bare .gsd-join-date class, and two rules at the
same specificity would be decided by source order alone. */
.gsd-headshot {
position: relative;
display: block;
width: fit-content;
max-width: 100%;
margin-bottom: 1em;
}
/* The 1em moved up to the wrapper; `display: block` closes the inline-image
descender gap that would otherwise show as a sliver under the banner. */
.gsd-headshot .doctor-featured-image {
display: block;
margin-bottom: 0;
}
.gsd-headshot .gsd-join-date--banner {
position: absolute;
right: 0;
bottom: 0;
left: 0;
background: var(--color-2, #001543);
color: var(--color, #fff);
padding: 8px 10px;
text-align: center;
font-size: 0.85em;
font-weight: 500;
line-height: 1.25;
}
/* Closing CTA on a provider listing page — the content after the page's "More"
divider, which templates/template-providers.php renders below the last
provider group instead of above the grid (the Providers page's "Join Our
Team" / Careers block). Centered and rule-separated so it reads as a
deliberate page-foot CTA rather than a stray heading after ~160 headshots;
.doctor-filter-grid already supplies the 3rem gap above the rule. */
.providers-archive-outro {
border-top: 1px solid rgba(0, 21, 67, 0.15);
padding-top: 2.5rem;
margin-bottom: 3rem;
text-align: center;
}
/* core/buttons is display:flex, so text-align on the wrapper doesn't reach it. */
.providers-archive-outro .wp-block-buttons {
justify-content: center;
}
section.map-section {
border-bottom: 1px solid #999;
}
@media (max-width: 767px) {
.cpt-doctor-image-link > a.service-link {
aspect-ratio: 4 / 5;
height: auto;
}
}
/* Slow zoom on the headshot when the card is hovered/focused. The photo lives
in .service-photo-div, which webflow.css already gives overflow:hidden, so
the scaled image is clipped to the tile. Applies to both places these cards
appear: the location pages (glacial/location-providers) and the provider
listings (cpt-acf-templates/doctor-headshot-link.php).
- @media (hover: hover) keeps a tap on touch devices from leaving the image
stuck zoomed via sticky :hover.
- :focus-visible gets the same affordance for keyboard users.
- prefers-reduced-motion turns the movement off entirely. */
.service-link .image-7 {
transition: transform 1.1s ease-out;
will-change: transform;
}
@media (hover: hover) {
.service-link:hover .image-7 {
transform: scale(1.08);
}
}
.service-link:focus-visible .image-7 {
transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
.service-link .image-7 {
transition: none;
}
.service-link:hover .image-7,
.service-link:focus-visible .image-7 {
transform: none;
}
}
/* Footer CTA cards (Pay my bill / Schedule a Consult / Join Our Newsletter) —
solid navy fades in on hover.
No overlay element is needed: webflow.css already paints .footer-cta-div with
the brand navy (--color-2, #001543) and stacks the photo on top of it at 29%
opacity (.img-div.abs). Fading that photo out IS the navy fading in, and the
label keeps its own stacking context (.cta-link-txt is z-index:1), so it
stays legible the whole way through.
Guards match the headshot zoom above: hover-capable pointers only so a tap
doesn't leave a card stuck navy, :focus-visible for keyboards, and
reduced-motion swaps the fade for an instant change rather than dropping the
affordance. */
.footer-cta-div .img-div.abs {
transition: opacity 400ms ease-in-out;
}
@media (hover: hover) {
.footer-cta-div:hover .img-div.abs {
opacity: 0;
}
}
.footer-cta-div:focus-visible .img-div.abs {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.footer-cta-div .img-div.abs {
transition: none;
}
}
/* With Site Options → Footer → Newsletter Signup Link empty, the newsletter card
is not printed and footer-content.php tags the row `.gsd-cta-grid--two`, so
the two cards left share the width instead of leaving an empty third column.
Only from 480px: webflow.css already stacks the row to one column ≤479px. */
@media (min-width: 480px) {
.cta-holder .grid.gsd-cta-grid--two {
grid-template-columns: 1fr 1fr;
}
}
/* CareCredit badges (/financing/) — the two vendor buttons sit side by side.
They're a core/columns block so they stay editable in Gutenberg, but the
images are fixed 280x100 vendor assets: left at core's default 50/50 columns
each badge floats at the left edge of a half-width column with a large gap
between them. Collapsing the columns to their content width and centring the
row keeps the pair together at any viewport. Core already stacks columns
below 782px; flex-wrap covers the narrow range above that. */
.wp-block-columns.gsd-carecredit-buttons {
justify-content: center;
flex-wrap: wrap;
gap: 1.5rem;
}
.gsd-carecredit-buttons .wp-block-column {
flex-basis: auto;
flex-grow: 0;
}
.gsd-carecredit-buttons .wp-block-image,
.gsd-carecredit-buttons .wp-block-image figure {
margin: 0;
}
.page-id-396 .txt-div-48.with-pad.right-align {
align-items: flex-end;
}
/* "Read More Reviews" button under the homepage testimonial slider.
The Webflow slider parks its prev/next arrows OUTSIDE its own box —
.left-arrow/.right-arrow are absolutely positioned at bottom:-60px, so they
occupy the band from 20px to 60px below the slider — and anything following
the slider in normal flow starts at that same 20px offset, landing behind
them. 85px clears the arrows with ~25px to spare, and measures the same at
every breakpoint because the arrow offset is not responsive.
Both classes are needed in the selector: .btn-div._100 (webflow.css) also
sets margin-top, and a single-class rule loses to it on specificity. */
.btn-div._100.gsd-reviews-cta {
margin-top: 85px;
}
/* Homepage testimonial slider — size the box to the longest review, not to a
fixed 300px.
components.css gives every .w-slider a flat `height: 300px`, .w-slider-mask
and .w-slide inherit it as `height: 100%`, and webflow.css parks
.testimonial-div at `position: absolute; inset: 0`. So a review taller than
the box does not grow it and is not clipped either (overflow stays visible) —
it spills silently over the arrows and, on narrow screens, over the
"Read More Reviews" button below. The client's 476-character Cosmetic
Dermatology review overflowed by 71px at 390px wide and 155px at 320px,
overlapping the button from 375px down.
Rather than chase that with a per-breakpoint magic height, let the slider
take its height from its tallest slide and keep 300px as a floor so the
design's proportions are unchanged wherever the copy already fits (every
slide but that one, at every breakpoint). .testimonial-div has to leave the
absolute positioning behind for its text to contribute height at all; it is
the slide's only child, so relative flow puts it in exactly the same place.
Scoped to the block's own wrapper class, not to .welcome: .testimonial-div is
shared with glacial/testimonial-card and glacial/location-testimonials (grid
cards, which rely on the absolute positioning), and .welcome is itself shared
with glacial/doctor-card. wp-block-glacial-home-testimonials comes from
get_block_wrapper_attributes() in this block's render.php and is unique to it.
Consequence to know about: the box is now as tall as the LONGEST review at
the current width, on every slide, so shortening that review tightens the
whole band. */
.wp-block-glacial-home-testimonials .slider.w-slider {
height: auto;
min-height: 300px;
}
.wp-block-glacial-home-testimonials .testimonial-div {
position: relative;
inset: auto;
}
/* Location picker (glacial/service-locations) — wrap the tile row.
The Webflow .treatments-holder was drawn for a single row of three or four
hand-placed tiles: it is a non-wrapping flex row whose children are
width:25% with a fixed height:100px. This block instead emits one tile per
matching location, which on /esthetician-services/ is 11 — so the row ran
275% of its container, dragged the whole document 800px wider than the
viewport (the page scrolled sideways), and long office names such as
"Walnut Creek – Lennon Lane General Dermatology" spilled out of the boxes.
Scoped to this block's wrapper so the hand-built pick-links rows elsewhere
keep the designer's deliberate single-row behaviour.
The -50px pull-up that laps the tiles over the section above moves from each
tile to the holder: applied once at the container it still lifts the first
row, but no longer pulls every wrapped row up over the one before it. Doing
it here rather than with :nth-child() keeps it correct at every breakpoint,
where the tiles-per-row count changes (4 → 2 at 991px → 1 at 479px). */
.wp-block-glacial-service-locations .treatments-holder {
flex-wrap: wrap;
justify-content: flex-start;
margin-top: -50px;
}
.wp-block-glacial-service-locations .treatment-link {
margin-top: 0;
height: auto;
min-height: 100px;
}
/* Mobile stacks the tiles one per row at half height, and drops the pull-up
entirely (see .treatment-link.lum._25 in the 479px block of webflow.css) —
match that rather than inheriting the desktop values. */
@media screen and (max-width: 479px) {
.wp-block-glacial-service-locations .treatments-holder {
margin-top: 0;
}
.wp-block-glacial-service-locations .treatment-link {
min-height: 50px;
}
}
/* ==========================================================================
Location hero — "classic" layout (cpt-acf-templates/single-location.php)
The client asked for the location hero to read like the old site's, using
goldenstatedermatology.com/beverly-hills/ as the reference: a full-bleed
office photo under a dark scrim, with one centred column of copy over it —
affiliation logo, heading, gold rule, street label, then the buttons.
Everything is scoped to `.location-hero.gsd-hero-classic`. That matters:
the markup this replaced was built from Webflow classes
(.hero-column-left-2, .hero-text-div-white, .hero-text-holder,
.hero-text-div-white-2, .hero-column-right, .hero-img, .special-line-inner)
that the glacial/home-hero block and blocks/block-builders.php also emit, so
restyling them by name would have moved the homepage hero too. The modifier
keeps this change to the one template — and makes it revertible by deleting
one class and this block.
Measurements follow the old page's own Elementor CSS: 620px minimum height,
50% black scrim, 450px logo cap, centred text. Colours come from the NEW
brand tokens in css/webflow.css (--color-6 gold #d29f13, --color-2 navy
#001543) rather than the old site's #B9A25F / #0C2340, so the hero matches
the rest of this build.
========================================================================== */
.location-hero.gsd-hero-classic {
justify-content: center;
align-items: center;
height: auto;
min-height: 620px;
padding: 60px 30px;
overflow: hidden;
}
/* The photo becomes the section's background. .hero-img already carries
object-fit:cover and 100% width/height from webflow.css; only its
positioning has to change (it is position:static there). This
object-position is the ACF "Default (30%)" crop: a little above centre,
which keeps heads and signage that true centre cut off on many offices
(tried 2026-10-12, reverted the same day). It was `0 30%` before that,
which pinned the photo to its LEFT edge on phones, where the banner is
taller than the photo and cover crops the sides instead. */
.location-hero.gsd-hero-classic .hero-img {
z-index: 1;
object-position: 50% 30%;
position: absolute;
inset: 0;
}
.search {
display: block;
}
/* Crop position — ACF `hero_image_position` on the location, emitted by
cpt-acf-templates/single-location.php as a gsd-hero-pos-* modifier. The
banner is much wider than it is tall, so object-fit:cover throws away the
top and bottom of a portrait-ish photo; these let an editor slide the crop
up or down. VERTICAL ONLY (2026-10-12) — the x stays 50% on every stop, so
phones, where the sides are what gets cropped, always see the middle. No
rule for the stored value `center`: it is the "Default (30%)" choice, the
template emits no class for it, and it falls through to the 50% 30% rule
above. True centre is `middle`. */
.location-hero.gsd-hero-classic.gsd-hero-pos-top .hero-img {
object-position: 50% 0%;
}
.location-hero.gsd-hero-classic.gsd-hero-pos-upper .hero-img {
object-position: 50% 25%;
}
.location-hero.gsd-hero-classic.gsd-hero-pos-middle .hero-img {
object-position: 50% 50%;
}
.location-hero.gsd-hero-classic.gsd-hero-pos-lower .hero-img {
object-position: 50% 75%;
}
.location-hero.gsd-hero-classic.gsd-hero-pos-bottom .hero-img {
object-position: 50% 100%;
}
/* Flat 50% black, exactly as the old page had it — the office photos vary a
lot in exposure, and a flat scrim is what kept white type legible across all
of them. */
.location-hero.gsd-hero-classic .loc-hero-scrim {
z-index: 2;
background-color: #00000080;
position: absolute;
inset: 0;
}
.location-hero.gsd-hero-classic .loc-hero-inner {
z-index: 3;
flex-flow: column;
align-items: center;
width: 100%;
max-width: 900px;
display: flex;
position: relative;
text-align: center;
}
/* Optional editor-supplied eyebrow above the heading (ACF `hero_eyebrow`, any
location — see cpt-acf-templates/single-location.php). The old site used this
slot for announcements ("Opening October 15th") and for the practice-brand
line, both bold white and centred over the photo.
Sized well under the 2.5em .ip-header so it introduces the heading rather
than competing with it, and deliberately given no rule of its own: the gold
.special-line-inner already sits under the heading. */
.location-hero.gsd-hero-classic .loc-hero-eyebrow {
color: var(--color);
max-width: 700px;
margin: 0 0 20px;
font-size: clamp(17px, 1.5vw, 22px);
font-weight: 700;
line-height: 1.35;
}
.location-hero.gsd-hero-classic .loc-hero-eyebrow a {
color: var(--color-6);
text-decoration: underline;
}
/* Affiliation logo. 450px is the width the old page set on the Beverly Hills
mark, and the marks are reverse (white) art on transparent, so they need no
treatment beyond a size cap.
The cap is on BOTH axes because the marks are wildly different shapes: the
wordmarks are wide and short (491x102, 2298x632) but the GSD stacked mark is
nearly square (650x534). Width alone let that one render 450x370 and push the
whole hero to well over 900px tall. Bounding the height too lands it at
~207x170 — close to the 300x246 the old page used — while the wordmarks stay
width-limited exactly as before, since at 450px wide they are only 93px and
124px tall. */
.location-hero.gsd-hero-classic .loc-hero-brand {
width: auto;
max-width: min(310px, 100%);
height: auto;
max-height: 170px;
margin-bottom: 25px;
object-fit: contain;
}
.location-hero.gsd-hero-classic .ip-header {
color: var(--color);
text-align: center;
max-width: 800px;
margin-bottom: 20px;
}
/* webflow.css draws .special-line-inner as a left-bleeding rule
(margin-left:-200px, min-width:0) for the old left-aligned card. Centred, it
wants to be a short measured rule instead. */
.location-hero.gsd-hero-classic .special-line-inner {
width: 120px;
min-width: 120px;
margin: 0 auto 20px;
}
.location-hero.gsd-hero-classic h4 {
color: var(--color);
margin-top: 0;
margin-bottom: 25px;
font-weight: 400;
}
/* Centre the button row and let it wrap: three buttons (Book / Call / Text)
with full phone numbers in the labels overflow a narrow viewport otherwise.
The trailing 10px margins webflow.css puts on every .button would push the
row off-centre, so spacing moves to a gap. */
.location-hero.gsd-hero-classic .btn-div {
flex-wrap: wrap;
justify-content: center;
gap: 10px;
display: flex;
}
/* Solid navy fill with a gold border (client direction, 2026-09-02). The `rev`
class in the markup is the Webflow dark-background variant — gold border,
white label, transparent fill — so only the fill and the hover state are
added here. A solid fill also means the labels no longer depend on how bright
the office photo behind them happens to be.
Hover inverts to a gold fill with navy text rather than keeping .button.rev's
white, which would sit at about 2:1 against #d29f13. */
.location-hero.gsd-hero-classic .btn-div .button {
border-color: var(--color-6);
background-color: var(--color-2);
color: var(--color);
margin-bottom: 0;
margin-right: 0;
}
.location-hero.gsd-hero-classic .btn-div .button:hover,
.location-hero.gsd-hero-classic .btn-div .button:focus-visible {
background-color: var(--color-6);
color: var(--color-2);
}
/* The Saturday badge keeps webflow.css's absolute bottom-right placement on
desktop, where the centred copy column leaves the corner free; it only needs
to clear the scrim. See the 991px block for why that changes lower down. */
.location-hero.gsd-hero-classic .badge {
z-index: 4;
}
.single-location .img-div.max-height {
max-height: 450px;
}
@media screen and (max-width: 991px) {
/* Below 991px the centred copy column grows wide enough that the badge,
parked in the bottom-right corner, lands on top of the Call and Text
buttons and hides their labels. So it comes out of the corner and stacks
under the buttons instead.
webflow.css already flips .location-hero to flex-flow:column at this
width, which is what makes that work: the badge becomes the second item
in the column. The base rule's justify-content/align-items simply swap
axes in column flow, so both items stay centred. z-index still applies —
a static flex item honours it — keeping the badge above the scrim. */
.location-hero.gsd-hero-classic {
min-height: 520px;
}
.location-hero.gsd-hero-classic .badge {
position: static;
max-width: 120px;
margin: 25px auto 0;
}
}
@media screen and (max-width: 479px) {
/* The fixed-header clearance that lived here (89px, the old two-row
header) moved to the --gsd-header-h block in 2026-10-05, which covers
every width <=767px. */
.location-hero.gsd-hero-classic {
min-height: 480px;
padding: 40px 20px;
}
.location-hero.gsd-hero-classic .loc-hero-eyebrow {
margin-bottom: 16px;
}
.location-hero.gsd-hero-classic .loc-hero-brand {
max-width: 280px;
margin-bottom: 20px;
}
/* Full-width buttons stacked, so long "Call (925) 932-7704" labels stop
wrapping mid-number. */
.location-hero.gsd-hero-classic .btn-div {
width: 100%;
}
.location-hero.gsd-hero-classic .btn-div .button {
width: 100%;
}
}
.wp-block-glacial-location-providers .services-holder-2 {
height: auto;
min-height: auto;
}
/* --- Service link pills: 16px label below the desktop breakpoint -----------
webflow.css:676 sets .doc-patient-link to 18px and never revisits it: the
export's 991 / 767 / 479 blocks only touch width and margin-left, and no
other rule anywhere sets a font-size on the pill or on the inside it
(the label inherits). So this one declaration is the whole change.
Same specificity (0,1,0) as the base rule, so it wins on source order alone
— style.css is enqueued with main-site-style (webflow.css) as its
dependency, and blocks-frontend.css, which loads after this, sets no
font-size here either.
Deliberately the bare class, so every pill follows: the location pages'
service lists (glacial/location-services-list, which also prints unlinked
services as span.doc-patient-link), the homepage pills (glacial/link-pill)
and the service-tab panes (.gl-svc-pane). 991px is the Webflow tablet
breakpoint this theme uses throughout; move it to 767 to spare tablets. */
@media screen and (max-width: 991px) {
.doc-patient-link {
font-size: 16px;
}
}
.doctor-specialties-locations li .ui-button {
max-width: 100% !important;
}