/* ================= FOOTER — MATERIAL SWATCH BOARD (v3 / brand theme) =================
Fonts required (add to ):
=================================================================== */
.site-footer {
--sw-blue: #2C4B78;
--sw-blue-deep: #1B3255;
--sw-purple: #9C4570;
--sw-purple-deep: #6E2E4F;
--sw-white: #FFFFFF;
--sw-ink: #FFFFFF;
--sw-line: rgba(255,255,255,.18);
--sw-accent: #C97AA8;
--sw-display: 'Big Shoulders Display', sans-serif;
--sw-body: 'Work Sans', sans-serif;
--sw-mono: 'Space Mono', monospace;
--sw-serif: 'Fraunces', serif;
position: relative;
background: linear-gradient(150deg, var(--sw-blue) 0%, var(--sw-blue-deep) 42%, var(--sw-purple-deep) 78%, var(--sw-purple) 100%);
color: var(--sw-ink);
font-family: var(--sw-body);
overflow: hidden;
padding: clamp(64px, 8vw, 110px) clamp(20px, 6vw, 72px) 0;
box-shadow: inset 0 0 180px rgba(0,0,0,.28);
}
/* ---- background: white/purple glow + fine grain ---- */
.fx-bg-glow {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(ellipse 60% 40% at 18% -8%, rgba(255,255,255,.14), transparent 60%), radial-gradient(ellipse 70% 50% at 50% 78%, rgba(156,69,112,.35), transparent 65%), radial-gradient(ellipse 55% 45% at 105% 105%, rgba(0,0,0,.25), transparent 60%);
}
.fx-grain {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 15px 15px;
opacity: .5;
}
.fx-inner {
position: relative;
z-index: 2;
max-width: 1240px;
margin: 0 auto;
}
/* ---- heading + logo ---- */
.sw-head-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
/*.footer-logo-plate {
flex: none;
background: var(--sw-white);
border-radius: 14px;
padding: 16px 22px;
box-shadow: 0 14px 30px rgba(0,0,0,.28);
}*/
.footer-logo {
display: block;
width: 100%;
max-width: 400px;
height: auto;
}
.sw-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--sw-mono);
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.72);
margin-bottom: 18px;
}
.sw-eyebrow::before {
content: "";
width: 8px;
height: 8px;
background: var(--sw-accent);
border-radius: 2px;
}
.sw-head h2 {
font-family: var(--sw-display);
font-weight: 800;
font-size: clamp(44px, 8vw, 104px);
line-height: .92;
letter-spacing: -.01em;
text-transform: uppercase;
margin: 0 0 20px;
color: var(--sw-white);
}
.sw-head h2 span {
display: block;
color: var(--sw-accent);
}
.sw-head p {
font-size: 15.5px;
line-height: 1.7;
color: rgba(255,255,255,.72);
max-width: 58ch;
margin: 0 0 clamp(56px, 6vw, 84px);
}
/* ---- hanging signboards (steel rail on brand bg) ---- */
.rail-wrap {
position: relative;
padding-top: 8px;
margin-bottom: clamp(60px, 7vw, 96px);
}
.rail {
position: relative;
height: 8px;
border-radius: 4px;
background: linear-gradient(180deg, #EDEFF3, #9FA7B5);
box-shadow: 0 3px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5);
}
.plank-rack {
display: flex;
flex-wrap: wrap;
gap: 26px 22px;
padding-top: 26px;
}
.plank-hang {
display: flex;
flex-direction: column;
align-items: center;
}
.peg {
width: 9px;
height: 9px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff, #A9B1BE);
box-shadow: 0 1px 2px rgba(0,0,0,.4);
margin-top: -31px;
}
.rope {
width: 1.5px;
height: 24px;
background: repeating-linear-gradient(180deg, rgba(255,255,255,.55) 0 3px, rgba(255,255,255,.2) 3px 6px);
}
.plank {
--rot: 0deg;
position: relative;
width: 128px;
padding: 20px 14px 16px;
border-radius: 6px;
background: repeating-linear-gradient(100deg, rgba(255,255,255,.07) 0 2px, transparent 2px 7px), linear-gradient(155deg, var(--pk-l), var(--pk-d));
border: 1px solid rgba(0,0,0,.3);
box-shadow: 0 10px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
transform: rotate(var(--rot));
transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.plank:hover {
transform: rotate(calc(var(--rot) * -1.6)) translateY(-5px);
box-shadow: 0 16px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.16);
}
.plank-name {
display: block;
font-family: var(--sw-display);
font-weight: 700;
font-size: 16px;
text-transform: uppercase;
color: rgba(255,250,240,.96);
line-height: 1.06;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.plank-code {
display: block;
margin-top: 10px;
font-family: var(--sw-mono);
font-size: 9.5px;
letter-spacing: .1em;
color: rgba(255,250,240,.7);
}
/* ---- plaque band: engraved brass + pewter plates mounted on a navy metal panel_FTR ---- */
.plaque-band {
position: relative;
border-radius: 10px;
padding: clamp(28px, 3.4vw, 40px);
margin-bottom: clamp(52px, 6vw, 80px);
background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px), linear-gradient(155deg, #17263F, #0A1424);
box-shadow: 0 18px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
}
.rivet {
position: absolute;
width: 9px;
height: 9px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #d9d3c6, #6b665c);
box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.25);
}
.rivet.tl {
top: 12px;
left: 12px;
}
.rivet.tr {
top: 12px;
right: 12px;
}
.rivet.bl {
bottom: 12px;
left: 12px;
}
.rivet.br {
bottom: 12px;
right: 12px;
}
.panels_FTR {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 18px;
}
.plaque {
position: relative;
border-radius: 5px;
padding: 26px 28px 22px;
background: repeating-linear-gradient(96deg, rgba(255,255,255,.10) 0 1px, transparent 1px 3px), linear-gradient(160deg, var(--pl-l), var(--pl-d));
box-shadow: 0 8px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -6px 14px rgba(0,0,0,.18);
}
.plaque.brass {
--pl-l: #EAC97C;
--pl-d: #B4863A;
}
.plaque.pewter {
--pl-l: #C7CBCE;
--pl-d: #8B9094;
}
.plaque-screw {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff, #7a7a7a);
box-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.plaque-screw::after {
content: "";
position: absolute;
top: 50%;
left: 8%;
right: 8%;
height: 1px;
background: rgba(0,0,0,.5);
transform: translateY(-50%) rotate(20deg);
}
.plaque-screw.tl {
top: 9px;
left: 9px;
}
.plaque-screw.tr {
top: 9px;
right: 9px;
}
.plaque-screw.bl {
bottom: 9px;
left: 9px;
}
.plaque-screw.br {
bottom: 9px;
right: 9px;
}
.panel_FTR-label {
display: flex;
align-items: baseline;
gap: 9px;
margin: 0 0 18px;
}
.panel_FTR-label .num {
font-family: var(--sw-mono);
font-size: 10px;
letter-spacing: .1em;
color: rgba(34,20,6,.55);
}
.panel_FTR-label .txt {
font-family: var(--sw-serif);
font-style: italic;
font-weight: 500;
font-size: 19px;
color: rgba(30,20,6,.82);
text-shadow: 0 1px 0 rgba(255,255,255,.4), 0 -1px 0 rgba(0,0,0,.18);
}
.plaque.pewter .panel_FTR-label .txt,
.plaque.pewter .panel_FTR-label .num {
color: rgba(20,22,24,.78);
}
.panel_FTR-rule {
border: none;
height: 1px;
background: rgba(0,0,0,.18);
margin: 0 0 18px;
position: relative;
}
.panel_FTR-rule::after {
content: "";
position: absolute;
top: 1px;
left: 0;
right: 0;
height: 1px;
background: rgba(255,255,255,.35);
}
.spec-row {
display: flex;
align-items: flex-start;
gap: 13px;
padding: 11px 0;
border-bottom: 1px solid rgba(0,0,0,.14);
}
.spec-row:last-child {
border-bottom: none;
}
.spec-row .ic {
flex: none;
width: 15px;
height: 15px;
margin-top: 2px;
color: rgba(34,20,6,.55);
}
.spec-row .ic svg {
width: 100%;
height: 100%;
}
.spec-row .body {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.spec-row .k {
font-family: var(--sw-mono);
font-size: 9px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(34,20,6,.5);
}
.spec-row .v {
font-family: var(--sw-body);
font-weight: 600;
font-size: 14.5px;
color: rgba(30,18,4,.86);
text-decoration: none;
text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 -1px 0 rgba(0,0,0,.15);
}
.spec-row a.v:hover {
color: #5a3c0c;
}
.index-list {
list-style: none;
margin: 0;
padding: 0;
}
.index-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 0;
border-bottom: 1px solid rgba(0,0,0,.14);
}
.index-list li:last-child {
border-bottom: none;
}
.index-list .no {
font-family: var(--sw-serif);
font-style: italic;
font-size: 13.5px;
color: rgba(20,22,24,.55);
width: 18px;
flex: none;
}
.index-list a {
font-family: var(--sw-body);
font-weight: 600;
font-size: 14.5px;
color: rgba(18,20,22,.85);
text-decoration: none;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,.4), 0 -1px 0 rgba(0,0,0,.12);
}
.index-list a::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
height: 1px;
width: 0;
background: rgba(18,20,22,.7);
transition: width .3s ease;
}
.index-list a:hover::after {
width: 100%;
}
.index-list .leader {
flex: 1;
border-bottom: 1px dotted rgba(0,0,0,.22);
height: 0;
margin: 0 4px 4px;
}
/* ---- bottom bar ---- */
.footer-bottom {
position: relative;
z-index: 2;
border-top: 1px solid rgba(255,255,255,.22);
padding: 22px 4px 26px;
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
align-items: center;
justify-content: space-between;
}
.footer-bottom p {
margin: 0;
font-family: var(--sw-mono);
font-size: 10.5px;
letter-spacing: .05em;
color: rgba(255,255,255,.65);
}
.footer-bottom a {
color: var(--sw-white);
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,.35);
}
.footer-bottom a:hover {
color: var(--sw-accent);
border-color: var(--sw-accent);
}
@media (max-width: 820px) {
.panels_FTR {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.plank {
width: 104px;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
}
.sw-head-row {
flex-direction: column;
}
.footer-logo-plate {
align-self: flex-start;
}
}