@font-face { font-family: "Nunito"; src: url("../fonts/nunito.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; } /* Iconograph — alternative themes. Discworld (iconograph.css) is the default; these override it when the page carries data-ico-theme="…" on (set before the first paint from the user's choice on this device). Light and dark variants follow the system setting, like the default theme. */ /* ==== Mist — calm, minimal, photo-first: warm off-white, slate ink, sage and lavender accents. ==== */ :root[data-ico-theme="mist"] { --ico-parchment: #f6f5f2; --ico-parchment-light: #fbfaf8; --ico-parchment-dark: #e9e7e2; --ico-vellum: #ffffff; --ico-ink: #2c313a; --ico-ink-soft: #6b7280; --ico-brass: #9cc5a8; --ico-brass-light: #c4e0cc; --ico-wood: #e3e1dc; --ico-wood-dark: #cfccc5; --ico-octarine: linear-gradient(135deg, #b9b3e6, #9cc5a8); --ico-octarine-solid: #8a84d6; --ico-danger: #c2554f; --ico-success: #4f9a6a; --ico-link: #4b5aa8; --ico-shadow: rgba(30, 36, 50, 0.08); --ico-paper: none; --ico-font-display: Inter, system-ui, sans-serif; --ico-font-body: Inter, system-ui, sans-serif; --ico-radius: 16px; --mist-accent-ink: #1f3a2a; } @media (prefers-color-scheme: dark) { :root[data-ico-theme="mist"] { --ico-parchment: #15171c; --ico-parchment-light: #1b1e24; --ico-parchment-dark: #23262e; --ico-vellum: #1e2128; --ico-ink: #e7e9ee; --ico-ink-soft: #9aa1ad; --ico-brass: #86c29b; --ico-brass-light: #a9d8b8; --ico-wood: #2b2f38; --ico-link: #aab3f0; --ico-shadow: rgba(0, 0, 0, 0.35); --mist-accent-ink: #0f2418; } } :root[data-ico-theme="mist"] body { font-size: 1rem; background: var(--ico-parchment); } :root[data-ico-theme="mist"] h1, :root[data-ico-theme="mist"] h2, :root[data-ico-theme="mist"] h3 { font-weight: 650; letter-spacing: -0.02em; } :root[data-ico-theme="mist"] h1 { font-size: clamp(1.7rem, 4vw, 2.2rem); } :root[data-ico-theme="mist"] h2 { font-size: 1.3rem; } :root[data-ico-theme="mist"] .ico-topbar { border-bottom: 1px solid var(--ico-wood); background: color-mix(in srgb, var(--ico-vellum) 80%, transparent); } :root[data-ico-theme="mist"] .ico-brand { font-size: 1.15rem; font-weight: 650; letter-spacing: -0.01em; } :root[data-ico-theme="mist"] .ico-usermenu a { color: var(--ico-ink-soft); } :root[data-ico-theme="mist"] .ico-usermenu a.active { color: var(--ico-ink); text-decoration: none; box-shadow: inset 0 -2px 0 var(--ico-brass); } :root[data-ico-theme="mist"] .ico-card { background: var(--ico-vellum); border: 1px solid var(--ico-wood); box-shadow: 0 1px 2px var(--ico-shadow), 0 12px 32px var(--ico-shadow); } :root[data-ico-theme="mist"] .ico-hero p, :root[data-ico-theme="mist"] .ico-subtitle, :root[data-ico-theme="mist"] .ico-empty { font-style: normal; } :root[data-ico-theme="mist"] .ico-field input, :root[data-ico-theme="mist"] .ico-sort select, :root[data-ico-theme="mist"] .ico-field select { border: 1px solid var(--ico-wood-dark); border-radius: 10px; background: var(--ico-parchment-light); padding: 0.6rem 0.75rem; font: inherit; color: var(--ico-ink); } :root[data-ico-theme="mist"] .ico-btn { border: 0; background: var(--ico-brass); color: var(--mist-accent-ink); box-shadow: none; font-weight: 600; } :root[data-ico-theme="mist"] .ico-btn:hover { filter: brightness(0.96); } :root[data-ico-theme="mist"] .ico-btn-secondary { background: var(--ico-parchment-dark); color: var(--ico-ink); } :root[data-ico-theme="mist"] .ico-btn-danger { background: var(--ico-danger); color: #fff; } :root[data-ico-theme="mist"] .ico-folders { gap: 1.5rem 1.25rem; } :root[data-ico-theme="mist"] .ico-folder-cover { border: 0; outline: 0; border-radius: 14px; box-shadow: 0 1px 2px var(--ico-shadow), 0 8px 20px var(--ico-shadow); background: var(--ico-parchment-dark); } :root[data-ico-theme="mist"] .ico-folder:hover .ico-folder-cover { transform: translateY(-3px); } :root[data-ico-theme="mist"] .ico-folder strong { font-weight: 600; font-size: 1rem; } :root[data-ico-theme="mist"] .ico-grid { gap: 8px; } :root[data-ico-theme="mist"] .ico-tile { border-radius: 10px; } :root[data-ico-theme="mist"] .ico-viewer { background: #0e0f12; color: #eceef2; } :root[data-ico-theme="mist"] .ico-viewer a { color: #c4e0cc; } :root[data-ico-theme="mist"] .ico-viewer-actions button, :root[data-ico-theme="mist"] .ico-viewer-actions a, :root[data-ico-theme="mist"] .ico-viewer-nav { color: #eceef2; background: rgba(255,255,255,0.1); } :root[data-ico-theme="mist"] .ico-viewer-actions button[aria-pressed="true"] { background: #c4e0cc; color: #1f3a2a; } :root[data-ico-theme="mist"] .ico-viewer-info { background: rgba(22, 24, 29, 0.92); border-color: rgba(255,255,255,0.12); } :root[data-ico-theme="mist"] .ico-viewer-info .ico-hint { color: rgba(236,238,242,0.6); } :root[data-ico-theme="mist"] .ico-subnav a.active { background: var(--ico-parchment-dark); color: var(--ico-ink); } :root[data-ico-theme="mist"] .ico-list li, :root[data-ico-theme="mist"] .ico-stats div, :root[data-ico-theme="mist"] .ico-sharelist li { border-color: var(--ico-wood); background: var(--ico-vellum); } :root[data-ico-theme="mist"] .ico-users > li { border-color: var(--ico-wood); background: var(--ico-vellum); } :root[data-ico-theme="mist"] .ico-badge.is-brass { background: var(--ico-brass-light); border-color: transparent; color: var(--mist-accent-ink); } :root[data-ico-theme="mist"] .ico-chip { background: var(--ico-parchment-dark); border-color: transparent; } :root[data-ico-theme="mist"] .ico-alert { border-width: 1px; } :root[data-ico-theme="mist"] .ico-share-picture img { border: 0; border-radius: 16px; box-shadow: 0 12px 40px var(--ico-shadow); } :root[data-ico-theme="mist"] .ico-dialog-backdrop { background: rgba(15, 18, 24, 0.45); backdrop-filter: blur(4px); } /* ==== Seaside — cheerful colour blocks: sand, powder blue, blush and butter; big soft corners, rounded type. ==== */ :root[data-ico-theme="seaside"] { --ico-parchment: #faf6ef; --ico-parchment-light: #fffdf9; --ico-parchment-dark: #f0e9dc; --ico-vellum: #ffffff; --ico-ink: #243447; --ico-ink-soft: #66768a; --ico-brass: #f3c8b6; --ico-brass-light: #f9e0d5; --ico-wood: #e7dfd1; --ico-wood-dark: #d9cfbd; --ico-octarine: linear-gradient(135deg, #bcd9f0, #f3c8d2); --ico-octarine-solid: #5b8fc7; --ico-danger: #c75c5c; --ico-success: #4d9a7a; --ico-link: #2f6aa6; --ico-shadow: rgba(36, 52, 71, 0.08); --ico-paper: none; --ico-font-display: "Nunito", system-ui, sans-serif; --ico-font-body: "Nunito", system-ui, sans-serif; --ico-radius: 24px; --sea-1: #dbeaf6; --sea-2: #f8dfe2; --sea-3: #f7eec9; --sea-4: #dcefe4; --sea-5: #e7e1f6; --sea-button: #243447; --sea-button-ink: #fffdf9; } @media (prefers-color-scheme: dark) { :root[data-ico-theme="seaside"] { --ico-parchment: #121a24; --ico-parchment-light: #18222e; --ico-parchment-dark: #202c3a; --ico-vellum: #1a2532; --ico-ink: #eef3f8; --ico-ink-soft: #9fb0c2; --ico-wood: #263444; --ico-wood-dark: #31435a; --ico-link: #9cc7f0; --ico-shadow: rgba(0, 0, 0, 0.35); --sea-1: #1f3448; --sea-2: #3a2833; --sea-3: #3a3526; --sea-4: #1f3a31; --sea-5: #2d2945; --sea-button: #bcd9f0; --sea-button-ink: #122030; } } :root[data-ico-theme="seaside"] body { font-size: 1.05rem; background: var(--ico-parchment); } :root[data-ico-theme="seaside"] h1, :root[data-ico-theme="seaside"] h2, :root[data-ico-theme="seaside"] h3 { font-weight: 800; letter-spacing: -0.015em; } :root[data-ico-theme="seaside"] .ico-topbar { border-bottom: 0; background: color-mix(in srgb, var(--ico-parchment) 85%, transparent); box-shadow: 0 1px 0 var(--ico-wood); } :root[data-ico-theme="seaside"] .ico-brand { font-weight: 800; } :root[data-ico-theme="seaside"] .ico-usermenu { font-family: var(--ico-font-body); font-weight: 700; } :root[data-ico-theme="seaside"] .ico-usermenu a { color: var(--ico-ink-soft); padding: 0.3rem 0.75rem; border-radius: 999px; } :root[data-ico-theme="seaside"] .ico-usermenu a.active { color: var(--ico-ink); background: var(--sea-1); text-decoration: none; } :root[data-ico-theme="seaside"] .ico-card { background: var(--ico-vellum); border: 0; box-shadow: 0 2px 0 var(--ico-wood), 0 18px 40px var(--ico-shadow); } :root[data-ico-theme="seaside"] .ico-hero p, :root[data-ico-theme="seaside"] .ico-subtitle, :root[data-ico-theme="seaside"] .ico-empty { font-style: normal; } :root[data-ico-theme="seaside"] .ico-field label, :root[data-ico-theme="seaside"] .ico-check, :root[data-ico-theme="seaside"] .ico-btn, :root[data-ico-theme="seaside"] .ico-breadcrumbs, :root[data-ico-theme="seaside"] .ico-folder small, :root[data-ico-theme="seaside"] .ico-alert { font-family: var(--ico-font-body); } :root[data-ico-theme="seaside"] .ico-field input, :root[data-ico-theme="seaside"] .ico-sort select, :root[data-ico-theme="seaside"] .ico-field select { border: 2px solid var(--ico-wood); border-radius: 14px; background: var(--ico-parchment-light); padding: 0.6rem 0.8rem; font: inherit; color: var(--ico-ink); } :root[data-ico-theme="seaside"] .ico-btn { border: 0; background: var(--sea-button); color: var(--sea-button-ink); box-shadow: none; font-weight: 800; padding: 0.6rem 1.3rem; } :root[data-ico-theme="seaside"] .ico-btn-secondary { background: var(--sea-1); color: var(--ico-ink); } :root[data-ico-theme="seaside"] .ico-btn-danger { background: var(--ico-danger); color: #fff; } :root[data-ico-theme="seaside"] .ico-folders { gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); } :root[data-ico-theme="seaside"] .ico-folder { padding: 0.6rem 0.6rem 0.9rem; border-radius: 24px; background: var(--sea-1); transition: transform 0.2s ease; } :root[data-ico-theme="seaside"] .ico-folder:nth-child(5n+2) { background: var(--sea-2); } :root[data-ico-theme="seaside"] .ico-folder:nth-child(5n+3) { background: var(--sea-3); } :root[data-ico-theme="seaside"] .ico-folder:nth-child(5n+4) { background: var(--sea-4); } :root[data-ico-theme="seaside"] .ico-folder:nth-child(5n+5) { background: var(--sea-5); } :root[data-ico-theme="seaside"] .ico-folder:hover { transform: translateY(-3px); } :root[data-ico-theme="seaside"] .ico-folder:hover .ico-folder-cover { transform: none; } :root[data-ico-theme="seaside"] .ico-folder-cover { border: 0; outline: 0; border-radius: 18px; box-shadow: none; } :root[data-ico-theme="seaside"] .ico-folder strong { font-weight: 800; font-size: 1.1rem; padding-inline: 0.3rem; } :root[data-ico-theme="seaside"] .ico-folder small { padding-inline: 0.3rem; } :root[data-ico-theme="seaside"] .ico-grid { gap: 12px; } :root[data-ico-theme="seaside"] .ico-tile { border-radius: 18px; } :root[data-ico-theme="seaside"] .ico-viewer { background: #0f1620; color: #eef3f8; } :root[data-ico-theme="seaside"] .ico-viewer a { color: #bcd9f0; } :root[data-ico-theme="seaside"] .ico-viewer-actions button, :root[data-ico-theme="seaside"] .ico-viewer-actions a, :root[data-ico-theme="seaside"] .ico-viewer-nav { color: #eef3f8; background: rgba(255,255,255,0.12); } :root[data-ico-theme="seaside"] .ico-viewer-actions button[aria-pressed="true"] { background: #bcd9f0; color: #122030; } :root[data-ico-theme="seaside"] .ico-viewer-info { background: rgba(20, 30, 42, 0.92); border: 0; border-radius: 24px; } :root[data-ico-theme="seaside"] .ico-viewer-info .ico-hint { color: rgba(238,243,248,0.6); } :root[data-ico-theme="seaside"] .ico-subnav a { border-radius: 999px; font-weight: 700; } :root[data-ico-theme="seaside"] .ico-subnav a.active { background: var(--sea-1); color: var(--ico-ink); } :root[data-ico-theme="seaside"] .ico-list li, :root[data-ico-theme="seaside"] .ico-sharelist li, :root[data-ico-theme="seaside"] .ico-users > li { border: 0; background: var(--ico-parchment-light); border-radius: 18px; box-shadow: 0 1px 0 var(--ico-wood); } :root[data-ico-theme="seaside"] .ico-stats div { border: 0; border-radius: 18px; background: var(--sea-1); } :root[data-ico-theme="seaside"] .ico-stats div:nth-child(2) { background: var(--sea-3); } :root[data-ico-theme="seaside"] .ico-stats div:nth-child(3) { background: var(--sea-2); } :root[data-ico-theme="seaside"] .ico-stats div:nth-child(4) { background: var(--sea-4); } :root[data-ico-theme="seaside"] .ico-stats dt, :root[data-ico-theme="seaside"] .ico-stats dd { font-family: var(--ico-font-body); } :root[data-ico-theme="seaside"] .ico-badge.is-brass { background: var(--sea-3); border-color: transparent; color: var(--ico-ink); } :root[data-ico-theme="seaside"] .ico-chip { background: var(--sea-1); border-color: transparent; font-family: var(--ico-font-body); font-weight: 700; } :root[data-ico-theme="seaside"] .ico-alert { border-width: 0; border-radius: 18px; } :root[data-ico-theme="seaside"] .ico-alert.is-error { background: var(--sea-2); } :root[data-ico-theme="seaside"] .ico-alert.is-success { background: var(--sea-4); } :root[data-ico-theme="seaside"] .ico-alert.is-warning { background: var(--sea-3); } :root[data-ico-theme="seaside"] .ico-share-picture img { border: 0; border-radius: 24px; box-shadow: 0 18px 50px var(--ico-shadow); } :root[data-ico-theme="seaside"] .ico-dialog-backdrop { background: rgba(18, 26, 36, 0.45); }