/* ============================================================ YearJersey — Design System (source of truth) Vintage sports-almanac: warm newsprint, varsity type, oxblood + navy + gold. Sharp corners, heavy rules, no gloss. Import this on every page: ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600;700&display=swap'); :root{ /* ---- Color roles ---- */ --paper:#ebe1cc; /* page background — warm newsprint */ --paper-2:#e3d7bb; /* raised surfaces / cards */ --ink:#17140d; /* primary text + borders/rules */ --ink-2:#4a4335; /* secondary text */ --brick:#a8321f; /* PRIMARY accent — CTAs, highlights, stamp */ --brick-dark:#8f2818; /* CTA hover */ --navy:#22304f; /* SECONDARY accent — feature panels */ --gold:#bd881c; /* TERTIARY accent — numerals, flourishes */ --line:#cbbd9c; /* hairlines */ --on-navy:#eef2f9; /* text on navy panels */ --on-brick:#fbf3e2; /* text on brick */ /* ---- Type families ---- */ --font-display:'Anton',Impact,'Arial Narrow',sans-serif; /* varsity condensed: headings, numerals, buttons, wordmark */ --font-serif:'DM Serif Display',Georgia,serif; /* one editorial/emotional line per view — use sparingly */ --font-body:'Inter',system-ui,-apple-system,sans-serif; /* everything else */ /* ---- Fluid type scale ---- */ --fs-numeral:clamp(120px,20vw,220px); --fs-mega:clamp(46px,8.5vw,92px); --fs-h1:clamp(34px,5vw,56px); --fs-h2:clamp(23px,3.2vw,32px); --fs-lede:clamp(18px,2.5vw,25px); --fs-body:16px; --fs-sm:13.5px; --fs-xs:12px; --track-caps:.2em; /* letter-spacing for uppercase labels */ /* ---- Structure ---- */ --maxw:1080px; --pad:clamp(20px,5vw,52px); --rule:3px solid var(--ink); /* masthead / section divider */ --rule-thin:1px solid var(--line); --border:2px solid var(--ink); /* cards, panels */ --shadow-varsity:6px 7px 0 var(--brick); /* offset drop on big numerals */ --space:clamp(16px,3vw,28px); } /* ---- Reset & base ---- */ *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{background:var(--paper);color:var(--ink);font-family:var(--font-body); -webkit-font-smoothing:antialiased;line-height:1.55} /* Faint print grain — add class="grain" to */ .grain::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} /* ---- Layout shell ---- */ .yj-shell{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:26px var(--pad);} /* ---- Type helpers ---- */ .yj-display{font-family:var(--font-display);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.005em} .yj-serif{font-family:var(--font-serif);line-height:1.34} .yj-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-xs);font-weight:600; letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--brick)} .yj-eyebrow::before{content:"";width:26px;height:2px;background:var(--brick)} .yj-caps{font-size:var(--fs-xs);letter-spacing:var(--track-caps);text-transform:uppercase;font-weight:600;color:var(--ink-2)} /* ---- Masthead ---- */ .yj-masthead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap; padding-bottom:14px;border-bottom:var(--rule)} .yj-logo{font-family:var(--font-display);font-size:clamp(22px,3.4vw,30px);text-transform:uppercase;letter-spacing:.02em} .yj-logo b{color:var(--brick)} .yj-rule--thin{height:1px;background:var(--line);margin-top:3px} /* ---- Varsity numeral ---- */ .yj-numeral{font-family:var(--font-display);font-size:var(--fs-numeral);line-height:.8; color:var(--gold);text-shadow:var(--shadow-varsity);letter-spacing:-.02em} /* ---- Navy feature panel (halftone dots) ---- */ .yj-panel{position:relative;color:var(--on-navy);border:var(--border);overflow:hidden; background: radial-gradient(circle at 1.5px 1.5px, rgba(238,242,249,.10) 1.4px, transparent 1.6px) 0 0/16px 16px, var(--navy);} /* ---- Ticket-stub card ---- */ .yj-ticket{border:var(--border);background:var(--paper-2)} .yj-ticket__cap{font-size:11px;font-weight:700;letter-spacing:var(--track-caps);text-transform:uppercase; padding:9px 14px;border-bottom:2px dashed var(--ink);color:var(--ink-2)} .yj-field{flex:1;min-width:0;background:transparent;border:0;color:var(--ink); font-family:var(--font-body);font-size:15px;padding:8px 10px;outline:none} .yj-field::placeholder{color:#9a8f74} /* ---- Button ---- */ .yj-btn{background:var(--brick);color:var(--on-brick);border:0;cursor:pointer; font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;font-size:14px; padding:11px 18px;transition:background .15s ease} .yj-btn:hover{background:var(--brick-dark)} /* ---- Rubber stamp ---- */ .yj-stamp{display:inline-block;transform:rotate(-8deg);border:2px solid var(--brick);color:var(--brick); background:rgba(235,225,204,.9);font-family:var(--font-display);text-transform:uppercase; letter-spacing:.06em;font-size:15px;padding:5px 12px} /* ---- Scoreboard ticker ---- */ .yj-ticker{border-top:var(--rule);border-bottom:var(--rule-thin);overflow:hidden;white-space:nowrap} .yj-ticker__track{display:inline-block;padding:11px 0;animation:yj-scroll 32s linear infinite; font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)} .yj-ticker__track span{margin:0 22px} .yj-ticker__track b{color:var(--brick)} @keyframes yj-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.yj-ticker__track{animation:none}}