/* ============================================================ READINGGLASSES.COM HERO Fully scoped desktop + tablet + mobile Requires: ============================================================ */ .page-readingglasses .rg-hero { position: relative; margin: 0; background: var(--bg); border-bottom: 1px solid var(--rule); } .page-readingglasses .rg-hero__grid { position: relative; display: grid; grid-template-columns: 24fr 32fr 44fr; min-height: clamp(460px, 62vw, 760px); overflow: clip; background: linear-gradient( to bottom, color-mix(in srgb, var(--bg) 96%, white 4%), color-mix(in srgb, var(--bg-alt) 88%, white 12%) ); } .page-readingglasses .rg-hero__era { position: relative; min-width: 0; overflow: hidden; border-right: 1px solid color-mix(in srgb, var(--rule) 85%, transparent); } .page-readingglasses .rg-hero__era:last-of-type { border-right: none; } .page-readingglasses .rg-hero__image { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform var(--ease-slow); } .page-readingglasses .rg-hero:hover .rg-hero__image { transform: scale(1.02); } /* Per-era crop tuning */ .page-readingglasses .rg-hero__era--2008 .rg-hero__image { object-position: 10% top; filter: saturate(0.78) contrast(0.96) brightness(0.97); } .page-readingglasses .rg-hero__era--2017 .rg-hero__image { object-position: 50% top; filter: saturate(0.9) contrast(0.98); } .page-readingglasses .rg-hero__era--2026 .rg-hero__image { object-position: 50% top; filter: saturate(1) contrast(1); } .page-readingglasses .rg-hero__era::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, color-mix(in srgb, black 6%, transparent) 0%, transparent 20%, transparent 72%, color-mix(in srgb, black 20%, transparent) 100% ); pointer-events: none; } .page-readingglasses .rg-hero__era-label { position: absolute; top: var(--space-5); left: var(--space-5); z-index: 2; display: inline-flex; align-items: center; padding: 0.4rem 0.65rem; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--rule) 80%, transparent); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); } .page-readingglasses .rg-hero__overlay { position: absolute; left: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); z-index: 4; width: min(34rem, calc(100% - 2rem)); padding: clamp(1rem, 2vw, 1.5rem); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid color-mix(in srgb, var(--rule) 86%, transparent); box-shadow: 0 12px 32px color-mix(in srgb, black 12%, transparent); } .page-readingglasses .rg-hero__kicker { margin-bottom: var(--space-3); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); } .page-readingglasses .rg-hero__heading { margin-bottom: var(--space-4); font-family: var(--font-display); font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); font-style: italic; font-weight: 500; line-height: 1.02; color: var(--text); } .page-readingglasses .rg-hero__text { max-width: 42ch; margin-bottom: var(--space-4); font-size: var(--text-sm); line-height: 1.65; color: var(--text-muted); } .page-readingglasses .rg-hero__timeline { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); } .page-readingglasses .rg-hero__card { position: absolute; right: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); z-index: 5; width: min(24vw, 280px); min-width: 180px; overflow: hidden; background: var(--surface); border: 1px solid color-mix(in srgb, var(--rule) 82%, transparent); box-shadow: 0 4px 12px color-mix(in srgb, black 10%, transparent), 0 18px 42px color-mix(in srgb, black 18%, transparent); } .page-readingglasses .rg-hero__card-image { display: block; width: 100%; height: auto; } .page-readingglasses .rg-hero__card-meta { display: flex; justify-content: space-between; gap: var(--space-3); padding: 0.75rem 0.9rem; border-top: 1px solid var(--rule); background: color-mix(in srgb, var(--surface) 90%, white 10%); } .page-readingglasses .rg-hero__card-kicker, .page-readingglasses .rg-hero__card-title { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .page-readingglasses .rg-hero__card-kicker { color: var(--text-faint); } .page-readingglasses .rg-hero__card-title { color: var(--text); } .page-readingglasses .rg-hero__caption { max-width: 80ch; margin: 0 auto; padding: var(--space-5) var(--gutter) var(--space-6); font-size: var(--text-xs); line-height: 1.6; color: var(--text-faint); } /* Optional wireframe texture layer */ /* .page-readingglasses .rg-hero__grid::before { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(to top, color-mix(in srgb, var(--bg) 30%, transparent), transparent), url("../img/primer-2019-wireframe-v7-2x.jpg") center bottom / cover no-repeat; opacity: 0.08; pointer-events: none; z-index: 1; } */ /* ============================== TABLET ================================= */ @media (max-width: 980px) { .page-readingglasses .rg-hero__grid { grid-template-columns: 1fr 1fr 1.15fr; min-height: 560px; } .page-readingglasses .rg-hero__overlay { width: min(28rem, calc(100% - 2rem)); padding: 1rem 1.1rem; } .page-readingglasses .rg-hero__heading { font-size: clamp(1.65rem, 1.1rem + 1.8vw, 2.4rem); } .page-readingglasses .rg-hero__card { width: min(28vw, 220px); min-width: 160px; } .page-readingglasses .rg-hero__era-label { top: var(--space-4); left: var(--space-4); } } /* ============================== MOBILE ================================= */ @media (max-width: 700px) { .page-readingglasses .rg-hero__grid { display: grid; grid-template-columns: 1fr; min-height: auto; background: var(--bg); } .page-readingglasses .rg-hero__era { height: 180px; border-right: none; border-bottom: 1px solid color-mix(in srgb, var(--rule) 85%, transparent); } .page-readingglasses .rg-hero__era--2026 { height: 220px; } .page-readingglasses .rg-hero__image { width: 100%; height: 100%; object-fit: cover; } .page-readingglasses .rg-hero__overlay { position: relative; left: auto; bottom: auto; width: auto; margin: 0; padding: var(--space-6) var(--space-4); background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border: none; border-bottom: 1px solid var(--rule); box-shadow: none; } .page-readingglasses .rg-hero__heading { font-size: clamp(1.45rem, 6vw, 2rem); line-height: 1.08; } .page-readingglasses .rg-hero__text { max-width: 100%; font-size: var(--text-sm); } .page-readingglasses .rg-hero__timeline { letter-spacing: 0.1em; } .page-readingglasses .rg-hero__card { position: relative; right: auto; bottom: auto; width: auto; min-width: 0; margin: var(--space-4); } .page-readingglasses .rg-hero__caption { padding: var(--space-4); } } /* ============================== SMALL MOBILE ================================= */ @media (max-width: 480px) { .page-readingglasses .rg-hero__era { height: 150px; } .page-readingglasses .rg-hero__era--2026 { height: 180px; } .page-readingglasses .rg-hero__era-label { top: 0.75rem; left: 0.75rem; padding: 0.3rem 0.5rem; } .page-readingglasses .rg-hero__overlay { padding: var(--space-5) var(--space-4); } .page-readingglasses .rg-hero__heading { font-size: 1.4rem; } .page-readingglasses .rg-hero__card { display: none; } }