/* VitruAI brand styling for MkDocs Material — matches vitruai.com's design system (themes/vitru/assets/css/design-system.css): warm paper canvas, near-black ink, teal accent, dark inverse. Fonts (Inter / JetBrains Mono) are set in mkdocs.yml. IMPORTANT: Material sets --md-primary-fg-color / --md-accent-fg-color directly on via [data-md-color-primary=indigo] / [data-md-color-accent=indigo]. A value set directly on beats one inherited from :root, so the brand overrides MUST live on a body-level selector loaded after Material's palette CSS — hence [data-md-color-scheme=…] (also on ; extra_css loads last, so equal-specificity ties resolve in our favor). */ :root { --vitru-cream: #F7F5EE; /* --bg-base */ --vitru-cream-alt: #F0EDE2; /* --bg-card-alt / --ink-on-dark */ --vitru-white: #FFFFFF; /* --bg-card */ --vitru-ink: #1C1D22; /* --ink-primary */ --vitru-ink-2: #5A5D66; /* --ink-secondary */ --vitru-ink-muted: #9A9DA4; /* --ink-muted */ --vitru-dark: #14161C; /* --bg-inverse */ --vitru-teal: #0E84A5; /* --accent-primary */ --vitru-teal-dark: #0B6C88; /* --accent-hover */ --vitru-teal-light: #46b5d1; /* lightened accent for dark mode */ } /* ---- Light scheme = warm paper, dark bar, teal accent ---- */ [data-md-color-scheme="default"] { /* header / nav bar / footer (dark inverse with cream text) */ --md-primary-fg-color: var(--vitru-dark); --md-primary-fg-color--light: var(--vitru-dark); --md-primary-fg-color--dark: var(--vitru-dark); --md-primary-bg-color: var(--vitru-cream-alt); --md-primary-bg-color--light: #c9ccd2; /* accent (links hover, focus, active nav, selection) */ --md-accent-fg-color: var(--vitru-teal); --md-accent-fg-color--transparent: rgba(14, 132, 165, 0.1); /* canvas + ink */ --md-default-bg-color: var(--vitru-cream); --md-default-fg-color: var(--vitru-ink); --md-default-fg-color--light: var(--vitru-ink-2); --md-default-fg-color--lighter: var(--vitru-ink-muted); --md-default-fg-color--lightest: rgba(28, 29, 34, 0.07); --md-typeset-color: var(--vitru-ink); --md-typeset-a-color: var(--vitru-teal); --md-code-bg-color: var(--vitru-cream-alt); --md-code-fg-color: #24292f; --md-footer-bg-color: var(--vitru-dark); --md-footer-bg-color--dark: #0e1014; } /* ---- Dark scheme = inverse canvas ---- */ [data-md-color-scheme="slate"] { --md-primary-fg-color: var(--vitru-dark); --md-primary-bg-color: var(--vitru-cream-alt); --md-accent-fg-color: var(--vitru-teal-light); --md-accent-fg-color--transparent: rgba(70, 181, 209, 0.1); --md-default-bg-color: var(--vitru-dark); --md-default-fg-color: var(--vitru-cream-alt); --md-typeset-color: #E6E3DA; --md-typeset-a-color: var(--vitru-teal-light); --md-code-bg-color: #1d2027; } /* ---- Polish ---- */ .md-typeset a:hover { color: var(--vitru-teal-dark); } [data-md-color-scheme="slate"] .md-typeset a:hover { color: #7fd0e6; } .md-typeset h1, .md-typeset h2 { letter-spacing: -0.012em; font-weight: 650; } /* Teal left-border on the h1 for a clear branded accent */ .md-typeset h1 { border-left: 3px solid var(--md-accent-fg-color); padding-left: 0.6rem; } .md-header { border-bottom: 1px solid rgba(0, 0, 0, 0.25); } /* Primary buttons / hero CTA → teal, not the dark header color */ .md-typeset .md-button--primary { background-color: var(--vitru-teal); border-color: var(--vitru-teal); color: #fff; } .md-typeset .md-button--primary:hover { background-color: var(--vitru-teal-dark); border-color: var(--vitru-teal-dark); } /* Home page card grid → tactile cards on the paper canvas */ .md-typeset .grid.cards > ul > li { border: 1px solid rgba(28, 29, 34, 0.1); border-radius: 10px; background: var(--vitru-white); transition: border-color 120ms, box-shadow 120ms, transform 120ms; } .md-typeset .grid.cards > ul > li:hover { border-color: var(--vitru-teal); box-shadow: 0 6px 20px rgba(14, 132, 165, 0.12); transform: translateY(-2px); } [data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li { background: #1d2027; border-color: rgba(240, 237, 226, 0.12); } /* Search highlight + active nav use the teal accent automatically via --md-accent-fg-color */