/* Transit Shell viewer: quiet fashion-archive field with lateral product energy. */
.viewer {
isolation: isolate;
background: linear-gradient(112deg, var(--paper) 0 17%, var(--muted) 17% 100%)
}
.viewer:before {
content: 'TRANSIT';
z-index: 0;
left: -.04em;
right: auto;
bottom: -.02em;
font-size: 12.8vw;
line-height: .7;
color: rgba(16, 16, 16, .11);
-webkit-text-stroke: 0;
letter-spacing: -.1em;
transform: none
}
.viewer:after {
content: 'GARMENT 01 / SHELL';
z-index: 4;
inset: auto 22px 22px auto;
width: auto;
aspect-ratio: auto;
border: 1px solid var(--ink);
border-radius: 0;
transform: none;
box-shadow: none;
background: var(--paper);
color: var(--ink);
padding: 9px 11px;
font: 500 9px/1 'DM Mono', monospace;
letter-spacing: .04em;
left: auto;
top: auto
}
.viewer img {
position: absolute;
z-index: 2;
width: 104%;
height: 96%;
left: -3%;
top: 0;
object-fit: contain;
object-position: center;
filter: drop-shadow(25px 32px 0 rgba(16, 16, 16, .14));
transform-origin: center center
}
.viewer-overlay {
z-index: 1;
inset: 0;
background: linear-gradient(112deg, transparent 0 61%, rgba(16, 16, 16, .24) 61.05%, transparent 61.2%), linear-gradient(90deg, transparent 0 16.85%, rgba(16, 16, 16, .4) 16.9%, rgba(16, 16, 16, .4) 17%, transparent 17.05%);
border: 0
}
.viewer-cross {
z-index: 4;
left: 21%;
top: 72%;
width: 46px;
background: var(--ink)
}
.viewer-cross:after {
left: 23px;
top: -23px;
height: 46px;
background: var(--ink)
}
.viewer-label {
z-index: 4;
color: var(--ink);
left: 22px;
right: 22px;
bottom: auto;
top: 22px
}
.viewer-label span:last-child {
background: var(--acid);
border: 1px solid var(--ink);
padding: 7px 9px
}
/* The commerce block is its own complete section after the horizontal lookbook. */
.launch-pin {
grid-template-rows: 1fr
}
.transit-product {
min-height: 112vh;
display: grid;
grid-template-columns: 40% 60%;
position: relative;
overflow: hidden;
background: var(--paper);
border-bottom: 1px solid var(--ink)
}
.transit-commerce {
position: relative;
z-index: 5;
padding: 12vh 3vw 7vh;
border-right: 1px solid var(--ink);
display: flex;
flex-direction: column
}
.transit-commerce h2 {
font-size: clamp(70px, 9vw, 138px);
line-height: .68;
letter-spacing: -.085em;
margin: 32px 0 28px
}
.transit-commerce h2 span {
display: block;
color: transparent;
-webkit-text-stroke: 1.5px var(--ink)
}
.transit-intro {
max-width: 370px;
font-size: 16px;
line-height: 1.5;
margin: 0 0 7vh
}
.transit-commerce .buy-panel {
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 28px;
margin-top: auto
}
.transit-commerce .product-code {
display: none
}
.transit-commerce .price {
font-size: 14px;
margin-top: 10px
}
.transit-commerce .sizes {
margin: 0
}
.transit-commerce .size-row {
margin-top: 10px
}
.transit-commerce .add {
margin-top: 8px
}
.transit-commerce .panel-data {
grid-template-columns: repeat(3, 1fr);
gap: 0;
border: 1px solid var(--ink);
padding: 0
}
.transit-commerce .data-line {
display: grid;
gap: 9px;
padding: 12px;
border-right: 1px solid var(--ink)
}
.transit-commerce .data-line:last-child {
border-right: 0
}
.transit-commerce .data-line span:last-child {
font-weight: 500
}
.transit-visual {
position: relative;
min-height: 112vh;
overflow: hidden;
background: linear-gradient(128deg, var(--muted) 0 61%, var(--paper) 61%);
isolation: isolate
}
.transit-visual:before {
content: 'SHELL';
position: absolute;
z-index: 0;
left: -.05em;
bottom: -.055em;
font-size: 20vw;
font-weight: 900;
line-height: .65;
letter-spacing: -.12em;
color: rgba(16, 16, 16, .1);
white-space: nowrap
}
.transit-visual:after {
content: 'PRODUCT / 03';
position: absolute;
z-index: 4;
right: 24px;
top: 24px;
padding: 9px 11px;
border: 1px solid var(--ink);
background: var(--acid);
font: 500 9px/1 'DM Mono', monospace;
letter-spacing: .05em
}
.transit-visual img {
position: absolute;
z-index: 2;
inset: 4% 2% auto;
width: 96%;
height: 92%;
object-fit: contain;
object-position: center;
filter: drop-shadow(28px 34px 0 rgba(16, 16, 16, .16));
will-change: transform
}
.transit-rule {
position: absolute;
z-index: 1;
left: 7%;
right: 7%;
top: 50%;
height: 1px;
background: rgba(16, 16, 16, .35);
transform: rotate(-18deg)
}
.transit-rule:after {
content: '';
position: absolute;
right: 0;
top: -6px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--red);
border: 1px solid var(--ink)
}
.transit-note {
position: absolute;
z-index: 4;
left: 24px;
top: 24px;
font: 500 9px/1.5 'DM Mono', monospace;
text-transform: uppercase
}
.transit-count {
position: absolute;
z-index: 4;
right: 24px;
bottom: 24px;
font-size: clamp(54px, 7vw, 108px);
font-weight: 800;
line-height: .7;
letter-spacing: -.08em;
color: transparent;
-webkit-text-stroke: 1.5px var(--ink)
}
@media(max-width:850px) {
.launch-pin {
grid-template-rows: 1fr
}
.transit-product {
grid-template-columns: 1fr;
min-height: 0
}
.transit-commerce {
padding: 11vh 18px 45px;
border-right: 0;
border-bottom: 1px solid var(--ink)
}
.transit-commerce h2 {
font-size: 22vw
}
.transit-intro {
margin-bottom: 45px
}
.transit-commerce .panel-data {
grid-template-columns: 1fr
}
.transit-commerce .data-line {
grid-template-columns: 1fr 1fr;
border-right: 0;
border-bottom: 1px solid var(--ink)
}
.transit-commerce .data-line:last-child {
border-bottom: 0
}
.transit-visual {
min-height: 92vh
}
.transit-visual:before {
font-size: 38vw
}
.transit-visual img {
inset: 3% -4% 0;
width: 108%;
height: 97%
}
}
.transit-visual img {
transform: none !important;
will-change: auto
}
.finale {
background-image: linear-gradient(90deg, rgba(5, 6, 8, .84) 0%, rgba(5, 6, 8, .62) 48%, rgba(5, 6, 8, .16) 100%), url('https://cdn.jsdelivr.net/gh/VanhDc/aura-assets@main/void03/void-cloth-field.png');
background-size: cover;
background-position: center;
color: var(--paper)
}
.final-left {
border-right: 0;
background: linear-gradient(90deg, rgba(5, 6, 8, .28), transparent)
}
.final-left h2 span {
-webkit-text-stroke: 2px var(--paper)
}
.final-number {
color: var(--paper);
opacity: .14
}
.final-cta {
border-color: var(--paper);
background: var(--ink);
color: var(--paper)
}
.final-cta:hover {
background: var(--paper);
color: var(--ink)
}
.footer {
border-color: rgba(243, 239, 229, .55);
text-shadow: 0 1px 14px rgba(0, 0, 0, .5)
}
@media(min-width:851px) {
.launch {
min-height: 103vh
}
.launch-copy,
.launch-visual,
.buy-panel {
position: relative;
top: auto;
height: auto
}
}
@media(max-width:850px) {
.launch {
min-height: 103vh;
padding-top: 0
}
.launch-pin {
grid-template-columns: 1fr;
grid-template-rows: 1fr
}
.launch-pin .launch-copy {
position: absolute;
left: 0;
top: 0;
width: 61%;
height: 100%;
padding: 9vh 18px 24px;
background: linear-gradient(90deg, var(--paper) 0%, rgba(243, 239, 229, .94) 72%, transparent 100%)
}
.launch-pin .launch-visual {
grid-column: 1;
grid-row: 1
}
.launch-pin .launch-visual img {
width: 86%;
height: 96%;
right: -10%;
bottom: 0
}
.product-views {
right: 10px;
top: auto;
bottom: 10px;
transform: none;
display: flex
}
.product-views button {
width: 48px;
display: block;
text-align: center
}
.product-views button span {
display: none
}
.product-views button:hover,
.product-views button.active {
transform: translateY(-5px)
}
.slide-four .slide-title {
font-size: 18vw;
max-width: 72%
}
}