213 lines
10 KiB
CSS
213 lines
10 KiB
CSS
:root{
|
|
--red:#d7193f;
|
|
--red-dark:#a90f2d;
|
|
--red-soft:#fff0f4;
|
|
--pink:#ffe3ec;
|
|
--ink:#36363a;
|
|
--muted:#74747a;
|
|
--paper:#f7f7f8;
|
|
--white:#ffffff;
|
|
--shadow:0 24px 70px rgba(174, 23, 55, .18);
|
|
--shadow-strong:0 32px 90px rgba(100, 10, 30, .28);
|
|
}
|
|
|
|
*{box-sizing:border-box}
|
|
html,body{margin:0;min-height:100%;font-family:"Segoe UI",Arial,sans-serif;color:var(--ink);background:#f1f1f2}
|
|
a{text-decoration:none;color:inherit}
|
|
|
|
.charity-hero{
|
|
position:relative;
|
|
min-height:546px;
|
|
overflow:hidden;
|
|
isolation:isolate;
|
|
background:
|
|
radial-gradient(circle at 72% 22%, rgba(255,255,255,.92), transparent 28%),
|
|
linear-gradient(110deg, #ffeaf0 0%, #f4f4f5 42%, #f9f9fa 100%);
|
|
}
|
|
|
|
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
|
|
.blob{position:absolute;border-radius:999px;filter:blur(3px);opacity:.72;animation:blobFloat 13s ease-in-out infinite alternate}
|
|
.blob-1{width:460px;height:460px;background:rgba(255,207,221,.75);left:-150px;top:-170px}
|
|
.blob-2{width:520px;height:520px;background:rgba(255,236,241,.9);right:-180px;bottom:-220px;animation-delay:-3s}
|
|
.blob-3{width:220px;height:220px;background:rgba(215,25,63,.12);left:48%;top:48%;animation-delay:-6s}
|
|
.soft-grid{position:absolute;inset:22px 150px;border:5px solid rgba(255,206,218,.68);border-radius:6px;mask:linear-gradient(90deg,transparent,black 4%,black 96%,transparent);opacity:.76}
|
|
.soft-grid:before,.soft-grid:after{content:"";position:absolute;background:var(--red);border-radius:50% 50% 48% 48%;transform:rotate(45deg);opacity:.9}
|
|
.soft-grid:before{width:36px;height:36px;left:22px;bottom:-13px;box-shadow:34px -1px 0 var(--red)}
|
|
.soft-grid:after{width:17px;height:17px;right:18px;top:285px;opacity:.55;box-shadow:20px 19px 0 rgba(215,25,63,.9)}
|
|
|
|
.hero-shell{
|
|
width:min(1580px, calc(100% - 44px));
|
|
min-height:546px;
|
|
margin:0 auto;
|
|
display:grid;
|
|
grid-template-columns:minmax(640px, 1.1fr) minmax(470px, .9fr);
|
|
gap:42px;
|
|
align-items:center;
|
|
padding:22px 0;
|
|
}
|
|
|
|
.gallery-panel{
|
|
position:relative;
|
|
min-height:500px;
|
|
padding:18px 12px 0;
|
|
}
|
|
.gallery-title{
|
|
position:absolute;left:22px;top:10px;z-index:22;
|
|
display:inline-flex;flex-direction:column;gap:4px;
|
|
padding:10px 16px;border-radius:18px;background:rgba(255,255,255,.72);
|
|
box-shadow:0 12px 30px rgba(70,40,50,.08);backdrop-filter:blur(10px);
|
|
transform:translateY(-12px);opacity:0;animation:fadeDown .7s ease forwards .25s;
|
|
}
|
|
.gallery-title .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--red);font-weight:800}
|
|
.gallery-title strong{font-size:16px;color:#313136}
|
|
|
|
.gallery-stage{
|
|
position:relative;
|
|
height:464px;
|
|
width:100%;
|
|
overflow:visible;
|
|
perspective:1200px;
|
|
}
|
|
.gallery-light{
|
|
position:absolute;left:34%;top:35%;width:310px;height:210px;border-radius:50%;
|
|
background:radial-gradient(circle, rgba(255,255,255,.88), rgba(255,255,255,0) 66%);
|
|
pointer-events:none;opacity:.45;mix-blend-mode:screen;animation:lightPulse 4s ease-in-out infinite;
|
|
}
|
|
.focus-frame{
|
|
position:absolute;left:50%;top:50%;width:402px;height:238px;transform:translate(-50%,-50%) scale(.86);
|
|
border-radius:22px;border:1px solid rgba(215,25,63,.25);
|
|
box-shadow:0 0 0 10px rgba(255,255,255,.16), inset 0 0 42px rgba(215,25,63,.07);
|
|
opacity:0;transition:.7s ease;pointer-events:none;z-index:4;
|
|
}
|
|
.gallery-stage.is-playing .focus-frame{opacity:1;transform:translate(-50%,-50%) scale(1)}
|
|
|
|
.photo-card{
|
|
position:absolute;
|
|
left:var(--x);top:var(--y);
|
|
width:var(--w);
|
|
background:#fff;
|
|
border:4px solid var(--red);
|
|
border-radius:3px;
|
|
overflow:hidden;
|
|
box-shadow:0 14px 36px rgba(61,26,34,.22);
|
|
transform:translate3d(0,0,0) rotate(var(--r)) scale(.92);
|
|
opacity:0;
|
|
z-index:5;
|
|
will-change:transform,opacity,filter;
|
|
animation:cardIntro .85s cubic-bezier(.2,.9,.25,1.12) forwards, microFloat 6s ease-in-out infinite;
|
|
animation-delay:var(--delay), calc(var(--delay) + 1s);
|
|
transition:
|
|
opacity .75s ease,
|
|
filter .75s ease,
|
|
box-shadow .75s ease,
|
|
border-color .75s ease,
|
|
left .75s ease,
|
|
top .75s ease,
|
|
width .75s ease,
|
|
transform .95s cubic-bezier(.18,.82,.18,1);
|
|
}
|
|
.photo-card img{display:block;width:100%;height:auto;transform:scale(1.035);transition:transform 1s cubic-bezier(.18,.82,.18,1), filter .8s ease}
|
|
.photo-card:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.34) 45%, transparent 70%);transform:translateX(-130%);z-index:2;pointer-events:none}
|
|
.photo-card.is-active:before{animation:shine 1.3s ease .25s}
|
|
.photo-card.is-active{
|
|
left:50%;top:50%;width:min(480px, 58vw);
|
|
transform:translate(-50%,-50%) rotate(0deg) scale(1.06) !important;
|
|
opacity:1;
|
|
z-index:30;
|
|
border-color:#fff;
|
|
border-width:8px;
|
|
border-radius:18px;
|
|
box-shadow:var(--shadow-strong);
|
|
filter:saturate(1.08) contrast(1.03);
|
|
}
|
|
.photo-card.is-active img{transform:scale(1.08)}
|
|
.photo-card.is-dim{
|
|
opacity:.28;
|
|
filter:grayscale(.08) saturate(.8) blur(.2px);
|
|
transform:translate3d(0,0,0) rotate(var(--r)) scale(.82);
|
|
z-index:2;
|
|
}
|
|
.photo-card.is-next{
|
|
opacity:.74;
|
|
box-shadow:0 17px 45px rgba(92,24,42,.18);
|
|
}
|
|
.photo-card.is-exit{
|
|
opacity:0;
|
|
transform:translateY(28px) scale(.74) rotate(var(--r));
|
|
}
|
|
.photo-card:hover{transform:translateY(-8px) rotate(0deg) scale(1.03);z-index:35;box-shadow:0 24px 70px rgba(100,10,30,.24)}
|
|
.photo-card:hover img{transform:scale(1.1)}
|
|
|
|
.gallery-controls{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);display:flex;gap:8px;z-index:40}
|
|
.dot{width:7px;height:7px;border-radius:999px;background:rgba(215,25,63,.22);transition:.35s ease}
|
|
.dot.is-active{width:28px;background:var(--red);box-shadow:0 0 0 6px rgba(215,25,63,.09)}
|
|
|
|
.content-panel{
|
|
position:relative;
|
|
min-height:430px;
|
|
display:flex;
|
|
flex-direction:column;
|
|
justify-content:center;
|
|
padding:26px 24px 26px 8px;
|
|
}
|
|
.content-panel:before{
|
|
content:"";position:absolute;inset:28px 0 18px 0;border-radius:34px;
|
|
background:linear-gradient(145deg, rgba(255,255,255,.54), rgba(255,255,255,.08));
|
|
border:1px solid rgba(255,255,255,.55);
|
|
box-shadow:0 20px 70px rgba(62,45,54,.06);
|
|
z-index:-1;
|
|
}
|
|
.brand-row{display:grid;grid-template-columns:1fr 170px;gap:24px;align-items:start;margin-bottom:54px}
|
|
.logo-mark{width:165px;justify-self:end;filter:drop-shadow(0 10px 16px rgba(215,25,63,.15));animation:logoBreath 3.6s ease-in-out infinite}
|
|
.brand-text{text-align:center;align-self:center}
|
|
.brand-text h1{margin:0 0 8px;text-transform:uppercase;line-height:1.18;font-size:clamp(20px,1.72vw,30px);letter-spacing:-.3px;color:var(--red);font-weight:900}
|
|
.brand-text p{margin:0;color:#67676c;text-transform:uppercase;font-size:clamp(16px,1.2vw,22px);font-weight:800;letter-spacing:.3px}
|
|
|
|
.slogan-card{
|
|
width:min(560px,100%);
|
|
margin:0 auto;
|
|
position:relative;text-align:center;padding:20px 18px 28px;
|
|
}
|
|
.slogan-card:before{
|
|
content:"";position:absolute;left:50%;top:50%;width:86%;height:86%;transform:translate(-50%,-50%);
|
|
border-radius:38px;background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,237,243,.72),rgba(255,255,255,.12));
|
|
filter:blur(.2px);z-index:-1;opacity:.8;
|
|
}
|
|
.quote-mark{position:absolute;left:12px;top:-16px;font-size:74px;line-height:1;color:rgba(215,25,63,.18);font-family:Georgia,serif}
|
|
.slogan-card h2{margin:0;color:#e13b5e;font-size:clamp(29px,2.2vw,42px);line-height:1.42;font-family:"Segoe Script","Brush Script MT",cursive;font-weight:600;text-shadow:0 8px 20px rgba(215,25,63,.12)}
|
|
.slogan-card h2 em{font-style:normal;font-size:.86em;color:#d9284c}
|
|
.heart-line{display:block;width:160px;height:22px;margin:12px auto 0;position:relative}
|
|
.heart-line:before{content:"";position:absolute;left:0;right:34px;top:11px;height:2px;background:linear-gradient(90deg,transparent,var(--red));border-radius:999px}
|
|
.heart-line:after{content:"♡";position:absolute;right:6px;top:-8px;color:var(--red);font-size:32px;transform:rotate(18deg);animation:heartBeat 1.7s ease-in-out infinite}
|
|
|
|
.action-row{display:flex;gap:12px;justify-content:center;margin-top:26px;flex-wrap:wrap}
|
|
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border-radius:999px;font-weight:800;font-size:14px;letter-spacing:.2px;transition:.3s ease;box-shadow:0 12px 30px rgba(115,21,43,.12)}
|
|
.btn.primary{background:linear-gradient(135deg,var(--red),#ef4769);color:white}
|
|
.btn.secondary{background:rgba(255,255,255,.74);color:var(--red);border:1px solid rgba(215,25,63,.18)}
|
|
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(115,21,43,.18)}
|
|
|
|
.reveal-up{opacity:0;transform:translateY(24px);animation:revealUp .8s ease forwards}
|
|
.brand-text.reveal-up{animation-delay:.2s}.logo-mark.reveal-up{animation-delay:.38s}.slogan-card.reveal-up{animation-delay:.62s}.action-row.reveal-up{animation-delay:.86s}
|
|
|
|
@keyframes cardIntro{from{opacity:0;transform:translate3d(-28px,22px,0) rotate(calc(var(--r) - 7deg)) scale(.78)}to{opacity:1;transform:translate3d(0,0,0) rotate(var(--r)) scale(.92)}}
|
|
@keyframes microFloat{0%,100%{margin-top:0}50%{margin-top:-8px}}
|
|
@keyframes shine{to{transform:translateX(130%)}}
|
|
@keyframes revealUp{to{opacity:1;transform:translateY(0)}}
|
|
@keyframes fadeDown{to{opacity:1;transform:translateY(0)}}
|
|
@keyframes logoBreath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.025)}}
|
|
@keyframes heartBeat{0%,100%{transform:rotate(18deg) scale(1)}20%{transform:rotate(18deg) scale(1.18)}38%{transform:rotate(18deg) scale(1)}}
|
|
@keyframes blobFloat{to{transform:translate(26px,20px) scale(1.05)}}
|
|
@keyframes lightPulse{0%,100%{opacity:.25;transform:scale(.96)}50%{opacity:.58;transform:scale(1.08)}}
|
|
|
|
@media (max-width:1200px){
|
|
.hero-shell{grid-template-columns:1fr;gap:10px;padding:18px 0 34px}
|
|
.charity-hero{min-height:auto}.content-panel{min-height:auto}.gallery-panel{min-height:470px}.gallery-stage{height:430px}.brand-row{grid-template-columns:1fr 130px;margin-bottom:20px}.logo-mark{width:130px}
|
|
}
|
|
@media (max-width:720px){
|
|
.hero-shell{width:calc(100% - 24px)}.soft-grid{inset:12px;border-width:3px}.gallery-panel{padding:12px 0;min-height:390px}.gallery-title{display:none}.gallery-stage{height:370px;overflow:hidden}.photo-card{width:calc(var(--w) * .72)}.photo-card.is-active{width:min(86vw,380px)}.content-panel{padding:8px}.brand-row{display:flex;flex-direction:column-reverse;align-items:center;gap:10px}.brand-text h1{text-align:center}.slogan-card h2{font-size:29px}.btn{height:42px;padding:0 16px}
|
|
}
|
|
|
|
@media (prefers-reduced-motion:reduce){
|
|
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
|
|
}
|