/* ============================================================================= Zadis.se — site-wide styles ("Workroom" design system) --------------------------------------------------------------------------- CUSTOMIZING THE LOOK: neutrals and spacing live in the first :root block. Each subsite's accent color comes from ONE number — --hue — set per page (see includes/nav-config.php's $subsiteHues and includes/header.php). All nine accent roles below are derived from that single number via oklch(), so registering a new subsite's color is a one-line change, not nine. ============================================================================= */ /* --- Self-hosted fonts (no third-party requests — see assets/fonts/) --- */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/public-sans.woff2') format('woff2-variations'), url('../fonts/public-sans.woff2') format('woff2'); } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/source-serif-4.woff2') format('woff2-variations'), url('../fonts/source-serif-4.woff2') format('woff2'); } /* Whimsical script accents — used sparingly (see --font-script-* below), never for body copy. Both self-hosted for the same reason as the two fonts above: no third-party requests from a small Swedish personal site. */ @font-face { font-family: 'Satisfy'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/satisfy.woff2') format('woff2'); } @font-face { font-family: 'Bad Script'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/bad-script.woff2') format('woff2'); } :root { /* --- Neutrals (cool, muted teal-blue palette) --- */ --color-bg: #f7f9fb; --color-surface: #fbfdff; --color-surface-tint: #f0f4f8; --color-dark: #1f2a35; --color-text: #2a3a48; --color-text-muted: #5a6b7a; --color-text-caption: #7a8b9a; --color-text-faint: #9aabba; --color-disabled: #b0bfca; --color-border: #dfe6eb; --color-border-alt: #dce3e8; --color-input-border: #d3dce3; --color-text-on-dark: #e8eef4; --color-success: #4a7a9e; --color-success-tint: #e3eff5; --color-danger: #8a5a9e; --color-danger-tint: #f0e3f5; /* --- Type --- --font-heading: italic serif, used for warm/personal headings (h1/h2) --font-display: heavy grotesque sans, used for confident editorial moments — landing wordmark, stat numbers, eyebrow labels, badges */ --font-heading: 'Source Serif 4', Georgia, 'Iowan Old Style', serif; --font-display: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Script accents — a whimsical flourish, used only on the landing tagline and the Fountain Pens & Inks header (a nod to actual handwriting). Never used for body copy or anything that must stay easily legible. */ --font-script-main: 'Satisfy', var(--font-heading); --font-script-lowkey: 'Bad Script', var(--font-heading); /* --- Spacing scale --- */ --space-xs: 0.375rem; --space-sm: 0.75rem; --space-md: 1.25rem; --space-lg: 2rem; --space-xl: 3.5rem; --gutter: 2.75rem; /* 44px page gutter on subsite pages */ /* --- Shape --- */ --radius-sm: 8px; --radius-md: 14px; /* card radius */ --radius-lg: 20px; --radius-pill: 18px; --shadow-soft: 0 1px 2px rgba(20, 24, 29, 0.05); --shadow-lift: 0 6px 18px rgba(0, 0, 0, 0.10); --shadow-drawer: 0 6px 18px rgba(0, 0, 0, 0.12); --max-width: 1100px; /* --- Per-subsite accent system --- A page sets --hue on (see header.php); every role below is derived from that one number. Registered hues: fine-writing 255 (blue), characters 320 (violet), cards 20 (warm red), wishlist 170 (teal). Reserve new hues spaced around the wheel (e.g. 85, 130, 300). */ --hue: 255; --accent-solid: oklch(.52 .12 var(--hue)); /* dots, spine, active pill, primary btn */ --accent-bright: oklch(.62 .12 var(--hue)); /* hobby dots on dark bar */ --accent-heading: oklch(.35 .09 var(--hue)); /* headings on tint */ --accent-stat: oklch(.45 .11 var(--hue)); /* stat numbers */ --accent-header-bg: oklch(.962 .012 var(--hue)); /* tinted header background */ --accent-chip-bg: oklch(.95 .015 var(--hue)); /* chip/tag background */ --accent-chip-text: oklch(.45 .1 var(--hue)); /* chip/tag text */ --accent-row-bg: oklch(.962 .012 var(--hue)); /* landing row background */ --accent-row-hover: oklch(.945 .02 var(--hue)); /* landing row hover */ /* Legacy aliases — admin.css and any not-yet-restyled template still uses these names, so the admin panel keeps its own consistent look without needing to be touched by this redesign. */ --color-accent: var(--accent-solid); --color-accent-hover: oklch(.44 .13 var(--hue)); --color-accent-tint: var(--accent-chip-bg); } /* --- Animations --- */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } /* --- Reset & base --- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); line-height: 1.55; font-size: 16px; animation: fadeIn 0.4s ease; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500; line-height: 1.2; margin: 0 0 var(--space-sm); color: var(--color-text); transition: color 0.2s ease; } h1 { font-size: 2.75rem; font-style: italic; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: proportional-nums; } h2 { font-size: 1.85rem; font-style: italic; font-weight: 600; } h3 { font-size: 1.35rem; font-weight: 600; text-transform: none; letter-spacing: -0.01em; } h4 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.005em; } p { margin: 0 0 var(--space-md); } a { color: var(--color-accent); text-decoration: none; transition: color 0.2s ease, text-decoration-color 0.2s ease; } a:hover { color: var(--color-accent-hover); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } img { max-width: 100%; display: block; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-accent); color: #fff; padding: var(--space-sm) var(--space-md); z-index: 100; } .skip-link:focus { left: 0; } /* ============================================================================= Workroom bar — dark top bar shared by every subsite page ============================================================================= */ .workroom-bar { background: var(--color-dark); padding: 1rem var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; } .workroom-bar__crumbs { font-family: var(--font-display); font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; text-transform: uppercase; color: #fff; display: flex; align-items: center; gap: 0.4rem; } .workroom-bar__crumbs a { color: #fff; } .workroom-bar__crumbs .crumb-sep, .workroom-bar__crumbs .crumb-current { color: var(--color-text-muted); font-weight: 400; font-size: 0.9rem; } .workroom-bar__right { display: flex; align-items: center; gap: 1rem; } .hobby-dots { display: flex; gap: 0.5rem; align-items: center; } .hobby-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; background: var(--accent-bright); opacity: 0.45; transition: opacity 0.15s ease, transform 0.15s ease; } .hobby-dot:hover { opacity: 1; transform: scale(1.15); } .hobby-dot.is-current { opacity: 1; outline: 2px solid var(--color-text-on-dark); outline-offset: 2px; } .hobby-dot.is-upcoming { opacity: 0.3; border: 1px dashed var(--color-text-muted); background: transparent !important; } .edit-toggle { font-size: 0.8rem; padding: 0.3rem 0.8rem; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.08); color: var(--color-text-on-dark) !important; } .edit-toggle:hover { background: rgba(255, 255, 255, 0.16); text-decoration: none; } .edit-toggle.is-editing { background: var(--accent-bright); color: var(--color-dark) !important; font-weight: 600; } /* ============================================================================= Tinted subsite header (spine + title + stats) ============================================================================= */ .subsite-header { background: var(--accent-header-bg); padding: var(--gutter) var(--gutter) 0; display: grid; grid-template-columns: 6px 1fr auto; gap: 1.25rem; align-items: stretch; } .subsite-header__spine { background: var(--accent-solid); border-radius: 3px; } .subsite-header__body { padding-bottom: 1.75rem; } .subsite-header__body h1 { font-size: 2.75rem; color: var(--accent-heading); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.85rem; } .subsite-header__body p { max-width: 520px; color: var(--color-text-muted); margin-bottom: 0; } .stats-cluster { display: flex; gap: 2rem; padding-bottom: 1.75rem; align-self: end; } .stat { text-align: right; } .stat__number { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2.25rem; line-height: 1; color: var(--accent-stat); letter-spacing: -0.02em; } .stat__label { font-family: var(--font-display); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); } /* Fountain Pens & Inks: a low-key script flourish on the header title only — a small nod to actual handwriting on the one subsite about writing. */ .subsite-fine-writing .subsite-header__body h1 { font-family: var(--font-script-lowkey); font-weight: 400; font-size: 3rem; letter-spacing: 0.01em; } @media (max-width: 720px) { .subsite-header { grid-template-columns: 6px 1fr; } .stats-cluster { display: none; } } /* ============================================================================= Tabs + filter pills ============================================================================= */ .tabs-nav { display: flex; gap: 0.25rem; padding: 0 var(--gutter); background: var(--color-bg); border-bottom: 1px solid var(--color-border); flex-wrap: wrap; } .tabs-nav a { padding: 0.75rem 1.1rem; color: var(--color-text-muted); border-radius: 10px 10px 0 0; font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; position: relative; transition: color 0.2s ease, background 0.15s ease; } .tabs-nav a:hover { text-decoration: none; color: var(--accent-solid); background: var(--accent-chip-bg); } .tabs-nav a.is-active { background: var(--color-bg); color: var(--accent-solid); font-weight: 600; box-shadow: inset 0 -3px 0 var(--accent-solid); } .filter-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 1.5rem var(--gutter) 1.25rem; } .filter-pill { padding: 0.4rem 1rem; border-radius: var(--radius-pill); border: 1.5px solid var(--color-input-border); background: #fff; color: var(--color-text-muted); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .filter-pill:hover { text-decoration: none; border-color: var(--accent-solid); color: var(--accent-solid); transform: translateY(-2px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); } .filter-pill.is-active { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; font-weight: 600; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transform: scale(1.02); } .filter-pills__count { margin-left: auto; color: var(--color-text-faint); font-size: 0.8rem; white-space: nowrap; } .filter-pills__search { display: flex; align-items: center; } .filter-pills__search input { padding: 0.4rem 0.9rem; border-radius: var(--radius-pill); border: 1px solid var(--color-input-border); font-size: 0.85rem; font-family: var(--font-body); } .filter-pills__search button { margin-left: 0.4rem; } .subsite-content { padding: 0 var(--gutter) var(--gutter); } /* ============================================================================= Layout (legacy — kept for any page not yet migrated to the workroom shell) ============================================================================= */ .site-header { background: var(--color-surface-tint); border-bottom: 1px solid var(--color-border); } .site-header__inner { max-width: var(--max-width); margin: 0 auto; padding: var(--space-md) var(--space-lg); display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; } .site-brand { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 600; color: var(--color-text); margin-right: auto; } .site-brand:hover { text-decoration: none; color: var(--color-accent); } .site-nav { display: flex; gap: var(--space-md); flex-wrap: wrap; } .site-nav a { color: var(--color-text); font-size: 0.95rem; } .site-header__admin { display: flex; gap: var(--space-sm); font-size: 0.85rem; } .site-header__admin a { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); background: var(--color-accent-tint); } .site-main { max-width: var(--max-width); margin: 0 auto; padding: var(--space-lg); min-height: 60vh; } .site-footer { color: var(--color-text-faint); padding: var(--space-lg) var(--gutter); font-size: 0.75rem; margin-top: var(--space-lg); border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); } .site-footer a { color: var(--accent-solid); } /* --- Flash messages --- */ .flash { max-width: var(--max-width); margin: var(--space-md) auto 0; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); } .flash--success { background: var(--color-success-tint); color: var(--color-success); } .flash--error { background: var(--color-danger-tint); color: var(--color-danger); } /* --- Buttons --- */ .btn { display: inline-block; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); background: var(--color-accent); color: #fff; border: none; cursor: pointer; font-size: 0.95rem; font-family: var(--font-body); font-weight: 600; transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .btn:hover { background: var(--color-accent-hover); color: #fff; text-decoration: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--secondary { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); } .btn--secondary:hover { background: var(--color-surface-tint); color: var(--color-text); border-color: var(--accent-solid); } .btn--danger { background: var(--color-danger); } .btn--small { padding: var(--space-xs) var(--space-sm); font-size: 0.85rem; } /* --- Cards / grids (reused across all subsites) --- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-lg); } .grid > * { animation: slideUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-fill-mode: both; } .grid > :nth-child(1) { animation-delay: 0.05s; } .grid > :nth-child(2) { animation-delay: 0.1s; } .grid > :nth-child(3) { animation-delay: 0.15s; } .grid > :nth-child(4) { animation-delay: 0.2s; } .grid > :nth-child(5) { animation-delay: 0.25s; } .grid > :nth-child(n+6) { animation-delay: 0.3s; } .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); transition: box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.2s ease; display: flex; flex-direction: column; position: relative; } .card:hover { box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16); border-color: var(--accent-solid); transform: translateY(-6px) rotate(-0.6deg); z-index: 2; } .card__image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--color-surface-tint); transition: transform 0.4s ease; } .card:hover .card__image { transform: scale(1.04); } .card__body { padding: var(--space-md); flex: 1; display: flex; flex-direction: column; gap: var(--space-xs); transition: background 0.25s ease; } .card:hover .card__body { background: var(--accent-chip-bg); } .card__title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; transition: color 0.2s ease; } .card__title a { color: var(--color-text); transition: color 0.2s ease; } .card:hover .card__title a { color: var(--accent-solid); } .card__meta { color: var(--color-text-muted); font-size: 0.85rem; transition: color 0.2s ease; } /* Ink card variant: gradient colour swatch instead of a photo */ .ink-card__swatch { height: 96px; border-radius: var(--radius-md) var(--radius-md) 0 0; } .tag { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--accent-chip-bg); color: var(--accent-chip-text); font-size: 0.8rem; font-weight: 500; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .tag:hover { background: var(--accent-solid); color: #fff; transform: scale(1.05); } /* Avatar circle (character codex) */ .avatar-circle { width: 54px; height: 54px; border-radius: 50%; background: var(--accent-chip-bg); color: var(--accent-heading); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 1.3rem; flex-shrink: 0; } .avatar-circle--sm { width: 44px; height: 44px; font-size: 1rem; } /* --- Masonry (wishlist, card gallery) --- */ .masonry { column-count: 3; column-gap: var(--space-md); } .masonry .card { break-inside: avoid; margin-bottom: var(--space-md); animation: slideUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-fill-mode: both; } .masonry .card:nth-child(1) { animation-delay: 0.05s; } .masonry .card:nth-child(2) { animation-delay: 0.1s; } .masonry .card:nth-child(3) { animation-delay: 0.15s; } .masonry .card:nth-child(n+4) { animation-delay: 0.2s; } @media (max-width: 900px) { .masonry { column-count: 2; } } @media (max-width: 560px) { .masonry { column-count: 1; } } /* --- Filter bar (legacy select-based; still used by not-yet-migrated pages) --- */ .filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-sm); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); margin-bottom: var(--space-lg); align-items: end; } .filter-bar label { display: block; font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 0.2rem; } .filter-bar select, .filter-bar input { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-family: var(--font-body); } /* --- Forms (admin + public where relevant) --- */ .form-field { margin-bottom: var(--space-md); } .form-field label { display: block; font-weight: 600; margin-bottom: var(--space-xs); font-size: 0.9rem; } .form-field input[type="text"], .form-field input[type="number"], .form-field input[type="date"], .form-field input[type="url"], .form-field input[type="password"], .form-field input[type="color"], .form-field select, .form-field textarea { width: 100%; padding: var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 1rem; background: var(--color-surface); color: var(--color-text); } .form-field textarea { resize: vertical; min-height: 6rem; } .form-hint { color: var(--color-text-muted); font-size: 0.8rem; margin-top: 0.25rem; } .form-row { display: flex; gap: var(--space-md); flex-wrap: wrap; } .form-row > .form-field { flex: 1; min-width: 200px; } .color-swatch { display: inline-block; width: 1em; height: 1em; border-radius: 50%; border: 1px solid var(--color-border); vertical-align: middle; margin-right: 0.4em; } .rating-stars { color: var(--color-accent); letter-spacing: 1px; } /* --- Detail page layout --- */ .detail { display: grid; grid-template-columns: minmax(240px, 360px) 1fr; gap: var(--space-lg); } @media (max-width: 720px) { .detail { grid-template-columns: 1fr; } } .detail__gallery img { border-radius: var(--radius-md); margin-bottom: var(--space-sm); } .detail__thumbs { display: flex; gap: var(--space-xs); flex-wrap: wrap; } .detail__thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); cursor: pointer; } /* --- Empty state --- */ .empty-state { text-align: center; padding: var(--space-xl); color: var(--color-text-muted); } /* ============================================================================= Landing page — two-column "Workroom" layout ============================================================================= */ .landing-shell { display: grid; grid-template-columns: 360px 1fr; min-height: 100vh; } @media (max-width: 900px) { .landing-shell { grid-template-columns: 1fr; } } .landing-sidebar { background: var(--color-dark); color: var(--color-text-on-dark); padding: 2.75rem 2.5rem 2.25rem; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } @media (max-width: 900px) { .landing-sidebar { position: static; height: auto; } } .landing-sidebar__brand { font-family: var(--font-display); font-weight: 900; font-size: 2rem; letter-spacing: -0.03em; text-transform: uppercase; color: #fff; } .landing-sidebar__domain { font-family: var(--font-display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #6a7480; margin-top: 0.3rem; } .landing-sidebar h1 { font-family: var(--font-script-main); font-size: 2.9rem; font-weight: 400; font-style: normal; line-height: 1.25; color: #fff; margin: 1.5rem 0 1rem; letter-spacing: 0.01em; } .landing-sidebar p { color: #9aa2ab; font-size: 0.875rem; line-height: 1.65; } .landing-sidebar__dots { display: flex; gap: 0.6rem; margin: 1.25rem 0; } .landing-sidebar__dots .hobby-dot { width: 22px; height: 22px; opacity: 1; } .landing-sidebar__upcoming { margin-top: auto; } .landing-sidebar__upcoming-label { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: #6a727b; margin-bottom: 0.4rem; } .landing-sidebar__upcoming p { color: #9aa2ab; font-size: 0.8rem; margin-bottom: 0; } .landing-main { padding: 1.75rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; align-content: start; } @media (max-width: 720px) { .landing-main { grid-template-columns: 1fr; } } .chapter-row { display: flex; flex-direction: column; background: var(--accent-row-bg); border-radius: var(--radius-lg); overflow: hidden; transition: background 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); position: relative; } .chapter-row:hover { background: var(--accent-row-hover); text-decoration: none; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16); transform: translateY(-6px) rotate(-0.5deg); z-index: 2; } .chapter-row__spine { display: none; } .chapter-row__peek { padding: 1.75rem 1.5rem 1rem; min-height: 96px; display: flex; gap: 0.5rem; align-items: center; justify-content: flex-start; } .chapter-row__numeral { position: absolute; top: 1.25rem; right: 1.5rem; font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--accent-solid); background: rgba(255, 255, 255, 0.7); width: 2.2rem; height: 2.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .chapter-row:hover .chapter-row__numeral { transform: scale(1.15) rotate(8deg); } .chapter-row__title { padding: 0.25rem 1.5rem 1.5rem; transition: transform 0.3s ease; } .chapter-row:hover .chapter-row__title { transform: translateX(3px); } .chapter-row__title h2 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; font-style: normal; letter-spacing: -0.01em; color: var(--accent-heading); margin-bottom: 0.25rem; transition: color 0.2s ease; } .chapter-row:hover .chapter-row__title h2 { color: var(--accent-solid); } .chapter-row__title p { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; transition: color 0.2s ease; } .chapter-row:hover .chapter-row__title p { color: var(--color-text); } /* Content peeks per subsite type — bigger & bolder for the tile layout */ .peek-swatches { display: flex; gap: 0.4rem; } .peek-swatches span { width: 30px; height: 72px; border-radius: 10px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); transition: transform 0.25s ease; } .chapter-row:hover .peek-swatches span:nth-child(odd) { transform: translateY(-4px); } .peek-avatars { display: flex; align-items: center; } .peek-avatars .avatar-circle { width: 56px; height: 56px; font-size: 1.15rem; margin-left: -14px; border: 3px solid var(--accent-row-bg); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); transition: transform 0.25s ease; } .peek-avatars .avatar-circle:first-child { margin-left: 0; } .chapter-row:hover .peek-avatars .avatar-circle:nth-child(even) { transform: translateY(-4px) rotate(-4deg); } .peek-more { margin-left: 0.5rem; color: var(--color-text-muted); font-size: 0.9rem; font-weight: 600; } .peek-cards { display: flex; gap: 0.5rem; } .peek-cards span { width: 68px; height: 88px; border-radius: 8px; background: repeating-linear-gradient(45deg, var(--accent-chip-bg), var(--accent-chip-bg) 6px, transparent 6px, transparent 12px); border: 1px solid var(--color-border); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); } .peek-cards span:nth-child(2) { transform: rotate(4deg); } .peek-cards span:nth-child(3) { transform: rotate(-3deg); } .peek-cards img { width: 68px; height: 88px; border-radius: 8px; object-fit: cover; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12); } .peek-masonry { display: flex; gap: 0.4rem; align-items: flex-end; } .peek-masonry span { width: 20px; border-radius: 8px; background: var(--accent-chip-bg); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08); } /* --- Legacy landing hero + tiles (kept in case any page still uses them) --- */ .hero { text-align: center; padding: var(--space-xl) var(--space-md); } .hero p { max-width: 640px; margin-left: auto; margin-right: auto; color: var(--color-text-muted); } .subsite-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-lg); margin-top: var(--space-lg); } .subsite-tile { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); text-align: center; box-shadow: var(--shadow-soft); transition: box-shadow 0.15s ease, transform 0.15s ease; } .subsite-tile:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); } .subsite-tile__icon { font-size: 2.2rem; margin-bottom: var(--space-sm); } .subsite-tile a { color: var(--color-text); } /* ============================================================================= Icons and decorative elements ============================================================================= */ .icon { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -0.125em; opacity: 0.7; transition: opacity 0.2s ease; } .icon--lg { width: 1.8em; height: 1.8em; } .icon--accent { color: var(--accent-solid); opacity: 1; } .section-icon { font-size: 2rem; margin-right: 0.5rem; opacity: 0.6; } /* ============================================================================= Editorial / bold-badge system — confident sans labels + circular accent badges, used on the landing hero and subsite headers. ============================================================================= */ .eyebrow { font-family: var(--font-display); font-weight: 800; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-solid); display: inline-flex; align-items: center; gap: 0.5rem; } .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-solid); flex-shrink: 0; } .badge-circle { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent-solid); color: #fff; font-family: var(--font-display); font-weight: 800; font-style: normal; font-size: 1.2rem; flex-shrink: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .badge-circle:hover { transform: scale(1.1) rotate(-6deg); } .badge-circle--lg { width: 3.6rem; height: 3.6rem; font-size: 1.6rem; } .badge-circle--outline { background: transparent; border: 2px solid var(--accent-solid); color: var(--accent-solid); box-shadow: none; } .divider { height: 1px; background: linear-gradient(to right, transparent, var(--color-border), transparent); margin: var(--space-lg) 0; } .accent-line { height: 2px; width: 2rem; background: var(--accent-solid); border-radius: 1px; margin: 0.5rem 0; } /* ============================================================================= Character hero + quote bar + accordion sections (modeled on the user's reference character-profile template: a tinted banner with a big italic name, a small-caps "handle" line, a pull-quote strip, and collapsible bio sections) ============================================================================= */ .character-hero { background: var(--accent-header-bg); padding: 3rem var(--gutter) 2.5rem; text-align: center; margin-bottom: 0; } .character-hero__name { font-family: var(--font-heading); font-style: italic; font-weight: 600; font-size: 3.25rem; color: var(--accent-heading); margin: 0 0 0.4rem; line-height: 1.1; } .character-hero__handle { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--accent-solid); } .quote-bar { max-width: var(--max-width); margin: 0 auto; padding: 0.9rem var(--gutter); display: flex; align-items: center; gap: 0.75rem; } .quote-bar__mark { width: 4px; align-self: stretch; background: var(--accent-solid); border-radius: 2px; flex-shrink: 0; } .quote-bar__text { font-family: var(--font-heading); font-style: italic; color: var(--color-text-muted); font-size: 1.05rem; } .accordion-section { border-radius: var(--radius-md); overflow: hidden; margin-bottom: 0.75rem; border: 1px solid var(--color-border); } .accordion-section__header { background: var(--accent-chip-bg); color: var(--accent-heading); font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; padding: 0.85rem 1.1rem; display: flex; align-items: center; gap: 0.6rem; } .accordion-item { border-top: 1px solid var(--color-border); } .accordion-item:first-of-type { border-top: none; } .accordion-item summary { cursor: pointer; padding: 0.75rem 1.1rem; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--color-text); list-style: none; display: flex; align-items: center; gap: 0.5rem; transition: background 0.15s ease, color 0.15s ease; } .accordion-item summary::-webkit-details-marker { display: none; } .accordion-item summary::before { content: "▸"; color: var(--accent-solid); transition: transform 0.2s ease; font-size: 0.75rem; } .accordion-item[open] summary::before { transform: rotate(90deg); } .accordion-item summary:hover { background: var(--accent-chip-bg); color: var(--accent-solid); } .accordion-item__body { padding: 0 1.1rem 1.1rem; color: var(--color-text-muted); line-height: 1.65; } .sidebar-note { background: var(--accent-chip-bg); border-radius: var(--radius-md); padding: 1rem 1.1rem; margin-bottom: 0.75rem; border-left: 3px solid var(--accent-solid); } .sidebar-note__title { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--accent-heading); margin-bottom: 0.35rem; } /* --- Inline editing affordances (see assets/js/inline-edit.js) --- */ .is-admin [data-editable] { outline: 1px dashed transparent; border-radius: var(--radius-sm); transition: outline-color 0.15s ease; position: relative; cursor: text; } .is-admin [data-editable]:hover { outline-color: var(--color-accent); } .is-admin [data-editable]::before { content: "✎ click to edit"; position: absolute; top: -1.4em; left: 0; font-size: 0.7rem; color: var(--color-accent); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .is-admin [data-editable]:hover::before { opacity: 1; } .is-admin [data-editable][contenteditable="true"] { outline: 2px solid var(--color-accent); background: var(--color-accent-tint); padding: var(--space-xs); } .inline-save-status { font-size: 0.75rem; color: var(--color-text-muted); margin-left: var(--space-sm); } .inline-save-status--ok { color: var(--color-success); } .inline-save-status--error { color: var(--color-danger); }