html,
body {
margin:
0;
padding:
0;
}
/* =========================================
IMAGE TOOLS NAVIGATION
========================================= */
.tools-navigation {
background:
white;
border-bottom:
1px solid #d8dee8;
}
.tools-nav-container {
max-width:
1200px;
margin:
0 auto;
padding:
0 24px;
min-height:
60px;
display:
flex;
align-items:
center;
gap:
40px;
}
.tools-nav-container h2 {
margin:
0;
font-size:
20px;
color:
#2d3e50;
}
.tools-nav-container nav {
display:
flex;
gap:
30px;
}
.tools-nav-container nav a {
color:
#2d3e50;
text-decoration:
none;
font-weight:
600;
padding:
20px 0;
}
.tools-nav-container nav a.active {
color:
#24476b;
}
/* =========================================
COMPRESS IMAGES
========================================= */
/* =========================================
MAIN PAGE
========================================= */
.converter-page {
background:
#f7f8fc;
padding-bottom:
70px;
}
.converter-hero {
max-width:
1000px;
margin:
0 auto;
padding:
45px 24px 25px;
text-align:
center;
}
.converter-hero h1 {
margin:
0 0 12px;
color:
#2d3e50;
font-size:
38px;
font-weight:
700;
}
.converter-hero p {
margin:
0;
color:
#566573;
font-size:
17px;
}
/* =========================================
UPLOAD BOX
========================================= */
.upload-box {
max-width:
900px;
margin:
0 auto;
min-height:
250px;
padding:
30px;
border:
2px dashed #c7d0dc;
border-radius:
12px;
background:
white;
display:
flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
box-sizing:
border-box;
}
.upload-box.drag-over {
border-color:
#ff3131;
background:
#fff5f5;
}
.select-file-button {
border:
none;
border-radius:
10px;
background:
#ff3131;
color:
white;
font-size:
18px;
font-weight:
700;
padding:
17px 60px;
cursor:
pointer;
}
.select-file-button:hover {
background:
#e62828;
}
.upload-box p {
margin:
18px 0 6px;
color:
#394b59;
font-size:
16px;
}
.upload-box span {
color:
#66788a;
font-size:
14px;
}
/* =========================================
SELECTED FILE
========================================= */
.selected-file-section {
max-width:
900px;
margin:
25px auto 0;
padding:
0 24px;
box-sizing:
border-box;
}
.selected-file-card {
padding:
18px 22px;
background:
white;
border:
1px solid #d8dee8;
border-radius:
10px;
display:
flex;
align-items:
center;
justify-content:
space-between;
}
.selected-file-card strong {
display:
block;
color:
#2d3e50;
font-size:
16px;
}
.selected-file-card span {
display:
block;
margin-top:
6px;
color:
#66788a;
font-size:
14px;
}
.selected-file-card button {
border:
none;
background:
none;
color:
#c0392b;
font-size:
26px;
cursor:
pointer;
}
/* =========================================
COMPRESSION SETTINGS
========================================= */
.compression-section {
max-width:
900px;
margin:
25px auto 0;
padding:
0 24px;
box-sizing:
border-box;
}
.compression-section h2 {
margin:
0 0 15px;
color:
#2d3e50;
font-size:
20px;
}
.compression-options {
display:
flex;
flex-direction:
column;
gap:
12px;
}
.compression-option {
padding:
18px;
background:
white;
border:
1px solid #d8dee8;
border-radius:
10px;
display:
flex;
align-items:
flex-start;
gap:
14px;
cursor:
pointer;
}
.compression-option:hover {
border-color:
#ff3131;
}
.compression-option input {
margin-top:
4px;
accent-color:
#ff3131;
}
.compression-option strong {
display:
block;
color:
#2d3e50;
font-size:
16px;
}
.compression-option span {
display:
block;
margin-top:
5px;
color:
#66788a;
font-size:
14px;
}
/* =========================================
COMPRESS BUTTON
========================================= */
.convert-section {
max-width:
900px;
margin:
20px auto 0;
padding:
0 24px;
box-sizing:
border-box;
}
.convert-button {
width:
100%;
border:
none;
border-radius:
8px;
background:
#ff3131;
color:
white;
padding:
17px;
font-size:
16px;
font-weight:
700;
cursor:
pointer;
}
.convert-button:hover {
background:
#e62828;
}
.convert-button:disabled {
opacity:
0.7;
cursor:
not-allowed;
}
/* =========================================
RESULT
========================================= */
.result-section {
max-width:
900px;
margin:
30px auto 0;
padding:
30px;
background:
#f3fbf7;
border:
1px solid #b9ddc8;
border-radius:
10px;
text-align:
center;
box-sizing:
border-box;
}
.result-section h2 {
margin:
0 0 8px;
color:
#2f5f46;
font-size:
22px;
}
.result-section > p {
margin:
0 0 20px;
color:
#566573;
}
.result-info {
padding:
18px;
background:
white;
border:
1px solid #d8dee8;
border-radius:
10px;
text-align:
left;
line-height:
1.5;
}
.result-actions {
margin-top:
18px;
display:
flex;
justify-content:
center;
gap:
12px;
}
.download-button {
border:
none;
border-radius:
7px;
background:
#24476b;
color:
white;
padding:
13px 25px;
font-weight:
700;
cursor:
pointer;
}
.start-over-button {
border:
1px solid #c7d0dc;
border-radius:
7px;
background:
white;
color:
#2d3e50;
padding:
13px 25px;
font-weight:
700;
cursor:
pointer;
}
/* =========================================
ERROR MESSAGE
========================================= */
.error-message {
max-width:
900px;
margin:
20px auto;
padding:
14px 20px;
background:
#fff2f2;
border:
1px solid #f5b7b1;
border-radius:
8px;
color:
#c0392b;
box-sizing:
border-box;
}
/* =========================================
RESPONSIVE
========================================= */
/* =========================================
MOBILE IMAGE TOOLS NAVIGATION
========================================= */
@media (max-width: 700px) {
.tools-nav-container {
width: 100%;
padding: 12px 16px;
box-sizing: border-box;
overflow: visible;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
}
.tools-nav-container h2 {
font-size: 19px;
white-space: nowrap;
}
.tools-nav-container nav {
width: 100%;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 12px 18px;
}
.tools-nav-container nav a {
font-size: 14px;
white-space: nowrap;
}
}
/* =========================================
HOW TO USE
========================================= */
.how-to-section {
max-width: 1200px;
margin: 50px auto 0;
padding: 0 24px 120px;
box-sizing: border-box;
}
/* =========================================
COMPRESS IMAGES - ADVERTISEMENT LAYOUT
========================================= */
/* Main page container */
.converter-page {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px 60px;
}
/* =========================================
Breadcrumb
========================================= */
.converter-page .breadcrumb {
padding: 18px 0;
font-size: 14px;
color: #4b5563;
}
.converter-page .breadcrumb a {
color: #24476b;
text-decoration: none;
}
.converter-page .breadcrumb a:hover {
text-decoration: underline;
}
.converter-page .breadcrumb span {
margin: 0 7px;
}
/* =========================================
Top Advertisement
========================================= */
.top-ad {
width: 100%;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed #cbd5e1;
border-radius: 10px;
color: #718096;
font-size: 16px;
margin-bottom: 35px;
}
/* =========================================
MAIN PAGE LAYOUT
========================================= */
.page-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 35px;
align-items: start;
width: 100%;
}
/* =========================================
MAIN TOOL CONTENT
========================================= */
.page-main-content {
min-width: 0;
width: 100%;
}
/* =========================================
ADVERTISEMENT SIDEBAR
========================================= */
.ad-sidebar {
width: 300px;
height: 250px;
position: sticky;
top: 20px;
align-self: start;
box-sizing: border-box;
}
/* =========================================
SIDEBAR ADVERTISEMENTS
========================================= */
.ad-sidebar .ad-placeholder {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 250px;
box-sizing: border-box;
border: 1px dashed #cbd5e1;
border-radius: 10px;
background: #f8fafc;
color: #94a3b8;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.ad-sidebar {
display: none !important;
}
}
/* =========================================
TOOL CONTENT INSIDE LAYOUT
========================================= */
.page-main-content .converter-hero {
padding-top: 0;
}
.page-main-content .upload-box {
width: 100%;
max-width: none;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 1000px) {
.page-layout {
grid-template-columns: 1fr;
}
.ad-sidebar {
width: 100%;
flex-direction: row;
gap: 20px;
}
.ad-sidebar .ad-placeholder {
flex: 1;
width: auto;
min-height: 180px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.ad-sidebar {
display: none !important;
}
.ad-sidebar .ad-placeholder {
display: none;
}
/* =====================================
HOW TO SECTION
===================================== */
.how-to-section {
padding-bottom: 80px;
}
}
/* Disclaimer */
.disclaimer-section {
padding: 40px 24px 50px;
}
.disclaimer-section .content-container {
max-width: 1100px;
margin: 0 auto;
}
.disclaimer-section h2 {
margin-bottom: 20px;
color: #2d3e50;
font-size: 30px;
}
.disclaimer-section p {
margin-bottom: 14px;
color: #4b5563;
line-height: 1.8;
}
/* =========================================
HOW TO USE - MOBILE
========================================= */
@media (max-width: 600px) {
.how-to-section {
padding:
0 15px 80px;
}
}
/* =========================================
MOBILE - HOW TO STEPS
========================================= */
@media (max-width: 600px) {
.steps-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.step-card {
width: 100%;
box-sizing: border-box;
}
}