/* --- Color Variables for Easy Changes --- */
:root {
--color-background: #FFF4F6; /* Airy Whisper - Very light pink/off-white */
--color-primary-pink: #FFB6C1; /* Soft Blush - Main light pink accent */
--color-secondary-accent: #DCC8F5; /* Calm Lavender - Secondary highlight */
--color-text: #333333; /* Deep Charcoal - Main text color */
--color-link-hover: #BF93E0; /* A darker shade of lavender for hover */
}
/* --- Global / Body Styles --- */
body {
font-family: 'Arial', sans-serif; /* Use a clean, modern font */
background-color: var(--color-background);
color: var(--color-text);
margin: 0;
line-height: 1.6;
padding: 20px;
}
/* --- Headings --- */
h1 {
color: var(--color-text);
font-weight: 700;
margin-bottom: 0.5em;
border-bottom: 2px solid var(--color-primary-pink); /* Subtle highlight */
display: inline-block; /* Makes the border only go under the text */
}
/* --- Navigation & Links --- */
header {
padding: 15px 0;
border-bottom: 1px solid var(--color-secondary-accent);
margin-bottom: 30px;
}
nav {
display: flex;
gap: 20px;
}
a {
color: var(--color-primary-pink); /* Light pink links */
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--color-link-hover); /* Lavender hover effect */
}
/* --- Primary Call-to-Action (CTA) Button --- */
.cta-button {
background-color: var(--color-primary-pink);
color: var(--color-text); /* Dark text on pink button */
padding: 10px 20px;
border: none;
border-radius: 5px; /* Subtle rounding */
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s ease, transform 0.1s ease;
}
.cta-button:hover {
background-color: var(--color-secondary-accent); /* Soft lavender hover */
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* --- Footer --- */
footer {
text-align: center;
padding: 20px 0;
margin-top: 40px;
font-size: 0.9em;
color: #888888; /* Slightly lighter text for the footer */
border-top: 1px solid var(--color-secondary-accent);
}