html { scroll-behavior: smooth; }
body { font-family: 'Poppins', sans-serif; font-size: 16px; line-height: 1.6; overflow-x: hidden; }
/* Remove the browser's default tap-highlight flash (often a semi-transparent
yellow/gray overlay on mobile) and replace the default focus ring — which
some browsers/OS themes render in a jarring yellow/orange — with a clean
navy outline that matches the brand, only shown for keyboard navigation. */
* { -webkit-tap-highlight-color: transparent; }
a, button, input, textarea, select { -webkit-tap-highlight-color: transparent; }
:focus { outline: none; }
:focus-visible {
outline: 2px solid #1a5228;
outline-offset: 2px;
}
/* Base responsive font scaling — slightly smaller base on very small phones */
@media (max-width: 380px) {
body { font-size: 15px; }
}
img, svg { max-width: 100%; height: auto; }
/* Prose overrides so page/CPT editor content looks good without full Tailwind typography plugin */
.prose h1, .prose h2, .prose h3, .prose h4, .prose strong, .prose b { font-weight: 800 !important; }
.prose h2 { font-size: 1.5rem; color: #0F2A38 !important; margin-top: 1.5em; }
.prose h3 { font-size: 1.2rem; font-weight: 700 !important; color: #0F2A38 !important; margin-top: 1.25em; }
.prose p { color: #555 !important; line-height: 1.8; margin: 1em 0; font-size: 0.975rem; font-weight: 400 !important; }
.prose img { border-radius: 6px; }
.prose a { color: #1a5228; text-decoration: underline; word-break: break-word; }
.prose ul { list-style: disc; padding-left: 1.5em; }
.prose ol { list-style: decimal; padding-left: 1.5em; }
@media (min-width: 768px) {
.prose h2 { font-size: 1.75rem; }
.prose h3 { font-size: 1.35rem; }
.prose p { font-size: 1.0625rem; }
}
/* WhatsApp pulse animation */
@keyframes pabricaPulse {
0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.animate-pulse-slow { animation: pabricaPulse 2.4s infinite; }
/* Mobile offcanvas menu open state */
html.pabrica-menu-open,
body.pabrica-menu-open { overflow: hidden; }
#pabrica-offcanvas.is-open { display: block; }
/* Simple fade-up fallback for browsers before AOS initializes */
[data-aos] { }
/* ===================================================
Custom Dot Cursor (desktop only)
=================================================== */
.pabrica-cursor-active,
.pabrica-cursor-active a,
.pabrica-cursor-active button,
.pabrica-cursor-active input,
.pabrica-cursor-active textarea,
.pabrica-cursor-active select,
.pabrica-cursor-active label {
cursor: none !important;
}
.pabrica-cursor-dot,
.pabrica-cursor-ring {
position: fixed;
top: 0;
left: 0;
border-radius: 50%;
pointer-events: none;
z-index: 99999;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity .2s ease, width .25s ease, height .25s ease, background-color .25s ease;
}
.pabrica-cursor-dot {
width: 8px;
height: 8px;
background-color: var(--pabrica-cursor-color, #1a5228);
}
.pabrica-cursor-ring {
width: 34px;
height: 34px;
border: 2px solid var(--pabrica-cursor-color, #1a5228);
background-color: transparent;
}
.pabrica-cursor-active .pabrica-cursor-dot,
.pabrica-cursor-active .pabrica-cursor-ring {
opacity: 1;
}
/* Hover state: grow the ring + tint it over clickable elements */
.pabrica-cursor-ring.is-hovering {
width: 52px;
height: 52px;
background-color: color-mix(in srgb, var(--pabrica-cursor-color, #1a5228) 15%, transparent);
}
.pabrica-cursor-dot.is-hovering {
width: 4px;
height: 4px;
}
/* Never hide the real cursor on touch devices */
@media (hover: none), (pointer: coarse) {
.pabrica-cursor-active,
.pabrica-cursor-active a,
.pabrica-cursor-active button {
cursor: auto !important;
}
.pabrica-cursor-dot,
.pabrica-cursor-ring {
display: none !important;
}
}
/* ===================================================
Global responsive typography
Tailwind's utility classes (text-3xl, text-6xl, etc.) are
fixed sizes per breakpoint bucket, and 0–639px (everything
below Tailwind's own "sm") is treated as one bucket — too
wide a range for a 320px phone and a 600px tablet to share
the same size. These overrides add finer-grained scaling
for small phones across every page, on every heading/
paragraph, without needing to edit each template.
=================================================== */
@media (max-width: 480px) {
h1, .text-6xl, .text-5xl { font-size: 1.85rem !important; line-height: 1.25 !important; }
h2, .text-4xl { font-size: 1.5rem !important; line-height: 1.3 !important; }
h3, .text-3xl { font-size: 1.25rem !important; line-height: 1.35 !important; }
.text-2xl { font-size: 1.125rem !important; }
.text-xl { font-size: 1.05rem !important; }
.text-lg { font-size: 1rem !important; }
p, li, .prose p { font-size: 0.9375rem !important; line-height: 1.65 !important; }
.px-5 { padding-left: 1rem !important; padding-right: 1rem !important; }
}
@media (max-width: 360px) {
h1, .text-6xl, .text-5xl { font-size: 1.6rem !important; }
h2, .text-4xl { font-size: 1.35rem !important; }
h3, .text-3xl { font-size: 1.15rem !important; }
p, li, .prose p { font-size: 0.9rem !important; }
}
/* Long headings should always wrap instead of overflowing on any screen size */
h1, h2, h3 { overflow-wrap: break-word; word-break: break-word; }
/* Mobile offcanvas menu — yellow pill background on hover/active */
.pabrica-mobile-nav { list-style: none; margin: 0; padding: 0; }
.pabrica-mobile-nav li { width: 100%; text-align: center; }
.pabrica-mobile-nav li > a {
display: block;
padding: 10px 20px;
border-radius: 8px;
color: #fff;
transition: background-color .2s ease, color .2s ease;
}
.pabrica-mobile-nav li > a:hover,
.pabrica-mobile-nav li.current-menu-item > a,
.pabrica-mobile-nav li.current_page_item > a,
.pabrica-mobile-nav li.current-menu-ancestor > a {
background-color: var(--pabrica-cursor-color, #1a5228);
color: #ffffff;
}
.custom-logo{
width:120px;
}
.group:hover .group-hover\:text-\[\#F9B233\] {
color: #1a5228 !important;
}
.group:hover .group-hover\:text-\[\#F9B233\] svg {
stroke: #1a5228 !important;
}