/* ------------------------------------------------------------------ ConsulTriad · Custom CSS TailwindCSS is loaded globally – these utilities are meant to COMPLEMENT, not replace, framework classes. ------------------------------------------------------------------- */ /* ========= THEME ========= */ :root{ /* Triadic palette */ --color-primary:#4f46e5; /* Indigo */ --color-secondary:#10b981; /* Emerald */ --color-tertiary:#f59e0b; /* Amber */ /* Darker tones for hovers / shadows */ --color-primary-dark:#3730a3; --color-secondary-dark:#047857; --color-tertiary-dark:#b45309; /* Neutrals */ --color-bg:#ffffff; --color-surface:#f9fafb; --color-text:#1f2937; /* Gradients */ --gradient-primary:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%); --gradient-secondary:linear-gradient(135deg,var(--color-tertiary) 0%,var(--color-secondary) 100%); } /* ========= BASE ========= */ body{ font-family:'Lato',sans-serif; color:var(--color-text); background:var(--color-bg); scroll-behavior:smooth; } h1,h2,h3,h4,h5,h6{font-family:'Roboto',sans-serif;color:var(--color-text);} /* Prevent header overlap on static pages */ .legal-page{padding-top:100px;}/* add class to privacy.html & terms.html root */ /* Hero text must always be white for readability */ .hero-heading, .hero-subheading{color:#ffffff;text-shadow:0 2px 6px rgba(0,0,0,.45);} /* Utility class for curved / skewed sections (trend: Curved Grids) */ .curved-top{clip-path:ellipse(150% 100% at 50% 0%);} .curved-bottom{clip-path:ellipse(150% 100% at 50% 100%);} /* ========= GLOBAL BUTTONS ========= */ .btn, button, input[type='submit']{ @apply inline-flex items-center justify-center px-8 py-3 rounded-full font-roboto font-semibold transition; background:var(--color-primary); color:#ffffff; border:none; cursor:pointer; } .btn:hover, button:hover, input[type='submit']:hover{background:var(--color-primary-dark);} .btn--secondary{background:var(--color-secondary);} .btn--secondary:hover{background:var(--color-secondary-dark);} .btn--tertiary{background:var(--color-tertiary);} .btn--tertiary:hover{background:var(--color-tertiary-dark);} /* ========= LINKS ========= */ a{transition:all .25s;} a:hover{color:var(--color-primary);} a.read-more{font-weight:600;position:relative;padding-right:1.5rem;} a.read-more::after{content:"→";position:absolute;right:.25rem;transition:transform .25s;} a.read-more:hover::after{transform:translateX(4px);} /* ========= SECTIONS ========= */ section{padding-block:6rem;} section.bg-cover{ background-size:cover; background-repeat:no-repeat; position:relative; } section.bg-cover::before{ content:''; position:absolute;inset:0; background:rgba(0,0,0,.5); } section.bg-cover>*{position:relative;z-index:1;} /* ========= NAVBAR ========= */ header.fixed{ backdrop-filter:blur(10px); background:rgba(255,255,255,.9); } /* ========= CARDS & GRID ITEMS ========= */ .card, .item, .testimonial, .team-member, .product-card{ display:flex; flex-direction:column; align-items:center; text-align:center; background:var(--color-surface); border-radius:1rem; box-shadow:0 6px 20px rgba(0,0,0,.06); overflow:hidden; transition:transform .3s; } .card:hover, .item:hover, .testimonial:hover, .team-member:hover, .product-card:hover{transform:translateY(-4px);} .image-container{ width:100%; height:240px; overflow:hidden; } .image-container img{ width:100%; height:100%; object-fit:cover; margin:0 auto; } /* ========= STAT COUNTERS ========= */ .counter{font-variant-numeric:tabular-nums;} /* ========= PARALLAX & SCROLL EFFECTS ========= */ .parallax{ background-attachment:fixed; background-size:cover; background-repeat:no-repeat; } .sr{opacity:1;transform:translateY(20px);transition:all .6s ease-out;} .sr.show{opacity:1;transform:none;} /* ========= GLASSMORPHISM ========= */ .glass{ background:rgba(255,255,255,.15); backdrop-filter:blur(16px) saturate(160%); border:1px solid rgba(255,255,255,.25); } /* ========= SUCCESS PAGE ========= */ body.success-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--color-surface); } /* ========= FOOTER ========= */ footer{ background:#1f2937; color:#e5e7eb; } footer a{color:#e5e7eb;} footer a:hover{color:var(--color-tertiary);} footer .social-link{font-weight:600;} /* ========= SOCIAL ICON TEXT (NO IMG) ========= */ .social-link::before{ font-family:Arial,Helvetica,sans-serif; display:inline-block; margin-right:.5rem; font-weight:700; } .social-link.facebook::before{content:'f';} .social-link.twitter::before{content:'t';} .social-link.instagram::before{content:'i';} /* ========= RESPONSIVE HELPERS ========= */ @media (min-width:768px){ .grid-auto-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;} } /* ========= FORM ELEMENTS ========= */ input:not([type='submit']), textarea{ @apply w-full border-b-2 border-gray-200 p-3 focus:outline-none focus:border-primary-600 transition; } /* ========= ACCESSIBILITY ========= */ :focus-visible{outline:2px dashed var(--color-primary);outline-offset:2px;}