x
This commit is contained in:
Your Name committed
1 parent
78b722e120
commit
75770ca122
18 files changed
+1119
-318
No files matched your search
+131
-112
@@ -1,19 +1,43 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { API_BASE, type Category, type StoreSettings, type MenuItem } from '../types'
|
||||
import { useState, useEffect, type ReactNode } from 'react'
|
||||
import {
|
||||
API_BASE,
|
||||
DEFAULT_FOOTER_LAYOUT_SETTINGS,
|
||||
FooterLayoutSettingsSchema,
|
||||
type Category,
|
||||
type FooterColumn,
|
||||
type FooterLayoutSettings,
|
||||
type StoreSettings,
|
||||
type MenuItem,
|
||||
} from '../types'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { getLocalizedField } from '../utils/localization'
|
||||
|
||||
interface FooterProps {
|
||||
categories?: Category[]
|
||||
}
|
||||
|
||||
type MenuTranslation = {
|
||||
langCode?: string
|
||||
label?: string
|
||||
}
|
||||
type MenuTranslation = { langCode?: string; label?: string }
|
||||
type MenuItemWithTranslations = MenuItem & { translations?: MenuTranslation[] }
|
||||
|
||||
type MenuItemWithTranslations = MenuItem & {
|
||||
translations?: MenuTranslation[]
|
||||
const layoutClassMaps = {
|
||||
mobileColumns: { 1: 'site-footer--mobile-columns-1', 2: 'site-footer--mobile-columns-2' },
|
||||
desktopColumns: { 2: 'site-footer--desktop-columns-2', 3: 'site-footer--desktop-columns-3', 4: 'site-footer--desktop-columns-4' },
|
||||
containerWidth: { narrow: 'site-footer--container-narrow', standard: 'site-footer--container-standard', wide: 'site-footer--container-wide', full: 'site-footer--container-full' },
|
||||
verticalPadding: { sm: 'site-footer--padding-sm', md: 'site-footer--padding-md', lg: 'site-footer--padding-lg', xl: 'site-footer--padding-xl' },
|
||||
columnGap: { sm: 'site-footer--gap-sm', md: 'site-footer--gap-md', lg: 'site-footer--gap-lg', xl: 'site-footer--gap-xl' },
|
||||
headingSize: { sm: 'site-footer--heading-sm', md: 'site-footer--heading-md', lg: 'site-footer--heading-lg' },
|
||||
linkSize: { sm: 'site-footer--link-sm', md: 'site-footer--link-md', lg: 'site-footer--link-lg' },
|
||||
brandLogoSize: { sm: 'site-footer--brand-logo-sm', md: 'site-footer--brand-logo-md', lg: 'site-footer--brand-logo-lg', xl: 'site-footer--brand-logo-xl' },
|
||||
socialSize: { sm: 'site-footer--social-sm', md: 'site-footer--social-md', lg: 'site-footer--social-lg' },
|
||||
finaleMobileHeight: { compact: 'site-footer--finale-mobile-compact', medium: 'site-footer--finale-mobile-medium', large: 'site-footer--finale-mobile-large' },
|
||||
finaleDesktopHeight: { compact: 'site-footer--finale-desktop-compact', half: 'site-footer--finale-desktop-half', screen: 'site-footer--finale-desktop-screen' },
|
||||
finaleLogoSize: { sm: 'site-footer--finale-logo-sm', md: 'site-footer--finale-logo-md', lg: 'site-footer--finale-logo-lg', xl: 'site-footer--finale-logo-xl' },
|
||||
} as const
|
||||
|
||||
function normalizeFooterLayout(value: StoreSettings['footerLayout']): FooterLayoutSettings {
|
||||
const result = FooterLayoutSettingsSchema.safeParse(value)
|
||||
return result.success ? result.data : DEFAULT_FOOTER_LAYOUT_SETTINGS
|
||||
}
|
||||
|
||||
export default function Footer({ categories = [] }: FooterProps) {
|
||||
@@ -22,14 +46,12 @@ export default function Footer({ categories = [] }: FooterProps) {
|
||||
const [supportMenu, setSupportMenu] = useState<MenuItem[]>([])
|
||||
const [settings, setSettings] = useState<StoreSettings | null>(null)
|
||||
const brandName = settings?.brandName || ''
|
||||
const lang = localStorage.getItem('app_lang') || 'en'
|
||||
|
||||
const translateMenuLabel = (item: MenuItemWithTranslations) => {
|
||||
const lang = localStorage.getItem('app_lang') || 'en'
|
||||
if (lang !== 'en' && item.translations && item.translations.length > 0) {
|
||||
if (lang !== 'en' && item.translations?.length) {
|
||||
const trans = item.translations.find((translation) => translation.langCode === lang)
|
||||
if (trans && trans.label) {
|
||||
return trans.label
|
||||
}
|
||||
if (trans?.label) return trans.label
|
||||
}
|
||||
|
||||
const map: Record<string, string> = {
|
||||
@@ -42,7 +64,7 @@ export default function Footer({ categories = [] }: FooterProps) {
|
||||
'Contact': 'nav.contact',
|
||||
'Contact Us': 'nav.contact',
|
||||
'Track Order': 'nav.trackOrder',
|
||||
'Delivery & Returns': 'nav.delivery'
|
||||
'Delivery & Returns': 'nav.delivery',
|
||||
}
|
||||
return map[item.label] ? t(map[item.label]) : item.label
|
||||
}
|
||||
@@ -51,14 +73,14 @@ export default function Footer({ categories = [] }: FooterProps) {
|
||||
fetch(`${API_BASE}/menus/footer-explore`)
|
||||
.then(r => r.ok ? r.json() : null)
|
||||
.then(data => {
|
||||
if (data && data.items) setExploreMenu(data.items.sort((a: MenuItem, b: MenuItem) => a.order - b.order))
|
||||
if (data?.items) setExploreMenu(data.items.sort((a: MenuItem, b: MenuItem) => a.order - b.order))
|
||||
})
|
||||
.catch(console.error)
|
||||
|
||||
fetch(`${API_BASE}/menus/footer-support`)
|
||||
.then(r => r.ok ? r.json() : null)
|
||||
.then(data => {
|
||||
if (data && data.items) setSupportMenu(data.items.sort((a: MenuItem, b: MenuItem) => a.order - b.order))
|
||||
if (data?.items) setSupportMenu(data.items.sort((a: MenuItem, b: MenuItem) => a.order - b.order))
|
||||
})
|
||||
.catch(console.error)
|
||||
|
||||
@@ -70,109 +92,106 @@ export default function Footer({ categories = [] }: FooterProps) {
|
||||
.catch(console.error)
|
||||
}, [])
|
||||
|
||||
const hasBrandFinale = Boolean(settings?.logoUrl || brandName.trim())
|
||||
const footerLayout = normalizeFooterLayout(settings?.footerLayout)
|
||||
const showFinale = footerLayout.finale.enabled && Boolean(settings?.logoUrl || brandName.trim())
|
||||
const useCurtain = showFinale && footerLayout.finale.mode === 'curtain'
|
||||
const footerDescription = settings?.translations?.find((translation) => translation.langCode === lang)?.footerDescription
|
||||
|| settings?.footerDescription
|
||||
|| t('footer.catchphrase')
|
||||
const footerClasses = [
|
||||
'site-footer text-pop-black',
|
||||
layoutClassMaps.mobileColumns[footerLayout.mobileColumns],
|
||||
layoutClassMaps.desktopColumns[footerLayout.desktopColumns],
|
||||
layoutClassMaps.containerWidth[footerLayout.containerWidth],
|
||||
layoutClassMaps.verticalPadding[footerLayout.verticalPadding],
|
||||
layoutClassMaps.columnGap[footerLayout.columnGap],
|
||||
layoutClassMaps.headingSize[footerLayout.headingSize],
|
||||
layoutClassMaps.linkSize[footerLayout.linkSize],
|
||||
layoutClassMaps.brandLogoSize[footerLayout.brandLogoSize],
|
||||
layoutClassMaps.socialSize[footerLayout.socialSize],
|
||||
layoutClassMaps.finaleMobileHeight[footerLayout.finale.mobileHeight],
|
||||
layoutClassMaps.finaleDesktopHeight[footerLayout.finale.desktopHeight],
|
||||
layoutClassMaps.finaleLogoSize[footerLayout.finale.logoSize],
|
||||
useCurtain ? 'site-footer--finale-curtain' : 'site-footer--finale-static',
|
||||
].join(' ')
|
||||
|
||||
const columns: Record<FooterColumn, ReactNode> = {
|
||||
brand: (
|
||||
<div className="site-footer-column space-y-6">
|
||||
<div className="text-2xl font-bold tracking-widest text-pop-black">
|
||||
{settings?.logoUrl ? <img src={settings.logoUrl} alt={brandName} className="site-footer-brand-logo object-contain" /> : brandName}
|
||||
</div>
|
||||
<p className="site-footer-column-links leading-relaxed text-pop-black/60">{footerDescription}</p>
|
||||
{(settings?.facebookUrl || settings?.instagramUrl || settings?.tiktokUrl) && (
|
||||
<div className="flex gap-4">
|
||||
{settings.facebookUrl && <a href={settings.facebookUrl} target="_blank" rel="noreferrer" className="site-footer-social ui-chip border-pop-black/20 bg-transparent text-pop-black hover:border-pop-pink hover:bg-pop-pink hover:text-pop-bg" aria-label="Facebook">FB</a>}
|
||||
{settings.instagramUrl && <a href={settings.instagramUrl} target="_blank" rel="noreferrer" className="site-footer-social ui-chip border-pop-black/20 bg-transparent text-pop-black hover:border-pop-pink hover:bg-pop-pink hover:text-pop-bg" aria-label="Instagram">IG</a>}
|
||||
{settings.tiktokUrl && <a href={settings.tiktokUrl} target="_blank" rel="noreferrer" className="site-footer-social ui-chip border-pop-black/20 bg-transparent text-pop-black hover:border-pop-pink hover:bg-pop-pink hover:text-pop-bg" aria-label="TikTok">TT</a>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
explore: (
|
||||
<div className="site-footer-column space-y-4">
|
||||
<h4 className="site-footer-column-heading font-bold uppercase tracking-widest text-pop-black">{t('footer.explore')}</h4>
|
||||
<div className="site-footer-column-links flex flex-col space-y-2 text-pop-black/60">
|
||||
{exploreMenu.length > 0 ? exploreMenu.map(item => (
|
||||
<Link key={item.id} to={item.url} className="transition-colors hover:text-pop-pink">{translateMenuLabel(item)}</Link>
|
||||
)) : (
|
||||
<>
|
||||
<Link to="/" className="transition-colors hover:text-pop-pink">{t('nav.home')}</Link>
|
||||
<Link to="/shop" className="transition-colors hover:text-pop-pink">{t('nav.shop')}</Link>
|
||||
<Link to="/scent-guide" className="transition-colors hover:text-pop-pink">{t('nav.scentGuide')}</Link>
|
||||
<Link to="/about" className="transition-colors hover:text-pop-pink">{t('nav.about')}</Link>
|
||||
<Link to="/contact" className="transition-colors hover:text-pop-pink">{t('nav.contact')}</Link>
|
||||
<Link to="/faq" className="transition-colors hover:text-pop-pink">{t('nav.faq')}</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
collections: (
|
||||
<div className="site-footer-column space-y-4">
|
||||
<h4 className="site-footer-column-heading font-bold uppercase tracking-widest text-pop-black">{t('nav.collections')}</h4>
|
||||
<div className="site-footer-column-links flex flex-col space-y-2 text-pop-black/60">
|
||||
{categories.map((category) => (
|
||||
<Link key={category.id} to={`/category/${category.id}`} className="transition-colors hover:text-pop-pink">{getLocalizedField(category.name, lang)}</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
support: (
|
||||
<div className="site-footer-column space-y-4">
|
||||
<h4 className="site-footer-column-heading font-bold uppercase tracking-widest text-pop-black">
|
||||
{getLocalizedField(settings?.footerSupportHeading, lang) || t('footer.support', 'Support & Legal')}
|
||||
</h4>
|
||||
<div className="site-footer-column-links flex flex-col space-y-2 text-pop-black/60">
|
||||
{supportMenu.map(item => <Link key={item.id} to={item.url} className="transition-colors hover:text-pop-pink">{translateMenuLabel(item)}</Link>)}
|
||||
</div>
|
||||
<div className="pt-4">
|
||||
<p className="text-[10px] uppercase tracking-widest text-pop-black/40">
|
||||
{getLocalizedField(settings?.footerCopyrightText, lang) || `© ${new Date().getFullYear()} ${brandName}. ${t('footer.rights')}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
|
||||
return (
|
||||
<footer className={`site-footer text-pop-black${hasBrandFinale ? ' site-footer-with-finale' : ''}`}>
|
||||
<footer className={footerClasses}>
|
||||
<div className="site-footer-stage">
|
||||
{hasBrandFinale && (
|
||||
<section
|
||||
className="site-footer-brand-finale"
|
||||
aria-label={brandName || t('footer.brand', 'Brand')}
|
||||
>
|
||||
{settings?.logoUrl ? (
|
||||
<img
|
||||
src={settings.logoUrl}
|
||||
alt=""
|
||||
className="site-footer-finale-logo"
|
||||
/>
|
||||
) : (
|
||||
<p className="site-footer-finale-wordmark">{brandName}</p>
|
||||
)}
|
||||
{showFinale && (
|
||||
<section className="site-footer-brand-finale" aria-label={brandName || t('footer.brand', 'Brand')}>
|
||||
{settings?.logoUrl
|
||||
? <img src={settings.logoUrl} alt="" className="site-footer-finale-logo" />
|
||||
: <p className="site-footer-finale-wordmark">{brandName}</p>}
|
||||
</section>
|
||||
)}
|
||||
|
||||
<div className="site-footer-navigation bg-night-900 text-pop-black px-6 py-20 border-t border-pop-black/20">
|
||||
<div className="ui-section-inner grid grid-cols-1 gap-12 md:grid-cols-4">
|
||||
<div className="space-y-6">
|
||||
<div className="text-2xl font-bold tracking-widest text-pop-black">
|
||||
{settings?.logoUrl ? <img src={settings.logoUrl} alt={brandName} className="h-8 md:h-10 object-contain" /> : brandName}
|
||||
</div>
|
||||
<p className="text-sm leading-relaxed text-pop-black/60">
|
||||
{settings?.footerDescription || t('footer.catchphrase')}
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
{settings && (settings.facebookUrl || settings.instagramUrl || settings.tiktokUrl) ? (
|
||||
<>
|
||||
{settings.facebookUrl && (
|
||||
<a href={settings.facebookUrl} target="_blank" rel="noreferrer" className="ui-chip h-9 w-9 border-pop-black/20 bg-transparent text-[10px] text-pop-black hover:bg-pop-pink hover:border-pop-pink hover:text-pop-bg">FB</a>
|
||||
)}
|
||||
{settings.instagramUrl && (
|
||||
<a href={settings.instagramUrl} target="_blank" rel="noreferrer" className="ui-chip h-9 w-9 border-pop-black/20 bg-transparent text-[10px] text-pop-black hover:bg-pop-pink hover:border-pop-pink hover:text-pop-bg">IG</a>
|
||||
)}
|
||||
{settings.tiktokUrl && (
|
||||
<a href={settings.tiktokUrl} target="_blank" rel="noreferrer" className="ui-chip h-9 w-9 border-pop-black/20 bg-transparent text-[10px] text-pop-black hover:bg-pop-pink hover:border-pop-pink hover:text-pop-bg">TT</a>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
['IG', 'FB', 'TW', 'YT'].map((s) => (
|
||||
<a key={s} href="#" className="ui-chip h-9 w-9 border-pop-black/20 bg-transparent text-[10px] text-pop-black hover:bg-pop-pink hover:border-pop-pink hover:text-pop-bg">
|
||||
{s}
|
||||
</a>
|
||||
))
|
||||
)}
|
||||
<div className="site-footer-navigation bg-night-900 text-pop-black">
|
||||
<div className="site-footer-navigation-inner">
|
||||
{footerLayout.columns.map((column) => <div key={column}>{columns[column]}</div>)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-xs font-bold uppercase tracking-widest text-pop-black">{t('footer.explore')}</h4>
|
||||
<div className="flex flex-col space-y-2 text-sm text-pop-black/60">
|
||||
{exploreMenu.length > 0 ? (
|
||||
exploreMenu.map(item => (
|
||||
<Link key={item.id} to={item.url} className="hover:text-pop-pink transition-colors">{translateMenuLabel(item)}</Link>
|
||||
))
|
||||
) : (
|
||||
<>
|
||||
<Link to="/" className="hover:text-pop-pink transition-colors">{t('nav.home')}</Link>
|
||||
<Link to="/shop" className="hover:text-pop-pink transition-colors">{t('nav.shop')}</Link>
|
||||
<Link to="/scent-guide" className="hover:text-pop-pink transition-colors">{t('nav.scentGuide')}</Link>
|
||||
<Link to="/about" className="hover:text-pop-pink transition-colors">{t('nav.about')}</Link>
|
||||
<Link to="/contact" className="hover:text-pop-pink transition-colors">{t('nav.contact')}</Link>
|
||||
<Link to="/faq" className="hover:text-pop-pink transition-colors">{t('nav.faq')}</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-xs font-bold uppercase tracking-widest text-pop-black">{t('nav.collections')}</h4>
|
||||
<div className="flex flex-col space-y-2 text-sm text-pop-black/60">
|
||||
{categories.map((c) => (
|
||||
<Link key={c.id} to={`/category/${c.id}`} className="hover:text-pop-pink transition-colors">
|
||||
{getLocalizedField(c.name, localStorage.getItem('app_lang') || 'en')}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-xs font-bold uppercase tracking-widest text-pop-black">
|
||||
{settings?.footerSupportHeading || t('footer.support', 'Support & Legal')}
|
||||
</h4>
|
||||
<div className="flex flex-col space-y-2 text-sm text-pop-black/60">
|
||||
{supportMenu.map(item => (
|
||||
<Link key={item.id} to={item.url} className="hover:text-pop-pink transition-colors">{translateMenuLabel(item)}</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="pt-4">
|
||||
<p className="text-[10px] text-pop-black/40 uppercase tracking-widest">
|
||||
{settings?.footerCopyrightText || `© ${new Date().getFullYear()} ${brandName}. ${t('footer.rights')}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
|
||||
+61
-12
@@ -306,10 +306,55 @@ html {
|
||||
}
|
||||
|
||||
.site-footer-navigation {
|
||||
@apply relative border-t border-pop-black/10 bg-night-900;
|
||||
@apply relative border-t border-pop-black/10 bg-night-900 px-6;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.site-footer-navigation-inner {
|
||||
@apply mx-auto grid;
|
||||
}
|
||||
|
||||
.site-footer--mobile-columns-1 .site-footer-navigation-inner { @apply grid-cols-1; }
|
||||
.site-footer--mobile-columns-2 .site-footer-navigation-inner { @apply grid-cols-2; }
|
||||
.site-footer--container-narrow .site-footer-navigation-inner { max-width: 56rem; }
|
||||
.site-footer--container-standard .site-footer-navigation-inner { max-width: 80rem; }
|
||||
.site-footer--container-wide .site-footer-navigation-inner { max-width: 96rem; }
|
||||
.site-footer--container-full .site-footer-navigation-inner { max-width: none; }
|
||||
.site-footer--padding-sm .site-footer-navigation { @apply py-8; }
|
||||
.site-footer--padding-md .site-footer-navigation { @apply py-12; }
|
||||
.site-footer--padding-lg .site-footer-navigation { @apply py-20; }
|
||||
.site-footer--padding-xl .site-footer-navigation { @apply py-28; }
|
||||
.site-footer--gap-sm .site-footer-navigation-inner { @apply gap-4; }
|
||||
.site-footer--gap-md .site-footer-navigation-inner { @apply gap-8; }
|
||||
.site-footer--gap-lg .site-footer-navigation-inner { @apply gap-12; }
|
||||
.site-footer--gap-xl .site-footer-navigation-inner { @apply gap-16; }
|
||||
.site-footer--heading-sm .site-footer-column-heading { @apply text-xs; }
|
||||
.site-footer--heading-md .site-footer-column-heading { @apply text-sm; }
|
||||
.site-footer--heading-lg .site-footer-column-heading { @apply text-base; }
|
||||
.site-footer--link-sm .site-footer-column-links { @apply text-xs; }
|
||||
.site-footer--link-md .site-footer-column-links { @apply text-sm; }
|
||||
.site-footer--link-lg .site-footer-column-links { @apply text-base; }
|
||||
.site-footer--brand-logo-sm .site-footer-brand-logo { @apply h-6 w-auto; }
|
||||
.site-footer--brand-logo-md .site-footer-brand-logo { @apply h-8 w-auto md:h-10; }
|
||||
.site-footer--brand-logo-lg .site-footer-brand-logo { @apply h-12 w-auto; }
|
||||
.site-footer--brand-logo-xl .site-footer-brand-logo { @apply h-16 w-auto; }
|
||||
.site-footer--social-sm .site-footer-social { @apply h-8 w-8 text-[9px]; }
|
||||
.site-footer--social-md .site-footer-social { @apply h-9 w-9 text-[10px]; }
|
||||
.site-footer--social-lg .site-footer-social { @apply h-11 w-11 text-xs; }
|
||||
.site-footer--finale-mobile-compact .site-footer-brand-finale { min-height: 35svh; }
|
||||
.site-footer--finale-mobile-medium .site-footer-brand-finale { min-height: 55svh; }
|
||||
.site-footer--finale-mobile-large .site-footer-brand-finale { min-height: 75svh; }
|
||||
.site-footer--finale-logo-sm .site-footer-finale-logo { max-height: 4rem; max-width: min(72vw, 18rem); }
|
||||
.site-footer--finale-logo-md .site-footer-finale-logo { max-height: 6rem; max-width: min(76vw, 24rem); }
|
||||
.site-footer--finale-logo-lg .site-footer-finale-logo { max-height: 8rem; max-width: min(82vw, 32rem); }
|
||||
.site-footer--finale-logo-xl .site-footer-finale-logo { max-height: 8rem; max-width: min(82vw, 32rem); }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.site-footer--desktop-columns-2 .site-footer-navigation-inner { @apply grid-cols-2; }
|
||||
.site-footer--desktop-columns-3 .site-footer-navigation-inner { @apply grid-cols-3; }
|
||||
.site-footer--desktop-columns-4 .site-footer-navigation-inner { @apply grid-cols-4; }
|
||||
}
|
||||
|
||||
/* Desktop Fixed Curtain Reveal Effect (เปิดม่าน Logo แบบ Fixed ตาม pkh.kitizone.com) */
|
||||
@media (min-width: 1024px) {
|
||||
.global-main {
|
||||
@@ -318,11 +363,11 @@ html {
|
||||
background: var(--color-pop-bg);
|
||||
}
|
||||
|
||||
.site-footer-with-finale {
|
||||
.site-footer--finale-curtain {
|
||||
min-height: 100svh;
|
||||
}
|
||||
|
||||
.site-footer-stage {
|
||||
.site-footer--finale-curtain .site-footer-stage {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
@@ -332,32 +377,36 @@ html {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.site-footer-brand-finale {
|
||||
.site-footer--finale-curtain .site-footer-brand-finale {
|
||||
min-height: 0;
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.site-footer-finale-logo {
|
||||
@apply max-h-48 max-w-[min(68vw,48rem)];
|
||||
}
|
||||
|
||||
.site-footer-finale-wordmark {
|
||||
.site-footer--finale-curtain .site-footer-finale-wordmark {
|
||||
@apply text-8xl;
|
||||
}
|
||||
|
||||
.site-footer-navigation {
|
||||
.site-footer--finale-curtain .site-footer-navigation {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.site-footer--finale-static.site-footer--finale-desktop-compact .site-footer-brand-finale { min-height: 35svh; }
|
||||
.site-footer--finale-static.site-footer--finale-desktop-half .site-footer-brand-finale { min-height: 50svh; }
|
||||
.site-footer--finale-static.site-footer--finale-desktop-screen .site-footer-brand-finale { min-height: 100svh; }
|
||||
.site-footer--finale-curtain.site-footer--finale-desktop-compact .site-footer-stage { grid-template-rows: 35svh auto; align-content: end; }
|
||||
.site-footer--finale-curtain.site-footer--finale-desktop-half .site-footer-stage { grid-template-rows: 50svh auto; align-content: end; }
|
||||
.site-footer--finale-curtain.site-footer--finale-desktop-screen .site-footer-stage { grid-template-rows: minmax(0, 1fr) auto; }
|
||||
.site-footer--finale-logo-xl .site-footer-finale-logo { max-height: 12rem; max-width: min(68vw, 48rem); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.site-footer-stage {
|
||||
.site-footer--finale-curtain .site-footer-stage {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.site-footer-with-finale {
|
||||
.site-footer--finale-curtain {
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user