/* ═══════════════════════════════════════════════════════════════════ Glacial Blocks — frontend + editor CSS The faithful Access Eye section blocks rely on css/webflow.css for all layout/typography. This file holds only block-specific shims: - editor-canvas neutralizers (scoped to .editor-styles-wrapper) - anything not expressible via the design stylesheet ═══════════════════════════════════════════════════════════════════ */ /* Full-bleed section blocks: cancel the editor's default content max-width so faithful sections span the canvas like they do on the front end. */ .editor-styles-wrapper .wp-block[data-align="full"] { margin-left: 0; margin-right: 0; } /* The fixed .site-header does not exist in the editor canvas — drop the hero / page-title top offset there so the first block isn't pushed off-screen. */ .editor-styles-wrapper .hero { min-height: 78vh; } /* ═══════════════════════════════════════════════════════════════════ Tier-A inner-page blocks (gl-*) — styled with the Access Eye design tokens from css/webflow.css (:root). Blocks render inside #main.entry on service/inner pages. ═══════════════════════════════════════════════════════════════════ */ /* ---- Section: full-bleed band + rhythm ---------------------------------- */ .gl-section { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); padding-block: clamp(3rem, 6vw, 5.5rem); overflow-x: clip; } .gl-section-inner { max-width: 1550px; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem); } .gl-section--center { text-align: center; } /* prose sitting directly in a band (not inside a grid/cell/split) keeps a readable line length instead of running the full 1350px */ .gl-section-inner > p { /*max-width: 70ch;*/ } .gl-section--center .gl-section-inner > p { max-width: none; } /* a note following a card grid needs air between it and the cards */ .gl-section-inner > .gl-grid + p { margin-top: clamp(1.5rem, 3vw, 2.25rem); } .gl-section--center .gl-section-inner { max-width: 820px; } /* bottom-gap variants (default/medium = flush color bands) */ .gl-section--mb-0 { margin-bottom: 0; } .gl-section--mb-sm { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .gl-section--mb-lg { margin-bottom: clamp(3rem, 6vw, 5rem); } /* backgrounds */ .gl-section--light { background: var(--cream, #F5EFE6); } .gl-section--brand { background: var(--blush, #F2E8E2); } .gl-section--dark { background: var(--dark-brown, #271911); } .gl-section--accent { background: var(--accent, #f6410f); } /* dark / accent bands flip text light */ .gl-section--dark, .gl-section--accent { color: var(--cream, #F5EFE6); } .entry .gl-section--dark :is(h1,h2,h3,h4,h5,h6), .entry .gl-section--accent :is(h1,h2,h3,h4,h5,h6) { color: #fff; } .gl-section--dark :is(p,li), .gl-section--accent :is(p,li) { color: rgba(255, 255, 255, .9); } .gl-section--dark a:not(.gl-btn) { color: var(--beige, #e3c8aa); } /* Two adjacent bands sharing a background double the rhythm at the seam — one band's bottom padding stacked on the next band's top padding — with no colour change to justify it. The second band drops its top padding so the pair reads as one continuous band. Guarded two ways so differently-coloured bands are untouched: - the pair must be in the same colour group. `none` (no bg class) and --light are one group: is already --cream, so a cream band is the same colour as no band at all. - the first band must be flush, i.e. default or "None" bottom spacing. An --mb-sm / --mb-lg band deliberately shows page background below itself, so the two are visually separate and each keeps its own padding. */ .gl-section:not(:is(.gl-section--brand, .gl-section--dark, .gl-section--accent, .gl-section--mb-sm, .gl-section--mb-lg)) + .gl-section:not(:is(.gl-section--brand, .gl-section--dark, .gl-section--accent)), .gl-section--brand:not(:is(.gl-section--mb-sm, .gl-section--mb-lg)) + .gl-section--brand, .gl-section--dark:not(:is(.gl-section--mb-sm, .gl-section--mb-lg)) + .gl-section--dark, .gl-section--accent:not(:is(.gl-section--mb-sm, .gl-section--mb-lg)) + .gl-section--accent { padding-top: 0; } /* ---- Heading + eyebrow -------------------------------------------------- */ .entry .gl-heading { margin: 0 0 1.1rem; font-family: var(--display, 'Cormorant Garamond', serif); font-weight: 300; line-height: 1.1; } .entry h2.gl-heading { font-size: clamp(1.9rem, 3vw, 2.9rem); } .entry h3.gl-heading { font-size: clamp(1.5rem, 2.2vw, 2.1rem); } .entry h4.gl-heading { font-size: clamp(1.25rem, 1.6vw, 1.5rem); } .entry .gl-heading--accent { color: var(--accent, #f6410f); } .entry .gl-heading--white { color: #fff; } .gl-heading--center { text-align: center; } .gl-eyebrow { font-family: var(--body, 'Jost', sans-serif); font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent, #f6410f); margin: 0 0 .85rem; } .gl-eyebrow--white { color: var(--beige, #e3c8aa); } /* ---- Grid --------------------------------------------------------------- */ .gl-grid { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); } .gl-cols-2 { grid-template-columns: repeat(2, 1fr); } .gl-cols-3 { grid-template-columns: repeat(3, 1fr); } .gl-cols-4 { grid-template-columns: repeat(4, 1fr); } .gl-ratio-1-2 { grid-template-columns: 1fr 2fr; } .gl-ratio-2-1 { grid-template-columns: 2fr 1fr; } @media (max-width: 860px) { .gl-cols-3, .gl-cols-4, .gl-ratio-1-2, .gl-ratio-2-1 { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .gl-cols-2, .gl-cols-3, .gl-cols-4, .gl-ratio-1-2, .gl-ratio-2-1 { grid-template-columns: 1fr; } } .gl-cell > :first-child { margin-top: 0; } .gl-cell > :last-child { margin-bottom: 0; } /* ---- Image -------------------------------------------------------------- */ .gl-image { margin: 0; } .gl-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .gl-image--rounded img { border-radius: var(--r-xl, 24px); } /* ---- Split section ------------------------------------------------------ */ .gl-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; } .gl-split--flip .gl-split__media { order: 2; } .gl-split__media img { display: block; width: 100%; height: 100%; max-height: 520px; object-fit: cover; border-radius: var(--r-xl, 24px); } .gl-split__body > :first-child { margin-top: 0; } .gl-split__body > :last-child { margin-bottom: 0; } @media (max-width: 767px) { .gl-split { grid-template-columns: 1fr; } .gl-split--flip .gl-split__media { order: 0; } } /* ---- Callout card ------------------------------------------------------- */ .gl-callout-card { background: #fff; border: 1px solid var(--line, rgba(59, 46, 34, .14)); border-radius: var(--r-lg, 16px); padding: clamp(1.5rem, 2.5vw, 2rem); height: 100%; } .gl-callout-card__title { font-family: var(--display, serif); font-weight: 400; font-size: 1.4rem; margin: 0 0 .6rem; color: var(--ink, #3B2E22); } .gl-callout-card__text { margin: 0; color: var(--muted, #5E4B3C); line-height: 1.6; } /* on a dark band → translucent card, white text */ .gl-section--dark .gl-callout-card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); } .entry .gl-section--dark .gl-callout-card__title { color: #fff; } .gl-section--dark .gl-callout-card__text { color: rgba(255, 255, 255, .82); } /* ---- Buttons ------------------------------------------------------------ */ .gl-btn { display: inline-block; font-family: var(--body, sans-serif); font-weight: 500; font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: .95rem 2rem; border-radius: var(--r-pill, 999px); background: var(--accent, #f6410f); color: #fff; transition: background var(--ease, .3s ease), transform var(--ease, .3s ease); } .gl-btn:hover { background: var(--accent-hover, #d84618); } .gl-btn--light { background: #fff; color: var(--dark-brown, #271911); } .gl-btn--light:hover { background: var(--cream, #F5EFE6); } .gl-btn--outline { background: transparent; border: 1px solid currentColor; color: var(--ink, #3B2E22); } /* ---- Appointment callout ------------------------------------------------ */ .gl-appt { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); background: var(--accent, #f6410f); color: #fff; text-align: center; padding-block: clamp(3.25rem, 6vw, 5rem); overflow-x: clip; } .gl-appt__inner { max-width: 760px; margin-inline: auto; padding-inline: 1.5rem; } .entry .gl-appt__title { font-family: var(--display, serif); font-weight: 300; color: #fff; font-size: clamp(2rem, 3.2vw, 3rem); margin: 0 0 .75rem; line-height: 1.08; } .gl-appt__text { color: rgba(255, 255, 255, .92); font-size: 1.1rem; margin: 0 0 1.75rem; } .gl-appt a:not(.gl-btn) { color: #fff; text-decoration: underline; text-underline-offset: .18em; } /* editor canvas: neutralize the full-bleed calc so bands don't overflow the iframe */ .editor-styles-wrapper .gl-section, .editor-styles-wrapper .gl-appt { width: auto; max-width: none; margin-left: 0; } /* Steps blocks auto-number via a CSS counter (empty .exam-step-num span) so editors never manage numbers. Scoped to :empty so the design's explicit numbers are untouched. */ .exam-step-grid, .svc-step-grid { counter-reset: gl-step; } .exam-step, .svc-step { counter-increment: gl-step; } .exam-step .exam-step-num:empty::before, .svc-step .svc-step-num:empty::before { content: counter(gl-step, decimal-leading-zero); } /* ── glacial/svc-explain with no image selected ── The band then has a single column; span it and cap the measure so the text doesn't sit beside an empty half. (Also covers the pre-image blocks that carried the retired showCompare:false attribute.) */ .svc-explain__grid > :only-child { grid-column: 1 / -1; max-width: 760px; } /* ── glacial/svc-explain photo (replaced the old cloudy/clear lens graphic) ── The grid is align-items:center, so the media cell can't stretch to the text column's height — a fixed ratio is what keeps the band from jumping around as copy length changes. */ .svc-explain__media { margin: 0; border-radius: var(--r-xl, 24px); overflow: hidden; background: var(--blush, #F2E8E2); box-shadow: 0 18px 44px rgba(59, 46, 34, .14); } .svc-explain__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* Editor-only: the click target shown until an image is picked. render.php never emits this class, so it costs the frontend nothing. */ .svc-explain__media--empty { display: flex; align-items: center; justify-content: center; min-height: 260px; box-shadow: none; border: 1px dashed rgba(59, 46, 34, .28); } @media (max-width: 767px) { .svc-explain__media img { aspect-ratio: 3 / 2; } } /* ── glacial/faq "Two columns" option (cataract v2 .svc-faq-list recipe) ── Standalone modifier class so it wins its order-decided fights with webflow.css (blocks-frontend.css depends on main-site-style). */ /* Two independent stacks, NOT `columns: 2` and not a grid over a flat list: multi-column re-balances on every height change (opening a

shoved the bottom item of column one into column two, under the reader's cursor), and a grid over a flat list leaves a tall gap beside a long open answer. render.php splits the items into two .gl-faq-col stacks, so opening one item only moves the items below it in its own column. */ .gl-faq-two-col { max-width: 1080px; display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; column-gap: 56px; } .gl-faq-two-col .gl-faq-col > .exam-faq-item + .exam-faq-item { margin-top: 4px; } @media (max-width: 768px) { .gl-faq-two-col { grid-template-columns: 1fr; } } /* Editor canvas has no .gl-faq-col wrappers (edit() renders the raw children), so keep the list single-column there instead of zig-zagging across cells. */ .editor-styles-wrapper .gl-faq-two-col { grid-template-columns: 1fr; } /* ═══ MOBILE TYPE SCALE (WP) ═══ The 1.1rem/1.25rem floors are desktop-only — on phones the design's original sizes return. */ @media (max-width: 767px) { .gl-btn { font-size: .82rem; } } /* ── Patient-story video card: click-to-play YouTube facade ── view.js injects .video-card__frame over the card, so the poster/caption design stays the default state and the player covers it while playing. */ .video-card__frame { position: absolute; inset: 0; z-index: 5; background: #000; border-radius: inherit; overflow: hidden; } .video-card__frame iframe { display: block; width: 100%; height: 100%; border: 0; } .video-card__close { position: absolute; top: .75rem; right: .75rem; z-index: 6; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(10, 10, 10, .72); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; transition: background .2s ease; } .video-card__close:hover { background: rgba(10, 10, 10, .95); } .video-card__close:focus-visible, button.video-card__play:focus-visible { outline: 3px solid var(--accent, #f6410f); outline-offset: 3px; } /* the play control is a real