/* ============================================================ THE SECRET CAFE — Shared Stylesheet Used by: portfolio demo pages ============================================================ */ /* ============================================================ DESIGN TOKENS ============================================================ */ :root { --red: #8E2F2F; --red-dk: #642020; --red-dim: rgba(200, 32, 47, 0.15); --red-glow: rgba(200, 32, 47, 0.08); --amber: #D9A45F; --blk: #080808; --ch1: #111111; --ch2: #181818; --ch3: #202020; --ch4: #2c2c2c; --wh: #F5F0EB; --w80: rgba(245,240,235,0.80); --w60: rgba(245,240,235,0.60); --w40: rgba(245,240,235,0.40); --w20: rgba(245,240,235,0.20); --w10: rgba(245,240,235,0.10); --w06: rgba(245,240,235,0.06); --serif: 'Playfair Display', Georgia, serif; --cn-serif: 'Noto Serif SC', 'SimSun', serif; --cn-sans: 'Noto Sans SC', 'Microsoft YaHei', sans-serif; --sans: 'Inter', system-ui, sans-serif; --ease: cubic-bezier(0.16, 1.00, 0.30, 1.00); --ease-std: cubic-bezier(0.25, 0.46, 0.45, 0.94); --nav-h: 68px; --maxw: 1200px; --r: 10px; --rlg: 18px; --rxl: 28px; } /* ============================================================ RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--blk); color: var(--wh); font-family: var(--sans); font-weight: 300; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { border: none; background: none; cursor: pointer; font-family: inherit; color: inherit; } /* ============================================================ CHINESE TYPOGRAPHY OVERRIDES Active when ============================================================ */ html.zh body { font-family: var(--cn-sans); } html.zh .sec-title, html.zh .sig-name, html.zh .mc-name, html.zh .br-name, html.zh .visit-title, html.zh .atm-quote, html.zh .story-quote { font-family: var(--cn-serif); letter-spacing: 0.03em; } html.zh .sec-body, html.zh .sig-desc, html.zh .mc-desc, html.zh .br-addr, html.zh .v-cnt, html.zh .story-cn { font-family: var(--cn-sans); line-height: 1.88; letter-spacing: 0.02em; } html.zh .sec-lbl, html.zh .sec-title { letter-spacing: 0.04em; } html.zh .h-sub { letter-spacing: 0.28em; } html.zh .h-cn { letter-spacing: 0.3em; font-size: 12px; } /* ============================================================ FILM GRAIN OVERLAY ============================================================ */ body::before { content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: 0.028; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 180px 180px; } /* ============================================================ LANGUAGE FLASH TRANSITION OVERLAY ============================================================ */ #lflash { position: fixed; inset: 0; z-index: 994; pointer-events: none; background: rgba(8,8,8,0.55); opacity: 0; transition: opacity 0.13s; } /* ============================================================ SCROLL PROGRESS ============================================================ */ #sp { position: fixed; top: 0; left: 0; z-index: 1001; height: 2px; width: 0%; background: var(--red); transition: width 0.08s linear; } /* ============================================================ LANGUAGE TOGGLE ============================================================ */ .lang-sw { display: flex; align-items: center; border: 1px solid var(--w10); border-radius: 100px; overflow: hidden; flex-shrink: 0; } .ls-btn { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; padding: 5px 11px; color: var(--w40); transition: background 0.25s, color 0.25s; font-family: var(--sans) !important; } .ls-btn.active { background: var(--red); color: var(--wh); } .ls-btn:not(.active):hover { color: var(--w80); } .ls-div { width: 1px; height: 12px; background: var(--w10); flex-shrink: 0; } /* Larger toggle in drawer */ .d-lang { margin-bottom: 32px; } .d-lang-label { font-size: 9px; font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; display: block; } .d-lang .lang-sw { border-color: var(--w20); } .d-lang .ls-btn { font-size: 12px; padding: 8px 20px; letter-spacing: 0.1em; } .d-lang .ls-div { height: 16px; } /* ============================================================ NAVIGATION ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; transition: background 0.5s var(--ease-std), border-color 0.5s var(--ease-std); border-bottom: 1px solid transparent; } .nav.on { background: rgba(8,8,8,0.93); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border-bottom-color: var(--w06); } .nav-logo { display: flex; align-items: center; gap: 11px; } .nav-logo img { height: 38px; width: auto; object-fit: contain; } .nav-logo-text { display: flex; flex-direction: column; } .nav-logo-name { font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.1; color: var(--wh); } .nav-logo-cn { font-family: var(--cn-serif); font-size: 11px; font-weight: 400; letter-spacing: 0.22em; color: var(--red); margin-top: 2px; } .nav-right { display: flex; align-items: center; gap: 16px; } .nav-links { display: none; gap: 24px; align-items: center; } @media (min-width: 768px) { .nav-links { display: flex; } } .nl { font-size: 11px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--w60); transition: color 0.25s; position: relative; } .nl::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: var(--red); transition: width 0.3s var(--ease-std); } .nl:hover { color: var(--wh); } .nl:hover::after { width: 100%; } .nav-pill { display: none; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: var(--red); border: 1px solid rgba(200,32,47,0.4); padding: 6px 13px; border-radius: 100px; transition: all 0.25s; } @media (min-width: 768px) { .nav-pill { display: inline-flex; } } .nav-pill:hover { background: var(--red-dim); border-color: var(--red); } .ham { width: 38px; height: 38px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px; } .ham span { display: block; height: 1.5px; background: var(--wh); transition: all 0.35s var(--ease-std); } .ham span:nth-child(1) { width: 24px; } .ham span:nth-child(2) { width: 15px; } .ham span:nth-child(3) { width: 24px; } .ham.open span:nth-child(1) { width: 24px; transform: translateY(6.5px) rotate(45deg); } .ham.open span:nth-child(2) { opacity: 0; transform: translateX(-10px); } .ham.open span:nth-child(3) { width: 24px; transform: translateY(-6.5px) rotate(-45deg); } /* ============================================================ MOBILE DRAWER ============================================================ */ .drawer { position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; z-index: 99; background: rgba(8,8,8,0.98); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); display: flex; flex-direction: column; padding: 40px 32px 40px; transform: translateX(100%); transition: transform 0.55s var(--ease); overflow-y: auto; } .drawer.open { transform: translateX(0); } .d-lbl { font-size: 9px; font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; color: var(--red); margin-bottom: 16px; } .d-links { display: flex; flex-direction: column; gap: 0; margin-bottom: 40px; } .d-link { font-family: var(--serif); font-size: 28px; font-weight: 500; color: var(--w80); padding: 10px 0; border-bottom: 1px solid var(--w06); display: flex; align-items: center; justify-content: space-between; transition: color 0.22s, padding-left 0.22s; letter-spacing: -0.01em; } html.zh .d-link { font-family: var(--cn-serif); font-size: 24px; } .d-arr { font-size: 14px; opacity: 0.3; font-family: var(--sans); font-weight: 400; } .d-link:hover { color: var(--red); padding-left: 6px; } .d-branches { margin-top: auto; padding-top: 28px; } .d-blist { display: flex; flex-direction: column; gap: 10px; } .d-branch { background: var(--ch2); border: 1px solid var(--w06); border-radius: var(--r); padding: 13px 16px; display: flex; align-items: center; gap: 14px; transition: border-color 0.22s, background 0.22s; } .d-branch:hover { border-color: var(--red); background: var(--red-glow); } .d-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex-shrink: 0; } .d-bname { font-size: 13px; font-weight: 500; } .d-barea { font-size: 11px; color: var(--w40); margin-top: 1px; } /* ============================================================ SCENE 1 — HERO ============================================================ */ #hero { position: relative; min-height: 100dvh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } .h-bg { position: absolute; inset: 0; z-index: 0; } .h-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; transform: scale(1.07); transition: transform 10s ease-out; } .h-bg img.loaded { transform: scale(1); } .h-vig { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 65% 35%, transparent 15%, rgba(8,8,8,0.55) 70%); } .h-grad { position: absolute; inset: 0; z-index: 2; background: linear-gradient( to bottom, rgba(8,8,8,0.28) 0%, rgba(8,8,8,0.04) 20%, rgba(8,8,8,0.42) 55%, rgba(8,8,8,0.97) 100% ); } .h-body { position: relative; z-index: 3; padding: 0 28px 52px; max-width: 720px; } .h-eye { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; opacity: 0; transform: translateY(16px); animation: riseIn 0.7s 0.4s var(--ease) forwards; } .h-eye-line { width: 28px; height: 1px; background: var(--red); } .h-eye-txt { font-size: 10px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--red); transition: all 0.3s; } html.zh .h-eye-txt { letter-spacing: 0.18em; font-size: 11px; } .h-title { font-family: var(--serif); font-size: clamp(54px, 10.5vw, 100px); font-weight: 600; line-height: 0.90; letter-spacing: -0.03em; color: var(--wh); margin-bottom: 20px; opacity: 0; transform: translateY(26px); animation: riseIn 0.9s 0.6s var(--ease) forwards; } .h-title em { font-style: italic; color: var(--red); } .h-cn { font-family: var(--cn-serif); font-size: 13px; font-weight: 400; letter-spacing: 0.5em; color: var(--w40); display: block; margin-bottom: 13px; opacity: 0; transform: translateY(14px); animation: riseIn 0.7s 0.85s var(--ease) forwards; transition: all 0.4s; } .h-sub { font-size: 11px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--w60); opacity: 0; transform: translateY(12px); animation: riseIn 0.7s 1.0s var(--ease) forwards; transition: all 0.3s; } .h-scroll { position: absolute; right: 28px; bottom: 96px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; animation: fadeIn 0.8s 1.5s forwards; } .h-scroll-bar { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--w40), transparent); animation: scrollDrop 2.4s 1.7s infinite; } .h-scroll-lbl { font-size: 8px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--w40); writing-mode: vertical-rl; } .h-strip { position: relative; z-index: 3; display: flex; border-top: 1px solid var(--w10); opacity: 0; animation: fadeIn 0.7s 1.3s forwards; } .hs-item { flex: 1; padding: 14px 22px; border-right: 1px solid var(--w10); cursor: pointer; transition: background 0.25s; } .hs-item:last-child { border-right: none; } .hs-item:hover { background: var(--red-glow); } .hs-num { font-size: 9px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--red); margin-bottom: 3px; } .hs-name { font-size: 12px; font-weight: 500; color: var(--w80); } @media (max-width: 480px) { .h-strip { display: none; } .h-scroll { display: none; } .h-body { padding-bottom: 44px; } } /* ============================================================ SECTION UTILITIES ============================================================ */ .sec { padding: 84px 24px; } @media (min-width: 768px) { .sec { padding: 120px 48px; } } @media (min-width: 1200px) { .sec { padding: 140px 80px; } } .mw { max-width: var(--maxw); margin-left: auto; margin-right: auto; } .sec-lbl { display: flex; align-items: center; gap: 11px; font-size: 9px; font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; color: var(--red); margin-bottom: 16px; font-family: var(--sans) !important; } .sec-lbl::before { content: ''; width: 22px; height: 1px; background: var(--red); flex-shrink: 0; } .sec-title { font-family: var(--serif); font-size: clamp(28px, 4.5vw, 48px); font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; color: var(--wh); margin-bottom: 14px; } .sec-body { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--w60); max-width: 500px; } .bar { width: 40px; height: 2px; background: var(--red); margin: 20px 0; } /* Scroll reveal */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.72s var(--ease), transform 0.72s var(--ease); } .reveal.vis { opacity: 1; transform: none; } .d1 { transition-delay: 0.08s; } .d2 { transition-delay: 0.16s; } .d3 { transition-delay: 0.24s; } .d4 { transition-delay: 0.32s; } .d5 { transition-delay: 0.40s; } /* ============================================================ SCENE 2 — SIGNATURE DISHES ============================================================ */ #signature { background: var(--ch1); } .sig-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 52px; } @media (min-width: 640px) { .sig-grid { grid-template-columns: repeat(3, 1fr); } } .sig-card { position: relative; border-radius: var(--rlg); overflow: hidden; aspect-ratio: 3/4; cursor: pointer; } .sig-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.85s var(--ease); } .sig-card:hover img { transform: scale(1.06); } .sig-card-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.22) 55%, transparent 100%); } .sig-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; } .sig-tag { display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); border: 1px solid rgba(200,32,47,0.45); padding: 4px 10px; border-radius: 100px; margin-bottom: 10px; font-family: var(--sans) !important; } .sig-name { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--wh); line-height: 1.2; margin-bottom: 6px; } .sig-desc { font-size: 12px; color: var(--w60); line-height: 1.55; } /* ============================================================ SCENE 3 — ATMOSPHERE ============================================================ */ #atmosphere { position: relative; min-height: 62vh; display: flex; align-items: center; overflow: hidden; padding: 0; } .atm-bg { position: absolute; inset: 0; z-index: 0; } .atm-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .atm-ov { position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(8,8,8,0.93) 0%, rgba(8,8,8,0.65) 48%, rgba(8,8,8,0.28) 100%); } .atm-content { position: relative; z-index: 2; padding: 80px 28px; max-width: 600px; } @media (min-width: 768px) { .atm-content { padding: 120px 80px; } } .atm-quote { font-family: var(--serif); font-size: clamp(22px, 3.5vw, 36px); font-weight: 400; font-style: italic; line-height: 1.38; color: var(--wh); margin-bottom: 22px; } .atm-quote em { font-style: normal; color: var(--red); } .atm-stats { display: flex; gap: 44px; margin-top: 40px; } .st-num { font-family: var(--serif); font-size: 34px; font-weight: 600; color: var(--red); line-height: 1; } .st-lbl { font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--w40); margin-top: 5px; font-family: var(--sans) !important; } html.zh .st-lbl { font-family: var(--cn-sans) !important; letter-spacing: 0.06em; } /* ============================================================ SCENE 4 — FEATURED MEALS ============================================================ */ #meals { background: var(--ch2); } .meals-top { display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px; } @media (min-width: 768px) { .meals-top { flex-direction: row; align-items: flex-end; justify-content: space-between; } .meals-top .sec-body { max-width: 340px; margin-bottom: 4px; } } .tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 42px; } .tab { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--w40); padding: 7px 16px; border: 1px solid var(--w10); border-radius: 100px; cursor: pointer; transition: all 0.22s; font-family: var(--sans) !important; } .tab:hover { color: var(--w80); border-color: var(--w20); } .tab.on { background: var(--red); color: var(--wh); border-color: var(--red); font-weight: 600; } .meals-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 540px) { .meals-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .meals-grid { grid-template-columns: repeat(4, 1fr); } } .mc { background: var(--ch3); border: 1px solid var(--w06); border-radius: var(--rlg); overflow: hidden; transition: transform 0.35s var(--ease), border-color 0.25s, box-shadow 0.35s; } .mc:hover { transform: translateY(-5px); border-color: rgba(200,32,47,0.38); box-shadow: 0 20px 44px rgba(0,0,0,0.45); } .mc-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; } .mc-body { padding: 16px 18px; } .mc-cat { font-size: 9px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); margin-bottom: 7px; font-family: var(--sans) !important; } .mc-name { font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--wh); margin-bottom: 5px; line-height: 1.3; } .mc-desc { font-size: 12px; color: var(--w40); line-height: 1.55; } /* ============================================================ SCENE 5 — BRAND STORY ============================================================ */ #story { background: var(--blk); overflow: hidden; padding: 0; } .story-grid { display: grid; grid-template-columns: 1fr; min-height: 55vh; } @media (min-width: 768px) { .story-grid { grid-template-columns: 1fr 1fr; } } .story-txt { padding: 84px 28px; display: flex; flex-direction: column; justify-content: center; } @media (min-width: 768px) { .story-txt { padding: 100px 80px; } } .story-cn { font-family: var(--cn-serif); font-size: 14px; font-weight: 400; letter-spacing: 0.15em; color: var(--red); margin: 18px 0 20px; line-height: 1.9; } .story-quote { font-family: var(--serif); font-size: clamp(19px, 2.8vw, 28px); font-weight: 400; font-style: italic; color: var(--wh); line-height: 1.45; margin-bottom: 20px; } .story-img { position: relative; overflow: hidden; min-height: 360px; } .story-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.9s var(--ease); } .story-img:hover img { transform: scale(1.04); } .story-img-ov { position: absolute; inset: 0; background: linear-gradient(to right, rgba(8,8,8,0.38) 0%, transparent 55%); } /* ============================================================ SCENE 6 — BRANCHES ============================================================ */ #branches { background: var(--ch1); } .br-grid { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 52px; } @media (min-width: 768px) { .br-grid { grid-template-columns: repeat(3, 1fr); } } .br-card { border-radius: var(--rxl); overflow: hidden; border: 1px solid var(--w06); transition: transform 0.4s var(--ease), border-color 0.25s, box-shadow 0.4s; } .br-card:hover { transform: translateY(-8px); border-color: rgba(200,32,47,0.42); box-shadow: 0 28px 56px rgba(0,0,0,0.55); } .br-ph { position: relative; overflow: hidden; height: 210px; } .br-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.85s var(--ease); } .br-card:hover .br-ph img { transform: scale(1.06); } .br-body { background: var(--ch2); padding: 26px; } .br-num { font-size: 10px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; font-family: var(--sans) !important; } .br-name { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--wh); margin-bottom: 8px; } .br-addr { font-size: 13px; color: var(--w60); line-height: 1.58; margin-bottom: 14px; } .br-hrs { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--w40); margin-bottom: 20px; } .br-dot { width: 6px; height: 6px; border-radius: 50%; background: #4caf50; flex-shrink: 0; } .br-cta { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); transition: gap 0.25s; font-family: var(--sans) !important; } html.zh .br-cta { font-family: var(--cn-sans) !important; letter-spacing: 0.05em; } .br-cta:hover { gap: 13px; } /* ============================================================ SCENE 7 — GALLERY ============================================================ */ #gallery { background: var(--ch2); padding-bottom: 0; } .gal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-top: 48px; } @media (min-width: 640px) { .gal-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .gal-grid { grid-template-columns: repeat(4, 1fr); } } .gi { position: relative; overflow: hidden; aspect-ratio: 1; cursor: pointer; } .gi.w2 { grid-column: span 2; aspect-ratio: 2/1; } .gi img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); } .gi:hover img { transform: scale(1.09); } .gi-ov { position: absolute; inset: 0; background: rgba(8,8,8,0.52); opacity: 0; transition: opacity 0.28s; display: flex; align-items: center; justify-content: center; } .gi:hover .gi-ov { opacity: 1; } .gi-plus { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 300; color: var(--wh); } /* Lightbox */ #lb { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,0.96); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.3s; } #lb.open { opacity: 1; pointer-events: all; } #lb img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: var(--r); } #lb-x { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; background: var(--w10); display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--wh); cursor: pointer; transition: background 0.2s; } #lb-x:hover { background: var(--w20); } /* ============================================================ SCENE 8 — VISIT / CTA ============================================================ */ #visit { background: var(--blk); } .visit-top { text-align: center; margin-bottom: 72px; } .visit-title { font-family: var(--serif); font-size: clamp(28px, 4.5vw, 52px); font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; color: var(--wh); margin-bottom: 14px; } .visit-title em { font-style: italic; color: var(--red); } .cta-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--red); color: var(--wh); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 15px 34px; border-radius: 100px; margin-top: 28px; transition: all 0.28s var(--ease); font-family: var(--sans) !important; } html.zh .cta-btn { font-family: var(--cn-sans) !important; letter-spacing: 0.08em; } .cta-btn:hover { background: var(--red-dk); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(200,32,47,0.35); } .v-cols { display: grid; grid-template-columns: 1fr; gap: 36px; } @media (min-width: 768px) { .v-cols { grid-template-columns: repeat(3, 1fr); } } .v-col { border-top: 1px solid var(--w10); padding-top: 26px; } .v-lbl { font-size: 9px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; font-family: var(--sans) !important; } html.zh .v-lbl { font-family: var(--cn-sans) !important; letter-spacing: 0.08em; } .v-cnt { font-size: 14px; color: var(--w60); line-height: 1.78; } .v-cnt strong { color: var(--wh); font-weight: 500; } /* ============================================================ FOOTER ============================================================ */ footer { background: var(--ch1); border-top: 1px solid var(--w06); padding: 44px 24px; } .foot { max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; gap: 28px; } @media (min-width: 768px) { .foot { flex-direction: row; align-items: center; justify-content: space-between; } } .foot-logo { display: flex; align-items: center; gap: 10px; } .foot-logo img { height: 34px; width: auto; } .foot-brand { font-family: var(--serif); font-size: 14px; color: var(--w60); } .foot-nav { display: flex; flex-wrap: wrap; gap: 20px; } .foot-lnk { font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--w40); transition: color 0.22s; font-family: var(--sans) !important; } html.zh .foot-lnk { font-family: var(--cn-sans) !important; letter-spacing: 0.06em; } .foot-lnk:hover { color: var(--red); } .foot-copy { font-size: 11px; color: var(--w20); } /* ============================================================ POPUP — disabled by default, Supabase-ready ============================================================ */ #popup { position: fixed; inset: 0; z-index: 600; display: flex; align-items: flex-end; justify-content: center; padding: 24px; background: rgba(0,0,0,0.72); backdrop-filter: blur(8px); } #popup.off { display: none; } .pop-card { background: var(--ch2); border: 1px solid var(--w10); border-radius: var(--rxl); padding: 32px; max-width: 460px; width: 100%; position: relative; } .pop-x { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--w10); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--w60); cursor: pointer; transition: all 0.2s; } .pop-x:hover { background: var(--w20); color: var(--wh); } .pop-lbl { font-size: 9px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; } .pop-title { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--wh); margin-bottom: 8px; } .pop-desc { font-size: 14px; color: var(--w60); margin-bottom: 22px; } .pop-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: var(--wh); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 11px 26px; border-radius: 100px; transition: background 0.22s; } .pop-cta:hover { background: var(--red-dk); } /* ============================================================ KEYFRAMES ============================================================ */ @keyframes riseIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scrollDrop { 0% { transform: scaleY(0); transform-origin: top; opacity: 0; } 35% { transform: scaleY(1); transform-origin: top; opacity: 1; } 65% { transform: scaleY(1); transform-origin: bottom; opacity: 1; } 100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; } }