/* ==========================================================================
laser.css — DEKA laser product pages (US-20D, SmartXide, SmartPerio).
Loaded only on those pages, after home.css. Everything scoped under
.laser-page. Reuses the global DEKA token set (--deka-*, --hm-*).
Premium / clinical / calm: mostly ivory with bone accents + one ink band.
========================================================================== */
/* overflow-x: clip on this wrapper (overflow-y stays visible) contains any
full-bleed section horizontally WITHOUT making it a scroll container, so the
sticky subnav keeps working. */
.laser-page { background: var(--deka-ivory); color: var(--deka-ink); overflow-x: clip; }
.laser-page section { scroll-margin-top: 120px; } /* anchor offset under fixed nav + subnav */
/* Shared buttons ---------------------------------------------------------- */
.laser-page .lp-btn,
.laser-page .lp-btn-ghost {
display: inline-flex; align-items: center; gap: 12px; padding: 15px 26px; border-radius: 999px;
font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
font-weight: 500; white-space: nowrap; border: 1px solid var(--deka-ink); cursor: pointer;
transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.laser-page .lp-btn { background: var(--deka-ink); color: var(--deka-ivory); }
.laser-page .lp-btn:hover { background: var(--deka-sapphire); border-color: var(--deka-sapphire); transform: translateY(-1px); }
.laser-page .lp-btn-ghost { background: transparent; color: var(--deka-ink); border-color: var(--deka-rule); }
.laser-page .lp-btn-ghost:hover { background: var(--deka-ink); color: var(--deka-ivory); border-color: var(--deka-ink); }
.laser-page .lp-btn svg, .laser-page .lp-btn-ghost svg { flex: none; }
/* Section heads (reused pattern) ------------------------------------------ */
.laser-page .lp-eyebrow {
font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--deka-sapphire); font-weight: 500; display: inline-flex; align-items: center; gap: 10px;
}
.laser-page .lp-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--deka-sapphire); }
.laser-page .lp-h2 {
font-family: var(--deka-serif); font-weight: 300; font-size: clamp(30px, 3.6vw, 46px);
line-height: 1.08; letter-spacing: -0.02em; color: var(--deka-ink); margin-top: 16px; text-wrap: balance;
}
.laser-page .lp-h2 em { font-style: italic; color: var(--deka-sapphire); }
@media (min-width: 1000px) { .laser-page .lp-h2 { font-size: var(--deka-h2); } }
.laser-page .lp-lead { font-size: 16px; line-height: 1.7; color: var(--hm-muted); margin-top: 16px; max-width: 60ch; }
/* ==========================================================================
1 — HERO (reuses the existing .laser-hero component from pages.css: dark ink
band, purple radial overlay, big product image. Here we only add the mini
spec row at the bottom of the hero copy, styled light-on-dark.)
========================================================================== */
.laser-page .laser-hero__specs {
display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 32px; padding-top: 22px;
border-top: 1px solid rgba(245, 244, 239, 0.18);
}
.laser-page .laser-hero__specs span { font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245, 244, 239, 0.6); }
.laser-page .laser-hero__specs span b { color: var(--deka-ivory); font-weight: 600; }
/* Mobile: show the laser first (column-reverse) + smaller image */
@media (max-width: 960px) { .laser-page .laser-hero__product { order: -1; min-height: clamp(220px, 36vh, 320px); } }
/* ==========================================================================
2 — SIDE DOT NAV (fixed left rail; active dot grows, label on hover)
========================================================================== */
.laser-page .lp-dotnav {
position: fixed; left: 18px; top: 50%; transform: translateY(-50%);
z-index: 30; display: flex; flex-direction: column; gap: 18px;
padding: 13px 9px; border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
box-shadow: 0 8px 28px -16px rgba(4, 5, 65, 0.30);
}
.laser-page .lp-dotnav__item {
position: relative; display: flex; align-items: center; justify-content: center;
width: 16px; height: 16px; text-decoration: none;
}
.laser-page .lp-dotnav__item::before {
content: ""; width: 8px; height: 8px; border-radius: 50%;
background: var(--deka-rule);
transition: width .22s ease, height .22s ease, background .22s ease;
}
.laser-page .lp-dotnav__item:hover::before { background: var(--hm-muted); }
.laser-page .lp-dotnav__item.is-current::before {
width: 16px; height: 16px; background: var(--deka-sapphire);
}
.laser-page .lp-dotnav__label {
position: absolute; left: 28px; top: 50%;
transform: translateY(-50%) translateX(-6px);
white-space: nowrap; padding: 7px 13px; border-radius: 999px;
background: var(--deka-ink); color: var(--deka-ivory);
font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
opacity: 0; pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
}
.laser-page .lp-dotnav__label::before {
content: ""; position: absolute; left: -4px; top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 8px; height: 8px; background: var(--deka-ink); border-radius: 1px;
}
.laser-page .lp-dotnav__item:hover .lp-dotnav__label,
.laser-page .lp-dotnav__item:focus-visible .lp-dotnav__label {
opacity: 1; transform: translateY(-50%) translateX(0);
}
@media (max-width: 1024px) { .laser-page .lp-dotnav { display: none; } }
/* ==========================================================================
3 — QUICK SPECS
========================================================================== */
.laser-page .lp-specs { padding: clamp(64px, 8vw, 104px) 0; background: var(--deka-bone); }
.laser-page .lp-specs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin-top: 40px; background: var(--deka-rule); border: 1px solid var(--deka-rule); }
.laser-page .lp-spec { background: var(--deka-ivory); padding: 26px 24px; }
.laser-page .lp-spec-label { font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--deka-sapphire); }
.laser-page .lp-spec-value { font-family: var(--deka-serif); font-size: clamp(20px, 2vw, 26px); font-weight: 400; line-height: 1.15; color: var(--deka-ink); margin-top: 10px; letter-spacing: -0.01em; }
/* ==========================================================================
4 — PRACTICE APPLICATION
========================================================================== */
.laser-page .lp-practice { padding: clamp(72px, 9vw, 120px) 0; background: var(--deka-ivory); }
.laser-page .lp-practice-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 5vw, 72px); align-items: start; margin-top: 8px; }
.laser-page .lp-practice-copy p { font-size: 16px; line-height: 1.75; color: rgba(4, 5, 65, 0.78); margin-top: 18px; }
.laser-page .lp-impact { background: var(--deka-ink); color: var(--deka-ivory); border-radius: 18px; padding: 34px 32px; position: sticky; top: 170px; }
.laser-page .lp-impact h3 { font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--deka-brass); margin-bottom: 20px; }
.laser-page .lp-impact ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.laser-page .lp-impact li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5; color: rgba(245, 244, 239, 0.9); }
.laser-page .lp-impact li::before {
content: ''; position: absolute; left: 0; top: 3px; width: 15px; height: 15px; background: var(--deka-sapphire-soft);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
background: var(--deka-brass);
}
@media (max-width: 860px) { .laser-page .lp-practice-grid { grid-template-columns: 1fr; gap: 32px; } .laser-page .lp-impact { position: static; } }
/* --- Why practices choose this laser (SmartXide) --------------------------
.lp-practice-grid / .lp-impact above are retained: US-20D (392) and
SmartPerio (2051) still render the old two-column layout. */
.laser-page .lp-practice-head { max-width: 62ch; margin: 0 auto; text-align: center; }
.laser-page .lp-practice-head .lp-lead { max-width: none; margin: 18px auto 0; }
.laser-page .lp-practice .lp-cards { grid-template-columns: repeat(3, 1fr); margin-top: clamp(40px, 5vw, 60px); }
.laser-page .lp-ext { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: clamp(48px, 6vw, 76px); }
.laser-page .lp-ext-copy p { font-size: 16px; line-height: 1.75; color: rgba(4, 5, 65, 0.78); margin-top: 18px; }
.laser-page .lp-ext-title { font-family: var(--deka-serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.25; letter-spacing: -0.01em; color: var(--deka-ink); margin-top: 14px; }
.laser-page .lp-ext-media { background: var(--deka-bone); border: 1px solid var(--deka-rule); border-radius: 18px; padding: 24px; text-align: center; }
.laser-page .lp-ext-media img { display: block; width: auto; max-width: 100%; max-height: 460px; margin: 0 auto; }
@media (max-width: 860px) {
.laser-page .lp-practice .lp-cards { grid-template-columns: 1fr; }
.laser-page .lp-ext { grid-template-columns: 1fr; gap: 32px; }
}
/* ==========================================================================
5 — BEST FIT
========================================================================== */
.laser-page .lp-bestfit { background: var(--deka-bone); }
.laser-page .lp-bestfit-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 560px; }
.laser-page .lp-bestfit-copy { align-self: center; padding: clamp(72px, 9vw, 110px) clamp(32px, 4vw, 72px) clamp(72px, 9vw, 110px) max(56px, calc((100vw - 1440px) / 2 + 56px)); }
.laser-page .lp-bestfit-list { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 13px; max-width: 48ch; }
.laser-page .lp-bestfit-list li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.5; color: var(--deka-ink); }
.laser-page .lp-bestfit-list li::before {
content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; background: var(--deka-sapphire);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.laser-page .lp-bestfit-media { position: relative; }
.laser-page .lp-bestfit-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
.laser-page .lp-bestfit-grid { grid-template-columns: 1fr; min-height: 0; }
.laser-page .lp-bestfit-media { order: -1; aspect-ratio: 4 / 3; }
.laser-page .lp-bestfit-copy { padding: 64px 56px 72px; }
}
@media (max-width: 720px) { .laser-page .lp-bestfit-copy { padding: 56px 24px 64px; } }
/* ==========================================================================
MODULAR NOTE — replaces the handpiece gallery on the Luxea Plus page (7386).
Client direction: don't enumerate the handpieces; a single centered line that
it's modular with room to grow. Ivory keeps the bestfit(bone) → here → compare
(bone) alternation the tabbed section used to hold.
========================================================================== */
.laser-page .lp-modular-note { padding: clamp(72px, 9vw, 120px) 0; background: var(--deka-ivory); text-align: center; }
.laser-page .lp-modular-note__text {
max-width: 32ch; margin: 0 auto;
font-family: var(--deka-serif); font-weight: 400;
font-size: clamp(24px, 3vw, 34px); line-height: 1.35; letter-spacing: -0.015em;
color: var(--deka-ink);
}
.laser-page .lp-modular-note__text em { font-style: italic; color: var(--deka-sapphire); }
/* ==========================================================================
6 — TABBED CONSIDERATIONS (no longer used on 7386; kept for other laser pages)
========================================================================== */
.laser-page .lp-tabs { padding: clamp(72px, 9vw, 120px) 0; background: var(--deka-ivory); }
.laser-page .lp-tab-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 40px; border-bottom: 1px solid var(--deka-rule); }
/* Filled segments, not underlines: --deka-sapphire and --deka-ink are the same
#040541, so an ink-on-ivory underline gave the active tab almost no signal.
Inactive = dark purple field, white text. Active = lavender field, dark text. */
.laser-page .lp-tab-btn {
appearance: none; cursor: pointer; padding: 15px 22px;
font-family: var(--deka-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
background: var(--deka-ink); color: var(--deka-ivory);
border: 1px solid var(--deka-ink); border-radius: 8px 8px 0 0;
margin-bottom: -1px;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.laser-page .lp-tab-btn:hover:not(.is-active) { background: #17185f; border-color: #17185f; color: #fff; }
.laser-page .lp-tab-btn.is-active {
background: var(--deka-sapphire-soft); border-color: var(--deka-sapphire-soft);
color: var(--deka-ink); font-weight: 500;
}
.laser-page .lp-tab-btn:focus-visible { outline: 2px solid var(--deka-sapphire-soft); outline-offset: 3px; }
.laser-page .lp-tab-body { margin-top: 36px; }
.laser-page .lp-acc-head { display: none; } /* mobile-only accordion header */
.laser-page .lp-tab-panel { display: none; }
.laser-page .lp-tab-panel.is-active { display: block; animation: lp-fade .35s ease; }
@keyframes lp-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.laser-page .lp-tab-panel h3 { font-family: var(--deka-serif); font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.01em; color: var(--deka-ink); margin-bottom: 14px; }
.laser-page .lp-tab-panel > p { font-size: 16px; line-height: 1.7; color: rgba(4, 5, 65, 0.78); max-width: 64ch; margin-bottom: 18px; }
.laser-page .lp-tab-panel h4 { font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--deka-ink); opacity: 0.55; margin: 22px 0 12px; }
/* two bullet lists (choose this / consider another) */
.laser-page .lp-checklist { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 9px; }
.laser-page .lp-checklist li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.5; color: var(--deka-ink); }
.laser-page .lp-checklist li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border: 1px solid var(--deka-sapphire); border-radius: 50%; }
.laser-page .lp-checklist--alt li::before { border-radius: 1px; border-color: var(--hm-muted-2); }
/* procedure / tech cards */
.laser-page .lp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.laser-page .lp-card { background: var(--deka-bone); border: 1px solid var(--deka-rule); border-radius: 14px; padding: 24px 22px; }
.laser-page .lp-card-tag { font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--deka-sapphire); margin-bottom: 10px; }
.laser-page .lp-card h5, .laser-page .lp-card h3 { font-family: var(--deka-serif); font-weight: 400; font-size: 20px; color: var(--deka-ink); margin-bottom: 8px; letter-spacing: -0.01em; }
.laser-page .lp-card p { font-size: 14px; line-height: 1.6; color: var(--hm-muted); }
.laser-page .lp-card p + p { margin-top: 8px; }
/* accessories tab: option list + handpiece imagery */
.laser-page .lp-acc-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: start; }
.laser-page .lp-acc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.laser-page .lp-acc-list li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.5; color: var(--deka-ink); }
.laser-page .lp-acc-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; background: var(--deka-sapphire); border-radius: 50%; }
.laser-page .lp-acc-figs { display: grid; gap: 16px; }
.laser-page .lp-acc-fig { background: var(--deka-bone); border: 1px solid var(--deka-rule); border-radius: 14px; padding: 18px; text-align: center; }
.laser-page .lp-acc-fig img { width: 100%; max-height: 220px; object-fit: contain; }
.laser-page .lp-acc-fig figcaption { font-family: var(--deka-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hm-muted); margin-top: 12px; }
.laser-page .lp-note { margin-top: 18px; padding: 16px 18px; border-left: 2px solid var(--deka-brass); background: rgba(234, 231, 221, 0.5); font-size: 14px; line-height: 1.6; color: var(--hm-muted); }
@media (max-width: 760px) { .laser-page .lp-acc-grid { grid-template-columns: 1fr; } }
/* tabs → accordion on mobile */
@media (max-width: 900px) {
.laser-page .lp-tab-nav { display: none; }
.laser-page .lp-tab-body { margin-top: 24px; }
.laser-page .lp-tab { border-bottom: 1px solid var(--deka-rule); }
.laser-page .lp-acc-head {
display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px;
appearance: none; background: none; border: none; cursor: pointer; padding: 20px 4px; text-align: left;
font-family: var(--deka-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--deka-ink);
}
.laser-page .lp-acc-head::after { content: ''; flex: none; width: 12px; height: 12px; border-right: 1.5px solid var(--deka-sapphire); border-bottom: 1.5px solid var(--deka-sapphire); transform: rotate(45deg); transition: transform .25s ease; }
.laser-page .lp-acc-head.is-active { color: var(--deka-sapphire); }
.laser-page .lp-acc-head.is-active::after { transform: rotate(-135deg); }
.laser-page .lp-tab-panel { padding: 0 4px; }
.laser-page .lp-tab-panel.is-active { padding-bottom: 24px; }
}
/* ==========================================================================
7 — COMPARE
========================================================================== */
/* All four systems, every page — ported from the home-alt laser row
(home-alt-v2.css .ha-laser*). Bare cards: no chrome, no border, the product
shot floating on the same 32px line pattern the home page uses.
Only "Best for" survives. Wavelength / delivery / primary role all live on
the system's own page — that is what the View button is for, and dropping
them is what lets a fourth card (Luxea) fit without crushing the grid.
Two deliberate departures from the home-page source:
• The badge is INK, not brass. These cards sit on --deka-bone, a light
ground, and brass is dark-surface-only. The old brass badge was legal
only because the current card used to be ink-filled; it no longer is.
• The SmartPerio short-image override is keyed by a MODIFIER CLASS, not
:nth-child(3) as on the home page. Here the running laser is always
card 1, so card order changes per page and nth-child would land on the
wrong system.
========================================================================== */
.laser-page .lp-compare { padding: clamp(72px, 9vw, 120px) 0; background: var(--deka-bone); }
.laser-page .lp-compare-grid {
display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 36px; row-gap: 0;
margin-top: 44px;
/* badge / media / name / best-for / cta — one shared row each, so the four
cards keep a common baseline however long the copy runs. */
grid-template-rows: repeat(5, auto);
}
.laser-page .lp-comp-card {
display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 0;
background: none; border: 0; border-radius: 0; padding: 0;
}
.laser-page .lp-comp-badge { grid-row: 1; }
.laser-page .lp-comp-media { grid-row: 2; }
.laser-page .lp-comp-name { grid-row: 3; }
.laser-page .lp-comp-row { grid-row: 4; }
.laser-page .lp-comp-cta { grid-row: 5; }
.laser-page .lp-comp-badge {
font-family: var(--deka-mono); font-size: 9.5px; letter-spacing: 0.16em;
text-transform: uppercase; font-weight: 500;
min-height: 14px; margin-bottom: 10px; /* min-height reserves the row on the other three */
}
/* Only the current laser's badge carries text — the other three are empty and
just reserve the row, so scope the pill to :not(:empty) or they'd paint as
blank pills. Ink ground + ivory text (the house dark-surface pair); pill hugs
its text via justify-self:start rather than stretching the grid column. */
.laser-page .lp-comp-badge:not(:empty) {
justify-self: start;
padding: 5px 11px; border-radius: 999px;
background: var(--deka-ink); color: var(--deka-ivory);
}
.laser-page .lp-comp-media {
position: relative; height: 380px; display: grid; place-items: end center; margin-bottom: 30px;
}
/* The line pattern, same masked 32px grid as the home page — no card. */
.laser-page .lp-comp-media::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(4, 5, 65, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(4, 5, 65, 0.045) 1px, transparent 1px);
background-size: 32px 32px;
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 42%, #000 30%, transparent 80%);
mask-image: radial-gradient(ellipse 80% 60% at 50% 42%, #000 30%, transparent 80%);
}
.laser-page .lp-comp-media img {
position: relative; z-index: 1; width: auto; max-width: 100%;
height: 340px; min-height: 340px; max-height: 340px; /* identical render height for all four */
object-fit: contain; filter: drop-shadow(0 16px 26px rgba(4, 5, 65, 0.22));
transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.laser-page .lp-comp-card:hover .lp-comp-media img { transform: translateY(-6px) scale(1.02); }
/* SmartPerio is the short wide benchtop unit — ~80% height so it doesn't
dominate next to the tall floor-standing units. */
.laser-page .lp-comp-card--smartperio .lp-comp-media img {
height: 272px; min-height: 272px; max-height: 272px;
}
.laser-page .lp-comp-name {
font-family: var(--deka-serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 29px);
line-height: 1.1; letter-spacing: -0.015em; color: var(--deka-ink); margin-bottom: 14px;
}
.laser-page .lp-comp-row { margin: 0 0 20px; }
.laser-page .lp-comp-row dt {
font-family: var(--deka-mono); font-size: 9.5px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--deka-sapphire);
}
.laser-page .lp-comp-row dd { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--hm-muted); }
.laser-page .lp-comp-cta { align-self: start; }
.laser-page .lp-comp-cta .lp-btn-ghost { justify-content: center; }
/* Mobile — the home page's treatment: drop the subgrid, stack one-up, and crop
the bottom quarter of each unit with a fade. The crop is a clip-path rather
than overflow:hidden so the drop-shadow can still spill past the top/sides —
see the LASER CARDS — mobile note in home-alt-v2.css for the full reasoning. */
@media (max-width: 1100px) {
.laser-page .lp-compare-grid { display: block; max-width: 520px; margin-inline: auto; }
.laser-page .lp-comp-card { display: flex; flex-direction: column; }
.laser-page .lp-comp-card + .lp-comp-card { margin-top: 60px; }
}
@media (max-width: 760px) {
.laser-page .lp-comp-media {
height: 255px; /* 75% of the 340px image */
place-items: start center; /* top-aligned → the crop takes from the BOTTOM */
overflow: visible;
clip-path: inset(-30px -30px 0 -30px);
margin-bottom: 14px;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.laser-page .lp-comp-card--smartperio .lp-comp-media { height: 204px; }
}
/* ==========================================================================
8 — TRAINING HIGHLIGHT (home training block + mosaic + lightbox, re-scoped)
========================================================================== */
.laser-page .lp-training { background: var(--deka-ivory); }
.laser-page .lp-training-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.laser-page .lp-training-copy { align-self: center; padding: clamp(72px, 9vw, 110px) clamp(32px, 4vw, 72px) clamp(72px, 9vw, 110px) max(56px, calc((100vw - 1440px) / 2 + 56px)); }
.laser-page .lp-training-copy .lp-lead { color: var(--hm-muted); }
.laser-page .lp-training-copy .lp-btn { margin-top: 30px; }
/* aspect-locked mosaic — its height (always taller than the copy) drives the row */
.laser-page .lp-training-media { position: relative; aspect-ratio: 1 / 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 0; background: var(--deka-ivory); }
.laser-page .lp-tile { position: relative; overflow: hidden; border: 0; padding: 0; margin: 0; cursor: pointer; background: var(--deka-bone); }
.laser-page .lp-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.laser-page .lp-tile:hover img { transform: scale(1.05); }
.laser-page .lp-tile::after { content: ''; position: absolute; inset: 0; background: rgba(4,5,65,0); transition: background .25s ease; }
.laser-page .lp-tile:hover::after { background: rgba(4,5,65,.14); }
.laser-page .lp-tile--p1 { grid-area: 1 / 1 / 2 / 2; }
.laser-page .lp-tile--p2 { grid-area: 1 / 2 / 2 / 3; }
.laser-page .lp-tile--p3 { grid-area: 1 / 3 / 2 / 4; }
.laser-page .lp-tile--p4 { grid-area: 2 / 1 / 3 / 2; }
.laser-page .lp-tile--p5 { grid-area: 3 / 1 / 4 / 2; }
.laser-page .lp-tile--main { grid-area: 2 / 2 / 4 / 4; }
@media (max-width: 900px) {
.laser-page .lp-training-grid { grid-template-columns: 1fr; }
.laser-page .lp-training-media { aspect-ratio: 4 / 3; order: -1; }
.laser-page .lp-training-copy { padding: 64px 56px 72px; }
}
@media (max-width: 720px) { .laser-page .lp-training-copy { padding: 56px 24px 64px; } }
/* lightbox (shared) */
.laser-page .lp-lightbox { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; background: rgba(4,5,65,.92); padding: 40px; }
.laser-page .lp-lightbox.is-open { display: flex; }
.laser-page .lp-lb-frame { margin: 0; max-width: 90vw; max-height: 86vh; }
.laser-page .lp-lb-img { display: block; max-width: 90vw; max-height: 86vh; object-fit: contain; border-radius: 4px; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.laser-page .lp-lb-arrow, .laser-page .lp-lb-close { position: absolute; background: rgba(255,255,255,.92); color: var(--deka-ink); border: none; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.laser-page .lp-lb-arrow { width: 56px; height: 56px; top: 50%; transform: translateY(-50%); }
.laser-page .lp-lb-prev { left: 28px; } .laser-page .lp-lb-next { right: 28px; }
.laser-page .lp-lb-close { width: 48px; height: 48px; top: 28px; right: 28px; }
.laser-page .lp-lb-counter { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); font-family: var(--deka-mono); font-size: 12px; letter-spacing: .14em; color: #fff; }
/* ==========================================================================
9 — FAQ
========================================================================== */
.laser-page .lp-faq {
position: relative; color: #fff; padding: clamp(88px, 11vw, 150px) 0;
background: radial-gradient(ellipse 70% 55% at 78% 15%, rgba(43, 82, 159, 0.38), transparent 62%),
linear-gradient(160deg, #0b004a 0%, #040541 100%);
}
.laser-page .lp-faq > .container { position: relative; z-index: 1; text-align: center; }
.laser-page .lp-faq .lp-eyebrow { color: var(--deka-sapphire-soft); justify-content: center; }
.laser-page .lp-faq .lp-eyebrow::before { background: var(--deka-sapphire-soft); }
.laser-page .lp-faq .lp-h2 { color: #fff; text-align: center; }
.laser-page .lp-faq-list { margin: 44px auto 0; border-top: 1px solid rgba(255, 255, 255, 0.2); max-width: 860px; text-align: left; }
.laser-page .lp-faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.laser-page .lp-faq-q {
width: 100%; appearance: none; background: none; border: none; cursor: pointer; text-align: left;
display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 4px;
font-family: var(--deka-serif); font-size: clamp(18px, 1.8vw, 22px); font-weight: 400; color: #fff; letter-spacing: -0.01em;
}
.laser-page .lp-faq-q::after { content: ''; flex: none; width: 13px; height: 13px; margin-top: 6px; border-right: 1.5px solid var(--deka-sapphire-soft); border-bottom: 1.5px solid var(--deka-sapphire-soft); transform: rotate(45deg); transition: transform .25s ease; }
.laser-page .lp-faq-item.is-open .lp-faq-q { color: var(--deka-sapphire-soft); }
.laser-page .lp-faq-item.is-open .lp-faq-q::after { transform: rotate(-135deg); }
.laser-page .lp-faq-a { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.laser-page .lp-faq-item.is-open .lp-faq-a { max-height: 480px; }
.laser-page .lp-faq-a p { font-size: 15.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.8); padding: 0 4px 26px; }
/* ==========================================================================
10 — FINAL CONSULT FORM (ink band; ivory form card — reused)
========================================================================== */
.laser-page .lp-final { padding: clamp(80px, 9vw, 120px) 0; background: var(--deka-ink); color: var(--deka-ivory); }
.laser-page .lp-final-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.laser-page .lp-final .lp-eyebrow { color: var(--deka-sapphire-soft); }
.laser-page .lp-final .lp-eyebrow::before { background: var(--deka-sapphire-soft); }
.laser-page .lp-final h2 { font-family: var(--deka-serif); font-weight: 300; font-size: clamp(32px, 4vw, 50px); line-height: 1.05; letter-spacing: -0.02em; color: var(--deka-ivory); margin-top: 16px; }
@media (min-width: 1000px) { .laser-page .lp-final h2 { font-size: var(--deka-h2); } }
.laser-page .lp-final h2 em { font-style: italic; color: var(--deka-brass); }
.laser-page .lp-final-copy p { font-size: 16px; line-height: 1.7; color: rgba(245, 244, 239, 0.72); margin-top: 18px; }
.laser-page .lp-form { background: var(--deka-ivory); color: var(--deka-ink); border-radius: 18px; padding: 36px 32px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.laser-page .lp-form h3 { font-family: var(--deka-serif); font-weight: 400; font-size: 25px; line-height: 1.15; margin-bottom: 6px; }
.laser-page .lp-form-sub { font-size: 14px; line-height: 1.55; color: var(--hm-muted); margin-bottom: 22px; }
@media (max-width: 900px) { .laser-page .lp-final-grid { grid-template-columns: 1fr; gap: 40px; } }
/* --- Practice cards: icon tile + hover lift -------------------------------
Scoped to .lp-practice so the ~11 .lp-card elements inside the tab panels
on every laser page are NOT affected.
The glyph is BRASS on an INK tile: brass is the system's one warm accent and
is only ever used on a dark surface — the ink tile is that dark surface. */
.laser-page .lp-practice .lp-card {
padding: 30px 26px 30px;
background: linear-gradient(180deg, #ffffff 0%, #faf9f5 100%);
border-color: rgba(4, 5, 65, 0.10);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 26px -20px rgba(4, 5, 65, 0.30);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.laser-page .lp-practice .lp-card:hover {
transform: translateY(-3px);
border-color: rgba(4, 5, 65, 0.18);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 26px 50px -30px rgba(4, 5, 65, 0.40);
}
/* The shared .lp-card title is 20px — barely clear of the 14px body copy, so the
card read as one block of text. Give the title a real step up. Scoped to
.lp-practice for the same reason as the rules above: the tab-panel cards keep
the 20px default. Mobile floors at 22px; desktop lands at 26px. */
.laser-page .lp-practice .lp-card h3 { font-size: clamp(22px, 1.8vw, 26px); line-height: 1.25; }
.laser-page .lp-card__icon {
width: 46px; height: 46px; border-radius: 13px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--deka-ink); color: var(--deka-brass);
font-size: 18px; line-height: 1; margin-bottom: 20px;
transition: transform .25s ease;
}
.laser-page .lp-practice .lp-card:hover .lp-card__icon { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
.laser-page .lp-practice .lp-card,
.laser-page .lp-card__icon { transition: none; }
.laser-page .lp-practice .lp-card:hover { transform: none; }
.laser-page .lp-practice .lp-card:hover .lp-card__icon { transform: none; }
}
/* .lp-ext--reverse — image-left variant of .lp-ext (SmartXide: Facial Aesthetic
handpiece). It carries NO declarations on purpose: .lp-ext is a 2-col grid with
no `order`, so column placement follows DOM order. The .lp-ext-media is authored
as the FIRST child, which puts the image in the left column on desktop AND makes
it stack FIRST when the grid collapses to 1 column at <=860px (image-first on
mobile, as required). Do NOT add `order:` here — it would break the mobile order. */
/* ── .lp-cards layout ──────────────────────────────────────────────────────
Flex-wrap instead of a fixed column count, so a set of any size fills the
rows it can and centres whatever is left over on the last row. Cards are
min 300px and grow to share the row, capped at 420px so a lone card on a
final row sits at card width rather than stretching across the whole row.
align-items: stretch — NOT flex-start — is what makes every card match the
height of the tallest card in its OWN row. align-content: flex-start is the
rule doing the "don't stretch vertically" job: it packs the rows to the top
instead of spreading them down the container. */
.laser-page .lp-cards,
.laser-page .lp-practice .lp-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
align-content: flex-start;
gap: 16px;
}
.laser-page .lp-cards > * {
flex: 1 1 300px;
/* min() so the floor can never exceed the container on a narrow screen */
min-width: min(300px, 100%);
max-width: 420px;
}
/* ── .lp-cards → peek slider on mobile ─────────────────────────────────────
Client feedback (Jul 2026): stacked cards on a phone hide how much is in
the set. Same read as the "Beyond Traditional Dentistry" deck on the
homepage — a horizontal strip with the next card part-showing as the only
affordance needed.
Built on CSS scroll-snap rather than porting the .ha-bt transform slider:
.lp-cards appears ~15x across 8 pages, and several instances sit INSIDE
.lp-tab panels that are display:none until their tab opens. The .ha-bt
slider measures card width on load and would read 0 in a hidden panel;
scroll-snap needs no measurement and gets native momentum, keyboard, and
assistive-tech scrolling for free.
The flex-basis clamp carries the responsive story: 82% of the strip on a
phone (one card plus a ~50px peek), capped at 420px so a 700-860px viewport
shows two cards and a peek rather than one oversized card. */
@media (max-width: 860px) {
.laser-page .lp-cards,
.laser-page .lp-practice .lp-cards {
justify-content: flex-start;
flex-wrap: nowrap;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: none;
/* Room for the card shadow + hover lift INSIDE the clip (it is an
overflow container), with the bottom pulled back so the rhythm
below is unchanged.
Deliberately NOT the margin-block shorthand: that also sets
margin-top, which wiped the section's clamp(40px,5vw,60px) gap and
ran the cards straight into the paragraph above. Only the bottom
needs compensating. */
padding-block: 6px 16px;
margin-bottom: -16px;
}
.laser-page .lp-cards::-webkit-scrollbar { display: none; }
.laser-page .lp-cards > * {
flex: 0 0 clamp(240px, 82%, 420px);
/* drop the 300px desktop floor: in slider mode the clamp above is
what sets the card width, and the floor would eat the peek */
min-width: 0;
max-width: none;
scroll-snap-align: start;
}
}