/* ============================================================ Shared styles for the four demo sites. Loaded after tokens.css and base.css. Each demo overrides only --accent* (and optionally --font-display) in its own , so the four read as one studio's work. ============================================================ */ /* --- Concept banner ---------------------------------------- These sites are demonstrations, not real businesses. The banner says so on every page so no visitor can mistake one for a real trading company. It is part of the design, not an afterthought. */ .d-banner { position: relative; z-index: 130; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--gutter); background: var(--ink-200); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--text-dim); text-align: center; } .d-banner strong { color: var(--text-muted); font-weight: 500; } .d-banner a { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid var(--rule-soft); } /* --- Header ------------------------------------------------- */ .d-header { position: sticky; top: 0; z-index: 120; border-bottom: 1px solid transparent; transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .d-header.is-stuck { background: var(--header-veil); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom-color: var(--line); } .d-header__inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); } .d-brand { font-family: var(--font-display); font-size: var(--t-h3); letter-spacing: var(--tr-snug); text-decoration: none; white-space: nowrap; } .d-brand span { color: var(--accent-text); } .d-nav { display: flex; gap: var(--s-6); font-size: var(--t-small); } .d-nav a { color: var(--text-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } .d-nav a:hover { color: var(--text); } /* Links move into the disclosure panel at 900px — see base.css. The breakpoint is shared with the portfolio so the toggle and the panel can never disagree about which one is showing. */ /* --- Hero --------------------------------------------------- */ .d-hero { position: relative; min-height: 88svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; } .d-hero__media { position: absolute; inset: -6% 0; z-index: -2; } .d-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.05) brightness(0.62); } /* Type sits on the photograph, so it needs its own ground rather than relying on the image happening to be dark where the words land. */ .d-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(var(--scrim-rgb) / 0.97) 2%, rgb(var(--scrim-rgb) / 0.35) 45%, rgb(var(--scrim-rgb) / 0.7) 100%), linear-gradient(to right, rgb(var(--scrim-rgb) / 0.75) 0%, transparent 60%); } .d-hero__inner { width: 100%; padding-block: var(--s-9) var(--s-8); } .d-hero__eyebrow { margin-bottom: var(--s-5); } /* Smaller than the portfolio's hero type: this hero also carries a lead, two buttons and a facts row, and at --t-h1 the headline pushed them off-screen. */ .d-hero__title { font-size: clamp(2.5rem, 1.4rem + 5.2vw, 5.25rem); margin-bottom: var(--s-5); max-width: 21ch; } .d-hero__lead { margin-bottom: var(--s-6); color: var(--paper-100); } .d-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-7); } .d-facts { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line-strong); } .d-facts div { display: grid; gap: var(--s-2); } .d-facts dt { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--text-dim); } .d-facts dd { margin: 0; font-size: var(--t-body); } /* --- Intro -------------------------------------------------- */ .d-intro__inner { display: grid; gap: var(--s-7); align-items: center; } .d-intro__title { margin-block: var(--s-5); } .d-intro__media { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); aspect-ratio: 4 / 3; background: var(--ink-100); } .d-intro__media img { position: absolute; left: 0; top: -3rem; width: 100%; height: calc(100% + 6rem); object-fit: cover; filter: saturate(0.85) contrast(1.05) brightness(0.8); } @media (min-width: 62rem) { .d-intro__inner { grid-template-columns: 1fr 1fr; gap: var(--s-9); } } /* --- Itemised list (menu / services / pricing) --------------- */ .d-list { list-style: none; padding: 0; display: grid; } .d-item { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3) var(--s-5); align-items: baseline; padding-block: var(--s-5); border-top: 1px solid var(--line); } .d-list .d-item:last-child { border-bottom: 1px solid var(--line); } .d-item__name { font-family: var(--font-display); font-size: var(--t-h3); letter-spacing: var(--tr-snug); line-height: var(--lh-snug); } .d-item__price { font-family: var(--font-mono); font-size: var(--t-small); color: var(--accent-text); white-space: nowrap; } .d-item__note { grid-column: 1 / -1; color: var(--text-muted); font-size: var(--t-small); line-height: var(--lh-loose); max-width: 58ch; } .d-group + .d-group { margin-top: var(--s-8); } .d-group__label { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-4); } /* --- Gallery ------------------------------------------------- */ .d-gallery { list-style: none; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: 1fr; } .d-shot { position: relative; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--ink-100); aspect-ratio: 4 / 3; } .d-shot img { position: absolute; left: 0; top: -2.5rem; width: 100%; height: calc(100% + 5rem); object-fit: cover; filter: saturate(0.85) contrast(1.05) brightness(0.78); transition: scale var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); } .d-shot:hover img { scale: 1.05; filter: saturate(1) contrast(1.05) brightness(0.9); } @media (min-width: 45rem) { .d-gallery { grid-template-columns: repeat(3, 1fr); } .d-shot--wide { grid-column: span 2; aspect-ratio: 16 / 9; } } /* --- Reviews -------------------------------------------------- */ .d-reviews { list-style: none; padding: 0; display: grid; gap: var(--s-5); grid-template-columns: 1fr; } @media (min-width: 45rem) { .d-reviews { grid-template-columns: repeat(3, 1fr); } } .d-review { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-6); background: var(--ink-050); border: 1px solid var(--line); border-radius: var(--r-lg); } .d-review__stars { color: var(--accent); font-size: var(--t-small); letter-spacing: 0.2em; } .d-review blockquote { margin: 0; font-family: var(--font-display); font-size: var(--t-h3); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); } .d-review figcaption { font-size: var(--t-small); color: var(--text-dim); } /* --- Visit / contact ------------------------------------------ */ .d-visit__inner { display: grid; gap: var(--s-8); } @media (min-width: 62rem) { .d-visit__inner { grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: start; } } .d-hours { display: grid; gap: 0; margin-top: var(--s-6); } .d-hours div { display: flex; justify-content: space-between; gap: var(--s-5); padding-block: var(--s-3); border-top: 1px solid var(--line); font-size: var(--t-small); } .d-hours div:last-child { border-bottom: 1px solid var(--line); } .d-hours dt { color: var(--text-muted); } .d-hours dd { margin: 0; } .d-address { margin-top: var(--s-6); font-style: normal; color: var(--text-muted); line-height: var(--lh-loose); } .d-email { display: inline-grid; gap: var(--s-2); margin-top: var(--s-5); text-decoration: none; } .d-email__label { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--text-dim); } .d-email__addr { font-family: var(--font-display); font-size: var(--t-h3); letter-spacing: var(--tr-snug); word-break: break-word; transition: color var(--dur-fast) var(--ease-out); } .d-email:hover .d-email__addr { color: var(--accent-text); } /* --- Form ------------------------------------------------------ */ .d-form { display: grid; gap: var(--s-5); padding: var(--s-7) var(--s-6); background: var(--ink-050); border: 1px solid var(--line); border-radius: var(--r-lg); align-content: start; } .d-form .field { display: grid; gap: var(--s-2); } .d-form label { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--text-dim); } .d-form input, .d-form textarea, .d-form select { width: 100%; padding: var(--s-4); background: var(--ink-000); border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--text); font-size: var(--t-small); transition: border-color var(--dur-fast) var(--ease-out); } .d-form textarea { resize: vertical; min-height: 6rem; } .d-form input:hover, .d-form textarea:hover, .d-form select:hover { border-color: var(--paper-400); } .d-form input:focus, .d-form textarea:focus, .d-form select:focus { outline: none; border-color: var(--accent); background: var(--ink-050); } .d-form .field__error { font-size: var(--t-eyebrow); color: var(--danger); } .d-form .field.is-invalid input, .d-form .field.is-invalid textarea { border-color: var(--danger); } .d-form__status { font-size: var(--t-small); color: var(--text-muted); min-height: 1.2em; } .d-form__status.is-error { color: var(--danger); } .d-form__status.is-success { color: var(--accent-text); } /* --- Footer ----------------------------------------------------- */ .d-footer { border-top: 1px solid var(--line); padding-block: var(--s-7); } .d-footer__inner { display: grid; gap: var(--s-5); align-items: center; } .d-footer__fine { font-size: var(--t-eyebrow); line-height: var(--lh-loose); color: var(--text-dim); } @media (min-width: 50rem) { .d-footer__inner { grid-template-columns: auto 1fr; gap: var(--s-7); } .d-footer__fine { text-align: right; } } /* --- Back to portfolio ------------------------------------------ */ .d-back { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-small); color: var(--text-muted); text-decoration: none; } .d-back:hover { color: var(--text); }