/* One-page layer. Loaded after styles.css and only by onepage.html, so the multi-page site is unaffected. Two jobs: 1. Structure the one-pager needs - sticky nav, scroll offsets, rhythm. 2. A single type scale. styles.css sizes headings by tag (.project-text-box h2, .map-link h2, ...). Merging eight pages into one document forces every heading down a level or two, which silently unbinds all of those rules and drops the headings to browser defaults - project titles ended up smaller than their own body copy. Everything below is therefore matched on :is(h1,h2,h3,h4,h5,h6) so it holds at whatever level a heading lands on. */ /* --- type scale ---------------------------------------------------------- */ :root { --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --fs-lead: clamp(1.08rem, 1rem + 0.4vw, 1.3rem); --fs-meta: clamp(1rem, 0.95rem + 0.28vw, 1.15rem); --fs-panel: clamp(1.12rem, 1.05rem + 0.35vw, 1.35rem); --fs-project: clamp(1.5rem, 1.22rem + 1.25vw, 2.15rem); --fs-subhead: clamp(1.1rem, 1rem + 0.45vw, 1.4rem); --fs-section: clamp(2rem, 1.45rem + 2.5vw, 3.4rem); --ink: #222; --ink-soft: #3a3a3a; --brand: #900000; --rule: #e3e3e3; --section-pad: clamp(30px, 3vw, 52px); --head-gap: clamp(26px, 3.5vw, 52px); --shell: min(1120px, calc(100% - 40px)); } /* --- sticky navigation --------------------------------------------------- */ /* styles.css pins body to height:100%, which caps the sticky containing block at one viewport - the header scrolled away after the first screen. Letting body grow fixes it. overflow-x:clip still blocks sideways scrolling but, unlike hidden, does not create a scroll container that would break sticky. */ html, body { height: auto; } body { /* 100% would resolve against an auto-height and do nothing, leaving the flex column with no floor - short pages ended with the footer stranded mid-screen. */ min-height: 100vh; min-height: 100dvh; overflow-x: clip; font-size: var(--fs-body); } .onepage-header { position: sticky; top: 0; z-index: 12; background-color: #fff; border-bottom: 1px solid var(--rule); } .onepage-header .dropdown-menu { z-index: 20; } .onepage-section, .onepage-subsection, .project[id], .project-image-container[id] { scroll-margin-top: 5.5rem; } @media (max-width: 767px) { .onepage-section, .onepage-subsection, .project[id], .project-image-container[id] { scroll-margin-top: 4rem; } } /* --- current-section state ----------------------------------------------- */ [data-spy][aria-current="true"] { text-decoration: underline var(--brand); text-underline-offset: 4px; font-weight: 700; } .onepage-subnav { display: none; position: absolute; left: -20px; min-width: 9rem; padding-bottom: 6px; background-color: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); z-index: 20; } .nav-dropdown-container:hover .onepage-subnav, .nav-dropdown-container:focus-within .onepage-subnav { display: block; } @media (max-width: 767px) { .onepage-subnav { display: block; position: static; box-shadow: none; min-width: 0; padding-bottom: 0; } .onepage-subnav .dropdown-link { padding-left: 40px; } } /* --- section rhythm ------------------------------------------------------ */ /* One padding value, and the tint alternates so every boundary is a colour change rather than two stacked pools of empty white. */ .onepage-section { padding-block: var(--section-pad); } .onepage-section--flush { padding-top: 0; } .onepage-section--tint { background-color: #f6f6f6; } /* Lifted blocks carry their own outer margins (.content-section, .cta-band, .page-hero); at the edges of a section those double up with the padding. */ .onepage-section > :first-child { margin-top: 0; } .onepage-section > :last-child { margin-bottom: 0; } /* --- universal section head ---------------------------------------------- */ .onepage-head { width: var(--shell); margin: 0 auto var(--head-gap); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr); gap: clamp(24px, 4vw, 56px); align-items: center; } .onepage-head--text { grid-template-columns: 1fr; max-width: 900px; } .onepage-head-text > :first-child { margin-top: 0; } .onepage-head :is(h1, h2, h3, h4, h5, h6) { margin: 0; color: var(--ink); font-size: var(--fs-section); line-height: 1.04; letter-spacing: -0.03em; } .onepage-head .page-eyebrow { margin: 0 0 10px; color: var(--brand); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .onepage-head .page-lead { margin: 16px 0 0; max-width: 62ch; color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.55; } /* display comes from .cta-row now; restating it here would outrank the .cta-row--equal modifier on specificity. */ .onepage-head .cta-row { margin-top: 22px; } .onepage-head-media { aspect-ratio: 4 / 3; overflow: hidden; } .onepage-head-media img { width: 100%; height: 100%; display: block; object-fit: cover; /* The team photo is almost square. Any crop must come off the bottom, never split evenly top and bottom, or it takes their heads. */ object-position: center top; } @media (max-width: 900px) { .onepage-head { grid-template-columns: 1fr; } /* Stacked and full width, so let each photo keep its own proportions instead of being forced into a letterbox. */ .onepage-head-media { aspect-ratio: auto; } .onepage-head-media img { height: auto; } } /* --- subsection label ---------------------------------------------------- */ .onepage-subsection + .onepage-subsection { margin-top: clamp(40px, 6vw, 80px); } .onepage-subhead { width: var(--shell); margin: 0 auto; padding-bottom: 10px; border-bottom: 2px solid var(--brand); color: var(--brand); font-size: var(--fs-subhead); text-transform: uppercase; letter-spacing: 0.08em; } /* --- projects ------------------------------------------------------------ */ /* Twelve in a row, so the separator is spacing plus a hairline rather than the full-width red rule the standalone pages used between each one. */ .onepage-section .project .hr-top, .onepage-section .card-section .hr-top { display: none; } .onepage-section .project { padding-block: clamp(24px, 2.6vw, 44px); } /* .project already owns the vertical rhythm; the lifted block's own margin would stack on top of it. */ .onepage-section .project-text-image-box { margin-block: 0; } /* Same for the content blocks inside a section. */ .onepage-section .content-section { margin-block: clamp(22px, 2.6vw, 40px); } .onepage-section .cta-band { margin-block: clamp(24px, 3vw, 44px); } .onepage-section .project + .project { border-top: 1px solid var(--rule); } /* First heading in the block is the project title, any heading directly after one is the location line. Level-independent by construction. */ .project-text-box :is(h1, h2, h3, h4, h5, h6), .collage-text-box :is(h1, h2, h3, h4, h5, h6) { margin: 0 0 6px; color: var(--ink); font-size: var(--fs-project); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; } .project-text-box :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6), .collage-text-box :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) { margin: 0 0 14px; color: var(--brand); font-size: var(--fs-meta); font-weight: 400; letter-spacing: 0; } .project-text-box p { color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.6; } /* The award link was sized off a percentage of the text column. */ .onepage-section .project-text-box .button-link { max-width: none; width: fit-content; margin-top: 18px; padding: 0 18px; font-size: 0.95rem; } @media (min-width: 768px) { .onepage-section .project:nth-of-type(even) .project-text-image-box { flex-direction: row-reverse; } } .onepage-section .card-section { margin-top: clamp(24px, 4vw, 48px); } .onepage-section .collage > :is(h1, h2, h3, h4, h5, h6) { margin: 10px 0 0; color: var(--brand); font-size: var(--fs-meta); font-weight: 400; text-align: right; letter-spacing: 0.02em; } /* --- panels, cards, bands ------------------------------------------------ */ .onepage-section :is(.info-panel, .contact-card) :is(h1, h2, h3, h4, h5, h6) { margin: 0 0 10px; color: var(--brand); font-size: var(--fs-panel); line-height: 1.2; } .onepage-section :is(.info-panel, .contact-card) :is(p, li) { color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.55; } .onepage-section .process-step :is(h1, h2, h3, h4, h5, h6) { margin: 0 0 8px; color: var(--ink); font-size: var(--fs-panel); } .onepage-section .process-step p { font-size: var(--fs-body); line-height: 1.55; } .onepage-section .section-heading { margin: 0 0 18px; color: var(--ink); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.15rem); line-height: 1.1; letter-spacing: -0.02em; } .onepage-section .cta-band :is(h1, h2, h3, h4, h5, h6) { margin: 0 0 8px; color: var(--ink); font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.9rem); line-height: 1.15; } .onepage-section .cta-band { background-color: #ececec; } .onepage-section--tint .cta-band { background-color: #fff; } .onepage-section .cta-band p { font-size: var(--fs-body); } .onepage-section .map-link :is(h1, h2, h3, h4, h5, h6) { margin: 0 0 10px; color: #fff; font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1.1; } .onepage-section .map-link p { font-size: var(--fs-lead); } .onepage-section .legal-details :is(h1, h2, h3, h4, h5, h6) { font-size: var(--fs-panel); } .onepage-section .legal-details p { font-size: 0.95rem; } /* --- home section -------------------------------------------------------- */ .onepage-section .quote { font-size: var(--fs-lead); } .onepage-section .quote :is(h1, h2, h3, h4, h5, h6) { margin: 0; font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); line-height: 1.2; } .onepage-section .text-box :is(h1, h2, h3, h4, h5, h6) { margin: 0 0 14px; color: var(--ink); font-size: clamp(1.8rem, 1.4rem + 2vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; } .onepage-section .text-box p { font-size: var(--fs-body); line-height: 1.6; } /* --- large screens ------------------------------------------------------- */ /* Above ~1600px a 1120px column reads as a narrow ribbon with empty gutters, and the project rows drift out of line with everything else. */ @media (min-width: 1600px) { :root { --shell: min(1360px, calc(100% - 96px)); --section-pad: clamp(52px, 3.4vw, 76px); } .onepage-section .content-section, .onepage-section .cta-band, .onepage-section .legal-details { width: var(--shell); } /* keep project rows on the same left/right edge as the headings */ .onepage-section .project-text-image-box { width: var(--shell); margin-inline: auto; } .onepage-section .card-section { width: var(--shell); margin-inline: auto; } /* :not() so the text-only variant keeps its single column - otherwise its content is squeezed into a half-width column with no image beside it. */ .onepage-head:not(.onepage-head--text) { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr); } } /* Very wide monitors: stop the text measure growing past comfortable reading. */ @media (min-width: 2000px) { :root { --shell: min(1520px, calc(100% - 120px)); } } /* --- accessible page title ----------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }