/* ========================================================================== ManTric LLC — site stylesheet Visual concept: the paper trail of a ship-in repair shop — a work-order ticket, a parts ledger, a claim stub — rendered in the brand's deep purple + magenta palette against a cool paper background. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* Theme tokens. Dark is the default (no attribute needed); adding data-theme="light" on (see script.js) switches the page-level tokens below to the light set. The header/footer/hero "chrome" colors (--ink, --line-ink, --muted-on-ink, --brass, --copper, --copper-deep) stay constant in both themes — only the page's own background, card surfaces, and body text switch. */ :root { --ink: #2E1A3D; /* deep aubergine purple — header, footer, dark bands (constant) */ --ink-2: #3D2350; /* raised surface on ink */ --paper: #1B1224; /* page background — dark by default */ --surface: #271A33; /* card / table surface, elevated above paper */ --input-bg: #2F2140; /* form field background */ --ledger: #F2ECF5; /* body text */ --heading: #F2ECF5; /* headings + emphasized text on paper/surface */ --muted: #B7A8C2; /* secondary text on paper/surface */ --muted-on-ink: #C9B8D6;/* secondary text on the constant dark chrome */ --line: #4A3759; /* hairline rule on paper/surface */ --line-ink: #55366C; /* hairline rule on the constant dark chrome (constant) */ --copper: #B0245F; /* filled-button magenta (constant — white text sits on top either way) */ --copper-deep: #8A1C49; /* filled-button hover (constant) */ --accent: #F0679E; /* magenta for TEXT/links/emphasis — brighter in dark mode for contrast */ --accent-hover: #F58AB4; --brass: #C99A3E; /* stamp / warranty accent — gold, reads fine on both themes (constant) */ --focus: #5FD3BE; /* focus ring — bright teal for visibility on dark backgrounds */ --error: #FF6B5B; /* form error text — bright coral for visibility on dark backgrounds */ --radius: 3px; --wrap: 1120px; } :root[data-theme="light"] { --paper: #EDE7EE; --surface: #FDFBFD; --input-bg: #FFFFFF; --ledger: #241A2C; --heading: #2E1A3D; --muted: #6B5F73; --line: #D6CCDA; --accent: #B0245F; --accent-hover: #8A1C49; --focus: #2F6F63; --error: #A6371F; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--paper); color: var(--ledger); font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .mono { font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; } h1, h2, h3 { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; line-height: 1.2; margin: 0 0 0.5em; color: var(--heading); } h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); font-weight: 700; letter-spacing: -0.01em; } h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); } h3 { font-size: 1.15rem; } p { margin: 0 0 1em; max-width: 62ch; } a { color: var(--accent); } a:hover { color: var(--accent-hover); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .section { padding: 64px 0; } .band-light { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .band-dark { background: var(--ink); color: var(--muted-on-ink); } .band-dark h2, .band-dark h3 { color: #fff; } .band-dark p { color: var(--muted-on-ink); } /* ---------- buttons ---------- */ .btn { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 0.95rem; font-weight: 500; text-decoration: none; padding: 0.85em 1.4em; border-radius: var(--radius); border: 1px solid transparent; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .btn + .btn { margin-left: 12px; } .btn-primary { background: var(--copper); color: #fff; } .btn-primary:hover { background: var(--copper-deep); color: #fff; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: #fff; } .hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.55); } .hero .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; } .btn-brass { background: var(--brass); color: var(--ink); font-weight: 600; } .btn-brass:hover { background: #b98a2e; } .link-inline { font-family: 'IBM Plex Mono', monospace; font-size: 0.95rem; text-decoration: underline; text-underline-offset: 3px; } /* ---------- header / nav ---------- */ .site-header { background: var(--ink); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line-ink); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; } .logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 1.1rem; letter-spacing: 0.02em; } .logo .mark { color: var(--brass); flex-shrink: 0; } .logo .mark-img { height: 30px; width: auto; display: block; flex-shrink: 0; } .logo:hover { color: #fff; } .nav { display: flex; align-items: center; gap: 14px; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--line-ink); background: transparent; color: var(--muted-on-ink); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover { color: #fff; border-color: var(--brass); } .theme-toggle svg { display: block; } .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: block; } :root[data-theme="light"] .theme-toggle .icon-moon { display: none; } .nav-toggle { display: none; background: transparent; border: 1px solid var(--line-ink); color: #fff; font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem; padding: 0.5em 0.9em; border-radius: var(--radius); } .nav-menu { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; } .nav-menu li + li { margin-left: 28px; } @media (max-width: 760px) { .nav-menu li + li { margin-left: 0; } } .nav-menu a { color: var(--muted-on-ink); text-decoration: none; font-size: 0.95rem; font-weight: 500; padding: 4px 0; border-bottom: 2px solid transparent; } .nav-menu a:hover, .nav-menu a[aria-current="page"] { color: #fff; border-bottom-color: var(--brass); } .nav-cta { background: var(--copper); color: #fff !important; padding: 8px 16px !important; border-radius: var(--radius); border-bottom: none !important; font-family: 'IBM Plex Mono', monospace; } .nav-cta:hover { background: var(--copper-deep); color: #fff !important; } @media (max-width: 760px) { .nav-toggle { display: block; } .nav-menu { display: none; position: absolute; top: 68px; left: 0; right: 0; background: var(--ink); flex-direction: column; gap: 0; padding: 8px 24px 20px; border-bottom: 1px solid var(--line-ink); } .nav-menu.open { display: flex; } .nav-menu li { border-top: 1px solid var(--line-ink); } .nav-menu li:first-child { border-top: none; } .nav-menu a { display: block; padding: 12px 0; } } /* ---------- hero ---------- */ .hero { background: var(--ink); color: #fff; padding: 72px 0 88px; overflow: hidden; } .hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; } .hero h1 { color: #fff; } .hero-sub { color: var(--muted-on-ink); font-size: 1.08rem; max-width: 46ch; } .hero-actions { margin-top: 28px; } @media (max-width: 860px) { .hero-inner { grid-template-columns: 1fr; } } /* ---------- work-order ticket ---------- */ /* Deliberately NOT theme-linked: a work-order ticket is printed on paper, so it stays a fixed light card in both light and dark mode. */ .ticket { background: #FDFBFD; color: #241A2C; border-radius: var(--radius); padding: 26px 26px 20px; max-width: 380px; margin-left: auto; position: relative; box-shadow: 0 24px 50px -20px rgba(0,0,0,0.5); animation: ticket-in 0.6s ease-out; } @keyframes ticket-in { from { opacity: 0; transform: translateY(14px) rotate(0deg); } to { opacity: 1; transform: translateY(0) rotate(-1.2deg); } } .ticket-stamp { position: absolute; top: -14px; right: 22px; font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: #B0245F; border: 2px solid #B0245F; border-radius: 4px; padding: 4px 10px; background: #FDFBFD; transform: rotate(6deg); } .ticket-head { display: flex; justify-content: space-between; align-items: baseline; } .ticket-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; color: #6B5F73; text-transform: uppercase; letter-spacing: 0.06em; } .ticket-no { font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem; font-weight: 600; } .ticket-perf { height: 14px; margin: 14px -26px 6px; background-image: radial-gradient(circle, #EDE7EE 3px, transparent 3.5px); background-size: 16px 14px; background-position: 8px 0; border-top: 1px dashed #D6CCDA; border-bottom: 1px dashed #D6CCDA; } .ticket-lines { list-style: none; margin: 10px 0 0; padding: 0; } .ticket-lines li { display: flex; justify-content: space-between; font-family: 'IBM Plex Mono', monospace; font-size: 0.92rem; padding: 8px 0; border-bottom: 1px dotted #D6CCDA; } .ticket-lines li:last-child { border-bottom: none; } .ticket-lines li span:last-child { font-weight: 600; color: #2E1A3D; } /* ---------- ledger list (what's included) ---------- */ .ledger { list-style: none; margin: 32px 0 0; padding: 0; } .ledger li { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); } .ledger li:first-child { border-top: 1px solid var(--line); } .ledger-label { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--heading); } .ledger-value { color: var(--muted); margin: 0; } @media (max-width: 620px) { .ledger li { grid-template-columns: 1fr; gap: 4px; } } /* ---------- numbered steps ---------- */ .steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 32px; } .steps li { display: grid; grid-template-columns: 56px 1fr; gap: 20px; } .step-no { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 1.4rem; color: var(--brass); border: 1px solid var(--line); background: var(--surface); width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .steps h3 { margin-bottom: 0.3em; } .steps p { margin-bottom: 0; } /* ---------- two-column link-out ---------- */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } @media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } } /* ---------- pricing tables (services page) ---------- */ .price-table-wrap { overflow-x: auto; margin: 20px 0 36px; border: 1px solid var(--line); border-radius: var(--radius); } table.price-table { width: 100%; border-collapse: collapse; background: var(--surface); min-width: 480px; } table.price-table caption { display: none; } table.price-table th { font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; text-align: left; color: var(--muted); padding: 12px 18px; border-bottom: 1px solid var(--line); } table.price-table td { padding: 14px 18px; border-bottom: 1px dotted var(--line); vertical-align: top; } table.price-table tr:last-child td { border-bottom: none; } table.price-table td:first-child { font-weight: 600; color: var(--heading); white-space: nowrap; } table.price-table td.price { font-family: 'IBM Plex Mono', monospace; font-weight: 600; text-align: right; white-space: nowrap; color: var(--accent); } table.price-table th.price-col { text-align: right; } .note-block { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brass); border-radius: var(--radius); padding: 16px 20px; margin: 0 0 28px; } .note-block p:last-child { margin-bottom: 0; } .doc-section { padding-top: 40px; border-top: 1px solid var(--line); margin-top: 40px; } .doc-section:first-of-type { border-top: none; margin-top: 0; padding-top: 0; } .doc-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; color: var(--muted); margin-bottom: 4px; } /* ---------- agreement page ---------- */ .agreement-layout { display: grid; grid-template-columns: 260px 1fr; gap: 56px; align-items: start; } @media (max-width: 900px) { .agreement-layout { grid-template-columns: 1fr; } } .toc { position: sticky; top: 90px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; } @media (max-width: 900px) { .toc { position: static; } } .toc-title { font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 10px; } .toc ol { margin: 0; padding-left: 1.2em; font-size: 0.92rem; } .toc li { margin-bottom: 8px; } .toc a { text-decoration: none; color: var(--ledger); } .toc a:hover { color: var(--accent); } .agreement-body section { margin-bottom: 36px; } .agreement-body h2 { font-size: 1.2rem; border-bottom: 1px solid var(--line); padding-bottom: 10px; } .agreement-body ul, .agreement-body ol.plain { padding-left: 1.3em; } .agreement-body ol.plain { list-style: decimal; } .tbd { background: rgba(201, 154, 62, 0.28); border-radius: 2px; padding: 0 0.25em; font-style: normal; } .doc-banner { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; font-family: 'IBM Plex Mono', monospace; font-size: 0.88rem; color: var(--muted); margin-bottom: 32px; } .doc-banner-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .doc-downloads { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; } .doc-downloads .downloads-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 2px; } .doc-downloads a { font-size: 0.82rem; color: var(--accent); text-decoration: none; white-space: nowrap; } .doc-downloads a:hover { color: var(--accent-hover); text-decoration: underline; } .doc-jumpnav { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: 'IBM Plex Mono', monospace; font-size: 0.88rem; margin: 18px 0 28px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .doc-jumpnav a { text-decoration: none; margin-right: 20px; } .doc-jumpnav a:hover { text-decoration: underline; } .doc-divider { margin: 72px 0 0; padding-top: 56px; border-top: 3px double var(--line); } /* ---------- contact page ---------- */ .checklist { list-style: none; padding: 0; margin: 20px 0 32px; } .checklist li { padding: 10px 0 10px 30px; position: relative; border-bottom: 1px dotted var(--line); } .checklist li:before { content: ""; position: absolute; left: 0; top: 14px; width: 14px; height: 14px; border: 2px solid var(--accent); border-radius: 2px; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 12px; } @media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } } .contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; } .contact-card dt { font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 16px; } .contact-card dt:first-child { margin-top: 0; } .contact-card dd { margin: 4px 0 0; font-weight: 500; } /* ---------- footer ---------- */ .site-footer { background: var(--ink); color: var(--muted-on-ink); padding: 48px 0 0; margin-top: 80px; } .footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--line-ink); } .footer-inner a { color: var(--muted-on-ink); } .footer-inner a:hover { color: #fff; } .logo-footer { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: #fff; margin-bottom: 8px; } .footer-links { display: flex; flex-direction: column; gap: 8px; } .footer-bottom { padding: 18px 0; font-size: 0.85rem; font-family: 'IBM Plex Mono', monospace; } /* ---------- order form ---------- */ .order-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; max-width: 640px; } .form-row { margin-bottom: 22px; } .form-row label, .form-row legend { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; font-weight: 600; color: var(--heading); margin-bottom: 6px; padding: 0; } .form-row .hint { font-size: 0.85rem; color: var(--muted); margin: 4px 0 0; } .form-row input[type="text"], .form-row input[type="email"], .form-row input[type="tel"], .form-row select, .form-row textarea { width: 100%; font-family: 'IBM Plex Sans', sans-serif; font-size: 1rem; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--input-bg); color: var(--ledger); } .form-row textarea { resize: vertical; min-height: 90px; } .form-row input:focus-visible, .form-row select:focus-visible, .form-row textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); } .service-picker { border: none; padding: 0; min-width: 0; } .service-picker .legend-note { font-weight: 400; color: var(--muted); } .service-list { border: 1px solid var(--line); border-radius: var(--radius); background: var(--input-bg); } .service-option { display: flex !important; align-items: center; gap: 12px; padding: 10px 14px; margin: 0 !important; border-bottom: 1px dotted var(--line); font-family: 'IBM Plex Sans', sans-serif !important; font-size: 0.98rem !important; font-weight: 400 !important; color: var(--ledger) !important; cursor: pointer; } .service-option:last-child { border-bottom: none; } .service-option:hover { background: var(--surface); } .service-option input { flex-shrink: 0; width: 16px; height: 16px; margin: 0; accent-color: var(--copper); } .service-option .service-name { flex: 1; } .service-option .service-price { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--accent); white-space: nowrap; } .service-option:has(input:checked) { background: var(--surface); } .service-option:has(input:checked) .service-name { color: var(--heading); font-weight: 600; } .service-option .unavailable-note { display: none; margin-left: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; color: var(--muted); } .service-option.is-unavailable { opacity: 0.45; cursor: not-allowed; } .service-option.is-unavailable:hover { background: transparent; } .service-option.is-unavailable input { cursor: not-allowed; } .service-option.is-unavailable .service-name { text-decoration: line-through; } .service-option.is-unavailable .unavailable-note { display: inline; } /* Phone input with a live "(xxx) xxx-xxxx" mask behind it. The ghost repeats the typed characters invisibly so the remaining x's line up exactly. */ .phone-field { position: relative; background: var(--input-bg); border-radius: var(--radius); } .phone-field .phone-ghost { position: absolute; inset: 0; padding: 10px 12px; border: 1px solid transparent; font-family: 'IBM Plex Sans', sans-serif; font-size: 1rem; line-height: normal; white-space: pre; overflow: hidden; pointer-events: none; display: flex; align-items: center; } .phone-field .phone-ghost-typed { color: transparent; } .phone-field .phone-ghost-rest { color: var(--muted); opacity: 0.7; } .form-row .phone-field input[type="tel"] { position: relative; background: transparent; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .price-count { color: var(--muted); font-size: 0.85rem; margin-left: 6px; } .two-field { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 560px) { .two-field { grid-template-columns: 1fr; } } .price-line { display: flex; justify-content: space-between; align-items: baseline; font-family: 'IBM Plex Mono', monospace; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--radius); padding: 12px 16px; margin-top: 10px; } .price-line .amount { font-weight: 700; font-size: 1.15rem; color: var(--accent); } .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--muted); font-weight: 400; font-family: 'IBM Plex Sans', sans-serif; } .consent input { margin-top: 4px; flex-shrink: 0; width: 16px; height: 16px; } .form-status { margin-top: 6px; font-size: 0.9rem; font-family: 'IBM Plex Mono', monospace; } .form-status.error { color: var(--error); } .form-status.loading { color: var(--muted); } .order-submit { width: 100%; text-align: center; font-size: 1rem; padding: 1em; border: none; cursor: pointer; } .order-submit:disabled { opacity: 0.6; cursor: default; } /* ---------- confirmation page ---------- */ .confirm-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brass); border-radius: var(--radius); padding: 32px; max-width: 560px; } /* ---------- backup guide ---------- */ .guide-method { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; margin-bottom: 56px; } @media (max-width: 780px) { .guide-method { grid-template-columns: 1fr; } } .guide-illustration { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; align-items: center; justify-content: center; } .guide-illustration svg { max-width: 100%; height: auto; } .guide-method .steps { margin-top: 0; }