/* ========================================
Rock Mass Rating Calculator — Design System
Fonts are loaded via in HTML with preconnect for speed.
======================================== */
/* --- CSS Custom Properties --- */
:root {
--bg-primary: #F8F9FA;
--bg-surface: #FFFFFF;
--bg-elevated: #F1F5F9;
--text-primary: #1E2328;
--text-secondary: #64748B;
--accent-primary: #2563EB;
--accent-hover: #1D4ED8;
--border: #D1D5DB;
--rmr-class-1: #16A34A;
--rmr-class-2: #65A30D;
--rmr-class-3: #CA8A04;
--rmr-class-4: #EA580C;
--rmr-class-5: #DC2626;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.1);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--transition: 200ms ease-out;
}
[data-theme="dark"] {
--bg-primary: #0D1117;
--bg-surface: #161B22;
--bg-elevated: #21262D;
--text-primary: #E6EDF3;
--text-secondary: #8B949E;
--accent-primary: #58A6FF;
--accent-hover: #79B8FF;
--border: #30363D;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
--shadow-md: 0 4px 12px rgba(0,0,0,0.4);
}
/* --- Reset & Base --- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.7;
font-size: 16px;
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
img {
max-width: 100%;
height: auto;
}
a {
color: var(--accent-primary);
text-decoration: none;
transition: color var(--transition);
}
a:hover {
text-decoration: underline;
}
/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
line-height: 1.3;
font-weight: 700;
color: var(--text-primary);
}
h1 { font-size: 2.25rem; margin-bottom: 1rem; }
h2 { font-size: 1.75rem; margin: 2.5rem 0 1rem; }
h3 { font-size: 1.35rem; margin: 2rem 0 0.75rem; }
h4 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }
p {
margin-bottom: 1rem;
color: var(--text-primary);
}
/* --- Container --- */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
.article-container {
max-width: 760px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* --- Navbar --- */
.navbar {
background: var(--bg-surface);
border-bottom: 1px solid var(--border);
padding: 0.75rem 0;
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--shadow-sm);
}
.navbar .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.navbar-logo {
font-weight: 800;
font-size: 1.15rem;
color: var(--text-primary);
text-decoration: none;
white-space: nowrap;
}
.navbar-logo:hover {
color: var(--accent-primary);
text-decoration: none;
}
.navbar-nav {
display: flex;
list-style: none;
gap: 0.25rem;
flex-wrap: wrap;
align-items: center;
}
.navbar-nav a {
padding: 0.4rem 0.75rem;
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-size: 0.9rem;
font-weight: 500;
transition: all var(--transition);
white-space: nowrap;
}
.navbar-nav a:hover {
background: var(--bg-elevated);
color: var(--text-primary);
text-decoration: none;
}
.dark-toggle {
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--text-primary);
padding: 0.4rem 0.65rem;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 1.1rem;
transition: all var(--transition);
line-height: 1;
}
.dark-toggle:hover {
background: var(--accent-primary);
color: #fff;
}
.mobile-menu-btn {
display: none;
background: none;
border: 1px solid var(--border);
color: var(--text-primary);
padding: 0.4rem 0.6rem;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 1.2rem;
}
/* --- Breadcrumbs --- */
.breadcrumbs {
padding: 1rem 0 0.5rem;
font-size: 0.875rem;
color: var(--text-secondary);
}
.breadcrumbs a {
color: var(--text-secondary);
}
.breadcrumbs a:hover {
color: var(--accent-primary);
}
.breadcrumbs span {
margin: 0 0.4rem;
color: var(--border);
}
/* Semantic