/* ==========================================================================
Arshan – Footer components (12 styles)
Load after style.css. Each footer is self-contained:
Footers are container-query aware: columns reflow based on the footer's
own width, so they work full width, in cards or in narrow layouts.
--------------------------------------------------------------------------
0. Base & building blocks 4. Ecommerce (04) 8. Image (08)
1. Bottom bar 5. Minimal (05) 9. Retail (10)
2. Newsletter band (02,09) 6. Big heading (06) 10. Instagram (11)
3. Dark (03, 07, 11) 7. Contact row (07) 11. Split CTA (12)
12. Responsive
========================================================================== */
/* 0. Base & building blocks -------------------------------------------- */
.ftr {
--ftr-bg: #fff; --ftr-fg: var(--muted); --ftr-head: var(--ink); --ftr-line: var(--line); --ftr-accent: var(--primary);
--ftr-pad: 36px;
position: relative; overflow: hidden; isolation: isolate;
container-type: inline-size; container-name: ftr;
background: var(--ftr-bg); color: var(--ftr-fg); font-size: 13.5px; line-height: 1.6;
}
.ftr a { transition: color .2s, background-color .2s, border-color .2s; }
.ftr__inner { position: relative; z-index: 1; padding: var(--ftr-pad) var(--ftr-pad) 0; }
.ftr__main { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); gap: 28px 32px; padding-bottom: 30px; }
.ftr__main--2 { grid-template-columns: minmax(0, 1fr) auto; }
.ftr-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; letter-spacing: 0; color: var(--ftr-head); }
.ftr-logo svg { width: 32px; height: 32px; flex-shrink: 0; }
.ftr-logo--lg { font-size: 34px; gap: 14px; }
.ftr-logo--lg svg { width: 46px; height: 46px; }
.ftr-logo--neutral svg { --logo-fill: #5b5650; --logo-ring: #fff; }
.ftr-brand p { margin: 14px 0 18px; max-width: 30ch; }
.ftr-social { display: flex; flex-wrap: wrap; gap: 6px; }
.ftr-social a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--ftr-head); }
.ftr-social a:hover { background: var(--ftr-accent); color: #fff; }
.ftr-social .icon { width: 15px; height: 15px; }
.ftr-col h4, .ftr-col .ar-h4 { margin-bottom: 14px; font-size: 14px; letter-spacing: 0; color: var(--ftr-head); }
.ftr-col li + li { margin-top: 8px; }
.ftr-col a:hover { color: var(--ftr-accent); }
/* 1. Bottom bar --------------------------------------------------------- */
.ftr__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 18px 0; border-top: 1px solid var(--ftr-line); font-size: 12.5px; }
.ftr-legal { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.ftr-legal a:hover { color: var(--ftr-accent); }
.ftr-love { color: #ef3e5c; }
/* 2. Newsletter band (02, 09) ------------------------------------------ */
.ftr-news { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: 28px var(--ftr-pad); background: radial-gradient(400px 160px at 30% 120%, rgba(180,165,255,.45), transparent 70%), linear-gradient(110deg, #f1eeff, #e6e1ff); }
.ftr-news h3 { font-size: 21px; letter-spacing: 0; color: var(--ink); }
.ftr-news p { font-size: 12.5px; color: var(--muted); margin-top: 4px; max-width: 46ch; }
.ftr-form { flex: 1 1 280px; max-width: 360px; }
.ftr-form__field { display: flex; align-items: center; padding: 5px 5px 5px 18px; background: #fff; border: 1px solid #e3e0fb; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
.ftr-form__field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,76,240,.12); }
.ftr-form input { flex: 1; min-width: 0; height: 38px; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--ink); outline: none; }
.ftr-form input::placeholder { color: var(--muted-2); }
.ftr-form button { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; }
.ftr-form button:hover { background: var(--primary-600); }
.ftr-form button .icon { width: 16px; height: 16px; }
.ftr-form .newsletter__msg { padding-left: 18px; margin-top: 6px; min-height: 18px; font-size: 12px; color: var(--primary); }
.ftr-news--square .ftr-form__field { border-radius: 10px; }
.ftr-news--square .ftr-form button { border-radius: 8px; }
/* 3. Dark (03, 07, 11) -------------------------------------------------- */
.ftr--dark { --ftr-bg: #0e1230; --ftr-fg: rgba(255,255,255,.66); --ftr-head: #fff; --ftr-line: rgba(255,255,255,.1); --ftr-accent: #a99bff; --ftr-nav: rgba(255,255,255,.85); }
.ftr--dark .ftr-social a:hover { background: var(--primary); color: #fff; }
.ftr-waves::before { /* flowing line pattern */
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
background:
radial-gradient(600px 300px at 85% 110%, rgba(91,76,240,.45), transparent 70%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%237c6cf6' stroke-opacity='.35'%3E%3Cpath d='M0 260C150 200 250 300 400 220S560 150 600 170'/%3E%3Cpath d='M0 270C150 212 250 310 400 232S560 164 600 184'/%3E%3Cpath d='M0 280C150 224 250 320 400 244S560 178 600 198'/%3E%3Cpath d='M0 290C150 236 250 330 400 256S560 192 600 212'/%3E%3Cpath d='M0 300C150 248 250 340 400 268S560 206 600 226'/%3E%3C/g%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
.ftr-city::before { /* subtle skyline on the corporate footer */
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
background:
linear-gradient(90deg, #0e1230 35%, transparent 75%),
repeating-linear-gradient(90deg, rgba(120,140,220,.12) 0 2px, transparent 2px 14px),
linear-gradient(0deg, transparent 20%, rgba(70,90,170,.25) 100%);
clip-path: polygon(50% 100%, 50% 30%, 62% 30%, 62% 10%, 72% 10%, 72% 40%, 82% 40%, 82% 0, 92% 0, 92% 25%, 100% 25%, 100% 100%);
}
/* 4. Ecommerce (04) ----------------------------------------------------- */
.ftr-perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 20px 0; border-top: 1px solid var(--ftr-line); }
.ftr-perk { display: flex; align-items: center; gap: 12px; font-size: 12px; line-height: 1.4; }
.ftr-perk strong { display: block; font-size: 12.5px; color: var(--ftr-head); }
.ftr-perk .ico { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: var(--primary-50); color: var(--primary); }
.ftr-perk .ico .icon { width: 17px; height: 17px; }
.ftr-perk .ico--pink { background: #ffeef4; color: #f0508a; }
.ftr-pay { display: flex; flex-wrap: wrap; gap: 6px; }
.ftr-pay span { padding: 3px 8px; border: 1px solid var(--ftr-line); border-radius: 5px; background: #fff; font-size: 10.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
/* 5. Minimal centered (05) --------------------------------------------- */
.ftr--center { text-align: center; }
.ftr--center .ftr__main { display: flex; flex-direction: column; align-items: center; gap: 0; padding-top: 18px; }
.ftr--center .ftr-brand p { margin-inline: auto; }
.ftr--center .ftr-social { justify-content: center; margin-bottom: 24px; }
.ftr-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 36px; font-size: 14px; color: var(--ftr-nav, var(--ink-2)); }
.ftr-nav a:hover { color: var(--ftr-accent); }
.ftr-nav--start { justify-content: flex-start; gap: 6px 22px; font-size: 13px; }
/* 6. Big heading (06) --------------------------------------------------- */
.ftr-hero { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px 32px; padding-bottom: 28px; }
.ftr-hero__kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); margin-bottom: 10px; }
.ftr-hero h2 { font-size: clamp(44px, 9cqi, 76px); font-weight: 800; line-height: .95; letter-spacing: 0; }
.ftr-hero h2 span { background: linear-gradient(90deg, #5b4cf0, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ftr-start { display: flex; align-items: center; gap: 16px; max-width: 260px; }
.ftr-start__btn { display: grid; place-items: center; flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #7b6bff, var(--primary)); color: #fff; box-shadow: 0 16px 30px -12px rgba(91,76,240,.8); transition: transform .2s; }
.ftr-start__btn:hover { transform: rotate(-45deg); }
.ftr-start__btn .icon { width: 24px; height: 24px; }
.ftr-start strong { display: block; font-size: 13.5px; color: var(--ink); }
.ftr-start span:not(.ftr-start__btn) { font-size: 12.5px; line-height: 1.45; display: block; }
.ftr-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding-bottom: 24px; }
.ftr-row .ftr-logo { font-size: 18px; }
.ftr-row .ftr-logo svg { width: 26px; height: 26px; }
.ftr-row .ftr-nav { flex: 1; justify-content: flex-start; padding-left: 12px; font-size: 13px; gap: 6px 18px; }
/* 7. Contact row (07) --------------------------------------------------- */
.ftr-contact { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; padding: 18px 0; border-top: 1px solid var(--ftr-line); color: rgba(255,255,255,.85); }
.ftr-contact a, .ftr-contact span { display: inline-flex; align-items: center; gap: 10px; }
.ftr-contact .icon { width: 17px; height: 17px; }
.ftr-contact a:hover { color: #fff; }
/* 8. Image + content (08) ---------------------------------------------- */
.ftr-split { display: grid; grid-template-columns: 0.7fr 1.3fr; }
.ftr-split .ftr__inner { padding-bottom: 0; }
.ftr-media { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 260px; padding: 22px; color: #fff; overflow: hidden; background: #1a2440; }
.ftr-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ftr-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10,14,35,.75)); }
.ftr-media > * { position: relative; z-index: 1; }
.ftr-media strong { font-size: 24px; line-height: 1.1; letter-spacing: 0; }
.ftr-media span { font-size: 12px; opacity: .85; margin-top: 6px; }
/* stand-ins for photography (remove when using ![]()
) */
.ph-tower { position: absolute !important; inset: 0; z-index: 0 !important; background:
repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, transparent 1px 12px),
repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 14px),
linear-gradient(170deg, #b9cdea, #5b78ad 60%, #2c3e66);
clip-path: polygon(22% 4%, 70% 0, 100% 12%, 100% 100%, 0 100%, 0 18%); }
.ftr-media.ph-chair { background:
radial-gradient(ellipse 14% 30% at 62% 22%, #4f7a3c 0 60%, transparent 62%),
linear-gradient(#a57a4f 0 0) 62% 45% / 3% 18% no-repeat,
radial-gradient(ellipse 38% 24% at 45% 62%, #c9b49a 0 70%, transparent 72%),
linear-gradient(#8a6a46 0 0) 30% 88% / 3% 18% no-repeat,
linear-gradient(#8a6a46 0 0) 62% 88% / 3% 18% no-repeat,
linear-gradient(180deg, #f3ece3 0 74%, #e3d6c5 74%); }
/* 9. Retail / lifestyle (10) ------------------------------------------- */
.ftr--warm { --ftr-bg: linear-gradient(90deg, #fbf6ef, #fdfaf6); --ftr-accent: #8a6a46; }
.ftr--warm { background: linear-gradient(90deg, #fbf6ef, #fdfaf6); }
.ftr--warm .ftr-social a:hover { background: #2a2420; }
.ftr-split--media-right { grid-template-columns: 1.6fr 0.55fr; }
.ftr-split--media-right .ftr-media { min-height: 220px; background-color: #efe6da; }
.ftr-split--media-right .ftr-media::after { display: none; }
/* 10. Instagram (11) ---------------------------------------------------- */
.ftr-insta-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-bottom: 20px; }
.ftr-insta-head p { color: rgba(255,255,255,.85); font-size: 13px; }
.ftr-insta-head .ftr-follow { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; color: #fff; font-size: 13px; }
.ftr-follow span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--ink); transition: transform .2s; }
.ftr-follow:hover span { transform: translateX(3px); }
.ftr-follow .icon { width: 16px; height: 16px; }
.ftr-gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 20px; }
.ftr-gallery a { position: relative; aspect-ratio: 1 / 0.9; overflow: hidden; border-radius: 6px; background: var(--ph, #2a2f55); }
.ftr-gallery a img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ftr-gallery a::after { content: ""; position: absolute; inset: 0; background: rgba(91,76,240,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E") center / 26px no-repeat; opacity: 0; transition: opacity .2s; }
.ftr-gallery a:hover::after, .ftr-gallery a:focus-visible::after { opacity: 1; }
.ftr-gallery a:hover img { transform: scale(1.05); }
.ph-1 { --ph: linear-gradient(180deg, #9ec1e2 0 45%, transparent 45%), linear-gradient(160deg, transparent 40%, #3c5a4a 40%) , linear-gradient(200deg, transparent 50%, #2f4a3d 50%), #8db3d6; }
.ph-2 { --ph: repeating-linear-gradient(100deg, #d8cbbd 0 6px, #b9a796 6px 9px), #cbb9a5; }
.ph-3 { --ph: radial-gradient(ellipse 22% 30% at 50% 38%, #4f7a3c 0 70%, transparent 72%), linear-gradient(#e7dccd 0 0) 50% 82% / 26% 24% no-repeat, #f3eee8; }
.ph-4 { --ph: radial-gradient(ellipse 30% 22% at 50% 70%, #c9a57f 0 70%, transparent 72%), linear-gradient(#f4e6c8 0 0) 50% 28% / 46% 30% no-repeat, #b98d5f; }
.ph-5 { --ph: radial-gradient(circle at 50% 36%, #c9946f 0 13%, transparent 14%), radial-gradient(ellipse 22% 22% at 50% 32%, #2a1d17 0 70%, transparent 72%), radial-gradient(ellipse 40% 34% at 50% 100%, #3b3530 0 70%, transparent 72%), #d9d2c9; }
/* 11. Split CTA (12) ---------------------------------------------------- */
.ftr--soft { background: radial-gradient(500px 260px at 100% 0%, #ebe6ff, transparent 70%), radial-gradient(400px 220px at 40% 100%, #f1eeff, transparent 70%), #fbfbff; }
.ftr-cta-title { font-size: 19px; line-height: 1.3; letter-spacing: 0; color: var(--ink); margin: 14px 0 18px; max-width: 18ch; }
.ftr-cta-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius-pill); background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; margin-bottom: 18px; }
.ftr-cta-btn:hover { background: #000; }
.ftr-cta-btn .icon { width: 14px; height: 14px; }
/* 12. Responsive (container queries on each footer) -------------------- */
@container ftr (max-width: 820px) {
.ftr__inner { padding: 28px 24px 0; }
.ftr-news { padding: 22px 24px; }
.ftr-news h3 { font-size: 18px; }
.ftr__main { gap: 20px; font-size: 12.5px; grid-template-columns: 1.4fr repeat(3, 1fr); }
.ftr__main--2 { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; }
.ftr-col h4, .ftr-col .ar-h4 { font-size: 13px; margin-bottom: 10px; }
.ftr-col li + li { margin-top: 5px; }
.ftr-brand p { font-size: 12.5px; }
.ftr-social a { width: 28px; height: 28px; }
.ftr__bottom { font-size: 12px; }
.ftr-perks { gap: 10px; }
.ftr-perk { font-size: 11px; gap: 8px; }
.ftr-perk .ico { width: 30px; height: 30px; }
.ftr-gallery { gap: 8px; }
.ftr-contact { font-size: 12.5px; }
}
@container ftr (max-width: 600px) {
.ftr__main { grid-template-columns: repeat(3, 1fr); }
.ftr__main > .ftr-brand { grid-column: 1 / -1; }
.ftr__main--2 { grid-template-columns: 1fr 1fr; }
.ftr__main--2 > .ftr-brand { grid-column: auto; }
.ftr-perks { grid-template-columns: repeat(2, 1fr); }
.ftr-gallery { grid-template-columns: repeat(3, 1fr); }
.ftr-gallery a:nth-child(n+4) { display: none; }
.ftr-split { grid-template-columns: 1fr; }
.ftr-media { min-height: 200px; }
.ftr-split--media-right .ftr-media { display: none; }
.ftr-row .ftr-nav { padding-left: 0; flex-basis: 100%; order: 3; }
}
@container ftr (max-width: 480px) {
.ftr__inner { padding-inline: 18px; }
.ftr-news { padding-inline: 18px; }
.ftr__main, .ftr__main--2 { grid-template-columns: repeat(2, 1fr); }
.ftr__bottom { flex-direction: column; align-items: flex-start; }
.ftr--center .ftr__bottom { align-items: center; }
.ftr-perks { grid-template-columns: 1fr; }
.ftr-nav { gap: 6px 20px; }
.ftr-insta-head .ftr-follow { margin-left: 0; }
.ftr-contact { flex-direction: column; }
}