.product-story {
--lsa-ink: #2c2c2c;
--lsa-paper: #fafaf7;
--lsa-surface: #f5f0eb;
--lsa-line: #e8e4df;
--lsa-brand: #8c7355;
--lsa-brand-hover: #7a6349;
--lsa-accent: #b5894e;
--lsa-success: #3a8c55;
--lsa-danger: #c75a3a;
--lsa-radius-card: 16px;
--lsa-radius-button: 12px;
--story-cool: #e4eae8;
--story-cool-strong: #35524d;
--story-ink-soft: #66635f;
--story-shadow: 0 24px 64px rgba(44, 44, 44, .12);
color: var(--lsa-ink);
background: var(--lsa-paper);
overflow-x: clip;
}
.product-story *,
.product-story *::before,
.product-story *::after {
box-sizing: border-box;
}
.product-story a,
.product-story button,
.product-story summary {
-webkit-tap-highlight-color: transparent;
}
.product-story a:focus-visible,
.product-story button:focus-visible,
.product-story summary:focus-visible {
outline: 3px solid var(--lsa-accent);
outline-offset: 4px;
}
.story-shell {
width: min(1240px, calc(100% - 48px));
margin-inline: auto;
}
.story-hero {
min-height: 680px;
display: flex;
align-items: center;
padding: 76px 0 54px;
background: var(--lsa-paper);
}
.story-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
gap: clamp(48px, 7vw, 104px);
align-items: center;
}
.story-breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-bottom: 44px;
color: #77736e;
font-size: 13px;
}
.story-breadcrumb a {
color: inherit;
text-decoration: none;
}
.story-breadcrumb a:hover {
color: var(--lsa-brand);
}
.story-eyebrow {
margin: 0 0 14px;
color: var(--lsa-brand);
font-size: 12px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0;
text-transform: uppercase;
}
.story-hero h1 {
max-width: 700px;
margin: 0;
color: var(--lsa-ink);
font-size: 54px;
font-weight: 700;
line-height: 1.12;
letter-spacing: 0;
}
.story-hero__type {
margin: 18px 0 0;
color: var(--story-cool-strong);
font-size: 17px;
font-weight: 650;
}
.story-hero__summary {
max-width: 640px;
margin: 18px 0 0;
color: var(--story-ink-soft);
font-size: 18px;
line-height: 1.8;
}
.story-quick-specs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin: 32px 0 0;
padding: 22px 0;
border-block: 1px solid var(--lsa-line);
}
.story-quick-specs div {
min-width: 0;
padding: 0 18px;
border-left: 1px solid var(--lsa-line);
}
.story-quick-specs div:first-child {
padding-left: 0;
border-left: 0;
}
.story-quick-specs dt {
margin-bottom: 7px;
color: #7a7671;
font-size: 12px;
}
.story-quick-specs dd {
margin: 0;
color: var(--lsa-ink);
font-size: 17px;
font-weight: 700;
line-height: 1.35;
}
.story-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-top: 30px;
}
.story-button {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 12px 20px;
border: 1px solid var(--lsa-ink);
border-radius: var(--lsa-radius-button);
font-size: 14px;
font-weight: 700;
line-height: 1.2;
text-align: center;
text-decoration: none;
transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.story-button:hover {
transform: translateY(-2px);
}
.story-button--primary {
color: #fff;
border-color: var(--lsa-ink);
background: var(--lsa-ink);
}
.story-button--primary:hover {
border-color: var(--lsa-brand-hover);
background: var(--lsa-brand-hover);
}
.story-button--secondary {
color: var(--lsa-ink);
border-color: #cfcac4;
background: transparent;
}
.story-button--secondary:hover {
border-color: var(--lsa-brand);
color: var(--lsa-brand-hover);
background: #fff;
}
.story-text-link {
display: inline-flex;
min-height: 44px;
align-items: center;
gap: 7px;
padding: 8px 6px;
color: var(--lsa-brand-hover);
font-size: 14px;
font-weight: 700;
text-decoration: none;
}
.story-text-link span {
transition: transform .2s ease;
}
.story-text-link:hover span {
transform: translateX(4px);
}
.story-hero__media {
min-width: 0;
margin: 0;
}
.story-image-button {
position: relative;
display: block;
width: 100%;
min-height: 520px;
padding: 0;
overflow: hidden;
border: 0;
border-radius: var(--lsa-radius-card);
color: inherit;
background: var(--story-cool);
box-shadow: var(--story-shadow);
cursor: zoom-in;
}
.story-image-button img {
width: 100%;
height: 100%;
min-height: 520px;
object-fit: cover;
transition: transform .24s ease;
}
.product-story[data-product-story="winton-8th"] .story-image-button img {
padding: 0;
object-fit: cover;
object-position: center top;
background: #f2eee7;
}
.story-image-button:hover img {
transform: scale(1.02);
}
.story-image-button__mark {
position: absolute;
right: 18px;
bottom: 18px;
display: grid;
width: 42px;
height: 42px;
place-items: center;
border-radius: 50%;
color: #fff;
background: rgba(44, 44, 44, .84);
font-size: 24px;
}
.story-hero__media figcaption {
margin-top: 12px;
color: #77736e;
font-size: 12px;
text-align: right;
}
.story-nav {
position: sticky;
z-index: 40;
top: var(--header-height, 80px);
border-block: 1px solid var(--lsa-line);
background: rgba(250, 250, 247, .96);
box-shadow: 0 8px 24px rgba(44, 44, 44, .04);
backdrop-filter: blur(12px);
}
.admin-bar .story-nav {
top: calc(var(--header-height, 80px) + 32px);
}
.story-nav__scroll {
display: flex;
gap: 34px;
align-items: center;
min-height: 58px;
overflow-x: auto;
scrollbar-width: none;
}
.story-nav__scroll::-webkit-scrollbar {
display: none;
}
.story-nav a {
flex: 0 0 auto;
padding: 20px 0 17px;
border-bottom: 3px solid transparent;
color: #68645f;
font-size: 13px;
font-weight: 650;
text-decoration: none;
white-space: nowrap;
}
.story-nav a:hover,
.story-nav a[aria-current="true"] {
border-bottom-color: var(--lsa-accent);
color: var(--lsa-ink);
}
.story-section {
padding: 104px 0;
scroll-margin-top: 150px;
}
.story-heading {
max-width: 700px;
margin-bottom: 48px;
}
.story-heading--split {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(320px, .62fr);
gap: 64px;
max-width: none;
align-items: end;
}
.story-heading h2,
.story-installation h2,
.story-catalog h2,
.story-consultation h2 {
margin: 0;
color: var(--lsa-ink);
font-size: 38px;
line-height: 1.25;
letter-spacing: 0;
}
.story-heading > p:last-child,
.story-heading--split > p,
.story-catalog__copy > p,
.story-consultation__inner > p {
margin: 15px 0 0;
color: var(--story-ink-soft);
font-size: 16px;
line-height: 1.8;
}
.story-heading--split > p {
margin: 0;
}
.story-decision {
background: var(--lsa-surface);
}
.story-decision__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.story-decision__item {
min-height: 300px;
padding: 30px;
border: 1px solid var(--lsa-line);
border-radius: var(--lsa-radius-card);
background: #fff;
}
.story-decision__item::before {
content: "";
display: block;
width: 36px;
height: 5px;
margin-bottom: 34px;
border-radius: 5px;
background: var(--story-cool-strong);
}
.story-decision__item--fit::before {
background: var(--lsa-success);
}
.story-decision__item--limit::before {
background: var(--lsa-danger);
}
.story-decision__item--check::before {
background: var(--lsa-accent);
}
.story-decision__item h3 {
margin: 0 0 20px;
font-size: 20px;
}
.story-decision__item ul {
display: grid;
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.story-decision__item li {
position: relative;
padding-left: 18px;
color: #5f5b56;
font-size: 14px;
line-height: 1.7;
}
.story-decision__item li::before {
content: "";
position: absolute;
top: .72em;
left: 0;
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
}
.story-reasons__list {
border-top: 1px solid var(--lsa-line);
}
.story-reasons__list article {
display: grid;
grid-template-columns: 90px 1fr;
gap: 28px;
padding: 32px 0;
border-bottom: 1px solid var(--lsa-line);
}
.story-reasons__list article > span {
color: var(--lsa-accent);
font-size: 13px;
font-weight: 700;
}
.story-reasons__list h3 {
margin: 0 0 8px;
font-size: 22px;
}
.story-reasons__list p {
max-width: 780px;
margin: 0;
color: var(--story-ink-soft);
line-height: 1.75;
}
.story-installation {
color: #f8f8f4;
background: #26302f;
}
.story-installation__grid {
display: grid;
grid-template-columns: minmax(360px, .9fr) minmax(0, 1fr);
gap: clamp(54px, 8vw, 110px);
align-items: center;
}
.story-installation__visual {
min-width: 0;
}
.story-installation__label {
margin-bottom: 18px;
color: #c7d3cf;
font-size: 13px;
font-weight: 700;
}
.story-product-demo {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .17);
border-radius: var(--lsa-radius-card);
background: #edf0ec;
}
.story-demo-grid {
position: absolute;
inset: 0;
opacity: .48;
background-image:
linear-gradient(#9ca9a4 1px, transparent 1px),
linear-gradient(90deg, #9ca9a4 1px, transparent 1px);
background-size: 34px 34px;
}
.story-demo-board {
position: absolute;
display: block;
border: 1px solid rgba(44, 44, 44, .18);
background: #b99a73;
box-shadow: 0 10px 22px rgba(44, 44, 44, .12);
}
.story-product-demo--adhesive-layout .story-demo-board {
left: 12%;
width: 62%;
height: 15%;
border-radius: 3px;
}
.story-product-demo--adhesive-layout .story-demo-board--1 {
top: 18%;
}
.story-product-demo--adhesive-layout .story-demo-board--2 {
top: 36%;
left: 26%;
background: #9c7c58;
}
.story-product-demo--adhesive-layout .story-demo-board--3 {
top: 54%;
background: #c4aa86;
}
.story-product-demo--adhesive-layout .story-demo-board--4 {
top: 72%;
left: 26%;
background: #87694b;
}
.story-product-demo--rigid-click .story-demo-board {
top: 25%;
width: 43%;
height: 50%;
border-radius: 4px;
}
.story-product-demo--rigid-click .story-demo-board--left {
left: 7%;
background: #c6b18d;
}
.story-product-demo--rigid-click .story-demo-board--right {
right: 7%;
background: #a68a64;
}
.story-demo-lock {
position: absolute;
z-index: 2;
top: 25%;
bottom: 25%;
left: calc(50% - 2px);
width: 4px;
background: #596963;
box-shadow: 0 0 0 5px rgba(89, 105, 99, .1);
}
.story-installation .story-eyebrow {
color: #d7b67f;
}
.story-installation h2 {
color: #fff;
}
.story-installation__summary {
margin: 20px 0 28px;
color: #d9dedb;
font-size: 17px;
line-height: 1.8;
}
.story-installation ol {
display: grid;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
counter-reset: story-step;
}
.story-installation li {
display: grid;
grid-template-columns: 34px 1fr;
gap: 14px;
align-items: center;
padding: 13px 0;
border-top: 1px solid rgba(255, 255, 255, .13);
color: #f5f5f1;
counter-increment: story-step;
}
.story-installation li::before {
content: counter(story-step, decimal-leading-zero);
color: #d7b67f;
font-size: 11px;
font-weight: 700;
}
.story-source-note {
margin: 22px 0 0;
color: #aeb9b5;
font-size: 12px;
line-height: 1.7;
}
.story-spaces__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
border: 1px solid var(--lsa-line);
border-radius: var(--lsa-radius-card);
background: var(--lsa-line);
}
.story-spaces__grid article {
min-height: 230px;
padding: 30px 25px;
background: #fff;
}
.story-spaces__grid h3 {
margin: 0 0 42px;
font-size: 18px;
}
.story-spaces__grid p {
margin: 0;
color: var(--story-ink-soft);
font-size: 14px;
line-height: 1.75;
}
.story-specifications {
background: var(--story-cool);
}
.story-specifications__grid {
display: grid;
grid-template-columns: minmax(0, .72fr) minmax(520px, 1fr);
gap: clamp(50px, 8vw, 112px);
align-items: start;
}
.story-spec-list {
margin: 0;
border-top: 1px solid #c8d0cd;
}
.story-spec-list div {
display: grid;
grid-template-columns: minmax(120px, .45fr) 1fr;
gap: 28px;
padding: 18px 0;
border-bottom: 1px solid #c8d0cd;
}
.story-spec-list dt {
color: #63706c;
font-size: 13px;
}
.story-spec-list dd {
margin: 0;
color: #26302f;
font-size: 14px;
font-weight: 650;
}
.story-gallery__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.story-gallery__item {
display: grid;
min-width: 0;
padding: 0;
overflow: hidden;
border: 1px solid var(--lsa-line);
border-radius: var(--lsa-radius-card);
color: var(--lsa-ink);
background: #fff;
text-align: left;
cursor: zoom-in;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.story-gallery__item:hover {
transform: translateY(-3px);
border-color: #c5b69f;
box-shadow: 0 16px 40px rgba(44, 44, 44, .1);
}
.story-gallery__item img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
background: var(--lsa-surface);
transition: transform .24s ease;
}
.story-gallery--catalog-pages .story-gallery__item img {
aspect-ratio: 3 / 4;
padding: 12px;
object-fit: contain;
}
.story-gallery__item:hover img {
transform: scale(1.02);
}
.story-gallery__item > span {
min-height: 54px;
display: flex;
align-items: center;
padding: 14px 16px;
border-top: 1px solid var(--lsa-line);
font-size: 13px;
font-weight: 700;
}
.story-gallery__more {
margin-top: 24px;
}
.story-gallery__more summary {
width: fit-content;
padding: 14px 18px;
border: 1px solid #cfcac4;
border-radius: var(--lsa-radius-button);
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
.story-gallery__more[open] summary {
margin-bottom: 24px;
}
.story-color-note {
margin: 24px 0 0;
color: #77736e;
font-size: 12px;
}
.story-catalog {
background: var(--lsa-surface);
}
.story-catalog__grid {
display: grid;
grid-template-columns: minmax(300px, .55fr) minmax(0, 1fr);
gap: clamp(52px, 8vw, 110px);
align-items: center;
}
.story-catalog figure {
margin: 0;
}
.story-catalog figure img {
display: block;
width: 100%;
max-height: 560px;
object-fit: contain;
border-radius: 8px;
background: #fff;
box-shadow: var(--story-shadow);
}
.story-sources {
display: grid;
gap: 9px;
margin: 28px 0 0;
padding: 24px 0 0;
border-top: 1px solid var(--lsa-line);
list-style: none;
}
.story-sources a {
color: #635d56;
font-size: 12px;
text-decoration-color: #b7aa9b;
text-underline-offset: 3px;
}
.story-consultation {
padding: 100px 0;
scroll-margin-top: 150px;
color: #fff;
background: var(--lsa-ink);
}
.story-consultation__inner {
max-width: 850px;
text-align: center;
}
.story-consultation .story-eyebrow {
color: #d7b67f;
}
.story-consultation h2 {
color: #fff;
}
.story-consultation__inner > p {
max-width: 680px;
margin-inline: auto;
color: #d3d0cb;
}
.story-actions--center {
justify-content: center;
}
.story-consultation .story-button--primary {
color: var(--lsa-ink);
border-color: #fff;
background: #fff;
}
.story-consultation .story-button--primary:hover {
border-color: #d7b67f;
background: #d7b67f;
}
.story-consultation .story-button--secondary {
color: #fff;
border-color: #77736e;
}
.story-consultation .story-button--secondary:hover {
color: #fff;
border-color: #fff;
background: transparent;
}
.story-text-link--light {
color: #e3c58e;
}
.story-lightbox {
width: min(1080px, calc(100% - 32px));
max-width: none;
max-height: calc(100vh - 40px);
padding: 18px;
overflow: auto;
border: 0;
border-radius: var(--lsa-radius-card);
color: var(--lsa-ink);
background: #fff;
box-shadow: 0 30px 100px rgba(0, 0, 0, .36);
}
.story-lightbox::backdrop {
background: rgba(20, 23, 22, .78);
}
.story-lightbox img {
display: block;
width: 100%;
max-height: calc(100vh - 130px);
object-fit: contain;
background: var(--lsa-surface);
}
.story-lightbox p {
margin: 14px 52px 2px 4px;
font-size: 13px;
font-weight: 700;
}
.story-lightbox__close {
position: sticky;
z-index: 2;
top: 0;
float: right;
display: grid;
width: 44px;
height: 44px;
margin: 0 0 -44px;
place-items: center;
border: 0;
border-radius: 50%;
color: #fff;
background: rgba(44, 44, 44, .88);
font-size: 28px;
cursor: pointer;
}
.story-motion-ready [data-story-reveal] {
opacity: 0;
transform: translateY(12px);
}
.story-motion-ready [data-story-reveal].is-visible {
opacity: 1;
transform: translateY(0);
transition: opacity .42s ease, transform .42s ease;
}
@media (max-width: 980px) {
.story-hero {
min-height: auto;
padding-top: 56px;
}
.story-hero__grid,
.story-installation__grid,
.story-specifications__grid,
.story-catalog__grid {
grid-template-columns: 1fr;
}
.story-hero__grid {
gap: 42px;
}
.story-hero__media {
max-width: 720px;
}
.story-image-button,
.story-image-button img {
min-height: 440px;
}
.story-heading--split {
grid-template-columns: 1fr;
gap: 18px;
}
.story-decision__grid {
grid-template-columns: 1fr;
}
.story-decision__item {
min-height: auto;
}
.story-spaces__grid,
.story-gallery__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.story-specifications__grid {
gap: 26px;
}
.story-catalog figure {
max-width: 460px;
}
}
@media (max-width: 782px) {
.admin-bar .story-nav {
top: calc(var(--header-height, 72px) + 46px);
}
}
@media (max-width: 640px) {
.line-float {
bottom: 112px;
}
.story-shell {
width: min(100% - 32px, 1240px);
}
.story-hero {
padding: 22px 0 30px;
}
.story-hero__grid {
gap: 22px;
}
.story-hero__media {
order: -1;
}
.story-breadcrumb {
margin-bottom: 18px;
font-size: 12px;
}
.story-hero h1 {
font-size: 34px;
line-height: 1.18;
}
.story-hero__type {
margin-top: 10px;
font-size: 14px;
}
.story-hero__summary {
margin-top: 10px;
font-size: 15px;
line-height: 1.65;
}
.story-quick-specs {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin-top: 18px;
padding: 14px 0;
}
.story-quick-specs div,
.story-quick-specs div:first-child {
display: block;
padding: 0 9px;
border-left: 1px solid var(--lsa-line);
}
.story-quick-specs div:first-child {
padding-left: 0;
border-left: 0;
}
.story-quick-specs dt {
margin-bottom: 5px;
font-size: 10px;
}
.story-quick-specs dd {
font-size: 13px;
}
.story-actions {
align-items: stretch;
}
.story-actions .story-button {
width: 100%;
}
.story-hero__copy .story-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 18px;
}
.story-hero__copy .story-actions .story-button {
width: auto;
min-height: 44px;
padding: 10px 8px;
font-size: 12px;
}
.story-hero__copy .story-text-link {
grid-column: 1 / -1;
min-height: 38px;
padding-block: 4px;
}
.story-text-link {
justify-content: center;
}
.story-image-button,
.story-image-button img {
height: 230px;
min-height: 230px;
}
.story-hero__media figcaption {
display: none;
}
.product-story[data-product-story="winton-8th"] .story-image-button img {
padding: 0;
}
.story-nav {
top: var(--header-height, 68px);
}
.story-nav__scroll {
width: 100%;
padding-inline: 16px;
gap: 26px;
}
.story-section,
.story-consultation {
padding: 74px 0;
scroll-margin-top: 132px;
}
.story-heading {
margin-bottom: 34px;
}
.story-heading h2,
.story-installation h2,
.story-catalog h2,
.story-consultation h2 {
font-size: 30px;
}
.story-decision__item {
padding: 24px;
}
.story-reasons__list article {
grid-template-columns: 44px 1fr;
gap: 14px;
}
.story-installation__grid {
gap: 42px;
}
.story-spaces__grid {
grid-template-columns: 1fr;
}
.story-spaces__grid article {
min-height: auto;
}
.story-spaces__grid h3 {
margin-bottom: 18px;
}
.story-spec-list div {
grid-template-columns: 1fr;
gap: 7px;
}
.story-gallery__grid {
gap: 12px;
}
.story-gallery__item > span {
min-height: 50px;
padding: 12px;
}
.story-catalog__grid {
gap: 42px;
}
.story-lightbox {
padding: 10px;
}
}
@media (prefers-reduced-motion: reduce) {
.product-story {
scroll-behavior: auto;
}
.story-motion-ready [data-story-reveal],
.story-motion-ready [data-story-reveal].is-visible {
opacity: 1;
transform: none;
transition: none;
}
.story-button,
.story-text-link span,
.story-image-button img,
.story-gallery__item,
.story-gallery__item img {
transition: none;
}
}