/* Marble House microsite (site_type="marble"). Black, gold and warm stone. The client's own brand is a fine gold serif wordmark on near-black, so the whole system is built from three ideas: 1. Space. Luxury reads as room to breathe, so section padding is large and line lengths are short. 2. One accent. Gold is the only colour. Everything else is ink, stone or the photography itself. 3. Hairlines. A 1px gold rule does the work that a heavy border would do badly. Brand overrides: Microsite.primary_color drives --gold and Microsite.secondary_color drives --stone, injected on by base.html. MOBILE RULES carried over from the SmartArt passes, do not undo them: - Inputs are 16px under 1000px or iOS zooms the page on focus. - Every tap target is at least 44px. - A hover reveal needs a designed touch state, never a fallback. Card overlays that depend on :hover live inside @media (hover: hover). */ /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { --ink: #0b0a09; --ink-2: #131110; --ink-3: #1c1917; --ink-line: rgba(255, 255, 255, .12); --gold: #c9a227; --gold-lit: #e6c86e; --gold-deep: #9a7a17; --gold-soft: rgba(201, 162, 39, .16); --cream: #f7f3ec; --stone: #e8dfce; --stone-2: #d9cdb6; --sand: #efe8dc; --text: #1a1714; --text-soft: #5b544c; --text-dim: rgba(247, 243, 236, .7); --text-dimmer: rgba(247, 243, 236, .45); --serif: "Cormorant Garamond", "Playfair Display", Georgia, serif; --sans: "Jost", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --shell: 1240px; --shell-n: 900px; --pad-y: clamp(72px, 9vw, 140px); --gap: clamp(20px, 3vw, 40px); --ease: cubic-bezier(.22, .61, .36, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--cream); color: var(--text); font-family: var(--sans); font-size: 16px; font-weight: 300; line-height: 1.7; letter-spacing: .01em; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } .skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--gold); color: var(--ink); padding: 12px 20px; } .skip:focus { left: 12px; top: 12px; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .shell { width: min(100% - 44px, var(--shell)); margin-inline: auto; } .shell.narrow { width: min(100% - 44px, var(--shell-n)); } /* ── Type ────────────────────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; line-height: 1.1; letter-spacing: .005em; margin: 0; } .display { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 6.4vw, 5.2rem); line-height: 1.04; letter-spacing: -.01em; } .h-xl { font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.08; } .h-lg { font-size: clamp(1.7rem, 3.2vw, 2.6rem); } .h-md { font-size: clamp(1.35rem, 2.2vw, 1.8rem); } .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: .72rem; font-weight: 400; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin: 0 0 18px; } .eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .7; } .eyebrow.center { justify-content: center; } .eyebrow.center::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .7; } .lede { font-size: clamp(1.02rem, 1.4vw, 1.16rem); line-height: 1.85; color: var(--text-soft); max-width: 62ch; } .dark .lede, .band.dark .lede { color: var(--text-dim); } .prose p { margin: 0 0 1.15em; max-width: 68ch; } .prose p:last-child { margin-bottom: 0; } .prose strong { font-weight: 500; color: var(--gold-deep); } .dark .prose strong, .band.dark .prose strong { color: var(--gold-lit); } .gold { color: var(--gold); } /* A gold-to-champagne wash on a headline. Kept for hero type only: used everywhere it stops reading as special. */ .shimmer { background: linear-gradient(100deg, var(--gold-lit) 0%, #f3e3b6 30%, var(--gold) 62%, var(--gold-lit) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Diamond rule. The one ornament in the system. */ .rule { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 30px; } .rule::before, .rule::after { content: ""; height: 1px; width: clamp(40px, 12vw, 120px); background: linear-gradient(90deg, transparent, var(--gold)); } .rule::after { background: linear-gradient(90deg, var(--gold), transparent); } .rule i { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); flex: none; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn { --btn-fg: var(--ink); --btn-bg: var(--gold); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 15px 34px; border: 1px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); font-family: var(--sans); font-size: .78rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; position: relative; overflow: hidden; transition: color .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease); } /* The fill sweeps in from the left rather than cross-fading. */ .btn::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateX(-101%); transition: transform .5s var(--ease); z-index: 0; } .btn > * { position: relative; z-index: 1; } .btn span { position: relative; z-index: 1; } @media (hover: hover) { .btn:hover { color: var(--gold-lit); border-color: var(--ink); } .btn:hover::after { transform: translateX(0); } } .btn.ghost { --btn-bg: transparent; --btn-fg: var(--gold); border-color: var(--gold); } @media (hover: hover) { .btn.ghost:hover { color: var(--ink); border-color: var(--gold); } .btn.ghost::after { background: var(--gold); } } .btn.light { --btn-bg: transparent; --btn-fg: var(--ink); border-color: rgba(26, 23, 20, .35); } @media (hover: hover) { .btn.light:hover { color: var(--cream); border-color: var(--ink); } .btn.light::after { background: var(--ink); } } .btn.wide { width: 100%; } .btn.sm { min-height: 44px; padding: 11px 22px; font-size: .7rem; } /* Text link with a rule that grows. */ .link-arrow { display: inline-flex; align-items: center; gap: 10px; font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 500; padding: 6px 0; } .link-arrow::after { content: ""; width: 22px; height: 1px; background: currentColor; transition: width .4s var(--ease); } @media (hover: hover) { .link-arrow:hover::after { width: 40px; } } /* ── Header ──────────────────────────────────────────────────────────────── */ .site-head { position: fixed; inset: 0 0 auto 0; z-index: 60; transition: background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); border-bottom: 1px solid transparent; } .site-head .bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 92px; transition: min-height .4s var(--ease); position: relative; } /* The frosted background lives on a pseudo-element, NOT on .site-head itself. backdrop-filter makes an element a containing block for its position:fixed descendants, and the phone menu is a fixed child of this header. With the blur on .site-head, `inset: 0` on the open menu resolved against the 74px header instead of the viewport, so the menu was full screen at the top of a page and a clipped 134px strip as soon as you had scrolled. A pseudo-element has no descendants to trap, so the effect stays and the trap goes. Do not move backdrop-filter, transform, filter or will-change back onto .site-head. */ .site-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11, 10, 9, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transition: opacity .5s var(--ease); } /* Solid once the page has moved, or on any page without a full-bleed hero. */ .site-head.stuck::before, body:not(.has-hero) .site-head::before { opacity: 1; } .site-head.stuck, body:not(.has-hero) .site-head { border-bottom-color: var(--ink-line); } .site-head.stuck .bar { min-height: 74px; } .wordmark { display: inline-flex; align-items: center; min-height: 44px; } /* Their mark is a wordmark over a spaced "INTERIOR . CONCEPT . FINISHES" strapline, so the whole lockup is about 5:1. At 34px the strapline set at roughly 6px and was unreadable; 50px gives it about 9px, which is the point of having it. It shrinks with the bar once the page is scrolled. */ .wordmark img { height: 50px; width: auto; object-fit: contain; transition: height .4s var(--ease); } .site-head.stuck .wordmark img { height: 40px; } .wordmark .type { font-family: var(--serif); font-size: 1.5rem; font-weight: 300; letter-spacing: .3em; text-transform: uppercase; color: var(--cream); line-height: 1; } .wordmark .type b { font-weight: 300; color: var(--gold); } .nav-main { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); } /* Both belong to the full screen phone panel only. On a pointer device the real masthead is still visible above the nav, so a second wordmark inside it would just be a duplicate. */ .nav-brand, .nav-foot { display: none; } .nav-main > a, .navgroup > a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: .78rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); transition: color .3s var(--ease); } /* The link is a 44px tap target with the label centred in it, so `bottom: 22px` would put this rule exactly through the middle of the text. Anchor it near the foot of the box instead, where it reads as an underline. */ .nav-main > a::after, .navgroup > a::after { content: ""; position: absolute; left: 0; bottom: 9px; width: 0; height: 1px; background: var(--gold); transition: width .4s var(--ease); } @media (hover: hover) { .nav-main > a:hover, .navgroup > a:hover { color: var(--cream); } .nav-main > a:hover::after, .navgroup > a:hover::after { width: 100%; } } .nav-main > a[aria-current="page"], .navgroup.on > a { color: var(--gold); } .nav-main > a[aria-current="page"]::after, .navgroup.on > a::after { width: 100%; } /* The button is rendered twice, once above the links for the phone panel and once at the end of the bar for a pointer device, and one is hidden at each breakpoint. display:none takes the hidden copy out of the accessibility tree as well, so it is never announced twice, and the tab order matches the visual order in both layouts. */ .nav-cta { margin-left: 6px; } .nav-cta-top { display: none; } /* Nav dropdown: hover/focus panel on a pointer device, accordion in the drawer. `position: static` on the panel inside the drawer is what converts one into the other. */ .navgroup { position: relative; display: flex; align-items: center; gap: 4px; } .navgroup-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 44px; background: none; border: 0; cursor: pointer; color: var(--text-dim); padding: 0; } .navgroup-toggle .chev { width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .35s var(--ease); } .navgroup.open .navgroup-toggle .chev { transform: rotate(225deg) translate(-2px, -2px); } .navdrop { position: absolute; top: 100%; left: -18px; min-width: 268px; background: rgba(15, 13, 12, .98); backdrop-filter: blur(16px); border: 1px solid var(--ink-line); border-top: 2px solid var(--gold); padding: 12px 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; } .navdrop a { display: block; padding: 11px 24px; font-size: .82rem; letter-spacing: .06em; color: var(--text-dim); transition: color .25s, background .25s, padding-left .3s var(--ease); } .navdrop a small { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dimmer); margin-top: 2px; } @media (hover: hover) { .navdrop a:hover { color: var(--gold); background: rgba(201, 162, 39, .07); padding-left: 30px; } .navgroup:hover .navdrop, .navgroup:focus-within .navdrop { opacity: 1; visibility: visible; transform: translateY(0); } } .navdrop a.all { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--ink-line); color: var(--gold); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; } /* Header basket. Present on every page of a shop-enabled site; the count pip only appears once there is something in it, so an empty basket does not shout on the About page. */ .cart-btn { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; color: var(--text-dim); transition: color .3s var(--ease); } .cart-pip { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--gold); color: var(--ink); font-size: .62rem; font-weight: 600; line-height: 18px; text-align: center; transform: scale(0); transition: transform .32s var(--ease); } .cart-pip.on { transform: scale(1); } @media (hover: hover) { .cart-btn:hover { color: var(--gold); } } .burger { display: none; width: 46px; height: 46px; background: none; border: 0; cursor: pointer; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; padding: 0; } .burger span { display: block; height: 1px; background: var(--cream); transition: transform .4s var(--ease), opacity .3s, width .4s var(--ease); } .burger span:nth-child(1) { width: 26px; } .burger span:nth-child(2) { width: 18px; } .burger span:nth-child(3) { width: 26px; } body.nav-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); width: 26px; } body.nav-open .burger span:nth-child(2) { opacity: 0; } body.nav-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 26px; } /* ── Hero ────────────────────────────────────────────────────────────────── */ .hero { position: relative; min-height: 100svh; display: grid; align-items: center; background: var(--ink); overflow: hidden; isolation: isolate; } .hero.page { min-height: min(74svh, 660px); } .hero-media { position: absolute; inset: 0; z-index: -2; } .hero-media img { width: 100%; height: 100%; object-fit: cover; /* A very slow drift. Enough to feel alive, not enough to notice. */ animation: heroDrift 26s var(--ease) infinite alternate; } @keyframes heroDrift { from { transform: scale(1.04); } to { transform: scale(1.13); } } /* Three layers, because the client uploads the photograph and some of them are very bright. The vertical gradient anchors the header and the footer edge, the centred radial darkens directly behind the headline, and the vignette stops a pale corner pulling the eye off the type. Tested against the brightest image in their library (a white marble floor in daylight). */ .hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,10,9,.86) 0%, rgba(11,10,9,.42) 30%, rgba(11,10,9,.55) 66%, rgba(11,10,9,.93) 100%), radial-gradient(78% 52% at 50% 46%, rgba(11,10,9,.55) 0%, transparent 72%), radial-gradient(130% 90% at 50% 55%, transparent 34%, rgba(11,10,9,.62) 100%); } .hero-inner { padding: 150px 0 110px; text-align: center; } .hero .display { color: var(--cream); margin: 0 auto; max-width: 16ch; } .hero .display em { font-style: italic; } .hero-sub { margin: 28px auto 0; max-width: 58ch; color: var(--text-dim); font-size: clamp(1rem, 1.4vw, 1.14rem); line-height: 1.85; } .hero-actions { margin-top: 42px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .hero-scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-dimmer); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; min-height: 44px; } .hero-scroll i { display: block; width: 1px; height: 46px; background: linear-gradient(180deg, var(--gold), transparent); } /* Page hero (every page but home) */ .hero.page .hero-inner { padding: 170px 0 80px; } .hero.page .display { font-size: clamp(2.2rem, 5vw, 4rem); max-width: 20ch; } /* ── Bands ───────────────────────────────────────────────────────────────── */ .band { padding: var(--pad-y) 0; position: relative; } .band.tight { padding: clamp(48px, 6vw, 84px) 0; } .band.cream { background: var(--cream); } .band.sand { background: var(--sand); } .band.stone { background: linear-gradient(180deg, var(--stone) 0%, var(--sand) 100%); } .band.dark { background: var(--ink); color: var(--cream); } .band.dark h1, .band.dark h2, .band.dark h3 { color: var(--cream); } .band.ink2 { background: var(--ink-2); color: var(--cream); } .band.ink2 h2, .band.ink2 h3 { color: var(--cream); } /* A faint veined wash. Two long, low-contrast gradients: any more and it reads as a texture image rather than stone. */ .band.veined::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: linear-gradient(118deg, transparent 42%, rgba(201,162,39,.07) 47%, transparent 52%), linear-gradient(72deg, transparent 61%, rgba(201,162,39,.05) 66%, transparent 70%); } .band > .shell { position: relative; z-index: 1; } .band-head { max-width: 720px; margin: 0 0 clamp(38px, 5vw, 64px); } .band-head.center { margin-inline: auto; text-align: center; } .band-head p { margin: 20px 0 0; } /* ── Blocks ──────────────────────────────────────────────────────────────── */ /* intro */ .blk-intro { text-align: center; } .blk-intro .lede { margin-inline: auto; } /* split */ .blk-split .split { display: grid; gap: clamp(30px, 5vw, 78px); grid-template-columns: 1fr 1fr; align-items: center; } .blk-split.image-right .split > .media { order: 2; } .blk-split .media { position: relative; } .blk-split .media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } /* A gold frame offset behind the photograph. */ .blk-split .media::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--gold); z-index: -1; opacity: .55; } .blk-split.image-right .media::before { inset: 18px 18px -18px -18px; } .blk-split .copy h2 { margin-bottom: 22px; } /* feature */ .blk-feature { position: relative; min-height: min(78svh, 640px); display: grid; align-items: center; background: var(--ink); color: var(--cream); overflow: hidden; } .blk-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .blk-feature .scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,10,9,.9) 0%, rgba(11,10,9,.55) 55%, rgba(11,10,9,.3) 100%); } .blk-feature .copy { position: relative; padding: clamp(60px, 8vw, 110px) 0; max-width: 620px; } .blk-feature h2 { color: var(--cream); margin-bottom: 22px; } /* cards */ .card-row { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); } .mh-card { background: #fff; border: 1px solid rgba(26,23,20,.09); display: flex; flex-direction: column; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); } .band.dark .mh-card, .band.ink2 .mh-card { background: var(--ink-3); border-color: var(--ink-line); } .mh-card .thumb { overflow: hidden; aspect-ratio: 4 / 3; background: var(--stone); } .mh-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .mh-card .body { padding: 26px 26px 30px; flex: 1; display: flex; flex-direction: column; } .mh-card h3 { font-size: 1.4rem; margin-bottom: 12px; } .band.dark .mh-card h3 { color: var(--cream); } .mh-card p { margin: 0; color: var(--text-soft); font-size: .95rem; } .band.dark .mh-card p, .band.ink2 .mh-card p { color: var(--text-dim); } .mh-card .link-arrow { margin-top: auto; padding-top: 20px; } .mh-card .num { font-family: var(--serif); font-size: .95rem; color: var(--gold); letter-spacing: .2em; margin-bottom: 14px; display: block; } @media (hover: hover) { .mh-card:hover { transform: translateY(-6px); border-color: rgba(201,162,39,.5); box-shadow: 0 26px 60px -34px rgba(11,10,9,.5); } .mh-card:hover .thumb img { transform: scale(1.07); } } /* stats */ .stat-row { display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); text-align: center; } .stat b { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(2.8rem, 5.4vw, 4.2rem); line-height: 1; color: var(--gold); } .stat span { display: block; margin-top: 14px; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--text-soft); } .band.dark .stat span, .band.ink2 .stat span { color: var(--text-dim); } /* quote */ .blk-quote { text-align: center; } .blk-quote blockquote { margin: 0 auto; max-width: 22ch; font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 3.6vw, 2.8rem); line-height: 1.32; color: var(--cream); } .band.cream .blk-quote blockquote, .band.sand .blk-quote blockquote, .band.stone .blk-quote blockquote { color: var(--text); } .blk-quote blockquote { max-width: 26ch; } .blk-quote cite { display: block; margin-top: 30px; font-style: normal; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); } .stars { color: var(--gold); letter-spacing: .34em; font-size: .9rem; margin-bottom: 24px; } /* gallery */ .gal-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .gal-grid figure { margin: 0; position: relative; overflow: hidden; background: var(--ink-3); cursor: zoom-in; } .gal-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .9s var(--ease); } .gal-grid figcaption { position: absolute; inset: auto 0 0 0; padding: 34px 18px 14px; background: linear-gradient(180deg, transparent, rgba(11,10,9,.9)); color: var(--cream); font-size: .78rem; letter-spacing: .12em; } @media (hover: hover) { .gal-grid figure:hover img { transform: scale(1.06); } } /* cta */ .blk-cta { background: linear-gradient(120deg, var(--ink) 0%, var(--ink-3) 52%, var(--ink) 100%); color: var(--cream); text-align: center; position: relative; overflow: hidden; } .blk-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 120% at 50% 0%, rgba(201,162,39,.16), transparent 62%); } .blk-cta .shell { position: relative; } .blk-cta h2 { color: var(--cream); margin-bottom: 18px; } .blk-cta p { margin: 0 auto 34px; max-width: 58ch; color: var(--text-dim); } /* ── Services ────────────────────────────────────────────────────────────── */ /* auto-FIT is deliberate here, so each category band fills its width: two services sit as a pair, one becomes a feature tile. auto-fill was tried and left a large dead area to the right of every short category, which looked far worse than the varying tile size. */ .svc-grid { display: grid; gap: clamp(16px, 2.2vw, 26px); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } /* A lone tile in a band would otherwise be a very wide, very short letterbox. Give it the proportions of a feature rather than a stretched card. */ .svc-grid.solo .svc, .svc-grid.solo .svc .copy { min-height: 420px; } .svc { position: relative; display: block; overflow: hidden; background: var(--ink-3); min-height: 320px; border: 1px solid transparent; transition: border-color .5s var(--ease); } .svc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .6s var(--ease); filter: brightness(.66) saturate(.9); } .svc .veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 34%, rgba(11,10,9,.86) 100%); } .svc .copy { position: relative; z-index: 1; min-height: 320px; padding: 26px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--cream); } .svc .cat { font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } .svc h3 { font-size: 1.55rem; color: var(--cream); } .svc p { margin: 10px 0 0; font-size: .9rem; color: var(--text-dim); /* Two lines is a promise, not a description. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .svc .more { margin-top: 18px; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 8px; } .svc .more::after { content: ""; width: 20px; height: 1px; background: currentColor; transition: width .4s var(--ease); } @media (hover: hover) { .svc:hover { border-color: var(--gold); } .svc:hover img { transform: scale(1.08); filter: brightness(.5) saturate(1); } .svc:hover .more::after { width: 38px; } } /* Feature list with gold ticks */ .tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .tick-list li { display: flex; gap: 14px; align-items: flex-start; font-size: .97rem; color: var(--text-soft); } .band.dark .tick-list li, .band.ink2 .tick-list li { color: var(--text-dim); } .tick-list li::before { content: ""; flex: none; margin-top: 9px; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); } /* ── Projects ────────────────────────────────────────────────────────────── */ .chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 38px; } .chip { min-height: 44px; display: inline-flex; align-items: center; padding: 0 22px; border: 1px solid rgba(26,23,20,.2); background: none; cursor: pointer; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-soft); transition: all .35s var(--ease); } .chip.on { background: var(--ink); border-color: var(--ink); color: var(--gold); } @media (hover: hover) { .chip:hover { border-color: var(--gold); color: var(--gold-deep); } } .proj-grid { display: grid; gap: clamp(16px, 2.4vw, 30px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .proj { position: relative; display: block; overflow: hidden; background: var(--ink-3); } .proj .frame { overflow: hidden; aspect-ratio: 3 / 2; } .proj .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .proj .meta { padding: 24px 4px 6px; } .proj .cat { font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); } .proj h3 { font-size: 1.5rem; margin: 10px 0 6px; } .proj .where { font-size: .84rem; color: var(--text-soft); letter-spacing: .04em; } .band.dark .proj h3 { color: var(--cream); } .band.dark .proj .where { color: var(--text-dim); } @media (hover: hover) { .proj:hover .frame img { transform: scale(1.06); } } /* The featured tile spans two columns on a wide screen. */ @media (min-width: 900px) { .proj-grid .proj.wide { grid-column: span 2; } .proj-grid .proj.wide .frame { aspect-ratio: 21 / 9; } } /* Case study */ .case-hero { position: relative; background: var(--ink); } .case-hero > img { width: 100%; height: min(66svh, 620px); object-fit: cover; opacity: .78; } .case-hero .cap { position: absolute; inset: auto 0 0 0; padding: 0 0 clamp(34px, 5vw, 64px); background: linear-gradient(180deg, transparent, rgba(11,10,9,.94) 72%); } .case-hero h1 { color: var(--cream); max-width: 18ch; } .facts { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding: 34px 0; border-block: 1px solid rgba(26,23,20,.12); } .fact b { display: block; font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; font-weight: 500; } .fact span { font-family: var(--serif); font-size: 1.22rem; color: var(--text); } .band.dark .fact span { color: var(--cream); } .case-nav { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 34px; border-top: 1px solid rgba(26,23,20,.12); } .case-nav a { display: block; max-width: 46%; } .case-nav b { display: block; font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; font-weight: 500; } .case-nav span { font-family: var(--serif); font-size: 1.3rem; } .case-nav a.next { text-align: right; margin-left: auto; } /* ── Shop ────────────────────────────────────────────────────────────────── */ .shop-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 34px; } .basket-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; border: 1px solid rgba(26,23,20,.2); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text); flex: none; transition: border-color .35s var(--ease), color .35s var(--ease); } @media (hover: hover) { .basket-link:hover { border-color: var(--gold); color: var(--gold-deep); } } .cart-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: rgba(26,23,20,.1); color: var(--text-soft); font-size: .68rem; letter-spacing: 0; } .cart-count.on { background: var(--gold); color: var(--ink); font-weight: 500; } .pd-grid { display: grid; gap: clamp(16px, 2.2vw, 28px); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .pd-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid rgba(26,23,20,.09); transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); } .pd-card .frame { display: block; position: relative; overflow: hidden; aspect-ratio: 1; background: var(--stone); } .pd-card .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .pd-card .flag { position: absolute; top: 12px; left: 12px; background: var(--gold); color: var(--ink); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; padding: 5px 10px; font-weight: 500; } .pd-card .flag.out { background: var(--ink); color: var(--cream); } .pd-card .body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; } .pd-card .cat { font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 8px; } .pd-card h3 { font-size: 1.2rem; line-height: 1.25; } .pd-card h3 a { color: inherit; } .pd-card p { margin: 8px 0 0; font-size: .86rem; color: var(--text-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pd-card .foot { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .pr { font-family: var(--serif); font-size: 1.15rem; color: var(--text); } .pr b { font-weight: 500; } .pr s { color: var(--text-soft); opacity: .6; font-size: .9rem; margin-right: 6px; } .soldout { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-soft); } .btn.added { background: var(--ink); border-color: var(--ink); color: var(--gold-lit); } @media (hover: hover) { .pd-card:hover { transform: translateY(-5px); border-color: rgba(201,162,39,.5); box-shadow: 0 24px 56px -34px rgba(11,10,9,.42); } .pd-card:hover .frame img { transform: scale(1.06); } } /* Product detail. These pages have no hero, so the fixed header needs clearance the band would not otherwise give it. */ .pd-detail-band { padding-top: calc(var(--pad-y) + 60px); } .crumbs { display: flex; gap: 10px; align-items: center; margin-bottom: 26px; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-soft); } .crumbs a { color: var(--gold); } .pd-detail { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4.5vw, 70px); align-items: start; } .pd-media img { width: 100%; aspect-ratio: 1; object-fit: cover; } .pd-noimage { aspect-ratio: 1; display: grid; place-items: center; background: linear-gradient(140deg, var(--stone), var(--sand)); font-family: var(--serif); color: var(--gold); letter-spacing: .3em; text-transform: uppercase; } .pd-buy h1 { margin-bottom: 14px; } .pd-price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 26px 0; padding: 20px 0; border-block: 1px solid rgba(26,23,20,.14); font-family: var(--serif); font-size: 1.7rem; color: var(--text); } .pd-price .pr { font-size: inherit; } .pd-price b { font-weight: 500; } .pd-price .fmt { font-family: var(--sans); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-soft); } .pd-form label { display: block; font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 10px; } .pd-qty { display: flex; gap: 12px; align-items: stretch; } .pd-qty input { width: 86px; padding: 15px 14px; text-align: center; border: 1px solid rgba(26,23,20,.2); background: #fff; font: inherit; font-size: 15px; } .pd-qty .btn { flex: 1; } .pd-basket { margin: 16px 0 0; } .pd-note { margin: 0 0 22px; padding: 15px 18px; border-left: 2px solid var(--gold); background: var(--gold-soft); font-size: .9rem; } .pd-desc { margin-top: 30px; color: var(--text-soft); } .pd-more { margin-top: 24px; border-top: 1px solid rgba(26,23,20,.14); } .pd-more summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--serif); font-size: 1.1rem; } .pd-more summary::-webkit-details-marker { display: none; } .pd-more .plus { position: relative; width: 14px; height: 14px; flex: none; } .pd-more .plus::before, .pd-more .plus::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 1px; background: var(--gold); transition: transform .4s var(--ease); } .pd-more .plus::after { transform: rotate(90deg); } .pd-more[open] .plus::after { transform: rotate(0); } .pd-more .prose { padding-bottom: 22px; color: var(--text-soft); font-size: .95rem; } .pd-facts { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 16px; } .pd-facts li { display: grid; grid-template-columns: 110px 1fr; gap: 14px; font-size: .88rem; } .pd-facts b { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 500; padding-top: 3px; } .pd-facts span { color: var(--text-soft); } /* Basket */ .cart-row { display: grid; grid-template-columns: 88px 1fr auto auto 44px; gap: 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid rgba(26,23,20,.12); } .cart-row:first-child { border-top: 1px solid rgba(26,23,20,.12); } .cart-row .thumb { display: block; width: 88px; aspect-ratio: 1; background: var(--stone); overflow: hidden; } .cart-row .thumb img { width: 100%; height: 100%; object-fit: cover; } .cart-row .cat { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); } .cart-row h3 { font-size: 1.1rem; margin: 5px 0 4px; } .cart-row h3 a { color: inherit; } .cart-row .each { font-size: .8rem; color: var(--text-soft); } .cart-row .qty { display: flex; align-items: center; border: 1px solid rgba(26,23,20,.2); } .cart-row .qty button { width: 44px; height: 44px; background: none; border: 0; cursor: pointer; font-size: 1.1rem; color: var(--text-soft); } .cart-row .qty input { width: 48px; height: 44px; text-align: center; border: 0; border-inline: 1px solid rgba(26,23,20,.2); font: inherit; font-size: 15px; background: transparent; -moz-appearance: textfield; appearance: textfield; } .cart-row .qty input::-webkit-outer-spin-button, .cart-row .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cart-row .line { font-family: var(--serif); font-size: 1.15rem; min-width: 96px; text-align: right; } .cart-row .rm { width: 44px; height: 44px; background: none; border: 0; cursor: pointer; font-size: 1.3rem; color: var(--text-soft); } @media (hover: hover) { .cart-row .rm:hover { color: var(--gold-deep); } } .cart-summary { margin-top: 34px; } .cart-summary .row { display: flex; justify-content: space-between; align-items: baseline; padding: 20px 0; border-bottom: 1px solid rgba(26,23,20,.12); margin-bottom: 22px; } .cart-summary .row span { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--text-soft); } .cart-summary .row b { font-family: var(--serif); font-size: 1.7rem; font-weight: 500; } .cart-note { font-size: .84rem; color: var(--text-soft); line-height: 1.7; margin: 0 0 24px; } .cart-note a { color: var(--gold-deep); text-decoration: underline; } .cart-empty { padding: 40px 0; } /* Checkout */ .checkout-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; } .co-card { background: #fff; border: 1px solid rgba(26,23,20,.09); padding: clamp(22px, 3vw, 34px); margin-bottom: 20px; } .co-card > h2 { margin-bottom: 22px; } .co-side { position: sticky; top: 100px; } .co-lines { display: grid; gap: 12px; margin-bottom: 20px; } .co-line { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; font-size: .9rem; align-items: baseline; } .co-line .q { color: var(--gold); font-weight: 500; } .co-line .n { color: var(--text-soft); } .co-line .v { font-family: var(--serif); } .co-total { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; border-top: 1px solid rgba(26,23,20,.14); margin-bottom: 18px; } .co-total span { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-soft); } .co-total b { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; } @media (max-width: 900px) { .pd-detail { grid-template-columns: 1fr; } .checkout-grid { grid-template-columns: 1fr; } .co-side { position: static; } } @media (max-width: 620px) { /* The basket row goes two-up: picture and name on top, controls beneath, because five columns in 320px is unusable at any font size. The third column is `auto`, not a fixed 44px: it holds the remove button on the first row and the line total on the second, and "R12,500.00" pushed straight out of a 44px column and overflowed the page. */ .cart-row { grid-template-columns: 72px 1fr auto; grid-template-areas: "thumb name rm" "thumb qty line"; column-gap: 14px; row-gap: 12px; } .cart-row .thumb { grid-area: thumb; width: 72px; } .cart-row .grow { grid-area: name; } .cart-row .qty { grid-area: qty; justify-self: start; } .cart-row .line { grid-area: line; text-align: right; min-width: 0; align-self: center; } .cart-row .rm { grid-area: rm; justify-self: end; } .pd-detail-band { padding-top: calc(var(--pad-y) + 52px); } .shop-bar { flex-direction: column-reverse; align-items: stretch; } .basket-link { justify-content: center; } } /* ── Journal ─────────────────────────────────────────────────────────────── */ .jr-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 16px; } .jr-meta b { color: var(--gold); font-weight: 500; } /* The newest piece. Two columns on a wide screen, stacked on a phone. */ .jr-feature { display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; background: #fff; border: 1px solid rgba(26,23,20,.09); margin-bottom: clamp(20px, 3vw, 34px); transition: border-color .5s var(--ease), box-shadow .5s var(--ease); } .jr-feature .frame { overflow: hidden; background: var(--stone); min-height: 260px; } .jr-feature .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .jr-feature .copy { padding: clamp(28px, 3.6vw, 52px); display: flex; flex-direction: column; justify-content: center; } .jr-feature h2 { margin-bottom: 16px; } .jr-feature p { margin: 0 0 22px; color: var(--text-soft); max-width: 46ch; } @media (hover: hover) { .jr-feature:hover { border-color: rgba(201,162,39,.5); box-shadow: 0 26px 60px -34px rgba(11,10,9,.4); } .jr-feature:hover .frame img { transform: scale(1.05); } } .jr-grid { display: grid; gap: clamp(16px, 2.4vw, 30px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .jr-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(26,23,20,.09); transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); } .jr-card .frame { overflow: hidden; aspect-ratio: 3 / 2; background: var(--stone); } .jr-card .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .jr-card .copy { padding: 24px 26px 30px; flex: 1; } .jr-card .jr-meta { margin-bottom: 12px; } .jr-card h3 { font-size: 1.35rem; margin-bottom: 10px; } .jr-card p { margin: 0; font-size: .92rem; color: var(--text-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (hover: hover) { .jr-card:hover { transform: translateY(-6px); border-color: rgba(201,162,39,.5); box-shadow: 0 26px 60px -34px rgba(11,10,9,.4); } .jr-card:hover .frame img { transform: scale(1.06); } } /* An chip on the journal (server-side filtering) rather than the portfolio's