diff --git a/html/css/new-year.css b/html/css/new-year.css index 40e997f..c064e5c 100644 --- a/html/css/new-year.css +++ b/html/css/new-year.css @@ -1,25 +1,847 @@ /* 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}} +: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}} +.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}} +.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 + } +} \ No newline at end of file diff --git a/html/css/style.css b/html/css/style.css index 75cea59..129bf5f 100644 --- a/html/css/style.css +++ b/html/css/style.css @@ -1,6 +1,17 @@ /* ===== RESET & BASE ===== */ -*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } -html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; + -webkit-text-size-adjust: 100%; +} + body { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; @@ -10,10 +21,29 @@ body { min-height: 100vh; overflow-wrap: break-word; } -img { max-width: 100%; height: auto; display: block; } -a { color: inherit; text-decoration: none; transition: all 0.2s ease; } -ul { list-style: none; } -button { font-family: inherit; cursor: pointer; border: none; background: none; } + +img { + max-width: 100%; + height: auto; + display: block; +} + +a { + color: inherit; + text-decoration: none; + transition: all 0.2s ease; +} + +ul { + list-style: none; +} + +button { + font-family: inherit; + cursor: pointer; + border: none; + background: none; +} /* ===== VARIABLES ===== */ :root { @@ -27,12 +57,19 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; --font-hand: 'Caveat', cursive; --container: 1200px; --radius: 16px; - --shadow: 0 4px 24px rgba(0,0,0,0.06); - --shadow-hover: 0 8px 32px rgba(0,0,0,0.1); + --shadow: 0 4px 24px rgba(0, 0, 0, 0.06); + --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.1); } -.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; } -.accent { color: var(--color-accent); } +.container { + max-width: var(--container); + margin: 0 auto; + padding: 0 20px; +} + +.accent { + color: var(--color-accent); +} /* ===== BUTTONS ===== */ .btn { @@ -48,11 +85,33 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; border: 2px solid transparent; white-space: nowrap; } -.btn-primary { background: var(--color-accent); color: #fff; } -.btn-primary:hover { background: #B30000; transform: translateY(-2px); box-shadow: var(--shadow-hover); } -.btn-outline { background: transparent; color: var(--color-text); border-color: var(--color-text); } -.btn-outline:hover { background: var(--color-text); color: #fff; } -.btn-lg { padding: 18px 36px; font-size: 16px; } + +.btn-primary { + background: var(--color-accent); + color: #fff; +} + +.btn-primary:hover { + background: #B30000; + transform: translateY(-2px); + box-shadow: var(--shadow-hover); +} + +.btn-outline { + background: transparent; + color: var(--color-text); + border-color: var(--color-text); +} + +.btn-outline:hover { + background: var(--color-text); + color: #fff; +} + +.btn-lg { + padding: 18px 36px; + font-size: 16px; +} /* ===== HEADER ===== */ .header { @@ -64,6 +123,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; z-index: 100; border-bottom: 1px solid var(--color-border); } + .header-inner { display: flex; align-items: center; @@ -71,25 +131,71 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 16px 20px; gap: 24px; } -.logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 20px; letter-spacing: 1px; } -.logo-bird { font-size: 28px; } -.nav { display: flex; gap: 28px; } -.nav-link { font-weight: 500; font-size: 15px; position: relative; } -.nav-link:hover, .nav-link.active { color: var(--color-accent); } + +.logo { + display: flex; + align-items: center; + gap: 8px; + font-weight: 800; + font-size: 20px; + letter-spacing: 1px; +} + +.logo-bird { + font-size: 28px; +} + +.nav { + display: flex; + gap: 28px; +} + +.nav-link { + font-weight: 500; + font-size: 15px; + position: relative; +} + +.nav-link:hover, +.nav-link.active { + color: var(--color-accent); +} + .nav-link.active::after { content: ''; position: absolute; - bottom: -6px; left: 0; right: 0; + bottom: -6px; + left: 0; + right: 0; height: 2px; background: var(--color-accent); border-radius: 2px; } -.burger { display: none; flex-direction: column; gap: 5px; padding: 8px; } -.burger span { display: block; width: 24px; height: 2px; background: var(--color-text); transition: 0.3s; } + +.burger { + display: none; + flex-direction: column; + gap: 5px; + padding: 8px; +} + +.burger span { + display: block; + width: 24px; + height: 2px; + background: var(--color-text); + transition: 0.3s; +} /* ===== HERO ===== */ -.hero { padding: 80px 0 60px; } -.hero-content { max-width: 800px; } +.hero { + padding: 80px 0 60px; +} + +.hero-content { + max-width: 800px; +} + .hero-tag { display: inline-block; padding: 6px 16px; @@ -100,6 +206,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; font-weight: 600; margin-bottom: 24px; } + .hero-title { font-size: clamp(32px, 5vw, 56px); font-weight: 800; @@ -107,19 +214,43 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; margin-bottom: 20px; letter-spacing: -0.02em; } + .hero-subtitle { font-size: clamp(16px, 2vw, 19px); color: var(--color-text-muted); margin-bottom: 32px; max-width: 640px; } -.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; } -.hero-stats { display: flex; gap: 40px; flex-wrap: wrap; } -.stat-num { font-size: 28px; font-weight: 800; color: var(--color-accent); } -.stat-label { font-size: 13px; color: var(--color-text-muted); } + +.hero-actions { + display: flex; + gap: 16px; + flex-wrap: wrap; + margin-bottom: 48px; +} + +.hero-stats { + display: flex; + gap: 40px; + flex-wrap: wrap; +} + +.stat-num { + font-size: 28px; + font-weight: 800; + color: var(--color-accent); +} + +.stat-label { + font-size: 13px; + color: var(--color-text-muted); +} /* ===== SECTIONS ===== */ -.section { padding: 80px 0; } +.section { + padding: 80px 0; +} + .section-title { font-size: clamp(28px, 4vw, 42px); font-weight: 800; @@ -127,30 +258,69 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; text-align: center; letter-spacing: -0.02em; } -.section-subtitle { text-align: center; color: var(--color-text-muted); margin-bottom: 48px; font-size: 17px; } + +.section-subtitle { + text-align: center; + color: var(--color-text-muted); + margin-bottom: 48px; + font-size: 17px; +} /* ===== BENEFITS ===== */ -.benefits { background: var(--color-bg-alt); } -.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px; margin-top: 48px; } +.benefits { + background: var(--color-bg-alt); +} + +.benefits-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); + gap: 24px; + margin-top: 48px; +} + .benefit-card { padding: 32px 24px; background: var(--color-bg); border-radius: var(--radius); transition: 0.3s; } -.benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } -.benefit-icon { font-size: 36px; margin-bottom: 16px; } -.benefit-card h3 { font-size: 19px; margin-bottom: 8px; font-weight: 700; } -.benefit-card p { color: var(--color-text-muted); font-size: 15px; } + +.benefit-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow); +} + +.benefit-icon { + font-size: 36px; + margin-bottom: 16px; +} + +.benefit-card h3 { + font-size: 19px; + margin-bottom: 8px; + font-weight: 700; +} + +.benefit-card p { + color: var(--color-text-muted); + font-size: 15px; +} /* ===== FOR WHOM ===== */ -.for-whom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; margin-top: 48px; } +.for-whom-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); + gap: 24px; + margin-top: 48px; +} + .for-whom-card { padding: 40px 32px; background: var(--color-bg-alt); border-radius: var(--radius); border: 1px solid var(--color-border); } + .for-whom-tag { display: inline-block; padding: 6px 14px; @@ -160,13 +330,22 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; font-weight: 600; margin-bottom: 16px; } -.for-whom-card h3 { font-size: 24px; margin-bottom: 16px; } -.for-whom-card ul { margin-bottom: 24px; } + +.for-whom-card h3 { + font-size: 24px; + margin-bottom: 16px; +} + +.for-whom-card ul { + margin-bottom: 24px; +} + .for-whom-card li { padding: 8px 0 8px 24px; position: relative; font-size: 15px; } + .for-whom-card li::before { content: '✓'; position: absolute; @@ -176,8 +355,17 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; } /* ===== PRICING ===== */ -.pricing { background: var(--color-bg-alt); } -.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; margin-top: 48px; } +.pricing { + background: var(--color-bg-alt); +} + +.pricing-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); + gap: 24px; + margin-top: 48px; +} + .price-card { padding: 36px 28px; background: var(--color-bg); @@ -188,11 +376,21 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; flex-direction: column; transition: 0.3s; } -.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } -.price-card.featured { border-color: var(--color-accent); background: #fff; } + +.price-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow); +} + +.price-card.featured { + border-color: var(--color-accent); + background: #fff; +} + .price-badge { position: absolute; - top: -12px; left: 50%; + top: -12px; + left: 50%; transform: translateX(-50%); background: var(--color-accent); color: #fff; @@ -201,10 +399,33 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; font-size: 12px; font-weight: 600; } -.price-name { font-size: 24px; font-weight: 800; margin-bottom: 4px; } -.price-desc { color: var(--color-text-muted); font-size: 14px; margin-bottom: 20px; } -.price-features { font-size: 14px; margin-bottom: 24px; flex-grow: 1; color: var(--color-text-muted); } -.price-value { font-size: 32px; font-weight: 800; color: var(--color-accent); margin-bottom: 20px; } + +.price-name { + font-size: 24px; + font-weight: 800; + margin-bottom: 4px; +} + +.price-desc { + color: var(--color-text-muted); + font-size: 14px; + margin-bottom: 20px; +} + +.price-features { + font-size: 14px; + margin-bottom: 24px; + flex-grow: 1; + color: var(--color-text-muted); +} + +.price-value { + font-size: 32px; + font-weight: 800; + color: var(--color-accent); + margin-bottom: 20px; +} + .pricing-note { margin-top: 40px; padding: 24px; @@ -212,16 +433,27 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; border-radius: var(--radius); text-align: center; } -.pricing-note p { margin: 6px 0; font-size: 15px; } + +.pricing-note p { + margin: 6px 0; + font-size: 15px; +} /* ===== PROCESS ===== */ -.process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; margin-top: 48px; } +.process-steps { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); + gap: 24px; + margin-top: 48px; +} + .step { padding: 28px 20px; background: var(--color-bg-alt); border-radius: var(--radius); position: relative; } + .step-num { font-family: var(--font-hand); font-size: 48px; @@ -229,11 +461,22 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; line-height: 1; margin-bottom: 12px; } -.step h3 { font-size: 17px; margin-bottom: 8px; } -.step p { font-size: 14px; color: var(--color-text-muted); } + +.step h3 { + font-size: 17px; + margin-bottom: 8px; +} + +.step p { + font-size: 14px; + color: var(--color-text-muted); +} /* ===== CTA ===== */ -.cta { background: var(--color-bg-alt); } +.cta { + background: var(--color-bg-alt); +} + .cta-box { background: linear-gradient(135deg, var(--color-accent) 0%, #B30000 100%); color: #fff; @@ -241,20 +484,61 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; border-radius: var(--radius); text-align: center; } -.cta-box h2 { font-size: clamp(24px, 4vw, 36px); margin-bottom: 12px; } -.cta-box p { font-size: 17px; margin-bottom: 28px; opacity: 0.95; } -.cta-box .btn-primary { background: #fff; color: var(--color-accent); } -.cta-box .btn-primary:hover { background: var(--color-bg); } + +.cta-box h2 { + font-size: clamp(24px, 4vw, 36px); + margin-bottom: 12px; +} + +.cta-box p { + font-size: 17px; + margin-bottom: 28px; + opacity: 0.95; +} + +.cta-box .btn-primary { + background: #fff; + color: var(--color-accent); +} + +.cta-box .btn-primary:hover { + background: var(--color-bg); +} /* ===== PAGE HERO ===== */ -.page-hero { padding: 80px 0 40px; text-align: center; } -.page-title { font-size: clamp(32px, 5vw, 48px); font-weight: 800; margin-bottom: 16px; } -.page-subtitle { font-size: 18px; color: var(--color-text-muted); max-width: 640px; margin: 0 auto; } +.page-hero { + padding: 80px 0 40px; + text-align: center; +} + +.page-title { + font-size: clamp(32px, 5vw, 48px); + font-weight: 800; + margin-bottom: 16px; +} + +.page-subtitle { + font-size: 18px; + color: var(--color-text-muted); + max-width: 640px; + margin: 0 auto; +} /* ===== SERVICES PAGE ===== */ -.service-block { padding: 60px 0; } -.service-block.alt { background: var(--color-bg-alt); } -.service-head { text-align: center; max-width: 720px; margin: 0 auto 48px; } +.service-block { + padding: 60px 0; +} + +.service-block.alt { + background: var(--color-bg-alt); +} + +.service-head { + text-align: center; + max-width: 720px; + margin: 0 auto 48px; +} + .service-tag { display: inline-block; padding: 6px 16px; @@ -265,19 +549,49 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; font-weight: 600; margin-bottom: 16px; } -.service-head h2 { font-size: clamp(26px, 4vw, 36px); margin-bottom: 12px; } -.service-lead { font-size: 17px; color: var(--color-text-muted); } -.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; margin-bottom: 32px; } + +.service-head h2 { + font-size: clamp(26px, 4vw, 36px); + margin-bottom: 12px; +} + +.service-lead { + font-size: 17px; + color: var(--color-text-muted); +} + +.service-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); + gap: 20px; + margin-bottom: 32px; +} + .service-card { padding: 28px 24px; background: var(--color-bg); border-radius: var(--radius); border: 1px solid var(--color-border); } -.service-block.alt .service-card { background: var(--color-bg); } -.service-card h3 { font-size: 18px; margin-bottom: 10px; } -.service-card p { font-size: 14px; color: var(--color-text-muted); } -.service-cta { text-align: center; margin-top: 32px; } + +.service-block.alt .service-card { + background: var(--color-bg); +} + +.service-card h3 { + font-size: 18px; + margin-bottom: 10px; +} + +.service-card p { + font-size: 14px; + color: var(--color-text-muted); +} + +.service-cta { + text-align: center; + margin-top: 32px; +} /* ===== EXTRAS ===== */ .extras-grid { @@ -289,6 +603,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; margin-left: auto; margin-right: auto; } + .extra-item { display: flex; justify-content: space-between; @@ -298,11 +613,24 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; border-radius: 12px; border: 1px solid var(--color-border); } -.extra-name { font-size: 15px; font-weight: 500; } -.extra-price { font-weight: 700; color: var(--color-accent); } + +.extra-name { + font-size: 15px; + font-weight: 500; +} + +.extra-price { + font-weight: 700; + color: var(--color-accent); +} /* ===== PORTFOLIO ===== */ -.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; } +.portfolio-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); + gap: 24px; +} + .work-card { background: var(--color-bg-alt); border-radius: var(--radius); @@ -310,7 +638,12 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; transition: 0.3s; border: 1px solid var(--color-border); } -.work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } + +.work-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow); +} + .work-media { aspect-ratio: 16/9; background: linear-gradient(135deg, #2C2C2C, #444); @@ -319,8 +652,16 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; justify-content: center; color: #fff; } -.work-placeholder { font-size: 18px; opacity: 0.7; } -.work-info { padding: 24px; } + +.work-placeholder { + font-size: 18px; + opacity: 0.7; +} + +.work-info { + padding: 24px; +} + .work-tag { display: inline-block; padding: 4px 12px; @@ -331,12 +672,33 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; font-weight: 600; margin-bottom: 12px; } -.work-info h3 { font-size: 19px; margin-bottom: 8px; } -.work-info p { font-size: 14px; color: var(--color-text-muted); margin-bottom: 16px; } -.work-meta { display: flex; gap: 16px; font-size: 13px; color: var(--color-text-muted); padding-top: 16px; border-top: 1px solid var(--color-border); } + +.work-info h3 { + font-size: 19px; + margin-bottom: 8px; +} + +.work-info p { + font-size: 14px; + color: var(--color-text-muted); + margin-bottom: 16px; +} + +.work-meta { + display: flex; + gap: 16px; + font-size: 13px; + color: var(--color-text-muted); + padding-top: 16px; + border-top: 1px solid var(--color-border); +} /* ===== PORTFOLIO VIDEO ===== */ -.work-media { position: relative; overflow: hidden; } +.work-media { + position: relative; + overflow: hidden; +} + .work-video { position: relative; display: block; @@ -349,7 +711,12 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; cursor: pointer; text-align: left; } -.work-video:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; } + +.work-video:focus-visible { + outline: 3px solid var(--color-accent); + outline-offset: -3px; +} + .work-video-preview { display: block; width: 100%; @@ -358,37 +725,53 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; background: #1f1f1f; transition: transform 0.4s ease; } -.work-card:hover .work-video-preview { transform: scale(1.04); } + +.work-card:hover .work-video-preview { + transform: scale(1.04); +} + .work-video::after { content: ''; position: absolute; inset: 0; - background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 45%); + background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 45%); pointer-events: none; } + .work-play { position: absolute; - top: 50%; left: 50%; - width: 64px; height: 64px; + top: 50%; + left: 50%; + width: 64px; + height: 64px; margin: -32px 0 0 -32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; - background: rgba(255,255,255,0.92); + background: rgba(255, 255, 255, 0.92); color: var(--color-accent); - box-shadow: 0 6px 24px rgba(0,0,0,0.3); + box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3); transition: transform 0.25s ease, background 0.25s ease; z-index: 1; } -.work-play svg { margin-left: 3px; } -.work-video:hover .work-play { transform: scale(1.1); background: #fff; } + +.work-play svg { + margin-left: 3px; +} + +.work-video:hover .work-play { + transform: scale(1.1); + background: #fff; +} + .work-video-label { position: absolute; - left: 16px; bottom: 12px; + left: 16px; + bottom: 12px; font-size: 13px; font-weight: 600; - text-shadow: 0 1px 4px rgba(0,0,0,0.6); + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); z-index: 1; } @@ -404,14 +787,20 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } -.video-modal.open { opacity: 1; visibility: visible; } + +.video-modal.open { + opacity: 1; + visibility: visible; +} + .video-modal-backdrop { position: absolute; inset: 0; - background: rgba(0,0,0,0.92); + background: rgba(0, 0, 0, 0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } + .video-modal-dialog { position: relative; width: 100%; @@ -421,7 +810,11 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; transform: scale(0.96); transition: transform 0.3s ease; } -.video-modal.open .video-modal-dialog { transform: scale(1); } + +.video-modal.open .video-modal-dialog { + transform: scale(1); +} + .video-modal-bar { display: flex; align-items: center; @@ -430,6 +823,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 14px 20px; color: #fff; } + .video-modal-title { font-size: 16px; font-weight: 600; @@ -437,21 +831,37 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; overflow: hidden; text-overflow: ellipsis; } -.video-modal-actions { display: flex; gap: 8px; flex-shrink: 0; } + +.video-modal-actions { + display: flex; + gap: 8px; + flex-shrink: 0; +} + .video-modal-btn { - width: 44px; height: 44px; + width: 44px; + height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; - background: rgba(255,255,255,0.12); + background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } -.video-modal-btn:hover { background: rgba(255,255,255,0.25); transform: scale(1.06); } -.video-modal-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } + +.video-modal-btn:hover { + background: rgba(255, 255, 255, 0.25); + transform: scale(1.06); +} + +.video-modal-btn:focus-visible { + outline: 2px solid #fff; + outline-offset: 2px; +} + .video-modal-stage { flex: 1; min-height: 0; @@ -460,6 +870,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; justify-content: center; padding: 0 20px 20px; } + .video-modal-stage video { display: block; max-width: 100%; @@ -469,33 +880,84 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; object-fit: contain; border-radius: 12px; background: #000; - box-shadow: 0 20px 60px rgba(0,0,0,0.6); + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); outline: none; } -.video-modal-stage video:fullscreen { border-radius: 0; } -body.video-modal-open { overflow: hidden; } + +.video-modal-stage video:fullscreen { + border-radius: 0; +} + +body.video-modal-open { + overflow: hidden; +} @media (max-width: 768px) { - .work-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; } - .video-modal-bar { padding: 10px 12px; } - .video-modal-title { font-size: 14px; } - .video-modal-stage { padding: 0 8px 12px; } - .video-modal-stage video { border-radius: 8px; } + .work-play { + width: 56px; + height: 56px; + margin: -28px 0 0 -28px; + } + + .video-modal-bar { + padding: 10px 12px; + } + + .video-modal-title { + font-size: 14px; + } + + .video-modal-stage { + padding: 0 8px 12px; + } + + .video-modal-stage video { + border-radius: 8px; + } } /* ===== REVIEWS ===== */ -.reviews { background: var(--color-bg-alt); } -.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; margin-top: 48px; } +.reviews { + background: var(--color-bg-alt); +} + +.reviews-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); + gap: 24px; + margin-top: 48px; +} + .review-card { padding: 28px 24px; background: var(--color-bg); border-radius: var(--radius); border: 1px solid var(--color-border); } -.review-stars { color: #FFB800; font-size: 18px; margin-bottom: 12px; letter-spacing: 2px; } -.review-text { font-size: 15px; margin-bottom: 20px; font-style: italic; } -.review-name { font-weight: 700; font-size: 15px; } -.review-role { font-size: 13px; color: var(--color-text-muted); } + +.review-stars { + color: #FFB800; + font-size: 18px; + margin-bottom: 12px; + letter-spacing: 2px; +} + +.review-text { + font-size: 15px; + margin-bottom: 20px; + font-style: italic; +} + +.review-name { + font-weight: 700; + font-size: 15px; +} + +.review-role { + font-size: 13px; + color: var(--color-text-muted); +} + .cta-inline { margin-top: 48px; text-align: center; @@ -503,27 +965,59 @@ body.video-modal-open { overflow: hidden; } background: var(--color-accent-soft); border-radius: var(--radius); } -.cta-inline h3 { font-size: 24px; margin-bottom: 8px; } -.cta-inline p { margin-bottom: 20px; color: var(--color-text-muted); } + +.cta-inline h3 { + font-size: 24px; + margin-bottom: 8px; +} + +.cta-inline p { + margin-bottom: 20px; + color: var(--color-text-muted); +} /* ===== CONTACTS (TAPLINK) ===== */ -.contacts-page { background: linear-gradient(180deg, #F9F7F0 0%, #F5D5C8 100%); min-height: 100vh; } +.contacts-page { + background: linear-gradient(180deg, #F9F7F0 0%, #F5D5C8 100%); + min-height: 100vh; +} + .taplink { max-width: 480px; margin: 0 auto; padding: 40px 20px; text-align: center; } -.taplink-logo { margin-bottom: 32px; } -.logo-bird-big { font-size: 64px; display: block; margin-bottom: 12px; } + +.taplink-logo { + margin-bottom: 32px; +} + +.logo-bird-big { + font-size: 64px; + display: block; + margin-bottom: 12px; +} + .taplink-title { font-size: 36px; font-weight: 800; letter-spacing: 2px; margin-bottom: 8px; } -.taplink-subtitle { color: var(--color-text-muted); font-size: 15px; } -.taplink-links { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; } + +.taplink-subtitle { + color: var(--color-text-muted); + font-size: 15px; +} + +.taplink-links { + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 32px; +} + .taplink-btn { display: flex; align-items: center; @@ -535,20 +1029,67 @@ body.video-modal-open { overflow: hidden; } transition: 0.25s; text-align: left; } -.taplink-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } -.taplink-icon { font-size: 28px; flex-shrink: 0; } -.taplink-text { display: flex; flex-direction: column; } -.taplink-text strong { font-size: 16px; font-weight: 700; } -.taplink-text span { font-size: 13px; color: var(--color-text-muted); } -.taplink-telegram:hover { background: #229ED9; color: #fff; } -.taplink-telegram:hover .taplink-text span { color: rgba(255,255,255,0.8); } -.taplink-whatsapp:hover { background: #25D366; color: #fff; } -.taplink-whatsapp:hover .taplink-text span { color: rgba(255,255,255,0.8); } -.taplink-instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; } -.taplink-instagram:hover .taplink-text span { color: rgba(255,255,255,0.8); } -.taplink-vk:hover { background: #0077FF; color: #fff; } -.taplink-vk:hover .taplink-text span { color: rgba(255,255,255,0.8); } +.taplink-btn:hover { + transform: translateY(-3px); + box-shadow: var(--shadow-hover); +} + +.taplink-icon { + font-size: 28px; + flex-shrink: 0; +} + +.taplink-text { + display: flex; + flex-direction: column; +} + +.taplink-text strong { + font-size: 16px; + font-weight: 700; +} + +.taplink-text span { + font-size: 13px; + color: var(--color-text-muted); +} + +.taplink-telegram:hover { + background: #229ED9; + color: #fff; +} + +.taplink-telegram:hover .taplink-text span { + color: rgba(255, 255, 255, 0.8); +} + +.taplink-whatsapp:hover { + background: #25D366; + color: #fff; +} + +.taplink-whatsapp:hover .taplink-text span { + color: rgba(255, 255, 255, 0.8); +} + +.taplink-instagram:hover { + background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); + color: #fff; +} + +.taplink-instagram:hover .taplink-text span { + color: rgba(255, 255, 255, 0.8); +} + +.taplink-vk:hover { + background: #0077FF; + color: #fff; +} + +.taplink-vk:hover .taplink-text span { + color: rgba(255, 255, 255, 0.8); +} .taplink-info { background: #fff; @@ -557,8 +1098,17 @@ body.video-modal-open { overflow: hidden; } margin-bottom: 24px; text-align: left; } -.taplink-info h3 { font-size: 18px; margin-bottom: 12px; text-align: center; } -.taplink-info li { padding: 6px 0; font-size: 14px; } + +.taplink-info h3 { + font-size: 18px; + margin-bottom: 12px; + text-align: center; +} + +.taplink-info li { + padding: 6px 0; + font-size: 14px; +} .taplink-legal { display: flex; @@ -567,29 +1117,111 @@ body.video-modal-open { overflow: hidden; } margin-bottom: 16px; font-size: 13px; } -.taplink-legal a { color: var(--color-text-muted); } -.taplink-legal a:hover { color: var(--color-accent); } -.taplink-footer { font-size: 12px; color: var(--color-text-muted); } + +.taplink-legal a { + color: var(--color-text-muted); +} + +.taplink-legal a:hover { + color: var(--color-accent); +} + +.taplink-footer { + font-size: 12px; + color: var(--color-text-muted); +} /* ===== LEGAL PAGE ===== */ -.legal-page { padding: 60px 0 80px; } -.legal-page .container { max-width: 800px; } -.legal-section { margin-bottom: 48px; } -.legal-section h2 { font-size: 28px; margin-bottom: 8px; } -.legal-section h3 { font-size: 18px; margin: 24px 0 10px; color: var(--color-accent); } -.legal-section p, .legal-section li { font-size: 15px; margin-bottom: 10px; } -.legal-section ul { padding-left: 20px; list-style: disc; } -.legal-date { color: var(--color-text-muted); font-size: 14px; font-style: italic; margin-bottom: 20px; } +.legal-page { + padding: 60px 0 80px; +} + +.legal-page .container { + max-width: 800px; +} + +.legal-section { + margin-bottom: 48px; +} + +.legal-section h2 { + font-size: 28px; + margin-bottom: 8px; +} + +.legal-section h3 { + font-size: 18px; + margin: 24px 0 10px; + color: var(--color-accent); +} + +.legal-section p, +.legal-section li { + font-size: 15px; + margin-bottom: 10px; +} + +.legal-section ul { + padding-left: 20px; + list-style: disc; +} + +.legal-date { + color: var(--color-text-muted); + font-size: 14px; + font-style: italic; + margin-bottom: 20px; +} /* ===== FOOTER ===== */ -.footer { background: #1A1A1A; color: #ccc; padding: 60px 0 0; margin-top: 40px; } -.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; } -.footer .logo { color: #fff; margin-bottom: 12px; } -.footer-about { font-size: 14px; color: #999; } -.footer h2 { color: #fff; font-size: 15px; margin-bottom: 16px; } -.footer-col a { display: block; padding: 4px 0; font-size: 14px; color: #999; } -.footer-col a:hover { color: var(--color-accent); } -.footer-bottom { border-top: 1px solid #333; padding: 20px 0; text-align: center; font-size: 13px; color: #666; } +.footer { + background: #1A1A1A; + color: #ccc; + padding: 60px 0 0; + margin-top: 40px; +} + +.footer-inner { + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr; + gap: 32px; + padding-bottom: 40px; +} + +.footer .logo { + color: #fff; + margin-bottom: 12px; +} + +.footer-about { + font-size: 14px; + color: #999; +} + +.footer h2 { + color: #fff; + font-size: 15px; + margin-bottom: 16px; +} + +.footer-col a { + display: block; + padding: 4px 0; + font-size: 14px; + color: #999; +} + +.footer-col a:hover { + color: var(--color-accent); +} + +.footer-bottom { + border-top: 1px solid #333; + padding: 20px 0; + text-align: center; + font-size: 13px; + color: #666; +} /* ===== COOKIE BANNER ===== */ .cookie-banner { @@ -601,7 +1233,7 @@ body.video-modal-open { overflow: hidden; } background: #fff; padding: 16px 20px; border-radius: 12px; - box-shadow: 0 8px 32px rgba(0,0,0,0.15); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); display: flex; align-items: center; gap: 16px; @@ -609,10 +1241,25 @@ body.video-modal-open { overflow: hidden; } transform: translateY(150%); transition: transform 0.4s ease; } -.cookie-banner.show { transform: translateY(0); } -.cookie-banner.hidden { display: none; } -.cookie-text { font-size: 13px; flex-grow: 1; } -.cookie-text a { color: var(--color-accent); text-decoration: underline; } + +.cookie-banner.show { + transform: translateY(0); +} + +.cookie-banner.hidden { + display: none; +} + +.cookie-text { + font-size: 13px; + flex-grow: 1; +} + +.cookie-text a { + color: var(--color-accent); + text-decoration: underline; +} + .cookie-btn { background: var(--color-accent); color: #fff; @@ -622,90 +1269,333 @@ body.video-modal-open { overflow: hidden; } font-weight: 600; flex-shrink: 0; } -.cookie-btn:hover { background: #B30000; } + +.cookie-btn:hover { + background: #B30000; +} /* ===== RESPONSIVE ===== */ @media (max-width: 900px) { - .footer-inner { grid-template-columns: 1fr 1fr; } + .footer-inner { + grid-template-columns: 1fr 1fr; + } } @media (max-width: 768px) { - .nav { + .nav { display: none; position: absolute; top: 100%; - left: 0; right: 0; + left: 0; + right: 0; background: var(--color-bg); flex-direction: column; padding: 20px; gap: 16px; border-bottom: 1px solid var(--color-border); } - .nav.open { display: flex; } - .burger { display: flex; } - .burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } - .burger.open span:nth-child(2) { opacity: 0; } - .burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } - .header .btn { display: none; } - .hero { padding: 40px 0; } - .section { padding: 50px 0; } - .hero-stats { gap: 24px; } - .stat-num { font-size: 22px; } - .footer-inner { grid-template-columns: 1fr; gap: 24px; } - .cta-box { padding: 40px 24px; } - .cookie-banner { flex-direction: column; align-items: stretch; gap: 12px; } + + .nav.open { + display: flex; + } + + .burger { + display: flex; + } + + .burger.open span:nth-child(1) { + transform: translateY(7px) rotate(45deg); + } + + .burger.open span:nth-child(2) { + opacity: 0; + } + + .burger.open span:nth-child(3) { + transform: translateY(-7px) rotate(-45deg); + } + + .header .btn { + display: none; + } + + .hero { + padding: 40px 0; + } + + .section { + padding: 50px 0; + } + + .hero-stats { + gap: 24px; + } + + .stat-num { + font-size: 22px; + } + + .footer-inner { + grid-template-columns: 1fr; + gap: 24px; + } + + .cta-box { + padding: 40px 24px; + } + + .cookie-banner { + flex-direction: column; + align-items: stretch; + gap: 12px; + } } @media (max-width: 480px) { - .hero-actions { flex-direction: column; } - .hero-actions .btn { width: 100%; } - .btn-lg { padding: 16px 24px; font-size: 15px; } - .taplink-title { font-size: 28px; } - .taplink-btn { padding: 14px 18px; } + .hero-actions { + flex-direction: column; + } + + .hero-actions .btn { + width: 100%; + } + + .btn-lg { + padding: 16px 24px; + font-size: 15px; + } + + .taplink-title { + font-size: 28px; + } + + .taplink-btn { + padding: 14px 18px; + } } + /* Accessibility and compact-screen refinements */ -[hidden] { display: none !important; } -:focus-visible { outline: 3px solid #8d0000; outline-offset: 4px; } -[id] { scroll-margin-top: 100px; } -.skip-link { position: fixed; top: 8px; left: 8px; padding: 12px 20px; background: #fff; z-index: 2000; transform: translateY(-160%); } -.skip-link:focus { transform: none; } -.breadcrumbs { padding-top: 24px; padding-bottom: 8px; font-size: 13px; color: #555; text-align: left; } -.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } -.breadcrumbs li + li::before { content: '/'; margin-right: 8px; } -.breadcrumbs a, .service-summary a, .detail-link a, .faq a, .contact-navigation a { text-decoration: underline; text-underline-offset: 3px; } -.service-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding-top: 24px; padding-bottom: 24px; } -.service-links a { padding: 12px 18px; background: #fff; border: 1px solid #b8a99f; border-radius: 12px; } -.service-links a:hover { border-color: var(--color-accent); } -.service-summary { max-width: 800px; margin: auto; padding: 24px; background: #fff; border-radius: 16px; } -.service-summary h2 { font-size: 24px; margin-bottom: 12px; } -.service-summary p { margin-bottom: 20px; } -.detail-link { margin-bottom: 20px; } -.faq { max-width: 850px; } -.faq details { padding: 20px; background: #fff; border-bottom: 1px solid #ddd; } -.faq summary { font-weight: 700; cursor: pointer; min-height: 32px; } -.faq p { margin-top: 12px; } -.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; } -.cookie-btn { min-height: 44px; } -.cookie-decline { background: #eee; color: #222; } -.cookie-decline:hover { background: #ddd; } -.privacy-settings { padding-top: 24px; padding-bottom: 24px; } -.privacy-settings button { text-decoration: underline; font-size: 13px; min-height: 44px; color: #555; } -.taplink-info h2 { font-size: 18px; margin-bottom: 12px; text-align: center; } -.taplink-legal { flex-wrap: wrap; } -.taplink-whatsapp:hover { background: #137c3a; } -.taplink-telegram:hover { background: #136c99; } -.extra-item { gap: 16px; flex-wrap: wrap; } -.footer-bottom { color: #aaa; } -.contact-navigation { line-height: 2; } +[hidden] { + display: none !important; +} + +:focus-visible { + outline: 3px solid #8d0000; + outline-offset: 4px; +} + +[id] { + scroll-margin-top: 100px; +} + +.skip-link { + position: fixed; + top: 8px; + left: 8px; + padding: 12px 20px; + background: #fff; + z-index: 2000; + transform: translateY(-160%); +} + +.skip-link:focus { + transform: none; +} + +.breadcrumbs { + padding-top: 24px; + padding-bottom: 8px; + font-size: 13px; + color: #555; + text-align: left; +} + +.breadcrumbs ol { + list-style: none; + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.breadcrumbs li+li::before { + content: '/'; + margin-right: 8px; +} + +.breadcrumbs a, +.service-summary a, +.detail-link a, +.faq a, +.contact-navigation a { + text-decoration: underline; + text-underline-offset: 3px; +} + +.service-links { + display: flex; + flex-wrap: wrap; + gap: 12px; + justify-content: center; + padding-top: 24px; + padding-bottom: 24px; +} + +.service-links a { + padding: 12px 18px; + background: #fff; + border: 1px solid #b8a99f; + border-radius: 12px; +} + +.service-links a:hover { + border-color: var(--color-accent); +} + +.service-summary { + max-width: 800px; + margin: auto; + padding: 24px; + background: #fff; + border-radius: 16px; +} + +.service-summary h2 { + font-size: 24px; + margin-bottom: 12px; +} + +.service-summary p { + margin-bottom: 20px; +} + +.detail-link { + margin-bottom: 20px; +} + +.faq { + max-width: 850px; +} + +.faq details { + padding: 20px; + background: #fff; + border-bottom: 1px solid #ddd; +} + +.faq summary { + font-weight: 700; + cursor: pointer; + min-height: 32px; +} + +.faq p { + margin-top: 12px; +} + +.cookie-actions { + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.cookie-btn { + min-height: 44px; +} + +.cookie-decline { + background: #eee; + color: #222; +} + +.cookie-decline:hover { + background: #ddd; +} + +.privacy-settings { + padding-top: 24px; + padding-bottom: 24px; +} + +.privacy-settings button { + text-decoration: underline; + font-size: 13px; + min-height: 44px; + color: #555; +} + +.taplink-info h2 { + font-size: 18px; + margin-bottom: 12px; + text-align: center; +} + +.taplink-legal { + flex-wrap: wrap; +} + +.taplink-whatsapp:hover { + background: #137c3a; +} + +.taplink-telegram:hover { + background: #136c99; +} + +.extra-item { + gap: 16px; + flex-wrap: wrap; +} + +.footer-bottom { + color: #aaa; +} + +.contact-navigation { + line-height: 2; +} + @media (max-width: 768px) { - .header-inner { flex-wrap: wrap; } - html:not(.js-menu) .nav { display: flex; position: static; width: 100%; order: 3; } - html:not(.js-menu) .burger { display: none; } - .nav-link { padding: 8px 0; } - .page-hero { padding-top: 36px; } - .cookie-banner { max-height: 60vh; overflow: auto; bottom: 12px; left: 12px; right: 12px; } + .header-inner { + flex-wrap: wrap; + } + + html:not(.js-menu) .nav { + display: flex; + position: static; + width: 100%; + order: 3; + } + + html:not(.js-menu) .burger { + display: none; + } + + .nav-link { + padding: 8px 0; + } + + .page-hero { + padding-top: 36px; + } + + .cookie-banner { + max-height: 60vh; + overflow: auto; + bottom: 12px; + left: 12px; + right: 12px; + } } + @media (prefers-reduced-motion: reduce) { - html { scroll-behavior: auto; } - *, *::before, *::after { animation: none !important; transition: none !important; } -} + html { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation: none !important; + transition: none !important; + } +} \ No newline at end of file diff --git a/html/index.html b/html/index.html index e9f486e..8195c0c 100644 --- a/html/index.html +++ b/html/index.html @@ -290,10 +290,11 @@ Волшебная снежинка · 1:18 -
Новогоднее поздравление +
🌲 Новогоднее поздравление

Новогодний экспресс

-

Готовая новогодняя история с персонализацией для ребёнка. Посмотрите пример - мультпоздравления.

+

Короткий мультфильм-поздравление для ребенка с его персонажем. Создает ощущение + уникальности и волшебства в реальной жизни: именно за ним следит Дедушка Мороз, именно + его выбрала волшебная снежинка, в его квартире спрятан настоящий подарок.

-
Базовый пакет +
🐇 Новогодняя сказка

Новогодняя сказка

-

Свежий пример ролика базового пакета «Новогодняя сказка».

+

Сюрприз для двух маленьких деток, маме которых пришлось уехать от них. Мультфильм + помогает донести детям, что мама их любит и добавляет волшебство в новогодний подарок- + зайчиков.