/* ============================================================ SONCIERE — base structure & components (v2) Implements the Claude Design handoff (Sonciere.dc.html) as a multi-page static site. Shared chrome lives here; page-unique layout may remain inline in each page. JS marks — anything animation-gated must remain fully visible without that class. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--ink); } a:hover { color: #000000; } ::selection { background: var(--green); color: var(--paper); } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } input::placeholder, textarea::placeholder { color: #8f8f8f; } img, svg, video { max-width: 100%; } summary::-webkit-details-marker { display: none; } summary { list-style: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* Keyboard users can jump past the chrome; invisible until focused. */ .skip-link { position: fixed; top: 10px; left: 10px; z-index: 200; transform: translateY(-300%); background: var(--ink); color: var(--paper); font-size: 12px; letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none; padding: 12px 18px; transition: transform .3s ease; } .skip-link:focus-visible { transform: none; } /* ---------- Keyframes ---------- */ @keyframes rise { from { opacity: 0; transform: translateY(110%); } to { opacity: 1; transform: none; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pageIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes drift { 0%, 100% { transform: scaleY(1); opacity: .9; } 50% { transform: scaleY(.55); opacity: .4; } } /* Letter/line rise entrances (delays set inline per element) */ .rise-l { display: inline-block; animation: rise .9s cubic-bezier(.22,1,.36,1) both; } .rise-el { display: inline-block; animation: rise 1s cubic-bezier(.22,1,.36,1) both; } /* ---------- Type helpers ---------- */ .kicker { margin: 0 0 10px; font-size: 11px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-soft); font-weight: 400; } .caps { font-size: 11px; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-soft); } .caps-link { font-size: 11px; letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none; color: var(--ink-soft); padding: 8px 0; transition: color .4s; } .caps-link:hover { color: var(--ink); } .display { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.02; } .serif-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; } /* ---------- Layout ---------- */ .wrap { max-width: var(--max-w); margin-inline: auto; } .wrap--story { max-width: 1140px; } .wrap--faq { max-width: 760px; } .wrap--policy { max-width: 700px; } .wrap--contact { max-width: 640px; } .page { animation: pageIn .7s cubic-bezier(.22,1,.36,1) both; padding: calc(var(--head-h) + clamp(40px, 8vh, 80px)) var(--pad-x) clamp(90px, 13vh, 150px); } .lede { margin: 0 0 60px; max-width: 34em; font-size: 14px; color: var(--ink-soft); border-top: 1px solid var(--hairline); padding-top: 18px; } .notice { margin: 0 0 48px; border: 1px solid var(--hairline); background: var(--paper-warm); padding: 16px 20px; font-size: 13px; color: var(--ink-soft); } .prose h2 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.3; } .prose p { margin: 0 0 40px; font-size: 15px; } .prose p:last-child { margin-bottom: 0; } /* ---------- Header ---------- */ .site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: transparent; border-bottom: 1px solid transparent; transition: background .5s ease, border-color .5s ease; } .site-head.is-scrolled { background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom-color: #e3e0da; } .site-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--head-h); padding: 0 var(--pad-x); } .wordmark { font-family: var(--font-display); font-weight: 500; font-size: 20px; letter-spacing: var(--track-wide); text-transform: uppercase; text-decoration: none; color: var(--ink); } .nav-links { display: none; align-items: center; gap: 40px; list-style: none; margin: 0; padding: 0; } .nav-links a { font-size: 11px; letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none; color: var(--ink-soft); padding: 10px 0; position: relative; } /* Underline draws itself left-to-right on hover; sits static under the current page. */ .nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 4px; height: 1px; background: var(--ink); transition: right .35s cubic-bezier(.22,1,.36,1); } .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after { right: 0; } .nav-links a[aria-current="page"] { color: var(--ink); } .nav-links a[aria-current="page"]::after { right: 0; background: var(--hairline-warm); } .menu-btn { width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 7px; background: transparent; border: 0; cursor: pointer; padding: 0; } .menu-btn span { display: block; width: 26px; height: 1px; background: var(--ink); } .menu-btn span:last-child { width: 18px; } @media (min-width: 820px) { .nav-links { display: flex; } .menu-btn { display: none; } } /* Without JS the menu button is inert — show the links inline instead. */ html:not(.js) .nav-links { display: flex; flex-wrap: wrap; gap: 8px 20px; } html:not(.js) .menu-btn { display: none; } /* ---------- Mobile menu overlay ---------- */ .menu { position: fixed; inset: 0; z-index: 80; background: var(--paper); display: flex; flex-direction: column; overflow-y: auto; /* tiny landscape screens can scroll the menu instead of clipping */ animation: fadeIn .45s ease both; } .menu[hidden] { display: none; } .menu-head { display: flex; justify-content: space-between; align-items: center; height: var(--head-h); padding: 0 var(--pad-x); } .menu-head .wordmark-text { font-family: var(--font-display); font-weight: 500; font-size: 20px; letter-spacing: var(--track-wide); text-transform: uppercase; } .menu-close { width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; position: relative; padding: 0; } .menu-close span { position: absolute; left: 9px; top: 21px; width: 26px; height: 1px; background: var(--ink); } .menu-close span:first-child { transform: rotate(45deg); } .menu-close span:last-child { transform: rotate(-45deg); } .menu-nav { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 clamp(24px, 7vw, 64px); } .menu-nav > div { overflow: hidden; } .menu-nav a { display: inline-block; font-family: var(--font-display); font-weight: 500; font-size: clamp(38px, 9vw, 64px); line-height: 1.25; text-decoration: none; color: var(--ink); animation: rise .8s cubic-bezier(.22,1,.36,1) both; } .menu-nav > div:nth-child(1) a { animation-delay: .08s; } .menu-nav > div:nth-child(2) a { animation-delay: .16s; } .menu-nav > div:nth-child(3) a { animation-delay: .24s; } .menu-nav > div:nth-child(4) a { animation-delay: .32s; } .menu-foot { display: flex; flex-wrap: wrap; gap: 16px 28px; padding: 0 clamp(24px, 7vw, 64px) 40px; animation: fadeIn .8s .4s both; } /* ---------- Buttons ---------- */ .btn { display: inline-block; font: inherit; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; text-decoration: none; color: var(--paper); background: var(--ink); border: 1px solid var(--ink); padding: 18px 40px; cursor: pointer; transition: background .4s, color .4s; } .btn:hover { background: transparent; color: var(--ink); } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--paper); } .btn--light { background: transparent; color: var(--paper); border-color: rgba(255,255,255,.8); } .btn--light:hover { background: var(--paper); color: var(--ink); } .underline-link { font-size: 11px; letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--ink); padding: 8px 0 5px; transition: color .4s, border-color .4s; } .underline-link:hover { color: var(--green); border-color: var(--green); } /* ---------- Forms ---------- */ .field { font: inherit; font-size: 15px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 12px 2px; width: 100%; } textarea.field { border: 1px solid var(--hairline); padding: 14px; resize: vertical; } select.field { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer; } .select-wrap { position: relative; } .select-wrap svg { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); pointer-events: none; } .form-col { display: flex; flex-direction: column; gap: 26px; } .form-row label { display: block; font-size: 11px; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; } .form-row--textarea label { margin-bottom: 10px; } .signup-form { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: flex-end; max-width: 440px; margin-inline: auto; } .signup-form .field { flex: 1 1 200px; } .signup-form .btn { flex: 0 0 auto; padding: 16px 36px; } /* ---------- Reveal on scroll (JS-gated; visible without JS) ---------- */ html.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.3s cubic-bezier(.22,1,.36,1); } html.js [data-reveal].revealed { opacity: 1; transform: none; } /* Spec section steps start dim; site.js scrubs them with scroll (JS-gated). */ html.js .spec-step { opacity: .15; transform: translateY(16px); } /* Returning visitors within a session skip the entry ritual before paint. */ html.entered .entry { display: none; } /* ---------- Marquee strip ---------- */ .marquee { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); overflow: hidden; padding: 16px 0; } .marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; } .marquee-seq { display: flex; align-items: center; } .marquee-seq .m-serif { font-family: var(--font-display); font-style: italic; font-size: 19px; white-space: nowrap; padding: 0 34px; } .marquee-seq .m-caps { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; padding: 0 34px; } .marquee-seq .m-rule { width: 40px; height: 1px; background: var(--hairline-warm); flex: none; } /* ---------- Scroll cue ---------- */ .scroll-cue { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: fadeIn 1.5s 1.4s both; } .scroll-cue .cue-line { display: block; width: 1px; height: 52px; background: #c9c9c9; transform-origin: top; animation: drift 2.6s ease-in-out infinite; } /* ---------- Entry overlay (home) ---------- */ .entry { position: fixed; inset: 0; z-index: 100; background: var(--entry-fallback); overflow: hidden; } .entry[hidden] { display: none; } .entry video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .entry-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 40%, rgba(20,26,32,.14) 100%); } .entry-mark { position: absolute; top: 10vh; left: 50%; transform: translateX(-50%); width: clamp(230px, 38vw, 540px); height: auto; animation: fadeIn 1.8s .2s both; } .entry-ui { position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 26px; width: min(80vw, 380px); } .entry-track { touch-action: none; cursor: grab; width: 100%; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; animation: fadeIn 1.8s .7s both; } /* No focus-ring box during pointer/touch drags; keyboard focus keeps its ring. */ .entry-track:focus:not(:focus-visible) { outline: none; } .entry-clip { clip-path: inset(0 0 0 0%); transition: clip-path .08s linear; } .entry-clip img { width: 100%; height: auto; pointer-events: none; } .entry-rail { margin-top: 22px; height: 1px; background: rgba(17,17,17,.3); position: relative; } .entry-fill { position: absolute; left: 0; top: -0.5px; height: 2px; width: 0%; background: var(--ink); transition: width .08s linear; } .entry-word { font-size: 12px; letter-spacing: .5em; padding-left: .5em; color: var(--ink); animation: fadeIn 1.8s 1.1s both; } /* Without JS the slider cannot work — hide the ritual, show the page. */ html:not(.js) .entry { display: none; } /* Short viewports (landscape phones, half-height windows): shrink and re-anchor the wordmark and slider so they can never collide. */ @media (max-height: 560px) { .entry-mark { top: 6vh; width: clamp(200px, 30vh, 400px); } .entry-ui { bottom: 6vh; width: min(56vw, 300px); gap: 14px; } .entry-rail { margin-top: 14px; } } /* ---------- Product imagery (front/back split image) ---------- */ /* Individually centered 3:4 crops (split from the combined source so each view is exactly centered — never crop the combined image directly). */ .g-front, .g-back { background-color: var(--paper-soft); background-size: cover; background-position: center; background-repeat: no-repeat; } .g-front { background-image: url('/assets/img/crewneck-front.webp'); } .g-back { background-image: url('/assets/img/crewneck-back.webp'); } /* ---------- Shop card ---------- */ .pcard { display: block; text-decoration: none; color: var(--ink); } .pcard-media { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--paper-soft); } .pcard-zoom { position: absolute; inset: 0; transition: transform 1.2s cubic-bezier(.22,1,.36,1); } .pcard-zoom > div { position: absolute; inset: 0; } .pcard-back { opacity: 0; transition: opacity .6s ease; } .pcard:hover .pcard-zoom { transform: scale(1.035); } .pcard:hover .pcard-back { opacity: 1; } .pcard-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 18px; } .pcard-row h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.3; } .pcard-row span { font-size: 13px; color: var(--ink-soft); } .pcard-state { margin: 6px 0 0; font-size: 11px; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-faint); } /* ---------- Purchase module (product page; rendered by commerce.js) ---------- */ .size-grid { display: flex; flex-wrap: wrap; gap: 10px; } .size-btn { display: inline-block; min-width: 58px; text-align: center; font-size: 11px; letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none; color: var(--ink); background: transparent; border: 1px solid var(--ink); padding: 14px 16px; transition: background .4s, color .4s; } a.size-btn:hover { background: var(--ink); color: var(--paper); } .size-btn--out { color: var(--ink-faint); border-color: var(--hairline); text-decoration: line-through; cursor: not-allowed; } /* ---------- FAQ ---------- */ .faq-list { border-bottom: 1px solid var(--hairline); } .faq-list details { border-top: 1px solid var(--hairline); } .faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; cursor: pointer; font-size: 16px; color: var(--ink); } .faq-list summary .x { font-family: var(--font-display); font-size: 24px; line-height: 1; transition: transform .4s ease; } .faq-list details[open] summary .x { transform: rotate(45deg); } .faq-list details > p { margin: 0; padding: 0 0 26px; font-size: 15px; color: var(--ink-soft); max-width: 36em; } .faq-list details a { color: var(--ink); } /* ---------- Footer ---------- */ .site-foot { border-top: 1px solid var(--hairline); padding: clamp(64px, 10vh, 110px) var(--pad-x) 36px; } .foot-inner { max-width: var(--max-w); margin-inline: auto; } .foot-mark { text-align: center; margin-bottom: clamp(56px, 9vh, 90px); } .foot-mark img { width: min(520px, 72vw); height: auto; } .foot-row { border-top: 1px solid var(--hairline); padding-top: 28px; display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; align-items: baseline; } .foot-name { margin: 0; font-family: var(--font-display); font-size: 15px; letter-spacing: .35em; text-transform: uppercase; } .foot-links { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; margin: 0; padding: 0; } .foot-copy { margin: 0; font-size: 11px; letter-spacing: .05em; color: var(--ink-faint); } /* ---------- Spec section on narrow screens ---------- Below ~960px the two-column sticky/scroll-scrub layout stacks into one column, where a pinned image and dimmed text read as broken. Become a simple flow instead: no sticky, natural heights, fully visible specs. !important is required to beat the section's inline styles and the JS-written inline opacity. */ @media (max-width: 959px) { .spec-media-col { position: static !important; } .spec-text-col { min-height: 0 !important; justify-content: flex-start !important; gap: 44px; padding: 44px 0 0 !important; } html.js .spec-step { opacity: 1 !important; transform: none !important; } } /* ---------- Mobile refinements ---------- */ @media (max-width: 819px) { /* iOS Safari zooms the page when focusing inputs under 16px — keep fields at 16px on phones. */ .field { font-size: 16px; } /* Friendlier touch targets for the small caps links. */ .caps-link { padding: 12px 0; } .nav-links a { padding: 12px 0; } .foot-links { gap: 10px 28px; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .marquee-track, .scroll-cue span:last-child, .menu-nav a, .menu, .page, .entry-mark, .entry-track, .entry-word, .rise-l, .rise-el { animation: none; } html.js [data-reveal] { opacity: 1; transform: none; } html.js .spec-step { opacity: 1; transform: none; } }