/* CSS RESET & NORMALIZE */
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,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}
html {
box-sizing: border-box;
font-size: 16px;
}
*, *:before, *:after {
box-sizing: inherit;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1.5;
background: #F0F3F6;
color: #232B34;
font-family: 'Lato', Arial, sans-serif;
min-height: 100vh;
}
img {
max-width: 100%;
display: block;
}
a {
color: #3176ff;
text-decoration: none;
transition: color 0.18s cubic-bezier(.76,.04,.27,.99);
}
a:hover, a:focus {
color: #FF7A6B;
text-decoration: underline;
}
ul, ol {
padding-left: 1.25em;
margin-bottom: 1em;
}
/* BRAND & PLAYFUL DYNAMIC COLORS */
:root {
--color-primary: #232B34;
--color-secondary: #8A929A;
--color-accent: #F0F3F6;
--color-fun1: #FFDA55;
--color-fun2: #69E6A6;
--color-fun3: #63A5F7;
--color-fun4: #FF7A6B;
}
/* FUN DISPLAY FONT MIX --- load in for best effect */
@import url('https://fonts.googleapis.com/css?family=Montserrat:700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato:400,700&display=swap');
h1, h2, h3, .cta-primary, .cta-secondary, .mobile-menu-toggle {
font-family: 'Montserrat', 'Arial Rounded MT Bold', Arial, sans-serif;
font-weight: 900;
}
h1 {
font-size: 2.3rem;
margin-bottom: 24px;
letter-spacing: -1px;
color: var(--color-fun3);
text-shadow: 2px 6px 0 var(--color-fun1), 0px 0px 12px rgba(249, 204, 47,.13);
}
h2 {
font-size: 1.6rem;
margin-bottom: 18px;
color: var(--color-fun4);
letter-spacing: -0.5px;
text-shadow: 1px 3px 0 var(--color-accent);
}
h3 {
font-size: 1.1rem;
color: var(--color-primary);
font-weight: 700;
margin-bottom: 12px;
}
p,li,blockquote,footer {
font-family: 'Lato', Arial, sans-serif;
font-size: 1rem;
color: var(--color-primary);
line-height: 1.8;
}
strong {
color: var(--color-fun2);
font-weight: 700;
}
/* GENERAL CONTAINER & FLEX LAYOUTS */
.container {
max-width: 1180px;
width: 100%;
margin: 0 auto;
padding: 0 16px;
}
section {
margin-bottom: 60px;
padding: 40px 20px;
background: #FFF;
border-radius: 24px;
box-shadow: 0 4px 24px 0 rgba(81, 51, 255, 0.06), 0 0px 0px 0 #fff;
transition: box-shadow 0.18s cubic-bezier(.76,.04,.27,.99);
}
section:hover {
box-shadow: 0 10px 38px 0 rgba(81, 51, 255, 0.11), 0 2px 8px 0 #fff;
}
.text-section {
margin-bottom: 20px;
display: flex;
flex-direction: column;
gap: 15px;
}
.content-wrapper {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
}
.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;
}
/* Feature grid, services, etc */
.feature-grid {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: space-between;
}
.feature-grid > div {
background: var(--color-fun1);
border-radius: 20px;
flex: 1 1 260px;
min-width: 240px;
padding: 28px 16px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
box-shadow: 0 3px 18px -3px rgba(255,160,67,0.13);
margin-bottom: 20px;
transition: transform 0.22s cubic-bezier(.86,-0.01,.44,1.06), box-shadow 0.22s;
position: relative;
z-index: 0;
}
.feature-grid > div:hover {
transform: translateY(-10px) scale(1.03) rotate(-2deg);
background: var(--color-fun3);
color: #fff;
box-shadow: 0 8px 36px 0 rgba(99,165,247, 0.18), 0 0px 0px 0 var(--color-fun2);
}
.feature-grid img {
width: 48px; height: 48px;
margin-bottom: 9px;
filter: drop-shadow(2px 2px 7px rgba(33,150,243,0.10));
}
/* CARDS / TESTIMONIALS */
.card-container {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.card {
background: var(--color-fun3);
border-radius: 18px;
margin-bottom: 20px;
padding: 24px 20px;
color: #fff;
position: relative;
min-width: 240px;
flex: 1 1 300px;
box-shadow: 0 2px 11px 0 rgba(99,165,247,0.14);
}
.card-content {
display: flex;
flex-direction: column;
justify-content: center;
gap: 11px;
}
.testimonial-card {
display: flex;
align-items: center;
gap: 20px;
background: #fff;
border-left: 6px solid var(--color-fun4);
padding: 20px;
margin-bottom: 20px;
border-radius: 18px;
box-shadow: 0 8px 34px -13px rgba(68,46,82,0.11);
position: relative;
transition: box-shadow 0.18s;
}
.testimonial-card blockquote {
font-family: 'Montserrat', Arial, sans-serif;
font-size: 1.03rem;
color: var(--color-primary);
font-style: italic;
margin: 0;
}
.testimonial-card footer {
color: var(--color-fun4);
font-size: 1em;
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 700;
margin-left: 18px;
}
.testimonial-card:hover {
box-shadow: 0 8px 36px 0 rgba(255,122,107,0.21), 0 2px 8px 0 var(--color-fun2);
border-left-color: var(--color-fun2);
}
/* SERVICES LIST */
.service-list {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 20px;
}
.service-list > div {
background: var(--color-fun2);
color: #232B34;
padding: 22px 16px;
border-radius: 18px;
box-shadow: 0 3px 16px -7px rgba(32,236,166,0.10);
flex: 1 1 270px;
transition: box-shadow 0.19s, background 0.21s, color 0.22s;
margin-bottom: 20px;
}
.service-list > div:hover {
box-shadow: 0 10px 34px 0 rgba(105,230,166, 0.23), 0 1px 6px 0 #fff;
background: var(--color-fun1);
}
.service-list h3 {
color: var(--color-primary);
}
/* BUTTONS */
.cta-primary {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 800;
font-size: 1.1rem;
border-radius: 30px;
padding: 14px 38px;
background: linear-gradient(90deg,var(--color-fun3) 60%, var(--color-fun1) 100%);
color: var(--color-primary);
cursor: pointer;
box-shadow: 0 3px 14px -5px var(--color-fun3);
margin: 0 0 16px 0;
border: 0;
text-shadow: 1px 2px 0 #fff;
transition: background 0.19s, color 0.18s, transform 0.14s;
letter-spacing: 0.018em;
outline: 0;
}
.cta-primary:hover, .cta-primary:focus {
background: linear-gradient(90deg, var(--color-fun4) 60%, var(--color-fun1));
color: #fff;
transform: translateY(-2px) scale(1.04) rotate(-1deg);
box-shadow: 0 5px 20px 0 #FF7A6B55;
text-shadow: 1px 2px 0 #232B3433;
}
.cta-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 700;
font-size: 1rem;
border-radius: 25px;
padding: 11px 28px;
background: linear-gradient(70deg, var(--color-fun2), var(--color-fun3));
color: #fff;
margin: 10px 0 0 0;
border: 0;
cursor: pointer;
transition: background 0.18s, color 0.16s, transform 0.14s;
}
.cta-secondary:hover, .cta-secondary:focus {
background: linear-gradient(70deg, var(--color-fun4), var(--color-fun2));
color: var(--color-primary);
transform: translateY(-2px) scale(1.02) rotate(1deg);
}
/* HEADER */
header {
background: #fff;
box-shadow: 0 7px 24px -17px var(--color-primary)33;
position: relative;
z-index: 30;
padding: 0 0 0 0;
}
header .container {
display: flex;
align-items: center;
gap: 24px;
padding-top: 18px;
padding-bottom: 18px;
justify-content: space-between;
}
.logo img {
height: 46px;
width: auto;
display: block;
}
.main-nav {
display: flex;
gap: 20px;
align-items: center;
}
.main-nav a {
font-family: 'Montserrat', Arial, sans-serif;
font-size: 1.03rem;
font-weight: 700;
color: var(--color-fun4);
position: relative;
padding: 7px 13px;
border-radius: 20px;
transition: background .13s, color .14s;
margin-right: 0;
}
.main-nav a:hover, .main-nav a:focus {
background: var(--color-fun1);
color: var(--color-primary);
text-decoration: none;
}
/* Burger Menu Button */
.mobile-menu-toggle {
display: none;
font-size: 2rem;
background: none;
color: var(--color-fun3);
border: none;
cursor: pointer;
padding: 6px 12px;
margin-left: 12px;
border-radius: 50%;
transition: background .15s;
}
.mobile-menu-toggle:focus, .mobile-menu-toggle:hover {
background: var(--color-fun1);
color: var(--color-primary);
}
/* MOBILE MENU */
.mobile-menu {
display: flex;
flex-direction: column;
position: fixed;
top: 0; left: 100vw;
width: 100vw;
height: 100vh;
background: #fff;
box-shadow: -2px 0 40px 0 rgba(81,51,255,0.11);
z-index: 1200;
transition: transform 0.35s cubic-bezier(.86,.09,.42,1), left 0s .35s;
overflow-y: auto;
pointer-events: none;
opacity: 0;
}
.mobile-menu.open {
left: 0;
transform: translateX(0);
opacity: 1; pointer-events: auto;
transition: transform 0.35s cubic-bezier(.86,.09,.42,1), left 0s;
}
.mobile-menu .mobile-menu-close {
align-self: flex-end;
margin: 18px 18px 0 0;
font-size: 2.1rem;
color: var(--color-fun4);
background: none;
border: none;
cursor: pointer;
border-radius: 50%;
width: 48px; height: 48px;
transition: background .12s, color .14s;
}
.mobile-menu .mobile-menu-close:focus,
.mobile-menu .mobile-menu-close:hover {
background: var(--color-fun1);
color: var(--color-primary);
}
.mobile-nav {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 32px 0 0 32px;
gap: 20px;
}
.mobile-nav a {
font-family: 'Montserrat', Arial, sans-serif;
color: var(--color-fun3);
font-size: 1.3rem;
font-weight: 900;
padding: 12px 0;
border-radius: 20px;
transition: background .14s, color .15s;
width: 100%;
}
.mobile-nav a:hover, .mobile-nav a:focus {
background: var(--color-fun2);
color: var(--color-primary);
}
/* Hide desktop nav on mobile, show burger, etc */
@media (max-width: 1020px) {
.main-nav {
display: none;
}
.mobile-menu-toggle {
display: inline-flex;
}
}
@media (min-width: 1021px) {
.mobile-menu {
display: none !important;
opacity: 0 !important;
}
}
/* FOOTER */
footer {
background: #222b37;
color: #fff;
box-shadow: 0 -4px 28px -13px var(--color-primary)13;
width: 100%;
min-height: 120px;
}
footer .container {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
padding: 26px 16px 18px 16px;
gap: 20px;
}
.footer-branding {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
max-width: 270px;
}
.footer-branding img {
height: 32px; margin-bottom: 4px;
}
.footer-nav {
display: flex;
gap: 18px;
flex-wrap: wrap;
}
.footer-nav a {
color: #fff;
font-family: 'Montserrat', Arial, sans-serif;
font-size: 1rem;
transition: color .16s;
}
.footer-nav a:hover {
color: var(--color-fun1);
}
@media (max-width: 650px) {
footer .container {
flex-direction: column;
gap: 16px;
align-items: flex-start;
padding: 20px 8px 12px 8px;
}
.footer-branding { max-width: 420px; }
.footer-nav { gap: 13px; }
}
/* COOKIES CONSENT BANNER */
.cookie-banner {
position: fixed;
left: 0; right: 0;
bottom: 0;
z-index: 9999;
background: #fffbe8;
color: var(--color-primary);
border-top: 3px solid var(--color-fun1);
box-shadow: 0 -2px 16px -6px rgba(249,204,47,0.13);
display: flex;
flex-direction: column;
align-items: center;
padding: 22px 14px 16px 14px;
gap: 14px;
font-size: 1rem;
animation: cb-slideup .6s cubic-bezier(.6,1.6,.34,1.02);
}
@keyframes cb-slideup {0%{transform:translateY(80px);opacity:0;} 90%{opacity:1;} 100%{transform:translateY(0);opacity:1;}}
.cookie-banner .cookie-actions {
display: flex;
gap: 18px;
margin-top: 6px;
flex-wrap: wrap;
}
.cookie-banner button {
font-family: 'Montserrat', Arial, sans-serif;
font-weight: bold;
font-size: 1rem;
padding: 9px 28px;
border-radius: 36px;
border: none;
cursor: pointer;
margin-right: 0;
margin-top: 0;
transition: background .13s, color .12s;
}
.cookie-banner .cookie-accept {
background: var(--color-fun3);
color: white;
}
.cookie-banner .cookie-accept:hover {background: var(--color-fun2); color: #232B34;}
.cookie-banner .cookie-reject {
background: var(--color-fun4);
color: white;
}
.cookie-banner .cookie-reject:hover {background: var(--color-fun1); color: #232B34;}
.cookie-banner .cookie-settings {
background: transparent;
color: var(--color-primary);
border: 2px solid var(--color-fun2);
font-weight: 700;
}
.cookie-banner .cookie-settings:hover {background: var(--color-fun2); color: #fff;}
/* COOKIE MODAL POPUP */
.cookie-modal {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(48,58,70,0.38);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
transition: opacity .22s;
opacity: 0;
pointer-events: none;
}
.cookie-modal.open {
opacity: 1;
pointer-events: auto;
}
.cookie-modal .cookie-modal-content {
background: #fff;
border-radius: 22px;
padding: 32px 28px;
max-width: 380px;
width: 96vw;
min-width: 0;
box-shadow: 0 7px 38px -8px rgba(99,165,247,0.22);
animation: modal-pop .34s cubic-bezier(.44,1.42,.57,1.07);
display: flex;
flex-direction: column;
gap: 13px;
position: relative;
}
@keyframes modal-pop {
0% {transform: scale(.8) translateY(30px); opacity:0;}
100%{transform: scale(1) translateY(0); opacity:1;}
}
.cookie-modal .cookie-modal-title {
font-family: 'Montserrat', Arial, sans-serif;
font-size: 1.25rem;
font-weight: bold;
color: var(--color-fun2);
margin-bottom: 10px;
}
.cookie-modal .cookie-modal-close {
position: absolute;
right: 16px;
top: 16px;
background: none;
border: none;
font-size: 1.6rem;
color: var(--color-fun4);
cursor: pointer;
border-radius: 50%;
padding: 6px;
transition: background .13s;
}
.cookie-modal .cookie-modal-close:hover, .cookie-modal .cookie-modal-close:focus {
background: var(--color-fun1);
}
.cookie-modal .cookie-category {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #ececec;
padding: 12px 0;
}
.cookie-modal .cookie-category:last-child {border-bottom: none;}
.cookie-modal .cookie-category-label {
font-family: 'Montserrat', Arial, sans-serif;
font-size: .98rem;
color: #232B34;
flex: 1;
}
.cookie-modal .cookie-category-toggle {
display: flex;
align-items: center;
gap: 10px;
}
/* toggle mimic as playful switch for analytics/marketing */
.cookie-modal input[type="checkbox"] {
width: 32px; height: 18px;
background: var(--color-fun1);
appearance: none;
border: 2px solid var(--color-fun2);
border-radius: 10px;
position: relative;
outline: none;
cursor: pointer;
transition: border 0.16s, background 0.13s;
}
.cookie-modal input[type="checkbox"]:checked {
background: var(--color-fun3);
border: 2px solid var(--color-fun3);
}
.cookie-modal input[type="checkbox"]:before {
content: '';
position: absolute;
left: 3px; top: 2px;
width: 14px; height: 14px;
background: #fff;
border-radius: 50%;
box-shadow: 0 2px 8px 0 var(--color-fun2)22;
transition: left 0.16s;
}
.cookie-modal input[type="checkbox"]:checked:before {
left: 13px;
}
.cookie-modal .category-desc {
font-size: 0.88em;
color: var(--color-secondary);
margin-top: 3px;
padding-left: 4px;
}
.cookie-modal .cookie-modal-actions {
display: flex;
gap: 16px;
margin-top: 18px;
}
.cookie-modal .cookie-modal-actions button {
font-family: inherit;
font-size: 1rem;
border-radius: 28px;
border: none;
padding: 10px 28px;
cursor: pointer;
background: var(--color-fun3);
color: #fff;
font-weight: 700;
transition: background .14s, color .13s;
}
.cookie-modal .cookie-modal-actions .cookie-modal-save:hover {
background: var(--color-fun2);
color: var(--color-primary);
}
.cookie-modal .cookie-modal-actions .cookie-modal-cancel {
background: var(--color-fun4);
color: #fff;
}
.cookie-modal .cookie-modal-actions .cookie-modal-cancel:hover {
background: var(--color-fun1);
color: var(--color-primary);
}
/* ICON TEXT LINKS (used in contact) */
ul li img {
height: 21px;
width: 21px;
margin-right: 6px;
display: inline-block;
vertical-align: middle;
position: relative;
top: -2px;
}
ul li {
margin-bottom: 7px;
display: flex; align-items: center;
gap: 5px;
}
/* Visual Playful Details */
.feature-grid > div:before {
content: '';
position: absolute;
left: 8px; top: 12px;
width: 19px; height: 19px;
border-radius: 50%;
background: var(--color-fun4);
opacity: 0.06;
z-index: 1;
pointer-events: none;
animation: floatmark 2.4s infinite alternate cubic-bezier(.7,.1,.53,.87);
}
@keyframes floatmark {0%{transform:translateY(0);}100%{transform:translateY(10px);}}
/* Animations / playfulness */
.cta-primary, .cta-secondary {
transition: background .19s, color .13s, transform .15s, box-shadow .14s;
animation: wiggle-entry .7s cubic-bezier(.74,0,.3,1.09) 1;
}
@keyframes wiggle-entry {
0% { transform: scale(.88) rotate(-3deg); opacity:0; }
80% { transform: scale(1.08) rotate(6deg);}
100% { transform: scale(1) rotate(0) ; opacity:1;}
}
.feature-grid > div, .service-list > div {
animation: card-popin .7s cubic-bezier(.44,1.42,.57,1.07) backwards;
}
@keyframes card-popin {0%{opacity:0;transform:translateY(32px) scale(.88); } 100%{opacity:1;transform: none;}}
/* Responsive Design (Mobile First) */
@media (max-width: 950px) {
.container {
padding-left: 7px;
padding-right: 7px;
}
section {
padding: 28px 6px;
margin-bottom: 42px;
}
}
@media (max-width: 768px) {
h1 { font-size: 1.45rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: 1rem; }
section { padding: 21px 2vw; margin-bottom: 35px; border-radius: 15px; }
.container { padding-left: 3px; padding-right: 3px; }
.feature-grid, .service-list, .content-grid, .card-container {
flex-direction: column;
gap: 20px;
}
.feature-grid > div, .service-list > div, .card {
min-width: 0; width: 97%;
max-width: 100%;
}
.testimonial-card { flex-direction: column; gap: 8px; }
.content-wrapper, .text-section { gap: 13px; }
.text-image-section { flex-direction: column; gap: 13px; }
.main-nav { display: none; }
}
/* Spacing for subsection content */
.section {
margin-bottom: 60px;
padding: 40px 20px;
}
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; }
.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; }
/* Visual Hierarchy */
dl,dt,dd { margin-bottom: 1em; }
section ul, section ol { margin-bottom: 0.9em; }
/* Miscellaneous Elements */
blockquote {
font-size: 1.08em;
color: var(--color-fun4);
border-left: 4px solid var(--color-fun4);
padding: 2px 0 2px 11px;
font-style: italic;
margin-bottom: 0.5em;
}
/* Remove blue tap highlight on touch */
html {
-webkit-tap-highlight-color: rgba(0,0,0,0.10);
}
::-webkit-input-placeholder { color: var(--color-secondary); }
::-moz-placeholder { color: var(--color-secondary); }
:-ms-input-placeholder { color: var(--color-secondary); }
::placeholder { color: var(--color-secondary); }
/* Accessibility: Focus Outline */
a:focus, button:focus {
outline: 2px dashed var(--color-fun3);
outline-offset: 3px;
background: var(--color-fun1)11;
}
/* Hide outline for mouse users */
*:focus:not(:focus-visible) { outline: none; }
/* Fix for all interactive elements for touch and pointer accuracy */
button, .cta-primary, .cta-secondary, .mobile-menu-toggle {
touch-action: manipulation;
}
/* PRINT STYLES */
@media print {
header, footer, .mobile-menu, .cookie-banner, .cookie-modal { display: none !important; }
section { box-shadow: none !important; background: #fff !important; }
}