/* ============================================================================ AURANA — a chef-led house of flavour Design system. One token set, two worlds. The light world (Aurana) and the dark world (Aurana × Truffle House) share every component. Only the token values change, via .world-dark on . "You have entered another room in the same house." ========================================================================== */ /* ---------------------------------------------------------------- 1. TOKENS */ :root { /* -- the light world: ivory, champagne, sage -- */ --bg: #F7F3EA; --bg-raised: #FCFAF4; --bg-inset: #F1ECE0; --text: #232220; --text-soft: #5D594F; --text-faint: #8A8477; --accent: #9A7B3A; /* champagne, darkened for AA contrast on ivory */ --accent-bright: #C6A664; --line: rgba(35, 34, 32, .13); --line-strong: rgba(35, 34, 32, .26); /* the sage band — gifting */ --band: #6B7758; --band-2: #5A6549; --band-text: #F4F1E7; --band-soft: rgba(244, 241, 231, .74); /* the footer is the one always-dark surface in both worlds */ --foot: #23251F; --foot-text: #E9E5D9; --foot-soft: rgba(233, 229, 217, .62); --foot-line: rgba(233, 229, 217, .17); --shadow-sm: 0 1px 2px rgba(35,34,32,.05), 0 4px 14px rgba(35,34,32,.045); --shadow-md: 0 2px 6px rgba(35,34,32,.06), 0 18px 44px rgba(35,34,32,.09); --shadow-lg: 0 30px 80px rgba(35,34,32,.15); /* type */ --display: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif; --sans: "Jost", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif; --script: "Sacramento", "Snell Roundhand", cursive; /* rhythm */ --gutter: clamp(20px, 5vw, 72px); --maxw: 1360px; --nav-h: 78px; /* distance from the container's content edge to the viewport edge, so a full-bleed element reaches the edge instead of stopping short of it */ --bleed: calc((100vw - min(100vw, var(--maxw))) / 2 + var(--gutter)); --section: clamp(40px, 4.2vw, 70px); /* radius scale — no image in this design has a hard corner */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 22px; --ease: cubic-bezier(.22, .61, .36, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); color-scheme: light; } /* -- the dark world: truffle, ember, gold -- */ .world-dark { --bg: #14120E; --bg-raised: #1D1A14; --bg-inset: #100E0B; --text: #EFE9DA; --text-soft: #B3AA96; --text-faint: #857D6C; --accent: #C6A664; --accent-bright: #DCC188; --line: rgba(239, 233, 218, .14); --line-strong: rgba(239, 233, 218, .3); --band: #2B2E20; --band-2: #23261A; --band-text: #EFE9DA; --band-soft: rgba(239, 233, 218, .68); --foot: #0E0C09; --foot-text: #EFE9DA; --foot-soft: rgba(239, 233, 218, .58); --foot-line: rgba(239, 233, 218, .13); --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.34); --shadow-md: 0 2px 6px rgba(0,0,0,.44), 0 18px 44px rgba(0,0,0,.5); --shadow-lg: 0 30px 80px rgba(0,0,0,.6); color-scheme: dark; } /* ------------------------------------------------------------ 2. FOUNDATION */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.62; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color .5s var(--ease-soft), color .5s var(--ease-soft); } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 300; line-height: 1.04; letter-spacing: .012em; margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } ::selection { background: var(--accent); color: var(--bg); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--text); color: var(--bg); padding: 12px 20px; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; } .skip:focus { left: 12px; top: 12px; } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------- 3. LAYOUT */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap-wide { max-width: 1560px; } section { position: relative; } .pad { padding-block: var(--section); } .pad-top { padding-top: var(--section); } .pad-bot { padding-bottom: var(--section); } .rule { height: 1px; background: var(--line); border: 0; margin: 0; } /* ------------------------------------------------------------ 4. TYPOGRAPHY */ .eyebrow { font-family: var(--sans); font-size: .68rem; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); margin: 0 0 22px; } .eyebrow-quiet { color: var(--text-faint); } .display { font-family: var(--display); font-size: clamp(2.5rem, 5.05vw, 4.5rem); line-height: 1.0; letter-spacing: .008em; text-transform: uppercase; font-weight: 300; } /* the two-tone headline from the mockup: statement, then the soft echo */ .display .echo { color: var(--text-faint); display: block; } .world-dark .display .echo { color: var(--accent); opacity: .82; } .h-section { font-size: clamp(1.72rem, 2.65vw, 2.4rem); text-transform: uppercase; letter-spacing: .022em; line-height: 1.06; } .h-card { font-size: clamp(1.25rem, 1.7vw, 1.6rem); text-transform: uppercase; letter-spacing: .07em; font-weight: 300; } .lede { font-size: clamp(.97rem, 1.15vw, 1.08rem); line-height: 1.78; color: var(--text-soft); max-width: 46ch; } .body-copy { color: var(--text-soft); line-height: 1.82; } .body-copy + .body-copy { margin-top: 1.25em; } .body-copy strong { color: var(--text); font-weight: 400; } .pull { font-family: var(--display); font-size: clamp(1.5rem, 2.7vw, 2.4rem); line-height: 1.28; color: var(--text); letter-spacing: .01em; max-width: 22ch; } .script { font-family: var(--script); font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.3; color: var(--band); letter-spacing: .01em; } .micro { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint); } /* the × that joins the two houses */ .x-mark { font-family: var(--display); font-size: .62em; color: var(--accent); vertical-align: .18em; margin-inline: .5em; font-weight: 400; } /* --------------------------------------------------------------- 5. BUTTONS */ /* the signature CTA: a tracked label on a hairline, with a circled arrow */ .cta { display: inline-flex; align-items: center; gap: 16px; font-family: var(--sans); font-size: .72rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--text); background: none; border: 0; padding: 0 0 11px; cursor: pointer; position: relative; } .cta::before { content: ""; position: absolute; left: 0; bottom: 0; width: calc(100% - 50px); height: 1px; background: var(--line-strong); transform-origin: left; transition: transform .5s var(--ease), background-color .35s; } .cta:hover::before { transform: scaleX(1.06); background: var(--accent); } /* icon-only variant — just the circled arrow, no rule */ .cta-icon { padding-bottom: 0; gap: 0; } .cta-icon::before { display: none; } .cta-icon .disc { margin-bottom: 0; } .cta .disc { width: 22px; height: 22px; display: grid; place-items: center; flex: none; margin-bottom: -6px; color: var(--text); transition: color .35s; } .cta .disc svg { width: 20px; height: 20px; transition: transform .4s var(--ease); } .cta:hover .disc { color: var(--accent); } .cta:hover .disc svg { transform: translateX(4px); } /* the hero's call to action carries a filled champagne disc */ .cta-fill .disc { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-bright); color: #221E14; margin-bottom: -9px; transition: background-color .35s, transform .4s var(--ease); } .cta-fill .disc svg { width: 14px; height: 14px; } .cta-fill:hover .disc { background: var(--accent); transform: scale(1.06); } .cta-fill:hover .disc svg { transform: translateX(3px); } /* filled variant — used where a CTA sits on imagery or a coloured band */ .btn { display: inline-flex; align-items: center; gap: 14px; font-size: .72rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; padding: 17px 34px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text); cursor: pointer; transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease); } .btn:hover { background: var(--text); color: var(--bg); border-color: var(--text); } .btn { white-space: nowrap; } .btn svg { width: 15px; height: 15px; flex: none; } .btn:active { transform: translateY(1px); } .btn-solid { background: var(--text); color: var(--bg); border-color: var(--text); } .btn-solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-gold { background: var(--accent); border-color: var(--accent); color: #16140F; } .btn-gold:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: #16140F; } .btn-onband { border-color: var(--band-soft); color: var(--band-text); background: transparent; border-radius: var(--r-sm); padding: 15px 28px; gap: 16px; } .btn-onband:hover { background: var(--band-text); color: var(--band); border-color: var(--band-text); } .btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; } /* a quiet text link that underlines from the left */ .tlink { position: relative; color: var(--text); padding-bottom: 2px; } .tlink::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; opacity: .3; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease), opacity .3s; } .tlink:hover::after { transform: scaleX(1); opacity: .85; } /* ------------------------------------------------------------------ 6. NAV */ .nav { position: sticky; top: 0; z-index: 90; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid transparent; transition: border-color .4s, background-color .4s, box-shadow .4s; } .nav.is-stuck { border-bottom-color: var(--line); box-shadow: 0 1px 24px rgba(0,0,0,.05); } .world-dark .nav.is-stuck { box-shadow: 0 1px 24px rgba(0,0,0,.4); } .nav-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: var(--nav-h); } .nav-in > nav { display: flex; justify-content: center; } .nav-logo { flex: none; display: block; } .nav-logo img { height: 26px; width: auto; } .nav-links { display: flex; align-items: center; gap: clamp(16px, 2.1vw, 34px); list-style: none; margin: 0; padding: 0; } .nav-links a { font-size: .7rem; font-weight: 400; letter-spacing: .17em; text-transform: uppercase; color: var(--text-soft); padding: 6px 0; position: relative; white-space: nowrap; transition: color .3s; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } /* the doorway into the collaboration */ .nav-links .door { color: var(--accent); } .nav-links .door .x-mark { margin-inline: 0 .45em; font-size: .8em; } .nav-links .door:hover { color: var(--accent-bright); } .nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 18px; } .bag { display: inline-flex; align-items: center; gap: 9px; font-size: .7rem; letter-spacing: .17em; text-transform: uppercase; color: var(--text-soft); background: none; border: 0; cursor: pointer; transition: color .3s; } .bag:hover { color: var(--text); } .bag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transition: transform .4s var(--ease); } .bag.is-bump .dot { transform: scale(2.1); } .burger { display: none; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; padding: 0; place-items: center; } .burger span { display: block; width: 20px; height: 1px; background: var(--text); transition: transform .4s var(--ease), opacity .3s; } .burger span + span { margin-top: 5px; } body.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.menu-open .burger span:nth-child(2) { opacity: 0; } body.menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* mobile sheet */ .nav-sheet { position: fixed; top: var(--nav-h, 78px); left: 0; right: 0; bottom: 0; background: var(--bg); z-index: 95; padding: 26px var(--gutter) calc(26px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; transform: translateY(-10px); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } body.menu-open .nav-sheet { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s; } .nav-sheet a { font-family: var(--display); font-size: clamp(1.4rem, 6.4vw, 1.85rem); text-transform: uppercase; letter-spacing: .05em; padding: 16px 2px; min-height: 44px; /* a comfortable tap target */ display: flex; align-items: center; border-bottom: 1px solid var(--line); color: var(--text); } .nav-sheet a:last-child { border-bottom: 0; } .nav-sheet a.door { color: var(--accent); } /* -------------------------------------------------------------- 7. THE HERO */ .hero { position: relative; overflow: hidden; } .hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); align-items: center; gap: clamp(28px, 4.4vw, 72px); min-height: clamp(420px, 60vh, 580px); padding-block: clamp(26px, 3.2vw, 50px); } .hero-copy { position: relative; z-index: 3; max-width: 560px; } .hero-copy .lede { margin: 30px 0 40px; } .hero-art { position: relative; } /* the monogram device: a hairline circle, the mark, and a drip of honey */ .monogram { position: absolute; left: -25%; top: 50%; transform: translateY(-50%); width: clamp(240px, 30vw, 415px); aspect-ratio: 1; pointer-events: none; z-index: 1; } .monogram .ring { position: absolute; inset: 0; border: 1px solid var(--accent); border-radius: 50%; opacity: .55; } .monogram .mark { position: absolute; width: 54%; left: 21%; top: 23%; opacity: .8; } .monogram .drip { position: absolute; left: 78%; top: -14%; width: 1px; height: 62%; background: var(--accent); opacity: .7; } .monogram .drip::before { content: ""; position: absolute; left: -2.5px; top: -6px; width: 6px; height: 9px; background: var(--accent); border-radius: 50%; } .monogram .drip::after { content: ""; position: absolute; left: -3.5px; bottom: -5px; width: 8px; height: 11px; background: var(--accent); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; opacity: .9; } .hero-plate { position: relative; z-index: 2; margin-left: auto; margin-right: calc(-1 * var(--bleed)); width: calc(72% + var(--bleed)); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 40px 90px rgba(35,34,32,.13); } .hero-plate img { width: 100%; height: 100%; object-fit: cover; } /* ------------------------------------------------------- 8. THE PROCESS BAND */ .process { position: relative; background: var(--bg-raised); border-block: 1px solid var(--line); } .process-in { display: grid; grid-template-columns: minmax(236px, 1fr) minmax(0, 3.15fr); gap: clamp(24px, 4vw, 60px); align-items: stretch; } .process-lead { background: var(--bg-raised); border: 0; border-radius: 26px; padding: 34px 34px 30px; display: flex; flex-direction: column; justify-content: space-between; gap: 26px; box-shadow: var(--shadow-sm); margin-block: clamp(18px, 2.2vw, 30px); } .process-lead h3 { font-size: .7rem; font-family: var(--sans); font-weight: 400; letter-spacing: .22em; text-transform: uppercase; line-height: 1.7; } .process-lead p { font-size: .9rem; color: var(--text-soft); line-height: 1.7; } .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: clamp(24px, 2.9vw, 42px); } .process-step { padding-inline: clamp(14px, 2vw, 30px); text-align: center; position: relative; } /* dividers sit between columns and run only as tall as the content */ .process-step + .process-step::before { content: ""; position: absolute; left: 0; top: 6%; bottom: 6%; width: 1px; background: var(--line); } .process-step .ico { width: 42px; height: 42px; margin: 0 auto 20px; color: var(--accent); } .process-step .ico svg { width: 100%; height: 100%; } .process-step h4 { font-family: var(--sans); font-size: .71rem; font-weight: 400; letter-spacing: .19em; text-transform: uppercase; margin-bottom: 9px; } .process-step p { font-size: .84rem; color: var(--text-soft); line-height: 1.66; } /* -------------------------------------------------- 9. THE ARCHED CATEGORIES */ .cats-in { display: grid; grid-template-columns: minmax(236px, 1fr) minmax(0, 3.15fr); gap: clamp(28px, 4vw, 56px); align-items: start; } .cats-lead .h-section { margin-bottom: 24px; } .cats-lead .lede { margin-bottom: 34px; max-width: 30ch; } .cats-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.6vw, 26px); } .arch { display: block; } .arch-img { position: relative; aspect-ratio: 1 / 1.18; border-radius: 999px 999px var(--r-sm) var(--r-sm); overflow: hidden; background: var(--bg-inset); } .arch-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .arch:hover .arch-img img { transform: scale(1.07); } .arch-foot { margin-top: 18px; } .arch-foot .row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 6px; } .arch-foot h3 { font-family: var(--sans); font-size: .76rem; font-weight: 400; letter-spacing: .17em; text-transform: uppercase; line-height: 1.4; } .arch-foot p { font-size: .78rem; color: var(--text-faint); } .arch-foot .arrow { flex: none; width: 15px; color: var(--text-faint); transition: transform .45s var(--ease), color .3s; } .arch:hover .arch-foot .arrow { transform: translateX(5px); color: var(--accent); } .arch:hover .arch-foot h3 { color: var(--accent); } /* ------------------------------------------------------- 10. THE GIFT BAND */ .band { background: var(--band); color: var(--band-text); position: relative; overflow: hidden; } .band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 78% 50%, rgba(255,255,255,.07), transparent 62%); pointer-events: none; } .band-in { display: grid; grid-template-columns: minmax(236px, 1fr) minmax(0, 3.15fr); gap: clamp(28px, 4vw, 56px); align-items: center; position: relative; z-index: 1; } .band .h-section { color: var(--band-text); } .band p { color: var(--band-soft); } .band-lead p { margin: 22px 0 32px; font-size: .95rem; line-height: 1.75; } .band-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 34px); margin-right: calc(-1 * var(--gutter)); } .band-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); transition: transform .9s var(--ease); } .band-item:hover img { transform: scale(1.04); } .band-item h3 { font-family: var(--sans); font-size: .76rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; margin-top: 18px; } .band-item p { font-size: .8rem; margin-top: 5px; } /* ------------------------------------------------------- 11. PRODUCT CARDS */ .grid-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(22px, 2.8vw, 46px) clamp(16px, 2vw, 30px); } .pcard { display: block; position: relative; } .pcard-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-sm); background: var(--bg-inset); } .pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.15s var(--ease); } .pcard:hover .pcard-img img { transform: scale(1.06); } .pcard-tag { position: absolute; top: 12px; left: 12px; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(6px); color: var(--text-soft); border: 1px solid var(--line); } .pcard-body { padding-top: 17px; } .pcard-body h3 { font-family: var(--display); font-size: 1.18rem; font-weight: 400; letter-spacing: .026em; line-height: 1.24; transition: color .3s; } .pcard:hover .pcard-body h3 { color: var(--accent); } .pcard-note { font-size: .82rem; color: var(--text-faint); margin-top: 6px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; } .pcard-price { font-size: .86rem; letter-spacing: .06em; color: var(--text); } .pcard-add { font-size: .63rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); background: none; border: 0; padding: 4px 0; cursor: pointer; position: relative; transition: color .3s; } .pcard-add::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 100%; height: 1px; background: currentColor; opacity: .34; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .pcard-add:hover { color: var(--accent); } .pcard-add:hover::after { transform: scaleX(1); } .pcard-add.is-added { color: var(--accent); } /* ------------------------------------------------------------ 12. JOURNAL */ .kitchen-in { display: grid; grid-template-columns: minmax(236px, 1fr) minmax(0, 2.95fr) minmax(186px, .78fr); gap: clamp(26px, 3.6vw, 58px); align-items: start; } /* the rail heading takes a longer word than the section default allows */ .kitchen-in > :first-child .h-section { font-size: clamp(1.58rem, 2.15vw, 2.02rem); } .jgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 26px); min-width: 0; } .jcard { display: block; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .jcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .jcard img { width: 100%; aspect-ratio: 4/2.75; object-fit: cover; } .jcard-body { padding: 16px 18px 18px; } .jcard-body .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; } .jcard .micro { margin-bottom: 12px; display: block; } .jcard h3 { font-family: var(--display); font-size: 1.1rem; font-weight: 400; line-height: 1.3; letter-spacing: .02em; } .jcard .arrow { width: 17px; flex: none; margin-bottom: 3px; color: var(--text-faint); transition: transform .45s var(--ease), color .3s; } .jcard:hover .arrow { transform: translateX(6px); color: var(--accent); } .quote-block { text-align: left; } .quote-block .mono-disc { width: 74px; height: 74px; margin-top: 30px; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; } .quote-block .mono-disc img { width: 42%; opacity: .8; } /* -------------------------------------------------------------- 13. FOOTER */ .foot { background: var(--foot); color: var(--foot-text); padding-block: clamp(40px, 4.4vw, 62px) 26px; position: relative; } .foot-in { display: grid; grid-template-columns: minmax(200px, 1.15fr) minmax(220px, 1.3fr) repeat(3, minmax(110px, .72fr)); gap: clamp(26px, 3.4vw, 54px); } .foot-brand img { height: 22px; width: auto; margin-bottom: 22px; } .foot-brand p { font-size: .86rem; color: var(--foot-soft); line-height: 1.7; } .foot-brand .place { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--foot-soft); margin-top: 22px; } .foot h4 { font-family: var(--sans); font-size: .66rem; font-weight: 400; letter-spacing: .21em; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 20px; } .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .foot ul a { font-size: .86rem; color: var(--foot-text); opacity: .8; transition: opacity .3s, color .3s; } .foot ul a:hover { opacity: 1; color: var(--accent-bright); } .signup { position: relative; margin-top: 6px; } .signup input { width: 100%; background: transparent; border: 1px solid var(--foot-line); border-radius: var(--r-sm); padding: 15px 56px 15px 18px; font-size: .84rem; color: var(--foot-text); transition: border-color .3s; } .signup input::placeholder { color: var(--foot-soft); } .signup input:focus { outline: none; border-color: var(--accent); } .signup button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--accent-bright); border: 0; display: grid; place-items: center; cursor: pointer; transition: background-color .3s, transform .3s var(--ease); } .signup button:hover { background: var(--accent-bright); transform: translateY(-50%) scale(1.06); } .signup button svg { width: 13px; height: 13px; stroke: #16140F; } .signup-note { font-size: .76rem; color: var(--foot-soft); margin-top: 12px; min-height: 1.2em; } .foot-base { margin-top: clamp(26px, 3vw, 40px); padding-top: 20px; border-top: 1px solid var(--foot-line); display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; font-size: .74rem; color: var(--foot-soft); } .foot-base a:hover { color: var(--accent-bright); } /* --------------------------------------------------------- 14. CART DRAWER */ .scrim { position: fixed; inset: 0; z-index: 120; background: rgba(18, 17, 14, .5); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .45s var(--ease-soft); } body.cart-open .scrim { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 121; width: min(430px, 100vw); background: var(--bg); border-left: 1px solid var(--line); display: flex; flex-direction: column; transform: translateX(102%); transition: transform .5s var(--ease); box-shadow: var(--shadow-lg); } body.cart-open .drawer { transform: none; } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 26px var(--gutter) 20px; border-bottom: 1px solid var(--line); } .drawer-head h2 { font-family: var(--sans); font-size: .74rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; } .drawer-close { background: none; border: 0; cursor: pointer; padding: 6px; color: var(--text-faint); transition: color .3s, transform .3s; } .drawer-close:hover { color: var(--text); transform: rotate(90deg); } .drawer-body { flex: 1; overflow-y: auto; padding: 8px var(--gutter); } .drawer-empty { padding: 60px 0; text-align: center; color: var(--text-faint); font-size: .9rem; } .citem { display: grid; grid-template-columns: 68px 1fr auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: start; } .citem img { width: 68px; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-xs); } .citem h3 { font-family: var(--display); font-size: 1.02rem; font-weight: 400; line-height: 1.3; } .citem .meta { font-size: .74rem; color: var(--text-faint); margin-top: 4px; } .citem .qty { display: flex; align-items: center; gap: 12px; margin-top: 10px; } .citem .qty button { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); background: none; cursor: pointer; color: var(--text-soft); font-size: .8rem; display: grid; place-items: center; line-height: 1; transition: border-color .3s, color .3s; } .citem .qty button:hover { border-color: var(--accent); color: var(--accent); } .citem .qty span { font-size: .82rem; min-width: 14px; text-align: center; } .citem .line-price { font-size: .84rem; white-space: nowrap; } .drawer-foot { padding: 22px var(--gutter) 28px; border-top: 1px solid var(--line); } .drawer-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .drawer-total span:first-child { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint); } .drawer-total span:last-child { font-family: var(--display); font-size: 1.5rem; } .drawer-foot .note { font-size: .74rem; color: var(--text-faint); margin-bottom: 18px; } .drawer-foot .btn { width: 100%; justify-content: center; } /* ------------------------------------------------ 15. THE DOORWAY TRANSITION */ /* Entering the collaboration should feel like walking into another room. */ .curtain { position: fixed; inset: 0; z-index: 200; background: #14120E; pointer-events: none; opacity: 0; transition: opacity .55s var(--ease-soft); } .curtain .cmark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9); width: 92px; opacity: 0; transition: opacity .5s var(--ease-soft) .1s, transform .8s var(--ease) .1s; } body.doorway .curtain { opacity: 1; pointer-events: auto; } body.doorway .curtain .cmark { opacity: .95; transform: translate(-50%, -50%) scale(1); } /* arriving: the curtain lifts */ body.arriving .curtain { opacity: 1; } body.arriving.lift .curtain { opacity: 0; } body.arriving.lift .curtain .cmark { opacity: 0; } /* --------------------------------------------------------- 16. PAGE HEADERS */ .phead { padding-block: clamp(56px, 7vw, 104px) clamp(34px, 4.5vw, 60px); } .phead .eyebrow { margin-bottom: 18px; } .phead .lede { margin-top: 26px; } .crumb { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 26px; } .crumb a:hover { color: var(--accent); } .crumb span { opacity: .5; margin-inline: 8px; } /* ------------------------------------------------------------- 17. REVEALS */ .rv { opacity: 0; transform: translateY(24px); transition: opacity .95s var(--ease-soft), transform .95s var(--ease); } .rv.in { opacity: 1; transform: none; } .rv-2 { transition-delay: .09s; } .rv-3 { transition-delay: .18s; } .rv-4 { transition-delay: .27s; } .rv-5 { transition-delay: .36s; } /* hero load sequence */ .hero-copy > * { opacity: 0; transform: translateY(20px); animation: rise .95s var(--ease) forwards; } .hero-copy > *:nth-child(1) { animation-delay: .12s; } .hero-copy > *:nth-child(2) { animation-delay: .22s; } .hero-copy > *:nth-child(3) { animation-delay: .32s; } .hero-copy > *:nth-child(4) { animation-delay: .42s; } .hero-art { opacity: 0; animation: rise 1.3s var(--ease) .2s forwards; } @keyframes rise { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; } .rv { opacity: 1; transform: none; } .hero-copy > *, .hero-art { opacity: 1; transform: none; } } /* ------------------------------------------------------------- 18. TOASTS */ .toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 18px); z-index: 150; background: var(--text); color: var(--bg); padding: 13px 24px; border-radius: 999px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease); box-shadow: var(--shadow-md); } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* ---------------------------------------------------------- 19. RESPONSIVE */ @media (max-width: 1100px) { .nav-links { gap: 16px; } .nav-links a { font-size: .655rem; letter-spacing: .13em; } .kitchen-in { grid-template-columns: 1fr; } .quote-block { display: flex; align-items: center; gap: 28px; } .quote-block .mono-disc { margin-top: 0; flex: none; } } @media (max-width: 960px) { :root { --nav-h: 62px; } .burger { display: grid; } .nav-links { display: none; } .nav-in > nav { display: none; } /* the three-column grid keeps both gaps even when the centre is empty, which overflows a phone; flex costs nothing here */ .nav-in { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: var(--nav-h); } .nav-logo img { height: 22px; } .hero-in { grid-template-columns: 1fr; min-height: 0; gap: 40px; } .hero-art { order: -1; } .hero-plate { margin-inline: auto; width: min(100%, 460px); } .monogram { left: -6%; width: min(60vw, 300px); } .process-in, .cats-in, .band-in { grid-template-columns: 1fr; } .process-lead { margin-bottom: 0; } .process-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 0; } .process-step:nth-child(odd) { border-left: 0; } .cats-row { grid-template-columns: repeat(3, 1fr); } .foot-in { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { body { font-size: 15.5px; } .cats-row { grid-template-columns: repeat(2, 1fr); } .band-items { grid-template-columns: 1fr; gap: 26px; } .jgrid { grid-template-columns: 1fr; } .grid-products { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; } .foot-in { grid-template-columns: 1fr; } .quote-block { flex-direction: column; align-items: flex-start; } .drawer { width: 100vw; } } @media (max-width: 420px) { .process-grid { grid-template-columns: 1fr; } .process-step { border-left: 0; } .grid-products { grid-template-columns: 1fr; } } /* -------------------------------------------------------------- 20. PRINT */ @media print { .nav, .foot, .drawer, .scrim, .curtain, .toast { display: none !important; } body { background: #fff; color: #000; } } /* ============================================================================ 21. ADDENDA — components introduced by the pages ========================================================================== */ /* -- logo swaps automatically between worlds -- */ .nav-logo img { height: 26px; width: auto; } .logo-dark { display: none; } .world-dark .logo-light { display: none; } .world-dark .logo-dark { display: block; } /* -- product card wrapper (the add button sits outside the link) -- */ .pcard-wrap { display: flex; flex-direction: column; } .pcard-wrap .pcard { flex: 1; } /* -- "coming soon" state on a category arch -- */ .arch-img { position: relative; } .arch-soon { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(2px); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text); } /* -- footer "coming soon" social entries -- */ .foot .soon { font-size: .86rem; color: var(--foot-soft); } .foot .soon em { font-style: normal; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; border: 1px solid var(--foot-line); border-radius: 999px; padding: 2px 8px; margin-left: 8px; opacity: .8; } /* ------------------------------------------------------- 22. THE DOORWAY */ /* The dedicated entry point into Aurana × Truffle House. A dark room glimpsed through an arched door, cut into the ivory page. */ .doorway { background: var(--bg); color: var(--text); padding-block: clamp(64px, 8vw, 120px); position: relative; overflow: hidden; } .doorway::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 120% at 82% 30%, rgba(198,166,100,.13), transparent 58%), radial-gradient(70% 90% at 8% 90%, rgba(198,166,100,.07), transparent 60%); pointer-events: none; } .doorway-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 84px); align-items: center; position: relative; z-index: 1; } .doorway-lockup { font-family: var(--display); text-transform: uppercase; color: var(--accent); line-height: 1; margin-bottom: 26px; } .doorway-lockup .d-aurana { display: block; font-size: clamp(2.6rem, 5.6vw, 4.6rem); letter-spacing: .12em; font-weight: 300; } .doorway-lockup .d-x { display: block; font-size: clamp(.9rem, 1.4vw, 1.15rem); margin: .42em 0; opacity: .75; position: relative; } .doorway-lockup .d-x::before, .doorway-lockup .d-x::after { content: ""; position: absolute; top: 50%; width: clamp(38px, 6vw, 84px); height: 1px; background: var(--accent); opacity: .45; } .doorway-lockup .d-x::before { right: calc(50% + 20px); } .doorway-lockup .d-x::after { left: calc(50% + 20px); } .doorway-lockup .d-th { display: block; font-size: clamp(1.35rem, 2.9vw, 2.4rem); letter-spacing: .2em; font-weight: 300; } .doorway .pull { margin-bottom: 20px; color: var(--text); } .doorway .lede { margin-bottom: 36px; } .doorway-art { position: relative; display: block; } .doorway-art .arch-img { aspect-ratio: 3 / 4.2; border-radius: 999px 999px var(--r-sm) var(--r-sm); box-shadow: 0 40px 90px rgba(0,0,0,.55); border: 1px solid rgba(198,166,100,.22); } .doorway-art .arch-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter 1.2s var(--ease); filter: brightness(.94); } .doorway-art:hover .arch-img img { transform: scale(1.06); filter: brightness(1.04); } .doorway-hint { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); background: var(--accent); color: #16140F; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; padding: 9px 22px; border-radius: 999px; transition: transform .45s var(--ease), background-color .3s; } .doorway-art:hover .doorway-hint { transform: translateX(-50%) translateY(-3px); background: var(--accent-bright); } @media (max-width: 860px) { .doorway-in { grid-template-columns: 1fr; } .doorway-art { max-width: 340px; margin-inline: auto; } .doorway-lockup .d-x::before, .doorway-lockup .d-x::after { width: 34px; } } /* ============================================================================ 23. THE COLLABORATION — Aurana × Truffle House ========================================================================== */ /* the hero lockup sits left-aligned rather than centred */ .th-hero-lockup { margin-bottom: 30px; } .th-hero-lockup .d-x { text-align: left; } .th-hero-lockup .d-x::before { display: none; } .th-hero-lockup .d-x::after { left: 34px; right: auto; width: clamp(60px, 9vw, 128px); } .hero .th-hero-lockup + .pull { margin-bottom: 22px; } /* a three-up arch row */ .cats-row-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 700px) { .cats-row-3 { grid-template-columns: 1fr; } } /* -- the three worlds. The numbering is the client's own structure, and it carries real information: these are ordered collections, not decoration. */ .world-group + .world-group { margin-top: clamp(56px, 7vw, 96px); } .world-head { display: flex; align-items: baseline; gap: 20px; padding-bottom: 20px; margin-bottom: clamp(28px, 3.5vw, 44px); border-bottom: 1px solid var(--line); } .world-num { font-family: var(--display); font-size: clamp(1.1rem, 1.5vw, 1.4rem); color: var(--accent); letter-spacing: .1em; flex: none; } .world-head .h-section { margin: 0; } /* the hero's supporting statement, muted like the light world's echo line */ .pull-echo { text-transform: uppercase; letter-spacing: .038em; color: var(--text-soft); font-size: clamp(1.28rem, 2.15vw, 1.95rem); line-height: 1.22; max-width: 30ch; } /* -- leaving the room -------------------------------------------------- */ .return-strip { border-top: 1px solid var(--line); padding-block: clamp(40px, 5vw, 66px); } .return-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } /* ============================================================================ 24. MOCKUP FIDELITY — footer rules and the gift band's tighter rhythm ========================================================================== */ .foot-in > div:nth-child(2), .foot-in > div:nth-child(3) { border-left: 1px solid var(--foot-line); padding-left: clamp(22px, 2.6vw, 44px); } @media (max-width: 960px) { .foot-in > div:nth-child(2), .foot-in > div:nth-child(3) { border-left: 0; padding-left: 0; } } /* the band sits tighter around its imagery than a standard section */ .band.pad { padding-block: clamp(32px, 3.4vw, 52px); } @media (max-width: 960px) { .band-items { margin-right: 0; } .hero-plate { margin-right: auto; width: min(100%, 460px); } } /* the signature under a handwritten quote, in the same hand */ .script-sign { font-size: clamp(1.1rem, 1.6vw, 1.35rem); margin-top: 10px; opacity: .85; } /* pages that keep the arrow beneath the title still need its breathing room */ .jcard-body > .arrow { margin-top: 18px; } /* only the gift bands bleed their imagery past the container */ .band-items { margin-right: 0; } /* ============================================================================ 25. BALANCE — every section's content sits on the same two vertical lines. A bleed either runs to the viewport edge or does not happen at all. ========================================================================== */ /* The gift band reads as three equal, contained panels. The mockup let the third box run off the edge; at real viewport widths that reads as a crop rather than a choice, so the row is balanced instead. */ .band-items.band-bleed { margin-right: 0; } /* imagery in the band gets a soft edge and a little lift */ .band-item img { box-shadow: 0 10px 30px rgba(0, 0, 0, .16); } /* ============================================================================ 26. TOUCH ERGONOMICS Standalone controls get a 44px target. Links inside running prose are deliberately left alone — WCAG exempts them, and padding them out would wreck the line rhythm of the editorial copy. ========================================================================== */ .nav-logo { display: inline-flex; align-items: center; min-height: 44px; } .bag { min-height: 44px; padding-block: 11px; } .burger { width: 44px; height: 44px; } /* the signature CTA keeps its hairline but gains a real hit area */ .cta { min-height: 44px; align-items: center; } .cta::before { bottom: 8px; } .pcard-add { min-height: 44px; display: inline-flex; align-items: center; } .pcard-add::after { bottom: 12px; } .drawer-close { width: 44px; height: 44px; display: grid; place-items: center; } .citem .qty button { width: 32px; height: 32px; } .foot ul a { display: inline-flex; align-items: center; min-height: 32px; } .signup button { width: 38px; height: 38px; } /* native accordions need a comfortable row too */ details > summary { min-height: 44px; } @media (hover: none) { /* no hover on touch, so make the resting state carry the affordance */ .pcard-add, .cta { color: var(--text); } } /* ============================================================================ 27. PHONE REFINEMENTS ========================================================================== */ @media (max-width: 700px) { /* headlines were sized for a desktop measure and crowd a phone */ .display { font-size: clamp(2.15rem, 11.5vw, 3rem); } .h-section { font-size: clamp(1.5rem, 7.2vw, 2rem); } .pull { font-size: clamp(1.25rem, 6vw, 1.6rem); max-width: none; } .lede { max-width: none; } /* the hero reads better with the words first on a small screen */ .hero-in { gap: 30px; } .hero-plate { width: min(86%, 380px); } .monogram { display: none; } .process-lead { border-radius: var(--r-lg); } /* two arches per row need a slightly taller crop to stay elegant */ .arch-img { aspect-ratio: 1 / 1.24; } .arch-foot h3 { font-size: .72rem; } .band-item img { aspect-ratio: 4 / 2.9; } .quote-block .mono-disc { width: 58px; height: 58px; } .drawer-head, .drawer-body, .drawer-foot { padding-inline: 22px; } .foot-base { flex-direction: column; align-items: flex-start; gap: 10px; } } @media (max-width: 420px) { .pcard-body h3 { font-size: 1.02rem; } .pcard-note { -webkit-line-clamp: 3; } .arch-foot .row { flex-direction: column; align-items: flex-start; gap: 4px; } .arch-foot .arrow { display: none; } } /* ---- phone hit areas for standalone links and the quantity stepper ------- Vertical padding on an inline element grows the tap target without disturbing the line box, so editorial rhythm is untouched. */ @media (max-width: 700px) { .tlink { padding-block: 11px; } .tlink::after { bottom: 11px; } .crumb a { display: inline-block; padding-block: 8px; } } input[type="number"] { min-height: 44px; } /* ============================================================================ 28. CORRECTIONS ========================================================================== */ /* The handwritten quote takes the sage band colour in the light world. In the dark world that token is #2B2E20 on a #14120E ground — about 1.4:1, i.e. invisible. Gold reads at ~7.9:1 and is the right voice there anyway. This matters beyond the collaboration page: product.html flips to the dark world for every truffle item. */ .world-dark .script { color: var(--accent); } /* Column dividers between process steps are drawn with a pseudo-element, so the old border-left resets no longer switch them off — a stray hairline hung off the first step of every wrapped row. */ .process-step { border-left: 0; } @media (max-width: 960px) { .process-step:nth-child(odd)::before { display: none; } } @media (max-width: 420px) { .process-step + .process-step::before { display: none; } }