/* ================================================
SecureAI — Soft Flow Design System
"Soft" = gentle gradients, smooth transitions,
rounded shapes, flowing layout, natural depth
"Flow" = sections that connect visually, progressive
disclosure, calm information architecture
================================================ */
/* === Base Soft Flow Colors & Gradients === */
:root {
/* Loyola University Chicago brand: Maroon (primary) + Gold (secondary accent). */
--sf-primary-start: #991E4E; /* Loyola Maroon */
--sf-primary-mid: #7a0e2f; /* Lighter maroon — gradient midtone / mid accents */
--sf-primary-end: #3d0417; /* Deep maroon — gradient end / dark accent */
--sf-accent-warm: #ffbc19; /* Loyola Gold — fills, badges, progress bar, focus rings on dark */
--sf-accent-warm-strong: #8a6400; /* Darkened gold — AA-safe for link text & focus rings on LIGHT backgrounds
(pure #ffbc19 on white is ~2:1 contrast; this shade clears 4.5:1) */
--sf-gradient-main: linear-gradient(135deg, var(--sf-primary-start), var(--sf-primary-end));
--sf-gradient-soft: linear-gradient(135deg, #fdf3d9, #fae8bf); /* Warm gold-tinted cream (replaces lavender tint) */
--sf-shadow-soft: 0 2px 8px rgba(90, 7, 34, 0.10);
--sf-shadow-medium: 0 4px 16px rgba(90, 7, 34, 0.14);
--sf-shadow-hover: 0 8px 30px rgba(90, 7, 34, 0.20);
--sf-radius-sm: 8px;
--sf-radius-md: 16px;
--sf-radius-lg: 24px;
--sf-radius-xl: 32px;
/* Drive Material's own theme variables with the exact Loyola hexes (named Material
palettes don't include maroon/gold, so we set the custom properties directly). This
wins the cascade because extra.css loads after Material's generated palette CSS. */
--md-primary-fg-color: var(--sf-primary-start);
--md-primary-fg-color--light: var(--sf-primary-mid);
--md-primary-fg-color--dark: var(--sf-primary-end);
--md-accent-fg-color: var(--sf-accent-warm);
--md-accent-fg-color--transparent: rgba(234, 170, 0, 0.1);
--md-accent-bg-color: #ffffff;
--md-accent-bg-color--light: rgba(255, 255, 255, 0.7);
}
/* mkdocs.yml still declares the `indigo` named palette, so Material sets --md-primary/accent-fg-color
to indigo *on the * via these attribute selectors — which overrides a plain :root rule for the
whole page. Re-declare the Loyola hexes on the SAME selectors (extra.css loads after Material's
palette.css, so equal specificity + later source order wins). This kills indigo in Material's own
chrome (buttons, nav accents, search). Applies in both light and dark (primary is scheme-independent). */
[data-md-color-primary="indigo"] {
--md-primary-fg-color: #991E4E;
--md-primary-fg-color--light: #7a0e2f;
--md-primary-fg-color--dark: #3d0417;
}
[data-md-color-accent="indigo"] {
--md-accent-fg-color: #ffbc19;
--md-accent-fg-color--transparent: rgba(234, 170, 0, 0.1);
}
/* === Flowing Page Background === */
body {
background: #ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* === Soft Flow Hero / Header Area === */
.md-header {
background: #991E4E;
border-radius: 0;
box-shadow: 0 4px 20px rgba(90, 7, 34, 0.18);
}
.md-header--shadow {
box-shadow: 0 2px 12px rgba(90, 7, 34, 0.15);
}
/* Header logo (brand mark). No background/fill on hover — AISec.png already matches header color. */
.md-header__button.md-logo {
background: transparent !important;
}
.md-header__button.md-logo:hover,
.md-header__button.md-logo:focus,
.md-header__button.md-logo:active {
background: transparent !important;
}
/* Prevent any background/fill change on hover — keep logo visible but no hover box */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
height: 1.8rem;
width: auto;
background: transparent !important;
border-radius: var(--sf-radius-sm);
}
/* Override Material's default hover fill on the button and its children */
.md-header__button.md-logo:hover,
.md-header__button.md-logo:focus,
.md-header__button.md-logo:active {
background: transparent !important;
outline: none !important;
box-shadow: none !important;
}
.md-header__button.md-logo:hover img,
.md-header__button.md-logo:focus img,
.md-header__button.md-logo:active img {
background: transparent !important;
}
/* No pseudo-element overlay on hover */
.md-header__button.md-logo::before,
.md-header__button.md-logo::after {
display: none !important;
}
/* === Navigation - Soft Pill Shapes === */
.md-tabs {
background: transparent;
}
.md-tabs__item {
border-radius: var(--sf-radius-sm) var(--sf-radius-sm) 0 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.md-tabs__item--active {
background: rgba(255, 255, 255, 0.15);
box-shadow: none;
}
.md-tabs__link {
border-radius: var(--sf-radius-sm);
}
/* === Content Card Containers — Soft Flow Cards === */
.md-typeset {
max-width: 860px;
margin: 0 auto;
padding: 32px 16px;
}
/* Simple gold separator */
.md-typeset hr {
height: 2px;
background: #d4af37;
border: none;
margin: 48px auto;
opacity: 0.6;
}
/* === Profile Cards — Soft Flow Style === */
.profile-card {
background: white;
border: none;
border-radius: var(--sf-radius-lg);
padding: 28px;
margin: 24px 0;
text-align: center;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--sf-shadow-soft);
position: relative;
overflow: hidden;
}
.profile-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--sf-gradient-main);
}
.profile-card:hover {
box-shadow: var(--sf-shadow-hover);
transform: translateY(-4px);
}
.profile-card img {
width: 120px;
height: 120px;
border-radius: 50%;
margin-bottom: 16px;
border: 4px solid white;
box-shadow: var(--sf-shadow-medium);
transition: all 0.3s ease;
float: none !important;
}
.profile-card:hover img {
box-shadow: 0 6px 20px rgba(79, 70, 229, 0.25);
}
.profile-card-name {
font-size: 18px;
font-weight: 600;
margin: 10px 0 6px 0;
color: var(--md-primary-fg-color);
}
.profile-card-affiliation {
font-size: 14px;
color: var(--md-typeset-color);
margin-bottom: 12px;
opacity: 0.8;
}
.profile-card-bio {
font-size: 13px;
line-height: 1.7;
margin-bottom: 14px;
}
.profile-links a {
display: inline-block;
padding: 8px 16px;
background: var(--sf-gradient-soft);
color: var(--sf-primary-start);
border-radius: var(--sf-radius-sm);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(90, 7, 34, 0.15);
}
.profile-links a:hover {
background: var(--sf-gradient-main);
color: white;
transform: translateY(-1px);
box-shadow: var(--sf-shadow-medium);
}
/* === Speaker Profile Cards (inline HTML in workshop md files) === */
/* The markup is flat: ![]()
+ +
… are direct children of the card
(no inner text wrapper). A float layout lets the text flow naturally
beside/around the image and works for BOTH a lone card and a stacked
column of panelists. `overflow:hidden` establishes a block-formatting
context so the card always contains the floated image. */
.speaker-card {
background: white;
border-radius: var(--sf-radius-lg);
padding: 28px;
margin: 24px 0;
box-shadow: var(--sf-shadow-soft);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.speaker-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--sf-gradient-main);
}
.speaker-card:hover {
box-shadow: var(--sf-shadow-hover);
transform: translateY(-3px);
}
.speaker-card img,
.speaker-card .speaker-img {
float: left;
width: 140px;
height: 140px;
object-fit: cover;
border-radius: var(--sf-radius-md);
border: none;
box-shadow: var(--sf-shadow-medium);
margin: 4px 24px 12px 0;
}
.speaker-card h4 {
margin: 0 0 8px 0;
color: var(--sf-primary-start);
font-size: 20px;
}
.speaker-card p {
margin: 0 0 10px 0;
}
.speaker-card p:last-child {
margin-bottom: 0;
}
/* === Session Cards — Soft Flow === */
.session-card {
background: white;
border-left: none;
border-radius: var(--sf-radius-md);
padding: 24px;
margin: 16px 0;
box-shadow: var(--sf-shadow-soft);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.session-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
border-radius: var(--sf-radius-md) 0 0 var(--sf-radius-md);
background: var(--sf-gradient-main);
}
.session-card:hover {
box-shadow: var(--sf-shadow-hover);
transform: translateX(4px);
}
/* === Button Styles — Soft Flow === */
.md-button,
input[type="submit"],
input[type="button"] {
display: inline-block;
padding: 12px 28px;
background: var(--sf-gradient-main);
color: white;
border-radius: var(--sf-radius-xl);
text-decoration: none;
margin: 6px 4px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-weight: 500;
box-shadow: var(--sf-shadow-soft);
border: none;
cursor: pointer;
}
.md-button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
background: linear-gradient(135deg, var(--sf-primary-mid), var(--sf-primary-start));
box-shadow: var(--sf-shadow-hover);
transform: translateY(-2px);
}
.md-button.secondary {
background: var(--sf-gradient-soft);
color: var(--sf-primary-start);
border: 1px solid rgba(79, 70, 229, 0.15);
}
.md-button.secondary:hover {
background: white;
box-shadow: var(--sf-shadow-medium);
}
/* === Admonitions — Soft Flow Boxes === */
.admonition,
details {
border-radius: var(--sf-radius-md);
border-left: none;
margin: 20px 0;
padding: 18px 24px;
box-shadow: var(--sf-shadow-soft);
transition: all 0.3s ease;
}
.admonition:hover,
details:hover {
box-shadow: var(--sf-shadow-medium);
}
/* Soft gradient top accent for admonitions */
.admonition.note,
.admonition.abstract,
.admonition.info,
.admonition.tip,
.admonition.success,
.admonition.question,
.admonition.warning,
.admonitiondanger {
border-top-left-radius: var(--sf-radius-md);
border-top-right-radius: var(--sf-radius-md);
}
/* === Code Blocks — Floating Pill Style === */
/* Inline code only — the :not(pre) guard keeps this pill styling from
leaking onto fenced/highlighted code blocks (which Pygments colors). */
.md-typeset :not(pre) > code {
background: #f3efe5;
border-radius: var(--sf-radius-sm);
padding: 2px 8px;
font-size: 0.85em;
}
/* Block code keeps its native (Material/Pygments) background — no pill. */
.md-typeset pre > code {
background: transparent;
padding: 0;
}
.md-typeset .highlight {
border-radius: var(--sf-radius-md);
margin: 16px 0;
box-shadow: var(--sf-shadow-soft);
overflow: hidden;
}
.highlight:not(:last-child) {
margin-bottom: 8px;
}
/* === Tables — Soft Flow Cards Style === */
.md-typeset table:not(.highlighttable) {
border-collapse: separate;
border-spacing: 0;
border-radius: var(--sf-radius-md);
overflow: hidden;
box-shadow: var(--sf-shadow-soft);
width: 100%;
}
.md-typeset table:not(.highlighttable) th {
background: #991E4E;
color: white;
padding: 14px 18px;
font-weight: 600;
border: none;
border-right: 2px solid #eeeeee;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.md-typeset table:not(.highlighttable) th:last-child {
border-right: none;
}
.md-typeset table:not(.highlighttable) td {
padding: 14px 18px;
border-bottom: 1px solid rgba(90, 7, 34, 0.08);
background: white;
}
.md-typeset table:not(.highlighttable) tr:last-child td {
border-bottom: none;
}
.md-typeset table:not(.highlighttable) tr:hover td {
background: #fdf6e6;
}
/* === Learning Outcomes — Soft Flow Highlight Box === */
.learning-outcomes {
background: var(--sf-gradient-soft);
padding: 24px;
border-radius: var(--sf-radius-md);
margin: 20px 0;
box-shadow: var(--sf-shadow-soft);
}
.learning-outcomes ol,
.learning-outcomes ul {
margin-bottom: 0;
}
/* === Equation Styling (MathJax via pymdownx.arithmatex, generic mode) === */
/* Display math renders as
— give it a soft panel
and let wide equations scroll INSIDE the panel instead of overflowing the
page on narrow screens. */
.md-typeset div.arithmatex {
margin: 16px 0;
padding: 12px 16px;
background: rgba(234, 170, 0, 0.08);
border-radius: var(--sf-radius-sm);
overflow-x: auto;
overflow-y: hidden;
max-width: 100%;
}
.md-typeset div.arithmatex mjx-container {
max-width: 100%;
}
/* Inline math renders as — must stay transparent
and inline (no box, no block padding) so it reads as part of the sentence. */
.md-typeset span.arithmatex {
background: none;
padding: 0;
border-radius: 0;
}
/* === Blockquote — At-a-Glance Lead / Callout (Soft Flow) === */
/* Every workshop page opens with a `> one-sentence summary`; FAQ answers on
index.md also use blockquotes. Style them as a soft, rounded lead callout. */
.md-typeset blockquote {
background: #eeeeee;
border-left: 4px solid #cccccc;
border-radius: 0 var(--sf-radius-md) var(--sf-radius-md) 0;
padding: 16px 22px;
margin: 20px 0;
color: var(--md-typeset-color);
box-shadow: var(--sf-shadow-soft);
}
.md-typeset blockquote > :first-child {
margin-top: 0;
}
.md-typeset blockquote > :last-child {
margin-bottom: 0;
}
/* === Links — Maroon / Gold Hover === */
.md-typeset a {
color: #991E4E;
transition: all 0.2s ease;
}
.md-typeset a:hover {
color: #ffbc19;
text-decoration: underline;
text-underline-offset: 3px;
}
/* === Colab & GitHub Quick Links === */
.colab-link,
.github-link {
display: inline-flex;
align-items: center;
padding: 10px 20px;
color: white;
border-radius: var(--sf-radius-xl);
text-decoration: none;
margin: 6px 4px;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--sf-shadow-soft);
}
.colab-link {
background: linear-gradient(135deg, #f44336, #e91e63);
}
.colab-link:hover {
background: linear-gradient(135deg, #d32f2f, #c2185b);
transform: translateY(-2px);
box-shadow: var(--sf-shadow-medium);
}
.github-link {
background: var(--md-primary-fg-color, #333);
}
.github-link:hover {
background: #262626;
transform: translateY(-2px);
box-shadow: var(--sf-shadow-medium);
}
.colab-link svg,
.github-link svg {
width: 18px;
height: 18px;
margin-right: 8px;
}
/* === Highlight Boxes — Soft Flow === */
.highlight-box {
background: linear-gradient(135deg, #fffbeb, #fef3c7);
border-left: none;
border-radius: var(--sf-radius-md);
padding: 18px 24px;
margin: 20px 0;
box-shadow: var(--sf-shadow-soft);
}
/* === Speaker/Leader Cards — Grid Layout (for index.md) === */
.leader-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
margin: 28px 0;
}
.leader-card {
background: white;
border-radius: var(--sf-radius-lg);
padding: 32px;
box-shadow: var(--sf-shadow-soft);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.leader-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: var(--sf-gradient-main);
}
.leader-card:hover {
box-shadow: var(--sf-shadow-hover);
transform: translateY(-6px);
}
.leader-card img {
width: 130px;
height: 130px;
object-fit: cover;
border-radius: var(--sf-radius-md);
box-shadow: var(--sf-shadow-medium);
margin: 0 auto 20px auto;
display: block;
}
.leader-card h4 {
text-align: center;
color: var(--sf-primary-start);
font-size: 19px;
margin: 12px 0 6px 0;
}
.leader-card p {
text-align: center;
line-height: 1.7;
}
/* === Section Divider — Soft Flow Wave === */
.section-divider {
height: 3px;
background: linear-gradient(90deg, transparent, var(--sf-primary-end), var(--sf-accent-warm), var(--sf-primary-end), transparent);
border: none;
margin: 48px auto;
opacity: 0.6;
border-radius: 2px;
}
/* === Program Sponsors / Logos === */
.sponsor-bar {
background: white;
border-radius: var(--sf-radius-lg);
padding: 40px;
margin: 28px 0;
box-shadow: var(--sf-shadow-soft);
display: flex;
justify-content: space-around;
align-items: center;
gap: 40px;
flex-wrap: wrap;
}
.sponsor-bar img {
max-height: 80px;
max-width: 200px;
object-fit: contain;
}
/* === FAQ Sections — Accordion Style === */
.faq-item {
background: #eeeeee;
border-radius: var(--sf-radius-md);
padding: 20px 24px;
margin: 12px 0;
box-shadow: var(--sf-shadow-soft);
transition: all 0.3s ease;
}
.faq-item:hover {
box-shadow: var(--sf-shadow-medium);
}
.faq-question {
font-weight: 600;
color: var(--sf-primary-start);
margin-bottom: 8px;
}
/* === Responsive Design — Soft Flow === */
/* Mobile-first: everything flows naturally on small screens */
@media screen and (max-width: 768px) {
.md-typeset {
padding: 20px 12px;
margin: 0 auto;
}
.profile-card,
.leader-card,
.speaker-card,
.session-card {
border-radius: var(--sf-radius-md);
padding: 20px;
}
/* Stack speaker cards on mobile: image centered on top, text centered below */
.speaker-card {
text-align: center;
}
.speaker-card img,
.speaker-card .speaker-img {
float: none;
display: block;
margin: 0 auto 16px auto;
width: 110px;
height: 110px;
}
/* Profile cards become single-column */
.leader-grid {
grid-template-columns: 1fr;
}
/* Wide tables scroll inside their own container (not the page). Cell text
still wraps — no forced nowrap — so narrow tables stay readable. */
.md-typeset table:not(.highlighttable) {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Sponsor bar stacks vertically */
.sponsor-bar {
flex-direction: column;
padding: 28px 20px;
}
/* Smaller profile images on mobile */
.profile-card img,
.leader-card img {
width: 100px;
height: 100px;
}
/* Header stays flat/straight-edged on mobile too */
.md-header {
border-radius: 0;
}
/* Slightly smaller header logo on narrow screens so it doesn't crowd the search icon */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
height: 1.8rem;
}
/* Reduce spacing on mobile */
hr,
.section-divider {
margin: 32px auto;
}
.faq-item {
padding: 16px;
}
}
/* Tablet sizing */
@media screen and (min-width: 769px) and (max-width: 1024px) {
.md-typeset {
max-width: 720px;
}
.leader-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Large screens — enhanced soft flow */
@media screen and (min-width: 1280px) {
.md-typeset {
max-width: 960px;
}
}
/* === Dark Mode — Soft Flow Slate === */
[data-md-color-scheme="slate"] body {
background: linear-gradient(180deg, #120a0d 0%, #170d11 30%, #100a0c 70%, #180f13 100%);
}
[data-md-color-scheme="slate"] .profile-card,
[data-md-color-scheme="slate"] .leader-card,
[data-md-color-scheme="slate"] .speaker-card,
[data-md-color-scheme="slate"] .session-card,
[data-md-color-scheme="slate"] .faq-item {
background: #444;
}
[data-md-color-scheme="slate"] .profile-card::before,
[data-md-color-scheme="slate"] .leader-card::before,
[data-md-color-scheme="slate"] .speaker-card::before {
background: linear-gradient(135deg, #b23a5c, #ffbc19);
}
/* Header stays maroon in both schemes. */
[data-md-color-scheme="slate"] .md-header {
background: #991E4E;
}
[data-md-color-scheme="slate"] .md-typeset :not(pre) > code {
background: #2b1a1e;
color: #f3d9a6;
}
[data-md-color-scheme="slate"] .learning-outcomes {
background: linear-gradient(135deg, #2a0f1c, #3d0417);
}
[data-md-color-scheme="slate"] .highlight-box {
background: linear-gradient(135deg, #422006, #713f12);
}
[data-md-color-scheme="slate"] .md-typeset table:not(.highlighttable) td {
background: #221316;
border-bottom-color: rgba(234, 170, 0, 0.1);
}
[data-md-color-scheme="slate"] .md-typeset table:not(.highlighttable) tr:hover td {
background: #2c1a1e;
}
[data-md-color-scheme="slate"] .sponsor-bar {
background: #221316;
}
[data-md-color-scheme="slate"] .profile-links a {
background: linear-gradient(135deg, #3d0417, #991E4E);
color: #eaaa00;
border-color: rgba(234, 170, 0, 0.25);
}
[data-md-color-scheme="slate"] .profile-links a:hover {
background: var(--sf-accent-warm);
color: var(--sf-primary-end);
}
/* --- Dark-mode contrast parity --- */
/* Card / accent headings: gold reads at ~7:1 on these dark panels (AA/AAA safe) */
[data-md-color-scheme="slate"] .speaker-card h4,
[data-md-color-scheme="slate"] .leader-card h4,
[data-md-color-scheme="slate"] .faq-question,
[data-md-color-scheme="slate"] .profile-card-name,
[data-md-color-scheme="slate"] .md-nav__item--section > .md-nav__link {
color: var(--sf-accent-warm);
}
/* Body links: gold on dark surfaces clears AA comfortably (no need for the
light-mode "-strong" darkened shade here). */
[data-md-color-scheme="slate"] .md-typeset a {
color: #90CAF9;
}
[data-md-color-scheme="slate"] .md-typeset a:hover {
color: #BBDEFB;
}
/* Blockquote / at-a-glance lead on dark */
[data-md-color-scheme="slate"] .md-typeset blockquote {
background: #444;
border-left-color: #555;
}
/* Display-math panel on dark */
[data-md-color-scheme="slate"] .md-typeset div.arithmatex {
background: rgba(234, 170, 0, 0.1);
}
/* Sponsor logos: institutional marks are often dark artwork, so keep them on a
light neutral plate even in dark mode to guarantee they stay visible. */
[data-md-color-scheme="slate"] .sponsor-bar {
background: #f7f4f0;
}
/* === Smooth Scroll Behavior === */
html {
scroll-behavior: smooth;
}
/* === Footer — Soft Flow === */
.md-footer {
background: #991E4E;
border-radius: 0;
margin-top: 60px;
}
/* === Navigation Sidebar — Soft Flow === */
.md-sidebar__scrollwrap {
scrollbar-width: thin;
scrollbar-color: rgba(90, 7, 34, 0.3) transparent;
}
.md-sidebar__scrollwrap::-webkit-scrollbar {
width: 6px;
}
.md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
background: rgba(90, 7, 34, 0.3);
border-radius: 3px;
}
/* === TOC / Table of Contents — Soft Pill Items === */
.md-nav__item--section > .md-nav__link {
font-weight: 600;
color: var(--sf-primary-start);
}
.md-nav__link:hover {
background: transparent;
border-radius: 0;
}
/* === Search Box — Soft Flow ===
Material nests the input in `.md-search__inner` > `.md-search__form`. We keep those
containers transparent (no shaded rectangle behind the pill) and give ONLY the input
itself a subtle translucent fill so it reads as one clean rounded field on the header. */
.md-search__inner,
.md-search__form {
background: transparent;
box-shadow: none;
}
.md-search__input {
border-radius: var(--sf-radius-xl);
background: rgba(255, 255, 255, 0.15);
transition: all 0.3s ease;
}
.md-search__input:focus {
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}
[data-md-color-scheme="slate"] .md-search__inner,
[data-md-color-scheme="slate"] .md-search__form {
background: transparent;
box-shadow: none;
}
[data-md-color-scheme="slate"] .md-search__input {
background: rgba(255, 255, 255, 0.08);
}
/* === Progress Indicator (instant nav) === */
.md-progress {
background: transparent;
}
.md-progress__chunk {
background: var(--sf-accent-warm);
transition: width 0.15s ease;
}
/* === Print Styles === */
@media print {
.md-header,
.md-sidebar,
.md-nav,
.md-footer,
.md-top {
display: none !important;
}
.md-typeset {
max-width: 100%;
padding: 0;
margin: 0;
}
.profile-card,
.leader-card,
.speaker-card,
.session-card {
box-shadow: none;
border: 1px solid #ddd;
break-inside: avoid;
}
}
/* === Loading / Transition Animations === */
@keyframes softFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.md-typeset > * {
animation: softFadeIn 0.5s ease forwards;
}
/* Stagger children slightly */
.md-typeset > *:nth-child(1) { animation-delay: 0.05s; }
.md-typeset > *:nth-child(2) { animation-delay: 0.1s; }
.md-typeset > *:nth-child(3) { animation-delay: 0.15s; }
.md-typeset > *:nth-child(4) { animation-delay: 0.2s; }
.md-typeset > *:nth-child(5) { animation-delay: 0.25s; }
/* === Workflow Diagram / ASCII Art Containers === */
.md-typeset pre {
border-radius: var(--sf-radius-md);
background: linear-gradient(135deg, #faf7f1, #f5ecdd);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
}
[data-md-color-scheme="slate"] .md-typeset pre {
background: linear-gradient(135deg, #241318, #1b1013);
}
/* === Checklist / Task Lists — Soft Flow === */
.task-list-item {
padding: 8px 0;
}
.task-list-item input[type="checkbox"]:checked {
background: var(--sf-gradient-main);
border-color: transparent;
box-shadow: none;
}
/* === Accessibility: Visible Focus States === */
/* Keyboard focus gets a clear, on-brand ring on interactive elements. */
.md-typeset a:focus-visible,
.md-button:focus-visible,
.colab-link:focus-visible,
.github-link:focus-visible,
.profile-links a:focus-visible,
.speaker-card a:focus-visible,
.leader-card a:focus-visible {
outline: 3px solid var(--sf-accent-warm-strong);
outline-offset: 2px;
border-radius: var(--sf-radius-sm);
}
/* Pure gold reads at full contrast against dark surfaces, so dark mode can use the
brighter brand gold for the focus ring instead of the light-mode-safe darker shade. */
[data-md-color-scheme="slate"] .md-typeset a:focus-visible,
[data-md-color-scheme="slate"] .md-button:focus-visible {
outline-color: var(--sf-accent-warm);
}
/* === Accessibility: Respect Reduced-Motion Preference === */
/* Users who ask for less motion get no fade-in, hover-lift, or smooth-scroll. */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after,
.md-typeset > * {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0ms !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
/* Neutralize hover/entry transforms so nothing shifts under reduced motion */
.profile-card:hover,
.speaker-card:hover,
.leader-card:hover,
.session-card:hover,
.md-button:hover,
.colab-link:hover,
.github-link:hover,
.profile-links a:hover {
transform: none;
}
}
/* === Video embed — responsive 16:9 player (for Workshop Video recordings) === */
.video-embed {
position: relative;
width: 100%;
max-width: 820px;
margin: 1.5rem auto;
aspect-ratio: 16 / 9;
border-radius: var(--sf-radius-md);
overflow: hidden;
box-shadow: var(--sf-shadow-medium);
background: #000;
}
.video-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* === Home hero — logo image beside the intro text ===
Desktop: text on the left, image on the right.
Small screens: stacks with the image FIRST, then the text below. */
.hero {
display: flex;
align-items: center;
gap: 2rem;
margin: 1rem 0 2.5rem;
}
.hero-body {
flex: 1 1 58%;
min-width: 0;
}
.hero-body > :first-child {
margin-top: 0;
}
.hero-media {
flex: 0 0 300px;
max-width: 300px;
}
.hero-media img {
width: 100%;
height: auto;
border-radius: var(--sf-radius-lg);
box-shadow: var(--sf-shadow-medium);
background: #ffffff;
padding: 1.25rem;
}
@media screen and (max-width: 48em) {
.hero {
flex-direction: column-reverse;
gap: 1.25rem;
}
.hero-media {
flex-basis: auto;
max-width: 220px;
margin: 0 auto;
}
}
/* === Logo at the top of the left navigation sidebar (injected by sidebar-logo.js) === */
.md-sidebar-logo {
text-align: center;
padding: 0.6rem 0.8rem 0.4rem;
}
.md-sidebar-logo img {
max-width: 220px;
width: 88%;
height: auto;
border-radius: var(--sf-radius-md);
background: #ffffff;
padding: 0.4rem;
}