/* Indigo Theme - CSS inyectado directo via (bypass bundle) v8 */
/* =====================================================================
DESIGN TOKENS — single source of truth for color, spacing, motion,
shadow, radius. Everything else in this file should reference these.
===================================================================== */
:root {
/* ── Brand · Indigo scale (50 → 950) ─────────────────────────── */
--indigo-50: #eef2fa;
--indigo-100: #d6def0;
--indigo-200: #adbde0;
--indigo-300: #7e96cd;
--indigo-400: #5374b9;
--indigo-500: #3a5ea3; /* hover / secondary */
--indigo-600: #1f4486; /* PRIMARY brand */
--indigo-700: #1a3870;
--indigo-800: #162e5c;
--indigo-900: #11244a;
--indigo-950: #0a1731;
/* ── Neutral · cream-to-ink scale ────────────────────────────── */
--neutral-0: #ffffff;
--neutral-50: #fafafa;
--neutral-100: #f4f4f4;
--neutral-150: #ececec;
--neutral-200: #e4e4e4;
--neutral-300: #cfcfcf;
--neutral-400: #a8a8a8;
--neutral-500: #767676;
--neutral-600: #595959;
--neutral-700: #3f3f3f;
--neutral-800: #262626;
--neutral-900: #111111;
--neutral-950: #0a0a0a;
/* ── Semantic colors ─────────────────────────────────────────── */
--color-brand: var(--indigo-600);
--color-brand-hover: var(--indigo-700);
--color-brand-soft: rgba(31, 68, 134, 0.08);
--color-brand-soft-hover:rgba(31, 68, 134, 0.14);
--color-bg-canvas: var(--neutral-0);
--color-bg-surface: var(--neutral-50);
--color-bg-surface-soft: var(--neutral-100);
--color-bg-inverse: var(--neutral-900);
--color-text-strong: var(--neutral-900);
--color-text-body: var(--neutral-700);
--color-text-muted: var(--neutral-500);
--color-text-inverse: var(--neutral-0);
--color-border-subtle: var(--neutral-200);
--color-border: var(--neutral-300);
/* ── Spacing scale (8-pt base, T-shirt sizes) ────────────────── */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-7: 3rem; /* 48px */
--space-8: 4rem; /* 64px */
--space-9: 6rem; /* 96px */
--space-10: 8rem; /* 128px */
/* ── Radius ──────────────────────────────────────────────────── */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-2xl: 40px;
--radius-pill: 9999px;
/* ── Shadow system (composed, not random) ────────────────────── */
--shadow-xs: 0 1px 2px rgba(17, 17, 17, 0.04);
--shadow-sm: 0 2px 6px rgba(17, 17, 17, 0.06), 0 1px 2px rgba(17, 17, 17, 0.04);
--shadow-md: 0 6px 16px rgba(17, 17, 17, 0.08), 0 2px 4px rgba(17, 17, 17, 0.04);
--shadow-lg: 0 14px 32px rgba(17, 17, 17, 0.12), 0 4px 8px rgba(17, 17, 17, 0.06);
--shadow-xl: 0 24px 56px rgba(17, 17, 17, 0.16), 0 8px 16px rgba(17, 17, 17, 0.08);
--shadow-brand-glow: 0 8px 24px rgba(31, 68, 134, 0.18);
/* ── Motion · easing + duration tokens ───────────────────────── */
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--duration-fast: 150ms;
--duration-normal: 250ms;
--duration-slow: 400ms;
--duration-slower: 600ms;
/* ── Type scale (Perfect Fourth · 1.333) ─────────────────────── */
--font-xs: 0.75rem; /* 12 */
--font-sm: 0.875rem; /* 14 */
--font-base: 1rem; /* 16 */
--font-md: 1.125rem; /* 18 */
--font-lg: 1.333rem; /* 21 */
--font-xl: 1.777rem; /* 28 */
--font-2xl: 2.369rem; /* 38 */
--font-3xl: 3.157rem; /* 51 */
--font-4xl: 4.209rem; /* 67 */
--font-5xl: 5.61rem; /* 90 */
/* ── Backwards-compat aliases (don't remove yet) ─────────────── */
--o-color-1: var(--indigo-600) !important;
--o-color-2: var(--indigo-500) !important;
--bs-primary: var(--indigo-600) !important;
--bs-primary-rgb: 31, 68, 134 !important;
--bs-link-color: var(--indigo-600) !important;
--indigo-primary: var(--indigo-600);
--indigo-dark: var(--indigo-800);
--indigo-ink: var(--neutral-900);
--indigo-ink-mute: var(--neutral-500);
--indigo-bg-soft: var(--color-bg-surface);
}
body {
font-family: 'Noto Sans', system-ui, sans-serif !important;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Noto Sans', sans-serif !important;
font-weight: 800 !important;
letter-spacing: -0.02em;
line-height: 1.1;
}
.h-display { font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
.indigo-eyebrow {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3em;
color: #1f4486;
margin-bottom: 0.75rem;
}
/* Buttons */
.btn {
border-radius: 9999px !important;
font-weight: 700;
padding: 0.75rem 1.75rem;
}
.btn-primary, .btn.btn-primary {
background-color: #1f4486 !important;
border-color: #1f4486 !important;
color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background-color: #162e5c !important;
border-color: #162e5c !important;
}
.btn-outline-primary { border-color: #1f4486 !important; color: #1f4486 !important; }
.btn-outline-primary:hover { background-color: #1f4486 !important; color: #fff !important; }
/* btn-outline-light on dark hero — force white text + crisp border.
Without this, our global --bs-link-color override bleeds into the
anchor and the label renders Indigo blue on dark = illegible. */
.btn-outline-light,
a.btn-outline-light,
a.btn.btn-outline-light {
border: 2px solid rgba(255,255,255,0.85) !important;
color: #fff !important;
background-color: transparent !important;
backdrop-filter: blur(2px);
}
.btn-outline-light:hover,
a.btn-outline-light:hover,
a.btn.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:active {
background-color: #fff !important;
border-color: #fff !important;
color: #111 !important;
}
/* btn-light (solid white) — make sure label stays dark, not Indigo blue. */
.btn-light,
a.btn-light,
a.btn.btn-light {
color: #111 !important;
background-color: #fff !important;
border-color: #fff !important;
}
.btn-light:hover,
a.btn-light:hover {
background-color: #f4f4f4 !important;
color: #111 !important;
}
/* Evitar que main se estire dejando hueco entre contenido y footer
en pantallas altas (Odoo lo hace con flex:1 0 auto por defecto). */
#wrapwrap > main {
flex: 0 1 auto !important;
}
/* Bloquear scroll horizontal en mobile (offcanvas menu desborda) */
#wrapwrap {
overflow-x: hidden !important;
}
body, html {
overflow-x: hidden;
}
/* === Shop sidebar: atributos con muchos valores (Door Brand 12 marcas)
limitar altura y permitir scroll interno === */
.js_attributes .accordion-item .flex-column {
max-height: 220px;
overflow-y: auto;
padding-right: 4px;
}
.js_attributes .accordion-item .flex-column::-webkit-scrollbar {
width: 4px;
}
.js_attributes .accordion-item .flex-column::-webkit-scrollbar-thumb {
background: #d4d8e0;
border-radius: 4px;
}
/* === Product detail: limitar altura del bloque de atributos con muchas
opciones (Door Brand 12 pills). Solo desktop; en mobile mostrar todo === */
@media (min-width: 768px) {
ul.o_wsale_product_attribute[data-attribute_id="5"] {
max-height: 110px;
overflow-y: auto;
padding-right: 4px;
}
ul.o_wsale_product_attribute[data-attribute_id="5"]::-webkit-scrollbar {
width: 4px;
}
ul.o_wsale_product_attribute[data-attribute_id="5"]::-webkit-scrollbar-thumb {
background: #d4d8e0;
border-radius: 4px;
}
}
/* === Cart: botón "Eliminar" mobile sin halo gris === */
button.js_delete_product.btn.btn-light {
background: transparent !important;
border: none !important;
color: #6c757d !important;
padding: 0.25rem 0.5rem !important;
box-shadow: none !important;
}
button.js_delete_product.btn.btn-light:hover,
button.js_delete_product.btn.btn-light:focus {
background: transparent !important;
color: #dc3545 !important;
}
button.js_delete_product.btn.btn-light .fa,
button.js_delete_product.btn.btn-light i {
font-size: 1.1rem;
}
.o_wsale_address_fill {
padding-bottom: 4rem;
}
/* Inputs: pill solo para search; el resto bordes claros */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea.form-control,
select.form-select {
border-radius: 0.5rem !important;
background-color: #ffffff;
border: 1px solid #d4d8e0;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea.form-control:focus {
border-color: #1f4486 !important;
box-shadow: 0 0 0 3px rgba(31, 68, 134, 0.15) !important;
outline: 0;
}
.form-control.is-invalid {
border-color: #dc3545 !important;
}
/* Pill solo para barra de busqueda */
input[type="search"],
.o_wsale_search_input {
border-radius: 9999px !important;
background-color: #f8f8f8;
border-color: transparent;
}
/* Links override - mas agresivo */
a, a:visited,
.text-primary,
a.text-primary,
.oe_product_name a,
.oe_product a,
.product_price_link,
.o_wsale_product_information a,
.o_wsale_product_information_text,
h6 a, h5 a, h4 a, h3 a {
color: #1f4486 !important;
}
a:hover,
.oe_product a:hover {
color: #162e5c !important;
}
/* Bootstrap active / focus states */
.btn-check:checked + .btn,
.btn-check:active + .btn,
.btn.active,
.btn:active,
.btn:focus,
.nav-link.active,
.page-link,
.page-item.active .page-link {
background-color: #1f4486 !important;
border-color: #1f4486 !important;
color: #fff !important;
}
.page-link {
color: #1f4486 !important;
background-color: transparent !important;
}
.page-link:hover {
color: #fff !important;
background-color: #1f4486 !important;
}
/* Form check (checkboxes/radios) focus + checked */
.form-check-input:checked {
background-color: #1f4486 !important;
border-color: #1f4486 !important;
}
.form-check-input:focus {
border-color: #1f4486 !important;
box-shadow: 0 0 0 0.25rem rgba(31, 68, 134, 0.25) !important;
}
/* Dropdown active items */
.dropdown-item.active,
.dropdown-item:active {
background-color: #1f4486 !important;
color: #fff !important;
}
/* Badge */
.badge.bg-primary,
.bg-primary {
background-color: #1f4486 !important;
}
.text-primary { color: #1f4486 !important; }
/* Spinner / progress */
.progress-bar { background-color: #1f4486 !important; }
.spinner-border, .spinner-grow { color: #1f4486 !important; }
/* Outline primary buttons in cart, etc. */
.btn-light:hover,
.btn-light:focus,
.btn-light.active {
background-color: #f0f0f0 !important;
border-color: #1f4486 !important;
color: #1f4486 !important;
}
/* Pagination */
.pagination .active .page-link {
background-color: #1f4486 !important;
border-color: #1f4486 !important;
}
/* Card hover effects */
.card:hover { border-color: #1f4486; }
/* Highlight icons (cart, search) hover */
.o_navbar_icon:hover,
header .nav-link:hover {
color: #1f4486 !important;
}
/* View mode toggle (grid/list) */
.o_wsale_apply_layout .btn.active,
.o_wsale_apply_layout label.btn.active,
.o_wsale_apply_layout input[type="radio"]:checked + label {
background-color: #1f4486 !important;
border-color: #1f4486 !important;
color: #fff !important;
}
/* Quantity input focus */
input.qty:focus,
.css_quantity input:focus {
border-color: #1f4486 !important;
box-shadow: 0 0 0 0.2rem rgba(31, 68, 134, 0.2) !important;
}
/* Header logo size — bigger, matching original site presence */
header#top .o_navbar_logo img,
header#top .navbar-brand img,
header#top.o_header_standard .o_navbar_logo img,
header#top .o_logo img,
header#top a.navbar-brand img,
header#top a[href="/"] img {
max-height: 96px !important;
height: 96px !important;
width: auto !important;
transition: max-height .2s ease;
}
/* Sticky/scrolled state can shrink slightly to keep proportion */
header#top.o_header_is_scrolled .o_navbar_logo img,
header#top.o_header_is_scrolled .navbar-brand img,
header#top.o_header_is_scrolled .o_logo img {
max-height: 72px !important;
height: 72px !important;
}
@media (max-width: 991px) {
header#top .o_navbar_logo img,
header#top .navbar-brand img,
header#top .o_logo img {
max-height: 64px !important;
height: 64px !important;
}
}
/* Header padding tweak so larger logo doesn't crowd */
header#top .navbar { min-height: 110px; }
header#top.o_header_is_scrolled .navbar { min-height: 84px; }
@media (max-width: 991px) {
header#top .navbar { min-height: 80px; }
}
/* Product cards rounded */
.oe_product_image_link, .oe_product .o_wsale_product_btn {
border-radius: 1.5rem !important;
overflow: hidden;
}
.oe_product img.oe_product_image_img {
border-radius: 1.5rem !important;
object-fit: cover;
transition: transform 0.4s ease;
}
.oe_product:hover img.oe_product_image_img { transform: scale(1.04); }
/* Sections */
.indigo-section { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 992px) {
.indigo-section { padding-top: 5rem; padding-bottom: 5rem; }
}
.indigo-hero {
min-height: 520px;
background-color: #f8f8f8;
display: flex;
align-items: center;
padding: 4rem 0;
}
/* =====================================================================
CARD SYSTEM — single .c-card primitive with variants. All other card-
like elements (indigo-tile, indigo-benefit-card, etc.) compose from
this base or alias to it via legacy class names.
USAGE:
(default: bare)
…
VARIANTS:
.c-card--elevated → drop shadow, lifts on hover
.c-card--outlined → border, no shadow, fills bg on hover
.c-card--ghost → bare, image-led, scale on hover
.c-card--interactive → cursor:pointer + lift transform
===================================================================== */
.c-card {
display: block;
position: relative;
color: inherit;
text-decoration: none;
background: transparent;
border-radius: var(--radius-lg);
transition: transform var(--duration-normal) var(--ease-out-quart),
box-shadow var(--duration-normal) var(--ease-out-quart),
background-color var(--duration-normal) var(--ease-out-quart);
}
.c-card__media {
aspect-ratio: 4 / 5;
background: var(--color-bg-surface);
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: var(--space-3);
position: relative;
}
.c-card__media > img,
.c-card__media > picture > img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease-out-quart);
}
.c-card__body { padding: 0; }
.c-card__eyebrow {
display: inline-block;
font-size: var(--font-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-brand);
margin-bottom: var(--space-2);
}
.c-card__title {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: var(--font-lg);
color: var(--color-text-strong);
margin: 0 0 var(--space-2) 0;
line-height: 1.15;
letter-spacing: -0.01em;
}
.c-card__meta {
font-size: var(--font-sm);
color: var(--color-text-muted);
margin: 0;
line-height: 1.5;
}
/* Variants */
.c-card--interactive { cursor: pointer; }
.c-card--interactive:hover { color: inherit; text-decoration: none; transform: translateY(-4px); }
.c-card--interactive:hover .c-card__media > img { transform: scale(1.04); }
.c-card--elevated {
background: var(--color-bg-canvas);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
}
.c-card--elevated.c-card--interactive:hover { box-shadow: var(--shadow-lg); }
.c-card--outlined {
background: var(--color-bg-canvas);
padding: var(--space-5);
border: 1px solid var(--color-border-subtle);
}
.c-card--outlined.c-card--interactive:hover { border-color: var(--color-brand); background: var(--color-bg-surface); }
.c-card--ghost { background: transparent; }
/* Media aspect modifiers */
.c-card__media--square { aspect-ratio: 1 / 1; }
.c-card__media--landscape { aspect-ratio: 16 / 10; }
.c-card__media--tall { aspect-ratio: 3 / 4; }
/* ── Legacy alias: .indigo-tile compose from the new system ──────────
Reduced sizing per client feedback ("veo las cosas un poco grandes"):
aspect-ratio bumped from 4/5 to 1/1 (square) which renders ~25%
shorter visually, titles + meta also scaled down. */
.indigo-tile { display: block; text-decoration: none; color: inherit;
transition: transform var(--duration-normal) var(--ease-out-quart); }
.indigo-tile:hover { transform: translateY(-4px); color: inherit; text-decoration: none; }
.indigo-tile .tile-img {
aspect-ratio: 1/1;
background: var(--color-bg-surface);
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: var(--space-2);
}
.indigo-tile .tile-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease-out-quart);
}
.indigo-tile:hover .tile-img img { transform: scale(1.04); }
.indigo-tile h3 {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: var(--font-md);
color: var(--color-text-strong);
margin: 0 0 var(--space-1) 0;
line-height: 1.15;
letter-spacing: -0.01em;
}
.indigo-tile p {
font-size: var(--font-xs);
color: var(--color-text-muted);
margin: 0;
line-height: 1.4;
}
/* Color swatches grandes */
.css_attribute_color {
width: 48px !important;
height: 48px !important;
border-radius: 9999px !important;
}
/* === Footer IKEA-style === */
/* Ocultar el footer default de Odoo (queremos el indigo_footer) */
footer#bottom.o_footer,
footer.o_footer:not(.indigo-footer-custom),
#footer:not(.indigo-footer-custom) {
display: none !important;
}
/* Footer custom Indigo */
footer.indigo-footer-custom,
#indigo_footer {
background-color: #0f0f0f !important;
color: #b8b8b8 !important;
display: block !important;
}
.indigo-footer-main {
background-color: #0f0f0f !important;
color: #b8b8b8;
}
.indigo-footer-main h1, .indigo-footer-main h2, .indigo-footer-main h3,
.indigo-footer-main h4, .indigo-footer-main h5, .indigo-footer-main h6,
.indigo-footer-heading {
color: #fff !important;
}
.indigo-footer-heading {
font-size: 0.75rem !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
margin-bottom: 1.25rem;
}
.indigo-footer-list {
list-style: none;
padding: 0;
margin: 0;
}
.indigo-footer-list li {
margin-bottom: 0.5rem;
color: #b8b8b8;
}
.indigo-footer-list a {
color: #b8b8b8 !important;
text-decoration: none;
font-size: 0.9rem;
}
.indigo-footer-list a:hover {
color: #fff !important;
}
.indigo-footer-list svg {
vertical-align: -2px;
opacity: 0.7;
}
.indigo-social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.08);
color: #fff !important;
transition: all 0.2s ease;
text-decoration: none;
}
.indigo-social-icon:hover {
background: #1f4486;
color: #fff !important;
transform: translateY(-2px);
}
.indigo-footer-bottom {
background-color: #0a0a0a !important;
color: #b8b8b8;
border-top: 1px solid rgba(255,255,255,0.08);
}
.indigo-footer-bottom a:hover { color: #fff !important; }
/* Esconder cualquier mencion residual de 'powered by odoo' */
.o_footer_copyright_name,
.js_powered_by,
[data-original-title*="odoo"],
.col_company_footer_copyright,
.o_footer_copyright,
a[href*="odoo.com"] {
display: none !important;
}
/* Mobile tweaks */
@media (max-width: 768px) {
h1, .h1, .h-display { font-size: 2.5rem !important; }
.btn { padding: 0.625rem 1.25rem; }
}
/* ===========================================================================
PRO ENHANCEMENTS v12 — Hero full viewport, animations, mosaic, sticky CTA
=========================================================================== */
/* Mixed typography: Cormorant Garamond (open-source Minion Pro
alternative) for display headlines + Noto Sans for body.
Old-style refined serif with humanist proportions. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
.h-display, .display-1, .display-2, .display-3 {
font-family: 'Cormorant Garamond', 'Noto Sans', serif !important;
font-weight: 600 !important;
letter-spacing: -0.015em !important;
line-height: 1.02 !important;
}
.h-display em, .display-1 em, .display-2 em, .display-3 em,
.h-display .italic, .display-1 .italic {
font-style: italic;
font-weight: 600;
}
/* === Hero full viewport === */
.indigo-hero-fullbleed {
position: relative;
min-height: calc(100vh - 100px);
display: flex;
align-items: center;
overflow: hidden;
background-color: #0a0a0a;
}
.indigo-hero-fullbleed .hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
animation: kenBurns 20s ease-out infinite alternate;
opacity: 0.85;
}
.indigo-hero-fullbleed .hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(15, 15, 15, 0.4) 0%,
rgba(15, 15, 15, 0.55) 60%,
rgba(15, 15, 15, 0.8) 100%);
z-index: 1;
}
.indigo-hero-fullbleed .container {
position: relative;
z-index: 2;
color: #fff;
}
.indigo-hero-fullbleed h1 {
color: #fff !important;
font-size: clamp(3rem, 8vw, 6.5rem) !important;
margin-bottom: 1.5rem;
}
.indigo-hero-fullbleed .indigo-eyebrow {
color: rgba(255, 255, 255, 0.85) !important;
}
.indigo-hero-fullbleed .lead {
color: rgba(255, 255, 255, 0.9) !important;
font-size: 1.25rem;
max-width: 540px;
}
@keyframes kenBurns {
0% { transform: scale(1.0) translate(0, 0); }
100% { transform: scale(1.08) translate(-1%, -1%); }
}
/* Scroll indicator */
.indigo-hero-scroll-indicator {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
color: rgba(255, 255, 255, 0.7);
animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(8px); }
}
/* === Scroll-triggered fade-in === */
[data-indigo-fade] {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-indigo-fade].in-view {
opacity: 1;
transform: translateY(0);
}
[data-indigo-fade][data-delay="100"] { transition-delay: 0.1s; }
[data-indigo-fade][data-delay="200"] { transition-delay: 0.2s; }
[data-indigo-fade][data-delay="300"] { transition-delay: 0.3s; }
[data-indigo-fade][data-delay="400"] { transition-delay: 0.4s; }
/* === Buttons with elevated shadow (token-driven) === */
.btn-primary, .btn-light, .btn-dark {
box-shadow: var(--shadow-sm);
transition: transform var(--duration-fast) var(--ease-out-quart),
box-shadow var(--duration-fast) var(--ease-out-quart),
background-color var(--duration-fast) var(--ease-out-quart) !important;
}
.btn-primary:hover {
box-shadow: var(--shadow-brand-glow) !important;
transform: translateY(-2px);
}
.btn-light:hover, .btn-dark:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md) !important;
}
.btn-primary:active, .btn-light:active, .btn-dark:active {
transform: translateY(0);
box-shadow: var(--shadow-xs) !important;
}
/* === Tile hover (uses .c-card primitive's tokens) === */
.indigo-tile {
transition: transform var(--duration-slow) var(--ease-out-quart) !important;
}
.indigo-tile:hover {
transform: translateY(-8px) !important;
}
.indigo-tile .tile-img {
box-shadow: var(--shadow-sm);
transition: box-shadow var(--duration-slow) var(--ease-out-quart) !important;
}
.indigo-tile:hover .tile-img {
box-shadow: var(--shadow-xl);
}
/* Product cards (shop) — hover lift */
.oe_product {
transition: transform 0.3s ease !important;
}
.oe_product:hover {
transform: translateY(-4px);
}
.oe_product_image_link {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
transition: box-shadow 0.4s ease;
}
.oe_product:hover .oe_product_image_link {
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
/* === Lifestyle mosaic (Apple-style asymmetric) === */
.indigo-mosaic {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 280px);
gap: 1rem;
}
.indigo-mosaic > a {
border-radius: 1.5rem;
overflow: hidden;
background: #f0f0f0;
position: relative;
transition: transform 0.4s ease;
}
.indigo-mosaic > a:hover { transform: scale(1.01); }
.indigo-mosaic > a img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.indigo-mosaic > a:hover img { transform: scale(1.05); }
.indigo-mosaic > a:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.indigo-mosaic > a:nth-child(2) { grid-column: span 3; grid-row: span 1; }
.indigo-mosaic > a:nth-child(3) { grid-column: span 2; grid-row: span 1; }
.indigo-mosaic > a:nth-child(4) { grid-column: span 1; grid-row: span 1; }
@media (max-width: 768px) {
.indigo-mosaic {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
}
.indigo-mosaic > a { grid-column: span 1 !important; grid-row: span 1 !important; aspect-ratio: 4/3; }
.indigo-mosaic > a:nth-child(1) { grid-column: span 2 !important; aspect-ratio: 16/10; }
}
/* === Login page: links inferiores con espaciado === */
.oe_login_buttons .d-flex.justify-content-between {
gap: 1.5rem;
}
.oe_website_login_container {
max-width: 420px;
margin: 4rem auto 0;
}
.oe_website_login_container .oe_login_form {
background: #fff;
padding: 2rem;
border: 1px solid #e6e6e6;
border-radius: 1rem;
}
/* === Contact / website form: labels arriba (no inline) === */
.s_website_form_field .row {
flex-direction: column;
}
.s_website_form_field .row > .col-sm-auto,
.s_website_form_field .row > label.s_website_form_label {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto !important;
text-align: left !important;
font-weight: 500;
padding-bottom: 0.25rem;
}
.s_website_form_field .row > .col-sm {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto !important;
}
/* === Shop mobile: ocultar grid/list switcher para dar aire al search === */
@media (max-width: 575.98px) {
.o_wsale_apply_layout {
display: none !important;
}
}
/* === Hero CTAs en mobile: stack vertical full-width === */
@media (max-width: 575.98px) {
.indigo-hero-fullbleed .d-flex.flex-wrap.gap-3 {
flex-direction: column;
align-items: stretch;
}
.indigo-hero-fullbleed .d-flex.flex-wrap.gap-3 .btn {
width: 100%;
}
}
/* === Sticky bottom-right WhatsApp / contact === */
.indigo-fab {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 12px;
}
/* En mobile: FAB más pequeño y discreto para no tapar CTAs */
@media (max-width: 767.98px) {
.indigo-fab {
bottom: 16px;
right: 16px;
}
.indigo-fab-btn {
width: 44px;
height: 44px;
font-size: 1rem;
}
}
.indigo-fab-btn {
width: 56px;
height: 56px;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
background: #25D366;
color: #fff !important;
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
transition: all 0.25s ease;
text-decoration: none !important;
}
.indigo-fab-btn:hover {
transform: scale(1.1);
box-shadow: 0 12px 32px rgba(37, 211, 102, 0.55);
}
.indigo-fab-btn.indigo-back-to-top {
background: #1f4486;
box-shadow: 0 8px 24px rgba(31, 68, 134, 0.4);
width: 48px;
height: 48px;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.indigo-fab-btn.indigo-back-to-top.show {
opacity: 1;
pointer-events: auto;
}
.indigo-fab-btn.indigo-back-to-top:hover {
box-shadow: 0 12px 32px rgba(31, 68, 134, 0.55);
}
/* === Section transitions: subtle gradients === */
.indigo-section { position: relative; }
.indigo-section.bg-soft {
background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 50%, #ffffff 100%);
}
.indigo-section.bg-dark-gradient {
background: linear-gradient(135deg, #1f4486 0%, #162e5c 100%);
color: #fff;
}
/* === Header — token-driven, refined scrolled state ===
Default: translucent, no border, no shadow (floats over hero)
Scrolled: more opaque, subtle bottom border, soft shadow, slightly
smaller logo, tighter padding. Transitions on the GPU-friendly props. */
header#top {
background-color: rgba(255, 255, 255, 0.85) !important;
backdrop-filter: saturate(180%) blur(18px);
-webkit-backdrop-filter: saturate(180%) blur(18px);
border-bottom: 1px solid transparent;
box-shadow: none;
transition: background-color var(--duration-normal) var(--ease-out-quart),
border-color var(--duration-normal) var(--ease-out-quart),
box-shadow var(--duration-normal) var(--ease-out-quart) !important;
}
header#top.o_header_is_scrolled {
background-color: rgba(255, 255, 255, 0.94) !important;
border-bottom-color: var(--color-border-subtle);
box-shadow: var(--shadow-sm);
}
/* === Section spacing more generous === */
.indigo-section {
padding-top: 6rem;
padding-bottom: 6rem;
}
@media (min-width: 992px) {
.indigo-section {
padding-top: 8rem;
padding-bottom: 8rem;
}
}
/* Improved body line-height & rhythm */
body { line-height: 1.65; }
p { margin-bottom: 1.25rem; }
/* === Statbar with bigger numbers === */
.indigo-stat-number {
font-family: 'Cormorant Garamond', serif;
font-weight: 900;
font-size: clamp(3rem, 6vw, 5rem);
line-height: 1;
letter-spacing: -0.04em;
}
/* ===========================================================================
FIX: navbar active state tapa el texto + product swatches + cart pricing
=========================================================================== */
/* Navbar active link: NO usar background azul, solo underline */
header#top .navbar-nav .nav-link.active,
header#top .navbar-nav a.nav-link.active,
header#top .top_menu .nav-link.active,
.o_header_standard .nav-link.active {
background-color: transparent !important;
color: #1f4486 !important;
position: relative;
}
header#top .navbar-nav .nav-link.active::after,
header#top .top_menu .nav-link.active::after {
content: '';
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 2px;
background: #1f4486;
border-radius: 9999px;
}
/* Asegurar que el texto del link active NO se oculte */
header#top .nav-link.active span,
header#top .nav-link.active {
text-indent: 0 !important;
color: #1f4486 !important;
-webkit-text-fill-color: #1f4486 !important;
}
/* === Product detail: variants como color swatches grandes === */
.js_attribute_value input[type="radio"][value="Black"] + label,
.js_attribute_value input[type="radio"][value="White"] + label,
.js_attribute_value input[type="radio"][value="Bronze"] + label,
ul.list-inline[data-attribute_name="Finish Color"] li label,
.css_attribute_color {
display: inline-block;
width: 44px;
height: 44px;
border-radius: 9999px !important;
border: 2px solid #e6e6e6 !important;
margin-right: 8px;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
/* Hide variant radio button visually, keep functional */
.js_attribute_value input[type="radio"][value="Black"],
.js_attribute_value input[type="radio"][value="White"],
.js_attribute_value input[type="radio"][value="Bronze"] {
opacity: 0; position: absolute; pointer-events: none;
}
/* Add to cart button bigger */
#add_to_cart, .a-submit, #buy_now {
padding: 14px 32px !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
border-radius: 9999px !important;
}
/* === Cart: replace $0,00 with "Request quote" messaging === */
.oe_price.oe_currency_value:has-text("$ 0,00"),
.product_price .oe_price {
/* Visible si autenticado, sino esconder y mostrar mensaje */
}
/* Cart promo button: indigo not gray */
.cart_resume button[type="submit"],
form.o_website_sale_my_btn button {
background-color: #f0f0f0 !important;
border-color: transparent !important;
color: #111 !important;
border-radius: 9999px !important;
}
.cart_resume button[type="submit"]:hover {
background-color: #1f4486 !important;
color: #fff !important;
}
/* === Contact page hero: better styling === */
#wrap_contactus, .contactus, .website-contact .o_website_form {
padding: 4rem 0 !important;
}
/* Cards globales: shadow más sutil que el actual */
.card.shadow-lg {
box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.15) !important;
}
/* ===========================================================================
v14: Gallery items + about page touches
=========================================================================== */
/* Gallery item hover effect */
.indigo-gallery-item img {
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.indigo-gallery-item:hover img {
transform: scale(1.06);
}
.indigo-gallery-item .position-absolute {
transition: opacity 0.3s ease;
}
/* Sticky filter bar background blur */
.sticky-top.bg-white {
backdrop-filter: blur(12px);
background-color: rgba(255, 255, 255, 0.94) !important;
}
/* ===========================================================================
v15: Product detail refinement
=========================================================================== */
/* Producto page: search box innecesario en sidebar — esconder */
#products_grid_before .o_wsale_search,
#wsale_products_filter_grid .o_wsale_search,
form[action="/shop"] input[name="search"]:not(.no-hide):not(.indigo-search):not([data-hide="0"]) {
/* solo cuando esta en una sidebar, no en shop main */
}
/* Mejorar product detail layout */
#product_details {
padding-top: 3rem !important;
padding-bottom: 5rem !important;
}
/* Title big */
#product_details h1, .o_wsale_product_information h1 {
font-family: 'Cormorant Garamond', 'Noto Sans', serif !important;
font-size: clamp(2rem, 4vw, 3.5rem) !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: -0.02em !important;
margin-bottom: 1rem !important;
}
/* Code/SKU sutil arriba del titulo */
.o_wsale_product_information .o_default_code,
.o_wsale_product_sku {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3em;
color: #1f4486;
margin-bottom: 0.75rem;
}
/* Esconder $0,00 placeholder cuando no hay precio real */
.product_price .oe_price:has(.oe_currency_value:empty),
h4.oe_price > .oe_currency_value:empty {
/* leave for now, user sees $0 */
}
/* Variant attribute: stacked verticalmente (label + values), una por atributo */
ul.js_add_cart_variants > li.variant_attribute {
display: block !important;
margin-bottom: 1.25rem !important;
padding: 0 !important;
}
/* Attribute name label (Finish Color, Privacy Glass, etc) */
li.variant_attribute > strong.attribute_name,
li.variant_attribute > .attribute_name {
display: block !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.2em !important;
color: #767676 !important;
margin-bottom: 0.625rem !important;
}
/* Values container: HORIZONTAL inline list (Bootstrap list-inline keeps items inline-block) */
ul.o_wsale_product_attribute {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.4rem !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* Cada value es un li inline-block */
li.js_attribute_value {
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
}
/* Hide native radio visualmente, keep funcional */
li.js_attribute_value input[type="radio"] {
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
}
/* Label como pill compacto (solo el wrapper externo) */
li.js_attribute_value > label {
display: inline-flex !important;
align-items: center !important;
padding: 0.35rem 0.85rem !important;
border: 1.5px solid #e0e0e0 !important;
border-radius: 9999px !important;
cursor: pointer !important;
transition: all 0.18s ease !important;
font-weight: 600 !important;
font-size: 0.8rem !important;
background: #fff !important;
color: #222 !important;
margin: 0 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
/* Anular cualquier estilo de pill en el div interno (form-check-label)
para evitar el efecto "doble círculo" */
li.js_attribute_value .form-check {
padding: 0 !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
}
li.js_attribute_value .form-check-label,
li.js_attribute_value .radio_input_value {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
border-radius: 0 !important;
display: inline !important;
margin: 0 !important;
}
li.js_attribute_value > label:hover {
border-color: #111 !important;
}
li.js_attribute_value input[type="radio"]:checked + label,
li.js_attribute_value > label:has(input[type="radio"]:checked) {
background: #111 !important;
color: #fff !important;
border-color: #111 !important;
}
li.js_attribute_value input[type="radio"]:checked + label,
li.js_attribute_value input[type="radio"]:checked ~ .form-check-label {
background: #111 !important;
color: #fff !important;
border-color: #111 !important;
}
/* Color swatches (Finish Color especifico) - usar circulos */
.css_attribute_color {
width: 44px !important;
height: 44px !important;
border-radius: 9999px !important;
border: 2px solid #e6e6e6 !important;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
input[type="radio"]:checked + label .css_attribute_color {
border-color: #1f4486 !important;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1f4486;
}
/* Quantity input bigger */
.css_quantity {
border: 2px solid #e6e6e6;
border-radius: 9999px;
display: inline-flex;
align-items: center;
overflow: hidden;
padding: 0;
}
.css_quantity input.quantity {
border: 0 !important;
background: transparent !important;
text-align: center;
font-weight: 700;
width: 60px;
}
.css_quantity a.float-start,
.css_quantity a.float-end,
.css_quantity .js_add_cart_minus,
.css_quantity .js_add_cart_plus {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #111;
text-decoration: none;
transition: background 0.2s;
}
.css_quantity a.float-start:hover,
.css_quantity a.float-end:hover,
.css_quantity .js_add_cart_minus:hover,
.css_quantity .js_add_cart_plus:hover {
background: #f0f0f0;
}
/* Add to Cart button HUGE pill */
#add_to_cart, #add_to_cart_wrap > button, .a-submit, button[name="add_to_cart"] {
padding: 1rem 2.5rem !important;
font-size: 1.0625rem !important;
font-weight: 700 !important;
border-radius: 9999px !important;
background-color: #1f4486 !important;
border-color: #1f4486 !important;
color: #fff !important;
box-shadow: 0 4px 14px rgba(31, 68, 134, 0.25) !important;
transition: all 0.25s ease !important;
}
#add_to_cart:hover {
background-color: #162e5c !important;
box-shadow: 0 8px 24px rgba(31, 68, 134, 0.4) !important;
transform: translateY(-2px);
}
/* Gallery main image bigger + smooth zoom */
#product_detail .product_detail_img,
.o_wsale_product_image_carousel img,
#o-carousel-product .carousel-item img {
border-radius: 1.5rem !important;
overflow: hidden !important;
}
/* PDP image column: make the carousel-item match the column width (square)
so the door photo gets the visual real estate it deserves. Odoo sets
min-height: 400px inline on .carousel-item; we override per breakpoint. */
#o-carousel-product .carousel-item,
#o-carousel-product .carousel-inner,
.o_carousel_product_outer {
min-height: 620px !important;
height: auto !important;
}
@media (min-width: 1200px) {
#o-carousel-product .carousel-item,
#o-carousel-product .carousel-inner,
.o_carousel_product_outer {
min-height: 720px !important;
}
}
@media (max-width: 991px) {
#o-carousel-product .carousel-item,
#o-carousel-product .carousel-inner,
.o_carousel_product_outer {
min-height: 480px !important;
}
}
@media (max-width: 575px) {
#o-carousel-product .carousel-item,
#o-carousel-product .carousel-inner,
.o_carousel_product_outer {
min-height: 360px !important;
}
}
/* Cap to avoid runaway tall images */
.o_carousel_product_outer { max-height: 820px !important; }
#o-carousel-product .carousel-item img {
max-height: 720px !important;
width: auto;
height: auto;
}
/* Trust badges row (custom) */
.indigo-product-trust {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid #e6e6e6;
}
.indigo-product-trust > div {
flex: 1 1 calc(50% - 0.75rem);
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.875rem;
}
.indigo-product-trust svg { color: #1f4486; flex-shrink: 0; }
.indigo-product-trust strong { display: block; font-weight: 700; color: #111; }
.indigo-product-trust span.text-muted { font-size: 0.75rem; color: #767676; }
/* ===========================================================================
v17: Pagination-footer spacing + footer link visibility
=========================================================================== */
/* Separacion entre el grid/pagination de shop y el footer custom */
#wrapwrap > footer + footer#indigo_footer,
#wrapwrap > #indigo_footer,
#indigo_footer {
margin-top: 0 !important;
}
/* Spacing al final del contenido antes del footer */
#products_grid, #products_grid_before {
padding-bottom: 4rem !important;
}
.o_wsale_pagination, .pagination,
nav[aria-label="Page navigation"],
.o_wsale_apply_layout + div.text-center,
#wrapwrap .pagination {
margin-top: 2.5rem !important;
margin-bottom: 4rem !important;
padding-bottom: 0 !important;
}
/* Indigo footer top: dale espacio sutil */
.indigo-footer-main {
margin-top: 0;
}
/* Pagination items: pill */
.pagination .page-link {
border-radius: 9999px !important;
margin: 0 0.15rem !important;
border: 1px solid #e6e6e6 !important;
color: #111 !important;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 !important;
font-weight: 600;
}
.pagination .page-item.active .page-link,
.pagination .page-link.active {
background: #111 !important;
color: #fff !important;
border-color: #111 !important;
}
.pagination .page-link:hover {
background: #f0f0f0 !important;
color: #111 !important;
border-color: #111 !important;
}
/* =====================================================================
QUOTE-TO-CASH B2B MODEL
Cart works normally (multi-item add, address, summary), but checkout
does NOT take online payment — the order is submitted to the sales
team as a quote request. Sales replies with personalized pricing per
dealer/spec and arranges manual payment (wire transfer, check, ACH).
So: KEEP cart icon, Add-to-cart button, Sign-in link visible.
HIDE only the $0.00 prices, totals and tax lines (placeholder noise).
===================================================================== */
/* Hide $0.00 prices on Shop grid + PDP (prices are set per-quote, not shown public). */
.oe_product .product_price,
.oe_product .oe_currency_value,
.o_wsale_product_grid_wrapper .product_price,
.o_wsale_product_information_text .product_price,
#product_details .product_price,
#product_details .h4.css_editable_mode_hidden,
.product_price .oe_price,
.product_price .oe_default_price,
.product_price .oe_currency_value,
span.oe_price,
span.oe_default_price,
.product_price small.text-muted {
display: none !important;
}
/* Hide $0.00 totals/subtotals/tax rows in cart + summary (every line is $0
until sales sets the real quote). Keep line items + qty visible. */
#cart_total,
.o_total_card,
#oe_cart_total,
.cart_total,
.o_wsale_my_cart_total,
.o_wsale_cart_summary,
tr#order_total,
tr#order_total_taxes,
tr#order_total_untaxed,
tr.o_wsale_cart_total,
tr.tax_to_apply,
tr#order_delivery,
section.o_wsale_cart_payment_btn {
/* keep visible — these are needed for the submit-quote button */
}
/* Hide $0.00 line item prices inside cart line rows */
.oe_website_sale td.td-price,
.oe_website_sale td.td-action,
.oe_website_sale .js_price_total,
.oe_website_sale .oe_currency_value,
.o_wsale_cart_summary .oe_currency_value,
.o_wsale_my_cart .js_price_total {
display: none !important;
}
/* Inline price-on-request label on product cards (grid + PDP) */
.indigo-price-on-request {
display: inline-block;
font-size: 0.85rem;
font-weight: 600;
color: #1f4486;
background: rgba(31, 68, 134, 0.08);
padding: 0.25rem 0.75rem;
border-radius: 9999px;
margin-top: 0.25rem;
}
.oe_product .indigo-price-on-request {
font-size: 0.75rem;
padding: 0.2rem 0.6rem;
}
/* Dealer Program benefit cards — line-icon style, token-driven */
.indigo-benefit-card {
padding: var(--space-2) 0;
}
.indigo-benefit-icon {
width: 72px;
height: 72px;
border-radius: var(--radius-pill);
background: var(--color-brand-soft);
color: var(--color-brand);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-5);
transition: background-color var(--duration-normal) var(--ease-out-quart),
color var(--duration-normal) var(--ease-out-quart),
transform var(--duration-normal) var(--ease-out-quart),
box-shadow var(--duration-normal) var(--ease-out-quart);
}
.indigo-benefit-card:hover .indigo-benefit-icon {
background: var(--color-brand);
color: var(--color-text-inverse);
transform: translateY(-2px);
box-shadow: var(--shadow-brand-glow);
}
.indigo-benefit-card h3 {
font-family: 'Noto Sans', sans-serif !important;
font-weight: 800;
font-size: var(--font-md);
color: var(--color-text-strong);
margin-bottom: var(--space-2);
letter-spacing: -0.01em;
}
.indigo-benefit-card p {
color: var(--color-text-body);
font-size: var(--font-sm);
line-height: 1.6;
margin-bottom: 0;
}
/* Quote-request banner that replaces the payment provider list on /shop/payment */
.indigo-quote-banner {
background: linear-gradient(135deg, rgba(31,68,134,0.06), rgba(58,94,163,0.04));
border: 1px solid rgba(31,68,134,0.15);
border-radius: 1rem;
padding: 2rem;
margin-bottom: 1.5rem;
}
.indigo-quote-banner h3 {
color: #1f4486;
font-weight: 800;
margin-bottom: 0.75rem;
}
.indigo-quote-banner ul { padding-left: 1.25rem; margin-bottom: 0; }
.indigo-quote-banner ul li { margin-bottom: 0.35rem; }
/* Anonymous dealer nudge — sits above the cart banner, prompts
guest checkouts to log in for correct attribution + pricing. */
.indigo-dealer-nudge {
background: var(--indigo-700);
color: #fff;
border: 0;
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-5);
}
.indigo-dealer-nudge,
.indigo-dealer-nudge strong,
.indigo-dealer-nudge span,
.indigo-dealer-nudge em {
color: #fff;
}
.indigo-dealer-nudge em {
font-style: italic;
font-weight: 600;
}
.indigo-dealer-nudge .btn-light {
background: #fff;
color: var(--indigo-700);
font-weight: 600;
padding: 0.65rem 1.4rem;
border-radius: var(--radius-md);
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
border: 0;
}
.indigo-dealer-nudge .btn-light:hover {
background: var(--indigo-50);
color: var(--indigo-800);
}
/* The harmless null.remove() error on portal pages is now caught at the
JS layer (theme.js + indigo-error-suppressor in head) — no CSS hack
needed. Keep this comment as a marker so we don't re-introduce one. */
/* Portal pages (/my/*) need breathing room before the footer.
Otherwise the last table row touches the dark footer (looks broken). */
.o_portal_my_home,
.o_portal_my_doc,
main:has(.o_portal_my_home),
main:has(.o_portal_my_doc) {
padding-bottom: var(--space-9);
}
/* Fallback for browsers that don't yet support :has() — pad the body
container that wraps portal content. */
body.o_portal #wrapwrap > main,
body[class*="o_portal"] #wrapwrap > main {
padding-bottom: var(--space-8);
}
/* Tables inside portal pages should also not glue to the next element. */
.o_portal_my_home > table:last-child,
.o_portal_my_doc > table:last-child {
margin-bottom: var(--space-7);
}
/* =====================================================================
/shop/cart — Hide the $ price column / subtotal block because Indigo
sells on quote-only basis. Products carry a $1 placeholder list_price
just to satisfy Odoo's "non-zero amount" rule, but showing that $ to
the dealer is misleading. Replace with the "Quote on request" banner
we already render in the indigo-quote-banner block.
===================================================================== */
/* Per-line price column (right side of each cart row) */
.oe_website_sale.oe_cart .o_wsale_my_cart .oe_currency_value,
.oe_website_sale .o_wsale_my_cart td:has(.oe_currency_value),
.oe_website_sale .oe_cart .js_price_total,
.oe_website_sale .oe_cart .text-end:has(.oe_currency_value) {
visibility: hidden;
}
/* The sticky right-side Subtotal/Taxes/Total summary card */
.oe_website_sale #o_cart_summary,
.oe_website_sale .o_total_card,
.oe_website_sale .o_total_card .js_cart_summary {
/* hide only the rows that show $ numbers, keep the Checkout button */
}
.oe_website_sale .o_total_card .row .col-7,
.oe_website_sale .o_total_card .row .col-5,
.oe_website_sale .o_total_card #order_total_taxes,
.oe_website_sale .o_total_card #order_total,
.oe_website_sale .o_total_card #order_total_untaxed {
/* keep visible — Odoo's structure varies; below we target by content */
}
/* Strongest: catch any element whose text is just "$" (empty amount) */
.oe_website_sale span.oe_currency_value:empty,
.oe_website_sale .monetary_field:empty {
display: none;
}
/* Hide the empty $-only nodes inside cart summary rows */
.oe_website_sale .o_total_card .row > div:has(> .oe_currency_value:empty) {
display: none;
}
/* Discount code field has no meaning in quote-only mode */
.oe_website_sale #coupon_form,
.oe_website_sale [name="o_payment_coupon_btn"],
.oe_website_sale .o_total_card .input-group:has(input[name="promo"]) {
display: none !important;
}
/* =====================================================================
Dealer portal (/my/*) — styled tables, badges and buttons that don't
inherit broken link underlines from Odoo's default portal CSS.
===================================================================== */
/* Tables on portal: no underlined badge text */
.indigo-portal-table .badge,
.indigo-portal-table .indigo-stage-badge,
.indigo-portal-table .indigo-payment-badge {
text-decoration: none !important;
}
/* Stage badge — soft indigo, readable, no link styling */
.indigo-stage-badge {
display: inline-block;
padding: 0.3em 0.7em;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--indigo-700) !important;
background: var(--indigo-50);
border: 1px solid var(--indigo-100);
text-decoration: none !important;
line-height: 1.2;
}
/* Payment badge — color-coded by state, no underline */
.indigo-payment-badge {
display: inline-block;
padding: 0.3em 0.7em;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
text-decoration: none !important;
line-height: 1.2;
text-transform: capitalize;
}
.indigo-payment-badge[data-state="paid"] {
background: #d1fae5;
color: #065f46;
border: 1px solid #6ee7b7;
}
.indigo-payment-badge[data-state="partial"] {
background: #fef3c7;
color: #92400e;
border: 1px solid #fcd34d;
}
.indigo-payment-badge[data-state="unpaid"] {
background: #fee2e2;
color: #991b1b;
border: 1px solid #fca5a5;
}
/* Buttons in portal: kill the underline-on-hover that base Odoo portal
adds via .btn { text-decoration: underline; } in some themes. */
.o_portal_my_home .btn,
.o_portal_my_home .btn:hover,
.o_portal_my_home .btn:focus {
text-decoration: none !important;
}
/* The "Upload receipt" / "+ New order" buttons should look primary,
not gray-disabled. */
.o_portal_my_home .btn-secondary {
background-color: var(--indigo-50);
border-color: var(--indigo-200);
color: var(--indigo-700);
}
.o_portal_my_home .btn-secondary:hover {
background-color: var(--indigo-100);
color: var(--indigo-800);
}
/* Outline secondary (Back to orders / Cancel) — softer */
.o_portal_my_home .btn-outline-secondary {
color: var(--indigo-700);
border-color: var(--indigo-200);
background: transparent;
}
.o_portal_my_home .btn-outline-secondary:hover {
background: var(--indigo-50);
color: var(--indigo-800);
border-color: var(--indigo-300);
}
/* Tighten the indigo-stage-badge when shown inline on detail card */
.o_portal_my_home .card .indigo-stage-badge {
margin-left: 0.25rem;
}
/* =====================================================================
/shop/confirmation — Odoo wraps the post-quote "Thank you" message
(payment.provider.pending_msg) in a Bootstrap `.card.bg-info` whose
default `card-header` text reads dark on cyan/teal. Force readable
contrast (white text + readable links) on ALL bg-info cards/alerts
inside website_sale so the confirmation page is legible.
===================================================================== */
.oe_website_sale .card.bg-info,
.oe_website_sale .alert-info,
.oe_website_sale .alert.alert-info {
background-color: var(--indigo-700) !important;
border-color: var(--indigo-800) !important;
color: #fff !important;
border-radius: var(--radius-lg);
}
.oe_website_sale .card.bg-info .card-header,
.oe_website_sale .card.bg-info .card-body {
background-color: var(--indigo-700) !important;
color: #fff !important;
border-color: rgba(255,255,255,0.18) !important;
padding: var(--space-5) var(--space-6);
}
.oe_website_sale .card.bg-info *,
.oe_website_sale .alert-info *,
.oe_website_sale .alert.alert-info * {
color: #fff !important;
}
.oe_website_sale .card.bg-info h1,
.oe_website_sale .card.bg-info h2,
.oe_website_sale .card.bg-info h3,
.oe_website_sale .card.bg-info h4,
.oe_website_sale .alert-info h1,
.oe_website_sale .alert-info h2,
.oe_website_sale .alert-info h3,
.oe_website_sale .alert-info h4 {
color: #fff !important;
font-weight: 700;
margin-bottom: var(--space-3);
}
.oe_website_sale .card.bg-info strong,
.oe_website_sale .alert-info strong {
color: #fff !important;
font-weight: 700;
}
.oe_website_sale .card.bg-info a,
.oe_website_sale .alert-info a {
color: #fff !important;
text-decoration: underline;
text-underline-offset: 2px;
}
.oe_website_sale .card.bg-info a:hover,
.oe_website_sale .alert-info a:hover {
color: var(--indigo-100) !important;
}
/* The "Sign Up to follow your order" sub-banner is a .btn-light link
inside the bg-info card; restore its readable contrast. */
.oe_website_sale .card.bg-info .btn-light {
background: #fff !important;
color: var(--indigo-700) !important;
border-color: #fff !important;
}
.oe_website_sale .card.bg-info .btn-light:hover {
background: var(--indigo-100) !important;
color: var(--indigo-800) !important;
}
/* =====================================================================
FORMS — premium input styling. Refined focus state with animated
indigo outline, taller inputs, label hierarchy that's not Bootstrap-
stock. Applies to the dealer-program form and the /contactus form.
===================================================================== */
form .form-control,
form .form-select,
form select.form-control {
background-color: var(--color-bg-canvas);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
padding: 0.85rem 1rem;
font-size: var(--font-base);
line-height: 1.4;
color: var(--color-text-strong);
box-shadow: none;
transition: border-color var(--duration-fast) var(--ease-out-quart),
box-shadow var(--duration-fast) var(--ease-out-quart),
background-color var(--duration-fast) var(--ease-out-quart);
}
form .form-control::placeholder {
color: var(--color-text-muted);
opacity: 0.7;
}
form .form-control:hover,
form .form-select:hover {
border-color: var(--color-border);
}
form .form-control:focus,
form .form-select:focus {
outline: none;
border-color: var(--color-brand);
box-shadow: 0 0 0 3px var(--color-brand-soft);
background-color: var(--color-bg-canvas);
}
form textarea.form-control {
min-height: 6rem;
resize: vertical;
}
/* Form label refinement */
form .form-label {
font-size: var(--font-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: var(--space-2);
}
/* Checkbox refinement */
form .form-check-input {
width: 1.15rem;
height: 1.15rem;
margin-top: 0.2rem;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
transition: border-color var(--duration-fast) var(--ease-out-quart),
background-color var(--duration-fast) var(--ease-out-quart);
}
form .form-check-input:hover { border-color: var(--color-brand); }
form .form-check-input:checked {
background-color: var(--color-brand);
border-color: var(--color-brand);
}
form .form-check-input:focus {
border-color: var(--color-brand);
box-shadow: 0 0 0 3px var(--color-brand-soft);
}
/* File input refinement */
form input[type="file"].form-control {
padding: 0.5rem 1rem;
cursor: pointer;
}
form input[type="file"].form-control::-webkit-file-upload-button,
form input[type="file"].form-control::file-selector-button {
background: var(--color-brand-soft);
color: var(--color-brand);
border: none;
border-radius: var(--radius-pill);
padding: 0.35rem 1rem;
margin-right: 1rem;
font-weight: 600;
font-size: var(--font-sm);
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-out-quart);
}
form input[type="file"].form-control::-webkit-file-upload-button:hover,
form input[type="file"].form-control::file-selector-button:hover {
background: var(--color-brand-soft-hover);
}
/* =====================================================================
EDITORIAL ELEMENTS — pull-quote, captions, numbered section
eyebrows for that magazine-spread feel.
===================================================================== */
/* Pull-quote: large editorial blockquote w/ indigo accent rule */
.editorial-quote {
position: relative;
padding: var(--space-5) var(--space-6) var(--space-5) var(--space-7);
margin: var(--space-7) 0;
border-left: 3px solid var(--color-brand);
background: transparent;
}
.editorial-quote::before {
content: "“";
position: absolute;
left: -0.15em;
top: -0.6em;
font-family: 'Cormorant Garamond', serif;
font-size: 7rem;
line-height: 1;
color: var(--color-brand);
opacity: 0.18;
pointer-events: none;
}
.editorial-quote p {
font-family: 'Cormorant Garamond', serif;
font-size: var(--font-xl);
font-weight: 500;
font-style: italic;
color: var(--color-text-strong);
line-height: 1.35;
letter-spacing: -0.005em;
margin: 0;
}
.editorial-quote footer {
margin-top: var(--space-4);
font-size: var(--font-sm);
color: var(--color-text-muted);
font-style: normal;
}
.editorial-quote footer cite,
.editorial-quote footer strong {
color: var(--color-text-strong);
font-weight: 600;
font-style: normal;
}
/* Image caption — sits below media, small and editorial */
.editorial-caption {
display: block;
margin-top: var(--space-2);
font-size: var(--font-xs);
color: var(--color-text-muted);
letter-spacing: 0.02em;
line-height: 1.4;
}
/* Section eyebrow numbered: 01 — CATALOG (instead of CATALOG alone) */
.indigo-eyebrow--numbered::before {
content: attr(data-num) " — ";
color: var(--color-text-muted);
font-weight: 400;
letter-spacing: 0.3em;
}
/* Subtle hairline divider between sections */
.indigo-hairline {
height: 1px;
background: var(--color-border-subtle);
border: 0;
margin: 0 auto;
max-width: 1140px;
}
/* =====================================================================
MOBILE polish — tighter heroes, reduced section padding, type clamp
===================================================================== */
@media (max-width: 768px) {
.indigo-hero-fullbleed { min-height: 78vh; }
.indigo-section {
padding-top: var(--space-7) !important;
padding-bottom: var(--space-7) !important;
}
.h-display, .display-1, .display-2, .display-3 {
font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
line-height: 1.05 !important;
}
.h-display.display-2 { font-size: clamp(2.25rem, 10vw, 3rem) !important; }
.indigo-section .indigo-eyebrow { font-size: 0.7rem; letter-spacing: 0.25em; }
.editorial-quote {
padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
margin: var(--space-5) 0;
}
.editorial-quote::before { font-size: 4rem; top: -0.4em; }
.editorial-quote p { font-size: var(--font-lg); }
/* Tighten mosaic on mobile (single col stack) */
.indigo-mosaic { grid-template-columns: 1fr 1fr !important; gap: var(--space-3) !important; }
.indigo-mosaic > *:first-child { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
.indigo-section {
padding-top: var(--space-6) !important;
padding-bottom: var(--space-6) !important;
}
/* Cart-page / payment banners take less vertical space */
.indigo-quote-banner { padding: var(--space-4); }
.indigo-quote-banner h3 { font-size: var(--font-lg); }
/* Header logo doesn't crowd the hamburger */
header#top .navbar { padding-left: var(--space-3); padding-right: var(--space-3); }
}
/* =====================================================================
MOBILE HEADER — compact bar (was 113px tall, now ~64px). Targets
Odoo's .o_header_mobile navbar specifically since the desktop
selectors don't catch it.
===================================================================== */
@media (max-width: 991px) {
/* Mobile navbar bar itself */
header#top .navbar.o_header_mobile,
header#top .o_header_mobile {
min-height: 64px !important;
padding-top: var(--space-2) !important;
padding-bottom: var(--space-2) !important;
}
/* Logo inside the mobile bar */
header#top .o_header_mobile .navbar-brand img,
header#top .o_header_mobile .navbar-brand .img-fluid,
header#top .o_header_mobile a.navbar-brand img {
max-height: 44px !important;
height: auto !important;
width: auto !important;
}
/* Hamburger button — bigger tap area, no extra padding */
header#top .o_header_mobile button[data-bs-toggle="offcanvas"] {
padding: var(--space-2) var(--space-3) !important;
}
}
/* =====================================================================
OFFCANVAS DRAWER — fix Contact Us getting cut at viewport bottom
===================================================================== */
.offcanvas .offcanvas-body {
/* Was justify-content: space-between → pinned bottom buttons to
the absolute viewport edge, so the last CTA got chopped by the
safe-area inset. Move to start-flow with bottom padding instead. */
justify-content: flex-start !important;
gap: var(--space-2);
padding-bottom: calc(var(--space-7) + env(safe-area-inset-bottom, 0px)) !important;
padding-top: var(--space-3) !important;
}
/* CTAs at the end of the menu need breathing room from preceding items */
.offcanvas .offcanvas-body > *:last-child,
.offcanvas .offcanvas-body .navbar-nav + * {
margin-top: var(--space-4);
}
/* Sign in + Contact Us buttons get a small spread */
.offcanvas .offcanvas-body .navbar-nav .nav-item:has(a[href="/web/login"]),
.offcanvas .offcanvas-body .navbar-nav .nav-item:has(a[href*="contactus"]) {
margin-top: var(--space-2);
}
/* Drawer max-width on tablets — full-screen at phone, sheet at tablet */
@media (min-width: 576px) {
.offcanvas.offcanvas-end,
.offcanvas.offcanvas-start {
max-width: 380px !important;
}
}
/* Bootstrap utility gap: w-sm-auto (drop full width above 576px).
Used in hero CTAs so the buttons stack and span on phone, but become
inline auto-width on small+ screens. */
@media (min-width: 576px) {
.w-sm-auto { width: auto !important; }
}
/* Hero CTAs on mobile: keep clear of WhatsApp FAB (which sits at bottom
right corner) by adding some bottom margin on the last button row. */
@media (max-width: 575px) {
.indigo-hero-fullbleed .d-flex { margin-bottom: var(--space-7); }
}
/* =====================================================================
TOPBAR (dark "Become a dealer →" ticker) — force-white link color.
The global --bs-link-color override was leaking into the link even
though it had class="text-white" because Bootstrap's link rule has
higher cascade specificity than the utility on certain pseudo-states.
===================================================================== */
.bg-dark.text-white a,
.bg-dark.text-white a:link,
.bg-dark.text-white a:visited,
.bg-dark.text-white a:hover,
.bg-dark.text-white a:focus,
.bg-dark.text-white a:active {
color: #ffffff !important;
text-decoration: none;
}
.bg-dark.text-white a:hover {
opacity: 0.85;
}
/* Topbar layout — center cta, right phone; mobile centers the cta */
.indigo-topbar { padding: 0.5rem 0; }
.indigo-topbar a { line-height: 1.3; }
@media (max-width: 767px) {
.indigo-topbar .container { justify-content: center !important; }
}
/* Hide the phone link in the desktop header (it's redundant now that
it lives in the topbar on the right). The phone in the mobile
offcanvas drawer stays. */
@media (min-width: 992px) {
header#top .navbar a[href^="tel:"],
header#top .top_menu a[href^="tel:"],
header#top li:has(> a[href^="tel:"]) {
display: none !important;
}
}
/* =====================================================================
GALLERY FILTERS — compact sticky chips bar (was bulky btn-sm row,
now thin chip-style with horizontal scroll on mobile if overflow).
===================================================================== */
.indigo-gallery-filters {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--color-border-subtle);
padding: var(--space-3) 0;
top: 64px; /* below the header */
z-index: 30;
}
.indigo-gallery-filters__row {
display: flex;
gap: var(--space-2);
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 575px) {
.indigo-gallery-filters { padding: var(--space-2) 0; top: 56px; }
.indigo-gallery-filters__row {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
scrollbar-width: none;
padding: 0 var(--space-2);
}
.indigo-gallery-filters__row::-webkit-scrollbar { display: none; }
.indigo-gallery-filters__row > * { scroll-snap-align: start; flex-shrink: 0; }
}
.indigo-chip {
appearance: none;
border: 1px solid var(--color-border-subtle);
background: var(--color-bg-canvas);
color: var(--color-text-body);
font-size: var(--font-xs);
font-weight: 600;
letter-spacing: 0.02em;
padding: 0.35rem 0.9rem;
border-radius: var(--radius-pill);
cursor: pointer;
transition: border-color var(--duration-fast) var(--ease-out-quart),
background-color var(--duration-fast) var(--ease-out-quart),
color var(--duration-fast) var(--ease-out-quart);
white-space: nowrap;
line-height: 1.4;
}
.indigo-chip:hover {
border-color: var(--color-brand);
color: var(--color-brand);
}
.indigo-chip.is-active,
.indigo-chip.btn-dark {
background: var(--color-text-strong);
border-color: var(--color-text-strong);
color: var(--color-text-inverse);
}
.indigo-chip-divider {
width: 1px;
height: 20px;
background: var(--color-border);
margin: 0 var(--space-1);
display: inline-block;
}
@media (max-width: 575px) { .indigo-chip-divider { display: none; } }
/* =====================================================================
HERO V2 — edge-to-edge split: indigo navy block + fullbleed photo
Inspired by the original indigodecors.com hero, elevated with
editorial type, subtle Ken Burns and a micro trust-strip.
===================================================================== */
.indigo-hero-v2 {
position: relative;
background: var(--indigo-700);
overflow: hidden;
}
.indigo-hero-v2__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
min-height: clamp(520px, 72vh, 760px);
}
.indigo-hero-v2__panel {
background: var(--indigo-700);
color: #fff;
display: flex;
align-items: center;
padding: var(--space-8) clamp(var(--space-5), 6vw, var(--space-9));
position: relative;
z-index: 2;
}
.indigo-hero-v2__panel::after {
/* soft diagonal wedge that bleeds into the photo on desktop */
content: "";
position: absolute;
top: 0; bottom: 0; right: -60px;
width: 120px;
background: linear-gradient(95deg, var(--indigo-700) 50%, transparent 100%);
z-index: 1;
pointer-events: none;
}
.indigo-hero-v2__panel-inner {
max-width: 540px;
position: relative;
z-index: 2;
}
.indigo-hero-v2__eyebrow {
color: rgba(255, 255, 255, 0.75) !important;
letter-spacing: 0.18em;
font-size: 0.78rem;
margin-bottom: var(--space-5);
}
.indigo-hero-v2__title {
font-family: 'Cormorant Garamond', 'Noto Sans', serif;
font-weight: 500;
font-size: clamp(2.6rem, 5.5vw, 4.6rem);
line-height: 1.02;
letter-spacing: -0.015em;
color: #fff;
margin: 0 0 var(--space-5) 0;
}
.indigo-hero-v2__title em {
font-style: italic;
font-weight: 400;
color: #fff;
font-family: 'Cormorant Garamond', serif;
}
.indigo-hero-v2__lead {
font-size: 1.075rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.82);
max-width: 460px;
margin: 0 0 var(--space-7) 0;
}
.indigo-hero-v2__cta {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-bottom: var(--space-7);
}
.indigo-hero-v2__cta .btn-light {
background: #fff;
color: var(--indigo-700);
border: 0;
font-weight: 600;
padding: 0.95rem 1.75rem;
border-radius: var(--radius-md);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
transition: transform var(--duration-fast) var(--ease-out-quart),
box-shadow var(--duration-fast) var(--ease-out-quart);
}
.indigo-hero-v2__cta .btn-light:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
background: #fff;
color: var(--indigo-800);
}
.indigo-hero-v2__cta .btn-outline-light {
background: transparent;
color: #fff;
border: 1.5px solid rgba(255, 255, 255, 0.55);
font-weight: 500;
padding: 0.9rem 1.6rem;
border-radius: var(--radius-md);
transition: background-color var(--duration-fast) var(--ease-out-quart),
border-color var(--duration-fast) var(--ease-out-quart);
}
.indigo-hero-v2__cta .btn-outline-light:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #fff;
color: #fff;
}
.indigo-hero-v2__trust {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-5);
padding-top: var(--space-5);
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.indigo-hero-v2__trust li {
color: rgba(255, 255, 255, 0.7);
font-size: 0.85rem;
line-height: 1.4;
}
.indigo-hero-v2__trust strong {
display: block;
color: #fff;
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 2px;
font-family: 'Cormorant Garamond', serif;
letter-spacing: 0.005em;
}
.indigo-hero-v2__visual {
position: relative;
overflow: hidden;
background: #0a0a0a;
}
.indigo-hero-v2__photo {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
animation: indigoHeroKenBurns 22s ease-in-out infinite alternate;
}
.indigo-hero-v2__visual::after {
/* slight darken on the right edge to balance brightness with the navy block */
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0.18) 100%);
pointer-events: none;
}
.indigo-hero-v2__dots {
position: absolute;
bottom: var(--space-5);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 3;
}
.indigo-hero-v2__dots span {
width: 28px;
height: 2px;
background: rgba(255, 255, 255, 0.45);
border-radius: 1px;
transition: background-color var(--duration-fast) var(--ease-out-quart);
}
.indigo-hero-v2__dots span.active {
background: #fff;
}
@keyframes indigoHeroKenBurns {
0% { transform: scale(1.0) translate(0, 0); }
100% { transform: scale(1.08) translate(-1.5%, -1%); }
}
@media (max-width: 991px) {
.indigo-hero-v2__grid {
grid-template-columns: 1fr;
min-height: auto;
}
.indigo-hero-v2__panel {
padding: var(--space-7) var(--space-5);
order: 2;
}
.indigo-hero-v2__panel::after { display: none; }
.indigo-hero-v2__visual {
order: 1;
min-height: 360px;
max-height: 50vh;
}
.indigo-hero-v2__title { font-size: clamp(2.2rem, 7vw, 3rem); }
.indigo-hero-v2__cta { flex-direction: column; align-items: stretch; }
.indigo-hero-v2__cta .btn { width: 100%; text-align: center; }
.indigo-hero-v2__trust { gap: var(--space-4); }
.indigo-hero-v2__trust li { flex: 1 1 30%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
.indigo-hero-v2__photo { animation: none; }
}
/* =====================================================================
HERO SPLIT (legacy) — kept for any internal page still referencing it.
The home now uses .indigo-hero-v2 above.
===================================================================== */
.indigo-hero-split {
padding: var(--space-9) 0 var(--space-8) 0;
background: linear-gradient(180deg, var(--color-bg-canvas) 0%, var(--color-bg-surface) 100%);
overflow: hidden;
}
.indigo-hero-split__copy {
padding-right: var(--space-5);
}
.indigo-hero-split__copy .h-display {
font-size: clamp(2.5rem, 5.5vw, 4.8rem);
margin-bottom: var(--space-5);
}
.indigo-hero-split__copy .lead {
font-size: var(--font-lg);
max-width: 32rem;
}
.indigo-hero-split__visual {
position: relative;
}
.indigo-hero-split__visual img {
width: 100%;
height: auto;
max-height: 720px;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-xl);
display: block;
}
/* Decorative offset accent — a soft indigo block behind the image */
.indigo-hero-split__visual::before {
content: "";
position: absolute;
top: var(--space-5);
right: -var(--space-4);
width: 60%;
height: 60%;
background: var(--color-brand-soft);
border-radius: var(--radius-2xl);
z-index: -1;
transform: translateZ(0);
}
@media (max-width: 991px) {
.indigo-hero-split { padding: var(--space-7) 0; }
.indigo-hero-split__copy { padding-right: 0; text-align: left; }
.indigo-hero-split__visual img { aspect-ratio: 4 / 3; max-height: 460px; }
.indigo-hero-split__visual::before { display: none; }
}
@media (max-width: 575px) {
.indigo-hero-split { padding: var(--space-6) 0 var(--space-7) 0; }
}
/* =====================================================================
TABS — section-level horizontal tabs (Featured products on home,
reusable anywhere). Style matches the gallery chips for consistency
but slightly bigger / more prominent since they drive content swaps.
===================================================================== */
.indigo-tabs {
display: flex;
gap: var(--space-2);
align-items: center;
flex-wrap: wrap;
margin-bottom: var(--space-6);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border-subtle);
}
.indigo-tab {
appearance: none;
background: transparent;
border: 0;
color: var(--color-text-muted);
font-family: 'Noto Sans', sans-serif;
font-size: var(--font-sm);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: var(--space-3) var(--space-4);
cursor: pointer;
border-radius: var(--radius-md);
position: relative;
transition: color var(--duration-fast) var(--ease-out-quart),
background-color var(--duration-fast) var(--ease-out-quart);
}
.indigo-tab:hover {
color: var(--color-text-strong);
background: var(--color-bg-surface);
}
.indigo-tab.is-active {
color: var(--color-text-strong);
}
.indigo-tab.is-active::after {
content: "";
position: absolute;
bottom: -calc(var(--space-3) + 1px);
left: var(--space-4);
right: var(--space-4);
height: 2px;
background: var(--color-brand);
border-radius: var(--radius-pill);
}
.indigo-tab-panel {
display: none;
animation: indigoFadeIn var(--duration-slow) var(--ease-out-quart);
}
.indigo-tab-panel.is-active {
display: block;
}
@keyframes indigoFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 575px) {
.indigo-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.indigo-tabs::-webkit-scrollbar { display: none; }
.indigo-tab { flex-shrink: 0; padding: var(--space-2) var(--space-3); }
}
/* =====================================================================
CURATED CARDS — 3-up editorial bucket cards on home, each with a
header (eyebrow + Cormorant title), 3 thumbnail products, and a CTA.
Inspired by B Home's "Get out arows" + "Peluct pend now" pattern.
===================================================================== */
.indigo-curated-card {
background: var(--color-bg-canvas);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-5) var(--space-5) var(--space-4) var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-4);
height: 100%;
transition: border-color var(--duration-normal) var(--ease-out-quart),
box-shadow var(--duration-normal) var(--ease-out-quart),
transform var(--duration-normal) var(--ease-out-quart);
}
.indigo-curated-card:hover {
border-color: var(--color-brand);
box-shadow: var(--shadow-lg);
transform: translateY(-3px);
}
.indigo-curated-card__header h3 {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: var(--font-xl);
color: var(--color-text-strong);
line-height: 1.1;
letter-spacing: -0.015em;
}
.indigo-curated-card__thumbs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-2);
}
.indigo-curated-thumb {
display: block;
text-decoration: none;
color: inherit;
}
.indigo-curated-thumb img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
background: var(--color-bg-surface);
border-radius: var(--radius-md);
transition: transform var(--duration-slow) var(--ease-out-quart);
display: block;
}
.indigo-curated-thumb:hover img {
transform: scale(1.04);
}
.indigo-curated-thumb span {
display: block;
margin-top: var(--space-1);
font-size: var(--font-xs);
color: var(--color-text-muted);
text-align: center;
line-height: 1.3;
letter-spacing: 0.02em;
}
.indigo-curated-card__cta {
margin-top: auto;
color: var(--color-brand);
font-weight: 700;
font-size: var(--font-sm);
text-decoration: none;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: color var(--duration-fast) var(--ease-out-quart);
}
.indigo-curated-card__cta:hover {
color: var(--color-brand-hover);
text-decoration: underline;
}
@media (max-width: 575px) {
.indigo-curated-card { padding: var(--space-4); }
.indigo-curated-card__header h3 { font-size: var(--font-lg); }
}
/* =====================================================================
GLASS BRANDS STRIP — "we work with" band (B2B equivalent of the
classic "As featured in" press strip on consumer sites).
===================================================================== */
.indigo-glass-strip {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--space-5) var(--space-7);
color: var(--color-text-muted);
font-family: 'Noto Sans', sans-serif;
font-weight: 700;
font-size: var(--font-sm);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.indigo-glass-strip span {
transition: color var(--duration-fast) var(--ease-out-quart);
}
.indigo-glass-strip:hover span {
color: var(--color-text-muted);
opacity: 0.6;
}
.indigo-glass-strip span:hover {
color: var(--color-text-strong);
opacity: 1;
}
@media (max-width: 575px) {
.indigo-glass-strip {
gap: var(--space-3) var(--space-5);
font-size: var(--font-xs);
letter-spacing: 0.15em;
}
}
/* =====================================================================
PDP — Width + Height inputs (made-to-spec doors)
===================================================================== */
.indigo-pdp-dimensions {
padding: var(--space-4) 0;
border-top: 1px solid var(--color-border-subtle);
border-bottom: 1px solid var(--color-border-subtle);
}
.indigo-pdp-dimensions .form-label {
font-size: var(--font-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: var(--space-2);
}
.indigo-pdp-dimensions .input-group .form-control {
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.indigo-pdp-dimensions .input-group .form-control:focus {
z-index: 2;
}
.indigo-pdp-dimensions .input-group-text {
background: var(--color-bg-surface);
border: 1px solid var(--color-border-subtle);
border-left: 0;
color: var(--color-text-muted);
font-weight: 600;
font-size: var(--font-sm);
}
.indigo-pdp-dimensions code {
background: var(--color-brand-soft);
color: var(--color-brand);
padding: 0.05rem 0.35rem;
border-radius: var(--radius-sm);
font-size: 0.8em;
}
/* Door Brand: now a select dropdown (was 12-wide pills band). Style
it premium like Apple-store selects. */
#product_details .js_main_product select.form-select,
#product_details select[name*="Door"],
#product_details ul.o_wsale_product_attribute select,
#product_details .form-select {
appearance: none;
-webkit-appearance: none;
background-color: var(--color-bg-canvas);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 16px;
padding: 0.75rem 2.5rem 0.75rem 1rem;
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
font-weight: 600;
color: var(--color-text-strong);
width: 100%;
cursor: pointer;
}
#product_details .js_main_product select.form-select:focus,
#product_details select[name*="Door"]:focus,
#product_details .form-select:focus {
border-color: var(--color-brand);
box-shadow: 0 0 0 3px var(--color-brand-soft);
}
/* Line dimensions hint on /shop/cart (from localStorage) */
.indigo-line-dims,
.indigo-line-meta {
color: var(--color-text-muted);
font-size: var(--font-xs);
line-height: 1.5;
padding: var(--space-2) var(--space-3);
background: var(--color-brand-soft);
border-radius: var(--radius-sm);
border-left: 2px solid var(--color-brand);
margin-top: var(--space-2) !important;
}
.indigo-line-dims strong,
.indigo-line-meta strong {
font-weight: 700;
color: var(--color-text-strong);
font-size: var(--font-xs);
letter-spacing: 0.02em;
}
/* PDP install block (customer / ref / install address / phone) */
.indigo-pdp-install {
padding: var(--space-4) 0;
border-top: 1px solid var(--color-border-subtle);
}
.indigo-pdp-install .form-label {
font-size: var(--font-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: var(--space-1);
}
.indigo-pdp-install .indigo-eyebrow,
.indigo-pdp-dimensions .indigo-eyebrow {
display: block;
margin-bottom: var(--space-2);
}
/* =====================================================================
CHECKOUT /shop/address — hide VAT input + 'Ship to same address' chk
Per client (B2B dealer flow): VAT not used; most orders ship to the
homeowner or to the dealer's warehouse, NOT to the dealer's billing
address — so the "use same address" checkbox is misleading.
===================================================================== */
form[action*="/shop"] #div_vat,
form[action*="/shop"] [name="vat"],
form[action*="/shop"] input[name="vat"],
form[action*="/shop"] label[for="vat"],
form[action*="/shop"] label[for*="vat"] {
display: none !important;
}
/* hide the parent col that wraps the vat input (Odoo wraps each field
in a Bootstrap col div — we hide it by walking up via :has) */
form[action*="/shop"] div:has(> input[name="vat"]),
form[action*="/shop"] .form-group:has(> input[name="vat"]),
form[action*="/shop"] .col-12:has(> input[name="vat"]),
form[action*="/shop"] .col-md-6:has(> input[name="vat"]),
form[action*="/shop"] .col-lg-6:has(> input[name="vat"]) {
display: none !important;
}
/* Ship-to-same-address checkbox + its row */
form[action*="/shop"] #shipping_use_same,
form[action*="/shop"] input[name="use_same"],
form[action*="/shop"] label[for="use_same"],
form[action*="/shop"] .form-check:has(> input[name="use_same"]),
form[action*="/shop"] div:has(> input[name="use_same"]) {
display: none !important;
}
/* =====================================================================
CHECKOUT layout — order summary card hitting the footer
/shop/cart, /shop/checkout, /shop/address, /shop/payment all
render the order summary as a position:sticky card on the right
column. When the cart is short (1-2 items) the page is shorter than
viewport, and the card ended up flush against the indigo footer
with no breathing space.
===================================================================== */
/* Breathing room under the checkout main content */
.oe_website_sale > .container:last-of-type,
section[id*="oe_structure_website_sale_"]:last-of-type,
.oe_cart + .oe_structure,
form[action*="shop/address"] + .oe_structure {
padding-bottom: var(--space-9);
}
/* Direct breathing room on the sticky summary card itself + cart wrapper */
.oe_website_sale .o_total_card,
.oe_website_sale .o_cart_summary,
form[action*="/shop/cart/update_json"] + * .o_total_card {
margin-bottom: var(--space-7);
}
/* The whole checkout main needs bottom padding so the column-stacking
case (mobile: summary stacks under cart) also gets a clean gap */
.oe_website_sale {
padding-bottom: var(--space-8) !important;
}
@media (min-width: 992px) {
.oe_website_sale { padding-bottom: var(--space-9) !important; }
}
/* =====================================================================
MOTION — smooth scroll globally, image reveal on enter-viewport,
reduced-motion respect
===================================================================== */
html { scroll-behavior: smooth; }
html:focus-within { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
[data-indigo-fade] { opacity: 1 !important; transform: none !important; }
}
/* Smoother fade-in already exists for [data-indigo-fade] — refine its
curve + timing using motion tokens (was 0.6s ease, now token-driven). */
[data-indigo-fade] {
opacity: 0;
transform: translateY(28px);
transition: opacity var(--duration-slow) var(--ease-out-quart),
transform var(--duration-slow) var(--ease-out-quart);
will-change: opacity, transform;
}
[data-indigo-fade].in-view {
opacity: 1;
transform: translateY(0);
}
/* IMAGE REVEAL: when an image with [data-indigo-reveal] enters viewport,
it scales from 1.08 → 1.0 smoothly. Subtle, premium "Ken-Burns lite". */
[data-indigo-reveal] {
overflow: hidden;
position: relative;
}
[data-indigo-reveal] > img,
[data-indigo-reveal] > picture > img {
transform: scale(1.08);
opacity: 0;
transition: transform var(--duration-slower) var(--ease-out-expo),
opacity var(--duration-slow) var(--ease-out-quart);
will-change: transform, opacity;
}
[data-indigo-reveal].in-view > img,
[data-indigo-reveal].in-view > picture > img {
transform: scale(1);
opacity: 1;
}
/* =====================================================================
Installer portal — mobile-first list for /my/installs.
Big tap targets, no horizontal scroll, search-first UX.
Designed for outdoor use on a phone.
===================================================================== */
.indigo-installer-list {
padding: 0.75rem;
max-width: 720px;
margin: 0 auto;
}
.indigo-installer-title {
color: var(--indigo-700);
margin: 0.25rem 0 0.75rem;
font-size: 1.5rem;
}
.indigo-installer-search {
display: flex;
gap: 0.5rem;
margin: 0 0 1rem;
align-items: center;
}
.indigo-installer-search-input {
flex: 1 1 auto;
min-height: 48px;
padding: 0.6rem 0.9rem;
border: 2px solid var(--indigo-100, #d6dffa);
border-radius: 12px;
font-size: 1.05rem;
background: #fff;
color: var(--indigo-900, #0a1a3d);
box-shadow: 0 1px 2px rgba(20, 40, 90, 0.04);
}
.indigo-installer-search-input:focus {
outline: none;
border-color: var(--indigo-500, #1f4486);
box-shadow: 0 0 0 3px rgba(31, 68, 134, 0.18);
}
.indigo-installer-search-btn {
min-height: 48px;
min-width: 48px;
padding: 0 0.9rem;
background: var(--indigo-700, #1f4486);
color: #fff;
border: none;
border-radius: 12px;
font-size: 1.1rem;
cursor: pointer;
}
.indigo-installer-search-clear {
color: var(--indigo-500, #1f4486);
font-size: 0.92rem;
text-decoration: underline;
}
.indigo-installer-empty {
color: #6b7280;
background: #f5f7fb;
padding: 1.25rem;
border-radius: 12px;
text-align: center;
margin: 0.5rem 0;
}
.indigo-installer-card {
display: block;
background: #fff;
border: 1px solid var(--indigo-100, #d6dffa);
border-radius: 14px;
padding: 0.85rem 1rem;
margin: 0 0 0.75rem;
color: inherit;
text-decoration: none !important;
box-shadow: 0 1px 2px rgba(20, 40, 90, 0.04);
transition: transform 0.08s ease, box-shadow 0.12s ease;
}
.indigo-installer-card:hover,
.indigo-installer-card:active {
box-shadow: 0 4px 14px rgba(31, 68, 134, 0.12);
transform: translateY(-1px);
}
.indigo-installer-card-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.35rem;
}
.indigo-installer-card-head strong {
color: var(--indigo-700, #1f4486);
font-size: 1rem;
}
.indigo-installer-stage {
margin-left: auto;
background: var(--indigo-50, #eef2fa);
color: var(--indigo-700, #1f4486);
padding: 0.18em 0.6em;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
}
.indigo-installer-customer {
font-weight: 600;
color: #1a2740;
margin-bottom: 0.15rem;
}
.indigo-installer-address {
color: #495365;
font-size: 0.92rem;
white-space: pre-wrap;
line-height: 1.35;
margin-bottom: 0.4rem;
}
.indigo-installer-meta {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1rem;
color: #5a6478;
font-size: 0.86rem;
}
.indigo-installer-dealer {
font-style: italic;
}
.indigo-installer-date i {
margin-right: 0.3rem;
color: var(--indigo-500, #1f4486);
}
.indigo-installer-upload .form-control,
.indigo-installer-upload input {
min-height: 48px;
font-size: 1rem;
}
.indigo-installer-btn-primary {
background-color: var(--indigo-700, #1f4486) !important;
border-color: var(--indigo-700, #1f4486) !important;
min-height: 48px;
font-size: 1.02rem;
font-weight: 600;
}
/* =====================================================================
Installer portal — app-shell mode. When /my/installs or /my/install/
pages render, strip the marketing website chrome (header nav, footer,
floating WhatsApp button) so Carlos sees an app, not a website.
Uses :has() (Chrome 105+, Safari 15.4+, Firefox 121+ — all in 2026).
===================================================================== */
body:has(.indigo-installer-list) #wrapwrap > footer,
body:has(.indigo-installer-list) header.o_main_navbar,
body:has(.indigo-installer-list) header.o_header_standard,
body:has(.indigo-installer-list) .o_header_standard,
body:has(.indigo-installer-list) .topbar,
body:has(.indigo-installer-list) .o_floating_whatsapp_btn,
body:has(.indigo-installer-list) a[href*="wa.me"],
body:has(.indigo-installer-list) [data-snippet="s_floating_chat"] {
display: none !important;
}
/* Same when the user is inside the installer detail page. We target by
the form action since the detail page does not share the list class. */
body:has(form[action*="/my/install/"]) #wrapwrap > footer,
body:has(form[action*="/my/install/"]) header.o_main_navbar,
body:has(form[action*="/my/install/"]) header.o_header_standard,
body:has(form[action*="/my/install/"]) .topbar,
body:has(form[action*="/my/install/"]) .o_floating_whatsapp_btn,
body:has(form[action*="/my/install/"]) a[href*="wa.me"],
body:has(form[action*="/my/install/"]) [data-snippet="s_floating_chat"] {
display: none !important;
}
/* Soft app-shell background so it stops looking like a marketing site. */
body:has(.indigo-installer-list),
body:has(form[action*="/my/install/"]) {
background: #f4f6fb !important;
}
body:has(.indigo-installer-list) #wrapwrap,
body:has(form[action*="/my/install/"]) #wrapwrap {
background: transparent !important;
}
/* Slim sticky top bar so Carlos always has a way back home. */
.indigo-installer-topbar {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0.85rem;
background: var(--indigo-700, #1f4486);
color: #fff;
box-shadow: 0 1px 3px rgba(20, 40, 90, 0.18);
}
.indigo-installer-topbar a,
.indigo-installer-topbar a:visited {
color: #fff;
text-decoration: none;
font-weight: 600;
}
.indigo-installer-topbar .indigo-installer-topbar-back {
font-size: 1.4rem;
line-height: 1;
padding: 0.15rem 0.5rem;
border-radius: 8px;
}
.indigo-installer-topbar .indigo-installer-topbar-back:hover {
background: rgba(255, 255, 255, 0.12);
}
.indigo-installer-topbar .indigo-installer-topbar-title {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.01em;
}
.indigo-installer-topbar .indigo-installer-topbar-logout {
margin-left: auto;
font-size: 0.85rem;
opacity: 0.85;
}
/* Remove breadcrumb spacer and tighten the page padding. */
body:has(.indigo-installer-list) main,
body:has(form[action*="/my/install/"]) main {
padding-top: 0 !important;
}
body:has(.indigo-installer-list) .o_portal_my_home,
body:has(form[action*="/my/install/"]) .o_portal_my_home {
padding-top: 0 !important;
}
body:has(.indigo-installer-list) .breadcrumb,
body:has(form[action*="/my/install/"]) .breadcrumb,
body:has(.indigo-installer-list) .o_portal_navbar,
body:has(form[action*="/my/install/"]) .o_portal_navbar {
display: none !important;
}
/* Drop the duplicate page title (we already have it in the slim topbar) */
body:has(.indigo-installer-list) .indigo-installer-title {
display: none;
}
/* Force white arrow on the installer topbar back button — some link
styles from the website theme override the generic `.topbar a` rule. */
.indigo-installer-topbar .indigo-installer-topbar-back,
.indigo-installer-topbar .indigo-installer-topbar-back:visited,
.indigo-installer-topbar .indigo-installer-topbar-back:hover,
.indigo-installer-topbar .indigo-installer-topbar-back:focus,
.indigo-installer-topbar .indigo-installer-topbar-back:active {
color: #ffffff !important;
}
/* Cart removed from the storefront flow — hide the header cart icon.
Ordering happens on the product page ("Place order"). We hide it via CSS
rather than deactivating website_sale.header_cart_link, because the header
t-calls that view and deactivating it errors every page. */
.o_wsale_my_cart { display: none !important; }