/* ================================================================
KRESOLUT DESIGN SYSTEM — kresolut-theme.css
================================================================
Reusable CSS foundation for all Kresolut products & websites.
HOW TO USE
──────────
1. Link this file BEFORE any page-specific stylesheet:
2. Also add the Google Fonts preconnect + link to your :
3. Override tokens in your page stylesheet by re-declaring
:root variables — no need to edit this file.
TABLE OF CONTENTS
─────────────────
1. Design Tokens (CSS Custom Properties)
2. Reset & Base
3. Typography Scale
4. Layout — Container & Grid Helpers
5. Utility Classes
6. Buttons
7. Cards
8. Badges & Tags
9. Form Elements
10. Navigation
11. Footer
12. Scroll Animations
13. Responsive Breakpoints
================================================================ */
/* ================================================================
1. DESIGN TOKENS
================================================================ */
:root {
/* --- Colour Palette — "Architect + Logo" --- */
--kr-bg: #F8F9FA; /* Page background — crisp off-white */
--kr-bg-card: #F1EDE8; /* Card / section backgrounds — warm */
--kr-bg-dark: #2C3038; /* Dark section background — deep navy */
--kr-accent: #B5A88A; /* Primary accent — warm beige/tan */
--kr-accent-dark: #9A8E72; /* Hover / pressed state */
--kr-accent-light: #C8BDA5; /* Subtle accent, dark-bg contexts */
--kr-text-dark: #2C3038; /* Headings — near-black */
--kr-text-body: #4A4E57; /* Body text — dark slate */
--kr-text-muted: #8A8D94; /* Captions, labels, placeholders */
--kr-border: #D9D4CD; /* Dividers, card borders */
--kr-white: #FFFFFF; /* Bright surface / card background */
/* --- Typography --- */
--kr-font-display: 'Cormorant Garamond', Georgia, serif;
--kr-font-body: 'Inter', system-ui, -apple-system, sans-serif;
--kr-text-base: 1rem; /* 16px root */
--kr-leading: 1.7; /* Default line-height */
/* --- Spacing Scale (4-pt grid) --- */
--kr-space-1: 0.25rem; /* 4px */
--kr-space-2: 0.5rem; /* 8px */
--kr-space-3: 0.75rem; /* 12px */
--kr-space-4: 1rem; /* 16px */
--kr-space-5: 1.25rem; /* 20px */
--kr-space-6: 1.5rem; /* 24px */
--kr-space-8: 2rem; /* 32px */
--kr-space-10: 2.5rem; /* 40px */
--kr-space-12: 3rem; /* 48px */
--kr-space-16: 4rem; /* 64px */
/* --- Section Rhythm --- */
--kr-section-pad: clamp(72px, 12vw, 130px);
/* --- Layout --- */
--kr-max-width: 1100px;
--kr-gutter: clamp(20px, 5vw, 60px);
/* --- Radius --- */
--kr-radius: 8px;
--kr-radius-sm: 4px;
--kr-radius-full: 9999px;
/* --- Shadows --- */
--kr-shadow-sm: 0 1px 4px rgba(44, 48, 56, 0.06);
--kr-shadow-md: 0 4px 16px rgba(44, 48, 56, 0.08);
--kr-shadow-lg: 0 8px 32px rgba(44, 48, 56, 0.11);
/* --- Motion --- */
--kr-transition: 0.3s ease;
--kr-transition-slow: 0.6s ease;
/* --- Z-index Scale --- */
--kr-z-nav: 100;
--kr-z-modal: 200;
--kr-z-toast: 300;
}
/* ================================================================
2. RESET & BASE
================================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
background-color: var(--kr-bg);
color: var(--kr-text-body);
font-family: var(--kr-font-body);
font-size: var(--kr-text-base);
line-height: var(--kr-leading);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
/* ================================================================
3. TYPOGRAPHY SCALE
================================================================ */
h1, h2, h3, h4, h5, h6 {
font-family: var(--kr-font-display);
color: var(--kr-text-dark);
line-height: 1.15;
font-weight: 600;
}
h1 { font-size: clamp(2.8rem, 6vw, 5rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); }
h4 {
font-size: 1.05rem;
font-family: var(--kr-font-body);
font-weight: 600;
letter-spacing: 0.01em;
}
h5 {
font-size: 0.9rem;
font-family: var(--kr-font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
}
p { max-width: 68ch; }
/* Display / hero variant */
.kr-display {
font-family: var(--kr-font-display);
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--kr-text-dark);
}
/* Section eyebrow label */
.kr-label {
display: inline-block;
font-family: var(--kr-font-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--kr-accent);
margin-bottom: 1rem;
}
/* Muted / caption text */
.kr-muted {
font-size: 0.85rem;
color: var(--kr-text-muted);
}
/* Lead paragraph */
.kr-lead {
font-size: clamp(1rem, 1.8vw, 1.15rem);
color: var(--kr-text-body);
line-height: 1.7;
}
/* ================================================================
4. LAYOUT — CONTAINER & GRID HELPERS
================================================================ */
/* Main content container */
.kr-container {
width: 100%;
max-width: var(--kr-max-width);
margin-inline: auto;
padding-inline: var(--kr-gutter);
}
/* Section wrapper with vertical rhythm */
.kr-section {
padding-block: var(--kr-section-pad);
}
.kr-section--dark {
background: var(--kr-bg-dark);
color: var(--kr-white);
}
.kr-section--card {
background: var(--kr-bg-card);
}
/* Auto-fit grid — responsive columns */
.kr-grid {
display: grid;
gap: 1.5rem;
}
.kr-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.kr-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kr-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Two-column with text + visual split */
.kr-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
/* Flex row center */
.kr-flex {
display: flex;
align-items: center;
gap: var(--kr-space-4);
}
.kr-flex--wrap { flex-wrap: wrap; }
.kr-flex--col { flex-direction: column; }
.kr-flex--between { justify-content: space-between; }
.kr-flex--center { justify-content: center; }
/* ================================================================
5. UTILITY CLASSES
================================================================ */
/* Text colours */
.kr-text-accent { color: var(--kr-accent); }
.kr-text-muted { color: var(--kr-text-muted); }
.kr-text-dark { color: var(--kr-text-dark); }
.kr-text-white { color: var(--kr-white); }
.kr-text-center { text-align: center; }
/* Backgrounds */
.kr-bg-card { background: var(--kr-bg-card); }
.kr-bg-dark { background: var(--kr-bg-dark); }
.kr-bg-white { background: var(--kr-white); }
/* Borders */
.kr-border { border: 1.5px solid var(--kr-border); }
.kr-rounded { border-radius: var(--kr-radius); }
.kr-rounded-sm { border-radius: var(--kr-radius-sm); }
.kr-rounded-full { border-radius: var(--kr-radius-full); }
/* Spacing helpers */
.kr-mt-4 { margin-top: var(--kr-space-4); }
.kr-mt-6 { margin-top: var(--kr-space-6); }
.kr-mt-8 { margin-top: var(--kr-space-8); }
.kr-mt-12 { margin-top: var(--kr-space-12); }
.kr-mb-4 { margin-bottom: var(--kr-space-4); }
.kr-mb-6 { margin-bottom: var(--kr-space-6); }
.kr-mb-8 { margin-bottom: var(--kr-space-8); }
/* Divider line */
.kr-divider {
width: 100%;
border: none;
border-top: 1px solid var(--kr-border);
margin-block: 0;
}
.kr-divider--light {
border-top-color: rgba(255, 255, 255, 0.12);
}
/* Max-width text column */
.kr-prose { max-width: 68ch; }
.kr-prose-sm { max-width: 52ch; }
/* ================================================================
6. BUTTONS
================================================================ */
.kr-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.85rem 2rem;
border-radius: var(--kr-radius-sm);
font-family: var(--kr-font-body);
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.04em;
cursor: pointer;
transition:
background var(--kr-transition),
color var(--kr-transition),
border-color var(--kr-transition),
transform var(--kr-transition);
border: 1.5px solid transparent;
white-space: nowrap;
}
.kr-btn:focus-visible {
outline: 2.5px solid var(--kr-accent);
outline-offset: 3px;
}
/* Primary */
.kr-btn--primary {
background: var(--kr-accent);
color: var(--kr-white);
border-color: var(--kr-accent);
}
.kr-btn--primary:hover {
background: var(--kr-accent-dark);
border-color: var(--kr-accent-dark);
transform: translateY(-2px);
}
/* Outline */
.kr-btn--outline {
background: transparent;
color: var(--kr-accent);
border-color: var(--kr-accent);
}
.kr-btn--outline:hover {
background: var(--kr-accent);
color: var(--kr-white);
transform: translateY(-2px);
}
/* Ghost (dark section) */
.kr-btn--ghost {
background: transparent;
color: var(--kr-white);
border-color: rgba(255, 255, 255, 0.4);
}
.kr-btn--ghost:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--kr-white);
}
/* Sizes */
.kr-btn--sm { padding: 0.55rem 1.2rem; font-size: 0.8rem; }
.kr-btn--lg { padding: 1.1rem 2.5rem; font-size: 1rem; }
/* Full width */
.kr-btn--full { width: 100%; }
/* Legacy aliases — matches existing .btn classes in styles.css */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 2rem; border-radius: var(--kr-radius-sm); font-family: var(--kr-font-body); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.04em; cursor: pointer; transition: background var(--kr-transition), color var(--kr-transition), transform var(--kr-transition); border: 1.5px solid transparent; }
.btn-primary { background: var(--kr-accent); color: var(--kr-white); border-color: var(--kr-accent); }
.btn-primary:hover { background: var(--kr-accent-dark); border-color: var(--kr-accent-dark); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--kr-accent); border-color: var(--kr-accent); }
.btn-outline:hover { background: var(--kr-accent); color: var(--kr-white); transform: translateY(-2px); }
/* ================================================================
7. CARDS
================================================================ */
/* Base card */
.kr-card {
background: var(--kr-white);
border: 1.5px solid var(--kr-border);
border-radius: var(--kr-radius);
padding: 2rem;
transition:
border-color var(--kr-transition),
transform var(--kr-transition),
box-shadow var(--kr-transition);
}
.kr-card:hover {
border-color: var(--kr-accent);
transform: translateY(-4px);
box-shadow: var(--kr-shadow-lg);
}
/* Flat card (no hover lift) */
.kr-card--flat:hover {
transform: none;
box-shadow: none;
}
/* Dark card */
.kr-card--dark {
background: var(--kr-bg-dark);
border-color: var(--kr-bg-dark);
color: var(--kr-white);
}
.kr-card--dark h2,
.kr-card--dark h3,
.kr-card--dark h4 { color: var(--kr-white); }
/* Stat / KPI card */
.kr-stat-card {
background: var(--kr-white);
border: 1.5px solid var(--kr-border);
border-radius: var(--kr-radius);
padding: 1.5rem;
text-align: center;
}
.kr-stat-card__value {
font-family: var(--kr-font-display);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
color: var(--kr-accent);
line-height: 1;
}
.kr-stat-card__label {
font-size: 0.8rem;
color: var(--kr-text-muted);
margin-top: 0.4rem;
letter-spacing: 0.05em;
}
/* ================================================================
8. BADGES & TAGS
================================================================ */
.kr-tag {
display: inline-flex;
align-items: center;
font-size: 0.75rem;
font-weight: 500;
padding: 0.25rem 0.75rem;
border-radius: var(--kr-radius-full);
background: var(--kr-bg-card);
color: var(--kr-text-body);
letter-spacing: 0.02em;
white-space: nowrap;
}
.kr-tag--accent {
background: rgba(181, 168, 138, 0.12);
color: var(--kr-accent);
}
.kr-tag--dark {
background: rgba(44, 48, 56, 0.85);
color: var(--kr-accent-light);
}
/* Pill group */
.kr-tag-group {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
/* ================================================================
9. FORM ELEMENTS
================================================================ */
.kr-form {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.kr-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.kr-field {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.kr-label-text {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--kr-text-muted);
}
.kr-input,
.kr-textarea,
.kr-select {
width: 100%;
padding: 0.75rem 1rem;
border: 1.5px solid var(--kr-border);
border-radius: var(--kr-radius-sm);
background: var(--kr-bg);
color: var(--kr-text-dark);
font-family: var(--kr-font-body);
font-size: 0.9rem;
line-height: 1.5;
outline: none;
transition: border-color var(--kr-transition);
appearance: none;
}
.kr-input::placeholder,
.kr-textarea::placeholder {
color: var(--kr-text-muted);
}
.kr-input:focus,
.kr-textarea:focus,
.kr-select:focus {
border-color: var(--kr-accent);
}
.kr-input:invalid:not(:placeholder-shown),
.kr-textarea:invalid:not(:placeholder-shown) {
border-color: #b94a4a;
}
.kr-textarea {
resize: vertical;
min-height: 110px;
}
/* Checkbox / Radio */
.kr-check {
display: flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
font-size: 0.9rem;
color: var(--kr-text-body);
}
.kr-check input {
width: 16px;
height: 16px;
accent-color: var(--kr-accent);
cursor: pointer;
}
/* ================================================================
10. NAVIGATION
================================================================ */
.kr-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--kr-z-nav);
padding: 1.2rem 0;
transition:
background var(--kr-transition),
box-shadow var(--kr-transition),
padding var(--kr-transition);
}
.kr-nav.scrolled {
background: rgba(248, 249, 250, 0.97);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 1px 0 var(--kr-border);
padding: 0.8rem 0;
}
.kr-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.kr-nav__logo {
font-family: var(--kr-font-display);
font-size: 1.6rem;
font-weight: 600;
color: var(--kr-text-dark);
letter-spacing: 0.02em;
flex-shrink: 0;
}
.kr-nav__logo span { color: var(--kr-accent); }
.kr-nav__links {
display: flex;
align-items: center;
gap: 2.2rem;
}
.kr-nav__links a {
font-size: 0.875rem;
font-weight: 500;
color: var(--kr-text-body);
letter-spacing: 0.03em;
transition: color var(--kr-transition);
position: relative;
}
.kr-nav__links a::after {
content: '';
position: absolute;
bottom: -3px; left: 0;
width: 0; height: 1.5px;
background: var(--kr-accent);
transition: width var(--kr-transition);
}
.kr-nav__links a:hover { color: var(--kr-accent); }
.kr-nav__links a:hover::after { width: 100%; }
.kr-nav__links a.active { color: var(--kr-accent); }
.kr-nav__links a.active::after { width: 100%; }
/* Hamburger toggle */
.kr-nav__toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
padding: 4px;
}
.kr-nav__toggle span {
display: block;
width: 24px; height: 2px;
background: var(--kr-text-dark);
border-radius: 2px;
transition: transform var(--kr-transition), opacity var(--kr-transition);
}
.kr-nav__toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kr-nav__toggle.open span:nth-child(2) { opacity: 0; }
.kr-nav__toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ================================================================
11. FOOTER
================================================================ */
.kr-footer {
background: var(--kr-bg-dark);
color: rgba(255, 255, 255, 0.55);
padding: 2.5rem 0;
}
.kr-footer__inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1.2rem;
}
.kr-footer__logo {
font-family: var(--kr-font-display);
font-size: 1.3rem;
font-weight: 600;
color: var(--kr-white);
}
.kr-footer__logo span { color: var(--kr-accent-light); }
.kr-footer__links {
display: flex;
flex-wrap: wrap;
gap: 1.8rem;
}
.kr-footer__links a {
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.55);
transition: color var(--kr-transition);
}
.kr-footer__links a:hover { color: var(--kr-white); }
.kr-footer__copy {
font-size: 0.8rem;
width: 100%;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 1.5rem;
margin-top: 0.5rem;
}
/* ================================================================
12. SCROLL ANIMATIONS
================================================================ */
/* Base invisible state — add .kr-fade-in to any element */
.kr-fade-in,
.fade-in { /* .fade-in kept for backwards compat */
opacity: 0;
transform: translateY(28px);
transition:
opacity 0.7s ease,
transform 0.7s ease;
}
.kr-fade-in.visible,
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Slide from left / right variants */
.kr-fade-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.kr-fade-right { opacity: 0; transform: translateX(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.kr-fade-left.visible,
.kr-fade-right.visible { opacity: 1; transform: translateX(0); }
/* Scale-in */
.kr-scale-in { opacity: 0; transform: scale(0.94); transition: opacity 0.6s ease, transform 0.6s ease; }
.kr-scale-in.visible { opacity: 1; transform: scale(1); }
/* ================================================================
13. RESPONSIVE BREAKPOINTS
================================================================ */
/* Tablet — ≤ 850px */
@media (max-width: 850px) {
.kr-split {
grid-template-columns: 1fr;
gap: 2.5rem;
}
/* Mobile nav */
.kr-nav__links,
.kr-nav .nav-links {
display: none;
}
.kr-nav__toggle,
.nav-toggle {
display: flex;
}
.kr-nav__links.mobile-open,
.nav-links.mobile-open {
display: flex;
flex-direction: column;
position: fixed;
inset: 0;
background: var(--kr-bg);
justify-content: center;
align-items: center;
gap: 2.5rem;
z-index: calc(var(--kr-z-nav) - 1);
}
.kr-nav__links.mobile-open a,
.nav-links.mobile-open a {
font-size: 1.4rem;
font-family: var(--kr-font-display);
font-weight: 600;
}
.kr-footer__inner {
flex-direction: column;
align-items: center;
text-align: center;
}
.kr-footer__links { justify-content: center; }
}
/* Mobile — ≤ 550px */
@media (max-width: 550px) {
.kr-form-row { grid-template-columns: 1fr; }
.kr-grid--2,
.kr-grid--3,
.kr-grid--4 { grid-template-columns: 1fr; }
.kr-btn--full-mobile { width: 100%; }
}