styles.css
:root {
–bg: #f7f5f0;
–bg-soft: #eef3eb;
–card: #ffffff;
–text: #2f3a31;
–muted: #66736a;
–green: #6f8f73;
–green-dark: #4e6a54;
–line: #d7e0d4;
–accent: #edf4ea;
–max: 1120px;
–radius: 18px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background: var(–bg);
color: var(–text);
line-height: 1.6;
}
img {
max-width: 100%;
display: block;
}
a {
color: var(–green-dark);
text-decoration: none;
}
.container {
width: min(var(–max), calc(100% – 32px));
margin: 0 auto;
}
.topbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(247, 245, 240, 0.94);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(–line);
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 16px 0;
}
.brand {
font-size: 1.1rem;
font-weight: 700;
color: var(–green-dark);
}
.nav-links {
display: flex;
flex-wrap: wrap;
gap: 14px;
font-size: 0.95rem;
}
.nav-links a {
padding: 8px 10px;
border-radius: 999px;
}
.nav-links a:hover,
.nav-links a.active {
background: var(–accent);
}
.hero {
padding: 88px 0 60px;
background: linear-gradient(180deg, rgba(237, 244, 234, 0.8), rgba(247, 245, 240, 0));
}
.hero h1 {
font-size: clamp(2rem, 4vw, 3.6rem);
line-height: 1.1;
margin: 0 0 16px;
color: var(–green-dark);
}
.hero p {
max-width: 720px;
color: var(–muted);
font-size: 1.05rem;
}
.section {
padding: 56px 0;
}
.section h2 {
margin-top: 0;
margin-bottom: 16px;
color: var(–green-dark);
font-size: 1.9rem;
}
.lead {
color: var(–muted);
max-width: 780px;
}
.grid-2,
.grid-3 {
display: grid;
gap: 22px;
}
.grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.card {
background: var(–card);
border: 1px solid var(–line);
border-radius: var(–radius);
padding: 24px;
box-shadow: 0 10px 24px rgba(78, 106, 84, 0.06);
}
.card h3 {
margin-top: 0;
color: var(–green-dark);
}
.button-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
.btn {
display: inline-block;
padding: 12px 18px;
border-radius: 999px;
background: var(–green);
color: white;
font-weight: 700;
}
.btn:hover {
background: var(–green-dark);
}
.btn-outline {
background: transparent;
color: var(–green-dark);
border: 1px solid var(–green);
}
.list-clean {
margin: 0;
padding-left: 18px;
}
.note {
display: inline-block;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 999px;
background: var(–accent);
color: var(–green-dark);
font-size: 0.92rem;
}
.footer {
margin-top: 40px;
background: var(–green-dark);
color: white;
padding: 34px 0;
}
.footer a {
color: white;
}
.form-row {
display: grid;
gap: 14px;
}
label {
font-weight: 700;
display: block;
margin-bottom: 6px;
}
input,
textarea {
width: 100%;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid var(–line);
font: inherit;
background: white;
}
textarea {
min-height: 150px;
resize: vertical;
}
.small {
color: var(–muted);
font-size: 0.94rem;
}
@media (max-width: 860px) {
.grid-2,
.grid-3 {
grid-template-columns: 1fr;
}
.nav {
flex-direction: column;
align-items: flex-start;
}
}