/* === Vela Individual === */
:root{
--bg:#06060F;
--bg-2:#0B0A1A;
--dorado:#D4AF37;
--dorado-soft:rgba(212,175,55,.2);
--dorado-glow:rgba(212,175,55,.45);
--purpura:#4A1942;
--azul:#4A90E2;
--ambar:#FFA500;
--perla:#F0EAD6;
--text:#E8E4D6;
--text-dim:rgba(240,234,214,.66);
--text-faint:rgba(240,234,214,.42);
--line:rgba(212,175,55,.2);
--glass:rgba(255,255,255,.03);
--glass-2:rgba(255,255,255,.05);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:'DM Sans',system-ui,sans-serif;
background:var(--bg);
color:var(--text);
font-weight:300;
line-height:1.65;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
min-height:100vh;
position:relative;
}
/* Radial light background */
body::before{
content:"";
position:fixed; inset:0;
background:
radial-gradient(ellipse 70% 50% at 50% 0%, rgba(74,25,66,.55), transparent 60%),
radial-gradient(ellipse 40% 35% at 50% 28%, rgba(212,175,55,.18), transparent 65%),
radial-gradient(ellipse 60% 40% at 80% 90%, rgba(74,144,226,.12), transparent 65%),
radial-gradient(ellipse 50% 35% at 10% 70%, rgba(255,165,0,.06), transparent 65%);
pointer-events:none;
z-index:0;
}
/* Soul particles */
.souls{
position:fixed; inset:0;
pointer-events:none;
z-index:1;
overflow:hidden;
}
.soul{
position:absolute;
width:3px; height:3px;
border-radius:50%;
background:var(--dorado);
box-shadow:0 0 8px var(--dorado-glow), 0 0 16px rgba(212,175,55,.35);
opacity:0;
animation:rise linear infinite;
}
@keyframes rise{
0%{transform:translateY(0) translateX(0) scale(.6); opacity:0}
10%{opacity:.9}
50%{opacity:.7}
90%{opacity:.4}
100%{transform:translateY(-120vh) translateX(var(--drift,20px)) scale(1.2); opacity:0}
}
.container{
width:100%;
max-width:1180px;
margin:0 auto;
padding:0 24px;
position:relative;
z-index:5;
}
/* HEADER */
header.site{
padding:22px 0 0;
position:relative;
z-index:10;
}
.topbar{
display:flex; align-items:center; justify-content:space-between;
gap:16px;
padding:16px 22px;
background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
border:1px solid var(--line);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border-radius:18px;
}
.brand{
display:flex; align-items:center; gap:12px;
text-decoration:none; color:var(--text);
}
.brand-mark{
width:34px; height:34px;
border-radius:10px;
background:radial-gradient(circle at 35% 30%, var(--dorado), #7d6418 80%);
position:relative;
box-shadow:0 0 0 1px var(--dorado-soft), 0 6px 22px rgba(212,175,55,.18);
}
.brand-mark::before, .brand-mark::after{
content:""; position:absolute; background:var(--bg);
}
.brand-mark::before{ left:50%; top:18%; bottom:18%; width:2px; transform:translateX(-50%); }
.brand-mark::after{ top:50%; left:28%; right:28%; height:2px; transform:translateY(-50%); }
.brand-name{
font-family:'Syne',sans-serif;
font-weight:700;
font-size:18px;
letter-spacing:.02em;
}
.brand-name span{ color:var(--dorado) }
nav.primary{ display:flex; align-items:center; gap:6px; }
nav.primary a{
color:var(--text-dim);
text-decoration:none;
font-size:14px;
padding:8px 12px;
border-radius:8px;
transition:.25s;
}
nav.primary a:hover{ color:var(--perla); background:rgba(255,255,255,.04) }
nav.primary a.cta{
color:var(--dorado);
border:1px solid var(--dorado-soft);
}
nav.primary a.cta:hover{ background:rgba(212,175,55,.08); color:var(--perla) }
.nav-toggle{
display:none;
background:none; border:1px solid var(--line);
color:var(--text); border-radius:8px;
width:38px; height:38px; cursor:pointer;
align-items:center; justify-content:center;
}
/* Breadcrumb */
.breadcrumb{
margin-top:18px;
font-family:'JetBrains Mono',monospace;
font-size:11px;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--text-faint);
display:flex; flex-wrap:wrap; align-items:center; gap:8px;
}
.breadcrumb a{ color:var(--text-dim); text-decoration:none; transition:.2s }
.breadcrumb a:hover{ color:var(--dorado) }
.breadcrumb .sep{ color:rgba(212,175,55,.4) }
.breadcrumb .current{ color:var(--dorado) }
/* HERO */
.hero{
padding:72px 0 64px;
position:relative;
}
.hero-grid{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
gap:60px;
align-items:center;
}
/* CSS Flame */
.flame-stage{
position:relative;
aspect-ratio:1/1;
max-width:440px;
margin:0 auto;
width:100%;
}
.halo{
position:absolute; inset:0;
border-radius:50%;
background:radial-gradient(circle, rgba(255,165,0,.22), rgba(212,175,55,.08) 40%, transparent 70%);
animation:halo-pulse 4s ease-in-out infinite;
filter:blur(8px);
}
@keyframes halo-pulse{
0%,100%{transform:scale(1); opacity:.85}
50%{transform:scale(1.06); opacity:1}
}
.candle{
position:absolute;
left:50%; bottom:8%;
transform:translateX(-50%);
width:22%;
height:42%;
border-radius:8px 8px 4px 4px;
background:
linear-gradient(180deg, rgba(240,234,214,.95), rgba(240,234,214,.7) 40%, rgba(212,175,55,.55));
box-shadow:
inset 6px 0 14px rgba(0,0,0,.35),
inset -2px 0 6px rgba(255,255,255,.25),
0 30px 50px rgba(0,0,0,.5),
0 0 50px rgba(212,175,55,.25);
}
.candle::after{
content:"";
position:absolute;
left:50%; top:-2%;
transform:translateX(-50%);
width:1.5px; height:14%;
background:#1a1a1a;
}
.flame{
position:absolute;
left:50%; bottom:46%;
transform:translateX(-50%);
width:34px; height:80px;
border-radius:50% 50% 24% 24% / 60% 60% 40% 40%;
background:radial-gradient(circle at 50% 70%, #fff7d8 0%, #FFA500 35%, #D4AF37 65%, rgba(74,25,66,.6) 95%);
filter:blur(.4px) drop-shadow(0 0 24px rgba(255,165,0,.7)) drop-shadow(0 0 50px rgba(212,175,55,.4));
transform-origin:50% 100%;
animation:flicker 2.6s ease-in-out infinite;
}
.flame::before{
content:"";
position:absolute;
left:50%; bottom:0;
transform:translateX(-50%);
width:14px; height:36px;
border-radius:50% 50% 24% 24% / 60% 60% 40% 40%;
background:radial-gradient(circle at 50% 70%, #fff 0%, #fff5cc 50%, #ffd966 100%);
filter:blur(.5px);
}
@keyframes flicker{
0%,100%{transform:translateX(-50%) scale(1,1) rotate(-.5deg)}
20%{transform:translateX(-50%) scale(1.04,.96) rotate(.6deg)}
40%{transform:translateX(-50%) scale(.96,1.04) rotate(-.4deg)}
60%{transform:translateX(-50%) scale(1.02,.98) rotate(.3deg)}
80%{transform:translateX(-50%) scale(.98,1.02) rotate(-.2deg)}
}
.ember{
position:absolute;
width:4px; height:4px;
border-radius:50%;
background:#FFA500;
box-shadow:0 0 8px #FFA500, 0 0 14px #D4AF37;
opacity:0;
left:50%; bottom:55%;
}
.ember.e1{ animation:emberfly 4s ease-in infinite }
.ember.e2{ animation:emberfly 5.2s ease-in .8s infinite }
.ember.e3{ animation:emberfly 4.6s ease-in 1.6s infinite }
@keyframes emberfly{
0%{transform:translate(-50%,0) scale(.5); opacity:0}
15%{opacity:1}
100%{transform:translate(calc(-50% + var(--ex,18px)), -180px) scale(1.2); opacity:0}
}
.ember.e1{ --ex:-22px }
.ember.e2{ --ex:14px }
.ember.e3{ --ex:30px }
/* HERO copy */
.hero-meta{
display:flex; flex-wrap:wrap; gap:10px;
margin-bottom:22px;
}
.badge{
display:inline-flex; align-items:center; gap:8px;
padding:7px 14px;
border:1px solid var(--dorado-soft);
background:linear-gradient(180deg, rgba(212,175,55,.10), rgba(212,175,55,.03));
color:var(--dorado);
border-radius:999px;
font-family:'JetBrains Mono',monospace;
font-size:11px;
letter-spacing:.16em;
text-transform:uppercase;
}
.badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--dorado); box-shadow:0 0 8px var(--dorado-glow) }
.badge.country{
color:var(--text-dim);
border-color:rgba(255,255,255,.1);
background:rgba(255,255,255,.03);
}
.badge.time{
color:var(--azul);
border-color:rgba(74,144,226,.25);
background:rgba(74,144,226,.06);
}
.badge.time .dot{ background:var(--azul); box-shadow:0 0 8px rgba(74,144,226,.6) }
.hero h1{
font-family:'Syne',sans-serif;
font-weight:700;
font-size:clamp(38px, 6vw, 68px);
line-height:1.05;
letter-spacing:-.015em;
margin:0 0 22px;
color:var(--perla);
text-wrap:balance;
}
.hero h1 .kicker{
display:block;
font-family:'JetBrains Mono',monospace;
font-weight:400;
font-size:12px;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--dorado);
margin-bottom:14px;
}
.quote{
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-weight:500;
font-size:clamp(20px, 2.4vw, 26px);
line-height:1.4;
color:var(--text-dim);
border-left:1px solid var(--dorado-soft);
padding:8px 0 8px 22px;
margin:0 0 28px;
text-wrap:pretty;
}
.quote cite{
display:block;
font-style:normal;
font-family:'JetBrains Mono',monospace;
font-size:11px;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--text-faint);
margin-top:10px;
}
/* GLASS SECTION */
section.block{
padding:48px 0;
position:relative;
}
.section-head{
margin-bottom:28px;
}
.section-eyebrow{
font-family:'JetBrains Mono',monospace;
font-size:11px;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--dorado);
margin-bottom:10px;
display:flex; align-items:center; gap:10px;
}
.section-eyebrow::before{
content:""; width:24px; height:1px; background:var(--dorado-soft);
}
.section-head h2{
font-family:'Syne',sans-serif;
font-weight:600;
font-size:clamp(26px, 3vw, 34px);
margin:0;
color:var(--perla);
letter-spacing:-.01em;
}
.glass{
background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
border:1px solid var(--line);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border-radius:20px;
padding:32px;
position:relative;
overflow:hidden;
}
.glass::before{
content:"";
position:absolute; top:0; left:0; right:0; height:1px;
background:linear-gradient(90deg, transparent, var(--dorado-soft), transparent);
}
.prayer-text{
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-size:clamp(17px, 1.8vw, 19px);
line-height:1.75;
color:var(--text);
text-wrap:pretty;
margin:0;
white-space:pre-line;
}
.prayer-attr{
margin-top:24px;
padding-top:20px;
border-top:1px solid var(--line);
display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
font-family:'JetBrains Mono',monospace;
font-size:11px;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--text-faint);
}
.prayer-attr .who{ color:var(--dorado) }
/* JOIN PRAYER */
.join{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:28px;
align-items:center;
}
.counter-num{
font-family:'Syne',sans-serif;
font-weight:700;
font-size:clamp(56px, 8vw, 96px);
line-height:1;
color:var(--dorado);
letter-spacing:-.03em;
text-shadow:0 0 50px rgba(212,175,55,.25);
font-variant-numeric:tabular-nums;
transition:.4s;
}
.counter-num.pulse{ animation:numpulse .6s ease }
@keyframes numpulse{
0%{transform:scale(1)}
40%{transform:scale(1.08); color:var(--ambar)}
100%{transform:scale(1); color:var(--dorado)}
}
.counter-label{
font-family:'DM Sans',sans-serif;
font-size:15px;
color:var(--text-dim);
margin-top:8px;
line-height:1.4;
}
.counter-label strong{ color:var(--perla); font-weight:500 }
.pray-btn{
width:100%;
display:flex; align-items:center; justify-content:center; gap:12px;
padding:18px 24px;
background:linear-gradient(180deg, rgba(212,175,55,.18), rgba(212,175,55,.06));
border:1px solid var(--dorado-soft);
border-radius:14px;
color:var(--dorado);
font-family:'Syne',sans-serif;
font-weight:600;
font-size:15px;
letter-spacing:.06em;
text-transform:uppercase;
cursor:pointer;
transition:.3s;
position:relative; overflow:hidden;
}
.pray-btn:hover:not(:disabled){
background:linear-gradient(180deg, rgba(212,175,55,.28), rgba(212,175,55,.12));
color:var(--perla);
border-color:var(--dorado);
transform:translateY(-1px);
box-shadow:0 10px 30px rgba(212,175,55,.18);
}
.pray-btn:disabled{ cursor:default; opacity:.7 }
.pray-btn .ico{
width:18px; height:18px; flex-shrink:0;
}
.pray-helper{
text-align:center;
margin-top:14px;
font-family:'JetBrains Mono',monospace;
font-size:10px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--text-faint);
}
/* CONDOLENCES / messages */
.messages-wrap{
display:grid;
grid-template-columns:1fr 1fr;
gap:28px;
}
.messages-list{
display:flex; flex-direction:column;
gap:14px;
max-height:520px;
overflow-y:auto;
padding-right:6px;
}
.messages-list::-webkit-scrollbar{ width:6px }
.messages-list::-webkit-scrollbar-track{ background:rgba(255,255,255,.02) }
.messages-list::-webkit-scrollbar-thumb{ background:var(--dorado-soft); border-radius:3px }
.msg{
background:rgba(255,255,255,.025);
border:1px solid rgba(255,255,255,.05);
border-radius:14px;
padding:18px 20px;
transition:.3s;
}
.msg:hover{ border-color:var(--dorado-soft); background:rgba(255,255,255,.04) }
.msg-head{
display:flex; justify-content:space-between; align-items:baseline;
gap:12px; margin-bottom:8px;
}
.msg-name{
font-family:'Syne',sans-serif;
font-weight:600;
font-size:14px;
color:var(--perla);
letter-spacing:.01em;
}
.msg-time{
font-family:'JetBrains Mono',monospace;
font-size:10px;
letter-spacing:.14em;
color:var(--text-faint);
text-transform:uppercase;
white-space:nowrap;
}
.msg-body{
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-size:16px;
line-height:1.55;
color:var(--text-dim);
margin:0;
text-wrap:pretty;
}
/* FORM */
.form-stack{ display:flex; flex-direction:column; gap:16px }
.form-stack label{
display:block;
font-family:'JetBrains Mono',monospace;
font-size:10px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--text-faint);
margin-bottom:8px;
}
.form-stack input[type="text"],
.form-stack textarea{
width:100%;
background:rgba(0,0,0,.25);
border:1px solid var(--line);
border-radius:10px;
padding:14px 16px;
color:var(--perla);
font-family:'DM Sans',sans-serif;
font-size:15px;
transition:.25s;
resize:vertical;
}
.form-stack textarea{ min-height:110px; line-height:1.55 }
.form-stack input[type="text"]:focus,
.form-stack textarea:focus{
outline:none;
border-color:var(--dorado);
background:rgba(0,0,0,.35);
box-shadow:0 0 0 3px rgba(212,175,55,.1);
}
.form-stack input::placeholder,
.form-stack textarea::placeholder{ color:var(--text-faint) }
.gdpr{
display:flex; align-items:flex-start; gap:10px;
font-size:12px;
color:var(--text-dim);
line-height:1.5;
}
.gdpr input[type="checkbox"]{
appearance:none;
-webkit-appearance:none;
width:16px; height:16px;
border:1px solid var(--dorado-soft);
border-radius:4px;
background:transparent;
flex-shrink:0;
margin-top:2px;
cursor:pointer;
position:relative;
transition:.2s;
}
.gdpr input[type="checkbox"]:checked{
background:var(--dorado);
border-color:var(--dorado);
}
.gdpr input[type="checkbox"]:checked::after{
content:"✓";
position:absolute;
inset:0;
display:flex; align-items:center; justify-content:center;
color:var(--bg);
font-size:11px;
font-weight:700;
}
.gdpr a{ color:var(--dorado); text-decoration:none; border-bottom:1px solid var(--dorado-soft) }
.gdpr a:hover{ color:var(--perla) }
.submit-btn{
margin-top:6px;
padding:14px 22px;
background:transparent;
border:1px solid var(--dorado-soft);
border-radius:10px;
color:var(--dorado);
font-family:'Syne',sans-serif;
font-weight:600;
font-size:13px;
letter-spacing:.12em;
text-transform:uppercase;
cursor:pointer;
transition:.25s;
}
.submit-btn:hover{ background:rgba(212,175,55,.1); color:var(--perla); border-color:var(--dorado) }
.form-success{
display:none;
margin-top:14px;
padding:14px 18px;
border:1px solid rgba(212,175,55,.3);
background:rgba(212,175,55,.06);
border-radius:10px;
color:var(--dorado);
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-size:15px;
}
.form-success.show{ display:block }
/* CTA encender */
.cta-section{
text-align:center;
padding:64px 0 48px;
}
.cta-card{
display:inline-block;
width:100%;
max-width:760px;
padding:48px 32px;
border-radius:24px;
background:
radial-gradient(ellipse at 50% 0%, rgba(212,175,55,.12), transparent 70%),
linear-gradient(180deg, rgba(74,25,66,.3), rgba(255,255,255,.02));
border:1px solid var(--dorado-soft);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
position:relative; overflow:hidden;
}
.cta-card::before{
content:"";
position:absolute; top:0; left:50%; transform:translateX(-50%);
width:60%; height:1px;
background:linear-gradient(90deg, transparent, var(--dorado), transparent);
}
.cta-card h3{
font-family:'Syne',sans-serif;
font-weight:700;
font-size:clamp(28px, 3.4vw, 38px);
margin:0 0 14px;
color:var(--perla);
letter-spacing:-.01em;
}
.cta-card p{
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-size:18px;
color:var(--text-dim);
margin:0 auto 28px;
max-width:520px;
line-height:1.5;
}
.cta-btn{
display:inline-flex; align-items:center; gap:12px;
padding:18px 32px;
background:linear-gradient(180deg, var(--dorado), #b89427);
color:#1a1408;
border:none;
border-radius:12px;
font-family:'Syne',sans-serif;
font-weight:700;
font-size:14px;
letter-spacing:.12em;
text-transform:uppercase;
text-decoration:none;
transition:.3s;
box-shadow:0 14px 40px rgba(212,175,55,.25), inset 0 1px 0 rgba(255,255,255,.4);
}
.cta-btn:hover{
transform:translateY(-2px);
box-shadow:0 20px 50px rgba(212,175,55,.4), inset 0 1px 0 rgba(255,255,255,.5);
}
.cta-btn .arrow{
transition:.3s;
}
.cta-btn:hover .arrow{ transform:translateX(4px) }
/* FOOTER */
footer.site{
margin-top:48px;
padding:48px 0 32px;
border-top:1px solid var(--line);
position:relative;
z-index:5;
}
.footer-grid{
display:grid;
grid-template-columns:1.4fr 1fr 1fr 1fr;
gap:36px;
}
.footer-brand p{
font-family:'Cormorant Garamond',serif;
font-style:italic;
color:var(--text-dim);
font-size:15px;
margin:14px 0 0;
line-height:1.55;
max-width:300px;
}
.footer-col h5{
font-family:'JetBrains Mono',monospace;
font-size:11px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--dorado);
margin:0 0 16px;
font-weight:400;
}
.footer-col ul{
list-style:none; padding:0; margin:0;
display:flex; flex-direction:column; gap:8px;
}
.footer-col a{
color:var(--text-dim);
text-decoration:none;
font-size:14px;
transition:.2s;
}
.footer-col a:hover{ color:var(--dorado) }
.footer-bottom{
margin-top:40px;
padding-top:24px;
border-top:1px solid rgba(212,175,55,.08);
display:flex; justify-content:space-between; align-items:center;
flex-wrap:wrap; gap:14px;
font-family:'JetBrains Mono',monospace;
font-size:11px;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--text-faint);
}
.footer-bottom .cross{ color:var(--dorado) }
/* BREAKPOINTS */
@media (max-width:1024px){
.footer-grid{ grid-template-columns:1fr 1fr 1fr; }
.footer-brand{ grid-column:1/-1 }
}
@media (max-width:768px){
.container{ padding:0 20px }
nav.primary{ display:none }
nav.primary.open{
display:flex; flex-direction:column; align-items:stretch;
position:absolute; top:80px; right:20px; left:20px;
background:rgba(11,10,26,.95);
border:1px solid var(--line);
border-radius:14px;
padding:14px;
backdrop-filter:blur(20px);
z-index:100;
}
.nav-toggle{ display:flex }
.hero{ padding:48px 0 40px }
.hero-grid{ grid-template-columns:1fr; gap:32px }
.flame-stage{ max-width:300px }
.join{ grid-template-columns:1fr; gap:20px; text-align:center }
.messages-wrap{ grid-template-columns:1fr }
.footer-grid{ grid-template-columns:1fr 1fr; gap:28px }
.footer-brand{ grid-column:1/-1 }
.glass{ padding:24px }
.cta-card{ padding:36px 22px }
}
@media (max-width:480px){
.topbar{ padding:12px 16px }
.brand-name{ font-size:16px }
.breadcrumb{ font-size:10px }
.hero h1 .kicker{ font-size:11px }
.quote{ font-size:18px; padding-left:16px }
.footer-grid{ grid-template-columns:1fr }
.footer-bottom{ flex-direction:column; align-items:flex-start }
.glass{ padding:20px; border-radius:16px }
.prayer-text{ font-size:16px }
.pray-btn{ padding:16px 18px; font-size:13px }
.cta-card{ padding:30px 18px }
.cta-btn{ padding:15px 24px; font-size:12px }
}
@media (max-width:320px){
.container{ padding:0 14px }
.hero h1{ font-size:32px }
}
@media (prefers-reduced-motion: reduce){
.flame, .ember, .halo, .soul{ animation:none !important }
}
Vela encendida
recientemente