:root{
--wine:#67364c;
--wine-deep:#4d2739;
--rose:#d89494;
--rose-dark:#b66f76;
--blush:#f4dfd9;
--cream:#fffaf6;
--paper:#fffdf9;
--gold:#ba8b4d;
--gold-light:#e1c69a;
--ink:#665058;
--muted:#9c7f84;
--border:#ead9cb;
--shadow:0 20px 60px rgba(77,39,57,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
min-height:100vh;
font-family:Montserrat,sans-serif;
color:var(--ink);
background:
linear-gradient(rgba(255,250,247,.9),rgba(248,238,234,.94)),
url("../fundo.png") center/cover fixed;
overflow-x:hidden;
line-height:1.6;
}
body:after{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:-1;
background:
radial-gradient(circle at 10% 15%,rgba(216,148,148,.14),transparent 32%),
radial-gradient(circle at 90% 35%,rgba(186,139,77,.08),transparent 30%);
}
.hero{
min-height:58vh;
position:relative;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:90px 24px;
background:
linear-gradient(rgba(74,38,54,.42),rgba(74,38,54,.56)),
url('../img/1.jpeg') center/cover;
border-bottom:1px solid rgba(186,139,77,.28);
}
.overlay{
position:absolute;
inset:0;
background:
linear-gradient(to bottom,rgba(255,255,255,.04),rgba(45,20,31,.18)),
radial-gradient(circle at center,transparent 20%,rgba(45,20,31,.18));
}
.hero-content{
position:relative;
z-index:2;
max-width:800px;
color:#fffaf7;
padding:20px;
}
.hero h1{
font:400 62px/1.05 Italiana,serif;
letter-spacing:.5px;
text-shadow:0 8px 30px rgba(49,23,35,.35);
margin-bottom:20px;
}
.hero .album-text{
max-width:650px;
margin:0 auto 30px;
font:400 19px/1.6 "Cormorant Garamond",serif;
color:#f8eeea;
}
.btnver,button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:0 26px;
border:1px solid rgba(255,255,255,.34);
background:var(--wine);
color:#fff;
text-decoration:none;
text-transform:uppercase;
font-size:8px;
font-weight:500;
letter-spacing:1.6px;
cursor:pointer;
transition:.3s;
box-shadow:0 10px 25px rgba(58,28,41,.15);
}
.btnver:hover,button:hover{
background:var(--wine-deep);
transform:translateY(-2px);
box-shadow:0 15px 30px rgba(58,28,41,.22);
}
.section{
padding:85px 20px 60px;
}
.album-section{
max-width:980px;
margin:auto;
}
.section h2{
text-align:center;
font:400 42px/1.1 "Cormorant Garamond",serif;
color:var(--wine);
margin-bottom:12px;
}
.section h2:after{
content:"";
display:block;
width:72px;
height:1px;
margin:16px auto 0;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.album-text{
max-width:720px;
margin:0 auto 34px;
text-align:center;
font:400 17px/1.6 "Cormorant Garamond",serif;
color:#846e73;
}
.upload-card{
background:rgba(255,253,249,.92);
border:1px solid rgba(218,193,180,.78);
padding:34px;
box-shadow:var(--shadow);
display:flex;
flex-direction:column;
gap:16px;
position:relative;
overflow:hidden;
}
.upload-card:before{
content:"F & O";
position:absolute;
right:22px;
top:14px;
font:400 42px Parisienne,cursive;
color:rgba(183,118,116,.09);
pointer-events:none;
}
.upload-card input[type="text"],
.upload-card textarea,
.upload-card input[type="file"]{
width:100%;
border:1px solid #dcc8bf;
background:#fff;
padding:14px 15px;
color:#654d55;
font:400 13px Montserrat,sans-serif;
outline:0;
transition:.3s;
}
.upload-card textarea{resize:vertical;min-height:120px}
.upload-card input[type="text"]:focus,
.upload-card textarea:focus,
.upload-card input[type="file"]:focus{
border-color:#a9787f;
box-shadow:0 0 0 3px rgba(169,120,127,.08);
}
.upload-card input[type="file"]{
padding:13px;
color:#8a6d73;
}
.upload-card input[type="file"]::file-selector-button{
border:0;
background:#f2e2dc;
color:var(--wine);
padding:10px 14px;
margin-right:12px;
font:500 8px Montserrat,sans-serif;
letter-spacing:1px;
text-transform:uppercase;
cursor:pointer;
}
.upload-card button{
align-self:center;
min-width:220px;
margin-top:4px;
}
#previewContainer{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
gap:12px;
}
.preview-image{
width:100%;
height:120px;
object-fit:cover;
border:1px solid #e7d7ce;
box-shadow:0 7px 20px rgba(77,39,57,.08);
}
.gallery-feed{
max-width:980px;
margin:0 auto 90px;
padding:0 20px;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:24px;
}
.post-foto{
background:rgba(255,253,249,.93);
border:1px solid rgba(218,193,180,.78);
overflow:hidden;
box-shadow:0 14px 40px rgba(77,39,57,.09);
transition:.35s;
}
.post-foto:hover{
transform:translateY(-4px);
box-shadow:0 22px 48px rgba(77,39,57,.14);
}
.post-foto img{
width:100%;
display:block;
aspect-ratio:4/3;
object-fit:cover;
}
.post-content{
padding:20px 22px 22px;
}
.post-header{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
margin-bottom:9px;
}
.autor{
font:600 12px Montserrat,sans-serif;
letter-spacing:.4px;
color:var(--wine);
}
.data{
font-size:9px;
color:#a58b8f;
}
.descricao{
font:400 15px/1.55 "Cormorant Garamond",serif;
color:#7d676d;
}
@media(max-width:900px){
.hero h1{font-size:50px}
.gallery-feed{grid-template-columns:1fr}
}
@media(max-width:768px){
.hero{min-height:46vh;padding:65px 18px}
.hero h1{font-size:42px}
.hero .album-text{font-size:17px}
.section{padding:65px 18px 50px}
.section h2{font-size:35px}
.upload-card{padding:26px}
.gallery-feed{padding:0 18px}
}
@media(max-width:480px){
.hero{min-height:42vh;padding:52px 15px}
.hero h1{font-size:34px}
.hero .album-text{font-size:15px}
.btnver,.upload-card button{width:100%}
.section{padding:48px 14px 38px}
.section h2{font-size:30px}
.album-text{font-size:15px}
.upload-card{padding:20px}
.gallery-feed{padding:0 14px;gap:16px}
.post-content{padding:16px}
.post-header{flex-direction:column;align-items:flex-start}
.preview-image{height:100px}
}