/* ========================================================================== Kami — Visit (訪問) ========================================================================== */ /* --- Header: always solid on visit page ---------------------------------- WordPress adds .page-template-page-visit to automatically. The scroll-aware JS removes .is-scrolled at scroll position 0, so we force the solid header state via the body class instead of relying on JS. ------------------------------------------------------------------ */ .page-template-page-visit .kami-header { background-color: rgba(245, 240, 232, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding-block: var(--space-sm); border-bottom: 1px solid var(--kami-line-soft); } /* --- Hero ---------------------------------------------------------------- */ .visit-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 90svh; align-items: stretch; } .visit-hero__info { display: flex; flex-direction: column; justify-content: center; padding: calc(var(--section-pad) + var(--space-lg)) var(--container-pad) var(--section-pad); max-width: 620px; margin-left: auto; width: 100%; } .visit-hero__kanji { font-family: var(--font-serif-jp); font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1; margin-bottom: var(--space-md); } .visit-hero__media { position: relative; overflow: hidden; background: var(--kami-bg-warm); } .visit-hero__media img { width: 100%; height: 100%; object-fit: cover; } .visit-detail { margin-bottom: var(--space-md); } .visit-detail__label { font-size: var(--fs-small); letter-spacing: var(--ls-wide); text-transform: lowercase; color: var(--kami-secondary); display: block; margin-bottom: var(--space-3xs); } .visit-detail__value { font-size: var(--fs-sm); white-space: pre-line; line-height: var(--lh-snug); } @media (max-width: 900px) { .visit-hero { grid-template-columns: 1fr; } .visit-hero__media { min-height: 50vh; order: -1; } .visit-hero__info { max-width: none; margin-left: 0; } } /* --- Get in touch (booking + enquiries merged) --------------------------- */ .visit-contact { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: clamp(var(--space-lg), 6vw, var(--space-2xl)); max-width: 960px; margin-inline: auto; padding-inline: var(--container-pad); } /* Heading rail — sits alongside the content on desktop, stacks on mobile. */ .visit-contact__head { position: sticky; top: clamp(5rem, 12vh, 7rem); align-self: start; } /* お問い合わせ is 7 chars — too long for vertical writing-mode; keep horizontal. */ .visit-contact .tategaki { writing-mode: horizontal-tb; text-orientation: mixed; } .visit-contact__eyebrow { font-family: var(--font-serif-jp); font-size: var(--fs-sm); color: var(--kami-secondary); margin-top: var(--space-sm); } .visit-contact__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); } .visit-contact__lead { font-size: var(--fs-md); line-height: 1.7; color: var(--kami-text); max-width: 52ch; } .visit-contact__booking { width: 100%; } /* Contact methods — clean rows, no empty bordered box. */ .visit-contact__methods { display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-2xl); width: 100%; padding-block: var(--space-md); border-top: 1px solid var(--kami-line); border-bottom: 1px solid var(--kami-line); } .visit-contact__method { display: flex; flex-direction: column; gap: var(--space-3xs); } .visit-contact__label { font-size: var(--fs-small); letter-spacing: var(--ls-wide); text-transform: lowercase; color: var(--kami-secondary); } .visit-contact__value { font-family: var(--font-sans); font-size: var(--fs-lg); color: var(--kami-text); line-height: 1.2; border-bottom: 1px solid transparent; padding-bottom: 0.08em; align-self: flex-start; transition: border-color var(--dur-mid) var(--ease-out); } .visit-contact__value:hover, .visit-contact__value:focus-visible { border-color: var(--kami-text); } .visit-contact__note { font-size: var(--fs-small); letter-spacing: var(--ls-wide); text-transform: lowercase; color: var(--kami-secondary); } .kami-form { width: 100%; } @media (max-width: 900px) { .visit-contact { grid-template-columns: 1fr; gap: var(--space-lg); } .visit-contact__head { position: static; } .visit-contact__methods { gap: var(--space-md) var(--space-xl); } } /* --- Map ----------------------------------------------------------------- */ .visit-map-section { /* No padding — map fills edge to edge without the fullbleed 100vw trick that shifts off-centre when a scrollbar is present. */ width: 100%; overflow: hidden; } .visit-map { position: relative; aspect-ratio: 21 / 9; width: 100%; overflow: hidden; background: var(--kami-bg-warm); } .visit-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; /* Non-interactive until the user clicks the overlay — prevents Google's cooperative "use ctrl + scroll" scrim on page scroll. JS re-arms on mouseleave. */ pointer-events: none; filter: grayscale(1) sepia(0.18) brightness(0.98); transition: filter var(--dur-slow) var(--ease-out); } .visit-map.is-active iframe { pointer-events: auto; filter: grayscale(0.4) sepia(0.05); } /* Click-to-activate overlay */ .visit-map__activate { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: center; padding-bottom: clamp(var(--space-lg), 6vw, var(--space-xl)); border: 0; background: transparent; cursor: pointer; appearance: none; } .visit-map.is-active .visit-map__activate { display: none; } .visit-map__hint { font-size: var(--fs-small); letter-spacing: var(--ls-wide); text-transform: lowercase; color: var(--kami-text); background: rgba(245, 240, 232, 0.9); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 0.55em 1.1em; opacity: 0; transform: translateY(6px); transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out); } .visit-map:hover .visit-map__hint, .visit-map__activate:focus-visible .visit-map__hint { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .visit-map__hint { transition: opacity var(--dur-mid) var(--ease-out); transform: none; } } /* Top and bottom fade — dissolves the map edges into the adjacent sections. Multi-stop, eased gradients over a tall band read as a seamless blend rather than a hard cut. Colours match the neighbours exactly: - top → --kami-bg-warm (#EFE8DD), the bg-warm "get in touch" section above - bottom → --kami-bg (#F5F0E8), the body/footer below */ .visit-map::before, .visit-map::after { content: ""; position: absolute; left: 0; right: 0; height: clamp(90px, 22%, 200px); z-index: 2; pointer-events: none; } .visit-map::before { top: 0; background: linear-gradient( to bottom, rgb(239, 232, 221) 0%, rgba(239, 232, 221, 0.92) 22%, rgba(239, 232, 221, 0.6) 48%, rgba(239, 232, 221, 0.25) 72%, rgba(239, 232, 221, 0) 100% ); } .visit-map::after { bottom: 0; background: linear-gradient( to top, rgb(245, 240, 232) 0%, rgba(245, 240, 232, 0.92) 22%, rgba(245, 240, 232, 0.6) 48%, rgba(245, 240, 232, 0.25) 72%, rgba(245, 240, 232, 0) 100% ); } @media (max-width: 768px) { .visit-map { aspect-ratio: 4 / 3; } }