/* * Forsyth Eye Health — inner-page layout layer (Sept 2026). * Everything that makes an inner page read like the homepage but is NOT a block: * the white content wrapper's rhythm, the wave out of it, the plugin's related-doctors * band and the closing CTA sequence. Enqueued after style.css (includes/custom-filters.php). */ /* --- First section under the hero sits flush against it (no top padding) --- The breadcrumbs now live inside .ip-header, so .ip-section-white follows it directly. */ .ip-header + section { padding-top: 0; } /* --- Page backdrop --- webflow.css paints the site gradient on with `background-attachment: fixed`. Mobile Safari does not honour fixed attachment (Chrome's mobile emulation reproduces it), so the gradient never paints and the body falls back to its white background — which turns every white-on-gradient section into white-on-white: the homepage service cards, the team band and the closing CTA all lose their text. A fixed-position pseudo-element gives the identical result and behaves the same on every browser. The white base moves to because .footer is transparent and relies on it. */ html { background-color: #fff; } body { background-image: none; background-color: transparent; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(#33034961, #33034961), url('../images/new-gradient.jpg'); background-position: 0 0, 50% 50%; background-repeat: repeat, no-repeat; background-size: auto, cover; } /* --- Inner page hero photo --- webflow.css paints the photo straight onto .ip-header, and the picture's pale left third sits exactly where the white h1 does. Move the photo onto ::before so it can be mirrored, and lay a left-weighted scrim over it on ::after, keeping a light wash across the rest in place of the flat 10% tint it replaces. */ .ip-header { background-image: none; } .ip-header::before, .ip-header::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; } .ip-header::before { background-image: url('../images/shutterstock_732119692-1.webp'); background-position: 100% 50%; background-repeat: no-repeat; background-size: cover; transform: scaleX(-1); } .ip-header::after { background-image: linear-gradient( 90deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.48) 35%, rgba(0, 0, 0, 0.28) 70%, rgba(0, 0, 0, 0.12) 100% ); } /* Narrow screens: the title fills the width, so the fade to the right leaves its tail exposed — flatten the scrim instead of ramping it. */ @media (max-width: 991px) { .ip-header::after { background-image: linear-gradient( 90deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.34) 100% ); } } /* Both real children sit above the two backdrop layers. */ .ip-header > .wave-break { z-index: 1; } .ip-header > .h2-ip-title { position: relative; z-index: 1; } /* --- Inner page hero title --- webflow.css pins .h2-ip-title at 4em (64px) with no breakpoint step, and its only line-height comes from components.css's `h1 { line-height: 44px }` — so a title that wraps renders 64px text on a 44px line box. Scale it fluidly and give it a unitless line-height that tracks the font size. */ .h2-ip-title { font-size: clamp(2rem, 7vw, 4em); line-height: 1.1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 2px 14px rgba(0, 0, 0, 0.45); } /* --- Breadcrumbs, moved under the page title inside the hero --- (template-parts/header/page-title.php). webflow.css styles .breadcrumbs as its own white band sitting below the hero; in here it drops the white background and the side padding (.ip-header already pads 5%), sits above the photo/scrim layers and goes white like the title above it. */ .ip-header > .breadcrumbs { position: relative; z-index: 1; display: block; background-color: transparent; padding: 0; margin-top: 18px; max-width: 60ch; } .ip-header > .breadcrumbs #breadcrumbs { margin: 0; color: var(--color); font-size: clamp(0.8rem, 1.6vw, 0.95rem); line-height: 1.5; text-transform: uppercase; font-weight: 500; letter-spacing: 0.02em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); } /* Yoast emits plain and elements, so colour them all explicitly — including the current (last) crumb, which Yoast wraps in .breadcrumb_last. */ .ip-header > .breadcrumbs #breadcrumbs a, .ip-header > .breadcrumbs #breadcrumbs span, .ip-header > .breadcrumbs #breadcrumbs .breadcrumb_last { color: var(--color); } .ip-header > .breadcrumbs #breadcrumbs a { text-decoration: none; } .ip-header > .breadcrumbs #breadcrumbs a:hover, .ip-header > .breadcrumbs #breadcrumbs a:focus-visible { color: var(--color); text-decoration: underline; } /* The wave is absolutely positioned across the hero's base (20vh desktop, 100px at 991px, 60px at 479px — webflow.css). On narrow screens the trail wraps to a second line and would run into the wave's white, so pad the hero out past it. */ @media (max-width: 991px) { .ip-header { padding-bottom: 115px; } .ip-header > .breadcrumbs { margin-top: 14px; } } @media (max-width: 479px) { .ip-header { padding-bottom: 75px; } .ip-header > .breadcrumbs { margin-top: 12px; } } /* --- White content wrapper: the section already pads 5%, so the inner div doesn't --- */ .ip-section-white > .standard-inner-wrapper { padding-top: 0; padding-bottom: 0; } .ip-section-white > .standard-inner-wrapper > .gl-split:first-child .txt-div._48 { padding-top: 0; } .ip-section-white > .standard-inner-wrapper > :last-child { margin-bottom: 0; } .ip-section-white > .standard-inner-wrapper > .gl-section:last-child { /*margin-bottom: -5%;*/ } .ip-section-white > .standard-inner-wrapper > .gl-section.alignfull:last-child.purple, .ip-section-white > .standard-inner-wrapper > .gl-section.alignfull:last-child.gl-bg-gradient, .ip-section-white > .standard-inner-wrapper > .gl-section.alignfull:last-child.gl-bg-light { margin-bottom: -5%; } /* --- Wave out of the white wrapper onto the page gradient --- */ .wave-break.fehs-wave-out { display: none; height: 20vh; background-color: transparent; background-image: url('../images/wave-white.png'); background-position: 50% 100%; background-size: 110%; background-repeat: no-repeat; margin-top: -5px; transform: rotateX(180deg); transform-style: preserve-3d; pointer-events: none; } /* --- Related doctors (glacial-cpt-acf) on the gradient, styled like the homepage team cards --- */ .doctors-section { background-color: transparent; color: var(--color); padding: 6% 0 0; } .doctors-section .doctors-container { padding: 0 0 2em; } .doctors-section h2 { color: var(--color); text-align: center; font-size: 3em; margin-bottom: 40px; } .doctors-section .cpt-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } .doctors-section .cpt-doctor-image-link { width: 31%; max-width: 420px; height: 290px; background: none; border: 1px solid #ffffff5c; border-radius: 20px; box-shadow: none; overflow: hidden; position: relative; } .doctors-section .cpt-doctor-image-link > a.doctor-headshot-link { display: block; height: 100%; padding: 0; position: relative; color: var(--color); background: none; } .doctors-section .cpt-doctor-image-link > a.doctor-headshot-link:hover { background: none; color: var(--color); } .doctors-section .doctor-headshot-link img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border: 0; margin: 0; aspect-ratio: auto; display: block; transition: transform 400ms ease; } .doctors-section .doctor-headshot-link:hover img { transform: scale(1.04); } .doctors-section .doctor-name { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 60px 30px 26px; text-align: left; font-size: 1.5em; font-weight: 400; color: var(--color); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)); } /* --- "You Might Also Like" --- */ .section.related-pages { padding-top: 6%; padding-bottom: 0; margin-bottom: 50px; } .section.related-pages h2 { font-size: 3em; } .section.related-pages .grid-2.top { margin-top: 30px; } /* --- Closing CTA sequence (wave → purple band → wave into the footer) --- */ .fehs-closing-cta .lens-cta { opacity: 1; } .fehs-closing-cta { margin-top: 20px; } @media (max-width: 991px) { .wave-break.fehs-wave-out { height: 100px; } .doctors-section .cpt-doctor-image-link { width: 47%; } } @media (max-width: 767px) { .wave-break.fehs-wave-out { height: 60px; } .doctors-section .cpt-doctor-image-link { width: 100%; max-width: none; } .doctors-section h2, .section.related-pages h2 { font-size: 2.2em; } } /* --- Buttons: the theme's generic button follows the homepage .button --- style.css drives a.ui-button / a.wp-block-button__link / .entry a.moretag off --gl-button-*; point those at the Webflow palette so editor buttons, the plugin's CPT buttons and the "Clear Filters" control all read purple + round instead of the theme's default black square. */ :root { --gl-button-color: var(--color); --gl-button-bg: var(--color-3); --gl-button-color-hover: #fff; --gl-button-bg-hover: #cc059c; --gl-button-border: 1px solid transparent; --gl-button-radius: 50px; --gl-button-padding: 15px 30px; --gl-button-transform: none; --gl-button-weight: 400; --gl-button-line-height: 1.2em; } a.ui-button:hover, a.wp-block-button__link:hover, .entry a.moretag:hover { box-shadow: none; } /* --- Doctors archive and the location pages' doctor list: the same card as the .doctors-section band, on white instead of the page gradient --- */ .post-type-archive-doctors .doctor-type-heading { text-align: center; margin-bottom: 40px; } .post-type-archive-doctors .doctor-filter-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-left: 0; margin-right: 0; } .post-type-archive-doctors .doctor-filter-grid .cpt-doctor-image-link { width: 31%; max-width: 420px; height: 45vh; min-height: 360px; margin: 0; background: none; border: 1px solid #0000001a; border-radius: 20px; box-shadow: none; overflow: hidden; position: relative; } .post-type-archive-doctors .cpt-doctor-image-link > a.doctor-headshot-link, .single-location-doctors .cpt-doctor-image-link > a.doctor-headshot-link { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 0; position: relative; text-align: left; background: none; color: var(--color); } .post-type-archive-doctors .cpt-doctor-image-link > a.doctor-headshot-link:hover, .single-location-doctors .cpt-doctor-image-link > a.doctor-headshot-link:hover { background: none; color: var(--color); } .post-type-archive-doctors .doctor-headshot-link img, .single-location-doctors .doctor-headshot-link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; border: 0; margin: 0; aspect-ratio: auto; display: block; transition: transform 400ms ease; } .post-type-archive-doctors .doctor-headshot-link:hover img, .single-location-doctors .doctor-headshot-link:hover img { transform: scale(1.04); } .post-type-archive-doctors .doctor-headshot-link::after, .single-location-doctors .doctor-headshot-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 65%; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); pointer-events: none; } .post-type-archive-doctors .doctor-name, .post-type-archive-doctors .doctor-additional-specialties, .single-location-doctors .doctor-name { position: relative; z-index: 1; /* ::after is the last child, so the caption has to be lifted over it */ margin: 0; padding: 0 30px; color: var(--color); text-align: left; } .post-type-archive-doctors .doctor-name, .single-location-doctors .doctor-name { padding-top: 60px; padding-bottom: 10px; font-size: 1.5em; font-weight: 400; line-height: 1.2; } .post-type-archive-doctors .doctor-additional-specialties { min-height: 0; padding-top: 6px; padding-bottom: 26px; font-size: 0.95em; line-height: 1.3; opacity: 0.85; } @media (max-width: 991px) { .post-type-archive-doctors .doctor-filter-grid .cpt-doctor-image-link { width: 47%; height: 40vh; } } @media (max-width: 767px) { .post-type-archive-doctors .doctor-filter-grid .cpt-doctor-image-link { width: 100%; max-width: none; height: 360px; } } /* The location page's list keeps the plugin's grid: the column count stays on --cpt-related-doctor-per-row and the narrow breakpoint on --cpt-all-doctor-per-row-mobile (glacial-cpt.css), so the per-row setting still drives the layout. Only the card box is restyled here — the plugin paints it as a purple padded box with the name under the headshot, which has to be cleared before the shared card rules above can take. */ .single-location-doctors { margin-top: 2.5em; /* This list sits in the content column beside the info sidebar rather than across the page, so the mobile track that suits the full-width grids leaves it four-plus across and skinny. The count itself is left on the plugin's own setting. */ --cpt-all-doctor-per-row-mobile: 240px; } .single-location-doctors h2 { margin-bottom: 40px; } .single-location-doctors .cpt-grid { display: grid; grid-template-columns: repeat(var(--cpt-related-doctor-per-row), 1fr); gap: 24px; } .single-location-doctors .cpt-doctor-image-link { width: 100%; height: 290px; margin: 0; padding: 0; background: none; border: 1px solid #0000001a; border-radius: 20px; box-shadow: none; overflow: hidden; position: relative; } /* The plugin's own breakpoint: the sidebar stacks and the grid goes to auto-fit tracks. */ @media (max-width: 991px) { .single-location-doctors .cpt-grid { grid-template-columns: repeat(auto-fit, minmax(var(--cpt-all-doctor-per-row-mobile), 1fr)); } } /* --- Doctor pages: the headshot column reads as a centred card. The plugin already strips the list bullets and auto-centres .ui-button, so one text-align centres the headings, the specialty/location buttons and the post links together. --- */ .single-doctor-img-info { text-align: center; } .single-location-info, .single-location-content { padding-top: 30px; } /* Stacked below the plugin's own breakpoint — info first, no side rule. */ @media (max-width: 991px) { .single-locations .single-cpt-wrapper { flex-direction: column; } .single-locations .single-cpt-wrapper > div:first-child { border-left: 0; padding-left: 0; } .single-locations .single-cpt-wrapper > div:nth-child(2) { padding-right: 0; } } /* --- Numbered step cards read as a compact list, not full-size content cards --- */ .gl-info-numbered .gl-info-card { padding: 24px 26px; } .gl-info-numbered .gl-info-card::before { width: 36px; height: 36px; font-size: 1em; margin-bottom: 14px; } .gl-info-numbered .gl-info-card p, .gl-info-numbered .gl-info-card li { font-size: 0.95em; line-height: 1.5; } .gl-info-numbered .gl-info-card .gl-checklist { margin: 10px 0 0; } /* --- A grid inside a section carries no bottom margin of its own (blocks-frontend.css only spaces blocks that are direct children of .standard-inner-wrapper), so a paragraph after it collides with the tallest column. --- */ .gl-section > .wrap > .gl-grid { margin-bottom: 40px; } .gl-section > .wrap > .gl-grid:last-child { margin-bottom: 0; } /* --- Lists in a centred section centre as a block; the items themselves stay left-aligned so the check marks (or bullets) line up under each other instead of stranding at the far left of the container. --- */ .wrap.center > .gl-checklist, .wrap.center > .gl-white > .gl-checklist { display: inline-grid; justify-content: center; text-align: left; } .wrap.center > ul[role="list"]:not(.gl-checklist), .wrap.center > ol { display: inline-block; text-align: left; } /* --- A centred section reads as one centred column. A column grid of plain copy inside one has no image or card to line up against, so its cells stack instead: splitting a paragraph and a check list across two columns leaves the list stranded at the far left with a half-empty column beside it. A grid that does carry media keeps its columns. --- */ .gl-section > .wrap.center > .gl-grid:not(:has(img, .gl-image, .gl-card, .gl-cards, .gl-circles, .gl-info-cards)) { grid-template-columns: 1fr; gap: 0; } /* --- ...and once a grid is in play the copy lives in the cells, so the centring above has to reach into them as well as the wrap's own children. --- */ .wrap.center .gl-col > p { max-width: 60em; margin-left: auto; margin-right: auto; } .wrap.center .gl-col > .gl-checklist { display: inline-grid; justify-content: center; text-align: left; } .wrap.center .gl-col > ul[role="list"]:not(.gl-checklist), .wrap.center .gl-col > ol { display: inline-block; text-align: left; } /* --- A photo in a section's column grid is illustration, not the subject: cap its height so a tall image can't stretch the band far past the copy beside it. --- */ .gl-section .gl-grid .gl-image .img { max-height: 360px; object-fit: cover; } /* --- Footer runs full-bleed like every other band --- */ .glacial-footer { max-width: none; width: 100%; } /* --- Footer fine print (copyright, credit, screen-reader notice, disclaimer) sits a step below body copy so it reads as legal text rather than footer content. The tel: link never breaks, so "(336) 842-5477" can't split across two lines. --- */ .footer-legal { font-size: 14px; line-height: 1.5; } .footer-legal p { margin-bottom: 12px; } .footer-legal p:last-child { margin-bottom: 0; } .footer-legal a[href^="tel:"] { white-space: nowrap; } /* --- The two legal links (Accessibility Disclaimer | Disclaimer) share one line, with the divider spaced off both links. Each link stays whole if the pair wraps. --- */ .footer-legal .footer-legal-links a { white-space: nowrap; } .footer-legal .legal-sep { margin: 0 6px; } /* --- Bayou Beauty "Product Spotlight" band (.wrap.product) --- webflow.css sizes this band's photo for the design's square product.jpg: 110% of the band height, anchored right, nudged to 85% below 992px. The Bayou Beauty spotlight photo is a 4:3 crop, so height-based sizing makes it wide enough to clip the bottle top and bottom and slide it behind the bullet panel — at 768-991px the bottle disappears behind the copy entirely. Size it on width instead (45% of the band), which keeps the bottle clear of the half-width text column at every width the two-column layout is used, and never clips it. The band's base colour is set to the photo's own backdrop so the photo has no visible edge where it sits; re-sample this if the photo is ever replaced. */ .wrap.product { background-color: #fbf2f7; background-size: auto, 45% auto; background-position: 0 0, 100% 50%; } /* Below 480px webflow drops the band to a single column, so the photo moves under the copy at full width and reserves its own height (the crop is 4:3 and the band is 90vw). The block's inline gradient is horizontal and opaque across the left 43%, which would paint straight over the bottle once the photo is full width, so the gradient layer is shortened to just the copy area above the photo. */ @media screen and (max-width: 479px) { .wrap.product { background-size: 100% calc(100% - 67vw), 100% auto; background-position: 0 0, 50% 100%; background-repeat: no-repeat, no-repeat; padding-bottom: 67vw; } }