.preview-section {
background: transparent;
padding: 0.5rem 0 4rem;
position: relative;
scroll-margin-top: 6rem;
}
.preview-container {
max-width: 1400px;
margin: 0 1.5rem;
position: relative;
z-index: 1;
}
.preview-card {
position: relative;
overflow: hidden;
background: var(--color-white, #FDFCFA);
border: 1px solid rgba(0, 0, 0, 0.04);
border-radius: var(--radius-lg, 1.5rem);
padding: 2.5rem 1.5rem;
display: grid;
gap: 1.75rem;
grid-template-areas:
'head'
'visual'
'body';
box-shadow: 0 24px 60px rgba(90, 40, 34, 0.24);
} .preview-card::before {
content: '';
position: absolute;
top: -30%;
right: -20%;
width: 65%;
aspect-ratio: 1;
background: radial-gradient(circle, rgba(166, 93, 87, 0.13) 0%, rgba(166, 93, 87, 0) 70%);
pointer-events: none;
z-index: 0;
}
.preview-head { grid-area: head; position: relative; z-index: 1; }
.preview-visual { grid-area: visual; position: relative; z-index: 1; min-width: 0; }
.preview-body { grid-area: body; position: relative; z-index: 1; } .preview-label {
display: inline-block;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-primary, #A65D57);
margin-bottom: 0.9rem;
}
.preview-title {
font-family: var(--font-heading, 'Afacad', system-ui, sans-serif);
font-size: clamp(2rem, 7.5vw, 2.6rem);
font-weight: var(--font-weight-extrabold, 800);
color: var(--color-text, #1A1917);
letter-spacing: var(--letter-spacing-tight, -0.03em);
line-height: var(--line-height-tight, 1.1);
margin: 0;
} .preview-description {
font-size: 1.02rem;
color: var(--color-text-light, #6B6560);
line-height: var(--line-height-body, 1.6);
max-width: 44ch;
margin: 0;
} .preview-steps {
list-style: none;
padding: 0;
margin: 1.4rem 0 1.6rem;
border-top: 1px solid rgba(26, 25, 23, 0.08);
max-width: 30rem;
}
.preview-step {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.68rem 0;
border-bottom: 1px solid rgba(26, 25, 23, 0.08);
}
.preview-step__num {
flex-shrink: 0;
width: 1.65rem;
height: 1.65rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid rgba(166, 93, 87, 0.35);
background: rgba(166, 93, 87, 0.07);
color: var(--color-primary, #A65D57);
font-family: var(--font-heading, 'Afacad', system-ui, sans-serif);
font-size: 0.88rem;
font-weight: 700;
line-height: 1;
}
.preview-step__text {
font-size: 0.97rem;
font-weight: 500;
color: var(--color-text, #1A1917);
line-height: 1.35;
} .preview-actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.9rem;
}
.preview-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
background: var(--color-primary, #A65D57);
color: var(--color-white, #FDFCFA);
padding: 1rem 1.75rem;
border-radius: 999px;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
line-height: 1.2;
text-align: center;
box-shadow: 0 10px 24px rgba(166, 93, 87, 0.28);
transition:
background-color var(--transition-fast, 0.2s ease),
transform var(--transition-fast, 0.2s ease),
box-shadow var(--transition-fast, 0.2s ease);
}
.preview-btn .material-symbols-outlined {
font-size: 20px;
transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.preview-btn:hover,
.preview-btn:focus-visible {
background: var(--color-primary-dark, #8B4E49);
color: var(--color-white, #FDFCFA);
transform: translateY(-2px);
box-shadow: 0 16px 32px rgba(166, 93, 87, 0.34);
}
.preview-btn:hover .material-symbols-outlined {
transform: translateX(5px);
}
.preview-trust {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.3rem 1.1rem;
}
.preview-trust li {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.85rem;
color: var(--color-text-light, #6B6560);
line-height: 1.4;
}
.preview-trust .material-symbols-outlined {
font-size: 16px;
color: var(--color-primary, #A65D57);
}
.preview-note {
margin: 1rem 0 0;
font-size: 0.85rem;
color: #8A7E76;
line-height: 1.5;
} .preview-styles {
width: 100%;
max-width: 620px;
margin: 0 auto;
}
.preview-frame {
border-radius: 1.1rem;
overflow: hidden;
background: var(--color-white, #FDFCFA);
border: 1px solid rgba(26, 25, 23, 0.07);
box-shadow:
0 26px 55px rgba(90, 40, 34, 0.2),
0 4px 12px rgba(90, 40, 34, 0.08);
}
.preview-frame__bar {
position: relative;
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.8rem;
background: #F1ECE8;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
} .preview-frame__bar::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
height: 2px;
width: 0;
background: var(--color-primary, #A65D57);
opacity: 0;
}
.preview-styles.is-changing .preview-frame__bar::after {
animation: preview-load 1s cubic-bezier(0.25, 0.8, 0.35, 1);
}
@keyframes preview-load {
0%   { width: 0;    opacity: 1; }
65%  { width: 100%; opacity: 1; }
100% { width: 100%; opacity: 0; }
}
.preview-frame__dots {
display: flex;
gap: 0.3rem;
flex-shrink: 0;
}
.preview-frame__dots i {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.13);
}
.preview-frame__url {
display: inline-flex;
align-items: center;
gap: 0.28rem;
font-size: 0.7rem;
color: #8A7E76;
background: rgba(255, 255, 255, 0.8);
border-radius: 999px;
padding: 0.2rem 0.75rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.preview-frame__url .material-symbols-outlined {
font-size: 13px;
opacity: 0.65;
} .preview-stage {
position: relative;
aspect-ratio: 3 / 2;
overflow: hidden;
background: #EDE5E1;
}
.preview-shot {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: translateZ(0) scale(1.05);
will-change: opacity, transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition:
opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
transform 1.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.preview-shot.is-active {
opacity: 1;
transform: translateZ(0) scale(1);
z-index: 2;
}
.preview-shot.is-leaving {
opacity: 0;
transform: translateZ(0) scale(0.975);
z-index: 1;
} .preview-stage::after {
content: '';
position: absolute;
inset: -25% -60%;
z-index: 3;
pointer-events: none;
opacity: 0;
background: linear-gradient(
105deg,
rgba(255, 255, 255, 0) 42%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0) 58%
);
}
.preview-styles.is-changing .preview-stage::after {
animation: preview-sheen 1.05s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes preview-sheen {
0%   { opacity: 0;   transform: translateX(-42%); }
22%  { opacity: 1; }
100% { opacity: 0;   transform: translateX(42%); }
} .preview-caption {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 0.25rem 0;
}
.preview-style {
display: grid;
min-width: 0;
}
.preview-style__item {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
gap: 0.12rem;
opacity: 0;
transform: translateY(7px);
pointer-events: none;
transition:
opacity 0.5s ease,
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.preview-style__item.is-active {
opacity: 1;
transform: none;
}
.preview-style__name {
font-family: var(--font-heading, 'Afacad', system-ui, sans-serif);
font-size: 1.35rem;
font-weight: var(--font-weight-bold, 700);
color: var(--color-text, #1A1917);
line-height: 1.1;
}
.preview-style__tag {
font-size: 0.72rem;
font-weight: var(--font-weight-medium, 500);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-light, #6B6560);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.preview-dots {
display: flex;
align-items: center;
gap: 0.15rem;
flex-shrink: 0;
} .preview-dot {
appearance: none;
-webkit-appearance: none;
border: 0;
margin: 0;
padding: 0;
background: none;
cursor: pointer;
min-width: 18px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
}
.preview-dot__track {
display: block;
width: 8px;
height: 8px;
border-radius: 999px;
background: rgba(26, 25, 23, 0.16);
overflow: hidden;
transition:
width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
background-color 0.35s ease;
}
.preview-dot:hover .preview-dot__track { background: rgba(166, 93, 87, 0.4); }
.preview-dot:focus-visible {
outline: 2px solid var(--color-primary, #A65D57);
outline-offset: 2px;
}
.preview-dot.is-active .preview-dot__track {
width: 32px;
background: rgba(166, 93, 87, 0.2);
}
.preview-dot__fill {
display: block;
height: 100%;
width: 0;
border-radius: inherit;
background: var(--color-primary, #A65D57);
}
.preview-dot.is-active .preview-dot__fill {
animation: preview-dot-fill var(--preview-dwell, 3600ms) linear forwards;
}
.preview-styles.is-paused .preview-dot.is-active .preview-dot__fill {
animation-play-state: paused;
}
@keyframes preview-dot-fill {
from { width: 0; }
to   { width: 100%; }
} @media (min-width: 600px) {
.preview-section { padding: 0.5rem 0 5rem; }
.preview-card {
padding: 3rem 2.5rem;
border-radius: 2rem;
gap: 2rem;
}
.preview-btn { width: auto; }
.preview-actions {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 1rem 1.5rem;
}
.preview-title { font-size: clamp(2.2rem, 5vw, 2.8rem); }
} @media (min-width: 992px) {
.preview-section { padding: 0 0 6rem; }
.preview-container { margin: 0 var(--space-md, 2rem); }
.preview-card {
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
grid-template-areas:
'head visual'
'body visual';
column-gap: 4rem;
row-gap: 1.4rem;
align-content: center;
padding: 3.75rem 4rem;
}
.preview-head { align-self: end; }
.preview-body { align-self: start; }
.preview-visual { align-self: center; }
.preview-title { font-size: clamp(2.4rem, 3vw, 3rem); }
.preview-actions {
flex-direction: column;
align-items: flex-start;
gap: 0.85rem;
}
.preview-styles { max-width: 100%; }
}
@media (min-width: 1464px) {
.preview-container { margin: 0 auto; }
} @media (prefers-reduced-motion: reduce) {
.preview-shot,
.preview-style__item { transition: none; }
.preview-styles.is-changing .preview-stage::after,
.preview-styles.is-changing .preview-frame__bar::after { animation: none; }
.preview-dot.is-active .preview-dot__fill { animation: none; width: 100%; }
}