/* * Porto's own designated override hook (originally `css/custom.css`, * always loaded last in the template's ) -- this project's own * storefront tweaks live here instead of touching the vendored theme * files directly. */ /* * Brand color override: #ed1e3e instead of skins/default.css's own * #0088CC. Porto's skin doesn't derive its -100/-200/-300 (darker) and * --100/--200/--300 (lighter) shades from --primary via a CSS color * function -- each is its own hardcoded hex value, scaled from the base * by a fixed percentage (-12.5%/-18.75%/-25% darker, same lighter) -- so * all of them are recomputed here to match, not just --primary itself. * --primary-inverse (the text color used on a primary background) is * left at #FFF: #ed1e3e is dark/saturated enough that white text still * has good contrast on it, same as it did on the original blue. */ :root { --primary: #ed1e3e; --primary-100: #cf1a36; --primary-200: #c11832; --primary-300: #b2162e; --primary--100: #ff2246; --primary--200: #ff244a; --primary--300: #ff264e; --primary-rgba-0: rgba(237, 30, 62, 0); --primary-rgba-10: rgba(237, 30, 62, 0.1); --primary-rgba-20: rgba(237, 30, 62, 0.2); --primary-rgba-30: rgba(237, 30, 62, 0.3); --primary-rgba-40: rgba(237, 30, 62, 0.4); --primary-rgba-50: rgba(237, 30, 62, 0.5); --primary-rgba-60: rgba(237, 30, 62, 0.6); --primary-rgba-70: rgba(237, 30, 62, 0.7); --primary-rgba-80: rgba(237, 30, 62, 0.8); --primary-rgba-90: rgba(237, 30, 62, 0.9); } /* * Widen the content container on large screens. Bootstrap's own * .container caps at 1320px from 1400px up; Porto's theme.css caps it * further, to 1140px, from 1200px up (unless the element also carries * .container-xl-custom/.container-xxl-custom, which this project's * markup never adds) -- both leave a lot of empty margin on wide * monitors. !important is required here: Porto's rule uses three * :not() clauses, which out-specifies a plain `.container` selector * regardless of file load order. */ @media (min-width: 1400px) { .container { max-width: 1600px !important; } } /* * Product carousel prev/next buttons (x-storefront.product-carousel, * shared by "Preventas destacadas"/"Recién agregados" on the home page * and "Related products" on product detail): theme-elements.css's * default size (30x30px, 11.2px icon) reads as too small/subtle. */ .owl-carousel.nav-dark .owl-nav button.owl-prev, .owl-carousel.nav-dark .owl-nav button.owl-next { width: 44px !important; height: 44px !important; } .owl-carousel.nav-dark .owl-nav button.owl-prev:before, .owl-carousel.nav-dark .owl-nav button.owl-next:before { font-size: 16px !important; } /* * Order status badge color: the one non-native `text-bg-*` variant * (FormatsOrderStatus::orderStatusColor()) -- reserved for * AwaitingSettlement, the one order status that needs the customer to * act right now, so it's tied to the site's own brand color instead of * a generic Bootstrap one. */ .text-bg-brand { color: #fff !important; background-color: var(--primary) !important; } /* * Preorder settlement countdown bar on product cards -- Porto's own * default is a generic blue (#0184c2), unrelated to this site's brand. */ .product .product-thumb-info .countdown-offer-wrapper { background: var(--primary); } /* * Header account icon: hide Bootstrap's default .dropdown-toggle::after * caret. The theme's own real reference markup for this exact icon * (shop-cart.html, .header-extra-info-icon > a > i.icon-user) is a * plain link with no dropdown at all -- we added the "My account/My * orders/Log out" menu ourselves (a real need the static demo doesn't * have), using Bootstrap's generic `dropdown-toggle` class for the * behavior, which brings its caret along as a side effect. The * sibling cart icon avoids this same problem by using the theme's own * `header-nav-features-toggle` class instead of `dropdown-toggle`; the * account icon can't switch classes that easily (its dropdown menu is * plain Bootstrap markup, not the theme's custom cart-preview widget), * so this just removes the caret directly instead. */ .header-extra-info-icon .dropdown-toggle::after { display: none; } /* * FAQ toggle (theme-elements.css): `.toggle > .toggle-content` is * `display: none` unconditionally, with no `.active` override in the * stylesheet -- the real theme's own `data-plugin-toggle` jQuery widget * is what reveals it, via an inline `slideDown()`. That widget isn't * part of the curated storefront JS bundle (CLAUDE.md §32.32), so * faq-page.blade.php drives open/closed state with Alpine's `x-show` * instead. `x-show`, when true, only *removes* Alpine's own inline * `display: none` -- it never sets `display: block` itself, so without * this rule the stylesheet's unconditional `display: none` kept * winning and the content never appeared, no matter the state. */ .toggle.active > .toggle-content { display: block; }