DeCentN2Madness
c6202d2ac6
Extends Button.astro with a center prop, native <button> element support (type, disabled, aria-describedby), harmonised padding (.65rem), and transition. Removes global .button, .button-small, .button-light, and .button-center rules from components.css, layout.css, and typography.css. Converts all inline class="button" usages across Header, HomeHero, HomeFinancialHelp, HomeServicesIntro, FormShell, TeamPage, CareersPage, and FaqPage to the <Button> component. Updates three scoped style selectors to :global() to reach the child component's elements.
62 lines
1.8 KiB
CSS
62 lines
1.8 KiB
CSS
@font-face { font-family: "Playfair Display"; src: url('/assets/fonts/Playfair_Display/700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
|
|
@font-face { font-family: Caveat; src: url('/assets/fonts/Caveat/700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
|
|
@font-face { font-family: Rubik; src: url('/assets/fonts/Rubik/regular.woff2') format('woff2'); font-display: swap; }
|
|
@font-face { font-family: Rubik; src: url('/assets/fonts/Rubik/700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
|
|
body { color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.625; }
|
|
h1, h2, h3, h4 { color: var(--color-primary); font-family: var(--font-heading); line-height: 1.15; text-wrap: balance; }
|
|
.no-balance { text-wrap: auto; }
|
|
h1 { font-size: clamp(2.5rem, 5vw, 3rem); line-height: 1.12; margin: 0 0 var(--space-md); }
|
|
h2 { font-size: clamp(2rem, 4vw, 2.4rem); line-height: 1.25; }
|
|
h3 { font-size: clamp(1.8rem, 3.4vw, 2rem); }
|
|
h4 { font-size: clamp(1.5rem, 3vw, 1.8rem); }
|
|
a, a:visited { color: var(--color-accent-strong); text-decoration: none; }
|
|
a:hover, a:active { color: var(--color-accent); }
|
|
|
|
|
|
.eyebrow {
|
|
margin: 0;
|
|
color: var(--color-accent-strong);
|
|
font-family: var(--font-accent);
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.eyebrow + :is(h1, h2, h3, h4, h5, h6) {
|
|
margin-block-start: 0;
|
|
}
|
|
|
|
.prose :where(ul, ol) {
|
|
margin-block: 0 1.5rem;
|
|
padding-inline-start: 2.5rem;
|
|
}
|
|
|
|
.prose :where(ul, ol) :where(ul, ol) {
|
|
margin-block: .25rem 0;
|
|
}
|
|
|
|
.prose li {
|
|
line-height: 1.625;
|
|
margin-block: 0;
|
|
padding-inline-start: .15rem;
|
|
}
|
|
|
|
.prose li > p {
|
|
margin-block: 0;
|
|
}
|
|
|
|
.prose ul > li::marker {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.prose ol > li::marker {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.blog-post-body :where(ul, ol) {
|
|
padding-inline-start: 1.875rem;
|
|
}
|
|
|
|
.blog-post-body li {
|
|
line-height: 1.5;
|
|
margin-bottom: .25rem;
|
|
}
|