/*
* ============================================================
* KILLBLANE CONSULTING — BRAND STYLESHEET
* killblane.co
* ============================================================
*
* HOW TO USE IN REPLIT
* ─────────────────────
* 1. Add this file to your project as: killblane-brand.css
* 2. In your HTML , add BOTH of these lines:
*
*
*
*
* 3. The stylesheet does the following automatically:
* - Sets global CSS variables (colors, spacing, type)
* - Resets base styles and applies brand fonts/colors
* - Provides ready-to-use component classes
* - Provides utility classes for quick layout
*
* TELL REPLIT AI:
* "Apply the killblane-brand.css stylesheet to this project.
* Use the CSS variables and component classes defined in it
* for all UI elements. Do not override the :root variables."
*
* ============================================================
*/
/* ════════════════════════════════════════════════════════════
1. DESIGN TOKENS — CSS CUSTOM PROPERTIES
Reference these variables everywhere. Never hardcode colors.
════════════════════════════════════════════════════════════ */
:root {
/* Brand Colors */
--color-gold: #C49A28;
--color-gold-muted: #8a6e24;
--color-orange: #C4621A; /* Forge Orange — primary accent */
--color-orange-muted: #7a3e10;
--color-orange-glow: rgba(196, 98, 26, 0.09);
/* Dark Backgrounds */
--color-bg: #0b0b0d; /* Page background */
--color-bg-card: #111114; /* Card / panel background */
--color-bg-surface: #17171b; /* Elevated surface, hover state */
/* Borders */
--color-border: #202028; /* Default border */
--color-border-subtle: #15151a; /* Subtle dividers */
/* Light Surfaces */
--color-ivory: #f3f0ea; /* Light background */
--color-ivory-border: #e2ddd5; /* Light border */
/* Text */
--color-text: #f3f0ea; /* Primary text (ivory) */
--color-text-dim: #44424c; /* Secondary / subdued text */
--color-text-mid: #888090; /* Placeholder / disabled */
--color-text-on-light: #131316; /* Text on ivory backgrounds */
/* Semantic Aliases */
--color-primary: var(--color-orange);
--color-secondary: var(--color-gold);
--color-background: var(--color-bg);
--color-surface: var(--color-bg-card);
--color-text-primary: var(--color-text);
--color-text-secondary: var(--color-text-dim);
--color-accent: var(--color-orange);
/* ── Typography ── */
--font-display: 'DM Sans', sans-serif;
--font-body: 'DM Sans', sans-serif;
--font-mono: 'Space Mono', monospace;
--font-weight-thin: 200;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
/* Type Scale */
--text-xs: 9px;
--text-sm: 11px;
--text-base: 14px;
--text-md: 16px;
--text-lg: 20px;
--text-xl: 28px;
--text-2xl: 36px;
--text-3xl: 48px;
--text-4xl: 64px;
/* Letter Spacing */
--ls-tight: 0.02em;
--ls-normal: 0.04em;
--ls-wide: 0.12em;
--ls-wider: 0.22em;
--ls-widest: 0.34em;
--ls-mono: 0.25em; /* For Space Mono labels */
/* Line Height */
--lh-tight: 1.1;
--lh-snug: 1.3;
--lh-normal: 1.6;
--lh-relaxed: 1.8;
/* ── Spacing ── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* ── Border Radius ── */
--radius-sm: 3px;
--radius-md: 5px;
--radius-lg: 8px;
--radius-xl: 16px;
/* ── Transitions ── */
--transition-fast: 150ms ease;
--transition-base: 200ms ease;
--transition-slow: 350ms ease;
/* ── Shadows ── */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
--shadow-md: 0 4px 16px rgba(0,0,0,0.5);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
--shadow-orange: 0 0 32px rgba(196,98,26,0.15);
/* ── Max Widths ── */
--max-width-sm: 640px;
--max-width-md: 768px;
--max-width-lg: 980px;
--max-width-xl: 1200px;
}
/* ════════════════════════════════════════════════════════════
2. BASE RESET & GLOBAL STYLES
════════════════════════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
}
/* NOTE: Do NOT add unlayered `margin: 0` / `padding: 0` rules here.
Tailwind v4's preflight (in @layer base) already zeros default user-agent
margins on body, h1-h6, p, ul, ol, blockquote, dl, dd, hr, figure, pre.
Putting any reset in this unlayered file would override @layer utilities
like `mt-3`, `pl-4`, `mb-12` etc. on those tags — which is the bug we
just fixed. Add new resets inside @layer base { ... } in src/index.css
if you genuinely need them. */
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
}
body {
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-weight: var(--font-weight-regular);
font-size: var(--text-md);
line-height: var(--lh-normal);
}
img, svg, video {
display: block;
max-width: 100%;
}
a {
color: var(--color-orange);
text-decoration: none;
transition: opacity var(--transition-fast);
}
a:hover {
opacity: 0.75;
}
::selection {
background: var(--color-orange);
color: var(--color-ivory);
}
/* ════════════════════════════════════════════════════════════
3. TYPOGRAPHY
════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: var(--font-weight-thin);
line-height: var(--lh-tight);
letter-spacing: var(--ls-wide);
color: var(--color-text);
}
h1 { font-size: var(--text-4xl); letter-spacing: var(--ls-wider); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); letter-spacing: var(--ls-normal); }
h6 { font-size: var(--text-md); letter-spacing: var(--ls-normal); }
p {
line-height: var(--lh-normal);
color: var(--color-text-dim);
max-width: 68ch;
}
small {
font-size: var(--text-sm);
color: var(--color-text-mid);
}
strong { font-weight: var(--font-weight-medium); color: var(--color-text); }
code, pre {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--color-orange);
background: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
code { padding: 2px 6px; }
pre {
padding: var(--space-6);
overflow-x: auto;
line-height: var(--lh-relaxed);
}
/* Label style — Space Mono caps, orange */
.label,
[data-label] {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
color: var(--color-orange);
font-weight: var(--font-weight-regular);
}
/* Eyebrow — above section headings */
.eyebrow {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
color: var(--color-text-dim);
margin-bottom: var(--space-3);
display: block;
}
/* ════════════════════════════════════════════════════════════
4. THE SIGNATURE RULE
The brand's graphic divider — orange fade-out line.
Used between "killblane" and "consulting" in the logotype,
and as a section divider throughout the site.
════════════════════════════════════════════════════════════ */
.brand-rule {
display: block;
width: 100%;
height: 1px;
border: none;
background: linear-gradient(
90deg,
var(--color-orange) 0%,
rgba(196, 98, 26, 0.15) 70%,
transparent 100%
);
opacity: 0.55;
margin: var(--space-3) 0;
}
/* Short variant — card / component divider */
.brand-rule--short {
max-width: 240px;
}
/* Center-fade variant — section divider */
.brand-rule--center {
background: linear-gradient(
90deg,
transparent 0%,
var(--color-orange) 40%,
var(--color-orange) 60%,
transparent 100%
);
opacity: 0.3;
}
/* Gold variant */
.brand-rule--gold {
background: linear-gradient(
90deg,
var(--color-gold) 0%,
rgba(196, 154, 40, 0.15) 70%,
transparent 100%
);
opacity: 0.55;
}
/* Light surface variant */
.brand-rule--light {
opacity: 0.35;
}
hr {
border: none;
height: 1px;
background: var(--color-border-subtle);
margin: var(--space-8) 0;
}
/* ════════════════════════════════════════════════════════════
5. LAYOUT
════════════════════════════════════════════════════════════ */
.container {
width: 100%;
max-width: var(--max-width-lg);
margin: 0 auto;
padding: 0 var(--space-8);
}
.container--wide { max-width: var(--max-width-xl); }
.container--narrow { max-width: var(--max-width-sm); }
.section {
padding: var(--space-20) 0;
}
.section--sm { padding: var(--space-12) 0; }
.section--lg { padding: var(--space-24) 0; }
/* Grid */
.grid {
display: grid;
gap: var(--space-6);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
/* 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); }
/* ════════════════════════════════════════════════════════════
6. NAVIGATION
════════════════════════════════════════════════════════════ */
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-6) var(--space-8);
background: var(--color-bg);
border-bottom: 1px solid var(--color-border-subtle);
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(12px);
background: rgba(11, 11, 13, 0.88);
}
.nav__brand {
display: flex;
align-items: center;
gap: var(--space-4);
text-decoration: none;
}
.nav__wordmark {
font-family: var(--font-display);
font-weight: var(--font-weight-thin);
font-size: var(--text-lg);
letter-spacing: var(--ls-wider);
color: var(--color-text);
line-height: 1;
}
.nav__wordmark span {
/* "consulting" sub-word */
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
color: var(--color-text-dim);
display: block;
margin-top: 2px;
}
.nav__links {
display: flex;
align-items: center;
gap: var(--space-8);
list-style: none;
}
.nav__links a {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
color: var(--color-text-dim);
transition: color var(--transition-fast);
}
.nav__links a:hover,
.nav__links a.active {
color: var(--color-text);
}
/* ════════════════════════════════════════════════════════════
7. HERO / PAGE HEADER
════════════════════════════════════════════════════════════ */
.hero {
padding: var(--space-24) 0;
position: relative;
overflow: hidden;
}
/* Dot grid texture */
.hero::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
z-index: 0;
}
/* Orange ambient glow */
.hero::after {
content: '';
position: absolute;
bottom: -150px;
right: -150px;
width: 600px;
height: 600px;
background: radial-gradient(circle, var(--color-orange-glow) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.hero__content {
position: relative;
z-index: 1;
}
.hero__title {
font-size: clamp(var(--text-3xl), 6vw, var(--text-4xl));
font-weight: var(--font-weight-thin);
letter-spacing: var(--ls-wider);
margin-bottom: var(--space-2);
}
.hero__rule {
/* The signature rule used as the logotype separator */
composes: brand-rule;
margin: var(--space-4) 0;
}
.hero__subtitle {
font-family: var(--font-mono);
font-size: var(--text-sm);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
color: var(--color-text-dim);
margin-bottom: var(--space-8);
}
.hero__description {
font-size: var(--text-lg);
font-weight: var(--font-weight-light);
color: var(--color-text-dim);
max-width: 56ch;
line-height: var(--lh-relaxed);
margin-bottom: var(--space-10);
}
/* ════════════════════════════════════════════════════════════
8. BUTTONS
════════════════════════════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--font-weight-regular);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
text-decoration: none;
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-sm);
border: 1px solid transparent;
cursor: pointer;
transition: all var(--transition-base);
white-space: nowrap;
}
/* Primary — orange fill */
.btn--primary {
background: var(--color-orange);
color: var(--color-ivory);
border-color: var(--color-orange);
}
.btn--primary:hover {
opacity: 0.85;
color: var(--color-ivory);
}
/* Secondary — outlined */
.btn--secondary {
background: transparent;
color: var(--color-text);
border-color: var(--color-border);
}
.btn--secondary:hover {
border-color: var(--color-orange);
color: var(--color-orange);
}
/* Ghost — text only with arrow */
.btn--ghost {
background: transparent;
color: var(--color-orange);
border-color: transparent;
padding-left: 0;
}
.btn--ghost:hover {
opacity: 0.7;
color: var(--color-orange);
}
/* Gold variant */
.btn--gold {
background: transparent;
color: var(--color-gold);
border-color: var(--color-gold);
}
.btn--gold:hover {
background: var(--color-gold);
color: var(--color-bg);
}
/* Sizes */
.btn--sm { padding: var(--space-2) var(--space-4); font-size: 8px; }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-sm); }
/* ════════════════════════════════════════════════════════════
9. CARDS
════════════════════════════════════════════════════════════ */
.card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: var(--space-8);
position: relative;
overflow: hidden;
transition: border-color var(--transition-base);
}
/* Dot grid texture on cards */
.card::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 18px 18px;
pointer-events: none;
z-index: 0;
}
/* Orange glow on hover */
.card::after {
content: '';
position: absolute;
top: -80px;
right: -80px;
width: 240px;
height: 240px;
background: radial-gradient(circle, rgba(196,98,26,0.06) 0%, transparent 65%);
pointer-events: none;
z-index: 0;
opacity: 0;
transition: opacity var(--transition-slow);
}
.card:hover {
border-color: var(--color-border-subtle);
}
.card:hover::after {
opacity: 1;
}
.card__content {
position: relative;
z-index: 1;
}
.card__label {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
color: var(--color-orange);
margin-bottom: var(--space-4);
display: block;
}
.card__title {
font-size: var(--text-xl);
font-weight: var(--font-weight-thin);
letter-spacing: var(--ls-wide);
color: var(--color-text);
margin-bottom: var(--space-3);
}
.card__body {
font-size: var(--text-base);
color: var(--color-text-dim);
line-height: var(--lh-normal);
}
/* Light card */
.card--light {
background: var(--color-ivory);
border-color: var(--color-ivory-border);
}
.card--light::before { display: none; }
.card--light .card__title { color: var(--color-text-on-light); }
.card--light .card__body { color: #888; }
/* ════════════════════════════════════════════════════════════
10. FORMS & INPUTS
════════════════════════════════════════════════════════════ */
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-6);
}
.form-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
color: var(--color-text-dim);
}
.input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
width: 100%;
background: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: var(--space-3) var(--space-4);
color: var(--color-text);
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--font-weight-light);
outline: none;
transition: border-color var(--transition-fast);
appearance: none;
}
.input:focus,
input:focus,
textarea:focus,
select:focus {
border-color: var(--color-orange);
}
.input::placeholder,
input::placeholder,
textarea::placeholder {
color: var(--color-text-dim);
opacity: 0.5;
}
textarea {
resize: vertical;
min-height: 120px;
line-height: var(--lh-normal);
}
/* ════════════════════════════════════════════════════════════
11. BADGES & TAGS
════════════════════════════════════════════════════════════ */
.badge {
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: var(--ls-mono);
text-transform: uppercase;
padding: 3px var(--space-3);
border-radius: 2px;
border: 1px solid currentColor;
}
.badge--orange { color: var(--color-orange); }
.badge--gold { color: var(--color-gold); }
.badge--dim { color: var(--color-text-dim); }
.badge--filled-orange {
background: var(--color-orange);
color: var(--color-ivory);
border-color: var(--color-orange);
}
/* ════════════════════════════════════════════════════════════
12. SECTION DIVIDERS & DECORATIVE ELEMENTS
════════════════════════════════════════════════════════════ */
/* The dot grid — apply as background to any section */
.bg-dot-grid {
background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px);
background-size: 28px 28px;
}
/* Orange ambient glow — apply to positioned containers */
.bg-orange-glow::after {
content: '';
position: absolute;
bottom: -150px;
right: -150px;
width: 500px;
height: 500px;
background: radial-gradient(circle, var(--color-orange-glow) 0%, transparent 60%);
pointer-events: none;
}
/* Vertical left accent bar */
.accent-bar-left {
border-left: 2px solid var(--color-orange);
padding-left: var(--space-5);
opacity: 0.8;
}
/* Section header pattern */
.section-header {
margin-bottom: var(--space-12);
}
.section-header .eyebrow {
margin-bottom: var(--space-3);
}
.section-header h2 {
margin-bottom: var(--space-4);
}
.section-header .brand-rule {
max-width: 320px;
margin-bottom: var(--space-4);
}
.section-header p {
color: var(--color-text-dim);
font-size: var(--text-lg);
font-weight: var(--font-weight-light);
}
/* ════════════════════════════════════════════════════════════
13. THE K MARK — INLINE SVG SNIPPET
Copy the SVG below and paste directly into your HTML.
Three sizes provided. Change fill colors via CSS if needed.
════════════════════════════════════════════════════════════
DARK (primary) — paste into dark backgrounds:
LIGHT — paste into ivory/white backgrounds:
FAVICON (16x16 / 32x32) — add to :
Save the dark SVG as favicon.svg, then:
════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
14. LOGO LOCKUP COMPONENT
HTML structure:
[K mark SVG here]
killblane
consulting
════════════════════════════════════════════════════════════ */
.logo {
display: inline-flex;
align-items: center;
gap: var(--space-4);
text-decoration: none;
}
.logo__text {
text-align: left;
}
.logo__name {
display: block;
font-family: var(--font-display);
font-weight: var(--font-weight-thin);
font-size: var(--text-xl);
letter-spacing: var(--ls-wider);
color: var(--color-text);
line-height: 1;
}
.logo__rule {
margin: var(--space-2) 0;
}
.logo__sub {
display: block;
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
color: var(--color-text-dim);
}
/* On light background */
.logo--light .logo__name { color: var(--color-text-on-light); }
/* ════════════════════════════════════════════════════════════
15. FOOTER
════════════════════════════════════════════════════════════ */
.footer {
border-top: 1px solid var(--color-border-subtle);
padding: var(--space-12) 0;
margin-top: var(--space-20);
}
.footer__inner {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-8);
flex-wrap: wrap;
}
.footer__brand .logo__name {
font-size: var(--text-lg);
}
.footer__copy {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-text-dim);
letter-spacing: var(--ls-mono);
margin-top: var(--space-4);
}
.footer__links {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.footer__links a {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
color: var(--color-text-dim);
transition: color var(--transition-fast);
}
.footer__links a:hover {
color: var(--color-orange);
opacity: 1;
}
/* ════════════════════════════════════════════════════════════
16. UTILITIES
════════════════════════════════════════════════════════════ */
/* Colors */
.text-orange { color: var(--color-orange); }
.text-gold { color: var(--color-gold); }
.text-dim { color: var(--color-text-dim); }
.text-mid { color: var(--color-text-mid); }
.text-primary { color: var(--color-text); }
.text-on-light { color: var(--color-text-on-light); }
/* Backgrounds */
.bg-obs { background: var(--color-bg); }
.bg-card { background: var(--color-bg-card); }
.bg-surface { background: var(--color-bg-surface); }
.bg-ivory { background: var(--color-ivory); }
.bg-orange { background: var(--color-orange); }
/* Type */
.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }
.font-thin { font-weight: var(--font-weight-thin); }
.font-light { font-weight: var(--font-weight-light); }
.tracking-wide { letter-spacing: var(--ls-wide); }
.tracking-wider { letter-spacing: var(--ls-wider); }
.tracking-widest { letter-spacing: var(--ls-widest); }
.tracking-mono { letter-spacing: var(--ls-mono); }
.uppercase { text-transform: uppercase; }
/* Spacing */
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
/* Borders */
.border { border: 1px solid var(--color-border); }
.border-subtle { border: 1px solid var(--color-border-subtle); }
.border-orange { border-color: var(--color-orange); }
.rounded { border-radius: var(--radius-sm); }
/* Display */
.hidden { display: none; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
/* Dot grid as utility */
.dot-grid {
background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px);
background-size: 28px 28px;
}
/* ════════════════════════════════════════════════════════════
17. RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
:root {
--text-4xl: 40px;
--text-3xl: 32px;
--text-2xl: 26px;
}
.container {
padding: 0 var(--space-5);
}
.nav {
padding: var(--space-4) var(--space-5);
}
.nav__links {
gap: var(--space-5);
}
.grid--2,
.grid--3,
.grid--4 {
grid-template-columns: 1fr;
}
.hero {
padding: var(--space-16) 0;
}
.footer__inner {
flex-direction: column;
}
}
@media (max-width: 480px) {
.nav__links {
display: none; /* implement a mobile menu separately */
}
}
/* ════════════════════════════════════════════════════════════
END OF KILLBLANE CONSULTING BRAND STYLESHEET
killblane.co · v1.0
════════════════════════════════════════════════════════════ */