/* ========================================================================== Home-consistent restyle — brings Studio (About), Work, and Shop visually in line with the rebuilt homepage's editorial system (cream/gold/ink palette, Helvetica-only type, zero radius, zero shadow, solid hairlines instead of dashed dividers, shared nav bar) WITHOUT touching any of these pages' existing HTML structure/grid/section layout. How: style.css and editorial.css already read almost every color and font-family through a handful of custom properties (--cream, --paper, --navy, --navy-faint, --navy-soft, --ink, --ink-soft, --radius, --dash-hairline, --dash-soft, --font-editorial, --font-geo) rather than hardcoding values on each selector — editorial.css's own comments call this out as the established pattern. Redefining those properties here (loaded last) cascades the new look through every rule that already references them, with no changes to style.css/editorial.css themselves and no markup changes beyond the nav (see below). One deliberate exception, matching the homepage's own: .shop-item's hover-lift + drop-shadow product photography treatment is left alone. The homepage's build brief explicitly keeps this exact effect ("no shadows anywhere" except this one case) — same call applies here. ========================================================================== */ :root { --cream: #f3f3f0; --paper: #f7f7f5; --navy: #141412; --navy-faint: rgba(20, 20, 18, 0.15); --navy-soft: rgba(20, 20, 18, 0.45); --ink: #141412; --ink-soft: #8a8a84; --radius: 0; /* Solid hairlines, not dashed — the homepage dropped the dashed/ crosshair motif for plain 1px rules. Same variable, same consumers (.divider, .card__leader, .shop-item__shelf, etc.), new value. */ --dash-hairline: linear-gradient(var(--navy), var(--navy)); --dash-soft: linear-gradient(var(--smoke-gray), var(--smoke-gray)); /* Only new tokens actually needed beyond the remapped ones above. */ --smoke-gray: #d6d6d1; --font-editorial: 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-geo: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Microsoft YaHei itself is Windows-only; PingFang SC/Hiragino Sans GB cover macOS/iOS with the same humanist-sans look, and Noto Sans SC (loaded via each page's own ) is the last-resort net for everything else, matching home.html's own --font-zh exactly. */ /* Helvetica leads the stack so any Latin text mixed into an otherwise-Chinese string (a proper noun, "Suit & Ease", etc.) renders in the same font as the English version -- see home.html's own --font-zh for the full rationale. */ --font-zh: 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', sans-serif; } /* work.html's own stylesheet redeclares --font-editorial with higher selector specificity (body.work-editorial) than :root — match that specificity here, loaded after work-editorial.css, to win the cascade. */ body.work-editorial { --font-editorial: 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* Simplified Chinese mode — every selector on these pages already reads its font through var(--font-editorial) (editorial.css's own doing, on nearly every text-bearing selector at once), so overriding just that one custom property when .lang-zh is active cascades everywhere automatically -- no need to hunt down individual selectors the way home.html had to for its one hardcoded Times New Roman holdout (.caption, which here already goes through --font-editorial too). Declared after body.work-editorial above so it wins the specificity tie on work.html, where both classes can be present on at once. */ body.lang-zh { --font-editorial: var(--font-zh); } /* Negative letter-spacing is a Latin display-type technique that just cramps CJK glyphs together -- reset it on the headline-scale selectors that carry it (editorial.css's h1/h2/h3/.pull-quote). */ body.lang-zh h1, body.lang-zh .h1, body.lang-zh h2, body.lang-zh .h2, body.lang-zh h3, body.lang-zh .h3, body.lang-zh .pull-quote { letter-spacing: normal; } /* ------------------------------------------------------------------------- Zero-radius, zero-shadow — the homepage's flat aesthetic. Buttons/pills go from a 999px pill (editorial.css) to square; .btn's own border stays (it's a border, not a shadow). Excludes .shop-item__figure entirely. ------------------------------------------------------------------------- */ .btn, .pill, .card__frame { border-radius: 0; box-shadow: none; } .project__gallery-next, .lightbox__close, .lightbox__prev, .lightbox__next { border-radius: 0; } /* .mark/.list-marks bullets are a background-image referencing assets/mark-crosshair.svg, which has its navy stroke color (#2B3A6B) baked into the file itself — a plain custom-property remap can't reach into it the way it reaches every other color on the page, and editing the shared SVG file directly would recolor it on every page that still uses the old palette (index/contact/shop detail pages), not just these three. Swapping background-image for a mask lets the same file's shape be recolored with an ordinary CSS color instead. */ .mark, .list-marks li::before { background: var(--navy); -webkit-mask: url('../assets/mark-crosshair.svg') no-repeat center / contain; mask: url('../assets/mark-crosshair.svg') no-repeat center / contain; } /* ------------------------------------------------------------------------- Nav — identical bar to the homepage: left-aligned About/Work/Shop, centered wordmark, right-aligned Contact, no hamburger, links never hidden on mobile. Replaces .site-header/.logo/.nav-links/.nav-actions/ .nav-toggle visually (those rules stay in style.css, unused, for the pages that still use that markup — index/contact/shop detail pages). ------------------------------------------------------------------------- */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 26px clamp(20px, 4vw, 41px); background: transparent; color: var(--navy); font-family: var(--font-editorial); font-size: 16px; gap: clamp(10px, 2.5vw, 24px); } .site-nav__brand { grid-column: 2; justify-self: center; font-size: 16px; white-space: nowrap; color: inherit; } .site-nav__center { grid-column: 1; justify-self: start; display: flex; gap: 41px; } .site-nav__right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 26px; white-space: nowrap; } .lang-switch { display: flex; align-items: center; gap: 7px; } .lang-switch__option { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--ink-soft); cursor: pointer; white-space: nowrap; } .lang-switch__option.is-active { color: var(--navy); cursor: default; } .lang-switch__divider { color: var(--smoke-gray); } .site-nav a, .lang-switch__option { position: relative; padding-bottom: 3px; color: inherit; text-decoration: none; } .site-nav a::after, .lang-switch__option::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right 0.25s ease; } .site-nav a:hover::after, .site-nav a:focus-visible::after, .lang-switch__option:hover::after, .lang-switch__option:focus-visible::after, .lang-switch__option.is-active::after { right: 0; } @media (prefers-reduced-motion: reduce) { .site-nav a::after, .lang-switch__option::after { transition: none; } } @media (max-width: 640px) { .site-nav { font-size: 13px; gap: clamp(8px, 2vw, 16px); padding-block: 13px; } .site-nav__center { gap: clamp(10px, 3vw, 20px); } .site-nav__right { gap: clamp(8px, 2vw, 16px); } } @media (max-width: 400px) { .site-nav { font-size: 11px; } .site-nav__right { gap: 8px; } .lang-switch { gap: 4px; } } /* Pages using the new nav are fixed-positioned (like the homepage), so the page content needs top padding to clear it — .site-header used to occupy normal document flow and push content down on its own; .site-nav doesn't. Reuses each page's own first-section selector. */ .page-header { padding-top: 110px; } @media (max-width: 640px) { .page-header { padding-top: 84px; } } /* Same fixed-nav clearance as .page-header, for pages whose first element (the "Back to shop" link on each product detail page) isn't .page-header itself -- just a plain .container that previously relied on the old in-flow .site-header to push it down instead. */ .page-offset { padding-top: 110px; } @media (max-width: 640px) { .page-offset { padding-top: 84px; } } /* ------------------------------------------------------------------------- Shop — coming-soon mask. Blur folded into .shop-item__figure img's own filter (not a separate wrapper) so it survives style.css's :hover rule, which replaces the filter wholesale rather than adding to it; hover's lift/scale is switched off too, since "zoom in for a closer look" works against blurring the product on purpose. The badge is a sibling of the img, not a child, so the blur has no way to reach its text. ------------------------------------------------------------------------- */ .shop-item__figure { position: relative; } .shop-item--soon .shop-item__figure img { filter: blur(9px) drop-shadow(5px 8px 7px rgba(27, 27, 27, 0.20)) drop-shadow(14px 30px 26px rgba(27, 27, 27, 0.14)); } .shop-item--soon:hover .shop-item__figure img, .shop-item--soon:focus-visible .shop-item__figure img { transform: none; filter: blur(9px) drop-shadow(5px 8px 7px rgba(27, 27, 27, 0.20)) drop-shadow(14px 30px 26px rgba(27, 27, 27, 0.14)); } .coming-soon { position: absolute; /* .shop-item__figure's padding is 1.5rem top / 0 bottom, so the img's own vertical center sits 12px (half that) below the figure's geometric center, consistently regardless of each image's own height — centering on the figure's midpoint alone left the badge sitting visibly high above shorter/wider product shots. */ top: calc(50% + 12px); left: 50%; transform: translate(-50%, -50%); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--navy); background: var(--cream); border: 1px solid var(--navy); padding: 0.35rem 0.75rem; pointer-events: none; } /* ------------------------------------------------------------------------- Contact form — replaces the old mailto CTA on contact.html so the studio's address never sits in the markup (submission goes through Formspree; see js/contact-form.js). Hairline underlines instead of boxed inputs, no radius/shadow, same type stack as the rest of the page (body/p/label already route through --font-editorial). ------------------------------------------------------------------------- */ .contact-form { display: flex; flex-direction: column; gap: 1.75rem; max-width: 46ch; margin-top: 0.25rem; } .contact-form[hidden] { display: none; } .contact-form__field { display: flex; flex-direction: column; gap: 0.4rem; } .contact-form__field label { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); } .contact-form__field input, .contact-form__field textarea { width: 100%; border: 0; border-bottom: 1px solid var(--navy-faint); border-radius: 0; background: transparent; padding: 0.5rem 0; font-family: inherit; font-weight: 400; font-size: 1rem; color: var(--ink); resize: vertical; transition: border-color 0.18s ease; } .contact-form__field textarea { min-height: 7rem; } .contact-form__field input:focus, .contact-form__field textarea:focus { outline: none; border-bottom-color: var(--navy); } .contact-form__field input::placeholder, .contact-form__field textarea::placeholder { color: var(--ink-soft); } .contact-form__error { display: none; font-size: 0.8rem; color: var(--navy); } .contact-form__field.is-invalid input, .contact-form__field.is-invalid textarea { border-bottom-color: var(--navy); } .contact-form__field.is-invalid .contact-form__error { display: block; } .contact-form__submit { align-self: flex-start; margin-top: 0.25rem; } .contact-form__submit:disabled { opacity: 0.5; cursor: default; } .contact-form__status { font-size: 0.875rem; color: var(--ink-soft); } .contact-form__confirmation { font-size: 1.2rem; max-width: 46ch; }