/* =================================================================== style.css – Custom brutalist pastel theme Tailwind CSS is already included globally via CDN in These additional styles extend & complement Tailwind =================================================================== */ /* ---------- Root Theme & Typography ----------------------------- */ :root{ --font-heading:'Manrope',sans-serif; --font-body:'Rubik',sans-serif; /* Pastel palette */ --clr-primary:#FFB3B3; /* soft coral pink */ --clr-primary-dark:#E38A8A; /* darker shade */ --clr-accent:#B3E5FF; /* baby blue */ --clr-accent-dark:#7ECBE8; /* darker accent */ --clr-bg:#F4F3EF; /* global background */ --clr-surface:#FAF9F7; /* card surface */ --clr-dark:#222222; /* main dark text */ --clr-light:#FFFFFF; /* pure white */ /* Gradients */ --grad-dark:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)); --grad-light:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)); } /* Apply fonts */ body{font-family:var(--font-body);} h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);} /* Ensure hero text readability */ #hero h1, #hero p, #hero a{color:var(--clr-light);} /* ---------- Global Utilities ------------------------------------ */ .parallax-bg{ background-size:cover; background-repeat:no-repeat; background-attachment:fixed; position:relative; } .overlay-gradient::before{ content:''; position:absolute; inset:0; background:var(--grad-dark); z-index:0; } .overlay-gradient>*{position:relative;z-index:1;} .card, .item, .testimonial, .team-member, .product-card{ display:flex; flex-direction:column; align-items:center; text-align:center; background:var(--clr-surface); border:3px solid var(--clr-dark); padding:1.5rem; transition:transform .3s ease; } .card:hover, .item:hover, .testimonial:hover, .team-member:hover, .product-card:hover{transform:translateY(-4px);} /* Image containers inside cards */ .card-image, .image-container{ width:100%; height:14rem; /* fixed height for consistency */ overflow:hidden; display:flex; align-items:center; justify-content:center; } .card-image img, .image-container img{ width:100%; height:100%; object-fit:cover; margin:0 auto; } /* ---------- Buttons & Links ------------------------------------- */ .btn, button, input[type='submit']{ background:var(--clr-accent); color:var(--clr-dark); border:2px solid var(--clr-dark); padding:.75rem 1.5rem; font-weight:700; transition:all .25s ease-out; } .btn:hover, button:hover, input[type='submit']:hover{ background:var(--clr-accent-dark); transform:translateY(-2px); } .btn:active, button:active, input[type='submit']:active{ transform:translateY(0); } a{ color:var(--clr-primary-dark); text-decoration:none; transition:color .2s; } a:hover{color:var(--clr-primary);} .read-more{ font-weight:700; border-bottom:2px solid var(--clr-primary); } .read-more:hover{ color:var(--clr-dark); border-color:var(--clr-dark); } /* ---------- Navigation ------------------------------------------ */ header{ border-bottom:3px solid var(--clr-dark); } #mobileMenu a{border-top:1px solid var(--clr-dark);} /* ---------- Sections -------------------------------------------- */ section{ padding-top:5rem; padding-bottom:5rem; } @media(min-width:768px){ section{padding-top:6rem;padding-bottom:6rem;} } /* About, Media, Case Studies backgrounds handled inline */ /* ---------- Footer ---------------------------------------------- */ footer{ border-top:6px double var(--clr-primary-dark); font-size:.95rem; } footer h4{font-weight:800;color:var(--clr-light);} footer a{ color:var(--clr-light); text-decoration:underline; } footer a:hover{color:var(--clr-primary);} /* Social links appearance */ footer ul li a{ display:inline-block; padding:.15rem 0; transition:transform .2s ease; } footer ul li a:hover{transform:translateX(3px);} /* ---------- Modals ---------------------------------------------- */ .modal{ animation:fadeIn .3s ease forwards; } @keyframes fadeIn{ from{opacity:0;}to{opacity:1;} } .modal-content{ max-height:80vh; overflow-y:auto; } /* ---------- Parallax Animations (GSAP triggers in JS) ------------ */ [data-parallax]{ perspective:1000px; } [data-parallax] .inner{ transform-style:preserve-3d; will-change:transform; } /* ---------- Success Page ---------------------------------------- */ .page-success{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--clr-bg); } /* ---------- Privacy & Terms Pages ------------------------------- */ .page-legal{ padding-top:100px; /* prevents overlap with fixed header */ } /* ---------- Cookie Popup (overrides inline bg for consistency) --- */ #cookiePopup{ font-family:var(--font-body); background:rgba(0,0,0,.85); } #cookiePopup button{ background:var(--clr-primary); } #cookiePopup button:hover{ background:var(--clr-primary-dark); } /* ---------- Animations & Transitions ----------------------------- */ .fade-up{ opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .6s ease; } .fade-up.is-visible{ opacity:1; transform:translateY(0); } /* ---------- Helper Classes -------------------------------------- */ .shadow-brutal{box-shadow:6px 6px 0 0 var(--clr-dark);} .border-brutal{border:3px solid var(--clr-dark);} .bg-pastel-primary{background:var(--clr-primary);} .bg-pastel-accent{background:var(--clr-accent);} .text-dark{color:var(--clr-dark);} .text-light{color:var(--clr-light);} header nav{ flex-wrap: wrap; } header{ background: rgba(251, 232, 231, 1) !important; z-index: 100; }