/* =========================================================
CLEARVISION OPTICALS
INDEX CSS
LIGHT + DARK + RTL INCLUDED
========================================================= */
/* =========================================================
ROOT
========================================================= */
:root {
--blue: #2867ff;
--blue-light: #5e84ff;
--blue-dark: #102b68;
--navy: #071126;
--navy-2: #0b1733;
--dark-text: #101522;
--white: #ffffff;
--off-white: #f7f9fd;
--soft: #eef3fa;
--text: #142039;
--muted: #71809a;
--border: rgba(17, 37, 70, .12);
--header-bg: rgba(255,255,255,.86);
--footer: #071a3b;
--ease: cubic-bezier(.22,.8,.24,1);
--container: 1320px;
--header-height: 78px;
--radius-large: 70px;
}
/* =========================================================
RESET
========================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
overflow-x: clip;
}
body {
margin: 0;
padding: 0;
min-width: 320px;
font-family: "DM Sans", sans-serif;
background: var(--white);
color: var(--text);
overflow-x: clip;
transition:
background .5s ease,
color .5s ease;
}
body.no-scroll {
overflow: hidden;
}
img {
display: block;
width: 100%;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea {
font: inherit;
}
button {
border: 0;
background: none;
cursor: pointer;
}
svg {
width: 1em;
height: 1em;
}
/* =========================================================
SELECTION
========================================================= */
::selection {
background: var(--blue);
color: #fff;
}
/* =========================================================
AMBIENT BACKGROUND
========================================================= */
.ambient {
position: fixed;
width: 450px;
height: 450px;
border-radius: 50%;
pointer-events: none;
filter: blur(90px);
opacity: .15;
z-index: -5;
animation: ambientMove 14s ease-in-out infinite alternate;
}
.ambient-one {
top: 10%;
left: -220px;
background: #497aff;
}
.ambient-two {
top: 45%;
right: -240px;
background: #7c4dff;
animation-delay: -5s;
}
.ambient-three {
bottom: -200px;
left: 45%;
background: #00bcd4;
animation-delay: -8s;
}
@keyframes ambientMove {
from {
transform: translate3d(0,0,0) scale(1);
}
to {
transform: translate3d(70px,-40px,0) scale(1.15);
}
}
/* =========================================================
CUSTOM CURSOR
========================================================= */
.cursor,
.cursor-follower {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 9999;
transform: translate(-50%,-50%);
}
.cursor {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--blue);
transition:
width .25s ease,
height .25s ease,
opacity .25s ease;
}
.cursor-follower {
width: 38px;
height: 38px;
border: 1px solid rgba(40,103,255,.55);
border-radius: 50%;
transition:
width .35s var(--ease),
height .35s var(--ease),
border-color .35s ease;
}
.cursor.active {
width: 15px;
height: 15px;
}
.cursor-follower.active {
width: 65px;
height: 65px;
border-color: var(--blue);
}
/* =========================================================
HEADER
========================================================= */
.site-header {
/* Guaranteed always-visible sticky navbar */
position: -webkit-fixed !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100%;
z-index: 1000;
padding: 10px 14px;
transition:
padding .35s ease,
background .35s ease;
}
.navbar {
width: min(1380px, 100%);
min-height: 68px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
background: var(--header-bg);
border: 1px solid rgba(30,60,100,.08);
border-radius: 22px;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1000;
box-shadow:
0 12px 45px rgba(20,45,90,.08);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
transition:
background .5s ease,
box-shadow .5s ease
}
.site-header.scrolled {
padding-top: 6px;
padding-bottom: 6px;
}
.site-header.scrolled .navbar {
box-shadow:
0 18px 55px rgba(10,30,70,.13);
}
/* =========================================================
BRAND
========================================================= */
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.brand-glasses {
display: flex;
align-items: center;
gap: 3px;
}
.brand-glasses span {
width: 19px;
height: 13px;
border: 2px solid var(--blue);
border-radius: 50%;
}
.brand-glasses span:nth-child(2) {
position: relative;
}
.brand-glasses::after {
content: "";
width: 6px;
height: 2px;
background: var(--blue);
position: absolute;
transform: translateX(17px);
}
.brand-text {
display: flex;
flex-direction: column;
line-height: 1;
}
.brand-text strong {
font-family: "Manrope", sans-serif;
font-size: 16px;
font-weight: 800;
color: var(--text);
}
.brand-text strong span {
color: var(--blue);
}
.brand-text small {
margin-top: 5px;
font-size: 12px;
letter-spacing: 3px;
color: var(--muted);
}
/* =========================================================
NAV MENU
========================================================= */
.nav-menu {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
flex: 1;
}
.nav-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 46px;
padding: 0 13px;
color: #536079;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
transition:
color .3s ease,
transform .3s ease;
}
.nav-link:hover,
.nav-link.active {
color: var(--blue);
}
.nav-link.active::after {
content: "";
position: absolute;
bottom: 1px;
left: 14px;
right: 14px;
height: 2px;
border-radius: 10px;
background: var(--blue);
transform-origin: left;
animation: navLine .5s var(--ease);
}
@keyframes navLine {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.dropdown-trigger svg {
width: 13px;
height: 13px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
transition: transform .3s ease;
}
.nav-dropdown.open .dropdown-trigger svg {
transform: rotate(180deg);
}
/* =========================================================
DROPDOWN
========================================================= */
.nav-dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
top: calc(100% + 13px);
left: 50%;
width: 270px;
padding: 9px;
background: var(--white);
border: 1px solid var(--border);
border-radius: 18px;
box-shadow:
0 25px 70px rgba(10,30,70,.15);
opacity: 0;
visibility: hidden;
transform:
translate(-50%,10px)
scale(.97);
transform-origin: top center;
transition:
opacity .25s ease,
visibility .25s ease,
transform .35s var(--ease);
z-index: 20;
}
.nav-dropdown.open .dropdown-menu {
opacity: 1;
visibility: visible;
transform:
translate(-50%,0)
scale(1);
}
.dropdown-item {
display: flex;
align-items: center;
gap: 13px;
padding: 12px;
border-radius: 12px;
transition:
background .3s ease,
transform .3s ease;
}
.dropdown-item:hover {
background: var(--soft);
transform: translateX(4px);
}
.drop-number {
color: var(--blue);
font-size: 12px;
font-weight: 700;
}
.dropdown-item span:last-child {
display: flex;
flex-direction: column;
gap: 3px;
}
.dropdown-item strong {
color: var(--text);
font-size: 13px;
}
.dropdown-item small {
color: var(--muted);
font-size: 12px;
}
.active-item {
background: rgba(40,103,255,.07);
}
/* =========================================================
NAV ACTIONS
========================================================= */
.nav-actions {
display: flex;
align-items: center;
gap: 7px;
flex-shrink: 0;
}
.control-btn,
.icon-btn {
height: 40px;
border: 1px solid var(--border);
border-radius: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text);
transition:
background .3s ease,
border .3s ease,
transform .3s ease;
}
.control-btn:hover,
.icon-btn:hover {
background: var(--soft);
transform: translateY(-2px);
}
.language-btn {
padding: 0 12px;
gap: 4px;
font-size: 12px;
font-weight: 700;
}
.language-btn svg {
width: 13px;
height: 13px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.icon-btn {
width: 40px;
}
.sun-icon,
.moon-icon {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
}
.moon-icon {
display: none;
}
[data-theme="dark"] .sun-icon {
display: none;
}
[data-theme="dark"] .moon-icon {
display: block;
}
.direction-menu {
position: absolute;
top: 61px;
right: 112px;
width: 110px;
padding: 6px;
background: var(--white);
border: 1px solid var(--border);
border-radius: 13px;
box-shadow: 0 15px 40px rgba(0,0,0,.12);
opacity: 0;
visibility: hidden;
transform: translateY(-7px);
transition: .25s ease;
}
.direction-menu.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.direction-menu button {
display: block;
width: 100%;
padding: 9px;
border-radius: 8px;
color: var(--text);
text-align: left;
font-size: 12px;
font-weight: 700;
}
.direction-menu button:hover {
background: var(--soft);
}
.login-btn {
min-height: 40px;
padding: 0 17px;
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 50px;
color: #fff;
background: var(--navy);
font-size: 12px;
font-weight: 700;
transition:
transform .3s ease,
box-shadow .3s ease;
}
.login-btn:hover {
transform: translateY(-2px);
box-shadow:
0 10px 25px rgba(7,17,38,.25);
}
.login-btn svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.menu-toggle {
display: none;
width: 42px;
height: 42px;
border: 1px solid var(--border);
border-radius: 50%;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 4px;
}
.menu-toggle span {
width: 17px;
height: 1.5px;
background: var(--text);
transition: .3s ease;
}
.menu-toggle.open span:nth-child(1) {
transform: translateY(5.5px) rotate(45deg);
}
.menu-toggle.open span:nth-child(2) {
opacity: 0;
}
.menu-toggle.open span:nth-child(3) {
transform: translateY(-5.5px) rotate(-45deg);
}
/* =========================================================
GENERAL
========================================================= */
.section-dark {
background: var(--navy);
color: #fff;
}
.section-light {
background: var(--white);
color: var(--text);
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--blue);
font-size: 12px;
font-weight: 800;
letter-spacing: 2.3px;
}
.eyebrow span {
width: 23px;
height: 2px;
background: currentColor;
}
.reveal {
opacity: 0;
transform:
translateY(45px);
transition:
opacity .9s var(--ease),
transform .9s var(--ease);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* =========================================================
HERO
========================================================= */
.hero {
position: relative;
min-height: calc(100vh - 88px);
display: grid;
grid-template-columns:
minmax(0, .92fr)
minmax(0, 1.08fr);
align-items: center;
gap: 30px;
padding:
100px max(6vw, 35px)
90px;
overflow: hidden;
}
.hero-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: linear-gradient(
to bottom,
black,
transparent
);
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 650px;
}
.hero-title {
margin: 20px 0;
font-family: "Manrope", sans-serif;
font-size:
clamp(54px, 7vw, 105px);
line-height: .94;
letter-spacing: -5px;
font-weight: 800;
}
.hero-title span {
display: block;
color: var(--blue-light);
}
.hero-description {
max-width: 540px;
margin: 25px 0 30px;
color: #aeb9ce;
font-size: 16px;
line-height: 1.8;
}
.hero-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.primary-btn,
.line-btn {
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 20px;
padding: 0 22px;
border-radius: 50px;
font-size: 13px;
font-weight: 700;
transition:
transform .35s var(--ease),
box-shadow .35s ease,
background .35s ease;
}
.primary-btn {
color: #fff;
background: var(--blue);
box-shadow:
0 14px 35px rgba(40,103,255,.25);
}
.primary-btn:hover {
transform: translateY(-4px);
box-shadow:
0 18px 45px rgba(40,103,255,.4);
}
.line-btn {
color: #fff;
border: 1px solid rgba(255,255,255,.22);
}
.line-btn:hover {
transform: translateY(-4px);
border-color: var(--blue);
background: rgba(40,103,255,.12);
}
.primary-btn span,
.line-btn span {
font-size: 16px;
}
.hero-stats {
display: flex;
flex-wrap: wrap;
gap: 35px;
margin-top: 60px;
padding-top: 25px;
border-top: 1px solid rgba(255,255,255,.12);
}
.hero-stat {
display: flex;
flex-direction: column;
gap: 4px;
}
.hero-stat strong {
font-family: "Manrope", sans-serif;
font-size: 22px;
}
.hero-stat span {
color: #8997b0;
font-size: 12px;
}
.hero-visual {
position: relative;
min-height: 610px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-image-wrap {
position: relative;
width: min(580px, 100%);
height: 650px;
overflow: hidden;
border-radius:
45% 45% 45% 45% /
38% 38% 48% 48%;
transform:
rotate(3deg);
box-shadow:
0 35px 90px rgba(0,0,0,.4);
animation: heroFloat 7s ease-in-out infinite;
}
.hero-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.08);
transition: transform 1.2s var(--ease);
}
.hero-image-wrap:hover img {
transform: scale(1.15);
}
@keyframes heroFloat {
0%,
100% {
transform: rotate(3deg) translateY(0);
}
50% {
transform: rotate(1deg) translateY(-15px);
}
}
.image-glow {
position: absolute;
width: 450px;
height: 450px;
border-radius: 50%;
background: var(--blue);
filter: blur(120px);
opacity: .3;
}
.image-label {
position: absolute;
display: flex;
align-items: center;
gap: 10px;
padding: 13px 17px;
border: 1px solid rgba(255,255,255,.15);
border-radius: 18px;
background: rgba(7,17,38,.65);
backdrop-filter: blur(15px);
box-shadow: 0 15px 35px rgba(0,0,0,.2);
animation: labelFloat 5s ease-in-out infinite;
}
.label-top {
top: 22%;
right: -25px;
}
.label-bottom {
bottom: 16%;
left: -20px;
animation-delay: -2s;
}
.image-label strong {
display: block;
font-size: 12px;
}
.image-label small {
display: block;
margin-top: 3px;
color: #8997b0;
font-size: 12px;
}
.label-icon {
color: var(--blue-light);
font-size: 20px;
}
@keyframes labelFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-9px);
}
}
.hero-orbit {
position: absolute;
border: 1px solid rgba(70,110,255,.25);
border-radius: 50%;
pointer-events: none;
}
.orbit-one {
width: 550px;
height: 550px;
right: -220px;
top: -180px;
animation: orbitSpin 18s linear infinite;
}
.orbit-two {
width: 700px;
height: 700px;
right: -290px;
top: -260px;
animation: orbitSpin 25s linear infinite reverse;
}
@keyframes orbitSpin {
to {
transform: rotate(360deg);
}
}
.scroll-indicator {
position: absolute;
bottom: 28px;
left: max(6vw, 35px);
display: flex;
align-items: center;
gap: 12px;
color: #687790;
font-size: 12px;
letter-spacing: 2px;
}
.scroll-indicator i {
width: 35px;
height: 1px;
background: #687790;
position: relative;
}
.scroll-indicator i::after {
content: "";
position: absolute;
left: 0;
top: -2px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--blue);
animation: scrollDot 2s infinite;
}
@keyframes scrollDot {
0% {
left: 0;
opacity: 1;
}
100% {
left: 30px;
opacity: 0;
}
}
/* =========================================================
BRANDS
========================================================= */
.brands-section {
padding: 90px 0 75px;
background: var(--navy);
color: #fff;
overflow: hidden;
}
.brands-heading {
width: min(var(--container), 88%);
margin: 0 auto 60px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
}
.brands-heading span {
color: var(--blue-light);
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}
.brands-heading h2 {
margin: 0;
font-family: "Manrope", sans-serif;
font-size:
clamp(40px, 5vw, 74px);
line-height: .95;
letter-spacing: -4px;
}
.brands-heading em {
color: var(--blue-light);
font-style: normal;
}
.brand-marquee {
width: 100%;
overflow: hidden;
border-top: 1px solid rgba(255,255,255,.1);
border-bottom: 1px solid rgba(255,255,255,.1);
}
.brand-track {
width: max-content;
display: flex;
align-items: center;
gap: 85px;
padding: 35px 0;
animation:
marquee 25s linear infinite;
}
.brand-track:hover {
animation-play-state: paused;
}
.brand-track span {
color: #53627e;
font-family: "Manrope", sans-serif;
font-size: 24px;
font-weight: 800;
letter-spacing: 1px;
white-space: nowrap;
transition: color .3s ease;
}
.brand-track span:hover {
color: #fff;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* =========================================================
FRAME SECTION
========================================================= */
.frames-section {
padding: 120px max(6vw, 35px);
overflow: hidden;
}
.section-intro {
width: min(var(--container), 100%);
margin: 0 auto 60px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
}
.section-intro h2,
.story-top h2,
.testimonial-heading h2 {
margin: 15px 0 0;
font-family: "Manrope", sans-serif;
font-size:
clamp(43px, 5.5vw, 80px);
line-height: .95;
letter-spacing: -4px;
}
.section-intro h2 em,
.story-top h2 em,
.testimonial-heading h2 em {
color: var(--blue);
font-style: normal;
}
.text-link {
display: inline-flex;
align-items: center;
gap: 13px;
color: var(--text);
border-bottom: 1px solid currentColor;
padding-bottom: 7px;
font-size: 14px;
font-weight: 700;
transition:
color .3s ease,
gap .3s ease;
}
.text-link:hover {
color: var(--blue);
gap: 20px;
}
.frame-showcase {
width: min(var(--container), 100%);
margin: auto;
display: grid;
grid-template-columns:
repeat(4, minmax(0,1fr));
gap: 22px;
}
.frame-item {
min-width: 0;
}
.frame-image {
position: relative;
height: 430px;
overflow: hidden;
border-radius: 35px;
background: var(--soft);
}
.frame-image img {
height: 100%;
object-fit: cover;
transition:
transform 1s var(--ease),
filter .7s ease;
}
.frame-item:hover .frame-image img {
transform: scale(1.08);
filter: saturate(1.08);
}
.frame-number {
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 12px;
font-weight: 700;
padding: 8px 10px;
border-radius: 50px;
background: rgba(7,17,38,.5);
backdrop-filter: blur(10px);
}
.frame-arrow {
position: absolute;
right: 18px;
bottom: 18px;
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
color: var(--navy);
font-size: 19px;
transform: translateY(10px);
opacity: 0;
transition:
opacity .35s ease,
transform .35s var(--ease);
}
.frame-item:hover .frame-arrow {
opacity: 1;
transform: translateY(0);
}
.frame-info {
padding: 20px 3px;
}
.frame-info h3 {
margin: 0 0 7px;
font-family: "Manrope", sans-serif;
font-size: 20px;
}
.frame-info p {
margin: 0;
color: var(--muted);
font-size: 12px;
line-height: 1.6;
}
/* =========================================================
LENS
========================================================= */
.lens-section {
min-height: 800px;
display: grid;
grid-template-columns:
1.05fr .95fr;
align-items: center;
position: relative;
overflow: hidden;
}
.lens-image {
position: relative;
height: 100%;
min-height: 800px;
overflow: hidden;
}
.lens-image img {
height: 100%;
object-fit: cover;
opacity: .75;
transform: scale(1.08);
filter: saturate(.8);
}
.lens-image::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
transparent 50%,
var(--navy) 100%
);
}
.lens-circle {
position: absolute;
width: 300px;
height: 300px;
right: 10%;
top: 28%;
border: 1px solid rgba(255,255,255,.4);
border-radius: 50%;
box-shadow:
0 0 80px rgba(50,110,255,.2);
animation: lensPulse 5s ease-in-out infinite;
}
@keyframes lensPulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.12);
}
}
.lens-content {
max-width: 590px;
padding: 100px max(6vw, 45px) 100px 60px;
}
.lens-content h2,
.contact-lens-content h2,
.eye-test-content h2,
.final-cta h2 {
margin: 18px 0 25px;
font-family: "Manrope", sans-serif;
font-size:
clamp(48px, 6vw, 82px);
line-height: .93;
letter-spacing: -4px;
}
.lens-content h2 span,
.contact-lens-content h2 span,
.eye-test-content h2 span,
.final-cta h2 span {
display: block;
color: var(--blue-light);
}
.lens-content > p,
.contact-lens-content > p,
.eye-test-content > p,
.final-cta p {
color: #98a7c0;
font-size: 15px;
line-height: 1.8;
max-width: 520px;
}
.lens-list {
margin-top: 40px;
}
.lens-list a {
display: grid;
grid-template-columns: 45px 1fr auto;
align-items: center;
gap: 10px;
padding: 16px 0;
border-bottom: 1px solid rgba(255,255,255,.1);
transition:
padding .35s ease,
color .3s ease;
}
.lens-list a:hover {
padding-left: 10px;
color: var(--blue-light);
}
.lens-list a span {
color: #65738c;
font-size: 12px;
}
.lens-list a strong {
font-size: 13px;
}
.lens-list a i {
font-style: normal;
color: var(--blue-light);
}
/* =========================================================
STORY
========================================================= */
.story-section {
padding: 130px max(6vw, 35px);
overflow: hidden;
}
.story-top {
width: min(var(--container),100%);
margin: auto;
}
.story-visual {
width: min(var(--container),100%);
min-height: 750px;
margin: 80px auto 0;
position: relative;
}
.story-image {
position: absolute;
overflow: hidden;
border-radius: 35px;
}
.story-image img {
height: 100%;
object-fit: cover;
transition: transform 1s var(--ease);
}
.story-image:hover img {
transform: scale(1.07);
}
.story-image-one {
width: 57%;
height: 600px;
left: 4%;
top: 0;
transform: rotate(-2deg);
}
.story-image-two {
width: 35%;
height: 410px;
right: 4%;
bottom: 20px;
transform: rotate(3deg);
}
.story-copy {
position: absolute;
left: 50%;
bottom: 0;
width: 290px;
padding: 30px;
background: var(--white);
border-top: 1px solid var(--blue);
box-shadow:
0 20px 50px rgba(10,30,70,.12);
}
.story-copy span {
display: block;
margin-bottom: 10px;
color: var(--blue);
font-family: "Manrope", sans-serif;
font-size: 50px;
font-weight: 800;
}
.story-copy p {
margin: 0 0 20px;
color: var(--muted);
font-size: 13px;
line-height: 1.7;
}
/* =========================================================
EYE TEST
========================================================= */
.eye-test-section {
min-height: 650px;
display: grid;
grid-template-columns:
1.05fr .95fr;
align-items: center;
background: #eaf2fc;
overflow: hidden;
}
.eye-test-image {
position: relative;
height: 650px;
overflow: hidden;
}
.eye-test-image img {
height: 100%;
object-fit: cover;
transition: transform 1s var(--ease);
}
.eye-test-image:hover img {
transform: scale(1.04);
}
.floating-note {
position: absolute;
right: 8%;
bottom: 10%;
width: 130px;
height: 130px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--blue);
color: #fff;
box-shadow:
0 20px 50px rgba(40,103,255,.35);
animation: labelFloat 5s infinite;
}
.floating-note span {
font-family: "Manrope", sans-serif;
font-size: 30px;
font-weight: 800;
}
.floating-note small {
font-size: 12px;
line-height: 1.4;
text-align: center;
}
.eye-test-content {
padding: 80px max(6vw,40px);
}
.eye-test-content h2 {
color: var(--navy);
}
.eye-test-content > p {
color: #65738c;
}
.eye-test-points {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 13px;
margin: 30px 0;
}
.eye-test-points span {
color: #42516a;
font-size: 14px;
}
/* =========================================================
CONTACT LENS
========================================================= */
.contact-lens-section {
min-height: 720px;
display: grid;
grid-template-columns:
.9fr 1.1fr;
align-items: center;
overflow: hidden;
position: relative;
}
.contact-lens-content {
padding: 100px max(5vw,40px);
}
.lens-tags {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin: 35px 0;
}
.lens-tags a {
padding: 10px 15px;
border: 1px solid rgba(255,255,255,.15);
border-radius: 50px;
color: #a7b3c7;
font-size: 12px;
transition:
color .3s ease,
background .3s ease,
border .3s ease;
}
.lens-tags a:hover {
color: #fff;
background: var(--blue);
border-color: var(--blue);
}
.light-link {
color: #fff;
}
.contact-lens-image {
position: relative;
height: 720px;
overflow: hidden;
}
.contact-lens-image img {
height: 100%;
object-fit: cover;
transform: scale(1.1);
}
.contact-lens-image::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
var(--navy),
transparent 50%
);
}
.lens-ring {
position: absolute;
z-index: 2;
width: 400px;
height: 400px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border: 1px solid rgba(255,255,255,.5);
border-radius: 50%;
box-shadow:
inset 0 0 60px rgba(255,255,255,.08),
0 0 100px rgba(40,103,255,.18);
animation: lensPulse 5s infinite;
}
/* =========================================================
OFFER
========================================================= */
.offer-section {
min-height: 550px;
display: grid;
grid-template-columns: .75fr 1.25fr;
align-items: center;
overflow: hidden;
}
.offer-content {
padding: 80px max(5vw,40px);
}
.offer-content h2 {
margin: 18px 0;
font-family: "Manrope", sans-serif;
font-size:
clamp(45px,5vw,70px);
line-height: .95;
letter-spacing: -4px;
}
.offer-content h2 em {
color: var(--blue);
font-style: normal;
}
.offer-content p {
max-width: 380px;
color: var(--muted);
font-size: 14px;
line-height: 1.7;
margin-bottom: 30px;
}
.offer-image {
position: relative;
height: 550px;
overflow: hidden;
}
.offer-image img {
height: 100%;
object-fit: cover;
transition: transform 1s var(--ease);
}
.offer-image:hover img {
transform: scale(1.06);
}
.offer-badge {
position: absolute;
right: 8%;
top: 12%;
width: 125px;
height: 125px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--blue);
color: #fff;
transform: rotate(12deg);
box-shadow:
0 20px 50px rgba(40,103,255,.3);
animation: labelFloat 5s infinite;
}
.offer-badge strong {
font-size: 30px;
}
.offer-badge span {
font-size: 12px;
letter-spacing: 2px;
}
/* =========================================================
TESTIMONIALS
========================================================= */
.testimonials-section {
padding: 120px max(6vw,35px);
overflow: hidden;
}
.testimonial-heading {
width: min(var(--container),100%);
margin: auto;
}
.testimonial-track {
width: min(var(--container),100%);
margin: 70px auto 0;
display: grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap: 55px;
}
.testimonial {
position: relative;
padding-top: 25px;
border-top: 1px solid var(--border);
transition:
transform .4s var(--ease);
}
.testimonial:hover {
transform: translateY(-8px);
}
.quote-mark {
color: var(--blue);
font-family: Georgia, serif;
font-size: 60px;
line-height: .5;
}
.testimonial p {
min-height: 115px;
margin: 25px 0;
color: #59677f;
font-size: 14px;
line-height: 1.8;
}
.testimonial-person {
display: flex;
align-items: center;
gap: 12px;
}
.testimonial-person img {
width: 46px;
height: 46px;
border-radius: 50%;
object-fit: cover;
filter: grayscale(.2);
}
.testimonial-person div {
display: flex;
flex-direction: column;
gap: 4px;
}
.testimonial-person strong {
font-size: 15px;
}
.testimonial-person span {
color: var(--muted);
font-size: 13px;
}
.stars {
margin-top: 15px;
color: #f3ad20;
font-size: 12px;
letter-spacing: 3px;
}
/* =========================================================
FINAL CTA
========================================================= */
.final-cta {
min-height: 650px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 100px 35px;
overflow: hidden;
}
.cta-content {
position: relative;
z-index: 2;
max-width: 850px;
}
.final-cta h2 {
font-size:
clamp(55px,8vw,110px);
}
.final-cta p {
margin: auto auto 35px;
}
.cta-buttons {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
}
.cta-orbit {
position: absolute;
width: 800px;
height: 800px;
border: 1px solid rgba(70,110,255,.18);
border-radius: 50%;
animation: orbitSpin 30s linear infinite;
}
.cta-orbit::after {
content: "";
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--blue);
box-shadow: 0 0 35px var(--blue);
top: 15%;
left: 50%;
}
/* =========================================================
FOOTER
========================================================= */
.site-footer {
position: relative;
background: var(--footer);
color: #fff;
padding:
110px max(6vw,35px)
25px;
}
.footer-wave {
position: absolute;
top: -1px;
left: 0;
width: 100%;
transform: translateY(-98%);
line-height: 0;
}
.footer-wave svg {
display: block;
width: 100%;
height: 90px;
}
.footer-wave path {
fill: var(--footer);
}
.footer-inner {
width: min(var(--container),100%);
margin: auto;
display: grid;
grid-template-columns:
1.4fr
.8fr
.9fr
1fr;
gap: 60px;
padding-bottom: 70px;
}
.footer-brand p {
max-width: 320px;
margin: 25px 0;
color: #8998b0;
font-size: 12px;
line-height: 1.8;
}
.footer-logo .brand-text strong {
color: #fff;
}
.footer-logo .brand-text small {
color: #70809a;
}
.social-links {
display: flex;
gap: 8px;
}
.social-links a {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.15);
border-radius: 50%;
color: #aebbd0;
font-size: 12px;
font-weight: 700;
transition:
background .3s ease,
color .3s ease,
transform .3s ease;
}
.social-links a:hover {
background: var(--blue);
color: #fff;
transform: translateY(-4px);
}
.footer-column {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.footer-column h3 {
margin: 0 0 15px;
font-size: 12px;
}
.footer-column a,
.footer-column > span {
color: #8d9ab0;
font-size: 12px;
line-height: 1.6;
transition:
color .3s ease,
transform .3s ease;
}
.footer-column a:hover {
color: #fff;
transform: translateX(4px);
}
.footer-contact a,
.footer-contact > span {
display: flex;
gap: 10px;
align-items: flex-start;
}
.footer-contact a span,
.footer-contact > span span {
color: var(--blue-light);
}
.footer-bottom {
width: min(var(--container),100%);
margin: auto;
padding-top: 25px;
border-top: 1px solid rgba(255,255,255,.1);
display: flex;
justify-content: space-between;
gap: 20px;
color: #66758d;
font-size: 12px;
}
.footer-bottom div {
display: flex;
gap: 20px;
}
.footer-bottom a:hover {
color: #fff;
}
/* =========================================================
BACK TOP
========================================================= */
.back-top {
position: fixed;
right: 25px;
bottom: 25px;
z-index: 900;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--blue);
color: #fff;
box-shadow:
0 12px 30px rgba(40,103,255,.3);
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition:
opacity .3s ease,
visibility .3s ease,
transform .3s ease;
}
.back-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-top:hover {
transform: translateY(-5px);
}
/* =========================================================
TABLET
900 - 1199
========================================================= */
@media (max-width: 1199px) {
.navbar {
padding: 0 15px;
}
.nav-link {
padding: 0 8px;
font-size: 12px;
}
.frame-showcase {
grid-template-columns:
repeat(2,minmax(0,1fr));
gap: 35px 22px;
}
.frame-image {
height: 480px;
}
.hero {
padding-left: 5vw;
padding-right: 5vw;
}
.hero-title {
font-size: clamp(52px,7vw,80px);
}
.hero-image-wrap {
height: 560px;
}
}
/* =========================================================
TABLET
768 - 899
========================================================= */
@media (max-width: 899px) {
.site-header {
padding: 7px;
}
.navbar {
min-height: 64px;
border-radius: 17px;
padding: 0 12px;
}
.nav-menu {
position: fixed;
top: 78px;
left: 10px;
right: 10px;
height: calc(100dvh - 88px);
padding: 25px 20px;
background:
rgba(255,255,255,.97);
backdrop-filter: blur(30px);
border: 1px solid var(--border);
border-radius: 22px;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transform: translateY(-15px);
transition:
opacity .3s ease,
visibility .3s ease,
transform .35s var(--ease);
}
[data-theme="dark"] .nav-menu {
background: rgba(7,14,32,.97);
}
.nav-menu.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-link {
width: 100%;
min-height: 53px;
justify-content: space-between;
border-bottom: 1px solid var(--border);
font-size: 14px;
}
.nav-link.active::after {
left: 0;
right: auto;
bottom: 0;
width: 35px;
}
.nav-dropdown {
width: 100%;
}
.dropdown-trigger {
width: 100%;
}
.dropdown-menu {
position: static;
width: 100%;
margin: 0;
padding: 4px 0;
border: 0;
border-radius: 0;
box-shadow: none;
background: transparent;
opacity: 1;
visibility: visible;
transform: none;
display: none;
}
.nav-dropdown.open .dropdown-menu {
display: block;
transform: none;
}
.dropdown-item {
padding: 12px 8px 12px 25px;
}
[dir="rtl"] .dropdown-item {
padding: 12px 25px 12px 8px;
}
.nav-actions {
margin-left: auto;
}
[dir="rtl"] .nav-actions {
margin-left: 0;
margin-right: auto;
}
.menu-toggle {
display: flex;
}
.login-btn span {
display: none;
}
.login-btn {
width: 40px;
padding: 0;
justify-content: center;
}
.direction-menu {
top: 57px;
right: 55px;
}
[dir="rtl"] .direction-menu {
right: auto;
left: 55px;
}
.hero {
grid-template-columns: 1fr;
min-height: auto;
padding:
75px 7vw
90px;
}
.hero-content {
max-width: 720px;
}
.hero-visual {
min-height: 550px;
}
.hero-image-wrap {
width: min(520px,90%);
height: 550px;
}
.lens-section,
.contact-lens-section,
.eye-test-section,
.offer-section {
grid-template-columns: 1fr;
}
.lens-image,
.contact-lens-image {
min-height: 520px;
height: 520px;
}
.lens-content {
padding: 90px 7vw;
}
.contact-lens-content {
padding: 90px 7vw;
}
.eye-test-image {
height: 500px;
}
.eye-test-content {
padding: 75px 7vw;
}
.offer-image {
height: 500px;
}
.offer-content {
padding: 75px 7vw;
}
.testimonial-track {
grid-template-columns:
repeat(2,minmax(0,1fr));
}
.testimonial:last-child {
grid-column: span 2;
}
.footer-inner {
grid-template-columns:
repeat(2,minmax(0,1fr));
gap: 50px 30px;
}
}
/* =========================================================
MOBILE
600 - 767
========================================================= */
@media (max-width: 767px) {
.brand-text strong {
font-size: 14px;
}
.brand-text small {
font-size: 12px;
}
.hero {
padding:
65px 20px
80px;
}
.hero-title {
font-size:
clamp(48px,13vw,68px);
letter-spacing: -3px;
}
.hero-description {
font-size: 14px;
}
.hero-buttons {
width: 100%;
}
.hero-buttons a {
flex: 1;
}
.hero-stats {
gap: 22px;
margin-top: 45px;
}
.hero-stat strong {
font-size: 19px;
}
.hero-visual {
min-height: 450px;
}
.hero-image-wrap {
width: 92%;
height: 460px;
border-radius:
45% 45% 42% 42%;
}
.label-top {
right: -4px;
}
.label-bottom {
left: -4px;
}
.brands-heading {
width: calc(100% - 40px);
flex-direction: column;
align-items: flex-start;
margin-bottom: 40px;
}
.brand-track {
gap: 50px;
padding: 27px 0;
}
.brand-track span {
font-size: 20px;
}
.frames-section,
.story-section,
.testimonials-section {
padding:
90px 20px;
}
.section-intro {
flex-direction: column;
align-items: flex-start;
margin-bottom: 45px;
}
.section-intro h2,
.story-top h2,
.testimonial-heading h2 {
font-size:
clamp(43px,12vw,65px);
letter-spacing: -3px;
}
.frame-showcase {
grid-template-columns: 1fr;
gap: 35px;
}
.frame-image {
height: 430px;
}
.story-visual {
min-height: 800px;
margin-top: 55px;
}
.story-image-one {
width: 82%;
height: 520px;
left: 0;
}
.story-image-two {
width: 55%;
height: 350px;
right: 0;
bottom: 80px;
}
.story-copy {
left: 12%;
bottom: 0;
width: 75%;
}
.eye-test-points {
grid-template-columns: 1fr;
}
.lens-content h2,
.contact-lens-content h2,
.eye-test-content h2,
.final-cta h2 {
font-size:
clamp(47px,13vw,68px);
letter-spacing: -3px;
}
.testimonial-track {
grid-template-columns: 1fr;
gap: 50px;
}
.testimonial:last-child {
grid-column: auto;
}
.testimonial p {
min-height: auto;
}
.footer-inner {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
}
}
/* =========================================================
SMALL MOBILE
320 - 599
========================================================= */
@media (max-width: 599px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.site-header {
width: 100%;
padding: 5px;
}
.navbar {
width: 100%;
max-width: 100%;
min-height: 60px;
padding: 0 9px;
gap: 5px;
border-radius: 15px;
}
.brand {
gap: 7px;
}
.brand-glasses span {
width: 16px;
height: 11px;
}
.brand-glasses::after {
transform: translateX(15px);
}
.brand-text strong {
font-size: 13px;
}
.brand-text small {
font-size: 12px;
letter-spacing: 2px;
}
.nav-actions {
gap: 4px;
}
.language-btn {
display: inline-flex;
}
.icon-btn,
.login-btn,
.menu-toggle {
width: 37px;
height: 37px;
min-height: 37px;
}
.login-btn {
padding: 0;
}
.menu-toggle {
display: flex;
}
.nav-menu {
top: 70px;
left: 5px;
right: 5px;
height: calc(100dvh - 77px);
border-radius: 17px;
}
.direction-menu {
display: block;
top: 55px;
right: 48px;
width: 88px;
z-index: 1100;
}
/* IMPORTANT MOBILE OVERFLOW FIX */
.hero,
.brands-section,
.frames-section,
.lens-section,
.story-section,
.eye-test-section,
.contact-lens-section,
.offer-section,
.testimonials-section,
.final-cta,
.site-footer {
width: 100%;
max-width: 100%;
overflow-x: clip;
}
.hero {
display: block;
padding:
55px 17px
75px;
}
.hero-content {
width: 100%;
max-width: 100%;
}
.hero-title {
max-width: 100%;
font-size:
clamp(43px,14vw,58px);
letter-spacing: -2.5px;
overflow-wrap: break-word;
}
.hero-description {
width: 100%;
font-size: 13px;
line-height: 1.7;
}
.hero-buttons {
flex-direction: column;
width: 100%;
}
.hero-buttons a {
width: 100%;
flex: none;
}
.hero-stats {
display: grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap: 10px;
width: 100%;
}
.hero-stat strong {
font-size: 17px;
}
.hero-stat span {
font-size: 12px;
}
.hero-visual {
width: 100%;
min-height: 390px;
margin-top: 25px;
}
.hero-image-wrap {
width: 88%;
max-width: 350px;
height: 390px;
margin: auto;
}
.image-label {
padding: 10px 11px;
border-radius: 13px;
}
.label-top {
right: -3px;
top: 18%;
}
.label-bottom {
left: -3px;
bottom: 12%;
}
.image-label strong {
font-size: 12px;
}
.image-label small {
font-size: 12px;
}
.scroll-indicator {
display: none;
}
.orbit-one {
width: 300px;
height: 300px;
right: -160px;
}
.orbit-two {
width: 400px;
height: 400px;
right: -210px;
}
.brands-section {
padding: 70px 0 55px;
}
.brands-heading {
width: calc(100% - 34px);
}
.brands-heading h2 {
font-size:
clamp(37px,11vw,53px);
letter-spacing: -2.5px;
}
.brand-track {
gap: 38px;
}
.brand-track span {
font-size: 15px;
}
.frames-section,
.story-section,
.testimonials-section {
padding:
75px 17px;
}
.section-intro h2,
.story-top h2,
.testimonial-heading h2 {
font-size:
clamp(39px,11vw,55px);
letter-spacing: -2px;
}
.frame-image {
height: 390px;
border-radius: 25px;
}
.frame-arrow {
opacity: 1;
transform: none;
}
.lens-image,
.contact-lens-image {
min-height: 390px;
height: 390px;
}
.lens-content,
.contact-lens-content,
.eye-test-content,
.offer-content {
padding:
70px 17px;
}
.lens-content h2,
.contact-lens-content h2,
.eye-test-content h2,
.final-cta h2 {
font-size:
clamp(43px,12vw,58px);
letter-spacing: -2.5px;
}
.lens-circle,
.lens-ring {
width: 230px;
height: 230px;
}
.story-visual {
min-height: 620px;
margin-top: 40px;
}
.story-image-one {
width: 84%;
height: 400px;
}
.story-image-two {
width: 52%;
height: 270px;
bottom: 80px;
}
.story-copy {
left: 7%;
width: 75%;
padding: 22px;
}
[dir="rtl"] .story-copy {
right: 7%;
left: auto;
}
.story-copy span {
font-size: 38px;
}
.eye-test-image {
height: 370px;
}
.floating-note {
width: 100px;
height: 100px;
right: 5%;
bottom: 7%;
}
.floating-note span {
font-size: 23px;
}
.offer-image {
height: 390px;
}
.offer-badge {
width: 95px;
height: 95px;
}
.offer-badge strong {
font-size: 24px;
}
.testimonials-section {
padding-bottom: 90px;
}
.final-cta {
min-height: 550px;
padding:
80px 17px;
}
.cta-orbit {
width: 500px;
height: 500px;
}
.cta-buttons {
flex-direction: column;
}
.cta-buttons a {
width: 100%;
}
.site-footer {
padding:
80px 17px
20px;
}
.footer-wave {
transform: translateY(-96%);
}
.footer-inner {
gap: 35px;
}
.footer-bottom {
font-size: 12px;
}
.back-top {
width: 42px;
height: 42px;
right: 13px;
bottom: 13px;
}
}
/* =========================================================
320px EXTRA SAFETY
========================================================= */
@media (max-width: 360px) {
.language-btn {
min-width: 38px;
height: 34px;
padding: 0 8px;
font-size: 12px;
}
.language-btn svg {
width: 11px;
height: 11px;
}
.navbar {
padding-left: 7px;
padding-right: 7px;
}
.brand-text strong {
font-size: 12px;
}
.brand-text small {
display: none;
}
.brand-glasses span {
width: 14px;
height: 10px;
}
.brand-glasses::after {
display: none;
}
.nav-actions {
gap: 3px;
}
.icon-btn,
.login-btn,
.menu-toggle {
width: 34px;
height: 34px;
min-height: 34px;
}
.hero {
padding-left: 14px;
padding-right: 14px;
}
.hero-title {
font-size: 42px;
line-height: .98;
}
.hero-description {
font-size: 12px;
}
.hero-image-wrap {
width: 91%;
height: 355px;
}
.image-label {
transform: scale(.86);
}
.hero-stats {
gap: 6px;
}
.hero-stat strong {
font-size: 15px;
}
.hero-stat span {
font-size: 12px;
}
.frames-section,
.story-section,
.testimonials-section {
padding-left: 14px;
padding-right: 14px;
}
.frame-image {
height: 350px;
}
.lens-content,
.contact-lens-content,
.eye-test-content,
.offer-content {
padding-left: 14px;
padding-right: 14px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
.reveal {
opacity: 1;
transform: none;
}
}
/* =========================================================
MOBILE LTR — only responsive direction change
========================================================= */
@media (max-width: 899px) {
html,
body {
direction: ltr !important;
}
}
/* =========================================================
HOME PAGE 2 — IMAGE REVEAL / EDITORIAL LAYOUT
Added to the same index.css. Home Page 1 is untouched.
========================================================= */
.home2-page{background:#050b18;color:#fff;overflow-x:clip}
.home2-page .site-header{z-index:1000}
.h2-hero,.h2-collections,.h2-spotlight,.h2-lenses,.h2-journey,.h2-testimonial,.h2-final-cta{position:relative;isolation:isolate}
.h2-hero{min-height:calc(100vh - 10px);display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:100px max(5vw,40px) 60px;gap:4vw;background:radial-gradient(circle at 72% 42%,rgba(40,103,255,.22),transparent 32%),#050b18;overflow:hidden}
.h2-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.025),transparent 65%);pointer-events:none}
.h2-hero-copy{max-width:650px;order:2;position:relative;z-index:2}
.h2-hero-media{order:1;position:relative;min-height:620px;display:grid;place-items:center}
.h2-hero-media>img{width:min(78%,600px);height:620px;object-fit:cover;border-radius:48% 48% 18% 18%;position:relative;z-index:2;filter:saturate(.9) contrast(1.04);box-shadow:0 40px 90px rgba(0,0,0,.45)}
.h2-hero-ring{position:absolute;width:min(75%,570px);aspect-ratio:1;border:1px solid rgba(74,127,255,.5);border-radius:50%;box-shadow:0 0 100px rgba(40,103,255,.16);animation:h2Spin 18s linear infinite}
.h2-kicker{display:block;font-size:13px;letter-spacing:.22em;color:#5e84ff;font-weight:700;margin-bottom:20px}
.h2-hero h1,.h2-copy h2,.h2-spotlight h2,.h2-lenses h2,.h2-journey h2{font-family:Manrope,sans-serif;font-size:clamp(48px,6vw,84px);line-height:.98;margin:0 0 24px;letter-spacing:-.055em}
.h2-hero h1 em,.h2-copy h2 em,.h2-spotlight h2 em,.h2-lenses h2 em,.h2-journey h2 em,.h2-cta-inner h2 em{font-style:normal;color:#5e84ff}
.h2-hero p,.h2-copy p,.h2-spotlight-copy p,.h2-lens-copy p{font-size:18px;line-height:1.7;color:#aab7cf;max-width:540px;margin:0 0 28px}
.h2-actions{display:flex;gap:12px;flex-wrap:wrap}.h2-actions .primary-btn,.h2-actions .line-btn{min-height:50px}
.h2-trust{
display:flex;
gap:28px;
margin-top:38px;
flex-wrap:wrap}
.h2-trust span{display:grid;grid-template-columns:auto 1fr;column-gap:8px;color:#5e84ff;font-size:18px}.h2-trust b{font-size:14px;color:#fff}.h2-trust small{grid-column:2;color:#7d8ca7;font-size:12px}
.h2-floating{position:absolute;z-index:3;display:grid;padding:16px 20px;border-left:2px solid #2867ff;background:rgba(8,17,38,.72);backdrop-filter:blur(14px);font-size:12px;box-shadow:0 20px 50px rgba(0,0,0,.28);animation:h2Float 5s ease-in-out infinite}.h2-floating b{font-size:13px}.h2-floating small{color:#8795ac;margin-top:4px}.h2-float-one{right:2%;top:25%}.h2-float-two{left:4%;bottom:18%;animation-delay:-2s}.h2-scroll{position:absolute;right:28px;bottom:35px;writing-mode:vertical-rl;font-size:12px;letter-spacing:.2em;color:#72809a}.h2-scroll i{display:block;width:1px;height:70px;background:#2867ff;margin-top:12px}
.h2-light-section{background:#f5f7fb;color:#0b1220}.h2-dark-section{background:#050b18;color:#fff}
.h2-collections{min-height:680px;display:grid;grid-template-columns:.7fr 1.3fr;align-items:center;padding:110px max(5vw,40px);gap:7vw}.h2-copy{max-width:430px}.h2-copy h2{font-size:clamp(42px,5vw,68px)}.h2-text-link{display:inline-block;color:#2867ff;font-size:15px;font-weight:700;border-bottom:1px solid rgba(40,103,255,.35);padding-bottom:6px}
.h2-collection-stage{display:grid;grid-template-columns:minmax(0,1fr) 190px;align-items:center;gap:30px}.h2-collection-image{position:relative;height:570px;overflow:hidden;border-radius:40% 8% 40% 8%;clip-path:inset(0 0 0 0 round 40% 8% 40% 8%)}.h2-collection-image img{height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}.h2-collection-stage:hover img{transform:scale(1.05)}.h2-image-caption{position:absolute;bottom:20px;left:22px;font-size:12px;letter-spacing:.2em;color:#fff;background:rgba(0,0,0,.35);padding:9px 12px}.h2-collection-list{display:flex;flex-direction:column}.h2-collection-list a{padding:22px 0;border-bottom:1px solid rgba(15,30,55,.15);font-size:14px;font-weight:700;display:flex;gap:18px;transition:.3s}.h2-collection-list a span{color:#2867ff;font-size:14px}.h2-collection-list a:hover{padding-left:10px;color:#2867ff}
.h2-spotlight{min-height:690px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;background:#080e1b;overflow:hidden}.h2-spotlight-image{height:690px;position:relative;overflow:hidden}.h2-spotlight-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.image-reveal .h2-image-b{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--ease)}.image-reveal.is-visible .h2-image-b{clip-path:inset(0 0 0 0)}.image-reveal .h2-image-a{transform:scale(1.04);transition:transform 1.5s var(--ease)}.image-reveal.is-visible .h2-image-a{transform:scale(1)}
.h2-spotlight-copy{padding:70px max(5vw,50px)}.h2-spotlight-copy h2{font-size:clamp(44px,5vw,70px)}.h2-price{display:block;font-size:24px;margin:20px 0}.h2-spotlight-copy ul{list-style:none;padding:0;margin:38px 0 0;display:grid;gap:16px;color:#aab7cf;font-size:13px}.h2-spotlight-copy li:before{content:"✓";color:#5e84ff;margin-right:12px}
.h2-lenses{min-height:650px;display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;padding:100px max(5vw,40px);gap:5vw;overflow:hidden}.h2-lens-copy h2{font-size:clamp(42px,5vw,66px)}.h2-eye-stage{height:430px;position:relative;overflow:hidden;border-radius:50% 0 50% 0}.h2-eye-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.h2-lens-links{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:35px}.h2-lens-links a{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;color:#fff}.h2-lens-links a:first-child{color:#5e84ff}.h2-lens-links b{font-size:15px}.h2-lens-links small{grid-column:2;color:#77869e;font-size:16px!important;margin-top:4px}
.h2-journey{min-height:700px;padding:110px max(5vw,40px);overflow:hidden}.h2-journey-copy{max-width:500px}.h2-journey h2{font-size:clamp(42px,5vw,65px)}.h2-steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:60px;position:relative}.h2-steps:before{content:"";position:absolute;top:25px;left:8%;right:8%;height:1px;background:rgba(20,32,57,.18)}.h2-step{position:relative;padding:0 20px 0 0;z-index:1}.h2-step span{display:grid;place-items:center;width:52px;height:52px;border:1px solid #2867ff;border-radius:50%;background:#f5f7fb;color:#2867ff;font-size:12px;margin-bottom:22px}.h2-step b{display:block;font-size:14px}.h2-step small{display:block;color:#72809a;font-size:15px;line-height:1.5;margin-top:7px;max-width:150px}.h2-journey-image{height:300px;width:62%;margin:70px 0 0 auto;position:relative;overflow:hidden;border-radius:50% 0 50% 0}.h2-journey-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h2-testimonial{min-height:570px;display:grid;grid-template-columns:.75fr 1fr 1.2fr;align-items:center;gap:5vw;padding:90px max(5vw,40px)}.h2-testimonial-image{height:390px;position:relative;overflow:hidden;border-radius:50%}.h2-testimonial-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.h2-quote blockquote{font-family:Manrope,sans-serif;font-size:clamp(20px,2vw,29px);line-height:1.45;margin:18px 0}.h2-quote>b{display:block;font-size:13px}.h2-quote>small{color:#73819a;font-size:12px}.stars{color:#5e84ff;letter-spacing:4px}.h2-brands{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;color:#7d8ba2;font-family:serif;font-size:22px;align-items:center}.h2-brands span{transition:.3s}.h2-brands span:hover{color:#fff;transform:translateY(-4px)}
.h2-final-cta{background:#2867ff;overflow:hidden}.h2-cta-wave{position:absolute;inset:0;background:radial-gradient(ellipse at 80% 120%,#071a3b 0 28%,transparent 29%),linear-gradient(120deg,#2867ff,#164bd0)}.h2-cta-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.4fr repeat(3,1fr);align-items:center;gap:35px;padding:70px max(5vw,40px)}.h2-cta-inner h2{font-family:Manrope;font-size:clamp(36px,4vw,56px);line-height:.98;margin:0}.h2-cta-inner a{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;color:#fff}.h2-cta-inner a span{grid-row:1/3;width:50px;height:50px;border:1px solid rgba(255,255,255,.4);border-radius:50%;display:grid;place-items:center}.h2-cta-inner a b{font-size:13px}.h2-cta-inner a small{font-size:12px;opacity:.72;grid-column:2;margin-top:4px}
.reveal-h2{opacity:0;transform:translateY(55px);transition:opacity .9s ease,transform .9s var(--ease)}.reveal-h2.is-visible{opacity:1;transform:none}.h2-step:nth-child(2){transition-delay:.08s}.h2-step:nth-child(3){transition-delay:.16s}.h2-step:nth-child(4){transition-delay:.24s}@keyframes h2Spin{to{transform:rotate(360deg)}}@keyframes h2Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(max-width:899px){.h2-hero{grid-template-columns:1fr;padding:110px 20px 55px;min-height:auto}.h2-hero-media{order:1;min-height:470px}.h2-hero-media>img{width:82%;height:470px}.h2-hero-copy{order:2}.h2-floating{font-size:12px}.h2-float-one{right:0}.h2-float-two{left:0}.h2-scroll{display:none}.h2-hero h1{font-size:clamp(44px,13vw,64px)}.h2-trust{gap:15px}.h2-collections{grid-template-columns:1fr;padding:80px 20px;gap:45px}.h2-collection-stage{grid-template-columns:1fr}.h2-collection-image{height:450px}.h2-collection-list{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.h2-spotlight{grid-template-columns:1fr}.h2-spotlight-image{height:430px}.h2-spotlight-copy{padding:65px 20px}.h2-lenses{grid-template-columns:1fr;padding:80px 20px}.h2-eye-stage{height:360px;order:2}.h2-lens-links{grid-template-columns:1fr 1fr;gap:28px;order:3}.h2-lens-copy{order:1}.h2-journey{padding:80px 20px}.h2-steps{grid-template-columns:1fr 1fr;gap:35px}.h2-steps:before{display:none}.h2-journey-image{width:100%;margin-top:55px}.h2-testimonial{grid-template-columns:1fr;padding:75px 20px;gap:35px}.h2-testimonial-image{height:340px;width:80%}.h2-brands{grid-template-columns:repeat(3,1fr)}.h2-cta-inner{grid-template-columns:1fr 1fr;padding:65px 20px}.h2-cta-inner h2{grid-column:1/-1}}
@media(max-width:520px){.h2-hero{padding-left:14px;padding-right:14px}.h2-hero-media{min-height:390px}.h2-hero-media>img{height:390px}.h2-floating{padding:11px 13px}.h2-trust{display:grid;grid-template-columns:1fr 1fr}.h2-collections,.h2-lenses,.h2-journey,.h2-testimonial{padding-left:14px;padding-right:14px}.h2-collection-image{height:380px}.h2-collection-list{grid-template-columns:1fr}.h2-lens-links{grid-template-columns:1fr}.h2-steps{grid-template-columns:1fr}.h2-journey-image{height:230px}.h2-testimonial-image{width:100%;height:300px}.h2-brands{grid-template-columns:repeat(2,1fr);font-size:18px}.h2-cta-inner{grid-template-columns:1fr;padding:55px 20px}.h2-cta-inner a{padding:8px 0}.h2-spotlight-image{height:360px}}
@media(prefers-reduced-motion:reduce){.reveal-h2{opacity:1;transform:none}.image-reveal .h2-image-b{clip-path:none}.h2-hero-ring,.h2-floating{animation:none}}
/* =========================================================
MOBILE NAV DROPDOWN
Hamburger opens navigation directly BELOW the navbar.
Applies to Home Page 1 + Home Page 2.
========================================================= */
.mobile-nav-login {
display: none;
}
@media (max-width: 899px) {
.site-header {
z-index: 1200;
}
.navbar {
position: relative;
z-index: 1201;
}
.nav-menu {
position: absolute !important;
top: calc(100% + 8px) !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: auto !important;
max-height: calc(100dvh - 88px) !important;
padding: 10px 14px 14px !important;
border-radius: 18px !important;
overflow-y: auto !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(-8px) !important;
box-shadow: 0 22px 55px rgba(0,0,0,.22);
z-index: 1205;
}
.nav-menu.open {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) !important;
}
.mobile-nav-login {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 52px;
margin-top: 6px;
padding: 0 8px;
border-top: 1px solid var(--border);
color: var(--text);
font-size: 14px;
font-weight: 700;
}
.mobile-login-icon {
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
border: 1px solid var(--border);
border-radius: 50%;
font-size: 12px;
color: var(--blue);
}
/* Mobile: Login appears only inside the hamburger menu. */
.login-btn {
display: none !important;
}
.nav-menu .nav-link {
flex-shrink: 0;
}
.nav-menu .nav-dropdown {
flex-shrink: 0;
}
}
@media (max-width: 520px) {
.nav-menu {
top: calc(100% + 6px) !important;
left: 0 !important;
right: 0 !important;
padding: 8px 12px 12px !important;
border-radius: 16px !important;
}
}
@media (max-width: 360px) {
.nav-menu {
top: calc(100% + 5px) !important;
}
}
/* =========================================================
GLOBAL THEME FIX — ALL PAGES
Applies dark/light mode to the complete page, not navbar only.
Also adds colorful floating bubbles without changing layout.
========================================================= */
:root{
--page-bg:#edf3fb;
--page-surface:#f5f8fd;
--page-surface-2:#e7eef9;
--page-ink:#0b1730;
--page-muted:#61708a;
--page-line:rgba(20,42,78,.12);
--bubble-a:rgba(45,104,255,.18);
--bubble-b:rgba(128,76,255,.13);
--bubble-c:rgba(0,190,210,.12);
}
html[data-theme="dark"]{
--page-bg:#050a18;
--page-surface:#091226;
--page-surface-2:#0d1830;
--page-ink:#f4f7ff;
--page-muted:#9ba9c0;
--page-line:rgba(255,255,255,.10);
--bubble-a:rgba(45,104,255,.24);
--bubble-b:rgba(139,77,255,.20);
--bubble-c:rgba(0,205,225,.16);
}
body{
background:
radial-gradient(circle at 12% 18%,var(--bubble-a),transparent 24%),
radial-gradient(circle at 88% 38%,var(--bubble-b),transparent 22%),
radial-gradient(circle at 55% 92%,var(--bubble-c),transparent 25%),
var(--page-bg);
color:var(--page-ink);
}
/* Floating bubbles are decorative and never block clicks. */
.theme-bubbles{
position:fixed;
inset:0;
overflow:hidden;
pointer-events:none;
z-index:0;
}
.theme-bubble{
position:absolute;
display:block;
width:clamp(55px,7vw,120px);
aspect-ratio:1;
border-radius:50%;
border:1px solid color-mix(in srgb,var(--blue) 30%,transparent);
background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.20),transparent 22%),
linear-gradient(135deg,var(--bubble-a),var(--bubble-b) 55%,var(--bubble-c));
filter:blur(.2px);
opacity:.65;
box-shadow:0 0 45px var(--bubble-a),inset 0 0 25px rgba(255,255,255,.06);
animation:cvBubbleFloat var(--bubble-speed,14s) ease-in-out infinite;
}
.theme-bubble:nth-child(1){left:4%;top:18%;--bubble-speed:15s}
.theme-bubble:nth-child(2){left:24%;top:64%;width:clamp(35px,4vw,80px);--bubble-speed:11s;animation-delay:-3s}
.theme-bubble:nth-child(3){right:7%;top:26%;width:clamp(70px,9vw,150px);--bubble-speed:17s;animation-delay:-6s}
.theme-bubble:nth-child(4){right:28%;top:72%;width:clamp(40px,5vw,90px);--bubble-speed:13s;animation-delay:-8s}
.theme-bubble:nth-child(5){left:48%;top:10%;width:clamp(28px,3vw,65px);--bubble-speed:10s;animation-delay:-2s}
.theme-bubble:nth-child(6){left:76%;top:82%;width:clamp(48px,6vw,100px);--bubble-speed:16s;animation-delay:-10s}
@keyframes cvBubbleFloat{
0%,100%{transform:translate3d(0,0,0) scale(1)}
25%{transform:translate3d(22px,-35px,0) scale(1.04)}
50%{transform:translate3d(-18px,-65px,0) scale(.96)}
75%{transform:translate3d(30px,-25px,0) scale(1.03)}
}
/* Keep all real content above decorative bubbles. */
main,.site-footer{position:relative;z-index:2}
.site-header{z-index:1000}
.back-top{z-index:1100}
/* ---------------- HOME PAGE 1 ---------------- */
html[data-theme="light"] body:not(.home2-page):not(.about-page) .hero,
html[data-theme="light"] body:not(.home2-page):not(.about-page) .brands-section,
html[data-theme="light"] body:not(.home2-page):not(.about-page) .frames-section,
html[data-theme="light"] body:not(.home2-page):not(.about-page) .story-section,
html[data-theme="light"] body:not(.home2-page):not(.about-page) .lens-section,
html[data-theme="light"] body:not(.home2-page):not(.about-page) .eye-test-section,
html[data-theme="light"] body:not(.home2-page):not(.about-page) .testimonials-section{
background:
radial-gradient(circle at 85% 20%,rgba(45,104,255,.10),transparent 25%),
linear-gradient(135deg,#edf4ff,#f8faff 55%,#eef3ff);
color:#0b1730;
}
html[data-theme="dark"] body:not(.home2-page):not(.about-page) .hero,
html[data-theme="dark"] body:not(.home2-page):not(.about-page) .brands-section,
html[data-theme="dark"] body:not(.home2-page):not(.about-page) .frames-section,
html[data-theme="dark"] body:not(.home2-page):not(.about-page) .story-section,
html[data-theme="dark"] body:not(.home2-page):not(.about-page) .lens-section,
html[data-theme="dark"] body:not(.home2-page):not(.about-page) .eye-test-section,
html[data-theme="dark"] body:not(.home2-page):not(.about-page) .testimonials-section{
background:
radial-gradient(circle at 85% 20%,rgba(45,104,255,.16),transparent 28%),
linear-gradient(135deg,#050a18,#081329 55%,#060d20);
color:#f4f7ff;
}
html[data-theme="light"] body:not(.home2-page):not(.about-page) .offer-section,
html[data-theme="light"] body:not(.home2-page):not(.about-page) .final-cta{
background:linear-gradient(135deg,#dce9ff,#eef4ff 50%,#e5dcff);
color:#0b1730;
}
html[data-theme="dark"] body:not(.home2-page):not(.about-page) .offer-section,
html[data-theme="dark"] body:not(.home2-page):not(.about-page) .final-cta{
background:linear-gradient(135deg,#07112a,#10245a 50%,#170d38);
color:#fff;
}
/* ---------------- HOME PAGE 2 ---------------- */
html[data-theme="light"] .home2-page{background:transparent;color:#0b1730}
html[data-theme="dark"] .home2-page{background:transparent;color:#fff}
html[data-theme="light"] .home2-page .h2-hero,
html[data-theme="light"] .home2-page .h2-dark-section,
html[data-theme="light"] .home2-page .h2-spotlight{
background:
radial-gradient(circle at 72% 40%,rgba(45,104,255,.14),transparent 32%),
linear-gradient(135deg,#e7f0ff,#f7f9ff 58%,#e9e3ff);
color:#0b1730;
}
html[data-theme="dark"] .home2-page .h2-hero,
html[data-theme="dark"] .home2-page .h2-dark-section,
html[data-theme="dark"] .home2-page .h2-spotlight{
background:
radial-gradient(circle at 72% 40%,rgba(45,104,255,.22),transparent 32%),
linear-gradient(135deg,#050a18,#09142c 58%,#110b25);
color:#fff;
}
html[data-theme="light"] .home2-page .h2-light-section{
background:linear-gradient(135deg,#edf4ff,#f8faff 55%,#f0eaff);
color:#0b1730;
}
html[data-theme="light"] .home2-page .h2-hero p,
html[data-theme="light"] .home2-page .h2-copy p,
html[data-theme="light"] .home2-page .h2-spotlight-copy p,
html[data-theme="light"] .home2-page .h2-lens-copy p{color:#61708a}
html[data-theme="light"] .home2-page .h2-trust b{color:#0b1730}
html[data-theme="light"] .home2-page .h2-trust small{color:#61708a}
html[data-theme="light"] .home2-page .h2-collection-list a{border-color:rgba(20,42,78,.13)}
html[data-theme="light"] .home2-page .h2-step span{background:#eef4ff}
html[data-theme="light"] .home2-page .h2-step small{color:#61708a; font-size:17px !important;}
/* ---------------- ABOUT PAGE ---------------- */
html[data-theme="light"] .about-page{background:transparent;color:#0b1730}
html[data-theme="dark"] .about-page{background:transparent;color:#fff}
html[data-theme="light"] .about-page .about-dark,
html[data-theme="light"] .about-page .about-hero,
html[data-theme="light"] .about-page .quote-copy{
background:
radial-gradient(circle at 80% 30%,rgba(45,104,255,.13),transparent 30%),
linear-gradient(135deg,#e7f0ff,#f7f9ff 60%,#ece6ff);
color:#0b1730;
}
html[data-theme="dark"] .about-page .about-dark,
html[data-theme="dark"] .about-page .about-hero,
html[data-theme="dark"] .about-page .quote-copy{
background:
radial-gradient(circle at 80% 30%,rgba(45,104,255,.18),transparent 30%),
linear-gradient(135deg,#050a18,#09142c 60%,#110b25);
color:#fff;
}
html[data-theme="light"] .about-page .about-light,
html[data-theme="light"] .about-page .about-story,
html[data-theme="light"] .about-page .about-values,
html[data-theme="light"] .about-page .technology{
background:
radial-gradient(circle at 10% 80%,rgba(139,77,255,.08),transparent 28%),
linear-gradient(135deg,#edf4ff,#f8faff 55%,#f0eaff);
color:#0b1730;
}
html[data-theme="dark"] .about-page .about-light,
html[data-theme="dark"] .about-page .about-story,
html[data-theme="dark"] .about-page .about-values,
html[data-theme="dark"] .about-page .technology{
background:
radial-gradient(circle at 10% 80%,rgba(139,77,255,.10),transparent 28%),
linear-gradient(135deg,#071022,#0b1730 55%,#100c25);
color:#fff;
}
html[data-theme="dark"] .about-page .about-story-copy p,
html[data-theme="dark"] .about-page .expert-copy p{color:#a7b4c9}
html[data-theme="dark"] .about-page .value-item p{color:#a0aec4}
html[data-theme="dark"] .about-page .values-track,
html[data-theme="dark"] .about-page .value-item{border-color:rgba(255,255,255,.10)}
html[data-theme="dark"] .about-page .story-img-b{border-color:#0b1730}
html[data-theme="light"] .about-page .story-img-b{border-color:#edf4ff}
/* Make the shared footer feel part of either theme. */
html[data-theme="light"] .site-footer{
background:linear-gradient(135deg,#102b68,#183f92 55%,#39207a);
}
html[data-theme="dark"] .site-footer{
background:linear-gradient(135deg,#030712,#07132b 55%,#100823);
}
/* Softer theme transition for the whole page. */
body,main,section,.site-footer,.navbar,.story-copy,.frame-image,.dropdown-menu{
transition:background .55s ease,color .45s ease,border-color .45s ease;
}
@media(max-width:700px){
.theme-bubble:nth-child(n+4){display:none}
.theme-bubble{opacity:.42}
}
@media(prefers-reduced-motion:reduce){
.theme-bubble{animation:none}
}
/* =========================================================
FINAL FULL-PAGE THEME + FLOATING BUBBLE OVERRIDE
Applies to every section on Home 1, Home 2 and About.
========================================================= */
html,
body{
min-width:320px;
background:var(--page-bg) !important;
color:var(--page-ink) !important;
}
/* Decorative bubbles stay visible behind the page content. */
.theme-bubbles{
z-index:1 !important;
opacity:1;
}
main,.site-footer{
position:relative;
z-index:2;
}
.site-header,.back-top{
position:relative;
z-index:1000;
}
/* HOME 1 — every section gets the active theme */
html[data-theme="dark"] body:not(.home2-page):not(.about-page) main section{
color:#f5f8ff !important;
background:
radial-gradient(circle at 12% 18%,rgba(45,104,255,.20),transparent 30%),
radial-gradient(circle at 88% 82%,rgba(139,77,255,.15),transparent 28%),
linear-gradient(135deg,#040817 0%,#08142c 52%,#100b25 100%) !important;
}
html[data-theme="light"] body:not(.home2-page):not(.about-page) main section{
color:#0b1730 !important;
background:
radial-gradient(circle at 10% 15%,rgba(45,104,255,.14),transparent 30%),
radial-gradient(circle at 90% 80%,rgba(139,77,255,.12),transparent 28%),
linear-gradient(135deg,#e9f2ff 0%,#f5f7ff 52%,#eee8ff 100%) !important;
}
/* Home 1 alternating colorful sections */
html[data-theme="light"] body:not(.home2-page):not(.about-page) main section:nth-child(2n){
background:
radial-gradient(circle at 80% 20%,rgba(0,190,210,.13),transparent 26%),
linear-gradient(135deg,#edfaff,#f6f4ff 55%,#e9efff) !important;
}
html[data-theme="dark"] body:not(.home2-page):not(.about-page) main section:nth-child(2n){
background:
radial-gradient(circle at 80% 20%,rgba(0,205,225,.13),transparent 26%),
linear-gradient(135deg,#06111f,#0b1831 55%,#120c29) !important;
}
/* HOME 2 — every section */
html[data-theme="dark"] .home2-page main section{
color:#f5f8ff !important;
background:
radial-gradient(circle at 15% 20%,rgba(45,104,255,.18),transparent 30%),
radial-gradient(circle at 88% 78%,rgba(139,77,255,.14),transparent 28%),
linear-gradient(135deg,#040817,#08142c 55%,#110b25) !important;
}
html[data-theme="light"] .home2-page main section{
color:#0b1730 !important;
background:
radial-gradient(circle at 15% 20%,rgba(45,104,255,.13),transparent 30%),
radial-gradient(circle at 88% 78%,rgba(139,77,255,.11),transparent 28%),
linear-gradient(135deg,#eaf3ff,#f7f8ff 55%,#eee8ff) !important;
}
/* ABOUT — every section */
html[data-theme="dark"] .about-page main section{
color:#f5f8ff !important;
background:
radial-gradient(circle at 12% 18%,rgba(45,104,255,.19),transparent 30%),
radial-gradient(circle at 88% 80%,rgba(139,77,255,.15),transparent 28%),
linear-gradient(135deg,#040817,#09152d 55%,#120b26) !important;
}
html[data-theme="light"] .about-page main section{
color:#0b1730 !important;
background:
radial-gradient(circle at 12% 18%,rgba(45,104,255,.13),transparent 30%),
radial-gradient(circle at 88% 80%,rgba(139,77,255,.10),transparent 28%),
linear-gradient(135deg,#eaf3ff,#f7f9ff 55%,#eee9ff) !important;
}
/* Keep all readable text synced with the active theme. */
html[data-theme="dark"] main section h1,
html[data-theme="dark"] main section h2,
html[data-theme="dark"] main section h3,
html[data-theme="dark"] main section h4,
html[data-theme="dark"] main section p,
html[data-theme="dark"] main section li,
html[data-theme="dark"] main section span,
html[data-theme="dark"] main section b,
html[data-theme="dark"] main section strong{
color:inherit;
}
html[data-theme="light"] main section h1,
html[data-theme="light"] main section h2,
html[data-theme="light"] main section h3,
html[data-theme="light"] main section h4{
color:#0b1730 !important;
}
/* Paragraphs: preserve blue accent links while making body text readable. */
html[data-theme="light"] main section p{
color:#596b86;
}
html[data-theme="dark"] main section p{
color:#aebbd0;
}
/* Keep CTA/button colors intentional rather than washed out. */
html[data-theme="light"] .about-primary,
html[data-theme="light"] .hero-buttons a:first-child,
html[data-theme="light"] .h2-primary{
color:#fff !important;
}
/* Bubbles — more visible, colorful and slow-moving */
.theme-bubble{
opacity:.55 !important;
filter:blur(.15px);
will-change:transform;
}
.theme-bubble:nth-child(1){background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.30),transparent 20%),linear-gradient(135deg,rgba(45,104,255,.30),rgba(139,77,255,.20),rgba(0,205,225,.16));}
.theme-bubble:nth-child(2){background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.25),transparent 20%),linear-gradient(135deg,rgba(0,205,225,.25),rgba(45,104,255,.20),rgba(139,77,255,.18));}
.theme-bubble:nth-child(3){background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.28),transparent 20%),linear-gradient(135deg,rgba(139,77,255,.28),rgba(45,104,255,.20),rgba(0,205,225,.14));}
.theme-bubble:nth-child(4){background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.24),transparent 20%),linear-gradient(135deg,rgba(45,104,255,.25),rgba(0,205,225,.20),rgba(139,77,255,.16));}
.theme-bubble:nth-child(5){background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.25),transparent 20%),linear-gradient(135deg,rgba(139,77,255,.24),rgba(0,205,225,.18),rgba(45,104,255,.20));}
.theme-bubble:nth-child(6){background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.25),transparent 20%),linear-gradient(135deg,rgba(0,205,225,.22),rgba(139,77,255,.20),rgba(45,104,255,.18));}
html[data-theme="dark"] .theme-bubble{
opacity:.62 !important;
}
html[data-theme="light"] .theme-bubble{
opacity:.48 !important;
}
/* Smooth complete theme transition */
body,main,main section,.site-footer,.navbar,.dropdown-menu,
.about-story-copy,.quote-copy,.expert-copy{
transition:
background .55s ease,
color .45s ease,
border-color .45s ease,
box-shadow .55s ease !important;
}
/* Mobile: bubbles remain decorative and never create horizontal overflow. */
@media(max-width:700px){
.theme-bubbles{
overflow:hidden;
}
.theme-bubble{
opacity:.32 !important;
transform:scale(.78);
}
}
/* Reduced motion */
@media(prefers-reduced-motion:reduce){
.theme-bubble{
animation:none !important;
}
}
.theme-bubble:nth-child(7){left:16%;top:86%;width:clamp(32px,4vw,72px);--bubble-speed:12s;animation-delay:-4s}
.theme-bubble:nth-child(8){right:14%;top:8%;width:clamp(30px,3.5vw,70px);--bubble-speed:18s;animation-delay:-9s}
.theme-bubble:nth-child(9){left:61%;top:46%;width:clamp(24px,3vw,58px);--bubble-speed:9s;animation-delay:-1s}
/* =========================================================
ABOUT PAGE — MISSING SECTION LAYOUT (BUG FIX)
The about-page sections had no layout/spacing rules, which
made the hero copy render with no top offset and collide
with the sticky navbar. This block only adds layout/spacing/
typography for the existing markup — no HTML/section changes,
no color changes (colors stay controlled by the theme rules
already in this file).
========================================================= */
.about-page main{overflow:hidden}
/* ---- 01 HERO ---- */
.about-hero{
position:relative;
display:grid;
grid-template-columns:1.05fr .95fr;
align-items:center;
gap:40px;
padding:calc(var(--header-height) + 75px) max(6vw,35px) 100px;
overflow:hidden;
}
.about-grid{
position:absolute;inset:0;
background-image:
linear-gradient(rgba(120,140,180,.07) 1px,transparent 1px),
linear-gradient(90deg,rgba(120,140,180,.07) 1px,transparent 1px);
background-size:70px 70px;
mask-image:linear-gradient(to bottom,black,transparent);
pointer-events:none;
}
.about-hero-ring{
position:absolute;
width:480px;height:480px;
right:-160px;top:-140px;
border:1px solid rgba(40,103,255,.18);
border-radius:50%;
animation:orbitSpin 22s linear infinite;
pointer-events:none;
}
.about-hero-copy{position:relative;z-index:2;max-width:560px}
.about-eyebrow{
display:inline-flex;align-items:center;gap:8px;
color:var(--blue);font-size:12px;font-weight:800;letter-spacing:2.3px;
margin-bottom:6px;
}
.about-eyebrow::before{content:"";width:23px;height:2px;background:currentColor}
.about-title{
margin:16px 0 20px;
font-family:"Manrope",sans-serif;
font-size:clamp(44px,6vw,80px);
line-height:.97;
letter-spacing:-3px;
font-weight:800;
}
.gradient-shimmer{
background:linear-gradient(90deg,var(--blue),#8b4dff,var(--blue));
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;color:transparent;
animation:shimmerMove 5s linear infinite;
}
@keyframes shimmerMove{to{background-position:200% center}}
.about-lead{max-width:480px;margin:0 0 28px;font-size:15px;line-height:1.8;opacity:.82}
.about-primary{
position:relative;z-index:2;
display:inline-flex;align-items:center;gap:14px;
min-height:52px;padding:0 24px;border-radius:50px;
background:var(--blue);color:#fff;font-size:13px;font-weight:700;
box-shadow:0 14px 35px rgba(40,103,255,.25);
transition:transform .35s var(--ease),box-shadow .35s ease;
}
.about-primary:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(40,103,255,.4)}
.about-primary span{font-size:16px}
.about-hero-media{
position:relative;z-index:2;
height:560px;border-radius:34px;overflow:hidden;
box-shadow:0 30px 80px rgba(10,25,60,.25);
}
.about-hero-media img{height:100%;object-fit:cover}
.about-image-orbit{
position:absolute;inset:14px;
border:1px solid rgba(255,255,255,.35);
border-radius:26px;
pointer-events:none;
}
/* ---- 02 STORY ---- */
.about-story{
display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;
padding:100px max(6vw,35px);
}
.image-stack{position:relative;height:520px}
.story-img-a,.story-img-b{
position:absolute;border-radius:28px;object-fit:cover;
box-shadow:0 25px 60px rgba(10,25,60,.2);
}
.story-img-a{width:78%;height:100%;left:0;top:0}
.story-img-b{width:52%;height:60%;right:0;bottom:-30px;border:6px solid var(--white)}
.image-caption{
position:absolute;left:0;bottom:-52px;
font-size:12px;letter-spacing:2px;font-weight:700;opacity:.6;
}
.about-story-copy h2{
margin:14px 0 20px;font-family:"Manrope",sans-serif;
font-size:clamp(38px,4.5vw,58px);line-height:1.02;letter-spacing:-2.5px;
}
.about-story-copy h2 span{color:var(--blue)}
.about-story-copy p{margin:0 0 16px;font-size:14px;line-height:1.8;max-width:460px}
.signature{margin-top:24px;font-family:"Manrope",sans-serif;font-size:15px;font-weight:800}
.signature small{
display:block;margin-top:4px;font-size:12px;letter-spacing:2px;
font-weight:700;color:var(--blue);opacity:.85;
}
/* ---- 03 STATS ---- */
.about-stats{
display:grid;grid-template-columns:repeat(4,1fr);gap:30px;
padding:80px max(6vw,35px);text-align:center;
}
.about-stats div{display:flex;flex-direction:column;gap:8px}
.about-stats strong{
font-family:"Manrope",sans-serif;
font-size:clamp(34px,4vw,54px);font-weight:800;color:var(--blue-light);
}
.about-stats span{font-size:12px;opacity:.7;letter-spacing:.5px}
/* ---- 04 EXPERTISE ---- */
.about-expertise{
display:grid;grid-template-columns:1fr 1fr;gap:40px 60px;align-items:center;
padding:110px max(6vw,35px);
}
.expert-copy h2{
margin:14px 0 18px;font-family:"Manrope",sans-serif;
font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-2px;
}
.expert-copy h2 span{color:var(--blue)}
.expert-copy p{margin:0 0 20px;font-size:14px;line-height:1.8;max-width:420px;opacity:.85}
.about-text-link{
display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;
border-bottom:1px solid currentColor;padding-bottom:6px;
transition:gap .3s ease,color .3s ease;
}
.about-text-link:hover{gap:16px;color:var(--blue)}
.expert-image{height:340px;border-radius:26px;overflow:hidden}
.expert-image img{height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.expert-image:hover img{transform:scale(1.06)}
.tilt-card{transition:transform .4s var(--ease)}
.tilt-card:hover{transform:translateY(-6px)}
/* ---- 05 VALUES ---- */
.about-values{padding:110px max(6vw,35px)}
.about-section-head{max-width:600px;margin:0 auto 55px;text-align:center}
.about-section-head h2{
margin:14px 0 0;font-family:"Manrope",sans-serif;
font-size:clamp(34px,4.5vw,54px);line-height:1.05;letter-spacing:-2px;
}
.about-section-head h2 span{color:var(--blue)}
.values-track{
display:grid;grid-template-columns:repeat(5,1fr);gap:18px;
max-width:var(--container);margin:0 auto;
}
.value-item{
position:relative;padding:28px 20px;border:1px solid var(--border);border-radius:22px;
display:flex;flex-direction:column;gap:10px;
}
.value-item b{position:absolute;top:18px;right:20px;font-size:12px;font-weight:700;color:var(--blue);opacity:.6}
.value-icon{font-size:26px;color:var(--blue)}
.value-item h3{margin:4px 0 0;font-family:"Manrope",sans-serif;font-size:16px}
.value-item p{margin:0;font-size:12px;line-height:1.7;opacity:.75}
/* ---- 06 QUOTE ---- */
.about-quote{
display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:50px;
padding:100px max(6vw,35px);
}
.quote-image{height:420px;border-radius:28px;overflow:hidden}
.quote-image img{height:100%;object-fit:cover}
.quote-mark-about{
display:block;font-family:Georgia,serif;font-size:70px;line-height:.5;
color:var(--blue);margin-bottom:20px;
}
.quote-copy .typewriter-about{
font-size:20px;line-height:1.6;font-family:"Manrope",sans-serif;font-weight:500;
max-width:560px;margin:0 0 24px;
}
.quote-copy strong{display:block;font-size:14px}
.quote-copy>span{font-size:12px;opacity:.65}
.quote-dots{display:flex;gap:8px;margin-top:20px}
.quote-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}
.quote-dots i:first-child{background:var(--blue)}
/* ---- 07 CTA ---- */
.about-cta{
position:relative;min-height:480px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:100px 35px;overflow:hidden;
}
.about-cta-bg{
position:absolute;inset:0;
background:radial-gradient(circle at 50% 30%,rgba(40,103,255,.14),transparent 60%);
pointer-events:none;
}
.about-cta-copy{position:relative;z-index:2;max-width:700px}
.about-cta-copy h2{
margin:16px 0;font-family:"Manrope",sans-serif;
font-size:clamp(42px,6vw,72px);line-height:.98;letter-spacing:-3px;
}
.about-cta-copy h2 span{color:var(--blue)}
.about-cta-copy p{margin:0 auto;font-size:14px;opacity:.75;max-width:420px}
.about-cta-actions{
position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:14px;
justify-content:center;margin-top:30px;
}
.about-secondary{
display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 24px;
border-radius:50px;border:1px solid var(--border);font-size:13px;font-weight:700;
transition:transform .35s var(--ease),border-color .3s ease;
}
.about-secondary:hover{transform:translateY(-4px);border-color:var(--blue)}
.about-primary.dark-btn{background:var(--navy)}
html[data-theme="dark"] .about-primary.dark-btn{background:#fff;color:#071126}
/* ---- shared reveal / interaction hooks used across the about page ---- */
.reveal-about{opacity:0;transform:translateY(35px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-about.is-visible{opacity:1;transform:translateY(0)}
.split-reveal{display:inline-block}
/* ---- responsive ---- */
@media(max-width:1024px){
.about-hero,.about-story,.about-expertise,.about-quote{grid-template-columns:1fr}
.about-hero-media{height:420px;order:-1}
.image-stack{height:400px;margin-bottom:60px}
.values-track{grid-template-columns:repeat(2,1fr)}
.about-stats{grid-template-columns:repeat(2,1fr);gap:30px 20px}
.about-hero-ring{display:none}
}
@media(max-width:640px){
.about-hero{padding:calc(var(--header-height) + 55px) 20px 80px}
.values-track{grid-template-columns:1fr}
.about-stats{grid-template-columns:repeat(2,1fr)}
.quote-mark-about{font-size:50px}
.about-story,.about-expertise,.about-values,.about-quote{padding:80px 20px}
}
/* =========================================================
THEME-MATCHED GLASS BUBBLES (requested update)
Light mode -> blue glass bubbles. Dark mode -> white/frosted
glass bubbles. Overrides the previous multi-colour bubble
fills; shape, motion and count are unchanged.
========================================================= */
html[data-theme="light"] .theme-bubble{
background:
radial-gradient(circle at 30% 26%,rgba(255,255,255,.65),transparent 32%),
linear-gradient(135deg,rgba(40,103,255,.30),rgba(94,132,255,.16) 60%,rgba(40,103,255,.10)) !important;
border-color:rgba(40,103,255,.38) !important;
box-shadow:
0 10px 34px rgba(40,103,255,.20),
inset 0 0 22px rgba(255,255,255,.25) !important;
}
html[data-theme="dark"] .theme-bubble{
background:
radial-gradient(circle at 30% 26%,rgba(255,255,255,.55),transparent 32%),
linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.08) 60%,rgba(255,255,255,.04)) !important;
border-color:rgba(255,255,255,.35) !important;
box-shadow:
0 10px 34px rgba(0,0,0,.35),
inset 0 0 22px rgba(255,255,255,.16) !important;
}
/* =========================================================
READING PAGE — MOTION EDIT
No bubble effect on this page.
========================================================= */
.reading-page{
--reading-accent:#2867ff;
--reading-violet:#8d5cff;
--reading-cyan:#39d9ff;
--reading-ink:#09142b;
--reading-muted:#66758f;
--reading-surface:#f7f9fd;
overflow-x:hidden;
}
.reading-page .reading-filters{position:absolute;width:0;height:0;pointer-events:none;overflow:hidden}
.reading-page .reading-section{position:relative;max-width:1440px;margin:0 auto;padding-left:clamp(24px,6vw,92px);padding-right:clamp(24px,6vw,92px)}
.reading-hero{
min-height:calc(100vh - var(--header-height,78px));
display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);
align-items:center;gap:clamp(30px,6vw,100px);
padding-top:clamp(70px,9vw,130px);padding-bottom:clamp(70px,9vw,120px);
background:
radial-gradient(circle at 8% 18%,rgba(40,103,255,.14),transparent 32%),
linear-gradient(135deg,var(--surface,#f7f9fd),rgba(225,233,249,.55));
}
.reading-hero-copy{position:relative;z-index:2;max-width:700px}
.reading-eyebrow{display:inline-block;font-size:12px;letter-spacing:.22em;font-weight:800;color:var(--reading-accent);margin-bottom:20px}
.reading-title,.reading-story-copy h2,.reading-section-head h2,.reading-cta h2{
margin:0;color:var(--heading,#0b1733);font-family:"Space Grotesk",sans-serif;
font-size:clamp(52px,7vw,104px);line-height:.94;letter-spacing:-.065em;
}
.reading-title>span,.kinetic-title>span{display:block;overflow:hidden}
.reading-gradient{
background:linear-gradient(100deg,#2867ff 5%,#7a5cff 48%,#19bde8 90%);
-webkit-background-clip:text;background-clip:text;color:transparent;
background-size:220% auto;animation:readingShimmer 5s linear infinite;
}
.reading-lead{max-width:620px;font-size:clamp(16px,1.4vw,20px);line-height:1.8;color:var(--muted,#71809a);margin:32px 0 34px}
.reading-liquid-btn{
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:18px;
min-width:230px;padding:17px 26px;border-radius:55% 45% 48% 52% / 50% 46% 54% 50%;
color:#fff;background:linear-gradient(110deg,#2867ff,#6c5cff);
text-decoration:none;font-weight:800;overflow:hidden;isolation:isolate;
transition:transform .55s cubic-bezier(.16,1.5,.3,1),border-radius .55s ease,box-shadow .45s ease;
}
.reading-liquid-btn:before{content:"";position:absolute;inset:-25%;background:radial-gradient(circle at 20% 50%,rgba(255,255,255,.32),transparent 25%);transform:translateX(-100%);transition:transform .65s ease;z-index:-1}
.reading-liquid-btn:hover{transform:translateY(-6px) scale(1.03);border-radius:42% 58% 56% 44% / 57% 45% 55% 43%;box-shadow:0 18px 45px rgba(40,103,255,.3)}
.reading-liquid-btn:hover:before{transform:translateX(45%)}
.reading-liquid-btn b{font-size:20px;transition:transform .5s cubic-bezier(.16,1.6,.3,1)}
.reading-liquid-btn:hover b{transform:translate(5px,-5px) rotate(8deg)}
.reading-mini-points{display:flex;flex-wrap:wrap;gap:24px;margin-top:42px;color:var(--muted,#71809a);font-size:12px;font-weight:700;letter-spacing:.08em}
.reading-hero-visual{display:flex;justify-content:flex-end}
.reading-image-wrap{width:min(100%,620px);position:relative;overflow:hidden;border-radius:48% 52% 43% 57% / 38% 45% 55% 62%;background:#dce6f8;box-shadow:0 30px 90px rgba(8,27,67,.18);transition:border-radius 1s ease,transform .8s cubic-bezier(.16,1.2,.3,1)}
.reading-image-wrap:hover{border-radius:42% 58% 57% 43% / 50% 40% 60% 50%}
.reading-image-wrap img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;transform:scale(1.06);transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.reading-image-wrap:hover img{transform:scale(1.13) rotate(.6deg)}
.reading-glass-label{position:absolute;right:6%;bottom:6%;padding:15px 18px;border:1px solid rgba(255,255,255,.5);border-radius:20px;background:rgba(6,18,43,.7);backdrop-filter:blur(14px);color:#fff;display:grid;gap:3px;box-shadow:0 12px 30px rgba(0,0,0,.16)}
.reading-glass-label strong{font-size:12px;letter-spacing:.14em}.reading-glass-label small{opacity:.7}
.reading-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(35px,7vw,110px);align-items:center;padding-top:clamp(90px,11vw,160px);padding-bottom:clamp(90px,11vw,160px);background:var(--surface,#fff)}
.reading-story-media{position:relative;min-height:600px;overflow:hidden;border-radius:36px;background:#e8edf6}
.reading-story-media img{position:absolute;width:68%;height:75%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1),clip-path 1.1s cubic-bezier(.16,1,.3,1)}
.reading-img-back{left:0;top:0;clip-path:inset(0 100% 0 0);border-radius:30px}
.reading-img-front{right:0;bottom:0;clip-path:inset(100% 0 0 0);border-radius:30px}
.reading-story-media.is-revealed .reading-img-back,.reading-story-media.is-visible .reading-img-back{clip-path:inset(0 0 0 0);transform:translateX(4%)}
.reading-story-media.is-revealed .reading-img-front,.reading-story-media.is-visible .reading-img-front{clip-path:inset(0 0 0 0);transform:translateX(-3%)}
.reading-story-media:hover img{transform:scale(1.045)}
.reading-story-copy{max-width:620px}.reading-story-copy h2{font-size:clamp(46px,5vw,76px);margin-bottom:28px}
.reading-story-copy>p,.reading-section-head>p{font-size:17px;line-height:1.8;color:var(--muted,#71809a)}
.reading-feature-list{margin-top:35px;display:grid;gap:12px}
.reading-feature{display:flex;gap:18px;align-items:center;padding:17px 0;border-bottom:1px solid var(--border,rgba(17,37,70,.12));transition:transform .45s cubic-bezier(.16,1.5,.3,1),padding-left .4s ease}
.reading-feature:hover{transform:translateX(12px);padding-left:8px}
.reading-feature i{font-style:normal;font-weight:800;color:var(--reading-accent);font-size:12px;min-width:28px}
.reading-feature b{display:block;color:var(--heading,#0b1733);margin-bottom:4px}.reading-feature small{display:block;color:var(--muted,#71809a)}
.reading-products{padding-top:clamp(90px,10vw,140px);padding-bottom:clamp(100px,12vw,160px);background:linear-gradient(180deg,var(--soft,#eef3fa),var(--surface,#fff))}
.reading-section-head{max-width:750px;margin-bottom:55px}.reading-section-head h2{font-size:clamp(45px,5.5vw,82px);margin-bottom:20px}
.reading-product-track{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,36px)}
.reading-product{background:rgba(255,255,255,.7);border:1px solid var(--border,rgba(17,37,70,.12));border-radius:28px;overflow:hidden;transform-style:preserve-3d;transition:box-shadow .5s ease,border-radius .6s ease}
.reading-product:hover{box-shadow:0 25px 60px rgba(24,49,91,.15);border-radius:20px 34px 24px 38px}
.product-image{overflow:hidden;aspect-ratio:4/3;background:#e3eaf5}.product-image img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1),filter .5s ease}.reading-product:hover .product-image img{transform:scale(1.12);filter:saturate(1.1)}
.product-meta{padding:25px 25px 30px}.product-meta span{font-size:12px;letter-spacing:.17em;color:var(--reading-accent);font-weight:800}.product-meta h3{font-size:26px;margin:12px 0 8px;color:var(--heading,#0b1733)}.product-meta p{margin:0 0 22px;color:var(--muted,#71809a);line-height:1.6}.product-meta strong{color:var(--reading-accent)}
.reading-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:clamp(80px,9vw,130px);padding-bottom:clamp(80px,9vw,130px);background:linear-gradient(120deg,#071126,#101f46);overflow:hidden}
.reading-cta:before{content:"";position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(40,103,255,.3),transparent 65%);right:-180px;top:-220px;pointer-events:none}
.reading-cta h2{color:#fff;font-size:clamp(44px,6vw,86px)}.reading-cta .reading-eyebrow{color:#66a0ff}
.reading-page .reveal-up,.reading-page .reveal-side-left,.reading-page .reveal-side-right{opacity:0;transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.reading-page .reveal-up{transform:translateY(55px)}.reading-page .reveal-side-left{transform:translateX(-90px)}.reading-page .reveal-side-right{transform:translateX(90px)}
.reading-page .is-visible,.reading-page .reveal-up.is-visible,.reading-page .reveal-side-left.is-visible,.reading-page .reveal-side-right.is-visible{opacity:1;transform:none}
.reading-page .split-reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .8s cubic-bezier(.16,1.4,.3,1)}
.reading-page .split-reveal.is-visible{opacity:1;transform:none}
@keyframes readingShimmer{to{background-position:220% center}}
@keyframes readingKinetic{0%{opacity:0;transform:translateY(80px) rotate(2deg)}70%{transform:translateY(-7px) rotate(-.3deg)}100%{opacity:1;transform:translateY(0) rotate(0)}}
.reading-page .kinetic-title.is-visible>span{animation:readingKinetic .95s cubic-bezier(.16,1.4,.3,1) both}
.reading-page .kinetic-title.is-visible>span:nth-child(2){animation-delay:.12s}
.reading-page .kinetic-title.is-visible>span:nth-child(3){animation-delay:.24s}
.reading-page .spring-btn,.reading-page .spring-card{will-change:transform}
@media (max-width:900px){
.reading-hero{grid-template-columns:1fr;min-height:auto}.reading-hero-visual{justify-content:center}.reading-image-wrap{max-width:620px}
.reading-story{grid-template-columns:1fr}.reading-story-media{min-height:520px}.reading-story-copy{max-width:none}
.reading-product-track{grid-template-columns:1fr 1fr}.reading-cta{align-items:flex-start;flex-direction:column}
}
@media (max-width:600px){
.reading-page .reading-section{padding-left:20px;padding-right:20px}
.reading-hero{padding-top:55px}.reading-title{font-size:clamp(48px,14vw,70px)}.reading-lead{font-size:15px}
.reading-mini-points{gap:12px;font-size:12px}.reading-image-wrap{border-radius:35% 65% 45% 55% / 28% 40% 60% 72%}
.reading-story-media{min-height:400px}.reading-story-media img{width:76%;height:70%}
.reading-product-track{grid-template-columns:1fr}.reading-product{border-radius:22px}
.reading-cta h2{font-size:clamp(42px,13vw,62px)}
}
@media (prefers-reduced-motion:reduce){
.reading-page *, .reading-page *::before,.reading-page *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}
.reading-page .reading-title.reading-glitch{position:relative;animation:readingJitter .11s steps(2,end) 4}
.reading-page .reading-title.reading-glitch:before,.reading-page .reading-title.reading-glitch:after{
content:attr(data-glitch);position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none
}
.reading-page .reading-title.reading-glitch:before{color:#19d8ff;transform:translate(3px,-1px);clip-path:inset(8% 0 57% 0);opacity:.65}
.reading-page .reading-title.reading-glitch:after{color:#ff3ca6;transform:translate(-3px,1px);clip-path:inset(55% 0 8% 0);opacity:.55}
@keyframes readingJitter{0%{transform:translate(0)}25%{transform:translate(2px,-1px)}50%{transform:translate(-2px,1px)}75%{transform:translate(1px,1px)}100%{transform:translate(0)}}
[data-theme="dark"] .reading-page{
--reading-surface:#080f22;
--reading-ink:#f5f7ff;
--reading-muted:#9aa8c0;
}
[data-theme="dark"] .reading-page .reading-hero{
background:radial-gradient(circle at 8% 18%,rgba(40,103,255,.16),transparent 32%),linear-gradient(135deg,#080f22,#0d1933);
}
[data-theme="dark"] .reading-page .reading-story{background:#080f22}
[data-theme="dark"] .reading-page .reading-products{
background:linear-gradient(180deg,#0d1730,#080f22);
}
[data-theme="dark"] .reading-page .reading-product{
background:rgba(14,25,49,.78);border-color:rgba(255,255,255,.1)
}
[data-theme="dark"] .reading-page .reading-title,
[data-theme="dark"] .reading-page .reading-story-copy h2,
[data-theme="dark"] .reading-page .reading-section-head h2,
[data-theme="dark"] .reading-page .reading-feature b,
[data-theme="dark"] .reading-page .product-meta h3{color:#f5f7ff}
[data-theme="dark"] .reading-page .reading-lead,
[data-theme="dark"] .reading-page .reading-story-copy>p,
[data-theme="dark"] .reading-page .reading-section-head>p,
[data-theme="dark"] .reading-page .reading-feature small,
[data-theme="dark"] .reading-page .product-meta p{color:#9aa8c0}
/* =========================================================
FRAMES PAGE — reading / sunglasses / sports / kids
Each category re-themes via [data-frame-category] on
Nav, footer and global brand palette are untouched.
========================================================= */
.frames-page{
--f-accent:#2867ff;
--f-violet:#8d5cff;
--f-cyan:#39d9ff;
--f-ink:#09142b;
--f-muted:#66758f;
overflow-x:hidden;
}
/* ---- per-category palettes (light mode) ---- */
.frames-page[data-frame-category="reading"]{--f-accent:#2867ff;--f-violet:#8d5cff;--f-cyan:#39d9ff}
.frames-page[data-frame-category="sunglasses"]{--f-accent:#e8930b;--f-violet:#ff6a3d;--f-cyan:#ffd27a}
.frames-page[data-frame-category="sports"]{--f-accent:#e8412c;--f-violet:#ff7a1a;--f-cyan:#ff9e4d}
.frames-page[data-frame-category="kids"]{--f-accent:#d43fa0;--f-violet:#ffb020;--f-cyan:#3fc9d4}
/* ---- per-category palettes (dark mode gets brighter, more saturated) ---- */
[data-theme="dark"] .frames-page[data-frame-category="reading"]{--f-accent:#5e93ff;--f-violet:#a58bff;--f-cyan:#5fe4ff}
[data-theme="dark"] .frames-page[data-frame-category="sunglasses"]{--f-accent:#ffb43d;--f-violet:#ff8a5c;--f-cyan:#ffe19c}
[data-theme="dark"] .frames-page[data-frame-category="sports"]{--f-accent:#ff5b42;--f-violet:#ff9a3d;--f-cyan:#ffbf7a}
[data-theme="dark"] .frames-page[data-frame-category="kids"]{--f-accent:#ff6cc2;--f-violet:#ffcc4d;--f-cyan:#5fe0ea}
.frames-page .frames-section{position:relative;max-width:1440px;margin:0 auto;padding-left:clamp(24px,6vw,92px);padding-right:clamp(24px,6vw,92px)}
.frames-hero{
position:relative;overflow:hidden;
min-height:calc(100vh - var(--header-height,78px));
display:grid;grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr);
align-items:center;gap:clamp(30px,6vw,100px);
padding-top:clamp(70px,9vw,130px);padding-bottom:clamp(60px,8vw,110px);
background:radial-gradient(circle at 8% 18%,rgba(40,103,255,.14),transparent 32%),linear-gradient(135deg,var(--surface,#f7f9fd),rgba(225,233,249,.55));
transition:background 1s ease;
}
.frames-decor-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;transition:filter .8s ease,opacity .8s ease}
.frames-hero-copy,.frames-hero-visual{position:relative;z-index:2}
.frames-hero-copy{max-width:680px}
.frames-eyebrow{display:inline-block;font-size:12px;letter-spacing:.22em;font-weight:800;color:var(--f-accent);margin-bottom:20px;transition:color .5s ease}
.frames-title,.frames-story-copy h2,.frames-section-head h2,.frames-cta h2{
margin:0;color:var(--heading,#0b1733);font-family:"Space Grotesk",sans-serif;
font-size:clamp(48px,6.5vw,92px);line-height:.96;letter-spacing:-.06em;
}
.frames-title>span{display:block;overflow:hidden}
.frames-gradient{
background:linear-gradient(100deg,var(--f-accent) 5%,var(--f-violet) 48%,var(--f-cyan) 90%);
-webkit-background-clip:text;background-clip:text;color:transparent;
background-size:220% auto;animation:framesShimmer 5s linear infinite;
transition:background .6s ease;
}
.frames-lead{max-width:600px;font-size:clamp(16px,1.4vw,19px);line-height:1.8;color:var(--muted,#71809a);margin:26px 0 32px}
.frames-tabs{position:relative;display:inline-flex;flex-wrap:wrap;gap:6px;padding:6px;border-radius:30px;background:rgba(40,103,255,.08);border:1px solid var(--border,rgba(17,37,70,.12));margin-bottom:32px}
.frames-tab{position:relative;z-index:2;border:none;background:transparent;padding:10px 20px;border-radius:24px;font-weight:800;font-size:13px;color:var(--f-muted);cursor:pointer;transition:color .4s ease,transform .3s cubic-bezier(.16,1.5,.3,1)}
.frames-tab.is-active{color:#fff}
.frames-tab-glider{position:absolute;top:6px;left:6px;height:calc(100% - 12px);border-radius:24px;background:linear-gradient(110deg,var(--f-accent),var(--f-violet));transition:transform .5s cubic-bezier(.16,1,.3,1),width .5s cubic-bezier(.16,1,.3,1),background .6s ease;z-index:1}
.frames-liquid-btn{
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:18px;
min-width:220px;padding:16px 26px;border-radius:55% 45% 48% 52% / 50% 46% 54% 50%;
color:#fff;background:linear-gradient(110deg,var(--f-accent),var(--f-violet));
text-decoration:none;font-weight:800;overflow:hidden;isolation:isolate;
transition:transform .55s cubic-bezier(.16,1.5,.3,1),border-radius .55s ease,box-shadow .45s ease,background .6s ease;
}
.frames-liquid-btn:before{content:"";position:absolute;inset:-25%;background:radial-gradient(circle at 20% 50%,rgba(255,255,255,.32),transparent 25%);transform:translateX(-100%);transition:transform .65s ease;z-index:-1}
.frames-liquid-btn:hover{transform:translateY(-6px) scale(1.03);border-radius:42% 58% 56% 44% / 57% 45% 55% 43%;box-shadow:0 18px 45px rgba(40,103,255,.3)}
.frames-liquid-btn:hover:before{transform:translateX(45%)}
.frames-liquid-btn b{font-size:20px;transition:transform .5s cubic-bezier(.16,1.6,.3,1)}
.frames-liquid-btn:hover b{transform:translate(5px,-5px) rotate(8deg)}
.frames-hero-visual{display:flex;justify-content:flex-end}
.frames-image-wrap{width:min(100%,600px);position:relative;overflow:hidden;border-radius:44% 56% 40% 60% / 42% 40% 60% 58%;background:#dce6f8;box-shadow:0 30px 90px rgba(8,27,67,.18);transition:border-radius 1s ease,transform .6s cubic-bezier(.16,1.2,.3,1)}
.frames-image-wrap:hover{border-radius:40% 60% 58% 42% / 52% 42% 58% 48%}
.frames-image-wrap img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;transform:scale(1.05);transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .35s ease}
.frames-image-wrap:hover img{transform:scale(1.12) rotate(.5deg)}
.frames-glass-label{position:absolute;right:6%;bottom:6%;padding:15px 18px;border:1px solid rgba(255,255,255,.5);border-radius:20px;background:rgba(6,18,43,.7);backdrop-filter:blur(14px);color:#fff;display:grid;gap:3px;box-shadow:0 12px 30px rgba(0,0,0,.16)}
.frames-glass-label strong{font-size:12px;letter-spacing:.14em}.frames-glass-label small{opacity:.7}
/* mask reveal: image unveils through an expanding circle */
.frames-image-wrap.mask-reveal{clip-path:circle(22% at 50% 50%);transition:clip-path 1.1s cubic-bezier(.16,1,.3,1),border-radius 1s ease,transform .6s cubic-bezier(.16,1.2,.3,1)}
.frames-image-wrap.mask-reveal.is-visible{clip-path:circle(75% at 50% 50%)}
.frames-marquee{overflow:hidden;padding-top:34px;padding-bottom:34px;background:linear-gradient(90deg,var(--soft,#eef3fa),rgba(238,243,250,.4));border-top:1px solid var(--border,rgba(17,37,70,.12));border-bottom:1px solid var(--border,rgba(17,37,70,.12))}
.frames-marquee-track{display:flex;width:max-content;gap:14px;align-items:center;animation:framesMarquee 22s linear infinite}
.frames-marquee:hover .frames-marquee-track{animation-play-state:paused}
.frames-marquee-track span{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(18px,2.4vw,26px);color:var(--f-accent);white-space:nowrap;transition:color .6s ease}
.frames-marquee-track i{font-style:normal;color:var(--f-cyan);font-size:12px;transition:color .6s ease}
.frames-story{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(35px,7vw,110px);align-items:center;padding-top:clamp(90px,11vw,150px);padding-bottom:clamp(90px,11vw,150px);background:var(--surface,#fff)}
.frames-story-media{position:relative;min-height:580px;overflow:hidden;border-radius:36px;background:#e8edf6}
.frames-story-media img{position:absolute;width:68%;height:75%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1),clip-path 1.1s cubic-bezier(.16,1,.3,1),opacity .35s ease}
.frames-img-back{left:0;top:0;clip-path:inset(0 100% 0 0);border-radius:30px}
.frames-img-front{right:0;bottom:0;clip-path:inset(100% 0 0 0);border-radius:30px}
.frames-story-media.is-visible .frames-img-back{clip-path:inset(0 0 0 0);transform:translateX(4%)}
.frames-story-media.is-visible .frames-img-front{clip-path:inset(0 0 0 0);transform:translateX(-3%)}
.frames-story-media:hover img{transform:scale(1.045)}
.frames-story-copy{max-width:620px}.frames-story-copy h2{font-size:clamp(44px,5vw,72px);margin-bottom:26px}
.frames-story-copy>p,.frames-section-head>p{font-size:17px;line-height:1.8;color:var(--muted,#71809a)}
.frames-feature-list{margin-top:32px;display:grid;gap:12px}
.frames-feature{display:flex;gap:18px;align-items:center;padding:17px 0;border-bottom:1px solid var(--border,rgba(17,37,70,.12));transition:transform .45s cubic-bezier(.16,1.5,.3,1),padding-left .4s ease}
.frames-feature:hover{transform:translateX(12px);padding-left:8px}
.frames-feature i{font-style:normal;font-weight:800;color:var(--f-accent);font-size:12px;min-width:28px;transition:color .6s ease}
.frames-feature b{display:block;color:var(--heading,#0b1733);margin-bottom:4px}.frames-feature small{display:block;color:var(--muted,#71809a)}
.frames-products{position:relative;padding-top:clamp(90px,10vw,130px);padding-bottom:clamp(100px,12vw,150px);background:linear-gradient(180deg,var(--soft,#eef3fa),var(--surface,#fff))}
.frames-section-head{max-width:750px;margin-bottom:30px}.frames-section-head h2{font-size:clamp(42px,5.2vw,74px);margin-bottom:18px}
.frames-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.frames-chip{border:1px solid var(--border,rgba(17,37,70,.12));background:transparent;padding:9px 18px;border-radius:20px;font-weight:700;font-size:13px;color:var(--f-muted);cursor:pointer;transition:background .35s ease,border-color .35s ease,color .35s ease,transform .3s cubic-bezier(.16,1.5,.3,1)}
.frames-chip.is-active,.frames-chip:hover{background:var(--f-accent);border-color:var(--f-accent);color:#fff}
.frames-product-track{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,32px)}
.frames-product-track.is-draggable{cursor:grab}
.frames-product-track.is-dragging{cursor:grabbing;user-select:none}
.frames-product{position:relative;background:rgba(255,255,255,.7);border:1px solid var(--border,rgba(17,37,70,.12));border-radius:26px;overflow:hidden;transform-style:preserve-3d;transition:box-shadow .5s ease,border-radius .6s ease,opacity .4s ease,transform .4s ease}
.frames-product.is-hidden{display:none}
.frames-product:hover{box-shadow:0 25px 60px rgba(24,49,91,.15);border-radius:18px 32px 22px 36px}
/* light sweep shine on hover */
.frames-product:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);transform:translateX(-120%);transition:transform .85s cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:2}
.frames-product:hover:after{transform:translateX(120%)}
.frames-product .product-image{overflow:hidden;aspect-ratio:4/3;background:#e3eaf5}
.frames-product .product-image img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1),filter .5s ease}
.frames-product:hover .product-image img{transform:scale(1.12);filter:saturate(1.1)}
.frames-product .product-meta{padding:22px 22px 26px}
.frames-product .product-meta span{font-size:12px;letter-spacing:.17em;color:var(--f-accent);font-weight:800;transition:color .6s ease}
.frames-product .product-meta h3{font-size:23px;margin:10px 0 6px;color:var(--heading,#0b1733)}
.frames-product .product-meta p{margin:0 0 18px;color:var(--muted,#71809a);line-height:1.6;font-size:14px}
.frames-product .product-meta strong{color:var(--f-accent);font-size:13px;transition:color .6s ease}
.frames-cta{position:relative;padding-top:clamp(80px,9vw,130px);padding-bottom:clamp(80px,9vw,130px);background:linear-gradient(120deg,#071126,#101f46);overflow:hidden}
.frames-blob{position:absolute;border-radius:50%;pointer-events:none;filter:blur(2px);will-change:transform;transition:background 1s ease}
.frames-blob-a{width:460px;height:460px;background:radial-gradient(circle,color-mix(in srgb,var(--f-accent) 55%,transparent),transparent 65%);right:-160px;top:-200px}
.frames-blob-b{width:360px;height:360px;background:radial-gradient(circle,color-mix(in srgb,var(--f-violet) 55%,transparent),transparent 65%);left:-120px;bottom:-160px}
.frames-cta-inner{position:relative;z-index:2}
.frames-stats{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,64px);margin-bottom:44px}
.frames-stat strong{display:block;font-family:"Space Grotesk",sans-serif;font-size:clamp(32px,4vw,46px);color:var(--f-cyan);transition:color .6s ease}
.frames-stat small{display:block;color:#9aa8c0;font-size:13px;margin-top:4px}
.frames-cta h2{color:#fff;font-size:clamp(42px,5.6vw,78px)}
.frames-cta .frames-eyebrow{color:var(--f-cyan)}
.frames-page .reveal-up,.frames-page .reveal-side-left,.frames-page .reveal-side-right{opacity:0;transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.frames-page .reveal-up{transform:translateY(55px)}.frames-page .reveal-side-left{transform:translateX(-90px)}.frames-page .reveal-side-right{transform:translateX(90px)}
.frames-page .is-visible,.frames-page .reveal-up.is-visible,.frames-page .reveal-side-left.is-visible,.frames-page .reveal-side-right.is-visible{opacity:1;transform:none}
.frames-page .split-reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .8s cubic-bezier(.16,1.4,.3,1)}
.frames-page .split-reveal.is-visible{opacity:1;transform:none}
@keyframes framesShimmer{to{background-position:220% center}}
@keyframes framesMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes framesKinetic{0%{opacity:0;transform:translateY(80px) rotate(2deg)}70%{transform:translateY(-7px) rotate(-.3deg)}100%{opacity:1;transform:translateY(0) rotate(0)}}
.frames-page .kinetic-title.is-visible>span{animation:framesKinetic .95s cubic-bezier(.16,1.4,.3,1) both}
.frames-page .kinetic-title.is-visible>span:nth-child(2){animation-delay:.12s}
/* confetti burst particle (spawned + removed by JS) */
.frames-confetti-bit{position:fixed;top:0;left:0;width:7px;height:7px;border-radius:2px;pointer-events:none;z-index:999;will-change:transform,opacity}
/* category cross-fade wrapper */
.frames-page .frames-fade-target{transition:opacity .28s ease}
@media (max-width:900px){
.frames-hero{grid-template-columns:1fr;min-height:auto}.frames-hero-visual{justify-content:center}.frames-image-wrap{max-width:600px}
.frames-story{grid-template-columns:1fr}.frames-story-media{min-height:500px}.frames-story-copy{max-width:none}
.frames-product-track{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
.frames-page .frames-section{padding-left:20px;padding-right:20px}
.frames-hero{padding-top:55px}.frames-title{font-size:clamp(44px,13vw,62px)}
.frames-tabs{flex-wrap:wrap}
.frames-story-media{min-height:380px}.frames-story-media img{width:76%;height:70%}
.frames-product-track{grid-template-columns:repeat(3,80vw);grid-auto-flow:column;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.frames-product{scroll-snap-align:start}
.frames-stats{gap:26px}
}
@media (prefers-reduced-motion:reduce){
.frames-page *,.frames-page *::before,.frames-page *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.frames-decor-canvas{display:none}
}
[data-theme="dark"] .frames-page{--f-muted:#9aa8c0}
[data-theme="dark"] .frames-page .frames-hero{background:radial-gradient(circle at 8% 18%,rgba(40,103,255,.16),transparent 32%),linear-gradient(135deg,#080f22,#0d1933)}
[data-theme="dark"] .frames-page .frames-marquee{background:linear-gradient(90deg,#0d1730,#080f22);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .frames-page .frames-story{background:#080f22}
[data-theme="dark"] .frames-page .frames-products{background:linear-gradient(180deg,#0d1730,#080f22)}
[data-theme="dark"] .frames-page .frames-product{background:rgba(14,25,49,.78);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .frames-page .frames-title,
[data-theme="dark"] .frames-page .frames-story-copy h2,
[data-theme="dark"] .frames-page .frames-section-head h2,
[data-theme="dark"] .frames-page .frames-feature b,
[data-theme="dark"] .frames-page .product-meta h3{color:#f5f7ff}
[data-theme="dark"] .frames-page .frames-lead,
[data-theme="dark"] .frames-page .frames-story-copy>p,
[data-theme="dark"] .frames-page .frames-section-head>p,
[data-theme="dark"] .frames-page .frames-feature small,
[data-theme="dark"] .frames-page .product-meta p{color:#9aa8c0}
[data-theme="dark"] .frames-page .frames-tabs{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .frames-page .frames-chip{border-color:rgba(255,255,255,.12);color:#9aa8c0}
/* =========================================================
FRAMES CATEGORY EXPERIENCES — NO BOX / NO EMPTY GAPS
Reading page is intentionally untouched.
========================================================= */
.frames-page{--fx-bg:#07101f;--fx-text:#f7f9ff;--fx-muted:#8f9bb1;--fx-line:rgba(255,255,255,.13);background:var(--fx-bg);overflow-x:hidden}
.frames-page #framesApp{margin:0;padding:0}
.frames-page .fx-section{position:relative;margin:0;padding:clamp(64px,7vw,100px) clamp(22px,7vw,110px);overflow:hidden}
.frames-page .fx-kicker{display:inline-block;font-size:12px;letter-spacing:.24em;font-weight:800;color:var(--f-accent);margin-bottom:18px}
.frames-page .fx-copy{position:relative;z-index:3;max-width:650px}
.frames-page .fx-copy h2{font-family:"Space Grotesk",sans-serif;font-size:clamp(42px,6vw,82px);line-height:.94;letter-spacing:-.055em;color:var(--fx-text);margin:0 0 22px}
.frames-page .fx-copy p{font-size:16px;line-height:1.8;color:var(--fx-muted);max-width:590px;margin:0}
.frames-page .fx-hero{min-height:calc(100vh - 78px);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(30px,6vw,100px);background:radial-gradient(circle at 78% 40%,color-mix(in srgb,var(--f-accent) 18%,transparent),transparent 26%),linear-gradient(135deg,#050b16,#0a1428 60%,#06101f)}
.frames-page .fx-noise{position:absolute;inset:0;opacity:.1;background-image:radial-gradient(rgba(255,255,255,.5) .5px,transparent .6px);background-size:5px 5px;animation:fxNoise 1.8s steps(2) infinite}
.frames-page .fx-scanline{position:absolute;inset:0;background:linear-gradient(transparent 49%,rgba(255,255,255,.025) 50%,transparent 51%);background-size:100% 7px;pointer-events:none}
.frames-page .fx-shape{position:absolute;pointer-events:none;border:1px solid color-mix(in srgb,var(--f-accent) 42%,transparent);border-radius:50%;animation:fxFloat 8s ease-in-out infinite}
.frames-page .fx-shape-a{width:42vw;height:42vw;right:-24vw;top:-14vw}.frames-page .fx-shape-b{width:18vw;height:18vw;left:-8vw;bottom:-8vw;animation-delay:-3s}
.frames-page .category-rail{position:absolute;z-index:8;top:26px;left:clamp(22px,7vw,110px);display:flex;gap:clamp(15px,2.5vw,38px);align-items:center}
.frames-page .rail-link{display:flex;gap:8px;align-items:center;color:#7f8ca3;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.06em;position:relative;padding:7px 0;transition:color .3s ease,transform .3s ease}
.frames-page .rail-link span{font-size:12px;color:var(--f-accent)}.frames-page .rail-link:hover,.frames-page .rail-link.active{color:#fff;transform:translateY(-2px)}
.frames-page .rail-link.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--f-accent);box-shadow:0 0 15px var(--f-accent)}
.frames-page .fx-hero-copy{position:relative;z-index:3;padding-top:45px}.frames-page .fx-title{white-space:normal;font-family:"Space Grotesk",sans-serif;font-size:clamp(58px,8vw,116px);line-height:.88;letter-spacing:-.075em;color:#fff;margin:0 0 28px;text-wrap:balance}
.frames-page .fx-title::first-line{color:#fff}.frames-page .fx-hero-copy>p{max-width:570px;color:#a8b3c7;line-height:1.8;font-size:17px;margin:0 0 30px}
.frames-page .fx-action{display:inline-flex;align-items:center;gap:22px;text-decoration:none;color:#fff;font-weight:800;font-size:13px;position:relative;padding:13px 0;border-bottom:1px solid color-mix(in srgb,var(--f-accent) 70%,transparent);transition:gap .45s cubic-bezier(.16,1.5,.3,1),color .3s ease}
.frames-page .fx-action:hover{gap:32px;color:var(--f-cyan)}.frames-page .fx-action b{font-size:20px;font-weight:400}
.frames-page .fx-hero-art{position:relative;min-height:540px;display:grid;place-items:center;z-index:2;transition:transform .4s ease-out}.frames-page .fx-hero-art img{position:relative;z-index:3;width:min(95%,620px);max-height:520px;object-fit:contain;filter:drop-shadow(0 35px 45px rgba(0,0,0,.5));animation:fxProductFloat 5s ease-in-out infinite}
.frames-page .fx-orbit{position:absolute;border:1px solid color-mix(in srgb,var(--f-accent) 60%,transparent);border-radius:50%;transform:rotate(-18deg);animation:fxOrbit 15s linear infinite}.frames-page .orbit-one{width:390px;height:190px}.frames-page .orbit-two{width:510px;height:250px;animation-duration:22s;animation-direction:reverse;border-color:color-mix(in srgb,var(--f-cyan) 45%,transparent)}.frames-page .orbit-three{width:620px;height:310px;animation-duration:31s;border-style:dashed;opacity:.55}
.frames-page .fx-floating-tag{position:absolute;z-index:5;right:4%;bottom:14%;font-size:12px;letter-spacing:.16em;color:#fff;padding-bottom:7px;border-bottom:1px solid var(--f-accent);animation:fxTag 3s ease-in-out infinite}.frames-page .fx-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--f-accent);box-shadow:0 0 18px var(--f-accent);animation:fxDot 3s ease-in-out infinite}.frames-page .d1{top:18%;right:12%}.frames-page .d2{left:10%;bottom:25%;animation-delay:-1s}.frames-page .d3{right:18%;top:62%;animation-delay:-2s}.frames-page .fx-scroll-note{position:absolute;bottom:28px;left:clamp(22px,7vw,110px);font-size:12px;letter-spacing:.2em;color:#64728a;display:flex;align-items:center;gap:12px}.frames-page .fx-scroll-note span{width:55px;height:1px;background:var(--f-accent);animation:fxScroll 2s ease-in-out infinite}
/* SUNGLASSES — solar / lens / orbit */
.frames-page.theme-solar{--fx-bg:#080b10}.frames-page.theme-solar .fx-title{background:linear-gradient(110deg,#fff 20%,#ffbf4a 52%,#ff7040 90%);-webkit-background-clip:text;background-clip:text;color:transparent}.frames-page.theme-solar .fx-lens{background:#0b0e13;min-height:650px;display:flex;align-items:center}.fx-lens-grid{width:min(1250px,100%);margin:auto;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(45px,8vw,120px);align-items:center}.fx-lens-visual{height:500px;position:relative;display:grid;place-items:center;transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .4s ease}.fx-lens-visual img{width:78%;height:78%;object-fit:cover;clip-path:circle(43%);filter:saturate(.7) contrast(1.1)}.lens-ring{position:absolute;border:1px solid rgba(255,190,70,.45);border-radius:50%;animation:fxRing 6s ease-in-out infinite}.lens-ring.r1{width:330px;height:330px}.lens-ring.r2{width:440px;height:440px;border-color:rgba(255,100,50,.25);animation-delay:-2s}.lens-readout{position:absolute;bottom:12%;left:10%;font:800 12px/1 Inter,sans-serif;letter-spacing:.2em;color:#ffbf4a}
.fx-line-list{margin-top:30px}.fx-line-list div{display:flex;gap:20px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.11);color:#dce1ea;transition:padding .35s ease,color .35s ease}.fx-line-list div:hover{padding-left:12px;color:#ffbf4a}.fx-line-list b{font-size:12px;color:#ff7040}.fx-line-list span{font-size:13px}
.fx-orbit-section{min-height:760px;background:radial-gradient(circle at 50% 52%,rgba(255,163,45,.13),transparent 30%),#090b0f;display:grid;place-items:center}.center-copy{text-align:center;margin:auto}.center-copy p{margin:0 auto}.sun-word{position:absolute;left:-10vw;top:15%;font:900 clamp(130px,24vw,360px)/.8 "Space Grotesk";letter-spacing:-.08em;color:rgba(255,255,255,.025);white-space:nowrap}.style-orbit{position:relative;width:min(650px,75vw);aspect-ratio:1;margin-top:15px;display:grid;place-items:center}.style-core{width:48%;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 90px rgba(255,160,30,.16);animation:fxProductFloat 5s ease-in-out infinite}.style-core img{width:100%;height:100%;object-fit:cover}.style-orbit:before,.style-orbit:after{content:"";position:absolute;inset:10%;border:1px solid rgba(255,190,70,.3);border-radius:50%;animation:fxOrbit 18s linear infinite}.style-orbit:after{inset:20%;border-color:rgba(255,90,45,.3);animation-direction:reverse;animation-duration:12s}.style-orbit>span{position:absolute;color:#a9b0bd;font-size:12px;letter-spacing:.22em;font-weight:800}.style-orbit>span:nth-of-type(1){top:7%;left:50%}.style-orbit>span:nth-of-type(2){bottom:13%;right:3%}.style-orbit>span:nth-of-type(3){bottom:16%;left:5%}
.fx-spotlight{min-height:650px;background:#05070a;display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:6vw}.spotlight-copy strong{display:block;font:700 36px "Space Grotesk";color:#ffbf4a;margin:28px 0}.fx-underlink{color:#fff;text-decoration:none;border-bottom:1px solid #ff7040;padding-bottom:8px;font-size:12px;font-weight:800}.spotlight-img{position:relative;height:min(620px,65vw);overflow:hidden;clip-path:polygon(12% 0,100% 7%,92% 100%,0 90%);background:#111}.spotlight-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1);filter:saturate(.75) contrast(1.1)}.spotlight-img:hover img{transform:scale(1.07)}.light-sweep{position:absolute;inset:-20% -50%;background:linear-gradient(110deg,transparent 43%,rgba(255,200,110,.28) 50%,transparent 57%);transform:translateX(-60%);animation:fxSweep 4.5s ease-in-out infinite}
.solar-cta{min-height:520px;background:radial-gradient(circle at 50% 40%,rgba(255,150,30,.18),transparent 25%),#080a0d;display:grid;place-items:center;text-align:center}.solar-cta .cta-rings,.velocity-cta .cta-rings,.play-cta .cta-rings{position:absolute;width:650px;height:650px;border:1px solid rgba(255,180,70,.22);border-radius:50%;animation:fxOrbit 20s linear infinite}.solar-cta .cta-rings:before,.velocity-cta .cta-rings:before,.play-cta .cta-rings:before{content:"";position:absolute;inset:13%;border:1px dashed currentColor;border-radius:50%;opacity:.5}.cta-orb{position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff, var(--f-accent) 12%,transparent 65%);filter:blur(2px);opacity:.25;animation:fxPulse 3s ease-in-out infinite}
/* SPORTS — velocity / speed / performance */
.frames-page.theme-velocity{--fx-bg:#050b0a}
/* SPORTS HERO — interactive hover image + animated center bridge */
.frames-page.theme-velocity .velocity-hero{
position:relative;
overflow:hidden;
grid-template-columns:minmax(0,.88fr) minmax(420px,1.12fr);
gap:0;
background:
radial-gradient(circle at 76% 48%,rgba(95,255,70,.10),transparent 23%),
linear-gradient(125deg,#030706 0%,#071612 52%,#07151b 100%);
}
.frames-page.theme-velocity .velocity-hero-copy{
position:relative;
z-index:6;
max-width:650px;
padding-right:clamp(15px,3vw,55px);
}
.frames-page.theme-velocity .velocity-title{
color:#fff;
background:linear-gradient(100deg,#fff 12%,#eaffd0 42%,#aaff43 68%,#34e4d5 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.frames-page.theme-velocity .velocity-hero-visual{
position:relative;
min-height:560px;
display:grid;
place-items:center;
z-index:5;
perspective:1100px;
}
.velocity-image-stack{
--mx:0px;--my:0px;--rx:0deg;--ry:0deg;
position:relative;
width:min(100%,650px);
height:470px;
transform:translate3d(var(--mx),var(--my),0) rotateX(var(--rx)) rotateY(var(--ry));
transform-style:preserve-3d;
transition:transform .28s cubic-bezier(.16,1,.3,1);
isolation:isolate;
}
.velocity-image-stack::before{
content:"";
position:absolute;
inset:-22px -30px;
border:1px solid rgba(90,255,90,.22);
clip-path:polygon(0 8%,92% 0,100% 90%,8% 100%);
transform:translateZ(-30px);
animation:velocityFramePulse 4s ease-in-out infinite;
}
.velocity-image-stack::after{
content:"";
position:absolute;
inset:18px;
border:1px dashed rgba(52,228,213,.25);
clip-path:polygon(2% 10%,94% 0,100% 88%,7% 100%);
pointer-events:none;
animation:velocityFrameSpin 18s linear infinite;
}
.velocity-image{
position:absolute;
inset:0;
overflow:hidden;
clip-path:polygon(0 7%,94% 0,100% 88%,7% 100%);
box-shadow:0 30px 80px rgba(0,0,0,.45);
transition:opacity .65s ease,transform .8s cubic-bezier(.16,1,.3,1),filter .65s ease;
}
.velocity-image img{
width:100%;height:100%;object-fit:cover;
display:block;
transition:transform 1s cubic-bezier(.16,1,.3,1),filter .65s ease;
}
.velocity-image-main{opacity:1;z-index:2;}
.velocity-image-hover{opacity:0;z-index:3;transform:scale(1.035);}
.velocity-image-stack:hover .velocity-image-main{opacity:0;transform:scale(.97);filter:blur(2px) saturate(.75);}
.velocity-image-stack:hover .velocity-image-hover{opacity:1;transform:scale(1);filter:saturate(1.15) contrast(1.05);}
.velocity-image-stack:hover .velocity-image img{transform:scale(1.07);}
.velocity-image-sheen{
position:absolute;inset:-30% -70%;
z-index:5;pointer-events:none;
background:linear-gradient(110deg,transparent 40%,rgba(170,255,67,.22) 48%,rgba(52,228,213,.12) 51%,transparent 59%);
transform:translateX(-45%) skewX(-14deg);
animation:velocitySheen 4.8s ease-in-out infinite;
mix-blend-mode:screen;
}
.velocity-image-label{
position:absolute;z-index:7;right:24px;bottom:22px;
padding:8px 11px;
border:1px solid rgba(170,255,67,.5);
background:rgba(2,10,8,.72);
backdrop-filter:blur(8px);
color:#eaffd0;
font:800 12px "Space Grotesk",sans-serif;
letter-spacing:.18em;
opacity:.85;
transition:transform .35s ease,background .35s ease;
}
.velocity-image-stack:hover .velocity-image-label{
transform:translateY(-6px);
background:rgba(8,35,24,.82);
}
.velocity-corner{
position:absolute;
font:800 12px "Space Grotesk",sans-serif;
letter-spacing:.2em;
color:#aaff43;
z-index:8;
}
.velocity-corner-a{left:2%;top:18%;}
.velocity-corner-b{right:3%;bottom:10%;}
.velocity-gap-animation{
position:absolute;
left:46%;
top:50%;
width:clamp(130px,16vw,245px);
height:clamp(260px,40vh,420px);
transform:translate(-50%,-50%);
z-index:4;
pointer-events:none;
}
.velocity-gap-animation::before{
content:"";
position:absolute;
inset:5% 28%;
background:repeating-linear-gradient(90deg,transparent 0 12px,rgba(170,255,67,.16) 13px 14px,transparent 15px 28px);
transform:skewX(-18deg);
mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 75%,transparent);
animation:velocityGapFlow 2.2s linear infinite;
}
.velocity-gap-animation small{
position:absolute;
left:50%;bottom:3%;
transform:translateX(-50%);
white-space:nowrap;
font:800 12px "Space Grotesk",sans-serif;
letter-spacing:.25em;
color:rgba(170,255,67,.72);
}
.vg-orbit{
position:absolute;left:50%;top:50%;
border:1px solid rgba(52,228,213,.26);
border-radius:50%;
transform:translate(-50%,-50%) rotate(-20deg);
animation:velocityGapOrbit 8s linear infinite;
}
.vg-o1{width:100%;height:34%;}
.vg-o2{width:72%;height:22%;border-color:rgba(170,255,67,.35);animation-duration:5.5s;animation-direction:reverse;}
.vg-line{
position:absolute;left:50%;top:50%;
width:88%;height:1px;
transform:translate(-50%,-50%) rotate(-16deg);
background:linear-gradient(90deg,transparent,rgba(170,255,67,.8),transparent);
animation:velocityLineDash 1.7s linear infinite;
}
.vg-l2{transform:translate(-50%,-50%) rotate(16deg);animation-delay:-.55s;background:linear-gradient(90deg,transparent,rgba(52,228,213,.65),transparent);}
.vg-l3{transform:translate(-50%,-50%) rotate(0deg);animation-delay:-1.05s;}
.vg-pulse{
position:absolute;left:50%;top:50%;width:12px;height:12px;
border:1px solid #aaff43;border-radius:50%;
transform:translate(-50%,-50%);
box-shadow:0 0 24px rgba(170,255,67,.65);
animation:velocityPulse 2s ease-in-out infinite;
}
@keyframes velocityFramePulse{
0%,100%{opacity:.35;transform:translateZ(-30px) scale(.99)}
50%{opacity:.75;transform:translateZ(-30px) scale(1.015)}
}
@keyframes velocityFrameSpin{to{transform:rotate(360deg)}}
@keyframes velocitySheen{
0%,20%{transform:translateX(-55%) skewX(-14deg);opacity:0}
42%{opacity:1}
70%,100%{transform:translateX(55%) skewX(-14deg);opacity:0}
}
@keyframes velocityGapFlow{
to{transform:skewX(-18deg) translateX(35px)}
}
@keyframes velocityGapOrbit{
to{transform:translate(-50%,-50%) rotate(340deg)}
}
@keyframes velocityLineDash{
0%{opacity:.15;transform:translate(-50%,-50%) rotate(-16deg) scaleX(.55)}
50%{opacity:1}
100%{opacity:.15;transform:translate(-50%,-50%) rotate(-16deg) scaleX(1.08)}
}
@keyframes velocityPulse{
0%,100%{transform:translate(-50%,-50%) scale(.7);opacity:.45}
50%{transform:translate(-50%,-50%) scale(1.45);opacity:1}
}
.frames-page.theme-velocity .fx-title{background:linear-gradient(100deg,#fff 18%,#aaff43 54%,#34e4d5 92%);-webkit-background-clip:text;background-clip:text;color:transparent}.frames-page.theme-velocity .fx-hero{background:linear-gradient(125deg,#030706,#071612 55%,#07151b)}.velocity-stats{min-height:600px;background:#050a09;display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:7vw}.speed-lines{position:absolute;inset:-20%;background:repeating-linear-gradient(105deg,transparent 0 65px,rgba(125,255,70,.08) 66px 68px);transform:skewX(-12deg);animation:fxSpeed 1.8s linear infinite}.stat-runner{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(150,255,80,.25);border-bottom:1px solid rgba(150,255,80,.25)}.stat-item{position:relative;padding:45px 20px;border-right:1px solid rgba(150,255,80,.18);transition:transform .35s ease}.stat-item:last-child{border:0}.stat-item:hover{transform:translateY(-10px)}.stat-item strong{display:block;font:800 clamp(38px,5vw,72px) "Space Grotesk";color:#aaff43;letter-spacing:-.06em}.stat-item span{display:block;font-size:12px;letter-spacing:.18em;color:#87958f;margin-top:6px}.stat-item i{position:absolute;right:18px;top:18px;color:#34e4d5;font-style:normal;font-size:12px}
.motion-trail{min-height:720px;background:#07110e;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:6vw}.trail-image{height:560px;position:relative;transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .35s ease}.trail-image img{width:100%;height:100%;object-fit:cover;clip-path:polygon(0 13%,93% 0,100% 84%,8% 100%);filter:saturate(.8)}.trail-glow{position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(130,255,65,.24),transparent 70%);mix-blend-mode:screen;animation:fxSweep 3.2s ease-in-out infinite}.motion-word{font:800 clamp(20px,3vw,42px) "Space Grotesk";color:#aaff43;white-space:nowrap;margin-top:35px;animation:fxMotionWord 8s linear infinite}
.gear-section{background:#030807;min-height:680px}.gear-row{width:min(1250px,100%);margin:50px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,65px)}.gear-item{margin:0}.gear-item>div{height:330px;position:relative;overflow:hidden;clip-path:polygon(0 10%,100% 0,94% 90%,6% 100%)}.gear-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease,filter .6s ease}.gear-item:hover img{transform:scale(1.08) translateX(5px);filter:saturate(1.25)}.gear-item>div span{position:absolute;top:20px;left:20px;color:#aaff43;font-size:12px}.gear-item figcaption{padding:18px 0;display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(150,255,80,.18)}.gear-item figcaption b{color:#fff;letter-spacing:.1em}.gear-item figcaption small{color:#75827d}.velocity-cta{min-height:520px;background:radial-gradient(circle at 50% 40%,rgba(110,255,60,.12),transparent 28%),#040908;display:grid;place-items:center;text-align:center}.velocity-cta .cta-rings{border-color:rgba(150,255,80,.22)}
/* KIDS — playful / organic / color */
.frames-page.theme-play{--fx-bg:#0b0b18}.frames-page.theme-play .fx-title{background:linear-gradient(105deg,#fff 20%,#ff74bd 48%,#54d7ff 80%);-webkit-background-clip:text;background-clip:text;color:transparent}.frames-page.theme-play .fx-hero{background:radial-gradient(circle at 75% 32%,rgba(255,100,180,.18),transparent 24%),radial-gradient(circle at 20% 80%,rgba(70,210,255,.12),transparent 24%),#0a0a17}.frames-page.theme-play .fx-shape{border-color:rgba(255,110,190,.3);border-radius:43% 57% 62% 38% / 48% 37% 63% 52%;animation:fxBlob 7s ease-in-out infinite}.color-play{min-height:620px;background:#0b0b18;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:6vw}.bubble-field{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(84,215,255,.25) 0 2px,transparent 3px);background-size:80px 80px;animation:fxBubble 16s linear infinite;opacity:.5}.color-wheel{position:relative;width:min(560px,75vw);aspect-ratio:1;margin:auto;border-radius:50%;display:grid;place-items:center}.color-wheel:before{content:"";position:absolute;inset:8%;border:2px dashed rgba(255,255,255,.18);border-radius:50%;animation:fxOrbit 18s linear infinite}.color-wheel button{position:absolute;width:112px;height:112px;border:0;background:var(--c);border-radius:50%;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.25);transition:transform .45s cubic-bezier(.16,1.5,.3,1),border-radius .45s ease}.color-wheel button:hover{transform:scale(1.18) rotate(8deg);border-radius:38% 62% 50% 50%}.color-wheel button span{font-size:12px;font-weight:900;color:#111}.color-wheel button:nth-child(1){top:5%;left:40%}.color-wheel button:nth-child(2){right:5%;top:40%}.color-wheel button:nth-child(3){bottom:5%;left:40%}.color-wheel button:nth-child(4){left:5%;top:40%}.color-note{position:absolute;right:9%;bottom:15%;font:800 12px "Space Grotesk";letter-spacing:.2em;color:#ff74bd;transition:transform .4s ease}
.grow-section{min-height:720px;background:#101025;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7vw}.grow-art{height:560px;position:relative;display:grid;place-items:center}.grow-art img{width:65%;height:72%;object-fit:cover;clip-path:circle(43%);animation:fxProductFloat 5s ease-in-out infinite}.grow-ring{position:absolute;width:78%;aspect-ratio:1;border:1px solid rgba(84,215,255,.4);border-radius:50%;animation:fxRing 5s ease-in-out infinite}.grow-word{position:absolute;font:900 12px "Space Grotesk";letter-spacing:.2em;color:#54d7ff}.gw0{top:18%;left:10%}.gw1{right:5%;top:45%;color:#ff74bd}.gw2{bottom:15%;left:20%;color:#ffc83d}.tiny-checks{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}.tiny-checks span{font-size:12px;color:#c0c5d4;border-bottom:1px solid rgba(255,255,255,.12);padding:8px 0;margin-right:10px}.little-gallery{min-height:680px;background:#0b0b18}.little-row{width:min(1200px,100%);margin:50px auto 0;display:grid;grid-template-columns:1.1fr .8fr 1fr;gap:30px;align-items:end}.little-item{margin:0;position:relative}.little-item img{width:100%;height:380px;object-fit:cover;clip-path:polygon(5% 0,100% 9%,94% 100%,0 91%);transition:transform .6s ease,clip-path .6s ease}.little-item:hover img{transform:translateY(-12px) rotate(-2deg);clip-path:polygon(0 8%,93% 0,100% 92%,7% 100%)}.li1 img{height:300px}.li2 img{height:430px}.little-item figcaption{display:flex;justify-content:space-between;align-items:center;padding-top:14px;color:#fff}.little-item figcaption b{font-size:12px;letter-spacing:.14em}.little-item figcaption span{font-size:12px;color:#ff74bd}.play-cta{min-height:520px;background:radial-gradient(circle at 50% 40%,rgba(255,110,190,.16),transparent 26%),#0a0a17;display:grid;place-items:center;text-align:center}.play-cta .cta-rings{border-color:rgba(255,110,190,.25);border-radius:43% 57% 50% 50%;animation:fxBlob 8s ease-in-out infinite}
/* animation library */
@keyframes fxNoise{0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(2%,2%)}100%{transform:translate(0,0)}}
@keyframes fxFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(4deg)}}
@keyframes fxProductFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-16px) rotate(1deg)}}
@keyframes fxOrbit{to{transform:rotate(360deg)}}
@keyframes fxTag{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes fxDot{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(2.2);opacity:1}}
@keyframes fxScroll{0%,100%{transform:scaleX(.4);transform-origin:left}50%{transform:scaleX(1)}}
@keyframes fxRing{0%,100%{transform:scale(.94);opacity:.5}50%{transform:scale(1.06);opacity:1}}
@keyframes fxSweep{0%{transform:translateX(-65%)}55%,100%{transform:translateX(65%)}}
@keyframes fxSpeed{to{transform:skewX(-12deg) translateX(130px)}}
@keyframes fxMotionWord{to{transform:translateX(-45%)}}
@keyframes fxPulse{0%,100%{transform:scale(.85);opacity:.18}50%{transform:scale(1.2);opacity:.4}}
@keyframes fxBlob{0%,100%{border-radius:43% 57% 62% 38% / 48% 37% 63% 52%;transform:rotate(0)}50%{border-radius:62% 38% 42% 58% / 55% 62% 38% 45%;transform:rotate(8deg)}}
@keyframes fxBubble{from{background-position:0 0}to{background-position:0 -640px}}
.frames-page .reveal,.frames-page .reveal-section{opacity:0;transform:translateY(45px);transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.frames-page .reveal.is-visible,.frames-page .reveal-section.is-visible{opacity:1;transform:none}.frames-page .delay-1{transition-delay:.15s}
.frames-page.frame-ready .fx-title{animation:fxTitleIn 1.1s cubic-bezier(.16,1,.3,1) both}.frames-page.frame-ready .fx-hero-copy>p{animation:fxTitleIn .9s .18s both}.frames-page.frame-ready .fx-action{animation:fxTitleIn .8s .3s both}
@keyframes fxTitleIn{from{opacity:0;transform:translateY(45px) skewY(2deg);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.frame-page-loader{position:fixed;inset:0;background:#05080f;z-index:9999;pointer-events:none;display:grid;place-items:center;opacity:1;animation:fxLoader .8s .15s forwards}.frame-page-loader span{width:70px;height:2px;background:var(--f-accent);box-shadow:0 0 25px var(--f-accent);animation:fxLoaderLine .6s ease-out}.frames-page.frame-ready .frame-page-loader{display:none}@keyframes fxLoader{to{opacity:0;visibility:hidden}}@keyframes fxLoaderLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:900px){
.frames-page.theme-velocity .velocity-hero{
grid-template-columns:1fr;
gap:0;
}
.frames-page.theme-velocity .velocity-hero-copy{
padding-right:0;
}
.frames-page.theme-velocity .velocity-hero-visual{
min-height:430px;
margin-top:-8px;
}
.velocity-gap-animation{
left:50%;
top:56%;
width:180px;
height:250px;
opacity:.8;
}
.velocity-corner-a{left:3%;top:10%}
.velocity-corner-b{right:2%;bottom:4%}
.velocity-image-stack{height:400px;width:min(94vw,620px)}
}
@media(max-width:900px){
.frames-page .fx-hero{grid-template-columns:1fr;min-height:auto;padding-top:115px}.frames-page .category-rail{top:18px;left:20px;right:20px;overflow:auto;white-space:nowrap;gap:20px}.frames-page .fx-hero-art{min-height:430px}.frames-page .fx-title{font-size:clamp(52px,13vw,82px)}
.fx-lens-grid,.frames-page .motion-trail,.frames-page .grow-section,.frames-page .velocity-stats,.frames-page .fx-spotlight,.frames-page .color-play{grid-template-columns:1fr}.frames-page .fx-lens-visual{height:430px}.frames-page .spotlight-img{height:480px}.frames-page .stat-runner{margin-top:20px}.frames-page .gear-row,.frames-page .little-row{grid-template-columns:1fr}.frames-page .little-item img,.frames-page .li1 img,.frames-page .li2 img{height:330px}.frames-page .grow-art{height:450px}.frames-page .color-wheel{margin-top:20px}.frames-page .color-note{position:relative;right:auto;bottom:auto;text-align:center;margin-top:20px}.frames-page .fx-scroll-note{display:none}
}
@media(max-width:600px){
.frames-page.theme-velocity .velocity-hero-visual{min-height:360px}
.velocity-image-stack{height:300px;width:94vw}
.velocity-gap-animation{width:120px;height:190px;top:57%;opacity:.65}
.velocity-image-label{right:14px;bottom:14px;font-size:12px}
.velocity-corner{font-size:12px}
}
@media(max-width:600px){
.frames-page .fx-section{padding:58px 20px}.frames-page .fx-hero{padding-top:105px}.frames-page .fx-hero-art{min-height:350px}.frames-page .fx-orbit{transform:scale(.65)}.frames-page .fx-floating-tag{right:0;bottom:5%}.frames-page .fx-copy h2{font-size:clamp(40px,12vw,64px)}.frames-page .fx-lens-visual{height:350px}.frames-page .lens-ring.r1{width:230px;height:230px}.frames-page .lens-ring.r2{width:300px;height:300px}.frames-page .style-orbit{width:92vw}.frames-page .style-core{width:52%}.frames-page .stat-runner{grid-template-columns:1fr}.frames-page .stat-item{border-right:0;border-bottom:1px solid rgba(150,255,80,.18);padding:25px 10px}.frames-page .trail-image{height:330px}.frames-page .gear-item>div{height:280px}.frames-page .color-wheel button{width:82px;height:82px}.frames-page .grow-art{height:350px}.frames-page .grow-art img{width:72%;height:70%}.frames-page .little-row{gap:35px}.frames-page .little-item img,.frames-page .li1 img,.frames-page .li2 img{height:290px}.frames-page .solar-cta .cta-rings,.frames-page .velocity-cta .cta-rings,.frames-page .play-cta .cta-rings{width:390px;height:390px}
}
@media(prefers-reduced-motion:reduce){.frames-page *,.frames-page *::before,.frames-page *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.frames-page .reveal,.frames-page .reveal-section{opacity:1;transform:none}}
/* =========================================================
SINGLE FRAMES FILE — GLITCH HEADINGS + TIGHT SECTION FLOW
========================================================= */
.frames-page .glitch-title{position:relative}
.frames-page .fx-glitch::before,.frames-page .fx-glitch::after{content:attr(data-glitch);position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
.frames-page .fx-glitch::before{color:#19d8ff;transform:translate(3px,-1px);clip-path:inset(8% 0 57% 0);opacity:.72;animation:fxGlitchTop .11s steps(2,end) 4}
.frames-page .fx-glitch::after{color:#ff3ca6;transform:translate(-3px,1px);clip-path:inset(55% 0 8% 0);opacity:.62;animation:fxGlitchBottom .11s steps(2,end) 4}
@keyframes fxGlitchTop{0%,100%{clip-path:inset(8% 0 57% 0);transform:translate(3px,-1px)}50%{clip-path:inset(35% 0 32% 0);transform:translate(-5px,1px)}}
@keyframes fxGlitchBottom{0%,100%{clip-path:inset(55% 0 8% 0);transform:translate(-3px,1px)}50%{clip-path:inset(12% 0 66% 0);transform:translate(5px,-1px)}}
.frames-page .fx-section{margin:0!important}
.frames-page main{margin:0;padding:0}
.frames-page .reading-section{margin:0 auto}
@media(prefers-reduced-motion:reduce){.frames-page .fx-glitch::before,.frames-page .fx-glitch::after{animation:none}}
/* =========================================================
CLEARVISION LENSES — ONE FILE / THREE EXPERIENCES
========================================================= */
.lenses-page{--lens-bg:#f5f8ff;--lens-ink:#071126;--lens-muted:#64708a;--lens-accent:#2867ff;--lens-line:rgba(7,17,38,.12);background:var(--lens-bg);color:var(--lens-ink);overflow-x:hidden}
.lenses-page[data-lens-theme="progressive"]{--lens-bg:#070a12;--lens-ink:#f4f6ff;--lens-muted:#a4aac0;--lens-accent:#a58bff;--lens-line:rgba(255,255,255,.13)}
.lenses-page[data-lens-theme="blue"]{--lens-bg:#050b18;--lens-ink:#edf8ff;--lens-muted:#9cb0c8;--lens-accent:#40ddff;--lens-line:rgba(64,221,255,.16)}
.lenses-page .navbar{position:fixed;top:10px;left:14px;right:14px;width:min(1380px,calc(100% - 28px));margin:0 auto;z-index:1000}.lenses-page #lensesApp{padding-top:88px}
.lenses-page .lens-page-loader{position:fixed;inset:0;background:var(--lens-bg);z-index:9998;display:grid;place-items:center;pointer-events:none;opacity:1;transition:opacity .6s ease}.lenses-page.lens-ready .lens-page-loader{opacity:0}.lens-page-loader span{width:42px;height:42px;border:2px solid var(--lens-line);border-top-color:var(--lens-accent);border-radius:50%;animation:lensSpin .8s linear infinite}
@keyframes lensSpin{to{transform:rotate(360deg)}}
.lens-shell{min-height:100vh;background:var(--lens-bg);position:relative}.lens-section{position:relative;overflow:hidden}.lens-hero{min-height:calc(100vh - 76px);padding:110px 6vw 80px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5vw;background:var(--lens-bg)}
.lens-hero:before{content:"";position:absolute;width:52vw;height:52vw;border-radius:50%;right:-18vw;top:-18vw;border:1px solid var(--lens-line);box-shadow:0 0 100px rgba(40,103,255,.08)}
.lens-hero-copy{position:relative;z-index:2;max-width:760px}.lens-kicker{font:700 12px/1 "Space Grotesk",sans-serif;letter-spacing:.25em;color:var(--lens-accent);display:inline-flex;align-items:center;gap:12px}.lens-kicker:before{content:"";width:34px;height:1px;background:currentColor}.lens-hero h1{font:700 clamp(58px,8vw,130px)/.86 "Space Grotesk",sans-serif;letter-spacing:-.065em;margin:24px 0}.lens-hero h1 span{display:block}.lens-hero h1 .accent{color:var(--lens-accent)}.lens-hero p{font-size:clamp(16px,1.35vw,20px);line-height:1.7;color:var(--lens-muted);max-width:620px}.lens-actions{display:flex;gap:12px;align-items:center;margin-top:34px;flex-wrap:wrap}.lens-btn{display:inline-flex;align-items:center;gap:14px;padding:15px 20px;border:1px solid var(--lens-line);color:var(--lens-ink);text-decoration:none;font-weight:800;border-radius:999px;transition:.35s ease}.lens-btn.primary{background:var(--lens-accent);color:#071126;border-color:transparent}.lens-btn:hover{transform:translateY(-4px);box-shadow:0 15px 40px rgba(40,103,255,.16)}
.lens-rail{position:absolute;top:94px;left:6vw;right:6vw;display:flex;justify-content:flex-end;gap:8px;z-index:8}.lens-rail a{color:var(--lens-muted);text-decoration:none;font:700 12px "Space Grotesk";letter-spacing:.14em;text-transform:uppercase;padding:9px 12px;border-bottom:1px solid transparent;transition:.3s ease}.lens-rail a span{opacity:.5;margin-right:8px}.lens-rail a:hover,.lens-rail a.active{color:var(--lens-ink);border-color:var(--lens-accent)}
.lens-visual{min-height:540px;display:grid;place-items:center;position:relative;z-index:2}.single-lens-art{width:min(560px,44vw);aspect-ratio:1;position:relative;display:grid;place-items:center}.single-lens-art:before,.single-lens-art:after{content:"";position:absolute;border-radius:50%;border:1px solid var(--lens-line);animation:lensOrbit 12s linear infinite}.single-lens-art:before{inset:7%}.single-lens-art:after{inset:18%;animation-direction:reverse;animation-duration:8s}.lens-disc{width:56%;aspect-ratio:1;border-radius:50%;border:2px solid var(--lens-accent);background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),transparent 18%),radial-gradient(circle,rgba(40,103,255,.12),transparent 62%);box-shadow:inset 0 0 70px rgba(40,103,255,.12),0 0 80px rgba(40,103,255,.12);animation:focusPulse 4.5s ease-in-out infinite;position:relative}.lens-disc:before{content:"FOCUS";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 12px "Space Grotesk";letter-spacing:.28em;color:var(--lens-accent)}.focus-ring{position:absolute;width:68%;aspect-ratio:1;border:1px dashed var(--lens-accent);border-radius:50%;animation:focusSweep 6s linear infinite}.focus-cross:before,.focus-cross:after{content:"";position:absolute;background:var(--lens-accent);opacity:.7}.focus-cross:before{width:100%;height:1px;top:50%;left:0}.focus-cross:after{height:100%;width:1px;left:50%;top:0}.lens-label{position:absolute;right:2%;bottom:8%;padding:12px 14px;border-left:2px solid var(--lens-accent);background:rgba(255,255,255,.05);backdrop-filter:blur(8px);font:800 12px "Space Grotesk";letter-spacing:.12em}
@keyframes lensOrbit{to{transform:rotate(360deg)}}@keyframes focusPulse{0%,100%{transform:scale(.96)}50%{transform:scale(1.04)}}@keyframes focusSweep{to{transform:rotate(360deg)}}
.lens-intro{padding:120px 6vw;display:grid;grid-template-columns:.7fr 1.3fr;gap:7vw;align-items:start;border-top:1px solid var(--lens-line)}.lens-intro h2,.lens-section-title{font:700 clamp(40px,5.4vw,82px)/.94 "Space Grotesk";letter-spacing:-.05em;margin:14px 0}.lens-intro p,.lens-copy p{color:var(--lens-muted);line-height:1.8;font-size:16px}.lens-points{display:grid;gap:0;border-top:1px solid var(--lens-line)}.lens-point{display:grid;grid-template-columns:80px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--lens-line);align-items:start}.lens-point i{font:700 12px "Space Grotesk";color:var(--lens-accent);font-style:normal}.lens-point h3{font:700 25px "Space Grotesk";margin:0 0 8px}.lens-point p{margin:0}
.prescription-section{padding:80px 6vw 130px;background:linear-gradient(135deg,rgba(40,103,255,.05),transparent 45%);display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}.prescription-visual{position:relative;min-height:470px;border:1px solid var(--lens-line);border-radius:50%;width:min(470px,90vw);aspect-ratio:1;margin:auto;display:grid;place-items:center}.prescription-visual:before{content:"";position:absolute;inset:10%;border:1px dashed var(--lens-accent);border-radius:50%;animation:lensOrbit 15s linear infinite}.prescription-number{font:800 clamp(55px,7vw,105px)/.8 "Space Grotesk";letter-spacing:-.08em}.prescription-number small{display:block;font:700 12px "Space Grotesk";letter-spacing:.24em;color:var(--lens-muted);text-align:center;margin-top:18px}.rx-float{position:absolute;padding:12px 14px;border:1px solid var(--lens-line);background:var(--lens-bg);font:700 12px "Space Grotesk";animation:rxFloat 4s ease-in-out infinite}.rx-float.one{top:15%;left:6%}.rx-float.two{right:0;top:48%;animation-delay:-1.4s}.rx-float.three{bottom:12%;left:19%;animation-delay:-2.5s}@keyframes rxFloat{50%{transform:translateY(-13px) rotate(2deg)}}
.lens-lifestyle{padding:120px 6vw;display:grid;grid-template-columns:1fr 1.15fr;gap:7vw;align-items:center;border-top:1px solid var(--lens-line)}.life-orb{position:relative;min-height:560px;display:grid;place-items:center}.life-orb img{width:min(480px,90%);height:560px;object-fit:cover;border-radius:48% 52% 42% 58% / 50% 42% 58% 50%;filter:saturate(.9);box-shadow:0 30px 80px rgba(0,0,0,.16);transition:transform .7s cubic-bezier(.16,1.5,.3,1)}.life-orb:hover img{transform:rotate(-2deg) scale(1.025)}.life-orb:after{content:"EVERYDAY / OPTICS";position:absolute;bottom:5%;right:0;font:800 12px "Space Grotesk";letter-spacing:.2em;color:var(--lens-accent)}.life-list{margin-top:32px;display:flex;flex-wrap:wrap;gap:10px}.life-list span{padding:11px 14px;border:1px solid var(--lens-line);border-radius:999px;font:700 12px "Space Grotesk"}
.lens-final{min-height:620px;padding:110px 6vw;display:grid;place-items:center;text-align:center;border-top:1px solid var(--lens-line);background:var(--lens-bg)}.lens-final:before{content:"";position:absolute;width:60vw;height:60vw;border-radius:50%;border:1px solid var(--lens-line);box-shadow:0 0 120px rgba(40,103,255,.07)}.lens-final>*{position:relative}.lens-final h2{font:700 clamp(55px,9vw,145px)/.82 "Space Grotesk";letter-spacing:-.075em;margin:20px auto;max-width:1200px}.lens-final h2 span{color:var(--lens-accent)}.lens-final p{max-width:570px;color:var(--lens-muted);line-height:1.7;margin:0 auto 28px}
/* Progressive */
.progressive-hero .progressive-map{position:relative;width:min(580px,46vw);aspect-ratio:1;display:grid;place-items:center}.prog-lens{width:58%;height:72%;border-radius:48% 52% 50% 50%;border:1px solid var(--lens-accent);background:linear-gradient(180deg,rgba(165,139,255,.04),rgba(165,139,255,.18));box-shadow:inset 0 0 80px rgba(165,139,255,.1),0 0 80px rgba(165,139,255,.12);position:relative;overflow:hidden;animation:progFloat 5s ease-in-out infinite}.prog-lens:before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 0 28%,rgba(165,139,255,.18) 40%,rgba(255,255,255,.04) 58%,rgba(165,139,255,.06) 78%,transparent 100%);animation:progFocus 5s ease-in-out infinite}.prog-zone{position:absolute;left:9%;right:9%;height:1px;background:var(--lens-accent);opacity:.5}.prog-zone.far{top:28%}.prog-zone.mid{top:50%}.prog-zone.near{top:72%}.prog-zone span{position:absolute;left:calc(100% + 12px);top:-7px;white-space:nowrap;font:700 12px "Space Grotesk";letter-spacing:.18em}.prog-satellite{position:absolute;border:1px solid var(--lens-line);border-radius:50%;animation:lensOrbit 14s linear infinite}.prog-satellite.s1{inset:5%}.prog-satellite.s2{inset:16%;animation-direction:reverse;animation-duration:10s}@keyframes progFloat{50%{transform:translateY(-10px) rotate(.8deg)}}@keyframes progFocus{0%,100%{transform:translateY(-8%)}50%{transform:translateY(8%)}}
.vision-journey{padding:120px 6vw;border-top:1px solid var(--lens-line)}.journey-track{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--lens-line);margin-top:55px}.journey-step{min-height:430px;background:var(--lens-bg);padding:34px;position:relative;overflow:hidden}.journey-step .step-no{font:700 12px "Space Grotesk";color:var(--lens-accent)}.journey-step h3{font:700 clamp(30px,3vw,52px) "Space Grotesk";margin:90px 0 12px}.journey-step p{color:var(--lens-muted);line-height:1.7;max-width:300px}.journey-eye{position:absolute;bottom:-80px;right:-60px;width:250px;height:250px;border-radius:50%;border:1px solid var(--lens-line);transition:.6s ease}.journey-step:hover .journey-eye{transform:scale(1.3);border-color:var(--lens-accent)}
.line-morph{padding:100px 6vw;display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw;align-items:center;border-top:1px solid var(--lens-line)}.bifocal-morph{height:420px;border:1px solid var(--lens-line);border-radius:50% 50% 45% 55%;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 30%,rgba(165,139,255,.14),transparent 50%)}.bifocal-morph:before{content:"";position:absolute;left:0;right:0;top:58%;height:2px;background:var(--lens-accent);animation:morphLine 4s ease-in-out infinite}.bifocal-morph:after{content:"PROGRESSIVE";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 12px "Space Grotesk";letter-spacing:.25em;color:var(--lens-accent)}@keyframes morphLine{0%,100%{transform:scaleX(.5);opacity:.3}50%{transform:scaleX(1);opacity:1}}
.progressive-life{padding:120px 6vw;border-top:1px solid var(--lens-line)}.scene-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:55px}.scene{min-height:380px;border:1px solid var(--lens-line);padding:26px;position:relative;overflow:hidden}.scene:before{content:"";position:absolute;inset:20% 12%;border:1px solid var(--lens-line);border-radius:50%;transform:rotate(-15deg);transition:.7s ease}.scene:hover:before{transform:rotate(8deg) scale(1.1);border-color:var(--lens-accent)}.scene h3{position:relative;font:700 36px "Space Grotesk";margin-top:240px}.scene span{position:relative;color:var(--lens-muted);font:700 12px "Space Grotesk";letter-spacing:.18em}
/* Blue light */
.blue-hero{background:radial-gradient(circle at 72% 35%,rgba(64,221,255,.16),transparent 25%),radial-gradient(circle at 20% 80%,rgba(127,86,255,.15),transparent 28%),var(--lens-bg)}.digital-screen{width:min(590px,48vw);aspect-ratio:1.15;position:relative;display:grid;place-items:center}.screen-frame{width:80%;height:56%;border:1px solid rgba(64,221,255,.6);border-radius:22px;background:linear-gradient(135deg,rgba(64,221,255,.12),rgba(130,70,255,.08));box-shadow:0 0 80px rgba(64,221,255,.1);position:relative;overflow:hidden}.screen-frame:before{content:"";position:absolute;inset:14px;background:repeating-linear-gradient(90deg,rgba(64,221,255,.09) 0 1px,transparent 1px 34px),repeating-linear-gradient(0deg,rgba(64,221,255,.08) 0 1px,transparent 1px 28px)}.screen-frame:after{content:"FOCUS MODE";position:absolute;left:25px;bottom:20px;font:800 12px "Space Grotesk";letter-spacing:.25em;color:var(--lens-accent)}.screen-stand{position:absolute;width:22%;height:13%;bottom:17%;border-left:1px solid var(--lens-line);border-right:1px solid var(--lens-line);border-bottom:1px solid var(--lens-line);transform:perspective(150px) rotateX(-40deg)}.blue-lens-ring{position:absolute;width:35%;aspect-ratio:1;border:1px solid var(--lens-accent);border-radius:50%;box-shadow:0 0 55px rgba(64,221,255,.24);animation:bluePulse 3.8s ease-in-out infinite}.blue-particle{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--lens-accent);box-shadow:0 0 18px var(--lens-accent);animation:particleFly 4s linear infinite}.bp1{left:9%;top:25%}.bp2{left:20%;top:70%;animation-delay:-1.4s}.bp3{right:8%;top:18%;animation-delay:-2.4s}.bp4{right:17%;bottom:16%;animation-delay:-3.1s}@keyframes bluePulse{50%{transform:scale(1.12);box-shadow:0 0 85px rgba(64,221,255,.35)}}@keyframes particleFly{0%{transform:translate(0,0) scale(.5);opacity:0}20%{opacity:1}70%{transform:translate(90px,-20px) scale(1)}100%{transform:translate(170px,-45px) scale(0);opacity:0}}
.digital-day{padding:120px 6vw;border-top:1px solid var(--lens-line)}.digital-timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:55px;border-top:1px solid var(--lens-line);border-bottom:1px solid var(--lens-line)}.day-item{min-height:300px;padding:28px 20px;border-right:1px solid var(--lens-line);position:relative;transition:.45s ease}.day-item:last-child{border-right:0}.day-item:hover{background:rgba(64,221,255,.04);transform:translateY(-7px)}.day-item span{font:700 12px "Space Grotesk";letter-spacing:.16em;color:var(--lens-accent)}.day-item h3{font:700 28px "Space Grotesk";margin:110px 0 10px}.day-item p{font-size:13px;line-height:1.6;color:var(--lens-muted)}
.blue-filter{padding:120px 6vw;display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;border-top:1px solid var(--lens-line)}.particle-field{height:470px;position:relative;border:1px solid var(--lens-line);overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(64,221,255,.08),transparent 35%)}.particle-field i{position:absolute;width:4px;height:4px;background:#4edfff;box-shadow:0 0 14px #4edfff;animation:fieldMove 4s linear infinite}.particle-field i:nth-child(1){left:8%;top:20%;animation-delay:-.2s}.particle-field i:nth-child(2){left:25%;top:65%;animation-delay:-1.1s}.particle-field i:nth-child(3){left:45%;top:14%;animation-delay:-2s}.particle-field i:nth-child(4){left:70%;top:72%;animation-delay:-.8s}.particle-field i:nth-child(5){left:87%;top:30%;animation-delay:-2.7s}.filter-glass{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52%;height:70%;border:1px solid var(--lens-accent);border-radius:48%;background:linear-gradient(90deg,rgba(64,221,255,.03),rgba(127,86,255,.11));box-shadow:inset 0 0 50px rgba(64,221,255,.1);backdrop-filter:blur(4px)}.filter-glass:after{content:"FILTER";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 12px "Space Grotesk";letter-spacing:.3em;color:var(--lens-accent)}@keyframes fieldMove{50%{transform:translate(70px,-35px) scale(1.5);opacity:.35}}
.focus-mode{padding:120px 6vw;border-top:1px solid var(--lens-line);text-align:center}.focus-words{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin:55px auto 30px;max-width:950px}.focus-words span{font:800 clamp(34px,5vw,70px) "Space Grotesk";letter-spacing:-.06em;padding:4px 10px;border:1px solid var(--lens-line);transition:.45s ease}.focus-words span:hover{color:var(--lens-accent);border-color:var(--lens-accent);transform:translateY(-7px) rotate(-2deg)}
.lens-reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,1.1,.3,1)}.lens-reveal.is-visible{opacity:1;transform:none}
@media(max-width:980px){.lens-hero,.prescription-section,.lens-lifestyle,.line-morph,.blue-filter{grid-template-columns:1fr}.lens-hero{padding-top:150px}.lens-visual{min-height:430px}.single-lens-art,.progressive-hero .progressive-map,.digital-screen{width:min(620px,90vw)}.lens-rail{position:relative;top:auto;left:auto;right:auto;padding:95px 6vw 0;justify-content:flex-start;flex-wrap:wrap}.lens-intro{grid-template-columns:1fr;gap:45px}.journey-track,.scene-strip{grid-template-columns:1fr}.digital-timeline{grid-template-columns:1fr}.day-item{min-height:210px;border-right:0;border-bottom:1px solid var(--lens-line)}.day-item h3{margin-top:70px}.lens-final h2{font-size:clamp(50px,12vw,100px)}}
@media(max-width:640px){.lens-hero{padding:120px 22px 65px;min-height:auto}.lens-hero h1{font-size:clamp(55px,16vw,92px)}.lens-intro,.prescription-section,.lens-lifestyle,.vision-journey,.line-morph,.progressive-life,.digital-day,.blue-filter,.focus-mode{padding-left:22px;padding-right:22px}.lens-rail{padding:86px 22px 0}.lens-visual{min-height:350px}.lens-point{grid-template-columns:45px 1fr;gap:12px}.prescription-visual{min-height:350px}.life-orb{min-height:400px}.life-orb img{height:400px}.particle-field{height:380px}.lens-actions{margin-top:25px}.lens-final{min-height:520px;padding:90px 22px}.lens-final h2{font-size:clamp(48px,15vw,80px)}}
@media(prefers-reduced-motion:reduce){.lens-disc,.focus-ring,.prog-lens,.prog-satellite,.blue-lens-ring,.blue-particle,.particle-field i,.prescription-visual:before{animation:none!important}.lens-reveal{transition:none}}
/* =========================================================
CLEARVISION LENSES — MOTION + IMAGE EXPERIENCE V2
Dense editorial layout / image-led sections / unusual motion
========================================================= */
.lenses-page{--lens-mx:0px;--lens-my:0px;--lens-shift:0px;--lens-radius:28px}
.lenses-page .lens-shell{isolation:isolate}
.lenses-page .lens-section,.lenses-page .lens-photo-band,.lenses-page .lens-mini-grid{transform:translate3d(0,var(--lens-shift),0);transition:transform .18s linear}
.lenses-page .lens-hero{min-height:760px;padding-top:105px;padding-bottom:58px}
.lenses-page .lens-hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 65% 40%,rgba(255,255,255,.05),transparent 25%);pointer-events:none;animation:lensAtmosphere 8s ease-in-out infinite}
@keyframes lensAtmosphere{0%,100%{opacity:.45;transform:scale(.98)}50%{opacity:1;transform:scale(1.04)}}
.lenses-page .lens-hero-copy{transform:translate3d(calc(var(--lens-mx)*-.35),calc(var(--lens-my)*-.35),0);transition:transform .2s ease-out}
.lenses-page .lens-hero h1{animation:lensTitleFloat 7s ease-in-out infinite}
@keyframes lensTitleFloat{0%,100%{letter-spacing:-.065em}50%{letter-spacing:-.045em}}
.lenses-page .lens-hero h1 .accent{position:relative;text-shadow:0 0 35px color-mix(in srgb,var(--lens-accent) 25%,transparent)}
.lenses-page .lens-hero h1 .accent:after{content:"";position:absolute;left:0;right:12%;bottom:-8px;height:2px;background:var(--lens-accent);transform:scaleX(.15);transform-origin:left;animation:accentLine 4s cubic-bezier(.16,1,.3,1) infinite}
@keyframes accentLine{0%,20%{transform:scaleX(.15);opacity:.2}50%{transform:scaleX(1);opacity:1}80%,100%{transform:scaleX(.15);opacity:.2}}
.lenses-page .lens-visual{transform:translate3d(var(--lens-mx),var(--lens-my),0);transition:transform .2s ease-out}
.lenses-page .single-lens-art{filter:drop-shadow(0 35px 65px rgba(40,103,255,.14));animation:lensArtFloat 6s ease-in-out infinite}
@keyframes lensArtFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-15px) rotate(1deg)}}
.lenses-page .single-lens-art:before{border-style:dashed;animation:lensOrbit 18s linear infinite,lensOrbitPulse 3s ease-in-out infinite}
.lenses-page .single-lens-art:after{box-shadow:inset 0 0 35px var(--lens-accent);animation:lensOrbit 10s linear infinite reverse}
@keyframes lensOrbitPulse{50%{opacity:.35;transform:scale(1.05)}}
.lenses-page .lens-disc{background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.75),transparent 13%),radial-gradient(circle at 65% 70%,rgba(40,103,255,.2),transparent 48%),linear-gradient(135deg,rgba(255,255,255,.18),rgba(40,103,255,.04));animation:focusPulse 4s ease-in-out infinite,lensHue 9s linear infinite}
@keyframes lensHue{50%{filter:hue-rotate(18deg) saturate(1.2)}}
.lenses-page .lens-disc:after{content:"";position:absolute;inset:-18%;border-radius:50%;border:1px solid var(--lens-accent);opacity:.18;animation:discRipple 3.8s ease-out infinite}
@keyframes discRipple{0%{transform:scale(.65);opacity:.5}100%{transform:scale(1.18);opacity:0}}
.lenses-page .lens-scan{position:absolute;width:64%;height:2px;background:linear-gradient(90deg,transparent,var(--lens-accent),transparent);box-shadow:0 0 25px var(--lens-accent);animation:scanLens 3.2s ease-in-out infinite}
@keyframes scanLens{0%,100%{transform:translateY(-125px);opacity:0}20%{opacity:1}50%{transform:translateY(125px);opacity:1}80%{opacity:0}}
.lenses-page .lens-label{animation:labelGlitch 5s steps(2,end) infinite}
@keyframes labelGlitch{0%,88%,100%{transform:translate(0)}90%{transform:translate(4px,-2px)}92%{transform:translate(-3px,2px)}}
.lenses-page .compact-intro{padding-top:78px;padding-bottom:78px}
.lenses-page .compact-section{padding-top:82px;padding-bottom:82px}
.lenses-page .accent-text{color:var(--lens-accent)}
.lenses-page .magnetic-card{transition:transform .35s cubic-bezier(.16,1.2,.3,1),background .35s ease;cursor:default}
.lenses-page .magnetic-card:hover{background:color-mix(in srgb,var(--lens-accent) 5%,var(--lens-bg))}
/* image-led editorial band */
.lenses-page .lens-photo-band{min-height:610px;padding:75px 6vw;display:grid;grid-template-columns:.82fr 1.18fr;gap:6vw;align-items:center;border-top:1px solid var(--lens-line);position:relative;overflow:hidden}
.lenses-page .lens-photo-band:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-130px;top:50%;transform:translateY(-50%);border:1px solid var(--lens-line);animation:photoOrbit 14s linear infinite}
@keyframes photoOrbit{to{transform:translateY(-50%) rotate(360deg)}}
.lenses-page .photo-band-copy{max-width:570px;position:relative;z-index:2}
.lenses-page .photo-band-copy h2{font:700 clamp(44px,5.8vw,86px)/.9 "Space Grotesk";letter-spacing:-.06em;margin:16px 0}
.lenses-page .photo-band-copy p{color:var(--lens-muted);line-height:1.75;max-width:480px}
.lenses-page .photo-stack{height:470px;position:relative;max-width:680px;margin-left:auto;transform:translate3d(var(--lens-mx),var(--lens-my),0);transition:transform .2s ease-out}
.lenses-page .photo-card{position:absolute;overflow:hidden;box-shadow:0 35px 90px rgba(0,0,0,.22);border:1px solid var(--lens-line);transition:transform .7s cubic-bezier(.16,1,.3,1),clip-path .7s ease}
.lenses-page .photo-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter 1.1s ease}
.lenses-page .photo-card:hover img{transform:scale(1.08);filter:saturate(1.15) contrast(1.05)}
.lenses-page .pc-one{left:4%;top:7%;width:61%;height:82%;clip-path:polygon(0 4%,96% 0,100% 92%,7% 100%)}
.lenses-page .pc-two{right:1%;top:0;width:46%;height:72%;clip-path:polygon(7% 0,100% 8%,92% 100%,0 91%);transform:rotate(4deg)}
.lenses-page .photo-stack:hover .pc-one{transform:translate(-8px,-8px) rotate(-2deg)}
.lenses-page .photo-stack:hover .pc-two{transform:translate(8px,12px) rotate(7deg)}
.lenses-page .photo-stamp{position:absolute;bottom:4%;left:28%;font:800 12px "Space Grotesk";letter-spacing:.24em;color:var(--lens-accent);background:var(--lens-bg);padding:10px 13px;border:1px solid var(--lens-line);animation:stampBlink 3.5s ease-in-out infinite}
@keyframes stampBlink{50%{letter-spacing:.38em;transform:translateX(5px)}}
/* progressive */
.lenses-page[data-lens-theme="progressive"] .lens-photo-band{background:linear-gradient(120deg,rgba(165,139,255,.035),transparent 55%)}
.lenses-page .prog-lens{animation:progFloat 5s ease-in-out infinite,progBreath 7s ease-in-out infinite}
@keyframes progBreath{50%{border-color:rgba(255,255,255,.85);box-shadow:inset 0 0 100px rgba(165,139,255,.18),0 0 120px rgba(165,139,255,.2)}}
.lenses-page .prog-shine{position:absolute;left:-80%;top:-20%;width:45%;height:150%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);transform:rotate(16deg);animation:shinePass 4.5s ease-in-out infinite}
@keyframes shinePass{0%,30%{left:-80%}70%,100%{left:150%}}
.lenses-page .focus-orbit-label{position:absolute;bottom:7%;right:3%;font:800 12px "Space Grotesk";letter-spacing:.22em;color:var(--lens-accent);animation:orbitLabel 5s ease-in-out infinite}
@keyframes orbitLabel{50%{transform:translateY(-8px) rotate(-2deg)}}
.lenses-page .journey-step{min-height:470px;padding:0 28px 30px;display:flex;flex-direction:column;justify-content:flex-end}
.lenses-page .journey-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.26;filter:grayscale(1);transition:opacity .6s ease,transform 1s cubic-bezier(.16,1,.3,1),filter .8s ease}
.lenses-page .journey-step:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,var(--lens-bg) 90%);opacity:.92}
.lenses-page .journey-step>*:not(.journey-img){position:relative;z-index:2}
.lenses-page .journey-step:hover .journey-img{opacity:.55;filter:grayscale(0);transform:scale(1.09)}
.lenses-page .bifocal-morph{overflow:hidden;animation:morphLens 7s ease-in-out infinite}
@keyframes morphLens{0%,100%{border-radius:50% 50% 45% 55%;transform:rotate(-2deg)}50%{border-radius:43% 57% 53% 47%;transform:rotate(2deg)}}
.lenses-page .morph-old,.lenses-page .morph-new{position:absolute;font:800 12px "Space Grotesk";letter-spacing:.2em;left:50%;transform:translateX(-50%);z-index:2}
.lenses-page .morph-old{top:28%;color:var(--lens-muted);animation:morphOld 7s ease-in-out infinite}
.lenses-page .morph-new{bottom:28%;color:var(--lens-accent);animation:morphNew 7s ease-in-out infinite}
@keyframes morphOld{50%{opacity:.15;transform:translateX(-50%) scale(.8)}}@keyframes morphNew{50%{transform:translateX(-50%) scale(1.25);text-shadow:0 0 25px var(--lens-accent)}}
/* blue light */
.lenses-page .blue-hero .lens-hero-copy{transform:translate3d(calc(var(--lens-mx)*-.4),calc(var(--lens-my)*-.4),0)}
.lenses-page .screen-frame{animation:screenBreath 5s ease-in-out infinite}
@keyframes screenBreath{50%{box-shadow:0 0 110px rgba(64,221,255,.18);transform:perspective(900px) rotateY(-3deg) translateZ(8px)}}
.lenses-page .screen-ui{position:absolute;inset:18%;display:flex;flex-direction:column;justify-content:space-between;padding:20px;border:1px solid rgba(64,221,255,.16);font:800 12px "Space Grotesk";letter-spacing:.2em;color:var(--lens-accent)}
.lenses-page .screen-ui b{font-size:28px;letter-spacing:-.03em;animation:uiPulse 2s ease-in-out infinite}
@keyframes uiPulse{50%{opacity:.35;transform:translateX(8px)}}
.lenses-page .rgb-orbit{position:absolute;width:49%;aspect-ratio:1;border-radius:50%;border:1px dashed rgba(255,80,180,.5);box-shadow:0 0 30px rgba(64,221,255,.12);animation:lensOrbit 7s linear infinite}
.lenses-page .blue-particle{animation:particleFly 3.3s linear infinite,particleJitter 1.5s ease-in-out infinite}
@keyframes particleJitter{50%{margin-top:-8px}}
.lenses-page .digital-timeline{grid-template-columns:repeat(5,1fr);border-top:0;border-bottom:0;gap:12px;background:transparent}
.lenses-page .day-item{min-height:350px;border:1px solid var(--lens-line);overflow:hidden;padding:22px;transform-origin:center bottom}
.lenses-page .day-item:hover{background:rgba(64,221,255,.05);transform:translateY(-12px) rotate(-1deg)}
.lenses-page .day-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2;filter:grayscale(1);transition:.7s ease}
.lenses-page .day-item:hover .day-img{opacity:.45;filter:grayscale(0);transform:scale(1.08)}
.lenses-page .day-item>*:not(.day-img){position:relative;z-index:2}
.lenses-page .day-item h3{margin-top:150px}
.lenses-page .particle-field{border-radius:var(--lens-radius);transform:translate3d(var(--lens-mx),var(--lens-my),0);transition:transform .2s ease-out}
.lenses-page .particle-wave{position:absolute;inset:-20%;background:repeating-radial-gradient(ellipse at center,transparent 0 22px,rgba(64,221,255,.07) 23px 24px);animation:waveExpand 7s linear infinite}
@keyframes waveExpand{to{transform:scale(1.45) rotate(15deg);opacity:.15}}
.lenses-page .filter-glass{animation:filterPulse 4s ease-in-out infinite}
.lenses-page .filter-glass:before{content:"";position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 35%,rgba(64,221,255,.5) 50%,transparent 65%);transform:translateX(-90%) rotate(12deg);animation:glassSweep 3.8s ease-in-out infinite}
@keyframes glassSweep{55%,100%{transform:translateX(90%) rotate(12deg)}}
@keyframes filterPulse{50%{transform:translate(-50%,-50%) scale(1.035);box-shadow:inset 0 0 80px rgba(64,221,255,.17),0 0 35px rgba(64,221,255,.12)}}
.lenses-page .filter-glass span,.lenses-page .filter-glass b{position:absolute;left:50%;transform:translateX(-50%);z-index:2;font:800 12px "Space Grotesk";letter-spacing:.28em;color:var(--lens-accent)}
.lenses-page .filter-glass span{top:44%}.lenses-page .filter-glass b{top:50%;font-size:18px}
.lenses-page .focus-words span{animation:wordFloat 4.5s ease-in-out infinite}
.lenses-page .focus-words span:nth-child(2){animation-delay:-1.1s}.lenses-page .focus-words span:nth-child(3){animation-delay:-2.1s}.lenses-page .focus-words span:nth-child(4){animation-delay:-3.1s}
@keyframes wordFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px) rotate(-1deg)}}
.lenses-page .focus-scan{height:2px;max-width:680px;margin:10px auto 28px;background:linear-gradient(90deg,transparent,var(--lens-accent),transparent);position:relative;overflow:hidden}.lenses-page .focus-scan span{position:absolute;left:0;top:0;width:25%;height:100%;background:#fff;box-shadow:0 0 30px var(--lens-accent);animation:focusScan 2.8s linear infinite}
@keyframes focusScan{to{left:100%}}
/* compact image grid */
.lenses-page .lens-mini-grid{display:grid;grid-template-columns:1fr 1.15fr 1fr;min-height:300px;border-top:1px solid var(--lens-line);border-bottom:1px solid var(--lens-line)}
.lenses-page .mini-image{min-height:300px;overflow:hidden;position:relative}
.lenses-page .mini-image img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85);transition:transform 1s cubic-bezier(.16,1,.3,1),filter .7s ease}
.lenses-page .mini-image:hover img{transform:scale(1.08);filter:saturate(1.15)}
.lenses-page .mini-copy{padding:48px 6vw;display:flex;flex-direction:column;justify-content:center}
.lenses-page .mini-copy h3{font:700 clamp(34px,4vw,58px)/.95 "Space Grotesk";letter-spacing:-.05em;margin:12px 0 22px}
.lenses-page .mini-copy p{color:var(--lens-muted);line-height:1.7}
.lenses-page .lens-underlink{color:var(--lens-ink);font-weight:800;text-decoration:none;width:max-content;border-bottom:1px solid var(--lens-accent);padding-bottom:5px}
.lenses-page .reveal-float{opacity:0;transform:translateY(45px) scale(.98);transition:opacity .9s ease,transform 1s cubic-bezier(.16,1.2,.3,1)}
.lenses-page .reveal-float.is-visible{opacity:1;transform:none}
/* all reveal entries get slightly different motion */
.lenses-page .lens-reveal:nth-child(3n){transition-delay:.12s}.lenses-page .lens-reveal:nth-child(4n){transition-delay:.2s}
.lenses-page .lens-reveal.is-visible{animation:revealSettle .85s cubic-bezier(.16,1.2,.3,1) both}
@keyframes revealSettle{0%{opacity:0;transform:translateY(35px) scale(.98);filter:blur(4px)}70%{opacity:1;transform:translateY(-3px) scale(1);filter:blur(0)}100%{transform:none}}
@media(max-width:980px){
.lenses-page .lens-hero{min-height:auto;padding-top:120px}.lenses-page .lens-photo-band{grid-template-columns:1fr;min-height:auto;padding-top:65px;padding-bottom:65px;gap:30px}.lenses-page .photo-stack{height:420px;margin:0 auto;width:min(680px,100%)}.lenses-page .lens-mini-grid{grid-template-columns:1fr 1fr}.lenses-page .mini-copy{grid-column:1/-1;grid-row:2}.lenses-page .digital-timeline{grid-template-columns:1fr 1fr}.lenses-page .day-item{min-height:280px}.lenses-page .journey-step{min-height:420px}
}
@media(max-width:640px){
.lenses-page .lens-hero{padding-top:112px}.lenses-page .lens-photo-band{padding-left:22px;padding-right:22px}.lenses-page .photo-stack{height:330px}.lenses-page .pc-one{width:67%;height:84%;left:0}.lenses-page .pc-two{width:48%;height:69%;right:0}.lenses-page .photo-stamp{left:16%;font-size:12px}.lenses-page .lens-mini-grid{grid-template-columns:1fr}.lenses-page .mini-copy{grid-column:auto;grid-row:auto}.lenses-page .mini-image{min-height:240px}.lenses-page .digital-timeline{grid-template-columns:1fr}.lenses-page .day-item{min-height:250px}.lenses-page .lens-final{min-height:500px}.lenses-page .focus-words{gap:8px}.lenses-page .focus-words span{font-size:32px}.lenses-page .journey-step{min-height:390px}
}
@media(prefers-reduced-motion:reduce){.lenses-page .lens-section,.lenses-page .lens-photo-band,.lenses-page .lens-mini-grid{transform:none!important}.lenses-page *{animation:none!important;scroll-behavior:auto!important}}
/* =========================================================
FINAL VISIBILITY FIX — LIGHT MODE
Keeps the existing design, only improves contrast where
light backgrounds previously made text difficult to read.
========================================================= */
html[data-theme="light"] .frames-page{
--f-ink:#08152f;
--f-muted:#40516f;
}
html[data-theme="light"] .frames-page .frames-hero,
html[data-theme="light"] .frames-page .frames-story,
html[data-theme="light"] .frames-page .frames-products{
color:#08152f;
}
html[data-theme="light"] .frames-page .frames-title,
html[data-theme="light"] .frames-page .frames-story-copy h2,
html[data-theme="light"] .frames-page .frames-section-head h2,
html[data-theme="light"] .frames-page .frames-feature b,
html[data-theme="light"] .frames-page .product-meta h3{
color:#08152f;
}
html[data-theme="light"] .frames-page .frames-lead,
html[data-theme="light"] .frames-page .frames-story-copy>p,
html[data-theme="light"] .frames-page .frames-section-head>p,
html[data-theme="light"] .frames-page .frames-feature small,
html[data-theme="light"] .frames-page .product-meta p,
html[data-theme="light"] .frames-page .frames-tab,
html[data-theme="light"] .frames-page .frames-chip{
color:#40516f;
}
html[data-theme="light"] .frames-page .frames-tabs{
background:rgba(40,103,255,.07);
border-color:rgba(17,37,70,.16);
}
html[data-theme="light"] .frames-page .frames-chip,
html[data-theme="light"] .frames-page .frames-feature{
border-color:rgba(17,37,70,.15);
}
html[data-theme="light"] .frames-page .frames-product{
background:rgba(255,255,255,.92);
border-color:rgba(17,37,70,.14);
}
html[data-theme="light"] .frames-page .frames-marquee{
color:#08152f;
}
/* Reading collection light-mode contrast */
html[data-theme="light"] .reading-page{
--reading-ink:#08152f;
--reading-muted:#40516f;
}
html[data-theme="light"] .reading-page .reading-title,
html[data-theme="light"] .reading-page .reading-story-copy h2,
html[data-theme="light"] .reading-page .reading-section-head h2,
html[data-theme="light"] .reading-page .reading-feature b,
html[data-theme="light"] .reading-page .product-meta h3{
color:#08152f;
}
html[data-theme="light"] .reading-page .reading-lead,
html[data-theme="light"] .reading-page .reading-story-copy>p,
html[data-theme="light"] .reading-page .reading-section-head>p,
html[data-theme="light"] .reading-page .reading-feature small,
html[data-theme="light"] .reading-page .product-meta p,
html[data-theme="light"] .reading-page .reading-mini-points{
color:#40516f;
}
html[data-theme="light"] .reading-page .reading-story,
html[data-theme="light"] .reading-page .reading-products{
color:#08152f;
}
/* =========================================================
FINAL READABILITY + FOOTER SCALE UPDATE
Light mode contrast only; dark mode stays unchanged.
========================================================= */
/* Stronger neutral text across the site */
:root{
--muted:#596984;
}
/* Light-mode category pages: keep every text layer readable */
html[data-theme="light"] .frames-page{
--fx-bg:#eef3fb;
--fx-text:#0b1730;
--fx-muted:#53647f;
--fx-line:rgba(9,25,55,.16);
}
html[data-theme="light"] .frames-page .fx-copy h2,
html[data-theme="light"] .frames-page .fx-title{
color:#0b1730;
}
html[data-theme="light"] .frames-page .fx-copy p,
html[data-theme="light"] .frames-page .fx-hero-copy>p{
color:#53647f;
font-weight:600;
}
html[data-theme="light"] .frames-page .rail-link{
color:#53647f;
font-weight:800;
}
html[data-theme="light"] .frames-page .rail-link:hover,
html[data-theme="light"] .frames-page .rail-link.active{
color:#0b1730;
}
/* Sunglasses / solar experience */
html[data-theme="light"] .frames-page.theme-solar{
--fx-bg:#eef3fb;
color:#0b1730;
}
html[data-theme="light"] .frames-page.theme-solar .fx-hero{
background:
radial-gradient(circle at 78% 40%,rgba(232,147,11,.14),transparent 28%),
linear-gradient(135deg,#eef3fb,#f8faff 58%,#eee9ff);
}
html[data-theme="light"] .frames-page.theme-solar .fx-lens{
background:
radial-gradient(circle at 18% 50%,rgba(232,147,11,.10),transparent 32%),
linear-gradient(135deg,#eaf1fb,#f7f9fd);
color:#0b1730;
}
html[data-theme="light"] .frames-page.theme-solar .fx-line-list div{
color:#233452;
border-bottom-color:rgba(9,25,55,.15);
font-weight:600;
}
html[data-theme="light"] .frames-page.theme-solar .fx-line-list div:hover{
color:#b56600;
}
html[data-theme="light"] .frames-page.theme-solar .fx-orbit-section{
background:
radial-gradient(circle at 50% 52%,rgba(232,147,11,.13),transparent 30%),
linear-gradient(135deg,#eef3fb,#f9fbff);
color:#0b1730;
}
html[data-theme="light"] .frames-page.theme-solar .fx-spotlight{
background:linear-gradient(135deg,#edf3fb,#f8faff);
color:#0b1730;
}
html[data-theme="light"] .frames-page.theme-solar .solar-cta{
background:
radial-gradient(circle at 50% 40%,rgba(232,147,11,.16),transparent 28%),
linear-gradient(135deg,#e8f0fb,#f8faff);
color:#0b1730;
}
/* Stronger grey text in all light-mode pages */
html[data-theme="light"] .frames-page .fx-scroll-note,
html[data-theme="light"] .frames-page .fx-copy p,
html[data-theme="light"] .frames-page .fx-hero-copy>p,
html[data-theme="light"] .frames-page .fx-line-list div,
html[data-theme="light"] .frames-page .style-orbit>span{
color:#53647f;
font-weight:600;
}
/* Footer — larger but still responsive */
.footer-brand p{
font-size:14px;
font-weight:500;
color:#aab7cb;
}
.footer-column h3{
font-size:14px;
font-weight:800;
}
.footer-column a,
.footer-column > span{
font-size:13px;
font-weight:600;
color:#a8b5c9;
}
.footer-contact a,
.footer-contact > span{
font-size:13px;
font-weight:600;
}
.footer-bottom{
font-size:12px;
font-weight:600;
color:#8e9db4;
}
.footer-logo .brand-text small{
font-size:12px;
}
@media(max-width:900px){
.footer-inner{
grid-template-columns:1.2fr 1fr 1fr;
gap:38px;
}
.footer-brand p{
font-size:13px;
}
.footer-column a,
.footer-column > span,
.footer-contact a,
.footer-contact > span{
font-size:12.5px;
}
.footer-column h3{
font-size:13px;
}
.footer-bottom{
font-size:10.5px;
}
}
@media(max-width:640px){
.footer-inner{
grid-template-columns:1fr 1fr;
gap:30px 22px;
padding-bottom:45px;
}
.footer-brand{
grid-column:1 / -1;
}
.footer-brand p{
max-width:100%;
font-size:13px;
line-height:1.75;
}
.footer-column h3{
font-size:13px;
margin-bottom:10px;
}
.footer-column a,
.footer-column > span,
.footer-contact a,
.footer-contact > span{
font-size:12px;
line-height:1.65;
}
.footer-bottom{
flex-direction:column;
align-items:flex-start;
font-size:12px;
line-height:1.6;
}
.footer-bottom div{
flex-wrap:wrap;
gap:10px 18px;
}
}
@media(max-width:380px){
.footer-inner{
grid-template-columns:1fr;
}
.footer-brand{
grid-column:auto;
}
.footer-column a,
.footer-column > span,
.footer-contact a,
.footer-contact > span{
font-size:11.5px;
}
}
/* =========================================================
SINGLE VISION — POINT BAR VISIBILITY + RIGHT REVEAL
Added without changing the existing layout/design.
========================================================= */
/* Keep every point readable in both themes, especially while hovered. */
.lenses-page .lens-point,
.lenses-page .lens-point h3,
.lenses-page .lens-point p,
.lenses-page .lens-point i {
color: var(--lens-ink);
}
.lenses-page .lens-point h3 {
color: var(--lens-ink);
}
.lenses-page .lens-point p {
color: var(--lens-muted);
}
/* Strong, visible hover state — prevents text disappearing on pale bars. */
.lenses-page .lens-point:hover h3 {
color: var(--lens-ink) !important;
opacity: 1 !important;
}
.lenses-page .lens-point:hover p {
color: var(--lens-muted) !important;
opacity: 1 !important;
}
.lenses-page .lens-point:hover i {
color: var(--lens-accent) !important;
opacity: 1 !important;
}
/* Scroll reveal: each bar enters from the right, one at a time. */
.lenses-page .lens-point.point-slide-reveal {
opacity: 0;
transform: translate3d(110px, 0, 0);
transition:
opacity .75s cubic-bezier(.16,1,.3,1),
transform .9s cubic-bezier(.16,1.05,.3,1),
background .35s ease;
will-change: transform, opacity;
}
.lenses-page .lens-point.point-slide-reveal.is-point-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.lenses-page .lens-point.point-slide-reveal:nth-child(1) {
transition-delay: .02s;
}
.lenses-page .lens-point.point-slide-reveal:nth-child(2) {
transition-delay: .14s;
}
.lenses-page .lens-point.point-slide-reveal:nth-child(3) {
transition-delay: .26s;
}
/* Make the bar feel like a clean editorial strip as it arrives. */
.lenses-page .lens-point.point-slide-reveal::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 0;
background: linear-gradient(90deg, rgba(40,103,255,.10), transparent);
pointer-events: none;
transition: width .8s cubic-bezier(.16,1,.3,1);
}
.lenses-page .lens-point {
position: relative;
overflow: hidden;
}
.lenses-page .lens-point.is-point-visible::after {
width: 100%;
opacity: .35;
}
@media (prefers-reduced-motion: reduce) {
.lenses-page .lens-point.point-slide-reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* =========================================================
SINGLE VISION — VISION-IN-MOTION SECTION
Full-cover background photo with a strong blue tint.
Text bumped to bold weights with shadow for clear visibility.
========================================================= */
.lenses-page .lens-photo-band{
isolation:isolate;
background:linear-gradient(100deg,rgba(3,14,42,.92) 0%,rgba(9,54,132,.8) 45%,rgba(17,96,214,.6) 100%);
color:#ffffff;
}
.lenses-page .lens-photo-band::before{
content:"";
position:absolute;
top:-20px;
right:-20px;
bottom:-20px;
left:-20px;
width:auto;
height:auto;
border-radius:0;
border:none;
animation:none;
z-index:0;
pointer-events:none;
background:url("../images/hero-woman-sunglasses.jpg") center center / cover no-repeat;
filter:blur(9px) saturate(1.05);
transform:none;
}
.lenses-page .lens-photo-band::after{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:
radial-gradient(circle at 80% 22%,rgba(64,142,255,.4),transparent 30%),
linear-gradient(90deg,rgba(2,14,44,.62),rgba(9,54,132,.34) 55%,rgba(17,96,214,.3) 100%);
mix-blend-mode:normal;
}
.lenses-page .lens-photo-band > *{
position:relative;
z-index:2;
}
.lenses-page .lens-photo-band .photo-band-copy{
text-shadow:0 3px 22px rgba(0,8,30,.6);
}
.lenses-page .lens-photo-band .lens-kicker{
color:#eaf3ff;
font-weight:900;
text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.lenses-page .lens-photo-band .lens-kicker::before{
background:#ffffff;
}
.lenses-page .lens-photo-band .photo-band-copy h2{
color:#ffffff;
font-weight:900;
text-shadow:0 5px 30px rgba(0,8,30,.75),0 2px 8px rgba(0,0,0,.6);
}
.lenses-page .lens-photo-band .photo-band-copy p{
color:#ffffff;
font-weight:700;
text-shadow:0 2px 14px rgba(0,8,30,.65);
}
.lenses-page .lens-photo-band .photo-stack{
filter:drop-shadow(0 28px 55px rgba(0,12,45,.5));
}
.lenses-page .lens-photo-band .photo-card{
border-color:rgba(255,255,255,.3);
box-shadow:0 30px 90px rgba(0,8,35,.45);
}
.lenses-page .lens-photo-band .photo-stamp{
color:#ffffff;
font-weight:800;
background:rgba(7,43,105,.8);
border-color:rgba(255,255,255,.38);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}
@media (max-width:900px){
.lenses-page .lens-photo-band::before{
background-position:center;
}
}
@media (max-width:600px){
.lenses-page .lens-photo-band{
min-height:640px;
padding-top:70px;
padding-bottom:70px;
}
}
/* =========================================================
BACK TO TOP — GLOBAL
========================================================= */
.back-to-top {
position: fixed;
right: clamp(16px, 2.2vw, 34px);
bottom: clamp(16px, 2.5vw, 32px);
width: 58px;
height: 58px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
padding: 0;
border: 1px solid rgba(40,103,255,.55);
border-radius: 50%;
background: rgba(7,17,38,.88);
color: #fff;
box-shadow: 0 14px 38px rgba(0,0,0,.22), 0 0 0 0 rgba(40,103,255,.25);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
cursor: pointer;
z-index: 1200;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(18px) scale(.88);
transition: opacity .35s ease, visibility .35s ease, transform .45s cubic-bezier(.16,1.3,.3,1), background .3s ease, box-shadow .3s ease;
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.back-to-top:hover {
background: #2867ff;
box-shadow: 0 18px 45px rgba(40,103,255,.32), 0 0 0 7px rgba(40,103,255,.09);
transform: translateY(-4px) scale(1.04);
}
.back-to-top-arrow {
font-size: 20px;
line-height: 18px;
font-weight: 800;
}
.back-to-top-label {
font-size: 12px;
line-height: 8px;
letter-spacing: .2em;
font-weight: 800;
}
[data-theme="light"] .back-to-top {
background: rgba(255,255,255,.92);
color: #071126;
border-color: rgba(40,103,255,.45);
box-shadow: 0 14px 38px rgba(20,45,90,.16);
}
[data-theme="light"] .back-to-top:hover {
color: #fff;
background: #2867ff;
}
/* Frames page uses the same always-visible sticky navigation as the other pages. */
.frames-page > .navbar {
position: fixed !important;
top: 10px !important;
left: 14px !important;
right: 14px !important;
width: min(1380px, calc(100% - 28px)) !important;
margin: 0 auto !important;
z-index: 1100 !important;
}
@media (max-width: 899px) {
.frames-page > .navbar {
top: 8px !important;
left: 8px !important;
right: 8px !important;
width: calc(100% - 16px) !important;
}
}
@media (max-width: 600px) {
.back-to-top {
width: 50px;
height: 50px;
right: 14px;
bottom: 14px;
}
.back-to-top-arrow { font-size: 18px; }
}
/* =========================================================
FINAL GLOBAL NAV + FOOTER BEHAVIOR
- Language control is a single-click LTR/RTL toggle.
- The label always shows the direction that will be activated.
- Theme icon always shows the mode that will be activated.
- Footer is a normal rectangular footer; no floating/wave effect.
========================================================= */
.language-btn { cursor: pointer; }
/* In light mode, show the dark-mode icon; in dark mode, show the light-mode icon. */
.sun-icon, .moon-icon { display: none !important; }
[data-theme="light"] .moon-icon { display: block !important; }
[data-theme="dark"] .sun-icon { display: block !important; }
/* Remove the decorative floating footer wave everywhere. */
.site-footer {
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
overflow: hidden;
margin: 0 !important;
}
.site-footer::before,
.site-footer::after { display: none !important; }
.footer-wave { display: none !important; }
.footer-inner,
.footer-bottom { position: relative; transform: none !important; }
/* Keep the footer visually solid and rectangular in both themes. */
html[data-theme="light"] .site-footer {
background: #eef3fb !important;
}
html[data-theme="dark"] .site-footer {
background: #071126 !important;
}
/* =========================================================
FINAL THEME TOGGLE + OPPOSITE CONTROL FIX
The control always displays the mode/direction that will be
activated next, while the page itself immediately changes.
========================================================= */
html[data-theme="light"] body.theme-light,
html[data-theme="light"] body {
--theme-page-bg:#edf3fb;
--theme-page-ink:#0b1730;
--theme-nav-bg:rgba(255,255,255,.94);
}
html[data-theme="dark"] body.theme-dark,
html[data-theme="dark"] body {
--theme-page-bg:#050a18;
--theme-page-ink:#f4f7ff;
--theme-nav-bg:rgba(5,10,24,.94);
}
html[data-theme="light"] .navbar,
html[data-theme="light"] .site-header {
background:var(--theme-nav-bg) !important;
color:#0b1730 !important;
border-color:rgba(20,42,78,.14) !important;
}
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .site-header {
background:var(--theme-nav-bg) !important;
color:#f4f7ff !important;
border-color:rgba(255,255,255,.10) !important;
}
html[data-theme="light"] .navbar .nav-link,
html[data-theme="light"] .navbar .brand,
html[data-theme="light"] .navbar .control-btn,
html[data-theme="light"] .navbar .icon-btn {
color:#0b1730 !important;
}
html[data-theme="dark"] .navbar .nav-link,
html[data-theme="dark"] .navbar .brand,
html[data-theme="dark"] .navbar .control-btn,
html[data-theme="dark"] .navbar .icon-btn {
color:#f4f7ff !important;
}
/* The theme icon is the NEXT action: light page shows moon, dark page shows sun. */
html[data-theme="light"] .theme-dark-icon { display:block !important; }
html[data-theme="light"] .theme-light-icon { display:none !important; }
html[data-theme="dark"] .theme-dark-icon { display:none !important; }
html[data-theme="dark"] .theme-light-icon { display:block !important; }
/* Existing sun/moon SVGs use the same opposite-action behavior. */
html[data-theme="light"] .sun-icon { display:none !important; }
html[data-theme="light"] .moon-icon { display:block !important; }
html[data-theme="dark"] .sun-icon { display:block !important; }
html[data-theme="dark"] .moon-icon { display:none !important; }
html, body {
transition:background-color .45s ease, color .45s ease;
}
/* =========================================================
FINAL GLOBAL TYPOGRAPHY + FOOTER BOTTOM FIX
- Increase supporting/body text across every page.
- Keep display titles/headings at their designed sizes.
- Remove the visible strip/gap underneath the footer.
========================================================= */
/* Make normal reading/supporting text more comfortable to read. */
body {
font-size: 16px;
}
body p,
body li,
body dd,
body dt,
body label,
body figcaption,
body blockquote,
body .description,
body .desc,
body .subtitle,
body .eyebrow-text,
body .card-text,
body .meta-text {
font-size: 16px !important;
line-height: 1.7;
}
/* Navigation and controls: slightly larger, but still compact. */
.nav-menu .nav-link,
.nav-menu .dropdown-item,
.navbar .control-btn,
.navbar .icon-btn,
.navbar button {
font-size: 14px !important;
}
/* Buttons and small interactive labels. */
button,
.btn,
.cta,
.cta-button,
.hero-btn,
.card-btn,
.section-link {
font-size: 15px !important;
}
/* Footer text was especially small in the previous version. */
.footer-brand p {
font-size: 15px !important;
line-height: 1.75;
}
.footer-column h3 {
font-size: 15px !important;
}
.footer-column a,
.footer-column > span {
font-size: 14px !important;
line-height: 1.7;
}
.footer-bottom {
font-size: 13px !important;
line-height: 1.6;
padding-bottom: 18px !important;
}
/* Keep icon-only controls from becoming oversized. */
.social-links a,
.back-top,
.back-to-top {
font-size: initial !important;
}
/* No extra uncovered strip below a page's rectangular footer. */
html:has(.site-footer),
body:has(.site-footer) {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
body:has(.site-footer) {
background-color: var(--footer) !important;
}
.site-footer {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.site-footer .footer-bottom {
margin-bottom: 0 !important;
}
/* Responsive supporting text remains readable without changing headings. */
@media (max-width: 900px) {
body p,
body li,
body label,
body .description,
body .desc,
body .subtitle,
body .card-text {
font-size: 15px !important;
}
.footer-brand p {
font-size: 14px !important;
}
.footer-column a,
.footer-column > span {
font-size: 13.5px !important;
}
.footer-bottom {
font-size: 12.5px !important;
}
}
@media (max-width: 600px) {
body p,
body li,
body label,
body .description,
body .desc,
body .subtitle,
body .card-text {
font-size: 15px !important;
line-height: 1.65;
}
.nav-menu .nav-link,
.nav-menu .dropdown-item {
font-size: 14px !important;
}
.footer-brand p,
.footer-column a,
.footer-column > span {
font-size: 14px !important;
}
.footer-bottom {
font-size: 12px !important;
}
}
/* =========================================================
HOME1 — ADVANCED OPTICS / NO EMPTY TOP SPACE
Fills the upper-right area with animated optical metrics
========================================================= */
.home1-page .lens-section{
min-height:800px;
align-items:stretch;
grid-template-columns:1.05fr .95fr;
}
.home1-page .lens-content{
position:relative;
max-width:none;
padding:48px clamp(38px,5vw,82px) 54px 58px;
display:flex;
flex-direction:column;
justify-content:flex-start;
overflow:hidden;
background:
radial-gradient(circle at 78% 10%,rgba(40,103,255,.12),transparent 25%),
linear-gradient(135deg,rgba(8,21,47,.98),rgba(10,19,45,.96));
}
.home1-page .lens-content::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:1px;
background:linear-gradient(90deg,transparent,rgba(91,139,255,.75),transparent);
transform:scaleX(.2);
transform-origin:left;
animation:lensTopLine 4s ease-in-out infinite;
}
.home1-page .lens-content::after{
content:"OPTICAL PRECISION";
position:absolute;
right:-36px;
top:150px;
writing-mode:vertical-rl;
font:700 12px/1 "Manrope",sans-serif;
letter-spacing:.28em;
color:rgba(255,255,255,.22);
animation:lensSideFloat 5s ease-in-out infinite;
}
@keyframes lensTopLine{
0%,100%{transform:scaleX(.15);opacity:.3}
50%{transform:scaleX(1);opacity:1}
}
@keyframes lensSideFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(18px)}
}
.home1-page .lens-tech-intro{
position:relative;
z-index:2;
display:grid;
grid-template-columns:1.2fr repeat(3,auto);
align-items:center;
gap:22px;
min-height:82px;
margin-bottom:20px;
padding-bottom:18px;
border-bottom:1px solid rgba(255,255,255,.12);
}
.home1-page .lens-tech-line{
height:1px;
background:linear-gradient(90deg,rgba(75,130,255,.9),transparent);
position:relative;
overflow:hidden;
}
.home1-page .lens-tech-line::after{
content:"";
position:absolute;
width:70px;
height:2px;
top:-.5px;
left:-80px;
background:#4b82ff;
box-shadow:0 0 18px #4b82ff;
animation:lensScanLine 2.8s linear infinite;
}
@keyframes lensScanLine{
to{left:100%}
}
.home1-page .lens-tech-item{
display:flex;
flex-direction:column;
gap:4px;
min-width:62px;
transform:translateY(0);
transition:transform .35s ease;
}
.home1-page .lens-tech-item:hover{transform:translateY(-5px)}
.home1-page .lens-tech-item strong{
color:#f4f7ff;
font:800 22px/1 "Manrope",sans-serif;
}
.home1-page .lens-tech-item span{
color:#8190ad;
font:700 12px/1.2 "Manrope",sans-serif;
letter-spacing:.14em;
white-space:nowrap;
}
.home1-page .lens-tech-note{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
gap:9px;
width:max-content;
margin:0 0 14px;
padding:7px 11px;
border:1px solid rgba(84,132,255,.2);
border-radius:999px;
background:rgba(40,103,255,.07);
color:#a9b8d3;
font:700 12px/1 "Manrope",sans-serif;
letter-spacing:.08em;
text-transform:uppercase;
animation:lensNotePulse 3.5s ease-in-out infinite;
}
.home1-page .lens-tech-dot{
width:6px;
height:6px;
border-radius:50%;
/* font-size:12px; */
background:#4b82ff;
box-shadow:0 0 0 0 rgba(75,130,255,.65);
animation:lensDotPulse 2s infinite;
}
@keyframes lensNotePulse{
0%,100%{transform:translateX(0);opacity:.82}
50%{transform:translateX(5px);opacity:1}
}
@keyframes lensDotPulse{
70%{box-shadow:0 0 0 8px rgba(75,130,255,0)}
100%{box-shadow:0 0 0 0 rgba(75,130,255,0)}
}
.home1-page .lens-content .eyebrow{
position:relative;
z-index:2;
margin-top:2px;
}
.home1-page .lens-content h2{
position:relative;
z-index:2;
margin-top:14px;
margin-bottom:20px;
}
.home1-page .lens-content > p{
position:relative;
z-index:2;
font-size:16px;
max-width:600px;
}
.home1-page .lens-list{
position:relative;
z-index:2;
margin-top:24px;
}
.home1-page .lens-list a{
padding:13px 0;
}
.home1-page .lens-list a strong{font-size:17px}
@media(max-width:1100px){
.home1-page .lens-content{padding-left:40px;padding-right:45px}
.home1-page .lens-tech-intro{gap:14px}
.home1-page .lens-tech-item strong{font-size:19px}
}
@media(max-width:900px){
.home1-page .lens-section{
grid-template-columns:1fr;
min-height:auto;
}
.home1-page .lens-image{
min-height:520px;
height:520px;
}
.home1-page .lens-content{
min-height:650px;
padding:55px 7vw 65px;
}
.home1-page .lens-content::after{display:none}
}
@media(max-width:600px){
.home1-page .lens-image{min-height:390px;height:390px}
.home1-page .lens-content{
min-height:auto;
padding:42px 22px 50px;
}
.home1-page .lens-tech-intro{
grid-template-columns:1fr 1fr 1fr;
gap:12px;
}
.home1-page .lens-tech-line{display:none}
.home1-page .lens-tech-item strong{font-size:18px}
.home1-page .lens-tech-item span{font-size:10px}
.home1-page .lens-tech-note{font-size:10px}
}
/* =========================================================
HOME1 — ADVANCED OPTICS / TRUE FULL-HEIGHT CONTENT
Keep the right panel filled all the way down; no dead space.
========================================================= */
.home1-page .lens-content{
height:100%;
min-height:0;
box-sizing:border-box;
display:flex;
flex-direction:column;
justify-content:flex-start;
}
.home1-page .lens-list{
flex:1 1 auto;
min-height:0;
margin-top:24px;
display:flex;
flex-direction:column;
}
.home1-page .lens-list a{
flex:1 1 0;
min-height:62px;
display:grid;
align-items:center;
box-sizing:border-box;
}
@media(max-width:900px){
.home1-page .lens-content{
height:auto;
min-height:650px;
}
.home1-page .lens-list{
flex:none;
}
.home1-page .lens-list a{
flex:none;
min-height:62px;
}
}
@media(max-width:600px){
.home1-page .lens-content{
min-height:auto;
}
}
/* =========================================================
LIGHT MODE CONTRAST FIX — HOME1 ADVANCED OPTICS
Keep the light theme readable: dark text on a light panel.
========================================================= */
html[data-theme="light"] .home1-page .lens-content{
background:
radial-gradient(circle at 78% 10%,rgba(40,103,255,.10),transparent 25%),
linear-gradient(135deg,#f7faff 0%,#eef4ff 55%,#f4efff 100%);
color:#0b1730;
border-left:1px solid rgba(27,61,112,.08);
}
html[data-theme="light"] .home1-page .lens-content::before{
background:linear-gradient(90deg,transparent,rgba(40,103,255,.55),transparent);
}
html[data-theme="light"] .home1-page .lens-content::after{
color:rgba(18,42,78,.28);
}
html[data-theme="light"] .home1-page .lens-tech-intro{
border-bottom-color:rgba(20,48,88,.12);
}
html[data-theme="light"] .home1-page .lens-tech-item strong{
color:#0b1730;
}
html[data-theme="light"] .home1-page .lens-tech-item span{
color:#62728c;
}
html[data-theme="light"] .home1-page .lens-tech-note{
background:rgba(40,103,255,.07);
border-color:rgba(40,103,255,.18);
color:#536783;
}
html[data-theme="light"] .home1-page .lens-content h2,
html[data-theme="light"] .home1-page .lens-content h2 span{
color:#0b1730;
}
html[data-theme="light"] .home1-page .lens-content h2 span{
color:#2867ff;
}
html[data-theme="light"] .home1-page .lens-content > p{
color:#536783;
}
html[data-theme="light"] .home1-page .lens-list a{
color:#10213f;
border-bottom-color:rgba(20,48,88,.12);
}
html[data-theme="light"] .home1-page .lens-list a:hover{
color:#2867ff;
background:rgba(40,103,255,.035);
}
html[data-theme="light"] .home1-page .lens-list a span{
color:#70809a;
}
html[data-theme="light"] .home1-page .lens-list a strong{
color:#10213f;
}
html[data-theme="light"] .home1-page .lens-list a i{
color:#2867ff;
}
html[data-theme="light"] .home1-page .lens-image::after{
background:linear-gradient(90deg,transparent 35%,rgba(237,244,255,.96) 100%);
}
/* Preserve readable contrast for the Advanced Optics section at smaller widths. */
@media(max-width:900px){
html[data-theme="light"] .home1-page .lens-content{
border-left:0;
border-top:1px solid rgba(27,61,112,.08);
}
html[data-theme="light"] .home1-page .lens-image::after{
background:linear-gradient(180deg,transparent 45%,rgba(237,244,255,.96) 100%);
}
}
/* =========================================================
STORY — EDITORIAL NO-GAP REDESIGN
========================================================= */
.story-visual-redesign{
width:min(var(--container),100%);
min-height:720px;
margin:55px auto 0;
display:grid;
grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
position:relative;
overflow:hidden;
background:linear-gradient(120deg,#eef3fa 0%,#e8eef8 48%,#dfe8f8 100%);
}
.story-main-media{
min-height:720px;
position:relative;
overflow:hidden;
}
.story-main-media img{
width:100%;height:100%;object-fit:cover;display:block;
transition:transform 1.2s var(--ease),filter .8s ease;
}
.story-main-media:hover img{transform:scale(1.055);filter:saturate(1.05)}
.story-media-label{
position:absolute;left:42px;bottom:38px;z-index:2;
display:flex;flex-direction:column;gap:8px;
color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.4)
}
.story-media-label span{font-size:12px;letter-spacing:.22em;font-weight:800;color:#9ec0ff}
.story-media-label strong{font-size:clamp(20px,2vw,30px);line-height:1.05;font-weight:800}
.story-media-line{
position:absolute;left:38px;top:12%;bottom:12%;width:1px;
background:linear-gradient(transparent,#6ea0ff,transparent);opacity:.9;
}
.story-editorial{
min-height:720px;padding:58px clamp(34px,5vw,72px) 42px;
display:flex;flex-direction:column;justify-content:center;
color:#0b1630;position:relative;
}
.story-editorial::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
background:linear-gradient(transparent,rgba(41,105,255,.45),transparent)
}
.story-editorial-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}
.story-editorial-top .eyebrow{color:#2867ff;font-size:12px;letter-spacing:.2em;font-weight:800}
.story-index{font:800 12px/1 "Manrope",sans-serif;color:#71809b;letter-spacing:.15em}
.story-editorial h3{font:800 clamp(42px,5vw,76px)/.94 "Manrope",sans-serif;letter-spacing:-.055em;margin:0 0 25px;color:#0a1630}
.story-editorial h3 em{font-style:normal;color:#2867ff}
.story-lead{font-size:17px;line-height:1.75;max-width:590px;color:#40516e;margin:0 0 34px}
.story-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(19,45,88,.16);border-bottom:1px solid rgba(19,45,88,.16);margin-bottom:28px}
.story-stat{padding:18px 14px 18px 0;display:flex;flex-direction:column;gap:5px;position:relative}
.story-stat:not(:last-child)::after{content:"";position:absolute;right:10px;top:18px;bottom:18px;width:1px;background:rgba(19,45,88,.13)}
.story-stat strong{font:800 clamp(25px,3vw,39px)/1 "Manrope",sans-serif;color:#2867ff}
.story-stat span{font-size:14px;line-height:1.45;color:#52637e}
.story-detail-row{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center}
.story-detail-image{height:128px;overflow:hidden;border-radius:18px;position:relative}
.story-detail-image img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.story-detail-image:hover img{transform:scale(1.08)}
.story-detail-copy{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.detail-number{font:800 12px/1 "Manrope",sans-serif;letter-spacing:.16em;color:#2867ff}
.story-detail-copy p{margin:0;color:#40516e;font-size:14px;line-height:1.6}
.story-detail-copy .text-link{font-size:13px;color:#0b1630}
[data-theme="dark"] .story-visual-redesign{background:linear-gradient(120deg,#0b1630 0%,#0d1831 55%,#101a38 100%)}
[data-theme="dark"] .story-editorial{color:#f5f7ff}
[data-theme="dark"] .story-editorial h3{color:#f5f7ff}
[data-theme="dark"] .story-lead,[data-theme="dark"] .story-detail-copy p{color:#b8c4d9}
[data-theme="dark"] .story-stat span{color:#a8b6cd}
[data-theme="dark"] .story-stats{border-color:rgba(180,200,235,.17)}
[data-theme="dark"] .story-stat:not(:last-child)::after{background:rgba(180,200,235,.14)}
[data-theme="dark"] .story-detail-copy .text-link{color:#f5f7ff}
@media(max-width:900px){
.story-visual-redesign{grid-template-columns:1fr;min-height:auto}
.story-main-media{min-height:520px}
.story-editorial{min-height:auto;padding:48px 30px}
.story-editorial::before{display:none}
}
@media(max-width:600px){
.story-visual-redesign{margin-top:30px}
.story-main-media{min-height:430px}
.story-media-label{left:22px;bottom:24px}
.story-media-line{left:20px}
.story-editorial{padding:38px 22px}
.story-editorial h3{font-size:43px}
.story-lead{font-size:15px}
.story-stats{grid-template-columns:1fr}
.story-stat{padding:14px 0;border-bottom:1px solid rgba(19,45,88,.12)}
.story-stat:not(:last-child)::after{display:none}
.story-detail-row{grid-template-columns:110px 1fr;gap:14px}
.story-detail-image{height:110px}
}
/* =========================================================
HOME PAGE 2 — VISION JOURNEY / NO-GAP REDESIGN
Only the Home 2 journey section is restyled.
========================================================= */
.h2-journey{
min-height:0 !important;
display:grid !important;
grid-template-columns:minmax(280px,.78fr) minmax(0,1.55fr) !important;
grid-template-rows:auto auto !important;
align-items:start !important;
column-gap:clamp(36px,6vw,90px) !important;
row-gap:38px !important;
padding:clamp(70px,8vw,105px) max(5vw,40px) 0 !important;
overflow:hidden !important;
background:
radial-gradient(circle at 12% 20%,rgba(40,103,255,.08),transparent 30%),
linear-gradient(180deg,#f7f9fd 0%,#eef3fb 100%) !important;
}
.h2-journey-copy{
grid-column:1 !important;
grid-row:1 !important;
position:relative !important;
z-index:3 !important;
align-self:center !important;
max-width:560px !important;
padding:10px 0 0 !important;
}
.h2-journey-copy:after{
content:"01 — 02 — 03 — 04";
display:block;
margin-top:34px;
color:#2867ff;
font:700 12px/1 Manrope,sans-serif;
letter-spacing:.22em;
opacity:.72;
animation:h2JourneyPulse 3s ease-in-out infinite;
}
.h2-journey h2{
font-size:clamp(46px,5.5vw,76px) !important;
line-height:.94 !important;
margin:0 !important;
letter-spacing:-.055em !important;
color:#0b1220 !important;
}
.h2-journey h2 em{
color:#2867ff !important;
}
.h2-steps{
grid-column:2 !important;
grid-row:1 !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:0 !important;
margin:0 !important;
position:relative !important;
align-self:stretch !important;
border-top:1px solid rgba(20,32,57,.16) !important;
border-left:1px solid rgba(20,32,57,.16) !important;
}
.h2-steps:before{
display:none !important;
}
.h2-step{
min-height:155px !important;
padding:24px 28px 24px 24px !important;
display:grid !important;
grid-template-columns:44px 1fr !important;
grid-template-rows:auto auto !important;
column-gap:18px !important;
align-content:start !important;
border-right:1px solid rgba(20,32,57,.16) !important;
border-bottom:1px solid rgba(20,32,57,.16) !important;
background:rgba(255,255,255,.48) !important;
transition:background .45s ease,transform .45s ease,box-shadow .45s ease !important;
}
.h2-step:hover{
background:#fff !important;
transform:translateY(-5px) !important;
box-shadow:0 18px 45px rgba(20,40,80,.10) !important;
}
.h2-step span{
grid-row:1/3 !important;
width:44px !important;
height:44px !important;
margin:0 !important;
background:#0b1220 !important;
border:0 !important;
color:#fff !important;
font-size:12px !important;
transition:transform .45s ease,background .45s ease !important;
}
.h2-step:hover span{
transform:rotate(12deg) scale(1.08) !important;
background:#2867ff !important;
}
.h2-step b{
align-self:end !important;
font-size:17px !important;
line-height:1.25 !important;
color:#0b1220 !important;
}
.h2-step small{
max-width:260px !important;
margin-top:7px !important;
font-size:13px !important;
line-height:1.55 !important;
color:#52627c !important;
}
.h2-journey-image{
grid-column:1/-1 !important;
grid-row:2 !important;
width:100% !important;
height:330px !important;
margin:0 !important;
border-radius:0 !important;
position:relative !important;
overflow:hidden !important;
clip-path:inset(0 0 0 0) !important;
border-top:1px solid rgba(20,32,57,.14) !important;
}
.h2-journey-image:after{
content:"CLEAR VISION / PERFECT FIT / EVERY DAY";
position:absolute;
left:28px;
bottom:24px;
z-index:3;
padding:10px 14px;
border:1px solid rgba(255,255,255,.38);
background:rgba(5,11,24,.48);
backdrop-filter:blur(10px);
color:#fff;
font:700 12px/1 Manrope,sans-serif;
letter-spacing:.2em;
animation:h2JourneyFloat 4s ease-in-out infinite;
}
.h2-journey-image img{
transition:transform 1.4s cubic-bezier(.16,1,.3,1),filter 1.2s ease !important;
}
.h2-journey-image:hover img{
transform:scale(1.065) !important;
filter:saturate(1.08) contrast(1.04) !important;
}
@keyframes h2JourneyPulse{
0%,100%{transform:translateX(0);opacity:.55}
50%{transform:translateX(10px);opacity:1}
}
@keyframes h2JourneyFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-5px)}
}
@media(max-width:899px){
.h2-journey{
grid-template-columns:1fr !important;
grid-template-rows:auto auto auto !important;
gap:32px !important;
padding:70px 20px 0 !important;
}
.h2-journey-copy{
grid-column:1 !important;
grid-row:1 !important;
}
.h2-journey-copy:after{
margin-top:22px;
}
.h2-steps{
grid-column:1 !important;
grid-row:2 !important;
grid-template-columns:1fr 1fr !important;
}
.h2-step{
min-height:145px !important;
padding:20px !important;
}
.h2-journey-image{
grid-column:1 !important;
grid-row:3 !important;
height:280px !important;
}
}
@media(max-width:560px){
.h2-journey{
padding:58px 16px 0 !important;
}
.h2-journey h2{
font-size:clamp(42px,13vw,60px) !important;
}
.h2-steps{
grid-template-columns:1fr !important;
}
.h2-step{
min-height:125px !important;
}
.h2-journey-image{
height:240px !important;
}
}
/* =========================================================
HOME PAGE 2 — "YOUR BEST VIEW STARTS HERE"
Redesigned CTA: integrated with the dark optical theme,
compact, animated, and free of the oversized blue block.
========================================================= */
.home2-vision-cta{
position:relative !important;
isolation:isolate !important;
overflow:hidden !important;
min-height:clamp(320px,38vw,470px) !important;
margin:0 !important;
padding:clamp(58px,7vw,92px) max(5vw,34px) !important;
display:grid !important;
grid-template-columns:minmax(280px,.85fr) minmax(0,1.6fr) !important;
align-items:center !important;
gap:clamp(34px,6vw,90px) !important;
background:
radial-gradient(circle at 85% 25%,rgba(50,112,255,.18),transparent 30%),
radial-gradient(circle at 65% 100%,rgba(100,65,255,.12),transparent 35%),
linear-gradient(135deg,#071124 0%,#0a1833 58%,#11133b 100%) !important;
border-top:1px solid rgba(102,145,255,.14) !important;
border-bottom:1px solid rgba(102,145,255,.14) !important;
}
.home2-vision-cta:before{
content:"";
position:absolute;
width:clamp(280px,35vw,560px);
height:clamp(280px,35vw,560px);
right:-12%;
top:-45%;
border:1px solid rgba(76,127,255,.26);
border-radius:50%;
box-shadow:0 0 0 42px rgba(76,127,255,.035),0 0 0 84px rgba(76,127,255,.025);
animation:h2CtaOrbit 14s linear infinite;
z-index:-1;
}
.home2-vision-cta:after{
content:"CLEAR VISION • BETTER LIVING • PERFECT FIT";
position:absolute;
right:5%;
bottom:20px;
color:rgba(164,190,255,.38);
font:700 12px/1.2 Manrope,sans-serif;
letter-spacing:.2em;
white-space:nowrap;
animation:h2CtaTicker 10s linear infinite;
z-index:1;
}
.home2-vision-cta h2,
.home2-vision-cta .cta-title{
margin:0 !important;
max-width:560px !important;
color:#f5f8ff !important;
font-size:clamp(42px,5.2vw,72px) !important;
line-height:.96 !important;
letter-spacing:-.055em !important;
position:relative !important;
}
.home2-vision-cta h2:after,
.home2-vision-cta .cta-title:after{
content:"";
display:block;
width:74px;
height:3px;
margin-top:25px;
background:#3974ff;
border-radius:4px;
transform-origin:left;
animation:h2CtaLine 2.8s ease-in-out infinite;
}
.home2-vision-cta h2 em,
.home2-vision-cta h2 span,
.home2-vision-cta .cta-title em,
.home2-vision-cta .cta-title span{
color:#4d82ff !important;
}
.home2-vision-cta p{
color:#b8c7e4 !important;
font-size:15px !important;
line-height:1.75 !important;
}
.home2-vision-cta > *{
position:relative;
z-index:2;
}
.home2-vision-cta a,
.home2-vision-cta button{
transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,background .35s ease !important;
}
.home2-vision-cta a:hover,
.home2-vision-cta button:hover{
transform:translateY(-5px) scale(1.025) !important;
box-shadow:0 14px 35px rgba(43,102,255,.24) !important;
}
.home2-vision-cta .cta-items,
.home2-vision-cta .cta-links,
.home2-vision-cta .actions,
.home2-vision-cta .cta-grid{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:0 !important;
width:100% !important;
border-top:1px solid rgba(153,178,225,.18) !important;
border-bottom:1px solid rgba(153,178,225,.18) !important;
}
.home2-vision-cta .cta-items > *,
.home2-vision-cta .cta-links > *,
.home2-vision-cta .actions > *,
.home2-vision-cta .cta-grid > *{
min-height:112px !important;
padding:22px 24px !important;
border-right:1px solid rgba(153,178,225,.18) !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
gap:7px !important;
transition:background .4s ease,transform .4s ease !important;
}
.home2-vision-cta .cta-items > *:last-child,
.home2-vision-cta .cta-links > *:last-child,
.home2-vision-cta .actions > *:last-child,
.home2-vision-cta .cta-grid > *:last-child{
border-right:0 !important;
}
.home2-vision-cta .cta-items > *:hover,
.home2-vision-cta .cta-links > *:hover,
.home2-vision-cta .actions > *:hover,
.home2-vision-cta .cta-grid > *:hover{
background:rgba(65,117,255,.08) !important;
transform:translateY(-3px) !important;
}
.home2-vision-cta .cta-items strong,
.home2-vision-cta .cta-links strong,
.home2-vision-cta .actions strong,
.home2-vision-cta .cta-grid strong{
color:#f6f8ff !important;
font-size:15px !important;
}
.home2-vision-cta .cta-items small,
.home2-vision-cta .cta-links small,
.home2-vision-cta .actions small,
.home2-vision-cta .cta-grid small{
color:#9eb0d2 !important;
font-size:12px !important;
}
@keyframes h2CtaOrbit{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
@keyframes h2CtaLine{
0%,100%{transform:scaleX(.55);opacity:.55}
50%{transform:scaleX(1.35);opacity:1}
}
@keyframes h2CtaTicker{
0%{transform:translateX(18px);opacity:.2}
15%,80%{opacity:.7}
100%{transform:translateX(-18px);opacity:.2}
}
@media(max-width:900px){
.home2-vision-cta{
grid-template-columns:1fr !important;
gap:35px !important;
padding:58px 24px 70px !important;
}
.home2-vision-cta .cta-items,
.home2-vision-cta .cta-links,
.home2-vision-cta .actions,
.home2-vision-cta .cta-grid{
grid-template-columns:1fr 1fr !important;
}
.home2-vision-cta .cta-items > *,
.home2-vision-cta .cta-links > *,
.home2-vision-cta .actions > *,
.home2-vision-cta .cta-grid > *{
border-bottom:1px solid rgba(153,178,225,.18) !important;
}
}
@media(max-width:560px){
.home2-vision-cta{
padding:52px 18px 64px !important;
}
.home2-vision-cta h2,
.home2-vision-cta .cta-title{
font-size:clamp(40px,12vw,58px) !important;
}
.home2-vision-cta .cta-items,
.home2-vision-cta .cta-links,
.home2-vision-cta .actions,
.home2-vision-cta .cta-grid{
grid-template-columns:1fr !important;
}
.home2-vision-cta .cta-items > *,
.home2-vision-cta .cta-links > *,
.home2-vision-cta .actions > *,
.home2-vision-cta .cta-grid > *{
border-right:0 !important;
}
.home2-vision-cta:after{
display:none;
}
}
/* HOME 2 — BEST VIEW / FULL-WIDTH NO-GAP CTA */
.home2-final-vision{position:relative!important;overflow:hidden!important;margin:0!important;padding:0!important;background:#071226!important}.home2-final-vision .h2-cta-wave{display:none!important}.home2-final-vision .home2-vision-cta{min-height:clamp(430px,48vw,650px)!important;width:100%!important;box-sizing:border-box!important;display:grid!important;grid-template-columns:minmax(360px,.92fr) minmax(0,1.35fr)!important;gap:clamp(45px,7vw,110px)!important;align-items:center!important;padding:clamp(60px,7vw,105px) max(5vw,42px)!important;background:radial-gradient(circle at 84% 22%,rgba(53,111,255,.20),transparent 28%),radial-gradient(circle at 62% 90%,rgba(106,66,255,.15),transparent 32%),linear-gradient(125deg,#061126 0%,#0a1833 55%,#15163d 100%)!important}.home2-final-vision .home2-vision-cta:before{content:""!important;position:absolute!important;width:520px!important;height:520px!important;right:-180px!important;top:-210px!important;border:1px solid rgba(72,126,255,.18)!important;border-radius:50%!important;box-shadow:0 0 0 70px rgba(72,126,255,.035),0 0 0 140px rgba(72,126,255,.025)!important;animation:h2BestOrbit 16s linear infinite!important}.vision-cta-heading{position:relative;z-index:3;max-width:620px}.vision-cta-heading .h2-kicker{color:#7da5ff!important}.vision-cta-heading h2{margin:14px 0 22px!important;font-size:clamp(54px,6.6vw,96px)!important;line-height:.88!important;letter-spacing:-.065em!important;color:#f5f8ff!important}.vision-cta-heading h2 em{color:#4b82ff!important;font-style:normal!important}.vision-cta-heading p{max-width:520px!important;margin:0 0 28px!important;color:#b7c6e3!important;font-size:16px!important;line-height:1.75!important}.vision-primary-link{display:inline-flex!important;align-items:center!important;gap:18px!important;padding:15px 20px!important;border:1px solid rgba(118,157,255,.35)!important;border-radius:999px!important;color:#fff!important;background:rgba(50,104,255,.10)!important;font-weight:800!important;transition:.35s ease!important}.vision-primary-link span{font-size:18px;color:#71a0ff}.vision-primary-link:hover{transform:translateY(-4px)!important;background:#2867ff!important;box-shadow:0 16px 35px rgba(40,103,255,.25)!important}.vision-cta-showcase{position:relative;min-height:410px;display:flex;flex-direction:column;justify-content:center;z-index:2}.vision-orbit-art{position:absolute;right:2%;top:0;width:270px;height:270px;opacity:.85;pointer-events:none}.orbit-ring{position:absolute;inset:50% auto auto 50%;border:1px solid rgba(79,132,255,.25);border-radius:50%;transform:translate(-50%,-50%)}.ring-one{width:150px;height:150px}.ring-two{width:215px;height:215px;border-style:dashed;animation:h2BestSpin 9s linear infinite}.ring-three{width:285px;height:285px;opacity:.5;animation:h2BestSpinReverse 15s linear infinite}.orbit-dot{position:absolute;left:12%;top:54%;width:9px;height:9px;border-radius:50%;background:#3775ff;box-shadow:0 0 0 8px rgba(55,117,255,.12),0 0 28px rgba(55,117,255,.6);animation:h2BestDot 3s ease-in-out infinite}.orbit-lens{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:70px;line-height:1;color:#4d83ff;text-shadow:0 0 25px rgba(77,131,255,.35)}.jumping-word{position:relative;z-index:3;display:flex;align-items:flex-end;gap:2px;margin:0 0 24px;padding-left:4px;color:#f4f7ff;font-size:clamp(34px,4.3vw,62px);font-weight:900;letter-spacing:-.05em;line-height:1}.jumping-word span{display:inline-block;animation:h2LetterJump 1.9s ease-in-out infinite;transform-origin:50% 100%}.jumping-word span:nth-of-type(1){animation-delay:0s}.jumping-word span:nth-of-type(2){animation-delay:.08s}.jumping-word span:nth-of-type(3){animation-delay:.16s}.jumping-word span:nth-of-type(4){animation-delay:.24s}.jumping-word span:nth-of-type(5){animation-delay:.32s}.jumping-word span:nth-of-type(6){animation-delay:.40s}.jumping-word span:nth-of-type(7){animation-delay:.48s}.jumping-word span:nth-of-type(8){animation-delay:.56s}.jumping-word span:nth-of-type(9){animation-delay:.64s}.jumping-word span:nth-of-type(10){animation-delay:.72s}.jumping-word span:nth-of-type(11){animation-delay:.80s}.jumping-word span:nth-of-type(n+7){color:#4e84ff}.jumping-word i{width:12px;height:12px;border-radius:50%;background:#4e84ff;margin:0 12px 8px 9px;animation:h2WordPulse 1.9s ease-in-out infinite}.vision-action-list{position:relative;z-index:4;width:100%;border-top:1px solid rgba(157,181,226,.20)}.vision-action-list a{display:grid;grid-template-columns:42px 48px 1fr 28px;align-items:center;gap:12px;min-height:92px;padding:0 8px;border-bottom:1px solid rgba(157,181,226,.20);color:#fff;transition:.4s ease}.vision-action-list a:hover{background:rgba(66,117,255,.09);padding-left:18px;transform:translateX(5px)}.action-number{font:700 12px/1 Manrope,sans-serif;color:#6f89b7;letter-spacing:.12em}.action-icon{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(143,174,232,.38);border-radius:50%;color:#8bb0ff;font-size:16px;transition:.35s ease}.vision-action-list a:hover .action-icon{background:#2867ff;border-color:#2867ff;color:#fff;transform:rotate(12deg) scale(1.08)}.vision-action-list b{display:block;font-size:17px;line-height:1.2;color:#f5f8ff}.vision-action-list small{display:block;margin-top:5px;font-size:13px;color:#9fb1d2}.vision-action-list strong{font-size:20px;color:#6794ff;transition:.35s ease}.vision-action-list a:hover strong{transform:translate(4px,-4px)}@keyframes h2LetterJump{0%,68%,100%{transform:translateY(0) rotate(0);filter:brightness(1)}10%{transform:translateY(-15px) rotate(-2deg);filter:brightness(1.25)}20%{transform:translateY(2px) rotate(1deg)}30%{transform:translateY(-5px)}}@keyframes h2WordPulse{0%,100%{transform:scale(.75);opacity:.45}20%,55%{transform:scale(1.35);opacity:1}70%{transform:scale(.9);opacity:.7}}@keyframes h2BestOrbit{to{transform:rotate(360deg)}}@keyframes h2BestSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes h2BestSpinReverse{to{transform:translate(-50%,-50%) rotate(-360deg)}}@keyframes h2BestDot{0%,100%{transform:translate(0,0)}50%{transform:translate(24px,-18px)}}@media(max-width:900px){.home2-final-vision .home2-vision-cta{grid-template-columns:1fr!important;gap:35px!important;padding:62px 24px 72px!important}.vision-cta-showcase{min-height:430px}.vision-orbit-art{right:-20px;top:-10px;opacity:.5}}@media(max-width:560px){.home2-final-vision .home2-vision-cta{padding:52px 18px 64px!important}.vision-cta-heading h2{font-size:clamp(48px,14vw,70px)!important}.vision-cta-heading p{font-size:14px!important}.vision-cta-showcase{min-height:455px}.jumping-word{font-size:clamp(28px,9vw,42px);gap:0}.jumping-word i{width:8px;height:8px;margin:0 7px 5px 6px}.vision-action-list a{grid-template-columns:32px 40px 1fr 22px;gap:8px;min-height:82px}.action-icon{width:34px;height:34px}.vision-action-list b{font-size:15px}.vision-action-list small{font-size:12px}.vision-orbit-art{width:210px;height:210px;right:-50px;top:-5px}}
/* =========================================================
HOME 2 — BEST VIEW CTA V2
Full-width optical showcase + properly aligned actions.
Only Home 2 is affected.
========================================================= */
.home2-final-vision .home2-vision-cta{
position:relative!important;
grid-template-columns:minmax(320px,.72fr) minmax(560px,1.28fr)!important;
gap:clamp(30px,4vw,70px)!important;
padding:clamp(55px,6vw,90px) max(5vw,42px)!important;
min-height:clamp(560px,48vw,680px)!important;
overflow:hidden!important;
}
/* Decorative optical lens plate fills the visual area */
.home2-final-vision .vision-cta-showcase{
position:relative!important;
min-height:470px!important;
width:100%!important;
padding:clamp(28px,3vw,48px)!important;
box-sizing:border-box!important;
border:1px solid rgba(129,164,235,.22)!important;
border-radius:42px!important;
background:
radial-gradient(circle at 88% 12%,rgba(65,123,255,.18),transparent 26%),
linear-gradient(145deg,rgba(20,43,82,.78),rgba(10,20,49,.58))!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 80px rgba(0,0,0,.18)!important;
overflow:hidden!important;
}
/* Big optical rings become part of the composition rather than empty space */
.home2-final-vision .vision-cta-showcase:before{
content:""!important;
position:absolute!important;
right:-100px!important;
top:-125px!important;
width:520px!important;
height:520px!important;
border:1px solid rgba(78,132,255,.25)!important;
border-radius:50%!important;
box-shadow:
0 0 0 45px rgba(78,132,255,.035),
0 0 0 105px rgba(78,132,255,.025),
0 0 0 165px rgba(78,132,255,.018)!important;
animation:h2ShowcaseOrbit 18s linear infinite!important;
}
.home2-final-vision .vision-cta-showcase:after{
content:"PRECISION • COMFORT • CLARITY • CARE"!important;
position:absolute!important;
right:38px!important;
bottom:24px!important;
color:rgba(150,178,230,.42)!important;
font:700 12px/1 Manrope,sans-serif!important;
letter-spacing:.22em!important;
white-space:nowrap!important;
animation:h2TickerFloat 5s ease-in-out infinite!important;
}
.home2-final-vision .vision-orbit-art{
right:35px!important;
top:20px!important;
width:310px!important;
height:310px!important;
opacity:.9!important;
}
.home2-final-vision .orbit-lens{
font-size:86px!important;
color:#7da5ff!important;
}
.home2-final-vision .orbit-dot{
left:18%!important;
top:62%!important;
}
/* Word sits inside the showcase and has breathing room */
.home2-final-vision .jumping-word{
position:relative!important;
z-index:6!important;
margin:35px 0 34px!important;
padding:0!important;
font-size:clamp(32px,4vw,58px)!important;
line-height:1!important;
white-space:nowrap!important;
}
/* Three actions: fixed, roomy columns prevent the previous text collision */
.home2-final-vision .vision-action-list{
position:relative!important;
z-index:8!important;
width:100%!important;
max-width:100%!important;
border-top:1px solid rgba(157,181,226,.22)!important;
}
.home2-final-vision .vision-action-list a{
display:grid!important;
grid-template-columns:42px 52px minmax(0,1fr) 28px!important;
column-gap:16px!important;
align-items:center!important;
min-height:104px!important;
width:100%!important;
box-sizing:border-box!important;
padding:0 4px!important;
border-bottom:1px solid rgba(157,181,226,.20)!important;
text-decoration:none!important;
}
.home2-final-vision .vision-action-list a:hover{
padding-left:14px!important;
background:linear-gradient(90deg,rgba(66,117,255,.10),rgba(66,117,255,.025))!important;
}
.home2-final-vision .vision-action-list b{
display:block!important;
font-size:18px!important;
line-height:1.25!important;
white-space:nowrap!important;
}
.home2-final-vision .vision-action-list small{
display:block!important;
margin-top:7px!important;
font-size:13px!important;
line-height:1.4!important;
white-space:nowrap!important;
}
.home2-final-vision .vision-action-list strong{
justify-self:end!important;
}
/* Left copy gets a subtle animated vertical optical line */
.home2-final-vision .vision-cta-heading:after{
content:""!important;
position:absolute!important;
left:-18px!important;
top:8%!important;
width:2px!important;
height:84%!important;
background:linear-gradient(transparent,#4e84ff,transparent)!important;
opacity:.5!important;
transform-origin:top!important;
animation:h2LinePulse 3.5s ease-in-out infinite!important;
}
/* Infinite letter jumping, but slower/cleaner for the new composition */
.home2-final-vision .jumping-word span{
animation:h2LetterJumpClean 2.15s ease-in-out infinite!important;
}
@keyframes h2LetterJumpClean{
0%,72%,100%{transform:translateY(0) rotate(0) scale(1)}
12%{transform:translateY(-12px) rotate(-2deg) scale(1.04)}
24%{transform:translateY(1px) rotate(1deg) scale(.99)}
34%{transform:translateY(-4px) rotate(0) scale(1)}
}
@keyframes h2ShowcaseOrbit{to{transform:rotate(360deg)}}
@keyframes h2TickerFloat{0%,100%{opacity:.32;transform:translateX(0)}50%{opacity:.65;transform:translateX(-12px)}}
@keyframes h2LinePulse{0%,100%{opacity:.22;transform:scaleY(.65)}50%{opacity:.8;transform:scaleY(1)}}
/* Prevent any accidental legacy left-side back button on Home 2 */
.home2-final-vision ~ .back-top,
body:has(.home2-final-vision) .back-top{
display:none!important;
}
@media(max-width:1100px){
.home2-final-vision .home2-vision-cta{
grid-template-columns:1fr 1.15fr!important;
gap:28px!important;
}
.home2-final-vision .vision-cta-showcase{
min-height:500px!important;
padding:28px!important;
}
.home2-final-vision .jumping-word{font-size:clamp(28px,4vw,48px)!important}
.home2-final-vision .vision-action-list a{
grid-template-columns:36px 44px minmax(0,1fr) 24px!important;
column-gap:10px!important;
}
}
@media(max-width:900px){
.home2-final-vision .home2-vision-cta{
grid-template-columns:1fr!important;
min-height:auto!important;
gap:34px!important;
}
.home2-final-vision .vision-cta-showcase{
min-height:510px!important;
}
}
@media(max-width:560px){
.home2-final-vision .home2-vision-cta{
padding:48px 18px 58px!important;
}
.home2-final-vision .vision-cta-showcase{
min-height:480px!important;
padding:22px 18px!important;
border-radius:28px!important;
}
.home2-final-vision .vision-orbit-art{
width:210px!important;
height:210px!important;
right:-45px!important;
top:-20px!important;
opacity:.5!important;
}
.home2-final-vision .jumping-word{
font-size:clamp(25px,8vw,38px)!important;
margin:30px 0 28px!important;
}
.home2-final-vision .vision-action-list a{
grid-template-columns:30px 38px minmax(0,1fr) 20px!important;
column-gap:7px!important;
min-height:88px!important;
}
.home2-final-vision .vision-action-list b{
font-size:15px!important;
}
.home2-final-vision .vision-action-list small{
font-size:12px!important;
white-space:normal!important;
}
.home2-final-vision .action-icon{
width:34px!important;
height:34px!important;
}
.home2-final-vision .vision-cta-showcase:after{
right:20px!important;
bottom:16px!important;
font-size:12px!important;
}
}
/* =========================================================
HOME 2 — ACTION SHOWCASE V3
Pixel-clean alignment for the three CTA rows.
Scoped to Home 2 only.
========================================================= */
.home2-final-vision .vision-cta-showcase{
display:flex!important;
flex-direction:column!important;
justify-content:flex-start!important;
align-items:stretch!important;
min-width:0!important;
}
.home2-final-vision .jumping-word{
flex:0 0 auto!important;
width:100%!important;
min-height:72px!important;
margin:4px 0 28px!important;
padding:0!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
overflow:visible!important;
}
.home2-final-vision .vision-action-list{
width:100%!important;
max-width:none!important;
margin:0!important;
padding:0!important;
border-top:1px solid rgba(157,181,226,.24)!important;
}
.home2-final-vision .vision-action-list .vision-action-item{
position:relative!important;
display:grid!important;
grid-template-columns:46px 54px minmax(0,1fr) 30px!important;
align-items:center!important;
column-gap:16px!important;
width:100%!important;
min-width:0!important;
min-height:100px!important;
margin:0!important;
padding:0 2px!important;
box-sizing:border-box!important;
border-bottom:1px solid rgba(157,181,226,.22)!important;
text-decoration:none!important;
overflow:hidden!important;
}
.home2-final-vision .vision-action-list .action-number{
display:grid!important;
place-items:center!important;
width:46px!important;
height:46px!important;
box-sizing:border-box!important;
border:1px solid rgba(143,174,232,.42)!important;
border-radius:50%!important;
color:#d8e4ff!important;
font:800 12px/1 Manrope,sans-serif!important;
letter-spacing:.04em!important;
}
.home2-final-vision .vision-action-list .action-icon{
width:54px!important;
height:54px!important;
box-sizing:border-box!important;
display:grid!important;
place-items:center!important;
border:1px solid rgba(143,174,232,.42)!important;
border-radius:50%!important;
color:#8db3ff!important;
font-size:17px!important;
}
.home2-final-vision .vision-action-list .action-copy{
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
align-items:flex-start!important;
min-width:0!important;
width:100%!important;
overflow:hidden!important;
}
.home2-final-vision .vision-action-list .action-copy b{
display:block!important;
width:100%!important;
margin:0!important;
padding:0!important;
color:#f7f9ff!important;
font:800 clamp(17px,1.35vw,21px)/1.2 Manrope,sans-serif!important;
letter-spacing:-.025em!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.home2-final-vision .vision-action-list .action-copy small{
display:block!important;
width:100%!important;
margin:7px 0 0!important;
padding:0!important;
color:#9fb2d5!important;
font:500 clamp(12px,.95vw,14px)/1.35 Manrope,sans-serif!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.home2-final-vision .vision-action-list .action-arrow{
justify-self:end!important;
align-self:center!important;
margin:0!important;
color:#78a4ff!important;
font:800 22px/1 Manrope,sans-serif!important;
transition:transform .35s ease,color .35s ease!important;
}
.home2-final-vision .vision-action-list .vision-action-item:hover{
padding-left:2px!important;
background:linear-gradient(90deg,rgba(61,112,255,.12),rgba(61,112,255,.025))!important;
transform:none!important;
}
.home2-final-vision .vision-action-list .vision-action-item:hover .action-number{
border-color:#4e84ff!important;
color:#fff!important;
box-shadow:0 0 0 6px rgba(78,132,255,.08)!important;
}
.home2-final-vision .vision-action-list .vision-action-item:hover .action-icon{
background:#2867ff!important;
border-color:#2867ff!important;
color:#fff!important;
transform:scale(1.05) rotate(8deg)!important;
}
.home2-final-vision .vision-action-list .vision-action-item:hover .action-arrow{
transform:translate(5px,-5px)!important;
color:#fff!important;
}
/* Keep the Home 2 left floating back-to-top control removed; preserve the right TOP control. */
body.home2-page .back-top{display:none!important}
@media(max-width:1100px){
.home2-final-vision .home2-vision-cta{
grid-template-columns:minmax(280px,.68fr) minmax(0,1.32fr)!important;
gap:28px!important;
}
.home2-final-vision .vision-cta-showcase{padding:28px!important}
.home2-final-vision .vision-action-list .vision-action-item{
grid-template-columns:40px 48px minmax(0,1fr) 24px!important;
column-gap:11px!important;
}
.home2-final-vision .vision-action-list .action-number{width:40px!important;height:40px!important}
.home2-final-vision .vision-action-list .action-icon{width:48px!important;height:48px!important}
}
@media(max-width:900px){
.home2-final-vision .vision-cta-showcase{min-height:auto!important}
.home2-final-vision .jumping-word{margin-top:0!important}
}
@media(max-width:560px){
.home2-final-vision .vision-cta-showcase{padding:22px 18px!important;border-radius:28px!important}
.home2-final-vision .jumping-word{
min-height:58px!important;
margin:6px 0 22px!important;
font-size:clamp(25px,8vw,38px)!important;
}
.home2-final-vision .vision-action-list .vision-action-item{
grid-template-columns:32px 42px minmax(0,1fr) 20px!important;
column-gap:8px!important;
min-height:86px!important;
}
.home2-final-vision .vision-action-list .action-number{width:32px!important;height:32px!important;font-size:12px!important}
.home2-final-vision .vision-action-list .action-icon{width:42px!important;height:42px!important;font-size:14px!important}
.home2-final-vision .vision-action-list .action-copy b{font-size:15px!important}
.home2-final-vision .vision-action-list .action-copy small{font-size:12px!important;margin-top:5px!important}
.home2-final-vision .vision-action-list .action-arrow{font-size:18px!important}
}
/* =========================================================
HOME 2 — FRESH EDITORIAL FINAL CTA
Completely replaces the previous oval/overlapping showcase.
========================================================= */
.home2-fresh-cta{
--fresh-blue:#4f84ff;
--fresh-white:#f5f8ff;
--fresh-muted:#aebedb;
position:relative!important;
isolation:isolate!important;
overflow:hidden!important;
margin:0!important;
padding:clamp(72px,7vw,110px) max(5vw,42px) clamp(70px,7vw,100px)!important;
min-height:0!important;
background:
radial-gradient(circle at 84% 15%,rgba(57,111,255,.16),transparent 28%),
radial-gradient(circle at 8% 82%,rgba(87,62,190,.12),transparent 30%),
linear-gradient(135deg,#071126 0%,#091733 55%,#11183e 100%)!important;
color:var(--fresh-white)!important;
}
.home2-fresh-cta *{box-sizing:border-box}
.fresh-cta-background{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fresh-glow{position:absolute;border-radius:50%;filter:blur(4px);opacity:.55}
.fresh-glow-one{width:360px;height:360px;right:-100px;top:-130px;background:radial-gradient(circle,rgba(58,112,255,.22),transparent 68%);animation:freshGlowMove 8s ease-in-out infinite}
.fresh-glow-two{width:280px;height:280px;left:-100px;bottom:-130px;background:radial-gradient(circle,rgba(107,76,255,.15),transparent 68%);animation:freshGlowMove 10s ease-in-out infinite reverse}
.fresh-grid-line{position:absolute;background:linear-gradient(90deg,transparent,rgba(99,143,255,.16),transparent);height:1px;width:70%;transform:rotate(-18deg);animation:freshLineMove 7s ease-in-out infinite}
.fresh-grid-line-one{right:-8%;top:26%}
.fresh-grid-line-two{left:-18%;bottom:20%;animation-delay:-3s}
.fresh-cta-head{
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(260px,.55fr)!important;
gap:40px!important;
align-items:end!important;
max-width:1320px!important;
margin:0 auto 58px!important;
}
.fresh-head-copy{max-width:720px}
.fresh-head-copy h2{
margin:12px 0 22px!important;
color:var(--fresh-white)!important;
font-size:clamp(48px,6.5vw,88px)!important;
line-height:.92!important;
letter-spacing:-.065em!important;
}
.fresh-head-copy h2 em{color:var(--fresh-blue)!important;font-style:normal}
.fresh-head-copy p{
max-width:650px;
margin:0;
color:var(--fresh-muted)!important;
font-size:clamp(15px,1.2vw,18px)!important;
line-height:1.7!important;
}
.fresh-head-mark{
position:relative;
height:220px;
overflow:hidden;
border-left:1px solid rgba(150,180,235,.16);
display:flex;
align-items:flex-end;
justify-content:flex-end;
padding:0 12px 12px 30px;
}
.fresh-mark-ring{position:absolute;border:1px solid rgba(88,135,255,.25);border-radius:50%;animation:freshRingSpin 18s linear infinite}
.fresh-mark-ring.ring-a{width:190px;height:190px;right:35px;top:-28px}
.fresh-mark-ring.ring-b{width:135px;height:135px;right:62px;top:0;animation-duration:13s;animation-direction:reverse}
.fresh-mark-ring.ring-c{width:82px;height:82px;right:88px;top:27px;animation-duration:9s}
.fresh-mark-lens{
position:absolute;right:108px;top:53px;width:43px;height:25px;
border:3px solid #7fa6ff;border-radius:50%;
box-shadow:0 0 24px rgba(76,132,255,.22);
}
.fresh-mark-lens:after{
content:"";position:absolute;width:34px;height:2px;background:#7fa6ff;
left:34px;top:9px;transform:rotate(-8deg);transform-origin:left;
}
.fresh-mark-dot{
position:absolute;right:48px;bottom:46px;width:8px;height:8px;border-radius:50%;
background:var(--fresh-blue);box-shadow:0 0 0 8px rgba(79,132,255,.10),0 0 25px rgba(79,132,255,.65);
animation:freshDotFloat 3.5s ease-in-out infinite;
}
.fresh-mark-label{font:700 12px/1 Manrope,sans-serif;letter-spacing:.2em;color:rgba(164,190,235,.42)}
.fresh-cta-feature{
max-width:1320px;
margin:0 auto 28px;
display:grid;
grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
min-height:390px;
border-top:1px solid rgba(156,183,229,.18);
border-bottom:1px solid rgba(156,183,229,.18);
}
.fresh-feature-image{
position:relative;
min-height:390px;
overflow:hidden;
border-right:1px solid rgba(156,183,229,.18);
}
.fresh-feature-image img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
filter:saturate(.86) contrast(1.03);
transform:scale(1.02);
transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter 1s ease;
}
.fresh-feature-image:hover img{transform:scale(1.08);filter:saturate(1) contrast(1.05)}
.fresh-image-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,13,31,.05),rgba(4,13,31,.72)),linear-gradient(0deg,rgba(4,13,31,.72),transparent 55%);pointer-events:none}
.fresh-image-caption{position:absolute;left:30px;bottom:28px;z-index:2}
.fresh-image-caption span{display:block;color:#83a9ff;font:800 12px/1 Manrope,sans-serif;letter-spacing:.2em;margin-bottom:9px}
.fresh-image-caption b{display:block;color:#fff;font:800 clamp(24px,2.5vw,38px)/1.03 Manrope,sans-serif;letter-spacing:-.04em}
.fresh-image-corner{position:absolute;right:22px;top:22px;color:rgba(255,255,255,.72);font:700 12px/1 Manrope,sans-serif;letter-spacing:.16em;z-index:2}
.fresh-feature-copy{
position:relative;
padding:46px clamp(28px,4vw,58px);
display:flex;
flex-direction:column;
justify-content:center;
overflow:hidden;
}
.fresh-feature-copy:before{
content:"";
position:absolute;right:-90px;top:50%;width:260px;height:260px;
transform:translateY(-50%);border:1px solid rgba(77,130,255,.18);border-radius:50%;
box-shadow:0 0 0 38px rgba(77,130,255,.035),0 0 0 78px rgba(77,130,255,.02);
animation:freshRingSpin 20s linear infinite;
}
.fresh-mini-label{position:relative;z-index:2;color:#83a9ff;font:800 12px/1 Manrope,sans-serif;letter-spacing:.2em;margin-bottom:24px}
.fresh-jump-word{
position:relative;z-index:2;display:flex;align-items:flex-end;flex-wrap:wrap;
gap:1px;margin:0 0 24px;color:#f5f8ff;
font:900 clamp(32px,3.8vw,58px)/.95 Manrope,sans-serif;letter-spacing:-.06em;
}
.fresh-jump-word span{display:inline-block;animation:freshLetterJump 2.1s ease-in-out infinite;transform-origin:50% 100%}
.fresh-jump-word span:nth-of-type(1){animation-delay:0s}
.fresh-jump-word span:nth-of-type(2){animation-delay:.08s}
.fresh-jump-word span:nth-of-type(3){animation-delay:.16s}
.fresh-jump-word span:nth-of-type(4){animation-delay:.24s}
.fresh-jump-word span:nth-of-type(5){animation-delay:.32s}
.fresh-jump-word span:nth-of-type(n+7){color:#5487ff}
.fresh-jump-word i{width:10px;height:10px;border-radius:50%;background:#5487ff;margin:0 10px 5px 8px;animation:freshDotPulse 1.9s ease-in-out infinite}
.fresh-feature-copy p{position:relative;z-index:2;max-width:400px;margin:0;color:#aebedb;font-size:15px;line-height:1.75}
.fresh-actions{
max-width:1320px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
border-bottom:1px solid rgba(156,183,229,.18);
}
.fresh-action{
position:relative;
min-height:142px;
padding:26px 30px;
display:grid;
grid-template-columns:42px 54px minmax(0,1fr) 24px;
gap:17px;
align-items:center;
color:#fff!important;
text-decoration:none!important;
border-right:1px solid rgba(156,183,229,.18);
overflow:hidden;
transition:background .4s ease,transform .4s ease;
}
.fresh-action:last-child{border-right:0}
.fresh-action:before{
content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:#4f84ff;
transition:width .5s cubic-bezier(.16,1,.3,1)
}
.fresh-action:hover{background:rgba(66,117,255,.07);transform:translateY(-4px)}
.fresh-action:hover:before{width:100%}
.fresh-action-number{
color:#7790bb;font:800 12px/1 Manrope,sans-serif;letter-spacing:.1em;
}
.fresh-action-icon{
width:52px;height:52px;border:1px solid rgba(143,174,232,.42);border-radius:50%;
display:grid;place-items:center;color:#8db3ff;font-size:16px;
transition:.4s ease;
}
.fresh-action:hover .fresh-action-icon{background:#2867ff;border-color:#2867ff;color:#fff;transform:rotate(8deg) scale(1.08)}
.fresh-action-content{min-width:0}
.fresh-action-content b{display:block;color:#f7f9ff;font:800 17px/1.2 Manrope,sans-serif;white-space:nowrap}
.fresh-action-content small{display:block;margin-top:7px;color:#b8c8e3;font:500 16px/1.5 Manrope,sans-serif}
.fresh-action-arrow{justify-self:end;color:#78a4ff;font:800 21px/1 Manrope,sans-serif;transition:.4s ease}
.fresh-action:hover .fresh-action-arrow{color:#fff;transform:translate(4px,-4px)}
@keyframes freshLetterJump{
0%,72%,100%{transform:translateY(0) rotate(0) scale(1)}
10%{transform:translateY(-12px) rotate(-2deg) scale(1.04)}
20%{transform:translateY(1px) rotate(1deg) scale(.99)}
30%{transform:translateY(-4px) rotate(0) scale(1)}
}
@keyframes freshRingSpin{to{transform:rotate(360deg)}}
@keyframes freshDotFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-18px,-13px)}}
@keyframes freshDotPulse{0%,100%{transform:scale(.7);opacity:.45}45%{transform:scale(1.25);opacity:1}}
@keyframes freshGlowMove{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-18px,20px) scale(1.08)}}
@keyframes freshLineMove{0%,100%{opacity:.15;transform:translateX(-20px) rotate(-18deg)}50%{opacity:.45;transform:translateX(20px) rotate(-18deg)}}
@media(max-width:1000px){
.fresh-cta-head{grid-template-columns:1fr!important}
.fresh-head-mark{height:120px;border-left:0;border-top:1px solid rgba(150,180,235,.16)}
.fresh-cta-feature{grid-template-columns:1fr}
.fresh-feature-image{min-height:360px;border-right:0;border-bottom:1px solid rgba(156,183,229,.18)}
.fresh-feature-copy{min-height:300px}
.fresh-actions{grid-template-columns:1fr}
.fresh-action{border-right:0;border-bottom:1px solid rgba(156,183,229,.18)}
.fresh-action:last-child{border-bottom:0}
}
@media(max-width:600px){
.home2-fresh-cta{padding:56px 18px 62px!important}
.fresh-cta-head{margin-bottom:38px!important}
.fresh-head-copy h2{font-size:clamp(44px,14vw,68px)!important}
.fresh-head-mark{display:none}
.fresh-feature-image{min-height:290px}
.fresh-feature-copy{padding:34px 24px;min-height:300px}
.fresh-action{min-height:112px;padding:22px 14px;grid-template-columns:32px 42px minmax(0,1fr) 20px;gap:9px}
.fresh-action-icon{width:40px;height:40px}
.fresh-action-content b{font-size:15px}
.fresh-action-content small{font-size:12px}
.fresh-image-caption{left:20px;bottom:20px}
}
/* Home 2: suppress any legacy left-side back-to-top control; keep the standard right control. */
body.home2-page .back-top,
body.home2-page .left-back-to-top,
body.home2-page .side-back-to-top{display:none!important}
@media(prefers-reduced-motion:reduce){
.fresh-jump-word span,.fresh-jump-word i,.fresh-mark-ring,.fresh-glow,.fresh-grid-line,
.fresh-mark-dot,.fresh-feature-copy:before{animation:none!important}
}
/* ===== MERGED FROM assets/CSS/contact.css ===== */
:root{--ct-blue:#2867ff;--ct-cyan:#66d9ff;--ct-navy:#061126;--ct-ink:#08152f;--ct-muted:#71809a;--ct-line:rgba(120,155,215,.22);--ct-ease:cubic-bezier(.16,1,.3,1)}
.contact-page{background:#061126;color:#f4f7ff;overflow-x:hidden}.ct-main{position:relative}.ct-section{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;border-top:1px solid rgba(120,155,215,.12)}.ct-section:first-child{border-top:0}.ct-kicker{display:flex;align-items:center;gap:12px;font:800 12px/1 "Space Grotesk",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#79a4ff}.ct-kicker:before{content:"";width:35px;height:1px;background:currentColor}.ct-reveal{opacity:0;transform:translateY(48px);filter:blur(8px);transition:opacity .9s ease,transform 1.05s var(--ct-ease),filter .9s ease}.ct-reveal.is-visible{opacity:1;transform:none;filter:none}
.ct-loader{position:fixed;inset:0;background:#061126;z-index:99999;display:grid;place-items:center;transition:opacity .7s ease,visibility .7s ease}.ct-loader.done{opacity:0;visibility:hidden;pointer-events:none}.ct-loader-brand{font:800 32px/1 "Space Grotesk";letter-spacing:-.05em}.ct-loader-brand span{color:#6f99ff}.ct-loader-brand small{display:block;margin-top:12px;text-align:center;font:800 12px "Space Grotesk";letter-spacing:.25em;color:#8190aa}.ct-loader-bar{position:absolute;bottom:12%;width:min(280px,60vw);height:2px;background:rgba(255,255,255,.12);overflow:hidden}.ct-loader-bar i{display:block;width:100%;height:100%;background:#2867ff;transform-origin:left;animation:ctLoad 1.25s var(--ct-ease) forwards}@keyframes ctLoad{from{transform:scaleX(0)}to{transform:scaleX(1)}}.ct-progress{position:fixed;top:0;left:0;width:0;height:3px;background:#2867ff;z-index:1201;box-shadow:0 0 18px rgba(40,103,255,.75)}
.ct-hero{min-height:calc(100svh - 10px);background:#07152d}.ct-split{position:absolute;top:0;bottom:0;width:50%;overflow:hidden}.ct-split-left{left:0;clip-path:inset(0 50% 0 0);animation:ctSplitLeft 1.35s 1.05s var(--ct-ease) forwards}.ct-split-right{right:0;clip-path:inset(0 0 0 50%);animation:ctSplitRight 1.35s 1.05s var(--ct-ease) forwards}@keyframes ctSplitLeft{to{clip-path:inset(0 0 0 0)}}@keyframes ctSplitRight{to{clip-path:inset(0 0 0 0)}}.ct-hero-image{position:absolute;inset:0}.ct-hero-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,12,30,.8),rgba(3,12,30,.28))}.ct-image-right:after{background:linear-gradient(90deg,rgba(3,12,30,.2),rgba(3,12,30,.72))}.ct-hero-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(1.08) brightness(.78);transform:scale(1.08);animation:ctHeroZoom 8s ease-out forwards}@keyframes ctHeroZoom{to{transform:scale(1)}}.ct-hero-copy{position:relative;z-index:5;width:min(900px,88%);margin:auto;text-align:center;text-shadow:0 10px 40px rgba(0,0,0,.35)}.ct-hero-copy h1{font:800 clamp(72px,10.5vw,160px)/.78 "Space Grotesk";letter-spacing:-.085em;margin:22px 0}.ct-hero-copy h1 span{color:#fff}.ct-hero-copy h1 em{font-style:normal;color:#78a0ff}.ct-hero-copy p{max-width:610px;margin:0 auto;color:#e0e8f8;font-weight:700;font-size:clamp(15px,1.35vw,19px);line-height:1.7}.ct-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:30px}.ct-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:55px;padding:0 24px;border-radius:999px;text-decoration:none;font:800 13px "Inter";overflow:hidden;border:1px solid transparent;transition:transform .35s var(--ct-ease),box-shadow .35s ease,background .35s ease,color .35s ease}.ct-btn.primary{background:#2867ff;color:#fff;box-shadow:0 18px 50px rgba(40,103,255,.35)}.ct-btn.ghost{background:rgba(4,13,30,.5);border-color:rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(12px)}.ct-btn.light{border-color:rgba(255,255,255,.45)}.ct-btn:hover{transform:translateY(-5px) scale(1.025)}.ct-btn:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.38),transparent 70%);transform:translateX(-120%);transition:transform .7s ease}.ct-btn:hover:after{transform:translateX(120%)}.ct-btn b{font-size:16px}.ct-hero-meta{position:absolute;left:5%;right:5%;bottom:26px;display:flex;justify-content:space-between;z-index:5;font:800 12px "Space Grotesk";letter-spacing:.22em;color:#d3dcf0}.ct-split-label{position:absolute;z-index:5;top:50%;font:800 12px "Space Grotesk";letter-spacing:.24em;color:#fff;writing-mode:vertical-rl;opacity:.75}.ct-split-label.left{left:22px;transform:rotate(180deg)}.ct-split-label.right{right:22px}.ct-noise{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}.ct-particles{position:absolute;inset:0;z-index:4;pointer-events:none}.ct-particles i{position:absolute;width:4px;height:4px;border-radius:50%;background:#6fa0ff;box-shadow:0 0 18px #6fa0ff;animation:ctParticle 7s linear infinite;opacity:.55}@keyframes ctParticle{0%{transform:translateY(30vh) scale(.3);opacity:0}20%{opacity:.55}100%{transform:translate(70px,-110vh) scale(1.5);opacity:0}}
.ct-contact-grid{background:radial-gradient(circle at 80% 30%,rgba(40,103,255,.2),transparent 35%),linear-gradient(135deg,#07152d,#0b1230);padding:9vw 6vw}.ct-section-index{position:absolute;right:5%;top:30px;font:800 12px "Space Grotesk";letter-spacing:.2em;color:#5d7eb9}.ct-contact-inner{width:min(1400px,100%);margin:auto;display:grid;grid-template-columns:1fr .8fr;gap:7vw;align-items:center}.ct-copy h2,.ct-services h2,.ct-visit h2{font:800 clamp(50px,6.4vw,98px)/.88 "Space Grotesk";letter-spacing:-.075em;margin:22px 0}.ct-copy h2 em,.ct-services h2 em,.ct-visit h2 em{font-style:normal;color:#79a3ff}.ct-copy>p,.ct-visit-copy>p{max-width:650px;color:#b7c4da;font-weight:600;font-size:17px;line-height:1.75}.ct-info-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:38px}.ct-info-card{min-height:150px;padding:20px;border:1px solid rgba(115,151,215,.25);background:rgba(255,255,255,.035);backdrop-filter:blur(18px);display:flex;flex-direction:column;justify-content:space-between;color:#fff;text-decoration:none;transition:.35s var(--ct-ease);transform-style:preserve-3d}.ct-info-card:hover{background:rgba(40,103,255,.12);box-shadow:0 25px 70px rgba(0,0,0,.28);transform:translateY(-8px)}.ct-icon{font:800 12px "Space Grotesk";color:#6f9cff}.ct-info-card strong{font:800 18px "Space Grotesk"}.ct-info-card small{color:#9cabc2;font-weight:600}.ct-message-visual{height:min(670px,70vh);position:relative;perspective:1000px}.ct-image-frame{height:100%;overflow:hidden;border-radius:44% 56% 50% 50%/45% 42% 58% 55%;border:1px solid rgba(110,160,255,.3);box-shadow:0 45px 100px rgba(0,0,0,.35);transform:rotate(3deg);transition:.8s var(--ct-ease)}.ct-message-visual:hover .ct-image-frame{transform:rotate(-2deg) scale(1.02);border-radius:50% 44% 47% 53%/43% 56% 44% 57%}.ct-image-frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ct-ease),filter .7s}.ct-message-visual:hover img{transform:scale(1.1);filter:saturate(1.2)}.ct-scan-line{position:absolute;left:6%;right:6%;top:50%;height:1px;background:#5f9dff;box-shadow:0 0 20px #5f9dff;animation:ctScan 3s ease-in-out infinite}@keyframes ctScan{0%,100%{transform:translateY(-220px);opacity:.1}50%{transform:translateY(220px);opacity:1}}.ct-float-chip{position:absolute;right:-2%;top:12%;padding:14px 16px;background:rgba(5,16,38,.78);border:1px solid rgba(120,160,225,.3);backdrop-filter:blur(16px);font:800 12px "Space Grotesk";letter-spacing:.17em;color:#dbe5f7;animation:ctFloat 4s ease-in-out infinite}.ct-float-chip:after{content:attr(data-tooltip);position:absolute;right:0;bottom:calc(100% + 9px);padding:9px 11px;background:#0c1c3b;border:1px solid var(--ct-line);white-space:nowrap;font-size:12px;letter-spacing:.08em;opacity:0;visibility:hidden;transform:translateY(6px);transition:.25s}.ct-float-chip:hover:after{opacity:1;visibility:visible;transform:none}@keyframes ctFloat{50%{transform:translateY(-12px) rotate(-2deg)}}
.ct-services{background:#07152d;align-items:stretch}.ct-services-bg{position:absolute;inset:0}.ct-services-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.36) saturate(.75);transform:scale(1.06);transition:transform 1.5s var(--ct-ease)}.ct-services:hover .ct-services-bg img{transform:scale(1.01)}.ct-services-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,14,32,.95),rgba(4,14,32,.55) 55%,rgba(4,14,32,.82))}.ct-services-inner{position:relative;z-index:2;width:min(1350px,88%);margin:auto}.ct-services h2{max-width:760px}.ct-service-list{margin-top:25px;border-top:1px solid rgba(145,175,225,.25)}.ct-service{display:grid;grid-template-columns:70px 1fr 60px;align-items:center;gap:20px;padding:24px 0;border-bottom:1px solid rgba(145,175,225,.25);transition:.45s var(--ct-ease)}.ct-service>span{font:800 12px "Space Grotesk";color:#6e9dff}.ct-service h3{font:800 clamp(24px,3vw,42px) "Space Grotesk";margin:0}.ct-service p{margin:7px 0 0;color:#aebcd3;font-weight:600;line-height:1.5}.ct-service>b{font-size:26px;color:#6f9cff;transition:.35s}.ct-service:hover{padding-left:18px;background:linear-gradient(90deg,rgba(40,103,255,.1),transparent);box-shadow:inset 3px 0 #2867ff}.ct-service:hover>b{transform:translate(7px,-7px) rotate(45deg)}
.ct-visit{background:linear-gradient(120deg,#07152d,#101b43);padding:9vw 6vw}.ct-visit-inner{width:min(1400px,100%);margin:auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:7vw;align-items:center}.ct-address{margin:32px 0;padding:20px 0;border-top:1px solid var(--ct-line);border-bottom:1px solid var(--ct-line);display:grid;gap:8px}.ct-address span{font:800 12px "Space Grotesk";letter-spacing:.2em;color:#6f9dff}.ct-address strong{font:800 22px/1.3 "Space Grotesk"}.ct-address small{color:#9eacc2;font-weight:600}.ct-visit-art{height:min(620px,68vh);display:grid;place-items:center}.ct-map-card{position:relative;width:88%;height:88%;overflow:hidden;border:1px solid rgba(130,166,230,.3);border-radius:35px;box-shadow:0 45px 100px rgba(0,0,0,.35);transform-style:preserve-3d}.ct-map-card>img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.05) brightness(.68);transition:transform 1s var(--ct-ease)}.ct-map-card:hover>img{transform:scale(1.1)}.ct-map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(125,165,230,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(125,165,230,.14) 1px,transparent 1px);background-size:45px 45px;mix-blend-mode:screen}.ct-map-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:13px;padding:13px 16px;background:rgba(4,15,36,.82);border:1px solid rgba(110,160,255,.45);backdrop-filter:blur(14px);font:800 12px/1.4 "Space Grotesk";letter-spacing:.14em;box-shadow:0 20px 50px rgba(0,0,0,.3)}.ct-map-pin i{width:13px;height:13px;border-radius:50%;background:#2867ff;box-shadow:0 0 0 8px rgba(40,103,255,.15),0 0 30px #2867ff;animation:ctPin 1.8s ease-in-out infinite}@keyframes ctPin{50%{box-shadow:0 0 0 17px rgba(40,103,255,0),0 0 30px #2867ff}}.ct-map-route{position:absolute;width:65%;height:65%;left:18%;top:16%;border:1px dashed rgba(110,160,255,.5);border-radius:48% 52% 38% 62%;transform:rotate(25deg);animation:ctRoute 8s linear infinite}@keyframes ctRoute{to{transform:rotate(385deg)}}
.ct-final{min-height:90svh;justify-content:center;text-align:center;background:#061126}.ct-final-image{position:absolute;inset:0}.ct-final-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.45);transform:scale(1.05);transition:transform 1.5s var(--ct-ease)}.ct-final:hover .ct-final-image img{transform:scale(1)}.ct-final-shade{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(40,103,255,.3),rgba(3,10,28,.84) 70%)}.ct-final-inner{position:relative;z-index:3;width:min(1000px,88%)}.ct-final h2{font:800 clamp(65px,10vw,150px)/.8 "Space Grotesk";letter-spacing:-.09em;margin:24px 0}.ct-final h2 em{font-style:normal;color:#7da7ff}.ct-final p{max-width:620px;margin:auto;color:#d3dced;font-weight:600;font-size:17px;line-height:1.7}.ct-final-orbit{position:absolute;border:1px solid rgba(110,160,255,.25);border-radius:50%;pointer-events:none}.ct-final-orbit.one{width:min(65vw,800px);aspect-ratio:1;animation:ctOrbit 22s linear infinite}.ct-final-orbit.two{width:min(43vw,520px);aspect-ratio:1;border-style:dashed;animation:ctOrbit 14s linear infinite reverse}@keyframes ctOrbit{to{transform:rotate(360deg)}}.ct-marquee{position:absolute;bottom:0;left:0;right:0;padding:18px 0;display:flex;justify-content:center;gap:18px;white-space:nowrap;background:rgba(4,12,29,.55);backdrop-filter:blur(10px);font:800 12px "Space Grotesk";letter-spacing:.25em}.ct-marquee span:nth-of-type(even){color:#77a2ff}.ct-marquee i{font-style:normal;color:#5c77aa}
.ripple-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.7);transform:translate(-50%,-50%) scale(0);animation:ctRipple .7s ease-out forwards;pointer-events:none}@keyframes ctRipple{to{transform:translate(-50%,-50%) scale(18);opacity:0}}
@media(max-width:950px){.ct-contact-inner,.ct-visit-inner{grid-template-columns:1fr}.ct-message-visual{height:520px;max-width:700px;width:100%;margin:auto}.ct-visit-art{height:520px}.ct-info-row{grid-template-columns:1fr 1fr}.ct-services-inner{width:88%}.ct-hero-copy h1{font-size:clamp(65px,13vw,110px)}}
@media(max-width:620px){.ct-section{min-height:auto;padding:92px 18px}.ct-hero{min-height:calc(100svh - 10px);padding:0 18px}.ct-split-label{display:none}.ct-hero-meta{bottom:18px;font-size:12px}.ct-hero-copy{width:100%}.ct-hero-copy h1{font-size:clamp(58px,19vw,88px)}.ct-hero-copy p{font-size:14px}.ct-actions{margin-top:22px}.ct-btn{min-height:50px;padding:0 18px}.ct-info-row{grid-template-columns:1fr}.ct-info-card{min-height:125px}.ct-message-visual{height:410px}.ct-copy h2,.ct-services h2,.ct-visit h2{font-size:clamp(45px,14vw,70px)}.ct-service{grid-template-columns:42px 1fr 28px;padding:20px 0}.ct-service p{font-size:13px}.ct-service>b{font-size:20px}.ct-visit-art{height:390px}.ct-map-card{width:100%;height:90%}.ct-final{min-height:80svh}.ct-final h2{font-size:clamp(55px,17vw,88px)}.ct-marquee{font-size:12px;gap:10px}.ct-section-index{top:18px;font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}.ct-reveal{opacity:1;transform:none;filter:none}.ct-split-left,.ct-split-right{clip-path:none}}
html[data-theme="light"] .contact-page{background:#f3f6ff;color:#07142f}html[data-theme="light"] .ct-contact-grid,html[data-theme="light"] .ct-visit{background:linear-gradient(135deg,#eef4ff,#f8f6ff);color:#07142f}html[data-theme="light"] .ct-copy>p,html[data-theme="light"] .ct-visit-copy>p{color:#5b6b85}html[data-theme="light"] .ct-info-card{background:rgba(255,255,255,.7);border-color:rgba(45,85,145,.16);color:#07142f}html[data-theme="light"] .ct-info-card small{color:#66758d}html[data-theme="light"] .ct-service p{color:#c7d2e4}.contact-page .navbar{position:sticky;top:0}
.ct-location-modal{position:fixed;inset:0;z-index:99997;background:rgba(2,9,24,.72);backdrop-filter:blur(14px);display:grid;place-items:center;opacity:0;visibility:hidden;transition:.35s}.ct-location-modal.open{opacity:1;visibility:visible}.ct-modal-card{position:relative;width:min(520px,88vw);padding:42px;background:#0a1935;border:1px solid rgba(120,160,230,.35);box-shadow:0 35px 100px rgba(0,0,0,.45);transform:translateY(25px) scale(.96);transition:.45s var(--ct-ease)}.ct-location-modal.open .ct-modal-card{transform:none}.ct-modal-card button{position:absolute;right:18px;top:14px;background:none;border:0;color:#fff;font-size:28px;cursor:pointer}.ct-modal-card span{font:800 12px "Space Grotesk";letter-spacing:.22em;color:#78a3ff}.ct-modal-card h3{font:800 40px/.95 "Space Grotesk";letter-spacing:-.06em;margin:20px 0}.ct-modal-card p{color:#9eacc4;font-weight:600}.ct-modal-card a{display:inline-flex;margin-top:20px;color:#fff;background:#2867ff;padding:13px 18px;border-radius:999px;text-decoration:none;font-weight:800}@media(max-width:620px){.ct-modal-card{padding:30px}.ct-modal-card h3{font-size:30px}}
/* Store location upgrade */
.ct-store-location{position:relative;overflow:hidden;background:radial-gradient(circle at 80% 25%,rgba(40,103,255,.16),transparent 32%),linear-gradient(135deg,#07142d 0%,#0a1733 52%,#11102e 100%)}
.ct-location-glow{position:absolute;width:42vw;max-width:620px;aspect-ratio:1;border-radius:50%;right:-12vw;top:-20vw;background:rgba(48,111,255,.16);filter:blur(70px);pointer-events:none;animation:ctLocationGlow 8s ease-in-out infinite alternate}
@keyframes ctLocationGlow{to{transform:translate(-30px,35px) scale(1.12);opacity:.72}}
.ct-store-location .ct-visit-inner{position:relative;z-index:2}
.ct-address-featured{border-color:rgba(93,146,255,.34)!important;background:linear-gradient(135deg,rgba(29,63,116,.5),rgba(9,24,52,.72))!important;box-shadow:0 20px 60px rgba(0,0,0,.22)}
.ct-location-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.ct-location-note{display:flex;align-items:center;gap:10px;margin-top:22px;color:#aebbd1;font:700 12px/1.4 "Space Grotesk";letter-spacing:.14em;text-transform:uppercase}
.ct-location-note i{width:8px;height:8px;border-radius:50%;background:#2867ff;box-shadow:0 0 0 7px rgba(40,103,255,.12),0 0 22px rgba(40,103,255,.8);animation:ctPin 1.8s ease-in-out infinite}
.ct-real-map{position:relative!important;width:min(100%,720px)!important;height:min(560px,58vw)!important;min-height:420px!important;overflow:hidden!important;border-radius:30px!important;background:#0b1c38!important;border:1px solid rgba(120,160,230,.28)!important;box-shadow:0 35px 100px rgba(0,0,0,.35)!important;isolation:isolate}
.ct-map-image{position:absolute;inset:0;z-index:0}
.ct-map-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.55) brightness(.45) contrast(1.05);transform:scale(1.06);transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .6s ease}
.ct-real-map:hover .ct-map-image img{transform:scale(1.12);filter:saturate(.72) brightness(.52) contrast(1.08)}
.ct-map-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(4,16,38,.78),rgba(20,62,122,.32) 48%,rgba(8,13,37,.84))}
.ct-real-map .ct-map-grid{position:absolute;inset:0;z-index:2;background-image:linear-gradient(rgba(119,166,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(119,166,255,.12) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,transparent,black 12%,black 88%,transparent)}
.ct-street{position:absolute;z-index:3;color:rgba(201,218,247,.62);font:800 12px "Space Grotesk";letter-spacing:.18em;white-space:nowrap;text-transform:uppercase}
.ct-street:before{content:"";position:absolute;height:1px;background:rgba(120,169,255,.24);top:50%;width:160px;right:calc(100% + 12px)}
.street-a{left:11%;top:30%;transform:rotate(-13deg)}.street-b{right:9%;top:61%;transform:rotate(17deg)}.street-c{left:12%;bottom:20%;transform:rotate(9deg)}
.ct-map-route{position:absolute!important;z-index:4;inset:17% 18%;width:auto!important;height:auto!important;left:auto!important;top:auto!important;border:0!important;border-radius:0!important;transform:none!important;animation:none!important;pointer-events:none}
.ct-map-route:before{content:"";position:absolute;left:12%;top:70%;width:74%;height:46%;border:2px dashed rgba(87,147,255,.72);border-left-color:transparent;border-radius:12% 80% 30% 70%;transform:rotate(-12deg);filter:drop-shadow(0 0 8px rgba(55,119,255,.35));animation:ctRouteDash 5s linear infinite}
.ct-map-route:after{content:"";position:absolute;left:12%;top:70%;width:74%;height:2px;background:linear-gradient(90deg,transparent,#72a6ff,transparent);transform:rotate(-12deg);transform-origin:left center;animation:ctRouteSweep 3.2s ease-in-out infinite}
.ct-map-route span{position:absolute;width:8px;height:8px;border-radius:50%;background:#7baaff;box-shadow:0 0 0 6px rgba(61,126,255,.1),0 0 20px rgba(61,126,255,.8)}
.ct-map-route span:nth-child(1){left:9%;top:68%}.ct-map-route span:nth-child(2){left:48%;top:53%;animation:ctDotPulse 1.7s infinite}.ct-map-route span:nth-child(3){right:10%;top:26%}
@keyframes ctRouteDash{to{stroke-dashoffset:-100}}
@keyframes ctRouteSweep{0%,100%{opacity:.2;transform:rotate(-12deg) scaleX(.45)}50%{opacity:1;transform:rotate(-12deg) scaleX(1)}}
@keyframes ctDotPulse{50%{transform:scale(1.7);box-shadow:0 0 0 12px rgba(61,126,255,0),0 0 24px rgba(61,126,255,1)}}
.ct-real-map .ct-map-pin{z-index:6;position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;padding:13px 16px;background:rgba(6,18,42,.88);border:1px solid rgba(124,170,255,.42);backdrop-filter:blur(14px);box-shadow:0 18px 50px rgba(0,0,0,.32);border-radius:14px;font:800 12px/1.35 "Space Grotesk";letter-spacing:.16em;color:#fff;white-space:nowrap}
.ct-real-map .ct-map-pin i{flex:0 0 auto}
.ct-map-coords{position:absolute;left:22px;bottom:20px;z-index:6;padding:9px 11px;border:1px solid rgba(128,170,235,.24);background:rgba(5,16,37,.62);backdrop-filter:blur(10px);color:#9bb7df;font:700 12px "Space Grotesk";letter-spacing:.12em}
.ct-map-badge{position:absolute;right:20px;bottom:20px;z-index:6;display:grid;gap:4px;padding:11px 13px;background:rgba(40,103,255,.88);border:1px solid rgba(255,255,255,.16);color:#fff;box-shadow:0 15px 40px rgba(0,0,0,.3);font-family:"Space Grotesk"}
.ct-map-badge b{font-size:12px;letter-spacing:.17em}.ct-map-badge small{font-size:12px;opacity:.82;letter-spacing:.08em}
html[data-theme="light"] .ct-store-location{background:radial-gradient(circle at 80% 25%,rgba(73,125,255,.18),transparent 34%),linear-gradient(135deg,#edf4ff,#f7f5ff 55%,#eef6ff);color:#07142f}
html[data-theme="light"] .ct-address-featured{background:rgba(255,255,255,.76)!important;border-color:rgba(45,91,160,.2)!important;box-shadow:0 20px 60px rgba(42,70,120,.1)}
html[data-theme="light"] .ct-location-note{color:#536782}
html[data-theme="light"] .ct-real-map{border-color:rgba(54,91,145,.2)!important;box-shadow:0 30px 80px rgba(36,62,105,.15)!important}
@media(max-width:950px){.ct-real-map{height:500px!important;min-height:0!important}.ct-location-glow{right:-20vw;top:-10vw}}
@media(max-width:620px){.ct-location-actions{width:100%}.ct-location-actions .ct-btn{flex:1;min-width:145px}.ct-real-map{height:430px!important;border-radius:22px!important}.ct-map-coords{left:13px;bottom:13px;font-size:12px}.ct-map-badge{right:13px;bottom:13px}.ct-real-map .ct-map-pin{padding:11px 12px;font-size:12px}.ct-street{font-size:12px}.ct-street:before{width:80px}}
/* ===== MERGED FROM assets/CSS/contact-lenses.css ===== */
/* =========================================================
CLEARVISION CONTACT LENSES — EDITORIAL EXPERIENCE
Self-contained page styling. Uses existing global navbar,
footer, cursor, theme and back-to-top components.
========================================================= */
.contact-lenses-page{
--cl-bg:#061126;
--cl-bg2:#0a1834;
--cl-ink:#f5f8ff;
--cl-muted:#a8b7d0;
--cl-accent:#4f7cff;
--cl-cyan:#5ce1ff;
--cl-line:rgba(143,171,225,.20);
background:var(--cl-bg);
color:var(--cl-ink);
overflow-x:hidden;
}
html[data-theme="light"] .contact-lenses-page{
--cl-bg:#edf3fb;
--cl-bg2:#f7f9ff;
--cl-ink:#08152f;
--cl-muted:#4d5f7c;
--cl-line:rgba(12,31,65,.15);
}
.cl-loader{position:fixed;inset:0;background:#061126;z-index:10000;display:grid;place-items:center;transition:opacity .6s ease,visibility .6s ease}
.cl-loader.done{opacity:0;visibility:hidden;pointer-events:none}
.cl-loader-line{width:min(280px,55vw);height:2px;background:rgba(255,255,255,.12);overflow:hidden}
.cl-loader-line span{display:block;width:35%;height:100%;background:var(--cl-accent);animation:clLoad 1.2s ease-in-out infinite}
@keyframes clLoad{0%{transform:translateX(-110%)}100%{transform:translateX(390%)}}
.cl-page{position:relative}
.cl-section{position:relative;min-height:100svh;padding:clamp(80px,9vw,135px) clamp(24px,6vw,90px);display:flex;align-items:center;overflow:hidden;border-top:1px solid var(--cl-line)}
.cl-section:first-child{border-top:0}
.cl-grid-bg{position:absolute;inset:0;opacity:.45;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to bottom,#000,transparent)}
html[data-theme="light"] .cl-grid-bg{background-image:linear-gradient(rgba(20,55,110,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,55,110,.045) 1px,transparent 1px)}
.cl-kicker{display:flex;align-items:center;gap:12px;font:800 12px/1 "Space Grotesk",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#77a0ff}
.cl-kicker::before{content:"";width:35px;height:1px;background:currentColor}
.cl-display{font:800 clamp(55px,8.3vw,130px)/.86 "Space Grotesk",sans-serif;letter-spacing:-.075em;margin:25px 0}
.cl-display em{font-style:normal;color:var(--cl-accent)}
.cl-lead{font-size:clamp(15px,1.4vw,20px);line-height:1.75;color:var(--cl-muted);max-width:650px;font-weight:600}
.cl-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.cl-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:54px;padding:0 24px;border-radius:999px;text-decoration:none;font-weight:800;font-size:13px;overflow:hidden;transition:transform .35s cubic-bezier(.16,1.3,.3,1),background .35s ease,box-shadow .35s ease,color .35s ease}
.cl-btn.primary{background:var(--cl-accent);color:#fff;box-shadow:0 16px 45px rgba(40,103,255,.25)}
.cl-btn.secondary{border:1px solid var(--cl-line);color:var(--cl-ink);background:rgba(255,255,255,.035);backdrop-filter:blur(12px)}
.cl-btn:hover{transform:translateY(-5px) scale(1.025)}
.cl-btn.primary:hover{box-shadow:0 22px 55px rgba(40,103,255,.4)}
.cl-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.35) 50%,transparent 75%);transform:translateX(-120%);transition:transform .7s ease}
.cl-btn:hover::after{transform:translateX(120%)}
.cl-hero{min-height:calc(100svh - 10px);padding-top:150px;background:radial-gradient(circle at 75% 40%,rgba(40,103,255,.22),transparent 34%),radial-gradient(circle at 15% 80%,rgba(92,225,255,.08),transparent 25%),var(--cl-bg)}
.cl-hero-inner{width:100%;max-width:1450px;margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:6vw;position:relative;z-index:2}
.cl-hero-copy{transform:translate3d(var(--mx,0),var(--my,0),0);transition:transform .25s ease-out}
.cl-hero-visual{height:min(720px,76vh);min-height:500px;position:relative;display:grid;place-items:center;perspective:1200px}
.cl-hero-image{width:72%;height:88%;object-fit:cover;clip-path:polygon(12% 0,92% 5%,100% 78%,80% 100%,8% 91%,0 18%);filter:saturate(1.08) contrast(1.04);box-shadow:0 45px 100px rgba(0,0,0,.35);transform:rotate(3deg);transition:transform 1s cubic-bezier(.16,1,.3,1),clip-path .8s ease}
.cl-hero-visual:hover .cl-hero-image{transform:rotate(-1deg) scale(1.04);clip-path:polygon(4% 5%,96% 0,100% 92%,72% 100%,0 87%,5% 15%)}
.cl-orbit{position:absolute;border:1px solid rgba(91,143,255,.35);border-radius:50%;pointer-events:none;animation:clOrbit 15s linear infinite}
.cl-orbit.one{width:78%;aspect-ratio:1}.cl-orbit.two{width:95%;aspect-ratio:1;border-style:dashed;animation-duration:21s;animation-direction:reverse;opacity:.55}
@keyframes clOrbit{to{transform:rotate(360deg)}}
.cl-float-tag{position:absolute;padding:13px 15px;background:rgba(7,18,40,.72);border:1px solid rgba(160,190,245,.22);backdrop-filter:blur(16px);font:800 12px/1.4 "Space Grotesk";letter-spacing:.16em;box-shadow:0 20px 50px rgba(0,0,0,.25);animation:clFloat 4.5s ease-in-out infinite}
html[data-theme="light"] .cl-float-tag{background:rgba(255,255,255,.78);color:#08152f}
.cl-float-tag.a{top:13%;right:1%}.cl-float-tag.b{bottom:10%;left:0;animation-delay:-2s}
@keyframes clFloat{50%{transform:translateY(-12px) rotate(-2deg)}}
.cl-marquee{min-height:105px;padding:0;border-top:1px solid var(--cl-line);border-bottom:1px solid var(--cl-line);display:flex;align-items:center;background:var(--cl-bg2)}
.cl-marquee-track{display:flex;gap:55px;white-space:nowrap;animation:clMarquee 22s linear infinite;font:800 clamp(28px,3vw,50px)/1 "Space Grotesk";letter-spacing:-.04em}
.cl-marquee-track span:nth-child(even){color:var(--cl-accent)}
@keyframes clMarquee{to{transform:translateX(-50%)}}
.cl-journey{background:linear-gradient(135deg,var(--cl-bg2),var(--cl-bg));align-items:stretch}
.cl-journey-inner{width:100%;max-width:1400px;margin:auto;display:grid;grid-template-columns:.7fr 1.3fr;gap:7vw}
.cl-sticky-title{position:sticky;top:130px;height:max-content}
.cl-sticky-title h2{font:800 clamp(48px,6vw,92px)/.9 "Space Grotesk";letter-spacing:-.065em;margin:20px 0}
.cl-steps{display:flex;flex-direction:column;gap:14px}
.cl-step{position:relative;min-height:180px;padding:28px 32px;border:1px solid var(--cl-line);background:rgba(255,255,255,.025);overflow:hidden;transform:translateX(110px);opacity:0;transition:transform .9s cubic-bezier(.16,1.05,.3,1),opacity .7s ease,background .4s ease}
.cl-step.is-visible{transform:none;opacity:1}
.cl-step:hover{background:rgba(79,124,255,.09);transform:translateX(-8px)!important}
.cl-step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cl-accent);transform:scaleY(0);transform-origin:bottom;transition:transform .6s ease}
.cl-step:hover::before{transform:scaleY(1)}
.cl-step-num{font:800 12px "Space Grotesk";color:var(--cl-accent);letter-spacing:.2em}
.cl-step h3{font:800 clamp(25px,3vw,42px)/1;margin:18px 0 8px}
.cl-step p{margin:0;color:var(--cl-muted);font-weight:600;line-height:1.65;max-width:650px}
.cl-feature{background:#08162f;align-items:center}
.cl-feature-grid{width:100%;max-width:1400px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center}
.cl-feature-media{height:680px;position:relative;overflow:hidden;border-radius:44% 56% 46% 54%/48% 43% 57% 52%;transform:rotate(-2deg);box-shadow:0 45px 110px rgba(0,0,0,.35)}
.cl-feature-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .8s ease}
.cl-feature-media:hover img{transform:scale(1.1);filter:saturate(1.2)}
.cl-feature-ring{position:absolute;inset:7%;border:1px solid rgba(91,160,255,.5);border-radius:50%;animation:clPulse 4s ease-in-out infinite;pointer-events:none}
@keyframes clPulse{50%{transform:scale(1.04);opacity:.55}}
.cl-feature-copy h2{font:800 clamp(48px,6vw,90px)/.9 "Space Grotesk";letter-spacing:-.065em;margin:22px 0}
.cl-feature-copy h2 em{font-style:normal;color:#75a0ff}
.cl-feature-points{margin-top:35px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cl-feature-point{padding:17px;border-top:1px solid var(--cl-line);font-weight:800}
.cl-feature-point small{display:block;color:var(--cl-muted);font-weight:600;margin-top:7px}
.cl-types{background:radial-gradient(circle at 50% 20%,rgba(79,124,255,.13),transparent 34%),var(--cl-bg)}
.cl-types-inner{width:100%;max-width:1400px;margin:auto}
.cl-types-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:45px}
.cl-types-head h2{font:800 clamp(45px,6vw,85px)/.9 "Space Grotesk";letter-spacing:-.065em;margin:18px 0 0}
.cl-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cl-type{min-height:570px;position:relative;overflow:hidden;border:1px solid var(--cl-line);background:#091a38;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.16,1.2,.3,1),box-shadow .4s ease}
.cl-type img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .7s ease,filter .7s ease}
.cl-type::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 15%,rgba(4,12,30,.94) 90%)}
.cl-type:hover{box-shadow:0 35px 90px rgba(0,0,0,.35);transform:translateY(-14px)}
.cl-type:hover img{transform:scale(1.12);opacity:.82;filter:saturate(1.2)}
.cl-type-content{position:absolute;left:26px;right:26px;bottom:25px;z-index:2}
.cl-type-content span{font:800 12px "Space Grotesk";color:#76a0ff;letter-spacing:.2em}
.cl-type-content h3{font:800 34px "Space Grotesk";margin:14px 0 7px}
.cl-type-content p{color:#b4c2d9;line-height:1.6;margin:0}
.cl-tooltip{display:inline-block;position:relative;color:#fff;border-bottom:1px dotted #76a0ff;cursor:help}
.cl-tooltip::after{content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 10px);width:210px;padding:10px;background:#0b1934;border:1px solid var(--cl-line);font-size:12px;line-height:1.5;opacity:0;visibility:hidden;transform:translateY(7px);transition:.3s ease;pointer-events:none}
.cl-tooltip:hover::after{opacity:1;visibility:visible;transform:none}
.cl-360{background:linear-gradient(110deg,#061126,#0a2148 60%,#08112d);min-height:100svh}
.cl-360-inner{width:100%;max-width:1450px;margin:auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:5vw;align-items:center}
.cl-360-copy h2{font:800 clamp(50px,7vw,105px)/.88 "Space Grotesk";letter-spacing:-.07em;margin:20px 0}
.cl-360-stage{height:650px;position:relative;display:grid;place-items:center;perspective:1100px}
.cl-lens-disc{width:min(520px,80%);aspect-ratio:1;border-radius:50%;position:relative;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(85,174,255,.25) 25%,rgba(23,69,150,.32) 55%,rgba(0,0,0,.08));border:1px solid rgba(170,220,255,.55);box-shadow:inset 0 0 70px rgba(115,210,255,.18),0 0 100px rgba(49,131,255,.18);transform-style:preserve-3d;animation:lensSpin 16s linear infinite}
.cl-lens-disc::before,.cl-lens-disc::after{content:"";position:absolute;border:1px solid rgba(117,187,255,.4);border-radius:50%;inset:13%;animation:lensSpin 9s linear infinite reverse}
.cl-lens-disc::after{inset:27%;border-style:dashed;animation-duration:6s}
@keyframes lensSpin{to{transform:rotateY(360deg) rotateZ(360deg)}}
.cl-disc-mark{position:absolute;font:800 12px "Space Grotesk";letter-spacing:.22em;color:#bfeaff}
.cl-disc-mark.a{top:14%;left:48%}.cl-disc-mark.b{right:12%;top:49%}.cl-disc-mark.c{bottom:14%;left:45%}
.cl-360-orbit{position:absolute;width:88%;aspect-ratio:1;border:1px dashed rgba(95,151,255,.35);border-radius:50%;animation:clOrbit 12s linear infinite}
.cl-360-badge{position:absolute;right:2%;top:12%;padding:13px;background:rgba(7,18,40,.75);border:1px solid var(--cl-line);backdrop-filter:blur(12px);font:800 12px "Space Grotesk";letter-spacing:.16em}
.cl-care{background:var(--cl-bg2)}
.cl-care-inner{width:100%;max-width:1400px;margin:auto;display:grid;grid-template-columns:1.1fr .9fr;gap:6vw;align-items:center}
.cl-care-image{height:650px;overflow:hidden;clip-path:polygon(0 8%,91% 0,100% 88%,8% 100%);position:relative}
.cl-care-image img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.cl-care-image:hover img{transform:scale(1.1)}
.cl-care-copy h2{font:800 clamp(48px,6vw,90px)/.9 "Space Grotesk";letter-spacing:-.065em;margin:20px 0}
.cl-accordion{margin-top:30px;border-top:1px solid var(--cl-line)}
.cl-acc{border-bottom:1px solid var(--cl-line)}
.cl-acc button{width:100%;padding:22px 0;background:none;border:0;color:var(--cl-ink);display:flex;justify-content:space-between;text-align:left;font:800 18px "Space Grotesk";cursor:pointer}
.cl-acc button span{color:var(--cl-accent);transition:transform .35s}
.cl-acc.open button span{transform:rotate(45deg)}
.cl-acc p{max-height:0;overflow:hidden;margin:0;color:var(--cl-muted);line-height:1.7;transition:max-height .45s ease,padding .45s ease}
.cl-acc.open p{max-height:160px;padding:0 0 20px}
.cl-cta{min-height:75svh;background:radial-gradient(circle at 70% 45%,rgba(69,122,255,.34),transparent 30%),linear-gradient(120deg,#061126,#10194a);text-align:center;justify-content:center}
.cl-cta-inner{max-width:1050px;position:relative;z-index:2}
.cl-cta h2{font:800 clamp(58px,9vw,145px)/.83 "Space Grotesk";letter-spacing:-.08em;margin:22px 0}
.cl-cta h2 em{font-style:normal;color:#7da3ff}
.cl-cta p{max-width:650px;margin:0 auto;color:#b3c0d7;font-weight:600;line-height:1.7}
.cl-cta .cl-actions{justify-content:center}
.cl-cta-orb{position:absolute;width:520px;aspect-ratio:1;border:1px solid rgba(110,160,255,.24);border-radius:50%;animation:clPulse 5s ease-in-out infinite}
.cl-cta-orb::before,.cl-cta-orb::after{content:"";position:absolute;inset:12%;border:1px dashed rgba(110,160,255,.22);border-radius:50%}
.cl-cta-orb::after{inset:25%}
.cl-reveal{opacity:0;transform:translateY(55px);filter:blur(5px);transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1),filter .9s ease}
.cl-reveal.is-visible{opacity:1;transform:none;filter:none}
.cl-sweep{position:relative;overflow:hidden}
.cl-sweep::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--cl-bg),transparent);transform:translateX(-100%);transition:transform 1.1s cubic-bezier(.16,1,.3,1);z-index:3;pointer-events:none}
.cl-sweep.is-visible::before{transform:translateX(100%)}
.cl-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--cl-accent);z-index:1201;box-shadow:0 0 18px rgba(79,124,255,.7)}
.cl-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cl-particle{position:absolute;width:4px;height:4px;border-radius:50%;background:#72a0ff;box-shadow:0 0 14px #72a0ff;animation:particleDrift 7s linear infinite;opacity:.45}
@keyframes particleDrift{0%{transform:translate3d(0,30vh,0) scale(.5);opacity:0}20%{opacity:.5}100%{transform:translate3d(50px,-110vh,0) scale(1.5);opacity:0}}
@media(max-width:950px){
.cl-hero-inner,.cl-feature-grid,.cl-360-inner,.cl-care-inner{grid-template-columns:1fr}
.cl-hero-visual{height:560px;min-height:0}.cl-hero-copy{order:1}.cl-hero-visual{order:2}
.cl-journey-inner{grid-template-columns:1fr}.cl-sticky-title{position:relative;top:auto}
.cl-feature-media,.cl-care-image{height:560px}
.cl-type-grid{grid-template-columns:1fr 1fr}.cl-type{min-height:500px}
.cl-360-stage{height:560px}.cl-care-copy{order:1}.cl-care-image{order:2}
}
@media(max-width:620px){
.cl-section{padding:76px 18px}.cl-hero{padding-top:125px}.cl-display{font-size:clamp(52px,16vw,82px)}
.cl-hero-visual{height:430px}.cl-hero-image{width:82%;height:88%}.cl-float-tag{font-size:12px}
.cl-marquee{min-height:80px}.cl-marquee-track{font-size:27px;gap:30px}
.cl-step{min-height:150px;padding:22px}.cl-step h3{font-size:28px}
.cl-feature-media,.cl-care-image{height:400px}.cl-feature-points{grid-template-columns:1fr}
.cl-types-head{display:block}.cl-type-grid{grid-template-columns:1fr}.cl-type{min-height:470px}
.cl-360-stage{height:420px}.cl-lens-disc{width:78%}.cl-360-badge{right:0;top:5%}
.cl-cta{min-height:70svh}.cl-cta h2{font-size:clamp(55px,17vw,90px)}
}
@media(prefers-reduced-motion:reduce){
.cl-lens-disc,.cl-orbit,.cl-360-orbit,.cl-marquee-track,.cl-particle,.cl-loader-line span{animation:none!important}
.cl-reveal,.cl-step{opacity:1!important;transform:none!important;filter:none!important}
}
.ripple-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.75);transform:translate(-50%,-50%) scale(0);animation:clRipple .7s ease-out forwards;pointer-events:none;z-index:4}@keyframes clRipple{to{transform:translate(-50%,-50%) scale(18);opacity:0}}
.cl-btn{isolation:isolate}
/* ===== MERGED FROM assets/CSS/eye-test.css ===== */
/* =========================================================
CLEARVISION EYE TEST — IMMERSIVE MOTION PAGE
========================================================= */
.eye-test-body{overflow-x:hidden;background:#050d20;color:#f7f9fd}
.eye-test-page{margin:0;padding:0;overflow:hidden}
.et-section{position:relative;min-height:100vh;width:100%;margin:0;padding:clamp(70px,8vw,120px) clamp(24px,6vw,90px);display:flex;overflow:hidden}
.et-kicker{display:flex;align-items:center;gap:13px;font-size:12px;letter-spacing:.22em;font-weight:800;text-transform:uppercase;color:#8fb0ff}
.et-kicker span{width:34px;height:1px;background:#4d7dff;display:block}
.et-section h2,.et-section h1{margin:0;font-weight:850;letter-spacing:-.055em;line-height:.9}
.et-section h2{font-size:clamp(48px,6.5vw,100px)}
.et-section h2 em{font-style:normal;color:#4f7cff}
.et-section p{color:#b5c2da;line-height:1.75;font-size:clamp(15px,1.3vw,19px)}
.et-hero{min-height:calc(100vh - 1px);align-items:center;padding-top:150px}
.et-hero-media,.et-timeline-media{position:absolute;inset:0;z-index:0}
.et-hero-media img,.et-timeline-media img{width:100%;height:115%;object-fit:cover;display:block;filter:saturate(.8) contrast(1.05)}
.et-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,10,28,.92) 0%,rgba(5,18,45,.73) 43%,rgba(9,34,79,.35) 100%),linear-gradient(0deg,rgba(5,10,28,.72),transparent 55%);z-index:1}
.et-grid{position:absolute;inset:0;z-index:2;opacity:.16;background-image:linear-gradient(rgba(95,140,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(95,140,255,.25) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(90deg,#000,transparent 75%)}
.et-hero-content{position:relative;z-index:4;max-width:780px}
.et-hero h1{font-size:clamp(64px,9vw,145px);margin:26px 0 28px}
.et-hero h1 span{display:block;color:#fff}
.et-hero h1 strong{display:block;color:#4c7bff;font-weight:inherit}
.et-hero p{max-width:630px;margin:0 0 34px}
.et-cta{display:inline-flex;align-items:center;gap:30px;padding:17px 23px;border:1px solid rgba(113,151,255,.55);background:#2867ff;color:#fff;border-radius:14px;text-decoration:none;font-weight:800;transition:transform .35s cubic-bezier(.2,.9,.2,1.4),background .3s,box-shadow .3s}
.et-cta:hover{background:#5e84ff;box-shadow:0 18px 55px rgba(40,103,255,.35);transform:translateY(-3px) scale(1.03)}
.et-floating-readout{position:absolute;z-index:5;right:8%;bottom:13%;padding:18px 20px;border:1px solid rgba(125,164,255,.4);background:rgba(9,24,54,.48);backdrop-filter:blur(15px);border-radius:18px;box-shadow:0 25px 80px rgba(0,0,0,.3)}
.et-floating-readout b{display:block;font-size:28px;color:#fff}.et-floating-readout small{font-size:12px;letter-spacing:.2em;color:#79a0ff}
.et-journey{display:block;background:linear-gradient(135deg,#071126,#0a1532 55%,#171343)}
.et-section-head{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:55px}
.et-section-head h2{max-width:700px}.et-steps{max-width:1200px;margin-left:auto;width:70%}
.et-step{position:relative;min-height:125px;padding:25px 22px 25px 0;border-top:1px solid rgba(137,164,219,.22);display:grid;grid-template-columns:75px 1fr 50px;align-items:center;gap:15px;transition:background .45s,transform .45s,border-color .45s}
.et-step:last-child{border-bottom:1px solid rgba(137,164,219,.22)}
.et-step:hover{background:rgba(57,100,202,.12);transform:translateX(-12px);border-color:#3f74ff}
.et-num{color:#4f7cff;font-weight:800;letter-spacing:.08em}.et-step h3{font-size:clamp(23px,2.2vw,34px);margin:0 0 5px;color:#fff}.et-step p{margin:0;font-size:14px}.et-step-icon{font-size:26px;color:#4f7cff;text-align:center;transition:transform .5s}.et-step:hover .et-step-icon{transform:rotate(180deg) scale(1.2)}
.et-comprehensive{align-items:center;gap:clamp(45px,8vw,130px);background:radial-gradient(circle at 20% 20%,#153a72 0,transparent 35%),#061126}
.et-comprehensive-image{width:55%;height:min(75vh,720px);position:relative;overflow:hidden;border-radius:80px 18px 80px 18px;transform:rotate(-2deg);border:1px solid rgba(108,146,230,.35);box-shadow:0 35px 100px rgba(0,0,0,.35)}
.et-comprehensive-image img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}.et-comprehensive-image:hover img{transform:scale(1.08)}
.et-image-tag{position:absolute;bottom:18px;right:18px;padding:10px 14px;background:#071126;color:#79a0ff;font-size:12px;letter-spacing:.2em;font-weight:800}
.et-comprehensive-copy{flex:1;max-width:580px}.et-comprehensive-copy h2{margin:25px 0}.et-metrics{margin-top:35px}.et-metrics div{display:flex;gap:25px;padding:16px 0;border-bottom:1px solid rgba(126,153,211,.2)}.et-metrics strong{color:#4f7cff}.et-metrics span{font-weight:700;color:#fff}
.et-digital{align-items:center;background:#eef3fa;color:#0b1733;gap:8vw}.et-digital .et-kicker{color:#2867ff}.et-digital .et-kicker span{background:#2867ff}.et-digital-copy{width:48%;z-index:2}.et-digital h2{color:#0a1734;margin:25px 0}.et-digital h2 em{color:#2867ff}.et-digital p{color:#52637e;max-width:620px}.et-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:30px}.et-specs span{padding:16px;border:1px solid rgba(26,53,101,.13);background:rgba(255,255,255,.7);display:flex;justify-content:space-between}.et-specs b{font-size:12px;letter-spacing:.16em;color:#2867ff}.et-specs strong{color:#142039}.et-digital-visual{width:52%;height:70vh;position:relative;display:flex;align-items:center;justify-content:center}.et-digital-visual img{width:82%;height:82%;object-fit:cover;border-radius:50%;clip-path:circle(48% at 50% 50%);filter:saturate(1.1);box-shadow:0 20px 80px rgba(20,60,120,.25)}.et-scan-ring{position:absolute;border:1px solid #4d7dff;border-radius:50%;pointer-events:none}.ring-a{width:74%;height:74%;animation:spin 15s linear infinite}.ring-b{width:92%;height:92%;border-style:dashed;opacity:.45;animation:spinReverse 20s linear infinite}.et-scan-line{position:absolute;width:82%;height:2px;background:#4d7dff;box-shadow:0 0 25px #4d7dff;animation:scan 3s ease-in-out infinite}.et-scan-label{position:absolute;right:2%;bottom:4%;font-size:12px;letter-spacing:.2em;color:#2867ff;font-weight:900}
.et-checks{display:block;background:linear-gradient(135deg,#08142c,#111c45);}.et-checks-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:50px}.et-check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.et-check{background:rgba(15,30,62,.8);border:1px solid rgba(114,145,215,.2);padding:14px;border-radius:30px;transition:transform .5s,box-shadow .5s}.et-check:hover{transform:translateY(-14px) rotateX(4deg);box-shadow:0 35px 90px rgba(0,0,0,.3)}.et-check-image{height:420px;position:relative;overflow:hidden;border-radius:20px}.et-check-image img{width:100%;height:100%;object-fit:cover;transition:transform .8s}.et-check:hover img{transform:scale(1.1)}.et-check-image span{position:absolute;top:14px;left:14px;padding:8px 11px;background:#2867ff;color:#fff;font-size:12px;font-weight:800}.et-check h3{font-size:25px;margin:20px 8px 5px;color:#fff}.et-check p{margin:0 8px 12px;font-size:14px}
.et-timeline{align-items:center;padding-left:8%;padding-right:8%}.et-timeline-media img{height:125%;filter:saturate(.7) contrast(1.1)}.et-timeline-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,10,28,.96),rgba(4,14,34,.72) 45%,rgba(3,10,28,.4)),linear-gradient(0deg,rgba(3,10,28,.85),transparent)}.et-timeline-content{position:relative;z-index:2;width:100%;max-width:1050px}.et-timeline h2{margin:25px 0 50px}.et-process{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(135,165,229,.4);position:relative}.process-item{padding:25px 15px 15px;border-right:1px solid rgba(135,165,229,.25);transition:background .4s,transform .4s}.process-item b{display:block;color:#4f7cff;font-size:12px;margin-bottom:18px}.process-item span{font-size:clamp(17px,2vw,25px);font-weight:800;color:#fff}.process-item:hover{background:rgba(55,101,205,.18);transform:translateY(-8px)}.et-path{position:absolute;inset:0;width:100%;height:100%;opacity:.5}.et-path path{fill:none;stroke:#4f7cff;stroke-width:1;stroke-dasharray:8 10;animation:pathFlow 8s linear infinite}
.et-final{background:radial-gradient(circle at 70% 20%,#183f7b,transparent 30%),#071126;align-items:center;justify-content:center}.et-final-card{width:min(1250px,100%);display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid rgba(110,148,225,.25);background:rgba(10,25,54,.7);backdrop-filter:blur(20px);border-radius:40px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.3)}.et-final-image{min-height:580px;overflow:hidden}.et-final-image img{width:100%;height:100%;object-fit:cover;transition:transform 1s}.et-final-card:hover .et-final-image img{transform:scale(1.07)}.et-final-copy{padding:clamp(35px,6vw,80px);display:flex;flex-direction:column;justify-content:center}.et-final-copy h2{margin:25px 0}.et-final-copy p{max-width:500px}.et-final-copy .et-cta{align-self:flex-start;margin-top:20px}
[data-reveal]{opacity:0;transform:translateY(45px);transition:opacity .9s var(--ease),transform 1s var(--ease)}[data-reveal].is-visible{opacity:1;transform:none}.reveal-bar{opacity:0;transform:translateX(100px);transition:opacity .7s var(--ease),transform .9s var(--ease)}.reveal-bar.is-visible{opacity:1;transform:none}.et-step:nth-child(2){transition-delay:.12s}.et-step:nth-child(3){transition-delay:.24s}.et-step:nth-child(4){transition-delay:.36s}
.tilt-card{transform-style:preserve-3d;will-change:transform}.ripple-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;transform:translate(-50%,-50%) scale(0);animation:ripple .7s ease-out forwards;pointer-events:none}.et-cta,.et-step,.et-check{position:relative;overflow:hidden}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(16);opacity:0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes spinReverse{to{transform:rotate(-360deg)}}@keyframes scan{0%,100%{transform:translateY(-160px);opacity:.1}50%{transform:translateY(160px);opacity:1}}@keyframes pathFlow{to{stroke-dashoffset:-150}}@keyframes float{50%{transform:translateY(-10px)}}
.et-floating-readout{animation:float 4s ease-in-out infinite}
@media(max-width:900px){
.et-section{min-height:auto;padding:80px 24px}.et-hero{min-height:100svh;padding-top:130px}.et-hero h1{font-size:clamp(56px,12vw,100px)}.et-floating-readout{right:5%;bottom:7%}
.et-section-head,.et-checks-top{display:block}.et-section-head h2,.et-checks-top h2{margin-top:25px}.et-steps{width:100%;margin-top:40px}
.et-comprehensive{display:block}.et-comprehensive-image{width:100%;height:62vh;margin-bottom:55px}
.et-digital{display:block}.et-digital-copy{width:100%}.et-digital-visual{width:100%;height:65vw;min-height:350px;margin-top:45px}.et-digital-visual img{width:70%;height:70%}
.et-check-grid{grid-template-columns:1fr}.et-check-image{height:55vw;min-height:340px}
.et-timeline{min-height:90vh}.et-process{grid-template-columns:repeat(2,1fr)}.process-item:nth-child(2){border-right:0}
.et-final-card{grid-template-columns:1fr}.et-final-image{min-height:420px}
}
@media(max-width:600px){
.et-section{padding:70px 18px}.et-hero{padding-top:120px}.et-hero h1{font-size:clamp(48px,15vw,76px)}.et-hero p{font-size:15px}.et-floating-readout{display:none}
.et-step{grid-template-columns:45px 1fr}.et-step-icon{display:none}.et-step p{font-size:13px}
.et-comprehensive-image{height:60vw;min-height:300px;border-radius:45px 12px 45px 12px}.et-digital-visual{min-height:300px}.et-specs{grid-template-columns:1fr 1fr}
.et-check-image{height:90vw}.et-process{grid-template-columns:1fr}.process-item{border-right:0!important}
.et-final-image{min-height:330px}.et-final-copy{padding:32px 25px}.et-final-card{border-radius:25px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
.et-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:transparent;z-index:3000;pointer-events:none}.et-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#2867ff,#77a2ff);box-shadow:0 0 16px rgba(40,103,255,.7);transition:width .08s linear}
/* =========================================================
ABOUT PAGE — PREMIUM RESTRUCTURE V2
Reworks Story / Expertise / Values to remove empty space,
improve alignment, add purposeful visual structure and
support animated headings without changing the rest of site.
========================================================= */
.about-page .about-story,
.about-page .about-expertise,
.about-page .about-values{
position:relative;
isolation:isolate;
overflow:hidden;
}
/* Story: compact editorial split with a full-height visual frame */
.about-page .about-story{
grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
gap:clamp(36px,6vw,90px);
min-height:680px;
padding:clamp(80px,9vw,120px) max(6vw,35px);
}
.about-page .about-story::before{
content:"";
position:absolute;
width:clamp(300px,38vw,600px);
height:clamp(300px,38vw,600px);
right:-180px;
top:50%;
transform:translateY(-50%);
border:1px solid rgba(40,103,255,.16);
border-radius:50%;
box-shadow:0 0 0 70px rgba(40,103,255,.025),0 0 0 140px rgba(40,103,255,.018);
pointer-events:none;
}
.about-page .about-story-image{
height:clamp(480px,42vw,620px);
min-height:480px;
margin:0;
z-index:1;
}
.about-page .story-img-a{
width:74%;
height:100%;
left:0;
top:0;
border-radius:30px;
object-position:center;
}
.about-page .story-img-b{
width:48%;
height:54%;
right:0;
bottom:-8px;
border:8px solid var(--page-bg);
border-radius:26px;
}
.about-page .about-story-copy{
position:relative;
z-index:2;
max-width:620px;
padding:clamp(10px,2vw,30px) 0;
}
.about-page .about-story-copy h2{
font-size:clamp(44px,5.2vw,72px);
line-height:.98;
margin:16px 0 26px;
}
.about-page .about-story-copy p{
max-width:560px;
font-size:16px;
line-height:1.85;
margin-bottom:18px;
}
.about-page .signature{
margin-top:30px;
padding-top:18px;
border-top:1px solid var(--page-line);
width:min(100%,560px);
}
/* Stats: make the numbers a visual bridge instead of a blank strip */
.about-page .about-stats{
position:relative;
grid-template-columns:repeat(4,1fr);
gap:0;
padding:0 max(6vw,35px);
min-height:190px;
align-items:stretch;
background:transparent !important;
}
.about-page .about-stats::before{
content:"";
position:absolute;
left:max(6vw,35px);right:max(6vw,35px);top:0;
height:1px;background:var(--page-line);
}
.about-page .about-stats div{
position:relative;
justify-content:center;
align-items:flex-start;
text-align:left;
padding:34px clamp(18px,2.5vw,42px);
min-height:190px;
}
.about-page .about-stats div + div{border-left:1px solid var(--page-line)}
.about-page .about-stats strong{
font-size:clamp(42px,4.5vw,64px);
line-height:1;
letter-spacing:-2px;
}
.about-page .about-stats span{
font-size:12px;
margin-top:8px;
color:var(--page-muted);
letter-spacing:.8px;
}
.about-page .about-stats div::after{
content:"";
position:absolute;
right:24px;
top:50%;
width:7px;height:7px;
border-radius:50%;
background:var(--blue);
box-shadow:0 0 0 7px rgba(40,103,255,.08),0 0 24px rgba(40,103,255,.35);
animation:aboutPulse 2.4s ease-in-out infinite;
}
@keyframes aboutPulse{0%,100%{transform:scale(.75);opacity:.55}50%{transform:scale(1.15);opacity:1}}
/* Expertise: two immersive rows, no dead right-side space */
.about-page .about-expertise{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:0;
padding:clamp(70px,8vw,110px) max(6vw,35px);
}
.about-page .about-expertise::before{
content:"";
position:absolute;
inset:10% 5% 10% auto;
width:42%;
border:1px solid rgba(40,103,255,.12);
border-radius:42px;
pointer-events:none;
}
.about-page .about-expertise .expert-copy,
.about-page .about-expertise .expert-image{
position:relative;
z-index:2;
}
.about-page .about-expertise .expert-copy{
min-height:390px;
padding:clamp(38px,5vw,72px);
display:flex;
flex-direction:column;
justify-content:center;
border:1px solid var(--page-line);
border-radius:30px 0 0 30px;
background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
}
.about-page .about-expertise .expert-image{
height:390px;
border-radius:0 30px 30px 0;
overflow:hidden;
box-shadow:0 30px 70px rgba(4,12,30,.18);
}
.about-page .about-expertise .expert-image img{object-position:center}
.about-page .about-expertise .technology{
grid-column:2;
grid-row:2;
border-radius:0 30px 30px 0;
}
.about-page .about-expertise .technology + .expert-image{
grid-column:1;
grid-row:2;
border-radius:30px 0 0 30px;
}
.about-page .expert-copy h2{
font-size:clamp(38px,4.4vw,60px);
line-height:.99;
margin:14px 0 22px;
}
.about-page .expert-copy p{
font-size:15px;
line-height:1.8;
max-width:520px;
}
.about-page .expert-copy::after{
content:"";
position:absolute;
right:28px;bottom:24px;
width:54px;height:54px;
border:1px solid rgba(40,103,255,.28);
border-radius:50%;
animation:aboutOrbit 8s linear infinite;
}
@keyframes aboutOrbit{to{transform:rotate(360deg)}}
/* Values: cards become a clean numbered rail with animated accent */
.about-page .about-values{
padding:clamp(80px,9vw,120px) max(6vw,35px);
}
.about-page .about-section-head{
max-width:760px;
margin:0 0 48px;
text-align:left;
}
.about-page .about-section-head h2{
font-size:clamp(42px,5vw,68px);
line-height:.98;
}
.about-page .values-track{
grid-template-columns:repeat(5,minmax(150px,1fr));
gap:12px;
max-width:none;
}
.about-page .value-item{
min-height:260px;
padding:28px 24px;
border-radius:18px;
border:1px solid var(--page-line);
background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
overflow:hidden;
transition:transform .45s var(--ease),border-color .35s ease,background .35s ease,box-shadow .35s ease;
}
.about-page .value-item::before{
content:"";
position:absolute;
left:0;right:0;bottom:0;
height:3px;
background:linear-gradient(90deg,var(--blue),#8b4dff);
transform:scaleX(0);
transform-origin:left;
transition:transform .5s var(--ease);
}
.about-page .value-item:hover{
transform:translateY(-8px);
border-color:rgba(40,103,255,.4);
box-shadow:0 22px 55px rgba(4,12,30,.16);
}
.about-page .value-item:hover::before{transform:scaleX(1)}
.about-page .value-icon{
width:46px;height:46px;
display:grid;place-items:center;
border:1px solid rgba(40,103,255,.3);
border-radius:50%;
margin-top:18px;
}
.about-page .value-item h3{font-size:19px;margin-top:16px}
.about-page .value-item p{font-size:13px;line-height:1.7;margin-top:4px}
/* Kinetic headings: words grow in from small to full size */
.about-page .about-kinetic-word{
display:inline-block;
opacity:0;
transform:translateY(24px) scale(.78);
transform-origin:50% 100%;
transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);
transition-delay:var(--word-delay,0ms);
}
.about-page .about-kinetic-ready .about-kinetic-word,
.about-page .about-kinetic-word.is-visible{
opacity:1;
transform:none;
}
.about-page .about-kinetic-word:nth-child(2n){transition-delay:120ms}
.about-page .about-kinetic-word:nth-child(3n){transition-delay:220ms}
/* Decorative moving line used behind the new content */
.about-page .about-story::after,
.about-page .about-values::after{
content:"";
position:absolute;
width:180px;height:1px;
background:linear-gradient(90deg,transparent,var(--blue),transparent);
top:24%;left:-180px;
animation:aboutScan 7s ease-in-out infinite;
opacity:.55;
}
@keyframes aboutScan{0%,100%{transform:translateX(0);opacity:0}20%{opacity:.55}80%{opacity:.55}100%{transform:translateX(120vw);opacity:0}}
/* Light-mode readability for the new panels */
html[data-theme="light"] .about-page .about-expertise .expert-copy,
html[data-theme="light"] .about-page .value-item{
background:rgba(255,255,255,.42);
}
html[data-theme="light"] .about-page .about-stats div + div{border-color:rgba(20,42,78,.12)}
html[data-theme="light"] .about-page .about-expertise::before{border-color:rgba(40,103,255,.16)}
@media(max-width:1024px){
.about-page .about-story{grid-template-columns:1fr;min-height:0}
.about-page .about-story-copy{max-width:760px}
.about-page .about-story-image{height:500px}
.about-page .about-expertise{grid-template-columns:1fr;gap:16px}
.about-page .about-expertise .expert-copy,
.about-page .about-expertise .expert-image,
.about-page .about-expertise .technology,
.about-page .about-expertise .technology + .expert-image{
grid-column:auto;grid-row:auto;border-radius:28px;
}
.about-page .about-expertise .expert-image{height:390px}
.about-page .values-track{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
.about-page .about-story{padding:72px 20px}
.about-page .about-story-image{height:400px;min-height:400px}
.about-page .about-story-copy h2{font-size:42px}
.about-page .about-story-copy p{font-size:14px}
.about-page .about-stats{grid-template-columns:repeat(2,1fr);padding:0 20px}
.about-page .about-stats div{min-height:145px;padding:26px 16px}
.about-page .about-stats div + div{border-left:0}
.about-page .about-stats div:nth-child(even){border-left:1px solid var(--page-line)}
.about-page .about-stats strong{font-size:38px}
.about-page .about-expertise{padding:72px 20px}
.about-page .about-expertise .expert-copy{min-height:340px;padding:32px 24px}
.about-page .about-expertise .expert-image{height:300px}
.about-page .about-section-head{margin-bottom:34px}
.about-page .about-section-head h2{font-size:42px}
.about-page .about-values{padding:72px 20px}
.about-page .values-track{grid-template-columns:1fr}
.about-page .value-item{min-height:220px}
}
@keyframes aboutIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){
.about-page .about-kinetic-word{opacity:1;transform:none;transition:none}
.about-page .about-story::after{animation:none}
.about-page .about-stats div::after,.about-page .expert-copy::after,.about-page .value-icon{animation:none!important}
}
/* =========================================================
ABOUT HERO — FINAL GAP-FILL / JUMPING TYPE DESIGN
Scoped to the first About section only.
========================================================= */
.about-page .about-hero{
grid-template-columns:minmax(430px,1.02fr) minmax(170px,.34fr) minmax(360px,.92fr);
gap:clamp(22px,3vw,52px);
min-height:calc(100vh - var(--header-height,78px));
padding:clamp(120px,13vh,150px) max(5vw,42px) clamp(70px,8vh,100px);
background:
radial-gradient(ellipse 55% 80% at 78% 45%,rgba(48,105,255,.20),transparent 68%),
radial-gradient(circle at 12% 15%,rgba(132,87,255,.15),transparent 32%),
linear-gradient(125deg,#030a1b 0%,#071936 48%,#100d2b 100%);
}
.about-page .about-grid{
background:
linear-gradient(115deg,transparent 0 48%,rgba(74,122,255,.08) 48.1%,transparent 48.3%),
radial-gradient(circle at 70% 35%,rgba(77,128,255,.14) 0 1px,transparent 2px);
background-size:auto,42px 42px;
mask-image:linear-gradient(to bottom,black 70%,transparent);
opacity:.9;
}
.about-page .about-hero::before{
content:"";
position:absolute;
width:min(62vw,780px);height:min(62vw,780px);
right:-18%;top:50%;transform:translateY(-50%);
border:1px solid rgba(77,128,255,.16);
border-radius:50%;
box-shadow:0 0 0 70px rgba(77,128,255,.035),0 0 0 140px rgba(77,128,255,.025);
animation:aboutHeroPulse 8s ease-in-out infinite;
pointer-events:none;
}
@keyframes aboutHeroPulse{
0%,100%{transform:translateY(-50%) scale(.96);opacity:.65}
50%{transform:translateY(-50%) scale(1.03);opacity:1}
}
.about-page .about-hero-copy{max-width:620px}
.about-page .about-title{
overflow:visible;
letter-spacing:-.045em;
}
.about-page .about-title .jump-letter{
display:inline-block;
animation:aboutLetterJump 2.8s cubic-bezier(.45,.05,.55,.95) infinite;
animation-delay:calc(var(--jump-i) * 75ms);
transform-origin:50% 100%;
will-change:transform;
}
@keyframes aboutLetterJump{
0%,72%,100%{transform:translateY(0) scale(1)}
78%{transform:translateY(-13px) scale(1.035)}
84%{transform:translateY(0) scale(.98)}
90%{transform:translateY(-4px) scale(1.01)}
}
.about-page .about-hero-media{
height:clamp(480px,67vh,620px);
min-height:480px;
border-radius:34px 34px 90px 34px;
border:1px solid rgba(150,180,255,.24);
box-shadow:0 35px 100px rgba(0,0,0,.35),0 0 0 10px rgba(64,113,255,.035);
}
.about-page .about-hero-media::after{
content:"";
position:absolute;inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 35%,rgba(30,80,220,.16));
pointer-events:none;
}
.about-page .about-image-orbit{border-radius:26px 26px 74px 26px}
.about-page .about-hero-rail{
position:relative;
z-index:3;
min-height:390px;
display:flex;
flex-direction:column;
justify-content:center;
gap:18px;
padding:26px 0;
}
.about-page .hero-rail-line{
position:absolute;
left:50%;
top:8%;
bottom:8%;
width:1px;
background:linear-gradient(transparent,rgba(91,137,255,.5),transparent);
}
.about-page .hero-rail-card{
position:relative;
display:grid;
grid-template-columns:38px 1fr;
column-gap:12px;
align-items:center;
padding:15px 10px 15px 16px;
border:1px solid rgba(148,177,255,.16);
border-radius:18px;
background:rgba(9,22,48,.46);
backdrop-filter:blur(12px);
box-shadow:0 15px 35px rgba(0,0,0,.16);
animation:railFloat 4.8s ease-in-out infinite;
}
.about-page .hero-rail-card:nth-of-type(2){animation-delay:-1.8s}
.about-page .hero-rail-card:nth-of-type(3){animation-delay:-3.6s}
.about-page .hero-rail-card::before{
content:"";
position:absolute;
left:-4px;top:50%;
width:7px;height:7px;
border-radius:50%;
background:#3d79ff;
box-shadow:0 0 18px #3d79ff;
transform:translate(-50%,-50%);
}
.about-page .rail-number{
color:#70a0ff;font:800 12px/1 "Manrope",sans-serif;
letter-spacing:1px;
}
.about-page .hero-rail-card strong{
font:800 15px/1.02 "Manrope",sans-serif;
color:#f7f9ff;
letter-spacing:-.3px;
}
.about-page .hero-rail-card small{
grid-column:2;
margin-top:-3px;
color:#9eafd0;
font-size:12px;
line-height:1.3;
}
@keyframes railFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-7px)}
}
.about-page .hero-rail-orbit{
position:absolute;
width:118px;height:118px;
left:50%;top:50%;
transform:translate(-50%,-50%);
border:1px solid rgba(74,126,255,.25);
border-radius:50%;
pointer-events:none;
animation:orbitSpin 15s linear infinite;
}
.about-page .hero-rail-orbit::before{
content:"";
position:absolute;inset:17px;
border:1px dashed rgba(74,126,255,.22);
border-radius:50%;
}
.about-page .hero-rail-orbit i,
.about-page .hero-rail-orbit b{
position:absolute;width:8px;height:8px;border-radius:50%;
background:#4b83ff;box-shadow:0 0 16px #4b83ff;
}
.about-page .hero-rail-orbit i{top:5px;left:50%}
.about-page .hero-rail-orbit b{bottom:12px;right:9px;width:5px;height:5px}
@media(max-width:1100px){
.about-page .about-hero{
grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);
}
.about-page .about-hero-rail{display:none}
}
@media(max-width:700px){
.about-page .about-hero{
grid-template-columns:1fr;
min-height:auto;
padding:calc(var(--header-height,78px) + 48px) 20px 70px;
}
.about-page .about-hero-copy{max-width:none}
.about-page .about-hero-media{height:430px;min-height:430px;order:2}
.about-page .about-title{font-size:clamp(43px,13vw,66px)}
}
@media(prefers-reduced-motion:reduce){
.about-page .about-title .jump-letter,
.about-page .about-hero::before,
.about-page .hero-rail-card,
.about-page .hero-rail-orbit{animation:none!important}
}
/* =========================================================
ABOUT PAGE — SECTION 01 V4
Balanced hero / no empty middle space / animated image frame
Scoped only to .about-hero-v4 so other pages are untouched.
========================================================= */
.about-page .about-hero-v4{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(390px,.88fr);
grid-template-rows:minmax(430px,1fr) auto;
grid-template-areas:
"copy media"
"features features";
align-items:center;
column-gap:clamp(42px,6vw,96px);
row-gap:clamp(34px,5vh,54px);
min-height:calc(100vh - var(--header-height,78px));
padding:clamp(110px,12vh,140px) max(5.5vw,42px) clamp(44px,6vh,68px);
isolation:isolate;
background:
radial-gradient(ellipse 42% 55% at 82% 42%,rgba(54,116,255,.24),transparent 70%),
radial-gradient(circle at 18% 78%,rgba(118,75,255,.16),transparent 34%),
linear-gradient(135deg,#020817 0%,#07172f 47%,#111033 100%);
}
.about-page .about-hero-v4::after{
content:"";
position:absolute;
inset:0;
z-index:-1;
background:
linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);
background-size:72px 72px;
mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 92%);
pointer-events:none;
}
.about-page .about-hero-v4 .about-grid{
opacity:.42;
background:
radial-gradient(circle at 74% 34%,rgba(74,132,255,.30) 0 1px,transparent 2px),
radial-gradient(circle at 82% 70%,rgba(137,91,255,.22) 0 1px,transparent 2px);
background-size:46px 46px,64px 64px;
mask-image:linear-gradient(to bottom,black,transparent 90%);
}
.about-page .about-hero-v4 .about-hero-ring{
width:min(58vw,720px);
height:min(58vw,720px);
right:-18%;
top:42%;
border-color:rgba(81,133,255,.16);
box-shadow:
0 0 0 70px rgba(72,119,255,.035),
0 0 0 140px rgba(72,119,255,.022);
animation:aboutHeroPulseV4 9s ease-in-out infinite;
}
@keyframes aboutHeroPulseV4{
0%,100%{transform:translateY(-50%) scale(.96);opacity:.55}
50%{transform:translateY(-50%) scale(1.035);opacity:1}
}
.about-page .about-hero-v4 .about-hero-copy{
grid-area:copy;
align-self:center;
max-width:680px;
padding-bottom:4px;
}
.about-page .about-hero-v4 .about-eyebrow{
margin-bottom:10px;
color:#6fa0ff;
}
.about-page .about-hero-v4 .about-title{
margin:12px 0 22px;
max-width:650px;
font-size:clamp(52px,6.7vw,92px);
line-height:.91;
letter-spacing:-.055em;
}
.about-page .about-hero-v4 .about-title .gradient-shimmer{
background:linear-gradient(100deg,#ffffff 0%,#76a4ff 35%,#3d78ff 60%,#9b72ff 82%,#ffffff 100%);
background-size:220% auto;
-webkit-background-clip:text;
background-clip:text;
animation:aboutHeroTextFlowV4 6s linear infinite;
}
@keyframes aboutHeroTextFlowV4{
to{background-position:220% center}
}
.about-page .about-hero-v4 .about-lead{
max-width:555px;
margin-bottom:28px;
color:#b7c4da;
font-size:clamp(14px,1.2vw,16px);
line-height:1.85;
}
.about-page .about-hero-v4 .about-hero-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:22px;
}
.about-page .about-hero-v4 .about-primary{
min-height:54px;
padding:0 25px;
border:1px solid rgba(133,170,255,.28);
background:linear-gradient(135deg,#2f6cff,#2455d6);
box-shadow:0 18px 45px rgba(37,91,225,.28);
}
.about-page .about-hero-v4 .about-primary:hover{
transform:translateY(-5px);
box-shadow:0 22px 55px rgba(37,91,225,.42);
}
.about-page .about-hero-note{
display:flex;
flex-direction:column;
gap:4px;
padding-left:18px;
border-left:1px solid rgba(151,176,222,.25);
}
.about-page .about-hero-note b{
color:#f3f6ff;
font:800 12px/1 "Manrope",sans-serif;
letter-spacing:2.5px;
}
.about-page .about-hero-note small{
color:#8292ad;
font-size:14.5px!important;
}
.about-page .about-hero-v4 .about-hero-media{
grid-area:media;
justify-self:end;
align-self:center;
width:min(100%,570px);
height:clamp(450px,61vh,610px);
min-height:450px;
border-radius:38px;
overflow:hidden;
border:0;
padding:1px;
background:linear-gradient(135deg,rgba(112,157,255,.85),rgba(255,255,255,.12) 38%,rgba(129,81,255,.65) 100%);
box-shadow:
0 35px 90px rgba(0,0,0,.42),
0 0 0 8px rgba(73,122,255,.035),
0 0 60px rgba(48,102,255,.13);
transform:translateZ(0);
animation:aboutImageFloatV4 7s ease-in-out infinite;
}
@keyframes aboutImageFloatV4{
0%,100%{transform:translateY(0) scale(1)}
50%{transform:translateY(-7px) scale(1.006)}
}
.about-page .about-hero-v4 .about-hero-media::before{
content:"";
position:absolute;
inset:10px;
z-index:3;
border:1px solid rgba(255,255,255,.42);
border-radius:30px;
box-shadow:inset 0 0 35px rgba(80,126,255,.08);
pointer-events:none;
}
.about-page .about-hero-v4 .about-hero-media::after{
content:"";
position:absolute;
inset:1px;
z-index:2;
background:
linear-gradient(135deg,rgba(255,255,255,.14),transparent 27%,transparent 67%,rgba(56,104,255,.18)),
linear-gradient(to top,rgba(3,9,25,.18),transparent 40%);
pointer-events:none;
}
.about-page .about-hero-v4 .about-hero-media img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transform:scale(1.01);
filter:saturate(1.04) contrast(1.02);
transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .7s ease;
}
.about-page .about-hero-v4 .about-hero-media:hover img{
transform:scale(1.055);
filter:saturate(1.1) contrast(1.04);
}
.about-page .about-hero-v4 .about-image-orbit{
inset:18px;
z-index:4;
border:1px solid rgba(255,255,255,.42);
border-radius:30px;
box-shadow:0 0 0 1px rgba(68,119,255,.12),inset 0 0 28px rgba(62,113,255,.08);
}
.about-page .about-hero-v4 .about-image-orbit::before{
content:"";
position:absolute;
width:72px;
height:72px;
right:7%;
top:11%;
border:1px solid rgba(108,153,255,.7);
border-radius:50%;
box-shadow:0 0 0 12px rgba(83,132,255,.06),0 0 30px rgba(74,124,255,.18);
animation:aboutImageOrbitV4 5.5s ease-in-out infinite;
}
.about-page .about-hero-v4 .about-image-orbit::after{
content:"";
position:absolute;
width:7px;
height:7px;
right:calc(7% + 33px);
top:calc(11% - 4px);
border-radius:50%;
background:#75a2ff;
box-shadow:0 0 18px #4e84ff;
animation:aboutImageDotV4 5.5s ease-in-out infinite;
}
@keyframes aboutImageOrbitV4{
0%,100%{transform:translate(0,0) rotate(0deg)}
50%{transform:translate(-7px,9px) rotate(10deg)}
}
@keyframes aboutImageDotV4{
0%,100%{transform:translate(0,0)}
50%{transform:translate(-16px,14px)}
}
.about-page .hero-media-label{
position:absolute;
z-index:5;
left:28px;
bottom:28px;
display:flex;
align-items:center;
gap:12px;
padding:12px 15px;
border:1px solid rgba(255,255,255,.16);
border-radius:14px;
background:rgba(5,12,28,.68);
backdrop-filter:blur(14px);
box-shadow:0 12px 30px rgba(0,0,0,.2);
}
.about-page .hero-media-label b{
color:#75a3ff;
font:800 12px/1 "Manrope",sans-serif;
}
.about-page .hero-media-label span{
color:#dce5f6;
font:700 12px/1.45 "Manrope",sans-serif;
letter-spacing:1.5px;
}
.about-page .about-hero-v4 .about-hero-features{
grid-area:features;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
width:100%;
border-top:1px solid rgba(151,177,224,.16);
border-bottom:1px solid rgba(151,177,224,.12);
background:linear-gradient(90deg,rgba(8,22,48,.32),rgba(21,30,67,.28),rgba(8,22,48,.32));
backdrop-filter:blur(8px);
}
.about-page .about-hero-v4 .about-hero-features article{
position:relative;
display:grid;
grid-template-columns:38px 1fr 22px;
align-items:center;
gap:14px;
min-height:92px;
padding:15px clamp(14px,2vw,28px);
transition:background .35s ease,transform .35s ease;
}
.about-page .about-hero-v4 .about-hero-features article + article{
border-left:1px solid rgba(151,177,224,.13);
}
.about-page .about-hero-v4 .about-hero-features article:hover{
background:rgba(68,117,255,.08);
transform:translateY(-2px);
}
.about-page .about-hero-v4 .about-hero-features article > span{
width:34px;
height:34px;
display:grid;
place-items:center;
border:1px solid rgba(105,148,239,.42);
border-radius:50%;
color:#76a2ff;
font:800 12px/1 "Manrope",sans-serif;
}
.about-page .about-hero-v4 .about-hero-features strong{
display:block;
margin-bottom:5px;
color:#f5f7ff;
font:800 13px/1 "Manrope",sans-serif;
}
.about-page .about-hero-v4 .about-hero-features small{
display:block;
color:#8293af;
font-size:13px;
line-height:1.45;
}
.about-page .about-hero-v4 .about-hero-features i{
justify-self:end;
color:#75a2ff;
font-style:normal;
font-size:16px;
transition:transform .3s ease;
}
.about-page .about-hero-v4 .about-hero-features article:hover i{transform:translate(3px,-3px)}
@media(max-width:1050px){
.about-page .about-hero-v4{
grid-template-columns:minmax(0,1fr) minmax(330px,.82fr);
column-gap:34px;
}
.about-page .about-hero-v4 .about-title{font-size:clamp(48px,7vw,76px)}
.about-page .about-hero-v4 .about-hero-media{height:520px;min-height:420px}
}
@media(max-width:760px){
.about-page .about-hero-v4{
grid-template-columns:1fr;
grid-template-rows:auto auto auto;
grid-template-areas:"copy" "media" "features";
min-height:auto;
padding:calc(var(--header-height,78px) + 44px) 20px 48px;
row-gap:30px;
}
.about-page .about-hero-v4 .about-title{
font-size:clamp(46px,14vw,70px);
line-height:.94;
}
.about-page .about-hero-v4 .about-lead{font-size:14px;line-height:1.75}
.about-page .about-hero-v4 .about-hero-media{
width:100%;
height:min(116vw,520px);
min-height:390px;
border-radius:28px;
}
.about-page .about-hero-v4 .about-image-orbit{inset:13px;border-radius:22px}
.about-page .about-hero-v4 .about-hero-features{
grid-template-columns:1fr;
}
.about-page .about-hero-v4 .about-hero-features article{
min-height:78px;
}
.about-page .about-hero-v4 .about-hero-features article + article{
border-left:0;
border-top:1px solid rgba(151,177,224,.13);
}
.about-page .about-hero-v4 .about-hero-actions{gap:16px}
}
@media(prefers-reduced-motion:reduce){
.about-page .about-hero-v4 .about-hero-media,
.about-page .about-hero-v4 .about-hero-ring,
.about-page .about-hero-v4 .about-title .jump-letter,
.about-page .about-hero-v4 .about-title .gradient-shimmer,
.about-page .about-hero-v4 .about-image-orbit::before,
.about-page .about-hero-v4 .about-image-orbit::after{
animation:none!important;
}
}
/* =========================================================
ABOUT PAGE — CUSTOMER EXPERIENCE REDESIGN
Replaces the simple quote block with an editorial split
layout, animated male customer image frame and scroll
reveal. Scoped only to .about-quote-redesign.
========================================================= */
.about-page .about-quote-redesign{
position:relative;
min-height:clamp(650px,78vh,820px);
display:grid;
grid-template-columns:minmax(360px,.88fr) minmax(420px,1.12fr);
align-items:center;
gap:clamp(55px,8vw,125px);
padding:clamp(90px,9vw,135px) max(6vw,45px);
overflow:hidden;
isolation:isolate;
}
.about-page .about-quote-redesign::before{
content:"";
position:absolute;
width:720px;
height:720px;
right:-260px;
top:-260px;
border-radius:50%;
border:1px solid rgba(68,120,255,.18);
box-shadow:
0 0 0 55px rgba(68,120,255,.035),
0 0 0 110px rgba(68,120,255,.025);
animation:aboutQuoteOrbit 24s linear infinite;
pointer-events:none;
z-index:-1;
}
.about-page .about-quote-redesign::after{
content:"";
position:absolute;
left:-8%;
bottom:-55%;
width:65%;
height:75%;
background:radial-gradient(circle,rgba(40,103,255,.18),transparent 68%);
filter:blur(12px);
pointer-events:none;
z-index:-1;
}
@keyframes aboutQuoteOrbit{
to{transform:rotate(360deg)}
}
.about-page .quote-orbit{
position:absolute;
border:1px solid rgba(91,137,255,.16);
border-radius:50%;
pointer-events:none;
z-index:-1;
}
.about-page .quote-orbit-one{
width:260px;height:260px;
left:4%;top:9%;
animation:quoteFloat 9s ease-in-out infinite;
}
.about-page .quote-orbit-two{
width:100px;height:100px;
left:28%;bottom:10%;
border-color:rgba(139,77,255,.28);
animation:quoteFloat 7s ease-in-out infinite reverse;
}
@keyframes quoteFloat{
0%,100%{transform:translate3d(0,0,0)}
50%{transform:translate3d(0,-18px,0)}
}
/* Image panel */
.about-page .quote-image-redesign{
position:relative;
height:clamp(430px,58vh,600px);
overflow:visible;
border-radius:0;
background:none;
transform:translateX(-45px);
opacity:0;
transition:
opacity 1s ease,
transform 1.05s cubic-bezier(.16,1,.3,1);
}
.about-page .quote-image-redesign.is-visible{
opacity:1;
transform:translateX(0);
}
.about-page .quote-image-frame{
position:relative;
width:100%;
height:100%;
overflow:hidden;
border-radius:42px 12px 42px 12px;
background:#0a1734;
border:1px solid rgba(83,133,255,.45);
box-shadow:
0 35px 90px rgba(0,0,0,.30),
0 0 0 8px rgba(40,103,255,.045);
transform:rotate(-2.2deg);
transition:transform .7s cubic-bezier(.16,1.2,.3,1),border-radius .7s ease;
}
.about-page .quote-image-frame::before{
content:"";
position:absolute;
inset:0;
z-index:2;
background:
linear-gradient(125deg,rgba(255,255,255,.16),transparent 24%),
linear-gradient(180deg,transparent 58%,rgba(3,9,24,.32));
pointer-events:none;
}
.about-page .quote-image-frame::after{
content:"";
position:absolute;
inset:12px;
border:1px solid rgba(255,255,255,.20);
border-radius:34px 7px 34px 7px;
z-index:3;
pointer-events:none;
}
.about-page .quote-image-frame:hover{
transform:rotate(0deg) translateY(-8px) scale(1.015);
border-radius:18px 46px 18px 46px;
}
.about-page .quote-image-frame img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transform:scale(1.04);
filter:saturate(.96) contrast(1.03);
transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .7s ease;
}
.about-page .quote-image-frame:hover img{
transform:scale(1.10);
filter:saturate(1.08) contrast(1.04);
}
/* Animated edge sweep */
.about-page .quote-image-line{
position:absolute;
z-index:4;
background:linear-gradient(90deg,transparent,var(--blue),transparent);
opacity:.85;
pointer-events:none;
}
.about-page .quote-image-line.line-one{
width:70%;height:2px;
left:-70%;top:0;
animation:imageEdgeSweep 4.5s linear infinite;
}
.about-page .quote-image-line.line-two{
width:2px;height:65%;
right:0;top:-65%;
background:linear-gradient(180deg,transparent,#9d65ff,transparent);
animation:imageEdgeSweepVertical 4.5s linear infinite 1.7s;
}
@keyframes imageEdgeSweep{
0%{left:-70%}
55%,100%{left:105%}
}
@keyframes imageEdgeSweepVertical{
0%{top:-65%}
55%,100%{top:105%}
}
.about-page .quote-image-tag{
position:absolute;
z-index:5;
left:25px;
bottom:24px;
padding:9px 13px;
border:1px solid rgba(255,255,255,.24);
border-radius:999px;
background:rgba(5,13,32,.58);
backdrop-filter:blur(14px);
color:#fff;
font-size:12px;
font-weight:800;
letter-spacing:1.8px;
}
.about-page .quote-image-number{
position:absolute;
right:-22px;
top:30px;
width:58px;height:58px;
display:grid;place-items:center;
border-radius:50%;
background:rgba(7,17,39,.85);
border:1px solid rgba(75,126,255,.65);
color:#fff;
font-size:12px;
font-weight:800;
letter-spacing:1px;
box-shadow:0 12px 35px rgba(0,0,0,.25);
animation:quoteFloat 6s ease-in-out infinite;
}
/* Content panel */
.about-page .quote-copy-redesign{
position:relative;
max-width:700px;
padding:clamp(30px,4vw,55px);
border:1px solid rgba(89,133,235,.20);
border-radius:32px;
background:
linear-gradient(145deg,rgba(17,36,76,.74),rgba(9,20,45,.60));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
0 25px 70px rgba(0,0,0,.18);
backdrop-filter:blur(18px);
transform:translateX(45px);
opacity:0;
transition:
opacity 1s ease .12s,
transform 1.05s cubic-bezier(.16,1,.3,1) .12s;
}
.about-page .quote-copy-redesign.is-visible{
opacity:1;
transform:translateX(0);
}
.about-page .quote-copy-redesign .about-eyebrow{
margin-bottom:24px;
}
.about-page .quote-heading-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:14px;
}
.about-page .quote-kicker{
font-size:12px;
font-weight:800;
letter-spacing:2.4px;
color:#7fa5ff;
}
.about-page .quote-mini-dot{
width:9px;height:9px;
border-radius:50%;
background:var(--blue);
box-shadow:0 0 0 7px rgba(40,103,255,.10),0 0 22px rgba(40,103,255,.65);
animation:quoteDotPulse 2.2s ease-in-out infinite;
}
@keyframes quoteDotPulse{
0%,100%{transform:scale(1);opacity:.75}
50%{transform:scale(1.35);opacity:1}
}
.about-page .quote-copy-redesign h2{
margin:0 0 28px;
font-family:"Manrope",sans-serif;
font-size:clamp(34px,4vw,58px);
line-height:1.02;
letter-spacing:-2.5px;
color:#f5f8ff;
}
.about-page .quote-copy-redesign h2 span{
color:var(--blue-light);
}
.about-page .quote-copy-redesign blockquote{
position:relative;
margin:0 0 30px;
padding-left:26px;
max-width:620px;
color:#aebbd0;
font-size:clamp(15px,1.35vw,18px);
line-height:1.85;
font-style:normal;
}
.about-page .quote-copy-redesign blockquote::before{
content:"";
position:absolute;
left:0;
top:5px;
width:3px;
height:calc(100% - 10px);
border-radius:4px;
background:linear-gradient(180deg,var(--blue),#8b4dff);
}
.about-page .quote-person{
display:flex;
align-items:center;
gap:13px;
padding:18px 0;
border-top:1px solid rgba(255,255,255,.09);
border-bottom:1px solid rgba(255,255,255,.09);
}
.about-page .quote-avatar{
width:42px;height:42px;
display:grid;place-items:center;
border-radius:50%;
background:linear-gradient(135deg,#2867ff,#7b55ff);
color:#fff;
font-size:12px;
font-weight:800;
box-shadow:0 8px 24px rgba(40,103,255,.25);
}
.about-page .quote-person div{
display:flex;
flex-direction:column;
gap:4px;
}
.about-page .quote-person strong{
color:#fff;
font-size:13px;
}
.about-page .quote-person div span{
color:#8291aa;
font-size:12px;
}
.about-page .quote-check{
margin-left:auto;
width:25px;height:25px;
display:grid;place-items:center;
border-radius:50%;
color:#76a1ff;
border:1px solid rgba(76,129,255,.45);
font-size:12px;
}
.about-page .quote-feature-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0;
margin-top:22px;
}
.about-page .quote-feature-grid div{
min-height:52px;
display:flex;
flex-direction:column;
justify-content:center;
gap:5px;
padding:0 16px;
border-left:1px solid rgba(255,255,255,.09);
}
.about-page .quote-feature-grid div:first-child{
border-left:0;
padding-left:0;
}
.about-page .quote-feature-grid b{
color:#6f99ff;
font-size:12px;
letter-spacing:1px;
}
.about-page .quote-feature-grid span{
color:#dce5f5;
font-size:12px;
font-weight:700;
}
@media(max-width:1024px){
.about-page .about-quote-redesign{
grid-template-columns:1fr;
gap:55px;
min-height:auto;
}
.about-page .quote-image-redesign{
width:min(100%,620px);
height:520px;
margin:0 auto;
}
.about-page .quote-copy-redesign{
max-width:760px;
width:100%;
margin:0 auto;
}
}
@media(max-width:640px){
.about-page .about-quote-redesign{
padding:80px 20px;
gap:35px;
}
.about-page .quote-image-redesign{
height:410px;
}
.about-page .quote-image-number{
right:-8px;
}
.about-page .quote-copy-redesign{
padding:25px 21px;
border-radius:24px;
}
.about-page .quote-copy-redesign h2{
font-size:34px;
letter-spacing:-1.5px;
}
.about-page .quote-feature-grid{
grid-template-columns:1fr;
gap:12px;
}
.about-page .quote-feature-grid div,
.about-page .quote-feature-grid div:first-child{
border-left:0;
border-top:1px solid rgba(255,255,255,.08);
padding:12px 0 0;
}
}
@media(prefers-reduced-motion:reduce){
.about-page .quote-orbit,
.about-page .about-quote-redesign::before,
.about-page .quote-image-line,
.about-page .quote-mini-dot,
.about-page .quote-image-number{
animation:none !important;
}
}
/* =========================================================
CLEARVISION READING — REFRESHED SECTION 1 + SECTION 3
User-requested visual redesign:
1) Hero image uses a new angular "lens-cut" silhouette
2) Product cards use a cut-corner editorial panel pattern
========================================================= */
/* SECTION 1 — replace the soft blob with a sharper lens-cut silhouette */
.reading-page .reading-image-wrap{
border-radius:0;
clip-path:polygon(
0 11%, 7% 4%, 22% 1%, 76% 0, 91% 4%, 100% 13%,
97% 82%, 91% 93%, 77% 99%, 22% 100%, 8% 96%, 0 86%
);
background:linear-gradient(145deg,#2867ff 0%,#6c5cff 52%,#19bde8 100%);
padding:7px;
box-shadow:none;
transition:clip-path .9s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1.2,.3,1),filter .5s ease;
filter:drop-shadow(0 28px 42px rgba(8,27,67,.18));
}
.reading-page .reading-image-wrap::before{
content:"";
position:absolute;
inset:7px;
z-index:0;
pointer-events:none;
clip-path:inherit;
background:
linear-gradient(135deg,rgba(255,255,255,.18),transparent 30%),
repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 1px,transparent 1px 16px);
mix-blend-mode:screen;
}
.reading-page .reading-image-wrap:hover{
border-radius:0;
clip-path:polygon(
4% 4%, 17% 0, 83% 3%, 96% 10%, 100% 22%,
94% 88%, 82% 100%, 18% 96%, 5% 90%, 0 23%
);
transform:translateY(-8px) rotate(-1deg);
filter:drop-shadow(0 36px 55px rgba(8,27,67,.24));
}
.reading-page .reading-image-wrap img{
position:relative;
z-index:1;
width:100%;
aspect-ratio:4/5;
object-fit:cover;
transform:scale(1.045);
transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .7s ease;
}
.reading-page .reading-image-wrap:hover img{
transform:scale(1.10) rotate(.45deg);
filter:saturate(1.06) contrast(1.02);
}
.reading-page .reading-glass-label{
z-index:3;
right:7%;
bottom:7%;
border-radius:8px 20px 8px 20px;
}
/* SECTION 3 — editorial "lens-panel" cards instead of ordinary rounded boxes */
.reading-page .reading-products{
position:relative;
overflow:hidden;
}
.reading-page .reading-products::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.42;
background:
linear-gradient(115deg,transparent 0 49%,rgba(40,103,255,.055) 49.2% 49.7%,transparent 49.9%),
linear-gradient(25deg,transparent 0 74%,rgba(25,189,232,.05) 74.2% 74.7%,transparent 74.9%);
background-size:210px 210px,260px 260px;
}
.reading-page .reading-section-head,
.reading-page .reading-product-track{
position:relative;
z-index:1;
}
.reading-page .reading-product-track{
align-items:start;
}
.reading-page .reading-product{
position:relative;
border:0;
border-radius:0;
overflow:hidden;
background:rgba(255,255,255,.88);
clip-path:polygon(
0 0, 88% 0, 100% 10%, 100% 100%,
12% 100%, 0 90%
);
box-shadow:0 18px 45px rgba(24,49,91,.10);
filter:drop-shadow(0 12px 22px rgba(24,49,91,.08));
transition:clip-path .65s cubic-bezier(.16,1,.3,1),box-shadow .5s ease,filter .5s ease;
}
.reading-page .reading-product::before{
content:"";
position:absolute;
z-index:3;
top:0;
left:0;
width:52%;
height:5px;
background:linear-gradient(90deg,#2867ff,#7a5cff,#19bde8);
pointer-events:none;
}
.reading-page .reading-product::after{
content:"";
position:absolute;
z-index:3;
top:18px;
right:18px;
width:58px;
height:58px;
border:1px solid rgba(40,103,255,.18);
border-radius:50%;
background:
radial-gradient(circle,rgba(40,103,255,.12) 0 2px,transparent 2.5px);
background-size:10px 10px;
pointer-events:none;
opacity:.8;
transition:transform .5s ease,opacity .4s ease;
}
.reading-page .reading-product:nth-child(2){
top:34px;
}
.reading-page .reading-product:hover{
border-radius:0;
clip-path:polygon(
5% 0, 92% 0, 100% 13%, 96% 94%,
87% 100%, 7% 97%, 0 87%, 3% 8%
);
box-shadow:0 30px 65px rgba(24,49,91,.18);
filter:drop-shadow(0 18px 30px rgba(24,49,91,.12));
}
.reading-page .reading-product:hover::after{
transform:rotate(25deg) scale(1.08);
opacity:1;
}
.reading-page .reading-product .product-image{
position:relative;
aspect-ratio:4/3;
background:#e3eaf5;
}
.reading-page .reading-product .product-meta{
padding:27px 28px 34px;
}
.reading-page .reading-product .product-meta strong{
display:inline-flex;
align-items:center;
gap:8px;
padding-bottom:5px;
border-bottom:1px solid rgba(40,103,255,.28);
}
/* Responsive cleanup for the new staggered card layout */
@media (max-width:900px){
.reading-page .reading-product:nth-child(2){top:0}
}
@media (max-width:600px){
.reading-page .reading-image-wrap{
clip-path:polygon(0 8%,10% 2%,90% 0,100% 10%,97% 88%,88% 98%,12% 100%,0 89%);
padding:5px;
}
.reading-page .reading-image-wrap:hover{
clip-path:polygon(3% 4%,16% 0,84% 2%,97% 12%,100% 88%,85% 100%,15% 97%,0 87%);
}
.reading-page .reading-product{
clip-path:polygon(0 0,91% 0,100% 9%,100% 100%,9% 100%,0 91%);
}
}
@media (prefers-reduced-motion:reduce){
.reading-page .reading-image-wrap,
.reading-page .reading-product{
transition:none;
}
}
/* =========================================================
READING HERO — SPACING + IMAGE SCALE FIX
Keep the new angular design, but reduce the oversized image
and close the empty space between the copy and visual.
========================================================= */
@media (min-width:901px){
.reading-page .reading-hero{
grid-template-columns:minmax(0,.95fr) minmax(420px,1.05fr);
gap:clamp(18px,2.5vw,38px);
padding-right:clamp(32px,4.5vw,70px);
}
.reading-page .reading-hero-copy{
max-width:680px;
}
.reading-page .reading-hero-visual{
justify-content:flex-start;
align-items:center;
}
.reading-page .reading-image-wrap{
width:min(100%,510px);
}
}
@media (min-width:1200px){
.reading-page .reading-hero{
grid-template-columns:minmax(0,.92fr) minmax(500px,1.08fr);
gap:28px;
}
.reading-page .reading-image-wrap{
width:500px;
}
}
@media (max-width:900px){
.reading-page .reading-hero-visual{
justify-content:center;
}
.reading-page .reading-image-wrap{
width:min(100%,540px);
}
}
/* =========================================================
CLEARVISION FINAL COMPOSITION FIX
Fill the right side of Reading Section 3 and the center
of Reading Section 4 with intentional visual content.
Contact + Contact Lenses navigation stays sticky.
========================================================= */
/* ---------- STICKY NAV: CONTACT + CONTACT LENSES ---------- */
body.contact-page > .navbar,
body.contact-lenses-page > .navbar {
position: -webkit-sticky !important;
position: sticky !important;
top: 0 !important;
z-index: 5000 !important;
width: min(1380px, calc(100% - 28px)) !important;
margin-left: auto !important;
margin-right: auto !important;
isolation: isolate;
}
/* Keep the nav visible over animated page layers */
body.contact-page > .navbar::before,
body.contact-lenses-page > .navbar::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
z-index: -1;
pointer-events: none;
background: inherit;
}
/* ---------- READING SECTION 3: USE THE RIGHT SIDE ---------- */
.reading-products {
position: relative;
overflow: hidden;
}
.reading-products-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(250px, .32fr);
gap: clamp(28px, 4vw, 58px);
align-items: stretch;
}
.reading-product-track {
min-width: 0;
}
.reading-focus-panel {
position: relative;
min-height: 100%;
padding: clamp(28px, 3vw, 42px);
border: 1px solid rgba(40,103,255,.25);
border-radius: 34px 58px 30px 52px;
background:
radial-gradient(circle at 75% 20%, rgba(40,103,255,.22), transparent 32%),
linear-gradient(145deg, rgba(255,255,255,.88), rgba(229,237,251,.82));
box-shadow: 0 25px 70px rgba(20,48,95,.12);
display: flex;
flex-direction: column;
justify-content: center;
isolation: isolate;
overflow: hidden;
transition: transform .7s cubic-bezier(.16,1,.3,1), border-radius .7s ease;
}
.reading-focus-panel::before,
.reading-focus-panel::after {
content: "";
position: absolute;
border: 1px solid rgba(40,103,255,.2);
border-radius: 50%;
pointer-events: none;
z-index: -1;
}
.reading-focus-panel::before {
width: 240px;
height: 240px;
right: -115px;
top: -80px;
animation: cvFocusSpin 13s linear infinite;
}
.reading-focus-panel::after {
width: 130px;
height: 130px;
left: -65px;
bottom: -50px;
border-style: dashed;
animation: cvFocusSpin 9s linear infinite reverse;
}
.reading-focus-panel:hover {
transform: translateY(-8px);
border-radius: 50px 28px 54px 32px;
}
.reading-focus-number {
color: var(--reading-accent, #2867ff);
font-size: 12px;
letter-spacing: .18em;
font-weight: 900;
margin-bottom: 22px;
}
.reading-focus-orbit {
width: 92px;
height: 92px;
border: 1px solid rgba(40,103,255,.38);
border-radius: 50%;
display: grid;
place-items: center;
position: relative;
margin-bottom: 24px;
}
.reading-focus-orbit::before {
content: "";
position: absolute;
inset: 10px;
border: 1px dashed rgba(141,92,255,.55);
border-radius: 50%;
animation: cvFocusSpin 7s linear infinite;
}
.reading-focus-orbit span {
width: 22px;
height: 14px;
border: 2px solid var(--reading-accent, #2867ff);
border-radius: 50%;
position: relative;
}
.reading-focus-orbit span::after {
content: "";
position: absolute;
width: 18px;
height: 2px;
left: 18px;
top: 4px;
background: var(--reading-accent, #2867ff);
}
.reading-focus-orbit b {
position: absolute;
bottom: -6px;
right: -8px;
padding: 5px 8px;
border-radius: 10px;
background: #2867ff;
color: #fff;
font-size: 12px;
letter-spacing: .1em;
}
.reading-focus-panel h3 {
margin: 0 0 14px;
color: var(--heading, #0b1733);
font-family: "Space Grotesk", sans-serif;
font-size: clamp(26px, 2.5vw, 38px);
line-height: 1;
letter-spacing: -.05em;
}
.reading-focus-panel h3 em {
color: var(--reading-accent, #2867ff);
font-style: normal;
}
.reading-focus-panel p {
margin: 0 0 24px;
color: var(--muted, #66758f);
font-size: 14px;
line-height: 1.65;
}
.reading-focus-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 22px;
}
.reading-focus-stats span {
padding: 13px;
border: 1px solid rgba(40,103,255,.15);
border-radius: 16px;
background: rgba(255,255,255,.5);
}
.reading-focus-stats b,
.reading-focus-stats small {
display: block;
}
.reading-focus-stats b {
color: var(--reading-accent, #2867ff);
font-size: 18px;
}
.reading-focus-stats small {
color: var(--muted, #66758f);
font-size: 12px;
letter-spacing: .08em;
margin-top: 3px;
}
.reading-focus-panel > a {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 13px 16px;
border-radius: 18px;
background: #2867ff;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 800;
transition: transform .35s ease;
}
.reading-focus-panel > a:hover {
transform: translateX(5px);
}
@keyframes cvFocusSpin {
to { transform: rotate(360deg); }
}
/* ---------- READING SECTION 4: FILL THE CENTER ---------- */
.reading-cta {
position: relative;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto minmax(220px, auto);
align-items: center;
gap: clamp(28px, 5vw, 80px);
}
.reading-cta-center {
width: clamp(150px, 16vw, 240px);
height: clamp(150px, 16vw, 240px);
display: grid;
place-items: center;
position: relative;
justify-self: center;
}
.reading-cta-orbit {
width: 72%;
aspect-ratio: 1;
border-radius: 50%;
border: 1px solid rgba(103,151,255,.5);
display: grid;
place-items: center;
position: relative;
animation: cvCtaFloat 4s ease-in-out infinite;
}
.reading-cta-orbit::before,
.reading-cta-orbit::after {
content: "";
position: absolute;
border-radius: 50%;
border: 1px dashed rgba(103,151,255,.35);
}
.reading-cta-orbit::before {
inset: 12%;
animation: cvFocusSpin 8s linear infinite;
}
.reading-cta-orbit::after {
width: 155%;
height: 46%;
border-color: rgba(103,151,255,.22);
transform: rotate(-24deg);
}
.reading-cta-orbit span {
position: absolute;
width: 34%;
height: 23%;
border: 2px solid #4c83ff;
border-radius: 50%;
}
.reading-cta-orbit span::after {
content: "";
position: absolute;
width: 34px;
height: 2px;
left: 90%;
top: 45%;
background: #4c83ff;
}
.reading-cta-orbit i {
font-style: normal;
color: #fff;
font-size: 12px;
font-weight: 900;
letter-spacing: .18em;
z-index: 2;
}
.reading-cta-line {
position: absolute;
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(103,151,255,.45), transparent);
}
.reading-cta-center small {
position: absolute;
bottom: -2px;
color: rgba(220,230,255,.62);
font-size: 12px;
letter-spacing: .18em;
white-space: nowrap;
}
@keyframes cvCtaFloat {
0%,100% { transform: translateY(0) rotate(0); }
50% { transform: translateY(-9px) rotate(4deg); }
}
/* ---------- DARK MODE FOR THE NEW READING ELEMENTS ---------- */
html[data-theme="dark"] .reading-focus-panel {
background:
radial-gradient(circle at 75% 20%, rgba(40,103,255,.25), transparent 32%),
linear-gradient(145deg, #0d1b35, #081329);
border-color: rgba(100,150,255,.32);
box-shadow: 0 25px 70px rgba(0,0,0,.28);
}
html[data-theme="dark"] .reading-focus-panel h3 {
color: #f7f9ff !important;
}
html[data-theme="dark"] .reading-focus-panel p,
html[data-theme="dark"] .reading-focus-stats small {
color: #c2cee0 !important;
}
html[data-theme="dark"] .reading-focus-stats span {
background: rgba(255,255,255,.045);
border-color: rgba(255,255,255,.12);
}
/* ---------- LIGHT MODE FOR THE CTA CENTER ---------- */
html[data-theme="light"] .reading-cta-center small {
color: rgba(225,235,255,.75);
}
/* ---------- RESPONSIVE: NEVER LEAVE A HUGE EMPTY COLUMN ---------- */
@media (max-width: 1100px) {
.reading-products-layout {
grid-template-columns: 1fr;
}
.reading-focus-panel {
min-height: 320px;
display: grid;
grid-template-columns: auto 1fr;
column-gap: 24px;
align-items: center;
}
.reading-focus-number {
grid-column: 1 / -1;
}
.reading-focus-orbit {
grid-row: 2 / span 3;
margin: 0;
}
.reading-focus-panel h3,
.reading-focus-panel p,
.reading-focus-stats,
.reading-focus-panel > a {
grid-column: 2;
}
}
@media (max-width: 900px) {
body.contact-page > .navbar,
body.contact-lenses-page > .navbar {
top: 8px !important;
}
.reading-cta {
grid-template-columns: 1fr !important;
justify-items: start;
}
.reading-cta-center {
justify-self: center;
order: 2;
width: 170px;
height: 170px;
}
.reading-cta .reading-liquid-btn {
order: 3;
}
}
@media (max-width: 600px) {
.reading-products-layout {
gap: 24px;
}
.reading-focus-panel {
min-height: 280px;
padding: 24px;
display: block;
}
.reading-focus-orbit {
margin-bottom: 18px;
}
.reading-focus-stats {
grid-template-columns: 1fr 1fr;
}
.reading-cta-center {
width: 145px;
height: 145px;
}
}
/* =========================================================
READING FINAL COMPOSITION FIX
No extra right-side card: the existing 3 frame cards fill
the entire section width. The empty space becomes part of
the card composition instead of another panel.
========================================================= */
.reading-products-layout {
display: block !important;
width: 100% !important;
}
.reading-products-layout .reading-product-track {
width: 100% !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: clamp(22px, 3vw, 42px) !important;
align-items: start !important;
}
.reading-products-layout .reading-product {
width: 100% !important;
}
/* Give the three existing cards a stronger editorial rhythm. */
.reading-products-layout .reading-product:nth-child(1) { margin-top: 0 !important; }
.reading-products-layout .reading-product:nth-child(2) { margin-top: clamp(28px, 3vw, 54px) !important; }
.reading-products-layout .reading-product:nth-child(3) { margin-top: 0 !important; }
/* Decorative empty-space treatment, not a card/panel. */
.reading-products-layout::after {
content: "";
position: absolute;
width: clamp(180px, 18vw, 280px);
height: clamp(180px, 18vw, 280px);
right: -80px;
top: 42%;
border: 1px solid rgba(78,132,255,.18);
border-radius: 50%;
pointer-events: none;
animation: cvReadingAmbient 10s linear infinite;
}
.reading-products-layout::before {
content: "";
position: absolute;
width: 8px;
height: 8px;
right: 8%;
top: 48%;
border-radius: 50%;
background: #4c83ff;
box-shadow: 0 0 0 9px rgba(76,131,255,.08), 0 0 26px rgba(76,131,255,.45);
animation: cvReadingPulse 3s ease-in-out infinite;
pointer-events: none;
}
@keyframes cvReadingAmbient {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes cvReadingPulse {
0%,100% { transform: scale(.85); opacity: .65; }
50% { transform: scale(1.2); opacity: 1; }
}
/* Section 4: the center visual is an intentional centerpiece, not empty space. */
.reading-cta {
position: relative !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) clamp(190px, 20vw, 280px) minmax(220px, auto) !important;
align-items: center !important;
gap: clamp(34px, 6vw, 90px) !important;
min-height: clamp(330px, 34vw, 480px) !important;
}
.reading-cta-center {
width: clamp(190px, 20vw, 280px) !important;
height: clamp(190px, 20vw, 280px) !important;
opacity: 1 !important;
justify-self: center !important;
}
.reading-cta-center::before {
content: "";
position: absolute;
inset: 3%;
border: 1px solid rgba(103,151,255,.13);
border-radius: 50%;
animation: cvReadingAmbient 14s linear infinite reverse;
}
.reading-cta-center::after {
content: "READ / FOCUS / REPEAT";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgba(130,166,255,.18);
font-size: clamp(8px, .7vw, 11px);
font-weight: 900;
letter-spacing: .22em;
white-space: nowrap;
pointer-events: none;
}
@media (max-width: 1100px) {
.reading-products-layout .reading-product-track {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 18px !important;
}
}
@media (max-width: 900px) {
.reading-products-layout .reading-product-track {
grid-template-columns: 1fr 1fr !important;
}
.reading-products-layout .reading-product:nth-child(2) {
margin-top: 26px !important;
}
.reading-cta {
grid-template-columns: 1fr !important;
min-height: 0 !important;
}
.reading-cta-center {
order: 2;
width: 190px !important;
height: 190px !important;
}
.reading-cta .reading-liquid-btn {
order: 3;
}
}
@media (max-width: 600px) {
.reading-products-layout .reading-product-track {
grid-template-columns: 1fr !important;
}
.reading-products-layout .reading-product:nth-child(2) {
margin-top: 0 !important;
}
.reading-products-layout::after,
.reading-products-layout::before {
display: none;
}
}
/* =========================================================
READING SECTION 3 — HEAD: FILL THE RIGHT-SIDE GAP
The heading/paragraph block was capped at 750px, leaving a
large empty band to its right before the product cards.
A companion "focus" panel now fills that space.
========================================================= */
.reading-products .reading-section-head {
display: flex !important;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
gap: clamp(30px, 5vw, 70px);
max-width: none !important;
}
.reading-section-head-copy {
flex: 1 1 420px;
max-width: 560px;
}
.reading-products .reading-focus-panel,
html[data-theme="dark"] .reading-products .reading-focus-panel,
html[data-theme="light"] .reading-products .reading-focus-panel {
position: relative;
flex: 1 1 300px;
max-width: 380px;
min-height: 0;
/* Plain content, no card box */
background: none !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
}
.reading-products .reading-focus-panel::before,
.reading-products .reading-focus-panel::after {
display: none;
}
.reading-products .reading-focus-panel:hover {
transform: none;
}
.reading-products .reading-focus-panel .reading-focus-stats span {
background: none;
border: none;
padding: 0;
}
.reading-products .reading-focus-panel .reading-focus-stats {
gap: clamp(20px, 2.5vw, 34px);
}
@media (max-width: 1100px) {
.reading-products .reading-section-head {
flex-direction: column;
align-items: flex-start;
}
.reading-products .reading-focus-panel {
width: 100%;
flex-basis: auto;
}
.reading-section-head-copy {
flex: 0 0 auto;
max-width: 100%;
}
}
@media (max-width: 600px) {
.reading-products .reading-focus-panel {
padding: 0;
}
}
/* Compact the focus panel so it balances with the heading block
instead of towering over it, and align both columns at the top. */
.reading-products .reading-section-head {
align-items: flex-start;
}
.reading-products .reading-focus-panel {
padding: 0;
}
.reading-products .reading-focus-panel .reading-focus-orbit {
width: 56px;
height: 56px;
margin-bottom: 16px;
}
.reading-products .reading-focus-panel h3 {
font-size: clamp(20px, 1.8vw, 26px);
margin-bottom: 10px;
}
.reading-products .reading-focus-panel p {
margin-bottom: 16px;
font-size: 13px;
}
.reading-products .reading-focus-panel .reading-focus-stats {
margin-bottom: 14px;
}
/* =========================================================
SUNGLASSES EXPERIENCE — INTERACTIVE EDITION
Cursor torch + particle swarm + rope physics + 3D orbit
+ kinetic marquees + glass tiles + portal transition.
========================================================= */
/* No artificial gaps between the solar sections */
.frames-page.theme-solar .fx-section{
margin:0 !important;
border:0;
box-sizing:border-box;
}
.frames-page.theme-solar .fx-lens,
.frames-page.theme-solar .fx-orbit-section,
.frames-page.theme-solar .fx-spotlight,
.frames-page.theme-solar .solar-cta{
overflow:hidden;
}
/* Section 1 — liquid / torch / particle field */
.frames-page.theme-solar .solar-interactive{
min-height:690px;
background:
radial-gradient(circle at var(--mx,50%) var(--my,35%),rgba(255,186,65,.12),transparent 18%),
radial-gradient(circle at 15% 85%,rgba(34,105,255,.11),transparent 30%),
#050a15;
}
.solar-particle-field{
position:absolute;
inset:0;
width:100%;
height:100%;
pointer-events:none;
opacity:.8;
mix-blend-mode:screen;
}
.cursor-torch{
position:absolute;
width:320px;
height:320px;
border-radius:50%;
pointer-events:none;
transform:translate(-50%,-50%);
z-index:1;
background:radial-gradient(circle,rgba(255,201,90,.13) 0,rgba(255,174,50,.055) 28%,transparent 68%);
filter:blur(1px);
opacity:.95;
transition:opacity .25s ease;
}
.solar-interactive:before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(circle at var(--mx,50%) var(--my,35%),rgba(255,210,120,.17),transparent 11%),
repeating-linear-gradient(110deg,transparent 0 90px,rgba(255,255,255,.018) 91px 92px);
mask-image:radial-gradient(circle at var(--mx,50%) var(--my,35%),#000 0 18%,transparent 48%);
-webkit-mask-image:radial-gradient(circle at var(--mx,50%) var(--my,35%),#000 0 18%,transparent 48%);
z-index:2;
}
.solar-rope{
position:absolute;
z-index:2;
width:100%;
height:180px;
left:0;
top:4%;
pointer-events:none;
opacity:.5;
}
.solar-rope path{
fill:none;
stroke:#ffbf4a;
stroke-width:1.4;
stroke-dasharray:5 12;
filter:drop-shadow(0 0 8px rgba(255,190,70,.5));
transition:d .12s ease-out;
}
.solar-glass-grid{
position:absolute;
inset:0;
display:grid;
grid-template-columns:repeat(6,1fr);
pointer-events:none;
opacity:.28;
z-index:1;
}
.solar-glass-grid i{
border:1px solid rgba(255,255,255,.04);
backdrop-filter:blur(1px);
transform:translateY(calc(var(--i) * 2px));
animation:solarTileFloat 7s ease-in-out infinite;
animation-delay:calc(var(--i) * -.3s);
}
.solar-glass-grid i:nth-child(odd){background:rgba(255,190,70,.018)}
@keyframes solarTileFloat{50%{transform:translateY(-9px) rotate(.3deg)}}
.frames-page.theme-solar .solar-interactive .fx-lens-grid{position:relative;z-index:4;min-height:590px}
.frames-page.theme-solar .solar-interactive .fx-lens-visual{
cursor:crosshair;
}
.frames-page.theme-solar .solar-interactive .fx-lens-visual img{
filter:saturate(.78) contrast(1.12);
transform:scale(1);
transition:transform .8s cubic-bezier(.16,1,.3,1),filter .5s ease;
box-shadow:0 0 80px rgba(255,174,40,.1);
}
.frames-page.theme-solar .solar-interactive .fx-lens-visual:hover img{
transform:scale(1.045);
filter:saturate(1.02) contrast(1.08);
}
.liquid-ripple{
position:absolute;
width:180px;height:180px;border-radius:50%;
border:1px solid rgba(255,210,120,.35);
box-shadow:0 0 45px rgba(255,170,40,.16),inset 0 0 30px rgba(255,255,255,.04);
animation:liquidRipple 3.5s ease-out infinite;
pointer-events:none;
}
@keyframes liquidRipple{0%{transform:scale(.45);opacity:.05}25%{opacity:.65}100%{transform:scale(1.65);opacity:0}}
.lens-cursor-label{
position:absolute;
bottom:8%;
right:8%;
font-size:12px;
letter-spacing:.22em;
font-weight:900;
color:#ffe0a0;
padding:10px 13px;
border:1px solid rgba(255,191,74,.35);
background:rgba(4,9,18,.48);
backdrop-filter:blur(8px);
}
.solar-data-strip{
display:flex;
gap:0;
margin-top:34px;
border-top:1px solid rgba(255,255,255,.1);
border-bottom:1px solid rgba(255,255,255,.1);
}
.solar-data-strip span{
flex:1;
padding:16px 12px;
border-right:1px solid rgba(255,255,255,.08);
}
.solar-data-strip span:last-child{border-right:0}
.solar-data-strip b{display:block;font:800 23px "Space Grotesk";color:#ffcb67}
.solar-data-strip small{font-size:12px;letter-spacing:.17em;color:#8793a8}
/* Section 2 — spatial orbit + dual marquee */
.frames-page.theme-solar .solar-style-space{
min-height:820px;
background:
radial-gradient(circle at 50% 50%,rgba(255,169,45,.16),transparent 24%),
radial-gradient(circle at 80% 20%,rgba(55,102,255,.08),transparent 30%),
#070b13;
}
.dual-marquee{
position:absolute;
left:-5%;
width:110%;
overflow:hidden;
white-space:nowrap;
pointer-events:none;
z-index:0;
font:900 clamp(28px,4vw,58px)/1 "Space Grotesk";
letter-spacing:-.04em;
opacity:.07;
}
.dual-marquee span{display:inline-block}
.marquee-a{top:11%;transform:rotate(-4deg)}
.marquee-b{bottom:10%;transform:rotate(4deg);opacity:.045}
.marquee-a span{animation:marqueeLeft 24s linear infinite}
.marquee-b span{animation:marqueeRight 20s linear infinite}
@keyframes marqueeLeft{to{transform:translateX(-45%)}}
@keyframes marqueeRight{to{transform:translateX(45%)}}
.solar-3d-orbit{
z-index:3;
transition:transform .18s ease-out;
transform-style:preserve-3d;
}
.solar-3d-orbit .style-core{
box-shadow:0 30px 100px rgba(255,160,30,.22),0 0 0 1px rgba(255,215,130,.16);
transform:translateZ(40px);
transition:filter .4s ease;
}
.solar-3d-orbit:hover .style-core{filter:saturate(1.1) contrast(1.06)}
.core-shine{
position:absolute;
inset:-30%;
background:linear-gradient(120deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);
transform:translateX(-70%) rotate(10deg);
animation:coreShine 5s ease-in-out infinite;
pointer-events:none;
}
@keyframes coreShine{50%{transform:translateX(65%) rotate(10deg)}}
.orbit-node{
position:absolute;
width:13px;height:13px;
border:1px solid #ffbf4a;
border-radius:50%;
box-shadow:0 0 18px rgba(255,191,74,.7);
animation:nodePulse 2.4s ease-in-out infinite;
}
.node-a{top:12%;left:50%}.node-b{right:12%;top:58%;animation-delay:-.8s}.node-c{left:13%;bottom:18%;animation-delay:-1.5s}
@keyframes nodePulse{50%{transform:scale(1.8);opacity:.45}}
.rope-hint{
position:absolute;
bottom:7%;
right:7%;
z-index:4;
font-size:12px;
letter-spacing:.22em;
color:#8793a8;
}
.rope-hint span{color:#ffbf4a;font-size:16px;margin-left:8px}
/* Section 3 — completely new diagonal / glass-tile drop */
.frames-page.theme-solar .solar-drop-section{
min-height:720px;
display:grid;
grid-template-columns:.8fr 1.2fr;
align-items:center;
gap:clamp(30px,5vw,90px);
background:
linear-gradient(115deg,#04070d 0%,#080d18 48%,#0c1220 100%);
}
.drop-bg-text{
position:absolute;
right:-4%;
top:5%;
font:900 clamp(100px,19vw,280px)/.8 "Space Grotesk";
letter-spacing:-.09em;
color:rgba(255,255,255,.025);
white-space:nowrap;
pointer-events:none;
}
.drop-glass-tiles{
position:absolute;
inset:0;
display:grid;
grid-template-columns:repeat(3,1fr);
grid-template-rows:repeat(3,1fr);
pointer-events:none;
z-index:1;
}
.drop-glass-tiles i{
border:1px solid rgba(255,255,255,.045);
background:linear-gradient(135deg,rgba(255,191,74,.025),transparent);
backdrop-filter:blur(1px);
animation:glassTileDrop .9s cubic-bezier(.16,1,.3,1) both;
animation-delay:calc(var(--i) * .08s);
}
@keyframes glassTileDrop{from{opacity:0;transform:translateY(-55px) rotateX(18deg)}to{opacity:1;transform:none}}
.solar-drop-section .spotlight-copy{
position:relative;
z-index:5;
padding-left:clamp(0px,2vw,30px);
}
.solar-drop-section .spotlight-copy h2{
font-size:clamp(54px,7vw,98px);
}
.solar-drop-section .spotlight-copy strong{
font-size:42px;
text-shadow:0 0 25px rgba(255,191,74,.18);
}
.solar-drop-section .spotlight-img{
z-index:4;
height:min(590px,60vw);
clip-path:polygon(0 7%,88% 0,100% 14%,92% 100%,8% 93%);
border:1px solid rgba(255,191,74,.18);
transform-style:preserve-3d;
transition:transform .45s cubic-bezier(.16,1,.3,1),clip-path .45s ease;
}
.solar-drop-section .spotlight-img:hover{
transform:perspective(1000px) rotateY(-4deg) rotateX(2deg) translateZ(10px);
clip-path:polygon(3% 4%,94% 0,100% 10%,96% 96%,4% 100%);
}
.spotlight-copy-small{
position:absolute;
left:7%;bottom:7%;
z-index:4;
padding:9px 12px;
background:rgba(3,7,14,.65);
border:1px solid rgba(255,191,74,.35);
color:#ffe1a3;
font-size:12px;
font-weight:900;
letter-spacing:.2em;
}
.portal-ring{
position:absolute;
width:150px;height:150px;
left:50%;top:50%;
transform:translate(-50%,-50%);
border:1px solid rgba(255,210,130,.7);
border-radius:50%;
box-shadow:0 0 0 20px rgba(255,190,70,.03),0 0 70px rgba(255,170,40,.3);
animation:portalBreath 2.8s ease-in-out infinite;
z-index:3;
}
@keyframes portalBreath{50%{transform:translate(-50%,-50%) scale(1.18);opacity:.45}}
.solar-portal.portal-open .portal-ring{animation:portalZoom 1.05s cubic-bezier(.16,1,.3,1) forwards}
@keyframes portalZoom{to{transform:translate(-50%,-50%) scale(7);opacity:0;border-width:10px}}
.solar-portal.portal-open img{transform:scale(1.12);filter:brightness(1.2) saturate(1.1)}
/* Section 4 — portal CTA, no dead center */
.frames-page.theme-solar .solar-cta{
min-height:600px;
background:
radial-gradient(circle at 50% 50%,rgba(255,180,50,.15),transparent 18%),
radial-gradient(circle at 20% 80%,rgba(55,105,255,.1),transparent 28%),
#060a12;
}
.solar-cta .cta-rings{width:min(700px,70vw);height:min(700px,70vw)}
.solar-cta .cta-orb{width:210px;height:210px;opacity:.32}
.solar-cta .fx-copy{z-index:4}
.solar-cta:after{
content:"MOVE / LOOK / REPEAT";
position:absolute;
bottom:9%;
left:50%;
transform:translateX(-50%);
font-size:12px;
font-weight:900;
letter-spacing:.35em;
color:rgba(255,255,255,.38);
}
/* Accessibility */
@media (prefers-reduced-motion:reduce){
.solar-particle-field{display:none}
.dual-marquee span,.core-shine,.portal-ring,.solar-glass-grid i,.drop-glass-tiles i{animation:none !important}
}
/* Responsive — no artificial gaps */
@media (max-width:900px){
.frames-page.theme-solar .solar-interactive{min-height:auto;padding-top:110px;padding-bottom:70px}
.frames-page.theme-solar .solar-interactive .fx-lens-grid{min-height:0}
.solar-data-strip b{font-size:19px}
.frames-page.theme-solar .solar-style-space{min-height:700px}
.frames-page.theme-solar .solar-drop-section{grid-template-columns:1fr;min-height:800px;padding-top:70px;padding-bottom:70px}
.solar-drop-section .spotlight-img{height:500px;width:100%}
}
@media (max-width:600px){
.cursor-torch{width:230px;height:230px}
.solar-glass-grid{grid-template-columns:repeat(3,1fr)}
.solar-data-strip span{padding:12px 7px}
.solar-data-strip b{font-size:16px}
.solar-data-strip small{font-size:12px}
.frames-page.theme-solar .solar-style-space{min-height:640px}
.dual-marquee{font-size:30px}
.style-orbit{width:96vw}
.frames-page.theme-solar .solar-drop-section{min-height:auto}
.solar-drop-section .spotlight-img{height:420px}
.portal-ring{width:110px;height:110px}
}
/* =========================================================
SUNGLASSES / SECTION 2 — CRACK + REASSEMBLE EXPERIENCE
Replaces the old Style Orbit with an interactive broken-glass
composition that visually splits apart and joins together.
========================================================= */
.frames-page.theme-solar .fx-orbit-section{
min-height:760px;
overflow:hidden;
position:relative;
background:
radial-gradient(circle at 50% 58%,rgba(255,181,62,.14),transparent 25%),
radial-gradient(circle at 18% 35%,rgba(58,115,255,.10),transparent 28%),
#080c15;
}
.frames-page.theme-solar .fx-orbit-section::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(115deg,transparent 0 48%,rgba(255,255,255,.025) 49%,transparent 50%),
linear-gradient(72deg,transparent 0 64%,rgba(255,180,70,.035) 65%,transparent 66%);
opacity:.9;
}
.frames-page.theme-solar .center-copy{
position:relative;
z-index:5;
max-width:760px;
padding-top:35px;
}
.frames-page.theme-solar .center-copy h2{
text-shadow:0 12px 40px rgba(0,0,0,.25);
}
.crack-assembly{
--mx:0;
--my:0;
--tiltX:0deg;
--tiltY:0deg;
position:relative;
z-index:6;
width:min(650px,78vw);
aspect-ratio:1;
margin:0 auto;
display:grid;
place-items:center;
transform:perspective(1000px) rotateX(var(--tiltX)) rotateY(var(--tiltY));
transition:transform .45s cubic-bezier(.16,1,.3,1);
isolation:isolate;
}
.crack-aura{
position:absolute;
width:68%;
aspect-ratio:1;
border-radius:50%;
background:radial-gradient(circle,rgba(255,183,65,.18),transparent 62%);
filter:blur(16px);
animation:crackAura 4s ease-in-out infinite;
}
.crack-shards{
position:relative;
width:72%;
aspect-ratio:1;
filter:drop-shadow(0 22px 45px rgba(0,0,0,.42));
transform:translate3d(calc(var(--mx)*3px),calc(var(--my)*3px),0);
transition:transform .5s ease;
}
.crack-shard{
position:absolute;
inset:0;
display:block;
background-image:var(--crack-image);
background-size:100% 100%;
background-position:center;
background-repeat:no-repeat;
clip-path:polygon(50% 50%,50% 0,100% 0,100% 50%);
transition:
transform .85s cubic-bezier(.16,1,.3,1),
filter .6s ease,
opacity .6s ease;
border:1px solid rgba(255,255,255,.06);
}
.crack-shard::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.15),transparent 35%,rgba(255,178,65,.10));
mix-blend-mode:screen;
}
/* Nine different fragments create one complete image when joined. */
.crack-shard.shard-1{clip-path:polygon(0 0,34% 0,39% 31%,0 39%);transform:translate(-18px,-16px) rotate(-4deg)}
.crack-shard.shard-2{clip-path:polygon(34% 0,67% 0,61% 35%,39% 31%);transform:translate(0,-25px) rotate(2deg)}
.crack-shard.shard-3{clip-path:polygon(67% 0,100% 0,100% 39%,61% 35%);transform:translate(18px,-12px) rotate(4deg)}
.crack-shard.shard-4{clip-path:polygon(0 39%,39% 31%,50% 50%,0 63%);transform:translate(-27px,0) rotate(-3deg)}
.crack-shard.shard-5{clip-path:polygon(39% 31%,61% 35%,50% 50%);transform:translate(0,-4px) rotate(1deg);filter:brightness(1.12)}
.crack-shard.shard-6{clip-path:polygon(61% 35%,100% 39%,100% 64%,50% 50%);transform:translate(25px,3px) rotate(3deg)}
.crack-shard.shard-7{clip-path:polygon(0 63%,50% 50%,39% 100%,0 100%);transform:translate(-16px,17px) rotate(-4deg)}
.crack-shard.shard-8{clip-path:polygon(50% 50%,61% 35%,100% 64%,100% 100%,39% 100%);transform:translate(3px,25px) rotate(2deg)}
.crack-shard.shard-9{clip-path:polygon(50% 50%,39% 31%,61% 35%,100% 39%,100% 64%,61% 100%,39% 100%);transform:scale(.98);opacity:.96}
.crack-assembly.is-joined .crack-shard,
.crack-assembly.in-view .crack-shard{
transform:translate3d(calc(var(--mx)*-2px),calc(var(--my)*-2px),0) rotate(0deg) scale(1);
filter:brightness(1.05) saturate(1.05);
}
.crack-assembly.is-joined .shard-5,
.crack-assembly.in-view .shard-5{transform:translate3d(calc(var(--mx)*-2px),calc(var(--my)*-2px),0) scale(1.02)}
.crack-lines{
position:absolute;
width:72%;
aspect-ratio:1;
inset:14% auto auto 14%;
pointer-events:none;
z-index:8;
}
.crack-lines span{
position:absolute;
display:block;
height:2px;
width:39%;
left:30%;
top:49%;
transform-origin:left center;
background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,185,70,.2),transparent);
filter:drop-shadow(0 0 6px rgba(255,185,70,.35));
opacity:.9;
}
.crack-lines span:nth-child(1){transform:rotate(-53deg)}
.crack-lines span:nth-child(2){transform:rotate(18deg);width:31%}
.crack-lines span:nth-child(3){transform:rotate(126deg);width:32%}
.crack-lines span:nth-child(4){transform:rotate(205deg);width:28%}
.crack-center{
position:absolute;
z-index:10;
display:grid;
gap:5px;
place-items:center;
pointer-events:none;
padding:13px 18px;
border:1px solid rgba(255,190,70,.35);
background:rgba(5,8,15,.46);
backdrop-filter:blur(10px);
clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
opacity:0;
transform:scale(.8);
transition:.45s ease;
}
.crack-center b{font:800 12px "Space Grotesk";letter-spacing:.18em;color:#ffbf4a}
.crack-center small{font:700 12px Inter,sans-serif;letter-spacing:.18em;color:#dbe2ef}
.crack-assembly.is-joined .crack-center,
.crack-assembly.in-view .crack-center{opacity:1;transform:scale(1)}
.crack-label{
position:absolute;
z-index:11;
font:800 12px "Space Grotesk";
letter-spacing:.2em;
color:#aeb8c9;
transition:.4s ease;
}
.crack-label.label-top{top:12%;right:5%}
.crack-label.label-bottom{bottom:11%;left:4%;color:#ffbf4a}
.crack-assembly.is-joined .label-top{transform:translateY(-6px);opacity:.6}
.crack-assembly.is-joined .label-bottom{transform:translateY(6px);opacity:1}
.crack-hint{
position:relative;
z-index:12;
margin-top:-4px;
font-size:12px;
letter-spacing:.2em;
}
@keyframes crackAura{
0%,100%{transform:scale(.94);opacity:.65}
50%{transform:scale(1.08);opacity:1}
}
@media(max-width:900px){
.frames-page.theme-solar .fx-orbit-section{min-height:700px}
.crack-assembly{width:min(610px,88vw)}
.crack-shards{width:76%}
}
@media(max-width:600px){
.frames-page.theme-solar .fx-orbit-section{min-height:650px}
.frames-page.theme-solar .center-copy{padding:25px 18px 0}
.crack-assembly{width:94vw;margin-top:4px}
.crack-label{font-size:12px}
.crack-center{padding:10px 12px}
.crack-hint{margin-top:-12px}
}
@media(prefers-reduced-motion:reduce){
.crack-aura{animation:none}
.crack-shard{transition:none!important}
.crack-assembly{transition:none}
}
/* =========================================================
FINAL SUNGLASSES STYLE ORBIT — FULL-WIDTH CRACKED IMAGE
The image stays completely joined. Cracks are visual overlays,
never empty gaps. No extra side panels or broken fragments.
========================================================= */
.frames-page.theme-solar .solar-style-space{
min-height:820px !important;
width:100% !important;
padding-left:0 !important;
padding-right:0 !important;
overflow:hidden !important;
background:
radial-gradient(circle at 50% 70%,rgba(255,184,72,.13),transparent 34%),
linear-gradient(180deg,#071126 0%,#08142b 52%,#060d1d 100%) !important;
}
.frames-page.theme-solar .solar-style-space .center-copy{
width:min(920px,92vw) !important;
margin:0 auto !important;
padding-top:46px !important;
}
.frames-page.theme-solar .solar-style-space .crack-title{
color:#f7f9ff !important;
text-shadow:0 10px 35px rgba(0,0,0,.35) !important;
position:relative;
}
.crack-assembly{
position:relative !important;
z-index:6 !important;
width:100vw !important;
max-width:none !important;
height:min(510px,52vw) !important;
min-height:390px !important;
margin:28px 0 0 !important;
display:block !important;
transform:none !important;
overflow:hidden !important;
isolation:isolate;
border-top:1px solid rgba(255,255,255,.08);
border-bottom:1px solid rgba(255,255,255,.08);
background:#070d1b;
}
.crack-base{
position:absolute;
inset:0 !important;
z-index:1;
overflow:hidden;
}
.crack-base img{
width:100%;
height:100%;
display:block;
object-fit:cover;
object-position:center 42%;
filter:saturate(.96) contrast(1.04) brightness(.82);
transform:scale(1.015);
}
.crack-aura{
position:absolute !important;
inset:0 !important;
width:auto !important;
height:auto !important;
z-index:2 !important;
border-radius:0 !important;
background:
radial-gradient(circle at 50% 50%,rgba(255,186,76,.18),transparent 26%),
linear-gradient(90deg,rgba(7,15,32,.38),transparent 20%,transparent 80%,rgba(7,15,32,.38)) !important;
filter:none !important;
animation:crackLightSweep 5s ease-in-out infinite !important;
pointer-events:none;
}
@keyframes crackLightSweep{
0%,100%{opacity:.72}
50%{opacity:1}
}
.crack-shards{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
z-index:4 !important;
transform:none !important;
filter:none !important;
}
.crack-shard{
position:absolute !important;
inset:0 !important;
background-image:var(--crack-image) !important;
background-size:100% 100% !important;
background-position:center !important;
background-repeat:no-repeat !important;
border:0 !important;
transition:filter .35s ease,opacity .35s ease !important;
transform:none !important;
opacity:.98 !important;
}
.crack-shard::after{
background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 38%,rgba(255,183,65,.08)) !important;
opacity:.75;
}
.crack-assembly:hover .crack-shard{
filter:brightness(1.06) saturate(1.08) !important;
}
.crack-lines{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
z-index:7 !important;
pointer-events:none !important;
}
.crack-lines span{
position:absolute !important;
left:50% !important;
top:50% !important;
width:min(28vw,360px) !important;
height:2px !important;
background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.88) 42%,rgba(255,192,82,.95) 52%,transparent 100%) !important;
box-shadow:0 0 8px rgba(255,190,75,.45) !important;
transform-origin:left center !important;
opacity:.9 !important;
animation:crackPulse 3.6s ease-in-out infinite !important;
}
.crack-lines span:nth-child(1){transform:rotate(-164deg);width:min(30vw,390px)}
.crack-lines span:nth-child(2){transform:rotate(-124deg);width:min(24vw,310px);animation-delay:-.5s}
.crack-lines span:nth-child(3){transform:rotate(-68deg);width:min(27vw,350px);animation-delay:-1s}
.crack-lines span:nth-child(4){transform:rotate(-8deg);width:min(32vw,410px);animation-delay:-1.5s}
.crack-lines span:nth-child(5){transform:rotate(42deg);width:min(25vw,320px);animation-delay:-2s}
.crack-lines span:nth-child(6){transform:rotate(108deg);width:min(30vw,390px);animation-delay:-2.5s}
@keyframes crackPulse{50%{opacity:.45;filter:brightness(1.3)}}
.crack-center{
position:absolute !important;
left:50% !important;
top:50% !important;
z-index:9 !important;
transform:translate(-50%,-50%) !important;
opacity:1 !important;
display:grid !important;
gap:6px !important;
place-items:center !important;
padding:13px 19px !important;
border:1px solid rgba(255,190,70,.42) !important;
background:rgba(4,9,20,.58) !important;
backdrop-filter:blur(8px) !important;
clip-path:polygon(7% 0,100% 0,93% 100%,0 100%) !important;
transition:transform .35s ease,background .35s ease !important;
}
.crack-center b{font:800 12px "Space Grotesk" !important;letter-spacing:.18em !important;color:#ffd078 !important}
.crack-center small{font:700 12px Inter,sans-serif !important;letter-spacing:.18em !important;color:#edf2fa !important}
.crack-assembly:hover .crack-center{transform:translate(-50%,-50%) scale(1.05) !important;background:rgba(4,9,20,.72) !important}
.crack-label{z-index:10 !important;font-size:12px !important;color:#f0f4fb !important;text-shadow:0 2px 8px #000 !important}
.crack-label.label-top{top:12% !important;right:5% !important}
.crack-label.label-bottom{bottom:12% !important;left:5% !important;color:#ffd078 !important}
.crack-hint{
position:absolute !important;
left:50% !important;
bottom:22px !important;
transform:translateX(-50%) !important;
margin:0 !important;
z-index:12 !important;
color:#b6c2d5 !important;
}
.crack-hint span{color:#ffbf4a !important}
@media(max-width:900px){
.frames-page.theme-solar .solar-style-space{min-height:760px !important}
.frames-page.theme-solar .solar-style-space .center-copy{padding-top:34px !important}
.crack-assembly{height:440px !important;min-height:0 !important;margin-top:24px !important}
}
@media(max-width:600px){
.frames-page.theme-solar .solar-style-space{min-height:650px !important}
.frames-page.theme-solar .solar-style-space .center-copy{padding:26px 18px 0 !important}
.crack-assembly{height:340px !important;margin-top:18px !important}
.crack-center{padding:10px 12px !important}
.crack-center b{font-size:12px !important}
.crack-center small{font-size:12px !important}
.crack-label{font-size:12px !important}
.crack-hint{bottom:12px !important;font-size:12px !important}
}
@media(prefers-reduced-motion:reduce){
.crack-aura,.crack-lines span{animation:none !important}
}
/* =========================================================
SUNGLASSES HEADING CLASH FIX
Keep headings stable and fully contained — no scramble
effect, no pseudo-text collision, and enough room for the
second line at desktop/tablet widths.
========================================================= */
.frames-page.theme-solar .solar-interactive .fx-lens-grid{
grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
gap:clamp(36px,5vw,84px);
}
.frames-page.theme-solar .solar-interactive .solar-heading-clean,
.frames-page.theme-solar .solar-drop-section .solar-heading-clean{
position:relative;
display:block;
width:100%;
max-width:100%;
margin:0 0 22px;
font-family:"Space Grotesk",sans-serif;
font-size:clamp(48px,4.7vw,70px);
line-height:.94;
letter-spacing:-.055em;
text-wrap:balance;
overflow-wrap:normal;
word-break:normal;
white-space:normal;
color:var(--fx-text);
}
.frames-page.theme-solar .solar-interactive .solar-heading-clean br{
display:block;
}
.frames-page.theme-solar .solar-interactive .solar-heading-clean::before,
.frames-page.theme-solar .solar-interactive .solar-heading-clean::after,
.frames-page.theme-solar .solar-drop-section .solar-heading-clean::before,
.frames-page.theme-solar .solar-drop-section .solar-heading-clean::after{
content:none !important;
display:none !important;
}
@media(max-width:1100px){
.frames-page.theme-solar .solar-interactive .solar-heading-clean{
font-size:clamp(44px,5.6vw,62px);
}
}
@media(max-width:900px){
.frames-page.theme-solar .solar-interactive .fx-lens-grid{
grid-template-columns:minmax(0,1fr);
gap:28px;
}
.frames-page.theme-solar .solar-interactive .solar-heading-clean{
font-size:clamp(44px,9vw,64px);
}
}
@media(max-width:600px){
.frames-page.theme-solar .solar-interactive .solar-heading-clean{
font-size:clamp(40px,12vw,56px);
line-height:.96;
}
}
/* =========================================================
CLEARVISION SHOPPING CART
========================================================= */
.cart-nav-btn{
position:relative;
width:40px;height:40px;
display:inline-flex;
align-items:center;justify-content:center;
flex:0 0 40px;
border:1px solid var(--border);
border-radius:50%;
color:var(--text);
background:transparent;
transition:transform .3s ease,background .3s ease,border-color .3s ease;
}
.cart-nav-btn:hover{transform:translateY(-2px);background:var(--soft);border-color:var(--accent,#2867ff)}
.cart-nav-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cart-count{
position:absolute;right:-4px;top:-5px;
min-width:17px;height:17px;padding:0 4px;
display:grid;place-items:center;
border-radius:999px;
background:#2867ff;color:#fff;
font:800 12px/1 Inter,sans-serif;
border:2px solid var(--white);
transform:scale(.78);opacity:.78;
transition:transform .25s ease,opacity .25s ease;
}
.cart-count.has-items{transform:scale(1);opacity:1}
/* Add-to-cart controls */
.product-buy-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.product-buy-row>strong{font:800 18px/1 "Space Grotesk",sans-serif;color:var(--text)}
.add-cart-btn,.lens-cart-btn{
border:1px solid rgba(40,103,255,.55);
background:var(--accent,#2867ff);
color:#fff;
border-radius:999px;
min-height:40px;
padding:0 15px;
display:inline-flex;align-items:center;justify-content:center;gap:9px;
font:800 12px/1 Inter,sans-serif;
cursor:pointer;
transition:transform .3s ease,box-shadow .3s ease,background .3s ease;
}
.add-cart-btn b,.lens-cart-btn b{font-size:16px;line-height:1}
.add-cart-btn:hover,.lens-cart-btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(40,103,255,.25)}
.add-cart-btn.added,.lens-cart-btn.added{background:#152a66}
.lens-actions{flex-wrap:wrap}
.lens-cart-btn{min-height:46px;padding:0 18px}
/* Toast */
.cart-toast{
position:fixed;right:24px;bottom:24px;z-index:3000;
width:min(390px,calc(100vw - 32px));
display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:11px;
padding:13px 15px;
border:1px solid var(--border);
border-radius:18px;
background:color-mix(in srgb,var(--white) 92%,transparent);
color:var(--text);
box-shadow:0 24px 70px rgba(0,0,0,.22);
backdrop-filter:blur(18px);
transform:translateY(22px);opacity:0;pointer-events:none;
transition:.35s cubic-bezier(.16,1,.3,1);
}
.cart-toast.show{transform:translateY(0);opacity:1;pointer-events:auto}
.cart-toast>span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#2867ff;color:#fff;font-weight:900}
.cart-toast div{min-width:0}
.cart-toast div b,.cart-toast div small{display:block}
.cart-toast div b{font-size:12px}
.cart-toast div small{font-size:12px;opacity:.65;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-toast>a{font-size:12px;font-weight:800;color:#2867ff;white-space:nowrap}
/* Drawer */
.cart-backdrop{
position:fixed;inset:0;z-index:2890;
background:rgba(2,7,20,.55);backdrop-filter:blur(5px);
opacity:0;visibility:hidden;transition:.3s ease;
}
.cart-drawer{
position:fixed;right:0;top:0;bottom:0;z-index:2900;
width:min(460px,100vw);
background:var(--white);color:var(--text);
border-left:1px solid var(--border);
box-shadow:-30px 0 90px rgba(0,0,0,.22);
transform:translateX(105%);
transition:transform .45s cubic-bezier(.16,1,.3,1);
display:grid;grid-template-rows:auto 1fr auto;
}
.cart-open .cart-backdrop{opacity:1;visibility:visible}
.cart-open .cart-drawer{transform:translateX(0)}
.cart-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:28px 28px 20px;border-bottom:1px solid var(--border)}
.cart-drawer-head span,.cart-page-label,.cart-kicker,.cart-page-hero .cart-kicker,.cart-summary>span{
display:block;font:800 12px/1 "Space Grotesk",sans-serif;letter-spacing:.2em;color:#2867ff
}
.cart-drawer-head h2{margin:8px 0 0;font:800 30px/.95 "Space Grotesk",sans-serif;letter-spacing:-.04em}
.cart-drawer-head>button{width:38px;height:38px;border:1px solid var(--border);background:transparent;color:var(--text);border-radius:50%;font-size:25px;cursor:pointer}
.cart-drawer-body{overflow:auto;padding:18px 24px}
.cart-line{display:grid;grid-template-columns:82px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--border)}
.cart-line img{width:82px;height:88px;object-fit:cover;border-radius:14px;background:var(--soft)}
.cart-line-info>b,.cart-line-info>span{display:block}
.cart-line-info>b{font-size:14px}
.cart-line-info>span{font:800 14px/1.2 "Space Grotesk",sans-serif;margin-top:5px}
.cart-qty{display:flex;align-items:center;gap:8px;margin-top:12px}
.cart-qty button{width:27px;height:27px;border:1px solid var(--border);background:transparent;color:var(--text);border-radius:50%;cursor:pointer}
.cart-qty strong{min-width:20px;text-align:center;font-size:12px}
.cart-qty .cart-remove,.cart-page-remove{width:auto;border:0;border-radius:0;margin-left:4px;font-size:12px;text-decoration:underline;opacity:.65}
.cart-drawer-foot{padding:20px 24px 24px;border-top:1px solid var(--border)}
.cart-drawer-foot>div{display:flex;justify-content:space-between;align-items:end;margin-bottom:15px}
.cart-drawer-foot>div span{font-size:12px;opacity:.65}.cart-drawer-foot>div strong{font:800 24px/1 "Space Grotesk"}
.cart-checkout-link,.cart-primary-link,.cart-mock-checkout{
min-height:48px;padding:0 18px;border-radius:999px;
display:flex;align-items:center;justify-content:center;gap:10px;
background:#2867ff;color:#fff;font-size:12px;font-weight:800;
border:0;cursor:pointer;width:100%;
}
.cart-empty{text-align:center;padding:70px 20px}
.cart-empty>div,.cart-empty-mark{font-size:34px}
.cart-empty h3{font:800 24px/1 "Space Grotesk";margin:16px 0 8px}
.cart-empty p{font-size:12px;opacity:.65;max-width:260px;margin:0 auto 20px}
.cart-empty a{color:#2867ff;font-size:12px;font-weight:800}
/* Cart page */
.cart-page-main{min-height:100vh;background:var(--bg);color:var(--text)}
.cart-page-hero{
min-height:48vh;padding:150px clamp(24px,7vw,100px) 80px;
display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:50px;
background:radial-gradient(circle at 80% 30%,rgba(40,103,255,.14),transparent 34%),linear-gradient(135deg,var(--bg),var(--soft));
}
.cart-page-hero h1{font:800 clamp(3.5rem,7vw,7rem)/.88 "Space Grotesk";letter-spacing:-.07em;margin:20px 0}
.cart-page-hero h1 span{color:#2867ff}
.cart-page-hero p{max-width:590px;font-size:16px;line-height:1.75;opacity:.68}
.cart-hero-orbit{width:min(300px,65vw);aspect-ratio:1;border:1px solid rgba(40,103,255,.3);border-radius:50%;margin:auto;position:relative;display:grid;place-items:center}
.cart-hero-orbit:before,.cart-hero-orbit:after{content:"";position:absolute;border:1px dashed rgba(40,103,255,.35);border-radius:50%;inset:16%;animation:cartOrbit 10s linear infinite}
.cart-hero-orbit:after{inset:31%;animation-duration:6s;animation-direction:reverse}
.cart-hero-orbit span{width:75px;height:75px;border-radius:50%;background:#2867ff;box-shadow:0 0 60px rgba(40,103,255,.45);animation:cartPulse 2.5s ease-in-out infinite}
.cart-hero-orbit i{position:absolute;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 20px #2867ff;animation:cartDot 4s linear infinite}
.cart-hero-orbit b{position:absolute;bottom:20%;font:800 12px/1 "Space Grotesk";letter-spacing:.25em;opacity:.6}
@keyframes cartOrbit{to{transform:rotate(360deg)}}@keyframes cartPulse{50%{transform:scale(1.25);opacity:.7}}@keyframes cartDot{to{transform:rotate(360deg) translateX(105px) rotate(-360deg)}}
.cart-page-content{padding:0 clamp(20px,7vw,100px) 100px;margin-top:-30px;position:relative}
.cart-page-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:28px;align-items:start}
.cart-items-panel,.cart-summary{background:var(--white);border:1px solid var(--border);border-radius:28px}
.cart-items-panel{padding:28px}
.cart-page-item{display:grid;grid-template-columns:120px 1fr auto;gap:20px;padding:22px 0;border-bottom:1px solid var(--border);align-items:center}
.cart-page-item:last-child{border-bottom:0}
.cart-page-item img{width:120px;height:120px;border-radius:20px;object-fit:cover}
.cart-page-item>div>span{font-size:12px;letter-spacing:.18em;color:#2867ff;font-weight:800}
.cart-page-item h2{font:800 24px/1 "Space Grotesk";margin:7px 0}
.cart-page-item p{font-size:12px;opacity:.55;margin:0}
.cart-page-controls{display:flex;align-items:center;gap:14px}
.cart-page-price{font:800 20px/1 "Space Grotesk";align-self:start}
.cart-summary{padding:30px;position:sticky;top:100px}
.cart-summary h2{font:800 34px/.95 "Space Grotesk";letter-spacing:-.05em;margin:15px 0 30px}
.cart-summary-row,.cart-summary-total{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--border);font-size:12px}
.cart-summary-row.muted{opacity:.6}
.cart-summary-total{padding:20px 0;margin-bottom:18px;border-bottom:0;font-weight:800}
.cart-summary-total strong{font:800 26px/1 "Space Grotesk"}
.cart-summary small{display:block;text-align:center;margin-top:13px;font-size:12px;opacity:.55}
.cart-page-empty{min-height:45vh;display:grid;place-items:center;text-align:center;padding:80px 20px}
.cart-page-empty>div{margin-bottom:12px}
.cart-page-empty span{font:800 12px/1 "Space Grotesk";letter-spacing:.2em;color:#2867ff}
.cart-page-empty h1{font:800 clamp(2.5rem,6vw,5rem)/.95 "Space Grotesk";margin:14px 0}
.cart-page-empty p{max-width:450px;opacity:.65;font-size:13px;line-height:1.7;margin:0 auto 20px}
.cart-page-empty .cart-primary-link{width:auto;display:inline-flex;padding:0 22px}
[data-theme="dark"] .cart-toast{background:rgba(7,14,32,.94)}
[data-theme="dark"] .cart-drawer,[data-theme="dark"] .cart-items-panel,[data-theme="dark"] .cart-summary{background:#070e20}
[data-theme="dark"] .cart-count{border-color:#070e20}
/* Keep the cart visible and usable with the compact mobile navbar. */
@media (max-width:899px){
.nav-actions{gap:5px}
.cart-nav-btn{width:38px;height:38px;flex-basis:38px}
.cart-count{right:-5px;top:-5px}
.product-buy-row{align-items:flex-start;flex-direction:column}
.add-cart-btn{width:100%}
.cart-page-hero{grid-template-columns:1fr;min-height:auto;padding-top:130px}
.cart-hero-orbit{width:210px}
.cart-page-grid{grid-template-columns:1fr}
.cart-summary{position:static}
}
@media (max-width:600px){
.cart-toast{right:12px;bottom:12px}
.cart-drawer-head{padding:22px 18px 16px}
.cart-drawer-body,.cart-drawer-foot{padding-left:18px;padding-right:18px}
.cart-page-hero{padding:125px 20px 60px}
.cart-page-hero h1{font-size:clamp(3rem,15vw,5rem)}
.cart-page-content{padding:0 12px 60px}
.cart-items-panel,.cart-summary{border-radius:20px;padding:18px}
.cart-page-item{grid-template-columns:78px 1fr;gap:13px}
.cart-page-item img{width:78px;height:88px;grid-row:span 2}
.cart-page-price{grid-column:2;align-self:auto}
.cart-page-item h2{font-size:18px}
.lens-cart-btn{width:100%}
}
/* ClearVision eye-test booking */
.cv-booking-section{padding:80px 0 100px;position:relative}
.cv-booking-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.cv-booking-card{position:relative;overflow:hidden;border:1px solid rgba(72,105,190,.25);border-radius:28px;padding:34px;background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(235,241,255,.78));box-shadow:0 24px 70px rgba(20,40,100,.10)}
.cv-booking-card:before{content:"";position:absolute;inset:-40% -20%;background:radial-gradient(circle,rgba(47,102,255,.13),transparent 55%);animation:cvBookGlow 7s ease-in-out infinite alternate;pointer-events:none}
.cv-booking-head,.cv-booking-form,.cv-booking-success{position:relative;z-index:1}
.cv-booking-kicker{font-size:12px;font-weight:800;letter-spacing:.2em;color:#2d67ff;text-transform:uppercase;margin-bottom:10px}
.cv-booking-head h2{margin:0 0 12px;font-size:clamp(34px,5vw,62px);line-height:.98;color:#07132f}
.cv-booking-head p{max-width:680px;margin:0 0 28px;color:#465775;font-size:16px;line-height:1.7}
.cv-booking-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.cv-field{display:flex;flex-direction:column;gap:8px}
.cv-field.full{grid-column:1/-1}
.cv-field label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#172748}
.cv-field input{width:100%;box-sizing:border-box;border:1px solid rgba(31,55,100,.18);border-radius:14px;background:rgba(255,255,255,.88);padding:15px 16px;font:inherit;color:#07132f;outline:none;transition:border-color .2s,box-shadow .2s,transform .2s}
.cv-field input:focus{border-color:#2f66ff;box-shadow:0 0 0 4px rgba(47,102,255,.10);transform:translateY(-1px)}
.cv-booking-actions{display:flex;align-items:center;gap:18px;margin-top:22px;flex-wrap:wrap}
.cv-confirm-booking{border:0;border-radius:999px;padding:15px 25px;background:linear-gradient(90deg,#2864ff,#6253ff);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 12px 30px rgba(47,102,255,.25);transition:transform .2s,box-shadow .2s}
.cv-confirm-booking:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(47,102,255,.34)}
.cv-booking-note{font-size:12px;color:#66758f}
.cv-booking-success{display:none;text-align:center;padding:42px 18px}
.cv-booking-success.show{display:block}
.cv-booking-success .cv-success-mark{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;background:#2f66ff;color:#fff;font-size:28px;box-shadow:0 12px 30px rgba(47,102,255,.25)}
.cv-booking-success h3{margin:0 0 10px;color:#07132f;font-size:30px}
.cv-booking-success p{margin:0;color:#52627d;line-height:1.7}
@keyframes cvBookGlow{from{transform:translate(-8%,-4%) scale(.9)}to{transform:translate(12%,8%) scale(1.08)}}
body.dark-mode .cv-booking-card,.dark .cv-booking-card,[data-theme="dark"] .cv-booking-card{background:linear-gradient(135deg,rgba(11,22,48,.96),rgba(13,20,43,.94));border-color:rgba(88,123,220,.28);box-shadow:0 24px 70px rgba(0,0,0,.3)}
body.dark-mode .cv-booking-head h2,.dark .cv-booking-head h2,[data-theme="dark"] .cv-booking-head h2,
body.dark-mode .cv-booking-success h3,.dark .cv-booking-success h3,[data-theme="dark"] .cv-booking-success h3{color:#f4f7ff}
body.dark-mode .cv-booking-head p,.dark .cv-booking-head p,[data-theme="dark"] .cv-booking-head p,
body.dark-mode .cv-booking-note,.dark .cv-booking-note,[data-theme="dark"] .cv-booking-note{color:#b6c2d9}
body.dark-mode .cv-field label,.dark .cv-field label,[data-theme="dark"] .cv-field label{color:#dbe4f7}
body.dark-mode .cv-field input,.dark .cv-field input,[data-theme="dark"] .cv-field input{background:rgba(8,15,32,.86);color:#f4f7ff;border-color:rgba(148,169,216,.25)}
body.dark-mode .cv-booking-success p,.dark .cv-booking-success p,[data-theme="dark"] .cv-booking-success p{color:#b6c2d9}
@media(max-width:700px){.cv-booking-section{padding:55px 0 70px}.cv-booking-card{padding:24px 18px;border-radius:22px}.cv-booking-grid{grid-template-columns:1fr}.cv-field.full{grid-column:auto}.cv-booking-head h2{font-size:40px}.cv-confirm-booking{width:100%}}
/* =========================================================
CLEARVISION READING CART INTERACTION — NO CLASH / NO CLIP
========================================================= */
.reading-page .cv-reading-swap{position:relative;overflow:hidden}
.reading-page .cv-reading-swap>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .55s ease,transform .9s cubic-bezier(.16,1,.3,1),filter .45s ease}
.reading-page .cv-reading-swap>img:first-child{position:relative;opacity:1;transform:scale(1.01)}
.reading-page .cv-reading-swap .cv-reading-hover{opacity:0;transform:scale(1.12)}
.reading-page .cv-reading-swap .cv-reading-cart-hover{opacity:0;transform:scale(1.14);z-index:3}
.reading-page .reading-product:hover .cv-reading-swap>img:first-child{opacity:0;transform:scale(1.08)}
.reading-page .reading-product:hover .cv-reading-swap .cv-reading-hover{opacity:1;transform:scale(1.01)}
.reading-page .reading-product.cart-image-active .cv-reading-swap .cv-reading-hover{opacity:0;transform:scale(1.08)}
.reading-page .reading-product.cart-image-active .cv-reading-swap .cv-reading-cart-hover{opacity:1;transform:scale(1.01)}
/* The old expanding pseudo-element was clipping the label. This version
uses a fixed interaction rail, so ADD TO CART remains fully readable. */
.reading-page .add-cart-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:flex-start;gap:9px;width:165px;min-width:165px;height:46px;padding:0 12px 0 47px;border:1px solid rgba(40,103,255,.72);border-radius:3px 22px 22px 3px;background:transparent;color:var(--text);box-shadow:none;overflow:hidden;white-space:nowrap;font:800 12px/1 Inter,sans-serif;letter-spacing:.08em;transition:transform .3s ease,box-shadow .3s ease,color .25s ease,border-color .25s ease}
.reading-page .add-cart-btn::before{content:"";position:absolute;z-index:-1;left:-1px;top:-1px;width:42px;height:46px;border-radius:50%;background:#2867ff;transition:width .4s cubic-bezier(.16,1,.3,1),border-radius .4s ease}
.reading-page .add-cart-btn::after{content:"";position:absolute;z-index:0;left:17px;top:50%;width:9px;height:9px;border:1px solid rgba(255,255,255,.9);border-radius:50%;transform:translateY(-50%);box-shadow:0 0 0 5px rgba(255,255,255,.08);transition:transform .35s ease}
.reading-page .add-cart-btn b{position:relative;z-index:2;margin-left:auto;font-size:18px;line-height:1;color:#2867ff;transition:transform .35s ease,color .25s ease}
.reading-page .add-cart-btn span{position:relative;z-index:2}
.reading-page .add-cart-btn:hover,.reading-page .add-cart-btn:focus-visible{transform:translateY(-3px);box-shadow:0 12px 30px rgba(40,103,255,.2);color:#fff;border-color:#2867ff}
.reading-page .add-cart-btn:hover::before,.reading-page .add-cart-btn:focus-visible::before{width:100%;border-radius:3px 22px 22px 3px}
.reading-page .add-cart-btn:hover::after,.reading-page .add-cart-btn:focus-visible::after{transform:translateY(-50%) scale(1.25)}
.reading-page .add-cart-btn:hover b,.reading-page .add-cart-btn:focus-visible b{color:#fff;transform:rotate(90deg)}
.reading-page .add-cart-btn.added{color:#fff;border-color:#152a66;background:#152a66}
.reading-page .add-cart-btn.added::before{width:100%;border-radius:3px 22px 22px 3px;background:#152a66}
.reading-page .add-cart-btn.added b{color:#fff}
@media(max-width:600px){.reading-page .add-cart-btn{width:155px;min-width:155px;padding-left:44px;font-size:12px}.reading-page .add-cart-btn::after{left:15px}}
/* =========================================================
RESPONSIVE + ACCESSIBILITY FINAL PATCH
Breakpoints:
Mobile: < 640px
Tablet: 640px - 1024px
Desktop: 1024px - 1280px
Large: > 1280px
The tablet navigation deliberately switches to the menu at
<=1024px so the 1024px viewport never has a crowded navbar.
========================================================= */
html,
body {
max-width: 100%;
}
body {
overflow-x: hidden;
}
img {
height: auto;
}
:where(a, button, input, textarea, select):focus-visible {
outline: 2px solid #2867ff;
outline-offset: 3px;
}
.skip-link {
position: fixed;
left: 16px;
top: 10px;
z-index: 100000;
padding: 10px 15px;
border-radius: 999px;
background: #2867ff;
color: #fff;
font: 800 12px/1 Inter, sans-serif;
transform: translateY(-160%);
transition: transform .2s ease;
}
.skip-link:focus {
transform: translateY(0);
}
/* Laptop: 900-1024px — keep the full navigation visible (no hamburger) */
@media (min-width: 900px) and (max-width: 1024px) {
.site-header {
padding: 6px 8px;
}
.navbar {
width: calc(100vw - 16px);
min-height: 62px;
padding: 0 10px;
gap: 6px;
border-radius: 17px;
}
/* Full desktop navigation: all primary menu items stay on one row. */
.nav-menu {
position: static !important;
width: auto !important;
height: auto !important;
max-height: none !important;
padding: 0 !important;
margin: 0 4px;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
flex: 1 1 auto;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0;
overflow: visible !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
}
.nav-link {
min-height: 44px;
padding: 0 6px;
gap: 3px;
font-size: 12px;
letter-spacing: -.01em;
}
.dropdown-trigger {
width: auto !important;
justify-content: center !important;
}
.nav-dropdown {
width: auto;
flex: 0 0 auto;
}
.dropdown-menu {
position: absolute;
width: 245px;
top: calc(100% + 8px);
}
.nav-actions {
gap: 4px;
margin-left: 0;
flex: 0 0 auto;
}
[dir="rtl"] .nav-actions {
margin-right: 0;
}
.cart-nav-btn,
.icon-btn {
width: 36px;
height: 36px;
min-height: 36px;
flex: 0 0 36px;
}
.language-btn {
min-width: 45px;
height: 36px;
padding: 0 8px;
font-size: 12px;
}
.login-btn {
min-height: 36px;
height: 36px;
padding: 0 11px;
gap: 5px;
font-size: 12px;
white-space: nowrap;
}
.login-btn span {
display: inline;
}
.menu-toggle {
display: none !important;
}
/* Slightly tighter branding so the complete menu has room. */
.brand {
gap: 7px;
}
.brand-text strong {
font-size: 14px;
}
.brand-text small {
font-size: 12px;
letter-spacing: 2px;
}
}
/* 640-767px */
@media (min-width: 640px) and (max-width: 767px) {
.site-header {
padding: 6px;
}
.navbar {
min-height: 62px;
padding: 0 12px;
gap: 6px;
}
.nav-menu {
top: 72px;
left: 6px;
right: 6px;
width: auto;
height: calc(100svh - 80px);
max-height: none;
transform: translateY(-14px);
}
.nav-menu.open {
transform: translateY(0);
}
.login-btn span {
display: none;
}
.login-btn,
.icon-btn,
.menu-toggle,
.cart-nav-btn {
width: 38px;
height: 38px;
min-height: 38px;
}
}
/* Mobile: 320-639px */
@media (max-width: 639px) {
.site-header {
width: 100%;
padding: 5px;
}
.navbar {
width: calc(100vw - 10px);
max-width: calc(100vw - 10px);
min-height: 60px;
padding: 0 9px;
gap: 4px;
}
.brand {
min-width: 0;
}
.brand-text {
min-width: 0;
}
.brand-text strong {
font-size: 13px;
}
.brand-text small {
font-size: 12px;
letter-spacing: 2px;
}
.nav-actions {
gap: 4px;
}
.language-btn {
min-width: 37px;
width: 37px;
padding: 0;
}
.login-btn,
.icon-btn,
.menu-toggle,
.cart-nav-btn {
width: 37px;
height: 37px;
min-height: 37px;
flex: 0 0 37px;
}
.nav-menu {
top: 70px;
left: 5px;
right: 5px;
width: auto;
height: calc(100svh - 77px);
max-height: none;
padding: 20px 16px;
border-radius: 17px;
}
.nav-link {
min-height: 51px;
font-size: 14px;
}
.dropdown-item {
padding: 11px 7px 11px 20px;
}
[dir="rtl"] .dropdown-item {
padding: 11px 20px 11px 7px;
}
.hero-title,
.lx-title,
.et-hero h1 {
overflow-wrap: anywhere;
word-break: normal;
}
.footer-inner {
grid-template-columns: 1fr;
}
.cart-toast {
max-width: calc(100vw - 24px);
}
}
/* Avoid accidental horizontal overflow from decorative artwork. */
@media (max-width: 1024px) {
[class*="hero"],
[class*="section"],
[class*="stage"],
[class*="grid"] {
max-width: 100%;
}
.ambient {
max-width: none;
}
}
/* Reduced motion: keep the interface usable without animation. */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto !important;
}
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
/* Contact pages: sticky navbar + full laptop navigation */
@media (min-width: 900px) and (max-width: 1024px) {
body.contact-page > .navbar,
body.contact-lenses-page > .navbar {
position: sticky !important;
top: 0 !important;
width: calc(100vw - 16px) !important;
margin: 0 8px !important;
}
}
/* Lenses uses a custom navbar selector; keep it sticky instead of fixed. */
.lenses-page .navbar {
position: sticky !important;
top: 0 !important;
left: auto !important;
right: auto !important;
}
/* =========================================================
FINAL CONTACT NAV FIX — TRUE STICKY/VISIBLE BEHAVIOUR
contact.html + contact-lenses.html
Keeps the navbar visible while scrolling and above all
animated/transforming page layers. Responsive menu stays
compatible with the existing desktop/mobile navigation.
========================================================= */
body.contact-page > .navbar,
body.contact-lenses-page > .navbar {
position: fixed !important;
top: 10px !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
width: min(1380px, calc(100% - 28px)) !important;
margin: 0 !important;
z-index: 99999 !important;
isolation: isolate;
}
/* Do not let page animations/transforms push the navigation
behind the hero or other full-screen sections. */
body.contact-page > .navbar,
body.contact-lenses-page > .navbar,
body.contact-page > .navbar * ,
body.contact-lenses-page > .navbar * {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
/* Give the fixed navbar a solid glass layer so text remains
readable over every contact-page background. */
body.contact-page > .navbar::before,
body.contact-lenses-page > .navbar::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--header-bg);
border: 1px solid rgba(255,255,255,.06);
box-shadow: 0 16px 50px rgba(0,0,0,.22);
z-index: -1;
pointer-events: none;
}
/* The navbar itself should not inherit an accidental transform
from page animation rules; only the centering transform above
is required. */
body.contact-page > .navbar .nav-menu,
body.contact-lenses-page > .navbar .nav-menu {
transform: none;
}
/* ---------- Laptop / tablet: keep every menu item visible ---------- */
@media (min-width: 900px) and (max-width: 1024px) {
body.contact-page > .navbar,
body.contact-lenses-page > .navbar {
top: 8px !important;
left: 8px !important;
transform: none !important;
width: calc(100% - 16px) !important;
margin: 0 !important;
}
}
/* ---------- Mobile: compact fixed navbar + existing hamburger ---------- */
@media (max-width: 899px) {
body.contact-page > .navbar,
body.contact-lenses-page > .navbar {
top: 8px !important;
left: 8px !important;
transform: none !important;
width: calc(100% - 16px) !important;
margin: 0 !important;
}
body.contact-page > .navbar .nav-menu,
body.contact-lenses-page > .navbar .nav-menu {
transform: translateY(-8px);
}
body.contact-page > .navbar .nav-menu.open,
body.contact-lenses-page > .navbar .nav-menu.open {
transform: translateY(0);
}
}
/* ---------- Small phones ---------- */
@media (max-width: 520px) {
body.contact-page > .navbar,
body.contact-lenses-page > .navbar {
top: 6px !important;
left: 6px !important;
width: calc(100% - 12px) !important;
}
}
/* =========================================================
CLEARVISION GLOBAL POLISH — ALL PAGES
1) Strong light-mode contrast
2) Two-font system: Manrope headings / DM Sans content
3) More readable small text
4) Consistent section rhythm
5) Sticky navigation on every page
6) Compact 10–20px button corners
========================================================= */
:root {
--cv-heading-font: "Manrope", sans-serif;
--cv-content-font: "DM Sans", sans-serif;
--cv-section-space: clamp(72px, 7vw, 104px);
--cv-small-size: 14px;
--cv-body-size: 16px;
}
/* ---------- TWO FONT FAMILIES ONLY ---------- */
html body,
html body input,
html body textarea,
html body select,
html body button {
font-family: var(--cv-content-font) !important;
}
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .brand-text strong,
html body .section-title,
html body .hero-title,
html body .lx-title,
html body .et-hero h1,
html body .frames-page .fx-title,
html body .frames-page .fx-copy h2 {
font-family: var(--cv-heading-font) !important;
}
/* ---------- HEADING SCALE: SLIGHTLY SMALLER ---------- */
html body h1 { font-size: clamp(36px, 5.4vw, 72px) !important; }
html body h2 { font-size: clamp(30px, 4.1vw, 54px) !important; }
html body h3 { font-size: clamp(20px, 2vw, 28px) !important; }
html body h4 { font-size: clamp(17px, 1.45vw, 21px) !important; }
/* Keep compact labels from becoming oversized headings. */
html body .eyebrow,
html body .section-kicker,
html body .section-label,
html body .overline,
html body .tag,
html body .badge-label {
font-family: var(--cv-content-font) !important;
font-size: 12px !important;
letter-spacing: .14em;
}
/* ---------- BODY / SMALL TEXT: MORE READABLE ---------- */
html body p,
html body li,
html body label,
html body input,
html body textarea,
html body select,
html body .description,
html body .desc,
html body .subtitle,
html body .body-copy,
html body .card-copy {
font-family: var(--cv-content-font) !important;
font-size: var(--cv-body-size) !important;
line-height: 1.65 !important;
}
html body small,
html body .small,
html body .meta,
html body .caption,
html body .micro,
html body .fine-print {
font-family: var(--cv-content-font) !important;
font-size: var(--cv-small-size) !important;
line-height: 1.5 !important;
}
/* ---------- LIGHT MODE: DARKER, CLEARER TEXT ---------- */
html[data-theme="light"] body {
color: #101a2b !important;
}
html[data-theme="light"] body p,
html[data-theme="light"] body li,
html[data-theme="light"] body label,
html[data-theme="light"] body .description,
html[data-theme="light"] body .desc,
html[data-theme="light"] body .subtitle,
html[data-theme="light"] body .body-copy,
html[data-theme="light"] body .card-copy,
html[data-theme="light"] body small,
html[data-theme="light"] body .small,
html[data-theme="light"] body .meta,
html[data-theme="light"] body .caption,
html[data-theme="light"] body .micro,
html[data-theme="light"] body .fine-print,
html[data-theme="light"] body .nav-link,
html[data-theme="light"] body .dropdown-item,
html[data-theme="light"] body .footer-link {
color: #26364f !important;
opacity: 1 !important;
}
html[data-theme="light"] body h1,
html[data-theme="light"] body h2,
html[data-theme="light"] body h3,
html[data-theme="light"] body h4,
html[data-theme="light"] body h5,
html[data-theme="light"] body h6,
html[data-theme="light"] body strong,
html[data-theme="light"] body b {
color: #0a1427 !important;
opacity: 1 !important;
}
/* Common light cards/panels should never use washed-out text. */
html[data-theme="light"] body .card,
html[data-theme="light"] body .info-card,
html[data-theme="light"] body .feature-card,
html[data-theme="light"] body .glass-card,
html[data-theme="light"] body .content-card,
html[data-theme="light"] body .panel {
color: #18263b !important;
}
html[data-theme="light"] body .card p,
html[data-theme="light"] body .info-card p,
html[data-theme="light"] body .feature-card p,
html[data-theme="light"] body .glass-card p,
html[data-theme="light"] body .content-card p,
html[data-theme="light"] body .panel p {
color: #344660 !important;
}
/* ---------- EQUAL SECTION RHYTHM ---------- */
html body main > section {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
html body main > section + section {
margin-top: 0 !important;
}
/* Normalize only the outer vertical rhythm; inner component spacing stays intact. */
html body main > section:not(.hero):not(.h2-hero):not(.final-cta):not(.h2-final-cta) {
padding-top: var(--cv-section-space) !important;
padding-bottom: var(--cv-section-space) !important;
}
/* ---------- EVERY NAVBAR STAYS STICKY ---------- */
html body .site-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 99999 !important;
}
html body .navbar {
position: sticky !important;
top: 0 !important;
z-index: 100000 !important;
}
/* Pages where the navbar is directly under body. */
html body > .navbar {
position: fixed !important;
top: 10px !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
width: min(1380px, calc(100% - 28px)) !important;
z-index: 100000 !important;
}
/* ---------- BUTTONS: 10–20PX RADIUS, NEVER OVAL ---------- */
html body .btn,
html body a.btn,
html body button.btn,
html body .cta-btn,
html body .primary-btn,
html body .secondary-btn,
html body .login-btn,
html body .liquid-btn,
html body .action-btn,
html body a[class*="button"],
html body button[class*="button"] {
border-radius: 14px !important;
}
/* Preserve genuinely circular controls. */
html body .icon-btn,
html body .theme-toggle,
html body .cart-btn,
html body .back-to-top,
html body .top-button,
html body .cursor,
html body .cursor-follower,
html body [class*="orbit"],
html body [class*="dot"] {
border-radius: 50% !important;
}
/* ---------- RESPONSIVE SMALL-TEXT FLOOR ---------- */
@media (max-width: 900px) {
html body p,
html body li,
html body label,
html body .description,
html body .desc,
html body .subtitle,
html body .body-copy,
html body .card-copy {
font-size: 15.5px !important;
}
html body small,
html body .small,
html body .meta,
html body .caption,
html body .micro,
html body .fine-print {
font-size: 13.5px !important;
}
}
@media (max-width: 600px) {
html body p,
html body li,
html body label,
html body .description,
html body .desc,
html body .subtitle,
html body .body-copy,
html body .card-copy {
font-size: 15px !important;
}
html body small,
html body .small,
html body .meta,
html body .caption,
html body .micro,
html body .fine-print {
font-size: 13px !important;
}
html body > .navbar {
top: 6px !important;
left: 6px !important;
transform: none !important;
width: calc(100% - 12px) !important;
}
}
/* =========================================================
FINAL NAVBAR FIX — FRAMES + LENSES
Clean desktop alignment and true sticky navigation.
========================================================= */
.frames-page > .navbar,
.lenses-page > .navbar {
position: -webkit-sticky !important;
position: sticky !important;
top: 0 !important;
left: auto !important;
right: auto !important;
transform: none !important;
width: min(1380px, calc(100% - 28px)) !important;
margin: 0 auto !important;
z-index: 100000 !important;
box-sizing: border-box !important;
}
.frames-page > .navbar {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 12px !important;
}
.frames-page > .navbar .brand,
.lenses-page > .navbar .brand {
flex-shrink: 0 !important;
min-width: max-content !important;
}
.frames-page > .navbar .nav-menu,
.lenses-page > .navbar .nav-menu {
min-width: 0 !important;
width: auto !important;
flex: 1 1 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: nowrap !important;
gap: 0 !important;
overflow: visible !important;
transform: none !important;
}
.frames-page > .navbar .nav-link,
.lenses-page > .navbar .nav-link,
.frames-page > .navbar .dropdown-trigger,
.lenses-page > .navbar .dropdown-trigger {
white-space: nowrap !important;
padding-left: 7px !important;
padding-right: 7px !important;
font-size: 12px !important;
}
.frames-page > .navbar .nav-actions,
.lenses-page > .navbar .nav-actions {
flex-shrink: 0 !important;
white-space: nowrap !important;
}
/* At normal desktop widths, keep every primary link visible. */
@media (min-width: 1200px) {
.frames-page > .navbar .nav-menu,
.lenses-page > .navbar .nav-menu {
gap: 1px !important;
}
.frames-page > .navbar .nav-link,
.lenses-page > .navbar .nav-link,
.frames-page > .navbar .dropdown-trigger,
.lenses-page > .navbar .dropdown-trigger {
font-size: 12px !important;
padding-left: 6px !important;
padding-right: 6px !important;
}
}
/* Tablet/mobile: retain the existing hamburger behavior. */
@media (max-width: 899px) {
.frames-page > .navbar,
.lenses-page > .navbar {
width: calc(100% - 16px) !important;
margin: 0 8px !important;
}
.frames-page > .navbar {
display: flex !important;
}
.frames-page > .navbar .nav-menu,
.lenses-page > .navbar .nav-menu {
display: flex !important;
}
}
@media (max-width: 599px) {
.frames-page > .navbar,
.lenses-page > .navbar {
width: calc(100% - 12px) !important;
margin: 0 6px !important;
}
}
/* =========================================================
CLEAN STABLE GLOBAL UI LAYER
- One consistent sticky header
- No forced global section backgrounds
- No global typography inflation
- Rectangular action buttons only
========================================================= */
.site-header,
body > .navbar {
position: sticky !important;
top: 0 !important;
width: 100% !important;
left: auto !important;
right: auto !important;
margin: 0 !important;
padding: 8px 14px !important;
z-index: 5000 !important;
}
.site-header .navbar,
body > .navbar {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: min(1380px, 100%) !important;
margin: 0 auto !important;
min-height: 68px !important;
box-sizing: border-box !important;
}
/* Prevent the mobile-only login row from ever appearing on desktop. */
.mobile-nav-login { display: none !important; }
/* Keep navigation readable without making it oversized. */
.nav-link { font-size: 13px !important; font-weight: 600 !important; }
.nav-menu { gap: 2px !important; }
.nav-actions { gap: 7px !important; }
/* Lenses uses the same navbar as every other page. */
.lenses-page > .navbar {
position: sticky !important;
top: 0 !important;
left: auto !important;
right: auto !important;
width: 100% !important;
margin: 0 !important;
padding: 8px 14px !important;
z-index: 5000 !important;
}
.lenses-page > .navbar .nav-menu { gap: 2px !important; }
/* Frames uses the same stable flow as the other pages. */
.frames-page > .navbar,
.contact-page > .navbar,
.contact-lenses-page > .navbar {
position: sticky !important;
top: 0 !important;
left: auto !important;
right: auto !important;
width: 100% !important;
margin: 0 !important;
padding: 8px 14px !important;
z-index: 5000 !important;
}
/* Do not let the navbar hide hero content when it enters the sticky state. */
main { scroll-margin-top: 0; }
/* Moderate supporting-text readability. Only genuinely small utility text is raised. */
.eyebrow,
.drop-number,
.dropdown-item small,
.brand-text small,
.scroll-indicator,
.hero-stat span,
.image-label small,
.section-kicker,
.section-label,
.meta-label,
.card-label,
.footer-note {
font-size: max(12px, 1em) !important;
}
/* Buttons: clean rectangles, not stretched pills. */
.primary-btn,
.secondary-btn,
.line-btn,
.login-btn,
.liquid-btn,
.action-btn,
.cta-btn,
.reading-liquid-btn,
.reading-action-btn {
border-radius: 12px !important;
}
/* Keep true circular icon controls circular. */
.icon-btn,
.cart-nav-btn,
.menu-toggle,
.back-to-top,
.theme-toggle,
.pulse-ring,
.cursor,
.cursor-follower { border-radius: 50% !important; }
/* Tablet/mobile: preserve the original hamburger behavior. */
@media (max-width: 899px) {
.site-header,
body > .navbar,
.frames-page > .navbar,
.lenses-page > .navbar,
.contact-page > .navbar,
.contact-lenses-page > .navbar {
padding: 7px !important;
}
.site-header .navbar,
body > .navbar {
min-height: 64px !important;
width: 100% !important;
}
.nav-menu {
position: absolute !important;
top: calc(100% + 8px) !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
}
.mobile-nav-login { display: flex !important; }
}
@media (max-width: 599px) {
.site-header,
body > .navbar,
.frames-page > .navbar,
.lenses-page > .navbar,
.contact-page > .navbar,
.contact-lenses-page > .navbar {
padding: 5px !important;
}
}
/* =========================================================
HOME 1 — CLEAN HERO POLISH
Scoped only to .home1-page so other pages are untouched.
========================================================= */
/* Animated optical atmosphere behind the hero. */
.home1-page .hero {
isolation: isolate;
}
.home1-page .hero::before {
content: "";
position: absolute;
inset: -18%;
z-index: 0;
pointer-events: none;
background:
radial-gradient(circle at 78% 35%, rgba(40,103,255,.18), transparent 27%),
radial-gradient(circle at 58% 78%, rgba(124,77,255,.13), transparent 25%),
radial-gradient(circle at 16% 22%, rgba(0,188,212,.09), transparent 22%);
filter: blur(8px);
animation: cvHome1Atmosphere 14s ease-in-out infinite alternate;
}
.home1-page .hero-grid,
.home1-page .hero-content,
.home1-page .hero-visual,
.home1-page .scroll-indicator {
position: relative;
z-index: 2;
}
.home1-page .hero-orbit {
z-index: 1;
opacity: .8;
}
@keyframes cvHome1Atmosphere {
0% { transform: translate3d(-1%,0,0) scale(1); opacity: .72; }
50% { transform: translate3d(1.5%,-1%,0) scale(1.04); opacity: .95; }
100% { transform: translate3d(-.5%,1%,0) scale(1.08); opacity: .78; }
}
/* Labels are outside .hero-image-wrap, so overflow:hidden can never crop them. */
.home1-page .hero-visual {
overflow: visible;
}
.home1-page .hero-visual .image-label {
z-index: 5;
position: absolute;
right: -8px;
top: 18%;
max-width: 205px;
color: #f4f7ff;
background: rgba(7,17,38,.88);
border: 1px solid rgba(255,255,255,.18);
box-shadow: 0 18px 42px rgba(4,12,30,.24);
}
.home1-page .hero-visual .image-label.label-bottom {
left: -12px;
right: auto;
top: auto;
bottom: 15%;
}
.home1-page .hero-visual .image-label strong {
font-size: 13px;
line-height: 1.25;
}
.home1-page .hero-visual .image-label small {
font-size: 12px;
line-height: 1.35;
}
/* Light mode: readable dark text on the light hero; keep blue CTA text treatment intact. */
html[data-theme="light"] .home1-page .hero {
background:
linear-gradient(135deg,#f3f7ff 0%,#eef4ff 55%,#f1edff 100%);
color: #0a1427;
}
html[data-theme="light"] .home1-page .hero-title,
html[data-theme="light"] .home1-page .hero-content .hero-stat strong {
color: #0a1427 !important;
}
html[data-theme="light"] .home1-page .hero-title span {
color: #2867ff !important;
}
html[data-theme="light"] .home1-page .hero-description,
html[data-theme="light"] .home1-page .hero-stat span,
html[data-theme="light"] .home1-page .eyebrow,
html[data-theme="light"] .home1-page .scroll-indicator {
color: #26364f !important;
}
html[data-theme="light"] .home1-page .hero-stats {
border-top-color: rgba(20,42,78,.14);
}
html[data-theme="light"] .home1-page .line-btn {
color: #10213f !important;
border-color: rgba(20,42,78,.20);
background: rgba(255,255,255,.34);
}
html[data-theme="light"] .home1-page .line-btn:hover {
color: #2867ff !important;
background: rgba(40,103,255,.08);
}
html[data-theme="light"] .home1-page .hero-visual .image-label {
color: #0a1427;
background: rgba(255,255,255,.94);
border-color: rgba(20,42,78,.13);
box-shadow: 0 18px 42px rgba(30,55,100,.16);
}
html[data-theme="light"] .home1-page .hero-visual .image-label strong {
color: #0a1427 !important;
}
html[data-theme="light"] .home1-page .hero-visual .image-label small {
color: #344660 !important;
}
html[data-theme="light"] .home1-page .hero-visual .label-icon {
color: #2867ff;
}
/* Give the tiny hero utility text a useful minimum without enlarging headings. */
.home1-page .hero-stat span,
.home1-page .image-label small,
.home1-page .scroll-indicator {
font-size: 12px !important;
}
@media (max-width: 1000px) {
.home1-page .hero-visual .image-label.label-top {
right: 4px;
}
.home1-page .hero-visual .image-label.label-bottom {
left: 4px;
}
}
@media (max-width: 700px) {
.home1-page .hero-visual {
min-height: 540px;
}
.home1-page .hero-visual .image-label {
padding: 10px 12px;
max-width: 175px;
}
.home1-page .hero-visual .image-label.label-top {
top: 12%;
right: 0;
}
.home1-page .hero-visual .image-label.label-bottom {
bottom: 10%;
left: 0;
}
}
@media (max-width: 520px) {
.home1-page .hero-visual .image-label {
position: absolute;
transform: scale(.92);
transform-origin: center;
}
.home1-page .hero-visual .image-label.label-top {
right: -2px;
}
.home1-page .hero-visual .image-label.label-bottom {
left: -2px;
}
}
@media (prefers-reduced-motion: reduce) {
.home1-page .hero::before {
animation: none;
}
}
/* =========================================================
HOME 1 HERO — COMPOSED TWO-COLUMN HERO
Keeps copy and image together in one visual section.
========================================================= */
.home1-page .hero{
grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr);
align-items:center;
gap:clamp(30px,4vw,72px);
min-height:calc(100vh - 88px);
padding-top:72px;
padding-bottom:72px;
}
.home1-page .hero-content{
grid-column:1;
grid-row:1;
max-width:620px;
z-index:4;
}
.home1-page .hero-visual{
grid-column:2;
grid-row:1;
min-height:620px;
height:620px;
z-index:3;
}
/* Do not let JS parallax fight the floating animation. */
.home1-page .hero-image-wrap{
width:min(500px,88%);
height:570px;
transform:rotate(2deg);
border:1px solid rgba(255,255,255,.30);
box-shadow:
0 0 0 1px rgba(255,255,255,.08) inset,
0 22px 70px rgba(0,0,0,.34),
0 0 55px rgba(70,110,255,.16);
}
/* Glass edge + soft reflective rim. */
.home1-page .hero-image-wrap::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
background:linear-gradient(135deg,rgba(255,255,255,.34),transparent 24%,transparent 68%,rgba(130,170,255,.16));
border:1px solid rgba(255,255,255,.22);
box-shadow:inset 0 0 35px rgba(255,255,255,.08);
}
.home1-page .hero-image-wrap img{
position:relative;
z-index:1;
}
/* Animated optical background, kept inside the hero only. */
.home1-page .hero::before{
content:"";
position:absolute;
inset:-20%;
z-index:0;
pointer-events:none;
background:
radial-gradient(circle at 72% 42%,rgba(40,103,255,.18),transparent 28%),
radial-gradient(circle at 20% 70%,rgba(90,75,255,.12),transparent 24%);
animation:home1HeroGlow 10s ease-in-out infinite alternate;
}
.home1-page .hero::after{
content:"";
position:absolute;
width:560px;
height:560px;
right:-170px;
top:-170px;
border:1px solid rgba(70,110,255,.18);
border-radius:50%;
box-shadow:0 0 0 80px rgba(70,110,255,.035),0 0 0 160px rgba(70,110,255,.025);
pointer-events:none;
animation:home1OrbitFloat 12s ease-in-out infinite;
}
@keyframes home1HeroGlow{
0%{transform:translate3d(-1%,0,0) scale(1)}
100%{transform:translate3d(2%,1%,0) scale(1.06)}
}
@keyframes home1OrbitFloat{
0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
50%{transform:translate3d(-24px,18px,0) rotate(7deg)}
}
html[data-theme="light"] .home1-page .hero::before{
background:
radial-gradient(circle at 72% 42%,rgba(40,103,255,.13),transparent 28%),
radial-gradient(circle at 20% 70%,rgba(90,75,255,.09),transparent 24%);
}
html[data-theme="light"] .home1-page .hero-image-wrap{
border-color:rgba(30,55,100,.22);
box-shadow:0 0 0 1px rgba(255,255,255,.72) inset,0 22px 70px rgba(30,55,100,.18),0 0 55px rgba(70,110,255,.13);
}
html[data-theme="light"] .home1-page .hero-image-wrap::after{
border-color:rgba(255,255,255,.68);
background:linear-gradient(135deg,rgba(255,255,255,.55),transparent 25%,transparent 68%,rgba(100,145,255,.10));
}
@media (max-width:1199px) and (min-width:900px){
.home1-page .hero{gap:28px;padding-left:5vw;padding-right:5vw}
.home1-page .hero-image-wrap{height:530px;width:min(450px,94%)}
.home1-page .hero-visual{height:570px;min-height:570px}
}
@media (max-width:899px){
.home1-page .hero{
grid-template-columns:1fr;
gap:20px;
padding-top:70px;
}
.home1-page .hero-content,
.home1-page .hero-visual{grid-column:1;grid-row:auto}
.home1-page .hero-visual{height:520px;min-height:520px;margin-top:0}
.home1-page .hero-image-wrap{height:480px;width:min(430px,88%)}
}
@media (max-width:520px){
.home1-page .hero{padding-top:55px;padding-bottom:65px}
.home1-page .hero-visual{height:455px;min-height:455px}
.home1-page .hero-image-wrap{height:415px;width:88%}
}
@media (prefers-reduced-motion:reduce){
.home1-page .hero::before,
.home1-page .hero::after{animation:none}
}
/* =========================================================
TARGETED REQUESTED FIXES — HOME 1 + FRAMES ONLY
========================================================= */
/* Home 1: make the story image label readable in light mode. */
.home1-page .story-media-label{
color:#071126;
text-shadow:none;
background:rgba(255,255,255,.78);
border:1px solid rgba(7,17,38,.12);
border-radius:16px;
padding:13px 17px;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}
.home1-page .story-media-label span{
color:#245fdc;
font-size:12px;
}
.home1-page .story-media-label strong{
color:#071126;
}
/* Keep dark mode intentionally light on the dark image. */
[data-theme="dark"] .home1-page .story-media-label{
color:#fff;
background:rgba(7,17,38,.68);
border-color:rgba(255,255,255,.16);
text-shadow:0 2px 18px rgba(0,0,0,.4);
}
[data-theme="dark"] .home1-page .story-media-label strong{color:#fff}
/* Requested larger Precision optics / clarity in motion note. */
.home1-page .lens-tech-note{
font-size:13px;
line-height:1.25;
padding:9px 13px;
gap:10px;
}
/* Requested larger button text, Home 1 only. */
.home1-page .primary-btn,
.home1-page .line-btn{
font-size:16px;
font-weight:800;
}
/* Frames category cards: richer hover interaction without changing layout. */
.frames-page .frame-item .frame-image::after{
position:absolute;
inset:0;
display:flex;
align-items:flex-end;
justify-content:flex-start;
padding:0 22px 22px;
box-sizing:border-box;
color:#fff;
font:700 14px/1.2 "Manrope",sans-serif;
letter-spacing:.01em;
background:linear-gradient(to top,rgba(7,17,38,.72),transparent 42%);
opacity:0;
transform:translateY(10px);
transition:opacity .4s ease,transform .5s ease;
pointer-events:none;
z-index:2;
}
.frames-page .frame-item:nth-child(1) .frame-image::after{content:"Explore Reading"}
.frames-page .frame-item:nth-child(2) .frame-image::after{content:"Explore Sunglasses"}
.frames-page .frame-item:nth-child(3) .frame-image::after{content:"Explore Sports"}
.frames-page .frame-item:nth-child(4) .frame-image::after{content:"Explore Kids"}
.frames-page .frame-item:hover .frame-image::after,
.frames-page .frame-item:focus-visible .frame-image::after{
opacity:1;
transform:translateY(0);
}
.frames-page .frame-item:hover .frame-image{
box-shadow:0 20px 55px rgba(31,92,255,.18);
}
.frames-page .frame-item:hover .frame-number{
transform:translateY(-3px);
transition:transform .35s ease;
}
/* Requested larger Precision in Optics / Clarity in Motion style heading copy
wherever these phrases are rendered in Home 1. */
.home1-page .lens-tech-note{
letter-spacing:.09em;
}
/* Keep the requested text readable on smaller screens too. */
@media (max-width:600px){
.home1-page .story-media-label{padding:10px 12px}
.home1-page .story-media-label span{font-size:12px}
.home1-page .story-media-label strong{font-size:20px}
.home1-page .lens-tech-note{font-size:10px}
.home1-page .primary-btn,
.home1-page .line-btn{font-size:15px}
}
/* =========================================================
CLEARVISION AUTH PAGES
LOGIN + SIGNUP / RESPONSIVE + REVEAL / JOINING CARDS
========================================================= */
.auth-page {
min-height: 100svh;
position: relative;
overflow: hidden;
display: grid;
place-items: center;
padding: 118px 22px 60px;
background:
radial-gradient(circle at 8% 15%, rgba(40,103,255,.22), transparent 32%),
radial-gradient(circle at 92% 82%, rgba(104,74,255,.20), transparent 34%),
linear-gradient(135deg, #061126 0%, #0a1735 48%, #10183a 100%);
}
.auth-page::before,
.auth-page::after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(4px);
}
.auth-page::before {
width: 360px;
height: 360px;
top: -160px;
right: 8%;
background: radial-gradient(circle, rgba(68,135,255,.30), transparent 68%);
animation: authOrb 11s ease-in-out infinite alternate;
}
.auth-page::after {
width: 420px;
height: 420px;
bottom: -210px;
left: 4%;
background: radial-gradient(circle, rgba(117,77,255,.24), transparent 68%);
animation: authOrb 14s ease-in-out infinite alternate-reverse;
}
.auth-particles {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.auth-particles span {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(255,255,255,.55);
box-shadow: 0 0 18px rgba(91,151,255,.85);
animation: authParticle 8s linear infinite;
}
.auth-particles span:nth-child(1){left:8%;top:28%;animation-delay:-2s}
.auth-particles span:nth-child(2){left:18%;top:74%;animation-delay:-6s}
.auth-particles span:nth-child(3){left:34%;top:13%;animation-delay:-4s}
.auth-particles span:nth-child(4){left:61%;top:20%;animation-delay:-7s}
.auth-particles span:nth-child(5){left:76%;top:70%;animation-delay:-3s}
.auth-particles span:nth-child(6){left:89%;top:35%;animation-delay:-5s}
.auth-shell {
width: min(1080px, 100%);
position: relative;
z-index: 2;
}
.auth-brand-mark {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
margin-bottom: 18px;
color: rgba(255,255,255,.9);
font-size: 12px;
font-weight: 900;
letter-spacing: .24em;
text-transform: uppercase;
animation: authDrop .8s var(--ease) both;
}
.auth-brand-mark i {
width: 25px;
height: 15px;
border: 2px solid #62a0ff;
border-radius: 50%;
position: relative;
display: block;
}
.auth-brand-mark i::after {
content: "";
position: absolute;
width: 7px;
height: 2px;
left: 7px;
top: 4px;
background: #62a0ff;
}
.auth-card-stage {
position: relative;
min-height: 650px;
display: grid;
grid-template-columns: 1fr 1fr;
border-radius: 38px;
padding: 10px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18);
box-shadow:
0 35px 110px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.18);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
isolation: isolate;
animation: authStageIn 1s var(--ease) .12s both;
}
.auth-card-stage::before {
content: "";
position: absolute;
width: 310px;
height: 310px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
background: rgba(40,103,255,.22);
filter: blur(60px);
z-index: -1;
animation: authGlow 5s ease-in-out infinite;
}
.auth-panel {
position: relative;
min-width: 0;
border-radius: 31px;
overflow: hidden;
}
.auth-visual {
padding: clamp(34px,5vw,66px);
color: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
background:
linear-gradient(145deg, rgba(40,103,255,.98), rgba(20,42,105,.96) 58%, rgba(9,18,48,.98));
box-shadow: 0 18px 55px rgba(4,14,42,.30);
transform: translateX(-20px);
opacity: 0;
animation: authPanelLeft .95s var(--ease) .45s forwards;
}
.auth-panel-form {
background: rgba(255,255,255,.98);
color: var(--text);
padding: clamp(34px,5vw,64px);
transform: translateX(20px);
opacity: 0;
animation: authPanelRight .95s var(--ease) .55s forwards;
}
[data-theme="dark"] .auth-panel-form {
background: #101a30;
color: #f4f7ff;
}
.auth-eyebrow {
display: inline-flex;
width: fit-content;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,.11);
border: 1px solid rgba(255,255,255,.18);
font-size: 12px;
font-weight: 900;
letter-spacing: .16em;
text-transform: uppercase;
}
.auth-eyebrow::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #75b4ff;
box-shadow: 0 0 15px #75b4ff;
animation: authPulse 1.8s ease-in-out infinite;
}
.auth-visual h1 {
max-width: 430px;
margin: 26px 0 16px;
font-family: "Space Grotesk", sans-serif;
font-size: clamp(42px, 6vw, 76px);
line-height: .91;
letter-spacing: -.055em;
}
.auth-visual h1 span {
color: #9ac5ff;
}
.auth-visual p {
max-width: 410px;
margin: 0;
color: rgba(255,255,255,.72);
font-size: 14px;
line-height: 1.75;
}
.auth-feature-list {
display: grid;
gap: 11px;
margin-top: 30px;
}
.auth-feature {
display: flex;
align-items: center;
gap: 11px;
padding: 11px 13px;
border-radius: 15px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.10);
font-size: 12px;
font-weight: 700;
transform: translateY(12px);
opacity: 0;
animation: authFeature .65s var(--ease) forwards;
}
.auth-feature:nth-child(1){animation-delay:.9s}
.auth-feature:nth-child(2){animation-delay:1.05s}
.auth-feature:nth-child(3){animation-delay:1.2s}
.auth-feature b {
width: 24px;
height: 24px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(255,255,255,.13);
color: #9ac5ff;
font-size: 12px;
}
.auth-glasses-art {
position: absolute;
right: -25px;
bottom: 50px;
width: 220px;
height: 95px;
opacity: .20;
transform: rotate(-8deg);
}
.auth-glasses-art::before,
.auth-glasses-art::after {
content: "";
position: absolute;
top: 15px;
width: 82px;
height: 58px;
border: 5px solid #fff;
border-radius: 24px 24px 35px 35px;
}
.auth-glasses-art::before { left: 5px; }
.auth-glasses-art::after { right: 5px; }
.auth-glasses-art span {
position: absolute;
width: 55px;
height: 5px;
background: #fff;
left: 82px;
top: 40px;
border-radius: 999px;
}
.auth-form-head {
margin-bottom: 28px;
}
.auth-form-head small {
color: var(--blue);
font-size: 12px;
font-weight: 900;
letter-spacing: .18em;
text-transform: uppercase;
}
.auth-form-head h2 {
margin: 9px 0 8px;
font-family: "Space Grotesk", sans-serif;
font-size: clamp(31px,4vw,48px);
line-height: .98;
letter-spacing: -.045em;
}
.auth-form-head p {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.6;
}
.auth-form {
display: grid;
gap: 16px;
}
.auth-field {
position: relative;
}
.auth-field label {
display: block;
margin: 0 0 7px;
color: var(--text);
font-size: 12px;
font-weight: 900;
}
[data-theme="dark"] .auth-field label {
color: #f0f4ff;
}
.auth-field input {
width: 100%;
height: 52px;
border: 1px solid #d8dfeb;
border-radius: 15px;
padding: 0 15px;
outline: none;
background: #f9fbff;
color: #142039;
transition:
border-color .3s ease,
box-shadow .3s ease,
transform .3s ease,
background .3s ease;
}
[data-theme="dark"] .auth-field input {
background: #0c1528;
color: #fff;
border-color: rgba(255,255,255,.12);
}
.auth-field input:focus {
border-color: var(--blue);
box-shadow: 0 0 0 4px rgba(40,103,255,.11);
transform: translateY(-1px);
background: var(--white);
}
.auth-field.has-icon input {
padding-right: 50px;
}
.auth-eye {
position: absolute;
right: 9px;
bottom: 8px;
width: 36px;
height: 36px;
border-radius: 10px;
display: grid;
place-items: center;
color: #71809a;
transition: .25s ease;
}
.auth-eye:hover {
color: var(--blue);
background: rgba(40,103,255,.08);
}
.auth-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: -2px;
font-size: 12px;
}
.auth-check {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--muted);
}
.auth-check input {
accent-color: var(--blue);
}
.auth-link {
color: var(--blue);
font-weight: 800;
}
.auth-submit {
position: relative;
width: 100%;
min-height: 54px;
margin-top: 3px;
border-radius: 16px;
overflow: hidden;
color: #fff;
background: linear-gradient(100deg, #2867ff, #5a7fff, #2867ff);
background-size: 200% 100%;
box-shadow: 0 14px 30px rgba(40,103,255,.24);
font-size: 13px;
font-weight: 900;
transition: transform .3s ease, box-shadow .3s ease;
animation: authButtonGradient 4s linear infinite;
}
.auth-submit::before {
content: "";
position: absolute;
inset: 0;
transform: translateX(-110%);
background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
animation: authShine 3.5s ease-in-out infinite;
}
.auth-submit:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(40,103,255,.34);
}
.auth-submit span {
position: relative;
z-index: 1;
}
.auth-message {
min-height: 19px;
margin: -2px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.5;
}
.auth-divider {
display: flex;
align-items: center;
gap: 10px;
color: #9aa6ba;
font-size: 12px;
font-weight: 900;
letter-spacing: .15em;
text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
content: "";
height: 1px;
flex: 1;
background: #e2e7ef;
}
[data-theme="dark"] .auth-divider::before,
[data-theme="dark"] .auth-divider::after {
background: rgba(255,255,255,.10);
}
.auth-switch {
text-align: center;
color: var(--muted);
font-size: 12px;
}
.auth-switch a {
color: var(--blue);
font-weight: 900;
}
.auth-back {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 17px;
color: var(--muted);
font-size: 12px;
font-weight: 800;
transition: .25s ease;
}
.auth-back:hover {
color: var(--blue);
transform: translateX(-3px);
}
/* Joining/reveal transition: panels visually pull together on load. */
.auth-card-stage.joined .auth-visual {
animation: authJoinLeft .9s var(--ease) forwards;
}
.auth-card-stage.joined .auth-panel-form {
animation: authJoinRight .9s var(--ease) .08s forwards;
}
.auth-card-stage.joined::after {
content: "";
position: absolute;
left: 50%;
top: 12%;
bottom: 12%;
width: 2px;
transform: translateX(-50%) scaleY(0);
background: linear-gradient(transparent, rgba(255,255,255,.75), transparent);
box-shadow: 0 0 25px rgba(111,170,255,.85);
animation: authSeam .85s var(--ease) .2s forwards;
z-index: 5;
pointer-events: none;
}
.auth-card-stage.leave {
animation: authLeave .65s var(--ease) forwards;
}
.auth-page .site-header {
z-index: 20;
}
@keyframes authStageIn {
from { opacity: 0; transform: translateY(35px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes authPanelLeft {
to { opacity: 1; transform: translateX(0); }
}
@keyframes authPanelRight {
to { opacity: 1; transform: translateX(0); }
}
@keyframes authJoinLeft {
from { transform: translateX(0); }
to { transform: translateX(8px); }
}
@keyframes authJoinRight {
from { transform: translateX(0); }
to { transform: translateX(-8px); }
}
@keyframes authSeam {
to { transform: translateX(-50%) scaleY(1); }
}
@keyframes authGlow {
0%,100% { opacity: .45; transform: translate(-50%,-50%) scale(.85); }
50% { opacity: .95; transform: translate(-50%,-50%) scale(1.2); }
}
@keyframes authOrb {
to { transform: translate(55px,35px) scale(1.18); }
}
@keyframes authParticle {
0% { transform: translateY(30px) scale(.7); opacity: 0; }
15%,80% { opacity: .75; }
100% { transform: translateY(-150px) scale(1.15); opacity: 0; }
}
@keyframes authPulse {
0%,100% { transform: scale(.8); opacity: .6; }
50% { transform: scale(1.45); opacity: 1; }
}
@keyframes authDrop {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes authFeature {
to { opacity: 1; transform: translateY(0); }
}
@keyframes authButtonGradient {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
@keyframes authShine {
0%,45% { transform: translateX(-110%); }
65%,100% { transform: translateX(110%); }
}
@keyframes authLeave {
to { opacity: 0; transform: translateY(18px) scale(.98); }
}
@media (max-width: 900px) {
.auth-page {
padding: 105px 16px 40px;
}
.auth-card-stage {
grid-template-columns: 1fr;
min-height: auto;
border-radius: 30px;
}
.auth-visual {
min-height: 350px;
padding: 34px;
border-radius: 24px;
}
.auth-visual h1 {
font-size: clamp(40px, 9vw, 62px);
}
.auth-glasses-art {
bottom: 22px;
right: -12px;
transform: scale(.8) rotate(-8deg);
transform-origin: right bottom;
}
.auth-panel-form {
padding: 34px;
border-radius: 24px;
}
.auth-card-stage.joined .auth-visual,
.auth-card-stage.joined .auth-panel-form {
animation: none;
}
.auth-card-stage.joined::after {
display: none;
}
}
@media (max-width: 600px) {
.auth-page {
padding: 92px 11px 25px;
place-items: start center;
}
.auth-brand-mark {
margin-bottom: 13px;
font-size: 12px;
}
.auth-card-stage {
padding: 6px;
border-radius: 25px;
}
.auth-visual {
min-height: 320px;
padding: 27px 24px;
border-radius: 20px;
}
.auth-visual h1 {
margin-top: 20px;
font-size: clamp(38px, 13vw, 53px);
}
.auth-visual p {
font-size: 12px;
}
.auth-feature-list {
gap: 7px;
margin-top: 19px;
}
.auth-feature {
padding: 9px 10px;
font-size: 12px;
}
.auth-panel-form {
padding: 27px 22px;
border-radius: 20px;
}
.auth-form-head {
margin-bottom: 21px;
}
.auth-form-head h2 {
font-size: 34px;
}
.auth-form {
gap: 13px;
}
.auth-field input {
height: 50px;
}
.auth-row {
flex-wrap: wrap;
}
}
@media (max-width: 380px) {
.auth-visual {
min-height: 300px;
}
.auth-feature:nth-child(3) {
display: none;
}
.auth-panel-form {
padding: 24px 18px;
}
}
/* Extra responsive ranges requested for smaller/mobile/tablet/desktop widths. */
@media (min-width: 601px) and (max-width: 900px) {
.auth-page { padding-left: 20px; padding-right: 20px; }
.auth-visual { min-height: 360px; }
}
@media (min-width: 901px) and (max-width: 1500px) {
.auth-shell { width: min(1080px, calc(100% - 10px)); }
}
@media (prefers-reduced-motion: reduce) {
.auth-page *, .auth-page *::before, .auth-page *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* =========================================================
CLEARVISION AUTH FINAL OVERRIDES
Login + Signup | logo navigation | RTL | dark mode
========================================================= */
/* Auth page must never inherit low-contrast text in light mode. */
.auth-page {
color: #17233b;
background:
radial-gradient(circle at 8% 12%, rgba(52,118,255,.18), transparent 31%),
radial-gradient(circle at 92% 88%, rgba(91,87,255,.14), transparent 32%),
linear-gradient(135deg,#eef5ff 0%,#f8fbff 48%,#edf3ff 100%);
}
.auth-page .auth-brand-mark {
color: #14233e;
cursor: pointer;
user-select: none;
}
.auth-page .auth-brand-mark i {
border-color: #176bff;
box-shadow: 0 0 16px rgba(23,107,255,.25);
}
.auth-page .auth-brand-mark i::after {
background: #176bff;
}
.auth-page .auth-card-stage {
background: rgba(255,255,255,.70);
border-color: rgba(30,62,108,.18);
box-shadow: 0 35px 100px rgba(32,63,113,.20), inset 0 1px 0 rgba(255,255,255,.92);
}
.auth-page .auth-panel-form {
color: #17233b;
background: rgba(255,255,255,.98);
}
.auth-page .auth-form-head h2,
.auth-page .auth-field label {
color: #101c31;
}
.auth-page .auth-form-head p,
.auth-page .auth-message,
.auth-page .auth-switch,
.auth-page .auth-check,
.auth-page .auth-back {
color: #52627b;
}
.auth-page .auth-field input {
color: #101c31;
background: #f8fbff;
border-color: #cbd6e6;
font-size: 14px;
font-weight: 600;
}
.auth-page .auth-field input::placeholder {
color: #6a7890;
opacity: 1;
}
.auth-page .auth-field input:focus {
background: #fff;
border-color: #2867ff;
}
.auth-page .auth-link,
.auth-page .auth-switch a {
color: #155fe5;
}
.auth-page .auth-divider {
color: #71809a;
}
.auth-page .auth-divider::before,
.auth-page .auth-divider::after {
background: #d5deeb;
}
/* Logo is an actual navigation target. */
.auth-brand-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
color: inherit;
text-decoration: none;
}
.auth-brand-link:hover {
color: #176bff;
}
.auth-brand-link:focus-visible {
outline: 3px solid rgba(40,103,255,.25);
outline-offset: 6px;
border-radius: 8px;
}
/* RTL control + dark mode controls */
.auth-tools {
position: absolute;
top: 22px;
right: 24px;
z-index: 30;
display: flex;
align-items: center;
gap: 8px;
}
.auth-tool-btn {
min-width: 43px;
height: 40px;
padding: 0 11px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid rgba(28,57,98,.16);
border-radius: 12px;
background: rgba(255,255,255,.76);
color: #20304a;
box-shadow: 0 8px 25px rgba(20,44,82,.10);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
font-size: 12px;
font-weight: 900;
cursor: pointer;
transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.auth-tool-btn:hover {
transform: translateY(-2px);
color: #155fe5;
border-color: rgba(40,103,255,.35);
}
.auth-tool-btn .tool-icon {
font-size: 17px;
line-height: 1;
}
.auth-tool-btn .tool-label {
font-size: 12px;
letter-spacing: .05em;
}
.auth-tools .auth-tool-btn.active {
background: #155fe5;
color: #fff;
border-color: #155fe5;
}
.auth-theme-transition,
.auth-rtl-transition {
transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
/* Dark mode: intentionally larger and brighter typography. */
.auth-page.auth-dark {
color: #f4f7ff;
background:
radial-gradient(circle at 8% 12%, rgba(39,114,255,.27), transparent 32%),
radial-gradient(circle at 92% 88%, rgba(107,78,255,.24), transparent 34%),
linear-gradient(135deg,#061126 0%,#0b1834 48%,#111744 100%);
}
.auth-page.auth-dark .auth-brand-mark {
color: #f5f8ff;
}
.auth-page.auth-dark .auth-card-stage {
background: rgba(13,24,45,.72);
border-color: rgba(163,191,238,.22);
box-shadow: 0 35px 110px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.12);
}
.auth-page.auth-dark .auth-panel-form {
color: #f4f7ff;
background: rgba(14,25,46,.98);
}
.auth-page.auth-dark .auth-form-head h2,
.auth-page.auth-dark .auth-field label {
color: #f7f9ff;
}
.auth-page.auth-dark .auth-form-head h2 {
font-size: clamp(36px,4vw,52px);
}
.auth-page.auth-dark .auth-form-head p,
.auth-page.auth-dark .auth-message,
.auth-page.auth-dark .auth-switch,
.auth-page.auth-dark .auth-check,
.auth-page.auth-dark .auth-back {
color: #b9c6dc;
font-size: 13px;
}
.auth-page.auth-dark .auth-field label {
font-size: 12px;
}
.auth-page.auth-dark .auth-field input {
height: 54px;
color: #f7f9ff;
background: #0a152a;
border-color: rgba(181,202,239,.25);
font-size: 15px;
font-weight: 600;
}
.auth-page.auth-dark .auth-field input::placeholder {
color: #9aaac2;
opacity: 1;
}
.auth-page.auth-dark .auth-field input:focus {
background: #0c1931;
border-color: #4c8cff;
box-shadow: 0 0 0 4px rgba(76,140,255,.16);
}
.auth-page.auth-dark .auth-eye {
color: #b9c6dc;
}
.auth-page.auth-dark .auth-link,
.auth-page.auth-dark .auth-switch a {
color: #75adff;
font-size: 12px;
}
.auth-page.auth-dark .auth-divider {
color: #9eacc2;
font-size: 12px;
}
.auth-page.auth-dark .auth-divider::before,
.auth-page.auth-dark .auth-divider::after {
background: rgba(188,207,239,.18);
}
.auth-page.auth-dark .auth-tool-btn {
background: rgba(12,24,45,.86);
color: #eaf1ff;
border-color: rgba(173,198,239,.23);
box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.auth-page.auth-dark .auth-tool-btn:hover {
color: #8fc0ff;
border-color: rgba(110,163,255,.48);
}
.auth-page.auth-dark .auth-tool-btn.active {
background: #2867ff;
color: #fff;
border-color: #2867ff;
}
/* On RTL, tools move to the opposite corner and the form aligns naturally. */
.auth-page[dir="rtl"] .auth-tools {
right: auto;
left: 24px;
}
.auth-page[dir="rtl"] .auth-form,
.auth-page[dir="rtl"] .auth-form-head,
.auth-page[dir="rtl"] .auth-field,
.auth-page[dir="rtl"] .auth-row,
.auth-page[dir="rtl"] .auth-switch,
.auth-page[dir="rtl"] .auth-message {
text-align: right;
}
.auth-page[dir="rtl"] .auth-row {
flex-direction: row-reverse;
}
.auth-page[dir="rtl"] .auth-back:hover {
transform: translateX(3px);
}
/* Strong responsive behavior for 300-600 / 600-900 / 900-1500. */
@media (max-width: 600px) {
.auth-page {
padding-top: 86px;
}
.auth-tools {
top: 13px;
right: 13px;
}
.auth-page[dir="rtl"] .auth-tools {
left: 13px;
right: auto;
}
.auth-tool-btn {
min-width: 39px;
height: 37px;
padding: 0 8px;
}
.auth-tool-btn .tool-label {
display: none;
}
.auth-brand-mark {
margin-top: 3px;
}
.auth-page.auth-dark .auth-form-head h2 {
font-size: 36px;
}
.auth-page.auth-dark .auth-form-head p,
.auth-page.auth-dark .auth-switch,
.auth-page.auth-dark .auth-check,
.auth-page.auth-dark .auth-back {
font-size: 12px;
}
}
@media (min-width: 601px) and (max-width: 900px) {
.auth-tools {
top: 18px;
right: 18px;
}
.auth-page[dir="rtl"] .auth-tools {
left: 18px;
right: auto;
}
.auth-card-stage {
margin-top: 6px;
}
}
@media (min-width: 901px) and (max-width: 1500px) {
.auth-shell {
width: min(1080px, calc(100% - 24px));
}
}
@media (prefers-reduced-motion: reduce) {
.auth-tool-btn,
.auth-brand-link {
transition: none !important;
}
}
/* =========================================================
CLEARVISION AUTH — PERFECT ALIGNMENT + SNOW BACKDROP
Final override layer
========================================================= */
html, body {
margin: 0 !important;
width: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
}
.auth-page {
--auth-max: 1180px;
position: relative !important;
width: 100% !important;
min-height: 100svh !important;
margin: 0 !important;
padding: 0 0 34px !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
background:
radial-gradient(circle at 12% 18%, rgba(41,114,255,.25), transparent 26%),
radial-gradient(circle at 88% 24%, rgba(95,104,255,.22), transparent 27%),
radial-gradient(circle at 50% 115%, rgba(19,91,203,.18), transparent 42%),
linear-gradient(135deg, #06132d 0%, #081a36 46%, #111440 100%) !important;
}
/* Snow canvas/background is deliberately outside the card. */
.auth-page::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: .92;
background-image:
radial-gradient(circle at 4% 12%, rgba(255,255,255,.95) 0 1px, transparent 2px),
radial-gradient(circle at 13% 73%, rgba(255,255,255,.75) 0 1.3px, transparent 2.5px),
radial-gradient(circle at 21% 35%, rgba(255,255,255,.8) 0 1px, transparent 2px),
radial-gradient(circle at 30% 84%, rgba(255,255,255,.65) 0 1.5px, transparent 3px),
radial-gradient(circle at 39% 17%, rgba(255,255,255,.9) 0 1px, transparent 2px),
radial-gradient(circle at 48% 67%, rgba(255,255,255,.72) 0 1.2px, transparent 2.5px),
radial-gradient(circle at 58% 28%, rgba(255,255,255,.82) 0 1.4px, transparent 3px),
radial-gradient(circle at 67% 82%, rgba(255,255,255,.72) 0 1px, transparent 2px),
radial-gradient(circle at 76% 14%, rgba(255,255,255,.9) 0 1.4px, transparent 3px),
radial-gradient(circle at 86% 58%, rgba(255,255,255,.72) 0 1px, transparent 2px),
radial-gradient(circle at 95% 30%, rgba(255,255,255,.9) 0 1.5px, transparent 3px);
animation: cvSnowDrift 14s linear infinite alternate;
}
.auth-page::after {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: .28;
background:
linear-gradient(115deg, transparent 0 43%, rgba(89,160,255,.18) 50%, transparent 57%),
radial-gradient(ellipse at center, transparent 0 48%, rgba(4,11,28,.35) 100%);
}
@keyframes cvSnowDrift {
from { transform: translate3d(0,-8px,0) scale(1); }
to { transform: translate3d(12px,12px,0) scale(1.02); }
}
.auth-page .auth-shell {
position: relative !important;
z-index: 2 !important;
width: min(var(--auth-max), calc(100% - 40px)) !important;
margin: 0 auto !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Compact, properly aligned logo header. */
.auth-page .auth-brand-mark {
height: 88px !important;
min-height: 88px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 8px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
box-sizing: border-box !important;
background: transparent !important;
}
.auth-page .auth-brand-link {
margin: 0 !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 9px !important;
text-decoration: none !important;
line-height: 1 !important;
transform: none !important;
}
/* Existing site's logo is allowed to keep its own geometry. */
.auth-page .auth-brand-link img,
.auth-page .auth-brand-link svg {
display: block;
max-width: 190px;
height: auto;
}
.auth-page .auth-brand-link i {
margin: 0 !important;
}
/* Controls remain in the same visual corner, but never push the logo. */
.auth-page .auth-tools {
position: fixed !important;
z-index: 100 !important;
top: 14px !important;
right: 16px !important;
left: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.auth-page[dir="rtl"] .auth-tools {
right: auto !important;
left: 16px !important;
}
/* Joined card: NO horizontal gap, NO outer side gap inside the card. */
.auth-page .auth-card-stage {
position: relative !important;
z-index: 3 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
border-radius: 28px !important;
overflow: hidden !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
align-items: stretch !important;
min-height: 650px !important;
box-sizing: border-box !important;
}
/* Exact shared edge between the two panels. */
.auth-page .auth-panel {
margin: 0 !important;
border-radius: 0 !important;
min-width: 0 !important;
min-height: 650px !important;
box-sizing: border-box !important;
}
.auth-page .auth-visual {
padding: 48px 44px 38px !important;
}
.auth-page .auth-panel-form {
padding: 48px 44px 58px !important;
}
/* Prevent headings from touching/escaping the panel edges. */
.auth-page .auth-visual h1,
.auth-page .auth-form-head h2 {
max-width: 100% !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
.auth-page .auth-form {
width: 100% !important;
max-width: 520px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Use the unused lower/side exterior space as a designed snow field. */
.auth-page .auth-particles {
position: fixed !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
}
.auth-page .auth-particles span {
position: absolute !important;
display: block !important;
width: 4px !important;
height: 4px !important;
border-radius: 50% !important;
background: rgba(255,255,255,.82) !important;
box-shadow: 0 0 9px rgba(180,220,255,.75) !important;
animation: cvSnowFall 9s linear infinite !important;
}
.auth-page .auth-particles span:nth-child(1) { left: 4%; top: -10%; animation-delay: -1s !important; }
.auth-page .auth-particles span:nth-child(2) { left: 16%; top: -16%; animation-delay: -5s !important; width:3px !important; height:3px !important; }
.auth-page .auth-particles span:nth-child(3) { left: 84%; top: -8%; animation-delay: -3s !important; }
.auth-page .auth-particles span:nth-child(4) { left: 94%; top: -20%; animation-delay: -7s !important; width:3px !important; height:3px !important; }
.auth-page .auth-particles span:nth-child(5) { left: 8%; top: -18%; animation-delay: -6s !important; width:5px !important; height:5px !important; }
.auth-page .auth-particles span:nth-child(6) { left: 90%; top: -12%; animation-delay: -2s !important; width:5px !important; height:5px !important; }
@keyframes cvSnowFall {
0% { transform: translate3d(0,-10vh,0) rotate(0); opacity:0; }
10% { opacity:.8; }
50% { transform: translate3d(35px,55vh,0) rotate(180deg); opacity:.95; }
100% { transform: translate3d(-20px,112vh,0) rotate(360deg); opacity:0; }
}
/* Light mode: keep the snow visible while changing the atmosphere. */
.auth-page:not(.auth-dark) {
background:
radial-gradient(circle at 10% 15%, rgba(83,147,255,.24), transparent 27%),
radial-gradient(circle at 90% 25%, rgba(110,112,255,.18), transparent 28%),
linear-gradient(135deg, #eaf3ff 0%, #f7fbff 52%, #e9f0ff 100%) !important;
}
.auth-page:not(.auth-dark)::before {
opacity: .55;
}
/* Tablet */
@media (min-width: 601px) and (max-width: 900px) {
.auth-page .auth-shell {
width: min(720px, calc(100% - 28px)) !important;
}
.auth-page .auth-brand-mark {
height: 78px !important;
min-height: 78px !important;
}
.auth-page .auth-card-stage {
grid-template-columns: 1fr !important;
min-height: auto !important;
}
.auth-page .auth-panel {
min-height: 0 !important;
}
.auth-page .auth-visual {
min-height: 390px !important;
padding: 38px 36px !important;
}
.auth-page .auth-panel-form {
padding: 40px 36px 50px !important;
}
}
/* Phone: zero accidental left/right internal gaps, compact stacked card. */
@media (max-width: 600px) {
.auth-page {
padding-bottom: 18px !important;
}
.auth-page .auth-shell {
width: calc(100% - 18px) !important;
}
.auth-page .auth-brand-mark {
height: 72px !important;
min-height: 72px !important;
padding: 0 3px !important;
}
.auth-page .auth-card-stage {
grid-template-columns: 1fr !important;
min-height: auto !important;
border-radius: 22px !important;
}
.auth-page .auth-panel {
min-height: 0 !important;
}
.auth-page .auth-visual {
min-height: 310px !important;
padding: 28px 22px !important;
}
.auth-page .auth-panel-form {
padding: 30px 22px 48px !important;
}
.auth-page .auth-tools {
top: 10px !important;
right: 10px !important;
}
.auth-page[dir="rtl"] .auth-tools {
left: 10px !important;
right: auto !important;
}
}
@media (prefers-reduced-motion: reduce) {
.auth-page::before,
.auth-page .auth-particles span {
animation: none !important;
}
}
/* =========================================================
HOME 1 — FINAL CTA LIGHT MODE READABILITY FIX
Keeps dark mode unchanged.
========================================================= */
html[data-theme="light"] .home1-page .final-cta {
background: linear-gradient(
135deg,
#e6efff 0%,
#f4f7ff 52%,
#eee8ff 100%
) !important;
color: #0a1427 !important;
}
html[data-theme="light"] .home1-page .final-cta .cta-content {
color: #0a1427 !important;
}
html[data-theme="light"] .home1-page .final-cta h2 {
color: #0a1427 !important;
text-shadow: none !important;
}
html[data-theme="light"] .home1-page .final-cta h2 span {
color: #2867ff !important;
}
html[data-theme="light"] .home1-page .final-cta p {
color: #26364f !important;
opacity: 1 !important;
}
html[data-theme="light"] .home1-page .final-cta .eyebrow {
color: #26364f !important;
opacity: 1 !important;
}
html[data-theme="light"] .home1-page .final-cta .primary-btn {
color: #ffffff !important;
}
html[data-theme="light"] .home1-page .final-cta .line-btn {
color: #10213f !important;
border-color: rgba(16, 33, 63, .25) !important;
background: rgba(255, 255, 255, .45) !important;
}
html[data-theme="light"] .home1-page .final-cta .line-btn:hover {
color: #2867ff !important;
border-color: #2867ff !important;
background: rgba(40, 103, 255, .08) !important;
}
/* =========================================================
HOME PAGE 2 — LIGHT MODE READABILITY / TYPOGRAPHY FIX
Requested: hero overlays + CTA, collections, spotlight,
and vision-journey step cards.
========================================================= */
/* 1) HERO IMAGE OUTER BOX / FLOATING LABELS */
html[data-theme="light"] .home2-page .h2-floating{
color:#ffffff !important;
background:rgba(7,17,38,.82) !important;
border-left-color:#2867ff !important;
text-shadow:0 1px 3px rgba(0,0,0,.28);
}
html[data-theme="light"] .home2-page .h2-floating b{
color:#ffffff !important;
font-size:14px !important;
line-height:1.25 !important;
}
html[data-theme="light"] .home2-page .h2-floating small{
color:#e7efff !important;
font-size:13px !important;
line-height:1.4 !important;
}
/* Hero copy remains dark and readable in light mode */
html[data-theme="light"] .home2-page .h2-hero-copy{
color:#0b1730 !important;
}
html[data-theme="light"] .home2-page .h2-hero-copy h1{
color:#0b1730 !important;
}
html[data-theme="light"] .home2-page .h2-hero-copy p{
color:#263b5b !important;
}
/* Book Eye Test was too faint in light mode */
html[data-theme="light"] .home2-page .h2-actions .line-btn{
color:#10213f !important;
border-color:rgba(16,33,63,.28) !important;
background:rgba(255,255,255,.48) !important;
box-shadow:0 8px 24px rgba(28,58,110,.06);
}
html[data-theme="light"] .home2-page .h2-actions .line-btn span{
color:#10213f !important;
}
html[data-theme="light"] .home2-page .h2-actions .line-btn:hover{
color:#2867ff !important;
border-color:#2867ff !important;
background:rgba(40,103,255,.08) !important;
}
/* Trust / policy information — larger and darker */
html[data-theme="light"] .home2-page .h2-trust span{
font-size:18px !important;
color:#2867ff !important;
}
html[data-theme="light"] .home2-page .h2-trust b{
color:#0b1730 !important;
font-size:15px !important;
}
html[data-theme="light"] .home2-page .h2-trust small{
color:#3f526f !important;
font-size:14px !important;
line-height:1.45 !important;
}
/* 2) SECTION 2 — COLLECTIONS */
html[data-theme="light"] .home2-page .h2-collections,
html[data-theme="light"] .home2-page .h2-collections .h2-copy{
color:#0b1730 !important;
}
html[data-theme="light"] .home2-page .h2-collections .h2-copy h2{
color:#0b1730 !important;
text-shadow:none !important;
}
html[data-theme="light"] .home2-page .h2-collections .h2-copy h2 em{
color:#2867ff !important;
}
html[data-theme="light"] .home2-page .h2-collections .h2-copy p{
color:#263b5b !important;
opacity:1 !important;
}
html[data-theme="light"] .home2-page .h2-collections .h2-text-link{
color:#1557ed !important;
}
html[data-theme="light"] .home2-page .h2-collection-list a{
color:#162a49 !important;
font-size:16px !important;
}
html[data-theme="light"] .home2-page .h2-collection-list a span{
color:#2867ff !important;
font-size:14px !important;
}
/* 3) SECTION 3 — FRAME SPOTLIGHT */
html[data-theme="light"] .home2-page .h2-spotlight{
color:#0b1730 !important;
}
html[data-theme="light"] .home2-page .h2-spotlight-copy{
color:#0b1730 !important;
}
html[data-theme="light"] .home2-page .h2-spotlight-copy h2{
color:#0b1730 !important;
text-shadow:none !important;
}
html[data-theme="light"] .home2-page .h2-spotlight-copy h2 em{
color:#2867ff !important;
}
html[data-theme="light"] .home2-page .h2-spotlight-copy p{
color:#263b5b !important;
opacity:1 !important;
}
html[data-theme="light"] .home2-page .h2-spotlight-copy .h2-price{
color:#0b1730 !important;
font-size:18px !important;
}
html[data-theme="light"] .home2-page .h2-spotlight-copy .h2-text-link{
color:#1557ed !important;
}
html[data-theme="light"] .home2-page .h2-spotlight-copy ul{
color:#263b5b !important;
font-size:16px !important;
line-height:1.6 !important;
}
html[data-theme="light"] .home2-page .h2-spotlight-copy li{
color:#263b5b !important;
}
html[data-theme="light"] .home2-page .h2-spotlight-copy li::before{
color:#2867ff !important;
}
/* 4) SECTION 5 — VISION JOURNEY STEP BOXES
Larger typography for Eye Test / Choose Frame /
Select Lens / Perfect Fit and their descriptions. */
html[data-theme="light"] .home2-page .h2-step{
color:#0b1730 !important;
}
html[data-theme="light"] .home2-page .h2-step span{
color:#2867ff !important;
font-size:13px !important;
}
html[data-theme="light"] .home2-page .h2-step b{
color:#0b1730 !important;
font-size:17px !important;
line-height:1.35 !important;
}
html[data-theme="light"] .home2-page .h2-step small{
color:#3f526f !important;
font-size:15px !important;
line-height:1.55 !important;
margin-top:8px !important;
}
/* Keep all Home 2 light-mode supporting copy readable */
html[data-theme="light"] .home2-page .h2-kicker{
color:#2867ff !important;
}
@media (max-width:900px){
html[data-theme="light"] .home2-page .h2-trust b{
font-size:14px !important;
}
html[data-theme="light"] .home2-page .h2-trust small{
font-size:13px !important;
}
html[data-theme="light"] .home2-page .h2-spotlight-copy ul{
font-size:15px !important;
}
html[data-theme="light"] .home2-page .h2-step b{
font-size:16px !important;
}
html[data-theme="light"] .home2-page .h2-step small{
font-size:14px !important;
}
}
@media (max-width:600px){
html[data-theme="light"] .home2-page .h2-floating b{
font-size:13px !important;
}
html[data-theme="light"] .home2-page .h2-floating small{
font-size:12px !important;
}
html[data-theme="light"] .home2-page .h2-trust b{
font-size:14px !important;
}
html[data-theme="light"] .home2-page .h2-trust small{
font-size:13px !important;
}
html[data-theme="light"] .home2-page .h2-collection-list a,
html[data-theme="light"] .home2-page .h2-spotlight-copy ul{
font-size:15px !important;
}
html[data-theme="light"] .home2-page .h2-step b{
font-size:16px !important;
}
html[data-theme="light"] .home2-page .h2-step small{
font-size:13px !important;
}
}
/* =========================================================
HOME 2 — EXACT LENS TECHNOLOGY LIGHT-MODE FIX
Uses the actual selectors from home2.html.
Dark mode is intentionally untouched.
========================================================= */
/* Section and every direct text element */
html[data-theme="light"] body.home2-page .h2-lenses,
body.home2-page[data-theme="light"] .h2-lenses {
color: #0b1730 !important;
}
/* "Advanced lenses for" */
html[data-theme="light"] body.home2-page .h2-lens-copy h2,
body.home2-page[data-theme="light"] .h2-lens-copy h2 {
color: #0b1730 !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow: none !important;
}
/* "every need." */
html[data-theme="light"] body.home2-page .h2-lens-copy h2 em,
body.home2-page[data-theme="light"] .h2-lens-copy h2 em {
color: #2867ff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* "Engineered with cutting-edge..." */
html[data-theme="light"] body.home2-page .h2-lens-copy p,
body.home2-page[data-theme="light"] .h2-lens-copy p {
color: #263b5b !important;
opacity: 1 !important;
visibility: visible !important;
}
/* LENS TECHNOLOGY kicker */
html[data-theme="light"] body.home2-page .h2-lens-copy .h2-kicker,
body.home2-page[data-theme="light"] .h2-lens-copy .h2-kicker {
color: #2867ff !important;
opacity: 1 !important;
}
/* View all lenses */
html[data-theme="light"] body.home2-page .h2-lens-copy .h2-text-link,
body.home2-page[data-theme="light"] .h2-lens-copy .h2-text-link {
color: #1557ed !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Lens technology item titles:
Blue Light / UV Protection / Anti-Glare / Photochromic */
html[data-theme="light"] body.home2-page .h2-lens-links a,
body.home2-page[data-theme="light"] .h2-lens-links a {
color: #172a48 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Make the four item titles independently dark.
This prevents the parent white color from being inherited. */
html[data-theme="light"] body.home2-page .h2-lens-links a b,
body.home2-page[data-theme="light"] .h2-lens-links a b {
color: #172a48 !important;
font-size: 17px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Item descriptions:
Digital comfort / Everyday safety / Sharper vision / Adaptive lenses */
html[data-theme="light"] body.home2-page .h2-lens-links a small,
body.home2-page[data-theme="light"] .h2-lens-links a small {
color: #435775 !important;
font-size: 15px !important;
line-height: 1.5 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Keep the first lens icon blue and all other icons readable */
html[data-theme="light"] body.home2-page .h2-lens-links a:first-child,
body.home2-page[data-theme="light"] .h2-lens-links a:first-child {
color: #2867ff !important;
}
@media (max-width: 900px) {
html[data-theme="light"] body.home2-page .h2-lens-links a b,
body.home2-page[data-theme="light"] .h2-lens-links a b {
font-size: 16px !important;
}
html[data-theme="light"] body.home2-page .h2-lens-links a small,
body.home2-page[data-theme="light"] .h2-lens-links a small {
font-size: 14px !important;
}
}
@media (max-width: 600px) {
html[data-theme="light"] body.home2-page .h2-lens-links a b,
body.home2-page[data-theme="light"] .h2-lens-links a b {
font-size: 16px !important;
}
html[data-theme="light"] body.home2-page .h2-lens-links a small,
body.home2-page[data-theme="light"] .h2-lens-links a small {
font-size: 14px !important;
}
}
/* =========================================================
HOME 2 — DARK MODE — VISION JOURNEY STEP TEXT
========================================================= */
html[data-theme="dark"] .home2-page .h2-step {
color: #ffffff !important;
}
html[data-theme="dark"] .home2-page .h2-step b {
color: #ffffff !important;
font-size: 17px !important;
line-height: 1.35 !important;
}
html[data-theme="dark"] .home2-page .h2-step small {
display: block !important;
color: #b8c6dc !important;
font-size: 17px !important;
line-height: 1.55 !important;
margin-top: 8px !important;
opacity: 1 !important;
}
html[data-theme="dark"] .home2-page .h2-step span {
color: #ffffff !important;
background: #0b1220 !important;
font-size: 13px !important;
}
/* Tablet */
@media (max-width: 900px) {
html[data-theme="dark"] .home2-page .h2-step b {
font-size: 16px !important;
}
html[data-theme="dark"] .home2-page .h2-step small {
font-size: 16px !important;
}
}
/* Mobile */
@media (max-width: 560px) {
html[data-theme="dark"] .home2-page .h2-step b {
font-size: 16px !important;
}
html[data-theme="dark"] .home2-page .h2-step small {
font-size: 15px !important;
}
}
/* Dark Mode - Bottom Action Cards */
html[data-theme="dark"] .fresh-action-content small,
html[data-theme="dark"] .fresh-action-content p {
font-size: 16px !important;
line-height: 1.5 !important;
color: #b8c8e3 !important;
opacity: 1 !important;
visibility: visible !important;
}
@media (max-width: 600px) {
html[data-theme="dark"] .fresh-action-content small,
html[data-theme="dark"] .fresh-action-content p,
body.dark-mode .fresh-action-content small,
body.dark-mode .fresh-action-content p {
font-size: 15px !important;
}
}
/* =========================================================
ABOUT PAGE — LIGHT MODE READABILITY FINAL FIX
Scoped only to About page. Dark sections retain their dark
visual treatment, while light mode text is forced readable.
========================================================= */
html[data-theme="light"] .about-page .about-hero-v4 .about-title{
color:#0b1730 !important;
}
html[data-theme="light"] .about-page .about-hero-v4 .about-title .gradient-shimmer{
color:#2867ff !important;
-webkit-text-fill-color:#2867ff !important;
background:none !important;
-webkit-background-clip:initial !important;
background-clip:initial !important;
animation:none !important;
}
html[data-theme="light"] .about-page .about-hero-v4 .about-lead{
color:#344866 !important;
opacity:1 !important;
}
html[data-theme="light"] .about-page .about-hero-v4 .about-hero-note b,
html[data-theme="light"] .about-page .about-hero-v4 .about-hero-note small{
color:#183258 !important;
opacity:1 !important;
}
html[data-theme="light"] .about-page .about-hero-v4 .about-hero-note{
border-left-color:rgba(30,65,115,.25) !important;
}
html[data-theme="light"] .about-page .about-hero-v4 .about-hero-features{
background:rgba(255,255,255,.62) !important;
border-top-color:rgba(20,42,78,.16) !important;
border-bottom-color:rgba(20,42,78,.16) !important;
backdrop-filter:blur(10px);
}
html[data-theme="light"] .about-page .about-hero-v4 .about-hero-features article + article{
border-left-color:rgba(20,42,78,.14) !important;
}
html[data-theme="light"] .about-page .about-hero-v4 .about-hero-features strong{
color:#0b1730 !important;
}
html[data-theme="light"] .about-page .about-hero-v4 .about-hero-features small{
color:#536783 !important;
font-size:15px !important;
opacity:1 !important;
}
/* Story / section 02 */
html[data-theme="light"] .about-page .about-story-copy h2,
html[data-theme="light"] .about-page .about-story-copy h2 span,
html[data-theme="light"] .about-page .about-story-copy p,
html[data-theme="light"] .about-page .signature{
color:#0b1730 !important;
}
html[data-theme="light"] .about-page .about-story-copy p{
color:#465a77 !important;
font-size:16px !important;
opacity:1 !important;
}
html[data-theme="light"] .about-page .signature small{
color:#2867ff !important;
}
/* Stats / section 03 */
html[data-theme="light"] .about-page .about-stats strong{
color:#2867ff !important;
-webkit-text-fill-color:#2867ff !important;
opacity:1 !important;
}
html[data-theme="light"] .about-page .about-stats span{
color:#3f5573 !important;
font-size:14px !important;
opacity:1 !important;
}
/* Expertise / section 04 */
html[data-theme="light"] .about-page .expert-copy h2,
html[data-theme="light"] .about-page .expert-copy h2 span{
color:#0b1730 !important;
}
html[data-theme="light"] .about-page .expert-copy p{
color:#465a77 !important;
font-size:16px !important;
opacity:1 !important;
}
html[data-theme="light"] .about-page .about-text-link{
color:#174cae !important;
font-size:14px !important;
}
/* Values / section 05 */
html[data-theme="light"] .about-page .about-section-head h2,
html[data-theme="light"] .about-page .about-section-head h2 span,
html[data-theme="light"] .about-page .value-item h3{
color:#0b1730 !important;
}
html[data-theme="light"] .about-page .value-item p{
color:#4b5f7c !important;
font-size:14px !important;
opacity:1 !important;
}
/* Customer Experience / section 06 */
html[data-theme="light"] .about-page .about-quote-redesign .quote-copy-redesign{
background:rgba(255,255,255,.72) !important;
border-color:rgba(40,103,255,.20) !important;
box-shadow:0 25px 70px rgba(20,42,78,.12) !important;
}
html[data-theme="light"] .about-page .quote-copy-redesign .about-eyebrow,
html[data-theme="light"] .about-page .quote-copy-redesign .quote-kicker{
color:#2867ff !important;
}
html[data-theme="light"] .about-page .quote-copy-redesign h2,
html[data-theme="light"] .about-page .quote-copy-redesign h2 span{
color:#0b1730 !important;
-webkit-text-fill-color:initial !important;
}
html[data-theme="light"] .about-page .quote-copy-redesign blockquote{
color:#425673 !important;
font-size:17px !important;
opacity:1 !important;
}
html[data-theme="light"] .about-page .quote-person strong{
color:#0b1730 !important;
}
html[data-theme="light"] .about-page .quote-person div span{
color:#536783 !important;
font-size:13px !important;
opacity:1 !important;
}
html[data-theme="light"] .about-page .quote-feature-grid span{
color:#3e5370 !important;
font-size:13px !important;
}
/* Section 07 / CTA supporting text */
html[data-theme="light"] .about-page .about-cta-copy p{
color:#465a77 !important;
font-size:16px !important;
opacity:1 !important;
}
/* Responsive readability */
@media(max-width:760px){
html[data-theme="light"] .about-page .about-hero-v4 .about-hero-features small{
font-size:13px !important;
}
html[data-theme="light"] .about-page .about-story-copy p,
html[data-theme="light"] .about-page .expert-copy p,
html[data-theme="light"] .about-page .about-cta-copy p{
font-size:15px !important;
}
html[data-theme="light"] .about-page .about-stats span{
font-size:13px !important;
}
html[data-theme="light"] .about-page .quote-copy-redesign blockquote{
font-size:15px !important;
}
}
/* ABOUT PAGE - DARK MODE FEATURE DESCRIPTION */
html[data-theme="dark"] .about-page .about-hero-v4 .about-hero-features small {
font-size: 15.5px !important;
line-height: 1.5 !important;
color: #b9c8df !important;
opacity: 1 !important;
}
@media (max-width: 760px) {
html[data-theme="dark"] .about-page .about-hero-v4 .about-hero-features small {
font-size: 14px !important;
line-height: 1.5 !important;
color: #b9c8df !important;
}
}
/* ABOUT PAGE - DARK MODE STATISTICS TEXT */
html[data-theme="dark"] .about-page .about-stats span {
font-size: 16px !important;
line-height: 1.5 !important;
color: #b9c8df !important;
opacity: 1 !important;
letter-spacing: .5px !important;
}
@media (max-width: 640px) {
html[data-theme="dark"] .about-page .about-stats span {
font-size: 15px !important;
}
}
/* ABOUT PAGE - DARK MODE */
.about-page .meet-care-link,
.about-page .care-team-link,
.about-page a[href*="team"] {
font-size: 15px !important;
line-height: 1.5 !important;
}
.about-page .explore-technology,
.about-page .technology-link,
.about-page a[href*="technology"] {
font-size: 15px !important;
line-height: 1.5 !important;
}
/* ABOUT PAGE - DARK MODE TEXT SIZE */
.verified-customer,
.verified-clearvision,
.customer-verified {
font-size: 14px !important;
line-height: 1.5 !important;
}
.personal-fitting {
font-size: 15px !important;
line-height: 1.5 !important;
}
.about-verified-text {
font-size: 14px !important;
line-height: 1.5 !important;
}
.about-feature-title {
font-size: 15px !important;
line-height: 1.5 !important;
}
/* =========================================================
ABOUT PAGE - LIGHT MODE REVIEW FEATURES
========================================================= */
.about-review-number {
color: #4f7cff !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
opacity: 1 !important;
}
.about-review-title {
color: #263653 !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.5 !important;
opacity: 1 !important;
}
/* =========================================================
READING PAGE - SECTION 2 DESCRIPTION FONT SIZE
Dark Mode + Light Mode
========================================================= */
/* Default / Dark Mode */
.reading-feature small {
display: block;
font-size: 17px !important;
line-height: 1.6;
color: #aeb9cf !important;
}
/* Light Mode */
html:not(.dark) .reading-feature small,
body:not(.dark) .reading-feature small {
font-size: 17px !important;
line-height: 1.6;
color: #4d5b70 !important;
}
/* If your light mode uses data-theme */
[data-theme="light"] .reading-feature small {
font-size: 17px !important;
line-height: 1.6;
color: #4d5b70 !important;
}
/* If your dark mode uses data-theme */
[data-theme="dark"] .reading-feature small {
font-size: 17px !important;
line-height: 1.6;
color: #aeb9cf !important;
}
/* Mobile */
@media (max-width: 600px) {
.reading-feature small {
font-size: 16px !important;
line-height: 1.55;
}
}
/* =========================================================
READING PAGE - SECTION 2 CTA
LIGHT MODE TEXT VISIBILITY FIX
EVERYTHING WHITE
========================================================= */
/* Light mode - entire CTA text white */
html[data-theme="light"] .cv-footer-visual-cta .cv-footer-visual-copy,
body.light .cv-footer-visual-cta .cv-footer-visual-copy,
.light .cv-footer-visual-cta .cv-footer-visual-copy {
color: #ffffff !important;
}
/* Small heading - ONE MORE LOOK / READING */
html[data-theme="light"] .cv-footer-visual-cta .cv-footer-visual-copy small,
body.light .cv-footer-visual-cta .cv-footer-visual-copy small,
.light .cv-footer-visual-cta .cv-footer-visual-copy small {
color: #ffffff !important;
}
/* Main heading - See it. Feel it. Make it yours. */
html[data-theme="light"] .cv-footer-visual-cta .cv-footer-visual-copy h2,
body.light .cv-footer-visual-cta .cv-footer-visual-copy h2,
.light .cv-footer-visual-cta .cv-footer-visual-copy h2 {
color: #ffffff !important;
}
/* Blue Make it yours. → White */
html[data-theme="light"] .cv-footer-visual-cta .cv-footer-visual-copy h2 em,
body.light .cv-footer-visual-cta .cv-footer-visual-copy h2 em,
.light .cv-footer-visual-cta .cv-footer-visual-copy h2 em {
color: #ffffff !important;
}
/* Description paragraph */
html[data-theme="light"] .cv-footer-visual-cta .cv-footer-visual-copy p,
body.light .cv-footer-visual-cta .cv-footer-visual-copy p,
.light .cv-footer-visual-cta .cv-footer-visual-copy p {
color: #ffffff !important;
}
/* ADD TO CART button text */
html[data-theme="light"] .cv-footer-visual-cta .cv-footer-cart,
body.light .cv-footer-visual-cta .cv-footer-cart,
.light .cv-footer-visual-cta .cv-footer-cart {
color: #ffffff !important;
}
/* ADD TO CART text */
html[data-theme="light"] .cv-footer-visual-cta .cv-footer-cart span,
body.light .cv-footer-visual-cta .cv-footer-cart span,
.light .cv-footer-visual-cta .cv-footer-cart span {
color: #ffffff !important;
}
/* Arrow inside button */
html[data-theme="light"] .cv-footer-visual-cta .cv-footer-cart b,
body.light .cv-footer-visual-cta .cv-footer-cart b,
.light .cv-footer-visual-cta .cv-footer-cart b {
color: #ffffff !important;
}
/* Button border */
html[data-theme="light"] .cv-footer-visual-cta .cv-footer-cart {
border-color: #ffffff !important;
}
/* =========================================================
EXTRA FORCE FIX
If the page uses a light-mode class on
========================================================= */
html.light .cv-footer-visual-cta .cv-footer-visual-copy,
html.light .cv-footer-visual-cta .cv-footer-visual-copy small,
html.light .cv-footer-visual-cta .cv-footer-visual-copy h2,
html.light .cv-footer-visual-cta .cv-footer-visual-copy h2 em,
html.light .cv-footer-visual-cta .cv-footer-visual-copy p,
html.light .cv-footer-visual-cta .cv-footer-cart,
html.light .cv-footer-visual-cta .cv-footer-cart span,
html.light .cv-footer-visual-cta .cv-footer-cart b {
color: #ffffff !important;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
html[data-theme="light"] .cv-footer-visual-cta .cv-footer-visual-copy small,
body.light .cv-footer-visual-cta .cv-footer-visual-copy small,
html.light .cv-footer-visual-cta .cv-footer-visual-copy small {
color: #ffffff !important;
}
html[data-theme="light"] .cv-footer-visual-cta .cv-footer-visual-copy h2,
body.light .cv-footer-visual-cta .cv-footer-visual-copy h2,
html.light .cv-footer-visual-cta .cv-footer-visual-copy h2 {
color: #ffffff !important;
}
html[data-theme="light"] .cv-footer-visual-cta .cv-footer-visual-copy h2 em,
body.light .cv-footer-visual-cta .cv-footer-visual-copy h2 em,
html.light .cv-footer-visual-cta .cv-footer-visual-copy h2 em {
color: #ffffff !important;
}
html[data-theme="light"] .cv-footer-visual-cta .cv-footer-visual-copy p,
body.light .cv-footer-visual-cta .cv-footer-visual-copy p,
html.light .cv-footer-visual-cta .cv-footer-visual-copy p {
color: #ffffff !important;
}
}
/* =========================================================
READING PAGE SECTION 1
LIGHT MODE - HERO IMAGE LABEL VISIBILITY FIX
========================================================= */
html[data-theme="light"] .reading-page .reading-glass-label,
body.light .reading-page .reading-glass-label,
html.light .reading-page .reading-glass-label {
color: #ffffff !important;
background: rgba(6, 18, 43, 0.88) !important;
border-color: rgba(255, 255, 255, 0.75) !important;
}
html[data-theme="light"] .reading-page .reading-glass-label strong,
body.light .reading-page .reading-glass-label strong,
html.light .reading-page .reading-glass-label strong {
color: #ffffff !important;
opacity: 1 !important;
}
html[data-theme="light"] .reading-page .reading-glass-label small,
body.light .reading-page .reading-glass-label small,
html.light .reading-page .reading-glass-label small {
color: #ffffff !important;
opacity: 1 !important;
}
/* =========================================================
SUNGLASSES PAGE - SECTION 1
LIGHT MODE: "SEE THE LIGHT." VISIBILITY FIX
========================================================= */
html[data-theme="light"] .frames-page.theme-solar .fx-title {
background: none !important;
color: #0b1730 !important;
-webkit-text-fill-color: #0b1730 !important;
}
/* Fix first line specifically */
html[data-theme="light"] .frames-page.theme-solar .fx-title::first-line {
color: #0b1730 !important;
-webkit-text-fill-color: #0b1730 !important;
}
/* Make the full hero heading clearly visible */
html[data-theme="light"] .frames-page.theme-solar .fx-hero-copy .fx-title {
text-shadow: none !important;
}
/* =========================================================
SUNGLASSES PAGE - SECTION 1
LIGHT MODE: EXPLORE THE COLLECTION VISIBILITY FIX
========================================================= */
html[data-theme="light"] .frames-page.theme-solar .fx-hero-copy .fx-hero-link,
html[data-theme="light"] .frames-page.theme-solar .fx-hero-copy a {
color: #0b1730 !important;
-webkit-text-fill-color: #0b1730 !important;
opacity: 1 !important;
text-shadow: none !important;
}
/* Arrow */
html[data-theme="light"] .frames-page.theme-solar .fx-hero-copy .fx-hero-link span,
html[data-theme="light"] .frames-page.theme-solar .fx-hero-copy .fx-hero-link b,
html[data-theme="light"] .frames-page.theme-solar .fx-hero-copy a span,
html[data-theme="light"] .frames-page.theme-solar .fx-hero-copy a b {
color: #0b1730 !important;
-webkit-text-fill-color: #0b1730 !important;
opacity: 1 !important;
}
/* Bottom underline */
html[data-theme="light"] .frames-page.theme-solar .fx-hero-copy .fx-hero-link::after,
html[data-theme="light"] .frames-page.theme-solar .fx-hero-copy a::after {
background: #f0a000 !important;
opacity: 1 !important;
}
/* =========================================================
SUNGLASSES PAGE - SECTION 2
FEATURE LIST FONT SIZE
========================================================= */
.frames-page.theme-solar .reading-feature b,
.frames-page.theme-solar .reading-feature small {
font-size: 17px !important;
line-height: 1.6 !important;
}
/* Feature title */
.frames-page.theme-solar .reading-feature b {
font-weight: 600 !important;
}
/* Feature description */
.frames-page.theme-solar .reading-feature small {
font-weight: 500 !important;
}
/* Mobile */
@media (max-width: 600px) {
.frames-page.theme-solar .reading-feature b,
.frames-page.theme-solar .reading-feature small {
font-size: 16px !important;
}
}
/* =========================================================
SUNGLASSES PAGE - SECTION 3
"ONE FACE. THREE MOODS." LIGHT MODE FIX
========================================================= */
html[data-theme="light"] .frames-page.theme-solar .fx-section-title,
html[data-theme="light"] .frames-page.theme-solar .fx-section-title h2,
html.light .frames-page.theme-solar .fx-section-title,
html.light .frames-page.theme-solar .fx-section-title h2,
body.light .frames-page.theme-solar .fx-section-title,
body.light .frames-page.theme-solar .fx-section-title h2 {
color: #0b1730 !important;
-webkit-text-fill-color: #0b1730 !important;
text-shadow: none !important;
}
/* Main "One face. Three moods." heading */
html[data-theme="light"] .frames-page.theme-solar h2,
html.light .frames-page.theme-solar h2,
body.light .frames-page.theme-solar h2 {
color: #0b1730 !important;
-webkit-text-fill-color: #0b1730 !important;
}
/* Section description */
html[data-theme="light"] .frames-page.theme-solar .fx-section-title p,
html.light .frames-page.theme-solar .fx-section-title p,
body.light .frames-page.theme-solar .fx-section-title p {
color: #263957 !important;
-webkit-text-fill-color: #263957 !important;
}
/* =========================================================
SUNGLASSES COLLECTION SECTION
CHOOSE YOUR SUNGLASSES PAIR - FORCE WHITE
========================================================= */
.frames-page .cv-shop-zone .cv-products-inner h2 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: none !important;
text-shadow: none !important;
opacity: 1 !important;
}
/* Also force white if gradient/text effect is applied */
.frames-page .cv-shop-zone .cv-products-inner h2 *,
.frames-page .cv-shop-zone .cv-products-inner h2 span,
.frames-page .cv-shop-zone .cv-products-inner h2 em {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* Keep it visible on every screen size */
@media (max-width: 900px) {
.frames-page .cv-shop-zone .cv-products-inner h2 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
}
@media (max-width: 600px) {
.frames-page .cv-shop-zone .cv-products-inner h2 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
}
/* =========================================================
SUNGLASSES COLLECTION
FORCE "CHOOSE YOUR SUNGLASSES PAIR." TO WHITE
========================================================= */
body.frames-page section.cv-shop-zone .cv-products-inner h2 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: transparent !important;
background-image: none !important;
text-shadow: none !important;
opacity: 1 !important;
}
/* If heading contains any inner element */
body.frames-page section.cv-shop-zone .cv-products-inner h2 *,
body.frames-page section.cv-shop-zone .cv-products-inner h2 span,
body.frames-page section.cv-shop-zone .cv-products-inner h2 em {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* Collection description */
body.frames-page section.cv-shop-zone .cv-products-inner > p {
color: #ffffff !important;
opacity: 1 !important;
}
/* =========================================================
SUNGLASSES - MIDNIGHT AVIATOR / THE DROP
LIGHT MODE TEXT VISIBILITY FIX
========================================================= */
/* Price - ₹3,999 */
html[data-theme="light"] .frames-page.theme-solar .solar-drop-section .spotlight-copy strong {
color: #0b1730 !important;
-webkit-text-fill-color: #0b1730 !important;
opacity: 1 !important;
text-shadow: none !important;
}
/* Discover the drop */
html[data-theme="light"] .frames-page.theme-solar .solar-drop-section .fx-underlink {
color: #0b1730 !important;
-webkit-text-fill-color: #0b1730 !important;
opacity: 1 !important;
text-shadow: none !important;
}
/* Arrow */
html[data-theme="light"] .frames-page.theme-solar .solar-drop-section .fx-underlink::first-letter {
color: #0b1730 !important;
}
/* Orange underline */
html[data-theme="light"] .frames-page.theme-solar .solar-drop-section .fx-underlink {
border-bottom-color: #ff7040 !important;
}
/* =========================================================
SUNGLASSES - FINAL CTA SECTION
"SEE IT. FEEL IT. MAKE IT YOURS."
FORCE WHITE TEXT
========================================================= */
body.frames-page .cv-footer-visual-cta .cv-footer-visual-copy h2 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: none !important;
background-image: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
text-shadow: none !important;
opacity: 1 !important;
visibility: visible !important;
}
/* "Make it yours." is inside */
body.frames-page .cv-footer-visual-cta .cv-footer-visual-copy h2 em {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: none !important;
background-image: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Force the whole text container to remain visible */
body.frames-page .cv-footer-visual-cta .cv-footer-visual-copy {
color: #ffffff !important;
}
body.frames-page .cv-footer-visual-cta .cv-footer-visual-copy h2,
body.frames-page .cv-footer-visual-cta .cv-footer-visual-copy h2 em {
mix-blend-mode: normal !important;
filter: none !important;
}
/* Mobile */
@media (max-width: 800px) {
body.frames-page .cv-footer-visual-cta .cv-footer-visual-copy h2 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
body.frames-page .cv-footer-visual-cta .cv-footer-visual-copy h2 em {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
}
/* =========================================================
SUNGLASSES - SECTION 2
FEATURE TEXT FONT SIZE
========================================================= */
.frames-page.theme-solar .fx-line-list div span {
font-size: 18px !important;
line-height: 1.6 !important;
font-weight: 600 !important;
}
/* 01 / 02 / 03 */
.frames-page.theme-solar .fx-line-list div b {
font-size: 15px !important;
font-weight: 800 !important;
}
/* Mobile */
@media (max-width: 600px) {
.frames-page.theme-solar .fx-line-list div span {
font-size: 16px !important;
}
.frames-page.theme-solar .fx-line-list div b {
font-size: 14px !important;
}
}
/* =========================================================
VELOCITY SECTION - LIGHT MODE
HIGH CONTRAST TEXT FIX
========================================================= */
/* Main heading */
html[data-theme="light"] .frames-page.theme-velocity .fx-title,
html.light .frames-page.theme-velocity .fx-title,
body.light .frames-page.theme-velocity .fx-title {
color: #0b1730 !important;
-webkit-text-fill-color: #0b1730 !important;
background: none !important;
background-image: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
text-shadow: none !important;
opacity: 1 !important;
}
/* Heading inner elements / highlighted words */
html[data-theme="light"] .frames-page.theme-velocity .fx-title *,
html.light .frames-page.theme-velocity .fx-title *,
body.light .frames-page.theme-velocity .fx-title * {
color: #0b1730 !important;
-webkit-text-fill-color: #0b1730 !important;
}
/* Description */
html[data-theme="light"] .frames-page.theme-velocity .fx-hero-copy p,
html.light .frames-page.theme-velocity .fx-hero-copy p,
body.light .frames-page.theme-velocity .fx-hero-copy p {
color: #334766 !important;
-webkit-text-fill-color: #334766 !important;
opacity: 1 !important;
}
/* Explore the collection */
html[data-theme="light"] .frames-page.theme-velocity .fx-hero-link,
html.light .frames-page.theme-velocity .fx-hero-link,
body.light .frames-page.theme-velocity .fx-hero-link {
color: #0b1730 !important;
-webkit-text-fill-color: #0b1730 !important;
opacity: 1 !important;
}
/* =========================================================
KIDS PAGE - SECTION 2
ROUNDED EDGES / FLEXIBLE TEMPLES / GROWING-FACE FIT
FONT SIZE FIX
========================================================= */
.frames-page .grow-section .tiny-checks span {
font-size: 18px !important;
line-height: 1.5 !important;
font-weight: 600 !important;
}
/* Check mark + text */
.frames-page .grow-section .tiny-checks span::first-letter {
font-size: 18px !important;
font-weight: 800 !important;
}
/* Tablet */
@media (min-width: 601px) and (max-width: 900px) {
.frames-page .grow-section .tiny-checks span {
font-size: 17px !important;
}
}
/* Mobile */
@media (max-width: 600px) {
.frames-page .grow-section .tiny-checks {
gap: 12px !important;
flex-wrap: wrap !important;
}
.frames-page .grow-section .tiny-checks span {
font-size: 16px !important;
}
}
/* =========================================================
PLAY / KIDS PAGE - SECTION 1
BIG SMILES VISIBILITY FIX - LIGHT MODE
========================================================= */
html[data-theme="light"] .frames-page.theme-play .fx-title,
body.light .frames-page.theme-play .fx-title,
html.light .frames-page.theme-play .fx-title {
color: #0b1730 !important;
-webkit-text-fill-color: #0b1730 !important;
background: none !important;
background-image: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
text-shadow: none !important;
opacity: 1 !important;
}
/* Force all heading parts to dark */
html[data-theme="light"] .frames-page.theme-play .fx-title *,
body.light .frames-page.theme-play .fx-title *,
html.light .frames-page.theme-play .fx-title * {
color: #0b1730 !important;
-webkit-text-fill-color: #0b1730 !important;
opacity: 1 !important;
}
/* =========================================================
LENSES PAGE - HERO MINI CARDS
CLEAR VISION / DAILY COMFORT / SMART PROTECTION
FONT SIZE INCREASE
========================================================= */
body.lenses-page .lx-hero-mini-cards span {
font-size: 17px !important;
line-height: 1.5 !important;
font-weight: 600 !important;
}
/* Numbers 01 / 02 / 03 */
body.lenses-page .lx-hero-mini-cards strong {
font-size: 17px !important;
font-weight: 800 !important;
}
/* Tablet */
@media (min-width: 601px) and (max-width: 900px) {
body.lenses-page .lx-hero-mini-cards span {
font-size: 17px !important;
}
}
/* Mobile */
@media (max-width: 600px) {
body.lenses-page .lx-hero-mini-cards span {
font-size: 16px !important;
}
body.lenses-page .lx-hero-mini-cards strong {
font-size: 15px !important;
}
}
/* =========================================================
LENSES PAGE - SWITCH FOCUS SECTION
HEADING VISIBILITY FIX
========================================================= */
/* Main heading */
body.lenses-page .lx-switch-focus h1,
body.lenses-page .lx-switch-focus h2,
body.lenses-page .lx-switch-focus .lx-title,
body.lenses-page .lx-switch-focus .section-title {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow: none !important;
background: none !important;
background-image: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
}
/* All words / spans inside heading */
body.lenses-page .lx-switch-focus h1 *,
body.lenses-page .lx-switch-focus h2 *,
body.lenses-page .lx-switch-focus .lx-title *,
body.lenses-page .lx-switch-focus .section-title * {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
background: none !important;
background-image: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
}
/* Strong / emphasized words */
body.lenses-page .lx-switch-focus strong,
body.lenses-page .lx-switch-focus b,
body.lenses-page .lx-switch-focus em,
body.lenses-page .lx-switch-focus span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
}/* =========================================================
LENSES PAGE - BIFOCAL SECTION
TEXT FONT SIZE INCREASE
========================================================= */
/* Roads · faces · TV
Books · phone · labels */
body.lenses-page .lx-focus-row small {
font-size: 15px !important;
line-height: 1.5 !important;
font-weight: 500 !important;
}
/* Designed for easy switching */
body.lenses-page .lx-bifocal-bottom strong {
font-size: 18px !important;
line-height: 1.4 !important;
}
/* Move from across the room to the page... */
body.lenses-page .lx-bifocal-bottom small {
font-size: 15px !important;
line-height: 1.6 !important;
opacity: 1 !important;
}
/* Tablet */
@media (min-width: 601px) and (max-width: 900px) {
body.lenses-page .lx-focus-row small {
font-size: 15px !important;
}
body.lenses-page .lx-bifocal-bottom strong {
font-size: 17px !important;
}
body.lenses-page .lx-bifocal-bottom small {
font-size: 14px !important;
}
}
/* Mobile */
@media (max-width: 600px) {
body.lenses-page .lx-focus-row small {
font-size: 14px !important;
}
body.lenses-page .lx-bifocal-bottom strong {
font-size: 16px !important;
}
body.lenses-page .lx-bifocal-bottom small {
font-size: 14px !important;
}
}
/* =========================================================
BIFOCAL CAPTION - TEXT VISIBILITY FIX
ONE PAIR / TWO VISUAL ZONES
========================================================= */
.lx-bifocal-caption {
opacity: 1 !important;
visibility: visible !important;
color: #ffffff !important;
}
.lx-bifocal-caption span {
display: block !important;
color: #75a0ff !important;
opacity: 1 !important;
visibility: visible !important;
}
.lx-bifocal-caption strong {
display: block !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 24px !important;
line-height: 1.15 !important;
font-weight: 800 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Override reveal animation for this caption */
.lx-bifocal-caption.lx-reveal,
.lx-bifocal-caption.lx-reveal.in {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
/* =========================================================
PROGRESSIVE LENSES - SECTION 3
FONT SIZE + VISIBILITY FIX
========================================================= */
/* Driving · faces
Screens · desk
Books · phone */
.lx-third-stats small {
display: block !important;
margin-top: 8px !important;
color: #34445c !important;
-webkit-text-fill-color: #34445c !important;
font-size: 16px !important;
line-height: 1.5 !important;
font-weight: 500 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* See the wider picture.
Move naturally between tasks. */
.lx-move-card figcaption b {
display: block !important;
margin-top: 8px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 22px !important;
line-height: 1.25 !important;
font-weight: 800 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Caption label */
.lx-move-card figcaption span {
color: #8bb0ff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Tablet */
@media (min-width: 601px) and (max-width: 900px) {
.lx-third-stats small {
font-size: 15px !important;
}
.lx-move-card figcaption b {
font-size: 20px !important;
}
}
/* Mobile */
@media (max-width: 600px) {
.lx-third-stats small {
font-size: 14px !important;
}
.lx-move-card figcaption b {
font-size: 18px !important;
}
}
/* =========================================================
COMPUTER / OCCUPATIONAL LENSES
TEXT SIZE INCREASE
========================================================= */
/* Description under Screen / Desk / People */
.lx-occupation-list small {
font-size: 16px !important;
line-height: 1.5 !important;
font-weight: 500 !important;
opacity: 1 !important;
}
/* Ask for a personalized lens setup */
.lx-occupation-note small {
font-size: 16px !important;
line-height: 1.5 !important;
font-weight: 500 !important;
opacity: 1 !important;
}
/* Made around your working distance */
.lx-occupation-note strong {
font-size: 18px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
}
/* Tablet */
@media (min-width: 601px) and (max-width: 900px) {
.lx-occupation-list small,
.lx-occupation-note small {
font-size: 15px !important;
}
.lx-occupation-note strong {
font-size: 17px !important;
}
}
/* Mobile */
@media (max-width: 600px) {
.lx-occupation-list small,
.lx-occupation-note small {
font-size: 14px !important;
}
.lx-occupation-note strong {
font-size: 16px !important;
}
}
/* =========================================================
COMPUTER / OCCUPATIONAL SECTION
DESCRIPTION FONT SIZE FIX
========================================================= */
.lx-work-step small {
display: block !important;
font-size: 16px !important;
line-height: 1.6 !important;
font-weight: 500 !important;
color: var(--mx-muted) !important;
opacity: 1 !important;
visibility: visible !important;
}
.lx-fourth-note small {
display: block !important;
font-size: 16px !important;
line-height: 1.6 !important;
font-weight: 500 !important;
color: var(--mx-muted) !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Tablet */
@media (min-width: 601px) and (max-width: 900px) {
.lx-work-step small,
.lx-fourth-note small {
font-size: 15px !important;
}
}
/* Mobile */
@media (max-width: 600px) {
.lx-work-step small,
.lx-fourth-note small {
font-size: 14px !important;
}
}
/* =========================================================
LENSES PAGE - LIGHT MODE READABILITY
SPECIALIZED LENS CARDS + HERO FLOATING CARDS
========================================================= */
/* ---------- SPECIALIZED LENS CARDS ---------- */
.lx-stack-card .lx-stack-copy h3 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
}
.lx-stack-card .lx-stack-copy p {
color: #dbe5f5 !important;
-webkit-text-fill-color: #dbe5f5 !important;
opacity: 1 !important;
visibility: visible !important;
}
.lx-stack-card .lx-stack-copy span {
color: #79a2ff !important;
-webkit-text-fill-color: #79a2ff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* ---------- HERO BOTTOM CARDS ---------- */
.lx-photo-tag strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
}
.lx-photo-tag span {
color: #77a2ff !important;
-webkit-text-fill-color: #77a2ff !important;
opacity: 1 !important;
visibility: visible !important;
}
.lx-hero-floating strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
}
.lx-hero-floating small {
color: #d0dbed !important;
-webkit-text-fill-color: #d0dbed !important;
opacity: 1 !important;
visibility: visible !important;
}
/* ---------- FONT SIZE ---------- */
.lx-stack-copy h3 {
font-size: clamp(1.5rem, 2.5vw, 2.1rem) !important;
}
.lx-stack-copy p {
font-size: 15px !important;
line-height: 1.55 !important;
}
.lx-photo-tag strong,
.lx-hero-floating strong {
font-size: 18px !important;
}
/* ---------- MOBILE ---------- */
@media (max-width: 600px) {
.lx-stack-copy h3 {
font-size: 22px !important;
}
.lx-stack-copy p {
font-size: 14px !important;
}
.lx-photo-tag strong,
.lx-hero-floating strong {
font-size: 16px !important;
}
}
/* =========================================================
404 + COMING SOON — CLEARVISION CLICKABLE LOGO
========================================================= */
.utility-logo{
position:fixed;
top:18px;
left:22px;
z-index:10000;
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 18px;
min-height:48px;
text-decoration:none;
border:1px solid var(--border);
border-radius:20px;
background:var(--header-bg);
color:var(--text);
box-shadow:0 8px 24px rgba(7,17,38,.10);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.utility-logo:hover{
transform:translateY(-2px);
border-color:var(--blue);
box-shadow:0 12px 30px rgba(7,17,38,.16);
}
.utility-logo .brand-glasses{
position:relative;
display:flex;
align-items:center;
gap:3px;
flex-shrink:0;
}
.utility-logo .brand-glasses span{
width:19px;
height:13px;
border:2px solid var(--blue);
border-radius:50%;
}
.utility-logo .brand-glasses::after{
content:"";
width:6px;
height:2px;
background:var(--blue);
position:absolute;
left:17px;
top:50%;
transform:translateY(-50%);
}
.utility-logo .brand-text{
display:flex;
flex-direction:column;
line-height:1;
}
.utility-logo .brand-text strong{
font-family:"Manrope",sans-serif;
font-size:16px;
font-weight:800;
color:var(--text);
}
.utility-logo .brand-text strong span{
color:var(--blue);
}
.utility-logo .brand-text small{
margin-top:5px;
font-size:12px;
letter-spacing:3px;
color:var(--muted);
}
@media(max-width:600px){
.utility-logo{
top:12px;
left:12px;
padding:9px 12px;
min-height:42px;
border-radius:16px;
gap:8px;
}
.utility-logo .brand-glasses span{
width:17px;
height:12px;
}
.utility-logo .brand-text strong{
font-size:14px;
}
.utility-logo .brand-text small{
font-size:10px;
letter-spacing:2.5px;
}
.utility-logo .brand-glasses::after{
left:15px;
}
}
/* =========================================================
CLEARVISION EYE TEST HERO - TEXT VISIBILITY FIX
========================================================= */
/* Make the complete hero content stay above image/overlay */
html body.eye-test-body .et-hero {
isolation: isolate !important;
}
html body.eye-test-body .et-hero-content {
position: relative !important;
z-index: 20 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* SEE CLEARLY */
html body.eye-test-body .et-hero h1,
html body.eye-test-body .et-hero h1 span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow: 0 4px 18px rgba(0, 0, 0, 0.65) !important;
}
/* LIVE FULLY - this is the main problem in your screenshot */
html body.eye-test-body .et-hero h1 strong {
display: block !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow: 0 4px 18px rgba(0, 0, 0, 0.75) !important;
}
/* Professional eye test paragraph */
html body.eye-test-body .et-hero p {
display: block !important;
color: #e8eef9 !important;
-webkit-text-fill-color: #e8eef9 !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85) !important;
font-weight: 500 !important;
}
/* Kicker */
html body.eye-test-body .et-hero .et-kicker {
color: #9bb8ff !important;
opacity: 1 !important;
visibility: visible !important;
}
html body.eye-test-body .et-hero .et-kicker span {
background: #6f98ff !important;
opacity: 1 !important;
}
/* Override the LIGHT MODE global strong rule
that was making "Live fully." dark */
html[data-theme="light"] body.eye-test-body .et-hero h1 strong,
html.light body.eye-test-body .et-hero h1 strong,
body.light.eye-test-body .et-hero h1 strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: none !important;
background-image: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
opacity: 1 !important;
}
/* Override light-mode paragraph colors */
html[data-theme="light"] body.eye-test-body .et-hero p,
html.light body.eye-test-body .et-hero p,
body.light.eye-test-body .et-hero p {
color: #e8eef9 !important;
-webkit-text-fill-color: #e8eef9 !important;
opacity: 1 !important;
}
/* Keep overlay behind text */
html body.eye-test-body .et-hero-overlay {
z-index: 1 !important;
}
html body.eye-test-body .et-grid {
z-index: 2 !important;
}
html body.eye-test-body .et-hero-media {
z-index: 0 !important;
}
/* Text remains above everything */
html body.eye-test-body .et-hero-content {
z-index: 20 !important;
}
/* Mobile */
@media (max-width: 900px) {
html body.eye-test-body .et-hero h1 strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html body.eye-test-body .et-hero p {
color: #eef3fb !important;
-webkit-text-fill-color: #eef3fb !important;
}
}
@media (max-width: 600px) {
html body.eye-test-body .et-hero h1 strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
text-shadow: 0 3px 14px rgba(0, 0, 0, 0.8) !important;
}
html body.eye-test-body .et-hero p {
color: #f0f4fb !important;
-webkit-text-fill-color: #f0f4fb !important;
}
}
/* =========================================================
EYE TEST - COMPREHENSIVE CHECK LIGHT MODE TEXT FIX
========================================================= */
/* Main section text */
html[data-theme="light"] body.eye-test-body .et-comprehensive {
color: #101c35 !important;
}
/* Section heading */
html[data-theme="light"] body.eye-test-body .et-comprehensive-copy h2 {
color: #101c35 !important;
opacity: 1 !important;
}
/* Description paragraph */
html[data-theme="light"] body.eye-test-body .et-comprehensive-copy > p {
color: #334765 !important;
-webkit-text-fill-color: #334765 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* 01 / 02 / 03 */
html[data-theme="light"] body.eye-test-body .et-metrics strong {
color: #1557d6 !important;
-webkit-text-fill-color: #1557d6 !important;
opacity: 1 !important;
}
/* Distance clarity / Near vision / Eye coordination */
html[data-theme="light"] body.eye-test-body .et-metrics span {
color: #182640 !important;
-webkit-text-fill-color: #182640 !important;
opacity: 1 !important;
visibility: visible !important;
font-weight: 700 !important;
}
/* Divider lines */
html[data-theme="light"] body.eye-test-body .et-metrics div {
border-bottom-color: rgba(24, 38, 64, 0.16) !important;
}
/* Kicker */
html[data-theme="light"] body.eye-test-body .et-comprehensive-copy .et-kicker {
color: #2867ff !important;
}
html[data-theme="light"] body.eye-test-body .et-comprehensive-copy .et-kicker span {
background: #2867ff !important;
}
/* Also force visibility if any animation/opacity rule affects it */
html[data-theme="light"] body.eye-test-body .et-metrics,
html[data-theme="light"] body.eye-test-body .et-metrics div,
html[data-theme="light"] body.eye-test-body .et-metrics strong,
html[data-theme="light"] body.eye-test-body .et-metrics span {
visibility: visible !important;
}
/* Mobile */
@media (max-width: 600px) {
html[data-theme="light"] body.eye-test-body .et-metrics span {
color: #182640 !important;
-webkit-text-fill-color: #182640 !important;
}
html[data-theme="light"] body.eye-test-body .et-metrics strong {
color: #1557d6 !important;
-webkit-text-fill-color: #1557d6 !important;
}
}
/* =========================================================
EYE TEST - WHAT WE CHECK CARDS
FINAL LIGHT MODE VISIBILITY FIX
========================================================= */
/* Card background */
html[data-theme="light"] body.eye-test-body .et-check {
background: #3d4d70 !important;
color: #ffffff !important;
}
/* Card headings */
html[data-theme="light"] body.eye-test-body .et-check h3 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Card descriptions */
html[data-theme="light"] body.eye-test-body .et-check p {
color: #e8eef8 !important;
-webkit-text-fill-color: #e8eef8 !important;
opacity: 1 !important;
visibility: visible !important;
font-weight: 500 !important;
}
/* Numbers on images */
html[data-theme="light"] body.eye-test-body .et-check-image span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* Prevent global light-mode section rules from changing card text */
html[data-theme="light"] body.eye-test-body .et-check h1,
html[data-theme="light"] body.eye-test-body .et-check h2,
html[data-theme="light"] body.eye-test-body .et-check h3,
html[data-theme="light"] body.eye-test-body .et-check h4,
html[data-theme="light"] body.eye-test-body .et-check p,
html[data-theme="light"] body.eye-test-body .et-check span {
opacity: 1 !important;
visibility: visible !important;
}
/* Specifically keep description readable */
html[data-theme="light"] body.eye-test-body .et-check p {
color: #e8eef8 !important;
-webkit-text-fill-color: #e8eef8 !important;
}
/* Dark mode */
html[data-theme="dark"] body.eye-test-body .et-check h3 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html[data-theme="dark"] body.eye-test-body .et-check p {
color: #dce6f7 !important;
-webkit-text-fill-color: #dce6f7 !important;
}
/* Mobile */
@media (max-width: 900px) {
html[data-theme="light"] body.eye-test-body .et-check h3 {
color: #ffffff !important;
}
html[data-theme="light"] body.eye-test-body .et-check p {
color: #e8eef8 !important;
}
}
@media (max-width: 600px) {
html[data-theme="light"] body.eye-test-body .et-check {
background: #3d4d70 !important;
}
html[data-theme="light"] body.eye-test-body .et-check h3 {
color: #ffffff !important;
}
html[data-theme="light"] body.eye-test-body .et-check p {
color: #e8eef8 !important;
}
}
/* =========================================================
EYE TEST - CLEARVISION METHOD
PROCESS NUMBERS + TEXT VISIBILITY FIX
========================================================= */
body.eye-test-body .et-timeline .process-item b {
display: block !important;
color: #7fa4ff !important;
-webkit-text-fill-color: #7fa4ff !important;
opacity: 1 !important;
visibility: visible !important;
font-size: 12px !important;
font-weight: 800 !important;
}
body.eye-test-body .et-timeline .process-item span {
display: block !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
font-weight: 800 !important;
}
/* Make the dividers visible */
body.eye-test-body .et-timeline .process-item {
border-right-color: rgba(150, 175, 230, 0.35) !important;
}
/* Top line */
body.eye-test-body .et-timeline .et-process {
border-top-color: rgba(150, 175, 230, 0.5) !important;
}
/* Extra protection against LIGHT MODE global text rules */
html[data-theme="light"] body.eye-test-body .et-timeline .process-item b,
html[data-theme="light"] body.eye-test-body .et-timeline .process-item span {
opacity: 1 !important;
visibility: visible !important;
}
html[data-theme="light"] body.eye-test-body .et-timeline .process-item b {
color: #7fa4ff !important;
-webkit-text-fill-color: #7fa4ff !important;
}
html[data-theme="light"] body.eye-test-body .et-timeline .process-item span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* Dark mode */
html[data-theme="dark"] body.eye-test-body .et-timeline .process-item b {
color: #7fa4ff !important;
-webkit-text-fill-color: #7fa4ff !important;
}
html[data-theme="dark"] body.eye-test-body .et-timeline .process-item span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* Tablet */
@media (max-width: 900px) {
body.eye-test-body .et-timeline .process-item b {
color: #7fa4ff !important;
}
body.eye-test-body .et-timeline .process-item span {
color: #ffffff !important;
}
}
/* Mobile */
@media (max-width: 600px) {
body.eye-test-body .et-timeline .process-item b {
color: #7fa4ff !important;
-webkit-text-fill-color: #7fa4ff !important;
}
body.eye-test-body .et-timeline .process-item span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
}
/* =========================================================
EYE TEST - CLEARVISION METHOD
FINAL TEXT VISIBILITY FIX
========================================================= */
/* TEST. ANALYSE. */
html[data-theme="light"] body.eye-test-body .et-timeline h2 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* RECOMMEND. FIT. */
html[data-theme="light"] body.eye-test-body .et-timeline h2 em {
color: #4f7cff !important;
-webkit-text-fill-color: #4f7cff !important;
opacity: 1 !important;
visibility: visible !important;
font-style: normal !important;
}
/* Process numbers */
html[data-theme="light"] body.eye-test-body .et-process .process-item b {
color: #6f98ff !important;
-webkit-text-fill-color: #6f98ff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* TEST / ANALYSE / RECOMMEND / FIT */
html[data-theme="light"] body.eye-test-body .et-process .process-item span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Keep everything visible */
html[data-theme="light"] body.eye-test-body .et-timeline h2,
html[data-theme="light"] body.eye-test-body .et-timeline h2 em,
html[data-theme="light"] body.eye-test-body .et-process,
html[data-theme="light"] body.eye-test-body .process-item,
html[data-theme="light"] body.eye-test-body .process-item b,
html[data-theme="light"] body.eye-test-body .process-item span {
visibility: visible !important;
opacity: 1 !important;
}
/* Divider visibility */
html[data-theme="light"] body.eye-test-body .et-process {
border-top-color: rgba(150, 175, 230, 0.45) !important;
}
html[data-theme="light"] body.eye-test-body .process-item {
border-right-color: rgba(150, 175, 230, 0.30) !important;
}
/* =========================================================
DARK MODE
========================================================= */
html[data-theme="dark"] body.eye-test-body .et-timeline h2 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html[data-theme="dark"] body.eye-test-body .et-timeline h2 em {
color: #4f7cff !important;
-webkit-text-fill-color: #4f7cff !important;
}
/* =========================================================
EYE TEST - FINAL CTA PARAGRAPH VISIBILITY FIX
========================================================= */
html[data-theme="light"] body.eye-test-body .et-final-copy p {
color: #243858 !important;
-webkit-text-fill-color: #243858 !important;
opacity: 1 !important;
visibility: visible !important;
font-weight: 500 !important;
line-height: 1.75 !important;
text-shadow: none !important;
}
/* Also make the final heading clearly readable */
html[data-theme="light"] body.eye-test-body .et-final-copy h2 {
color: #0b1730 !important;
-webkit-text-fill-color: #0b1730 !important;
opacity: 1 !important;
visibility: visible !important;
}
html[data-theme="light"] body.eye-test-body .et-final-copy h2 em {
color: #4f7cff !important;
-webkit-text-fill-color: #4f7cff !important;
}
/* Kicker */
html[data-theme="light"] body.eye-test-body .et-final-copy .et-kicker {
color: #2867ff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Make sure the paragraph is never faded by reveal animation */
html[data-theme="light"] body.eye-test-body .et-final.is-visible .et-final-copy p,
html[data-theme="light"] body.eye-test-body .et-final-copy p {
opacity: 1 !important;
visibility: visible !important;
}
/* Mobile */
@media (max-width: 600px) {
html[data-theme="light"] body.eye-test-body .et-final-copy p {
color: #243858 !important;
-webkit-text-fill-color: #243858 !important;
opacity: 1 !important;
}
}/* =========================================================
CLEARVISION EYE TEST
FINAL CTA - LIGHT MODE VISIBILITY
========================================================= */
/* LIGHT MODE */
html[data-theme="light"] body.eye-test-body .et-final {
background: #eef3fa !important;
}
html[data-theme="light"] body.eye-test-body .et-final-card {
background: #ffffff !important;
border: 1px solid #d5deed !important;
box-shadow: 0 30px 90px rgba(20, 45, 90, 0.12) !important;
}
html[data-theme="light"] body.eye-test-body .et-final-copy {
background: #ffffff !important;
}
/* Kicker */
html[data-theme="light"] body.eye-test-body .et-final-copy .et-kicker {
color: #2867ff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Heading */
html[data-theme="light"] body.eye-test-body .et-final-copy h2 {
color: #0b1730 !important;
-webkit-text-fill-color: #0b1730 !important;
opacity: 1 !important;
visibility: visible !important;
}
html[data-theme="light"] body.eye-test-body .et-final-copy h2 em {
color: #2867ff !important;
-webkit-text-fill-color: #2867ff !important;
opacity: 1 !important;
}
/* =========================================================
THIS IS THE PARAGRAPH FIX
========================================================= */
html[data-theme="light"] body.eye-test-body .et-final-copy p {
display: block !important;
max-width: 500px !important;
color: #182b49 !important;
-webkit-text-fill-color: #182b49 !important;
opacity: 1 !important;
visibility: visible !important;
font-size: 17px !important;
font-weight: 500 !important;
line-height: 1.75 !important;
text-shadow: none !important;
}
/* Override the global main section paragraph rule */
html[data-theme="light"] body.eye-test-body main .et-final .et-final-copy p {
color: #182b49 !important;
-webkit-text-fill-color: #182b49 !important;
opacity: 1 !important;
}
/* Button */
html[data-theme="light"] body.eye-test-body .et-final-copy .et-cta {
background: #2867ff !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
border-color: #2867ff !important;
opacity: 1 !important;
}
/* =========================================================
DARK MODE - KEEP ORIGINAL DARK DESIGN
========================================================= */
html[data-theme="dark"] body.eye-test-body .et-final-copy p {
color: #dce6f7 !important;
-webkit-text-fill-color: #dce6f7 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 900px) {
html[data-theme="light"] body.eye-test-body .et-final-copy p {
color: #182b49 !important;
-webkit-text-fill-color: #182b49 !important;
font-size: 16px !important;
}
}
@media (max-width: 600px) {
html[data-theme="light"] body.eye-test-body .et-final-copy p {
color: #182b49 !important;
-webkit-text-fill-color: #182b49 !important;
font-size: 15px !important;
line-height: 1.7 !important;
}
}
/* =========================================================
EYE TEST - 20/20 FLOATING READOUT
EXACT LIGHT MODE FIX
========================================================= */
html[data-theme="light"] body.eye-test-body .et-floating-readout {
background: #ffffff !important;
border: 2px solid #2867ff !important;
box-shadow: 0 20px 60px rgba(15, 40, 90, 0.25) !important;
opacity: 1 !important;
visibility: visible !important;
}
/* 20/20 */
html[data-theme="light"] body.eye-test-body .et-floating-readout b {
display: block !important;
color: #0b1730 !important;
-webkit-text-fill-color: #0b1730 !important;
font-size: 28px !important;
font-weight: 900 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* VISION CHECK */
html[data-theme="light"] body.eye-test-body .et-floating-readout small {
display: block !important;
color: #526887 !important;
-webkit-text-fill-color: #526887 !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .2em !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Override any inherited/global color */
html[data-theme="light"] body.eye-test-body
.et-floating-readout,
html[data-theme="light"] body.eye-test-body
.et-floating-readout b,
html[data-theme="light"] body.eye-test-body
.et-floating-readout small {
text-shadow: none !important;
mix-blend-mode: normal !important;
}
/* =========================================================
DARK MODE
========================================================= */
html[data-theme="dark"] body.eye-test-body .et-floating-readout b {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html[data-theme="dark"] body.eye-test-body .et-floating-readout small {
color: #79a0ff !important;
-webkit-text-fill-color: #79a0ff !important;
}
/* =========================================================
CONTACT LENSES PAGE
VISION TYPE CARDS - LIGHT MODE TEXT VISIBILITY FIX
========================================================= */
/* Card itself */
html[data-theme="light"] body.contact-lenses-page .cl-type {
background: #091a38 !important;
color: #ffffff !important;
}
/* Keep image + dark overlay */
html[data-theme="light"] body.contact-lenses-page .cl-type::after {
background: linear-gradient(
180deg,
transparent 10%,
rgba(4, 12, 30, 0.96) 90%
) !important;
}
/* Card content must stay above overlay */
html[data-theme="light"] body.contact-lenses-page .cl-type-content {
position: absolute !important;
z-index: 10 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* 01 / DAILY */
html[data-theme="light"] body.contact-lenses-page .cl-type-content > span {
color: #76a0ff !important;
-webkit-text-fill-color: #76a0ff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Everyday lenses / Moisture-first / Move freely */
html[data-theme="light"] body.contact-lenses-page .cl-type-content h3 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow: 0 3px 12px rgba(0, 0, 0, 0.55) !important;
}
/* Description */
html[data-theme="light"] body.contact-lenses-page .cl-type-content p {
color: #dbe5f3 !important;
-webkit-text-fill-color: #dbe5f3 !important;
opacity: 1 !important;
visibility: visible !important;
font-weight: 600 !important;
line-height: 1.6 !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65) !important;
}
/* Learn why */
html[data-theme="light"] body.contact-lenses-page .cl-type-content .cl-tooltip {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
border-bottom-color: #76a0ff !important;
}
/* Prevent global light-mode rules from overriding card text */
html[data-theme="light"] body.contact-lenses-page .cl-type h1,
html[data-theme="light"] body.contact-lenses-page .cl-type h2,
html[data-theme="light"] body.contact-lenses-page .cl-type h3,
html[data-theme="light"] body.contact-lenses-page .cl-type p,
html[data-theme="light"] body.contact-lenses-page .cl-type span {
opacity: 1 !important;
visibility: visible !important;
}
/* =========================================================
DARK MODE
========================================================= */
html[data-theme="dark"] body.contact-lenses-page .cl-type-content h3 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html[data-theme="dark"] body.contact-lenses-page .cl-type-content p {
color: #dbe5f3 !important;
-webkit-text-fill-color: #dbe5f3 !important;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 950px) {
html[data-theme="light"] body.contact-lenses-page .cl-type-content h3 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html[data-theme="light"] body.contact-lenses-page .cl-type-content p {
color: #dbe5f3 !important;
-webkit-text-fill-color: #dbe5f3 !important;
}
}
@media (max-width: 620px) {
html[data-theme="light"] body.contact-lenses-page .cl-type-content h3 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html[data-theme="light"] body.contact-lenses-page .cl-type-content p {
color: #dbe5f3 !important;
-webkit-text-fill-color: #dbe5f3 !important;
}
}
/* =========================================================
CONTACT PAGE - CALL / EMAIL / VISIT DETAILS
FONT SIZE + VISIBILITY FIX
========================================================= */
body.contact-page .ct-info-card small {
display: block !important;
font-size: 16px !important;
line-height: 1.5 !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
color: #344b70 !important;
-webkit-text-fill-color: #344b70 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Card titles */
body.contact-page .ct-info-card strong {
font-size: 21px !important;
line-height: 1.3 !important;
color: #101d38 !important;
-webkit-text-fill-color: #101d38 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Card numbers */
body.contact-page .ct-info-card .ct-icon {
font-size: 13px !important;
font-weight: 800 !important;
color: #4f82ff !important;
-webkit-text-fill-color: #4f82ff !important;
opacity: 1 !important;
}
/* Make all card text visible */
body.contact-page .ct-info-card,
body.contact-page .ct-info-card strong,
body.contact-page .ct-info-card small {
opacity: 1 !important;
visibility: visible !important;
}
/* LIGHT MODE */
html[data-theme="light"] body.contact-page .ct-info-card small {
font-size: 16px !important;
color: #344b70 !important;
-webkit-text-fill-color: #344b70 !important;
opacity: 1 !important;
}
html[data-theme="light"] body.contact-page .ct-info-card strong {
color: #101d38 !important;
-webkit-text-fill-color: #101d38 !important;
}
/* DARK MODE */
html[data-theme="dark"] body.contact-page .ct-info-card small {
font-size: 16px !important;
color: #dce6f7 !important;
-webkit-text-fill-color: #dce6f7 !important;
}
html[data-theme="dark"] body.contact-page .ct-info-card strong {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* TABLET */
@media (max-width: 900px) {
body.contact-page .ct-info-card small {
font-size: 16px !important;
}
}
/* MOBILE */
@media (max-width: 600px) {
body.contact-page .ct-info-card small {
font-size: 15px !important;
line-height: 1.5 !important;
}
body.contact-page .ct-info-card strong {
font-size: 19px !important;
}
}
/* =========================================================
CONTACT PAGE
HOW WE CAN HELP - FINAL TEXT VISIBILITY FIX
========================================================= */
/* Section heading */
body.contact-page .ct-services h2 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
}
body.contact-page .ct-services h2 em {
color: #5f8cff !important;
-webkit-text-fill-color: #5f8cff !important;
}
/* 01 / 02 / 03 / 04 */
body.contact-page .ct-service > span {
color: #76a3ff !important;
-webkit-text-fill-color: #76a3ff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Eye Test / Frames & Fit / Lenses / Contact Lenses */
body.contact-page .ct-service h3 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Description text */
body.contact-page .ct-service p {
color: #dbe6f7 !important;
-webkit-text-fill-color: #dbe6f7 !important;
opacity: 1 !important;
visibility: visible !important;
font-size: 17px !important;
font-weight: 600 !important;
line-height: 1.6 !important;
}
/* Arrow */
body.contact-page .ct-service > b {
color: #76a3ff !important;
-webkit-text-fill-color: #76a3ff !important;
opacity: 1 !important;
}
/* Keep service content above background/overlay */
body.contact-page .ct-services-inner {
position: relative !important;
z-index: 10 !important;
}
body.contact-page .ct-service {
position: relative !important;
z-index: 11 !important;
}
/* =========================================================
IMPORTANT: LIGHT MODE
The service section still has a dark image background,
therefore text MUST remain light.
========================================================= */
html[data-theme="light"] body.contact-page .ct-services {
background: #07152d !important;
}
html[data-theme="light"] body.contact-page .ct-services-overlay {
z-index: 1 !important;
}
html[data-theme="light"] body.contact-page .ct-services-bg {
z-index: 0 !important;
}
html[data-theme="light"] body.contact-page .ct-services-inner {
z-index: 10 !important;
}
html[data-theme="light"] body.contact-page .ct-service h3 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html[data-theme="light"] body.contact-page .ct-service p {
color: #dbe6f7 !important;
-webkit-text-fill-color: #dbe6f7 !important;
opacity: 1 !important;
}
html[data-theme="light"] body.contact-page .ct-service > span {
color: #76a3ff !important;
-webkit-text-fill-color: #76a3ff !important;
}
html[data-theme="light"] body.contact-page .ct-service > b {
color: #76a3ff !important;
-webkit-text-fill-color: #76a3ff !important;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 900px) {
html[data-theme="light"] body.contact-page .ct-service p {
color: #dbe6f7 !important;
-webkit-text-fill-color: #dbe6f7 !important;
font-size: 16px !important;
}
}
@media (max-width: 600px) {
html[data-theme="light"] body.contact-page .ct-service p {
color: #e4ebf7 !important;
-webkit-text-fill-color: #e4ebf7 !important;
font-size: 15px !important;
line-height: 1.65 !important;
}
html[data-theme="light"] body.contact-page .ct-service h3 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
}
/* =========================================================
CONTACT PAGE - FINAL CTA PARAGRAPH
LIGHT + CLEAR FONT
========================================================= */
html[data-theme="light"] body.contact-page .ct-final p {
color: #dbe5f2 !important;
-webkit-text-fill-color: #dbe5f2 !important;
opacity: 1 !important;
visibility: visible !important;
font-size: 17px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
letter-spacing: 0.01em !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
}
/* Keep final section paragraph above image */
body.contact-page .ct-final-inner {
position: relative !important;
z-index: 10 !important;
}
body.contact-page .ct-final p {
font-weight: 400 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Dark mode */
html[data-theme="dark"] body.contact-page .ct-final p {
color: #dbe5f2 !important;
-webkit-text-fill-color: #dbe5f2 !important;
font-weight: 400 !important;
}
/* Mobile */
@media (max-width: 600px) {
html[data-theme="light"] body.contact-page .ct-final p {
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
}
}
/* =========================================================
LOGIN PAGE - BETTER VISION TEXT VISIBILITY
FINAL LIGHT MODE FIX
========================================================= */
/* Better Vision */
html[data-theme="light"] .authpage-visual .authpage-visual-content h1 {
color: #102342 !important;
-webkit-text-fill-color: #102342 !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow: none !important;
}
/* Brighter Tomorrow */
html[data-theme="light"] .authpage-visual .authpage-visual-content h1 span {
color: #35aeea !important;
-webkit-text-fill-color: #35aeea !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Premium eyewear paragraph */
html[data-theme="light"] .authpage-visual .authpage-visual-content p {
color: #30496d !important;
-webkit-text-fill-color: #30496d !important;
opacity: 1 !important;
visibility: visible !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.7 !important;
}
/* Member access */
html[data-theme="light"] .authpage-visual .authpage-kicker {
color: #4b8cff !important;
-webkit-text-fill-color: #4b8cff !important;
opacity: 1 !important;
}
/* Make sure the visual content is above glow */
html[data-theme="light"] .authpage-visual-content {
position: relative !important;
z-index: 10 !important;
}
/* =========================================================
DARK MODE
========================================================= */
html[data-theme="dark"] .authpage-visual .authpage-visual-content h1 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html[data-theme="dark"] .authpage-visual .authpage-visual-content h1 span {
color: #5fc2ff !important;
-webkit-text-fill-color: #5fc2ff !important;
}
html[data-theme="dark"] .authpage-visual .authpage-visual-content p {
color: #dbe5f5 !important;
-webkit-text-fill-color: #dbe5f5 !important;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 960px) {
html[data-theme="light"] .authpage-visual .authpage-visual-content h1 {
color: #102342 !important;
-webkit-text-fill-color: #102342 !important;
}
html[data-theme="light"] .authpage-visual .authpage-visual-content h1 span {
color: #35aeea !important;
-webkit-text-fill-color: #35aeea !important;
}
html[data-theme="light"] .authpage-visual .authpage-visual-content p {
color: #30496d !important;
-webkit-text-fill-color: #30496d !important;
}
}
/* =========================================================
SIGNUP PAGE
01 / 02 / 03 BENEFITS VISIBILITY FIX
LIGHT MODE
========================================================= */
/* Benefit cards */
html[data-theme="light"] .authpage-visual .authpage-benefit {
background: rgba(255, 255, 255, 0.72) !important;
border: 1px solid rgba(80, 130, 210, 0.18) !important;
box-shadow: 0 10px 30px rgba(40, 70, 120, 0.08) !important;
opacity: 1 !important;
visibility: visible !important;
}
/* 01 / 02 / 03 */
html[data-theme="light"] .authpage-visual .authpage-benefit b {
display: block !important;
color: #4f82ff !important;
-webkit-text-fill-color: #4f82ff !important;
opacity: 1 !important;
visibility: visible !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1 !important;
margin-bottom: 7px !important;
}
/* Save Favorites / Easy Appointments / Personalized Care */
html[data-theme="light"] .authpage-visual .authpage-benefit span {
display: block !important;
color: #30496d !important;
-webkit-text-fill-color: #30496d !important;
opacity: 1 !important;
visibility: visible !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
}
/* Prevent global light-mode .authpage-visual rules */
html[data-theme="light"] .authpage-visual .authpage-benefit,
html[data-theme="light"] .authpage-visual .authpage-benefit b,
html[data-theme="light"] .authpage-visual .authpage-benefit span {
text-shadow: none !important;
mix-blend-mode: normal !important;
}
/* =========================================================
DARK MODE
========================================================= */
html[data-theme="dark"] .authpage-visual .authpage-benefit b {
color: #5fc2ff !important;
-webkit-text-fill-color: #5fc2ff !important;
}
html[data-theme="dark"] .authpage-visual .authpage-benefit span {
color: rgba(230, 240, 255, 0.9) !important;
-webkit-text-fill-color: rgba(230, 240, 255, 0.9) !important;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
html[data-theme="light"] .authpage-visual .authpage-benefit b {
font-size: 12px !important;
}
html[data-theme="light"] .authpage-visual .authpage-benefit span {
font-size: 12px !important;
}
}
/* =========================================================
LENSES PAGE
BIFOCAL SECTION - HEADING VISIBILITY FIX
========================================================= */
/* Main heading */
body.lenses-page .lx-bifocal-content .lx-redesign-section-title {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow: 0 4px 18px rgba(0, 0, 0, 0.55) !important;
}
/* WITHOUT */
body.lenses-page .lx-bifocal-content .lx-redesign-section-title em {
color: #4f82ff !important;
-webkit-text-fill-color: #4f82ff !important;
opacity: 1 !important;
visibility: visible !important;
font-style: normal !important;
}
/* SWITCHING GLASSES */
body.lenses-page .lx-bifocal-content .lx-redesign-section-title {
isolation: isolate;
}
/* Extra protection against global light-mode rules */
html[data-theme="light"] body.lenses-page
.lx-bifocal-content .lx-redesign-section-title {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
}
html[data-theme="light"] body.lenses-page
.lx-bifocal-content .lx-redesign-section-title em {
color: #4f82ff !important;
-webkit-text-fill-color: #4f82ff !important;
}
/* Dark mode */
html[data-theme="dark"] body.lenses-page
.lx-bifocal-content .lx-redesign-section-title {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html[data-theme="dark"] body.lenses-page
.lx-bifocal-content .lx-redesign-section-title em {
color: #4f82ff !important;
-webkit-text-fill-color: #4f82ff !important;
}
/* Keep the heading above decorative background word */
body.lenses-page .lx-bifocal-content {
position: relative !important;
z-index: 10 !important;
}
body.lenses-page .lx-bifocal-bgword {
z-index: 0 !important;
pointer-events: none !important;
}
/* Paragraph stays readable */
body.lenses-page .lx-bifocal-content .lx-redesign-section-lead {
color: #c9d5e7 !important;
-webkit-text-fill-color: #c9d5e7 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Mobile */
@media (max-width: 600px) {
body.lenses-page .lx-bifocal-content .lx-redesign-section-title {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
body.lenses-page .lx-bifocal-content .lx-redesign-section-title em {
color: #4f82ff !important;
-webkit-text-fill-color: #4f82ff !important;
}
}
/* =========================================================
CONTACT PAGE - STORE ADDRESS
PROPER INNER PADDING
========================================================= */
body.contact-page .ct-address.ct-address-featured {
padding: 24px 28px !important;
margin: 32px 0 !important;
box-sizing: border-box !important;
}
/* Keep all address content inside the padding */
body.contact-page .ct-address.ct-address-featured span,
body.contact-page .ct-address.ct-address-featured strong,
body.contact-page .ct-address.ct-address-featured small {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Slightly better spacing between lines */
body.contact-page .ct-address.ct-address-featured {
gap: 9px !important;
}
/* Mobile */
@media (max-width: 600px) {
body.contact-page .ct-address.ct-address-featured {
padding: 20px 22px !important;
}
}
/* =========================================================
LENSES PAGE - REDUCE BOTH LARGE HEADINGS
========================================================= */
/* HERO:
See every
detail.
Feel every
difference.
*/
body.lenses-page .lx-redesign-title {
font-size: 52px !important;
line-height: 0.95 !important;
letter-spacing: -0.04em !important;
}
/* BIFOCAL:
Switch focus
without
switching glasses.
*/
body.lenses-page .lx-redesign-section-title {
font-size: 52px !important;
line-height: 0.95 !important;
letter-spacing: -0.04em !important;
}
/* Keep highlighted words same size */
body.lenses-page .lx-redesign-title em,
body.lenses-page .lx-redesign-section-title em {
font-size: inherit !important;
}
/* =========================================================
900px - 1200px
========================================================= */
@media (max-width: 1200px) {
body.lenses-page .lx-redesign-title,
body.lenses-page .lx-redesign-section-title {
font-size: 48px !important;
line-height: 0.98 !important;
}
}
/* =========================================================
600px - 900px
========================================================= */
@media (max-width: 900px) {
body.lenses-page .lx-redesign-title,
body.lenses-page .lx-redesign-section-title {
font-size: 44px !important;
line-height: 1 !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
body.lenses-page .lx-redesign-title,
body.lenses-page .lx-redesign-section-title {
font-size: 38px !important;
line-height: 1.02 !important;
letter-spacing: -0.035em !important;
}
}
/* =========================================================
HOME 2 - VISION JOURNEY CARDS
HOVER TEXT VISIBILITY FIX
========================================================= */
/* Hover card */
body.home2-page .h2-step:hover {
background: #ffffff !important;
color: #0b1730 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Eye Test / Choose Frame / Select Lens / Perfect Fit */
body.home2-page .h2-step:hover b {
color: #0b1730 !important;
-webkit-text-fill-color: #0b1730 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Description */
body.home2-page .h2-step:hover small {
color: #405575 !important;
-webkit-text-fill-color: #405575 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* 01 / 02 / 03 / 04 */
body.home2-page .h2-step:hover > span {
background: #2867ff !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Prevent any global hover rule from hiding text */
body.home2-page .h2-step:hover,
body.home2-page .h2-step:hover b,
body.home2-page .h2-step:hover small,
body.home2-page .h2-step:hover span {
text-shadow: none !important;
mix-blend-mode: normal !important;
}
/* LIGHT MODE */
html[data-theme="light"] body.home2-page .h2-step:hover b {
color: #0b1730 !important;
-webkit-text-fill-color: #0b1730 !important;
}
html[data-theme="light"] body.home2-page .h2-step:hover small {
color: #405575 !important;
-webkit-text-fill-color: #405575 !important;
}
html[data-theme="light"] body.home2-page .h2-step:hover > span {
background: #2867ff !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* DARK MODE */
html[data-theme="dark"] body.home2-page .h2-step:hover {
background: #ffffff !important;
}
html[data-theme="dark"] body.home2-page .h2-step:hover b {
color: #0b1730 !important;
-webkit-text-fill-color: #0b1730 !important;
}
html[data-theme="dark"] body.home2-page .h2-step:hover small {
color: #405575 !important;
-webkit-text-fill-color: #405575 !important;
}
html[data-theme="dark"] body.home2-page .h2-step:hover > span {
background: #2867ff !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* =========================================================
FINAL GAP FIX - EYE TEST + CONTACT LENSES
Expand content across the available section width.
========================================================= */
/* EYE TEST - FOUR STEPS / ONE CLEAR VIEW */
body.eye-test-body .et-journey {
padding-left: clamp(28px, 4vw, 60px) !important;
padding-right: clamp(28px, 4vw, 60px) !important;
}
body.eye-test-body .et-journey .et-section-head {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
gap: 30px !important;
}
body.eye-test-body .et-journey .et-steps {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body.eye-test-body .et-journey .et-step {
width: 100% !important;
box-sizing: border-box !important;
}
/* CONTACT LENSES - FROM FIRST FIT TO ALL-DAY */
body.contact-lenses-page .cl-journey {
padding-left: clamp(28px, 4vw, 60px) !important;
padding-right: clamp(28px, 4vw, 60px) !important;
}
body.contact-lenses-page .cl-journey-inner {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr) !important;
gap: clamp(22px, 2.5vw, 38px) !important;
}
body.contact-lenses-page .cl-steps {
width: 100% !important;
}
body.contact-lenses-page .cl-step {
width: 100% !important;
box-sizing: border-box !important;
}
/* Keep both layouts full-width on medium screens */
@media (max-width: 1100px) {
body.eye-test-body .et-journey,
body.contact-lenses-page .cl-journey {
padding-left: 32px !important;
padding-right: 32px !important;
}
body.contact-lenses-page .cl-journey-inner {
grid-template-columns: minmax(260px, .68fr) minmax(0, 1.32fr) !important;
gap: 24px !important;
}
}
/* Mobile: remove artificial side spacing */
@media (max-width: 900px) {
body.eye-test-body .et-journey,
body.contact-lenses-page .cl-journey {
padding-left: 24px !important;
padding-right: 24px !important;
}
body.contact-lenses-page .cl-journey-inner {
grid-template-columns: 1fr !important;
gap: 35px !important;
}
}
@media (max-width: 600px) {
body.eye-test-body .et-journey,
body.contact-lenses-page .cl-journey {
padding-left: 18px !important;
padding-right: 18px !important;
}
}
/* =========================================================
BRAND MARQUEE TEXT — LIGHT + DARK MODE HOVER
========================================================= */
.brand-track span {
color: #53627e;
font-family: "Manrope", sans-serif;
font-size: 24px;
font-weight: 800;
letter-spacing: 1px;
white-space: nowrap;
display: inline-block;
cursor: pointer;
transition:
color .3s ease,
transform .3s ease,
text-shadow .3s ease,
opacity .3s ease;
}
/* ---------------------------------------------------------
LIGHT MODE HOVER
Keep text clearly visible — DO NOT use white
--------------------------------------------------------- */
.brand-track span:hover {
color: var(--blue);
transform: translateY(-3px) scale(1.04);
text-shadow:
0 0 10px rgba(40, 103, 255, .18),
0 0 24px rgba(40, 103, 255, .12);
opacity: 1;
}
/* ---------------------------------------------------------
DARK MODE
--------------------------------------------------------- */
[data-theme="dark"] .brand-track span {
color: #8d9bb5;
}
/* Dark mode hover effect */
[data-theme="dark"] .brand-track span:hover {
color: #ffffff;
transform: translateY(-4px) scale(1.05);
text-shadow:
0 0 8px rgba(255, 255, 255, .55),
0 0 20px rgba(94, 132, 255, .65),
0 0 38px rgba(94, 132, 255, .35);
opacity: 1;
}
/* ---------------------------------------------------------
DIM OTHER MARQUEE ITEMS WHEN ONE IS HOVERED
Gives a premium focus effect
--------------------------------------------------------- */
.brand-track:has(span:hover) span {
opacity: .45;
}
.brand-track:has(span:hover) span:hover {
opacity: 1;
}
/* ---------------------------------------------------------
ACCESSIBILITY
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.brand-track span {
transition: color .2s ease, opacity .2s ease;
}
.brand-track span:hover {
transform: none;
text-shadow: none;
}
}
/* =========================================================
HOME 1 — LIGHT MODE TEXT VISIBILITY FIX
========================================================= */
html[data-theme="light"] body.home1-page .hero-description,
html[data-theme="light"] body.home1-page .lens-content > p,
html[data-theme="light"] body.home1-page .story-detail-copy p,
html[data-theme="light"] body.home1-page .eye-test-content > p,
html[data-theme="light"] body.home1-page .eye-test-points span,
html[data-theme="light"] body.home1-page .offer-content p,
html[data-theme="light"] body.home1-page .testimonial p,
html[data-theme="light"] body.home1-page .testimonial-person span {
color: #172640 !important;
-webkit-text-fill-color: #172640 !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow: none !important;
mix-blend-mode: normal !important;
}
/* DARK MAIN HEADINGS */
html[data-theme="light"] body.home1-page .hero-title,
html[data-theme="light"] body.home1-page .lens-content h2,
html[data-theme="light"] body.home1-page .story-editorial h2,
html[data-theme="light"] body.home1-page .eye-test-content h2,
html[data-theme="light"] body.home1-page .offer-content h2,
html[data-theme="light"] body.home1-page .testimonial-heading h2 {
color: #071126 !important;
-webkit-text-fill-color: #071126 !important;
opacity: 1 !important;
}
/* BLUE HIGHLIGHT WORDS */
html[data-theme="light"] body.home1-page .hero-title span,
html[data-theme="light"] body.home1-page .lens-content h2 span,
html[data-theme="light"] body.home1-page .story-editorial h2 span,
html[data-theme="light"] body.home1-page .eye-test-content h2 span,
html[data-theme="light"] body.home1-page .testimonial-heading h2 em,
html[data-theme="light"] body.home1-page .offer-content h2 em {
color: #2867ff !important;
-webkit-text-fill-color: #2867ff !important;
}
/* LENS LIST */
html[data-theme="light"] body.home1-page .lens-list a,
html[data-theme="light"] body.home1-page .lens-list a strong {
color: #10213f !important;
-webkit-text-fill-color: #10213f !important;
}
html[data-theme="light"] body.home1-page .lens-list a span {
color: #52627c !important;
-webkit-text-fill-color: #52627c !important;
}
html[data-theme="light"] body.home1-page .lens-list a i {
color: #2867ff !important;
-webkit-text-fill-color: #2867ff !important;
}
/* STORY / SMALL TEXT */
html[data-theme="light"] body.home1-page .story-stat strong {
color: #0b1730 !important;
-webkit-text-fill-color: #0b1730 !important;
}
html[data-theme="light"] body.home1-page .story-stat span,
html[data-theme="light"] body.home1-page .lens-tech-item span,
html[data-theme="light"] body.home1-page .lens-tech-note {
color: #40516e !important;
-webkit-text-fill-color: #40516e !important;
opacity: 1 !important;
}
/* TESTIMONIAL NAMES */
html[data-theme="light"] body.home1-page .testimonial-person strong {
color: #071126 !important;
-webkit-text-fill-color: #071126 !important;
}
/* EYE CARE */
html[data-theme="light"] body.home1-page .eye-test-points span {
font-weight: 600 !important;
}
/* EYEBROWS */
html[data-theme="light"] body.home1-page .eyebrow {
color: #2867ff !important;
-webkit-text-fill-color: #2867ff !important;
opacity: 1 !important;
}
/* ALL PARAGRAPHS INSIDE LIGHT SECTIONS */
html[data-theme="light"] body.home1-page .section-light p {
color: #172640 !important;
-webkit-text-fill-color: #172640 !important;
opacity: 1 !important;
}
/* BUTTON TEXT MUST STAY WHITE */
html[data-theme="light"] body.home1-page .primary-btn,
html[data-theme="light"] body.home1-page .primary-btn span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* =========================================================
PROFESSIONAL EYE CARE — FIX 360° BADGE CUTTING
========================================================= */
.floating-note {
left: 24px !important;
right: auto !important;
bottom: 24px !important;
width: 130px !important;
height: 130px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
z-index: 20 !important;
overflow: visible !important;
}
/* 360° */
.floating-note span {
display: block !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 30px !important;
font-weight: 800 !important;
line-height: 1 !important;
opacity: 1 !important;
}
/* Professional Eye Care */
.floating-note small {
display: block !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
text-align: center !important;
opacity: 1 !important;
margin-top: 6px !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
/* =========================================================
MAKE SURE THE IMAGE WRAPPER DOES NOT CUT THE BADGE
========================================================= */
.floating-note,
.floating-note::before,
.floating-note::after {
box-sizing: border-box !important;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 900px) {
.floating-note {
left: 18px !important;
bottom: 18px !important;
width: 115px !important;
height: 115px !important;
}
.floating-note span {
font-size: 26px !important;
}
.floating-note small {
font-size: 11px !important;
}
}
@media (max-width: 600px) {
.floating-note {
left: 14px !important;
bottom: 14px !important;
width: 105px !important;
height: 105px !important;
}
.floating-note span {
font-size: 23px !important;
}
.floating-note small {
font-size: 10px !important;
}
}
/* =========================================================
HOME PAGE 2 — LIGHT MODE TEXT CONTRAST FIX
========================================================= */
/* Main descriptive paragraphs */
body.theme-light p {
color: #17233b !important;
opacity: 1 !important;
}
/* Main headings */
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4 {
color: #071426 !important;
opacity: 1 !important;
}
/* Product / collection description */
body.theme-light .collection-content p,
body.theme-light .frame-content p,
body.theme-light .product-content p,
body.theme-light .feature-content p {
color: #17233b !important;
}
/* Price */
body.theme-light .price,
body.theme-light .product-price {
color: #071426 !important;
opacity: 1 !important;
}
/* Bullet points */
body.theme-light li {
color: #17233b !important;
opacity: 1 !important;
}
body.theme-light li::marker {
color: #2867ff !important;
}
/* Normal links */
body.theme-light a {
color: #17233b;
}
/* Collection / discover button */
body.theme-light .discover-btn,
body.theme-light .collection-btn {
color: #071426 !important;
}
/* =========================================================
TESTIMONIAL
========================================================= */
body.theme-light blockquote,
body.theme-light .testimonial blockquote,
body.theme-light .testimonial p {
color: #17233b !important;
-webkit-text-fill-color: #17233b !important;
opacity: 1 !important;
}
body.theme-light .testimonial strong,
body.theme-light .testimonial-name {
color: #071426 !important;
-webkit-text-fill-color: #071426 !important;
opacity: 1 !important;
}
body.theme-light .testimonial span,
body.theme-light .testimonial-role {
color: #40516a !important;
-webkit-text-fill-color: #40516a !important;
opacity: 1 !important;
}
/* =========================================================
BRAND NAMES
========================================================= */
body.theme-light .brand-track span,
body.theme-light .brands span,
body.theme-light .brand-name {
color: #263753 !important;
-webkit-text-fill-color: #263753 !important;
opacity: 1 !important;
}
/* Brand hover */
body.theme-light .brand-track span:hover,
body.theme-light .brands span:hover,
body.theme-light .brand-name:hover {
color: #2867ff !important;
-webkit-text-fill-color: #2867ff !important;
}
/* =========================================================
FINAL SECTION TEXT
========================================================= */
body.theme-light .final-content p,
body.theme-light .fitting-content p,
body.theme-light .care-content p,
body.theme-light .section-content p {
color: #17233b !important;
-webkit-text-fill-color: #17233b !important;
opacity: 1 !important;
}
/* Small / secondary text */
body.theme-light small {
color: #40516a !important;
opacity: 1 !important;
}
/* =========================================================
NAVBAR — LOGIN TEXT VISIBILITY
ALL PAGES / LIGHT + DARK MODE
========================================================= */
/* Login button */
.login-btn,
.nav-login,
.navbar .login-btn,
.navbar .nav-login,
header .login-btn,
header .nav-login,
.header-actions .login-btn,
.header-actions .nav-login {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow: none !important;
}
/* Login text / span / icon */
.login-btn span,
.nav-login span,
.login-btn a,
.nav-login a {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
}
/* Login icon */
.login-btn i,
.login-btn svg,
.nav-login i,
.nav-login svg {
color: #ffffff !important;
fill: #ffffff !important;
stroke: #ffffff !important;
opacity: 1 !important;
}
/* =========================================================
LIGHT MODE
========================================================= */
body.theme-light .login-btn,
body.theme-light .nav-login,
body.theme-light .navbar .login-btn,
body.theme-light .navbar .nav-login,
body.theme-light header .login-btn,
body.theme-light header .nav-login {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* =========================================================
DARK MODE
========================================================= */
body.theme-dark .login-btn,
body.theme-dark .nav-login,
body.theme-dark .navbar .login-btn,
body.theme-dark .navbar .nav-login,
body.theme-dark header .login-btn,
body.theme-dark header .nav-login {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* =========================================================
HOVER
========================================================= */
.login-btn:hover,
.nav-login:hover {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* Prevent generic anchor rules from making Login dark */
.login-btn a:hover,
.nav-login a:hover {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* =========================================================
GLOBAL NAV LOGIN — FINAL VISIBILITY FIX
Works on ALL PAGES + LIGHT/DARK MODE
========================================================= */
/* Desktop / normal navbar */
.login-btn {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: var(--navy) !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Login text */
.login-btn span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* =========================================================
DARK MODE
White button needs DARK text
========================================================= */
html[data-theme="dark"] .login-btn,
body.theme-dark .login-btn {
background: #ffffff !important;
color: #071126 !important;
-webkit-text-fill-color: #071126 !important;
}
html[data-theme="dark"] .login-btn span,
body.theme-dark .login-btn span {
color: #071126 !important;
-webkit-text-fill-color: #071126 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Login icon in dark mode */
html[data-theme="dark"] .login-btn svg,
body.theme-dark .login-btn svg {
stroke: #071126 !important;
color: #071126 !important;
}
/* =========================================================
LIGHT MODE
========================================================= */
html[data-theme="light"] .login-btn,
body.theme-light .login-btn {
background: var(--navy) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html[data-theme="light"] .login-btn span,
body.theme-light .login-btn span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* =========================================================
MOBILE
Your existing CSS hides .login-btn span below 900px.
Keep the text visible.
========================================================= */
@media (max-width: 899px) {
.login-btn {
width: auto !important;
min-width: 76px !important;
height: 40px !important;
padding: 0 16px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50px !important;
}
.login-btn span {
display: inline !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Dark mode mobile */
html[data-theme="dark"] .login-btn span,
body.theme-dark .login-btn span {
color: #071126 !important;
-webkit-text-fill-color: #071126 !important;
}
}
/* =========================================================
VERY SMALL SCREENS
========================================================= */
@media (max-width: 600px) {
.login-btn {
min-width: 72px !important;
padding: 0 14px !important;
font-size: 12px !important;
}
.login-btn span {
display: inline !important;
}
}
/* DARK MODE — VISION JOURNEY TEXT ALL WHITE */
body.theme-dark h1,
body.theme-dark h1 span,
body.theme-dark h1 strong,
body.theme-dark h1 em,
body.theme-dark h2,
body.theme-dark h2 span,
body.theme-dark h2 strong,
body.theme-dark h2 em {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
}
/* =========================================================
HOME PAGE 2 — BRAND HOVER VISIBILITY FIX
========================================================= */
/* LIGHT MODE */
html[data-theme="light"] body.home2-page .h2-brands span {
color: #52627c !important;
-webkit-text-fill-color: #52627c !important;
opacity: 1 !important;
visibility: visible !important;
transition:
color 0.3s ease,
transform 0.3s ease,
text-shadow 0.3s ease;
}
html[data-theme="light"] body.home2-page .h2-brands span:hover {
color: #2867ff !important;
-webkit-text-fill-color: #2867ff !important;
opacity: 1 !important;
visibility: visible !important;
transform: translateY(-4px) !important;
text-shadow:
0 0 10px rgba(40, 103, 255, 0.22) !important;
}
/* DARK MODE */
html[data-theme="dark"] body.home2-page .h2-brands span {
color: #c4cede !important;
-webkit-text-fill-color: #c4cede !important;
opacity: 1 !important;
}
html[data-theme="dark"] body.home2-page .h2-brands span:hover {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
transform: translateY(-4px) !important;
text-shadow:
0 0 10px rgba(255, 255, 255, 0.45),
0 0 22px rgba(40, 103, 255, 0.5) !important;
}
/* =========================================================
HOME PAGE 2 — EXACT LIGHT MODE TEXT FIX
Uses the actual classes from home2.html
========================================================= */
/* =========================================================
1. PRECISION OPTICS
Background = dark image
Text = WHITE
========================================================= */
html[data-theme="light"] body.home2-page .fresh-image-caption {
position: absolute !important;
z-index: 20 !important;
opacity: 1 !important;
visibility: visible !important;
}
html[data-theme="light"] body.home2-page .fresh-image-caption span {
color: #83a9ff !important;
-webkit-text-fill-color: #83a9ff !important;
opacity: 1 !important;
visibility: visible !important;
}
html[data-theme="light"] body.home2-page .fresh-image-caption b {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow:
0 2px 8px rgba(0, 0, 0, 0.65),
0 0 18px rgba(0, 0, 0, 0.25) !important;
}
/* =========================================================
2. CLEARVISION FLOW
Light background
CLEAR = DARK NAVY
VISION = BLUE
========================================================= */
html[data-theme="light"] body.home2-page .fresh-jump-word {
color: #071426 !important;
-webkit-text-fill-color: #071426 !important;
opacity: 1 !important;
visibility: visible !important;
}
html[data-theme="light"] body.home2-page .fresh-jump-word span {
color: #071426 !important;
-webkit-text-fill-color: #071426 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* VISION — blue */
html[data-theme="light"] body.home2-page
.fresh-jump-word span:nth-of-type(n+7) {
color: #2867ff !important;
-webkit-text-fill-color: #2867ff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* =========================================================
3. THE CLEARVISION FLOW LABEL
========================================================= */
html[data-theme="light"] body.home2-page .fresh-mini-label {
color: #6f9cff !important;
-webkit-text-fill-color: #6f9cff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* =========================================================
4. DESCRIPTION UNDER CLEARVISION
========================================================= */
html[data-theme="light"] body.home2-page .fresh-feature-copy p {
color: #263b5b !important;
-webkit-text-fill-color: #263b5b !important;
opacity: 1 !important;
visibility: visible !important;
}
/* =========================================================
5. PREVENT GENERIC LIGHT-MODE RULES FROM OVERRIDING
========================================================= */
html[data-theme="light"] body.home2-page
.fresh-image-caption b,
html[data-theme="light"] body.home2-page
.fresh-jump-word,
html[data-theme="light"] body.home2-page
.fresh-jump-word span {
mix-blend-mode: normal !important;
filter: none !important;
}
/* =========================================================
HOME 2 — BOTTOM ACTION TEXT SIZE
========================================================= */
html[data-theme="light"] body.home2-page .fresh-action-content b {
font-size: 19px !important;
line-height: 1.3 !important;
font-weight: 800 !important;
color: #071426 !important;
-webkit-text-fill-color: #071426 !important;
opacity: 1 !important;
}
html[data-theme="light"] body.home2-page .fresh-action-content small {
font-size: 15px !important;
line-height: 1.5 !important;
font-weight: 500 !important;
color: #263b5b !important;
-webkit-text-fill-color: #263b5b !important;
opacity: 1 !important;
}
/* TABLET */
@media (max-width: 900px) {
html[data-theme="light"] body.home2-page .fresh-action-content b {
font-size: 19px !important;
}
html[data-theme="light"] body.home2-page .fresh-action-content small {
font-size: 16px !important;
}
}
/* MOBILE */
@media (max-width: 600px) {
html[data-theme="light"] body.home2-page .fresh-action-content b {
font-size: 17px !important;
}
html[data-theme="light"] body.home2-page .fresh-action-content small {
font-size: 15px !important;
}
}
/* =========================================================
HOME PAGE 2 — LIGHT MODE
OPTICAL CIRCLE + CLEAR VISION / 2026 VISIBILITY FIX
========================================================= */
/* ---------- OUTER / INNER CIRCLES ---------- */
html[data-theme="light"] body.home2-page .fresh-mark-ring {
border-color: rgba(72, 126, 255, 0.42) !important;
opacity: 1 !important;
visibility: visible !important;
}
html[data-theme="light"] body.home2-page .fresh-mark-ring.ring-a {
border-color: rgba(72, 126, 255, 0.42) !important;
}
html[data-theme="light"] body.home2-page .fresh-mark-ring.ring-b {
border-color: rgba(72, 126, 255, 0.34) !important;
}
html[data-theme="light"] body.home2-page .fresh-mark-ring.ring-c {
border-color: rgba(72, 126, 255, 0.48) !important;
}
/* ---------- LENS / EYE SHAPE ---------- */
html[data-theme="light"] body.home2-page .fresh-mark-lens {
border-color: #6f9cff !important;
box-shadow:
0 0 18px rgba(76, 132, 255, 0.28) !important;
opacity: 1 !important;
visibility: visible !important;
}
html[data-theme="light"] body.home2-page .fresh-mark-lens::after {
background: #6f9cff !important;
opacity: 1 !important;
}
/* ---------- BLUE DOT ---------- */
html[data-theme="light"] body.home2-page .fresh-mark-dot {
background: #4f84ff !important;
box-shadow:
0 0 0 8px rgba(79, 132, 255, 0.13),
0 0 22px rgba(79, 132, 255, 0.55) !important;
opacity: 1 !important;
}
/* ---------- CLEAR VISION / 2026 ---------- */
html[data-theme="light"] body.home2-page .fresh-mark-label {
color: #6b82ad !important;
-webkit-text-fill-color: #6b82ad !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 0.2em !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow: none !important;
}
/* ---------- WHOLE MARK ---------- */
html[data-theme="light"] body.home2-page .fresh-head-mark {
opacity: 1 !important;
visibility: visible !important;
}
/* =========================================================
HOME PAGE 2 — ACTION CARD HOVER ARROW VISIBILITY
========================================================= */
/* Arrow container */
html[data-theme="light"] body.home2-page .fresh-action-arrow,
html[data-theme="light"] body.home2-page .fresh-action-arrow i,
html[data-theme="light"] body.home2-page .fresh-action-arrow svg {
color: #2867ff !important;
-webkit-text-fill-color: #2867ff !important;
fill: #2867ff !important;
stroke: #2867ff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Arrow on hover */
html[data-theme="light"] body.home2-page .fresh-action-card:hover .fresh-action-arrow,
html[data-theme="light"] body.home2-page .fresh-action-card:hover .fresh-action-arrow i,
html[data-theme="light"] body.home2-page .fresh-action-card:hover .fresh-action-arrow svg {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
fill: #ffffff !important;
stroke: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Make the arrow circle visible */
html[data-theme="light"] body.home2-page .fresh-action-card:hover .fresh-action-arrow {
background: #2867ff !important;
border-color: #2867ff !important;
box-shadow:
0 0 0 6px rgba(40, 103, 255, .12),
0 8px 20px rgba(40, 103, 255, .25) !important;
transform: translateX(4px) !important;
}
/* Dark mode */
html[data-theme="dark"] body.home2-page .fresh-action-card:hover .fresh-action-arrow,
html[data-theme="dark"] body.home2-page .fresh-action-card:hover .fresh-action-arrow i,
html[data-theme="dark"] body.home2-page .fresh-action-card:hover .fresh-action-arrow svg {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
fill: #ffffff !important;
stroke: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* =========================================================
FOOTER SOCIAL ICONS — HOVER VISIBILITY FIX
========================================================= */
/* Normal footer icons */
footer .social-links a,
footer .social-icons a,
footer .footer-social a,
.footer-social a {
color: #263b5b !important;
-webkit-text-fill-color: #263b5b !important;
opacity: 1 !important;
visibility: visible !important;
transition:
color .25s ease,
background .25s ease,
border-color .25s ease,
transform .25s ease,
box-shadow .25s ease !important;
}
/* Icons inside */
footer .social-links a i,
footer .social-links a svg,
footer .social-icons a i,
footer .social-icons a svg,
footer .footer-social a i,
footer .footer-social a svg,
.footer-social a i,
.footer-social a svg {
color: #263b5b !important;
-webkit-text-fill-color: #263b5b !important;
fill: #263b5b !important;
stroke: #263b5b !important;
opacity: 1 !important;
visibility: visible !important;
}
/* =========================================================
LIGHT MODE HOVER
========================================================= */
html[data-theme="light"] footer .social-links a:hover,
html[data-theme="light"] footer .social-icons a:hover,
html[data-theme="light"] footer .footer-social a:hover,
html[data-theme="light"] .footer-social a:hover {
background: #2867ff !important;
border-color: #2867ff !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
transform: translateY(-4px) scale(1.05) !important;
box-shadow:
0 8px 20px rgba(40, 103, 255, .25),
0 0 0 5px rgba(40, 103, 255, .10) !important;
}
html[data-theme="light"] footer .social-links a:hover i,
html[data-theme="light"] footer .social-links a:hover svg,
html[data-theme="light"] footer .social-icons a:hover i,
html[data-theme="light"] footer .social-icons a:hover svg,
html[data-theme="light"] footer .footer-social a:hover i,
html[data-theme="light"] footer .footer-social a:hover svg,
html[data-theme="light"] .footer-social a:hover i,
html[data-theme="light"] .footer-social a:hover svg {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
fill: #ffffff !important;
stroke: #ffffff !important;
}
/* =========================================================
DARK MODE HOVER
========================================================= */
html[data-theme="dark"] footer .social-links a:hover,
html[data-theme="dark"] footer .social-icons a:hover,
html[data-theme="dark"] footer .footer-social a:hover,
html[data-theme="dark"] .footer-social a:hover {
background: #2867ff !important;
border-color: #6f9cff !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
transform: translateY(-4px) scale(1.05) !important;
box-shadow:
0 0 15px rgba(40, 103, 255, .55),
0 0 30px rgba(40, 103, 255, .25) !important;
}
html[data-theme="dark"] footer .social-links a:hover i,
html[data-theme="dark"] footer .social-links a:hover svg,
html[data-theme="dark"] footer .social-icons a:hover i,
html[data-theme="dark"] footer .social-icons a:hover svg,
html[data-theme="dark"] footer .footer-social a:hover i,
html[data-theme="dark"] footer .footer-social a:hover svg,
html[data-theme="dark"] .footer-social a:hover i,
html[data-theme="dark"] .footer-social a:hover svg {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
fill: #ffffff !important;
stroke: #ffffff !important;
}
/* =========================================================
HOME PAGE 2
LIGHT MODE — CLEAR VISION MARK VISIBILITY FIX
========================================================= */
/* Main mark area */
html[data-theme="light"] body.home2-page .fresh-head-mark {
opacity: 1 !important;
visibility: visible !important;
}
/* =========================================================
OUTER / MIDDLE / INNER CIRCLES
========================================================= */
html[data-theme="light"] body.home2-page .fresh-head-mark .fresh-mark-ring {
border: 1.5px solid rgba(55, 112, 245, 0.42) !important;
opacity: 1 !important;
visibility: visible !important;
}
html[data-theme="light"] body.home2-page .fresh-head-mark .fresh-mark-ring.ring-a {
border-color: rgba(55, 112, 245, 0.48) !important;
}
html[data-theme="light"] body.home2-page .fresh-head-mark .fresh-mark-ring.ring-b {
border-color: rgba(55, 112, 245, 0.38) !important;
}
html[data-theme="light"] body.home2-page .fresh-head-mark .fresh-mark-ring.ring-c {
border-color: rgba(55, 112, 245, 0.58) !important;
}
/* =========================================================
LENS / EYE SHAPE
========================================================= */
html[data-theme="light"] body.home2-page .fresh-head-mark .fresh-mark-lens {
border: 3px solid #6f9cff !important;
opacity: 1 !important;
visibility: visible !important;
box-shadow:
0 0 15px rgba(40, 103, 255, 0.22),
0 0 30px rgba(40, 103, 255, 0.12) !important;
}
html[data-theme="light"] body.home2-page .fresh-head-mark .fresh-mark-lens::after {
background: #6f9cff !important;
opacity: 1 !important;
}
/* =========================================================
BLUE DOT
========================================================= */
html[data-theme="light"] body.home2-page .fresh-head-mark .fresh-mark-dot {
background: #2867ff !important;
opacity: 1 !important;
visibility: visible !important;
box-shadow:
0 0 0 8px rgba(40, 103, 255, 0.12),
0 0 22px rgba(40, 103, 255, 0.42) !important;
}
/* =========================================================
CLEAR VISION / 2026
========================================================= */
html[data-theme="light"] body.home2-page .fresh-head-mark .fresh-mark-label {
color: #2867ff !important;
-webkit-text-fill-color: #2867ff !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: .2em !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow:
0 1px 4px rgba(40, 103, 255, 0.14) !important;
}
/* =========================================================
HOME PAGE 2 — CLEAR VISION MARK
LIGHT + DARK MODE VISIBILITY FIX
========================================================= */
/* =========================================================
LIGHT MODE
========================================================= */
html[data-theme="light"] body.home2-page .fresh-head-mark {
opacity: 1 !important;
visibility: visible !important;
}
/* Rings */
html[data-theme="light"] body.home2-page .fresh-mark-ring {
border: 2px solid rgba(40, 103, 255, 0.42) !important;
opacity: 1 !important;
visibility: visible !important;
}
html[data-theme="light"] body.home2-page .fresh-mark-ring.ring-a {
border-color: rgba(40, 103, 255, 0.50) !important;
}
html[data-theme="light"] body.home2-page .fresh-mark-ring.ring-b {
border-color: rgba(40, 103, 255, 0.42) !important;
}
html[data-theme="light"] body.home2-page .fresh-mark-ring.ring-c {
border-color: rgba(40, 103, 255, 0.60) !important;
}
/* Lens */
html[data-theme="light"] body.home2-page .fresh-mark-lens {
border: 3px solid #5f91ff !important;
opacity: 1 !important;
visibility: visible !important;
box-shadow:
0 0 15px rgba(40, 103, 255, .30),
0 0 30px rgba(40, 103, 255, .15) !important;
}
html[data-theme="light"] body.home2-page .fresh-mark-lens::after {
background: #5f91ff !important;
opacity: 1 !important;
}
/* Dot */
html[data-theme="light"] body.home2-page .fresh-mark-dot {
background: #2867ff !important;
opacity: 1 !important;
box-shadow:
0 0 0 8px rgba(40, 103, 255, .16),
0 0 25px rgba(40, 103, 255, .60) !important;
}
/* CLEAR VISION / 2026 */
html[data-theme="light"] body.home2-page .fresh-mark-label {
color: #2867ff !important;
-webkit-text-fill-color: #2867ff !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: .18em !important;
opacity: 1 !important;
visibility: visible !important;
}
/* =========================================================
DARK MODE
========================================================= */
html[data-theme="dark"] body.home2-page .fresh-head-mark {
opacity: 1 !important;
visibility: visible !important;
}
/* Rings */
html[data-theme="dark"] body.home2-page .fresh-mark-ring {
border: 2px solid rgba(125, 165, 255, 0.55) !important;
opacity: 1 !important;
visibility: visible !important;
}
html[data-theme="dark"] body.home2-page .fresh-mark-ring.ring-a {
border-color: rgba(125, 165, 255, 0.62) !important;
}
html[data-theme="dark"] body.home2-page .fresh-mark-ring.ring-b {
border-color: rgba(125, 165, 255, 0.50) !important;
}
html[data-theme="dark"] body.home2-page .fresh-mark-ring.ring-c {
border-color: rgba(125, 165, 255, 0.72) !important;
}
/* Lens */
html[data-theme="dark"] body.home2-page .fresh-mark-lens {
border: 3px solid #8eb4ff !important;
opacity: 1 !important;
visibility: visible !important;
box-shadow:
0 0 18px rgba(79, 132, 255, .55),
0 0 35px rgba(79, 132, 255, .30) !important;
}
html[data-theme="dark"] body.home2-page .fresh-mark-lens::after {
background: #8eb4ff !important;
opacity: 1 !important;
}
/* Dot */
html[data-theme="dark"] body.home2-page .fresh-mark-dot {
background: #5f91ff !important;
opacity: 1 !important;
box-shadow:
0 0 0 8px rgba(95, 145, 255, .18),
0 0 28px rgba(79, 132, 255, .75) !important;
}
/* CLEAR VISION / 2026 */
html[data-theme="dark"] body.home2-page .fresh-mark-label {
color: #a9c3ff !important;
-webkit-text-fill-color: #a9c3ff !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: .18em !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow:
0 0 10px rgba(100, 150, 255, .35) !important;
}
/* =========================================================
HOME PAGE 2 — TRUST BAR TEXT SIZE
Products / Policy / On orders $50+
========================================================= */
html[data-theme="dark"] .home2-page .h2-trust small {
font-size: 17px !important;
line-height: 1.5 !important;
font-weight: 600 !important;
color: #b9c6dc !important;
-webkit-text-fill-color: #b9c6dc !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Main text:
100% Authentic / 7 Days Return / Free Shipping
*/
html[data-theme="dark"] .home2-page .h2-trust b {
font-size: 19px !important;
line-height: 1.35 !important;
font-weight: 800 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
}
/* =========================================================
LIGHT MODE
========================================================= */
html[data-theme="light"] .home2-page .h2-trust small {
font-size: 17px !important;
line-height: 1.5 !important;
font-weight: 600 !important;
color: #40516e !important;
-webkit-text-fill-color: #40516e !important;
opacity: 1 !important;
visibility: visible !important;
}
html[data-theme="light"] .home2-page .h2-trust b {
font-size: 19px !important;
font-weight: 800 !important;
color: #071426 !important;
-webkit-text-fill-color: #071426 !important;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
html[data-theme="dark"] .home2-page .h2-trust small,
html[data-theme="light"] .home2-page .h2-trust small {
font-size: 15px !important;
}
html[data-theme="dark"] .home2-page .h2-trust b,
html[data-theme="light"] .home2-page .h2-trust b {
font-size: 17px !important;
}
}
/* =========================================================
ABOUT PAGE — LIGHT MODE FINAL TEXT CONTRAST FIX
========================================================= */
html[data-theme="light"] body.about-page p {
color: #172640 !important;
-webkit-text-fill-color: #172640 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* =========================================================
HERO
========================================================= */
html[data-theme="light"] body.about-page .about-lead {
color: #172640 !important;
-webkit-text-fill-color: #172640 !important;
font-size: 16px !important;
font-weight: 500 !important;
opacity: 1 !important;
}
html[data-theme="light"] body.about-page .about-hero-note b {
color: #071426 !important;
-webkit-text-fill-color: #071426 !important;
opacity: 1 !important;
}
html[data-theme="light"] body.about-page .about-hero-note small {
color: #263b5b !important;
-webkit-text-fill-color: #263b5b !important;
opacity: 1 !important;
}
/* =========================================================
HERO FEATURES
========================================================= */
html[data-theme="light"] body.about-page .about-hero-features strong {
color: #071426 !important;
-webkit-text-fill-color: #071426 !important;
font-weight: 800 !important;
}
html[data-theme="light"] body.about-page .about-hero-features small {
color: #263b5b !important;
-webkit-text-fill-color: #263b5b !important;
font-size: 15px !important;
font-weight: 500 !important;
opacity: 1 !important;
}
/* =========================================================
STORY
========================================================= */
html[data-theme="light"] body.about-page .about-story-copy h2,
html[data-theme="light"] body.about-page .about-story-copy h2 span {
color: #071426 !important;
-webkit-text-fill-color: #071426 !important;
}
html[data-theme="light"] body.about-page .about-story-copy p {
color: #172640 !important;
-webkit-text-fill-color: #172640 !important;
font-size: 16px !important;
line-height: 1.8 !important;
font-weight: 500 !important;
opacity: 1 !important;
}
/* =========================================================
EXPERTISE
========================================================= */
html[data-theme="light"] body.about-page .expert-copy h2,
html[data-theme="light"] body.about-page .expert-copy h2 span {
color: #071426 !important;
-webkit-text-fill-color: #071426 !important;
}
html[data-theme="light"] body.about-page .expert-copy p {
color: #172640 !important;
-webkit-text-fill-color: #172640 !important;
font-size: 16px !important;
line-height: 1.8 !important;
font-weight: 500 !important;
opacity: 1 !important;
}
/* =========================================================
VALUES
========================================================= */
html[data-theme="light"] body.about-page .about-section-head h2,
html[data-theme="light"] body.about-page .about-section-head h2 span {
color: #071426 !important;
-webkit-text-fill-color: #071426 !important;
}
html[data-theme="light"] body.about-page .value-item h3 {
color: #071426 !important;
-webkit-text-fill-color: #071426 !important;
font-size: 20px !important;
font-weight: 800 !important;
}
html[data-theme="light"] body.about-page .value-item p {
color: #172640 !important;
-webkit-text-fill-color: #172640 !important;
font-size: 15px !important;
line-height: 1.7 !important;
font-weight: 500 !important;
opacity: 1 !important;
}
/* Value numbers */
html[data-theme="light"] body.about-page .value-item > b {
color: #2867ff !important;
-webkit-text-fill-color: #2867ff !important;
opacity: 1 !important;
}
/* =========================================================
CUSTOMER EXPERIENCE
========================================================= */
html[data-theme="light"] body.about-page .quote-copy-redesign h2,
html[data-theme="light"] body.about-page .quote-copy-redesign h2 span {
color: #071426 !important;
-webkit-text-fill-color: #071426 !important;
}
html[data-theme="light"] body.about-page .quote-copy-redesign blockquote {
color: #172640 !important;
-webkit-text-fill-color: #172640 !important;
font-size: 17px !important;
line-height: 1.75 !important;
opacity: 1 !important;
}
html[data-theme="light"] body.about-page .quote-person strong {
color: #071426 !important;
-webkit-text-fill-color: #071426 !important;
}
html[data-theme="light"] body.about-page .quote-person div span {
color: #40516e !important;
-webkit-text-fill-color: #40516e !important;
opacity: 1 !important;
}
/* =========================================================
CTA — VISIT CLEARVISION
========================================================= */
html[data-theme="light"] body.about-page .about-cta-copy h2,
html[data-theme="light"] body.about-page .about-cta-copy h2 span {
color: #071426 !important;
-webkit-text-fill-color: #071426 !important;
}
html[data-theme="light"] body.about-page .about-cta-copy p {
color: #172640 !important;
-webkit-text-fill-color: #172640 !important;
font-size: 16px !important;
line-height: 1.8 !important;
font-weight: 500 !important;
opacity: 1 !important;
}
/* =========================================================
SMALL LABELS
========================================================= */
html[data-theme="light"] body.about-page .about-eyebrow,
html[data-theme="light"] body.about-page .about-eyebrow b {
color: #2867ff !important;
-webkit-text-fill-color: #2867ff !important;
opacity: 1 !important;
}
/* =========================================================
LINKS
========================================================= */
html[data-theme="light"] body.about-page .about-action-link,
html[data-theme="light"] body.about-page .about-text-link {
color: #174cae !important;
-webkit-text-fill-color: #174cae !important;
opacity: 1 !important;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 760px) {
html[data-theme="light"] body.about-page .about-lead,
html[data-theme="light"] body.about-page .about-story-copy p,
html[data-theme="light"] body.about-page .expert-copy p,
html[data-theme="light"] body.about-page .about-cta-copy p {
font-size: 15px !important;
}
html[data-theme="light"] body.about-page .value-item p {
font-size: 14px !important;
}
html[data-theme="light"] body.about-page .quote-copy-redesign blockquote {
font-size: 15px !important;
}
}
/* =========================================================
READING PAGE — READ LABEL CUT FIX
Keep image shape, only fix label clipping
========================================================= */
.reading-page .reading-glass-label {
z-index: 20 !important;
/* Move the label safely inside the clipped image */
right: 15% !important;
bottom: 8% !important;
min-width: 155px !important;
max-width: 180px !important;
padding: 15px 18px !important;
box-sizing: border-box !important;
overflow: visible !important;
white-space: normal !important;
}
/* READ / 01 */
.reading-page .reading-glass-label strong {
display: block !important;
font-size: 12px !important;
line-height: 1.3 !important;
white-space: nowrap !important;
color: #ffffff !important;
}
/* Lightweight clarity */
.reading-page .reading-glass-label small {
display: block !important;
font-size: 13px !important;
line-height: 1.45 !important;
white-space: nowrap !important;
color: #ffffff !important;
opacity: 1 !important;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.reading-page .reading-glass-label {
right: 10% !important;
bottom: 8% !important;
min-width: 145px !important;
max-width: 165px !important;
padding: 12px 15px !important;
}
.reading-page .reading-glass-label small {
font-size: 12px !important;
}
}
/* =========================================================
READING PAGE — LIGHT MODE DARK TEXT FIX
========================================================= */
html[data-theme="light"] .reading-page .reading-lead,
html[data-theme="light"] .reading-page .reading-story-copy > p,
html[data-theme="light"] .reading-page .reading-feature small,
html[data-theme="light"] .reading-page .reading-mini-points {
color: #172640 !important;
-webkit-text-fill-color: #172640 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Main headings */
html[data-theme="light"] .reading-page .reading-title,
html[data-theme="light"] .reading-page .reading-story-copy h2 {
color: #050f22 !important;
-webkit-text-fill-color: #050f22 !important;
opacity: 1 !important;
}
/* Reading mini points:
01 Clear vision
02 Lightweight
03 Everyday fit
*/
html[data-theme="light"] .reading-page .reading-mini-points span {
color: #172640 !important;
-webkit-text-fill-color: #172640 !important;
font-weight: 800 !important;
opacity: 1 !important;
}
/* Feature titles:
Clear focus / Easy fit / Modern style
*/
html[data-theme="light"] .reading-page .reading-feature b {
color: #050f22 !important;
-webkit-text-fill-color: #050f22 !important;
font-weight: 800 !important;
opacity: 1 !important;
}
/* Feature descriptions */
html[data-theme="light"] .reading-page .reading-feature small {
color: #172640 !important;
-webkit-text-fill-color: #172640 !important;
font-weight: 500 !important;
opacity: 1 !important;
}
/* Numbers 01 / 02 / 03 */
html[data-theme="light"] .reading-page .reading-feature i {
color: #2867ff !important;
-webkit-text-fill-color: #2867ff !important;
opacity: 1 !important;
}
/* =========================================================
READING PAGE — CTA ORBIT
LIGHT MODE VISIBILITY FIX
========================================================= */
/* Main outer circle */
html[data-theme="light"] .reading-page .reading-cta-orbit {
border: 2px solid rgba(45, 105, 245, 0.62) !important;
opacity: 1 !important;
visibility: visible !important;
box-shadow:
0 0 20px rgba(45, 105, 245, 0.10) !important;
}
/* Inner dashed circle */
html[data-theme="light"] .reading-page .reading-cta-orbit::before {
border: 1.5px dashed rgba(45, 105, 245, 0.48) !important;
opacity: 1 !important;
}
/* Elliptical orbit */
html[data-theme="light"] .reading-page .reading-cta-orbit::after {
border: 1.5px dashed rgba(45, 105, 245, 0.38) !important;
opacity: 1 !important;
}
/* Center lens */
html[data-theme="light"] .reading-page .reading-cta-orbit span {
border: 3px solid #4c83ff !important;
opacity: 1 !important;
visibility: visible !important;
box-shadow:
0 0 12px rgba(76, 131, 255, 0.22) !important;
}
/* Lens horizontal line */
html[data-theme="light"] .reading-page .reading-cta-orbit span::after {
background: #2867ff !important;
height: 2px !important;
opacity: 1 !important;
}
/* =========================================================
CV — IMPORTANT
Make CV visible in Light Mode
========================================================= */
html[data-theme="light"] .reading-page .reading-cta-orbit i {
color: #071426 !important;
-webkit-text-fill-color: #071426 !important;
font-size: 13px !important;
font-weight: 900 !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow:
0 0 6px rgba(255, 255, 255, 0.9) !important;
}
/* =========================================================
HORIZONTAL LINE
========================================================= */
html[data-theme="light"] .reading-page .reading-cta-line {
background:
linear-gradient(
90deg,
transparent,
rgba(45, 105, 245, 0.48),
transparent
) !important;
opacity: 1 !important;
}
/* =========================================================
CLARITY / COMFORT / FIT
========================================================= */
html[data-theme="light"] .reading-page .reading-cta-center small {
color: #263b5b !important;
-webkit-text-fill-color: #263b5b !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .18em !important;
opacity: 1 !important;
visibility: visible !important;
}
/* =========================================================
DARK MODE — ALSO MAKE IT CLEARER
========================================================= */
html[data-theme="dark"] .reading-page .reading-cta-orbit {
border-color: rgba(110, 160, 255, 0.72) !important;
box-shadow:
0 0 22px rgba(40, 103, 255, 0.20) !important;
}
html[data-theme="dark"] .reading-page .reading-cta-orbit::before {
border-color: rgba(110, 160, 255, 0.52) !important;
}
html[data-theme="dark"] .reading-page .reading-cta-orbit::after {
border-color: rgba(110, 160, 255, 0.42) !important;
}
html[data-theme="dark"] .reading-page .reading-cta-orbit i {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
}
html[data-theme="dark"] .reading-page .reading-cta-center small {
color: #b9caff !important;
-webkit-text-fill-color: #b9caff !important;
opacity: 1 !important;
}
/* =========================================================
SUNGLASSES SECTION — LIGHT MODE GRID LINE FIX
Horizontal + Vertical lines
========================================================= */
/* Horizontal lines between UV400 / Polarized / Featherweight */
html[data-theme="light"] body.frames-page.theme-solar .fx-line-list div {
border-bottom: 1px solid rgba(25, 50, 90, 0.22) !important;
}
/* Bottom data-strip horizontal lines */
html[data-theme="light"] body.frames-page.theme-solar .solar-data-strip {
border-top: 1px solid rgba(25, 50, 90, 0.25) !important;
border-bottom: 1px solid rgba(25, 50, 90, 0.25) !important;
}
/* Vertical lines between
400 / 98% / ∞
*/
html[data-theme="light"] body.frames-page.theme-solar .solar-data-strip span {
border-right: 1px solid rgba(25, 50, 90, 0.20) !important;
}
html[data-theme="light"] body.frames-page.theme-solar .solar-data-strip span:last-child {
border-right: 0 !important;
}
/* =========================================================
VERTICAL GLASS GRID
========================================================= */
html[data-theme="light"] body.frames-page.theme-solar .solar-glass-grid {
opacity: 0.55 !important;
}
html[data-theme="light"] body.frames-page.theme-solar .solar-glass-grid i {
border-color: rgba(35, 70, 125, 0.12) !important;
}
/* =========================================================
MAKE THE LINES CLEARER ON HOVER
========================================================= */
html[data-theme="light"] body.frames-page.theme-solar .fx-line-list div:hover {
border-bottom-color: rgba(40, 103, 255, 0.35) !important;
}
/* =========================================================
KEEP DARK MODE UNCHANGED
========================================================= */
/* =========================================================
SUNGLASSES — CRACKED / REJOINED LABEL
LIGHT MODE VISIBILITY FIX
========================================================= */
html[data-theme="light"] body.frames-page.theme-solar .crack-center {
background: rgba(5, 12, 28, 0.88) !important;
border: 1px solid rgba(255, 190, 70, 0.65) !important;
opacity: 1 !important;
visibility: visible !important;
z-index: 20 !important;
}
/* CRACKED / REJOINED */
html[data-theme="light"] body.frames-page.theme-solar .crack-center b {
color: #ffd078 !important;
-webkit-text-fill-color: #ffd078 !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: .18em !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow: 0 1px 5px rgba(0,0,0,.7) !important;
}
/* ONE IMAGE · ONE PIECE */
html[data-theme="light"] body.frames-page.theme-solar .crack-center small {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .18em !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow: 0 1px 5px rgba(0,0,0,.7) !important;
}
/* Hover */
html[data-theme="light"] body.frames-page.theme-solar
.crack-assembly:hover .crack-center {
background: rgba(5, 12, 28, 0.94) !important;
}
html[data-theme="light"] body.frames-page.theme-solar
.crack-assembly:hover .crack-center b {
color: #ffe09a !important;
-webkit-text-fill-color: #ffe09a !important;
}
html[data-theme="light"] body.frames-page.theme-solar
.crack-assembly:hover .crack-center small {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}/* REMOVE CRACK TRACE HINT */
body.frames-page.theme-solar .crack-hint {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}/* =========================================================
LIGHT MODE — PRODUCT DESCRIPTION
========================================================= */
html[data-theme="light"] body.frames-page.theme-solar p {
color: #172640 !important;
-webkit-text-fill-color: #172640 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Brushed metal, deep lenses... */
html[data-theme="light"] body.frames-page.theme-solar
.solar-copy p,
html[data-theme="light"] body.frames-page.theme-solar
.solar-product-copy p,
html[data-theme="light"] body.frames-page.theme-solar
.product-copy p {
color: #172640 !important;
-webkit-text-fill-color: #172640 !important;
font-size: 16px !important;
line-height: 1.7 !important;
font-weight: 500 !important;
opacity: 1 !important;
}
/* =========================================================
SPORTS / VELOCITY — LIGHT MODE
STATS TEXT + HORIZONTAL / VERTICAL LINES
========================================================= */
html[data-theme="light"] .frames-page.theme-velocity .velocity-stats {
background:
radial-gradient(
circle at 50% 45%,
rgba(90, 130, 255, 0.10),
transparent 38%
),
linear-gradient(135deg, #eef3fb, #f9fbff) !important;
color: #0b1730 !important;
}
/* =========================================================
STAT CONTAINER
========================================================= */
html[data-theme="light"] .frames-page.theme-velocity .stat-runner {
border-top: 1px solid rgba(20, 45, 85, 0.28) !important;
border-bottom: 1px solid rgba(20, 45, 85, 0.28) !important;
}
/* =========================================================
VERTICAL DIVIDER LINES
========================================================= */
html[data-theme="light"] .frames-page.theme-velocity .stat-item {
border-right: 1px solid rgba(20, 45, 85, 0.24) !important;
}
html[data-theme="light"] .frames-page.theme-velocity .stat-item:last-child {
border-right: 0 !important;
}
/* =========================================================
NUMBERS
18g / 120° / 0%
========================================================= */
html[data-theme="light"] .frames-page.theme-velocity .stat-item strong {
color: #071426 !important;
-webkit-text-fill-color: #071426 !important;
opacity: 1 !important;
visibility: visible !important;
font-weight: 800 !important;
}
/* =========================================================
LABELS
ULTRA LIGHT / WIDE FIELD / DISTRACTION
========================================================= */
html[data-theme="light"] .frames-page.theme-velocity .stat-item span {
color: #344766 !important;
-webkit-text-fill-color: #344766 !important;
opacity: 1 !important;
visibility: visible !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .18em !important;
}
/* =========================================================
SMALL SYMBOL / DECORATION
========================================================= */
html[data-theme="light"] .frames-page.theme-velocity .stat-item i {
color: #2867ff !important;
-webkit-text-fill-color: #2867ff !important;
opacity: 1 !important;
}
/* =========================================================
DIAGONAL BACKGROUND LINES
========================================================= */
html[data-theme="light"] .frames-page.theme-velocity .speed-lines {
opacity: 1 !important;
background:
repeating-linear-gradient(
105deg,
transparent 0 65px,
rgba(55, 105, 185, 0.13) 66px 68px
) !important;
}
/* =========================================================
MOBILE — KEEP VERTICAL DIVIDERS REMOVED
========================================================= */
@media (max-width: 600px) {
html[data-theme="light"] .frames-page.theme-velocity .stat-item {
border-right: 0 !important;
border-bottom: 1px solid rgba(20, 45, 85, 0.24) !important;
}
html[data-theme="light"] .frames-page.theme-velocity .stat-item:last-child {
border-bottom: 0 !important;
}
html[data-theme="light"] .frames-page.theme-velocity .stat-item span {
font-size: 12px !important;
}
}
/* =========================================================
KIDS PAGE — LIGHT MODE
TEXT + CIRCLES + LINES VISIBILITY FIX
========================================================= */
/* =========================================================
01 — HERO
Flexible, comfy...
Explore the collection
========================================================= */
html[data-theme="light"] .frames-page.theme-play .fx-hero-copy p,
html.light .frames-page.theme-play .fx-hero-copy p,
body.light .frames-page.theme-play .fx-hero-copy p {
color: #172640 !important;
-webkit-text-fill-color: #172640 !important;
opacity: 1 !important;
visibility: visible !important;
font-weight: 600 !important;
}
html[data-theme="light"] .frames-page.theme-play .fx-action,
html.light .frames-page.theme-play .fx-action,
body.light .frames-page.theme-play .fx-action {
color: #172640 !important;
-webkit-text-fill-color: #172640 !important;
background: rgba(255,255,255,.72) !important;
border-bottom: 2px solid #ff74bd !important;
opacity: 1 !important;
visibility: visible !important;
font-weight: 800 !important;
}
html[data-theme="light"] .frames-page.theme-play .fx-action b,
html.light .frames-page.theme-play .fx-action b,
body.light .frames-page.theme-play .fx-action b {
color: #172640 !important;
-webkit-text-fill-color: #172640 !important;
}
/* =========================================================
02 — PICK A MOOD / COLOR WHEEL
========================================================= */
html[data-theme="light"] .frames-page.theme-play .color-play,
html.light .frames-page.theme-play .color-play,
body.light .frames-page.theme-play .color-play {
background:
radial-gradient(
circle at 50% 50%,
rgba(40,103,255,.08),
transparent 45%
),
#f4f6ff !important;
}
/* Color wheel dashed circle */
html[data-theme="light"] .frames-page.theme-play .color-wheel::before,
html.light .frames-page.theme-play .color-wheel::before,
body.light .frames-page.theme-play .color-wheel::before {
border-color: rgba(40,103,255,.28) !important;
opacity: 1 !important;
}
/* Color wheel text */
html[data-theme="light"] .frames-page.theme-play .color-wheel button span,
html.light .frames-page.theme-play .color-wheel button span,
body.light .frames-page.theme-play .color-wheel button span {
color: #071426 !important;
-webkit-text-fill-color: #071426 !important;
}
/* PICK A COLOR */
html[data-theme="light"] .frames-page.theme-play .color-note,
html.light .frames-page.theme-play .color-note,
body.light .frames-page.theme-play .color-note {
color: #e3489a !important;
-webkit-text-fill-color: #e3489a !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Background bubbles */
html[data-theme="light"] .frames-page.theme-play .bubble-field,
html.light .frames-page.theme-play .bubble-field,
body.light .frames-page.theme-play .bubble-field {
opacity: .75 !important;
}
/* =========================================================
03 — GROW WITH THEM
FLEX / SOFT / READY
========================================================= */
html[data-theme="light"] .frames-page.theme-play .grow-section,
html.light .frames-page.theme-play .grow-section,
body.light .frames-page.theme-play .grow-section {
background:
radial-gradient(
circle at 50% 50%,
rgba(84,215,255,.08),
transparent 45%
),
#f5f7ff !important;
}
/* Main grow circle */
html[data-theme="light"] .frames-page.theme-play .grow-ring,
html.light .frames-page.theme-play .grow-ring,
body.light .frames-page.theme-play .grow-ring {
border: 2px solid rgba(40,103,255,.30) !important;
opacity: 1 !important;
visibility: visible !important;
box-shadow:
0 0 20px rgba(40,103,255,.08) !important;
}
/* FLEX / SOFT / READY */
html[data-theme="light"] .frames-page.theme-play .grow-word,
html.light .frames-page.theme-play .grow-word,
body.light .frames-page.theme-play .grow-word {
opacity: 1 !important;
visibility: visible !important;
font-weight: 900 !important;
text-shadow:
0 1px 2px rgba(255,255,255,.9) !important;
}
/* FLEX */
html[data-theme="light"] .frames-page.theme-play .gw0 {
color: #28bfe8 !important;
-webkit-text-fill-color: #28bfe8 !important;
}
/* SOFT */
html[data-theme="light"] .frames-page.theme-play .gw1 {
color: #e3489a !important;
-webkit-text-fill-color: #e3489a !important;
}
/* READY */
html[data-theme="light"] .frames-page.theme-play .gw2 {
color: #d99a00 !important;
-webkit-text-fill-color: #d99a00 !important;
}
/* =========================================================
GROW SECTION TEXT
========================================================= */
html[data-theme="light"] .frames-page.theme-play .grow-section .fx-copy p,
html.light .frames-page.theme-play .grow-section .fx-copy p,
body.light .frames-page.theme-play .grow-section .fx-copy p {
color: #172640 !important;
-webkit-text-fill-color: #172640 !important;
opacity: 1 !important;
visibility: visible !important;
font-weight: 500 !important;
}
/* Heading */
html[data-theme="light"] .frames-page.theme-play .grow-section .fx-copy h2,
html.light .frames-page.theme-play .grow-section .fx-copy h2,
body.light .frames-page.theme-play .grow-section .fx-copy h2 {
color: #071426 !important;
-webkit-text-fill-color: #071426 !important;
opacity: 1 !important;
}
/* =========================================================
CHECK LINES
✓ Rounded edges
✓ Flexible temples
✓ Growing-face fit
========================================================= */
html[data-theme="light"] .frames-page.theme-play .grow-section .tiny-checks span,
html.light .frames-page.theme-play .grow-section .tiny-checks span,
body.light .frames-page.theme-play .grow-section .tiny-checks span {
color: #263b5b !important;
-webkit-text-fill-color: #263b5b !important;
border-bottom: 1px solid rgba(31,58,96,.28) !important;
opacity: 1 !important;
visibility: visible !important;
font-weight: 700 !important;
}
/* =========================================================
ALL KIDS SECTION DECORATIVE LINES
========================================================= */
html[data-theme="light"] .frames-page.theme-play .fx-shape,
html.light .frames-page.theme-play .fx-shape,
body.light .frames-page.theme-play .fx-shape {
border-color: rgba(40,103,255,.20) !important;
opacity: 1 !important;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
html[data-theme="light"] .frames-page.theme-play .fx-hero-copy p,
html.light .frames-page.theme-play .fx-hero-copy p,
body.light .frames-page.theme-play .fx-hero-copy p {
font-size: 15px !important;
}
html[data-theme="light"] .frames-page.theme-play .grow-section .tiny-checks span,
html.light .frames-page.theme-play .grow-section .tiny-checks span,
body.light .frames-page.theme-play .grow-section .tiny-checks span {
font-size: 15px !important;
}
}
/* =========================================================
LENSES PAGE — LIGHT MODE VISIBILITY FIX
Exact selectors from lenses.html
========================================================= */
html[data-theme="light"] body.lenses-page {
--lens-dark: #172640;
--lens-darker: #08162d;
--lens-muted: #40516f;
--lens-line: rgba(23, 38, 64, 0.24);
}
/* =========================================================
HERO DESCRIPTION
"The right lens is more than a prescription..."
========================================================= */
html[data-theme="light"] body.lenses-page
.lx-redesign-lead {
color: #263b5b !important;
-webkit-text-fill-color: #263b5b !important;
opacity: 1 !important;
visibility: visible !important;
font-weight: 500 !important;
}
/* Hero mini cards */
html[data-theme="light"] body.lenses-page
.lx-hero-mini-cards span {
color: #263b5b !important;
-webkit-text-fill-color: #263b5b !important;
opacity: 1 !important;
visibility: visible !important;
}
html[data-theme="light"] body.lenses-page
.lx-hero-mini-cards strong {
color: #08162d !important;
-webkit-text-fill-color: #08162d !important;
}
/* =========================================================
BIFOCAL SECTION
"Bifocal lenses combine..."
========================================================= */
html[data-theme="light"] body.lenses-page
.lx-bifocal-content .lx-redesign-section-lead {
color: #263b5b !important;
-webkit-text-fill-color: #263b5b !important;
opacity: 1 !important;
visibility: visible !important;
font-weight: 500 !important;
}
/* Bifocal heading */
html[data-theme="light"] body.lenses-page
.lx-bifocal-content .lx-redesign-section-title {
color: #101d35 !important;
-webkit-text-fill-color: #101d35 !important;
text-shadow: none !important;
opacity: 1 !important;
visibility: visible !important;
}
/* "without" */
html[data-theme="light"] body.lenses-page
.lx-bifocal-content .lx-redesign-section-title em {
color: #3975f6 !important;
-webkit-text-fill-color: #3975f6 !important;
}
/* =========================================================
BIFOCAL 01 / 02
========================================================= */
html[data-theme="light"] body.lenses-page
.lx-focus-row > div {
border-color: var(--lens-line) !important;
}
html[data-theme="light"] body.lenses-page
.lx-focus-row span {
color: #52709d !important;
-webkit-text-fill-color: #52709d !important;
}
html[data-theme="light"] body.lenses-page
.lx-focus-row strong {
color: #101d35 !important;
-webkit-text-fill-color: #101d35 !important;
}
html[data-theme="light"] body.lenses-page
.lx-focus-row small {
color: #52627d !important;
-webkit-text-fill-color: #52627d !important;
}
/* =========================================================
PROGRESSIVE / THIRD SECTION
========================================================= */
html[data-theme="light"] body.lenses-page
.lx-third-content p,
html[data-theme="light"] body.lenses-page
.lx-third-content small {
color: #263b5b !important;
-webkit-text-fill-color: #263b5b !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Third section stats */
html[data-theme="light"] body.lenses-page
.lx-third-stats strong {
color: #08162d !important;
-webkit-text-fill-color: #08162d !important;
}
html[data-theme="light"] body.lenses-page
.lx-third-stats span,
html[data-theme="light"] body.lenses-page
.lx-third-stats small {
color: #40516f !important;
-webkit-text-fill-color: #40516f !important;
}
/* =========================================================
COMPUTER / OCCUPATIONAL
Computer and occupational lenses...
========================================================= */
html[data-theme="light"] body.lenses-page
.lx-fourth-content p {
color: #263b5b !important;
-webkit-text-fill-color: #263b5b !important;
opacity: 1 !important;
visibility: visible !important;
font-weight: 500 !important;
}
html[data-theme="light"] body.lenses-page
.lx-fourth-content h2 {
color: #08162d !important;
-webkit-text-fill-color: #08162d !important;
opacity: 1 !important;
}
/* highlighted word */
html[data-theme="light"] body.lenses-page
.lx-fourth-content h2 span {
color: #3975f6 !important;
-webkit-text-fill-color: #3975f6 !important;
}
/* =========================================================
SCREEN / DESK / PEOPLE
========================================================= */
html[data-theme="light"] body.lenses-page
.lx-work-step {
border-bottom: 1px solid var(--lens-line) !important;
}
html[data-theme="light"] body.lenses-page
.lx-work-step > span {
color: #405f91 !important;
-webkit-text-fill-color: #405f91 !important;
}
html[data-theme="light"] body.lenses-page
.lx-work-step strong {
color: #101d35 !important;
-webkit-text-fill-color: #101d35 !important;
}
html[data-theme="light"] body.lenses-page
.lx-work-step small {
color: #40516f !important;
-webkit-text-fill-color: #40516f !important;
opacity: 1 !important;
}
/* Made around your working distance */
html[data-theme="light"] body.lenses-page
.lx-fourth-note b {
color: #101d35 !important;
-webkit-text-fill-color: #101d35 !important;
}
html[data-theme="light"] body.lenses-page
.lx-fourth-note small {
color: #40516f !important;
-webkit-text-fill-color: #40516f !important;
opacity: 1 !important;
}
/* =========================================================
SPECIALIZED LENSES
========================================================= */
html[data-theme="light"] body.lenses-page
.lx-stack-intro p {
color: #263b5b !important;
-webkit-text-fill-color: #263b5b !important;
opacity: 1 !important;
}
html[data-theme="light"] body.lenses-page
.lx-stack-intro h2 {
color: #08162d !important;
-webkit-text-fill-color: #08162d !important;
}
html[data-theme="light"] body.lenses-page
.lx-stack-intro h2 em {
color: #3975f6 !important;
-webkit-text-fill-color: #3975f6 !important;
}
/* SCROLL TO EXPLORE */
html[data-theme="light"] body.lenses-page
.lx-stack-line b {
color: #40516f !important;
-webkit-text-fill-color: #40516f !important;
opacity: 1 !important;
}
html[data-theme="light"] body.lenses-page
.lx-stack-line span {
background: #3975f6 !important;
}
/* =========================================================
COATING LAYERS
Anti-Reflective / Scratch-Resistant / UV...
========================================================= */
html[data-theme="light"] body.lenses-page
.lx-layer-card {
background: rgba(255, 255, 255, 0.86) !important;
border-color: rgba(23, 38, 64, 0.20) !important;
box-shadow:
0 12px 35px rgba(25, 45, 80, 0.10) !important;
}
html[data-theme="light"] body.lenses-page
.lx-layer-card span {
color: #52709d !important;
-webkit-text-fill-color: #52709d !important;
}
html[data-theme="light"] body.lenses-page
.lx-layer-card strong {
color: #101d35 !important;
-webkit-text-fill-color: #101d35 !important;
opacity: 1 !important;
}
html[data-theme="light"] body.lenses-page
.lx-layer-card small {
color: #40516f !important;
-webkit-text-fill-color: #40516f !important;
opacity: 1 !important;
visibility: visible !important;
}
/* =========================================================
COATING CENTER
========================================================= */
html[data-theme="light"] body.lenses-page
.lx-layer-core {
color: #08162d !important;
}
html[data-theme="light"] body.lenses-page
.lx-layer-core span,
html[data-theme="light"] body.lenses-page
.lx-layer-core b,
html[data-theme="light"] body.lenses-page
.lx-layer-core small {
color: #263b5b !important;
-webkit-text-fill-color: #263b5b !important;
opacity: 1 !important;
}
/* =========================================================
ORBIT / DECORATIVE LINES
========================================================= */
html[data-theme="light"] body.lenses-page
.lx-lens-orbit {
border-color: rgba(55, 110, 245, 0.24) !important;
opacity: 1 !important;
}
html[data-theme="light"] body.lenses-page
.lx-layer-orbit {
border-color: rgba(55, 110, 245, 0.20) !important;
opacity: 1 !important;
}
/* =========================================================
GENERAL LENSES PAGE SMALL TEXT
========================================================= */
html[data-theme="light"] body.lenses-page
.lx-kicker,
html[data-theme="light"] body.lenses-page
.lx-modern-kicker,
html[data-theme="light"] body.lenses-page
.lx-redesign-eyebrow {
color: #4c6b9b !important;
-webkit-text-fill-color: #4c6b9b !important;
opacity: 1 !important;
visibility: visible !important;
}
/* =========================================================================
FINAL RESPONSIVE OVERRIDE (Client requested fix)
- Applies the SAME hamburger nav behaviour to MOBILE + TABLET (<=899px)
- Outer navbar "Login" button is completely removed on <=899px
- LAPTOP (900px-1024px) keeps the normal full desktop navbar, unchanged
- Login stays reachable only inside the hamburger dropdown
(.mobile-nav-login), matching what was already built for mobile
- Placed last on purpose so it wins over every earlier conflicting
patch in this file (same selector weight, later in the cascade)
========================================================================= */
@media (max-width: 899px) {
/* Hamburger icon must always be visible on mobile + tablet (<=899px only) */
.menu-toggle {
display: flex !important;
}
/* Off-canvas dropdown menu (same look as the working mobile version) */
.nav-menu {
position: absolute !important;
top: calc(100% + 8px) !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: auto !important;
max-height: calc(100dvh - 88px) !important;
margin: 0 !important;
padding: 10px 14px 14px !important;
background: rgba(255,255,255,.97) !important;
backdrop-filter: blur(30px) !important;
-webkit-backdrop-filter: blur(30px) !important;
border: 1px solid var(--border) !important;
border-radius: 18px !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 4px !important;
overflow-y: auto !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(-8px) !important;
transition: opacity .3s ease, visibility .3s ease, transform .35s ease !important;
z-index: 1205 !important;
}
html[data-theme="dark"] .nav-menu,
body.theme-dark .nav-menu {
background: rgba(7,14,32,.97) !important;
}
.nav-menu.open {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) !important;
}
.nav-link {
width: 100% !important;
min-height: 50px !important;
justify-content: space-between !important;
border-bottom: 1px solid var(--border) !important;
font-size: 14px !important;
}
.nav-dropdown,
.dropdown-trigger {
width: 100% !important;
}
.dropdown-menu {
position: static !important;
width: 100% !important;
margin: 0 !important;
transform: none !important;
}
/* Outer navbar login button — removed on mobile + tablet (<=899px only) */
.login-btn {
display: none !important;
}
/* Login remains reachable inside the hamburger menu */
.mobile-nav-login {
display: flex !important;
}
}
/* Same-page navbar variants (frames / lenses / contact / contact-lenses)
share the .navbar markup, so make sure the hamburger nav-menu isn't
forced back into a single row by their page-specific rules. */
@media (max-width: 899px) {
.frames-page > .navbar .nav-menu,
.lenses-page > .navbar .nav-menu,
body.contact-page > .navbar .nav-menu,
body.contact-lenses-page > .navbar .nav-menu {
position: absolute !important;
top: calc(100% + 8px) !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
flex: 0 0 auto !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(-8px) !important;
}
.frames-page > .navbar .nav-menu.open,
.lenses-page > .navbar .nav-menu.open,
body.contact-page > .navbar .nav-menu.open,
body.contact-lenses-page > .navbar .nav-menu.open {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) !important;
}
.frames-page > .navbar .nav-link,
.lenses-page > .navbar .nav-link,
.frames-page > .navbar .dropdown-trigger,
.lenses-page > .navbar .dropdown-trigger {
white-space: normal !important;
width: 100% !important;
font-size: 14px !important;
}
}
/* ============================================================
CLEARVISION — LENSES + CONTACT LENSES
FINAL NO-GAP / RESPONSIVE STRUCTURE
Desktop: normal navbar
Tablet + Mobile: hamburger
No horizontal overflow / accidental blank side gaps
============================================================ */
/* Keep every page edge-to-edge and prevent the browser's default
inline whitespace / overflow from creating visible gaps. */
html,
body {
width: 100%;
max-width: 100%;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
}
body.lenses-page,
body.contact-lenses-page {
width: 100%;
max-width: 100%;
margin: 0 !important;
padding: 0 !important;
}
/* The page content starts directly after the header. */
body.lenses-page main,
body.contact-lenses-page main {
width: 100%;
max-width: 100%;
margin: 0 !important;
padding-left: 0;
padding-right: 0;
}
/* Remove accidental gaps caused by first/last-child margins. */
body.lenses-page main > section:first-child,
body.contact-lenses-page main > section:first-child {
margin-top: 0 !important;
}
body.lenses-page main > section:last-child,
body.contact-lenses-page main > section:last-child {
margin-bottom: 0 !important;
}
/* Make all direct page sections full width. */
body.lenses-page main > section,
body.contact-lenses-page main > section {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* ============================================================
LENSES PAGE
============================================================ */
body.lenses-page .lenses-new {
width: 100%;
max-width: 100%;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
}
body.lenses-page .lx-hero,
body.lenses-page .lx-section,
body.lenses-page .lx-types,
body.lenses-page .lx-coatings {
box-sizing: border-box;
width: 100%;
max-width: 100%;
margin: 0 !important;
}
/* Never let a grid item create an unwanted horizontal gap. */
body.lenses-page .lx-hero > *,
body.lenses-page .lx-section > *,
body.lenses-page .lx-types > *,
body.lenses-page .lx-coatings > * {
min-width: 0;
box-sizing: border-box;
}
/* Desktop keeps the designed two-column composition. */
@media (min-width: 901px) {
body.lenses-page .lx-hero {
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap: clamp(28px, 5vw, 72px);
}
body.lenses-page .lx-section {
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
gap: clamp(28px, 6vw, 78px);
}
body.lenses-page .lx-hero-copy,
body.lenses-page .lx-copy {
min-width: 0;
}
body.lenses-page .lx-hero-img,
body.lenses-page .lx-image {
max-width: 100%;
}
}
/* Tablet: stack cleanly, no side whitespace and no overlap. */
@media (min-width: 601px) and (max-width: 900px) {
body.lenses-page .lx-hero,
body.lenses-page .lx-section {
grid-template-columns: minmax(0, 1fr) !important;
gap: 0 !important;
min-height: auto !important;
}
body.lenses-page .lx-hero {
padding: 110px 32px 55px !important;
}
body.lenses-page .lx-section {
padding: 70px 32px !important;
}
body.lenses-page .lx-hero-copy,
body.lenses-page .lx-copy {
width: 100%;
max-width: 100%;
margin: 0 0 34px !important;
}
body.lenses-page .lx-hero-img {
width: 100%;
max-width: 680px;
height: 500px;
margin: 0 auto !important;
}
body.lenses-page .lx-image {
width: 100%;
max-width: 680px;
height: 480px;
margin: 34px auto 0 !important;
}
body.lenses-page .lx-type-row {
width: 100%;
max-width: 100%;
gap: 18px;
}
}
/* Mobile: one clean column. */
@media (max-width: 600px) {
body.lenses-page .lx-hero,
body.lenses-page .lx-section {
grid-template-columns: minmax(0, 1fr) !important;
gap: 0 !important;
min-height: auto !important;
}
body.lenses-page .lx-hero {
padding: 96px 18px 42px !important;
}
body.lenses-page .lx-section {
padding: 58px 18px !important;
}
body.lenses-page .lx-hero-copy,
body.lenses-page .lx-copy {
width: 100%;
max-width: 100%;
margin: 0 0 28px !important;
}
body.lenses-page .lx-hero-img {
width: 100%;
height: min(390px, 92vw);
min-height: 280px;
margin: 0 !important;
border-radius: 30px !important;
transform: none !important;
}
body.lenses-page .lx-image {
width: 100%;
height: min(390px, 92vw);
min-height: 280px;
margin: 28px 0 0 !important;
border-radius: 28px !important;
}
body.lenses-page .lx-types,
body.lenses-page .lx-coatings {
padding-left: 18px !important;
padding-right: 18px !important;
}
body.lenses-page .lx-type-row {
gap: 14px;
margin-left: 0 !important;
margin-right: 0 !important;
}
body.lenses-page .lx-type {
flex-basis: min(320px, calc(100vw - 36px));
}
}
/* ============================================================
CONTACT LENSES PAGE
============================================================ */
body.contact-lenses-page .cl-page {
width: 100%;
max-width: 100%;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
}
body.contact-lenses-page .cl-section,
body.contact-lenses-page .cl-marquee {
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Desktop — retain the intended two-column compositions. */
@media (min-width: 951px) {
body.contact-lenses-page .cl-hero-inner,
body.contact-lenses-page .cl-feature-grid,
body.contact-lenses-page .cl-360-inner,
body.contact-lenses-page .cl-care-inner {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
body.contact-lenses-page .cl-hero-inner > *,
body.contact-lenses-page .cl-feature-grid > *,
body.contact-lenses-page .cl-360-inner > *,
body.contact-lenses-page .cl-care-inner > * {
min-width: 0;
}
}
/* Tablet — stack all two-column blocks with zero column gap. */
@media (min-width: 601px) and (max-width: 950px) {
body.contact-lenses-page .cl-section {
padding-left: 32px !important;
padding-right: 32px !important;
}
body.contact-lenses-page .cl-hero-inner,
body.contact-lenses-page .cl-feature-grid,
body.contact-lenses-page .cl-360-inner,
body.contact-lenses-page .cl-care-inner,
body.contact-lenses-page .cl-journey-inner {
grid-template-columns: minmax(0, 1fr) !important;
gap: 0 !important;
}
body.contact-lenses-page .cl-hero-copy,
body.contact-lenses-page .cl-feature-copy,
body.contact-lenses-page .cl-360-copy,
body.contact-lenses-page .cl-care-copy {
width: 100%;
max-width: 100%;
margin: 0 0 30px !important;
}
body.contact-lenses-page .cl-hero-visual,
body.contact-lenses-page .cl-feature-media,
body.contact-lenses-page .cl-360-stage,
body.contact-lenses-page .cl-care-image {
width: 100%;
max-width: 760px;
margin: 0 auto !important;
}
body.contact-lenses-page .cl-type-grid {
width: 100%;
max-width: 100%;
}
}
/* Mobile — zero horizontal gaps and no element collision. */
@media (max-width: 600px) {
body.contact-lenses-page .cl-section {
padding-left: 18px !important;
padding-right: 18px !important;
box-sizing: border-box !important;
}
body.contact-lenses-page .cl-hero-inner,
body.contact-lenses-page .cl-feature-grid,
body.contact-lenses-page .cl-360-inner,
body.contact-lenses-page .cl-care-inner,
body.contact-lenses-page .cl-journey-inner {
grid-template-columns: minmax(0, 1fr) !important;
gap: 0 !important;
}
body.contact-lenses-page .cl-hero-copy,
body.contact-lenses-page .cl-feature-copy,
body.contact-lenses-page .cl-360-copy,
body.contact-lenses-page .cl-care-copy,
body.contact-lenses-page .cl-sticky-title {
width: 100%;
max-width: 100%;
margin: 0 0 26px !important;
}
body.contact-lenses-page .cl-hero-visual,
body.contact-lenses-page .cl-feature-media,
body.contact-lenses-page .cl-360-stage,
body.contact-lenses-page .cl-care-image {
width: 100%;
max-width: 100%;
margin: 0 !important;
}
body.contact-lenses-page .cl-type-grid {
grid-template-columns: minmax(0, 1fr) !important;
gap: 18px !important;
}
body.contact-lenses-page .cl-type {
width: 100%;
max-width: 100%;
}
body.contact-lenses-page .cl-actions {
width: 100%;
flex-wrap: wrap;
}
body.contact-lenses-page .cl-actions .cl-btn {
max-width: 100%;
}
}
/* ============================================================
NAVBAR — DESKTOP NORMAL / TABLET + MOBILE HAMBURGER
============================================================ */
@media (min-width: 900px) {
body.lenses-page .site-header,
body.contact-lenses-page .site-header {
width: 100%;
}
body.lenses-page .navbar,
body.contact-lenses-page .navbar {
display: flex !important;
}
body.lenses-page .nav-menu,
body.contact-lenses-page .nav-menu {
position: static !important;
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
}
body.lenses-page .menu-toggle,
body.contact-lenses-page .menu-toggle {
display: none !important;
}
body.lenses-page .login-btn,
body.contact-lenses-page .login-btn {
display: inline-flex !important;
}
}
@media (max-width: 899px) {
body.lenses-page .nav-menu,
body.contact-lenses-page .nav-menu {
position: absolute !important;
display: flex !important;
flex-direction: column !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(-8px) !important;
}
body.lenses-page .nav-menu.open,
body.contact-lenses-page .nav-menu.open {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) !important;
}
body.lenses-page .menu-toggle,
body.contact-lenses-page .menu-toggle {
display: flex !important;
}
/* Outer login is hidden only on tablet/mobile.
The login item inside the hamburger is retained. */
body.lenses-page .nav-actions > .login-btn,
body.contact-lenses-page .nav-actions > .login-btn {
display: none !important;
}
body.lenses-page .mobile-nav-login,
body.contact-lenses-page .mobile-nav-login {
display: flex !important;
}
}
/* ============================================================
SAFETY — NO HORIZONTAL OVERFLOW FROM DECORATIVE ELEMENTS
============================================================ */
body.lenses-page img,
body.contact-lenses-page img,
body.lenses-page svg,
body.contact-lenses-page svg,
body.lenses-page video,
body.contact-lenses-page video {
max-width: 100%;
}
body.lenses-page *,
body.contact-lenses-page * {
box-sizing: border-box;
}
/* =========================================================
FINAL LENSES MOBILE / TABLET REPAIR
========================================================= */
@media (max-width: 899px) {
body.lenses-page {
width: 100%;
max-width: 100%;
overflow-x: hidden !important;
}
body.lenses-page .site-header,
body.lenses-page .navbar {
width: 100% !important;
max-width: 100% !important;
}
body.lenses-page .lx-hero {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
min-height: auto !important;
gap: 28px !important;
padding: 100px 18px 55px !important;
}
body.lenses-page .lx-hero-copy {
width: 100% !important;
max-width: 100% !important;
order: 1 !important;
}
body.lenses-page .lx-hero-img {
width: 100% !important;
height: min(62vw, 430px) !important;
min-height: 270px !important;
max-height: 430px !important;
order: 2 !important;
margin: 0 !important;
border-radius: 30px !important;
transform: none !important;
}
body.lenses-page .lx-title {
max-width: 100% !important;
font-size: clamp(42px, 12vw, 70px) !important;
line-height: .92 !important;
overflow-wrap: anywhere;
}
body.lenses-page .lx-lead {
max-width: 100% !important;
font-size: 16px !important;
line-height: 1.65 !important;
}
body.lenses-page .lx-section {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
min-height: auto !important;
gap: 30px !important;
padding: 65px 18px !important;
}
body.lenses-page .lx-copy,
body.lenses-page .lx-image {
width: 100% !important;
max-width: 100% !important;
}
body.lenses-page .lx-copy {
order: 1 !important;
}
body.lenses-page .lx-image {
order: 2 !important;
height: min(68vw, 430px) !important;
min-height: 280px !important;
max-height: 430px !important;
margin: 0 !important;
border-radius: 26px !important;
transform: none !important;
}
body.lenses-page .lx-copy h2 {
font-size: clamp(34px, 9vw, 58px) !important;
line-height: .96 !important;
}
body.lenses-page .lx-copy p {
font-size: 15px !important;
line-height: 1.7 !important;
}
body.lenses-page .lx-types,
body.lenses-page .lx-coatings {
width: 100% !important;
padding: 65px 18px !important;
overflow: hidden !important;
}
body.lenses-page .lx-types-head {
width: 100% !important;
margin-bottom: 28px !important;
}
body.lenses-page .lx-types-head h2,
body.lenses-page .lx-coatings h2 {
font-size: clamp(38px, 11vw, 65px) !important;
}
body.lenses-page .lx-type-row {
width: calc(100vw - 36px) !important;
max-width: calc(100vw - 36px) !important;
overflow-x: auto !important;
gap: 14px !important;
padding-bottom: 14px !important;
-webkit-overflow-scrolling: touch;
}
body.lenses-page .lx-type {
flex: 0 0 min(82vw, 330px) !important;
width: min(82vw, 330px) !important;
height: min(112vw, 410px) !important;
max-height: 410px !important;
}
body.lenses-page .lx-coat-wrap {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
gap: 30px !important;
}
body.lenses-page .lx-coat-list {
width: 100% !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
}
body.lenses-page .lx-coat {
width: 100% !important;
padding: 18px 8px !important;
}
body.lenses-page .lx-coat strong {
font-size: 17px !important;
}
body.lenses-page .lx-coat span {
font-size: 14px !important;
}
body.lenses-page .lx-coat-visual {
width: 100% !important;
height: min(90vw, 390px) !important;
min-height: 300px !important;
}
body.lenses-page .lx-glass {
width: min(72vw, 310px) !important;
}
body.lenses-page .lx-marquee {
width: 100% !important;
}
body.lenses-page .lx-cta {
width: 100% !important;
min-height: 58vh !important;
padding: 65px 18px !important;
}
body.lenses-page .lx-cta h2 {
font-size: clamp(42px, 13vw, 76px) !important;
}
body.lenses-page .lx-top {
right: 14px !important;
bottom: 14px !important;
width: 46px !important;
height: 46px !important;
}
}
@media (max-width: 480px) {
body.lenses-page .lx-hero {
padding-top: 92px !important;
}
body.lenses-page .lx-hero-img {
height: 72vw !important;
min-height: 245px !important;
border-radius: 24px !important;
}
body.lenses-page .lx-section {
padding-top: 52px !important;
padding-bottom: 52px !important;
}
body.lenses-page .lx-image {
height: 70vw !important;
min-height: 245px !important;
border-radius: 22px !important;
}
body.lenses-page .lx-pill {
font-size: 12px !important;
padding: 8px 11px !important;
}
body.lenses-page .lx-type {
flex-basis: 82vw !important;
width: 82vw !important;
}
}
/* =========================================================
LOADER ISOLATION
Only Home Page 1 may display the home loader.
Any legacy loader on other pages is forcibly disabled.
========================================================= */
body:not(.home1-page) .ct-loader,
body:not(.home1-page) .cl-loader,
body:not(.home1-page) .frame-page-loader,
body:not(.home1-page) .lens-page-loader,
body:not(.home1-page) .page-loader {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.cv-home-loader {
position: fixed;
inset: 0;
z-index: 999999;
display: grid;
place-items: center;
background: #061126;
color: #fff;
opacity: 1;
visibility: visible;
transition: opacity .65s ease, visibility .65s ease;
}
.cv-home-loader.done {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.cv-home-loader-inner {
width: min(320px,78vw);
text-align: center;
}
.cv-home-loader-logo {
width: 58px;
height: 58px;
margin: 0 auto 14px;
display: grid;
place-items: center;
border: 1px solid rgba(111,153,255,.7);
border-radius: 50%;
font: 800 18px/1 "Space Grotesk",sans-serif;
}
.cv-home-loader-name {
font: 800 14px/1.2 "Space Grotesk",sans-serif;
letter-spacing: .24em;
}
.cv-home-loader-line {
width: 100%;
height: 2px;
margin-top: 20px;
overflow: hidden;
background: rgba(255,255,255,.14);
}
.cv-home-loader-line span {
display: block;
width: 35%;
height: 100%;
background: #2867ff;
animation: cvHomeLoad 1.1s ease-in-out infinite;
}
@keyframes cvHomeLoad {
from { transform: translateX(-120%); }
to { transform: translateX(390%); }
}
/* =========================================================
FINAL: REMOVE BLUE SCROLL/LOADER BARS
Contact / Contact Lenses / Eye Test
(Home Page 1 loader remains untouched)
========================================================= */
body.contact-page .ct-progress,
body.contact-lenses-page .cl-progress,
body.eye-test-body .et-progress {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
box-shadow: none !important;
}
/* =========================================================
LENSES NAVBAR — MATCH EXISTING SITE NAVBAR
========================================================= */
body.lenses-page .site-header {
width: 100%;
position: relative;
z-index: 1000;
}
body.lenses-page .navbar {
width: min(1360px, calc(100% - 32px));
margin: 8px auto;
box-sizing: border-box;
}
@media (max-width: 1024px) {
body.lenses-page .navbar {
width: calc(100% - 20px);
margin: 6px auto;
}
}
@media (max-width: 600px) {
body.lenses-page .navbar {
width: calc(100% - 12px);
margin: 4px auto;
}
}
/* =========================================================
FINAL LENSES NAVBAR — SAME AS EXISTING SITE NAVBAR
Desktop/laptop: normal full navigation
Tablet/mobile (<900px): hamburger navigation
No custom fixed/offset lenses navbar
========================================================= */
body.lenses-page > .site-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
padding: 10px 14px !important;
z-index: 100000 !important;
box-sizing: border-box !important;
}
body.lenses-page > .site-header > .navbar {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
width: min(1380px, 100%) !important;
min-height: 68px !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
/* Leave enough room below the fixed navbar. */
body.lenses-page {
scroll-padding-top: 90px !important;
}
body.lenses-page #lensesApp {
padding-top: 88px !important;
}
/* ---------- Desktop / Laptop: normal navbar ---------- */
@media (min-width: 900px) {
body.lenses-page > .site-header {
display: block !important;
}
body.lenses-page .nav-menu {
position: static !important;
width: auto !important;
height: auto !important;
max-height: none !important;
padding: 0 !important;
margin: 0 4px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
flex: 1 1 auto !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
overflow: visible !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
}
body.lenses-page .menu-toggle {
display: none !important;
}
body.lenses-page .login-btn {
display: inline-flex !important;
}
body.lenses-page .mobile-nav-login {
display: none !important;
}
}
/* ---------- Tablet + Mobile: hamburger only ---------- */
@media (max-width: 899px) {
body.lenses-page > .site-header {
padding: 6px !important;
}
body.lenses-page > .site-header > .navbar {
width: calc(100vw - 12px) !important;
max-width: calc(100vw - 12px) !important;
min-height: 62px !important;
margin: 0 auto !important;
padding: 0 10px !important;
gap: 6px !important;
overflow: visible !important;
}
body.lenses-page .nav-menu {
position: absolute !important;
top: calc(100% + 8px) !important;
left: 0 !important;
right: 0 !important;
width: auto !important;
height: calc(100svh - 86px) !important;
max-height: none !important;
padding: 20px 16px !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 2px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
background: var(--header-bg) !important;
border: 1px solid var(--border) !important;
border-radius: 18px !important;
box-shadow: 0 25px 70px rgba(5,15,35,.20) !important;
backdrop-filter: blur(24px) !important;
-webkit-backdrop-filter: blur(24px) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(-10px) !important;
transition: opacity .25s ease, visibility .25s ease, transform .3s ease !important;
z-index: 100001 !important;
}
body.lenses-page .nav-menu.open {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) !important;
}
body.lenses-page .nav-link {
width: 100% !important;
min-height: 50px !important;
padding: 0 10px !important;
justify-content: space-between !important;
box-sizing: border-box !important;
}
body.lenses-page .nav-dropdown {
width: 100% !important;
}
body.lenses-page .dropdown-menu {
position: static !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
box-sizing: border-box !important;
transform: none !important;
box-shadow: none !important;
}
body.lenses-page .nav-dropdown.open .dropdown-menu {
opacity: 1 !important;
visibility: visible !important;
}
body.lenses-page .login-btn {
display: none !important;
}
body.lenses-page .mobile-nav-login {
display: flex !important;
width: 100% !important;
min-height: 52px !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 12px !important;
box-sizing: border-box !important;
color: var(--text) !important;
border-top: 1px solid var(--border) !important;
margin-top: 8px !important;
}
body.lenses-page .menu-toggle {
display: inline-flex !important;
flex: 0 0 42px !important;
width: 42px !important;
height: 42px !important;
}
body.lenses-page .nav-actions {
flex-shrink: 0 !important;
gap: 5px !important;
}
}
/* Small mobile tightening */
@media (max-width: 639px) {
body.lenses-page > .site-header > .navbar {
width: calc(100vw - 10px) !important;
max-width: calc(100vw - 10px) !important;
min-height: 60px !important;
padding: 0 8px !important;
}
body.lenses-page .brand-text strong {
font-size: 13px !important;
}
body.lenses-page .brand-text small {
font-size: 11px !important;
letter-spacing: 2px !important;
}
body.lenses-page .cart-nav-btn,
body.lenses-page .icon-btn,
body.lenses-page .menu-toggle {
width: 37px !important;
height: 37px !important;
min-height: 37px !important;
}
body.lenses-page .language-btn {
min-width: 37px !important;
width: 37px !important;
padding: 0 !important;
}
}
/* =========================================================
CONTACT LENSES — FINAL BLUE LOADER/WIPE REMOVAL
========================================================= */
body.contact-lenses-page .cl-progress {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
}
body.contact-lenses-page.no-blue-page-wipe {
--disable-cl-blue-wipe: 1;
}