/* ══════════════════════════════════════════════════════════════════════ EditOffice — Institutional Design System "The office that runs paid edits." Ink on paper. Filing systems, forms, records, stamps, dispatch notices. Opt in per page with and this stylesheet. ══════════════════════════════════════════════════════════════════════ */ /* ── Fonts ── Blurcut — display / headings (self-hosted brand face) Archivo — display fallback (heavy industrial grotesque) Inter — body copy (utilitarian, highly readable) IBM Plex Mono — metadata, codes, labels, status, timestamps, file numbers */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap'); @font-face { font-family: 'Blurcut'; src: url('fonts/Blurcut-Regular.otf') format('opentype'); font-weight: 400 900; font-style: normal; font-display: swap; } /* ── Tokens: PAPER surface (default) ── */ .eo, :root { --paper: #E9E3D6; /* base paper */ --paper-hi: #F1ECE1; /* raised paper (fields, cards) */ --paper-lo: #DDD5C4; /* recessed paper (bands, fills) */ --ink: #17130C; /* near-black warm ink */ --bg: var(--paper); --fg: var(--ink); --rule: rgba(23,19,12,0.22); --rule-2: rgba(23,19,12,0.44); --mut: rgba(23,19,12,0.66); --dim: rgba(23,19,12,0.44); --field: var(--paper-hi); /* Functional stamp inks — used ONLY for status / markings */ --red: #A6322A; --red-bg: rgba(166,50,42,0.10); --green: #2F6A46; --green-bg: rgba(47,106,70,0.10); --amber: #8A6410; --amber-bg: rgba(138,100,16,0.11); --blue: #2A4C6E; --blue-bg: rgba(42,76,110,0.10); --accent: var(--red); --f-disp: 'Blurcut', 'Archivo', system-ui, sans-serif; --f-body: 'Inter', system-ui, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace; --maxw: 1160px; --gut: clamp(20px, 5vw, 56px); --wm-ratio: 5.2632; /* wordmark 2600x494 */ --ms-ratio: 1.2594; /* mascot 1500x1191 */ } /* ── INK surface — apply .eo-ink to any section/container to flip to black ── */ .eo-ink { --bg: #100C07; --fg: #ECE6DA; --paper-hi:#1B1610; --paper-lo:#1B1610; --rule: rgba(236,230,218,0.16); --rule-2: rgba(236,230,218,0.34); --mut: rgba(236,230,218,0.62); --dim: rgba(236,230,218,0.38); --field: #1B1610; --red: #D6675C; --red-bg: rgba(214,103,92,0.14); --green: #6FB98C; --green-bg: rgba(111,185,140,0.14); --amber: #D3A14A; --amber-bg: rgba(211,161,74,0.14); --blue: #7FA8CE; --blue-bg: rgba(127,168,206,0.14); background: var(--bg); color: var(--fg); } /* ── Reset / base ── */ .eo *, .eo *::before, .eo *::after { box-sizing: border-box; margin: 0; padding: 0; } .eo { background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } .eo a:not(.eo-btn) { color: inherit; text-decoration: none; } .eo a.eo-btn { text-decoration: none; } .eo img { max-width: 100%; display: block; } .eo ::selection { background: var(--ink); color: var(--paper); } .eo-ink ::selection { background: var(--paper); color: var(--ink); } .eo :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .eo *, .eo *::before, .eo *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── Layout primitives ── */ .eo-wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); } .eo-rule { border-top: 1px solid var(--rule); } .eo-rule-2 { border-top: 2px solid var(--fg); } .eo-rows > * + * { border-top: 1px solid var(--rule); } /* Document margin — a ruled left margin like a form/ledger */ .eo-doc { border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); } /* ── Typography ── */ .eo-mono { font-family: var(--f-mono); } .eo-disp { font-family: var(--f-disp); font-weight: 800; letter-spacing: -0.02em; line-height: 0.98; } /* Institutional label — FILE NO., STATUS, RECEIVED … */ .eo-label { font-family: var(--f-mono); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); } .eo-label--fg { color: var(--fg); } .eo-mut { color: var(--mut); } .eo-dim { color: var(--dim); } /* Display headings */ .eo-h1 { font-family: var(--f-disp); font-weight: 900; letter-spacing: -0.03em; line-height: 0.94; font-size: clamp(2.4rem, 6vw, 4.6rem); } .eo-h2 { font-family: var(--f-disp); font-weight: 800; letter-spacing: -0.02em; line-height: 1.0; font-size: clamp(1.7rem, 3.6vw, 2.7rem); } .eo-h3 { font-family: var(--f-disp); font-weight: 700; letter-spacing: -0.01em; line-height: 1.08; font-size: clamp(1.15rem, 2vw, 1.5rem); } .eo-lead { color: var(--mut); font-size: 1.02rem; line-height: 1.65; max-width: 56ch; } .eo-body { color: var(--mut); font-size: 0.95rem; line-height: 1.7; } .eo-num { font-family: var(--f-mono); font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } /* Numbered section header — §01 / RECORD */ .eo-sec { display: flex; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); } .eo-sec__no { font-family: var(--f-mono); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.12em; color: var(--accent); white-space: nowrap; } .eo-sec__t { font-family: var(--f-mono); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); } /* ── Wordmark (brand artwork, tinted via mask → follows text color) ── */ .eo-wordmark { display: inline-block; height: 0.82em; width: calc(0.82em * var(--wm-ratio)); background: currentColor; vertical-align: baseline; -webkit-mask: url('brand/wordmark-ink.png') left center / contain no-repeat; mask: url('brand/wordmark-ink.png') left center / contain no-repeat; } .eo-wordmark--reg { display:inline-block; } .eo-wordmark--reg::after { content: '®'; font-family: var(--f-body); font-weight: 400; font-size: 0.34em; vertical-align: super; margin-left: 0.15em; color: var(--mut); } /* Oversized masthead moment */ .eo-wordmark-hero { display: block; width: 100%; aspect-ratio: var(--wm-ratio); background: currentColor; -webkit-mask: url('brand/wordmark-ink.png') center / contain no-repeat; mask: url('brand/wordmark-ink.png') center / contain no-repeat; } /* ── Mascot (institutional clerk) ── */ .eo-mascot { display: inline-block; aspect-ratio: var(--ms-ratio); height: auto; background: currentColor; -webkit-mask: url('brand/mascot-ink.png') center / contain no-repeat; mask: url('brand/mascot-ink.png') center / contain no-repeat; } /* Prefer the true ink drawing on paper for fidelity */ .eo-mascot-img { display: block; } /* ── Masthead / navigation ── */ .eo-mast { border-bottom: 1px solid var(--rule); background: var(--bg); } .eo-mast__row { max-width: var(--maxw); margin: 0 auto; padding: 14px var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .eo-mast__brand { display: flex; align-items: center; gap: 14px; } .eo-mast__code { font-family: var(--f-mono); font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); } .eo-nav { display: flex; align-items: center; gap: 26px; } .eo-nav a { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); transition: color 0.14s; } .eo-nav a:hover { color: var(--fg); } @media (max-width: 820px) { .eo-nav--collapse { display: none; } } /* ── Buttons: rectangular office controls ── */ .eo-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 13px 22px; border: 1px solid var(--fg); background: transparent; color: var(--fg); cursor: pointer; border-radius: 0; transition: background 0.14s, color 0.14s, transform 0.14s; line-height: 1; } .eo-btn:hover { background: var(--fg); color: var(--bg); } .eo-btn:active { transform: translateY(1px); } .eo-btn--solid { background: var(--fg); color: var(--bg); } .eo-btn--solid:hover { background: transparent; color: var(--fg); } .eo-btn--sm { padding: 9px 15px; font-size: 0.6rem; } .eo-btn--red { border-color: var(--red); color: var(--red); } .eo-btn--red:hover { background: var(--red); color: var(--paper-hi); } .eo-btn--green { border-color: var(--green); color: var(--green); } .eo-btn--green:hover { background: var(--green); color: var(--paper-hi); } .eo-btn:disabled { opacity: 0.4; cursor: default; } .eo-btn:disabled:hover { background: transparent; color: var(--fg); } .eo-btn .eo-ar { transition: transform 0.14s; } .eo-btn:hover .eo-ar { transform: translateX(3px); } /* Underlined inline action */ .eo-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); border-bottom: 1px solid var(--rule-2); padding-bottom: 3px; transition: border-color 0.14s; } .eo-link:hover { border-color: var(--fg); } .eo-link .eo-ar { transition: transform 0.14s; } .eo-link:hover .eo-ar { transform: translateX(3px); } /* ── Status stamps ── */ .eo-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-weight: 500; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 9px; border: 1px solid; border-radius: 0; white-space: nowrap; line-height: 1.5; } .eo-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .eo-status--received, .eo-status--review, .eo-status--pending { color: var(--amber); border-color: var(--amber); background: var(--amber-bg); } .eo-status--approved,.eo-status--accepted,.eo-status--active,.eo-status--verified { color: var(--green); border-color: var(--green); background: var(--green-bg); } .eo-status--declined,.eo-status--rejected { color: var(--red); border-color: var(--red); background: var(--red-bg); } .eo-status--dispatched,.eo-status--internal { color: var(--blue); border-color: var(--blue); background: var(--blue-bg); } .eo-status--private,.eo-status--closed,.eo-status--inactive { color: var(--dim); border-color: var(--rule-2); background: transparent; } /* Rubber stamp — big diagonal mark (APPROVED / PRIVATE / DISPATCHED) */ .eo-rubber { display: inline-block; font-family: var(--f-disp); font-weight: 800; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); border: 2px solid var(--accent); padding: 5px 12px; transform: rotate(-5deg); border-radius: 2px; opacity: 0.92; } /* ── File card / record (squared, ruled — not a floating pill card) ── */ .eo-file { border: 1px solid var(--rule-2); background: var(--bg); } .eo-file__band { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 11px 18px; border-bottom: 1px solid var(--rule-2); background: var(--paper-lo); } .eo-file__band .eo-label { color: var(--mut); } .eo-file__body { padding: 22px 18px; } .eo-file__sec { padding: 18px; border-top: 1px solid var(--rule); } /* Key/value record row */ .eo-kv { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: baseline; padding: 9px 0; } .eo-kv + .eo-kv { border-top: 1px solid var(--rule); } .eo-kv__k { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); } .eo-kv__v { font-size: 0.9rem; color: var(--fg); } @media (max-width: 560px) { .eo-kv { grid-template-columns: 1fr; gap: 3px; } } /* Notice / dispatch bar */ .eo-notice { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--rule-2); border-left: 3px solid var(--accent); background: var(--paper-hi); padding: 14px 16px; } .eo-notice__tag { font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); white-space: nowrap; padding-top: 2px; } .eo-notice__body { font-size: 0.9rem; color: var(--fg); line-height: 1.6; } /* ── Form controls ── */ .eo-field { width: 100%; background: var(--field); border: 1px solid var(--rule-2); border-radius: 0; padding: 12px 14px; color: var(--fg); font-family: var(--f-body); font-size: 0.92rem; outline: none; transition: border-color 0.14s; } .eo-field:focus { border-color: var(--fg); } .eo-field::placeholder { color: var(--dim); } .eo-formrow { display: block; } .eo-formrow > .eo-label { display: block; margin-bottom: 7px; } /* Boxed region — office-form fieldset */ .eo-box { border: 1px solid var(--rule-2); background: var(--bg); padding: clamp(20px, 4vw, 34px); } .eo-box--hi { background: var(--paper-hi); } /* Data table — ledger */ .eo-table { width: 100%; border-collapse: collapse; } .eo-table th { font-family: var(--f-mono); font-weight: 500; font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); text-align: left; padding: 0 14px 12px 0; white-space: nowrap; } .eo-table td { padding: 13px 14px 13px 0; font-size: 0.86rem; vertical-align: top; border-top: 1px solid var(--rule); color: var(--fg); } .eo-table tr:last-child td { border-bottom: 1px solid var(--rule); } /* Grid helpers */ .eo-grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .eo-grid > * { background: var(--bg); padding: clamp(20px, 3vw, 32px); } .eo-grid-3 { grid-template-columns: repeat(3, 1fr); } .eo-grid-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 820px) { .eo-grid-3 { grid-template-columns: 1fr; } .eo-grid-2 { grid-template-columns: 1fr; } } /* Toast (kept minimal, squared) */ .eo-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(8px); background: var(--ink); color: var(--paper); border: 1px solid var(--rule-2); font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.06em; padding: 11px 16px; opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s; z-index: 300; } .eo-toast.show { opacity: 1; transform: translateX(-50%); } /* ── Motion: mechanical stamp settle ── */ @keyframes eo-stamp { 0% { transform: scale(1.24) rotate(-5deg); opacity: 0; } 55% { transform: scale(0.98) rotate(0.5deg); opacity: 1; } 100% { transform: none; opacity: 1; } } .eo-stamp-in { animation: eo-stamp 0.3s ease-out both; } @keyframes eo-drawer { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } } .eo-drawer-in { animation: eo-drawer 0.32s cubic-bezier(.2,.7,.2,1) both; } /* Utility */ .eo-stack > * + * { margin-top: var(--s, 16px); } .eo-hide { display: none !important; } /* ══════════════════════════════════════════════════════════════════════ Terminal layer — internal desks (Campaign Desk, Review Desk, account…) An administrative records terminal: monospace, command echoes, prompt + caret, boxed output, TUI status bar. Functional color only. No CRT/scanlines. Use inside an .eo-ink context. ══════════════════════════════════════════════════════════════════════ */ .eo-term { --term-bg:#0c0a06; --term-bar:#151009; --phos:var(--amber); font-family: var(--f-mono); } .eo-termwin { border:1px solid var(--rule-2); background:var(--term-bg); } .eo-termbar { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--rule-2); background:var(--term-bar); } .eo-termbar__dot { width:9px; height:9px; border-radius:50%; border:1px solid var(--rule-2); background:var(--phos); box-shadow:0 0 0 2px rgba(0,0,0,0.2); } .eo-termbar__path { font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.04em; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .eo-termbar__right { margin-left:auto; font-family:var(--f-mono); font-size:0.56rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--dim); white-space:nowrap; } .eo-termbody { padding:clamp(18px,3vw,28px); } .eo-termbody--grid { background-image:linear-gradient(rgba(236,230,218,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(236,230,218,0.045) 1px, transparent 1px); background-size:30px 30px; background-position:-1px -1px; } /* echoed command line: "$ eo desk --open" */ .eo-cmd { font-family:var(--f-mono); font-size:0.82rem; color:var(--mut); letter-spacing:0.01em; } .eo-cmd::before { content:'$\00a0'; color:var(--phos); } .eo-cmd .k { color:var(--fg); } /* output prompt line: "▸ …" */ .eo-out { font-family:var(--f-mono); } .eo-prompt { display:flex; gap:9px; } .eo-prompt::before { content:'▸'; color:var(--phos); } .eo-caret { display:inline-block; width:0.55em; height:1.05em; background:var(--fg); vertical-align:-0.16em; margin-left:2px; animation:eo-blink 1.05s steps(1) infinite; } @keyframes eo-blink { 50% { opacity:0; } } @media (prefers-reduced-motion: reduce) { .eo-caret { animation:none; } } .eo-term-h { font-family:var(--f-mono); font-weight:600; letter-spacing:0.01em; line-height:1.1; font-size:clamp(1.5rem,3.4vw,2.1rem); color:var(--fg); } .eo-term-h .sub { color:var(--phos); } /* status bar (TUI footer) */ .eo-statusbar { display:flex; gap:8px 22px; flex-wrap:wrap; align-items:center; padding:10px 14px; border-top:1px solid var(--rule-2); background:var(--term-bar); font-family:var(--f-mono); font-size:0.56rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--dim); } .eo-statusbar b { color:var(--mut); font-weight:500; } .eo-statusbar .sep { color:var(--rule-2); } /* boxed terminal record / output block */ .eo-termrec { border:1px solid var(--rule-2); padding:16px 18px; background:rgba(255,255,255,0.015); } .eo-termrec--dashed { border-style:dashed; text-align:center; padding:34px 22px; } .eo-kbd { display:inline-block; font-family:var(--f-mono); font-size:0.58rem; letter-spacing:0.04em; color:var(--mut); border:1px solid var(--rule-2); border-radius:2px; padding:2px 6px; line-height:1.4; }