:root { --portfolio-bg: #fff; --portfolio-surface: #f5f5f2; --portfolio-text: #20211f; --portfolio-muted: #62665f; --portfolio-line: #d9dbd5; --portfolio-accent: #29352f; --portfolio-on-accent: #fff; --portfolio-shell: 1160px; }
* { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--portfolio-bg); color: var(--portfolio-text); font-family: Inter, ui-sans-serif, system-ui, sans-serif; line-height: 1.6; } img { display: block; max-width: 100%; } a { color: inherit; } a:focus-visible { outline: 3px solid var(--portfolio-accent); outline-offset: 3px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .shell { width: min(var(--portfolio-shell), calc(100% - 40px)); margin-inline: auto; } .skip-link { position: fixed; z-index: 30; top: 8px; left: 8px; padding: 8px 12px; transform: translateY(-160%); background: white; } .skip-link:focus { transform: none; } .site-header { border-bottom: 1px solid var(--portfolio-line); } .primary-nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display:flex; align-items:center; gap:12px; font-weight: 800; text-decoration: none; } .brand-logo { width:44px; height:44px; object-fit:contain; } .nav-links { display: flex; flex-wrap: wrap; gap: 18px; } .site-section, .project-block, .project-title { padding-block: 64px; } .eyebrow, .project-meta { color: var(--portfolio-muted); font-size: .78rem; font-weight: 750; text-transform: uppercase; } h1, h2, h3, p { overflow-wrap: anywhere; } h1 { max-width: 18ch; } .lede, .section-body, .project-summary { max-width: 68ch; color: var(--portfolio-muted); } .project-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; } .project-card { border: 1px solid var(--portfolio-line); background: var(--portfolio-bg); } .project-card { overflow: visible; } .project-card-copy { padding: 20px; overflow: visible; } .project-card figure { width: 100%; margin: 0; background: var(--portfolio-bg); } .project-card figure img { width: 100%; height: auto; object-fit: contain; background: var(--portfolio-bg); } .project-title, .project-detail, .project-block { overflow: visible; } figure { margin: 0; } figcaption { margin-top: 8px; color: var(--portfolio-muted); font-size: .9rem; } .project-hero-image, .project-image, .project-grid-image, .project-gallery-image, .project-image-text-image { width: 100%; height: auto; object-fit: contain; background: var(--portfolio-bg); } .image-grid, .static-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; } .image-grid.columns-3 { grid-template-columns: repeat(3,minmax(0,1fr)); } .image-text-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 32px; } .image-text-layout.placement-end > figure { grid-column: 2; grid-row: 1; } .image-text-layout.placement-end > .project-image-text-copy { grid-column: 1; grid-row: 1; } .project-facts-list { display: grid; gap: 12px; margin: 0; } .project-facts-list div { display: grid; grid-template-columns: minmax(120px,.4fr) 1fr; gap: 20px; border-top: 1px solid var(--portfolio-line); padding-top: 12px; } .project-facts-list dd { margin: 0; } blockquote { margin: 0; font-size: 1.4rem; } .button { display: inline-flex; min-height: 44px; align-items: center; padding-inline: 18px; background: var(--portfolio-accent); color: var(--portfolio-on-accent); text-decoration: none; } .hero-image { width:100%; max-height:560px; object-fit:cover; border-radius:12px; } .hero-centered .hero-image, .hero-editorial .hero-image { margin-top:32px; } .site-footer { padding-block: 32px; border-top: 1px solid var(--portfolio-line); color: var(--portfolio-muted); }
@media (max-width: 760px) { .shell { width: min(100% - 28px,var(--portfolio-shell)); } .primary-nav { align-items: flex-start; flex-direction: column; padding-block: 18px; } .project-grid, .image-grid, .image-grid.columns-3, .static-gallery, .image-text-layout { grid-template-columns: 1fr; } .image-text-layout.placement-end > figure, .image-text-layout.placement-end > .project-image-text-copy { grid-column: 1; grid-row: auto; } .site-section, .project-block, .project-title { padding-block: 44px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.lead-hero { min-height:clamp(360px,58vw,680px); display:flex; align-items:end; background:linear-gradient(145deg,#d9e4db 0 38%,#9fb3a3 38% 58%,#52675a 58% 100%); } .lead-hero .shell { padding-block:clamp(48px,8vw,110px); } .lead-hero h1 { padding:.12em .25em; width:fit-content; background:rgb(255 255 255 / 88%); font-size:clamp(2.5rem,6vw,5.75rem); line-height:1; } .lead-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } .lead-card { overflow:hidden; min-width:0; border:1px solid var(--portfolio-line); padding:20px; background:var(--portfolio-bg); } .lead-card figure { margin:-20px -20px 20px; } .lead-card-image { width:100%; aspect-ratio:1672/941; object-fit:cover; } .starter-media { margin:-20px -20px 20px; width:calc(100% + 40px); background:linear-gradient(135deg,#cfd8cf,#82988a 52%,#34483c); } .estimate-form form { display:grid; gap:16px; max-width:720px; } .estimate-form label { display:grid; gap:6px; } .estimate-form input,.estimate-form textarea,.estimate-form select,.estimate-form button { min-height:44px; font:inherit; } .validation-summary { padding:16px; border:2px solid #a32626; } [aria-invalid="true"] { outline:2px solid #a32626; }
.ordering-block { padding-block:64px; background:var(--portfolio-surface); } .ordering-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; } .cart-toggle { min-height:44px; padding:0 18px; border:0; border-radius:999px; background:var(--portfolio-accent); color:var(--portfolio-on-accent); } .commerce-notice { margin:24px 0; padding:14px 18px; background:var(--portfolio-bg); } .commerce-discovery { position:sticky; z-index:12; top:0; display:grid; gap:14px; padding:18px 0; background:var(--portfolio-surface); } .commerce-search { display:grid; gap:7px; } .commerce-search input, .commerce-cart input, .commerce-cart select { min-height:44px; padding:10px 12px; border:1px solid var(--portfolio-line); background:var(--portfolio-bg); font:inherit; } .commerce-category-nav { display:flex; flex-wrap:wrap; gap:8px; } .commerce-category-nav a { display:inline-flex; align-items:center; min-height:44px; padding:8px 14px; border-bottom:2px solid transparent; text-decoration:none; } .commerce-category-nav a[aria-current] { border-bottom-color:var(--portfolio-accent); } .commerce-category-nav button { min-height:44px; padding:8px 14px; border:1px solid var(--portfolio-line); border-radius:999px; background:var(--portfolio-bg); } .commerce-product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; } .commerce-product { overflow:hidden; min-width:0; border:1px solid var(--portfolio-line); background:var(--portfolio-bg); } .commerce-product-media { aspect-ratio:4/3; background:var(--portfolio-line); } .commerce-product-body { display:grid; gap:12px; padding:20px; } .commerce-product-heading, .commerce-cart-heading, .commerce-cart-line, .commerce-cart-total > div { display:flex; justify-content:space-between; gap:12px; } .commerce-product-dialog { position:fixed; z-index:1040; inset:0; display:grid; place-items:center; padding:24px; } .commerce-product-dialog-backdrop { position:absolute; inset:0; background:rgb(0 0 0 / 65%); } .commerce-product-dialog-panel { position:relative; width:min(960px,100%); max-height:calc(100dvh - 48px); overflow:auto; background:var(--portfolio-bg); } .commerce-product-dialog-layout { display:grid; grid-template-columns:.9fr 1.1fr; } .commerce-product-dialog-media { min-height:420px; background:var(--portfolio-line); } .commerce-product-form { display:grid; gap:22px; padding:40px 32px; } .commerce-product-dialog-close { position:absolute; z-index:2; top:12px; right:12px; width:44px; height:44px; border-radius:50%; } .commerce-product-form-footer { display:grid; grid-template-columns:90px 1fr; gap:12px; } .commerce-cart { position:fixed; z-index:1030; inset:0 0 0 auto; width:min(520px,100%); overflow:auto; padding:26px; background:var(--portfolio-bg); box-shadow:-20px 0 60px rgb(0 0 0 / 20%); } .commerce-checkout-progress { display:grid; grid-template-columns:repeat(4,1fr); padding:0; list-style:none; } .commerce-checkout-step, .commerce-checkout-fields, .commerce-final-review { display:grid; gap:14px; } .commerce-checkout-fields.two-column { grid-template-columns:1fr 1fr; } .commerce-checkout-step label { display:grid; gap:6px; } .commerce-checkout-primary { width:100%; min-height:44px; }
@media (max-width: 760px) { .ordering-heading { align-items:stretch; flex-direction:column; } .commerce-product-grid, .commerce-product-dialog-layout, .commerce-checkout-fields.two-column { grid-template-columns:1fr; } .commerce-product-dialog { padding:0; } .commerce-product-dialog-panel { max-height:100dvh; } .commerce-product-dialog-media { min-height:240px; } .commerce-product-form, .commerce-cart { padding:20px; } }
.preview-contact-form { display:grid; gap:16px; max-width:720px; margin-top:32px; } .preview-contact-form label { display:grid; gap:6px; } .preview-contact-form input,.preview-contact-form textarea,.preview-contact-form button { min-height:44px; font:inherit; }
/* Presentation is supplied by the sealed exact runtime. */
body[data-product-detail-page] { margin:0; --standard-card-padding:24px; --card-stack-gap:16px; padding:var(--standard-card-padding); display:grid; gap:16px; background:var(--portfolio-bg); color:var(--portfolio-text); }
body[data-product-detail-page][data-template-id="coffee-roastery"],body[data-product-detail-page][data-template-id="breakline-surf"] { --portfolio-bg:var(--paper,#f7f5ef); --portfolio-text:var(--deep,#182b25); --portfolio-muted:color-mix(in srgb,var(--portfolio-text) 70%,var(--portfolio-bg)); --portfolio-accent:var(--pine,#4a6351); --portfolio-on-accent:lch(from var(--portfolio-accent) calc((49.6 - l) * infinity) 0 0); }
body[data-product-detail-page] .shell { width:min(1160px,100%); margin-inline:auto; }
body[data-product-detail-page] .site-header,body[data-product-detail-page] .site-footer { position:static; inset:auto; padding:0; border:0; background:transparent; color:inherit; }
body[data-product-detail-page] .primary-nav { display:flex; min-height:44px; gap:16px; padding:0; }
body[data-product-detail-page] .nav-links { display:flex; gap:16px; }
body[data-product-detail-page] :is(h1,h2,h3,p,ul,figure) { margin:0; }
body[data-product-detail-page] h1 { font-size:clamp(32px,5vw,56px); line-height:1.1; }
body[data-product-detail-page] h2 { font-size:20px; line-height:1.3; }
body[data-product-detail-page] h3 { font-size:16px; }
body[data-product-detail-page] .commerce-product-detail { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:16px; }
body[data-product-detail-page] .commerce-product-detail:not(:has(.product-detail-gallery)) { grid-template-columns:minmax(0,1fr); }
body[data-product-detail-page] :is(.product-detail-gallery,.product-detail-copy,.product-detail-copy > div,.product-detail-modifiers,.product-detail-modifiers > div) { min-width:0; display:grid; gap:16px; }
body[data-product-detail-page] .product-detail-gallery img { display:block; width:100%; height:auto; max-height:560px; object-fit:contain; }
body[data-product-detail-page] ul { display:grid; gap:8px; padding:0; list-style:none; }
body[data-product-detail-page] .product-options li { display:flex; flex-wrap:wrap; align-items:center; gap:8px; border-bottom:1px solid var(--portfolio-line); padding:0; }
body[data-product-detail-page] .product-options strong { margin-right:auto; }
body[data-product-detail-page] .product-detail-actions { display:flex; justify-content:flex-end; }
body[data-product-detail-page] .product-detail-actions .button { min-height:44px; padding:8px 16px; }
@media(max-width:640px) {
  body[data-product-detail-page] { padding:16px; }
  body[data-product-detail-page] .commerce-product-detail { grid-template-columns:minmax(0,1fr); }
  body[data-product-detail-page] .primary-nav { flex-wrap:wrap; align-items:start; }
}