/* =========================================================
ARCANUS OUTFITTERS — SHOP PAGE
FULL WIDTH • PREMIUM • NO MENU • RESPONSIVE
========================================================= */
.arc-shop-page{
--teal:#20aaa7;
--teal-dark:#087f7c;
--teal-deep:#045c5b;
--mint:#e7f8f7;
--mint-2:#d9f3f1;
--dark:#082b2b;
--text:#607777;
--white:#fff;
width:100vw !important;
max-width:100vw !important;
margin-left:calc(50% - 50vw) !important;
margin-right:calc(50% - 50vw) !important;
overflow:hidden;
font-family:
Arial,
Helvetica,
sans-serif;
color:var(--dark);
background:#fff;
}
.arc-shop-page *,
.arc-shop-page *::before,
.arc-shop-page *::after{
box-sizing:border-box;
}
.arc-shop-page a{
text-decoration:none;
}
/* =========================================================
TOP STRIP
========================================================= */
.arc-shop-top{
width:100%;
min-height:48px;
padding:12px 20px;
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:13px;
background:var(--teal-deep);
color:#fff;
text-align:center;
font-size:12px;
font-weight:800;
letter-spacing:1.5px;
}
.arc-shop-top-dot{
width:6px;
height:6px;
border-radius:50%;
background:#a5fffb;
}
/* =========================================================
BRAND AREA
NO MENU
========================================================= */
.arc-shop-brand{
position:absolute;
top:48px;
left:0;
width:100%;
z-index:30;
padding:24px 6%;
}
.arc-shop-brand-inner{
display:flex;
align-items:center;
gap:15px;
}
.arc-shop-logo{
width:68px;
height:68px;
border-radius:50%;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
box-shadow:
0 12px 35px rgba(4,92,91,.13);
}
.arc-shop-logo-inner{
width:52px;
height:52px;
border-radius:50%;
background:
linear-gradient(
145deg,
#55d8d3,
var(--teal-dark)
);
position:relative;
}
.arc-shop-logo-inner::before{
content:"";
position:absolute;
width:32px;
height:13px;
left:10px;
top:19px;
border-top:5px solid #fff;
border-bottom:5px solid #fff;
border-radius:50%;
transform:rotate(-8deg);
}
.arc-shop-logo-inner::after{
content:"";
position:absolute;
width:7px;
height:7px;
border-radius:50%;
background:#fff;
left:23px;
top:23px;
box-shadow:
-19px 0 0 #fff,
19px 0 0 #fff;
}
.arc-shop-brand-text strong{
display:block;
color:var(--teal-dark);
font-size:21px;
letter-spacing:3px;
}
.arc-shop-brand-text span{
display:block;
margin-top:7px;
color:#698383;
font-size:9px;
font-weight:700;
letter-spacing:3px;
}
/* =========================================================
HERO
========================================================= */
.arc-shop-hero{
width:100%;
min-height:600px;
position:relative;
display:flex;
align-items:center;
overflow:hidden;
background:
radial-gradient(
circle at 85% 25%,
rgba(32,170,167,.18),
transparent 27%
),
radial-gradient(
circle at 5% 90%,
rgba(32,170,167,.10),
transparent 30%
),
linear-gradient(
135deg,
#fff 0%,
#f3fcfb 53%,
#dff7f6 100%
);
}
.arc-shop-hero::before{
content:"";
position:absolute;
width:650px;
height:650px;
right:-280px;
top:-220px;
border-radius:50%;
border:1px solid rgba(32,170,167,.17);
box-shadow:
0 0 0 65px rgba(32,170,167,.035),
0 0 0 130px rgba(32,170,167,.02);
animation:
arcShopRotate
25s
linear
infinite;
}
.arc-shop-hero::after{
content:"";
position:absolute;
width:450px;
height:450px;
left:-300px;
bottom:-270px;
border-radius:50%;
background:
rgba(32,170,167,.07);
}
.arc-shop-hero-inner{
width:100%;
padding:
165px 7% 75px;
display:grid;
grid-template-columns:
1.05fr .95fr;
gap:70px;
align-items:center;
position:relative;
z-index:5;
}
/* =========================================================
HERO TEXT
========================================================= */
.arc-shop-eyebrow{
display:inline-flex;
align-items:center;
gap:10px;
padding:11px 18px;
border:1px solid rgba(32,170,167,.25);
border-radius:50px;
background:
rgba(255,255,255,.78);
color:var(--teal-dark);
font-size:11px;
font-weight:900;
letter-spacing:1.8px;
animation:
arcShopUp
.8s
ease
both;
}
.arc-shop-eyebrow i{
width:8px;
height:8px;
border-radius:50%;
background:var(--teal);
box-shadow:
0 0 0 6px
rgba(32,170,167,.10);
}
.arc-shop-hero h1{
margin:28px 0 0;
font-size:
clamp(50px,6.5vw,86px);
line-height:.94;
letter-spacing:-5px;
font-weight:900;
color:var(--dark);
animation:
arcShopUp
.9s
.1s
ease
both;
}
.arc-shop-hero h1 span{
color:var(--teal);
}
.arc-shop-hero-text{
max-width:700px;
margin-top:28px;
color:var(--text);
font-size:17px;
line-height:1.85;
animation:
arcShopUp
.9s
.2s
ease
both;
}
/* =========================================================
HERO VISUAL
========================================================= */
.arc-shop-hero-art{
min-height:400px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
.arc-shop-main-shape{
width:360px;
height:360px;
border-radius:
48% 52% 45% 55%;
background:
linear-gradient(
145deg,
#52d7d2,
var(--teal-dark)
);
box-shadow:
0 40px 80px
rgba(8,127,124,.22);
position:relative;
transform:rotate(-8deg);
animation:
arcShopFloat
5s
ease-in-out
infinite;
}
.arc-shop-main-shape::before{
content:"";
position:absolute;
width:260px;
height:260px;
left:50%;
top:50%;
transform:
translate(-50%,-50%);
border:
1px solid
rgba(255,255,255,.28);
border-radius:50%;
}
.arc-shop-main-shape::after{
content:"SHOP";
position:absolute;
left:50%;
top:50%;
transform:
translate(-50%,-50%)
rotate(8deg);
color:#fff;
font-size:42px;
font-weight:900;
letter-spacing:7px;
}
.arc-shop-floating{
position:absolute;
z-index:10;
padding:17px 21px;
border-radius:20px;
background:
rgba(255,255,255,.95);
box-shadow:
0 18px 45px
rgba(0,0,0,.10);
border:1px solid #fff;
}
.arc-shop-floating strong{
display:block;
color:var(--teal-dark);
font-size:25px;
}
.arc-shop-floating span{
display:block;
margin-top:5px;
color:#718888;
font-size:10px;
font-weight:800;
letter-spacing:.5px;
}
.arc-shop-floating.one{
left:2%;
top:35px;
animation:
arcShopSmallFloat
4s
ease-in-out
infinite;
}
.arc-shop-floating.two{
right:0;
bottom:30px;
animation:
arcShopSmallFloat
4s
1s
ease-in-out
infinite;
}
/* =========================================================
SECTION HEADING
========================================================= */
.arc-shop-heading{
max-width:800px;
margin:
0 auto 60px;
text-align:center;
}
.arc-shop-label{
color:var(--teal);
font-size:11px;
font-weight:900;
letter-spacing:2px;
text-transform:uppercase;
}
.arc-shop-heading h2{
margin:
13px 0 17px;
font-size:
clamp(38px,4.5vw,62px);
line-height:1;
letter-spacing:-3px;
color:var(--dark);
}
.arc-shop-heading h2 span{
color:var(--teal);
}
.arc-shop-heading p{
margin:0;
color:var(--text);
font-size:15px;
line-height:1.85;
}
/* =========================================================
COLLECTIONS SECTION
========================================================= */
.arc-shop-collections{
width:100%;
padding:
110px 7%;
background:#fff;
}
.arc-shop-collection-grid{
max-width:1250px;
margin:auto;
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:22px;
}
/* =========================================================
COLLECTION CARD
========================================================= */
.arc-shop-card{
min-height:420px;
padding:30px;
border-radius:30px;
background:
linear-gradient(
145deg,
#f5fcfb,
#e2f7f5
);
border:
1px solid
#d9eeee;
position:relative;
overflow:hidden;
display:flex;
flex-direction:column;
justify-content:flex-end;
transition:
transform .4s ease,
box-shadow .4s ease;
}
.arc-shop-card:hover{
transform:translateY(-10px);
box-shadow:
0 30px 65px
rgba(8,127,124,.13);
}
.arc-shop-card::before{
content:"";
position:absolute;
width:230px;
height:230px;
border-radius:50%;
top:-90px;
right:-80px;
background:
rgba(32,170,167,.13);
transition:.5s;
}
.arc-shop-card:hover::before{
transform:scale(1.3);
}
.arc-shop-card::after{
content:"";
position:absolute;
width:180px;
height:180px;
border-radius:50%;
top:65px;
left:50%;
transform:
translateX(-50%);
border:
1px solid
rgba(32,170,167,.18);
}
/* =========================================================
CARD VISUAL
========================================================= */
.arc-shop-card-visual{
position:absolute;
top:50px;
left:50%;
transform:
translateX(-50%);
width:170px;
height:170px;
border-radius:50%;
background:
linear-gradient(
145deg,
#51d4cf,
#07817e
);
box-shadow:
0 25px 50px
rgba(8,127,124,.16);
display:flex;
align-items:center;
justify-content:center;
transition:.4s;
}
.arc-shop-card:hover
.arc-shop-card-visual{
transform:
translateX(-50%)
translateY(-8px)
scale(1.05);
}
.arc-shop-card-visual span{
color:#fff;
font-size:13px;
font-weight:900;
letter-spacing:2px;
text-align:center;
padding:15px;
}
/* =========================================================
CARD CONTENT
========================================================= */
.arc-shop-card-content{
position:relative;
z-index:5;
}
.arc-shop-card-category{
display:inline-block;
margin-bottom:10px;
color:var(--teal-dark);
font-size:10px;
font-weight:900;
letter-spacing:1.5px;
}
.arc-shop-card h3{
margin:0 0 8px;
font-size:25px;
line-height:1.1;
letter-spacing:-.5px;
}
.arc-shop-card h4{
margin:0 0 12px;
color:var(--teal-dark);
font-size:15px;
line-height:1.4;
}
.arc-shop-card p{
margin:0 0 20px;
color:var(--text);
font-size:13px;
line-height:1.7;
}
.arc-shop-button{
display:inline-flex;
align-items:center;
justify-content:center;
padding:13px 18px;
border-radius:50px;
background:var(--teal);
color:#fff;
font-size:10px;
font-weight:900;
letter-spacing:.8px;
transition:.3s;
}
.arc-shop-button:hover{
background:var(--teal-dark);
transform:
translateY(-3px);
box-shadow:
0 10px 25px
rgba(8,127,124,.20);
}
/* =========================================================
NEW ARRIVALS + BEST SELLERS
========================================================= */
.arc-shop-highlight{
width:100%;
padding:
110px 7%;
background:
linear-gradient(
135deg,
#f2fbfa,
#def5f3
);
}
.arc-shop-highlight-grid{
max-width:1250px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}
.arc-shop-highlight-card{
min-height:300px;
padding:42px;
border-radius:30px;
background:#fff;
border:
1px solid
#dcefee;
position:relative;
overflow:hidden;
transition:.4s;
}
.arc-shop-highlight-card:hover{
transform:translateY(-8px);
box-shadow:
0 25px 55px
rgba(8,127,124,.12);
}
.arc-shop-highlight-card::before{
content:"";
position:absolute;
width:220px;
height:220px;
right:-100px;
top:-100px;
border-radius:50%;
background:
rgba(32,170,167,.09);
}
.arc-shop-highlight-number{
width:54px;
height:54px;
border-radius:16px;
background:var(--mint);
color:var(--teal-dark);
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
font-weight:900;
margin-bottom:25px;
}
.arc-shop-highlight-card h3{
margin:0 0 8px;
font-size:28px;
letter-spacing:-1px;
}
.arc-shop-highlight-card h4{
margin:0 0 13px;
color:var(--teal-dark);
font-size:16px;
}
.arc-shop-highlight-card p{
max-width:500px;
margin:0 0 25px;
color:var(--text);
font-size:14px;
line-height:1.75;
}
/* =========================================================
B2B SECTION
========================================================= */
.arc-shop-b2b{
width:100%;
padding:
105px 7%;
background:
linear-gradient(
135deg,
var(--teal-deep),
var(--teal)
);
color:#fff;
position:relative;
overflow:hidden;
}
.arc-shop-b2b::before{
content:"";
position:absolute;
width:600px;
height:600px;
right:-280px;
top:-300px;
border-radius:50%;
border:
1px solid
rgba(255,255,255,.14);
box-shadow:
0 0 0 60px
rgba(255,255,255,.025),
0 0 0 120px
rgba(255,255,255,.018);
}
.arc-shop-b2b-inner{
max-width:1150px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:50px;
position:relative;
z-index:5;
}
.arc-shop-b2b-content{
max-width:750px;
}
.arc-shop-b2b-label{
color:#a6fffb;
font-size:11px;
font-weight:900;
letter-spacing:2px;
}
.arc-shop-b2b h2{
margin:
14px 0 18px;
font-size:
clamp(38px,5vw,64px);
line-height:1;
letter-spacing:-3px;
}
.arc-shop-b2b p{
margin:0;
color:
rgba(255,255,255,.72);
font-size:15px;
line-height:1.8;
}
.arc-shop-b2b-button{
flex-shrink:0;
display:inline-flex;
align-items:center;
justify-content:center;
padding:
18px 27px;
border-radius:50px;
background:#fff;
color:var(--teal-dark);
font-size:12px;
font-weight:900;
transition:.3s;
box-shadow:
0 15px 35px
rgba(0,0,0,.13);
}
.arc-shop-b2b-button:hover{
transform:
translateY(-5px);
}
.arc-shop-b2b-note{
margin-top:18px !important;
font-size:11px !important;
color:
rgba(255,255,255,.52)
!important;
}
/* =========================================================
FOOTER — ORIGINAL ARCANUS STRUCTURE
========================================================= */
.arc-shop-footer{
width:100%;
background:#063f3e;
color:#fff;
padding:
75px 6%
25px;
}
.arc-shop-footer-container{
max-width:1300px;
margin:auto;
}
.arc-shop-footer-grid{
display:grid;
grid-template-columns:
1.5fr
1fr
1fr
1fr;
gap:55px;
}
.arc-shop-footer-logo{
display:flex;
align-items:center;
gap:14px;
margin-bottom:17px;
}
.arc-shop-footer-logo-mark{
width:55px;
height:55px;
flex-shrink:0;
border-radius:50%;
background:
linear-gradient(
145deg,
#54d7d2,
#087f7c
);
position:relative;
}
.arc-shop-footer-logo-mark::before{
content:"";
position:absolute;
width:30px;
height:12px;
left:12px;
top:20px;
border-top:4px solid #fff;
border-bottom:4px solid #fff;
border-radius:50%;
}
.arc-shop-footer-logo-mark::after{
content:"";
position:absolute;
width:6px;
height:6px;
border-radius:50%;
background:#fff;
left:24px;
top:23px;
box-shadow:
-17px 0 0 #fff,
17px 0 0 #fff;
}
.arc-shop-footer-brand h3{
margin:0;
font-size:20px;
letter-spacing:2px;
}
.arc-shop-footer-brand small{
display:block;
margin-top:4px;
color:#91efeb;
font-size:9px;
letter-spacing:2px;
}
.arc-shop-footer-brand p{
margin:
16px 0 0;
color:
rgba(255,255,255,.62);
font-size:13px;
line-height:1.8;
}
.arc-shop-footer-col h4{
margin:
0 0 20px;
color:#9ff7f3;
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
}
.arc-shop-footer-col a{
display:block;
margin-bottom:12px;
color:
rgba(255,255,255,.68);
font-size:13px;
transition:.3s;
}
.arc-shop-footer-col a:hover{
color:#fff;
transform:
translateX(4px);
}
.arc-shop-footer-bottom{
max-width:1300px;
margin:
50px auto 0;
padding-top:22px;
border-top:
1px solid
rgba(255,255,255,.12);
display:flex;
align-items:center;
justify-content:space-between;
gap:25px;
color:
rgba(255,255,255,.48);
font-size:11px;
}
.arc-shop-footer-links{
display:flex;
flex-wrap:wrap;
gap:18px;
}
.arc-shop-footer-links a{
color:
rgba(255,255,255,.48);
transition:.3s;
}
.arc-shop-footer-links a:hover{
color:#fff;
}
/* =========================================================
SCROLL REVEAL
========================================================= */
.arc-shop-page .arc-shop-reveal{
opacity:0;
transform:
translateY(35px);
transition:
opacity .8s ease,
transform .8s ease;
}
.arc-shop-page .arc-shop-reveal.show{
opacity:1;
transform:
translateY(0);
}
/* =========================================================
ANIMATIONS
========================================================= */
@keyframes arcShopUp{
from{
opacity:0;
transform:
translateY(25px);
}
to{
opacity:1;
transform:
translateY(0);
}
}
@keyframes arcShopFloat{
0%,100%{
transform:
translateY(0)
rotate(-8deg);
}
50%{
transform:
translateY(-14px)
rotate(-5deg);
}
}
@keyframes arcShopSmallFloat{
0%,100%{
transform:
translateY(0);
}
50%{
transform:
translateY(-10px);
}
}
@keyframes arcShopRotate{
from{
transform:
rotate(0);
}
to{
transform:
rotate(360deg);
}
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1100px){
.arc-shop-hero-inner{
grid-template-columns:1fr;
text-align:center;
}
.arc-shop-hero-text{
margin-left:auto;
margin-right:auto;
}
.arc-shop-hero-art{
min-height:390px;
}
.arc-shop-collection-grid{
grid-template-columns:
repeat(2,1fr);
}
.arc-shop-b2b-inner{
flex-direction:column;
align-items:flex-start;
}
.arc-shop-footer-grid{
grid-template-columns:
1.5fr 1fr 1fr;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.arc-shop-top{
font-size:8px;
letter-spacing:.7px;
gap:7px;
}
.arc-shop-brand{
padding:
18px 6%;
}
.arc-shop-logo{
width:53px;
height:53px;
}
.arc-shop-logo-inner{
width:42px;
height:42px;
}
.arc-shop-brand-text strong{
font-size:16px;
letter-spacing:2px;
}
.arc-shop-brand-text span{
font-size:7px;
letter-spacing:1.7px;
}
.arc-shop-hero{
min-height:auto;
}
.arc-shop-hero-inner{
padding:
145px 6% 65px;
gap:15px;
}
.arc-shop-hero h1{
font-size:
clamp(45px,12vw,62px);
letter-spacing:-3px;
}
.arc-shop-hero-text{
font-size:14px;
}
.arc-shop-hero-art{
min-height:350px;
}
.arc-shop-main-shape{
width:275px;
height:275px;
}
.arc-shop-main-shape::before{
width:200px;
height:200px;
}
.arc-shop-main-shape::after{
font-size:30px;
letter-spacing:5px;
}
.arc-shop-floating{
padding:
12px 14px;
}
.arc-shop-floating strong{
font-size:19px;
}
.arc-shop-floating span{
font-size:8px;
}
.arc-shop-collections,
.arc-shop-highlight{
padding:
80px 6%;
}
.arc-shop-heading{
margin-bottom:40px;
}
.arc-shop-heading h2{
font-size:39px;
}
.arc-shop-collection-grid{
grid-template-columns:1fr;
gap:18px;
}
.arc-shop-card{
min-height:400px;
}
.arc-shop-highlight-grid{
grid-template-columns:1fr;
}
.arc-shop-highlight-card{
min-height:280px;
padding:32px 27px;
}
.arc-shop-b2b{
padding:
75px 7%;
}
.arc-shop-b2b-inner{
align-items:flex-start;
}
.arc-shop-b2b h2{
font-size:43px;
}
.arc-shop-b2b-button{
width:100%;
}
.arc-shop-footer{
padding:
60px 7% 25px;
}
.arc-shop-footer-grid{
grid-template-columns:1fr;
gap:38px;
}
.arc-shop-footer-bottom{
flex-direction:column;
text-align:center;
line-height:1.7;
}
.arc-shop-footer-links{
justify-content:center;
}
}
ARCANUS OUTFITTERS
SINCE 2003
QUALITY • STYLE • EXPERIENCE
ARCANUS
OUTFITTERS • SINCE 2003
SHOP ARCANUS
Discover
Our Collections.
Explore apparel across women’s, men’s and kids’
categories, with new styles and collections
introduced over time.
2003
ESTABLISHED
NEW
COLLECTIONS
SHOP ARCANUS
Explore
Our Collections
Explore apparel across women’s, men’s and kids’
categories, with new styles and collections
introduced over time.
WOMEN
COLLECTION 01
Women’s Wear
Contemporary Styles for Every Occasion
Explore kurtis, palazzo sets and other
women’s apparel designed for everyday,
festive and seasonal styling.
EXPLORE WOMEN’S WEAR
KIDS
COLLECTION 02
Kids’ Wear
Little Styles, Big Personality
Discover clothing for boys and girls,
including dresses, kurta sets, co-ord
styles and other kids’ apparel.
EXPLORE KIDS’ WEAR
NIGHT
COLLECTION 03
Night Suits
Comfort Meets Style
Explore nightwear collections for women
and children, combining comfort with
everyday style.
EXPLORE NIGHT SUITS
MEN & BOYS
COLLECTION 04
Men’s & Boys’ Wear
Everyday & Occasion Styles
Explore selected shirts, boys’ kurta sets
and other apparel for men and boys.
EXPLORE MEN’S & BOYS’ WEAR
CO-ORD
COLLECTION 05
Co-ord Sets
Coordinated. Comfortable. Contemporary.
Discover coordinated apparel styles
designed for effortless everyday fashion.
EXPLORE CO-ORD SETS
FESTIVE
COLLECTION 06
Festive & Occasion Wear
Styles for Every Celebration
Explore selected apparel for festive
occasions, celebrations and special moments.
EXPLORE FESTIVE WEAR
WHAT’S NEW
Fresh Styles.
Customer Favourites.
01
New Arrivals
Fresh Styles. New Possibilities.
Stay updated with newly introduced products
and collections.
VIEW NEW ARRIVALS
02
Best Sellers
Customer Favourites
Explore selected products and styles that
are popular across our collections.
VIEW BEST SELLERS
BUSINESS SHOPPING
Looking to Buy
for Your Business?
If you are a retailer, boutique owner,
reseller, distributor or business buyer
looking for apparel in bulk, connect with
our team.
Product availability, MOQ, pricing and
commercial terms may vary by category
and order type.
B2B BUSINESS ENQUIRY →
(function(){
/* ==========================================
SCROLL REVEAL
========================================== */
const elements =
document.querySelectorAll(
".arc-shop-page .arc-shop-reveal"
);
const observer =
new IntersectionObserver(
function(entries){
entries.forEach(function(entry){
if(entry.isIntersecting){
entry.target.classList.add("show");
observer.unobserve(
entry.target
);
}
});
},
{
threshold:.12
}
);
elements.forEach(function(element){
observer.observe(element);
});
})();
