/* ============================================================ SUMMER LUXE · ENHANCEMENT LAYER (v 26.05.16) ------------------------------------------------------------ Apple/Hermès 미니멀 럭셔리 톤 위로 얹는 시각 보강 레이어. 기존 LUXE 토큰·구조는 그대로 두고 hairline 액자, 스캔 리빌, 카운트업, 프로세스 레일, 섹션 인덱스 등 인포그래픽만 추가. 메인(.luxe-*) + 랜딩(.section/.ba-card/.event-card) 동시 지원. ============================================================ */ :root { --enh-frame-offset: 10px; --enh-frame-stroke: 1px; --enh-corner-len: 18px; --enh-corner-w: 1.5px; --enh-corner-hover: 28px; --enh-ease: cubic-bezier(0.2, 0.7, 0.1, 1); --enh-rev: cubic-bezier(0.7, 0, 0.2, 1); --enh-reveal-dur: 1100ms; /* Reuse LUXE tokens; fall back for landings without summer-luxe.css */ --enh-paper: var(--luxe-paper, #FAFAF7); --enh-bone: var(--luxe-bone, #F2EEE5); --enh-ink: var(--luxe-ink, #0A1F2E); --enh-ink-soft: var(--luxe-ink-soft, #2E4A5C); --enh-ink-muted:var(--luxe-ink-muted, #5A6F7C); --enh-champagne: var(--luxe-champagne, #C9A876); --enh-champagne-dk: var(--luxe-champagne-dark, #9A7C49); --enh-champagne-pl: var(--luxe-champagne-pale, #E8D9BD); --enh-teal: var(--luxe-teal, #006A7F); } /* ============================================================ 1. UNIVERSAL IMAGE ATELIER FRAME ------------------------------------------------------------ Hermès editorial: 모든 핵심 이미지에 champagne hairline 더블 보더 + 4개 코너 마커 + hover 시 마커 확장. ============================================================ */ /* MAIN — .luxe-ba-card, .luxe-event-card, .luxe-gallery-card, .luxe-hero-figure */ .luxe-ba-card .img-wrap, .luxe-event-card .img-wrap, .luxe-gallery-card, .luxe-hero-figure, /* LANDINGS — .ba-card .ba-image / image wrapper, .event-card, .interior img */ .ba-card, .event-card, .interior-grid figure, .interior-grid .interior-item { position: relative; isolation: isolate; } /* Outer hairline (the "second" frame, Hermès double-frame effect) */ .luxe-ba-card .img-wrap::before, .luxe-event-card .img-wrap::before, .luxe-gallery-card::before, .ba-card::before, .event-card::before, .interior-grid figure::before, .interior-grid .interior-item::before { content: ''; position: absolute; inset: calc(-1 * var(--enh-frame-offset)); border: var(--enh-frame-stroke) solid rgba(201, 168, 118, 0.32); pointer-events: none; z-index: 1; transition: inset 0.55s var(--enh-ease), border-color 0.55s var(--enh-ease); } /* Corner markers — single SVG-style with conic gradient pseudo */ .luxe-ba-card .img-wrap::after, .luxe-event-card .img-wrap::after, .luxe-gallery-card::after, .ba-card::after, .event-card::after, .interior-grid figure::after, .interior-grid .interior-item::after { content: ''; position: absolute; inset: calc(-1 * var(--enh-frame-offset)); pointer-events: none; z-index: 2; background: /* Top-left */ linear-gradient(to right, var(--enh-champagne) 0 var(--enh-corner-len), transparent 0) top left / 100% var(--enh-corner-w) no-repeat, linear-gradient(to bottom, var(--enh-champagne) 0 var(--enh-corner-len), transparent 0) top left / var(--enh-corner-w) 100% no-repeat, /* Top-right */ linear-gradient(to left, var(--enh-champagne) 0 var(--enh-corner-len), transparent 0) top right / 100% var(--enh-corner-w) no-repeat, linear-gradient(to bottom, var(--enh-champagne) 0 var(--enh-corner-len), transparent 0) top right / var(--enh-corner-w) 100% no-repeat, /* Bottom-left */ linear-gradient(to right, var(--enh-champagne) 0 var(--enh-corner-len), transparent 0) bottom left / 100% var(--enh-corner-w) no-repeat, linear-gradient(to top, var(--enh-champagne) 0 var(--enh-corner-len), transparent 0) bottom left / var(--enh-corner-w) 100% no-repeat, /* Bottom-right */ linear-gradient(to left, var(--enh-champagne) 0 var(--enh-corner-len), transparent 0) bottom right / 100% var(--enh-corner-w) no-repeat, linear-gradient(to top, var(--enh-champagne) 0 var(--enh-corner-len), transparent 0) bottom right / var(--enh-corner-w) 100% no-repeat; transition: background-size 0.55s var(--enh-ease); } /* Hover: extend corner markers + tighten outer hairline */ @media (hover: hover) { .luxe-ba-card:hover .img-wrap::before, .luxe-event-card:hover .img-wrap::before, .luxe-gallery-card:hover::before, .ba-card:hover::before, .event-card:hover::before, .interior-grid figure:hover::before, .interior-grid .interior-item:hover::before { inset: calc(-1 * var(--enh-frame-offset) - 4px); border-color: rgba(201, 168, 118, 0.6); } .luxe-ba-card:hover .img-wrap::after, .luxe-event-card:hover .img-wrap::after, .luxe-gallery-card:hover::after, .ba-card:hover::after, .event-card:hover::after, .interior-grid figure:hover::after, .interior-grid .interior-item:hover::after { background-size: 100% var(--enh-corner-w), var(--enh-corner-w) 100%, 100% var(--enh-corner-w), var(--enh-corner-w) 100%, 100% var(--enh-corner-w), var(--enh-corner-w) 100%, 100% var(--enh-corner-w), var(--enh-corner-w) 100%; background-image: linear-gradient(to right, var(--enh-champagne) 0 var(--enh-corner-hover), transparent 0), linear-gradient(to bottom, var(--enh-champagne) 0 var(--enh-corner-hover), transparent 0), linear-gradient(to left, var(--enh-champagne) 0 var(--enh-corner-hover), transparent 0), linear-gradient(to bottom, var(--enh-champagne) 0 var(--enh-corner-hover), transparent 0), linear-gradient(to right, var(--enh-champagne) 0 var(--enh-corner-hover), transparent 0), linear-gradient(to top, var(--enh-champagne) 0 var(--enh-corner-hover), transparent 0), linear-gradient(to left, var(--enh-champagne) 0 var(--enh-corner-hover), transparent 0), linear-gradient(to top, var(--enh-champagne) 0 var(--enh-corner-hover), transparent 0); } } /* Image inside: gentle internal zoom on hover */ .luxe-ba-card .img-wrap img, .luxe-event-card .img-wrap img, .luxe-gallery-card > img, .ba-card img, .event-card img, .interior-grid img { transition: transform 0.9s var(--enh-ease), filter 0.6s var(--enh-ease); will-change: transform; } @media (hover: hover) { .luxe-ba-card:hover .img-wrap img, .luxe-event-card:hover .img-wrap img, .luxe-gallery-card:hover > img, .ba-card:hover img, .event-card:hover img, .interior-grid figure:hover img, .interior-grid .interior-item:hover img { transform: scale(1.035); filter: contrast(1.04) saturate(1.06); } } /* Container needs to NOT clip the offset hairlines/markers. But the img wrap itself MUST still clip the image. */ .luxe-ba-card, .luxe-event-card, .luxe-gallery-card, .ba-card, .event-card { overflow: visible !important; } .luxe-ba-card .img-wrap, .luxe-event-card .img-wrap { overflow: hidden; position: relative; } /* Ensure landing .ba-card/.event-card clip image (they often have border-radius) */ .ba-card img, .event-card img { display: block; width: 100%; height: auto; } /* Landing pages: the section/card may sit close to neighbor — give the outer frame breathing room so adjacent cards' frames don't overlap. */ .luxe-ba-grid, .luxe-events-track, .luxe-gallery-grid, .ba-gallery-grid, .event-scroll-container, .interior-grid { padding: 14px; margin: -14px; } /* ============================================================ 2. SCAN REVEAL — champagne stripe sweeps the image once when it enters viewport, then fades. Activated by JS adding .enh-reveal-ready (initial state) + .enh-revealed (trigger). ============================================================ */ .enh-reveal-ready { position: relative; } .enh-reveal-ready::after, .enh-reveal-ready::before { /* don't conflict with corner-marker pseudo on the .img-wrap */ } /* Add a scan layer ONLY on .img-wrap level (where it makes sense) */ .luxe-ba-card.enh-reveal-ready .img-wrap > .enh-scan, .luxe-event-card.enh-reveal-ready .img-wrap > .enh-scan, .luxe-gallery-card.enh-reveal-ready > .enh-scan, .ba-card.enh-reveal-ready > .enh-scan, .event-card.enh-reveal-ready > .enh-scan, .interior-grid figure.enh-reveal-ready > .enh-scan { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient( 100deg, transparent 0%, transparent 38%, rgba(250, 250, 247, 0.0) 45%, rgba(201, 168, 118, 0.35) 50%, rgba(250, 250, 247, 0.0) 55%, transparent 62%, transparent 100% ); background-size: 220% 100%; background-position: 130% 0; transition: background-position var(--enh-reveal-dur) var(--enh-rev), opacity 400ms var(--enh-ease); opacity: 0; } .enh-revealed .enh-scan { background-position: -30% 0 !important; opacity: 1 !important; } .enh-revealed.enh-reveal-done .enh-scan { opacity: 0 !important; } /* ============================================================ 3. STATS COUNT-UP & MICRO CHART ============================================================ */ .luxe-stats-cell { position: relative; padding-top: 8px; } /* Champagne top hairline that draws in on reveal */ .luxe-stats-cell::before { content: ''; position: absolute; top: 0; left: 0; height: 1px; width: 0; background: var(--enh-champagne); transition: width 1.2s var(--enh-ease) 0.1s; } .luxe-stats-cell.enh-counted::before { width: 100%; } .luxe-stats-num { position: relative; font-variant-numeric: tabular-nums lining-nums; } /* Small inline sparkline-style accent under each stat */ .luxe-stats-cell::after { content: ''; position: absolute; bottom: 0; left: 0; width: 22px; height: 1px; background: var(--enh-ink-muted); opacity: 0; transition: opacity 0.5s var(--enh-ease) 0.6s, width 0.8s var(--enh-ease) 0.6s; } .luxe-stats-cell.enh-counted::after { opacity: 0.55; width: 56px; } /* ============================================================ 4. PROCESS TIMELINE RAIL — draw-on-scroll ------------------------------------------------------------ Both main .luxe-process and landing .process-steps get a horizontal champagne hairline behind the step diamonds. ============================================================ */ .luxe-process, .process-steps { position: relative; } .luxe-process::before, .process-steps::before { content: ''; position: absolute; top: 38px; left: 6%; right: 6%; height: 1px; background: linear-gradient(to right, var(--enh-champagne-pl) 0%, var(--enh-champagne) 50%, var(--enh-champagne-pl) 100%); transform: scaleX(0); transform-origin: left center; transition: transform 1.6s var(--enh-ease) 0.2s; z-index: 0; pointer-events: none; } .luxe-process.enh-drawn::before, .process-steps.enh-drawn::before { transform: scaleX(1); } /* Step diamonds for landing .process-step */ .process-step, .luxe-process-step { position: relative; } .process-step::before { content: ''; position: absolute; top: 26px; left: 50%; width: 14px; height: 14px; border: 1px solid var(--enh-champagne); background: var(--enh-paper); transform: translate(-50%, -50%) rotate(45deg); z-index: 1; transition: background 0.5s var(--enh-ease), transform 0.5s var(--enh-ease); } .process-step:hover::before { background: var(--enh-champagne); transform: translate(-50%, -50%) rotate(45deg) scale(1.15); } /* ============================================================ 5. SECTION PROGRESS INDICATOR (right edge, desktop only) ============================================================ */ .enh-progress { position: fixed; right: clamp(18px, 2.6vw, 36px); top: 50%; transform: translateY(-50%); z-index: 80; display: flex; flex-direction: column; gap: 14px; pointer-events: auto; opacity: 0; transition: opacity 0.6s var(--enh-ease); } .enh-progress.enh-visible { opacity: 1; } .enh-progress-dot { width: 28px; height: 1px; background: var(--enh-ink-muted); opacity: 0.35; transition: width 0.45s var(--enh-ease), opacity 0.45s var(--enh-ease), background 0.45s var(--enh-ease); position: relative; cursor: pointer; } .enh-progress-dot:hover, .enh-progress-dot.enh-active { width: 48px; opacity: 1; background: var(--enh-champagne); } .enh-progress-dot::after { /* Hover label disabled per user request — no added text. */ content: none; } @media (max-width: 1100px) { .enh-progress { display: none; } } /* ============================================================ 6. SCROLL PROGRESS BAR (top edge) ============================================================ */ .enh-scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 1px; z-index: 200; pointer-events: none; background: transparent; } .enh-scroll-progress::after { content: ''; display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(to right, var(--enh-champagne) 0%, var(--enh-champagne-dk) 100%); transition: width 80ms linear; } /* ============================================================ 7. HERO ENHANCEMENTS (main + landings) ============================================================ */ /* Subtle parallax for hero figure on main */ .luxe-hero-figure img { transform: translateY(var(--enh-parallax-y, 0)); transition: transform 0.1s linear; will-change: transform; } /* Decorative compass mark behind hero title — non-intrusive */ .luxe-hero::before { z-index: 0; } .luxe-hero .luxe-hero-grid > div:first-child { position: relative; z-index: 1; } .luxe-hero .luxe-hero-grid > div:first-child::before { content: ''; position: absolute; top: -40px; left: -90px; width: 220px; height: 220px; background: radial-gradient(circle at center, rgba(201, 168, 118, 0.0) 0%, rgba(201, 168, 118, 0.0) 38%, rgba(201, 168, 118, 0.06) 40%, rgba(201, 168, 118, 0.0) 42%, rgba(201, 168, 118, 0.0) 100%); z-index: -1; pointer-events: none; animation: enhCompassDrift 12s ease-in-out infinite alternate; } @keyframes enhCompassDrift { from { transform: translate(0, 0); } to { transform: translate(8px, -6px); } } /* ============================================================ 8. FAQ — refined +/- micro-interaction (main only) ============================================================ */ .luxe-faq-item .luxe-faq-toggle { position: relative; width: 22px; height: 22px; flex-shrink: 0; } .luxe-faq-item .luxe-faq-toggle::before, .luxe-faq-item .luxe-faq-toggle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 11px; height: 1px; background: var(--enh-ink); transform: translate(-50%, -50%); transition: transform 0.45s var(--enh-ease), background 0.45s var(--enh-ease); } .luxe-faq-item .luxe-faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); } .luxe-faq-item.open .luxe-faq-toggle::before, .luxe-faq-item.open .luxe-faq-toggle::after { background: var(--enh-champagne); } .luxe-faq-item.open .luxe-faq-toggle::after { transform: translate(-50%, -50%) rotate(0deg); } /* ============================================================ 9. REVIEWS — animated star fill (main) ============================================================ */ .luxe-review-card .stars { font-family: var(--serif, 'Cormorant Garamond', serif); letter-spacing: 0.1em; color: rgba(201, 168, 118, 0.25); position: relative; display: inline-block; } .luxe-review-card .stars::before { content: attr(data-stars); position: absolute; inset: 0; color: var(--enh-champagne); overflow: hidden; width: 0; transition: width 1.4s var(--enh-ease) 0.2s; white-space: nowrap; } .luxe-review-card.enh-revealed .stars::before { width: 100%; } .luxe-review-card { position: relative; } /* Opening quote */ .luxe-review-card::before { content: '"'; position: absolute; top: -8px; left: 18px; font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-size: 56px; line-height: 1; color: var(--enh-champagne-pl); z-index: 1; pointer-events: none; transition: color 0.5s var(--enh-ease), transform 0.5s var(--enh-ease); } .luxe-review-card:hover::before { color: var(--enh-champagne); transform: translateY(-2px); } /* ============================================================ 10. MARQUEE FADE END-CAPS ============================================================ */ .luxe-marquee { position: relative; } .luxe-marquee::before, .luxe-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: clamp(40px, 8vw, 120px); z-index: 3; pointer-events: none; } .luxe-marquee::before { left: 0; background: linear-gradient(to right, var(--enh-bone) 0%, transparent 100%); } .luxe-marquee::after { right: 0; background: linear-gradient(to left, var(--enh-bone) 0%, transparent 100%); } /* ============================================================ 11. LANDING PAGE SECTION REFINEMENT — apply LUXE polish to .ba-card, .event-card, .section-header inside landings beyond what summer-luxe-events.css already provides. ============================================================ */ /* Section-header: tighten and add small index numeral */ .section-header { position: relative; } .section-header h2 { position: relative; display: inline-block; } .section-header h2::after { content: ''; display: block; width: 48px; height: 1px; background: var(--enh-champagne); margin: 20px auto 0; transform: scaleX(0); transform-origin: center; transition: transform 0.9s var(--enh-ease); } .section.enh-section-in .section-header h2::after { transform: scaleX(1); } /* Landing about-image / director-image: same atelier frame */ .about-image, .director-image, .about-img-wrap { position: relative; isolation: isolate; } .about-image::before, .director-image::before, .about-img-wrap::before { content: ''; position: absolute; inset: -10px; border: 1px solid rgba(201, 168, 118, 0.32); pointer-events: none; z-index: 1; transition: inset 0.55s var(--enh-ease); } .about-image::after, .director-image::after, .about-img-wrap::after { content: ''; position: absolute; inset: -10px; pointer-events: none; z-index: 2; background: linear-gradient(to right, var(--enh-champagne) 0 18px, transparent 0) top left / 100% 1.5px no-repeat, linear-gradient(to bottom, var(--enh-champagne) 0 18px, transparent 0) top left / 1.5px 100% no-repeat, linear-gradient(to left, var(--enh-champagne) 0 18px, transparent 0) top right / 100% 1.5px no-repeat, linear-gradient(to bottom, var(--enh-champagne) 0 18px, transparent 0) top right / 1.5px 100% no-repeat, linear-gradient(to right, var(--enh-champagne) 0 18px, transparent 0) bottom left / 100% 1.5px no-repeat, linear-gradient(to top, var(--enh-champagne) 0 18px, transparent 0) bottom left / 1.5px 100% no-repeat, linear-gradient(to left, var(--enh-champagne) 0 18px, transparent 0) bottom right / 100% 1.5px no-repeat, linear-gradient(to top, var(--enh-champagne) 0 18px, transparent 0) bottom right / 1.5px 100% no-repeat; } .about-image, .director-image, .about-img-wrap { overflow: visible !important; } /* ============================================================ 12. PLATE COUNTER — landings: DISABLED per user request (no text overlays). ============================================================ */ /* ============================================================ 13. CARD LIFT — universal "lift on scroll in" reveal ============================================================ */ .luxe-ba-card, .luxe-event-card, .luxe-gallery-card, .luxe-review-card, .luxe-why-card, .ba-card, .event-card, .review-card { transition: transform 0.6s var(--enh-ease), box-shadow 0.6s var(--enh-ease), opacity 0.7s var(--enh-ease); } @media (hover: hover) { .luxe-ba-card:hover, .luxe-event-card:hover, .luxe-gallery-card:hover, .ba-card:hover, .event-card:hover { transform: translateY(-6px); } } /* ============================================================ 14. INTERIOR — captioned plate index + frame ============================================================ */ .luxe-gallery-card { overflow: visible; } .luxe-gallery-card > img { position: relative; z-index: 0; } .luxe-gallery-card .label, .luxe-gallery-card .cap { position: relative; z-index: 4; } /* ============================================================ 15. NAVER MAP frame — hairline only, no text label. ============================================================ */ .luxe-map-wrap { position: relative; isolation: isolate; display: block; } .luxe-map-wrap::before { content: ''; position: absolute; inset: -10px; border: 1px solid rgba(201, 168, 118, 0.32); pointer-events: none; z-index: 2; } /* ============================================================ 16. EVENTS TRACK — add chip count + nav cue ============================================================ */ .luxe-events-track, .event-scroll-container, .ba-gallery-grid { scroll-behavior: smooth; } /* ============================================================ 16b. INJECTED LABELS — DISABLED per user request. ============================================================ */ .enh-frame-label, .enh-ba-badge { display: none !important; } /* ============================================================ 16c. HIDE TEXT-ON-IMAGE LABELS (legacy LUXE chips) ------------------------------------------------------------ User requested: no text overlaying images. The HTML stays, only visual chips are hidden. ============================================================ */ .luxe-event-card .label, .luxe-gallery-card .label, .luxe-hero-fig-tag, .luxe-hero-fig-side, .luxe-hero-fig-cap, .luxe-gallery-card .cap, .luxe-ba-card .img-wrap [class*="label"], .event-card .label, .event-card [class*="badge"], .ba-card .label, .ba-card [class*="badge"], .interior-grid [class*="label"], .interior-grid [class*="frame-tag"] { display: none !important; } /* ============================================================ 17. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ============================================================ 18. PRINT — strip enhancement chrome ============================================================ */ @media print { .enh-progress, .enh-scroll-progress { display: none !important; } } /* ============================================================ ============================================================ PATCH 2 · 26.05.16 — consistency + editorial table polish ============================================================ ============================================================ */ /* ============================================================ P2.1 GRID DIVIDERS — Stats / Why / Services / Contact ------------------------------------------------------------ 1px champagne hairlines between cells, vertically fading at top/bottom. Reads like a Hermès apothecary catalog table. ============================================================ */ .luxe-grid-4 { position: relative; display: grid; /* respect existing grid; only add dividers */ } .luxe-grid-4 > .luxe-stats-cell { position: relative; } .luxe-grid-4 > .luxe-stats-cell + .luxe-stats-cell::before { /* prevent collision with PATCH 1's top hairline (which is at top:0). This new vertical divider is on the LEFT edge of cells 2..n */ } .luxe-grid-4 > .luxe-stats-cell + .luxe-stats-cell { box-shadow: inset 1px 0 0 0 rgba(201, 168, 118, 0.0); } /* Use a dedicated pseudo for vertical hairline so we don't fight the PATCH 1 top-hairline animation. */ .luxe-stats-cell { --enh-divider-w: 1px; } .luxe-grid-4 > .luxe-stats-cell:not(:first-child) { background-image: linear-gradient( to bottom, transparent 0%, rgba(201, 168, 118, 0.0) 12%, rgba(201, 168, 118, 0.5) 30%, rgba(201, 168, 118, 0.5) 70%, rgba(201, 168, 118, 0.0) 88%, transparent 100% ); background-size: 1px 100%; background-position: left top; background-repeat: no-repeat; padding-left: clamp(20px, 2.4vw, 40px); } @media (max-width: 700px) { .luxe-grid-4 > .luxe-stats-cell:not(:first-child) { background-image: none; padding-left: 0; } } /* Why Kyurim — same divider treatment, 3-col on desktop */ .luxe-why-grid { position: relative; } .luxe-why-grid > .luxe-why-card { position: relative; } .luxe-why-grid > .luxe-why-card:not(:first-child) { background-image: linear-gradient( to bottom, transparent 0%, rgba(201, 168, 118, 0.0) 8%, rgba(201, 168, 118, 0.4) 28%, rgba(201, 168, 118, 0.4) 72%, rgba(201, 168, 118, 0.0) 92%, transparent 100% ); background-size: 1px 100%; background-position: left top; background-repeat: no-repeat; } @media (max-width: 900px) { .luxe-why-grid > .luxe-why-card:not(:first-child) { background-image: linear-gradient( to right, transparent 0%, rgba(201, 168, 118, 0.4) 20%, rgba(201, 168, 118, 0.4) 80%, transparent 100% ); background-size: 100% 1px; background-position: top left; } } /* Contact info rows — left marker that extends on hover */ .luxe-info-row { position: relative; padding-left: 18px !important; transition: padding-left 0.5s var(--enh-ease); } .luxe-info-row::after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 1px; background: var(--enh-champagne); transition: width 0.5s var(--enh-ease), background 0.5s var(--enh-ease); opacity: 0.6; } @media (hover: hover) { .luxe-info-row:hover { padding-left: 28px !important; } .luxe-info-row:hover::after { width: 20px; opacity: 1; background: var(--enh-champagne-dk); } } /* ============================================================ P2.2 SERVICE ROW — left rail + diamond marker on hover ============================================================ */ .luxe-services-row { position: relative; } .luxe-services-row::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--enh-champagne); transform: scaleY(0); transform-origin: top center; transition: transform 0.55s var(--enh-ease); pointer-events: none; z-index: 1; } @media (hover: hover) { .luxe-services-row:hover::before { transform: scaleY(1); } } /* Diamond marker on left of the row, appears with rail */ .luxe-services-row::after { content: ''; position: absolute; left: -3px; top: 50%; width: 7px; height: 7px; background: var(--enh-paper); border: 1px solid var(--enh-champagne); transform: translateY(-50%) rotate(45deg) scale(0); transition: transform 0.55s var(--enh-ease) 0.15s, background 0.55s var(--enh-ease); pointer-events: none; z-index: 2; } @media (hover: hover) { .luxe-services-row:hover::after { transform: translateY(-50%) rotate(45deg) scale(1); background: var(--enh-champagne); } } /* ============================================================ P2.3 HERO — vertical column divider + decorative sigil ============================================================ */ .luxe-hero-grid { position: relative; } @media (min-width: 980px) { .luxe-hero-grid::before { content: ''; position: absolute; left: 50%; top: 8%; bottom: 8%; width: 1px; background: linear-gradient( to bottom, transparent 0%, rgba(201, 168, 118, 0.0) 5%, rgba(201, 168, 118, 0.45) 22%, rgba(201, 168, 118, 0.45) 78%, rgba(201, 168, 118, 0.0) 95%, transparent 100% ); transform: translateX(-50%); pointer-events: none; z-index: 0; } } /* Decorative sigil — a thin SVG-style mark, NO text. Pure CSS using radial + linear gradients = champagne medallion. */ .luxe-hero::before { z-index: 0 !important; } .luxe-hero-grid > div:first-child::after { content: ''; position: absolute; right: 18px; bottom: 14px; width: 76px; height: 76px; border: 1px solid var(--enh-champagne); border-radius: 50%; background: radial-gradient(circle at center, transparent 0%, transparent 30%, rgba(201, 168, 118, 0.4) 31%, rgba(201, 168, 118, 0.0) 35%, transparent 100%), conic-gradient(from 45deg at 50% 50%, transparent 0deg, transparent 88deg, rgba(201, 168, 118, 0.55) 90deg, rgba(201, 168, 118, 0.55) 92deg, transparent 94deg, transparent 178deg, rgba(201, 168, 118, 0.55) 180deg, rgba(201, 168, 118, 0.55) 182deg, transparent 184deg, transparent 268deg, rgba(201, 168, 118, 0.55) 270deg, rgba(201, 168, 118, 0.55) 272deg, transparent 274deg, transparent 358deg, rgba(201, 168, 118, 0.55) 360deg); opacity: 0.45; z-index: 0; pointer-events: none; animation: enhSigil 30s linear infinite; } @keyframes enhSigil { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (max-width: 980px) { .luxe-hero-grid > div:first-child::after { display: none; } } /* ============================================================ P2.4 FORM FIELDS — focus underline draw + tactile micro-int ============================================================ */ .luxe-field { position: relative; } .luxe-field input, .luxe-field select, .luxe-field textarea { position: relative; background: transparent !important; border: none !important; border-bottom: 1px solid rgba(10, 31, 46, 0.18) !important; border-radius: 0 !important; padding: 10px 0 12px !important; transition: border-color 0.4s var(--enh-ease); } .luxe-field::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1.5px; background: var(--enh-champagne); transition: width 0.55s var(--enh-ease); pointer-events: none; } .luxe-field:focus-within::after { width: 100%; } .luxe-field:focus-within input, .luxe-field:focus-within select, .luxe-field:focus-within textarea { outline: none !important; } .luxe-field label { transition: color 0.4s var(--enh-ease); } .luxe-field:focus-within label { color: var(--enh-champagne-dk) !important; } /* ============================================================ P2.5 PAGE-LOAD CURTAIN — champagne stripe sweeps once ============================================================ */ .enh-curtain { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden; } .enh-curtain::before { content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 1.5px; background: linear-gradient(to right, transparent 0%, var(--enh-champagne) 30%, var(--enh-champagne-dk) 50%, var(--enh-champagne) 70%, transparent 100%); animation: enhCurtain 1500ms cubic-bezier(0.7, 0, 0.2, 1) forwards; } @keyframes enhCurtain { 0% { top: -2px; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: 100vh; opacity: 0; } } /* ============================================================ P2.6 DIAGNOSIS TABS — active hairline draw ============================================================ */ .diagnosis-tabs { position: relative; border-bottom: 1px solid rgba(201, 168, 118, 0.18); } .diagnosis-tabs .tab-btn { position: relative; background: transparent !important; border: none !important; border-radius: 0 !important; padding: 14px 22px !important; color: var(--enh-ink-muted) !important; font-family: var(--mono, 'JetBrains Mono', monospace) !important; font-size: 11px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; transition: color 0.4s var(--enh-ease); } .diagnosis-tabs .tab-btn::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--enh-champagne); transform: scaleX(0); transform-origin: center; transition: transform 0.55s var(--enh-ease); } .diagnosis-tabs .tab-btn:hover { color: var(--enh-ink) !important; } .diagnosis-tabs .tab-btn.active { color: var(--enh-ink) !important; } .diagnosis-tabs .tab-btn.active::after { transform: scaleX(1); } /* ============================================================ P2.7 EYEBROW HAIRLINE — draws on view ============================================================ */ .luxe-section-head .row, .section-header { overflow: visible; } .luxe-section-head .hairline.long { transition: width 1s var(--enh-ease); width: 0 !important; } .luxe-section.enh-section-in .luxe-section-head .hairline.long, .luxe-section.luxe-hero .luxe-section-head .hairline.long { width: 96px !important; } /* hero eyebrow row hairline animates on load */ .luxe-hero .hairline.long { animation: enhEyebrowDraw 1.2s var(--enh-ease) 200ms forwards; } @keyframes enhEyebrowDraw { from { width: 0 !important; } to { width: 96px !important; } } /* ============================================================ P2.8 BUTTONS — champagne focus-visible ring ============================================================ */ .luxe-btn:focus-visible, .luxe-link:focus-visible, button.tab-btn:focus-visible, .luxe-sticky-cta a:focus-visible { outline: 1px solid var(--enh-champagne) !important; outline-offset: 4px !important; } /* ============================================================ P2.9 STICKY MOBILE CTA — refined polish ============================================================ */ .luxe-sticky-cta { border-top: 1px solid rgba(201, 168, 118, 0.5) !important; background: rgba(250, 250, 247, 0.96) !important; backdrop-filter: blur(8px) saturate(1.05); -webkit-backdrop-filter: blur(8px) saturate(1.05); } .luxe-sticky-cta a { position: relative; transition: color 0.4s var(--enh-ease), background 0.4s var(--enh-ease); } .luxe-sticky-cta a:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 22%; bottom: 22%; width: 1px; background: rgba(10, 31, 46, 0.12); } @media (hover: hover) { .luxe-sticky-cta a:hover { color: var(--enh-champagne-dk); background: rgba(201, 168, 118, 0.06); } } /* ============================================================ P2.10 MAP — hover grayscale → color ============================================================ */ .luxe-map-wrap img { filter: grayscale(0.85) contrast(0.95) brightness(0.98); transition: filter 0.8s var(--enh-ease), transform 0.8s var(--enh-ease); } @media (hover: hover) { .luxe-map-wrap:hover img { filter: grayscale(0) contrast(1.02) brightness(1); transform: scale(1.02); } } /* ============================================================ P2.11 BLOG CARD — layered hairline depth on visual side ============================================================ */ .luxe-blog-visual { position: relative; isolation: isolate; } .luxe-blog-visual::before { content: ''; position: absolute; inset: 12px -12px -12px 12px; border: 1px solid rgba(201, 168, 118, 0.22); z-index: -1; pointer-events: none; transition: inset 0.6s var(--enh-ease), border-color 0.6s var(--enh-ease); } .luxe-blog-card:hover .luxe-blog-visual::before { inset: 18px -18px -18px 18px; border-color: rgba(201, 168, 118, 0.45); } /* ============================================================ P2.12 LANDING — .specialties cards: corner marker + hover ============================================================ */ .specialty-card, .specialties-grid > *, .comparison-card { position: relative; isolation: isolate; transition: transform 0.5s var(--enh-ease), box-shadow 0.5s var(--enh-ease); } .specialty-card::before, .specialties-grid > *::before, .comparison-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(to right, var(--enh-champagne) 0 14px, transparent 0) top left / 100% 1.2px no-repeat, linear-gradient(to bottom, var(--enh-champagne) 0 14px, transparent 0) top left / 1.2px 100% no-repeat, linear-gradient(to left, var(--enh-champagne) 0 14px, transparent 0) top right / 100% 1.2px no-repeat, linear-gradient(to bottom, var(--enh-champagne) 0 14px, transparent 0) top right / 1.2px 100% no-repeat, linear-gradient(to right, var(--enh-champagne) 0 14px, transparent 0) bottom left / 100% 1.2px no-repeat, linear-gradient(to top, var(--enh-champagne) 0 14px, transparent 0) bottom left / 1.2px 100% no-repeat, linear-gradient(to left, var(--enh-champagne) 0 14px, transparent 0) bottom right / 100% 1.2px no-repeat, linear-gradient(to top, var(--enh-champagne) 0 14px, transparent 0) bottom right / 1.2px 100% no-repeat; opacity: 0.65; transition: opacity 0.5s var(--enh-ease), background-size 0.5s var(--enh-ease); } @media (hover: hover) { .specialty-card:hover, .specialties-grid > *:hover, .comparison-card:hover { transform: translateY(-4px); } .specialty-card:hover::before, .specialties-grid > *:hover::before, .comparison-card:hover::before { opacity: 1; } } /* ============================================================ P2.13 LANDING — FAQ refined +/- toggle (parity with main) ============================================================ */ .faq-item, .faq-question { position: relative; } .faq-question::after, .faq-item .faq-toggle, .faq-item > .toggle { /* Allow existing arrow indicator. We just ensure consistent transition for any toggle element. */ transition: transform 0.45s var(--enh-ease), color 0.45s var(--enh-ease); } .faq-item.open .faq-question::after, .faq-item.active .faq-question::after { color: var(--enh-champagne) !important; } /* ============================================================ P2.14 REVIEW CARDS — small hairline trim ============================================================ */ .luxe-review-card { border-left: 1px solid transparent; transition: border-color 0.5s var(--enh-ease), transform 0.5s var(--enh-ease), box-shadow 0.5s var(--enh-ease); } @media (hover: hover) { .luxe-review-card:hover { border-left-color: var(--enh-champagne); transform: translateY(-3px); } } /* ============================================================ P2.15 SECTION HEADER — small Hermès-style ornament under h2 ------------------------------------------------------------ A single diamond above the existing hairline. No text. ============================================================ */ .luxe-section-head h2, .section-header h2 { position: relative; } /* diamond ornament centered under h2 — only on centered heads */ .luxe-section-head[style*="center"] h2::before { content: ''; display: block; width: 6px; height: 6px; margin: 28px auto 0; background: var(--enh-paper); border: 1px solid var(--enh-champagne); transform: rotate(45deg) scale(0); transition: transform 0.7s var(--enh-ease) 0.4s; } .luxe-section.enh-section-in .luxe-section-head[style*="center"] h2::before { transform: rotate(45deg) scale(1); } /* ============================================================ P2.16 PROCESS STEP — number circle treatment ------------------------------------------------------------ Round the STEP 0X numeral wrap with a hairline ring. ============================================================ */ .luxe-process-step { position: relative; padding-top: 60px !important; } .luxe-process-step .index-num { position: relative; display: inline-block; padding: 10px 14px; border: 1px solid rgba(201, 168, 118, 0.45); background: var(--enh-paper); transition: background 0.5s var(--enh-ease), color 0.5s var(--enh-ease), border-color 0.5s var(--enh-ease); } @media (hover: hover) { .luxe-process-step:hover .index-num { background: var(--enh-champagne); color: var(--enh-ink) !important; border-color: var(--enh-champagne); } } /* ============================================================ P2.17 HERO BUTTONS — refined hairline gap on focus/active ============================================================ */ .luxe-btn, .luxe-link { position: relative; } .luxe-btn::before { content: ''; position: absolute; inset: -4px; border: 1px solid transparent; pointer-events: none; transition: inset 0.5s var(--enh-ease), border-color 0.5s var(--enh-ease); } /* ============================================================ ============================================================ PATCH 3 · 26.05.16 — monograph ornaments + magnetic CTA ============================================================ ============================================================ */ /* ============================================================ P3.1 DROP CAP — quote body, Cormorant italic ============================================================ */ .luxe-quote-body::first-letter { font-family: var(--serif, 'Cormorant Garamond', serif); font-weight: 300; font-style: italic; color: var(--enh-champagne-dk); font-size: 2.1em; line-height: 0.85; float: left; margin: 0.08em 0.12em 0 0; padding-right: 6px; } /* ============================================================ P3.2 MAGNETIC CTA — visual support ------------------------------------------------------------ JS adds transform; we ensure transition is right and add subtle scale pulse on click. ============================================================ */ .luxe-btn, .luxe-link.gold, .luxe-sticky-cta a { transition: transform 0.35s var(--enh-ease), color 0.5s var(--enh-ease), background 0.5s var(--enh-ease), border-color 0.5s var(--enh-ease); } .luxe-btn:active { transform: scale(0.97) !important; } /* ============================================================ P3.3 CHAMPAGNE CURSOR FOLLOWER (desktop only) ============================================================ */ .enh-cursor { position: fixed; top: 0; left: 0; width: 24px; height: 24px; border: 1px solid var(--enh-champagne); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%) scale(1); transition: transform 0.25s var(--enh-ease), width 0.3s var(--enh-ease), height 0.3s var(--enh-ease), background 0.3s var(--enh-ease), opacity 0.3s var(--enh-ease); mix-blend-mode: difference; opacity: 0; } .enh-cursor.enh-ready { opacity: 0.6; } .enh-cursor.enh-hover { width: 48px; height: 48px; background: rgba(201, 168, 118, 0.12); opacity: 0.9; } .enh-cursor.enh-down { transform: translate(-50%, -50%) scale(0.85); } @media (hover: none), (max-width: 1100px) { .enh-cursor { display: none !important; } } /* ============================================================ P3.4 SECTION TRANSITION ORNAMENT ------------------------------------------------------------ Between paper and bone sections — a centered hairline + diamond ornament sits at the seam. ============================================================ */ .luxe-section.bg-paper + .luxe-section.bg-bone, .luxe-section.bg-bone + .luxe-section.bg-paper { position: relative; } .luxe-section.bg-paper + .luxe-section.bg-bone::before, .luxe-section.bg-bone + .luxe-section.bg-paper::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 220px; height: 1px; background: linear-gradient(to right, transparent 0%, rgba(201, 168, 118, 0) 5%, var(--enh-champagne) 50%, rgba(201, 168, 118, 0) 95%, transparent 100%); z-index: 10; pointer-events: none; } .luxe-section.bg-paper + .luxe-section.bg-bone::after, .luxe-section.bg-bone + .luxe-section.bg-paper::after { content: ''; position: absolute; top: -3.5px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 6px; height: 6px; background: var(--enh-paper); border: 1px solid var(--enh-champagne); z-index: 11; pointer-events: none; } /* ============================================================ P3.5 ABOUT 韓 MARK — breathing ring ============================================================ */ .luxe-quote-mark { position: relative; } .luxe-quote-mark::before { content: ''; position: absolute; inset: -10px; border: 1px solid rgba(201, 168, 118, 0.25); border-radius: 50%; animation: enhBreathe 8s var(--enh-ease) infinite; pointer-events: none; } @keyframes enhBreathe { 0%, 100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.08); opacity: 0.9; } } /* ============================================================ P3.6 FOOTER K MONOGRAM — concentric ring ============================================================ */ .luxe-footer svg[width="48"] { position: relative; z-index: 1; } .luxe-footer-grid > div:first-child > svg { box-shadow: 0 0 0 1px rgba(201, 168, 118, 0.0), 0 0 0 8px rgba(201, 168, 118, 0.12); border-radius: 0; transition: box-shadow 0.6s var(--enh-ease); } .luxe-footer-grid > div:first-child:hover > svg { box-shadow: 0 0 0 1px rgba(201, 168, 118, 0.4), 0 0 0 14px rgba(201, 168, 118, 0.08); } /* ============================================================ P3.7 MOBILE BURGER → X refined ============================================================ */ .luxe-burger span { display: block; width: 22px; height: 1px; background: var(--enh-ink); transition: transform 0.45s var(--enh-ease), opacity 0.35s var(--enh-ease), width 0.45s var(--enh-ease); transform-origin: center; } .luxe-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); width: 26px; } .luxe-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .luxe-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); width: 26px; } /* ============================================================ P3.8 HERO SCROLL CUE — bottom-center 1px line with pulse ============================================================ */ .luxe-hero::after { /* Don't conflict with existing ::after that holds vertical chinese text. Use a JS-injected element instead. */ } .enh-scroll-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); width: 1px; height: 56px; background: linear-gradient(to bottom, rgba(201, 168, 118, 0.0) 0%, var(--enh-champagne) 30%, var(--enh-champagne) 70%, rgba(201, 168, 118, 0.0) 100%); pointer-events: none; z-index: 2; overflow: hidden; } .enh-scroll-cue::after { content: ''; position: absolute; top: -40%; left: 0; right: 0; height: 20px; background: linear-gradient(to bottom, transparent 0%, var(--enh-champagne-dk) 50%, transparent 100%); animation: enhScrollCue 2.4s var(--enh-ease) infinite; } @keyframes enhScrollCue { 0% { top: -40%; opacity: 0; } 25% { opacity: 1; } 100% { top: 110%; opacity: 0; } } /* ============================================================ P3.9 STORY MODAL — atelier frame on figure ============================================================ */ .luxe-story-figure { position: relative; isolation: isolate; } .luxe-story-figure::before { content: ''; position: absolute; inset: -10px; border: 1px solid rgba(201, 168, 118, 0.45); pointer-events: none; z-index: 1; } .luxe-story-figure::after { content: ''; position: absolute; inset: -10px; pointer-events: none; z-index: 2; background: linear-gradient(to right, var(--enh-champagne) 0 20px, transparent 0) top left / 100% 1.5px no-repeat, linear-gradient(to bottom, var(--enh-champagne) 0 20px, transparent 0) top left / 1.5px 100% no-repeat, linear-gradient(to left, var(--enh-champagne) 0 20px, transparent 0) top right / 100% 1.5px no-repeat, linear-gradient(to bottom, var(--enh-champagne) 0 20px, transparent 0) top right / 1.5px 100% no-repeat, linear-gradient(to right, var(--enh-champagne) 0 20px, transparent 0) bottom left / 100% 1.5px no-repeat, linear-gradient(to top, var(--enh-champagne) 0 20px, transparent 0) bottom left / 1.5px 100% no-repeat, linear-gradient(to left, var(--enh-champagne) 0 20px, transparent 0) bottom right / 100% 1.5px no-repeat, linear-gradient(to top, var(--enh-champagne) 0 20px, transparent 0) bottom right / 1.5px 100% no-repeat; } /* ============================================================ P3.10 DIAGNOSIS CONTENT — champagne hairline container ============================================================ */ .diagnosis-content, #diagnosis-screen { position: relative; padding: clamp(28px, 4vw, 56px); margin-top: 36px; background: rgba(250, 250, 247, 0.4); border: 1px solid rgba(201, 168, 118, 0.18); transition: border-color 0.5s var(--enh-ease); } .diagnosis-content:hover, #diagnosis-screen:hover { border-color: rgba(201, 168, 118, 0.35); } /* ============================================================ P3.11 STATS NUM — finishing pulse after count-up ============================================================ */ .luxe-stats-cell.enh-counted .luxe-stats-num { animation: enhNumPulse 1.6s var(--enh-ease) 1.2s 1; } @keyframes enhNumPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } } /* ============================================================ P3.12 FOOTER RAIL — champagne dot · dash · dot ornament ============================================================ */ .luxe-footer-rail { position: relative; padding-top: 36px !important; } .luxe-footer-rail::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 220px; height: 1px; background: radial-gradient(circle, var(--enh-champagne) 0 1.5px, transparent 1.6px) 0 center / 8px 100% no-repeat, linear-gradient(to right, transparent 0, var(--enh-champagne) 50%, transparent 100%) center center / 100% 1px no-repeat, radial-gradient(circle, var(--enh-champagne) 0 1.5px, transparent 1.6px) 100% center / 8px 100% no-repeat; opacity: 0.6; } /* ============================================================ P3.13 SECTION H2 — line-clip slide reveal on view ============================================================ */ .luxe-section-head h2, .section-header h2 { overflow: hidden; } .luxe-section-head h2 > * , .section-header h2 > * { display: inline-block; transform: translateY(105%); opacity: 0; transition: transform 1s var(--enh-ease), opacity 1s var(--enh-ease); } .luxe-section.enh-section-in .luxe-section-head h2 > *, .section.enh-section-in .section-header h2 > * { transform: translateY(0); opacity: 1; } /* Fallback: full h2 visible if no inner spans (because we can't auto-wrap) */ /* ============================================================ P3.14 INTERIOR — light parallax (transform-based) ============================================================ */ .luxe-gallery-grid { position: relative; } .luxe-gallery-card:nth-child(2), .luxe-gallery-card:nth-child(4) { transform: translateY(28px); } @media (max-width: 900px) { .luxe-gallery-card:nth-child(2), .luxe-gallery-card:nth-child(4) { transform: none; } } /* ============================================================ P3.15 MARQUEE italic — slight extra spacing ============================================================ */ .luxe-marquee-track .t em { letter-spacing: 0.02em; } .luxe-marquee-track .dot { color: var(--enh-champagne) !important; opacity: 0.45; } /* ============================================================ P3.16 HERO RIGHT SIGIL — symmetric with left ============================================================ */ @media (min-width: 980px) { .luxe-hero-figure { position: relative; } .luxe-hero-figure::before { content: ''; position: absolute; right: -36px; top: 24px; width: 56px; height: 56px; border: 1px solid var(--enh-champagne); border-radius: 50%; background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, transparent 88deg, rgba(201, 168, 118, 0.6) 90deg, rgba(201, 168, 118, 0.6) 92deg, transparent 94deg, transparent 178deg, rgba(201, 168, 118, 0.6) 180deg, rgba(201, 168, 118, 0.6) 182deg, transparent 184deg, transparent 268deg, rgba(201, 168, 118, 0.6) 270deg, rgba(201, 168, 118, 0.6) 272deg, transparent 274deg, transparent 358deg, rgba(201, 168, 118, 0.6) 360deg); opacity: 0.45; z-index: 5; pointer-events: none; animation: enhSigil 30s linear infinite reverse; } } /* ============================================================ P3.17 MOBILE MENU — link stagger fade-in ============================================================ */ .luxe-mobile-menu ul li { opacity: 0; transform: translateX(20px); transition: opacity 0.55s var(--enh-ease), transform 0.55s var(--enh-ease); } .luxe-mobile-menu.open ul li { opacity: 1; transform: translateX(0); } .luxe-mobile-menu.open ul li:nth-child(1) { transition-delay: 100ms; } .luxe-mobile-menu.open ul li:nth-child(2) { transition-delay: 150ms; } .luxe-mobile-menu.open ul li:nth-child(3) { transition-delay: 200ms; } .luxe-mobile-menu.open ul li:nth-child(4) { transition-delay: 250ms; } .luxe-mobile-menu.open ul li:nth-child(5) { transition-delay: 300ms; } .luxe-mobile-menu.open ul li:nth-child(6) { transition-delay: 350ms; } .luxe-mobile-menu.open ul li:nth-child(7) { transition-delay: 400ms; } .luxe-mobile-menu.open ul li:nth-child(8) { transition-delay: 450ms; } .luxe-mobile-menu.open ul li:nth-child(9) { transition-delay: 500ms; } .luxe-mobile-menu.open ul li:nth-child(10) { transition-delay: 550ms; } .luxe-mobile-menu.open ul li:nth-child(11) { transition-delay: 600ms; } /* ============================================================ P3.18 NAV — active link indicator dot ============================================================ */ .luxe-nav-links a.enh-current-section::after { right: 0 !important; } .luxe-nav-links a.enh-current-section { color: var(--enh-champagne-dk) !important; } /* ============================================================ P3.19 GLOBAL — text selection champagne refinement ============================================================ */ ::selection { background: rgba(201, 168, 118, 0.35); color: var(--enh-ink); text-shadow: none; } /* ============================================================ ============================================================ PATCH 4 · 26.05.16 — refinement & micro-polish round ============================================================ ============================================================ */ /* ============================================================ P4.1 RETURN-TO-TOP BUTTON (champagne ring + chevron) ============================================================ */ .enh-totop { position: fixed; right: clamp(16px, 2.4vw, 36px); bottom: clamp(72px, 8vw, 96px); width: 48px; height: 48px; border: 1px solid var(--enh-champagne); background: rgba(250, 250, 247, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 50%; cursor: pointer; z-index: 90; opacity: 0; pointer-events: none; transform: translateY(10px) scale(0.9); transition: opacity 0.5s var(--enh-ease), transform 0.5s var(--enh-ease), background 0.4s var(--enh-ease), border-color 0.4s var(--enh-ease); } .enh-totop.enh-visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .enh-totop svg { width: 14px; height: 14px; display: block; margin: auto; color: var(--enh-champagne-dk); transition: color 0.4s var(--enh-ease), transform 0.4s var(--enh-ease); } @media (hover: hover) { .enh-totop:hover { background: var(--enh-champagne); border-color: var(--enh-champagne); } .enh-totop:hover svg { color: var(--enh-ink); transform: translateY(-2px); } } /* ============================================================ P4.2 CARD 3D TILT — base CSS (JS handles transform) ============================================================ */ .luxe-ba-card, .luxe-event-card, .luxe-why-card, .luxe-gallery-card, .specialty-card, .ba-card, .event-card { transform-style: preserve-3d; } .luxe-ba-card .img-wrap, .luxe-event-card .img-wrap, .luxe-why-card > *, .luxe-gallery-card > * { transform: translateZ(0); will-change: transform; } /* Hover transform from JS is set inline. Restore on leave. */ /* ============================================================ P4.3 CUSTOM SELECT ARROW — champagne chevron ============================================================ */ select, .luxe-field select { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: linear-gradient(45deg, transparent 50%, var(--enh-champagne-dk) 50%), linear-gradient(-45deg, transparent 50%, var(--enh-champagne-dk) 50%) !important; background-position: calc(100% - 16px) center, calc(100% - 10px) center !important; background-size: 6px 6px, 6px 6px !important; background-repeat: no-repeat !important; padding-right: 40px !important; cursor: pointer; } select:focus { background-image: linear-gradient(45deg, transparent 50%, var(--enh-champagne) 50%), linear-gradient(-45deg, transparent 50%, var(--enh-champagne) 50%) !important; } /* ============================================================ P4.4 IMAGE FADE-IN ON LOAD ============================================================ */ img:not(.enh-img-loaded) { /* Initial state — set by JS once decoded */ } .enh-img-pending { opacity: 0; } .enh-img-loaded { opacity: 1; transition: opacity 0.7s var(--enh-ease); } /* ============================================================ P4.5 INQUIRY SUBMIT — refined emphasis ============================================================ */ #inquirySubmit, .luxe-btn.gold { box-shadow: inset 0 0 0 1px var(--enh-champagne), 0 0 0 0 rgba(201, 168, 118, 0.0); transition: transform 0.45s var(--enh-ease), color 0.5s var(--enh-ease), background 0.5s var(--enh-ease), border-color 0.5s var(--enh-ease), box-shadow 0.55s var(--enh-ease); } @media (hover: hover) { #inquirySubmit:hover, .luxe-btn.gold:hover { box-shadow: inset 0 0 0 1px var(--enh-ink), 0 0 0 6px rgba(201, 168, 118, 0.18); } } /* ============================================================ P4.6 FOOTER SOCIAL LINKS — champagne underline + arrow ============================================================ */ .luxe-footer-social a { position: relative; padding-right: 18px; transition: color 0.4s var(--enh-ease), padding-right 0.4s var(--enh-ease); } .luxe-footer-social a::before { content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: var(--enh-champagne); transition: width 0.5s var(--enh-ease); } .luxe-footer-social a::after { content: '→'; position: absolute; right: 0; opacity: 0; transition: opacity 0.4s var(--enh-ease), transform 0.4s var(--enh-ease); transform: translateX(-4px); color: var(--enh-champagne); } @media (hover: hover) { .luxe-footer-social a:hover { color: var(--enh-champagne); padding-right: 22px; } .luxe-footer-social a:hover::before { width: calc(100% - 18px); } .luxe-footer-social a:hover::after { opacity: 1; transform: translateX(0); } } /* ============================================================ P4.7 SERVICE ICONS — stroke draw on hover ------------------------------------------------------------ SVG stroke-dasharray pre-set; on hover, dashoffset → 0. ============================================================ */ .luxe-services-icon svg path, .luxe-services-icon svg circle, .luxe-services-icon svg rect { stroke-dasharray: 120; stroke-dashoffset: 0; transition: stroke-dashoffset 0.9s var(--enh-ease), stroke 0.5s var(--enh-ease); } @media (hover: hover) { .luxe-services-row:hover .luxe-services-icon svg path, .luxe-services-row:hover .luxe-services-icon svg circle, .luxe-services-row:hover .luxe-services-icon svg rect { stroke-dashoffset: 120; animation: enhStrokeDraw 1.2s var(--enh-ease) forwards; } } @keyframes enhStrokeDraw { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } } /* ============================================================ P4.8 MARQUEE — pause on hover ============================================================ */ .luxe-marquee { cursor: default; } .luxe-marquee-track { animation-play-state: running; transition: opacity 0.5s var(--enh-ease); } @media (hover: hover) { .luxe-marquee:hover .luxe-marquee-track { animation-play-state: paused; } .luxe-marquee:hover { background: rgba(201, 168, 118, 0.04); } } /* ============================================================ P4.9 GLOBAL SMOOTH-SCROLL + STATS scroll-snap ============================================================ */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ============================================================ P4.10 HERO H1 — clip-path mask reveal on page load ============================================================ */ .luxe-hero-display { clip-path: inset(0 100% 0 0); animation: enhH1Reveal 1.4s cubic-bezier(0.7, 0, 0.2, 1) 400ms forwards; } @keyframes enhH1Reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @media (prefers-reduced-motion: reduce) { .luxe-hero-display { animation: none; clip-path: none; } } /* ============================================================ P4.11 BG-BONE WATERMARK — faint hairline grid 60×60 ============================================================ */ .luxe-section.bg-bone { background-image: /* vertical & horizontal hairlines (very faint) */ linear-gradient(to right, rgba(201,168,118,0.025) 0 1px, transparent 1px 100%), linear-gradient(to bottom, rgba(201,168,118,0.025) 0 1px, transparent 1px 100%), /* original grain SVG layered on top */ url("data:image/svg+xml;utf8,") !important; background-size: 60px 60px, 60px 60px, 180px 180px !important; background-repeat: repeat, repeat, repeat !important; } /* ============================================================ P4.12 QUOTE ATTRIBUTION — left marker on attr line ============================================================ */ .luxe-quote-attr { position: relative; padding-left: 0; } .luxe-quote-attr .hairline.short.gold { width: 0 !important; background: var(--enh-champagne) !important; height: 1px !important; display: inline-block; vertical-align: middle; transition: width 1s var(--enh-ease) 0.4s; } .luxe-section.enh-section-in .luxe-quote-attr .hairline.short.gold { width: 32px !important; } /* ============================================================ P4.13 CONTACT HOURS — tabular alignment ============================================================ */ .luxe-info-row .v { font-variant-numeric: tabular-nums; } /* ============================================================ P4.14 H2 SLIDE-REVEAL — safety net ------------------------------------------------------------ If IO somehow misses, force-reveal h2 inner spans after 2s. ============================================================ */ .luxe-section-head h2 > *, .section-header h2 > * { animation: enhH2Safety 0s linear 2s forwards; } @keyframes enhH2Safety { to { transform: translateY(0); opacity: 1; } } /* ============================================================ P4.15 SELECT FOCUS — champagne underline already provided ============================================================ */ /* ============================================================ P4.16 NAV TEL — refined hover ============================================================ */ .luxe-nav-tel { transition: all 0.4s var(--enh-ease); position: relative; } .luxe-nav-tel::before { content: ''; position: absolute; left: 8px; top: 50%; transform: translateY(-50%) scale(0); width: 5px; height: 5px; border-radius: 50%; background: var(--enh-champagne-dk); transition: transform 0.4s var(--enh-ease); transform-origin: center; } .luxe-nav-tel { padding-left: 22px !important; } .luxe-nav-tel::before { transform: translateY(-50%) scale(1); } /* ============================================================ P4.17 BLOG · 韓 visual tag ============================================================ */ .luxe-blog-visual .frame { transition: all 0.6s var(--enh-ease); } .luxe-blog-card:hover .luxe-blog-visual .frame { transform: rotate(2deg) scale(1.02); } /* ============================================================ P4.18 SCROLL-SNAP ON STATS (subtle, optional) ============================================================ */ /* skipped — too aggressive on horizontal grid */ /* ============================================================ ============================================================ PATCH 5 · 26.05.16 — INTERIOR POLISH + A11Y + PRINT ============================================================ ============================================================ */ /* ============================================================ P5.1 STORY MODAL — backdrop, text hierarchy, CTA hover ============================================================ */ .luxe-story-modal { background: rgba(10, 31, 46, 0.78); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); } .luxe-story-card { background: var(--enh-paper); border: 1px solid var(--enh-champagne); box-shadow: 0 50px 120px -20px rgba(10, 31, 46, 0.4); } .luxe-story-tag { display: inline-block; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; letter-spacing: 0.32em; color: var(--enh-champagne-dk); text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--enh-champagne); margin-bottom: 18px; } .luxe-story-title { font-family: var(--serif, 'Cormorant Garamond', serif); font-weight: 300; color: var(--enh-ink); margin-bottom: 18px; } .luxe-story-profile { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; letter-spacing: 0.18em; color: var(--enh-ink-muted); text-transform: uppercase; padding-bottom: 24px; border-bottom: 1px solid rgba(201, 168, 118, 0.3); margin-bottom: 28px; } .luxe-story-desc { color: var(--enh-ink-soft); font-size: 14.5px; line-height: 1.85; margin-bottom: 28px; white-space: pre-wrap; } .luxe-story-result { position: relative; background: rgba(201, 168, 118, 0.06); border-left: 2px solid var(--enh-champagne); padding: 20px 24px; margin-bottom: 28px; font-family: var(--serif, 'Cormorant Garamond', serif); font-size: 16px; font-style: italic; color: var(--enh-ink); line-height: 1.6; } .luxe-story-disclaimer { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; letter-spacing: 0.06em; line-height: 1.7; color: var(--enh-ink-muted); padding: 14px 0; border-top: 1px solid rgba(10, 31, 46, 0.08); border-bottom: 1px solid rgba(10, 31, 46, 0.08); margin-bottom: 24px; } .luxe-story-cta { display: flex; gap: 14px; flex-wrap: wrap; } .luxe-story-cta a { flex: 1; text-align: center; padding: 14px 22px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; border: 1px solid var(--enh-ink); background: var(--enh-ink); color: var(--enh-paper); transition: all 0.45s var(--enh-ease); min-width: 180px; } .luxe-story-cta a.outline { background: transparent; color: var(--enh-ink); } @media (hover: hover) { .luxe-story-cta a:hover { background: var(--enh-champagne); color: var(--enh-ink); border-color: var(--enh-champagne); } } .luxe-story-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: 1px solid rgba(10, 31, 46, 0.2); background: transparent; cursor: pointer; transition: border-color 0.4s var(--enh-ease), background 0.4s var(--enh-ease); } .luxe-story-close::before, .luxe-story-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 1px; background: var(--enh-ink); transition: background 0.4s var(--enh-ease); } .luxe-story-close::before { transform: translate(-50%, -50%) rotate(45deg); } .luxe-story-close::after { transform: translate(-50%, -50%) rotate(-45deg); } @media (hover: hover) { .luxe-story-close:hover { background: var(--enh-champagne); border-color: var(--enh-champagne); } } /* ============================================================ P5.2 DIET PREDICTION RESULT CARDS ============================================================ */ .luxe-predict-card { position: relative; padding: 28px 24px; border: 1px solid rgba(201, 168, 118, 0.3); transition: border-color 0.5s var(--enh-ease), transform 0.5s var(--enh-ease), background 0.5s var(--enh-ease); } .luxe-predict-card:first-child { background: rgba(10, 31, 46, 0.02); } .luxe-predict-card:nth-child(2) { background: rgba(201, 168, 118, 0.05); } .luxe-predict-card .eyebrow { margin-bottom: 12px; font-size: 10px; } .luxe-predict-card .num { font-family: var(--serif, 'Cormorant Garamond', serif); font-size: clamp(36px, 4vw, 56px); font-weight: 300; line-height: 1; color: var(--enh-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin-bottom: 16px; } .luxe-predict-card:nth-child(2) .num { color: var(--enh-champagne-dk); } .luxe-predict-card .sub { font-size: 12.5px; color: var(--enh-ink-muted); } .luxe-predict-card .sub strong { color: var(--enh-ink); font-family: var(--serif, 'Cormorant Garamond', serif); font-weight: 400; font-size: 16px; font-variant-numeric: tabular-nums; } @media (hover: hover) { .luxe-predict-card:hover { border-color: var(--enh-champagne); transform: translateY(-3px); } } /* Predict chart container */ .luxe-predict-chart { position: relative; padding: 24px; border: 1px solid rgba(201, 168, 118, 0.2); background: rgba(250, 250, 247, 0.5); margin-bottom: 32px; } .luxe-predict-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; } @media (max-width: 700px) { .luxe-predict-summary { grid-template-columns: 1fr; } } .luxe-predict-disclaimer { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; letter-spacing: 0.06em; line-height: 1.7; color: var(--enh-ink-muted); padding-top: 18px; border-top: 1px solid rgba(10, 31, 46, 0.08); } /* Predict form polish */ .luxe-predict-form { background: var(--enh-paper); border: 1px solid rgba(201, 168, 118, 0.2); padding: clamp(28px, 4vw, 48px); margin-bottom: 40px; } .luxe-predict-gender { display: flex; align-items: center; gap: 24px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid rgba(10, 31, 46, 0.06); } .luxe-predict-gender .label { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--enh-ink-muted); } .luxe-predict-gender .opt { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--serif, 'Cormorant Garamond', serif); font-size: 16px; color: var(--enh-ink); transition: color 0.4s var(--enh-ease); } .luxe-predict-gender input[type="radio"] { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border: 1px solid rgba(10, 31, 46, 0.3); border-radius: 50%; position: relative; cursor: pointer; transition: border-color 0.4s var(--enh-ease); } .luxe-predict-gender input[type="radio"]:checked { border-color: var(--enh-champagne); } .luxe-predict-gender input[type="radio"]:checked::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--enh-champagne); } .luxe-predict-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-bottom: 32px; } @media (max-width: 700px) { .luxe-predict-row { grid-template-columns: 1fr; } } #calculateDietBtn { display: block; margin: 0 auto; padding: 16px 36px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; border: 1px solid var(--enh-ink); background: var(--enh-ink); color: var(--enh-paper); cursor: pointer; transition: all 0.45s var(--enh-ease); } @media (hover: hover) { #calculateDietBtn:hover { background: var(--enh-champagne); border-color: var(--enh-champagne); color: var(--enh-ink); } } /* ============================================================ P5.3 DIAGNOSIS QUIZ INTERIOR (.diag-*) ============================================================ */ .diag-question { font-family: var(--serif, 'Cormorant Garamond', serif) !important; font-size: clamp(20px, 2.2vw, 28px) !important; font-weight: 300 !important; color: var(--enh-ink) !important; line-height: 1.4 !important; margin-bottom: 32px !important; text-align: center; } .diag-options { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px !important; max-width: 560px; margin: 0 auto !important; } @media (max-width: 600px) { .diag-options { grid-template-columns: 1fr; } } .diag-option, .diag-options button { padding: 16px 22px !important; background: var(--enh-paper) !important; border: 1px solid rgba(10, 31, 46, 0.15) !important; color: var(--enh-ink) !important; font-family: var(--sans, 'Pretendard', sans-serif) !important; font-size: 14px !important; cursor: pointer; transition: all 0.45s var(--enh-ease) !important; text-align: left; border-radius: 0 !important; } @media (hover: hover) { .diag-option:hover, .diag-options button:hover { border-color: var(--enh-champagne) !important; background: rgba(201, 168, 118, 0.04) !important; transform: translateX(4px); } } .diag-result, .diagnosis-result { padding: 36px 32px !important; background: var(--enh-paper) !important; border: 1px solid var(--enh-champagne) !important; text-align: center; } .diag-progress { height: 1px !important; background: rgba(10, 31, 46, 0.08) !important; margin-bottom: 32px; overflow: visible; } .diag-progress > * { height: 100% !important; background: var(--enh-champagne) !important; border-radius: 0 !important; transition: width 0.55s var(--enh-ease) !important; } /* ============================================================ P5.4 INQUIRY FORM LAYOUT POLISH ============================================================ */ .luxe-form-card { padding: clamp(40px, 5vw, 72px) !important; } .luxe-form-head { display: flex; align-items: center; gap: 14px; margin-bottom: 32px !important; } .luxe-form-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-top: 32px; border-top: 1px solid rgba(10, 31, 46, 0.08); margin-top: 32px; } .luxe-form-no { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; letter-spacing: 0.14em; color: var(--enh-ink-muted); text-transform: uppercase; } /* ============================================================ P5.5 MOBILE TYPOGRAPHY TIGHTENING (< 980px) ============================================================ */ @media (max-width: 980px) { .luxe-hero { padding: clamp(96px, 14vh, 140px) clamp(20px, 4vw, 36px) clamp(64px, 8vh, 96px); min-height: auto; } .luxe-hero-display { font-size: clamp(44px, 11vw, 72px) !important; } .luxe-hero-grid { gap: clamp(40px, 6vw, 64px); } .luxe-section-head h2, .section-header h2 { font-size: clamp(28px, 6.4vw, 44px) !important; } .luxe-section { padding: clamp(72px, 11vw, 110px) clamp(20px, 4vw, 36px) !important; } .luxe-quote-body { font-size: clamp(22px, 5vw, 32px) !important; } } @media (max-width: 600px) { .luxe-hero-display { letter-spacing: -0.02em; } .luxe-hero-body { font-size: 14.5px !important; line-height: 1.78; } .luxe-section-head p, .section-header p { font-size: 14px !important; } .luxe-hero-cta-row { flex-direction: column; align-items: stretch; gap: 14px; } .luxe-hero-cta-row .luxe-btn { width: 100%; text-align: center; justify-content: center; } } /* ============================================================ P5.6 SKIP-LINK refinement ============================================================ */ .skip-link { position: absolute; top: -200px; left: 50%; transform: translateX(-50%); background: var(--enh-ink); color: var(--enh-paper); padding: 14px 28px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; z-index: 100001; border: 1px solid var(--enh-champagne); transition: top 0.45s var(--enh-ease); } .skip-link:focus { top: 16px; outline: none; } /* ============================================================ P5.7 REVIEW NO-RESULT STATE ============================================================ */ .luxe-review-noresult { grid-column: 1 / -1; width: 100%; text-align: center; padding: 60px 40px; font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-size: 18px; color: var(--enh-ink-muted); border: 1px dashed rgba(201, 168, 118, 0.4); background: rgba(250, 250, 247, 0.5); position: relative; } .luxe-review-noresult::before { content: ''; display: block; width: 6px; height: 6px; border: 1px solid var(--enh-champagne); background: var(--enh-paper); transform: rotate(45deg); margin: 0 auto 18px; } /* ============================================================ P5.8 FORM SUCCESS / ERROR STATE COLOR ============================================================ */ #inquiryStatus { transition: color 0.4s var(--enh-ease); } /* ============================================================ P5.9 TONE DOWN — overlapping previous patches ============================================================ */ /* Cursor follower: slightly less assertive */ .enh-cursor { mix-blend-mode: normal; } .enh-cursor.enh-ready { opacity: 0.42; } .enh-cursor.enh-hover { opacity: 0.7; } /* Card tilt: capped already at 3deg, OK */ /* ============================================================ P5.10 PRINT STYLESHEET — clinic info legible ============================================================ */ @media print { *, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; animation: none !important; transition: none !important; } .luxe-nav, .luxe-mobile-menu, .luxe-burger, .luxe-sticky-cta, .luxe-marquee, .luxe-story-modal, .enh-progress, .enh-scroll-progress, .enh-cursor, .enh-curtain, .enh-totop, .enh-scroll-cue, #inquiry, .luxe-blog-card, .luxe-events-track { display: none !important; } .luxe-section { padding: 24px 16px !important; page-break-inside: avoid; } .luxe-hero-display { font-size: 32px !important; clip-path: none !important; animation: none !important; } .luxe-section-head h2 > *, .section-header h2 > * { transform: none !important; opacity: 1 !important; } a::after { content: " (" attr(href) ")"; font-size: 9px; color: #555 !important; } .luxe-contact-grid, .luxe-info-row, .luxe-footer-grid { page-break-inside: avoid; } img { max-width: 100% !important; page-break-inside: avoid; } /* Force show all faded content for print */ .luxe-fade { opacity: 1 !important; transform: none !important; } } /* ============================================================ P5.11 REVIEW TRACK — pause hover (carousel) ============================================================ */ @media (hover: hover) { .luxe-review-track:hover { animation-play-state: paused; } } /* ============================================================ P5.12 STORY MODAL GRID ============================================================ */ .luxe-story-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 4vw, 56px); } @media (max-width: 800px) { .luxe-story-grid { grid-template-columns: 1fr; gap: 32px; } } .luxe-story-figure { margin: 0; } .luxe-story-figure img { width: 100%; height: auto; display: block; } /* ============================================================ P5.13 STORY MODAL TEXT GROUP ============================================================ */ .luxe-story-text { padding: 8px 0; } /* ============================================================ P5.14 HOURS / CONTACT BLOCK NUMERIC ALIGNMENT ============================================================ */ .luxe-footer-text, .luxe-info-row .v, .luxe-footer-tel { font-variant-numeric: tabular-nums; } .luxe-footer-tel { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 18px; letter-spacing: 0.08em; color: var(--enh-paper); } /* ============================================================ P5.15 CTA — ensure all inline link CTAs have champagne arrow ============================================================ */ .luxe-link { display: inline-flex; align-items: center; gap: 6px; transition: gap 0.4s var(--enh-ease), color 0.45s var(--enh-ease), border-color 0.45s var(--enh-ease); } @media (hover: hover) { .luxe-link:hover { gap: 14px; } }