, so clipping here cannot detach them from the viewport the way body-level overflow does on mobile. */ main { overflow-x: clip; } /* footer: the email address is a long unbreakable token; give it room to wrap and drop to two columns before it can push the page wider than the screen */ /* two columns on tablets only: phones keep the single column set earlier */ @media (min-width: 701px) and (max-width: 980px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } } .site-footer__contact a, .site-footer__col a { overflow-wrap: anywhere; } /* ================================================================== Short screens (iPhone SE and similar). The header is a fixed overlay and the hero content is bottom-aligned, so on a short viewport the content rides up underneath the logo. Reserve the header's height as top padding, and ease the type down so it still fits on one screen. ================================================================== */ .v3 .hero__content { padding-top: 218px; } @media (max-width: 980px) { .v3 .hero__content { padding-top: 190px; } } @media (max-width: 700px) and (max-height: 720px) { .v3 .hero__title { font-size: 2.05rem; } .v3 .hero__eyebrow { font-size: .56rem; margin-bottom: .9rem; } .v3 .hero__content { padding-top: 178px; padding-bottom: 2.2rem; } .v3 .hero__ctas { gap: .65rem; } .v3 .btn { padding: .85rem 1.6rem; } } /* ================================================================== Collections, layout two: large photography with an overlapping card, alternating sides. overflow-x is clipped on the section itself so the slide-in can start beyond the edge without ever widening the page. ================================================================== */ .showcase { background: var(--cream-deep); overflow-x: clip; } .showcase__row { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; margin-top: clamp(2.5rem, 5vw, 4.5rem); } .showcase__row:first-of-type { margin-top: 0; } .showcase__media { grid-row: 1; grid-column: 1 / 9; aspect-ratio: 3 / 2; } .showcase__card { grid-row: 1; grid-column: 8 / 13; z-index: 2; background: var(--paper); padding: clamp(1.8rem, 3vw, 2.9rem); border: 1px solid var(--gold-pale); box-shadow: 0 24px 60px rgba(43, 40, 34, .1); } .showcase__row--flip .showcase__media { grid-column: 5 / 13; } .showcase__row--flip .showcase__card { grid-column: 1 / 6; } .showcase__label { font-size: .72rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: .9rem; display: flex; align-items: center; gap: .8em; } .showcase__label::after { content: ''; flex: 1; height: 1px; background: var(--gold-pale); } .showcase__title { font-size: clamp(1.5rem, 2.2vw, 2rem); margin-bottom: .7rem; } .showcase__text { color: var(--ink-soft); font-size: 1rem; line-height: 1.75; } .showcase__meta { margin: 1.1rem 0 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--gold-pale); font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); } @media (max-width: 900px) { .showcase__row, .showcase__row--flip { display: block; } .showcase__media, .showcase__row--flip .showcase__media { aspect-ratio: 4 / 3; } .showcase__card, .showcase__row--flip .showcase__card { width: calc(100% - 2.2rem); margin: -3.2rem auto 0; position: relative; } } @media (prefers-reduced-motion: reduce) { .showcase__media, .showcase__card { transition: none; } } /* wider frame for this section so the photography reads large, without any 100vw maths or negative margins that could reintroduce overflow */ .showcase .container { max-width: 1520px; } /* ================================================================== Inner pages: solid header (no hero photograph behind it) + legal page layout. The bar keeps its full lockup and never condenses, so its height is fixed and nothing reflows as you scroll. ================================================================== */ .v3.h3-solid .site-header3 { position: sticky; top: 0; z-index: 130; background: var(--charcoal); box-shadow: 0 1px 0 rgba(188, 142, 74, .3); } .v3.h3-solid .site-header3::after { display: none; } /* base first, THEN the narrow override: same specificity, so whichever comes last wins. The lockup width is a custom property, so it has to be set too or the image overflows a smaller brand box. */ .v3.h3-solid { --lockup-w3: 215px; } .v3.h3-solid .hdr3__brand { width: 215px; height: 129px; } .v3.h3-solid .hdr3__inner { height: 150px; } @media (max-width: 980px) { .v3.h3-solid { --lockup-w3: 178px; } .v3.h3-solid .hdr3__brand { width: 178px; height: 107px; } .v3.h3-solid .hdr3__inner { height: 124px; } } /* ---------- legal pages ---------- */ .legal { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 6.5rem); } /* full container width, split into a sticky contents rail and the prose. The prose is capped only because legal copy at 1280px runs past 150 characters a line, which is genuinely unreadable. */ .legal__inner { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0 clamp(2.5rem, 5vw, 5rem); align-items: start; } .legal__head { grid-column: 1 / -1; } .legal__body { min-width: 0; } .legal__head { padding-bottom: clamp(1.6rem, 3vw, 2.4rem); border-bottom: 1px solid var(--gold-pale); } .legal h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); } .legal__intro { margin-top: 1.2rem; font-size: clamp(1.05rem, 1.4vw, 1.16rem); line-height: 1.8; color: var(--ink-soft); } .legal__updated { margin-top: 1.4rem; font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-deep); } .legal__toc { position: sticky; top: 178px; margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.5rem, 2.6vw, 2.2rem); background: var(--cream-deep); border-left: 2px solid var(--gold); } .legal__toc-title { font-size: .72rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: .9rem; } .legal__toc ul { display: grid; gap: .4rem; } .legal__toc a { font-size: .96rem; color: var(--ink); border-bottom: 1px solid transparent; transition: color .3s ease, border-color .3s ease; } .legal__toc a:hover { color: var(--gold-deep); border-color: var(--gold-pale); } .legal__section { margin-top: clamp(2.4rem, 4.5vw, 3.6rem); scroll-margin-top: 170px; } .legal__body > .legal__section:first-child { margin-top: clamp(2rem, 4vw, 3rem); } .legal__section h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); padding-bottom: .7rem; border-bottom: 1px solid var(--gold-pale); margin-bottom: 1.2rem; } .legal__section h3 { font-size: 1.18rem; margin-top: 1.7rem; margin-bottom: .5rem; color: var(--charcoal); } .legal__section p { margin-bottom: 1rem; color: var(--ink-soft); line-height: 1.8; } .legal__section p:last-child { margin-bottom: 0; } .legal__section a:not(.link-arrow) { color: var(--gold-deep); border-bottom: 1px solid var(--gold-pale); transition: border-color .3s ease; } .legal__section a:not(.link-arrow):hover { border-color: var(--gold-deep); } .legal__list { margin: 0 0 1rem; } .legal__list li { position: relative; padding-left: 1.5rem; margin-bottom: .55rem; color: var(--ink-soft); line-height: 1.75; } .legal__list li::before { content: ''; position: absolute; left: .15rem; top: .72em; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); } .legal__table-wrap { overflow-x: auto; margin-bottom: 1.2rem; } .legal__table { width: 100%; border-collapse: collapse; min-width: 460px; } .legal__table th, .legal__table td { text-align: left; padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--gold-pale); vertical-align: top; font-size: .97rem; line-height: 1.65; } .legal__table th { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); } .legal__table td { color: var(--ink-soft); } .legal__note { margin-top: 1.4rem; padding: 1.1rem 1.3rem; background: var(--cream-deep); border-left: 2px solid var(--gold); color: var(--ink) !important; } .legal__contact { display: flex; flex-wrap: wrap; gap: 2.4rem; margin-top: 1.4rem; } .legal__contact-item { display: block; } .legal__contact-label { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: .3rem; } .legal__contact-value { font-family: var(--font-display); font-size: 1.28rem; color: var(--charcoal); border-bottom: 1px solid var(--gold-pale); padding-bottom: 2px; transition: border-color .3s ease, color .3s ease; } .legal__contact-item:hover .legal__contact-value { color: var(--gold-deep); border-color: var(--gold-deep); } .legal__back { margin-top: 2.4rem; } @media (max-width: 900px) { .legal__inner { grid-template-columns: 1fr; } .legal__toc { position: static; } .legal__toc ul { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .35rem 2rem; } } /* the footer legal link sits on its own line once the bar wraps */ @media (max-width: 700px) { .site-footer__legal { display: block; margin-top: .3rem; } } /* Tablet-to-laptop gap: the full lockup plus six nav items plus the button do not fit between about 980px and 1260px. Drop the button (the menu and the Contact link both still reach it) and tighten the nav. */ @media (max-width: 1260px) { .hdr3__btn { display: none; } .hdr3__nav a { font-size: .72rem; letter-spacing: .11em; } .hdr3__nav ul { gap: 1rem; } } /* ---------- footer: social icons + legal entity ---------- */ .social { display: flex; gap: .7rem; margin-top: 1.4rem; } .social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(188, 142, 74, .38); color: #b3aea4; transition: color .3s ease, border-color .3s ease, background-color .3s ease; } .social svg { width: 17px; height: 17px; display: block; } .social a:hover { color: #221c12; background: var(--gold); border-color: var(--gold); } .site-footer__entity { padding-bottom: 1.5rem; margin-top: -.3rem; font-size: .74rem; line-height: 1.7; color: #6f6a61; max-width: 92ch; } /* ================================================================== Review slideshow. One quote at a time, kept in the speech-mark style the client already liked. Quotes are stacked and cross-faded rather than slid, so the section height never jumps between a short quote and a long one. ================================================================== */ .testimonial__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); } .testimonial__head .eyebrow { justify-content: center; } .quotes { max-width: 900px; margin-inline: auto; } .quotes__viewport { position: relative; display: grid; } .quote { grid-area: 1 / 1; text-align: center; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease, visibility 0s .5s; } .quote.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease, transform .5s ease, visibility 0s; } .quote blockquote p { font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 1.85rem); line-height: 1.55; color: var(--charcoal); text-wrap: pretty; } .quote figcaption { margin-top: 1.6rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; } .quote__who { font-size: .74rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); } .quote__stars { color: var(--gold); letter-spacing: .3em; font-size: .95rem; } .quotes__controls { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: clamp(1.8rem, 3vw, 2.6rem); } .quotes__arrow { width: 42px; height: 42px; border: 1px solid var(--gold-pale); background: none; cursor: pointer; position: relative; transition: border-color .3s ease, background-color .3s ease; } .quotes__arrow::after { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-top: 1px solid var(--gold-deep); border-right: 1px solid var(--gold-deep); transition: border-color .3s ease; } .quotes__arrow--next::after { transform: translate(-65%, -50%) rotate(45deg); } .quotes__arrow--prev::after { transform: translate(-35%, -50%) rotate(-135deg); } .quotes__arrow:hover { border-color: var(--gold); background: var(--cream-deep); } .quotes__dots { display: flex; gap: .6rem; } .quotes__dot { width: 8px; height: 8px; padding: 0; border: 1px solid var(--gold-deep); background: none; transform: rotate(45deg); cursor: pointer; transition: background-color .3s ease; } .quotes__dot.is-active { background: var(--gold); } .quotes__source { text-align: center; margin-top: clamp(1.6rem, 2.6vw, 2.2rem); } @media (prefers-reduced-motion: reduce) { .quote { transition: opacity .01s, visibility 0s; transform: none; } } /* ================================================================== Inner page heroes (About, Contact). Shorter than the homepage hero because there is no scroll cue and no CTA pair to fit underneath. ================================================================== */ .hero--page { min-height: max(520px, 74vh); } .hero--short { min-height: max(440px, 58vh); } .v3 .hero--page .hero__content { padding-bottom: clamp(3rem, 6vh, 5rem); } .hero--page .hero__title { margin-bottom: 0; } /* ---------- page intro ---------- The script line gets the full container so it stays on one line: the longest of them measures 822px against 1184px of container at desktop, and the vw term in the clamp shrinks it in step with narrower viewports. Underneath, the lead and the at-a-glance list share the row so neither is stranded. */ /* The at-a-glance list sits beside the script heading, not beside the body copy, so its first rule lines up with the top of the heading. That means every script line has to fit the 7fr column on one line: the longest measures 636px against 707px of column at desktop. */ .about__intro { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1.8rem, 5vw, 4.5rem); align-items: start; } .about__lead { margin-top: clamp(1.5rem, 2.6vw, 2.2rem); font-size: clamp(1.04rem, 1.3vw, 1.14rem); line-height: 1.85; color: var(--ink-soft); } .about__lead--next { margin-top: 1.1rem; } .intro__facts { list-style: none; padding: 0; /* drops the top rule to roughly the cap height of the script line beside it */ margin: .85rem 0 0; border-top: 1px solid var(--gold-pale); } /* flex rather than an inline ::before, so a line that wraps keeps its text aligned under the first line instead of running back under the rule */ .intro__facts li { display: flex; gap: .8rem; padding: .82rem 0; border-bottom: 1px solid var(--gold-pale); font-size: .93rem; line-height: 1.55; color: var(--ink-soft); } .intro__facts li::before { content: ''; flex: 0 0 16px; height: 1px; margin-top: .72em; background: var(--gold); } @media (max-width: 860px) { .about__intro { grid-template-columns: 1fr; } .intro__facts { margin-top: 1.9rem; } } .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1.6rem, 3vw, 2.6rem); margin-top: clamp(2.4rem, 4vw, 3.4rem); } .pillar { padding-top: 1.4rem; border-top: 1px solid var(--gold-pale); } .pillar__num { font-family: var(--font-display); font-size: 1.28rem; color: var(--charcoal); margin-bottom: .6rem; } .pillar__text { color: var(--ink-soft); font-size: .98rem; line-height: 1.75; } /* ---------- contact ---------- */ .contact__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; } .contact__head { margin-bottom: clamp(1.6rem, 3vw, 2.2rem); } .contact__lead { margin-top: 1rem; color: var(--ink-soft); max-width: 60ch; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.4rem; } .form__field { margin-bottom: 1.3rem; } .form label { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); margin-bottom: .5rem; } .form .req { color: var(--gold); font-size: .6em; vertical-align: middle; margin-left: .2em; } .form input, .form select, .form textarea { width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--gold-pale); padding: .9rem 1rem; transition: border-color .3s ease, box-shadow .3s ease; } .form textarea { resize: vertical; min-height: 150px; line-height: 1.7; } .form select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--gold-deep) 50%), linear-gradient(135deg, var(--gold-deep) 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.6rem; } .form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(188, 142, 74, .15); } .form__field.is-invalid input, .form__field.is-invalid select, .form__field.is-invalid textarea { border-color: #a4442f; background: #fdf6f4; } .form__err { margin-top: .45rem; font-size: .86rem; color: #a4442f; } .form__privacy { margin-top: 1.2rem; font-size: .86rem; color: var(--ink-soft); } .form__privacy a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-pale); } /* honeypot: off-screen rather than display:none, which some bots detect */ .form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-alert { margin-bottom: 1.6rem; padding: 1rem 1.2rem; background: #fdf6f4; border-left: 2px solid #a4442f; color: #7c3323; font-size: .95rem; } .form-thanks { padding: clamp(1.8rem, 3vw, 2.6rem) 0; } .form-thanks h2 { margin-bottom: .9rem; } .form-thanks p { color: var(--ink-soft); margin-bottom: .9rem; max-width: 56ch; } .form-thanks a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-pale); } .form-thanks__next a { border: 0; } .script--sent { margin-bottom: .6rem; } .contact__aside { display: grid; gap: 1.2rem; } .contact__card { padding: clamp(1.5rem, 2.6vw, 2rem); background: var(--cream-deep); border-left: 2px solid var(--gold); } .contact__card--quiet { background: none; border-left-color: var(--gold-pale); } .contact__card-label { font-size: .7rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: .9rem; } .contact__big { display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 1.95rem); color: var(--charcoal); transition: color .3s ease; } .contact__big:hover { color: var(--gold-deep); } .contact__small { display: block; margin-top: .5rem; color: var(--ink-soft); border-bottom: 1px solid var(--gold-pale); word-break: break-word; } .contact__note { margin-top: 1rem; font-size: .88rem; color: var(--ink-soft); } .contact__steps { counter-reset: step; list-style: none; } .contact__steps li { counter-increment: step; position: relative; padding-left: 2rem; margin-bottom: .7rem; color: var(--ink-soft); font-size: .95rem; } .contact__steps li::before { content: counter(step); position: absolute; left: 0; top: 0; font-family: var(--font-display); color: var(--gold-deep); } .social--light a { border-color: var(--gold-pale); color: var(--ink-soft); } .social--light a:hover { color: #221c12; background: var(--gold); border-color: var(--gold); } /* ---------- service area map ---------- */ .map-wrap { margin-top: clamp(2rem, 3.5vw, 3rem); } .map { max-width: 860px; /* near-square, so the radius fills the frame */ margin-inline: auto; height: clamp(360px, 52vh, 520px); border: 1px solid var(--gold-pale); background: var(--cream); z-index: 0; /* keep tiles under the sticky header */ } .map .leaflet-container { font-family: var(--font-body); } .map__note { margin-top: .9rem; font-size: .82rem; color: var(--ink-soft); text-align: center; } @media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } .form__row { grid-template-columns: 1fr; gap: 0; } } /* ================================================================== Director portraits. They sit over the corner of the large photo on the About page and fly in as each row arrives. Absolute placement is desktop only: on a narrow screen they take their turn in the flow. ================================================================== */ .showcase__row { position: relative; } .portrait { position: absolute; bottom: -26px; width: clamp(150px, 15vw, 205px); z-index: 3; background: var(--paper); padding: 10px 10px 0; border: 1px solid var(--gold-pale); box-shadow: 0 22px 50px rgba(43, 40, 34, .22); } .portrait--left { left: clamp(1rem, 3vw, 3rem); } .portrait--right { right: clamp(1rem, 3vw, 3rem); } .portrait img { width: 100%; height: auto; display: block; } .portrait figcaption { padding: .65rem .2rem .8rem; text-align: center; } .portrait__name { display: block; font-family: var(--font-display); font-size: 1.02rem; color: var(--charcoal); line-height: 1.2; } .portrait__role { display: block; margin-top: .2rem; font-size: .6rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep); } .showcase__quote { margin: 1.1rem 0 0; padding-left: 1rem; border-left: 2px solid var(--gold); font-family: var(--font-display); font-size: 1.04rem; line-height: 1.55; color: var(--charcoal); } /* ---------- our story split ---------- */ .story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; } .story__text { margin-top: 1.2rem; color: var(--ink-soft); line-height: 1.85; } .story__media { aspect-ratio: 4 / 3.2; } @media (max-width: 900px) { .portrait { position: static; width: 170px; margin: -3.6rem auto 1.4rem; box-shadow: 0 14px 34px rgba(43, 40, 34, .18); } .portrait--left, .portrait--right { left: auto; right: auto; } .story__grid { grid-template-columns: 1fr; } .story__media { order: -1; max-width: 560px; } } /* ================================================================== Inspiration: scroll reel, drifting strip, lightbox ================================================================== */ .lightbox { /* the widest the picture can ever be. The arrows are anchored to this rather than to the picture, so a narrow portrait shot does not pull them inwards and leave you clicking the backdrop where the button used to be. */ --lb-max: min(1100px, 74vw); position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(18, 16, 14, .94); } .lightbox[hidden] { display: none; } .lightbox__figure { max-width: var(--lb-max); text-align: center; } .lightbox__figure img { max-width: 100%; max-height: 78vh; width: auto; margin-inline: auto; border: 1px solid rgba(220, 196, 158, .3); } .lightbox__figure figcaption { margin-top: 1rem; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-pale); } .lightbox__close { position: absolute; top: clamp(.8rem, 2vw, 1.6rem); right: clamp(.8rem, 2vw, 1.6rem); width: 46px; height: 46px; font-size: 1.9rem; line-height: 1; color: var(--cream); background: none; border: 1px solid rgba(220, 196, 158, .35); cursor: pointer; transition: border-color .3s ease, color .3s ease; } .lightbox__close:hover { color: var(--gold-lift); border-color: var(--gold-lift); } .lightbox__nav { position: absolute; top: 50%; margin-top: -24px; width: 48px; height: 48px; background: rgba(18, 16, 14, .5); border: 1px solid rgba(220, 196, 158, .35); cursor: pointer; transition: border-color .3s ease; } /* half the max picture width out from the centre line, plus a gap: fixed whatever is on screen, and unaffected by a caption that runs to two lines */ .lightbox__nav--prev { right: calc(50% + var(--lb-max) / 2 + clamp(.5rem, 1.6vw, 1.4rem)); } .lightbox__nav--next { left: calc(50% + var(--lb-max) / 2 + clamp(.5rem, 1.6vw, 1.4rem)); } /* below this there is no room beside the picture, so anchor to the viewport edges instead. Still fixed, just a different fixed place. */ @media (max-width: 1000px) { /* no room beside the picture, so give the picture the width back and put the arrows on the viewport edges instead. Still fixed, just a different fixed place. */ .lightbox { --lb-max: min(1100px, 88vw); } .lightbox__nav--prev { right: auto; left: clamp(.35rem, 1.4vw, 1rem); } .lightbox__nav--next { left: auto; right: clamp(.35rem, 1.4vw, 1rem); } } .lightbox__nav::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-top: 1px solid var(--gold-pale); border-right: 1px solid var(--gold-pale); } .lightbox__nav--next::after { transform: translate(-65%, -50%) rotate(45deg); } .lightbox__nav--prev::after { transform: translate(-35%, -50%) rotate(-135deg); } .lightbox__nav:hover { border-color: var(--gold-lift); } /* ---------- colour swatches ---------- */ .swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(1.2rem, 2.4vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); } .swatch__chip { display: block; aspect-ratio: 3 / 2; border: 1px solid rgba(43, 40, 34, .12); } .swatch figcaption { padding-top: .9rem; } .swatch__name { display: block; font-family: var(--font-display); font-size: 1.1rem; color: var(--charcoal); } .swatch__note { display: block; margin-top: .3rem; font-size: .88rem; line-height: 1.6; color: var(--ink-soft); } .swatches__note { margin-top: clamp(1.6rem, 3vw, 2.4rem); font-size: .86rem; color: var(--ink-soft); text-align: center; } /* ---------- process step note ---------- */ .step__note { margin-top: .7rem; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); } /* ---------- testimonial stories page ---------- */ .stories { padding-top: clamp(3rem, 6vw, 5rem); } .stories .legal__head { border-bottom: 1px solid var(--gold-pale); padding-bottom: clamp(1.6rem, 3vw, 2.4rem); } .story { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.6rem); padding-block: clamp(2.4rem, 4.5vw, 3.6rem); border-bottom: 1px solid var(--gold-pale); } .story:last-of-type { border-bottom: 0; } .story__mark { font-family: var(--font-display); font-size: clamp(3.5rem, 7vw, 6rem); line-height: .8; color: var(--gold-pale); } .story__kind { font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: .7rem; } .story h2 { font-size: clamp(1.5rem, 2.5vw, 2.05rem); margin-bottom: 1.1rem; } .story__para { color: var(--ink-soft); line-height: 1.85; margin-bottom: .9rem; max-width: 74ch; } .story__stars { color: var(--gold); letter-spacing: .3em; margin-top: .4rem; } @media (max-width: 700px) { .story { grid-template-columns: 1fr; gap: .4rem; } .story__mark { line-height: .6; } } /* ================================================================== Kitchens: per-collection slideshow Plain CSS transitions driven by a class, so the images still cycle if GSAP fails to load. The slow scale on the active slide gives the drift. ================================================================== */ .styleshow { position: relative; } .styleshow__stage { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--cream-deep); } .styleshow__slide { position: absolute; inset: 0; margin: 0; opacity: 0; /* doubled, so the dissolve overlaps most of the 3s dwell and the images read as one continuous drift rather than a sequence of cuts */ transition: opacity 1.9s ease; } .styleshow__slide.is-on { opacity: 1; z-index: 1; } .styleshow__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.075); transition: transform 5s linear; } .styleshow__slide.is-on img { transform: scale(1); } .styleshow__scrim { position: absolute; inset: auto 0 0 0; height: 42%; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(28, 26, 23, .72), rgba(28, 26, 23, 0)); } .styleshow__bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 1rem; padding: 1rem clamp(1rem, 2.2vw, 1.5rem); } .styleshow__caption { flex: 1 1 auto; min-width: 0; font-size: .82rem; line-height: 1.45; color: rgba(252, 250, 245, .92); text-shadow: 0 1px 10px rgba(0, 0, 0, .5); } .styleshow__dots { display: flex; gap: .5rem; flex: 0 0 auto; } .styleshow__dot { width: 9px; height: 9px; padding: 0; border: 1px solid rgba(252, 250, 245, .75); border-radius: 50%; background: none; cursor: pointer; transition: background .3s ease, transform .3s ease; } .styleshow__dot[aria-current="true"] { background: var(--gold-lift); border-color: var(--gold-lift); transform: scale(1.2); } .styleshow__arrows { display: flex; gap: .45rem; flex: 0 0 auto; } .styleshow__arrow { width: 34px; height: 34px; padding: 0; border: 1px solid rgba(252, 250, 245, .5); background: rgba(28, 26, 23, .3); color: #fcfaf5; cursor: pointer; position: relative; transition: border-color .3s ease, background .3s ease; } .styleshow__arrow:hover { border-color: var(--gold-lift); background: rgba(28, 26, 23, .55); } .styleshow__arrow::after { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; } .styleshow__arrow--next::after { transform: translate(-70%, -50%) rotate(45deg); } .styleshow__arrow--prev::after { transform: translate(-30%, -50%) rotate(-135deg); } /* On a phone the caption has no room beside ten dots and two arrows: it wrapped to four lines and ran out of the bottom of the frame. Give it its own row and cap it at two lines. */ @media (max-width: 700px) { .styleshow__bar { flex-wrap: wrap; gap: .55rem .8rem; padding: .85rem; } .styleshow__caption { flex: 1 0 100%; order: -1; font-size: .78rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .styleshow__dots { flex: 1 1 auto; } .styleshow__arrow { width: 32px; height: 32px; } .styleshow__scrim { height: 58%; } } @media (max-width: 420px) { .styleshow__dot { width: 8px; height: 8px; } .styleshow__dots { gap: .38rem; } } /* ================================================================== Inspiration: full-bleed scroll reel Default styling is a plain stack of large images, which is what a visitor gets with no JS or with reduced motion. `.is-live` upgrades it to the pinned, cross-dissolving version. ================================================================== */ .reel { position: relative; background: var(--charcoal); } .reel__slide { position: relative; margin: 0; } .reel__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; } .reel__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .reel__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(24, 22, 20, .82) 0%, rgba(24, 22, 20, .2) 34%, rgba(24, 22, 20, 0) 62%), linear-gradient(to right, rgba(24, 22, 20, .5), rgba(24, 22, 20, 0) 55%); } .reel__cap { position: absolute; left: 0; right: 0; bottom: clamp(1.6rem, 4vw, 3.2rem); color: #fcfaf5; } .reel__count { font-size: .72rem; font-weight: 600; letter-spacing: .28em; color: var(--gold-lift); margin-bottom: .8rem; } .reel__count i { font-style: normal; opacity: .5; margin: 0 .35rem; } .reel__cap h3 { font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: 1.08; color: #fcfaf5; margin-bottom: .7rem; } .reel__cap p.reel__meta { font-size: clamp(.94rem, 1.2vw, 1.06rem); color: rgba(252, 250, 245, .8); max-width: 46ch; } .reel.is-live .reel__track { position: relative; height: calc(var(--n) * 78vh); } .reel.is-live .reel__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; } .reel.is-live .reel__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; } .reel.is-live .reel__media { aspect-ratio: auto; height: 100%; } .reel__progress { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(252, 250, 245, .16); display: none; } .reel.is-live .reel__progress { display: block; } .reel__progress span { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; } /* ================================================================== Inspiration: drifting strip ================================================================== */ .strip { overflow: hidden; padding: clamp(.5rem, 1.4vw, 1rem) 0; } .strip__row { overflow: hidden; padding: .45rem 0; } .strip__track { display: flex; gap: clamp(.7rem, 1.4vw, 1.1rem); width: max-content; animation: strip-drift 78s linear infinite; will-change: transform; } .strip__row--back .strip__track { animation-direction: reverse; animation-duration: 96s; } .strip:hover .strip__track, .strip:focus-within .strip__track { animation-play-state: paused; } @keyframes strip-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .strip__item { flex: 0 0 auto; width: clamp(210px, 24vw, 340px); aspect-ratio: 3 / 2; padding: 0; border: 0; background: none; overflow: hidden; cursor: pointer; position: relative; } .strip__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.22, .8, .3, 1), filter .5s ease; } .strip__item::after { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(252, 250, 245, .55); opacity: 0; transition: opacity .35s ease; pointer-events: none; } .strip__item:hover img, .strip__item:focus-visible img { transform: scale(1.07); } .strip__item:hover::after, .strip__item:focus-visible::after { opacity: 1; } @media (prefers-reduced-motion: reduce) { .strip__track { animation: none; } .styleshow__slide img { transition: none; transform: none; } } /* ten full-screen slides is a long pinned run on a phone, so shorten the dwell per slide rather than dropping images from the sequence */ @media (max-width: 700px) { .reel.is-live .reel__track { height: calc(var(--n) * 62vh); } } /* The slides carry z-index so they stack in order, which was painting them over the frame's inset rule and making it vanish the moment a slide changed. Lift the rule above the whole slideshow. */ .showcase__media.frame::after { z-index: 5; } /* an emphasised word inside a heading */ .stress { font-style: italic; font-weight: 600; } /* a section carrying only a heading does not need the full run-out beneath it */ .section--head-only { padding-bottom: clamp(1.4rem, 2.8vw, 2.2rem); } .section--head-only .section-head { margin-bottom: 0; } /* ---------- reel: right-hand rail ---------- A fixed-width column so the diamonds and the scroll indicator share one vertical axis rather than each being positioned off the viewport edge. */ .reel__rail { position: absolute; z-index: 4; right: clamp(.9rem, 2.6vw, 2.4rem); top: 0; bottom: 0; width: 46px; display: none; align-items: center; justify-content: center; } .reel.is-live .reel__rail { display: flex; } .reel__dots { display: flex; flex-direction: column; align-items: center; gap: .95rem; } .reel__dot { width: 9px; height: 9px; padding: 0; border: 1px solid rgba(252, 250, 245, .8); background: rgba(24, 22, 20, .28); transform: rotate(45deg); cursor: pointer; /* half these photographs are pale, and an unfilled outline vanishes against them, so each diamond carries its own shadow */ box-shadow: 0 1px 5px rgba(24, 22, 20, .55); transition: background-color .35s ease, border-color .35s ease, transform .35s ease; } .reel__dot:hover { border-color: var(--gold-lift); } .reel__dot[aria-current="true"] { background: var(--gold); border-color: var(--gold); transform: rotate(45deg) scale(1.45); } .reel__scroll { position: absolute; bottom: clamp(1.2rem, 3vw, 2.4rem); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .9rem; } @media (max-width: 700px) { .reel__rail { width: 32px; right: .55rem; } .reel__dots { gap: .7rem; } .reel__dot { width: 7px; height: 7px; } .reel__scroll { display: none; } } /* ---------- strip: driven by rAF once JS is up ---------- The CSS animation is the no-JS fallback. It cannot ease between speeds (changing animation-duration mid-flight jumps, because progress is elapsed time over duration), and it cannot be dragged, so JS takes over. */ .strip.is-live .strip__track { animation: none; } .strip.is-live .strip__row { cursor: grab; touch-action: pan-y; } .strip.is-live .strip__row.is-dragging { cursor: grabbing; } .strip.is-live .strip__row.is-dragging img { transform: none; } /* ---------- page transition ---------- `.pf` is set by a tiny inline script in the head, before first paint, and only when motion is welcome. With scripting off the cover is never shown at all. The lift is a CSS animation rather than JS so the page still uncovers itself if main.js fails to load. */ .pagefade { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: var(--charcoal); opacity: 0; visibility: hidden; pointer-events: none; } .pagefade__mark { width: clamp(118px, 16vw, 210px); aspect-ratio: 438 / 178; background: url('../img/logo/monogram-gold.png') center / contain no-repeat; } /* A brief beat covered while the new page loads underneath, then a one second lift, so the whole thing reads as a fade rather than a logo screen. With the one second fade on the way out that is about 2.1s door to door, and the load overlaps the hold rather than adding to it. */ .pf .pagefade { opacity: 1; visibility: visible; animation: pf-lift 1s cubic-bezier(.4, 0, .2, 1) .1s forwards; } .pf .pagefade__mark { animation: pf-mark .82s ease .1s forwards; } @keyframes pf-lift { to { opacity: 0; visibility: hidden; } } @keyframes pf-mark { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.05); } } /* On the way out the cover cannot simply be faded back up with inline styles or the Web Animations API. The arrival animation above fills forwards holding visibility:hidden, and a filling animation sits above author styles in the cascade, so the fade runs perfectly at an invisible element. JS therefore drops `pf` entirely, which removes that animation, and hands over to this one, which owns both properties. */ .pagefade.is-leaving { pointer-events: all; animation: pf-cover 1s ease forwards; } .pagefade.is-leaving .pagefade__mark { animation: pf-mark-in .82s ease forwards; } @keyframes pf-cover { from { opacity: 0; visibility: visible; } to { opacity: 1; visibility: visible; } } @keyframes pf-mark-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .pagefade { display: none; } } .strip.is-live .strip__row { user-select: none; -webkit-user-select: none; } /* same problem as the diamonds: the indicator has to read on a pale photograph */ .reel__scroll .hero__scroll-label { text-shadow: 0 1px 6px rgba(24, 22, 20, .7); } .reel__scroll .hero__scroll-line { box-shadow: 0 0 5px rgba(24, 22, 20, .5); } /* ---------- slideshow bar vs the overlapping card ---------- The card sits over one of the media's eight grid columns, so an eighth of the photo's width is behind it, full height. Whichever end of the bar falls on that side has to be kept out of it: the controls on a normal row, the caption on a flipped one. Below 900px the row stacks and the card overlaps the bottom of the photo instead, where the whole bar lives, so there the bar moves to the top, which nothing covers. */ @media (min-width: 901px) { .showcase__row .styleshow__bar { padding-right: calc(12.5% + .9rem); } .showcase__row--flip .styleshow__bar { padding-right: clamp(1rem, 2.2vw, 1.5rem); padding-left: calc(12.5% + .9rem); } } @media (max-width: 900px) { .styleshow__bar { top: 0; bottom: auto; } .styleshow__scrim { inset: 0 0 auto 0; height: 58%; background: linear-gradient(to bottom, rgba(28, 26, 23, .74), rgba(28, 26, 23, 0)); } }