/* ===================================================================== brand.css — McKim & Co. global brand layer --------------------------------------------------------------------- Stage 1 of the redesign. Promotes design tokens + typography globally and re-skins the existing Bootstrap 3 chrome (navbar, buttons, forms, footer) WITHOUT changing any markup structure or the role-driven nav. LOAD ORDER (in Site.Master ): 1. bootstrap.min.css (CDN) 2. /Content/site.css (existing) 3. /Content/brand.css (this file — must load LAST so it cascades over Bootstrap) Fonts are linked separately in (Source Serif 4, IBM Plex Sans, IBM Plex Mono). See the head snippet provided alongside this file. "Two speeds": this file gives every page the brand (palette + type + chrome). Editorial treatment for marketing pages uses the opt-in utility classes at the bottom; utility pages simply inherit the base. ===================================================================== */ :root { /* Foundation */ --ink: #0F1419; --paper: #F5F4F0; --paper-2: #ECEAE3; --paper-3: #E2DED3; --rule: #1A222C; /* Structure & voice */ --steel: #1E3A52; --steel-light:#2A4D6B; --muted: #5A6470; /* The one accent */ --signal: #C8541E; /* Functional (forms, alerts) */ --field: #FFFFFF; --success: #3E6B4F; --danger: #9E3328; /* Type */ --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; } /* ---------- Base ---------------------------------------------------- */ body { background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; padding-top: 70px; /* offset for the fixed navbar */ } h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-family: var(--serif); color: var(--ink); font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; } h1, .h1 { font-weight: 400; } p { color: var(--ink); } a { color: var(--steel); } a:hover, a:focus { color: var(--steel-light); } hr { border-top: 1px solid var(--paper-3); } :focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; } /* ---------- Navbar (re-skin navbar-inverse) ------------------------ */ .navbar-inverse { background-color: var(--ink); border: none; border-bottom: 1px solid var(--rule); } .navbar-inverse .navbar-brand { color: var(--paper); font-family: var(--serif); font-weight: 600; letter-spacing: 0; } .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus { color: #fff; } /* nav links: mono micro-labels, the dadv2 topbar treatment */ .navbar-inverse .navbar-nav > li > a { color: rgba(245,244,240,0.82); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { color: #fff; } .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus { background-color: var(--steel); color: #fff; } .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus { background-color: var(--steel); color: #fff; } /* dropdowns on paper */ .navbar-inverse .dropdown-menu { background-color: var(--paper); border: 1px solid var(--rule); box-shadow: 0 6px 18px rgba(15,20,25,0.12); } .navbar-inverse .dropdown-menu > li > a { color: var(--ink); font-family: var(--sans); font-size: 14px; text-transform: none; letter-spacing: 0; } .navbar-inverse .dropdown-menu > li > a:hover, .navbar-inverse .dropdown-menu > li > a:focus { background-color: var(--paper-2); color: var(--steel); } .navbar-inverse .dropdown-menu .divider { background-color: var(--paper-3); } /* mobile toggle + caret */ .navbar-inverse .navbar-toggle { border-color: var(--steel); } .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background-color: var(--steel); } .navbar-inverse .navbar-toggle .icon-bar { background-color: var(--paper); } .navbar-inverse .navbar-collapse { border-color: var(--rule); } /* notification badge → brand danger (was #d9534f inline) */ .navbar .badge { background-color: var(--danger) !important; } /* ---------- Buttons ------------------------------------------------ */ .btn { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; border-radius: 3px; } .btn-primary { background-color: var(--ink); border-color: var(--ink); color: var(--paper); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--steel); border-color: var(--steel); color: #fff; } .btn-default { background-color: transparent; border-color: var(--ink); color: var(--ink); } .btn-default:hover, .btn-default:focus { background-color: var(--ink); border-color: var(--ink); color: var(--paper); } /* the single orange call-to-action (assessment) */ .btn-signal { background-color: var(--signal); border: 1px solid var(--signal); color: #fff; } .btn-signal:hover, .btn-signal:focus { background-color: #b04817; border-color: #b04817; color: #fff; } .btn:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; } /* ---------- Forms (functional states) ------------------------------ */ .form-control { background-color: var(--field); border: 1px solid var(--paper-3); color: var(--ink); border-radius: 3px; box-shadow: none; } .form-control:focus { border-color: var(--steel); box-shadow: 0 0 0 3px rgba(30,58,82,0.22); } /* validation: color + Bootstrap structure; markup still supplies label/icon */ .has-success .form-control { border-color: var(--success); } .has-error .form-control { border-color: var(--danger); } .has-error .help-block, .has-error .control-label { color: var(--danger); } .alert-success { background-color: #EAF1EC; border-color: var(--success); color: #234032; } .alert-danger { background-color: #F7E9E7; border-color: var(--danger); color: #5E1F18; } /* ---------- Footer ------------------------------------------------- */ footer { padding: 24px 0; } footer .text-muted { color: var(--muted) !important; font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; } /* ===================================================================== Editorial utilities — OPT-IN, for marketing pages (Home/About/Products) Utility/admin pages ignore these and just inherit the base above. ===================================================================== */ .brand-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .brand-display { font-family: var(--serif); font-weight: 400; letter-spacing: -0.025em; line-height: 0.98; } .brand-display em { font-style: italic; color: var(--steel); } /* one orange underline signature */ .signal-underline { position: relative; display: inline-block; } .signal-underline::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.05em; height: 6px; background: var(--signal); opacity: 0.85; z-index: -1; } /* full-bleed dark band for the light/dark rhythm */ .section-dark { background: var(--ink); color: var(--paper); } .section-dark .brand-eyebrow { color: rgba(245,244,240,0.7); } .section-dark .brand-display, .section-dark h1, .section-dark h2, .section-dark h3 { color: var(--paper); } .section-dark .brand-display em {color: var(--signal); } .global-cta.section-dark h2, .global-cta.section-dark .brand-display { color: var(--paper) !important; } .global-cta.section-dark .brand-display em { color: var(--signal) !important; } /* pullquote */ .pullquote { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(24px, 3.5vw, 38px); line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); } /* stat figure / label (proof + failure stats) */ .stat-figure { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.5vw, 64px); line-height: 0.96; letter-spacing: -0.03em; } .stat-figure em { font-style: italic; color: var(--signal); } .stat-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-top: 8px; } .section-dark .stat-label { color: rgba(245,244,240,0.8); }