/* ============================================================================= In Motion Automation — document system Source of truth for print, PDF, letterheads, reports, booklets, decks. Matches live Frosted D on https://www.agentsinmotion.ai/ Paper, Geist, navy, quiet frost. No halo. No extra ring. Use with templates in ../templates/ and the agent skill skills/brand-documents/SKILL.md ============================================================================= */ :root { --ima-paper: #FAFAF8; --ima-white: #FFFFFF; --ima-stone: #F5F4F2; --ima-line: #E9E7E4; --ima-ink: #17191E; --ima-muted: #6F7278; --ima-navy: #0B1622; --ima-navy-mid: #24394E; --ima-sky: #DCE6EE; --ima-sky-mid: #B7CCDA; --ima-sky-deep: #84A2BA; --ima-select: #DCE6EE; /* Logo orbit — for the mark only. Never as page fills. */ --ima-orbit-cyan: #4EC3E0; --ima-orbit-blue: #3B6FE8; --ima-orbit-violet: #6B4DE8; --ima-orbit-magenta: #E04AA8; --ima-r-card: 22px; --ima-r-btn: 10px; --ima-ease: cubic-bezier(.32, .72, 0, 1); --ima-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ima-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; --ima-page-w: 210mm; --ima-page-h: 297mm; --ima-margin: 18mm; --ima-margin-top: 16mm; --ima-gutter: 6mm; --ima-type-display: 34pt; --ima-type-h1: 22pt; --ima-type-h2: 14pt; --ima-type-h3: 11pt; --ima-type-body: 10.5pt; --ima-type-small: 9pt; --ima-type-micro: 8pt; --ima-leading-body: 1.5; } /* US Letter fallback: add class "ima-letter" to or .ima-page */ .ima-letter { --ima-page-w: 215.9mm; --ima-page-h: 279.4mm; } * { box-sizing: border-box; } html, body.ima-doc { margin: 0; padding: 0; background: var(--ima-paper); color: var(--ima-ink); font-family: var(--ima-sans); font-size: var(--ima-type-body); line-height: var(--ima-leading-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .ima-mono { font-family: var(--ima-mono); } .ima-muted { color: var(--ima-muted); } ::selection { background: var(--ima-select); } @page { size: A4; margin: 0; } @page :left { margin: 0; } @page :right { margin: 0; } .ima-letter @page, html.ima-letter @page { size: letter; } /* ----- page sheet -------------------------------------------------------- */ .ima-page { position: relative; width: var(--ima-page-w); min-height: var(--ima-page-h); height: var(--ima-page-h); background: var(--ima-paper); color: var(--ima-ink); overflow: hidden; page-break-after: always; break-after: page; } .ima-page:last-child { page-break-after: auto; break-after: auto; } .ima-page--navy { background: var(--ima-navy); color: #F2F6FA; } .ima-inner { position: relative; z-index: 2; height: 100%; padding: var(--ima-margin-top) var(--ima-margin) 18mm; display: flex; flex-direction: column; } .ima-page--cover .ima-inner { padding: 22mm 22mm 20mm; } /* booklet inner gutter: add --left or --right */ .ima-page--verso .ima-inner { padding-left: calc(var(--ima-margin) + var(--ima-gutter)); } .ima-page--recto .ima-inner { padding-right: calc(var(--ima-margin) + var(--ima-gutter)); } /* ----- hairline brand bar (subtle, every print page) --------------------- */ .ima-page::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3mm; background: var(--ima-navy); z-index: 3; } .ima-page--navy::before { background: linear-gradient(90deg, #4EC3E0 0%, #3B6FE8 38%, #6B4DE8 68%, #E04AA8 100%); height: 2.2mm; opacity: .85; } .ima-page--plain::before { display: none; } /* ----- type -------------------------------------------------------------- */ .ima-kicker { font-family: var(--ima-mono); font-size: var(--ima-type-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--ima-muted); font-weight: 500; } .ima-page--navy .ima-kicker { color: rgba(242, 246, 250, .55); } .ima-display { font-size: var(--ima-type-display); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; margin: 0; } .ima-display em { font-style: normal; color: var(--ima-muted); } .ima-page--navy .ima-display em { color: rgba(242, 246, 250, .55); } .ima-h1 { font-size: var(--ima-type-h1); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 .4em; } .ima-h2 { font-size: var(--ima-type-h2); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; margin: 1.4em 0 .45em; } .ima-h3 { font-size: var(--ima-type-h3); font-weight: 600; letter-spacing: -.02em; margin: 1.1em 0 .3em; } .ima-body, .ima-page p { font-size: var(--ima-type-body); line-height: var(--ima-leading-body); color: var(--ima-ink); margin: 0 0 .75em; } .ima-page--navy p { color: rgba(242, 246, 250, .78); } .ima-lede { font-size: 12.5pt; line-height: 1.45; color: var(--ima-muted); max-width: 42em; } .ima-caption { font-size: var(--ima-type-small); color: var(--ima-muted); line-height: 1.4; } a.ima-link { color: var(--ima-ink); text-decoration: none; border-bottom: 1px solid var(--ima-line); } a.ima-link:hover { border-color: var(--ima-muted); } /* ----- header / footer chrome -------------------------------------------- */ .ima-running { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 10mm; margin-bottom: 8mm; } .ima-running--foot { margin: auto 0 0; margin-top: 8mm; padding-top: 5mm; border-top: 1px solid var(--ima-line); min-height: 0; margin-bottom: 0; } .ima-wordmark { font-weight: 600; font-size: 9.5pt; letter-spacing: -.02em; color: var(--ima-ink); text-decoration: none; white-space: nowrap; } .ima-wordmark span { color: var(--ima-muted); font-weight: 400; } .ima-page--navy .ima-wordmark { color: #F2F6FA; } .ima-page--navy .ima-wordmark span { color: rgba(242, 246, 250, .55); } .ima-running-meta { font-family: var(--ima-mono); font-size: var(--ima-type-micro); letter-spacing: .08em; color: var(--ima-muted); text-align: right; } .ima-page--navy .ima-running-meta, .ima-page--navy .ima-running--foot { color: rgba(242, 246, 250, .5); border-color: rgba(242, 246, 250, .12); } /* Client leads. IMA never outranks the client on inner pages. */ .ima-client-lockup { display: flex; align-items: baseline; gap: 10px; } .ima-client-name { font-size: 13pt; font-weight: 600; letter-spacing: -.02em; } .ima-client-by { font-family: var(--ima-mono); font-size: var(--ima-type-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ima-muted); } /* ----- logo treatments --------------------------------------------------- */ /* Size the stone with WIDTH only. Height here turns it into an egg. */ .ima-stone { --ima-stone-size: 11mm; position: relative; display: inline-block; width: var(--ima-stone-size); height: var(--ima-stone-size); aspect-ratio: 1 / 1; border-radius: 50%; line-height: 0; overflow: hidden; vertical-align: middle; flex: none; } /* Textless orbit beside a wordmark — a taste, not a badge. */ .ima-stone--whisper { --ima-stone-size: 9mm; } .ima-stone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; } /* Full wordmark PNG has glow padding. Textless marks stay uncropped. */ .ima-stone--full img { inset: -6%; width: 112%; height: 112%; max-width: none; } /* Glass cap on paper only. On navy it reads as a bubble around the mark. */ .ima-page:not(.ima-page--navy) .ima-stone::after, .ima-slide:not(.ima-slide--navy) .ima-stone::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 32% 22%, rgba(255, 255, 255, .4), transparent 36%), linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .03) 46%, rgba(255, 255, 255, .06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); } /* ----- letterhead -------------------------------------------------------- */ .ima-letterhead-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 6mm; border-bottom: 1px solid var(--ima-line); margin-bottom: 10mm; } .ima-letter-from { font-size: var(--ima-type-small); color: var(--ima-muted); line-height: 1.45; text-align: right; } .ima-letter-from strong { display: block; color: var(--ima-ink); font-weight: 600; font-size: 10.5pt; margin-bottom: 2px; } .ima-date-line { font-family: var(--ima-mono); font-size: var(--ima-type-small); color: var(--ima-muted); letter-spacing: .04em; margin-bottom: 8mm; } .ima-salutation { margin-bottom: 1em; } .ima-signoff { margin-top: 8mm; } /* ----- invoice (Apple Store invoice rhythm, IMA tokens) ------------------ */ /* Sparse type. Two-column billed-to / from. Line items with a code. Totals stacked right. Thick ink rules only on Payment and Additional. No Apple marks. No navy chrome beyond the 3mm page bar. */ .ima-page:has(.ima-invoice-mast) .ima-inner { padding-bottom: 10mm; } .ima-invoice-mast { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 5mm; border-bottom: 1px solid var(--ima-line); margin-bottom: 6mm; } .ima-invoice-title { font-size: 16pt; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 1.5mm; } .ima-invoice-flag { font-size: var(--ima-type-small); color: var(--ima-muted); margin: 0 0 8mm; } .ima-page p.ima-invoice-flag { margin: 0 0 4mm; } .ima-page p.ima-invoice-aside { margin: 0 0 2.5mm; } .ima-page p.ima-invoice-pay { margin: 0 0 3.5mm; } .ima-page p.ima-invoice-legal { margin: 4mm 0 0; } .ima-page .ima-invoice-add p { margin: 0; } .ima-invoice-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 3.2mm 16mm; margin: 0 0 5mm; } .ima-invoice-pairs dt { font-size: 9.5pt; font-weight: 600; letter-spacing: -.01em; margin: 0 0 1.2mm; } .ima-invoice-pairs dd { margin: 0; font-size: var(--ima-type-small); line-height: 1.45; color: var(--ima-ink); } .ima-invoice-pairs dd .ima-muted, .ima-invoice-pairs .who { color: var(--ima-ink); } .ima-invoice-section { font-size: 11pt; font-weight: 600; letter-spacing: -.02em; margin: 2mm 0 3.5mm; } .ima-invoice-table { width: 100%; border-collapse: collapse; font-size: var(--ima-type-small); margin: 0 0 5mm; } .ima-invoice-table th { text-align: left; font-weight: 600; font-size: 8pt; letter-spacing: 0; text-transform: none; font-family: var(--ima-sans); color: var(--ima-ink); border-bottom: 1px solid var(--ima-ink); padding: 0 3mm 2mm 0; vertical-align: bottom; } .ima-invoice-table td { padding: 2mm 3mm 1.8mm 0; border-bottom: 0; vertical-align: top; } .ima-invoice-table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--ima-mono); font-size: 8pt; padding-right: 0; } .ima-invoice-table th.num { font-family: var(--ima-sans); font-size: 8pt; } .ima-invoice-table col.code { width: 28mm; } .ima-invoice-table col.qty { width: 12mm; } .ima-invoice-table col.money { width: 24mm; } .ima-invoice-table td.ima-invoice-code, .ima-invoice-table td.num { white-space: nowrap; } .ima-invoice-item { font-weight: 500; font-size: 9.5pt; } .ima-invoice-code { font-family: var(--ima-mono); font-size: 8pt; color: var(--ima-muted); } .ima-invoice-spec { margin: 2mm 0 0; display: grid; grid-template-columns: 32mm 1fr; gap: 1mm 4mm; font-size: 8pt; line-height: 1.4; color: var(--ima-muted); max-width: 118mm; } .ima-invoice-spec dt { font-weight: 500; color: var(--ima-muted); } .ima-invoice-spec dd { margin: 0; } .ima-invoice-aside { font-size: 8.5pt; color: var(--ima-muted); margin: 0 0 4mm; } .ima-invoice-totals { margin: 2mm 0 0 auto; width: 78mm; } .ima-invoice-totals dl { display: grid; grid-template-columns: 1fr auto; gap: 1.6mm 8mm; margin: 0; font-size: var(--ima-type-small); font-variant-numeric: tabular-nums; } .ima-invoice-totals dt { margin: 0; color: var(--ima-ink); } .ima-invoice-totals dd { margin: 0; text-align: right; font-family: var(--ima-mono); font-size: 8.5pt; } .ima-invoice-totals dt.is-total, .ima-invoice-totals dd.is-total { font-weight: 600; font-family: var(--ima-sans); font-size: 9.5pt; padding-top: 1.6mm; } .ima-invoice-totals dt.is-due, .ima-invoice-totals dd.is-due { font-weight: 600; } .ima-invoice-rule { border: 0; border-top: 1.15pt solid var(--ima-ink); margin: 0 0 3.5mm; } .ima-invoice-pay { font-size: var(--ima-type-small); line-height: 1.45; margin: 0 0 7mm; } .ima-invoice-pay .how { font-family: var(--ima-mono); font-size: 8pt; color: var(--ima-muted); } .ima-invoice-add { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4mm; margin: 0 0 4mm; font-size: var(--ima-type-small); } .ima-invoice-add .k { font-weight: 600; font-size: 8.5pt; margin: 0 0 1.4mm; } .ima-invoice-add p { margin: 0; font-family: var(--ima-mono); font-size: 8pt; } .ima-invoice-legal { font-size: 7.5pt; line-height: 1.45; color: var(--ima-muted); } html.ima-cool .ima-invoice-table th, body.ima-cool .ima-invoice-table th, .ima-cool .ima-invoice-table th { border-bottom-color: var(--ima-navy); } html.ima-fresh .ima-invoice-table th, body.ima-fresh .ima-invoice-table th, .ima-fresh .ima-invoice-table th { border-bottom-color: var(--ima-ink); } .ima-sign-name { font-weight: 600; margin-top: 10mm; margin-bottom: 0; } .ima-sign-role { color: var(--ima-muted); font-size: var(--ima-type-small); margin: 0; } /* ----- cover / inside cover ---------------------------------------------- */ .ima-cover-top { display: flex; align-items: flex-start; justify-content: space-between; } .ima-cover-mid { margin-top: auto; padding-bottom: 18mm; } .ima-cover-for { margin-top: 8mm; font-size: 12pt; color: var(--ima-muted); } .ima-cover-for strong { display: block; color: var(--ima-ink); font-size: 16pt; font-weight: 600; letter-spacing: -.02em; margin-top: 2px; } .ima-page--navy .ima-cover-for { color: rgba(242, 246, 250, .55); } .ima-page--navy .ima-cover-for strong { color: #F2F6FA; } .ima-cover-rule { width: 28mm; height: 1px; background: var(--ima-line); border: 0; margin: 8mm 0; } .ima-page--navy .ima-cover-rule { background: rgba(242, 246, 250, .18); } .ima-control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm 10mm; margin-top: 10mm; max-width: 140mm; } .ima-control-grid dt { font-family: var(--ima-mono); font-size: var(--ima-type-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ima-muted); margin-bottom: 1.5mm; } .ima-control-grid dd { margin: 0 0 4mm; font-size: 11pt; font-weight: 500; } /* ----- body layout ------------------------------------------------------- */ .ima-col-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; } .ima-rule { border: 0; border-top: 1px solid var(--ima-line); margin: 6mm 0; } .ima-callout { background: var(--ima-stone); border-radius: var(--ima-r-card); padding: 6mm 7mm; margin: 6mm 0; } .ima-callout p:last-child { margin-bottom: 0; } .ima-navy-band { background: var(--ima-navy); color: #F2F6FA; border-radius: var(--ima-r-card); padding: 7mm 8mm; margin: 6mm 0; } .ima-navy-band p { color: rgba(242, 246, 250, .78); margin: 0; } .ima-navy-band strong { color: #F2F6FA; } .ima-figure { margin: 6mm 0; } .ima-figure img { width: 100%; height: auto; border-radius: 14px; display: block; background: var(--ima-stone); } /* tables: quiet, no grid scream */ .ima-table { width: 100%; border-collapse: collapse; font-size: var(--ima-type-small); margin: 4mm 0 8mm; } .ima-table th { text-align: left; font-family: var(--ima-mono); font-size: var(--ima-type-micro); letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--ima-muted); border-bottom: 1px solid var(--ima-ink); padding: 0 3mm 2.5mm 0; } .ima-table td { padding: 2.8mm 3mm 2.8mm 0; border-bottom: 1px solid var(--ima-line); vertical-align: top; } .ima-table tr:last-child td { border-bottom: 0; } .ima-toc { list-style: none; padding: 0; margin: 8mm 0 0; } .ima-toc li { display: flex; align-items: baseline; gap: 4mm; padding: 2.6mm 0; border-bottom: 1px solid var(--ima-line); font-size: 11pt; } .ima-toc .n { font-family: var(--ima-mono); font-size: var(--ima-type-micro); letter-spacing: .1em; color: var(--ima-muted); width: 10mm; flex: none; } .ima-toc .dots { flex: 1; border-bottom: 1px dotted var(--ima-line); transform: translateY(-4px); min-width: 8mm; } .ima-toc .pg { font-family: var(--ima-mono); font-size: var(--ima-type-small); color: var(--ima-muted); } /* ----- presentation / slides --------------------------------------------- */ .ima-slide { position: relative; width: 297mm; height: 167.0625mm; /* 16:9 of A4-landscape width */ background: var(--ima-paper); color: var(--ima-ink); overflow: hidden; page-break-after: always; break-after: page; } .ima-slide--a4 { width: 297mm; height: 210mm; } .ima-slide::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2.4mm; background: var(--ima-navy); } .ima-slide-inner { height: 100%; padding: 14mm 16mm 12mm; display: flex; flex-direction: column; } .ima-slide .ima-display { font-size: 32pt; } .ima-slide .ima-h1 { font-size: 26pt; } .ima-slide p { font-size: 14pt; line-height: 1.4; } .ima-slide--navy { background: var(--ima-navy); color: #F2F6FA; } .ima-slide--navy::before { background: linear-gradient(90deg, #4EC3E0 0%, #3B6FE8 38%, #6B4DE8 68%, #E04AA8 100%); opacity: .85; } .ima-slide--navy p { color: rgba(242, 246, 250, .78); } .ima-slide-num { margin-top: auto; font-family: var(--ima-mono); font-size: 8pt; letter-spacing: .12em; color: var(--ima-muted); } /* ----- buttons (HTML / interactive only; keep quiet in print) ------------ */ .ima-btn { display: inline-flex; align-items: center; gap: 12px; border-radius: var(--ima-r-btn); text-decoration: none; font-weight: 500; font-size: 10.5pt; background: var(--ima-ink); color: #fff; padding: 3.2mm 6mm; border: 0; cursor: pointer; transition: transform .45s var(--ima-ease), background .45s var(--ima-ease); } .ima-btn:hover { background: #23262C; } .ima-btn:active { transform: scale(.98); } /* ----- print ------------------------------------------------------------- */ @media print { html, body.ima-doc { background: white; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ima-page, .ima-slide { box-shadow: none; margin: 0; width: 100%; } .ima-no-print { display: none !important; } a.ima-link { border-bottom: 0; } } @media screen { body.ima-doc { background: #E8E6E2; padding: 24px 0 64px; } .ima-page, .ima-slide { margin: 0 auto 24px; box-shadow: 0 18px 40px -24px rgba(11, 22, 34, .28); } } /* ============================================================================= Vibe: cool technical Default is warm paper. Add class `ima-cool` to , , or a single .ima-page / .ima-slide / .ima-portal. Steel paper, sharper corners, cyan hairline, more mono. Same logo, same navy, same hierarchy. Not a new brand. ============================================================================= */ html.ima-cool, body.ima-cool, .ima-cool { --ima-paper: #F2F5F8; --ima-white: #F7F9FB; --ima-stone: #E6EBEF; --ima-line: #CDD5DD; --ima-ink: #10151C; --ima-muted: #5A6572; --ima-navy: #0B1622; --ima-navy-mid: #1A2E42; --ima-sky: #C5D4E2; --ima-sky-mid: #9BB3C7; --ima-sky-deep: #6A8AA3; --ima-select: #C5D4E2; --ima-r-card: 8px; --ima-r-btn: 4px; } html.ima-cool .ima-page::before, body.ima-cool .ima-page::before, .ima-page.ima-cool::before, html.ima-cool .ima-slide::before, body.ima-cool .ima-slide::before, .ima-slide.ima-cool::before { height: 2mm; } html.ima-cool .ima-page:not(.ima-page--navy)::before, body.ima-cool .ima-page:not(.ima-page--navy)::before, .ima-page.ima-cool:not(.ima-page--navy)::before { box-shadow: 0 1px 0 rgba(78, 195, 224, .65); } html.ima-cool .ima-callout, body.ima-cool .ima-callout, .ima-cool .ima-callout { border-left: 2.5px solid var(--ima-navy); border-radius: var(--ima-r-card); } html.ima-cool .ima-navy-band, body.ima-cool .ima-navy-band, .ima-cool .ima-navy-band { border-radius: var(--ima-r-card); } html.ima-cool .ima-kicker, body.ima-cool .ima-kicker, .ima-cool .ima-kicker { letter-spacing: .16em; } html.ima-cool .ima-table th, body.ima-cool .ima-table th, .ima-cool .ima-table th { border-bottom-color: var(--ima-navy); border-bottom-width: 0.6pt; } html.ima-cool .ima-btn, body.ima-cool .ima-btn, .ima-cool .ima-btn { border-radius: var(--ima-r-btn); } @media screen { body.ima-doc.ima-cool { background: #D5DCE4; } } /* ============================================================================= Vibe: fresh Bright white. No cream, no tinted fill, no navy chrome. Touch of color = orbit stripe / cyan tick only. ============================================================================= */ html.ima-fresh, body.ima-fresh, .ima-fresh { --ima-paper: #FFFFFF; --ima-white: #FFFFFF; --ima-stone: #F4F9FB; --ima-line: #E8EEF2; --ima-ink: #1A2A38; --ima-muted: #6A7B88; --ima-navy: #0B1622; --ima-navy-mid: #24394E; --ima-sky: #DCE6EE; --ima-sky-mid: #B7CCDA; --ima-sky-deep: #84A2BA; --ima-select: #E8F6FA; --ima-r-card: 14px; --ima-r-btn: 8px; } html.ima-fresh .ima-page::before, body.ima-fresh .ima-page::before, .ima-page.ima-fresh::before, html.ima-fresh .ima-slide::before, body.ima-fresh .ima-slide::before, .ima-slide.ima-fresh::before { height: 2mm; background: linear-gradient(90deg, #4EC3E0, #3B6FE8 50%, #6B4DE8); } html.ima-fresh .ima-page--navy, .ima-page.ima-fresh.ima-page--navy, html.ima-fresh .ima-slide--navy, .ima-slide.ima-fresh.ima-slide--navy { background: #FFFFFF; color: var(--ima-ink); } html.ima-fresh .ima-page--navy::before, .ima-page.ima-fresh.ima-page--navy::before { opacity: 1; } html.ima-fresh .ima-page--navy .ima-wordmark, html.ima-fresh .ima-slide--navy .ima-wordmark, .ima-page.ima-fresh.ima-page--navy .ima-wordmark { color: var(--ima-ink); } html.ima-fresh .ima-page--navy .ima-wordmark span, html.ima-fresh .ima-slide--navy .ima-wordmark span { color: var(--ima-muted); } html.ima-fresh .ima-page--navy .ima-kicker, html.ima-fresh .ima-page--navy .ima-lede, html.ima-fresh .ima-page--navy p, html.ima-fresh .ima-page--navy .ima-running-meta, html.ima-fresh .ima-page--navy .ima-cover-for { color: var(--ima-muted); } html.ima-fresh .ima-page--navy .ima-display, html.ima-fresh .ima-page--navy .ima-cover-for strong { color: var(--ima-ink); } html.ima-fresh .ima-page--navy .ima-cover-rule { background: var(--ima-line); } html.ima-fresh .ima-page--navy .ima-running--foot { border-color: var(--ima-line); } html.ima-fresh .ima-callout, body.ima-fresh .ima-callout, .ima-fresh .ima-callout { background: #FFFFFF; border: 1px solid var(--ima-line); border-left: 2.5px solid #4EC3E0; border-radius: var(--ima-r-card); } html.ima-fresh .ima-navy-band, body.ima-fresh .ima-navy-band, .ima-fresh .ima-navy-band { background: #F4F9FB; color: var(--ima-ink); border-radius: var(--ima-r-card); box-shadow: inset 3px 0 0 #4EC3E0; } html.ima-fresh .ima-navy-band p { color: var(--ima-muted); } html.ima-fresh .ima-navy-band strong { color: var(--ima-ink); } html.ima-fresh .ima-btn, body.ima-fresh .ima-btn, .ima-fresh .ima-btn { border-radius: var(--ima-r-btn); } html.ima-fresh .ima-table th, body.ima-fresh .ima-table th, .ima-fresh .ima-table th { border-bottom-color: #4EC3E0; border-bottom-width: 1px; } html.ima-fresh .ima-kicker, body.ima-fresh .ima-kicker, .ima-fresh .ima-kicker { color: #84A2BA; } @media screen { body.ima-doc.ima-fresh { background: #EEF4F8; } }