/* ============================================================ Crafted in Essex — one stylesheet for the whole site. Light theme by default; the live-view pages opt into dark by adding class="dark" to . ============================================================ */ :root{ --ink:#14181d; --ink-soft:#5a6572; --paper:#faf8f5; --paper-2:#f1ede7; --line:#e2dcd3; --panel:#ffffff; --accent:#c0532b; /* filament orange */ --accent-dark:#9d4222; --accent-wash:#fdeee7; --green:#2f6d4f; --green-wash:#e8f3ed; --red:#a8321f; --red-wash:#fdecea; --radius:10px; --max:1080px; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --serif:Georgia,"Times New Roman",serif; } body.dark{ --ink:#e8ecf1; --ink-soft:#8b96a3; --paper:#0d1116; --paper-2:#161c23; --line:#252d36; --panel:#161c23; --green:#3fa87a; --green-wash:#16301f; --red:#e07a6a; --red-wash:#33191a; --accent-wash:#2a1710; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--serif); background:var(--paper); color:var(--ink); line-height:1.65; -webkit-font-smoothing:antialiased; min-height:100vh; } body.dark, body.app{font-family:var(--sans)} .wrap{max-width:var(--max);margin:0 auto;padding:0 24px} .wrap-sm{max-width:620px;margin:0 auto;padding:0 24px} h1,h2,h3,h4,.ui{font-family:var(--sans)} h1{font-size:2rem;letter-spacing:-.025em} h2{font-size:1.9rem;letter-spacing:-.02em;margin-bottom:.5rem} h3{font-size:1.05rem;letter-spacing:-.01em} section{padding:76px 0;border-bottom:1px solid var(--line)} .eyebrow{ font-family:var(--sans);font-size:.72rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase; color:var(--accent);margin-bottom:.6rem; } .lede{font-size:1.12rem;color:var(--ink-soft);max-width:60ch} .muted{color:var(--ink-soft)} /* ---------------- header ---------------- */ header{ position:sticky;top:0;z-index:50; background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line); } .nav{display:flex;align-items:center;justify-content:space-between;height:62px} .logo{ font-family:var(--sans);font-weight:800;letter-spacing:-.02em;font-size:1.05rem; text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:9px; } .logo .mark{ width:22px;height:22px;border-radius:5px;flex:none; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); } .nav ul{display:flex;gap:24px;list-style:none;align-items:center} .nav a{font-family:var(--sans);font-size:.88rem;text-decoration:none;color:var(--ink-soft);font-weight:500} .nav a:hover{color:var(--ink)} .nav-live{color:var(--ink)!important;font-weight:600!important} @media(max-width:760px){ .nav ul{gap:14px} .nav ul li.hide-sm{display:none} } .live-dot{ display:inline-block;width:7px;height:7px;border-radius:50%; background:#e0392b;margin-right:6px;animation:pulse 1.8s ease-in-out infinite; } .live-dot.off{background:#8b96a3;animation:none} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}} /* ---------------- buttons ---------------- */ .btn{ font-family:var(--sans);display:inline-block;padding:13px 24px; border-radius:var(--radius);text-decoration:none;font-weight:600;font-size:.94rem; border:1px solid transparent;cursor:pointer; transition:transform .12s ease,background .12s ease; } .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.55;cursor:default} .btn-primary{background:var(--accent);color:#fff} .btn-primary:hover:not(:disabled){background:var(--accent-dark)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{background:var(--paper-2)} .btn-sm{padding:8px 16px;font-size:.84rem;border-radius:8px} .btn-block{width:100%;text-align:center} /* ---------------- forms ---------------- */ form.card-form{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px} .field{margin-bottom:16px} label{display:block;font-family:var(--sans);font-size:.8rem;font-weight:600;margin-bottom:6px} input,textarea,select{ width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:8px; font-family:var(--sans);font-size:.94rem;background:var(--paper);color:var(--ink); } input:focus,textarea:focus,select:focus{ outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(192,83,43,.12); } textarea{min-height:110px;resize:vertical} .hint{font-size:.78rem;color:var(--ink-soft);margin-top:7px} .hp{position:absolute;left:-9999px} /* honeypot */ .msg{display:none;margin-top:14px;padding:12px 14px;border-radius:8px;font-family:var(--sans);font-size:.88rem} .msg.ok{display:block;background:var(--green-wash);color:var(--green);border:1px solid color-mix(in srgb,var(--green) 30%,transparent)} .msg.err{display:block;background:var(--red-wash);color:var(--red);border:1px solid color-mix(in srgb,var(--red) 30%,transparent)} /* ---------------- cards / grid ---------------- */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px} @media(max-width:880px){.grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.grid{grid-template-columns:1fr}} .card{ background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;display:flex;flex-direction:column; transition:box-shadow .16s ease,transform .16s ease; } .card:hover{box-shadow:0 10px 28px -14px rgba(0,0,0,.22);transform:translateY(-2px)} .card .ph{ aspect-ratio:4/3;background:var(--paper-2);display:flex;align-items:center;justify-content:center; color:#b3aa9d;font-family:var(--sans);font-size:.78rem;border-bottom:1px solid var(--line); } .card .ph img{width:100%;height:100%;object-fit:cover} .card .body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1} .card h3{margin-bottom:5px} .card p{font-size:.88rem;color:var(--ink-soft);flex:1;margin-bottom:14px} .card .buy{display:flex;align-items:center;justify-content:space-between;gap:10px} .price{font-family:var(--sans);font-weight:700;font-size:1.02rem} .tag{ display:inline-block;font-family:var(--sans);font-size:.66rem;font-weight:700; letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:99px; margin-bottom:9px;background:var(--paper-2);color:var(--ink-soft);align-self:flex-start; } .tag.new{background:var(--accent-wash);color:var(--accent-dark)} .tag.green{background:var(--green-wash);color:var(--green)} /* status pills */ .pill{ display:inline-block;font-family:var(--sans);font-size:.7rem;font-weight:700; letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:99px; } .pill.new{background:var(--paper-2);color:var(--ink-soft)} .pill.quoted{background:var(--accent-wash);color:var(--accent-dark)} .pill.printing{background:#fdecea;color:#c0392b} .pill.done{background:var(--green-wash);color:var(--green)} /* ---------------- misc ---------------- */ .strip{background:var(--paper-2);padding:26px 0;border-bottom:1px solid var(--line)} .strip-in{display:flex;gap:36px;flex-wrap:wrap;justify-content:center;font-family:var(--sans);font-size:.85rem;color:var(--ink-soft)} .strip-in span{display:flex;align-items:center;gap:8px} .strip-in .tick{color:var(--green);font-weight:700} .two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} @media(max-width:880px){.two{grid-template-columns:1fr;gap:36px}} .note{ margin-top:24px;padding:16px 18px;background:var(--panel); border:1px solid var(--line);border-left:3px solid var(--accent); border-radius:6px;font-family:var(--sans);font-size:.9rem;color:var(--ink-soft); } .note b{color:var(--ink)} footer{padding:48px 0;font-family:var(--sans);font-size:.85rem;color:var(--ink-soft)} .foot-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center} footer a{color:var(--ink-soft);text-decoration:none;margin-left:18px} footer a:hover{color:var(--ink)} .green-note{display:inline-flex;align-items:center;gap:7px;color:var(--green);font-weight:600}