/* ========================================================================== Portofino Properties — homepage variant 4 Structure follows the client's reference site; palette, type and foil remain Portofino's own (charcoal / cream / iridescent). Sections 1 Tokens 2 Reset & base 3 Typography primitives, pills, badges, mark 4 Header + nav panel 5 Hero 6 Ledger (stats strip) 7 About Us 8 The Collection (cards) 9 The Place (locations band) 10 Our Values (icon triad) 11 The House (inverted cream statement) 12 CTA band 13 Footer 14 Reveal 15 Contact page — hero, info cards, enquiry form 16 Breakpoints 17 Reduced motion ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* palette */ --charcoal: #4A4A46; --charcoal-deep: #3E3E3A; --ink: #2A2A27; --ink-soft: #33332F; --cream: #F1E7D2; --cream-muted: #C7BFAE; --cream-faint: #8E887C; --accent: #C0A46A; /* solid fallback for the foil */ --foil: linear-gradient(90deg, #7d8a52 0%, #b6a06a 42%, #c58fa8 72%, #a86f9c 100%); /* hairlines */ --rule: rgba(241, 231, 210, .14); --rule-soft: rgba(241, 231, 210, .09); /* type */ --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* rhythm */ --section-y: clamp(6.5rem, 12vw, 11rem); --gutter: clamp(1.5rem, 5vw, 4.5rem); --shell: 1240px; --shell-narrow: 760px; --radius: 14px; /* motion */ --ease: cubic-bezier(.22, .61, .36, 1); } /* -------------------------------------------------------------------------- 2. Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--charcoal); color: var(--cream); font-family: var(--sans); font-size: 1rem; font-weight: 300; line-height: 1.8; letter-spacing: .005em; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* `clip` never turns into a scroll container, unlike `hidden` */ @supports (overflow: clip) { body { overflow-x: clip; } } body.is-locked { overflow: hidden; } img { max-width: 100%; height: auto; display: block; } figure { margin: 0; } ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; } p { margin: 0 0 1.25em; } p:last-child { margin-bottom: 0; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; } .svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; padding: .9rem 1.4rem; background: var(--cream); color: var(--ink); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; } .skip-link:focus { left: 1rem; top: 1rem; } /* -------------------------------------------------------------------------- 3. Typography primitives -------------------------------------------------------------------------- */ h1, h2, h3 { font-family: var(--serif); font-weight: 300; margin: 0; line-height: 1.06; letter-spacing: -.015em; } /* Accent italics — foil-clipped where supported, solid gold otherwise */ em { font-style: italic; color: var(--accent); } h1 em, h2 em, h3 em, .site-header__word em { background: var(--foil); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } @supports not ((background-clip: text) or (-webkit-background-clip: text)) { h1 em, h2 em, h3 em, .site-header__word em { color: var(--accent); -webkit-text-fill-color: currentColor; } } .label { font-size: .68rem; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--cream-faint); margin: 0 0 1.4rem; } .label--center { text-align: center; } /* Thin foil divider */ .divider { display: block; width: 54px; height: 1px; background: var(--foil); border: 0; margin: 0 0 1.6rem; } .divider--center { margin-left: auto; margin-right: auto; } .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } .shell--narrow { max-width: calc(var(--shell-narrow) + 2 * var(--gutter)); } /* ---- Pills (the reference's button language, in Portofino's foil) -------- */ .pill { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; border-radius: 999px; border: 1px solid transparent; padding: .72rem 1.5rem; font-size: .66rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; line-height: 1; white-space: nowrap; transition: opacity .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease); } .pill--lg { padding: 1.05rem 2.1rem; letter-spacing: .2em; } /* filled — the foil used as punctuation, with ink text for contrast */ .pill--foil { background: var(--foil); color: var(--ink); font-weight: 500; } .pill--foil:hover, .pill--foil:focus-visible { opacity: .84; } /* outlined / ghost */ .pill--ghost { border-color: rgba(241, 231, 210, .34); color: var(--cream); } .pill--ghost:hover, .pill--ghost:focus-visible { border-color: var(--accent); background: rgba(192, 164, 106, .09); } /* ghost on the cream panel */ .pill--ghost-ink { border-color: rgba(42, 42, 39, .3); color: var(--ink); } .pill--ghost-ink:hover, .pill--ghost-ink:focus-visible { border-color: var(--ink); background: rgba(42, 42, 39, .05); } .pill__arrow { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); } .pill:hover .pill__arrow, .pill:focus-visible .pill__arrow { transform: translateX(3px); } /* ---- Badges (eyebrow pill + card corner tags) ---------------------------- */ .badge { display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; border: 1px solid rgba(241, 231, 210, .26); background: rgba(42, 42, 39, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: .5rem 1.05rem; margin: 0; font-size: .62rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; line-height: 1; color: var(--cream); } .badge i { font-style: normal; color: var(--accent); } .badge__glyph { font-size: .78rem; line-height: 1; background: var(--foil); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @supports not ((background-clip: text) or (-webkit-background-clip: text)) { .badge__glyph { color: var(--accent); -webkit-text-fill-color: currentColor; } } .badge--card { font-size: .56rem; letter-spacing: .18em; padding: .42rem .8rem; } /* ---- Quiet underline link ------------------------------------------------ */ .link-quiet { position: relative; display: inline-block; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-muted); padding-bottom: .4rem; transition: color .4s var(--ease); } .link-quiet::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--foil); transform: scaleX(.35); transform-origin: left; transition: transform .55s var(--ease); } .link-quiet:hover, .link-quiet:focus-visible { color: var(--cream); } .link-quiet:hover::after, .link-quiet:focus-visible::after { transform: scaleX(1); } /* ---- Brand mark ---------------------------------------------------------- */ .mark { width: 34px; height: 34px; flex: 0 0 auto; fill: none; stroke: url(#iridFoil); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .mark--sm { width: 28px; height: 28px; } /* ---- Location pin -------------------------------------------------------- */ .pin { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } /* -------------------------------------------------------------------------- 4. Header — mark left, nav centre-right, foil pill far right -------------------------------------------------------------------------- */ .site-header { position: fixed; inset: 0 0 auto; z-index: 1000; padding: .9rem 0; border-bottom: 1px solid transparent; background: rgba(42, 42, 39, .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: padding .45s var(--ease), background-color .45s var(--ease), border-color .45s var(--ease); } .site-header.is-stuck { padding: .55rem 0; background: rgba(58, 58, 54, .9); border-bottom-color: var(--rule); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .site-header__inner { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 1rem; } .site-header__brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; } .site-header__word { font-family: var(--serif); font-size: 1.16rem; font-weight: 400; letter-spacing: .05em; line-height: 1; white-space: nowrap; color: #F7F0DE; text-shadow: 0 1px 14px rgba(0, 0, 0, .55); transition: font-size .45s var(--ease); } /* the foil italic in the wordmark gets a brighter blend so it reads over busy photographs */ .site-header__word em { background-image: linear-gradient(90deg, #aabc74, #dcc68d, #e4b5ca, #cd97c1); } .site-header.is-stuck .site-header__word { font-size: 1.02rem; } .site-nav { display: none; align-items: center; gap: 2.2rem; margin-right: 1.4rem; font-size: .66rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--cream); text-shadow: 0 1px 10px rgba(0, 0, 0, .45); } .site-nav a { position: relative; padding-bottom: .3rem; transition: color .35s var(--ease); } .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--foil); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); } .site-nav a:hover, .site-nav a:focus-visible { color: var(--cream); } .site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a.is-current::after { transform: scaleX(1); } .site-header__cta { padding: .68rem 1.35rem; } .site-header__toggle { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; width: 32px; height: 32px; padding: 0; } .site-header__toggle-bar { display: block; width: 22px; height: 1px; background: var(--cream); transition: width .35s var(--ease), transform .35s var(--ease), background-color .35s var(--ease); } .site-header__toggle-bar:nth-child(2) { width: 15px; } .site-header__toggle:hover .site-header__toggle-bar, .site-header__toggle:focus-visible .site-header__toggle-bar { background: var(--accent); } .site-header__toggle[aria-expanded="true"] .site-header__toggle-bar { width: 22px; } .site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(1) { transform: translateY(3.5px) rotate(45deg); } .site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); } /* Full-screen navigation panel */ .nav-panel { position: fixed; inset: 0; z-index: 999; background: var(--ink); display: flex; flex-direction: column; justify-content: center; padding: 6rem var(--gutter) 3rem; opacity: 0; transition: opacity .45s var(--ease); } .nav-panel[hidden] { display: none; } .nav-panel.is-open { opacity: 1; } .nav-panel__nav { display: grid; gap: .3rem; } .nav-panel__nav a { display: flex; align-items: baseline; gap: 1.1rem; padding: .65rem 0; border-bottom: 1px solid var(--rule-soft); font-family: var(--serif); font-size: clamp(1.6rem, 7.5vw, 2.5rem); line-height: 1.15; } .nav-panel__nav span { font-family: var(--sans); font-size: .58rem; letter-spacing: .22em; color: var(--accent); } .nav-panel__foot { margin: 2.6rem 0 0; font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--cream-faint); } /* -------------------------------------------------------------------------- 5. Hero — full-bleed photograph -------------------------------------------------------------------------- */ .hero { position: relative; isolation: isolate; height: 100svh; min-height: 560px; display: flex; align-items: center; justify-content: center; padding: clamp(5rem, 11vw, 6.5rem) 0 clamp(3rem, 7vw, 4rem); overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: -1; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; filter: brightness(.58) saturate(.86); transform: scale(1.05); animation: media-settle 2.4s var(--ease) forwards; } /* flat scrim — no gradient washes, per the brand */ .hero__media::after { content: ""; position: absolute; inset: 0; background: rgba(42, 42, 39, .42); } .hero__inner { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); display: flex; flex-direction: column; align-items: center; text-align: center; } .badge--hero { max-width: calc(100vw - 2 * var(--gutter)); white-space: nowrap; font-size: clamp(.54rem, 3vw, .62rem); letter-spacing: clamp(.08em, 1.2vw, .2em); padding-inline: clamp(.75rem, 3vw, 1.05rem); opacity: 0; animation: rise-in 1.1s var(--ease) .1s forwards; } /* Below 620px there isn't room for the full phrase without shrinking it past legibility, so the location clause steps aside instead. */ @media (max-width: 619px) { .badge--hero .badge__extra { display: none; } } .hero__title { margin: clamp(1.1rem, 2.6vw, 1.6rem) 0 0; font-size: clamp(2.6rem, 9vw, 4.6rem); line-height: 1.05; letter-spacing: -.025em; /* generous, so the
keeps control of the two lines rather than the box */ max-width: 22ch; opacity: 0; animation: rise-in 1.2s var(--ease) .28s forwards; } .hero__lede { max-width: 46ch; margin: clamp(1rem, 2.4vw, 1.4rem) 0 clamp(1.6rem, 3.6vw, 2.2rem); color: var(--cream-muted); font-size: clamp(1.05rem, 3vw, 1.2rem); line-height: 1.7; opacity: 0; animation: rise-in 1.2s var(--ease) .48s forwards; } .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.2rem; align-items: center; justify-content: center; opacity: 0; animation: rise-in 1.2s var(--ease) .66s forwards; } @keyframes media-settle { to { transform: scale(1); } } @keyframes rise-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* -------------------------------------------------------------------------- 6. Ledger — slim stats strip -------------------------------------------------------------------------- */ .ledger { position: relative; padding: clamp(3.5rem, 8vw, 5.5rem) 0; background: var(--charcoal-deep); border-block: 1px solid var(--rule-soft); } .ledger__row { display: grid; gap: clamp(1.8rem, 6vw, 2.6rem); } .ledger__item { text-align: center; padding: 0 clamp(1rem, 3vw, 2rem); } .ledger__num { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(3rem, 6.5vw, 5rem); line-height: 1; letter-spacing: -.02em; color: var(--cream); font-variant-numeric: lining-nums tabular-nums; } .ledger__label { display: block; margin-top: .9rem; font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--cream-muted); } /* -------------------------------------------------------------------------- 7. About Us — asymmetric split: full-height portrait photo paired with eyebrow, heading, running text, inline stats and CTA. -------------------------------------------------------------------------- */ /* Collection follows immediately on the same background with no divider, so trim the shared seam instead of stacking two full section gaps. */ .about { padding: var(--section-y) 0 calc(var(--section-y) * .25); } .about__eyebrow { text-align: center; margin-bottom: clamp(2.4rem, 6vw, 3.4rem); } .about__grid { display: grid; gap: clamp(2.4rem, 6vw, 5rem); align-items: center; } .about__media { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; } .about__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .about__title { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.16; max-width: 17ch; margin: 0 0 1.3rem; } .about__text { margin: 0; color: var(--cream-muted); font-size: .98rem; line-height: 1.85; } .about__text + .about__text { margin-top: 1rem; } .about__stats { display: flex; gap: clamp(2rem, 5vw, 3rem); margin: clamp(1.6rem, 3.5vw, 2rem) 0 0; padding-top: clamp(1.1rem, 2.5vw, 1.4rem); border-top: 1px solid var(--rule); } .about__stats dt { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 2.8vw, 2rem); line-height: 1; color: var(--cream); font-variant-numeric: lining-nums tabular-nums; } .about__stats dd { margin: .45rem 0 0; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-faint); } .about__action { margin: clamp(1.8rem, 4vw, 2.2rem) 0 0; } /* -------------------------------------------------------------------------- 8. The Collection — editorial address cards -------------------------------------------------------------------------- */ .collection { padding: var(--section-y) 0; } .collection__head { text-align: center; margin-bottom: clamp(2.8rem, 6vw, 4.2rem); } .collection__title { font-size: clamp(1.95rem, 4.6vw, 3.4rem); line-height: 1.12; max-width: 18ch; margin: 0 auto; } .collection__lead { max-width: 56ch; margin: clamp(1.2rem, 3vw, 1.8rem) auto 0; color: var(--cream-muted); font-size: 1rem; line-height: 1.9; } .cards { display: grid; gap: clamp(1.8rem, 4vw, 2.4rem); } .card { display: flex; flex-direction: column; background: var(--charcoal-deep); border: 1px solid var(--rule-soft); border-radius: var(--radius); overflow: hidden; transition: border-color .5s var(--ease), transform .6s var(--ease); } .card:hover { border-color: rgba(241, 231, 210, .22); transform: translateY(-4px); } .card__head { display: flex; align-items: baseline; justify-content: space-between; padding: clamp(1.6rem, 3vw, 2rem) clamp(1.5rem, 3vw, 1.9rem) 0; } .card__num { font-family: var(--serif); font-weight: 300; font-size: 1.05rem; color: var(--cream-faint); } .card__body { padding: clamp(1.1rem, 2.2vw, 1.4rem) clamp(1.5rem, 3vw, 1.9rem) 0; flex: 1 1 auto; } .card__title { font-size: clamp(1.5rem, 2.6vw, 1.85rem); line-height: 1.14; margin-bottom: .7rem; } .card__place { display: flex; align-items: center; gap: .5rem; margin: 0 0 1.1rem; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-faint); } .card__text { margin: 0; color: var(--cream-muted); font-size: .95rem; line-height: 1.85; } .card__foot { margin: clamp(1.5rem, 3vw, 1.9rem) 0 0; padding: 1.15rem clamp(1.5rem, 3vw, 1.9rem) 1.35rem; border-top: 1px solid var(--rule-soft); } /* -------------------------------------------------------------------------- 9. The Place — quiet locations band -------------------------------------------------------------------------- */ .place { display: flex; align-items: center; justify-content: center; min-height: clamp(220px, 30vw, 340px); padding: clamp(3.5rem, 8vw, 5.5rem) var(--gutter); background: var(--ink); border-block: 1px solid var(--rule-soft); } .place__note { margin: 0; max-width: 46ch; text-align: center; font-family: var(--serif); font-size: clamp(1.25rem, 3.2vw, 2.1rem); font-style: italic; font-weight: 300; line-height: 1.45; color: var(--cream); } .place__note i { font-style: normal; color: var(--accent); padding: 0 .18em; } /* -------------------------------------------------------------------------- 10. Our Values — icon feature triad -------------------------------------------------------------------------- */ .values { padding: var(--section-y) 0; background: var(--charcoal-deep); } .values__head { text-align: center; margin-bottom: clamp(3rem, 7vw, 4.8rem); } .values__title { font-size: clamp(1.95rem, 4.6vw, 3.4rem); line-height: 1.12; max-width: 18ch; margin: 0 auto; } .values__grid { display: grid; gap: clamp(2.8rem, 6vw, 3.6rem); } .value { text-align: center; } .value__badge { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; margin-bottom: 1.5rem; border-radius: 18px; border: 1px solid var(--rule); background: rgba(241, 231, 210, .045); } .value__icon { width: 26px; height: 26px; fill: none; stroke: url(#iridFoilBB); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; } .value__title { font-size: clamp(1.6rem, 3vw, 2.05rem); line-height: 1.12; margin-bottom: 1rem; } .value__text { margin: 0 auto; max-width: 40ch; color: var(--cream-muted); font-size: .96rem; line-height: 1.9; } /* -------------------------------------------------------------------------- 11. The House — the single inverted cream statement panel -------------------------------------------------------------------------- */ .statement { background: var(--cream); color: var(--ink); padding: calc(var(--section-y) * .4) 0; text-align: center; } .statement__skyline { width: min(100%, 520px); margin: 0 auto clamp(1.4rem, 3vw, 2rem); } .statement__word { display: grid; gap: clamp(.1rem, .5vw, .4rem); margin: 0; font-size: clamp(1.4rem, 6vw, 4rem); font-weight: 300; line-height: 1.02; letter-spacing: .13em; text-transform: uppercase; color: var(--ink); } /* the tracking adds a trailing gap on the last glyph — pull it back so the two words stay optically centred over one another */ .statement__word span { text-indent: .065em; } .statement__tag { margin: clamp(1rem, 2.5vw, 1.5rem) 0 0; font-size: .64rem; font-weight: 400; letter-spacing: .32em; text-transform: uppercase; color: #8A8477; } /* -------------------------------------------------------------------------- 12. CTA band -------------------------------------------------------------------------- */ .cta { padding: calc(var(--section-y) * .85) 0; text-align: center; background: var(--charcoal-deep); border-block: 1px solid var(--rule-soft); } .cta__title { font-size: clamp(2rem, 5.4vw, 3.9rem); line-height: 1.1; max-width: 16ch; margin: 0 auto clamp(2rem, 4.5vw, 2.8rem); } .cta__action { margin: 0; } /* -------------------------------------------------------------------------- 13. Footer — two columns, thin rule, bottom bar -------------------------------------------------------------------------- */ .footer { background: var(--ink); padding: clamp(3.5rem, 8vw, 5.5rem) 0 clamp(2rem, 4vw, 2.6rem); } .footer__grid { display: grid; gap: clamp(2.6rem, 6vw, 3.4rem); } .footer__brand { display: inline-flex; align-items: center; gap: .65rem; font-family: var(--serif); font-size: 1.1rem; letter-spacing: .05em; } .footer__tag { margin: 1.1rem 0 0; font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); } .footer__blurb { margin: 1.1rem 0 0; max-width: 38ch; color: var(--cream-faint); font-size: .88rem; line-height: 1.85; } .footer__heading { font-family: var(--sans); font-size: .62rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--cream); margin: 0 0 1.4rem; } .footer__list { display: grid; gap: .7rem; font-size: .9rem; color: var(--cream-faint); } .footer__list a { transition: color .35s var(--ease); } .footer__list a:hover, .footer__list a:focus-visible { color: var(--cream); } .footer__list--contact { gap: 1rem; word-break: break-word; } .footer__name { display: block; font-family: var(--serif); font-size: 1.1rem; color: var(--cream); line-height: 1.3; } .footer__role { display: block; margin-top: .25rem; font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--cream-faint); } .footer__bar { margin-top: clamp(2.6rem, 6vw, 3.6rem); padding-top: clamp(1.4rem, 3vw, 1.9rem); border-top: 1px solid var(--rule-soft); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; } .footer__bar p { margin: 0; font-size: .74rem; color: var(--cream-faint); } .footer__dev a { color: var(--cream-muted); border-bottom: 1px solid rgba(241, 231, 210, .26); padding-bottom: 1px; transition: color .35s var(--ease), border-color .35s var(--ease); } .footer__dev a:hover, .footer__dev a:focus-visible { color: var(--cream); border-color: var(--accent); } /* -------------------------------------------------------------------------- 14. Reveal animation -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); } .reveal.is-visible { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- 15. Contact page — hero, info cards, enquiry form -------------------------------------------------------------------------- */ .contact-hero { padding: clamp(8rem, 16vw, 11rem) 0 clamp(3rem, 6vw, 4rem); text-align: center; } .contact-hero__title { font-size: clamp(2.1rem, 5.4vw, 3.9rem); line-height: 1.1; max-width: 18ch; margin: 0 auto clamp(1.2rem, 3vw, 1.6rem); } .contact-hero__lede { max-width: 52ch; margin-inline: auto; color: var(--cream-muted); font-size: 1.02rem; line-height: 1.9; } .contact-panels { padding: 0 0 var(--section-y); } .contact-panels__grid { display: grid; gap: clamp(2rem, 5vw, 3rem); } /* ---- Info cards ---- */ .contact-info { display: grid; gap: 1.1rem; align-content: start; min-width: 0; } .info-card { /* The grid item itself must opt out of the "automatic minimum size" that a nowrap descendant (the email) would otherwise impose — setting overflow/min-width only on that descendant isn't enough, it has to be on the actual grid item to stop the card, and the whole row, from being forced wider than the viewport. */ min-width: 0; padding: clamp(1.6rem, 3vw, 2rem); border: 1px solid var(--rule-soft); border-radius: var(--radius); background: var(--charcoal-deep); } .info-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 1rem; border-radius: 12px; border: 1px solid var(--rule); color: var(--accent); } .info-card__icon svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .info-card__label { font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--cream-faint); margin: 0 0 .5rem; } .info-card__value { font-family: var(--serif); font-size: 1.15rem; line-height: 1.4; color: var(--cream); margin: 0 0 .4rem; word-break: break-word; } /* The email is long and punctuation-dense — shrink and switch to the more compact sans so it stays on one line even on narrow phones, instead of breaking mid-address. */ .info-card__value--email { font-family: var(--sans); font-size: clamp(.62rem, 4.4vw, 1.15rem); letter-spacing: 0; max-width: 100%; white-space: nowrap; /* `overflow: hidden` also zeroes this element's min-content contribution to the grid, so the nowrap text can no longer force the whole card wider than the viewport — it just clips instead. */ overflow: hidden; text-overflow: ellipsis; } .info-card__value a { border-bottom: 1px solid rgba(241, 231, 210, .26); padding-bottom: 2px; transition: border-color .35s var(--ease); } .info-card__value a:hover, .info-card__value a:focus-visible { border-color: var(--accent); } .info-card__note { margin: 0; font-size: .82rem; color: var(--cream-faint); } /* ---- Enquiry form ---- */ .contact-form { min-width: 0; padding: clamp(1.8rem, 3.4vw, 2.6rem); border: 1px solid var(--rule-soft); border-radius: var(--radius); background: var(--charcoal-deep); } .contact-form__label-lead { font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--cream-faint); margin: 0 0 1.6rem; } .contact-form__row { display: grid; gap: 1.2rem; margin-bottom: 1.2rem; } .contact-form__field { display: grid; gap: .5rem; margin-bottom: 1.2rem; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-muted); } .contact-form__field:last-of-type { margin-bottom: 0; } /* Name/Email sit in their own row, spaced by its own gap — an inherited bottom margin here would only unbalance the pair, since :last-of-type zeroes it on Email but not Name. */ .contact-form__row .contact-form__field { margin-bottom: 0; } .contact-form__field input, .contact-form__field textarea { font-family: var(--sans); font-size: .95rem; font-weight: 300; letter-spacing: normal; text-transform: none; color: var(--cream); background: rgba(241, 231, 210, .04); border: 1px solid var(--rule); border-radius: 8px; padding: .85rem 1rem; transition: border-color .35s var(--ease), background-color .35s var(--ease); } .contact-form__field input::placeholder, .contact-form__field textarea::placeholder { color: var(--cream-faint); } .contact-form__field input:focus, .contact-form__field textarea:focus { outline: none; border-color: var(--accent); background: rgba(241, 231, 210, .07); } .contact-form__field textarea { resize: vertical; min-height: 120px; } .contact-form__submit { display: inline-flex; align-items: center; gap: .6rem; border-radius: 999px; background: var(--foil); color: var(--ink); padding: 1.05rem 2.1rem; font-size: .66rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; margin-top: .6rem; transition: opacity .4s var(--ease); } .contact-form__submit:hover, .contact-form__submit:focus-visible { opacity: .84; } .contact-form__note { margin: .9rem 0 0; font-size: .76rem; color: var(--cream-faint); } /* -------------------------------------------------------------------------- 16. Breakpoints -------------------------------------------------------------------------- */ /* Narrow phones: brand + pill + toggle will not all fit on one row, and the pill is duplicated by the hero CTA and the nav panel, so it stands down. */ @media (max-width: 559px) { .site-header__cta { display: none; } .site-header__word { font-size: 1.04rem; } } @media (min-width: 560px) { .contact-form__row { grid-template-columns: 1fr 1fr; } } @media (min-width: 620px) { .ledger__row { grid-template-columns: repeat(3, 1fr); gap: 0; } .ledger__item + .ledger__item { border-left: 1px solid var(--rule); } } @media (min-width: 768px) { .cards { grid-template-columns: repeat(2, 1fr); } .values__grid { grid-template-columns: repeat(3, 1fr); } .value__text { max-width: 34ch; } .about__grid { grid-template-columns: .85fr 1.15fr; } .footer__grid { grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); } } /* Mobile: the two-column desktop layout hasn't kicked in yet, so the info cards and form intro/submit read better centred than left-hung. */ @media (max-width: 899px) { .info-card { text-align: center; } .info-card__icon { margin-inline: auto; } .contact-form__label-lead, .contact-form__note { text-align: center; } .contact-form__submit { display: flex; margin-inline: auto; } } @media (min-width: 900px) { .contact-panels__grid { grid-template-columns: .85fr 1.15fr; align-items: start; gap: clamp(3rem, 6vw, 5rem); } } @media (min-width: 980px) { .site-nav { display: flex; } .site-header__toggle { display: none; } .nav-panel { display: none !important; } .cards { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .card__text { font-size: .98rem; } .value__text { font-size: 1rem; } } /* -------------------------------------------------------------------------- 17. Reduced motion — intentionally NOT honoured on this site: the client wants the full animation language regardless of the OS "Reduce Motion" toggle (the template's original suppression block sat here). -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 18. Portofino — added micro-animations (same easing / foil language, every initial state is reset under prefers-reduced-motion) -------------------------------------------------------------------------- */ /* Foil pills: a soft sheen sweeps across on hover */ .pill--foil, .contact-form__submit { position: relative; overflow: hidden; } .pill--foil::after, .contact-form__submit::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; } .pill--foil:hover::after, .pill--foil:focus-visible::after, .contact-form__submit:hover::after, .contact-form__submit:focus-visible::after { animation: pill-sheen .9s var(--ease); } @keyframes pill-sheen { from { left: -60%; opacity: 0; } 30% { opacity: 1; } to { left: 120%; opacity: 0; } } /* Foil dividers grow out from the centre as they reveal */ .divider.reveal { transform: scaleX(.25); transform-origin: center; } .divider.reveal.is-visible { transform: scaleX(1); } /* Value icons draw themselves in when the triad reveals, and redraw on hover while the badge lifts with a foil-tinted border */ .value__icon :is(path, rect, circle) { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.5s var(--ease) .25s; } .value.is-visible .value__icon :is(path, rect, circle) { stroke-dashoffset: 0; } .value .value__badge { transition: transform .6s var(--ease), border-color .6s var(--ease), background-color .6s var(--ease); } .value:hover .value__badge { transform: translateY(-4px); border-color: rgba(192, 164, 106, .55); background: rgba(192, 164, 106, .08); } @keyframes icon-redraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } .value:hover .value__icon :is(path, rect, circle) { animation: icon-redraw 1.1s var(--ease); } /* Header brand mark draws itself once on load */ .site-header__brand .mark path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: mark-draw 1.6s var(--ease) .15s forwards; } @keyframes mark-draw { to { stroke-dashoffset: 0; } } /* Collection cards: staggered entrance — each card rises with a soft scale, then its contents cascade in (number/badge → title → place → text → link) */ .card.reveal { transform: translateY(34px) scale(.97); } .card.reveal.is-visible { transform: none; } .card.reveal :is(.card__head, .card__title, .card__place, .card__text, .card__foot) { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .card.reveal.is-visible :is(.card__head, .card__title, .card__place, .card__text, .card__foot) { opacity: 1; transform: none; } .card.reveal.is-visible .card__head { transition-delay: calc(var(--d, 0s) + .2s); } .card.reveal.is-visible .card__title { transition-delay: calc(var(--d, 0s) + .32s); } .card.reveal.is-visible .card__place { transition-delay: calc(var(--d, 0s) + .44s); } .card.reveal.is-visible .card__text { transition-delay: calc(var(--d, 0s) + .56s); } .card.reveal.is-visible .card__foot { transition-delay: calc(var(--d, 0s) + .7s); } /* Collection cards: a foil hairline slides across the top on hover */ .card { position: relative; } .card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--foil); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); } .card:hover::after, .card:focus-within::after { transform: scaleX(1); } /* About photo: settles from a gentle zoom on reveal, and zooms back in on hover — inside the container, which never changes size (overflow: hidden) */ .about__media img { transform: scale(1.07); transition: transform 3s cubic-bezier(.25, .46, .45, .94); } .about__media.is-visible img { transform: scale(1); } .about__media.is-visible:hover img { transform: scale(1.07); } /* Hero badge glyph breathes */ .badge__glyph { animation: glyph-pulse 3.6s ease-in-out infinite; } @keyframes glyph-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } /* Statement artwork: drifts barely, paints itself in on reveal, and ink waves ripple over the water in the illustration's own hand-drawn manner */ .statement__art { position: relative; display: block; width: min(100%, 520px); margin: 0 auto clamp(1.4rem, 3vw, 2rem); animation: skyline-drift 9s ease-in-out infinite; } .statement__art .statement__skyline { width: 100%; margin: 0; } @keyframes skyline-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* paint-in wipe — the mask slides open left to right when revealed */ .statement__art .statement__skyline { -webkit-mask-image: linear-gradient(105deg, #000 45%, transparent 55%); mask-image: linear-gradient(105deg, #000 45%, transparent 55%); -webkit-mask-size: 250% 100%; mask-size: 250% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; transition: -webkit-mask-position 2.4s var(--ease) .15s, mask-position 2.4s var(--ease) .15s; } .statement__art.is-visible .statement__skyline { -webkit-mask-position: 0% 0; mask-position: 0% 0; } /* (the animated ink waves were removed — the artwork itself arrives with the wave-like paint-in wipe above) */ /* Mobile nav panel: entries rise in, staggered */ .nav-panel.is-open .nav-panel__nav a { opacity: 0; animation: rise-in .7s var(--ease) forwards; } .nav-panel.is-open .nav-panel__nav a:nth-child(2) { animation-delay: .08s; } .nav-panel.is-open .nav-panel__nav a:nth-child(3) { animation-delay: .16s; } .nav-panel.is-open .nav-panel__foot { opacity: 0; animation: rise-in .7s var(--ease) .28s forwards; } /* Hero: the photograph keeps breathing after it settles (slow Ken Burns) */ .hero__media img { animation: media-settle 2.4s var(--ease) forwards, hero-kenburns 28s ease-in-out 2.6s infinite alternate; } @keyframes hero-kenburns { from { transform: scale(1); } to { transform: scale(1.07); } } /* Hero title writes itself in, letter by letter (spans added by Fx). Once JS has taken over (data-typed), the block-level rise-in stands down. */ .hero__title[data-typed] { opacity: 1; animation: none; } .hero__title .type-char { opacity: 0; transition: opacity .55s var(--ease); } .hero__title.is-typed .type-char { opacity: 1; } /* the foil italic can't be split per character — it follows as a whole */ .hero__title .type-em { display: inline-block; opacity: 0; transform: translateY(14px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); } .hero__title.is-typed .type-em { opacity: 1; transform: none; } /* The foil italic line shimmers now and then */ .hero__title em { background-size: 220% 100%; animation: foil-shimmer 7s ease-in-out 3.2s infinite; } @keyframes foil-shimmer { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } } /* Locations band writes itself in — per-character fade with a soft blur (spans are added by Fx only when motion is allowed) */ .place__note .place__char { opacity: 0; filter: blur(4px); transition: opacity .5s var(--ease), filter .5s var(--ease); } .place__note.is-typed .place__char { opacity: 1; filter: none; } /* Contact info-card icons pop in with the card */ .info-card__icon { transform: scale(.6); opacity: 0; transition: transform .8s var(--ease) .15s, opacity .8s var(--ease) .15s; } .info-card.is-visible .info-card__icon { transform: scale(1); opacity: 1; } /* (Reduced-motion suppression intentionally omitted — see section 17.) */