/* ColorUp V2 — page styles consolidated from V2 source pages. * Auto-generated. Do not edit by hand; re-run the consolidation * script after V2 source changes. * * Block ordering: blocks shared across many pages first, then * page-specific blocks. The site-footer styles are deliberately * excluded — the theme's theme.css owns footer rendering via * .site-footer scoped selectors. */ /* shared by 66 pages, e.g. /about/ */ /* ============== shared chrome (nav, footer, buttons, utilities) ============== */ body { background: var(--alabaster); } /* shared by 66 pages, e.g. /about/ */ .container { max-width: 1280px; margin: 0 auto; padding: 0 32px; } /* shared by 66 pages, e.g. /about/ */ section { padding: 72px 0; } /* shared by 66 pages, e.g. /about/ */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(246, 243, 236, 0.85); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid rgba(30,30,28,0.06); } /* shared by 66 pages, e.g. /about/ */ .nav-inner { max-width: 1280px; margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; } /* shared by 66 pages, e.g. /about/ */ .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } /* shared by 66 pages, e.g. /about/ */ .brand img { height: 38px; width: auto; } /* shared by 66 pages, e.g. /about/ */ .brand .name { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--ink-noir); } /* shared by 66 pages, e.g. /about/ */ .brand .sub { font-size: 0.55rem; font-weight: 500; letter-spacing: 0.32em; color: var(--lunar-rock); margin-top: 4px; } /* shared by 66 pages, e.g. /about/ */ .nav-links { list-style: none; display: flex; gap: 32px; padding: 0; margin: 0; } /* shared by 66 pages, e.g. /about/ */ .nav-actions { display: flex; align-items: center; gap: 16px; } /* shared by 66 pages, e.g. /about/ */ .nav-phone { font-size: 0.85rem; font-weight: 500; color: var(--charcoal); } /* shared by 66 pages, e.g. /about/ */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; font-family: inherit; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em; cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1); } /* shared by 66 pages, e.g. /about/ */ .btn-primary { background: var(--ink-noir); color: var(--alabaster); } /* shared by 66 pages, e.g. /about/ */ .btn-sm { padding: 10px 18px; font-size: 0.78rem; } /* shared by 65 pages, e.g. /about/ */ .btn-primary:hover { background: var(--charcoal); } /* shared by 61 pages, e.g. /about/ */ .btn-light { background: transparent; color: var(--alabaster); border-color: var(--alabaster); } /* shared by 61 pages, e.g. /about/ */ .btn-light:hover { background: var(--alabaster); color: var(--ink-noir); } /* shared by 61 pages, e.g. /about/ */ .closing h2 em { font-style: italic; font-family: var(--font-serif); color: var(--muted-brass); font-weight: 400; } /* shared by 61 pages, e.g. /about/ */ .closing .btn-primary { background: var(--alabaster); color: var(--ink-noir); } /* shared by 61 pages, e.g. /about/ */ .closing .btn-primary:hover { background: var(--muted-brass); color: var(--ink-noir); } /* shared by 61 pages, e.g. /about/ */ /* ============== FOOTER ============== */ footer { background: var(--ink-noir); color: rgba(246,243,236,0.7); padding: 80px 0 32px; } /* shared by 61 pages, e.g. /about/ */ .ft-col h5 { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; color: rgba(246,243,236,0.5); margin: 0 0 16px; } /* shared by 61 pages, e.g. /about/ */ .ft-col ul { list-style: none; padding: 0; margin: 0; } /* shared by 61 pages, e.g. /about/ */ .ft-col a { color: inherit; text-decoration: none; } /* shared by 61 pages, e.g. /about/ */ .ft-col a:hover { color: var(--muted-brass); } /* shared by 60 pages, e.g. /about/ */ .eyebrow { font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--lunar-rock); margin-bottom: 24px; } /* shared by 56 pages, e.g. /about/ */ .nav-links a { font-size: 0.85rem; font-weight: 500; color: var(--charcoal); letter-spacing: 0.01em; transition: color 180ms; } /* shared by 56 pages, e.g. /about/ */ .ft-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(246,243,236,0.1); } /* shared by 56 pages, e.g. /about/ */ .ft-brand .name { font-family: var(--font-serif); font-size: 2rem; color: var(--alabaster); line-height: 1; letter-spacing: -0.02em; } /* shared by 56 pages, e.g. /about/ */ .ft-brand .sub { font-size: 0.65rem; letter-spacing: 0.32em; color: rgba(246,243,236,0.6); margin-top: 6px; } /* shared by 56 pages, e.g. /about/ */ .ft-brand p { color: rgba(246,243,236,0.65); font-size: 0.9rem; max-width: 360px; margin-top: 24px; } /* shared by 56 pages, e.g. /about/ */ .ft-col li { padding: 6px 0; font-size: 0.9rem; color: rgba(246,243,236,0.85); } /* shared by 56 pages, e.g. /about/ */ .ft-bottom { padding-top: 24px; display: flex; justify-content: space-between; font-size: 0.78rem; color: rgba(246,243,236,0.5); letter-spacing: 0.04em; } /* shared by 55 pages, e.g. /about/ */ .container.narrow { max-width: 920px; } /* shared by 53 pages, e.g. /budget-calculator/ */ .nav-links a:hover { color: var(--ink-noir); } /* shared by 51 pages, e.g. /about/ */ .closing p { font-size: 1.05rem; color: rgba(246,243,236,0.85); margin: 0 auto 40px; max-width: 50ch; } /* shared by 51 pages, e.g. /about/ */ .closing .actions { display: inline-flex; gap: 12px; } /* shared by 50 pages, e.g. /about/ */ /* ============== CLOSING ============== */ .closing { background: var(--lunar-rock); color: var(--alabaster); padding: 104px 0; text-align: center; } /* shared by 44 pages, e.g. /book-a-call/ */ .closing h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.035em; color: var(--alabaster); margin: 0 auto 32px; max-width: 22ch; } /* shared by 25 pages, e.g. /partners/architects/ */ .p-hero { padding: 80px 0 56px; } /* shared by 25 pages, e.g. /partners/architects/ */ .p-breadcrumb { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lunar-rock); margin-bottom: 32px; } /* shared by 25 pages, e.g. /partners/architects/ */ .p-breadcrumb a { color: var(--lunar-rock); text-decoration: none; } /* shared by 25 pages, e.g. /partners/architects/ */ .p-breadcrumb .sep { margin: 0 12px; opacity: 0.5; } /* shared by 25 pages, e.g. /partners/architects/ */ .p-hero h1 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -0.04em; color: var(--ink-noir); margin: 0 0 32px; max-width: 18ch; } /* shared by 25 pages, e.g. /partners/architects/ */ .p-hero h1 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; letter-spacing: -0.02em; } /* shared by 25 pages, e.g. /partners/architects/ */ .p-hero .lede { font-size: 1.2rem; line-height: 1.55; color: var(--charcoal); max-width: 60ch; margin: 0 0 40px; } /* shared by 25 pages, e.g. /partners/architects/ */ .p-value { background: var(--alabaster); } /* shared by 25 pages, e.g. /partners/architects/ */ .p-value .head { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: end; margin-bottom: 80px; } /* shared by 25 pages, e.g. /partners/architects/ */ .p-value h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--ink-noir); margin: 0; } /* shared by 25 pages, e.g. /partners/architects/ */ .p-value h2 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; } /* shared by 25 pages, e.g. /partners/architects/ */ .p-value .lede { font-size: 1rem; line-height: 1.7; color: var(--charcoal); margin: 0; max-width: 50ch; } /* shared by 25 pages, e.g. /partners/architects/ */ .p-value .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; } /* shared by 25 pages, e.g. /partners/architects/ */ .p-value .item { padding-top: 32px; border-top: 1px solid var(--hairline); } /* shared by 25 pages, e.g. /partners/architects/ */ .p-value .item .num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--brass-deep); margin-bottom: 16px; display: block; } /* shared by 25 pages, e.g. /partners/architects/ */ .p-value .item h3 { font-family: var(--font-sans); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink-noir); margin: 0 0 14px; } /* shared by 25 pages, e.g. /partners/architects/ */ .p-value .item p { font-size: 1rem; line-height: 1.65; color: var(--charcoal); margin: 0; } /* shared by 25 pages, e.g. /partners/architects/ */ .p-how { background: var(--cloud); } /* shared by 25 pages, e.g. /partners/architects/ */ .p-how .narrow { max-width: 900px; } /* shared by 25 pages, e.g. /partners/architects/ */ .p-how h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--ink-noir); margin: 0 0 48px; max-width: 22ch; } /* shared by 25 pages, e.g. /partners/architects/ */ .p-how h2 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; } /* shared by 25 pages, e.g. /partners/architects/ */ .p-how .step { display: grid; grid-template-columns: 80px 1fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid rgba(30,30,28,0.12); } /* shared by 25 pages, e.g. /partners/architects/ */ .p-how .step:last-child { border-bottom: none; } /* shared by 25 pages, e.g. /partners/architects/ */ .p-how .step .num { font-family: var(--font-serif); font-size: 1.875rem; color: var(--lunar-rock); line-height: 1; letter-spacing: -0.02em; } /* shared by 25 pages, e.g. /partners/architects/ */ .p-how .step h3 { font-family: var(--font-sans); font-weight: 500; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--ink-noir); margin: 0 0 8px; } /* shared by 25 pages, e.g. /partners/architects/ */ .p-how .step p { font-size: 0.95rem; line-height: 1.65; color: var(--charcoal); margin: 0; max-width: 60ch; } @media (max-width: 1024px) { .p-value .head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 56px; } .p-value .grid { grid-template-columns: 1fr; gap: 32px; } } /* Work With Us: restrained editorial intake landing page. */ body.colorup-v2.page-work-with-us { background: var(--alabaster, #FBF9F4); color: var(--ink-noir, #1E1E1C); } .wwu-hero { padding: clamp(64px, 9vw, 124px) 0 72px; } .wwu-hero__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr); gap: clamp(40px, 7vw, 112px); align-items: center; } .wwu-hero h1 { max-width: 12ch; margin: 0 0 28px; font: 500 clamp(2.75rem, 5vw, 5.25rem)/.98 var(--font-sans); letter-spacing: -.045em; } .wwu-hero h1 em { color: var(--lunar-rock); font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; } .wwu-lede { max-width: 37rem; margin: 0 0 32px; font-size: clamp(1.08rem, 2vw, 1.3rem); line-height: 1.6; color: var(--charcoal, #3D3D39); } .wwu-hero__image { margin: 0; min-height: 520px; overflow: hidden; background: var(--cloud, #E4E1D9); } .wwu-hero__image img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; display: block; } .wwu-pathways { padding: 96px 0; background: var(--cloud, #E4E1D9); } .wwu-section-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: end; margin-bottom: 64px; } .wwu-section-head h2 { max-width: 18ch; margin: 0; font-size: clamp(2.1rem, 4.5vw, 4rem); line-height: 1.02; letter-spacing: -.04em; } .wwu-section-head > p { max-width: 43ch; margin: 0; color: var(--charcoal, #3D3D39); line-height: 1.7; } .wwu-path-grid { display: grid; grid-template-columns: repeat(12, 1fr); border-top: 1px solid var(--hairline, #C8C5BD); } .wwu-path { grid-column: span 6; padding: 40px 40px 48px 0; border-bottom: 1px solid var(--hairline, #C8C5BD); } .wwu-path:nth-child(even) { padding-left: 40px; border-left: 1px solid var(--hairline, #C8C5BD); } .wwu-path--team { grid-column: span 12; padding-right: 40%; } .wwu-path__num { display: block; margin-bottom: 32px; color: var(--brass-deep, #775E35); font: 500 .72rem/1 var(--font-mono); letter-spacing: .18em; } .wwu-path h3 { margin: 0 0 14px; max-width: 22ch; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.1; letter-spacing: -.025em; } .wwu-path p { max-width: 50ch; min-height: 3.5em; color: var(--charcoal, #3D3D39); line-height: 1.65; } .wwu-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; } .wwu-actions .btn { min-height: 46px; padding: 12px 18px; font-size: .76rem; } .wwu-text-link { padding: 8px 0; border-bottom: 1px solid currentColor; font-size: .78rem; font-weight: 600; } .wwu-application { padding: 104px 0 120px; } .wwu-application__grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(48px, 8vw, 120px); align-items: start; } .wwu-application__intro { position: sticky; top: 120px; } .wwu-application__intro h2 { margin: 0 0 24px; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; letter-spacing: -.035em; } .wwu-application__intro > p:last-of-type { color: var(--charcoal, #3D3D39); line-height: 1.7; } .wwu-language { display: flex; gap: 8px; margin-top: 28px; } .wwu-language button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--hairline, #C8C5BD); background: transparent; font: inherit; cursor: pointer; } .wwu-language button[aria-pressed="true"] { background: var(--ink-noir, #1E1E1C); color: var(--alabaster, #FBF9F4); border-color: var(--ink-noir, #1E1E1C); } .wwu-form-card { padding: clamp(28px, 5vw, 56px); background: var(--soft-white, #FFF); border: 1px solid var(--hairline, #C8C5BD); } .wwu-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .wwu-field { margin-bottom: 24px; } .wwu-field label { display: block; margin-bottom: 9px; font-size: .82rem; font-weight: 600; letter-spacing: .02em; } .wwu-field input:not([type="checkbox"]), .wwu-field select, .wwu-field textarea { width: 100%; min-height: 50px; padding: 12px 14px; color: var(--ink-noir, #1E1E1C); background: var(--alabaster, #FBF9F4); border: 1px solid #A9A79F; border-radius: 0; font: inherit; } .wwu-field textarea { resize: vertical; min-height: 132px; } .wwu-field :focus-visible, .wwu-language button:focus-visible { outline: 3px solid rgba(184,153,104,.42); outline-offset: 2px; border-color: var(--ink-noir, #1E1E1C); } .wwu-field [aria-invalid="true"] { border-color: #8D2F24; } .wwu-field-error { display: block; margin-top: 7px; color: #79251C; font-size: .8rem; } .wwu-help, .wwu-privacy { margin: 7px 0 0; color: var(--fg-muted, #5A5D58); font-size: .78rem; line-height: 1.5; } .wwu-consent { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; } .wwu-consent input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--ink-noir, #1E1E1C); } .wwu-consent label { margin: 0; line-height: 1.5; } .wwu-submit { min-width: 190px; justify-content: space-between; } .wwu-submit:disabled { opacity: .58; cursor: wait; } .wwu-notice { margin-bottom: 24px; padding: 14px 16px; border-left: 3px solid; line-height: 1.5; } .wwu-notice--error { color: #79251C; background: #F9EDEA; border-color: #8D2F24; } .wwu-success { padding: 24px 0; } .wwu-success h3 { max-width: 18ch; margin: 0 0 18px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; } .wwu-success p { max-width: 42ch; color: var(--charcoal, #3D3D39); line-height: 1.65; } .wwu-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } @media (max-width: 900px) { .wwu-hero__grid, .wwu-section-head, .wwu-application__grid { grid-template-columns: 1fr; gap: 40px; } .wwu-hero__image, .wwu-hero__image img { min-height: 380px; } .wwu-application__intro { position: static; } } @media (max-width: 680px) { .wwu-hero { padding-top: 56px; } .wwu-pathways, .wwu-application { padding: 72px 0; } .wwu-path { grid-column: span 12; padding: 32px 0 40px; border-left: 0 !important; } .wwu-path:nth-child(even) { padding-left: 0; } .wwu-path--team { padding-right: 0; } .wwu-path p { min-height: 0; } .wwu-actions { align-items: stretch; } .wwu-actions .btn { width: 100%; justify-content: center; } .wwu-form-row { grid-template-columns: 1fr; gap: 0; } .wwu-form-card { margin-inline: -8px; } } @media (max-width: 600px) { .p-how .step { grid-template-columns: 48px 1fr; gap: 16px; } .closing .actions { display: flex; flex-direction: column; } } /* shared by 18 pages, e.g. /about/ */ .arrow-link { display: inline-flex; align-items: center; gap: 8px; padding: 0; font-size: 0.85rem; font-weight: 500; color: var(--ink-noir); letter-spacing: 0.02em; border-bottom: 1px solid var(--ink-noir); padding-bottom: 4px; text-decoration: none; transition: gap 280ms cubic-bezier(0.16, 1, 0.3, 1); } /* shared by 18 pages, e.g. /about/ */ .arrow-link:hover { gap: 14px; color: var(--brass-deep); border-color: var(--brass-deep); } /* shared by 15 pages, e.g. /about/ */ .btn-ghost { background: transparent; color: var(--ink-noir); border-color: var(--ink-noir); } /* shared by 15 pages, e.g. /about/ */ .btn-ghost:hover { background: var(--ink-noir); color: var(--alabaster); } /* shared by 13 pages, e.g. /about/ */ .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink-noir); } /* shared by 11 pages, e.g. /budget-calculator/ */ .closing { background: var(--lunar-rock); color: var(--alabaster); padding: 96px 0; text-align: center; } /* shared by 10 pages, e.g. /about/ */ .nav-links a[aria-current="page"] { border-bottom: 1px solid var(--ink-noir); padding-bottom: 4px; } /* shared by 10 pages, e.g. /budget-calculator/ */ .closing .actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* shared by 9 pages, e.g. /about/ */ .section-head .lede { font-size: 1rem; line-height: 1.7; color: var(--charcoal); margin: 0; max-width: 50ch; } /* shared by 9 pages, e.g. /careers/ */ .closing h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.1; letter-spacing: -0.03em; color: var(--alabaster); margin: 0 auto 28px; max-width: 22ch; } /* shared by 9 pages, e.g. /careers/ */ .closing p { font-size: 1.05rem; color: rgba(246,243,236,0.85); margin: 0 auto 36px; max-width: 50ch; } /* shared by 7 pages, e.g. /about/ */ .closing h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2.5rem, 5.5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.035em; color: var(--alabaster); margin: 0 auto 32px; max-width: 18ch; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-hero { padding: 80px 0 56px; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-hero h1 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2.75rem, 5.5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.04em; color: var(--ink-noir); margin: 0 0 32px; max-width: 18ch; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-hero h1 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; letter-spacing: -0.02em; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-hero .lede { font-size: 1.25rem; line-height: 1.55; color: var(--charcoal); max-width: 60ch; margin: 0 0 40px; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-band { padding: 0; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-band-img { width: 100%; aspect-ratio: 16/9; max-height: 480px; background: var(--cv2-img-city-band, url('../images/hero-kitchen.jpg')) center/cover; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-local { background: var(--alabaster); } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-local .grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: start; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-local h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--ink-noir); margin: 0 0 32px; max-width: 22ch; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-local h2 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-local p { font-size: 1.05rem; line-height: 1.7; color: var(--charcoal); margin: 0 0 20px; max-width: 60ch; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-local .neighborhoods { background: var(--cloud); padding: 32px; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-local .neighborhoods .lbl { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lunar-rock); margin-bottom: 16px; font-weight: 500; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-local .neighborhoods ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 24px; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-local .neighborhoods li { padding: 6px 0; font-size: 0.95rem; color: var(--ink-noir); } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-services { background: var(--cloud); } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-services .head { text-align: center; margin-bottom: 56px; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-services h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--ink-noir); margin: 0 auto 24px; max-width: 22ch; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-services h2 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-services p { font-size: 1rem; line-height: 1.7; color: var(--charcoal); margin: 0 auto; max-width: 56ch; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-services .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-services .card { background: var(--alabaster); padding: 32px 24px; text-decoration: none; transition: background 280ms; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-services .card:hover { background: #FFFFFF; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-services .card .num { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; color: var(--brass-deep); margin-bottom: 16px; display: block; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-services .card h3 { font-family: var(--font-sans); font-weight: 500; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--ink-noir); margin: 0 0 12px; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-services .card p { font-size: 0.9rem; line-height: 1.55; color: var(--charcoal); margin: 0; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-stats { background: var(--charcoal); color: var(--alabaster); padding: 88px 0; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-stats .eyebrow { color: rgba(246,243,236,0.5); margin-bottom: 32px; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-stats h2 { font-family: var(--font-sans); font-weight: 400; font-size: clamp(1.875rem, 3.5vw, 2.5rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--alabaster); margin: 0 0 48px; max-width: 24ch; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-stats h2 em { font-style: italic; font-family: var(--font-serif); color: var(--muted-brass); font-weight: 400; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-stats .grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(246,243,236,0.15); } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-stats .item { padding: 32px 24px 0 0; border-right: 1px solid rgba(246,243,236,0.15); } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-stats .item:last-child { border-right: none; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-stats .num { font-family: var(--font-serif); font-size: 2.25rem; font-weight: 400; line-height: 1; color: var(--alabaster); letter-spacing: -0.02em; } /* shared by 7 pages, e.g. /cabinet-painting-cypress/ */ .city-stats .lbl { font-size: 0.85rem; color: rgba(246,243,236,0.65); margin-top: 12px; letter-spacing: 0.04em; } @media (max-width: 1024px) { .city-local .grid { grid-template-columns: 1fr; gap: 40px; } .city-services .grid, .city-stats .grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .city-services .grid, .city-stats .grid { grid-template-columns: 1fr; } .city-local .neighborhoods ul { columns: 1; } .city-stats .item { border-right: 0; border-bottom: 1px solid rgba(246,243,236,0.15); padding: 24px 0; } .closing .actions { display: flex; flex-direction: column; } } /* shared by 7 pages, e.g. /services/cabinet-painting/ */ /* ============== HERO (service detail) ============== */ .svc-hero { padding: 80px 0 56px; } /* shared by 7 pages, e.g. /services/cabinet-painting/ */ .svc-breadcrumb { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lunar-rock); margin-bottom: 32px; } /* shared by 7 pages, e.g. /services/cabinet-painting/ */ .svc-breadcrumb a { color: var(--lunar-rock); text-decoration: none; } /* shared by 7 pages, e.g. /services/cabinet-painting/ */ .svc-breadcrumb a:hover { color: var(--ink-noir); } /* shared by 7 pages, e.g. /services/cabinet-painting/ */ .svc-breadcrumb .sep { margin: 0 12px; opacity: 0.5; } /* shared by 7 pages, e.g. /services/cabinet-painting/ */ .svc-hero h1 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; letter-spacing: -0.02em; } /* shared by 7 pages, e.g. /services/cabinet-painting/ */ .svc-hero .actions { display: inline-flex; flex-wrap: wrap; gap: 12px; } /* shared by 7 pages, e.g. /services/cabinet-painting/ */ /* ============== HERO IMAGE BAND ============== */ .svc-band { padding: 0; } /* shared by 7 pages, e.g. /services/cabinet-painting/ */ /* ============== INCLUDED — three-up ============== */ .included { background: var(--alabaster); } /* shared by 7 pages, e.g. /services/cabinet-painting/ */ .inc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; } /* shared by 7 pages, e.g. /services/cabinet-painting/ */ .inc-item { padding-top: 32px; border-top: 1px solid var(--hairline); } /* shared by 7 pages, e.g. /services/cabinet-painting/ */ .inc-item p { font-size: 1rem; line-height: 1.65; color: var(--charcoal); margin: 0; } /* shared by 7 pages, e.g. /services/cabinet-painting/ */ .pricing .container.narrow { max-width: 800px; } /* shared by 7 pages, e.g. /services/cabinet-painting/ */ .pricing .price-note { font-size: 0.95rem; color: var(--lunar-rock); letter-spacing: 0.04em; margin-bottom: 40px; } /* shared by 6 pages, e.g. /about/ */ .section-head h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink-noir); margin: 0; } /* shared by 5 pages, e.g. /about/ */ .section-head .eyebrow { margin-bottom: 16px; } /* shared by 5 pages, e.g. /budget-calculator/ */ .nav-links a { font-size: 0.85rem; font-weight: 500; color: var(--charcoal); letter-spacing: 0.01em; text-decoration: none; transition: color 180ms; } /* shared by 5 pages, e.g. /budget-calculator/ */ .eyebrow { font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--lunar-rock); margin-bottom: 24px; display: block; } /* shared by 5 pages, e.g. /careers/ */ .nav-links a { font-size: 0.85rem; font-weight: 500; color: var(--charcoal); letter-spacing: 0.01em; transition: color 180ms; text-decoration: none; } /* shared by 5 pages, e.g. /careers/ */ .page-hero { padding: 104px 0 56px; } /* shared by 5 pages, e.g. /careers/ */ .page-hero h1 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -0.035em; color: var(--ink-noir); margin: 0 0 32px; max-width: 22ch; } /* shared by 5 pages, e.g. /careers/ */ .page-hero h1 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; letter-spacing: -0.02em; } /* shared by 5 pages, e.g. /careers/ */ .page-hero .lede { font-size: 1.2rem; line-height: 1.6; color: var(--charcoal); max-width: 56ch; margin: 0; } /* shared by 5 pages, e.g. /careers/ */ .body-section { padding: 56px 0 88px; } /* shared by 5 pages, e.g. /careers/ */ .body-section .container.narrow { max-width: 760px; } /* shared by 5 pages, e.g. /careers/ */ .body-section h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.625rem, 3vw, 2.25rem); line-height: 1.15; letter-spacing: -0.025em; color: var(--ink-noir); margin: 48px 0 20px; } /* shared by 5 pages, e.g. /careers/ */ .body-section h2:first-child { margin-top: 0; } /* shared by 5 pages, e.g. /careers/ */ .body-section p { font-size: 1.075rem; line-height: 1.7; color: var(--charcoal); margin: 0 0 20px; max-width: 60ch; } /* shared by 5 pages, e.g. /careers/ */ .body-section ul { font-size: 1.05rem; line-height: 1.7; color: var(--charcoal); padding-left: 20px; max-width: 60ch; } /* shared by 5 pages, e.g. /careers/ */ .body-section li { margin: 0 0 8px; } /* shared by 5 pages, e.g. /careers/ */ .pullquote { font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.45; color: var(--ink-noir); margin: 40px 0; padding: 0 0 0 28px; border-left: 2px solid var(--muted-brass); font-style: italic; font-weight: 400; } /* shared by 5 pages, e.g. /careers/ */ .ft-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px; padding-bottom: 48px; border-bottom: 1px solid rgba(246,243,236,0.1); } /* shared by 5 pages, e.g. /careers/ */ .ft-col li { padding: 6px 0; font-size: 0.88rem; color: rgba(246,243,236,0.85); } /* shared by 5 pages, e.g. /careers/ */ .ft-areas { color: rgba(246,243,236,0.55); font-size: 0.82rem; line-height: 1.5; margin-top: 16px; } /* shared by 5 pages, e.g. /careers/ */ .ft-legal { padding-top: 24px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 0.78rem; color: rgba(246,243,236,0.5); letter-spacing: 0.04em; } /* shared by 5 pages, e.g. /careers/ */ .ft-byline { color: rgba(246,243,236,0.5); margin: 0; } /* shared by 5 pages, e.g. /careers/ */ @media (max-width: 1024px) { .ft-grid { grid-template-columns: repeat(3, 1fr); } } /* shared by 5 pages, e.g. /careers/ */ @media (max-width: 600px) { .ft-grid { grid-template-columns: repeat(2, 1fr); } } /* shared by 5 pages, e.g. /legal/eula/ */ .container.narrow { max-width: 800px; } /* shared by 5 pages, e.g. /legal/eula/ */ .legal-hero { padding: 80px 0 32px; } /* shared by 5 pages, e.g. /legal/eula/ */ .legal-hero h1 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -0.04em; color: var(--ink-noir); margin: 0 0 16px; max-width: 24ch; } /* shared by 5 pages, e.g. /legal/eula/ */ .legal-hero .meta { font-size: 0.85rem; color: var(--lunar-rock); letter-spacing: 0.04em; } /* shared by 5 pages, e.g. /legal/eula/ */ .legal-body { padding: 32px 0 88px; } /* shared by 5 pages, e.g. /legal/eula/ */ .legal-body article { font-size: 1rem; line-height: 1.75; color: var(--charcoal); } /* shared by 5 pages, e.g. /legal/eula/ */ .legal-body article h2 { font-family: var(--font-sans); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--ink-noir); margin: 48px 0 16px; } /* shared by 5 pages, e.g. /legal/eula/ */ .legal-body article h3 { font-family: var(--font-sans); font-weight: 500; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--ink-noir); margin: 32px 0 12px; } /* shared by 5 pages, e.g. /legal/eula/ */ .legal-body article p { margin: 0 0 16px; } /* shared by 5 pages, e.g. /legal/eula/ */ .legal-body article ul, .legal-body article ol { margin: 0 0 16px 24px; padding: 0; } /* shared by 5 pages, e.g. /legal/eula/ */ .legal-body article li { margin: 0 0 8px; } /* shared by 5 pages, e.g. /legal/eula/ */ .legal-body article a { color: var(--ink-noir); border-bottom: 1px solid var(--hairline); } /* shared by 5 pages, e.g. /legal/eula/ */ .legal-body article a:hover { color: var(--brass-deep); border-color: var(--brass-deep); } /* shared by 4 pages, e.g. /blog/ */ body{background:var(--alabaster)} /* shared by 4 pages, e.g. /blog/ */ .container{max-width:1280px;margin:0 auto;padding:0 32px} /* shared by 4 pages, e.g. /blog/ */ .container.narrow{max-width:920px} /* shared by 4 pages, e.g. /blog/ */ section{padding:88px 0} /* shared by 4 pages, e.g. /blog/ */ .nav{position:sticky;top:0;z-index:100;background:rgba(246,243,236,.85);backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid rgba(30,30,28,.06)} /* shared by 4 pages, e.g. /blog/ */ .nav-inner{max-width:1280px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:32px} /* shared by 4 pages, e.g. /blog/ */ .brand{display:flex;align-items:center;gap:12px;text-decoration:none} /* shared by 4 pages, e.g. /blog/ */ .brand img{height:38px;width:auto} /* shared by 4 pages, e.g. /blog/ */ .brand .name{font-family:var(--font-serif);font-size:1.45rem;font-weight:400;line-height:1;letter-spacing:-.02em;color:var(--ink-noir)} /* shared by 4 pages, e.g. /blog/ */ .brand .sub{font-size:.55rem;font-weight:500;letter-spacing:.32em;color:var(--lunar-rock);margin-top:4px} /* shared by 4 pages, e.g. /blog/ */ .nav-links{list-style:none;display:flex;gap:32px;padding:0;margin:0} /* shared by 4 pages, e.g. /blog/ */ .nav-actions{display:flex;align-items:center;gap:16px} /* shared by 4 pages, e.g. /blog/ */ .nav-phone{font-size:.85rem;font-weight:500;color:var(--charcoal)} /* shared by 4 pages, e.g. /blog/ */ .btn-primary{background:var(--ink-noir);color:var(--alabaster)} /* shared by 4 pages, e.g. /blog/ */ .btn-primary:hover{background:var(--charcoal)} /* shared by 4 pages, e.g. /blog/ */ .btn-sm{padding:10px 18px;font-size:.78rem} /* shared by 4 pages, e.g. /blog/ */ .eyebrow{font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;font-weight:500;color:var(--lunar-rock);margin-bottom:24px} /* shared by 4 pages, e.g. /blog/ */ footer{background:var(--ink-noir);color:rgba(246,243,236,.7);padding:80px 0 32px} /* shared by 4 pages, e.g. /blog/ */ .ft-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(246,243,236,.1)} /* shared by 4 pages, e.g. /blog/ */ .ft-brand .name{font-family:var(--font-serif);font-size:2rem;color:var(--alabaster);line-height:1;letter-spacing:-.02em} /* shared by 4 pages, e.g. /blog/ */ .ft-brand .sub{font-size:.65rem;letter-spacing:.32em;color:rgba(246,243,236,.6);margin-top:6px} /* shared by 4 pages, e.g. /blog/ */ .ft-brand p{color:rgba(246,243,236,.65);font-size:.9rem;max-width:360px;margin-top:24px} /* shared by 4 pages, e.g. /blog/ */ .ft-col h5{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:rgba(246,243,236,.5);margin:0 0 16px} /* shared by 4 pages, e.g. /blog/ */ .ft-col ul{list-style:none;padding:0;margin:0} /* shared by 4 pages, e.g. /blog/ */ .ft-col li{padding:6px 0;font-size:.9rem;color:rgba(246,243,236,.85)} /* shared by 4 pages, e.g. /blog/ */ .ft-col a{color:inherit;text-decoration:none} /* shared by 4 pages, e.g. /blog/ */ .ft-col a:hover{color:var(--muted-brass)} /* shared by 4 pages, e.g. /blog/ */ .ft-bottom{padding-top:24px;display:flex;justify-content:space-between;font-size:.78rem;color:rgba(246,243,236,.5);letter-spacing:.04em} /* shared by 4 pages, e.g. /planning-tools/ */ .hub-hero { padding: 104px 0 56px; } /* shared by 4 pages, e.g. /planning-tools/ */ .hub-hero h1 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -0.035em; color: var(--ink-noir); margin: 0 0 28px; max-width: 22ch; } /* shared by 4 pages, e.g. /planning-tools/ */ .hub-hero h1 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; letter-spacing: -0.02em; } /* shared by 4 pages, e.g. /planning-tools/ */ .hub-hero .lede { font-size: 1.2rem; line-height: 1.6; color: var(--charcoal); max-width: 56ch; margin: 0; } /* shared by 4 hub pages; required in the theme because WordPress strips inline styles */ .hub-hero-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; margin-top: 48px; background: var(--cloud); } /* shared by 4 pages, e.g. /planning-tools/ */ .hub-cards { padding: 32px 0 96px; } /* shared by 4 pages, e.g. /planning-tools/ */ .hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--hairline, rgba(30,30,28,0.08)); } /* shared by 4 pages, e.g. /planning-tools/ */ .hub-card { padding: 36px 28px 36px 0; border-bottom: 1px solid var(--hairline, rgba(30,30,28,0.08)); border-right: 1px solid var(--hairline, rgba(30,30,28,0.08)); display: flex; flex-direction: column; gap: 12px; text-decoration: none; transition: background 280ms ease, padding 280ms ease; } /* shared by 4 pages, e.g. /planning-tools/ */ .hub-card:nth-child(3n) { border-right: none; padding-right: 0; } /* shared by 4 pages, e.g. /planning-tools/ */ .hub-card:hover { background: rgba(185, 144, 74, 0.04); padding-left: 12px; } /* shared by 4 pages, e.g. /planning-tools/ */ .hub-card .card-num { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--brass-deep, #8a6a30); font-weight: 500; } /* shared by 4 pages, e.g. /planning-tools/ */ .hub-card h3 { font-family: var(--font-sans); font-weight: 500; font-size: 1.4rem; letter-spacing: -0.02em; color: var(--ink-noir); margin: 4px 0 4px; } /* shared by 4 pages, e.g. /planning-tools/ */ .hub-card p { font-size: 0.95rem; line-height: 1.55; color: var(--charcoal); margin: 0; } /* shared by 4 pages, e.g. /planning-tools/ */ .hub-card .arrow { margin-top: 12px; font-size: 0.85rem; font-weight: 500; color: var(--ink-noir); letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 8px; transition: gap 220ms; } /* shared by 4 pages, e.g. /planning-tools/ */ .hub-card:hover .arrow { gap: 14px; color: var(--brass-deep, #8a6a30); } /* image-led planning cards; preserve the accepted 2:1 presentation in WordPress */ .hub-cards--media .hub-card img { display: block; width: 100%; height: auto; aspect-ratio: 2.02 / 1; object-fit: cover; margin-bottom: 10px; background: var(--cloud); } /* shared by 4 pages, e.g. /planning-tools/ */ @media (max-width: 920px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } .hub-card:nth-child(3n) { border-right: 1px solid var(--hairline, rgba(30,30,28,0.08)); padding-right: 28px; } .hub-card:nth-child(2n) { border-right: none; padding-right: 0; } } /* shared by 4 pages, e.g. /planning-tools/ */ @media (max-width: 600px) { .hub-grid { grid-template-columns: 1fr; } .hub-card { border-right: none !important; padding-right: 0; } } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .svc-hero h1 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2.75rem, 5.5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.04em; color: var(--ink-noir); margin: 0 0 32px; max-width: 16ch; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .svc-hero .lede { font-size: 1.25rem; line-height: 1.55; color: var(--charcoal); max-width: 56ch; margin: 0 0 40px; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .svc-band-img { width: 100%; aspect-ratio: 16/9; max-height: 560px; background-position: center; background-size: cover; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .section-head { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; margin-bottom: 80px; align-items: end; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .inc-item .num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--brass-deep); font-weight: 500; margin-bottom: 20px; display: block; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .inc-item h3 { font-family: var(--font-sans); font-weight: 500; font-size: 1.375rem; letter-spacing: -0.02em; color: var(--ink-noir); margin: 0 0 16px; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .inc-item h3 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ /* ============== MATERIALS — split with image ============== */ .materials-split { background: var(--cloud); } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .ms-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .ms-img { aspect-ratio: 4/5; background-position: center; background-size: cover; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .ms-text .eyebrow { margin-bottom: 24px; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .ms-text h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.875rem, 3.5vw, 2.75rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--ink-noir); margin: 0 0 32px; max-width: 18ch; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .ms-text h2 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .ms-text p { font-size: 1.05rem; line-height: 1.7; color: var(--charcoal); margin: 0 0 20px; max-width: 50ch; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .ms-spec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(30,30,28,0.12); } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .ms-spec .lbl { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lunar-rock); margin-bottom: 8px; font-weight: 500; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .ms-spec .val { font-size: 1rem; color: var(--ink-noir); font-weight: 500; line-height: 1.4; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ /* ============== PRICING ============== */ .pricing { background: var(--alabaster); padding: 100px 0; text-align: center; border-top: 1px solid rgba(30,30,28,0.08); } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .pricing .eyebrow { margin-bottom: 24px; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .pricing .price-range { font-family: var(--font-serif); font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1; color: var(--ink-noir); margin: 0 0 16px; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .pricing p { font-size: 1.05rem; line-height: 1.7; color: var(--charcoal); margin: 0 0 24px; max-width: 56ch; margin-left: auto; margin-right: auto; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ /* ============== FAQ ============== */ .faq { background: var(--alabaster); padding-top: 0; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .faq .section-head { margin-bottom: 64px; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .faq-list { max-width: 800px; margin: 0 auto; border-top: 1px solid var(--hairline); } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .faq-item { padding: 32px 0; border-bottom: 1px solid var(--hairline); } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .faq-item h3 { font-family: var(--font-sans); font-weight: 500; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink-noir); margin: 0 0 14px; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .faq-item p { font-size: 1rem; line-height: 1.7; color: var(--charcoal); margin: 0; max-width: 60ch; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ /* ============== COLOR TEASER ============== */ .color-teaser { background: var(--cloud); padding: 100px 0; text-align: center; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .color-teaser .container.narrow { max-width: 720px; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .color-teaser .eyebrow { margin-bottom: 24px; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .color-teaser h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.875rem, 3.5vw, 2.5rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--ink-noir); margin: 0 0 24px; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .color-teaser h2 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; } /* shared by 4 pages, e.g. /services/cabinet-painting/ */ .color-teaser p { font-size: 1.05rem; line-height: 1.7; color: var(--charcoal); margin: 0 0 32px; } /* shared by 3 pages, e.g. /blog/ */ .btn-light{background:transparent;color:var(--alabaster);border-color:var(--alabaster)} /* shared by 3 pages, e.g. /blog/ */ .btn-light:hover{background:var(--alabaster);color:var(--ink-noir)} /* shared by 3 pages, e.g. /blog/ */ .closing{background:var(--lunar-rock);color:var(--alabaster);padding:104px 0;text-align:center} /* shared by 3 pages, e.g. /blog/ */ .closing h2{font-family:var(--font-sans);font-weight:500;font-size:clamp(2rem,4.5vw,3.5rem);line-height:1.05;letter-spacing:-.035em;color:var(--alabaster);margin:0 auto 32px;max-width:22ch} /* shared by 3 pages, e.g. /blog/ */ .closing h2 em{font-style:italic;font-family:var(--font-serif);color:var(--muted-brass);font-weight:400} /* shared by 3 pages, e.g. /blog/ */ .closing p{font-size:1.05rem;color:rgba(246,243,236,.85);margin:0 auto 40px;max-width:50ch} /* shared by 3 pages, e.g. /blog/ */ .closing .actions{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center} /* shared by 3 pages, e.g. /blog/ */ .closing .btn-primary{background:var(--alabaster);color:var(--ink-noir)} /* shared by 3 pages, e.g. /blog/ */ .closing .btn-primary:hover{background:var(--muted-brass);color:var(--ink-noir)} /* shared by 3 pages, e.g. /cabinet-painting-cost/ */ .container.narrow { max-width: 880px; } /* shared by 3 pages, e.g. /cabinet-painting-cost/ */ .cmp-hero { padding: 80px 0 32px; } /* shared by 3 pages, e.g. /cabinet-painting-cost/ */ .cmp-hero h1 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1.05; letter-spacing: -0.04em; color: var(--ink-noir); margin: 0 0 32px; max-width: 22ch; } /* shared by 3 pages, e.g. /cabinet-painting-cost/ */ .cmp-hero h1 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; } /* shared by 3 pages, e.g. /cabinet-painting-cost/ */ .cmp-hero .lede { font-size: 1.2rem; line-height: 1.55; color: var(--charcoal); max-width: 60ch; margin: 0; } /* shared by 3 pages, e.g. /cabinet-painting-cost/ */ .cmp-meta { font-size: 0.85rem; color: var(--lunar-rock); letter-spacing: 0.04em; margin-top: 24px; } /* shared by 3 pages, e.g. /cabinet-painting-cost/ */ .cmp-band { padding: 0; } /* shared by 3 pages, e.g. /cabinet-painting-cost/ */ .cmp-band-img { width: 100%; aspect-ratio: 16/9; max-height: 480px; background-position: center; background-size: cover; } /* shared by 3 pages, e.g. /cabinet-painting-cost/ */ .cmp-table-wrap { padding: 88px 0; } /* shared by 3 pages, e.g. /cabinet-painting-cost/ */ .cmp-table { width: 100%; border-collapse: collapse; } /* shared by 3 pages, e.g. /cabinet-painting-cost/ */ .cmp-table th { background: transparent; color: var(--lunar-rock); font-weight: 500; text-align: left; padding: 16px 16px 16px 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; border-bottom: 1px solid var(--hairline); } /* shared by 3 pages, e.g. /cabinet-painting-cost/ */ .cmp-table td { padding: 20px 16px 20px 0; border-bottom: 1px solid var(--hairline); color: var(--ink-noir); font-size: 0.95rem; line-height: 1.5; vertical-align: top; } /* shared by 3 pages, e.g. /cabinet-painting-cost/ */ .cmp-table td:first-child { font-weight: 500; min-width: 160px; } /* shared by 3 pages, e.g. /cabinet-painting-cost/ */ .cmp-body { padding: 0 0 88px; } /* shared by 3 pages, e.g. /cabinet-painting-cost/ */ .cmp-body article { font-size: 1.05rem; line-height: 1.75; color: var(--charcoal); max-width: 700px; } /* shared by 3 pages, e.g. /cabinet-painting-cost/ */ .cmp-body article h2 { font-family: var(--font-sans); font-weight: 500; font-size: 1.75rem; letter-spacing: -0.025em; color: var(--ink-noir); margin: 56px 0 20px; } /* shared by 3 pages, e.g. /cabinet-painting-cost/ */ .cmp-body article h2 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; } /* shared by 3 pages, e.g. /cabinet-painting-cost/ */ .cmp-body article h3 { font-family: var(--font-sans); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.015em; color: var(--ink-noir); margin: 40px 0 14px; } /* shared by 3 pages, e.g. /cabinet-painting-cost/ */ .cmp-body article p { margin: 0 0 20px; max-width: 65ch; } /* shared by 3 pages, e.g. /cabinet-painting-cost/ */ .cmp-body article ul { margin: 0 0 20px 24px; padding: 0; } /* shared by 3 pages, e.g. /cabinet-painting-cost/ */ .cmp-body article li { margin: 0 0 10px; } /* shared by 3 pages, e.g. /cabinet-painting-cost/ */ .cmp-body article blockquote { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.4; color: var(--ink-noir); padding: 0 0 0 32px; border-left: 2px solid var(--muted-brass); margin: 40px 0; font-style: italic; } /* shared by 3 pages, e.g. /facts/ */ .nav-links a{font-size:.85rem;font-weight:500;color:var(--charcoal);letter-spacing:.01em;transition:color 180ms} /* shared by 3 pages, e.g. /services/custom-cabinet-modifications/ */ .svc-hero h1 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -0.04em; color: var(--ink-noir); margin: 0 0 32px; max-width: 18ch; } /* shared by 3 pages, e.g. /services/custom-cabinet-modifications/ */ .svc-hero .lede { font-size: 1.2rem; line-height: 1.55; color: var(--charcoal); max-width: 60ch; margin: 0 0 40px; } /* shared by 3 pages, e.g. /services/custom-cabinet-modifications/ */ .svc-band-img { width: 100%; aspect-ratio: 16/9; max-height: 480px; background-position: center; background-size: cover; } /* shared by 3 pages, e.g. /services/custom-cabinet-modifications/ */ .section-head { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; margin-bottom: 64px; align-items: end; } /* shared by 3 pages, e.g. /services/custom-cabinet-modifications/ */ .section-head h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.05; letter-spacing: -0.025em; color: var(--ink-noir); margin: 0; } /* shared by 3 pages, e.g. /services/custom-cabinet-modifications/ */ .section-head h2 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; } /* shared by 3 pages, e.g. /services/custom-cabinet-modifications/ */ .inc-item .num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--brass-deep); font-weight: 500; margin-bottom: 16px; display: block; } /* shared by 3 pages, e.g. /services/custom-cabinet-modifications/ */ .inc-item h3 { font-family: var(--font-sans); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink-noir); margin: 0 0 14px; } /* shared by 3 pages, e.g. /services/custom-cabinet-modifications/ */ .pricing { background: var(--cloud); padding: 88px 0; text-align: center; } /* shared by 3 pages, e.g. /services/custom-cabinet-modifications/ */ .pricing .price-range { font-family: var(--font-serif); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1; color: var(--ink-noir); margin: 0 0 16px; } /* shared by 3 pages, e.g. /services/custom-cabinet-modifications/ */ .pricing p { font-size: 1.05rem; line-height: 1.7; color: var(--charcoal); margin: 0 auto 24px; max-width: 56ch; } /* shared by 2 pages, e.g. /blog/ */ .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;font-family:inherit;font-size:.85rem;font-weight:500;letter-spacing:.04em;cursor:pointer;text-decoration:none;border:1px solid transparent} /* shared by 2 pages, e.g. /blog/ */ .hero{padding:80px 0 48px;text-align:center} /* shared by 2 pages, e.g. /blog/ */ .hero h1{font-family:var(--font-sans);font-weight:500;font-size:clamp(2.75rem,5.5vw,4.5rem);line-height:1.05;letter-spacing:-.04em;color:var(--ink-noir);margin:0 auto 32px;max-width:18ch} /* shared by 2 pages, e.g. /blog/ */ .hero h1 em{font-style:italic;font-family:var(--font-serif);color:var(--lunar-rock);font-weight:400;letter-spacing:-.02em} /* shared by 2 pages, e.g. /our-process/ */ .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;font-family:inherit;font-size:.85rem;font-weight:500;letter-spacing:.04em;cursor:pointer;text-decoration:none;border:1px solid transparent;transition:all 280ms cubic-bezier(.16,1,.3,1)} /* unique to /about/ */ /* ============== HERO (about) — left-aligned editorial ============== */ .about-hero { padding: 104px 0 56px; } /* unique to /about/ */ .about-hero .eyebrow { margin-bottom: 32px; } /* unique to /about/ */ .about-hero h1 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2.5rem, 5.5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.035em; color: var(--ink-noir); margin: 0 0 32px; max-width: 18ch; } /* unique to /about/ */ .about-hero h1 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; letter-spacing: -0.02em; } /* unique to /about/ */ .about-hero .lede { font-size: 1.25rem; line-height: 1.55; color: var(--charcoal); max-width: 56ch; margin: 0; } /* unique to /about/ */ /* ============== MANIFESTO — narrow editorial column ============== */ .manifesto { padding: 80px 0 120px; } /* unique to /about/ */ .manifesto .container.narrow { max-width: 760px; } /* unique to /about/ */ .manifesto .eyebrow { margin-bottom: 16px; } /* unique to /about/ */ .manifesto h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.875rem, 3.5vw, 2.75rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--ink-noir); margin: 0 0 48px; max-width: 22ch; } /* unique to /about/ */ .manifesto p { font-size: 1.125rem; line-height: 1.7; color: var(--charcoal); margin: 0 0 28px; max-width: 60ch; } /* unique to /about/ */ .manifesto p.lede-quote { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.4; color: var(--ink-noir); margin: 48px 0; padding: 0 0 0 32px; border-left: 2px solid var(--muted-brass); font-style: italic; font-weight: 400; } /* unique to /about/ */ /* ============== STUDIO IMAGE — full bleed band ============== */ .studio-band { padding: 0; background: var(--cloud); } /* unique to /about/ */ .studio-band img { width: min(100%, 1516px); height: auto; margin-inline: auto; aspect-ratio: 21/9; object-fit: cover; display: block; } /* unique to /about/ */ /* ============== FOUNDER — split portrait + bio ============== */ .founder { background: var(--cloud); padding: 88px 0; } /* unique to /about/ */ .founder-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; } /* unique to /about/ */ .founder-portrait { aspect-ratio: 4/5; background: var(--cv2-img-founder, url('../images/alexandre-g-owner-portrait.jpeg')) center/cover; } /* unique to /about/ */ .founder-text .eyebrow { margin-bottom: 24px; } /* unique to /about/ */ .founder-text h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--ink-noir); margin: 0 0 28px; } /* unique to /about/ */ .founder-text .role { font-family: var(--font-serif); font-size: 1.125rem; font-style: italic; color: var(--lunar-rock); margin: 0 0 32px; } /* unique to /about/ */ .founder-text p { font-size: 1.05rem; line-height: 1.7; color: var(--charcoal); margin: 0 0 20px; max-width: 52ch; } /* unique to /about/ */ .founder-sig { margin-top: 40px; font-family: var(--font-serif); font-size: 1.5rem; color: var(--ink-noir); letter-spacing: -0.01em; } /* unique to /about/ */ /* ============== PRACTICE — three pillars ============== */ .practice { background: var(--alabaster); } /* unique to /about/ */ .section-head { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; margin-bottom: 96px; align-items: end; } /* unique to /about/ */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; } /* unique to /about/ */ .pillar { padding: 0; border-top: 1px solid var(--hairline); padding-top: 32px; } /* unique to /about/ */ .pillar .num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--brass-deep); font-weight: 500; margin-bottom: 24px; display: block; } /* unique to /about/ */ .pillar h3 { font-family: var(--font-sans); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--ink-noir); margin: 0 0 16px; } /* unique to /about/ */ .pillar p { font-size: 1rem; line-height: 1.65; color: var(--charcoal); margin: 0; } /* unique to /about/ */ /* ============== STATS BAND — dark surface ============== */ .stats-band { background: var(--charcoal); color: var(--alabaster); padding: 100px 0; } /* unique to /about/ */ .stats-band .eyebrow { color: rgba(246,243,236,0.5); margin-bottom: 32px; } /* unique to /about/ */ .stats-band h2 { font-family: var(--font-sans); font-weight: 400; font-size: clamp(1.875rem, 3.5vw, 2.75rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--alabaster); margin: 0 0 64px; max-width: 22ch; } /* unique to /about/ */ .stats-band h2 em { font-style: italic; font-family: var(--font-serif); color: var(--muted-brass); font-weight: 400; } /* unique to /about/ */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(246,243,236,0.15); } /* unique to /about/ */ .stats-grid .item { padding: 40px 32px 0 0; border-right: 1px solid rgba(246,243,236,0.15); } /* unique to /about/ */ .stats-grid .item:last-child { border-right: none; padding-right: 0; } /* unique to /about/ */ .stats-grid .num { font-family: var(--font-serif); font-size: 3rem; font-weight: 400; line-height: 1; color: var(--alabaster); letter-spacing: -0.02em; } /* unique to /about/ */ .stats-grid .lbl { font-size: 0.85rem; color: rgba(246,243,236,0.65); margin-top: 12px; letter-spacing: 0.04em; } /* unique to /blog/ */ .nav-links a{font-size:.85rem;font-weight:500;color:var(--charcoal);letter-spacing:.01em} /* unique to /blog/ */ .hero .lede{font-size:1.15rem;line-height:1.55;color:var(--charcoal);max-width:60ch;margin:0 auto} /* unique to /blog/ */ .featured{padding:32px 0 48px} /* unique to /blog/ */ .featured-card{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center} /* unique to /blog/ */ .featured-img{aspect-ratio:4/3;background-position:center;background-size:cover} /* unique to /blog/ */ .featured-text .meta{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--lunar-rock);margin-bottom:14px;font-weight:500} /* unique to /blog/ */ .featured-text h2{font-family:var(--font-sans);font-weight:500;font-size:clamp(1.875rem,3.5vw,2.5rem);line-height:1.1;letter-spacing:-.025em;color:var(--ink-noir);margin:0 0 16px} /* unique to /blog/ */ .featured-text h2 em{font-style:italic;font-family:var(--font-serif);color:var(--lunar-rock);font-weight:400} /* unique to /blog/ */ .featured-text p{font-size:1.05rem;line-height:1.65;color:var(--charcoal);margin:0 0 24px} /* unique to /blog/ */ .featured-text a.read{font-size:.85rem;font-weight:500;color:var(--ink-noir);letter-spacing:.02em;border-bottom:1px solid var(--ink-noir);padding-bottom:4px;text-decoration:none} /* unique to /blog/ */ .grid{padding:32px 0 88px;border-top:1px solid var(--hairline)} /* unique to /blog/ */ .grid h3.section{font-family:var(--font-sans);font-weight:500;font-size:1.25rem;letter-spacing:-.01em;color:var(--ink-noir);margin:0 0 32px} /* unique to /blog/ */ .grid-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} /* unique to /blog/ */ .post{display:block;text-decoration:none;color:var(--ink-noir)} /* unique to /blog/ */ .post .img{width:100%;aspect-ratio:4/3;background-position:center;background-size:cover;background-color:var(--cloud);margin-bottom:16px;transition:transform 600ms cubic-bezier(.16,1,.3,1)} /* unique to /blog/ */ .post:hover .img{transform:scale(1.02)} /* unique to /blog/ */ .post .meta{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lunar-rock);margin-bottom:8px;font-weight:500} /* unique to /blog/ */ .post h3{font-family:var(--font-sans);font-weight:500;font-size:1.125rem;line-height:1.3;letter-spacing:-.015em;color:var(--ink-noir);margin:0 0 8px} /* unique to /blog/ */ .post p{font-size:.85rem;line-height:1.55;color:var(--charcoal);margin:0} /* /blog/ — preserve editorial hierarchy without cramped mobile columns. */ @media (max-width: 900px) { body.colorup-v2 .journal-page .featured-card { grid-template-columns: minmax(0, 1fr); gap: 28px; } body.colorup-v2 .journal-page .grid-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { body.colorup-v2 .journal-page .featured { padding-top: 16px; } body.colorup-v2 .journal-page .featured-img { aspect-ratio: 16 / 10; } body.colorup-v2 .journal-page .grid-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; } body.colorup-v2 .journal-page .featured-text h2 { font-size: clamp(1.75rem, 8vw, 2.25rem); } } /* unique to /book-a-call/ */ .bk-hero { padding: 80px 0 56px; text-align: center; } /* unique to /book-a-call/ */ .bk-hero h1 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2.75rem, 5.5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.04em; color: var(--ink-noir); margin: 0 auto 32px; max-width: 16ch; } /* unique to /book-a-call/ */ .bk-hero h1 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; letter-spacing: -0.02em; } /* unique to /book-a-call/ */ .bk-hero .lede { font-size: 1.25rem; line-height: 1.55; color: var(--charcoal); max-width: 56ch; margin: 0 auto; } /* unique to /book-a-call/ */ .bk-main { padding: 32px 0 88px; } /* unique to /book-a-call/ */ .bk-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; } /* unique to /book-a-call/ */ .bk-info h2 { font-family: var(--font-sans); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--ink-noir); margin: 0 0 32px; padding-bottom: 24px; border-bottom: 1px solid var(--hairline); } /* unique to /book-a-call/ */ .bk-block { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--hairline); } /* unique to /book-a-call/ */ .bk-block:last-child { border-bottom: none; } /* unique to /book-a-call/ */ .bk-block .num { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; color: var(--brass-deep); margin-bottom: 10px; font-weight: 500; display: block; } /* unique to /book-a-call/ */ .bk-block h3 { font-family: var(--font-sans); font-weight: 500; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink-noir); margin: 0 0 8px; } /* unique to /book-a-call/ */ .bk-block p { font-size: 0.95rem; line-height: 1.6; color: var(--charcoal); margin: 0; } /* unique to /book-a-call/ */ .bk-widget { background: var(--cloud); padding: 48px; min-height: 540px; display: flex; flex-direction: column; } /* unique to /book-a-call/ */ .bk-widget h2 { font-family: var(--font-sans); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--ink-noir); margin: 0 0 8px; } /* unique to /book-a-call/ */ .bk-widget .sub { font-size: 0.95rem; color: var(--charcoal); margin: 0 0 32px; } /* unique to /book-a-call/ */ .bk-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; background: var(--alabaster); border: 1px dashed rgba(30,30,28,0.18); } /* unique to /book-a-call/ */ .bk-placeholder .icon { font-family: var(--font-serif); font-size: 4rem; line-height: 1; color: var(--muted-brass); margin-bottom: 24px; } /* unique to /book-a-call/ */ .bk-placeholder h4 { font-family: var(--font-sans); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink-noir); margin: 0 0 12px; } /* unique to /book-a-call/ */ .bk-placeholder p { font-size: 0.95rem; line-height: 1.6; color: var(--charcoal); margin: 0 0 28px; max-width: 38ch; } /* unique to /book-a-call/ */ .bk-placeholder .small { font-size: 0.78rem; color: var(--lunar-rock); letter-spacing: 0.04em; margin-top: 24px; } /* unique to /budget-calculator/ */ .container.narrow { max-width: 1080px; } /* unique to /budget-calculator/ */ .calc-hero { padding: 96px 0 40px; } /* unique to /budget-calculator/ */ .calc-hero h1 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -0.035em; color: var(--ink-noir); margin: 0 0 28px; max-width: 22ch; } /* unique to /budget-calculator/ */ .calc-hero h1 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; letter-spacing: -0.02em; } /* unique to /budget-calculator/ */ .calc-hero .lede { font-size: 1.125rem; line-height: 1.6; color: var(--charcoal); max-width: 56ch; margin: 0; } /* unique to /budget-calculator/ */ .calc-section { padding: 16px 0 96px; } /* unique to /budget-calculator/ */ .calc-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; } /* unique to /budget-calculator/ */ .calc-form { background: var(--cloud, #f1ede4); padding: 48px; } /* unique to /budget-calculator/ */ .calc-form h2 { font-family: var(--font-sans); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--ink-noir); margin: 0 0 8px; } /* unique to /budget-calculator/ */ .calc-form .sub { font-size: 0.95rem; color: var(--charcoal); margin: 0 0 32px; } /* unique to /budget-calculator/ */ .calc-form .field { margin-bottom: 24px; } /* unique to /budget-calculator/ */ .calc-form .field:last-of-type { margin-bottom: 0; } /* unique to /budget-calculator/ */ .calc-form label { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lunar-rock); font-weight: 500; margin-bottom: 10px; } /* unique to /budget-calculator/ */ .calc-form select, .calc-form input[type="number"] { width: 100%; box-sizing: border-box; font-family: var(--font-sans); font-size: 1rem; padding: 14px 16px; border: 1px solid rgba(30,30,28,0.18); border-radius: 2px; background: var(--alabaster); color: var(--ink-noir); transition: border-color 180ms, box-shadow 180ms; appearance: none; -webkit-appearance: none; } /* unique to /budget-calculator/ */ .calc-form select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 44px; } /* unique to /budget-calculator/ */ .calc-form select:focus, .calc-form input:focus { border-color: var(--lunar-rock); outline: none; box-shadow: 0 0 0 3px rgba(139,145,138,0.18); } /* unique to /budget-calculator/ */ .calc-form .radio-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } /* unique to /budget-calculator/ */ .calc-form .radio-group .opt-wrap { position: relative; } /* unique to /budget-calculator/ */ .calc-form .radio-group input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } /* unique to /budget-calculator/ */ .calc-form .radio-group label.option { display: block; text-align: center; padding: 14px 12px; margin: 0; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.01em; color: var(--charcoal); text-transform: none; background: var(--alabaster); border: 1px solid rgba(30,30,28,0.18); cursor: pointer; transition: all 180ms; } /* unique to /budget-calculator/ */ .calc-form .radio-group input[type="radio"]:checked + label.option { background: var(--ink-noir); color: var(--alabaster); border-color: var(--ink-noir); } /* unique to /budget-calculator/ */ .calc-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* unique to /budget-calculator/ */ .calc-output { background: var(--ink-noir); color: var(--alabaster); padding: 48px; position: sticky; top: 88px; } /* unique to /budget-calculator/ */ .calc-output .eyebrow { color: rgba(246,243,236,0.55); margin-bottom: 16px; } /* unique to /budget-calculator/ */ .calc-output h3 { font-family: var(--font-sans); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.015em; color: var(--alabaster); margin: 0 0 24px; } /* unique to /budget-calculator/ */ .calc-output .range-display { font-family: var(--font-serif); font-size: clamp(2.25rem, 4.5vw, 3.25rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.025em; color: var(--alabaster); margin: 0 0 12px; } /* unique to /budget-calculator/ */ .calc-output .range-display .currency { color: var(--muted-brass, #b9904a); } /* unique to /budget-calculator/ */ .calc-output .range-display .dash { color: rgba(246,243,236,0.5); margin: 0 8px; font-style: italic; } /* unique to /budget-calculator/ */ .calc-output .range-note { font-size: 0.95rem; line-height: 1.55; color: rgba(246,243,236,0.78); margin: 0 0 28px; } /* unique to /budget-calculator/ */ .calc-output .breakdown { padding: 24px 0; border-top: 1px solid rgba(246,243,236,0.15); border-bottom: 1px solid rgba(246,243,236,0.15); margin-bottom: 28px; } /* unique to /budget-calculator/ */ .calc-output .breakdown .row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; font-size: 0.88rem; color: rgba(246,243,236,0.75); gap: 12px; } /* unique to /budget-calculator/ */ .calc-output .breakdown .row strong { color: var(--alabaster); font-weight: 500; } /* unique to /budget-calculator/ */ .calc-output .actions { display: flex; gap: 12px; flex-wrap: wrap; } /* unique to /budget-calculator/ */ .calc-output .actions .btn-primary { background: var(--alabaster); color: var(--ink-noir); } /* unique to /budget-calculator/ */ .calc-output .actions .btn-primary:hover { background: var(--muted-brass); color: var(--ink-noir); } /* unique to /budget-calculator/ */ .calc-output .refacing-note { background: rgba(255,255,255,0.06); padding: 16px 20px; border-left: 2px solid var(--muted-brass); font-size: 0.9rem; line-height: 1.5; color: rgba(246,243,236,0.85); margin-bottom: 20px; font-family: var(--font-serif); font-style: italic; } /* unique to /budget-calculator/ */ .calc-fine { padding: 64px 0; background: var(--alabaster); border-top: 1px solid var(--hairline); } /* unique to /budget-calculator/ */ .calc-fine .container.narrow { max-width: 820px; } /* unique to /budget-calculator/ */ .calc-fine h2 { font-family: var(--font-sans); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--ink-noir); margin: 0 0 16px; } /* unique to /budget-calculator/ */ .calc-fine p { font-size: 1rem; line-height: 1.65; color: var(--charcoal); margin: 0 0 16px; max-width: 56ch; } /* unique to /budget-calculator/ */ .calc-fine ul { font-size: 0.95rem; line-height: 1.65; color: var(--charcoal); padding-left: 20px; max-width: 56ch; } /* unique to /budget-calculator/ */ .calc-fine li { margin: 6px 0; } /* unique to /budget-calculator/ */ .pullquote { font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.5; color: var(--ink-noir); margin: 24px 0; padding: 0 0 0 24px; border-left: 2px solid var(--muted-brass, #b9904a); font-style: italic; } /* unique to /budget-calculator/ */ .closing h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.1; letter-spacing: -0.03em; color: var(--alabaster); margin: 0 auto 24px; max-width: 22ch; } /* unique to /budget-calculator/ */ .closing p { font-size: 1.05rem; color: rgba(246,243,236,0.85); margin: 0 auto 32px; max-width: 50ch; } /* unique to /budget-calculator/ */ @media (max-width: 920px) { .calc-grid { grid-template-columns: 1fr; gap: 32px; } .calc-output { position: static; padding: 32px; } .calc-form { padding: 32px; } .calc-form .radio-group { grid-template-columns: repeat(2, 1fr); } .calc-form .row-2 { grid-template-columns: 1fr; } } /* unique to /budget-calculator/ */ footer { background: var(--ink-noir, #0d0d0d); color: rgba(246,243,236,0.7); padding: 80px 0 32px; } /* unique to /budget-calculator/ */ footer a { color: inherit; text-decoration: none; transition: color 180ms; } /* unique to /budget-calculator/ */ footer a:hover { color: var(--muted-brass, #b9904a); } /* unique to /budget-calculator/ */ footer .container { max-width: 1280px; margin: 0 auto; padding: 0 32px; } /* unique to /budget-calculator/ */ footer .ft-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 56px; padding-bottom: 48px; border-bottom: 1px solid rgba(246,243,236,0.1); } /* unique to /budget-calculator/ */ footer .ft-brand .name { font-family: var(--font-serif, Georgia, serif); font-size: 1.875rem; color: var(--alabaster, #f6f3ec); line-height: 1; letter-spacing: -0.02em; font-weight: 400; } /* unique to /budget-calculator/ */ footer .ft-brand .sub { font-size: 0.65rem; letter-spacing: 0.32em; color: rgba(246,243,236,0.55); margin-top: 6px; font-weight: 500; } /* unique to /budget-calculator/ */ footer .ft-brand p { color: rgba(246,243,236,0.65); font-size: 0.92rem; line-height: 1.55; max-width: 320px; margin-top: 22px; } /* unique to /budget-calculator/ */ footer .ft-col h5 { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; color: rgba(246,243,236,0.5); margin: 0 0 16px; } /* unique to /budget-calculator/ */ footer .ft-col ul { list-style: none; padding: 0; margin: 0; } /* unique to /budget-calculator/ */ footer .ft-col li { padding: 6px 0; font-size: 0.9rem; color: rgba(246,243,236,0.85); } /* unique to /budget-calculator/ */ footer .ft-contact { padding: 28px 0 8px; display: flex; gap: 48px; align-items: center; flex-wrap: wrap; } /* unique to /budget-calculator/ */ footer .ft-contact-list { list-style: none; display: flex; gap: 32px; padding: 0; margin: 0; font-size: 0.95rem; color: var(--alabaster, #f6f3ec); } /* unique to /budget-calculator/ */ footer .ft-contact-list a { color: var(--alabaster, #f6f3ec); } /* unique to /budget-calculator/ */ footer .ft-areas { color: rgba(246,243,236,0.55); font-size: 0.85rem; line-height: 1.5; margin: 0; flex: 1; min-width: 360px; } /* unique to /budget-calculator/ */ footer .ft-legal { padding-top: 24px; border-top: 1px solid rgba(246,243,236,0.1); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.78rem; color: rgba(246,243,236,0.5); letter-spacing: 0.04em; } /* unique to /budget-calculator/ */ footer .ft-legal a { color: rgba(246,243,236,0.55); } /* unique to /budget-calculator/ */ @media (max-width: 1024px) { footer .ft-grid { grid-template-columns: 1fr 1fr; gap: 40px; } footer .ft-brand { grid-column: 1 / -1; } } /* unique to /budget-calculator/ */ @media (max-width: 600px) { footer .ft-grid { grid-template-columns: 1fr; gap: 32px; } footer .ft-contact { flex-direction: column; align-items: flex-start; gap: 16px; } footer .ft-areas { min-width: auto; } footer .ft-legal { flex-direction: column; } } /* unique to /contact/ */ .ct-hero { padding: 80px 0 56px; } /* unique to /contact/ */ .ct-hero h1 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2.75rem, 5.5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.04em; color: var(--ink-noir); margin: 0 0 32px; max-width: 16ch; } /* unique to /contact/ */ .ct-hero h1 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; letter-spacing: -0.02em; } /* unique to /contact/ */ .ct-hero .lede { font-size: 1.25rem; line-height: 1.55; color: var(--charcoal); max-width: 56ch; margin: 0; } /* unique to /contact/ */ .ct-main { padding: 32px 0 88px; } /* unique to /contact/ */ .ct-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; } /* unique to /contact/ */ .ct-info h2 { font-family: var(--font-sans); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--ink-noir); margin: 0 0 32px; padding-bottom: 24px; border-bottom: 1px solid var(--hairline); } /* unique to /contact/ */ .ct-block { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--hairline); } /* unique to /contact/ */ .ct-block:last-child { border-bottom: none; } /* unique to /contact/ */ .ct-block .lbl { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lunar-rock); margin-bottom: 12px; font-weight: 500; } /* unique to /contact/ */ .ct-block .val { font-size: 1.05rem; color: var(--ink-noir); line-height: 1.5; } /* unique to /contact/ */ .ct-block .val a { color: var(--ink-noir); text-decoration: none; border-bottom: 1px solid var(--hairline); padding-bottom: 2px; transition: border-color 180ms; } /* unique to /contact/ */ .ct-block .val a:hover { border-color: var(--brass-deep); color: var(--brass-deep); } /* unique to /contact/ */ .ct-block .meta { font-size: 0.85rem; color: var(--lunar-rock); margin-top: 6px; } /* unique to /contact/ */ .ct-form { background: var(--cloud); padding: 48px; } /* unique to /contact/ */ .ct-form h2 { font-family: var(--font-sans); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--ink-noir); margin: 0 0 8px; } /* unique to /contact/ */ .ct-form .sub { font-size: 0.95rem; color: var(--charcoal); margin: 0 0 32px; } /* unique to /contact/ */ .ct-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } /* unique to /contact/ */ .ct-form .field { display: flex; flex-direction: column; } /* unique to /contact/ */ .ct-form .field.full { grid-column: 1 / -1; } /* unique to /contact/ */ .ct-form label { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lunar-rock); font-weight: 500; margin-bottom: 8px; } /* unique to /contact/ */ .ct-form input, .ct-form select, .ct-form textarea { font-family: var(--font-sans); font-size: 1rem; padding: 14px 16px; border: 1px solid rgba(30,30,28,0.18); border-radius: 2px; background: var(--alabaster); color: var(--ink-noir); transition: border-color 180ms, box-shadow 180ms; } /* unique to /contact/ */ .ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus { border-color: var(--lunar-rock); outline: none; box-shadow: 0 0 0 3px rgba(139,145,138,0.18); } /* unique to /contact/ */ .ct-form textarea { min-height: 120px; resize: vertical; } /* unique to /contact/ */ .ct-form .submit-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 8px; } /* unique to /contact/ */ .ct-form .small { font-size: 0.8rem; color: var(--lunar-rock); } /* unique to /countertop-catalog/ */ .cc-hero { padding: 80px 0 48px; text-align: center; } /* unique to /countertop-catalog/ */ .cc-hero h1 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2.75rem, 5.5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.04em; color: var(--ink-noir); margin: 0 auto 32px; max-width: 18ch; } /* unique to /countertop-catalog/ */ .cc-hero h1 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; letter-spacing: -0.02em; } /* unique to /countertop-catalog/ */ .cc-hero .lede { font-size: 1.15rem; line-height: 1.55; color: var(--charcoal); max-width: 60ch; margin: 0 auto; } /* unique to /countertop-catalog/ */ .cc-band { padding: 0; } /* unique to /countertop-catalog/ */ .cc-band-img { width: 100%; aspect-ratio: 16/9; max-height: 480px; background: var(--cv2-img-cc-band, url('../images/black-wood-cabinets-black-stone-waterfall-island-houston-tx.jpg')) center/cover; } /* unique to /countertop-catalog/ */ .cc-family { padding: 88px 0; } /* unique to /countertop-catalog/ */ .cc-family + .cc-family { padding-top: 0; } /* unique to /countertop-catalog/ */ .cc-family-head { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: end; margin-bottom: 56px; } /* unique to /countertop-catalog/ */ .cc-family-head .eyebrow { margin-bottom: 16px; } /* unique to /countertop-catalog/ */ .cc-family-head h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.875rem, 3.5vw, 2.75rem); line-height: 1.05; letter-spacing: -0.025em; color: var(--ink-noir); margin: 0; } /* unique to /countertop-catalog/ */ .cc-family-head h2 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; } /* unique to /countertop-catalog/ */ .cc-family-head p { font-size: 1rem; line-height: 1.7; color: var(--charcoal); margin: 0; max-width: 50ch; } /* unique to /countertop-catalog/ */ .cc-family-head .price { display: inline-block; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; padding: 6px 12px; background: var(--cloud); color: var(--ink-noir); margin-top: 16px; } /* unique to /countertop-catalog/ */ .cc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; } /* unique to /countertop-catalog/ */ .cc-card { --cc-ease-out: cubic-bezier(0.22, 1, 0.36, 1); position: relative; overflow: hidden; background: var(--cloud); padding: 24px; aspect-ratio: 1/1.15; display: flex; flex-direction: column; justify-content: space-between; transform: translateY(0) scale(1); transition: transform 220ms var(--cc-ease-out), background-color 220ms ease, box-shadow 220ms var(--cc-ease-out); } /* unique to /countertop-catalog/ */ .cc-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(184,153,104,0.08) 48%, rgba(30,30,28,0)); opacity: 0; pointer-events: none; transition: opacity 220ms ease; } /* unique to /countertop-catalog/ */ .cc-card .swatch { position: relative; overflow: hidden; width: 100%; aspect-ratio: 4/3; background-position: center; background-size: cover; margin-bottom: 16px; transform: scale(1); transition: transform 320ms var(--cc-ease-out), filter 320ms ease; } /* gated to the supplier-media catalog so the authorized CSS can ship independently of its WordPress record */ .cc-supplier-catalog .cc-card { color: inherit; text-decoration: none; } /* gated to the supplier-media catalog so the current local-material catalog is unchanged until publication */ .cc-supplier-catalog .cc-card .swatch { aspect-ratio: 760/367; background: #F1EFE9; } /* unique to the supplier-media version of /countertop-catalog/ */ .cc-supplier-catalog .cc-card .swatch img { display: block; width: 100%; height: 100%; object-fit: contain; } /* unique to /countertop-catalog/ */ .cc-card .swatch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 0 34%, rgba(255,255,255,0.36) 48%, transparent 62% 100%); opacity: 0; transform: translateX(-72%); transition: transform 460ms var(--cc-ease-out), opacity 180ms ease; pointer-events: none; } /* unique to /countertop-catalog/ */ .cc-card .name { font-family: var(--font-sans); font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-noir); margin: 0 0 4px; transform: translateY(0); transition: transform 180ms var(--cc-ease-out), color 180ms ease; } /* unique to /countertop-catalog/ */ .cc-card .meta { font-size: 0.78rem; letter-spacing: 0.04em; color: var(--lunar-rock); transition: color 180ms ease; } /* unique to /countertop-catalog/ */ .cc-card .detail { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.45; letter-spacing: 0.08em; color: var(--charcoal); } /* unique to /countertop-catalog/ */ .cc-source { padding: 0 0 88px; } /* unique to /countertop-catalog/ */ .cc-source-panel { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 32px 0; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; } /* unique to /countertop-catalog/ */ .cc-source-panel p { margin: 0; color: var(--charcoal); line-height: 1.65; max-width: 64ch; } /* unique to /countertop-catalog/ */ .cc-source-actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; } /* unique to /countertop-catalog/ */ .cc-material-guide { padding-top: 0; } /* unique to /countertop-catalog/ */ .cc-material-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } /* unique to /countertop-catalog/ */ .cc-material-note { padding: 28px 24px; border-right: 1px solid var(--hairline); } /* unique to /countertop-catalog/ */ .cc-material-note:last-child { border-right: 0; } /* unique to /countertop-catalog/ */ .cc-material-note h3 { margin: 0 0 12px; font-family: var(--font-sans); font-size: 1.05rem; font-weight: 500; color: var(--ink-noir); } /* unique to /countertop-catalog/ */ .cc-material-note p { margin: 0; color: var(--charcoal); font-size: 0.9rem; line-height: 1.65; } /* unique to /countertop-catalog/ */ @media (hover: hover) and (pointer: fine) { .cc-card:hover { background: #DCD9CF; transform: translateY(-6px) scale(1.01); box-shadow: 0 8px 14px rgba(30,30,28,0.10); } .cc-card:hover::before { opacity: 1; } .cc-card:hover .swatch { transform: scale(1.045); filter: saturate(1.04) contrast(1.03); } .cc-card:hover .swatch::after { opacity: 1; transform: translateX(72%); } .cc-card:hover .name { transform: translateY(-1px); color: var(--charcoal); } .cc-card:hover .meta { color: #6F746E; } } /* unique to /countertop-catalog/ */ .cc-card:active { transform: translateY(-2px) scale(0.985); transition-duration: 120ms; } /* unique to /countertop-catalog/ */ @media (prefers-reduced-motion: no-preference) { .cc-card { animation: cc-card-enter 520ms cubic-bezier(0.22, 1, 0.36, 1) both; } .cc-card:nth-child(2) { animation-delay: 45ms; } .cc-card:nth-child(3) { animation-delay: 90ms; } .cc-card:nth-child(4) { animation-delay: 135ms; } } /* unique to /countertop-catalog/ */ @keyframes cc-card-enter { from { opacity: 0.01; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } /* unique to /countertop-catalog/ */ @media (prefers-reduced-motion: reduce) { .cc-card, .cc-card::before, .cc-card .swatch, .cc-card .swatch::after, .cc-card .name, .cc-card .meta { animation: none; transition-duration: 0.01ms; transform: none; } } /* unique to /countertop-catalog/ */ @media (max-width: 1024px) { .cc-supplier-catalog .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cc-material-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cc-material-note:nth-child(2) { border-right: 0; } .cc-material-note:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); } } /* unique to /countertop-catalog/ */ @media (max-width: 760px) { .cc-hero { padding: 64px 0 40px; } .cc-hero h1 { font-size: clamp(2.15rem, 10vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; max-width: 9.5ch; overflow-wrap: break-word; } .cc-hero h1 em { display: block; } .cc-hero .lede { font-size: 1rem; max-width: 34ch; text-wrap: pretty; } .cc-band-img { aspect-ratio: 4/3; max-height: 360px; } .cc-family { padding: 64px 0; } .cc-family-head { grid-template-columns: 1fr; gap: 24px; align-items: start; margin-bottom: 32px; } .cc-family-head h2 { font-size: clamp(1.8rem, 8vw, 2.35rem); letter-spacing: -0.02em; max-width: 12ch; } .cc-family-head p { max-width: 100%; } .cc-family-head .price { max-width: 100%; letter-spacing: 0.08em; white-space: normal; } .cc-grid, .cc-supplier-catalog .cc-grid { grid-template-columns: 1fr; } .cc-card { aspect-ratio: auto; min-height: 0; padding: 22px; } .cc-source-panel { grid-template-columns: 1fr; } .cc-source-actions { justify-content: flex-start; } .cc-material-grid { grid-template-columns: 1fr; } .cc-material-note { border-right: 0; border-bottom: 1px solid var(--hairline); } .cc-material-note:last-child { border-bottom: 0; } } /* unique to /countertop-catalog/ */ @media (max-width: 480px) { .cc-hero h1 { font-size: clamp(2rem, 10.5vw, 2.55rem); } .cc-family-head .eyebrow { letter-spacing: 0.22em; } .cc-card { padding: 18px; } } /* unique to /countertop-catalog/ */ /* Local slab-photo swatches */ .swatch-calcatta-laza { background-image: url('../images/countertop-catalog/calcatta-laza.jpg'); } /* unique to /countertop-catalog/ */ .swatch-statuario-maximus { background-image: url('../images/countertop-catalog/statuario-maximus.jpg'); } /* unique to /countertop-catalog/ */ .swatch-pearl-jasmine { background-image: url('../images/countertop-catalog/pearl-jasmine.jpg'); } /* unique to /countertop-catalog/ */ .swatch-brittanicca-warm { background-image: url('../images/countertop-catalog/brittanicca-warm.jpg'); } /* unique to /countertop-catalog/ */ .swatch-azul-macaubas { background-image: url('../images/countertop-catalog/azul-macaubas.jpg'); } /* unique to /countertop-catalog/ */ .swatch-taj-mahal { background-image: url('../images/countertop-catalog/taj-mahal.jpg'); } /* unique to /countertop-catalog/ */ .swatch-sea-pearl { background-image: url('../images/countertop-catalog/sea-pearl.jpg'); } /* unique to /countertop-catalog/ */ .swatch-white-macaubas { background-image: url('../images/countertop-catalog/white-macaubas.jpg'); } /* unique to /countertop-catalog/ */ .swatch-calacatta-gold { background-image: url('../images/countertop-catalog/calacatta-gold.jpg'); } /* unique to /countertop-catalog/ */ .swatch-calacatta-vagli { background-image: url('../images/countertop-catalog/calacatta-vagli.jpg'); } /* unique to /countertop-catalog/ */ .swatch-carrara-white { background-image: url('../images/countertop-catalog/carrara-white.jpg'); } /* unique to /countertop-catalog/ */ .swatch-statuario { background-image: url('../images/countertop-catalog/statuario.jpg'); } /* unique to /countertop-catalog/ */ .swatch-absolute-black { background-image: url('../images/countertop-catalog/absolute-black.jpg'); } /* unique to /countertop-catalog/ */ .swatch-river-white { background-image: url('../images/countertop-catalog/river-white.jpg'); } /* unique to /countertop-catalog/ */ .swatch-colonial-cream { background-image: url('../images/countertop-catalog/colonial-cream.jpg'); } /* unique to /countertop-catalog/ */ .swatch-black-pearl { background-image: url('../images/countertop-catalog/black-pearl.jpg'); } /* unique to /countertop-catalog/ */ .swatch-walnut-edge-grain { background-image: url('../images/countertop-catalog/walnut-edge-grain.jpg'); } /* unique to /countertop-catalog/ */ .swatch-white-oak-end-grain { background-image: url('../images/countertop-catalog/white-oak-end-grain.jpg'); } /* unique to /countertop-catalog/ */ .swatch-maple-edge-grain { background-image: url('../images/countertop-catalog/maple-edge-grain.jpg'); } /* unique to /countertop-catalog/ */ .swatch-walnut-end-grain { background-image: url('../images/countertop-catalog/walnut-end-grain.jpg'); } /* ============== COUNTERTOP CATALOG EXPLORER ============== */ .cc-catalog .cc-explorer { padding: 88px 0 24px; } .cc-catalog .cc-explorer-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.78fr); gap: clamp(36px, 7vw, 96px); align-items: end; margin-bottom: 44px; } .cc-catalog .cc-explorer-intro h2 { margin: 0; max-width: 14ch; font-family: var(--font-sans); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.035em; } .cc-catalog .cc-explorer-intro h2 em { font-family: var(--font-serif); font-weight: 400; color: var(--lunar-rock); } .cc-catalog .cc-explorer-intro p { margin: 0; max-width: 52ch; color: var(--charcoal); line-height: 1.7; } .cc-catalog .cc-filter-rail { display: flex; flex-wrap: wrap; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin-bottom: 28px; } .cc-catalog .cc-filter { appearance: none; border: 0; border-right: 1px solid var(--hairline); background: transparent; color: var(--charcoal); padding: 15px 20px; font: 500 0.78rem/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; } .cc-catalog .cc-filter span { margin-left: 8px; color: var(--lunar-rock); font-family: var(--font-mono); } .cc-catalog .cc-filter.is-active { background: var(--ink-noir); color: var(--alabaster); } .cc-catalog .cc-filter.is-active span { color: var(--muted-brass); } .cc-catalog .cc-filter:focus-visible, .cc-catalog .cc-card:focus-visible { outline: 3px solid var(--muted-brass); outline-offset: 3px; } .cc-catalog .cc-selected { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.72fr); background: var(--cloud); border: 1px solid var(--hairline); } .cc-catalog .cc-selected-media { min-height: 420px; display: grid; place-items: center; overflow: hidden; background: #DEDCD5; } .cc-catalog .cc-selected-media img { display: block; width: 100%; height: 100%; max-height: 620px; object-fit: contain; } .cc-catalog .cc-selected-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 4vw, 58px); border-left: 1px solid var(--hairline); } .cc-catalog .cc-selected-kicker { font: 500 0.7rem/1.4 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--lunar-rock); } .cc-catalog .cc-selected-copy h2 { margin: 15px 0 18px; font: 500 clamp(2rem, 3vw, 3rem)/1.02 var(--font-sans); letter-spacing: -0.035em; } .cc-catalog .cc-selected-description { margin: 0 0 26px; color: var(--charcoal); line-height: 1.65; } .cc-catalog .cc-selected-specs { display: grid; grid-template-columns: 1fr; margin: 0; border-top: 1px solid var(--hairline); } .cc-catalog .cc-selected-specs div { display: grid; grid-template-columns: 1fr 1.15fr; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--hairline); } .cc-catalog .cc-selected-specs dt { color: var(--lunar-rock); font: 500 0.68rem/1.45 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; } .cc-catalog .cc-selected-specs dd { margin: 0; color: var(--ink-noir); font-size: 0.88rem; line-height: 1.45; } .cc-catalog .cc-selected-note { margin: 22px 0 0; color: var(--lunar-rock); font-size: 0.78rem; line-height: 1.55; } .cc-catalog .cc-selected-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .cc-catalog .cc-results { margin: 16px 0 0; color: var(--lunar-rock); font: 500 0.72rem/1.5 var(--font-mono); letter-spacing: 0.06em; } .cc-catalog .cc-family { padding: 72px 0; } .cc-catalog .cc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .cc-catalog .cc-card { appearance: none; min-width: 0; aspect-ratio: auto; padding: 0; border: 1px solid var(--hairline); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow: hidden; transform: none; animation: none; box-shadow: none; transition: border-color 180ms ease, background-color 180ms ease; } .cc-catalog .cc-card::before, .cc-catalog .cc-card .swatch::after { display: none; } .cc-catalog .cc-card:hover { background: var(--cloud); border-color: var(--lunar-rock); transform: none; box-shadow: none; } .cc-catalog .cc-card.is-selected { background: var(--cloud); border-color: var(--ink-noir); box-shadow: inset 0 0 0 1px var(--ink-noir); } .cc-catalog .cc-card[hidden] { display: none !important; } .cc-catalog .cc-card .swatch { display: grid; place-items: center; width: 100%; aspect-ratio: 2.05/1; margin: 0; overflow: hidden; background: #DEDCD5; transform: none; } .cc-catalog .cc-card:hover .swatch { transform: none; filter: none; } .cc-catalog .cc-card .swatch img { display: block; width: 100%; height: 100%; object-fit: contain; } .cc-catalog .cc-card-copy { display: block; padding: 18px; } .cc-catalog .cc-card .name, .cc-catalog .cc-card .meta, .cc-catalog .cc-card .detail { display: block; transform: none; } @media (max-width: 1024px) { .cc-catalog .cc-selected { grid-template-columns: 1fr; } .cc-catalog .cc-selected-copy { border-left: 0; border-top: 1px solid var(--hairline); } .cc-catalog .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .cc-catalog .cc-explorer { padding: 64px 0 12px; } .cc-catalog .cc-explorer-intro { grid-template-columns: 1fr; gap: 22px; margin-bottom: 32px; } .cc-catalog .cc-filter-rail { display: grid; grid-template-columns: 1fr 1fr; } .cc-catalog .cc-filter { border-bottom: 1px solid var(--hairline); text-align: left; } .cc-catalog .cc-selected-media { min-height: 0; aspect-ratio: 1.35/1; } .cc-catalog .cc-selected-copy { padding: 30px 24px; } .cc-catalog .cc-grid { grid-template-columns: 1fr; } } /* ============== DOOR CATALOG + COLOR VISUALIZER ============== */ .door-tool { --door-control-border: rgba(30, 30, 28, 0.18); --door-media-background: #E9E6DE; --door-preview-color: #F3EEE4; color: var(--ink-noir, #1E1E1C); } .door-tool button { font: inherit; } .door-tool button:focus-visible, .door-tool a:focus-visible { outline: 3px solid var(--muted-brass, #B89968); outline-offset: 3px; } .door-catalog-intro { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; margin: 0 0 40px; } .body-section .door-catalog-intro h2, .body-section .door-catalog-explorer h2 { margin: 0; } .body-section .door-catalog-intro p, .body-section .door-catalog-explorer p { margin: 0; max-width: 58ch; } .door-catalog-finish { border: 0; border-top: 1px solid var(--neutral-300, #C9C5BB); border-bottom: 1px solid var(--neutral-300, #C9C5BB); margin: 0 0 56px; padding: 20px 0 22px; } .door-catalog-finish legend { float: left; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; margin: 12px 32px 0 0; text-transform: uppercase; } .door-catalog-color-rail { display: flex; gap: 8px; justify-content: flex-start; flex-wrap: wrap; } .door-catalog-color-rail::after { clear: both; content: ""; display: table; } .door-catalog-finish-groups { display: grid; gap: 18px; } .door-catalog-finish-group { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: start; } .door-finish-family-label { display: block; font-size: 0.78rem; font-weight: 500; line-height: 1.35; margin: 0; color: var(--neutral-700, #444640); } .door-finish-picker .door-finish-family-label { margin: 22px 0 10px; } .door-finish-picker legend + .door-finish-family-label { margin-top: 0; } .door-catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 24px; } .door-catalog-card { appearance: none; background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0; text-align: left; transition: transform 220ms var(--ease-out); } .door-catalog-card:hover { transform: translateY(-2px); } .door-catalog-media, .door-profile-media { align-items: center; background: var(--door-media-background); border: 1px solid rgba(30, 30, 28, 0.08); display: flex; justify-content: center; overflow: hidden; transition: outline-color 220ms var(--ease-out); } .door-catalog-media { aspect-ratio: 4 / 5; margin-bottom: 16px; padding: 14px; } .door-catalog-card.is-selected .door-catalog-media { outline: 2px solid var(--ink-noir, #1E1E1C); outline-offset: 4px; } .door-finish-layer { aspect-ratio: 2 / 3; background: var(--door-preview-color); display: block; height: 100%; max-width: 100%; overflow: hidden; position: relative; isolation: isolate; } .door-finish-layer img { display: block; filter: none; height: 100%; mix-blend-mode: normal; object-fit: contain; position: relative; width: 100%; z-index: 1; } .door-finish-layer.is-exact-door-image { background: transparent; } .door-finish-layer.is-exact-door-image img { filter: none; mix-blend-mode: normal; } .door-catalog-card-copy { display: block; } .door-catalog-card-copy strong { display: block; font-size: 1rem; font-weight: 500; margin-bottom: 4px; } .door-catalog-card-copy small { display: block; font-size: 0.82rem; line-height: 1.45; color: var(--neutral-600, #5A5D58); max-width: 27ch; } .door-catalog-explorer { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: center; margin-top: 88px; padding: clamp(32px, 5vw, 56px); background: var(--cloud, #E4E1D9); } .door-catalog-preview { max-width: 340px; width: 100%; margin: 0 auto; } .door-catalog-kicker { font-size: 0.78rem !important; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neutral-600, #5A5D58) !important; margin-bottom: 12px !important; } .door-catalog-explorer h2 em { font-family: var(--font-serif, Georgia, serif); font-weight: 400; color: var(--lunar-rock, #8B918A); } .door-catalog-explorer-copy > p:not(.door-catalog-kicker) { margin-top: 20px; } .door-catalog-explorer .btn { margin-top: 28px; } .door-tool-layout { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: start; } .door-tool-stage { position: sticky; top: 104px; } .door-tool-stage-frame { position: relative; align-items: center; aspect-ratio: 4 / 5; background: var(--door-media-background); border: 1px solid rgba(30, 30, 28, 0.08); display: flex; justify-content: center; overflow: hidden; padding: 18px; } .door-tool-stage-frame .door-finish-layer { height: 100%; max-width: 100%; } .door-tool-stage-frame img { transition: opacity 180ms ease-out; } .is-loading-preview .door-tool-stage-frame img { opacity: 0.55; } .door-tool-loading { position: absolute; right: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 7px 10px; background: rgba(30, 30, 28, 0.82); color: var(--alabaster, #FBF9F4); font-size: 0.72rem; line-height: 1.35; } .has-preview-error .door-tool-loading { background: var(--danger, #B07868); } .door-tool-selection { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding: 16px 0 10px; border-bottom: 1px solid var(--door-control-border); } .door-tool-selection span { font-size: 0.9rem; color: var(--neutral-600, #5A5D58); } .door-tool-selection strong { font-family: var(--font-serif, Georgia, serif); font-size: 1.4rem; font-weight: 400; } .body-section .door-tool-note { font-size: 0.85rem; line-height: 1.55; color: var(--neutral-600, #5A5D58); margin: 14px 0 0; } .door-tool-group { border: 0; padding: 0; margin: 0 0 48px; min-width: 0; } .door-tool-group legend { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 18px; } .door-profile-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; } .door-profile-option { appearance: none; background: transparent; border: 1px solid var(--door-control-border); color: inherit; cursor: pointer; padding: 7px; transition: background-color 180ms ease-out, border-color 180ms ease-out; } .door-profile-option:hover { border-color: var(--lunar-rock, #8B918A); } .door-profile-option.is-selected { background: var(--cloud, #E4E1D9); border-color: var(--ink-noir, #1E1E1C); } .door-profile-media { aspect-ratio: 4 / 5; margin-bottom: 7px; padding: 5px; } .door-profile-option > span:last-child { display: block; font-size: 0.72rem; line-height: 1.25; min-height: 2.5em; } .door-color-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .door-color-option { appearance: none; background: transparent; border: 1px solid transparent; color: inherit; cursor: pointer; display: flex; gap: 9px; align-items: center; padding: 8px; text-align: left; } .door-color-option:hover { background: var(--neutral-100, #F0EDE5); } .door-color-option.is-selected { border-color: var(--ink-noir, #1E1E1C); } .door-color-option[hidden] { display: none; } .door-color-chip { width: 28px; height: 28px; border: 1px solid rgba(30, 30, 28, 0.2); flex: 0 0 28px; } .door-color-option > span:last-child { font-size: 0.78rem; line-height: 1.25; } .door-color-option[data-door-color="white-dove"] .door-color-chip { background: #F3EEE4; } .door-color-option[data-door-color="pure-white"] .door-color-chip { background: #F1ECE2; } .door-color-option[data-door-color="agreeable-gray"] .door-color-chip { background: #CBC3B4; } .door-color-option[data-door-color="hale-navy"] .door-color-chip { background: #3C4556; } .door-color-option[data-door-color="evergreen-fog"] .door-color-chip { background: #96A28E; } .door-color-option[data-door-color="urbane-bronze"] .door-color-chip { background: #5A524A; } .door-color-option[data-door-color="tricorn-black"] .door-color-chip { background: #2E2C2C; } .door-color-option[data-door-color="natural-oak"] { --door-swatch-color: #C8A678; } .door-color-option[data-door-color="golden-oak"] { --door-swatch-color: #B89050; } .door-color-option[data-door-color="early-american"] { --door-swatch-color: #9A7842; } .door-color-option[data-door-color="special-walnut"] { --door-swatch-color: #6A4E2E; } .door-color-option[data-door-color="dark-walnut"] { --door-swatch-color: #4A3620; } .door-color-option[data-door-color="jacobean"] { --door-swatch-color: #3E2E18; } .door-color-option[data-door-color="ebony"] { --door-swatch-color: #2C2218; } .door-color-option[data-door-color="white-wash"] { --door-swatch-color: #DDD1BC; } .door-color-option[data-door-color="weathered-oak"] { --door-swatch-color: #A89A88; } .door-color-option[data-color-type="stain"] .door-color-chip { background-color: var(--door-swatch-color); background-image: url('../images/door-catalog/white-oak-grain.webp'); background-blend-mode: multiply; background-position: center; background-size: cover; } .door-color-option-compact { border-color: transparent; flex: 0 1 104px; justify-content: center; min-height: 44px; padding: 6px 8px; } .door-color-option-compact .door-color-chip { border-radius: 50%; height: 32px; width: 32px; flex-basis: 32px; } .door-color-option-compact > span:last-child { font-size: 0.72rem; } .door-tool-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .door-tool-text-link { font-size: 0.85rem; text-decoration: underline; text-underline-offset: 4px; } .body-section .door-tool-copy-status { min-height: 1.5em; margin: 10px 0 0; font-size: 0.8rem; color: var(--neutral-600, #5A5D58); } .color-plan-dialog[hidden] { display: none; } body.color-plan-dialog-open { overflow: hidden; } .color-plan-dialog { display: grid; inset: 0; place-items: center; position: fixed; z-index: 1000; } .color-plan-dialog-backdrop { background: rgba(30, 30, 28, 0.72); inset: 0; position: absolute; } body.colorup-v2 .color-plan-dialog-panel { background: var(--alabaster, #FBF9F4); box-shadow: 0 24px 72px rgba(30, 30, 28, 0.24); max-height: calc(100vh - 40px); max-width: 680px; overflow-y: auto; padding: clamp(28px, 5vw, 52px); position: relative; width: min(calc(100% - 32px), 680px); z-index: 1; } .color-plan-dialog-panel h2 { font-family: var(--font-sans, "Switzer", Arial, sans-serif); font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.02; margin: 10px 0 16px; } .body-section .color-plan-dialog-panel > p { margin: 0; max-width: 58ch; } .color-plan-dialog-close { align-items: center; background: transparent; border: 1px solid var(--neutral-300, #D6D2C8); color: var(--ink-noir, #1E1E1C); cursor: pointer; display: inline-flex; font: inherit; font-size: 1.5rem; height: 44px; justify-content: center; line-height: 1; position: absolute; right: 16px; top: 16px; width: 44px; } .color-plan-form { margin-top: 28px; } .color-plan-form-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .color-plan-form-grid label:first-child { grid-column: 1 / -1; } .color-plan-form label, .color-plan-share-link { display: grid; font-size: 0.72rem; font-weight: 500; gap: 8px; letter-spacing: 0.08em; text-transform: uppercase; } .color-plan-form input[type="text"], .color-plan-form input[type="email"], .color-plan-form input[type="tel"] { background: #fff; border: 1px solid var(--neutral-300, #D6D2C8); border-radius: 0; color: var(--ink-noir, #1E1E1C); font: 400 1rem/1.3 var(--font-sans, "Switzer", Arial, sans-serif); min-height: 48px; padding: 11px 12px; text-transform: none; } .color-plan-form input:focus-visible, .color-plan-dialog-close:focus-visible { outline: 2px solid var(--muted-brass, #9A763C); outline-offset: 2px; } .color-plan-consent { align-items: start; display: grid; grid-template-columns: 20px 1fr; letter-spacing: 0; line-height: 1.5; margin-top: 20px; text-transform: none; } .color-plan-consent input { height: 18px; margin: 2px 0 0; width: 18px; } .color-plan-honeypot { left: -9999px; position: absolute; } .color-plan-form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .body-section .color-plan-form-status { min-height: 1.5em; margin: 14px 0 0; } .color-plan-share-link { margin-top: 14px; } .color-plan-share-link[hidden] { display: none; } /* unique to /what-service-do-i-need/ */ .service-fit-guide { display: grid; gap: 52px; } .service-fit-guide-head { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.75fr); align-items: end; } .service-fit-guide-head .door-catalog-kicker { grid-column: 1 / -1; } .body-section .service-fit-guide-head h2 { font: 500 clamp(2.2rem, 4.5vw, 4rem)/1.02 var(--font-sans, "Switzer", Arial, sans-serif); letter-spacing: -0.04em; margin: 0; max-width: 13ch; } .body-section .service-fit-guide-head > p:last-child { margin: 0; max-width: 58ch; } .service-fit-grid { border-top: 1px solid var(--hairline, #D6D2C8); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .service-fit-card { border-bottom: 1px solid var(--hairline, #D6D2C8); border-right: 1px solid var(--hairline, #D6D2C8); color: var(--ink-noir, #1E1E1C); display: grid; grid-template-rows: auto auto auto 1fr auto; min-height: 330px; padding: 28px; text-decoration: none; transition: background 180ms ease-out; } .service-fit-card:nth-child(3n) { border-right: 0; } .service-fit-card:hover, .service-fit-card:focus-visible { background: rgba(139, 145, 138, 0.08); } .service-fit-number { color: var(--brass-deep, #8C6936); font-size: 0.68rem; letter-spacing: 0.22em; margin-bottom: 32px; } .body-section .service-fit-card h3 { font: 500 1.35rem/1.15 var(--font-sans, "Switzer", Arial, sans-serif); letter-spacing: -0.025em; margin: 0 0 20px; } .service-fit-card strong { font-size: 0.9rem; font-weight: 500; line-height: 1.4; } .body-section .service-fit-card p { font-size: 0.9rem; margin: 10px 0 24px; } .service-fit-link { align-self: end; color: var(--brass-deep, #8C6936); font-size: 0.82rem; font-weight: 500; } .service-fit-combination { align-items: end; background: var(--cloud, #E4E1D9); display: grid; gap: 24px 40px; grid-template-columns: 0.8fr 1fr auto; padding: clamp(28px, 5vw, 52px); } .body-section .service-fit-combination h2 { font: 500 clamp(1.8rem, 3.5vw, 2.8rem)/1.05 var(--font-sans, "Switzer", Arial, sans-serif); letter-spacing: -0.035em; margin: 0; } .body-section .service-fit-combination p { margin: 0; } @media (max-width: 980px) { .door-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .door-tool-layout { grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr); gap: 36px; } .door-profile-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } .door-color-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } .door-catalog-color-rail { flex-wrap: wrap; } .service-fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .service-fit-card:nth-child(3n) { border-right: 1px solid var(--hairline, #D6D2C8); } .service-fit-card:nth-child(2n) { border-right: 0; } .service-fit-combination { grid-template-columns: 1fr 1fr; } .service-fit-combination .btn { justify-self: start; } } @media (max-width: 720px) { .door-catalog-intro, .door-catalog-explorer, .door-tool-layout { grid-template-columns: 1fr; } .door-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .door-catalog-finish legend { float: none; margin: 0 0 14px; } .door-catalog-color-rail { justify-content: flex-start; } .door-catalog-finish-group { grid-template-columns: 1fr; gap: 8px; } .door-tool-stage { position: static; } .door-tool-stage-frame { max-height: 70vh; } .door-tool-stage-frame img { max-height: 70vh; object-fit: contain; } .door-catalog-explorer { margin-top: 48px; } .service-fit-guide-head, .service-fit-combination { grid-template-columns: 1fr; } .service-fit-grid { grid-template-columns: 1fr; } .service-fit-card, .service-fit-card:nth-child(2n), .service-fit-card:nth-child(3n) { border-right: 0; min-height: 0; padding: 28px 0; } } @media (max-width: 440px) { .door-catalog-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .door-catalog-grid { gap: 32px 14px; } .door-catalog-media { padding: 8px; } .door-catalog-card-copy small { font-size: 0.76rem; } .door-profile-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } .door-color-options { grid-template-columns: 1fr 1fr; } .door-color-option-compact { flex-basis: calc(50% - 4px); justify-content: flex-start; } body.colorup-v2 .color-plan-dialog-panel { max-height: calc(100vh - 16px); padding: 64px 22px 28px; width: calc(100% - 16px); } .color-plan-form-grid { grid-template-columns: 1fr; } .color-plan-form-grid label:first-child { grid-column: auto; } .color-plan-form-actions { display: grid; } .color-plan-form-actions .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .door-tool *, .door-tool *::before, .door-tool *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } } /* unique to /custom-mods-catalog/ */ .mc-hero { padding: 80px 0 48px; text-align: center; } /* unique to /custom-mods-catalog/ */ .mc-hero h1 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2.75rem, 5.5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.04em; color: var(--ink-noir); margin: 0 auto 32px; max-width: 18ch; } /* unique to /custom-mods-catalog/ */ .mc-hero h1 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; letter-spacing: -0.02em; } /* unique to /custom-mods-catalog/ */ .mc-hero .lede { font-size: 1.15rem; line-height: 1.55; color: var(--charcoal); max-width: 60ch; margin: 0 auto; } /* unique to /custom-mods-catalog/ */ .mc-family { padding: 56px 0; } /* unique to /custom-mods-catalog/ */ .mc-family-head { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: end; margin-bottom: 48px; } /* unique to /custom-mods-catalog/ */ .mc-family-head .eyebrow { margin-bottom: 16px; } /* unique to /custom-mods-catalog/ */ .mc-family-head h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.875rem, 3.5vw, 2.5rem); line-height: 1.05; letter-spacing: -0.025em; color: var(--ink-noir); margin: 0; } /* unique to /custom-mods-catalog/ */ .mc-family-head h2 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; } /* unique to /custom-mods-catalog/ */ .mc-family-head p { font-size: 1rem; line-height: 1.7; color: var(--charcoal); margin: 0; max-width: 50ch; } /* unique to /custom-mods-catalog/ */ .mc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } /* unique to /custom-mods-catalog/ */ .mc-card { background: var(--cloud); display: flex; flex-direction: column; transition: background 280ms; } /* unique to /custom-mods-catalog/ */ .mc-card:hover { background: #DCD9CF; } /* unique to /custom-mods-catalog/ */ .mc-comparison { position: relative; width: 100%; aspect-ratio: 3/2; margin: 0; overflow: hidden; background: var(--alabaster); } /* unique to /custom-mods-catalog/ */ .mc-comparison::after { content: ""; position: absolute; inset: 0 auto 0 50%; width: 1px; background: rgba(246,243,236,0.7); pointer-events: none; } /* unique to /custom-mods-catalog/ */ .mc-comparison img { display: block; width: 100%; height: 100%; object-fit: cover; } /* unique to /custom-mods-catalog/ */ .mc-label { position: absolute; bottom: 12px; z-index: 1; padding: 6px 9px; background: rgba(13,13,13,0.82); color: var(--alabaster); font-family: var(--font-mono); font-size: 0.6rem; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; } /* unique to /custom-mods-catalog/ */ .mc-label-before { left: 12px; } /* unique to /custom-mods-catalog/ */ .mc-label-after { right: 12px; } /* unique to /custom-mods-catalog/ */ .mc-card .body { padding: 20px 20px 24px; flex: 1; display: flex; flex-direction: column; } /* unique to /custom-mods-catalog/ */ .mc-card .name { font-family: var(--font-sans); font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-noir); margin: 0 0 8px; } /* unique to /custom-mods-catalog/ */ .mc-card p { font-size: 0.85rem; line-height: 1.55; color: var(--charcoal); margin: 0 0 12px; } /* unique to /custom-mods-catalog/ */ .mc-card .price { margin-top: auto; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--brass-deep); padding-top: 12px; border-top: 1px solid rgba(30,30,28,0.08); } /* Keep the modifications catalog inside the WordPress content viewport. */ @media (max-width: 1024px) { .mc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mc-family-head { gap: 40px; } } @media (max-width: 600px) { .mc-family-head, .mc-grid { grid-template-columns: minmax(0, 1fr); } .mc-family-head { gap: 20px; } .mc-card { min-width: 0; } } /* unique to /estimate/ */ .est-hero { padding: 80px 0 56px; } /* unique to /estimate/ */ .est-hero h1 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2.75rem, 5.5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.04em; color: var(--ink-noir); margin: 0 0 32px; max-width: 18ch; } /* unique to /estimate/ */ .est-hero h1 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; letter-spacing: -0.02em; } /* unique to /estimate/ */ .est-hero .lede { font-size: 1.25rem; line-height: 1.55; color: var(--charcoal); max-width: 60ch; margin: 0; } /* unique to /estimate/ */ .est-flow { padding: 32px 0 80px; } /* unique to /estimate/ */ .est-flow .flow-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; } /* unique to /estimate/ */ .est-flow .step, .est-flow .est-step { padding-top: 32px; border-top: 1px solid var(--hairline); } /* unique to /estimate/ */ .est-flow .step { display: block; grid-template-columns: none; gap: 0; padding-bottom: 0; border-bottom: 0; } /* unique to /estimate/ */ .est-flow .step .num, .est-flow .est-step .num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--brass-deep); font-weight: 500; margin-bottom: 16px; display: block; } /* unique to /estimate/ */ .est-flow .step h3, .est-flow .est-step h3 { font-family: var(--font-sans); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink-noir); margin: 0 0 12px; } /* unique to /estimate/ */ .est-flow .step p, .est-flow .est-step p { font-size: 0.95rem; line-height: 1.6; color: var(--charcoal); margin: 0; } /* unique to /estimate/ */ .est-form-wrap { background: var(--cloud); padding: 88px 0; } /* unique to /estimate/ */ .est-form { max-width: 760px; margin: 0 auto; background: var(--alabaster); padding: 48px; } /* unique to /estimate/ */ .est-form h2 { font-family: var(--font-sans); font-weight: 500; font-size: 1.75rem; letter-spacing: -0.025em; color: var(--ink-noir); margin: 0 0 8px; } /* unique to /estimate/ */ .est-form .sub { font-size: 0.95rem; color: var(--charcoal); margin: 0 0 32px; } /* unique to /estimate/ */ .est-form .group { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--hairline); } /* unique to /estimate/ */ .est-form .group:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 16px; } /* unique to /estimate/ */ .est-form .group h3 { font-family: var(--font-sans); font-weight: 500; font-size: 1rem; letter-spacing: -0.01em; color: var(--ink-noir); margin: 0 0 20px; } /* unique to /estimate/ */ .est-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 18px; } /* unique to /estimate/ */ .est-form .row:last-child { margin-bottom: 0; } /* unique to /estimate/ */ .est-form .field { display: flex; flex-direction: column; } /* unique to /estimate/ */ .est-form .field.full { grid-column: 1 / -1; } /* unique to /estimate/ */ .est-form label { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lunar-rock); font-weight: 500; margin-bottom: 8px; } /* unique to /estimate/ */ .est-form input, .est-form select, .est-form textarea { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; font-family: var(--font-sans); font-size: 1rem; padding: 14px 16px; border: 1px solid rgba(30,30,28,0.18); border-radius: 2px; background: var(--alabaster); color: var(--ink-noir); } /* unique to /estimate/ */ .est-form input:focus, .est-form select:focus, .est-form textarea:focus { border-color: var(--lunar-rock); outline: none; box-shadow: 0 0 0 3px rgba(139,145,138,0.18); } /* unique to /estimate/ */ .est-form textarea { min-height: 100px; resize: vertical; } /* unique to /estimate/ */ .est-form .upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 160px; padding: 40px 32px; border: 1.5px dashed rgba(30,30,28,0.28); border-radius: 4px; background: var(--cloud, #f1ede4); cursor: pointer; transition: border-color 220ms ease, background 220ms ease, transform 220ms ease; text-align: center; } /* unique to /estimate/ */ .est-form .upload:hover { border-color: var(--ink-noir); background: rgba(241,237,228,0.65); } /* unique to /estimate/ */ .est-form .upload.dragging { border-color: var(--brass-deep, #8a6a30); border-style: solid; background: rgba(185,144,74,0.08); transform: scale(1.01); } /* unique to /estimate/ */ .est-form .upload .icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--lunar-rock); border-radius: 50%; color: var(--lunar-rock); font-size: 1.05rem; line-height: 1; margin-bottom: 4px; transition: border-color 220ms ease, color 220ms ease; } /* unique to /estimate/ */ .est-form .upload:hover .icon, .est-form .upload.dragging .icon { border-color: var(--ink-noir); color: var(--ink-noir); } /* unique to /estimate/ */ .est-form .upload .lbl { font-size: 0.98rem; color: var(--ink-noir); font-weight: 500; letter-spacing: -0.005em; margin: 0; } /* unique to /estimate/ */ .est-form .upload .meta { font-size: 0.8rem; color: var(--lunar-rock); margin: 0; letter-spacing: 0.005em; } /* unique to /estimate/ */ .est-form .upload .filenames { font-size: 0.82rem; color: var(--ink-noir); margin-top: 8px; max-width: 100%; word-break: break-word; } /* unique to /estimate/ */ .est-form .upload .filenames:empty { display: none; } /* unique to /estimate/ */ .est-form .checkbox-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; font-size: 0.95rem; color: var(--charcoal); } /* unique to /estimate/ */ .est-form .checkbox-row input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; } /* unique to /estimate/ */ .est-form .checkbox-row label { font-size: 0.95rem; letter-spacing: 0; text-transform: none; color: var(--charcoal); margin: 0; line-height: 1.5; } /* unique to /estimate/ */ .est-form .submit-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; } /* unique to /estimate/ */ .est-form .small { font-size: 0.8rem; color: var(--lunar-rock); max-width: 36ch; } /* unique to /facts/ */ .hero{padding:80px 0 32px} /* unique to /facts/ */ .hero h1{font-family:var(--font-sans);font-weight:500;font-size:clamp(2.5rem,5vw,3.75rem);line-height:1.05;letter-spacing:-.04em;color:var(--ink-noir);margin:0 0 20px;max-width:22ch} /* unique to /facts/ */ .hero h1 em{font-style:italic;font-family:var(--font-serif);color:var(--lunar-rock);font-weight:400} /* unique to /facts/ */ .hero .lede{font-size:1.1rem;line-height:1.55;color:var(--charcoal);max-width:60ch} /* unique to /facts/ */ .body{padding:32px 0 88px} /* unique to /facts/ */ .body article{font-size:1rem;line-height:1.75;color:var(--charcoal)} /* unique to /facts/ */ .body article h2{font-family:var(--font-sans);font-weight:500;font-size:1.5rem;letter-spacing:-.02em;color:var(--ink-noir);margin:48px 0 16px} /* unique to /facts/ */ .body article h3{font-family:var(--font-sans);font-weight:500;font-size:1.125rem;letter-spacing:-.01em;color:var(--ink-noir);margin:32px 0 12px} /* unique to /facts/ */ .body article p{margin:0 0 16px} /* unique to /facts/ */ .body article ul{margin:0 0 16px 24px;padding:0} /* unique to /facts/ */ .body article li{margin:0 0 8px} /* unique to /facts/ */ .body article a{color:var(--ink-noir);border-bottom:1px solid var(--hairline)} /* unique to /facts/ */ .body article a:hover{color:var(--brass-deep);border-color:var(--brass-deep)} /* unique to /facts/ */ .body article table{width:100%;border-collapse:collapse;margin:16px 0 32px} /* unique to /facts/ */ .body article th{background:transparent;color:var(--lunar-rock);font-weight:500;text-align:left;padding:12px 16px 12px 0;font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;border-bottom:1px solid var(--hairline)} /* unique to /facts/ */ .body article td{padding:14px 16px 14px 0;border-bottom:1px solid var(--hairline);color:var(--ink-noir);font-size:.95rem} /* unique to /facts/ */ .body article td:first-child{font-weight:500;width:32%} /* unique to /finishes/ */ /* ============== HERO ============== */ .fin-hero { padding: 88px 0 64px; text-align: center; } /* unique to /finishes/ */ .fin-hero h1 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2.75rem, 5.5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.04em; color: var(--ink-noir); margin: 0 auto 32px; max-width: 16ch; } /* unique to /finishes/ */ .fin-hero h1 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; letter-spacing: -0.02em; } /* unique to /finishes/ */ .fin-hero .lede { font-size: 1.15rem; line-height: 1.55; color: var(--charcoal); margin: 0 auto 0; max-width: 56ch; } /* unique to /finishes/ */ /* ============== FILTER BAR — sticky chip list ============== */ .fin-filter { position: sticky; top: 71px; z-index: 50; background: rgba(246, 243, 236, 0.92); backdrop-filter: saturate(140%) blur(10px); padding: 20px 0; border-bottom: 1px solid rgba(30,30,28,0.06); } /* unique to /finishes/ */ .fin-filter-inner { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; } /* unique to /finishes/ */ .fin-chip { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal); padding: 8px 16px; border: 1px solid rgba(30,30,28,0.18); border-radius: 2px; background: transparent; cursor: pointer; text-decoration: none; min-height: 44px; transition: all 180ms; } /* unique to /finishes/ */ .fin-chip:hover, .fin-chip.active { background: var(--ink-noir); color: var(--alabaster); border-color: var(--ink-noir); } /* unique to /finishes/ */ /* ============== FAMILY SECTION ============== */ .fin-family { padding: 96px 0 64px; } /* unique to /finishes/ */ .fin-family-head { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; margin-bottom: 56px; align-items: end; } /* unique to /finishes/ */ .fin-family-head .eyebrow { margin-bottom: 16px; } /* unique to /finishes/ */ .fin-family-head h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2rem, 3.5vw, 2.75rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink-noir); margin: 0; } /* unique to /finishes/ */ .fin-family-head p { font-size: 1rem; line-height: 1.7; color: var(--charcoal); margin: 0; max-width: 50ch; } /* unique to /finishes/ */ .fin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } /* unique to /finishes/ */ .fin-card { position: relative; overflow: hidden; aspect-ratio: 1/1.1; color: var(--alabaster); cursor: pointer; text-decoration: none; background: var(--cloud); } /* unique to /finishes/ */ .fin-card .fin-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); } /* unique to /finishes/ */ .fin-card:hover .fin-img { transform: scale(1.05); } /* unique to /finishes/ */ .fin-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,30,28,0) 45%, rgba(30,30,28,0.9) 100%); } /* unique to /finishes/ */ .fin-card .fin-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; z-index: 2; } /* unique to /finishes/ */ .fin-card .fin-cat { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(246,243,236,0.92); margin-bottom: 4px; } /* unique to /finishes/ */ .fin-card .fin-name { color: var(--alabaster); font-family: var(--font-sans); font-size: 1.125rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; } /* Keep every finish label legible over light and dark samples. The stronger page scope prevents the global link palette (including cached link states) from overriding the shared card metadata. */ body.colorup-v2 .fin-card .fin-cat, body.colorup-v2 .fin-card .fin-name, body.colorup-v2 .fin-card .fin-arrow { color: var(--alabaster) !important; text-shadow: 0 1px 3px rgba(30, 30, 28, 0.72); } /* unique to /finishes/ */ .fin-card .fin-arrow { color: var(--alabaster); width: 30px; height: 30px; border: 1px solid rgba(246,243,236,0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 280ms; font-size: 0.78rem; } /* unique to /finishes/ */ .fin-card:hover .fin-arrow { background: var(--muted-brass); border-color: var(--muted-brass); color: var(--ink-noir); } /* unique to /finishes/ */ /* ============== PROFILE BAND — door profiles strip ============== */ .profile-band { background: var(--cloud); padding: 96px 0; } /* unique to /finishes/ */ .profile-band .eyebrow { margin-bottom: 16px; text-align: center; } /* unique to /finishes/ */ .profile-band h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.875rem, 3.2vw, 2.5rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--ink-noir); margin: 0 auto 64px; max-width: 22ch; text-align: center; } /* unique to /finishes/ */ .profile-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; } /* unique to /finishes/ */ .profile-card { background: var(--alabaster); padding: 32px 16px; text-align: center; transition: background 280ms; } /* unique to /finishes/ */ .profile-card:hover { background: #FFFFFF; } /* unique to /finishes/ */ .profile-card img { width: 100%; height: 140px; object-fit: contain; margin-bottom: 24px; display: block; } /* unique to /finishes/ */ .profile-card h4 { font-family: var(--font-sans); font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-noir); margin: 0 0 6px; } /* unique to /finishes/ */ .profile-card p { font-size: 0.78rem; color: var(--lunar-rock); letter-spacing: 0.04em; margin: 0; } /* unique to /finishes/ */ /* ============== HOW WE SAMPLE ============== */ .sample { background: var(--alabaster); padding: 88px 0; } /* unique to /finishes/ */ .sample-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; } /* unique to /finishes/ */ .sample-img { aspect-ratio: 4/5; background: url('../doors/shaker-evergreen-fog.jpg') center/cover; } /* unique to /finishes/ */ .sample-text .eyebrow { margin-bottom: 24px; } /* unique to /finishes/ */ .sample-text h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.875rem, 3.5vw, 2.75rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--ink-noir); margin: 0 0 32px; max-width: 18ch; } /* unique to /finishes/ */ .sample-text h2 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; } /* unique to /finishes/ */ .sample-text p { font-size: 1.05rem; line-height: 1.7; color: var(--charcoal); margin: 0 0 20px; max-width: 50ch; } /* unique to /gallery/ */ .gal-hero { padding: 80px 0 48px; text-align: center; } /* unique to /gallery/ */ .gal-hero h1 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2.75rem, 5.5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.04em; color: var(--ink-noir); margin: 0 auto 32px; max-width: 18ch; } /* unique to /gallery/ */ .gal-hero h1 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; letter-spacing: -0.02em; } /* unique to /gallery/ */ .gal-hero .lede { font-size: 1.15rem; line-height: 1.55; color: var(--charcoal); max-width: 60ch; margin: 0 auto; } /* unique to /gallery/ */ .gal-filter { position: sticky; top: 71px; z-index: 50; background: rgba(246, 243, 236, 0.92); backdrop-filter: saturate(140%) blur(10px); padding: 20px 0; border-bottom: 1px solid rgba(30,30,28,0.06); } /* unique to /gallery/ */ .gal-filter-inner { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; } /* unique to /gallery/ */ .gal-chip { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal); padding: 8px 16px; min-height: 44px; border: 1px solid rgba(30,30,28,0.18); border-radius: 2px; background: transparent; cursor: pointer; text-decoration: none; transition: all 180ms; } /* unique to /gallery/ */ .gal-chip:hover, .gal-chip.active { background: var(--ink-noir); color: var(--alabaster); border-color: var(--ink-noir); } /* unique to /gallery/ */ .gal-grid-wrap { padding: 96px 0 88px; } /* unique to /gallery/ */ .gal-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(280px, auto); gap: 16px; } /* unique to /gallery/ */ .gal-item { position: relative; overflow: hidden; background: var(--cloud); cursor: pointer; } /* unique to /gallery/ */ .gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); } /* unique to /gallery/ */ .gal-item:hover img { transform: scale(1.04); } /* unique to /gallery/ */ .gal-item .meta { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; background: linear-gradient(180deg, rgba(30,30,28,0) 0%, rgba(30,30,28,0.85) 100%); color: var(--alabaster); z-index: 2; } /* unique to /gallery/ */ .gal-item .name { font-family: var(--font-sans); font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 4px; } /* unique to /gallery/ */ .gal-item .spec { font-size: 0.78rem; letter-spacing: 0.04em; color: rgba(246,243,236,0.85); } /* unique to /gallery/ */ .gal-item.feature { grid-column: span 8; grid-row: span 2; } /* unique to /gallery/ */ .gal-item.tall { grid-column: span 4; grid-row: span 2; } /* unique to /gallery/ */ .gal-item.wide { grid-column: span 6; } /* unique to /gallery/ */ .gal-item.std { grid-column: span 4; } /* unique to /gallery/ */ .gal-item.std-sm { grid-column: span 3; } /* unique to / */ section.tight { padding: 80px 0; } /* unique to / */ .btn-primary:hover { background: var(--charcoal); color: var(--alabaster); } /* unique to / */ .btn-brass { background: var(--muted-brass); color: var(--ink-noir); } /* unique to / */ .btn-brass:hover { background: var(--brass-deep); color: var(--alabaster); } /* unique to / */ /* ============== HERO — type-led with restrained image band (C5.2) ============== */ .hero { padding: 72px 0 0; text-align: center; background: var(--alabaster); } /* unique to / */ .hero .eyebrow { font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--lunar-rock); margin-bottom: 28px; } /* unique to / */ .hero h1 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2.5rem, 5.5vw, 4.75rem); line-height: 1; letter-spacing: -0.04em; color: var(--ink-noir); margin: 0 auto 24px; max-width: 14ch; } /* unique to / */ .hero h1 .accent { color: var(--lunar-rock); font-style: italic; font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.02em; } /* unique to / */ /* Shared brand-accent treatment for select H2s (two-pillar / services / finish library). Echoes the hero H1 brand mark without duplicating its size or weight. */ .title-accent { color: var(--lunar-rock); font-style: italic; font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.015em; } /* unique to / */ .hero .lede { font-size: 1.125rem; line-height: 1.6; color: var(--charcoal); margin: 0 auto 36px; max-width: 50ch; } /* unique to / */ .hero .actions { display: inline-flex; gap: 12px; margin-bottom: 48px; } /* unique to / */ .hero-proof { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 24px; margin: -28px auto 36px; color: var(--charcoal); font-size: 0.82rem; letter-spacing: 0.02em; } .hero-proof span::before { content: "\2713"; color: var(--brass-deep); margin-right: 8px; } /* unique to / */ /* Restrained image band — narrow, framed by a max-width container */ .hero-marquee { width: min(1280px, calc(100% - 64px)); margin: 0 auto; aspect-ratio: 24/9; max-height: 320px; overflow: hidden; } .hero-marquee-image { width: 100%; height: 100%; object-fit: cover; display: block; } /* unique to / */ .hero-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(30,30,28,0.08); margin-top: 56px; background: var(--alabaster); } /* unique to / */ .hero-meta .item { padding: 32px 24px; text-align: left; border-right: 1px solid rgba(30,30,28,0.08); } /* unique to / */ .hero-meta .item:last-child { border-right: none; } /* unique to / */ .hero-meta .num { font-family: var(--font-serif); font-size: 2.25rem; font-weight: 400; line-height: 1; color: var(--ink-noir); letter-spacing: -0.02em; } /* unique to / */ .hero-meta .lbl { font-size: 0.78rem; color: var(--lunar-rock); margin-top: 10px; letter-spacing: 0.04em; } /* unique to / */ .guides { background: var(--cloud); } .guides .section-head { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; align-items: end; margin-bottom: 40px; } .guides .section-head h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; margin: 0; } .guides .section-head .lede { margin: 0; max-width: 54ch; line-height: 1.7; } .guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .guide-card { display: flex; flex-direction: column; min-height: 220px; padding: 30px; background: var(--alabaster); color: var(--ink-noir); text-decoration: none; border-top: 2px solid var(--muted-brass); } .guide-card .meta { color: var(--lunar-rock); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; } .guide-card h3 { margin: 22px 0 12px; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.015em; } .guide-card p { margin: 0 0 24px; color: var(--charcoal); line-height: 1.6; } .guide-card .arrow-link { margin-top: auto; align-self: flex-start; } /* unique to / */ /* ============== TWO-PILLAR (Cabinet finish + Countertops) ============== */ .two-pillars { background: var(--alabaster); padding: 72px 0; } /* unique to / */ .two-pillars .section-head { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; margin-bottom: 40px; align-items: end; } /* unique to / */ .two-pillars .section-head .eyebrow { font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--lunar-rock); margin-bottom: 16px; } /* unique to / */ .two-pillars .section-head h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink-noir); margin: 0; max-width: 18ch; } /* unique to / */ .two-pillars .section-head h2 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; letter-spacing: -0.02em; } /* unique to / */ .two-pillars .section-head .lede { font-size: 1rem; line-height: 1.7; color: var(--charcoal); margin: 0; max-width: 50ch; } /* unique to / */ /* Editorial pillar-lede — slightly larger, refined max-width, tighter ink */ .two-pillars .section-head .pillar-lede { font-size: 1.25rem; line-height: 1.5; color: var(--ink-noir); max-width: 44ch; font-weight: 400; letter-spacing: -0.005em; } /* unique to / */ .pillars-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } /* unique to / */ .pillar-card { background: var(--cloud, #f1ede4); text-decoration: none; display: flex; flex-direction: column; transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms; } /* unique to / */ .pillar-card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px -20px rgba(30,30,28,0.18); } /* unique to / */ .pillar-img { aspect-ratio: 4/3; background-position: center; background-size: cover; background-repeat: no-repeat; } /* unique to / */ .pillar-info { padding: 36px 36px 40px; display: flex; flex-direction: column; gap: 14px; } /* unique to / */ .pillar-num { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--brass-deep, #8a6a30); font-weight: 500; text-transform: uppercase; } /* unique to / */ .pillar-card h3 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 1.875rem); letter-spacing: -0.025em; color: var(--ink-noir); margin: 0; line-height: 1.15; } /* unique to / */ .pillar-card h3 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; } /* unique to / */ .pillar-card p { font-size: 1rem; line-height: 1.65; color: var(--charcoal); margin: 0; max-width: 52ch; } /* unique to / */ .pillar-link { margin-top: 12px; font-size: 0.85rem; font-weight: 500; color: var(--ink-noir); letter-spacing: 0.02em; border-bottom: 1px solid var(--ink-noir); padding-bottom: 4px; align-self: flex-start; transition: gap 280ms, color 220ms; } /* unique to / */ .pillar-card:hover .pillar-link { color: var(--brass-deep, #8a6a30); border-color: var(--brass-deep, #8a6a30); } /* unique to / */ @media (max-width: 920px) { .two-pillars .section-head { grid-template-columns: 1fr; gap: 24px; } .pillars-grid { grid-template-columns: 1fr; } } /* unique to / */ /* ============== COUNTERTOP-FORWARD section ============== */ .counters-forward { background: var(--cloud, #f1ede4); padding: 72px 0; } /* unique to / */ .counters-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; } /* unique to / */ .counters-grid .img { aspect-ratio: 4/5; background-position: center; background-size: cover; background-repeat: no-repeat; } /* unique to / */ .counters-text .eyebrow { font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--lunar-rock); margin-bottom: 24px; display: block; } /* unique to / */ .counters-text h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -0.03em; color: var(--ink-noir); margin: 0 0 28px; max-width: 22ch; } /* unique to / */ .counters-text h2 em { font-style: italic; font-family: var(--font-serif); color: var(--lunar-rock); font-weight: 400; } /* unique to / */ .counters-text p { font-size: 1.075rem; line-height: 1.7; color: var(--charcoal); margin: 0 0 24px; max-width: 56ch; } /* unique to / */ .counters-text ul { list-style: none; padding: 0; margin: 0 0 28px; } /* unique to / */ .counters-text li { padding: 10px 0; border-top: 1px solid rgba(30,30,28,0.1); font-size: 0.95rem; line-height: 1.55; color: var(--charcoal); } /* unique to / */ .counters-text li:last-child { border-bottom: 1px solid rgba(30,30,28,0.1); } /* unique to / */ .counters-text .pull { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.45; color: var(--ink-noir); margin: 32px 0 8px; padding-left: 24px; border-left: 2px solid var(--muted-brass); font-style: italic; } /* unique to / */ @media (max-width: 920px) { .counters-grid { grid-template-columns: 1fr; gap: 48px; } .counters-grid .img { aspect-ratio: 16/10; } } /* unique to / */ /* ============== SERVICES ============== */ .services { background: var(--alabaster); } /* unique to / */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } /* unique to / */ @media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } /* unique to / */ @media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } } /* unique to / */ .svc-card { position: relative; overflow: hidden; aspect-ratio: 4/5; background: var(--cloud); color: var(--alabaster); cursor: pointer; text-decoration: none; display: block; } /* unique to / */ .svc-card .svc-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); } /* unique to / */ .svc-card:hover .svc-img { transform: scale(1.04); } /* unique to / */ .svc-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,30,28,0) 0%, rgba(30,30,28,0.15) 30%, rgba(30,30,28,0.65) 55%, rgba(30,30,28,0.94) 100%); } /* unique to / */ .svc-card .svc-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; z-index: 2; } /* unique to / */ .svc-card .svc-num { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; color: var(--muted-brass); font-weight: 500; margin-bottom: 14px; } /* unique to / */ .svc-card .svc-title { font-family: var(--font-sans); font-size: 1.5rem; font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 12px; } /* unique to / */ .svc-card .svc-title em { font-style: italic; font-family: var(--font-serif); color: var(--muted-brass); font-weight: 400; } /* unique to / */ .svc-card .svc-desc { font-size: 0.85rem; line-height: 1.55; color: rgba(246,243,236,0.95); margin: 0 0 16px; text-shadow: 0 1px 2px rgba(30,30,28,0.4); } /* unique to / */ .svc-card .svc-link { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--alabaster); display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(246,243,236,0.4); padding-bottom: 4px; transition: gap 280ms, border-color 280ms; } /* unique to / */ .svc-card:hover .svc-link { gap: 12px; border-color: var(--muted-brass); color: var(--muted-brass); } /* unique to / */ /* ============== PROCESS ============== */ .process { background: var(--alabaster); } /* unique to / */ .section-head { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; margin-bottom: 48px; align-items: end; } /* unique to / */ .section-head .eyebrow { font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--lunar-rock); margin-bottom: 16px; } /* unique to / */ .process-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; } /* unique to / */ .process-step { background: var(--cloud); padding: 32px 24px; display: flex; flex-direction: column; gap: 16px; transition: background 280ms; } /* unique to / */ .process-step:hover { background: #DCD9CF; } /* unique to / */ .process-step .num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--brass-deep); font-weight: 500; } /* unique to / */ .process-step img { width: 48px; height: 48px; color: var(--ink-noir); } /* unique to / */ .process-step h3 { font-size: 1rem; font-weight: 500; color: var(--ink-noir); margin: 0; letter-spacing: -0.01em; } /* unique to / */ .process-step p { font-size: 0.85rem; line-height: 1.5; color: var(--charcoal); margin: 0; } /* unique to / */ /* ============== MATERIALS — premium surface catalogue ============== */ .materials { background: var(--alabaster); padding-top: 0; } /* unique to / */ .materials-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 1fr; gap: 4px; } /* unique to / */ /* Curated homepage teaser — uniform 3-col grid (C5.3) */ .finishes-teaser { padding: 72px 0 56px; } /* unique to / */ .finishes-teaser .section-head { margin-bottom: 40px; } /* unique to / */ .finish-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; } /* unique to / */ .finish-card { position: relative; overflow: hidden; aspect-ratio: 4/5; text-decoration: none; color: var(--alabaster); cursor: pointer; } /* unique to / */ .finish-card .finish-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); } /* unique to / */ .finish-card:hover .finish-img { transform: scale(1.04); } /* unique to / */ .finish-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,30,28,0) 55%, rgba(30,30,28,0.78) 100%); } /* unique to / */ .finish-card .finish-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 28px; z-index: 2; } /* unique to / */ .finish-card .finish-cat { font-family: var(--font-sans); font-size: 1.25rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.015em; color: var(--alabaster); } /* unique to / */ .finish-card .finish-name { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(246,243,236,0.7); margin-top: 6px; } /* unique to / */ .finishes-cta { margin-top: 32px; text-align: center; } /* unique to / */ @media (max-width: 1024px) { .finish-grid { grid-template-columns: repeat(2, 1fr); } } /* unique to / */ @media (max-width: 600px) { .finish-grid { grid-template-columns: 1fr; } .finish-card { aspect-ratio: 16/10; } } /* unique to / */ .mat-card { position: relative; overflow: hidden; aspect-ratio: 1/1.1; color: var(--alabaster); cursor: pointer; text-decoration: none; } /* unique to / */ .mat-card.feature { aspect-ratio: 1/1.4; } /* unique to / */ .mat-card .mat-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); } /* unique to / */ .mat-card:hover .mat-img { transform: scale(1.05); } /* unique to / */ .mat-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,30,28,0) 50%, rgba(30,30,28,0.75) 100%); } /* unique to / */ .mat-card .mat-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; z-index: 2; } /* unique to / */ .mat-card .mat-cat { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(246,243,236,0.85); margin-bottom: 6px; } /* unique to / */ .mat-card .mat-name { font-family: var(--font-sans); font-size: 1.5rem; font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; } /* unique to / */ .mat-card .mat-arrow { width: 36px; height: 36px; border: 1px solid rgba(246,243,236,0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 280ms; font-size: 0.9rem; } /* unique to / */ .mat-card:hover .mat-arrow { background: var(--muted-brass); border-color: var(--muted-brass); color: var(--ink-noir); } /* unique to / */ /* ============== APPROACH — split image + text ============== */ .approach { background: var(--cloud); } /* unique to / */ .approach-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; } /* unique to / */ .approach-img { aspect-ratio: 4/5; background: var(--cv2-img-founder, url('../images/alexandre-g-owner-portrait.jpeg')) center/cover; } /* unique to / */ .approach-img + .approach-text .founder-cite { display: block; margin-top: 28px; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lunar-rock); font-weight: 500; } /* unique to / */ .approach-img + .approach-text .founder-cite strong { color: var(--ink-noir); letter-spacing: -0.005em; text-transform: none; font-size: 1rem; font-weight: 500; margin-right: 10px; } /* unique to / */ .approach-text .eyebrow { font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--lunar-rock); margin-bottom: 24px; } /* unique to / */ .approach-text h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.875rem, 3.5vw, 2.75rem); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 32px; } /* unique to / */ .approach-text p { font-size: 1rem; line-height: 1.7; color: var(--charcoal); margin-bottom: 16px; max-width: 48ch; } /* unique to / */ .approach-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(30,30,28,0.12); } /* unique to / */ .approach-stats .num { font-family: var(--font-serif); font-size: 2.5rem; font-weight: 400; color: var(--ink-noir); line-height: 1; letter-spacing: -0.02em; } /* unique to / */ .approach-stats .lbl { font-size: 0.85rem; color: var(--charcoal); margin-top: 10px; letter-spacing: 0.02em; } /* unique to / */ /* ============== GALLERY — uniform 3-col cards (C5.3) ============== */ .gallery { background: var(--alabaster); } /* unique to / */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* unique to / */ .gal-card { display: flex; flex-direction: column; } /* unique to / */ .gal-card .gal-img { width: 100%; aspect-ratio: 4/3; background-size: cover; background-position: center; background-repeat: no-repeat; } /* unique to / */ .gallery-caption { margin-top: 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 0 2px; } /* unique to / */ .gallery-caption .name { font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-noir); } /* unique to / */ .gallery-caption .meta { font-size: 0.75rem; color: var(--lunar-rock); letter-spacing: 0.04em; text-align: right; } /* unique to / */ @media (max-width: 1024px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } } /* unique to / */ @media (max-width: 600px) { .gallery-grid { grid-template-columns: 1fr; } } /* unique to / */ /* ============== PRESS / TESTIMONIAL ============== */ .press { background: var(--alabaster); padding: 72px 0; border-top: 1px solid rgba(30,30,28,0.08); } /* unique to / */ .press .container { max-width: 900px; text-align: center; } /* unique to / */ .press .eyebrow { font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--lunar-rock); margin-bottom: 32px; } /* unique to / */ .press blockquote { font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 400; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink-noir); margin: 0 0 32px; } /* unique to / */ .press cite { font-style: normal; font-size: 0.85rem; color: var(--lunar-rock); letter-spacing: 0.04em; } /* unique to / */ .press cite strong { color: var(--ink-noir); font-weight: 500; } /* unique to /our-process/ */ .nav-links a:hover{color:var(--ink-noir)} /* unique to /our-process/ */ .hero .lede{font-size:1.2rem;line-height:1.55;color:var(--charcoal);max-width:60ch;margin:0 auto} /* unique to /our-process/ */ .band{padding:0} /* unique to /our-process/ */ .band-img{width:100%;aspect-ratio:16/9;max-height:480px;background:var(--cv2-img-band, url('../images/studio-band.jpg')) center/cover} /* unique to /our-process/ */ .steps{background:var(--alabaster)} /* unique to /our-process/ */ .step{display:grid;grid-template-columns:120px 1fr 1fr;gap:48px;padding:56px 0;border-bottom:1px solid var(--hairline);align-items:start} /* unique to /our-process/ */ .step:last-child{border-bottom:none} /* unique to /our-process/ */ .step .num{font-family:var(--font-serif);font-size:3.5rem;color:var(--lunar-rock);line-height:1;letter-spacing:-.02em} /* unique to /our-process/ */ .step h2{font-family:var(--font-sans);font-weight:500;font-size:1.75rem;letter-spacing:-.025em;color:var(--ink-noir);margin:0 0 16px;line-height:1.1} /* unique to /our-process/ */ .step h2 em{font-style:italic;font-family:var(--font-serif);color:var(--lunar-rock);font-weight:400} /* unique to /our-process/ */ .step p{font-size:1rem;line-height:1.7;color:var(--charcoal);margin:0 0 14px;max-width:55ch} /* unique to /our-process/ */ .step .meta{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;color:var(--brass-deep);margin-top:24px;text-transform:uppercase} /* unique to /partners/ */ .nav-links a:hover,.nav-links a[aria-current=page]{color:var(--ink-noir)} /* unique to /partners/ */ .nav-links a[aria-current=page]{border-bottom:1px solid var(--ink-noir);padding-bottom:4px} /* unique to /partners/ */ .p-hero{padding:80px 0 56px;text-align:center} /* unique to /partners/ */ .p-hero h1{font-family:var(--font-sans);font-weight:500;font-size:clamp(2.5rem,5vw,4rem);line-height:1.05;letter-spacing:-.04em;color:var(--ink-noir);margin:0 auto 32px;max-width:18ch} /* unique to /partners/ */ .p-hero h1 em{font-style:italic;font-family:var(--font-serif);color:var(--lunar-rock);font-weight:400;letter-spacing:-.02em} /* unique to /partners/ */ .p-hero .lede{font-size:1.2rem;line-height:1.55;color:var(--charcoal);max-width:60ch;margin:0 auto} /* unique to /partners/ */ .p-categories{background:var(--alabaster)} /* unique to /partners/ */ .cat{padding:64px 0 32px;border-top:1px solid var(--hairline)} /* unique to /partners/ */ .cat:first-child{border-top:none;padding-top:32px} /* unique to /partners/ */ .cat h2{font-family:var(--font-sans);font-weight:500;font-size:clamp(1.5rem,2.8vw,2rem);letter-spacing:-.025em;color:var(--ink-noir);margin:0 0 32px} /* unique to /partners/ */ .cat h2 em{font-style:italic;font-family:var(--font-serif);color:var(--lunar-rock);font-weight:400} /* unique to /partners/ */ .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} /* unique to /partners/ */ .pcard{background:var(--cloud);padding:24px;text-decoration:none;color:var(--ink-noir);transition:background 280ms;display:block} /* unique to /partners/ */ .pcard:hover{background:#DCD9CF} /* unique to /partners/ */ .pcard h3{font-family:var(--font-sans);font-weight:500;font-size:1rem;letter-spacing:-.01em;color:var(--ink-noir);margin:0 0 8px} /* unique to /partners/ */ .pcard p{font-size:.8rem;line-height:1.55;color:var(--charcoal);margin:0} /* ════════════════════════════════════════════════════════════════════════ Batch 4.1 follow-up — fix rendered visual issues on staging Added 2026-05-12. - /our-process/ pp-* premium layout (was unstyled — inline