/* ========================================================================== Aura Vanz Design — site stylesheet Ported from the Claude Design project "Aura Vanz Design homepage directions" (604de9c0-698b-4054-b155-014f89b0b92d): Home, Background, Services and the eight Interior style pages. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* surfaces */ --cream: #F6F2EA; --cream-2: #EFE9DD; --panel: #FFFDF8; --media-bg: #e7e3da; --dark: #221E18; /* ink */ --ink: #221E18; --ink-strong: #3b352c; --ink-soft: #5c5346; --ink-mute: #6b6255; --ink-faint: #8a8073; --ink-faintest: #a49a89; /* accent */ --gold: #BF9403; --gold-dark: #a8820a; --gold-pale: #cbb98f; --navy: #00477D; /* rules */ --line: rgba(34, 30, 24, .10); --line-strong: rgba(34, 30, 24, .14); --line-hairline:rgba(34, 30, 24, .07); /* type Latin keeps the design's two faces — Cormorant Garamond for display, Jost for UI. Neither carries Chinese glyphs, so every Chinese character falls to --font-cjk instead: Noto Sans, in headings and body alike. Keep Noto *after* the Latin face in each stack or it will take over the Latin too. */ --font-cjk: 'Noto Sans TC'; /* Futura is not licensed as a web font here, so it renders only where the reader has it installed. Jost is the fallback — a Futura revival, already loaded. Append var(--font-cjk) after it wherever Chinese can appear. */ --font-futura: Futura, 'Futura PT', 'Jost'; --font-display: 'Cormorant Garamond', var(--font-cjk), serif; /* the design declares two Jost stacks: the root/body one, and a shorter one on every element that names the font explicitly. Both are kept. */ --font-ui: 'Jost', var(--font-cjk), system-ui, sans-serif; /* inherited */ --font-ui-ex: 'Jost', var(--font-cjk), sans-serif; /* explicit */ /* motion */ --ease: cubic-bezier(.16, 1, .3, 1); /* layout */ --gutter: clamp(20px, 6vw, 96px); /* nav is transparent over the hero and solid once scrolled */ --nav-fg: #fff; } /* Simplified Chinese wants the SC glyph forms. aura.js stamps data-lang on , so the whole page — headings included — re-resolves --font-cjk when the language switches. */ :root[data-lang="sc"] { --font-cjk: 'Noto Sans SC'; } /* RedNote's wordmark is Simplified (小红书), so it is pinned to the SC face and reads identically on the Traditional and English pages. These have to restate the whole stack rather than just override --font-cjk: --font-ui-ex and --font-display are declared on :root, so the var(--font-cjk) inside them is already substituted by the time they inherit down here. Only the Chinese fallback differs from each element's normal stack — the Latin half stays Jost in the footer, Cormorant in the mobile menu, and the contact dropdown's Futura in the nav — that last one carries an extra .nav-panel so it outranks the dropdown rule whatever the source order. */ .nav-panel .panel-link.rednote { font-family: var(--font-futura), 'Noto Sans SC', sans-serif; } .footer__social-text.rednote { font-family: 'Jost', 'Noto Sans SC', sans-serif; } .mobile-link.rednote { font-family: 'Cormorant Garamond', 'Noto Sans SC', serif; } *, *::before, *::after { box-sizing: border-box; } /* The page scrolls vertically only. Sealing both html and body matters: with overflow-x on body alone the value propagates to the viewport and body itself computes back to visible, which mobile Safari will still let you pan. Nothing should be relying on this — it is the backstop, not the fix — so anything that genuinely sticks out past the viewport is dealt with at the source. */ html, body { max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; width: 100%; position: relative; background: var(--cream); color: var(--ink); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; } a { color: var(--gold); } a:hover { color: var(--gold-dark); } img { max-width: 100%; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* Parked with clip rather than left:-9999px — an off-canvas box still counts toward the document's scrollable width in some engines. */ .skip-link { position: absolute; left: 0; top: 0; z-index: 200; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); background: var(--ink); color: var(--cream); padding: 12px 20px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } .skip-link:focus { width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; color: var(--cream); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 2. Navigation -------------------------------------------------------------------------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 20px var(--gutter); background: transparent; border-bottom: 1px solid transparent; color: var(--nav-fg); transition: padding .5s var(--ease), background .5s ease, color .5s ease, border-color .5s ease; } .nav.is-solid { --nav-fg: var(--ink); padding: 12px var(--gutter); background: rgba(246, 242, 234, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: rgba(34, 30, 24, .08); } .nav__group { display: flex; align-items: center; } .nav__group--left { gap: 34px; } .nav__group--right { gap: 20px; justify-content: flex-end; } .nav__logo { grid-column: 2; justify-self: center; font-family: var(--font-display); font-weight: 500; font-size: 26px; letter-spacing: .05em; line-height: 1; white-space: nowrap; text-decoration: none; color: var(--nav-fg); transition: color .5s ease; } .nav__logo:hover { color: var(--nav-fg); } /* -- dropdown trigger -- */ .nav-item { position: relative; } .nav-item__btn { display: flex; align-items: center; gap: 6px; padding: 8px 0; background: none; border: none; color: inherit; font-family: var(--font-ui-ex); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .25s ease; } .nav-item__btn:hover, .nav-item.is-open > .nav-item__btn { color: var(--gold); } .nav-item__caret { font-size: 9px; opacity: .7; } /* -- dropdown panel -- */ .nav-panel { position: absolute; top: calc(100% + 16px); left: 0; min-width: 210px; display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 2px; background: var(--panel); border: 1px solid var(--line-hairline); box-shadow: 0 24px 60px -24px rgba(34, 30, 24, .4); color: var(--ink); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease, visibility .35s; z-index: 120; } .nav-item.is-open > .nav-panel { opacity: 1; visibility: visible; transform: translateY(0); } .nav-panel--wide { min-width: 320px; } .nav-panel--right { left: auto; right: 0; min-width: 230px; } /* the contact dropdown is set in Futura; Chinese still falls to --font-cjk */ .nav-panel--right .panel-link { font-family: var(--font-futura), var(--font-cjk), sans-serif; } .nav-panel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .panel-link { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 2px; color: var(--ink); text-decoration: none; font-family: var(--font-ui-ex); font-size: 13.5px; letter-spacing: .02em; transition: background .25s ease, color .25s ease, padding-left .25s ease; } .panel-link:hover, .panel-link:focus-visible { background: #F3EEE2; color: var(--gold); padding-left: 18px; } .panel-link.is-active { background: #F3EEE2; color: var(--gold); } .panel-link__icon { opacity: .4; } /* The WeChat row is a