/*
Legal pages styling (shared by terms.html and privacy.html)
----------------------------------------------------------
Both legal pages use the same visual style:
- Heading / meta section at the top (.legal-hero)
- Main legal content block (.legal-content)
That shared styling is defined mostly in:
- css/base/typography.css (headings, body text)
- css/layout/header.css (site header)
- css/layout/footer.css (site footer)
- css/utilities/utilities.css (.legal-hero, .legal-content, lists, etc.)
This file (legal.css) is here for:
- Any additional fine‑tuning you want for *both* pages.
- Optional per‑page overrides using body classes if you add them later.
Example: if you want a slightly different color on the Terms page only,
you could add class="page-terms" on in terms.html and then write:
.page-terms .legal-hero { background: #fffaf5; }
Same idea for Privacy: class="page-privacy" and
.page-privacy .legal-hero { background: #f7fbff; }
By default, both pages share identical styling.
*/
/* Generic tweaks that apply to BOTH terms.html and privacy.html */
.legal-hero{
width: 100%;
height: auto;
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
align-items: center;
}
.legal-hero-inner{
width: fit-content;
height: auto;
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
align-items: center;
}
.legal-hero h1 {
width: fit-content;
text-align: center;
font-size: clamp(2rem, 3vw, 2.4rem);
}
.legal-hero p {
width: fit-content;
text-align: center;
}
.section{
width: 100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.legal-content{
max-width:500px ;
height: auto;
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: start;
align-items: flex-start;
}
.legal-content p {
margin-bottom: 0.6rem;
}
.legal-content ul {
margin-bottom: 0.8rem;
}
.legal-content li {
line-height: 1.5;
}
.store-btnn{
width: 100%;
height: auto;
display: flex;
flex-direction: row;
gap: 0.5rem;
justify-content: center;
align-items: center;
}
/* Example placeholders for future page‑specific overrides
(uncomment & use after adding the classes to )
.page-terms .legal-hero {
}
.page-privacy .legal-hero {
}
*/
@media (max-width: 480px) {
.legal-content{
max-width:100% ;
height: auto;
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: start;
align-items: flex-start;
padding: 0 1rem;
}
}