/* ===== about.html inline styles ===== */
/* Lamb Cafe hero video no-controls patch */
video.hero-video-no-controls,
.hero video,
.hero-video,
.hero-bg video,
.hero-media video {
pointer-events: none !important;
-webkit-user-select: none !important;
user-select: none !important;
}
/* End Lamb Cafe hero video no-controls patch */
/* ===== about.html inline styles ===== */
/* Lamb Cafe inner hero text unified layout patch */
body.lamb-inner-hero-unified .hero,
body.lamb-inner-hero-unified .page-hero,
body.lamb-inner-hero-unified .inner-hero,
body.lamb-inner-hero-unified .visit-hero,
body.lamb-inner-hero-unified .staff-hero,
body.lamb-inner-hero-unified .gallery-hero,
body.lamb-inner-hero-unified .rp-hero,
body.lamb-inner-hero-unified .menu-hero {
position: relative !important;
min-height: 430px !important;
height: 430px !important;
overflow: hidden !important;
display: block !important;
transform: none !important;
}
body.lamb-inner-hero-unified .hero img,
body.lamb-inner-hero-unified .page-hero img,
body.lamb-inner-hero-unified .inner-hero img,
body.lamb-inner-hero-unified .hero video,
body.lamb-inner-hero-unified .page-hero video,
body.lamb-inner-hero-unified .inner-hero video {
pointer-events: none !important;
}
body.lamb-inner-hero-unified .hero-content,
body.lamb-inner-hero-unified .page-hero-content,
body.lamb-inner-hero-unified .inner-hero-content,
body.lamb-inner-hero-unified .visit-hero-content,
body.lamb-inner-hero-unified .staff-hero-content,
body.lamb-inner-hero-unified .gallery-hero-content,
body.lamb-inner-hero-unified .rp-hero-content,
body.lamb-inner-hero-unified .menu-hero-content,
body.lamb-inner-hero-unified .hero > .container,
body.lamb-inner-hero-unified .page-hero > .container,
body.lamb-inner-hero-unified .inner-hero > .container {
position: absolute !important;
left: clamp(56px, 7.5vw, 116px) !important;
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
max-width: 880px !important;
width: min(880px, calc(100% - 112px)) !important;
padding: 0 !important;
margin: 0 !important;
text-align: left !important;
z-index: 3 !important;
animation-name: heroTextRiseUnified !important;
animation-duration: .9s !important;
animation-timing-function: ease !important;
animation-fill-mode: both !important;
}
body.lamb-inner-hero-unified .hero-content h1,
body.lamb-inner-hero-unified .page-hero-content h1,
body.lamb-inner-hero-unified .inner-hero-content h1,
body.lamb-inner-hero-unified .visit-hero-content h1,
body.lamb-inner-hero-unified .staff-hero-content h1,
body.lamb-inner-hero-unified .gallery-hero-content h1,
body.lamb-inner-hero-unified .rp-hero-content h1,
body.lamb-inner-hero-unified .menu-hero-content h1,
body.lamb-inner-hero-unified .hero > .container h1,
body.lamb-inner-hero-unified .page-hero > .container h1,
body.lamb-inner-hero-unified .inner-hero > .container h1 {
margin: 0 0 10px !important;
font-size: clamp(58px, 5.9vw, 86px) !important;
line-height: 1.05 !important;
letter-spacing: .015em !important;
}
body.lamb-inner-hero-unified .hero-content .hero-subtitle,
body.lamb-inner-hero-unified .page-hero-content .hero-subtitle,
body.lamb-inner-hero-unified .inner-hero-content .hero-subtitle,
body.lamb-inner-hero-unified .hero-content .hero-en,
body.lamb-inner-hero-unified .page-hero-content .hero-en,
body.lamb-inner-hero-unified .inner-hero-content .hero-en,
body.lamb-inner-hero-unified .visit-hero-content .hero-subtitle,
body.lamb-inner-hero-unified .staff-hero-content .hero-subtitle,
body.lamb-inner-hero-unified .gallery-hero-content .hero-subtitle,
body.lamb-inner-hero-unified .rp-hero-content .hero-subtitle,
body.lamb-inner-hero-unified .menu-hero-content .hero-subtitle,
body.lamb-inner-hero-unified .hero > .container .hero-subtitle,
body.lamb-inner-hero-unified .page-hero > .container .hero-subtitle,
body.lamb-inner-hero-unified .inner-hero > .container .hero-subtitle {
display: block !important;
margin: 0 0 24px !important;
font-size: 26px !important;
line-height: 1.2 !important;
font-weight: 700 !important;
}
body.lamb-inner-hero-unified .hero-content p,
body.lamb-inner-hero-unified .page-hero-content p,
body.lamb-inner-hero-unified .inner-hero-content p,
body.lamb-inner-hero-unified .visit-hero-content p,
body.lamb-inner-hero-unified .staff-hero-content p,
body.lamb-inner-hero-unified .gallery-hero-content p,
body.lamb-inner-hero-unified .rp-hero-content p,
body.lamb-inner-hero-unified .menu-hero-content p,
body.lamb-inner-hero-unified .hero > .container p,
body.lamb-inner-hero-unified .page-hero > .container p,
body.lamb-inner-hero-unified .inner-hero > .container p {
margin: 0 !important;
font-size: 18px !important;
line-height: 1.85 !important;
max-width: 920px !important;
}
@keyframes heroTextRiseUnified {
from { opacity: 0; transform: translateY(calc(-50% + 26px)); }
to { opacity: 1; transform: translateY(-50%); }
}
@media (max-width: 900px) {
body.lamb-inner-hero-unified .hero,
body.lamb-inner-hero-unified .page-hero,
body.lamb-inner-hero-unified .inner-hero,
body.lamb-inner-hero-unified .visit-hero,
body.lamb-inner-hero-unified .staff-hero,
body.lamb-inner-hero-unified .gallery-hero,
body.lamb-inner-hero-unified .rp-hero,
body.lamb-inner-hero-unified .menu-hero {
min-height: 380px !important;
height: 380px !important;
}
body.lamb-inner-hero-unified .hero-content,
body.lamb-inner-hero-unified .page-hero-content,
body.lamb-inner-hero-unified .inner-hero-content,
body.lamb-inner-hero-unified .visit-hero-content,
body.lamb-inner-hero-unified .staff-hero-content,
body.lamb-inner-hero-unified .gallery-hero-content,
body.lamb-inner-hero-unified .rp-hero-content,
body.lamb-inner-hero-unified .menu-hero-content,
body.lamb-inner-hero-unified .hero > .container,
body.lamb-inner-hero-unified .page-hero > .container,
body.lamb-inner-hero-unified .inner-hero > .container {
left: 32px !important;
width: calc(100% - 64px) !important;
}
}
/* End Lamb Cafe inner hero text unified layout patch */
/* ===== about.html inline styles ===== */
/* Lamb Cafe precise hero-inner vertical alignment patch */
/* Keep inner-page Hero itself stable and same height. */
body.lamb-inner-hero-unified .hero,
body.lamb-inner-hero-unified .page-hero,
body.lamb-inner-hero-unified .inner-hero,
body.lamb-inner-hero-unified .visit-hero,
body.lamb-inner-hero-unified .staff-hero,
body.lamb-inner-hero-unified .gallery-hero,
body.lamb-inner-hero-unified .rp-hero,
body.lamb-inner-hero-unified .menu-hero {
position: relative !important;
min-height: 430px !important;
height: 430px !important;
overflow: hidden !important;
display: block !important;
transform: none !important;
}
/* Real text container used by the current HTML. */
body.lamb-inner-hero-unified .hero > .hero-inner,
body.lamb-inner-hero-unified .page-hero > .hero-inner,
body.lamb-inner-hero-unified .inner-hero > .hero-inner,
body.lamb-inner-hero-unified .visit-hero > .hero-inner,
body.lamb-inner-hero-unified .staff-hero > .hero-inner,
body.lamb-inner-hero-unified .gallery-hero > .hero-inner,
body.lamb-inner-hero-unified .rp-hero > .hero-inner,
body.lamb-inner-hero-unified .menu-hero > .hero-inner {
position: absolute !important;
left: clamp(56px, 7.5vw, 116px) !important;
top: 50% !important;
bottom: auto !important;
transform: translateY(-50%) !important;
width: min(880px, calc(100% - 112px)) !important;
max-width: 880px !important;
margin: 0 !important;
padding: 0 !important;
z-index: 3 !important;
color: #fff !important;
text-align: left !important;
}
/* Stabilize the three text lines. */
body.lamb-inner-hero-unified .hero > .hero-inner h1,
body.lamb-inner-hero-unified .page-hero > .hero-inner h1,
body.lamb-inner-hero-unified .inner-hero > .hero-inner h1,
body.lamb-inner-hero-unified .visit-hero > .hero-inner h1,
body.lamb-inner-hero-unified .staff-hero > .hero-inner h1,
body.lamb-inner-hero-unified .gallery-hero > .hero-inner h1,
body.lamb-inner-hero-unified .rp-hero > .hero-inner h1,
body.lamb-inner-hero-unified .menu-hero > .hero-inner h1 {
margin: 0 0 10px !important;
font-size: clamp(58px, 5.9vw, 86px) !important;
line-height: 1.05 !important;
letter-spacing: .015em !important;
}
body.lamb-inner-hero-unified .hero > .hero-inner .hero-subtitle,
body.lamb-inner-hero-unified .page-hero > .hero-inner .hero-subtitle,
body.lamb-inner-hero-unified .inner-hero > .hero-inner .hero-subtitle,
body.lamb-inner-hero-unified .visit-hero > .hero-inner .hero-subtitle,
body.lamb-inner-hero-unified .staff-hero > .hero-inner .hero-subtitle,
body.lamb-inner-hero-unified .gallery-hero > .hero-inner .hero-subtitle,
body.lamb-inner-hero-unified .rp-hero > .hero-inner .hero-subtitle,
body.lamb-inner-hero-unified .menu-hero > .hero-inner .hero-subtitle,
body.lamb-inner-hero-unified .hero > .hero-inner .hero-en,
body.lamb-inner-hero-unified .page-hero > .hero-inner .hero-en,
body.lamb-inner-hero-unified .inner-hero > .hero-inner .hero-en {
display: block !important;
margin: 0 0 24px !important;
font-size: 26px !important;
line-height: 1.2 !important;
font-weight: 700 !important;
}
body.lamb-inner-hero-unified .hero > .hero-inner p,
body.lamb-inner-hero-unified .page-hero > .hero-inner p,
body.lamb-inner-hero-unified .inner-hero > .hero-inner p,
body.lamb-inner-hero-unified .visit-hero > .hero-inner p,
body.lamb-inner-hero-unified .staff-hero > .hero-inner p,
body.lamb-inner-hero-unified .gallery-hero > .hero-inner p,
body.lamb-inner-hero-unified .rp-hero > .hero-inner p,
body.lamb-inner-hero-unified .menu-hero > .hero-inner p {
margin: 0 !important;
font-size: 18px !important;
line-height: 1.85 !important;
max-width: 920px !important;
}
/* Hide empty decorative spacer/flourish only inside Hero text container. */
body.lamb-inner-hero-unified .hero > .hero-inner .hero-spacer,
body.lamb-inner-hero-unified .page-hero > .hero-inner .hero-spacer,
body.lamb-inner-hero-unified .inner-hero > .hero-inner .hero-spacer,
body.lamb-inner-hero-unified .visit-hero > .hero-inner .hero-spacer,
body.lamb-inner-hero-unified .staff-hero > .hero-inner .hero-spacer,
body.lamb-inner-hero-unified .gallery-hero > .hero-inner .hero-spacer,
body.lamb-inner-hero-unified .rp-hero > .hero-inner .hero-spacer,
body.lamb-inner-hero-unified .menu-hero > .hero-inner .hero-spacer,
body.lamb-inner-hero-unified .hero > .hero-inner .flourish:empty,
body.lamb-inner-hero-unified .page-hero > .hero-inner .flourish:empty,
body.lamb-inner-hero-unified .inner-hero > .hero-inner .flourish:empty,
body.lamb-inner-hero-unified .visit-hero > .hero-inner .flourish:empty,
body.lamb-inner-hero-unified .staff-hero > .hero-inner .flourish:empty,
body.lamb-inner-hero-unified .gallery-hero > .hero-inner .flourish:empty,
body.lamb-inner-hero-unified .rp-hero > .hero-inner .flourish:empty,
body.lamb-inner-hero-unified .menu-hero > .hero-inner .flourish:empty {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Text-only reveal; background stays fixed. */
body.lamb-inner-hero-unified .hero > .hero-inner.reveal,
body.lamb-inner-hero-unified .page-hero > .hero-inner.reveal,
body.lamb-inner-hero-unified .inner-hero > .hero-inner.reveal,
body.lamb-inner-hero-unified .visit-hero > .hero-inner.reveal,
body.lamb-inner-hero-unified .staff-hero > .hero-inner.reveal,
body.lamb-inner-hero-unified .gallery-hero > .hero-inner.reveal,
body.lamb-inner-hero-unified .rp-hero > .hero-inner.reveal,
body.lamb-inner-hero-unified .menu-hero > .hero-inner.reveal {
animation-name: heroInnerRiseUnifiedPrecise !important;
animation-duration: .9s !important;
animation-timing-function: ease !important;
animation-fill-mode: both !important;
}
@keyframes heroInnerRiseUnifiedPrecise {
from {
opacity: 0;
transform: translateY(calc(-50% + 26px));
}
to {
opacity: 1;
transform: translateY(-50%);
}
}
@media (max-width: 900px) {
body.lamb-inner-hero-unified .hero,
body.lamb-inner-hero-unified .page-hero,
body.lamb-inner-hero-unified .inner-hero,
body.lamb-inner-hero-unified .visit-hero,
body.lamb-inner-hero-unified .staff-hero,
body.lamb-inner-hero-unified .gallery-hero,
body.lamb-inner-hero-unified .rp-hero,
body.lamb-inner-hero-unified .menu-hero {
min-height: 380px !important;
height: 380px !important;
}
body.lamb-inner-hero-unified .hero > .hero-inner,
body.lamb-inner-hero-unified .page-hero > .hero-inner,
body.lamb-inner-hero-unified .inner-hero > .hero-inner,
body.lamb-inner-hero-unified .visit-hero > .hero-inner,
body.lamb-inner-hero-unified .staff-hero > .hero-inner,
body.lamb-inner-hero-unified .gallery-hero > .hero-inner,
body.lamb-inner-hero-unified .rp-hero > .hero-inner,
body.lamb-inner-hero-unified .menu-hero > .hero-inner {
left: 32px !important;
width: calc(100% - 64px) !important;
}
body.lamb-inner-hero-unified .hero > .hero-inner h1,
body.lamb-inner-hero-unified .page-hero > .hero-inner h1,
body.lamb-inner-hero-unified .inner-hero > .hero-inner h1,
body.lamb-inner-hero-unified .visit-hero > .hero-inner h1,
body.lamb-inner-hero-unified .staff-hero > .hero-inner h1,
body.lamb-inner-hero-unified .gallery-hero > .hero-inner h1,
body.lamb-inner-hero-unified .rp-hero > .hero-inner h1,
body.lamb-inner-hero-unified .menu-hero > .hero-inner h1 {
font-size: clamp(42px, 10vw, 64px) !important;
}
}
/* End Lamb Cafe precise hero-inner vertical alignment patch */
/* ===== about.html inline styles ===== */
/* Lamb Cafe inner hero left alignment correction */
/* Restore inner Hero text to the site's centered content column instead of browser-left alignment. */
body.lamb-inner-hero-unified .hero > .hero-inner,
body.lamb-inner-hero-unified .page-hero > .hero-inner,
body.lamb-inner-hero-unified .inner-hero > .hero-inner,
body.lamb-inner-hero-unified .visit-hero > .hero-inner,
body.lamb-inner-hero-unified .staff-hero > .hero-inner,
body.lamb-inner-hero-unified .gallery-hero > .hero-inner,
body.lamb-inner-hero-unified .rp-hero > .hero-inner,
body.lamb-inner-hero-unified .menu-hero > .hero-inner {
left: max(72px, calc((100vw - 1180px) / 2 + 24px)) !important;
width: min(880px, calc(100vw - max(72px, calc((100vw - 1180px) / 2 + 24px)) - 72px)) !important;
}
/* Keep the same text vertical animation while using the corrected left alignment. */
body.lamb-inner-hero-unified .hero > .hero-inner.reveal,
body.lamb-inner-hero-unified .page-hero > .hero-inner.reveal,
body.lamb-inner-hero-unified .inner-hero > .hero-inner.reveal,
body.lamb-inner-hero-unified .visit-hero > .hero-inner.reveal,
body.lamb-inner-hero-unified .staff-hero > .hero-inner.reveal,
body.lamb-inner-hero-unified .gallery-hero > .hero-inner.reveal,
body.lamb-inner-hero-unified .rp-hero > .hero-inner.reveal,
body.lamb-inner-hero-unified .menu-hero > .hero-inner.reveal {
animation-name: heroInnerRiseUnifiedPrecise !important;
}
@media (max-width: 900px) {
body.lamb-inner-hero-unified .hero > .hero-inner,
body.lamb-inner-hero-unified .page-hero > .hero-inner,
body.lamb-inner-hero-unified .inner-hero > .hero-inner,
body.lamb-inner-hero-unified .visit-hero > .hero-inner,
body.lamb-inner-hero-unified .staff-hero > .hero-inner,
body.lamb-inner-hero-unified .gallery-hero > .hero-inner,
body.lamb-inner-hero-unified .rp-hero > .hero-inner,
body.lamb-inner-hero-unified .menu-hero > .hero-inner {
left: 32px !important;
width: calc(100% - 64px) !important;
}
}
/* End Lamb Cafe inner hero left alignment correction */
/* ===== gallery.html inline styles ===== */
/* Lamb Cafe Gallery D+A travel journal story patch */
.gallery-album-intro {
max-width: 920px;
margin: 0 auto 32px;
text-align: center;
padding: 0 18px;
}
.gallery-album-intro h2 {
margin: 0 0 12px;
color: #123c31;
font-family: var(--serif, "Noto Serif TC", serif);
font-size: clamp(34px, 3.6vw, 50px);
letter-spacing: .08em;
}
.gallery-album-intro p {
margin: 0;
color: rgba(18, 60, 49, .74);
line-height: 1.9;
}
.gallery-filters {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin: 0 0 34px;
}
.gallery-filters button {
appearance: none;
border: 1px solid rgba(196, 154, 85, .46);
border-radius: 999px;
padding: 10px 18px;
background: rgba(255, 252, 244, .86);
color: #36524b;
font-family: inherit;
font-size: 14px;
letter-spacing: .06em;
cursor: pointer;
box-shadow: 0 10px 18px rgba(0,0,0,.04);
transition: transform .24s ease, box-shadow .24s ease, background .24s ease, color .24s ease;
}
.gallery-filters button:hover,
.gallery-filters button.active {
background: linear-gradient(135deg, #c79a4d 0%, #ad7f32 100%);
color: #fffaf2;
border-color: #b28434;
transform: translateY(-2px);
box-shadow: 0 14px 22px rgba(129, 94, 34, .22);
}
.gallery-journal-board {
position: relative;
max-width: 1180px;
margin: 0 auto;
padding: clamp(22px, 3vw, 38px);
border-radius: 34px;
background: linear-gradient(180deg, rgba(255, 252, 245, .92), rgba(255, 248, 233, .88));
border: 1px solid rgba(196, 154, 85, .38);
box-shadow: 0 26px 70px rgba(54, 37, 12, .12);
overflow: hidden;
}
.gallery-journal-board::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 16px;
background: linear-gradient(180deg, #194a3b, #0f3329);
opacity: .92;
}
.gallery-journal-note {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
margin: 0 0 24px;
padding: 12px 22px;
border-radius: 999px;
background: rgba(255, 255, 255, .56);
border: 1px solid rgba(183, 139, 61, .34);
color: rgba(18, 60, 49, .76);
line-height: 1.5;
}
.gallery-journal-note strong {
color: #143f33;
letter-spacing: .06em;
white-space: nowrap;
}
.gallery-travel-grid {
position: relative;
z-index: 1;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.gallery-travel-grid .journal-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 100%;
margin: 0;
padding: 12px 12px 18px;
border-radius: 22px;
background: rgba(255, 253, 247, .96);
border: 1px solid rgba(196,154,85,.38);
box-shadow: 0 16px 34px rgba(56, 39, 15, .10);
cursor: pointer;
overflow: visible;
transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.gallery-travel-grid .journal-card::before {
content: "";
position: absolute;
left: 50%;
top: -11px;
width: 86px;
height: 23px;
transform: translateX(-50%) rotate(-1deg);
border-radius: 4px;
background: linear-gradient(90deg, rgba(226, 206, 159, .72), rgba(255, 238, 190, .78), rgba(226, 206, 159, .72));
border: 1px solid rgba(156, 116, 46, .14);
box-shadow: 0 4px 10px rgba(82, 54, 13, .06);
pointer-events: none;
}
.gallery-travel-grid .journal-card:hover,
.gallery-travel-grid .journal-card:focus-visible {
transform: translateY(-5px);
border-color: rgba(196,154,85,.74);
box-shadow: 0 24px 46px rgba(43, 30, 12, .16);
outline: none;
}
.journal-photo {
position: relative;
border-radius: 16px;
overflow: hidden;
aspect-ratio: 4 / 3;
background: #eadfc9;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
}
.journal-photo img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transform: scale(1.01);
transition: transform .7s ease, filter .7s ease;
}
.gallery-travel-grid .journal-card:hover .journal-photo img,
.gallery-travel-grid .journal-card:focus-visible .journal-photo img {
transform: scale(1.045);
filter: brightness(1.05) saturate(1.04);
}
.journal-tag {
display: inline-flex;
align-self: flex-start;
margin: 16px 0 10px;
padding: 5px 11px;
border-radius: 999px;
background: #f5ead0;
color: #174f3d;
border: 1px solid rgba(196,154,85,.54);
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
}
.gallery-travel-grid h3 {
margin: 0 0 9px;
color: #143f33;
font-size: clamp(20px, 1.8vw, 25px);
line-height: 1.28;
letter-spacing: .04em;
font-family: var(--serif, "Noto Serif TC", serif);
}
.journal-card-note {
flex: 1;
margin: 0;
color: rgba(41, 64, 56, .78);
line-height: 1.78;
font-size: 14px;
}
.journal-card-more {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 15px;
color: #9a6c27;
font-weight: 800;
letter-spacing: .06em;
font-size: 13px;
}
.journal-card-more::after {
content: "→";
transition: transform .22s ease;
}
.gallery-travel-grid .journal-card:hover .journal-card-more::after,
.gallery-travel-grid .journal-card:focus-visible .journal-card-more::after {
transform: translateX(4px);
}
.gallery-travel-grid .gallery-filter-hidden {
display: none !important;
}
.gallery-story-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: 28px;
}
.gallery-story-lightbox.is-open {
display: flex;
}
.gallery-story-backdrop {
position: absolute;
inset: 0;
background: rgba(8, 28, 22, .72);
backdrop-filter: blur(5px);
}
.gallery-story-panel {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
width: min(1120px, 94vw);
max-height: min(760px, 88vh);
border-radius: 28px;
overflow: hidden;
background: #fff9ec;
border: 1px solid rgba(220, 178, 101, .62);
box-shadow: 0 34px 90px rgba(0, 0, 0, .34);
animation: galleryStoryIn .26s ease both;
}
@keyframes galleryStoryIn {
from { opacity: 0; transform: translateY(18px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.gallery-story-image {
min-height: 420px;
background: #e9dcc4;
}
.gallery-story-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.gallery-story-copy {
position: relative;
padding: clamp(26px, 3vw, 42px);
overflow-y: auto;
color: #173f33;
}
.gallery-story-label {
display: inline-flex;
margin-bottom: 14px;
padding: 6px 12px;
border-radius: 999px;
background: #f1e2bf;
border: 1px solid rgba(196,154,85,.55);
color: #174f3d;
font-size: 13px;
font-weight: 800;
letter-spacing: .08em;
}
.gallery-story-copy h3 {
margin: 0 0 16px;
font-family: var(--serif, "Noto Serif TC", serif);
font-size: clamp(30px, 3vw, 44px);
line-height: 1.16;
letter-spacing: .04em;
}
.gallery-story-text {
margin: 0 0 22px;
color: rgba(24, 63, 52, .78);
line-height: 1.95;
}
.gallery-story-rp-title {
margin: 0 0 10px;
font-weight: 900;
letter-spacing: .08em;
color: #214c3f;
}
.gallery-story-tags {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.gallery-story-tags span {
display: inline-flex;
padding: 7px 11px;
border-radius: 999px;
background: rgba(255,255,255,.72);
border: 1px solid rgba(196,154,85,.36);
color: #7a5724;
font-size: 13px;
font-weight: 700;
}
.gallery-story-close {
position: absolute;
right: 18px;
top: 18px;
z-index: 2;
width: 42px;
height: 42px;
border-radius: 999px;
border: 1px solid rgba(196,154,85,.52);
background: rgba(255, 250, 239, .92);
color: #173f33;
font-size: 26px;
line-height: 1;
cursor: pointer;
box-shadow: 0 10px 22px rgba(0,0,0,.12);
}
body.gallery-lightbox-open {
overflow: hidden;
}
/* Gallery D+A formal revision: clean card captions and remove development-note styling */
.gallery-travel-grid .journal-card figcaption {
position: relative !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
display: flex;
flex-direction: column;
padding: 10px 2px 0 !important;
background: transparent !important;
color: inherit !important;
text-shadow: none !important;
}
.gallery-travel-grid .journal-card span {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
padding: 0;
background: transparent;
color: inherit;
font-size: inherit;
}
.gallery-travel-grid .journal-card .journal-tag,
.gallery-travel-grid .journal-card .journal-card-note {
display: none !important;
}
.gallery-travel-grid .journal-card h3 {
margin: 0 0 10px !important;
color: #0f4a3a !important;
font-size: clamp(22px, 1.9vw, 27px) !important;
line-height: 1.2 !important;
letter-spacing: .035em;
text-shadow: none !important;
}
.gallery-travel-grid .journal-card .journal-card-more {
display: inline-flex !important;
align-items: center;
justify-content: center;
align-self: flex-start;
gap: 8px;
margin-top: 0;
padding: 9px 17px !important;
border-radius: 999px;
color: #fffdf4 !important;
background: linear-gradient(135deg, #255343, #17382e) !important;
border: 1px solid rgba(255, 250, 235, .34);
box-shadow: 0 10px 20px rgba(18, 45, 36, .18);
font-weight: 800;
letter-spacing: .06em;
font-size: 14px !important;
line-height: 1.25;
}
.gallery-travel-grid .journal-card .journal-card-more::after {
color: inherit;
}
@media (max-width: 980px) {
.gallery-travel-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gallery-story-panel {
grid-template-columns: 1fr;
max-height: 88vh;
overflow-y: auto;
}
.gallery-story-image {
min-height: 320px;
}
}
@media (max-width: 680px) {
.gallery-journal-board {
padding: 24px 18px;
border-radius: 26px;
}
.gallery-journal-note {
display: block;
padding: 14px 16px 14px 22px;
}
.gallery-journal-note strong {
display: block;
margin-bottom: 0;
}
.gallery-travel-grid {
grid-template-columns: 1fr;
gap: 22px;
}
.gallery-story-lightbox {
padding: 14px;
}
.gallery-story-image {
min-height: 250px;
}
}
/* End Lamb Cafe Gallery D+A travel journal story patch */
/* ===== gallery.html inline styles ===== */
/* Gallery formal cleanup: no filter row, no album pill, no RP tags in the story lightbox. */
.gallery-filters,
.gallery-journal-note,
.gallery-story-rp-title,
.gallery-story-tags {
display: none !important;
}
.gallery-journal-board {
padding-top: clamp(30px, 3.4vw, 42px);
}
.gallery-album-intro h2 {
letter-spacing: .12em;
}
/* ===== staff.html inline styles ===== */
:root{--cream:#fbf7ed;--ink:#25382f;--green:#24463c;--gold:#b38a49;--shadow-strong:0 30px 86px rgba(34,27,18,.24);--max:1180px;--speed:600ms;--ease:cubic-bezier(.16,.84,.22,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Georgia,"Times New Roman","Noto Serif TC","Songti TC",serif;letter-spacing:.025em}a{color:inherit;text-decoration:none}.container{width:min(var(--max),calc(100% - 44px));margin:0 auto}
.page{min-height:100vh;background:radial-gradient(circle at 12% 10%,rgba(255,255,255,.76),transparent 34%),linear-gradient(180deg,#fffdf7 0%,#fbf7ed 42%,#f4eadb 100%)}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,252,245,.94);backdrop-filter:blur(10px);border-bottom:1px solid #e5d6b9;box-shadow:0 8px 24px rgba(83,59,29,.08)}.nav{height:128px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{width:130px;display:flex;align-items:center;justify-content:center;align-self:stretch}.brand img{width:116px;height:116px;object-fit:contain;filter:drop-shadow(0 7px 14px rgba(90,65,35,.16))}.navlinks{display:flex;gap:38px;align-items:center;justify-content:flex-end;flex:1}.navlinks a{font-family:Cinzel,Georgia,serif;text-transform:uppercase;text-align:center;font-weight:700;color:#2b2d29;font-size:15px;letter-spacing:.08em;padding:20px 0 18px;position:relative}.navlinks a span{display:block;font-size:12px;font-family:'Noto Serif TC','Songti TC',serif;color:#827a67;font-weight:600;margin-top:4px;letter-spacing:.05em}.navlinks a.active{color:#9c7539}.navlinks a.active::after{content:"";position:absolute;left:50%;bottom:9px;width:54px;height:2px;background:var(--gold);transform:translateX(-50%)}
.hero{min-height:430px;display:flex;align-items:center;border-bottom:1px solid rgba(179,138,73,.36);background:linear-gradient(90deg,rgba(14,36,31,.86) 0%,rgba(21,45,39,.62) 42%,rgba(21,45,39,.20) 78%),url('./assets/hero-staff.webp') center/cover no-repeat;position:relative}.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 45%,rgba(250,244,226,.06),transparent 30%),linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.12));pointer-events:none}.hero-inner{position:relative;z-index:2;color:#fff;width:min(650px,calc(100% - 80px));margin-left:max(42px,calc((100vw - var(--max))/2));padding:70px 0}.hero-spacer{height:30px;margin-bottom:12px}.hero h1{font-size:clamp(46px,5.5vw,76px);line-height:1.05;margin:0;font-weight:400;text-shadow:0 4px 24px rgba(0,0,0,.45)}.hero .subtitle{font-size:26px;margin-top:10px;text-shadow:0 3px 16px rgba(0,0,0,.45)}.hero p{font-size:18px;line-height:2;margin:26px 0 0;color:#f2eadb}
.staff-section{padding:66px 0 88px;background:linear-gradient(180deg,rgba(255,253,247,.78),rgba(247,240,226,.72))}.section-title{text-align:center;margin-bottom:34px}.eyebrow{font-size:14px;color:var(--gold);letter-spacing:.12em}.section-title h2{font-size:clamp(31px,3vw,43px);font-weight:400;margin:7px 0 4px;color:#30483f;letter-spacing:.08em}.orn-line{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold);margin:12px 0}.orn-line::before,.orn-line::after{content:"";width:74px;height:1px;background:#d9c59b}
.staff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;align-items:stretch}.staff-card{position:relative;min-height:500px;display:grid;grid-template-rows:300px 1fr;overflow:hidden;cursor:pointer;background:rgba(255,252,246,.88);border:1px solid rgba(207,184,139,.62);box-shadow:0 14px 34px rgba(80,62,36,.10);transform-origin:center center;will-change:transform;transition:box-shadow var(--speed) var(--ease),border-color var(--speed) var(--ease),background-color var(--speed) var(--ease),opacity var(--speed) var(--ease)}.staff-card.is-moving{transition:none!important}.staff-card:hover{box-shadow:0 24px 60px rgba(48,36,18,.18);border-color:rgba(183,138,73,.72)}.staff-card.expanded{grid-column:1/-1;grid-template-columns:42% 58%;grid-template-rows:1fr;min-height:auto;cursor:default;background:rgba(255,252,246,.96);border-color:rgba(183,138,73,.75);box-shadow:var(--shadow-strong)}
.portrait{position:relative;min-height:300px;overflow:hidden;background:var(--placeholder,linear-gradient(135deg,#24463c,#b8b09a));transition:min-height var(--speed) var(--ease),filter var(--speed) var(--ease)}.portrait img{width:100%;height:100%;min-height:300px;object-fit:cover;object-position:center top;display:block}.portrait .placeholder-fill{width:100%;height:100%;min-height:300px;background:var(--placeholder)}.portrait::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.22;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.08),transparent 34%),linear-gradient(180deg,rgba(15,55,45,.00),rgba(15,55,45,.10))}.portrait::after{content:"";position:absolute;inset:auto 0 0 0;height:20%;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(18,44,37,.18),transparent)}.staff-card.expanded .portrait{min-height:760px;filter:saturate(1.04) contrast(1.02)}.staff-card.expanded .portrait img,.staff-card.expanded .portrait .placeholder-fill{min-height:760px}
.card-body{position:relative;display:flex;flex-direction:column;justify-content:flex-start;padding:28px 30px 30px;transition:padding var(--speed) var(--ease)}.staff-card:not(.expanded) .card-body{text-align:center;align-items:center}.name{margin:0;color:#123f38;font-size:32px;font-weight:400;letter-spacing:.08em;line-height:1.2;transition:font-size var(--speed) var(--ease)}.staff-card.expanded .name{font-size:42px}.game-id{display:none;color:#8f6c35;font-size:15px;letter-spacing:.08em;margin-top:8px}.staff-card.expanded .game-id{display:block}.role{margin:10px 0 18px;color:#9d7538;font-size:14px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;line-height:1.4}.short{color:#66665b;line-height:1.85;font-size:15px;margin:0}.staff-card:not(.expanded) .short{max-width:86%;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.more{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;transition:grid-template-rows var(--speed) var(--ease),opacity 420ms ease}.more-inner{min-height:0;overflow:hidden}.staff-card.expanded .more{grid-template-rows:1fr;opacity:1;transition:grid-template-rows var(--speed) var(--ease),opacity 420ms ease 160ms}.expanded-intro{margin-top:26px;padding-top:24px;border-top:1px solid rgba(183,138,73,.26);font-size:16px}.detail-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-top:22px}.detail-box{min-height:70px;border-left:2px solid var(--gold);padding-left:14px}.detail-box b{display:block;color:#24463c;font-size:15px;margin-bottom:6px;letter-spacing:.06em}.detail-box span{color:#66665b;line-height:1.7;font-size:14px}.photo-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:24px}.photo-strip:empty{display:none}.photo-strip .thumb{height:170px;border:1px solid rgba(183,138,73,.32);overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.08);cursor:zoom-in;background:#fffaf2}.photo-strip img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.close-btn{position:absolute;top:22px;right:22px;z-index:4;border:1px solid rgba(183,138,73,.55);background:#fff8eb;color:#24463c;padding:8px 13px;font-family:inherit;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity 360ms ease,transform 360ms ease,background-color 260ms ease}.close-btn:hover{background:#f6ead6;transform:translateY(-1px)}.staff-card.expanded .close-btn{opacity:1;pointer-events:auto;transform:translateY(0);transition-delay:240ms}
.hover-preview{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;pointer-events:none;opacity:0;background:rgba(13,31,27,.34);backdrop-filter:blur(3px);transition:opacity var(--speed) var(--ease)}.hover-preview.show{opacity:1}.preview-stage{position:relative;width:min(86vw,1120px);height:min(82vh,900px);max-height:82vh}.preview-layer{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.88);transition:opacity var(--speed) var(--ease),transform var(--speed) var(--ease)}.preview-layer.visible{opacity:1;transform:scale(1)}.preview-layer img{max-width:82vw;max-height:min(82vh,900px);width:auto;height:auto;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 30px 80px rgba(0,0,0,.42))}
.footer{background:#24463c;color:#f0e8d6;padding:46px 0 26px;border-top:1px solid rgba(214,189,133,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}.footer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;max-width:760px;justify-items:center;text-align:left}.footer-grid>div{width:100%;max-width:300px}.footer h4{margin:0 0 12px;color:#d9bd7a;font-weight:600;letter-spacing:.08em}.footer p{margin:0;line-height:1.9;color:#e5dac0}.footer-bottom{text-align:center;margin-top:28px;padding-top:18px;border-top:1px solid rgba(221,195,137,.25);font-size:13px;color:#cfc1a3}
@media(max-width:900px){.nav{height:auto;padding:12px 0}.brand img{width:90px;height:90px}.navlinks{gap:14px;flex-wrap:wrap}.hero{min-height:420px}.hero-inner{margin-left:22px;width:calc(100% - 44px)}.staff-grid{grid-template-columns:1fr}.staff-card.expanded{grid-template-columns:1fr}.staff-card.expanded .portrait,.staff-card.expanded .portrait img,.staff-card.expanded .portrait .placeholder-fill{min-height:520px}.detail-grid{grid-template-columns:1fr}.photo-strip{grid-template-columns:1fr}.photo-strip .thumb{height:220px}.footer-grid{grid-template-columns:1fr;text-align:center}}
/* ===== staff.html inline styles ===== */
/* STAFF reveal observer */
.staff-page .reveal {
opacity: 0;
transform: translateY(16px);
transition: .7s ease;
}
.staff-page .reveal.show {
opacity: 1;
transform: none;
}
/* ===== visit.html inline styles ===== */
.visit-card a {
color: #9c7539;
text-decoration: underline;
text-underline-offset: 3px;
word-break: break-word;
}
/* ===== visit.html inline styles ===== */
/* VISIT relayout preview - centered map modal adjusted */
.visit-hero {
min-height: 430px;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(179,138,73,.36);
background:
linear-gradient(90deg, rgba(14,36,31,.82) 0%, rgba(21,45,39,.56) 46%, rgba(21,45,39,.18) 82%),
url('/manus-storage/hero-visit_23883eda.webp') center/cover no-repeat;
position: relative;
}
.visit-hero .hero-inner {
position: relative;
z-index: 2;
color: #fff;
width: min(650px, calc(100% - 80px));
margin-left: max(42px, calc((100vw - 1180px)/2));
padding: 70px 0;
}
.visit-hero h1 {
font-size: clamp(46px,5.5vw,76px);
line-height: 1.05;
margin: 0;
font-weight: 400;
text-shadow: 0 4px 24px rgba(0,0,0,.45);
}
.visit-hero .subtitle {
font-size: 26px;
margin-top: 10px;
text-shadow: 0 3px 16px rgba(0,0,0,.45);
}
.visit-hero p {
font-size: 18px;
line-height: 2;
margin: 26px 0 0;
color: #f2eadb;
}
.visit-main-section {
padding: 64px 0 48px;
background: linear-gradient(180deg, rgba(255,253,247,.78), rgba(247,240,226,.72));
}
.visit-layout {
display: grid;
grid-template-columns: minmax(0, 3.5fr) minmax(190px, .52fr);
gap: 18px;
align-items: stretch;
border: 1px solid rgba(179,138,73,.42);
background: rgba(238,226,202,.58);
padding: 18px;
box-shadow: 0 22px 58px rgba(68,48,22,.13);
}
.map-panel { min-width: 0; }
.map-frame {
position: relative;
width: fit-content;
max-width: 100%;
margin: 0 auto;
display: grid;
place-items: center;
overflow: visible;
border: 1px solid rgba(179,138,73,.48);
background: rgba(255,249,235,.18);
line-height: 0;
}
.visit-map-image {
width: auto;
max-width: 100%;
height: auto;
max-height: 640px;
object-fit: contain;
object-position: center center;
display: block;
}
.map-open-btn {
position: absolute;
right: 24px;
bottom: 108px;
min-width: 150px;
min-height: 48px;
padding: 0 22px;
border: 1px solid rgba(218,190,127,.86);
background: #24463c;
color: #f8ecd5;
font-family: inherit;
font-weight: 700;
letter-spacing: .08em;
cursor: pointer;
box-shadow: 0 14px 34px rgba(32,48,37,.28);
transition: transform .35s ease, box-shadow .35s ease, background-color .35s ease;
}
.map-open-btn:hover {
transform: translateY(-2px);
background: #2e594b;
}
.visit-side {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 16px;
}
.visit-side-card,
.contact-discord-card {
width: min(1040px, 100%);
margin: 0 auto;
display: grid;
grid-template-columns: auto 1fr;
place-items: center start;
text-align: left;
gap: 18px;
min-height: 88px;
padding: 18px 34px;
border: 1px solid rgba(179,138,73,.42);
background: rgba(255,252,246,.78);
box-shadow: 0 14px 36px rgba(70,50,24,.08);
}
.visit-side-card .ico {
color: #b37a2e;
}
.visit-side-card .ico img,
.contact-discord-card .ico img {
width: 34px;
height: 34px;
object-fit: contain;
}
.visit-side-card h3,
.contact-discord-card h3 {
color: #143d36;
font-size: 19px;
margin: 14px 0 12px;
letter-spacing: .08em;
}
.visit-side-card p,
.contact-discord-card p {
margin: 0;
line-height: 1.75;
letter-spacing: .04em;
}
.contact-discord-card-section {
padding: 28px 0 18px;
background: linear-gradient(180deg, rgba(247,240,226,.72), rgba(255,253,247,.9));
border-top: 1px solid rgba(179,138,73,.18);
}
.contact-discord-card {
max-width: 760px;
margin: 0 auto;
grid-template-columns: auto 1fr;
place-items: center start;
text-align: left;
gap: 18px;
padding: 24px 34px;
}
.contact-discord-card a,
.visit-card a,
.info-card a,
.contact-card a {
color: #9c7539;
text-decoration: underline;
text-underline-offset: 3px;
word-break: break-word;
}
/* Full map modal: 10% smaller, centered */
.full-map-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
background: rgba(13, 31, 27, .38);
backdrop-filter: blur(4px);
transition: opacity 1500ms cubic-bezier(.16,.84,.22,1);
}
.full-map-modal.show {
opacity: 1;
pointer-events: auto;
}
.full-map-stage {
position: relative;
display: block;
width: auto;
height: auto;
max-width: 99vw;
max-height: 84vh;
margin: 0 auto;
line-height: 0;
}
.full-map-stage img {
display: block;
max-width: 99vw;
max-height: 84vh;
width: auto;
height: auto;
object-fit: contain;
filter: drop-shadow(0 30px 80px rgba(0,0,0,.42));
transform: scale(.9);
opacity: 0;
transition: transform 1500ms cubic-bezier(.16,.84,.22,1), opacity 1500ms cubic-bezier(.16,.84,.22,1);
}
.full-map-modal.show .full-map-stage img {
transform: scale(1);
opacity: 1;
}
.full-map-close {
position: absolute;
right: 18px;
bottom: 18px;
min-width: 96px;
min-height: 42px;
border: 1px solid rgba(218,190,127,.88);
background: #24463c;
color: #f8ecd5;
font-family: inherit;
letter-spacing: .08em;
cursor: pointer;
box-shadow: 0 12px 28px rgba(0,0,0,.22);
line-height: 1.2;
}
/* Discord panel */
.discord-panel {
padding: 58px 0 94px;
background:
radial-gradient(circle at 12% 18%, rgba(255,255,255,.75), transparent 30%),
linear-gradient(180deg, rgba(255,253,247,.95), rgba(246,237,219,.86));
border-top: 1px solid rgba(179,138,73,.18);
}
.discord-panel-inner {
display: grid;
grid-template-columns: minmax(320px, .82fr) minmax(420px, 1.18fr);
gap: 34px;
align-items: stretch;
}
.discord-copy {
border: 1px solid rgba(179,138,73,.42);
background: rgba(255,252,246,.78);
box-shadow: 0 18px 48px rgba(70,50,24,.10);
padding: 42px 38px;
}
.discord-copy h2 {
margin: 10px 0 6px;
color: #25463d;
font-weight: 400;
font-size: clamp(32px, 3.4vw, 48px);
letter-spacing: .08em;
}
.discord-lead {
color: #62675d;
line-height: 2;
margin: 24px 0 22px;
letter-spacing: .05em;
}
.discord-channel-list {
display: grid;
gap: 12px;
margin: 24px 0 28px;
}
.discord-channel-list a {
display: grid;
grid-template-columns: 52px 1fr;
grid-template-rows: auto auto;
column-gap: 14px;
align-items: center;
padding: 14px 16px;
border: 1px solid rgba(179,138,73,.32);
background: rgba(255,248,235,.68);
text-decoration: none;
color: #24463c;
transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}
.discord-channel-list a:hover {
transform: translateY(-2px);
border-color: rgba(179,138,73,.72);
box-shadow: 0 12px 28px rgba(60,43,22,.12);
}
.channel-tag {
grid-row: 1 / 3;
width: 46px;
height: 46px;
display: grid;
place-items: center;
border-radius: 999px;
border: 1px solid rgba(179,138,73,.5);
color: #9c7539;
font-size: 12px;
letter-spacing: .08em;
}
.discord-channel-list strong {
font-size: 16px;
letter-spacing: .04em;
}
.discord-channel-list small {
color: #777267;
margin-top: 3px;
letter-spacing: .04em;
}
.discord-join-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 24px;
border: 1px solid rgba(179,138,73,.72);
background: #24463c;
color: #f8ecd5;
text-decoration: none;
letter-spacing: .08em;
box-shadow: 0 12px 28px rgba(36,70,60,.22);
}
.discord-frame-card {
min-height: 660px;
border: 1px solid rgba(179,138,73,.46);
background: rgba(255,252,246,.82);
box-shadow: 0 24px 68px rgba(47,36,18,.18);
overflow: hidden;
display: grid;
grid-template-rows: auto 1fr;
}
.discord-frame-title {
min-height: 62px;
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
background: linear-gradient(90deg, #24463c, #31594d);
color: #f8ecd5;
border-bottom: 1px solid rgba(179,138,73,.45);
}
.discord-frame-card iframe {
width: 100%;
height: 100%;
min-height: 598px;
border: 0;
background: #1e1f2f;
}
@media (max-width: 980px) {
.visit-hero .hero-inner {
margin-left: 22px;
width: calc(100% - 44px);
}
.visit-layout,
.discord-panel-inner {
grid-template-columns: 1fr;
}
.map-open-btn {
right: 18px;
bottom: 48px;
}
.visit-side {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.discord-frame-card {
min-height: 620px;
}
.discord-frame-card iframe {
min-height: 560px;
}
}
@media (max-width: 620px) {
.visit-layout {
padding: 16px;
}
.visit-side {
grid-template-columns: 1fr;
}
.contact-discord-card {
grid-template-columns: 1fr;
text-align: center;
place-items: center;
}
}
/* ===== visit.html inline styles ===== */
/* VISIT latest contact and map modal refinements */
.contact-discord-card .contact-lines {
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline;
gap: 18px;
width: 100%;
}
.contact-discord-card .contact-lines h3 {
margin: 0;
white-space: nowrap;
}
.contact-discord-card .contact-lines p {
margin: 0;
}
@media (max-width: 720px) {
.contact-discord-card .contact-lines {
grid-template-columns: 1fr;
gap: 8px;
}
}
/* ===== visit.html inline styles ===== */
/* Final VISIT corrections */
.contact-discord-card-section { display: none !important; }
.visit-side-card {
border: 1px solid rgba(179,138,73,.38) !important;
background: linear-gradient(180deg, rgba(239,226,201,.82), rgba(248,241,226,.76)) !important;
padding: 22px 16px !important;
display: grid !important;
grid-template-columns: auto 1fr !important;
grid-template-rows: auto auto !important;
column-gap: 12px !important;
row-gap: 8px !important;
align-content: center !important;
align-items: center !important;
text-align: left !important;
}
.visit-side-card .ico {
display: grid !important;
place-items: center !important;
}
.visit-side-card .ico img {
width: 30px !important;
height: 30px !important;
object-fit: contain !important;
}
.visit-side-card h3 {
margin: 0 !important;
font-size: 18px !important;
white-space: nowrap !important;
letter-spacing: .06em !important;
}
.visit-side-card p {
grid-column: 1 / -1 !important;
text-align: center !important;
margin: 8px 0 0 !important;
line-height: 1.7 !important;
word-break: keep-all !important;
}
.full-map-modal {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.full-map-stage {
max-width: 99vw !important;
max-height: 84vh !important;
margin: 0 auto !important;
}
.full-map-stage img {
max-width: 99vw !important;
max-height: 84vh !important;
}
.map-open-btn {
bottom: 108px !important;
}
/* ===== visit.html inline styles ===== */
/* VISIT map/info refined panel */
.visit-layout {
background:
radial-gradient(circle at 20% 10%, rgba(255,255,255,.38), transparent 26%),
linear-gradient(180deg, rgba(239,226,201,.72), rgba(246,238,220,.62)) !important;
border: 1px solid rgba(179,138,73,.34) !important;
box-shadow: 0 24px 64px rgba(68,48,22,.12) !important;
}
.visit-side {
position: relative !important;
justify-items: center !important;
align-items: stretch !important;
padding-left: 18px !important;
border-left: 1px solid rgba(179,138,73,.28) !important;
}
.visit-side::before {
content: "";
position: absolute;
left: 8px;
top: 22px;
bottom: 22px;
width: 1px;
background: linear-gradient(
180deg,
transparent,
rgba(179,138,73,.42),
rgba(179,138,73,.18),
transparent
);
}
.visit-side-card {
width: calc(100% - 30px) !important;
max-width: 230px !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
border: 1px solid rgba(179,138,73,.30) !important;
background:
radial-gradient(circle at 50% 0%, rgba(255,255,255,.42), transparent 45%),
linear-gradient(180deg, rgba(238,224,197,.86), rgba(250,244,231,.78)) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.22),
0 10px 24px rgba(70,50,24,.07) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 24px 16px !important;
}
.visit-side-card + .visit-side-card {
position: relative;
}
.visit-side-card + .visit-side-card::before {
content: "◆";
position: absolute;
top: -24px;
left: 50%;
transform: translateX(-50%);
color: rgba(179,138,73,.55);
font-size: 10px;
line-height: 1;
background: rgba(246,238,220,.9);
padding: 0 8px;
}
.visit-side-card .ico {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
margin: 0 0 12px 0 !important;
}
.visit-side-card .ico img {
width: 30px !important;
height: 30px !important;
object-fit: contain !important;
display: block !important;
filter: sepia(.25) saturate(1.08);
}
.visit-side-card h3 {
width: 100% !important;
margin: 0 0 14px 0 !important;
padding: 0 !important;
color: #143d36 !important;
font-size: 18px !important;
line-height: 1.4 !important;
letter-spacing: .06em !important;
text-align: center !important;
white-space: nowrap !important;
}
.visit-side-card p {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
color: #20352f !important;
line-height: 1.75 !important;
letter-spacing: .03em !important;
text-align: center !important;
word-break: keep-all !important;
}
.map-frame {
border: 1px solid rgba(179,138,73,.42) !important;
background: rgba(255,249,235,.12) !important;
box-shadow: 0 10px 28px rgba(50,35,16,.08) !important;
}
.map-open-btn {
border-color: rgba(218,190,127,.9) !important;
background: rgba(36,70,60,.94) !important;
box-shadow:
0 14px 34px rgba(32,48,37,.25),
inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
.map-open-btn:hover {
background: rgba(46,89,75,.96) !important;
box-shadow:
0 18px 42px rgba(32,48,37,.32),
0 0 18px rgba(218,190,127,.24) !important;
}
.full-map-modal {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.full-map-stage {
max-width: 99vw !important;
max-height: 84vh !important;
margin: 0 auto !important;
}
.full-map-stage img {
max-width: 99vw !important;
max-height: 84vh !important;
}
.map-open-btn {
bottom: 108px !important;
}
@media (max-width: 980px) {
.visit-side {
padding-left: 0 !important;
border-left: 0 !important;
}
.visit-side::before {
display: none !important;
}
.visit-side-card {
max-width: none !important;
width: 100% !important;
}
}
/* ===== visit.html inline styles ===== */
/* VISIT cleanup: remove card separator mark and duplicate vertical line */
.visit-side-card + .visit-side-card::before {
content: none !important;
display: none !important;
}
.visit-side::before {
display: none !important;
content: none !important;
}
.visit-side {
border-left: 1px solid rgba(179,138,73,.28) !important;
}
/* ===== visit.html inline styles ===== */
/* VISIT new map modal final sizing */
.full-map-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex !important;
align-items: center !important;
justify-content: center !important;
pointer-events: none;
opacity: 0;
background: rgba(13, 31, 27, .38);
backdrop-filter: blur(4px);
transition: opacity 1500ms cubic-bezier(.16,.84,.22,1);
}
.full-map-modal.show {
opacity: 1;
pointer-events: auto;
}
.full-map-stage {
position: relative;
display: block;
width: auto;
height: auto;
max-width: 99vw;
max-height: 84vh;
margin: 0 auto;
line-height: 0;
}
.full-map-stage img {
display: block;
max-width: 99vw;
max-height: 84vh;
width: auto;
height: auto;
object-fit: contain;
filter: drop-shadow(0 30px 80px rgba(0,0,0,.42));
transform: scale(.9);
opacity: 0;
transition: transform 1500ms cubic-bezier(.16,.84,.22,1), opacity 1500ms cubic-bezier(.16,.84,.22,1);
}
.full-map-modal.show .full-map-stage img {
transform: scale(1);
opacity: 1;
}
.full-map-close {
position: absolute;
right: 18px;
bottom: 18px;
min-width: 96px;
min-height: 42px;
border: 1px solid rgba(218,190,127,.88);
background: #24463c;
color: #f8ecd5;
font-family: inherit;
letter-spacing: .08em;
cursor: pointer;
box-shadow: 0 12px 28px rgba(0,0,0,.22);
line-height: 1.2;
}
.map-open-btn {
bottom: 108px !important;
}
/* ===== visit.html inline styles ===== */
/* VISIT Discord new structured layout */
.discord-switch-panel{padding:78px 0 88px;background:radial-gradient(circle at 12% 18%,rgba(255,255,255,.58),transparent 28%),linear-gradient(180deg,rgba(255,253,247,.96),rgba(246,238,220,.88));border-top:1px solid rgba(179,138,73,.24)}
.discord-layout-container{width:min(1180px,calc(100% - 56px));margin:0 auto}
.discord-section-head{max-width:820px;margin:0 auto 34px;text-align:center}
.discord-section-head .section-kicker{color:#b18442;font-size:13px;letter-spacing:.22em;margin:0 0 14px;text-transform:uppercase}
.discord-section-head h2{color:#143d36;font-size:clamp(38px,4vw,56px);line-height:1.12;margin:0;font-weight:400}
.ornament-line{width:180px;height:1px;margin:22px auto 24px;background:linear-gradient(90deg,transparent,rgba(179,138,73,.76),transparent);position:relative}
.ornament-line:after{content:"◆";position:absolute;left:50%;top:50%;transform:translate(-50%,-54%);color:#b18442;background:rgba(255,252,246,.96);padding:0 10px;font-size:10px}
.discord-section-head p{color:#42564f;line-height:2;margin:0;font-size:15px}
.discord-main-row{display:grid;grid-template-columns:minmax(310px,390px) minmax(560px,1fr);gap:30px;align-items:start}
.discord-channel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start;border:1px solid rgba(179,138,73,.36);background:rgba(255,252,246,.82);padding:22px;box-shadow:0 18px 48px rgba(68,48,22,.09)}
.discord-channel-btn{width:100%;min-height:112px;border:1px solid rgba(179,138,73,.35);background:rgba(255,250,239,.72);display:grid;grid-template-rows:auto auto auto;justify-items:center;align-items:center;gap:6px;text-align:center;padding:14px 10px;color:#1c3e36;font-family:inherit;cursor:pointer;transition:.28s ease}
.discord-channel-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(70,50,24,.12)}
.discord-channel-btn.active{background:linear-gradient(135deg,#193f36,#285848);color:#fff6df;border-color:rgba(218,190,127,.86);box-shadow:0 14px 28px rgba(28,54,45,.22)}
.channel-icon{display:block;font-size:22px;line-height:1}.channel-name{display:block;font-size:16px;font-weight:700;letter-spacing:.05em}.channel-desc{display:block;font-size:11px;opacity:.74;line-height:1.55}
.discord-iframe-shell{border:1px solid rgba(179,138,73,.42);background:#20242b;box-shadow:0 26px 70px rgba(29,32,34,.25);overflow:hidden;align-self:start;height:auto;min-height:0}
.discord-iframe-head{min-height:74px;display:flex;align-items:center;background:linear-gradient(135deg,#193f36,#295242);color:#fff6df;padding:0 22px;border-bottom:1px solid rgba(218,190,127,.44)}
.discord-iframe-head>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.discord-dot{width:10px;height:10px;border-radius:999px;display:inline-block;background:#7bdc92;box-shadow:0 0 12px rgba(123,220,146,.8)}.discord-iframe-head small{color:#e7d7b5}
.discord-iframe-viewport{position:relative;overflow:hidden;height:430px;background:#20242b}
.discord-iframe-viewport iframe{display:block;border:0;height:535px;width:calc(100% + 205px);max-width:none;transform:translate(-205px,-105px);background:#20242b}
.discord-join-row{display:flex;justify-content:center;margin-top:30px}.discord-join-button{min-height:58px;min-width:min(100%,420px);padding:0 34px;display:inline-flex;align-items:center;justify-content:center;gap:12px;text-decoration:none;color:#f8ecd5;background:linear-gradient(135deg,#143d36,#285848);border:1px solid rgba(218,190,127,.88);box-shadow:0 14px 30px rgba(35,61,52,.22);letter-spacing:.06em;font-weight:700}
@media(max-width:980px){.discord-layout-container{width:min(100% - 32px,760px)}.discord-main-row{grid-template-columns:1fr}.discord-channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.discord-iframe-viewport{height:385px}.discord-iframe-viewport iframe{height:490px;width:calc(100% + 180px);transform:translate(-180px,-105px)}}
@media(max-width:560px){.discord-channel-grid{grid-template-columns:1fr}}
/* ===== visit.html inline styles ===== */
/* VISIT Discord header mask adjustment */
/* Keep previous map and address refinements. */
.map-open-btn,
.js-open-full-map {
right: 94px !important;
bottom: 76px !important;
}
.visit-side-card,
.visit-info-card,
.visit-detail-card {
box-sizing: border-box;
}
.visit-side-card {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
.visit-side-card h3,
.visit-side-card p {
text-align: center !important;
}
.visit-side-card p {
margin-left: auto !important;
margin-right: auto !important;
}
.full-map-close {
right: 58px !important;
bottom: 48px !important;
}
/* Keep the 6-button block visually aligned with the right panel. */
.discord-main-row {
align-items: stretch !important;
}
.discord-channel-grid {
height: 100% !important;
align-self: stretch !important;
grid-template-rows: repeat(3, 1fr) !important;
}
.discord-channel-btn {
min-height: 0 !important;
height: 100% !important;
}
.discord-iframe-shell {
align-self: stretch !important;
}
/* Keep intro text in one line on desktop. */
.discord-section-head {
max-width: min(1180px, calc(100vw - 80px)) !important;
}
.discord-section-head p {
white-space: nowrap !important;
font-size: 15px !important;
line-height: 1.9 !important;
}
/* Green custom title bar: restore to a lower, natural height. */
.discord-iframe-head {
min-height: 64px !important;
padding: 0 22px !important;
}
.discord-iframe-head > div {
align-items: center !important;
}
.discord-iframe-head strong {
font-size: 17px !important;
letter-spacing: .035em !important;
line-height: 1.2 !important;
}
.discord-iframe-head small {
font-size: 13px !important;
line-height: 1.2 !important;
}
.discord-dot {
width: 10px !important;
height: 10px !important;
}
/* Scheme B: mask the tiny exposed WidgetBot avatar at the top of the cropped iframe. */
.discord-iframe-viewport {
position: relative !important;
overflow: hidden !important;
height: 430px !important;
}
.discord-iframe-viewport::before {
content: "";
position: absolute;
z-index: 5;
top: 0;
left: 0;
right: 0;
height: 24px;
background: #343942;
pointer-events: none;
}
.discord-iframe-viewport iframe {
height: 535px !important;
}
@media (max-width: 980px) {
.discord-section-head p {
white-space: normal !important;
}
.discord-channel-grid {
height: auto !important;
grid-template-rows: auto !important;
}
.discord-channel-btn {
min-height: 112px !important;
}
.discord-iframe-head {
min-height: 58px !important;
}
.discord-iframe-head strong {
font-size: 16px !important;
}
.discord-iframe-head small {
font-size: 12px !important;
}
.discord-iframe-viewport {
height: 385px !important;
}
.discord-iframe-viewport::before {
height: 20px;
}
.map-open-btn,
.js-open-full-map {
right: 52px !important;
bottom: 60px !important;
}
.full-map-close {
right: 34px !important;
bottom: 34px !important;
}
}
/* End VISIT Discord header mask adjustment */
/* ===== visit.html inline styles ===== */
/* VISIT Discord wide tall single-column buttons */
.discord-switch-panel {
padding-top: 78px !important;
padding-bottom: 94px !important;
}
.discord-layout-container {
width: min(1320px, calc(100% - 56px)) !important;
}
.discord-section-head {
max-width: min(1180px, calc(100vw - 80px)) !important;
margin-bottom: 34px !important;
}
.discord-section-head p {
white-space: nowrap !important;
font-size: 15px !important;
line-height: 1.9 !important;
}
.discord-main-row {
grid-template-columns: minmax(300px, 360px) minmax(760px, 1fr) !important;
gap: 32px !important;
align-items: stretch !important;
}
.discord-channel-grid {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: repeat(6, 1fr) !important;
gap: 12px !important;
align-self: stretch !important;
height: 100% !important;
padding: 22px !important;
}
.discord-channel-btn {
min-height: 0 !important;
height: 100% !important;
display: grid !important;
grid-template-columns: 42px minmax(0, 1fr) !important;
grid-template-rows: auto auto !important;
align-content: center !important;
align-items: center !important;
justify-items: start !important;
column-gap: 12px !important;
row-gap: 4px !important;
text-align: left !important;
padding: 12px 16px !important;
}
.discord-channel-btn .channel-icon {
grid-row: 1 / 3 !important;
grid-column: 1 !important;
font-size: 20px !important;
justify-self: center !important;
}
.discord-channel-btn .channel-name {
grid-column: 2 !important;
grid-row: 1 !important;
display: block !important;
width: 100% !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-size: 16px !important;
line-height: 1.25 !important;
text-align: left !important;
}
.discord-channel-btn .channel-desc {
grid-column: 2 !important;
grid-row: 2 !important;
display: block !important;
width: 100% !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-size: 12px !important;
line-height: 1.35 !important;
text-align: left !important;
}
.discord-iframe-shell {
align-self: stretch !important;
height: auto !important;
min-height: 0 !important;
}
.discord-iframe-head {
min-height: 64px !important;
padding: 0 22px !important;
}
.discord-iframe-head strong {
font-size: 17px !important;
line-height: 1.2 !important;
}
.discord-iframe-head small {
font-size: 13px !important;
line-height: 1.2 !important;
}
/* Height +40% from 430px, while preserving 105px vertical crop compensation. */
.discord-iframe-viewport {
position: relative !important;
overflow: hidden !important;
height: 602px !important;
background: #20242b !important;
}
.discord-iframe-viewport iframe {
height: 707px !important;
width: calc(100% + 205px) !important;
max-width: none !important;
transform: translate(-205px, -105px) !important;
}
/* Keep the top mask for the exposed WidgetBot avatar remnant. */
.discord-iframe-viewport::before {
content: "" !important;
position: absolute !important;
z-index: 5 !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 24px !important;
background: #343942 !important;
pointer-events: none !important;
}
.discord-join-row {
margin-top: 34px !important;
}
.discord-join-button {
min-height: 60px !important;
min-width: min(100%, 460px) !important;
}
@media (max-width: 1180px) {
.discord-main-row {
grid-template-columns: minmax(280px, 340px) minmax(620px, 1fr) !important;
}
}
@media (max-width: 980px) {
.discord-layout-container {
width: min(100% - 32px, 760px) !important;
}
.discord-section-head p {
white-space: normal !important;
}
.discord-main-row {
grid-template-columns: 1fr !important;
}
.discord-channel-grid {
grid-template-rows: none !important;
height: auto !important;
}
.discord-channel-btn {
min-height: 72px !important;
}
.discord-iframe-viewport {
height: 520px !important;
}
.discord-iframe-viewport iframe {
height: 625px !important;
width: calc(100% + 180px) !important;
transform: translate(-180px, -105px) !important;
}
.discord-iframe-viewport::before {
height: 20px !important;
}
}
/* End VISIT Discord wide tall single-column buttons */
/* ===== visit.html inline styles ===== */
/* VISIT final map/address/gold badge correction */
/* Address card: centered three-line address. */
.visit-side-card p,
.visit-info-card p,
.visit-detail-card p {
text-align: center !important;
}
.visit-side-card,
.visit-info-card,
.visit-detail-card {
box-sizing: border-box;
}
.visit-side-card {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
/* Map button: horizontally centered on the map and placed lower, matching the marked position. */
.map-open-btn,
.js-open-full-map {
left: 50% !important;
right: auto !important;
bottom: 46px !important;
transform: translateX(-50%) !important;
}
/* Decorative gold Discord badge: true transparent PNG, partially exposed on the top-right. */
.discord-iframe-shell {
position: relative !important;
overflow: visible !important;
}
.discord-gold-decoration {
position: absolute !important;
z-index: 8 !important;
top: -32px !important;
right: 34px !important;
width: clamp(132px, 11vw, 168px) !important;
height: auto !important;
pointer-events: none !important;
user-select: none !important;
filter: drop-shadow(0 12px 16px rgba(25, 18, 8, .28));
}
.discord-iframe-head {
position: relative !important;
overflow: visible !important;
padding-right: clamp(172px, 17vw, 235px) !important;
}
.discord-iframe-viewport::before {
z-index: 5 !important;
}
@media (max-width: 980px) {
.map-open-btn,
.js-open-full-map {
left: 50% !important;
bottom: 38px !important;
transform: translateX(-50%) !important;
}
.discord-gold-decoration {
top: -18px !important;
right: 18px !important;
width: clamp(92px, 23vw, 126px) !important;
}
.discord-iframe-head {
padding-right: clamp(124px, 31vw, 165px) !important;
}
}
@media (max-width: 640px) {
.discord-gold-decoration {
opacity: .72;
width: 92px !important;
}
.discord-iframe-head {
padding-right: 106px !important;
}
}
/* End VISIT final map/address/gold badge correction */
/* ===== visit.html inline styles ===== */
/* VISIT map button 22px and badge 35 percent reduction */
/* Map button: horizontally centered and closer to the lower edge of the map. */
.map-open-btn,
.js-open-full-map {
left: 50% !important;
right: auto !important;
bottom: 22px !important;
transform: translateX(-50%) !important;
}
/* Address card stays centered and three-line. */
.visit-side-card p,
.visit-info-card p,
.visit-detail-card p {
text-align: center !important;
}
.visit-side-card {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
/* Gold Discord badge: shrink about 35% from the previous visual size. */
.discord-iframe-shell {
position: relative !important;
overflow: visible !important;
}
.discord-gold-decoration {
position: absolute !important;
z-index: 8 !important;
top: -18px !important;
right: 38px !important;
width: clamp(96px, 8vw, 122px) !important;
height: auto !important;
pointer-events: none !important;
user-select: none !important;
filter: drop-shadow(0 10px 14px rgba(25, 18, 8, .24));
}
/* Reserve smaller right-side room for the smaller badge. */
.discord-iframe-head {
position: relative !important;
overflow: visible !important;
padding-right: clamp(132px, 13vw, 180px) !important;
}
@media (max-width: 980px) {
.map-open-btn,
.js-open-full-map {
left: 50% !important;
bottom: 18px !important;
transform: translateX(-50%) !important;
}
.discord-gold-decoration {
top: -12px !important;
right: 18px !important;
width: clamp(78px, 20vw, 104px) !important;
}
.discord-iframe-head {
padding-right: clamp(106px, 28vw, 142px) !important;
}
}
@media (max-width: 640px) {
.discord-gold-decoration {
width: 76px !important;
opacity: .76;
}
.discord-iframe-head {
padding-right: 88px !important;
}
}
/* End VISIT map button 22px and badge 35 percent reduction */
/* ===== visit.html inline styles ===== */
/* VISIT true map button position fix */
/* Exact parent of the visible map button. */
.map-frame.visit-map-button-stage,
.visit-map-button-stage {
position: relative !important;
}
/* Exact button element, forced to lower center of the map image. */
.map-frame.visit-map-button-stage > button.visit-map-open-fixed,
.visit-map-button-stage button.visit-map-open-fixed,
.visit-map-open-fixed.map-open-btn.js-open-full-map {
position: absolute !important;
left: 50% !important;
right: auto !important;
top: auto !important;
bottom: 22px !important;
transform: translateX(-50%) !important;
margin: 0 !important;
z-index: 30 !important;
}
/* Neutralize older rules only for this exact map-frame button. */
.map-frame.visit-map-button-stage > .map-open-btn,
.map-frame.visit-map-button-stage > .js-open-full-map {
position: absolute !important;
left: 50% !important;
right: auto !important;
top: auto !important;
bottom: 22px !important;
transform: translateX(-50%) !important;
margin: 0 !important;
}
@media (max-width: 980px) {
.map-frame.visit-map-button-stage > button.visit-map-open-fixed,
.visit-map-button-stage button.visit-map-open-fixed,
.visit-map-open-fixed.map-open-btn.js-open-full-map,
.map-frame.visit-map-button-stage > .map-open-btn,
.map-frame.visit-map-button-stage > .js-open-full-map {
bottom: 18px !important;
}
}
/* End VISIT true map button position fix */
/* ===== visit.html inline styles ===== */
/* VISIT Discord papercard final polish patch */
:root {
--discord-panel-green: #174f3d;
--discord-panel-green-dark: #0f3f31;
--discord-panel-green-deep: #0b3329;
--discord-panel-gold: #c49a55;
--discord-paper: #fbf6ea;
--discord-paper-warm: #efe1be;
--discord-paper-active: #fff5d8;
}
/* Two sides stay attached. */
.discord-main-row {
gap: 0 !important;
column-gap: 0 !important;
align-items: stretch !important;
}
.discord-channel-grid {
background: linear-gradient(180deg, rgba(23, 79, 61, .98), rgba(11, 51, 41, .98)) !important;
border: 1px solid rgba(196, 154, 85, .46) !important;
border-right: 0 !important;
box-shadow: 0 18px 34px rgba(42, 30, 12, .12) !important;
padding: 18px !important;
gap: 8px !important;
align-content: stretch !important;
}
.discord-iframe-shell {
position: relative !important;
overflow: visible !important;
border-left: 0 !important;
}
/* The green title bar itself clips the gold icon, so it cannot protrude above or below green area. */
.discord-iframe-head {
background: linear-gradient(90deg, var(--discord-panel-green), var(--discord-panel-green-dark)) !important;
position: relative !important;
overflow: hidden !important;
padding-right: 190px !important;
min-height: 64px !important;
}
/* Gold Discord icon: fixed px size, shown only inside the green title bar. */
.discord-gold-mask {
position: absolute !important;
z-index: 8 !important;
top: 0 !important;
right: 88px !important;
width: 150px !important;
height: 64px !important;
overflow: hidden !important;
pointer-events: none !important;
user-select: none !important;
filter: drop-shadow(0 10px 14px rgba(25, 18, 8, .22));
}
/* Move the fixed-size source upward inside the clipped green title bar,
leaving only the overlapping middle band visible. */
.discord-gold-mask .discord-gold-decoration,
.discord-gold-decoration {
position: absolute !important;
top: -46px !important;
left: 0 !important;
width: 150px !important;
max-width: none !important;
height: auto !important;
transform: none !important;
pointer-events: none !important;
user-select: none !important;
filter: none !important;
}
/* Paper-card channel rows: more readable than the previous small/thin version. */
.discord-channel-btn {
min-height: 72px !important;
height: auto !important;
padding: 10px 14px !important;
display: grid !important;
grid-template-columns: 36px minmax(0, 1fr) !important;
grid-template-rows: auto auto !important;
column-gap: 12px !important;
row-gap: 4px !important;
align-content: center !important;
align-items: center !important;
text-align: left !important;
background: linear-gradient(90deg, var(--discord-paper), var(--discord-paper-warm)) !important;
border: 1px solid rgba(196, 154, 85, .48) !important;
border-radius: 8px !important;
box-shadow: 0 6px 14px rgba(0, 0, 0, .12) !important;
color: #173f33 !important;
overflow: hidden !important;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease !important;
}
.discord-channel-btn:hover {
transform: translateX(2px) !important;
border-color: rgba(196, 154, 85, .72) !important;
box-shadow: 0 8px 18px rgba(0, 0, 0, .16) !important;
}
.discord-channel-btn.active,
.discord-channel-btn.is-active,
.discord-channel-btn[aria-selected="true"] {
background: linear-gradient(90deg, var(--discord-paper-active), #ead19a) !important;
border-color: rgba(196, 154, 85, .9) !important;
box-shadow:
inset 5px 0 0 var(--discord-panel-gold),
inset 0 0 0 1px rgba(255,255,255,.46),
0 8px 18px rgba(0, 0, 0, .16) !important;
transform: none !important;
}
.discord-channel-btn .channel-icon {
grid-column: 1 !important;
grid-row: 1 / 3 !important;
justify-self: center !important;
align-self: center !important;
font-size: 20px !important;
line-height: 1 !important;
filter: drop-shadow(0 1px 0 rgba(255,255,255,.35)) !important;
}
/* Larger and bolder title. */
.discord-channel-btn .channel-name {
grid-column: 2 !important;
grid-row: 1 !important;
display: block !important;
width: 100% !important;
color: #0d392f !important;
font-size: 17px !important;
line-height: 1.22 !important;
font-weight: 900 !important;
letter-spacing: .015em !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Larger and slightly heavier description. */
.discord-channel-btn .channel-desc {
grid-column: 2 !important;
grid-row: 2 !important;
display: block !important;
width: 100% !important;
color: rgba(18, 60, 49, .76) !important;
font-size: 13.5px !important;
line-height: 1.34 !important;
font-weight: 600 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.discord-channel-btn.active .channel-name,
.discord-channel-btn.is-active .channel-name,
.discord-channel-btn[aria-selected="true"] .channel-name {
color: #092f27 !important;
}
.discord-channel-btn.active .channel-desc,
.discord-channel-btn.is-active .channel-desc,
.discord-channel-btn[aria-selected="true"] .channel-desc {
color: rgba(9, 47, 39, .78) !important;
}
.discord-iframe-viewport::before {
z-index: 5 !important;
}
@media (max-width: 980px) {
.discord-channel-grid {
border-right: 1px solid rgba(196, 154, 85, .46) !important;
border-bottom: 0 !important;
gap: 8px !important;
}
.discord-channel-btn {
min-height: 70px !important;
}
}
@media (max-width: 760px) {
.discord-channel-grid {
padding: 14px !important;
}
.discord-channel-btn {
min-height: 66px !important;
grid-template-columns: 32px minmax(0, 1fr) !important;
}
.discord-channel-btn .channel-name {
font-size: 15px !important;
}
.discord-channel-btn .channel-desc {
font-size: 12px !important;
}
.discord-iframe-head {
padding-right: 134px !important;
}
.discord-gold-mask {
right: 22px !important;
width: 110px !important;
height: 58px !important;
}
.discord-gold-mask .discord-gold-decoration,
.discord-gold-decoration {
top: -35px !important;
width: 110px !important;
}
}
/* End VISIT Discord papercard final polish patch */
/* ===== visit.html inline styles ===== */
/* VISIT Discord gold icon centered minus34 patch */
/* Green header clips the gold icon strictly inside the green title area. */
.discord-iframe-head {
position: relative !important;
overflow: hidden !important;
padding-right: 190px !important;
min-height: 64px !important;
}
/* Center the fixed-size clipping mask in the green header. */
.discord-gold-mask {
position: absolute !important;
z-index: 8 !important;
top: 0 !important;
left: 50% !important;
right: auto !important;
width: 150px !important;
height: 64px !important;
overflow: hidden !important;
transform: translateX(-50%) !important;
pointer-events: none !important;
user-select: none !important;
filter: drop-shadow(0 10px 14px rgba(25, 18, 8, .22));
}
/* Fixed icon size; shifted to -34px for more natural vertical balance. */
.discord-gold-mask .discord-gold-decoration,
.discord-gold-decoration {
position: absolute !important;
top: -34px !important;
left: 0 !important;
width: 150px !important;
max-width: none !important;
height: auto !important;
transform: none !important;
pointer-events: none !important;
user-select: none !important;
filter: none !important;
}
@media (max-width: 760px) {
.discord-iframe-head {
padding-right: 134px !important;
}
.discord-gold-mask {
left: 50% !important;
right: auto !important;
width: 110px !important;
height: 58px !important;
transform: translateX(-50%) !important;
}
.discord-gold-mask .discord-gold-decoration,
.discord-gold-decoration {
top: -25px !important;
width: 110px !important;
}
}
/* End VISIT Discord gold icon centered minus34 patch */
/* ===== visit.html inline styles ===== */
/* VISIT Discord gold icon right m34 patch */
/* Keep clipping strictly inside the green title bar. */
.discord-iframe-head {
position: relative !important;
overflow: hidden !important;
padding-right: 190px !important;
min-height: 64px !important;
}
/* Return icon to the original right-side position while keeping fixed size and clipping. */
.discord-gold-mask {
position: absolute !important;
z-index: 8 !important;
top: 0 !important;
left: auto !important;
right: 88px !important;
width: 150px !important;
height: 64px !important;
overflow: hidden !important;
transform: none !important;
pointer-events: none !important;
user-select: none !important;
filter: drop-shadow(0 10px 14px rgba(25, 18, 8, .22));
}
/* Keep the vertical position approved previously. */
.discord-gold-mask .discord-gold-decoration,
.discord-gold-decoration {
position: absolute !important;
top: -34px !important;
left: 0 !important;
width: 150px !important;
max-width: none !important;
height: auto !important;
transform: none !important;
pointer-events: none !important;
user-select: none !important;
filter: none !important;
}
@media (max-width: 760px) {
.discord-iframe-head {
padding-right: 134px !important;
}
.discord-gold-mask {
left: auto !important;
right: 22px !important;
width: 110px !important;
height: 58px !important;
transform: none !important;
}
.discord-gold-mask .discord-gold-decoration,
.discord-gold-decoration {
top: -25px !important;
width: 110px !important;
}
}
/* End VISIT Discord gold icon right m34 patch */
/* ===== visit.html inline styles ===== */
/* VISIT precise cleanup */
.visit-side-card + .visit-side-card::before {
content: none !important;
display: none !important;
}
.visit-side::before {
display: none !important;
content: none !important;
}
.visit-side {
border-left: 1px solid rgba(179,138,73,.28) !important;
}
.full-map-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex !important;
align-items: center !important;
justify-content: center !important;
opacity: 0;
pointer-events: none;
background: rgba(13,31,27,.38);
backdrop-filter: blur(4px);
transition: opacity 1500ms cubic-bezier(.16,.84,.22,1);
}
.full-map-modal.show {
opacity: 1;
pointer-events: auto;
}
.full-map-stage {
position: relative;
line-height: 0;
}
.full-map-stage,
.full-map-stage img {
max-width: 99vw !important;
max-height: 84vh !important;
}
.full-map-stage img {
display: block;
width: auto;
height: auto;
object-fit: contain;
filter: drop-shadow(0 30px 80px rgba(0,0,0,.42));
}
.full-map-close {
position: absolute;
right: 18px;
bottom: 18px;
min-width: 96px;
min-height: 42px;
border: 1px solid rgba(218,190,127,.88);
background: #24463c;
color: #f8ecd5;
cursor: pointer;
}
.map-open-btn {
bottom: 108px !important;
}
/* Lamb Cafe shell hero morph / desktop menu button guard */
.site-header .mobile-toggle{display:none!important;}
@media(max-width:900px){.site-header .mobile-toggle{display:block!important;}}
body.home-page .site-content > .hero,
body.home-page .site-content > .video-hero{min-height:470px;height:470px;}
body.lamb-inner-hero-unified:not(.home-page) .site-content > .hero,
body.lamb-inner-hero-unified:not(.home-page) .site-content > .visit-hero{min-height:430px;height:430px;}
.site-content > .hero{transition:min-height .52s cubic-bezier(.2,.82,.22,1),height .52s cubic-bezier(.2,.82,.22,1);}
@media(max-width:900px){
body.home-page .site-content > .hero,
body.home-page .site-content > .video-hero{min-height:420px;height:420px;}
body.lamb-inner-hero-unified:not(.home-page) .site-content > .hero,
body.lamb-inner-hero-unified:not(.home-page) .site-content > .visit-hero{min-height:380px;height:380px;}
}
/* Lamb Cafe shell stable navigation fixes v2 */
@media (min-width: 901px) {
.site-header .mobile-toggle {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
}
.site-content > .hero,
.site-content > .visit-hero {
transition: min-height .68s cubic-bezier(.2,.82,.22,1), height .68s cubic-bezier(.2,.82,.22,1), opacity .28s ease, filter .45s ease !important;
will-change: height, min-height;
}
body.home-page .site-content > .hero,
body.home-page .site-content > .video-hero {
min-height: 470px !important;
height: 470px !important;
}
body.lamb-inner-hero-unified:not(.home-page) .site-content > .hero,
body.lamb-inner-hero-unified:not(.home-page) .site-content > .visit-hero {
min-height: 430px !important;
height: 430px !important;
}
@media(max-width:900px){
body.home-page .site-content > .hero,
body.home-page .site-content > .video-hero {
min-height: 420px !important;
height: 420px !important;
}
body.lamb-inner-hero-unified:not(.home-page) .site-content > .hero,
body.lamb-inner-hero-unified:not(.home-page) .site-content > .visit-hero {
min-height: 380px !important;
height: 380px !important;
}
}
body.home-page .site-content > .hero,
body.about-page .site-content > .hero {
background: linear-gradient(90deg,rgba(14,36,31,.88) 0%,rgba(21,45,39,.66) 38%,rgba(21,45,39,.18) 72%), url('assets/hero-video-poster.webp') center/cover no-repeat !important;
}
body.menu-page .site-content > .hero {
background: linear-gradient(90deg,rgba(14,36,31,.88) 0%,rgba(21,45,39,.66) 38%,rgba(21,45,39,.18) 72%), url('assets/hero-menu.webp') center/cover no-repeat !important;
}
body.staff-page .site-content > .hero {
background: linear-gradient(90deg,rgba(14,36,31,.86) 0%,rgba(21,45,39,.62) 42%,rgba(21,45,39,.20) 78%), url('assets/hero-staff.webp') center/cover no-repeat !important;
}
body.visit-page .site-content > .visit-hero,
body.visit-page .site-content > .hero {
background: linear-gradient(90deg,rgba(14,36,31,.86) 0%,rgba(21,45,39,.62) 42%,rgba(21,45,39,.20) 78%), url('/manus-storage/hero-visit_23883eda.webp') center/cover no-repeat !important;
}
body.gallery-page .site-content > .hero {
background: linear-gradient(90deg,rgba(14,36,31,.88) 0%,rgba(21,45,39,.66) 38%,rgba(21,45,39,.18) 72%), url('assets/hero-gallery.webp') center/cover no-repeat !important;
}
body.rp-guide-page .site-content > .hero {
background: linear-gradient(90deg,rgba(14,36,31,.88) 0%,rgba(21,45,39,.66) 38%,rgba(21,45,39,.18) 72%), url('/manus-storage/hero-rp_a03f4399.webp') center/cover no-repeat !important;
}
.hero.hero-shell-fading .hero-inner,
.visit-hero.hero-shell-fading .hero-inner {
opacity: 0 !important;
transform: translateY(10px) !important;
transition: opacity .2s ease, transform .2s ease !important;
}
.hero.hero-shell-entering .hero-inner,
.visit-hero.hero-shell-entering .hero-inner {
opacity: 0 !important;
transform: translateY(12px) !important;
}
.hero.hero-shell-ready .hero-inner,
.visit-hero.hero-shell-ready .hero-inner {
opacity: 1 !important;
transform: none !important;
transition: opacity .42s ease, transform .42s ease !important;
}
.staff-page .staff-section,
.staff-page .staff-grid,
.staff-page .staff-card,
html.staff-smooth-scroll-lock,
html.staff-smooth-scroll-lock body {
overflow-anchor: none !important;
}
/* ===== Lamb Cafe final responsive/shell polish static override ===== */
body.home-page .site-content > .hero,
body.home-page .site-content > .video-hero{
min-height:503px !important;
height:503px !important;
}
body.home-page .site-content > .hero > .hero-inner{
margin-left:max(72px,calc((100vw - 1180px)/2 + 24px)) !important;
width:min(760px,calc(100vw - max(72px,calc((100vw - 1180px)/2 + 24px)) - 72px)) !important;
}
.hero > .hero-inner.reveal,
.visit-hero > .hero-inner.reveal{
animation:none !important;
}
@media(max-width:1370px) and (min-width:901px){
.menu-anchor{
top:154px !important;
margin-top:18px !important;
z-index:45 !important;
}
.menu-page-section,
.menu-page-section .container,
.menu-showcase{
overflow:visible !important;
}
}
@media(max-width:900px){
body.home-page .site-content > .hero,
body.home-page .site-content > .video-hero{
min-height:450px !important;
height:450px !important;
}
body.home-page .site-content > .hero > .hero-inner{
margin-left:32px !important;
width:calc(100% - 64px) !important;
}
.site-header .navlinks{
display:none !important;
}
.site-header .navlinks.open{
display:grid !important;
grid-template-columns:1fr 1fr;
gap:14px;
position:absolute;
left:0;
right:0;
top:100%;
background:#fffaf1;
border-bottom:1px solid #d7c4a1;
padding:18px;
box-shadow:0 18px 36px rgba(83,59,29,.12);
}
.site-header .mobile-toggle{
display:block !important;
}
}
/* ===== End Lamb Cafe final responsive/shell polish static override ===== */
/* Keep Hero text visible when it is not being controlled by shell transition. */
.hero:not(.hero-shell-fading):not(.hero-shell-entering):not(.hero-shell-ready) > .hero-inner.reveal,
.visit-hero:not(.hero-shell-fading):not(.hero-shell-entering):not(.hero-shell-ready) > .hero-inner.reveal{
opacity:1 !important;
animation:none !important;
}
body.home-page .hero:not(.hero-shell-fading):not(.hero-shell-entering):not(.hero-shell-ready) > .hero-inner.reveal{
transform:none !important;
}
body.lamb-inner-hero-unified:not(.home-page) .hero:not(.hero-shell-fading):not(.hero-shell-entering):not(.hero-shell-ready) > .hero-inner.reveal,
body.lamb-inner-hero-unified:not(.home-page) .visit-hero:not(.hero-shell-fading):not(.hero-shell-entering):not(.hero-shell-ready) > .hero-inner.reveal{
transform:translateY(-50%) !important;
}
/* Lamb Cafe shell-only HERO text animation hardening
HERO copy is now controlled by script.js shell transition states only.
General reveal animations must never leave HERO copy in a translucent state. */
#siteContent .hero > .hero-inner.reveal,
#siteContent .visit-hero > .hero-inner.reveal,
#siteContent .page-hero > .hero-inner.reveal,
#siteContent .inner-hero > .hero-inner.reveal,
#siteContent .staff-hero > .hero-inner.reveal,
#siteContent .gallery-hero > .hero-inner.reveal,
#siteContent .rp-hero > .hero-inner.reveal,
#siteContent .menu-hero > .hero-inner.reveal {
animation: none !important;
}
#siteContent .hero:not(.hero-shell-fading):not(.hero-shell-entering):not(.hero-shell-ready) > .hero-inner,
#siteContent .visit-hero:not(.hero-shell-fading):not(.hero-shell-entering):not(.hero-shell-ready) > .hero-inner {
opacity: 1 !important;
filter: none !important;
mix-blend-mode: normal !important;
color: #fff !important;
}
body.lamb-inner-hero-unified:not(.home-page) #siteContent .hero:not(.hero-shell-fading):not(.hero-shell-entering):not(.hero-shell-ready) > .hero-inner,
body.lamb-inner-hero-unified:not(.home-page) #siteContent .visit-hero:not(.hero-shell-fading):not(.hero-shell-entering):not(.hero-shell-ready) > .hero-inner {
transform: translateY(-50%) !important;
}
body.home-page #siteContent .hero:not(.hero-shell-fading):not(.hero-shell-entering):not(.hero-shell-ready) > .hero-inner {
transform: none !important;
}
/* ===== Lamb Cafe BGM player upgrade + hero/map final fixes ===== */
.music {
display: flex !important;
align-items: center !important;
gap: 10px !important;
min-width: 300px;
max-width: min(420px, calc(100vw - 36px));
padding: 10px 12px !important;
}
.music .music-disc {
width: 34px;
height: 34px;
flex: 0 0 34px;
border-radius: 50%;
position: relative;
background:
radial-gradient(circle at center, #f7ecd7 0 10%, #24463c 11% 20%, #2b2117 21% 34%, #b78b4e 35% 38%, #2d251e 39% 58%, #513923 59% 62%, #1f1712 63% 100%);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 4px 10px rgba(56,42,27,.18);
}
.music .music-disc::before {
content: "";
position: absolute;
inset: 5px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.20);
border-left-color: rgba(255,255,255,.55);
border-right-color: rgba(0,0,0,.18);
}
.music .music-disc span {
position: absolute;
left: 50%;
top: 50%;
width: 8px;
height: 8px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: #f9f0df;
box-shadow: 0 0 0 2px rgba(36,70,60,.38);
}
.music.is-playing .music-disc {
animation: lambRecordSpin 3.8s linear infinite;
}
@keyframes lambRecordSpin {
to { transform: rotate(360deg); }
}
.music .music-body {
min-width: 0;
flex: 1 1 auto;
}
.music .music-title {
white-space: nowrap;
font-size: 15px;
line-height: 1.2;
color: #4a5c52;
}
.music .music-progress-wrap {
display: grid;
grid-template-columns: auto minmax(90px, 1fr) auto;
align-items: center;
gap: 7px;
margin-top: 5px;
font-size: 11px;
color: #7a6c55;
font-variant-numeric: tabular-nums;
}
.music #musicProgress {
width: 100%;
accent-color: #24463c;
cursor: pointer;
}
@media(max-width: 560px) {
.music {
min-width: 238px;
gap: 8px !important;
}
.music .music-title { font-size: 13px; }
.music .music-disc { width: 30px; height: 30px; flex-basis: 30px; }
.music .music-progress-wrap { grid-template-columns: minmax(78px, 1fr); }
.music .music-progress-wrap span { display: none; }
}
body.about-page .hero:not(.hero-shell-fading):not(.hero-shell-entering) > .hero-inner,
body.about-page .hero:not(.hero-shell-fading):not(.hero-shell-entering) > .hero-inner * {
opacity: 1 !important;
filter: none !important;
mix-blend-mode: normal !important;
}
body.about-page .hero:not(.hero-shell-fading):not(.hero-shell-entering) > .hero-inner h1,
body.about-page .hero:not(.hero-shell-fading):not(.hero-shell-entering) > .hero-inner .subtitle {
color: #fff !important;
}
body.about-page .hero:not(.hero-shell-fading):not(.hero-shell-entering) > .hero-inner p {
color: #f2eadb !important;
}
.full-map-modal:not(.show) {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
backdrop-filter: none !important;
}
.full-map-modal:not(.show) .full-map-stage,
.full-map-modal:not(.show) .full-map-stage img,
.full-map-modal:not(.show) .full-map-close {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* ===== End Lamb Cafe BGM player upgrade + hero/map final fixes ===== */
/* ABOUT hero opacity hard reset while transition settles */
body.about-page .hero.hero-shell-ready > .hero-inner,
body.about-page .hero.hero-shell-ready > .hero-inner *,
body.about-page .hero:not(.hero-shell-fading):not(.hero-shell-entering) > .hero-inner,
body.about-page .hero:not(.hero-shell-fading):not(.hero-shell-entering) > .hero-inner * {
opacity: 1 !important;
filter: none !important;
mix-blend-mode: normal !important;
}
/* ===== Lamb Cafe final BGM compact player + map close animation + ABOUT hero text layer fix ===== */
.music {
right: 18px !important;
bottom: 18px !important;
width: auto !important;
min-width: 258px !important;
max-width: min(312px, calc(100vw - 34px)) !important;
min-height: 52px !important;
padding: 8px 12px 8px 42px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
overflow: visible !important;
}
.music .music-disc {
width: 66px !important;
height: 66px !important;
flex: 0 0 66px !important;
margin: -12px 1px -12px -36px !important;
border-radius: 50% !important;
position: relative !important;
background:
radial-gradient(circle at 50% 50%, #fbf2da 0 7%, #18372f 8% 15%, transparent 16%),
conic-gradient(from 18deg, #0d1714 0 11deg, #d3a05a 12deg 19deg, #25170f 20deg 78deg, #6c4520 79deg 90deg, #16100c 91deg 168deg, #f2c879 169deg 178deg, #20150f 179deg 260deg, #7e5529 261deg 274deg, #120d09 275deg 360deg),
radial-gradient(circle at center, #2b2117 0 28%, #120d09 29% 100%) !important;
box-shadow:
0 9px 18px rgba(41,31,19,.22),
inset 0 0 0 2px rgba(221,188,117,.42),
inset 0 0 0 7px rgba(24,18,12,.78),
inset 0 0 16px rgba(255,228,158,.20) !important;
}
.music .music-disc::before {
content: "" !important;
position: absolute !important;
inset: 8px !important;
border-radius: 50% !important;
background:
conic-gradient(from 80deg, rgba(255,236,176,.72) 0 14deg, transparent 15deg 106deg, rgba(167,104,39,.55) 107deg 123deg, transparent 124deg 247deg, rgba(255,255,255,.34) 248deg 259deg, transparent 260deg 360deg) !important;
border: 1px solid rgba(244,215,151,.58) !important;
box-shadow: inset 0 0 0 4px rgba(0,0,0,.18) !important;
}
.music .music-disc::after {
content: "";
position: absolute;
left: 18px;
top: 9px;
width: 7px;
height: 21px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(255,235,170,.9), rgba(192,125,44,.18));
transform: rotate(-28deg);
box-shadow: 16px 29px 0 -2px rgba(221,161,83,.55);
}
.music .music-disc span {
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 13px !important;
height: 13px !important;
transform: translate(-50%, -50%) !important;
border-radius: 50% !important;
background: radial-gradient(circle, #fff8e6 0 38%, #cda564 39% 100%) !important;
box-shadow: 0 0 0 3px rgba(22,48,41,.75), 0 0 0 5px rgba(218,178,98,.40) !important;
}
.music.is-playing .music-disc { animation: lambRecordSpin 2.85s linear infinite !important; }
.music .music-body {
min-width: 0 !important;
width: 198px !important;
flex: 0 1 198px !important;
}
.music .music-head {
display: flex !important;
align-items: center !important;
gap: 8px !important;
min-width: 0 !important;
margin-bottom: 5px !important;
}
.music .music-title {
white-space: nowrap !important;
font-size: 14px !important;
line-height: 1.05 !important;
color: #40574d !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.music #musicToggle,
.music .music-toggle-icon {
width: 28px !important;
height: 24px !important;
min-width: 28px !important;
padding: 0 !important;
margin: 0 !important;
display: inline-grid !important;
place-items: center !important;
border: 0 !important;
border-radius: 999px !important;
background: #24463c !important;
color: #fffdf3 !important;
font-size: 12px !important;
line-height: 1 !important;
font-family: Arial, sans-serif !important;
box-shadow: 0 3px 8px rgba(28,50,42,.16) !important;
}
.music .music-progress-wrap {
display: grid !important;
grid-template-columns: auto minmax(96px, 1fr) auto !important;
gap: 6px !important;
align-items: center !important;
margin-top: 0 !important;
font-size: 10.5px !important;
color: #766a56 !important;
}
.music #musicProgress {
appearance: none !important;
-webkit-appearance: none !important;
width: 100% !important;
height: 7px !important;
border: 1px solid rgba(36,70,60,.40) !important;
border-radius: 999px !important;
background: linear-gradient(90deg, #24463c 0 var(--bgm-progress, 0%), #fffdf7 var(--bgm-progress, 0%) 100%) !important;
box-shadow: inset 0 1px 2px rgba(78,58,31,.10) !important;
cursor: pointer !important;
outline: none !important;
}
.music #musicProgress::-webkit-slider-runnable-track {
height: 7px !important;
border-radius: 999px !important;
background: transparent !important;
}
.music #musicProgress::-webkit-slider-thumb {
-webkit-appearance: none !important;
appearance: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
border: 0 !important;
}
.music #musicProgress::-moz-range-track {
height: 7px !important;
border-radius: 999px !important;
background: transparent !important;
}
.music #musicProgress::-moz-range-progress {
height: 7px !important;
border-radius: 999px !important;
background: #24463c !important;
}
.music #musicProgress::-moz-range-thumb {
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
border: 0 !important;
}
body.about-page .site-content > .video-hero,
body.about-page .site-content > .hero.video-hero {
isolation: isolate !important;
}
body.about-page .site-content > .video-hero video,
body.about-page .site-content > .hero.video-hero video {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
}
body.about-page .site-content > .video-hero::before,
body.about-page .site-content > .video-hero::after,
body.about-page .site-content > .hero.video-hero::before,
body.about-page .site-content > .hero.video-hero::after {
z-index: 1 !important;
pointer-events: none !important;
}
body.about-page .site-content > .video-hero .hero-bg-fade-overlay,
body.about-page .site-content > .hero.video-hero .hero-bg-fade-overlay {
z-index: 2 !important;
pointer-events: none !important;
}
body.about-page .site-content > .video-hero:not(.hero-shell-fading):not(.hero-shell-entering) > .hero-inner,
body.about-page .site-content > .hero.video-hero:not(.hero-shell-fading):not(.hero-shell-entering) > .hero-inner {
position: relative !important;
z-index: 30 !important;
opacity: 1 !important;
filter: none !important;
mix-blend-mode: normal !important;
color: #fff !important;
text-shadow: 0 4px 24px rgba(0,0,0,.48) !important;
}
body.about-page .site-content > .video-hero:not(.hero-shell-fading):not(.hero-shell-entering) > .hero-inner *,
body.about-page .site-content > .hero.video-hero:not(.hero-shell-fading):not(.hero-shell-entering) > .hero-inner * {
opacity: 1 !important;
filter: none !important;
mix-blend-mode: normal !important;
}
.full-map-modal {
transition: opacity 520ms cubic-bezier(.16,.84,.22,1), backdrop-filter 520ms cubic-bezier(.16,.84,.22,1) !important;
}
.full-map-modal .full-map-stage {
opacity: 0;
transform: scale(.965) translateY(12px);
transition: opacity 520ms cubic-bezier(.16,.84,.22,1), transform 520ms cubic-bezier(.16,.84,.22,1) !important;
}
.full-map-modal.show .full-map-stage {
opacity: 1 !important;
transform: scale(1) translateY(0) !important;
}
.full-map-modal.is-closing {
opacity: 0 !important;
pointer-events: none !important;
backdrop-filter: blur(0px) !important;
}
.full-map-modal.is-closing .full-map-stage {
opacity: 0 !important;
transform: scale(.965) translateY(12px) !important;
}
@media(max-width:560px){
.music{min-width:240px!important;max-width:calc(100vw - 24px)!important;padding-left:38px!important;}
.music .music-disc{width:58px!important;height:58px!important;flex-basis:58px!important;margin-left:-33px!important;}
.music .music-body{width:174px!important;flex-basis:174px!important;}
.music .music-title{font-size:13px!important;}
.music .music-progress-wrap{grid-template-columns:auto minmax(70px,1fr) auto!important;font-size:9.5px!important;gap:4px!important;}
}
/* ===== End Lamb Cafe final BGM compact player + map close animation + ABOUT hero text layer fix ===== */
/* ===== Final interaction fixes: map close animation, Discord width, compact BGM, route scroll ===== */
/* VISIT Discord: match upper map container width exactly. */
body.visit-page .discord-layout-container {
width: min(var(--max), calc(100% - 44px)) !important;
max-width: var(--max) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.visit-page .discord-section-head {
max-width: min(var(--max), calc(100vw - 44px)) !important;
}
body.visit-page .discord-main-row {
width: 100% !important;
grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) !important;
gap: 0 !important;
column-gap: 0 !important;
}
@media (max-width: 980px) {
body.visit-page .discord-layout-container { width: min(100% - 32px, 760px) !important; }
body.visit-page .discord-main-row { grid-template-columns: 1fr !important; }
}
/* Map modal must remain visible while .is-closing plays; hidden only after JS removes .show. */
.full-map-modal.show,
.full-map-modal.show.is-closing {
display: flex !important;
visibility: visible !important;
}
.full-map-modal.show.is-closing {
opacity: 0 !important;
pointer-events: none !important;
backdrop-filter: blur(0px) !important;
transition: opacity 540ms cubic-bezier(.16,.84,.22,1), backdrop-filter 540ms cubic-bezier(.16,.84,.22,1) !important;
}
.full-map-modal.show.is-closing .full-map-stage,
.full-map-modal.show.is-closing .full-map-stage img,
.full-map-modal.show.is-closing .full-map-close {
visibility: visible !important;
pointer-events: none !important;
}
.full-map-modal.show.is-closing .full-map-stage {
opacity: 0 !important;
transform: scale(.955) translateY(14px) !important;
transition: opacity 540ms cubic-bezier(.16,.84,.22,1), transform 540ms cubic-bezier(.16,.84,.22,1) !important;
}
/* Compact BGM layout with real icon buttons and volume control. */
.music {
min-width: 236px !important;
max-width: min(270px, calc(100vw - 30px)) !important;
min-height: 50px !important;
padding: 7px 10px 7px 37px !important;
gap: 6px !important;
}
.music .music-disc {
width: 68px !important;
height: 68px !important;
flex: 0 0 68px !important;
margin: -14px -2px -14px -39px !important;
}
.music .music-body {
width: 178px !important;
flex: 0 1 178px !important;
position: relative !important;
}
.music .music-head {
display: grid !important;
grid-template-columns: 28px minmax(0,1fr) !important;
align-items: center !important;
gap: 6px !important;
margin-bottom: 4px !important;
}
.music .music-title-row {
min-width: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 5px !important;
}
.music .music-title {
font-size: 13.5px !important;
min-width: 0 !important;
max-width: 116px !important;
flex: 0 1 auto !important;
}
.music #musicToggle,
.music .music-toggle-icon {
width: 28px !important;
height: 26px !important;
min-width: 28px !important;
border-radius: 50% !important;
color: #fff !important;
position: relative !important;
}
.music .music-icon-play {
width: 0 !important;
height: 0 !important;
border-top: 6px solid transparent !important;
border-bottom: 6px solid transparent !important;
border-left: 10px solid #fff !important;
margin-left: 2px !important;
display: block !important;
}
.music .music-icon-pause {
width: 12px !important;
height: 14px !important;
display: inline-flex !important;
align-items: stretch !important;
justify-content: center !important;
gap: 4px !important;
}
.music .music-icon-pause i {
display: block !important;
width: 4px !important;
height: 14px !important;
background: #fff !important;
border-radius: 1px !important;
}
.music .music-volume-toggle {
width: 24px !important;
height: 22px !important;
min-width: 24px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 7px !important;
background: rgba(36,70,60,.12) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
.music .music-volume-toggle:hover,
.music .music-volume-toggle[aria-expanded="true"] { background: #24463c !important; }
.music .music-volume-toggle span {
display: inline-flex !important;
align-items: flex-end !important;
gap: 2px !important;
height: 13px !important;
}
.music .music-volume-toggle i {
display: block !important;
width: 3px !important;
border-radius: 2px !important;
background: #24463c !important;
}
.music .music-volume-toggle:hover i,
.music .music-volume-toggle[aria-expanded="true"] i { background: #fff !important; }
.music .music-volume-toggle i:nth-child(1){height:5px!important;}
.music .music-volume-toggle i:nth-child(2){height:9px!important;}
.music .music-volume-toggle i:nth-child(3){height:13px!important;}
.music .music-volume-popover {
position: absolute !important;
right: 0 !important;
top: -34px !important;
width: 118px !important;
padding: 7px 9px !important;
background: rgba(255,252,245,.98) !important;
border: 1px solid rgba(179,138,73,.42) !important;
box-shadow: 0 10px 24px rgba(83,59,29,.18) !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(5px) !important;
transition: opacity .22s ease, transform .22s ease, visibility .22s ease !important;
z-index: 3 !important;
}
.music .music-volume-popover.is-open {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
.music #musicVolume {
appearance: none !important;
-webkit-appearance: none !important;
width: 100% !important;
height: 7px !important;
border-radius: 999px !important;
background: linear-gradient(90deg,#24463c 0 calc(var(--volume-progress, 85) * 1%), #fffdf7 calc(var(--volume-progress, 85) * 1%) 100%) !important;
border: 1px solid rgba(36,70,60,.36) !important;
}
.music #musicVolume::-webkit-slider-runnable-track{height:7px;background:transparent!important;}
.music #musicVolume::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:10px;height:10px;border-radius:50%;background:#24463c;border:1px solid #fffdf7;margin-top:-2px;}
.music #musicVolume::-moz-range-track{height:7px;border-radius:999px;background:#fffdf7;border:1px solid rgba(36,70,60,.36);}
.music #musicVolume::-moz-range-progress{height:7px;border-radius:999px;background:#24463c;}
.music #musicVolume::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#24463c;border:1px solid #fffdf7;}
.music .music-progress-wrap {
grid-template-columns: auto minmax(78px, 1fr) auto !important;
gap: 5px !important;
font-size: 10px !important;
}
.music #musicProgress { height: 7px !important; }
@media(max-width:560px){
.music{min-width:224px!important;max-width:calc(100vw - 22px)!important;padding-left:36px!important;}
.music .music-disc{width:62px!important;height:62px!important;flex-basis:62px!important;margin-left:-37px!important;}
.music .music-body{width:165px!important;flex-basis:165px!important;}
.music .music-title{max-width:98px!important;font-size:12.5px!important;}
.music .music-progress-wrap{grid-template-columns:auto minmax(62px,1fr) auto!important;}
}
/* ===== End final interaction fixes ===== */
/* ===== HOME explore 6-card update + VISIT Discord 7-button layout ===== */
.home-page .scenery { display: none !important; }
.home-page .explore-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 24px !important;
align-items: stretch !important;
}
.home-page .explore-grid .entry-card,
.home-page .home-guide-card {
grid-template-columns: 42% 58% !important;
min-height: 184px !important;
background: rgba(255,250,240,.92) !important;
transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
}
.home-page .home-guide-card:hover {
transform: translateY(-3px) !important;
border-color: rgba(179,138,73,.72) !important;
box-shadow: 0 18px 38px rgba(68,48,22,.14) !important;
}
.home-page .home-guide-card img {
height: 100% !important;
min-height: 184px !important;
object-fit: cover !important;
}
.home-page .home-guide-card .content {
padding: 22px 20px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
.home-page .home-guide-card .entry-kicker {
display: block !important;
color: #b38a49 !important;
font-size: 12px !important;
letter-spacing: .14em !important;
font-family: Cinzel, Georgia, serif !important;
font-weight: 700 !important;
margin-bottom: 5px !important;
text-transform: uppercase !important;
}
.home-page .home-guide-card h3 {
font-size: 24px !important;
line-height: 1.25 !important;
margin: 0 0 7px !important;
}
.home-page .home-guide-card p {
font-size: 14px !important;
line-height: 1.7 !important;
margin: 0 0 14px !important;
}
.home-page .home-guide-card .small-btn {
margin-top: auto !important;
}
@media (max-width: 1120px) {
.home-page .explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 680px) {
.home-page .explore-grid { grid-template-columns: 1fr !important; }
.home-page .explore-grid .entry-card,
.home-page .home-guide-card { grid-template-columns: 1fr !important; }
.home-page .home-guide-card img { height: 170px !important; min-height: 170px !important; }
}
/* Keep 7 Discord buttons inside the current panel height without stretching the whole section. */
.visit-page .discord-channel-grid {
grid-template-columns: 1fr !important;
gap: 8px !important;
padding: 18px 20px !important;
align-content: stretch !important;
}
.visit-page .discord-channel-btn {
min-height: 0 !important;
height: clamp(72px, 9.5vh, 86px) !important;
padding: 9px 12px !important;
gap: 2px !important;
grid-template-rows: auto auto auto !important;
}
.visit-page .discord-channel-btn .channel-icon {
font-size: 21px !important;
line-height: 1 !important;
margin-bottom: 1px !important;
}
.visit-page .discord-channel-btn .channel-name {
font-size: 17px !important;
line-height: 1.18 !important;
letter-spacing: .035em !important;
font-weight: 700 !important;
}
.visit-page .discord-channel-btn .channel-desc {
font-size: 12.8px !important;
line-height: 1.35 !important;
}
@media (max-width: 980px) {
.visit-page .discord-channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.visit-page .discord-channel-btn { height: 84px !important; }
}
@media (max-width: 560px) {
.visit-page .discord-channel-grid { grid-template-columns: 1fr !important; }
.visit-page .discord-channel-btn { height: auto !important; min-height: 78px !important; }
}
/* ===== End HOME explore 6-card update + VISIT Discord 7-button layout ===== */
/* ===== VISIT Discord stable 7-button height patch ===== */
/* Keep the Discord block independent from browser viewport height, so the iframe never grows into a black empty footer area. */
body.visit-page {
--lamb-discord-head-h: 64px;
--lamb-discord-view-h: 602px;
--lamb-discord-total-h: calc(var(--lamb-discord-head-h) + var(--lamb-discord-view-h));
}
body.visit-page .discord-main-row {
align-items: start !important;
min-height: 0 !important;
height: auto !important;
}
body.visit-page .discord-iframe-shell {
align-self: start !important;
height: var(--lamb-discord-total-h) !important;
min-height: var(--lamb-discord-total-h) !important;
max-height: var(--lamb-discord-total-h) !important;
display: grid !important;
grid-template-rows: var(--lamb-discord-head-h) var(--lamb-discord-view-h) !important;
background: #343942 !important;
overflow: hidden !important;
}
body.visit-page .discord-iframe-head {
height: var(--lamb-discord-head-h) !important;
min-height: var(--lamb-discord-head-h) !important;
max-height: var(--lamb-discord-head-h) !important;
}
body.visit-page .discord-iframe-viewport {
height: var(--lamb-discord-view-h) !important;
min-height: var(--lamb-discord-view-h) !important;
max-height: var(--lamb-discord-view-h) !important;
overflow: hidden !important;
background: #343942 !important;
}
body.visit-page .discord-iframe-viewport iframe {
height: calc(var(--lamb-discord-view-h) + 105px) !important;
min-height: calc(var(--lamb-discord-view-h) + 105px) !important;
}
/* Keep seven buttons in the original left panel height, with fixed rows instead of viewport-based clamp(). */
body.visit-page .discord-channel-grid {
align-self: start !important;
height: var(--lamb-discord-total-h) !important;
min-height: var(--lamb-discord-total-h) !important;
max-height: var(--lamb-discord-total-h) !important;
grid-template-columns: 1fr !important;
grid-template-rows: repeat(7, minmax(0, 1fr)) !important;
gap: 10px !important;
padding: 20px 20px 20px 20px !important;
align-content: stretch !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
body.visit-page .discord-channel-btn {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 8px 13px !important;
grid-template-columns: 36px minmax(0, 1fr) !important;
grid-template-rows: auto auto !important;
column-gap: 11px !important;
row-gap: 2px !important;
align-content: center !important;
align-items: center !important;
}
body.visit-page .discord-channel-btn .channel-icon {
font-size: 20px !important;
line-height: 1 !important;
margin: 0 !important;
}
body.visit-page .discord-channel-btn .channel-name {
font-size: 17px !important;
line-height: 1.16 !important;
letter-spacing: .02em !important;
font-weight: 900 !important;
}
body.visit-page .discord-channel-btn .channel-desc {
font-size: 13px !important;
line-height: 1.28 !important;
font-weight: 600 !important;
}
/* Tablet/mobile: avoid cramming the fixed desktop panel into narrow screens. */
@media (max-width: 980px) {
body.visit-page {
--lamb-discord-head-h: 62px;
--lamb-discord-view-h: 520px;
--lamb-discord-total-h: auto;
}
body.visit-page .discord-main-row {
align-items: stretch !important;
}
body.visit-page .discord-channel-grid {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: none !important;
gap: 10px !important;
padding: 18px !important;
overflow: visible !important;
}
body.visit-page .discord-channel-btn {
height: 80px !important;
min-height: 80px !important;
}
body.visit-page .discord-iframe-shell {
height: calc(var(--lamb-discord-head-h) + var(--lamb-discord-view-h)) !important;
min-height: calc(var(--lamb-discord-head-h) + var(--lamb-discord-view-h)) !important;
max-height: calc(var(--lamb-discord-head-h) + var(--lamb-discord-view-h)) !important;
grid-template-rows: var(--lamb-discord-head-h) var(--lamb-discord-view-h) !important;
}
body.visit-page .discord-iframe-head {
height: var(--lamb-discord-head-h) !important;
min-height: var(--lamb-discord-head-h) !important;
max-height: var(--lamb-discord-head-h) !important;
}
body.visit-page .discord-iframe-viewport {
height: var(--lamb-discord-view-h) !important;
min-height: var(--lamb-discord-view-h) !important;
max-height: var(--lamb-discord-view-h) !important;
}
body.visit-page .discord-iframe-viewport iframe {
height: calc(var(--lamb-discord-view-h) + 105px) !important;
}
}
@media (max-width: 560px) {
body.visit-page .discord-channel-grid {
grid-template-columns: 1fr !important;
padding: 14px !important;
}
body.visit-page .discord-channel-btn {
height: 76px !important;
min-height: 76px !important;
}
}
/* ===== End VISIT Discord stable 7-button height patch ===== */
/* ===== Final patch: VISIT Discord iframe top crop + MENU anchor safety + GALLERY closing animation ===== */
/* Keep the scrollbar gutter stable whenever modal-style overlays lock page motion. */
html {
overflow-y: scroll;
scrollbar-gutter: stable;
}
/* VISIT: crop WidgetBot iframe a little further upward without changing the visible panel height. */
body.visit-page .discord-iframe-viewport {
position: relative !important;
overflow: hidden !important;
background: #343942 !important;
}
body.visit-page .discord-iframe-viewport iframe {
transform: translate(-205px, -129px) !important;
height: calc(var(--lamb-discord-view-h, 602px) + 137px) !important;
min-height: calc(var(--lamb-discord-view-h, 602px) + 137px) !important;
max-height: none !important;
}
body.visit-page .discord-iframe-viewport::before {
height: 0 !important;
opacity: 0 !important;
}
@media (max-width: 980px) {
body.visit-page .discord-iframe-viewport iframe {
transform: translate(-180px, -129px) !important;
height: calc(var(--lamb-discord-view-h, 520px) + 137px) !important;
min-height: calc(var(--lamb-discord-view-h, 520px) + 137px) !important;
width: calc(100% + 180px) !important;
}
}
/* MENU: hash buttons are handled by JS; keep reveal sections visible after internal category jumps. */
body.menu-page .menu-anchor.show,
body.menu-page .menu-showcase.show,
body.menu-page .menu-page-section.show,
body.menu-page .menu-page-section .container.show {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
}
body.menu-page .menu-showcase {
scroll-margin-top: 190px;
}
/* GALLERY: closing animation and fixed-body scroll lock without layout jump. */
.gallery-story-lightbox.is-open,
.gallery-story-lightbox.is-closing {
display: flex !important;
}
.gallery-story-lightbox.is-closing {
pointer-events: none !important;
}
.gallery-story-backdrop {
opacity: 0;
transition: opacity .34s ease, backdrop-filter .34s ease;
}
.gallery-story-lightbox.is-open .gallery-story-backdrop {
opacity: 1;
}
.gallery-story-lightbox.is-closing .gallery-story-backdrop {
opacity: 0 !important;
backdrop-filter: blur(0px) !important;
}
.gallery-story-lightbox.is-closing .gallery-story-panel {
animation: galleryStoryOut .34s cubic-bezier(.22,.61,.36,1) both !important;
}
@keyframes galleryStoryOut {
from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
to { opacity: 0; transform: translateY(20px) scale(.975); filter: blur(1px); }
}
html.gallery-scroll-gutter-stable {
overflow-y: scroll !important;
scrollbar-gutter: stable !important;
}
body.gallery-lightbox-open,
body.gallery-lightbox-open.gallery-scroll-locked {
overflow: visible !important;
}
body.gallery-scroll-locked {
touch-action: none;
}
/* ===== End final patch ===== */
/* Services page refined accordion layout */
body.services-page .services-page-section {
padding-top: 86px;
padding-bottom: 76px;
}
body.services-page .services-faq-section {
padding-top: 68px;
padding-bottom: 96px;
}
body.services-page .services-container {
max-width: 1120px;
}
.services-intro-card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
gap: 30px;
align-items: stretch;
padding: 34px;
border: 1px solid rgba(188, 153, 98, .42);
border-radius: 30px;
background:
linear-gradient(135deg, rgba(255, 252, 244, .96), rgba(249, 239, 217, .88)),
var(--paper-texture, none);
box-shadow: 0 28px 64px rgba(61, 47, 28, .10);
overflow: hidden;
}
.services-intro-card::before {
content: "";
position: absolute;
inset: 18px auto 18px 0;
width: 7px;
border-radius: 999px;
background: linear-gradient(180deg, #0d4d3d, #d9b56f);
opacity: .88;
}
.services-intro-card::after {
content: "";
position: absolute;
right: -70px;
top: -90px;
width: 260px;
height: 260px;
border-radius: 50%;
background: radial-gradient(circle, rgba(219, 185, 112, .22), rgba(219, 185, 112, 0) 66%);
pointer-events: none;
}
.services-kicker {
display: inline-block;
margin-bottom: 12px;
font-size: .82rem;
letter-spacing: .18em;
text-transform: uppercase;
color: #a77535;
font-weight: 700;
}
.services-intro-copy h2 {
margin: 0 0 14px;
font-family: var(--serif, "Noto Serif TC", serif);
font-size: clamp(2rem, 4vw, 3.15rem);
letter-spacing: .06em;
color: #0f463d;
}
.services-intro-copy p {
max-width: 680px;
margin: 0;
color: #45655e;
font-size: 1.04rem;
line-height: 2.05;
}
.services-quick-notes {
display: grid;
gap: 14px;
}
.services-quick-notes div {
position: relative;
padding: 18px 20px 18px 24px;
border: 1px solid rgba(188, 153, 98, .34);
border-radius: 20px;
background: rgba(255, 252, 244, .78);
box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.services-quick-notes div::before {
content: "";
position: absolute;
left: 10px;
top: 20px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #b8893e;
box-shadow: 0 0 0 4px rgba(184,137,62,.10);
}
.services-quick-notes strong {
display: block;
margin-bottom: 6px;
color: #0c443a;
font-size: 1.02rem;
letter-spacing: .05em;
}
.services-quick-notes span {
display: block;
color: #6c746c;
line-height: 1.75;
font-size: .94rem;
}
.services-section-title {
margin-top: 74px;
margin-bottom: 34px;
}
.services-section-title p {
color: #a77535;
letter-spacing: .24em;
text-transform: uppercase;
}
.services-accordion {
border: 1px solid rgba(188, 153, 98, .42);
border-radius: 28px;
background: rgba(255, 252, 244, .78);
box-shadow: 0 24px 60px rgba(61, 47, 28, .09);
overflow: hidden;
}
.service-accordion-item + .service-accordion-item {
border-top: 1px solid rgba(188, 153, 98, .32);
}
.service-accordion-toggle {
width: 100%;
min-height: 86px;
display: grid;
grid-template-columns: 70px minmax(0, 1fr) 46px;
gap: 16px;
align-items: center;
padding: 20px 26px;
border: 0;
background: linear-gradient(90deg, rgba(255, 252, 244, .96), rgba(249, 239, 217, .58));
color: #0c443a;
text-align: left;
cursor: pointer;
transition: background .28s ease, transform .28s ease;
}
.service-accordion-toggle:hover {
background: linear-gradient(90deg, rgba(255, 252, 244, 1), rgba(244, 225, 181, .56));
}
.service-accordion-item.is-open .service-accordion-toggle {
background: linear-gradient(90deg, rgba(249, 239, 217, .96), rgba(255, 252, 244, .9));
}
.service-acc-number {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 16px;
background: #0e4a3d;
color: #f7e9bf;
font-family: var(--serif, "Noto Serif TC", serif);
font-weight: 700;
letter-spacing: .08em;
box-shadow: 0 10px 22px rgba(14, 74, 61, .18);
}
.service-acc-heading strong {
display: block;
margin-bottom: 5px;
color: #0b443a;
font-family: var(--serif, "Noto Serif TC", serif);
font-size: clamp(1.05rem, 1.6vw, 1.28rem);
letter-spacing: .08em;
}
.service-acc-heading em {
display: block;
color: #6f7b72;
font-style: normal;
line-height: 1.7;
font-size: .95rem;
letter-spacing: .03em;
}
.service-acc-icon {
position: relative;
width: 34px;
height: 34px;
border: 1px solid rgba(176, 128, 58, .45);
border-radius: 50%;
background: rgba(255, 252, 244, .75);
justify-self: end;
transition: transform .28s ease, background .28s ease;
}
.service-acc-icon::before,
.service-acc-icon::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 13px;
height: 2px;
border-radius: 999px;
background: #a77535;
transform: translate(-50%, -50%);
transition: transform .28s ease, opacity .28s ease;
}
.service-acc-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.service-accordion-item.is-open .service-acc-icon {
background: #0e4a3d;
transform: rotate(180deg);
}
.service-accordion-item.is-open .service-acc-icon::before,
.service-accordion-item.is-open .service-acc-icon::after {
background: #fff8e8;
}
.service-accordion-item.is-open .service-acc-icon::after {
opacity: 0;
}
.service-accordion-panel {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height .42s cubic-bezier(.18,.82,.28,1), opacity .25s ease;
background: rgba(255, 251, 241, .74);
}
.service-accordion-item.is-open .service-accordion-panel {
opacity: 1;
}
.service-accordion-content {
padding: 6px 34px 30px 112px;
color: #344f48;
line-height: 1.9;
}
.service-accordion-content p {
margin: 0 0 14px;
font-size: 1rem;
color: #3b5e55;
}
.service-accordion-content ul {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.service-accordion-content li {
position: relative;
padding-left: 22px;
line-height: 1.85;
}
.service-accordion-content li::before {
content: "";
position: absolute;
left: 2px;
top: .82em;
width: 7px;
height: 7px;
border-radius: 50%;
background: #b8893e;
box-shadow: 0 0 0 4px rgba(184, 137, 62, .12);
}
.service-note {
margin-top: 18px;
padding: 14px 18px;
border-left: 4px solid #b8893e;
border-radius: 14px;
background: rgba(242, 223, 181, .42);
color: #5c563d;
line-height: 1.8;
}
.services-faq-accordion .service-accordion-toggle {
grid-template-columns: minmax(0, 1fr) 46px;
min-height: 70px;
}
.services-faq-accordion .service-accordion-content {
padding: 0 34px 24px 34px;
}
.services-faq-accordion .service-accordion-content p {
margin: 0;
}
@media (max-width: 900px) {
body.services-page .services-page-section { padding-top: 58px; }
.services-intro-card {
grid-template-columns: 1fr;
padding: 28px 24px;
border-radius: 24px;
}
.service-accordion-toggle {
grid-template-columns: 52px minmax(0, 1fr) 38px;
gap: 12px;
padding: 18px 18px;
}
.service-acc-number {
width: 42px;
height: 42px;
border-radius: 14px;
}
.service-accordion-content {
padding: 0 22px 26px 82px;
}
}
@media (max-width: 640px) {
.service-accordion-toggle,
.services-faq-accordion .service-accordion-toggle {
grid-template-columns: 1fr 34px;
}
.service-acc-number {
display: inline-grid;
margin-bottom: 10px;
}
.service-acc-heading {
grid-column: 1 / 2;
}
.service-accordion-content,
.services-faq-accordion .service-accordion-content {
padding: 0 18px 24px 18px;
}
.services-intro-copy h2 { font-size: 2rem; }
}
/* Services overview two-column refinement */
.services-overview-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 24px;
align-items: start;
}
.services-overview-column {
height: auto;
}
.services-overview-column .service-accordion-toggle {
min-height: 96px;
padding: 20px 24px;
}
.services-overview-column .service-accordion-content {
padding: 6px 28px 28px 108px;
}
@media (max-width: 980px) {
.services-overview-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.services-overview-column .service-accordion-content {
padding: 0 18px 24px 18px;
}
}
/* STAFF photo rules: card/thumb/full preview separation */
.staff-card:not(.expanded) .portrait img{
object-fit:cover;
object-position:center center;
}
.photo-strip img{
object-fit:cover;
object-position:center center;
}
.hover-preview{
display:grid;
place-items:center;
align-items:center;
justify-items:center;
width:100vw;
height:100dvh;
}
.preview-stage{
width:100vw;
height:100dvh;
max-width:100vw;
max-height:100dvh;
display:grid;
place-items:center;
}
.preview-layer{
display:grid;
place-items:center;
align-items:center;
justify-items:center;
transition:opacity 520ms ease, transform 520ms ease;
}
.preview-layer img{
max-width:min(92vw, 1500px);
max-height:88dvh;
width:auto;
height:auto;
object-fit:contain;
object-position:center center;
}
/* Lamb Cafe dark mode shell */
.theme-toggle{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 12px;border:1px solid rgba(182,144,82,.34);border-radius:999px;background:linear-gradient(180deg,rgba(255,253,247,.94),rgba(247,239,225,.96));box-shadow:0 10px 24px rgba(86,62,33,.10);color:#375c4f;cursor:pointer;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,background-color .45s ease,color .45s ease;flex:0 0 auto}
.theme-toggle:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(86,62,33,.16);border-color:rgba(182,144,82,.54)}
.theme-toggle:focus-visible{outline:2px solid #b69052;outline-offset:3px}
.theme-toggle-track{position:relative;display:flex;align-items:center;justify-content:space-between;width:56px;height:30px;padding:0 8px;border-radius:999px;background:linear-gradient(180deg,#f8e7ab,#e9c975 56%,#d7ad49 100%);box-shadow:inset 0 1px 3px rgba(255,255,255,.55), inset 0 -1px 3px rgba(96,58,15,.18)}
.theme-toggle-thumb{position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fffef8 0 42%,#ecd7aa 70%,#d0af68 100%);box-shadow:0 4px 10px rgba(71,48,21,.25);transition:transform .36s ease,background .36s ease}
.theme-toggle-sun,.theme-toggle-moon{font-size:12px;line-height:1;color:#6f4e1c;z-index:1}
.theme-toggle-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05}
.theme-toggle-copy strong{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.theme-toggle-copy small{font-size:11px;color:#6b6b61;letter-spacing:.08em}
html.theme-dark .theme-toggle{background:linear-gradient(180deg,rgba(35,50,45,.96),rgba(22,32,29,.98));border-color:rgba(206,181,121,.38);box-shadow:0 12px 28px rgba(0,0,0,.28);color:#f1e8d6}
html.theme-dark .theme-toggle-copy small{color:#ceb98a}
html.theme-dark .theme-toggle-track{background:linear-gradient(180deg,#21352f,#172821 65%,#101c17 100%)}
html.theme-dark .theme-toggle-thumb{transform:translateX(26px);background:radial-gradient(circle at 35% 35%,#fffef6 0 40%,#efe3bf 58%,#c7b279 76%,#9a854a 100%)}
.theme-transition-layer{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:160;background:radial-gradient(circle at 18% 18%,rgba(255,233,176,.52),transparent 38%),linear-gradient(140deg,rgba(10,22,19,.0),rgba(10,22,19,.0))}
.theme-transition-layer.animate{animation:lambThemeWash .72s ease both}
.theme-transition-layer.to-dark{background:radial-gradient(circle at 18% 18%,rgba(255,233,176,.24),transparent 30%),linear-gradient(140deg,rgba(12,25,22,.08),rgba(12,25,22,.88))}
.theme-transition-layer.to-light{background:radial-gradient(circle at 18% 18%,rgba(255,247,218,.50),transparent 30%),linear-gradient(140deg,rgba(255,247,223,.84),rgba(255,247,223,.0))}
@keyframes lambThemeWash{0%{opacity:0}20%{opacity:.55}65%{opacity:.48}100%{opacity:0}}
@media (max-width: 1120px){.nav{gap:18px}.navlinks{gap:22px}.theme-toggle-copy{display:none}.theme-toggle{padding:8px 10px}.theme-toggle-track{width:52px;height:28px}.theme-toggle-thumb{width:22px;height:22px}}
@media (max-width: 860px){.theme-toggle{margin-left:auto;order:2}.mobile-toggle{order:3}.navlinks{order:4;width:100%}}
@media (max-width: 620px){.theme-toggle-track{width:48px;height:26px}.theme-toggle-thumb{width:20px;height:20px}.theme-toggle-sun,.theme-toggle-moon{font-size:10px}html.theme-dark .theme-toggle-thumb{transform:translateX(22px)}}
/* Dark theme palette */
html.theme-dark body, html.theme-dark .page, html.theme-dark .page-bg{color:#efe6d7}
html.theme-dark .page-bg{background:radial-gradient(circle at 12% 10%,rgba(255,255,255,.06),transparent 30%),linear-gradient(180deg,#10211c 0%,#152922 42%,#0d1713 100%)}
html.theme-dark .site-header{background:rgba(17,28,24,.92);border-bottom-color:rgba(211,184,120,.26);box-shadow:0 10px 24px rgba(0,0,0,.22)}
html.theme-dark .navlinks a{color:#d8cfba}
html.theme-dark .navlinks a span{color:#b6a886}
html.theme-dark .navlinks a.active,html.theme-dark .navlinks a:hover{color:#f5ebda}
html.theme-dark .navlinks a.active::after,html.theme-dark .navlinks a:hover::after{background:#d3b467}
html.theme-dark .mobile-toggle{background:#1b2f28;color:#f1e8d6;border-color:rgba(208,183,124,.42)}
html.theme-dark .footer{background:linear-gradient(180deg,rgba(11,20,17,.95),rgba(9,16,13,.98));border-top:1px solid rgba(211,184,120,.18);color:#e6dbc7}
html.theme-dark .footer h4,html.theme-dark .footer a,html.theme-dark .footer-bottom{color:#f0e5d2}
html.theme-dark .footer p{color:#d1c3ab}
html.theme-dark .music,html.theme-dark .music-body,html.theme-dark .music-volume-popover{background:linear-gradient(180deg,rgba(20,32,28,.98),rgba(13,23,20,.98));color:#f1e8d6;border-color:rgba(211,184,120,.24);box-shadow:0 16px 34px rgba(0,0,0,.28)}
html.theme-dark .music-title,html.theme-dark #musicCurrent,html.theme-dark #musicDuration{color:#f1e8d6}
html.theme-dark .music-disc{box-shadow:0 12px 24px rgba(0,0,0,.36)}
html.theme-dark .music-progress-wrap input[type=range]{background:linear-gradient(90deg,#8e7441 0%,#8e7441 var(--progress,0%),rgba(255,255,255,.18) var(--progress,0%),rgba(255,255,255,.18) 100%)}
html.theme-dark .music-volume-toggle,html.theme-dark .music-toggle-icon{color:#f1e8d6}
html.theme-dark .music-toggle-icon{background:rgba(255,255,255,.06);border-color:rgba(211,184,120,.28)}
html.theme-dark .music-volume-popover input[type=range]{background:linear-gradient(90deg,#8e7441 0%,#8e7441 calc(var(--volume-progress,50) * 1%),rgba(255,255,255,.18) calc(var(--volume-progress,50) * 1%),rgba(255,255,255,.18) 100%)}
html.theme-dark #siteContent, html.theme-dark .site-content{color:#efe6d7}
html.theme-dark .hero-inner,html.theme-dark .visit-hero-content,html.theme-dark .staff-hero-content,html.theme-dark .gallery-hero-content,html.theme-dark .rp-hero-content,html.theme-dark .menu-hero-content,html.theme-dark .page-hero-content,html.theme-dark .inner-hero-content{color:#fbf3e6;text-shadow:0 4px 16px rgba(0,0,0,.38)}
html.theme-dark .section-title,html.theme-dark .hero-en,html.theme-dark .hero-subtitle,html.theme-dark .subtitle,html.theme-dark h2,html.theme-dark h3,html.theme-dark h4,html.theme-dark .feature strong{color:#f3e7d3}
html.theme-dark p,html.theme-dark li,html.theme-dark .feature,html.theme-dark .journal-card-more,html.theme-dark .channel-desc,html.theme-dark .service-accordion-content,html.theme-dark .gallery-journal-note,html.theme-dark .visit-card p,html.theme-dark .contact-discord-card p{color:#dbcbb2}
html.theme-dark a{color:#ecd4a1}
html.theme-dark .entry-card,html.theme-dark .paper-card,html.theme-dark .image-text-card,html.theme-dark .journal-card,html.theme-dark .photo-card,html.theme-dark .visit-card,html.theme-dark .visit-side-card,html.theme-dark .contact-discord-card,html.theme-dark .map-frame,html.theme-dark .service-accordion-item,html.theme-dark .services-faq-accordion .service-accordion-item,html.theme-dark .staff-card,html.theme-dark .staff-card.expanded,html.theme-dark .menu-page-section,html.theme-dark .menu-showcase,html.theme-dark .gallery-story-lightbox,html.theme-dark .discord-iframe-shell,html.theme-dark .discord-channel-list,html.theme-dark .discord-iframe-head,html.theme-dark .full-map-stage,html.theme-dark .full-map-modal,html.theme-dark .about-page .paper-section,html.theme-dark .light-section,html.theme-dark .paper-section{background:linear-gradient(180deg,rgba(25,40,34,.96),rgba(18,30,26,.98));border-color:rgba(211,184,120,.18)!important;box-shadow:0 16px 32px rgba(0,0,0,.20)}
html.theme-dark .menu-anchor,html.theme-dark .service-accordion-toggle,html.theme-dark .gallery-item .journal-card-more,html.theme-dark .map-open-btn,html.theme-dark .full-map-close,html.theme-dark .discord-channel-btn,html.theme-dark .music-volume-popover,html.theme-dark .contact-discord-card,html.theme-dark .visit-map-open-fixed,html.theme-dark .journal-card .journal-card-more{color:#f0e5d2}
html.theme-dark .service-accordion-toggle,html.theme-dark .discord-channel-btn,html.theme-dark .menu-anchor,html.theme-dark .map-open-btn,html.theme-dark .full-map-close,html.theme-dark .journal-card-more{background:linear-gradient(180deg,rgba(35,57,49,.92),rgba(21,34,29,.96));border-color:rgba(211,184,120,.24)}
html.theme-dark .discord-channel-btn.is-active,html.theme-dark .menu-anchor.is-active,html.theme-dark .service-accordion-item.is-open .service-accordion-toggle{background:linear-gradient(180deg,rgba(77,65,34,.92),rgba(54,44,23,.96));border-color:rgba(224,197,132,.42)}
html.theme-dark .staff-card .meta,html.theme-dark .staff-card .caption,html.theme-dark .staff-card .role,html.theme-dark .visit-side-card .small,html.theme-dark .gallery-item .tag,html.theme-dark .gallery-story-lightbox .tag{color:#cfba8c}
html.theme-dark .gallery-story-lightbox,html.theme-dark .hover-preview,html.theme-dark .full-map-modal{background:rgba(5,10,8,.82)}
html.theme-dark .preview-layer img,html.theme-dark .full-map-stage img{box-shadow:0 18px 40px rgba(0,0,0,.34)}
html.theme-dark .about-space-grid .feature,html.theme-dark .feature{background:transparent}
html.theme-dark .brand img{filter:drop-shadow(0 7px 14px rgba(0,0,0,.30))}
html.theme-dark .map-open-btn:hover,html.theme-dark .discord-channel-btn:hover,html.theme-dark .service-accordion-toggle:hover,html.theme-dark .journal-card-more:hover,html.theme-dark .menu-anchor:hover{transform:translateY(-1px)}
html.theme-dark .hero::after, html.theme-dark .visit-hero::after, html.theme-dark .staff-hero::after, html.theme-dark .gallery-hero::after, html.theme-dark .rp-hero::after, html.theme-dark .menu-hero::after, html.theme-dark .page-hero::after, html.theme-dark .inner-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,18,15,.18),rgba(10,18,15,.38));pointer-events:none}
html.theme-dark .hero, html.theme-dark .visit-hero, html.theme-dark .staff-hero, html.theme-dark .gallery-hero, html.theme-dark .rp-hero, html.theme-dark .menu-hero, html.theme-dark .page-hero, html.theme-dark .inner-hero{position:relative;isolation:isolate}
/* color transition targets for theme switching */
.page-bg,.site-header,.footer,.music,.music-body,.music-volume-popover,.entry-card,.paper-card,.image-text-card,.journal-card,.photo-card,.visit-card,.visit-side-card,.contact-discord-card,.map-frame,.service-accordion-item,.staff-card,.menu-page-section,.menu-showcase,.gallery-story-lightbox,.discord-iframe-shell,.discord-channel-list,.discord-iframe-head,.full-map-stage,.full-map-modal,.navlinks a,.navlinks a span,.section-title,.hero-inner,.visit-hero-content,.staff-hero-content,.gallery-hero-content,.rp-hero-content,.menu-hero-content,.page-hero-content,.inner-hero-content,.theme-toggle,.theme-toggle-thumb{transition:background-color .42s ease,color .42s ease,border-color .42s ease,box-shadow .42s ease,transform .28s ease}
/* ============================================================
Lamb Cafe dark mode contrast refinement 2026-06-13
修正項目：導航列偏黑髒、Logo 對比不足、BGM/HOME/ABOUT/MENU/STAFF/VISIT/GALLERY/SERVICES
夜間模式文字與背景對比不足，以及部分區塊過亮問題。
============================================================ */
html.theme-dark{
--lc-night-bg:#0f2a22;
--lc-night-bg-deep:#0a1b16;
--lc-night-panel:#132f27;
--lc-night-panel-2:#18372e;
--lc-night-panel-soft:#203f35;
--lc-night-paper:#17352c;
--lc-night-paper-2:#10271f;
--lc-night-line:rgba(220,188,112,.38);
--lc-night-line-soft:rgba(220,188,112,.22);
--lc-night-cream:#f5ead3;
--lc-night-text:#e8dcc3;
--lc-night-muted:#cbb892;
--lc-night-gold:#dfbf76;
--lc-night-gold-2:#f0d99e;
--lc-night-green-text:#83d2ad;
}
/* 1. 外殼導航列：維持與日間相近透明度，但改為乾淨深綠，不偏黑不發髒 */
html.theme-dark .site-header{
background:rgba(15,42,34,.94) !important;
border-bottom:1px solid rgba(223,191,118,.36) !important;
box-shadow:0 9px 26px rgba(0,0,0,.18) !important;
backdrop-filter:blur(10px) !important;
}
html.theme-dark .brand img{
content:url('assets/logo-night.png');
filter:drop-shadow(0 8px 16px rgba(0,0,0,.32)) drop-shadow(0 0 8px rgba(223,191,118,.16)) !important;
}
html.theme-dark .navlinks a{color:var(--lc-night-cream) !important;text-shadow:0 1px 4px rgba(0,0,0,.28)}
html.theme-dark .navlinks a span{color:#e3d3ad !important}
html.theme-dark .navlinks a.active,html.theme-dark .navlinks a:hover{color:#fff3d8 !important}
html.theme-dark .navlinks a.active::after,html.theme-dark .navlinks a:hover::after{background:var(--lc-night-gold) !important}
/* 2. BGM 播放器：文字與控制項提高對比 */
html.theme-dark .music,
html.theme-dark .music-body,
html.theme-dark .music-volume-popover{
background:rgba(16,43,35,.94) !important;
border-color:rgba(223,191,118,.42) !important;
color:var(--lc-night-cream) !important;
}
html.theme-dark .music-title,
html.theme-dark #musicCurrent,
html.theme-dark #musicDuration,
html.theme-dark .music-title-row,
html.theme-dark .music-volume-toggle{
color:#f7ecd3 !important;
opacity:1 !important;
}
html.theme-dark .music-volume-toggle span i{background:#d9c07e !important;opacity:1 !important}
html.theme-dark .music-toggle-icon{
background:#27614f !important;
border-color:rgba(223,191,118,.35) !important;
color:#fff1d0 !important;
}
html.theme-dark .music-icon-play{border-left-color:#fff1d0 !important}
html.theme-dark .music-progress-wrap input[type=range]{
accent-color:#e6c67d;
filter:brightness(1.04);
}
/* 3. 全站夜間文字通用層級 */
html.theme-dark body,
html.theme-dark #siteContent,
html.theme-dark .site-content{
color:var(--lc-night-text) !important;
}
html.theme-dark h1,
html.theme-dark h2,
html.theme-dark h3,
html.theme-dark h4,
html.theme-dark .section-title,
html.theme-dark .subtitle,
html.theme-dark .entry-kicker,
html.theme-dark .services-kicker,
html.theme-dark .section-kicker,
html.theme-dark .eyebrow{
color:var(--lc-night-gold-2) !important;
opacity:1 !important;
}
html.theme-dark p,
html.theme-dark li,
html.theme-dark span,
html.theme-dark .intro-text,
html.theme-dark .content,
html.theme-dark .short,
html.theme-dark .expanded-intro,
html.theme-dark .game-id,
html.theme-dark .role,
html.theme-dark .service-note{
color:var(--lc-night-text) !important;
}
/* 4. 全站深色面板：避免仍顯示日間米白卡片 */
html.theme-dark .light-section,
html.theme-dark .paper-section,
html.theme-dark .paper-card,
html.theme-dark .feature-box,
html.theme-dark .entry-card,
html.theme-dark .home-guide-card,
html.theme-dark .image-text-card,
html.theme-dark .visit-card,
html.theme-dark .visit-side-card,
html.theme-dark .contact-discord-card,
html.theme-dark .map-frame,
html.theme-dark .menu-page-section,
html.theme-dark .menu-showcase,
html.theme-dark .menu-list-panel,
html.theme-dark .staff-section,
html.theme-dark .staff-card,
html.theme-dark .staff-card.expanded,
html.theme-dark .journal-card,
html.theme-dark .gallery-journal-board,
html.theme-dark .services-intro-card,
html.theme-dark .services-quick-notes,
html.theme-dark .service-accordion-item,
html.theme-dark .services-faq-accordion .service-accordion-item{
background:linear-gradient(180deg,rgba(19,47,39,.98),rgba(12,31,25,.98)) !important;
border-color:var(--lc-night-line-soft) !important;
color:var(--lc-night-text) !important;
box-shadow:0 18px 44px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
/* HOME：內文與探索卡片 */
html.theme-dark .home-page .feature,
html.theme-dark .home-page .feature strong,
html.theme-dark .home-page .entry-card h3,
html.theme-dark .home-page .entry-card .entry-kicker,
html.theme-dark .home-page .entry-card p,
html.theme-dark .home-page .entry-card span{
color:var(--lc-night-cream) !important;
opacity:1 !important;
}
html.theme-dark .home-page .entry-card{
background:linear-gradient(180deg,rgba(22,54,45,.98),rgba(13,34,28,.99)) !important;
}
html.theme-dark .home-page .entry-card .small-btn,
html.theme-dark .home-page .small-btn,
html.theme-dark .btn{
background:#214f41 !important;
border:1px solid rgba(223,191,118,.28) !important;
color:#fff5d8 !important;
}
html.theme-dark .home-page .entry-card .entry-kicker{color:#e5c379 !important}
html.theme-dark .home-page .entry-card h3{color:#f7ecd3 !important}
/* ABOUT：卡片與步驟文字拉開層次 */
html.theme-dark .about-page .paper-card,
html.theme-dark .about-page .image-text-card,
html.theme-dark .about-page .step,
html.theme-dark .about-space-grid .feature{
background:linear-gradient(180deg,rgba(20,49,41,.98),rgba(12,31,25,.98)) !important;
border:1px solid var(--lc-night-line-soft) !important;
color:var(--lc-night-text) !important;
}
html.theme-dark .about-page .paper-card p,
html.theme-dark .about-page .image-text-card p,
html.theme-dark .about-page .step p,
html.theme-dark .about-page .feature p{
color:#eadfc9 !important;
}
html.theme-dark .about-page .num{
background:#e4c578 !important;
color:#11291f !important;
box-shadow:0 0 0 4px rgba(228,197,120,.14) !important;
}
/* MENU：主食/飲品/甜點列表區不再米白過亮，文字清楚 */
html.theme-dark .menu-page .menu-page-section,
html.theme-dark .menu-page .menu-list-panel,
html.theme-dark .menu-page .menu-showcase{
background:linear-gradient(180deg,rgba(19,48,40,.99),rgba(11,29,24,.99)) !important;
border:1px solid rgba(223,191,118,.32) !important;
}
html.theme-dark .menu-page .menu-list-panel h2,
html.theme-dark .menu-page .menu-list-panel h3,
html.theme-dark .menu-page .menu-list-panel .subtitle,
html.theme-dark .menu-page .menu-list-panel p,
html.theme-dark .menu-page .menu-list-panel li,
html.theme-dark .menu-page .menu-list-grid,
html.theme-dark .menu-page .menu-list-grid *{
color:#f3e5c8 !important;
opacity:1 !important;
}
html.theme-dark .menu-page .menu-list-panel h2,
html.theme-dark .menu-page .menu-list-panel h3{
color:#f0d99e !important;
}
html.theme-dark .menu-page .menu-list-grid > *,
html.theme-dark .menu-page .menu-list-grid li,
html.theme-dark .menu-page .menu-list-grid div{
border-color:rgba(223,191,118,.28) !important;
}
html.theme-dark .menu-page .menu-side-label,
html.theme-dark .menu-page .menu-side-label *{
color:#e5c379 !important;
}
html.theme-dark .menu-page .menu-anchor{
background:rgba(35,83,68,.96) !important;
color:#fff1d0 !important;
border:1px solid rgba(223,191,118,.32) !important;
}
html.theme-dark .menu-page .menu-anchor.is-active,
html.theme-dark .menu-page .menu-anchor:hover{
background:rgba(207,177,105,.86) !important;
color:#10291f !important;
}
/* STAFF：背景過亮修正、小卡與大卡文字提高對比 */
html.theme-dark .staff-page .light-section,
html.theme-dark .staff-page .paper-section,
html.theme-dark .staff-section{
background:linear-gradient(180deg,#0f2a22 0%,#0b211b 100%) !important;
}
html.theme-dark .staff-card{
background:linear-gradient(180deg,rgba(20,49,41,.99),rgba(11,29,24,.99)) !important;
border-color:rgba(223,191,118,.26) !important;
}
html.theme-dark .staff-card .name,
html.theme-dark .staff-card h3{
color:#f6ead1 !important;
}
html.theme-dark .staff-card .role,
html.theme-dark .staff-card .game-id{
color:#e4c578 !important;
}
html.theme-dark .staff-card .short,
html.theme-dark .staff-card p,
html.theme-dark .staff-card span{
color:#eadfc9 !important;
}
html.theme-dark .staff-card .detail-box{
border-left-color:#d8ad56 !important;
background:rgba(255,255,255,.025) !important;
}
html.theme-dark .staff-card .detail-box b,
html.theme-dark .staff-card .detail-box strong{
color:#f0d99e !important;
}
html.theme-dark .staff-card .detail-box span{
color:#ddcfb7 !important;
}
html.theme-dark .staff-card .close-btn{
background:#e4c578 !important;
color:#10291f !important;
}
/* VISIT / DISCORD：區塊不要太亮，文字清楚 */
html.theme-dark .visit-page .light-section,
html.theme-dark .visit-page .paper-section{
background:linear-gradient(180deg,#102b23,#0b211b) !important;
}
html.theme-dark .discord-panel,
html.theme-dark .discord-main-row,
html.theme-dark .discord-layout-container,
html.theme-dark .discord-channel-list,
html.theme-dark .discord-iframe-shell,
html.theme-dark .discord-iframe-viewport,
html.theme-dark .discord-iframe-head{
background:linear-gradient(180deg,rgba(19,48,40,.99),rgba(11,29,24,.99)) !important;
border-color:rgba(223,191,118,.24) !important;
color:#f3e5c8 !important;
}
html.theme-dark .discord-section-head h2,
html.theme-dark .discord-section-head p,
html.theme-dark .discord-iframe-head,
html.theme-dark .discord-iframe-head *,
html.theme-dark .channel-name,
html.theme-dark .channel-desc{
color:#f3e5c8 !important;
opacity:1 !important;
}
html.theme-dark .discord-channel-btn{
background:linear-gradient(180deg,rgba(33,79,65,.98),rgba(19,50,41,.98)) !important;
color:#f3e5c8 !important;
border-color:rgba(223,191,118,.32) !important;
}
html.theme-dark .discord-channel-btn.active,
html.theme-dark .discord-channel-btn.is-active{
background:linear-gradient(180deg,rgba(230,200,125,.96),rgba(202,161,78,.96)) !important;
color:#10291f !important;
}
html.theme-dark .discord-channel-btn.active .channel-name,
html.theme-dark .discord-channel-btn.is-active .channel-name,
html.theme-dark .discord-channel-btn.active .channel-desc,
html.theme-dark .discord-channel-btn.is-active .channel-desc{
color:#10291f !important;
}
/* GALLERY：卡片標題與燈箱文字對比 */
html.theme-dark .gallery-page .gallery-album-wrap,
html.theme-dark .gallery-page .gallery-journal-board{
background:linear-gradient(180deg,rgba(19,48,40,.99),rgba(11,29,24,.99)) !important;
border-color:rgba(223,191,118,.24) !important;
}
html.theme-dark .gallery-page .journal-card{
background:linear-gradient(180deg,rgba(17,43,35,.99),rgba(10,28,23,.99)) !important;
border-color:rgba(223,191,118,.28) !important;
}
html.theme-dark .gallery-page .journal-card h3,
html.theme-dark .gallery-page .journal-card .journal-title{
color:#f0d99e !important;
opacity:1 !important;
}
html.theme-dark .gallery-page .journal-card p,
html.theme-dark .gallery-page .journal-card span{
color:#eadfc9 !important;
}
html.theme-dark .gallery-page .journal-card-more{
background:#255b49 !important;
color:#fff5d8 !important;
border-color:rgba(223,191,118,.32) !important;
}
html.theme-dark .gallery-story-lightbox,
html.theme-dark .gallery-story-panel{
background:linear-gradient(180deg,rgba(18,44,37,.99),rgba(9,25,20,.99)) !important;
color:#eadfc9 !important;
border-color:rgba(223,191,118,.35) !important;
}
html.theme-dark .gallery-story-copy,
html.theme-dark .gallery-story-text,
html.theme-dark .gallery-story-copy p,
html.theme-dark .gallery-story-copy span{
color:#eadfc9 !important;
opacity:1 !important;
}
html.theme-dark .gallery-story-copy h2,
html.theme-dark .gallery-story-copy h3,
html.theme-dark .gallery-story-label{
color:#f0d99e !important;
opacity:1 !important;
}
html.theme-dark .gallery-story-close{
background:#f0d99e !important;
color:#10291f !important;
}
/* SERVICES：導言卡、右側小卡、手風琴展開區與綠字標題 */
html.theme-dark .services-page .services-intro-card,
html.theme-dark .services-page .services-quick-notes,
html.theme-dark .services-page .services-overview-grid,
html.theme-dark .services-page .services-overview-column,
html.theme-dark .services-page .services-page-section,
html.theme-dark .services-page .services-faq-section{
background:linear-gradient(180deg,rgba(19,48,40,.99),rgba(11,29,24,.99)) !important;
border-color:rgba(223,191,118,.24) !important;
color:#eadfc9 !important;
}
html.theme-dark .services-page .services-intro-card h1,
html.theme-dark .services-page .services-intro-card h2,
html.theme-dark .services-page .services-intro-card p,
html.theme-dark .services-page .services-intro-copy,
html.theme-dark .services-page .services-quick-notes *,
html.theme-dark .services-page .service-note{
color:#eadfc9 !important;
opacity:1 !important;
}
html.theme-dark .services-page .services-intro-card h1,
html.theme-dark .services-page .services-intro-card h2,
html.theme-dark .services-page .services-kicker{
color:#f0d99e !important;
}
html.theme-dark .services-page .service-accordion-item{
background:linear-gradient(180deg,rgba(18,44,37,.99),rgba(10,28,23,.99)) !important;
border-color:rgba(223,191,118,.25) !important;
}
html.theme-dark .services-page .service-accordion-toggle{
background:linear-gradient(180deg,rgba(33,79,65,.98),rgba(18,47,38,.98)) !important;
color:#f3e5c8 !important;
}
html.theme-dark .services-page .service-accordion-item.is-open .service-accordion-toggle{
background:linear-gradient(180deg,rgba(90,72,36,.96),rgba(60,48,25,.98)) !important;
}
html.theme-dark .services-page .service-acc-heading,
html.theme-dark .services-page .service-accordion-toggle h3,
html.theme-dark .services-page .service-accordion-toggle strong{
color:#f0d99e !important;
}
html.theme-dark .services-page .service-accordion-toggle p,
html.theme-dark .services-page .service-accordion-toggle span{
color:#eadfc9 !important;
}
html.theme-dark .services-page .service-accordion-content,
html.theme-dark .services-page .service-accordion-panel{
background:linear-gradient(180deg,rgba(16,39,32,.98),rgba(10,27,22,.98)) !important;
color:#eadfc9 !important;
}
html.theme-dark .services-page .service-accordion-content p,
html.theme-dark .services-page .service-accordion-content li,
html.theme-dark .services-page .service-accordion-content span,
html.theme-dark .services-page .service-accordion-panel p,
html.theme-dark .services-page .service-accordion-panel li,
html.theme-dark .services-page .service-accordion-panel span{
color:#eadfc9 !important;
opacity:1 !important;
}
html.theme-dark .services-page .service-acc-number{
background:#0c7a5d !important;
color:#fff3d8 !important;
}
html.theme-dark .services-page .service-acc-icon{
background:#e5c379 !important;
color:#0f2a22 !important;
}
/* 防止日間米白色殘留成大面積亮塊 */
html.theme-dark [style*="background:#fff"],
html.theme-dark [style*="background: #fff"],
html.theme-dark [style*="background-color:#fff"],
html.theme-dark [style*="background-color: #fff"]{
background:linear-gradient(180deg,rgba(19,48,40,.99),rgba(11,29,24,.99)) !important;
}
/* 按鈕 / 線條 / 標籤通用補強 */
html.theme-dark button,
html.theme-dark .small-btn,
html.theme-dark .map-open-btn,
html.theme-dark .full-map-close,
html.theme-dark .journal-card-more,
html.theme-dark .discord-join-button{
color:#fff5d8 !important;
}
html.theme-dark .flourish,
html.theme-dark .orn-line,
html.theme-dark .ornament-line{
border-color:rgba(223,191,118,.48) !important;
color:#dfbf76 !important;
}
/* ============================================================
Lamb Cafe final dark-mode details + Services FAQ guide images
2026-06-13
============================================================ */
/* Services FAQ guide images */
.faq-guide-content{
display:flex;
flex-direction:column;
gap:18px;
}
.faq-guide-image{
margin:4px 0 0;
border:1px solid rgba(188,142,67,.32);
border-radius:18px;
overflow:hidden;
background:#10291f;
box-shadow:0 16px 34px rgba(0,0,0,.16);
}
.faq-guide-image img{
display:block;
width:100%;
height:auto;
}
/* Let service accordion panels fully show image content after open */
.services-accordion .service-accordion-panel{
overflow:hidden;
}
.services-accordion .service-accordion-item.is-open .service-accordion-panel{
overflow:visible;
}
/* First-visit day mode is script-controlled; these are only dark-mode refinements. */
/* 2. Services page right-side quick notes: remove leftover bright capsules in night mode */
html.theme-dark .services-page .services-quick-notes{
background:transparent !important;
box-shadow:none !important;
border:0 !important;
}
html.theme-dark .services-page .services-quick-notes > div{
background:linear-gradient(180deg,rgba(28,70,58,.98),rgba(16,43,35,.99)) !important;
border:1px solid rgba(225,194,121,.34) !important;
box-shadow:0 14px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05) !important;
color:#eadfc9 !important;
}
html.theme-dark .services-page .services-quick-notes > div strong{
color:#f0d99e !important;
opacity:1 !important;
}
html.theme-dark .services-page .services-quick-notes > div span{
color:#eadfc9 !important;
opacity:1 !important;
}
html.theme-dark .services-page .services-quick-notes > div::before,
html.theme-dark .services-page .services-quick-notes > div:before{
background:#dfbf76 !important;
box-shadow:0 0 0 4px rgba(223,191,118,.14) !important;
}
/* Services FAQ panels with guide images in night mode */
html.theme-dark .services-page .services-faq-accordion .service-accordion-item,
html.theme-dark .services-page .services-faq-accordion .service-accordion-toggle,
html.theme-dark .services-page .services-faq-accordion .service-accordion-content{
background:linear-gradient(180deg,rgba(21,53,44,.98),rgba(12,32,26,.99)) !important;
color:#eadfc9 !important;
border-color:rgba(225,194,121,.30) !important;
}
html.theme-dark .services-page .services-faq-accordion .service-acc-heading strong{
color:#f0d99e !important;
}
html.theme-dark .services-page .services-faq-accordion p{
color:#eadfc9 !important;
}
/* 3. Gallery lightbox label in night mode: keep day-mode green text */
html.theme-dark .gallery-story-label,
html.theme-dark .gallery-story-copy .gallery-story-label,
html.theme-dark .gallery-story-copy span.gallery-story-label{
background:rgba(240,217,158,.96) !important;
color:#194638 !important;
border:1px solid rgba(255,240,194,.72) !important;
box-shadow:0 8px 18px rgba(0,0,0,.22) !important;
opacity:1 !important;
font-weight:700 !important;
}
/* 4. Gallery lightbox dark-mode overlay: translucent and blurry, still showing page behind */
html.theme-dark .gallery-story-lightbox{
background:transparent !important;
}
html.theme-dark .gallery-story-backdrop{
background:rgba(8,28,23,.46) !important;
backdrop-filter:blur(8px) saturate(.88) !important;
-webkit-backdrop-filter:blur(8px) saturate(.88) !important;
}
html.theme-dark .gallery-story-lightbox.is-open .gallery-story-backdrop{
opacity:1 !important;
}
html.theme-dark .gallery-story-panel{
background:linear-gradient(180deg,rgba(19,48,40,.98),rgba(10,28,23,.98)) !important;
border:1px solid rgba(225,194,121,.38) !important;
box-shadow:0 26px 80px rgba(0,0,0,.34) !important;
}
html.theme-dark .gallery-story-copy{
background:transparent !important;
}
/* Keep day mode label exactly readable too */
.gallery-story-label{
color:#194638;
}
/* Lamb Cafe Services FAQ spacing refinement 2026-06-13 */
.services-faq-accordion .service-accordion-content.faq-guide-content{
padding-top:28px !important;
}
.services-faq-accordion .service-accordion-content.faq-guide-content p{
margin-top:0 !important;
margin-bottom:10px !important;
line-height:2.05 !important;
}
.services-faq-accordion .service-accordion-content.faq-guide-content p + p{
margin-top:2px !important;
}
.services-faq-accordion .service-accordion-content.faq-guide-content .faq-guide-image{
margin-top:20px !important;
}
html.theme-dark .services-faq-accordion .service-accordion-content.faq-guide-content{
padding-top:30px !important;
}
/* ============================================================
Lamb Cafe BGM record-player playlist UI
英倫復古留聲機 + 羊皮紙歌單抽屜
============================================================ */
.lamb-record-player{
width:min(470px, calc(100vw - 34px)) !important;
min-height:92px !important;
align-items:center !important;
gap:12px !important;
padding:12px 14px 12px 12px !important;
border-radius:0 !important;
border:1px solid rgba(116,83,35,.36) !important;
background:linear-gradient(180deg,rgba(255,253,246,.94),rgba(244,235,218,.95)) !important;
box-shadow:0 18px 42px rgba(80,55,22,.16), inset 0 1px 0 rgba(255,255,255,.68) !important;
}
.lamb-record-player .music-disc{
width:74px !important;
height:74px !important;
flex:0 0 74px !important;
}
.lamb-record-player .music-body{
min-width:0 !important;
flex:1 1 auto !important;
}
.lamb-record-player .music-head{
align-items:flex-start !important;
gap:10px !important;
}
.lamb-record-player .music-title-row{
align-items:flex-start !important;
gap:10px !important;
width:100% !important;
}
.music-title-stack{
min-width:0;
flex:1 1 auto;
padding-top:1px;
}
.lamb-record-player .music-title{
color:#234f43 !important;
font-size:15px !important;
font-weight:700 !important;
letter-spacing:.03em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.music-track-meta{
margin-top:2px;
color:#9b7b3e;
font-size:11px;
letter-spacing:.10em;
text-transform:uppercase;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.music-actions{
display:flex;
align-items:center;
gap:6px;
flex:0 0 auto;
}
.music-mini-btn,
.music-playlist-toggle{
width:28px;
height:28px;
border-radius:999px;
border:1px solid rgba(45,83,67,.24);
background:rgba(255,250,236,.78);
color:#214f41;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
box-shadow:0 6px 14px rgba(80,55,22,.08);
transition:transform .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
}
.music-mini-btn{
font-size:23px;
line-height:1;
font-family:Georgia, serif;
padding-bottom:2px;
}
.music-playlist-toggle{
flex-direction:column;
gap:3px;
}
.music-playlist-toggle span{
display:block;
width:12px;
height:2px;
border-radius:999px;
background:currentColor;
}
.music-mini-btn:hover,
.music-playlist-toggle:hover{
transform:translateY(-1px);
background:#214f41;
color:#fff6dd;
border-color:rgba(188,142,67,.34);
}
.music-playlist-popover{
position:absolute;
right:14px;
bottom:calc(100% + 12px);
width:min(330px, calc(100vw - 40px));
padding:14px;
border:1px solid rgba(178,132,56,.38);
border-radius:22px;
background:linear-gradient(180deg,rgba(255,250,238,.98),rgba(242,229,202,.98));
box-shadow:0 24px 54px rgba(55,38,16,.22), inset 0 1px 0 rgba(255,255,255,.7);
opacity:0;
transform:translateY(10px) scale(.98);
pointer-events:none;
transition:opacity .26s ease, transform .26s ease;
z-index:5;
}
.music-playlist-popover.is-open{
opacity:1;
transform:translateY(0) scale(1);
pointer-events:auto;
}
.music-playlist-head{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:12px;
padding:0 2px 10px;
border-bottom:1px solid rgba(180,135,62,.24);
margin-bottom:10px;
}
.music-playlist-head strong{
color:#234f43;
letter-spacing:.13em;
text-transform:uppercase;
font-size:13px;
}
.music-playlist-head span{
color:#9b7b3e;
font-size:12px;
letter-spacing:.08em;
}
.music-playlist-list{
display:flex;
flex-direction:column;
gap:8px;
}
.music-track-item{
width:100%;
display:flex;
align-items:center;
gap:10px;
text-align:left;
padding:10px 11px;
border-radius:15px;
border:1px solid rgba(40,81,66,.14);
background:rgba(255,255,255,.42);
cursor:pointer;
color:#224d40;
transition:transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.music-track-item:hover,
.music-track-item.is-active{
transform:translateY(-1px);
background:rgba(35,79,65,.95);
border-color:rgba(188,142,67,.34);
box-shadow:0 10px 20px rgba(58,42,20,.14);
color:#fff4d7;
}
.music-track-no{
width:32px;
height:32px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 32px;
background:rgba(191,147,72,.18);
color:#b07d30;
font-size:12px;
font-weight:700;
letter-spacing:.06em;
}
.music-track-item:hover .music-track-no,
.music-track-item.is-active .music-track-no{
background:#e5c37c;
color:#103326;
}
.music-track-copy{
min-width:0;
display:flex;
flex-direction:column;
gap:3px;
}
.music-track-copy strong{
font-size:14px;
color:inherit;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.music-track-copy em{
font-style:normal;
font-size:11px;
color:rgba(35,79,65,.68);
letter-spacing:.08em;
}
.music-track-item:hover .music-track-copy em,
.music-track-item.is-active .music-track-copy em{
color:rgba(255,244,215,.72);
}
/* Dark mode record-player */
html.theme-dark .lamb-record-player{
background:linear-gradient(180deg,rgba(16,43,35,.96),rgba(10,29,23,.98)) !important;
border-color:rgba(223,191,118,.38) !important;
box-shadow:0 18px 44px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
html.theme-dark .lamb-record-player .music-title{
color:#f6ead1 !important;
}
html.theme-dark .music-track-meta{
color:#d5b66e !important;
}
html.theme-dark .music-mini-btn,
html.theme-dark .music-playlist-toggle{
background:rgba(34,82,67,.76) !important;
border-color:rgba(223,191,118,.28) !important;
color:#fff3d2 !important;
}
html.theme-dark .music-mini-btn:hover,
html.theme-dark .music-playlist-toggle:hover{
background:#e4c578 !important;
color:#0d2a21 !important;
}
html.theme-dark .music-playlist-popover{
background:linear-gradient(180deg,rgba(19,48,40,.98),rgba(11,31,25,.98)) !important;
border-color:rgba(223,191,118,.38) !important;
box-shadow:0 24px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
html.theme-dark .music-playlist-head{
border-bottom-color:rgba(223,191,118,.24) !important;
}
html.theme-dark .music-playlist-head strong{
color:#f0d99e !important;
}
html.theme-dark .music-playlist-head span{
color:#d8c397 !important;
}
html.theme-dark .music-track-item{
background:rgba(255,255,255,.045) !important;
border-color:rgba(223,191,118,.16) !important;
color:#eadfc9 !important;
}
html.theme-dark .music-track-item:hover,
html.theme-dark .music-track-item.is-active{
background:linear-gradient(180deg,rgba(224,191,118,.92),rgba(183,134,56,.92)) !important;
color:#0e2a21 !important;
}
html.theme-dark .music-track-no{
background:rgba(223,191,118,.16) !important;
color:#e8c87f !important;
}
html.theme-dark .music-track-item:hover .music-track-no,
html.theme-dark .music-track-item.is-active .music-track-no{
background:#0e2a21 !important;
color:#f5e4b7 !important;
}
html.theme-dark .music-track-copy em{
color:#cdbb94 !important;
}
html.theme-dark .music-track-item:hover .music-track-copy em,
html.theme-dark .music-track-item.is-active .music-track-copy em{
color:rgba(14,42,33,.74) !important;
}
/* Mobile: keep the record player elegant but compact */
@media (max-width: 620px){
.lamb-record-player{
width:calc(100vw - 24px) !important;
padding:10px !important;
gap:8px !important;
}
.lamb-record-player .music-disc{
width:58px !important;
height:58px !important;
flex-basis:58px !important;
}
.lamb-record-player .music-title{
font-size:13px !important;
}
.music-track-meta{
font-size:10px;
}
.music-mini-btn,
.music-playlist-toggle{
width:25px;
height:25px;
}
.music-actions{
gap:4px;
}
.music-playlist-popover{
right:6px;
width:calc(100vw - 28px);
}
}
/* Services FAQ section top spacing: reduce overly large blank space above FAQ */
.services-page .services-faq-section{
padding-top:48px !important;
}
.services-page .services-faq-section .services-section-title{
margin-bottom:34px !important;
}
@media (max-width: 768px){
.services-page .services-faq-section{
padding-top:34px !important;
}
}
/* ============================================================
Lamb Cafe BGM player refinement: record-only song switching
2026-06-13
============================================================ */
/* 1. 唱片放大 15%，並往左外伸 */
.lamb-record-player{
padding-left:18px !important;
}
.lamb-record-player .music-disc{
width:86px !important;
height:86px !important;
flex-basis:86px !important;
margin-left:-34px !important;
margin-right:2px !important;
transform:translateX(-2px);
overflow:hidden;
}
.lamb-record-player.is-playing .music-disc{
animation:spin 5.5s linear infinite;
}
/* 移除中間切歌按鈕後，控制區更簡潔 */
.lamb-record-player .music-actions{
gap:8px !important;
}
.lamb-record-player .music-playlist-toggle{
width:32px !important;
height:32px !important;
}
/* 4. 不同曲目使用不同唱片色彩 / 圖案 */
.lamb-record-player .music-disc::before{
content:"";
position:absolute;
inset:0;
border-radius:50%;
opacity:.95;
mix-blend-mode:screen;
pointer-events:none;
}
.lamb-record-player .music-disc::after{
content:"";
position:absolute;
inset:12px;
border-radius:50%;
border:1px solid rgba(255,231,170,.34);
box-shadow:inset 0 0 0 10px rgba(0,0,0,.08), inset 0 0 18px rgba(255,232,170,.16);
pointer-events:none;
}
.lamb-record-player[data-track="1"] .music-disc{
background:
radial-gradient(circle at 50% 50%,#f2c66f 0 7%,#0e382c 8% 13%,transparent 14%),
repeating-conic-gradient(from 12deg,rgba(227,185,91,.72) 0 7deg,rgba(64,38,16,.18) 7deg 11deg,rgba(14,24,18,.72) 11deg 25deg),
radial-gradient(circle,#1f1209 0 26%,#0c0805 27% 100%) !important;
}
.lamb-record-player[data-track="2"] .music-disc{
background:
radial-gradient(circle at 50% 50%,#d7e0e4 0 7%,#173f54 8% 13%,transparent 14%),
repeating-conic-gradient(from 0deg,rgba(97,151,172,.76) 0 9deg,rgba(15,40,55,.76) 9deg 23deg,rgba(225,218,190,.26) 23deg 28deg),
radial-gradient(circle,#112a38 0 30%,#071419 31% 100%) !important;
}
.lamb-record-player[data-track="3"] .music-disc{
background:
radial-gradient(circle at 50% 50%,#f4d99e 0 7%,#6b3e1b 8% 13%,transparent 14%),
repeating-radial-gradient(circle,rgba(255,226,172,.16) 0 3px,transparent 3px 7px),
repeating-conic-gradient(from 28deg,rgba(133,74,28,.76) 0 8deg,rgba(26,16,9,.76) 8deg 18deg,rgba(214,158,76,.28) 18deg 23deg),
radial-gradient(circle,#2a1308 0 30%,#110804 31% 100%) !important;
}
.lamb-record-player[data-track="4"] .music-disc{
background:
radial-gradient(circle at 50% 50%,#d6c79b 0 7%,#284d60 8% 13%,transparent 14%),
linear-gradient(110deg,rgba(66,104,117,.58),transparent 40%),
repeating-conic-gradient(from 6deg,rgba(25,60,72,.84) 0 10deg,rgba(9,29,37,.86) 10deg 25deg,rgba(199,174,103,.32) 25deg 30deg),
radial-gradient(circle,#0d2630 0 29%,#061217 30% 100%) !important;
}
/* 8. 歌單展開與播放中 / 選取中的偽加載動畫 */
.music-playlist-popover{
transform-origin:bottom right;
}
.music-playlist-popover.is-auto-intro{
animation:lambPlaylistSlideUp .72s cubic-bezier(.2,.85,.25,1) both;
}
@keyframes lambPlaylistSlideUp{
0%{opacity:0;transform:translateY(18px) scale(.96)}
100%{opacity:1;transform:translateY(0) scale(1)}
}
.music-track-item{
position:relative;
overflow:hidden;
isolation:isolate;
}
.music-track-item::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
background:linear-gradient(90deg,#1f563f,#255f48);
transform-origin:left center;
transform:scaleX(0);
opacity:0;
pointer-events:none;
}
.music-track-item.is-cueing::before,
.music-track-item.is-playing-row::before{
opacity:1;
animation:lambRecordLoad 1.45s cubic-bezier(.18,.8,.25,1) both;
}
.music-track-item.is-cueing,
.music-track-item.is-playing-row{
border-color:rgba(188,142,67,.42) !important;
box-shadow:0 10px 22px rgba(58,42,20,.12);
}
.music-track-item.is-cueing .music-track-copy strong,
.music-track-item.is-playing-row .music-track-copy strong,
.music-track-item.is-cueing .music-track-copy em,
.music-track-item.is-playing-row .music-track-copy em{
animation:lambRecordTextFlip 1.45s ease both;
}
.music-track-item.is-cueing .music-track-no,
.music-track-item.is-playing-row .music-track-no{
animation:lambRecordNoFlip 1.45s ease both;
}
@keyframes lambRecordLoad{
0%{transform:scaleX(0)}
100%{transform:scaleX(1)}
}
@keyframes lambRecordTextFlip{
0%,35%{color:#214f41}
100%{color:#fff5d8}
}
@keyframes lambRecordNoFlip{
0%,35%{background:rgba(191,147,72,.18);color:#b07d30}
100%{background:#e5c37c;color:#103326}
}
.music-track-item.is-cueing,
.music-track-item.is-playing-row{
background:rgba(255,255,255,.72) !important;
color:#fff5d8 !important;
}
/* Dark mode: loading animation still shows from pale base to green */
html.theme-dark .music-track-item.is-cueing,
html.theme-dark .music-track-item.is-playing-row{
background:rgba(255,248,226,.90) !important;
}
html.theme-dark .music-track-item::before{
background:linear-gradient(90deg,#255b49,#2d6b55) !important;
}
html.theme-dark .music-track-item.is-cueing .music-track-copy strong,
html.theme-dark .music-track-item.is-playing-row .music-track-copy strong,
html.theme-dark .music-track-item.is-cueing .music-track-copy em,
html.theme-dark .music-track-item.is-playing-row .music-track-copy em{
animation:lambRecordTextFlipDark 1.45s ease both;
}
@keyframes lambRecordTextFlipDark{
0%,35%{color:#0e2a21}
100%{color:#fff5d8}
}
/* 歌單內的非播放項維持深綠質感，播放項才做讀取動畫 */
.music-track-item.is-active:not(.is-cueing):not(.is-playing-row){
background:#245747 !important;
color:#fff5d8 !important;
}
html.theme-dark .music-track-item.is-active:not(.is-cueing):not(.is-playing-row){
background:#245747 !important;
color:#fff5d8 !important;
}
/* 手機版唱片稍微收斂，避免擋住邊界 */
@media (max-width:620px){
.lamb-record-player .music-disc{
width:67px !important;
height:67px !important;
flex-basis:67px !important;
margin-left:-20px !important;
}
}
/* ============================================================
Lamb Cafe BGM player — final compact moving-track refinement
2026-06-13
- 曲目條完整留在可視區內，並與播放器形成一體。
- 進度條 / 音量整排往左收。
- 唱盤播放時用 rotate 屬性持續旋轉，不受 transform:none 影響。
- 歌單展開/收合以底部為穩定基準，上緣伸縮。
============================================================ */
@keyframes lambRecordSpin {
from { rotate: 0deg; }
to { rotate: 360deg; }
}
@keyframes spin {
from { rotate: 0deg; }
to { rotate: 360deg; }
}
.lamb-player-single-track,
.lamb-record-player-v2{
--track-row-width: 215px;
--track-row-height: 47px;
box-sizing:border-box !important;
position:fixed !important;
right:70px !important;
bottom:24px !important;
z-index:60 !important;
width:min(445px, calc(100vw - 108px)) !important;
height:83px !important;
min-height:83px !important;
max-height:83px !important;
display:block !important;
padding:27px 46px 10px 104px !important;
margin:0 !important;
overflow:visible !important;
border-radius:0 !important;
border:1px solid rgba(126,92,38,.38) !important;
background:linear-gradient(180deg,rgba(255,253,246,.96),rgba(246,238,222,.96)) !important;
box-shadow:0 16px 34px rgba(71,49,20,.15), inset 0 1px 0 rgba(255,255,255,.72) !important;
color:#4a5c52 !important;
}
/* 唱盤：定位不使用 transform；旋轉使用 rotate keyframes */
.lamb-player-single-track .music-disc,
.lamb-record-player-v2 .music-disc{
box-sizing:border-box !important;
position:absolute !important;
left:-25px !important;
top:8px !important;
width:67px !important;
height:67px !important;
min-width:67px !important;
min-height:67px !important;
flex:0 0 67px !important;
margin:0 !important;
padding:0 !important;
transform:none !important;
rotate:0deg;
transform-origin:50% 50% !important;
border-radius:50% !important;
overflow:hidden !important;
z-index:3 !important;
background:#10100c center/cover no-repeat !important;
box-shadow:
0 10px 20px rgba(30,20,8,.23),
0 0 0 2px rgba(36,30,18,.94),
0 0 0 4px rgba(219,190,118,.34),
inset 0 0 14px rgba(255,234,178,.14) !important;
}
.lamb-player-single-track.is-playing .music-disc,
.lamb-record-player-v2.is-playing .music-disc{
animation:lambRecordSpin 7.2s linear infinite !important;
animation-play-state:running !important;
}
.lamb-player-single-track:not(.is-playing) .music-disc,
.lamb-record-player-v2:not(.is-playing) .music-disc{
animation-play-state:paused !important;
}
.lamb-player-single-track .music-disc span,
.lamb-record-player-v2 .music-disc span{ display:none !important; }
.lamb-player-single-track .music-disc::before,
.lamb-record-player-v2 .music-disc::before{
content:"";
position:absolute;
inset:0;
border-radius:50%;
background:linear-gradient(118deg,rgba(255,255,255,.34),rgba(255,255,255,0) 31%,rgba(255,245,194,.10) 53%,rgba(255,255,255,0) 72%);
mix-blend-mode:screen;
opacity:.62;
pointer-events:none;
}
.lamb-player-single-track .music-disc::after,
.lamb-record-player-v2 .music-disc::after{
content:"";
position:absolute;
inset:0;
border-radius:50%;
background:radial-gradient(circle at 50% 50%,transparent 0 17%,rgba(255,242,194,.12) 17.4% 18.2%,transparent 18.8% 44%,rgba(255,242,194,.10) 44.4% 45.1%,transparent 45.7%);
pointer-events:none;
}
.lamb-player-single-track[data-track="1"] .music-disc,.lamb-record-player-v2[data-track="1"] .music-disc{background-image:url('assets/records/record-01.svg') !important;}
.lamb-player-single-track[data-track="2"] .music-disc,.lamb-record-player-v2[data-track="2"] .music-disc{background-image:url('assets/records/record-02.svg') !important;}
.lamb-player-single-track[data-track="3"] .music-disc,.lamb-record-player-v2[data-track="3"] .music-disc{background-image:url('assets/records/record-03.svg') !important;}
.lamb-player-single-track[data-track="4"] .music-disc,.lamb-record-player-v2[data-track="4"] .music-disc{background-image:url('assets/records/record-04.svg') !important;}
/* 左上清單 / 左下播放：保持正圓 */
.lamb-player-single-track .music-side-controls,
.lamb-record-player-v2 .music-side-controls{
position:absolute !important;
left:51px !important;
top:14px !important;
width:27px !important;
height:56px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:space-between !important;
gap:0 !important;
z-index:4 !important;
}
.lamb-player-single-track .music-side-btn,
.lamb-player-single-track .music-toggle-icon,
.lamb-player-single-track .music-playlist-toggle,
.lamb-record-player-v2 .music-side-btn,
.lamb-record-player-v2 .music-toggle-icon,
.lamb-record-player-v2 .music-playlist-toggle{
box-sizing:border-box !important;
width:27px !important;
height:27px !important;
min-width:27px !important;
max-width:27px !important;
min-height:27px !important;
max-height:27px !important;
aspect-ratio:1 / 1 !important;
flex:0 0 27px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
border-radius:50% !important;
background:#174d3f !important;
color:#fff8df !important;
box-shadow:0 6px 12px rgba(24,57,45,.15), inset 0 1px 0 rgba(255,255,255,.08) !important;
transition:transform .22s ease, background .22s ease, box-shadow .22s ease !important;
}
.lamb-player-single-track .music-side-btn:hover,
.lamb-record-player-v2 .music-side-btn:hover{
transform:translateY(-1px) !important;
background:#22624f !important;
}
.lamb-player-single-track .music-playlist-toggle,
.lamb-record-player-v2 .music-playlist-toggle{
flex-direction:column !important;
gap:3px !important;
}
.lamb-player-single-track .music-playlist-toggle span,
.lamb-record-player-v2 .music-playlist-toggle span{
width:13px !important;
height:2px !important;
background:currentColor !important;
border-radius:999px !important;
}
.lamb-player-single-track .music-icon-play,
.lamb-record-player-v2 .music-icon-play{
margin-left:2px !important;
border-left-width:10px !important;
border-top-width:6px !important;
border-bottom-width:6px !important;
}
.lamb-player-single-track .music-icon-pause i,
.lamb-record-player-v2 .music-icon-pause i{
height:12px !important;
width:4px !important;
}
/* 主體 */
.lamb-player-single-track .music-body,
.lamb-record-player-v2 .music-body{
position:relative !important;
width:100% !important;
height:46px !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
}
/* 曲目條：改由右側安全距離控制，完整留在 viewport 內，也更像疊在播放器上 */
.music-now-slot{
position:absolute !important;
left:auto !important;
right:-8px !important;
top:-39px !important;
width:var(--track-row-width) !important;
height:var(--track-row-height) !important;
z-index:5 !important;
pointer-events:auto !important;
}
/* 曲目條：收合 / 歌單內大小一致，不縮放、不變形 */
.music-track-item,
.music-now-card{
box-sizing:border-box !important;
width:var(--track-row-width) !important;
height:var(--track-row-height) !important;
min-height:var(--track-row-height) !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
margin:0 !important;
padding:6px 13px 6px 8px !important;
border-radius:20px !important;
border:1px solid rgba(31,82,65,.10) !important;
background:linear-gradient(180deg,#2c6a55,#235848) !important;
color:#fff7dc !important;
box-shadow:0 8px 16px rgba(28,72,58,.14), inset 0 1px 0 rgba(255,255,255,.08) !important;
overflow:hidden !important;
position:relative !important;
text-align:left !important;
cursor:pointer !important;
isolation:isolate;
}
.music-track-item::before{ z-index:-1 !important; }
.music-track-item.is-moving-track{ pointer-events:none !important; }
.music-track-item.is-active,
.music-track-item.is-playing-row,
.music-track-item.is-cueing{
background:linear-gradient(180deg,#2c6a55,#235848) !important;
color:#fff7dc !important;
}
.music-track-no{
box-sizing:border-box !important;
width:34px !important;
height:34px !important;
min-width:34px !important;
flex:0 0 34px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:50% !important;
color:#133a30 !important;
background:linear-gradient(180deg,#efd37c,#d8ad54) !important;
font-weight:800 !important;
font-size:12px !important;
letter-spacing:.05em !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.38), 0 3px 8px rgba(0,0,0,.12) !important;
position:relative !important;
z-index:1 !important;
}
.music-track-copy{
min-width:0 !important;
flex:1 1 auto !important;
position:relative !important;
z-index:1 !important;
display:block !important;
}
.music-track-copy strong,
.lamb-player-single-track .music-title,
.lamb-record-player-v2 .music-title{
display:block !important;
margin:0 !important;
font-size:13px !important;
line-height:1.12 !important;
color:#fff8e1 !important;
font-weight:800 !important;
letter-spacing:.02em !important;
text-shadow:0 1px 0 rgba(0,0,0,.10) !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.music-track-copy em,
.lamb-player-single-track .music-track-meta,
.lamb-record-player-v2 .music-track-meta{
display:block !important;
margin-top:3px !important;
font-size:8px !important;
line-height:1 !important;
color:rgba(255,244,214,.72) !important;
letter-spacing:.06em !important;
font-weight:700 !important;
font-style:normal !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* 進度列：刪除時間文字，整排稍微往左收，音量在右側且不出界 */
.lamb-player-single-track .music-progress-wrap,
.lamb-record-player-v2 .music-progress-wrap{
position:absolute !important;
left:-18px !important;
right:24px !important;
bottom:0 !important;
height:24px !important;
display:grid !important;
grid-template-columns:minmax(125px,1fr) 27px !important;
align-items:center !important;
gap:9px !important;
margin:0 !important;
padding:0 !important;
}
.lamb-player-single-track #musicCurrent,
.lamb-record-player-v2 #musicCurrent,
.lamb-player-single-track .music-duration-hidden,
.lamb-player-single-track #musicDuration,
.lamb-record-player-v2 .music-duration-hidden,
.lamb-record-player-v2 #musicDuration{
display:none !important;
}
.lamb-player-single-track #musicProgress,
.lamb-record-player-v2 #musicProgress{
grid-column:1 !important;
width:100% !important;
min-width:125px !important;
margin:0 !important;
}
.lamb-player-single-track .music-volume-corner,
.lamb-record-player-v2 .music-volume-corner{
position:static !important;
grid-column:2 !important;
box-sizing:border-box !important;
width:27px !important;
height:27px !important;
min-width:27px !important;
max-width:27px !important;
min-height:27px !important;
max-height:27px !important;
aspect-ratio:1 / 1 !important;
margin:0 !important;
padding:0 !important;
border-radius:9px !important;
background:rgba(230,235,218,.86) !important;
border:1px solid rgba(37,81,65,.12) !important;
box-shadow:0 6px 12px rgba(42,61,48,.11) !important;
color:#174d3f !important;
}
/* 歌單：固定於播放器上方，不疊播放器主體；高度由 JS 控制，上緣伸縮、下緣穩定 */
.lamb-player-single-track .music-playlist-popover,
.lamb-record-player-v2 .music-playlist-popover{
position:fixed !important;
right:auto !important;
bottom:auto !important;
width:242px !important;
max-width:calc(100vw - 24px) !important;
padding:10px !important;
border-radius:18px !important;
transform-origin:bottom center !important;
z-index:70 !important;
overflow:hidden !important;
transition:top .85s cubic-bezier(.2,.82,.22,1), height .85s cubic-bezier(.2,.82,.22,1), opacity .28s ease, transform .28s ease !important;
}
.lamb-player-single-track .music-playlist-list,
.lamb-record-player-v2 .music-playlist-list{
display:flex !important;
flex-direction:column !important;
gap:8px !important;
align-items:flex-start !important;
}
.lamb-player-single-track .music-playlist-head,
.lamb-record-player-v2 .music-playlist-head{
padding:0 4px 8px !important;
}
.lamb-player-single-track .music-playlist-head span,
.lamb-record-player-v2 .music-playlist-head span{
font-size:12px !important;
}
/* 保留已確認速度 */
.music-playlist-popover.is-auto-intro{
animation:lambPlaylistSlideUp 1.2s cubic-bezier(.2,.85,.25,1) both !important;
}
.music-track-item.is-cueing::before,
.music-track-item.is-playing-row::before{
animation:lambRecordLoad 3s cubic-bezier(.18,.8,.25,1) both !important;
}
.music-track-item.is-cueing .music-track-copy strong,
.music-track-item.is-playing-row .music-track-copy strong,
.music-track-item.is-cueing .music-track-copy em,
.music-track-item.is-playing-row .music-track-copy em{
animation:lambRecordTextFlip 3s ease both !important;
}
.music-track-item.is-cueing .music-track-no,
.music-track-item.is-playing-row .music-track-no{
animation:lambRecordNoFlip 3s ease both !important;
}
html.theme-dark .music-track-item.is-cueing .music-track-copy strong,
html.theme-dark .music-track-item.is-playing-row .music-track-copy strong,
html.theme-dark .music-track-item.is-cueing .music-track-copy em,
html.theme-dark .music-track-item.is-playing-row .music-track-copy em{
animation:lambRecordTextFlipDark 3s ease both !important;
}
/* 夜間模式 */
html.theme-dark .lamb-player-single-track,
html.theme-dark .lamb-record-player-v2{
background:linear-gradient(180deg,rgba(15,41,34,.96),rgba(10,28,23,.98)) !important;
border-color:rgba(223,191,118,.38) !important;
}
html.theme-dark .music-track-item,
html.theme-dark .music-now-card{
background:linear-gradient(180deg,#2d6b55,#1f5141) !important;
}
html.theme-dark .lamb-player-single-track .music-volume-corner,
html.theme-dark .lamb-record-player-v2 .music-volume-corner{
background:rgba(232,222,194,.16) !important;
color:#f4df9e !important;
border-color:rgba(223,191,118,.25) !important;
}
/* 中小尺寸：完整留在可視區內 */
@media (max-width: 640px){
.lamb-player-single-track,
.lamb-record-player-v2{
--track-row-width: 190px;
--track-row-height: 44px;
right:44px !important;
bottom:18px !important;
width:calc(100vw - 76px) !important;
height:78px !important;
min-height:78px !important;
max-height:78px !important;
padding:25px 36px 9px 82px !important;
}
.lamb-player-single-track .music-disc,
.lamb-record-player-v2 .music-disc{
left:-18px !important;
top:10px !important;
width:58px !important;
height:58px !important;
min-width:58px !important;
min-height:58px !important;
}
.lamb-player-single-track .music-side-controls,
.lamb-record-player-v2 .music-side-controls{
left:40px !important;
top:14px !important;
width:25px !important;
height:52px !important;
}
.lamb-player-single-track .music-side-btn,
.lamb-player-single-track .music-toggle-icon,
.lamb-player-single-track .music-playlist-toggle,
.lamb-record-player-v2 .music-side-btn,
.lamb-record-player-v2 .music-toggle-icon,
.lamb-record-player-v2 .music-playlist-toggle{
width:24px !important;
height:24px !important;
min-width:24px !important;
max-width:24px !important;
min-height:24px !important;
max-height:24px !important;
flex-basis:24px !important;
}
.music-now-slot{
left:auto !important;
right:-3px !important;
top:-36px !important;
}
.music-track-item,
.music-now-card{
gap:8px !important;
border-radius:18px !important;
padding:5px 10px 5px 7px !important;
}
.music-track-no{
width:31px !important;
height:31px !important;
min-width:31px !important;
flex-basis:31px !important;
font-size:11px !important;
}
.music-track-copy strong,
.lamb-player-single-track .music-title,
.lamb-record-player-v2 .music-title{
font-size:12px !important;
}
.music-track-copy em,
.lamb-player-single-track .music-track-meta,
.lamb-record-player-v2 .music-track-meta{
font-size:7px !important;
}
.lamb-player-single-track .music-progress-wrap,
.lamb-record-player-v2 .music-progress-wrap{
left:-12px !important;
right:20px !important;
grid-template-columns:minmax(92px,1fr) 24px !important;
gap:7px !important;
}
.lamb-player-single-track #musicProgress,
.lamb-record-player-v2 #musicProgress{
min-width:92px !important;
}
.lamb-player-single-track .music-volume-corner,
.lamb-record-player-v2 .music-volume-corner{
width:24px !important;
height:24px !important;
min-width:24px !important;
max-width:24px !important;
min-height:24px !important;
max-height:24px !important;
}
.lamb-player-single-track .music-playlist-popover,
.lamb-record-player-v2 .music-playlist-popover{
width:214px !important;
}
}
@media (max-width: 420px){
.lamb-player-single-track,
.lamb-record-player-v2{
--track-row-width: 170px;
right:30px !important;
bottom:12px !important;
width:calc(100vw - 52px) !important;
padding-left:70px !important;
padding-right:30px !important;
}
.lamb-player-single-track .music-disc,
.lamb-record-player-v2 .music-disc{
left:-14px !important;
top:13px !important;
width:50px !important;
height:50px !important;
min-width:50px !important;
min-height:50px !important;
}
.lamb-player-single-track .music-side-controls,
.lamb-record-player-v2 .music-side-controls{
left:30px !important;
}
.music-now-slot{
right:-2px !important;
}
.lamb-player-single-track .music-playlist-popover,
.lamb-record-player-v2 .music-playlist-popover{
width:194px !important;
}
}
/* ============================================================
Lamb Cafe BGM Player — safe repair module V2
2026-06-13
修復目標：替換上一版播放器修復規則；不再繼續堆疊 patch。
============================================================ */
@keyframes lambRecordSpinSafe {
from { rotate: 0deg; }
to { rotate: 360deg; }
}
@keyframes spin {
from { rotate: 0deg; }
to { rotate: 360deg; }
}
#musicPlayer .music-disc{ rotate:0deg; }
#musicPlayer.is-playing .music-disc{
animation:lambRecordSpinSafe 7.2s linear infinite !important;
animation-play-state:running !important;
}
#musicPlayer:not(.is-playing) .music-disc{ animation-play-state:paused !important; }
/* 曲目條與左側按鈕層級：依使用者最新要求
- 曲目條再往右，右邊界可超出播放器主體
- 左側曲目表按鈕完整露出，不與綠色曲目條或黃色編號重疊
*/
#musicPlayer .music-now-slot{
left:auto !important;
right:-74px !important;
top:-42px !important;
z-index:6 !important;
}
#musicPlayer .music-now-card{ cursor:pointer !important; }
/* 左側清單/播放按鈕應顯示在曲目條上方，避免被綠色曲目條或黃色編號遮住 */
#musicPlayer .music-side-controls{
z-index:16 !important;
}
#musicPlayer .music-playlist-toggle,
#musicPlayer .music-toggle-icon{
position:relative !important;
z-index:17 !important;
}
#musicPlayer .music-progress-wrap{
left:-18px !important;
right:24px !important;
grid-template-columns:minmax(125px,1fr) 27px !important;
gap:9px !important;
}
#musicPlayer #musicCurrent,
#musicPlayer #musicDuration,
#musicPlayer .music-duration-hidden{ display:none !important; }
#musicPlayer #musicProgress{
grid-column:1 !important;
min-width:125px !important;
}
#musicPlayer .music-volume-corner{
position:static !important;
grid-column:2 !important;
z-index:8 !important;
}
#musicPlayer .music-playlist-popover,
.music-playlist-popover{
position:fixed !important;
right:auto !important;
bottom:auto !important;
width:242px !important;
max-width:calc(100vw - 24px) !important;
padding:10px 10px 18px !important;
border-radius:18px !important;
transform-origin:bottom center !important;
z-index:70 !important;
overflow:hidden !important;
transition:
top .76s cubic-bezier(.18,.86,.22,1),
height .76s cubic-bezier(.18,.86,.22,1),
opacity .24s ease,
transform .24s ease !important;
}
.music-playlist-popover.is-moving-current{ overflow:visible !important; }
.music-playlist-popover:not(.is-open){ pointer-events:none !important; }
.music-playlist-popover.is-open{ pointer-events:auto !important; }
.music-playlist-popover.is-closing{ pointer-events:none !important; }
.music-playlist-popover.is-closing .music-playlist-head,
.music-playlist-popover.is-closing .music-playlist-list{
opacity:0 !important;
transition:opacity .16s ease !important;
}
.music-playlist-popover .music-playlist-list{
display:flex !important;
flex-direction:column !important;
gap:8px !important;
align-items:flex-start !important;
}
.music-playlist-popover .music-playlist-head{ padding:0 4px 8px !important; }
.music-playlist-popover .music-playlist-head span{ font-size:12px !important; }
#musicPlayer,
.music-playlist-popover{
--track-row-width:215px;
--track-row-height:54px;
}
#musicPlayer .music-track-item,
#musicPlayer .music-now-card,
.music-playlist-popover .music-track-item,
.music-playlist-popover .music-now-card{
width:var(--track-row-width) !important;
height:var(--track-row-height) !important;
min-height:var(--track-row-height) !important;
box-sizing:border-box !important;
}
#musicPlayer .music-track-item.is-moving-track,
.music-playlist-popover .music-track-item.is-moving-track{
width:var(--track-row-width) !important;
height:var(--track-row-height) !important;
min-height:var(--track-row-height) !important;
will-change:transform;
pointer-events:none !important;
}
/* 曲目條文字：隨高度增加同步放大 */
#musicPlayer .music-track-no,
.music-playlist-popover .music-track-no{
width:37px !important;
height:37px !important;
min-width:37px !important;
flex-basis:37px !important;
font-size:13px !important;
}
#musicPlayer .music-track-copy strong,
.music-playlist-popover .music-track-copy strong{
font-size:14.5px !important;
line-height:1.12 !important;
}
#musicPlayer .music-track-copy em,
.music-playlist-popover .music-track-copy em{
font-size:9.5px !important;
line-height:1.05 !important;
margin-top:4px !important;
}
#musicPlayer .music-track-item,
#musicPlayer .music-now-card,
.music-playlist-popover .music-track-item,
.music-playlist-popover .music-now-card{
padding-top:7px !important;
padding-bottom:7px !important;
}
/* 音量面板：回到播放器內部 absolute 定位，不再使用 fixed + JS 座標 */
#musicPlayer .music-volume-popover,
.music-volume-popover{
position:absolute !important;
right:-8px !important;
bottom:30px !important;
left:auto !important;
top:auto !important;
width:126px !important;
height:auto !important;
padding:7px 9px !important;
border-radius:14px !important;
background:rgba(255,252,245,.98) !important;
border:1px solid rgba(179,138,73,.42) !important;
box-shadow:0 14px 30px rgba(83,59,29,.20) !important;
opacity:0 !important;
visibility:hidden !important;
transform:translateY(5px) !important;
transition:opacity .22s ease, transform .22s ease, visibility .22s ease !important;
z-index:120 !important;
pointer-events:none !important;
}
#musicPlayer .music-volume-popover.is-open,
.music-volume-popover.is-open{
opacity:1 !important;
visibility:visible !important;
transform:translateY(0) !important;
pointer-events:auto !important;
}
@media (max-width: 560px){
#musicPlayer.lamb-player-single-track,
#musicPlayer.lamb-record-player-v2{
right:24px !important;
bottom:16px !important;
width:445px !important;
height:83px !important;
min-height:83px !important;
max-height:83px !important;
padding:27px 46px 10px 104px !important;
transform:scale(.86) !important;
transform-origin:bottom right !important;
}
.music-playlist-popover{ width:242px !important; }
}
@media (max-width: 430px){
#musicPlayer.lamb-player-single-track,
#musicPlayer.lamb-record-player-v2{
right:18px !important;
bottom:12px !important;
width:445px !important;
height:83px !important;
min-height:83px !important;
max-height:83px !important;
padding:27px 46px 10px 104px !important;
transform:scale(.74) !important;
transform-origin:bottom right !important;
}
}
/* 日間模式：曲目條偽讀取改為深綠明暗變化，避免亮色遮住文字；夜間模式維持原本效果 */
html:not(.theme-dark) #musicPlayer .music-track-item::before,
html:not(.theme-dark) .music-playlist-popover .music-track-item::before{
z-index:0 !important;
background:linear-gradient(90deg,
rgba(13,58,45,.18) 0%,
rgba(9,45,36,.72) 42%,
rgba(20,84,64,.50) 62%,
rgba(35,104,80,.14) 100%) !important;
opacity:0 !important;
mix-blend-mode:multiply !important;
}
html:not(.theme-dark) #musicPlayer .music-track-item.is-cueing::before,
html:not(.theme-dark) #musicPlayer .music-track-item.is-playing-row::before,
html:not(.theme-dark) .music-playlist-popover .music-track-item.is-cueing::before,
html:not(.theme-dark) .music-playlist-popover .music-track-item.is-playing-row::before{
opacity:1 !important;
animation:lambRecordLoad 1.65s cubic-bezier(.18,.8,.25,1) both !important;
}
html:not(.theme-dark) #musicPlayer .music-track-copy,
html:not(.theme-dark) .music-playlist-popover .music-track-copy,
html:not(.theme-dark) #musicPlayer .music-track-no,
html:not(.theme-dark) .music-playlist-popover .music-track-no{
position:relative !important;
z-index:1 !important;
}
/* 夜間模式：播放器內層不可有半透明遮罩，只保留外框與音量面板背景 */
html.theme-dark #musicPlayer .music-body{
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
html.theme-dark .music-volume-popover{
background:rgba(16,43,35,.96) !important;
color:#f4df9e !important;
border-color:rgba(223,191,118,.28) !important;
}
/* ============================================================
2026-06-13 final player polish update
- lighter day-mode track bars
- record art replaced with user-provided FF14 disc images
- volume popover moved closer to volume button
- dark-mode gallery lightbox category text set to green
============================================================ */
/* user-provided disc art per track */
.lamb-player-single-track[data-track="1"] .music-disc,
.lamb-record-player-v2[data-track="1"] .music-disc,
#musicPlayer[data-track="1"] .music-disc{background-image:url('assets/records/record-01.webp') !important;}
.lamb-player-single-track[data-track="2"] .music-disc,
.lamb-record-player-v2[data-track="2"] .music-disc,
#musicPlayer[data-track="2"] .music-disc{background-image:url('assets/records/record-02.webp') !important;}
.lamb-player-single-track[data-track="3"] .music-disc,
.lamb-record-player-v2[data-track="3"] .music-disc,
#musicPlayer[data-track="3"] .music-disc{background-image:url('assets/records/record-03.webp') !important;}
.lamb-player-single-track[data-track="4"] .music-disc,
.lamb-record-player-v2[data-track="4"] .music-disc,
#musicPlayer[data-track="4"] .music-disc{background-image:url('assets/records/record-04.webp') !important;}
/* move volume slider popover closer to the volume button */
#musicPlayer .music-volume-popover,
.music-volume-popover{
right:-18px !important;
bottom:22px !important;
}
/* day mode: lighten the base green so text remains readable during cue animation */
html:not(.theme-dark) #musicPlayer .music-track-item,
html:not(.theme-dark) #musicPlayer .music-now-card,
html:not(.theme-dark) .music-playlist-popover .music-track-item{
background:linear-gradient(180deg,#45856f,#347360) !important;
color:#fff7df !important;
border-color:rgba(31,82,65,.12) !important;
}
html:not(.theme-dark) #musicPlayer .music-track-item.is-active,
html:not(.theme-dark) #musicPlayer .music-track-item.is-playing-row,
html:not(.theme-dark) #musicPlayer .music-track-item.is-cueing,
html:not(.theme-dark) #musicPlayer .music-now-card.is-active,
html:not(.theme-dark) #musicPlayer .music-now-card.is-playing-row,
html:not(.theme-dark) #musicPlayer .music-now-card.is-cueing,
html:not(.theme-dark) .music-playlist-popover .music-track-item.is-active,
html:not(.theme-dark) .music-playlist-popover .music-track-item.is-playing-row,
html:not(.theme-dark) .music-playlist-popover .music-track-item.is-cueing{
background:linear-gradient(180deg,#45856f,#347360) !important;
}
html:not(.theme-dark) #musicPlayer .music-track-item::before,
html:not(.theme-dark) .music-playlist-popover .music-track-item::before{
z-index:0 !important;
background:linear-gradient(90deg,
rgba(16,60,48,.10) 0%,
rgba(14,56,45,.28) 32%,
rgba(21,95,73,.48) 62%,
rgba(39,121,95,.16) 100%) !important;
opacity:0 !important;
mix-blend-mode:multiply !important;
}
html:not(.theme-dark) #musicPlayer .music-track-copy,
html:not(.theme-dark) .music-playlist-popover .music-track-copy,
html:not(.theme-dark) #musicPlayer .music-track-no,
html:not(.theme-dark) .music-playlist-popover .music-track-no{
position:relative !important;
z-index:1 !important;
}
/* dark-mode gallery lightbox category label text should stay green like day mode */
html.theme-dark .gallery-story-label,
html.theme-dark .gallery-story-copy .gallery-story-label,
html.theme-dark .gallery-story-copy span.gallery-story-label,
html.theme-dark .gallery-story-lightbox .gallery-story-label,
html.theme-dark .gallery-story-lightbox span.gallery-story-label{
color:#255b49 !important;
}
/* ============================================================
2026-06-13 record image true replacement
使用者提供的四張唱盤圖必須直接作為唱盤本體，不再被舊扇形/刻紋偽元素切割。
============================================================ */
#musicPlayer .music-disc,
.lamb-player-single-track .music-disc,
.lamb-record-player-v2 .music-disc{
background-color:transparent !important;
background-position:center center !important;
background-repeat:no-repeat !important;
background-size:100% 100% !important;
}
#musicPlayer .music-disc::before,
#musicPlayer .music-disc::after,
.lamb-player-single-track .music-disc::before,
.lamb-player-single-track .music-disc::after,
.lamb-record-player-v2 .music-disc::before,
.lamb-record-player-v2 .music-disc::after{
content:none !important;
display:none !important;
opacity:0 !important;
background:none !important;
}
#musicPlayer[data-track="1"] .music-disc,
.lamb-player-single-track[data-track="1"] .music-disc,
.lamb-record-player-v2[data-track="1"] .music-disc{background-image:url('assets/records/record-01.webp') !important;}
#musicPlayer[data-track="2"] .music-disc,
.lamb-player-single-track[data-track="2"] .music-disc,
.lamb-record-player-v2[data-track="2"] .music-disc{background-image:url('assets/records/record-02.webp') !important;}
#musicPlayer[data-track="3"] .music-disc,
.lamb-player-single-track[data-track="3"] .music-disc,
.lamb-record-player-v2[data-track="3"] .music-disc{background-image:url('assets/records/record-03.webp') !important;}
#musicPlayer[data-track="4"] .music-disc,
.lamb-player-single-track[data-track="4"] .music-disc,
.lamb-record-player-v2[data-track="4"] .music-disc{background-image:url('assets/records/record-04.webp') !important;}
/* ============================================================
2026-06-14 BGM disc image root fix
根源修正：.music-disc 外層只負責尺寸、裁切、外框與旋轉，不再直接顯示唱盤圖片。
真正唱盤圖只由 .music-disc-current / .music-disc-ghost 兩個 div 圖層控制。
============================================================ */
/* 外層禁止再用 data-track background-image 硬切唱盤圖 */
#musicPlayer .music-disc,
.lamb-player-single-track .music-disc,
.lamb-record-player-v2 .music-disc,
#musicPlayer[data-track="1"] .music-disc,
#musicPlayer[data-track="2"] .music-disc,
#musicPlayer[data-track="3"] .music-disc,
#musicPlayer[data-track="4"] .music-disc,
.lamb-player-single-track[data-track="1"] .music-disc,
.lamb-player-single-track[data-track="2"] .music-disc,
.lamb-player-single-track[data-track="3"] .music-disc,
.lamb-player-single-track[data-track="4"] .music-disc,
.lamb-record-player-v2[data-track="1"] .music-disc,
.lamb-record-player-v2[data-track="2"] .music-disc,
.lamb-record-player-v2[data-track="3"] .music-disc,
.lamb-record-player-v2[data-track="4"] .music-disc{
background-image:none !important;
background-color:transparent !important;
background:none !important;
}
/* 保持舊扇形、舊刻紋、舊高光關閉，避免切碎新唱盤 */
#musicPlayer .music-disc::before,
#musicPlayer .music-disc::after,
.lamb-player-single-track .music-disc::before,
.lamb-player-single-track .music-disc::after,
.lamb-record-player-v2 .music-disc::before,
.lamb-record-player-v2 .music-disc::after{
content:none !important;
display:none !important;
opacity:0 !important;
background:none !important;
}
/* 真正顯示唱盤圖片的雙圖層 */
#musicPlayer .music-disc > .music-disc-layer,
.lamb-player-single-track .music-disc > .music-disc-layer,
.lamb-record-player-v2 .music-disc > .music-disc-layer{
display:block !important;
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
border-radius:50% !important;
background-position:center center !important;
background-repeat:no-repeat !important;
background-size:100% 100% !important;
pointer-events:none !important;
transform:none !important;
opacity:1;
}
#musicPlayer .music-disc > .music-disc-current,
.lamb-player-single-track .music-disc > .music-disc-current,
.lamb-record-player-v2 .music-disc > .music-disc-current{
z-index:1 !important;
}
#musicPlayer .music-disc > .music-disc-ghost,
.lamb-player-single-track .music-disc > .music-disc-ghost,
.lamb-record-player-v2 .music-disc > .music-disc-ghost{
z-index:2 !important;
opacity:0;
will-change:opacity;
}
#musicPlayer .music-disc.is-disc-crossfading > .music-disc-ghost,
.lamb-player-single-track .music-disc.is-disc-crossfading > .music-disc-ghost,
.lamb-record-player-v2 .music-disc.is-disc-crossfading > .music-disc-ghost{
display:block !important;
}
@media (prefers-reduced-motion: reduce){
#musicPlayer .music-disc > .music-disc-ghost,
.lamb-player-single-track .music-disc > .music-disc-ghost,
.lamb-record-player-v2 .music-disc > .music-disc-ghost{
transition:none !important;
}
}
/* ============================================================
2026-06-14 Staff image head-focus safeguard
圖片優化後仍維持人物縮圖以頭部/上半身為主，不改變卡片尺寸與展開動畫。
============================================================ */
.staff-card img,
.staff-card .portrait img,
.portrait img{
object-position:center top !important;
}
.photo-strip img,
.photo-strip .thumb img,
.staff-card .photo-strip img{
object-position:center top !important;
}