/* ============================================================ BC PLUMBING — Brand Foundations Colors & Type tokens. Import this file, or copy the :root vars. Fonts: loaded from Google Fonts CDN (see of each page): Montserrat — SemiBold 600 (headlines), Medium 500 (labels/caps) Open Sans — Regular 400 / SemiBold 600 (body) ============================================================ */ /* Montserrat — self-hosted variable font */ /* Open Sans — self-hosted variable font (upright + italic) */ :root { /* ---- Brand palette (sampled from the logo) ---- */ --navy: #182433; /* Primary Navy — main brand color */ --ink: #151B23; /* Deep Ink Navy — near-black, footers/large fills */ --charcoal: #33373F; /* Charcoal Blue — secondary text, captions */ --cream: #DDD4C5; /* Warm Cream — heritage backgrounds */ --cream-light: #F2EBDD; /* Light Cream — soft page backgrounds */ --taupe: #B8AA96; /* Soft Taupe — dividers, borders, accents */ --white: #FFFFFF; /* White — clean digital / high-contrast */ /* ---- Tints & supporting steps (derived, harmonious) ---- */ --navy-700: #1F2E40; /* hover/raised navy */ --navy-300: #6A7787; /* muted navy-grey */ --taupe-light: #D8CDBB; /* hairline on cream */ --taupe-dark: #97876F; /* taupe text on light */ --cream-deep: #CFC4B1; /* deeper cream panel */ /* ---- Semantic surfaces ---- */ --bg: var(--cream-light); --bg-heritage: var(--cream); --bg-clean: var(--white); --bg-dark: var(--navy); --surface: var(--white); --border: var(--taupe); --border-soft: var(--taupe-light); --divider: var(--taupe); /* ---- Semantic text ---- */ --fg: var(--navy); /* primary text */ --fg-2: var(--charcoal); /* secondary text */ --fg-muted: var(--taupe-dark); /* muted/meta */ --fg-on-dark: var(--cream-light); /* text on navy */ --fg-on-dark-2: #A9B2BD; /* secondary text on navy */ /* ---- Functional (used sparingly; trades context) ---- */ --emergency: #B23A2E; /* deep brick red — emergency CTAs only */ --success: #2E6B4F; /* muted forest — confirmations */ /* ---- Type families ---- */ --font-head: 'Montserrat', system-ui, sans-serif; /* SemiBold 600 */ --font-body: 'Open Sans', system-ui, sans-serif; /* 400 / 600 */ --font-label: 'Montserrat', system-ui, sans-serif; /* Medium 500, tracked caps */ /* ---- Type scale (modular ~1.25, 16px base) ---- */ --t-display: clamp(44px, 6vw, 72px); /* @kind font */ --t-h1: clamp(34px, 4.4vw, 52px); /* @kind font */ --t-h2: clamp(27px, 3vw, 36px); /* @kind font */ --t-h3: 22px; --t-h4: 18px; --t-body-lg: 19px; --t-body: 16px; --t-small: 14px; --t-label: 13px; --t-micro: 11px; /* ---- Tracking ---- */ --track-label: 0.18em; /* WINNIPEG / EST. 1957 style */ --track-tag: 0.12em; /* service category tags */ --track-tight: -0.01em; /* large headlines */ /* ---- Radii (restrained / heritage) ---- */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px; /* ---- Spacing scale (4px base) ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* ---- Elevation (soft, low — print-friendly) ---- */ --shadow-sm: 0 1px 2px rgba(21,27,35,.08); --shadow-md: 0 6px 18px rgba(21,27,35,.10); --shadow-lg: 0 18px 48px rgba(21,27,35,.16); } /* ============================================================ Semantic element styles — opt in with class names ============================================================ */ .bcp-display { font-family: var(--font-head); font-weight: 700; font-size: var(--t-display); line-height: 1.02; letter-spacing: var(--track-tight); color: var(--fg); } .bcp-h1 { font-family: var(--font-head); font-weight: 600; font-size: var(--t-h1); line-height: 1.08; letter-spacing: var(--track-tight); color: var(--fg); } .bcp-h2 { font-family: var(--font-head); font-weight: 600; font-size: var(--t-h2); line-height: 1.14; color: var(--fg); } .bcp-h3 { font-family: var(--font-head); font-weight: 600; font-size: var(--t-h3); line-height: 1.25; color: var(--fg); } .bcp-body { font-family: var(--font-body); font-weight: 400; font-size: var(--t-body); line-height: 1.6; color: var(--fg-2); } .bcp-body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--t-body-lg); line-height: 1.6; color: var(--fg-2); } /* Tracked uppercase labels: WINNIPEG · EST. 1957 · EMERGENCY SERVICE */ .bcp-label { font-family: var(--font-label); font-weight: 500; font-size: var(--t-label); line-height: 1; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--fg-2); } .bcp-tag { font-family: var(--font-label); font-weight: 600; font-size: var(--t-micro); line-height: 1; text-transform: uppercase; letter-spacing: var(--track-tag); color: var(--navy); } /* ============================================================ Buttons ============================================================ */ .bcp-btn { font-family: var(--font-label); font-weight: 600; font-size: var(--t-small); text-transform: uppercase; letter-spacing: var(--track-tag); padding: 14px 26px; border-radius: var(--r-md); border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: background .18s ease, transform .06s ease, color .18s ease; } .bcp-btn--primary { background: var(--navy); color: var(--cream-light); } .bcp-btn--primary:hover { background: var(--navy-700); } .bcp-btn--primary:active { transform: translateY(1px); } .bcp-btn--ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); } .bcp-btn--ghost:hover { background: var(--navy); color: var(--cream-light); } .bcp-btn--emergency { background: var(--emergency); color: #fff; } .bcp-btn--emergency:hover { background: #9C3026; } /* ============================================================ Graphic elements ============================================================ */ .bcp-rule { height: 1px; background: var(--divider); border: 0; } /* Logo-style label rule: short dashes flanking centered caps */ .bcp-rule-flank { display: flex; align-items: center; gap: 16px; } .bcp-rule-flank::before, .bcp-rule-flank::after { content: ""; height: 2px; width: 44px; background: var(--navy); flex: none; } /* Subtle swoosh underline inspired by the wordmark tail */ .bcp-swoosh { display: inline-block; height: 10px; width: 120px; border-radius: 0 0 60px 60px / 0 0 18px 18px; border-bottom: 4px solid var(--navy); border-right: 4px solid transparent; } .bcp-badge-est { font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-tag); font-size: 12px; color: var(--navy); border: 2px solid var(--navy); border-radius: var(--r-pill); padding: 8px 16px; display: inline-flex; align-items: center; gap: 8px; } .bcp-card { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-md); border: 1px solid var(--border-soft); } /* ============================================================ Global reset — remove default UA body margin so full-bleed (full-colour) hero and section backgrounds reach the screen edge on every device. Fixes the white frame seen on mobile. ============================================================ */ html, body { margin: 0; padding: 0; }