feat(footer): implement responsive 3D isometric SVG footer scene with theme tokens
This commit is contained in:
325
src/components/IsometricFooter/IsometricFooter.module.css
Normal file
325
src/components/IsometricFooter/IsometricFooter.module.css
Normal file
@@ -0,0 +1,325 @@
|
||||
/* ==========================================================================
|
||||
Isometric Footer Component Styles
|
||||
========================================================================== */
|
||||
|
||||
.footerContainer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 16px 24px 28px 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
Header & Contact Invitation
|
||||
-------------------------------------------------------------------------- */
|
||||
.footerHeader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
width: 100%;
|
||||
max-width: 780px;
|
||||
}
|
||||
|
||||
.headerTitle {
|
||||
font-family: 'Pacifico', cursive, system-ui;
|
||||
font-weight: 400;
|
||||
font-size: clamp(2.2rem, 5.5vw, 3.6rem);
|
||||
line-height: 1.3;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 6px 0;
|
||||
word-break: break-word;
|
||||
animation: footerFadeIn 0.7s ease-out forwards;
|
||||
}
|
||||
|
||||
.headerSubtitle {
|
||||
font-size: clamp(0.85rem, 2.5vw, 1.05rem);
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 10px 0;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
animation: footerFadeIn 0.7s 0.15s ease-out both;
|
||||
}
|
||||
|
||||
/* Email Pill Button */
|
||||
.emailWrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
animation: emailScaleIn 0.6s 0.25s ease-out both;
|
||||
}
|
||||
|
||||
.emailPill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 9px 20px;
|
||||
border-radius: 9999px;
|
||||
background: var(--bg-raised);
|
||||
border: 1.5px solid var(--border-default);
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
font-size: clamp(0.76rem, 2.6vw, 0.92rem);
|
||||
font-weight: 600;
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: 0 2px 10px var(--shadow-color);
|
||||
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.emailPill:hover {
|
||||
background: var(--bg-surface);
|
||||
border-color: var(--accent-default);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 18px var(--shadow-color);
|
||||
color: var(--accent-default);
|
||||
}
|
||||
|
||||
.emailIcon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
color: var(--action-link);
|
||||
}
|
||||
|
||||
.emailText {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
3D Isometric Scene Canvas Wrapper
|
||||
-------------------------------------------------------------------------- */
|
||||
.sceneContainer {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.sceneContainer svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 480px;
|
||||
display: block;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
Synchronized Contact Cards Grid
|
||||
-------------------------------------------------------------------------- */
|
||||
.contactCardsSection {
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
padding: 0 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.contactCardsGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contactCard {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 12px 18px;
|
||||
border-radius: 14px;
|
||||
background: var(--bg-raised);
|
||||
border: 1.5px solid var(--border-default);
|
||||
text-decoration: none;
|
||||
color: var(--text-primary);
|
||||
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
box-shadow: 0 2px 8px var(--shadow-color);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.contactCard:hover,
|
||||
.contactCard.active {
|
||||
border-color: var(--accent-default);
|
||||
background: var(--bg-surface);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 22px var(--shadow-color);
|
||||
color: var(--accent-default);
|
||||
}
|
||||
|
||||
.contactCardIconWrap {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 10px;
|
||||
background: var(--bg-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--accent-default);
|
||||
flex-shrink: 0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.contactCard:hover .contactCardIconWrap,
|
||||
.contactCard.active .contactCardIconWrap {
|
||||
transform: scale(1.08);
|
||||
background: var(--accent-default);
|
||||
color: var(--action-primary-fg);
|
||||
}
|
||||
|
||||
.contactCardInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.contactCardName {
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.contactCardLabel {
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.contactCard:hover .contactCardLabel,
|
||||
.contactCard.active .contactCardLabel {
|
||||
color: var(--accent-default);
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
Animations
|
||||
-------------------------------------------------------------------------- */
|
||||
@keyframes footerFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-16px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes emailScaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
Responsive Media Queries
|
||||
-------------------------------------------------------------------------- */
|
||||
@media (max-width: 900px) {
|
||||
.footerContainer {
|
||||
padding: 36px 20px 24px 20px;
|
||||
}
|
||||
|
||||
.contactCardsGrid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.contactCard {
|
||||
padding: 10px 14px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.contactCardIconWrap {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.footerContainer {
|
||||
padding: 28px 16px 20px 16px;
|
||||
}
|
||||
|
||||
.contactCardsGrid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.contactCard {
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
.sceneContainer svg {
|
||||
max-height: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.footerContainer {
|
||||
padding: 22px 12px 16px 12px;
|
||||
}
|
||||
|
||||
.headerTitle {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.headerSubtitle {
|
||||
font-size: 0.88rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.emailPill {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.sceneContainer svg {
|
||||
max-height: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.emailPill {
|
||||
padding: 7px 12px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.contactCardsGrid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 560px) and (orientation: landscape) {
|
||||
.sceneContainer svg {
|
||||
max-height: 240px;
|
||||
}
|
||||
|
||||
.footerContainer {
|
||||
padding: 16px 16px 12px 16px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user