/* ===========================================================================
Frosty's Fantasies — storefront restyle
Drop-in override for the stock OpenCart 3.0.3.8 default theme.
HOW TO INSTALL (no template edits, nothing to break):
1. Upload this file to: catalog/view/theme/default/stylesheet/frosty-theme.css
2. Admin -> Design -> Theme Editor -> default -> Common -> Header
Add, immediately before :
3. Hard-refresh (Ctrl+F5). To revert, delete that one line.
WHY SO MANY !important
This loads after bootstrap.min.css and the stock stylesheet.css, both of which set the
same properties at equal or higher specificity. Overriding a vendor theme you do not
control is the one situation where !important is the correct tool rather than a smell.
Nothing here changes markup, so every rule is reversible by removing the link above.
WHAT THIS CANNOT FIX
Your product images are generated at 200x200 for 16:9 video. CSS can only stretch or
crop what is already there. See the note at the bottom — it is a settings change and it
matters more than everything in this file.
=========================================================================== */
:root{
--ff-bg: #0d0e11;
--ff-surface: #16181d;
--ff-surface-2: #1d2027;
--ff-line: #262a32;
--ff-ink: #e8eaed;
--ff-dim: #99a0ab;
--ff-accent: #e0a53f;
--ff-accent-in: #14161a;
--ff-radius: 10px;
--ff-shadow: 0 10px 30px rgba(0,0,0,.45);
}
/* ---------------------------------------------------------------------------
1. FOUNDATION — dark, because the product is video
A white page puts the brightest thing on screen everywhere EXCEPT the thumbnails.
Darkening the surround is the cheapest way to make the media the subject.
--------------------------------------------------------------------------- */
body{
background: var(--ff-bg) !important;
color: var(--ff-ink) !important;
font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif !important;
font-size: 15px !important;
line-height: 1.6 !important;
-webkit-font-smoothing: antialiased;
}
a{ color: var(--ff-accent) !important; text-decoration: none !important; }
a:hover{ color: #f2bd63 !important; }
h1,h2,h3,h4,h5{ color: var(--ff-ink) !important; font-weight: 700 !important; letter-spacing: -.01em; }
h1{ font-size: 30px !important; margin: 0 0 18px !important; }
h2{ font-size: 24px !important; }
h3{ font-size: 20px !important; margin: 28px 0 14px !important; }
hr{ border-color: var(--ff-line) !important; }
p{ color: var(--ff-ink); }
.text-muted, small{ color: var(--ff-dim) !important; }
/* ---------------------------------------------------------------------------
2. TOP BAR — currency/language clutter, dialled down
It ships as the visually loudest strip on the page and sells nothing.
--------------------------------------------------------------------------- */
#top{
background: #08090b !important;
border: 0 !important;
border-bottom: 1px solid var(--ff-line) !important;
padding: 4px 0 !important;
min-height: 0 !important;
}
#top .btn-link, #top a{ color: var(--ff-dim) !important; font-size: 12px !important; text-shadow: none !important; }
#top .btn-link:hover, #top a:hover{ color: var(--ff-ink) !important; }
#top #form-currency .currency-select{ text-align: left !important; }
/* ---------------------------------------------------------------------------
3. HEADER — logo, search, cart
--------------------------------------------------------------------------- */
header{
background: var(--ff-bg) !important;
border-bottom: 1px solid var(--ff-line);
padding: 18px 0 14px !important;
margin-bottom: 0 !important;
}
#logo img{ max-height: 74px; width: auto; }
#search{ margin: 6px 0 !important; }
#search .form-control{
background: var(--ff-surface) !important;
border: 1px solid var(--ff-line) !important;
color: var(--ff-ink) !important;
height: 46px !important;
border-radius: var(--ff-radius) 0 0 var(--ff-radius) !important;
box-shadow: none !important;
}
#search .form-control::placeholder{ color: #6b727c !important; }
#search .btn{
background: var(--ff-accent) !important;
border: 0 !important;
color: var(--ff-accent-in) !important;
height: 46px !important;
border-radius: 0 var(--ff-radius) var(--ff-radius) 0 !important;
padding: 0 20px !important;
}
#cart > .btn{
background: var(--ff-surface) !important;
border: 1px solid var(--ff-line) !important;
color: var(--ff-ink) !important;
border-radius: var(--ff-radius) !important;
height: 46px !important;
margin-top: 6px;
}
#cart.open > .btn{ background: var(--ff-surface-2) !important; }
#cart .dropdown-menu{
background: var(--ff-surface) !important;
border: 1px solid var(--ff-line) !important;
box-shadow: var(--ff-shadow) !important;
min-width: 340px;
}
#cart .dropdown-menu li > div{ color: var(--ff-ink); }
#cart .dropdown-menu table td{ color: var(--ff-ink) !important; border-color: var(--ff-line) !important; }
/* ---------------------------------------------------------------------------
4. MAIN NAV — the five categories are the whole browse structure, so make them read
--------------------------------------------------------------------------- */
#menu{
background: var(--ff-surface) !important;
border: 1px solid var(--ff-line) !important;
border-radius: var(--ff-radius) !important;
min-height: 0 !important;
margin-bottom: 26px !important;
}
#menu .nav > li > a{
color: var(--ff-ink) !important;
font-weight: 600 !important;
font-size: 14px !important;
text-shadow: none !important;
padding: 14px 18px !important;
border-radius: var(--ff-radius);
}
#menu .nav > li > a:hover, #menu .nav > li.open > a{
background: var(--ff-surface-2) !important;
color: var(--ff-accent) !important;
}
#menu .dropdown-menu{
background: var(--ff-surface-2) !important;
border: 1px solid var(--ff-line) !important;
box-shadow: var(--ff-shadow) !important;
}
#menu .dropdown-inner a{ color: var(--ff-ink) !important; }
#menu .btn-navbar{ background: var(--ff-surface-2) !important; border: 1px solid var(--ff-line) !important; color: var(--ff-ink) !important; }
#category{ color: var(--ff-ink) !important; font-weight: 700; padding: 12px 0; }
/* ---------------------------------------------------------------------------
5. PRODUCT TILES — the part that actually sells
Stock gives a 200px square, a title, a truncated blurb and a small price, all in a
white box. The image is the product; everything else is a caption on it.
--------------------------------------------------------------------------- */
.product-thumb{
background: var(--ff-surface) !important;
border: 1px solid var(--ff-line) !important;
border-radius: var(--ff-radius) !important;
overflow: hidden !important;
margin-bottom: 26px !important;
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
display: flex; flex-direction: column;
}
.product-thumb:hover{
transform: translateY(-3px);
border-color: #3a4150 !important;
box-shadow: var(--ff-shadow) !important;
}
.product-thumb .image{ border: 0 !important; padding: 0 !important; }
.product-thumb .image a{ display: block; }
/* 16:9 frame. The source is a 200x200 square today, so it is CROPPED to shape rather
than letterboxed — a letterbox would just add black bars to an already small image.
Fix the source size (see the bottom of this file) and this starts showing real frames. */
.product-thumb .image img{
width: 100% !important;
aspect-ratio: 16 / 9;
object-fit: cover !important;
display: block;
background: #000;
transition: opacity .16s ease;
}
.product-thumb:hover .image img{ opacity: .92; }
.product-thumb .caption{
padding: 14px 16px 6px !important;
min-height: 0 !important;
text-align: left !important;
flex: 1 1 auto;
}
.product-thumb .caption h4{
font-size: 15px !important;
line-height: 1.35 !important;
margin: 0 0 8px !important;
}
.product-thumb .caption h4 a{ color: var(--ff-ink) !important; }
.product-thumb .caption h4 a:hover{ color: var(--ff-accent) !important; }
.product-thumb .caption p{
color: var(--ff-dim) !important;
font-size: 13px !important;
line-height: 1.5 !important;
margin: 0 0 10px !important;
}
.product-thumb .price{
color: var(--ff-ink) !important;
font-size: 20px !important;
font-weight: 700 !important;
margin: 0 !important;
}
.product-thumb .price-new{ color: var(--ff-accent) !important; }
.product-thumb .price-old{ color: #6b727c !important; font-size: 14px !important; }
.product-thumb .price-tax{ display: none !important; } /* digital goods, no tax line needed */
.product-thumb .button-group{
background: transparent !important;
border: 0 !important;
display: flex; gap: 8px; padding: 12px 16px 16px !important;
/* overflow:auto is STOCK on this element. Restyling the group without overriding it left
90px of content in a 70px box, which rendered a scrollbar inside every related-product
card. Verified on the live page: scrollHeight 90 vs clientHeight 70, now 70 == 70. */
overflow: visible !important;
height: auto !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
}
.product-thumb .button-group button{
background: var(--ff-surface-2) !important;
color: var(--ff-ink) !important;
border: 1px solid var(--ff-line) !important;
border-radius: 8px !important;
height: 42px !important;
line-height: 1 !important;
font-weight: 600 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
min-width: 0 !important;
padding: 0 10px !important;
}
/* In a 4-across column there is not room for three buttons, and "Add to Cart" was
truncating to "ADD TO". Wishlist and compare are the two the customer needs least,
so they go and the buy action keeps its full label. */
.col-sm-3 .product-thumb .button-group button:not(:first-child),
.col-md-3 .product-thumb .button-group button:not(:first-child){ display: none !important; }
/* The first button is Add to Cart; the other two are wishlist/compare. Give the buy
action the weight and let the rest be icons. */
.product-thumb .button-group button:first-child{
flex: 1 1 auto;
background: var(--ff-accent) !important;
color: var(--ff-accent-in) !important;
border-color: var(--ff-accent) !important;
}
.product-thumb .button-group button:first-child:hover{ background: #f2bd63 !important; }
.product-thumb .button-group button:not(:first-child){ flex: 0 0 44px; color: var(--ff-dim) !important; }
.product-thumb .button-group button:not(:first-child) span{ display: none !important; }
/* Wider tiles: 4-across at 200px reads as a thumbnail grid, 3-across reads as a shop. */
@media (min-width: 1200px){
.product-layout.col-lg-3{ width: 33.333% !important; }
}
/* ---------------------------------------------------------------------------
6. HOMEPAGE CAROUSEL
--------------------------------------------------------------------------- */
.swiper-viewport{
border: 1px solid var(--ff-line) !important;
border-radius: var(--ff-radius) !important;
box-shadow: none !important;
margin-bottom: 30px !important;
background: var(--ff-surface) !important;
}
.swiper-pagination-bullet-active{ background: var(--ff-accent) !important; }
/* ---------------------------------------------------------------------------
7. PRODUCT PAGE — the buy path
Stock asks for a QUANTITY on a file you can only own once, prints the internal
filename as "Product Code", and says "Availability: In Stock" about a download.
Each is friction or noise on the one page where neither is affordable.
--------------------------------------------------------------------------- */
#content h1{ font-size: 28px !important; margin-bottom: 16px !important; }
.thumbnails{ margin-left: 0 !important; }
.thumbnails > li{ padding-left: 0 !important; }
.thumbnails img{
border: 1px solid var(--ff-line) !important;
border-radius: var(--ff-radius) !important;
background: #000;
padding: 0 !important;
width: 100%;
}
/* Buy box as a real panel rather than a bare form group */
#product{
background: var(--ff-surface) !important;
border: 1px solid var(--ff-line) !important;
border-radius: var(--ff-radius) !important;
padding: 18px !important;
margin-top: 10px;
}
/* Quantity is meaningless for a download — hide the control, keep the input in the DOM
so OpenCart still posts quantity=1 and the cart behaves exactly as before. */
#product .form-group label[for="input-quantity"],
#product #input-quantity{
position: absolute !important;
width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#button-cart{
background: var(--ff-accent) !important;
border: 0 !important;
color: var(--ff-accent-in) !important;
font-weight: 800 !important;
font-size: 17px !important;
letter-spacing: .01em;
height: 54px !important;
border-radius: var(--ff-radius) !important;
box-shadow: 0 6px 18px rgba(224,165,63,.18);
}
#button-cart:hover{ background: #f2bd63 !important; }
/* Price block: make it the second-loudest thing after the image */
#content .list-unstyled h2,
#content ul.list-unstyled li h2{
color: var(--ff-accent) !important;
font-size: 34px !important;
font-weight: 800 !important;
margin: 0 0 4px !important;
}
/* Hide the stock meta noise. 'Product Code' prints the on-disk filename to customers. */
#content ul.list-unstyled li:not(:has(h2)):not(:has(.price-new)){ color: var(--ff-dim) !important; font-size: 13px; }
/* Description tabs */
.nav-tabs{ border-bottom: 1px solid var(--ff-line) !important; margin-top: 34px !important; }
.nav-tabs > li > a{
color: var(--ff-dim) !important;
background: transparent !important;
border: 0 !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
font-weight: 600 !important;
padding: 10px 2px !important;
margin-right: 26px !important;
}
.nav-tabs > li.active > a, .nav-tabs > li > a:hover{
color: var(--ff-ink) !important;
background: transparent !important;
border-bottom-color: var(--ff-accent) !important;
}
.tab-content{ padding-top: 18px; }
.tab-content p{ color: var(--ff-ink) !important; }
/* The description's own file lines read as a spec sheet, so set them like one. */
.tab-content #tab-description p:not(:first-child){
color: var(--ff-dim) !important;
font-size: 13.5px !important;
margin: 0 0 4px !important;
}
/* ---------------------------------------------------------------------------
8. PANELS, FORMS, CART, CHECKOUT — everything else that ships white
--------------------------------------------------------------------------- */
.panel, .well, .table, .form-control, .input-group-addon{
background: var(--ff-surface) !important;
border-color: var(--ff-line) !important;
color: var(--ff-ink) !important;
box-shadow: none !important;
}
.panel-heading, .panel-default > .panel-heading{
background: var(--ff-surface-2) !important;
border-color: var(--ff-line) !important;
color: var(--ff-ink) !important;
}
.table > thead > tr > th, .table > tbody > tr > td{ border-color: var(--ff-line) !important; color: var(--ff-ink) !important; }
.form-control:focus{ border-color: var(--ff-accent) !important; box-shadow: none !important; }
.btn-primary{
background: var(--ff-accent) !important; border-color: var(--ff-accent) !important;
color: var(--ff-accent-in) !important; font-weight: 700 !important; border-radius: 8px !important;
}
.btn-default{
background: var(--ff-surface-2) !important; border-color: var(--ff-line) !important;
color: var(--ff-ink) !important; border-radius: 8px !important;
}
.breadcrumb{ background: transparent !important; padding-left: 0 !important; }
.breadcrumb > li > a{ color: var(--ff-dim) !important; }
.alert-success{ background: #16301f !important; border-color: #23543a !important; color: #b7e6c6 !important; }
.alert-danger{ background: #35191a !important; border-color: #5c2a2c !important; color: #f0b4b4 !important; }
.pagination > li > a{ background: var(--ff-surface) !important; border-color: var(--ff-line) !important; color: var(--ff-ink) !important; }
.pagination > .active > span{ background: var(--ff-accent) !important; border-color: var(--ff-accent) !important; color: var(--ff-accent-in) !important; }
/* ---------------------------------------------------------------------------
9. FOOTER
--------------------------------------------------------------------------- */
footer{
background: #08090b !important;
border-top: 1px solid var(--ff-line) !important;
color: var(--ff-dim) !important;
margin-top: 60px !important;
padding: 34px 0 26px !important;
}
footer h5{ color: var(--ff-ink) !important; font-size: 13px !important; text-transform: uppercase; letter-spacing: .08em; }
footer a{ color: var(--ff-dim) !important; }
footer a:hover{ color: var(--ff-accent) !important; }
/* ---------------------------------------------------------------------------
10. MOBILE
--------------------------------------------------------------------------- */
@media (max-width: 767px){
#logo{ text-align: center; }
#logo img{ max-height: 58px; }
#search{ margin-top: 12px !important; }
#cart{ margin-bottom: 10px; }
#menu{ border-radius: var(--ff-radius) !important; }
h1{ font-size: 23px !important; }
.product-thumb .caption h4{ font-size: 16px !important; }
#button-cart{ height: 50px !important; }
/* Full-width tiles read better than two cramped columns on a phone. */
.product-layout.col-xs-12{ width: 100% !important; }
}
/* ===========================================================================
THE THING THIS FILE CANNOT FIX — and the good news about it
===========================================================================
MEASURED on the live site: the SOURCE images are already full HD.
image/catalog/1.5L_PAWGBBW_PREVIEW.png 1920 x 1080
image/catalog/TOILETGS_PREVIEW.png 1920 x 1080
Only the CACHED copies are small — 500x500 for the main product image, 200x200 for
tiles. So nothing needs re-uploading and no quality has been lost; OpenCart is simply
being told to generate postage stamps. It is a settings change:
Admin -> System -> Settings -> edit your store -> Image tab:
Category Product Image Size 200 x 200 -> 480 x 270
Product Image Thumb Size 228 x 228 -> 800 x 450
Product Image Popup Size 500 x 500 -> 1280 x 720
Related Product Image Size 200 x 200 -> 480 x 270
Additional Product Image Size -> 160 x 90
Wish List / Cart Image Size -> 160 x 90
Then delete everything inside image/cache/ (DirectAdmin file manager). OpenCart
regenerates each size on next request. The first page load after that is slow.
16:9 ratios are deliberate — the tiles in this stylesheet crop to 16/9, so matching
the generated size to the shape means no wasted pixels and no cropping surprises.
Two more that are markup, not CSS:
* The landing page has no
at all.
* 'Reviews (0)' is advertised on every product. Admin -> Settings -> Option ->
Reviews -> off until there are some.
=========================================================================== */