847 lines
13 KiB
CSS
847 lines
13 KiB
CSS
/* Seasonal campaign: isolated styles preserve the studio's existing pages. */
|
|
:root {
|
|
--ny-ink: #102d37;
|
|
--ny-gold: #f3d398;
|
|
--ny-red: #ad302e;
|
|
--ny-paper: #fbf7ee
|
|
}
|
|
|
|
.ny-nav {
|
|
color: #9a302c;
|
|
font-weight: 700
|
|
}
|
|
|
|
.nav {
|
|
gap: 22px
|
|
}
|
|
|
|
.ny-home,
|
|
.ny-page {
|
|
background: var(--ny-paper)
|
|
}
|
|
|
|
.ny-hero {
|
|
background: var(--ny-ink);
|
|
color: #fff6e5;
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: 70px 0 64px
|
|
}
|
|
|
|
.ny-hero-grid {
|
|
display: grid;
|
|
grid-template-columns: .85fr 1.15fr;
|
|
gap: 38px;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 1
|
|
}
|
|
|
|
.ny-eyebrow {
|
|
display: block;
|
|
font-size: 11px;
|
|
letter-spacing: 2px;
|
|
font-weight: 700;
|
|
line-height: 1.8
|
|
}
|
|
|
|
.ny-intro .ny-eyebrow {
|
|
color: var(--ny-gold)
|
|
}
|
|
|
|
.ny-intro h1 {
|
|
font-family: Georgia, 'Times New Roman', serif;
|
|
font-size: clamp(42px, 4.3vw, 66px);
|
|
font-weight: 400;
|
|
line-height: 1.05;
|
|
letter-spacing: -1.8px;
|
|
margin: 24px 0
|
|
}
|
|
|
|
.ny-intro h1 em {
|
|
color: var(--ny-gold);
|
|
font-weight: 400
|
|
}
|
|
|
|
.ny-intro p {
|
|
font-size: 16px;
|
|
max-width: 440px;
|
|
color: #e0e5df
|
|
}
|
|
|
|
.ny-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 19px;
|
|
margin-top: 28px
|
|
}
|
|
|
|
.ny-gold {
|
|
background: var(--ny-gold);
|
|
color: #19313a;
|
|
gap: 20px;
|
|
border-radius: 7px
|
|
}
|
|
|
|
.ny-gold:hover {
|
|
background: #ffe8bb;
|
|
transform: translateY(-2px)
|
|
}
|
|
|
|
.ny-text-link {
|
|
font-size: 13px;
|
|
text-underline-offset: 5px;
|
|
text-decoration: underline
|
|
}
|
|
|
|
.ny-caption {
|
|
font-size: 10px;
|
|
letter-spacing: .8px;
|
|
color: #b3c4c7;
|
|
margin-top: 34px;
|
|
max-width: 350px
|
|
}
|
|
|
|
.ny-art {
|
|
position: relative;
|
|
margin: 0
|
|
}
|
|
|
|
.ny-art img {
|
|
border-radius: 140px 140px 12px 12px;
|
|
border: 1px solid #d8b46d66;
|
|
box-shadow: 0 25px 80px #0005;
|
|
width: 100%;
|
|
aspect-ratio: 1.35;
|
|
object-fit: cover
|
|
}
|
|
|
|
.ny-star {
|
|
position: absolute;
|
|
color: var(--ny-gold);
|
|
animation: ny-twinkle 4s ease-in-out infinite;
|
|
pointer-events: none
|
|
}
|
|
|
|
.star-one {
|
|
left: 48%;
|
|
top: 22px;
|
|
font-size: 46px
|
|
}
|
|
|
|
.star-two {
|
|
left: 42%;
|
|
bottom: 24px;
|
|
font-size: 30px;
|
|
animation-delay: -2s
|
|
}
|
|
|
|
.ny-selection {
|
|
padding-top: 72px;
|
|
padding-bottom: 70px;
|
|
scroll-margin-top: 100px
|
|
}
|
|
|
|
.ny-heading {
|
|
text-align: center;
|
|
margin-bottom: 34px
|
|
}
|
|
|
|
.ny-heading .ny-eyebrow {
|
|
color: #8c6540
|
|
}
|
|
|
|
.ny-heading h2,
|
|
.ny-terms h2,
|
|
.ny-offer h2,
|
|
.ny-closing h2 {
|
|
font-family: Georgia, 'Times New Roman', serif;
|
|
font-weight: 400;
|
|
font-size: clamp(30px, 3vw, 43px);
|
|
line-height: 1.16;
|
|
color: var(--ny-ink);
|
|
margin: 14px 0 22px
|
|
}
|
|
|
|
.ny-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 22px
|
|
}
|
|
|
|
.ny-card {
|
|
border: 1px solid #ddcfb9;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
background: #fffdf8;
|
|
display: flex;
|
|
flex-direction: column
|
|
}
|
|
|
|
.ny-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 16px 35px #28373214
|
|
}
|
|
|
|
.ny-card-picture {
|
|
position: relative;
|
|
overflow: hidden
|
|
}
|
|
|
|
.ny-card-picture img {
|
|
width: 100%;
|
|
aspect-ratio: 16/10;
|
|
object-fit: cover;
|
|
transition: transform .4s
|
|
}
|
|
|
|
.ny-card:hover img {
|
|
transform: scale(1.035)
|
|
}
|
|
|
|
.ny-card-picture span {
|
|
position: absolute;
|
|
bottom: 14px;
|
|
left: 16px;
|
|
background: #fff6e5;
|
|
color: #702721;
|
|
border-radius: 4px;
|
|
padding: 5px 11px;
|
|
font-size: 13px;
|
|
font-weight: 700
|
|
}
|
|
|
|
.ny-card-body {
|
|
padding: 24px;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column
|
|
}
|
|
|
|
.ny-card-body small {
|
|
font-size: 9px;
|
|
letter-spacing: 1.8px;
|
|
color: #82684c
|
|
}
|
|
|
|
.ny-card h3 {
|
|
font-family: Georgia, serif;
|
|
color: var(--ny-ink);
|
|
font-size: 26px;
|
|
line-height: 1.2;
|
|
margin: 12px 0
|
|
}
|
|
|
|
.ny-card p {
|
|
font-size: 13px;
|
|
color: #655f56;
|
|
margin-bottom: 22px
|
|
}
|
|
|
|
.ny-card b {
|
|
font-size: 12px;
|
|
color: #9c302e;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: auto
|
|
}
|
|
|
|
.ny-special {
|
|
display: grid;
|
|
grid-template-columns: .7fr 1.3fr;
|
|
gap: 60px;
|
|
background: #efe6d6;
|
|
border-radius: 16px;
|
|
padding: 48px;
|
|
margin-bottom: 70px;
|
|
scroll-margin-top: 110px
|
|
}
|
|
|
|
.ny-discount {
|
|
border: 1px solid #b89b65;
|
|
border-radius: 160px 160px 12px 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 330px;
|
|
text-align: center;
|
|
padding: 25px;
|
|
color: #862e2b
|
|
}
|
|
|
|
.ny-discount>span {
|
|
font-size: 10px;
|
|
letter-spacing: 2px;
|
|
max-width: 200px
|
|
}
|
|
|
|
.ny-discount strong {
|
|
font-family: Georgia, serif;
|
|
font-size: 105px;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
white-space: nowrap
|
|
}
|
|
|
|
.ny-discount small {
|
|
font-size: 60px
|
|
}
|
|
|
|
.ny-terms .ny-eyebrow {
|
|
color: #8d342f
|
|
}
|
|
|
|
.ny-terms h2 {
|
|
margin-top: 12px;
|
|
font-size: 36px
|
|
}
|
|
|
|
.ny-terms p,
|
|
.ny-terms li {
|
|
font-size: 13px;
|
|
line-height: 1.8
|
|
}
|
|
|
|
.ny-terms ul {
|
|
margin: 16px 0
|
|
}
|
|
|
|
.ny-terms li {
|
|
padding-left: 24px;
|
|
position: relative;
|
|
margin-bottom: 9px
|
|
}
|
|
|
|
.ny-terms li:before {
|
|
content: '✦';
|
|
position: absolute;
|
|
left: 0;
|
|
color: #9c6632
|
|
}
|
|
|
|
.ny-exclusion {
|
|
border-top: 1px solid #cfbea4;
|
|
padding-top: 16px;
|
|
color: #744832
|
|
}
|
|
|
|
.ny-details {
|
|
padding-bottom: 20px
|
|
}
|
|
|
|
.ny-offer {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 55px;
|
|
padding: 50px 0 70px;
|
|
border-top: 1px solid #dfd4c2;
|
|
scroll-margin-top: 95px;
|
|
align-items: start
|
|
}
|
|
|
|
.ny-offer:nth-child(2) .ny-offer-visual {
|
|
order: 2
|
|
}
|
|
|
|
.ny-offer-visual {
|
|
position: sticky;
|
|
top: 115px
|
|
}
|
|
|
|
.ny-offer-visual img {
|
|
width: 100%;
|
|
border-radius: 12px;
|
|
aspect-ratio: 4/3;
|
|
object-fit: cover
|
|
}
|
|
|
|
.ny-offer-label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid #d6c6ac;
|
|
padding: 16px 0;
|
|
font-size: 10px;
|
|
letter-spacing: 2px;
|
|
color: #967446
|
|
}
|
|
|
|
.ny-offer-label span {
|
|
font-size: 24px
|
|
}
|
|
|
|
.ny-offer-copy .ny-eyebrow {
|
|
color: #9c302e
|
|
}
|
|
|
|
.ny-offer h2 {
|
|
font-size: 36px
|
|
}
|
|
|
|
.ny-offer p {
|
|
font-size: 14px;
|
|
line-height: 1.85;
|
|
margin-bottom: 16px;
|
|
color: #554f47
|
|
}
|
|
|
|
.ny-offer h4 {
|
|
font-size: 15px;
|
|
color: var(--ny-ink);
|
|
margin: 24px 0 9px
|
|
}
|
|
|
|
.ny-price {
|
|
border-left: 3px solid #bb914e;
|
|
background: #f0e8da;
|
|
padding: 17px 19px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin: 23px 0 17px
|
|
}
|
|
|
|
.ny-offer .ny-note {
|
|
font-size: 12px;
|
|
color: #736557
|
|
}
|
|
|
|
.ny-red {
|
|
background: var(--ny-red);
|
|
color: white;
|
|
white-space: normal;
|
|
border-radius: 7px;
|
|
font-size: 13px;
|
|
gap: 15px;
|
|
margin-top: 9px
|
|
}
|
|
|
|
.ny-red:hover {
|
|
background: #842724;
|
|
transform: translateY(-2px)
|
|
}
|
|
|
|
.ny-channel {
|
|
display: block;
|
|
font-size: 10px;
|
|
color: #766f65;
|
|
margin-top: 10px
|
|
}
|
|
|
|
.ny-closing {
|
|
background: var(--ny-ink);
|
|
color: #f8efdc;
|
|
text-align: center;
|
|
padding: 70px 20px
|
|
}
|
|
|
|
.ny-closing h2 {
|
|
color: var(--ny-gold);
|
|
font-size: 48px
|
|
}
|
|
|
|
.ny-closing p {
|
|
max-width: 620px;
|
|
margin: 0 auto 28px
|
|
}
|
|
|
|
.ny-closing .ny-text-link {
|
|
display: block;
|
|
margin-top: 20px
|
|
}
|
|
|
|
.ny-closing .ny-eyebrow {
|
|
color: #c8b68f
|
|
}
|
|
|
|
.ny-page .privacy-settings {
|
|
padding-top: 22px
|
|
}
|
|
|
|
.ny-home .benefits {
|
|
border-top: 1px solid #ded2be
|
|
}
|
|
|
|
.ny-home .btn-primary {
|
|
background: var(--ny-red)
|
|
}
|
|
|
|
.ny-weather {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 101;
|
|
overflow: hidden
|
|
}
|
|
|
|
.ny-flake {
|
|
position: absolute;
|
|
top: -30px;
|
|
left: var(--x);
|
|
color: #fff;
|
|
opacity: 0;
|
|
text-shadow: 0 1px 4px #15364466;
|
|
font-size: var(--size);
|
|
animation: ny-fall var(--duration) linear var(--delay) infinite;
|
|
will-change: transform
|
|
}
|
|
|
|
.ny-flake.ny-spark {
|
|
color: #e7bc65
|
|
}
|
|
|
|
.ny-motion {
|
|
position: fixed;
|
|
right: 16px;
|
|
bottom: 18px;
|
|
z-index: 110;
|
|
background: #18343bea;
|
|
border: 1px solid #d4b884;
|
|
color: #fff4dc;
|
|
padding: 9px 13px;
|
|
border-radius: 30px;
|
|
font-size: 11px;
|
|
box-shadow: 0 3px 16px #0002
|
|
}
|
|
|
|
.ny-paused .ny-flake,
|
|
.ny-paused .ny-star {
|
|
animation-play-state: paused
|
|
}
|
|
|
|
.ny-paused .ny-weather {
|
|
visibility: hidden
|
|
}
|
|
|
|
.ny-motion:focus-visible,
|
|
.ny-page a:focus-visible,
|
|
.ny-home a:focus-visible {
|
|
outline: 3px solid #b68c40;
|
|
outline-offset: 4px
|
|
}
|
|
|
|
@keyframes ny-fall {
|
|
0% {
|
|
transform: translate3d(0, -30px, 0) rotate(0);
|
|
opacity: 0
|
|
}
|
|
|
|
8% {
|
|
opacity: .65
|
|
}
|
|
|
|
92% {
|
|
opacity: .65
|
|
}
|
|
|
|
100% {
|
|
transform: translate3d(60px, 105vh, 0) rotate(160deg);
|
|
opacity: 0
|
|
}
|
|
}
|
|
|
|
@keyframes ny-twinkle {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: .35;
|
|
transform: scale(.8)
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.1)
|
|
}
|
|
}
|
|
|
|
@media(min-width:769px) and (max-width:1050px) {
|
|
.nav {
|
|
gap: 12px
|
|
}
|
|
|
|
.nav-link {
|
|
font-size: 12px
|
|
}
|
|
|
|
.header-inner {
|
|
gap: 12px
|
|
}
|
|
|
|
.ny-hero-grid {
|
|
gap: 20px
|
|
}
|
|
|
|
.ny-special {
|
|
gap: 30px
|
|
}
|
|
|
|
.ny-discount strong {
|
|
font-size: 80px
|
|
}
|
|
}
|
|
|
|
@media(max-width:768px) {
|
|
.ny-hero {
|
|
padding: 36px 0 38px
|
|
}
|
|
|
|
.ny-hero-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 30px
|
|
}
|
|
|
|
.ny-intro h1 {
|
|
font-size: 48px
|
|
}
|
|
|
|
.ny-intro p {
|
|
font-size: 14px
|
|
}
|
|
|
|
.ny-art img {
|
|
aspect-ratio: 16/9;
|
|
border-radius: 35px 35px 8px 8px
|
|
}
|
|
|
|
.ny-caption {
|
|
margin-top: 22px
|
|
}
|
|
|
|
.ny-selection {
|
|
padding-top: 44px;
|
|
padding-bottom: 40px
|
|
}
|
|
|
|
.ny-heading h2 {
|
|
font-size: 32px
|
|
}
|
|
|
|
.ny-cards {
|
|
grid-template-columns: 1fr;
|
|
gap: 20px
|
|
}
|
|
|
|
.ny-card-picture img {
|
|
aspect-ratio: 16/9
|
|
}
|
|
|
|
.ny-card-body {
|
|
padding: 22px
|
|
}
|
|
|
|
.ny-special {
|
|
grid-template-columns: 1fr;
|
|
gap: 26px;
|
|
padding: 25px;
|
|
margin: 0 20px 35px
|
|
}
|
|
|
|
.ny-discount {
|
|
min-height: 180px;
|
|
border-radius: 90px 90px 8px 8px
|
|
}
|
|
|
|
.ny-discount strong {
|
|
font-size: 75px;
|
|
line-height: 1.2
|
|
}
|
|
|
|
.ny-discount small {
|
|
font-size: 40px
|
|
}
|
|
|
|
.ny-terms h2 {
|
|
font-size: 30px
|
|
}
|
|
|
|
.ny-offer {
|
|
grid-template-columns: 1fr;
|
|
gap: 25px;
|
|
padding: 32px 0 40px
|
|
}
|
|
|
|
.ny-offer:nth-child(2) .ny-offer-visual {
|
|
order: 0
|
|
}
|
|
|
|
.ny-offer-visual {
|
|
position: static
|
|
}
|
|
|
|
.ny-offer-visual img {
|
|
aspect-ratio: 16/10
|
|
}
|
|
|
|
.ny-offer h2 {
|
|
font-size: 32px
|
|
}
|
|
|
|
.ny-closing {
|
|
padding: 45px 5px
|
|
}
|
|
|
|
.ny-closing h2 {
|
|
font-size: 37px
|
|
}
|
|
|
|
.ny-closing p {
|
|
font-size: 14px
|
|
}
|
|
|
|
.ny-red {
|
|
padding: 14px 17px
|
|
}
|
|
|
|
.ny-motion {
|
|
bottom: 12px;
|
|
right: 10px
|
|
}
|
|
|
|
.ny-flake:nth-child(n+19) {
|
|
display: none
|
|
}
|
|
|
|
.star-one {
|
|
left: 85%;
|
|
top: 25px
|
|
}
|
|
|
|
.star-two {
|
|
display: none
|
|
}
|
|
}
|
|
|
|
@media(prefers-reduced-motion:reduce) {
|
|
html {
|
|
scroll-behavior: auto
|
|
}
|
|
|
|
.ny-flake,
|
|
.ny-star {
|
|
animation: none !important
|
|
}
|
|
|
|
.ny-weather {
|
|
display: none
|
|
}
|
|
|
|
.ny-card,
|
|
.ny-card img,
|
|
.ny-gold,
|
|
.ny-red {
|
|
transition: none;
|
|
transform: none !important
|
|
}
|
|
}
|
|
|
|
/* Keep the supplied artwork's lettering fully visible at every width. */
|
|
.ny-art img {
|
|
aspect-ratio: 1672/941;
|
|
object-fit: contain;
|
|
border-radius: 55px 55px 10px 10px
|
|
}
|
|
|
|
@media(max-width:768px) {
|
|
.ny-art img {
|
|
border-radius: 30px 30px 8px 8px
|
|
}
|
|
}
|
|
|
|
/* Keep the closing order button distinct from the red CTA panel. */
|
|
.ny-home .cta-box .btn-primary {
|
|
background: #fff8e9;
|
|
color: #842724;
|
|
border: 2px solid #fff8e9;
|
|
box-shadow: 0 5px 18px #65100f22
|
|
}
|
|
|
|
.ny-home .cta-box .btn-primary:hover {
|
|
background: #f3d398;
|
|
color: #57201d;
|
|
border-color: #f3d398
|
|
}
|
|
|
|
.ny-home .ny-intro h1 {
|
|
font-size: clamp(30px, 3.1vw, 46px);
|
|
letter-spacing: -1.2px;
|
|
line-height: 1.15
|
|
}
|
|
|
|
.ny-hero {
|
|
scroll-margin-top: 90px
|
|
}
|
|
|
|
@media(max-width:768px) {
|
|
.ny-home .ny-intro h1 {
|
|
font-size: clamp(27px, 7.5vw, 42px);
|
|
letter-spacing: -.8px
|
|
}
|
|
}
|
|
|
|
@media(max-width:480px) {
|
|
.ny-home .btn {
|
|
max-width: 100%;
|
|
white-space: normal;
|
|
text-align: center
|
|
}
|
|
|
|
.ny-home .for-whom-card .btn {
|
|
padding-left: 18px;
|
|
padding-right: 18px
|
|
}
|
|
}
|
|
|
|
.ny-video-section {
|
|
padding-top: 10px;
|
|
padding-bottom: 65px;
|
|
scroll-margin-top: 100px
|
|
}
|
|
|
|
.ny-video-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr))
|
|
}
|
|
|
|
.ny-video-section .ny-heading p {
|
|
color: #655f56;
|
|
font-size: 14px
|
|
}
|
|
|
|
.ny-work .work-video-preview {
|
|
object-fit: contain;
|
|
background: #10252e
|
|
}
|
|
|
|
.ny-work .work-info h3 {
|
|
font-family: Georgia, serif;
|
|
font-size: 26px;
|
|
color: var(--ny-ink)
|
|
}
|
|
|
|
.ny-work .work-info p {
|
|
margin-bottom: 0
|
|
}
|
|
|
|
.ny-all-works {
|
|
text-align: center;
|
|
margin-top: 26px
|
|
}
|
|
|
|
.ny-video-section .work-tag {
|
|
background: #efe6d6;
|
|
color: #842724
|
|
}
|
|
|
|
.ny-work {
|
|
scroll-margin-top: 110px
|
|
}
|
|
|
|
@media(max-width:768px) {
|
|
.ny-video-grid {
|
|
grid-template-columns: 1fr
|
|
}
|
|
|
|
.ny-video-section {
|
|
padding-bottom: 40px
|
|
}
|
|
} |