/* ============================================================ SUBSCRIPTION LANDLORD APP — FOOTER CSS File: footer-subscription.css Prefix: sft- (Subscription Footer) Design language: Deep navy base with a bold indigo/violet gradient accent bar at the top. Clean three-column layout. Social icons as glowing gradient pill buttons — modern SaaS feel. Zero-collision guarantee: sft- is used NOWHERE else in this project. Safe alongside: ft- sch- auth- sc- ud- pf- pp- Requires Google Fonts loaded in the layout : DM Sans 300/400/500/600 + Syne 700/800 ============================================================ */ /* ══════════════════════════════════════════════════════════════ CSS CUSTOM PROPERTIES Edit only this block to retheme the entire footer. ══════════════════════════════════════════════════════════════ */ :root { /* ── Palette ── */ --sft-bg: #0f172a; /* very dark navy */ --sft-bg-cols: #0f172a; /* columns area background */ --sft-bg-bottom: #080f1e; /* deeper shade for copyright strip */ --sft-accent-start: #0033cc; /* Musreach blue — matches logo & buttons */ --sft-accent-mid: #0044ee; /* slightly lighter blue mid-point */ --sft-accent-end: #3366ff; /* bright blue end of gradient */ /* ── Text ── */ --sft-text: #94a3b8; /* slate-400 body text */ --sft-text-bright: #e2e8f0; /* headings, brand name */ --sft-text-muted: #475569; /* copyright / faint text */ --sft-link: #94a3b8; --sft-link-hover: #f1f5f9; /* ── Borders / dividers ── */ --sft-border: rgba(255,255,255,0.06); /* ── Social icon colours (each platform branded) ── */ --sft-fb-start: #1877f2; --sft-fb-end: #0e5bb5; --sft-tw-start: #1da1f2; --sft-tw-end: #0b7dbf; --sft-ig-start: #f09433; --sft-ig-mid: #e6683c; --sft-ig-end: #bc1888; /* ── Shape / spacing ── */ --sft-radius-social: 12px; --sft-padding-v: 56px; --sft-padding-h: 32px; --sft-col-gap: 52px; /* ── Typography ── */ --sft-font-body: 'DM Sans', Arial, sans-serif; --sft-font-display: 'Syne', Arial, sans-serif; } /* ══════════════════════════════════════════════════════════════ FOOTER SHELL Full-width dark bar. margin-top: auto pushes it to the bottom when body uses display:flex / flex-direction:column. ══════════════════════════════════════════════════════════════ */ .sft-footer { background-color: var(--sft-bg); color: var(--sft-text); font-family: var(--sft-font-body); font-size: 14px; line-height: 1.7; margin-top: auto; position: relative; } /* Bold indigo→violet→blue gradient bar across the very top */ .sft-footer::before { content: ''; display: block; height: 4px; background: linear-gradient(90deg, var(--sft-accent-start) 0%, var(--sft-accent-mid) 50%, var(--sft-accent-end) 100%); } /* ══════════════════════════════════════════════════════════════ INNER GRID Three-column layout on desktop; collapses to single column on mobile. Brand column is wider (2fr). ══════════════════════════════════════════════════════════════ */ .sft-inner { max-width: 1200px; margin: 0 auto; padding: var(--sft-padding-v) var(--sft-padding-h); display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sft-col-gap); align-items: start; } .sft-col { display: flex; flex-direction: column; } /* ══════════════════════════════════════════════════════════════ BRAND COLUMN Company name, decorative accent line, and address. ══════════════════════════════════════════════════════════════ */ /* Company name — links to admin login */ .sft-brand-name { font-family: var(--sft-font-display); font-size: 24px; font-weight: 800; color: var(--sft-text-bright); text-decoration: none; letter-spacing: -0.3px; display: block; margin-bottom: 6px; transition: color 0.2s ease; } .sft-brand-name:hover { color: #fff; } /* Gradient underline accent below brand name */ .sft-brand-rule { width: 40px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--sft-accent-start), var(--sft-accent-mid)); margin: 10px 0 14px; } .sft-brand-address { font-size: 13px; color: var(--sft-text); margin: 0; line-height: 1.65; } /* Short tagline / descriptor below address */ .sft-brand-tagline { font-size: 12px; color: var(--sft-text-muted); margin-top: 10px; font-style: italic; } /* ══════════════════════════════════════════════════════════════ COLUMN HEADINGS ══════════════════════════════════════════════════════════════ */ .sft-col-heading { font-family: var(--sft-font-display); font-size: 11px; font-weight: 700; color: var(--sft-text-bright); text-transform: uppercase; letter-spacing: 1.2px; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--sft-border); } /* ══════════════════════════════════════════════════════════════ LINK LIST (Company Links column) ══════════════════════════════════════════════════════════════ */ .sft-list { list-style: none; padding: 0; margin: 0; } .sft-list li { margin-bottom: 10px; } .sft-list a { color: var(--sft-link); text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s ease, padding-left 0.2s ease; } /* Tiny arrow that appears on hover */ .sft-list a::before { content: '›'; font-size: 16px; opacity: 0; transform: translateX(-4px); transition: opacity 0.2s ease, transform 0.2s ease; } .sft-list a:hover { color: var(--sft-link-hover); padding-left: 6px; } .sft-list a:hover::before { opacity: 1; transform: translateX(0); } /* ══════════════════════════════════════════════════════════════ SOCIAL ICONS (Follow Us column) Original PNG image colours are preserved — NO filter applied. Each icon sits in a rounded card with a platform-coloured border and a subtle glow on hover. Layout: horizontal row of square tiles with icon + label. ══════════════════════════════════════════════════════════════ */ .sft-social-grid { display: flex; flex-direction: column; gap: 10px; } /* Each social link — pill with original icon + platform border */ .sft-social-btn { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: var(--sft-radius-social); background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.10); text-decoration: none; font-size: 13px; font-weight: 600; color: var(--sft-text-bright); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; position: relative; overflow: hidden; } .sft-social-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; } /* Image wrapper — white circle background so PNG icons always show correctly */ .sft-social-btn-icon { width: 30px; height: 30px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.2s ease; } .sft-social-btn:hover .sft-social-btn-icon { transform: scale(1.08); } /* Original PNG image — NO filter, colours show exactly as-is */ .sft-social-btn img { width: 18px; height: 18px; display: block; flex-shrink: 0; } /* Platform-specific border colours on hover */ .sft-social-btn--facebook:hover { border-color: #1877f2; box-shadow: 0 4px 16px rgba(24,119,242,0.25); } .sft-social-btn--twitter:hover { border-color: rgba(255,255,255,0.35); box-shadow: 0 4px 16px rgba(255,255,255,0.08); } .sft-social-btn--instagram:hover { border-color: #e1306c; box-shadow: 0 4px 16px rgba(225,48,108,0.25); } /* ══════════════════════════════════════════════════════════════ BOTTOM COPYRIGHT BAR ══════════════════════════════════════════════════════════════ */ .sft-bottom { background-color: var(--sft-bg-bottom); border-top: 1px solid var(--sft-border); padding: 16px var(--sft-padding-h); text-align: center; } .sft-bottom p, .sft-bottom span { font-size: 13px; color: var(--sft-text-muted); margin: 0; } /* Dashboard link shown to authenticated users */ .sft-bottom-dash-link { color: var(--sft-text-muted); text-decoration: none; font-size: 13px; font-weight: 600; transition: color 0.2s ease; display: inline-block; margin-bottom: 6px; } .sft-bottom-dash-link:hover { color: var(--sft-text-bright); } /* Barely-visible admin entry link for guests */ .sft-hidden-link { color: rgba(255,255,255,0.08); text-decoration: none; font-size: 12px; transition: color 0.2s ease; } .sft-hidden-link:hover { color: rgba(255,255,255,0.25); } /* ══════════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .sft-inner { grid-template-columns: 1fr 1fr; gap: 36px; } /* Brand spans full width on tablet */ .sft-col:first-child { grid-column: 1 / -1; } } @media (max-width: 600px) { .sft-inner { grid-template-columns: 1fr; padding: 40px 20px; text-align: center; gap: 30px; } .sft-brand-rule { margin-left: auto; margin-right: auto; } .sft-social-grid { align-items: center; } .sft-list a:hover { padding-left: 0; } .sft-bottom { padding: 14px 20px; } }