/* ============================================================================= RENAISSANCE HOMES OF NAPLES — STYLESHEET ============================================================================= BRAND TOKENS live in the :root block directly below. Palette values were sampled from the logo per the design brief; adjust them here and the whole site follows. Type families are set in index.html (Google Fonts) and referenced here as --font-display / --font-body. ========================================================================== */ :root { /* Palette (from the brief, sampled from the logo) */ --ink: #2C1E12; /* deepest brown: primary text, deep backgrounds */ --espresso: #4A2E18; /* dark sections, hero/project backdrops */ --bone: #F4EFE1; /* light page base */ --parchment: #E9E1C8; /* secondary surfaces, cards, dividers */ --olive: #8C8A4C; /* the single accent: links, active states, actions */ --gold: #A9772E; /* hover/active detail, used sparingly */ --camel: #B4966A; /* warm neutral detail */ /* Darker companions for SMALL text on light backgrounds, so labels and links meet WCAG AA contrast. The brighter brand values above stay in use for large type, buttons, and decorative strokes. */ --olive-text: #6E6C3B; --gold-text: #8A5F26; --camel-text: #C2A379; /* small labels on the dark espresso sections */ /* Derived tints */ --bone-translucent: rgba(244, 239, 225, 0.92); --ink-soft: rgba(44, 30, 18, 0.72); --line: rgba(44, 30, 18, 0.14); --line-on-dark: rgba(244, 239, 225, 0.18); --bone-on-dark-soft: rgba(244, 239, 225, 0.74); /* Type */ --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif; /* Rhythm */ --space-section: clamp(5rem, 12vw, 9rem); --gutter: clamp(1.25rem, 4vw, 3rem); --max-width: 1440px; --measure: 34em; /* Motion: slow, expensive easing throughout */ --ease: cubic-bezier(0.25, 0.1, 0.25, 1); --dur-slow: 0.9s; --dur-med: 0.5s; --dur-fast: 0.25s; } /* ---------------------------------------------------------------- reset --- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.7; font-weight: 400; color: var(--ink); background: var(--bone); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4, p, figure { margin: 0; } a { color: inherit; } button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } ::selection { background: var(--parchment); color: var(--ink); } /* ------------------------------------------------------------ utilities --- */ .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100%; left: 1rem; z-index: 200; padding: 0.6rem 1rem; background: var(--ink); color: var(--bone); font-size: 0.8rem; text-decoration: none; } .skip-link:focus { top: 1rem; } /* Small letter-spaced uppercase label, echoing the wordmark */ .label { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--olive-text); } .on-dark .label { color: var(--camel-text); } /* Display headlines: large, quiet serif */ .headline { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: 0.01em; } .headline--xl { font-size: clamp(2.6rem, 6vw, 4.75rem); } .headline--lg { font-size: clamp(2.1rem, 4.5vw, 3.5rem); } .headline--md { font-size: clamp(1.6rem, 3vw, 2.4rem); } .prose { max-width: var(--measure); font-size: 1.0625rem; line-height: 1.85; color: var(--ink-soft); } .on-dark .prose { color: var(--bone-on-dark-soft); } .prose + .prose { margin-top: 1.6rem; } /* Quiet text link with animated underline */ .text-link { display: inline-flex; align-items: baseline; gap: 0.6em; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; color: var(--olive-text); padding-bottom: 0.35em; position: relative; transition: color var(--dur-fast) var(--ease); } .text-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0.35); transform-origin: left; transition: transform var(--dur-med) var(--ease); } .text-link:hover { color: var(--gold-text); } .text-link:hover::after { transform: scaleX(1); } .on-dark .text-link { color: var(--parchment); } .on-dark .text-link:hover { color: var(--camel); } /* Primary action: quiet outlined button */ .button { display: inline-block; padding: 1rem 2.4rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; text-align: center; color: var(--ink); border: 1px solid var(--ink); background: transparent; transition: background-color var(--dur-med) var(--ease), color var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease); } .button:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); } .button--accent { color: var(--bone); background: var(--olive); border-color: var(--olive); } .button--accent:hover { background: var(--gold); border-color: var(--gold); color: var(--bone); } .on-dark .button { color: var(--bone); border-color: var(--bone-on-dark-soft); } .on-dark .button:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); } /* Dark, gallery-like sections */ .on-dark { background: var(--espresso); color: var(--bone); } /* -------------------------------------------------------------- header --- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: transform var(--dur-med) var(--ease), background-color var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease); border-bottom: 1px solid transparent; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 1.4rem; } /* Header states: transparent over dark heroes, solid once scrolled */ .site-header--overlay { color: var(--bone); } .site-header--solid { background: var(--bone-translucent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: var(--line); color: var(--ink); } .site-header--hidden { transform: translateY(-100%); } /* Typographic lockup derived from the wordmark; the ornate crest is reserved for the footer and About page where it can be shown large. */ .wordmark { text-decoration: none; color: inherit; line-height: 1.25; display: inline-block; } .wordmark__name { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap; } .wordmark__place { display: block; font-size: 0.575rem; font-weight: 500; letter-spacing: 0.52em; text-transform: uppercase; opacity: 0.66; margin-top: 0.1rem; } .site-nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.5vw, 2.4rem); } .site-nav__link { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; opacity: 0.8; padding-bottom: 0.3em; position: relative; transition: opacity var(--dur-fast) var(--ease); } .site-nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-med) var(--ease); } .site-nav__link:hover { opacity: 1; } .site-nav__link:hover::after, .site-nav__link[aria-current="page"]::after { transform: scaleX(1); } .site-nav__link[aria-current="page"] { opacity: 1; } .site-nav__cta { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; padding: 0.7rem 1.4rem; border: 1px solid currentColor; transition: background-color var(--dur-med) var(--ease), color var(--dur-med) var(--ease); } .site-header--overlay .site-nav__cta:hover { background: var(--bone); color: var(--ink); } .site-header--solid .site-nav__cta:hover { background: var(--ink); color: var(--bone); } /* Mobile menu */ .menu-toggle { display: none; z-index: 120; width: 2.4rem; height: 2.4rem; position: relative; } .menu-toggle span, .menu-toggle::before, .menu-toggle::after { content: ""; position: absolute; left: 0.35rem; right: 0.35rem; height: 1.5px; background: currentColor; transition: transform var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease); } .menu-toggle::before { top: 0.85rem; } .menu-toggle span { top: 50%; } .menu-toggle::after { bottom: 0.85rem; } .menu-toggle[aria-expanded="true"]::before { transform: translateY(0.33rem) rotate(45deg); } .menu-toggle[aria-expanded="true"] span { opacity: 0; } .menu-toggle[aria-expanded="true"]::after { transform: translateY(-0.33rem) rotate(-45deg); } @media (max-width: 820px) { .menu-toggle { display: block; } .site-nav { position: fixed; inset: 0; z-index: 110; flex-direction: column; justify-content: center; gap: 2.2rem; background: var(--espresso); color: var(--bone); visibility: hidden; opacity: 0; transition: opacity var(--dur-med) var(--ease), visibility 0s var(--dur-med); } .site-nav.is-open { visibility: visible; opacity: 1; transition: opacity var(--dur-med) var(--ease); } .site-nav__link { font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: none; } .site-nav__cta { margin-top: 1rem; } body.menu-open { overflow: hidden; } body.menu-open .site-header { color: var(--bone); } body.menu-open .site-header { background: transparent; border-bottom-color: transparent; } body.menu-open .wordmark { position: relative; z-index: 120; } } /* ---------------------------------------------------------------- hero --- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: var(--bone); background: var(--espresso); overflow: hidden; } .hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Slow settle-in on load */ animation: hero-settle 2.4s var(--ease) both; } @keyframes hero-settle { from { transform: scale(1.05); opacity: 0.6; } to { transform: scale(1); opacity: 1; } } .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28, 18, 10, 0.72) 0%, rgba(28, 18, 10, 0.18) 45%, rgba(28, 18, 10, 0.28) 100%); } .hero__content { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(5rem, 12vh, 8rem); } .hero__tagline { max-width: 14em; text-wrap: balance; } .hero__support { margin-top: 1.4rem; max-width: 30em; font-size: 0.95rem; line-height: 1.8; color: var(--bone-on-dark-soft); } .hero__scroll-cue { position: absolute; z-index: 2; bottom: 2rem; left: 50%; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 0.9rem; text-decoration: none; color: var(--bone-on-dark-soft); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; transition: color var(--dur-fast) var(--ease); } .hero__scroll-cue::after { content: ""; width: 1px; height: 2.6rem; background: currentColor; animation: cue-drift 2.8s var(--ease) infinite; transform-origin: top; } .hero__scroll-cue:hover { color: var(--bone); } @keyframes cue-drift { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } @media (max-width: 640px) { /* Keep the supporting line clear of the scroll cue on small screens */ .hero__content { padding-bottom: 10rem; } } /* Project-page hero variant: shorter, with title block */ .hero--project { min-height: 88svh; } .hero__meta { display: flex; flex-wrap: wrap; gap: 0.6em 1.6em; margin-bottom: 1.2rem; } .hero__meta .label { color: var(--camel); } /* ------------------------------------------------------------ sections --- */ .section { padding-block: var(--space-section); } .section--flush-bottom { padding-bottom: 0; } .section-head { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); } .section-head .headline { max-width: 16em; text-wrap: balance; } /* ------------------------------------------------------ featured (home) --- */ .feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; } .feature + .feature { margin-top: var(--space-section); } .feature:nth-child(even) .feature__media { order: 2; } .feature__media { display: block; overflow: hidden; text-decoration: none; } .feature__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.6s var(--ease); } .feature__media:hover img { transform: scale(1.035); } .feature__body { display: flex; flex-direction: column; align-items: flex-start; gap: 1.3rem; padding-bottom: 0.5rem; } .feature__title { text-decoration: none; transition: color var(--dur-fast) var(--ease); } .feature__title:hover { color: var(--gold); } @media (max-width: 820px) { .feature { grid-template-columns: 1fr; align-items: start; } .feature:nth-child(even) .feature__media { order: 0; } } /* ----------------------------------------------------- portfolio grid --- */ .filters { display: flex; flex-wrap: wrap; gap: 0.4rem 1.8rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .filters__button { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); padding: 0.4rem 0; position: relative; transition: color var(--dur-fast) var(--ease); } .filters__button::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--olive); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-med) var(--ease); } .filters__button:hover { color: var(--ink); } .filters__button.is-active { color: var(--olive-text); } .filters__button.is-active::after { transform: scaleX(1); } .portfolio-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 3.5vw, 3rem); transition: opacity var(--dur-med) var(--ease); } .portfolio-grid.is-fading { opacity: 0; } .project-card { display: block; text-decoration: none; grid-column: span 12; } /* With several projects, alternate scale so the grid reads as curated: a repeating rhythm of one wide card then two supporting cards. */ .project-card--wide { grid-column: span 12; } .project-card--major { grid-column: span 7; } .project-card--minor { grid-column: span 5; align-self: end; } @media (max-width: 820px) { .project-card--major, .project-card--minor { grid-column: span 12; } } .project-card__media { overflow: hidden; background: var(--parchment); position: relative; } .project-card__media img { width: 100%; object-fit: cover; aspect-ratio: 3 / 2; transition: transform 1.6s var(--ease); } .project-card--wide .project-card__media img { aspect-ratio: 16 / 9; } .project-card:hover .project-card__media img { transform: scale(1.035); } .project-card__body { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 2rem; padding-top: 1.3rem; } .project-card__title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.5vw, 2.1rem); font-weight: 500; line-height: 1.15; transition: color var(--dur-fast) var(--ease); } .project-card:hover .project-card__title { color: var(--gold); } .project-card__summary { width: 100%; max-width: 44em; margin-top: 0.5rem; font-size: 0.95rem; color: var(--ink-soft); } /* Sole-project presentation: one entry shown at full editorial scale, so a portfolio of one reads as selective rather than sparse. */ .project-card--solo .project-card__media img { aspect-ratio: 21 / 10; } .project-card--solo .project-card__body { padding-top: 1.6rem; } .portfolio-note { margin-top: var(--space-section); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 3rem; } .portfolio-note p { font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.55rem); font-style: italic; color: var(--ink-soft); } /* ----------------------------------------------------- project gallery --- */ .vision { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 6rem); } .vision__copy { font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.8rem); font-weight: 500; line-height: 1.55; max-width: 26em; } @media (max-width: 820px) { .vision { grid-template-columns: 1fr; } } .gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2.5vw, 2.25rem); } .gallery__item { grid-column: span 12; overflow: hidden; padding: 0; display: block; width: 100%; cursor: zoom-in; background: rgba(44, 30, 18, 0.06); } .on-dark .gallery__item { background: rgba(244, 239, 225, 0.05); } .gallery__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; transition: transform 1.6s var(--ease), opacity var(--dur-med) var(--ease); } .gallery__item:hover img { transform: scale(1.03); } /* Rhythm within the gallery: full-bleed moments, pairs, and details */ .gallery__item--full { grid-column: span 12; } .gallery__item--full img { aspect-ratio: 16 / 9; } .gallery__item--half { grid-column: span 6; } .gallery__item--wide { grid-column: 2 / span 10; } .gallery__item--wide img { aspect-ratio: 3 / 2; } @media (max-width: 640px) { .gallery__item--half { grid-column: span 12; } .gallery__item--wide { grid-column: span 12; } .gallery__item--full img { aspect-ratio: 3 / 2; } } .project-next { border-top: 1px solid var(--line-on-dark); } .project-next__link { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; text-decoration: none; transition: color var(--dur-fast) var(--ease); } .project-next__link:hover .headline { color: var(--camel); } .project-next__link .headline { transition: color var(--dur-med) var(--ease); } /* -------------------------------------------------------------- lightbox --- */ .lightbox { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; background: rgba(24, 15, 8, 0.96); color: var(--bone); opacity: 0; visibility: hidden; transition: opacity var(--dur-med) var(--ease), visibility 0s var(--dur-med); } .lightbox.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-med) var(--ease); } body.lightbox-open { overflow: hidden; } .lightbox__bar { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem var(--gutter); } .lightbox__counter { font-size: 0.72rem; letter-spacing: 0.2em; color: var(--bone-on-dark-soft); font-variant-numeric: tabular-nums; } .lightbox__close { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-on-dark-soft); padding: 0.5rem; transition: color var(--dur-fast) var(--ease); } .lightbox__close:hover { color: var(--bone); } .lightbox__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 clamp(1rem, 8vw, 7rem) clamp(1.5rem, 4vh, 3rem); position: relative; touch-action: pan-y; } .lightbox__image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: opacity var(--dur-med) var(--ease), transform 0.7s var(--ease); } .lightbox__image.is-switching { opacity: 0; transform: scale(1.015); /* barely-there settle as each image arrives */ } .lightbox__arrow { position: absolute; top: 0; bottom: 0; width: clamp(3rem, 9vw, 7rem); display: flex; align-items: center; justify-content: center; color: var(--bone-on-dark-soft); transition: color var(--dur-fast) var(--ease); } .lightbox__arrow:hover { color: var(--bone); } .lightbox__arrow--prev { left: 0; } .lightbox__arrow--next { right: 0; } .lightbox__arrow svg { width: 2.1rem; height: 2.1rem; } .lightbox__caption { text-align: center; padding: 0 var(--gutter) 1.4rem; font-size: 0.8rem; color: var(--bone-on-dark-soft); min-height: 2.6em; } @media (max-width: 640px) { .lightbox__arrow { display: none; } /* swipe takes over on touch */ .lightbox__stage { padding-inline: 1rem; } } /* Tappable phone and email lines (footer and contact details) */ .site-footer__meta a, .contact-details a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease); } .site-footer__meta a:hover, .contact-details a:hover { border-bottom-color: currentColor; } /* ----------------------------------------------------------- image band --- */ /* A full-bleed breath of photography between text sections (home page) */ .image-band { overflow: hidden; } .image-band img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; } @media (max-width: 640px) { .image-band img { aspect-ratio: 4 / 3; } } /* ------------------------------------------------------ brand statement --- */ .statement { background: var(--parchment); } .statement__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 6rem); } .statement__copy { font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 500; line-height: 1.6; max-width: 27em; } @media (max-width: 820px) { .statement__inner { grid-template-columns: 1fr; } } /* --------------------------------------------------------- process list --- */ /* Hand-drawn stage marks on parchment tiles (rendered by js/main.js) */ .stage-tile { width: 72px; height: 72px; flex: none; background: var(--parchment); display: inline-flex; align-items: center; justify-content: center; color: var(--olive-text); } .stage-tile svg { width: 34px; height: 34px; } .stage-tile svg * { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; } .stage-tile svg .gold { stroke: var(--gold); } .stage-tile svg .dash { stroke-dasharray: 2.4 2.1; } .stages { list-style: none; margin: 0; padding: 0; counter-reset: stage; } .stages__item { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); gap: 1rem 3rem; align-items: baseline; padding-block: clamp(1.8rem, 4vw, 2.8rem); border-top: 1px solid var(--line); } /* With an icon tile, the row gains a leading column and top-aligns */ .stages__item--tiled { grid-template-columns: auto minmax(0, 2fr) minmax(0, 4fr) minmax(0, 5fr); align-items: start; } .stages__item--tiled .stages__number { padding-top: 0.2rem; } .stages__item--tiled .stages__name { margin-top: -0.4rem; } .stages__item:last-child { border-bottom: 1px solid var(--line); } .stages__number { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.14em; color: var(--gold-text); } .stages__name { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 500; line-height: 1.2; } .stages__desc { color: var(--ink-soft); max-width: var(--measure); } @media (max-width: 820px) { .stages__item, .stages__item--tiled { grid-template-columns: 1fr; gap: 0.5rem; } .stages__item--tiled .stage-tile { width: 60px; height: 60px; margin-bottom: 0.6rem; } .stages__item--tiled .stage-tile svg { width: 28px; height: 28px; } .stages__item--tiled .stages__name { margin-top: 0; } } /* Compact strip version for the home page */ .stages-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; } .stages-strip__item { border-top: 1px solid var(--line); padding-top: 1.2rem; } .stages-strip__item .stage-tile { width: 56px; height: 56px; margin-bottom: 1rem; } .stages-strip__item .stage-tile svg { width: 26px; height: 26px; } .stages-strip__number { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.14em; color: var(--gold-text); display: block; margin-bottom: 0.5rem; } .stages-strip__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; line-height: 1.3; } @media (max-width: 960px) { .stages-strip { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .stages-strip { grid-template-columns: 1fr; gap: 1.2rem; } } /* ---------------------------------------------------------------- about --- */ .about-lead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; } @media (max-width: 820px) { .about-lead { grid-template-columns: 1fr; } } .about-lead__crest { display: flex; justify-content: center; padding: clamp(2rem, 5vw, 4rem); background: var(--parchment); } .about-lead__crest img { width: min(100%, 340px); } /* The team portrait that replaces the crest once the photo exists (see the TEAM PHOTO comment in about.html) */ .about-lead__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .pull-quote { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 500; font-style: italic; line-height: 1.35; max-width: 20em; text-wrap: balance; } .pull-quote footer { margin-top: 1.6rem; font-family: var(--font-body); font-style: normal; } /* -------------------------------------------------------------- contact --- */ .contact-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; } @media (max-width: 820px) { .contact-layout { grid-template-columns: 1fr; } } .contact-details { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.95rem; } .contact-details strong { color: var(--ink); font-weight: 500; } .form { display: grid; gap: 1.8rem; } .form__field { display: grid; gap: 0.55rem; } .form__label { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); } .form__input { font: inherit; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0.6rem 0; transition: border-color var(--dur-med) var(--ease); width: 100%; appearance: none; -webkit-appearance: none; } .form__input:focus { outline: none; border-bottom-color: var(--olive); } .form__input::placeholder { color: rgba(44, 30, 18, 0.35); } select.form__input { background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; } textarea.form__input { resize: vertical; min-height: 7.5rem; } .form__error { font-size: 0.8rem; color: var(--gold-text); min-height: 1.2em; } .form__field.has-error .form__input { border-bottom-color: var(--gold); } /* Honeypot field: parked far off-screen, invisible to real visitors */ .form__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Form-level status line (send failures) */ .form__status { font-size: 0.85rem; color: var(--gold-text); margin-top: 0.9rem; max-width: 34em; } .form__confirmation { font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 500; line-height: 1.6; max-width: 24em; padding: clamp(2rem, 4vw, 3rem); background: var(--parchment); } /* --------------------------------------------------------------- footer --- */ .site-footer { background: var(--espresso); color: var(--bone); } .site-footer__inner { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; padding-block: var(--space-section) clamp(2rem, 5vw, 3.5rem); } /* The ornate crest, treated as a heritage seal on a clean cream panel */ .site-footer__seal { background: var(--bone); padding: 1.6rem 1.9rem; display: inline-block; } .site-footer__seal img { width: 108px; } .site-footer__tagline { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 500; line-height: 1.4; max-width: 16em; text-wrap: balance; } .site-footer__meta { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.8rem; font-size: 0.9rem; color: var(--bone-on-dark-soft); } .site-footer__nav { display: flex; flex-direction: column; gap: 0.9rem; } .site-footer__nav a { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--bone-on-dark-soft); transition: color var(--dur-fast) var(--ease); } .site-footer__nav a:hover { color: var(--camel); } .site-footer__bottom { border-top: 1px solid var(--line-on-dark); padding-block: 1.6rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; font-size: 0.78rem; color: rgba(244, 239, 225, 0.5); } @media (max-width: 820px) { .site-footer__inner { grid-template-columns: 1fr; } } /* ------------------------------------------------------- scroll reveals --- */ .reveal { opacity: 0; transform: translateY(2.2rem); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } /* --------------------------------------------------------- reduced motion --- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } .hero__image { animation: none; } }