/* ============================================================ INNOVENT MICROSITE — house design system ------------------------------------------------------------ One shared stylesheet for a whole microsite. No build step, no dependencies. Plain CSS custom properties + a component library (cards, chips, callouts, browser frames, journey, board, stats, tables, hero, footer). Tokens mirror the PostMoney / Innovent app design system (app/assets/tailwind/application/theme.css): semantic color names, the Innovent purple/blue brand, and DARK-default with a LIGHT mode. The page picks its theme via a data-theme attribute on ("dark" | "light"), set by a tiny inline head script and toggled by app.js (persisted to localStorage). Default dark. THEMING ------- The brand IS Innovent. To reskin for another brand, override the brand color tokens (--color-primary / --color-secondary) in BOTH the :root (light) and [data-theme="dark"] blocks. Everything else (glows, shadows, status backgrounds) derives from those via color-mix, so a brand swap stays coherent across both themes. Build agents: reuse these tokens and classes. Do not redefine shared classes; append clearly-commented, page-scoped rules only if a layout truly needs something the library lacks. (color-mix() and the OKLCH-derived palette need a 2023+ browser, which is what these static sites are opened in.) ============================================================ */ :root { /* ---------- INNOVENT BRAND TOKENS — LIGHT (default-light values) ---------- */ --color-primary: #9779f0; /* Innovent purple */ --color-secondary: #435dfd; /* Innovent blue */ --color-tertiary: #3598e0; /* cyan */ --color-background: #f4f4fe; /* page background (lavender white) */ --color-foreground: #101626; /* headings (near-black navy) */ --color-body: #3a3f55; /* body text */ --color-card: #ffffff; /* card surface */ --color-surface-container: #efeffc; /* inset / alt rows / table head */ --color-muted-foreground: #676d84; /* secondary text */ --color-border: #d6d6e3; /* borders */ --color-destructive: #d62d2d; /* danger / error */ --color-band: #101626; /* dark band: hero + footer */ --color-band-2: #1a2038; /* dark band hairlines */ /* Status palette (foregrounds; backgrounds derive below). Green = done, amber = partial, red = danger/missing, slate = deferred/neutral. */ --ok: #16a34a; --warn: #b9770a; --gap: var(--color-destructive); --later: #5566b5; /* ---------- Component aliases (used throughout; do not rename) ---------- */ --bg: var(--color-background); --surface: var(--color-card); --surface-2: var(--color-surface-container); --ink: var(--color-foreground); --ink-2: var(--color-body); --muted: var(--color-muted-foreground); --line: var(--color-border); --sidebar: var(--color-band); --sidebar-2: var(--color-band-2); --brand: var(--color-primary); --brand-2: var(--color-secondary); --brand-grad: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); /* Status backgrounds + priority pills derive from the status fg + surface, so they adapt automatically to whichever theme is active. */ --ok-bg: color-mix(in srgb, var(--ok) 14%, var(--surface)); --warn-bg: color-mix(in srgb, var(--warn) 16%, var(--surface)); --gap-bg: color-mix(in srgb, var(--gap) 14%, var(--surface)); --later-bg: color-mix(in srgb, var(--later) 16%, var(--surface)); --p0: var(--gap); --p1: var(--warn); --p2: var(--later); --radius: 14px; --radius-sm: 10px; --shadow: 0 1px 2px rgba(16,18,34,.04), 0 8px 24px rgba(16,18,34,.06); --shadow-lg: 0 12px 40px rgba(16,18,34,.12); --maxw: 1080px; color-scheme: light; } /* ---------- INNOVENT BRAND TOKENS — DARK (default theme) ---------- */ [data-theme="dark"] { --color-primary: #ac94f3; /* lighter purple for dark surfaces */ --color-secondary: #697dfd; /* lighter blue */ --color-tertiary: #5dade6; --color-background: #101626; /* deep navy page */ --color-foreground: #e9ebf9; /* light headings */ --color-body: #b4bbd3; /* light body text */ --color-card: #1a2038; /* elevated card surface (floats above bg) */ --color-surface-container: #252b3e; /* inset / alt rows / table head */ --color-muted-foreground: #8790a7; /* secondary text */ --color-border: #313749; /* borders */ --color-destructive: #efabab; /* danger / error (light on dark) */ --color-band: #0a0e1a; /* hero + footer, darker than page */ --color-band-2: #1a2038; --ok: #4ade80; --warn: #e0b145; --later: #8aa0e6; --shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.5); --shadow-lg: 0 16px 46px rgba(0,0,0,.6); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { margin: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.65; color: var(--ink-2); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { color: var(--ink); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 .5em; } h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 800; } h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; } h3 { font-size: 18px; font-weight: 700; } p { margin: 0 0 1em; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } strong { color: var(--ink); font-weight: 600; } small { font-size: 13px; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } /* ---------- Layout ---------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .section { padding: 56px 0; } .section--tight { padding: 32px 0; } .lead { font-size: 19px; color: var(--ink-2); max-width: 70ch; } .eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; color: var(--brand); margin: 0 0 10px; } .muted { color: var(--muted); } .center { text-align: center; } .divider { height: 1px; background: var(--line); border: 0; margin: 0; } /* Gradient text utility — works anywhere (wordmark, big numbers, prices). */ .grad { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Top nav ---------- */ .topnav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line); } .topnav__inner { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 18px; } .brandmark { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: var(--ink); } .brandmark:hover { text-decoration: none; } .brandmark .glyph { width: 26px; height: 26px; border-radius: 7px; background: var(--brand-grad); display: grid; place-items: center; color: #fff; font-size: 14px; box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-2) 38%, transparent); } /* The wordmark's gradient first word uses the global .grad utility above. */ .nav-pill { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--line)); padding: 3px 9px; border-radius: 999px; } .topnav__links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .topnav__links a { color: var(--ink-2); font-size: 14px; font-weight: 500; padding: 7px 11px; border-radius: 8px; } .topnav__links a:hover { background: var(--surface-2); text-decoration: none; } .topnav__links a.is-active { color: var(--brand); background: color-mix(in srgb, var(--brand) 16%, var(--surface)); font-weight: 600; } .themetoggle { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; font-size: 16px; line-height: 1; transition: background .12s, color .12s; } .themetoggle:hover { background: var(--surface-2); color: var(--ink); } .navtoggle { display: none; } /* ---------- Hero / page heads ---------- */ .hero { background: radial-gradient(1200px 400px at 80% -10%, color-mix(in srgb, var(--brand-2) 45%, transparent), transparent 60%), var(--sidebar); color: #eaeef4; padding: 72px 0 64px; position: relative; overflow: hidden; } .hero h1 { color: #fff; } .hero .lead { color: color-mix(in srgb, var(--brand-2) 22%, #d3d8e2); } .hero .eyebrow { color: color-mix(in srgb, var(--brand-2) 55%, #ffffff); } /* Light hero variant for pages that want air, not a dark band. */ .hero--light { background: radial-gradient(1000px 360px at 80% -20%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%), var(--bg); color: var(--ink-2); } .hero--light h1 { color: var(--ink); } .hero--light .lead { color: var(--ink-2); } .hero--light .eyebrow { color: var(--brand); } .pagehead { padding: 48px 0 8px; } .pagehead .eyebrow { color: var(--brand); } .crumbs { font-size: 13px; color: var(--muted); margin-bottom: 8px; } .crumbs a { color: var(--muted); } .sourcelink { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); padding: 4px 9px; border-radius: 7px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn--primary { background: var(--brand-grad); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 40%, transparent); } .btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line); } .btn--onhero { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.22); } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .card--pad { padding: 22px 24px; } .card--hover { transition: transform .15s, box-shadow .15s; } .card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } /* ---------- Grids ---------- */ .grid { display: grid; gap: 20px; } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } /* ---------- Chips ---------- */ .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .chip .dot { width: 7px; height: 7px; border-radius: 50%; } .chip--ok { color: var(--ok); background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 35%, transparent); } .chip--ok .dot{background:var(--ok)} .chip--warn { color: var(--warn); background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 35%, transparent); } .chip--warn .dot{background:var(--warn)} .chip--gap { color: var(--gap); background: var(--gap-bg); border-color: color-mix(in srgb, var(--gap) 35%, transparent); } .chip--gap .dot{background:var(--gap)} .chip--later { color: var(--later); background: var(--later-bg); border-color: color-mix(in srgb, var(--later) 35%, transparent); } .chip--later .dot{background:var(--later)} .chip--p0, .chip--p1, .chip--p2 { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .02em; background: var(--surface); border-color: var(--line); } .chip--p0 { color: var(--p0); } .chip--p1 { color: var(--p1); } .chip--p2 { color: var(--p2); } /* ---------- Callouts ---------- */ .callout { border-radius: var(--radius-sm); padding: 16px 18px; border-left: 4px solid var(--brand); background: var(--surface); border: 1px solid var(--line); margin: 18px 0; } .callout h3 { margin-top: 0; } .callout--gap { border-left-color: var(--gap); background: var(--gap-bg); border-color: color-mix(in srgb, var(--gap) 30%, transparent); } .callout--warn { border-left-color: var(--warn); background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 30%, transparent); } .callout--info { border-left-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 22%, var(--line)); } /* ---------- Browser frame (screenshots) ---------- */ .browserframe { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); } .browserframe__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); } .browserframe__bar .d { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 45%, var(--surface-2)); } .browserframe__url { margin-left: 10px; font-size: 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; flex: 1; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .browserframe__viewport { max-height: 520px; overflow: auto; } .browserframe__viewport img { display: block; width: 100%; height: auto; } .figcap { font-size: 13px; color: var(--muted); margin: 8px 2px 0; } figure { margin: 0; } /* ---------- Feature / task cards ---------- */ .taskcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; transition: transform .15s, box-shadow .15s; } .taskcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .taskcard__top { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; margin-bottom: 8px; } .taskcard__title { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0; } .taskcard__chips { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; } .taskcard .what { margin: 6px 0; } .taskcard .why { font-size: 14px; color: var(--ink-2); } .taskcard .why b { color: var(--brand); } .taskcard .q { font-size: 13px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 12px; } /* ---------- Stat tiles ---------- */ .statbar { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); } .stat__num { font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; } .stat__label { font-size: 13px; color: var(--muted); } /* ---------- Generic table ---------- */ .tbl { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .tbl th, .tbl td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; } .tbl th { background: var(--surface-2); color: var(--ink); font-weight: 600; font-size: 13px; } .tbl tr:last-child td { border-bottom: 0; } .tbl td.nowrap { white-space: nowrap; } /* ---------- Journey / timeline ---------- */ .journey { position: relative; margin-top: 24px; } .journey-step { position: relative; padding-left: 64px; padding-bottom: 36px; } .journey-step::before { content: ""; position: absolute; left: 23px; top: 6px; bottom: -6px; width: 2px; background: linear-gradient(var(--brand), var(--brand-2)); opacity: .35; } .journey-step:last-child::before { display: none; } .journey-step__num { position: absolute; left: 6px; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-grad); color: #fff; display: grid; place-items: center; font-weight: 700; box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 40%, transparent); z-index: 1; } .journey-step__body { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; } .journey-step__body h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* ---------- Board / columns ---------- */ .board { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; } .column { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; } .column__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 12px; font-weight: 700; color: var(--ink); } .column .taskcard { margin-bottom: 12px; padding: 14px 16px; } .phaseband { border-radius: var(--radius); padding: 10px 18px; font-weight: 700; color: #fff; margin: 36px 0 18px; display: flex; align-items: center; gap: 12px; } .phaseband--p0 { background: linear-gradient(135deg, #dc2626, #b91c1c); } .phaseband--p1 { background: linear-gradient(135deg, #d97706, #b9770a); } .phaseband--p2 { background: linear-gradient(135deg, var(--brand), var(--brand-2)); } .phaseband--later { background: var(--sidebar); } /* ---------- Legend ---------- */ .legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .legend .item { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); } /* ---------- Lists ---------- */ .checklist { list-style: none; padding: 0; margin: 0; } .checklist li { position: relative; padding-left: 28px; margin-bottom: 10px; } .checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 700; } .qlist { list-style: none; padding: 0; margin: 0; } .qlist li { position: relative; padding-left: 24px; margin-bottom: 9px; color: var(--ink-2); } .qlist li::before { content: "?"; position: absolute; left: 0; top: 0; color: var(--brand); font-weight: 700; } /* ---------- Prev/next nav ---------- */ .themenav { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 12px; } .themenav a { flex: 1; min-width: 240px; } /* ---------- Footer ---------- */ .footer { background: var(--sidebar); color: color-mix(in srgb, #ffffff 70%, var(--sidebar)); margin-top: 64px; border-top: 1px solid var(--sidebar-2); } .footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 40px 24px; } .footer a { color: color-mix(in srgb, #ffffff 80%, var(--sidebar)); } .footer__links { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; } .footer__meta { font-size: 13px; color: color-mix(in srgb, #ffffff 52%, var(--sidebar)); border-top: 1px solid var(--sidebar-2); padding-top: 16px; } .footer code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: color-mix(in srgb, #ffffff 80%, var(--sidebar)); } /* ---------- Scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; } .reveal.in { opacity: 1; transform: none; } /* ---------- Responsive ---------- */ @media (max-width: 760px) { .topnav__links { display: none; position: absolute; top: 56px; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--line); flex-direction: column; padding: 10px 16px; gap: 2px; box-shadow: var(--shadow); } .topnav__links.open { display: flex; } .topnav__links a { padding: 10px 12px; } .themetoggle { margin-left: auto; } .navtoggle { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; } .journey-step { padding-left: 52px; } } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* site: nav ICP dropdown (shared chrome addition) */ .navdrop { position: relative; } .navdrop summary { list-style: none; color: var(--ink-2); font-size: 14px; font-weight: 500; padding: 7px 11px; border-radius: 8px; cursor: pointer; user-select: none; } .navdrop summary::-webkit-details-marker { display: none; } .navdrop summary::after { content: " ▾"; font-size: 11px; opacity: .7; } .navdrop summary:hover { background: var(--surface-2); } .navdrop[open] summary { color: var(--brand); background: color-mix(in srgb, var(--brand) 16%, var(--surface)); } .navdrop__menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 2px; z-index: 60; } .navdrop__menu a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 14px; } .navdrop__menu .navdrop__tier { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 2px; } @media (max-width: 760px) { .navdrop__menu { position: static; box-shadow: none; border: none; padding: 0 0 0 14px; min-width: 0; } }