Compare commits
2 Commits
d3180c8c45
...
cf6a1e3d90
| Author | SHA1 | Date |
|---|---|---|
 Adam
|
cf6a1e3d90 | |
|
Adam
|
d3136d1ff2 |
|
|
@ -0,0 +1,18 @@
|
|||
|
||||
/* ── Quick Order nav item ─────────────────────────────────────────────────── */
|
||||
.top-menu .quick-order-menu-item > a {
|
||||
color: #f4a236 !important;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.top-menu .quick-order-menu-item > a .fa {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.top-menu .quick-order-menu-item > a:hover {
|
||||
color: #fff !important;
|
||||
background-color: #f4a236;
|
||||
border-radius: 6px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
|
@ -7742,10 +7742,10 @@ html.lenis, html.lenis body {
|
|||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* 3×2 grid */
|
||||
/* 4×2 grid */
|
||||
.fb-cat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -7875,8 +7875,15 @@ html.lenis, html.lenis body {
|
|||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* Smaller desktop: 3 columns */
|
||||
@media (max-width: 1280px) {
|
||||
.fb-cat-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet: 2 columns */
|
||||
@media (max-width: 1024px) {
|
||||
@media (max-width: 900px) {
|
||||
.fb-cat-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
<section class="fb-features" id="fbFeatures">
|
||||
<div class="fb-features-header">
|
||||
<h2>Miért a <em>FruitBank</em>?</h2>
|
||||
<p>Nagykereskedelmi megoldás, ami másképp működik.</p>
|
||||
<p>Nagykereskedelem, másképp.</p>
|
||||
</div>
|
||||
|
||||
<div class="fb-feature" data-align="left">
|
||||
|
|
@ -57,19 +57,19 @@
|
|||
</div>
|
||||
<div class="fb-feature-content">
|
||||
<span class="fb-feature-num">01</span>
|
||||
<h3>Farmról frissen, minden nap</h3>
|
||||
<p>A megbízható termelőktől történő közvetlen beszerzés garantálja, hogy termékeink a lehető legfrissebb állapotban és kiváló ízminőségben érkeznek Önhöz.</p>
|
||||
<h3>Farmról frissen, minden héten</h3>
|
||||
<p>A megbízható nyugat-európai forgalmazóktól történő közvetlen beszerzés garantálja, hogy termékeink a lehető legfrissebb állapotban, kiváló ízminőségben, és versenyképes árakon érkeznek Önhöz.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fb-feature" data-align="right">
|
||||
<div class="fb-feature-img">
|
||||
<img src="/images/uploaded/delivery.jpg" alt="Másnapi kiszállítás" loading="lazy" />
|
||||
<img src="/images/uploaded/delivery.jpg" alt="Heti szállítás" loading="lazy" />
|
||||
</div>
|
||||
<div class="fb-feature-content">
|
||||
<span class="fb-feature-num">02</span>
|
||||
<h3>Másnapi nagykereskedelmi kiszállítás</h3>
|
||||
<p>A hőmérséklet-szabályozott logisztika biztosítja, hogy rendelése minden alkalommal frissen és pontosan érkezzen meg.</p>
|
||||
<h3>Hetente friss szállítmány</h3>
|
||||
<p>A hőmérséklet-szabályozott heti forgásban működő logisztika biztosítja, hogy rendelése minden alkalommal frissen érkezzen meg.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
<div class="fb-feature-content">
|
||||
<span class="fb-feature-num">03</span>
|
||||
<h3>Páratlan választék</h3>
|
||||
<p>A mindennapi alapanyagoktól az egzotikus különlegességekig – egész évben több mint 500 féle gyümölcs és zöldség kínálatában.</p>
|
||||
<p>A mindennapi alapanyagoktól az egzotikus különlegességekig – egész évben gyümölcs és zöldség széles választéka.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
<div class="fb-feature-content">
|
||||
<span class="fb-feature-num">04</span>
|
||||
<h3>Fenntartható forrásból</h3>
|
||||
<p>Olyan termelőkkel dolgozunk együtt, akik osztoznak a felelős gazdálkodás és az élelmiszer-pazarlás csökkentése iránti elkötelezettségünkben.</p>
|
||||
<p>Olyan forgalmazókkal dolgozunk együtt, akik osztoznak a felelős gazdálkodás és az élelmiszer-pazarlás csökkentése iránti elkötelezettségünkben.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -138,6 +138,7 @@
|
|||
<li>Passiongyümölcs</li>
|
||||
<li>Licsi</li>
|
||||
<li>Sárkánygyümölcs</li>
|
||||
<li>Datolyaszilva</li>
|
||||
</ul>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -145,17 +146,19 @@
|
|||
<a href="/termékek" class="fb-cat-card">
|
||||
<img src="/images/uploaded/cat-veggies.jpg" alt="Zöldségek" loading="lazy" />
|
||||
<div class="fb-cat-label">
|
||||
<h3>Zöldségek <span>szezonon kívül</span></h3>
|
||||
<h3>Zöldségek <span>szezonon kívül is!</span></h3>
|
||||
</div>
|
||||
<div class="fb-cat-hover">
|
||||
<h3>Zöldségek <span>szezonon kívül</span></h3>
|
||||
<h3>Zöldségek <span>szezonon kívül is!</span></h3>
|
||||
<ul>
|
||||
<li>Paradicsom</li>
|
||||
<li>Paprika</li>
|
||||
<li>Koktélparadicsom </li>
|
||||
<li>Paprikafélék</li>
|
||||
<li>Cukkini</li>
|
||||
<li>Padlizsán</li>
|
||||
<li>Zöldbab</li>
|
||||
<li>Kígyóuborka</li>
|
||||
<li>Brokkoli</li>
|
||||
<li>Jégsaláta</li>
|
||||
</ul>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -189,9 +192,9 @@
|
|||
<li>Áfonya</li>
|
||||
<li>Szeder</li>
|
||||
<li>Málna</li>
|
||||
<li>Eper</li>
|
||||
<li>Földieper</li>
|
||||
<li>Ribizli</li>
|
||||
<li>Egészség csomag</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -205,11 +208,45 @@
|
|||
<h3>Egzotikus fűszerek</h3>
|
||||
<ul>
|
||||
<li>Friss gyömbér</li>
|
||||
<li>Kurkuma</li>
|
||||
<li>Petrezselyem</li>
|
||||
<li>Citromfű</li>
|
||||
<li>Chili paprika</li>
|
||||
<li>Kapor</li>
|
||||
<li>Koriander</li>
|
||||
<li>Friss menta</li>
|
||||
<li>Bazsalikom</li>
|
||||
</ul>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/termékek" class="fb-cat-card">
|
||||
<img src="/images/uploaded/cat-dates.jpg" alt="Datolya" loading="lazy" />
|
||||
<div class="fb-cat-label">
|
||||
<h3>Datolya</h3>
|
||||
</div>
|
||||
<div class="fb-cat-hover">
|
||||
<h3>Datolya</h3>
|
||||
<ul>
|
||||
<li>Medjool</li>
|
||||
<li>Deglet Nour</li>
|
||||
<li>Barhi</li>
|
||||
<li>Mazafati</li>
|
||||
</ul>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/termékek" class="fb-cat-card">
|
||||
<img src="/images/uploaded/cat-farveggies.jpg" alt="Távoli zöldségek" loading="lazy" />
|
||||
<div class="fb-cat-label">
|
||||
<h3>Távoli zöldségek</h3>
|
||||
</div>
|
||||
<div class="fb-cat-hover">
|
||||
<h3>Távoli zöldségek</h3>
|
||||
<ul>
|
||||
<li>Avokádó</li>
|
||||
<li>Fokhagyma</li>
|
||||
<li>Édesburgonya</li>
|
||||
<li>Gyömbér</li>
|
||||
<li>Fokhagyma tisztított</li>
|
||||
</ul>
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@model TopMenuModel
|
||||
@model TopMenuModel
|
||||
|
||||
@using Nop.Core.Domain.Catalog
|
||||
@using Nop.Core.Domain.Topics
|
||||
|
|
@ -101,6 +101,14 @@
|
|||
{
|
||||
<li><a href="@Url.RouteUrl("ContactUs")">@T("ContactUs")</a></li>
|
||||
}
|
||||
@if (Model.DisplayCustomerInfoMenuItem)
|
||||
{
|
||||
<li class="quick-order-menu-item">
|
||||
<a href="@Url.Content("~/gyors-rendeles")">
|
||||
<i class="fa fa-bolt"></i> @T("Plugins.Misc.FruitBankPlugin.QuickOrder.MenuLabel")
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.HeaderMenuAfter, additionalData = Model })
|
||||
</ul>
|
||||
@{
|
||||
|
|
@ -155,6 +163,14 @@
|
|||
{
|
||||
<li><a href="@Url.RouteUrl("ContactUs")">@T("ContactUs")</a></li>
|
||||
}
|
||||
@if (Model.DisplayCustomerInfoMenuItem)
|
||||
{
|
||||
<li class="quick-order-menu-item">
|
||||
<a href="@Url.Content("~/gyors-rendeles")">
|
||||
<i class="fa fa-bolt"></i> @T("Plugins.Misc.FruitBankPlugin.QuickOrder.MenuLabel")
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.MobHeaderMenuAfter, additionalData = Model })
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@using Nop.Core
|
||||
@using Nop.Core
|
||||
@using Nop.Core.Domain.Catalog
|
||||
@using Nop.Core.Infrastructure
|
||||
@using Nop.Services.Helpers
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
NopHtml.AppendCssFileParts($"~/Themes/{themeName}/Content/css/responsive-max-1000{(supportRtl ? ".rtl" : "")}.css");
|
||||
NopHtml.AppendCssFileParts($"~/Themes/{themeName}/Content/css/responsive-max-768{(supportRtl ? ".rtl" : "")}.css");
|
||||
NopHtml.AppendCssFileParts($"~/Themes/{themeName}/Content/css/styles{(supportRtl ? ".rtl" : "")}.css");
|
||||
|
||||
NopHtml.AppendCssFileParts($"~/Themes/{themeName}/Content/css/quick-order-menu.css", excludeFromBundle: true);
|
||||
|
||||
NopHtml.AppendCssFileParts($"~/Themes/{themeName}/Content/css/font-awesome.min.css");
|
||||
//add swiper css file
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,120 @@
|
|||
|
||||
body {
|
||||
font: normal 9pt Arial, Helvetica, sans-serif;
|
||||
color: #000;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.order-details-page .order-overview {
|
||||
margin: 0 0 25px;
|
||||
}
|
||||
|
||||
.order-details-page .order-overview .order-number {
|
||||
font-size: 11pt;
|
||||
text-transform: uppercase;
|
||||
padding-block: 10px;
|
||||
}
|
||||
.order-details-page .order-overview-content li {
|
||||
margin: 5px 0;
|
||||
}
|
||||
.order-details-page .order-overview .order-total strong {
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.order-details-page .order-details-area {
|
||||
margin: 0 0 25px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
}
|
||||
.order-details-page ul {
|
||||
padding-inline-start: 0px;
|
||||
}
|
||||
.order-details-page .order-details-area > div {
|
||||
flex: 1 0 auto;
|
||||
margin-bottom: 40px;
|
||||
margin-block-end: 1%;
|
||||
}
|
||||
.order-details-page .order-details-area li.title {
|
||||
margin: 10px 0 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.order-details-page .order-details-area li:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.order-details-page .data-table {
|
||||
border: 1px solid;
|
||||
}
|
||||
.order-details-page .data-table th {
|
||||
border: 1px solid;
|
||||
padding: 5px 10px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.order-details-page .data-table td {
|
||||
border: 1px solid;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.order-details-page .data-table .sku,
|
||||
.order-details-page .data-table .picture,
|
||||
.order-details-page .data-table .unit-price,
|
||||
.order-details-page .data-table .quantity,
|
||||
.order-details-page .data-table .total {
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
.order-details-page .data-table .unit-price,
|
||||
.order-details-page .data-table .quantity,
|
||||
.order-details-page .data-table .total {
|
||||
width: 15%;
|
||||
}
|
||||
.order-details-page .data-table label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.order-details-page .section {
|
||||
margin: 30px 0;
|
||||
}
|
||||
.order-details-page .section .title {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.order-details-page .section.totals {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.order-details-page .tax-shipping-info,
|
||||
.order-details-page .selected-checkout-attributes {
|
||||
margin: 20px 0;
|
||||
text-align:end;
|
||||
}
|
||||
|
||||
.order-details-page .cart-total-right {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.order-details-page .cart-total td {
|
||||
padding-inline-start: 10px;
|
||||
padding-block: 5px;
|
||||
text-align: end;
|
||||
}
|
||||
.order-details-page td.cart-total-left {
|
||||
font-weight: bold;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.order-details-page .total-info
|
||||
{
|
||||
min-width: 200px;
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
|
||||
/* ── Quick Order nav item ─────────────────────────────────────────────────── */
|
||||
.top-menu .quick-order-menu-item > a {
|
||||
color: #f4a236 !important;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.top-menu .quick-order-menu-item > a .fa {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.top-menu .quick-order-menu-item > a:hover {
|
||||
color: #fff !important;
|
||||
background-color: #f4a236;
|
||||
border-radius: 6px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
|
@ -0,0 +1,469 @@
|
|||
|
||||
@media all and (max-width: 1000px) {
|
||||
.inputs .gender,
|
||||
.inputs label {
|
||||
text-align: left;
|
||||
display: block;
|
||||
max-width: 400px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
.inputs .gender span > * {
|
||||
margin: 0 6px 0 0;
|
||||
}
|
||||
.login-page .customer-blocks > div {
|
||||
max-width: 100%;
|
||||
}
|
||||
.header .header-upper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
background: var(--dark-bg);
|
||||
padding: 10px;
|
||||
}
|
||||
.header .header-upper .header-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
.header .header-upper .header-logo .header-menu-toggle {
|
||||
display: block;
|
||||
font-size: 26px;
|
||||
color: var(--dark);
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.header .header-upper .header-logo > a {
|
||||
max-width: 110px;
|
||||
}
|
||||
.header .header-upper > div {
|
||||
order: 1;
|
||||
}
|
||||
.header .header-upper > .search-box {
|
||||
order: 2;
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.header .header-upper .search-box input.search-box-text {
|
||||
width: calc(100% - 46px);
|
||||
}
|
||||
.header .header-selectors-wrapper {
|
||||
display: none;
|
||||
}
|
||||
#topcartlink {
|
||||
margin: 0;
|
||||
}
|
||||
#topcartlink .cart-label {
|
||||
display: none;
|
||||
}
|
||||
.header-links-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
.header-links > ul {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.user-dropdown ul {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.user-dropdown .fa {
|
||||
line-height: 16px;
|
||||
}
|
||||
/*** GLOBAL TABLES ***/
|
||||
.cart {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cart colgroup,
|
||||
.cart thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cart tbody {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cart tr {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin: 40px 0 0;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.cart td {
|
||||
display: block;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.cart td.remove-from-cart {
|
||||
margin: 0 0 15px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: #eee;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.cart td.product-picture {
|
||||
border-top: 1px solid #ddd;
|
||||
padding: 15px 10px 5px;
|
||||
}
|
||||
|
||||
.cart td.product {
|
||||
min-width: 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 5px 10px 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cart td.quantity {
|
||||
display: block;
|
||||
padding: 0 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.cart td.quantity label {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.cart td.unit-price,
|
||||
.cart td.subtotal {
|
||||
display: inline-block;
|
||||
padding: 20px 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.order-details-page .data-table {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.order-details-page .data-table colgroup,
|
||||
.order-details-page .data-table thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.order-details-page .data-table tbody {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.order-details-page .data-table tr {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin: 40px 0 0;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.order-details-page .data-table td {
|
||||
display: block;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.order-details-page .data-table td.product,
|
||||
.order-details-page .data-table td.tracking-number {
|
||||
min-width: 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 5px 10px 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/*** MOBILE NAVIGATION ***/
|
||||
|
||||
.menu-toggle {
|
||||
background: var(--theme-color) url('../images/menu-icon.png') right center no-repeat;
|
||||
padding: 15px;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.top-menu.notmobile {
|
||||
display: none;
|
||||
}
|
||||
.header-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: -110vw; /* Initially hidden */
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
|
||||
overflow-y: auto;
|
||||
transition: left 0.3s ease-in-out;
|
||||
z-index: 1000;
|
||||
padding: 40px 10px;
|
||||
border-radius: var(--itembox-picture-radius);
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
.close-header-menu {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 2px;
|
||||
font-size: 18px;
|
||||
color: var(--theme-color);
|
||||
background: var(--dark-bg);
|
||||
border: none;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
.header-menu.show {
|
||||
left: 0; /* Slide in when class "show" is added */
|
||||
}
|
||||
.top-menu > li {
|
||||
position: relative;
|
||||
margin: 1px 0;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.top-menu > li > a {
|
||||
display: block;
|
||||
min-height: 55px;
|
||||
padding: 18px;
|
||||
font-size: 15px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.top-menu > li > a:focus {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.top-menu .sublist {
|
||||
background-color: #fff;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: -110vw;
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
z-index: 1001;
|
||||
}
|
||||
.top-menu .sublist.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
||||
.top-menu .sublist li:not(:last-child) {
|
||||
border-bottom: 1px solid #ddd;
|
||||
position: relative;
|
||||
}
|
||||
.top-menu .sublist li a {
|
||||
display: block;
|
||||
padding: 15px 18px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sublist-toggle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
border-left: 1px solid #fff;
|
||||
padding: 15px;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: var(--dark);
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
font-family: FontAwesome;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.sublist-toggle::after {
|
||||
content: "\f061";
|
||||
font-weight: lighter;
|
||||
}
|
||||
.sublist .sublist-toggle {
|
||||
height: 49px;
|
||||
}
|
||||
|
||||
.sublist .sublist li {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.sublist .sublist .sublist li {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.block-category-navigation {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.block-account-navigation {
|
||||
float: none;
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
.write-review .review-rating {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.write-review .review-rating div.name-description {
|
||||
width: 100%;
|
||||
margin: 0 5px 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-review-box {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.user-dropdown .user-dropdown-toggle {
|
||||
font-size: 0;
|
||||
line-height: 1;
|
||||
min-width: 70px;
|
||||
}
|
||||
.user-dropdown .fa {
|
||||
margin: 0;
|
||||
}
|
||||
.header-links li {
|
||||
margin: 0;
|
||||
}
|
||||
.top-menu .sublist .parent-links {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
background: var(--dark);
|
||||
color: var(--white);
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
.top-menu .sublist .parent-links a {
|
||||
width: calc(100% - 30px);
|
||||
padding-block: 10px;
|
||||
}
|
||||
.top-menu .sublist .parent-links .close-sublist {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
font-size: 18px;
|
||||
color: var(--white);
|
||||
background: var(--dark-bg);
|
||||
border: none;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
border-left: 1px solid #888;
|
||||
}
|
||||
/*side bar for filter on catalog page*/
|
||||
.sidebar-toggle-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 30px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.sidebar-toggle-btn:hover {
|
||||
color: #007bff; /* Change to your preferred color on hover */
|
||||
}
|
||||
.side-2 {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: -102vw;
|
||||
width: 320px;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
transition: left 0.3s ease-in-out;
|
||||
z-index: 1001;
|
||||
padding: 50px 20px 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.side-2.sidebar-open {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Sidebar close button styles */
|
||||
.side-2 .sidebar-close-btn {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 2px;
|
||||
font-size: 18px;
|
||||
color: var(--theme-color);
|
||||
background: var(--dark-bg);
|
||||
border: 0;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.side-2 .sidebar-close-btn:hover {
|
||||
color: #f44336; /* Red color when hovered */
|
||||
}
|
||||
|
||||
/* Overlay styles */
|
||||
.sidebar-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.sidebar-overlay.overlay-active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
/*welcome topics*/
|
||||
.welcome-container {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
text-align: center;
|
||||
background: rgba(255,255,255,0.75);
|
||||
padding: 20px;
|
||||
}
|
||||
/*********** Homepage Features ***********/
|
||||
.feature-item {
|
||||
flex-direction: column !important;
|
||||
text-align: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.feature-item img, .feature-content {
|
||||
width: 100%;
|
||||
}
|
||||
.home-page-category-grid .title, .sub-category-grid .title {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,503 @@
|
|||
|
||||
@media all and (max-width: 1000px) {
|
||||
.inputs .gender,
|
||||
.inputs label {
|
||||
text-align: right;
|
||||
display: block;
|
||||
max-width: 400px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.inputs .gender span > * {
|
||||
margin: 0 0 0 6px;
|
||||
}
|
||||
|
||||
.login-page .customer-blocks > div {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.header .header-upper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
background: var(--dark-bg);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.header .header-upper .header-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.header .header-upper .header-logo .header-menu-toggle {
|
||||
display: block;
|
||||
font-size: 26px;
|
||||
color: var(--dark);
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.header .header-upper .header-logo > a {
|
||||
max-width: 110px;
|
||||
}
|
||||
|
||||
.header .header-upper > div {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.header .header-upper > .search-box {
|
||||
order: 2;
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.header .header-upper .search-box input.search-box-text {
|
||||
width: calc(100% - 46px);
|
||||
}
|
||||
|
||||
.header .header-selectors-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#topcartlink {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#topcartlink .cart-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-links-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.header-links > ul {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.user-dropdown ul {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
.user-dropdown .fa {
|
||||
line-height: 16px;
|
||||
}
|
||||
/*** GLOBAL TABLES ***/
|
||||
.cart {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cart colgroup,
|
||||
.cart thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cart tbody {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cart tr {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 100%;
|
||||
margin: 40px 0 0;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.cart td {
|
||||
display: block;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.cart td.remove-from-cart {
|
||||
margin: 0 0 15px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: #eee;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.cart td.product-picture {
|
||||
border-top: 1px solid #ddd;
|
||||
padding: 15px 10px 5px;
|
||||
}
|
||||
|
||||
.cart td.product {
|
||||
min-width: 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 5px 10px 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cart td.quantity {
|
||||
display: block;
|
||||
padding: 0 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.cart td.quantity label {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.cart td.unit-price,
|
||||
.cart td.subtotal {
|
||||
display: inline-block;
|
||||
padding: 20px 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.order-details-page .data-table {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.order-details-page .data-table colgroup,
|
||||
.order-details-page .data-table thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.order-details-page .data-table tbody {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.order-details-page .data-table tr {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 100%;
|
||||
margin: 40px 0 0;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.order-details-page .data-table td {
|
||||
display: block;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.order-details-page .data-table td.product,
|
||||
.order-details-page .data-table td.tracking-number {
|
||||
min-width: 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 5px 10px 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/*** MOBILE NAVIGATION ***/
|
||||
|
||||
.menu-toggle {
|
||||
background: var(--theme-color) url('../images/menu-icon.png') left center no-repeat;
|
||||
padding: 15px;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.top-menu.notmobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -110vw; /* Initially hidden */
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
|
||||
overflow-y: auto;
|
||||
transition: right 0.3s ease-in-out;
|
||||
z-index: 1000;
|
||||
padding: 40px 10px;
|
||||
border-radius: var(--itembox-picture-radius);
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.close-header-menu {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 2px;
|
||||
font-size: 18px;
|
||||
color: var(--theme-color);
|
||||
background: var(--dark-bg);
|
||||
border: none;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header-menu.show {
|
||||
right: 0; /* Slide in when class "show" is added */
|
||||
}
|
||||
|
||||
.top-menu > li {
|
||||
position: relative;
|
||||
margin: 1px 0;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.top-menu > li > a {
|
||||
display: block;
|
||||
min-height: 55px;
|
||||
padding: 18px;
|
||||
font-size: 15px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.top-menu > li > a:focus {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.top-menu .sublist {
|
||||
background-color: #fff;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -110vw;
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.top-menu .sublist.active {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
.top-menu .sublist li:not(:last-child) {
|
||||
border-bottom: 1px solid #ddd;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.top-menu .sublist li a {
|
||||
display: block;
|
||||
padding: 15px 18px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sublist-toggle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
border-right: 1px solid #fff;
|
||||
padding: 15px;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: var(--dark);
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
font-family: FontAwesome;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sublist-toggle::after {
|
||||
content: "\f061";
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.sublist .sublist-toggle {
|
||||
height: 49px;
|
||||
}
|
||||
|
||||
.sublist .sublist li {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.sublist .sublist .sublist li {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.block-category-navigation {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.block-account-navigation {
|
||||
float: none;
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
.write-review .review-rating {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.write-review .review-rating div.name-description {
|
||||
width: 100%;
|
||||
margin: 0 0 0 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-review-box {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.user-dropdown .user-dropdown-toggle {
|
||||
font-size: 0;
|
||||
line-height: 1;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.user-dropdown .fa {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-links li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.top-menu .sublist .parent-links {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
background: var(--dark);
|
||||
color: var(--white);
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.top-menu .sublist .parent-links a {
|
||||
width: calc(100% - 30px);
|
||||
padding-block: 10px;
|
||||
}
|
||||
|
||||
.top-menu .sublist .parent-links .close-sublist {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
font-size: 18px;
|
||||
color: var(--white);
|
||||
background: var(--dark-bg);
|
||||
border: none;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
border-right: 1px solid #888;
|
||||
}
|
||||
/*side bar for filter on catalog page*/
|
||||
.sidebar-toggle-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 30px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.sidebar-toggle-btn:hover {
|
||||
color: #007bff; /* Change to your preferred color on hover */
|
||||
}
|
||||
|
||||
.side-2 {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -102vw;
|
||||
width: 320px;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
transition: right 0.3s ease-in-out;
|
||||
z-index: 1001;
|
||||
padding: 50px 20px 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.side-2.sidebar-open {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* Sidebar close button styles */
|
||||
.side-2 .sidebar-close-btn {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 2px;
|
||||
font-size: 18px;
|
||||
color: var(--theme-color);
|
||||
background: var(--dark-bg);
|
||||
border: 0;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.side-2 .sidebar-close-btn:hover {
|
||||
color: #f44336; /* Red color when hovered */
|
||||
}
|
||||
|
||||
/* Overlay styles */
|
||||
.sidebar-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.sidebar-overlay.overlay-active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
/*welcome topics*/
|
||||
.welcome-container {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
text-align: center;
|
||||
background: rgba(255,255,255,0.75);
|
||||
padding: 20px;
|
||||
}
|
||||
/*********** Homepage Features ***********/
|
||||
.feature-item {
|
||||
flex-direction: column !important;
|
||||
text-align: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.feature-item img, .feature-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.home-page-category-grid .title, .sub-category-grid .title {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
|
||||
@media all and (max-width: 768px) {
|
||||
|
||||
|
||||
.header-selectors-wrapper {
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.header-selectors-wrapper > div {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.spice-categories .intro-text {
|
||||
font-size: 1rem;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.spice-categories .spice-item {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spice-categories .spice-item img,
|
||||
.spice-categories .spice-text {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.spice-categories .spice-text {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.spice-categories .spice-text h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.spice-categories .btn {
|
||||
padding: 10px 18px;
|
||||
}
|
||||
|
||||
.review-rating .name-description {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.write-review .review-rating div {
|
||||
text-align: center;
|
||||
padding-bottom: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
/*** ESTIMATE SHIPPING POPUP ***/
|
||||
|
||||
|
||||
.shipping-address {
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.address-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.estimate-shipping-row-item.address-item + .estimate-shipping-row-item.address-item {
|
||||
padding-left: 0px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.home-page-category-grid .title, .sub-category-grid .title {
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
/*********** Category Box ***********/
|
||||
.home-page-category-grid .item-grid .item-box:first-child {
|
||||
width: 100%;
|
||||
}
|
||||
.home-page-category-grid .item-grid .item-box:nth-child(2n+1) {
|
||||
clear: none;
|
||||
}
|
||||
.home-page-category-grid .item-grid .item-box:nth-child(2n+2) {
|
||||
clear: both;
|
||||
}
|
||||
.category-grid .item-grid .item-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/*********** product-box ***********/
|
||||
.item-box .details {
|
||||
padding: 0 5px;
|
||||
}
|
||||
.item-box .product-item .product-title {
|
||||
font-size: 16px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2; /* Limits to 2 lines */
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal;
|
||||
max-width: 100%; /* Adjust as needed */
|
||||
height: 50px;
|
||||
}
|
||||
.item-box .buttons {
|
||||
gap: 0;
|
||||
}
|
||||
.item-box .product-box-add-to-cart-button,
|
||||
.item-box .add-to-compare-list-button {
|
||||
font-size: 12px;
|
||||
}
|
||||
.item-box .product-box-add-to-cart-button::before,
|
||||
.item-box .add-to-compare-list-button::before {
|
||||
font-size: 12px;
|
||||
}
|
||||
.container {
|
||||
padding-inline: 30px;
|
||||
}
|
||||
|
||||
|
||||
/*********** footer ***********/
|
||||
.follow-us {
|
||||
text-align: left;
|
||||
}
|
||||
.follow-us .newsletter-email {
|
||||
padding-bottom: 0;
|
||||
border: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.follow-us > div {
|
||||
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.follow-us .social li:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
|
||||
@media all and (max-width: 768px) {
|
||||
|
||||
|
||||
.header-selectors-wrapper {
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.header-selectors-wrapper > div {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.spice-categories .intro-text {
|
||||
font-size: 1rem;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.spice-categories .spice-item {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spice-categories .spice-item img,
|
||||
.spice-categories .spice-text {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.spice-categories .spice-text {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.spice-categories .spice-text h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.spice-categories .btn {
|
||||
padding: 10px 18px;
|
||||
}
|
||||
|
||||
.review-rating .name-description {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.write-review .review-rating div {
|
||||
text-align: center;
|
||||
padding-bottom: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
/*** ESTIMATE SHIPPING POPUP ***/
|
||||
|
||||
|
||||
.shipping-address {
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.address-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.estimate-shipping-row-item.address-item + .estimate-shipping-row-item.address-item {
|
||||
padding-right: 0px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.home-page-category-grid .title, .sub-category-grid .title {
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
/*********** Category Box ***********/
|
||||
.home-page-category-grid .item-grid .item-box:first-child {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.home-page-category-grid .item-grid .item-box:nth-child(2n+1) {
|
||||
clear: none;
|
||||
}
|
||||
|
||||
.home-page-category-grid .item-grid .item-box:nth-child(2n+2) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.category-grid .item-grid .item-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/*********** product-box ***********/
|
||||
.item-box .details {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.item-box .product-item .product-title {
|
||||
font-size: 16px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2; /* Limits to 2 lines */
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal;
|
||||
max-width: 100%; /* Adjust as needed */
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.item-box .buttons {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.item-box .product-box-add-to-cart-button,
|
||||
.item-box .add-to-compare-list-button {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.item-box .product-box-add-to-cart-button::before,
|
||||
.item-box .add-to-compare-list-button::before {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-inline: 30px;
|
||||
}
|
||||
|
||||
|
||||
/*********** footer ***********/
|
||||
.follow-us {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.follow-us .newsletter-email {
|
||||
padding-bottom: 0;
|
||||
border: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.follow-us > div {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.follow-us .social li:first-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,5 @@
|
|||
@media all and (min-width: 1240px) {
|
||||
:root {
|
||||
--layout-outer-width: 1180px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@media all and (min-width: 1240px) {
|
||||
:root {
|
||||
--layout-outer-width: 1180px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
|
||||
@media all and (min-width: 1367px) {
|
||||
:root {
|
||||
--layout-outer-width : 1300px;
|
||||
}
|
||||
|
||||
/*** GLOBAL STYLES ***/
|
||||
|
||||
|
||||
html:not(.html-home-page) .master-wrapper-content,
|
||||
.html-home-page .topic-block,
|
||||
.html-home-page .home-page-category-grid,
|
||||
.html-home-page .news-list-homepage,
|
||||
.html-home-page .home-page-polls,
|
||||
.html-home-page .home-page-product-grid {
|
||||
width: var(--layout-outer-width);
|
||||
}
|
||||
|
||||
.inputs label {
|
||||
width: 430px;
|
||||
}
|
||||
|
||||
.center-2 .inputs label {
|
||||
width: 213px;
|
||||
}
|
||||
|
||||
.inputs.accept-consent label {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
/*** HEADER ***/
|
||||
|
||||
|
||||
.header .header-upper {
|
||||
width: var(--layout-outer-width);
|
||||
}
|
||||
|
||||
|
||||
/*** NAVIGATION ***/
|
||||
|
||||
|
||||
.header-menu .top-menu {
|
||||
width: var(--layout-outer-width);
|
||||
}
|
||||
|
||||
.header-menu > ul > li {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.header-menu > ul > li > a,
|
||||
.header-menu > ul > li > span {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
|
||||
/*** FOOTER ***/
|
||||
|
||||
|
||||
.footer-upper {
|
||||
width: var(--layout-outer-width);
|
||||
padding: 35px 30px;
|
||||
}
|
||||
|
||||
|
||||
.footer-lower {
|
||||
width: var(--layout-outer-width);
|
||||
padding: 25px 20px;
|
||||
}
|
||||
|
||||
|
||||
/*** PRODUCT REVIEWS ***/
|
||||
|
||||
|
||||
.product-review-item .review-title {
|
||||
max-width: 1050px;
|
||||
}
|
||||
|
||||
.write-review .review-rating div.name-description {
|
||||
margin: 0 5px 0 0;
|
||||
min-width: 430px;
|
||||
}
|
||||
|
||||
|
||||
/*** REGISTRATION, LOGIN, ACCOUNT ***/
|
||||
|
||||
|
||||
.login-page .returning-wrapper input[type="text"],
|
||||
.login-page .returning-wrapper input[type="email"],
|
||||
.login-page .returning-wrapper input[type="password"] {
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.registration-page .vat-note {
|
||||
margin-left: 385px;
|
||||
}
|
||||
|
||||
.customer-info-page .vat-note,
|
||||
.customer-info-page .vat-status,
|
||||
.customer-info-page .email-to-revalidate-note {
|
||||
margin-left: 225px;
|
||||
}
|
||||
|
||||
/*** SHOPPING CART ***/
|
||||
|
||||
|
||||
.cart-footer .totals {
|
||||
width: 395px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cart-footer .cart-collaterals {
|
||||
width: 760px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cart-footer .cart-collaterals .deals {
|
||||
float: left;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.cart-footer .cart-collaterals .shipping {
|
||||
float: right;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.cart-footer .estimate-shipping .inputs label {
|
||||
display: inline-block;
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.cart-footer .estimate-shipping .inputs input,
|
||||
.cart-footer .estimate-shipping .inputs select {
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
|
||||
/*** CHECKOUT ***/
|
||||
|
||||
|
||||
.shipping-method .method-list li,
|
||||
.payment-method .method-list li {
|
||||
margin: 20px 1%;
|
||||
}
|
||||
|
||||
.payment-info .info td:first-child {
|
||||
width: 375px !important;
|
||||
}
|
||||
|
||||
.payment-info .info td:only-child {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
|
||||
/*** FORUM & PROFILE ***/
|
||||
|
||||
|
||||
.forum-actions .pager,
|
||||
.topic-actions .pager {
|
||||
max-width: 600px !important;
|
||||
}
|
||||
|
||||
.topic-post .post-text {
|
||||
width: 930px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
|
||||
@media all and (min-width: 1367px) {
|
||||
:root {
|
||||
--layout-outer-width: 1300px;
|
||||
}
|
||||
|
||||
/*** GLOBAL STYLES ***/
|
||||
|
||||
|
||||
html:not(.html-home-page) .master-wrapper-content,
|
||||
.html-home-page .topic-block,
|
||||
.html-home-page .home-page-category-grid,
|
||||
.html-home-page .news-list-homepage,
|
||||
.html-home-page .home-page-polls,
|
||||
.html-home-page .home-page-product-grid {
|
||||
width: var(--layout-outer-width);
|
||||
}
|
||||
|
||||
.inputs label {
|
||||
width: 430px;
|
||||
}
|
||||
|
||||
.center-2 .inputs label {
|
||||
width: 213px;
|
||||
}
|
||||
|
||||
.inputs.accept-consent label {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
/*** HEADER ***/
|
||||
|
||||
|
||||
.header .header-upper {
|
||||
width: var(--layout-outer-width);
|
||||
}
|
||||
|
||||
|
||||
/*** NAVIGATION ***/
|
||||
|
||||
|
||||
.header-menu .top-menu {
|
||||
width: var(--layout-outer-width);
|
||||
}
|
||||
|
||||
.header-menu > ul > li {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.header-menu > ul > li > a,
|
||||
.header-menu > ul > li > span {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
|
||||
/*** FOOTER ***/
|
||||
|
||||
|
||||
.footer-upper {
|
||||
width: var(--layout-outer-width);
|
||||
padding: 35px 30px;
|
||||
}
|
||||
|
||||
|
||||
.footer-lower {
|
||||
width: var(--layout-outer-width);
|
||||
padding: 25px 20px;
|
||||
}
|
||||
|
||||
|
||||
/*** PRODUCT REVIEWS ***/
|
||||
|
||||
|
||||
.product-review-item .review-title {
|
||||
max-width: 1050px;
|
||||
}
|
||||
|
||||
.write-review .review-rating div.name-description {
|
||||
margin: 0 0 0 5px;
|
||||
min-width: 430px;
|
||||
}
|
||||
|
||||
|
||||
/*** REGISTRATION, LOGIN, ACCOUNT ***/
|
||||
|
||||
|
||||
.login-page .returning-wrapper input[type="text"],
|
||||
.login-page .returning-wrapper input[type="email"],
|
||||
.login-page .returning-wrapper input[type="password"] {
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.registration-page .vat-note {
|
||||
margin-right: 385px;
|
||||
}
|
||||
|
||||
.customer-info-page .vat-note,
|
||||
.customer-info-page .vat-status,
|
||||
.customer-info-page .email-to-revalidate-note {
|
||||
margin-right: 225px;
|
||||
}
|
||||
|
||||
/*** SHOPPING CART ***/
|
||||
|
||||
|
||||
.cart-footer .totals {
|
||||
width: 395px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cart-footer .cart-collaterals {
|
||||
width: 760px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cart-footer .cart-collaterals .deals {
|
||||
float: right;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.cart-footer .cart-collaterals .shipping {
|
||||
float: left;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.cart-footer .estimate-shipping .inputs label {
|
||||
display: inline-block;
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.cart-footer .estimate-shipping .inputs input,
|
||||
.cart-footer .estimate-shipping .inputs select {
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
|
||||
/*** CHECKOUT ***/
|
||||
|
||||
|
||||
.shipping-method .method-list li,
|
||||
.payment-method .method-list li {
|
||||
margin: 20px 1%;
|
||||
}
|
||||
|
||||
.payment-info .info td:first-child {
|
||||
width: 375px !important;
|
||||
}
|
||||
|
||||
.payment-info .info td:only-child {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
|
||||
/*** FORUM & PROFILE ***/
|
||||
|
||||
|
||||
.forum-actions .pager,
|
||||
.topic-actions .pager {
|
||||
max-width: 600px !important;
|
||||
}
|
||||
|
||||
.topic-post .post-text {
|
||||
width: 930px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
|
||||
@media all and (min-width: 481px) {
|
||||
:root {
|
||||
--layout-outer-width: 92%;
|
||||
}
|
||||
|
||||
/*** GLOBAL ***/
|
||||
|
||||
|
||||
html:not(.html-home-page) .master-wrapper-content,
|
||||
.html-home-page .topic-block,
|
||||
.html-home-page .home-page-category-grid,
|
||||
.html-home-page .news-list-homepage,
|
||||
.html-home-page .home-page-polls,
|
||||
.html-home-page .home-page-product-grid {
|
||||
width: var(--layout-outer-width);
|
||||
}
|
||||
|
||||
|
||||
/*** GLOBAL TABLES ***/
|
||||
|
||||
|
||||
.cart tr {
|
||||
width: 46%;
|
||||
margin: 40px 2% 0;
|
||||
}
|
||||
|
||||
.cart tr:nth-child(2n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.order-details-page .data-table tr {
|
||||
width: 46%;
|
||||
margin: 40px 2% 0;
|
||||
}
|
||||
|
||||
.order-details-page .data-table tr:nth-child(2n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
/*** HEADER ***/
|
||||
|
||||
|
||||
.header-selectors-wrapper > div {
|
||||
display: inline-block;
|
||||
width: 30%;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.search-box input.search-box-text {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.ui-autocomplete {
|
||||
width: 280px !important;
|
||||
}
|
||||
|
||||
.ui-autocomplete img {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
/*** FOOTER ***/
|
||||
|
||||
.follow-us,
|
||||
.footer-block {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.newsletter-email input[type="text"] {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
|
||||
/*** CATEGORY ***/
|
||||
|
||||
|
||||
.item-box {
|
||||
width: 48%;
|
||||
margin: 0 1% 50px;
|
||||
}
|
||||
|
||||
.item-box:nth-child(2n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.item-box .product-rating-box {
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
|
||||
.item-box .prices {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.item-box .product-title {
|
||||
min-height: 52px;
|
||||
font-size: 22px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
|
||||
/*** PRODUCT PAGE ***/
|
||||
|
||||
|
||||
.overview-buttons div {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin: 0 1px 2px;
|
||||
}
|
||||
|
||||
|
||||
/*** WISHLIST ***/
|
||||
|
||||
|
||||
.wishlist-content .button-2 {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
min-width: 140px;
|
||||
margin: 0 1px 5px;
|
||||
}
|
||||
|
||||
|
||||
/*** TOPICS ***/
|
||||
|
||||
|
||||
.enter-password-form input[type="password"] {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
|
||||
/*** FORUM & PROFILE ***/
|
||||
|
||||
.forums-header {
|
||||
background-color: #f9f9f9;
|
||||
padding: 30px 20px 20px;
|
||||
}
|
||||
|
||||
.ui-tabs-nav li {
|
||||
display: inline-block;
|
||||
min-width: 150px;
|
||||
margin: 0 5px -1px;
|
||||
/*override jQuery UI styles, do not delete doubled properties*/
|
||||
margin: 0 5px -1px !important;
|
||||
}
|
||||
|
||||
.private-messages-page .buttons .button-1,
|
||||
.private-messages-page .buttons .button-2,
|
||||
.private-message-view-page .buttons .button-1,
|
||||
.private-message-view-page .buttons .button-2 {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.topic-post .post-text {
|
||||
float: left;
|
||||
width: 90.5%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.forum-group .forum-table th.latest-post,
|
||||
.forum-group .forum-table th.topics,
|
||||
.forum-group .forum-table th.posts,
|
||||
.forum-group .forum-table td.latest-post,
|
||||
.forum-group .forum-table td.topics,
|
||||
.forum-group .forum-table td.posts {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.topic-group .forum-table th.latest-post,
|
||||
.topic-group .forum-table td.latest-post {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.forum-table td.image {
|
||||
max-width: 40px;
|
||||
}
|
||||
|
||||
.forum-table td.image div {
|
||||
max-width: 100%;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
|
||||
/*** ESTIMATE SHIPPING POPUP ***/
|
||||
|
||||
.estimate-shipping-popup {
|
||||
padding: 25px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
|
||||
@media all and (min-width: 481px) {
|
||||
:root {
|
||||
--layout-outer-width: 92%;
|
||||
}
|
||||
|
||||
/*** GLOBAL ***/
|
||||
|
||||
|
||||
html:not(.html-home-page) .master-wrapper-content,
|
||||
.html-home-page .topic-block,
|
||||
.html-home-page .home-page-category-grid,
|
||||
.html-home-page .news-list-homepage,
|
||||
.html-home-page .home-page-polls,
|
||||
.html-home-page .home-page-product-grid {
|
||||
width: var(--layout-outer-width);
|
||||
}
|
||||
|
||||
|
||||
/*** GLOBAL TABLES ***/
|
||||
|
||||
|
||||
.cart tr {
|
||||
width: 46%;
|
||||
margin: 40px 2% 0;
|
||||
}
|
||||
|
||||
.cart tr:nth-child(2n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.order-details-page .data-table tr {
|
||||
width: 46%;
|
||||
margin: 40px 2% 0;
|
||||
}
|
||||
|
||||
.order-details-page .data-table tr:nth-child(2n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
/*** HEADER ***/
|
||||
|
||||
|
||||
.header-selectors-wrapper > div {
|
||||
display: inline-block;
|
||||
width: 30%;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.search-box input.search-box-text {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.ui-autocomplete {
|
||||
width: 280px !important;
|
||||
}
|
||||
|
||||
.ui-autocomplete img {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
/*** FOOTER ***/
|
||||
|
||||
.follow-us,
|
||||
.footer-block {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
.newsletter-email input[type="text"] {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
|
||||
/*** CATEGORY ***/
|
||||
|
||||
|
||||
.item-box {
|
||||
width: 48%;
|
||||
margin: 0 1% 50px;
|
||||
}
|
||||
|
||||
.item-box:nth-child(2n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.item-box .product-rating-box {
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
|
||||
.item-box .prices {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.item-box .product-title {
|
||||
min-height: 52px;
|
||||
font-size: 22px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
|
||||
/*** PRODUCT PAGE ***/
|
||||
|
||||
|
||||
.overview-buttons div {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin: 0 1px 2px;
|
||||
}
|
||||
|
||||
|
||||
/*** WISHLIST ***/
|
||||
|
||||
|
||||
.wishlist-content .button-2 {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
min-width: 140px;
|
||||
margin: 0 1px 5px;
|
||||
}
|
||||
|
||||
|
||||
/*** TOPICS ***/
|
||||
|
||||
|
||||
.enter-password-form input[type="password"] {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
|
||||
/*** FORUM & PROFILE ***/
|
||||
|
||||
.forums-header {
|
||||
background-color: #f9f9f9;
|
||||
padding: 30px 20px 20px;
|
||||
}
|
||||
|
||||
.ui-tabs-nav li {
|
||||
display: inline-block;
|
||||
min-width: 150px;
|
||||
margin: 0 5px -1px;
|
||||
/*override jQuery UI styles, do not delete doubled properties*/
|
||||
margin: 0 5px -1px !important;
|
||||
}
|
||||
|
||||
.private-messages-page .buttons .button-1,
|
||||
.private-messages-page .buttons .button-2,
|
||||
.private-message-view-page .buttons .button-1,
|
||||
.private-message-view-page .buttons .button-2 {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.topic-post .post-text {
|
||||
float: right;
|
||||
width: 90.5%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.forum-group .forum-table th.latest-post,
|
||||
.forum-group .forum-table th.topics,
|
||||
.forum-group .forum-table th.posts,
|
||||
.forum-group .forum-table td.latest-post,
|
||||
.forum-group .forum-table td.topics,
|
||||
.forum-group .forum-table td.posts {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.topic-group .forum-table th.latest-post,
|
||||
.topic-group .forum-table td.latest-post {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.forum-table td.image {
|
||||
max-width: 40px;
|
||||
}
|
||||
|
||||
.forum-table td.image div {
|
||||
max-width: 100%;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
|
||||
/*** ESTIMATE SHIPPING POPUP ***/
|
||||
|
||||
.estimate-shipping-popup {
|
||||
padding: 25px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,780 @@
|
|||
|
||||
@media all and (min-width: 769px) {
|
||||
:root {
|
||||
--layout-outer-width: 94%;
|
||||
}
|
||||
/* Reverse Layout for Even Items */
|
||||
.spice-categories .spice-item:nth-child(even) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
/**** GLOBAL ***/
|
||||
|
||||
|
||||
html:not(.html-home-page) .master-wrapper-content,
|
||||
.html-home-page .topic-block,
|
||||
.html-home-page .home-page-category-grid,
|
||||
.html-home-page .news-list-homepage,
|
||||
.html-home-page .home-page-polls,
|
||||
.html-home-page .home-page-product-grid {
|
||||
width: var(--layout-outer-width);
|
||||
}
|
||||
|
||||
.home-page-polls li {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
|
||||
/**** GLOBAL TABLES ***/
|
||||
|
||||
|
||||
.cart tr {
|
||||
width: 31.33333%;
|
||||
margin: 40px 1% 0;
|
||||
}
|
||||
|
||||
.cart tr:nth-child(2n+1) {
|
||||
clear: none;
|
||||
}
|
||||
|
||||
.cart tr:nth-child(3n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.order-details-page .data-table tr {
|
||||
width: 31.33333%;
|
||||
margin: 40px 1% 0;
|
||||
}
|
||||
|
||||
.order-details-page .data-table tr:nth-child(2n+1) {
|
||||
clear: none;
|
||||
}
|
||||
|
||||
.order-details-page .data-table tr:nth-child(3n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
/*** HEADER ***/
|
||||
|
||||
|
||||
.header-selectors-wrapper > div {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
|
||||
/*** FOOTER ***/
|
||||
|
||||
|
||||
.footer-block {
|
||||
display: inline-block;
|
||||
width: 25.33333%;
|
||||
margin: 0 4%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.footer-block .title {
|
||||
margin: 0 0 15px;
|
||||
background: none;
|
||||
padding: 0;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.footer-block .list {
|
||||
display: block !important; /* prevents toggle display:none on resize */
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
.footer-block .title strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
.footer-block .list li {
|
||||
padding: 5px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.footer-block .list a {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/*footer ui*/
|
||||
.follow-us {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
flex-wrap: wrap;
|
||||
padding-block: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.follow-us > div {
|
||||
width: calc(33% - 20px);
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.follow-us .title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.newsletter-email {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border: 0;
|
||||
}
|
||||
/*** Homepage Categories TABLES ***/
|
||||
/* Target only the home page category grid */
|
||||
.home-page-category-grid .category-item {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.home-page-category-grid .item-box .picture,
|
||||
.home-page-category-grid .item-box .picture a {
|
||||
position: static;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.home-page-category-grid .item-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* Style for each item */
|
||||
.home-page-category-grid .item-grid .item-box {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
grid-column: span 2;
|
||||
grid-row: span 1;
|
||||
}
|
||||
|
||||
.home-page-category-grid .item-box:nth-child(5n + 4),
|
||||
.home-page-category-grid .item-box:nth-child(5n + 5) {
|
||||
grid-column: span 3;
|
||||
grid-row: span 1;
|
||||
}
|
||||
/* Every first item in a set of 5 spans 2 columns and 2 rows */
|
||||
.home-page-category-grid .item-box:nth-child(5n + 1) {
|
||||
grid-column: span 4;
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
/*** CATEGORY ***/
|
||||
|
||||
|
||||
.product-selectors {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.product-selectors .product-viewmode {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.product-selectors .product-viewmode span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-selectors .product-viewmode a {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 32px;
|
||||
margin: 0 0 0 12px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.product-selectors .product-viewmode a.grid {
|
||||
background-image: url('../images/view-grid.png');
|
||||
}
|
||||
|
||||
.product-selectors .product-viewmode a.list {
|
||||
background-image: url('../images/view-list.png');
|
||||
}
|
||||
|
||||
.product-selectors .product-viewmode a.selected {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.item-box {
|
||||
width: 47%;
|
||||
margin: 0 1.5% 50px;
|
||||
}
|
||||
|
||||
.category-grid .item-box:nth-child(2n+1) {
|
||||
clear: none;
|
||||
}
|
||||
|
||||
.category-grid .item-box:nth-child(3n+1) {
|
||||
clear: both;
|
||||
}
|
||||
.item-box:nth-child(n+1) {
|
||||
clear: none;
|
||||
}
|
||||
|
||||
.item-box:nth-child(2n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.product-list .item-box {
|
||||
float: none;
|
||||
width: auto;
|
||||
margin: 0 5px 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.product-list .item-box:not(:last-child) {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.product-list .item-box .product-item:after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.product-list .item-box .picture {
|
||||
float: left;
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.product-list .item-box:hover .picture a img,
|
||||
.product-list .item-box:focus .picture a img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.product-list .item-box .picture:hover a img,
|
||||
.product-list .item-box .picture:focus a img {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.product-list .item-box .picture ~ .buttons,
|
||||
.product-list .item-box .picture + .details {
|
||||
margin: 0 0 0 240px;
|
||||
}
|
||||
|
||||
.product-list .item-box .product-title {
|
||||
height: auto;
|
||||
padding: 10px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.product-list .item-box .description {
|
||||
display: block;
|
||||
margin: 0 0 10px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.product-list .item-box .prices {
|
||||
min-height: initial;
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
|
||||
.product-list .item-box .buttons {
|
||||
}
|
||||
|
||||
.product-list .item-box .product-box-add-to-cart-button {
|
||||
width: auto;
|
||||
min-width: 150px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.product-list .item-box .add-to-compare-list-button,
|
||||
.product-list .item-box .add-to-wishlist-button {
|
||||
width: auto;
|
||||
padding-inline: 30px;
|
||||
}
|
||||
|
||||
|
||||
/*** PRODUCT PAGE ***/
|
||||
|
||||
|
||||
.gallery {
|
||||
width: 550px;
|
||||
}
|
||||
|
||||
.variant-picture {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.variant-picture + .variant-overview {
|
||||
width: auto;
|
||||
margin: 0 0 0 240px;
|
||||
}
|
||||
|
||||
.variant-overview {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
/*** PRODUCT REVIEWS ***/
|
||||
|
||||
|
||||
.product-review-item .review-title {
|
||||
float: left;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.product-review-item .product-review-box {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.write-review .review-rating div {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 5px;
|
||||
cursor: default;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*** REGISTRATION, LOGIN, ACCOUNT ***/
|
||||
|
||||
|
||||
.address-list-page .section,
|
||||
.order-list-page .section,
|
||||
.return-request-list-page .section {
|
||||
display: inline-block;
|
||||
width: 45%;
|
||||
margin: 20px 1%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.recurring-payments {
|
||||
width: 100% !important;
|
||||
margin: 20px 0 !important;
|
||||
}
|
||||
|
||||
|
||||
/*** SHOPPING CART ***/
|
||||
|
||||
|
||||
.order-progress {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.order-progress li {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.order-progress a {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.cart-options .common-buttons {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.cart-options .checkout-attributes,
|
||||
.cart-options .selected-checkout-attributes {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.cart-footer .totals {
|
||||
float: right;
|
||||
width: 45%;
|
||||
margin: 0 2.5%;
|
||||
}
|
||||
|
||||
.cart-footer .terms-of-service {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cart-footer .checkout-buttons,
|
||||
.cart-footer .addon-buttons {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.cart-footer .cart-collaterals {
|
||||
float: left;
|
||||
width: 45%;
|
||||
margin: 0 2.5%;
|
||||
}
|
||||
|
||||
.cart-footer .cart-collaterals div,
|
||||
.cart-footer .cart-collaterals label {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cart-footer .estimate-shipping label {
|
||||
display: block;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.cart-footer .estimate-shipping .buttons {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
/*** CHECKOUT ***/
|
||||
|
||||
|
||||
.checkout-page .selected-checkout-attributes {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.checkout-page .cart-footer .totals {
|
||||
max-width: 350px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.checkout-page .address-grid {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.checkout-page .address-item {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
width: 48%;
|
||||
margin: 0 1% 40px;
|
||||
}
|
||||
|
||||
.shipping-method .method-list li,
|
||||
.payment-method .method-list li {
|
||||
display: inline-block;
|
||||
width: 25%;
|
||||
margin: 20px 2%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.shipping-method .method-name {
|
||||
background-color: #f6f6f6;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.payment-method .payment-logo {
|
||||
display: block;
|
||||
background-color: #f6f6f6;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.payment-method .payment-details {
|
||||
display: block;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
margin: 10px 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.payment-info .info {
|
||||
padding: 30px 75px;
|
||||
}
|
||||
|
||||
.order-review-data,
|
||||
.order-details-area,
|
||||
.shipment-details-area {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.order-review-data > div,
|
||||
.order-details-area > div,
|
||||
.shipment-details-area > div {
|
||||
float: left;
|
||||
width: 48%;
|
||||
margin: 0 1% 40px;
|
||||
}
|
||||
|
||||
|
||||
/*** ORDER DETAILS & SHIPPING DETAILS ***/
|
||||
|
||||
|
||||
.order-details-page .section.options {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.order-details-page .selected-checkout-attributes {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.order-details-page .tax-shipping-info {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.order-details-page .totals {
|
||||
float: right;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.shipment-details-page .tracking-number .tracking-url {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
|
||||
|
||||
/*** BLOG & NEWS ***/
|
||||
|
||||
|
||||
.blog-posts .tags {
|
||||
float: right;
|
||||
width: 80%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.blog-posts .buttons {
|
||||
float: left;
|
||||
width: 20%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.new-comment {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.new-comment .buttons {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comment-list .comment {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.comment-list .comment:last-child {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.comment-info {
|
||||
display: table-cell;
|
||||
width: 15%;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.comment-info .username {
|
||||
min-height: 40px;
|
||||
margin: 0;
|
||||
border: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comment-info .avatar {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.comment-info .avatar img {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
display: table-cell;
|
||||
width: 85%;
|
||||
border-left: 1px solid #ddd;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.comment-time {
|
||||
min-height: 40px;
|
||||
margin: 0;
|
||||
background-color: #f6f6f6;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.comment-title {
|
||||
margin: 0 0 -20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.comment-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
||||
/*** FORUM & PROFILE ***/
|
||||
|
||||
|
||||
.forum-actions,
|
||||
.topic-actions {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.forum-actions .actions,
|
||||
.topic-actions .actions {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.forum-actions .pager,
|
||||
.topic-actions .pager {
|
||||
float: right;
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.forum-actions .pager li,
|
||||
.topic-actions .pager li {
|
||||
margin: 2px 4px;
|
||||
}
|
||||
|
||||
.forum-actions .pager.upper {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.topic-actions.lower .actions {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.topic-posts {
|
||||
margin: 0 0 30px;
|
||||
}
|
||||
|
||||
.topic-post {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.topic-post .post-info {
|
||||
display: table-cell;
|
||||
width: 15%;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.topic-post .user-info {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.topic-post .username {
|
||||
min-height: 40px;
|
||||
margin: 0;
|
||||
border: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.topic-post .avatar {
|
||||
margin: auto;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.topic-post .avatar img {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
}
|
||||
|
||||
.topic-post .user-stats li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.topic-post .send-pm {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.topic-post .pm-button,
|
||||
.profile-info-box .pm-button {
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.topic-post .post-content {
|
||||
display: table-cell;
|
||||
width: 85%;
|
||||
border-left: 1px solid #ddd;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.topic-post .post-head {
|
||||
min-height: 40px;
|
||||
overflow: hidden;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.topic-post .post-time {
|
||||
float: left;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.topic-post .post-actions {
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.topic-post .post-actions a {
|
||||
margin: 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.topic-post .post-actions .manage-post a {
|
||||
}
|
||||
|
||||
.topic-post .post-actions .quote-post a {
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.topic-post .post-actions a.post-link-button {
|
||||
margin: 0 0 0 10px;
|
||||
border-left: 1px solid #ddd;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.topic-post .post-text {
|
||||
padding: 20px 5px;
|
||||
}
|
||||
|
||||
.topic-post .post-vote {
|
||||
padding: 20px 0 20px 15px;
|
||||
}
|
||||
|
||||
.forum-table th.replies,
|
||||
.forum-table th.views,
|
||||
.forum-table th.votes,
|
||||
.forum-table td.replies,
|
||||
.forum-table td.views,
|
||||
.forum-table td.votes {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.forum-table td.image {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.forum-table td.image div {
|
||||
max-width: none;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.ui-tabs-nav {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ui-tabs-nav li {
|
||||
margin: 0 10px -1px 0;
|
||||
/*override jQuery UI styles, do not delete doubled properties*/
|
||||
margin: 0 10px -1px 0 !important;
|
||||
}
|
||||
|
||||
.profile-info-box .avatar {
|
||||
float: left;
|
||||
margin: 0 15px 15px 0;
|
||||
}
|
||||
|
||||
.profile-info-box .profile-stats {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.profile-info-box .title {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.profile-info-box .send-pm {
|
||||
clear: both;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,783 @@
|
|||
|
||||
@media all and (min-width: 769px) {
|
||||
:root {
|
||||
--layout-outer-width: 94%;
|
||||
}
|
||||
/* Reverse Layout for Even Items */
|
||||
.spice-categories .spice-item:nth-child(even) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
/**** GLOBAL ***/
|
||||
|
||||
|
||||
html:not(.html-home-page) .master-wrapper-content,
|
||||
.html-home-page .topic-block,
|
||||
.html-home-page .home-page-category-grid,
|
||||
.html-home-page .news-list-homepage,
|
||||
.html-home-page .home-page-polls,
|
||||
.html-home-page .home-page-product-grid {
|
||||
width: var(--layout-outer-width);
|
||||
}
|
||||
|
||||
.home-page-polls li {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
|
||||
/**** GLOBAL TABLES ***/
|
||||
|
||||
|
||||
.cart tr {
|
||||
width: 31.33333%;
|
||||
margin: 40px 1% 0;
|
||||
}
|
||||
|
||||
.cart tr:nth-child(2n+1) {
|
||||
clear: none;
|
||||
}
|
||||
|
||||
.cart tr:nth-child(3n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.order-details-page .data-table tr {
|
||||
width: 31.33333%;
|
||||
margin: 40px 1% 0;
|
||||
}
|
||||
|
||||
.order-details-page .data-table tr:nth-child(2n+1) {
|
||||
clear: none;
|
||||
}
|
||||
|
||||
.order-details-page .data-table tr:nth-child(3n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
/*** HEADER ***/
|
||||
|
||||
|
||||
.header-selectors-wrapper > div {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
|
||||
/*** FOOTER ***/
|
||||
|
||||
|
||||
.footer-block {
|
||||
display: inline-block;
|
||||
width: 25.33333%;
|
||||
margin: 0 4%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.footer-block .title {
|
||||
margin: 0 0 15px;
|
||||
background: none;
|
||||
padding: 0;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.footer-block .list {
|
||||
display: block !important; /* prevents toggle display:none on resize */
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer-block .title strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.footer-block .list li {
|
||||
padding: 5px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.footer-block .list a {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/*footer ui*/
|
||||
.follow-us {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
flex-wrap: wrap;
|
||||
padding-block: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.follow-us > div {
|
||||
width: calc(33% - 20px);
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.follow-us .title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.newsletter-email {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border: 0;
|
||||
}
|
||||
/*** Homepage Categories TABLES ***/
|
||||
/* Target only the home page category grid */
|
||||
.home-page-category-grid .category-item {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.home-page-category-grid .item-box .picture,
|
||||
.home-page-category-grid .item-box .picture a {
|
||||
position: static;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.home-page-category-grid .item-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* Style for each item */
|
||||
.home-page-category-grid .item-grid .item-box {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
grid-column: span 2;
|
||||
grid-row: span 1;
|
||||
}
|
||||
|
||||
.home-page-category-grid .item-box:nth-child(5n + 4),
|
||||
.home-page-category-grid .item-box:nth-child(5n + 5) {
|
||||
grid-column: span 3;
|
||||
grid-row: span 1;
|
||||
}
|
||||
/* Every first item in a set of 5 spans 2 columns and 2 rows */
|
||||
.home-page-category-grid .item-box:nth-child(5n + 1) {
|
||||
grid-column: span 4;
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
/*** CATEGORY ***/
|
||||
|
||||
|
||||
.product-selectors {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.product-selectors .product-viewmode {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.product-selectors .product-viewmode span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-selectors .product-viewmode a {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 32px;
|
||||
margin: 0 12px 0 0;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.product-selectors .product-viewmode a.grid {
|
||||
background-image: url('../images/view-grid.png');
|
||||
}
|
||||
|
||||
.product-selectors .product-viewmode a.list {
|
||||
background-image: url('../images/view-list.png');
|
||||
}
|
||||
|
||||
.product-selectors .product-viewmode a.selected {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.item-box {
|
||||
width: 47%;
|
||||
margin: 0 1.5% 50px;
|
||||
}
|
||||
|
||||
.category-grid .item-box:nth-child(2n+1) {
|
||||
clear: none;
|
||||
}
|
||||
|
||||
.category-grid .item-box:nth-child(3n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.item-box:nth-child(n+1) {
|
||||
clear: none;
|
||||
}
|
||||
|
||||
.item-box:nth-child(2n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.product-list .item-box {
|
||||
float: none;
|
||||
width: auto;
|
||||
margin: 0 5px 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.product-list .item-box:not(:last-child) {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.product-list .item-box .product-item:after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.product-list .item-box .picture {
|
||||
float: right;
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.product-list .item-box:hover .picture a img,
|
||||
.product-list .item-box:focus .picture a img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.product-list .item-box .picture:hover a img,
|
||||
.product-list .item-box .picture:focus a img {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.product-list .item-box .picture ~ .buttons,
|
||||
.product-list .item-box .picture + .details {
|
||||
margin: 0 240px 0 0;
|
||||
}
|
||||
|
||||
.product-list .item-box .product-title {
|
||||
height: auto;
|
||||
padding: 10px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.product-list .item-box .description {
|
||||
display: block;
|
||||
margin: 0 0 10px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.product-list .item-box .prices {
|
||||
min-height: initial;
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
|
||||
.product-list .item-box .buttons {
|
||||
}
|
||||
|
||||
.product-list .item-box .product-box-add-to-cart-button {
|
||||
width: auto;
|
||||
min-width: 150px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.product-list .item-box .add-to-compare-list-button,
|
||||
.product-list .item-box .add-to-wishlist-button {
|
||||
width: auto;
|
||||
padding-inline: 30px;
|
||||
}
|
||||
|
||||
|
||||
/*** PRODUCT PAGE ***/
|
||||
|
||||
|
||||
.gallery {
|
||||
width: 550px;
|
||||
}
|
||||
|
||||
.variant-picture {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.variant-picture + .variant-overview {
|
||||
width: auto;
|
||||
margin: 0 240px 0 0;
|
||||
}
|
||||
|
||||
.variant-overview {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
/*** PRODUCT REVIEWS ***/
|
||||
|
||||
|
||||
.product-review-item .review-title {
|
||||
float: right;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.product-review-item .product-review-box {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.write-review .review-rating div {
|
||||
display: inline-block;
|
||||
margin: 0 5px 0 0;
|
||||
cursor: default;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*** REGISTRATION, LOGIN, ACCOUNT ***/
|
||||
|
||||
|
||||
.address-list-page .section,
|
||||
.order-list-page .section,
|
||||
.return-request-list-page .section {
|
||||
display: inline-block;
|
||||
width: 45%;
|
||||
margin: 20px 1%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.recurring-payments {
|
||||
width: 100% !important;
|
||||
margin: 20px 0 !important;
|
||||
}
|
||||
|
||||
|
||||
/*** SHOPPING CART ***/
|
||||
|
||||
|
||||
.order-progress {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.order-progress li {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.order-progress a {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.cart-options .common-buttons {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cart-options .checkout-attributes,
|
||||
.cart-options .selected-checkout-attributes {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.cart-footer .totals {
|
||||
float: left;
|
||||
width: 45%;
|
||||
margin: 0 2.5%;
|
||||
}
|
||||
|
||||
.cart-footer .terms-of-service {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.cart-footer .checkout-buttons,
|
||||
.cart-footer .addon-buttons {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cart-footer .cart-collaterals {
|
||||
float: right;
|
||||
width: 45%;
|
||||
margin: 0 2.5%;
|
||||
}
|
||||
|
||||
.cart-footer .cart-collaterals div,
|
||||
.cart-footer .cart-collaterals label {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.cart-footer .estimate-shipping label {
|
||||
display: block;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.cart-footer .estimate-shipping .buttons {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
/*** CHECKOUT ***/
|
||||
|
||||
|
||||
.checkout-page .selected-checkout-attributes {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.checkout-page .cart-footer .totals {
|
||||
max-width: 350px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.checkout-page .address-grid {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.checkout-page .address-item {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
width: 48%;
|
||||
margin: 0 1% 40px;
|
||||
}
|
||||
|
||||
.shipping-method .method-list li,
|
||||
.payment-method .method-list li {
|
||||
display: inline-block;
|
||||
width: 25%;
|
||||
margin: 20px 2%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.shipping-method .method-name {
|
||||
background-color: #f6f6f6;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.payment-method .payment-logo {
|
||||
display: block;
|
||||
background-color: #f6f6f6;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.payment-method .payment-details {
|
||||
display: block;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
margin: 10px 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.payment-info .info {
|
||||
padding: 30px 75px;
|
||||
}
|
||||
|
||||
.order-review-data,
|
||||
.order-details-area,
|
||||
.shipment-details-area {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.order-review-data > div,
|
||||
.order-details-area > div,
|
||||
.shipment-details-area > div {
|
||||
float: right;
|
||||
width: 48%;
|
||||
margin: 0 1% 40px;
|
||||
}
|
||||
|
||||
|
||||
/*** ORDER DETAILS & SHIPPING DETAILS ***/
|
||||
|
||||
|
||||
.order-details-page .section.options {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.order-details-page .selected-checkout-attributes {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.order-details-page .tax-shipping-info {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.order-details-page .totals {
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.shipment-details-page .tracking-number .tracking-url {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
|
||||
|
||||
/*** BLOG & NEWS ***/
|
||||
|
||||
|
||||
.blog-posts .tags {
|
||||
float: left;
|
||||
width: 80%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.blog-posts .buttons {
|
||||
float: right;
|
||||
width: 20%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.new-comment {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.new-comment .buttons {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comment-list .comment {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.comment-list .comment:last-child {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.comment-info {
|
||||
display: table-cell;
|
||||
width: 15%;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.comment-info .username {
|
||||
min-height: 40px;
|
||||
margin: 0;
|
||||
border: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comment-info .avatar {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.comment-info .avatar img {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
display: table-cell;
|
||||
width: 85%;
|
||||
border-right: 1px solid #ddd;
|
||||
vertical-align: top;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.comment-time {
|
||||
min-height: 40px;
|
||||
margin: 0;
|
||||
background-color: #f6f6f6;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.comment-title {
|
||||
margin: 0 0 -20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.comment-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
||||
/*** FORUM & PROFILE ***/
|
||||
|
||||
|
||||
.forum-actions,
|
||||
.topic-actions {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.forum-actions .actions,
|
||||
.topic-actions .actions {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.forum-actions .pager,
|
||||
.topic-actions .pager {
|
||||
float: left;
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.forum-actions .pager li,
|
||||
.topic-actions .pager li {
|
||||
margin: 2px 4px;
|
||||
}
|
||||
|
||||
.forum-actions .pager.upper {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.topic-actions.lower .actions {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.topic-posts {
|
||||
margin: 0 0 30px;
|
||||
}
|
||||
|
||||
.topic-post {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.topic-post .post-info {
|
||||
display: table-cell;
|
||||
width: 15%;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.topic-post .user-info {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.topic-post .username {
|
||||
min-height: 40px;
|
||||
margin: 0;
|
||||
border: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.topic-post .avatar {
|
||||
margin: auto;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.topic-post .avatar img {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
}
|
||||
|
||||
.topic-post .user-stats li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.topic-post .send-pm {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.topic-post .pm-button,
|
||||
.profile-info-box .pm-button {
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.topic-post .post-content {
|
||||
display: table-cell;
|
||||
width: 85%;
|
||||
border-right: 1px solid #ddd;
|
||||
vertical-align: top;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.topic-post .post-head {
|
||||
min-height: 40px;
|
||||
overflow: hidden;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.topic-post .post-time {
|
||||
float: right;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.topic-post .post-actions {
|
||||
float: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.topic-post .post-actions a {
|
||||
margin: 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.topic-post .post-actions .manage-post a {
|
||||
}
|
||||
|
||||
.topic-post .post-actions .quote-post a {
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.topic-post .post-actions a.post-link-button {
|
||||
margin: 0 10px 0 0;
|
||||
border-right: 1px solid #ddd;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.topic-post .post-text {
|
||||
padding: 20px 5px;
|
||||
}
|
||||
|
||||
.topic-post .post-vote {
|
||||
padding: 20px 15px 20px 0;
|
||||
}
|
||||
|
||||
.forum-table th.replies,
|
||||
.forum-table th.views,
|
||||
.forum-table th.votes,
|
||||
.forum-table td.replies,
|
||||
.forum-table td.views,
|
||||
.forum-table td.votes {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.forum-table td.image {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.forum-table td.image div {
|
||||
max-width: none;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.ui-tabs-nav {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ui-tabs-nav li {
|
||||
margin: 0 0 -1px 10px;
|
||||
/*override jQuery UI styles, do not delete doubled properties*/
|
||||
margin: 0 0 -1px 10px !important;
|
||||
}
|
||||
|
||||
.profile-info-box .avatar {
|
||||
float: right;
|
||||
margin: 0 0 15px 15px;
|
||||
}
|
||||
|
||||
.profile-info-box .profile-stats {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.profile-info-box .title {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.profile-info-box .send-pm {
|
||||
clear: both;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,6 @@
|
|||
body {
|
||||
}
|
||||
:root {
|
||||
--theme-color: #2d7a3a;
|
||||
--active-color: #f4a236;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 673 B |
Binary file not shown.
|
After Width: | Height: | Size: 206 B |
Binary file not shown.
|
After Width: | Height: | Size: 985 B |
Binary file not shown.
|
After Width: | Height: | Size: 987 B |
Binary file not shown.
|
After Width: | Height: | Size: 989 B |
Binary file not shown.
|
After Width: | Height: | Size: 199 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 943 B |
Binary file not shown.
|
After Width: | Height: | Size: 348 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 494 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1022 B |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 823 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1002 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 975 B |
Binary file not shown.
|
After Width: | Height: | Size: 989 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 990 B |
Binary file not shown.
|
After Width: | Height: | Size: 453 B |
Binary file not shown.
|
After Width: | Height: | Size: 450 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 677 B |
Binary file not shown.
|
After Width: | Height: | Size: 1022 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 398 B |
Binary file not shown.
|
After Width: | Height: | Size: 276 B |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 959 B |
Binary file not shown.
|
After Width: | Height: | Size: 980 B |
Binary file not shown.
|
After Width: | Height: | Size: 743 B |
Binary file not shown.
|
After Width: | Height: | Size: 180 B |
Binary file not shown.
|
After Width: | Height: | Size: 491 B |
Binary file not shown.
|
After Width: | Height: | Size: 182 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 777 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 337 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 508 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 446 B |
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../css/styles.css">
|
||||
<link rel="stylesheet" href="../css/responsive-min-769.css">
|
||||
</head>
|
||||
<body>
|
||||
<section class="feature-highlights">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Why Choose FruitBank?</h2>
|
||||
|
||||
<div class="feature-item">
|
||||
<img src="/images/uploaded/freshness.jpg" alt="Farm Fresh Guarantee">
|
||||
<div class="feature-content">
|
||||
<h3>Farm Fresh, Every Day</h3>
|
||||
<p>Direct sourcing from trusted growers means your produce arrives at peak freshness and flavour.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature-item">
|
||||
<img src="/images/uploaded/delivery.jpg" alt="Reliable Wholesale Delivery">
|
||||
<div class="feature-content">
|
||||
<h3>Next-Day Wholesale Delivery</h3>
|
||||
<p>Temperature-controlled logistics ensure your order arrives fresh, on time, every time.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature-item">
|
||||
<img src="/images/uploaded/variety.jpg" alt="Wide Selection of Produce">
|
||||
<div class="feature-content">
|
||||
<h3>Unmatched Variety</h3>
|
||||
<p>From everyday staples to exotic specialities — over 500 lines of fruit and vegetables year-round.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature-item">
|
||||
<img src="/images/uploaded/sustainable.jpg" alt="Sustainable Sourcing">
|
||||
<div class="feature-content">
|
||||
<h3>Sustainably Sourced</h3>
|
||||
<p>We partner with growers who share our commitment to responsible farming and reduced food waste.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../css/styles.css">
|
||||
<link rel="stylesheet" href="../css/responsive-min-769.css">
|
||||
</head>
|
||||
<body>
|
||||
<section class="welcome-section">
|
||||
<div class="welcome-container">
|
||||
<div class="welcome-image"><img src="/images/uploaded/fruitbank-welcome.webp" alt="About FruitBank"></div>
|
||||
<div class="welcome-text">
|
||||
<h1>Welcome to FruitBank</h1>
|
||||
<h2>Your Trusted Wholesale Produce Partner</h2>
|
||||
<p>
|
||||
At FruitBank, we connect growers with businesses — delivering the freshest fruit and vegetables to restaurants, retailers, and caterers across the region. Quality you can see, taste, and trust.
|
||||
</p>
|
||||
<p>
|
||||
Whether you need everyday essentials or seasonal specialities, our expert team hand-selects every item to meet the highest standards. Partner with us and taste the difference.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
@model CategoryModel
|
||||
|
||||
@using Nop.Core.Domain.Catalog
|
||||
@using Nop.Core.Domain.Common
|
||||
@using Nop.Core.Domain.Seo
|
||||
|
||||
@inject Nop.Core.IWebHelper webHelper
|
||||
@inject SeoSettings seoSettings
|
||||
@inject CommonSettings commonSettings
|
||||
|
||||
@{
|
||||
Layout = "_ColumnsTwo";
|
||||
|
||||
//title
|
||||
NopHtml.AddTitleParts(!string.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : Model.Name);
|
||||
//meta
|
||||
NopHtml.AddMetaDescriptionParts(Model.MetaDescription);
|
||||
NopHtml.AddMetaKeywordParts(Model.MetaKeywords);
|
||||
//page class
|
||||
NopHtml.AppendPageCssClassParts("html-category-page");
|
||||
|
||||
if (seoSettings.CanonicalUrlsEnabled)
|
||||
{
|
||||
var categoryUrl = Url.RouteUrl<Category>(new { SeName = Model.SeName }, webHelper.GetCurrentRequestProtocol()).ToLowerInvariant();
|
||||
NopHtml.AddCanonicalUrlParts(categoryUrl, seoSettings.QueryStringInCanonicalUrlsEnabled);
|
||||
}
|
||||
|
||||
var breadcrumbDelimiter = commonSettings.BreadcrumbDelimiter;
|
||||
NopHtml.AddJsonLdParts(Model.JsonLd);
|
||||
}
|
||||
@*category breadcrumb*@
|
||||
@section Breadcrumb
|
||||
{
|
||||
@if (Model.DisplayCategoryBreadcrumb)
|
||||
{
|
||||
<div class="breadcrumb">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="@Url.RouteUrl("Homepage")" title="@T("Categories.Breadcrumb.Top")">@T("Categories.Breadcrumb.Top")</a>
|
||||
<span class="delimiter">@breadcrumbDelimiter</span>
|
||||
</li>
|
||||
@{ int position = 1; }
|
||||
@foreach (var cat in Model.CategoryBreadcrumb)
|
||||
{
|
||||
var isLastCategory = cat.Id == Model.Id;
|
||||
<li>
|
||||
@if (isLastCategory)
|
||||
{
|
||||
<strong class="current-item">@cat.Name</strong>
|
||||
<span id="@(Url.RouteUrl<Category>(new { SeName = cat.SeName }))"></span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<a href="@(Url.RouteUrl<Category>(new { SeName = cat.SeName }))" title="@cat.Name">
|
||||
<span>@cat.Name</span>
|
||||
</a>
|
||||
<span class="delimiter">@breadcrumbDelimiter</span>
|
||||
}
|
||||
</li>
|
||||
position++;
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.CategoryDetailsAfterBreadcrumb, additionalData = Model })
|
||||
}
|
||||
|
||||
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.CategoryDetailsTop, additionalData = Model })
|
||||
}
|
||||
|
||||
@section CatalogFilters {
|
||||
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.CategoryDetailsBeforeFilters, additionalData = Model })
|
||||
@await Html.PartialAsync("_CatalogFilters", Model.CatalogProductsModel)
|
||||
}
|
||||
|
||||
<div class="page category-page">
|
||||
<div class="page-title">
|
||||
<h1>@Model.Name</h1>
|
||||
</div>
|
||||
<div class="page-body">
|
||||
@*description*@
|
||||
@if (!string.IsNullOrWhiteSpace(Model.Description))
|
||||
{
|
||||
<div class="category-description">
|
||||
@Html.Raw(Model.Description)
|
||||
</div>
|
||||
}
|
||||
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.CategoryDetailsBeforeSubcategories, additionalData = Model })
|
||||
@*subcategories*@
|
||||
@if (Model.SubCategories.Count > 0)
|
||||
{
|
||||
<div class="category-grid sub-category-grid">
|
||||
<div class="item-grid">
|
||||
@foreach (var item in Model.SubCategories)
|
||||
{
|
||||
<div class="item-box">
|
||||
<div class="sub-category-item">
|
||||
<h2 class="title">
|
||||
<a href="@(Url.RouteUrl<Category>(new { SeName = item.SeName }))" title="@item.PictureModel.Title">
|
||||
@item.Name
|
||||
</a>
|
||||
</h2>
|
||||
<div class="picture">
|
||||
<a href="@(Url.RouteUrl<Category>(new { SeName = item.SeName }))" title="@item.PictureModel.Title">
|
||||
<img alt="@item.PictureModel.AlternateText" src="@item.PictureModel.ImageUrl" title="@item.PictureModel.Title" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.CategoryDetailsBeforeFeaturedProducts, additionalData = Model })
|
||||
@*featured products*@
|
||||
@if (Model.FeaturedProducts.Count > 0)
|
||||
{
|
||||
<div class="product-grid featured-product-grid">
|
||||
<div class="title">
|
||||
<strong>@T("Products.FeaturedProducts")</strong>
|
||||
</div>
|
||||
<div class="item-grid">
|
||||
@foreach (var item in Model.FeaturedProducts)
|
||||
{
|
||||
<div class="item-box">
|
||||
@await Html.PartialAsync("_ProductBox", item)
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.CategoryDetailsAfterFeaturedProducts, additionalData = Model })
|
||||
@await Html.PartialAsync("_CatalogSelectors", Model.CatalogProductsModel)
|
||||
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.CategoryDetailsBeforeProductList, additionalData = Model })
|
||||
@{
|
||||
var catalogProductsViewData = new ViewDataDictionary(ViewData);
|
||||
catalogProductsViewData["fetchUrl"] = Html.Raw(Url.RouteUrl("GetCategoryProducts", new { categoryId = Model.Id }));
|
||||
}
|
||||
@await Html.PartialAsync("_CatalogProducts", Model.CatalogProductsModel, catalogProductsViewData)
|
||||
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.CategoryDetailsBottom, additionalData = Model })
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
@model LoginModel
|
||||
@using Nop.Core
|
||||
@using Nop.Core.Domain.Customers
|
||||
|
||||
@inject IWebHelper webHelper
|
||||
@{
|
||||
Layout = "_ColumnsOne";
|
||||
|
||||
//title
|
||||
NopHtml.AddTitleParts(T("PageTitle.Login").Text);
|
||||
//page class
|
||||
NopHtml.AppendPageCssClassParts("html-login-page");
|
||||
|
||||
//register URL with return URL (if specified)
|
||||
var registerUrl = Url.RouteUrl("Register", new { returnUrl = this.Context.Request.Query["returnUrl"] }, webHelper.GetCurrentRequestProtocol());
|
||||
}
|
||||
<div class="page login-page">
|
||||
<div class="page-title">
|
||||
<h1>@T("Account.Login.Welcome")</h1>
|
||||
</div>
|
||||
@await Html.PartialAsync("_ExternalAuthentication.Errors")
|
||||
<div class="page-body">
|
||||
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.LoginTop, additionalData = Model })
|
||||
<div class="customer-blocks">
|
||||
@if (Model.RegistrationType == UserRegistrationType.Disabled)
|
||||
{
|
||||
<div class="new-wrapper">
|
||||
<div class="title">
|
||||
@T("Account.Register")
|
||||
</div>
|
||||
<div class="text">
|
||||
@T("Account.Register.Result.Disabled")
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else if (Model.CheckoutAsGuest)
|
||||
{
|
||||
<div class="new-wrapper checkout-as-guest-or-register-block">
|
||||
<div class="title">
|
||||
<strong>@T("Account.Login.CheckoutAsGuestOrRegister")</strong>
|
||||
</div>
|
||||
<div class="text">
|
||||
@await Component.InvokeAsync(typeof(TopicBlockViewComponent), new { systemName = "CheckoutAsGuestOrRegister" })
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button type="button" class="button-1 checkout-as-guest-button" onclick="location.href='@Url.RouteUrl("Checkout")'">@T("Account.Login.CheckoutAsGuest")</button>
|
||||
<button type="button" class="button-1 register-button" onclick="location.href='@registerUrl'">@T("Account.Register")</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="new-wrapper register-block">
|
||||
<div class="title">
|
||||
<strong>@T("Account.Login.NewCustomer")</strong>
|
||||
</div>
|
||||
<div class="text">
|
||||
@T("Account.Login.NewCustomerText")
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button type="button" class="button-1 register-button" onclick="location.href='@registerUrl'">@T("Account.Register")</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div class="returning-wrapper fieldset">
|
||||
<form asp-route="Login" asp-route-returnurl="@Context.Request.Query["ReturnUrl"]" method="post" autocomplete="off">
|
||||
<div asp-validation-summary="ModelOnly" class="message-error">@T("Account.Login.Unsuccessful")</div>
|
||||
|
||||
<div class="form-fields">
|
||||
<div class="title">
|
||||
<strong>@T("Account.Login.ReturningCustomer")</strong>
|
||||
</div>
|
||||
@if (Model.UsernamesEnabled)
|
||||
{
|
||||
<div class="inputs">
|
||||
<label asp-for="Username" asp-postfix=":"></label>
|
||||
<input asp-for="Username" class="username" autofocus="autofocus" />
|
||||
<span asp-validation-for="Username"></span>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="inputs">
|
||||
<label asp-for="Email" asp-postfix=":"></label>
|
||||
<input asp-for="Email" class="email" autofocus="autofocus" />
|
||||
<span asp-validation-for="Email"></span>
|
||||
</div>
|
||||
}
|
||||
<div class="inputs">
|
||||
<label asp-for="Password" asp-postfix=":"></label>
|
||||
<div class="login-password">
|
||||
<input asp-for="Password" class="password" />
|
||||
<span class="password-eye"></span>
|
||||
</div>
|
||||
<span asp-validation-for="Password"></span>
|
||||
</div>
|
||||
<div class="inputs reversed">
|
||||
<input asp-for="RememberMe" />
|
||||
<label asp-for="RememberMe"></label>
|
||||
<span class="forgot-password">
|
||||
<a asp-route="PasswordRecovery">@T("Account.Login.ForgotPassword")</a>
|
||||
</span>
|
||||
</div>
|
||||
@if (Model.DisplayCaptcha)
|
||||
{
|
||||
<nop-captcha />
|
||||
}
|
||||
<div class="buttons">
|
||||
<button type="submit" class="button-1 login-button">@T("Account.Login.LoginButton")</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="external-authentication">
|
||||
@await Component.InvokeAsync(typeof(ExternalMethodsViewComponent), "ExternalAuthentication")
|
||||
</div>
|
||||
@await Component.InvokeAsync(typeof(TopicBlockViewComponent), new { systemName = "LoginRegistrationInfo" })
|
||||
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.LoginBottom, additionalData = Model })
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script asp-location="Footer">
|
||||
$(function () {
|
||||
const password = $("#@Html.IdFor(m => m.Password)");
|
||||
|
||||
$(".password-eye").on("click", function () {
|
||||
// toggle the type attribute
|
||||
const type = password.attr("type") === "password" ? "text" : "password";
|
||||
password.attr("type", type);
|
||||
|
||||
// toggle the icon
|
||||
$(this).toggleClass("password-eye-open");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,449 @@
|
|||
@model RegisterModel
|
||||
|
||||
@{
|
||||
Layout = "_ColumnsOne";
|
||||
|
||||
//title
|
||||
NopHtml.AddTitleParts(T("PageTitle.Register").Text);
|
||||
//page class
|
||||
NopHtml.AppendPageCssClassParts("html-registration-page");
|
||||
}
|
||||
|
||||
<div class="page registration-page">
|
||||
<div class="page-title">
|
||||
<h1>@T("Account.Register")</h1>
|
||||
</div>
|
||||
<div class="page-body">
|
||||
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.RegisterTop, additionalData = Model })
|
||||
<form asp-route="Register" asp-route-returnurl="@Context.Request.Query["ReturnUrl"]" method="post" autocomplete="off">
|
||||
<div asp-validation-summary="ModelOnly" class="message-error"></div>
|
||||
<div class="fieldset">
|
||||
<div class="title">
|
||||
<strong>@T("Account.YourPersonalDetails")</strong>
|
||||
</div>
|
||||
<div class="form-fields">
|
||||
@if (Model.GenderEnabled)
|
||||
{
|
||||
<div class="inputs">
|
||||
<label for="gender">@T("Account.Fields.Gender"):</label>
|
||||
<div id="gender" class="gender">
|
||||
<span class="male">
|
||||
<input type="radio" asp-for="Gender" value="M" checked="@(Model.Gender == "M")" id="gender-male" />
|
||||
<label class="forcheckbox" for="gender-male">@T("Account.Fields.Gender.Male")</label>
|
||||
</span>
|
||||
<span class="female">
|
||||
<input type="radio" asp-for="Gender" value="F" checked="@(Model.Gender == "F")" id="gender-female" />
|
||||
<label class="forcheckbox" for="gender-female">@T("Account.Fields.Gender.Female")</label>
|
||||
</span>
|
||||
@if (Model.NeutralGenderEnabled)
|
||||
{
|
||||
<span class="Neutral">
|
||||
<input type="radio" asp-for="Gender" value="N" checked="@(Model.Gender == "N")" id="gender-neutral" />
|
||||
<label class="forcheckbox" for="gender-neutral">@T("Account.Fields.Gender.Neutral")</label>
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@if (Model.FirstNameEnabled)
|
||||
{
|
||||
<div class="inputs">
|
||||
<label asp-for="FirstName" asp-postfix=":"></label>
|
||||
<input asp-for="FirstName" />
|
||||
@if (Model.FirstNameRequired)
|
||||
{
|
||||
<nop-required />
|
||||
}
|
||||
<span asp-validation-for="FirstName"></span>
|
||||
</div>
|
||||
}
|
||||
@if (Model.LastNameEnabled)
|
||||
{
|
||||
<div class="inputs">
|
||||
<label asp-for="LastName" asp-postfix=":"></label>
|
||||
<input asp-for="LastName" />
|
||||
@if (Model.LastNameRequired)
|
||||
{
|
||||
<nop-required />
|
||||
}
|
||||
<span asp-validation-for="LastName"></span>
|
||||
</div>
|
||||
}
|
||||
@if (Model.DateOfBirthEnabled)
|
||||
{
|
||||
<div class="inputs date-of-birth">
|
||||
<label>@T("Account.Fields.DateOfBirth"):</label>
|
||||
<nop-date-picker asp-day-name="@Html.NameFor(x => x.DateOfBirthDay)"
|
||||
asp-month-name="@Html.NameFor(x => x.DateOfBirthMonth)"
|
||||
asp-year-name="@Html.NameFor(x => x.DateOfBirthYear)"
|
||||
asp-begin-year="@(DateTime.Now.AddYears(-110))"
|
||||
asp-end-year="@(DateTime.UtcNow)"
|
||||
asp-selected-date="@Model.ParseDateOfBirth()" />
|
||||
|
||||
@if (Model.DateOfBirthRequired)
|
||||
{
|
||||
<nop-required />
|
||||
}
|
||||
<span asp-validation-for="DateOfBirthDay"></span>
|
||||
<span asp-validation-for="DateOfBirthMonth"></span>
|
||||
<span asp-validation-for="DateOfBirthYear"></span>
|
||||
</div>
|
||||
}
|
||||
<div class="inputs">
|
||||
<label asp-for="Email" asp-postfix=":"></label>
|
||||
<input asp-for="Email" />
|
||||
<nop-required />
|
||||
<span asp-validation-for="Email"></span>
|
||||
</div>
|
||||
@if (Model.EnteringEmailTwice)
|
||||
{
|
||||
<div class="inputs">
|
||||
<label asp-for="ConfirmEmail" asp-postfix=":"></label>
|
||||
<input asp-for="ConfirmEmail" />
|
||||
<nop-required />
|
||||
<span asp-validation-for="ConfirmEmail"></span>
|
||||
</div>
|
||||
}
|
||||
@if (Model.UsernamesEnabled)
|
||||
{
|
||||
<div class="inputs">
|
||||
<label asp-for="Username" asp-postfix=":"></label>
|
||||
<input asp-for="Username" />
|
||||
<nop-required />
|
||||
<span asp-validation-for="Username"></span>
|
||||
@if (Model.CheckUsernameAvailabilityEnabled)
|
||||
{
|
||||
@await Html.PartialAsync("_CheckUsernameAvailability")
|
||||
}
|
||||
</div>
|
||||
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@if (Model.CompanyEnabled || Model.DisplayVatNumber)
|
||||
{
|
||||
<div class="fieldset">
|
||||
<div class="title">
|
||||
<strong>@T("Account.CompanyDetails")</strong>
|
||||
</div>
|
||||
<div class="form-fields">
|
||||
@if (Model.CompanyEnabled)
|
||||
{
|
||||
<div class="inputs">
|
||||
<label asp-for="Company" asp-postfix=":"></label>
|
||||
<input asp-for="Company" />
|
||||
@if (Model.CompanyRequired)
|
||||
{
|
||||
<nop-required />
|
||||
}
|
||||
<span asp-validation-for="Company"></span>
|
||||
</div>
|
||||
}
|
||||
@if (Model.DisplayVatNumber)
|
||||
{
|
||||
<div class="inputs">
|
||||
<label asp-for="VatNumber" asp-postfix=":"></label>
|
||||
<input asp-for="VatNumber" />
|
||||
@if (Model.VatNumberRequired)
|
||||
{
|
||||
<nop-required />
|
||||
}
|
||||
<span asp-validation-for="VatNumber"></span>
|
||||
<span class="vat-note"><em>@T("Account.Fields.VatNumber.Note")</em></span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@if (Model.StreetAddressEnabled ||
|
||||
Model.StreetAddress2Enabled ||
|
||||
Model.ZipPostalCodeEnabled ||
|
||||
Model.CityEnabled ||
|
||||
Model.CountyEnabled ||
|
||||
Model.CountryEnabled)
|
||||
{
|
||||
<div class="fieldset">
|
||||
<div class="title">
|
||||
<strong>@T("Account.YourAddress")</strong>
|
||||
</div>
|
||||
<div class="form-fields">
|
||||
@if (Model.StreetAddressEnabled)
|
||||
{
|
||||
<div class="inputs">
|
||||
<label asp-for="StreetAddress" asp-postfix=":"></label>
|
||||
<input asp-for="StreetAddress" />
|
||||
@if (Model.StreetAddressRequired)
|
||||
{
|
||||
<nop-required />
|
||||
}
|
||||
<span asp-validation-for="StreetAddress"></span>
|
||||
</div>
|
||||
}
|
||||
@if (Model.StreetAddress2Enabled)
|
||||
{
|
||||
<div class="inputs">
|
||||
<label asp-for="StreetAddress2" asp-postfix=":"></label>
|
||||
<input asp-for="StreetAddress2" />
|
||||
@if (Model.StreetAddress2Required)
|
||||
{
|
||||
<nop-required />
|
||||
}
|
||||
<span asp-validation-for="StreetAddress2"></span>
|
||||
</div>
|
||||
}
|
||||
@if (Model.ZipPostalCodeEnabled)
|
||||
{
|
||||
<div class="inputs">
|
||||
<label asp-for="ZipPostalCode" asp-postfix=":"></label>
|
||||
<input asp-for="ZipPostalCode" />
|
||||
@if (Model.ZipPostalCodeRequired)
|
||||
{
|
||||
<nop-required />
|
||||
}
|
||||
<span asp-validation-for="ZipPostalCode"></span>
|
||||
</div>
|
||||
}
|
||||
@if (Model.CountyEnabled)
|
||||
{
|
||||
<div class="inputs">
|
||||
<label asp-for="County" asp-postfix=":"></label>
|
||||
<input asp-for="County" />
|
||||
@if (Model.CountyRequired)
|
||||
{
|
||||
<nop-required />
|
||||
}
|
||||
<span asp-validation-for="County"></span>
|
||||
</div>
|
||||
}
|
||||
@if (Model.CityEnabled)
|
||||
{
|
||||
<div class="inputs">
|
||||
<label asp-for="City" asp-postfix=":"></label>
|
||||
<input asp-for="City" />
|
||||
@if (Model.CityRequired)
|
||||
{
|
||||
<nop-required />
|
||||
}
|
||||
<span asp-validation-for="City"></span>
|
||||
</div>
|
||||
}
|
||||
@if (Model.CountryEnabled)
|
||||
{
|
||||
<div class="inputs">
|
||||
<label asp-for="CountryId" asp-postfix=":"></label>
|
||||
<select asp-for="CountryId" asp-items="Model.AvailableCountries"
|
||||
data-trigger="country-select"
|
||||
data-url="@(Url.RouteUrl("GetStatesByCountryId"))"
|
||||
data-stateprovince="#@Html.IdFor(model => model.StateProvinceId)"
|
||||
data-loading="#states-loading-progress"></select>
|
||||
@if (Model.CountryRequired)
|
||||
{
|
||||
<nop-required />
|
||||
}
|
||||
<span asp-validation-for="CountryId"></span>
|
||||
</div>
|
||||
}
|
||||
@if (Model.CountryEnabled && Model.StateProvinceEnabled)
|
||||
{
|
||||
<div class="inputs">
|
||||
<label asp-for="StateProvinceId" asp-postfix=":"></label>
|
||||
<select asp-for="StateProvinceId" asp-items="Model.AvailableStates"></select>
|
||||
@if (Model.StateProvinceRequired)
|
||||
{
|
||||
<nop-required />
|
||||
}
|
||||
<span id="states-loading-progress" style="display: none;" class="please-wait">@T("Common.Wait")</span>
|
||||
<span asp-validation-for="StateProvinceId"></span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@if (Model.PhoneEnabled || Model.FaxEnabled)
|
||||
{
|
||||
<div class="fieldset">
|
||||
<div class="title">
|
||||
<strong>@T("Account.YourContactInformation")</strong>
|
||||
</div>
|
||||
<div class="form-fields">
|
||||
@if (Model.PhoneEnabled)
|
||||
{
|
||||
<div class="inputs">
|
||||
<label asp-for="Phone" asp-postfix=":"></label>
|
||||
<input asp-for="Phone" />
|
||||
@if (Model.PhoneRequired)
|
||||
{
|
||||
<nop-required />
|
||||
}
|
||||
<span asp-validation-for="Phone"></span>
|
||||
</div>
|
||||
}
|
||||
@if (Model.FaxEnabled)
|
||||
{
|
||||
<div class="inputs">
|
||||
<label asp-for="Fax" asp-postfix=":"></label>
|
||||
<input asp-for="Fax" />
|
||||
@if (Model.FaxRequired)
|
||||
{
|
||||
<nop-required />
|
||||
}
|
||||
<span asp-validation-for="Fax"></span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@if (Model.NewsletterEnabled || Model.CustomerAttributes.Count > 0)
|
||||
{
|
||||
<div class="fieldset">
|
||||
<div class="title">
|
||||
<strong>@T("Account.Options")</strong>
|
||||
</div>
|
||||
<div class="form-fields">
|
||||
@if (Model.NewsletterEnabled)
|
||||
{
|
||||
<div class="inputs">
|
||||
<label asp-for="Newsletter" asp-postfix=":"></label>
|
||||
<input asp-for="Newsletter" />
|
||||
<span asp-validation-for="Newsletter"></span>
|
||||
</div>
|
||||
}
|
||||
@if (Model.CustomerAttributes.Count > 0)
|
||||
{
|
||||
@await Html.PartialAsync("_CustomerAttributes", Model.CustomerAttributes)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@if (Model.AllowCustomersToSetTimeZone)
|
||||
{
|
||||
<div class="fieldset">
|
||||
<div class="title">
|
||||
<strong>@T("Account.Preferences")</strong>
|
||||
</div>
|
||||
<div class="form-fields">
|
||||
<div class="inputs">
|
||||
<label asp-for="TimeZoneId" asp-postfix=":"></label>
|
||||
<select asp-for="TimeZoneId" asp-items="Model.AvailableTimeZones"></select>
|
||||
<span asp-validation-for="TimeZoneId"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div class="fieldset">
|
||||
<div class="title">
|
||||
<strong>@T("Account.YourPassword")</strong>
|
||||
</div>
|
||||
<div class="form-fields">
|
||||
<div class="inputs">
|
||||
<label asp-for="Password" asp-postfix=":"></label>
|
||||
<input asp-for="Password" />
|
||||
<nop-required />
|
||||
<span asp-validation-for="Password"></span>
|
||||
</div>
|
||||
<div class="inputs">
|
||||
<label asp-for="ConfirmPassword" asp-postfix=":"></label>
|
||||
<input asp-for="ConfirmPassword" />
|
||||
<nop-required />
|
||||
<span asp-validation-for="ConfirmPassword"></span>
|
||||
</div>
|
||||
@if (Model.DisplayCaptcha)
|
||||
{
|
||||
<nop-captcha />
|
||||
}
|
||||
@if (Model.HoneypotEnabled)
|
||||
{
|
||||
@Html.Raw(Html.GenerateHoneypotInput())
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (Model.AcceptPrivacyPolicyEnabled || Model.GdprConsents.Count > 0)
|
||||
{
|
||||
<div class="fieldset">
|
||||
<div class="title">
|
||||
<strong>@T("Account.UserAgreement")</strong>
|
||||
</div>
|
||||
<div class="form-fields">
|
||||
@if (Model.AcceptPrivacyPolicyEnabled)
|
||||
{
|
||||
<script asp-location="Footer">
|
||||
$(function() {
|
||||
$('#register-button').on('click', function() {
|
||||
if ($('#accept-consent').is(':checked')) {
|
||||
//do some stuff
|
||||
return true;
|
||||
} else {
|
||||
//just show validation errors, don't post
|
||||
alert('@Html.Raw(JavaScriptEncoder.Default.Encode(T("Account.Fields.AcceptPrivacyPolicy.Required").Text))');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<div class="inputs accept-consent">
|
||||
<input id="accept-consent" type="checkbox" name="accept-consent" />
|
||||
<label for="accept-consent">@T("Account.Fields.AcceptPrivacyPolicy")</label>
|
||||
@if (Model.AcceptPrivacyPolicyPopup)
|
||||
{
|
||||
<span class="read" id="read-privacyinfo">@T("Account.Fields.AcceptPrivacyPolicy.Read")</span>
|
||||
<script asp-location="Footer">
|
||||
$(function() {
|
||||
$('#read-privacyinfo').on('click',
|
||||
function(e) {
|
||||
displayPopupContentFromUrl(
|
||||
'@Url.RouteUrl("TopicPopup", new {SystemName = "privacyinfo"})',
|
||||
'@T("Account.Fields.AcceptPrivacyPolicy")');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
}
|
||||
else
|
||||
{
|
||||
<a class="read" id="read-privacyinfo" href="@Url.RouteTopicUrl("privacyinfo")">@T("Account.Fields.AcceptPrivacyPolicy.Read")</a>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (Model.GdprConsents.Count > 0)
|
||||
{
|
||||
foreach (var consent in Model.GdprConsents)
|
||||
{
|
||||
if (consent.IsRequired)
|
||||
{
|
||||
<script asp-location="Footer">
|
||||
$(function() {
|
||||
$('#register-button').on('click', function() {
|
||||
if ($('#consent@(consent.Id)').is(':checked')) {
|
||||
//do some stuff
|
||||
return true;
|
||||
} else {
|
||||
//just show validation errors, don't post
|
||||
alert('@Html.Raw(JavaScriptEncoder.Default.Encode(consent.RequiredMessage))');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
}
|
||||
<div class="inputs accept-consent">
|
||||
<input id="consent@(consent.Id)" type="checkbox" name="consent@(consent.Id)" checked="@consent.Accepted" />
|
||||
<label for="consent@(consent.Id)">@consent.Message</label>
|
||||
</div>
|
||||
}
|
||||
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="buttons">
|
||||
<button type="submit" name="register-button" id="register-button" class="button-1 register-next-step-button">@T("Account.Register.Button")</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="external-authentication">
|
||||
@await Component.InvokeAsync(typeof(ExternalMethodsViewComponent), "ExternalAuthentication")
|
||||
</div>
|
||||
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.RegisterBottom, additionalData = Model })
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,460 @@
|
|||
@using Nop.Services.Localization
|
||||
@using Nop.Core
|
||||
@inject ILocalizationService localizationService
|
||||
@inject IStoreContext storeContext
|
||||
|
||||
@{
|
||||
Layout = "_ColumnsOne";
|
||||
|
||||
var homepageTitle = await localizationService.GetLocalizedAsync(await storeContext.GetCurrentStoreAsync(), s => s.HomepageTitle);
|
||||
if (!string.IsNullOrEmpty(homepageTitle))
|
||||
{
|
||||
NopHtml.AddTitleParts(homepageTitle);
|
||||
}
|
||||
|
||||
var homepageDescription = await localizationService.GetLocalizedAsync(await storeContext.GetCurrentStoreAsync(), s => s.HomepageDescription);
|
||||
if (!string.IsNullOrEmpty(homepageDescription))
|
||||
{
|
||||
NopHtml.AddMetaDescriptionParts(homepageDescription);
|
||||
}
|
||||
|
||||
NopHtml.AppendPageCssClassParts("html-home-page");
|
||||
}
|
||||
|
||||
<div class="page home-page">
|
||||
<div class="page-body">
|
||||
|
||||
<!-- ==========================================
|
||||
HERO SECTION
|
||||
========================================== -->
|
||||
<section class="de-hero">
|
||||
<div class="de-hero-inner">
|
||||
<div class="de-hero-text">
|
||||
<div class="de-hero-brand">DatolyaExpress</div>
|
||||
<h1 class="de-hero-h1">Prémium<br>Medjool Datolya</h1>
|
||||
<div class="de-hero-subtitle">Közvetlenül a forrástól.</div>
|
||||
<p class="de-hero-desc">A világ legjobb datolyáit exportáljuk Európába és azon túlra — kiemelkedő minőségben, megbízható nagykereskedelmi partnerként.</p>
|
||||
<div class="de-hero-buttons">
|
||||
<a href="/kapcsolat" class="de-hero-btn-primary">Nagykereskedelmi ajánlat kérése</a>
|
||||
<a href="/termekek" class="de-hero-btn-secondary">Termékeink ›</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="de-hero-image">
|
||||
<img src="/images/uploaded/hero-dates.png" alt="Prémium Medjool Datolya" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ==========================================
|
||||
STANDARD HOMEPAGE CONTENT (widgets zone)
|
||||
========================================== -->
|
||||
<div style="position: relative; z-index: 5;">
|
||||
@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.HomepageTop })
|
||||
</div>
|
||||
|
||||
<!-- ==========================================
|
||||
MIÉRT A DATOLYAEXPRESS — IMMERSIVE FEATURES
|
||||
========================================== -->
|
||||
<section class="fb-features" id="fbFeatures">
|
||||
<div class="fb-features-header">
|
||||
<h2>Miért a <em>DatolyaExpress</em>?</h2>
|
||||
<p>Nagykereskedelmi megoldás, ami másképp működik.</p>
|
||||
</div>
|
||||
|
||||
<div class="fb-feature" data-align="left">
|
||||
<div class="fb-feature-img">
|
||||
<img src="/images/uploaded/freshness.jpg" alt="Farmról frissen" loading="lazy" />
|
||||
</div>
|
||||
<div class="fb-feature-content">
|
||||
<span class="fb-feature-num">01</span>
|
||||
<h3>Farmról frissen, minden nap</h3>
|
||||
<p>A megbízható termelőktől történő közvetlen beszerzés garantálja, hogy termékeink a lehető legfrissebb állapotban és kiváló ízminőségben érkeznek Önhöz.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fb-feature" data-align="right">
|
||||
<div class="fb-feature-img">
|
||||
<img src="/images/uploaded/delivery.jpg" alt="Másnapi kiszállítás" loading="lazy" />
|
||||
</div>
|
||||
<div class="fb-feature-content">
|
||||
<span class="fb-feature-num">02</span>
|
||||
<h3>Másnapi nagykereskedelmi kiszállítás</h3>
|
||||
<p>A hőmérséklet-szabályozott logisztika biztosítja, hogy rendelése minden alkalommal frissen és pontosan érkezzen meg.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fb-feature" data-align="left">
|
||||
<div class="fb-feature-img">
|
||||
<img src="/images/uploaded/variety.jpg" alt="Páratlan választék" loading="lazy" />
|
||||
</div>
|
||||
<div class="fb-feature-content">
|
||||
<span class="fb-feature-num">03</span>
|
||||
<h3>Páratlan választék</h3>
|
||||
<p>A Medjool-tól a Deglet Nour-ig – egész évben több féle prémium datolyafajtát kínálunk válogatott termelőktől.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fb-feature" data-align="right">
|
||||
<div class="fb-feature-img">
|
||||
<img src="/images/uploaded/sustainable.jpg" alt="Fenntartható forrásból" loading="lazy" />
|
||||
</div>
|
||||
<div class="fb-feature-content">
|
||||
<span class="fb-feature-num">04</span>
|
||||
<h3>Fenntartható forrásból</h3>
|
||||
<p>Olyan termelőkkel dolgozunk együtt, akik osztoznak a felelős gazdálkodás és az élelmiszer-pazarlás csökkentése iránti elkötelezettségünkben.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ==========================================
|
||||
PRODUCT CATEGORIES
|
||||
========================================== -->
|
||||
<section class="fb-categories">
|
||||
<div class="fb-categories-header">
|
||||
<h2>Amit <em>importálunk</em></h2>
|
||||
<p>Válogatott minőség, közvetlenül a világ legjobb termelőitől.</p>
|
||||
</div>
|
||||
<div class="fb-cat-grid">
|
||||
|
||||
<a href="/termekek" class="fb-cat-card">
|
||||
<img src="/images/uploaded/cat-citrus.jpg" alt="Citrusfélék" loading="lazy" />
|
||||
<div class="fb-cat-label"><h3>Citrusfélék</h3></div>
|
||||
<div class="fb-cat-hover">
|
||||
<h3>Citrusfélék</h3>
|
||||
<ul><li>Narancs</li><li>Citrom</li><li>Mandarin</li><li>Grépfrút</li><li>Lime</li><li>Pomelo</li></ul>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/termekek" class="fb-cat-card">
|
||||
<img src="/images/uploaded/cat-exotic.jpg" alt="Egzotikus gyümölcsök" loading="lazy" />
|
||||
<div class="fb-cat-label"><h3>Egzotikus gyümölcsök</h3></div>
|
||||
<div class="fb-cat-hover">
|
||||
<h3>Egzotikus gyümölcsök</h3>
|
||||
<ul><li>Mangó</li><li>Ananász</li><li>Papaya</li><li>Passiongyümölcs</li><li>Licsi</li><li>Sárkánygyümölcs</li></ul>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/termekek" class="fb-cat-card">
|
||||
<img src="/images/uploaded/cat-veggies.jpg" alt="Zöldségek" loading="lazy" />
|
||||
<div class="fb-cat-label"><h3>Zöldségek <span>szezonon kívül</span></h3></div>
|
||||
<div class="fb-cat-hover">
|
||||
<h3>Zöldségek <span>szezonon kívül</span></h3>
|
||||
<ul><li>Paradicsom</li><li>Paprika</li><li>Cukkini</li><li>Padlizsán</li><li>Zöldbab</li><li>Brokkoli</li></ul>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/termekek" class="fb-cat-card">
|
||||
<img src="/images/uploaded/cat-fruits.jpg" alt="Gyümölcsök" loading="lazy" />
|
||||
<div class="fb-cat-label"><h3>Gyümölcsök <span>szezonon kívül</span></h3></div>
|
||||
<div class="fb-cat-hover">
|
||||
<h3>Gyümölcsök <span>szezonon kívül</span></h3>
|
||||
<ul><li>Szőlő</li><li>Őszibarack</li><li>Nektarin</li><li>Szilva</li><li>Cseresznye</li><li>Körte</li></ul>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/termekek" class="fb-cat-card">
|
||||
<img src="/images/uploaded/cat-berries.jpg" alt="Bogyós gyümölcsök" loading="lazy" />
|
||||
<div class="fb-cat-label"><h3>Bogyós gyümölcsök</h3></div>
|
||||
<div class="fb-cat-hover">
|
||||
<h3>Bogyós gyümölcsök</h3>
|
||||
<ul><li>Áfonya</li><li>Szeder</li><li>Málna</li><li>Eper</li><li>Ribizli</li><li>Egészség csomag</li></ul>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/termekek" class="fb-cat-card">
|
||||
<img src="/images/uploaded/cat-spices.jpg" alt="Egzotikus fűszerek" loading="lazy" />
|
||||
<div class="fb-cat-label"><h3>Egzotikus fűszerek</h3></div>
|
||||
<div class="fb-cat-hover">
|
||||
<h3>Egzotikus fűszerek</h3>
|
||||
<ul><li>Friss gyömbér</li><li>Kurkuma</li><li>Citromfű</li><li>Chili paprika</li><li>Koriander</li><li>Friss menta</li></ul>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/termekek" class="fb-cat-card">
|
||||
<img src="/images/uploaded/cat-dates.jpg" alt="Datolya" loading="lazy" />
|
||||
<div class="fb-cat-label"><h3>Datolya</h3></div>
|
||||
<div class="fb-cat-hover">
|
||||
<h3>Datolya</h3>
|
||||
<ul><li>Medjool</li><li>Deglet Nour</li><li>Barhi</li><li>Mazafati</li><li>Ajwa</li><li>Sukkari</li></ul>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="/termekek" class="fb-cat-card">
|
||||
<img src="/images/uploaded/cat-farveggies.jpg" alt="Távoli zöldségek" loading="lazy" />
|
||||
<div class="fb-cat-label"><h3>Távoli zöldségek</h3></div>
|
||||
<div class="fb-cat-hover">
|
||||
<h3>Távoli zöldségek</h3>
|
||||
<ul><li>Avokádó</li><li>Fokhagyma</li><li>Édesburgonya</li><li>Gyömbér</li><li>Jamsz gyökér</li><li>Taro</li></ul>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ==========================================
|
||||
FORKLIFT + STATS SECTION
|
||||
========================================== -->
|
||||
<section class="section-forklift">
|
||||
<div class="forklift-scroll-container" id="forkliftScrollContainer">
|
||||
<div class="forklift-sticky">
|
||||
<div class="forklift-visual">
|
||||
<canvas id="forkliftCanvas"></canvas>
|
||||
</div>
|
||||
<div class="stats-panel">
|
||||
<div class="stat-item" id="stat1">
|
||||
<div class="stat-number"><span class="stat-counter" data-target="25000">0</span>+</div>
|
||||
<div class="stat-label">tonna áru évente</div>
|
||||
</div>
|
||||
<div class="stat-item" id="stat2">
|
||||
<div class="stat-number"><span class="stat-counter" data-target="12000">0</span>+</div>
|
||||
<div class="stat-label">megrendelés évente</div>
|
||||
</div>
|
||||
<div class="stat-item" id="stat3">
|
||||
<div class="stat-number"><span class="stat-counter" data-target="1000">0</span>+</div>
|
||||
<div class="stat-label">elégedett ügyfél</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==========================================
|
||||
HOMEPAGE ANIMATION SCRIPT
|
||||
========================================== -->
|
||||
<script asp-location="Footer">
|
||||
(function() {
|
||||
|
||||
// =============================================
|
||||
// FORKLIFT CANVAS ANIMATION
|
||||
// =============================================
|
||||
var FL_TOTAL = 120;
|
||||
var FL_LERP = 0.06;
|
||||
var flFrames = [];
|
||||
var flLoaded = 0;
|
||||
var flCurrentFrame = 0;
|
||||
var flTargetFrame = 0;
|
||||
|
||||
var flCanvas = document.getElementById('forkliftCanvas');
|
||||
var flCtx = flCanvas ? flCanvas.getContext('2d') : null;
|
||||
var flCanvasW = 0, flCanvasH = 0;
|
||||
|
||||
function setupForkliftCanvas() {
|
||||
var sample = flFrames[0];
|
||||
if (!sample || !sample.naturalWidth || !flCanvas) return;
|
||||
var dpr = window.devicePixelRatio || 1;
|
||||
var isMobile = window.innerWidth <= 768;
|
||||
var container = flCanvas.parentElement;
|
||||
var displayW = container ? container.clientWidth : (isMobile ? window.innerWidth * 1.2 : window.innerWidth * 0.5);
|
||||
var displayH = displayW * (sample.naturalHeight / sample.naturalWidth);
|
||||
flCanvas.style.width = displayW + 'px';
|
||||
flCanvas.style.height = displayH + 'px';
|
||||
flCanvas.width = Math.round(displayW * dpr);
|
||||
flCanvas.height = Math.round(displayH * dpr);
|
||||
flCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||
flCanvasW = displayW;
|
||||
flCanvasH = displayH;
|
||||
}
|
||||
|
||||
function preloadForkliftFrames() {
|
||||
return new Promise(function(resolve) {
|
||||
for (var i = 1; i <= FL_TOTAL; i++) {
|
||||
var img = new Image();
|
||||
img.src = '/Themes/CarHaven/Content/forklift-frames/frame_' + String(i).padStart(4, '0') + '.jpg';
|
||||
img.onload = img.onerror = function() {
|
||||
flLoaded++;
|
||||
if (flLoaded === FL_TOTAL) resolve();
|
||||
};
|
||||
flFrames.push(img);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var forkliftContainer = document.getElementById('forkliftScrollContainer');
|
||||
var counters = document.querySelectorAll('.stat-counter');
|
||||
var statItems = document.querySelectorAll('.stat-item');
|
||||
var counterValues = Array.from(counters).map(function() { return 0; });
|
||||
|
||||
function forkliftLoop() {
|
||||
if (!forkliftContainer) { requestAnimationFrame(forkliftLoop); return; }
|
||||
var rect = forkliftContainer.getBoundingClientRect();
|
||||
var scrolled = -rect.top;
|
||||
var total = rect.height - window.innerHeight;
|
||||
var progress = Math.max(0, Math.min(1, scrolled / total));
|
||||
|
||||
flTargetFrame = progress * (FL_TOTAL - 1);
|
||||
var diff = flTargetFrame - flCurrentFrame;
|
||||
if (Math.abs(diff) > 0.05) {
|
||||
flCurrentFrame += diff * FL_LERP;
|
||||
} else {
|
||||
flCurrentFrame = flTargetFrame;
|
||||
}
|
||||
|
||||
if (flCanvasW > 0 && flFrames.length > 0) {
|
||||
var idxA = Math.max(0, Math.min(FL_TOTAL - 1, Math.floor(flCurrentFrame)));
|
||||
var idxB = Math.max(0, Math.min(FL_TOTAL - 1, Math.ceil(flCurrentFrame)));
|
||||
var blend = flCurrentFrame - Math.floor(flCurrentFrame);
|
||||
var imgA = flFrames[idxA];
|
||||
var imgB = flFrames[idxB];
|
||||
if (imgA && imgA.complete && imgA.naturalWidth) {
|
||||
flCtx.clearRect(0, 0, flCanvasW, flCanvasH);
|
||||
if (blend > 0.01 && imgB && imgB.complete && imgB.naturalWidth && idxA !== idxB) {
|
||||
flCtx.globalAlpha = 1;
|
||||
flCtx.drawImage(imgA, 0, 0, flCanvasW, flCanvasH);
|
||||
flCtx.globalAlpha = blend;
|
||||
flCtx.drawImage(imgB, 0, 0, flCanvasW, flCanvasH);
|
||||
flCtx.globalAlpha = 1;
|
||||
} else {
|
||||
flCtx.drawImage(imgA, 0, 0, flCanvasW, flCanvasH);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
statItems.forEach(function(item, i) {
|
||||
var staggerStart = i * 0.2;
|
||||
var itemProgress = Math.max(0, Math.min(1, (progress - staggerStart) / (1 - staggerStart)));
|
||||
if (itemProgress > 0.05) {
|
||||
var fadeIn = Math.min(1, (itemProgress - 0.05) / 0.3);
|
||||
item.style.opacity = fadeIn;
|
||||
item.style.transform = 'translateY(' + ((1 - fadeIn) * 40) + 'px)';
|
||||
}
|
||||
var target = parseInt(counters[i].dataset.target);
|
||||
var currentTarget = target * Math.min(1, itemProgress / 0.7);
|
||||
counterValues[i] += (currentTarget - counterValues[i]) * 0.08;
|
||||
counters[i].textContent = Math.round(counterValues[i]).toLocaleString();
|
||||
});
|
||||
|
||||
requestAnimationFrame(forkliftLoop);
|
||||
}
|
||||
|
||||
// =============================================
|
||||
// INIT
|
||||
// =============================================
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
// Forklift — start loop immediately (stats need it), load frames async
|
||||
requestAnimationFrame(forkliftLoop);
|
||||
preloadForkliftFrames().then(function() {
|
||||
setupForkliftCanvas();
|
||||
window.addEventListener('resize', setupForkliftCanvas);
|
||||
});
|
||||
|
||||
// =============================================
|
||||
// SCROLL REVEAL ANIMATIONS
|
||||
// =============================================
|
||||
(function initScrollReveal() {
|
||||
|
||||
// Hero text elements
|
||||
var heroText = document.querySelector('.de-hero-text');
|
||||
var heroImage = document.querySelector('.de-hero-image');
|
||||
if (heroText) {
|
||||
gsap.from(heroText, { x: -60, opacity: 0, duration: 1, ease: 'power3.out', delay: 0.2 });
|
||||
}
|
||||
if (heroImage) {
|
||||
gsap.from(heroImage, { x: 60, opacity: 0, duration: 1, ease: 'power3.out', delay: 0.4 });
|
||||
}
|
||||
|
||||
// Product grid titles
|
||||
document.querySelectorAll('.product-grid .title, .home-page-product-grid .title').forEach(function(el) {
|
||||
el.classList.add('sr-fade-up');
|
||||
});
|
||||
|
||||
// Features header
|
||||
var fbHeader = document.querySelector('.fb-features-header');
|
||||
if (fbHeader) fbHeader.classList.add('sr-fade-up');
|
||||
|
||||
// Feature rows: image parallax + content slide
|
||||
document.querySelectorAll('.fb-feature').forEach(function(feature) {
|
||||
var img = feature.querySelector('.fb-feature-img img');
|
||||
var content = feature.querySelector('.fb-feature-content');
|
||||
var align = feature.getAttribute('data-align');
|
||||
|
||||
if (img) {
|
||||
gsap.fromTo(img,
|
||||
{ yPercent: -10 },
|
||||
{ yPercent: 10, ease: 'none',
|
||||
scrollTrigger: { trigger: feature, start: 'top bottom', end: 'bottom top', scrub: 1 }
|
||||
}
|
||||
);
|
||||
}
|
||||
if (content) {
|
||||
gsap.from(content, {
|
||||
x: align === 'right' ? 60 : -60, opacity: 0,
|
||||
duration: 1, ease: 'power3.out',
|
||||
scrollTrigger: { trigger: feature, start: 'top 75%', toggleActions: 'play none none none' }
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Category cards stagger
|
||||
var catCards = document.querySelectorAll('.fb-cat-card');
|
||||
if (catCards.length > 0) {
|
||||
catCards.forEach(function(el) { el.classList.add('sr-stagger-item'); });
|
||||
gsap.to(catCards, {
|
||||
opacity: 1, y: 0, duration: 0.7, ease: 'power3.out', stagger: 0.12,
|
||||
scrollTrigger: { trigger: '.fb-cat-grid', start: 'top 85%', toggleActions: 'play none none none' }
|
||||
});
|
||||
}
|
||||
|
||||
// Category header
|
||||
var catHeader = document.querySelector('.fb-categories-header');
|
||||
if (catHeader) catHeader.classList.add('sr-fade-up');
|
||||
|
||||
// Product cards stagger
|
||||
document.querySelectorAll('.product-grid .item-box').forEach(function(el) {
|
||||
el.classList.add('sr-stagger-item');
|
||||
});
|
||||
|
||||
// Footer blocks stagger
|
||||
document.querySelectorAll('.footer-block').forEach(function(el) {
|
||||
el.classList.add('sr-stagger-item');
|
||||
});
|
||||
|
||||
// Animate sr-fade-up
|
||||
gsap.utils.toArray('.sr-fade-up').forEach(function(el) {
|
||||
gsap.to(el, {
|
||||
opacity: 1, y: 0, duration: 0.8, ease: 'power3.out',
|
||||
scrollTrigger: { trigger: el, start: 'top 88%', toggleActions: 'play none none none' }
|
||||
});
|
||||
});
|
||||
|
||||
// Animate sr-fade-left
|
||||
gsap.utils.toArray('.sr-fade-left').forEach(function(el) {
|
||||
gsap.to(el, {
|
||||
opacity: 1, x: 0, duration: 0.9, ease: 'power3.out',
|
||||
scrollTrigger: { trigger: el, start: 'top 88%', toggleActions: 'play none none none' }
|
||||
});
|
||||
});
|
||||
|
||||
// Animate sr-fade-right
|
||||
gsap.utils.toArray('.sr-fade-right').forEach(function(el) {
|
||||
gsap.to(el, {
|
||||
opacity: 1, x: 0, duration: 0.9, ease: 'power3.out',
|
||||
scrollTrigger: { trigger: el, start: 'top 88%', toggleActions: 'play none none none' }
|
||||
});
|
||||
});
|
||||
|
||||
// Product grid cards per-grid stagger
|
||||
document.querySelectorAll('.product-grid').forEach(function(grid) {
|
||||
var cards = grid.querySelectorAll('.item-box.sr-stagger-item');
|
||||
if (cards.length === 0) return;
|
||||
gsap.to(cards, {
|
||||
opacity: 1, y: 0, duration: 0.7, ease: 'power3.out', stagger: 0.1,
|
||||
scrollTrigger: { trigger: grid, start: 'top 85%', toggleActions: 'play none none none' }
|
||||
});
|
||||
});
|
||||
|
||||
// Footer blocks
|
||||
var footerBlocks = document.querySelectorAll('.footer-block.sr-stagger-item');
|
||||
if (footerBlocks.length > 0) {
|
||||
gsap.to(footerBlocks, {
|
||||
opacity: 1, y: 0, duration: 0.6, ease: 'power2.out', stagger: 0.12,
|
||||
scrollTrigger: { trigger: footerBlocks[0], start: 'top 90%', toggleActions: 'play none none none' }
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
})();
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue