<!-- =========================================
AESTHETIC CLAN — MOBILE HOMEPAGE
WordPress Custom HTML Block
========================================= -->
<style>
/* ===============================
AESTHETIC CLAN VARIABLES
================================ */
:root {
--ac-black: #050505;
--ac-dark: #101010;
--ac-grey: #777;
--ac-light: #f4f4f4;
--ac-white: #ffffff;
--ac-border: #252525;
}
/* ===============================
GLOBAL
================================ */
.ac-site {
background: var(--ac-black);
color: var(--ac-white);
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.ac-site * {
box-sizing: border-box;
}
.ac-container {
width: 100%;
max-width: 1200px;
margin: auto;
padding: 0 18px;
}
.ac-site a {
color: inherit;
text-decoration: none;
}
/* ===============================
HEADER
================================ */
.ac-header {
height: 72px;
background: #000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 18px;
position: sticky;
top: 0;
z-index: 9999;
border-bottom: 1px solid #171717;
}
/* MENU */
.ac-menu-button {
width: 38px;
height: 38px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
cursor: pointer;
}
.ac-menu-button span {
width: 28px;
height: 2px;
background: #fff;
display: block;
}
/* LOGO */
.ac-logo {
display: flex;
align-items: center;
gap: 8px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.ac-logo-mark {
width: 32px;
height: 32px;
border: 2px solid #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 11px;
letter-spacing: -1px;
}
.ac-logo-name {
font-size: 20px;
font-weight: 800;
letter-spacing: -0.8px;
white-space: nowrap;
}
/* HEADER ICONS */
.ac-header-icons {
display: flex;
align-items: center;
gap: 15px;
}
.ac-header-icon {
width: 27px;
height: 27px;
border: 1.5px solid #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.ac-cart {
position: relative;
}
.ac-cart-count {
position: absolute;
top: -9px;
right: -7px;
background: #fff;
color: #000;
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 9px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
/* ===============================
HERO
================================ */
.ac-hero {
min-height: 480px;
position: relative;
display: flex;
align-items: flex-end;
padding: 35px 20px;
background:
linear-gradient(
to bottom,
rgba(0,0,0,.15),
rgba(0,0,0,.85)
),
url("YOUR_HERO_IMAGE_URL") center/cover no-repeat;
}
.ac-hero-content {
width: 100%;
max-width: 650px;
}
.ac-eyebrow {
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 15px;
opacity: .8;
}
.ac-hero h1 {
font-size: clamp(42px, 11vw, 90px);
line-height: .88;
text-transform: uppercase;
margin: 0 0 18px;
font-weight: 900;
letter-spacing: -3px;
}
.ac-hero p {
font-size: 15px;
line-height: 1.5;
max-width: 430px;
color: #ddd;
margin-bottom: 25px;
}
.ac-button {
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
color: #000 !important;
padding: 15px 24px;
font-size: 12px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
transition: .25s ease;
}
.ac-button:hover {
background: #ccc;
transform: translateY(-2px);
}
/* ===============================
NEW DROP
================================ */
.ac-section {
padding: 55px 0;
}
.ac-section-header {
display: flex;
justify-content: space-between;
align-items: end;
margin-bottom: 22px;
}
.ac-section-number {
font-size: 10px;
letter-spacing: 3px;
color: #888;
margin-bottom: 8px;
}
.ac-section-title {
font-size: 32px;
line-height: 1;
margin: 0;
text-transform: uppercase;
font-weight: 900;
letter-spacing: -1px;
}
.ac-section-link {
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
border-bottom: 1px solid #fff;
padding-bottom: 4px;
}
/* ===============================
CATEGORY GRID
================================ */
.ac-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.ac-card {
min-height: 245px;
position: relative;
overflow: hidden;
background: #161616;
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
}
.ac-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0,0,0,.85),
transparent 60%
);
}
.ac-card-content {
position: relative;
z-index: 2;
padding: 15px;
width: 100%;
}
.ac-card-title {
font-size: 20px;
font-weight: 900;
text-transform: uppercase;
margin-bottom: 5px;
}
.ac-card-subtitle {
font-size: 9px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #ccc;
}
.ac-arrow {
position: absolute;
right: 15px;
bottom: 17px;
z-index: 3;
font-size: 18px;
}
/* ===============================
NEW DROP PRODUCTS
================================ */
.ac-product-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.ac-product {
background: #111;
}
.ac-product-image {
aspect-ratio: 3 / 4;
background: #1b1b1b center/cover no-repeat;
position: relative;
}
.ac-product-tag {
position: absolute;
top: 10px;
left: 10px;
background: #fff;
color: #000;
padding: 6px 8px;
font-size: 8px;
font-weight: 800;
letter-spacing: 1px;
}
.ac-product-info {
padding: 12px 3px 18px;
}
.ac-product-name {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
}
.ac-product-price {
margin-top: 5px;
color: #aaa;
font-size: 12px;
}
/* ===============================
MEN / WOMEN FEATURE
================================ */
.ac-feature {
position: relative;
min-height: 430px;
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
margin-bottom: 10px;
}
.ac-feature::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0,0,0,.9),
rgba(0,0,0,.05)
);
}
.ac-feature-content {
position: relative;
z-index: 2;
padding: 25px;
}
.ac-feature-small {
font-size: 10px;
letter-spacing: 4px;
margin-bottom: 10px;
}
.ac-feature h2 {
font-size: 48px;
line-height: .9;
text-transform: uppercase;
margin: 0 0 15px;
font-weight: 900;
}
/* ===============================
BEST DEALS
================================ */
.ac-sale {
background: #f3f3f3;
color: #000;
padding: 50px 20px;
margin-top: 20px;
}
.ac-sale-label {
font-size: 10px;
letter-spacing: 4px;
text-transform: uppercase;
}
.ac-sale h2 {
font-size: 48px;
line-height: .9;
text-transform: uppercase;
margin: 10px 0 15px;
font-weight: 900;
}
.ac-sale p {
max-width: 400px;
color: #444;
font-size: 14px;
}
/* ===============================
BRAND STATEMENT
================================ */
.ac-statement {
padding: 90px 20px;
text-align: center;
background: #050505;
}
.ac-statement-small {
font-size: 10px;
letter-spacing: 5px;
color: #888;
}
.ac-statement h2 {
font-size: clamp(42px, 11vw, 100px);
line-height: .88;
text-transform: uppercase;
margin: 20px auto;
max-width: 900px;
font-weight: 900;
}
.ac-statement p {
max-width: 550px;
margin: auto;
color: #aaa;
line-height: 1.7;
}
/* ===============================
COMMUNITY BUTTON
================================ */
.ac-community {
position: fixed;
right: 18px;
bottom: 78px;
z-index: 9998;
background: #000;
border: 1px solid #444;
color: #fff;
border-radius: 50px;
padding: 12px 17px;
display: flex;
align-items: center;
gap: 9px;
font-size: 12px;
font-weight: 700;
box-shadow: 0 5px 25px rgba(0,0,0,.4);
}
.ac-community-dot {
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
color: #000;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
}
/* ===============================
MOBILE BOTTOM NAV
================================ */
.ac-bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 65px;
background: rgba(255,255,255,.97);
color: #111;
z-index: 9997;
display: flex;
justify-content: space-around;
align-items: center;
border-top: 1px solid #ddd;
}
.ac-bottom-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 700;
}
.ac-bottom-icon {
font-size: 21px;
line-height: 1;
}
/* ===============================
FOOTER
================================ */
.ac-footer {
padding: 60px 20px 100px;
background: #080808;
border-top: 1px solid #222;
}
.ac-footer-logo {
font-size: 25px;
font-weight: 900;
margin-bottom: 8px;
}
.ac-footer-tagline {
color: #777;
font-size: 11px;
letter-spacing: 2px;
}
.ac-footer-links {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-top: 35px;
}
.ac-footer-links a {
font-size: 11px;
text-transform: uppercase;
color: #aaa;
}
/* ===============================
DESKTOP
================================ */
@media (min-width: 768px) {
.ac-header {
height: 82px;
padding: 0 40px;
}
.ac-container {
padding: 0 40px;
}
.ac-hero {
min-height: 720px;
padding: 70px 60px;
}
.ac-grid {
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.ac-card {
min-height: 420px;
}
.ac-product-grid {
grid-template-columns: repeat(4, 1fr);
}
.ac-feature {
min-height: 650px;
}
.ac-bottom-nav {
display: none;
}
.ac-community {
bottom: 25px;
}
.ac-footer {
padding-bottom: 60px;
}
}
</style>
<div class="ac-site">
<!-- ================= HEADER ================= -->
<header class="ac-header">
<div class="ac-menu-button">
<span></span>
<span></span>
<span></span>
</div>
<a href="/" class="ac-logo">
<!-- Replace this AC text with your actual logo image if required -->
<div class="ac-logo-mark">AC</div>
<div class="ac-logo-name">
AESTHETIC CLAN
</div>
</a>
<div class="ac-header-icons">
<div class="ac-header-icon">
♙
</div>
<div class="ac-header-icon">
⌕
</div>
<div class="ac-header-icon ac-cart">
♡
<span class="ac-cart-count">0</span>
</div>
</div>
</header>
<!-- ================= HERO ================= -->
<section class="ac-hero">
<div class="ac-hero-content">
<div class="ac-eyebrow">
MORE THAN A COMMUNITY
</div>
<h1>
NEW<br>
DROP.<br>
BUILT<br>
DIFFERENT.
</h1>
<p>
Premium essentials designed for training,
movement and everyday life.
</p>
<a href="/new-drops" class="ac-button">
SHOP NEW DROP
</a>
</div>
</section>
<!-- ================= CATEGORIES ================= -->
<section class="ac-section">
<div class="ac-container">
<div class="ac-section-header">
<div>
<div class="ac-section-number">01 / SHOP</div>
<h2 class="ac-section-title">
Explore
</h2>
</div>
<a href="/shop" class="ac-section-link">
View All
</a>
</div>
<div class="ac-grid">
<!-- NEW DROP -->
<a
href="/new-drops"
class="ac-card"
style="background-image:url('YOUR_NEW_DROP_IMAGE_URL');"
>
<div class="ac-card-content">
<div class="ac-card-title">
New Drop
</div>
<div class="ac-card-subtitle">
Latest arrivals
</div>
</div>
<div class="ac-arrow">
→
</div>
</a>
<!-- MEN -->
<a
href="/men"
class="ac-card"
style="background-image:url('YOUR_MEN_IMAGE_URL');"
>
<div class="ac-card-content">
<div class="ac-card-title">
Men
</div>
<div class="ac-card-subtitle">
Built for movement
</div>
</div>
<div class="ac-arrow">
→
</div>
</a>
<!-- WOMEN -->
<a
href="/women"
class="ac-card"
style="background-image:url('YOUR_WOMEN_IMAGE_URL');"
>
<div class="ac-card-content">
<div class="ac-card-title">
Women
</div>
<div class="ac-card-subtitle">
Strong. Confident. Aesthetic.
</div>
</div>
<div class="ac-arrow">
→
</div>
</a>
<!-- OVERSIZED TEES -->
<a
href="/oversized-tees"
class="ac-card"
style="background-image:url('YOUR_OVERSIZED_TEE_IMAGE_URL');"
>
<div class="ac-card-content">
<div class="ac-card-title">
Oversized Tees
</div>
<div class="ac-card-subtitle">
Everyday essentials
</div>
</div>
<div class="ac-arrow">
→
</div>
</a>
<!-- OVERSIZED JOGGERS -->
<a
href="/oversized-joggers"
class="ac-card"
style="background-image:url('YOUR_OVERSIZED_JOGGER_IMAGE_URL');"
>
<div class="ac-card-content">
<div class="ac-card-title">
Oversized Joggers
</div>
<div class="ac-card-subtitle">
Relaxed silhouettes
</div>
</div>
<div class="ac-arrow">
→
</div>
</a>
<!-- HOODIES -->
<a
href="/hoodies"
class="ac-card"
style="background-image:url('YOUR_HOODIE_IMAGE_URL');"
>
<div class="ac-card-content">
<div class="ac-card-title">
Hoodies
</div>
<div class="ac-card-subtitle">
Built for every day
</div>
</div>
<div class="ac-arrow">
→
</div>
</a>
</div>
</div>
</section>
<!-- ================= NEW DROP PRODUCTS ================= -->
<section class="ac-section">
<div class="ac-container">
<div class="ac-section-header">
<div>
<div class="ac-section-number">
02 / NEW
</div>
<h2 class="ac-section-title">
Just Dropped
</h2>
</div>
<a href="/new-drops" class="ac-section-link">
Shop All
</a>
</div>
<div class="ac-product-grid">
<a href="#" class="ac-product">
<div
class="ac-product-image"
style="background-image:url('YOUR_PRODUCT_1_IMAGE_URL');"
>
<div class="ac-product-tag">
NEW
</div>
</div>
<div class="ac-product-info">
<div class="ac-product-name">
Oversized Essential Tee
</div>
<div class="ac-product-price">
₹2,499
</div>
</div>
</a>
<a href="#" class="ac-product">
<div
class="ac-product-image"
style="background-image:url('YOUR_PRODUCT_2_IMAGE_URL');"
>
<div class="ac-product-tag">
NEW
</div>
</div>
<div class="ac-product-info">
<div class="ac-product-name">
Signature Oversized Jogger
</div>
<div class="ac-product-price">
₹2,999
</div>
</div>
</a>
<a href="#" class="ac-product">
<div
class="ac-product-image"
style="background-image:url('YOUR_PRODUCT_3_IMAGE_URL');"
>
<div class="ac-product-tag">
NEW
</div>
</div>
<div class="ac-product-info">
<div class="ac-product-name">
Core Hoodie
</div>
<div class="ac-product-price">
₹3,499
</div>
</div>
</a>
<a href="#" class="ac-product">
<div
class="ac-product-image"
style="background-image:url('YOUR_PRODUCT_4_IMAGE_URL');"
>
<div class="ac-product-tag">
NEW
</div>
</div>
<div class="ac-product-info">
<div class="ac-product-name">
Performance Compression
</div>
<div class="ac-product-price">
₹1,999
</div>
</div>
</a>
</div>
</div>
</section>
<!-- ================= MEN ================= -->
<section class="ac-container">
<div
class="ac-feature"
style="background-image:url('YOUR_MEN_CAMPAIGN_IMAGE_URL');"
>
<div class="ac-feature-content">
<div class="ac-feature-small">
AESTHETIC CLAN / MEN
</div>
<h2>
Built<br>
For<br>
Movement.
</h2>
<a href="/men" class="ac-button">
Shop Men
</a>
</div>
</div>
<!-- WOMEN -->
<div
class="ac-feature"
style="background-image:url('YOUR_WOMEN_CAMPAIGN_IMAGE_URL');"
>
<div class="ac-feature-content">
<div class="ac-feature-small">
AESTHETIC CLAN / WOMEN
</div>
<h2>
Strong.<br>
Confident.<br>
Aesthetic.
</h2>
<a href="/women" class="ac-button">
Shop Women
</a>
</div>
</div>
</section>
<!-- ================= BEST DEALS ================= -->
<section class="ac-sale">
<div class="ac-container">
<div class="ac-sale-label">
LIMITED TIME
</div>
<h2>
Best<br>
Deals.
</h2>
<p>
Premium essentials. Limited-time prices.
Discover selected pieces from Aesthetic Clan.
</p>
<br>
<a
href="/best-deals"
class="ac-button"
>
Shop Offers
</a>
</div>
</section>
<!-- ================= BRAND STATEMENT ================= -->
<section class="ac-statement">
<div class="ac-statement-small">
AESTHETIC CLAN
</div>
<h2>
More Than<br>
A Community.
</h2>
<p>
Clothing created for people who see
discipline, progress and individuality
as a way of life.
</p>
</section>
<!-- ================= COMMUNITY BUTTON ================= -->
<a href="/community" class="ac-community">
<span class="ac-community-dot">
+
</span>
Aesthetic Clan
</a>
<!-- ================= BOTTOM NAV ================= -->
<nav class="ac-bottom-nav">
<a href="/" class="ac-bottom-item">
<span class="ac-bottom-icon">
⌂
</span>
Home
</a>
<a href="/menu" class="ac-bottom-item">
<span class="ac-bottom-icon">
☰
</span>
Menu
</a>
<a href="/shop" class="ac-bottom-item">
<span class="ac-bottom-icon">
▦
</span>
Shop
</a>
</nav>
<!-- ================= FOOTER ================= -->
<footer class="ac-footer">
<div class="ac-footer-logo">
AESTHETIC CLAN
</div>
<div class="ac-footer-tagline">
MORE THAN A COMMUNITY.
</div>
<div class="ac-footer-links">
<a href="/men">Men</a>
<a href="/women">Women</a>
<a href="/new-drops">New Drops</a>
<a href="/best-deals">Best Deals</a>
<a href="/collections">Collections</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
<a href="/faq">FAQ</a>
<a href="/shipping">Shipping</a>
<a href="/returns">Returns</a>
</div>
</footer>
</div>