/* ============================================================ LivingTech GmbH — fonts.css Font: Inter (Google Fonts or self-hosted) Type scale from Figma ============================================================ */ /* ── @font-face declarations ── Replace src paths with your self-hosted files. If using Google Fonts CDN, remove these and add the to index.twig instead. ──────────────────────────────────────────────── */ @font-face { font-family: 'Inter'; src: url('/fonts/Inter-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/fonts/Inter-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/fonts/Inter-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/fonts/Inter-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ── Base ── */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-weight: 400; font-size: 1.25rem; /* 20px — body / p */ line-height: 1.6; color: var(--color-black); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Type scale (desktop) ── */ h1, .h1, .h1 p { font-size: 8.25rem; line-height: 1.15; font-weight: 700; } /* 132px */ h2, .h2, .h2 p { font-size: 4rem; line-height: 1.15; } /* 64px */ h3, .h3, .h3 p { font-size: 2.625rem; line-height: 1.2; font-weight: 600; } /* 42px */ h4, .h4, .h4 p { font-size: 1.75rem; line-height: 1.3; font-weight: 600; } /* 28px */ h5, .h5, .h5 p { font-size: 1.25rem; line-height: 1.4; font-weight: 500; } /* 20px */ h6, .h6, .h6 p { font-size: 1rem; line-height: 1.5; font-weight: 500; } /* 16px */ p, .p, .p p { font-size: 1rem; /* 18px */ line-height: 1.6; } .small p{ font-size: inherit !important; } /* ── Responsive type scale ── */ @media (max-width: 1399.98px) { h1, .h1 { font-size: 6rem; } h2, .h2 { font-size: 3.25rem; } h3, .h3 { font-size: 2.25rem; } } @media (max-width: 991.98px) { h1, .h1 { font-size: 4rem; } h2, .h2 { font-size: 2.625rem; } h3, .h3 { font-size: 2rem; } h4, .h4 { font-size: 1.5rem; } body, p { font-size: 1.125rem; } } @media (max-width: 575.98px) { h1, .h1 { font-size: 2.75rem; } h2, .h2 { font-size: 2rem; } h3, .h3 { font-size: 1.625rem; } h4, .h4 { font-size: 1.25rem; } body, p { font-size: 1rem; } } /* ── Weight utilities ── */ .w-light { font-weight: 300 !important; } .w-regular { font-weight: 400 !important; } .w-medium { font-weight: 500 !important; } .w-semibold { font-weight: 600 !important; } .w-bold { font-weight: 700 !important; } /* ── Letter-spacing ── */ .ls-sm { letter-spacing: 1.5px; } .ls-md { letter-spacing: 2px; } .ls-lg { letter-spacing: 3px; } /* ── Overline label style ── */ .overline { font-size: 0.75rem !important; font-weight: 500 !important; letter-spacing: 2px; text-transform: uppercase; line-height: 1.4 !important; } /* ── Button text ── */ .btn { font-size: 1.125rem; /* 18px */ font-weight: 500; line-height: 1.4; }