/* ========================================================================== Decoding Culture Foundation — Databases Editorial / archival theme: navy + gold, serif display, layered depth, light & dark (prefers-color-scheme). Tokens drive everything. ========================================================================== */ :root { color-scheme: light; /* Neutrals */ --bg: #eef1f6; --surface: #ffffff; --surface-2: #f6f8fb; --ink: #16202e; --ink-soft: #3c485a; --muted: #6a7688; --line: #e3e7ef; --line-strong: #d3d9e4; /* Brand */ --accent: #234a86; --accent-hover: #1b3c6f; --accent-ink: #ffffff; --gold: #b0863a; --gold-soft: #d9b978; /* Semantic badge palette */ --film: #1d4ed8; --film-bg: #e6edff; --tv: #7c3aed; --tv-bg: #f0e9ff; --warn: #b45309; --warn-bg: #fdf0d5; --program: #0f766e; --program-bg: #dbf1ee; --dead: #b42318; --dead-bg: #fdecea; --parent-bg: #eceff4; --parent-ink: #59647a; /* Form + surface accents (derived) */ --tint: color-mix(in srgb, var(--accent) 7%, var(--surface)); --tint-hover: color-mix(in srgb, var(--accent) 12%, var(--surface)); --ring: color-mix(in srgb, var(--accent) 35%, transparent); --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05); --shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 6px 18px rgba(16, 24, 40, .07); --shadow-lg: 0 10px 34px rgba(16, 24, 40, .14), 0 3px 8px rgba(16, 24, 40, .06); --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Dark theme. Applied via data-theme (set by an inline script from localStorage or the OS preference), so an in-page toggle can override the OS. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0d131e; --surface: #151d2b; --surface-2: #1b2434; --ink: #e7ecf4; --ink-soft: #b9c2d2; --muted: #8791a5; --line: #26303f; --line-strong: #33415a; --accent: #6ea1e6; --accent-hover: #85b3f0; --accent-ink: #0b1220; --gold: #d7b978; --gold-soft: #e6cf9d; --film: #9db8ff; --film-bg: rgba(60, 96, 210, .20); --tv: #c6acff; --tv-bg: rgba(124, 74, 234, .20); --warn: #e2a552; --warn-bg: rgba(180, 118, 20, .18); --program: #64cec2; --program-bg: rgba(15, 118, 110, .20); --dead: #f0948b; --dead-bg: rgba(180, 40, 30, .20); --parent-bg: #232d3d; --parent-ink: #97a2b6; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 2px 10px rgba(0, 0, 0, .45); --shadow-lg: 0 14px 44px rgba(0, 0, 0, .6), 0 3px 8px rgba(0, 0, 0, .5); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Soft ambient glow behind the whole page for depth. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1000px 520px at 12% -8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), radial-gradient(760px 520px at 102% -6%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 55%); } a { color: var(--accent); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--accent-hover); text-decoration: underline; } :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; } .wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; } /* ── Header ─────────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 20; background: var(--surface); background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid var(--line); } .site-header::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--gold) 85%); } .site-header .wrap { display: flex; align-items: center; gap: 10px 28px; min-height: 66px; flex-wrap: wrap; } .brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-serif); font-weight: 700; font-size: 1.16rem; color: var(--ink); letter-spacing: -.01em; } .brand:hover { text-decoration: none; } .brand-name { color: var(--ink); } .brand-sub { color: var(--muted); font-weight: 500; } .brand-mark { flex: none; display: block; border-radius: 8px; box-shadow: var(--shadow-sm); } .header-nav { display: flex; align-items: center; gap: 10px; margin-left: auto; } .site-header nav { display: flex; gap: 4px; } .site-header nav a { position: relative; color: var(--muted); padding: 8px 13px; border-radius: 8px; font-weight: 500; font-size: .95rem; transition: color .15s ease, background-color .15s ease; } .site-header nav a:hover { color: var(--ink); text-decoration: none; background: color-mix(in srgb, var(--accent) 8%, transparent); } .site-header nav a.active { color: var(--accent); } .site-header nav a.active::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--gold); } /* Light / dark toggle */ .theme-toggle { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--tint); } .theme-toggle svg { width: 18px; height: 18px; display: block; } .theme-toggle .ic-sun { display: none; } :root[data-theme="dark"] .theme-toggle .ic-sun { display: block; } :root[data-theme="dark"] .theme-toggle .ic-moon { display: none; } main.wrap { padding-top: 40px; padding-bottom: 72px; } /* ── Typography ─────────────────────────────────────────────────────────── */ h1 { font-family: var(--font-serif); font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 14px; } h2 { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; margin: 40px 0 14px; } .muted { color: var(--muted); } .mono { font-family: var(--font-mono); font-size: .9em; } /* ── Hero + home ────────────────────────────────────────────────────────── */ .hero { padding: 20px 0 8px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-family: var(--font-sans); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); } .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--gold); } .hero h1 { font-size: 2.5rem; max-width: 18ch; } .lede { font-size: 1.14rem; line-height: 1.6; color: var(--ink-soft); max-width: 65ch; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin: 36px 0 8px; } .stat { position: relative; overflow: hidden; display: flex; align-items: center; gap: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; color: var(--ink); box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--accent), var(--gold)); opacity: 0; transition: opacity .18s ease; } a.stat:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); } a.stat:hover::before { opacity: 1; } .stat-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); } .stat-ic svg { width: 24px; height: 24px; } .stat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .stat-num { font-family: var(--font-serif); font-size: 1.85rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; } .stat-label { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; } .agency-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .agency-grid a { display: flex; align-items: center; gap: 8px; padding: 13px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .agency-grid a:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); } .agency-grid .agency-name { font-weight: 600; } .agency-grid .muted { font-size: .9rem; } .agency-grid .count { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; font-size: .85rem; color: var(--accent); background: var(--tint); padding: 2px 9px; border-radius: 999px; } /* ── Static tables (noscript / misc) ────────────────────────────────────── */ .grid { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .grid th, .grid td { padding: 11px 15px; text-align: left; border-bottom: 1px solid var(--line); } .grid thead th { background: var(--surface-2); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; } .grid tbody tr:last-child td { border-bottom: 0; } .grid tbody tr:hover { background: var(--tint); } .grid .num { text-align: right; font-variant-numeric: tabular-nums; } .result-summary { color: var(--muted); margin: 2px 0 22px; font-size: 1.02rem; } .empty { color: var(--muted); padding: 24px 0; } /* ── Pager (static) ─────────────────────────────────────────────────────── */ .pager { display: flex; align-items: center; gap: 16px; margin-top: 20px; justify-content: center; } .pager .disabled { color: var(--muted); opacity: .5; } .pager-info { color: var(--muted); font-size: .9rem; } /* ── Badges ─────────────────────────────────────────────────────────────── */ .badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1.5; vertical-align: middle; letter-spacing: .01em; } .badge-film { background: var(--film-bg); color: var(--film); } .badge-tv { background: var(--tv-bg); color: var(--tv); } .badge-parent { background: var(--parent-bg); color: var(--parent-ink); } .badge-warn { background: var(--warn-bg); color: var(--warn); } .badge-program { background: var(--program-bg); color: var(--program); } .badge-dead { background: var(--dead-bg); color: var(--dead); } /* ── Title detail ───────────────────────────────────────────────────────── */ .breadcrumb { margin: 0 0 16px; font-size: .92rem; } .title-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .badges { display: flex; gap: 6px; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); margin-top: 8px; } .panel h2 { margin: 0 0 12px; font-size: 1.08rem; } .imdb-match { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; } .imdb-link { font-family: var(--font-mono); font-weight: 600; } .imdb-type { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft); padding: 1px 8px; border-radius: 6px; font-size: .8rem; } .genres { display: flex; gap: 5px; flex-wrap: wrap; width: 100%; } .tag { background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); padding: 1px 8px; border-radius: 6px; font-size: .75rem; } .collab-list { display: flex; flex-direction: column; gap: 14px; } .collab { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, border-color .15s ease; } .collab:hover { box-shadow: var(--shadow); border-color: var(--line-strong); } .collab-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .collab-head .agency-name { font-family: var(--font-serif); font-weight: 700; font-size: 1.12rem; } .docs { display: flex; flex-wrap: wrap; gap: 8px; } .doc-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--accent); font-size: .85rem; font-weight: 500; transition: border-color .15s ease, background-color .15s ease; } .doc-link:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--tint); text-decoration: none; } .doc-none { color: var(--muted); font-size: .9rem; font-style: italic; margin: 0; } .notfound { text-align: center; padding: 56px 0; } /* ── DataTables ─────────────────────────────────────────────────────────── */ .dt-container { margin-top: 4px; } .dt-container .dt-length, .dt-container .dt-search { margin-bottom: 14px; } .dt-container .dt-search { float: right; } .dt-container .dt-length { float: left; color: var(--muted); font-size: .9rem; } .dt-container .dt-search input.dt-input, .dt-container .dt-length select { padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: .9rem; margin: 0 4px; transition: border-color .15s ease, box-shadow .15s ease; } .dt-container .dt-search input.dt-input { min-width: 230px; } .dt-container .dt-search input.dt-input:focus, .dt-container .dt-length select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); } table.dataTable { width: 100% !important; border-collapse: separate; border-spacing: 0; clear: both; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } table.dataTable thead th { background: var(--surface-2); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--line-strong); padding: 12px 15px; text-align: left; } table.dataTable tbody td { padding: 11px 15px; border-bottom: 1px solid var(--line); } table.dataTable tbody tr:last-child td { border-bottom: 0; } table.dataTable tbody tr { transition: background-color .12s ease; } table.dataTable tbody tr:hover { background: var(--tint); } table.dataTable td.num, table.dataTable th.num { text-align: right; font-variant-numeric: tabular-nums; } table.dataTable td.imdb-col, table.dataTable th.imdb-col { text-align: center; width: 1%; white-space: nowrap; } .doc-num { display: inline-block; padding: 1px 8px; margin: 0 2px 2px 0; border: 1px solid var(--line-strong); border-radius: 6px; font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--accent); transition: border-color .15s ease, background-color .15s ease; } .doc-num:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--tint); text-decoration: none; } .doc-title-link.muted { color: var(--muted); } .imdb-cell img { display: inline-block; vertical-align: middle; border-radius: 3px; } .imdb-cell:hover { opacity: .8; } .dt-container .dt-info { color: var(--muted); font-size: .85rem; padding-top: 14px; } .dt-container .dt-paging { padding-top: 12px; } .dt-paging .dt-paging-button { padding: 6px 12px; margin: 0 2px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--ink) !important; cursor: pointer; font-size: .9rem; transition: border-color .15s ease, background-color .15s ease, color .15s ease; } .dt-paging .dt-paging-button.current { background: var(--accent); color: var(--accent-ink) !important; border-color: var(--accent); } .dt-paging .dt-paging-button.disabled { color: var(--muted) !important; opacity: .45; cursor: default; } .dt-paging .dt-paging-button:hover:not(.current):not(.disabled) { border-color: var(--accent); background: var(--tint); text-decoration: none; } /* ── Advanced search — custom filter panel ──────────────────────────────── */ .advanced-search { margin-bottom: 18px; } .as-bar { display: flex; align-items: center; gap: 12px; } .as-toggle { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); border-radius: var(--radius-sm); padding: 8px 14px; font-size: .9rem; font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease, box-shadow .15s ease; } .as-toggle:hover { border-color: var(--accent); color: var(--accent); } .as-toggle::after { content: "▾"; margin-left: 7px; font-size: .8em; color: var(--muted); } .as-toggle[aria-expanded="true"]::after { content: "▴"; } .as-count { color: var(--muted); font-size: .85rem; font-weight: 500; } .as-reset { margin-left: auto; background: var(--accent); border: 1px solid var(--accent); color: var(--accent-ink); border-radius: var(--radius-sm); padding: 8px 14px; font-size: .9rem; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-sm); transition: filter .15s ease, box-shadow .15s ease; } .as-reset::before { content: "\2715"; margin-right: 6px; font-weight: 700; } .as-reset:hover { filter: brightness(1.1); box-shadow: var(--shadow); } .as-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); margin-top: 12px; } .as-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; } .as-agencies { grid-column: 1 / -1; } .as-group { border: 0; margin: 0; padding: 0; min-width: 0; } .as-group legend { padding: 0; margin-bottom: 9px; color: var(--muted); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .as-hint { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .8; } .as-modes { display: flex; gap: 16px; margin-bottom: 11px; } .as-modes label { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; cursor: pointer; } .as-input { width: 100%; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: .9rem; transition: border-color .15s ease, box-shadow .15s ease; } .as-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); } .as-year-or { margin: 8px 0; color: var(--muted); font-size: .8rem; } .as-year-range { display: flex; align-items: center; gap: 8px; } .as-year-range .as-input { flex: 1 1 0; width: auto; min-width: 0; } .as-year-sep { flex: none; color: var(--muted); } .as-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px 14px; } .as-checks-inline { grid-template-columns: none; display: flex; gap: 18px; } .as-check { display: flex; align-items: center; gap: 7px; font-size: .9rem; cursor: pointer; } .as-check input { flex: none; accent-color: var(--accent); } .as-modes input { accent-color: var(--accent); } /* ── Footer ─────────────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--line); margin-top: 8px; background: var(--surface-2); } .site-footer .wrap { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding-top: 26px; padding-bottom: 26px; color: var(--muted); font-size: .86rem; } .footer-brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-serif); font-weight: 700; color: var(--ink); } .footer-sep { color: var(--line-strong); } .site-footer nav { margin-left: auto; display: flex; gap: 16px; } .site-footer nav a { color: var(--muted); } .site-footer nav a:hover { color: var(--accent); text-decoration: none; } /* ── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 720px) { .hero h1 { font-size: 2rem; } .header-nav { margin-left: 0; } .brand-sub { display: none; } } @media (max-width: 640px) { .grid { font-size: .92rem; } .dt-container .dt-search, .dt-container .dt-length { float: none; } .dt-container .dt-search input.dt-input { min-width: 0; width: 100%; } .as-grid { grid-template-columns: 1fr; } .site-footer nav { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }