/* ═══════════════════════════ OFFICIAL BRANDING — MORIKOYA (Updated from Sumi/Washi to Navy/Gold) ═══════════════════════════ */ :root { --navy: #1E2535; /* Official Navy */ --slate: #141924; /* Darker Navy for depth */ --ivory: #F4EFE6; /* Official Ivory */ --gold: #A8926A; /* Official Gold */ --gold-l: #C4A97A; /* Light Gold for hover */ --forest: #6B7A62; /* Official Forest Green */ --white: #FFFFFF; --ink: #1E2535; /* Use Navy for text instead of Brown */ --mid: #3A4252; --border: #D8C8A8; /* Retain existing fonts */ --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Jost', system-ui, sans-serif; --ease: cubic-bezier(.25,.46,.45,.94); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--sans); background: var(--ivory); color: var(--ink); font-size: 16px; font-weight: 300; line-height: 1.82; overflow-x: hidden; } p { font-size: 16px; line-height: 1.7; } /* ═══════════════════════════ NAVIGATION ═══════════════════════════ */ .nav { background: var(--navy); padding: 0 52px; height: 58px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 200; box-shadow: 0 2px 20px rgba(0,0,0,.28); } .nav-logo { font-family: var(--serif); font-size: 22px; letter-spacing: .08em; color: var(--ivory); text-decoration: none; flex-shrink: 0; } .nav-logo span { color: var(--cedar); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; margin-left: 10px; vertical-align: middle; font-family: var(--sans); font-weight: 300; } .nav-links { display: flex; gap: 0; } .nav-link { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: rgba(237,224,204,.55); cursor: pointer; padding: 0 16px; height: 58px; display: flex; align-items: center; text-decoration: none; border-bottom: 2px solid transparent; transition: all .2s; } .nav-link:hover { color: var(--ivory); } .nav-link.active { color: var(--ivory); border-bottom-color: var(--persim); } .nav-cta { background: var(--persim); color: #fff; border: none; padding: 9px 22px; font: 500 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; border-radius: 2px; transition: background .2s; flex-shrink: 0; margin-left: 16px; } .nav-cta:hover { background: #b3552e; } /* ═══════════════════════════ HERO ═══════════════════════════ */ .hero { position: relative; height: 100vh; min-height: 680px; overflow: hidden; display: flex; align-items: flex-end; } .hero-bg { position: absolute; inset: 0; overflow: hidden; } .hero-bg-slide { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 1.4s ease-in-out; transform: scale(1.04); animation: none; } .hero-bg-slide.active { opacity: 1; animation: zoomOut 7s var(--ease) forwards; } .hero-bg-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(165deg, rgba(30,22,12,.55) 0%, rgba(30,22,12,.25) 45%, rgba(30,22,12,.78) 80%, rgba(30,22,12,.95) 100%); } @keyframes zoomOut { from { transform: scale(1.05); } to { transform: scale(1.00); } } .hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 360px; gap: 3rem; align-items: end; max-width: 1200px; width: 100%; padding: 0 52px 72px; margin: 0 auto; animation: fadeUp .9s .4s var(--ease) both; } @keyframes fadeUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } } .hero-eyebrow { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--cedar); margin-bottom: 18px; font-weight: 400; display: flex; align-items: center; gap: 12px; } .hero-eyebrow::before { content: ''; display: block; width: 32px; height: 1px; background: var(--cedar); flex-shrink: 0; } .hero h1 { font-family: var(--serif); font-size: clamp(2.8rem, 5.5vw, 4.6rem); font-weight: 300; color: var(--ivory); line-height: 1.08; letter-spacing: .01em; margin-bottom: 18px; } .hero h1 em { font-style: italic; color: var(--cedar); } .hero-sub { font-size: 16px; color: rgba(237,224,204,.72); line-height: 1.85; margin-bottom: 36px; font-weight: 300; max-width: 500px; } .hero-btns { display: flex; gap: 12px; } .btn-fill { background: var(--persim); color: #fff; border: none; padding: 13px 30px; font: 500 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; border-radius: 2px; text-decoration: none; display: inline-block; transition: all .25s var(--ease); box-shadow: 0 4px 18px rgba(168,120,48,.38); } .btn-fill:hover { background: #b3552e; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(168,120,48,.5); } .btn-outline { background: transparent; color: var(--ivory); border: 1px solid rgba(237,224,204,.38); padding: 13px 26px; font: 300 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; border-radius: 2px; text-decoration: none; display: inline-block; transition: all .25s var(--ease); } .btn-outline:hover { border-color: var(--cedar); color: var(--cedar); } .hero-widget { background: rgba(30,22,12,.88); border: 1px solid rgba(196,160,96,.22); padding: 26px 24px; backdrop-filter: blur(18px); } .hw-title { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--ivory); margin-bottom: 4px; } .hw-sub { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(196,160,96,.55); margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(196,160,96,.15); } .hw-field { margin-bottom: 12px; } .hw-label { display: block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--cedar); margin-bottom: 5px; font-weight: 500; } .hw-input { width: 100%; background: rgba(237,224,204,.07); border: 1px solid rgba(196,160,96,.22); color: var(--ivory); font: 300 15px/1.4 var(--sans); padding: 11px 14px; outline: none; transition: border-color .2s; border-radius: 2px; } .hw-input:focus { border-color: var(--cedar); } .hw-input option { background: var(--navy); } .hw-input::placeholder { color: rgba(237,224,204,.28); } .hw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .hw-submit { width: 100%; margin-top: 6px; background: var(--persim); color: #fff; border: none; padding: 12px; font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; border-radius: 2px; transition: all .2s var(--ease); box-shadow: 0 3px 14px rgba(168,120,48,.4); } .hw-submit:hover { background: #b3552e; } .hero-scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; animation: bounce 2.4s ease-in-out infinite; } .hero-scroll span { font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: rgba(237,224,204,.3); } .hero-scroll-line { width: 1px; height: 38px; background: linear-gradient(to bottom, var(--cedar), transparent); } @keyframes bounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } } /* ═══════════════════════════ STRIP ═══════════════════════════ */ .strip { background: var(--navy); border-top: 1px solid rgba(196,160,96,.12); border-bottom: 1px solid rgba(196,160,96,.12); overflow: hidden; padding: 0; } .strip-track { display: flex; white-space: nowrap; animation: marquee 22s linear infinite; } .strip-track span { font-size: 9.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--cedar); padding: .85rem 2rem; flex-shrink: 0; font-weight: 400; } .strip-dot { color: rgba(196,160,96,.3); padding: .85rem .2rem; font-size: .6rem; flex-shrink: 0; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ═══════════════════════════ SHARED SECTION STYLES ═══════════════════════════ */ .section { padding: 80px 52px; } .section-inner { max-width: 1200px; margin: 0 auto; } .eyebrow { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--sage); margin-bottom: 12px; font-weight: 400; } .eyebrow-cedar { color: var(--cedar); } .section-title { font-family: var(--serif); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 300; line-height: 1.15; color: var(--navy); margin-bottom: 16px; } .section-title em { font-style: italic; color: var(--persim); } .section-title-light { color: var(--ivory); } .section-title-light em { color: var(--cedar); } .section-body { font-size: 17px; line-height: 1.9; color: #3A3028; font-weight: 300; } .reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s var(--ease), transform .65s var(--ease); } .reveal.in { opacity: 1; transform: none; } .d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; } .d3 { transition-delay: .3s; } .d4 { transition-delay: .4s; } .stat-num { display: block; font-family: var(--serif); font-size: 2.6rem; font-weight: 300; color: var(--persim); line-height: 1; margin-bottom: 4px; } .stat-label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--mid); font-weight: 400; } /* ═══════════════════════════ ROOMS SECTION ═══════════════════════════ */ .rooms-section { background: var(--white); padding: 80px 0 0; } .rooms-header { padding: 0 52px 52px; max-width: 1200px; margin: 0 auto; } .rooms-header-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; } .room-tabs { background: var(--navy); padding: 0 52px; display: flex; border-bottom: 1px solid rgba(255,255,255,.07); position: sticky; top: 58px; z-index: 150; } .room-tab { font: 400 11px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: rgba(237,224,204,.38); padding: 18px 22px; cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; transition: all .2s; white-space: nowrap; } .room-tab:hover { color: rgba(237,224,204,.75); } .room-tab.active { color: var(--ivory); border-bottom-color: var(--persim); } .room-panel { display: none; } .room-panel.active { display: block; } .room-slider-wrap { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 520px; position: relative; align-items: stretch; } .room-slider { position: relative; overflow: hidden; background: var(--slate); min-height: 520px; } .slide { display: none; width: 100%; height: 100%; } .slide.active { display: block; } .slide img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 520px; filter: saturate(.82); transition: opacity .5s var(--ease); } .slider-controls { position: absolute; bottom: 18px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 12px; z-index: 10; } .sl-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(30,22,12,.72); border: 1px solid rgba(196,160,96,.3); color: var(--cedar); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; backdrop-filter: blur(6px); } .sl-btn:hover { background: var(--persim); border-color: var(--persim); color: #fff; } .sl-dots { display: flex; gap: 6px; } .sl-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(237,224,204,.35); cursor: pointer; transition: background .2s; } .sl-dot.active { background: var(--cedar); } .slide-counter { position: absolute; top: 16px; right: 16px; font-size: 10px; letter-spacing: .14em; color: rgba(237,224,204,.7); background: rgba(30,22,12,.6); padding: 4px 10px; backdrop-filter: blur(6px); border-radius: 2px; z-index: 10; } .slider-label { position: absolute; bottom: 18px; left: 18px; font: 400 9.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(237,224,204,.75); background: rgba(30,22,12,.65); padding: 5px 12px; border-radius: 2px; backdrop-filter: blur(6px); z-index: 10; } .room-info-panel { background: var(--white); padding: 60px 56px; display: flex; flex-direction: column; justify-content: center; min-height: 520px; } .room-badge { display: inline-block; font: 400 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 5px 14px; margin-bottom: 18px; border-radius: 2px; border: 1px solid; width: fit-content; } .room-badge.persim { color: var(--persim); border-color: var(--persim); } .room-badge.sage { color: var(--sage); border-color: var(--sage); } .room-badge.cedar { color: var(--cedar); border-color: var(--cedar); } .room-info-panel h2 { font-family: var(--serif); font-size: 40px; font-weight: 400; color: var(--navy); margin-bottom: 6px; line-height: 1.1; } .room-sub { font-size: 14px; color: var(--cedar); margin-bottom: 18px; letter-spacing: .03em; } .room-desc { font-size: 15.5px; color: var(--mid); line-height: 1.9; font-weight: 300; margin-bottom: 28px; } .room-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 26px; } .spec { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; background: var(--ivory); border-radius: 2px; } .spec-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; } .spec-lbl { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mid); margin-bottom: 4px; } .spec-val { font-size: 14.5px; color: var(--ink); font-weight: 500; } .room-price-row { border-top: 1px solid var(--border); padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .price-block { flex: 1; } .price-from { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mid); margin-bottom: 5px; } .price-num { font-family: var(--serif); font-size: 32px; font-weight: 400; color: var(--persim); line-height: 1; } .price-per { font-size: 13.5px; color: var(--mid); margin-top: 3px; } .room-btns { display: flex; flex-direction: column; gap: 8px; } .btn-reserve { background: var(--gold); color: #fff; border: none; padding: 13px 26px; font: 500 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; border-radius: 2px; transition: background .2s; white-space: nowrap; } .btn-reserve:hover { background: var(--gold-l); } .btn-detail { background: transparent; color: var(--navy); border: 1px solid var(--border); padding: 11px 22px; font: 400 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; border-radius: 2px; transition: all .2s; white-space: nowrap; } .btn-detail:hover { border-color: var(--navy); } .room-amenities-bar { background: var(--navy); padding: 22px 52px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; } .am-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(237,224,204,.72); font-weight: 300; } .am-item::before { content: attr(data-icon); font-size: 14px; } /* ═══════════════════════════ FEATURES GRID ═══════════════════════════ */ .features-section { background: var(--navy); padding: 80px 52px; } .features-inner { max-width: 1200px; margin: 0 auto; } .features-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; } .features-grid { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid rgba(255,255,255,.06); } .feat { padding: 38px 34px; border-right: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); transition: background .3s; } .feat:hover { background: rgba(196,160,96,.05); } .feat:nth-child(3n) { border-right: none; } .feat:nth-last-child(-n+3) { border-bottom: none; } .feat-icon { font-size: 22px; margin-bottom: 14px; display: block; } .feat-title { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--ivory); margin-bottom: 10px; } .feat-desc { font-size: 15px; color: rgba(237,224,204,.72); line-height: 1.85; font-weight: 300; } /* ═══════════════════════════ EXPERIENCES ═══════════════════════════ */ .exp-section { background: var(--ivory); padding: 80px 52px; } .exp-inner { max-width: 1200px; margin: 0 auto; } .exp-header { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 40px; } .exp-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); } .exp-card { background: var(--navy); padding: 40px 30px; position: relative; overflow: hidden; transition: background .35s; } .exp-card:hover { background: var(--slate); } .exp-card::before { content: attr(data-n); position: absolute; top: -1rem; right: .5rem; font-family: var(--serif); font-size: 5.5rem; color: rgba(196,160,96,.07); line-height: 1; pointer-events: none; } .exp-num { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--cedar); font-weight: 400; margin-bottom: 16px; } .exp-title { font-family: var(--serif); font-size: 21px; color: var(--ivory); font-weight: 300; line-height: 1.3; margin-bottom: 6px; } .exp-title-jp { font-family: var(--serif); font-size: 13px; color: var(--cedar); font-style: italic; margin-bottom: 12px; } .exp-desc { font-size: 15px; color: rgba(237,224,204,.70); line-height: 1.85; } /* ═══════════════════════════ REVIEWS ═══════════════════════════ */ .reviews-section { background: var(--white); padding: 80px 52px; } .reviews-inner { max-width: 1200px; margin: 0 auto; } .rev-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 36px; } .rev-card { background: var(--white); border: 1px solid var(--border); padding: 32px 28px; border-radius: 2px; transition: border-color .3s, transform .3s; } .rev-card:hover { border-color: var(--cedar); transform: translateY(-3px); } .rev-stars { color: var(--persim); font-size: 14px; letter-spacing: 2px; margin-bottom: 14px; } .rev-text { font-size: 16px; font-style: italic; color: var(--mid); line-height: 1.82; margin-bottom: 18px; font-weight: 300; } .rev-who { font-size: 16px; font-weight: 500; color: var(--ink); } .rev-loc { font-size: 13px; color: var(--mid); margin-top: 3px; } /* ═══════════════════════════ CTA BAND ═══════════════════════════ */ .cta-section { background: var(--persim); padding: 72px 52px; text-align: center; } .cta-section h2 { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.2rem); color: #fff; margin-bottom: 10px; font-weight: 300; } .cta-section p { font-size: 16px; color: rgba(255,255,255,.75); margin-bottom: 36px; font-weight: 300; } .btn-white { background: #fff; color: var(--persim); border: none; padding: 14px 38px; font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; border-radius: 2px; margin-right: 14px; transition: all .2s; } .btn-white:hover { background: var(--ivory); } .btn-woutline { background: transparent; color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.35); padding: 14px 34px; font: 400 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; border-radius: 2px; transition: all .2s; } .btn-woutline:hover { border-color: #fff; color: #fff; } /* ═══════════════════════════ FOOTER ═══════════════════════════ */ footer { background: var(--navy); color: var(--ivory); padding: 52px 52px 28px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; border-top: 1px solid rgba(255,255,255,.06); } .f-logo { font-family: var(--serif); font-size: 22px; letter-spacing: .08em; margin-bottom: 10px; } .f-tag { font-size: 14px; color: rgba(237,224,204,.58); line-height: 1.85; font-weight: 300; } .f-socials { display: flex; gap: 8px; margin-top: 18px; } .f-soc { width: 32px; height: 32px; border: 1px solid rgba(196,160,96,.25); display: flex; align-items: center; justify-content: center; font-size: 10px; color: rgba(237,224,204,.38); cursor: pointer; text-decoration: none; border-radius: 2px; transition: all .2s; } .f-soc:hover { border-color: var(--cedar); color: var(--cedar); } .f-ct { font: 400 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(237,224,204,.50); margin-bottom: 14px; } .f-li { font-size: 14px; color: rgba(237,224,204,.65); display: block; margin-bottom: 10px; text-decoration: none; transition: color .2s; } .f-li:hover { color: var(--cedar); } .f-lang { display: flex; gap: 14px; margin-top: 14px; } .f-lang a { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(237,224,204,.28); text-decoration: none; transition: color .2s; } .f-lang a:hover { color: var(--cedar); } .footb { background: #160E06; padding: 13px 52px; display: flex; justify-content: space-between; font-size: 12px; color: rgba(237,224,204,.42); } /* ═══════════════════════════ FLOOR PLAN SECTION ═══════════════════════════ */ .fp-section { background: var(--ivory); border-top: 1px solid var(--border); padding: 52px 52px; } .fp-inner { max-width: 1200px; margin: 0 auto; } .fp-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; gap: 2rem; } .fp-title { font-family: var(--serif); font-size: 30px; font-weight: 400; color: var(--navy); margin-bottom: 6px; } .fp-sub { font-size: 14px; color: var(--mid); letter-spacing: .04em; } .fp-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--navy); color: var(--cedar); padding: 8px 18px; font: 400 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; } .fp-layout { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; } .fp-img-wrap { background: var(--white); border: 1px solid var(--border); padding: 28px; display: flex; align-items: center; justify-content: center; } .fp-img-wrap img { max-width: 100%; height: auto; display: block; filter: contrast(1.04) saturate(0.9); } .fp-caption { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); margin-top: 14px; text-align: center; } .fp-legend { display: flex; flex-direction: column; gap: 8px; } .fp-legend-title { font-family: var(--serif); font-size: 16px; color: var(--navy); margin-bottom: 8px; font-weight: 400; } .fp-room-item { display: flex; align-items: center; gap: 12px; padding: 16px 16px; background: var(--white); border-left: 3px solid var(--border); border-bottom: 1px solid var(--border); font-size: 12px; } .fp-room-item.highlight { border-left-color: var(--persim); } .fp-room-item.accent { border-left-color: var(--cedar); } .fp-room-icon { font-size: 18px; flex-shrink: 0; } .fp-room-name { font-weight: 600; color: var(--ink); font-size: 16px; } .fp-room-note { font-size: 14px; color: var(--mid); margin-top: 3px; } .fp-disclaimer { margin-top: 20px; padding: 12px 16px; background: var(--ivory); border: 1px solid var(--border); font-size: 13.5px; color: var(--mid); line-height: 1.72; } /* ═══════════════════════════ HERO SLIDESHOW PAGER ═══════════════════════════ */ .hero-pager { position: absolute; bottom: 2.8rem; left: 52px; z-index: 10; display: flex; gap: 0; } .hp-btn { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 8px 16px 8px 0; position: relative; transition: all .3s; } .hp-btn + .hp-btn { border-left: 1px solid rgba(196,160,96,.18); padding-left: 16px; } .hp-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(237,224,204,.3); flex-shrink: 0; transition: all .4s var(--ease); display: block; } .hp-btn.active .hp-dot { background: var(--cedar); width: 22px; border-radius: 3px; } .hp-label { font: 400 9.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(237,224,204,.38); transition: color .3s; display: flex; flex-direction: column; gap: 3px; text-align: left; } .hp-btn.active .hp-label { color: rgba(237,224,204,.82); } .hp-btn:hover .hp-label { color: rgba(237,224,204,.62); } .hp-jp { display: block; font-size: 8.5px; letter-spacing: .12em; color: rgba(196,160,96,.5); font-family: var(--serif); font-style: italic; text-transform: none; } .hp-btn.active .hp-jp { color: var(--cedar); } .hero-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: rgba(196,160,96,.12); z-index: 10; } .hero-progress-bar { height: 100%; background: var(--cedar); width: 0%; transition: width linear; } /* ═══════════════════════════ PAGE ROUTER — single-file multi-page ═══════════════════════════ */ .page { display: none !important; } .page.active { display: block !important; } @keyframes pageFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .nav-link.page-active { color: var(--ivory) !important; border-bottom: 2px solid var(--persim); } #page-neighbourhood :root { --navy: #1E160C; --slate: #2A1E10; --ivory: #EDE0CC; --persim: #A87830; --sage: #6A7A56; --cedar: #C4A060; --white: #F5EEDC; --ink: #1E2025; --mid: #48382A; --light: #8A8D95; --border: #DDD5C8; } #page-neighbourhood *, #page-neighbourhood *::before, #page-neighbourhood *::after { box-sizing: border-box; margin: 0; padding: 0; } #page-neighbourhood .nav { background: var(--navy); padding: 0 52px; height: 58px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 20px rgba(0,0,0,.25); } #page-neighbourhood .nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 21px; letter-spacing: .08em; color: var(--ivory); } #page-neighbourhood .nav-links { display: flex; gap: 28px; align-items: center; } #page-neighbourhood .nav-link { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--ivory); text-decoration: none; transition: color .2s; } #page-neighbourhood .nav-link:hover, #page-neighbourhood .nav-link.active { color: var(--cedar); } #page-neighbourhood .nav-cta { background: var(--persim); color: #fff; border: none; padding: 9px 22px; font: 500 11px/1 'Jost', sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; border-radius: 2px; } #page-neighbourhood .hero-eye { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--cedar); margin-bottom: 20px; } #page-neighbourhood .hero h1 { font-family: 'Cormorant Garamond', serif; font-size: 64px; font-weight: 400; line-height: 1.05; margin-bottom: 24px; max-width: 720px; } #page-neighbourhood .hero h1 em { font-style: italic; color: var(--cedar); } #page-neighbourhood .hero-desc { font-size: 17px; color: rgba(237,224,204,.65); max-width: 600px; line-height: 1.85; margin-bottom: 36px; font-weight: 300; } #page-neighbourhood .hero-tags { display: flex; gap: 10px; flex-wrap: wrap; } #page-neighbourhood .hero-tag { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 7px 16px; border: 1px solid rgba(196,160,96,.35); color: var(--cedar); border-radius: 20px; } #page-neighbourhood .life-banner { background: var(--navy); padding: 16px 52px; display: flex; align-items: center; gap: 16px; } #page-neighbourhood .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); flex-shrink: 0; animation: pulse 2s infinite; } #page-neighbourhood @keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.4; transform:scale(1.4); } } #page-neighbourhood .life-banner-text { font-size: 13.5px; color: rgba(237,224,204,.65); } #page-neighbourhood .life-banner-text strong { color: var(--cedar); font-weight: 500; } #page-neighbourhood .life-badge-sm { margin-left: auto; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--sage); padding: 4px 14px; border: 1px solid rgba(106,122,86,.35); border-radius: 20px; white-space: nowrap; } #page-neighbourhood .tab-nav { background: var(--navy); padding: 0 52px; display: flex; gap: 0; overflow-x: auto; position: sticky; top: 58px; z-index: 90; border-bottom: 1px solid rgba(255,255,255,.07); scrollbar-width: none; } #page-neighbourhood .tab-nav::-webkit-scrollbar { display: none; } #page-neighbourhood .tab-btn { font: 400 11px/1 'Jost', sans-serif; letter-spacing: .13em; text-transform: uppercase; color: rgba(237,224,204,.4); padding: 17px 18px; cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; transition: all .2s; white-space: nowrap; } #page-neighbourhood .tab-btn:hover { color: rgba(237,224,204,.78); } #page-neighbourhood .tab-btn.active { color: var(--ivory); border-bottom-color: var(--persim); } #page-neighbourhood .grp-btn { font: 400 12px/1 'Jost', sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 11px 22px; border-radius: 24px; border: 1.5px solid var(--border); background: var(--white); color: var(--mid); cursor: pointer; transition: all .2s; } #page-neighbourhood .grp-btn:hover { border-color: var(--navy); color: var(--navy); } #page-neighbourhood .grp-btn.active { background: var(--navy); color: var(--ivory); border-color: var(--navy); } #page-neighbourhood .grp-panel { display: none; } #page-neighbourhood .grp-panel.active { display: block; } #page-neighbourhood .section { display: none; } #page-neighbourhood .section.active { display: block; } #page-neighbourhood .sec-header { padding: 68px 52px 38px; } #page-neighbourhood .sec-eye { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--sage); margin-bottom: 12px; } #page-neighbourhood .sec-header h2 { font-family: 'Cormorant Garamond', serif; font-size: 46px; font-weight: 400; color: var(--navy); margin-bottom: 16px; line-height: 1.1; } #page-neighbourhood .sec-header h2 em { font-style: italic; color: var(--cedar); } #page-neighbourhood .sec-header p { font-size: 16px; color: var(--mid); max-width: 680px; line-height: 1.85; font-weight: 300; } #page-neighbourhood .card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--border); margin: 0 52px 52px; } #page-neighbourhood .card-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border); margin: 0 52px 52px; } #page-neighbourhood .place-card { background: var(--white); display: flex; flex-direction: column; } #page-neighbourhood .place-img { height: 230px; position: relative; overflow: hidden; background: var(--slate); } #page-neighbourhood .place-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } #page-neighbourhood .place-card:hover .place-img img { transform: scale(1.05); } #page-neighbourhood .place-img-emoji { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 60px; } #page-neighbourhood .badge-wrap { position: absolute; bottom: 14px; left: 14px; display: flex; gap: 6px; flex-wrap: wrap; } #page-neighbourhood .badge { font: 600 10px/1 'Jost', sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 5px 11px; border-radius: 2px; } #page-neighbourhood .b-navy { background: rgba(30,22,12,.9); color: var(--cedar); } #page-neighbourhood .b-red { background: rgba(168,120,48,.9); color: #fff; } #page-neighbourhood .b-sage { background: rgba(106,122,86,.9);color: #fff; } #page-neighbourhood .b-white { background: rgba(245,238,220,.92);color: var(--navy); } #page-neighbourhood .photo-cr { position:absolute; bottom:6px; right:10px; font-size:9px; color:rgba(255,255,255,.35); letter-spacing:.04em; } #page-neighbourhood .place-body { padding: 24px 26px; flex: 1; display: flex; flex-direction: column; } #page-neighbourhood .place-name { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; color: var(--navy); margin-bottom: 3px; } #page-neighbourhood .place-jp { font-size: 12px; color: var(--cedar); margin-bottom: 12px; letter-spacing: .03em; } #page-neighbourhood .place-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 13px; } #page-neighbourhood .ptag { font: 400 10px/1 'Jost', sans-serif; letter-spacing: .07em; text-transform: uppercase; padding: 4px 9px; border-radius: 2px; border: 1px solid var(--border); color: var(--light); } #page-neighbourhood .ptag.hl { border-color: var(--persim); color: var(--persim); } #page-neighbourhood .ptag.sg { border-color: var(--sage); color: var(--sage); } #page-neighbourhood .place-desc { font-size: 16px; color: var(--mid); line-height: 1.88; flex: 1; font-weight: 300; } #page-neighbourhood .place-meta { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; } #page-neighbourhood .place-walk { font-size: 12.5px; color: var(--sage); letter-spacing: .04em; } #page-neighbourhood .place-price { font-size: 13px; font-weight: 600; color: var(--persim); } #page-neighbourhood .place-hours { font-size: 11.5px; color: var(--light); } #page-neighbourhood .morning-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--border); margin: 0 52px 52px; } #page-neighbourhood .morning-card { background: var(--white); overflow: hidden; display: flex; flex-direction: column; } #page-neighbourhood .morning-photo { height: 160px; overflow: hidden; position: relative; } #page-neighbourhood .morning-photo img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; } #page-neighbourhood .morning-card:hover .morning-photo img { transform: scale(1.05); } #page-neighbourhood .morning-body { padding: 28px 30px; flex: 1; } #page-neighbourhood .morning-time { font-family: 'Cormorant Garamond', serif; font-size: 40px; color: var(--cedar); font-weight: 300; margin-bottom: 8px; line-height: 1; } #page-neighbourhood .morning-activity { font-size: 18px; font-weight: 600; color: var(--navy); margin-bottom: 10px; } #page-neighbourhood .morning-desc { font-size: 16px; color: var(--mid); line-height: 1.88; margin-bottom: 18px; font-weight: 300; } #page-neighbourhood .morning-tag { display: inline-block; font: 400 10px/1 'Jost', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--sage); padding: 5px 13px; border: 1px solid rgba(106,122,86,.3); } #page-neighbourhood .hl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border); margin: 0 52px 52px; } #page-neighbourhood .hl-dark { background: var(--navy); color: var(--ivory); padding: 38px 38px; } #page-neighbourhood .hl-light { background: var(--white); color: var(--ink); padding: 38px 38px; } #page-neighbourhood .hl-eye { font: 400 10px/1 'Jost', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--cedar); margin-bottom: 12px; } #page-neighbourhood .hl-eye.sg { color: var(--sage); } #page-neighbourhood .hl-title { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 400; margin-bottom: 16px; line-height: 1.2; } #page-neighbourhood .hl-body { font-size: 16px; line-height: 1.88; font-weight: 300; } #page-neighbourhood .hl-dark .hl-body { color: rgba(237,224,204,.62); } #page-neighbourhood .hl-light .hl-body { color: var(--mid); } #page-neighbourhood .hl-list { list-style: none; margin-top: 18px; } #page-neighbourhood .hl-list li { font-size: 15.5px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.09); display: flex; gap: 12px; line-height: 1.55; font-weight: 300; } #page-neighbourhood .hl-list.lt li { border-color: var(--border); color: var(--mid); } #page-neighbourhood .hl-list.dk li { color: rgba(237,224,204,.65); } #page-neighbourhood .hl-list li::before { content: '—'; color: var(--cedar); flex-shrink: 0; } #page-neighbourhood .fest-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; background: var(--border); margin: 0 52px 52px; } #page-neighbourhood .fest-card { background: var(--white); overflow: hidden; } #page-neighbourhood .fest-img { height: 168px; position: relative; overflow: hidden; } #page-neighbourhood .fest-img img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s; } #page-neighbourhood .fest-card:hover .fest-img img { transform: scale(1.06); } #page-neighbourhood .fest-placeholder { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:50px; } #page-neighbourhood .fest-body { padding: 20px 20px 24px; } #page-neighbourhood .fest-mon #page-neighbourhood .fest-name { font-size: 15px; font-weight: 600; color: var(--navy); margin-bottom: 3px; } #page-neighbourhood .fest-jp { font-size: 11px; color: var(--cedar); margin-bottom: 10px; } #page-neighbourhood .fest-desc { font-size: 15.5px; color: var(--mid); line-height: 1.85; font-weight: 300; } #page-neighbourhood .cent-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border); margin: 0 52px 52px; } #page-neighbourhood .cent-card { background: var(--white); display: flex; overflow: hidden; } #page-neighbourhood .cent-img { width: 140px; flex-shrink: 0; position: relative; overflow: hidden; } #page-neighbourhood .cent-img img { width:100%;height:100%;object-fit:cover;display:block; } #page-neighbourhood .cent-placeholder { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:44px; background: var(--ivory); } #page-neighbourhood .cent-content { padding: 26px 26px; } #page-neighbourhood .cent-year { font-family: 'Cormorant Garamond', serif; font-size: 40px; color: var(--cedar); font-weight: 300; line-height: 1; margin-bottom: 2px; } #page-neighbourhood .cent-year span { display: block; font: 400 10px/1 'Jost', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--light); margin-top: 2px; } #page-neighbourhood .cent-name { font-size: 17px; font-weight: 600; color: var(--navy); margin-bottom: 2px; } #page-neighbourhood .cent-jp { font-size: 11.5px; color: var(--cedar); margin-bottom: 10px; } #page-neighbourhood .cent-desc { font-size: 15.5px; color: var(--mid); line-height: 1.85; font-weight: 300; } #page-neighbourhood .cent-walk { margin-top: 10px; font-size: 12px; color: var(--sage); } #page-neighbourhood .life-section { background: var(--navy); margin: 0 52px 52px; padding: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; } #page-neighbourhood .life-l-eye { font: 400 10px/1 'Jost', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--cedar); margin-bottom: 12px; } #page-neighbourhood .life-l-title { font-family:'Cormorant Garamond',serif; font-size:36px; font-weight:400; color:var(--ivory); margin-bottom:16px; line-height:1.15; } #page-neighbourhood .life-l-desc { font-size:14.5px; color:rgba(237,224,204,.58); line-height:1.85; margin-bottom:26px; font-weight:300; } #page-neighbourhood .life-items { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #page-neighbourhood .life-item { background:rgba(237,224,204,.06); padding:15px 16px; border:1px solid rgba(237,224,204,.09); } #page-neighbourhood .life-item-icon { font-size:20px; margin-bottom:5px; } #page-neighbourhood .life-item-name { font-size:13px; font-weight:600; color:var(--ivory); margin-bottom:3px; } #page-neighbourhood .life-item-desc { font-size:11.5px; color:rgba(237,224,204,.42); line-height:1.5; font-weight:300; } #page-neighbourhood .life-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #page-neighbourhood .life-ph { position:relative; overflow:hidden; } #page-neighbourhood .life-ph img { width:100%; height:160px; object-fit:cover; display:block; filter:brightness(.82); transition:filter .3s; } #page-neighbourhood .life-ph:hover img { filter:brightness(1); } #page-neighbourhood .life-ph.feat { grid-column:1/3; } #page-neighbourhood .life-ph.feat img { height:220px; } #page-neighbourhood .life-ph-lbl { position:absolute; bottom:10px; left:12px; font:400 10px/1 'Jost',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:rgba(237,224,204,.8); } #page-neighbourhood .life-placeholder { width:100%; height:160px; background:rgba(237,224,204,.06); border:1px dashed rgba(237,224,204,.18); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; } #page-neighbourhood .life-placeholder.feat { height:220px; grid-column:1/3; } #page-neighbourhood .life-placeholder .icon { font-size:36px; } #page-neighbourhood .life-placeholder .label { font-size:10px; color:rgba(237,224,204,.3); letter-spacing:.1em; text-transform:uppercase; text-align:center; padding:0 14px; line-height:1.5; } #page-neighbourhood .booking-strip { background: var(--navy); padding: 54px 52px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; } #page-neighbourhood .bs-icon { font-size:30px; margin-bottom:16px; } #page-neighbourhood .bs-title { font-family:'Cormorant Garamond',serif; font-size:23px; color:var(--ivory); margin-bottom:10px; } #page-neighbourhood .bs-desc { font-size:14px; color:rgba(237,224,204,.52); line-height:1.82; font-weight:300; } #page-neighbourhood .bs-cta { display:inline-block; margin-top:16px; font:400 11px/1 'Jost',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--cedar); border-bottom:1px solid rgba(196,160,96,.4); padding-bottom:2px; cursor:pointer; } #page-neighbourhood .pdf-banner { background:var(--ivory); border:1px solid var(--border); margin:0 52px 52px; padding:24px 32px; display:flex; align-items:center; justify-content:space-between; gap:20px; } #page-neighbourhood .pdf-text { font-size:15px; color:var(--navy); line-height:1.5; } #page-neighbourhood .pdf-text span { font-size:13px; color:var(--sage); display:block; margin-top:4px; font-weight:300; } #page-neighbourhood .pdf-btn { background:var(--navy); color:var(--ivory); border:none; padding:11px 24px; font:500 11px/1 'Jost',sans-serif; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; border-radius:2px; white-space:nowrap; } #page-neighbourhood .final-cta { background:var(--persim); padding:68px 52px; text-align:center; } #page-neighbourhood .final-cta h2 { font-family:'Cormorant Garamond',serif; font-size:50px; font-weight:400; color:#fff; margin-bottom:14px; } #page-neighbourhood .final-cta p { font-size:16px; color:rgba(255,255,255,.68); margin-bottom:34px; font-weight:300; } #page-neighbourhood .cta-btn { background:#fff; color:var(--persim); border:none; padding:16px 42px; font:600 12px/1 'Jost',sans-serif; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; border-radius:2px; margin-right:14px; } #page-neighbourhood .cta-btn2 { background:transparent; color:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.4); padding:16px 42px; font:400 12px/1 'Jost',sans-serif; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; border-radius:2px; } #page-neighbourhood .footer { background:var(--navy); color:var(--ivory); padding:42px 52px; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:38px; border-top:1px solid rgba(255,255,255,.06); } #page-neighbourhood .f-logo { font-family:'Cormorant Garamond',serif; font-size:22px; letter-spacing:.08em; margin-bottom:12px; } #page-neighbourhood .f-tag { font-size:13px; color:rgba(237,224,204,.60); line-height:1.8; max-width:260px; font-weight:300; } #page-neighbourhood .f-col-title { font:400 10px/1 'Jost',sans-serif; letter-spacing:.18em; text-transform:uppercase; color:rgba(237,224,204,.3); margin-bottom:14px; } #page-neighbourhood .f-link { font-size:13px; color:rgba(237,224,204,.68); display:block; margin-bottom:10px; cursor:pointer; } #page-neighbourhood .footb { background:#160E06; padding:14px 52px; display:flex; justify-content:space-between; font-size:11px; color:rgba(237,224,204,.22); } #page-access :root { --navy: #1E160C; --slate: #2A1E10; --ivory: #EDE0CC; --persim: #A87830; --sage: #6A7A56; --cedar: #C4A060; --white: #F5EEDC; --ink: #1E2025; --mid: #48382A; --light: #8A8D95; --border: #DDD5C8; --border-strong: #C8BFB0; } *, #page-access *::before, #page-access *::after { box-sizing: border-box; margin: 0; padding: 0; } #page-access .nav { background: var(--navy); padding: 0 52px; height: 58px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 20px rgba(0,0,0,.25); } #page-access .nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 25px; letter-spacing: .08em; color: var(--ivory); } #page-access .nav-links { display: flex; gap: 28px; align-items: center; } #page-access .nav-link { font-size: 13px; letter-spacing: .13em; text-transform: uppercase; color: rgba(237,224,204,.6); text-decoration: none; transition: color .2s; } #page-access .nav-link:hover, #page-access .nav-link.active { color: var(--cedar); } #page-access .nav-cta { background: var(--persim); color: #fff; border: none; padding: 9px 22px; font: 500 11px/1 'Jost', sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; border-radius: 2px; } #page-access .hero-eye { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--cedar); margin-bottom: 20px; } #page-access .hero h1 { font-family: 'Cormorant Garamond', serif; font-size: 64px; font-weight: 400; line-height: 1.05; margin-bottom: 22px; max-width: 720px; } #page-access .hero h1 em { font-style: italic; color: var(--cedar); } #page-access .hero-desc { font-size: 24px; color: rgba(237,224,204,.65); max-width: 640px; line-height: 1.95; margin-bottom: 32px; font-weight: 300; } #page-access .hero-tags { display: flex; gap: 10px; flex-wrap: wrap; } #page-access .hero-tag { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 7px 16px; border: 1px solid rgba(196,160,96,.35); color: var(--cedar); border-radius: 20px; } #page-access .stat-strip { display: grid; grid-template-columns: repeat(6,1fr); border-bottom: 1px solid var(--border); background: var(--white); } #page-access .stat-cell { padding: 26px 20px; text-align: center; border-right: 1px solid var(--border); transition: background .2s; } #page-access .stat-cell:last-child { border-right: none; } #page-access .stat-cell:hover { background: var(--ivory); } #page-access .stat-num { font-family: 'Cormorant Garamond', serif; font-size: 46px; font-weight: 300; color: var(--persim); line-height: 1; } #page-access .stat-unit { font-size: 17px; color: var(--cedar); } #page-access .stat-label { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--light); margin-top: 5px; line-height: 1.5; } #page-access .tab-nav { background: var(--navy); padding: 0 52px; display: flex; overflow-x: auto; position: sticky; top: 58px; z-index: 90; border-bottom: 1px solid rgba(255,255,255,.07); scrollbar-width: none; } #page-access .tab-nav::-webkit-scrollbar { display: none; } #page-access .tab-btn { font: 400 11px/1 'Jost', sans-serif; letter-spacing: .13em; text-transform: uppercase; color: rgba(237,224,204,.4); padding: 17px 18px; cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; transition: all .2s; white-space: nowrap; } #page-access .tab-btn:hover { color: rgba(237,224,204,.78); } #page-access .tab-btn.active { color: var(--ivory); border-bottom-color: var(--persim); } #page-access .section { display: none; } #page-access .section.active { display: block; } #page-access .sec-header { padding: 72px 56px 44px; } #page-access .sec-eye { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--sage); margin-bottom: 12px; } #page-access .sec-header h2 { font-family: 'Cormorant Garamond', serif; font-size: 54px; font-weight: 400; color: var(--navy); margin-bottom: 14px; line-height: 1.1; } #page-access .sec-header h2 em { font-style: italic; color: var(--persim); } #page-access .sec-header p { font-size: 19px; color: var(--mid); max-width: 680px; line-height: 1.95; font-weight: 300; } #page-access .map-wrap { margin: 0 52px 52px; background: var(--white); border: 1px solid var(--border); } #page-access .map-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 28px 36px 0; flex-wrap: wrap; gap: 16px; } #page-access .map-title { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 400; color: var(--navy); margin-bottom: 4px; } #page-access .map-sub { font-size: 16px; color: var(--light); letter-spacing: .04em; } #page-access .map-badge { font-size: 13px; letter-spacing: .15em; text-transform: uppercase; padding: 6px 14px; border: 1px solid var(--border); color: var(--sage); border-radius: 2px; white-space: nowrap; margin-top: 4px; } #page-access .map-svg-wrap { padding: 28px 20px 12px; overflow-x: auto; } #page-access .map-svg-wrap svg { display: block; min-width: 760px; width: 100%; max-width: 1060px; margin: 0 auto; } #page-access .gmap-wrap { margin: 0 52px 52px; border: 1px solid var(--border); background: var(--white); overflow: hidden; } #page-access .gmap-header { padding: 20px 28px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } #page-access .gmap-title { font-family: 'Cormorant Garamond', serif; font-size: 24px; color: var(--navy); } #page-access .gmap-addr { font-size: 16px; color: var(--light); } #page-access .gmap-wrap iframe { width: 100%; height: 400px; border: none; display: block; } #page-access .station-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border); margin: 0 52px 52px; } #page-access .station-card { background: var(--white); padding: 40px 42px; position: relative; border-left: 4px solid var(--line-color, var(--cedar)); transition: background .2s; } #page-access .station-card:hover { background: var(--ivory); } #page-access .station-card.featured { border-left-width: 5px; } #page-access .station-card.featured .sc-name { font-size: 38px; } #page-access .sc-walk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); margin-bottom: 14px; border: 1px solid rgba(106,122,86,.35); padding: 5px 14px; border-radius: 20px; } #page-access .sc-name { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 500; color: var(--navy); margin-bottom: 4px; } #page-access .sc-jp { font-family: 'Noto Serif JP', serif; font-size: 17px; color: var(--cedar); margin-bottom: 16px; } #page-access .sc-lines { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 13px; } #page-access .sc-line-tag { font: 600 10px/1 'Jost', sans-serif; letter-spacing: .07em; text-transform: uppercase; padding: 5px 11px; border-radius: 2px; color: #fff; } #page-access .sc-desc { font-size: 19px; color: var(--mid); line-height: 1.92; font-weight: 300; } #page-access .sc-destinations { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); } #page-access .sc-dest-label { font: 600 11px/1 'Jost', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--mid); margin-bottom: 14px; } #page-access .sc-dest-list { display: flex; flex-direction: column; gap: 0; } #page-access .sc-dest-row { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 15px; } #page-access .sc-dest-row:last-child { border-bottom: none; } #page-access .sc-dest-place { font-weight: 600; color: var(--ink); min-width: 165px; flex-shrink: 0; font-size: 16px; } #page-access .sc-dest-time { color: var(--persim); font-size: 15px; font-weight: 700; min-width: 62px; flex-shrink: 0; } #page-access .sc-dest-note { color: var(--mid); font-size: 14px; font-weight: 400; line-height: 1.4; } #page-access .route-section { margin: 0 52px 52px; } #page-access .route-card { background: var(--white); border: 1px solid var(--border); margin-bottom: 2px; overflow: hidden; } #page-access .route-head { display: flex; align-items: center; gap: 20px; padding: 24px 32px; border-bottom: 1px solid var(--border); background: var(--ivory); flex-wrap: wrap; gap: 12px; } #page-access .route-head-left { flex: 1; } #page-access .route-hl { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 400; color: var(--navy); margin-bottom: 3px; } #page-access .route-sub { font-size: 16px; color: var(--light); } #page-access .route-time { background: var(--navy); color: var(--cedar); padding: 8px 18px; font: 400 12px/1 'Jost', sans-serif; letter-spacing: .1em; text-transform: uppercase; border-radius: 2px; white-space: nowrap; } #page-access .route-body { padding: 28px 32px; } #page-access .step-row { display: flex; gap: 20px; padding-bottom: 24px; position: relative; } #page-access .step-row:not(:last-child)::after { content: ''; position: absolute; left: 17px; top: 38px; bottom: 0; width: 1px; background: var(--border); } #page-access .step-dot { width: 36px; height: 36px; border-radius: 50%; background: var(--ivory); border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 17px; color: var(--mid); } #page-access .step-dot.tx { background: rgba(43,160,112,.1); border-color: #2BA070; color: #2BA070; font-size:11px; font-weight:600; } #page-access .step-dot.nx { background: rgba(0,55,130,.1); border-color: #003782; color: #003782; font-size:10px; font-weight:600; } #page-access .step-dot.kq { background: rgba(232,0,28,.1); border-color: #E8001C; color: #E8001C; font-size:10px; font-weight:600; } #page-access .step-action { font-size: 18px; color: var(--navy); margin-bottom: 7px; line-height: 1.55; font-weight: 400; } #page-access .step-detail { font-size: 16px; color: var(--mid); line-height: 1.88; font-weight: 300; } #page-access .step-dur { display: inline-block; margin-top: 7px; font: 400 11px/1 'Jost', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--persim); background: rgba(168,120,48,.08); padding: 4px 10px; border-radius: 2px; } #page-access .hl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border); margin: 0 52px 52px; } #page-access .hl-dark { background: var(--navy); color: var(--ivory); padding: 38px 40px; } #page-access .hl-light { background: var(--white); padding: 38px 40px; } #page-access .hl-eye { font: 400 10px/1 'Jost', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--cedar); margin-bottom: 12px; } #page-access .hl-eye.sg { color: var(--sage); } #page-access .hl-title { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 400; margin-bottom: 16px; line-height: 1.2; } #page-access .hl-dark .hl-title { color: var(--ivory); } #page-access .hl-light .hl-title { color: var(--navy); } #page-access .hl-body { font-size: 17px; line-height: 1.92; font-weight: 300; } #page-access .hl-dark .hl-body { color: rgba(237,224,204,.62); } #page-access .hl-light .hl-body { color: var(--mid); } #page-access .hl-list { list-style: none; margin-top: 18px; } #page-access .hl-list li { font-size: 17px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.09); display: flex; gap: 12px; line-height: 1.55; font-weight: 300; } #page-access .hl-list.lt li { border-color: var(--border); color: var(--mid); } #page-access .hl-list.dk li { color: rgba(237,224,204,.65); } #page-access .hl-list li::before { content: '—'; color: var(--cedar); flex-shrink: 0; } #page-access .addr-block { background: var(--white); border: 1px solid var(--border); margin: 0 52px 52px; padding: 32px 36px; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 24px; } #page-access .addr-label { font: 400 10px/1 'Jost', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--sage); margin-bottom: 12px; } #page-access .addr-jp { font-family: 'Noto Serif JP', serif; font-size: 24px; color: var(--navy); margin-bottom: 6px; } #page-access .addr-en { font-size: 17px; color: var(--mid); margin-bottom: 18px; } #page-access .addr-btns { display: flex; flex-wrap: wrap; gap: 10px; } #page-access .copy-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--border-strong); background: none; color: var(--mid); font: 400 11px/1 'Jost', sans-serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; border-radius: 2px; transition: all .2s; text-decoration: none; } #page-access .copy-btn:hover { border-color: var(--navy); color: var(--navy); background: var(--ivory); } #page-access .attr-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--border); margin: 0 52px 2px; } #page-access .attr-card { background: var(--white); transition: background .2s; overflow: hidden; display: flex; flex-direction: column; } #page-access .attr-card:hover { background: var(--ivory); } #page-access .attr-img { height: 200px; overflow: hidden; position: relative; background: var(--slate); flex-shrink: 0; } #page-access .attr-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } #page-access .attr-card:hover .attr-img img { transform: scale(1.05); } #page-access .attr-body { padding: 26px 28px; flex: 1; display: flex; flex-direction: column; } #page-access .attr-badge { position: absolute; bottom: 12px; left: 12px; font: 600 10px/1 'Jost', sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 5px 11px; border-radius: 2px; background: rgba(30,22,12,.88); color: var(--cedar); } #page-access .attr-emoji { font-size: 32px; margin-bottom: 14px; display: block; } #page-access .attr-name { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 500; color: var(--navy); margin-bottom: 2px; } #page-access .attr-jp { font-size: 15px; color: var(--cedar); margin-bottom: 10px; } #page-access .attr-time-row { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--persim); font-weight: 500; margin-bottom: 12px; letter-spacing: .03em; } #page-access .attr-desc { font-size: 17px; color: var(--mid); line-height: 1.9; font-weight: 300; } #page-access .zone-label { margin: 0 52px 2px; background: var(--navy); padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; } #page-access .zone-label span { font: 400 10px/1 'Jost', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--cedar); } #page-access .daytrip-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--border); margin: 0 52px 52px; } #page-access .daytrip-card { background: var(--white); transition: background .2s; overflow: hidden; display: flex; flex-direction: column; } #page-access .daytrip-card:hover { background: var(--ivory); } #page-access .dt-img { height: 220px; overflow: hidden; position: relative; background: var(--slate); flex-shrink: 0; } #page-access .dt-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } #page-access .daytrip-card:hover .dt-img img { transform: scale(1.05); } #page-access .dt-body { padding: 28px 28px; flex: 1; } #page-access .dt-badge { position: absolute; bottom: 12px; left: 12px; font: 600 10px/1 'Jost', sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 5px 11px; border-radius: 2px; } #page-access .dt-badge-navy { background: rgba(30,22,12,.88); color: var(--cedar); } #page-access .dt-badge-sage { background: rgba(106,122,86,.88); color: #fff; } #page-access .dt-icon { font-size: 36px; margin-bottom: 14px; display: block; } #page-access .dt-name { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 500; color: var(--navy); margin-bottom: 2px; } #page-access .dt-jp { font-family: 'Noto Serif JP', serif; font-size: 15px; color: var(--cedar); margin-bottom: 8px; } #page-access .dt-time { font-size: 16px; color: var(--persim); font-weight: 500; margin-bottom: 14px; letter-spacing: .03em; } #page-access .dt-desc { font-size: 17px; color: var(--mid); line-height: 1.92; font-weight: 300; margin-bottom: 16px; } #page-access .dt-route { padding: 14px 16px; background: var(--ivory); border: 1px solid var(--border); border-left: 3px solid var(--sage); font-size: 16px; color: var(--mid); line-height: 1.85; font-weight: 300; } #page-access .dt-route strong { color: var(--navy); font-weight: 500; } #page-access .walk-list { margin: 0 52px 52px; } #page-access .walk-header { background: var(--white); border: 1px solid var(--border); margin-bottom: 2px; padding: 28px 36px; border-left: 5px solid var(--persim); } #page-access .walk-header-name { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 500; color: var(--navy); margin-bottom: 3px; } #page-access .walk-header-sub { font-size: 16px; color: var(--mid); font-weight: 300; } #page-access .walk-step { background: var(--white); border: 1px solid var(--border); border-top: none; padding: 24px 32px; display: flex; gap: 22px; align-items: flex-start; transition: background .2s; } #page-access .walk-step:hover { background: var(--ivory); } #page-access .walk-num { width: 38px; height: 38px; flex-shrink: 0; border: 1.5px solid var(--border-strong); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-size: 18px; color: var(--cedar); } #page-access .walk-text { font-size: 15px; color: var(--mid); line-height: 1.9; font-weight: 300; } #page-access .walk-text strong { color: var(--navy); font-weight: 500; } #page-access .walk-dist { font-size: 15px; color: var(--sage); margin-top: 6px; letter-spacing: .04em; } #page-access .faq-section { margin: 0 52px 52px; } #page-access .faq-cat { font: 400 10px/1 'Jost', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--sage); padding: 16px 32px; background: var(--ivory); border: 1px solid var(--border); border-bottom: none; display: flex; align-items: center; gap: 14px; } #page-access .faq-cat::after { content: ''; flex: 1; height: 1px; background: var(--border); } #page-access .faq-item { border: 1px solid var(--border); border-top: none; overflow: hidden; transition: border-color .2s; } #page-access .faq-item + .faq-cat { margin-top: 28px; border-top: 1px solid var(--border); } #page-access .faq-item.open { border-color: var(--border-strong); } #page-access .faq-q { width: 100%; padding: 28px 36px; background: var(--white); border: none; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 18px; font-family: 'Cormorant Garamond', serif; font-size: 25px; font-weight: 400; color: var(--navy); transition: background .2s; } #page-access .faq-q:hover { background: var(--ivory); } #page-access .faq-item.open .faq-q { background: var(--ivory); color: var(--persim); } #page-access .faq-plus { width: 26px; height: 26px; border: 1px solid var(--border-strong); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 19px; color: var(--cedar); transition: transform .25s; background: var(--ivory); } #page-access .faq-item.open .faq-plus { transform: rotate(45deg); background: var(--cedar); color: #fff; border-color: var(--cedar); } #page-access .faq-tag { margin-left: auto; font: 400 10px/1 'Jost', sans-serif; letter-spacing: .12em; text-transform: uppercase; padding: 4px 12px; border: 1px solid var(--border); border-radius: 20px; color: var(--light); white-space: nowrap; flex-shrink: 0; } #page-access .faq-a { display: none; padding: 0 32px 28px 76px; background: var(--white); font-size: 15px; color: var(--mid); line-height: 1.95; font-weight: 300; } #page-access .faq-item.open .faq-a { display: block; } #page-access .faq-a strong { color: var(--navy); font-weight: 500; } #page-access .faq-a ul { margin: 12px 0 4px 20px; display: flex; flex-direction: column; gap: 6px; } #page-access .faq-a li { font-size: 17px; color: var(--mid); } #page-access .faq-note { margin-top: 14px; padding: 12px 16px; background: var(--ivory); border: 1px solid var(--border); border-left: 3px solid var(--cedar); font-size: 16px; color: var(--mid); } #page-access .taxi-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 2px; background: var(--border); margin: 0 52px 52px; } #page-access .taxi-card { background: var(--white); padding: 28px 30px; } #page-access .taxi-icon { font-size: 28px; margin-bottom: 14px; display: block; } #page-access .taxi-name { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:500; color:var(--navy); margin-bottom:10px; } #page-access .taxi-body { font-size:14.5px; color:var(--mid); line-height:1.82; font-weight:300; } #page-access .taxi-body strong { color:var(--persim); font-weight:500; } #page-access .info-strip { background: var(--navy); padding: 16px 52px; display: flex; align-items: center; gap: 12px; } #page-access .info-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); flex-shrink: 0; animation: pulse 2s infinite; } #page-access @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.4)} } #page-access .info-strip-text { font-size: 16px; color: rgba(237,224,204,.65); } #page-access .info-strip-text strong { color: var(--cedar); font-weight: 500; } #page-access .booking-strip { background: var(--navy); padding: 54px 52px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; } #page-access .bs-icon { font-size: 28px; margin-bottom: 14px; } #page-access .bs-title { font-family:'Cormorant Garamond',serif; font-size:22px; color:var(--ivory); margin-bottom:10px; } #page-access .bs-desc { font-size: 17px; color: rgba(237,224,204,.52); line-height: 1.92; font-weight: 300; } #page-access .bs-cta { display: inline-block; margin-top: 14px; font: 400 11px/1 'Jost', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--cedar); border-bottom: 1px solid rgba(196,160,96,.4); padding-bottom: 2px; cursor: pointer; } #page-access .footer { background: var(--navy); color: var(--ivory); padding: 42px 52px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 38px; border-top: 1px solid rgba(255,255,255,.06); } #page-access .f-logo { font-family:'Cormorant Garamond',serif; font-size:22px; letter-spacing:.08em; margin-bottom:12px; } #page-access .f-tag { font-size:13px; color:rgba(237,224,204,.60); line-height:1.8; max-width:260px; font-weight:300; } #page-access .f-col-title { font:400 10px/1 'Jost',sans-serif; letter-spacing:.18em; text-transform:uppercase; color:rgba(237,224,204,.3); margin-bottom:14px; } #page-access .f-link { font-size:13px; color:rgba(237,224,204,.48); display:block; margin-bottom:10px; text-decoration:none; } #page-access .footb { background:#160E06; padding:14px 52px; display:flex; justify-content:space-between; font-size:11px; color:rgba(237,224,204,.22); } #page-access @media(max-width:900px) { .nav{padding:0 20px} .hero{padding:60px 24px 48px} .hero h1{font-size:44px} .stat-strip{grid-template-columns:repeat(3,1fr)} .tab-nav,.booking-strip{padding-left:24px;padding-right:24px} .map-wrap,.station-grid,.attr-grid,.daytrip-grid,.hl-row,.addr-block,.taxi-grid, .zone-label,.walk-list,.faq-section,.route-section,.gmap-wrap{margin-left:20px;margin-right:20px} .station-grid,.attr-grid,.daytrip-grid,.taxi-grid,.booking-strip,.footer{grid-template-columns:1fr} .hl-row{grid-template-columns:1fr} .sec-header{padding:48px 24px 32px} .footer{padding:36px 24px} .footb{padding:12px 24px;flex-direction:column;gap:4px} } :root { --navy: #1E160C; --slate: #2A1E10; --ivory: #EDE0CC; --persim: #A87830; --sage: #6A7A56; --cedar: #C4A060; --white: #F5EEDC; --ink: #1E2025; --mid: #48382A; --light: #8A8D95; --border: #DDD5C8; } #page-about .nav { background: var(--navy); padding: 0 52px; height: 58px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 20px rgba(0,0,0,.25); } #page-about .nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 21px; letter-spacing: .08em; color: var(--ivory); } .nav-links { display: flex; gap: 28px; align-items: center; } #page-about .nav-link { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: rgba(237,224,204,.6); text-decoration: none; transition: color .2s; } .nav-link:hover, .nav-link.active { color: var(--cedar); } #page-about .nav-cta { background: var(--persim); color: #fff; border: none; padding: 9px 22px; font: 500 11px/1 'Jost', sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; border-radius: 2px; } #page-about .hero::before { content: '森小屋'; position: absolute; right: 40px; bottom: -24px; font-family: 'Cormorant Garamond', serif; font-size: 200px; color: rgba(255,255,255,.04); line-height: 1; pointer-events: none; } #page-about .hero-eye { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--cedar); margin-bottom: 20px; } #page-about .hero h1 { font-family: 'Cormorant Garamond', serif; font-size: 64px; font-weight: 400; line-height: 1.05; margin-bottom: 24px; max-width: 720px; } .hero h1 em { font-style: italic; color: var(--cedar); } #page-about .hero-desc { font-size: 17px; color: rgba(237,224,204,.65); max-width: 600px; line-height: 1.85; margin-bottom: 36px; font-weight: 300; } .hero-tags { display: flex; gap: 10px; flex-wrap: wrap; } #page-about .hero-tag { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 7px 16px; border: 1px solid rgba(196,160,96,.35); color: var(--cedar); border-radius: 20px; } #page-about .tab-nav { background: var(--navy); padding: 0 52px; display: flex; gap: 0; overflow-x: auto; position: sticky; top: 58px; z-index: 90; border-bottom: 1px solid rgba(255,255,255,.07); scrollbar-width: none; } .tab-nav::-webkit-scrollbar { display: none; } #page-about .tab-btn { font: 400 11px/1 'Jost', sans-serif; letter-spacing: .13em; text-transform: uppercase; color: rgba(237,224,204,.4); padding: 17px 18px; cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; transition: all .2s; white-space: nowrap; } .tab-btn:hover { color: rgba(237,224,204,.78); } .tab-btn.active { color: var(--ivory); border-bottom-color: var(--persim); } #page-about .about-section { display: none; } #page-about .about-section.active { display: block; } .sec-header { padding: 68px 52px 38px; } #page-about .sec-eye { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--sage); margin-bottom: 12px; } #page-about .sec-header h2 { font-family: 'Cormorant Garamond', serif; font-size: 46px; font-weight: 400; color: var(--navy); margin-bottom: 16px; line-height: 1.1; } .sec-header h2 em { font-style: italic; color: var(--cedar); } #page-about .sec-header p { font-size: 16px; color: var(--mid); max-width: 680px; line-height: 1.85; font-weight: 300; } .hl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border); margin: 0 52px 52px; } .hl-dark { background: var(--navy); color: var(--ivory); padding: 38px 38px; } .hl-light { background: var(--white); color: var(--ink); padding: 38px 38px; } #page-about .hl-eye { font: 400 10px/1 'Jost', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--cedar); margin-bottom: 12px; } .hl-eye.sg { color: var(--sage); } #page-about .hl-title { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 400; margin-bottom: 16px; line-height: 1.2; } .hl-body { font-size: 16px; line-height: 1.88; font-weight: 300; } .hl-dark .hl-body { color: rgba(237,224,204,.62); } .hl-light .hl-body { color: var(--mid); } .hl-list { list-style: none; margin-top: 18px; } #page-about .hl-list li { font-size: 15.5px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.09); display: flex; gap: 12px; line-height: 1.55; font-weight: 300; } .hl-list.lt li { border-color: var(--border); color: var(--mid); } .hl-list.dk li { color: rgba(237,224,204,.65); } .hl-list li::before { content: '—'; color: var(--cedar); flex-shrink: 0; } #page-about .story-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; background: var(--border); margin: 0 52px 52px; } #page-about .story-card { background: var(--white); padding: 40px 36px; } #page-about .story-num { font-family: 'Cormorant Garamond', serif; font-size: 72px; color: rgba(196,160,96,.2); line-height: 1; margin-bottom: 8px; font-weight: 300; } #page-about .story-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--navy); margin-bottom: 12px; font-weight: 500; } .story-title em { font-style: italic; color: var(--cedar); } #page-about .story-body { font-size: 14.5px; color: var(--mid); line-height: 1.82; font-weight: 300; } #page-about .values-band { background: var(--navy); padding: 56px 52px; display: grid; grid-template-columns: repeat(4,1fr); gap: 40px; margin-bottom: 2px; } .val-icon { font-size: 28px; margin-bottom: 14px; } #page-about .val-title { font-family: 'Cormorant Garamond', serif; font-size: 21px; color: var(--ivory); margin-bottom: 8px; } #page-about .val-desc { font-size: 13.5px; color: rgba(237,224,204,.5); line-height: 1.8; font-weight: 300; } #page-about .photo-strip { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2px; background: var(--border); margin: 0 52px 52px; height: 340px; } #page-about .ph-block { overflow: hidden; position: relative; } #page-about .ph-block img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.82); transition: filter .4s; } .ph-block:hover img { filter: brightness(1); } #page-about .ph-lbl { position: absolute; bottom: 14px; left: 18px; font: 400 10px/1 'Jost', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(237,224,204,.75); } #page-about .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--border); margin: 0 52px 52px; } #page-about .team-card { background: var(--white); padding: 36px 32px; } #page-about .team-role { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--cedar); margin-bottom: 8px; } #page-about .team-name { font-family: 'Cormorant Garamond', serif; font-size: 24px; color: var(--navy); margin-bottom: 4px; } #page-about .team-name-jp { font-size: 12px; color: var(--sage); margin-bottom: 14px; letter-spacing: .03em; } #page-about .team-bio { font-size: 14px; color: var(--mid); line-height: 1.8; font-weight: 300; } #page-about .faq-wrap { margin: 0 52px 52px; } .faq-group { margin-bottom: 4px; } #page-about .faq-group-title { background: var(--navy); padding: 18px 32px; font: 400 11px/1 'Jost', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--cedar); } #page-about .faq-item { background: var(--white); border-bottom: 1px solid var(--border); } #page-about .faq-q { width: 100%; padding: 22px 32px; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 400; color: var(--navy); text-align: left; background: none; border: none; cursor: pointer; transition: color .2s; } .faq-q:hover { color: var(--cedar); } #page-about .faq-icon { font-size: 20px; color: var(--cedar); flex-shrink: 0; transition: transform .3s; line-height: 1; } .faq-item.open .faq-icon { transform: rotate(45deg); } #page-about .faq-a { display: none; padding: 0 32px 26px 32px; font-size: 14.5px; color: var(--mid); line-height: 1.85; font-weight: 300; max-width: 780px; } .faq-item.open .faq-a { display: block; } .faq-a strong { color: var(--navy); font-weight: 500; } .faq-a ul { margin: 10px 0 10px 18px; } .faq-a ul li { margin-bottom: 5px; } .final-cta { background: var(--persim); padding: 68px 52px; text-align: center; } .final-cta h2 { font-family:'Cormorant Garamond',serif; font-size:50px; font-weight:400; color:#fff; margin-bottom:14px; } .final-cta p { font-size:16px; color:rgba(255,255,255,.68); margin-bottom:34px; font-weight:300; } .cta-btn { background:#fff; color:var(--persim); border:none; padding:16px 42px; font:600 12px/1 'Jost',sans-serif; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; border-radius:2px; margin-right:14px; } .cta-btn2 { background:transparent; color:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.4); padding:16px 42px; font:400 12px/1 'Jost',sans-serif; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; border-radius:2px; } #page-about .footer { background: var(--navy); color: var(--ivory); padding: 42px 52px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 38px; border-top: 1px solid rgba(255,255,255,.06); } .f-logo { font-family:'Cormorant Garamond',serif; font-size:22px; letter-spacing:.08em; margin-bottom:12px; } .f-tag { font-size:13px; color:rgba(237,224,204,.60); line-height:1.8; max-width:260px; font-weight:300; } .f-col-title { font:400 10px/1 'Jost',sans-serif; letter-spacing:.18em; text-transform:uppercase; color:rgba(237,224,204,.3); margin-bottom:14px; } .f-link { font-size:13px; color:rgba(237,224,204,.68); display:block; margin-bottom:10px; cursor:pointer; } #page-about .footb { background:#160E06; padding:14px 52px; display:flex; justify-content:space-between; font-size:11px; color:rgba(237,224,204,.22); } #page-about .stat-band { background: var(--ivory); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 48px 52px; display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-bottom: 52px; } #page-about .stat-item { padding: 0 32px; border-right: 1px solid var(--border); } .stat-item:first-child { padding-left: 0; } .stat-item:last-child { border-right: none; } #page-about .stat-num { font-family: 'Cormorant Garamond', serif; font-size: 52px; font-weight: 300; color: var(--cedar); line-height: 1; margin-bottom: 6px; } #page-about .stat-label { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--light); } #page-about .stat-sub { font-size: 13px; color: var(--mid); margin-top: 4px; font-weight: 300; } #page-about .philosophy { background: var(--slate); margin: 0 52px 52px; padding: 60px 64px; position: relative; overflow: hidden; } #page-about .philosophy::before { content: '"'; position: absolute; top: -20px; left: 40px; font-family: 'Cormorant Garamond', serif; font-size: 240px; color: rgba(255,255,255,.04); line-height: 1; pointer-events: none; } #page-about .phil-eye { font: 400 10px/1 'Jost', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--cedar); margin-bottom: 20px; } #page-about .phil-quote { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 300; font-style: italic; color: var(--ivory); line-height: 1.4; max-width: 740px; margin-bottom: 24px; } #page-about .phil-attr { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(237,224,204,.35); } @media (max-width: 900px) { .nav { padding: 0 20px; } .hero { padding: 48px 20px 48px; } .hero h1 { font-size: 38px; } .story-grid, .values-band, .team-grid, .photo-strip { grid-template-columns: 1fr; } .stat-band { grid-template-columns: 1fr 1fr; } .hl-row { grid-template-columns: 1fr; } .faq-wrap, .sec-header, .philosophy { margin-left: 20px; margin-right: 20px; } .tab-nav { padding: 0 20px; } } #page-neighbourhood .hero, #page-neighbourhood .hero::before { content: '浅草'; position: absolute; right: 52px; top: 50%; transform: translateY(-50%); font-family: 'Cormorant Garamond', serif; font-size: 18rem; color: rgba(255,255,255,.03); line-height: 1; pointer-events: none; } #page-access .hero { position: relative; } #page-access .hero::before { content: '交通'; position: absolute; right: 52px; top: 50%; transform: translateY(-50%); font-family: 'Cormorant Garamond', serif; font-size: 18rem; color: rgba(255,255,255,.03); line-height: 1; pointer-events: none; } #page-neighbourhood .hero-breadcrumb, #page-access .hero-breadcrumb { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(237,224,204,.25); margin-bottom: 28px; display: block; } /* ═══════════════════════════════════════ RESPONSIVE — Mobile & Tablet ═══════════════════════════════════════ */ /* ── Tablet (≤1024px) ── */ @media (max-width: 1024px) { .nav { padding: 0 28px; } .nav-links { gap: 0; } .nav-link { padding: 0 12px; font-size: 10px; } .hero-inner { grid-template-columns: 1fr; gap: 2rem; padding: 0 28px 60px; } .hero-widget { display: none; } .hero h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); } .section { padding: 60px 28px; } .features-section { padding: 60px 28px; } .exp-section { padding: 60px 28px; } .reviews-section { padding: 60px 28px; } .cta-section { padding: 60px 28px; } .features-grid { grid-template-columns: repeat(2,1fr); } .exp-grid { grid-template-columns: repeat(2,1fr); } .rev-grid { grid-template-columns: repeat(2,1fr); } footer { padding: 40px 28px 20px; grid-template-columns: 1fr 1fr; gap: 28px; } .footb { padding: 12px 28px; } .fp-layout { grid-template-columns: 1fr; } .fp-legend { margin-top: 20px; } #page-neighbourhood .hero, #page-access .hero { padding: 90px 28px 56px !important; } } /* ── Mobile (≤768px) ── */ @media (max-width: 768px) { .nav { padding: 0 20px; height: 52px; } .nav-links { display: none; } .nav-logo { font-size: 18px; } .nav-cta { padding: 8px 16px; font-size: 10px; margin-left: 0; } /* Mobile hamburger hint */ .nav::after { content: '☰'; color: rgba(237,224,204,.6); font-size: 18px; cursor: pointer; margin-left: auto; margin-right: 12px; } .hero { min-height: 100svh; } .hero-inner { padding: 0 20px 52px; } .hero h1 { font-size: clamp(2rem, 8vw, 3rem); } .hero-sub { font-size: 13px; } .hero-btns { flex-direction: column; gap: 10px; } .btn-fill, .btn-outline { text-align: center; width: 100%; } .hero-scroll { display: none; } .hero-pager { left: 20px; bottom: 1.5rem; flex-wrap: wrap; gap: 4px; } .hp-btn { padding: 6px 10px 6px 0; } .hp-label { display: none; } .strip-track span { padding: .7rem 1.2rem; font-size: 8.5px; } .section { padding: 52px 20px; } .rooms-header { padding: 0 20px 36px; } .rooms-header-inner { flex-direction: column; gap: 1rem; } .section-body { text-align: left !important; max-width: 100% !important; } .room-tabs { padding: 0 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .room-tab { padding: 14px 14px; font-size: 9.5px; white-space: nowrap; } .room-slider-wrap { grid-template-columns: 1fr; } .room-info-panel { padding: 32px 20px; } .room-specs { grid-template-columns: 1fr 1fr; } .room-price-row { flex-direction: column; gap: 16px; align-items: flex-start; } .room-btns { flex-direction: row; width: 100%; } .btn-reserve, .btn-detail { flex: 1; text-align: center; padding: 12px 12px; font-size: 10px; } .room-amenities-bar { padding: 16px 20px; gap: 12px; } .features-section { padding: 52px 20px; } .features-top { flex-direction: column; gap: 1rem; } .features-grid { grid-template-columns: 1fr; } .feat { padding: 22px 20px; border-right: none !important; } .exp-section { padding: 52px 20px; } .exp-header { grid-template-columns: 1fr; gap: 1.5rem; } .exp-grid { grid-template-columns: 1fr; } .reviews-section { padding: 52px 20px; } .rev-grid { grid-template-columns: 1fr; } .cta-section { padding: 52px 20px; } .cta-section h2 { font-size: clamp(1.8rem, 6vw, 2.4rem); } .btn-white, .btn-woutline { display: block; width: 100%; text-align: center; margin: 0 0 10px; } .fp-section { padding: 32px 20px; } .fp-header { flex-direction: column; gap: 12px; } footer { grid-template-columns: 1fr; padding: 40px 20px 20px; } .footb { flex-direction: column; gap: 6px; text-align: center; padding: 12px 20px; } #page-neighbourhood .hero, #page-access .hero { padding: 80px 20px 48px !important; } } /* ── Focus styles (WCAG 2.2) ── */ :focus-visible { outline: 2px solid var(--cedar); outline-offset: 3px; border-radius: 2px; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--cedar); outline-offset: 3px; } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .strip-track { animation: none; } } /* ── Print ── */ @media print { .nav, .hero-pager, .hero-scroll, .strip, .hero-btns, .cta-section, .hero-widget { display: none !important; } .page { display: block !important; } body { background: white; color: black; } } /* Skip nav (accessibility) */ .skip-nav { position: fixed; top: -100%; left: 1rem; background: var(--persim); color: #fff; padding: 8px 16px; font: 500 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; z-index: 9999; text-decoration: none; transition: top .2s; } .skip-nav:focus { top: 1rem; } /* Back to top button */ .btt { position: fixed; bottom: 2rem; right: 2rem; width: 44px; height: 44px; background: var(--navy); border: 1px solid rgba(196,160,96,.3); color: var(--cedar); font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 150; opacity: 0; pointer-events: none; transition: all .3s; text-decoration: none; border-radius: 2px; } .btt.visible { opacity: 1; pointer-events: auto; } .btt:hover { background: var(--persim); border-color: var(--persim); color: #fff; } /* Toast notification */ .toast { position: fixed; bottom: 5rem; left: 50%; transform: translateX(-50%); background: var(--navy); color: var(--cedar); padding: 10px 24px; font: 400 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; border: 1px solid rgba(196,160,96,.3); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 500; white-space: nowrap; } .toast.show { opacity: 1; } /* Best rate badge in hero widget */ .hw-badge { display: flex; align-items: center; gap: 6px; background: rgba(168,120,48,.12); border: 1px solid rgba(168,120,48,.25); padding: 6px 10px; margin-bottom: 16px; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--persim); } .hw-badge::before { content: '✓'; font-weight: 700; } /* Room tab count badge */ .tab-guests { display: inline-block; background: rgba(196,160,96,.15); color: var(--cedar); font-size: 9px; padding: 2px 7px; border-radius: 10px; margin-left: 6px; vertical-align: middle; letter-spacing: .08em; } .room-tab.active .tab-guests { background: rgba(168,120,48,.2); color: var(--persim); } /* Booking open indicator */ .availability-dot { display: inline-block; width: 6px; height: 6px; background: #4CAF50; border-radius: 50%; margin-right: 6px; animation: pulse-green 2s ease-in-out infinite; } @keyframes pulse-green { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(1.3); } } /* Room card hover lift */ .suite-card { transition: transform .4s var(--ease), box-shadow .4s; } .suite-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,.25); } /* Price highlight on hover */ .room-price-row:hover .price-num { color: var(--persim); } /* Floor plan image smooth reveal */ .fp-img-wrap img { transition: opacity .4s ease; } /* ── Nav scrolled state ── */ .nav { transition: all .45s cubic-bezier(.25,.46,.45,.94); } .nav.scrolled { height: 52px; box-shadow: 0 4px 28px rgba(0,0,0,.32); } .nav.scrolled .nav-link { height: 52px; } /* ── Hero award badge ── */ .hero-award { display: inline-flex; align-items: center; gap: 8px; background: rgba(196,160,96,.12); border: 1px solid rgba(196,160,96,.3); padding: 6px 14px; margin-bottom: 1.4rem; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--cedar); } /* ── Review card stars pulse ── */ .rev-stars { letter-spacing: 3px; } /* ── Feature item number ── */ .feat-num { font-family: var(--serif); font-size: .75rem; color: var(--gold); letter-spacing: .08em; margin-bottom: 12px; display: block; } /* ── Eyebrow line decoration ── */ .eyebrow-cedar::before { background: var(--cedar); } /* ── Social link icons ── */ .f-soc { font-size: 9px; letter-spacing: .06em; } /* ── Page fade-in ── */ .page.active { animation: pageFadeIn .3s ease both; } @keyframes pageFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ── CTA band subtle texture ── */ .cta-section { position: relative; overflow: hidden; } .cta-section::before { content: '予約'; position: absolute; right: 5%; top: 50%; transform: translateY(-50%); font-family: var(--serif); font-size: 14rem; color: rgba(255,255,255,.05); pointer-events: none; line-height: 1; } /* ── Booking submit loading state ── */ .hw-submit:active { transform: scale(.98); } .hw-submit.loading { opacity: .7; pointer-events: none; } /* ── Spec icon alignment ── */ .spec-icon { line-height: 1; font-style: normal; } /* ── Room amenities bar icons ── */ .am-item::before { font-size: 15px; line-height: 1; } /* ── Tab nav scrollbar hide ── */ .room-tabs::-webkit-scrollbar { display: none; } .room-tabs { scrollbar-width: none; -ms-overflow-style: none; } /* ════════════════════════════════════════════ SUB-PAGE HEROES — single authoritative block Overrides global .hero { height:100vh } ════════════════════════════════════════════ */ #page-neighbourhood .hero, #page-access .hero, #page-about .hero { height: auto !important; min-height: 0 !important; display: block !important; align-items: initial !important; overflow: hidden; position: relative; background: var(--slate) !important; color: var(--ivory) !important; padding: 96px 52px 68px !important; } #page-neighbourhood .hero-bg, #page-access .hero-bg, #page-about .hero-bg { display: none !important; } #page-neighbourhood .hero-stats, #page-access .hero-stats { position: static !important; margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; } /* ── About Page Premium Hero ── */ .about-hero-premium { padding: 0 !important; } #page-about .about-hero-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; align-items: stretch; } #page-about .about-hero-left { padding: 96px 52px 68px; display: flex; flex-direction: column; justify-content: center; } #page-about .about-hero-right { background: rgba(0,0,0,.15); border-left: 1px solid rgba(255,255,255,.06); padding: 72px 52px; display: flex; flex-direction: column; justify-content: space-between; } /* Left side nav buttons */ .about-hero-nav { display: flex; flex-direction: column; gap: 0; margin-top: 36px; border-top: 1px solid rgba(196,160,96,.18); padding-top: 24px; } .ahn-btn { display: flex; align-items: center; gap: 18px; background: none; border: none; border-bottom: 1px solid rgba(196,160,96,.1); padding: 12px 0; cursor: pointer; text-align: left; transition: all .2s; width: 100%; } .ahn-btn:last-child { border-bottom: none; } .ahn-btn:hover .ahn-label { color: var(--cedar); } .ahn-btn.active .ahn-label { color: var(--ivory); } .ahn-btn.active .ahn-num { color: var(--persim); } .ahn-num { font-family: 'Cormorant Garamond', serif; font-size: 0.85rem; font-weight: 300; color: rgba(196,160,96,.35); width: 24px; flex-shrink: 0; transition: color .2s; } .ahn-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(237,224,204,.45); font-weight: 400; transition: color .2s; } /* Right side stats */ .about-hero-stat-stack { display: flex; flex-direction: column; gap: 0; } .ahs-item { padding: 14px 0; } .ahs-num { display: block; font-family: 'Cormorant Garamond', serif; font-size: 2.6rem; font-weight: 300; color: var(--cedar); line-height: 1; margin-bottom: 4px; } .ahs-label { font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: rgba(237,224,204,.3); font-weight: 400; } .ahs-div { height: 1px; background: rgba(196,160,96,.12); } /* Right side quote */ .about-hero-quote { margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(196,160,96,.15); } .ahq-mark { font-family: 'Cormorant Garamond', serif; font-size: 4rem; color: var(--cedar); opacity: .3; line-height: .6; margin-bottom: 12px; } .ahq-text { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-style: italic; color: rgba(237,224,204,.7); line-height: 1.6; font-weight: 300; margin-bottom: 14px; } .ahq-attr { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(237,224,204,.28); } /* ════════════════════════════════════════ HAMBURGER + MOBILE DRAWER ════════════════════════════════════════ */ .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; margin-left: auto; z-index: 1000; position: relative; } .hb-line { display: block; width: 22px; height: 1.5px; background: var(--ivory); transition: 0.3s ease; } /* Bagian ini dibiarkan kosong atau dihapus supaya tidak berubah menjadi X saat class .open aktif */ .hamburger.open .hb-line:nth-child(1) { transform: none; } .hamburger.open .hb-line:nth-child(2) { opacity: 1; } .hamburger.open .hb-line:nth-child(3) { transform: none; } .mobile-nav-drawer { position: fixed; top: 0; right: 0; width: min(320px, 85vw); height: 100%; background: var(--navy); z-index: 400; transform: translateX(100%); transition: transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: flex; flex-direction: column; overflow-y: auto; } .mobile-nav-drawer.open { transform: translateX(0); } .mnd-header { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 1.6rem; border-bottom: 1px solid rgba(168,146,106,0.15); } .mnd-logo { font-family: var(--serif); font-size: 1.1rem; color: var(--ivory); letter-spacing: 0.06em; } .mnd-logo span { color: var(--cedar); font-size: 0.75rem; letter-spacing: 0.22em; margin-left: 8px; font-family: var(--sans); font-weight: 300; } .mnd-close { background: none; border: none; color: rgba(237,224,204,0.45); font-size: 1.1rem; cursor: pointer; padding: 4px; transition: color 0.2s; } .mnd-close:hover { color: var(--ivory); } .mnd-links { flex: 1; padding: 1rem 0; } .mnd-link { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.6rem; color: rgba(237,224,204,0.62); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; transition: all 0.2s; border-bottom: 1px solid rgba(168,146,106,0.08); } .mnd-link:hover { color: var(--ivory); background: rgba(168,146,106,0.06); } .mnd-num { font-family: var(--serif); font-size: 0.75rem; color: rgba(168,146,106,0.35); font-weight: 300; width: 20px; } .mnd-footer { padding: 1.5rem 1.6rem; border-top: 1px solid rgba(168,146,106,0.15); } .mnd-cta { width: 100%; background: var(--persim); color: #fff; border: none; padding: 0.9rem; font: 500 0.7rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; margin-bottom: 1.2rem; transition: background 0.2s; } .mnd-cta:hover { background: #b3552e; } .mnd-contact { display: flex; flex-direction: column; gap: 4px; margin-bottom: 1rem; } .mnd-contact span { font-size: 0.72rem; color: rgba(237,224,204,0.3); } .mnd-langs { display: flex; gap: 1rem; } .mnd-langs a { font-size: 0.65rem; letter-spacing: 0.18em; color: rgba(237,224,204,0.28); text-decoration: none; transition: color 0.2s; } .mnd-langs a:hover { color: var(--cedar); } /* ── COMPREHENSIVE MOBILE RESPONSIVE ── */ @media (max-width: 768px) { /* Nav */ .hamburger { display: flex; } .nav-links { display: none !important; } .desktop-only { display: none !important; } .nav { padding: 0 16px; height: 52px; } .nav-logo { font-size: 1rem; padding-right: 10px; } .nav-logo span { display: none; } /* Hero */ .hero { min-height: 100svh; } .hero-inner { grid-template-columns: 1fr !important; padding: 0 20px 80px; gap: 2rem; } .hero h1 { font-size: clamp(2rem, 9vw, 3rem) !important; margin-bottom: 1rem; } .hero-sub { font-size: 13.5px; } .hero-btns { flex-direction: column; gap: 10px; } .btn-fill, .btn-outline { width: 100%; text-align: center; padding: 1rem; } .hero-widget { width: 100%; } .hw-row { grid-template-columns: 1fr; } .hero-pager { left: 20px; bottom: 1.5rem; flex-wrap: nowrap; gap: 0; overflow-x: auto; } .hp-label { display: none; } .hero-scroll { display: none; } /* Strip */ .strip-track span { padding: 0.75rem 1.2rem; font-size: 8.5px; } /* General sections */ .section { padding: 52px 20px; } .section-inner { max-width: 100%; } /* Rooms */ .rooms-section { padding: 52px 0 0; } .rooms-header { padding: 0 20px 36px; } .rooms-header-inner { flex-direction: column; gap: 1rem; } .section-body { text-align: left !important; max-width: 100% !important; } .room-tabs { padding: 0 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } .room-tab { padding: 14px 14px; font-size: 9.5px; } .room-slider-wrap { grid-template-columns: 1fr !important; } .slide img { min-height: 260px !important; } .room-slider { min-height: 260px !important; } .room-info-panel { min-height: 0 !important; padding: 28px 20px; } .room-specs { grid-template-columns: 1fr 1fr; } .room-price-row { flex-direction: column; gap: 14px; align-items: flex-start; } .room-btns { flex-direction: row; width: 100%; } .btn-reserve, .btn-detail { flex: 1; text-align: center; font-size: 10px; padding: 12px 8px; } .room-amenities-bar { padding: 16px 20px; gap: 10px; flex-wrap: wrap; } .am-item { font-size: 10.5px; } /* Floor plans */ .fp-section { padding: 28px 20px; } .fp-header { flex-direction: column; gap: 10px; } .fp-layout { grid-template-columns: 1fr !important; } .fp-legend { margin-top: 1rem; } /* Features */ .features-section { padding: 52px 20px; } .features-top { flex-direction: column; gap: 1rem; } .features-grid { grid-template-columns: 1fr !important; } .feat { padding: 20px 18px; border-right: none !important; } /* Experiences */ .exp-section { padding: 52px 20px; } .exp-header { grid-template-columns: 1fr; gap: 1.2rem; } .exp-grid { grid-template-columns: 1fr !important; } /* Reviews */ .reviews-section { padding: 52px 20px; } .rev-grid { grid-template-columns: 1fr !important; } /* CTA */ .cta-section { padding: 52px 20px; } .btn-white, .btn-woutline { display: block; width: 100%; text-align: center; margin: 0 0 10px; } /* Footer */ footer { grid-template-columns: 1fr !important; padding: 40px 20px 20px; gap: 2rem; } .footb { flex-direction: column; gap: 6px; text-align: center; padding: 12px 20px; } .footer-langs { flex-direction: row; flex-wrap: wrap; } .f-socials { flex-wrap: wrap; } /* Sub-page heroes */ #page-neighbourhood .hero, #page-access .hero, #page-about .hero { padding: 80px 20px 48px !important; } /* About premium hero */ .about-hero-inner { grid-template-columns: 1fr !important; } .about-hero-right { border-left: none; border-top: 1px solid rgba(255,255,255,0.06); } .about-hero-stat-stack { flex-direction: row; flex-wrap: wrap; gap: 0; } .ahs-item { padding: 12px 16px 12px 0; } .ahs-div { display: none; } .ahs-num { font-size: 2rem; } /* Section titles */ h2.section-title { font-size: clamp(1.8rem, 7vw, 2.6rem); } /* Typography */ .hero-eyebrow { font-size: 9px; } .eyebrow { font-size: 9px; } } /* Tablet breakpoint */ @media (min-width: 769px) and (max-width: 1024px) { .nav { padding: 0 32px; } .hero-inner { gap: 2rem; padding: 0 32px 60px; } .hero-widget { min-width: 300px; } .section { padding: 64px 32px; } .section-inner { max-width: 100%; } .rooms-header { padding: 0 32px 36px; } .features-grid { grid-template-columns: repeat(2, 1fr); } .exp-grid { grid-template-columns: repeat(2, 1fr); } .rev-grid { grid-template-columns: repeat(2, 1fr); } footer { grid-template-columns: 1fr 1fr; padding: 40px 32px; } .fp-layout { gap: 24px; } } /* ── Morning Guide Strip ── */ .morning-guide-strip { background: var(--navy); border-top: 1px solid rgba(168,146,106,0.15); padding: 36px 52px; } .mgs-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 2rem; } .mgs-icon { font-size: 2.2rem; flex-shrink: 0; width: 56px; height: 56px; background: rgba(168,146,106,0.12); border: 1px solid rgba(168,146,106,0.25); display: flex; align-items: center; justify-content: center; } .mgs-content { flex: 1; } .mgs-title { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; color: var(--ivory); margin-bottom: 6px; } .mgs-desc { font-size: 12.5px; color: rgba(237,224,204,0.48); line-height: 1.75; font-weight: 300; max-width: 600px; } .mgs-cta { background: transparent; border: 1px solid rgba(168,146,106,0.35); color: var(--cedar); padding: 0.75rem 1.5rem; font: 400 10px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; text-decoration: none; white-space: nowrap; transition: all 0.25s; display: inline-block; flex-shrink: 0; } .mgs-cta:hover { background: rgba(168,146,106,0.1); border-color: var(--cedar); } @media (max-width: 768px) { .morning-guide-strip { padding: 28px 20px; } .mgs-inner { flex-direction: column; align-items: flex-start; gap: 1.2rem; } .mgs-cta { width: 100%; text-align: center; } } /* ════════════════════════════════════════ TYPOGRAPHY UPLIFT — readability fix ════════════════════════════════════════ */ /* Room info panel — bigger, more readable */ .room-badge { font-size: 10.5px !important; letter-spacing: .13em !important; padding: 6px 16px !important; font-weight: 500 !important; } .room-info-panel h2 { font-size: clamp(2rem, 3.5vw, 2.6rem) !important; margin-bottom: 6px !important; line-height: 1.1 !important; color: var(--navy) !important; } .room-sub { font-size: 15px !important; color: #5C4A1A !important; opacity: 1 !important; margin-bottom: 20px !important; letter-spacing: .02em !important; } .room-desc { font-size: 16px !important; line-height: 1.9 !important; color: #3A3028 !important; opacity: 1 !important; margin-bottom: 28px !important; } /* Spec cards — bigger labels and values */ .spec { padding: 13px 14px !important; } .spec-lbl { font-size: 10px !important; letter-spacing: .12em !important; color: var(--ink) !important; opacity: 0.45 !important; margin-bottom: 4px !important; font-weight: 500 !important; } .spec-val { font-size: 14.5px !important; font-weight: 600 !important; color: var(--ink) !important; } /* Price block */ .price-from { font-size: 11px !important; letter-spacing: .12em !important; color: var(--ink) !important; opacity: 0.5 !important; margin-bottom: 5px !important; } .price-num { font-size: 3.2rem !important; font-family: var(--serif) !important; font-weight: 300 !important; line-height: 1 !important; color: var(--persim) !important; } .price-per { font-size: 12px !important; color: var(--ink) !important; opacity: 0.5 !important; margin-top: 4px !important; } /* Reserve / Detail buttons — more prominent */ .btn-reserve { background: var(--gold) !important; color: #fff !important; padding: 14px 28px !important; font-size: 11px !important; letter-spacing: .14em !important; font-weight: 600 !important; border-radius: 2px !important; } .btn-detail { color: var(--ink) !important; border: 1.5px solid var(--border) !important; padding: 12px 22px !important; font-size: 10.5px !important; letter-spacing: .12em !important; opacity: 1 !important; } .btn-detail:hover { border-color: var(--navy) !important; color: var(--navy) !important; } /* Room price row spacing */ .room-price-row { padding-top: 22px !important; margin-top: 4px !important; gap: 20px !important; } /* Floor plan section */ .fp-section { padding: 56px 52px !important; } .fp-title { font-size: 28px !important; font-weight: 400 !important; color: var(--navy) !important; margin-bottom: 8px !important; } .fp-sub { font-size: 13.5px !important; color: var(--ink) !important; opacity: 0.55 !important; letter-spacing: .04em !important; } .fp-badge { font-size: 11px !important; padding: 9px 18px !important; letter-spacing: .14em !important; } .fp-legend-title { font-size: 17px !important; font-weight: 500 !important; margin-bottom: 12px !important; color: var(--navy) !important; } .fp-room-item { padding: 12px 14px !important; margin-bottom: 0 !important; } .fp-room-name { font-size: 14px !important; font-weight: 600 !important; color: var(--ink) !important; margin-bottom: 2px !important; } .fp-room-note { font-size: 12px !important; color: var(--ink) !important; opacity: 0.55 !important; line-height: 1.5 !important; } .fp-room-icon { font-size: 16px !important; } .fp-disclaimer { font-size: 12px !important; color: var(--ink) !important; opacity: 0.48 !important; line-height: 1.65 !important; padding: 14px 16px !important; } /* Room info panel padding */ .room-info-panel { padding: 52px 48px !important; } /* Amenities bar text */ .am-item { font-size: 12px !important; font-weight: 400 !important; } /* Room specs grid */ .room-specs { gap: 10px !important; margin-bottom: 28px !important; } /* Room panel overall spacing */ .room-price-row { border-top: 1.5px solid var(--border) !important; } /* ── Global readability improvements ── */ body { font-size: 15px !important; line-height: 1.75 !important; -webkit-font-smoothing: antialiased !important; } /* Section eyebrows — more visible */ .eyebrow { font-size: 10.5px !important; letter-spacing: .28em !important; font-weight: 500 !important; margin-bottom: 14px !important; } /* Section title — clearer hierarchy */ h2.section-title { font-size: clamp(2rem, 3.8vw, 3rem) !important; margin-bottom: 18px !important; line-height: 1.12 !important; } /* Section body text */ .section-body { font-size: 15px !important; line-height: 1.9 !important; } /* Features */ .feat-title { font-size: 19px !important; margin-bottom: 10px !important; } .feat-desc { font-size: 13.5px !important; line-height: 1.8 !important; opacity: 0.6 !important; } /* Reviews */ .rev-text { font-size: 14.5px !important; line-height: 1.75 !important; margin-bottom: 16px !important; } .rev-who { font-size: 15px !important; } .rev-loc { font-size: 13px !important; } /* Experience cards */ .exp-title { font-size: 20px !important; } .exp-title-jp { font-size: 13.5px !important; margin-bottom: 10px !important; } .exp-desc { font-size: 13px !important; line-height: 1.8 !important; } /* Booking widget — more readable */ .hw-title { font-size: 20px !important; margin-bottom: 6px !important; } .hw-sub { font-size: 11px !important; margin-bottom: 22px !important; padding-bottom: 18px !important; } .hw-label { font-size: 10px !important; letter-spacing: .28em !important; font-weight: 600 !important; } .hw-input { font-size: 14.5px !important; padding: 10px 12px !important; } .hw-submit { padding: 13px !important; font-size: 11px !important; letter-spacing: .2em !important; font-weight: 600 !important; } /* Hero text */ .hero-eyebrow { font-size: 10.5px !important; letter-spacing: .28em !important; } .hero-sub { font-size: 15px !important; line-height: 1.82 !important; } /* Marquee strip — bigger text */ .strip-track span { font-size: 10.5px !important; letter-spacing: .28em !important; } /* Room tab labels */ .room-tab { font-size: 11.5px !important; padding: 18px 24px !important; letter-spacing: .12em !important; } /* ════════════════════════════════════════ HERO — FULL VISIBILITY OVERHAUL Benchmark: MIMARU layout clarity ════════════════════════════════════════ */ /* Stronger overlay for text legibility */ .hero-bg-slide::after { background: linear-gradient( 160deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.15) 35%, rgba(0,0,0,.65) 70%, rgba(0,0,0,.90) 100% ) !important; } /* Hero layout — tighter, more focused */ .hero-inner { padding: 0 52px 90px !important; gap: 2.5rem !important; align-items: flex-end !important; } /* Eyebrow — visible, clear */ .hero-eyebrow { font-size: 11px !important; letter-spacing: .32em !important; font-weight: 500 !important; margin-bottom: 20px !important; opacity: 1 !important; display: flex !important; align-items: center !important; gap: 12px !important; } .hero-eyebrow::before { width: 40px !important; height: 1.5px !important; } /* H1 — large and dominant */ .hero h1 { font-size: clamp(3.2rem, 6.5vw, 5.5rem) !important; font-weight: 300 !important; line-height: 1.05 !important; letter-spacing: -.01em !important; margin-bottom: 22px !important; color: #fff !important; } .hero h1 em { font-style: italic !important; color: var(--cedar) !important; } /* Sub text — clearly readable */ .hero-sub { font-size: 16px !important; line-height: 1.78 !important; color: rgba(255,255,255,.72) !important; margin-bottom: 36px !important; font-weight: 300 !important; max-width: 520px !important; letter-spacing: .01em !important; } /* Hero buttons — prominent */ .btn-fill { padding: 15px 36px !important; font-size: 11.5px !important; letter-spacing: .18em !important; font-weight: 600 !important; box-shadow: 0 4px 20px rgba(0,0,0,.35) !important; } .btn-outline { padding: 15px 30px !important; font-size: 11.5px !important; letter-spacing: .18em !important; border: 1.5px solid rgba(255,255,255,.45) !important; } /* Hero pager — more visible labels */ .hp-label { font-size: 10px !important; letter-spacing: .18em !important; display: flex !important; flex-direction: column !important; gap: 3px !important; } .hp-btn.active .hp-label { color: rgba(255,255,255,.90) !important; } .hp-jp { font-size: 9px !important; letter-spacing: .14em !important; } /* Booking widget — polish */ .hero-widget { padding: 28px 26px !important; backdrop-filter: blur(24px) !important; } .hw-title { font-size: 21px !important; font-weight: 400 !important; margin-bottom: 5px !important; } .hw-sub { font-size: 10.5px !important; letter-spacing: .22em !important; padding-bottom: 18px !important; margin-bottom: 20px !important; } .hw-label { font-size: 10px !important; letter-spacing: .32em !important; font-weight: 600 !important; margin-bottom: 6px !important; } .hw-input { font-size: 14px !important; padding: 11px 13px !important; } .hw-submit { padding: 14px !important; font-size: 11.5px !important; letter-spacing: .22em !important; font-weight: 700 !important; margin-top: 8px !important; } /* Progress bar — more visible */ .hero-progress { height: 3px !important; } /* Scroll cue — slightly bigger */ .hero-scroll-line { height: 44px !important; } .hero-scroll span { font-size: 8.5px !important; letter-spacing: .36em !important; } /* ── Sub-page hero text — visibility fix ── */ #page-neighbourhood .hero-eye, #page-access .hero-eye, #page-about .hero-eye { font-size: 11px !important; letter-spacing: .28em !important; font-weight: 500 !important; margin-bottom: 20px !important; color: var(--cedar) !important; opacity: 1 !important; } #page-neighbourhood .hero h1, #page-access .hero h1 { font-size: clamp(2.8rem, 5.5vw, 4.5rem) !important; font-weight: 300 !important; line-height: 1.08 !important; color: #fff !important; margin-bottom: 18px !important; } #page-neighbourhood .hero h1 em, #page-access .hero h1 em { color: var(--cedar) !important; } #page-neighbourhood .hero-desc, #page-access .hero-desc { font-size: 16px !important; line-height: 1.78 !important; color: rgba(255,255,255,.65) !important; max-width: 540px !important; font-weight: 300 !important; } #page-neighbourhood .hero-breadcrumb, #page-access .hero-breadcrumb { font-size: 10px !important; letter-spacing: .28em !important; color: rgba(255,255,255,.28) !important; margin-bottom: 28px !important; } /* Sub-page hero tags */ #page-neighbourhood .hero-tag { font-size: 10.5px !important; letter-spacing: .1em !important; padding: 7px 16px !important; } /* About hero */ #page-about .about-hero-left { padding: 80px 52px 64px !important; } #page-about .hero-eye { font-size: 11px !important; letter-spacing: .28em !important; font-weight: 500 !important; color: var(--cedar) !important; margin-bottom: 20px !important; } #page-about .hero h1 { font-size: clamp(2.6rem, 4.5vw, 4rem) !important; line-height: 1.08 !important; color: #fff !important; margin-bottom: 18px !important; } #page-about .hero-desc { font-size: 15.5px !important; line-height: 1.78 !important; color: rgba(255,255,255,.62) !important; } .ahn-label { font-size: 11.5px !important; letter-spacing: .14em !important; } .ahn-num { font-size: 14px !important; } .ahs-num { font-size: 2.8rem !important; } .ahs-label { font-size: 10px !important; letter-spacing: .24em !important; } .ahq-text { font-size: 1.25rem !important; line-height: 1.65 !important; } /* ════════════════════════════════════════ CONTRAST FIXES & EYEBROW OVERRIDE ════════════════════════════════════════ */ .eyebrow { color: #4A5C45 !important; font-size: 12px !important; } .eyebrow-cedar { color: var(--cedar) !important; } /* ════════════════════════════════════════ FLOOR PLAN SLIDE STYLES ════════════════════════════════════════ */ .slide-fp .fp-slide-inner { width: 100%; height: 100%; min-height: 520px; background: #F8F5EE; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px 24px; position: relative; } .slide-fp .fp-slide-inner img { width: 100%; max-height: 440px; object-fit: contain; display: block; } .fp-slide-badge { position: absolute; top: 16px; left: 16px; background: #C4A060; color: #fff; font: 500 9px/1 'Jost', sans-serif; letter-spacing: .2em; text-transform: uppercase; padding: 5px 12px; border-radius: 2px; z-index: 10; } .fp-slide-svg { width: 100%; max-height: 420px; } .room-slider.fp-active { background: #F5EEDC !important; } /* Square dot for floor plan */ .sl-dot.fp-dot { width: 8px; height: 8px; border-radius: 1px; background: rgba(196,160,96,.35); } .sl-dot.fp-dot.active { background: var(--cedar); } /* === INJECTED FROM MORIKOYA === */ /* ══ SECTION VISIBILITY — FORCE CORRECT ══ */ #page-neighbourhood .section { display: none !important; } #page-neighbourhood .section.active { display: block !important; } #page-access .section { display: none !important; } #page-access .section.active { display: block !important; } #page-about .about-section { display: none !important; } #page-about .about-section.active { display: block !important; } /* ══════════════════════════════════════════════════════ UPGRADE PACK — Reserve CTA + Mobile + Contrast ══════════════════════════════════════════════════════ */ /* ── 1. NAV RESERVE → MIMARU-style prominent BOOK button ── */ .nav-cta { background: var(--cedar) !important; color: #fff !important; border: none !important; padding: 11px 28px !important; font: 600 11.5px/1 var(--sans) !important; letter-spacing: .22em !important; text-transform: uppercase !important; cursor: pointer !important; border-radius: 3px !important; transition: background .2s, transform .15s, box-shadow .2s !important; flex-shrink: 0 !important; margin-left: 24px !important; box-shadow: 0 2px 12px rgba(168,146,106,.35) !important; } .nav-cta:hover { background: #8a7450 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 18px rgba(168,146,106,.45) !important; } .nav-cta:active { transform: translateY(0) !important; } /* ── 2. MOBILE: hero widget hidden on small screens ── */ @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr !important; padding: 0 24px 80px !important; align-content: flex-end !important; } .hero-widget { display: none !important; } .hero-inner > div:first-child { max-width: 100%; } .hero h1 { font-size: clamp(2.2rem, 9vw, 3.5rem) !important; } .hero-sub { font-size: 14px !important; max-width: 480px; } .hero-btns { flex-direction: row !important; gap: 12px; flex-wrap: wrap; } .btn-fill, .btn-outline { padding: 14px 24px !important; font-size: 11px !important; } .nav-cta { display: flex !important; } } @media (max-width: 768px) { /* Nav CTA always visible on mobile too */ .nav-cta { padding: 9px 18px !important; font-size: 10px !important; margin-left: 8px !important; letter-spacing: .18em !important; } /* Hero */ .hero-inner { padding: 0 20px 72px !important; } .hero h1 { font-size: clamp(2rem, 10vw, 3rem) !important; line-height: 1.1 !important; } .hero-award { font-size: 9px !important; } .hero-eyebrow { font-size: 9px !important; } .hero-tags { gap: 6px !important; } .hero-tag { font-size: 10px !important; padding: 7px 13px !important; } /* Sections */ .sec-header { padding: 48px 20px 28px !important; } .hl-row { flex-direction: column !important; gap: 16px; } /* Room tabs */ .room-tab { font-size: 10px !important; padding: 13px 12px !important; } /* Booking strip */ .strip-track span { font-size: 8px !important; padding: .6rem 1rem !important; } /* Access tab nav */ .tab-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; padding: 0 20px; } .tab-btn { padding: 14px 14px !important; font-size: 10px !important; white-space: nowrap; } /* About */ .story-grid { grid-template-columns: 1fr !important; } .story-card { padding: 32px 24px !important; } /* Floor plan */ .fp-layout { grid-template-columns: 1fr !important; } .fp-img-wrap img { max-height: 280px; object-fit: contain; } /* Neighbourhood */ .life-banner { flex-wrap: wrap; gap: 8px; padding: 12px 20px !important; } .life-badge-sm { margin-left: 0 !important; } /* Group experiences */ .grp-panels { padding: 0 20px 40px !important; } } /* ── 3. Hero text auto-contrast ── */ /* Default hero text = white (for dark slides) */ .hero-inner .hero-award { color: var(--cedar); } .hero-inner h1 { color: var(--ivory); } .hero-inner h1 em { color: var(--cedar); } .hero-inner .hero-eyebrow { color: rgba(237,224,204,.7); } .hero-inner .hero-sub { color: rgba(237,224,204,.85); } /* When slide is "bright" - added via JS on .hero-bg-slide.active.bright */ .hero.text-dark .hero-inner .hero-award { color: var(--navy); } .hero.text-dark .hero-inner h1 { color: var(--navy); } .hero.text-dark .hero-inner h1 em { color: #8B4513; } .hero.text-dark .hero-inner .hero-eyebrow { color: rgba(27,31,48,.75); } .hero.text-dark .hero-inner .hero-sub { color: rgba(27,31,48,.85); } .hero.text-dark .btn-outline { border-color: var(--navy) !important; color: var(--navy) !important; } .hero.text-dark .hero-tag { border-color: rgba(43,48,64,.35) !important; color: var(--navy) !important; } .hero.text-dark .hero-pager { filter: invert(1) hue-rotate(180deg); } /* ── Hero text readability — text-shadow on all slides ── */ .hero-inner h1 { text-shadow: 0 2px 24px rgba(0,0,0,.65), 0 1px 6px rgba(0,0,0,.5) !important; } .hero-inner h1 em { text-shadow: 0 2px 20px rgba(0,0,0,.55) !important; } .hero-inner .hero-sub { text-shadow: 0 1px 12px rgba(0,0,0,.7), 0 1px 4px rgba(0,0,0,.5) !important; } .hero-inner .hero-eyebrow { text-shadow: 0 1px 8px rgba(0,0,0,.6) !important; } .hero-inner .hero-award { text-shadow: 0 1px 6px rgba(0,0,0,.5) !important; } /* ── Per-slide dark overlay for bright slides ── */ .hero-bg-slide.slide-bright::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.32); pointer-events: none; z-index: 1; } /* ══════════════════════════════════════════════════════ CONTRAST OVERHAUL — WCAG AA compliance Target: all text ≥ 4.5:1 ratio ══════════════════════════════════════════════════════ */ /* ── Hero text (applies over all slides) ── */ .hero-inner .hero-eyebrow { color: rgba(237,224,204,.90) !important; text-shadow: 0 1px 12px rgba(0,0,0,.85), 0 2px 4px rgba(0,0,0,.7) !important; } .hero-inner .hero-award { color: var(--cedar) !important; text-shadow: 0 1px 8px rgba(0,0,0,.9) !important; } .hero-inner h1 { color: #FDFCF9 !important; text-shadow: 0 2px 32px rgba(0,0,0,.80), 0 1px 8px rgba(0,0,0,.70) !important; } .hero-inner h1 em { color: #D4B88A !important; text-shadow: 0 2px 24px rgba(0,0,0,.75) !important; } .hero-inner .hero-sub { color: rgba(253,252,249,.92) !important; text-shadow: 0 1px 16px rgba(0,0,0,.85), 0 1px 6px rgba(0,0,0,.65) !important; } /* ── DISCOVER ASAKUSA button (btn-outline) ── */ .btn-outline { color: #FDFCF9 !important; border: 1.5px solid rgba(253,252,249,.70) !important; background: rgba(0,0,0,.15) !important; backdrop-filter: blur(4px) !important; font-weight: 400 !important; letter-spacing: .18em !important; } .btn-outline:hover { border-color: rgba(253,252,249,.95) !important; background: rgba(0,0,0,.28) !important; } /* ── Hero tags ── */ .hero-tag { color: rgba(253,252,249,.88) !important; border-color: rgba(253,252,249,.35) !important; background: rgba(0,0,0,.28) !important; backdrop-filter: blur(6px) !important; text-shadow: 0 1px 4px rgba(0,0,0,.6) !important; font-size: 11px !important; letter-spacing: .10em !important; } /* ── Booking widget — full contrast upgrade ── */ .hw-badge { background: rgba(196,160,96,.18) !important; border: 1px solid rgba(196,160,96,.50) !important; color: #D4B88A !important; font-size: 9.5px !important; letter-spacing: .16em !important; } .hw-title { color: #FDFCF9 !important; font-size: 20px !important; } .hw-sub { color: rgba(237,224,204,.85) !important; font-size: 9.5px !important; letter-spacing: .18em !important; border-bottom-color: rgba(196,160,96,.30) !important; } .availability-dot { background: #5DBB7A !important; box-shadow: 0 0 6px rgba(93,187,122,.6) !important; } .hw-label { color: rgba(237,224,204,.75) !important; font-size: 9px !important; letter-spacing: .18em !important; } .hw-input { color: #FDFCF9 !important; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(196,160,96,.35) !important; } .hw-input::placeholder { color: rgba(237,224,204,.45) !important; } .hw-input option { background: #2B3040; color: #FDFCF9; } .hw-submit { background: var(--cedar) !important; color: #fff !important; font-size: 11px !important; letter-spacing: .22em !important; font-weight: 600 !important; padding: 14px !important; } /* ── Booking widget container ── */ .hero-widget { background: rgba(20,15,8,.92) !important; border: 1px solid rgba(196,160,96,.30) !important; backdrop-filter: blur(20px) !important; } /* ── Also fix nav-link contrast ── */ .nav-link { color: rgba(237,224,204,.75) !important; font-size: 12px !important; letter-spacing: .12em !important; } .nav-link.page-active, .nav-link:hover { color: #FDFCF9 !important; } /* ── Slide 3 (Kimono Street) — extra dark base layer ── */ .hero-bg-slide.slide-bright::before { background: rgba(0,0,0,.42) !important; } /* ── Language Switcher Styles ── */ #mk-lang-sw { display: flex; align-items: center; gap: 2px; margin-right: 12px; border: 1px solid rgba(196,160,96,.25); border-radius: 3px; overflow: hidden; flex-shrink: 0; } .mk-lang-btn { background: transparent; border: none; color: rgba(237,224,204,.55); font: 500 10px/1 'Jost', sans-serif; letter-spacing: .08em; padding: 8px 12px; cursor: pointer; transition: all .2s; text-transform: uppercase; white-space: nowrap; } .mk-lang-btn:hover { background: rgba(196,160,96,.15); color: var(--cedar); } .mk-lang-btn.mk-lang-active { background: var(--cedar); color: #fff; } @media (max-width: 768px) { #mk-lang-sw { margin-right: 6px; } .mk-lang-btn { padding: 6px 7px; font-size: 9px; } } /* ── Pager: remove background box from labels ── */ #heroPager .hp-btn { background: none !important; border: none !important; outline: none !important; box-shadow: none !important; } #heroPager .hp-btn.active, #heroPager .hp-btn:hover { background: none !important; } #heroPager .hp-btn + .hp-btn { border-left: 1px solid rgba(196,160,96,.15) !important; } /* ── Rickshaw / bright slide fixes ── */ /* Keep hero tags always white — don't invert on bright slides */ .hero-tag { color: rgba(253,252,249,.92) !important; border-color: rgba(253,252,249,.40) !important; background: rgba(0,0,0,.35) !important; backdrop-filter: blur(8px) !important; } /* Override the text-dark tag rule */ .hero.text-dark .hero-tag { color: rgba(253,252,249,.92) !important; border-color: rgba(253,252,249,.40) !important; background: rgba(0,0,0,.38) !important; } /* Stronger dark overlay for bright slides */ .hero-bg-slide.slide-bright::before { background: rgba(0,0,0,.52) !important; } /* For bright slides: push gradient darker on left to protect text */ .hero.text-dark .hero-inner { background: linear-gradient( to right, rgba(0,0,0,.45) 0%, rgba(0,0,0,.20) 55%, rgba(0,0,0,.0) 100% ) !important; } /* ══════════════════════════════════════════════════════ MOBILE OVERHAUL — Full audit fix iPhone SE (375px) → iPhone Pro Max (430px) ══════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── 1. NAV: language switcher compact ── */ #mk-lang-sw { gap: 0 !important; margin-right: 4px !important; } .mk-lang-btn { padding: 5px 6px !important; font-size: 8.5px !important; letter-spacing: .04em !important; } /* ── 2. NAV RESERVE: prominent gold button ── */ .nav-cta { padding: 9px 14px !important; font-size: 10px !important; letter-spacing: .14em !important; margin-left: 4px !important; box-shadow: 0 2px 10px rgba(168,146,106,.5) !important; font-weight: 700 !important; } /* ── 3. HERO: full-width mobile booking CTA below content ── */ .hero-inner { grid-template-columns: 1fr !important; padding: 0 20px 100px !important; gap: 24px !important; align-content: flex-end !important; } .hero-widget { display: none !important; } /* Mobile RESERVE strip at bottom of hero */ .hero-mobile-cta { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(15,10,5,.92); backdrop-filter: blur(16px); padding: 16px 20px; display: flex !important; align-items: center; justify-content: space-between; gap: 12px; z-index: 8; border-top: 1px solid rgba(196,160,96,.25); } .hero-mobile-cta-text { font-family: 'Jost', sans-serif; font-size: 11px; color: rgba(237,224,204,.75); letter-spacing: .08em; text-transform: uppercase; } .hero-mobile-cta-text strong { display: block; font-size: 13px; color: var(--cedar); letter-spacing: .06em; margin-bottom: 2px; } .hero-mobile-reserve { background: var(--cedar); color: #fff; border: none; padding: 13px 24px; font: 700 11px/1 'Jost', sans-serif; letter-spacing: .2em; text-transform: uppercase; border-radius: 3px; cursor: pointer; white-space: nowrap; flex-shrink: 0; box-shadow: 0 2px 12px rgba(168,146,106,.5); } /* ── 4. HERO text larger ── */ .hero h1 { font-size: clamp(2.2rem, 9vw, 2.8rem) !important; line-height: 1.12 !important; } .hero-sub { font-size: 14px !important; line-height: 1.7 !important; } .hero-award { font-size: 9px !important; letter-spacing: .15em !important; } .hero-eyebrow { font-size: 10px !important; letter-spacing: .14em !important; } /* Hero tags: 2 per row */ .hero-tags { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 20px !important; } .hero-tag { font-size: 10px !important; padding: 9px 12px !important; text-align: center !important; justify-content: center !important; } /* ── 5. ROOM TABS: LARGER + VISIBLE ── */ .room-tabs { padding: 0 16px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; gap: 0 !important; } .room-tabs::-webkit-scrollbar { display: none; } .room-tab { font-size: 13px !important; letter-spacing: .10em !important; padding: 16px 18px !important; white-space: nowrap !important; color: rgba(237,224,204,.65) !important; font-weight: 500 !important; flex-shrink: 0 !important; } .room-tab.active { color: var(--ivory) !important; font-weight: 600 !important; } .tab-guests { font-size: 10px !important; padding: 3px 7px !important; margin-left: 6px !important; } /* ── 6. ROOM PANELS ── */ .room-info-panel { padding: 28px 20px !important; } .room-name { font-size: 24px !important; } .room-type-label { font-size: 10px !important; } .room-price { font-size: 28px !important; } .room-price-per { font-size: 11px !important; } .spec-val { font-size: 16px !important; } .spec-lbl { font-size: 11px !important; } .btn-reserve { padding: 14px 20px !important; font-size: 11px !important; letter-spacing: .18em !important; } .btn-detail { padding: 14px 16px !important; font-size: 10px !important; } /* ── 7. STRIP TICKER: readable ── */ .strip-track span { font-size: 10px !important; padding: .75rem 1.4rem !important; letter-spacing: .18em !important; } .strip-dot { padding: .75rem .3rem !important; } /* ── 8. TAB NAV (neighbourhood/access/about) ── */ .tab-nav { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; padding: 0 16px !important; gap: 0 !important; white-space: nowrap !important; } .tab-nav::-webkit-scrollbar { display: none; } .tab-btn { font-size: 11px !important; padding: 15px 16px !important; letter-spacing: .08em !important; white-space: nowrap !important; flex-shrink: 0 !important; } /* ── 9. SECTION HEADERS ── */ .section-title { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; line-height: 1.15 !important; } .eyebrow { font-size: 10px !important; letter-spacing: .18em !important; } .section-body { font-size: 15px !important; line-height: 1.75 !important; } /* ── 10. FEATURES ── */ .feat-title { font-size: 16px !important; } .feat-desc { font-size: 14px !important; line-height: 1.7 !important; } .feat-icon { font-size: 1.6rem !important; } /* ── 11. FLOOR PLAN ── */ .fp-layout { grid-template-columns: 1fr !important; } .fp-img-wrap img { max-height: 260px !important; object-fit: contain !important; } .fp-legend-grid { grid-template-columns: 1fr 1fr !important; } .fp-room-name { font-size: 13px !important; } /* ── 12. ABOUT / STORY ── */ .story-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .story-card { padding: 28px 22px !important; } .story-title { font-size: 18px !important; } .story-body { font-size: 15px !important; line-height: 1.8 !important; } /* ── 13. NEIGHBOURHOOD sections ── */ .sec-header { padding: 40px 20px 24px !important; } .sec-eye { font-size: 10px !important; } .sec-title { font-size: 22px !important; } .sec-body { font-size: 14px !important; line-height: 1.75 !important; } /* ── 14. REVIEW cards ── */ .rev-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .rev-text { font-size: 14px !important; line-height: 1.75 !important; } .rev-author { font-size: 12px !important; } /* ── 15. CTA section ── */ .cta-section h2 { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; } .btn-white, .btn-woutline { display: block !important; width: 100% !important; text-align: center !important; margin: 0 0 10px !important; padding: 14px 20px !important; font-size: 11px !important; } /* ── 16. FOOTER ── */ footer { grid-template-columns: 1fr !important; padding: 36px 20px 20px !important; } .footb { flex-direction: column !important; gap: 6px !important; text-align: center !important; } .foot-logo { font-size: 20px !important; } /* ── 17. Page hero sections ── */ #page-neighbourhood .hero, #page-access .hero, #page-about .hero { padding: 72px 20px 44px !important; min-height: auto !important; } #page-neighbourhood .hero h1, #page-access .hero h1, #page-about .hero h1 { font-size: clamp(2rem, 8vw, 2.6rem) !important; } /* ── 18. Life banner ── */ .life-banner { flex-wrap: wrap !important; gap: 8px !important; padding: 12px 20px !important; } .life-banner-text { font-size: 13px !important; } /* ── 19. Access tab content ── */ .access-grid, .dest-table-wrap { overflow-x: auto !important; } /* ── 20. Mobile-only price bar ── */ .price-per { font-size: 11px !important; } .price-box { font-size: 14px !important; padding: 12px 16px !important; } } /* Ultra-small screens (iPhone SE 375px) */ @media (max-width: 380px) { .hero h1 { font-size: 2rem !important; } .hero-tag { font-size: 9px !important; padding: 8px 10px !important; } .room-tab { font-size: 12px !important; padding: 15px 14px !important; } .mk-lang-btn { padding: 4px 5px !important; font-size: 8px !important; } } /* ── Room tabs: desktop + mobile visibility ── */ .room-tab { font-size: 13px !important; color: rgba(237,224,204,.60) !important; font-weight: 500 !important; } .room-tab.active { color: var(--ivory) !important; font-weight: 600 !important; border-bottom: 2px solid var(--cedar) !important; } .tab-guests { font-size: 10px !important; padding: 3px 7px !important; opacity: .8 !important; } /* ══════════════════════════════════════════════════════ LUXURY MINIMALISM — Icon & Typography Cleanup ══════════════════════════════════════════════════════ */ /* ── 1. SPEC items: hide emoji, style as text-only ── */ .spec-icon { display: none !important; } .spec-item { display: flex !important; flex-direction: column !important; gap: 4px !important; padding: 16px 0 !important; border-bottom: 1px solid rgba(43,48,64,.08) !important; } .spec-item:last-child { border-bottom: none !important; } .spec-lbl { font-size: 10px !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: rgba(43,48,64,.45) !important; font-weight: 400 !important; font-family: var(--sans) !important; } .spec-val { font-size: 18px !important; font-weight: 400 !important; color: var(--navy) !important; font-family: var(--serif) !important; letter-spacing: .01em !important; } /* ── 2. AMENITY BAR: replace emoji with minimal dots ── */ .am-item { font-size: 11px !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: rgba(237,224,204,.70) !important; font-weight: 400 !important; display: flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; } .am-item::before { content: '—' !important; color: var(--cedar) !important; font-size: 10px !important; flex-shrink: 0 !important; } /* Hide emoji data-icon pseudo elements */ .am-item [data-icon], .room-amenities-bar .am-icon { display: none !important; } /* Amenity bar container */ .room-amenities-bar { background: var(--navy) !important; padding: 14px 32px !important; display: flex !important; flex-wrap: wrap !important; gap: 20px 32px !important; align-items: center !important; border-top: 1px solid rgba(196,160,96,.15) !important; } /* ── 3. FEATURES SECTION: monoline icon style ── */ .feat-icon { font-size: 1.4rem !important; opacity: 0.6 !important; filter: grayscale(1) !important; /* desaturate emoji → monochrome */ margin-bottom: 8px !important; } .feat-title { font-family: var(--serif) !important; font-size: 19px !important; font-weight: 400 !important; letter-spacing: .01em !important; margin-bottom: 10px !important; color: var(--ivory) !important; } .feat-desc { font-size: 14px !important; line-height: 1.80 !important; color: rgba(237,224,204,.70) !important; } .feat { padding: 32px 28px !important; border-right: 1px solid rgba(255,255,255,.07) !important; } /* ── 4. ROOM PANEL typography ── */ .room-name { font-size: 28px !important; font-weight: 300 !important; letter-spacing: .01em !important; } .room-type-label { font-size: 10px !important; letter-spacing: .24em !important; opacity: .55 !important; } .room-price { font-size: 32px !important; font-weight: 300 !important; } .price-per { font-size: 11px !important; opacity: .6 !important; letter-spacing: .14em !important; } /* ── 5. Room tabs ── */ .room-tab { font-size: 13px !important; letter-spacing: .14em !important; font-weight: 400 !important; color: rgba(237,224,204,.55) !important; padding: 20px 28px !important; } .room-tab.active { color: var(--ivory) !important; font-weight: 500 !important; border-bottom: 2px solid var(--cedar) !important; } .tab-guests { background: rgba(196,160,96,.20) !important; color: var(--cedar) !important; font-size: 9px !important; padding: 3px 7px !important; border-radius: 10px !important; margin-left: 8px !important; letter-spacing: .08em !important; } /* ── 6. Strip ticker: remove emoji, clean text ── */ .strip-track span { font-size: 11px !important; letter-spacing: .28em !important; color: rgba(196,160,96,.75) !important; font-weight: 300 !important; } .strip-dot { color: rgba(196,160,96,.35) !important; } /* ══════════════════════════════════════════════════════ SUB-PAGE HERO — Proper background & sizing ══════════════════════════════════════════════════════ */ #page-neighbourhood .hero, #page-access .hero, #page-about .hero { background: var(--navy) !important; height: auto !important; min-height: 420px !important; padding: 100px 52px 64px !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: flex-start !important; overflow: hidden !important; } /* Sub-page hero text: ensure white on dark bg */ #page-neighbourhood .hero .hero-eye, #page-access .hero .hero-eye, #page-about .hero .hero-eye { color: var(--cedar) !important; opacity: 1 !important; } #page-neighbourhood .hero h1, #page-access .hero h1, #page-about .hero h1 { color: var(--ivory) !important; } #page-neighbourhood .hero h1 em, #page-access .hero h1 em, #page-about .hero h1 em { color: var(--cedar) !important; } #page-neighbourhood .hero .hero-desc, #page-access .hero .hero-desc, #page-about .hero .hero-desc { color: rgba(237,224,204,.72) !important; } /* Mobile sub-page hero */ @media (max-width: 768px) { #page-neighbourhood .hero, #page-access .hero, #page-about .hero { min-height: 280px !important; padding: 72px 20px 44px !important; } } /* ══ Neighbourhood tab buttons: remove emoji ══ */ /* (tab button text is set in HTML - fix via CSS content override not possible) */ /* ══ Strip ticker: cleaner ══ */ .strip-track span { font-family: var(--sans) !important; } /* ══ Page section font sizes ══ */ .rooms-header .section-title { font-size: clamp(2.2rem, 4vw, 3.2rem) !important; } .features-section .section-title { font-size: clamp(2rem, 3.5vw, 3rem) !important; } /* ── CINEMA MODE: full-bleed for specific slides ── */ .hero.slide-cinema .hero-inner { grid-template-columns: 1fr !important; justify-items: flex-start !important; text-align: left !important; padding: 0 8% 100px !important; align-content: flex-end !important; } .hero.slide-cinema .hero-widget { display: none !important; } .hero.slide-cinema .hero-btns { justify-content: flex-start !important; } .hero.slide-cinema .hero-tags { justify-content: flex-start !important; } .hero.slide-cinema .hero-sub { max-width: 520px !important; margin: 0 !important; } .hero.slide-cinema h1 { text-align: left !important; font-size: clamp(3rem, 6vw, 5rem) !important; } /* Stronger gradient for cinema mode — protect center text */ .hero.slide-cinema .hero-bg-slide.active::after { background: linear-gradient(to right, rgba(0,0,0,.88) 0%, rgba(0,0,0,.60) 30%, rgba(0,0,0,.20) 55%, rgba(0,0,0,.05) 100%), linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.30) 35%, rgba(0,0,0,.0) 65%) !important; } /* ════ Split room layout ════ */ .room-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 620px; align-items: stretch; } /* LEFT: slider stacked above floorplan */ .room-split-left { display: flex; flex-direction: column; background: var(--slate,#1a1008); overflow: hidden; } .room-split-left .room-slider { flex: 0 0 62%; min-height: 0; position: relative; overflow: hidden; } .room-split-left .slide { display:none; width:100%; height:100%; } .room-split-left .slide.active { display:block; } .room-split-left .slide img { width:100%; height:100%; object-fit:cover; min-height:0 !important; filter:saturate(.82); } .room-split-fp { flex: 1; background: var(--linen,#f5f0e8); display: flex; align-items: center; justify-content: center; padding: 18px 24px; gap: 20px; border-top: 1px solid rgba(196,160,96,.15); } .room-split-fp img { max-height: 160px; max-width: 54%; object-fit: contain; flex-shrink: 0; } .room-split-fp-legend { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; } .room-split-fp-legend .fp-legend-title { font: 500 9px/1 var(--sans,'Jost',sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--cedar,#a8926a); margin-bottom: 4px; } .room-split-fp-legend .fp-room-item { display: flex; gap: 8px; align-items: flex-start; padding: 5px 8px; border-radius: 2px; border-left: 2px solid transparent; } .room-split-fp-legend .fp-room-item.highlight { border-left-color: var(--cedar,#a8926a); background:rgba(196,160,96,.06); } .room-split-fp-legend .fp-room-item.accent { border-left-color: var(--sage,#7a8f6e); background:rgba(122,143,110,.06); } .room-split-fp-legend .fp-room-name { font:500 10.5px/1.2 var(--sans); color:var(--ebony,#1a1008); } .room-split-fp-legend .fp-room-note { font:400 9.5px/1.3 var(--sans); color:var(--slate,#4a3f30); margin-top:1px; } /* RIGHT: info panel */ .room-split-right { background: var(--white,#faf7f2); padding: 44px 48px; display: flex; flex-direction: column; justify-content: center; gap: 20px; overflow-y: auto; } .room-split-right h2 { font-size: clamp(1.6rem,2.3vw,2.1rem); line-height: 1.15; margin: 0; color: var(--ebony,#1a1008); } .room-split-right .room-sub { font:400 11px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--cedar,#a8926a); margin: -8px 0 0; } .room-split-right .room-desc { font-size:13.5px; line-height:1.75; color:var(--slate,#4a3f30); margin:0; } .room-split-right .room-specs { display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; } .room-split-right .room-price-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:12px; border-top:1px solid rgba(196,160,96,.2); } .room-split-right .room-btns { display:flex; gap:10px; flex-wrap:wrap; } /* Remove old layout */ .room-slider-wrap { display:none !important; } .fp-section { display:none !important; } /* Amenities bar stays */ .room-amenities-bar { display:flex; } /* Mobile */ @media(max-width:768px){ .room-split { grid-template-columns:1fr; min-height:unset; } .room-split-left .room-slider { flex:0 0 260px; } .room-split-fp { flex-direction:column; padding:16px; gap:12px; } .room-split-fp img { max-width:100%; max-height:180px; } .room-split-right { padding:28px 20px; } } /* ══ Neighbourhood Teaser ══ */ .nb-teaser { background: var(--ebony,#1a1008); padding: 80px 0 64px; overflow: hidden; } .nb-teaser-head { text-align: center; padding: 0 40px 48px; } .nb-teaser-eye { font: 400 10px/1 var(--sans,'Jost',sans-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--cedar,#a8926a); margin-bottom: 16px; } .nb-teaser-h2 { font: 300 clamp(2rem,4vw,3rem)/1.12 var(--serif,'Cormorant Garamond',serif); color: var(--ivory,#f5f0e8); margin: 0 0 14px; } .nb-teaser-h2 em { font-style:italic; color:var(--cedar,#a8926a); } .nb-teaser-sub { font: 400 14px/1.7 var(--sans); color: rgba(237,224,204,.52); max-width:520px; margin:0 auto; } /* Scrollable card track */ .nb-teaser-track { display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 40px; } .nb-teaser-track::-webkit-scrollbar { display:none; } /* Cards */ .nb-card { flex: 0 0 280px; scroll-snap-align: start; background: rgba(255,255,255,.03); border: 1px solid rgba(196,160,96,.10); border-radius: 3px; overflow: hidden; cursor: pointer; transition: border-color .3s, transform .3s; } .nb-card:hover { border-color: rgba(196,160,96,.38); transform: translateY(-4px); } .nb-card-img { width: 100%; height: 190px; object-fit: cover; display: block; filter: saturate(.7) brightness(.82); transition: filter .4s; } .nb-card:hover .nb-card-img { filter: saturate(.9) brightness(.95); } .nb-card-body { padding: 20px 22px 18px; } .nb-card-tag { font: 500 8.5px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color: var(--cedar,#a8926a); margin-bottom:8px; } .nb-card-title { font: 400 17px/1.2 var(--serif,'Cormorant Garamond',serif); color: var(--ivory,#f5f0e8); margin: 0 0 8px; } .nb-card-desc { font: 400 12px/1.65 var(--sans); color: rgba(237,224,204,.48); margin: 0; } .nb-card-cta { margin-top: 14px; font: 500 8.5px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color: var(--cedar,#a8926a); display: flex; align-items:center; gap:6px; transition: gap .2s; } .nb-card:hover .nb-card-cta { gap:10px; } .nb-card-cta::after { content:'→'; font-size:12px; } /* Scroll dots */ .nb-scroll-dots { display: flex; justify-content: center; gap: 5px; margin-top: 28px; } .nb-scroll-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(196,160,96,.22); transition: all .3s; } .nb-scroll-dot.active { background: var(--cedar,#a8926a); width: 14px; border-radius: 2px; } /* See all */ .nb-see-all { text-align: center; margin-top: 40px; padding: 0 40px; } .nb-see-all-btn { display: inline-flex; align-items:center; gap:10px; border: 1px solid rgba(196,160,96,.3); color: var(--cedar,#a8926a); font: 500 9.5px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; padding: 13px 26px; border-radius:2px; cursor:pointer; background: transparent; transition: all .3s; } .nb-see-all-btn:hover { background:var(--cedar,#a8926a); color:#fff; border-color:var(--cedar,#a8926a); } @media(max-width:768px){ .nb-teaser { padding:48px 0 44px; } .nb-teaser-head { padding: 0 20px 32px; } .nb-teaser-track { padding: 0 20px; gap:10px; } .nb-card { flex: 0 0 230px; } .nb-card-img { height:155px; } .nb-see-all { padding: 0 20px; } } /* ── Back bar on Neighbourhood page ── */ .nb-back-bar { display: none; align-items:center; gap:12px; padding: 14px 40px; background: rgba(26,16,8,.95); border-bottom: 1px solid rgba(196,160,96,.1); cursor:pointer; transition: background .2s; position: sticky; top: 52px; z-index: 90; } .nb-back-bar:hover { background: rgba(196,160,96,.08); } .nb-back-bar.visible { display:flex; } .nb-back-arrow { width:26px; height:26px; border:1px solid rgba(196,160,96,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--cedar,#a8926a); flex-shrink:0; } .nb-back-text { display:flex; flex-direction:column; gap:2px; } .nb-back-text strong { font:600 10px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--cedar,#a8926a); } .nb-back-text span { font:400 9px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:rgba(237,224,204,.4); } @media(max-width:768px){ .nb-back-bar { padding:12px 20px; top:52px; } } /* ── Fix room panel collapse ── */ .room-split { height:620px !important; min-height:unset !important; } .room-split-left { height:100% !important; } .room-split-right { height:100% !important; overflow-y:auto !important; box-sizing:border-box !important; } .room-split-fp-legend { display:none !important; } .room-split-fp { display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; } .room-split-fp img { max-width:100% !important; max-height:230px !important; object-fit:contain !important; } /* ── Split hero slide (two images side by side) ── */ .hero-bg-slide--split { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease-in-out; display: flex; overflow: hidden; } .hero-bg-slide--split.active { opacity: 1; } .hero-bg-split-half { flex: 1; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; transition: flex 0.6s ease; } /* Subtle divider */ .hero-bg-split-half:first-child::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, transparent 0%, rgba(196,160,96,.4) 30%, rgba(196,160,96,.6) 50%, rgba(196,160,96,.4) 70%, transparent 100%); z-index: 2; } /* Each half darkens slightly less than single slides */ .hero-bg-split-half::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.28); z-index: 1; } /* Label per half */ .hero-bg-split-label { position: absolute; bottom: 20px; left: 16px; z-index: 3; font: 400 9px/1 var(--sans,'Jost',sans-serif); letter-spacing: .16em; text-transform: uppercase; color: rgba(237,224,204,.7); background: rgba(15,10,5,.55); padding: 5px 10px; border-radius: 2px; backdrop-filter: blur(4px); } .hero-widget { display:none !important; } .hero-reserve-from { font: 400 9px/1 var(--sans,'Jost',sans-serif); letter-spacing: .16em; text-transform: uppercase; color: rgba(237,224,204,.5); text-align: right; } .hero-reserve-from strong { color: rgba(237,224,204,.8); font-weight: 500; } .hero-reserve-link { display: inline-flex; align-items: center; gap: 8px; background: var(--cedar,#a8926a); color: #fff; font: 600 10px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; padding: 13px 22px; border: none; border-radius: 2px; cursor: pointer; transition: background .25s, gap .2s; box-shadow: 0 4px 20px rgba(0,0,0,.4); white-space: nowrap; } .hero-reserve-link:hover { background: #c4a878; gap: 12px; } .hero-reserve-link::after { content: '→'; font-size: 13px; font-weight: 300; } @media (max-width: 900px) { .hero-reserve-btn { display: none; } } /* ════ MIMARU-style room layout ════ */ .room-split { display: block !important; } /* Top: photo + floorplan side by side */ .room-top { display: grid; grid-template-columns: 1.1fr 0.9fr; height: 480px; } .room-top-slider { position: relative; overflow: hidden; background: #111; z-index: 1; } .room-top-slider .slide { display:none; width:100%; height:100%; } .room-top-slider .slide.active { display:block; } .room-top-slider .slide img { width:100%; height:100%; object-fit:cover; filter:saturate(.82); } .room-top-fp { background: var(--linen,#f5f0e8); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 28px; border-left: 1px solid rgba(196,160,96,.15); gap: 12px; } .room-top-fp img { max-width: 100%; max-height: 340px; object-fit: contain; } .room-top-fp-cap { font: 400 9px/1 var(--sans,'Jost',sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--cedar,#a8926a); text-align: center; } /* Slider controls */ .room-top-controls { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 10px; z-index: 30; pointer-events: all; } /* Bottom: info bar */ .room-bottom { background: var(--white,#faf7f2); padding: 24px 36px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 32px; align-items: start; border-top: 1px solid rgba(196,160,96,.12); } .room-bottom-left { display: flex; flex-direction: column; gap: 8px; } .room-bottom-left .room-badge { align-self: flex-start; } .room-bottom-left h2 { font-size: clamp(1.3rem,2vw,1.8rem); line-height: 1.15; margin: 0; color: var(--ebony,#1a1008); } .room-bottom-left .room-sub { font: 400 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--cedar,#a8926a); } .room-bottom-left .room-desc { font-size: 13px; line-height: 1.7; color: var(--slate,#4a3f30); margin: 0; } .room-bottom-mid .room-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; } .room-bottom-right { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; min-width: 160px; } .room-bottom-right .price-block { text-align: right; } .room-bottom-right .room-btns { display: flex; flex-direction: column; gap: 8px; width: 100%; } .room-bottom-right .btn-reserve, .room-bottom-right .btn-detail { width: 100%; text-align: center; } /* Hide old layout elements */ .room-split-left, .room-split-right, .room-split-fp, .room-slider-wrap, .fp-section { display: none !important; } @media(max-width:768px){ .room-top { grid-template-columns:1fr; height:auto; } .room-top-slider { height:260px; } .room-top-fp { height:200px; padding:16px; } .room-bottom { grid-template-columns:1fr; padding:20px; gap:20px; } .room-bottom-right { align-items:stretch; } } /* Clean specs - no boxes */ .room-bottom .spec { border: none !important; background: none !important; padding: 0 !important; } .room-bottom .spec-lbl { font: 500 9px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--cedar,#a8926a); margin-bottom:4px; } .room-bottom .spec-val { font: 400 14px/1.2 var(--serif,'Cormorant Garamond',serif); color:var(--ebony,#1a1008); } /* ══════ FINAL MIMARU LAYOUT OVERRIDE ══════ */ /* Room section - no fixed height, flow naturally */ .room-split { display: block !important; height: auto !important; min-height: unset !important; grid-template-columns: unset !important; position: static !important; } /* Hide ALL old layout elements */ .room-split-left, .room-split-right, .room-split-fp, .room-slider-wrap, .fp-section { display: none !important; } /* Room top: grid with two columns */ .room-top { display: grid !important; grid-template-columns: 1.1fr 0.9fr !important; height: 480px !important; position: relative; z-index: 1; } /* Photo slider */ .room-top-slider { position: relative !important; overflow: hidden !important; background: #111 !important; height: 100% !important; } .room-top-slider .slide { display:none; width:100%; height:100%; } .room-top-slider .slide.active { display:block; } .room-top-slider .slide img { width:100%; height:100%; object-fit:cover; filter:saturate(.82); } /* Controls: above overflow */ .room-top-controls { position: absolute !important; bottom: 14px !important; left: 0 !important; right: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; z-index: 50 !important; pointer-events: all !important; } .room-top-controls .sl-btn { pointer-events: all !important; cursor: pointer !important; } /* Floor plan right side */ .room-top-fp { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 24px 28px !important; background: var(--linen,#f5f0e8) !important; border-left: 1px solid rgba(196,160,96,.15) !important; gap: 12px !important; height: 100% !important; box-sizing: border-box !important; overflow: hidden !important; } .room-top-fp img { max-width: 100% !important; max-height: 360px !important; object-fit: contain !important; display: block !important; } .room-top-fp-cap { font: 400 9px/1 var(--sans,'Jost',sans-serif) !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--cedar,#a8926a) !important; text-align: center !important; } /* Room bottom info */ .room-bottom { background: var(--white,#faf7f2) !important; padding: 24px 36px !important; display: grid !important; grid-template-columns: 1fr 1fr auto !important; gap: 28px !important; align-items: start !important; border-top: 1px solid rgba(196,160,96,.12) !important; } .room-bottom-left { display:flex; flex-direction:column; gap:8px; } .room-bottom-left h2 { font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.15; margin:0; color:var(--ebony,#1a1008); } .room-bottom-left .room-desc { font-size:13px; line-height:1.7; color:var(--slate,#4a3f30); margin:0; } .room-bottom-mid .room-specs { display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; } .room-bottom .spec { border:none!important; background:none!important; padding:0!important; } .room-bottom .spec-lbl { font:500 9px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--cedar,#a8926a); margin-bottom:4px; } .room-bottom .spec-val { font:400 15px/1.2 var(--serif,'Cormorant Garamond',serif); color:var(--ebony,#1a1008); } .room-bottom-right { display:flex; flex-direction:column; gap:10px; align-items:flex-end; min-width:150px; } .room-bottom-right .price-block { text-align:right; } .room-bottom-right .room-btns { display:flex; flex-direction:column; gap:8px; width:100%; } .room-bottom-right .btn-reserve { width:100%; text-align:center; white-space:nowrap; } /* Room tabs: always above content */ .room-tabs { position: relative !important; z-index: 100 !important; pointer-events: all !important; } .room-tab { pointer-events: all !important; cursor: pointer !important; } /* Kill hero-mobile-cta completely */ .hero-mobile-cta { display: none !important; } /* Neighbourhood teaser: remove excess top padding */ .nb-teaser { padding: 52px 0 56px !important; } /* Mobile */ @media(max-width:768px){ .room-top { grid-template-columns:1fr !important; height:auto !important; } .room-top-slider { height:280px !important; } .room-top-fp { height:220px !important; padding:16px !important; } .room-bottom { grid-template-columns:1fr !important; padding:20px !important; gap:16px !important; } .room-bottom-right { align-items:stretch !important; } } /* ── Fix reveal for top-level section headings ── */ .nb-teaser-head, .nb-teaser-head .reveal, .features-section .reveal, .exp-section .reveal, .rooms-section .reveal:first-child { opacity: 1 !important; transform: none !important; } /* nb-teaser padding: remove extra top space */ .nb-teaser { padding-top: 48px !important; } .nb-teaser-head { padding-bottom: 40px !important; } /* ── Fix click blocking ── */ /* room-top-fp is display only, no clicks needed */ .room-top-fp { pointer-events: none !important; } /* All interactive elements stay clickable */ .room-tab, .room-tab * { pointer-events: auto !important; cursor: pointer !important; } .sl-btn, .sl-dot { pointer-events: auto !important; cursor: pointer !important; } /* room-tabs always on top */ .room-tabs { position: sticky !important; top: 58px !important; z-index: 200 !important; pointer-events: auto !important; } /* room-top-controls fully clickable */ .room-top-controls { pointer-events: auto !important; z-index: 50 !important; } .room-top-controls button { pointer-events: auto !important; cursor: pointer !important; } /* ── Final room-top-fp fix ── */ .room-top-fp { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; background: var(--linen,#f5f0e8) !important; padding: 24px !important; height: 100% !important; box-sizing: border-box !important; overflow: hidden !important; border-left: 1px solid rgba(196,160,96,.15) !important; gap: 10px !important; } .room-top-fp img { max-width: 100% !important; max-height: 340px !important; width: auto !important; height: auto !important; object-fit: contain !important; display: block !important; } .room-top-fp-cap { display: block !important; font: 400 9px/1 var(--sans,'Jost',sans-serif) !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--cedar,#a8926a) !important; text-align: center !important; opacity: 1 !important; } /* ── room-top grid final ── */ .room-top { display: grid !important; grid-template-columns: 1.1fr 0.9fr !important; height: 480px !important; position: relative !important; } .room-top-slider { position: relative !important; overflow: hidden !important; background: #111 !important; height: 100% !important; } .room-top-slider .slide { display: none !important; width: 100% !important; height: 100% !important; } .room-top-slider .slide.active { display: block !important; } .room-top-slider .slide img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* ══ ROOM BOTTOM — Beautiful redesign ══ */ .room-bottom { padding: 36px 48px !important; gap: 48px !important; grid-template-columns: 1.2fr 1.4fr auto !important; align-items: center !important; border-top: 2px solid rgba(196,160,96,.18) !important; } .room-bottom-left h2 { font-size: clamp(1.8rem, 2.5vw, 2.4rem) !important; font-weight: 300 !important; letter-spacing: -.01em !important; line-height: 1.1 !important; color: var(--ebony, #1a1008) !important; margin-bottom: 8px !important; } .room-bottom-left .room-badge { font-size: 10px !important; letter-spacing: .18em !important; margin-bottom: 12px !important; } .room-bottom-left .room-desc { font-size: 14.5px !important; line-height: 1.8 !important; color: var(--slate, #4a3f30) !important; max-width: 380px !important; } .room-bottom-mid .room-specs { gap: 20px 48px !important; } .room-bottom .spec-lbl { font-size: 9.5px !important; letter-spacing: .2em !important; color: var(--cedar, #a8926a) !important; margin-bottom: 5px !important; } .room-bottom .spec-val { font-size: 18px !important; font-family: 'Cormorant Garamond', serif !important; font-weight: 400 !important; color: var(--ebony, #1a1008) !important; line-height: 1.2 !important; } .room-bottom-right { min-width: 180px !important; gap: 14px !important; } /* ══ AMENITIES BAR: floating am-items fix ══ */ .room-panel .room-split + .am-item, .room-split ~ .am-item { display: inline-flex !important; } /* Make am-items that are direct children of room-panel show as a bar */ .room-panel > .am-item { display: none !important; } /* ══ NEW UNIFIED ROOM BOTTOM LAYOUT ══ */ /* Move specs inline with name/desc - all in one visual block */ .room-bottom { background: var(--white, #faf7f2) !important; padding: 32px 48px !important; display: grid !important; grid-template-columns: 1.4fr 1.2fr auto !important; gap: 40px !important; align-items: center !important; border-top: 2px solid rgba(196,160,96,.15) !important; } .room-bottom-left h2 { font-size: clamp(1.8rem, 2.5vw, 2.6rem) !important; font-weight: 300 !important; line-height: 1.08 !important; letter-spacing: -.02em !important; color: var(--ebony, #1a1008) !important; margin: 6px 0 10px !important; } .room-bottom-left .room-badge { font-size: 9.5px !important; letter-spacing: .2em !important; margin-bottom: 4px !important; } .room-bottom-left .room-desc { font-size: 14px !important; line-height: 1.85 !important; color: rgba(74,63,48,.8) !important; max-width: 400px !important; margin-top: 6px !important; } .room-bottom-mid .room-specs { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 20px 24px !important; } .room-bottom .spec-lbl { font-size: 9px !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: var(--cedar, #a8926a) !important; margin-bottom: 4px !important; font-weight: 500 !important; } .room-bottom .spec-val { font-size: 17px !important; font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 400 !important; color: var(--ebony, #1a1008) !important; line-height: 1.1 !important; } .room-bottom-right { min-width: 170px !important; gap: 12px !important; align-items: flex-end !important; } .price-num { font-size: 2.8rem !important; font-family: 'Cormorant Garamond', serif !important; font-weight: 300 !important; } .price-from { font-size: 9px !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: var(--cedar, #a8926a) !important; } /* ══ AMENITIES BAR shown below room-bottom ══ */ .room-amenities-bar { display: flex !important; flex-wrap: wrap !important; gap: 16px 32px !important; background: var(--navy, #1a1008) !important; padding: 18px 48px !important; border-top: 1px solid rgba(196,160,96,.12) !important; } .am-item { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 10.5px !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: rgba(237,224,204,.65) !important; font-weight: 400 !important; } .am-item::before { content: '—' !important; color: var(--cedar, #a8926a) !important; font-size: 9px !important; } /* ══════════════════════════════════════ OPTIMAL ROOM LAYOUT — Clean & Spacious Left: photos (no distortion) Right top: floor plan Right bottom: specs + price + reserve ══════════════════════════════════════ */ /* Override room-split to use CSS Grid */ .room-split { display: grid !important; grid-template-columns: 1.75fr 1fr !important; grid-template-rows: auto auto !important; height: auto !important; min-height: unset !important; position: static !important; } /* Photo slider: spans full left column, both rows */ .room-top { display: contents !important; } .room-top-slider { grid-column: 1 !important; grid-row: 1 / 3 !important; height: 660px !important; position: relative !important; overflow: hidden !important; background: #111 !important; z-index: 1 !important; } .room-top-slider .slide { position: absolute !important; inset: 0 !important; display: none !important; } .room-top-slider .slide.active { display: block !important; } .room-top-slider .slide img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; filter: saturate(.9) !important; } /* Floor plan: right column, top row — smaller to give more room to info */ .room-top-fp { grid-column: 2 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; background: #f5f0e8 !important; padding: 20px 16px 12px !important; height: 260px !important; box-sizing: border-box !important; border-left: 1px solid rgba(196,160,96,.18) !important; border-bottom: 1px solid rgba(196,160,96,.12) !important; } .room-top-fp img { max-width: 100% !important; max-height: 210px !important; width: auto !important; height: auto !important; object-fit: contain !important; display: block !important; } .room-top-fp-cap { display: block !important; font-size: 9px !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--cedar, #a8926a) !important; text-align: center !important; margin-top: 8px !important; opacity: .65 !important; font-family: var(--sans, 'Jost', sans-serif) !important; } /* Info panel: right column, bottom row — taller with bigger fonts */ .room-bottom { grid-column: 2 !important; grid-row: 2 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; padding: 28px 32px 28px !important; height: 400px !important; box-sizing: border-box !important; background: var(--white, #faf7f2) !important; border-left: 1px solid rgba(196,160,96,.18) !important; border-top: none !important; gap: 0 !important; grid-template-columns: unset !important; } /* Hide left text block (name/desc) */ .room-bottom-left h2, .room-bottom-left .room-desc { display: none !important; } .room-bottom-left { margin-bottom: 8px !important; } .room-bottom-left .room-badge { display: inline-block !important; font-size: 11px !important; letter-spacing: .14em !important; margin-bottom: 0 !important; } /* Specs grid: 2 columns */ .room-bottom-mid { flex: 1 !important; display: flex !important; align-items: flex-start !important; padding-top: 12px !important; } .room-bottom-mid .room-specs { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 18px 24px !important; width: 100% !important; } .room-bottom .spec-lbl { font-size: 12px !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--cedar, #a8926a) !important; margin-bottom: 4px !important; font-weight: 500 !important; line-height: 1 !important; } .room-bottom .spec-val { font-size: 22px !important; font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 400 !important; color: var(--ebony, #1a1008) !important; line-height: 1.1 !important; } /* Price + reserve: horizontal row at bottom */ .room-bottom-right { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; padding-top: 20px !important; border-top: 1px solid rgba(196,160,96,.12) !important; min-width: unset !important; gap: 12px !important; } .price-block { text-align: left !important; } .price-from { font-size: 13px !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--cedar, #a8926a) !important; font-weight: 400 !important; margin-bottom: 4px !important; } .price-num { font-size: 2.8rem !important; font-family: 'Cormorant Garamond', serif !important; font-weight: 300 !important; line-height: 1 !important; color: var(--ebony, #1a1008) !important; letter-spacing: -.02em !important; } .price-per { font-size: 12px !important; color: rgba(74,63,48,.55) !important; letter-spacing: .04em !important; line-height: 1.4 !important; margin-top: 4px !important; } .room-btns { width: auto !important; } .btn-reserve { white-space: nowrap !important; padding: 16px 26px !important; font-size: 13px !important; letter-spacing: .14em !important; } /* Amenities bar: spans full width below everything */ .room-amenities-bar { grid-column: 1 / 3 !important; grid-row: unset !important; display: flex !important; flex-wrap: wrap !important; gap: 18px 36px !important; background: var(--navy, #1a1008) !important; padding: 22px 48px !important; border-top: 1px solid rgba(196,160,96,.12) !important; } .am-item { display: inline-flex !important; align-items: center !important; gap: 10px !important; font-size: 15px !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: rgba(237,224,204,.7) !important; font-weight: 400 !important; } .am-item::before { content: '—' !important; color: var(--cedar, #a8926a) !important; font-size: 11px !important; } /* ══ FORCE all reveals visible ══ */ .reveal { opacity: 1 !important; transform: none !important; } .features-section .reveal, .exp-section .reveal, .rooms-section .reveal { opacity: 1 !important; transform: none !important; } /* ── Features + Exp + Reviews + CTA ── */ .features-section { background: var(--navy); padding: 80px 52px; } .features-inner { max-width: 1200px; margin: 0 auto; } .features-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; } .features-grid { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid rgba(255,255,255,.06); } .features-section .section-title { font-size: clamp(2rem, 3.5vw, 3rem) !important; } /* ── CINEMA MODE: full-bleed for specific slides ── */ .hero.slide-cinema .hero-inner { grid-template-columns: 1fr !important; justify-items: flex-start !important; text-align: left !important; padding: 0 8% 100px !important; align-content: flex-end !important; } .exp-section { background: var(--ivory); padding: 80px 52px; } .exp-inner { max-width: 1200px; margin: 0 auto; } .exp-header { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 40px; } .exp-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); } .exp-card { background: var(--navy); padding: 40px 30px; position: relative; overflow: hidden; transition: background .35s; } .exp-card:hover { background: var(--slate); } .exp-card::before { content: attr(data-n); position: absolute; top: -1rem; right: .5rem; font-family: var(--serif); font-size: 5.5rem; color: rgba(196,160,96,.07); line-height: 1; pointer-events: none; } .feat-icon { font-size: 22px; margin-bottom: 14px; display: block; } .feat-title { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--ivory); margin-bottom: 10px; } .feat-desc { font-size: 15px; color: rgba(237,224,204,.72); line-height: 1.85; font-weight: 300; } /* ═══════════════════════════ EXPERIENCES ═══════════════════════════ */ .exp-section { background: var(--ivory); padding: 80px 52px; } .exp-inner { max-width: 1200px; margin: 0 auto; } .exp-header { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 40px; } .exp-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); } .exp-card { background: var(--navy); padding: 40px 30px; position: relative; overflow: hidden; transition: background .35s; } .feat-num { font-family: var(--serif); font-size: .75rem; color: rgba(196,160,96,.35); letter-spacing: .08em; margin-bottom: 12px; display: block; } .feat-title { font-size: 19px !important; margin-bottom: 10px !important; } .feat-desc { font-size: 15.5px !important; line-height: 1.85 !important; opacity: 1 !important; color: rgba(237,224,204,.78) !important; } .feat-desc { font-size: 15px !important; line-height: 1.72 !important; } .feat-title { font-size: 17px !important; } /* About story body */ #page-about .story-body { font-size: 16.5px !important; line-height: 1.88 !important; } #page-about .story-card { padding: 44px 40px !important; } #page-about .story-title { font-size: 22px !important; } /* Tab buttons ALL pages */ .tab-btn { font-size: 13.5px !important; letter-spacing: .1em !important; } #page-neighbourhood .tab-btn, #page-access .tab-btn, #page-about .tab-btn { padding: 18px 20px !important; } /* Life banner */ #page-neighbourhood .life-banner-text { font-size: 16px !important; } /* Hero eyebrow */ .hero-eyebrow { font-size: 12px !important; letter-spacing: .2em !important; } /* Review cards */ .rev-text { font-size: 15.5px !important; line-height: 1.75 !important; } .rev-author { font-size: 13px !important; } /* Section body text */ .section-body { font-size: 16px !important; line-height: 1.78 !important; } .sec-body { font-size: 16px !important; line-height: 1.78 !important; } /* Hero sub */ .hero-sub { font-size: 16px !important; line-height: 1.85 !important; } /* Hero tags styling */ .hero-tag { font-size: 12px !important; letter-spacing: .08em !important; padding: 9px 18px !important; border: 1px solid rgba(194,160,96,.45) !important; border-radius: 20px !important; color: var(--cedar) !important; background: rgba(194,160,96,.08) !important; font-family: var(--sans) !important; display: inline-block !important; } .feat-icon { font-size: 1.4rem !important; opacity: 0.6 !important; filter: grayscale(1) !important; /* desaturate emoji → monochrome */ margin-bottom: 8px !important; } .feat-title { font-family: var(--serif) !important; font-size: 19px !important; font-weight: 400 !important; letter-spacing: .01em !important; margin-bottom: 10px !important; color: var(--ivory) !important; } .feat-desc { font-size: 14px !important; line-height: 1.80 !important; color: rgba(237,224,204,.70) !important; } .life-banner { background: var(--navy); padding: 16px 52px; display: flex; align-items: center; gap: 16px; } .life-section { background: var(--navy); margin: 0 52px 52px; padding: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; } .reviews-section { background: var(--white); padding: 80px 52px; } .reviews-inner { max-width: 1200px; margin: 0 auto; } .rev-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 36px; } .rev-card { background: var(--white); border: 1px solid var(--border); padding: 32px 28px; border-radius: 2px; transition: border-color .3s, transform .3s; } .rev-card:hover { border-color: var(--cedar); transform: translateY(-3px); } .rev-stars { color: var(--persim); font-size: 14px; letter-spacing: 2px; margin-bottom: 14px; } .rev-text { font-size: 15.5px; font-style: italic; color: var(--mid); line-height: 1.82; margin-bottom: 18px; font-weight: 300; } .rev-who { font-size: 15px; font-weight: 500; color: var(--ink); } .rev-loc { font-size: 13px !important; color: var(--mid) !important; margin-top: 3px; } /* ═══════════════════════════ CTA BAND ═══════════════════════════ */ .cta-section { background: var(--navy); color: var(--ivory); padding: 72px 52px; text-align: center; } .rev-stars { letter-spacing: 3px; } /* ── Feature item number ── */ .feat-num { font-family: var(--serif); font-size: .75rem; color: rgba(196,160,96,.35); letter-spacing: .08em; margin-bottom: 12px; display: block; } .rev-text { font-size: 14.5px !important; line-height: 1.75 !important; margin-bottom: 16px !important; } .rev-who { font-size: 14px !important; } .rev-loc { font-size: 12px !important; } .cta-section h2 { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.2rem); color: #fff; margin-bottom: 10px; font-weight: 300; } .cta-section p { font-size: 16px; color: rgba(255,255,255,.75); margin-bottom: 36px; font-weight: 300; } .btn-white { background: #fff; color: var(--persim); border: none; padding: 14px 38px; font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; border-radius: 2px; margin-right: 14px; transition: all .2s; } .cta-section { position: relative; overflow: hidden; } .cta-section::before { content: '予約'; position: absolute; right: 5%; top: 50%; transform: translateY(-50%); font-family: var(--serif); font-size: 14rem; color: rgba(255,255,255,.05); pointer-events: none; line-height: 1; }