/*
================================================
NO WEAPON
The Story Behind the Song That Still Carries the Church
Global Stylesheet
Author: Bradley Hobbs
Version: 2.0
================================================
*/
@import url(
"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Source+Serif+4:wght@400;500;600;700&display=swap"
);
/*
================================================
ROOT
================================================
*/
:root{
--background:#090909;
--surface:#141414;
--surface-light:#1c1c1c;
--text:#f8f4ed;
--muted:#bdbdbd;
--accent:#d5b26b;
--accent-light:#e7cc92;
--accent-dark:#8d6b2f;
--border:rgba(213,178,107,.15);
--shadow:
0 15px 40px rgba(0,0,0,.30);
}
/*
================================================
RESET
================================================
*/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
background:var(--background);
color:var(--text);
font-family:
"Source Serif 4",
serif;
font-size:1.1rem;
line-height:1.9;
}
/*
================================================
LAYOUT
================================================
*/
.container{
width:min(1200px,92%);
margin:auto;
}
.content-page{
width:min(900px,92%);
margin:5rem auto;
}
/*
================================================
TYPOGRAPHY
================================================
*/
h1,
h2,
h3,
h4{
font-family:
"Cinzel",
serif;
color:var(--accent-light);
font-weight:600;
line-height:1.3;
margin-bottom:1rem;
}
h1{
font-size:
clamp(2.8rem,5vw,5rem);
text-align:center;
}
h2{
font-size:
clamp(2rem,4vw,3rem);
}
h3{
font-size:
1.6rem;
}
p{
margin-bottom:1.8rem;
max-width:75ch;
}
.chapter-label{
text-transform:uppercase;
letter-spacing:3px;
color:var(--accent);
font-size:.9rem;
text-align:center;
margin-bottom:1rem;
}
.author{
text-align:center;
color:var(--muted);
margin-bottom:3rem;
}
/*
================================================
LINKS
================================================
*/
a{
color:var(--accent-light);
text-decoration:none;
transition:.3s;
}
a:hover{
color:#ffffff;
}
/*
================================================
BUTTONS
================================================
*/

.button{

display:inline-block;

padding:1rem 2rem;

background:var(--accent);

color:var(--background);

font-weight:700;

border-radius:50px;

text-decoration:none;

transition:.3s;

box-shadow:var(--shadow);

}

.button:hover{

background:var(--accent-light);

transform:translateY(-3px);

color:var(--background);

}

/*
================================================
CARDS
================================================
*/
.card{
background:
var(--surface);
padding:
2.5rem;
border-radius:16px;
border:
1px solid var(--border);
margin:
2rem 0;
box-shadow:
var(--shadow);
}
/*
================================================
BLOCKQUOTE
================================================
*/
blockquote{
border-left:
4px solid var(--accent);
padding-left:
2rem;
margin:
2rem 0;
font-style:italic;
color:
var(--accent-light);
}
/*
================================================
IMAGES
================================================
*/
img{
display:block;
max-width:100%;
height:auto;
}
.hero-banner{
width:100%;
border-radius:16px;
margin:2rem auto 4rem;
box-shadow:var(--shadow);
}
/*
================================================
CHAPTER NAVIGATION
================================================
*/
.chapter-navigation{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:1rem;
margin-top:3rem;
}
/*
================================================
FOOTER
================================================
*/
.site-footer{

margin-top:5rem;

padding:4rem 2rem 2.5rem;

background:var(--surface);

border-top:1px solid var(--border);

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:2.5rem;

margin-bottom:2rem;

}

.footer-column h3,
.footer-column h4{
margin-bottom:1rem;
}
.footer-column p{
max-width:none;
color:var(--muted);
margin-bottom:1rem;
}
.footer-column ul{
list-style:none;
padding:0;
margin:0;
}
.footer-column li{
margin-bottom:.85rem;
}
.footer-column a{
color:var(--text);
transition:.3s;
}
.footer-column a:hover{
color:var(--accent-light);
padding-left:6px;
}
/*
================================================
DONATE
================================================
*/

.donate-buttons{

display:flex;

flex-wrap:wrap;

gap:.75rem;

margin-top:1rem;

}

.donate-button{

display:inline-block;

padding:.45rem .9rem;

background:transparent;

color:var(--accent-light);

font-size:.9rem;

font-weight:600;

border:1px solid rgba(213,178,107,.25);

border-radius:6px;

text-decoration:none;

transition:.3s;

box-shadow:none;

}

.donate-button:hover{

background:rgba(213,178,107,.08);

border-color:var(--accent);

color:#ffffff;

transform:none;

}

/*
================================================
DIVIDER
================================================
*/
hr{
border:none;
border-top:1px solid var(--border);
margin:3rem 0;
}
/*
================================================
RESPONSIVE
================================================
*/
@media(max-width:900px){
body{
font-size:1rem;
}
.footer-grid{
grid-template-columns:1fr;
text-align:center;
gap:2.5rem;
}
.footer-column a:hover{
padding-left:0;
}
.donate-buttons{
justify-content:center;
}
.content-page{
width:94%;
margin:3rem auto;
}
}
@media(max-width:600px){
h1{
font-size:2.3rem;
}
h2{
font-size:1.8rem;
}
.button,
.donate-button{
width:100%;
text-align:center;
}
.chapter-navigation{
flex-direction:column;
}
}
/*
================================================
END
Elegant
Responsive
Accessible
Designed for
NO WEAPON
The Story Behind the Song That Still Carries the Church
================================================
*/