/* ===== Atelier Hero — token system =====
Avorio (ivory): #EDE8DC
Nero sartoriale: #17140F
Ottone (brass): #9C7C4C
Pietra (stone, muted): #A79E8E
Lacca (lacquer, rare): #7A2015
*/
.atelier-hero {
position: relative;
min-height: 100svh;
width: 100%;
overflow: hidden;
background: #17140F;
color: #EDE8DC;
isolation: isolate;
}
.atelier-hero__media {
position: absolute;
inset: 0;
z-index: 0;
}
.atelier-hero__image,
.atelier-hero__video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
display: block;
filter: grayscale(0.08) contrast(1.03);
}
.atelier-hero__placeholder {
width: 100%;
height: 100%;
background: #2A241C;
}
.atelier-hero__placeholder-svg {
width: 100%;
height: 100%;
opacity: 0.35;
}
.atelier-hero__scrim {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(23,20,15,0.72) 0%, rgba(23,20,15,0.34) 42%, rgba(23,20,15,0.12) 65%),
linear-gradient(0deg, rgba(23,20,15,0.55) 0%, rgba(23,20,15,0) 30%);
}
/* Signature element: the brass "cartellino" tag, rotated like a sartorial hang-tag */
.atelier-hero__tag {
position: absolute;
top: 0;
right: clamp(20px, 4vw, 56px);
height: 100%;
z-index: 2;
display: flex;
align-items: center;
gap: 14px;
pointer-events: none;
}
.atelier-hero__tag-line {
width: 1px;
height: 38%;
background: linear-gradient(180deg, rgba(156,124,76,0) 0%, #9C7C4C 50%, rgba(156,124,76,0) 100%);
}
.atelier-hero__tag-text {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: 'Manrope', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.28em;
color: #C8AE85;
text-transform: uppercase;
white-space: nowrap;
}
@media (max-width: 749px) {
.atelier-hero__tag { display: none; }
}
.atelier-hero__content {
position: relative;
z-index: 2;
height: 100%;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: clamp(28px, 6vw, 72px);
padding-bottom: clamp(64px, 10vw, 120px);
max-width: 760px;
}
.atelier-hero__content--right {
margin-left: auto;
text-align: right;
align-items: flex-end;
}
.atelier-hero__eyebrow {
font-family: 'Manrope', sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #C8AE85;
margin: 0 0 18px;
}
.atelier-hero__heading {
font-family: 'Bodoni Moda', serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: italic;
font-size: clamp(2.6rem, 6.4vw, 5.6rem);
line-height: 1.02;
letter-spacing: 0.005em;
margin: 0 0 22px;
color: #EDE8DC;
}
.atelier-hero__subtext {
font-family: 'Manrope', sans-serif;
font-size: clamp(0.95rem, 1.1vw, 1.05rem);
line-height: 1.6;
font-weight: 400;
color: #D8D2C4;
max-width: 46ch;
margin: 0 0 34px;
}
.atelier-hero__content--right .atelier-hero__subtext {
margin-left: auto;
}
.atelier-hero__cta {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: 'Manrope', sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #EDE8DC;
text-decoration: none;
padding-bottom: 6px;
border-bottom: 1px solid rgba(237,232,220,0.4);
transition: border-color 0.35s ease, gap 0.35s ease, color 0.35s ease;
width: fit-content;
}
.atelier-hero__cta:hover {
border-color: #9C7C4C;
color: #C8AE85;
gap: 18px;
}
.atelier-hero__cta svg { flex-shrink: 0; }
/* Scroll cue */
.atelier-hero__scroll {
position: absolute;
left: 50%;
bottom: clamp(20px, 3vw, 32px);
transform: translateX(-50%);
z-index: 2;
background: none;
border: none;
padding: 8px;
cursor: pointer;
}
.atelier-hero__scroll-line {
display: block;
width: 1px;
height: 34px;
background: rgba(237,232,220,0.55);
animation: atelier-scroll 2.2s ease-in-out infinite;
transform-origin: top;
}
@keyframes atelier-scroll {
0% { transform: scaleY(0.2); opacity: 0.3; }
50% { transform: scaleY(1); opacity: 1; }
100% { transform: scaleY(0.2); opacity: 0.3; }
}
/* Staggered reveal on load */
.atelier-reveal {
opacity: 0;
transform: translateY(16px);
animation: atelier-fade-up 0.9s cubic-bezier(0.19, 1, 0.22, 1) forwards;
animation-delay: var(--d, 0s);
}
@keyframes atelier-fade-up {
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.atelier-reveal { animation: none; opacity: 1; transform: none; }
.atelier-hero__scroll-line { animation: none; }
}
@media (max-width: 749px) {
.atelier-hero__content {
max-width: 100%;
padding: 24px;
padding-bottom: 88px;
}
.atelier-hero__content--right {
text-align: left;
align-items: flex-start;
}
}