:root {
--primary: #FF6B6B;
--primary-hover: #E85555;
--primary-light: #FFF0F0;
--text-dark: #2D3436;
--text-gray: #636E72;
--bg-light: #F9F9F9;
--white: #FFFFFF;
--border: #E0E0E0;
--shadow: 0 4px 12px rgba(0,0,0,0.08);
--radius: 16px;
--font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-main);
background-color: var(--bg-light);
color: var(--text-dark);
line-height: 1.6;
}
/* Header */
.site-header {
background: var(--white);
box-shadow: var(--shadow);
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 100;
}
.header-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: 800;
color: var(--primary);
text-decoration: none;
display: flex;
align-items: center;
gap: 0.5rem;
}
.nav-links {
display: flex;
gap: 1.5rem;
list-style: none;
}
.nav-links a {
text-decoration: none;
color: var(--text-dark);
font-weight: 600;
transition: color 0.2s;
}
.nav-links a:hover {
color: var(--primary);
}
/* Main Container */
.container {
max-width: 1000px;
margin: 3rem auto;
padding: 0 1.5rem;
}
/* Page Title */
.page-header {
text-align: center;
margin-bottom: 3rem;
}
.page-header h1 {
font-size: 2.5rem;
color: var(--text-dark);
margin-bottom: 0.5rem;
}
.page-header p {
color: var(--text-gray);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
/* Grid Layout */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 2rem;
}
/* Contact Cards */
.contact-info {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.info-card {
background: var(--white);
padding: 1.5rem;
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: transform 0.2s;
}
.info-card:hover {
transform: translateY(-2px);
}
.info-card .icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.info-card h3 {
font-size: 1.1rem;
margin-bottom: 0.25rem;
color: var(--text-dark);
}
.info-card p, .info-card a {
color: var(--text-gray);
font-size: 0.95rem;
text-decoration: none;
}
.info-card a:hover {
color: var(--primary);
text-decoration: underline;
}
/* Form Section */
.contact-form-wrapper {
background: var(--white);
padding: 2.5rem;
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--text-dark);
font-size: 0.95rem;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 0.8rem 1rem;
border: 2px solid var(--border);
border-radius: 12px;
font-size: 1rem;
font-family: inherit;
transition: border-color 0.2s;
background: var(--white);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.btn-submit {
background: var(--primary);
color: var(--white);
border: none;
padding: 1rem 2rem;
font-size: 1rem;
font-weight: 700;
border-radius: 50px;
cursor: pointer;
width: 100%;
transition: background 0.2s, transform 0.1s;
}
.btn-submit:hover {
background: var(--primary-hover);
}
.btn-submit:active {
transform: scale(0.98);
}
/* Status Message */
.status-message {
margin-top: 1rem;
padding: 1rem;
border-radius: 12px;
text-align: center;
display: none;
}
.status-message.success {
display: block;
background: #E8F5E9;
color: #2E7D32;
border: 1px solid #C8E6C9;
}
/* FAQ Snippet */
.faq-section {
margin-top: 4rem;
border-top: 1px solid var(--border);
padding-top: 2rem;
}
.faq-section h2 {
text-align: center;
margin-bottom: 1.5rem;
color: var(--text-dark);
}
.faq-item {
background: var(--white);
margin-bottom: 1rem;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.faq-question {
padding: 1.2rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
background: var(--white);
}
.faq-question:hover {
background: var(--primary-light);
}
.faq-answer {
padding: 0 1.2rem;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
color: var(--text-gray);
}
.faq-item.active .faq-answer {
padding: 0 1.2rem 1.2rem;
max-height: 200px;
}
.faq-item.active .faq-question {
color: var(--primary);
}
/* Footer */
.site-footer {
background: var(--text-dark);
color: var(--white);
padding: 2rem;
text-align: center;
margin-top: 4rem;
font-size: 0.9rem;
}
.site-footer a {
color: var(--primary);
text-decoration: none;
}
/* Responsive */
@media (max-width: 768px) {
.contact-grid {
grid-template-columns: 1fr;
}
.contact-form-wrapper {
padding: 1.5rem;
}
.page-header h1 {
font-size: 2rem;
}
.nav-links {
display: none;
}
}
Frequently Asked Questions
How quickly will I get a response?
+
We aim to respond to all email inquiries within 24 hours on business days. For urgent matters, please use our Live Chat feature or call our support line.
Can I cancel my subscription?
+
Yes! You can cancel anytime from your account settings. You'll retain access until the end of your billing cycle. No questions asked, no hidden fees.
Do you offer resources for adoptive families?
+
Absolutely. FamilyNest is inclusive and offers dedicated resources and community groups for adoptive, foster, and kinship families. Check our Services page or ask for details here!