/* =================================================================== Mopkin.com - three eras over one markup structure. [data-era="2001"] the original tab-strip layout [data-era="2003"] the 775px redesign (default) [data-era="modern"] a readable present-day skin =================================================================== */ :root { --purple: #630096; --blue: #3301C3; --cream: #ffffcc; --ink: #111; --paper: #fff; --muted: #667; --rule: #e3e3ea; } * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10pt; line-height: 1.5; } a { color: #00c; text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; } .wrap { width: 775px; max-width: 100%; margin: 0 auto; padding: 0 10px; } .masthead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; } .logo img { display: block; } .logo .mark2001, .logo .mark2003, .logo .markmodern { display: none; } .banner img { display: block; } .navbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .navbar .links { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; } .navbar form { display: flex; align-items: center; } .navbar input[type=search] { font-family: inherit; font-size: 10pt; padding: 2px 4px; border: 1px solid var(--purple); } .navbar button { border: 0; background: none; padding: 0; cursor: pointer; } .navbar button img { display: block; width: 70px; height: 25px; } .navbar button.plain { background: navy; color: #fff; font-family: Verdana; font-size: 10px; font-weight: bold; padding: 4px 8px; } .bevel { height: 5px; background: linear-gradient(to bottom, #8a2fb8, #4a0070); } .shell { display: grid; gap: 10px; padding-top: 10px; } .rail { min-width: 0; } .main { min-width: 0; } .pnl { margin-bottom: 10px; } .pnl .hd { background: var(--purple); color: #fff; font-size: 8pt; font-weight: bold; text-align: center; padding: 2px 4px; min-height: 15px; background-image: url(assets/titlebar.gif); background-repeat: repeat-x; } .pnl .hd a { color: #fff; } .pnl .bd { background: var(--blue); color: #fff; font-size: 8pt; padding: 4px; } .pnl .bd a { color: #fff; display: block; padding: 1px 0; } .pnl .bd.center { text-align: center; } .pnl .bd select, .pnl .bd input { font-family: Verdana; font-size: 11px; color: blue; max-width: 100%; margin: 2px 0; } /* Listing boxes in the CONTENT area (topic lists, column index, writers, blog years). Related to .pnl but not the same component: these carry real reading text, so they are not sized like rail furniture. */ .panel { margin-bottom: 14px; border: 1px solid var(--purple); } .panel h2 { margin: 0; background: var(--blue); font-size: 12px; } .panel h2 a { color: #fff; display: block; padding: 4px 8px; font-weight: bold; } .panel ul { list-style: none; margin: 0; padding: 6px 10px; background: #fff; } .panel li { margin: 0 0 5px; padding-left: 12px; text-indent: -12px; font-size: 9pt; } .panel li::before { content: "b7a0"; font-weight: bold; } .teaser { display: grid; grid-template-columns: 100px 1fr; gap: 10px; margin-bottom: 22px; } .teaser .thumb img { width: 100px; display: block; } .teaser .thumb .ph { width: 100px; height: 75px; background: var(--purple); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 9px; text-align: center; padding: 4px; } .big { font-size: 14pt; font-weight: bold; line-height: 1.25; } .big a { color: #000; } .footnote { font-family: "Times New Roman", Times, serif; font-size: 11px; color: #333; } .article h1 { color: navy; font-size: 16pt; margin: 0 0 2px; } .article .body { margin-top: 14px; } .article .body p { margin: 0 0 1em; } .article .body pre { font-family: inherit; font-size: 10pt; white-space: pre-wrap; word-wrap: break-word; margin: 0 0 1em; } .lost { border: 1px dashed #999; background: #f6f6f6; padding: 10px 12px; color: #555; font-size: 9pt; } .ctx { border-left: 3px solid var(--purple); background: #f3ecf8; padding: 8px 12px; margin: 0 0 14px; font-size: 9pt; color: #444; } .msg { margin-bottom: 12px; border: 1px solid var(--purple); } .msg-head { background: var(--purple); color: #fff; padding: 4px 8px; } .msg-head .footnote { color: #e8d5f5; } .msg-body { background: #eee; padding: 8px; font-size: 10pt; } table.catalog { border-collapse: collapse; width: 100%; font-size: 9pt; } table.catalog th { background: var(--blue); color: #fff; text-align: left; padding: 5px 6px; position: sticky; top: 0; } table.catalog td { border-bottom: 1px solid var(--rule); padding: 4px 6px; vertical-align: top; } table.catalog tr.gone td { color: #888; } .badge { font-size: 8pt; padding: 1px 5px; border-radius: 3px; white-space: nowrap; } .badge.full { background: #1c7c1c; color: #fff; } .badge.stub { background: #999; color: #fff; } .foot { background: var(--blue); color: #fff; font-size: 8pt; padding: 4px 10px; margin-top: 10px; } .foot a { color: #fff; } /* ---- the era switcher itself ---- */ .eraswitch { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 8pt; padding: 8px 0 18px; color: var(--muted); } .eraswitch button { font-family: Verdana, sans-serif; font-size: 8pt; cursor: pointer; border: 1px solid var(--purple); background: #fff; color: var(--purple); padding: 3px 9px; border-radius: 2px; } .eraswitch button[aria-pressed="true"] { background: var(--purple); color: #fff; } /* =================================================================== 2003 */ [data-era="2003"] .navbar { background: var(--blue); padding: 4px 10px; } [data-era="2003"] .navbar .links a { color: #fff; font-size: 14pt; font-weight: bold; padding: 0 4px; } [data-era="2003"] .navbar .links a.on { color: yellow; } [data-era="2003"] .navbar .links .sep { color: #fff; font-size: 14pt; } [data-era="2003"] .logo .mark2003 { display: block; width: 212px; height: 60px; } [data-era="2003"] .panel h2 { background: var(--purple); background-image: url(assets/titlebar.gif); background-repeat: repeat-x; } [data-era="2003"] .shell { grid-template-columns: 120px 1fr; } [data-era="2003"] .rail { order: 0; } [data-era="2003"] .main { order: 1; } /* =================================================================== 2001 */ [data-era="2001"] .wrap { width: 1000px; } [data-era="2001"] .logo .mark2001 { display: block; width: 200px; height: 60px; } [data-era="2001"] .navbar { background: none; align-items: flex-end; border-bottom: 2px solid var(--purple); padding: 0 4px; } [data-era="2001"] .navbar .links { gap: 4px; } [data-era="2001"] .navbar .links .sep { display: none; } [data-era="2001"] .navbar .links a { display: block; padding: 3px 12px; font-size: 12px; color: #fff; background: var(--purple); border-radius: 4px 4px 0 0; font-weight: 300; } [data-era="2001"] .navbar .links a.on, [data-era="2001"] .navbar .links a:hover { background: var(--blue); text-decoration: none; } [data-era="2001"] .navbar form { background: var(--blue); padding: 4px 8px; } [data-era="2001"] .bevel { display: none; } /* 2001 put the panels on the RIGHT of the content, not in a left rail */ [data-era="2001"] .shell { grid-template-columns: 1fr 250px; border: 1px solid var(--purple); border-top: 0; padding: 10px; } [data-era="2001"] .rail { order: 1; } [data-era="2001"] .main { order: 0; } [data-era="2001"] .pnl { border: 1px solid var(--purple); } [data-era="2001"] .pnl .hd { background: var(--blue); text-align: left; font-size: 12px; padding: 4px 8px; background-image: none; } [data-era="2001"] .pnl .bd { background: #fff; color: #000; font-size: 9pt; padding: 6px 8px; } [data-era="2001"] .pnl .bd a { color: #00c; } [data-era="2001"] .foot { text-align: center; } /* =================================================================== modern Mopkins are extra-dimensional. The modern skin should look like it. Deep violet void, aurora bleed, and a display face treated with chromatic split so headings read as though they haven't fully arrived in this dimension yet. Always dark - this is a designed look, not a system preference. */ [data-era="modern"] { /* Primary spectrum. Purple and blue carry the structure; the warm end is for accents and subheads further down the page. No brown anywhere. */ --c-purple: #8b5cf6; --c-blue: #3b82f6; --c-green: #22c55e; --c-yellow: #facc15; --c-orange: #fb923c; --c-red: #ef4444; /* structure */ --mm-yellow: var(--c-purple); /* legacy aliases, now purple/blue-led */ --mm-orange: var(--c-blue); --mm-red: var(--c-purple); /* deep space, not a candy bag */ --void: #05040e; --deep: #0d0a22; --ink: #eae8ff; --muted: #9a95c4; --rule: rgba(139,92,246,.24); --panel: rgba(139,92,246,.07); --accent: var(--c-purple); } [data-era="modern"] body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.7; color: var(--ink); background: var(--void); /* extradimensional space: purple and blue lead, a warm ember far down */ background-image: radial-gradient(1100px 620px at 12% -8%, rgba(139,92,246,.42), transparent 62%), radial-gradient(920px 540px at 88% 0%, rgba(59,130,246,.34), transparent 60%), radial-gradient(760px 460px at 70% 104%, rgba(251,146,60,.16), transparent 62%), linear-gradient(180deg, var(--deep) 0%, var(--void) 60%); background-attachment: fixed; } /* faint starfield */ [data-era="modern"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,.55), transparent), radial-gradient(1px 1px at 74% 14%, rgba(255,255,255,.40), transparent), radial-gradient(1px 1px at 42% 68%, rgba(255,255,255,.35), transparent), radial-gradient(1px 1px at 88% 76%, rgba(255,255,255,.30), transparent), radial-gradient(1px 1px at 8% 84%, rgba(255,255,255,.30), transparent), radial-gradient(1px 1px at 60% 40%, rgba(255,255,255,.22), transparent); } [data-era="modern"] .wrap { width: 1020px; padding: 0 26px; position: relative; z-index: 1; } /* ---- the display face: bold, condensed, alien-adjacent ---- */ [data-era="modern"] .display, [data-era="modern"] .article h1, [data-era="modern"] .big, [data-era="modern"] .pnl .hd { font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Narrow Bold", "Arial Black", sans-serif; text-transform: uppercase; font-weight: 400; letter-spacing: .085em; -webkit-text-stroke: .4px rgba(236,228,255,.22); } [data-era="modern"] .article h1 { color: #fff; font-size: 46px; line-height: 1.04; margin: 0 0 10px; /* chromatic split - the rift effect */ text-shadow: 0 0 30px rgba(139,92,246,.60), 0 0 64px rgba(59,130,246,.38), 2px 0 0 rgba(59,130,246,.42), -2px 0 0 rgba(251,146,60,.30); } [data-era="modern"] .masthead { padding: 34px 0 16px; } /* The original 2003 artwork, black lettering and all, kept intact and lit from behind. drop-shadow works off the alpha silhouette, so the glow rims each stroke and the black reads as backlit rather than vanishing into the ground. Tight white core first, then purple, then a wide blue bloom. */ /* Heavy backlight. Chained drop-shadows COMPOUND - each one is applied to the result of the previous - so repeating the white core is what builds the blown-out rim that a single large shadow can't reach. */ [data-era="modern"] .logo .markmodern { display: block; width: 254px; height: auto; filter: drop-shadow(0 0 1px rgba(255,255,255,1)) drop-shadow(0 0 2px rgba(255,255,255,1)) drop-shadow(0 0 4px rgba(255,255,255,.95)) drop-shadow(0 0 9px rgba(196,181,253,.95)) drop-shadow(0 0 17px rgba(139,92,246,1)) drop-shadow(0 0 30px rgba(139,92,246,.85)) drop-shadow(0 0 52px rgba(59,130,246,.85)); } [data-era="modern"] .banner { display: none; } [data-era="modern"] .navbar { background: none; padding: 0 0 14px; border-bottom: 1px solid var(--rule); } [data-era="modern"] .navbar .links { gap: 26px; } [data-era="modern"] .navbar .links .sep { display: none; } [data-era="modern"] .navbar .links a { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; text-transform: uppercase; letter-spacing: .14em; font-size: 15px; color: var(--muted); font-weight: 400; } [data-era="modern"] .navbar .links a:hover { color: var(--mm-orange); text-shadow: 0 0 16px rgba(59,130,246,.65); text-decoration: none; } [data-era="modern"] .navbar .links a.on { color: #fff; text-shadow: 0 0 18px rgba(139,92,246,.85); } [data-era="modern"] .navbar input[type=search] { font-size: 14px; padding: 7px 12px; border: 1px solid var(--rule); border-radius: 999px; background: rgba(255,255,255,.05); color: var(--ink); } [data-era="modern"] .navbar input[type=search]::placeholder { color: var(--muted); } [data-era="modern"] .navbar button.plain { background: linear-gradient(135deg, var(--mm-red), var(--mm-orange)); border-radius: 999px; font-size: 11px; letter-spacing: .1em; padding: 8px 16px; color: #fff; box-shadow: 0 0 22px rgba(139,92,246,.45); } [data-era="modern"] .navbar button img { display: none; } [data-era="modern"] .bevel { display: none; } [data-era="modern"] .shell { grid-template-columns: 1fr 260px; gap: 52px; padding-top: 34px; } [data-era="modern"] .rail { order: 1; } [data-era="modern"] .main { order: 0; } /* ---- rainbow cascade ---------------------------------------------------- Each panel takes the next colour down the spectrum: purple, blue, green, yellow, orange, red, then round again. Purple and blue lead because they carry the site's structure; the warm end arrives further down the page. */ /* Content listings start the spectrum immediately. */ [data-era="modern"] .panel:nth-of-type(6n+1) { --accent: var(--c-purple); } [data-era="modern"] .panel:nth-of-type(6n+2) { --accent: var(--c-blue); } [data-era="modern"] .panel:nth-of-type(6n+3) { --accent: var(--c-green); } [data-era="modern"] .panel:nth-of-type(6n+4) { --accent: var(--c-yellow); } [data-era="modern"] .panel:nth-of-type(6n+5) { --accent: var(--c-orange); } [data-era="modern"] .panel:nth-of-type(6n+6) { --accent: var(--c-red); } /* The rail's first box is the date/about strip - chrome, not a section - so it stays neutral and the spectrum starts on the first real panel below it. */ [data-era="modern"] .rail .pnl:first-of-type { --accent: var(--muted); } [data-era="modern"] .rail .pnl:nth-of-type(6n+2) { --accent: var(--c-purple); } [data-era="modern"] .rail .pnl:nth-of-type(6n+3) { --accent: var(--c-blue); } [data-era="modern"] .rail .pnl:nth-of-type(6n+4) { --accent: var(--c-green); } [data-era="modern"] .rail .pnl:nth-of-type(6n+5) { --accent: var(--c-yellow); } [data-era="modern"] .rail .pnl:nth-of-type(6n+6) { --accent: var(--c-orange); } [data-era="modern"] .rail .pnl:nth-of-type(6n+7) { --accent: var(--c-red); } [data-era="modern"] .pnl { border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); border-radius: 12px; overflow: hidden; margin-bottom: 18px; background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } [data-era="modern"] .pnl .hd { background: none; background-image: none; color: var(--accent); text-align: left; font-size: 13px; letter-spacing: .16em; padding: 12px 14px 6px; text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 60%, transparent); } [data-era="modern"] .pnl .hd a { color: var(--accent); } [data-era="modern"] .pnl .bd { background: none; color: var(--ink); font-size: 14px; padding: 0 14px 12px; } [data-era="modern"] .pnl .bd a { color: var(--ink); padding: 3px 0; } [data-era="modern"] .pnl .bd a:hover { color: var(--mm-orange); text-decoration: none; text-shadow: 0 0 14px rgba(59,130,246,.6); } [data-era="modern"] .panel { border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); border-radius: 12px; overflow: hidden; margin-bottom: 18px; background: color-mix(in srgb, var(--accent) 7%, transparent); } [data-era="modern"] .panel h2 { background: none; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; text-transform: uppercase; letter-spacing: .14em; font-size: 16px; font-weight: 400; } [data-era="modern"] .panel h2 a { color: var(--accent); padding: 13px 16px 5px; text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent); } [data-era="modern"] .panel h2 a:hover { color: #fff; text-decoration: none; } [data-era="modern"] .panel ul { background: none; padding: 0 16px 14px; } [data-era="modern"] .panel li { font-size: 15px; color: var(--ink); margin-bottom: 7px; padding-left: 15px; text-indent: -15px; } [data-era="modern"] .panel li::before { color: var(--accent); } [data-era="modern"] .panel li a { color: var(--ink); } [data-era="modern"] .panel li a:hover { color: var(--accent); text-decoration: none; } [data-era="modern"] .teaser { grid-template-columns: 150px 1fr; gap: 24px; margin-bottom: 40px; } [data-era="modern"] .teaser .thumb img { width: 150px; border-radius: 10px; border: 1px solid var(--rule); } [data-era="modern"] .teaser .thumb .ph { width: 150px; height: 112px; border-radius: 10px; background: var(--panel); color: var(--muted); border: 1px solid var(--rule); } [data-era="modern"] .big { font-size: 25px; letter-spacing: .05em; line-height: 1.15; } [data-era="modern"] .big a { color: #fff; text-shadow: 0 0 20px rgba(139,92,246,.40); } [data-era="modern"] .big a:hover { color: var(--mm-orange); text-decoration: none; text-shadow: 0 0 22px rgba(59,130,246,.7); } [data-era="modern"] .footnote { font-family: inherit; font-size: 13px; color: var(--muted); letter-spacing: .02em; } [data-era="modern"] a { color: var(--mm-orange); } [data-era="modern"] a:hover { color: #fff; } [data-era="modern"] .article .body { font-size: 18px; line-height: 1.78; max-width: 36em; margin-top: 30px; color: var(--ink); } [data-era="modern"] .article .body img { border-radius: 10px; border: 1px solid var(--rule); } [data-era="modern"] .lost { background: rgba(255,255,255,.04); border-style: dashed; border-color: var(--rule); color: var(--muted); border-radius: 10px; } [data-era="modern"] .ctx { background: rgba(139,92,246,.10); border-left-color: var(--mm-yellow); color: var(--ink); border-radius: 0 8px 8px 0; } [data-era="modern"] .msg { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--panel); } [data-era="modern"] .msg-head { background: rgba(59,130,246,.20); color: var(--ink); } [data-era="modern"] .msg-head .footnote { color: var(--muted); } [data-era="modern"] .msg-body { background: none; padding: 12px 14px; font-size: 15px; } [data-era="modern"] table.catalog { font-size: 14px; } [data-era="modern"] table.catalog th { background: rgba(59,130,246,.28); color: #fff; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; } [data-era="modern"] table.catalog td { border-bottom: 1px solid var(--rule); } [data-era="modern"] table.catalog tr.gone td { color: var(--muted); } [data-era="modern"] .badge.full { background: rgba(59,130,246,.22); color: var(--mm-orange); } [data-era="modern"] .badge.stub { background: rgba(255,255,255,.08); color: var(--muted); } [data-era="modern"] #q { background: rgba(255,255,255,.05); color: var(--ink); border: 1px solid var(--rule) !important; border-radius: 999px; padding: 9px 14px; } [data-era="modern"] .foot { background: none; color: var(--muted); border-top: 1px solid var(--rule); padding: 18px 0; } [data-era="modern"] .foot a { color: var(--muted); } [data-era="modern"] .eraswitch { color: var(--muted); } [data-era="modern"] .eraswitch button { background: rgba(255,255,255,.05); color: var(--mm-yellow); border: 1px solid var(--rule); border-radius: 999px; padding: 4px 12px; } [data-era="modern"] .eraswitch button[aria-pressed="true"] { background: linear-gradient(135deg, var(--mm-red), var(--mm-orange)); color: #fff; border-color: transparent; box-shadow: 0 0 18px rgba(139,92,246,.5); } /* ---- phones ---- */ @media (max-width: 820px) { .wrap, [data-era="2001"] .wrap, [data-era="modern"] .wrap { width: 100%; } .shell, [data-era="2001"] .shell, [data-era="2003"] .shell, [data-era="modern"] .shell { grid-template-columns: 1fr; gap: 16px; } .rail, [data-era="2001"] .rail, [data-era="modern"] .rail { order: 1; } .main { order: 0; } .rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .pnl { margin-bottom: 0; } .teaser, [data-era="modern"] .teaser { grid-template-columns: 76px 1fr; gap: 12px; } .teaser .thumb img, .teaser .thumb .ph, [data-era="modern"] .teaser .thumb img, [data-era="modern"] .teaser .thumb .ph { width: 76px; height: auto; } .masthead { flex-direction: column; } .banner { display: none; } [data-era="2003"] .navbar .links a { font-size: 12pt; } [data-era="modern"] .article h1 { font-size: 27px; } [data-era="modern"] .article .body { font-size: 17px; } }