/* Hathorn Roofing — black, white and hot pink. * * Their brand colors, not ours. Ryan on the 2026-08-28 call: "as far as the colour * scheme goes, that is not the company colours, the orange and the black." Heather, * same call and by text on 8/27: "black and white with hot pink accents." Maria's * 8/27 list said it a third time. So the accent is hot pink and the paper is true * white, with every warm cream and brown-black taken out to neutral. * * Bright on purpose. Roofers read this standing on a driveway in Louisiana sun, so * the whole system is high contrast ink on white with hard 2px rules and no blur. * Every panel is a printed form: square corners, a flat offset shadow, a shingle * course band where a page changes subject. Numbers are always mono, always big. * * --seal and --rose stay green and red. They are not brand chrome, they are the CRM * saying delivered or failed, and a pipeline that reports both in the same pink is a * pipeline nobody can read at a glance. */ /* Fonts are linked from each page's , not @import-ed here. An @import inside a * stylesheet is a chained request: the browser has to fetch this file, parse it, and * only then start on the fonts. In the both start at once. */ :root { --paper: #FFFFFF; --card: #FFFFFF; --ink: #0A0A0A; --ash: #5E5E5E; --line: #0A0A0A; --hair: #D7D7D7; --torch: #FF1F8C; --torch-dk: #C0006A; /* pink dark enough to read as a link on white */ --seal: #0C6B5B; --sky: #1668B0; --amber: #FF1F8C; /* stars and highlights follow the accent */ --rose: #A3261B; --shadow: 4px 4px 0 var(--ink); --shadow-sm: 3px 3px 0 var(--ink); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: 'Archivo', system-ui, sans-serif; font-size: 16px; -webkit-text-size-adjust: 100%; overflow-x: hidden; } /* paper grain, so a flat color never reads as flat color */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .11; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); } body > * { position: relative; z-index: 1; } h1, h2, h3, .display { font-family: 'Archivo Black', 'Archivo', sans-serif; font-weight: 400; letter-spacing: -.015em; line-height: 1.02; margin: 0; text-transform: uppercase; } .num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; } a { color: var(--torch-dk); } .eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--ash); } /* a course of shingles: the rule that separates one idea from the next */ .course { height: 10px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 13px); } .panel { background: var(--card); border: 2px solid var(--ink); box-shadow: var(--shadow); } /* ------------------------------------------------------------------ controls */ button, .btn { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; padding: 13px 20px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .08s, box-shadow .08s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; border-radius: 0; } button:active, .btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); } button:disabled { opacity: .45; cursor: default; transform: none; } .btn-go { background: var(--torch); color: #fff; } .btn-seal { background: var(--seal); color: #fff; } .btn-ghost { box-shadow: none; background: transparent; } .btn-sm { padding: 8px 12px; font-size: 12px; box-shadow: 2px 2px 0 var(--ink); } .btn-block { width: 100%; } input, textarea, select { font-family: 'Archivo', sans-serif; font-size: 16px; color: var(--ink); background: var(--card); border: 2px solid var(--ink); padding: 13px 14px; width: 100%; border-radius: 0; outline: none; } input:focus, textarea:focus, select:focus { box-shadow: inset 0 -4px 0 var(--torch); } label.f { display: block; margin-bottom: 14px; } label.f > span { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--ash); margin-bottom: 5px; } .row { display: flex; gap: 10px; flex-wrap: wrap; } .row > * { flex: 1 1 140px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 2px solid var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--card); } .chip-new { background: var(--torch); color: #fff; } .chip-contacted { background: var(--amber); color: var(--ink); } .chip-qualified { background: var(--sky); color: #fff; } .chip-estimated { background: #4C3B8F; color: #fff; } .chip-won { background: var(--seal); color: #fff; } .chip-lost { background: #9A9A9A; color: #fff; } /* ------------------------------------------------------------------ map */ .hrm { position: relative; overflow: hidden; background: #2b2b2b; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; } .hrm[data-mode="move"] { cursor: grab; } .hrm-tiles { position: absolute; inset: 0; } .hrm-tile { position: absolute; top: 0; left: 0; will-change: transform; image-rendering: auto; } .hrm-svg { position: absolute; inset: 0; pointer-events: none; } .hrm-poly { fill: rgba(22,104,176,.28); stroke: #6FE3FF; stroke-width: 3; stroke-linejoin: round; } .hrm-poly.on { fill: rgba(255,31,140,.26); stroke: #FF6FB4; } .hrm-line { fill: none; stroke: #FF6FB4; stroke-width: 3; stroke-dasharray: 7 5; } .hrm-vx { fill: #FFFFFF; stroke: var(--ink); stroke-width: 2.5; } .hrm-hud { position: absolute; inset: 0; pointer-events: none; } /* ------------------------------------------------------------------ shell */ .wrap { max-width: 1120px; margin: 0 auto; padding: 0 18px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } @media (prefers-reduced-motion: no-preference) { .rise { animation: rise .6s cubic-bezier(.2,.8,.2,1) backwards; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } } }