/* ============================================================ OUTLAW NATION — shared stylesheet A history of outlaw motorcycle clubs ============================================================ */ /* Fonts are loaded via in each page's (with preconnect) instead of @import, so they don't block behind this file. */ :root{ --ink:#0d0d0f; --ink-2:#16161a; --panel:#1c1c21; --panel-2:#232329; --bone:#ece6da; --bone-dim:#b7b1a5; --muted:#8a8579; --blood:#8e1b1b; --blood-bright:#c2302f; --gold:#c8a24a; --line:#33323a; --maxw:1080px; --shadow:0 18px 40px rgba(0,0,0,.45); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background: radial-gradient(1200px 600px at 70% -10%, #20202a 0%, transparent 60%), var(--ink); color:var(--bone); font-family:'Bitter',Georgia,serif; font-size:17px; line-height:1.72; -webkit-font-smoothing:antialiased; } a{color:var(--gold);text-decoration:none} a:hover{color:var(--blood-bright)} img{max-width:100%} /* ---------- skip link (a11y) ---------- */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:100; font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem; background:var(--blood);color:#fff;padding:.6rem 1rem;border-radius:0 0 4px 0; } .skip-link:focus{left:0;color:#fff} /* ---------- header / nav ---------- */ .topbar{ position:sticky;top:0;z-index:50; background:rgba(10,10,12,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .topbar-inner{ max-width:var(--maxw);margin:0 auto;padding:.7rem 1.2rem; display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap; } .brand{ font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.22em; text-transform:uppercase;color:var(--bone);font-size:1.05rem; } .brand span{color:var(--blood-bright)} .nav{display:flex;gap:.2rem;flex-wrap:wrap} .nav a{ font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em; font-size:.8rem;font-weight:500;color:var(--bone-dim); padding:.45rem .7rem;border-radius:3px; } .nav a:hover,.nav a.active{color:var(--bone);background:var(--panel)} .nav-toggle{ display:none;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.14em; font-size:.78rem;font-weight:500;color:var(--bone);background:var(--panel); border:1px solid var(--line);border-radius:3px;padding:.45rem .8rem;cursor:pointer; } /* ---------- hero ---------- */ .hero{ max-width:var(--maxw);margin:0 auto;padding:5rem 1.2rem 3rem;text-align:center; } .hero .kicker{ font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.42em; color:var(--gold);font-size:.8rem;margin-bottom:1.2rem; } .hero h1{ font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase; letter-spacing:.04em;line-height:.96;margin:0 0 1rem; font-size:clamp(2.6rem,8vw,5.6rem); } .hero h1 em{font-style:normal;color:var(--blood-bright)} .hero .lede{ max-width:680px;margin:1.2rem auto 0;color:var(--bone-dim);font-size:1.12rem; } .diamond{ display:inline-block;margin:1.6rem auto 0;color:var(--gold); font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.3em;font-size:.85rem; border:1px solid var(--line);padding:.5rem 1.1rem;border-radius:2px;background:var(--panel); } /* ---------- layout ---------- */ main{max-width:var(--maxw);margin:0 auto;padding:2rem 1.2rem 4rem} section{margin:3.4rem 0} .section-head{ font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.16em; font-weight:600;font-size:1.7rem;color:var(--bone); border-left:4px solid var(--blood);padding-left:.8rem;margin:0 0 1.4rem; } .eyebrow{ font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.34em; color:var(--gold);font-size:.72rem;margin-bottom:.4rem; } h2,h3,h4{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.02em;color:var(--bone)} p{margin:0 0 1rem} .lead{font-size:1.15rem;color:var(--bone-dim)} .muted{color:var(--muted)} mark{background:transparent;color:var(--gold);font-weight:600} /* ---------- intro band ---------- */ .intro{ background:linear-gradient(180deg,var(--ink-2),transparent); border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .intro .inner{max-width:var(--maxw);margin:0 auto;padding:2.6rem 1.2rem} /* ---------- stat strip ---------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:6px;overflow:hidden} .stat{background:var(--panel);padding:1.3rem 1rem;text-align:center} .stat .n{font-family:'Oswald',sans-serif;font-weight:700;font-size:2rem;color:var(--blood-bright);line-height:1} .stat .l{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em; font-size:.68rem;color:var(--bone-dim);margin-top:.45rem} /* ---------- cards grid ---------- */ .grid{display:grid;gap:1.2rem} .grid.cols-2{grid-template-columns:repeat(2,1fr)} .grid.cols-3{grid-template-columns:repeat(3,1fr)} .card{ background:var(--panel);border:1px solid var(--line);border-radius:8px; padding:1.4rem;transition:transform .15s,border-color .15s; } .card:hover{transform:translateY(-3px);border-color:var(--blood)} .card h3{margin:.1rem 0 .2rem;font-size:1.25rem} .card .tag{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em; font-size:.68rem;color:var(--gold)} .card p{font-size:.95rem;color:var(--bone-dim);margin:.6rem 0 0} /* ---------- club profile ---------- */ .club{ background:var(--panel);border:1px solid var(--line);border-radius:10px; padding:1.8rem;margin:1.6rem 0;box-shadow:var(--shadow);scroll-margin-top:90px; } .club-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap; border-bottom:1px solid var(--line);padding-bottom:.8rem;margin-bottom:1rem} .club-head h3{font-size:1.7rem;margin:0;text-transform:uppercase;letter-spacing:.04em} .club-meta{display:flex;gap:1.4rem;flex-wrap:wrap;margin:.2rem 0 1rem} .club-meta div{font-size:.82rem} .club-meta .k{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em; color:var(--muted);font-size:.66rem;display:block} .colors{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.14em; font-size:.7rem;font-weight:600;padding:.3rem .7rem;border-radius:3px;border:1px solid var(--line)} /* ---------- timeline ---------- */ .timeline{position:relative;margin:2rem 0;padding-left:0} .timeline::before{content:"";position:absolute;left:120px;top:0;bottom:0;width:2px;background:var(--line)} .tl-row{position:relative;display:grid;grid-template-columns:120px 1fr;gap:1.6rem;margin:0 0 1.7rem} .tl-year{font-family:'Oswald',sans-serif;font-weight:700;font-size:1.35rem;color:var(--gold);text-align:right} .tl-body{position:relative;padding-left:1.4rem} .tl-body::before{content:"";position:absolute;left:-7px;top:.55rem;width:13px;height:13px; background:var(--blood-bright);border:3px solid var(--ink);border-radius:50%} .tl-body h4{margin:0 0 .25rem;font-size:1.08rem;text-transform:uppercase;letter-spacing:.06em} .tl-body p{font-size:.95rem;color:var(--bone-dim);margin:0} .tl-era{grid-column:1/-1;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.2em; color:var(--blood-bright);font-weight:600;font-size:.8rem;border-bottom:1px solid var(--line); padding-bottom:.4rem;margin:1.5rem 0 .4rem} /* ---------- member bios ---------- */ .bio{ background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--blood); border-radius:6px;padding:1.4rem 1.5rem;margin:1.1rem 0;scroll-margin-top:90px; } .bio h3{margin:0 0 .15rem;font-size:1.3rem} .bio .handle{color:var(--gold);font-style:italic;font-family:'Bitter',serif} .bio .role{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em; font-size:.7rem;color:var(--bone-dim);margin:.2rem 0 .8rem} .bio p{font-size:.97rem;margin:0 0 .7rem} .bio-photo{ float:right;width:110px;height:110px;object-fit:cover;border-radius:6px; border:1px solid var(--line);margin:0 0 .8rem 1.1rem;filter:saturate(.85); } @media(max-width:540px){.bio-photo{width:84px;height:84px;margin-left:.8rem}} .pill{display:inline-block;font-family:'Oswald',sans-serif;text-transform:uppercase; letter-spacing:.1em;font-size:.64rem;color:var(--bone);background:var(--panel-2); border:1px solid var(--line);padding:.2rem .55rem;border-radius:20px;margin:0 .3rem .3rem 0} /* ---------- filter bar ---------- */ .filterbar{display:flex;gap:.4rem;flex-wrap:wrap;margin:1rem 0 2rem} .filterbar button{ font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem; background:var(--panel);color:var(--bone-dim);border:1px solid var(--line); padding:.45rem .85rem;border-radius:20px;cursor:pointer;transition:.15s; } .filterbar button:hover{color:var(--bone)} .filterbar button.active{background:var(--blood);color:#fff;border-color:var(--blood)} /* ---------- callout ---------- */ .callout{ background:var(--panel-2);border:1px solid var(--line);border-left:4px solid var(--gold); border-radius:6px;padding:1.1rem 1.3rem;margin:1.4rem 0;font-size:.96rem;color:var(--bone-dim); } .callout strong{color:var(--bone)} blockquote{ margin:1.4rem 0;padding:.4rem 0 .4rem 1.3rem;border-left:3px solid var(--blood); font-style:italic;color:var(--bone-dim);font-size:1.05rem; } blockquote cite{display:block;font-style:normal;font-family:'Oswald',sans-serif; text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;color:var(--muted);margin-top:.5rem} /* ---------- table ---------- */ table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.92rem} th,td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--line)} th{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em; font-size:.7rem;color:var(--gold)} tbody tr:hover{background:var(--panel)} /* ---------- TOC chips ---------- */ .toc{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.4rem 0 2rem} .toc a{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em; font-size:.74rem;background:var(--panel);border:1px solid var(--line); padding:.45rem .8rem;border-radius:4px;color:var(--bone-dim)} .toc a:hover{border-color:var(--blood);color:var(--bone)} /* ---------- footer ---------- */ footer{border-top:1px solid var(--line);background:var(--ink-2);margin-top:3rem} .footer-inner{max-width:var(--maxw);margin:0 auto;padding:2.4rem 1.2rem; display:flex;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;color:var(--muted);font-size:.85rem} .footer-inner a{color:var(--bone-dim)} .disclaimer{font-size:.78rem;color:var(--muted);max-width:560px;line-height:1.6} /* ---------- responsive ---------- */ @media(max-width:820px){ .grid.cols-3,.grid.cols-2{grid-template-columns:1fr} .stats{grid-template-columns:repeat(2,1fr)} .timeline::before{left:64px} .tl-row{grid-template-columns:64px 1fr;gap:.9rem} .tl-year{font-size:1.05rem} } /* ---------- mobile: wide tables scroll instead of breaking layout ---------- */ @media(max-width:640px){ table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} } /* ---------- search ---------- */ .searchbox{ width:100%;font-family:'Bitter',Georgia,serif;font-size:1.1rem; background:var(--panel);color:var(--bone);border:1px solid var(--line); border-radius:6px;padding:.85rem 1.1rem;margin:0 0 1.6rem; } .searchbox:focus{outline:2px solid var(--blood);border-color:var(--blood)} .search-result{ background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--blood); border-radius:6px;padding:1rem 1.2rem;margin:.8rem 0;display:block;color:var(--bone); } .search-result:hover{border-color:var(--blood);color:var(--bone)} .search-result .sr-where{font-family:'Oswald',sans-serif;text-transform:uppercase; letter-spacing:.12em;font-size:.66rem;color:var(--gold)} .search-result h3{margin:.15rem 0 .25rem;font-size:1.15rem} .search-result p{font-size:.92rem;color:var(--bone-dim);margin:0} .search-count{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.14em; font-size:.72rem;color:var(--muted);margin:0 0 1rem} /* ---------- reduced motion ---------- */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .card{transition:none} .card:hover{transform:none} } /* ---------- mobile: phone breakpoint ---------- */ @media(max-width:540px){ .topbar-inner{padding:.6rem .9rem} .nav-toggle{display:inline-block} .nav{display:none;width:100%;flex-direction:column;gap:.15rem;padding:.3rem 0 .5rem} .nav.open{display:flex} .nav a{padding:.6rem .6rem;font-size:.85rem;border-bottom:1px solid var(--line)} .nav a:last-child{border-bottom:none} .hero{padding:3rem 1rem 2rem} .lede{font-size:1.02rem} main{padding:1.5rem 1rem 3rem} .intro .inner{padding:2rem 1rem} .stats{grid-template-columns:repeat(2,1fr)} .stat{padding:1rem .6rem} .stat .n{font-size:1.6rem} .section-head{font-size:1.4rem} .toc a{padding:.55rem .85rem} /* roomier tap targets */ .club-head{flex-direction:column;align-items:flex-start} .footer-inner{flex-direction:column} }