/** * ============================================================ * BIDCORP GROUP — BASE STYLESHEET * ============================================================ * * PURPOSE: Structural foundations only. * — CSS reset * — Typography scale (font assignments, sizes, weights) * — Layout system (container, grid, section wrappers) * — Utility classes * — Responsive breakpoints * * WHAT THIS FILE DOES NOT CONTAIN: * — Component visual styling (buttons, cards, nav, etc.) * → See components.css * — Raw design values (colours, font names, spacing scale) * → See design-tokens.css * * IMPORT ORDER (must be maintained in HTML ): * 1. design-tokens.css * 2. base.css ← this file * 3. components.css * ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;700&family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap'); /* ============================================================ RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; max-width: 100vw; overflow-x: hidden; overflow-x: clip; } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-normal); line-height: var(--leading-base); color: var(--color-text-body); background-color: var(--color-bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; max-width: 100vw; overflow-x: hidden; overflow-x: clip; } img, video { max-width: 100%; height: auto; display: block; } a { color: var(--color-text-link); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-text-link-hover); } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; } /* ============================================================ TYPOGRAPHY ============================================================ */ /* Heading scale — Comfortaa display font */ h1, .h1 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-bold); line-height: var(--leading-4xl); color: var(--color-text-primary); letter-spacing: 0; } h2, .h2 { font-family: var(--font-body); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-3xl); color: var(--color-text-primary); letter-spacing: 0; margin-bottom: var(--space-4); } h3, .h3 { font-family: var(--font-body); font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-2xl); color: var(--color-text-primary); letter-spacing: 0; } h4, .h4 { font-family: var(--font-body); font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-xl); color: var(--color-text-primary); } h5, .h5 { font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-bold); line-height: var(--leading-md); color: var(--color-text-primary); } h6, .h6 { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-bold); line-height: var(--leading-base); color: var(--color-text-primary); } /* Hero display size — largest Comfortaa variant */ .display { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--weight-bold); line-height: var(--leading-5xl); color: var(--color-text-primary); } .display-light { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--weight-light); line-height: var(--leading-5xl); color: var(--color-text-primary); } /* Body text */ p, .body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-normal); line-height: var(--leading-base); color: var(--color-text-body); } .body-lg { font-size: var(--text-md); line-height: var(--leading-md); } .body-sm { font-size: var(--text-sm); line-height: var(--leading-sm); } .caption { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-normal); line-height: var(--leading-xs); color: var(--color-text-muted); } /* Uppercase metadata label */ .label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: var(--leading-xs); text-transform: uppercase; letter-spacing: 1.5px; color: var(--color-text-muted); } /* Section eyebrow — uppercase accent-green label above headings */ .eyebrow { display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-accent-green); margin-bottom: var(--space-3); } /* Text colour utilities */ .text-white { color: var(--color-text-inverse); } .text-muted { color: var(--color-text-muted); } .text-green { color: var(--color-accent-green); } .text-blue { color: var(--color-brand-secondary); } .text-navy { color: var(--color-brand-primary); } /* ============================================================ LAYOUT — CONTAINER ============================================================ */ .container { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--container-padding-x); padding-right: var(--container-padding-x); box-sizing: border-box; } .container--narrow { max-width: var(--container-content); } /* ============================================================ LAYOUT — SECTIONS ============================================================ */ .section { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); } .section--sm { padding-top: var(--section-padding-y-sm); padding-bottom: var(--section-padding-y-sm); } .section--white { background-color: var(--color-bg-white); } .section--light { background-color: var(--color-bg-section-alt); } .section--dark { background-color: var(--color-bg-dark); } /* ============================================================ LAYOUT — GRID & FLEX ============================================================ */ .grid { display: grid; gap: var(--grid-gap); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--12 { grid-template-columns: repeat(12, 1fr); } /* Two-column content splits */ .layout-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; } .layout-split--60-40 { grid-template-columns: 3fr 2fr; } .layout-split--40-60 { grid-template-columns: 2fr 3fr; } /* Flex helpers */ .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-col { display: flex; flex-direction: column; } .gap-2 { gap: var(--space-2); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } /* ============================================================ UTILITIES ============================================================ */ /* Spacing */ .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mt-10 { margin-top: var(--space-10); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .mb-10 { margin-bottom: var(--space-10); } /* Visibility */ .hidden { display: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Alignment */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } /* Backgrounds */ .bg-dark { background-color: var(--color-bg-dark); } .bg-light { background-color: var(--color-bg-section-alt); } .bg-white { background-color: var(--color-bg-white); } /* Section colour accent strips */ .accent-green { border-top: 4px solid var(--color-accent-green); } .accent-teal { border-top: 4px solid var(--color-accent-teal); } .accent-blue { border-top: 4px solid var(--color-brand-secondary); } .accent-amber { border-top: 4px solid var(--color-accent-amber); } /* ============================================================ RESPONSIVE BREAKPOINTS ============================================================ */ /* Large desktop */ @media (max-width: 1280px) { :root { --container-padding-x: 32px; --section-padding-y: 64px; } } /* Tablet landscape */ @media (max-width: 1024px) { :root { --text-5xl: 48px; --leading-5xl: 52px; --section-padding-y: 56px; } .grid--4 { grid-template-columns: repeat(2, 1fr); } .layout-split, .layout-split--60-40, .layout-split--40-60 { grid-template-columns: 1fr; } } /* Tablet portrait */ @media (max-width: 768px) { :root { --text-5xl: 40px; --leading-5xl: 44px; --text-4xl: 40px; --leading-4xl: 44px; --text-3xl: 33px; --text-2xl: 28px; --container-padding-x: 20px; --section-padding-y: 48px; --grid-gap: 16px; } .grid--3 { grid-template-columns: 1fr; } .grid--2 { grid-template-columns: 1fr; } } /* Mobile */ @media (max-width: 480px) { :root { --text-5xl: 33px; --leading-5xl: 38px; --text-4xl: 33px; --container-padding-x: 16px; } }