/* ========================================================================= DIGIMON DATABANK — orient-luxury design system Dark mode is the default theme. Light/parchment mode toggled via [data-theme] on , persisted to localStorage key "wb_theme". ========================================================================= */ :root { --ol-bg: #09080b; --ol-bg-raised: #101017; --ol-panel: rgba(255, 255, 255, 0.035); --ol-panel-border: rgba(201, 168, 76, 0.18); --ol-hairline: rgba(201, 168, 76, 0.14); --ol-gold: #c9a84c; --ol-gold-bright: #ecd27f; --ol-gold-dim: #7d6a3a; --ol-ink: #efe9db; --ol-ink-dim: #a79f8d; --ol-ink-faint: #6f6a5e; --ol-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); /* Digivice level-accent stack — small, deliberate, secondary to gold */ --lv-fresh: #7fa0c9; --lv-training: #6f9bb8; --lv-rookie: #6fae8c; --lv-champion: #c9a84c; --lv-ultimate: #c0793f; --lv-mega: #b04b42; --lv-armor: #a67c3d; --lv-unknown: #79766d; --font-display: 'Cinzel', 'Times New Roman', serif; --font-body: 'Cormorant Garamond', Georgia, serif; --font-ui: 'Syne', 'Helvetica Neue', sans-serif; --font-mono: 'IBM Plex Mono', 'Courier New', monospace; } html[data-theme="light"] { --ol-bg: #f4efe1; --ol-bg-raised: #ece4cf; --ol-panel: rgba(28, 23, 18, 0.03); --ol-panel-border: rgba(138, 104, 32, 0.22); --ol-hairline: rgba(138, 104, 32, 0.2); --ol-gold: #8a6820; --ol-gold-bright: #6b4f16; --ol-gold-dim: #b79654; --ol-ink: #1c1712; --ol-ink-dim: #5b5344; --ol-ink-faint: #8a8172; --ol-shadow: 0 20px 46px rgba(60, 45, 20, 0.16); } /* [hidden] declared near top — prevents author-style specificity from silently defeating the attribute (known CIO Factory pitfall). */ [hidden] { display: none !important; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--ol-bg); color: var(--ol-ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } body { min-height: 100vh; position: relative; overflow-x: hidden; transition: background-color 0.4s ease, color 0.4s ease; } a { color: inherit; } button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; } ::selection { background: var(--ol-gold); color: var(--ol-bg); } :focus-visible { outline: 2px solid var(--ol-gold-bright); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ---- grain overlay ---- */ .ol-grain { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; mix-blend-mode: soft-light; opacity: 0.6; } .ol-app { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 28px 96px; } /* ========================================================================= HEADER ========================================================================= */ .db-header { padding: 26px 0 10px; } .db-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .db-brand { display: flex; align-items: center; gap: 12px; } .db-mark-ring { fill: none; stroke: var(--ol-gold-dim); stroke-width: 1; } .db-mark-ring-inner { fill: none; stroke: var(--ol-gold); stroke-width: 1.1; } .db-mark-dot { fill: var(--ol-gold-bright); } .db-brand-text { display: flex; flex-direction: column; line-height: 1.15; } .db-brand-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.03em; color: var(--ol-ink); } .db-brand-sub { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ol-ink-faint); margin-top: 3px; } .db-theme-toggle { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--ol-panel-border); border-radius: 999px; background: var(--ol-panel); color: var(--ol-ink-dim); font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.06em; transition: border-color 0.25s ease, color 0.25s ease; } .db-theme-toggle:hover { border-color: var(--ol-gold); color: var(--ol-ink); } .db-theme-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } .db-theme-toggle svg circle { fill: currentColor; stroke: none; } html[data-theme="dark"] .db-theme-icon-sun, html[data-theme="light"] .db-theme-icon-moon { display: none; } /* ========================================================================= HERO ========================================================================= */ .db-hero { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 40px; padding: 44px 0 40px; border-bottom: 1px solid var(--ol-hairline); } .db-hero-scanner { display: flex; justify-content: center; } .db-eyebrow { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ol-gold); margin: 0 0 12px; } .db-hero-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.06; margin: 0 0 18px; color: var(--ol-ink); letter-spacing: 0.01em; } .db-hero-text { font-family: var(--font-body); font-size: 1.18rem; line-height: 1.55; color: var(--ol-ink-dim); max-width: 46ch; margin: 0; } /* ========================================================================= DIGIVICE SCANNER — signature element ========================================================================= */ .digivice-scanner { display: block; overflow: visible; } .dvs-ring { fill: none; stroke: var(--ol-gold-dim); stroke-width: 1; } .dvs-ring-outer { stroke: var(--ol-gold); stroke-width: 1.1; animation: dvs-spin 60s linear infinite; transform-origin: 150px 150px; stroke-dasharray: 3 7; } .dvs-ring-mid { stroke: var(--ol-gold-dim); stroke-dasharray: 1 5; animation: dvs-spin-rev 46s linear infinite; transform-origin: 150px 150px; } .dvs-ring-inner { stroke: var(--ol-gold-bright); opacity: 0.6; } .dvs-crosshair { stroke: var(--ol-gold-dim); stroke-width: 1; } .dvs-core { fill: var(--ol-gold-bright); } .dvs-sweep-group { animation: dvs-spin 5.5s linear infinite; transform-origin: 150px 150px; } .dvs-sweep { fill: var(--ol-gold); opacity: 0.06; } .dvs-ticks line, .dvs-hexnodes circle { stroke: var(--ol-gold-dim); } @keyframes dvs-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes dvs-spin-rev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } .db-empty-scanner .dvs-ring-outer, .db-empty-scanner .dvs-ring-mid { animation-duration: 90s; } /* Loading / scanning state applied to hero scanner while a search is in flight */ .db-hero-scanner.is-scanning .dvs-ring-outer { animation-duration: 2.2s; } .db-hero-scanner.is-scanning .dvs-ring-mid { animation-duration: 1.7s; } .db-hero-scanner.is-scanning .dvs-sweep-group { animation-duration: 1.1s; } .db-hero-scanner.is-scanning .dvs-core { animation: dvs-pulse 1s ease-in-out infinite; } @keyframes dvs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } /* ========================================================================= TABS ========================================================================= */ .db-tabs { display: flex; gap: 6px; padding: 26px 0 0; } .db-tab { font-family: var(--font-ui); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; padding: 12px 20px; color: var(--ol-ink-faint); border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 9px; transition: color 0.2s ease, border-color 0.2s ease; } .db-tab-index { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ol-gold-dim); } .db-tab:hover { color: var(--ol-ink); } .db-tab.is-active { color: var(--ol-gold-bright); border-color: var(--ol-gold); } .db-tab.is-active .db-tab-index { color: var(--ol-gold); } .db-tab-count { font-family: var(--font-mono); font-size: 0.66rem; background: var(--ol-panel); border: 1px solid var(--ol-panel-border); border-radius: 999px; padding: 1px 8px; color: var(--ol-ink-dim); } /* ========================================================================= PANELS / SEARCH ========================================================================= */ .db-panel { padding-top: 30px; } .db-search-block { border: 1px solid var(--ol-panel-border); background: var(--ol-panel); border-radius: 4px; padding: 22px 24px 24px; } .db-search-type { display: flex; gap: 8px; margin-bottom: 16px; } .db-type-btn { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.05em; padding: 8px 14px; border: 1px solid var(--ol-panel-border); border-radius: 999px; color: var(--ol-ink-dim); transition: all 0.2s ease; } .db-type-btn:hover { border-color: var(--ol-gold-dim); color: var(--ol-ink); } .db-type-btn.is-active { background: var(--ol-gold); border-color: var(--ol-gold); color: var(--ol-bg); font-weight: 700; } .db-search-field { display: flex; align-items: center; border: 1px solid var(--ol-panel-border); border-radius: 3px; background: var(--ol-bg-raised); overflow: hidden; } .db-search-input { flex: 1; border: none; background: transparent; color: var(--ol-ink); font-family: var(--font-mono); font-size: 0.95rem; padding: 14px 16px; } .db-search-input:focus { outline: none; } .db-search-input::placeholder { color: var(--ol-ink-faint); } .db-search-submit { padding: 0 18px; align-self: stretch; color: var(--ol-gold); border-left: 1px solid var(--ol-panel-border); transition: background 0.2s ease; } .db-search-submit:hover { background: var(--ol-panel); } .db-search-submit svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .db-search-form { position: relative; } .db-suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 10; margin: 0; padding: 6px; list-style: none; background: var(--ol-bg-raised); border: 1px solid var(--ol-panel-border); border-radius: 3px; box-shadow: var(--ol-shadow); max-height: 320px; overflow-y: auto; } .db-suggestion { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 2px; cursor: pointer; transition: background 0.15s ease; } .db-suggestion:hover, .db-suggestion.is-highlighted { background: var(--ol-panel); } .db-suggestion-thumb { width: 30px; height: 30px; flex: none; border-radius: 2px; background: var(--ol-bg); object-fit: contain; padding: 3px; } .db-suggestion-name { font-family: var(--font-ui); font-size: 0.82rem; color: var(--ol-ink); flex: 1; } .db-suggestion-level { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--suggestion-color, var(--ol-ink-faint)); } [data-level-accent="fresh"].db-suggestion { --suggestion-color: var(--lv-fresh); } [data-level-accent="training"].db-suggestion { --suggestion-color: var(--lv-training); } [data-level-accent="rookie"].db-suggestion { --suggestion-color: var(--lv-rookie); } [data-level-accent="champion"].db-suggestion { --suggestion-color: var(--lv-champion); } [data-level-accent="ultimate"].db-suggestion { --suggestion-color: var(--lv-ultimate); } [data-level-accent="mega"].db-suggestion { --suggestion-color: var(--lv-mega); } [data-level-accent="armor"].db-suggestion { --suggestion-color: var(--lv-armor); } .db-level-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .db-level-chip { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.03em; padding: 7px 13px; border-radius: 3px; border: 1px solid var(--ol-panel-border); color: var(--ol-ink-dim); display: inline-flex; align-items: center; gap: 7px; transition: all 0.2s ease; } .db-level-chip:hover { color: var(--ol-ink); border-color: var(--chip-color, var(--ol-gold)); } .db-level-chip.is-active { color: var(--ol-bg); background: var(--chip-color, var(--ol-gold)); border-color: var(--chip-color, var(--ol-gold)); font-weight: 600; } .db-level-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--chip-color, var(--ol-gold)); flex: none; } .db-status { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ol-ink-faint); min-height: 20px; padding: 18px 2px 4px; letter-spacing: 0.02em; } .db-status.is-error { color: #c0793f; } /* ========================================================================= RESULT CARDS ========================================================================= */ .db-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 16px; padding-top: 10px; } .db-card { position: relative; border: 1px solid var(--ol-panel-border); background: var(--ol-panel); border-radius: 4px; overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease; } .db-card:hover { border-color: var(--ol-gold); transform: translateY(-2px); } .db-card-open { display: flex; flex-direction: column; width: 100%; padding: 0 0 14px; text-align: left; } .db-card-media { display: block; aspect-ratio: 1 / 1; background: var(--ol-bg-raised); position: relative; overflow: hidden; } .db-card-media::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, transparent 40%, rgba(0,0,0,0.25) 100%); pointer-events: none; } .db-card-img { width: 100%; height: 100%; object-fit: contain; padding: 14px; display: block; } .db-card-name { font-family: var(--font-display); font-size: 0.96rem; font-weight: 600; color: var(--ol-ink); padding: 12px 14px 6px; letter-spacing: 0.01em; } .db-card-level { margin: 0 14px; align-self: flex-start; } .db-card-bookmark { position: absolute; top: 8px; right: 8px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(9, 8, 11, 0.55); color: var(--ol-ink-faint); border: 1px solid var(--ol-panel-border); backdrop-filter: blur(2px); transition: color 0.2s ease, border-color 0.2s ease; } .db-card-bookmark:hover { color: var(--ol-gold-bright); border-color: var(--ol-gold); } .db-card-bookmark.is-active { color: var(--ol-gold-bright); } .db-card-bookmark.is-active .db-crest-icon { fill: var(--ol-gold-bright); } .db-crest-icon { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; } /* ---- level badge, colored via accent-key data attribute ---- */ .db-level-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--badge-color, var(--ol-gold)); color: var(--badge-color, var(--ol-gold)); } .db-level-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--badge-color, var(--ol-gold)); } [data-level-accent="fresh"] { --badge-color: var(--lv-fresh); --chip-color: var(--lv-fresh); } [data-level-accent="training"] { --badge-color: var(--lv-training); --chip-color: var(--lv-training); } [data-level-accent="rookie"] { --badge-color: var(--lv-rookie); --chip-color: var(--lv-rookie); } [data-level-accent="champion"] { --badge-color: var(--lv-champion); --chip-color: var(--lv-champion); } [data-level-accent="ultimate"] { --badge-color: var(--lv-ultimate); --chip-color: var(--lv-ultimate); } [data-level-accent="mega"] { --badge-color: var(--lv-mega); --chip-color: var(--lv-mega); } [data-level-accent="armor"] { --badge-color: var(--lv-armor); --chip-color: var(--lv-armor); } [data-level-accent="unknown"] { --badge-color: var(--lv-unknown); --chip-color: var(--lv-unknown); } /* ========================================================================= BOOKMARKS ========================================================================= */ .db-bookmarks-head { padding-bottom: 6px; } .db-bookmarks-note { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ol-ink-faint); margin: 0; } .db-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 64px 20px; gap: 10px; } .db-empty-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--ol-ink); margin: 6px 0 0; } .db-empty-text { font-family: var(--font-body); font-size: 1rem; color: var(--ol-ink-faint); margin: 0; max-width: 40ch; } /* ========================================================================= DETAIL OVERLAY ========================================================================= */ .db-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; } .db-overlay-backdrop { position: absolute; inset: 0; background: rgba(4, 3, 5, 0.72); backdrop-filter: blur(3px); } html[data-theme="light"] .db-overlay-backdrop { background: rgba(28, 23, 18, 0.45); } .db-detail-card { position: relative; z-index: 1; width: 100%; max-width: 720px; max-height: 88vh; overflow-y: auto; display: grid; grid-template-columns: 260px 1fr; background: var(--ol-bg-raised); border: 1px solid var(--ol-panel-border); border-radius: 6px; box-shadow: var(--ol-shadow); animation: db-detail-in 0.28s ease; } @keyframes db-detail-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } } .db-detail-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ol-ink-dim); border: 1px solid var(--ol-panel-border); background: var(--ol-panel); } .db-detail-close:hover { color: var(--ol-ink); border-color: var(--ol-gold); } .db-detail-close svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .db-detail-frame { position: relative; background: var(--ol-bg); display: flex; align-items: center; justify-content: center; padding: 30px; } .db-detail-scanner { position: absolute; inset: 0; margin: auto; opacity: 0.9; } .db-detail-img { position: relative; z-index: 1; width: 78%; height: auto; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(0,0,0,0.4)); } .db-detail-body { padding: 34px 30px 30px 24px; display: flex; flex-direction: column; } .db-detail-eyebrow { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ol-gold); margin: 0 0 6px; } .db-detail-name { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; color: var(--ol-ink); margin: 0 0 12px; } .db-detail-fields { margin: 20px 0 0; display: flex; flex-direction: column; gap: 12px; } .db-detail-field { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--ol-hairline); padding-bottom: 10px; } .db-detail-field dt { font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ol-ink-faint); margin: 0; } .db-detail-field dd { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ol-ink); margin: 0; text-align: right; } .db-detail-note { font-family: var(--font-body); font-style: italic; font-size: 1.02rem; line-height: 1.5; color: var(--ol-ink-dim); margin: 18px 0 0; } .db-bookmark-btn { margin-top: 24px; display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; padding: 11px 20px; border: 1px solid var(--ol-gold); border-radius: 3px; color: var(--ol-gold-bright); font-family: var(--font-ui); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; transition: all 0.2s ease; } .db-bookmark-btn:hover { background: var(--ol-gold); color: var(--ol-bg); } .db-bookmark-btn.is-active { background: var(--ol-gold); color: var(--ol-bg); } .db-bookmark-btn.is-active .db-crest-icon { fill: var(--ol-bg); } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 720px) { .ol-app { padding: 0 18px 72px; } .db-hero { grid-template-columns: 1fr; text-align: center; padding-top: 30px; } .db-hero-scanner svg { width: 150px; height: 150px; } .db-hero-text { margin: 0 auto; } .db-detail-card { grid-template-columns: 1fr; max-height: 92vh; } .db-detail-frame { padding-top: 44px; } .db-results { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } } @media (max-width: 420px) { .db-tabs { gap: 0; } .db-tab { padding: 10px 12px; font-size: 0.75rem; } .db-brand-title { font-size: 0.92rem; } }