/* The Yard Steward. Page styles only: scrollcraft.css is the mechanism and is never edited here. Colours are pulled from John's own card: the engraving green, a soft tan a step deeper than the card stock, and an off-black. Owner direction (2026-09-26): classy and sharp. Every corner is square, headings are set in the regular weight of the serif rather than bold, small labels are tracked capitals, and depth comes from hairlines and offset frames instead of soft blurred shadows. */ :root { --tan: #EAE0C8; --tan-hi: #F5EFE0; --green: #1F5435; --green-deep: #1C4630; --black: #121611; --sage: #A9CBA5; --sc-canvas: var(--tan); --sc-surface: var(--tan-hi); --sc-ink: #151A15; --sc-ink-soft: #4A5044; --sc-accent: var(--green); --sc-accent-ink: var(--tan-hi); --sc-font-display: "Libre Caslon Text", Georgia, serif; --sc-font-text: "Geist", system-ui, sans-serif; --sc-shadow-color: 110 30% 8%; --sc-r-sm: 0; --sc-r-md: 0; --sc-r-lg: 0; --sc-r-pill: 0; --bar-h: 76px; --rule: color-mix(in oklab, var(--sc-ink) 18%, transparent); --track: 0.16em; } /* A section on a dark ground restates both the token and `color`, because a colour already resolved on does not follow a redefined token. */ .work, .services, .foot { --sc-ink: #EFE8D5; --sc-ink-soft: #BCB9A4; --sc-accent: var(--sage); --sc-accent-ink: var(--black); --sc-hairline: color-mix(in oklab, #EFE8D5 18%, transparent); --rule: color-mix(in oklab, #EFE8D5 18%, transparent); color: var(--sc-ink); } html { scroll-padding-top: calc(var(--bar-h) + 8px); } body { background: var(--tan); } h1, h2, h3, h4 { text-wrap: balance; } .sc-display { font-weight: 400; letter-spacing: -0.02em; line-height: 1.04; } .sc-display--lg { font-size: clamp(2.5rem, 1.7rem + 3.2vw, 4.4rem); } :focus-visible { border-radius: 0; } /* One label style for every small capital line on the page. */ .label, .hero__place, .price__freq, .plan__inc, .details dt, .rows__tag, .ba__tag { font-family: var(--sc-font-text); font-size: 0.74rem; font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; } .skip { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 10px 16px; background: var(--green); color: var(--tan-hi); text-decoration: none; transform: translateY(-160%); transition: transform var(--sc-d-fast) var(--sc-ease-out); } .skip:focus-visible { transform: none; } /* ------------------------------------------------------------------ buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 28px; border: 1px solid transparent; font-size: 0.76rem; font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out), transform 120ms var(--sc-ease-out); } .btn:active { transform: translateY(1px); } .btn--solid { background: var(--sc-accent); color: var(--sc-accent-ink); border-color: var(--sc-accent); } .btn--line { border-color: currentColor; color: var(--sc-accent); } @media (hover: hover) and (pointer: fine) { .btn--solid:hover { background: color-mix(in oklab, var(--sc-accent) 84%, black); border-color: color-mix(in oklab, var(--sc-accent) 84%, black); } .btn--line:hover { background: var(--sc-accent); color: var(--sc-accent-ink); border-color: var(--sc-accent); } } /* ---------------------------------------------------------------------- bar */ .bar { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--bar-h); display: flex; align-items: center; gap: var(--sc-6); padding-inline: var(--sc-gutter); transition: background-color var(--sc-d-base) var(--sc-ease-out), box-shadow var(--sc-d-base) var(--sc-ease-out); } .bar--solid { background: var(--tan); box-shadow: 0 1px 0 var(--rule); } .bar__brand { display: flex; align-items: center; gap: 12px; font-family: var(--sc-font-display); font-weight: 400; font-size: 1.18rem; color: var(--green); text-decoration: none; letter-spacing: -0.005em; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity var(--sc-d-base) var(--sc-ease-out), transform var(--sc-d-base) var(--sc-ease-out); } .bar__brand img { width: 42px; height: 42px; } .bar--solid .bar__brand { opacity: 1; transform: none; pointer-events: auto; } .bar__nav { display: flex; gap: clamp(1.25rem, 2.4vw, 2.25rem); margin-left: auto; } .bar__nav a { color: var(--sc-ink); text-decoration: none; font-size: 0.74rem; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; padding: 12px 0; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 7px) / 0 1px no-repeat; transition: background-size var(--sc-d-base) var(--sc-ease-out); } .bar__nav a:hover { background-size: 100% 1px; } .bar__cta { min-height: 44px; padding: 0 20px; } .bar__menu { display: none; margin-left: auto; min-height: 44px; padding: 0 18px; border: 1px solid var(--green); background: transparent; color: var(--green); font-size: 0.74rem; font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; cursor: pointer; } .drawer { position: fixed; z-index: 59; top: var(--bar-h); inset-inline: 0; display: grid; padding: 4px var(--sc-gutter) 20px; background: var(--tan); box-shadow: 0 1px 0 var(--rule), 0 12px 24px -12px hsl(40 30% 15% / 0.3); } .drawer[hidden] { display: none; } .drawer a { padding: 16px 0; border-bottom: 1px solid var(--rule); font-family: var(--sc-font-display); font-size: 1.4rem; color: var(--sc-ink); text-decoration: none; } /* --------------------------------------------------------------------- hero The logo and name on the left, one finished yard on the right. The photo sits on an offset hairline frame: depth from a line, not a blur. */ .hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-block: calc(var(--bar-h) + clamp(1.5rem, 4vh, 3rem)) clamp(2.5rem, 7vh, 5rem); background: var(--tan); } .hero__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(3rem, 7vw, 7rem); align-items: center; } .hero__mark { width: clamp(64px, 6vw, 88px); height: auto; margin-bottom: var(--sc-6); } .hero__place { display: flex; align-items: center; gap: 14px; margin: 0 0 var(--sc-5); color: var(--green); } .hero__place::before { content: ""; width: 36px; height: 1px; background: currentColor; } .hero__title { margin: 0; font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(3rem, 1.7rem + 4vw, 5.8rem); line-height: 1; letter-spacing: -0.025em; color: var(--green); } .hero__sub { margin: var(--sc-6) 0 0; padding-top: var(--sc-6); max-width: 30ch; border-top: 1px solid var(--rule); font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sc-7); } .hero__photo { position: relative; margin: 0 18px 18px 0; aspect-ratio: 4 / 3.4; max-height: calc(100svh - var(--bar-h) - 8rem); } .hero__photo::before { content: ""; position: absolute; inset: 0; translate: 18px 18px; border: 1px solid color-mix(in oklab, var(--green) 55%, transparent); pointer-events: none; } .hero__photo img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; } /* --------------------------------------------------------------------- work */ .work { background: var(--black); padding-block: clamp(5rem, 10vw, 10rem) clamp(5.5rem, 11vw, 11rem); } .work__head { display: grid; gap: var(--sc-5); margin-bottom: clamp(3.5rem, 7vw, 6rem); } .work__how { margin: 0; max-width: 52ch; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.55; } .how--touch { display: none; } @media (hover: none) { .how--fine { display: none; } .how--touch { display: inline; } } .work__list { display: grid; gap: clamp(3.5rem, 7vw, 6rem); } .ba { margin: 0; display: grid; grid-template-columns: 60% 1fr; gap: 5%; align-items: end; } .ba--2 { grid-template-columns: 1fr 60%; } .ba--2 .ba__cap { order: -1; text-align: right; justify-self: end; } .ba__cap { max-width: 30ch; padding-top: var(--sc-5); border-top: 1px solid var(--rule); } .ba__cap h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); letter-spacing: -0.01em; } .ba__cap p { margin: var(--sc-3) 0 0; color: var(--sc-ink-soft); } .ba__frame { --r: 0.5; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #1b211b; box-shadow: 0 0 0 1px hsl(40 20% 90% / 0.08), 0 24px 48px -24px hsl(110 30% 2% / 0.9); touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: 1px solid transparent; outline-offset: 6px; transition: outline-color var(--sc-d-base) var(--sc-ease-out); } .ba__frame.is-armed { outline-color: var(--sage); } @media (hover: hover) and (pointer: fine) { .ba__frame { cursor: row-resize; } } .ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; } .ba__after { position: absolute; inset: 0; clip-path: inset(0 0 calc((1 - var(--r)) * 100%) 0); } .ba__tag { position: absolute; left: 0; z-index: 2; padding: 8px 14px; background: hsl(110 25% 7% / 0.78); color: #F3EDDC; font-size: 0.68rem; pointer-events: none; } .ba__tag--after { top: 0; opacity: clamp(0, calc((var(--r) - 0.08) * 10), 1); } .ba__tag--before { bottom: 0; opacity: clamp(0, calc((0.92 - var(--r)) * 10), 1); } .ba__line { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 44px; margin-top: -22px; transform: translate3d(0, calc(var(--r) * var(--fh, 0px)), 0); touch-action: none; cursor: row-resize; outline: none; } .ba__line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #F5EFE0; box-shadow: 0 1px 0 hsl(110 30% 5% / 0.35), 0 -1px 0 hsl(110 30% 5% / 0.2); } .ba__grip { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 36px; height: 36px; display: grid; place-items: center; background: #F5EFE0; color: var(--green); box-shadow: 0 1px 0 hsl(110 30% 5% / 0.4), 0 6px 14px hsl(110 30% 5% / 0.35); transition: transform 140ms var(--sc-ease-out); } .ba__line:focus-visible .ba__grip { outline: 2px solid var(--sage); outline-offset: 3px; } .ba__line.is-dragging .ba__grip { transform: scale(1.06); } /* -------------------------------------------------------------------- about */ .about { background: var(--tan); } .about__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(3rem, 8vw, 8rem); align-items: center; } .about__photo { position: relative; margin: 0 0 18px 18px; } .about__photo::before { content: ""; position: absolute; inset: 0; translate: -18px 18px; border: 1px solid color-mix(in oklab, var(--green) 55%, transparent); } .about__photo img { position: relative; width: 100%; height: auto; } .about__copy .sc-lede { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.35; letter-spacing: -0.01em; } .about__copy .sc-body { color: var(--sc-ink-soft); } .about__sign { margin-top: var(--sc-7) !important; padding-top: var(--sc-5); border-top: 1px solid var(--rule); max-width: 20rem; font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-lg); color: var(--green); } /* ----------------------------------------------------------------- services */ .services { background: var(--green-deep); } .services__title { margin-bottom: clamp(3rem, 6vw, 5rem); } .services__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .plan { --sc-ink: #151A15; --sc-ink-soft: #4A5044; --sc-accent: var(--green); --rule: color-mix(in oklab, #151A15 16%, transparent); color: var(--sc-ink); background: var(--tan-hi); padding: clamp(1.75rem, 4vw, 3.5rem); box-shadow: 0 30px 60px -30px hsl(140 40% 4% / 0.7); } .plan__title, .quoted__title { margin: 0; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); letter-spacing: -0.01em; } .plan__prices { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--sc-6); border-block: 1px solid var(--rule); } .price { padding: var(--sc-6) 0; } .price + .price { padding-left: clamp(1.25rem, 3vw, 2.75rem); border-left: 1px solid var(--rule); } .price p { margin: 0; } .price__freq { color: var(--green); } .price__num { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(3.4rem, 2.4rem + 3.4vw, 5.4rem); line-height: 1; letter-spacing: -0.03em; margin-top: var(--sc-4) !important; font-variant-numeric: lining-nums tabular-nums; } .price__cur { font-size: 0.46em; vertical-align: 0.78em; margin-right: 3px; } .price__unit { color: var(--sc-ink-soft); margin-top: var(--sc-3) !important; font-size: 0.95rem; } .plan__inc { margin: var(--sc-7) 0 var(--sc-4); color: var(--sc-ink-soft); } .checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; } .checks li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.4; } .checks svg { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--green); stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; } .plan__note { margin: var(--sc-7) 0 0; padding-top: var(--sc-4); border-top: 1px solid var(--rule); font-size: 0.9rem; color: var(--sc-ink-soft); } .quoted { padding-top: var(--sc-3); } .quoted__lede { margin: var(--sc-4) 0 0; color: var(--sc-ink-soft); max-width: 44ch; } .rows { list-style: none; margin: var(--sc-6) 0 0; padding: 0; border-top: 1px solid var(--rule); } .rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); font-family: var(--sc-font-display); font-size: var(--sc-t-lg); } .rows__tag { display: inline-flex; align-items: center; gap: 8px; font-size: 0.68rem; color: var(--sage); white-space: nowrap; } .rows li:has(.rows__link) { padding: 0; } .rows__link { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; color: inherit; text-decoration: none; } .rows__link svg { transition: transform var(--sc-d-fast) var(--sc-ease-out); } @media (hover: hover) and (pointer: fine) { .rows__link:hover .rows__tag { text-decoration: underline; text-underline-offset: 0.3em; } .rows__link:hover svg { transform: translateX(3px); } } .installs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; margin-top: clamp(4.5rem, 9vw, 8rem); } .installs__photo { margin: 0; box-shadow: 0 0 0 1px hsl(40 20% 90% / 0.1); } .installs__photo img { width: 100%; height: auto; } /* ------------------------------------------------------------------ contact */ .contact { background: var(--tan); padding-top: var(--sc-section); } .contact__grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(3rem, 7vw, 7rem); align-items: center; padding-bottom: var(--sc-section); } .details { margin: var(--sc-7) 0 0; display: grid; border-top: 1px solid var(--rule); } .details > div { display: grid; grid-template-columns: 8rem 1fr; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule); } .details dt { color: var(--sc-ink-soft); } .details dd { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.45; overflow-wrap: anywhere; } /* The email address must never break across lines: it shrinks instead. */ .nowrap { white-space: nowrap; overflow-wrap: normal; } .details dd:has(.nowrap) { overflow-wrap: normal; font-size: min(var(--sc-t-lg), 5.4vw); } .details a { color: var(--sc-ink); text-decoration-thickness: 1px; text-decoration-color: color-mix(in oklab, var(--green) 45%, transparent); } .details a:hover { color: var(--green); text-decoration-color: currentColor; } .contact__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sc-7) !important; } .card { margin: 0; } .card img { width: 100%; height: auto; box-shadow: 0 1px 0 hsl(40 30% 30% / 0.25), 0 1px 2px hsl(40 30% 20% / 0.2), 0 22px 40px -22px hsl(40 30% 15% / 0.55); } .foot { background: var(--black); } .foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 30px; } .foot__brand { display: flex; align-items: center; gap: 12px; color: var(--sc-ink); text-decoration: none; font-family: var(--sc-font-display); font-weight: 400; font-size: 1.05rem; } .foot__brand img { width: 34px; height: 34px; } .foot p { margin: 0; color: var(--sc-ink-soft); font-size: 0.74rem; letter-spacing: var(--track); text-transform: uppercase; } /* ------------------------------------------------------------------- phone */ @media (max-width: 960px) { .bar__nav { display: none; } .bar__menu { display: inline-flex; align-items: center; } .bar__cta { display: none; } } @media (max-width: 860px) { :root { --bar-h: 64px; } .bar__brand img { width: 36px; height: 36px; } .bar__brand { font-size: 1.05rem; } .hero { min-height: auto; } .hero__grid { grid-template-columns: 1fr; } .hero__photo { aspect-ratio: 4 / 3; max-height: none; margin: 0 12px 12px 0; } .hero__photo::before { translate: 12px 12px; } .ba, .ba--2 { grid-template-columns: 1fr; gap: var(--sc-4); } .ba--1, .ba--3 { margin-right: 7%; } .ba--2 { margin-left: 7%; } .ba--2 .ba__cap { order: 0; text-align: left; justify-self: start; } .about__grid, .services__grid, .installs, .contact__grid { grid-template-columns: 1fr; } .about__photo { max-width: 26rem; margin: 0 0 12px 12px; } .about__photo::before { translate: -12px 12px; } .checks { grid-template-columns: 1fr; } .details > div { grid-template-columns: 1fr; gap: 4px; } .card { max-width: 24rem; } } /* =============================================================== quote page */ .page-quote { --err: #8E2A1C; } .quote { padding: calc(var(--bar-h) + clamp(2rem, 5vw, 3.5rem)) 0 var(--sc-section); } .quote__back { display: inline-flex; align-items: center; gap: 10px; padding: 10px 0; color: var(--green); text-decoration: none; font-size: 0.74rem; font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; } .quote__back:hover { text-decoration: underline; text-underline-offset: 0.3em; } .quote__head { margin: var(--sc-5) 0 clamp(2.5rem, 5vw, 4rem); display: grid; gap: var(--sc-5); justify-items: start; } .quote__promise { margin: 0; display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--green); color: var(--tan-hi); font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.3; } .quote__promise svg { flex: none; } .quote__grid { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(2.5rem, 7vw, 7rem); align-items: start; } .quote__grid[hidden] { display: none; } .quote__sidehead { margin: 0; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); letter-spacing: -0.01em; } .quote__side .details { margin-top: var(--sc-5); } .quote__side .details > div { grid-template-columns: 1fr; gap: 4px; } .qform { display: grid; gap: var(--sc-6); } .qform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-6); } .field { display: grid; gap: 8px; align-content: start; margin: 0; padding: 0; border: 0; min-width: 0; } .field label, .field legend { padding: 0; font-size: 0.74rem; font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--sc-ink); } .field legend { margin-bottom: 8px; } .req { color: var(--green); } .field input, .field textarea { width: 100%; min-height: 52px; padding: 12px 14px; font: 400 1rem/1.45 var(--sc-font-text); color: var(--sc-ink); background: var(--tan-hi); border: 1px solid color-mix(in oklab, var(--sc-ink) 32%, transparent); border-radius: 0; transition: border-color var(--sc-d-fast) var(--sc-ease-out); } .field textarea { resize: vertical; min-height: 140px; } .field input:hover, .field textarea:hover { border-color: color-mix(in oklab, var(--sc-ink) 55%, transparent); } .field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); } .field [aria-invalid="true"] { border-color: var(--err); } .field__help, .field__err { margin: 0; font-size: 0.9rem; } .field__help { color: var(--sc-ink-soft); } .field__err { color: var(--err); font-weight: 500; } .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { position: relative; cursor: pointer; } .chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid color-mix(in oklab, var(--sc-ink) 32%, transparent); background: var(--tan-hi); font-size: 0.95rem; transition: background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out); } .chip:hover span { border-color: var(--green); } .chip input:checked + span { background: var(--green); border-color: var(--green); color: var(--tan-hi); } .chip input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; } .qform__summary { padding: 16px 20px; border: 1px solid var(--err); background: color-mix(in oklab, var(--err) 7%, var(--tan-hi)); color: var(--err); } .qform__summary p { margin: 0 0 6px; font-weight: 600; } .qform__summary ul { margin: 0; padding-left: 1.2em; } .qform__summary a { color: var(--err); } .qform__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } .qform__note { margin: 0; color: var(--sc-ink-soft); font-size: 0.9rem; max-width: 36ch; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .qdone { max-width: 40rem; display: grid; gap: var(--sc-5); justify-items: start; padding-top: var(--sc-4); } .qdone[hidden] { display: none; } .qdone__alt { margin: 0; color: var(--sc-ink-soft); } .qdone__alt a { color: var(--sc-ink); } @media (max-width: 860px) { .quote__grid, .qform__row { grid-template-columns: 1fr; } .quote__promise { font-size: var(--sc-t-base); padding: 12px 16px; } }