/* ============================================================ Bside Global Styles ============================================================ */ @import "./variables.css"; @import "./reset.css"; /* ── Fonts ───────────────────────────────────────────────── */ @font-face { font-family: "Showcard Gothic"; src: url("../fonts/Showcard-Gothic.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* Inter via Google Fonts — loaded in HTML */ /* ── Smooth scroll ───────────────────────────────────────── */ html { scroll-behavior: smooth; } /* ── Base ────────────────────────────────────────────────── */ body { font-family: var(--font-body); font-size: 16px; line-height: 160%; color: var(--color-foreground); /* Shared fixed background — all sections see the same image as they scroll */ background-image: url('../images/Frame-118.avif'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } /* ── Typography ──────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 120%; } h1 { font-size: clamp(40px, 5vw, 72px); font-weight: 400; } h2 { font-size: 32px; font-weight: 600; margin-bottom: var(--space-lg); } h3 { font-size: 24px; font-weight: 500; margin-bottom: var(--space-sm); } h4 { font-size: 18px; font-weight: 500; } p { margin-bottom: 10px; line-height: 160%; } a { color: var(--color-primary); transition: color 0.3s; } a:hover { color: var(--pink); } ul, ol { padding-left: var(--space-lg); font-size: 16px; line-height: 150%; } li { padding-bottom: 10px; font-size: 16px; line-height: 150%; } blockquote { background-color: var(--pink-5); border-left: 3px solid var(--pink); padding: var(--space-lg) var(--space-md); font-size: 16px; line-height: 150%; border-radius: 0 8px 8px 0; } /* ── Layout helpers ──────────────────────────────────────── */ .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--page-padding); } .section { padding-block: var(--space-3xl); } /* ── Utility ─────────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 991px) { :root { --page-padding: 40px; --space-3xl: 60px; } body { background-attachment: scroll; } } @media (max-width: 479px) { :root { --page-padding: 18px; --space-3xl: 48px; } body { font-size: 15px; line-height: 155%; } h1 { font-size: clamp(34px, 11vw, 48px); } h2 { font-size: 28px; } h3 { font-size: 21px; } ul, ol { padding-left: 22px; } }