/* ========================================================================== stylesheet-e-v1.css — ESPN-style page styles (ESPN body font + Anek Devanagari display). Edit this file directly. No build step. -------------------------------------------------------------------------- RULES - Every class starts with "e-". Everything is scoped under #e (the
opened in header_v3.php and closed in footer_v2.php). - The reset right below discards site-wide styles for elements inside #e (all:revert), so only this file styles page content. header/footer styling lives in stylesheet-v4.css. - Colors and fonts only via the tokens in the "#e{" block (never hard-code hex). - Dark mode: set (no automatic dark). ADD AN ELEMENT: copy markup from espn_components.html, add new rules at the bottom as "#e .e-name{…}". ========================================================================== */ #e :is(div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,a,button,input,select,textarea,label,table,caption,thead,tbody,tfoot,tr,th,td,section,article,aside,nav,header,footer,main,small,b,strong,i,em,u,img,hr,form,pre,code,dl,dt,dd){all:revert} #e{display:block;position:relative;z-index:2;isolation:isolate} /* z-index:2 (the old footer logo uses z-index:1) keeps fixed bits inside the page (dock, sheets, toasts) above the old footer that follows
*/ /* Layout: ESPN main-page skeleton. Black top nav, secondary tab bar, scoreboard strip, then 3 columns (left rail / feed / right rail) on a grey page. All colors and fonts come from ESPN's own page.css values; accent is ESPN's blue, red is not used. */ #e{--page:#edeef0; --card:#fff; --text:#48494a; --head:#1d1e1f; --mute:#6c6d6f; --faint:#a5a6a7; --line:#dcdddf; --div:#f1f2f3; --ctl:#cbccce; --zebra:#f7f7f8; --hl:#e4edf8; --link:#3772df; --link-hi:#305bc8; --btn-on:#fff; --nav:#000; --nav-text:#fff; --plus:#fab200; --pos:#1a8a3e; --neg:#c0392b; --c-goal:#3772df; --c-high:#1a8a3e; --c-low:#c0392b; --c-diff:#0f8b9d; --c-total:#a8710f; --fs-add:0px; /* extra px added to every font size; set to 1px on mobile (see end of file) */ --font:-apple-system,BlinkMacSystemFont,"Roboto","Arial","Helvetica Neue",Helvetica,sans-serif; --display:"Anek Devanagari",-apple-system,BlinkMacSystemFont,"Roboto","Arial","Helvetica Neue",Helvetica,sans-serif;} :root[data-theme="dark"] #e{--page:#171a2e; --card:#20243c; --text:#dfe2ee; --head:#fff; --mute:#a3a8c0; --faint:#737998; --line:#343a5c; --div:#2a2f4d; --ctl:#454c72; --zebra:#252945; --hl:#2c335a; --link:#6c9bf0; --link-hi:#8ab0f5; --btn-on:#121213; --nav:#000; --pos:#3ddc84; --neg:#ff6b72; --c-goal:#588ae4; --c-high:#2fae63; --c-low:#e0525a; --c-diff:#3ab5c6; --c-total:#c8912f; color-scheme:dark} #e *{box-sizing:border-box} #e{background:var(--page);color:var(--text);font-family:var(--font);font-size:calc(14px + var(--fs-add,0px));line-height:1.45;margin:0} #e a{color:var(--link);text-decoration:none} #e a:hover{color:var(--link-hi)} #e h1,#e h2,#e h3,#e h4{color:var(--head);margin:0} #e :focus-visible{outline:2px solid var(--link);outline-offset:2px} #e .e-wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))} /* ───────── top nav ───────── */ #e .e-nav{background:var(--nav);color:var(--nav-text)} #e .e-nav .e-wrap{display:flex;align-items:center;gap:18px;height:48px} #e .e-logo{font-family:var(--display);font-size:calc(21px + var(--fs-add,0px));letter-spacing:.5px;color:#fff} #e .e-nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none} #e .e-nav li a{display:block;padding:14px 10px 12px;color:#e8e8e8;font-size:calc(13px + var(--fs-add,0px));font-weight:700;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;border-bottom:3px solid transparent} #e .e-nav li a:hover,#e .e-nav li a.e-on{color:#fff;border-bottom-color:var(--plus)} #e .e-nav .e-sp{flex:1} #e .e-nav .e-btn{background:var(--plus);color:#000;border-color:var(--plus)} #e .e-sub{background:var(--card);border-bottom:1px solid var(--line)} #e .e-sub .e-wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none} #e .e-sub a{padding:10px 12px 8px;font-size:calc(13px + var(--fs-add,0px));font-weight:500;color:var(--mute);white-space:nowrap;border-bottom:2px solid transparent} #e .e-sub a.e-on{color:var(--head);border-color:var(--head);font-weight:700} /* ───────── scoreboard strip ───────── */ #e .e-strip{background:var(--card);border-bottom:1px solid var(--line)} #e .e-strip .e-wrap{display:flex;gap:8px;padding-top:10px;padding-bottom:10px;overflow-x:auto;scrollbar-width:none;align-items:stretch} #e .e-chip{flex:0 0 150px;border:1px solid var(--line);border-radius:6px;padding:6px 10px;background:var(--card)} #e .e-chip .e-st{font-size:calc(11px + var(--fs-add,0px));font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.3px} #e .e-chip .e-tm{display:flex;justify-content:space-between;font-size:calc(13px + var(--fs-add,0px));font-weight:500;color:var(--head)} #e .e-chip .e-tm b{font-weight:700;font-variant-numeric:tabular-nums} #e .e-chip.e-live .e-st{color:var(--pos)} #e .e-strip .e-nav-arrow{flex:0 0 auto;align-self:center} /* ───────── page grid ─────────
with .e-col children (.e-left / .e-main / .e-right) e-cols-3 = left rail + main + right rail · e-cols-2 = main + right rail · e-cols-2l = left rail + main · e-cols-1 = single column PHP: e_cols(3) / e_cols(2,'right') / e_cols(2,'left') / e_cols(1), then e_col('left'|'main'|'right') … e_col_end(), e_cols_end() */ #e .e-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start} #e .e-cols-3{grid-template-columns:240px minmax(0,1fr) 300px} #e .e-cols-2{grid-template-columns:minmax(0,1fr) 300px} #e .e-cols-2l{grid-template-columns:240px minmax(0,1fr)} #e .e-col{display:grid;gap:16px;min-width:0} @media (max-width:1000px){ #e .e-cols-3{grid-template-columns:minmax(0,1fr) 280px} #e .e-cols-3 .e-left{grid-column:1/-1;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} #e .e-cols-2{grid-template-columns:minmax(0,1fr) 280px} } @media (max-width:768px){ #e .e-cols-3,#e .e-cols-2,#e .e-cols-2l{grid-template-columns:minmax(0,1fr)} } /* ───────── module / card ───────── */ #e .e-mod{background:var(--card);border-radius:10px;padding:16px;min-width:0;box-shadow:0 4px 14px rgba(0,0,0,.25)} #e .e-mod>header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px} #e .e-mod h2{font-family:var(--display);font-weight:700;font-size:calc(25px + var(--fs-add,0px));line-height:1.15} #e .e-mod h3{font-size:calc(16px + var(--fs-add,0px));font-weight:700} #e .e-mod .e-sec{padding:12px 0 14px;border-top:1px solid var(--line)} #e .e-mod .e-sec:first-of-type{border-top:0;padding-top:4px} #e .e-mod footer{border-top:1px solid var(--line);margin:0 -16px -16px;padding:10px 16px;font-size:calc(12px + var(--fs-add,0px))} /* ───────── buttons / controls ───────── */ #e .e-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 18px;border-radius:40px;border:1px solid var(--link);background:var(--link);color:var(--btn-on);font:600 calc(12px + var(--fs-add,0px))/30px var(--font);cursor:pointer;white-space:nowrap} #e .e-btn:hover{background:var(--link-hi);border-color:var(--link-hi);color:var(--btn-on)} #e .e-btn.e-out{background:transparent;color:var(--link)} #e .e-btn.e-out:hover{background:var(--hl);color:var(--link-hi)} #e .e-btn.e-grey{background:var(--div);border-color:var(--ctl);color:var(--head)} #e .e-btn.e-grey:hover{background:var(--line);border-color:var(--ctl);color:var(--head)} #e .e-btn.e-ghost{background:none;border-color:transparent;color:var(--link);padding:0 8px} #e .e-btn.e-sm{height:26px;line-height:24px;padding:0 12px;font-size:calc(11px + var(--fs-add,0px))} #e .e-btn[disabled]{background:#b5b7b7;border-color:#b5b7b7;color:#fff;cursor:not-allowed} #e .e-btn.e-plus{background:var(--plus);border-color:var(--plus);color:#000} #e .e-btn.e-ghost:hover { text-decoration: underline; } #e .e-sel{height:32px;padding:0 30px 0 14px;border:1px solid var(--ctl);border-radius:40px;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%233772df' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none;font:400 calc(13px + var(--fs-add,0px)) var(--font);color:var(--head);cursor:pointer} #e .e-field{height:34px;padding:0 10px;border:1px solid var(--ctl);border-radius:6px;background:var(--card);font:400 calc(14px + var(--fs-add,0px)) var(--font);color:var(--head);min-width:0} #e .e-field:focus{outline:0;border-color:var(--head)} #e .e-seg{display:inline-flex;border:1px solid var(--ctl);border-radius:40px;padding:2px;gap:2px} #e .e-seg button{border:0;background:none;height:26px;padding:0 14px;border-radius:40px;font:500 calc(13px + var(--fs-add,0px)) var(--font);color:var(--head);cursor:pointer} #e .e-seg button.e-on{background:#111;color:#fff;font-weight:700} :root[data-theme="dark"] #e .e-seg button.e-on{background:#fff;color:#111} #e .e-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center} #e .e-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:10px} #e .e-tabs a{flex:1;text-align:center;padding:10px 6px 9px;font-size:calc(13px + var(--fs-add,0px));font-weight:700;color:var(--faint);border-bottom:2px solid transparent;margin-bottom:-1px} #e .e-tabs a.e-on{color:var(--head);border-color:var(--head)} #e .e-badge{display:inline-block;font-size:calc(11px + var(--fs-add,0px));font-weight:540;padding:1px 7px 0px 7px;border-radius:3px;background:var(--div);color:var(--head);text-transform:uppercase;} #e .e-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c,var(--faint));margin-right:5px} /* ───────── lists, feed items ───────── */ #e .e-list{list-style:none;margin:0;padding:0} #e .e-list li{padding:8px 0;border-top:1px dotted var(--ctl);display:flex;gap:10px;align-items:center;font-size:calc(13px + var(--fs-add,0px))} #e .e-list li:first-child{border-top:0} #e .e-list .e-ph{flex:0 0 28px;height:28px;border-radius:50%;background:var(--div)} #e .e-list small{color:var(--mute);display:block;font-size:calc(11px + var(--fs-add,0px))} #e .e-item{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--line)} #e .e-item:first-of-type{border-top:0} #e .e-item .e-img{aspect-ratio:16/10;background:var(--div);border-radius:6px} #e .e-item h3{font-size:calc(16px + var(--fs-add,0px));line-height:1.25} #e .e-item p{margin:3px 0 0;color:var(--mute);font-size:calc(14px + var(--fs-add,0px))} #e .e-item .e-meta{font-size:calc(11px + var(--fs-add,0px));color:var(--faint);margin-top:6px;text-transform:uppercase;letter-spacing:.3px} #e .e-hero{display:block;aspect-ratio:16/8;background:var(--div);border-radius:8px;margin-bottom:10px} /* ───────── stat leaders ───────── */ #e .e-leaders{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));border:1px solid var(--line)} #e .e-leaders>div{padding:10px 12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 -1px -1px 0} #e .e-leaders .e-k{font-size:calc(12px + var(--fs-add,0px));font-weight:700;color:var(--head)} #e .e-leaders .e-v{font-size:calc(28px + var(--fs-add,0px));font-weight:700;line-height:1.2;color:var(--head);font-variant-numeric:tabular-nums} #e .e-leaders .e-s{font-size:calc(11px + var(--fs-add,0px));color:var(--mute)} #e .e-leaders .e-hl{background:var(--hl)} /* ───────── tables ───────── */ #e .e-tw{overflow-x:auto;margin:0 -16px;padding:0 16px} #e table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} #e caption{text-align:left;font-size:calc(16px + var(--fs-add,0px));font-weight:700;color:var(--head);padding:0 0 8px} #e thead th{font-size:calc(11px + var(--fs-add,0px));font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--mute);text-align:right;padding:8px 10px 6px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);white-space:nowrap} #e thead th a{color:inherit;text-decoration:underline} #e thead th:first-child,#e tbody td:first-child{text-align:left} #e tbody td{padding:9px 10px 8px;text-align:right;font-size:calc(13px + var(--fs-add,0px));color:var(--text);border-bottom:1px solid var(--div);white-space:nowrap} #e tbody tr:nth-child(even){background:var(--zebra)} #e tbody tr.e-grp td{background:var(--card);font-weight:700;font-size:calc(11px + var(--fs-add,0px));letter-spacing:.3px;text-transform:uppercase;color:var(--head);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left} #e th.e-hl,#e td.e-hl{background:var(--hl)!important} #e td.e-pos{color:var(--pos)} #e td.e-neg{color:var(--neg)} #e tbody td:first-child{color:var(--head);font-weight:500} #e .e-tx td:last-child,#e .e-tx th:last-child{text-align:left;white-space:normal;width:70%} #e .e-tx td:first-child{width:30%} /* ───────── misc ───────── */ #e .e-empty{border:1px dashed var(--ctl);border-radius:6px;padding:22px;text-align:center;color:var(--faint);font-size:calc(13px + var(--fs-add,0px))} #e .e-gl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px 18px;font-size:calc(13px + var(--fs-add,0px));color:var(--mute)} #e .e-gl b{color:var(--head)} #e .e-ad{background:var(--div);border-radius:6px;min-height:250px;display:grid;place-items:center;color:var(--faint);font-size:calc(11px + var(--fs-add,0px));letter-spacing:.5px;text-transform:uppercase} #e .e-foot{background:var(--nav);color:#bbb;padding:22px 0 26px;font-size:calc(12px + var(--fs-add,0px))} #e .e-foot .e-wrap{display:flex;gap:18px 28px;flex-wrap:wrap;justify-content:space-between} #e .e-foot a{color:#ddd} #e .e-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:5px} /* theme toggle button */ #e .e-themebtn{position:fixed;right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));z-index:50} #e .e-ul:hover { text-decoration: underline; } /* ───────── 14 · EXTRAS (new, reusable) ───────── */ /* Alert / notice:
Text
*/ #e .e-alert{border:1px solid var(--line);border-left:4px solid var(--c,var(--link));border-radius:6px;background:var(--card);padding:10px 14px;font-size:calc(14px + var(--fs-add,0px));color:var(--text)} #e .e-alert.e-info{--c:var(--link)} #e .e-alert.e-ok{--c:var(--pos)} #e .e-alert.e-warn{--c:var(--plus)} #e .e-alert.e-bad{--c:var(--neg)} #e .e-alert b{color:var(--head)} /* Form row: (.fr.inline = label left) */ #e .e-fr{display:grid;gap:4px;font-size:calc(12px + var(--fs-add,0px));font-weight:700;color:var(--head)} #e .e-fr small{font-weight:400;color:var(--mute);font-size:calc(11px + var(--fs-add,0px))} #e .e-fr.e-inline{grid-auto-flow:column;align-items:center;justify-content:start;gap:10px} #e .e-chk{display:inline-flex;align-items:center;gap:8px;font-size:calc(13px + var(--fs-add,0px));color:var(--head);cursor:pointer} #e .e-chk input{width:16px;height:16px;accent-color:var(--head);margin:0} #e .e-switch{position:relative;width:40px;height:22px;border-radius:22px;background:var(--ctl);border:0;cursor:pointer;padding:0;transition:background .15s} #e .e-switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s} #e .e-switch.e-on,#e .e-switch[aria-checked="true"]{background:#48494a} #e .e-switch.e-on::after,#e .e-switch[aria-checked="true"]::after{transform:translateX(18px)} /* Round icon button: (.ibtn.out = outlined) */ #e .e-ibtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--ctl);background:var(--card);color:var(--mute);display:inline-grid;place-items:center;cursor:pointer;padding:0;font:600 18px var(--font)} #e .e-ibtn:hover{background:var(--hl);color:var(--link);border-color:var(--link)} #e .e-ibtn.e-sm{width:32px;height:32px;font-size:15px} #e .e-ibtn.e-plus{border:2px solid var(--link);color:var(--link);background:transparent;font-size:26px} /* sheet close button: bare (no circle/border/padding) and small */ #e .e-sheet>header .e-ibtn{width:auto;height:auto;border:0;border-radius:0;background:none;padding:0;font-size:20px;line-height:1} #e .e-sheet>header .e-ibtn:hover{background:none;color:var(--text)} #e .e-sheet>header .e-ibtn .material-symbols-outlined{font-size:20px} /* Filter chips: */ #e .e-chip{height:28px;padding:0 12px;border:1px solid var(--ctl);border-radius:8px;background:var(--card);color:var(--head);font:600 calc(12px + var(--fs-add,0px)) var(--font);cursor:pointer} #e .e-chip.e-on{background:#48494a;border-color:#48494a;color:#fff} #e .e-chip.e-sm{height:24px;padding:0 9px;border-radius:6px;font-size:calc(11px + var(--fs-add,0px))} /* Solid colour badges (type colours): Goal Colours are the --c-* tokens; --c can also be set inline for any other hue. */ #e .e-badge.e-solid{background:color-mix(in srgb,var(--c,var(--head)) 88%,transparent);color:#fff;letter-spacing:.3px} #e .e-badge.e-goal{--c:var(--c-goal)} #e .e-badge.e-high{--c:var(--c-high)} #e .e-badge.e-low{--c:var(--c-low)} #e .e-badge.e-diff{--c:var(--c-diff)} #e .e-badge.e-total{--c:var(--c-total)} /* Progress / bar:
*/ #e .e-bar{height:8px;border-radius:8px;background:var(--div);overflow:hidden} #e .e-bar>i{display:block;height:100%;width:var(--v,0%);background:var(--head);border-radius:8px} #e .e-bar.e-pos>i{background:var(--pos)} #e .e-bar.e-neg>i{background:var(--neg)} /* Modal (desktop) / bottom sheet (mobile):

Title

…
Toggle visibility by adding/removing .on on both. */ #e .e-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s;z-index:2000} #e .e-scrim.e-on{opacity:1;pointer-events:auto} #e .e-sheet{position:fixed;z-index:2001;left:50%;top:50%;transform:translate(-50%,-46%);width:min(520px,calc(100% - 32px));max-height:80vh;display:flex;flex-direction:column;background:var(--card);border-radius:12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s} #e .e-sheet.e-on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)} #e .e-sheet>header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)} #e .e-sheet>.e-body{padding:16px 16px 16px 16px;overflow:auto;font-size:calc(15px + var(--fs-add,0px)) !important;line-height:1.7} /* 14px on desktop; mobile adds 1px via --fs-add = 15px */ #e .e-sheet h4{font-size:18px;margin-bottom:-12px;} #e .e-ul:hover { text-decoration: underline; } /* Sheet footer (optional):