/* --- CSS RESET & BASE STYLES --- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,main,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
}
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body {
line-height: 1.55;
background: #fff;
color: #222;
min-height: 100vh;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
letter-spacing: 0.01em;
}
img,svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.2s; }
ul,ol { list-style: none; }
input,button,textarea,select { font-family: inherit; font-size: inherit; }
button { background: none; border: none; cursor: pointer; }
::-webkit-input-placeholder { color: #777; opacity: 1; }
::-moz-placeholder { color: #777; opacity: 1; }
:-ms-input-placeholder { color: #777; opacity: 1; }
::placeholder { color: #777; opacity: 1; }
/* --- BRAND FONTS (You need to load these in HTML ) --- */
:root {
--primary: #235FAB;
--secondary: #6DD47E;
--accent: #FFE164;
--text: #222;
--surface: #fff;
--muted: #F8FAFC;
--shadow: 0 2px 16px 0 rgba(44,71,123,0.06);
--border-radius: 14px;
--transition: 0.18s cubic-bezier(.39,.42,.32,1);
}
/* --- TYPOGRAPHY --- */
h1,h2,h3,h4 {
font-family: 'Baloo 2', 'Open Sans', Arial, sans-serif;
font-weight: 700;
color: var(--primary);
letter-spacing: 0.01em;
line-height: 1.12;
}
h1 { font-size: 2.6rem; margin-bottom: 18px; }
h2 { font-size: 1.8rem; margin-bottom: 16px; color: var(--primary); }
h3 { font-size: 1.15rem; margin-bottom: 8px; color: var(--secondary); font-weight: 600; }
h4 { font-size: 1rem; margin-bottom: 6px; color: var(--primary); }
p, ul li, ol li { font-size: 1rem; color: var(--text); margin-bottom: 1em; }
.hero-headline { font-size: 1.25rem; font-weight: 500; color: #245fa8; margin-bottom: 7px; }
.hero-subheadline { font-size: 1.05rem; font-weight: 400; color: #4b6ca7; margin-bottom: 20px; }
.cta-box { font-size: 1.125rem; background: var(--accent); color: #222; border-radius: var(--border-radius); padding: 16px 28px; margin-bottom: 24px; box-shadow: var(--shadow); text-align: center; font-weight: 600; }
/* --- CONTAINERS & SECTIONS --- */
.container {
width: 100%;
max-width: 940px;
margin: 0 auto;
padding: 0 16px;
display: flex;
flex-direction: column;
align-items: stretch;
}
.content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
width: 100%;
}
.section {
margin-bottom: 60px;
padding: 40px 20px;
background: var(--surface);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
}
/* --- MAIN NAVIGATION --- */
.main-nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 26px;
padding: 26px 0 22px 0;
background: var(--surface);
position: relative;
z-index: 101;
}
.main-nav a {
font-size: 1rem;
font-weight: 400;
padding: 0 8px;
color: var(--primary);
transition: color var(--transition);
}
.main-nav a:hover,
.main-nav a:focus {
color: var(--secondary);
}
.main-nav a.cta-btn {
background: var(--primary);
color: #fff !important;
padding: 8px 23px;
border-radius: 6px;
font-weight: 700;
font-family: 'Baloo 2', 'Open Sans', Arial, sans-serif;
letter-spacing: 0.03em;
box-shadow: 0 2px 8px 0 rgba(35,95,171,0.09);
margin-left: 18px;
transition: background var(--transition), transform var(--transition);
}
.main-nav a.cta-btn:hover,
.main-nav a.cta-btn:focus {
background: var(--secondary);
color: var(--primary) !important;
transform: translateY(-2px) scale(1.04);
}
.main-nav img { height: 38px; margin-right: 10px; }
/* ---- MOBILE NAVIGATION ---- */
.mobile-menu-toggle {
display: none;
background: var(--accent);
border: none;
color: var(--primary);
font-size: 2.2rem;
padding: 5px 13px;
border-radius: 8px;
margin-left: auto;
box-shadow: var(--shadow);
z-index: 105;
transition: background var(--transition);
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus { background: var(--secondary); color: var(--primary); }
.mobile-menu {
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
width: 100vw; height: 100vh;
background: rgba(250,251,254,0.98);
z-index: 200;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
transform: translateX(100%);
transition: transform 0.31s cubic-bezier(.59,1.19,.46,.95);
pointer-events: none;
opacity: 0;
}
.mobile-menu.open {
transform: translateX(0);
pointer-events: all;
opacity: 1;
}
.mobile-menu-close {
background: none;
border: none;
font-size: 2.5rem;
color: var(--primary);
align-self: flex-end;
margin: 24px 30px 0 0;
padding: 0 9px;
z-index: 220;
transition: color 0.18s;
}
.mobile-menu-close:hover,
.mobile-menu-close:focus {
color: var(--secondary);
}
.mobile-nav {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 38px;
width: 100%;
gap: 16px;
padding-left: 30px;
}
.mobile-nav a {
font-size: 1.24rem;
color: var(--primary);
font-weight: 500;
padding: 10px 0;
transition: color var(--transition), background 0.21s;
border-radius: 6px;
}
.mobile-nav a:hover,
.mobile-nav a:focus {
background: var(--accent);
color: var(--secondary);
}
/* --- HERO & GENERIC TYPOGRAPHY --- */
.hero-headline {
margin-top: 0;
margin-bottom: 10px;
font-size: 1.3rem;
}
.hero-subheadline {
margin-bottom: 12px;
}
/* --- FEATURES, SERVICES, & CARD-LIKE ELEMENTS --- */
.features-list, .service-list, .workshop-details, .resources-list, .blog-previews, .about-values, .distinctives-list, .benefits-list, .faq-list, .thankyou-links, .family-activities, .workshop-format {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.features-list li, .service-list li, .workshop-details li, .about-values li, .distinctives-list li, .resources-list li, .benefits-list li, .faq-list li, .family-activities li, .workshop-format li, .blog-previews li, .thankyou-links li {
background: var(--muted);
padding: 24px 20px;
border-radius: var(--border-radius);
margin-bottom: 0;
box-shadow: 0 2px 10px 0 rgba(40,65,138,0.05);
display: flex;
align-items: flex-start;
gap: 18px;
font-size: 1rem;
transition: box-shadow 0.18s, transform 0.18s;
}
.features-list li:hover, .service-list li:hover, .workshop-details li:hover, .blog-previews li:hover, .about-values li:hover, .distinctives-list li:hover, .resources-list li:hover, .benefits-list li:hover, .family-activities li:hover, .faq-list li:hover {
box-shadow: 0 6px 20px 0 rgba(37,95,171,0.09);
transform: translateY(-2px) scale(1.01);
}
.features-list img, .distinctives-list img, .resources-list img, .benefits-list img, .contact-details img, .map-embed img, .footer-social img {
width: 38px;
height: 38px;
object-fit: contain;
margin-right: 9px;
flex-shrink: 0;
}
.about-values b, .benefits-list b, .faq-list b {
color: var(--primary);
font-family: 'Baloo 2', 'Open Sans', Arial, sans-serif;
font-weight: 600;
}
.service-list li span, .workshop-details li span, .service-price {
display: block;
margin-top: 12px;
font-size: 1.08rem;
font-weight: 700;
color: var(--primary);
}
/* --- TESTIMONIALS --- */
.testimonials {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
}
.testimonial-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
background: #fff;
border-radius: var(--border-radius);
box-shadow: 0 2px 18px 0 rgba(35,95,171,0.07);
padding: 20px 26px;
margin-bottom: 20px;
min-width: 240px;
max-width: 330px;
color: var(--text);
font-size: 1.01rem;
transition: box-shadow 0.17s, transform 0.16s;
}
.testimonial-card .testimonial-author {
font-size: 0.97rem;
color: #556;
font-weight: 600;
margin-top: 8px;
}
.testimonial-card .star-rating {
color: var(--accent);
font-size: 1.32rem;
margin-top: 1px;
}
.testimonial-card:hover {
box-shadow: 0 8px 35px 0 rgba(35,95,171,0.14);
transform: translateY(-3px) scale(1.017);
}
/* --- CTA BUTTONS --- */
.cta-btn, button, .newsletter-form button {
display: inline-block;
font-family: 'Baloo 2', 'Open Sans', Arial, sans-serif;
font-size: 1.12rem;
font-weight: 700;
letter-spacing: 0.04em;
background: var(--secondary);
color: var(--primary);
border: none;
border-radius: 8px;
padding: 12px 30px;
margin-top: 20px;
line-height: 1.25;
cursor: pointer;
box-shadow: 0 2px 12px 0 rgba(130,211,131,0.09);
transition: background var(--transition), color var(--transition), transform var(--transition);
outline: 0;
}
.cta-btn:hover, .cta-btn:focus,
.newsletter-form button:hover, .newsletter-form button:focus,
button:hover, button:focus {
background: var(--primary);
color: #fff;
transform: translateY(-2px) scale(1.05);
}
/* --- FORMS (Newsletter) --- */
.newsletter-form {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 18px 0 14px 0;
}
.newsletter-form input[type=email] {
padding: 10px 14px;
font-size: 1rem;
border: 1px solid #dde3ea;
border-radius: 7px;
outline: none;
background: #f9fafc;
color: #222;
width: 220px;
transition: border-color 0.2s;
}
.newsletter-form input[type=email]:focus {
border-color: var(--primary);
background: #fff;
}
/* --- CARD CONTAINERS --- */
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; border-radius: var(--border-radius); background: var(--surface); box-shadow: var(--shadow); padding: 20px; }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
/* --- MAP & CONTACT --- */
.contact-details {
display: flex;
flex-direction: row;
gap: 32px;
align-items: flex-start;
margin-bottom: 22px;
}
.contact-details ul {
display: flex;
flex-direction: column;
gap: 16px;
}
.map-placeholder {
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.map-embed {
display: flex;
flex-direction: row;
align-items: center;
gap: 18px;
background: var(--muted);
border-radius: var(--border-radius);
padding: 16px;
}
/* --- FOOTER --- */
footer {
background: #f7fafd;
border-top: 1.5px solid #eaf0f7;
padding: 28px 0 18px 0;
margin-top: 64px;
}
.footer-brand {
display: flex;
flex-direction: row;
align-items: center;
gap: 13px;
margin-bottom: 17px;
}
.footer-brand img { height: 38px; }
.footer-brand span {
font-size: 1rem;
font-weight: 500;
color: var(--primary);
font-family: 'Baloo 2', 'Open Sans', Arial, sans-serif;
}
.footer-nav {
display: flex;
flex-direction: row;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.footer-nav a {
font-size: 1rem;
color: #5573ab;
transition: color var(--transition);
}
.footer-nav a:hover {
color: var(--secondary);
}
.footer-social {
margin-top: 8px;
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
}
.footer-social a {
display: flex;
align-items: center;
border-radius: 8px;
transition: background 0.2s;
padding: 4px;
}
.footer-social a:hover, .footer-social a:focus {
background: var(--secondary);
}
/* --- MINIMALIST TABLE --- */
table { border-collapse: collapse; width: 100%; margin-bottom: 32px; font-size: 1rem; }
th, td { border: 1px solid #e4e6ea; padding: 11px 10px; text-align: left; }
th { background: var(--muted); font-weight: 700; }
/* --- BLOG META --- */
.blog-meta { display: block; font-size: 0.93rem; color: #5A7595; margin-top: 6px; }
/* --- COOKIE BANNER --- */
.cookie-banner {
position: fixed;
bottom: 0; left: 0; width: 100vw;
background: #fff;
box-shadow: 0 -3px 18px 0 rgba(35,95,171,0.08);
padding: 22px 8px 16px 8px;
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
justify-content: center;
z-index: 9999;
opacity: 1;
transition: opacity 0.23s cubic-bezier(.49,.7,.21,1);
font-size: 1rem;
}
.cookie-banner.hide {
opacity: 0;
pointer-events: none;
}
.cookie-banner-message {
flex: 1 1 300px;
color: var(--text);
font-size: 1rem;
margin-right: 14px;
}
.cookie-banner .cookie-btn {
margin: 0 8px 0 0;
font-size: 1rem;
padding: 8px 20px;
background: var(--secondary);
color: var(--primary);
border-radius: 6px;
border: none;
font-family: 'Baloo 2', 'Open Sans', Arial, sans-serif;
font-weight: 600;
transition: background 0.18s;
}
.cookie-banner .cookie-btn:hover,
.cookie-banner .cookie-btn:focus {
background: var(--primary);
color: #fff;
}
.cookie-banner .cookie-btn.secondary {
background: var(--accent);
color: var(--primary);
}
/* --- COOKIE MODAL --- */
.cookie-modal {
position: fixed;
left: 50%; top: 50%;
transform: translate(-50%, -50%) scale(0.96);
background: #fff;
box-shadow: 0 8px 35px 0 rgba(35,95,171,0.13);
border-radius: 14px;
padding: 38px 26px 30px 26px;
z-index: 12001;
min-width: 320px;
max-width: 93vw;
display: none;
flex-direction: column;
align-items: flex-start;
gap: 22px;
opacity: 0;
transition: opacity 0.16s, transform 0.2s;
}
.cookie-modal.open {
display: flex;
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.cookie-modal-title {
font-size: 1.35rem;
font-family: 'Baloo 2', 'Open Sans', Arial, sans-serif;
color: var(--primary);
margin-bottom: 8px;
}
.cookie-modal .cookie-categories {
display: flex;
flex-direction: column;
gap: 18px;
margin-bottom: 9px;
}
.cookie-cat-row {
display: flex;
align-items: center;
gap: 13px;
font-size: 1rem;
}
.cookie-cat-row label {
color: var(--text);
}
.cookie-cat-checkbox {
width: 19px;
height: 19px;
accent-color: var(--primary);
}
.cookie-cat-row .always-on {
font-size: 0.95rem;
color: #91a3c3;
margin-left: 7px;
}
.cookie-modal .modal-actions {
display: flex;
flex-direction: row;
gap: 14px;
margin-top: 16px;
}
.cookie-modal .modal-close {
background: none;
color: #607cb4;
font-weight: 500;
font-size: 1.10rem;
border: none;
margin-left: 8px;
padding: 4px 10px;
border-radius: 6px;
transition: background 0.14s;
}
.cookie-modal .modal-close:hover,
.cookie-modal .modal-close:focus {
background: #f0f4fa;
color: var(--primary);
}
/* --- READING FLOW SPACING & GAPS --- */
section {
margin-bottom: 60px;
padding: 40px 20px;
}
section:last-child { margin-bottom: 0; }
.card-container,
.content-grid,
.text-image-section,
.testimonials {
gap: 24px;
}
.features-list, .service-list, .workshop-details, .resources-list, .about-values, .distinctives-list, .benefits-list, .faq-list, .blog-previews, .thankyou-links, .family-activities, .workshop-format {
gap: 20px;
}
.card, .testimonial-card, .cta-box, .blog-previews li {
margin-bottom: 20px;
}
/* --- RESPONSIVENESS --- */
@media (max-width: 1100px) {
.container { max-width: 99vw; }
.main-nav { gap: 14px; }
}
@media (max-width: 940px) {
.container { max-width: 100vw; }
}
@media (max-width: 768px) {
body { font-size: 15px; }
h1 { font-size: 2rem; }
h2 { font-size: 1.35rem; }
.container { padding: 0 5vw; }
.main-nav { display: none; }
.mobile-menu-toggle { display: block; position: absolute; top: 23px; right: 22px; }
.footer-nav, .footer-social {
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
section, .section {
padding: 27px 6px;
margin-bottom: 43px;
}
.features-list li, .service-list li, .testimonial-card, .blog-previews li, .about-values li, .distinctives-list li, .resources-list li, .benefits-list li, .faq-list li {
padding: 16px 10px;
}
.testimonials {
flex-direction: column;
gap: 22px;
align-items: stretch;
}
.content-wrapper { gap: 10px; }
.text-image-section { flex-direction: column; gap: 18px; }
.contact-details { flex-direction: column; gap: 18px; }
.map-embed { flex-direction: column; gap: 6px; }
.footer-brand { flex-direction: column; gap: 6px; align-items: flex-start; }
}
@media (max-width: 570px) {
h1 { font-size: 1.38rem; }
h2 { font-size: 1.08rem; }
.cta-btn, button { font-size: 1rem; padding: 10px 16px; }
.newsletter-form input[type=email] { width: 98vw; max-width: 280px; }
.container { padding: 0 1vw; }
.cookie-modal { min-width: 92vw; padding: 21px 7px !important; }
.cookie-banner { flex-direction: column; gap: 8px; }
}
/* --- MICROINTERACTIONS & TRANSITIONS --- */
a, .cta-btn, button, .main-nav a, .footer-nav a, .mobile-menu-toggle, .mobile-menu-close, .newsletter-form button {
transition: all 0.17s cubic-bezier(.45,.57,.47,1.04);
}
.features-list li, .service-list li, .testimonial-card, .about-values li, .distinctives-list li, .resources-list li, .benefits-list li, .faq-list li, .blog-previews li, .thankyou-links li, .family-activities li, .workshop-format li {
transition: box-shadow 0.18s, transform 0.15s;
}
/* --- UTILITY CLASSES --- */
.muted { color: #878FA1 !important; }
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-accent { color: var(--accent) !important; }
.bg-muted { background: var(--muted) !important; }
/* --- ACCESSIBILITY --- */
a:focus-visible, .cta-btn:focus-visible { outline: 2.5px solid var(--primary); outline-offset: 2px; }
button:focus-visible { outline: 2.5px solid var(--secondary); outline-offset: 2px; }
/* --- MISC --- */
::-webkit-scrollbar {
width: 9px;
background: #eef1f5;
border-radius: 22px;
}
::-webkit-scrollbar-thumb {
background: #e0ebf9;
border-radius: 22px;
}
::-webkit-scrollbar-thumb:hover {
background: #c3d8f0;
}
/* --- END OF CSS --- */