/* ================================================================= MkrOps site family — shared design system One palette, one type scale, one set of primitives. Every mkrops.* marketing site links this first, then its own page.css for layout. Lineage: extracted from the openbun.org cockpit Poiesis built (sites/openbun.org/style.css). Same ink, same accents, same breathing whitespace — so the four read as ONE family. stdlib only · no build · no framework · no webfont fetch. ================================================================= */ :root { /* ink — deep, slightly warm, never flat black */ --ink-900: #0b0d12; --ink-850: #0f1218; --ink-800: #131722; --ink-750: #181d29; --ink-700: #1d2330; --line: #262d3c; --line-soft: #1c2230; /* text */ --fg: #e8ebf2; --fg-soft: #aab2c5; --fg-mute: #6b7488; --fg-faint:#454d5f; /* the engine palette — used sparingly as accents. amber=commerce warmth · green=ok/directives · teal=protocol · blue=telemetry/bridge · violet=guidance/agentic */ --amber: #f5b14c; --amber-bright: #ffc266; --amber-deep: #c8893a; --amber-glow: rgba(245, 177, 76, 0.14); --green: #57d9a3; --teal: #5fb3a3; --blue: #6c8cd5; --violet: #b890e0; --red: #d96c6c; /* per-surface key accent — each site picks ONE as its --accent. Set by the site's body[data-surface] rule below. */ --accent: var(--amber); --accent-bright:var(--amber-bright); --accent-deep: var(--amber-deep); --accent-glow: var(--amber-glow); /* state dots */ --ok: #57d9a3; --busy: #f5b14c; --idle: #586079; --radius: 14px; --radius-sm: 9px; --radius-lg: 20px; --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --shadow-card: 0 30px 80px -30px rgba(0,0,0,0.75), 0 1px 0 rgba(255,255,255,0.03) inset; --shadow-soft: 0 18px 50px -28px rgba(0,0,0,0.7); --maxw: 1080px; } /* per-surface accent keying. A site sets and the whole accent system re-tints — but the ink/type stay identical, which is what makes them feel like ONE family wearing different ties. */ body[data-surface="com"] { --accent: var(--amber); --accent-bright: var(--amber-bright); --accent-deep: var(--amber-deep); --accent-glow: var(--amber-glow); } body[data-surface="io"] { --accent: var(--teal); --accent-bright: #7fcdbd; --accent-deep: #3f8c7e; --accent-glow: rgba(95,179,163,0.14); } body[data-surface="ai"] { --accent: var(--violet); --accent-bright: #cda9ec; --accent-deep: #8a63b8; --accent-glow: rgba(184,144,224,0.15); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; background: var(--ink-900); color: var(--fg); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.6; } a { color: var(--accent-bright); text-decoration: none; } a:hover { color: var(--fg); } /* --------------------------------------------------------------- LAYOUT PRIMITIVES --------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; } .section { padding: 5.5rem 0; } .section--tight { padding: 3.5rem 0; } .section__eyebrow { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.9rem; } .section__title { margin: 0 0 1rem; font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 680; letter-spacing: -0.025em; line-height: 1.1; color: var(--fg); } .section__lede { margin: 0; max-width: 60ch; font-size: 1.06rem; color: var(--fg-soft); } /* --------------------------------------------------------------- TOP NAV — shared across the family. The brand block makes the .com/.io/.ai siblings explicit (active surface lit). --------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1.4rem; padding: 0.85rem 1.5rem; background: rgba(11,13,18,0.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .nav__brand { display: flex; align-items: baseline; gap: 0.55rem; } .nav__mark { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(160deg, var(--accent-bright), var(--accent-deep)); display: inline-grid; place-items: center; font-family: var(--mono); font-size: 0.7rem; font-weight: 700; color: #14100a; align-self: center; } .nav__name { font-weight: 680; letter-spacing: -0.02em; font-size: 1.02rem; } .nav__dot { color: var(--fg-mute); font-weight: 500; } .nav__spacer { flex: 1; } .nav__links { display: flex; align-items: center; gap: 1.1rem; } .nav__link { color: var(--fg-soft); font-size: 0.88rem; } .nav__link:hover { color: var(--fg); } /* the family switcher — .com · .io · .ai siblings */ .siblings { display: flex; align-items: center; gap: 0.3rem; font-family: var(--mono); font-size: 0.78rem; } .siblings a { color: var(--fg-mute); padding: 0.15rem 0.4rem; border-radius: 5px; } .siblings a:hover { color: var(--fg); background: var(--ink-800); } .siblings a.is-active { color: var(--accent-bright); background: var(--accent-glow); } .siblings .sep { color: var(--fg-faint); } /* --------------------------------------------------------------- HERO --------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; padding: 6rem 0 4.5rem; background: radial-gradient(120% 70% at 50% -10%, var(--accent-glow), transparent 58%), radial-gradient(80% 60% at 88% 0%, rgba(108,140,213,0.06), transparent 60%); } .hero__engine { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-faint); margin: 0 0 1.1rem; } .hero__title { margin: 0 0 1.2rem; max-width: 18ch; font-size: clamp(2.3rem, 6vw, 4rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; } .hero__title .accent { color: var(--accent); } .hero__lede { margin: 0 0 2rem; max-width: 56ch; font-size: 1.15rem; color: var(--fg-soft); } .hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; } /* --------------------------------------------------------------- BUTTONS --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.78rem 1.3rem; border-radius: var(--radius-sm); border: none; font-family: var(--sans); font-size: 0.92rem; font-weight: 650; letter-spacing: -0.01em; cursor: pointer; transition: transform .12s ease, filter .18s ease, box-shadow .18s ease, border-color .15s, color .15s; } .btn--primary { background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep)); color: #16100a; box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--accent) 55%, transparent); } .btn--primary:hover { transform: translateY(-1px); filter: brightness(1.05); color: #16100a; } .btn--ghost { background: transparent; border: 1px solid var(--line); color: var(--fg-soft); } .btn--ghost:hover { border-color: var(--accent-deep); color: var(--fg); } .btn__arrow { transition: transform .18s ease; } .btn:hover .btn__arrow { transform: translateX(3px); } /* --------------------------------------------------------------- CARDS + GRID --------------------------------------------------------------- */ .grid { display: grid; gap: 1.1rem; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .card { background: linear-gradient(180deg, var(--ink-800), var(--ink-850)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.4rem 1.5rem; box-shadow: var(--shadow-soft); transition: border-color .16s ease, transform .16s ease; } .card:hover { border-color: var(--accent-deep); transform: translateY(-2px); } .card__icon { width: 34px; height: 34px; border-radius: 9px; margin-bottom: 0.9rem; display: grid; place-items: center; background: var(--accent-glow); color: var(--accent-bright); font-family: var(--mono); font-size: 0.92rem; border: 1px solid var(--line); } .card__title { margin: 0 0 0.4rem; font-size: 1.04rem; font-weight: 650; letter-spacing: -0.01em; } .card__body { margin: 0; font-size: 0.92rem; color: var(--fg-soft); } .card__meta { margin-top: 0.8rem; font-family: var(--mono); font-size: 0.72rem; color: var(--fg-mute); } /* a slim panel — for spec rows, status, lists */ .panel { background: var(--ink-850); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .panel__head { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--line-soft); font-size: 0.76rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-soft); } .panel__body { padding: 0.4rem 0; } .row { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--line-soft); font-size: 0.9rem; } .row:last-child { border-bottom: none; } .row__k { color: var(--fg-mute); font-family: var(--mono); font-size: 0.8rem; min-width: 0; } .row__v { color: var(--fg); margin-left: auto; font-family: var(--mono); font-size: 0.84rem; } /* --------------------------------------------------------------- PILLS · TAGS · DOTS · BADGES --------------------------------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.02em; padding: 0.24rem 0.62rem; border-radius: 999px; background: var(--accent-glow); color: var(--accent-bright); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .pill--ok { background: rgba(87,217,163,0.1); color: var(--green); border-color: rgba(87,217,163,0.25); } .pill--mute { background: var(--ink-800); color: var(--fg-mute); border-color: var(--line); } .tag { font-family: var(--mono); font-size: 0.68rem; padding: 0.1rem 0.42rem; border-radius: 5px; background: var(--ink-750); color: var(--fg-soft); border: 1px solid var(--line-soft); } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--idle); display: inline-block; flex: none; } .dot--ok { background: var(--green); box-shadow: 0 0 9px rgba(87,217,163,0.6); } .dot--busy { background: var(--amber); box-shadow: 0 0 9px rgba(245,177,76,0.6); } .dot--pulse { animation: dotpulse 2.4s ease-in-out infinite; } @keyframes dotpulse { 50% { opacity: 0.45; } } /* a "MOCK" honesty badge — used to label any non-live sample data so the mockup never lies about being live. Family rule: label mock data. */ .mock-badge { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); border: 1px solid var(--line); border-radius: 4px; padding: 0.05rem 0.34rem; vertical-align: middle; } /* --------------------------------------------------------------- TICKER — the day-engine strip, shared shape with the cockpit. Pure CSS marquee; rows are static HTML (no live data in a mockup). --------------------------------------------------------------- */ .ticker { display: flex; align-items: center; gap: 0.9rem; height: 40px; padding: 0 1.5rem; overflow: hidden; background: linear-gradient(90deg, var(--ink-800), var(--ink-850)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .ticker__lead { display: flex; align-items: center; gap: 0.5rem; flex: none; font-family: var(--mono); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.04em; padding-right: 0.9rem; border-right: 1px solid var(--line); } .ticker__viewport { flex: 1; overflow: hidden; position: relative; height: 100%; } .ticker__track { display: flex; align-items: center; gap: 2.6rem; height: 100%; white-space: nowrap; will-change: transform; animation: marquee 40s linear infinite; } .ticker:hover .ticker__track { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .tick { display: inline-flex; align-items: baseline; gap: 0.34rem; font-family: var(--mono); font-size: 0.78rem; color: var(--fg-soft); padding-left: 0.55rem; border-left: 2px solid transparent; } .tick__cat { text-transform: uppercase; font-size: 0.64rem; letter-spacing: 0.07em; color: var(--fg-mute); } .tick__dot { color: var(--fg-faint); margin: 0 0.06rem; } .tick__v { color: var(--fg); } .tick--commerce { border-left-color: var(--amber); } .tick--commerce .tick__cat { color: var(--amber); } .tick--telemetry { border-left-color: var(--blue); } .tick--telemetry .tick__cat { color: var(--blue); } .tick--protocol { border-left-color: var(--teal); } .tick--protocol .tick__cat { color: var(--teal); } .tick--ok { border-left-color: var(--green); } .tick--ok .tick__cat { color: var(--green); } .tick--guidance { border-left-color: var(--violet); } .tick--guidance .tick__cat { color: var(--violet); } /* --------------------------------------------------------------- FOOTER — shared family footer with the engine attribution. --------------------------------------------------------------- */ .foot { border-top: 1px solid var(--line); padding: 2.8rem 0 3.2rem; background: var(--ink-850); } .foot__grid { display: flex; flex-wrap: wrap; gap: 2.5rem 4rem; align-items: flex-start; } .foot__brand { max-width: 28ch; } .foot__name { font-weight: 680; letter-spacing: -0.02em; font-size: 1.05rem; } .foot__tag { margin: 0.5rem 0 0; color: var(--fg-mute); font-size: 0.88rem; } .foot__col { display: flex; flex-direction: column; gap: 0.5rem; } .foot__col h4 { margin: 0 0 0.3rem; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-mute); font-weight: 650; } .foot__col a, .foot__col span { color: var(--fg-soft); font-size: 0.88rem; } .foot__col a:hover { color: var(--fg); } .foot__legal { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: center; font-size: 0.78rem; color: var(--fg-faint); font-family: var(--mono); } .foot__engine { color: var(--fg-mute); } /* --------------------------------------------------------------- RESPONSIVE --------------------------------------------------------------- */ @media (max-width: 880px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .nav__links { display: none; } .section { padding: 4rem 0; } } @media (max-width: 560px) { .grid--3, .grid--4 { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ticker__track, .dot--pulse { animation: none; } }