/* ========== PMTC—Modern Dark Theme ========== */ :root{ --bg:#0f1318; --card:#151b22; --muted:#a6b3c2; --text:#eaf1f8; --accent:#7aa2ff; --accent-2:#6ee7b7; --chip:#1b222b; --chip-hover:#232c36; --border:#1e2630; --shadow: 0 10px 25px rgba(0,0,0,.35); --radius:18px; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font:16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial; color:var(--text); background:radial-gradient(1200px 800px at 20% -10%, #16202c 0%, #0f1318 55%), linear-gradient(180deg, #0f1318 0%, #0d1116 100%); } /* Layout */ .wrapper{max-width:1100px;margin:40px auto;padding:0 18px} .card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px 26px 24px; } /* Headings */ h1{margin:0 0 8px;font-size:34px;letter-spacing:.3px} h2{ margin:28px 0 12px; font-size:18px; font-weight:700; color:#cfe0ff; display:flex;align-items:center;gap:8px } h2 .badge{ font-size:12px; padding:2px 8px; border-radius:999px; background:#1f2b3a;color:#a6c8ff;border:1px solid #263447; } .lead{margin:4px 0 18px;color:var(--muted)} /* Search */ .searchbar{ position:sticky;top:0;z-index:10;margin:-10px 0 14px; background:linear-gradient(#151b22,#151b22cc 60%,transparent); padding:10px 0 8px; } .searchbar input{ width:100%;padding:12px 14px;border-radius:12px; border:1px solid var(--border);outline:none; background:#10161d;color:var(--text); } .searchbar input:focus{border-color:#2c75ff;box-shadow:0 0 0 3px rgba(44,117,255,.2)} /* Chips grid */ .nav{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0 4px;padding:0;list-style:none} .nav a{ display:inline-flex;align-items:center;gap:8px; padding:10px 14px;border-radius:14px;text-decoration:none; color:#dfe9f6;background:var(--chip);border:1px solid var(--border); transition:.14s transform,.14s background,.14s border; white-space:nowrap } .nav a:hover{background:var(--chip-hover);border-color:#2a3441;transform:translateY(-1px)} .nav a .pill{ padding:1px 6px;border-radius:999px;font-size:11px; color:#0f1318;background:var(--accent-2);font-weight:700 } /* Utilities */ .kbd{font:12px/1 ui-monospace,Menlo,Consolas;background:#0e1217;border:1px solid #202733;border-bottom-color:#171c24;border-radius:6px;padding:2px 6px;color:#cbd5e1} .footer{margin-top:26px;color:var(--muted);font-size:13px} .footer a{color:var(--accent);text-decoration:none} .footer a:hover{text-decoration:underline} hr{border:0;border-top:1px solid var(--border);margin:20px 0} /* Small helpers */ .meta{color:#9fb0c6;font-size:13px} .hide{display:none!important} /* Responsive tweaks */ @media (max-width:640px){ h1{font-size:28px} .nav a{padding:9px 12px} } /* ===== PMTC Readability Upgrades (do-not-edit block) ===== */ :root{ --pm-base: #0f1318; --pm-card: #141a22; --pm-text: #e8eef7; --pm-muted:#a9b4c2; --pm-accent:#7ea6ff; --pm-accent-2:#9bd67b; --pm-border:#273041; --pm-pill:#1c2430; --pm-pill-hover:#232e3d; /* New sizing scale */ --fs-0:14px; /* small */ --fs-1:16px; /* base */ --fs-2:18px; /* large body */ --fs-3:22px; /* h6-ish */ --fs-4:26px; /* h5 */ --fs-5:32px; /* h4 */ --fs-6:38px; /* h3 */ --fs-7:46px; /* h2 */ --fs-8:56px; /* h1 */ --radius-xl: 16px; --radius-lg: 12px; --radius-md: 10px; --shadow-soft: 0 6px 24px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.03) inset; } html{font-size:16px} @media (min-width:640px){ html{font-size:17px} } @media (min-width:1024px){ html{font-size:18px} } body{ background: radial-gradient(1200px 700px at 20% -10%, #1a2230 0%, #0f1318 60%) fixed, var(--pm-base); color: var(--pm-text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Apple Color Emoji","Segoe UI Emoji"; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .wrapper{ max-width: 1160px; margin: 40px auto; padding: 0 16px; } .card{ background: var(--pm-card); border: 1px solid var(--pm-border); border-radius: var(--radius-xl); padding: 28px 28px 24px; box-shadow: var(--shadow-soft); } h1{ font-size: var(--fs-8); line-height:1.1; margin: 4px 0 18px; letter-spacing:.2px; } h2{ font-size: var(--fs-6); line-height:1.2; margin: 28px 0 14px; } h3{ font-size: var(--fs-4); margin: 20px 0 10px; } .lead{ font-size: var(--fs-2); color: var(--pm-muted); margin-bottom: 18px; } /* Searchbar + inputs */ .searchbar input[type="search"], input[type="text"], input[type="number"], input[type="date"], input[type="time"], textarea, select { font-size: 18px; /* =16px avoids mobile zoom */ line-height: 1.3; height: 44px; padding: 10px 14px; color: var(--pm-text); background: #0f141b; border: 1px solid #2c384b; border-radius: 10px; outline: none; width: 100%; } .searchbar input::placeholder{ color: #8fa0b6; } button, .btn, input[type="submit"]{ font-size: 17px; height: 44px; padding: 0 16px; border-radius: 12px; color: var(--pm-text); background: var(--pm-pill); border: 1px solid var(--pm-border); cursor: pointer; transition: transform .05s ease, background .2s ease, border-color .2s ease; } button:hover, .btn:hover, input[type="submit"]:hover{ background: var(--pm-pill-hover); border-color: #35507b; transform: translateY(-1px); } /* Tool “pills” list */ ul.nav{ display:flex; flex-wrap:wrap; gap:12px; padding-left:0; list-style:none; } ul.nav a{ display:inline-flex; align-items:center; gap:8px; font-size: 17px; padding: 10px 14px; border-radius: 999px; background: var(--pm-pill); color: var(--pm-text); border: 1px solid var(--pm-border); text-decoration: none; } ul.nav a:hover{ background: var(--pm-pill-hover); border-color:#3a557f; } .badge{ font-size: 12px; padding: 4px 8px; border-radius: 999px; background:#243044; color:#cfe1ff; border:1px solid #364866; } .pill{ font-size: 11px; padding: 4px 8px; border-radius: 999px; background:#21332a; color:#c6f0b6; border:1px solid #30533d; } /* Links (better visibility) */ a{ color: var(--pm-accent); text-decoration: underline; text-underline-offset: 2px; } a:hover{ text-decoration-thickness: 2px; } .footer a{ color:#bcd1ff; } /* KBD style in footer */ .kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; background:#0b1016; border:1px solid #273246; border-radius:8px; padding: 3px 8px; font-size: 13px; color:#cfe1ff; } /* Footer spacing */ .footer{ color: var(--pm-muted); font-size: var(--fs-1); } hr{ border:0; height:1px; background: linear-gradient(90deg, transparent, #2b384d, transparent); margin: 26px 0; } /* ===== End PMTC Readability Upgrades ===== */ /* ===== PMTC Dark Readability Upgrades ===== */ :root{ --pm-base:#0f1318; --pm-card:#141a22; --pm-text:#e8eef7; --pm-muted:#a9b4c2; --pm-accent:#7ea6ff; --pm-border:#273041; --pm-pill:#1c2430; --pm-pill-hover:#232e3d; } html{font-size:16px} @media(min-width:640px){html{font-size:17px}} @media(min-width:1024px){html{font-size:18px}} body{ background: radial-gradient(1200px 700px at 20% -10%, #1a2230 0%, #0f1318 70%) fixed; background-color: var(--pm-base); color: var(--pm-text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; line-height:1.6; -webkit-font-smoothing: antialiased; } .wrapper{ max-width:1160px; margin:40px auto; padding:0 16px; } .card{ background: var(--pm-card); border:1px solid var(--pm-border); border-radius:16px; padding:28px; box-shadow:0 6px 24px rgba(0,0,0,.28); } h1{font-size:56px;margin:4px 0 18px;} h2{font-size:38px;margin:28px 0 14px;} h3{font-size:26px;margin:20px 0 10px;} .lead{font-size:18px;color:var(--pm-muted);margin-bottom:18px;} /* Searchbar + inputs */ .searchbar input[type="search"], input,textarea,select{ font-size:18px; height:44px; padding:10px 14px; color:var(--pm-text); background:#0f141b; border:1px solid #2c384b; border-radius:10px; } .searchbar input::placeholder{color:#8fa0b6} /* Buttons */ button,.btn,input[type="submit"]{ font-size:17px; height:44px; padding:0 16px; border-radius:12px; background:var(--pm-pill); border:1px solid var(--pm-border); color:var(--pm-text); cursor:pointer; } button:hover,.btn:hover,input[type="submit"]:hover{ background:var(--pm-pill-hover); border-color:#35507b; } /* Tool pills */ ul.nav{display:flex;flex-wrap:wrap;gap:12px;padding-left:0;list-style:none;} ul.nav a{ font-size:17px; padding:10px 14px; border-radius:999px; background:var(--pm-pill); color:var(--pm-text); border:1px solid var(--pm-border); text-decoration:none; } ul.nav a:hover{background:var(--pm-pill-hover);border-color:#3a557f} .footer{color:var(--pm-muted);font-size:16px;} .footer a{color:#bcd1ff;text-decoration:underline;} /* ===== End Dark Readability Upgrades ===== */ /* ===== PMTC Dark Contrast Upgrade ===== */ :root{ --pm-base:#0f1318; --pm-card:#141a22; --pm-text:#f2f6fb; /* brighter text */ --pm-muted:#b7c2d0; --pm-accent:#90baff; --pm-border:#2d3a4f; --pm-pill:#101820; /* darker pill */ --pm-pill-hover:#1a2533; } body{ background: radial-gradient(1200px 700px at 20% -10%, #1b2535 0%, #0f1318 70%) fixed; background-color: var(--pm-base); color: var(--pm-text); font-family: Inter, Segoe UI, Roboto, sans-serif; line-height: 1.65; } h1,h2,h3{ color: var(--pm-text); font-weight:700; } .lead{ color: var(--pm-muted); font-size:18px; } .searchbar input[type="search"]{ background:#141c28; border:1px solid #3a4c65; color:var(--pm-text); } .searchbar input::placeholder{ color:#94a6be } ul.nav a{ background: var(--pm-pill); border:1px solid var(--pm-border); color: var(--pm-text); } ul.nav a:hover{ background:var(--pm-pill-hover); border-color:#4b6a94; } /* ===== End Contrast Upgrade ===== */ /* ===== PMTC NEW badge contrast ===== */ .pill{ display:inline-flex; align-items:center; justify-content:center; padding: 2px 9px; margin-left:8px; font: 700 12px/1 Inter, Segoe UI, Roboto, sans-serif; border-radius: 9999px; background: #f5f9ff; /* light chip for contrast on dark bg */ color: #0b1220; /* very dark text for 7:1+ contrast */ border: 1px solid #8fb8ff; /* subtle ring */ letter-spacing:.02em; opacity: 1 !important; /* override any previous dimming */ filter: none !important; text-shadow: none !important; } a .pill { pointer-events:none } /* keep the link click target clean */ .pill::before{ content: ""; } /* guard against icon fonts overriding */ .pill.pill--dark{ background:#223043; color:#f2f6fb; border-color:#4a6aa0 } /* optional */ /* ===== End PMTC NEW badge contrast ===== */ /* ===== PMTC NEW badge light-blue ===== */ .pill{ display:inline-flex; align-items:center; justify-content:center; padding: 2px 9px; margin-left:8px; font: 700 12px/1 Inter, Segoe UI, Roboto, sans-serif; border-radius: 9999px; background: #162030; /* dark navy background */ color: #74c0ff; /* bright light-blue text */ border: 1px solid #2e4b66; /* subtle border */ letter-spacing:.02em; opacity: 1 !important; text-shadow: none !important; } a .pill { pointer-events:none } /* keep parent link clickable */ /* ===== End PMTC NEW badge light-blue ===== */ /* ===== PMTC: readable NEW pills (accessibility) ===== */ ul.nav .pill, .pill { display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:2px 10px !important; min-width: 42px !important; height: 22px !important; /* Make the text visible */ color:#74c0ff !important; /* light blue text */ font-weight:700 !important; font-size:12px !important; line-height:1 !important; letter-spacing:.02em !important; text-indent:0 !important; text-shadow:none !important; text-transform:uppercase !important; opacity:1 !important; /* Pill look */ background:#162030 !important; border:1px solid #2e4b66 !important; border-radius:9999px !important; } .pill::before, .pill::after { /* Kill decorative dots/lines that replace the text on some themes */ content:none !important; display:none !important; } a .pill { pointer-events:none !important; } /* keep anchor clicks clean */ /* ===== End PMTC pill override ===== */ /* === PMTC site-banner (under construction) === */ .site-banner.is-hiding{ opacity: 0; transform: translateY(-6px); } /* readable on dark */ @media (prefers-color-scheme: light){ } /* === /PMTC site-banner === */ /* PMTC banner + pill contrast */ #pmtc-banner{ position: sticky; top:0; z-index: 9999; display:flex; gap:.75rem; align-items:center; justify-content:center; padding:.75rem 1rem; background: linear-gradient(180deg, rgba(30, 96, 160, .28), rgba(16, 32, 48, .28)); color:#cfeaff; border-bottom:1px solid rgba(124, 210, 255, .25); backdrop-filter: blur(6px); font-size: .95rem; } #pmtc-banner strong{ color:#7cd2ff; font-weight:700 } #pmtc-banner button{ margin-left:.5rem; line-height:1; font-size:1.1rem; border:1px solid rgba(124,210,255,.35); background: rgba(124,210,255,.08); color:#cfeaff; border-radius:.5rem; padding:.15rem .45rem; cursor:pointer; } #pmtc-banner button:hover{ background: rgba(124,210,255,.15) } #pmtc-banner.hide{ display:none } /* Better NEW pill contrast */ .pill{ color:#9bd7ff !important; background: rgba(80,160,255,.14) !important; border:1px solid rgba(124,210,255,.28) !important; box-shadow: inset 0 0 0 1px rgba(124,210,255,.12); }