/* The Watchmaker's Atelier: sub-page styles (projects/ and shop/). Loaded after atelier.css. Sub-pages are cream from the top -- -- so the nav takes its over-cream treatment and the logo mask picks up the dark brown. */ body.page { background: var(--ivory); color: var(--ivory-ink); } body.page .eyebrow { color: var(--brown-2); } body.page .nav { color: var(--ivory-ink); } /* ---------------------------------------------------------------- page head */ .page-head { padding: calc(76px + 9vh) 0 5vh; } .page-head h1 { font-size: clamp(40px, 5.2vw, 76px); line-height: 1.04; margin: 16px 0 22px; max-width: 18ch; } .page-head .lede { max-width: 38rem; color: var(--ivory-muted); } .page-head__aside { margin-top: 26px; color: var(--brown); } /* filter chips (projects): one row per axis of the chatify gallery, built by js/projects.js */ .filters { display: grid; gap: 12px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--ivory-line); } .filters__row { display: flex; align-items: flex-start; gap: 8px 18px; } .filters__label { flex: none; width: 7.2rem; padding-top: 12px; font: 500 10.5px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ivory-muted); } .filters__chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; } .chip { padding: 11px 16px; border: 1px solid var(--ivory-line); border-radius: 0; background: transparent; color: var(--brown-2); font: 500 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, border-color .2s, opacity .2s; } .chip:hover { border-color: var(--brown-2); color: var(--brown); } .chip.is-active { background: var(--brown); border-color: var(--brown); color: var(--ivory); } .chip:disabled { opacity: .36; cursor: default; } .chip:disabled:hover { border-color: var(--ivory-line); color: var(--brown-2); } .chip__n { margin-left: 9px; font-size: 10px; letter-spacing: .04em; opacity: .62; } [data-type][hidden], .sect[hidden], [data-feed] [hidden] { display: none !important; } /* ---------------------------------------------------------------- tags + job sheet */ .tag { display: inline-flex; align-items: flex-start; gap: 8px; font: 500 11px/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brown-2); } .tag::before { content: ''; width: 6px; height: 6px; margin-top: calc(.8em - 3px); border-radius: 50%; background: var(--brown-2); flex: none; } /* centred on the first line when a tag wraps */ .sheet { margin: 26px 0 0; display: grid; border-top: 1px solid var(--ivory-line); } .sheet div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--ivory-line); } .sheet dt { font: 500 11px/1.7 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ivory-muted); } .sheet dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ivory-ink); } /* ---------------------------------------------------------------- case studies (projects) */ .cases { display: grid; gap: clamp(64px, 10vh, 120px); } .case { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 80px); align-items: center; } .case:nth-child(even) > .case__photos { order: 1; } /* photos swap sides down the page */ .case__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .case h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; margin: 14px 0 18px; } .case__story { display: grid; gap: 12px; font-size: 16px; } /* card grid */ .projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; } .project { border: 1px solid var(--ivory-line); border-radius: 4px; background: rgba(255, 255, 255, .5); overflow: hidden; } .project .photo { border-radius: 0; --ar: 4 / 3; } .project__body { padding: 22px 22px 20px; } .project h3 { font-size: 20px; line-height: 1.2; margin: 12px 0 10px; } .project p { font-size: 14.5px; } .project__more { margin-top: 16px; border-top: 1px solid var(--ivory-line); } .project__more summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px 0 4px; font: 500 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brown); } .project__more summary::-webkit-details-marker { display: none; } .project__more summary::after { content: '+'; font: 300 20px/1 var(--sans); color: var(--brown-2); transition: transform .3s var(--ease); } .project__more[open] summary::after { transform: rotate(45deg); } .project__more .sheet { margin-top: 8px; border-top: 0; } .project__more .sheet div { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; padding: 9px 0; } .project__more .sheet div:last-child { border-bottom: 0; } .project__more .sheet dd { font-size: 14px; } /* ---------------------------------------------------------------- projects from the chatify feed Cards share a row height and pin the job sheet to the bottom. A grid where no project has photos stays text-first; once any card has one (.has-media) every card gets a frame -- the photo, a swipe strip for several, or a dial plate carrying the brand -- so the rows keep lining up. */ .page-head + .sect, .page-head + .sect[hidden] + .sect { padding-top: 8vh; } .page-head + .sect[hidden] + .sect { border-top: 0; } /* no featured row: the chips' rule is the only line */ .projects--feed { align-items: stretch; } .projects--feed .project { display: flex; flex-direction: column; } .projects--feed .project__body { flex: 1; display: flex; flex-direction: column; } .project__story { display: grid; gap: 10px; margin-bottom: 22px; } .project__story p, .case__story p { white-space: pre-line; } .sheet--card { margin-top: auto; } .sheet--card div { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; padding: 9px 0; } .sheet--card div:last-child { border-bottom: 0; padding-bottom: 0; } .sheet--card dd { font-size: 14px; } .project__links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; color: var(--brown); } .case__photos--one { grid-template-columns: 1fr; } .photo--feed.is-empty::before, .photo--feed.is-empty::after { content: none; } /* loading, not a slot to fill */ .plate { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: var(--ar, 4 / 3); border-radius: 4px; background: var(--ivory-2); color: var(--brown-2); } .plate::before { /* a dial ring with twelve hour marks */ content: ''; position: absolute; width: min(62%, 15rem); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(80, 34, 0, .16); background: repeating-conic-gradient(from -.7deg, rgba(80, 34, 0, .3) 0 1.4deg, transparent 1.4deg 30deg); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 13px), #000 calc(100% - 12px)); mask: radial-gradient(closest-side, transparent calc(100% - 13px), #000 calc(100% - 12px)); } .plate__name { position: relative; max-width: min(46%, 11rem); text-align: center; font: italic 500 clamp(20px, 1.9vw, 27px)/1.15 var(--serif); color: var(--brown-2); } .strip { position: relative; overflow: hidden; aspect-ratio: var(--ar, 4 / 3); border-radius: 4px; background: var(--ivory-2); } .strip__track { position: absolute; inset: 0; display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; } .strip__track::-webkit-scrollbar { display: none; } .strip__track > .photo { flex: 0 0 100%; aspect-ratio: auto; height: 100%; border-radius: 0; scroll-snap-align: start; } .strip__btn { position: absolute; top: 50%; width: 38px; height: 38px; margin-top: -19px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(249, 247, 235, .92); color: var(--brown); font: 400 16px/1 var(--sans); cursor: pointer; opacity: 0; transition: opacity .2s; } .strip__btn--prev { left: 10px; } .strip__btn--next { right: 10px; } .strip:hover .strip__btn, .strip__btn:focus-visible { opacity: 1; } .strip .strip__btn:disabled { visibility: hidden; } /* no arrow past the first or last photo */ .strip__count { position: absolute; right: 10px; bottom: 10px; padding: 5px 8px; border-radius: 2px; pointer-events: none; background: rgba(21, 12, 6, .55); color: var(--ivory); font: 500 10.5px/1 var(--sans); letter-spacing: .12em; } .project .plate, .project .strip { border-radius: 0; } /* a Before | After pair (chatify's photo labels): two halves of one frame with a hairline between, standing alone or as one slide of a strip. */ .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; overflow: hidden; aspect-ratio: var(--ar, 4 / 3); border-radius: 4px; background: var(--ivory); } .pair > .photo { aspect-ratio: auto; height: 100%; border-radius: 0; } .strip__track > .pair { flex: 0 0 100%; height: 100%; aspect-ratio: auto; border-radius: 0; scroll-snap-align: start; } .project .pair { border-radius: 0; } .project--skeleton .project__body { display: grid; gap: 12px; } .sk { display: block; height: 11px; border-radius: 2px; background: rgba(80, 34, 0, .08); animation: sk-pulse 1.6s ease-in-out infinite; } .sk--tag { width: 38%; height: 9px; } .sk--title { width: 72%; height: 20px; margin: 6px 0 8px; } .sk--short { width: 54%; } @keyframes sk-pulse { 50% { opacity: .45; } } .feed-note { max-width: 36rem; font-size: 16px; color: var(--ivory-muted); } .feed-note .btn { margin-top: 20px; } .link-btn { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--brown); text-decoration: underline; text-underline-offset: 3px; } @media (hover: none) { .strip__btn { display: none; } } @media (prefers-reduced-motion: reduce) { .sk { animation: none; } } /* ---------------------------------------------------------------- shared call-to-action band */ .sect--cta .two { align-items: center; } .sect--cta .contact__cta { margin-top: 0; justify-content: flex-end; } /* ---------------------------------------------------------------- responsive */ @media (max-width: 980px) { .case { grid-template-columns: 1fr; } .case:nth-child(even) > .case__photos { order: 0; } .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sect--cta .contact__cta { justify-content: flex-start; } } @media (max-width: 860px) { .page-head { padding-top: calc(64px + 7vh); } } @media (max-width: 640px) { .projects { grid-template-columns: 1fr; } .sheet div, .project__more .sheet div, .sheet--card div { grid-template-columns: 1fr; gap: 3px; } .chip { padding: 13px 16px; } /* thumb-sized targets */ .project__more summary { padding: 16px 0 8px; } /* each filter row: label on top, chips in one line that swipes sideways out to the screen edge */ .filters__row { display: grid; gap: 8px; } .filters__label { padding-top: 0; } .filters__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4vw; padding-inline: 4vw; } .filters__chips::-webkit-scrollbar { display: none; } } /* ---------------------------------------------------------------- shop (shop/, drawn from the chatify catalog by js/shop.js) Image-led cards: a square frame -- the item's photo, or the projects page's .plate dial carrying its name -- then the name, a clamped description, and price + availability over a rule. The whole piece opens in