/* Richard Suckling Optometrists - static rebuild of the Wix site (www.suckling.co.nz).
Desktop values are the live site's measurements at 1440px wide.
Below 768px the layout follows Wix's separate 320px mobile design, scaled by --m. */
/* ---------- Fonts ----------
The live site uses Brandon Grotesque Light (headings) and Avenir LT 35 Light (body),
licensed to Wix for Wix-hosted sites only. These are free (OFL) stand-ins, tuned to the
same widths, line breaks and baseline. To use licensed webfonts instead, add their
@font-face rules, put them first in --f-head / --f-body and set --head-ls to 0. */
@font-face {
font-family: "RS Heading";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../fonts/josefin-sans-300-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
ascent-override: 97%;
descent-override: 31%;
line-gap-override: 0%;
}
@font-face {
font-family: "RS Heading";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../fonts/josefin-sans-300-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
ascent-override: 97%;
descent-override: 31%;
line-gap-override: 0%;
}
@font-face {
font-family: "RS Body";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../fonts/nunito-sans-300-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
ascent-override: 94%;
descent-override: 25%;
line-gap-override: 0%;
}
@font-face {
font-family: "RS Body";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../fonts/nunito-sans-300-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
ascent-override: 94%;
descent-override: 25%;
line-gap-override: 0%;
}
/* ---------- Tokens ---------- */
:root {
--navy: #102f43;
--offwhite: #fbfcfc;
--mist: #dee6e6;
--sky: rgba(165, 206, 233, 0.8);
--hover: #1a4c6c;
--active-mobile: #0b5c94;
--f-head: "RS Heading", "Brandon Grotesque", sans-serif;
--f-body: "RS Body", "Avenir LT Std", "Avenir", sans-serif;
--head-ls: -0.025em;
--m: 1px; /* mobile scale unit, set below 768px */
}
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
background: var(--offwhite);
color: var(--navy);
font-family: var(--f-body);
font-weight: 300;
font-size: 18px;
line-height: 1.75;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
h1, h2, h3, p, ul, figure { margin: 0; }
h1, h2, h3, .f-head {
font-family: var(--f-head);
font-weight: 300;
letter-spacing: var(--head-ls);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a.u, .rt a.u { text-decoration: underline; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--active-mobile); outline-offset: 2px; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--navy); color: var(--offwhite); padding: 8px 14px; }
.skip-link:focus { top: 8px; }
/* Text styles (Wix theme fonts) */
.t-h1 { font-size: 50px; line-height: 1.34; }
.t-h2 { font-size: 28px; line-height: 1.375; }
.t-body { font-size: 18px; line-height: 1.75; }
.t-lead { font-size: 20px; line-height: 1.67; }
.c-light { color: var(--offwhite); }
.c-navy { color: var(--navy); }
.center { text-align: center; }
.left { text-align: left; }
.rt ul { margin: 0 0 0 0.5em; padding: 0; text-align: left; }
.rt li { margin-left: 1.3em; }
/* ---------- Live-site line breaks ----------
tools/build.js inserts
/
where the live Wix site wraps
each paragraph (desktop / mobile), and marks those paragraphs lb-d / lb-m. Wrapping is turned
off there so text breaks exactly as live; between 768px and 1099px, where some columns are
narrower than on live, text wraps normally. */
@media (min-width: 768px) { .br-m { display: none; } }
@media (max-width: 1099px) { .br-d { display: none; } }
@media (min-width: 1100px) { .lb-d { white-space: nowrap; } }
@media (max-width: 767px) { .lb-m { white-space: nowrap; } }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 45px;
padding: 0 20px;
border: 1px solid currentColor;
border-radius: 100px;
font-family: var(--f-body);
font-weight: 300;
font-size: 18px;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: transparent;
transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.btn--call { font-size: 15px; color: var(--navy); border-color: var(--navy); }
.btn--call:hover { background: var(--navy); color: var(--offwhite); }
.btn--light { color: var(--offwhite); border-color: var(--offwhite); }
.btn--light:hover { background: var(--offwhite); border-color: transparent; color: var(--navy); }
/* ---------- Header ---------- */
.site-header { position: relative; z-index: 20; height: 200px; background: var(--offwhite); }
.site-header__logo { position: absolute; top: 77px; left: 50%; width: 164px; height: 87px; transform: translateX(-50%); }
.site-header__logo img { width: 100%; height: 100%; object-fit: contain; }
.site-header__call { position: absolute; top: 23px; right: clamp(20px, 5.55vw, 79px); height: 45px; }
.nav {
position: absolute;
top: 30px;
left: clamp(20px, 5.6vw, 80px);
z-index: 2; /* dropdown must sit above the logo */
width: min(818px, calc(100vw - clamp(20px, 5.6vw, 80px) - clamp(20px, 5.55vw, 79px) - 128px));
height: 30px;
}
.nav__list { display: flex; justify-content: flex-end; list-style: none; margin: 0; padding: 0; height: 30px; }
.nav__item { position: relative; flex: none; }
.nav__item[hidden] { display: none; }
.nav__link {
display: block;
padding: 0 10px;
font-size: 18px;
line-height: 30px;
white-space: nowrap;
color: var(--navy);
background: none;
border: 0;
cursor: pointer;
transition: color 0.4s ease;
}
.nav__link:hover, .nav__link.is-current, .nav__more.is-open > .nav__link { color: var(--hover); }
.nav__sub {
position: absolute;
top: 100%;
right: 0;
display: none;
min-width: 100%;
list-style: none;
margin: 0;
padding: 6px 0;
background: #fff;
box-shadow: 0 4px 14px rgba(16, 47, 67, 0.12);
}
.nav__more:hover .nav__sub, .nav__more:focus-within .nav__sub, .nav__more.is-open .nav__sub { display: block; }
.nav__sub .nav__link { text-align: right; }
.burger, .mnav { display: none; }
/* ---------- Footer ---------- */
.site-footer { background: var(--mist); color: var(--navy); text-align: center; font-size: 15px; line-height: 1.875; }
.site-footer__body { padding-top: 38px; height: 252px; }
.site-footer__social { display: inline-block; margin-top: 21px; width: 20px; height: 20px; vertical-align: top; }
.site-footer__social svg { display: block; width: 100%; height: 100%; }
.site-footer__bar { height: 48px; padding-top: 11px; background: var(--offwhite); font-size: 14px; line-height: 1.79; }
/* ---------- Heroes ---------- */
.hero { position: relative; overflow: hidden; background: var(--navy); height: 480px; display: flex; align-items: flex-start; justify-content: center; padding-top: 201px; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.75; }
.hero__img--solid { opacity: 1; }
/* Safety glasses: Wix crops this photo around a focal point 39% down (fill, fp 0.5/0.39).
Keep that point centred in the 480px hero: offset = 240px - 0.39 x photo height, where the
photo height is 75.05% of the hero width (457x343 original), clamped to the photo's edges. */
.hero--safety { container-type: inline-size; }
.hero__img--safety { object-position: 50% clamp(calc(480px - 75.05cqw), calc(240px - 29.27cqw), 0px); }
.hero--cl { height: 520px; padding-top: 226px; }
.hero__overlay { position: absolute; inset: 0; background: rgba(251, 252, 252, 0.4); }
.hero__title { position: relative; width: 940px; max-width: calc(100% - 40px); text-align: center; color: var(--offwhite); }
.hero__title--dark { color: var(--navy); width: 820px; }
/* Home hero: Wix "BgParallax" - the image moves at 20% of scroll speed (site.js sets the transform). */
.hero-home { position: relative; height: 820px; background: var(--navy); clip-path: inset(0); display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* Sized like Wix: max(section height, window height). 40px = its offset at the top of the page. */
.hero-home__img { position: fixed; top: 0; left: 0; width: 100%; height: max(100vh, 820px); object-fit: cover; opacity: 0.75; transform: translate3d(0, 40px, 0); will-change: transform; }
/* 88px on Wix; 86.6px makes the stand-in font's capitals the same height as Brandon's, and the word space matches too. */
.hero-home__title { position: relative; width: 820px; max-width: calc(100% - 40px); font-size: 86.6px; line-height: 105.6px; word-spacing: -0.065em; text-align: center; color: var(--offwhite); }
.hero-home__sub { position: relative; width: 820px; max-width: calc(100% - 40px); margin-top: 28px; font-family: var(--f-head); letter-spacing: var(--head-ls); font-size: 22px; line-height: 1.41; text-align: center; color: var(--offwhite); }
/* About hero: image with a white panel */
.hero-about { position: relative; height: 680px; background: var(--navy); display: flex; justify-content: center; align-items: flex-start; padding-top: 201px; }
.hero-about__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-about__box { position: relative; width: 940px; max-width: calc(100% - 40px); height: 247px; padding: 51px 20px 0; background: var(--offwhite); text-align: center; }
.hero-about__box h1 { margin: 0 auto; max-width: 810px; }
.hero-about__box p { margin: 25px auto 0; max-width: 810px; }
/* ---------- Generic navy content band ---------- */
.band { background: var(--navy); color: var(--offwhite); }
.band--light { background: var(--offwhite); color: var(--navy); }
.stack { width: 780px; max-width: calc(100% - 40px); margin: 0 auto; }
.stack--wide { width: 940px; }
.stack > h2 + p, .stack > h3 + p, .stack > h2 + .rt, .stack > h3 + .rt { margin-top: 27px; }
.media { width: 940px; max-width: calc(100vw - 40px); height: 450px; margin-left: 50%; transform: translateX(-50%); object-fit: cover; }
/* Eye examinations */
.eye { padding: 122px 0 60px; }
.eye .media { margin-top: 58px; }
.eye .media + h2 { margin-top: 62px; }
.eye .media--short { height: 445px; }
.cta { height: 340px; padding-top: 62px; text-align: center; }
.cta .btn { margin-top: 59px; }
/* Lenses */
.lenses-a { padding: 122px 0 139px; }
.lenses-b { padding: 122px 0 130px; }
.gap-67 { margin-top: 67px; }
.gap-69 { margin-top: 69px; }
.gap-70 { margin-top: 70px; }
.gap-72 { margin-top: 72px; }
.gap-81 { margin-top: 81px; }
.band-img { height: 480px; overflow: hidden; background: var(--navy); }
.band-img img { width: 100%; height: 100%; object-fit: cover; }
/* Contact lenses / safety glasses */
.cl { padding: 122px 0 210px; }
.sg { padding: 122px 0 128px; }
/* Frames */
.frames { padding: 120px 0 123px; }
.frames__grid { display: grid; grid-template-columns: repeat(2, 460px); column-gap: 60px; justify-content: center; }
.frames__col img { width: 460px; max-width: 100%; height: 395px; object-fit: cover; }
.frames__text { margin-top: 58px; text-align: center; }
/* ---------- Home ---------- */
.home-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--navy); color: var(--offwhite); }
.home-contact__info { width: 460px; max-width: calc(100% - 40px); margin: 61px auto 0; text-align: center; }
.home-contact__info .hc-hours { margin-top: 25px; }
.home-contact__info .hc-address { margin-top: 22px; }
.home-contact__info .hc-links { margin-top: 24px; }
.home-contact__info .hc-phone { margin-top: 23px; }
.home-contact__form { width: 460px; max-width: calc(100% - 40px); margin: 60px auto 0; padding-bottom: 169px; }
.home-contact__map { grid-column: 1 / -1; height: 407px; background: #e5e3df; }
.home-contact__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.home-contact .h-contact { font-size: 50px; line-height: 1.34; }
.features { height: 400px; padding-top: 103px; list-style: none; margin: 0; background: var(--navy); color: var(--offwhite); text-align: center; }
/* Forms (Wix "underline" inputs) */
.form { position: relative; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form__full { grid-column: 1 / -1; }
.field {
display: block;
width: 100%;
height: 42px;
padding: 0 12px;
border: 0;
border-bottom: 1px solid currentColor;
border-radius: 0;
background: transparent;
color: inherit;
font-family: var(--f-body);
font-weight: 300;
font-size: 15px;
line-height: 1.875;
transition: border-color 0.5s ease;
-webkit-appearance: none;
appearance: none;
}
.field::placeholder { color: inherit; opacity: 1; }
.field:focus { outline: none; border-bottom-width: 1px; }
.field:focus-visible { outline: 1px solid currentColor; outline-offset: 0; }
textarea.field { height: 126px; padding-top: 10px; resize: none; }
.form__submit {
display: block;
width: 100%;
height: 50px;
margin-top: 37px;
border: 0;
border-radius: 0;
font-family: var(--f-body);
font-weight: 300;
font-size: 18px;
cursor: pointer;
transition: background-color 0.4s ease, color 0.4s ease;
}
.form--on-navy { color: var(--offwhite); }
.form--on-navy .form__submit { background: var(--offwhite); color: var(--navy); }
.form--on-navy .form__submit:hover { background: rgba(251, 252, 252, 0.6); color: var(--offwhite); }
.form--on-white { color: var(--navy); }
.form--on-white .form__submit { background: var(--navy); color: var(--offwhite); margin-top: 30px; }
.form--on-white .form__submit:hover { background: rgba(16, 47, 67, 0.6); }
.form__status { position: absolute; left: 0; right: 0; top: calc(100% + 10px); text-align: center; font-size: 18px; line-height: 1.2; min-height: 22px; }
.form__status[data-state="error"] { color: #ff4040; }
.form__noscript { margin-top: 40px; font-size: 15px; text-align: center; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field:user-invalid { border-bottom-color: #ff4040; }
/* ---------- About ---------- */
.team { padding: 83px 0 10px; background: var(--offwhite); color: var(--navy); }
.team__title { font-size: 56px; line-height: 81px; text-align: center; }
.team__rule { width: 30px; height: 0; margin: 13px auto 0; border-top: 2.4px solid var(--navy); }
.team__grid { display: flex; justify-content: center; align-items: flex-start; gap: 60px; margin-top: 55px; }
.team__col { display: flex; flex-direction: column; gap: 60px; width: 403px; }
.card { width: 403px; padding: 8px 0 10px; background: var(--sky); }
.card__img { width: 100%; height: 334px; object-fit: cover; }
.card__body { padding: 37px 34px 0 31px; }
.card__role { font-size: 16px; line-height: 25px; }
.card__name { font-size: 20px; line-height: 29px; }
.card__bio { margin-top: 30px; font-size: 18px; line-height: 1.75; }
.card__bio--tight { line-height: 1.5; }
.card__bio p { min-height: 1lh; }
/* Sarah's card on Wix desktop: role 28px / name 27px, which makes it 1px taller than the others. */
@media (min-width: 768px) {
.card--sarah .card__role { line-height: 28px; }
.card--sarah .card__name { line-height: 27px; }
}
/* ---------- Contact page ---------- */
.contact { padding: 80px 0 325px; background: var(--navy); }
.contact__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: max(min(980px, 100%), 100% - 160px); margin: 0 auto; } /* as live: 80px either side, never under 980px */
.contact__col { height: 645px; background: var(--offwhite); color: var(--navy); }
.contact__col--info { padding-top: 61px; text-align: center; }
.contact__col--form { padding-top: 75px; }
.contact__info { width: min(460px, 100% - 30px); margin: 0 auto; }
.contact__info .ci-address { margin-top: 20px; }
.contact__info .ci-links { margin-top: 24px; }
.contact__info .ci-phone { margin-top: 23px; }
.contact__info .ci-social { display: block; width: 26px; height: 26px; margin: 20px auto 0; }
.contact__info .ci-social svg { display: block; width: 100%; height: 100%; }
.contact__form { width: min(460px, 100% - 30px); margin: 0 auto; }
.contact__form .form__grid { grid-template-columns: 1fr; }
.contact__map { width: max(min(980px, 100%), 100% - 160px); height: 470px; margin: 0 auto; background: #e5e3df; }
.contact__map iframe { display: block; width: 100%; height: 100%; border: 0; }
/* ---------- Products & services ---------- */
.services { padding: 121px 0 120px; background: var(--navy); color: var(--offwhite); text-align: center; }
.services__lead { margin-top: 24px; }
.services__list { display: grid; row-gap: 60px; justify-content: center; margin-top: 135px; }
.service { display: grid; grid-template-columns: 460px 460px; column-gap: 20px; align-items: center; }
.service img { width: 460px; height: 420px; object-fit: cover; }
.service--flip img { order: 2; }
.service__text p { margin-top: 31px; }
.service__text .btn { margin-top: 55px; }
/* ---------- 404 ---------- */
.notfound { padding: 150px 20px 200px; background: var(--navy); color: var(--offwhite); text-align: center; }
.notfound p { margin-top: 27px; }
.notfound .btn { margin-top: 40px; }
/* ---------- Hero photo load-in (Wix blurred placeholders) ----------
On first load Wix shows each hero as a tiny, heavily blurred thumbnail until its script
swaps in the real photo, an instant swap (in Chrome, Edge and Safari; Firefox gets no
placeholders, so the head script skips this there). Here the head script sets .ph-in on
straight away and removes it once the hero photo is decoded (at least 0.6s in), or when
a page transition's fade-in ends. The blur is a backdrop-filter layer over the hero, so
it keeps clean edges and blurs the hero as drawn: crop, tint and parallax all carry
through. Headings sit above it and stay crisp. */
:root { --ph-blur: 24px; }
.ph-in :is(.hero, .hero-home, .hero-about)::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
-webkit-backdrop-filter: blur(var(--ph-blur)); backdrop-filter: blur(var(--ph-blur));
}
.hero__title, .hero-home__title, .hero-home__sub, .hero-about__box { z-index: 1; }
/* ---------- Page transitions (Wix "OutIn") ----------
Cross-document view transition with the live site's own values (from its stylesheet):
the page content fades out over 0.35s (ease-out), then the new page fades in over 0.35s
after a 0.35s delay (ease-in: it stays near white, then comes up quickly); header and
footer stay put. The head script holds the fade-in until the new hero photo is ready.
On Wix the new page's photos arrive as heavily blurred placeholders that swap to sharp
about 1.4s in (text stays crisp), so photos here start blurred too: the head script adds
.vt-in (and .ph-in for the hero) on pagereveal and removes both when that time is up.
Browsers without view-transition support just navigate normally. */
:root { --vt-out: 0.35s; --vt-in: 0.35s; --vt-in-delay: 0.35s; --vt-img-blur: 24px; }
@view-transition { navigation: auto; }
:root:active-view-transition { view-transition-name: none; }
:root:active-view-transition .site-header { view-transition-name: header-group; }
:root:active-view-transition .site-footer { view-transition-name: footer-group; }
:root:active-view-transition main { view-transition-name: page-group; }
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
::view-transition-old(page-group) { animation: var(--vt-out) cubic-bezier(0.22, 1, 0.36, 1) both out-in-old; }
::view-transition-new(page-group) { animation: var(--vt-in) cubic-bezier(0.64, 0, 0.78, 0) var(--vt-in-delay) both out-in-new; }
@keyframes out-in-old { to { opacity: 0; } }
@keyframes out-in-new { from { opacity: 0; } }
/* Other photos on the incoming page: blurred while .vt-in is set. The new-page snapshot is
live, so this shows through the fade. (Heroes use the .ph-in layer above.) */
.vt-in main img:not(.hero__img, .hero-home__img, .hero-about__img) { filter: blur(var(--vt-img-blur)); }
/* Firefox has no cross-document view transitions; there Wix swaps pages in with its own
script, using the same fades on the page content (no blurred placeholders). The head
script's pageFades() sets these around ordinary page loads. */
.pt-out main { opacity: 0; transition: opacity var(--vt-out) cubic-bezier(0.22, 1, 0.36, 1); }
.pt-hold main { opacity: 0; }
.pt-fade main { transition: opacity var(--vt-in) cubic-bezier(0.64, 0, 0.78, 0); }
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
.vt-in main img:not(.hero__img, .hero-home__img, .hero-about__img) { filter: none; }
}
/* ---------- Entrance animation (Wix FadeIn) ---------- */
.js .fade-in { opacity: 0; transition: opacity var(--dur, 800ms) ease; }
.js .fade-in.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.js .fade-in { opacity: 1; transition: none; }
}
/* ---------- Narrow desktops ---------- */
@media (max-width: 1100px) and (min-width: 768px) {
.frames__grid { grid-template-columns: repeat(2, minmax(0, 460px)); column-gap: 40px; padding: 0 20px; }
.service { grid-template-columns: minmax(0, 460px) minmax(0, 460px); padding: 0 20px; }
.service img { width: 100%; }
}
@media (max-width: 1400px) and (min-width: 768px) {
.team__grid[data-cols="2"] .team__col { width: min(403px, calc(50vw - 50px)); }
.team__grid[data-cols="2"] .card { width: 100%; }
}
/* The team cards stay 403px wide down to 906px, so live's desktop line breaks still fit. */
@media (max-width: 1099px) and (min-width: 906px) {
.team .br-d { display: revert; }
.team .lb-d { white-space: nowrap; }
}
/* =====================================================================
Mobile: Wix's 320px layout, scaled to the screen (capped at 1.35x).
===================================================================== */
@media (max-width: 767px) {
:root { --m: min(calc(100vw / 320), 1.35px); }
body { font-size: calc(15 * var(--m)); }
.t-h1 { font-size: calc(26 * var(--m)); }
.t-h2 { font-size: calc(22 * var(--m)); }
.t-body { font-size: calc(15 * var(--m)); }
.t-lead { font-size: calc(18 * var(--m)); }
.m-left { text-align: left; }
.m-center, .m-center .rt ul { text-align: center; }
.m-hide { display: none !important; }
.page-wrap { width: calc(320 * var(--m)); max-width: 100%; margin: 0 auto; }
/* Header */
.site-header { height: calc(120 * var(--m)); }
.site-header__logo { top: calc(20 * var(--m)); width: calc(73 * var(--m)); height: calc(40 * var(--m)); }
.nav, .site-header__call { display: none; }
.burger {
display: block;
position: absolute;
top: calc(25 * var(--m));
right: calc(15 * var(--m));
z-index: 40;
width: calc(40 * var(--m));
height: calc(40 * var(--m));
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.burger span {
position: absolute;
left: calc(8 * var(--m));
width: calc(24 * var(--m));
height: calc(2 * var(--m));
background: var(--navy);
transition: transform 0.3s ease, opacity 0.2s ease;
}
.burger span:nth-child(1) { top: calc(11 * var(--m)); }
.burger span:nth-child(2) { top: calc(19 * var(--m)); }
.burger span:nth-child(3) { top: calc(27 * var(--m)); }
.menu-open .burger span:nth-child(1) { transform: translateY(calc(8 * var(--m))) rotate(45deg); }
.menu-open .burger span:nth-child(2) { opacity: 0; }
.menu-open .burger span:nth-child(3) { transform: translateY(calc(-8 * var(--m))) rotate(-45deg); }
.mnav {
display: block;
position: fixed;
inset: 0;
z-index: 30;
overflow-y: auto;
background: var(--offwhite);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.menu-open .mnav { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.menu-open { overflow: hidden; }
.mnav__list { list-style: none; margin: 0; padding: calc(75 * var(--m)) 0 0; text-align: center; }
.mnav__list a {
display: block;
width: calc(188 * var(--m));
margin: 0 auto;
font-size: calc(20 * var(--m));
line-height: calc(50 * var(--m));
color: var(--navy);
}
.mnav__list a.is-current { color: var(--active-mobile); }
.mnav__call { display: flex; justify-content: center; margin-top: calc(20 * var(--m)); padding-bottom: calc(40 * var(--m)); }
.mnav__call .btn { height: calc(45 * var(--m)); padding: 0 calc(20 * var(--m)); font-size: calc(15 * var(--m)); }
/* Buttons */
.btn { height: calc(45 * var(--m)); padding: 0 calc(18 * var(--m)); font-size: calc(16 * var(--m)); }
/* Footer */
.site-footer { font-size: calc(14 * var(--m)); line-height: calc(26.25 * var(--m)); padding-bottom: calc(4 * var(--m)); }
.site-footer__body { height: auto; padding-top: calc(28 * var(--m)); }
.site-footer__address { margin-top: calc(13 * var(--m)); }
.site-footer__social { margin-top: calc(21 * var(--m)); width: calc(20 * var(--m)); height: calc(20 * var(--m)); }
.site-footer__bar { height: calc(32 * var(--m)); margin-top: calc(11 * var(--m)); padding-top: calc(5 * var(--m)); font-size: calc(12 * var(--m)); line-height: calc(21.5 * var(--m)); }
/* Heroes */
:root { --ph-blur: calc(9 * var(--m)); } /* Wix's mobile placeholder is a smaller thumbnail, so a lighter blur */
.hero, .hero--cl { height: calc(330 * var(--m)); align-items: center; padding-top: 0; }
.hero__img--safety { object-position: 50% 50%; }
.hero__title { width: calc(300 * var(--m)); max-width: none; }
.hero__title--dark { width: calc(300 * var(--m)); }
.hero__title.m-left { padding-right: calc(20 * var(--m)); }
.hero-home { display: block; height: auto; clip-path: none; padding-bottom: calc(21 * var(--m)); }
.hero-home__img { position: static; width: 100%; height: calc(240 * var(--m)); opacity: 0.75; transform: none; will-change: auto; }
.ph-in .hero-home::after { bottom: auto; height: calc(240 * var(--m)); } /* blur the photo only, not its edge */
.hero-home__title { width: calc(300 * var(--m)); max-width: none; margin: calc(45 * var(--m)) auto 0; font-size: calc(32 * var(--m)); line-height: 1.2; word-spacing: normal; }
.hero-home__sub { width: calc(300 * var(--m)); max-width: none; margin: calc(11 * var(--m)) auto 0; font-size: calc(20 * var(--m)); }
.hero-about { display: flex; flex-direction: column; height: auto; padding-top: 0; background: var(--offwhite); }
.hero-about__box { order: 1; width: 100%; max-width: none; height: auto; padding: calc(31 * var(--m)) 0 calc(15 * var(--m)); background: none; }
.hero-about__box h1 { max-width: none; }
.hero-about__box p { display: none; }
.hero-about__img { order: 2; position: static; height: calc(120 * var(--m)); }
.ph-in .hero-about::after { top: auto; height: calc(120 * var(--m)); }
/* Content bands */
.stack, .stack--wide { width: calc(280 * var(--m)); max-width: none; }
.stack--m300 { width: calc(300 * var(--m)); }
.stack > h2 + p, .stack > h3 + p, .stack > h2 + .rt, .stack > h3 + .rt { margin-top: calc(12 * var(--m)); }
.media { width: calc(301 * var(--m)); max-width: none; height: calc(240 * var(--m)); }
.eye { padding: calc(45 * var(--m)) 0 calc(25 * var(--m)); }
.eye .media, .eye .media--short { height: calc(240 * var(--m)); margin-top: calc(37 * var(--m)); }
.eye .media + h2 { margin-top: calc(47 * var(--m)); }
.cta { height: auto; padding: calc(22 * var(--m)) 0 calc(45 * var(--m)); }
.cta .stack { width: calc(280 * var(--m)); }
.cta .btn { margin-top: calc(12 * var(--m)); }
.lenses-a, .lenses-b, .cl, .sg { padding: calc(45 * var(--m)) 0; }
.gap-67, .gap-69, .gap-70, .gap-72, .gap-81 { margin-top: calc(44 * var(--m)); }
.cl .gap-72 { margin-top: calc(45 * var(--m)); }
.band-img { height: calc(330 * var(--m)); }
.frames { padding: calc(45 * var(--m)) 0; }
.frames__grid { display: block; width: calc(301 * var(--m)); margin: 0 auto; }
.frames__col { display: flex; flex-direction: column-reverse; }
.frames__col + .frames__col { margin-top: calc(44 * var(--m)); }
.frames__col img { width: calc(301 * var(--m)); height: calc(300 * var(--m)); margin-top: calc(37 * var(--m)); }
.frames__text { width: calc(280 * var(--m)); margin-top: 0; text-align: left; }
/* Home */
.home-contact { display: flex; flex-direction: column; align-items: center; padding: calc(22 * var(--m)) 0 calc(39 * var(--m)); }
.home-contact__info { display: contents; }
.home-contact__info > * { width: calc(300 * var(--m)); text-align: center; }
.home-contact .h-contact { order: 1; font-size: calc(26 * var(--m)); }
.home-contact .hc-hours { order: 2; margin-top: calc(20 * var(--m)); }
.home-contact__form { order: 3; width: calc(300 * var(--m)); max-width: none; margin: calc(30 * var(--m)) 0 0; padding-bottom: 0; }
.home-contact__map { order: 4; width: calc(300 * var(--m)); height: calc(235 * var(--m)); margin-top: calc(65 * var(--m)); }
.home-contact .hc-address { order: 5; margin-top: calc(21 * var(--m)); }
.home-contact .hc-links { order: 6; margin-top: calc(20 * var(--m)); }
.home-contact .hc-phone { order: 7; margin-top: calc(20 * var(--m)); }
.features { height: auto; padding: calc(72 * var(--m)) 0 calc(98 * var(--m)); }
.form__grid { grid-template-columns: 1fr; gap: calc(10 * var(--m)); }
.field { height: calc(42 * var(--m)); font-size: calc(15 * var(--m)); padding: 0 calc(12 * var(--m)); }
textarea.field { height: calc(126 * var(--m)); }
.form__submit, .form--on-white .form__submit { height: calc(50 * var(--m)); margin-top: calc(10 * var(--m)); font-size: calc(18 * var(--m)); }
.form__status { font-size: calc(18 * var(--m)); }
/* About */
.team { padding: calc(47 * var(--m)) 0 calc(11 * var(--m)); }
.team__title { font-size: calc(24 * var(--m)); line-height: calc(34 * var(--m)); }
.team__rule { margin-top: calc(18 * var(--m)); }
.team__grid { display: flex; flex-direction: column; gap: calc(20 * var(--m)); margin-top: calc(27 * var(--m)); }
.team__col { display: contents; }
.card { width: 100%; padding: calc(20 * var(--m)) calc(20 * var(--m)) calc(10 * var(--m)); }
.card[data-order="1"] { order: 1; }
.card[data-order="2"] { order: 2; }
.card[data-order="3"] { order: 3; }
.card[data-order="4"] { order: 4; }
.card__img { height: calc(206 * var(--m)); }
.card__body { padding: calc(10 * var(--m)) 0 0; }
.card__role { font-size: calc(16 * var(--m)); line-height: calc(19 * var(--m)); }
.card__name { font-size: calc(20 * var(--m)); line-height: calc(32 * var(--m)); }
/* On Wix mobile, cards 2-4 have taller role/shorter name lines than the first card. */
.card--b .card__role { line-height: calc(28 * var(--m)); }
.card--b .card__name { line-height: calc(29 * var(--m)); }
.card__bio { margin-top: calc(10 * var(--m)); font-size: calc(18 * var(--m)); }
/* Contact page */
.contact { padding: 0; background: var(--offwhite); }
.contact__cols { display: flex; flex-direction: column; align-items: center; padding: calc(45 * var(--m)) 0 0; }
.contact__col { display: contents; }
.contact__info { display: contents; }
.contact__info > * { width: calc(300 * var(--m)); }
.contact__info h1 { order: 1; }
.contact__form { order: 2; width: calc(300 * var(--m)); margin-top: calc(32 * var(--m)); }
.contact__info .ci-address { order: 3; margin-top: calc(88 * var(--m)); }
.contact__info .ci-links { order: 4; margin-top: calc(21 * var(--m)); }
.contact__info .ci-phone { order: 5; margin-top: calc(23 * var(--m)); }
.contact__info .ci-social { order: 6; width: calc(20 * var(--m)); height: calc(20 * var(--m)); margin-top: calc(20 * var(--m)); }
.contact__map { width: calc(300 * var(--m)); height: calc(220 * var(--m)); margin: calc(21 * var(--m)) auto 0; }
.contact__cols + .contact__map { margin-bottom: calc(48 * var(--m)); }
/* Products & services */
.services { padding: calc(45 * var(--m)) 0; }
.services__lead { margin-top: calc(11 * var(--m)); }
.services__list { display: block; margin-top: calc(44 * var(--m)); }
.service { display: flex; flex-direction: column; align-items: center; }
.service + .service { margin-top: calc(44 * var(--m)); }
.service img, .service--flip img { order: 0; width: calc(301 * var(--m)); height: calc(300 * var(--m)); }
.service__text { width: calc(280 * var(--m)); margin-top: calc(45 * var(--m)); }
.service__text p { margin-top: calc(12 * var(--m)); }
.service__text .btn { margin-top: calc(12 * var(--m)); }
.notfound { padding: calc(80 * var(--m)) calc(20 * var(--m)) calc(100 * var(--m)); }
}