/* ============================================================ Summerfield Technologies — shared stylesheet Retro-Americana print-shop aesthetic. Tokens are fixed; design within them. No JS anywhere on this site. ============================================================ */ :root{ --paper:#FAF1E5; --paper-2:#EFE1C6; --paper-3:#E5D3B2; --ink:#1B160F; --ink-soft:#3B3225; --sun:#E6A62B; --sun-deep:#C9871A; --rust:#BE4A2F; --sepia:#927A54; /* text-only darkened variants — keep the originals for borders/decoration */ --sun-deep-text:#85590B; /* ≥4.5:1 on --paper and --paper-2 */ --sepia-text:#6B5739; /* ≥4.5:1 on all three paper tones */ --rust-text:#AB432A; /* ≥4.5:1 on --paper and --paper-2 */ --wips-brand:#7B506F; /* WIPS app brand purple — external to the Summerfield palette */ --font-display:'Lilita One', system-ui, sans-serif; --font-body:'Nunito Sans', system-ui, sans-serif; --font-mono:'Courier Prime', ui-monospace, monospace; --font-script:'Yellowtail', cursive; /* ad-kicker accent — loaded by index.html only */ --edge:2.5px solid var(--ink); --sticker:6px 6px 0 var(--ink); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* aged-paper grain + vignette */ body::before{ content:''; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.5; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(60,40,15,.14) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); mix-blend-mode:multiply; } .wrap{max-width:1080px; margin:0 auto; padding:0 24px; position:relative; z-index:2;} a{color:inherit;} h1,h2,h3{font-family:var(--font-display); font-weight:400; line-height:1.02; letter-spacing:.01em; margin:0;} .eyebrow{font-family:var(--font-mono); font-weight:700; font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--sun-deep-text);} /* Skip link — hidden until keyboard focus */ .skip-link{position:absolute; left:-9999px; top:0; z-index:30; background:var(--ink); color:var(--paper); font-family:var(--font-mono); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; padding:10px 16px;} .skip-link:focus{left:0;} /* ---------- NAV ---------- */ nav{position:sticky; top:0; z-index:20; background:rgba(250,241,229,.92); /* --paper #FAF1E5 at 92% alpha */ backdrop-filter:blur(6px); border-bottom:var(--edge);} .nav-in{max-width:1080px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;} .nav-brand{display:flex; align-items:center; gap:11px; text-decoration:none;} .nav-badge{width:38px; height:38px; flex:none;} .nav-badge img{width:100%; height:100%; object-fit:contain;} /* Wordmark: drawn letterforms (wordmark.svg, generated from the badge's engraved-titling style) — the ONE place the logo lettering repeats. */ .nav-wordmark{display:block; height:13px; width:auto;} @media(max-width:420px){ .nav-wordmark{height:10.5px;} } .nav-links{display:flex; gap:26px; align-items:center;} .nav-links a{font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--ink-soft);} .nav-links a:hover{color:var(--rust-text);} .nav-cta{background:var(--rust); padding:9px 16px; border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); border-radius:3px; color:var(--paper)!important; /* !important: .nav-links a outranks .nav-cta for color */} .nav-cta:hover{color:var(--paper)!important; transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink);} @media(max-width:640px){ .nav-links a:not(.nav-cta){display:none;} } /* ---------- HERO (homepage) ---------- */ .hero{position:relative; text-align:center; padding:72px 24px 84px; overflow:hidden;} .sunburst{position:absolute; top:44px; left:50%; width:min(640px,120vw); aspect-ratio:1; transform:translateX(-50%); background:repeating-conic-gradient(from 8deg, var(--sun) 0deg 2.4deg, transparent 2.4deg 15deg); opacity:.30; z-index:0; -webkit-mask:radial-gradient(circle, #000 8%, rgba(0,0,0,.6) 24%, transparent 62%); mask:radial-gradient(circle, #000 8%, rgba(0,0,0,.6) 24%, transparent 62%); animation:spin 90s linear infinite;} @keyframes spin{to{transform:translateX(-50%) rotate(360deg);}} .hero-badge{position:relative; z-index:2; width:300px; height:300px; margin:0 auto 22px;} .hero-badge img{width:100%; height:100%; object-fit:contain;} .hero-in{position:relative; z-index:2;} .hero h1{font-size:clamp(40px,7vw,74px); max-width:14ch; margin:18px auto 0;} .hero-sub{font-size:clamp(17px,2.2vw,20px); max-width:44ch; margin:22px auto 0; color:var(--ink-soft);} .hero-actions{margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;} .btn{font-family:var(--font-display); font-size:16px; letter-spacing:.02em; text-decoration:none; padding:14px 26px; border-radius:4px; border:var(--edge); display:inline-block; transition:transform .12s ease, box-shadow .12s ease;} .btn-primary{background:var(--rust); color:var(--paper); box-shadow:var(--sticker);} .btn-primary:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink);} .btn-ghost{background:var(--paper); color:var(--ink); box-shadow:var(--sticker);} .btn-ghost:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); background:var(--sun);} .btn-sm{padding:11px 22px;} /* rule divider */ .rule{display:flex; align-items:center; gap:16px; color:var(--ink); max-width:1080px; margin:0 auto; padding:0 24px;} .rule::before,.rule::after{content:''; height:0; flex:1; border-top:2px solid var(--ink); box-shadow:0 4px 0 -2px var(--ink);} .rule span{font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--sepia-text);} /* ---------- SECTIONS ---------- */ section{padding:80px 0; position:relative;} .sec-head{text-align:center; margin-bottom:52px;} .sec-head h2{font-size:clamp(30px,4.4vw,46px); margin-top:12px;} .values{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;} .card{background:var(--paper); border:var(--edge); border-radius:6px; box-shadow:var(--sticker); padding:28px 26px;} .value-ic{width:52px; height:52px; border:var(--edge); border-radius:50%; display:grid; place-items:center; background:var(--sun); margin-bottom:16px; font-size:26px;} .card h3{font-size:22px; margin-bottom:8px;} .card p{margin:0; color:var(--ink-soft); font-size:15.5px;} @media(max-width:820px){ .values{grid-template-columns:1fr;} } /* ---------- PRODUCTS ---------- */ .products-sec{background:var(--paper-2); border-top:var(--edge); border-bottom:var(--edge);} .products{display:grid; grid-template-columns:1.4fr 1fr; gap:22px; align-items:stretch;} .prod-wips{background:var(--paper); border:var(--edge); border-radius:8px; box-shadow:var(--sticker); padding:32px; display:flex; flex-direction:column;} .prod-top{display:flex; align-items:center; gap:16px; margin-bottom:6px;} .wips-mark{width:60px; height:60px; flex:none; border-radius:15px; background:var(--wips-brand); color:var(--paper); font-family:var(--font-display); font-size:34px; display:grid; place-items:center; border:var(--edge); box-shadow:3px 3px 0 var(--ink);} .prod-name{font-family:var(--font-display); font-size:32px;} .prod-tag{font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sun-deep-text);} .prod-wips p{color:var(--ink-soft); font-size:16px; margin:14px 0 0;} .prod-foot{margin-top:auto; padding-top:24px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;} /* quiet feedback micro-CTA under the product card's button row (scoped under .prod-wips to out-specify the .prod-wips p rule above) */ .prod-wips .prod-note{margin:16px 0 0; font-size:14.5px; color:var(--ink-soft);} .live-tag{font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--rust-text); display:flex; align-items:center; gap:7px;} /* rgba(190,74,47,…) below = --rust #BE4A2F at partial alpha */ .live-dot{width:9px; height:9px; border-radius:50%; background:var(--rust); box-shadow:0 0 0 0 rgba(190,74,47,.5); animation:pulse 2s infinite;} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(190,74,47,.5);}70%{box-shadow:0 0 0 8px rgba(190,74,47,0);}100%{box-shadow:0 0 0 0 rgba(190,74,47,0);}} .prod-soon{background:repeating-linear-gradient(45deg,var(--paper),var(--paper) 12px,var(--paper-3) 12px,var(--paper-3) 24px); border:2.5px dashed var(--ink); border-radius:8px; padding:32px; display:flex; flex-direction:column; justify-content:center; text-align:center;} .prod-soon .soon-badge{font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--sepia-text); margin-bottom:10px;} .prod-soon h3{font-size:24px; margin-bottom:8px;} .prod-soon p{margin:0; color:var(--ink-soft); font-size:15px;} @media(max-width:820px){ .products{grid-template-columns:1fr;} } /* ---------- CONTACT ---------- */ .contact{text-align:center;} .contact h2{font-size:clamp(30px,4.4vw,46px); margin-bottom:14px;} .contact p{max-width:40ch; margin:0 auto 28px; color:var(--ink-soft);} .mail{display:inline-block; font-family:var(--font-display); font-size:clamp(22px,3.4vw,32px); text-decoration:none; color:var(--ink); border-bottom:4px solid var(--sun); padding-bottom:2px;} .mail:hover{color:var(--rust-text); border-color:var(--rust);} /* ---------- FOOTER ---------- */ footer{background:var(--ink); color:var(--paper); text-align:center; padding:48px 24px; border-top:var(--edge);} .foot-badge{width:64px; height:64px; margin:0 auto 16px; background:var(--paper); border-radius:50%; padding:4px;} .foot-badge img{width:100%; height:100%; object-fit:contain;} .foot-name{font-family:var(--font-display); font-size:20px; letter-spacing:.02em;} /* .foot-nav is a