/* * The store-facing landing page. * * Same clothes as the website — Lora on aged paper, small caps, ink that * inverts to bone on black — but written out flat and self-contained, because * these two pages are served by Firebase Hosting with no build step behind * them and have to render before the full site exists. */ @font-face { font-family: 'Lora'; src: url('fonts/Lora-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Lora'; src: url('fonts/Lora-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Lora'; src: url('fonts/Lora-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } :root { --paper: #efe9dd; --paper-deep: #e4dccc; --ink: #23201c; --ink-soft: #4d463d; --ink-faint: #857c6e; --rule: rgba(35, 32, 28, 0.16); --accent: #6b5535; --measure: 34rem; color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --paper: #131211; --paper-deep: #0c0b0a; --ink: #ece5d8; --ink-soft: #bdb4a4; --ink-faint: #7d7568; --rule: rgba(236, 229, 216, 0.14); --accent: #c8a86c; color-scheme: dark; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Lora', Georgia, 'Times New Roman', serif; font-size: 17px; line-height: 1.65; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 0.25em; } a:hover { text-decoration-color: var(--accent); } /* ── the language switch ───────────────────────────────────────── */ /* * Both languages are in the file and CSS hides one, so the page is correct * with JavaScript disabled and a crawler sees whichever says. The * script only moves the attribute; it never builds the page. */ /* Hide the language that is off, rather than showing the one that is on: a rule that had to switch an element back on would have to know whether it was a flex row or a block, and would get it wrong the first time either changed. */ html[lang='vi'] [data-lang='en'], html[lang='en'] [data-lang='vi'] { display: none; } .masthead { border-bottom: 1px solid var(--rule); padding: 1.1rem clamp(1rem, 5vw, 3rem); display: flex; align-items: baseline; gap: 1.5rem; } .wordmark { font-size: 1.05rem; letter-spacing: 0.34em; text-transform: uppercase; text-decoration: none; } .spacer { flex: 1 1 auto; } .langSwitch { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; } .langSwitch button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink-faint); background: none; border: 0; padding: 0; cursor: pointer; } .langSwitch button[aria-current='true'] { color: var(--ink); cursor: default; } .langSep { color: var(--ink-faint); opacity: 0.45; margin: 0 0.5rem; } main { padding: 0 0 clamp(2rem, 6vw, 4rem); } .wrap { max-width: 62rem; margin: 0 auto; padding: 0 clamp(1rem, 5vw, 3rem); } .prose { max-width: var(--measure); } .kicker { font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.5rem; } /* ── the hero ──────────────────────────────────────────────────── */ .hero { position: relative; border-bottom: 1px solid var(--rule); } .heroPlate { width: 100%; height: clamp(20rem, 62vh, 34rem); object-fit: cover; filter: saturate(0.85); } .heroCopy { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.4rem; padding: clamp(1.5rem, 5vw, 3.5rem); /* The plates are dark at the foot and bright in the middle, so the copy gets its own gradient rather than trusting the artwork to stay out of the way. */ background: linear-gradient(to top, rgba(8, 7, 6, 0.88) 0%, rgba(8, 7, 6, 0.45) 40%, transparent 75%); color: #ece5d8; } .heroCopy .kicker { color: rgba(236, 229, 216, 0.7); } .heroTitle { font-size: clamp(2.6rem, 9vw, 5rem); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; line-height: 1.05; } .heroLead { max-width: var(--measure); color: rgba(236, 229, 216, 0.86); margin: 0.6rem 0 0; } .ctaRow { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.4rem 0 0; } .cta { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.7rem 1.5rem; border: 1px solid currentColor; text-decoration: none; } .cta:hover { background: rgba(236, 229, 216, 0.12); } .ctaSoon { opacity: 0.55; border-style: dashed; cursor: default; } /* ── the numbers ───────────────────────────────────────────────── */ .facts { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 6vw, 4rem); padding: clamp(2rem, 5vw, 3rem) 0; border-bottom: 1px solid var(--rule); } .fact { min-width: 7rem; } .factN { font-size: 2rem; line-height: 1.1; display: block; } .factLabel { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); } /* ── the quote ─────────────────────────────────────────────────── */ .quote { padding: clamp(2.5rem, 8vw, 5rem) 0; text-align: center; } .quoteText { font-style: italic; font-size: clamp(1.2rem, 3.4vw, 1.8rem); line-height: 1.5; max-width: 30rem; margin: 0 auto; white-space: pre-line; } .quoteBy { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); margin-top: 1.4rem; } /* ── the rooms ─────────────────────────────────────────────────── */ .reel { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: clamp(1rem, 3vw, 2rem); padding-bottom: clamp(2rem, 6vw, 4rem); } .room figcaption { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.6rem; } .room img { aspect-ratio: 16 / 10; object-fit: cover; filter: saturate(0.85); } /* ── the privacy policy ────────────────────────────────────────── */ .pageTitle { font-size: clamp(1.9rem, 5vw, 2.9rem); font-weight: 400; letter-spacing: 0.06em; margin: clamp(2rem, 6vw, 3.5rem) 0 0.5rem; } .lead { color: var(--ink-soft); font-style: italic; margin: 0 0 2.6rem; max-width: var(--measure); } .legal { font-size: 0.96rem; padding-bottom: 3rem; } .legalSection { margin: 0 0 2.2rem; } .legalHeading { font-size: 0.78rem; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.6rem; } .legal p { margin: 0 0 0.9rem; } .legalList { margin: 0 0 0.9rem; padding-left: 1.2rem; } .legalList li { margin-bottom: 0.35rem; } /* ── footer ────────────────────────────────────────────────────── */ .foot { border-top: 1px solid var(--rule); padding: 1.6rem clamp(1rem, 5vw, 3rem); font-size: 0.74rem; color: var(--ink-faint); display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }