/* ========================================================================= CROSS CONSTRUCTION — production website styles Responsive port of the selected UI-kit components. Consumes cc-* tokens from /colors_and_type.css. Dark-first; .cc-theme-light on flips it. Square corners + hairlines throughout, per brand. ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--cc-bg); color: var(--cc-text); font-family: var(--cc-font-body); -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; display: block; } /* accent ink for small text — see kit note: raw slate-blue fails AA on the light page bg for small labels, so darken it there. */ :root, .cc-theme-dark { --cc-accent-ink: var(--cc-slate-blue); } .cc-theme-light { --cc-accent-ink: #4F6A78; } /* heading typeface: sans (Plus Jakarta Sans) for section headings */ :root { --cc-heading-font: var(--cc-font-display); --cc-heading-weight: 500; --cc-heading-tracking: -0.015em; } /* ----- Layout primitives ------------------------------------------------ */ .wrap { max-width: 1280px; margin: 0 auto; padding-inline: 36px; } .section { padding: 112px 0; } .section--tight { padding: 80px 0; } .section--card { background: var(--cc-bg-card); } .cc-theme-light .section--card { background: var(--cc-cool-100); } .section--deep { background: var(--cc-bg-deep); } .eyebrow { font-family: var(--cc-font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-text-muted); margin: 0 0 22px; } .eyebrow--link { color: var(--cc-accent-ink); border: none; display: inline-block; } .eyebrow--link:hover { color: var(--cc-text); } .sec-head { max-width: 760px; margin: 0 0 64px; } .sec-head .eyebrow { margin-bottom: 18px; } /* H2 section heading — single font, single color */ .h2 { font-family: var(--cc-heading-font); font-weight: var(--cc-heading-weight); font-size: clamp(34px, 5vw, 64px); line-height: 1.04; letter-spacing: var(--cc-heading-tracking); color: var(--cc-text); margin: 0; text-wrap: balance; } .h3 { font-family: var(--cc-font-display); font-weight: 600; font-size: clamp(24px, 3vw, 32px); line-height: 1.1; letter-spacing: -0.015em; color: var(--cc-text); margin: 0; } /* THE ACCENT MOVE — two-line H1: line 1 sans/ink, line 2 serif-italic/blue */ .h1-accent { font-family: var(--cc-font-display); font-weight: 600; font-size: clamp(40px, 6.4vw, 92px); line-height: 0.98; letter-spacing: -0.02em; color: var(--cc-text); margin: 0; text-wrap: balance; } .h1-accent em, .h1-accent .acc { font-family: var(--cc-font-accent); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--cc-accent); } .lede { font-family: var(--cc-font-accent); font-weight: 400; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.45; color: var(--cc-text); margin: 0; } .prose { font-family: var(--cc-font-body); font-size: 17px; line-height: 1.7; color: var(--cc-text-muted); margin: 0; } .prose--ink { color: var(--cc-text); } .prose + .prose { margin-top: 22px; } a.inline-link { color: var(--cc-accent-ink); border-bottom: 1px solid currentColor; font-family: var(--cc-font-body); } a.inline-link:hover { color: var(--cc-text); } /* arrow link (ui) */ .arrow-link { font-family: var(--cc-font-ui); font-weight: 600; font-size: 14px; letter-spacing: 0.01em; color: var(--cc-accent-ink); text-decoration: none; border: none; display: inline-flex; align-items: center; gap: 8px; } .arrow-link:hover { color: var(--cc-text); } .arrow-link svg { display: block; } /* ----- Buttons (shipping set) ------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--cc-font-ui); font-weight: 600; font-size: 15px; padding: 14px 28px; border: 1px solid transparent; border-radius: 0; cursor: pointer; text-decoration: none; letter-spacing: 0; line-height: 1; transition: opacity 0.2s ease; } .btn svg { display: block; } .btn--sm { padding: 10px 18px; font-size: 14px; } .btn--lg { padding: 17px 34px; font-size: 16px; } .btn--primary { background-color: var(--cc-button-bg); color: var(--cc-button-text); } .btn--primary:hover { background-color: var(--cc-button-bg-hover); color: var(--cc-button-text-hover); } .btn--primary:active { opacity: 0.85; } .btn--outline { background: transparent; color: var(--cc-text); border-color: var(--cc-hairline); } .btn--outline:hover { color: var(--cc-accent); border-color: var(--cc-accent); } .btn--ghost { background: transparent; color: var(--cc-text); padding-inline: 4px; } .btn--ghost:hover { color: var(--cc-slate-blue); } .btn--block { width: 100%; padding: 16px 24px; } /* click-to-call button */ .callbtn { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; font-family: var(--cc-font-display); font-weight: 500; letter-spacing: -0.01em; font-size: 15px; color: var(--cc-text); text-decoration: none; border: 1px solid var(--cc-hairline); border-radius: 0; padding: 11px 18px 11px 15px; } .callbtn svg { color: var(--cc-slate-blue); flex: none; } .callbtn:hover { color: var(--cc-slate-blue); border-color: var(--cc-slate-blue); } .callbtn--lg { font-size: 30px; gap: 14px; padding: 16px 24px 16px 20px; } /* ----- Navigation ------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 18px 36px; background: var(--cc-bg); border-bottom: 1px solid var(--cc-hairline); } .nav__left { display: flex; align-items: center; gap: 44px; } .nav__logo { height: 48px; width: auto; } .nav__logo--onlight { display: none; } .cc-theme-light .nav__logo--ondark { display: none; } .cc-theme-light .nav__logo--onlight { display: block; } .nav__links { display: flex; gap: 26px; } .nav__links a { font-family: var(--cc-font-ui); font-weight: 500; font-size: 14px; color: var(--cc-text); text-decoration: none; white-space: nowrap; padding-bottom: 3px; border-bottom: 1px solid transparent; } .nav__links a:hover { color: var(--cc-accent-ink); } .nav__links a.is-active { color: var(--cc-accent-ink); border-bottom-color: var(--cc-accent-ink); } .nav__right { display: flex; align-items: center; gap: 16px; } .nav__phone { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font-family: var(--cc-font-ui); font-weight: 500; font-size: 14px; color: var(--cc-text); text-decoration: none; border: 1px solid var(--cc-hairline); border-radius: 0; padding: 9px 16px 9px 14px; } .nav__phone svg { color: var(--cc-slate-blue); flex: none; } .nav__phone:hover { color: var(--cc-slate-blue); border-color: var(--cc-slate-blue); } .nav__theme { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; background: transparent; color: var(--cc-text); border: 1px solid var(--cc-hairline); border-radius: 0; cursor: pointer; transition: opacity 0.2s ease; } .nav__theme:hover { color: var(--cc-slate-blue); border-color: var(--cc-slate-blue); } .nav__theme .ico-moon { display: none; } .cc-theme-light .nav__theme .ico-sun { display: none; } .cc-theme-light .nav__theme .ico-moon { display: block; } .nav__burger { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--cc-hairline); background: transparent; border-radius: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; } .nav__burger span { display: block; width: 20px; height: 1.5px; background: var(--cc-text); transition: transform 0.25s ease, opacity 0.2s ease; } /* mobile drawer */ .drawer { position: fixed; inset: 0; z-index: 60; background: var(--cc-bg); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); visibility: hidden; } .drawer.is-open { transform: translateX(0); visibility: visible; } .drawer__bar { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--cc-hairline); flex: none; } .drawer__close { width: 44px; height: 44px; border: 1px solid var(--cc-hairline); background: transparent; color: var(--cc-text); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 0; } .drawer__links { display: flex; flex-direction: column; padding: 8px 22px; } .drawer__links a { font-family: var(--cc-font-ui); font-weight: 500; font-size: 22px; color: var(--cc-text); text-decoration: none; padding: 18px 0; border-bottom: 1px solid var(--cc-hairline); display: flex; align-items: center; justify-content: space-between; } .drawer__links a.is-active { color: var(--cc-accent-ink); } .drawer__foot { margin-top: auto; padding: 22px; display: flex; flex-direction: column; gap: 12px; } .drawer__foot .callbtn { width: 100%; justify-content: flex-start; } /* ----- Generic photo hero (Project One, etc.) --------------------------- */ .hero { position: relative; overflow: hidden; background: var(--cc-bg); padding: 120px 0 128px; } .hero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; } .hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(95deg, rgba(20,28,40,0.95) 0%, rgba(20,28,40,0.82) 38%, rgba(20,28,40,0.40) 70%, rgba(20,28,40,0.12) 100%), linear-gradient(180deg, rgba(20,28,40,0.15), rgba(20,28,40,0.5)); } .hero__inner { position: relative; z-index: 2; } .hero .hero__eye { color: rgba(245,245,245,0.78); } .hero .h1-accent { color: #F5F5F5; max-width: 18ch; } .hero .h1-accent em, .hero .h1-accent .acc { color: var(--cc-slate-blue); } .hero__lede { color: #F5F5F5; max-width: 46ch; margin: 32px 0 0; } .hero__ctas { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 40px; } .hero__ctas .btn--outline { color: #F5F5F5; border-color: rgba(245,245,245,0.5); } .hero__ctas .btn--outline:hover { color: var(--cc-cool-300); border-color: var(--cc-cool-300); } .hero__ctas .btn--ghost { color: #F5F5F5; } .hero__eye { font-family: var(--cc-font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 30px; } a.hero__eye { display: inline-block; border: none; text-decoration: none; } a.hero__eye:hover { color: #fff; } /* brand frame graphic on the hero */ .hero__frame { position: absolute; inset: 48px 36px 48px auto; width: 38%; pointer-events: none; z-index: 1; } .hero__frame::before { content: ""; position: absolute; right: 54px; top: 24px; bottom: 54px; width: 1px; background: rgba(245,245,245,0.35); } .hero__frame::after { content: ""; position: absolute; right: 54px; bottom: 54px; left: 30%; height: 1px; background: rgba(245,245,245,0.35); } .hero__mono { position: absolute; right: 22px; bottom: 16px; height: 32px; opacity: 0.5; } /* home hero = slideshow: stacked cross-fading bg layers */ .hero--slideshow .hero__slides { position: absolute; inset: 0; z-index: 0; } .hero--slideshow .hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.9s ease; } .hero--slideshow .hero__slide.is-active { opacity: 1; } .hero__dots { position: absolute; z-index: 3; left: 36px; bottom: 36px; display: flex; gap: 8px; } .hero__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(245,245,245,0.4); border: none; padding: 0; cursor: pointer; } .hero__dot.is-on { background: #F5F5F5; } /* welcome hero — centered over darkened photo + meta strip */ .hero--center .hero__scrim { background: linear-gradient(180deg, rgba(15,20,22,0.55), rgba(15,20,22,0.80)); } .hero--center { padding: 132px 0 0; } .hero--center .hero__inner { text-align: center; display: flex; flex-direction: column; align-items: center; } .hero--center .h1-accent { max-width: 20ch; } .hero--center .hero__lede { margin-left: auto; margin-right: auto; } .hero--center .hero__ctas { justify-content: center; } .hero__meta { position: relative; z-index: 2; margin-top: 96px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(245,245,245,0.18); } .hero__metacell { padding: 24px 40px; text-align: center; border-right: 1px solid rgba(245,245,245,0.14); } .hero__metacell:last-child { border-right: none; } .hero__mk { font-family: var(--cc-font-display); font-weight: 600; font-size: 30px; color: #F5F5F5; letter-spacing: -0.01em; } .hero__ml { font-family: var(--cc-font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,245,245,0.72); margin-top: 4px; } /* ----- Page header (About / Portfolio / Blog) --------------------------- */ .pagehead { padding: 92px 0 0; } .pagehead__inner { max-width: 1280px; } .pagehead .h1-accent { margin-bottom: 24px; } .pagehead .lede { color: var(--cc-text-muted); max-width: 54ch; } /* ----- Stakes / centered statement -------------------------------------- */ .statement { max-width: 900px; } .statement .h2 { margin-bottom: 28px; } /* ----- Process steps (hairline columns) --------------------------------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .steps--3 { grid-template-columns: repeat(3, 1fr); } .step { border-top: 1px solid var(--cc-hairline); padding-top: 22px; display: flex; flex-direction: column; gap: 14px; } .step__n { font-family: var(--cc-font-ui); font-weight: 500; font-size: 13px; letter-spacing: 0.14em; color: var(--cc-accent-ink); } .step__title { font-family: var(--cc-font-display); font-weight: 600; font-size: 24px; line-height: 1.1; letter-spacing: -0.015em; color: var(--cc-text); margin: 0; } .step__body { font-family: var(--cc-font-body); font-size: 15px; line-height: 1.6; color: var(--cc-text-muted); margin: 0; } /* ----- Principles / value columns --------------------------------------- */ .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .col__title { font-family: var(--cc-font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; color: var(--cc-text); margin: 0 0 12px; } .col__body { font-family: var(--cc-font-body); font-size: 15px; line-height: 1.6; color: var(--cc-text-muted); margin: 0; } .col--ruled { border-top: 1px solid var(--cc-hairline); padding-top: 22px; } /* ----- Project overlay cards (featured + portfolio) --------------------- */ .pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .pgrid--4 { grid-template-columns: repeat(4, 1fr); } .pcard { position: relative; aspect-ratio: 3/2; background-size: cover; background-position: center; background-color: var(--cc-bg-card); text-decoration: none; border: none; overflow: hidden; display: block; } .pcard__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,20,22,0) 24%, rgba(15,20,22,0.42) 56%, rgba(15,20,22,0.92) 100%); } .pcard__pills { position: absolute; left: 16px; top: 16px; z-index: 2; display: flex; gap: 6px; } .pcard__pill { font-family: var(--cc-font-ui); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 10px; background: rgba(15,22,32,0.78); color: #fff; backdrop-filter: blur(6px); } .pcard__meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .pcard__name { font-family: var(--cc-font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; color: #F5F5F5; margin: 0; white-space: nowrap; text-shadow: 0 1px 16px rgba(0,0,0,0.65); } .pcard__loc { font-family: var(--cc-font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,245,245,0.8); margin-top: 6px; text-shadow: 0 1px 10px rgba(0,0,0,0.6); } .pcard__arrow { color: #F5F5F5; flex: none; transition: transform 0.2s ease; } .pcard:hover .pcard__arrow { transform: translateX(4px); } .pcard--tall { aspect-ratio: 4/5; } .section-foot { margin-top: 48px; } /* ----- Testimonials ----------------------------------------------------- */ .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; } .section--card .quotes { --cc-hairline: var(--cc-cool-300); } .cc-theme-light .section--card .quotes { --cc-hairline: var(--cc-cool-300); } .qcard { padding-top: 24px; border-top: 1px solid var(--cc-hairline); display: flex; flex-direction: column; gap: 22px; margin: 0; } .section--card .qcard { --cc-text-muted: var(--cc-cool-300); --cc-text-faint: var(--cc-cool-300); } .cc-theme-light .section--card .qcard { --cc-text-muted: var(--cc-cool-700); --cc-text-faint: var(--cc-cool-700); } .qcard__text { font-family: var(--cc-font-accent); font-weight: 400; font-size: 20px; line-height: 1.42; color: var(--cc-text); margin: 0; } .qcard__by { font-family: var(--cc-font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-text-faint); } /* mobile testimonial carousel (hidden on desktop) */ .tcarousel { display: none; } /* ----- Image + text split (flush 50/50) --------------------------------- */ .split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } .split--reverse .split__media { order: 2; } .split--reverse .split__body { order: 1; } .split__media { background-size: cover; background-position: center; min-height: 460px; background-color: var(--cc-bg-card); } .split__body { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 80px 72px; } .split__title { font-family: var(--cc-heading-font); font-weight: var(--cc-heading-weight); font-size: clamp(28px, 3.2vw, 40px); line-height: 1.04; letter-spacing: -0.01em; color: var(--cc-text); margin: 0; text-wrap: balance; } .split__copy { font-family: var(--cc-font-body); font-size: 16px; line-height: 1.65; color: var(--cc-text-muted); margin: 0; max-width: 46ch; } /* ----- Project detail page ---------------------------------------------- */ .proj__hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; } .proj__panel { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 72px; } .proj__photo { background-size: cover; background-position: center; cursor: zoom-in; background-color: var(--cc-bg-card); } .proj__title { font-family: var(--cc-font-display); font-weight: 600; font-size: clamp(44px, 5vw, 64px); line-height: 0.98; letter-spacing: -0.02em; color: var(--cc-text); margin: 0; } .proj__lede { font-family: var(--cc-font-accent); font-style: italic; font-size: 22px; line-height: 1.35; color: var(--cc-text); margin: 0; max-width: 32ch; } .proj__rail { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; padding: 64px 72px; border-top: 1px solid var(--cc-hairline); } .proj__body { font-family: var(--cc-font-body); font-size: 16px; line-height: 1.7; color: var(--cc-text-muted); margin: 0; } .proj__highlights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .proj__highlights li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; font-family: var(--cc-font-body); font-size: 15px; line-height: 1.5; color: var(--cc-text); } .proj__highlights li::before { content: ""; width: 8px; height: 8px; margin-top: 6px; background: var(--cc-accent); } .proj__metarow { display: flex; gap: 56px; flex-wrap: wrap; } .meta-k { font-family: var(--cc-font-ui); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-text-faint); margin-bottom: 6px; } .meta-v { font-family: var(--cc-font-display); font-weight: 500; font-size: 17px; color: var(--cc-text); letter-spacing: -0.01em; } .proj__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .proj__gallery > button { border: none; padding: 0; cursor: zoom-in; aspect-ratio: 1/1; background-size: cover; background-position: center; background-color: var(--cc-bg-card); } .proj__gallery > button.span2 { grid-column: span 2; aspect-ratio: 2/1; } /* ----- Video embed (cinematic) ------------------------------------------ */ .video__frame { position: relative; aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: var(--cc-bg-card); overflow: hidden; } .video__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,20,22,0.10), rgba(15,20,22,0.45)); } .video__chip { position: absolute; left: 18px; bottom: 18px; z-index: 3; font-family: var(--cc-font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #F5F5F5; background: rgba(15,22,32,0.7); padding: 7px 12px; backdrop-filter: blur(6px); display: inline-flex; gap: 8px; align-items: center; } .video__trigger { position: absolute; inset: 0; z-index: 4; padding: 0; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; } .video__play { width: 84px; height: 84px; border: 1px solid rgba(245,245,245,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(15,20,22,0.32); backdrop-filter: blur(4px); } .video__play svg { margin-left: 5px; } .video__trigger:hover .video__play { background: rgba(15,20,22,0.5); } .video__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 5; } .video__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-top: 22px; } .video__title { font-family: var(--cc-font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; color: var(--cc-text); margin: 0; } .video__desc { font-family: var(--cc-font-body); font-size: 15px; line-height: 1.6; color: var(--cc-text-muted); margin: 0; max-width: 36ch; text-align: right; } .video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .video-grid .video__title { font-size: 18px; margin-top: 16px; } .video-grid .video__cap { display: block; margin-top: 0; } /* ----- Team roster ------------------------------------------------------ */ .roster { display: flex; flex-direction: column; } .roster__row { display: grid; grid-template-columns: 140px 1fr; gap: 32px; align-items: center; padding: 32px 0; border-top: 1px solid var(--cc-hairline); } .roster__row:last-child { border-bottom: 1px solid var(--cc-hairline); } .roster__photo { aspect-ratio: 1/1; } .roster__head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; } .roster__name { font-family: var(--cc-font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; color: var(--cc-text); margin: 0; } .roster__role { font-family: var(--cc-font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-accent-ink); } .roster__bio { font-family: var(--cc-font-body); font-size: 15px; line-height: 1.6; color: var(--cc-text-muted); margin: 0; max-width: 70ch; } /* ----- Contact ---------------------------------------------------------- */ .contact { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .contact__lede { font-family: var(--cc-font-accent); font-size: 22px; line-height: 1.4; color: var(--cc-text); margin: 28px 0 40px; max-width: 26ch; } .contact__phone { padding-top: 24px; border-top: 1px solid var(--cc-hairline); } .contact__after { margin-top: 36px; } .contact__after h3 { font-family: var(--cc-font-display); font-weight: 600; font-size: 18px; color: var(--cc-text); margin: 0 0 16px; letter-spacing: -0.01em; } .contact__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: step; } .contact__steps li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; font-family: var(--cc-font-body); font-size: 15px; line-height: 1.5; color: var(--cc-text-muted); } .contact__steps li::before { counter-increment: step; content: counter(step,decimal-leading-zero); font-family: var(--cc-font-ui); font-size: 12px; font-weight: 500; color: var(--cc-accent-ink); letter-spacing: 0.1em; } .contact__form-wrap { border: 1px solid var(--cc-hairline); } .jobtread-embed { background-color: var(--cc-bg-card); background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgba(109,146,165,0.10) 11px 12px); min-height: 620px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 48px; } .jobtread-embed__tag { font-family: var(--cc-font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--cc-text-faint); } .jobtread-embed__note { font-family: var(--cc-font-body); font-size: 14px; color: var(--cc-text-muted); max-width: 34ch; } .consent { font-family: var(--cc-font-ui); font-size: 12px; line-height: 1.55; color: var(--cc-text-faint); margin: 16px 0 0; } /* ----- Closing CTA band ------------------------------------------------- */ .closing { text-align: center; } .closing__display { font-family: var(--cc-font-display); font-weight: 600; font-size: clamp(34px, 5vw, 68px); line-height: 1.0; letter-spacing: -0.02em; color: var(--cc-text); margin: 0 auto; max-width: 18ch; } .closing__display .acc { font-family: var(--cc-font-accent); font-style: italic; font-weight: 400; color: var(--cc-accent); letter-spacing: 0; } .closing__sub { font-family: var(--cc-font-accent); font-size: 20px; line-height: 1.45; color: var(--cc-text-muted); margin: 24px auto 0; max-width: 44ch; } .closing__ctas { display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 40px; } /* ----- Membership badge / cert logos ------------------------------------ */ .badge { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 116px; height: 116px; border-radius: 50%; border: 1px solid var(--cc-hairline-strong); color: var(--cc-text-muted); text-align: center; padding: 14px; } .badge__sm { font-family: var(--cc-font-ui); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3; } .badge__lg { font-family: var(--cc-font-display); font-weight: 700; font-size: 28px; letter-spacing: -0.02em; color: var(--cc-text); } .badge--compact { width: 78px; height: 78px; padding: 10px; } .badge--compact .badge__sm { font-size: 8px; } .badge--compact .badge__lg { font-size: 18px; } .footer__badge .footer__legal { line-height: 1.5; } .certstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .cert { border: 1px solid var(--cc-hairline); padding: 28px 20px; min-height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; } .cert__name { font-family: var(--cc-font-display); font-weight: 600; font-size: 15px; color: var(--cc-text); letter-spacing: -0.01em; } .cert__sub { font-family: var(--cc-font-ui); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cc-text-faint); } /* ----- Content slideshow (Project One) ---------------------------------- */ .slideshow { position: relative; aspect-ratio: 16/9; overflow: hidden; background-color: var(--cc-bg-card); } .slideshow__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.6s ease; } .slideshow__slide.is-active { opacity: 1; } .slideshow__slide.ph { background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(109,146,165,0.10) 14px 15px); display: flex; align-items: center; justify-content: center; } .slideshow__slide.ph span { font-family: var(--cc-font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--cc-text-faint); } .slideshow__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 52px; height: 52px; border: 1px solid rgba(245,245,245,0.45); background: rgba(15,20,22,0.4); color: #F5F5F5; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 0; backdrop-filter: blur(4px); } .slideshow__nav:hover { border-color: var(--cc-slate-blue); color: var(--cc-slate-blue); } .slideshow__prev { left: 18px; } .slideshow__next { right: 18px; } .slideshow__dots { position: absolute; z-index: 3; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; } .slideshow__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(245,245,245,0.4); border: none; padding: 0; cursor: pointer; } .slideshow__dot.is-on { background: #F5F5F5; } .slideshow__count { position: absolute; z-index: 3; bottom: 16px; right: 18px; font-family: var(--cc-font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; color: rgba(245,245,245,0.85); font-variant-numeric: tabular-nums; background: rgba(15,20,22,0.5); padding: 5px 9px; backdrop-filter: blur(4px); } /* ----- Spec grid (Project One key features) ----------------------------- */ .specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 56px; max-width: 1000px; } .spec { border-top: 1px solid var(--cc-hairline); padding-top: 18px; } .spec__v { font-family: var(--cc-font-body); font-size: 16px; line-height: 1.55; color: var(--cc-text-muted); margin-top: 6px; } @media (max-width: 760px) { .specs { grid-template-columns: 1fr; gap: 22px; } } /* ----- Striped image placeholder ---------------------------------------- */ .ph { background-color: var(--cc-bg-card); background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgba(109,146,165,0.10) 11px 12px); display: flex; align-items: flex-end; justify-content: flex-start; position: relative; } .ph__tag { font-family: var(--cc-font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--cc-text-faint); padding: 10px 12px; } .pcard.ph .pcard__scrim { background: linear-gradient(180deg, rgba(15,20,22,0.15) 0%, rgba(15,20,22,0.35) 45%, rgba(15,20,22,0.82) 100%); } .pcard.ph .ph__tag { position: absolute; top: 14px; left: 14px; z-index: 2; } /* ----- Blog grid -------------------------------------------------------- */ .bloggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 36px; } .bcard { text-decoration: none; border: none; display: block; } .bcard__thumb { aspect-ratio: 3/2; background-size: cover; background-position: center; background-color: var(--cc-bg-card); } .bcard__cat { font-family: var(--cc-font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-accent-ink); margin: 20px 0 10px; } .bcard__title { font-family: var(--cc-font-display); font-weight: 600; font-size: 22px; line-height: 1.16; letter-spacing: -0.01em; color: var(--cc-text); margin: 0 0 10px; } .bcard__dek { font-family: var(--cc-font-body); font-size: 15px; line-height: 1.55; color: var(--cc-text-muted); margin: 0 0 14px; } .bcard__more { font-family: var(--cc-font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--cc-accent-ink); } .bcard:hover .bcard__title { color: var(--cc-accent-ink); } /* ----- Article ---------------------------------------------------------- */ .article { max-width: 760px; margin: 0 auto; } .article__cat { font-family: var(--cc-font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-accent-ink); margin: 0 0 18px; } .article__title { font-family: var(--cc-font-display); font-weight: 600; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -0.02em; color: var(--cc-text); margin: 0 0 28px; text-wrap: balance; } .article__featured { width: 100%; aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: var(--cc-bg-card); margin-bottom: 48px; } .article__body { font-family: var(--cc-font-body); font-size: 18px; line-height: 1.75; color: var(--cc-text); } .article__body p { margin: 0 0 24px; } .article__body h2 { font-family: var(--cc-font-display); font-weight: 600; font-size: 28px; letter-spacing: -0.015em; color: var(--cc-text); margin: 44px 0 16px; line-height: 1.15; } .article__body blockquote { margin: 36px 0; padding-left: 26px; border-left: 2px solid var(--cc-accent); font-family: var(--cc-font-accent); font-style: italic; font-size: 22px; line-height: 1.4; color: var(--cc-text); } /* ----- Footer (permanent dark anchor in BOTH themes) -------------------- */ /* Scope the footer to the dark palette: redeclare the semantic tokens it (and its descendants) read, so a light page still grounds on a near-black band. */ .footer { --cc-bg: var(--cc-slate-black); --cc-bg-deep: var(--cc-near-black); --cc-bg-card: var(--cc-slate); --cc-text: var(--cc-off-white); --cc-accent: var(--cc-slate-blue); --cc-accent-ink: var(--cc-slate-blue); --cc-link: var(--cc-slate-blue); --cc-button-bg: var(--cc-off-white); --cc-button-text: var(--cc-slate-black); --cc-button-bg-hover: var(--cc-slate-blue); --cc-button-text-hover: var(--cc-off-white); background: var(--cc-bg-deep); color: var(--cc-text); padding: 64px 0 30px; --cc-text-muted: var(--cc-cool-500); --cc-text-faint: var(--cc-cool-500); --cc-hairline: var(--cc-cool-700); } .footer__top { display: grid; grid-template-columns: 1.7fr 1fr 1.2fr 1fr; gap: 48px; align-items: start; padding-bottom: 40px; } .footer__brand img { height: 84px; width: auto; } .footer__brand p { font-family: var(--cc-font-body); font-size: 14px; color: var(--cc-text-faint); margin: 22px 0 0; max-width: 30ch; } .footer__col { display: flex; flex-direction: column; gap: 12px; } .footer__eye { font-family: var(--cc-font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-text-faint); margin-bottom: 4px; } .footer__col a { font-family: var(--cc-font-ui); font-size: 14px; color: var(--cc-text); text-decoration: none; border: none; } .footer__col a:hover { color: var(--cc-slate-blue); } .footer .btn--primary { color: var(--cc-button-text); border-bottom: none; } .footer .btn--primary:hover { color: var(--cc-button-text-hover); } .footer__phone { font-family: var(--cc-font-display); font-weight: 500; font-size: 22px; color: var(--cc-text); letter-spacing: -0.01em; text-decoration: none; border: none; display: inline-flex; align-items: center; gap: 10px; } .footer__phone svg { color: var(--cc-slate-blue); } .footer__prompt { font-family: var(--cc-font-body); font-size: 14px; color: var(--cc-text-faint); } .footer__social { display: flex; gap: 16px; margin-top: 6px; } .footer__social a { display: inline-flex; color: var(--cc-text-muted); border: none; } .footer__social a:hover { color: var(--cc-slate-blue); } .footer__cta { margin-top: 4px; } .footer__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--cc-hairline); } .footer__legal { font-family: var(--cc-font-ui); font-size: 12px; color: var(--cc-text-faint); letter-spacing: 0.04em; } .footer__badge { display: flex; align-items: center; gap: 16px; } /* ----- Lightbox --------------------------------------------------------- */ .lb { position: fixed; inset: 0; z-index: 200; background: rgba(15,20,22,0.94); display: none; align-items: center; justify-content: center; padding: 64px 90px; } .lb.is-open { display: flex; } .lb__img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 24px 80px rgba(0,0,0,0.5); } .lb__x { position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; border: none; background: transparent; color: rgba(245,245,245,0.85); font-size: 30px; line-height: 1; cursor: pointer; } .lb__x:hover { color: #fff; } .lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: 1px solid rgba(245,245,245,0.35); background: rgba(15,20,22,0.4); color: #F5F5F5; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .lb__nav:hover { border-color: var(--cc-slate-blue); color: var(--cc-slate-blue); } .lb__prev { left: 28px; } .lb__next { right: 28px; } .lb__count { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); font-family: var(--cc-font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,245,245,0.8); font-variant-numeric: tabular-nums; } /* skip link */ .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--cc-bg); color: var(--cc-text); padding: 12px 18px; } .skip:focus { left: 12px; top: 12px; } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 1080px) { .footer__top { grid-template-columns: 1fr 1fr; gap: 40px; } .footer__brand { grid-column: 1 / -1; } .video-grid { grid-template-columns: 1fr; gap: 32px; } .video-grid .video__cap { display: flex; } } @media (max-width: 1040px) { .nav__links, .nav__phone, .nav__cta { display: none; } .nav__burger { display: flex; } .steps { grid-template-columns: repeat(2, 1fr); gap: 32px; } .certstrip { grid-template-columns: repeat(2, 1fr); } .pgrid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .wrap { padding-inline: 22px; } .section { padding: 72px 0; } .section--tight { padding: 56px 0; } .sec-head { margin-bottom: 40px; } .hero { padding: 84px 0 96px; } .hero__frame { display: none; } .hero__dots { left: 22px; bottom: 22px; } .hero--center { padding: 92px 0 0; } .hero__meta { margin-top: 56px; } .hero__metacell { padding: 18px 12px; } .hero__mk { font-size: 22px; } .steps, .steps--3 { grid-template-columns: 1fr; gap: 20px; } .cols { grid-template-columns: 1fr; gap: 28px; } .pgrid, .pgrid--4 { grid-template-columns: 1fr; } /* testimonials → carousel */ .quotes { display: none; } .tcarousel { display: flex; flex-direction: column; gap: 28px; user-select: none; } .tcarousel__stage { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; min-height: 210px; justify-content: center; } .tcarousel__mark { font-family: var(--cc-font-accent); font-size: 72px; line-height: 0.5; color: var(--cc-accent); height: 30px; } .tcarousel__text { font-family: var(--cc-font-accent); font-size: 24px; line-height: 1.32; color: var(--cc-text); margin: 0; } .tcarousel__by { font-family: var(--cc-font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-text-muted); } .tcarousel__nav { display: flex; align-items: center; justify-content: center; gap: 22px; } .tcarousel__arrow { width: 40px; height: 40px; border: 1px solid var(--cc-hairline); background: transparent; color: var(--cc-text); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .tcarousel__dots { display: flex; gap: 8px; } .tcarousel__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cc-cool-500); opacity: 0.45; cursor: pointer; border: none; padding: 0; } .tcarousel__dot.is-on { background: var(--cc-accent); opacity: 1; } .split { grid-template-columns: 1fr; } .split--reverse .split__media, .split--reverse .split__body { order: 0; } .split__media { min-height: 260px; order: 0; } .split__body { padding: 40px 22px; order: 1; } .proj__hero { grid-template-columns: 1fr; min-height: 0; } .proj__panel { padding: 36px 22px; } .proj__photo { min-height: 280px; } .proj__rail { grid-template-columns: 1fr; gap: 32px; padding: 40px 22px; } .proj__gallery { grid-template-columns: 1fr 1fr; } .proj__gallery > button.span2 { grid-column: span 2; aspect-ratio: 2/1; } .video__cap { flex-direction: column; align-items: flex-start; gap: 10px; } .video__desc { text-align: left; max-width: none; } .roster__row { grid-template-columns: 84px 1fr; gap: 18px; padding: 22px 0; } .contact { grid-template-columns: 1fr; gap: 44px; } .contact__form-wrap { order: -1; } .bloggrid { grid-template-columns: 1fr; gap: 32px; } .certstrip { grid-template-columns: 1fr 1fr; } .footer__top { grid-template-columns: 1fr; gap: 30px; } .footer__bar { flex-direction: column; align-items: flex-start; } /* collapse inline two-column grids on mobile (inline styles override the .cols media query, so target them directly) */ main [style*="grid-template-columns:1fr 1fr"], main [style*="grid-template-columns: 1fr 1fr"], main [style*="grid-template-columns:repeat(2,1fr)"], main [style*="grid-template-columns: repeat(2, 1fr)"] { grid-template-columns: 1fr !important; gap: 24px !important; } .lb { padding: 40px 16px; } .lb__prev { left: 8px; } .lb__next { right: 8px; } } /* ===== Contact form: JobTread web form, brand-matched (inputs.html spec, theme-adaptive) ===== */ .jtwf { width: 100%; } .jtwf__card { display: flex; flex-direction: column; gap: 18px; } .jtwf__row { display: flex; gap: 18px; } .jtwf__row > .jtwf__field { flex: 1; min-width: 0; } .jtwf__field { display: block; } .jtwf__label { font-family: var(--cc-font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cc-text-muted); margin-bottom: 8px; } .jtwf__req { color: var(--cc-slate-blue); margin-left: 4px; } .jtwf input, .jtwf textarea { width: 100%; box-sizing: border-box; display: block; font-family: var(--cc-font-ui); font-size: 15px; line-height: 1.3; color: var(--cc-text); background: transparent; border: 1px solid var(--cc-hairline); border-radius: 0; padding: 13px 14px; -webkit-appearance: none; appearance: none; outline: none; transition: border-color 0.2s ease; } .jtwf input::placeholder, .jtwf textarea::placeholder { color: var(--cc-text-faint); } .jtwf input:focus, .jtwf textarea:focus { border-color: var(--cc-slate-blue); } .jtwf input:hover:not(:focus), .jtwf textarea:hover:not(:focus) { border-color: var(--cc-text-muted); } .jtwf__actions { margin-top: 8px; } .jtwf__actions .btn { cursor: pointer; } @media (max-width: 560px) { .jtwf__row { flex-direction: column; gap: 18px; } } /* Defensive: if the JobTread script re-injects its own markup, keep it on-brand */ .jtwf .max-w-sm, .jtwf .mx-auto { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .jtwf .bg-white { background: transparent !important; } .jtwf .shadow-sm, .jtwf .shadow-xs, .jtwf .shadow-line-bottom { box-shadow: none !important; } .jtwf .rounded-sm { border-radius: 0 !important; } .jtwf .text-red-500 { color: var(--cc-slate-blue) !important; } .jtwf .text-gray-500 { color: var(--cc-text-muted) !important; } .jtwf img { display: none !important; } /* ===== Review-round additions (2026-06-05): Project One certs/awards/charts, About imagery, lightbox fade ===== */ /* Certification logo wall (always on white cards so logos read in both themes) */ .certwall { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: stretch; } .certwall__item { background: #FFFFFF; border: 1px solid var(--cc-hairline); display: flex; align-items: center; justify-content: center; padding: 22px 18px; min-height: 118px; } .certwall__item img { max-height: 70px; width: auto; max-width: 100%; object-fit: contain; display: block; } @media (max-width: 1040px) { .certwall { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .certwall { grid-template-columns: repeat(2, 1fr); } } /* Awards bullet list */ .awardlist { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 44px; } .awardlist li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; font-family: var(--cc-font-body); font-size: 16px; line-height: 1.5; color: var(--cc-text); } .awardlist li::before { content: ""; width: 8px; height: 8px; margin-top: 7px; background: var(--cc-accent); flex: none; } @media (max-width: 760px) { .awardlist { grid-template-columns: 1fr; gap: 12px; } } /* 5-medallion awards image (transparent PNG → webp) */ .awards-medallions { display: block; width: 100%; max-width: 1040px; height: auto; margin: 12px auto 0; } /* Figure for performance chart / certificate */ .p1figure { margin: 0; max-width: 1040px; } .p1figure img { display: block; width: 100%; height: auto; border: 1px solid var(--cc-hairline); background: #FFFFFF; } .p1figure figcaption { font-family: var(--cc-font-ui); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cc-text-faint); margin-top: 14px; } /* Passive-house system diagram grid (the "charts") */ .sysgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .syscard { display: flex; flex-direction: column; gap: 12px; } .syscard img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #FFFFFF; border: 1px solid var(--cc-hairline); padding: 10px; display: block; } .syscard__k { font-family: var(--cc-font-ui); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cc-text-faint); } @media (max-width: 1040px) { .sysgrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .sysgrid { grid-template-columns: 1fr 1fr; } } /* Full-bleed imagery band (About) */ .imgband { width: 100%; aspect-ratio: 16/6; min-height: 240px; background-size: cover; background-position: center; background-color: var(--cc-bg-card); } @media (max-width: 760px) { .imgband { aspect-ratio: 4/3; min-height: 0; } } /* Lightbox quick crossfade */ .lb__img { transition: opacity 0.28s ease; }