*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:#0b0e12;color:#e5eef6;line-height:1.6}:root{--bg:#0b0e12;--bg1:#11161c;--bg2:#151c24;--text:#e5eef6;--muted:#a7b4c2;--border:#243241;--accent:#00a8ff;--radius:12px}.container{max-width:1200px;margin-inline:auto;padding:2rem 1.25rem}.section{margin-block:2.5rem}.topbar{position:sticky;top:0;z-index:10;background:rgba(15,20,28,.8);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}.topbar .inner{display:flex;gap:.75rem;align-items:center;padding:.8rem 1.25rem}.brand{font-weight:700}.spacer{flex:1}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1rem;border-radius:10px;border:1px solid #1f2a36;background:linear-gradient(180deg,#00a8ff,#007ad6);color:white;text-decoration:none;cursor:pointer}.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}.input,input,select,textarea{width:100%;padding:.7rem .9rem;border-radius:10px;border:1px solid var(--border);background:var(--bg2);color:var(--text);outline:none}.input:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(0,168,255,.25);border-color:#00a8ff}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}.card{background:var(--bg1);border:1px solid var(--border);border-radius:12px;padding:1.25rem}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:.7rem .8rem;border-bottom:1px solid var(--border)}.calc{display:grid;gap:1.25rem;grid-template-columns:repeat(12,1fr)}.pane{grid-column:span 12;background:var(--bg1);border:1px solid var(--border);border-radius:12px;padding:1.25rem}@media(min-width:860px){.pane.inputs{grid-column:span 6}.pane.outputs{grid-column:span 6}}.footer{color:var(--muted);border-top:1px solid var(--border);padding:2rem 1.25rem}
/* ===== Consolidated inline styles ===== */
/* ---- From speeds-feeds-calculator.html ---- */
:root{
--bg:#121212;
--panel:#1b1b1b;
--muted:#b6c2cf;
--accent:#00b4d8;
--accent-2:#0096c7;
--danger:#f07167;
--radius:10px;
}
*{ box-sizing:border-box }
html,body{ height:100%; margin:0; }
body{
background:var(--bg);
color:#e6e6e6;
font-family:'Segoe UI', system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
padding:2em;
}
.app{
max-width:980px;
margin:0 auto;
}
.header{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:6px;
margin:0 0 16px 0;
}
.header img{ max-width:150px; display:block; margin:0 auto 4px auto; }
h1{
text-align:center;
font-weight:600;
color:var(--accent);
border-bottom:2px solid #2c2c2c;
padding-bottom:.5em;
margin:.25em 0 1em 0;
}
p.lead{ margin:0; color:var(--muted); font-size:.95rem; }
.card{
background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
border:1px solid #2b2b2b;
border-radius:var(--radius);
padding:1.2em;
display:flex;
flex-direction:column;
gap:1.2em;
}
.form{ padding:6px; }
.row{
display:grid;
grid-template-columns: repeat(2,1fr);
gap:12px;
align-items:start;
margin-bottom:12px;
}
.row--single{ grid-template-columns: 1fr; }
label{
display:block;
font-weight:600;
font-size:.95rem;
margin-bottom:.35em;
color:#e9eef5;
}
.muted{ color:var(--muted); font-size:.9rem; }
.control{
background:#1f1f1f;
border:1px solid #333;
border-radius:8px;
padding:.65em .75em;
display:flex; align-items:center; gap:.5em;
}
select, input[type="number"]{
width:100%; background:transparent; border:0; color:#fff; outline:none; font-size:1rem;
}
.segmented{
display:inline-flex;
background:#1f1f1f;
border:1px solid #333;
border-radius:8px;
padding:4px;
gap:4px;
}
.segmented button{
border:0; background:transparent; padding:.45em .75em;
border-radius:6px; color:var(--muted); cursor:pointer; font-weight:600;
transition:background .2s ease, color .2s ease;
}
.segmented button.active{
background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
color:#fff;
}
.panel{
background:var(--panel);
border-left:5px solid var(--accent);
border-radius:8px;
padding:1em 1.1em;
display:flex; flex-direction:column; gap:12px;
}
.result-title{
font-size:.9rem; color:var(--muted);
display:flex; justify-content:space-between; align-items:center;
}
.result-big{ font-size:1.75rem; font-weight:700; color:#e6e6e6; }
.result-sub{ font-size:.9rem; color:var(--muted); }
.chip-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.note{
font-size:.85rem; color:var(--muted);
padding:.6em; border-radius:8px; background:#1f1f1f; border:1px solid #333;
}
.warning{ color:var(--danger); font-weight:700; }
.back-to-index{ margin:2rem 0; text-align:center; }
.back-to-index a{
color:#e6e6e6; text-decoration:none; border:1px solid #333; padding:.6em .9em;
border-radius:8px; background:#1f1f1f;
}
.back-to-index a:hover{ border-color:var(--accent); }
.panel{ order:2 }
.form{ order:1 }
}
}
/* ---- From drill-point-length-calculator.html ---- */
:root {
--bg-color: #1e1e1e;
--text-color: #e6e6e6;
--muted: #bdbdbd;
--input-bg: #2c2c2c;
--input-border: #3a3a3a;
--accent: #00b4d8;
--danger: #ff6b6b;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-color); color: var(--text-color); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.section { padding: 24px; }
.container { max-width: 900px; margin: 0 auto; }
h1 {
text-align: center;
font-weight: 600;
color: #00b4d8;
border-bottom: 2px solid #2c2c2c;
padding-bottom: 0.5em;
margin-bottom: 1.5em;
}
p { color: var(--muted); }
label { display: block; margin: 16px 0 6px; font-weight: 600; }
input[type="number"], select {
width: 100%;
padding: 10px 12px;
background: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: 8px;
color: var(--text-color);
font-size: 1rem;
outline: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .row { grid-template-columns: 1fr; } }
.btn {
display: inline-block; padding: 10px 14px; border-radius: 8px; border: 1px solid #333;
background: #232323; color: #fff; text-decoration: none; cursor: pointer;
transition: background .2s ease, border-color .2s ease;
}
.btn:hover { background: #252525; border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #001219; }
.grid { margin-top: 18px; border: 1px solid #333; border-radius: 10px; overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; border-bottom: 1px solid #333; text-align: left; }
th { background: #222; }
tr:last-child td { border-bottom: none; }
.error { color: var(--danger); margin-top: 8px; }
.pill {
display:inline-block; padding:6px 10px; border:1px solid #333; border-radius:999px;
font-size:.9rem; color:var(--muted); background:#1c1c1c;
}
.group { display:flex; gap:8px; align-items:center; flex-wrap: wrap; }
.pill.active { border-color: var(--accent); background: var(--accent); color: #000; font-weight: 700; box-shadow: 0 0 0 2px rgba(0,180,216,0.25) inset; }
.footer-actions { margin: 28px 0 8px; text-align:center; }
.logo { display:block; margin: 0 auto 16px auto; max-width: 150px; }
.formula-box { background:#204b69; color:#fff; padding:14px 16px; border-radius:12px; margin:10px 0; }
code.k { background: transparent; color:#fff; font-weight:700; }
.help { color: var(--muted); font-size: 0.95rem; }
/* ---- From hardness-conversion-calculator.html ---- */
:root{
--bg:#121212; --panel:#1b1b1b; --muted:#b6c2cf; --accent:#00b4d8; --radius:10px; --text:#e6e6e6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,Arial,sans-serif;line-height:1.6}
main{max-width:980px;margin:0 auto;padding:2rem 1.25rem}
.card{background:var(--panel);border:1px solid #2a2a2a;border-radius:var(--radius);padding:1.25rem 1.25rem;margin:0 auto 1rem}
h1{margin:0 0 .5rem;text-align:center;color:var(--accent);border-bottom:2px solid #2c2c2c;padding-bottom:.5rem}
.intro{color:var(--muted);margin:.5rem auto 1rem;max-width:800px;text-align:center}
.section{background:#161616;border:1px solid #2a2a2a;border-radius:var(--radius);padding:1rem;margin:.85rem 0}
.section h2{margin:.1rem 0 .25rem;font-size:1.1rem;color:#e9eef5}
.section p{margin:0 0 .5rem;color:var(--muted);font-size:.95rem}
label{display:block;font-weight:600;margin:.25rem 0 .35rem}
input[type="number"]{width:100%;background:#1f1f1f;border:1px solid #333;border-radius:10px;color:#fff;outline:none;font-size:1.1rem;padding:.6rem}
.controls{display:flex;gap:.75rem;justify-content:center;margin:1rem 0 0}
.btn{background:#1f1f1f;border:1px solid #333;border-radius:10px;color:#fff;padding:.7rem 1.1rem;font-weight:600;cursor:pointer}
.btn.primary{background:var(--accent);border-color:#028ec0;color:#001018}
.btn.primary:hover{filter:brightness(1.05)}
.btn:hover{background:#232323}
.note{font-size:.9rem;color:var(--muted);margin-top:.75rem}
.logo{display:block;margin:0 auto 16px auto;max-width:120px;border:1px solid #fff;border-radius:8px}
.back{text-align:center;margin-top:1rem}
.back a{display:inline-block;background:#1f1f1f;border:1px solid #333;border-radius:8px;padding:.6rem 1rem;color:#fff;text-decoration:none}
.results{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.75rem}
.result{background:#151515;border:1px dashed #333;border-radius:8px;padding:.6rem;text-align:center;font-size:.95rem}
@media(max-width:760px){.results{grid-template-columns:repeat(2,1fr)}}
/* ---- From true-position-calculator.html ---- */
body {
background: #121212;
color: #e6e6e6;
font-family: 'Segoe UI', sans-serif;
padding: 2em;
max-width: 700px;
margin: auto;
line-height: 1.6;
}
h1 {
text-align: center;
font-weight: 600;
color: #00b4d8;
border-bottom: 2px solid #2c2c2c;
padding-bottom: 0.5em;
margin-bottom: 1em;
}
label {
display: block;
margin-top: 1em;
font-weight: 500;
}
input, select {
width: 100%;
padding: 0.6em;
margin-top: 0.3em;
background: #1f1f1f;
color: #fff;
border: 1px solid #333;
border-radius: 6px;
box-sizing: border-box;
transition: border-color 0.2s ease, background 0.2s ease;
}
input:focus, select:focus {
outline: none;
border-color: #00b4d8;
background: #252525;
}
.button-row {
display: flex;
gap: 1em;
margin-top: 1.5em;
}
button {
flex: 1;
padding: 0.8em;
font-size: 1.05em;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s ease, opacity 0.2s ease;
border: none;
}
button:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.calculate {
background: #00b4d8;
color: #fff;
}
.calculate:not(:disabled):hover {
background: #0096c7;
}
.reset {
background: #444;
color: #fff;
}
.reset:hover {
background: #666;
}
.output {
margin-top: 2em;
padding: 1em 1.2em;
background: #1b1b1b;
border-left: 5px solid #00b4d8;
border-radius: 6px;
}
.output p {
margin: 0.5em 0;
}
.success {
color: #80ed99;
font-weight: bold;
}
.fail {
color: #f07167;
font-weight: bold;
}
/* ---- From index.html ---- */
body {
background: #121212;
color: #e6e6e6;
font-family: 'Segoe UI', sans-serif;
padding: 2em;
max-width: 700px;
margin: auto;
line-height: 1.6;
}
h1 {
text-align: center;
font-weight: 600;
color: #00b4d8;
border-bottom: 2px solid #2c2c2c;
padding-bottom: 0.5em;
margin-bottom: 1.5em;
}
.calc-list {
list-style: none;
padding: 0;
}
.calc-list li {
margin-bottom: 1em;
}
a {
display: block;
padding: 1em;
background: #1f1f1f;
color: #fff;
text-decoration: none;
border-radius: 6px;
border: 1px solid #333;
transition: background 0.2s ease, border-color 0.2s ease;
word-break: break-word; /* guards against long filenames */
}
a:hover {
background: #252525;
border-color: #00b4d8;
}
footer { margin-top:3rem; text-align:center; font-size:0.9rem; color:var(--muted); }
footer a { color:var(--muted); margin:0 1rem; text-decoration:none; }
footer a:hover { color:var(--accent); }
/* ---- From ksi-mpa-converter.html ---- */
:root {
--bg-color: #1e1e1e;
--text-color: #e6e6e6;
--muted: #bdbdbd;
--input-bg: #2c2c2c;
--input-border: #3a3a3a;
--accent: #00b4d8;
--danger: #ff6b6b;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-color); color: var(--text-color); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.section { padding: 24px; }
.container { max-width: 900px; margin: 0 auto; }
.logo { display:block; margin: 0 auto 16px auto; max-width: 150px; }
h1 {
text-align: center;
font-weight: 600;
color: var(--accent);
border-bottom: 2px solid #2c2c2c;
padding-bottom: 0.5em;
margin-bottom: 1.5em;
}
p { color: var(--muted); }
label { display: block; margin: 16px 0 6px; font-weight: 600; }
input[type="number"], select {
width: 100%;
padding: 10px 12px;
background: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: 8px;
color: var(--text-color);
font-size: 1rem;
outline: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .row { grid-template-columns: 1fr; } }
.btn {
display: inline-block; padding: 10px 14px; border-radius: 8px; border: 1px solid #333;
background: #232323; color: #fff; text-decoration: none; cursor: pointer;
transition: background .2s ease, border-color .2s ease;
}
.btn:hover { background: #252525; border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #001219; }
.footer-actions { margin: 28px 0 8px; text-align:center; }
.grid { margin-top: 18px; border: 1px solid #333; border-radius: 10px; overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; border-bottom: 1px solid #333; text-align: left; }
th { background: #222; }
tr:last-child td { border-bottom: none; }
.pill {
display:inline-block; padding:6px 10px; border:1px solid #333; border-radius:999px;
font-size:.9rem; color:var(--muted); background:#1c1c1c;
}
.pill.active { border-color: var(--accent); background: var(--accent); color:#000; font-weight:700; box-shadow:0 0 0 2px rgba(0,180,216,0.25) inset; }
.group { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
/* ---- From about.html ---- */
:root{
--bg:#121212;
--panel:#1b1b1b;
--muted:#b6c2cf;
--accent:#00b4d8;
--accent-2:#0096c7;
--radius:10px;
--text:#e6e6e6;
--link:#7dd3fc;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;line-height:1.6}
main{max-width:900px;margin:0 auto;padding:2rem 1.25rem}
.card{background:var(--panel);border:1px solid #2a2a2a;border-radius:var(--radius);padding:1.25rem 1.25rem;margin:0 auto 1rem}
h1{font-size:2rem;margin:.75rem 0 .5rem;text-align:center;color:var(--accent);border-bottom:2px solid #2c2c2c;padding-bottom:.5rem}
h2{font-size:1.15rem;margin:1.2rem 0 .5rem;color:#e9eef5}
p{margin:.4rem 0}
.muted{color:var(--muted);text-align:center}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.cta{display:inline-block;background:#1f1f1f;border:1px solid #333;border-radius:8px;padding:.7em 1em;text-decoration:none;color:#fff}
.grid{display:grid;grid-template-columns:1fr;gap:.75rem}
@media(min-width:720px){.grid{grid-template-columns:1fr 1fr}}
.callout{border-left:4px solid var(--accent);padding:.75rem 1rem;background:#141414;border-radius:6px}
.kpis{display:flex;gap:1rem;flex-wrap:wrap;margin:.5rem 0 0}
.kpi{background:#141414;border:1px solid #2a2a2a;border-radius:8px;padding:.6rem .75rem;font-size:.9rem}
.back{margin:2rem 0;text-align:center}
.hr{height:1px;background:#252525;border:0;margin:1rem 0}
.logo{display:block;margin:0 auto 12px auto;max-width:150px;border:1px solid #fff;border-radius:8px}
/* ---- From right-triangle-calculator.html ---- */
body {
background: #1e1e1e;
color: #e6e6e6;
font-family: 'Courier New', monospace;
padding: 2em;
max-width: 600px;
margin: auto;
}
h1 {
text-align: center;
border-bottom: 2px solid #444;
padding-bottom: 0.5em;
}
label {
display: block;
margin-top: 1em;
}
input {
width: 100%;
padding: 0.5em;
background: #2c2c2c;
color: #fff;
border: 1px solid #555;
}
button {
margin-top: 1em;
width: 100%;
padding: 1em;
background: #007acc;
border: none;
color: #fff;
font-size: 1em;
cursor: pointer;
}
button:hover {
background: #005c99;
}
.secondary {
background: #444;
}
.secondary:hover {
background: #666;
}
.output {
margin-top: 2em;
padding: 1em;
background: #333;
border-left: 5px solid #007acc;
}
.diagram {
margin: 2em 0;
text-align: center;
}
svg {
max-width: 100%;
}
.error {
color: #ff5555;
font-weight: bold;
}
.note {
font-style: italic;
color: #aaa;
}
hr {
border-color: #444;
margin-top: 3em;
}
.highlight {
fill: #00ff00;
font-weight: bold;
}
/* ---- From contact.html ---- */
:root{
--bg:#121212;
--panel:#1b1b1b;
--muted:#b6c2cf;
--accent:#00b4d8;
--radius:10px;
--text:#e6e6e6;
}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,Arial,sans-serif;margin:0;padding:2rem}
main{max-width:700px;margin:0 auto}
.card{background:var(--panel);border:1px solid #2a2a2a;border-radius:var(--radius);padding:1.5rem}
h1{text-align:center;color:var(--accent);border-bottom:2px solid #2c2c2c;padding-bottom:.5rem;margin-bottom:1rem}
label{display:block;margin-top:1rem;font-weight:600}
input,textarea{width:100%;padding:.7rem;margin-top:.3rem;border-radius:8px;border:1px solid #333;background:#1f1f1f;color:#fff}
textarea{min-height:120px}
button{margin-top:1.2rem;padding:.8rem 1.2rem;border:0;border-radius:8px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer}
button:hover{background:#0096c7}
.back{text-align:center;margin-top:2rem}
.back a{color:#fff;text-decoration:none;border:1px solid #333;padding:.6rem 1rem;border-radius:8px;background:#1f1f1f}
/* ---- From pcd-coordinate-calculator.html ---- */
body {
font-family: 'Courier New', monospace;
background: #1e1e1e;
color: #e6e6e6;
padding: 2em;
max-width: 600px;
margin: auto;
}
h1 {
text-align: center;
border-bottom: 2px solid #444;
padding-bottom: 0.5em;
}
form {
display: flex;
flex-direction: column;
}
label {
display: block;
margin-top: 1em;
font-weight: bold;
}
input {
width: 100%;
padding: 0.75em;
background: #2c2c2c;
color: #fff;
border: 1px solid #555;
box-sizing: border-box; /* Ensures padding doesn't affect width */
}
button {
margin-top: 1em;
width: 100%;
padding: 1em;
background: #007acc;
border: none;
color: #fff;
font-size: 1em;
cursor: pointer;
}
button:hover {
background: #005c99;
}
.secondary {
background: #444;
}
.secondary:hover {
background: #666;
}
.output {
margin-top: 2em;
padding: 1em;
background-color: #333;
border-left: 5px solid #007acc;
overflow-x: auto; /* Handles table overflow on small screens */
}
.output table {
width: 100%;
border-collapse: collapse;
margin-top: 1em;
}
.output th, .output td {
padding: 0.75em;
border: 1px solid #444;
text-align: center;
}
.output th {
background-color: #2c2c2c;
}
.error {
color: #ff5555;
font-weight: bold;
}
.note {
font-style: italic;
color: #aaa;
}
/* ---- From polar-cartesian-converter.html ---- */
:root{
--bg:#121212;
--panel:#1b1b1b;
--muted:#b6c2cf;
--accent:#00b4d8;
--accent-2:#0096c7;
--danger:#f07167;
--radius:10px;
}
*{box-sizing:border-box}
body{
background:var(--bg);
color:#e6e6e6;
font-family:'Segoe UI', system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
padding:2em;
max-width:740px;
margin:auto;
line-height:1.6;
}
h1{
text-align:center;
font-weight:600;
color:var(--accent);
border-bottom:2px solid #2c2c2c;
padding-bottom:.5em;
margin-bottom:1em;
}
.card{
background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
border:1px solid #2b2b2b;
border-radius:var(--radius);
padding:1.2em;
display:grid;
gap:1em;
}
.row{
display:grid;
grid-template-columns: 1fr 1fr;
gap:12px;
}
.row--single{ grid-template-columns: 1fr; }
label{
display:block;
font-weight:600;
font-size:.95rem;
margin-bottom:.35em;
color:#e9eef5;
}
.muted{ color:var(--muted); font-size:.9rem; }
.control{
background:#1f1f1f;
border:1px solid #333;
border-radius:8px;
padding:.65em .75em;
display:flex; align-items:center; gap:.5em;
}
input[type="number"], select{
width:100%; background:transparent; border:0; color:#fff; outline:none; font-size:1rem;
}
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
.btn-row{ display:flex; gap:12px; }
button{
flex:1;
padding:.8em;
font-size:1rem;
font-weight:600;
border-radius:8px;
border:none;
cursor:pointer;
transition:background .2s ease, opacity .2s ease, transform .02s ease-in;
}
button:active{ transform: translateY(1px); }
.primary{ background:var(--accent); color:#00151a; }
.primary:hover{ background:var(--accent-2); }
.secondary{ background:#444; color:#fff; }
.secondary:hover{ background:#666; }
.link{
margin-top:1em;
text-align:center;
}
.link a{
color:#e6e6e6; text-decoration:none; border:1px solid #333; padding:.6em .9em;
border-radius:8px; background:#1f1f1f;
}
.link a:hover{ border-color:var(--accent); }
.panel{
background:var(--panel);
border-left:5px solid var(--accent);
border-radius:8px;
padding:1em 1.1em;
}
.error{ color:var(--danger); font-weight:700; }
code{ background:#202020; padding:.2em .4em; border-radius:6px; border:1px solid #333; }
@media (max-width:680px){
.row, .grid-3 { grid-template-columns: 1fr; }
}
/* ---- From turning-surface-finish-calculator.html ---- */
:root {
--bg-color: #1e1e1e;
--text-color: #e6e6e6;
--muted: #bdbdbd;
--input-bg: #2c2c2c;
--input-border: #3a3a3a;
--accent: #00b4d8;
--danger: #ff6b6b;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-color); color: var(--text-color); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.section { padding: 24px; }
.container { max-width: 900px; margin: 0 auto; }
h1 { margin: 0 0 12px; font-size: 1.9rem; line-height: 1.2; }
h2 { margin: 22px 0 10px; font-size: 1.35rem; }
p { color: var(--muted); }
.note { margin: 0 0 16px; }
label { display: block; margin: 16px 0 6px; font-weight: 600; }
input[type="number"], select {
width: 100%;
padding: 10px 12px;
background: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: 8px;
color: var(--text-color);
font-size: 1rem;
outline: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .row { grid-template-columns: 1fr; } }
.btn {
display: inline-block; padding: 10px 14px; border-radius: 8px; border: 1px solid #333;
background: #232323; color: #fff; text-decoration: none; cursor: pointer;
transition: background .2s ease, border-color .2s ease;
}
.btn:hover { background: #252525; border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #001219; }
.grid { margin-top: 18px; border: 1px solid #333; border-radius: 10px; overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; border-bottom: 1px solid #333; text-align: left; }
th { background: #222; }
tr:last-child td { border-bottom: none; }
.error { color: var(--danger); margin-top: 8px; }
.pill {
display:inline-block; padding:6px 10px; border:1px solid #333; border-radius:999px;
font-size:.9rem; color:var(--muted); background:#1c1c1c;
}
.group { display:flex; gap:8px; align-items:center; flex-wrap: wrap; }
.pill.active { border-color: var(--accent); background: var(--accent); color: #000; font-weight: 700; box-shadow: 0 0 0 2px rgba(0,180,216,0.25) inset; }
.footer-actions { margin: 28px 0 8px; text-align:center; }
.logo { display:block; margin: 0 auto 16px auto; max-width: 150px; }
.formula-box { background:#204b69; color:#fff; padding:14px 16px; border-radius:12px; margin:10px 0; }
code.k { background: transparent; color:#fff; font-weight:700; }
.kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
/* ---- From arc-geometry-calculator.html ---- */
:root{
--bg:#121212;
--panel:#1b1b1b;
--muted:#b6c2cf;
--accent:#00b4d8;
--accent-2:#0096c7;
--danger:#f07167;
--radius:10px;
}
*{box-sizing:border-box}
body{
background:var(--bg);
color:#e6e6e6;
font-family:'Segoe UI', system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
padding:2em;
max-width:820px;
margin:auto;
line-height:1.6;
}
h1{
text-align:center;
font-weight:600;
color:var(--accent);
border-bottom:2px solid #2c2c2c;
padding-bottom:.5em;
margin-bottom:1em;
}
.card{
background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
border:1px solid #2b2b2b;
border-radius:var(--radius);
padding:1.2em;
display:grid;
gap:1em;
}
.row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.row--single{ grid-template-columns: 1fr; }
@media (max-width:720px){ .row{ grid-template-columns:1fr; } }
label{ display:block; font-weight:600; font-size:.95rem; margin-bottom:.35em; color:#e9eef5; }
.muted{ color:var(--muted); font-size:.9rem; }
.control{ background:#1f1f1f; border:1px solid #333; border-radius:8px; padding:.65em .75em; display:flex; align-items:center; gap:.5em; }
input[type="number"]{ width:100%; background:transparent; border:0; color:#fff; outline:none; font-size:1rem; }
.btn-row{ display:flex; gap:12px; }
button{ flex:1; padding:.8em; font-size:1rem; font-weight:600; border-radius:8px; border:none; cursor:pointer; transition:background .2s ease, opacity .2s ease, transform .02s ease-in; }
button:active{ transform: translateY(1px); }
.primary{ background:var(--accent); color:#00151a; }
.primary:hover{ background:var(--accent-2); }
.secondary{ background:#444; color:#fff; }
.secondary:hover{ background:#666; }
.pill{ display:inline-block; padding:.35em .7em; border:1px solid #333; border-radius:999px; background:#1f1f1f; color:#e6e6e6; font-weight:600; font-size:.9rem; }
.pill.active{ background:var(--accent); color:#00151a; border-color:var(--accent); }
.unit-badge{ margin-left:.25rem; }
.panel{ background:var(--panel); border-left:5px solid var(--accent); border-radius:8px; padding:1em 1.1em; }
.error{ color:var(--danger); font-weight:700; }
code{ background:#202020; padding:.2em .4em; border-radius:6px; border:1px solid #333; }
/* Prominent result */
.result-box{ display:flex; align-items:center; justify-content:center; padding:1.2rem; border:1px solid #2b2b2b; border-radius:12px; background:linear-gradient(180deg, rgba(0,180,216,0.08), rgba(0,180,216,0.03)); text-align:center; margin:.25rem auto 0; max-width: 520px; }
.result-box .value{ font-size:2.2rem; font-weight:800; letter-spacing:.3px; }
/* Diagram */
.diagram{ background:#171717; border:1px solid #2b2b2b; border-radius:12px; padding:.6rem; }
.legend{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-size:.9rem; color:var(--muted); }
.legend span{ display:inline-flex; align-items:center; gap:.4rem; }
.legend .sw{ width:16px; height:3px; display:inline-block; }
/* Back to index styled like the drill point calc */
.btn-link{ display:inline-block; padding:10px 14px; border-radius:8px; border:1px solid #333; background:#232323; color:#fff; text-decoration:none; transition: background .2s ease, border-color .2s ease; }
.btn-link:hover{ background:#252525; border-color:var(--accent); }
.footer-actions{ margin: 16px 0 4px; text-align:center; }
/* ---- From sine-bar-calculator.html ---- */
:root {
--bg-color: #1e1e1e;
--text-color: #e6e6e6;
--input-bg: #2c2c2c;
--input-border: #555;
--primary-color: #007acc;
--secondary-color: #444;
--secondary-hover: #666;
--error-color: #ff5555;
}
body {
font-family: 'Courier New', monospace;
background: var(--bg-color);
color: var(--text-color);
padding: 2em;
max-width: 600px;
margin: auto;
}
h1 {
text-align: center;
border-bottom: 2px solid var(--secondary-color);
padding-bottom: 0.5em;
}
label {
display: block;
margin-top: 1em;
}
input {
width: 100%;
padding: 0.5em;
background: var(--input-bg);
color: #fff;
border: 1px solid var(--input-border);
}
input.error-border {
border-color: var(--error-color);
}
button {
margin-top: 1em;
width: 100%;
padding: 1em;
background: var(--primary-color);
border: none;
color: #fff;
font-size: 1em;
cursor: pointer;
transition: all 0.3s ease;
}
button:hover {
background: #005c99;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.secondary {
background: var(--secondary-color);
}
.secondary:hover {
background: var(--secondary-hover);
}
.output {
margin-top: 2em;
padding: 1em;
background-color: #333;
border-left: 5px solid var(--primary-color);
}
.output p {
font-weight: bold;
}
.note {
font-style: italic;
color: #aaa;
}
.error {
color: var(--error-color);
font-weight: bold;
}
/* ---- From countersink-calculator.html ---- */
:root {
--bg-color: #1e1e1e;
--text-color: #e6e6e6;
--muted: #bdbdbd;
--input-bg: #2c2c2c;
--input-border: #3a3a3a;
--accent: #00b4d8;
--danger: #ff6b6b;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-color); color: var(--text-color); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.section { padding: 24px; }
.container { max-width: 900px; margin: 0 auto; }
h1 {
text-align: center;
font-weight: 600;
color: #00b4d8;
border-bottom: 2px solid #2c2c2c;
padding-bottom: 0.5em;
margin-bottom: 1.5em;
}
p { color: var(--muted); }
label { display: block; margin: 16px 0 6px; font-weight: 600; }
input[type="number"], select {
width: 100%;
padding: 10px 12px;
background: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: 8px;
color: var(--text-color);
font-size: 1rem;
outline: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .row { grid-template-columns: 1fr; } }
.btn {
display: inline-block; padding: 10px 14px; border-radius: 8px; border: 1px solid #333;
background: #232323; color: #fff; text-decoration: none; cursor: pointer;
transition: background .2s ease, border-color .2s ease;
}
.btn:hover { background: #252525; border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #001219; }
.grid { margin-top: 18px; border: 1px solid #333; border-radius: 10px; overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; border-bottom: 1px solid #333; text-align: left; }
th { background: #222; }
tr:last-child td { border-bottom: none; }
.error { color: var(--danger); margin-top: 8px; }
.pill {
display:inline-block; padding:6px 10px; border:1px solid #333; border-radius:999px;
font-size:.9rem; color:var(--muted); background:#1c1c1c;
}
.group { display:flex; gap:8px; align-items:center; flex-wrap: wrap; }
.pill.active { border-color: var(--accent); background: var(--accent); color: #000; font-weight: 700; box-shadow: 0 0 0 2px rgba(0,180,216,0.25) inset; }
.footer-actions { margin: 28px 0 8px; text-align:center; }
.logo { display:block; margin: 0 auto 16px auto; max-width: 150px; }
.formula-box { background:#204b69; color:#fff; padding:14px 16px; border-radius:12px; margin:10px 0; }
code.k { background: transparent; color:#fff; font-weight:700; }
.help { color: var(--muted); font-size: 0.95rem; }
/* ---- From standard-drills-table.html ---- */
body {
background: #121212;
color: #e6e6e6;
font-family: 'Segoe UI', sans-serif;
padding: 2em;
max-width: 1000px;
margin: auto;
line-height: 1.6;
}
h1 {
text-align: center;
font-weight: 600;
color: #00b4d8;
border-bottom: 2px solid #2c2c2c;
padding-bottom: 0.5em;
margin-bottom: 1em;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 1.05em; /* increased font size */
}
th, td {
padding: 0.75em 0.6em;
border: 1px solid #444; /* more defined borders */
vertical-align: middle;
text-align: center; /* center text */
}
th {
color: #00b4d8;
position: sticky;
top: 0;
background: #121212;
z-index: 1;
font-weight: 600;
}
/* ---- From surface-finish-converter.html ---- */
:root {
--bg-color: #1e1e1e;
--text-color: #e6e6e6;
--muted: #bdbdbd;
--input-bg: #2c2c2c;
--input-border: #3a3a3a;
--accent: #00b4d8;
--danger: #ff6b6b;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-color); color: var(--text-color); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.section { padding: 24px; }
.container { max-width: 900px; margin: 0 auto; }
h1 { margin: 0 0 12px; font-size: 1.9rem; line-height: 1.2; }
h2 { margin: 24px 0 10px; font-size: 1.4rem; }
p { color: var(--muted); }
.note { margin: 0 0 16px; }
label { display: block; margin: 16px 0 6px; font-weight: 600; }
input[type="number"], select {
width: 100%;
padding: 10px 12px;
background: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: 8px;
color: var(--text-color);
font-size: 1rem;
outline: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn {
display: inline-block; padding: 10px 14px; border-radius: 8px; border: 1px solid #333;
background: #232323; color: #fff; text-decoration: none; cursor: pointer;
transition: background .2s ease, border-color .2s ease;
}
.btn:hover { background: #252525; border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #001219; }
.grid { margin-top: 18px; border: 1px solid #333; border-radius: 10px; overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; border-bottom: 1px solid #333; text-align: left; }
th { background: #222; }
tr:last-child td { border-bottom: none; }
.muted { color: var(--muted); font-size: .95rem; }
.error { color: var(--danger); margin-top: 8px; }
.pill {
display:inline-block; padding:4px 8px; border:1px solid #333; border-radius:999px;
font-size:.9rem; color:var(--muted); background:#1c1c1c;
}
.units { display:flex; gap:8px; align-items:center; }
.units .pill.active { border-color: var(--accent); background: var(--accent); color: #000; font-weight: 700; box-shadow: 0 0 0 2px rgba(0,180,216,0.25) inset; }
.footer-actions { margin: 28px 0 8px; text-align:center; }
.logo { display:block; margin: 0 auto 16px auto; max-width: 150px; }
@media (max-width: 720px) {
.row { grid-template-columns: 1fr; }
}
/* Utility classes extracted from inline styles */
.mt-10 { margin-top: 10px; }
.mt-28 { margin-top: 28px; }
.text-right { text-align: right; }
.mr-8 { margin-right: 8px; }
.inline-block { display: inline-block; }
.hidden { display: none; }
.checkbox-align { transform: translateY(1px); margin-right: 6px; }
.no-underline { text-decoration: none; }
/* ---- From metric-threads-calculator.html ---- */
:root { --bg:#121212; --fg:#e6e6e6; --muted:#a8a8a8; --card:#1b1b1b;
--accent:#00b4d8; --accent-2:#0096c7; --warn:#f4d35e; --ok:#80ed99; --fail:#f07167; --line:#2c2c2c; }
html, body { height:100%; }
body { background:var(--bg); color:var(--fg); font-family:'Segoe UI', system-ui, -apple-system, sans-serif; padding:max(2rem, env(safe-area-inset-top)); max-width:820px; margin:auto; line-height:1.6; }
h1 { text-align:center; font-weight:600; color:var(--accent); border-bottom:2px solid var(--line); padding-bottom:.5rem; margin-bottom:1rem; }
.topgrid { display:grid; gap:1rem; }
@media (min-width:760px) { .topgrid { grid-template-columns:1fr 1fr; } }
label { display:block; margin-top:1rem; font-weight:600; }
select, button { width:100%; padding:1rem; margin-top:.35rem; background:#1f1f1f; color:#fff; border:1px solid #333; border-radius:12px; box-sizing:border-box; font-size:1.05rem; }
select:focus, button:focus { outline:none; border-color:var(--accent); background:#252525; }
.button-row { display:flex; gap:1rem; margin-top:1.2rem; }
.calculate { background:var(--accent); color:#fff; border:none; }
.calculate:hover { background:var(--accent-2); }
.reset { background:#444; border:none; color:#fff; }
.reset:hover { background:#666; }
.output { margin-top:1.2rem; padding:1rem 1.2rem; background:var(--card); border-left:5px solid var(--accent); border-radius:12px; min-height:6.5rem; }
.output p { margin:.45rem 0; }
.muted { color:var(--muted); font-size:.95em; }
.ok { color:var(--ok); }
.warn { color:var(--warn); }
.fail { color:var(--fail); }
.pill { display:inline-block; padding:.25rem .6rem; border:1px solid var(--line); border-radius:999px; background:#171717; font-size:.95em; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1rem; }
.kv { display:flex; justify-content:space-between; gap:1rem; padding:.45rem .7rem; background:#161616; border:1px solid #232323; border-radius:8px; }
.kv span:first-child { color:var(--muted); }
.diag { margin-top:1rem; padding:.75rem; border:1px dashed #555; border-radius:8px; background:#181818; color:#ddd; font-size:.9em; display:none; }
footer { margin:2rem 0; color:var(--muted); font-size:.9em; text-align:center; }
/* ---- From unified-threads-calculator.html ---- */
:root { --bg:#121212; --fg:#e6e6e6; --muted:#a8a8a8; --card:#1b1b1b;
--accent:#00b4d8; --accent-2:#0096c7; --warn:#f4d35e; --ok:#80ed99; --fail:#f07167; --line:#2c2c2c; }
html, body { height:100%; }
body { background:var(--bg); color:var(--fg); font-family:'Segoe UI', system-ui, -apple-system, sans-serif; padding:max(2rem, env(safe-area-inset-top)); max-width:820px; margin:auto; line-height:1.6; }
h1 { text-align:center; font-weight:600; color:var(--accent); border-bottom:2px solid var(--line); padding-bottom:.5rem; margin-bottom:1rem; }
.topgrid { display:grid; gap:1rem; }
@media (min-width:760px) { .topgrid { grid-template-columns:1fr 1fr; } }
label { display:block; margin-top:1rem; font-weight:600; }
select, button { width:100%; padding:1rem; margin-top:.35rem; background:#1f1f1f; color:#fff; border:1px solid #333; border-radius:12px; box-sizing:border-box; font-size:1.05rem; }
select:focus, button:focus { outline:none; border-color:var(--accent); background:#252525; }
.button-row { display:flex; gap:1rem; margin-top:1.2rem; }
.calculate { background:var(--accent); color:#fff; border:none; }
.calculate:hover { background:var(--accent-2); }
.reset { background:#444; border:none; color:#fff; }
.reset:hover { background:#666; }
.output { margin-top:1.2rem; padding:1rem 1.2rem; background:var(--card); border-left:5px solid var(--accent); border-radius:12px; min-height:6.5rem; }
.output p { margin:.45rem 0; }
.muted { color:var(--muted); font-size:.95em; }
.ok { color:var(--ok); }
.warn { color:var(--warn); }
.fail { color:var(--fail); }
.pill { display:inline-block; padding:.25rem .6rem; border:1px solid var(--line); border-radius:999px; background:#171717; font-size:.95em; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1rem; }
.kv { display:flex; justify-content:space-between; gap:1rem; padding:.45rem .7rem; background:#161616; border:1px solid #232323; border-radius:8px; }
.kv span:first-child { color:var(--muted); }
.diag { margin-top:1rem; padding:.75rem; border:1px dashed #555; border-radius:8px; background:#181818; color:#ddd; font-size:.9em; display:none; white-space:pre-wrap; }
footer { margin:2rem 0; color:var(--muted); font-size:.9em; text-align:center; }