/* 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 } }