Current section
Files
Jump to
Current section
Files
priv/default_theme/assets/css/main.css
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@source "../../layouts";
@source "../../../../lib/sayfa/blocks";
/* Self-hosted fonts — Inter (latin-ext + latin) */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/inter-latin-ext-400.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/inter-latin-400.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/inter-latin-ext-500.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/inter-latin-500.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/inter-latin-ext-600.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/inter-latin-600.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/inter-latin-ext-700.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/inter-latin-700.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Self-hosted fonts — Noto Sans Arabic */
@font-face {
font-family: "Noto Sans Arabic";
font-style: normal;
font-weight: 400;
font-display: fallback;
src: url("/assets/fonts/noto-sans-arabic-400.woff2") format("woff2");
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: "Noto Sans Arabic";
font-style: normal;
font-weight: 500;
font-display: fallback;
src: url("/assets/fonts/noto-sans-arabic-500.woff2") format("woff2");
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: "Noto Sans Arabic";
font-style: normal;
font-weight: 600;
font-display: fallback;
src: url("/assets/fonts/noto-sans-arabic-600.woff2") format("woff2");
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
font-family: "Noto Sans Arabic";
font-style: normal;
font-weight: 700;
font-display: fallback;
src: url("/assets/fonts/noto-sans-arabic-700.woff2") format("woff2");
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* Self-hosted fonts — JetBrains Mono (latin-ext + latin) */
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/jetbrains-mono-latin-ext-400.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/jetbrains-mono-latin-400.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/jetbrains-mono-latin-ext-500.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/jetbrains-mono-latin-500.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/**
* Catppuccin Theme for Static Sites
* Light: Catppuccin Latte | Dark: Catppuccin Mocha
*
* Complete production-ready theme with:
* - Semantic color tokens
* - WCAG AA compliant contrast
* - Smooth dark mode transitions
* - Comprehensive component styles
*/
/* ============================================================================
CATPPUCCIN LATTE (Light Mode)
============================================================================ */
/* Color scheme — drives code-block light/dark() switching (Lumis multi-themes).
:root follows the system preference; the explicit classes let a future
manual toggle force a scheme, and code colors track it automatically. */
:root {
color-scheme: light dark;
}
.theme-light {
color-scheme: light;
}
.dark,
.theme-dark {
color-scheme: dark;
}
:root,
.theme-light {
/* Catppuccin Latte Palette */
--ctp-rosewater: #dc8a78;
--ctp-flamingo: #dd7878;
--ctp-pink: #ea76cb;
--ctp-mauve: #8839ef;
--ctp-red: #d20f39;
--ctp-maroon: #e64553;
--ctp-peach: #fe640b;
--ctp-yellow: #df8e1d;
--ctp-green: #40a02b;
--ctp-teal: #179299;
--ctp-sky: #04a5e5;
--ctp-sapphire: #209fb5;
--ctp-blue: #1e66f5;
--ctp-lavender: #7287fd;
--ctp-text: #4c4f69;
--ctp-subtext1: #5c5f77;
--ctp-subtext0: #6c6f85;
--ctp-overlay2: #7c7f93;
--ctp-overlay1: #8c8fa1;
--ctp-overlay0: #9ca0b0;
--ctp-surface2: #acb0be;
--ctp-surface1: #bcc0cc;
--ctp-surface0: #ccd0da;
--ctp-base: #eff1f5;
--ctp-mantle: #e6e9ef;
--ctp-crust: #dce0e8;
/* Semantic Tokens */
--bg: var(--ctp-base);
--surface: var(--ctp-mantle);
--surface-2: var(--ctp-surface0);
--text: var(--ctp-text);
--text-heading: var(--ctp-text);
--muted: var(--ctp-subtext0);
--border: var(--ctp-surface1);
--border-subtle: var(--ctp-surface0);
--accent: var(--ctp-blue);
--accent-hover: var(--ctp-sapphire);
--accent-active: var(--ctp-sky);
--accent-contrast: var(--ctp-base);
--success: var(--ctp-green);
--warning: var(--ctp-yellow);
--danger: var(--ctp-red);
--code-bg: var(--ctp-mantle);
--code-surface: var(--ctp-surface0);
--code-text: var(--ctp-text);
--code-accent: var(--ctp-mauve);
/* Component-specific */
--header-bg: color-mix(in srgb, var(--ctp-base) 95%, transparent);
--header-border: var(--ctp-surface1);
--footer-bg: var(--ctp-mantle);
--footer-text: var(--ctp-subtext1);
--card-bg: var(--ctp-mantle);
--card-border: var(--ctp-surface0);
--chip-bg: var(--ctp-surface0);
--chip-text: var(--ctp-subtext1);
/* State overlays */
--hover-overlay: color-mix(in srgb, var(--ctp-blue) 8%, transparent);
--active-overlay: color-mix(in srgb, var(--ctp-blue) 12%, transparent);
--focus-ring: var(--ctp-blue);
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(76 79 105 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(76 79 105 / 0.08), 0 2px 4px -2px rgb(76 79 105 / 0.05);
--shadow-lg: 0 10px 15px -3px rgb(76 79 105 / 0.1), 0 4px 6px -4px rgb(76 79 105 / 0.05);
/* Typography */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
/* Spacing (8px base) */
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2rem;
--space-6: 3rem;
--space-8: 4rem;
/* Radius */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
/* Transitions */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* ============================================================================
CATPPUCCIN MOCHA (Dark Mode)
============================================================================ */
.dark,
.theme-dark {
--ctp-rosewater: #f5e0dc;
--ctp-flamingo: #f2cdcd;
--ctp-pink: #f5c2e7;
--ctp-mauve: #cba6f7;
--ctp-red: #f38ba8;
--ctp-maroon: #eba0ac;
--ctp-peach: #fab387;
--ctp-yellow: #f9e2af;
--ctp-green: #a6e3a1;
--ctp-teal: #94e2d5;
--ctp-sky: #89dceb;
--ctp-sapphire: #74c7ec;
--ctp-blue: #89b4fa;
--ctp-lavender: #b4befe;
--ctp-text: #cdd6f4;
--ctp-subtext1: #bac2de;
--ctp-subtext0: #a6adc8;
--ctp-overlay2: #9399b2;
--ctp-overlay1: #7f849c;
--ctp-overlay0: #6c7086;
--ctp-surface2: #585b70;
--ctp-surface1: #45475a;
--ctp-surface0: #313244;
--ctp-base: #1e1e2e;
--ctp-mantle: #181825;
--ctp-crust: #11111b;
--bg: var(--ctp-base);
--surface: var(--ctp-mantle);
--surface-2: var(--ctp-surface0);
--text: var(--ctp-text);
--text-heading: var(--ctp-text);
--muted: var(--ctp-subtext0);
--border: var(--ctp-surface1);
--border-subtle: var(--ctp-surface0);
--accent: var(--ctp-blue);
--accent-hover: var(--ctp-sapphire);
--accent-active: var(--ctp-sky);
--accent-contrast: var(--ctp-base);
--success: var(--ctp-green);
--warning: var(--ctp-yellow);
--danger: var(--ctp-red);
--code-bg: var(--ctp-mantle);
--code-surface: var(--ctp-surface0);
--code-text: var(--ctp-text);
--code-accent: var(--ctp-mauve);
--header-bg: color-mix(in srgb, var(--ctp-base) 95%, transparent);
--header-border: var(--ctp-surface1);
--footer-bg: var(--ctp-mantle);
--footer-text: var(--ctp-subtext1);
--card-bg: var(--ctp-mantle);
--card-border: var(--ctp-surface0);
--chip-bg: var(--ctp-surface0);
--chip-text: var(--ctp-subtext1);
--hover-overlay: color-mix(in srgb, var(--ctp-blue) 8%, transparent);
--active-overlay: color-mix(in srgb, var(--ctp-blue) 12%, transparent);
--focus-ring: var(--ctp-blue);
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
}
@media (prefers-color-scheme: dark) {
:root:not(.theme-light) {
--ctp-rosewater: #f5e0dc;
--ctp-flamingo: #f2cdcd;
--ctp-pink: #f5c2e7;
--ctp-mauve: #cba6f7;
--ctp-red: #f38ba8;
--ctp-maroon: #eba0ac;
--ctp-peach: #fab387;
--ctp-yellow: #f9e2af;
--ctp-green: #a6e3a1;
--ctp-teal: #94e2d5;
--ctp-sky: #89dceb;
--ctp-sapphire: #74c7ec;
--ctp-blue: #89b4fa;
--ctp-lavender: #b4befe;
--ctp-text: #cdd6f4;
--ctp-subtext1: #bac2de;
--ctp-subtext0: #a6adc8;
--ctp-overlay2: #9399b2;
--ctp-overlay1: #7f849c;
--ctp-overlay0: #6c7086;
--ctp-surface2: #585b70;
--ctp-surface1: #45475a;
--ctp-surface0: #313244;
--ctp-base: #1e1e2e;
--ctp-mantle: #181825;
--ctp-crust: #11111b;
--bg: var(--ctp-base);
--surface: var(--ctp-mantle);
--surface-2: var(--ctp-surface0);
--text: var(--ctp-text);
--text-heading: var(--ctp-text);
--muted: var(--ctp-subtext0);
--border: var(--ctp-surface1);
--border-subtle: var(--ctp-surface0);
--accent: var(--ctp-blue);
--accent-hover: var(--ctp-sapphire);
--accent-active: var(--ctp-sky);
--accent-contrast: var(--ctp-base);
--success: var(--ctp-green);
--warning: var(--ctp-yellow);
--danger: var(--ctp-red);
--code-bg: var(--ctp-mantle);
--code-surface: var(--ctp-surface0);
--code-text: var(--ctp-text);
--code-accent: var(--ctp-mauve);
--header-bg: color-mix(in srgb, var(--ctp-base) 95%, transparent);
--header-border: var(--ctp-surface1);
--footer-bg: var(--ctp-mantle);
--footer-text: var(--ctp-subtext1);
--card-bg: var(--ctp-mantle);
--card-border: var(--ctp-surface0);
--chip-bg: var(--ctp-surface0);
--chip-text: var(--ctp-subtext1);
--hover-overlay: color-mix(in srgb, var(--ctp-blue) 8%, transparent);
--active-overlay: color-mix(in srgb, var(--ctp-blue) 12%, transparent);
--focus-ring: var(--ctp-blue);
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
}
}
/* ============================================================================
BASE STYLES
============================================================================ */
html.site-root {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--bg);
color: var(--text);
}
body.site-body {
font-family: "Inter", "Noto Sans Arabic", system-ui, sans-serif;
line-height: var(--line-height-normal);
background-color: var(--bg);
color: var(--text);
display: flex;
flex-direction: column;
min-height: 100vh;
}
*:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
color: var(--text-heading);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
}
h1 { font-size: 2.25rem; font-weight: var(--font-weight-bold); letter-spacing: -0.025em; }
h2 { font-size: 1.875rem; letter-spacing: -0.025em; }
h3 { font-size: 1.5rem; line-height: var(--line-height-snug); }
h4 { font-size: 1.25rem; line-height: var(--line-height-snug); }
h5 { font-size: 1.125rem; font-weight: var(--font-weight-medium); }
h6 { font-size: 1rem; font-weight: var(--font-weight-medium); }
p { line-height: var(--line-height-relaxed); }
a {
color: var(--accent);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover { color: var(--accent-hover); }
code {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.875em;
background-color: var(--code-surface);
color: var(--code-text);
padding: 0.125rem 0.375rem;
border-radius: var(--radius-sm);
}
pre {
font-family: "JetBrains Mono", ui-monospace, monospace;
background-color: var(--code-bg);
color: var(--code-text);
padding: var(--space-3);
border-radius: var(--radius-md);
overflow-x: auto;
line-height: var(--line-height-relaxed);
border: 1px solid var(--border);
}
pre code {
background-color: transparent;
padding: 0;
}
strong { font-weight: var(--font-weight-semibold); }
em { font-style: italic; }
blockquote {
border-left: 4px solid var(--border);
padding-left: var(--space-3);
color: var(--muted);
font-style: italic;
margin: var(--space-3) 0;
}
hr {
border: none;
border-top: 1px solid var(--border);
margin: var(--space-4) 0;
}
ul, ol {
padding-left: var(--space-3);
line-height: var(--line-height-relaxed);
}
li { margin-bottom: var(--space-1); }
/* ============================================================================
LAYOUT COMPONENTS
============================================================================ */
.container-content {
max-width: 65ch;
margin-left: auto;
margin-right: auto;
padding-left: var(--space-3);
padding-right: var(--space-3);
}
.container-content-wide {
max-width: 80rem;
margin-left: auto;
margin-right: auto;
padding-left: var(--space-3);
padding-right: var(--space-3);
}
.page-wrapper {
flex: 1;
padding-top: var(--space-4);
padding-bottom: var(--space-8);
}
/* ============================================================================
HEADER
============================================================================ */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background-color: var(--header-bg);
border-bottom: 1px solid var(--header-border);
backdrop-filter: blur(8px);
}
.header-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-2) var(--space-3);
gap: var(--space-4);
}
.nav-link {
color: var(--text);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
font-weight: var(--font-weight-medium);
}
.nav-link:hover {
color: var(--accent);
background-color: var(--hover-overlay);
}
.nav-link.active,
.nav-link[aria-current="page"] {
color: var(--accent);
background-color: var(--active-overlay);
}
.mobile-menu-toggle {
display: none;
padding: var(--space-1);
border-radius: var(--radius-md);
background-color: transparent;
color: var(--text);
border: none;
cursor: pointer;
transition: background-color var(--transition-fast);
}
.mobile-menu-toggle:hover {
background-color: var(--hover-overlay);
}
@media (max-width: 768px) {
.mobile-menu-toggle { display: flex; }
.nav-menu {
display: none;
}
.nav-menu.open {
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--header-bg);
border-bottom: 1px solid var(--header-border);
padding: var(--space-2);
box-shadow: var(--shadow-lg);
}
}
/* ============================================================================
FOOTER
============================================================================ */
.site-footer {
background-color: var(--footer-bg);
color: var(--footer-text);
padding: var(--space-4) 0;
border-top: 1px solid var(--border);
margin-top: auto;
}
.footer-content {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
justify-content: space-between;
align-items: center;
}
.footer-link {
color: var(--footer-text);
transition: color var(--transition-fast);
}
.footer-link:hover {
color: var(--accent);
}
/* ============================================================================
CARDS
============================================================================ */
.card,
.content-card,
.note-card,
.project-card {
background-color: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--radius-lg);
padding: var(--space-3);
transition: all var(--transition-base);
}
.card:hover,
.content-card:hover,
.note-card:hover,
.project-card:hover {
border-color: var(--border);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.featured-content-card {
background: linear-gradient(135deg, var(--card-bg) 0%, color-mix(in srgb, var(--accent) 3%, var(--card-bg)) 100%);
border-color: var(--accent);
border-width: 2px;
}
.card-title {
font-size: 1.125rem;
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-1);
transition: color var(--transition-fast);
}
a:hover .card-title {
color: var(--accent);
}
.card-meta {
display: flex;
gap: var(--space-2);
align-items: center;
font-size: 0.875rem;
color: var(--muted);
margin-bottom: var(--space-2);
flex-wrap: wrap;
}
.card-excerpt {
color: var(--text);
line-height: var(--line-height-relaxed);
}
/* ============================================================================
BUTTONS
============================================================================ */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-md);
font-weight: var(--font-weight-medium);
transition: all var(--transition-fast);
cursor: pointer;
border: none;
text-decoration: none;
font-size: 0.875rem;
}
.btn-primary {
background-color: var(--accent);
color: var(--accent-contrast);
}
.btn-primary:hover:not(:disabled) {
background-color: var(--accent-hover);
}
.btn-subtle {
background-color: var(--surface-2);
color: var(--text);
}
.btn-subtle:hover:not(:disabled) {
background-color: var(--border);
}
.btn-icon {
padding: var(--space-1);
background-color: transparent;
min-width: 2.5rem;
min-height: 2.5rem;
justify-content: center;
}
.btn-icon:hover:not(:disabled) {
background-color: var(--hover-overlay);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn:active:not(:disabled) {
transform: scale(0.98);
}
/* ============================================================================
CHIPS / TAGS / CATEGORIES
============================================================================ */
.chip,
.tag-chip,
.category-chip,
.status-chip {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.75rem;
background-color: var(--chip-bg);
color: var(--chip-text);
border-radius: var(--radius-xl);
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
transition: all var(--transition-fast);
text-decoration: none;
}
.chip:hover,
.tag-chip:hover,
.category-chip:hover {
background-color: var(--border);
color: var(--accent);
}
.tag-chip::before,
.chip.tag::before {
content: "#";
opacity: 0.7;
}
.category-chip::before,
.chip.category::before {
content: "📁";
font-size: 0.875em;
}
.status-chip {
background-color: color-mix(in srgb, var(--success) 20%, var(--chip-bg));
color: var(--success);
}
.status-chip.ongoing {
background-color: color-mix(in srgb, var(--warning) 20%, var(--chip-bg));
color: var(--warning);
}
/* ============================================================================
BREADCRUMB
============================================================================ */
.breadcrumb {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: 0.875rem;
color: var(--muted);
margin-bottom: var(--space-3);
}
.breadcrumb-link {
color: var(--muted);
transition: color var(--transition-fast);
}
.breadcrumb-link:hover {
color: var(--accent);
}
.breadcrumb-separator {
opacity: 0.5;
}
/* ============================================================================
TABLE OF CONTENTS
============================================================================ */
.toc {
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-3);
}
.toc-title {
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-2);
color: var(--text-heading);
}
.toc-list {
list-style: none;
padding: 0;
}
.toc-item {
margin-bottom: 0;
}
.toc-link {
display: block;
padding: var(--space-1);
color: var(--text);
border-inline-start: 2px solid transparent;
padding-inline-start: var(--space-2);
transition: all var(--transition-fast);
}
.toc-link:hover {
color: var(--accent);
background-color: var(--hover-overlay);
}
.toc-link.active {
color: var(--accent);
border-inline-start-color: var(--accent);
background-color: var(--active-overlay);
}
.toc-mobile {
margin-bottom: var(--space-3);
}
.toc-mobile summary {
cursor: pointer;
padding: var(--space-2);
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-weight: var(--font-weight-medium);
user-select: none;
transition: background-color var(--transition-fast);
}
.toc-mobile[open] summary {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.toc-mobile summary:hover {
background-color: var(--surface-2);
}
/* ============================================================================
CODE BLOCKS
============================================================================ */
.code-block-wrapper {
position: relative;
margin: var(--space-3) 0;
}
.code-block-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--code-bg);
border: 1px solid var(--border);
border-bottom: none;
border-top-left-radius: var(--radius-md);
border-top-right-radius: var(--radius-md);
padding: var(--space-1) var(--space-2);
}
.code-language {
font-family: "JetBrains Mono", monospace;
font-size: 0.75rem;
color: var(--code-accent);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: var(--font-weight-semibold);
}
.code-copy-btn {
padding: 0.25rem 0.5rem;
background-color: var(--surface-2);
color: var(--text);
border: none;
border-radius: var(--radius-sm);
font-size: 0.75rem;
cursor: pointer;
transition: all var(--transition-fast);
}
.code-copy-btn:hover {
background-color: var(--border);
}
.code-copy-btn.copied {
background-color: color-mix(in srgb, var(--success) 20%, var(--surface-2));
color: var(--success);
}
.code-block-wrapper pre {
margin: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* ============================================================================
PAGINATION
============================================================================ */
.pagination {
display: flex;
gap: var(--space-2);
justify-content: center;
align-items: center;
margin-top: var(--space-6);
flex-wrap: wrap;
}
.pagination-btn {
padding: var(--space-1) var(--space-2);
background-color: var(--surface-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius-md);
text-decoration: none;
transition: all var(--transition-fast);
min-width: 2.5rem;
text-align: center;
}
.pagination-btn:hover:not(:disabled):not(.current) {
background-color: var(--border);
border-color: var(--accent);
}
.pagination-btn.current {
background-color: var(--accent);
color: var(--accent-contrast);
border-color: var(--accent);
}
.pagination-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ============================================================================
LIST ENTRIES
============================================================================ */
.list-entry,
.entry-link-row {
padding: var(--space-3) 0;
border-bottom: 1px solid var(--border-subtle);
}
.list-entry:last-child,
.entry-link-row:last-child {
border-bottom: none;
}
.list-entry-link {
display: block;
color: inherit;
text-decoration: none;
}
.list-entry-title {
font-size: 1.25rem;
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-1);
transition: color var(--transition-fast);
}
.list-entry-link:hover .list-entry-title {
color: var(--accent);
}
.list-entry-meta {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
align-items: center;
font-size: 0.875rem;
color: var(--muted);
margin-bottom: var(--space-2);
}
.list-entry-excerpt {
color: var(--text);
line-height: var(--line-height-relaxed);
}
/* ============================================================================
CLOUDS (Tag/Category)
============================================================================ */
.tag-cloud,
.category-cloud,
.cloud {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
}
.cloud-item {
font-size: calc(0.875rem + var(--weight, 0) * 0.5rem);
opacity: calc(0.6 + var(--weight, 0) * 0.4);
}
/* ============================================================================
LANGUAGE SWITCHER
============================================================================ */
.language-switcher {
position: relative;
}
.language-toggle {
display: flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
background-color: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-fast);
font-weight: var(--font-weight-medium);
color: var(--text);
}
.language-toggle:hover {
background-color: var(--border);
}
.language-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
min-width: 10rem;
z-index: 100;
overflow: hidden;
}
.language-option {
display: block;
padding: var(--space-2);
color: var(--text);
text-decoration: none;
transition: all var(--transition-fast);
}
.language-option:hover {
background-color: var(--hover-overlay);
}
.language-option.current {
background-color: var(--active-overlay);
color: var(--accent);
}
/* ============================================================================
COPY LINK
============================================================================ */
.copy-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.5rem;
background-color: transparent;
color: var(--muted);
border: none;
border-radius: var(--radius-sm);
font-size: 0.875rem;
cursor: pointer;
transition: all var(--transition-fast);
}
.copy-link:hover {
background-color: var(--hover-overlay);
color: var(--accent);
}
.copy-link.copied {
color: var(--success);
}
/* ============================================================================
SOCIAL LINKS
============================================================================ */
.social-links {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
background-color: var(--surface-2);
border-radius: var(--radius-md);
color: var(--text);
transition: all var(--transition-fast);
}
.social-link:hover {
background-color: var(--accent);
color: var(--accent-contrast);
transform: translateY(-2px);
}
/* ============================================================================
FEED LINKS
============================================================================ */
.feed-links {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
}
.feed-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
background-color: var(--surface-2);
color: var(--text);
border-radius: var(--radius-md);
font-size: 0.875rem;
text-decoration: none;
transition: all var(--transition-fast);
}
.feed-link:hover {
background-color: var(--accent);
color: var(--accent-contrast);
}
/* ============================================================================
ARTICLE LAYOUT
============================================================================ */
.article-header {
margin-bottom: var(--space-6);
}
.article-title {
font-size: 2.5rem;
margin-bottom: var(--space-2);
}
.article-meta-row,
.meta-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
color: var(--muted);
font-size: 0.875rem;
margin-bottom: var(--space-3);
}
.article-hero {
width: 100%;
height: auto;
border-radius: var(--radius-lg);
margin-bottom: var(--space-4);
}
.article-content {
max-width: 65ch;
}
.article-content > * + * {
margin-top: var(--space-3);
}
.article-content h2 {
margin-top: var(--space-6);
margin-bottom: var(--space-3);
}
.article-content h3 {
margin-top: var(--space-4);
margin-bottom: var(--space-2);
}
/* ============================================================================
RELATED CONTENT
============================================================================ */
.related-content {
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid var(--border);
}
.related-title {
font-size: 1.5rem;
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-4);
}
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-3);
}
/* ============================================================================
ERROR PAGES
============================================================================ */
.error-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
text-align: center;
padding: var(--space-4);
}
.error-code {
font-size: 6rem;
font-weight: var(--font-weight-bold);
color: var(--accent);
line-height: 1;
margin-bottom: var(--space-2);
}
.error-title {
font-size: 1.5rem;
margin-bottom: var(--space-3);
}
.error-description {
color: var(--muted);
margin-bottom: var(--space-4);
max-width: 40ch;
}
/* ============================================================================
READING PROGRESS
============================================================================ */
.reading-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
background-color: var(--accent);
transform-origin: left;
z-index: 999;
}
/* ============================================================================
UTILITIES
============================================================================ */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* ============================================================================
SAYFA STATIC THEME ADAPTERS
============================================================================ */
@theme inline {
--font-sans: "Inter", "Noto Sans Arabic", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
--color-background: var(--bg);
--color-foreground: var(--text);
--color-card: var(--card-bg);
--color-card-foreground: var(--text);
--color-popover: var(--surface);
--color-popover-foreground: var(--text);
--color-primary: var(--accent);
--color-primary-foreground: var(--accent-contrast);
--color-secondary: var(--surface-2);
--color-secondary-foreground: var(--text);
--color-muted: var(--surface-2);
--color-muted-foreground: var(--muted);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-contrast);
--color-destructive: var(--danger);
--color-destructive-foreground: var(--bg);
--color-border: var(--border);
--color-input: var(--border);
--color-ring: var(--focus-ring);
}
html.site-root {
scroll-behavior: smooth;
scroll-padding-top: 5rem;
}
.site-body > main,
.site-body > .page-wrapper {
flex: 1;
}
/* Small icon utilities emitted by Elixir blocks/templates. */
.icon-2_5 { width: 0.625rem; height: 0.625rem; }
.icon-3 { width: 0.75rem; height: 0.75rem; }
.icon-3_5 { width: 0.875rem; height: 0.875rem; }
.icon-4 { width: 1rem; height: 1rem; }
.icon-5 { width: 1.25rem; height: 1.25rem; }
.icon-menu { width: 1.25rem; height: 1.25rem; }
.icon-chevron { width: 0.75rem; height: 0.75rem; transition: transform var(--transition-fast); }
.hidden { display: none !important; }
/* Reference shell aliases used by Sayfa blocks. */
.header-shell,
.site-header {
position: sticky;
top: 0;
z-index: 50;
background-color: var(--header-bg);
border-bottom: 1px solid var(--header-border);
backdrop-filter: blur(8px);
}
.header-container { max-width: 80rem; margin: 0 auto; padding: 0 var(--space-3); }
.header-row,
.header-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.header-brand-text { color: var(--text-heading); font-size: 1.125rem; font-weight: var(--font-weight-semibold); }
.header-brand-text:hover { color: var(--accent); }
.header-brand-logo { display: inline-flex; align-items: center; }
.header-logo,
.header-logo-light,
.header-logo-dark { max-height: 2rem; width: auto; }
.header-logo-dark { display: none; }
.dark .header-logo-light { display: none; }
.dark .header-logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
:root:not(.theme-light) .header-logo-light { display: none; }
:root:not(.theme-light) .header-logo-dark { display: block; }
}
.header-nav-left { display: flex; align-items: center; gap: var(--space-3); }
.header-nav-right { display: flex; align-items: center; gap: var(--space-2); }
.header-desktop-nav { display: flex; align-items: center; gap: var(--space-1); }
.header-nav-link,
.header-nav-link-active,
.nav-link { color: var(--text); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); transition: all var(--transition-fast); font-weight: var(--font-weight-medium); font-size: 0.9375rem; }
.header-nav-link:hover,
.header-nav-link-active,
.nav-link:hover,
.nav-link[aria-current="page"],
.nav-link.active { color: var(--accent); background-color: var(--hover-overlay); }
.header-nav-link-active,
.nav-link[aria-current="page"],
.nav-link.active { background-color: var(--active-overlay); }
.header-menu-toggle,
.mobile-menu-toggle { display: none; padding: var(--space-1); border: 0; background: transparent; color: var(--text); border-radius: var(--radius-md); }
.header-menu-toggle:hover,
.mobile-menu-toggle:hover { background-color: var(--hover-overlay); }
.header-mobile-menu { display: none; width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 var(--space-3) var(--space-2); }
.header-mobile-list { display: flex; flex-direction: column; gap: 0.25rem; padding-top: var(--space-2); border-top: 1px solid var(--header-border); }
.header-mobile-link,
.header-mobile-link-active { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); color: var(--text); font-weight: var(--font-weight-medium); }
.header-mobile-link:hover,
.header-mobile-link-active { color: var(--accent); background-color: var(--hover-overlay); }
@media (max-width: 768px) {
.header-desktop-nav { display: none; }
.header-menu-toggle,
.mobile-menu-toggle { display: inline-flex; }
}
/* Footer and feed links. */
.footer-shell,
.site-footer { background-color: var(--footer-bg); color: var(--footer-text); border-top: 1px solid var(--border); margin-top: auto; }
.footer-container { max-width: 80rem; margin: 0 auto; padding: var(--space-4) var(--space-3); }
.footer-content { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center; }
.footer-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.footer-copy { color: var(--footer-text); font-size: 0.875rem; }
.footer-social { display: flex; align-items: center; gap: var(--space-2); }
.footer-social .social-link { width: 2.5rem; height: 2.5rem; padding: 0; color: var(--text); }
.footer-social .social-link svg { width: 1.25rem; height: 1.25rem; }
.footer-feed-links { justify-content: center; }
.footer-link { color: var(--footer-text); transition: color var(--transition-fast); }
.footer-link:hover { color: var(--accent); }
@media (max-width: 48rem) {
.site-footer { padding: var(--space-3) 0; }
.footer-content { flex-direction: column; justify-content: center; gap: var(--space-3); text-align: center; }
.footer-copy { order: 1; }
.footer-feed-links { order: 2; }
.footer-social { order: 3; justify-content: center; }
}
.feed-links-row,
.feed-links-inline,
.feed-links { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; color: var(--muted); font-size: 0.875rem; }
.feed-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.feed-link { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; background-color: var(--surface-2); color: var(--text); border-radius: var(--radius-md); font-size: 0.875rem; text-decoration: none; transition: all var(--transition-fast); }
.feed-link:hover { background-color: var(--accent); color: var(--accent-contrast); }
.feed-tooltip-wrap { position: relative; }
.feed-tooltip { pointer-events: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 0.375rem; border-radius: var(--radius-sm); padding: 0.125rem 0.5rem; white-space: nowrap; opacity: 0; transition: opacity var(--transition-fast); background: var(--text); color: var(--bg); font-size: 0.75rem; }
.feed-tooltip-wrap:hover .feed-tooltip { opacity: 1; }
.feed-separator { opacity: 0.6; }
/* Language switcher: keep legacy IDs, use reference classes. */
.lang-switcher,
.language-switcher { position: relative; }
.lang-toggle,
.language-toggle { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); background-color: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); font-weight: var(--font-weight-medium); color: var(--text); }
.lang-toggle:hover,
.language-toggle:hover { background-color: var(--border); }
.lang-current-code { font-size: 0.75rem; font-weight: var(--font-weight-semibold); }
.lang-menu,
.language-dropdown { position: absolute; top: calc(100% + 0.5rem); right: 0; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); min-width: 10rem; z-index: 100; overflow: hidden; }
[dir="rtl"] .lang-menu,
[dir="rtl"] .language-dropdown { right: auto; left: 0; }
.lang-item-current,
.lang-item-link,
.language-option { display: block; padding: var(--space-2); color: var(--text); text-decoration: none; transition: all var(--transition-fast); font-size: 0.875rem; }
.lang-item-link:hover,
.language-option:hover { background-color: var(--hover-overlay); }
.lang-item-current,
.language-option.current { background-color: var(--active-overlay); color: var(--accent); font-weight: var(--font-weight-medium); }
[id^="lang-toggle"][aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
/* Content structure shared by EEx templates. */
.section-spacing { padding-bottom: var(--space-6); }
.section-spacing-lg { padding-bottom: var(--space-8); }
.section-title,
.home-connect-title { font-size: 1.5rem; font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3); color: var(--text-heading); }
.home-connect-section { margin-bottom: var(--space-8); text-align: center; }
.home-connect-section .social-links { justify-content: center; }
.home-connect-section .social-link { width: 2.75rem; height: 2.75rem; padding: 0; }
.home-connect-section .social-link svg { width: 1.35rem; height: 1.35rem; }
.list-page-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.list-page-header .page-list-title { margin-bottom: 0; }
@media (max-width: 48rem) { .list-page-header { align-items: flex-start; flex-direction: column; } }
.page-list-title,
.page-title-xl,
.page-title-lg { color: var(--text-heading); font-weight: var(--font-weight-bold); letter-spacing: -0.025em; }
.page-list-title { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: var(--space-4); }
.page-title-xl,
.article-title { font-size: clamp(2.25rem, 6vw, 3.5rem); margin-bottom: var(--space-2); }
.page-title-lg { font-size: clamp(1.875rem, 4vw, 2.5rem); margin-bottom: var(--space-2); }
.content-layout { display: grid; gap: var(--space-6); }
.content-main { min-width: 0; }
@media (min-width: 64rem) { .content-layout { grid-template-columns: minmax(0, 1fr) 250px; gap: var(--space-4); } }
.content-header,
.content-header-sm,
.article-header { margin-bottom: var(--space-6); }
.content-type-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.content-type-badge,
.content-status-badge,
.status-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; border-radius: var(--radius-xl); background-color: var(--chip-bg); color: var(--chip-text); font-size: 0.875rem; font-weight: var(--font-weight-medium); }
.content-status-badge,
.status-chip { background-color: color-mix(in srgb, var(--success) 20%, var(--chip-bg)); color: var(--success); }
.content-meta-row,
.content-meta-row-tight,
.article-meta-row,
.meta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; color: var(--muted); font-size: 0.875rem; margin-bottom: var(--space-3); }
.content-meta-row-tight { gap: var(--space-2); }
.content-meta-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.content-meta-separator { opacity: 0.6; }
.content-actions-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.content-chip-row,
.content-chip-row-tight { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-3); }
.content-figure { margin: 0 0 var(--space-4); }
.content-image,
.article-hero { width: 100%; height: auto; border-radius: var(--radius-lg); margin-bottom: var(--space-4); box-shadow: var(--shadow-md); }
.article-hero { max-height: 30rem; aspect-ratio: 16 / 9; object-fit: cover; }
.note-container { border-top: 2px solid var(--accent); padding-top: var(--space-4); }
.empty-state-text { color: var(--muted); padding: var(--space-4) 0; }
/* Chips/buttons/actions. */
.chip-category-link,
.chip-tag-link,
.chip-category,
.chip-tag,
.chip-status,
.chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; background-color: var(--chip-bg); color: var(--chip-text); border-radius: var(--radius-xl); font-size: 0.875rem; font-weight: var(--font-weight-medium); transition: all var(--transition-fast); text-decoration: none; }
.chip-category-link:hover,
.chip-tag-link:hover,
.chip-category:hover,
.chip-tag:hover,
.chip:hover { background-color: var(--border); color: var(--accent); }
.chip-tag::before,
.chip.tag::before { content: "#"; opacity: 0.7; }
.chip-category::before,
.chip.category::before { content: "📁"; font-size: 0.875em; }
.chip-category svg,
.chip-tag svg { display: none; }
.btn-primary-sm,
.talk-action-link,
.error-home-link { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); font-weight: var(--font-weight-medium); transition: all var(--transition-fast); border: 0; text-decoration: none; font-size: 0.875rem; background-color: var(--accent); color: var(--accent-contrast); }
.btn-primary-sm:hover,
.talk-action-link:hover,
.error-home-link:hover { background-color: var(--accent-hover); color: var(--accent-contrast); }
.btn-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
/* Cards and lists. */
.notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3); }
.cards-stack { display: grid; gap: var(--space-3); }
.list-stack { background-color: var(--surface); border-radius: var(--radius-lg); padding: var(--space-3); }
.content-card,
.card { display: block; color: var(--text); text-decoration: none; }
.content-card-note,
.content-card-project { height: 100%; }
.content-card-title,
.content-card-title-clamp,
.card-title { font-size: 1.125rem; font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); color: var(--text-heading); transition: color var(--transition-fast); }
.content-card-title-clamp,
.card-title-clamp { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.content-card:hover .content-card-title,
.content-card:hover .content-card-title-clamp,
.card:hover .card-title-clamp { color: var(--accent); }
.content-card-date,
.card-date,
.entry-link-date { color: var(--muted); font-size: 0.875rem; }
.content-card-date-wrap,
.card-date-wrap { margin-top: var(--space-2); }
.content-card-header,
.card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.card-note,
.card-project { height: 100%; display: flex; flex-direction: column; }
.card-note .card-date-wrap,
.card-project .card-meta { margin-top: auto; }
.content-card-excerpt,
.content-card-excerpt-clamp,
.card-excerpt,
.card-excerpt-clamp { color: var(--text); line-height: var(--line-height-relaxed); }
.content-card-excerpt-clamp,
.card-excerpt-clamp { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.content-card-meta,
.card-meta,
.list-entry-meta { display: flex; gap: var(--space-2); align-items: center; color: var(--muted); font-size: 0.875rem; margin-top: var(--space-2); flex-wrap: wrap; }
.list-chip-group { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.list-entry { display: block; color: inherit; text-decoration: none; }
.list-entry-title { font-size: 1.25rem; font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); color: var(--text-heading); transition: color var(--transition-fast); }
.list-entry:hover .list-entry-title { color: var(--accent); }
.recent-section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.section-link { color: var(--accent); font-weight: var(--font-weight-medium); display: inline-flex; align-items: center; gap: 0.25rem; }
.recent-article-list { background-color: var(--surface); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); }
.featured-link { display: block; color: inherit; text-decoration: none; }
.featured-title { font-size: 1.5rem; font-weight: var(--font-weight-bold); color: var(--text-heading); }
.featured-label { color: var(--accent); font-size: 0.75rem; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 0.375rem; margin-bottom: var(--space-1); }
.featured-description { color: var(--text); margin-top: var(--space-1); }
.featured-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--muted); margin-top: var(--space-2); font-size: 0.875rem; }
.featured-meta-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.featured-accent { padding: var(--space-3); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--card-bg) 0%, color-mix(in srgb, var(--accent) 3%, var(--card-bg)) 100%); border: 2px solid var(--accent); }
.entry-link-row { display: flex; align-items: baseline; gap: var(--space-3); color: inherit; text-decoration: none; }
.entry-link-title { color: var(--text-heading); font-weight: var(--font-weight-medium); }
.entry-link-row:hover .entry-link-title { color: var(--accent); }
.related-section,
.related-content { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.related-title { font-size: 1.5rem; font-weight: var(--font-weight-semibold); margin-bottom: var(--space-4); color: var(--text-heading); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-3); }
/* Breadcrumb / back link. */
.back-link,
.breadcrumb { display: flex; align-items: center; gap: var(--space-1); font-size: 0.875rem; color: var(--muted); margin-bottom: var(--space-3); }
.back-link:hover,
.breadcrumb-link:hover { color: var(--accent); }
.breadcrumb-link { color: var(--muted); }
.breadcrumb-separator { opacity: 0.5; }
.back-link-icon { flex-shrink: 0; transition: transform var(--transition-fast); }
.back-link:hover .back-link-icon { transform: translateX(-3px); }
[dir="rtl"] .back-link-icon { transform: scaleX(-1); }
[dir="rtl"] .back-link:hover .back-link-icon { transform: scaleX(-1) translateX(-3px); }
/* TOC. */
.toc-sidebar { display: none; }
@media (min-width: 64rem) { .toc-sidebar { display: block; } .toc-mobile, .toc-mobile-wrap { display: none; } }
.toc-nav,
.toc-sidebar .toc { position: sticky; top: 5rem; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3); }
.toc-heading,
.toc-title { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); color: var(--text-heading); font-size: 1rem; }
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li { margin: 0; }
.toc-link,
.toc-link-l2,
.toc-link-l3 { display: block; padding: var(--space-1); color: var(--text); border-left: 2px solid transparent; padding-left: var(--space-2); transition: all var(--transition-fast); }
.toc-link-l3 { padding-left: var(--space-3); font-size: 0.875rem; }
.toc-link:hover,
.toc-link-l2:hover,
.toc-link-l3:hover { color: var(--accent); background-color: var(--hover-overlay); }
.toc-active,
.toc-link.active { color: var(--accent); border-left-color: var(--accent); background-color: var(--active-overlay); }
.toc-mobile-wrap { margin-bottom: var(--space-3); }
.toc-mobile { margin-bottom: var(--space-3); }
.toc-mobile > summary { cursor: pointer; padding: var(--space-2); background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); font-weight: var(--font-weight-medium); user-select: none; transition: background-color var(--transition-fast); color: var(--text-heading); }
.toc-mobile[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.toc-mobile > summary:hover { background-color: var(--surface-2); }
.toc-mobile > .toc-list { margin-top: var(--space-3); }
/* Markdown/prose. */
.prose-content,
.prose-page,
.prose-article,
.article-content { max-width: 65ch; }
.prose-content,
.prose-page,
.prose-article { color: var(--text); }
.prose-content > * + *,
.prose-page > * + *,
.prose-article > * + *,
.article-content > * + * { margin-top: var(--space-3); }
.prose-content h2,
.prose-page h2,
.prose-article h2,
.article-content h2 { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.prose-content h3,
.prose-page h3,
.prose-article h3,
.article-content h3 { margin-top: var(--space-4); margin-bottom: var(--space-2); }
.prose-content img,
.prose-page img,
.prose-article img,
.article-content img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.prose-content table,
.prose-page table,
.prose-article table,
.article-content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.prose-content th,
.prose-content td,
.prose-page th,
.prose-page td,
.prose-article th,
.prose-article td,
.article-content th,
.article-content td { border: 1px solid var(--border); padding: var(--space-1) var(--space-2); }
.prose-content th,
.prose-page th,
.prose-article th,
.article-content th { background: var(--surface); text-align: left; }
.prose-content a,
.prose-page a,
.prose-article a,
.article-content a { text-decoration: underline; text-underline-offset: 0.2em; }
.prose-content :not(pre) > code,
.prose-page :not(pre) > code,
.prose-article :not(pre) > code,
.article-content :not(pre) > code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.875em; background-color: var(--code-surface); color: var(--code-text); padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); }
/* Code copy wrappers generated by enhancements.js. */
.code-block-wrap,
.code-block-wrapper { position: relative; margin: var(--space-3) 0; }
.code-block-header { display: flex; justify-content: space-between; align-items: center; background-color: var(--code-bg); border: 1px solid var(--border); border-bottom: none; border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); padding: var(--space-1) var(--space-2); }
.code-block-lang,
.code-language { font-family: "JetBrains Mono", monospace; font-size: 0.75rem; color: var(--code-accent); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--font-weight-semibold); }
.code-copy-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem; background-color: var(--surface-2); color: var(--text); border: 0; border-radius: var(--radius-sm); font-size: 0.75rem; cursor: pointer; transition: all var(--transition-fast); }
.code-copy-btn:hover { background-color: var(--border); }
.code-copy-btn.copied { background-color: color-mix(in srgb, var(--success) 20%, var(--surface-2)); color: var(--success); }
.code-copy-icon { width: 0.875rem; height: 0.875rem; }
.copy-btn .icon-check { display: none; }
.copy-btn.copied .icon-copy { display: none; }
.copy-btn.copied .icon-check { display: block; }
.code-block-pre,
.code-block-wrapper pre,
.code-block-wrap pre { margin: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.not-prose { max-width: none; }
.copy-link,
.copy-link-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem; background-color: transparent; color: var(--muted); border: 0; border-radius: var(--radius-sm); font-size: 0.875rem; cursor: pointer; transition: all var(--transition-fast); }
.copy-link:hover,
.copy-link-btn:hover { background-color: var(--hover-overlay); color: var(--accent); }
.copy-link.copied,
.copy-link-btn.copied { color: var(--success); }
/* Social and clouds. */
.social-links-wrap,
.social-links { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.social-link-btn,
.social-link { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 2.5rem; min-height: 2.5rem; padding: 0 var(--space-2); background-color: var(--surface-2); border-radius: var(--radius-md); color: var(--text); transition: all var(--transition-fast); }
.social-link-btn:hover,
.social-link:hover { background-color: var(--accent); color: var(--accent-contrast); transform: translateY(-2px); }
.tag-cloud-wrap,
.category-cloud-wrap,
.tag-cloud,
.category-cloud,
.cloud { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.cloud-count { margin-left: 0.125rem; font-size: 0.75rem; opacity: 0.65; }
.cloud-category-lg,
.cloud-category-sm,
.cloud-tag-lg,
.cloud-tag-sm { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; border-radius: var(--radius-xl); background: var(--chip-bg); color: var(--chip-text); transition: all var(--transition-fast); }
.cloud-category-lg:hover,
.cloud-category-sm:hover,
.cloud-tag-lg:hover,
.cloud-tag-sm:hover { background: var(--border); color: var(--accent); }
/* Pagination and errors. */
.pagination { display: flex; gap: var(--space-2); justify-content: center; align-items: center; margin-top: var(--space-6); flex-wrap: wrap; }
.pagination-btn { padding: var(--space-1) var(--space-2); background-color: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-md); text-decoration: none; transition: all var(--transition-fast); min-width: 2.5rem; text-align: center; }
.pagination-btn:hover:not(:disabled):not(.current) { background-color: var(--border); border-color: var(--accent); }
.pagination-btn.current { background-color: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; padding: var(--space-4); }
.error-visual { display: contents; }
.error-code { font-size: clamp(5rem, 16vw, 8rem); font-weight: var(--font-weight-bold); color: var(--accent); line-height: 1; margin-bottom: var(--space-2); }
.error-title { font-size: 1.5rem; margin-bottom: var(--space-3); color: var(--text-heading); }
.error-description { color: var(--muted); margin-bottom: var(--space-4); max-width: 40ch; }
/* Reading progress bar. */
#reading-progress,
.reading-progress { position: fixed; top: 0; left: 0; height: 3px; background-color: var(--accent); transform-origin: left; z-index: 999; }
#reading-progress { width: 0%; transition: width 0.1s linear; }
.reading-progress { right: 0; }
/* Accessibility and output modes. */
.skip-link { position: absolute; left: -9999px; z-index: 1000; }
.skip-link:focus { left: 0.5rem; top: 0.5rem; padding: 0.5rem 1rem; background: var(--accent); color: var(--accent-contrast); border-radius: var(--radius-md); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-md); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
html { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
#reading-progress, .reading-progress { display: none !important; }
}
@media print {
header, footer, nav, aside, #reading-progress, .reading-progress, .toc-sidebar, [data-noprint] { display: none !important; }
body { background: white !important; color: black !important; font-size: 12pt; }
a { color: black !important; text-decoration: underline; }
pre, blockquote { page-break-inside: avoid; border: 1px solid #ddd; }
h1, h2, h3 { page-break-after: avoid; }
img { max-width: 100% !important; }
.container-content, .container-content-wide { max-width: 100% !important; padding: 0 !important; }
}