/* ============================================================ Eventlist redesign — "Start Line" (Direction A / dark) Ported from design_handoff_eventlist_redesign/el.css + el-dirA-*.jsx Brand blue #0652A1. ============================================================ */ /* Font loading moved to a + preconnect in header-redesign.php's — a CSS @import here would block on fetching+parsing this stylesheet first before the browser even discovers the font request, delaying text render. */ .elA, .elA *{ box-sizing:border-box; } .elA{ --bg:#0A1525; --bg2:#0D1B2E; --surface:#10243C; --surface2:#16304E; --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.16); --ink:#EAF1F9; --muted:#8DA4BE; --faint:#62788f; --accent:#2E7DE0; --accent-strong:#3A8BF0; --brandblue:#0652A1; background:var(--bg); color:var(--ink); font-family:'Archivo',system-ui,sans-serif; -webkit-font-smoothing:antialiased; margin:0; min-height:100vh; } .elA a{ color:inherit; } .elA img{ max-width:100%; } .elA .display{ font-weight:900; letter-spacing:-.02em; line-height:.92; text-transform:uppercase; } .elA .mono{ font-family:'JetBrains Mono',monospace; letter-spacing:.04em; } .elA .kicker{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); } /* ====================== structural ================== */ .elA .wrap{ max-width:1440px; margin:0 auto; padding-left:64px; padding-right:64px; } /* top bar */ .elA .elTop{ display:flex; align-items:center; justify-content:space-between; height:78px; border-bottom:1px solid var(--line); } .elA .elTop .logo-link{ display:flex; align-items:center; } .elA .elTop .logo{ height:30px; width:auto; display:block; } .elA .elTopInner{ display:flex; align-items:center; gap:40px; } .elA .elNav{ display:flex; align-items:center; gap:30px; } .elA .elNav a{ font-size:14.5px; font-weight:600; color:var(--muted); text-decoration:none; } .elA .elNav a.on, .elA .elNav a:hover{ color:var(--ink); } .elA .elTopActions{ display:flex; align-items:center; gap:14px; } .elA .elBtn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 20px; border-radius:999px; font-weight:700; font-size:14px; text-decoration:none; cursor:pointer; border:none; white-space:nowrap; font-family:inherit; } .elA .elBtn.solid{ background:var(--accent); color:#fff; box-shadow:0 6px 24px -6px rgba(46,125,224,.7); } .elA .elBtn.solid:hover{ background:var(--accent-strong); } .elA .elBtn.ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line2); } .elA .elBtn.ghost:hover{ border-color:var(--accent); color:var(--accent); } .elA .elBtn.white{ background:#fff; color:var(--brandblue); } .elA .elBtn.white:hover{ background:#EAF1F9; } .elA .elBtn[disabled]{ opacity:.5; cursor:not-allowed; } /* mobile nav */ .elA .hamburger-btn{ display:none; background:none; border:none; padding:8px; cursor:pointer; } .elA .hamburger-btn span{ display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; } .elA .mobileNav{ display:none; position:fixed; inset:0; z-index:50; background:var(--bg); } .elA .mobileNav.open{ display:block; } .elA .mobileNav .wrap{ padding-top:20px; } .elA .mobileNav nav{ display:flex; flex-direction:column; gap:4px; margin-top:20px; } .elA .mobileNav nav a{ font-size:20px; font-weight:700; color:var(--ink); text-decoration:none; padding:14px 0; border-bottom:1px solid var(--line); } .elA .mobileNav .elTopActions{ flex-direction:column; align-items:stretch; margin-top:24px; } .elA .mobileNav .elBtn{ width:100%; height:48px; } /* sport chip row */ .elA .sportRow{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; } .elA .sportTile{ min-width:0; display:flex; flex-direction:column; gap:14px; padding:20px 20px 18px; border-radius:16px; text-decoration:none; position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line); } .elA .sportTile:hover{ border-color:var(--line2); } .elA .sportTile .ico{ width:38px; height:38px; } .elA .sportTile .nm{ font-weight:800; font-size:17px; letter-spacing:-.01em; } .elA .sportTile .ct{ font-size:13px; color:var(--muted); margin-top:4px; letter-spacing:.06em; } /* search bar */ .elA .searchBar{ display:flex; align-items:stretch; border-radius:16px; overflow:hidden; background:var(--surface); border:1px solid var(--line2); } .elA .searchSeg{ display:flex; flex-direction:column; justify-content:center; gap:3px; padding:14px 22px; flex:1; border-right:1px solid var(--line); } .elA .searchSeg:last-of-type{ border-right:none; } .elA .searchSeg .lab{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:700; } .elA .searchSeg select{ appearance:none; -webkit-appearance:none; background:transparent; border:none; outline:none; font-family:inherit; font-size:16px; font-weight:600; color:var(--ink); padding:0; width:100%; cursor:pointer; } .elA .searchSeg select option{ background:var(--surface2); color:var(--ink); } .elA .searchBtn{ border:none; background:var(--accent); color:#fff; padding:0 30px; font-weight:800; font-size:15px; cursor:pointer; display:flex; align-items:center; gap:9px; font-family:inherit; } .elA .searchBtn:hover{ background:var(--accent-strong); } /* event card */ .elA .evCard{ display:flex; flex-direction:column; border-radius:16px; overflow:hidden; text-decoration:none; position:relative; background:var(--surface); border:1px solid var(--line); color:var(--ink); } .elA .evCard:hover{ border-color:var(--line2); } .elA .dateBlk{ display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; } .elA .dateBlk .d{ font-weight:900; font-size:26px; font-family:'Archivo',sans-serif; } .elA .dateBlk .m{ font-size:12px; font-weight:700; letter-spacing:.12em; } /* footer */ .elA .elFoot{ border-top:1px solid var(--line); margin-top:auto; } .elA .elFootInner{ padding-top:40px; padding-bottom:40px; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:30px; } .elA .elFootBrand{ max-width:300px; } .elA .elFootBrand img{ height:26px; margin-bottom:16px; } .elA .elFootBrand p{ font-size:12px; letter-spacing:.06em; color:var(--faint); line-height:1.7; margin:0; } .elA .elFootCols{ display:flex; gap:64px; flex-wrap:wrap; } .elA .elFootCol{ display:flex; flex-direction:column; gap:12px; } .elA .elFootCol .colhead{ font-size:11px; letter-spacing:.16em; color:var(--accent); } .elA .elFootCol a{ font-size:14px; color:var(--muted); text-decoration:none; white-space:nowrap; } .elA .elFootCol a:hover{ color:var(--ink); } .elA .elFootStrip{ border-top:1px solid var(--line); padding-top:20px; padding-bottom:20px; } .elA .elFootCopy{ font-size:12px; color:var(--faint); margin:0; } /* tag */ .elA .tag{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:7px; white-space:nowrap; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:var(--surface2); color:var(--muted); } .elA .tag.blue{ background:rgba(46,125,224,.16); color:var(--accent); } .elA .tag.star{ background:rgba(46,125,224,.16); color:var(--accent); } /* hairline divider */ .elA .hr{ height:1px; background:var(--line); border:none; width:100%; margin:0; } /* filter chip */ .elA .fchip{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 16px; border-radius:999px; font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; border:1px solid var(--line2); color:var(--muted); background:transparent; text-decoration:none; font-family:inherit; } .elA .fchip.on{ background:var(--accent); color:#fff; border-color:var(--accent); } .elA .fchip:hover:not(.on){ border-color:var(--accent); color:var(--ink); } /* ====================== ad slot ================== */ .elA .adSlot{ width:100%; } .elA .adSlot.center{ margin-left:auto; margin-right:auto; } .elA .adSlot-label{ font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); opacity:.7; margin-bottom:7px; text-align:center; } /* On mobile every ad slot renders as a single fixed 300x250 unit, centered, regardless of the size/center args passed at each call site (leaderboards, 970-wide home banners and 300x600 skyscrapers alike). !important is needed to beat elAdSlot()'s per-call inline width/min-height. */ @media (max-width: 980px){ .elA .adSlot{ width:300px !important; max-width:300px !important; margin-left:auto !important; margin-right:auto !important; } .elA .adSlot-box{ min-height:250px !important; height:250px !important; } } /* ====================== hero (home + mobile home) ================== */ .elA .hero{ padding-top:34px; padding-bottom:40px; position:relative; } .elA .hero-glow{ position:absolute; top:-40px; right:-120px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(46,125,224,.18), transparent 62%); pointer-events:none; } .elA .hero h1{ font-size:92px; margin:15px 0 26px; max-width:1050px; } .elA .hero .sub{ font-size:19px; line-height:1.5; color:var(--muted); max-width:560px; margin:0 0 38px; } .elA .hero .stat-strip{ display:flex; gap:34px; flex-wrap:wrap; margin-top:30px; font-size:12.5px; letter-spacing:.08em; color:var(--faint); } .elA .hero .stat-strip b{ color:var(--ink); } /* section head */ .elA .section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:10px; } .elA .section-head h2{ font-size:26px; margin:0; } .elA .section-head .eyebrow{ font-size:12px; color:var(--faint); letter-spacing:.1em; } .elA .section-head .viewall{ display:flex; align-items:center; gap:8px; color:var(--accent); font-weight:700; font-size:14px; text-decoration:none; } /* feature card */ .elA .featCard{ padding:26px 26px 22px; gap:18px; min-height:280px; justify-content:space-between; } .elA .featCard .top-row{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; } .elA .featCard .tags-row{ display:flex; align-items:center; gap:9px; margin-bottom:13px; } .elA .featCard h3{ font-size:30px; margin:0 0 12px; max-width:92%; } .elA .featCard .locline{ font-size:12.5px; letter-spacing:.06em; color:var(--muted); margin-bottom:14px; } .elA .featCard p.blurb{ margin:0; font-size:14.5px; line-height:1.5; color:var(--muted); } .elA .featCard .foot-row{ display:flex; justify-content:space-between; align-items:center; padding-top:18px; border-top:1px solid var(--line); margin-top:14px; } .elA .featCard .foot-row .sportname{ font-size:11.5px; letter-spacing:.1em; color:var(--faint); } .elA .featCard .foot-row .cta{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; color:var(--accent); } .elA .feature-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; } /* row card (on this weekend) */ .elA .rowCard{ flex-direction:row; align-items:center; gap:16px; padding:14px 18px; } .elA .rowCard .divider{ width:1px; align-self:stretch; background:var(--line); } .elA .rowCard .info{ flex:1; min-width:0; } .elA .rowCard .info .nm{ font-weight:800; font-size:16.5px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:5px; } .elA .rowCard .info .locline{ font-size:11.5px; letter-spacing:.05em; color:var(--muted); } /* home 2-col: state + weekend */ .elA .home-cols{ display:grid; grid-template-columns:1fr 1fr; gap:54px; } .elA .home-cols > div{ min-width:0; } .elA .state-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .elA .state-grid > .state-tile{ min-width:0; } .elA .state-tile{ display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-radius:12px; background:var(--surface); border:1px solid var(--line); text-decoration:none; } .elA .state-tile:hover{ border-color:var(--line2); } .elA .state-tile .ab-name{ display:flex; align-items:center; gap:14px; } .elA .state-tile .ab{ font-size:18px; color:var(--accent); min-width:42px; font-weight:900; text-transform:uppercase; } .elA .state-tile .nm{ font-size:14.5px; color:var(--ink); font-weight:600; } .elA .state-tile .ct{ font-size:12px; color:var(--faint); font-family:'JetBrains Mono',monospace; } .elA .weekend-list{ display:flex; flex-direction:column; gap:10px; } /* CTA band */ .elA .cta-band{ border-radius:20px; padding:44px 48px; background:linear-gradient(100deg, var(--brandblue), #0A3E78); display:flex; align-items:center; justify-content:space-between; gap:30px; overflow:hidden; position:relative; flex-wrap:wrap; } .elA .cta-band h3{ font-size:30px; margin:0 0 10px; color:#fff; } .elA .cta-band p{ margin:0; color:rgba(255,255,255,.8); font-size:16px; max-width:480px; } /* ====================== page head / breadcrumb (listing, detail, etc) ================== */ .elA .page-head{ padding-top:40px; padding-bottom:28px; border-bottom:1px solid var(--line); } .elA .breadcrumb{ font-size:11.5px; letter-spacing:.12em; color:var(--faint); margin-bottom:16px; font-family:'JetBrains Mono',monospace; } .elA .breadcrumb a{ color:var(--faint); text-decoration:none; } .elA .breadcrumb a:hover{ color:var(--muted); } .elA .page-head h1{ font-size:46px; margin:0 0 14px; } .elA .page-head .sub{ margin:0; font-size:16px; color:var(--muted); max-width:640px; line-height:1.5; } /* sport tab / chip bar */ .elA .chip-bar{ padding-top:18px; padding-bottom:18px; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:center; flex-wrap:wrap; overflow-x:auto; } /* ====================== listing body ================== */ .elA .listing-body{ padding-top:22px; padding-bottom:50px; display:grid; grid-template-columns:300px 1fr; gap:40px; align-items:start; } .elA .filter-rail-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; } .elA .filter-rail-head .ttl{ font-size:18px; font-weight:900; text-transform:uppercase; } .elA .filter-rail-head .reset{ font-size:11px; color:var(--accent); text-decoration:none; font-family:'JetBrains Mono',monospace; } .elA .filter-group{ padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--line); } .elA .filter-group .ttl{ font-size:11px; letter-spacing:.14em; color:var(--faint); margin-bottom:14px; font-family:'JetBrains Mono',monospace; text-transform:uppercase; } .elA .filter-opts{ display:flex; flex-direction:column; gap:11px; } .elA .filter-opt{ display:flex; align-items:center; gap:11px; font-size:14px; color:var(--muted); cursor:pointer; text-decoration:none; } .elA .filter-opt.sel{ color:var(--ink); } .elA .filter-opt .box{ width:18px; height:18px; border-radius:5px; border:1.5px solid var(--line2); flex:none; display:flex; align-items:center; justify-content:center; background:transparent; } .elA .filter-opt.sel .box{ background:var(--accent); border-color:var(--accent); } .elA .results-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:12px; } .elA .results-count{ font-size:13px; letter-spacing:.06em; color:var(--muted); font-family:'JetBrains Mono',monospace; } .elA .results-count b{ color:var(--ink); } .elA .sort-control{ max-width:230px; border-radius:10px; } .elA .sort-control .searchSeg{ padding:9px 16px; border-right:none; } .elA .sort-control .val{ font-size:14px; } .elA .results-list{ display:flex; flex-direction:column; gap:12px; } /* list row */ .elA .listRow{ flex-direction:row; align-items:stretch; gap:0; padding:0; } .elA .listRow .lr-date{ width:96px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--surface2); border-right:1px solid var(--line); gap:2px; padding:12px 6px; text-align:center; } .elA .listRow .lr-date .d{ font-size:30px; color:var(--accent); font-weight:900; text-transform:uppercase; } .elA .listRow .lr-date .m{ font-size:12px; letter-spacing:.1em; color:var(--muted); } .elA .listRow .lr-date .wk{ font-size:10.5px; letter-spacing:.08em; color:var(--faint); margin-top:2px; } .elA .listRow .lr-main{ flex:1; padding:18px 22px; display:flex; align-items:center; gap:18px; min-width:0; } .elA .listRow .lr-tags{ display:flex; align-items:center; gap:9px; margin-bottom:8px; } .elA .listRow .lr-tags .tag{ height:22px; font-size:10.5px; } .elA .listRow h3{ font-size:22px; margin:0 0 7px; } .elA .listRow .lr-loc{ font-size:12px; letter-spacing:.05em; color:var(--muted); } .elA .listRow .lr-cta{ display:flex; align-items:center; padding:0 26px; border-left:1px solid var(--line); flex:none; } .elA .listRow .lr-cta span{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:13.5px; color:var(--accent); white-space:nowrap; } /* event logo tile */ .elA .evLogo{ border-radius:13px; flex:none; display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); } .elA .evLogo img{ width:100%; height:100%; object-fit:cover; display:block; } .elA .evLogo span{ color:#fff; font-weight:900; letter-spacing:-.02em; line-height:1; font-family:'Archivo',sans-serif; } /* pagination */ .elA .pagination{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:34px; flex-wrap:wrap; } .elA .pagination a, .elA .pagination span{ min-width:38px; height:38px; padding:0 6px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; cursor:pointer; background:var(--surface); color:var(--muted); border:1px solid var(--line); text-decoration:none; } .elA .pagination a:hover{ border-color:var(--line2); color:var(--ink); } .elA .pagination .cur{ background:var(--accent); color:#fff; border-color:var(--accent); } .elA .pagination .ellipsis{ background:none; border:none; } /* ====================== detail page ================== */ .elA .detail-hero{ padding-top:36px; padding-bottom:40px; position:relative; } .elA .detail-hero .tags-row{ display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; } .elA .detail-hero h1{ font-size:68px; margin:0 0 24px; max-width:900px; } .elA .fact-row-4{ display:flex; gap:40px; flex-wrap:wrap; } .elA .fact-block .k{ font-size:11px; letter-spacing:.12em; color:var(--faint); margin-bottom:6px; font-family:'JetBrains Mono',monospace; text-transform:uppercase; } .elA .fact-block .v{ font-size:18px; font-weight:700; } .elA .detail-body{ padding-top:40px; padding-bottom:50px; display:grid; grid-template-columns:1fr 360px; gap:54px; align-items:start; } .elA .detail-body h2{ font-size:24px; margin:0 0 16px; } .elA .detail-body p.lead{ font-size:16.5px; line-height:1.65; color:var(--muted); margin:0 0 16px; } .elA .lead-block{ margin-bottom:20px; } .elA .lead-block p{ font-size:16.5px; line-height:1.65; color:var(--muted); margin:0 0 16px; } .elA .lead-block a{ color:var(--accent); } .elA .distances-table{ border-radius:14px; overflow:hidden; border:1px solid var(--line); margin-bottom:38px; } .elA .distance-row{ display:flex; align-items:center; justify-content:space-between; padding:17px 22px; background:var(--surface); border-top:1px solid var(--line); } .elA .distance-row:first-child{ border-top:none; } .elA .distance-row .left{ display:flex; align-items:center; gap:16px; } .elA .distance-row .dist{ font-size:18px; color:var(--accent); min-width:78px; font-weight:900; text-transform:uppercase; } .elA .distance-row .nm{ font-size:15.5px; font-weight:700; } .elA .distance-row .desc{ font-size:11.5px; letter-spacing:.03em; color:var(--faint); margin-top:2px; font-family:'JetBrains Mono',monospace; } .elA .results-selector{ display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap; } .elA .results-columns{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .elA .results-col{ border-radius:14px; border:1px solid var(--line); overflow:hidden; background:var(--surface); } .elA .results-col-head{ padding:13px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; background:var(--surface2); } .elA .results-col-head .lbl{ font-size:16px; font-weight:900; text-transform:uppercase; } .elA .results-col-head .sub{ font-size:10.5px; color:var(--faint); letter-spacing:.12em; font-family:'JetBrains Mono',monospace; } .elA .results-row{ display:flex; align-items:center; gap:14px; padding:11px 20px; border-top:1px solid var(--line); } .elA .results-row:first-child{ border-top:none; } .elA .results-row .rank{ font-size:18px; min-width:24px; text-align:center; color:var(--faint); font-weight:900; } .elA .results-row.podium .rank{ color:var(--accent); } .elA .results-row .nm{ flex:1; font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .elA .results-row .tm{ font-size:13.5px; color:var(--muted); font-family:'JetBrains Mono',monospace; } .elA .results-row.winner .tm{ color:var(--accent); } .elA .results-foot{ font-size:10.5px; letter-spacing:.06em; color:var(--faint); margin-top:14px; font-family:'JetBrains Mono',monospace; text-transform:uppercase; } .elA .facts-card{ border-radius:16px; border:1px solid var(--line2); background:var(--surface); padding:24px 24px 22px; margin-bottom:16px; } .elA .facts-card .head-row{ display:flex; align-items:center; gap:14px; margin-bottom:18px; } .elA .facts-card .head-row .edtn{ font-size:11px; letter-spacing:.14em; color:var(--faint); font-family:'JetBrains Mono',monospace; } .elA .facts-card .head-row .edtn span{ color:var(--muted); } .elA .fact-row{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line); gap:12px; } .elA .fact-row:last-of-type{ border-bottom:none; } .elA .fact-row .k{ font-size:11.5px; letter-spacing:.1em; color:var(--faint); font-family:'JetBrains Mono',monospace; text-transform:uppercase; white-space:nowrap; } .elA .fact-row .v{ font-size:14.5px; font-weight:700; color:var(--ink); text-align:right; max-width:62%; } .elA .fact-row .v.accent{ color:var(--accent); } .elA .fact-row a.v{ text-decoration:none; } .elA .facts-card .elBtn{ width:100%; justify-content:center; margin-top:10px; } .elA .facts-card .elBtn:first-of-type{ margin-top:18px; } .elA .facts-card .microcopy{ font-size:10px; letter-spacing:.06em; color:var(--faint); text-align:center; line-height:1.6; margin-top:14px; font-family:'JetBrains Mono',monospace; } .elA .related-section{ padding-bottom:60px; } .elA .related-section h2{ font-size:24px; margin:0 0 22px; } /* ====================== forms (contact / add event) ================== */ .elA .form-body{ padding-top:40px; padding-bottom:60px; display:grid; grid-template-columns:1fr 360px; gap:54px; align-items:start; } .elA .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; } .elA .field{ margin-bottom:18px; } .elA .field.wide{ grid-column:1 / -1; } .elA .field .lbl{ font-size:11px; letter-spacing:.12em; color:var(--faint); margin-bottom:8px; font-family:'JetBrains Mono',monospace; text-transform:uppercase; } .elA .field input, .elA .field select, .elA .field textarea{ width:100%; background:var(--surface2); border:1px solid var(--line2); border-radius:10px; padding:12px 16px; color:var(--ink); font-size:14.5px; font-family:inherit; outline:none; } .elA .field select{ cursor:pointer; } .elA .field input:focus, .elA .field select:focus, .elA .field textarea:focus{ border-color:var(--accent); } .elA .form-aside{ border-radius:16px; border:1px solid var(--line2); background:var(--surface); padding:24px 24px 22px; } .elA .form-aside .lbl{ font-size:11px; letter-spacing:.14em; color:var(--faint); margin-bottom:14px; font-family:'JetBrains Mono',monospace; } .elA .form-aside .social-row{ display:flex; gap:10px; } .elA .upload-box{ width:88px; height:88px; border-radius:16px; border:1.5px dashed var(--line2); display:flex; align-items:center; justify-content:center; margin-bottom:16px; text-align:center; } .elA .upload-box span{ font-size:10px; color:var(--faint); letter-spacing:.06em; font-family:'JetBrains Mono',monospace; } .elA .form-microcopy{ font-size:10.5px; letter-spacing:.06em; color:var(--faint); line-height:1.6; font-family:'JetBrains Mono',monospace; } .elA .form-error{ color:#F08A8A; font-size:12.5px; margin-top:6px; } .elA .form-success{ padding:24px; border-radius:14px; background:var(--surface); border:1px solid var(--line); } /* ====================== news ================== */ .elA .article-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; } .elA .articleCard{ padding:0; } .elA .articleThumb{ height:150px; position:relative; overflow:hidden; } .elA .articleThumb img{ width:100%; height:100%; object-fit:cover; } .elA .articleThumb.big{ height:200px; } .elA .articleCard .body{ padding:20px 22px 22px; } .elA .articleCard .tags-row{ display:flex; align-items:center; gap:9px; margin-bottom:12px; } .elA .articleCard h3{ font-size:18px; margin:0 0 10px; line-height:1.15; text-transform:none; letter-spacing:-.01em; } .elA .articleCard p{ margin:0 0 14px; font-size:14px; line-height:1.5; color:var(--muted); } .elA .articleCard .meta{ font-size:11px; letter-spacing:.06em; color:var(--faint); font-family:'JetBrains Mono',monospace; } .elA .article-page-head{ padding-top:36px; padding-bottom:0; } .elA .article-page-head h1{ font-size:54px; margin:0 0 22px; max-width:920px; text-transform:none; letter-spacing:-.01em; line-height:1.05; } .elA .article-byline{ display:flex; align-items:center; gap:16px; margin-bottom:30px; flex-wrap:wrap; } .elA .article-byline .avatar{ width:38px; height:38px; border-radius:50%; background:var(--surface2); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:900; } .elA .article-byline .who{ font-size:14px; font-weight:700; } .elA .article-byline .when{ font-size:11.5px; color:var(--faint); font-family:'JetBrains Mono',monospace; } .elA .article-byline .share{ display:flex; gap:10px; margin-left:auto; } .elA .article-byline .share span{ font-size:11px; letter-spacing:.08em; color:var(--accent); cursor:pointer; font-family:'JetBrains Mono',monospace; } .elA .article-hero-img{ height:300px; border-radius:16px; overflow:hidden; position:relative; margin-bottom:30px; } .elA .article-hero-img img{ width:100%; height:100%; object-fit:cover; } .elA .article-lead{ font-size:17px; line-height:1.65; color:var(--ink); font-weight:600; margin:0 0 22px; } .elA .article-body p{ font-size:16.5px; line-height:1.7; color:var(--muted); margin:0 0 22px; } .elA .article-body h2, .elA .article-body h3{ font-size:22px; margin:32px 0 16px; text-transform:none; letter-spacing:-.01em; font-weight:900; } .elA .article-body ul, .elA .article-body ol{ color:var(--muted); font-size:16.5px; line-height:1.7; margin:0 0 22px; padding-left:22px; } .elA .article-body a{ color:var(--accent); } .elA .article-body img{ border-radius:14px; margin:10px 0 22px; } .elA .pull-quote, .elA .article-body .pullquote{ margin:34px 0; text-align:center; font-size:26px; color:var(--accent); line-height:1.3; max-width:640px; margin-left:auto; margin-right:auto; font-weight:900; letter-spacing:-.01em; } .elA .article-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:30px; padding-top:24px; border-top:1px solid var(--line); } .elA .related-list{ display:flex; flex-direction:column; gap:12px; } .elA .related-list a{ display:flex; gap:12px; text-decoration:none; align-items:flex-start; } .elA .related-list .thumb{ width:64px; height:48px; border-radius:9px; flex:none; position:relative; overflow:hidden; } .elA .related-list .thumb img{ width:100%; height:100%; object-fit:cover; } .elA .related-list .ttl{ font-size:13.5px; font-weight:700; line-height:1.3; color:var(--ink); } .elA .related-articles-head{ font-size:11px; letter-spacing:.14em; color:var(--faint); margin-bottom:14px; font-family:'JetBrains Mono',monospace; text-transform:uppercase; } /* placeholder stripe (article images, course map style) */ .elA .stripe{ position:absolute; inset:0; background:repeating-linear-gradient(135deg,#0E2138,#0E2138 11px,transparent 11px,transparent 22px), #0C1B30; display:flex; align-items:flex-end; padding:10px; } .elA .stripe span{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; opacity:.6; font-family:'JetBrains Mono',monospace; } /* ====================== clubs page ================== */ .elA .club-why-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; } .elA .club-why-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px 24px 22px; } .elA .club-why-card h3{ font-size:19px; margin:0 0 10px; text-transform:none; letter-spacing:-.01em; } .elA .club-why-card p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--muted); } /* ====================== static pages ================== */ .elA .static-body{ padding-top:40px; padding-bottom:60px; max-width:760px; } .elA .static-body p{ font-size:16.5px; line-height:1.7; color:var(--muted); margin:0 0 22px; } .elA .static-section{ margin-bottom:28px; } .elA .static-section h2{ font-size:20px; margin:0 0 12px; text-transform:none; letter-spacing:-.01em; } .elA .static-section p{ font-size:15.5px; line-height:1.65; color:var(--muted); margin:0 0 14px; } .elA .static-section p:last-child{ margin-bottom:0; } .elA .sitemap-grid{ padding-top:40px; padding-bottom:60px; display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:40px; } .elA .sitemap-col{ display:flex; flex-direction:column; gap:13px; } .elA .sitemap-col .colhead{ font-size:11px; letter-spacing:.16em; color:var(--accent); font-family:'JetBrains Mono',monospace; } .elA .sitemap-col a{ font-size:14.5px; color:var(--muted); text-decoration:none; } .elA .sitemap-col a:hover{ color:var(--ink); } /* ====================== responsive ================== */ @media (max-width: 980px){ .elA .wrap{ padding-left:20px; padding-right:20px; } .elA .elTopInner .elNav{ display:none; } .elA .elTop .elTopActions{ display:none; } .elA .hamburger-btn{ display:block; } .elA .hero h1{ font-size:46px; } .elA .hero .sub{ font-size:15.5px; } .elA .feature-grid{ grid-template-columns:1fr; } .elA .home-cols{ grid-template-columns:1fr; gap:34px; } .elA .state-grid{ grid-template-columns:1fr; } .elA .listing-body{ grid-template-columns:1fr; } .elA .detail-body{ grid-template-columns:1fr; } .elA .form-body{ grid-template-columns:1fr; } .elA .form-grid{ grid-template-columns:1fr; } .elA .field.wide{ grid-column:auto; } .elA .results-columns{ grid-template-columns:1fr; } .elA .club-why-grid{ grid-template-columns:1fr; } .elA .article-grid{ grid-template-columns:1fr; } .elA .sitemap-grid{ grid-template-columns:1fr 1fr; gap:30px; } .elA .searchBar{ flex-direction:column; } .elA .searchSeg{ border-right:none; border-bottom:1px solid var(--line); } .elA .searchSeg:last-of-type{ border-bottom:none; } .elA .searchBtn{ padding:15px; justify-content:center; } .elA .cta-band{ padding:32px; } .elA .listRow{ flex-direction:column; } .elA .listRow .lr-date{ width:100%; flex-direction:row; gap:10px; padding:10px; } .elA .listRow .lr-cta{ border-left:none; border-top:1px solid var(--line); padding:14px 22px; } .elA .detail-hero h1{ font-size:40px; } } @media (max-width: 640px){ .elA .wrap{ padding-left:20px; padding-right:20px; } .elA .sitemap-grid{ grid-template-columns:1fr; } }