/* --- Global Reset & Layout --- */
:root {
/* --- Global Colors --- */
--color-bg-body: #ffffff;
--color-accent: #000000;
--color-text-primary: #333333;
--color-text-secondary: #666666;
--color-border: #eeeeee;
--color-border-hover: #bbbbbb;
--color-border-focus: #c3c3c3;
--color-separator: #cccccc;
--color-shadow: rgba(0, 0, 0, 0.15);
--color-shadow-subtle: rgba(0, 0, 0, 0.05);
--color-white: #ffffff;
--color-ai-accent: #8e75ff;
/* --- UI Component Colors --- */
--color-bg-ui: #f5f5f5;
--color-bg-ui-hover: #f0f0f0;
--color-bg-ui-active: #e9e9e9;
--color-bg-pill: #e0e0e0;
--color-badge-bg: #aaaaaa;
--color-badge-text: #ffffff;
--color-success: #2ea44f;
--color-success-hover: #2c974b;
--color-danger: #d73a49;
--color-bg-disabled: #e0e0e0;
--color-text-disabled: #a0a0a0;
/* --- Header Design --- */
--header-height: 80px;
--header-logo-height: 32px;
--color-bg-header: #ffffff;
--color-header-border: var(--color-border);
--color-header-text: var(--color-text-primary);
--color-header-text-secondary: var(--color-text-secondary);
/* --- Overflow Menu Design --- */
--color-overflow-bg: var(--color-bg-body);
--color-overflow-text: var(--color-header-text);
--color-overflow-hover-bg: var(--color-bg-ui-hover);
--color-overflow-hover-text: var(--color-accent);
--color-overflow-border: var(--color-border);
/* --- Mobile Flyout Design --- */
--color-flyout-bg: var(--color-bg-body);
--color-flyout-text: var(--color-text-primary);
--color-flyout-hover-bg: var(--color-bg-ui-hover);
--color-flyout-hover-text: var(--color-accent);
--color-flyout-border: var(--color-border);
--font-size-flyout-link: var(--font-size-lg);
--font-weight-flyout-link: var(--font-weight-normal);
/* --- Footer Design --- */
--color-bg-footer: #1a1a1a;
--color-text-footer: #ffffff;
/* --- Title Card (Info Card) --- */
--color-card-title: var(--color-text-primary);
--color-card-label: var(--color-text-secondary);
--color-card-value: var(--color-text-primary);
--text-transform-card-title: none;
--text-transform-card-label: none;
--text-transform-card-value: none;
--font-size-card-title: 1.2rem;
--font-size-card-label: var(--font-size-base);
--font-size-card-value: var(--font-size-base);
--font-weight-card-title: var(--font-weight-normal);
--font-weight-card-label: var(--font-weight-normal);
--font-weight-card-value: var(--font-weight-normal);
/* --- Custom Label Pill Backgrounds --- */
--color-label-draft-bg: #fffacd; /* Light yellow */
--color-label-news-bg: #add8e6; /* Light blue */
--color-label-collection-intro-bg: #e6e6fa; /* Light purple */
--color-label-article-bg: #e4ffec; /* Light green */
/* Typography */
--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-family-headings: var(--font-family-base);
--line-height-base: 1.6;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
--font-size-xs: 0.8rem;
--font-size-sm: 0.9rem;
--font-size-base: 1rem;
--font-size-lg: 1.1rem;
--font-size-xl: 1.2rem;
--font-size-h1: 2.5rem;
--font-size-h2: 2.1rem;
--font-size-h3: 1.5rem;
/* Spacing Scale */
--space-xs: 5px;
--space-sm: 10px;
--space-md: 20px;
--space-lg: 30px;
--space-xl: 40px;
/* Spacing & Geometry */
--container-max-width: 1200px;
--breadcrumb-height: 42px;
--post-nav-height: 0px;
--mobile-nav-width: 280px;
--header-logo-height: 32px;
/* Radius Scale */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 20px;
--radius-circle: 50%;
/* Transitions */
--transition-fast: 0.2s ease;
--transition-base: 0.3s ease-in-out;
--transition-slow: 0.5s ease;
/* Gallery Settings */
--gallery-gap: 25px;
--gallery-radius: var(--radius-md);
--carousel-height: 95%;
/* Z-Index Management */
--z-homepage-footer: 900;
--z-header: 1000;
--z-overflow-dropdown: 1001;
--z-hamburger: 1100;
--z-flyout: 2000;
--z-overlay: 3000;
--z-viewer-bg: 4000;
--z-viewer-img: 4010;
--z-viewer-ui: 4020;
--arrow-up: url("data:image/svg+xml;utf8,");
--arrow-down: url("data:image/svg+xml;utf8,");
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* Required for Sticky Footer */
font-family: var(--font-family-base);
line-height: var(--line-height-base);
color: var(--color-text-primary);
background-color: var(--color-bg-body);
}
.container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--space-md);
width: 100%;
}
/* --- Iconography --- */
/* Uses CSS masks to allow 'currentColor' to control icon color. */
.icon {
display: inline-block;
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
vertical-align: middle; /* Align icons better with text */
pointer-events: none; /* Allow clicks to pass through to the parent button */
}
.icon-search {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='m21 21-6-6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='m21 21-6-6'/%3E%3C/svg%3E");
}
.icon-focal-point {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 12h3m12 0h3M12 3v3m0 12v3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 12h3m12 0h3M12 3v3m0 12v3'/%3E%3C/svg%3E");
}
.icon-sparkle {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath d='M5.46524 9.82962C5.62134 9.94037 5.80806 9.99974 5.99946 9.99948C6.19151 10.0003 6.37897 9.94082 6.53546 9.82948C6.69223 9.71378 6.81095 9.55398 6.87646 9.37048L7.22346 8.30348C7.3077 8.05191 7.44906 7.82327 7.63646 7.63548C7.82305 7.44851 8.05078 7.30776 8.30146 7.22448L9.38746 6.87148C9.56665 6.80759 9.72173 6.68989 9.83146 6.53448C9.94145 6.37908 10.0005 6.19337 10.0005 6.00298C10.0005 5.81259 9.94145 5.62689 9.83146 5.47148C9.71293 5.30613 9.54426 5.18339 9.35046 5.12148L8.28146 4.77548C8.02989 4.69238 7.80123 4.55163 7.61371 4.36447C7.4262 4.1773 7.28503 3.9489 7.20146 3.69748L6.84846 2.61348C6.78519 2.43423 6.66777 2.27908 6.51246 2.16948C6.35557 2.06133 6.16951 2.00342 5.97896 2.00342C5.78841 2.00342 5.60235 2.06133 5.44546 2.16948C5.28572 2.28196 5.16594 2.44237 5.10346 2.62748L4.74846 3.71748C4.66476 3.96155 4.52691 4.18351 4.34524 4.36673C4.16358 4.54996 3.9428 4.6897 3.69946 4.77548L2.61546 5.12648C2.43437 5.19048 2.27775 5.30937 2.16743 5.4666C2.05712 5.62383 1.99859 5.81155 2.00003 6.00361C2.00146 6.19568 2.06277 6.38251 2.17541 6.53808C2.28806 6.69364 2.44643 6.81019 2.62846 6.87148L3.69546 7.21848C3.94767 7.30297 4.17673 7.44506 4.36446 7.63348C4.41519 7.6837 4.46262 7.73715 4.50646 7.79348C4.62481 7.94615 4.71614 8.11797 4.77646 8.30148L5.12846 9.38148C5.19143 9.56222 5.30914 9.71886 5.46524 9.82962ZM10.5344 13.8515C10.6703 13.9477 10.8328 13.9994 10.9994 13.9995C11.1642 13.998 11.3245 13.9456 11.4584 13.8495C11.5979 13.751 11.7029 13.611 11.7584 13.4495L12.0064 12.6875C12.0595 12.529 12.1485 12.385 12.2664 12.2665C12.3837 12.148 12.5277 12.0592 12.6864 12.0075L13.4584 11.7555C13.6161 11.701 13.7528 11.5985 13.8494 11.4625C13.9227 11.3595 13.9706 11.2405 13.9891 11.1154C14.0076 10.9903 13.9962 10.8626 13.9558 10.7428C13.9154 10.623 13.8472 10.5144 13.7567 10.4261C13.6662 10.3377 13.5561 10.272 13.4354 10.2345L12.6714 9.98548C12.5132 9.93291 12.3695 9.8443 12.2514 9.72663C12.1334 9.60896 12.0444 9.46547 11.9914 9.30748L11.7394 8.53348C11.685 8.37623 11.5825 8.24011 11.4464 8.14448C11.3443 8.07153 11.2266 8.02359 11.1026 8.00453C10.9787 7.98547 10.8519 7.99582 10.7327 8.03475C10.6135 8.07369 10.5051 8.1401 10.4163 8.22865C10.3274 8.31719 10.2607 8.42538 10.2214 8.54448L9.97435 9.30648C9.92207 9.46413 9.83452 9.60777 9.71835 9.72648C9.60382 9.84272 9.46428 9.9313 9.31035 9.98548L8.53435 10.2385C8.41689 10.2793 8.31057 10.347 8.22382 10.4361C8.13708 10.5252 8.0723 10.6333 8.03464 10.7518C7.99698 10.8704 7.98746 10.996 8.00686 11.1189C8.02625 11.2417 8.07401 11.3583 8.14635 11.4595C8.24456 11.5993 8.38462 11.7044 8.54635 11.7595L9.30935 12.0065C9.46821 12.0599 9.61262 12.1492 9.73135 12.2675C9.84958 12.3857 9.93801 12.5304 9.98935 12.6895L10.2424 13.4635C10.2971 13.6199 10.3992 13.7555 10.5344 13.8515Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath d='M5.46524 9.82962C5.62134 9.94037 5.80806 9.99974 5.99946 9.99948C6.19151 10.0003 6.37897 9.94082 6.53546 9.82948C6.69223 9.71378 6.81095 9.55398 6.87646 9.37048L7.22346 8.30348C7.3077 8.05191 7.44906 7.82327 7.63646 7.63548C7.82305 7.44851 8.05078 7.30776 8.30146 7.22448L9.38746 6.87148C9.56665 6.80759 9.72173 6.68989 9.83146 6.53448C9.94145 6.37908 10.0005 6.19337 10.0005 6.00298C10.0005 5.81259 9.94145 5.62689 9.83146 5.47148C9.71293 5.30613 9.54426 5.18339 9.35046 5.12148L8.28146 4.77548C8.02989 4.69238 7.80123 4.55163 7.61371 4.36447C7.4262 4.1773 7.28503 3.9489 7.20146 3.69748L6.84846 2.61348C6.78519 2.43423 6.66777 2.27908 6.51246 2.16948C6.35557 2.06133 6.16951 2.00342 5.97896 2.00342C5.78841 2.00342 5.60235 2.06133 5.44546 2.16948C5.28572 2.28196 5.16594 2.44237 5.10346 2.62748L4.74846 3.71748C4.66476 3.96155 4.52691 4.18351 4.34524 4.36673C4.16358 4.54996 3.9428 4.6897 3.69946 4.77548L2.61546 5.12648C2.43437 5.19048 2.27775 5.30937 2.16743 5.4666C2.05712 5.62383 1.99859 5.81155 2.00003 6.00361C2.00146 6.19568 2.06277 6.38251 2.17541 6.53808C2.28806 6.69364 2.44643 6.81019 2.62846 6.87148L3.69546 7.21848C3.94767 7.30297 4.17673 7.44506 4.36446 7.63348C4.41519 7.6837 4.46262 7.73715 4.50646 7.79348C4.62481 7.94615 4.71614 8.11797 4.77646 8.30148L5.12846 9.38148C5.19143 9.56222 5.30914 9.71886 5.46524 9.82962ZM10.5344 13.8515C10.6703 13.9477 10.8328 13.9994 10.9994 13.9995C11.1642 13.998 11.3245 13.9456 11.4584 13.8495C11.5979 13.751 11.7029 13.611 11.7584 13.4495L12.0064 12.6875C12.0595 12.529 12.1485 12.385 12.2664 12.2665C12.3837 12.148 12.5277 12.0592 12.6864 12.0075L13.4584 11.7555C13.6161 11.701 13.7528 11.5985 13.8494 11.4625C13.9227 11.3595 13.9706 11.2405 13.9891 11.1154C14.0076 10.9903 13.9962 10.8626 13.9558 10.7428C13.9154 10.623 13.8472 10.5144 13.7567 10.4261C13.6662 10.3377 13.5561 10.272 13.4354 10.2345L12.6714 9.98548C12.5132 9.93291 12.3695 9.8443 12.2514 9.72663C12.1334 9.60896 12.0444 9.46547 11.9914 9.30748L11.7394 8.53348C11.685 8.37623 11.5825 8.24011 11.4464 8.14448C11.3443 8.07153 11.2266 8.02359 11.1026 8.00453C10.9787 7.98547 10.8519 7.99582 10.7327 8.03475C10.6135 8.07369 10.5051 8.1401 10.4163 8.22865C10.3274 8.31719 10.2607 8.42538 10.2214 8.54448L9.97435 9.30648C9.92207 9.46413 9.83452 9.60777 9.71835 9.72648C9.60382 9.84272 9.46428 9.9313 9.31035 9.98548L8.53435 10.2385C8.41689 10.2793 8.31057 10.347 8.22382 10.4361C8.13708 10.5252 8.0723 10.6333 8.03464 10.7518C7.99698 10.8704 7.98746 10.996 8.00686 11.1189C8.02625 11.2417 8.07401 11.3583 8.14635 11.4595C8.24456 11.5993 8.38462 11.7044 8.54635 11.7595L9.30935 12.0065C9.46821 12.0599 9.61262 12.1492 9.73135 12.2675C9.84958 12.3857 9.93801 12.5304 9.98935 12.6895L10.2424 13.4635C10.2971 13.6199 10.3992 13.7555 10.5344 13.8515Z'/%3E%3C/svg%3E");
}
.icon-overflow {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E");
}
.icon-hamburger {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
}
.icon-close {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}
.icon-view-menu {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='7' y1='7' x2='17' y2='7'/%3E%3Cline x1='7' y1='12' x2='17' y2='12'/%3E%3Cline x1='7' y1='17' x2='17' y2='17'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='7' y1='7' x2='17' y2='7'/%3E%3Cline x1='7' y1='12' x2='17' y2='12'/%3E%3Cline x1='7' y1='17' x2='17' y2='17'/%3E%3C/svg%3E");
}
.icon-delete {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
}
.icon-theme {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}
.icon-prev {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
}
.icon-next {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}
.icon-arrow-left {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E");
}
.icon-arrow-right {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
}
.icon-arrow-up {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
}
.icon-arrow-down {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.icon-plus {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}
.icon-code {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
}
.icon-grid {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='3' width='8' height='8' rx='1'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='3' width='8' height='8' rx='1'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1'/%3E%3C/svg%3E");
}
.icon-wall {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");
}
.icon-fit {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M15 3h6v6h-2V5h-4V3zM9 21H3v-6h2v4h4v2zm6-12h-6v6h6v-6zM9 3v2H5v4H3V3h6zm12 12h-2v4h-4v2h6v-6z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M15 3h6v6h-2V5h-4V3zM9 21H3v-6h2v4h4v2zm6-12h-6v6h6v-6zM9 3v2H5v4H3V3h6zm12 12h-2v4h-4v2h6v-6z'/%3E%3C/svg%3E");
}
.icon-waterfall { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 3h5v10H3zm7 0h5v15h-5zm7 0h5v8h-5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 3h5v10H3zm7 0h5v15h-5zm7 0h5v8h-5z'/%3E%3C/svg%3E"); }
.icon-carousel { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 6h4v12H2zm6-2h8v16H8zm10 2h4v12h-4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 6h4v12H2zm6-2h8v16H8zm10 2h4v12h-4z'/%3E%3C/svg%3E"); }
.icon-mosaic { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 3h8v8H3zm10 0h8v18h-8zM3 13h8v8H3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 3h8v8H3zm10 0h8v18h-8zM3 13h8v8H3z'/%3E%3C/svg%3E"); }
.icon-scattered { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='8' y='3' width='7' height='7' rx='1' transform='rotate(10 11.5 6.5)'/%3E%3Crect x='3' y='12' width='7' height='7' rx='1' transform='rotate(-15 6.5 15.5)'/%3E%3Crect x='14' y='13' width='7' height='7' rx='1' transform='rotate(5 17.5 16.5)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='8' y='3' width='7' height='7' rx='1' transform='rotate(10 11.5 6.5)'/%3E%3Crect x='3' y='12' width='7' height='7' rx='1' transform='rotate(-15 6.5 15.5)'/%3E%3Crect x='14' y='13' width='7' height='7' rx='1' transform='rotate(5 17.5 16.5)'/%3E%3C/svg%3E"); }
.icon-card { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='4' width='7' height='7' rx='1'/%3E%3Crect x='12' y='5' width='9' height='2' rx='0.5'/%3E%3Crect x='12' y='8' width='6' height='2' rx='0.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='12' y='15' width='9' height='2' rx='0.5'/%3E%3Crect x='12' y='18' width='6' height='2' rx='0.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='4' width='7' height='7' rx='1'/%3E%3Crect x='12' y='5' width='9' height='2' rx='0.5'/%3E%3Crect x='12' y='8' width='6' height='2' rx='0.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='12' y='15' width='9' height='2' rx='0.5'/%3E%3Crect x='12' y='18' width='6' height='2' rx='0.5'/%3E%3C/svg%3E"); }
.icon-museum { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='3' width='10' height='18' rx='1'/%3E%3Cpath d='M15 4h6v2h-6zm0 4h6v2h-6zm0 4h6v2h-6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='3' width='10' height='18' rx='1'/%3E%3Cpath d='M15 4h6v2h-6zm0 4h6v2h-6zm0 4h6v2h-6z'/%3E%3C/svg%3E"); }
.icon-slider { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='7' y='4' width='10' height='11' rx='1'/%3E%3Crect x='2' y='4' width='3' height='11' rx='1'/%3E%3Crect x='19' y='4' width='3' height='11' rx='1'/%3E%3Ccircle cx='10' cy='19' r='1.5'/%3E%3Ccircle cx='14' cy='19' r='1.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='7' y='4' width='10' height='11' rx='1'/%3E%3Crect x='2' y='4' width='3' height='11' rx='1'/%3E%3Crect x='19' y='4' width='3' height='11' rx='1'/%3E%3Ccircle cx='10' cy='19' r='1.5'/%3E%3Ccircle cx='14' cy='19' r='1.5'/%3E%3C/svg%3E"); }
.icon-shopping { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='4' y='2' width='16' height='14' rx='1'/%3E%3Crect x='4' y='18' width='4' height='4' rx='1'/%3E%3Crect x='10' y='18' width='4' height='4' rx='1'/%3E%3Crect x='16' y='18' width='4' height='4' rx='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='4' y='2' width='16' height='14' rx='1'/%3E%3Crect x='4' y='18' width='4' height='4' rx='1'/%3E%3Crect x='10' y='18' width='4' height='4' rx='1'/%3E%3Crect x='16' y='18' width='4' height='4' rx='1'/%3E%3C/svg%3E"); }
.icon-bento { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='3' width='11' height='8' rx='1'/%3E%3Crect x='16' y='3' width='5' height='8' rx='1'/%3E%3Crect x='3' y='13' width='5' height='8' rx='1'/%3E%3Crect x='10' y='13' width='11' height='8' rx='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='3' width='11' height='8' rx='1'/%3E%3Crect x='16' y='3' width='5' height='8' rx='1'/%3E%3Crect x='3' y='13' width='5' height='8' rx='1'/%3E%3Crect x='10' y='13' width='11' height='8' rx='1'/%3E%3C/svg%3E"); }
.icon-basic { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z'/%3E%3Crect x='7' y='7' width='10' height='10' rx='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z'/%3E%3Crect x='7' y='7' width='10' height='10' rx='1'/%3E%3C/svg%3E"); }
.icon-slideshow { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3Cpath d='m10 7 6 3-6 3V7z' fill='black'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3Cpath d='m10 7 6 3-6 3V7z' fill='black'/%3E%3C/svg%3E"); }
.icon-pause { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='6' y='4' width='4' height='16'/%3E%3Crect x='14' y='4' width='4' height='16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='6' y='4' width='4' height='16'/%3E%3Crect x='14' y='4' width='4' height='16'/%3E%3C/svg%3E"); }
.icon-play { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='m5 3 14 9-14 9V3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='m5 3 14 9-14 9V3z'/%3E%3C/svg%3E"); }
.icon-home { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E"); }
.icon-stack { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6L3 10l9 4 9-4-9-4z' fill='black'/%3E%3Cpath d='M4 14l8 4 8-4M4 18l8 4 8-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6L3 10l9 4 9-4-9-4z' fill='black'/%3E%3Cpath d='M4 14l8 4 8-4M4 18l8 4 8-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.icon-sheet { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 15L2 19l10 4 10-4-10-4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 15L2 19l10 4 10-4-10-4z'/%3E%3C/svg%3E"); }
.icon-edit {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E");
}
.icon-palette {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3a9 9 0 0 0 0 18c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-1.01 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3a9 9 0 0 0 0 18c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-1.01 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E");
}
.icon-settings {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9 14.25c1.3979 0 2.5724.953 2.9055 2.25H20.25c.4142 0 .75.3358.75.75 0 .3727-.2769.6764-.6351.7419l-.1149.0081h-8.0945c-.3331 1.297-1.5076 2.25-2.9055 2.25s-2.5724-.953-2.9055-2.25H3.75a.75.75 0 0 1-.7419-.6351L3 17.25c0-.3727.2769-.6764.6351-.7419l.1149-.0081h2.3445c.3331-1.297 1.5076-2.25 2.9055-2.25zm0 1.5c-.8284 0-1.5.6716-1.5 1.5s.6716 1.5 1.5 1.5 1.5-.6716 1.5-1.5-.6716-1.5-1.5-1.5zM15 3.75c1.3979 0 2.5724.953 2.9055 2.25H20.25c.4142 0 .75.3358.75.75 0 .3727-.2769.6764-.6351.7419L20.25 7.5h-2.3445c-.3331 1.297-1.5076 2.25-2.9055 2.25s-2.5724-.953-2.9055-2.25H3.75a.75.75 0 0 1-.7419-.6351L3 6.75c0-.3727.2769-.6764.6351-.7419l.1149-.0081h8.0945c.3331-1.297 1.5076-2.25 2.9055-2.25zm0 1.5c-.8284 0-1.5.6716-1.5 1.5s.6716 1.5 1.5 1.5 1.5-.6716 1.5-1.5-.6716-1.5-1.5-1.5z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9 14.25c1.3979 0 2.5724.953 2.9055 2.25H20.25c.4142 0 .75.3358.75.75 0 .3727-.2769.6764-.6351.7419l-.1149.0081h-8.0945c-.3331 1.297-1.5076 2.25-2.9055 2.25s-2.5724-.953-2.9055-2.25H3.75a.75.75 0 0 1-.7419-.6351L3 17.25c0-.3727.2769-.6764.6351-.7419l.1149-.0081h2.3445c.3331-1.297 1.5076-2.25 2.9055-2.25zm0 1.5c-.8284 0-1.5.6716-1.5 1.5s.6716 1.5 1.5 1.5 1.5-.6716 1.5-1.5-.6716-1.5-1.5-1.5zM15 3.75c1.3979 0 2.5724.953 2.9055 2.25H20.25c.4142 0 .75.3358.75.75 0 .3727-.2769.6764-.6351.7419L20.25 7.5h-2.3445c-.3331 1.297-1.5076 2.25-2.9055 2.25s-2.5724-.953-2.9055-2.25H3.75a.75.75 0 0 1-.7419-.6351L3 6.75c0-.3727.2769-.6764.6351-.7419l.1149-.0081h8.0945c.3331-1.297 1.5076-2.25 2.9055-2.25zm0 1.5c-.8284 0-1.5.6716-1.5 1.5s.6716 1.5 1.5 1.5 1.5-.6716 1.5-1.5-.6716-1.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.icon-translate {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19.7134 8.12811L19.4668 8.69379C19.2864 9.10792 18.7136 9.10792 18.5331 8.69379L18.2866 8.12811C17.8471 7.11947 17.0555 6.31641 16.0677 5.87708L15.308 5.53922C14.8973 5.35653 14.8973 4.75881 15.308 4.57612L16.0252 4.25714C17.0384 3.80651 17.8442 2.97373 18.2761 1.93083L18.5293 1.31953C18.7058 0.893489 19.2942 0.893489 19.4706 1.31953L19.7238 1.93083C20.1558 2.97373 20.9616 3.80651 21.9748 4.25714L22.6919 4.57612C23.1027 4.75881 23.1027 5.35653 22.6919 5.53922L21.9323 5.87708C20.9445 6.31641 20.1529 7.11947 19.7134 8.12811ZM22.9 21L18.5 10H16.5L12.101 21H14.255L15.454 18H19.544L20.745 21H22.9ZM16.253 16L17.5 12.8852L18.745 16H16.253ZM7.5466 12.3036C6.41407 11.0171 5.45992 9.56967 4.72266 8H6.96329C7.53108 9.04434 8.21011 10.0196 8.98442 10.9097C10.2737 9.48824 11.3027 7.82653 11.9961 6H2V4H8V2H10V4H14.6497C14.5624 4.42994 14.4594 4.85421 14.3412 5.27216C13.5862 7.94155 12.2142 10.3512 10.389 12.3375C11.1089 12.9848 11.8869 13.5688 12.7142 14.0805L11.9615 15.9627C10.8814 15.3228 9.87297 14.5749 8.95119 13.7336C7.17781 15.2694 5.09248 16.4547 2.8027 17.1819L2.1973 15.2757C4.18364 14.6449 5.99672 13.6242 7.5466 12.3036Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19.7134 8.12811L19.4668 8.69379C19.2864 9.10792 18.7136 9.10792 18.5331 8.69379L18.2866 8.12811C17.8471 7.11947 17.0555 6.31641 16.0677 5.87708L15.308 5.53922C14.8973 5.35653 14.8973 4.75881 15.308 4.57612L16.0252 4.25714C17.0384 3.80651 17.8442 2.97373 18.2761 1.93083L18.5293 1.31953C18.7058 0.893489 19.2942 0.893489 19.4706 1.31953L19.7238 1.93083C20.1558 2.97373 20.9616 3.80651 21.9748 4.25714L22.6919 4.57612C23.1027 4.75881 23.1027 5.35653 22.6919 5.53922L21.9323 5.87708C20.9445 6.31641 20.1529 7.11947 19.7134 8.12811ZM22.9 21L18.5 10H16.5L12.101 21H14.255L15.454 18H19.544L20.745 21H22.9ZM16.253 16L17.5 12.8852L18.745 16H16.253ZM7.5466 12.3036C6.41407 11.0171 5.45992 9.56967 4.72266 8H6.96329C7.53108 9.04434 8.21011 10.0196 8.98442 10.9097C10.2737 9.48824 11.3027 7.82653 11.9961 6H2V4H8V2H10V4H14.6497C14.5624 4.42994 14.4594 4.85421 14.3412 5.27216C13.5862 7.94155 12.2142 10.3512 10.389 12.3375C11.1089 12.9848 11.8869 13.5688 12.7142 14.0805L11.9615 15.9627C10.8814 15.3228 9.87297 14.5749 8.95119 13.7336C7.17781 15.2694 5.09248 16.4547 2.8027 17.1819L2.1973 15.2757C4.18364 14.6449 5.99672 13.6242 7.5466 12.3036Z'/%3E%3C/svg%3E");
}
.icon-list {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='8' y1='18' x2='21' y2='18'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'%3E%3C/line%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='8' y1='18' x2='21' y2='18'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'%3E%3C/line%3E%3C/svg%3E");
}
.icon-hamburger, .icon-close {
color: var(--color-text-secondary);
}
#image-viewer .icon-close,#image-viewer .icon-prev,#image-viewer .icon-next {
color: white;
}
/* For accessibility on screen readers */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-headings);
}
html[lang="ar"] {
direction: rtl;
}
header .container{
line-height: unset;
}
/* --- Header & Navigation --- */
/* --- Header & Navigation --- */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: auto;
min-height: var(--header-height);
background: var(--color-bg-header);
border-bottom: 1px solid var(--color-header-border);
z-index: var(--z-header);
display: flex;
align-items: center;
flex-direction: column;
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
--header-hide-offset: 100%; /* Default hide entirely */
}
/* Sticky mode: body.sticky-header removes adaptive behavior */
/* When hiding in adaptive mode, we want to slide up but keep breadcrumbs visible if they exist */
body:not(.sticky-header).has-breadcrumbs .site-header {
--header-hide-offset: var(--header-height);
}
/* Hide header on scroll (only when not sticky) via JS */
.site-header.is-hidden {
transform: translateY(calc(-1 * var(--header-hide-offset)));
}
.site-header .container {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 20px;
height: var(--header-height);
}
/* --- Part 1: Brand & Context Title --- */
.header-brand {
display: flex;
align-items: center;
gap: 12px;
justify-self: start;
}
.logo-wrap {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: inherit;
}
.logo-wrap.has-logo .site-title {
display: none;
}
.logo-img {
height: var(--header-logo-height);
width: auto;
}
.site-title {
font-weight: var(--font-weight-bold);
font-size: var(--font-size-xl);
letter-spacing: -0.5px;
color: var(--color-header-text);
}
.title-sep {
color: var(--color-separator);
font-weight: var(--font-weight-light);
position: relative;
top: -2px;
font-size: 1.3rem;
}
.title-sep::before {
content: "|";
}
.page-context {
font-size: var(--font-size-sm);
color: var(--color-header-text-secondary);
white-space: nowrap;
max-width: none;
}
.page-context:last-of-type {
max-width: 400px;
overflow: hidden;
text-overflow: ellipsis;
}
.page-context a {
color: inherit;
text-decoration: none;
}
.wall-trigger {
display: none;
align-items: center;
justify-content: center;
padding: 6px;
color: var(--color-text-secondary);
transition: color var(--transition-fast);
text-decoration: none;
}
.wall-trigger:hover {
color: var(--color-text-primary);
}
/* This is the new trigger button that's always visible */
.search-trigger {
display: flex;
align-items: center;
gap: 8px;
background: var(--color-bg-ui);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
padding: 6px 12px;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
max-width: 300px;
}
.search-trigger:hover {
border-color: var(--color-border-hover);
background-color: var(--color-bg-ui-hover);
}
.search-trigger .icon-search {
flex-shrink: 0;
margin-left: auto; /* Pushes icon to the right */
width: 18px;
height: 18px;
}
/* Hide the old form, it's no longer in the header */
.search-form {
display: none;
}
body.search-active .site-header {
/* Removed transform to allow header to stay and fade in background */
}
/* --- Search Overlay --- */
.search-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--header-height); /* Align exactly with header height */
background: var(--color-bg-header); /* Matches header background */
z-index: var(--z-overlay);
display: none; /* Toggled by JS */
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity var(--transition-fast), visibility var(--transition-fast);
box-sizing: border-box;
border-bottom: 1px solid var(--color-border);
}
body.search-active .site-header > .container > * {
opacity: 0.1; /* Fade out existing header content */
filter: blur(4px);
pointer-events: none;
transition: opacity var(--transition-fast), filter var(--transition-fast);
}
body.search-active .search-overlay {
display: flex;
opacity: 1;
}
.search-overlay-content {
width: 100%;
max-width: 600px;
padding: 0 var(--space-md);
transform: scaleX(0.98); /* Growing effect from the center */
opacity: 0;
transition: transform var(--transition-base) cubic-bezier(0.4, 0, 0.2, 1), opacity var(--transition-base);
}
body.search-active .search-overlay-content {
transform: scaleX(1);
opacity: 1;
}
.search-form-overlay {
position: relative;
margin-left: 20px;
margin-right: 20px
}
.search-suggestions {
display: none; /* Hidden by default */
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-bg-body);
border: 1px solid rgba(0, 0, 0, 0.15);
border-top: none;
border-radius: 0 0 var(--radius-md) var(--radius-md);
box-shadow: 0 10px 40px var(--color-shadow);
margin-top: calc(var(--radius-md) * -1); /* Overlap with input's border-radius */
padding-top: var(--radius-md); /* Space for the overlap */
z-index: -1;
}
.search-collection-pill {
position: absolute;
left: 40px; /* Adjusted left position */
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
background-color: var(--color-bg-pill);
border-radius: var(--radius-lg);
padding: 4px 4px 4px 10px;
font-size: var(--font-size-sm);
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px; /* Prevent long labels from breaking layout */
z-index: 1; /* Above the input's background */
}
.search-collection-pill .pill-text {
overflow: hidden;
text-overflow: ellipsis;
}
.search-collection-pill .pill-close {
background: none;
border: none;
margin-left: 4px;
cursor: pointer;
font-size: var(--font-size-xl);
line-height: 1;
padding: 0 4px;
color: var(--color-text-secondary);
}
.search-collection-pill .pill-close:hover {
color: var(--color-text-primary);
}
.search-suggestions ul {
list-style: none;
margin: 0;
padding: 0 0 10px 0;
}
.search-suggestions li a {
display: flex;
align-items: center;
gap: 15px;
margin: 8px;
padding: 10px 20px;
text-decoration: none;
color: var(--color-text-primary);
transition: background-color 0.15s ease;
}
.search-suggestions li a:hover {
background-color: var(--color-bg-ui);
margin: 8px;
border-radius: var(--radius-lg);
}
.search-suggestions .suggestion-type {
font-size: var(--font-size-xs);
color: var(--color-badge-text);
background-color: var(--color-badge-bg);
padding: 2px 6px;
border-radius: var(--radius-sm);
font-weight: var(--font-weight-medium);
white-space: nowrap;
}
.search-suggestions .suggestion-text {
font-size: var(--font-size-lg);
}
.search-suggestions .suggestion-text b {
font-weight: var(--font-weight-bold);
color: inherit; /* Inherits text color instead of forcing black */
}
.search-input-overlay {
width: 100%;
padding: 10px 50px 10px 40px; /* Adjusted padding for integrated look */
font-size: var(--font-size-xl);
border: none;
border-bottom: 1px solid var(--color-border); /* Modern underlined field */
background: transparent;
color: var(--color-text-primary);
outline: none;
-webkit-appearance: none;
transition: border-color var(--transition-fast);
}
.search-input-overlay:focus {
border-color: var(--color-accent); /* Focus color */
}
.search-form-overlay .icon-search {
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-secondary);
pointer-events: none;
}
.search-close-btn {
position: absolute;
right: 0px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--color-text-primary);
cursor: pointer;
padding: 0 10px;
line-height: 1;
width: 44px; /* Clickable area */
height: 44px;
}
.search-close-btn:hover {
color: var(--color-accent);
}
/* --- Part 3: Navigation & Overflow --- */
.header-nav-wrap {
display: flex;
align-items: center;
gap: 20px;
justify-self: end;
}
.nav-list {
display: flex;
list-style: none;
align-items: center;
gap: 20px;
}
.nav-list a {
text-decoration: none;
color: var(--color-header-text);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
transition: color var(--transition-fast);
}
body.view-index .logo-wrap {
pointer-events: none;
cursor: default;
}
.has-overflow {
position: relative;
}
.overflow-dropdown {
position: absolute;
top: 100%;
right: -10px;
background: var(--color-overflow-bg);
border: 1px solid var(--color-overflow-border);
box-shadow: 0 10px 20px var(--color-shadow-subtle);
list-style: none;
min-width: 160px;
display: none;
padding: 10px 0;
z-index: var(--z-overflow-dropdown);
}
.has-overflow:hover .overflow-dropdown,
.has-overflow.is-active .overflow-dropdown {
display: block;
}
.overflow-dropdown li a {
display: block;
padding: 8px 20px;
color: var(--color-overflow-text);
text-decoration: none;
}
.overflow-dropdown li a:hover {
background-color: var(--color-overflow-hover-bg);
color: var(--color-overflow-hover-text);
}
/* --- Mobile Hamburger & Flyout --- */
.hamburger-btn {
display: none;
background: none;
border: none;
cursor: pointer;
z-index: var(--z-hamburger);
padding: 5px; /* Increase clickable area */
color: #333;
}
.mobile-flyout {
position: fixed;
top: 0;
right: -100%;
width: var(--mobile-nav-width);
height: 100vh;
background: var(--color-flyout-bg);
z-index: var(--z-flyout);
transition: right var(--transition-base);
box-shadow: -10px 0 30px var(--color-shadow);
}
body.flyout-open .mobile-flyout {
right: 0;
}
div.flyout-inner {
padding: 0px;
display: flex;
flex-direction: column;
height: 100%;
}
div.flyout-inner button.flyout-close {
align-self: flex-end;
background: none;
border: none;
cursor: pointer;
margin: 15px 20px 0 0;
padding: 10px;
color: var(--color-flyout-text);
width: 44px;
height: 44px;
}
div.flyout-inner nav.flyout-nav ul li a {
padding-left: 20px;
color: var(--color-flyout-text);
}
.flyout-nav ul {
list-style: none;
margin-top: 20px;
}
.flyout-nav li a {
display: flex;
align-items: center;
padding: 15px 0;
font-size: var(--font-size-flyout-link);
font-weight: var(--font-weight-flyout-link);
text-decoration: none;
color: var(--color-flyout-text);
border-bottom: 1px solid var(--color-flyout-border);
margin-left: 20px;
transition: all var(--transition-fast);
}
.flyout-nav li a .icon {
margin-right: 12px;
width: 20px;
height: 20px;
}
.flyout-nav li a:hover {
background-color: var(--color-flyout-hover-bg);
color: var(--color-flyout-hover-text);
}
/* --- Header & Flyout Layout Variants --- */
/* Reverses header elements when body.logoRight is present */
body.logoRight .site-header .container {
direction: rtl;
}
body.logoRight .header-brand,
body.logoRight .header-nav-wrap {
direction: ltr;
}
/* When logo is on the right, flyout menu comes from the left */
body.logoRight .mobile-flyout {
right: auto;
left: -100%;
transition: left var(--transition-base);
box-shadow: 10px 0 30px var(--color-shadow); /* Reverse shadow */
}
body.logoRight.flyout-open .mobile-flyout {
left: 0;
right: auto;
}
body.hideSearch header .search-trigger {
display:none
}
body.hideLabels .label-stage.collection-list {
display:none
}
/* --- Main Content Area --- */
main {
flex: 1; /* This pushes the footer down */
padding-top: calc(var(--header-height) + 20px);
padding-bottom: 40px;
display: flex;
flex-direction: column;
}
body.has-breadcrumbs main {
padding-top: calc(var(--header-height) + var(--breadcrumb-height) + 20px);
}
/* --- Breadcrumbs --- */
.breadcrumbs {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
border-bottom: 1px solid var(--color-border);
padding: 0;
height: var(--breadcrumb-height);
display: none;
align-items: center;
border-top: 1px solid var(--color-border);
border-bottom: none;
margin-bottom: 0;
background: var(--color-bg-header); /* Matches header background */
width: 100%;
}
body.has-breadcrumbs .breadcrumbs {
display: flex;
}
.breadcrumbs .container {
display: flex;
align-items: center;
gap: 15px;
overflow: hidden;
}
.view-switcher-container {
display: flex;
align-items: center;
border-right: 1px solid var(--color-border);
padding-right: 15px;
flex-shrink: 0;
}
.view-switcher-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
background: transparent;
border: none;
cursor: pointer;
color: var(--color-text-secondary);
transition: all var(--transition-fast);
}
.view-switcher-toggle:hover {
background: var(--color-bg-ui-hover);
color: var(--color-text-primary);
}
.view-switcher {
display: flex;
gap: 8px;
max-width: 0;
opacity: 0;
overflow: hidden;
transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin-left 0.4s ease;
}
.view-switcher.is-open {
max-width: 300px; /* Enough space for gallery icons */
opacity: 1;
margin-left: 10px;
}
.view-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
color: var(--color-text-secondary);
transition: all var(--transition-fast);
background: transparent;
}
.view-btn:hover {
background: var(--color-bg-ui-hover);
color: var(--color-text-primary);
}
.view-btn.active {
background: var(--color-bg-ui-active);
color: var(--color-accent);
background-color: rgba(0,0,0,0.1);
}
body.dark .view-btn.active {
background-color: rgba(255,255,255,0.15);
}
.breadcrumbs ol {
list-style: none;
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
flex: 1;
/* Visual hint for overflow scrolling */
mask-image: linear-gradient(to right, transparent, black 15px, black 95%, transparent 100%);
padding: 0 15px;
margin: 0 -15px;
}
.breadcrumbs ol::-webkit-scrollbar {
display: none;
}
.breadcrumbs li {
display: flex;
align-items: center;
flex-shrink: 0;
}
.breadcrumbs li .icon {
display: none;
width: 18px;
height: 18px;
margin-right: 4px;
}
.breadcrumbs .icon-stack {
transform: translateY(-1px);
}
.breadcrumbs .icon-sheet {
transform: translateY(-2px);
}
.breadcrumbs li:not(:last-child)::after {
content: ">";
margin-left: 8px;
color: var(--color-separator);
font-weight: var(--font-weight-light);
font-size: 0.8em;
}
.breadcrumbs a {
text-decoration: none;
color: inherit;
transition: color var(--transition-fast);
display: flex;
align-items: center;
}
.breadcrumbs a:hover {
color: var(--color-text-primary);
}
.breadcrumbs a:hover .bc-text {
text-decoration: underline;
}
.bc-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 300px;
}
.breadcrumbs [aria-current="page"] {
color: var(--color-text-primary);
font-weight: var(--font-weight-medium);
}
.breadcrumb-nav {
margin-left: auto;
display: flex;
gap: 8px;
flex-shrink: 0;
}
.bc-nav-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
color: var(--color-text-secondary);
transition: all var(--transition-fast);
}
.bc-nav-btn:hover {
background: var(--color-bg-ui-hover);
color: var(--color-text-primary);
}
.bc-nav-btn.disabled {
opacity: 0.3;
pointer-events: none;
}
/* --- Gallery Grid --- */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--gallery-gap);
}
.gallery-card {
border-radius: var(--gallery-radius);
overflow: hidden;
position: relative;
transition: transform var(--transition-fast);
/* Apply the random rotation if provided via inline style */
transform: rotate(var(--rot, 0deg));
}
/* Default Hover: Lift (applied only if zoom is NOT active) */
body:not(.hover-zoom) .gallery-card:hover {
/* Maintain the rotation while lifting */
transform: rotate(var(--rot, 0deg)) translateY(-5px);
}
/* Alternative Hover: Zoom */
body.hover-zoom .gallery-card:hover {
/* Straighten the card when zooming for a cleaner focus */
transform: rotate(0deg) scale(1.05);
transform-origin: center center;
z-index: 20; /* Ensure the zoomed item sits above its neighbors */
}
.gallery-card a {
text-decoration: none;
color: inherit;
position: relative; /* For title overlay positioning */
display: block;
}
.thumb-wrap {
width: 100%;
aspect-ratio: 4 / 3;
background: var(--color-bg-ui-hover);
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.thumb-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
/* Add a transition for the progressive loading effect */
transition: filter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.progressive-thumb {
/* Start with a blur effect for low-res images */
filter: blur(8px);
}
.progressive-thumb.is-loaded {
/* Remove the blur when the high-res image is ready */
filter: blur(0);
}
.placeholder-svg {
width: 40px;
height: auto;
opacity: 0.6;
}
.gallery-card h3 {
padding: 12px 5px;
font-size: var(--font-size-lg);
}
/* --- Layout: Waterfall (Masonry) --- */
.gallery-grid[data-layout="waterfall"] {
display: block;
column-count: 3;
column-gap: var(--gallery-gap);
}
.gallery-grid[data-layout="waterfall"] .gallery-card {
break-inside: avoid;
margin-bottom: var(--gallery-gap);
}
.gallery-grid[data-layout="waterfall"] .thumb-wrap {
aspect-ratio: auto;
height: auto;
}
@media (max-width: 1000px) { .gallery-grid[data-layout="waterfall"] { column-count: 2; } }
@media (max-width: 600px) { .gallery-grid[data-layout="waterfall"] { column-count: 1; } }
/* Vertically center the carousel within the main content area */
main > .container:has(.carousel-wrapper) {
display: flex;
flex-direction: column;
justify-content: center;
height: calc(100vh - var(--header-height) - 60px); /* Full viewport minus header and main's vertical padding (20px top + 40px bottom) */
}
/* --- Layout: Carousel --- */
.carousel-wrapper {
position: relative;
width: 100%;
height: var(--carousel-height);
display: flex;
align-items: center;
overflow: hidden;
}
.carousel-nav {
position: absolute;
z-index: 10;
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--color-border);
border-radius: 50%;
width: 48px;
height: 48px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
box-shadow: 0 4px 10px var(--color-shadow);
color: var(--color-text-primary);
}
.carousel-nav:hover { transform: scale(1.1); background: #fff; }
.carousel-nav.prev { left: 20px; }
.carousel-nav.next { right: 20px; }
.gallery-grid[data-layout="carousel"] {
display: flex;
height: 100%;
width: 100%;
overflow: visible; /* Track flows outside, Wrapper clips it */
padding: 0;
align-items: center;
will-change: transform; /* Optimize for slider logic */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.gallery-grid[data-layout="carousel"]::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.gallery-grid[data-layout="carousel"] .gallery-card {
flex: 0 0 auto;
height: 100%; /* Occupy the full available height of the carousel row */
width: auto; /* Allow JS to set specific width based on image proportions */
max-width: 90vw; /* Ensure card is not wider than the viewport on mobile */
margin-right: var(--gallery-gap);
background-color: var(--color-bg-ui); /* Add a subtle background */
}
.gallery-grid[data-layout="carousel"] .gallery-card a {
display: flex;
flex-direction: column;
height: 100%;
align-items: center; /* Prevents children from stretching to full card width */
}
.gallery-grid[data-layout="carousel"] .thumb-wrap {
flex: 1;
min-height: 0; /* Prevents image from overflowing its flex container */
background: transparent;
/* Use flex to center the image stably, preventing layout jumps on load */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden; /* Contain the image within its wrapper */
aspect-ratio: auto; /* Allow wrapper to fit image proportions */
width: auto; /* Override global 100% width */
}
.gallery-grid[data-layout="carousel"] .thumb-wrap img {
/* Force the image to fill the container's height; object-fit preserves aspect ratio. */
height: 100%;
width: auto;
object-fit: contain;
}
.gallery-grid[data-layout="carousel"] .gallery-card h3 {
flex-shrink: 0;
padding: 10px 15px;
font-size: var(--font-size-base);
text-align: center;
}
/* --- Layout: List View --- */
.gallery-grid[data-layout="list"].list-single-column {
display: flex;
flex-direction: column;
gap: 0;
background-color: var(--color-bg-body);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
overflow: hidden;
}
/* Remove shadows and lift effects for all list items */
.gallery-grid[data-layout="list"] .gallery-card,
.gallery-grid[data-layout="list"] .gallery-card:hover {
box-shadow: none !important;
transform: none !important;
}
.gallery-grid[data-layout="list"].list-single-column .gallery-card {
border-radius: 0;
background-color: transparent;
padding: 0;
display: block;
min-height: 64px;
border-bottom: 1px solid var(--color-border);
transition: background-color var(--transition-fast);
}
.gallery-grid[data-layout="list"].list-single-column .gallery-card:last-child {
border-bottom: none;
}
.gallery-grid[data-layout="list"].list-single-column .gallery-card:hover {
background-color: var(--color-bg-ui-hover);
}
.gallery-grid[data-layout="list"].list-single-column .gallery-card a {
display: grid;
grid-template-columns: var(--list-cols, 1fr);
align-items: center;
gap: 20px;
width: 100%;
padding: 10px 15px;
text-decoration: none;
color: inherit;
}
/* Default columns layout - will be adjusted by headers/items */
.gallery-grid[data-layout="list"].list-single-column {
--list-cols: 68px 1fr;
}
/* Fallback if no thumbnails are shown */
.gallery-grid[data-layout="list"].list-single-column:not(:has(.thumb-wrap)) {
--list-cols: 1fr;
}
.gallery-grid[data-layout="list"].list-single-column:has(.list-artist) {
--list-cols: 68px 2fr 1.2fr;
}
.gallery-grid[data-layout="list"].list-single-column:not(:has(.thumb-wrap)):has(.list-artist) {
--list-cols: 2fr 1.2fr;
}
.gallery-grid[data-layout="list"].list-single-column:has(.list-date) {
--list-cols: 68px 2fr 0.8fr;
}
.gallery-grid[data-layout="list"].list-single-column:not(:has(.thumb-wrap)):has(.list-date) {
--list-cols: 2fr 0.8fr;
}
.gallery-grid[data-layout="list"].list-single-column:has(.list-artist):has(.list-date) {
--list-cols: 68px 2fr 1.2fr 0.8fr;
}
.gallery-grid[data-layout="list"].list-single-column:not(:has(.thumb-wrap)):has(.list-artist):has(.list-date) {
--list-cols: 2fr 1.2fr 0.8fr;
}
/* Label Filter Pills */
.label-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 25px;
padding: 0 5px;
}
.label-pill {
background: var(--color-bg-ui);
border: 1px solid var(--color-border);
color: var(--color-text-secondary);
padding: 6px 16px;
border-radius: 20px;
font-size: var(--font-size-sm);
cursor: pointer;
transition: all var(--transition-fast);
font-family: inherit;
user-select: none;
}
.label-pill:hover {
background: var(--color-bg-ui-hover);
color: var(--color-text-primary);
border-color: var(--color-text-secondary);
}
.label-pill.is-active {
background: var(--color-accent);
color: white;
border-color: var(--color-accent);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* Header Styles */
.list-header {
display: grid;
grid-template-columns: var(--list-cols, 1fr);
gap: 20px;
padding: 12px 15px;
background-color: var(--color-bg-ui);
border-bottom: 2px solid var(--color-border);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
user-select: none;
}
.list-header div[data-sort] {
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
transition: color var(--transition-fast);
}
.list-header div[data-sort]:hover {
color: var(--color-text-primary);
}
.list-header div.active-sort {
color: var(--color-accent);
}
.list-header .sort-icon {
padding-top: 3px;
}
.list-header .sort-icon::after {
content: "";
display: inline-block;
width: 12px;
height: 12px;
background-color: currentColor; /* inherits text color */
opacity: 0;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}
/* ASCENDING */
.list-header div.active-sort.asc .sort-icon::after {
mask-image: var(--arrow-up);
opacity: 1;
}
/* DESCENDING */
.list-header div.active-sort.desc .sort-icon::after {
mask-image: var(--arrow-down);
opacity: 1;
}
.gallery-grid[data-layout="list"].list-single-column .thumb-wrap.list-thumb-small {
width: 64px;
height: 64px;
aspect-ratio: 1 / 1;
border-radius: var(--radius-sm);
overflow: hidden;
background-color: var(--color-bg-ui);
}
.gallery-grid[data-layout="list"].list-single-column .card-info.list-info {
margin: 0;
padding: 0;
min-height: auto;
position: static; /* Force it to stay in the grid flow */
background: none !important;
color: var(--color-text-primary);
}
.gallery-grid[data-layout="list"].list-single-column .card-info.list-info h3 {
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
margin: 0;
padding: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.list-artist, .list-date {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 768px media query removed if it only contained labels logic */
@media (max-width: 600px) {
.list-header .header-artist,
.gallery-grid[data-layout="list"] .list-artist,
.list-header .header-date,
.gallery-grid[data-layout="list"] .list-date,
.list-header .header-thumb,
.gallery-grid[data-layout="list"] .thumb-wrap.list-thumb-small {
display: none !important;
}
.gallery-grid[data-layout="list"].list-single-column {
--list-cols: 1fr !important;
}
}
/* Grid layout for list view (no title, or medium/large thumbnails) */
.gallery-grid[data-layout="list"].list-grid-layout {
display: grid;
/* Default for small/medium/large, will be overridden by specific classes if needed */
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Base for small/medium */
gap: var(--gallery-gap);
}
/* Specific grid column adjustments based on thumbnail size */
.gallery-grid[data-layout="list"].list-grid-layout.list-thumb-medium {
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}
.gallery-grid[data-layout="list"].list-grid-layout.list-thumb-large {
grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
}
.gallery-grid[data-layout="list"].list-grid-layout .gallery-card {
border-radius: var(--gallery-radius);
background-color: var(--color-bg-ui);
border: 1px solid var(--color-border);
overflow: hidden;
position: relative;
}
.gallery-grid[data-layout="list"].list-grid-layout .gallery-card a {
display: block;
position: relative;
width: 100%;
height: 100%;
}
.gallery-grid[data-layout="list"].list-grid-layout .thumb-wrap.list-thumb-grid {
aspect-ratio: 1 / 1; /* Square for grid thumbnails */
background-color: var(--color-bg-ui-hover);
}
.gallery-grid[data-layout="list"].list-grid-layout .thumb-wrap.list-thumb-grid img {
object-fit: cover;
}
/* Overlay title for grid items if showTitle is true */
.gallery-grid[data-layout="list"].list-grid-layout .gallery-card .card-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
color: white;
padding: 15px 10px 8px;
z-index: 2;
margin: 0;
}
.gallery-grid[data-layout="list"].list-grid-layout .gallery-card .card-info h3 {
font-size: var(--font-size-sm);
padding: 0;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: white;
}
/* Hide card-info if showTitle is false or empty */
.gallery-grid[data-layout="list"].list-grid-layout .gallery-card .card-info:empty,
.gallery-grid[data-layout="list"].list-grid-layout .gallery-card:not(:has(h3)) .card-info {
display: none;
}
/* --- Single Post View --- */
.post-layout { position: relative; }
.post-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
border-bottom: 1px solid var(--color-border);
padding-bottom: 20px;
}
.post-nav.nav-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
/* Center navigation vertically on the hero image area across layouts */
height: calc(100vh - var(--header-height) - 100px);
max-height: 700px;
pointer-events: none; /* Allows interaction with content underneath */
z-index: 100;
display: block;
margin: 0;
padding: 0;
border: none;
}
.post-nav.nav-overlay .btn-nav,
.post-nav.nav-overlay .btn-grid {
position: absolute;
pointer-events: auto; /* Re-enables clicking for the buttons */
opacity: 0.2; /* Very light when overlaying content */
background: var(--color-bg-body);
box-shadow: 0 4px 15px var(--color-shadow-subtle);
transition: all var(--transition-base);
left: 20px;
}
.post-nav.nav-overlay .btn-nav:hover,
.post-nav.nav-overlay .btn-grid:hover {
opacity: 1 !important;
transform: translateY(-50%) scale(1.1);
}
.post-nav.nav-overlay .btn-grid:hover { transform: scale(1.1); }
.post-nav.nav-overlay .btn-nav.prev { top: 50%; transform: translateY(-50%); }
.post-nav.nav-overlay .btn-nav.next { left: auto; right: 20px; top: 50%; transform: translateY(-50%); }
.post-nav.nav-overlay .btn-grid { top: 20px; }
/* Constrain width by layout when overlapping is a risk (side-by-side layouts)
This forces buttons to jump into the visual stage column. */
@media (min-width: 901px) and (max-width: 1299px) {
/* Match the Shopping visual-stage precisely: (100% - 50px gap) * 1.5/2.5 ratio */
article[data-layout="shopping"] .post-nav.nav-overlay { width: calc((100% - 50px) * 0.6); }
}
@media (min-width: 1025px) and (max-width: 1299px) {
/* Match Museum (2fr of 3fr, 40px gap) and Bento (2 cols of 4, 20px gaps) */
article[data-layout="museum"] .post-nav.nav-overlay { width: calc((100% - 40px) * 2 / 3); }
article[data-layout="bento"] .post-nav.nav-overlay { width: calc(50% - 10px); }
}
@media (min-width: 1300px) {
.post-nav.nav-overlay { width: 100%; }
.post-nav.nav-overlay .btn-nav, .post-nav.nav-overlay .btn-grid { opacity: 0.6; left: -45px; }
.post-nav.nav-overlay .btn-nav.next { left: auto; right: -45px; }
}
@media (min-width: 1400px) {
.post-nav.nav-overlay .btn-nav, .post-nav.nav-overlay .btn-grid { opacity: 0.8; left: -75px; }
.post-nav.nav-overlay .btn-nav.next { right: -75px; }
}
.post-nav.nav-overlay .nav-label { display: none; }
.post-nav.nav-overlay .nav-spacer { display: none; }
.btn-nav, .btn-grid, .nav-spacer {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
text-decoration: none;
color: var(--color-text-primary);
font-size: var(--font-size-sm);
/* Default: Circle Shape */
width: 44px;
height: 44px;
padding: 0;
border-radius: var(--radius-circle);
border: 1px solid var(--color-border);
transition: all var(--transition-fast);
background: var(--color-bg-body);
}
/* Spacer balances the layout when a button is missing */
.nav-spacer {
border: none;
background: none;
}
.btn-nav .nav-label, .btn-grid .nav-label {
display: none; /* Hidden by default in circle mode */
}
li.editor-item a span.icon {
margin-right: 8px;
}
/* --- Editor Mode Label Styles --- */
.label-edit-chip {
display: inline-flex;
align-items: center;
height: 38px; /* Match standard label height */
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
padding-right: 8px;
background: var(--color-bg-ui);
transition: background-color var(--transition-fast);
vertical-align: middle;
}
/* Target the link specifically inside the edit chip to strip default label styles */
.label-link-list li .label-edit-chip a {
border: none;
background: transparent;
display: inline-block;
padding: 0 0 0 12px;
height: auto;
line-height: normal;
}
.label-link-list li .label-edit-chip a:hover {
background: transparent;
border-color: transparent;
}
.btn-delete-label {
appearance: none;
border: none;
background: none;
cursor: pointer;
color: var(--color-text-secondary);
font-size: 18px;
line-height: 1;
margin-left: 4px;
padding: 4px;
display: flex;
align-items: center;
}
.btn-delete-label:hover {
color: var(--color-danger);
}
/* Add Label Inline Interaction */
.add-label-li {
display: flex;
align-items: center;
height: 38px;
}
.btn-add-label-trigger {
appearance: none;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--color-bg-ui);
border: 1px dashed var(--color-border);
border-radius: var(--radius-circle);
cursor: pointer;
color: var(--color-text-secondary);
font-size: 20px;
line-height: 1;
transition: all var(--transition-fast);
padding: 0;
}
.btn-add-label-trigger:hover {
border-color: var(--color-text-primary);
background: var(--color-bg-ui-hover);
}
.add-label-input-group {
display: flex;
align-items: center;
background: var(--color-bg-ui);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
padding: 4px;
height: 36px;
position: relative;
}
.input-new-label {
border: none;
background: transparent;
padding: 0 8px 0 12px;
font-size: var(--font-size-sm);
color: var(--color-text-primary);
width: 120px;
outline: none;
}
.label-suggestions {
position: absolute;
top: 100%;
left: 0;
min-width: 160px;
max-height: 150px;
overflow-y: auto;
background: var(--color-bg-ui);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 4px 10px var(--color-shadow);
z-index: 1000;
list-style: none;
padding: 0;
margin: 8px 0 0 0;
display: none;
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
}
.label-suggestions::-webkit-scrollbar {
width: 6px;
}
.label-suggestions::-webkit-scrollbar-track {
background: transparent;
}
.label-suggestions::-webkit-scrollbar-thumb {
background-color: var(--color-border);
border-radius: 3px;
}
.label-suggestions li {
padding: 8px 12px;
cursor: pointer;
font-size: var(--font-size-sm);
color: var(--color-text-primary);
border-bottom: 1px solid var(--color-border);
}
.label-suggestions li:last-child {
border-bottom: none;
}
.label-suggestions li:hover {
background: var(--color-bg-ui-hover);
}
.btn-confirm-add, .btn-cancel-add {
appearance: none;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: var(--radius-circle);
border: none;
cursor: pointer;
font-size: 12px;
margin-left: 4px;
padding: 0;
}
.btn-confirm-add {
background: var(--color-success);
color: white;
}
.btn-confirm-add:hover {
background: var(--color-success-hover);
}
.btn-cancel-add {
background: transparent;
color: var(--color-text-secondary);
}
.btn-cancel-add:hover {
color: var(--color-text-primary);
background: rgba(0,0,0,0.05);
}
.btn-nav:hover, .btn-grid:hover {
background: var(--color-bg-ui-hover);
border-color: var(--color-accent);
}
/* Option: Switch back to Square Shape */
.post-nav.style-square .btn-nav,
.post-nav.style-square .btn-grid {
width: auto;
height: auto;
border-radius: var(--radius-sm);
padding: 8px 16px;
}
/* Option: Show Labels (Pill if circle, inline if square) */
.post-nav.style-square .nav-label,
.post-nav.show-labels .nav-label {
display: inline-block;
}
/* Info Card (Title Card) styling */
.info-card .info-label {
color: var(--color-card-label);
font-size: var(--font-size-card-label);
font-weight: var(--font-weight-card-label);
text-transform: var(--text-transform-card-label);
}
.info-card .info-value {
color: var(--color-card-value);
font-size: var(--font-size-card-value);
font-weight: var(--font-weight-card-value);
text-transform: var(--text-transform-card-value);
}
div[data-key="title"] .info-label { display: none }
div[data-key="title"] .info-value {
font-size: var(--font-size-card-title);
color: var(--color-card-title);
font-weight: var(--font-weight-card-title);
text-transform: var(--text-transform-card-title);
}
/* Share Actions in Info Card (Title Row) */
.info-row[data-key="title"] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.share-actions {
display: flex;
align-items: center;
gap: 8px;
}
.share-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 10px;
background-color: var(--color-bg-ui);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 0.8rem;
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
transition: all var(--transition-fast);
line-height: 1;
}
.share-btn:hover {
background-color: var(--color-bg-ui-hover);
border-color: var(--color-border-hover);
}
.share-btn.is-pinned {
background-color: var(--color-bg-ui-active);
border-color: var(--color-text-primary);
font-weight: 600;
}
.share-btn.is-pinned .icon {
transform: translateY(2px) scale(1);
clip-path: inset(0 0 4px 0);
}
.share-btn .icon {
width: 14px;
height: 14px;
background-color: currentColor;
}
.share-btn .btn-text {
display: none; /* Hidden by default, shown on larger screens */
}
.info-row:has(.share-actions) {
display: flex;
align-items: center;
}
.info-row:has(.share-actions) .share-actions {
margin-left: auto; /* pushes it to the left */
display: flex;
gap: 0.5rem;
}
.icon-pin {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z'/%3E%3C/svg%3E");
}
.is-news-item .share-btn.pin,
.is-description-item .share-btn.pin,
.is-article-item .share-btn.pin {
display: none !important;
}
.icon-mail {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3.638 3.75A2.639 2.639 0 0 0 1 6.388V17.5a2.753 2.753 0 0 0 2.75 2.75h16.5A2.753 2.753 0 0 0 23 17.5V6.388a2.639 2.639 0 0 0-2.638-2.638Zm17.3 5.513V17.5a.69.69 0 0 1-.688.688H3.75a.69.69 0 0 1-.688-.688V9.263l6.652 5.044a3.777 3.777 0 0 0 4.572 0zM3.063 6.388c0-.318.257-.575.575-.575h16.724a.576.576 0 0 1 .348 1.035l-7.67 5.818a1.727 1.727 0 0 1-2.08 0L3.29 6.848a.58.58 0 0 1-.228-.46Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3.638 3.75A2.639 2.639 0 0 0 1 6.388V17.5a2.753 2.753 0 0 0 2.75 2.75h16.5A2.753 2.753 0 0 0 23 17.5V6.388a2.639 2.639 0 0 0-2.638-2.638Zm17.3 5.513V17.5a.69.69 0 0 1-.688.688H3.75a.69.69 0 0 1-.688-.688V9.263l6.652 5.044a3.777 3.777 0 0 0 4.572 0zM3.063 6.388c0-.318.257-.575.575-.575h16.724a.576.576 0 0 1 .348 1.035l-7.67 5.818a1.727 1.727 0 0 1-2.08 0L3.29 6.848a.58.58 0 0 1-.228-.46Z'/%3E%3C/svg%3E");
}
.icon-share {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.187 9.25a4.126 4.126 0 0 0 0-8.25 4.126 4.126 0 0 0-4.069 4.812L8.545 8.911a4.126 4.126 0 1 0-2.733 7.214 4.112 4.112 0 0 0 2.733-1.036l5.573 3.098a4.126 4.126 0 1 0 8.194.688 4.126 4.126 0 0 0-6.857-3.09l-5.573-3.097c.038-.224.056-.452.056-.688 0-.236-.022-.464-.056-.688l5.573-3.098a4.104 4.104 0 0 0 2.732 1.036z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.187 9.25a4.126 4.126 0 0 0 0-8.25 4.126 4.126 0 0 0-4.069 4.812L8.545 8.911a4.126 4.126 0 1 0-2.733 7.214 4.112 4.112 0 0 0 2.733-1.036l5.573 3.098a4.126 4.126 0 1 0 8.194.688 4.126 4.126 0 0 0-6.857-3.09l-5.573-3.097c.038-.224.056-.452.056-.688 0-.236-.022-.464-.056-.688l5.573-3.098a4.104 4.104 0 0 0 2.732 1.036z'/%3E%3C/svg%3E");
}
.article-item .view-switcher-container {
display: none;
}
/* Responsive Collapse: Icon only on small screens */
@media (max-width: 600px) {
.share-btn .btn-text { display: none; }
}
.info-label::after {
content: ": ";
}
div.info-card div.info-row[data-key="title"] {
margin-bottom: 20px;
}
.description {
margin-bottom: 20px;
}
/* --- Image View Styles (Applied via Body Class) --- */
/* Global Card Logic */
.card-info { display: block; }
.card-date { display: none; }
.card-info h3 { padding: 0; }
/* 1. img-chip: Square image, Rounded Corners, Title Overlay (Default Look) */
body.img-chip .gallery-card { border-radius: var(--gallery-radius); }
body.img-chip .thumb-wrap { aspect-ratio: 1 / 1; }
body.img-chip .card-info {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
color: white;
padding: 20px 12px 10px;
z-index: 2;
}
body.img-chip h3 { padding: 0; font-size: var(--font-size-lg); }
/* 2. img-photo: Proportional, Square Corners, White Border, Shadow */
body.img-photo .gallery-card {
background: #fff;
padding: 10px;
border: 1px solid var(--color-border);
box-shadow: 0 4px 15px var(--color-shadow);
border-radius: 0;
}
body.img-photo .thumb-wrap { aspect-ratio: auto; border-radius: 0; }
body.img-photo .card-info {
position: absolute;
bottom: 10px; left: 10px; right: 10px;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
color: white;
padding: 10px;
}
body.img-photo h3 { padding: 0; font-size: var(--font-size-sm); }
/* 3. img-plain: Proportional, Square Corners, No Border, Title on Hover */
body.img-plain .gallery-card { border-radius: 0; }
body.img-plain .thumb-wrap { aspect-ratio: auto; border-radius: 0; }
body.img-plain .card-info { opacity: 0; transition: opacity 0.2s; position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6); color: white; padding: 10px; }
body.img-plain .gallery-card:hover .card-info {
opacity: 1;
}
/* 4. img-slide: 4:3 Crop, White Edge, Rounded, Bottom Title Area, Shadow */
body.img-slide .gallery-card {
background: #fff;
padding: 12px 12px 38px 12px;
border-radius: var(--radius-md);
box-shadow: 0 5px 20px var(--color-shadow);
}
body.img-slide .thumb-wrap { aspect-ratio: 4 / 3; border-radius: 3px; }
body.img-slide h3 {
font-size: 0.8rem;
padding: 10px 0 0 0;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 5. img-polaroid: 1:1 Crop, Square, Wide Bottom, Title/Date, Shadow */
body.img-polaroid .gallery-card {
background: #fff;
padding: 12px 12px 50px 12px;
border-radius: 0;
box-shadow: 0 8px 25px var(--color-shadow);
}
body.img-polaroid .thumb-wrap { aspect-ratio: 1 / 1; border-radius: 0; }
body.img-polaroid .card-info {
margin-top: 12px;
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0 4px;
}
body.img-polaroid h3 {
font-size: 0.85rem;
padding: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
text-align: left;
}
/* 6. img-basic: ONLY image no title no actions */
body.img-basic .gallery-card { border-radius: 0; box-shadow: none; }
body.img-basic .thumb-wrap { aspect-ratio: auto; border-radius: 0; }
body.img-basic .card-info { display: none !important; }
body.img-basic .gallery-card:hover { transform: none; }
body.img-basic .gallery-card:hover img { filter: brightness(1.1); }
/* --- Layout: Scattered --- */
body.layout-scattered {
background-color: var(--color-bg-ui);
/* Forces the vertical scrollbar track to always exist. This prevents the viewport width
from changing (and the layout from jumping) when switching to the arranged grid view. */
overflow-y: scroll;
}
body.layout-scattered:has(.is-arranged) {
overflow-y: scroll !important;
}
body.layout-scattered main {
display: flex;
flex-direction: column;
height: 100vh;
padding-top: var(--header-height); /* Default if no breadcrumbs */
padding-bottom: 120px; /* Space for the fixed footer */
overflow: hidden;
position: relative;
}
body.layout-scattered main .collection-description {
display: none; /* Hide collection description in scattered layout for a cleaner look */}
body.layout-scattered main {
overflow: visible; /* Allow the gallery cards to overflow for the scattered effect */
}
/* Ensure the area for scattering items uses the full window width */
body.layout-scattered main > .container {
max-width: none;
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
}
body.layout-scattered.has-breadcrumbs main {
padding-top: calc(var(--header-height) + var(--breadcrumb-height));
}
body.layout-scattered .gallery-grid {
display: block;
width: 100%;
flex: 1;
position: relative;
}
body.layout-scattered .gallery-card {
position: absolute;
width: 280px;
transform: rotate(var(--rot, 0deg)) scale(0.8);
transition: transform var(--transition-base) cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s, z-index 0s;
touch-action: none;
user-select: none;
}
/* Disable pointer interaction and native drag for children so the whole card
acts as a single handle for our custom dragging logic. */
body.layout-scattered .gallery-card * {
pointer-events: none;
-webkit-user-drag: none;
}
body.layout-scattered .gallery-card h3 {
padding: 10px 0 0 0;
font-size: var(--font-size-sm);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
}
body.layout-scattered .gallery-card:hover {
transform: rotate(0deg) scale(1.1); /* Pull to front and straighten */
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
cursor: grab; /* Hand icon indicating it can be picked up */
}
/* --- Scattered Controls --- */
.scattered-controls {
position: fixed !important;
bottom: 30px !important;
right: 30px !important;
z-index: 99999 !important; /* Top level stacking */
display: flex !important;
gap: 12px;
pointer-events: auto !important;
}
.btn-scatter-control {
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--color-border);
padding: 10px 20px;
border-radius: 25px;
font-size: var(--font-size-sm);
font-weight: 600;
cursor: pointer;
transition: all var(--transition-base) cubic-bezier(0.4, 0, 0.2, 1);
color: var(--color-accent);
box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
border-color: var(--color-border-hover) !important;
min-width: 100px;
}
.btn-scatter-control:hover:not(:disabled) {
background: #ffffff;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.btn-scatter-control:disabled {
opacity: 0.2;
cursor: not-allowed;
transform: none;
}
body.dark .btn-scatter-control {
background: rgba(30, 30, 30, 0.85);
border-color: #444;
box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}
/* Allow scrolling when arranged */
body.layout-scattered:has(.is-arranged) main {
height: auto !important;
overflow: visible !important;
}
.gallery-grid.is-arranged {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 30px;
padding: 40px 20px;
height: auto !important;
position: relative !important;
}
.gallery-grid.is-arranged .gallery-card {
position: static !important;
width: auto !important;
transform: none !important;
}
/* --- Basic Layout for Single Item View --- */
article[data-layout="basic"] .item-main-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
min-height: calc(100vh - var(--header-height) - 100px);
}
article[data-layout="basic"] .visual-stage {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-bottom: 0;
flex: 1;
}
/* --- Default Layout for Single Item View (News/Collection Intro) --- */
article[data-layout="default"] {
display: flex; /* Make article a flex container */
flex-direction: column; /* Stack children vertically */
align-items: center; /* Center items horizontally */
}
article[data-layout="default"] .hero-image-wrapper {
width: 100%;
margin-bottom: 40px; /* Space between image and content */
position: relative; /* For image actions overlay */
display: flex; /* To center the image within the wrapper */
justify-content: center;
align-items: center;
overflow: hidden; /* Ensure image doesn't spill */
background-color: var(--color-bg-ui); /* Placeholder background */
border-radius: var(--radius-md); /* Soften corners */
}
article[data-layout="default"] .hero-image-wrapper img {
max-width: 100%;
max-height: calc(100vh - var(--header-height) - 120px);
height: auto;
object-fit: contain; /* Ensure image fits without cropping */
display: block;
}
/* --- Block-based Editor Styles (Default Layout) --- */
.blocks-container {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
margin-bottom: 20px;
}
.content-block {
position: relative;
border: 1px dashed var(--color-border); /* Added dashed border for visual cue */
border-radius: var(--radius-sm);
padding: 8px;
background: transparent;
transition: all var(--transition-fast);
}
.content-block:hover {
/* Only show hover border if not currently being dragged */
border-color: var(--color-border);
background: var(--color-bg-ui);
z-index: 50; /* Ensure hovered block and its controls stay above neighbors */
}
.content-block .block-content {
outline: none;
min-height: 1em;
}
/*.content-block[data-tag="h2"] .block-content { font-size: var(--font-size-h2); font-weight: bold; }
.content-block[data-tag="h3"] .block-content { font-size: var(--font-size-h3); font-weight: bold; }*/
.content-block[data-tag="blockquote"] .block-content { border-left: 3px solid var(--color-accent); padding-left: 15px; font-style: italic; color: var(--color-text-secondary); }
.content-block[data-tag="pre"] .block-content { font-family: monospace; background: var(--color-bg-ui-active); padding: 10px; border-radius: 4px; font-size: 0.9em; }
/* --- Content Block Controls (Editor Mode) --- */
.block-controls {
position: absolute;
top: 50%;
right: -32px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
opacity: 0;
transition: opacity 0.2s;
background: var(--color-bg-body);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 2px;
z-index: 10;
box-shadow: 0 2px 5px var(--color-shadow-subtle);
}
.content-block:hover .block-controls {
opacity: 1;
}
/* Bridge the gap between the block and the controls to prevent flicker and maintain priority */
.content-block:hover .block-controls::before {
content: '';
position: absolute;
top: -10px; bottom: -10px;
left: -40px; right: 0;
z-index: -1;
}
.block-controls button {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: none;
border: none;
cursor: pointer;
font-size: 12px;
line-height: 1;
color: var(--color-text-secondary);
transition: all var(--transition-fast);
border-radius: 2px;
}
.block-controls .icon {
width: 14px;
height: 14px;
}
.block-controls button:hover {
background-color: var(--color-bg-ui-hover);
color: var(--color-text-primary);
}
.block-controls .btn-delete-block {
color: var(--color-danger);
}
.block-controls .btn-delete-block:hover {
background-color: #fee;
}
.block-controls .btn-add-below {
color: var(--color-success);
}
.block-controls .btn-add-below:hover {
background-color: #efe;
}
/* --- Overlay Editor --- */
.raw-html-editor-wrapper {
display: none;
flex-direction: column;
gap: 10px;
width: 100%;
margin-bottom: 25px;
}
.overlay-editor-toolbar {
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
padding: 10px 15px;
background: var(--color-bg-ui);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 13px;
}
.overlay-editor-toolbar button {
background: var(--color-bg-body);
border: 1px solid var(--color-border);
padding: 5px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
font-family: inherit;
font-weight: var(--font-weight-medium);
transition: all var(--transition-fast);
color: var(--color-text-primary);
display: flex;
align-items: center;
gap: 6px;
}
.overlay-editor-toolbar button:hover {
background: var(--color-bg-ui-hover);
border-color: var(--color-border-hover);
}
.overlay-editor-toolbar label {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
user-select: none;
color: var(--color-text-secondary);
}
.overlay-editor-toolbar label input {
margin: 0;
}
.overlay-editor-toolbar .hint {
margin-left: auto;
color: var(--color-text-secondary);
font-size: 12px;
opacity: 0.7;
}
.editor-surface {
position: relative;
height: 500px;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--color-bg-body);
border: 1px solid var(--color-border);
box-shadow: inset 0 2px 4px var(--color-shadow-subtle);
}
.editor-hl, .editor-src {
position: absolute;
inset: 0;
margin: 0;
padding: 20px;
font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
box-sizing: border-box;
white-space: pre-wrap;
word-wrap: break-word;
}
.editor-hl {
color: var(--color-text-primary);
pointer-events: none;
overflow: auto;
z-index: 1;
}
.editor-src {
background: transparent;
color: transparent !important;
-webkit-text-fill-color: transparent !important;
caret-color: var(--color-text-primary);
border: 0;
outline: 0;
resize: none;
overflow: auto;
z-index: 2;
}
/* Syntax Highlighting */
.editor-hl .tag { color: #005cc5; }
.editor-hl .tag.struct { color: #005cc5; font-weight: 500; }
.editor-hl .tag.inline { color: #d73a49; }
.editor-hl .tag.self { color: #6f42c1; }
.editor-hl .attr { color: #24292e; }
.editor-hl .css-block { color: #0366d6; }
.editor-hl .match { background: rgba(255, 230, 150, 0.45); border-radius: 2px; }
.editor-hl .broken { background: rgba(215, 58, 73, 0.1); color: #d73a49 !important; border-radius: 2px; text-decoration: underline wavy; }
.editor-hl .entity {
background: rgba(0, 0, 0, 0.07);
border-radius: 3px;
padding: 0 2px;
font-size: 0.92em;
color: #555;
letter-spacing: -0.01em;
}
/* Dark Mode Overrides */
body.dark .editor-surface {
background: #0d1117;
border-color: #30363d;
}
body.dark .editor-hl .tag { color: #79c0ff; }
body.dark .editor-hl .tag.struct { color: #79c0ff; }
body.dark .editor-hl .tag.inline { color: #ff7b72; }
body.dark .editor-hl .tag.self { color: #d2a8ff; }
body.dark .editor-hl .attr { color: #c9d1d9; }
body.dark .editor-hl .css-block { color: #79c0ff; }
body.dark .editor-hl .match { background: rgba(255, 230, 150, 0.15); }
body.dark .editor-src { caret-color: #ffffff; }
body.dark .editor-hl .entity { background: rgba(255, 255, 255, 0.08); color: #94a3b8; }
@media (max-width: 800px) {
.overlay-editor-toolbar .hint { display: none; }
.editor-surface { height: 400px; }
}
.btn-toggle-raw-html.is-active {
color: var(--color-accent);
background: var(--color-bg-ui-active);
border-color: var(--color-accent);
}
.btn-toggle-raw-html .icon { width: 18px; height: 18px; }
article[data-layout="default"] .item-main-content {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
width: 100%;
max-width: 800px; /* Standard document width */
margin: 0 auto; /* Center the content block */
padding: 20px; /* Add some padding */
}
article[data-layout="default"] .document-title {
font-size: var(--font-size-h1); /* Use a large heading size */
margin-bottom: 20px;
line-height: 1.2;
}
article[data-layout="default"] .description,
article[data-layout="default"] .regular-post-content {
margin-bottom: 20px;
/* Removed debugging min-height and background-color */
line-height: 1.6;
}
article[data-layout="default"] .visual-stage,
article[data-layout="default"] .metadata-stage,
article[data-layout="default"] .extra-images-grid {
display: none; /* Hide these elements in the default layout */
}
/* Ensure images within the content flow naturally */
article[data-layout="default"] .regular-post-content img {
max-width: 100%;
max-height: calc(100vh - var(--header-height) - 120px);
height: auto;
display: block; /* Prevent inline spacing issues */
margin: 20px auto; /* Center images within the text flow */
}
/* Ensure the publish button is visible and aligned */
article[data-layout="default"] .publish-actions {
margin-top: 40px;
width: auto;
height: auto;
object-fit: contain;
display: block;
display: flex;
justify-content: flex-end;
}
/* --- Editor New: Formatting Layout (1/3 Image, 2/3 Content) --- */
/* This only applies to the creation stage when Article/News/Info is selected */
.view-editor_new article.is-formatting-layout .item-main-content {
grid-template-columns: 1fr 2fr;
gap: 50px;
}
.view-editor_new article.is-formatting-layout .visual-stage {
position: sticky;
top: calc(var(--header-height) + 20px);
width: 100%;
}
.view-editor_new article.is-formatting-layout .metadata-stage {
position: static;
max-width: 100%;
}
@media (max-width: 900px) {
.view-editor_new article.is-formatting-layout .item-main-content {
grid-template-columns: 1fr;
}
.view-editor_new article.is-formatting-layout .visual-stage {
position: static;
}
}
article[data-layout="basic"] .main-image-wrapper img {
max-width: 100%;
max-height: calc(100vh - var(--header-height) - 120px);
width: auto;
height: auto;
object-fit: contain;
display: block;
}
body.has-breadcrumbs article[data-layout="basic"] .main-image-wrapper img {
max-height: calc(100vh - var(--header-height) - var(--breadcrumb-height) - 120px);
}
article[data-layout="basic"] .metadata-stage,
article[data-layout="basic"] .extra-images-grid {
display: none; /* Hidden by default as requested */
}
body.is-editor article[data-layout="basic"] .metadata-stage {
display: block; /* Ensure visibility in editor mode */
}
/* --- Museum Layout for Single Item View --- */
article[data-layout="museum"] .item-main-content {
display: grid;
grid-template-columns: minmax(0, 2fr) 1fr; /* Allow image column to shrink */
align-items: start;
gap: 40px;
}
article[data-layout="museum"] .visual-stage {
display: flex;
justify-content: center;
align-items: center;
}
article[data-layout="museum"] .main-image-wrapper {
position: relative;
width: 100%;
text-align: center;
}
article[data-layout="museum"] .main-image-wrapper img {
max-width: 100%;
max-height: calc(100vh - var(--header-height) - 80px); /* Viewport height minus header and padding */
height: auto;
object-fit: contain;
display: inline-block;
}
article[data-layout="museum"] .info-card {
margin-bottom: 40px;
}
article[data-layout="museum"] .metadata-stage {
position: sticky;
top: calc(var(--header-height) + 20px); /* Stick below the header */
}
@media (max-width: 1024px) {
article[data-layout="museum"] .item-main-content {
grid-template-columns: 1fr; /* Stack on smaller screens */
}
article[data-layout="museum"] .metadata-stage {
position: static; /* Un-stick when stacked */
margin-top: 20px;
}
}
/* --- Slider Layout for Single Item View --- */
article[data-layout="slider"] {
max-width: none; /* Allow slider to go full-width */
}
/* Make container full-width when it holds a slider layout */
main > .container:has(article[data-layout="slider"]) {
max-width: none;
padding-left: 0;
padding-right: 0;
}
article[data-layout="slider"] .slider-visual-stage {
height: 450px;
width: 100%;
position: relative;
background-color: var(--color-bg-ui);
border-bottom: 1px solid var(--color-border);
overflow: hidden;
}
article[data-layout="slider"] .slider-track {
display: flex;
height: 100%;
width: max-content;
will-change: transform;
/* Hide initially to prevent flickering during JS positioning */
opacity: 0;
/* Define transitions here; transform is 0s by default for instant snapping */
transition: opacity 0.4s ease, transform 0s;
}
article[data-layout="slider"] .slider-track.is-initialized {
opacity: 1;
}
/* Class added by JS during user-initiated movement */
article[data-layout="slider"] .slider-track.is-animating {
transition: opacity 0.4s ease, transform 0.3s ease-in-out;
}
article[data-layout="slider"] .slider-item {
flex: 0 0 auto;
height: 100%;
display: flex;
align-items: center;
min-width: 100px; /* Prevent layout collapse and flickering while loading */
margin: 0;
}
article[data-layout="slider"] .slider-item img {
display: block;
height: 100%;
width: auto;
object-fit: contain;
}
/* --- Slider Dots --- */
.slider-dots {
display: flex;
justify-content: center;
gap: 10px;
z-index: 110;
padding: 15px 0;
}
.slider-dot {
width: 8px;
height: 8px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--color-text-secondary);
opacity: 0.4;
cursor: pointer;
transition: all var(--transition-fast);
}
.slider-dot.is-active {
opacity: 1;
background: var(--color-accent);
transform: scale(1.2);
}
body.dark .slider-dots {
background: transparent;
}
.slider-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 100;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(0,0,0,0.1);
border-radius: var(--radius-circle);
width: 44px;
height: 44px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--transition-fast);
}
.slider-nav:hover {
background: rgba(255, 255, 255, 0.95);
}
.slider-nav .icon {
color: #333;
}
.slider-prev { left: 20px; }
.slider-next { right: 20px; }
article[data-layout="slider"] .slider-metadata-stage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin: 40px auto;
max-width: 1200px;
padding: 0 20px;
}
.label-stage {
display: block;
}
.extra-images-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid var(--color-border);
}
.extra-images-grid img {
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--radius-sm);
cursor: pointer;
transition: opacity var(--transition-fast);
background-color: var(--color-bg-ui);
}
.extra-images-grid img:hover {
opacity: 0.9;
}
/* --- Collapsible Additional Info --- */
.additional-info-wrapper {
position: relative;
}
.btn-more-info {
display: none; /* Hidden by default, shown via JS/CSS logic */
background: none;
border: none;
color: var(--color-accent);
font-weight: var(--font-weight-medium);
cursor: pointer;
padding: 5px 0;
margin-top: -10px; /* Pull up slightly over the fade */
position: relative;
z-index: 2;
}
/* Only apply collapsing logic if the article has the class */
article.collapse-additional-info .regular-post-content {
max-height: 120px; /* Approx 4-5 lines of text */
overflow: hidden;
position: relative;
transition: max-height 0.35s ease-out;
}
/* Fade-out gradient at the bottom of the collapsed text */
article.collapse-additional-info .regular-post-content::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background: linear-gradient(to top, var(--color-bg-body), transparent);
pointer-events: none;
transition: opacity 0.35s ease-out;
}
/* Styles for the expanded state */
article.collapse-additional-info .regular-post-content.is-expanded {
max-height: 2000px; /* A large value to accommodate all content */
}
article.collapse-additional-info .regular-post-content.is-expanded::after {
opacity: 0;
}
/* --- Collection List (for static pages) --- */
.label-link-list {
list-style: none;
padding: 20px 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.label-link-list li a {
display: block;
padding: 8px 15px;
background: var(--color-bg-ui);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
text-decoration: none;
color: var(--color-text-primary);
font-size: var(--font-size-sm);
transition: all var(--transition-fast) ease;
}
.label-link-list li a:hover {
background: var(--color-bg-ui-active);
border-color: var(--color-border-focus);
}
.label-edit-chip {
background: var(--color-bg-ui);
}
@media (max-width: 768px) {
article[data-layout="slider"] .slider-metadata-stage {
grid-template-columns: 1fr; /* Stack on mobile */
}
}
/* --- Theme Toggle Switch --- */
.theme-toggle-switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
margin-left: auto;
background: var(--color-bg-ui);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
cursor: pointer;
transition: background-color var(--transition-base), border-color var(--transition-base);
padding: 0;
appearance: none;
}
.edit-post-btn {
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-footer);
opacity: 0.6;
transition: opacity var(--transition-fast);
}
.edit-post-btn:hover {
opacity: 1;
}
.edit-post-btn .icon {
width: 20px;
height: 20px;
}
.theme-toggle-switch::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
background-color: var(--color-text-secondary);
border-radius: 50%;
transition: transform 0.3s ease, background-color 0.3s ease;
}
/* --- Remote Sync Indicator --- */
.sync-indicator {
display: inline-flex;
align-items: center;
color: var(--color-text-footer);
margin-left: auto;
animation: sync-pulse 2.5s infinite ease-in-out;
}
.sync-indicator svg {
width: 24px;
height: 24px;
display: block;
}
/* Reset switch margin when indicator is present to keep them grouped */
.sync-indicator + .theme-toggle-switch {
margin-left: 0;
}
@keyframes sync-pulse {
0%, 100% { opacity: 0.5; transform: scale(0.92); }
50% { opacity: 1; transform: scale(1); }
}
/* --- Footer --- */
footer {
background: var(--color-bg-footer);
color: var(--color-text-footer);
padding: 3rem 0;
text-align: center;
margin-top: auto; /* Ensures it stays at bottom if main is short */
}
/* Homepage-specific footer: make it float over the content */
body.view-index footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: var(--z-homepage-footer); /* Below header but above content */
margin-top: 0; /* Override sticky footer behavior */
}
/* Add padding to main on homepage to prevent content from being hidden by the fixed footer */
body.view-index main {
/* The footer has 3rem top/bottom padding + content. Let's give it enough space. */
padding-bottom: 0px;
padding-top: 0px !important;
width: 100%;
height: 100%;
}
body.view-index header, body.view-index footer {
background-color: transparent !important;
}
body.view-index header .logo-img {
height: 28px !important;
}
body.view-index footer .credits {
color: black !important;
}
body.view-index header {
border: none !important;
}
.page-context, .bc-text {
text-transform: capitalize;
}
/* --- Responsive Adaptations --- */
@media (max-width: 1024px) {
.page-context, .title-sep { display: none; }
}
@media (max-width: 768px) {
.desktop-nav { display: none; }
.hamburger-btn { display: flex; }
/* Responsive Breadcrumbs: Collapse intermediate items and compact UI */
.breadcrumbs .container { gap: 10px; }
.view-switcher-container { padding-right: 10px; }
.view-switcher { gap: 4px; }
.view-btn { width: 28px; height: 28px; }
.breadcrumbs ol { gap: 4px; }
.breadcrumbs li:not(:last-child)::after { margin-left: 4px; }
.breadcrumb-nav { gap: 4px; }
.bc-nav-btn { width: 28px; height: 28px; }
.breadcrumbs li.level0 .bc-text { display: none; }
.breadcrumbs li.level0 .icon { display: inline-block; }
}
@media (max-width: 600px) {
.breadcrumbs li.level1 .bc-text { display: none; }
.breadcrumbs li.level1 .icon { display: inline-block; }
}
@media (max-width: 450px) {
.breadcrumbs li:last-child .bc-text { display: none; }
.breadcrumbs li:last-child .icon { display: inline-block; }
.breadcrumbs li:last-child .icon { margin-right: 0; }
}
/*
Refinement: If there is ONLY a level1 (crumbs.length === 2),
never collapse it into an icon.
*/
.breadcrumbs .breadcrumb-list.has-only-level1 li.level1 .bc-text,
.breadcrumbs .breadcrumb-list.has-only-level1 li.level1:last-child .bc-text {
display: inline-block !important;
max-width: 180px; /* Tighter for mobile while keeping it text */
}
.breadcrumbs .breadcrumb-list.has-only-level1 li.level1 .icon,
.breadcrumbs .breadcrumb-list.has-only-level1 li.level1:last-child .icon {
display: none !important;
}
/* Override for static page titles in breadcrumbs: always show text, never icon */
.breadcrumbs li.static-page-title-breadcrumb .bc-text {
display: inline-block !important; /* Always show text */
max-width: 100% !important; /* Allow full width for ellipsis */
margin-right: 0 !important; /* Ensure no extra space if icon is hidden */
}
.breadcrumbs li.static-page-title-breadcrumb .icon {
display: none !important; /* Never show icon */
}
/* On mobile, the search trigger becomes just an icon */
.search-trigger {
background: none;
border: none;
width: auto;
padding: 5px;
}
.search-trigger .search-trigger-text {
display: none;
}
.search-trigger .icon-search {
margin-left: 0;
width: 24px;
height: 24px;
}
.page-layout {
max-width: 800px;
margin: 0 auto;
line-height: 1.6;
padding: 2rem 0;
}
.page-layout img {
max-width: 100%;
height: auto;
}
/* footer */
footer .container.credits {
display: flex; /* Turns the container into a flexbox */
align-items: center; /* Vertically centers all children regardless of height */
flex-wrap: wrap; /* Allows it to move to a second line on small screens */
gap: 10px;
}
/* Ensure the spans don't have weird top/bottom margins */
footer .container.credits span {
margin: 0;
line-height: normal; /* Prevents tall line-heights from pushing text down */
white-space: nowrap;
}
footer .footer-sep {
font-size: 1.125rem; /* 18px */
color: var(--color-separator);
user-select: none;
}
footer .footer-sep::before {
content: "|";
}
@media (max-width: 600px) {
.footer-sep {
display: none; /* Hides the vertical bars on small screens */
}
.container.credits {
flex-direction: column; /* Stacks the credits vertically */
gap: 5px;
text-align: center;
}
}
nav, header, footer, .mobile-flyout, .post-nav, form.search-form-overlay input.search-input-overlay, ul.label-link-list li a {
user-select: none;
}
article[data-layout="slider"] div.slider-metadata-stage {
padding-left: 40px;
padding-right: 40px;
}
body.dark {
/* --- Dark Theme Colors --- */
--color-bg-header: #1f1f1f;
--color-accent: #58a6ff; /* A bright blue for links and highlights */
--color-border: #30363d; /* Dark border, visible on UI backgrounds */
--color-bg-body: #0d1117; /* Very dark main background */
--color-bg-ui: #161b22; /* Slightly lighter for inputs, cards, etc. */
--color-bg-ui-hover: #21262d;
--color-bg-ui-active: #282e35;
--color-bg-pill: #30363d;
--color-bg-footer: #010409; /* Almost black footer */
--color-text-footer: #c9d1d9;
--color-text-primary: #c9d1d9; /* Light gray for primary text */
--color-text-secondary: #8b949e; /* Muted gray for secondary text */
/* --- Dark Theme Elements & Accents --- */
--color-border-focus: #58a6ff; /* Use accent color for focus */
--color-separator: #444c56;
--color-shadow: rgba(0, 0, 0, 0.4); /* Shadows are darker in dark mode */
--color-shadow-subtle: rgba(0, 0, 0, 0.2);
--color-badge-bg: #21262d;
--color-badge-text: #c9d1d9;
--color-card-title: #c9d1d9;
--color-header-text: #c9d1d9;
--color-card-value: #c9d1d9;
--color-header-text-secondary: #c9d1d9;
--color-header-border: var(--color-border);
--color-label-draft-bg: #3a3a00; /* Darker yellow */
--color-label-news-bg: #003a3a; /* Darker blue */
--color-label-collection-intro-bg: #3a003a; /* Darker purple */
--color-label-article-bg: rgb(88, 158, 48);
}
body.dark .theme-toggle-switch::after {
transform: translateX(20px);
background-color: var(--color-accent);
}
/* --- Editor Mode Styles --- */
/* Style for when an editable element is focused */
body.is-editor [contenteditable]:focus,
body.is-editor [contenteditable]:focus-visible {
background-color: var(--color-bg-ui);
outline: 1px solid var(--color-border-focus);
}
body.dark.is-editor [contenteditable]:focus,
body.dark.is-editor [contenteditable]:focus-visible {
background-color: gray;
outline: 1px solid gray;
}
body.is-editor .info-row {
transition: background-color var(--transition-base);
border-radius: var(--radius-sm); /* Soft edges for the block */
padding: 2px 6px; /* Ensure color doesn't hug text too tightly */
margin: 0 -6px; /* Negate padding to keep alignment */
margin-bottom: 6px;
cursor: text;
}
body.is-editor .info-value {
display: inline-block;
min-width: 2px;
}
body.is-editor .info-value:empty {
background-color: inherit;
border-radius: var(--radius-sm);
height: 1.4em;
vertical-align: text-bottom;
}
body.is-editor .description,
body.is-editor .regular-post-content {
border-radius: var(--radius-sm);
padding: 6px;
margin: 0 -6px 10px -6px;
}
body.is-editor .info-row.is-changed,
body.is-editor .description.is-changed,
body.is-editor .regular-post-content.is-changed,
body.is-editor .label-edit-chip.is-changed {
background-color: #e8f5e9; /* Soft light green */
outline: 1px solid #81c784; /* Slightly darker green border */
}
body.dark.is-editor .info-row.is-changed,
body.dark.is-editor .description.is-changed,
body.dark.is-editor .regular-post-content.is-changed,
body.dark.is-editor .label-edit-chip.is-changed {
background-color: #1b5e20; /* Darker green for dark mode */
outline: 1px solid #66bb6a;
}
body.is-editor .info-row.is-deleted,
body.is-editor .description.is-deleted,
body.is-editor .regular-post-content.is-deleted {
background-color: #ffebee; /* Soft red */
outline: 1px solid #e57373; /* Red border */
}
body.dark.is-editor .info-row.is-deleted,
body.dark.is-editor .description.is-deleted,
body.dark.is-editor .regular-post-content.is-deleted {
background-color: #4b1a1a; /* Dark red background */
outline: 1px solid #ef5350;
}
body.is-editor .info-row:has(.share-actions) .share-actions {
display: none;
}
.publish-actions {
margin-top: 20px;
text-align: right;
}
.publish-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 15px;
}
.btn-publish {
background-color: var(--color-success);
color: white;
border: 1px solid rgba(27, 31, 35, 0.15);
padding: 8px 16px;
border-radius: var(--radius-md);
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: background-color var(--transition-fast);
}
.btn-publish:hover {
background-color: var(--color-success-hover);
}
.btn-publish:disabled {
background-color: var(--color-bg-disabled) !important;
color: var(--color-text-disabled) !important;
border-color: transparent !important;
cursor: default;
pointer-events: none;
opacity: 0.5;
}
.btn-publish.is-success {
background-color: #28a745;
cursor: default;
}
.btn-publish.is-success:hover {
background-color: #28a745; /* Don't change color on hover when success */
}
/* Fields Manager */
.fields-manager {
display: flex;
align-items: center;
gap: 8px;
}
.btn-manage-fields, .btn-toggle-raw-html {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: var(--color-bg-ui);
cursor: pointer;
color: var(--color-text-secondary);
transition: all var(--transition-fast);
padding: 0;
}
.btn-manage-fields:hover, .btn-toggle-raw-html:hover {
background: var(--color-bg-ui-hover);
color: var(--color-text-primary);
}
body.view-editor_new .btn-manage-fields {
display: none;
}
/* --- Custom Search Box (Embedded) --- */
.custom-search-box {
max-width: 600px;
margin: 60px auto;
padding: 0 var(--space-md);
position: relative;
}
.custom-search-form {
position: relative;
display: flex;
align-items: center;
gap: 10px;
background: var(--color-bg-ui);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
padding: 6px 6px 6px 20px;
transition: all var(--transition-fast);
}
.custom-search-form:focus-within {
border-color: var(--color-accent);
background: var(--color-bg-body);
box-shadow: 0 10px 30px var(--color-shadow-subtle);
}
.custom-search-input {
flex: 1;
border: none;
background: transparent;
font-size: var(--font-size-lg);
color: var(--color-text-primary);
outline: none;
padding: 10px 0;
user-select: none;
}
.custom-search-submit {
width: 44px;
height: 44px;
background: var(--color-accent);
color: var(--color-white);
border: none;
border-radius: var(--radius-circle);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: opacity var(--transition-fast);
}
.custom-search-submit:hover {
opacity: 0.9;
}
.custom-search-box .search-suggestions {
z-index: 10;
margin-top: 10px;
padding-top: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
box-shadow: 0 10px 30px var(--color-shadow-subtle);
}
.btn-ai-analyze {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: var(--color-bg-ui);
cursor: pointer;
color: var(--color-ai-accent);
transition: all var(--transition-fast);
padding: 0;
flex-shrink: 0;
}
.publish-actions .btn-ai-analyze {
display: none; /* Hidden by default, shown via JS/CSS logic */
}
.fields-dropdown {
position: absolute;
bottom: 100%;
left: 0;
min-width: 200px;
background: var(--color-bg-ui);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 4px 10px var(--color-shadow);
z-index: 1002;
margin-bottom: 8px;
display: none;
max-height: 300px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
}
.fields-dropdown::-webkit-scrollbar {
width: 6px;
}
.fields-dropdown::-webkit-scrollbar-track {
background: transparent;
}
.fields-dropdown::-webkit-scrollbar-thumb {
background-color: var(--color-border);
border-radius: 3px;
}
.fields-dropdown.show-below {
bottom: auto;
top: 100%;
margin-bottom: 0;
margin-top: 8px;
}
.fields-list {
list-style: none;
margin: 0;
padding: 5px 0;
}
.fields-list li {
padding: 0;
}
.fields-list label {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
cursor: pointer;
font-size: var(--font-size-sm);
color: var(--color-text-primary);
width: 100%;
}
.fields-list label:hover {
background: var(--color-bg-ui-hover);
}
.fields-list input[type="checkbox"] {
accent-color: var(--color-accent);
}
.btn-publish.is-success:hover {
background-color: #28a745; /* Don't change color on hover when success */
}
.visibility-wrapper {
display: flex;
align-items: center;
gap: 10px;
}
.visibility-label {
font-size: 14px;
font-weight: 500;
color: var(--color-text-secondary);
}
.btn-toggle-visibility {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
background-color: var(--color-bg-disabled); /* Default/Fallback color */
cursor: pointer;
transition: background-color var(--transition-base), border-color var(--transition-base);
appearance: none;
padding: 0;
flex-shrink: 0;
vertical-align: middle;
}
.btn-toggle-visibility::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
background-color: white;
border-radius: var(--radius-circle);
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
transition: transform 0.3s ease;
}
.btn-toggle-visibility.is-published {
background-color: var(--color-success); /* Green */
border-color: var(--color-success);
}
.btn-toggle-visibility.is-published::after {
transform: translateX(20px);
}
.btn-toggle-visibility.is-draft {
background-color: var(--color-bg-disabled); /* Gray */
border-color: #d0d0d0;
}
.btn-toggle-visibility.is-draft::after {
transform: translateX(0);
}
body.dark .post-nav a:hover {
color: #787878;
}
body.dark button.carousel-nav {
color: #787878 !important;
}
body.dark .tw-modal-content {
background-color: var(--color-bg-body) !important;
}
body.dark #tw-contact-form button {
background-color: gray !important;
color: white !important;
border: 1px solid var(--color-border) !important;
}
/* Apply custom backgrounds to specific label types */
.label-edit-chip.label-draft,
.label-link-list li a.label-draft {
background: var(--color-label-draft-bg);
}
.label-edit-chip.label-news,
.label-link-list li a.label-news {
background: var(--color-label-news-bg);
}
.label-edit-chip.label-collection-intro,
.label-link-list li a.label-collection-intro {
background: var(--color-label-collection-intro-bg);
}
.label-edit-chip.label-article,
.label-link-list li a.label-article {
background: var(--color-label-article-bg);
}
/* --- Image Viewer (Lightbox) --- */
.image-viewer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
z-index: var(--z-viewer-bg);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-fast);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
.image-viewer.is-loading .viewer-image {
display: none;
}
.image-viewer.is-loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: viewer-spin 1s linear infinite;
}
@keyframes viewer-spin {
to { transform: rotate(360deg); }
}
.image-viewer.is-visible {
opacity: 1;
visibility: visible;
}
.viewer-image-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden; /* Important for panning */
}
.viewer-image {
position: absolute;
display: block;
top: 50%;
left: 50%;
transition: transform var(--transition-fast);
cursor: grab;
user-select: none;
-webkit-user-drag: none;
image-rendering: pixelated;
}
.viewer-image.is-panning {
cursor: grabbing;
transition: none; /* No transition while actively panning */
}
/* --- Viewer UI --- */
.viewer-close, .viewer-prev, .viewer-next {
position: fixed;
z-index: var(--z-viewer-ui);
background: rgba(30, 30, 30, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-circle);
width: 44px;
height: 44px;
cursor: pointer;
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: background-color var(--transition-fast);
}
.viewer-close:hover, .viewer-prev:hover, .viewer-next:hover {
background: rgba(0, 0, 0, 0.8);
}
.viewer-close {
top: 20px;
right: 20px;
}
.viewer-prev, .viewer-next {
top: 50%;
transform: translateY(-50%);
}
.viewer-prev { left: 20px; }
.viewer-next { right: 20px; }
.viewer-prev[hidden], .viewer-next[hidden] {
display: none;
}
.viewer-controls {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: var(--z-viewer-ui);
background: rgba(30, 30, 30, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-md);
padding: 8px 15px;
display: flex;
align-items: center;
gap: 15px;
color: white;
transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
.viewer-btn {
background: none;
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 4px 10px;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: var(--font-size-sm);
}
.viewer-btn:hover {
background: rgba(255, 255, 255, 0.2);
}
.viewer-btn.icon-btn {
padding: 6px;
}
.viewer-btn.icon-btn .icon {
width: 20px;
height: 20px;
}
.viewer-btn.icon-btn svg {
/* Allow clicks to pass through the SVG to the parent button */
pointer-events: none;
}
.viewer-zoom-slider {
-webkit-appearance: none;
appearance: none;
width: 150px;
height: 4px;
background: rgba(255, 255, 255, 0.3);
border-radius: 2px;
outline: none;
}
.viewer-zoom-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background: white;
border-radius: 50%;
cursor: pointer;
}
.viewer-zoom-slider::-moz-range-thumb {
width: 16px;
height: 16px;
background: white;
border-radius: 50%;
cursor: pointer;
}
/* UI Toggling */
.image-viewer.ui-hidden .viewer-controls,
.image-viewer.ui-hidden .viewer-prev,
.image-viewer.ui-hidden .viewer-next {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* --- Collection Description --- */
.collection-description {
max-width: 800px;
margin: 0 auto 40px auto; /* Center it and add space below */
padding: 20px 30px;
background: var(--color-bg-ui);
border: 1px solid var(--color-border);
border-radius: var(--gallery-radius);
position: relative;
transition: all var(--transition-base) ease-out;
}
.collection-description.is-hidden {
opacity: 0;
transform: translateY(-10px);
max-height: 0;
padding-top: 0;
padding-bottom: 0;
margin-bottom: 0;
border-width: 0;
overflow: hidden;
}
.collection-description-close {
position: absolute;
top: 8px;
right: 8px;
background: none;
border: none;
border-radius: var(--radius-circle);
width: 32px;
height: 32px;
font-size: 24px;
line-height: 1;
color: var(--color-text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.collection-description-close:hover {
background-color: var(--color-bg-ui-hover);
color: var(--color-text-primary);
}
.collection-description h1,
.collection-description h2,
.collection-description h3 {
margin-bottom: 15px;
padding-right: 30px; /* Space for close button */
}
.collection-description p:not(:last-child) {
margin-bottom: 1em;
}
.collection-description p:last-of-type {
margin-bottom: 0px;
}
/* By default, hide any images that might be in the introduction post's content */
.collection-description img { display: none; }
/* --- Bento Layout --- */
article[data-layout="bento"] {
width: 100%;
}
.bento-grid {
display: grid;
--bento-cols: 5;
--bento-gap: 12px;
grid-template-columns: repeat(var(--bento-cols), 1fr);
grid-auto-rows: auto;
gap: var(--bento-gap);
width: 100%;
padding: 0;
}
.bento-item {
background: var(--color-bg-ui);
border: 1px solid var(--color-border);
border-radius: 4px;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
min-height: 60px;
}
/* Hero: 2ÁE, contains full proportional image */
.bento-hero {
grid-column: span 2;
grid-row: span 2;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-body);
overflow: visible;
min-height: auto;
}
.bento-hero img {
width: 100%;
height: auto;
object-fit: contain;
object-position: center;
max-height: 100%;
display: block;
}
/* Title: 2ÁE, wraps around content */
.bento-title {
grid-column: span 2;
grid-row: span 1;
padding: 6px 12px;
background: var(--color-bg-body);
display: flex;
align-items: center;
justify-content: flex-start;
overflow: hidden;
min-height: auto;
display: none
}
.bento-title h1 {
font-size: 0.95rem;
line-height: 1.15;
margin: 0;
word-break: break-word;
overflow-wrap: break-word;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Info: 1ÁE, flexible content sizing */
.bento-info {
grid-column: span 1;
grid-row: span 1;
padding: 10px 12px;
overflow-y: auto;
font-size: 0.85rem;
line-height: 1.3;
min-height: 60px;
padding: 8px 12px;
}
.bento-info .info-row[data-key="title"] {
display: block;
font-size: larger;
}
.bento-info .info-row[data-key="title"] .share-actions {
margin-top: 20px;
}
.bento-info .info-row {
margin-bottom: 6px;
}
.bento-info .info-label {
display: none;
}
.bento-info .info-value {
font-size: 0.85rem;
}
/* Description: 1ÁE */
.bento-desc {
grid-column: span 1;
grid-row: span 1;
padding: 8px 12px;
font-size: 0.85rem;
line-height: 1.3;
overflow-y: auto;
}
.bento-desc p {
margin: 0 0 4px 0;
font-size: 0.85rem;
}
.bento-desc p:last-child {
margin-bottom: 0;
}
/* Individual Tag Boxes: 1ÁE */
.bento-tag {
grid-column: span 1;
grid-row: span 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 8px;
}
.bento-tag a {
text-decoration: none;
color: var(--color-text-primary);
font-size: 0.85rem;
font-weight: var(--font-weight-medium);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Extra images: 1ÁE */
.bento-extra-img {
grid-column: span 1;
grid-row: span 1;
padding: 0;
overflow: hidden;
}
.bento-extra-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Filler box: Empty cell to maintain grid */
.bento-filler {
grid-column: span 1;
grid-row: span 1;
background: transparent;
border: none;
}
/* Mobile: Small grid (2 cols ÁE3 rows = 6 cells) */
@media (max-width: 479px) {
.bento-grid {
--bento-cols: 2;
--bento-rows: 4;
--bento-gap: 6px;
gap: var(--bento-gap);
}
.bento-hero {
grid-column: span 2;
grid-row: span 2;
}
.bento-title {
grid-column: span 2;
grid-row: span 1;
font-size: 0.85rem;
padding: 4px 10px;
}
.bento-info,
.bento-desc,
.bento-tag {
font-size: 0.75rem;
padding: 6px 10px;
}
}
/* Tablet: Medium grid (3 cols ÁE3 rows = 9 cells) */
@media (min-width: 480px) and (max-width: 1023px) {
.bento-grid {
--bento-cols: 3;
--bento-rows: 3;
--bento-gap: 8px;
}
.bento-hero {
grid-column: span 2;
grid-row: span 2;
}
.bento-title {
grid-column: span 1;
grid-row: span 1;
}
.bento-info {
grid-column: span 1;
grid-row: span 1;
}
.bento-desc {
grid-column: span 1;
grid-row: span 1;
}
}
/* Desktop: Large grid (5 cols ÁE3 rows = 15 cells) */
@media (min-width: 1024px) {
.bento-grid {
--bento-cols: 5;
--bento-rows: 3;
--bento-gap: 12px;
}
.bento-hero {
grid-column: span 2;
grid-row: span 2;
}
.bento-title {
grid-column: span 2;
grid-row: span 1;
}
.bento-info {
grid-column: span 1;
grid-row: span 1;
}
.bento-desc {
grid-column: span 1;
grid-row: span 1;
}
.bento-tag {
grid-column: span 1;
grid-row: span 1;
}
}
/* --- Shopping Layout --- */
article[data-layout="shopping"] .shopping-main-grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) 1fr;
gap: 50px;
align-items: start;
margin-bottom: 40px;
}
.shopping-visuals {
position: sticky;
top: calc(var(--header-height) + 20px);
/* Ensure the entire visual column fits within the viewport */
height: auto;
max-height: calc(100vh - var(--header-height) - var(--post-nav-height) - 60px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.shopping-stack {
display: flex;
flex-direction: column;
width: fit-content;
max-width: 100%;
height: auto;
max-height: 100%;
justify-content: center;
align-items: stretch; /* Stretch so thumbs fill the width */
min-height: 0;
}
body.has-breadcrumbs .shopping-visuals {
top: calc(var(--header-height) + var(--breadcrumb-height) + 20px);
height: auto;
max-height: calc(100vh - var(--header-height) - var(--breadcrumb-height) - var(--post-nav-height) - 60px);
}
.shopping-hero-image-wrapper {
position: relative;
flex-grow: 0;
flex-shrink: 1; /* Allow hero to shrink to make space for thumbs */
min-height: 0; /* Crucial for flexbox shrinking */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
aspect-ratio: 1 / 1;
}
.shopping-hero-image-wrapper img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: var(--gallery-radius);
cursor: zoom-in;
background-color: var(--color-bg-ui);
}
.shopping-details .info-card { margin-bottom: 20px; }
.shopping-summary {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
margin-bottom: 30px;
line-height: 1.5;
}
.shopping-full-description {
max-width: 800px;
margin: 0 auto;
padding-top: 40px;
border-top: 1px solid var(--color-border);
}
.shopping-thumb-strip {
display: grid;
grid-template-columns: repeat(var(--shopping-cols, 5), 1fr);
gap: 8px; /* Tighter gap */
margin-top: 8px;
flex-shrink: 0; /* Prevent thumb strip from shrinking */
width: 100%;
}
.shopping-thumb-strip .shopping-thumb {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: var(--radius-sm);
cursor: pointer;
border: 2px solid transparent;
transition: border-color var(--transition-fast);
}
.shopping-thumb-strip .shopping-thumb:hover {
border-color: var(--color-border-focus);
}
.shopping-thumb-strip .shopping-thumb.is-active {
border-color: var(--color-accent);
box-shadow: 0 0 5px var(--color-accent);
}
article[data-layout="shopping"] .info-card div.info-row[data-key="title"] .info-value {
font-size: calc(var(--font-size-card-title) * 1.25);
line-height: 1.2;
display: block;
margin-bottom: 30px;
}
/* --- Mosaic Layout --- */
body.layout-mosaic main {
height: 100vh;
padding-top: 0;
padding-bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
body.layout-mosaic .site-header {
background: transparent;
border-bottom: none;
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
body.layout-mosaic .site-header .icon,
body.layout-mosaic .site-header a,
body.layout-mosaic .site-header .search-trigger {
color: #fff;
}
body.layout-mosaic .search-trigger {
background: rgba(0,0,0,0.2);
border-color: rgba(255,255,255,0.3);
}
body.layout-mosaic header {
background: linear-gradient(
to bottom,
rgba(0,0,0,1) 0%,
rgba(0,0,0,0.7) 30%,
rgba(0,0,0,0) 100%
) !important;
}
body.layout-mosaic .header-brand .page-context {
color: white !important;
}
body.layout-mosaic footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent) !important;
color: #fff;
border: none;
padding: 1.5rem 0;
}
body.layout-mosaic footer .credits {
color: #fff !important;
}
.mosaic-grid {
display: block; /* Switched from grid to block for absolute positioning */
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
background-color: var(--color-bg-ui);
}
.mosaic-grid .gallery-card {
position: absolute; /* Controlled by JS */
overflow: hidden;
border-radius: 0;
border: none;
transition: opacity var(--transition-base) ease;
margin: 0;
padding: 0;
}
.mosaic-grid .gallery-card:hover {
/* Scale removed to prevent z-index overlap issues in tight pack */
filter: brightness(1.1);
z-index: 10;
}
.mosaic-grid .gallery-card a,
.mosaic-grid .thumb-wrap {
width: 100%;
height: 100%;
aspect-ratio: auto;
}
.mosaic-grid .thumb-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mosaic-grid .gallery-card h3 {
display: none;
}
body.layout-mosaic button.theme-toggle-switch {
display: none;
}
body.layout-mosaic .breadcrumbs {
display: none;
}
/* Shadow Effect for Header Logo */
.mosaic-grid::before {
content: "";
position: absolute;
top: -10%; /* Move it slightly up to hide the top edge of the oval */
left: -10%; /* Move it slightly left to hide the left edge */
width: 60%; /* Controls how far across the screen it reaches */
height: 50%; /* Controls how deep the shadow goes down */
/* The Shadow Logic */
background: radial-gradient(
ellipse at center,
rgba(0, 0, 0, 0.5) 0%, /* Darker center */
rgba(0, 0, 0, 0.2) 60%, /* Mid-fade */
transparent 70% /* Fades to nothing */
);
/* Blur it out for a softer look */
filter: blur(30px);
/* Ensure it stays above the image but below the header text */
z-index: 1;
pointer-events: none; /* Allows clicks to pass through to the background */
}
/* --- Card View Layout --- */
.gallery-grid[data-layout="card"] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
gap: 30px;
}
/* Card Content Structure */
.gallery-grid[data-layout="card"] .gallery-card {
height: 100%;
background: var(--color-bg-ui);
border: 1px solid var(--color-border);
}
.gallery-grid[data-layout="card"].fixed-height .gallery-card {
height: 320px;
}
.gallery-grid[data-layout="card"].fixed-height.row-based .thumb-wrap {
height: revert-layer; /* Allow height to be determined by content for row-based */
}
.gallery-grid[data-layout="card"].fixed-height .card-details {
overflow-y: hidden;
}
.gallery-grid[data-layout="card"] .gallery-card a {
display: flex;
height: 100%;
transition: background-color var(--transition-fast);
overflow: hidden;
}
.gallery-grid[data-layout="card"] .thumb-wrap {
flex-shrink: 0;
background-color: var(--color-bg-ui-hover);
}
.gallery-grid[data-layout="card"] .card-details {
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
overflow: hidden;
}
.gallery-grid[data-layout="card"] h3 {
margin: 0 0 10px 0;
font-size: var(--font-size-lg);
padding: 0;
background: none;
position: static;
color: var(--color-text-primary);
text-shadow: none;
}
.gallery-grid[data-layout="card"] .card-summary {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: 1.5;
}
/* Row Based (Default) */
.gallery-grid[data-layout="card"].row-based .gallery-card a {
flex-direction: row;
}
.gallery-grid[data-layout="card"].row-based .thumb-wrap {
width: 45%;
height: auto;
aspect-ratio: auto;
}
/* Column Based */
.gallery-grid[data-layout="card"].column-based .gallery-card a {
flex-direction: column;
}
/* When card is stacked, push title to top and summary to bottom */
.gallery-grid[data-layout="card"].column-based .card-details {
justify-content: space-between;
text-align: left;
}
.gallery-grid[data-layout="card"].column-based .thumb-wrap {
width: 100%;
height: 250px;
}
/* Reversed */
.gallery-grid[data-layout="card"].reversed .gallery-card a {
flex-direction: row-reverse;
}
.gallery-grid[data-layout="card"].column-based.reversed .gallery-card a {
flex-direction: column-reverse;
}
/* Alternating */
.gallery-grid[data-layout="card"].alternating .gallery-card:nth-child(even) a {
flex-direction: row-reverse;
}
.gallery-grid[data-layout="card"].column-based.alternating .gallery-card:nth-child(even) a {
flex-direction: column-reverse;
}
@media (max-width: 600px) {
.gallery-grid[data-layout="card"] {
grid-template-columns: 1fr;
}
.gallery-grid[data-layout="card"].row-based .gallery-card a {
flex-direction: column;
}
/* On mobile, all cards are stacked, so apply space-between */
.gallery-grid[data-layout="card"] .card-details {
justify-content: space-between;
}
.gallery-grid[data-layout="card"].row-based .thumb-wrap {
width: 100%;
height: 200px;
}
.gallery-grid[data-layout="card"].fixed-height .gallery-card {
height: auto;
}
.gallery-grid[data-layout="card"].fixed-height .card-details {
overflow-y: hidden;
}
}
/* --- Collection List Descriptions --- */
.collection-list-grid {
display: flex;
flex-direction: column;
gap: 40px;
margin: 40px 0;
}
.collection-entry {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0;
background: var(--color-bg-ui);
border: 1px solid var(--color-border);
border-radius: var(--gallery-radius);
overflow: hidden;
min-height: 400px;
}
.collection-entry-visual {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
display: block;
}
.collection-entry-visual img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow) ease;
}
.collection-entry-visual:hover img {
transform: scale(1.05);
}
.collection-entry-details {
padding: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
/* Reverse every other item */
.collection-entry:nth-child(even) .collection-entry-visual {
order: 2;
}
.collection-entry:nth-child(even) .collection-entry-details {
order: 1;
}
@media (max-width: 768px) {
.collection-entry {
grid-template-columns: 1fr;
min-height: auto;
}
.collection-entry:nth-child(even) .collection-entry-visual {
order: 0;
}
.collection-entry-visual {
height: 250px;
}
.collection-entry-details {
padding: 30px;
}
}
.shopping-pricing-shipping {
padding: 20px;
border: 1px dashed var(--color-border);
border-radius: var(--gallery-radius);
margin: 30px 0;
text-align: center;
color: var(--color-text-secondary);
font-style: italic;
}
.collection-entry h2 { margin-top: 0; margin-bottom: 15px; }
.btn-collection-link {
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
background-color: var(--color-text-primary);
color: var(--color-bg-body);
text-decoration: none;
border-radius: var(--radius-sm);
font-weight: 500;
}
.btn-collection-link:hover {
opacity: 0.9;
}
@media (max-width: 900px) {
article[data-layout="shopping"] .shopping-main-grid {
grid-template-columns: 1fr;
}
.shopping-visuals {
position: static;
max-height: none;
}
.shopping-hero-image-wrapper img {
height: auto;
max-height: 65vh;
}
}
.shopping-pricing-shipping {
border: none; /* "hides" the item in plain galley mode */
}
/* --- Related Posts Strip --- */
.shopping-related-strip {
margin-top: 60px;
padding-top: 40px;
border-top: 1px solid var(--color-border);
width: 100%;
animation: fadeIn 0.5s ease-out;
}
.shopping-related-strip h3 {
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-text-secondary);
margin-bottom: 25px;
text-align: center;
}
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 20px;
}
.related-item a {
text-decoration: none;
color: var(--color-text-primary);
display: block;
}
.related-thumb-wrap {
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: var(--radius-sm);
background: var(--color-bg-ui);
margin-bottom: 10px;
}
.related-thumb-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-base) ease;
}
.related-item:hover img {
transform: scale(1.05);
}
.related-item h4 {
font-size: 0.9rem;
font-weight: 500;
line-height: 1.4;
margin: 0;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- Image Actions Overlay --- */
.overlay-ai {
position: absolute;
top: 10px;
right: 10px;
z-index: 20; /* Ensure buttons stay above the focal point overlay and its shadow */
display: flex;
gap: 8px;
}
.btn-focal-point {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: var(--color-bg-ui);
cursor: pointer;
color: var(--color-text-secondary);
transition: all var(--transition-fast);
padding: 0;
}
.btn-focal-point:hover, .btn-focal-point.is-active {
background: var(--color-bg-ui-hover);
color: var(--color-accent);
}
.btn-focal-point.is-active { border-color: var(--color-accent); }
.focal-point-overlay {
position: absolute;
pointer-events: none;
z-index: 5;
overflow: hidden;
}
.focal-point-marker {
position: absolute;
width: 20px; height: 20px;
margin-left: -10px; margin-top: -10px;
color: var(--color-accent);
display: flex; align-items: center; justify-content: center;
font-weight: bold; font-size: 20px;
text-shadow: 0 0 3px white;
}
.focal-point-square {
position: absolute;
border: 2px dashed var(--color-accent);
box-shadow: 0 0 0 9999px rgba(0,0,0,0.3);
}
/* --- Pinboard Specific UI --- */
body.view-pinboard main > .container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
body.view-pinboard .gallery-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--gallery-gap);
}
body.view-pinboard .gallery-card {
flex: 0 0 280px;
max-width: 100%;
}
body.view-pinboard .pinboard-loader,
body.view-pinboard .pinboard-empty {
flex: 1 0 100%;
}
.unpin-btn {
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
width: 32px;
height: 32px;
border-radius: var(--radius-circle);
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--color-border);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-accent);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: transform var(--transition-fast);
}
.unpin-btn:hover { transform: scale(1.1); background: #fff; }
.unpin-btn .icon { width: 16px; height: 16px; }
.pinboard-toolbar {
position: fixed;
bottom: 30px;
right: 30px;
z-index: var(--z-overlay);
}
.btn-clear-pinboard {
width: 56px;
height: 56px;
border-radius: var(--radius-circle);
background: var(--color-danger);
color: white;
border: none;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: center;
transition: transform var(--transition-fast);
}
.btn-clear-pinboard:hover { transform: scale(1.1); }
/* --- AI Suggestions Modal --- */
.ai-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5000;
display: none;
align-items: flex-start;
justify-content: flex-start;
padding: 20px;
pointer-events: none; /* Allow interaction with background */
}
.ai-modal:not([hidden]) {
display: flex;
}
.ai-modal-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
transition: all var(--transition-base);
pointer-events: auto;
}
.ai-modal.is-ready .ai-modal-backdrop {
opacity: 0;
backdrop-filter: blur(0);
pointer-events: none;
}
.ai-modal-shell {
position: relative;
background: var(--color-bg-body);
width: 100%;
max-width: 400px;
max-height: 80vh;
border-radius: var(--radius-lg);
box-shadow: 0 20px 50px rgba(0,0,0,0.3);
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--color-border);
pointer-events: auto;
margin-top: 10vh;
margin-left: 20px;
}
.ai-modal-header {
padding: 15px 20px;
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: space-between;
cursor: move;
}
.ai-modal-header h3 {
font-size: 1.1rem;
display: flex;
align-items: center;
gap: 8px;
color: var(--color-ai-accent);
}
.ai-modal-close {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: var(--color-text-secondary);
}
.ai-modal-body {
padding: 20px;
overflow-y: auto;
flex: 1;
}
.ai-suggestion-item {
padding: 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin-bottom: 12px;
cursor: pointer;
transition: all var(--transition-fast);
background: var(--color-bg-ui);
}
.ai-suggestion-item:hover {
border-color: var(--color-ai-accent);
background: var(--color-bg-ui-hover);
transform: translateY(-2px);
}
.ai-suggestion-label {
display: block;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-secondary);
margin-bottom: 4px;
}
.ai-suggestion-value {
font-size: 0.95rem;
line-height: 1.4;
}
.ai-modal-loading {
text-align: center;
padding: 40px 0;
}
.system-modal-shell {
max-width: 450px;
margin: 0 auto !important; /* Center system modals specifically */
align-self: center;
}
.ai-modal-footer {
padding: 15px 20px;
border-top: 1px solid var(--color-border);
display: flex;
justify-content: flex-end;
gap: 12px;
background: var(--color-bg-ui);
}
.ai-modal-footer button {
padding: 8px 20px;
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-weight: 600;
cursor: pointer;
border: 1px solid var(--color-border);
}
.btn-sys-confirm {
background: var(--color-accent);
color: white;
border-color: transparent;
}
.btn-sys-cancel {
background: var(--color-bg-body);
color: var(--color-text-primary);
}
.ai-modal-body p {
font-size: var(--font-size-base);
line-height: 1.5;
}
/* --- Connect Links (Footer Social) --- */
.connect-links {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 25px;
flex-wrap: wrap;
}
.connect-link {
display: flex;
align-items: center;
text-decoration: none;
color: inherit;
font-size: var(--font-size-sm);
transition: opacity 0.2s;
}
.connect-link:hover { opacity: 0.7; text-decoration: none; }
.connect-link svg {
width: 20px;
height: 20px;
margin-right: 8px;
fill: currentColor;
}
.connect-link + .connect-link::before {
content: "";
margin: 0 15px;
color: var(--color-separator);
pointer-events: none;
}
@media (max-width: 600px) {
.connect-link span { display: none; }
.connect-link svg { margin-right: 0; }
}
/* --- News Component Styles --- */
.news-list-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-md);
margin: var(--space-lg) 0;
}
.news-card {
background: var(--color-bg-ui);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
transition: transform var(--transition-fast);
}
.news-card:hover {
transform: translateY(-4px);
border-color: var(--color-border-hover);
}
.news-card-link {
text-decoration: none;
color: inherit;
display: block;
}
.news-card-image {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--color-bg-ui-hover);
}
.news-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-card-content {
padding: var(--space-md);
}
.news-card-date {
display: block;
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
margin-bottom: var(--space-xs);
}
.news-card h3 {
font-size: var(--font-size-lg);
line-height: 1.3;
}
/* --- Image Processing States --- */
/* Preliminary state: showing original uncompressed image or early preview */
.is-preliminary {
opacity: 0.7;
border: 2px dashed var(--color-border);
}
/* Processing state: image is being decoded/compressed */
.is-processing {
position: relative;
pointer-events: none;
opacity: 0.6;
}
.is-processing::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* --- Loading Placeholders & Shimmer Animation --- */
/* Placeholder state for infinite scroll loading */
.gallery-card.is-placeholder {
opacity: 0.6;
pointer-events: none;
background: var(--color-bg-ui);
}
.placeholder-thumb {
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
var(--color-bg-ui) 0%,
var(--color-bg-ui-hover) 50%,
var(--color-bg-ui) 100%
);
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* --- Toast Notification --- */
.toast-notification {
position: fixed;
bottom: 80px; /* Raised to clear mobile browser bars and sticky footers */
left: 50%;
transform: translateX(-50%) translateY(30px);
background: var(--color-text-primary);
color: var(--color-bg-body);
padding: 12px 32px;
border-radius: var(--radius-pill);
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
z-index: 10000;
transition: transform 0.5s ease-in, opacity 0.4s ease-in;
opacity: 0;
pointer-events: none;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
white-space: normal;
max-width: 85vw;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(4px);
}
.toast-notification.is-visible {
transform: translateX(-50%) translateY(0);
opacity: 1;
transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease-out;
}
body.dark .toast-notification {
background: var(--color-bg-ui-active);
border: 1px solid var(--color-border);
}
/* --- Accessibility: Visually Hidden Class --- */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* --- Layout: Slideshow View --- */
body.slideshow-active {
overflow: hidden !important;
background-color: #000;
}
body.slideshow-active .site-header {
background: transparent;
border-bottom: none;
pointer-events: none;
}
body.slideshow-active .header-brand {
pointer-events: auto;
position: relative;
z-index: 100;
}
body.slideshow-active .header-nav-wrap,
body.slideshow-active .breadcrumbs,
body.slideshow-active footer,
body.slideshow-active .collection-description,
body.slideshow-active .title-sep,
body.slideshow-active .page-context {
display: none !important;
}
.slideshow-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 5;
background-color: #000;
color: #fff;
}
.slideshow-inner {
position: relative;
width: 100%;
height: 100%;
}
.slideshow-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1.5s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
}
.slideshow-slide.is-active {
opacity: 1;
}
.slideshow-slide img {
width: 100%;
height: 100%;
display: block;
}
.slideshow-slide img.is-filled {
object-fit: cover;
}
.slideshow-slide img.is-contained {
object-fit: contain;
}
@keyframes slow-pan {
0% { object-position: var(--pan-start, center); }
100% { object-position: var(--pan-end, center); }
}
.slideshow-slide.panning-engaged img.is-filled {
object-position: var(--pan-start, center);
will-change: object-position;
}
.slideshow-slide.is-active.panning-engaged img.is-filled,
.slideshow-slide.is-exiting.panning-engaged img.is-filled {
animation: slow-pan var(--pan-duration, 16s) ease-in-out forwards;
animation-delay: var(--pan-delay, 2s);
}
.slide-caption {
position: absolute;
bottom: 40px;
left: 0px;
padding-left: 40px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
z-index: 10;
background-color: #00000040;
/* text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); */
opacity: 0;
transform: translateY(20px);
transition: all 1s ease 0.5s;
}
.slideshow-slide.is-active .slide-caption {
opacity: 1;
transform: translateY(0);
}
.slide-caption h3 {
font-size: 2rem;
font-weight: var(--font-weight-normal);
margin: 0;
color: #fff;
}
.slide-subtitle {
font-size: 1rem;
opacity: 0.8;
margin-top: -2px;
font-weight: var(--font-weight-light);
color: #fff;
letter-spacing: 0.5px;
}
.slideshow-progress {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.1);
z-index: 20;
transition: opacity 1s ease;
}
.slideshow-progress .progress-bar {
height: 100%;
width: 0%;
background: var(--color-accent, #fff);
box-shadow: 0 0 10px var(--color-accent, #fff);
}
.slideshow-controls {
position: absolute;
bottom: 40px;
right: 40px;
display: flex;
gap: 15px;
z-index: 20;
opacity: 0;
transition: opacity 1s ease;
}
.slideshow-container:not(.controls-hidden):hover .slideshow-controls {
opacity: 1;
}
.slideshow-container.controls-hidden {
cursor: none;
}
.slideshow-container.controls-hidden .slideshow-controls,
.slideshow-container.controls-hidden .slideshow-progress {
opacity: 0;
pointer-events: none;
}
.slideshow-controls button,
.slideshow-controls a {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
width: 44px;
height: 44px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
transition: all 0.2s ease;
text-decoration: none;
}
.slideshow-controls button:hover,
.slideshow-controls a:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
.slideshow-controls .icon {
color: #fff;
}
@media (max-width: 768px) {
.slide-caption h3 {
font-size: 1.5rem;
}
.slideshow-controls {
bottom: 20px;
right: 20px;
}
.slide-caption {
bottom: 20px;
left: 20px;
}
}
/* Spacer Element */
.spacer {
height: 2rem;
clear: both;
}
.spacer-block {
height: 2rem;
background-color: var(--color-bg-secondary);
border: 1px dashed var(--color-border);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
}
.spacer-block::after {
content: 'Spacer';
color: var(--color-text-secondary);
font-size: 0.85em;
font-family: monospace;
}
article.is-article-item {
/* Base typography */
font-size: 1rem;
line-height: 1.7;
color: #222;
}
/* Headings */
article.is-article-item h1,
article.is-article-item h2,
article.is-article-item h3,
article.is-article-item div[data-tag="h1"],
article.is-article-item div[data-tag="h2"],
article.is-article-item div[data-tag="h3"] {
font-weight: 600; /* softer than default 700 */
line-height: 1.3;
margin-top: 2.5rem;
margin-bottom: 1rem;
}
article.is-article-item h1,
article.is-article-item div[data-tag="h1"] {
font-size: 1.9rem;
}
article.is-article-item h2,
article.is-article-item div[data-tag="h2"] {
font-size: 1.4rem;
}
article.is-article-item h3,
article.is-article-item div[data-tag="h3"] {
font-size: 1.2rem;
}
/* Paragraph spacing */
article.is-article-item p,
article.is-article-item div[data-tag="p"] {
margin: 1rem 0;
}
/* Lists */
article.is-article-item ul:not(.fields-list),
article.is-article-item ol {
margin: 1.2rem 0 1.2rem 1.5rem; /* indent but not too much */
padding-left: 1rem; /* reduce default padding */
}
article.is-article-item li {
margin: 0.4rem 0;
line-height: 1.6;
}
/* Spacer block */
article.is-article-item .spacer {
height: 2rem; /* safe default */
}
@media print {
.no-print, footer, nav {
display: none !important;
}
header.site-header {
border-bottom: none !important;
}
}
input[data-key="blogId"][readonly],
input[data-key="_emailToPost"][readonly] {
background-color: var(--color-bg-ui) !important;
}
.publish-actions {
width: 100% !important;
}
.placeholder-svg {
padding: 8px;
box-sizing: border-box;
}
.list-item.label-news {
background-color: var(--color-label-news-bg) !important;
}
.list-item.label-draft {
background-color: var(--color-label-draft-bg) !important;
}
.list-item.label-collection-intro {
background-color: var(--color-label-collection-intro-bg) !important;
}
.list-item.label-article {
background-color: var(--color-label-article-bg) !important;
}