body { margin:0 auto; padding: 0; background-color:#636363; font-size:12px; font-family: Verdana, Arial, Helvetica, sans-serif; } .wrap { margin:10px auto; padding: 0; width:900px; float:none; background-color:#FFFFFF; border:5px solid #000000; } #content{ float:left; width: 670px; padding:15px; } #content_single_col{ float:right; width: 820px; margin: 0 20px 0 0; padding-top:10px; padding-right: 20px; margin-top: 0px; padding-left: 0px; } #navBar{ width: 200px; padding: 0px; padding-bottom:10px; float:right; } #upperBox { height:200px; } .head_title { display:block; float:none; padding: 0; height:120px; background: #FFFFFF url("../images/top-frame.jpg") top left no-repeat; text-align:center; } #menu { width:900px; height:35px; margin-left: auto; margin-right: auto; font-size:14px; } #menu, #menu li a { /*color:#E11442;*/ background-color:#F7DE00; } #menu ul{margin: 0px auto;} #menu li { float: left; margin: 0px; padding: 0px; list-style: none; } #menu li a { display: block; float: left; /*height: 37px;*/ text-decoration: none; padding: 8px 19px 8px 25px; font-weight:bold; } #menu_share li a { padding: 8px 3px 8px 3px; } /* #menu.addthis_toolbox addthis_default_style li a { padding: 8px 3px 8px 3px; } */ .footer { background: #FFF url("../images/menu.png"); background-repeat:repeat-x; height:40px; display:block; clear:both; margin: 0 auto; margin-top:20px; width:100%; border-color:#D7D7D7; color:#DBD7D1; color: #000000; text-align:center; font-size: 11px; } .footer a, .footer a:hover { background:none repeat scroll 0 0 transparent; color:#DBD7D1; } /*** leftnavs VERTICAL ***/ .leftnav { /*background:#70695A top left no-repeat;*/ background:#F7DE00 top left no-repeat; border-bottom: 0px solid #000000; display:block; clear:both; margin:0 auto; margin-top:0px; padding: 0; padding-right:8px; padding-top: 8px; width:95%; text-align:center; text-indent:0px; } .leftnav ul{ display:block; clear:both; margin:0 auto; padding:0; text-align:left; text-indent:0px; padding-left:10px; } .leftnav ul li { display:block; margin:0; padding: 0; width:100%; list-style: none; border-bottom:1px solid #E11442; text-indent:0px; } /**** Side menu link styles ****/ .leftnav ul li a:link, .leftnav ul li a:visited { color:#E11442; font-weight:normal; display:block; width:100%; padding: 4px 0px; text-decoration:none; font-size:14px; font-weight:bold; } .leftnav ul li a:hover, .leftnav ul li a:active { color:#E11442; font-weight:bold; display:block; width:100%;padding: 4px 0px; /*text-decoration:blink;*/ /* text-decoration:underline; */ background: #FFFFFF no-repeat left center; } /* the following 3 rules are for the submenu, if you removed the submenu remove these rules as well */ .leftnav ul ul li {line-height: 10px; border-bottom: none;} .leftnav ul ul li a:link, .leftnav ul ul li a:visited {color:#FFFFFF; text-indent:10px;} .leftnav ul ul li a:hover, .leftnav ul ul li a:active, .current_page { background: transparent no-repeat left center;} h1 { margin:0; padding:0; text-align:center; font-size:28px; } h2 { margin:0; padding:0; text-align:center; font-size:24px; font-weight:bold; } .ep_guide_list { font-family: Arial; font-size: 16px; font-weight:bold; } .wall-date { font-weight: bold; background-color: #E11442; line-height: 25px; color: #7fde00; text-indent: 15px; } .underMenu { font-size: 18px; font-weight: bold; line-height: 35px; text-decoration: none; text-align: center; padding-bottom: 5px; } .underMenu a { text-decoration: none; color: #E11442; }; .wrap #content .on-envelopes { text-align: right; white-space: normal; margin: 0px; padding: 0px; line-height: 0px; } /* ================================================================== Responsive layer (Roadmap Action 1.1). Desktop rules above are untouched; below 960px the fixed 900px layout becomes fluid, below 768px it is single-column with a JS-enhanced hamburger nav. ================================================================== */ /* Fluid media everywhere (no effect on the fixed desktop layout, containers there are wider than any embedded media). */ img { max-width: 100%; height: auto; } iframe, embed, object { max-width: 100%; } #content table, #content_single_col table { max-width: 100%; } /* Hamburger button: hidden by default (desktop, and no-JS mobile where the menu stays fully visible). nav-toggle.js adds .js-nav to
. */ #nav-toggle { display: none; } @media (max-width: 959px) { .wrap { width: auto; max-width: 900px; margin: 10px auto; } /* keep the 900x125 header art proportional instead of cropping */ .head_title { height: 0; padding-bottom: 13.9%; background-size: 100% auto; } #menu { width: auto; height: auto; overflow: hidden; } #content, #content_single_col { float: none; width: auto; margin: 0; padding: 15px; overflow-x: auto; /* wide legacy tables scroll here, not the page */ overflow-wrap: break-word; } #navBar { float: none; width: auto; padding: 0 15px 10px; } #upperBox { height: auto; } .leftnav { width: auto; } .footer { height: auto; padding: 8px 0; } } @media (max-width: 767px) { /* stacked nav; links are full-width >=44px tap targets */ #menu ul { padding: 0; } #menu li { float: none; } #menu li a { float: none; display: block; padding: 13px 16px; font-size: 16px; line-height: 18px; border-bottom: 1px solid #d8c200; } /* comfortable script reading */ #content, #content_single_col { font-size: 16px; line-height: 1.6; } h1 { font-size: 24px; } h2 { font-size: 20px; } /* legacy 300px ad tables: stop floating so text is not squeezed */ #content table[align="left"], #content_single_col table[align="left"] { float: none; margin: 0 auto 12px; } /* hamburger, only when JS is running (body.js-nav) */ body.js-nav #nav-toggle { display: block; width: 100%; min-height: 44px; margin: 0; padding: 11px 16px; background-color: #F7DE00; border: 0; border-bottom: 1px solid #d8c200; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #000000; text-align: left; cursor: pointer; } body.js-nav #menu ul { display: none; } body.js-nav #menu.nav-open ul { display: block; } } /* ===== WAVE1:D header + search styles (owned by Track D — edit only inside) ===== */ /* Theme-able via CSS custom properties with fallbacks (var(--x, fallback)) so Track E's dark mode can restyle by defining the variables. */ /* header tools bar: search form + theme toggle + random link, one compact row */ #site-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 10px; background-color: var(--bg-alt, #f2f2f2); border-bottom: 1px solid var(--border, #d7d7d7); } #site-search-form { position: relative; /* anchors the results dropdown */ display: flex; flex: 1 1 220px; min-width: 0; gap: 6px; } #site-search { flex: 1 1 auto; min-width: 60px; margin: 0; padding: 5px 8px; border: 1px solid var(--border, #aaaaaa); border-radius: 3px; background-color: var(--bg, #ffffff); color: var(--fg, #000000); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; } #site-search-form button[type="submit"], #random-episode { margin: 0; padding: 5px 10px; border: 1px solid var(--border, #b8a800); border-radius: 3px; background-color: var(--accent, #F7DE00); color: var(--fg, #000000); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; line-height: 1.4; text-decoration: none; white-space: nowrap; cursor: pointer; } /* hidden until Track E's js/theme.js reveals it — no-JS users never see it */ #theme-toggle { display: none; } body.js-theme #theme-toggle { display: inline-block; margin: 0; padding: 5px 9px; border: 1px solid var(--border, #aaaaaa); border-radius: 3px; background-color: var(--bg, #ffffff); color: var(--fg, #000000); font-size: 13px; line-height: 1.4; cursor: pointer; } /* header search results dropdown (built by js/site.js) */ #search-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; margin-top: 2px; max-height: 60vh; overflow-y: auto; background-color: var(--bg, #ffffff); color: var(--fg, #000000); border: 1px solid var(--border, #aaaaaa); border-radius: 0 0 4px 4px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); text-align: left; } #search-dropdown[hidden] { display: none; } #search-dropdown .search-hit { display: block; padding: 7px 10px; border-bottom: 1px solid var(--border, #e5e5e5); color: var(--fg, #000000); text-decoration: none; } #search-dropdown .search-hit:last-child { border-bottom: 0; } #search-dropdown .search-hit:hover, #search-dropdown .search-hit:focus { background-color: var(--bg-alt, #fdf6c8); } .search-hit-title { display: block; font-weight: bold; font-size: 12px; } .search-hit-snippet { display: block; margin-top: 2px; font-size: 11px; color: var(--fg-muted, #555555); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* searchscript.html results list (built by js/search-page.js) */ #search-status { font-weight: bold; } .search-results-list { margin: 10px 0 20px; padding-left: 24px; } .search-result { margin-bottom: 14px; } .search-result-title { font-weight: bold; } .search-result-meta { color: var(--fg-muted, #555555); font-size: 11px; } .search-result-line { margin: 4px 0 0; color: var(--fg, #000000); } .search-result-line mark, .search-hit-snippet mark { background-color: var(--accent, #F7DE00); color: inherit; padding: 0 1px; } @media (max-width: 767px) { /* one comfortable row at 360px; the hamburger row sits above this bar */ #site-tools { padding: 8px 10px; } #site-search { font-size: 16px; } /* >=16px stops iOS focus zoom */ #site-search-form button[type="submit"], #random-episode, body.js-theme #theme-toggle { font-size: 14px; padding: 8px 10px; /* ~44px tap targets */ } } /* ===== END WAVE1:D ===== */ /* ===== WAVE1:E reading aids + theme styles (owned by Track E — edit only inside) ===== */ /* ---- theme variables: light defaults, dark overrides via html.dark ---- */ :root { --e-page-bg: #636363; --e-panel-bg: #FFFFFF; --e-text: #000000; --e-muted: #555555; --e-link: #E11442; --e-menu-bg: #F7DE00; --e-menu-text: #000000; --e-border: #C9C9C9; --e-chip-bg: #F6F6F6; --e-hl-bg: #FFF3A3; --e-accent: #E11442; --reader-font-scale: 1; color-scheme: light; } html.dark { --e-page-bg: #17171A; --e-panel-bg: #202024; --e-text: #E8E4DC; --e-muted: #A5A19A; --e-link: #FF8095; --e-menu-bg: #2C2C30; --e-menu-text: #F2D94E; --e-border: #3D3D42; --e-chip-bg: #2A2A2E; --e-hl-bg: #4D4300; --e-accent: #FF8095; color-scheme: dark; } /* ---- retheme the site's hardcoded colors through the variables ---- */ body { background-color: var(--e-page-bg); color: var(--e-text); } .wrap { background-color: var(--e-panel-bg); } html.dark a { color: #8FB4F8; } html.dark #menu, html.dark #menu li a { background-color: var(--e-menu-bg); color: var(--e-menu-text); } html.dark #menu li a { border-color: #1c1c1f; } html.dark .leftnav { background-color: var(--e-menu-bg); } html.dark .leftnav ul li { border-bottom-color: #4a4a50; } html.dark .leftnav ul li a:link, html.dark .leftnav ul li a:visited, html.dark .leftnav ul li a:hover, html.dark .leftnav ul li a:active { color: var(--e-link); } html.dark .leftnav ul li a:hover, html.dark .leftnav ul li a:active { background: #3A3A40 no-repeat left center; } html.dark .head_title { background-color: var(--e-panel-bg); } html.dark .footer { background: #1C1C1F; color: #9B968E; } html.dark .footer a, html.dark .footer a:hover { color: #C9C4BC; } html.dark .underMenu a { color: var(--e-link); } html.dark body.js-nav #nav-toggle { background-color: var(--e-menu-bg); color: var(--e-menu-text); border-bottom-color: #1c1c1f; } /* keep photos/ads unfiltered in dark mode (never invert images) */ html.dark img { filter: none; } /* widget links keep the brand accent in dark mode (the generic html.dark a rule above would otherwise win on specificity) */ html.dark .ep-pagenav a, html.dark #scene-toc a { color: var(--e-link); } /* dark/light toggle: Track D ships #theme-toggle hidden for no-JS users; theme.js adds .js-ready after binding, which reveals it */ #theme-toggle.js-ready { display: inline-block; } /* ---- reader font size (theme.js drives --reader-font-scale) ---- */ #content p, #content_single_col p { font-size: calc(1em * var(--reader-font-scale, 1)); } /* anchors jumped to from the TOC clear the fixed sticky bar */ #content [id] { scroll-margin-top: 64px; } /* ---- reading progress bar ---- */ #reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: var(--e-accent); transform: scaleX(0); transform-origin: 0 50%; z-index: 9999; pointer-events: none; } /* ---- sticky episode header ---- */ #ep-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 9998; display: flex; align-items: center; gap: 8px; padding: 5px 10px; padding-top: 8px; /* clears the progress bar */ background: var(--e-panel-bg); color: var(--e-text); border-bottom: 1px solid var(--e-border); box-shadow: 0 1px 4px rgba(0,0,0,0.25); transform: translateY(-110%); transition: transform 0.18s ease; } #ep-sticky.visible { transform: translateY(0); } .ep-sticky-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; font-size: 14px; } .ep-sticky-meta { flex: 0 0 auto; font-size: 12px; color: var(--e-muted); white-space: nowrap; } #ep-sticky-tools { display: flex; flex: 0 0 auto; gap: 6px; } .font-btn { min-width: 44px; min-height: 44px; padding: 0; background: var(--e-chip-bg); color: var(--e-text); border: 1px solid var(--e-border); border-radius: 6px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; cursor: pointer; } .font-btn:hover { background: var(--e-hl-bg); } /* ---- prev/next episode nav ---- */ .ep-pagenav { display: flex; justify-content: space-between; align-items: stretch; gap: 8px; margin: 12px 0; clear: both; } .ep-pagenav a { display: inline-flex; align-items: center; padding: 10px 12px; min-height: 44px; box-sizing: border-box; background: var(--e-chip-bg); border: 1px solid var(--e-border); border-radius: 6px; color: var(--e-link); font-weight: bold; font-size: 13px; text-decoration: none; } .ep-pagenav a:hover { text-decoration: underline; } .ep-pagenav .ep-prev, .ep-pagenav .ep-next { flex: 0 1 42%; } .ep-pagenav .ep-next { justify-content: flex-end; text-align: right; margin-left: auto; } .ep-pagenav .ep-season { flex: 0 0 auto; } .ep-pagenav .ep-none { border: 0; background: none; } @media (max-width: 479px) { .ep-pagenav { flex-wrap: wrap; } .ep-pagenav .ep-prev, .ep-pagenav .ep-next { flex: 1 1 42%; } .ep-pagenav .ep-season { order: 3; flex: 1 1 100%; justify-content: center; } } /* ---- jump-to-scene mini TOC ---- */ #scene-toc { margin: 12px 0; border: 1px solid var(--e-border); border-radius: 6px; background: var(--e-chip-bg); color: var(--e-text); font-size: 13px; clear: both; } #scene-toc summary { padding: 12px; min-height: 44px; box-sizing: border-box; cursor: pointer; font-weight: bold; } #scene-toc ol { margin: 0; padding: 0 12px 10px 30px; max-height: 45vh; overflow: auto; } #scene-toc li { padding: 0; } #scene-toc a { display: inline-block; padding: 7px 0; color: var(--e-link); text-decoration: none; } #scene-toc a:hover { text-decoration: underline; } /* ---- character highlight ---- */ #reader-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; font-size: 13px; clear: both; } #reader-tools select, #reader-tools button { min-height: 44px; padding: 6px 10px; background: var(--e-panel-bg); color: var(--e-text); border: 1px solid var(--e-border); border-radius: 6px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; cursor: pointer; } #reader-tools select { max-width: 60vw; } #reader-tools .hl-iso { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; cursor: pointer; } #reader-tools input[type="checkbox"] { width: 20px; height: 20px; } #content p.hl-line { background: var(--e-hl-bg); border-radius: 3px; } #content.hl-isolate p:not(.hl-line) { opacity: 0.35; } /* ---- back-to-top ---- */ #back-to-top { position: fixed; right: 14px; bottom: 18px; width: 46px; height: 46px; border-radius: 50%; background: var(--e-menu-bg); color: var(--e-menu-text); border: 1px solid rgba(0,0,0,0.4); box-shadow: 0 2px 6px rgba(0,0,0,0.35); font-size: 20px; line-height: 1; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; z-index: 9997; } #back-to-top.visible { opacity: 1; visibility: visible; transform: none; } @media (prefers-reduced-motion: reduce) { #ep-sticky, #back-to-top { transition: none; } } /* compact sticky bar on small screens */ @media (max-width: 400px) { #ep-sticky { gap: 6px; padding-left: 8px; padding-right: 8px; } .ep-sticky-title { font-size: 13px; } .ep-sticky-meta { font-size: 11px; } } /* ===== END WAVE1:E ===== */ /* ===== WAVE2:H daily habit styles (owned by Track H — edit only inside) ===== */ /* ---- Quote of the Day (homepage #qotd) ---- */ #qotd { margin: 16px 0; padding: 12px 16px; border: 1px solid var(--e-border); border-left: 4px solid var(--e-accent); border-radius: 6px; background: var(--e-chip-bg); color: var(--e-text); overflow: hidden; /* contain besides the floated ad table */ } #qotd .qotd-heading { margin: 0 0 8px; } #qotd blockquote { margin: 0; padding: 0; } #qotd .qotd-quote p { margin: 0 0 6px; } #qotd #qotd-text { font-style: italic; font-size: 14px; line-height: 1.5; } #qotd .qotd-attr { color: var(--e-muted); font-size: 12px; } #qotd .qotd-attr a { color: var(--e-link); } #qotd .qotd-actions { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } #qotd .qotd-btn { display: none; /* revealed by JS (Random) / share-cards readiness (Share) */ min-height: 44px; padding: 6px 14px; background: var(--e-panel-bg); color: var(--e-text); border: 1px solid var(--e-border); border-radius: 6px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; cursor: pointer; } #qotd.js-on #qotd-random { display: inline-block; } #qotd #qotd-share.share-on { display: inline-block; } #qotd .qotd-more { font-size: 12px; } html.dark #qotd .qotd-more, html.dark #qotd .qotd-attr a { color: var(--e-link); } /* ---- Seinfeld-le daily game (seinfeld-le.html) ---- */ #sle-app { clear: both; } .sle-panel { margin: 12px 0; padding: 12px; border: 1px solid var(--e-border); border-radius: 6px; background: var(--e-chip-bg); color: var(--e-text); } #sle-clues .sle-clue { margin: 0 0 8px; padding: 8px 10px; border-left: 4px solid var(--e-accent); background: var(--e-panel-bg); border-radius: 4px; font-size: 13px; line-height: 1.5; } #sle-clues .sle-clue-label { display: block; font-weight: bold; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--e-muted); margin-bottom: 3px; } #sle-form { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; } #sle-guess { flex: 1 1 200px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--e-border); border-radius: 6px; background: var(--e-panel-bg); color: var(--e-text); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; box-sizing: border-box; min-width: 0; } .sle-btn { min-height: 44px; padding: 6px 14px; background: var(--e-menu-bg); color: var(--e-menu-text); border: 1px solid var(--e-border); border-radius: 6px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; cursor: pointer; } .sle-btn[disabled] { opacity: 0.5; cursor: default; } .sle-btn-quiet { background: var(--e-panel-bg); color: var(--e-text); font-weight: normal; } #sle-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin: 2px 0 0; padding: 0; list-style: none; max-height: 240px; overflow: auto; border: 1px solid var(--e-border); border-radius: 6px; background: var(--e-panel-bg); box-shadow: 0 4px 10px rgba(0,0,0,0.25); } #sle-suggest li { margin: 0; } #sle-suggest button { display: block; width: 100%; text-align: left; padding: 10px; min-height: 44px; border: 0; border-bottom: 1px solid var(--e-border); background: transparent; color: var(--e-text); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; cursor: pointer; } #sle-suggest li:last-child button { border-bottom: 0; } #sle-suggest button:hover, #sle-suggest button.sle-active { background: var(--e-hl-bg); } #sle-board { margin: 10px 0; padding: 0; list-style: none; } #sle-board li { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 6px 10px; border: 1px solid var(--e-border); border-radius: 4px; background: var(--e-panel-bg); font-size: 13px; } #sle-board .sle-mark { flex: 0 0 auto; } #sle-status { font-size: 13px; margin: 8px 0; color: var(--e-muted); } #sle-result h3 { margin-top: 0; } #sle-result .sle-grid { font-size: 20px; letter-spacing: 2px; line-height: 1.3; margin: 8px 0; word-break: break-all; } #sle-result a { color: var(--e-link); } #sle-stats { font-size: 13px; } #sle-stats table { border-collapse: collapse; margin: 6px 0; width: 100%; max-width: 360px; } #sle-stats td { padding: 2px 6px 2px 0; font-size: 12px; } #sle-stats .sle-bar { display: inline-block; height: 14px; min-width: 4px; background: var(--e-accent); border-radius: 2px; vertical-align: middle; } @media (max-width: 479px) { #sle-form { flex-wrap: wrap; } #sle-guess { flex: 1 1 100%; } .sle-btn { flex: 1 1 40%; } } /* ===== END WAVE2:H ===== */ /* ===== WAVE2:I quiz styles (owned by Track I — edit only inside) ===== */ /* Quiz engine UI (seinfeld-quiz.html, character-quiz.html) + the per-script "Test yourself" embed. Mobile-first; colors ride the theme variables so html.dark works with no extra rules unless noted. */ .quiz-box { max-width: 560px; margin: 12px 0 20px; padding: 16px; border: 1px solid var(--e-border); border-radius: 10px; background: var(--e-chip-bg); } .quiz-lead { margin: 0 0 14px; } .quiz-progress { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--e-muted); margin-bottom: 10px; } .quiz-prompt { font-size: 19px; margin: 0 0 10px; line-height: 1.35; } .quiz-quote { margin: 0 0 14px; padding: 10px 12px; border-left: 4px solid var(--e-accent); background: var(--e-panel-bg); border-radius: 0 8px 8px 0; font-style: italic; line-height: 1.5; } .quiz-options { display: flex; flex-direction: column; gap: 8px; } .quiz-opt { display: block; width: 100%; min-height: 44px; text-align: left; padding: 10px 12px; font-size: 15px; line-height: 1.4; border: 1px solid var(--e-border); border-radius: 8px; background: var(--e-panel-bg); color: var(--e-text); cursor: pointer; } .quiz-opt:hover:not(:disabled), .quiz-opt:focus-visible { border-color: var(--e-accent); } .quiz-opt:disabled { cursor: default; opacity: 0.75; } .quiz-opt.is-correct { border-color: #2E9E44; background: #E4F5E8; color: #14471F; opacity: 1; font-weight: bold; } .quiz-opt.is-wrong { border-color: #C22F2F; background: #F9E4E4; color: #5A1414; opacity: 1; } html.dark .quiz-opt.is-correct { background: #1E3B26; color: #A8E6B5; border-color: #3FBF5C; } html.dark .quiz-opt.is-wrong { background: #402020; color: #F2B8B8; border-color: #D9534F; } .quiz-feedback { margin-top: 14px; } .quiz-verdict { font-weight: bold; margin: 0 0 6px; } .quiz-feedback.good .quiz-verdict { color: #2E9E44; } .quiz-feedback.bad .quiz-verdict { color: #C22F2F; } html.dark .quiz-feedback.good .quiz-verdict { color: #3FBF5C; } html.dark .quiz-feedback.bad .quiz-verdict { color: #E57373; } .quiz-note { color: var(--e-muted); font-size: 13px; margin: 0 0 10px; } .quiz-btn { display: inline-block; min-height: 44px; padding: 9px 14px; margin: 4px 8px 4px 0; font-size: 15px; border: 1px solid var(--e-border); border-radius: 8px; background: var(--e-panel-bg); color: var(--e-text); cursor: pointer; } .quiz-btn:hover, .quiz-btn:focus-visible { border-color: var(--e-accent); } .quiz-btn[hidden] { display: none; } /* keep [hidden] winning over display:inline-block */ .quiz-primary { background: var(--e-accent); border-color: var(--e-accent); color: #FFFFFF; font-weight: bold; } html.dark .quiz-primary { color: #1B1B1E; } .quiz-quiet { font-size: 13px; } .quiz-diff.on { border-color: var(--e-accent); box-shadow: inset 0 0 0 1px var(--e-accent); font-weight: bold; } .quiz-diff-row, .quiz-mode-row { margin: 10px 0; } .quiz-share-row { margin: 12px 0; } .quiz-share-note { font-size: 13px; color: var(--e-muted); margin-left: 4px; } .quiz-grade { font-style: italic; margin: 4px 0 12px; } .quiz-result-name { font-size: 24px; margin: 4px 0 10px; } .quiz-result-img { max-width: 180px; height: auto; border-radius: 10px; border: 1px solid var(--e-border); display: block; margin: 0 0 12px; } .quiz-result-desc { line-height: 1.55; } .quiz-nojs, .quiz-more { margin-top: 10px; } /* ---- per-script embed widget ---- */ .quiz-embed { margin: 26px 0 10px; padding: 14px 16px; border: 1px solid var(--e-border); border-radius: 10px; background: var(--e-chip-bg); max-width: 560px; } .quiz-embed h2 { font-size: 18px; margin: 0 0 4px; } .quiz-embed .quiz-embed-sub { font-size: 13px; color: var(--e-muted); margin: 0 0 12px; } .quiz-embed .quiz-prompt { font-size: 16px; } .quiz-embed .quiz-more { font-size: 14px; } @media (min-width: 768px) { .quiz-prompt { font-size: 21px; } .quiz-box, .quiz-embed { padding: 20px; } } /* ===== END WAVE2:I ===== */ /* ===== WAVE2:J share styles (owned by Track J — edit only inside) ===== */ /* ---- share-button row (js/share-buttons.js) ---- */ .ss-share-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; } .ss-share-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 14px; background: var(--e-chip-bg, #F6F6F6); color: var(--e-text, #000); border: 1px solid var(--e-border, #C9C9C9); border-radius: 22px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; } .ss-share-btn svg { flex: 0 0 auto; } .ss-share-btn:hover, .ss-share-btn:focus-visible { background: var(--e-menu-bg, #F7DE00); color: var(--e-menu-text, #000); border-color: var(--e-menu-text, #000); text-decoration: none; } .ss-share-btn.ss-copied { background: var(--e-menu-bg, #F7DE00); color: var(--e-menu-text, #000); border-color: var(--e-menu-text, #000); } html.dark .ss-share-btn { background: var(--e-chip-bg); color: var(--e-text); } html.dark .ss-share-btn:hover, html.dark .ss-share-btn:focus-visible, html.dark .ss-share-btn.ss-copied { background: #F7DE00; color: #141416; border-color: #F7DE00; } /* narrow screens: keep tap targets, drop labels on the network links so the row fits at 360px (native/copy keep their labels for clarity) */ @media (max-width: 420px) { .ss-share-buttons { gap: 6px; } .ss-share-btn { padding: 8px 11px; } .ss-share-btn.ss-share-x .ss-share-label, .ss-share-btn.ss-share-fb .ss-share-label, .ss-share-btn.ss-share-wa .ss-share-label { display: none; } } /* ===== END WAVE2:J ===== */ /* ===== WAVE3:A share-card UX styles (owned by Track A - edit only inside) ===== */ /* ===== END WAVE3:A ===== */ /* ===== WAVE3:B page-share styles (owned by Track B - edit only inside) ===== */ /* ===== END WAVE3:B ===== */ /* ===== WAVE4:RATINGS star-rating styles (owned by Track 4.1 — edit only inside) ===== */ /* ---- script-page widget (js/ratings.js) ---- */ .ss-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 10px 0 14px; padding: 8px 12px; min-height: 52px; /* reserved while loading — avoids layout shift */ background: var(--e-chip-bg, #F6F6F6); border: 1px solid var(--e-border, #C9C9C9); border-radius: 8px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: var(--e-text, #000); } .ss-rating[data-loading] { visibility: hidden; } .ss-rating-heading { font-weight: bold; white-space: nowrap; } .ss-rating-stars { display: inline-flex; align-items: center; } .ss-star { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; background: transparent; border: 0; border-radius: 6px; font-size: 24px; line-height: 1; color: var(--e-muted, #555); cursor: pointer; } .ss-star:hover, .ss-star:focus-visible { color: var(--e-menu-text, #000); background: var(--e-menu-bg, #F7DE00); } .ss-star:focus-visible { outline: 2px solid var(--e-accent, #E11442); outline-offset: 1px; } .ss-star.ss-star-on { color: #C9A400; } html.dark .ss-star.ss-star-on { color: #F2D94E; } .ss-star[disabled] { opacity: 0.55; cursor: default; } .ss-rating-agg { white-space: nowrap; } .ss-rating-agg strong { font-size: 14px; } .ss-rating-msg { flex: 1 1 100%; margin: 0; font-size: 12px; color: var(--e-muted, #555); } .ss-rating-msg:empty { display: none; } .ss-rating-msg.ss-rating-err { color: var(--e-accent, #E11442); } html.dark .ss-star:hover, html.dark .ss-star:focus-visible { background: #2C2C30; color: #F2D94E; } /* ---- leaderboard (top-rated.html) ---- */ #top-rated-list { min-height: 120px; } .ss-toprated { margin: 14px 0; padding-left: 30px; font-family: Verdana, Arial, Helvetica, sans-serif; } .ss-toprated-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 9px 4px; border-bottom: 1px solid var(--e-border, #C9C9C9); font-size: 14px; line-height: 1.4; } .ss-toprated-title { flex: 1 1 12em; min-width: 0; font-weight: bold; } .ss-toprated-score { white-space: nowrap; color: var(--e-text, #000); } .ss-toprated-count { font-size: 12px; color: var(--e-muted, #555); } .ss-toprated-empty { color: var(--e-muted, #555); } /* narrow screens: keep the widget on one comfortable wrap at 360px */ @media (max-width: 420px) { .ss-rating { padding: 6px 8px; gap: 2px 8px; } .ss-star { min-width: 44px; } .ss-toprated { padding-left: 26px; } .ss-toprated-row { font-size: 13px; } } /* ===== END WAVE4:RATINGS ===== */ /* ===== WAVE4:POLLS poll styles (owned by Track 4.2 - edit only inside) ===== */ /* Poll component: homepage #poll-widget + polls.html #poll-archive. Mobile-first; theme via the WAVE1:E variables (html.dark swaps them). */ .ss-poll { margin: 16px 0; padding: 12px 16px; border: 1px solid var(--e-border); border-left: 4px solid var(--e-accent); border-radius: 6px; background: var(--e-chip-bg); color: var(--e-text); clear: both; } .ss-poll-q { margin: 0 0 10px; font-size: 15px; line-height: 1.4; } .ss-poll-opts { display: flex; flex-direction: column; gap: 8px; } /* vote view: one full-width button per option, >=44px tap target */ .ss-poll-btn { display: block; width: 100%; min-height: 44px; padding: 10px 14px; text-align: left; background: var(--e-panel-bg); color: var(--e-text); border: 1px solid var(--e-border); border-radius: 6px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4; cursor: pointer; box-sizing: border-box; } .ss-poll-btn:hover, .ss-poll-btn:focus-visible { border-color: var(--e-accent); } .ss-poll-btn[disabled], .ss-poll-row[disabled] { opacity: 0.5; cursor: default; } /* results view: label + count above an accent bar on a neutral track. Percent/count text sits OUTSIDE the bar (var(--e-text)/var(--e-muted) on the panel background) so contrast holds in light and dark at any width. */ .ss-poll-row { display: block; width: 100%; min-height: 44px; padding: 8px 12px; text-align: left; background: var(--e-panel-bg); color: var(--e-text); border: 1px solid var(--e-border); border-radius: 6px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4; box-sizing: border-box; } button.ss-poll-row { cursor: pointer; } button.ss-poll-row:hover, button.ss-poll-row:focus-visible { border-color: var(--e-accent); } .ss-poll-row-mine { border-color: var(--e-accent); box-shadow: inset 0 0 0 1px var(--e-accent); } .ss-poll-row-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 5px; } .ss-poll-label { flex: 1 1 auto; min-width: 0; } .ss-poll-count { flex: 0 0 auto; color: var(--e-muted); font-size: 12px; white-space: nowrap; } .ss-poll-mine { flex: 0 0 auto; font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.4px; color: var(--e-accent); border: 1px solid var(--e-accent); border-radius: 8px; padding: 1px 7px; white-space: nowrap; } .ss-poll-bar-track { display: block; width: 100%; height: 12px; border-radius: 6px; background: var(--e-chip-bg); border: 1px solid var(--e-border); overflow: hidden; } .ss-poll-bar { display: block; height: 100%; min-width: 2px; background: var(--e-accent); border-radius: 6px 0 0 6px; } .ss-poll-total { margin: 10px 0 0; font-size: 12px; color: var(--e-muted); } .ss-poll-note { margin: 6px 0 0; font-size: 12px; color: var(--e-muted); font-style: italic; } .ss-poll-error { margin: 8px 0 0; font-size: 12px; font-weight: bold; color: var(--e-accent); } .ss-poll-more { margin: 10px 0 0; font-size: 12px; } .ss-poll-more a, html.dark .ss-poll-more a { color: var(--e-link); } /* polls.html archive sections */ .ss-poll-section { margin: 16px 0; } .ss-poll-section-h { font-size: 16px; margin: 18px 0 6px; } .ss-poll-closed { border-left-color: var(--e-border); } /* >=768px: the panel body breathes a little more */ @media (min-width: 768px) { .ss-poll { padding: 14px 20px; } .ss-poll-q { font-size: 16px; } } /* ===== END WAVE4:POLLS ===== */ /* ===== WAVE4:FESTIVUS festivus styles (owned by Track 2.5 - edit only inside) ===== */ /* ---- countdown (festivus.html) ---- */ #festivus-countdown { font-weight: bold; color: var(--e-accent); } /* ---- Airing of Grievances card maker ---- Hidden by default: with JS off the static text above it reads cleanly and no dead controls show. js/festivus.js adds .js-on (textarea + randomize), .share-on when SS.shareCards is ready (Make card / Share / Download), and .has-card once a preview exists. All colors ride the WAVE1:E theme variables, so dark mode (html.dark) needs no extra rules here. */ #festivus-card-maker { display: none; clear: both; margin: 12px 0; padding: 12px; border: 1px solid var(--e-border); border-left: 4px solid var(--e-accent); border-radius: 6px; background: var(--e-chip-bg); color: var(--e-text); } #festivus-card-maker.js-on { display: block; } #festivus-grievance { display: block; width: 100%; max-width: 560px; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--e-border); border-radius: 6px; background: var(--e-panel-bg); color: var(--e-text); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5; } .festivus-actions { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .festivus-btn { min-height: 44px; /* mobile tap target */ padding: 6px 14px; background: var(--e-panel-bg); color: var(--e-text); border: 1px solid var(--e-border); border-radius: 6px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; cursor: pointer; } .festivus-btn:hover, .festivus-btn:focus-visible { border-color: var(--e-accent); } #festivus-card-maker .festivus-share-ui { display: none; } /* until shareCards ready */ #festivus-card-maker.share-on button.festivus-share-ui { display: inline-block; } #festivus-card-maker.share-on div.festivus-share-ui { display: flex; } #festivus-card-preview { display: none; margin: 12px 0 0; max-width: 100%; height: auto; border: 1px solid var(--e-border); border-radius: 6px; } #festivus-card-maker.has-card #festivus-card-preview { display: block; } /* ---- Feats of Strength checklist (js/festivus.js upgrades li -> checkbox) ---- */ #festivus-checklist.js-on { list-style: none; padding-left: 0; } #festivus-checklist.js-on li { margin: 0 0 6px; } #festivus-checklist.js-on label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 28px; } #festivus-checklist.js-on input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--e-accent); } .festivus-complete { display: none; } .festivus-complete.is-on { display: block; padding: 8px 12px; border-left: 4px solid var(--e-accent); background: var(--e-chip-bg); font-weight: bold; } /* ---- homepage promo banner (orchestrator mounts #festivus-promo hidden in index.html; site.js reveals it Nov-Dec) ---- */ #festivus-promo { margin: 16px 0; padding: 10px 14px; border: 1px solid var(--e-border); border-left: 4px solid var(--e-accent); border-radius: 6px; background: var(--e-chip-bg); color: var(--e-text); font-size: 13px; line-height: 1.5; } #festivus-promo p { margin: 0; } #festivus-promo a { color: var(--e-link); font-weight: bold; } /* ===== END WAVE4:FESTIVUS ===== */ /* ===== WAVE4:OTD on-this-day styles (owned by Track 4.5 - edit only inside) ===== */ /* container ships empty; JS adds .otd-on when it has something to show, so no-JS / fetch-failure leaves the homepage visually unchanged */ #on-this-day { display: none; } #on-this-day.otd-on { display: block; margin: 16px 0; padding: 12px 16px; border: 1px solid var(--e-border); border-left: 4px solid var(--e-accent); border-radius: 6px; background: var(--e-chip-bg); color: var(--e-text); overflow: hidden; /* contain beside floated ad tables, like #qotd */ } #on-this-day .otd-heading { margin: 0 0 8px; } #on-this-day .otd-list { margin: 0; padding: 0; list-style: none; } #on-this-day .otd-item { margin: 0 0 10px; font-size: 13px; line-height: 1.5; } #on-this-day .otd-item:last-child { margin-bottom: 0; } #on-this-day .otd-ep a { color: var(--e-link); font-weight: bold; } #on-this-day .otd-meta { display: block; color: var(--e-muted); font-size: 12px; } #on-this-day .otd-teaser { display: block; font-style: italic; font-size: 12px; color: var(--e-text); } #on-this-day .otd-footer { margin: 10px 0 0; font-size: 12px; } #on-this-day .otd-footer a { color: var(--e-link); } @media (min-width: 768px) { #on-this-day .otd-item { font-size: 14px; } } /* ===== END WAVE4:OTD ===== */