/* ========================================================= Healing Solutions — Works / Product detail pages Loaded in addition to style.css. Each page sets its own accent via inline style on : style="--accent:#xxxxxx" ========================================================= */ :root { --accent: var(--green); --accent-dark: var(--green-dark); } body { --accent: var(--green); --accent-dark: var(--green-dark); } /* ---------- Product hero ---------- */ .wd-hero { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 84px) 0 clamp(48px, 6vw, 84px); border-bottom: 1px solid var(--line); } .wd-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 95% at 86% -10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 58%), radial-gradient(90% 70% at 6% 110%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--paper)), var(--paper)); } .wd-hero > .container { position: relative; z-index: 1; } .wd-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 26px; } .wd-breadcrumb a { color: var(--muted); } .wd-breadcrumb a:hover { color: var(--accent-dark); } .wd-breadcrumb span { opacity: .45; } .wd-cat { display: inline-flex; align-items: center; gap: 8px; font-family: var(--head); font-weight: 700; font-size: 12.5px; letter-spacing: .04em; color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 12%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 26%, #fff); padding: 7px 15px; border-radius: 999px; margin-bottom: 22px; } .wd-hero h1 { font-size: clamp(34px, 5.4vw, 62px); line-height: 1.16; letter-spacing: .01em; margin: 0 0 18px; } .wd-hero h1 small { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .3em; letter-spacing: .14em; color: var(--accent-dark); margin-top: 14px; text-transform: uppercase; } .wd-tagline { font-size: clamp(16px, 1.7vw, 21px); color: #3a4b40; line-height: 1.85; max-width: 640px; margin: 0 0 32px; } .wd-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; } /* accent button variants */ .btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-sm); } .btn--accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; transform: translateY(-2px); } .btn--light { background: #fff; color: var(--accent-dark); border-color: #fff; } .btn--light:hover { background: var(--paper); transform: translateY(-2px); } /* ---------- Overview ---------- */ .wd-overview__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; } .wd-lead { font-size: clamp(15.5px, 1.25vw, 17px); line-height: 2.05; color: #3c4d42; } .wd-lead p { margin: 0 0 18px; } .wd-lead p:last-child { margin-bottom: 0; } .wd-lead strong { color: var(--accent-dark); font-weight: 700; } .wd-infocard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); position: sticky; top: 100px; } .wd-infocard h3 { font-size: 14px; font-family: var(--serif); font-style: italic; letter-spacing: .08em; color: var(--accent); margin-bottom: 18px; text-transform: uppercase; } .wd-infocard dl { display: grid; gap: 0; margin-bottom: 22px; } .wd-infocard dt { font-family: var(--head); font-weight: 700; font-size: 12px; color: var(--muted); margin-bottom: 4px; letter-spacing: .02em; } .wd-infocard dd { font-size: 14px; color: var(--ink); padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); line-height: 1.7; } .wd-infocard dl > div:last-child dd { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .wd-infocard .btn { width: 100%; } /* ---------- Features ---------- */ .wd-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .wd-feature { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; transition: transform .4s var(--ease), box-shadow .4s, border-color .4s; position: relative; overflow: hidden; } .wd-feature::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .wd-feature:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; } .wd-feature:hover::after { transform: scaleX(1); } .wd-feature__no { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--accent); display: block; margin-bottom: 12px; } .wd-feature h3 { font-size: 18px; line-height: 1.4; margin: 0 0 10px; } .wd-feature p { font-size: 13.5px; color: #46574c; line-height: 1.85; margin: 0; } /* ---------- Use cases ---------- */ .wd-cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 920px; margin: 0 auto; } .wd-cases li { display: flex; gap: 14px; align-items: flex-start; background: var(--mint-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; font-size: 14.5px; color: #33483a; line-height: 1.7; } .wd-cases li::before { content: "✓"; flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; margin-top: 1px; } /* ---------- CTA band ---------- */ .wd-cta-wrap { padding-bottom: clamp(72px, 10vw, 130px); } .wd-cta { background: linear-gradient(135deg, var(--accent-dark), var(--accent)); color: #fff; border-radius: var(--radius-l); padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 56px); text-align: center; box-shadow: var(--shadow); position: relative; overflow: hidden; } .wd-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 90% -20%, rgba(255,255,255,.18), transparent 55%); } .wd-cta > * { position: relative; z-index: 1; } .wd-cta h2 { color: #fff; font-size: clamp(24px, 3vw, 38px); line-height: 1.3; margin: 0 0 14px; } .wd-cta p { color: rgba(255,255,255,.88); margin: 0 auto 28px; max-width: 560px; } .wd-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .wd-cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); } .wd-cta .btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; } /* ---------- Back link ---------- */ .wd-back { text-align: center; margin-top: clamp(36px, 5vw, 56px); } .wd-back a { font-family: var(--head); font-weight: 700; font-size: 15px; color: var(--accent-dark); display: inline-flex; align-items: center; gap: 8px; } .wd-back a:hover { gap: 12px; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .wd-overview__grid { grid-template-columns: 1fr; } .wd-infocard { position: static; } .wd-features { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .wd-features { grid-template-columns: 1fr; } .wd-cases { grid-template-columns: 1fr; } } /* ---------- Key visual (main image) ---------- */ .wd-visual { position: relative; z-index: 2; } .wd-visual .container { margin-top: clamp(-72px, -5vw, -40px); } .wd-keyvisual { margin: 0; border-radius: var(--radius-l); overflow: hidden; border: 6px solid #fff; box-shadow: var(--shadow-lg); background: var(--mint-2); position: relative; } .wd-keyvisual::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(12,36,23,.07); } .wd-keyvisual img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; } @media (max-width: 700px) { .wd-visual .container { margin-top: -28px; } .wd-keyvisual { border-width: 4px; } .wd-keyvisual img { aspect-ratio: 3 / 2; } }