/* ============================================================================ Wildwater Custom Cabinetry — "Heirloom" warm-editorial theme Light Editorial track: warm bone background, espresso ink, antique-brass accent, Fraunces display serif w/ italic emphasis words. Layers on top of styles.css (base kit). Brand tokens set inline in each page AFTER styles.css so they win the cascade; this file does the bespoke design work. ============================================================================ */ /* ---- Display type: Fraunces serif headings, Inter body ------------------- */ h1, h2, h3, h4, .x-hero h1, .x-banner h1, .x-head h2, .x-bigcta h2, .x-stat .num, .x-svc h3, .x-feat h4, .x-step h4, .ww-craft h2, .ww-review-q { font-family: 'Fraunces', Georgia, serif; font-weight: 500; letter-spacing: -0.01em; } h1, .x-hero h1, .x-head h2, .x-bigcta h2, .ww-craft h2 { font-weight: 600; line-height: 1.08; } body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; } /* Italic, brass-accented emphasis word inside headings (the editorial move) */ .x-hero h1 em, .x-head h2 em, .x-bigcta h2 em, .ww-craft h2 em { font-style: italic; font-weight: 500; color: var(--brand-primary); } /* Softer luxe radius */ :root { --radius: 10px; } /* ---- Eyebrow: refined letter-spaced label w/ a short brass rule ---------- */ .x-eyebrow { background: transparent; color: var(--brand-primary); text-transform: uppercase; letter-spacing: .22em; font-size: .76rem; font-weight: 600; font-family: var(--font-body); padding: 0; border: 0; } .x-head .k { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .22em; font-size: .76rem; font-weight: 600; color: var(--brand-primary); } .x-head .k::before { content: ''; display: inline-block; width: 28px; height: 1.5px; background: var(--brand-primary); vertical-align: middle; margin: -3px 12px 0 0; } .x-head.center .k::before { display: none; } /* ============================================================================ HEADER — light bone bar, espresso text, hairline brass underline. The black badge logo reads cleanly on the warm background. ============================================================================ */ .site-header { background: rgba(251,248,242,.88); backdrop-filter: none; border-bottom: 1px solid var(--brand-border); height: 74px; } .nav-logo img { height: 52px; } .nav-links > li > a:not(.nav-cta) { color: var(--brand-text); font-weight: 500; letter-spacing: .01em; font-size: .96rem; } .nav-links a:hover { color: var(--brand-primary); } .nav-parent { color: var(--brand-text); font-weight: 500; } .nav-toggle { color: var(--brand-text); } .nav-cta { background: var(--brand-secondary); color: #F7F2E8; border-radius: 6px; letter-spacing: .02em; font-weight: 600; font-family: var(--font-body); } .nav-cta:hover { background: var(--brand-primary); color: #fff; } @media (min-width: 861px) { .nav-dropdown { background: #fff; border: 1px solid var(--brand-border); box-shadow: 0 18px 44px rgba(43,32,24,.16); } .nav-dropdown a { color: var(--brand-text); font-weight: 500; } .nav-dropdown a:hover { background: var(--brand-bg-alt); color: var(--brand-primary); } .nav-dropdown-all a { color: var(--brand-primary); } /* animated underline */ .nav-links > li > a:not(.nav-cta) { position: relative; } .nav-links > li > a:not(.nav-cta)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: var(--brand-primary); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; } .nav-links > li > a:not(.nav-cta):hover::after { transform: scaleX(1); } } @media (max-width: 860px) { .nav-links { background: var(--brand-bg); border-top: 1px solid var(--brand-border); } .nav-links a { color: var(--brand-text); border-bottom-color: var(--brand-border); } } /* ============================================================================ HERO — full-bleed showpiece image, warm scrim, serif headline. Editorial. ============================================================================ */ .x-hero { min-height: 90vh; } .x-hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.5rem); } .x-hero .x-sub { font-size: 1.18rem; max-width: 620px; color: rgba(247,242,232,.92); } .x-hero .x-hero-scrim { background: linear-gradient(180deg, rgba(28,21,15,.46) 0%, rgba(28,21,15,.30) 38%, rgba(28,21,15,.82) 100%); } .x-hero .x-eyebrow { color: #E7C893; } /* thin brass baseline accent */ .x-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 3; background: linear-gradient(90deg, var(--brand-primary), #C9A24B); } /* Hero trust chips: warm glass */ .x-chip { background: rgba(247,242,232,.12); border: 1px solid rgba(247,242,232,.28); color: #F7F2E8; } /* ============================================================================ STAT STRIP — quiet, framed numbers on cream ============================================================================ */ .x-stats { background: var(--brand-bg-alt); } .x-stats .container { padding-top: 48px; padding-bottom: 48px; } .x-stat .num { color: var(--brand-primary); font-weight: 600; } .x-stat .lbl { text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; color: var(--brand-text-muted); } /* ============================================================================ SERVICES — tall editorial tiles, image top, brass arrow ============================================================================ */ .x-svc { border-radius: var(--radius); border: 1px solid var(--brand-border); background: #fff; overflow: hidden; } .x-svc img { aspect-ratio: 4/3; } .x-svc h3 { font-weight: 500; } .x-svc .x-arrow { color: var(--brand-primary); font-weight: 600; letter-spacing: .01em; } .x-svc::before { content: ''; position: absolute; left: 0; bottom: 0; z-index: 3; width: 100%; height: 3px; background: var(--brand-primary); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.4,.1,.2,1); } .x-svc:hover::before { transform: scaleX(1); } .x-svc img { transition: transform .55s ease; } .x-svc:hover img { transform: scale(1.045); } .x-svc .x-arrow span { display: inline-block; transition: transform .25s ease; } .x-svc:hover .x-arrow span { transform: translateX(6px); } /* ============================================================================ SIGNATURE SECTION — "The Wildwater Standard" warm split band. Espresso panel + showpiece image, with a craft-spec list. ============================================================================ */ .ww-craft { background: var(--brand-secondary); color: #F2E9DA; overflow: hidden; } .ww-craft .container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding-top: var(--space-12); padding-bottom: var(--space-12); } .ww-craft .x-head .k { color: #E7C893; } .ww-craft h2 { color: #FBF8F2; } .ww-craft .lead { color: rgba(242,233,218,.82); font-size: 1.14rem; margin: 18px 0 26px; line-height: 1.7; } .ww-craft-specs { list-style: none; margin: 0; padding: 0; } .ww-craft-specs li { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: 1px solid rgba(231,200,147,.18); } .ww-craft-specs .k { font-weight: 500; color: #F2E9DA; } .ww-craft-specs .v { color: #E7C893; font-weight: 600; font-size: .95rem; text-align: right; letter-spacing: .01em; } .ww-craft-media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.4); aspect-ratio: 4/5; } .ww-craft-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ww-craft-media::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--brand-primary), #C9A24B); } @media (max-width: 860px) { .ww-craft .container { grid-template-columns: 1fr; gap: 36px; } .ww-craft-media { aspect-ratio: 16/11; } } /* ============================================================================ WHY / FEATURES — brass hairline icon plates ============================================================================ */ .x-feat .ic { border-radius: var(--radius); color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--brand-primary) 24%, transparent); transition: transform .2s ease, background .2s ease; } .x-feat:hover .ic { transform: translateY(-3px); background: color-mix(in srgb, var(--brand-primary) 16%, transparent); } .x-feat h4 { font-weight: 500; } /* Process steps */ .x-step .n { color: var(--brand-primary); font-family: 'Fraunces', serif; font-weight: 600; } .x-step h4 { font-weight: 500; } /* ============================================================================ GALLERY — masonry-ish editorial grid ============================================================================ */ .ww-gallery { columns: 3; column-gap: 18px; } .ww-gallery figure { break-inside: avoid; margin: 0 0 18px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); position: relative; } .ww-gallery img { width: 100%; display: block; transition: transform .55s ease; } .ww-gallery figure:hover img { transform: scale(1.05); } @media (max-width: 860px) { .ww-gallery { columns: 2; } } @media (max-width: 540px) { .ww-gallery { columns: 1; } } /* ============================================================================ REVIEWS — serif pull-quotes on cream cards ============================================================================ */ .ww-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 22px; } .ww-review { background: #fff; border: 1px solid var(--brand-border); border-radius: var(--radius); padding: 30px 28px; position: relative; } .ww-review .stars { color: var(--brand-primary); letter-spacing: 2px; font-size: .95rem; margin-bottom: 12px; } .ww-review-q { font-family: 'Fraunces', serif; font-size: 1.12rem; line-height: 1.6; color: var(--brand-text); font-weight: 400; } .ww-review .who { margin-top: 16px; font-weight: 600; font-size: .92rem; color: var(--brand-text); } .ww-review .who span { display: block; color: var(--brand-text-muted); font-weight: 400; font-size: .84rem; } /* ============================================================================ CARDS (service-area grid) — brass top-sweep on hover ============================================================================ */ .card { position: relative; overflow: hidden; background: #fff; transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; } .card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--brand-primary); transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.4,.1,.2,1); } .card:hover { border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--brand-border)); transform: translateY(-3px); } .card:hover::before { transform: scaleX(1); } .card h3 { transition: color .2s ease; font-weight: 500; } .card:hover h3 { color: var(--brand-primary); } /* ============================================================================ BUTTONS — solid brass / espresso ghost, refined lift ============================================================================ */ .x-btn { border-radius: 7px; font-family: var(--font-body); font-weight: 600; letter-spacing: .01em; transition: transform .15s ease, box-shadow .25s ease, background .25s ease, color .2s ease; } .x-btn svg { transition: transform .25s ease; } .x-btn:hover svg { transform: translateX(4px); } .x-btn-primary { background: var(--brand-primary); color: #fff; border: none; box-shadow: 0 10px 26px rgba(154,120,65,.30); } .x-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(154,120,65,.42); color: #fff; } .x-btn-ghost { border: 1px solid rgba(247,242,232,.5); color: #F7F2E8; } .x-btn-ghost:hover { transform: translateY(-3px); background: rgba(247,242,232,.12); border-color: #F7F2E8; } .x-btn-white { background: #FBF8F2; color: var(--brand-secondary); box-shadow: 0 10px 26px rgba(0,0,0,.18); } .x-btn-white:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.26); } /* ============================================================================ FAQ — serif summaries, brass marker ============================================================================ */ .x-faq summary { font-family: 'Fraunces', serif; font-size: 1.14rem; font-weight: 500; } .x-faq details[open] summary { color: var(--brand-primary); } /* ============================================================================ BIG CTA — espresso band w/ brass top rule ============================================================================ */ .x-bigcta { background: var(--brand-secondary); position: relative; } .x-bigcta h2 { color: #FBF8F2; } .x-bigcta p { color: rgba(242,233,218,.82); } .x-bigcta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--brand-primary), #C9A24B); } /* ============================================================================ FOOTER — deep espresso, cream knockout logo ============================================================================ */ .site-footer { background: var(--brand-secondary); } .site-footer .foot-logo img { height: 64px; width: auto; display: block; margin-bottom: 14px; } .site-footer h4 { color: #E7C893; font-family: var(--font-body); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; } /* ============================================================================ IN-BODY framed photo (service / area pages) ============================================================================ */ .ww-photo { position: relative; max-width: 1000px; margin: 0 auto; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-2); } .ww-photo img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; transition: transform .5s ease; } .ww-photo:hover img { transform: scale(1.04); } .ww-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 16px; color: #fff; font-size: .92rem; font-weight: 500; background: linear-gradient(to top, rgba(28,21,15,.82), transparent); } /* On-page quote form panel */ .ww-quote-panel { max-width: 720px; margin: 0 auto; } .ww-quote-panel iframe { width: 100%; border: 0; display: block; min-height: 560px; } /* ============================================================================ AREA / SERVICE-AREA MAP HERO — split hero with a live Google map ============================================================================ */ .ww-area-hero { background: var(--brand-bg-alt); border-bottom: 1px solid var(--brand-border); padding: 116px 0 64px; } .ww-area-hero .container { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; } .ww-area-hero .x-eyebrow { color: var(--brand-primary); } .ww-area-hero h1 { font-size: clamp(2.3rem, 4.2vw, 3.5rem); margin: .28em 0 .35em; } .ww-area-hero .x-sub { font-size: 1.16rem; color: var(--brand-text-muted); max-width: 560px; margin-bottom: 26px; } .ww-map { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-2); border: 1px solid var(--brand-border); aspect-ratio: 4/3; background: var(--brand-bg); } .ww-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.92); } .ww-map::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--brand-primary), #C9A24B); z-index: 1; pointer-events: none; } @media (max-width: 860px) { .ww-area-hero { padding: 96px 0 44px; } .ww-area-hero .container { grid-template-columns: 1fr; gap: 28px; } .ww-area-hero .map-col { order: 2; } .ww-map { aspect-ratio: 16/11; } } /* ============================================================================ ENTRANCE MOTION — staggered fade-up on hero ============================================================================ */ @keyframes wwRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .x-hero .container > *, .x-banner .container > * { animation: wwRise .7s cubic-bezier(.2,.7,.2,1) both; } .x-hero .container > *:nth-child(1) { animation-delay: .02s; } .x-hero .container > *:nth-child(2) { animation-delay: .10s; } .x-hero .container > *:nth-child(3) { animation-delay: .18s; } .x-hero .container > *:nth-child(4) { animation-delay: .26s; } .x-hero .container > *:nth-child(5) { animation-delay: .34s; } @media (prefers-reduced-motion: reduce) { .x-hero .container > *, .x-banner .container > * { animation: none; } .x-btn, .card, .x-svc img, .ww-gallery img, .ww-photo img { transition: none; } } @media (max-width: 860px) { .x-hero h1 { font-size: clamp(2.2rem, 8vw, 3rem); } }