base.css•2.59 kB
/* ==========================================================================
Base Styles
========================================================================== */
body {
font-family: var(--font-family-sans-serif);
margin: 0;
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.65;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition:
background-color 0.2s ease-out,
color 0.2s ease-out;
}
/* Visually hidden class for accessibility */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
Typography
========================================================================== */
h1,
h2,
h3 {
color: var(--text-color);
margin-top: 0;
font-weight: 600; /* Semi-bold for headings */
}
h1 {
font-size: 2.25rem; /* 36px */
margin-bottom: var(--spacing-lg);
text-align: center;
color: var(--primary-color);
font-weight: 700; /* Bold for main title */
}
h2 {
/* Section titles like "Project Details" */
font-size: 1.75rem; /* 28px */
margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-sm);
border-bottom: 1px solid var(--border-color); /* Softer underline */
}
h3 {
/* Sub-section titles like "Tasks", "Knowledge Items" */
font-size: 1.375rem; /* 22px */
margin-bottom: var(--spacing-md);
color: var(--text-color);
}
label {
display: block;
margin-bottom: var(--spacing-sm);
font-weight: 500; /* Medium weight */
color: var(--secondary-text-color);
font-size: 0.9rem;
}
p {
margin-bottom: var(--spacing-md);
}
a {
color: var(--primary-color);
text-decoration: none;
transition: color 0.2s ease-out;
}
a:hover,
a:focus {
color: var(--primary-hover-color);
text-decoration: underline;
outline: none; /* Handled by box-shadow on focus for interactive elements */
}
pre {
/* General preformatted text styling */
background-color: var(--code-bg-color);
color: var(--text-color);
padding: var(--spacing-sm);
border-radius: var(--border-radius-sm);
white-space: pre-wrap;
word-wrap: break-word;
font-family: var(--font-family-monospace);
font-size: 0.9rem;
border: 1px solid var(--code-border-color);
max-height: 250px;
overflow-y: auto;
margin-top: var(--spacing-xs);
transition:
background-color 0.2s ease-out,
border-color 0.2s ease-out,
color 0.2s ease-out;
}