/* ============================================================================ Frisco Eye Source — visual direction pass ---------------------------------------------------------------------------- Loaded LAST. Built from the four references in "Visual Directions": Eyes in Disguise stacked full-width colour bands, serif display type Clinica Gatti alternating warm bands; contact info as a BAND, not a sidebar — the model for the relocated .visit-band Acuity Eye Group edge-to-edge hero, colour gradient bleeding into photo Sandhurst dark hero, GOLD accent on the headline, full-width strip beneath the hero All four stack full-bleed colour blocks. Frisco's measured palette already has what that needs — lilac #f4edf4, gold #ffd700, deep 26/24/36, plus violet and orchid channels — so nothing is borrowed from the references but structure. Technique: bands are full-bleed without any wrapper markup, using padding-inline: max(gutter, (100% - measure)/2). The background runs edge to edge; the content stays centred and readable. ========================================================================= */ :root { --band-max: 1180px; --band-gutter: 24px; --band-pad: clamp(56px, 7vw, 104px); --deep: rgb(var(--ch-deep)); --lilac: rgb(var(--ch-lilac)); --violet: rgb(var(--ch-violet)); --orchid: rgb(var(--ch-orchid)); --gold-c: rgb(var(--ch-gold)); } /* The blob canvas fought the solid bands for the same surface. Bands are the colour story now, so the canvas steps back rather than being deleted — it still warms the gaps between bands. */ .bg-blobs { opacity: 0.55; } /* ---- the band primitive -------------------------------------------------- */ .page > .shell, .page-grid { max-width: none; width: 100%; padding: 0; margin: 0; display: block; } .page > .shell > .page-grid > .prose { max-width: none; } .prose > section.panel, .visit-band, .cta-band { /* full-bleed background, centred content, no wrapper needed */ padding-block: var(--band-pad); padding-inline: max(var(--band-gutter), calc((100% - var(--band-max)) / 2)); margin: 0; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; background-image: none; } /* ---- the colour sequence -------------------------------------------------- */ /* 1 intro · 2 Request Appointment · 3 Meet Our Eye Doctor · 4 Optical Shop */ .prose > section.panel:nth-of-type(1) { background-color: var(--lilac); } .prose > section.panel:nth-of-type(2) { background-color: #fff; } .prose > section.panel:nth-of-type(3) { background-color: rgb(var(--ch-violet) / 0.10); border-top: 1px solid rgb(var(--ch-violet) / 0.16); border-bottom: 1px solid rgb(var(--ch-violet) / 0.16); } .prose > section.panel:nth-of-type(4) { background-color: var(--lilac); } /* ---- hero: edge to edge, gradient into the photograph --------------------- */ .hero { position: relative; isolation: isolate; padding: 0; } .hero > .shell { max-width: none; width: 100%; padding: 0; } .hero-inner { position: relative; min-height: clamp(540px, 72vh, 760px); display: grid; align-content: center; /* the glass pane is dropped here — the references put hero type straight onto the image, carried by a gradient rather than a panel */ background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding-block: var(--band-pad); padding-inline: max(var(--band-gutter), calc((100% - var(--band-max)) / 2)); } .hero-media { position: absolute; inset: 0; z-index: 0; margin: 0; border-radius: 0; overflow: hidden; } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; } /* Acuity bleeds a solid colour across the left of the photo; Sandhurst does the same in near-black. This is Frisco's own deep tone doing that job. */ .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(96deg, rgb(var(--ch-deep) / 0.94) 0%, rgb(var(--ch-deep) / 0.80) 34%, rgb(var(--ch-deep) / 0.42) 62%, rgb(var(--ch-deep) / 0.14) 100%); } .hero-copy { position: relative; z-index: 2; max-width: 44rem; } .hero-copy h1 { color: #fff; } /* Sandhurst sets the last line of the headline in gold. Here the emphasis lands on the place name, which is also what the page is optimised for. */ .hero-copy h1::after { content: ""; display: block; width: 72px; height: 4px; background: var(--gold-c); border-radius: 2px; margin-top: clamp(18px, 2vw, 26px); } .hero-copy .hero-lede { color: rgb(var(--ch-paper) / 0.92); } .hero-copy .hero-lede a { color: var(--gold-c); } .hero-copy .eyebrow { color: rgb(var(--ch-paper) / 0.86); } /* ---- images edge to edge inside their bands -------------------------------- */ .prose > section.panel img.wide, .prose > section.panel > figure img { width: 100%; border-radius: 0; } /* The opening photograph spans the band, not the text measure. */ .prose > section.panel:nth-of-type(1) img.wide { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-block: 0 clamp(28px, 4vw, 48px); height: clamp(320px, 42vw, 560px); object-fit: cover; } .figgrid { gap: 2px; } .figgrid figure { border-radius: 0; overflow: hidden; } .figgrid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* ---- the relocated sidebar, now a dark band ------------------------------- */ .visit-band { background-color: var(--deep); color: rgb(var(--ch-paper) / 0.88); } .visit-inner { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; } .visit-band h2 { color: #fff; font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.18; margin: 0 0 var(--sp-12, 14px); } .visit-band h2 em { font-style: normal; color: var(--gold-c); } .visit-band h3 { color: #fff; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid rgb(var(--ch-gold) / 0.65); } .visit-addr { color: rgb(var(--ch-paper) / 0.78); margin-bottom: 26px; } .visit-band .eyebrow { color: var(--gold-c); } .visit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 0.95rem; } .visit-list li { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 10px; border-bottom: 1px solid rgb(var(--ch-paper) / 0.14); } .visit-list li:last-child { border-bottom: 0; } .visit-list b { color: #fff; font-weight: 600; } .visit-list a { color: var(--gold-c); text-decoration: none; } .visit-list a:hover { text-decoration: underline; text-underline-offset: 3px; } .visit-list span { color: rgb(var(--ch-paper) / 0.76); } /* 0.45 measured 4.48 against the deep band — two hundredths under AA. 0.52 still reads as "this day is closed" without failing. */ .visit-list .closed { color: rgb(var(--ch-paper) / 0.52); } .visit-band .btn-ghost { border-color: rgb(var(--ch-paper) / 0.5); color: #fff; } .visit-band .btn-ghost:hover { background: #fff; color: var(--deep); } /* ---- CTA band: gold, the one saturated block ------------------------------ */ .cta-band { background-color: var(--gold-c); background-image: none; color: rgb(var(--ch-deep)); text-align: center; } .cta-band h2 { color: rgb(var(--ch-deep)); } .cta-band p { color: rgb(var(--ch-deep) / 0.80); max-width: 46rem; margin-inline: auto; } .cta-band .btn-row { justify-content: center; } .cta-band .btn-primary { background: rgb(var(--ch-deep)); color: #fff; border-color: transparent; } .cta-band .btn-ghost { border-color: rgb(var(--ch-deep) / 0.42); color: rgb(var(--ch-deep)); } .cta-band .btn-ghost:hover { background: rgb(var(--ch-deep)); color: #fff; } /* ---- reviews sit on their band, not on glass ------------------------------ */ .reviews { gap: 16px; } .review { border-radius: var(--r-md); } /* ---- footer closes the stack in the deep tone ----------------------------- */ /* background-image must be cleared explicitly: site.css:629 paints a 135deg white sheen (--glass-sheen-deep) over the footer, and overriding background-color alone leaves it on top. Measured, it lifted the footer's top-left to rgb(62,60,70) while the visit band directly above sat at rgb(26,24,36) — two bands meant to be the same tone reading visibly different. The blur is a live compositing cost behind an opaque colour, so it goes too. */ .site-footer { background-color: var(--deep); border-top: 0; background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; } /* ---- responsive ----------------------------------------------------------- */ @media (max-width: 960px) { .visit-inner { grid-template-columns: 1fr 1fr; } .visit-lead { grid-column: 1 / -1; } } @media (max-width: 640px) { :root { --band-gutter: 18px; } .visit-inner { grid-template-columns: 1fr; gap: 34px; } .hero-inner { min-height: clamp(460px, 74vh, 620px); } .hero-media::after { background: linear-gradient(180deg, rgb(var(--ch-deep) / 0.72) 0%, rgb(var(--ch-deep) / 0.88) 62%, rgb(var(--ch-deep) / 0.95) 100%); } .prose > section.panel:nth-of-type(1) img.wide { height: clamp(220px, 52vw, 320px); } } @media (prefers-reduced-motion: reduce) { .bg-blobs { opacity: 0.4; } } /* ============================================================================ Hero — panel removed, gradient carries the type instead ---------------------------------------------------------------------------- site.css:308 put the copy on a frosted panel deliberately. Its comment records why: the bare photograph measured 5.93 worst-case — a nominal AA pass that was still hard to read, because the backdrop is shelving and signage rather than a flat field. Removing the panel is therefore only safe if something else flattens that area, so the scrim below holds a near-solid plateau across the whole text column before falling away to reveal the room. ========================================================================= */ /* .hero-inner.glass is 0-2-0; a bare .hero-inner rule loses to it. */ .hero-inner.glass { box-shadow: none; background: none; } .hero-copy { padding: 0; margin-inline: 0; background-color: transparent; background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-radius: 0; box-shadow: none; } /* The plateau: flat to 46%, so every line of copy sits on one value. */ .hero-media::after { background: linear-gradient(100deg, rgb(var(--ch-deep) / 0.95) 0%, rgb(var(--ch-deep) / 0.93) 30%, rgb(var(--ch-deep) / 0.90) 46%, rgb(var(--ch-deep) / 0.52) 68%, rgb(var(--ch-deep) / 0.10) 100%); } /* ::before carried a second scrim plus a gold glow; the scrim would now double up, so only the glow is kept. */ .hero-inner::before { background: var(--hero-glow); } /* ============================================================================ Bento — four stacked full-width photos become one compact grid ---------------------------------------------------------------------------- The OPTOS banner and three 1280x853 photographs ran at full column width, one under another, which is the scrolling problem. Same images, same captions, same links — laid out as a banner across the top and a neat three-up row, with every photo cropped to one aspect so the row reads as a single block. ========================================================================= */ .bento-wrap { margin-block: clamp(28px, 4vw, 48px); } .bento-head { font-size: clamp(1.35rem, 2.2vw, 1.9rem); margin: 0 0 clamp(18px, 2.2vw, 28px); padding-bottom: 12px; border-bottom: 2px solid rgb(var(--ch-gold) / 0.55); } .bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); } .bento-item { display: flex; flex-direction: column; background: #fff; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 1px 2px rgb(var(--ch-deep) / 0.06), 0 8px 24px rgb(var(--ch-deep) / 0.07); transition: transform 260ms var(--ease, ease), box-shadow 260ms var(--ease, ease); } .bento-item:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgb(var(--ch-deep) / 0.08), 0 16px 38px rgb(var(--ch-deep) / 0.13); } .bento-media { margin: 0; overflow: hidden; } .bento-media img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; margin: 0; max-width: none; } /* The banner is a wide 1280x480 graphic; cropping it to 4:3 would cut the product art, so it keeps its own ratio and spans the full row. */ .bento-banner { grid-column: 1 / -1; } .bento-banner .bento-media img { aspect-ratio: 1280 / 480; object-fit: contain; background: #0b5ed7; } .bento-body { padding: clamp(14px, 1.6vw, 20px); display: flex; flex-direction: column; gap: 8px; } .bento-body h4 { margin: 0; font-size: 1.02rem; line-height: 1.3; } .bento-body h4 a { text-decoration: none; } .bento-body h4 a:hover { text-decoration: underline; text-underline-offset: 3px; } .bento-body p { margin: 0; font-size: 0.9rem; color: var(--ink-muted); } @media (max-width: 860px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .bento-media img { aspect-ratio: 16 / 9; } } @media (prefers-reduced-motion: reduce) { .bento-item, .bento-item:hover { transform: none; transition: none; } } /* .prose > section.panel img.wide is 0-3-1 and outranks .bento-media img (0-1-1). The bento images still carry class="wide" from the source markup, so the crop is restated at matching weight rather than relying on order. */ .prose > section.panel .bento-media img.wide, .prose > section.panel .bento-media img { width: 100%; max-width: none; margin: 0; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; height: auto; } .prose > section.panel .bento-banner .bento-media img { aspect-ratio: 1280 / 480; object-fit: contain; } /* ============================================================================ Layout & hierarchy pass — the remaining sections ---------------------------------------------------------------------------- Applying what the bento pass established: loose content gets a container, and anything that repeats down the page becomes a row instead of a stack. What the heading audit turned up (37 headings, 0 level skips, but): - four primary CTAs sat as bare tags after the opening photo and read as one run-on line of underlined text -> .quick-actions - "What's New?" and the two posts were buried at h4/h5 inside the optical shop section -> .postlist row - Contact Us / Locate Us / Hours also live down there, now that the same facts head the .visit-band; they are kept but laid out as a row so the repetition reads as a summary, not a second directory ========================================================================= */ /* ---- quick actions: four patient tasks, not a sentence -------------------- */ .quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); margin-block: clamp(22px, 3vw, 34px); } .qa-item { display: flex; align-items: center; min-height: 74px; padding: 14px 18px; background: #fff; border: 1px solid rgb(var(--ch-deep) / 0.10); border-left: 3px solid var(--gold-c); border-radius: var(--r-sm); color: var(--ink-strong); font-weight: 600; font-size: 0.95rem; line-height: 1.3; text-decoration: none; transition: transform 220ms var(--ease, ease), box-shadow 220ms var(--ease, ease), border-color 220ms var(--ease, ease); } /* Gold works on the deep bands but measures 1.40 against white — the arrow was effectively invisible. It carries the affordance, so it takes the ink colour; gold stays on the left stripe, where it is decoration rather than signal. */ .qa-item::after { content: "\2192"; margin-left: auto; padding-left: 12px; color: rgb(var(--ch-deep) / 0.7); font-weight: 700; transition: transform 220ms var(--ease, ease), color 220ms var(--ease, ease); } .qa-item:hover::after { color: rgb(var(--ch-deep)); } .qa-item:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgb(var(--ch-deep) / 0.12); border-color: rgb(var(--ch-deep) / 0.18); } .qa-item:hover::after { transform: translateX(4px); } /* ---- posts: a row of two, not a stack ------------------------------------- */ .postlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); margin-block: clamp(18px, 2.4vw, 28px); } .post { background: #fff; border-radius: var(--r-md); padding: clamp(18px, 2vw, 26px); border-top: 3px solid var(--gold-c); box-shadow: 0 1px 2px rgb(var(--ch-deep) / 0.05), 0 8px 22px rgb(var(--ch-deep) / 0.06); display: flex; flex-direction: column; gap: 10px; } .post h5, .post h4 { margin: 0; font-size: 1.06rem; line-height: 1.3; } .post-date { order: -1; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 1.6px; color: var(--ink-muted); } .post-excerpt { margin: 0; font-size: 0.93rem; } .post-more { align-self: flex-start; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--gold-c); padding-bottom: 2px; } /* ---- section rhythm: one consistent vertical scale ------------------------ */ .prose > section.panel > :first-child { margin-top: 0; } .prose h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.16; margin-bottom: clamp(18px, 2.2vw, 28px); } /* A gold rule under every h2 repeats the hero's cue, so each band opens the same way instead of each one inventing its own entrance. */ .prose > section.panel > h2::after, .prose > section.panel > h2 + p::before { content: none; } .prose > section.panel > h2 { padding-bottom: 14px; border-bottom: 2px solid rgb(var(--ch-gold) / 0.5); } .prose h3 { font-size: clamp(1.18rem, 1.7vw, 1.44rem); margin-top: clamp(26px, 3vw, 40px); } .prose h4 { font-size: 1.02rem; margin-top: clamp(20px, 2.2vw, 28px); } .prose p { max-width: 74ch; } /* ---- the doctor bio ------------------------------------------------------- */ .bio { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(22px, 3vw, 44px); align-items: start; } .bio-photo { margin: 0; } .bio-photo img { width: 100%; border-radius: var(--r-md); } .bio-body > :last-child { margin-bottom: 0; } /* ---- brand logo strip ----------------------------------------------------- */ .figgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(10px, 1.2vw, 16px); margin-block: clamp(18px, 2.2vw, 28px); } .figgrid figure { margin: 0; background: #fff; border-radius: var(--r-sm); overflow: hidden; } .figgrid figcaption { padding: 10px 14px; font-size: 0.86rem; color: var(--ink-muted); } @media (max-width: 900px) { .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .postlist { grid-template-columns: 1fr; } .bio { grid-template-columns: 1fr; } .bio-photo { max-width: 200px; } } @media (max-width: 480px) { .quick-actions { grid-template-columns: 1fr; } .qa-item { min-height: 58px; } } @media (prefers-reduced-motion: reduce) { .qa-item, .qa-item:hover, .qa-item:hover::after { transform: none; transition: none; } } /* ============================================================================ Two-column blocks, contact card, and a tint override ---------------------------------------------------------------------------- "Eye Exams for the Whole Family" shipped TWICE on the source site — verified in audit/raw/index.html, which also contains it twice. The reforge copied the defect faithfully. The second copy is now dropped; this is the one place the page deliberately departs from the source, because rendering the same block twice is not fidelity worth keeping. ========================================================================= */ /* ---- .split : heading + lede left, detail + CTA right --------------------- */ .split { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 64px); align-items: start; margin-block: clamp(24px, 3vw, 40px); } .split-a > h3 { margin-top: 0; } .split-a > p { font-size: clamp(1.02rem, 1.25vw, 1.16rem); color: var(--ink-strong); } .split-b > p { margin-top: 0; } .split .split-cta { margin-bottom: 0; } .split .split-cta a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--gold-c); padding-bottom: 2px; } .split .split-cta a::after { content: "\2192"; transition: transform 200ms var(--ease, ease); } .split .split-cta a:hover::after { transform: translateX(4px); } /* ---- contact + map, side by side ------------------------------------------ */ .contact-locate { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(18px, 2.4vw, 32px); align-items: stretch; margin-block: clamp(22px, 3vw, 36px); } .cl-card { background: #fff; border-radius: var(--r-md); padding: clamp(20px, 2.4vw, 30px); border-left: 3px solid var(--gold-c); box-shadow: 0 1px 2px rgb(var(--ch-deep) / 0.05), 0 8px 22px rgb(var(--ch-deep) / 0.06); /* the street address is a bare text node in the source markup, so the line height and colour have to come from the container */ line-height: 1.7; color: var(--ink-body); } .cl-card > h4 { margin: 0 0 6px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 2px; color: var(--ink-muted); } .cl-card > h5 { margin: 0 0 10px; font-size: 1.12rem; } .cl-card > h5 a { text-decoration: none; } .cl-card > h5 a:hover { text-decoration: underline; text-underline-offset: 3px; } .cl-card ul { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid rgb(var(--ch-deep) / 0.10); display: grid; gap: 10px; } .cl-card li { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.95rem; } .cl-card li strong { min-width: 58px; color: var(--ink-strong); } .cl-card li a { text-decoration: none; border-bottom: 1px solid rgb(var(--ch-gold) / 0.8); } .cl-card li br + * , .cl-card li br { font-size: 0.85rem; } .cl-map { display: flex; flex-direction: column; min-height: 320px; } .cl-map > h4 { margin: 0 0 6px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 2px; color: var(--ink-muted); } .cl-map iframe { flex: 1 1 auto; width: 100%; min-height: 300px; border: 0; border-radius: var(--r-md); display: block; } /* ---- post tint: site.css:534 is 0-3-0 and outranked the flat white --------- */ .postlist .post, .postlist .post:nth-child(even), .postlist .post:nth-child(odd) { background-color: #fff; background-image: none; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); } .contact-locate { grid-template-columns: 1fr; } .cl-map { min-height: 280px; } } /* ============================================================================ Compaction pass — measured, not eyeballed ---------------------------------------------------------------------------- Resolved at a 1440px viewport, the page was spending: --band-pad 100.8px top AND bottom, across 6 bands = 1210px .hero-inner 648px min-height intro photo 560px fixed height component margins 96 / 80 / 72 / 68 / 56 / 56px blocks Band padding alone was more than a full viewport of empty space. Everything below is a reduction of an existing value — no layout is restructured, so nothing can break that was working a moment ago. ========================================================================= */ :root { /* 100.8px -> 54.7px at 1440. Six bands: 1210px -> 656px. */ --band-pad: clamp(34px, 3.8vw, 64px); } /* 648 -> 470 at 1440; still a full-bleed hero, one less screen of scroll. */ .hero-inner { min-height: clamp(400px, 46vh, 520px); } /* 560 -> 380. The photograph still spans the viewport, just less tall. */ .prose > section.panel:nth-of-type(1) img.wide { height: clamp(220px, 26vw, 380px); margin-block: 0 clamp(18px, 2.2vw, 30px); } /* Component rhythm: every block halved, kept proportional to each other. */ .bento-wrap { margin-block: clamp(20px, 2.2vw, 34px); } .split { margin-block: clamp(16px, 1.8vw, 28px); } .contact-locate { margin-block: clamp(16px, 1.8vw, 26px); } .quick-actions { margin-block: clamp(16px, 1.8vw, 26px); } .postlist { margin-block: clamp(14px, 1.6vw, 22px); } .figgrid { margin-block: clamp(14px, 1.6vw, 22px); } /* Heading spacing was set for a roomier page than this one now is. */ .prose h2 { margin-bottom: clamp(14px, 1.6vw, 22px); padding-bottom: 10px; } .prose h3 { margin-top: clamp(18px, 1.8vw, 26px); margin-bottom: 10px; } .prose h4 { margin-top: clamp(14px, 1.4vw, 20px); margin-bottom: 8px; } .prose p { margin-bottom: clamp(12px, 1.1vw, 16px); } /* Paragraphs were capped at 74ch, which makes long copy tall in a 1180px band. 80ch fills more of the measure without pushing past comfortable reading. */ .prose p { max-width: 80ch; } .bento { gap: clamp(10px, 1.1vw, 14px); } .bento-body { padding: clamp(12px, 1.3vw, 16px); gap: 6px; } .bento-head { margin-bottom: clamp(12px, 1.5vw, 18px); padding-bottom: 9px; } .cl-map { min-height: 260px; } .cl-map iframe { min-height: 240px; } .cl-card { padding: clamp(16px, 1.9vw, 24px); line-height: 1.6; } .visit-inner { gap: clamp(20px, 2.6vw, 44px); } .visit-addr { margin-bottom: 18px; } .visit-band h3 { margin-bottom: 13px; padding-bottom: 9px; } .post { padding: clamp(14px, 1.6vw, 20px); gap: 7px; } .qa-item { min-height: 62px; padding: 12px 16px; } .site-footer { padding-block: clamp(34px, 4vw, 60px) clamp(20px, 2vw, 30px); } .footer-bottom { margin-top: clamp(22px, 2.6vw, 36px); padding-top: 18px; } /* The reviews rail and the form both sat inside the old rhythm. */ .reviews { gap: 14px; } .appt-form { gap: clamp(14px, 1.6vw, 20px); } @media (max-width: 640px) { :root { --band-pad: clamp(28px, 6vw, 40px); } .hero-inner { min-height: clamp(360px, 54vh, 440px); } } /* site.css:386 puts aspect-ratio:16/9 and height:auto on every .prose iframe. In the .cl-map column that fights `flex: 1 1 auto`, so the map either overshoots its card or collapses. The map is a fixed-height panel here, not a video, so the ratio is released and the flex height governs. */ .cl-map iframe { aspect-ratio: auto; height: 100%; box-shadow: none; } /* ── session 4: defects found by actually looking at the rendered page ──── */ /* The Red Cross graphic is a bare sibling of the "Eye Emergencies" heading — no wrapper, so it rendered at its full 113px above the text and inherited `.prose img` (site.css:365), which put a white rounded card and a glass shadow around it. A lone red icon in a floating pane, with the rest of the row empty. It is now wrapped in .emerg-head and sits on the heading line. Selectors are .prose-qualified (0-2-1) to beat `.prose img` and `.prose h3` (both 0-1-1) on weight rather than on source order. */ .prose .emerg-head { display: flex; align-items: center; gap: clamp(12px, 1.3vw, 18px); margin-top: clamp(18px, 2vw, 28px); margin-bottom: clamp(10px, 1.1vw, 14px); } .prose .emerg-head img { width: clamp(38px, 3.4vw, 50px); height: auto; flex: none; margin: 0; border-radius: 0; box-shadow: none; } .prose .emerg-head h3 { margin: 0; } /* .footer-grid is `repeat(auto-fit, minmax(210px, 1fr))`. Five children, but only four fit across 1180px — so the appointment form wrapped onto a row of its own and rendered as three narrow fields with two thirds of the row empty. It spans the full row now, and the fields run across it instead of down. */ .footer-grid > div:last-child { grid-column: 1 / -1; } .site-footer .footer-form { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: clamp(12px, 1.4vw, 18px); } /* site.css:610 sets `.footer-form button { width: 100% }` for the stacked layout; in a row it only needs its own width. */ .site-footer .footer-form button { width: auto; } @media (max-width: 760px) { .site-footer .footer-form { grid-template-columns: minmax(0, 1fr); align-items: stretch; } .site-footer .footer-form button { width: 100%; } } /* ═══════════════════════════════════════════════════════════════════════════ SESSION 5 — defects found by measuring the rendered page, not by eye. Scope is deliberately SKIN ONLY: no content removed, no markup re-ordered, no heading levels changed. Every rule below wins on SPECIFICITY where it can, because four separate bugs in this project came from writing a low-specificity override against a higher-specificity V1 rule and assuming source order saved it. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. 302px of page canvas leaking between the full-bleed bands ──────────── The V2 direction is an uninterrupted sequence of coloured bands, but three V1 rules were never reset, so a strip of page background shows between each pair. Pixel-scanned down column x=8 of the 1440 capture: .page padding-top (site.css:350, --sp-20) = 30px under the hero .prose row gap (site.css:359, --sp-19) = 28px x 4 seams = 112px .page padding-bottom (site.css:350, --sp-23) = 80px before the visit band .site-footer margin (site.css:627, --sp-23) = 80px (renders 62px) before the footer The last one is the worst: a PALE strip wedged between two near-black bands, which reads as a failed background rather than a designed gap. Total 302px of dead scroll on a page whose owner asked twice for less scrolling. All three selectors match the V1 rule's specificity exactly (0-1-0); direction.css is the later sheet, so these win on order. Band separation is already carried by --band-pad and by the colour change itself, so nothing collapses. */ .page { padding-block: 0; } .prose { row-gap: 0; } .site-footer { margin-top: 0; } /* ── 2. The mobile hero scrim was dead, leaving text on the bare photo ─────── direction.css:226 sets .hero-media::after inside @media (max-width:640px), but direction.css:266 restates the SAME selector unconditionally 40 lines later. @media adds nothing to specificity, so the unconditional rule won at every width and the mobile scrim never applied anywhere. Measured on the 390px capture, the hero lede's first line ran 2.86:1 against the photo behind it and the gold link glyphs 4.16:1 — both below the 4.5:1 body-text threshold. Qualified as .hero .hero-media::after (0-2-1) so it beats the (0-1-1) rule on WEIGHT, and cannot be silently undone by future reordering. */ @media (max-width: 640px) { .hero .hero-media::after { background: linear-gradient(180deg, rgb(var(--ch-deep) / 0.72) 0%, rgb(var(--ch-deep) / 0.88) 62%, rgb(var(--ch-deep) / 0.95) 100%); } } /* ── 3. The page had no keyboard focus indicator at all ───────────────────── tokens.css:236 defines --focus-ring as a COLOUR; modern.css:32 redefines the same property on :root as a four-value BOX-SHADOW. modern.css loads later, so site.css:95 `outline: 3px solid var(--focus-ring)` computed to `outline: 3px solid 0 0 0 3px rgb(255 215 0 / 0.55)` — invalid at computed-value time, which per the CSS Variables spec makes the whole shorthand `unset`, i.e. outline-style:none. modern.css:60-78 hands an explicit gold ring to seven selector groups (inputs, .btn, nav links); every OTHER focusable element — including all 39 footer anchors — was left with no visible focus state whatsoever. Restated here at (0-1-0), identical weight to site.css:95, winning on source order. Deliberately NOT escalated above (0-1-0): modern.css's intentional `outline:none` on its seven groups is (0-2-0) and must keep winning, so their gold ring survives. */ :focus-visible { outline: 3px solid rgb(var(--ch-violet) / 0.95); outline-offset: 3px; } /* Give the collision a non-colliding name so it cannot recur. */ :root { --focus-shadow: 0 0 0 3px rgb(var(--ch-gold) / 0.55); } /* ── 4. Form fields had effectively invisible boundaries ──────────────────── Measured from the capture: the light form's 1px border rendered #e1e1e3 on #ffffff = 1.31:1, and the footer form's #3c3b45 on #26242f = 1.38:1. WCAG 2.1 SC 1.4.11 requires 3:1 to identify a control's boundary — both fail by more than half. Recomputed values: slate at 0.60 over white = rgb(144,143,151) = 3.20:1; paper at 0.40 over the footer ground = rgb(125,124,130) = 3.69:1. Every selector is scoped :not(:focus-visible):not(:focus) — WITHOUT that guard these static border-colours outrank modern.css:60-68's and site.css:602's focused border-colour and the gold focus border silently disappears. */ .prose .field input:not(:focus-visible):not(:focus), .prose .field select:not(:focus-visible):not(:focus), .prose .field textarea:not(:focus-visible):not(:focus), form.appt-form input[type="text"]:not(:focus-visible):not(:focus), form.appt-form input[type="tel"]:not(:focus-visible):not(:focus), form.appt-form input[type="email"]:not(:focus-visible):not(:focus), form.appt-form textarea:not(:focus-visible):not(:focus) { border-color: rgb(var(--ch-slate) / 0.60); } .site-footer .footer-form input:not(:focus-visible):not(:focus), .site-footer .footer-form select:not(:focus-visible):not(:focus), .site-footer .footer-form textarea:not(:focus-visible):not(:focus) { border-color: rgb(var(--ch-paper) / 0.40); } /* ── 5. The main appointment form never stacked on mobile ─────────────────── site.css:565 sets .appt-form to two columns with no width-based override anywhere. The rule meant to stack it — site.css:689 `.appt-form .field.two` — targets a class that does not exist in this markup (`grep -o "field two" index.html` returns 0), so it has never matched. At 390px each column computes to (354 - 14) / 2 = 170px, so "Name/First" sits beside "Last" and "Phone" beside "Email" in 170px boxes. .panel .appt-form is (0-2-0) and beats site.css:565's (0-1-0) on weight. Note this ADDS roughly 375px of mobile scroll, which pulls against the standing "less scrolling" instruction — paid for by items 1 and 7. */ @media (max-width: 640px) { .panel .appt-form { grid-template-columns: minmax(0, 1fr); } } /* ── 6. The bento heading rendered at 54% of its intended size ────────────── .bento-head (0-1-0) loses to .prose h4 (0-1-1) on weight regardless of source order, so the largest block on the page was titled at 16.32px instead of the intended 30.4px — the same cap height as the body copy beside it. It also inherited a gold ::before bar from site.css:516 on top of its own gold border-bottom, giving one heading two competing gold cues. .prose .bento-head is (0-2-0) and beats .prose h4 on b=2 > b=1. */ .prose .bento-head { font-size: clamp(1.35rem, 2.2vw, 1.9rem); margin-top: 0; margin-bottom: clamp(12px, 1.5vw, 18px); } .prose .bento-head::before { content: none; } /* ── 7. Footer top inset was 2.5x the page rhythm ─────────────────────────── The compaction pass reduced .site-footer's own padding but left .footer-grid's 80px, so the footer opened on 140px of nothing while every other band opens on ~55px. .site-footer .footer-grid is (0-2-0) against site.css's (0-1-0). */ .site-footer .footer-grid { padding-top: 0; } /* =========================================================================== SESSION 5 - BRAND RETHEME: teal + warm neutrals From the client palette "Inspired by Eye Source Interior". Done at the CHANNEL level on purpose. tokens.css derives every semantic token (--ink-*, --accent*, --glass-*, --rule) from a handful of raw "R G B" channels, and site.css is 100% var()-driven by design, so redefining the channels here re-skins the entire system - every panel, button, rule, shadow and glass surface - instead of needing ~200 edits. Glassmorphism is preserved: the glass tokens keep their alpha and blur, they just refract teal and ivory now instead of lilac and violet. Measured WCAG ratios for the pairs actually used: charcoal on soft-ivory ....... 9.48 charcoal on warm-white .. 10.75 teal headings on soft-ivory .. 7.18 teal on warm-white ....... 8.14 warm-white on main teal ...... 8.14 white on main teal ....... 9.18 champagne accent on teal ..... 4.71 charcoal on champagne .... 6.23 DO NOT use blue-gray (2.76), greige (3.89) or oak (3.86) for text on teal - all three fail AA body. Muted text on teal uses white at reduced alpha. ======================================================================== */ :root { /* ---- the client palette, as raw channels ------------------------------- */ --ch-teal: 41 77 85; /* #294D55 MAIN TEAL feature wall / brand */ --ch-teal-2: 62 93 96; /* #3E5D60 SLATE TEAL secondary walls */ --ch-bluegray: 123 145 148; /* #7B9194 BLUE GRAY accent walls */ --ch-warmwhite: 244 241 233; /* #F4F1E9 WARM WHITE cabinetry/reception */ --ch-ivory: 232 227 216; /* #E8E3D8 SOFT IVORY background */ --ch-greige: 170 169 159; /* #AAA99F WARM GREIGE neutral accents */ --ch-charcoal: 52 54 56; /* #343638 CHARCOAL furniture / text */ --ch-walnut: 121 106 56; /* #796A38 MEDIUM WALNUT flooring */ --ch-oak: 185 165 141; /* #B9A58D LIGHT OAK sunlit wood */ --ch-champagne: 211 181 143; /* #D3B58F WARM CHAMPAGNE lighting / metallic */ /* ---- remap the V1 channels onto the new palette ------------------------ */ /* Every derived token in tokens.css follows automatically. */ --ch-deep: var(--ch-teal); /* dark bands, hero scrim, visit band, footer */ --ch-lilac: var(--ch-ivory); /* the light band colour */ --ch-slate: var(--ch-charcoal); /* body text, hairlines */ --ch-gold: var(--ch-champagne); /* the warm accent that replaces gold */ --ch-violet: var(--ch-teal-2); /* focus ring + glass tint */ --ch-orchid: var(--ch-bluegray); /* backdrop orbs */ --ch-amber: var(--ch-oak); /* backdrop orbs / accent gradient end */ /* ---- aliases used by the new components -------------------------------- */ --teal: rgb(var(--ch-teal)); --teal-2: rgb(var(--ch-teal-2)); --ivory: rgb(var(--ch-ivory)); --warm-white: rgb(var(--ch-warmwhite)); --champagne: rgb(var(--ch-champagne)); /* direction.css bound these to the old channels earlier in the file; the later declaration wins, so they are rebound rather than edited in place. */ --deep: rgb(var(--ch-teal)); --lilac: rgb(var(--ch-ivory)); --gold-c: rgb(var(--ch-champagne)); } /* The one literal white band in the colour sequence becomes warm white, so the page reads as two warm neutrals rather than neutral-plus-clinical-white. */ .prose > section.panel:nth-of-type(2) { background-color: var(--warm-white); } body { background-color: var(--warm-white); } /* Headings carry the brand colour on light bands. */ .prose h2, .prose h3 { color: var(--teal); } /* ---- HERO --------------------------------------------------------------- */ /* Full desktop viewport, as asked. svh rather than vh so mobile browser chrome does not push the CTAs below the fold on first paint. */ .hero-inner { min-height: min(100svh, 920px); } /* The old scrim was a hard 4-stop ramp in near-black (0.94 -> 0.14 over 96deg) which read as a black box with an edge. Same idea in the brand teal, with a gentler curve and more stops so it fades gradually into the photograph instead of stopping. The second layer keeps the top edge readable under the sticky header without darkening the whole frame. */ .hero-media::after { background: linear-gradient(100deg, rgb(var(--ch-teal) / 0.94) 0%, rgb(var(--ch-teal) / 0.90) 18%, rgb(var(--ch-teal) / 0.78) 34%, rgb(var(--ch-teal) / 0.60) 48%, rgb(var(--ch-teal) / 0.40) 62%, rgb(var(--ch-teal) / 0.22) 76%, rgb(var(--ch-teal) / 0.10) 88%, rgb(var(--ch-teal) / 0.04) 100%), linear-gradient(180deg, rgb(var(--ch-teal) / 0.34) 0%, rgb(var(--ch-teal) / 0.00) 38%); } /* Mobile: the copy fills almost the whole hero (eyebrow ~5% down to the buttons ~95%), so the ramp must hold >=0.86 from the TOP. It started at 0.74, and at 390px that measured 3.26-4.07:1 on the inner pages and 4.46:1 on the homepage lede — all under the 4.5:1 body-text line (herocontrast.mjs, 2026-09-23; the failures predate that session's hero resize). 0.86 over a pure-white pixel still yields ~5.5:1, so this is the floor, not a guess. */ @media (max-width: 640px) { .hero .hero-media::after { background: linear-gradient(180deg, rgb(var(--ch-teal) / 0.86) 0%, rgb(var(--ch-teal) / 0.90) 45%, rgb(var(--ch-teal) / 0.95) 100%); } } /* Eyebrow: the filled pill is removed, leaving letter-spaced champagne type. Qualified .hero .hero-copy (0-3-0) to beat site.css:324 .hero-inner .eyebrow (0-2-0) on weight rather than on source order. */ .hero .hero-copy .eyebrow { background: none; background-image: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; color: var(--champagne); letter-spacing: 0.18em; } .hero-copy h1 { color: var(--warm-white); } .hero-copy h1::after { background: var(--champagne); } .hero-copy .hero-lede { color: rgb(var(--ch-warmwhite) / 0.92); } .hero-copy .hero-lede a { color: var(--champagne); } /* ---- MEGA MENU ---------------------------------------------------------- */ /* Two faults. It was translucent (0.86-alpha pane over a backdrop blur), so the gold band and footer read straight through the link text. And the Eye Care Services menu puts SEVEN .mega-col blocks into a 4-column grid: 4 in row one, 3 in row two, leaving an empty cell and very uneven column heights. Opaque fixes the first. CSS column-flow fixes the second - the seven blocks pack into three balanced columns with no empty cell. */ .mega { background-color: var(--warm-white); background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid rgb(var(--ch-teal) / 0.22); box-shadow: 0 24px 60px rgb(var(--ch-teal) / 0.22), 0 2px 8px rgb(var(--ch-teal) / 0.12); } .mega[data-cols="4"] { width: min(760px, 94vw); } .mega[data-cols="4"] .mega-cols { display: block; columns: 3; column-gap: clamp(20px, 2vw, 30px); } .mega[data-cols="4"] .mega-col { break-inside: avoid; -webkit-column-break-inside: avoid; display: inline-block; width: 100%; margin-bottom: clamp(16px, 1.6vw, 22px); } .mega[data-cols="2"] { width: min(500px, 92vw); } /* Section titles in the brand teal so the groups are scannable. */ .mega h3, .mega h3 a { color: var(--teal); font-weight: 700; border-bottom-color: rgb(var(--ch-teal) / 0.30); } .mega a { color: rgb(var(--ch-charcoal) / 0.92); } .mega a:hover { background: rgb(var(--ch-teal) / 0.10); color: var(--teal); } .mega-foot a { color: var(--teal); } @media (max-width: 900px) { .mega[data-cols="4"] .mega-cols { columns: 2; } } @media (max-width: 640px) { .mega[data-cols="4"] .mega-cols { columns: 1; } } /* The topbar and sticky header sit over scrolling content too, so they are made opaque for the same reason as the mega panel. */ .topbar { background-color: var(--teal); background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .site-header { background-color: var(--warm-white); background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid rgb(var(--ch-teal) / 0.16); } /* ---- QUICK-ACTION ICON STRIP -------------------------------------------- */ /* Was four text-only cards inside the first prose panel. Now a full-bleed strip directly under the hero, modelled on the reference: line icon above a short label, in an outlined tile. Outlines are 2px, per "a bit thicker outlines". Icons are inline SVG rather than generated raster: they stay crisp at any size, recolour from the teal token on hover, and cost ~1KB total instead of four image requests. */ .qa-strip { background: var(--ivory); padding-block: clamp(26px, 3.2vw, 44px); padding-inline: max(var(--band-gutter), calc((100% - var(--band-max)) / 2)); } .qa-strip-inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); } .qa-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; text-align: center; padding: clamp(18px, 2vw, 26px) clamp(10px, 1.4vw, 18px); background: transparent; border: 2px solid rgb(var(--ch-teal) / 0.45); border-radius: 10px; text-decoration: none; color: var(--teal); font-weight: 600; font-size: clamp(0.92rem, 1.05vw, 1rem); line-height: 1.35; min-height: 0; box-shadow: none; transition: border-color var(--dur, 0.2s) var(--ease-out, ease), background-color var(--dur, 0.2s) var(--ease-out, ease), transform var(--dur, 0.2s) var(--ease-out, ease); } .qa-item:hover { border-color: var(--teal); background: rgb(var(--ch-teal) / 0.07); transform: translateY(-2px); } .qa-ico { display: block; width: clamp(30px, 3vw, 38px); height: clamp(30px, 3vw, 38px); color: var(--teal); } .qa-ico svg { width: 100%; height: 100%; display: block; } /* The old card used a gold left stripe and a trailing arrow; neither belongs in the icon-tile treatment. Cleared at matching-or-higher weight. */ .qa-strip .qa-item::before, .qa-strip .qa-item::after { content: none; } @media (max-width: 860px) { .qa-strip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { .qa-strip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .qa-item { padding: 16px 8px; font-size: 0.86rem; } } /* ---- FULL-BLEED BRAND BANNER -------------------------------------------- */ .brand-banner { margin: 0; padding: 0; display: block; line-height: 0; background: var(--teal); } .brand-banner img { width: 100%; height: clamp(220px, 26vw, 420px); object-fit: cover; object-position: center; display: block; border-radius: 0; box-shadow: none; margin: 0; } /* ---- INTRO COPY: centred, wider measure --------------------------------- */ /* It read like a Word paragraph: left-aligned at an 80ch measure inside a 1180px band, so lines were short and the block was tall. Centred, and the measure opened to 96ch so lines run longer and the block is shorter. .prose > section.panel:nth-of-type(1) > p is (0-2-2) and beats .prose p (0-1-1) on weight. */ .prose > section.panel:nth-of-type(1) > p { max-width: 96ch; margin-inline: auto; text-align: center; text-wrap: pretty; } @media (max-width: 720px) { .prose > section.panel:nth-of-type(1) > p { text-align: left; max-width: none; } } /* ---- HERO CONTRAST CORRECTION ------------------------------------------ Measured on the first build of the teal hero, sampling the real backdrop under each text box with the copy hidden: eyebrow 3.53 (needs 4.5) FAIL h1 3.94 (needs 3.0) pass lede 3.09 (needs 4.5) FAIL lede link 3.28 (needs 4.5) FAIL Two independent causes, both fixed here. 1. The ramp fell off too early. The hero copy column is 44rem wide, so text can reach ~58% of the viewport, but the gradient was already down to 0.60 alpha at 48% and 0.40 at 62%. Over the bright reception-desk area of the photo that composites to rgb(120,141,146) - far too light. The ramp now holds >=0.86 until 58% and only then falls away. It is still an eight-stop gradual fade, not a hard-edged box: the right 40% of the photograph is barely tinted. 2. Champagne (#D3B58F, relative luminance 0.489) cannot carry SMALL text on a mid-teal backdrop at any alpha this scrim can reasonably reach - it would need the backdrop below 0.07 luminance, which means an almost opaque panel and loses the photograph. Champagne stays where it has the room - the h1 underline rule - while the eyebrow and the lede link move to warm white, with the link keeping a champagne underline so the accent still reads. Buttons are unaffected: they sit on their own solid fills. ------------------------------------------------------------------------ */ .hero-media::after { background: linear-gradient(100deg, rgb(var(--ch-teal) / 0.95) 0%, rgb(var(--ch-teal) / 0.94) 30%, rgb(var(--ch-teal) / 0.90) 46%, rgb(var(--ch-teal) / 0.86) 58%, rgb(var(--ch-teal) / 0.68) 68%, rgb(var(--ch-teal) / 0.44) 78%, rgb(var(--ch-teal) / 0.22) 88%, rgb(var(--ch-teal) / 0.06) 100%), linear-gradient(180deg, rgb(var(--ch-teal) / 0.30) 0%, rgb(var(--ch-teal) / 0.00) 34%); } /* Small text on the hero goes to warm white. */ .hero .hero-copy .eyebrow { color: var(--warm-white); } .hero .hero-copy .hero-lede { color: var(--warm-white); } .hero .hero-copy .hero-lede a { color: var(--warm-white); text-decoration: underline; text-decoration-color: var(--champagne); text-decoration-thickness: 2px; text-underline-offset: 4px; } .hero .hero-copy .hero-lede a:hover { text-decoration-color: var(--warm-white); } /* ---- footer field border, re-tuned for the teal ground ------------------ The session-5 accessibility pass set this to white @ 0.40, which measured 3.69:1 against the OLD near-black footer (38,36,47). The retheme moved the footer to the main teal (41,77,85), whose own luminance is higher, and the same border dropped to 2.89:1 - just under the 3:1 that WCAG 1.4.11 requires to identify a control boundary. Raised to 0.55, which measures 4.27:1 on the teal. A reminder that a contrast fix is only valid against the background it was measured on: re-measure whenever the ground changes. ---------------------------------------------------------------------- */ .site-footer .footer-form input:not(:focus-visible):not(:focus), .site-footer .footer-form select:not(:focus-visible):not(:focus), .site-footer .footer-form textarea:not(:focus-visible):not(:focus) { border-color: rgb(var(--ch-paper) / 0.55); } /* ---- visit-band action links: real tap targets -------------------------- The Phone and Email entries in the visit band are standalone tel:/mailto: actions in a list, and both measured 26px tall. WCAG 2.5.8 wants 44px for a target like this. (The other ~28 sub-32px links the metrics flag are INLINE links inside prose - "eye care services", "Read More" - which the success criterion explicitly exempts, so they are deliberately left alone.) .visit-band .visit-list a is (0-2-1) and beats direction.css:186 .visit-list a (0-1-1) on weight. Only two of the three rows contain an anchor - Fax is a plain - so this adds about 36px, not 54px. min-height rather than padding: the li carries a border-bottom, which padding would push away from the text. ---------------------------------------------------------------------- */ .visit-band .visit-list a { display: inline-flex; align-items: center; min-height: 44px; } .visit-band .visit-list li { align-items: center; } /* ---- doctor bio: close the dead quadrant -------------------------------- Measured at 1440: .bio-body ends at y3055 but .bio runs to y3265, because the row height is driven by the portrait, not the copy. site.css:458 gives the photo aspect-ratio 3/4, so a 240px lane makes it 320px tall while the bio text only fills 149px - leaving roughly 210px x 897px of empty band to the right of the photo before the reviews heading. Squaring the portrait takes it 320px -> 240px and removes ~100px of that. object-position is biased upward so the crop keeps the face rather than centring on the shoulders. .prose .bio-photo img is (0-2-1), beating both site.css:458 and direction.css:484 .bio-photo img (each 0-1-1), so it wins on weight. NOT fixing the residual ~110px by narrowing the photo lane: that needs .prose .bio { grid-template-columns: ... } at (0-2-0), which would outrank BOTH direction.css:502 and site.css:465 - two (0-1-0) rules inside media queries that stack the bio on small screens - and the bio would stop stacking on mobile. Not worth the regression for 110px. ---------------------------------------------------------------------- */ .prose .bio-photo img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center 22%; } /* =========================================================================== SESSION 6 - SECTION ARCHITECTURE The "Our Designer Optical Shop" panel was carrying eight unrelated topics and 37% of the page height under one h2, and the doctor panel carried the bio and the reviews together. Both are now split into discrete
s so each can own its background, and the page reads as an alternating rhythm: hero IMAGE -> ivory -> banner IMAGE -> warm white -> beige (form) -> doctor IMAGE -> ivory (reviews) -> warm white (optical) -> exams IMAGE -> ivory (sharp) -> warm white (featuring) -> white (emergency) -> ivory (blog) -> warm white (contact) -> teal (visit) -> champagne (CTA) -> teal (footer) Content was MOVED, not rewritten: no copy edited, no heading level changed, every link and alt attribute carried across verbatim. ======================================================================== */ /* The old nth-of-type colour sequence assumed four panels. There are now eleven, so colour is assigned by CLASS instead. These are (0-3-1) against the old (0-2-1) rules, so they win on weight rather than source order. */ .prose > section.panel.sec-reviews, .prose > section.panel.sec-sharp, .prose > section.panel.sec-blog { background-color: var(--ivory); } .prose > section.panel.sec-optical, .prose > section.panel.sec-featuring, .prose > section.panel.sec-contact { background-color: var(--warm-white); } .prose > section.panel.sec-emergency { background-color: #fff; } .prose > section.panel.sec-doctor, .prose > section.panel.sec-exams { background-color: var(--teal); } /* ---- section headings: centred everywhere except hero + Meet the Doctor -- */ .prose > section.panel > h2, .prose > section.panel > h3, .prose > section.panel > h4, .prose > section.panel > .bento-head, .prose > section.panel > .sec-title { text-align: center; } /* the gold/champagne rule under a centred heading has to centre with it */ .prose > section.panel > h2::after, .prose > section.panel > .bento-head::after { margin-inline: auto; } /* explicit opt-out, per the brief */ .prose > section.panel.sec-doctor h2, .prose > section.panel.sec-doctor h3, .prose > section.panel.sec-doctor p, .prose > section.panel.sec-emergency h3, .prose > section.panel.sec-emergency h4, .prose > section.panel.sec-emergency p { text-align: left; } /* Sub-heads inside cards stay centred with their section, but body copy in a card stays left - centred paragraphs inside a small card are hard to read. */ .sec-sharp .bento-body h4, .sec-sharp .bento-body h4 a { text-align: center; display: block; } /* ---- 1. OPTICAL SHOP: full desktop width ------------------------------- */ /* The brief asks this one to cover the whole desktop area rather than sit in the 1180px measure, so the band max widens and the tiles spread. */ .prose > section.panel.sec-optical { padding-inline: max(var(--band-gutter), calc((100% - 1560px) / 2)); } .sec-optical .figgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); } .sec-optical .figgrid figure { margin: 0; } .sec-optical .figgrid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .sec-optical .figgrid figcaption { text-align: center; } @media (max-width: 860px) { .sec-optical .figgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- 2. EYE EXAMS: copy over a background photograph, set right --------- */ .prose > section.panel.sec-exams { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(380px, 40vw, 560px); display: grid; align-content: center; } .sec-exams-media { position: absolute; inset: 0; z-index: -2; background-image: url('../assets/eye-exams-family.jpg'); background-size: cover; background-position: 30% center; } /* The photograph is bright on its right side, which is exactly where the copy sits, so a teal wash runs right-to-left to carry the text. Measured below. */ .sec-exams-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgb(var(--ch-teal) / 0.94) 0%, rgb(var(--ch-teal) / 0.90) 26%, rgb(var(--ch-teal) / 0.78) 42%, rgb(var(--ch-teal) / 0.52) 58%, rgb(var(--ch-teal) / 0.24) 74%, rgb(var(--ch-teal) / 0.06) 100%); } .sec-exams-copy { position: relative; z-index: 1; display: flex; justify-content: flex-end; } .sec-exams .split { display: block; max-width: 46rem; margin: 0; text-align: left; } .sec-exams .split-a, .sec-exams .split-b { margin: 0; } .sec-exams h3 { color: var(--warm-white); text-align: left; font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin-top: 0; } .sec-exams p { color: rgb(var(--ch-warmwhite) / 0.94); text-align: left; max-width: none; } .sec-exams .split-cta a { color: var(--champagne); } @media (max-width: 860px) { .sec-exams-copy { justify-content: flex-start; } .sec-exams-media { background-position: 60% center; } .sec-exams-media::after { background: linear-gradient(180deg, rgb(var(--ch-teal) / 0.80) 0%, rgb(var(--ch-teal) / 0.93) 60%); } } /* ---- 3. MEET THE DOCTOR: copy left over the teal portrait --------------- */ /* No scrim: the artwork is already a flat teal field on its left two-thirds, so off-white type sits on it cleanly. Verified by measurement, not by eye. */ .prose > section.panel.sec-doctor { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(360px, 36vw, 520px); display: grid; align-content: center; } .sec-doctor-media { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center right; margin: 0; border-radius: 0; box-shadow: none; } .sec-doctor-copy { position: relative; z-index: 1; max-width: 42rem; } .sec-doctor h2 { color: var(--warm-white); text-align: left; margin-top: 0; } .sec-doctor h2::after { margin-inline: 0; background: var(--champagne); } .sec-doctor .bio-body h3, .sec-doctor .bio-body h3 a { color: var(--champagne); text-align: left; } .sec-doctor .bio-body p { color: rgb(var(--ch-warmwhite) / 0.94); text-align: left; } .sec-doctor .bio-body a { color: var(--champagne); } @media (max-width: 860px) { .sec-doctor-media { object-position: 72% center; } .sec-doctor::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgb(var(--ch-teal) / 0.72) 0%, rgb(var(--ch-teal) / 0.92) 70%); } } /* ---- 4. REVIEWS: teal cards, white type, dots instead of a scrollbar ---- */ .sec-reviews .review { background-color: var(--teal); background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: rgb(var(--ch-teal) / 0.5); } /* The four decorative tints read as "card 1 is highlighted" rather than as a rhythm; on a single teal fill they are noise. Cleared at matching weight. */ .sec-reviews .reviews .review:nth-child(4n+1), .sec-reviews .reviews .review:nth-child(4n+2), .sec-reviews .reviews .review:nth-child(4n+3), .sec-reviews .reviews .review:nth-child(4n+4) { background-image: none; } .sec-reviews .review blockquote { color: var(--warm-white); } .sec-reviews .review blockquote::before { color: var(--champagne); } .sec-reviews .review cite { color: #fff; } .sec-reviews .review footer { border-top-color: rgb(var(--ch-paper) / 0.28); } .sec-reviews .review footer span { color: rgb(var(--ch-paper) / 0.82); } /* Hide the native rail scrollbar; the dots below replace it. */ .sec-reviews .reviews { scrollbar-width: none; padding-bottom: 0; } .sec-reviews .reviews::-webkit-scrollbar { height: 0; width: 0; } .reviews-dots { display: flex; justify-content: center; gap: 10px; margin-top: clamp(18px, 2vw, 26px); } .reviews-dots button { appearance: none; width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1px solid rgb(var(--ch-teal) / 0.45); background: transparent; cursor: pointer; transition: background-color 0.18s ease, transform 0.18s ease; } .reviews-dots button[aria-current="true"] { background: var(--teal); transform: scale(1.25); } /* 10px is far below a comfortable target, so the hit area is padded out to 44px with a transparent ::before rather than by growing the visible dot. */ .reviews-dots button { position: relative; } .reviews-dots button::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; } /* ---- 5. SHARP VISION + focus cards ------------------------------------- */ .sec-sharp .bento-focus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); } .sec-sharp .bento-item { margin: 0; } .sec-sharp .bento-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } @media (max-width: 860px) { .sec-sharp .bento-focus { grid-template-columns: 1fr; } } /* ---- 6. NOW FEATURING --------------------------------------------------- */ .sec-featuring .bento-feature { display: block; } .sec-featuring .bento-item { margin: 0; } .sec-featuring .bento-media img { width: 100%; height: auto; display: block; border-radius: var(--r-md); } /* ---- 7. EYE EMERGENCIES: white, subtle neutral wash, copy left ---------- */ .prose > section.panel.sec-emergency { background-image: radial-gradient(120% 90% at 12% 0%, rgb(var(--ch-teal) / 0.05) 0%, rgb(var(--ch-teal) / 0) 60%), radial-gradient(90% 80% at 96% 100%, rgb(var(--ch-greige) / 0.16) 0%, rgb(var(--ch-greige) / 0) 62%); } .emerg-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(26px, 3.4vw, 56px); align-items: center; } .emerg-copy { min-width: 0; } .emerg-copy p { max-width: none; } .sec-emergency .emerg-head h3 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); } /* Art slot: fades left into the page so it reads as part of the band, not a pasted rectangle. Currently a neutral wash - see note in the handover. */ .emerg-art { min-height: clamp(220px, 24vw, 340px); border-radius: var(--r-md); background-color: rgb(var(--ch-greige) / 0.14); background-size: cover; background-position: center; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%); } @media (max-width: 860px) { .emerg-grid { grid-template-columns: 1fr; } .emerg-art { display: none; } } /* ---- 8. WHAT'S NEW: real blog cards ------------------------------------ */ .sec-blog .postlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 30px); } .sec-blog .post { background: #fff; border: 1px solid rgb(var(--ch-teal) / 0.14); border-radius: var(--r-md); padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; box-shadow: 0 2px 10px rgb(var(--ch-teal) / 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; } .sec-blog .post:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgb(var(--ch-teal) / 0.12); } .sec-blog .post-date { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); font-weight: 700; margin: 0 0 10px; } .sec-blog .post h5 { margin: 0 0 10px; font-size: clamp(1.05rem, 1.35vw, 1.25rem); } .sec-blog .post h5 a { color: var(--teal); text-decoration: none; } .sec-blog .post h5 a:hover { text-decoration: underline; text-underline-offset: 3px; } .sec-blog .post p { margin: 0 0 18px; } .sec-blog .post .btn, .sec-blog .post a.more { margin-top: auto; align-self: flex-start; } @media (max-width: 760px) { .sec-blog .postlist { grid-template-columns: 1fr; } } /* ---- 9. CONTACT + LOCATE: its own section, edges aligned ---------------- */ .sec-contact .contact-locate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(20px, 2.4vw, 36px); align-items: stretch; } .sec-contact .cl-card, .sec-contact .cl-map { min-width: 0; } .sec-contact .cl-map iframe { width: 100%; height: 100%; min-height: clamp(260px, 26vw, 380px); border: 0; border-radius: var(--r-md); display: block; } /* The hours table sat loose under the two cards and did not line up with either edge. It now shares the same grid, so its rules end where the cards end - which is what the annotation was pointing at. */ .sec-contact .daylist { margin-top: clamp(24px, 2.6vw, 38px); columns: 2; column-gap: clamp(24px, 3vw, 48px); } .sec-contact .daylist li { break-inside: avoid; } .sec-contact > h4 { margin-top: clamp(26px, 3vw, 40px); } @media (max-width: 860px) { .sec-contact .contact-locate { grid-template-columns: 1fr; } .sec-contact .daylist { columns: 1; } } /* ---- 10. REQUEST APPOINTMENT: beige, narrower measure ------------------ */ /* The form ran the full 1180px band, so label/field pairs were stranded far apart. Beige ground, and the form itself constrained and centred. */ .prose > section.panel:nth-of-type(2) { background-color: rgb(var(--ch-oak) / 0.20); } .prose > section.panel:nth-of-type(2) > h2 { text-align: center; } .appt-form, .prose > section.panel:nth-of-type(2) > .form-note { max-width: 860px; margin-inline: auto; } .prose > section.panel:nth-of-type(2) > .form-note { text-align: center; } /* ---- centring section titles that are flex containers ------------------- site.css:516 sets `.prose h4 { display:flex; align-items:center }` and gives it a 4px accent bar via ::before. On a flex container `text-align: center` does nothing - the flex LINE has to be centred with justify-content - and a left-hand bar on a centred title reads as a misalignment. Both handled here for section-level h4s only; card labels inside .cl-card / .post keep the bar and stay left, which is what distinguishes a section title from a sub-label. -------------------------------------------------------------------- */ .prose > section.panel > h4 { justify-content: center; } .prose > section.panel > h4::before { content: none; } /* h2/h3 are not flex, so text-align is enough - but their rule/underline has to centre with them. */ .prose > section.panel > h2, .prose > section.panel > h3 { text-align: center; } /* Explicit opt-outs, per the brief: hero and Meet the Doctor stay left, and the emergency band keeps its left-justified format. */ .prose > section.panel.sec-doctor > h2 { text-align: left; } .prose > section.panel.sec-emergency h3, .prose > section.panel.sec-emergency h4 { justify-content: flex-start; text-align: left; } .prose > section.panel.sec-emergency h4::before { content: ""; } /* ---- doctor bio: the copy is a BARE TEXT NODE --------------------------- .bio-body holds an

followed by a loose text node - there is no

to target, which is why `.sec-doctor .bio-body p` matched nothing and the bio rendered in body ink on the teal portrait. Colour goes on the container so the text node inherits it. (Same source quirk as the street address, which is also a bare text node in this markup.) -------------------------------------------------------------------- */ .sec-doctor .bio-body { color: rgb(var(--ch-warmwhite) / 0.94); } .sec-doctor .bio-body a { color: var(--champagne); } .sec-doctor .bio-body h3 a { color: var(--champagne); } /* ---- one section-title size across the whole page ---------------------- Titles were running at three different sizes: h2 43.2px, .bento-head 30.4px, and the "What's New?" h4 at 16.32px - the same visual rank as body copy, which is why that section did not read as a section at all. All section-level titles now share one scale. This is the rule to carry to the other 286 pages. -------------------------------------------------------------------- */ .prose > section.panel > h2, .prose > section.panel > h3, .prose > section.panel > h4 { font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.14; letter-spacing: -0.02em; margin-bottom: clamp(20px, 2.4vw, 34px); } /* The emergency headline sits inside .emerg-head, so it needs the size too. */ .sec-emergency .emerg-head h3 { font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.14; letter-spacing: -0.02em; } /* "What's New?" is a link inside its h4; inherit the new size rather than the h4 default, and drop the underline that made it read as body copy. */ .sec-blog > h4 a { font: inherit; color: var(--teal); text-decoration: none; } .sec-blog > h4 a:hover { text-decoration: underline; text-underline-offset: 4px; } /* ---- optical shop tiles: full-width band, but no upscaling -------------- Widening this section to 1560px pushed the four brand tiles to 331px each, and their sources are only 250px wide (1.32x, visibly soft). I probed the source CDN for larger originals the way I did for the intro photo: sites/2391/2018/04/prada.jpg 403 images/product_images/ray-ban.jpg 302 images/product_images/coach_2.jpg 302 Only the 250px variants are served, so there is nothing sharper to fetch. The band still spans the full desktop width; the tiles are capped at 300px (1.20x) and distributed across it instead of being stretched to fill. -------------------------------------------------------------------- */ .sec-optical .figgrid { grid-template-columns: repeat(4, minmax(0, 300px)); justify-content: space-between; } @media (max-width: 860px) { .sec-optical .figgrid { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: space-around; } } /* ---- emergency band: no placeholder holes ------------------------------ The right-hand art slot is specified as a generated eye-procedure image (no faces, fading left). fal is unavailable in this environment, and an empty tinted rectangle reads as a BROKEN IMAGE, which is worse than not having the slot. So the band is laid out to look finished without it: copy runs at a contained measure against the subtle neutral wash, and the emergency phone number is promoted, which is what the section is actually for. TO ENABLE THE ART once the image exists, set its URL on the element and the two-column layout restores itself - no other change needed:

-------------------------------------------------------------------- */ .emerg-grid { grid-template-columns: minmax(0, 1fr); } .emerg-art { display: none; } .emerg-grid:has(.emerg-art[style*="--art"]) { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } .emerg-art[style*="--art"] { display: block; background-image: var(--art); } /* Copy holds a readable measure instead of running the full band. */ .sec-emergency .emerg-copy { max-width: 62rem; } .sec-emergency .emerg-copy p { max-width: none; } /* The phone number is the point of an emergency band - give it weight. */ .sec-emergency .emerg-copy a[href^="tel:"] { font-weight: 700; color: var(--teal); text-decoration-color: var(--champagne); text-decoration-thickness: 2px; text-underline-offset: 4px; } /* ---- Now Featuring: let the new artwork keep its own proportions -------- direction.css:375 pins `.prose > section.panel .bento-banner .bento-media img` to `aspect-ratio: 1280 / 480` - the dimensions of the OLD Optos banner. The replacement artwork is 2171x724 (ratio 3.00, not 2.67), so at 1180px wide it was being forced to 1180 x 480/1280 = 442.5px against a natural 393px: a 12.6% vertical stretch that fattened the device. That rule is (0-4-1); this is (0-5-1), so it wins on weight rather than order. aspect-ratio:auto means any future replacement keeps ITS proportions too, instead of inheriting whatever the previous image happened to be. -------------------------------------------------------------------- */ .prose > section.panel.sec-featuring .bento-banner .bento-media img { aspect-ratio: auto; height: auto; object-fit: fill; } /* =========================================================================== SESSION 7 — alignment and polish pass ======================================================================== */ /* ---- 1. HERO: larger headline, buttons aligned to the copy column ------- The h1 was clamped to 2.7rem and the CTA row sat loose under it. The headline grows, and the button row is pinned to the same left edge and given a consistent gap so it reads as part of the copy block. */ .hero-copy h1 { font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: 1.06; letter-spacing: -0.025em; max-width: 18ch; } .hero-copy .hero-lede { font-size: clamp(1.02rem, 1.25vw, 1.2rem); max-width: 44ch; } .hero-copy .btn-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: clamp(12px, 1.2vw, 18px); margin-top: clamp(22px, 2.4vw, 34px); } .hero-copy .btn-row .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding-inline: clamp(24px, 2.4vw, 34px); margin: 0; } /* ---- 2. APPOINTMENT FORM: re-flow without touching the markup ---------- Requested order is Reason full-width, then Name/Last, Phone/Email, then the two radio groups side by side. CORRECTION 2026-09-23: this comment used to claim the tab order still followed the visual order. It did not — `order` moves the boxes but not the tab sequence (WCAG 2.4.3), and it did nothing on phones. The "New Or Returning" fieldset now sits in the DOM where it is shown (working/index.html), so DOM, visual and tab order agree; these rules only size the columns. div.field:nth-of-type() counts only the DIVs, so the two
s and the sr-only do not shift the numbering: 1 Reason · 2 First · 3 Last · 4 Phone · 5 Email · 6 Comments · 7 actions -------------------------------------------------------------------- */ .appt-form > div.field:nth-of-type(1) { grid-column: 1 / -1; order: 1; } /* Reason */ .appt-form > div.field:nth-of-type(2) { order: 2; } /* First */ .appt-form > div.field:nth-of-type(3) { order: 3; } /* Last */ .appt-form > div.field:nth-of-type(4) { order: 4; } /* Phone */ .appt-form > div.field:nth-of-type(5) { order: 5; } /* Email */ .appt-form > fieldset.field:not(.full) { order: 6; grid-column: auto; } /* New or returning */ .appt-form > fieldset.field.full { order: 7; grid-column: auto; } /* Best way to reach */ .appt-form > div.field:nth-of-type(6) { order: 8; grid-column: 1 / -1; } /* Comments */ .appt-form > div.field.appt-actions { order: 9; grid-column: 1 / -1; } /* Radio groups now sit in a column beside a text field, so they need the same vertical box as an input or the row looks ragged. */ .appt-form fieldset.field { margin: 0; padding: 0; border: 0; min-width: 0; } .appt-form fieldset.field legend { padding: 0; } .appt-form fieldset.field .opts { display: flex; align-items: center; gap: clamp(18px, 2vw, 32px); min-height: 52px; } @media (max-width: 640px) { .panel .appt-form > * { order: unset !important; grid-column: 1 / -1 !important; } } /* ---- 3. REVIEWS: momentum, snap and drag ------------------------------ */ .sec-reviews .reviews { scroll-behavior: smooth; scroll-snap-type: x mandatory; cursor: grab; } .sec-reviews .reviews.is-dragging { cursor: grabbing; scroll-behavior: auto; /* smooth fights a live drag */ scroll-snap-type: none; /* let the finger lead; snap re-applies on release */ } .sec-reviews .reviews.is-dragging .review { pointer-events: none; } .sec-reviews .review { transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; } @media (prefers-reduced-motion: reduce) { .sec-reviews .reviews { scroll-behavior: auto; } .sec-reviews .review { transition: none; } } /* ---- 4. OPTICAL SHOP: close the gaps ---------------------------------- */ /* Capping the tiles at 300px and using space-between left ~120px holes between them. The row is centred with a normal gap instead. */ .sec-optical .figgrid { grid-template-columns: repeat(4, minmax(0, 300px)); justify-content: center; gap: clamp(12px, 1.2vw, 20px); } @media (max-width: 860px) { .sec-optical .figgrid { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; } } /* ---- 5. NOW FEATURING: edge to edge ----------------------------------- */ /* Full-bleed like the hero and doctor bands. A fixed band height with object-fit: cover crops the flat blue top and bottom of the artwork, which is a continuous gradient in the file - there is no hard edge to trim, so it has to be cropped by the frame. */ .prose > section.panel.sec-featuring { padding-bottom: 0; } .sec-featuring .bento-feature, .sec-featuring .bento-item, .sec-featuring .bento-media { margin: 0; border-radius: 0; box-shadow: none; } .prose > section.panel.sec-featuring .bento-media img { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); height: clamp(300px, 34vw, 520px); object-fit: cover; object-position: center center; border-radius: 0; display: block; } /* ---- 6. EYE EMERGENCIES: photograph behind the copy ------------------- */ .prose > section.panel.sec-emergency { position: relative; isolation: isolate; overflow: hidden; background-color: #fff; background-image: none; min-height: clamp(360px, 34vw, 520px); display: grid; align-content: center; } .sec-emergency::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: url('../assets/eye-emergency-exam.jpg'); background-size: cover; background-position: 68% center; } /* The photograph is near-white on its left half, so the copy needs a wash to sit on rather than raw white-on-white. Kept very light so the image reads. */ .sec-emergency::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(255 255 255 / 0.97) 0%, rgb(255 255 255 / 0.95) 34%, rgb(255 255 255 / 0.82) 52%, rgb(255 255 255 / 0.42) 70%, rgb(255 255 255 / 0.10) 88%, rgb(255 255 255 / 0.00) 100%); } .sec-emergency .emerg-grid { grid-template-columns: minmax(0, 1fr); } .sec-emergency .emerg-copy { max-width: 40rem; position: relative; z-index: 1; } .sec-emergency .emerg-art { display: none; } @media (max-width: 860px) { .sec-emergency::after { background: linear-gradient(180deg, rgb(255 255 255 / 0.96) 0%, rgb(255 255 255 / 0.90) 70%); } .sec-emergency::before { background-position: 78% center; } } /* ---- 7. CONTACT + LOCATE: aligned, larger labels, lifted -------------- */ .sec-contact .contact-locate { align-items: stretch; } .sec-contact .cl-card, .sec-contact .cl-map { background: #fff; border-radius: var(--r-md); padding: clamp(22px, 2.4vw, 32px); box-shadow: 0 10px 30px rgb(var(--ch-teal) / 0.10), 0 2px 6px rgb(var(--ch-teal) / 0.06); display: flex; flex-direction: column; } /* Both labels start on the same baseline and read as section sub-heads. */ .sec-contact .cl-card > h4, .sec-contact .cl-map > h4 { margin: 0 0 clamp(14px, 1.6vw, 20px); font-size: clamp(1rem, 1.15vw, 1.15rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); justify-content: flex-start; text-align: left; min-height: 1.6em; } .sec-contact .cl-map iframe { flex: 1 1 auto; min-height: clamp(280px, 26vw, 400px); border-radius: var(--r-sm); box-shadow: 0 1px 4px rgb(var(--ch-teal) / 0.10); } /* ---- 8. FOOTER: tighter, ruled, rounded ------------------------------- */ .site-footer .footer-grid { gap: clamp(20px, 2.2vw, 34px); padding-block: 0; } .site-footer { padding-block: clamp(40px, 4vw, 64px) clamp(26px, 2.6vw, 40px); } .site-footer .footer-grid h3 { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid rgb(var(--ch-paper) / 0.16); } .site-footer .footer-grid ul { display: grid; gap: 7px; } .site-footer .footer-grid li { margin: 0; } .site-footer .footer-grid a { padding-block: 2px; } .site-footer .footer-grid p { margin: 0 0 8px; line-height: 1.5; } .site-footer .footer-form { margin-top: clamp(22px, 2.4vw, 32px); padding-top: clamp(20px, 2.2vw, 28px); border-top: 1px solid rgb(var(--ch-paper) / 0.16); } .site-footer > .shell > h3, .site-footer .footer-form + * { margin-top: 0; } /* Buttons match the CTA pill. */ .site-footer .btn, .site-footer button, .site-footer .footer-form button { border-radius: var(--r-pill); } /* ---- close the visit-band -> footer gap -------------------------------- Both bands are the same teal now, so the padding between them reads as one large empty block rather than as two sections. Measured ~130px of dead teal between the last visit-band element and the first footer column. Trimmed from both sides, and a hairline carries the division instead of whitespace. -------------------------------------------------------------------- */ .visit-band { padding-bottom: clamp(26px, 2.8vw, 40px); } .site-footer { padding-top: clamp(26px, 2.8vw, 40px); } .site-footer .footer-grid { border-top: 1px solid rgb(var(--ch-paper) / 0.14); padding-top: clamp(26px, 2.8vw, 38px); } /* The visit band's three columns end at different heights; aligning their tops and letting the shortest stop early is normal for an info band, but the band itself no longer needs to reserve height beyond its tallest column. */ .visit-inner { align-items: start; } /* Footer contact/hours lists were spaced for a taller band. */ .site-footer .visit-list { gap: 7px; } .site-footer .visit-list li { padding-bottom: 7px; } /* ---- hero copy: sit further left than the centred band ----------------- The hero copy inherited the shared band inset, (100% - 1180px) / 2, which at a 1901px browser puts it 360px in. The requested position is ~222px. A fixed shift would not survive narrower screens - at 1440 the whole inset is only 130px, so subtracting 138px would slam the copy into the 24px gutter. The inset is scaled instead: 0.62 of the band inset, floored at the gutter. W band inset -> hero inset 1280 50 31 1440 130 81 1901 361 224 <- matches the marked position 1920 370 229 Hero MEDIA is untouched; only the copy column moves. -------------------------------------------------------------------- */ .hero .hero-inner { padding-inline: max(var(--band-gutter), calc((100% - var(--band-max)) / 2 * 0.62)); } /* ---- Now Featuring: the real reason it was not edge to edge ------------ The was already width:100vw with a negative margin - its BOX measured the full viewport. But direction.css:324 gives .bento-media `overflow:hidden` and .bento-item clips too, so at a 1860px viewport the box ran 0-1860 while only 340-1520 was ever PAINTED: exactly the 1180px band. getBoundingClientRect returns the box, not the painted area, which is why my earlier check reported "1440px, full bleed" and was wrong. The hero, doctor and exams bands are full-bleed because the SECTION spans the viewport; here it was the image inside a clipping container. Unclip it. -------------------------------------------------------------------- */ .sec-featuring .bento-item, .sec-featuring .bento-media { overflow: visible; } /* ---- Reviews rail: line the edges up with the tiles below -------------- Measured at 1860: the optical tile row runs 300 -> 1560 (four 300px tiles + three 20px gaps = 1260px, centred in the 1560px band), while the rail ran 340 -> 1520 because it inherited the 1180px band. Different bands, so the edges could never agree. The rail now uses the same 1560px band and is capped at exactly four tiles plus three gaps, so its edges match the row beneath it AND four whole cards fit - which is what stops the fourth one being sliced. -------------------------------------------------------------------- */ .prose > section.panel.sec-reviews { padding-inline: max(var(--band-gutter), calc((100% - 1560px) / 2)); } .sec-reviews .reviews { --rev-gap: clamp(12px, 1.2vw, 20px); grid-auto-columns: 300px; gap: var(--rev-gap); max-width: calc(300px * 4 + var(--rev-gap) * 3); margin-inline: auto; scroll-padding-inline: 0; } .sec-reviews .reviews-dots { max-width: calc(300px * 4 + var(--rev-gap, 20px) * 3); margin-inline: auto; } /* =========================================================================== INNER PAGES — the V1 contact aside The homepage replaced these three sidebar cards with .visit-band. The other 286 pages still emit