/* ===================================================================== HAMMERLOCK WRESTLING - site stylesheet Asset paths below are relative to THIS file (css/site.css). ===================================================================== */ :root{ --logo:url(../images/hammerlock-logo.png); --lm-logo:url(../images/liquid-media-studios.png); } /* --------------------------------------------------------------------- HERO IMAGES One image is used on every subpage right now. To change it site-wide, edit the line below. To give a single page its own hero, uncomment an override (each page has a body class, e.g. ). --------------------------------------------------------------------- */ .phero{--phero-img:url(../images/hero-ring.jpg)} /* .page-about .phero{--phero-img:url(../images/hero-about.jpg)} */ /* .page-roster .phero{--phero-img:url(../images/hero-roster.jpg)} */ /* .page-sponsors .phero{--phero-img:url(../images/hero-sponsors.jpg)} */ :root{ --ink:#08080a; --ink-2:#0f0f12; --ink-3:#16161a; --line:#2a2a30; --line-gold:rgba(232,183,58,.28); --bone:#f6f3ec; --bone-dim:#a8a49b; --steel:#6e6e78; --gold:#e8b73a; --gold-bright:#f4e07a; --gold-deep:#a9761c; --gold-dark:#3a2908; --display:'Anton',Impact,sans-serif; --cond:'Barlow Condensed',sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'Space Mono',ui-monospace,monospace; --maxw:1180px; --hh:124px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--ink); color:var(--bone); font-family:var(--body); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; } body::after{ content:"";position:fixed;inset:0;pointer-events:none;z-index:9999; opacity:.05;mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} ::selection{background:var(--gold);color:#000} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .eyebrow{ font-family:var(--cond);text-transform:uppercase;letter-spacing:.28em; font-weight:600;font-size:.82rem;color:var(--gold); } .eyebrow.bone{color:var(--bone-dim)} .gold-text{ background:linear-gradient(180deg,var(--gold-bright) 0%,var(--gold) 45%,var(--gold-deep) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .btn{ display:inline-flex;align-items:center;gap:.55em; font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em; font-weight:700;font-size:1.02rem;padding:.85em 1.6em; border:2px solid transparent;cursor:pointer; transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease; clip-path:polygon(0 0,100% 0,100% 72%,calc(100% - 14px) 100%,0 100%); } .btn-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold) 60%,var(--gold-deep));color:#120c00} .btn-gold:hover{background:var(--bone);color:var(--ink);transform:translateY(-2px);box-shadow:0 10px 0 -4px var(--gold-dark)} .btn-ghost{border-color:var(--line);color:var(--bone);background:transparent} .btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)} .btn .arr{transition:transform .18s ease} .btn:hover .arr{transform:translate(3px,0)} /* ============ HEADER ============ */ header{ position:sticky;top:0;z-index:1000; background:rgba(8,8,10,.85);backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .bar{display:flex;align-items:center;justify-content:space-between;height:var(--hh);gap:20px} .brand{display:flex;align-items:center;gap:16px;min-width:0} .brand .logo{height:96px;width:148px;flex:none;background:var(--logo) left center/contain no-repeat} .brand .name{font-family:var(--display);font-size:2.5rem;letter-spacing:.02em;line-height:.82;text-transform:uppercase} .brand .name span{ display:block;font-family:var(--cond);font-weight:600;font-size:1rem; letter-spacing:.42em;color:var(--gold);margin-top:5px; } nav{display:flex;align-items:center;gap:28px} nav a.link{ font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em; font-weight:600;font-size:.95rem;color:var(--bone-dim); transition:color .15s ease;position:relative;white-space:nowrap; } nav a.link:hover,nav a.link:focus-visible{color:var(--bone)} nav a.link::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--gold);transition:width .2s ease} nav a.link:hover::after{width:100%} .navtix{padding:.6em 1.2em;font-size:.92rem} .menu-btn{display:none;background:none;border:0;color:var(--bone);cursor:pointer;padding:8px} .menu-btn svg{width:26px;height:26px} /* ============ HERO ============ */ .hero{position:relative;padding:clamp(64px,10vw,120px) 0 clamp(56px,8vw,100px);overflow:hidden;border-bottom:1px solid var(--line)} .hero .spot{ position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(70% 55% at 50% -10%, rgba(232,183,58,.16), transparent 62%), radial-gradient(55% 45% at 50% 0%, rgba(255,255,255,.05), transparent 55%); } .hero .ghost{ position:absolute;z-index:0;right:-8%;top:50%;transform:translateY(-50%); width:min(58vw,660px);aspect-ratio:780/508;opacity:.07;pointer-events:none; background:var(--logo) center/contain no-repeat;filter:grayscale(1) contrast(1.2); } .hero .scan{ position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.35; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.35) 3px 4px); mix-blend-mode:multiply; } .hero .wrap{position:relative;z-index:2} h1.title{ font-family:var(--display);font-weight:400;line-height:.86;letter-spacing:.005em; font-size:clamp(3.2rem,11.5vw,8.8rem);text-transform:uppercase;margin:6px 0 0; } h1.title .stroke{color:transparent;-webkit-text-stroke:2px var(--bone);text-stroke:2px var(--bone)} .hero p.lede{max-width:540px;margin:26px 0 0;font-size:1.18rem;color:var(--bone-dim)} .hero p.lede b{color:var(--bone);font-weight:600} .hero .cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px} .hero .stats{display:flex;gap:34px;flex-wrap:wrap;margin-top:48px;padding-top:30px;border-top:1px solid var(--line)} .hero .stat .n{font-family:var(--display);font-size:2.4rem;line-height:1} .hero .stat .l{font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:var(--bone-dim);margin-top:6px} /* ============ MARQUEE ============ */ .marquee{ background:linear-gradient(180deg,var(--gold-bright),var(--gold) 55%,var(--gold-deep)); color:#120c00;overflow:hidden;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:13px 0; } .marquee .track{display:flex;width:max-content;animation:scroll 36s linear infinite} .marquee span{ font-family:var(--display);text-transform:uppercase;letter-spacing:.02em; font-size:1.5rem;padding:0 26px;white-space:nowrap;display:inline-flex;align-items:center;gap:26px; } .marquee span::after{content:"";width:8px;height:8px;background:#120c00;transform:rotate(45deg);flex:none} @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ============ SECTION SHELL ============ */ section.block{padding:clamp(64px,9vw,116px) 0;position:relative} .sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:46px} .sechead h2{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.9;font-size:clamp(2.4rem,6vw,4.6rem);margin-top:8px} .sechead .hint{font-family:var(--mono);font-size:.82rem;color:var(--steel);max-width:290px;text-align:right} /* ============ CHAMPIONS ============ */ .champs{background:linear-gradient(180deg,var(--ink) 0%,#0c0c0f 100%)} .belts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .belt{perspective:1200px} .cardwrap{ position:relative;border:1px solid var(--line-gold);background:var(--ink-2); padding:14px 14px 0;overflow:hidden; transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .35s ease; transform-style:preserve-3d; } .cardwrap::before{ content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:3;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent); transform:skewX(-18deg);transition:left .6s ease; } .belt:hover .cardwrap{transform:translateY(-10px) rotateX(3deg);box-shadow:0 24px 50px -18px rgba(232,183,58,.35);border-color:var(--gold)} .belt:hover .cardwrap::before{left:120%} .cardwrap img{width:100%;height:auto;display:block} .plate{ margin:14px -14px 0;padding:14px 16px; background:linear-gradient(180deg,var(--gold-bright),var(--gold) 55%,var(--gold-deep)); display:flex;align-items:center;justify-content:space-between;gap:10px; } .plate .div{font-family:var(--display);text-transform:uppercase;font-size:1.05rem;color:#120c00;line-height:1} .plate .tag{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:#3d2c05} /* ============ TOUR ============ */ .tour{background:var(--ink)} .cardstack{border-top:1px solid var(--line)} .fight{ display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:28px; padding:26px 8px;border-bottom:1px solid var(--line);position:relative;overflow:hidden; transition:padding-left .25s ease; } .fight::before{ content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(90deg,rgba(232,183,58,.16),transparent 68%); transform:translateX(-101%);transition:transform .4s cubic-bezier(.22,1,.36,1); } .fight:hover::before{transform:translateX(0)} .fight:hover{padding-left:22px} .fight > *{position:relative;z-index:1} .fight .date{font-family:var(--mono);line-height:1.15} .fight .date .mo{font-size:.8rem;text-transform:uppercase;letter-spacing:.18em;color:var(--gold)} .fight .date .dy{font-family:var(--display);font-size:2.6rem;color:var(--bone)} .fight .date .yr{font-size:.74rem;color:var(--steel)} .fight .city{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.6rem,3.6vw,2.5rem);line-height:.92} .fight .venue{font-family:var(--cond);font-size:1.02rem;color:var(--bone-dim);letter-spacing:.04em;margin-top:4px} .fight .times{font-family:var(--mono);font-size:.74rem;color:var(--steel);margin-top:6px;letter-spacing:.04em} .pill{ display:inline-block;font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.12em; color:var(--gold);border:1px solid var(--line-gold);padding:2px 7px;margin-left:8px;vertical-align:middle; } .pill.solid{background:var(--gold);color:#120c00;border-color:var(--gold);font-weight:700} .fight .tix{justify-self:end} /* ---- Anniversary spotlight ---- */ .fight.feature{border-bottom:1px solid var(--line-gold)} .fight.feature::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--gold-bright),var(--gold-deep));z-index:2} .fight.feature .city{color:var(--gold)} .slam{ margin-top:34px;border:1px solid var(--line-gold);background: radial-gradient(120% 140% at 0% 0%,rgba(232,183,58,.12),transparent 60%),var(--ink-2); padding:30px;display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center; } .slam .badge{ font-family:var(--display);font-size:2.6rem;line-height:.85;text-align:center; border:2px solid var(--gold);padding:14px 16px;color:var(--gold); } .slam .badge small{display:block;font-family:var(--cond);font-size:.7rem;letter-spacing:.24em;color:var(--bone-dim);margin-top:6px} .slam h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.4rem);line-height:.95} .slam p{color:var(--bone-dim);margin-top:6px;font-size:.98rem} /* ============ BOOK US ============ */ .book{ background:linear-gradient(180deg,var(--gold-bright) 0%,var(--gold) 50%,var(--gold-deep) 100%); color:#120c00;position:relative;overflow:hidden; } .book::before{ content:"";position:absolute;right:-8%;top:-30%;width:520px;height:520px;opacity:.14; background:radial-gradient(circle,#120c00 0 2px,transparent 2px) 0 0/22px 22px; } .book .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center} .book h2{font-family:var(--display);text-transform:uppercase;line-height:.88;font-size:clamp(2.6rem,6vw,5rem)} .book .eyebrow{color:#3d2c05} .book p{font-size:1.15rem;margin-top:18px;max-width:480px;color:#20180a} .book .cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap} .book .btn-dark{background:var(--ink);color:var(--bone)} .book .btn-dark:hover{background:#fff;color:var(--ink);transform:translateY(-2px)} .book .btn-outline{border:2px solid rgba(18,12,0,.55);color:#120c00} .book .btn-outline:hover{border-color:#120c00;background:rgba(18,12,0,.08);transform:translateY(-2px)} .usecases{display:grid;grid-template-columns:1fr 1fr;gap:14px} .uc{border:1px solid rgba(18,12,0,.35);padding:18px} .uc .ic{width:30px;height:30px;margin-bottom:10px} .uc h5{font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:1.05rem} .uc p{font-size:.92rem;margin-top:4px;color:#2b2010} /* ============ FOOTER ============ */ footer{background:var(--ink);border-top:1px solid var(--line);padding:64px 0 40px} .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start} .fgrid > *{min-width:0} .fbrand .flogo{display:block;height:120px;width:184px;margin-bottom:16px;background:var(--logo) left center/contain no-repeat} .fbrand p{color:var(--bone-dim);max-width:320px;font-size:.96rem} .fcol h6{font-family:var(--cond);text-transform:uppercase;letter-spacing:.18em;font-size:.82rem;color:var(--gold);margin-bottom:16px} .fcol a{display:block;color:var(--bone-dim);padding:5px 0;font-family:var(--cond);font-size:1.02rem;letter-spacing:.03em;transition:color .15s,padding-left .15s;overflow-wrap:anywhere} .fcol a:hover{color:var(--bone);padding-left:6px} .socials{display:flex;gap:12px;margin-top:20px} .socials a{width:40px;height:40px;border:1px solid var(--line);display:grid;place-items:center;transition:.18s} .socials a:hover{background:var(--gold);border-color:var(--gold);color:#120c00;transform:translateY(-3px)} .socials svg{width:18px;height:18px} .legal{margin-top:50px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:.74rem;color:var(--steel)} /* ============ REVEALS ============ */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1)} .reveal.in{opacity:1;transform:none} .stagger.in > *{animation:rise .6s both} .stagger.in > *:nth-child(2){animation-delay:.08s} .stagger.in > *:nth-child(3){animation-delay:.16s} .stagger.in > *:nth-child(4){animation-delay:.24s} .stagger.in > *:nth-child(5){animation-delay:.32s} .stagger.in > *:nth-child(6){animation-delay:.40s} @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} .drop{animation:drop .7s cubic-bezier(.18,.9,.25,1.04) both} @keyframes drop{0%{opacity:0;transform:translateY(-40px) scale(1.04)}100%{opacity:1;transform:none}} /* ============ RESPONSIVE ============ */ @media(max-width:980px){ .belts{grid-template-columns:1fr 1fr} } @media(max-width:900px){ :root{--hh:100px} nav{position:fixed;inset:var(--hh) 0 auto 0;flex-direction:column;align-items:flex-start;gap:0; background:var(--ink-2);border-bottom:1px solid var(--line);padding:10px 24px 22px; transform:translateY(-140%);transition:transform .3s ease;} nav.open{transform:translateY(0)} nav a.link{padding:14px 0;width:100%;border-bottom:1px solid var(--line);font-size:1.15rem} nav .navtix{margin-top:14px;width:100%;justify-content:center} .menu-btn{display:block} .brand .logo{height:74px;width:114px} .brand .name{font-size:1.9rem} .brand .name span{font-size:.8rem;letter-spacing:.34em} .book .wrap{grid-template-columns:1fr;gap:36px} .fgrid{grid-template-columns:1fr;gap:34px} .fight{grid-template-columns:80px 1fr;gap:18px} .fight .tix{grid-column:1/-1;justify-self:start;margin-top:8px} .sechead .hint{text-align:left} .slam{grid-template-columns:1fr;gap:18px;text-align:left} } @media(max-width:620px){ .belts{grid-template-columns:1fr;max-width:420px;margin:0 auto} .usecases{grid-template-columns:1fr} .hero .stats{gap:24px} .fight .date .dy{font-size:2rem} :root{--hh:86px} .brand{gap:11px} .brand .logo{height:60px;width:92px} .brand .name{font-size:1.45rem} .brand .name span{font-size:.6rem;letter-spacing:.26em;margin-top:2px} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} .reveal{opacity:1;transform:none} } /* ---------- page hero ---------- */ /* HERO IMAGE: swap the --phero-img url on each page's
*/ .phero{position:relative;padding:clamp(72px,10vw,132px) 0 clamp(52px,6vw,84px); border-bottom:1px solid var(--line);overflow:hidden; background:var(--phero-img,none) center/cover no-repeat,var(--ink)} .phero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(90deg,rgba(8,8,10,.95) 0%,rgba(8,8,10,.82) 46%,rgba(8,8,10,.42) 100%), linear-gradient(0deg,var(--ink) 2%,transparent 55%)} .phero .spot{position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(70% 60% at 20% -20%, rgba(232,183,58,.16), transparent 60%)} .phero .wrap{position:relative;z-index:1} .phero h1{font-family:var(--display);text-transform:uppercase;line-height:.88; font-size:clamp(2.6rem,7vw,5.4rem);margin-top:8px} .phero p.sub{color:var(--bone-dim);max-width:620px;margin-top:16px;font-size:1.1rem} .crumb{font-family:var(--mono);font-size:.74rem;color:var(--steel)} .crumb a:hover{color:var(--gold)} /* ---------- generic prose ---------- */ .prose{max-width:760px} .prose h3{font-family:var(--display);text-transform:uppercase;font-size:1.6rem;margin:34px 0 10px;letter-spacing:.01em} .prose p{color:var(--bone-dim);margin-bottom:14px} .prose p b,.prose strong{color:var(--bone)} .prose ul{margin:0 0 16px 18px;color:var(--bone-dim)} .prose li{margin-bottom:8px} .lead{font-size:1.24rem;color:var(--bone)!important;border-left:3px solid var(--gold);padding-left:18px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:26px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .panel{background:var(--ink-2);border:1px solid var(--line);padding:26px} .panel.gold{border-color:var(--line-gold)} .panel h4{font-family:var(--display);text-transform:uppercase;font-size:1.3rem;margin-bottom:8px} .panel p{color:var(--bone-dim);font-size:.96rem} .valuegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .value{border:1px solid var(--line);padding:24px;background:var(--ink-2);transition:.2s} .value:hover{border-color:var(--gold);transform:translateY(-4px)} .value .n{font-family:var(--mono);font-size:.72rem;color:var(--gold)} .value h4{font-family:var(--display);text-transform:uppercase;font-size:1.25rem;margin:8px 0 6px} .value p{color:var(--bone-dim);font-size:.94rem} /* ---------- roster cards ---------- */ .rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .rcard{position:relative;border:1px solid var(--line-gold);background:var(--ink-2);overflow:hidden;transition:.28s} .rcard:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 18px 40px -18px rgba(232,183,58,.4)} .rcard img{width:100%;display:block} .rcard .cap{padding:12px 14px;border-top:1px solid var(--line)} .rcard .cap h4{font-family:var(--display);text-transform:uppercase;font-size:1.1rem;line-height:1} .rcard .cap span{font-family:var(--mono);font-size:.66rem;color:var(--gold);letter-spacing:.1em;text-transform:uppercase} .rcard.tbd{display:grid;place-items:center;min-height:300px;border-style:dashed;border-color:var(--line);background: repeating-linear-gradient(135deg,transparent 0 10px,rgba(255,255,255,.02) 10px 20px),var(--ink-2)} .rcard.tbd .q{font-family:var(--display);font-size:3rem;color:var(--steel)} .rcard.tbd p{font-family:var(--mono);font-size:.7rem;color:var(--steel);text-align:center;padding:0 14px 18px} /* ---------- title history ---------- */ .belt-block{border:1px solid var(--line-gold);background:var(--ink-2);margin-bottom:26px;overflow:hidden} .belt-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; padding:18px 24px;background:linear-gradient(180deg,var(--gold-bright),var(--gold) 55%,var(--gold-deep));color:#120c00} .belt-head h3{font-family:var(--display);text-transform:uppercase;font-size:1.5rem;line-height:1} .belt-head .now{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase} .lineage{padding:8px 24px 20px} .reign{display:grid;grid-template-columns:150px 1fr auto;gap:18px;align-items:center; padding:14px 0;border-bottom:1px solid var(--line)} .reign:last-child{border-bottom:0} .reign .who{font-family:var(--display);text-transform:uppercase;font-size:1.2rem} .reign .when{font-family:var(--mono);font-size:.76rem;color:var(--gold)} .reign .note{font-family:var(--cond);color:var(--bone-dim);font-size:.98rem} .reign.current .who{color:var(--gold)} .tagnow{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.12em; border:1px solid var(--gold);color:var(--gold);padding:2px 8px} /* ---------- news ---------- */ .post{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:center; padding:22px 0;border-bottom:1px solid var(--line);transition:.2s} .post:hover{padding-left:10px} .post .thumb{aspect-ratio:16/10;background: repeating-linear-gradient(135deg,#141418 0 8px,#101014 8px 16px); border:1px solid var(--line);display:grid;place-items:center} .post .thumb span{font-family:var(--mono);font-size:.62rem;color:var(--steel)} .post .date{font-family:var(--mono);font-size:.72rem;color:var(--gold)} .post h3{font-family:var(--display);text-transform:uppercase;font-size:1.5rem;line-height:1;margin:6px 0} .post p{color:var(--bone-dim);font-size:.95rem} /* ---------- media ---------- */ .vid{position:relative;aspect-ratio:16/9;border:1px solid var(--line-gold);background:#000;overflow:hidden} .vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .shot{aspect-ratio:4/3;border:1px solid var(--line);display:grid;place-items:center; background:repeating-linear-gradient(135deg,#141418 0 8px,#101014 8px 16px)} .shot span{font-family:var(--mono);font-size:.62rem;color:var(--steel)} /* ---------- sponsors ---------- */ .tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch} .tier{border:1px solid var(--line);background:var(--ink-2);padding:26px 22px;display:flex;flex-direction:column;transition:.25s;position:relative} .tier:hover{transform:translateY(-6px);border-color:var(--gold)} .tier.head{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset} .tier .flag{position:absolute;top:-1px;right:-1px;background:var(--gold);color:#120c00; font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.66rem;padding:4px 10px} .tier .lvl{font-family:var(--mono);font-size:.68rem;color:var(--gold);letter-spacing:.14em;text-transform:uppercase} .tier h3{font-family:var(--display);text-transform:uppercase;font-size:1.7rem;line-height:.95;margin:8px 0 4px} .tier .price{font-family:var(--cond);font-weight:600;color:var(--bone-dim);font-size:.92rem;letter-spacing:.06em; padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)} .tier ul{list-style:none;margin:0 0 20px;flex:1} .tier li{color:var(--bone-dim);font-size:.92rem;padding:6px 0 6px 20px;position:relative} .tier li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)} .tier .btn{width:100%;justify-content:center} .pwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px} .plogo{border:1px solid var(--line);background:var(--ink-2);padding:20px 14px;text-align:center;transition:.2s;min-height:92px; display:grid;place-items:center} .plogo:hover{border-color:var(--gold);background:var(--ink-3);transform:translateY(-3px)} .plogo span{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:1rem;color:var(--bone-dim)} .plogo:hover span{color:var(--gold)} .statband{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border:1px solid var(--line-gold); background:var(--ink-2);padding:30px} .statband .s .n{font-family:var(--display);font-size:2.2rem;line-height:1} .statband .s .l{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;color:var(--bone-dim);margin-top:4px} .cta-band{border:1px solid var(--line-gold);background: radial-gradient(120% 140% at 0% 0%,rgba(232,183,58,.12),transparent 60%),var(--ink-2); padding:34px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:40px} .cta-band h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.2rem);line-height:.95} .cta-band p{color:var(--bone-dim);margin-top:6px} .note-box{border:1px dashed var(--line);padding:14px 18px;font-family:var(--mono);font-size:.76rem;color:var(--steel);margin-top:26px} /* ---------- contact ---------- */ .contactgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:start} .contactgrid > *{min-width:0} .field{margin-bottom:16px} .field label{display:block;font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em; font-size:.76rem;color:var(--gold);margin-bottom:6px} .field input,.field select,.field textarea{ width:100%;background:var(--ink-3);border:1px solid var(--line);color:var(--bone); font-family:var(--body);font-size:.96rem;padding:12px 14px;border-radius:0; transition:border-color .15s, box-shadow .15s} .field textarea{min-height:150px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,183,58,.16)} .field select{appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%); background-position:calc(100% - 19px) 20px,calc(100% - 13px) 20px;background-size:6px 6px;background-repeat:no-repeat} .formnote{font-family:var(--mono);font-size:.72rem;color:var(--steel);margin-top:12px;line-height:1.7} .ccard{border:1px solid var(--line);background:var(--ink-2);padding:22px 24px;margin-bottom:14px; transition:border-color .2s,transform .2s} .ccard:hover{border-color:var(--line-gold);transform:translateY(-2px)} .ccard h4{font-family:var(--display);text-transform:uppercase;font-size:1.15rem;color:var(--gold)} .ccard p{color:var(--bone-dim);font-size:.92rem;margin-top:5px} .ccard a.big{display:inline-block;max-width:100%;margin-top:9px;font-family:var(--cond);font-size:1.1rem; letter-spacing:.04em;color:var(--bone);border-bottom:1px solid var(--line-gold);padding-bottom:2px; overflow-wrap:anywhere;word-break:break-word} .ccard a.big:hover{color:var(--gold)} @media(max-width:900px){ .contactgrid{grid-template-columns:1fr;gap:38px} } .newslayout{display:grid;grid-template-columns:1fr 320px;gap:50px;align-items:start} @media(max-width:900px){ .newslayout{grid-template-columns:1fr;gap:34px} } /* ---------- results ---------- */ .result{border:1px solid var(--line);background:var(--ink-2);margin-bottom:22px;overflow:hidden} .result.latest{border-color:var(--line-gold)} .result-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; padding:20px 24px;border-bottom:1px solid var(--line);background:var(--ink-3)} .result.latest .result-head{background:linear-gradient(180deg,var(--gold-bright),var(--gold) 55%,var(--gold-deep));color:#120c00} .result-head h3{font-family:var(--display);text-transform:uppercase;font-size:1.4rem;line-height:1} .result-head .meta{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em} .result.latest .result-head .meta{color:#3d2c05} .result-head .meta{color:var(--bone-dim)} .card-list{padding:10px 24px 22px} .bout{padding:14px 0;border-bottom:1px solid var(--line)} .bout:last-child{border-bottom:0} .bout .stip{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);margin-bottom:4px} .bout .line{font-family:var(--cond);font-size:1.16rem;letter-spacing:.02em;color:var(--bone)} .bout .line .win{color:var(--gold);font-weight:600} .bout .line .def{color:var(--steel);font-style:italic;padding:0 6px} .bout .note{font-family:var(--mono);font-size:.7rem;color:var(--steel);margin-top:4px} .empty{padding:22px 24px;font-family:var(--mono);font-size:.78rem;color:var(--steel)} /* ---------- donated by Liquid Media Studios ---------- */ .donated{border-top:1px solid var(--line-gold);background: radial-gradient(90% 160% at 12% 0%,rgba(232,183,58,.10),transparent 62%),#0b0b0e; padding:44px 0} .donated-inner{display:grid;grid-template-columns:auto 1fr auto;gap:34px;align-items:center} .lm-logo{width:190px;height:94px;flex:none;background:var(--lm-logo) left center/contain no-repeat; opacity:.9;transition:opacity .2s,transform .2s;display:block} .lm-logo:hover{opacity:1;transform:translateY(-2px)} .lm-copy p:not(.eyebrow){color:var(--bone-dim);font-size:.95rem;margin-top:8px;max-width:640px} .lm-btn{white-space:nowrap} .donated-inner > *{min-width:0} @media(max-width:900px){ .donated-inner{grid-template-columns:1fr;gap:20px} .lm-btn{justify-self:start;white-space:normal} } @media(max-width:980px){ .rgrid,.grid4,.tiers,.statband{grid-template-columns:1fr 1fr} .grid3,.valuegrid{grid-template-columns:1fr} } @media(max-width:640px){ .rgrid,.grid4,.grid2,.tiers,.statband{grid-template-columns:1fr} .reign{grid-template-columns:1fr;gap:4px} .post{grid-template-columns:1fr} .post .thumb{display:none} } /* ---------- sponsors: mission + packages ---------- */ .mission{border-left:3px solid var(--gold);padding-left:26px} .tier .price{display:flex;align-items:baseline;gap:8px} .tier .amt{font-family:var(--display);font-size:2rem;color:var(--gold);line-height:1} .tier-note{font-family:var(--mono);font-size:.72rem;color:var(--bone-dim); border:1px dashed var(--line-gold);padding:8px 10px;margin-bottom:14px;line-height:1.6} .tiers{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))} .save-band{margin-top:34px;border:1px solid var(--line-gold); background:linear-gradient(90deg,rgba(232,183,58,.14),transparent 70%),var(--ink-2); padding:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap} .save-band h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1;margin-top:6px} .quote{border:1px solid var(--line-gold);background:var(--ink-2);padding:30px;display:flex; flex-direction:column;justify-content:center;position:relative} .quote::before{content:"\201C";position:absolute;top:-6px;left:16px;font-family:var(--display); font-size:5rem;color:var(--gold);opacity:.35;line-height:1} .quote p{color:var(--bone);font-size:1.08rem;font-style:italic;position:relative;z-index:1} .quote cite{display:block;margin-top:14px;font-family:var(--cond);font-style:normal;font-weight:600; text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;color:var(--gold)} /* ---------- downloads ---------- */ .dlgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:start} .dlgrid > *{min-width:0} .dl{border:1px solid var(--line);background:var(--ink-2);display:block;overflow:hidden;transition:.25s} .dl:hover{border-color:var(--gold);transform:translateY(-5px);box-shadow:0 18px 40px -20px rgba(232,183,58,.4)} .dl img{width:100%;display:block;border-bottom:1px solid var(--line)} .dl-cap{padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .dl-cap h4{font-family:var(--display);text-transform:uppercase;font-size:1.05rem;line-height:1.1} .dl-go{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);white-space:nowrap} .dl.feature{border-color:var(--line-gold);display:grid;grid-template-columns:auto 1fr auto;gap:18px; align-items:center;padding:26px;grid-column:1/-1; background:radial-gradient(120% 160% at 0% 0%,rgba(232,183,58,.12),transparent 60%),var(--ink-2)} .dl.feature > *{min-width:0} .dl.feature .dl-ic{width:52px;height:52px;color:var(--gold);flex:none} .dl.feature .dl-ic svg{width:100%;height:100%} .dl.feature h4{font-family:var(--display);text-transform:uppercase;font-size:1.3rem} .dl.feature p{color:var(--bone-dim);font-size:.92rem;margin-top:4px} @media(max-width:900px){ .dl.feature{grid-template-columns:auto 1fr;gap:14px} .dl.feature .dl-go{grid-column:2;justify-self:start} } @media(max-width:620px){ .dlgrid{grid-template-columns:1fr} .mission{padding-left:16px} .dl.feature{grid-template-columns:1fr} .dl.feature .dl-go{grid-column:1} } /* ---------- roster card collection ---------- */ .cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px} .cardgrid > *{min-width:0} .ccard-img{border:1px solid var(--line);background:var(--ink-2);overflow:hidden; transition:transform .25s cubic-bezier(.22,1,.36,1),border-color .25s,box-shadow .25s} .ccard-img img{width:100%;height:auto;display:block} .ccard-img:hover{transform:translateY(-8px) scale(1.02);border-color:var(--gold); box-shadow:0 20px 44px -18px rgba(232,183,58,.5);position:relative;z-index:2} @media(max-width:520px){ .cardgrid{grid-template-columns:1fr 1fr;gap:12px} } /* ---------- ticket info on event rows ---------- */ .tixline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px; font-family:var(--mono);font-size:.72rem;letter-spacing:.02em} .tixline .prc{color:var(--gold);font-weight:700} .tixline .prc.free{background:var(--gold);color:#120c00;padding:1px 7px;letter-spacing:.08em;text-transform:uppercase} .tixline .sep{color:var(--line)} .tixline .where{color:var(--steel)} .noticket{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right;max-width:230px} .noticket .nt-tag{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.14em; font-size:.82rem;color:var(--gold);border:1px solid var(--line-gold);padding:.4em 1em;white-space:nowrap} .noticket .nt-where{font-family:var(--mono);font-size:.66rem;color:var(--steel);line-height:1.5} @media(max-width:900px){ .noticket{align-items:flex-start;text-align:left;max-width:none} } /* ---------- contact: Paperform embed ---------- */ .pf-embed{min-height:420px} .pf-embed [data-paperform-id]{width:100%} /* ---------- "content coming soon" block ---------- */ .soon{border:1px solid var(--line-gold);background: radial-gradient(90% 140% at 50% 0%,rgba(232,183,58,.12),transparent 62%),var(--ink-2); padding:clamp(44px,7vw,86px) 30px;text-align:center;position:relative;overflow:hidden} .soon::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(255,255,255,.02) 14px 28px)} .soon > *{position:relative;z-index:1} .soon-mark{display:block;width:54px;height:54px;margin:0 auto 22px; background:var(--logo) center/contain no-repeat;opacity:.85} .soon h2{font-family:var(--display);text-transform:uppercase;line-height:.95; font-size:clamp(2rem,5vw,3.4rem);color:var(--gold)} .soon p{color:var(--bone-dim);max-width:460px;margin:14px auto 0} .soon-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}