&nbsp;

/* --- 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); }