diff --git a/src/Styles/ProductCatalogue/CatalogueTemplate3.scss b/src/Styles/ProductCatalogue/CatalogueTemplate3.scss index e3faa65..55b2762 100644 --- a/src/Styles/ProductCatalogue/CatalogueTemplate3.scss +++ b/src/Styles/ProductCatalogue/CatalogueTemplate3.scss @@ -1,203 +1,149 @@ -.CatelogueTemp3-MasterDiv1 { - font-family: 'Inconsolata', monospace; - width: inherit; - background: radial-gradient(circle at center, #1a0001, #320000); +/* Main Container */ +.catlog3 { + display: flex; + justify-content: center; + height: auto; + font-family: 'Montserrat', sans-serif; + background-color: #310000; } -page[size='A4'] { - background: #f5f6f7; - display: block; - margin: 0 auto; - margin-bottom: 0.5cm; - border: 1.25cm solid #f5f6f7; -} -@media print { - body, - page[size='A4'] { - margin: 0; - box-shadow: 0; - } +.catlog-container { + width: 100%; + padding: 1rem; + background-color: #310000; } -.CatelogueTemp3-MasterDiv1 .page-header1, -.page-header-space1 { - height: 100px; +/* Branch Header */ +.branch-header { + display: flex; + flex-direction: column; + background-color: #800000; + color: #fff; + margin-bottom: 1rem; } -.CatelogueTemp3-MasterDiv1 .page-footer1, -.page-footer-space1 { - height: 80px; -} - -.CatelogueTemp3-MasterDiv1.page-footer1 { - position: fixed; - bottom: 0; - z-index: 1; - border-top: #1292ee solid 1px; - width: inherit; - background: #fff; -} - -.CatelogueTemp3-MasterDiv1 .page-header1 { - position: fixed; - top: 0mm; - width: inherit; - border-bottom: #1292ee solid 1px; - color: #ffffff; - background-image: radial-gradient(circle); -} -.page-header1 { - text-align: center; +.branch-item { display: flex; justify-content: space-between; - background-color: maroon; - height: 150px; - border: none; - position: fixed; - top: 0; - width: 100%; -} - -.CatelogueTemp3-MasterDiv1 .img1 { - height: 51px; - left: 10px; - object-fit: cover; - position: absolute; - top: 66px; - width: 85px; -} - -.CatelogueTemp3-MasterDiv1 .img11 { - height: 40px; - left: 30px; - object-fit: cover; - position: absolute; - top: 71px; - width: 47px; -} - -.CatelogueTemp3-MasterDiv1 .text-wrapper11 { - color: black; - font-family: 'Montserrat', sans-serif; - font-size: 7px; - font-weight: 800; - left: 42px; - letter-spacing: 0; - line-height: normal; - position: absolute; - top: 97px; -} -.CatelogueTemp3-MasterDiv1 .itemcardGroup1 { - left: 1px; + align-items: center; position: relative; - top: 210px; - width: 570px; - height: inherit; - border-radius: 17px; - background-color: maroon; + padding: 0.5rem 1rem; + page-break-inside: avoid; /* Prevent header from splitting */ } -.itemcardGroup1 { - display: flex; - flex-wrap: wrap; - flex-direction: row; - column-gap: 0.5rem; - row-gap: 0.5rem; - padding: 1rem 0rem; +.branch-info { + text-align: left; } -.CatelogueTemp3-MasterDiv .div11 { - background-color: maroon; - overflow: scroll; - position: relative; - width: 595px; +.branch-name { + font-size: 22px; + font-weight: 600; } -.CatelogueTemp3-MasterDiv1 .overlap-group1 { - background-color: #ececec; - border-radius: 19.5px; - height: 125px; - position: relative; - left: 7px; - width: 105px; +.branch-mobile { + font-size: 16px; } -.CatelogueTemp3-MasterDiv1 .text-wrapper1 { - color: white; - font-family: 'Montserrat', sans-serif; + +.branch-address { font-size: 12px; - font-weight: 700; - left: 33px; - letter-spacing: 0; - line-height: normal; - position: absolute; - top: 100px; - border-radius: 60px; - height: 40px; - width: 41px; - background: red; - text-align: right; - align-items: center; - display: flex; - align-items: center; - justify-content: center; - gap: 0.1rem; } -.textDesign1 { + +.branch-logo { + width: 170px; + object-fit: contain; +} + +.fresh-deals { position: absolute; - top: 52px; - font-family: 'fantasy'; - font-size: 18px; - width: 173px; - transform: rotate(-15deg); + right: 50px; + font-size: 26px; + font-weight: 700; + transform: rotate(-10deg); text-transform: uppercase; text-shadow: 6px 6px 4px rgba(0, 0, 1, 0.5); } -.CatelogueTemp3-MasterDiv1 .text-wrapper-41 { - color: #000000; - font-family: 'Montserrat', sans-serif; - font-size: 10px; - font-weight: 800; - left: 6px; - letter-spacing: 0; - line-height: normal; - position: absolute; - top: 4px; - width: 90px; - height: 60px; - overflow: hidden; - text-align: center; -} -.text-wrapper-101 { - font-size: 17px; - font-weight: 900; -} -.text-wrapper-121 { - text-align: left; +/* Catalogue Grid */ +.catalogue-grid-wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + gap: 0.3rem; } -.CatelogueTemp3tableBody1 { - display: flex; - flex-wrap: wrap; - column-gap: 10px; - row-gap: 20px; -} -.CatelogueTemp3Table1 { - width: 580px; - background-color: #8b181a; - height: 100vh; - border-radius: 10px; - padding-top: 10px; -} -.CatelogueTemp3Branchdetails1 { - font-family: 'Montserrat', sans-serif; +.catalogue-item { display: flex; flex-direction: column; - flex-wrap: wrap; - justify-content: left; - gap: 1rem; - padding: 0.5rem 0rem 0rem 0.5rem; - font-weight: 400; - font-size: clamp(0.1rem, 2.5vw, 0.7rem); - align-items: self-start; + align-items: center; + background-color: #fff; + border-radius: 16px; + padding: 5px; + height: auto; + position: relative; + height: 110px; + width: 110px; + + /* Prevent splitting across pages */ + break-inside: avoid; + page-break-inside: avoid; +} + +/* Product Name */ +.product-name { + font-size: 12px; + font-weight: 600; + text-align: center; +} + +/* Product Logo */ +.product-logo { + width: 50px; + height: 40px; + object-fit: cover; + margin: 0.2rem 0; +} + +/* Product Price */ +.product-price { + font-size: 12px; + font-weight: 600; + position: absolute; + bottom: 5px; + right: 5px; + min-width: 35px; + width: max-content; + height: 35px; + background-color: red; + border-radius: 20px; + color: #fff; + display: flex; + align-items: center; + justify-content: center; + padding: 0 0.3rem; +} + +/* Print Styles */ +@media print { + body { + margin: 0; + font-size: 12px; + } + + .catlog-container { + padding: 0; + } + + .catalogue-item { + break-inside: avoid; + page-break-inside: avoid; + } + + .catalogue-grid-wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + gap: 0.3rem; + } + + .branch-item { + page-break-inside: avoid; + } }