/* ==========================================================
Straight Fence Co. — Squarespace 7.1 (Case-style feel)
Paste CSS into: Design → Custom CSS
Paste JS into: Settings → Advanced → Code Injection → Footer
========================================================== */
/* =======================
CUSTOM CSS
======================= */
:root{
/* 1) Replace these with your Squarespace file URLs */
--sf-logo-full: url("PASTE_FULL_LOGO_URL_HERE"); /* full shield logo */
--sf-logo-mark: url("PASTE_MARK_LOGO_URL_HERE"); /* icon/mark */
/* Brand palette (from your logos) */
--sf-bg: #ffffff;
--sf-ink: #0b0c0a;
--sf-muted: #4e5248;
--sf-primary: #9cbb52;
--sf-primary-2: #a5c54c;
--sf-accent: #b2c9d7;
--sf-deep: #020202;
--sf-forest: #739732;
--sf-card: #ffffff;
--sf-border: rgba(2,2,2,.12);
--sf-radius: 16px;
--sf-radius-sm: 12px;
--sf-shadow: 0 10px 28px rgba(2,2,2,.10);
--sf-shadow-sm: 0 8px 20px rgba(2,2,2,.08);
--sf-max: 1180px;
--sf-gutter: clamp(18px, 3vw, 34px);
--sf-h1: clamp(40px, 5.2vw, 64px);
--sf-h2: clamp(30px, 3.6vw, 44px);
--sf-h3: clamp(20px, 2.2vw, 26px);
}
html{ scroll-behavior: smooth; }
body{
background: var(--sf-bg);
color: var(--sf-ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6{
letter-spacing: -0.02em;
line-height: 1.08;
}
h1{ font-size: var(--sf-h1); }
h2{ font-size: var(--sf-h2); }
h3{ font-size: var(--sf-h3); }
p{ color: var(--sf-muted); line-height: 1.65; }
/* ===== Topbar (injected by JS) ===== */
.sf-topbar{
position: sticky;
top: 0;
z-index: 9999;
background: rgba(2,2,2,.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,.10);
padding: 10px var(--sf-gutter);
}
.sf-topbar__inner{
max-width: var(--sf-max);
margin: 0 auto;
display:flex;
align-items:center;
justify-content: space-between;
gap: 14px;
}
.sf-topbar__left{
display:flex;
align-items:center;
gap: 14px;
min-width: 0;
}
.sf-topbar__brand{
display:flex;
align-items:center;
gap: 12px;
text-decoration:none;
color:#fff;
min-width: 0;
}
.sf-topbar__logo{
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--sf-logo-mark) center/contain no-repeat;
flex: 0 0 auto;
filter: drop-shadow(0 10px 14px rgba(0,0,0,.35));
}
.sf-topbar__brandtext{
display:flex;
flex-direction:column;
line-height:1.1;
min-width: 0;
}
.sf-topbar__brandtext strong{
font-weight: 900;
letter-spacing: -0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sf-topbar__brandtext span{
font-size: 13px;
color: rgba(255,255,255,.74);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sf-topbar__pill{
display:inline-flex;
align-items:center;
gap: 10px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
font-size: 14px;
color:#fff;
text-decoration:none;
}
.sf-btn{
appearance:none;
border:0;
border-radius: 999px;
padding: 10px 14px;
font-weight: 900;
cursor:pointer;
text-decoration:none !important;
display:inline-flex;
align-items:center;
justify-content:center;
gap: 10px;
transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
white-space: nowrap;
}
.sf-btn:active{ transform: translateY(1px); }
.sf-btn--primary{
background: linear-gradient(135deg, var(--sf-primary), var(--sf-primary-2));
color: var(--sf-deep) !important;
box-shadow: 0 12px 22px rgba(156,187,82,.28);
}
.sf-btn--primary:hover{ filter: brightness(1.02); }
.sf-btn--ghost{
background: transparent;
color: #fff !important;
border: 1px solid rgba(255,255,255,.18);
}
.sf-btn--ghost:hover{ background: rgba(255,255,255,.08); }
/* ===== Squarespace header polish (sticky + clean) ===== */
body.sf-has-topbar .Header,
body.sf-has-topbar header.Header,
body.sf-has-topbar #header,
body.sf-has-topbar header#header{
top: 64px !important;
}
.Header, #header, header.Header, header#header{
position: sticky !important;
top: 0;
z-index: 9998;
background: rgba(255,255,255,.92);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(2,2,2,.08);
transition: box-shadow .18s ease;
}
body.sf-scrolled .Header,
body.sf-scrolled #header,
body.sf-scrolled header.Header,
body.sf-scrolled header#header{
box-shadow: var(--sf-shadow-sm);
}
/* ===== HERO (Section ID: sf-hero) ===== */
#sf-hero{
position: relative;
overflow: hidden;
}
#sf-hero .content-wrapper{
padding-top: clamp(56px, 7vw, 98px) !important;
padding-bottom: clamp(52px, 7vw, 92px) !important;
}
#sf-hero::before{
content:"";
position:absolute;
inset:-1px;
background:
radial-gradient(900px 380px at 22% 16%, rgba(178,209,219,.55), transparent 62%),
radial-gradient(980px 440px at 78% 18%, rgba(156,187,82,.38), transparent 62%),
linear-gradient(180deg, rgba(2,2,2,.04), transparent 70%);
pointer-events:none;
}
#sf-hero::after{
content:"";
position:absolute;
inset: 0;
background: var(--sf-logo-full) 92% 14% / min(560px, 52vw) no-repeat;
opacity: .11;
filter: grayscale(25%);
pointer-events:none;
}
#sf-hero h1{ max-width: 18ch; }
#sf-hero p{ max-width: 62ch; font-size: 18px; }
/* Make Squarespace button blocks match the theme */
.sqs-block-button .sqs-block-button-element{
border-radius: 999px !important;
font-weight: 900 !important;
}
#sf-hero .sqs-block-button .sqs-block-button-element{
padding: 14px 18px !important;
}
/* ===== Card look (use in Code Blocks OR apply visually) ===== */
.sf-card{
background: var(--sf-card);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius);
box-shadow: var(--sf-shadow-sm);
padding: 18px;
transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.sf-card:hover{
transform: translateY(-2px);
box-shadow: var(--sf-shadow);
border-color: rgba(2,2,2,.18);
}
/* ===== Stats strip (Section ID: sf-stats) ===== */
#sf-stats{
background: linear-gradient(180deg, rgba(156,187,82,.14), rgba(178,209,219,.12));
border-top: 1px solid rgba(2,2,2,.06);
border-bottom: 1px solid rgba(2,2,2,.06);
}
.sf-stats{
display:grid;
grid-template-columns: repeat(12, 1fr);
gap: 18px;
}
.sf-stat{
grid-column: span 4;
background: rgba(255,255,255,.72);
border: 1px solid rgba(2,2,2,.10);
border-radius: var(--sf-radius);
padding: 18px;
}
.sf-stat__num{
font-size: clamp(34px, 3.4vw, 48px);
font-weight: 900;
color: var(--sf-deep);
letter-spacing: -0.03em;
}
.sf-stat__label{
margin-top: 6px;
color: var(--sf-muted);
font-weight: 800;
}
/* ===== Testimonials (Section ID: sf-testimonials) ===== */
#sf-testimonials{
background: var(--sf-deep);
color: #fff;
}
#sf-testimonials p{ color: rgba(255,255,255,.80); }
.sf-quote{
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
border-radius: var(--sf-radius);
padding: 18px;
}
.sf-quote strong{ color: #fff; }
/* ===== Footer (Section ID: sf-footer) ===== */
#sf-footer{
background: #0a0a0a;
color: #fff;
}
#sf-footer p, #sf-footer a{ color: rgba(255,255,255,.80); }
#sf-footer a:hover{ color: #fff; }
/* ===== Responsive ===== */
@media (max-width: 900px){
.sf-stat{ grid-column: span 12; }
.sf-topbar__inner{ flex-wrap: wrap; }
}
/* =======================
CUSTOM JS (Footer Injection)
======================= */
