/* ═══════════════════════════════════════════════════════════
HILLSTEAD GROUP — DESIGN SYSTEM v1.2
Google Fonts (both verified available):
· Cormorant Garamond — display/headers
fonts.google.com/specimen/Cormorant+Garamond
· Sora — body/UI
fonts.google.com/specimen/Sora
Import both in your HTML :
═══════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════
COLOR TOKENS
════════════════════════════════════════════════════════ */
:root {
/* Backgrounds — warm cream, slightly cooled to harmonise with teal */
--color-bg: #F6F4F0; /* Warm Stone — primary background */
--color-bg-alt: #EDEBE5; /* Parchment — alternate sections */
--color-white: #FFFFFF; /* Pure white — card hover, overlays */
/* Ink / Text — teal undertone keeps everything cohesive */
--color-ink: #0C1A1F; /* Deep Teal Ink — primary text */
--color-ink-mid: #3A4A50; /* Cool Slate — body copy, secondary */
--color-ink-subtle: #748088; /* Muted Slate — labels, metadata */
/* Brand Teal — primary */
--color-accent: #0C2D3A; /* Deep Midnight Teal — CTAs, eyebrows, active */
--color-accent-hover: #163E50; /* Teal Mid — hover states */
--color-accent-lt: #2A6070; /* Teal Light — links, inline highlights */
/* Secondary — Slate bridges teal and neutral */
--color-secondary: #4A6070; /* Slate — secondary UI, subheadings, midtone */
/* Structure */
--color-rule: #D8D5CE; /* Linen — dividers, borders */
--color-rule-dark: rgba(255,255,255,0.08); /* Dividers on dark backgrounds */
}
/* ════════════════════════════════════════════════════════
TYPOGRAPHY TOKENS
════════════════════════════════════════════════════════ */
:root {
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-body: 'Sora', system-ui, sans-serif;
}
/* ════════════════════════════════════════════════════════
TYPE SCALE
════════════════════════════════════════════════════════ */
:root {
/* Display — Cormorant Garamond */
--type-display-xl: clamp(3.5rem, 8vw, 7rem); /* Hero H1 */
--type-display-lg: clamp(2rem, 4.5vw, 3.5rem); /* Section H2 */
--type-display-md: clamp(1.6rem, 3vw, 2.6rem); /* Pull quote / belief */
--type-display-sm: 1.5rem; /* Card H3 */
--type-display-xs: 1.25rem; /* Card H4 */
--type-stat: 2.4rem; /* Hero stats */
/* Body — Sora */
--type-body-lg: clamp(1rem, 2vw, 1.15rem); /* Lead paragraph */
--type-body: 1rem; /* Standard body */
--type-body-sm: 0.875rem; /* Secondary text */
--type-caption: 0.78rem; /* Labels, metadata */
--type-eyebrow: 0.75rem; /* Section eyebrows */
--type-nav: 0.85rem; /* Navigation links */
--type-btn: 0.82rem; /* Button text */
/* Line Heights */
--lh-display: 1.06;
--lh-heading: 1.12;
--lh-tight: 1.2;
--lh-snug: 1.35;
--lh-body: 1.7;
--lh-relaxed: 1.8;
/* Letter Spacing */
--ls-tight: -0.02em;
--ls-normal: -0.01em;
--ls-open: 0.03em;
--ls-wide: 0.06em;
--ls-wider: 0.08em;
--ls-widest: 0.12em;
}
/* ════════════════════════════════════════════════════════
SPACING SCALE (8px base unit)
════════════════════════════════════════════════════════ */
:root {
--space-1: 0.5rem; /* 8px */
--space-2: 1rem; /* 16px */
--space-3: 1.5rem; /* 24px */
--space-4: 2rem; /* 32px */
--space-6: 3rem; /* 48px */
--space-8: 4rem; /* 64px */
--space-10: 5rem; /* 80px */
--space-12: 6rem; /* 96px */
--space-16: 8rem; /* 128px */
--section-pad: clamp(5rem, 10vw, 8rem);
--pad-x: clamp(1.5rem, 5vw, 4rem);
--max-width: 1160px;
--nav-height: 64px;
}
/* ════════════════════════════════════════════════════════
BORDER & MOTION
════════════════════════════════════════════════════════ */
:root {
--radius-none: 0; /* Cards, buttons — sharp/institutional */
--radius-sm: 2px; /* Tags, nav CTA — barely-there rounding */
--ease-default: ease;
--duration-fast: 0.15s;
--duration-base: 0.2s;
--duration-slow: 0.65s;
}
/* ════════════════════════════════════════════════════════
BASE RESET
════════════════════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html { scroll-behavior: smooth; }
body {
background: var(--color-bg);
color: var(--color-ink);
font-family: var(--font-body);
font-size: 1rem;
font-weight: 300;
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* ════════════════════════════════════════════════════════
LAYOUT
════════════════════════════════════════════════════════ */
.container {
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--pad-x);
}
/* ════════════════════════════════════════════════════════
TYPOGRAPHY COMPONENTS
════════════════════════════════════════════════════════ */
/* Eyebrow label — used before section titles */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-body);
font-size: var(--type-eyebrow);
font-weight: 500;
letter-spacing: var(--ls-widest);
text-transform: uppercase;
color: var(--color-accent);
}
.eyebrow::before {
content: '';
display: block;
width: 20px;
height: 1px;
background: currentColor;
flex-shrink: 0;
}
/* Section header wrapper */
.section-header { margin-bottom: 3.5rem; }
.section-header .eyebrow { margin-bottom: 1rem; }
/* ════════════════════════════════════════════════════════
WORDMARK (stacked — mirrors tylerchaney.com treatment)
════════════════════════════════════════════════════════ */
.wordmark {
display: inline-flex;
flex-direction: column;
line-height: 1.15;
font-family: var(--font-body);
text-transform: uppercase;
}
.wordmark-primary {
font-size: 0.88rem;
font-weight: 600;
letter-spacing: 0.18em;
color: var(--color-ink);
}
.wordmark-secondary {
font-size: 0.62rem;
font-weight: 400;
letter-spacing: 0.42em;
color: var(--color-ink-subtle);
margin-top: 0.1rem;
}
/* Inverted variant for dark backgrounds */
.wordmark-light .wordmark-primary { color: #FFFFFF; }
.wordmark-light .wordmark-secondary { color: rgba(255,255,255,0.45); }
/* ════════════════════════════════════════════════════════
BUTTON COMPONENTS
════════════════════════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-body);
font-size: var(--type-btn);
font-weight: 500;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
border-radius: var(--radius-sm);
cursor: pointer;
transition:
background var(--duration-base),
color var(--duration-base),
border-color var(--duration-base);
white-space: nowrap;
}
/* Primary — brand teal fill */
.btn-primary {
padding: 0.9rem 2rem;
background: var(--color-accent);
color: #FFFFFF;
border: 1px solid var(--color-accent);
}
.btn-primary:hover {
background: var(--color-accent-hover);
border-color: var(--color-accent-hover);
}
/* Ghost — transparent with ink border */
.btn-ghost {
padding: 0.9rem 2rem;
background: transparent;
color: var(--color-ink);
border: 1px solid var(--color-ink);
}
.btn-ghost:hover {
background: var(--color-ink);
color: var(--color-white);
}
/* Ghost Light — for use on dark backgrounds */
.btn-ghost-light {
padding: 0.9rem 2rem;
background: transparent;
color: #FFFFFF;
border: 1px solid rgba(255,255,255,0.3);
}
.btn-ghost-light:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.6);
}
/* Nav CTA */
.btn-nav {
padding: 0.55rem 1.4rem !important;
background: var(--color-accent);
color: #FFFFFF !important;
border-radius: var(--radius-sm);
font-size: 0.8rem !important;
font-weight: 500 !important;
letter-spacing: var(--ls-wide) !important;
text-transform: uppercase;
transition: background var(--duration-base) !important;
}
.btn-nav:hover { background: var(--color-accent-hover) !important; }
/* ════════════════════════════════════════════════════════
CARD COMPONENTS
════════════════════════════════════════════════════════ */
/* Service card — sharp border grid layout */
.card-service {
background: var(--color-bg);
padding: 2.8rem 2.8rem 3rem;
border-radius: var(--radius-none);
transition: background var(--duration-base);
}
.card-service:hover { background: var(--color-white); }
/* Client card */
.card-client {
background: var(--color-bg-alt);
padding: 2.8rem 2.4rem;
border-radius: var(--radius-none);
}
/* Tag / credential badge */
.tag {
display: inline-block;
padding: 0.35rem 0.9rem;
border: 1px solid var(--color-rule);
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: var(--type-caption);
font-weight: 500;
color: var(--color-ink-mid);
letter-spacing: 0.04em;
}
/* ════════════════════════════════════════════════════════
CLIENT LOGO STRIP (text wordmarks OR image logos, grayscale)
════════════════════════════════════════════════════════ */
.logo-strip {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 1.2rem 3rem;
}
.logo-strip-item {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--color-ink-subtle);
white-space: nowrap;
}
/* Image-logo variant — grayscale with hover lift */
.logo-strip--images { align-items: center; gap: 1.5rem 2.8rem; }
.logo-strip-img {
height: 34px;
width: auto;
max-width: 150px;
object-fit: contain;
filter: grayscale(1);
opacity: 0.65;
transition: opacity var(--duration-base), filter var(--duration-base);
}
.logo-strip-img:hover {
opacity: 1;
filter: grayscale(0);
}
@media (max-width: 900px) {
.logo-strip--images { gap: 1.2rem 2rem; }
.logo-strip-img { height: 28px; max-width: 120px; }
}
/* ════════════════════════════════════════════════════════
GRID PATTERNS
════════════════════════════════════════════════════════ */
/* Services — 3-col sharp grid with 1px gap lines */
.grid-services {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--color-rule);
border: 1px solid var(--color-rule);
}
/* Clients — 3-col */
.grid-clients {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
background: var(--color-rule);
border: 1px solid var(--color-rule);
margin-top: 3.5rem;
}
/* Process — 3-col open */
.grid-process {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
margin-top: 3.5rem;
}
/* ════════════════════════════════════════════════════════
ICON CIRCLE
════════════════════════════════════════════════════════ */
.icon-circle {
width: 40px;
height: 40px;
border: 1px solid var(--color-rule);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-accent);
flex-shrink: 0;
}
/* ════════════════════════════════════════════════════════
SCROLL REVEAL ANIMATION
════════════════════════════════════════════════════════ */
.reveal {
opacity: 0;
transform: translateY(24px);
transition:
opacity var(--duration-slow) var(--ease-default),
transform var(--duration-slow) var(--ease-default);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* ════════════════════════════════════════════════════════
NAVIGATION
════════════════════════════════════════════════════════ */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
background: rgba(246, 244, 240, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--color-rule);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--pad-x);
height: var(--nav-height);
}
.nav-links {
display: flex;
align-items: center;
gap: 2.5rem;
list-style: none;
}
.nav-links a {
font-family: var(--font-body);
font-size: var(--type-nav);
font-weight: 400;
color: var(--color-ink-mid);
letter-spacing: var(--ls-open);
transition: color var(--duration-base);
}
.nav-links a:hover { color: var(--color-ink); }
/* ════════════════════════════════════════════════════════
CONTACT ITEMS
════════════════════════════════════════════════════════ */
.contact-item {
display: flex;
flex-direction: column;
padding: 1.8rem 0;
border-bottom: 1px solid var(--color-rule-dark);
}
.contact-item:first-child { border-top: 1px solid var(--color-rule-dark); }
.contact-item-label {
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
margin-bottom: 0.4rem;
}
.contact-item-value {
font-size: 1rem;
color: #FFFFFF;
font-weight: 300;
transition: color var(--duration-base);
}
a.contact-item-value:hover { color: rgba(255,255,255,0.65); }
/* ════════════════════════════════════════════════════════
FOOTER
════════════════════════════════════════════════════════ */
.footer {
background: var(--color-ink);
border-top: 1px solid rgba(255,255,255,0.06);
padding: 2rem 0;
}
.footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.footer-copy {
font-size: 0.78rem;
color: rgba(255,255,255,0.2);
}
/* ════════════════════════════════════════════════════════
RESPONSIVE BREAKPOINTS
════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
.grid-services { grid-template-columns: 1fr; }
.grid-clients { grid-template-columns: 1fr; }
.grid-process { grid-template-columns: 1fr; gap: 2.5rem; }
.nav-links li:not(:last-child) { display: none; }
.logo-strip { gap: 1rem 2rem; }
.logo-strip-item { font-size: 1.1rem; }
}
@media (max-width: 600px) {
.card-service { padding: 2rem 1.6rem; }
.card-client { padding: 2rem 1.6rem; }
}