/* Totco homepage: small, readable overrides. Purpose: - Win against Bootstrap/Odoo theme styles using *scoping + specificity*. - Keep overrides maintainable (avoid editing the huge Tailwind build). Scope: - Only applies on pages with . */ body.totco-home { /* Optionally tune palette used by utility classes on the homepage */ --totco-primary: hsl(145 48% 34%); --totco-primary-2: hsl(145 48% 45%); --totco-accent: hsl(41 92% 56%); } /* Header icon buttons: ensure consistent shape, border, and hover */ body.totco-home .header-icon-btn { border-radius: 9999px; border: 1px solid hsl(var(--secondary-border)); background-color: hsl(var(--secondary)); transition: transform .15s ease, background-color .15s ease, border-color .15s ease; } body.totco-home .header-icon-btn:hover { transform: translateY(-1px); background-color: hsl(var(--secondary) / 0.85); } body.totco-home .header-icon-btn i { color: var(--totco-primary); } /* Cart qty badge: make it pop and keep size stable */ body.totco-home .my_cart_quantity { border-radius: 9999px; padding: 0.15rem 0.55rem; min-width: 2.15rem; justify-content: center; letter-spacing: -0.01em; font-weight: 800; } /* Reduce accidental bootstrap button overrides on the custom button */ body.totco-home button[data-testid="button-header-cart"] { border-radius: 9999px; } /* Dropdown menu: stronger contrast + smoother shadow */ body.totco-home .dropdown-menu { border-radius: 0.9rem; border: 1px solid rgba(2, 6, 23, 0.10); box-shadow: 0 18px 40px rgba(2, 6, 23, 0.16); } body.totco-home .dropdown-menu a { border-radius: 0.65rem; margin: 0 0.4rem; } body.totco-home .dropdown-menu a:hover { background-color: rgba(2, 6, 23, 0.04); } /* Prevent bootstrap setting link underline/colors unpredictably */ body.totco-home a, body.totco-home a:hover { text-decoration: none; } /* Fix: Odoo/Bootstrap grid system hijacks Tailwind `.grid` with something like: `grid-template-columns: repeat(var(--columns, 12), 1fr);` We reset the template ONLY for homepage grids that don't explicitly opt into a Tailwind `grid-cols-*` class. Notes: - Tailwind's `grid-cols-*` utilities set grid-template-columns themselves. - This keeps those working while neutralizing the unwanted 12-col template. */ body.totco-home .grid:not([class*="grid-cols-"]) { grid-template-columns: none; } /* Spacing & sizing precedence -------------------------- If Bootstrap/Odoo theme overrides utility class names (mt-*, p-*, gap-* ...), element sizes/spacing drift. Here we re-assert the key Tailwind utilities used on the homepage under `body.totco-home` + `!important`. We intentionally keep this list focused on the utilities actually used in home_page_dynamic.xml (and a few common ones). */ /* Margin (top) */ body.totco-home .mt-0 { margin-top: 0 !important; } body.totco-home .mt-1 { margin-top: calc(var(--spacing) * 1) !important; } body.totco-home .mt-2 { margin-top: calc(var(--spacing) * 2) !important; } body.totco-home .mt-3 { margin-top: calc(var(--spacing) * 3) !important; } body.totco-home .mt-4 { margin-top: calc(var(--spacing) * 4) !important; } body.totco-home .mt-5 { margin-top: calc(var(--spacing) * 5) !important; } body.totco-home .mt-6 { margin-top: calc(var(--spacing) * 6) !important; } body.totco-home .mt-8 { margin-top: calc(var(--spacing) * 8) !important; } body.totco-home .mt-10 { margin-top: calc(var(--spacing) * 10) !important; } body.totco-home .mt-12 { margin-top: calc(var(--spacing) * 12) !important; } /* Margin bottom (common) */ body.totco-home .mb-0 { margin-bottom: 0 !important; } body.totco-home .mb-1 { margin-bottom: calc(var(--spacing) * 1) !important; } body.totco-home .mb-2 { margin-bottom: calc(var(--spacing) * 2) !important; } body.totco-home .mb-3 { margin-bottom: calc(var(--spacing) * 3) !important; } body.totco-home .mb-4 { margin-bottom: calc(var(--spacing) * 4) !important; } body.totco-home .mb-6 { margin-bottom: calc(var(--spacing) * 6) !important; } body.totco-home .mb-8 { margin-bottom: calc(var(--spacing) * 8) !important; } body.totco-home .mb-12 { margin-bottom: calc(var(--spacing) * 12) !important; } /* Padding */ body.totco-home .p-0 { padding: 0 !important; } body.totco-home .p-2 { padding: calc(var(--spacing) * 2) !important; } body.totco-home .p-3 { padding: calc(var(--spacing) * 3) !important; } body.totco-home .p-4 { padding: calc(var(--spacing) * 4) !important; } body.totco-home .p-6 { padding: calc(var(--spacing) * 6) !important; } body.totco-home .p-8 { padding: calc(var(--spacing) * 8) !important; } body.totco-home .px-3 { padding-left: calc(var(--spacing) * 3) !important; padding-right: calc(var(--spacing) * 3) !important; } body.totco-home .px-4 { padding-left: calc(var(--spacing) * 4) !important; padding-right: calc(var(--spacing) * 4) !important; } body.totco-home .px-6 { padding-left: calc(var(--spacing) * 6) !important; padding-right: calc(var(--spacing) * 6) !important; } body.totco-home .py-2 { padding-top: calc(var(--spacing) * 2) !important; padding-bottom: calc(var(--spacing) * 2) !important; } body.totco-home .py-3 { padding-top: calc(var(--spacing) * 3) !important; padding-bottom: calc(var(--spacing) * 3) !important; } /* Gap */ body.totco-home .gap-1 { gap: calc(var(--spacing) * 1) !important; } body.totco-home .gap-2 { gap: calc(var(--spacing) * 2) !important; } body.totco-home .gap-3 { gap: calc(var(--spacing) * 3) !important; } body.totco-home .gap-4 { gap: calc(var(--spacing) * 4) !important; } body.totco-home .gap-6 { gap: calc(var(--spacing) * 6) !important; } /* Containers / sizing used on homepage */ body.totco-home .min-h-dvh { min-height: 100dvh !important; } body.totco-home .max-w-6xl { max-width: 86rem !important; } /* Color utilities that get overridden by Bootstrap/theme */ body.totco-home .bg-secondary { background-color: hsl(var(--secondary)) !important; } body.totco-home .bg-primary { background-color: hsl(var(--primary)) !important; } body.totco-home .text-secondary-foreground { color: hsl(var(--secondary-foreground)) !important; } body.totco-home .border-secondary-border { border-color: hsl(var(--secondary-border)) !important; }