diff --git a/assets/css/theme.css b/assets/css/theme.css index e330326..a558249 100644 --- a/assets/css/theme.css +++ b/assets/css/theme.css @@ -847,18 +847,6 @@ select { z-index: 10; } -.z-0 { - z-index: 0; -} - -.z-auto { - z-index: auto; -} - -.z-50 { - z-index: 50; -} - .col-span-1 { grid-column: span 1 / span 1; } @@ -961,6 +949,11 @@ select { margin-bottom: 2rem; } +.my-16 { + margin-top: 4rem; + margin-bottom: 4rem; +} + .mb-1 { margin-bottom: 0.25rem; } @@ -1065,10 +1058,6 @@ select { margin-top: 2.25rem; } -.box-border { - box-sizing: border-box; -} - .block { display: block; } @@ -1137,6 +1126,10 @@ select { height: 20px; } +.h-\[30px\] { + height: 30px; +} + .h-\[50px\] { height: 50px; } @@ -1153,48 +1146,24 @@ select { height: 100%; } -.h-\[700px\] { - height: 700px; +.h-4\/5 { + height: 80%; } -.h-\[400px\] { - height: 400px; +.h-\[80vh\] { + height: 80vh; } -.h-\[500px\] { - height: 500px; +.h-\[70vh\] { + height: 70vh; } -.h-\[180px\] { - height: 180px; +.h-\[40vh\] { + height: 40vh; } -.h-\[100px\] { - height: 100px; -} - -.h-\[70px\] { - height: 70px; -} - -.h-\[30px\] { - height: 30px; -} - -.h-32 { - height: 8rem; -} - -.h-96 { - height: 24rem; -} - -.h-\[300px\] { - height: 300px; -} - -.h-\[600px\] { - height: 600px; +.h-\[30vh\] { + height: 30vh; } .max-h-\[40px\] { @@ -1480,10 +1449,6 @@ select { border-width: 2px; } -.border-4 { - border-width: 4px; -} - .border-t { border-top-width: 1px; } @@ -1596,13 +1561,23 @@ select { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-red-700 { +.bg-neutral-400 { --tw-bg-opacity: 1; - background-color: rgb(185 28 28 / var(--tw-bg-opacity)); + background-color: rgb(163 163 163 / var(--tw-bg-opacity)); } -.bg-cover { - background-size: cover; +.bg-neutral-100 { + --tw-bg-opacity: 1; + background-color: rgb(245 245 245 / var(--tw-bg-opacity)); +} + +.bg-\[\#E6DFD4\] { + --tw-bg-opacity: 1; + background-color: rgb(230 223 212 / var(--tw-bg-opacity)); +} + +.bg-transparent { + background-color: transparent; } .stroke-black { @@ -1629,11 +1604,21 @@ select { stroke-width: 3px; } +.object-contain { + -o-object-fit: contain; + object-fit: contain; +} + .object-cover { -o-object-fit: cover; object-fit: cover; } +.object-fill { + -o-object-fit: fill; + object-fit: fill; +} + .object-scale-down { -o-object-fit: scale-down; object-fit: scale-down; @@ -2406,6 +2391,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { display: none; } + .md\:h-\[200px\] { + height: 200px; + } + .md\:h-\[300px\] { height: 300px; } @@ -2418,16 +2407,16 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { height: 40px; } - .md\:h-\[100px\] { - height: 100px; + .md\:h-\[80vh\] { + height: 80vh; } - .md\:h-\[180px\] { - height: 180px; + .md\:h-\[70vh\] { + height: 70vh; } - .md\:h-\[200px\] { - height: 200px; + .md\:h-full { + height: 100%; } .md\:w-1\/2 { @@ -2518,6 +2507,15 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { gap: 1rem; } + .md\:bg-transparent { + background-color: transparent; + } + + .md\:object-cover { + -o-object-fit: cover; + object-fit: cover; + } + .md\:p-2 { padding: 0.5rem; } @@ -2704,6 +2702,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { display: none; } + .lg\:h-\[300px\] { + height: 300px; + } + .lg\:h-\[400px\] { height: 400px; } @@ -2720,14 +2722,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { height: 90vh; } - .lg\:h-\[460px\] { - height: 460px; - } - - .lg\:h-\[300px\] { - height: 300px; - } - .lg\:w-1\/3 { width: 33.333333%; } @@ -2922,10 +2916,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { right: 14rem; } - .xl\:h-\[500px\] { - height: 500px; - } - .xl\:h-\[460px\] { height: 460px; } diff --git a/templates/layouts/layout-both-columns.tpl b/templates/layouts/layout-both-columns.tpl index 3bd562d..587f255 100644 --- a/templates/layouts/layout-both-columns.tpl +++ b/templates/layouts/layout-both-columns.tpl @@ -54,16 +54,6 @@ {block name='displayBeforeWrapper'} {hook h='displayBeforeWrapper'} {/block} - -<!-- {if $page.page_name == 'index'} - <a href="https://brooksbingham.com/17-custom-made" id="slider"> - <div class="mb-12 w-full lg:h-[90vh]" style="clip-path: inset(4px)" id="slider"> - <video autoplay muted loop class="w-full h-full object-cover" style="background-color: rgba(0, 0, 0, 0)"> - <source src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/slider.mp4" type="video/mp4" > - </video> - </div> - </a> - {/if} --> <section class="container mx-auto"> {block name='breadcrumb'} @@ -95,21 +85,20 @@ {/block} {if $page.page_name == 'index'} - -<div> - - <img class="absolute left-0 top-0 right-0 w-full" - src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/banner.png" +<div class="w-full h-[40vh] md:h-[80vh] absolute top-0 left-0 bg-[#E6DFD4] md:bg-transparent flex items-center"> + <img class="w-full md:h-full md:object-cover" + src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/homepage/banner.png" /> </div> - -<div class="xl:h-[460px] lg:h-[300px] md:h-[200px] h-[30px]" > +<div class="w-full h-[30vh] md:h-[70vh]"> </div> <div class="lg:my-32 my-20" > <h1 class="lg:text-2xl md:text-xl text-lg font-bold text-center">Design and Visualize what you need</h1> <h3 class="lg:text-lg md:text-md text-sm font-semibold text-center mb-12">Choose what looks good on you </h3> - <img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/widget-screenshot.png"/> + <a href="https://brooksbingham.com/module/thob/configurator?id_product=77"> + <img src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/widget-screenshot.png"/> + </a> </div> @@ -126,7 +115,7 @@ </p> <div class="xl:w-52 lg:w-42 md:w-42 w-38 flex md:justify-start justify-center"> <a class="all-product-link xl:text-xl lg:text-lg md:text-md text-sm font-bold mt-9 flex border border-2 border-black p-2 px-4" - href="https://brooksbingham.com/17-custom-made-clothing"> + href="https://brooksbingham.com/module/thob/configurator?id_product=75"> Start Customization </a> </div> @@ -155,8 +144,8 @@ </p> <div class="lg:w-52 md:w-42 w-38 flex md:justify-start justify-center"> <a class="all-product-link xl:text-xl lg:text-lg md:text-sm text-sm font-bold mt-9 md:mt-4 lg:mt-9 flex border border-2 border-black p-2 px-4" - href="https://brooksbingham.com/17-custom-made-clothing"> - Start Customization + href="https://stage.brooksbingham.com/content/10-how-to-measure"> + How to measure </a> </div> </div> @@ -308,7 +297,7 @@ </p> <div class="lg:w-52 md:w-42 w-38 flex justify-start pt-4"> <a class="all-product-link lg:text-xl md:text-md text-xs md:font-semibold font-base - flex border border-2 border-white md:p-2 p-1 md:px-4 px-2" + flex border border-2 border-white md:p-2 p-1 md:px-4 px-2 hover:text-white" href="https://brooksbingham.com/17-custom-made-clothing"> Start Customization </a> @@ -330,77 +319,7 @@ world of custom garments. </p> </div> - - - - - - - - -<!-- - -<div class="mt-48"> - <div class=" text-white grid grid-cols-2 grid-rows-* gap-y-1 gap-x-1 mb-1"> - <div class="row-span-3 col-start-1 row-end-2 relative"> - <h3 class="absolute lg:bottom-3 bottom-1 right-0 lg:font-bold font-medium lg:text-xl lg:mb-2 pr-1.5 xxs lg:p-4">Business Suits for Men</h3> - <h3 class="absolute bottom-0 right-0 text-white text-lg hide-on-small p-4">Make a powerful impression and radiate confidence</h3> - <img class="object-cover" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-big%20img.jpg" alt="Tailored business Suits designed for you to make a - powerful impression and radiate confidence." /> - </div> - <div class="col-span-1 col-start-2 row-span-2 flex relative"> - <h3 class="absolute lg:bottom-3 bottom-1 lg:right-0 right-2 lg:font-bold font-medium lg:text-xl lg:mb-2 xxs lg:p-4">Browse through our design</h3> - <h3 class="absolute bottom-0 right-0 text-lg hide-on-small p-4">Get inspired with our curated outfit ideas</h3> - <img class=" object-cover" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Right-small-img1.png" /> - </div> - <div class="row-start-1 col-start-2 col-span-1 row-span-1 relative "> - <h3 class="absolute lg:bottom-3 bottom-1 lg:right-0 right-2 lg:font-bold font-medium lg:text-xl lg:mb-2 xxs lg:p-4">Get the perfect fit</h3> - <h3 class="absolute bottom-0 right-0 text-lg p-4 hide-on-small">Get inspired with our curated outfit ideas</h3> - <img class=" object-cover h-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Right-small-img2.jpg" - alt="The future of fashion with our innovative designs. Customization options tailored to your measurements and discover your perfect fit in minutes" /> - </div> - </div> - </div> - - <div class=" text-white grid grid-cols-2 grid-rows-* gap-y-1 gap-x-1"> - <div class="row-span-3 col-start-2 row-end-2 relative"> - <h3 class="absolute lg:bottom-3 bottom-1 right-0 lg:font-bold font-medium pr-1.5 lg:text-xl lg:mb-2 xxs lg:p-4">Wear Your Identity</h3> - <h3 class="absolute bottom-0 right-0 text-white text-lg hide-on-small p-4">Fashion that speaks volumes</h3> - <img class="object-cover" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Right-big%20img.jpg" /> - </div> - <div class="col-span-1 col-start-1 row-span-2 flex relative"> - <h3 class="absolute lg:bottom-3 bottom-1 lg:right-0 right-2 lg:font-bold font-medium lg:text-xl lg:mb-2 xxs lg:p-4">Timeless Quality </h3> - <h3 class="absolute bottom-0 right-0 text-lg hide-on-small p-4">Fashion that stands the test of time</h3> - <img class=" object-cover" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img1.jpg" alt="Invest in enduring fashion with our commitment to quality and - durability.From custom-made tuxedos to business suits, each piece stands the test of time." /> - </div> - <div class="row-start-1 col-start-1 col-span-1 row-span-1 relative "> - <h3 class="absolute lg:bottom-3 bottom-1 lg:right-0 right-2 lg:font-bold font-medium lg:text-xl lg:mb-2 xxs lg:p-4">Tailored to your specifications </h3> - <h3 class="absolute bottom-0 right-0 hide-on-small text-lg p-4">Tailor every detail to match your preferences</h3> - <img class=" object-cover h-full" src="https://brooksbingham-season5.sfo2.cdn.digitaloceanspaces.com/site-static-assets/gallery/Left-small-img2.png" /> </div> - </div> - </div> -</div> - - <a class="all-product-link text-2xl font-bold w-full flex items-center justify-end mt-8 mb-8" href="https://brooksbingham.com/content/9-gallery"> - {l s='View More' d='Shop.Theme.Catalog'} - <svg xmlns="http://www.w3.org/2000/svg" class="icon stroke-gray-600 stroke-[3px] icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg> - </a> - - - <div class="flex h-[50vh] items-center"> - <div class="flex justify-center p-4"> - <div class="md:w-3/5 relative text-center"> - <p class="md:text-3xl text-xl p-4 font-medium"><b class="md:text-4xl text-xl ">“</b> - <b>BrooksBingham</b> is your destination for custom-tailored menswear, where authenticity is woven into every stitch.<b class="md:text-4xl text-xl">”</b></p> - - <p class="text-sm"> Our perfect fit guarantee ensures that every piece you order is tailored to your exact specifications, delivering a perfect fit every time.</p> - </div> - </div> - </div> - - {/if} - +{/if} {block name="right_column"} <div id="right-column" class="col-xs-12 col-sm-4 col-md-3"> {if $page.page_name == 'product'} @@ -432,8 +351,7 @@ {block name='hook_before_body_closing_tag'} {hook h='displayBeforeBodyClosingTag'} - {/block} - --> + {/block} </body>