/* ========================================================================== EYE DOCTOR — BLOCK KIT STYLES Depends on the design-system tokens declared in style.css. ========================================================================== */ /* ---- Video Hero ---------------------------------------------------------- */ .ed-videohero { position: relative; min-height: 72vh; display: flex; align-items: flex-end; overflow: hidden; padding: 0; } .ed-videohero__media { position: absolute; inset: 0; z-index: 1; } .ed-videohero__media img, .ed-videohero__video { width: 100%; height: 100%; object-fit: cover; } .ed-videohero__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(14,35,56,.82) 0%, rgba(14,35,56,.34) 52%, rgba(14,35,56,.72) 100%); } .ed-videohero__scrim::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(14,35,56,.55) 100%); } .ed-videohero__inner { position: relative; z-index: 2; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding-top: 90px; padding-bottom: 72px; } .ed-videohero__content { max-width: 760px; } .ed-videohero__eyebrow { color: #fff; } .ed-videohero__heading { color: #fff; margin-bottom: 22px; } .ed-videohero__sub { color: rgba(255,255,255,.9); max-width: 620px; margin-bottom: 30px; } .ed-videohero__play { color: #fff; padding-bottom: 8px; } @media (max-width: 991px) { .ed-videohero { min-height: 66vh; } .ed-videohero__inner { flex-direction: column; align-items: flex-start; gap: 28px; } } @media (max-width: 767px) { .ed-videohero { min-height: 60vh; } .ed-videohero__inner { padding-top: 60px; padding-bottom: 48px; } } /* ---- Pull Quote ---------------------------------------------------------- */ .ed-pullquote__inner { max-width: 900px; margin: 0 auto; text-align: center; } .ed-pullquote__quote { font-family: var(--font1,'Poppins',sans-serif); font-weight: 500; font-size: 34px; line-height: 1.4; color: var(--ed-navy); margin: 0 0 18px; letter-spacing: .005em; } .ed-on-navy .ed-pullquote__quote { color: #fff; } .ed-pullquote__cite { display: block; font-family: var(--font1,'Poppins',sans-serif); font-weight: 600; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--ed-sky); font-style: normal; } @media (max-width: 767px) { .ed-pullquote__quote { font-size: 24px; } } /* ---- Team Slider --------------------------------------------------------- */ .ed-team { position: relative; overflow: hidden; } .ed-team__texture { position: absolute; top: 0; right: 0; width: 40%; height: 62%; opacity: .45; z-index: 0; pointer-events: none; } .ed-team__head { position: relative; z-index: 1; text-align: center; max-width: 720px; margin: 0 auto 52px; } .ed-team__stage { position: relative; z-index: 1; } /* pad + negative-margin so the portrait's drop shadow isn't clipped by overflow */ .ed-team__viewport { overflow: hidden; padding: 50px 0 56px; margin: -50px 0 -56px; } .ed-team__track { display: flex; transition: transform .6s cubic-bezier(.4,0,.2,1); } .ed-team__slide { flex: 0 0 100%; display: grid; grid-template-columns: minmax(0,430px) minmax(0,1fr); gap: 48px; align-items: center; padding: 6px 40px; } .ed-team--right .ed-team__slide { grid-template-columns: minmax(0,1fr) minmax(0,430px); } .ed-team--right .ed-team__slide .ed-team__media { order: 2; } .ed-team__media { position: relative; max-width: 420px; } .ed-team--left .ed-team__media { margin-left: auto; } .ed-team--right .ed-team__media { margin-right: auto; } .ed-team__media::before { content: ""; position: absolute; left: -22px; bottom: -22px; width: 82%; height: 82%; border: 2px solid var(--ed-sky); border-radius: 220px 220px 22px 22px; opacity: .5; z-index: 0; } .ed-team__arc { position: relative; z-index: 1; aspect-ratio: 4/5; border-radius: 260px 260px 22px 22px; overflow: hidden; background: var(--ed-surface); box-shadow: 0 34px 74px -34px rgba(14,35,56,.5); } .ed-team__arc img { width: 100%; height: 100%; object-fit: cover; object-position: center 14%; } .ed-team__name { font-family: var(--font1,'Poppins',sans-serif); font-weight: 600; font-size: 34px; line-height: 1.12; color: var(--ed-navy); margin: 6px 0 14px; } .ed-team__quote { font-family: var(--font1,'Poppins',sans-serif); font-weight: 500; font-size: 22px; line-height: 1.45; color: var(--ed-navy); margin: 0 0 18px; } .ed-team__cta { margin-top: 26px; } /* Flanking arrows */ .ed-team__arrow { position: absolute; top: 46%; transform: translateY(-50%); z-index: 4; width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--ed-line); background: #fff; color: var(--ed-navy); display: grid; place-items: center; cursor: pointer; box-shadow: 0 12px 30px -14px rgba(14,35,56,.4); transition: background .2s, border-color .2s, color .2s; } .ed-team__arrow svg { width: 22px; height: 22px; } .ed-team__arrow:hover { background: var(--ed-sky); border-color: var(--ed-sky); color: #fff; } .ed-team__arrow--prev { left: -8px; } .ed-team__arrow--next { right: -8px; } /* Dots */ .ed-team__dots { position: relative; z-index: 1; display: flex; justify-content: center; gap: 12px; margin-top: 40px; } .ed-team__dot { width: 11px; height: 11px; border-radius: 50%; border: 0; padding: 0; background: rgba(22,50,79,.2); cursor: pointer; transition: background .25s, transform .25s; } .ed-team__dot.is-active { background: var(--ed-sky); transform: scale(1.3); } @media (max-width: 991px) { .ed-team__slide { grid-template-columns: 1fr; gap: 40px; padding: 6px 12px; text-align: center; } .ed-team--right .ed-team__slide .ed-team__media { order: 0; } .ed-team__media { max-width: 320px; margin: 0 auto; } .ed-team__media::before { display: none; } .ed-team__quote { font-size: 19px; } .ed-team__arrow { top: auto; bottom: -6px; transform: none; width: 46px; height: 46px; } .ed-team__arrow--prev { left: 20%; } .ed-team__arrow--next { right: 20%; } .ed-team__dots { margin-top: 64px; } } /* ---- Expertise Slider (vertical-progress split panel) -------------------- */ .ed-expertise { padding: 100px 0 108px; background: var(--ed-surface); } .ed-expertise__head { text-align: center; max-width: 720px; margin: 0 auto 54px; } .ed-expertise__band { position: relative; } .ed-expertise__panels { position: relative; height: 620px; } .ed-expertise__panel { position: absolute; inset: 0; display: grid; grid-template-columns: 46% 54%; opacity: 0; visibility: hidden; transition: opacity .55s ease; } .ed-expertise__panel.is-active { opacity: 1; visibility: visible; } .ed-expertise__text { background: var(--ed-surface); display: flex; align-items: center; padding: 60px 60px 60px 120px; } .ed-expertise__text-inner { max-width: 420px; } .ed-expertise__title { font-family: var(--font1,'Poppins',sans-serif); font-weight: 600; font-size: 40px; line-height: 1.12; color: var(--ed-navy); margin: 0 0 22px; } .ed-expertise__copy { font-size: 17px; line-height: 1.7; color: var(--ed-slate); margin: 0 0 34px; } .ed-expertise__photo { position: relative; } .ed-expertise__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ENTER-style ring link */ .ed-expertise__enter { display: inline-flex; align-items: center; text-decoration: none; } .ed-expertise__enter-ring { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--ed-sky); color: var(--ed-sky); display: grid; place-items: center; transition: background .2s, color .2s; } .ed-expertise__enter-ring svg { width: 18px; height: 18px; } .ed-expertise__enter-line { width: 46px; height: 2px; background: var(--ed-sky); opacity: .5; } .ed-expertise__enter-label { font-family: var(--font1,'Poppins',sans-serif); font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--ed-sky); } .ed-expertise__enter:hover .ed-expertise__enter-ring { background: var(--ed-sky); color: #fff; } /* Vertical capsule progress bars (left) */ .ed-expertise__bars { position: absolute; left: 40px; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: 10px; } .ed-expertise__bar { width: 5px; height: 22px; border-radius: 6px; border: 0; padding: 0; background: rgba(22,50,79,.18); cursor: pointer; transition: background .3s, height .3s; } .ed-expertise__bar.is-active { background: var(--ed-sky); height: 30px; } /* Up/down arrow controls (right) */ .ed-expertise__arrows { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: 14px; } .ed-expertise__arrow { width: 54px; height: 54px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: rgba(14,35,56,.28); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; } .ed-expertise__arrow svg { width: 20px; height: 20px; } .ed-expertise__arrow:hover { background: var(--ed-sky); border-color: var(--ed-sky); } @media (max-width: 991px) { /* Mobile: the one-at-a-time slider hides 3 of 4 services behind tiny arrows. Show every service stacked as a photo + copy card — nothing hidden, no controls. */ .ed-expertise { padding: 64px 0 68px; } .ed-expertise__head { margin-bottom: 40px; } .ed-expertise__bars, .ed-expertise__arrows { display: none; } .ed-expertise__panels { position: static; height: auto; display: flex; flex-direction: column; } .ed-expertise__panel, .ed-expertise__panel.is-active { position: relative; inset: auto; display: grid; grid-template-columns: 1fr; opacity: 1; visibility: visible; transition: none; } .ed-expertise__photo { min-height: 260px; order: -1; } .ed-expertise__text { padding: 40px 26px 46px; } .ed-expertise__title { font-size: 28px; margin-bottom: 16px; } .ed-expertise__copy { margin-bottom: 26px; } } /* ---- Tabbed Proof (vertical reason-rail) -------------------------------- */ .ed-tabbed__head { max-width: 720px; margin-bottom: 46px; } .ed-tabbed__layout { display: grid; grid-template-columns: 290px 1fr; gap: 64px; align-items: start; } .ed-tabbed__rail { display: flex; flex-direction: column; } .ed-tabbed__tab { position: relative; text-align: left; background: none; border: 0; border-left: 2px solid rgba(255,255,255,.16); color: rgba(255,255,255,.6); font-family: var(--font1,'Poppins',sans-serif); font-weight: 500; font-size: 19px; line-height: 1.3; padding: 18px 24px; cursor: pointer; transition: color .2s, border-color .3s, background .2s; } .ed-tabbed__tab:hover { color: #fff; } .ed-tabbed__tab.is-active { color: #fff; border-left-color: var(--ed-sky); background: linear-gradient(90deg, rgba(62,155,196,.14), transparent); } .ed-tabbed__panels { position: relative; } .ed-tabbed__panel { display: none; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; } .ed-tabbed__panel.is-active { display: grid; animation: ed-fade-in .5s ease; } @keyframes ed-fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .ed-tabbed__figure { position: relative; } .ed-tabbed__figure-accent { position: absolute; left: -18px; bottom: -18px; width: 62%; height: 62%; border: 2px solid var(--ed-sky); border-radius: 16px; opacity: .55; z-index: 0; } .ed-tabbed__figure img { position: relative; z-index: 1; display: block; width: 100%; height: 460px; object-fit: cover; border-radius: 16px; box-shadow: 0 30px 64px -30px rgba(0,0,0,.55); } .ed-tabbed__panel-heading { color: #fff; position: relative; padding-bottom: 16px; margin-bottom: 16px; } .ed-tabbed__panel-heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 3px; background: var(--ed-sky); border-radius: 3px; } .ed-tabbed__text .ed-body { color: rgba(255,255,255,.82); } @media (max-width: 991px) { .ed-tabbed__layout { grid-template-columns: 1fr; gap: 36px; } /* Mobile: the horizontal tab rail clips and hides reasons behind taps. Drop the tabs and stack every reason as a photo + copy card. */ .ed-tabbed__rail { display: none; } .ed-tabbed__panels { display: flex; flex-direction: column; gap: 44px; } .ed-tabbed__panel, .ed-tabbed__panel.is-active { display: grid; grid-template-columns: 1fr; gap: 22px; animation: none; } .ed-tabbed__figure { order: -1; } .ed-tabbed__figure img { height: 300px; } .ed-tabbed__figure-accent { display: none; } } /* ---- Split Band ---------------------------------------------------------- */ .ed-splitband { padding: 0; } .ed-splitband__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } .ed-splitband--left .ed-splitband__media { order: 0; } .ed-splitband--left .ed-splitband__body { order: 1; } .ed-splitband--right .ed-splitband__media { order: 1; } .ed-splitband__media { position: relative; min-height: 460px; overflow: hidden; } .ed-splitband__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ed-splitband__body { display: flex; align-items: center; padding: 84px 6vw; } .ed-splitband.ed-on-surface .ed-splitband__body { background: var(--ed-surface); } .ed-splitband.ed-on-navy .ed-splitband__body { background: var(--ed-navy); } .ed-splitband__inner .ed-btn { margin-top: 26px; } @media (max-width: 991px) { .ed-splitband__grid { grid-template-columns: 1fr; } .ed-splitband--left .ed-splitband__media, .ed-splitband--right .ed-splitband__media { order: -1; } .ed-splitband__body { padding: 48px 24px; } .ed-splitband__media { min-height: 300px; } } /* ---- CTA Band ------------------------------------------------------------ */ .ed-ctaband { padding: 0; } .ed-ctaband__row--navy { background: var(--ed-navy); color: #fff; } .ed-ctaband__row--sky { background: var(--ed-sky); color: #fff; } .ed-ctaband__row--surface { background: var(--ed-surface); color: var(--ed-navy); } .ed-ctaband__row + .ed-ctaband__row { border-top: 1px solid rgba(255,255,255,.12); } .ed-ctaband__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 34px 32px; } .ed-ctaband__heading { font-family: var(--font1,'Poppins',sans-serif); font-weight: 600; font-size: 26px; margin: 0; color: inherit; } @media (max-width: 767px) { .ed-ctaband__inner { flex-direction: column; align-items: flex-start; gap: 16px; text-align: left; } .ed-ctaband__heading { font-size: 21px; } } /* ---- Motion / scroll reveal (reusable) ---------------------------------- */ .ed-js [data-ed-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; } .ed-js [data-ed-reveal].is-in { opacity: 1; transform: none; } .ed-reviews__lead[data-ed-reveal] { transition-delay: .1s; } .ed-reviews__grid[data-ed-reveal] { transition-delay: .2s; } @media (prefers-reduced-motion: reduce) { [data-ed-reveal] { opacity: 1 !important; transform: none !important; transition: none; } } /* ---- Ambient grey wave shapes (drift in on scroll) ---------------------- */ .ed-waves { position: absolute; inset: 0; z-index: 0; overflow: hidden; opacity: 1 !important; transform: none !important; pointer-events: none; } .ed-wave { position: absolute; display: block; transition: opacity 1.1s ease, transform 1.1s ease; } .ed-js .ed-wave { opacity: 0; } .ed-wave path { fill: rgba(22, 50, 79, 0.05); } .ed-on-navy .ed-wave path { fill: rgba(255, 255, 255, 0.05); } .ed-wave--a { top: -150px; left: -130px; width: 540px; height: 540px; transform: translate(-42px, -28px) scale(.9); } .ed-wave--b { top: 14%; right: -180px; width: 600px; height: 600px; transform: translate(46px, 24px) scale(.9); } .ed-wave--c { bottom: -200px; left: 12%; width: 500px; height: 500px; transform: translate(-18px, 44px) scale(.9); } .ed-waves.is-in .ed-wave { opacity: 1; transform: none; } .ed-waves.is-in .ed-wave--b { transition-delay: .16s; } .ed-waves.is-in .ed-wave--c { transition-delay: .32s; } /* ---- Reviews (staggered accent cards) ----------------------------------- */ .ed-reviews { position: relative; overflow: hidden; } .ed-reviews__inner { position: relative; z-index: 1; } .ed-reviews__head { text-align: center; max-width: 720px; margin: 0 auto 56px; } .ed-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1120px; margin: 0 auto; align-items: start; } .ed-reviews__card { position: relative; background: #fff; border-radius: 18px; padding: 40px 34px 30px; margin: 0; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(14,35,56,.45); } .ed-reviews__card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--ed-sky); } .ed-reviews__grid .ed-reviews__card:nth-child(2) { transform: translateY(-26px); } .ed-on-navy .ed-reviews__card { background: rgba(255,255,255,.06); } .ed-reviews__mark { position: absolute; top: 8px; right: 22px; font-family: var(--font1,'Poppins',sans-serif); font-weight: 700; font-size: 96px; line-height: 1; color: var(--ed-sky); opacity: .14; pointer-events: none; } .ed-reviews__stars { display: inline-flex; gap: 3px; color: var(--ed-sky); margin-bottom: 18px; } .ed-reviews__stars svg { width: 18px; height: 18px; } .ed-reviews__quote { position: relative; font-size: 17px; line-height: 1.64; color: var(--ed-body-ink); margin: 0 0 26px; } .ed-on-navy .ed-reviews__quote { color: rgba(255,255,255,.9); } .ed-reviews__cite { display: flex; align-items: center; gap: 14px; } .ed-reviews__avatar { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--ed-sky); color: #fff; display: grid; place-items: center; font-family: var(--font1,'Poppins',sans-serif); font-weight: 600; font-size: 19px; } .ed-reviews__who { display: flex; flex-direction: column; } .ed-reviews__name { font-family: var(--font1,'Poppins',sans-serif); font-weight: 600; color: var(--ed-navy); } .ed-on-navy .ed-reviews__name { color: #fff; } .ed-reviews__detail { font-size: 14px; color: var(--ed-slate); } @media (max-width: 991px) { .ed-reviews__grid { grid-template-columns: 1fr; max-width: 560px; gap: 24px; } .ed-reviews__grid .ed-reviews__card:nth-child(2) { transform: none; } } /* ---- Wave Callout (RLE-style band) -------------------------------------- */ .ed-callout { position: relative; overflow: hidden; text-align: center; padding: 116px 0; } .ed-callout__inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; } .ed-callout .ed-eyebrow { margin-bottom: 18px; } .ed-callout__heading { font-family: var(--font1,'Poppins',sans-serif); font-weight: 600; font-size: 42px; line-height: 1.16; color: var(--ed-navy); margin: 0 0 18px; letter-spacing: .005em; } .ed-callout__em { color: var(--ed-sky); } .ed-callout__sub { font-size: 19px; line-height: 1.6; color: var(--ed-slate); max-width: 620px; margin: 0 auto 34px; } .ed-callout__btns { display: flex; flex-direction: column; align-items: center; gap: 16px; } .ed-callout__btns .ed-btn { text-transform: uppercase; letter-spacing: .08em; font-size: 14px; min-width: 300px; } /* Image style */ .ed-callout--image { color: #fff; } .ed-callout--image .ed-callout__media { position: absolute; inset: 0; z-index: 0; } .ed-callout--image .ed-callout__media img { width: 100%; height: 100%; object-fit: cover; } .ed-callout--image .ed-callout__scrim { position: absolute; inset: 0; background: rgba(14,35,56,.72); } .ed-callout--image .ed-callout__heading { color: #fff; } .ed-callout--image .ed-callout__sub { color: rgba(255,255,255,.85); } /* Navy style */ /* Sky (tertiary) background — highlighted words in primary (navy) */ .ed-callout.ed-on-sky { background: var(--tertiary); } .ed-callout.ed-on-sky .ed-eyebrow { color: rgba(255,255,255,.9); } .ed-callout.ed-on-sky .ed-callout__heading { color: #fff; } .ed-callout.ed-on-sky .ed-callout__em { color: var(--primary); } .ed-callout.ed-on-sky .ed-callout__sub { color: rgba(255,255,255,.92); } .ed-callout.ed-on-navy .ed-callout__heading { color: #fff; } .ed-callout.ed-on-navy .ed-callout__btns .ed-btn--navy { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); } .ed-callout.ed-on-navy .ed-callout__btns .ed-btn--navy:hover { background: #fff; color: var(--ed-navy); border-color: #fff; } @media (max-width: 767px) { .ed-callout { padding: 72px 0; } .ed-callout__heading { font-size: 28px; } .ed-callout__btns .ed-btn { min-width: 0; width: 100%; max-width: 320px; } } /* ---- Appointment CTA ----------------------------------------------------- */ .ed-appt { position: relative; overflow: hidden; background: var(--ed-navy); color: #fff; text-align: center; } .ed-appt__media { position: absolute; inset: 0; z-index: 0; } .ed-appt__media img { width: 100%; height: 100%; object-fit: cover; } .ed-appt__scrim { position: absolute; inset: 0; background: rgba(14,35,56,.82); } .ed-appt__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; } .ed-appt__heading { color: #fff; } .ed-appt__text { margin: 0 auto 30px; } .ed-appt__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ---- Dark-background descendants (explicit white; dark ink is invisible) -- */ .ed-on-navy .ed-body, .ed-on-navy .ed-body p, .ed-on-navy .ed-body li, .ed-splitband.ed-on-navy .ed-body, .ed-splitband.ed-on-navy .ed-body p { color: rgba(255,255,255,.85); } .ed-appt .ed-appt__text { color: rgba(255,255,255,.9); } /* ---- Team Cards Grid (arcdoctor layout=grid) — all members, no scroll ----- */ .ed-teamgrid-block { position: relative; overflow: hidden; } .ed-teamgrid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 34px; } .ed-teamgrid[data-cols="1"] { grid-template-columns: minmax(0,340px); justify-content: center; } .ed-teamgrid[data-cols="2"] { grid-template-columns: repeat(2,1fr); max-width: 780px; margin: 0 auto; } .ed-teamgrid[data-cols="3"] { grid-template-columns: repeat(3,1fr); max-width: 1080px; margin: 0 auto; } .ed-tcard { position: relative; text-align: left; } .ed-tcard[data-ed-reveal] { transition-delay: var(--d, 0ms); } .ed-tcard__media { position: relative; margin-bottom: 24px; } .ed-tcard__media::before { content: ""; position: absolute; left: -14px; bottom: -14px; width: 72%; height: 78%; border: 2px solid var(--ed-sky); border-radius: 190px 190px 18px 18px; opacity: .42; z-index: 0; transition: transform .35s ease, opacity .35s ease; } .ed-tcard__media .ed-team__arc { position: relative; z-index: 1; aspect-ratio: 4/5; border-radius: 200px 200px 18px 18px; box-shadow: 0 26px 56px -32px rgba(14,35,56,.5); } .ed-tcard__role { display: block; margin-bottom: 6px; } .ed-tcard__name { font-family: var(--font1,'Poppins',sans-serif); font-weight: 600; font-size: 22px; line-height: 1.18; color: var(--ed-navy); margin: 0 0 9px; } .ed-tcard__line { font-size: 15.5px; line-height: 1.5; color: var(--ed-navy); opacity: .72; font-style: italic; margin: 0 0 12px; } .ed-tcard__link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font1,'Poppins',sans-serif); font-weight: 600; font-size: 14px; letter-spacing: .02em; color: var(--ed-sky); text-decoration: none; transition: gap .2s ease, color .2s ease; } .ed-tcard__link:hover { color: var(--ed-sky-dark); gap: 11px; } .ed-tcard:hover .ed-tcard__media::before { transform: translate(4px, 4px); opacity: .68; } @media (max-width: 1100px) { .ed-teamgrid, .ed-teamgrid[data-cols="4"], .ed-teamgrid[data-cols="3"] { grid-template-columns: repeat(2,1fr); gap: 34px 28px; max-width: 720px; margin: 0 auto; } } @media (max-width: 560px) { .ed-teamgrid, .ed-teamgrid[data-cols="4"], .ed-teamgrid[data-cols="3"], .ed-teamgrid[data-cols="2"] { grid-template-columns: minmax(0,320px); justify-content: center; } } /* ---- Team Cards — DETAILED variant (full bios, e.g. Meet the Team) -------- Portrait in col 1; all text wrapped in .ed-tcard__content as a single col-2 cell so the name/quote/bio stack beside the photo, top-aligned with it. */ .ed-tcard__bio { display: none; } .ed-team-detailed .ed-teamgrid, .ed-team-detailed .ed-teamgrid[data-cols="4"], .ed-team-detailed .ed-teamgrid[data-cols="3"], .ed-team-detailed .ed-teamgrid[data-cols="2"] { grid-template-columns: repeat(2,1fr); gap: 52px 44px; max-width: 1120px; margin: 0 auto; } .ed-team-detailed .ed-tcard { display: grid; grid-template-columns: 230px 1fr; column-gap: 34px; align-items: start; text-align: left; } .ed-team-detailed .ed-tcard__media { margin-bottom: 0; max-width: 230px; } .ed-team-detailed .ed-tcard__content { min-width: 0; padding-top: 6px; } .ed-team-detailed .ed-tcard__role { margin-top: 0; } .ed-team-detailed .ed-tcard__name { margin: 6px 0 8px; } .ed-team-detailed .ed-tcard__line { margin-bottom: 10px; } .ed-team-detailed .ed-tcard__bio { display: block; font-size: 15px; line-height: 1.6; color: var(--ed-slate); margin: 0; } .ed-team-detailed .ed-tcard__bio p { margin: 0 0 .6em; } .ed-team-detailed .ed-tcard__bio p:last-child { margin-bottom: 0; } /* Tighten the lead-in gap above the team + let the texture fill the section */ .ed-teamgrid-block.ed-team-detailed { padding-top: 40px; } .ed-team-detailed .ed-team__texture { top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } @media (max-width: 991px) { .ed-team-detailed .ed-teamgrid, .ed-team-detailed .ed-teamgrid[data-cols="4"], .ed-team-detailed .ed-teamgrid[data-cols="3"], .ed-team-detailed .ed-teamgrid[data-cols="2"] { grid-template-columns: minmax(0,600px); justify-content: center; } } @media (max-width: 560px) { .ed-team-detailed .ed-tcard { grid-template-columns: 1fr; row-gap: 18px; justify-items: center; text-align: center; } .ed-team-detailed .ed-tcard__media { max-width: 230px; } .ed-team-detailed .ed-tcard__content { padding-top: 0; } } /* ---- Team Grid — auto-listed People CPT, centered flex grid --------------- */ /* Flexbox (not CSS grid) so a partial last row centers: 3 on top, 2 centered below. */ .ed-peoplegrid-block { position: relative; overflow: hidden; padding: 88px 0; } .ed-peoplegrid-block.ed-on-surface { background: var(--ed-surface); } .ed-peoplegrid-block .ed-team__head { text-align: center; max-width: 760px; margin: 0 auto 56px; } .ed-peoplegrid__intro { margin-top: 12px; } .ed-peoplegrid { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 52px 40px; max-width: 1300px; margin: 0 auto; } .ed-peoplegrid > .ed-tcard { flex: 0 1 calc((100% - 80px) / 3); max-width: 400px; text-align: center; } .ed-peoplegrid[data-cols="2"] > .ed-tcard { flex-basis: calc((100% - 40px) / 2); max-width: 460px; } .ed-peoplegrid[data-cols="4"] { max-width: 1440px; } .ed-peoplegrid[data-cols="4"] > .ed-tcard { flex-basis: calc((100% - 120px) / 4); } /* center the card's own contents (arc accent stays left-anchored to the image) */ .ed-peoplegrid .ed-tcard__media { display: inline-block; width: 100%; max-width: 300px; } .ed-peoplegrid .ed-tcard__link { justify-content: center; } @media (max-width: 991px) { .ed-peoplegrid-block { padding: 64px 0; } .ed-peoplegrid, .ed-peoplegrid[data-cols="3"], .ed-peoplegrid[data-cols="4"] { gap: 44px 32px; max-width: 760px; } .ed-peoplegrid > .ed-tcard, .ed-peoplegrid[data-cols="4"] > .ed-tcard { flex-basis: calc((100% - 32px) / 2); max-width: 360px; } } @media (max-width: 560px) { .ed-peoplegrid > .ed-tcard, .ed-peoplegrid[data-cols="2"] > .ed-tcard, .ed-peoplegrid[data-cols="4"] > .ed-tcard { flex-basis: 100%; max-width: 320px; } } /* ---- Service Cards — image cards linking to internal pages ---------------- */ .ed-servicecards { } .ed-servicecards__head { text-align: center; max-width: 720px; margin: 0 auto 52px; } .ed-servicecards__sub { margin-top: 6px; } .ed-servicecards__grid { display: grid; gap: 34px; } .ed-servicecards__grid[data-cols="2"] { grid-template-columns: repeat(2,1fr); max-width: 900px; margin: 0 auto; } .ed-servicecards__grid[data-cols="3"] { grid-template-columns: repeat(3,1fr); } .ed-scard { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; text-decoration: none; box-shadow: 0 30px 60px -42px rgba(14,35,56,.45); border: 1px solid var(--ed-line); transition: transform .3s ease, box-shadow .3s ease; } .ed-scard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--ed-sky); z-index: 2; } a.ed-scard:hover { transform: translateY(-6px); box-shadow: 0 40px 74px -40px rgba(14,35,56,.5); } .ed-scard__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--ed-surface); } .ed-scard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } a.ed-scard:hover .ed-scard__media img { transform: scale(1.05); } .ed-scard__body { display: flex; flex-direction: column; flex: 1; padding: 28px 28px 30px; } .ed-scard__title { font-family: var(--font1,'Poppins',sans-serif); font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--ed-navy); margin: 0 0 12px; } .ed-scard__text { font-size: 16px; line-height: 1.6; color: var(--ed-slate); margin: 0 0 20px; } .ed-scard__link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font1,'Poppins',sans-serif); font-weight: 600; font-size: 14px; letter-spacing: .04em; color: var(--ed-sky); transition: gap .2s ease; } a.ed-scard:hover .ed-scard__link { gap: 12px; color: var(--ed-sky-dark); } @media (max-width: 991px) { .ed-servicecards__grid[data-cols="3"] { grid-template-columns: repeat(2,1fr); } } @media (max-width: 640px) { .ed-servicecards__grid[data-cols="2"], .ed-servicecards__grid[data-cols="3"] { grid-template-columns: minmax(0,420px); justify-content: center; } } /* ========================================================================== Gravity Forms — brand skin (GF 2.9 orbital theme ships a generic blue). Recolor the theme's CSS custom properties + hard-override the submit button so every form matches the Eye Doctor palette. High specificity + !important is required to beat GF's own framework styles. ========================================================================== */ .gform_wrapper.gform-theme--framework, .gform_wrapper { --gf-color-primary: var(--ed-sky, #3E9BC4); --gf-color-primary-rgb: 62,155,196; --gf-color-primary-contrast: #fff; --gf-color-primary-darker: var(--ed-sky-dark, #2E7DA0); --gf-color-primary-lighter: var(--ed-sky, #3E9BC4); --gf-ctrl-btn-bg-color-primary: var(--ed-navy, #002048); --gf-ctrl-btn-bg-color-hover-primary: var(--ed-sky, #3E9BC4); } /* Submit button → brand navy pill, sky on hover (matches site buttons) */ .gform_wrapper .gform_footer input[type="submit"], .gform_wrapper .gform_footer button[type="submit"], .gform_wrapper .gform_footer .gform_button, .gform_wrapper .gform-footer .gform_button, .gform_wrapper button.gform_button { background: var(--ed-navy, #002048) !important; border-color: var(--ed-navy, #002048) !important; color: #fff !important; border-radius: 999px !important; padding: 14px 34px !important; font-family: var(--font1, 'Poppins', sans-serif) !important; font-weight: 600 !important; letter-spacing: .02em !important; transition: background .2s, border-color .2s, transform .15s !important; } .gform_wrapper .gform_footer input[type="submit"]:hover, .gform_wrapper .gform_footer button[type="submit"]:hover, .gform_wrapper .gform_footer .gform_button:hover, .gform_wrapper button.gform_button:hover { background: var(--ed-sky, #3E9BC4) !important; border-color: var(--ed-sky, #3E9BC4) !important; color: #fff !important; transform: translateY(-1px); } /* Field focus ring on-brand */ .gform_wrapper input:focus, .gform_wrapper textarea:focus, .gform_wrapper select:focus { border-color: var(--ed-sky, #3E9BC4) !important; box-shadow: 0 0 0 3px rgba(62,155,196,.18) !important; outline: none !important; } /* Tighter vertical rhythm — GF's orbital theme ships a 40px row gap. !important is required to beat the framework theme's own tokens. */ .gform_wrapper .gform_fields { row-gap: 18px !important; } .gform_wrapper .gfield { margin-top: 0 !important; margin-bottom: 0 !important; } .gform_wrapper .gfield_label { margin-bottom: 6px !important; } .gform_wrapper .gform_footer, .gform_wrapper .gform-footer { margin-top: 22px !important; padding-top: 0 !important; } /* Inputs on-brand + comfortable height */ .gform_wrapper .ginput_container input, .gform_wrapper .ginput_container textarea { border: 1px solid var(--ed-line) !important; border-radius: 10px !important; padding: 12px 14px !important; font-family: var(--font2, 'Figtree', sans-serif) !important; } .gform_wrapper .gfield_label { font-family: var(--font1, 'Poppins', sans-serif) !important; color: var(--ed-navy) !important; font-weight: 600 !important; } /* ========================================================================== PARENT DEVQ UTILITY BLOCKS — EYE-DOCTOR SKIN The internal pages compose several generic DevQ parent blocks (content, faq, featureslist, process, cards, banner, contactsplit, map) whose own inline